/* VT Africa system - main page. Builds on maintenance/assets/style.css */
.login-brand h1{ font-size:30px; text-transform:uppercase; letter-spacing:.04em; }
.login-brand svg{ width:40px; height:40px; color:var(--accent); flex:none; }
.tiles{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:700px){ .tiles{ grid-template-columns:1fr 1fr; } }
.tile{ display:flex; align-items:center; gap:14px; padding:18px; background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); text-decoration:none; color:inherit; min-height:96px; }
.tile:hover, .tile:focus-visible{ border-color:var(--accent); }
.tile-icon{ width:52px; height:52px; flex:none; display:grid; place-items:center; border-radius:12px; background:var(--accent-wash); color:var(--accent-strong); }
.tile-icon svg{ width:30px; height:30px; }
.tile.quiet .tile-icon{ background:var(--surface-2); color:var(--muted); }
.tile-text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tile-name{ font-family:var(--font-display); font-weight:700; font-size:22px; text-transform:uppercase; letter-spacing:.04em; line-height:1.1; }
.tile-sub{ color:var(--muted); font-size:13.5px; }
.tile-count{ align-self:flex-start; margin-top:6px; font-size:12.5px; font-weight:600; padding:2px 8px; border-radius:6px; background:var(--surface-2); border:1px solid var(--border); }
.tile-go{ font-size:28px; color:var(--muted); line-height:1; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.card .muted, .muted{ color:var(--muted); font-weight:400; }
.indent{ margin-left:30px; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
ol.steps{ padding-left:20px; margin:8px 0 0; } ol.steps li{ margin-bottom:6px; }
code{ font-family:var(--font-mono); background:var(--surface-2); padding:1px 5px; border-radius:4px; }
.logout{ display:flex; align-items:center; gap:8px; }
.check strong{ font-weight:600; }
/* Company logo: always on a white card so it shows in dark mode too */
.login-logo{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px; margin:0 auto 16px; max-width:260px; box-shadow:var(--shadow); }
.login-logo img{ display:block; width:100%; height:auto; }
.login-sub{ text-align:center; font-family:var(--font-display); font-size:20px; text-transform:uppercase; letter-spacing:.04em; margin:0 0 14px; }
.brand-logo{ width:34px; height:34px; flex:none; border-radius:8px; background:#fff; border:1px solid var(--border); object-fit:contain; }
/* Login heading: small logo on the left, company name beside it */
.login-brand{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.login-brand h1{ font-size:26px; line-height:1.05; }
.login-mark{ width:64px; height:64px; flex:none; border-radius:12px; background:#fff; border:1px solid var(--border); object-fit:contain; }

/* Version 14: notices bell, notices page and the master calendar */
:root{ --sec-maint:#B85C00; --sec-hr:#2F6FB2; --sec-fin:#0E7C6B; }
@media (prefers-color-scheme: dark){ :root{ --sec-maint:#F0A030; --sec-hr:#6EA8E8; --sec-fin:#3FCBB3; } }
.icon-btn.bell{ position:relative; }
.icon-btn.bell.has{ color:var(--bad); border-color:var(--bad); }
.bell-n{ position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:var(--bad); color:#fff;
  font:600 10.5px/18px var(--font-mono); text-align:center; }
.sub-head{ font-size:19px; text-transform:uppercase; margin:22px 0 10px; scroll-margin-top:90px; }
.sub-head .count{ font-family:var(--font-mono); font-size:13px; color:var(--muted); font-weight:500; }
.sub-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.sub-row .head-link{ font-size:14px; font-weight:600; text-decoration:none; }
.empty.slim{ padding:14px 16px; text-align:left; }
.badge.bad{ color:var(--bad); border-color:var(--bad); background:var(--bad-wash); }
.mail-box{ margin-top:18px; }
.sdot{ display:inline-block; width:9px; height:9px; border-radius:50%; flex:none; background:var(--muted); }
.sdot.maint{ background:var(--sec-maint); } .sdot.hr{ background:var(--sec-hr); } .sdot.fin{ background:var(--sec-fin); }
.cal.master .sdots{ display:flex; gap:3px; margin-top:2px; }
.cal.master .cal-day.has{ background:var(--surface); border-color:var(--border); }
.cal.master .cal-day.alarm{ box-shadow:inset 0 -3px 0 var(--bad); }
.cal.master .cal-day.sel{ border-color:var(--accent); background:var(--accent-wash); }
.cal.master .cal-day.today .n{ background:var(--accent); color:var(--accent-ink); border-radius:999px; padding:0 6px; }
.cal-filter{ margin:10px 0; }
.cal-filter .chip{ display:inline-flex; align-items:center; gap:5px; text-decoration:none; padding:4px 9px; }
.keybox{ display:inline-block; width:16px; height:10px; border-radius:3px; background:var(--surface); border:1px solid var(--border); }
.keybox.alarm{ box-shadow:inset 0 -3px 0 var(--bad); }
.badge.sec{ min-width:72px; }
.badge.sec .d{ font-family:var(--font-display); }
.badge.sec.maint{ color:var(--sec-maint); border-color:var(--sec-maint); }
.badge.sec.hr{ color:var(--sec-hr); border-color:var(--sec-hr); }
.badge.sec.fin{ color:var(--sec-fin); border-color:var(--sec-fin); }
#day{ scroll-margin-top:90px; }

/* Coming up 30 / 60 / 90 days (version 15) */
.upcoming-head{ margin-top:6px; flex-wrap:wrap; }
.upcoming-head .filter-row{ margin:0; }
.ahead .chip{ text-decoration:none; padding:5px 10px; font-size:12px; }
.upcoming{ display:flex; flex-direction:column; gap:8px; }
.up-day{ display:flex; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px 12px; box-shadow:var(--shadow); }
.up-date{ flex:none; width:58px; display:flex; flex-direction:column; align-items:flex-start; }
.up-date b{ font-family:var(--font-mono); font-size:17px; font-weight:500; }
.up-date span{ font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.up-items{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.up-item{ display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit; padding:2px 0; min-width:0; }
.up-item + .up-item{ border-top:1px dashed var(--border); padding-top:7px; }
.up-item .sdot{ margin-top:1px; }
.up-text{ flex:1; min-width:0; display:flex; flex-direction:column; }
.up-text strong{ font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.up-text span{ font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.up-item .chip{ flex:none; }
#upcoming{ scroll-margin-top:90px; }
.up-date{ width:70px; } .up-date span{ white-space:nowrap; }
/* 30 / 60 / 90-day calendar view (version 16) */
.cal-views{ margin:0 0 10px; justify-content:center; }
.cal-views .chip{ text-decoration:none; padding:6px 11px; font-size:12px; }
.cal-head.range{ flex-direction:column; align-items:center; gap:2px; padding:4px 0 2px; }
.cal-head.range h2{ font-size:22px; text-transform:uppercase; }
.range-dates{ font-family:var(--font-mono); font-size:13px; color:var(--muted); }
.cal.master .cal-day .mo{ font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--accent-strong); line-height:1; }
.cal.master .cal-day.newmo{ border-left:3px solid var(--accent); }
.cal.master .cal-day.newmo.out{ border-left-color:var(--border); }
/* v17: 30/60/90 view stays one month high */
.btn.off{ opacity:.35; pointer-events:none; }
.cal.master .cal-head h2{ font-size:22px; text-transform:uppercase; text-align:center; flex:1; }
.range-line{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 10px; margin:4px 0 6px; }
.range-months{ display:flex; gap:5px; }
.range-months .chip{ text-decoration:none; padding:3px 9px; }
/* v26: who gets which emails */
.section-head .head-right{ margin-left:auto; }
.mail-table td{ vertical-align:top; }
.mail-table .nw{ white-space:nowrap; }
.mail-table .hint{ margin:0; font-size:12px; }
.mail-table .chip{ white-space:normal; display:inline-block; }
.item-mail{ align-items:flex-start; }
.recips{ display:flex; flex-direction:column; gap:3px; margin-top:6px; }
.recip{ font-size:13px; padding:3px 8px; border-radius:6px; border:1px solid var(--border); background:var(--surface); }
.recip.next{ border-color:var(--warn); background:var(--warn-wash); }
.recip.done{ border-color:var(--good); background:var(--good-wash); }
.recip.none{ border-color:var(--bad); background:var(--bad-wash); }
.item-mail .main{ min-width:0; }
.item-mail .meta{ white-space:normal; }
.filter-row a.chip{ text-decoration:none; }
.test-one{ margin:12px 16px 0; }
.test-all{ display:flex; flex-direction:column; gap:6px; margin:4px 0 14px; }
.test-all .hint{ margin:0; }
/* v28: section icons on the calendars (spanner / two people / receipt) */
.secic{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:6px; color:#fff; flex:none; }
.secic svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
@media (min-width:640px){ .secic{ width:28px; height:28px; border-radius:7px; } .secic svg{ width:17px; height:17px; } }
.secic.maint{ background:var(--sec-maint); } .secic.hr{ background:var(--sec-hr); } .secic.fin{ background:var(--sec-fin); }
@media (prefers-color-scheme: dark){ .secic{ color:#10141A; } }
.secic.mini{ width:18px; height:18px; border-radius:5px; } .secic.mini svg{ width:12px; height:12px; stroke-width:2.5; }
.secic.big{ width:34px; height:34px; border-radius:8px; margin:0 auto 3px; } .secic.big svg{ width:21px; height:21px; }
.cal.master .secics{ display:flex; gap:2px; flex-wrap:wrap; justify-content:center; margin-top:2px; }
@media (max-width:420px){ .cal.master .secics .secic{ width:19px; height:19px; border-radius:5px; } .cal.master .secics .secic svg{ width:12px; height:12px; stroke-width:2.5; } }
.cal-filter .chip .secic.mini{ width:16px; height:16px; } .cal-filter .chip .secic.mini svg{ width:11px; height:11px; }
.cal-key .secic.mini{ margin-right:2px; }
.up-item .secic.mini{ margin-top:1px; }
.badge.sec{ display:flex; flex-direction:column; align-items:center; }
/* v29: phone calendar */
.phonecal-link{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-weight:600; font-size:14px; text-decoration:none; }
.phonecal-link svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.steps{ margin:12px 0 10px; padding-left:20px; font-size:14px; line-height:1.55; }
.steps li{ margin-bottom:6px; }
.copy-row{ display:flex; gap:8px; margin-bottom:10px; }
.copy-row input{ flex:1; min-width:0; font-family:var(--font-mono); font-size:13px; }