:root{
 --ink:#0c1320; --ink-soft:#1b2536; --ink-line:#1d2738;
 --bg:#f5f7fa; --card:#ffffff; --line:#e7eaf0; --line2:#eef1f5;
 --txt:#16202e; --mut:#6b7686; --mut2:#9aa4b2;
 --accent:#0fb6a6; --accent-d:#0a8f83; --accent-soft:#e9f9f6;
 --pos-mgr:#4f46e5; --pos-am:#e11d48; --pos-key:#0d9488; --pos-lead:#7c3aed; --pos-att:#16a34a;
 --warn:#e0a800; --danger:#dc3545; --ok:#0a9d57; --info:#1d6fd6;
 --shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
 --shadow-lg:0 8px 30px rgba(16,24,40,.12);
 --r:10px; --r-sm:8px; --r-lg:14px;
 /* Responsive layout tokens (RESPONSIVE-DESIGN-PROTOCOL.md §3/§5): sidebar is a constrained track, never the screen. */
 --sidebar-w: clamp(200px, 18vw, 280px);
 --modal-w: 480px;
 --font:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 --display:'Schibsted Grotesk', var(--font);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);color:var(--txt);background:var(--bg);font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.hidden{display:none !important}
.muted{color:var(--mut)}
.error{color:var(--danger);font-size:12.5px;margin-top:8px;min-height:1em}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.01em;color:var(--txt)}
a{color:var(--accent-d);text-decoration:none}
button{font-family:var(--font)}

/* ---------- login ---------- */
#login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 600px at 50% -10%, #eafcf9 0%, var(--bg) 55%)}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:34px 30px;width:360px;box-shadow:var(--shadow-lg);text-align:center}
.login-brand{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:4px}
.login-brand .logo,.brand .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent-d));display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;transition:background .25s ease}
.login-brand .wm{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:-.5px}
.login-brand .wm b{color:var(--accent-d);font-weight:700}
.login-sub{color:var(--mut2);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;margin:0 0 22px}
.login-card input{width:100%;margin-bottom:12px}
.login-card .primary{width:100%;margin-top:4px}

/* ---------- app shell ---------- */
#app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;height:100vh;overflow:hidden}
/* The mobile-drawer backdrop is an OVERLAY — always position:fixed so it never becomes a grid child of #app and
   distorts the desktop sidebar/content columns. Hidden until the drawer is open (only happens on mobile/tablet). */
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(8,12,20,.45);z-index:150}
#app.nav-open .nav-backdrop{display:block}
#sidebar{background:var(--ink);color:#c4ccd8;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:11px;padding:18px 18px 14px}
.brand .wm{font-family:var(--display);font-weight:700;font-size:19px;color:#fff;letter-spacing:-.4px;line-height:1}
.brand .wm b{color:var(--accent)}
.brand .wm small{display:block;font-family:var(--font);font-weight:500;font-size:9.5px;letter-spacing:2px;color:var(--mut2);text-transform:uppercase;margin-top:3px}
#nav{padding:8px;display:flex;flex-direction:column;gap:2px;flex:1;overflow:auto}
#nav button{display:flex;align-items:center;gap:12px;padding:9px 12px;border:0;border-radius:9px;background:transparent;color:#aab4c2;font-size:13.5px;font-weight:500;cursor:pointer;text-align:left;width:100%;transition:background .12s,color .12s}
#nav button i{font-size:19px;width:20px;text-align:center}
#nav button:hover{background:var(--ink-soft);color:#fff}
#nav button.active{background:var(--accent);color:#fff;font-weight:600}
.side-foot{display:flex;align-items:center;gap:10px;padding:12px;border-top:1px solid var(--ink-line)}
.side-user{flex:1;min-width:0;font-size:12px}
.side-user #side-name{color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user .muted{color:var(--mut2);text-transform:capitalize}
.av{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#04221f;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:0 0 32px}

.workspace{display:flex;flex-direction:column;min-width:0;overflow:hidden}
#topbar{height:60px;flex:0 0 60px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 22px}
.site-sel{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;padding:7px 12px;font-weight:600;cursor:pointer;background:var(--card)}
.site-sel i:first-child{color:var(--accent)}.site-sel .chev{color:var(--mut2);font-size:15px}
.site-sel select{border:0;background:transparent;font:inherit;font-weight:600;color:var(--txt);outline:0;cursor:pointer;font-size:14px;font-family:var(--display)}
.topbar-sp{flex:1}
.iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--mut);display:flex;align-items:center;justify-content:center;font-size:19px;cursor:pointer;position:relative;transition:background .12s,color .12s}
.iconbtn:hover{background:var(--bg);color:var(--txt)}
.iconbtn.ghost{border:0;background:transparent;color:var(--mut2);width:32px;height:32px}
.iconbtn.ghost:hover{color:#fff;background:var(--ink-soft)}
.dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid var(--card)}
.umenu{display:flex;align-items:center;gap:9px;padding:4px 6px 4px 4px}
.umeta{display:flex;flex-direction:column;line-height:1.2}
.umeta #who{font-weight:600;font-size:13px}.umeta .muted{font-size:11px;text-transform:capitalize}

#main{flex:1;overflow:auto;padding:24px 28px}

/* ---------- typography blocks ---------- */
.section-title{font-size:16px;margin:22px 0 12px;font-weight:600;padding-left:11px;position:relative}
.section-title::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:16px;border-radius:3px;background:linear-gradient(180deg,var(--accent),var(--accent-d))}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.row h3{font-size:18px;margin-right:auto}

/* ---------- buttons ---------- */
button.primary,.primary{background:var(--accent);border:1px solid var(--accent);color:#04221f;font-weight:600;border-radius:var(--r-sm);padding:9px 15px;cursor:pointer;font-size:13.5px;transition:background .12s,transform .07s ease,filter .1s,box-shadow .1s}
button.primary:hover,.primary:hover{background:var(--accent-d)}
button.primary:active,.primary:active{transform:scale(.93);filter:brightness(.88);box-shadow:inset 0 2px 6px rgba(0,0,0,.28)}
button:not(.primary):not(.iconbtn):not(#nav button){background:var(--card);border:1px solid var(--line);color:var(--txt);border-radius:var(--r-sm);padding:9px 14px;cursor:pointer;font-size:13.5px;font-weight:500;transition:background .12s,transform .07s ease,box-shadow .1s}
button:not(.primary):not(.iconbtn):not(#nav button):hover{background:var(--bg)}
button:not(.primary):not(.iconbtn):not(#nav button):active{transform:scale(.93);background:var(--line2,var(--bg));box-shadow:inset 0 2px 6px rgba(0,0,0,.15)}
.iconbtn{transition:background .12s,color .12s,transform .07s ease}
.iconbtn:active{transform:scale(.88);background:var(--bg)}
#nav button:active{transform:scale(.96)}
/* Press ripple-ish: kill the default mobile tap highlight, use our own */
button{-webkit-tap-highlight-color:transparent}
button:not(.primary):not(.iconbtn):not(#nav button):hover{background:var(--bg)}
button.danger{color:var(--danger);border-color:#f2c7cc}
button:disabled{opacity:.55;cursor:default}

/* ---------- inputs ---------- */
input,select,textarea{font-family:var(--font);font-size:13.5px;color:var(--txt);background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;outline:0;transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow)}
.card h3{font-size:15.5px;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kv{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13px;border-top:1px solid var(--line2)}
.kv:first-of-type{border-top:0}
.kv>span:first-child{color:var(--mut)}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--bg);color:var(--mut);text-transform:capitalize;letter-spacing:.2px}
.badge.operating,.badge.low,.badge.approved{background:#e7f8ef;color:var(--ok)}
.badge.opening_soon,.badge.moderate,.badge.min{background:#fff4e0;color:#b9770b}
.badge.construction,.badge.high,.badge.max,.badge.severe{background:#fdeaec;color:var(--danger)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
th{text-align:left;font-weight:600;color:var(--mut);background:#fbfcfd;padding:10px 12px;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--line)}
td{padding:10px 12px;border-top:1px solid var(--line2)}
tr:first-child td{border-top:0}

/* ---------- toast / modal ---------- */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 18px;border-radius:11px;font-size:13px;box-shadow:var(--shadow-lg);z-index:100;animation:rise .2s ease}
@keyframes rise{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.modal{position:fixed;inset:0;background:rgba(12,19,32,.45);display:flex;align-items:center;justify-content:center;z-index:90;backdrop-filter:blur(2px)}
.modal-card{background:var(--card);border-radius:16px;padding:clamp(18px,4vw,26px);width:min(92vw,var(--modal-w));max-height:85vh;overflow:auto;box-shadow:var(--shadow-lg)}
.modal-card h2{font-size:18px;margin-bottom:6px}
.modal-card input{width:100%;margin:8px 0}
.modal-card .settings-grid input:not([type=color]),.modal-card .settings-grid select,.modal-card .settings-grid textarea{width:100%;margin:4px 0 0;box-sizing:border-box}
/* Color picker = a clickable chip showing the current color (same as the position-color setting), not a grey bar. */
input[type=color]{width:56px;height:30px;border:1px solid var(--line);border-radius:6px;padding:0;cursor:pointer;background:none;vertical-align:middle}
input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}
.modal-card .primary{width:100%;margin-top:8px}

/* ---------- schedule grid ---------- */
.sched-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.sched-top b{font-family:var(--display);font-size:16px;min-width:130px;text-align:center}
.sched-wrap{display:flex;gap:16px;align-items:flex-start;margin-top:12px}
.sched-filters{flex:0 0 198px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 15px;box-shadow:var(--shadow)}
.sched-filters h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut);margin-bottom:12px}
.sched-filters .fhead{font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--mut);margin:14px 0 6px}
.sched-filters label{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 0;cursor:pointer}
.sched-grid-area{flex:1;min-width:0;overflow:auto}
.wiw-grid{width:100%;min-width:880px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.wiw-row{display:grid;grid-template-columns:190px repeat(7,minmax(104px,1fr));border-top:1px solid var(--line2)}
.wiw-row.head{background:#fbfcfd;border-top:0;position:sticky;top:0;z-index:2}
.wiw-name{padding:9px 13px;border-right:1px solid var(--line2);display:flex;flex-direction:column;justify-content:center;gap:2px;background:#fcfdfe}
.wiw-name b{font-weight:600}
.wiw-name .muted{font-size:11px}
.wiw-dh{padding:9px 12px;font-family:var(--display);font-weight:600;font-size:13px}
.wiw-dh .muted{font-weight:400;color:var(--mut)}
.wiw-cell{padding:5px;border-right:1px solid var(--line2);min-height:52px;display:flex;flex-direction:column;gap:4px;position:relative}
.wiw-cell.today,.wiw-dh.today{background:#f1fbf9}
/* Hover affordance: empty day cells show a semi-transparent "+ Add a Shift" bubble so it's clearly clickable. */
.wiw-cell.addable{cursor:pointer}
.wiw-cell.addable:empty:hover::before{content:'+ Add a Shift';position:absolute;inset:4px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft,rgba(15,118,110,.10));border:1.5px dashed var(--accent,#0f766e);border-radius:8px;color:var(--accent-d,#0f766e);font-size:11.5px;font-weight:700;opacity:.9;pointer-events:none}
.wiw-dh.today{color:var(--accent-d)}
.wiw-row.open .wiw-name{color:var(--accent-d);font-weight:600}
.wiw-row.totals{background:#fbfcfd;font-weight:600;border-top:2px solid var(--line)}
.wiw-cell.tot{align-items:center;justify-content:center;color:#445;min-height:40px}
.wiw-shift{color:var(--shift-text,#fff);border-radius:7px;padding:5px 8px;line-height:1.2;position:relative;cursor:pointer;box-shadow:0 1px 1px rgba(0,0,0,.10);transition:transform .06s,filter .12s}
.wiw-shift .pos,.wiw-shift .tm{color:var(--shift-text,#fff)}
.wiw-shift:hover{filter:brightness(1.06)}
.wiw-shift:active{transform:scale(.98)}
.wiw-shift .tm{font-weight:700;display:block;font-size:12px}
.wiw-shift .pos{font-size:9.5px;opacity:.92;letter-spacing:.3px;text-transform:uppercase}
.wiw-shift.draft{opacity:.5}
.wiw-shift.tentative{outline:2px dashed #f4c000;outline-offset:-2px}
.wiw-shift .x{position:absolute;top:1px;right:5px;cursor:pointer;opacity:0;font-weight:700;font-size:13px}
.wiw-shift:hover .x{opacity:.85}

/* ---------- forecast bars ---------- */
.bar-row{display:flex;align-items:flex-end;gap:4px;margin-top:14px;min-height:90px}
.bar{background:linear-gradient(180deg,var(--bar,var(--accent)),color-mix(in srgb,var(--bar,var(--accent)) 45%,#fff));border-radius:4px 4px 0 0;min-height:2px;width:100%}
.bar.staff{background:var(--ink)}   /* schedule day-view: black = staff (legend) */
.bar-label{font-size:10px;color:var(--mut);text-align:center;margin-top:4px}
#budget-panel:not(:empty){margin:6px 0 4px}
.day-col{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;box-shadow:var(--shadow)}

/* KPI summary tiles */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin:6px 0 4px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;box-shadow:var(--shadow)}
.kpi-l{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.kpi-v{font-family:var(--display);font-size:22px;font-weight:600;margin:4px 0 2px}
.kpi-v.warn{color:var(--danger)}
.kpi-s{font-size:11.5px;color:var(--mut)}
/* data-freshness light */
.dlight{display:inline-block;width:11px;height:11px;border-radius:50%;cursor:help;vertical-align:middle;box-shadow:0 0 0 3px rgba(0,0,0,.04)}
.dlight.green{background:#22c55e}.dlight.yellow{background:#eab308}.dlight.red{background:#ef4444}.dlight.off{background:#c7cdd6}
/* user dropdown */
.umenu-pop{position:absolute;top:46px;right:0;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);min-width:222px;padding:6px;z-index:80}
.umenu-pop .umenu-h{padding:9px 12px;display:flex;flex-direction:column;gap:1px;border-bottom:1px solid var(--line2);margin-bottom:4px}
.umenu-pop a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--txt);font-size:13.5px;cursor:pointer}
.umenu-pop a i{font-size:18px;color:var(--mut)}
.umenu-pop a:hover{background:var(--bg)}
.umenu-sep{height:1px;background:var(--line2);margin:4px 0}
.site-status{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.metaline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.5;margin-top:8px;font-size:12.5px}
.metaline i{font-size:16px;color:var(--mut)}
.badge.light{background:#e7f8ef;color:var(--ok)}

/* settings: wide form fields (no truncation) */
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
/* Responsive: stack to one column on phones so labels/fields stay readable (laptop/tablet keep two). */
@media(max-width:560px){.settings-grid{grid-template-columns:1fr}.modal-card{width:auto;max-width:94vw}}
.fld{display:flex;flex-direction:column;gap:5px}
/* AnalyticsIQ "updating" overlay — shown while new site/date data is being pulled, over the (dimmed) current view. */
#an-busy{position:absolute;inset:0;background:rgba(255,255,255,.55);display:flex;align-items:flex-start;justify-content:center;padding-top:48px;z-index:30}
.an-busy-pill{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;padding:9px 16px;border-radius:22px;font-size:13px;font-weight:600;box-shadow:var(--shadow-lg)}
.an-spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:an-spin .7s linear infinite;display:inline-block}
@keyframes an-spin{to{transform:rotate(360deg)}}
/* Staffing-rules grid: equal-height cells with the input pinned to the bottom, so the boxes line up cleanly even
   when labels wrap to two lines. */
.st-grid{grid-auto-rows:1fr;align-items:stretch}
.st-grid .fld{justify-content:space-between}
.st-grid .fld span{font-size:12px;line-height:1.3;color:var(--mut)}
.st-grid .fld input{width:100%;box-sizing:border-box;margin-top:auto}
.fld>span{color:var(--mut);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.3px}
.fld input,.fld select{width:100%}
.modal-card.wide{--modal-w:720px;width:min(92vw,var(--modal-w));max-height:85vh;overflow:auto}
.modal-card .sec{font-family:var(--display);font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px;margin:18px 0 8px;font-weight:600;border-top:1px solid var(--line2);padding-top:12px}
.modal-card .sec:first-of-type{border-top:0;padding-top:0;margin-top:8px}
.tbl-tight td,.tbl-tight th{padding:6px 10px}

/* ---- Overview tiles (richer site cards) ---- */
.ov-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:1100px){.ov-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.ov-grid{grid-template-columns:1fr}}
.site-tile{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s}
.site-tile:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.tile-head{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--accent-soft),transparent)}
.site-ini{width:40px;height:40px;border-radius:11px;background:var(--accent);color:#fff;font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 2px 6px rgba(15,182,166,.35)}
.tile-head h3{margin:0;font-size:16px;font-family:var(--display);letter-spacing:-.01em}
.tile-head .small{font-size:12px;color:var(--mut);margin-top:1px}
.tile-head .badge{margin-left:auto;align-self:flex-start}
.tile-lights{display:flex;gap:20px;padding:11px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.statline{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--mut)}
.statline b{color:var(--ink);font-weight:600}
.tile-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.tile-kpis .tk{background:var(--card);padding:13px 8px;text-align:center}
.tk-v{font-size:19px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.tk-v.cgood{color:var(--ok)} .tk-v.cwarn{color:var(--warn)} .tk-v.cbad{color:var(--danger)}
.tk-l{font-size:10.5px;color:var(--mut);margin-top:5px;line-height:1.25;text-transform:uppercase;letter-spacing:.02em}
.tile-meta{padding:11px 18px;display:flex;flex-direction:column;gap:6px;margin-top:auto}

/* ---- Module switcher popover ---- */
.modules-pop{position:fixed;z-index:200;width:320px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:7px;animation:pop .12s ease}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.mp-h{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);padding:8px 10px 6px}
.mp-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;cursor:pointer;text-decoration:none;color:var(--txt)}
.mp-item:hover{background:var(--bg)}
.mp-item.active{background:var(--accent-soft)}
.mp-ic{width:34px;height:34px;border-radius:9px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;flex:0 0 auto}
.mp-tx{display:flex;flex-direction:column;line-height:1.25;flex:1}
.mp-tx b{font-size:13.5px} .mp-tx span{font-size:11.5px;color:var(--mut)}
.mp-chk{color:var(--accent);font-size:18px}
.mp-soon{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);background:var(--bg);border:1px solid var(--line);padding:2px 7px;border-radius:20px}
/* ---- Module placeholder hero ---- */
.module-hero{max-width:560px;margin:36px auto;text-align:center}
.mh-ic{width:68px;height:68px;border-radius:18px;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:32px;box-shadow:var(--shadow-lg)}
.module-hero h2{font-family:var(--display);font-size:26px;margin:16px 0 6px;display:flex;gap:10px;align-items:center;justify-content:center}
.mh-soon{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-d);background:var(--accent-soft);padding:4px 10px;border-radius:20px}
.mh-sub{color:var(--mut);font-size:14px;margin:0 auto}
.mh-card{margin:22px auto 0;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow)}
.mh-card-h{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin-bottom:10px}
.mh-feat{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;border-top:1px solid var(--line2)}
.mh-feat:first-of-type{border-top:0}
.mh-feat .ti{color:var(--accent);font-size:18px}

/* ---- Overview tile drag-to-reorder ---- */
.site-tile[draggable=true]{cursor:grab}
.site-tile[draggable=true]:active{cursor:grabbing}
.site-tile.dragging{opacity:.45;box-shadow:var(--shadow-lg);transform:scale(.99)}

/* ---- Company-wide overview tile ---- */
.company-tile{padding:0;overflow:hidden;margin-bottom:18px}
.company-tile .tile-head{background:linear-gradient(180deg,rgba(12,19,32,.05),transparent)}
.ct-cols{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
@media(max-width:820px){.ct-cols{grid-template-columns:1fr}}
.ct-col{background:var(--card);padding:14px 18px}
.ct-h{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:600;margin-bottom:10px}
.ct-col .kpis{grid-template-columns:repeat(4,1fr);gap:10px;margin:0}
.ct-col .kpi{padding:10px 12px}
.ct-col .kpi-v{font-size:19px}
/* ---- per-site tile section headers ---- */
.tile-section-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:600;padding:10px 18px 4px;border-top:1px solid var(--line)}

/* ---- AnalyticsIQ ---- */
.an-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.an-controls select{min-width:160px}
/* Financials — WashMetrix-style four-wide tiles */
.fin-wm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:1100px){.fin-wm{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.fin-wm{grid-template-columns:1fr}}
.wm-tile{display:flex;flex-direction:column;gap:2px;padding:16px}
.wm-title{font-size:13px;font-weight:700;color:var(--txt)}
.wm-delta{font-size:12px;margin:1px 0 2px}
.wm-val{font-size:26px;font-weight:800;line-height:1.1;margin:2px 0}
.wm-sub{font-size:11px;line-height:1.5}
.wm-pl{font-size:18px;font-weight:700;margin:2px 0}
.fin-month{margin-top:8px}
.fin-month>summary{cursor:pointer;font-weight:600;padding:2px 0}
/* Scope tabs (All Sites | groups | + Add a Group) */
.an-scope-tabs{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:12px}
.an-tab{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border:1px solid var(--line);background:var(--card);border-radius:999px;font-size:13px;font-weight:600;color:var(--mut);cursor:pointer;transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.an-tab:hover{background:var(--bg);color:var(--txt)}
.an-tab.on{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 3px 10px rgba(15,118,110,.28)}
.an-tab-add{border-style:dashed;color:var(--accent-d)}
.an-tab-add:hover{background:var(--accent-soft);color:var(--accent-d)}
.an-tab-x{font-size:16px;line-height:1;opacity:.45;padding:0 1px;border-radius:50%;transition:opacity .15s,color .15s,background .15s}
.an-tab-x:hover{opacity:1;color:#dc2626;background:rgba(220,38,38,.14)}
.an-tab.on .an-tab-x{opacity:.75;color:#fff}
#an-grp-save{display:none}
.an-scope-pop.adding #an-grp-save{display:flex}
.an-scope-pop.adding::before{content:'Pick the sites for this group, then Save';display:block;font-size:11px;color:var(--mut);padding:3px 6px 8px;font-weight:600}
.an-delta{font-weight:700;font-size:11px;padding:2px 7px;border-radius:999px;display:inline-flex;align-items:center;gap:1px;background:var(--line2);color:var(--mut);line-height:1.5;vertical-align:middle}
.an-delta.good{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent)}
.an-delta.bad{color:var(--danger);background:color-mix(in srgb,var(--danger) 13%,transparent)}

/* ---- tenure badge (Legacy / NTI) ---- */
.tile-badges{margin-left:auto;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.tile-badges .badge{margin-left:0}
.badge.tn-legacy{background:#eef2ff;color:#4f46e5}
.badge.tn-nti{background:#fff7ed;color:#c2410c}

/* ---- AnalyticsIQ larger WashMetrix-style tiles ---- */
.an-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1180px){.an-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.an-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.an-grid{grid-template-columns:1fr}}
/* pacing tiles: larger, 2-up, spread */
#an-body > .cards:first-child{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
#an-body > .cards:first-child .card{padding:22px 24px}
#an-body > .cards:first-child .an-pace td,#an-body > .cards:first-child .an-pace th{padding:9px 12px;font-size:14px}
.an-tile{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--ac,var(--accent));border-radius:14px;padding:16px 20px 18px;box-shadow:var(--shadow);min-height:124px;display:flex;flex-direction:column;position:relative;overflow:hidden}
/* faint corner wash of the tile's color so each tile reads as its own hue even before the chart */
.an-tile::after{content:"";position:absolute;top:0;right:0;width:110px;height:110px;background:radial-gradient(circle at top right,var(--ac,var(--accent)),transparent 70%);opacity:.16;pointer-events:none}
.an-t-label{font-size:12px;color:var(--ac,var(--mut));font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.an-t-value{font-family:var(--display);font-size:32px;font-weight:600;margin:12px 0 6px;line-height:1;font-variant-numeric:tabular-nums}
.an-t-foot{font-size:12px;margin-top:auto}
.an-tile.an-dim{opacity:.5}
.an-tile.an-dim .an-t-value{min-height:32px}
table.an-pace{width:100%;border-collapse:collapse;margin-top:6px}
table.an-pace th,table.an-pace td{text-align:left;padding:6px 8px;font-size:13px;border-top:1px solid var(--line2)}
table.an-pace th{color:var(--mut);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.02em}
.an-matrix-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}
table.an-matrix{border-collapse:collapse;width:100%;font-size:13px}
table.an-matrix th,table.an-matrix td{padding:9px 12px;border-bottom:1px solid var(--line2);text-align:right;white-space:nowrap}
table.an-matrix th:first-child,table.an-matrix td.an-m-k{text-align:left;position:sticky;left:0;background:var(--card);font-weight:600}
table.an-matrix tr th{background:var(--bg)}
input.an-tgt{padding:5px 7px;font-size:12.5px}

/* ---- ChecklistIQ ---- */
.cl-form{max-width:720px}
.cl-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:12px 0}
.cl-sec{margin:18px 0}
.cl-sec h3{font-size:14px;font-family:var(--display);border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:10px}
.cl-field{padding:10px 0;border-bottom:1px solid var(--line2)}
.cl-field>label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.cl-inputs{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cl-inputs input{flex:1;min-width:120px;font-size:16px;padding:11px 12px}
.cl-inputs .cl-sm{flex:0 0 110px;min-width:90px}
.cl-money{display:flex;align-items:center;gap:4px;flex:1;min-width:140px}
.cl-money span{color:var(--mut);font-weight:600}
.cl-money input{width:100%}
.cl-note{font-size:12px;color:var(--mut);margin-top:5px}
.cl-photo-btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent-d);border:1px solid var(--accent);border-radius:9px;padding:10px 14px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.cl-thumb{max-width:64px;max-height:64px;border-radius:8px;border:1px solid var(--line);object-fit:cover}
.cl-instr{margin-top:16px;font-size:13px}
.cl-instr summary{cursor:pointer;font-weight:600;color:var(--accent-d)}
.cl-instr ol{margin:10px 0 0 18px;color:var(--mut);line-height:1.6}
@media(max-width:620px){ .cl-inputs{flex-direction:column;align-items:stretch} .cl-inputs input,.cl-money{min-width:0;width:100%} .cl-photo-btn{justify-content:center} }

/* ---- ChecklistIQ inspections & tasks ---- */
.cl-insp{padding:11px 0;border-bottom:1px solid var(--line2)}
.cl-insp-label{font-size:14px;font-weight:600;margin-bottom:7px}
.cl-insp-label .cl-note{font-weight:400;display:block}
.cl-sub{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px}
.cl-dual{display:flex;gap:18px;flex-wrap:wrap}
.cl-seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.cl-seg button{border:0;border-right:1px solid var(--line);background:var(--card);padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;color:var(--mut);border-radius:0}
.cl-seg button:last-child{border-right:0}
.cl-seg button.on.seg-pass{background:var(--ok);color:#fff}
.cl-seg button.on.seg-fail{background:var(--warn);color:#fff}
.cl-seg button.on.seg-critical{background:var(--danger);color:#fff}
.cl-insp-note{width:100%;margin-top:8px}
.cl-insp-photo{margin-top:8px}
.cl-task{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line2);font-size:14px;cursor:pointer}
.cl-task input{width:20px;height:20px;flex:0 0 auto}
.cl-check{display:flex;align-items:center;gap:8px}
.cl-check input{width:20px;height:20px}

/* ---- AnalyticsIQ in-tile graphs + pin menu ---- */
.an-tile{position:relative}
/* Per-metric color accent — a thin gradient stripe along the top of each tile for visual diversity. */
.an-tile[style*="--ac"]{background:linear-gradient(180deg,var(--card) 62%,color-mix(in srgb,var(--ac) 6%,var(--card)) 100%)}
.an-tile[style*="--ac"]::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:14px 14px 0 0;background:linear-gradient(90deg,var(--ac),color-mix(in srgb,var(--ac) 45%,transparent))}
.an-tile[style*="--ac"]:hover::before{height:4px}
.an-dots{position:absolute;top:4px;right:10px;border:0 !important;outline:none !important;-webkit-appearance:none;appearance:none;background:none !important;box-shadow:none !important;color:var(--mut);font-size:32px !important;line-height:1;cursor:pointer;padding:0;z-index:2}
.an-dots:hover,.an-dots:focus{color:#7c3aed;background:none !important;outline:none !important}
.an-dots.on,.an-dots.on:hover{color:#7c3aed !important}
.an-tile .an-t-value{margin-right:24px}
.an-spark{width:100%;height:42px;margin-top:14px;display:block}
.an-tile[draggable=true]{cursor:grab}
.an-tile.dragging{opacity:.5;box-shadow:var(--shadow-lg)}

/* ---- AnalyticsIQ multi-site checkbox selector ---- */
.an-scope{position:relative;display:inline-block}
.an-scope-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:9px 13px;background:var(--card);font-weight:600;font-size:13.5px;cursor:pointer;min-width:165px;color:var(--txt)}
.an-scope-btn .ti{margin-left:auto;color:var(--mut)}
.an-scope-pop{position:absolute;top:44px;left:0;z-index:60;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;min-width:230px;max-height:340px;overflow:auto;animation:pop .12s ease}
.an-scope-pop label{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:13.5px;cursor:pointer}
.an-scope-pop label:hover{background:var(--bg)}
.an-scope-pop input{width:17px;height:17px;flex:0 0 auto}

/* ---- AnalyticsIQ site groups in scope dropdown ---- */
.an-scope-sec{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:600;padding:8px 10px 4px}
.an-grp{display:flex;align-items:center;gap:4px}
.an-grp-pick{flex:1;text-align:left;border:0;background:transparent;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13.5px;color:var(--txt)}
.an-grp-pick:hover{background:var(--bg)}
.an-grp-del{border:0;background:transparent;color:var(--mut);cursor:pointer;font-size:16px;padding:0 8px;border-radius:6px}
.an-grp-del:hover{color:var(--danger)}
.an-addgrp{width:100%;display:flex;align-items:center;gap:6px;border:0;border-top:1px solid var(--line2);margin-top:6px;background:transparent;color:var(--accent-d);font-weight:600;padding:10px;cursor:pointer;text-align:left}
.an-addgrp:hover{background:var(--accent-soft)}
.an-tile[data-met]{cursor:pointer;transition:transform .14s ease, box-shadow .14s ease}
.an-tile[data-met]:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}

/* ---- color utilities (positive/negative quick-read) ---- */
.cgood{color:var(--ok)!important} .cwarn{color:var(--warn)!important} .cbad{color:var(--danger)!important}
.pos{color:var(--ok)} .neg{color:var(--danger)}
.badge.over_labored{background:#fdecea;color:var(--danger)}
.badge.under_labored{background:#fff4e0;color:#b7791f}
.lab-monthly td:first-child,.lab-monthly th:first-child{font-weight:600}
.lab-daily summary{cursor:pointer;font-weight:600;color:var(--accent-d);padding:6px 0}
.lab-daily summary:hover{color:var(--accent)}
/* ---- dropdowns auto-size to content, no wrapping (clean aesthetics) ---- */
.an-scope-btn{min-width:0;width:auto;white-space:nowrap}
.an-scope-pop{width:max-content;min-width:230px;max-width:380px}
.an-scope-pop label,.an-grp-pick{white-space:nowrap}
.site-sel{white-space:nowrap}
.site-sel select{width:auto;min-width:0;text-overflow:ellipsis}
select{white-space:nowrap}

/* ---- module shortcut rail (left nav) ---- */
.mod-rail{padding:10px 12px 8px;border-top:1px solid var(--ink-line)}
.mod-rail-lbl{font-size:9.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--mut2);padding:0 2px 7px}
.mod-rail-chips{display:flex;gap:7px;flex-wrap:wrap}
.mod-chip{width:32px;height:32px;border-radius:9px;border:1px solid var(--mc);background:var(--mc);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;opacity:.82}
.mod-chip:hover{transform:translateY(-1px);filter:brightness(1.08);opacity:1}
.mod-chip.on{opacity:1;box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--mc)}
/* ---- clickable trend cards (AnalyticsIQ overview) ---- */
.card.an-trend{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.card.an-trend:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 6px 18px -8px var(--accent)}
.card.an-trend h3::after{content:'\2197';float:right;color:var(--mut2);font-weight:600;opacity:.6}
.card.an-trend:hover h3::after{color:var(--accent);opacity:1}
/* ---- forecast KPI value ---- */
.card .big{font-family:var(--display);font-weight:700;font-size:30px;line-height:1.1;margin:4px 0 2px;letter-spacing:-.5px}
.card .big.cgood{color:var(--ok)}.card .big.cwarn{color:var(--warn)}.card .big.cbad{color:var(--danger)}
td input.fc-ov{padding:5px 7px;font-size:13px}
/* ---- AnalyticsIQ typography polish (retail-ready) ---- */
.an-t-value,.card .big,.an-pace td,#an-body table td,.card table td,.an-matrix td{
  font-variant-numeric:tabular-nums lining-nums;font-feature-settings:'tnum' 1,'lnum' 1,'cv01' 1}
.an-t-value{letter-spacing:-.018em;font-weight:600}
.card .big{letter-spacing:-.018em}
.an-t-label{letter-spacing:.04em;font-size:11.5px;color:var(--ac,var(--mut));font-weight:700}
.an-t-foot{font-size:12px;color:var(--mut);margin-top:auto;padding-top:4px}
.an-tile{padding:16px 20px 16px;gap:2px;border-top:4px solid var(--ac,var(--accent))}
/* AnalyticsIQ reorder mode (mobile/tablet): ↑/↓ controls top-left of each tile */
.an-tile .tile-move{position:absolute;top:10px;left:14px;flex-direction:row;gap:5px;z-index:3}
#an-body.reordering .tile-move{display:flex}
#an-body.reordering .an-tile{outline:2px dashed var(--ac,var(--accent));outline-offset:-3px}
#an-body table td,.card table td{padding:8px 12px}
#an-body table th,.card table th{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.an-pace td:not(:first-child),#an-body table td:not(:first-child){text-align:right}
.an-pace th:not(:first-child),#an-body table th:not(:first-child){text-align:right}
/* ---- employee modal: aligned checkboxes + labeled fields ---- */
.modal-card input[type=checkbox]{width:18px;height:18px;margin:0;flex:0 0 auto;accent-color:var(--accent)}
.modal-card label.check{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:14px;cursor:pointer}
.modal-card label.muted{display:block;margin:10px 0 -2px;font-size:12px;font-weight:600;letter-spacing:.02em}
.modal-card select{width:100%;margin:6px 0}
/* ---- ChecklistIQ fill: presentable, aligned cards ---- */
.cl-form{max-width:760px;margin:0 auto}
.cl-form>h2{padding:0 2px}
.cl-sec{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px 18px 10px;margin:14px 0;box-shadow:var(--shadow)}
.cl-sec h3{border-bottom:1px solid var(--line2);color:var(--ink);font-size:14px;padding:12px 0 9px;margin:0 0 4px;display:flex;align-items:center;gap:8px}
.cl-field{padding:12px 0;border-bottom:1px solid var(--line2)}
.cl-field:last-child,.cl-task:last-child,.cl-insp:last-child{border-bottom:0}
.cl-field>label{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:7px}
.cl-task{padding:11px 2px;transition:background .12s;border-radius:8px}
.cl-task:hover{background:var(--accent-soft)}
.cl-task input,.cl-check input,.cl-field input[type=checkbox]{accent-color:var(--accent);width:19px;height:19px}
.cl-head{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.cl-head .fld span{font-size:12px;font-weight:600;color:var(--mut)}
.cl-inputs input,.cl-inputs textarea,.cl-money input{border-radius:9px}
.cl-insp{padding:13px 2px;border-bottom:1px solid var(--line2)}

/* ============================== MOBILE / RESPONSIVE SHELL ==============================
   The sidebar keeps its desktop look but becomes an off-canvas DRAWER (slides in via the ☰ button),
   so the content gets full width and the layout doesn't stack/clutter. */
#nav-toggle{display:none}                  /* hamburger: hidden on desktop (≥1025), shown on tablet/phone */
/* ===== APP SHELL — tablet & phone (≤1024). Protocol §3: the module menu becomes an off-canvas DRAWER; the page
   scrolls NATURALLY (body), the topbar STICKS, and nothing is height-pinned so content can never be clipped.
   Desktop (≥1025) keeps the base grid: constrained sidebar (var --sidebar-w) + 1fr content. ===== */
@media(max-width:1024px){
  #app{display:block;height:auto;min-height:100dvh;overflow:visible}
  #sidebar{position:fixed;inset:0 auto 0 0;width:min(82vw,288px);z-index:200;transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow-lg);overflow-y:auto}
  #app.nav-open #sidebar{transform:translateX(0)}
  .workspace{display:block;overflow:visible;min-width:0}
  #topbar{position:sticky;top:0;z-index:40;padding:0 clamp(0.75rem,3vw,1rem);gap:10px}
  #topbar .site-sel{min-width:0;flex:0 1 auto}
  #nav-toggle{display:flex}
  #main{overflow:visible;height:auto;padding:clamp(0.75rem,3vw,1.25rem)}
}
/* CONTENT stacking for phones / small tablets only. */
@media(max-width:820px){
  #main{padding:16px 14px}
  .cards{grid-template-columns:1fr;gap:12px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  h2{font-size:19px}h3{font-size:16px}
  table:not(.matrix-tbl){display:block;overflow-x:auto;max-width:100%}
  /* Tile/KPI values: shrink to fit on ONE line — NEVER wrap (25,/949) and NEVER truncate to the first digit.
     No overflow:hidden / ellipsis on the number itself; the clamp font keeps it inside a 2-col cell. */
  .an-t-value,.tk-v,.kpi-v,.an-big-val,.card .big,.big{font-size:clamp(13px,4.4vw,26px) !important;white-space:nowrap;word-break:keep-all;overflow-wrap:normal;line-height:1.18;margin-right:0}
  .an-tile,.tk,.kpi,.kpis,.tile-kpis,.card{min-width:0}
  /* keep the 4-up CPLH tiles + company KPIs to 2 columns so each number has room */
  .tile-kpis{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){
  #main{padding:13px 11px}
  .iconbtn{width:34px;height:34px;font-size:17px}
  #topbar{gap:6px}
}
@media(max-width:560px){
  .tile-kpis,.kpis{grid-template-columns:1fr}   /* phones: one KPI per row, full width — values + labels never cramp */
}
/* Role-access / CoverageIQ-section matrices: a real table that scrolls sideways with a frozen first column, so the
   roles stay readable on a phone instead of squishing. */
.matrix-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:6px;border:1px solid var(--line);border-radius:10px}
.matrix-tbl{border-collapse:separate;border-spacing:0;font-size:13px;min-width:560px;width:100%}
.matrix-tbl th,.matrix-tbl td{padding:9px 12px;border-bottom:1px solid var(--line2);text-align:center;white-space:nowrap}
.matrix-tbl thead th{position:sticky;top:0;background:var(--card);z-index:2;font-weight:600;color:var(--mut)}
.matrix-tbl .mx-sticky{position:sticky;left:0;background:var(--card);z-index:1;text-align:left;box-shadow:1px 0 0 var(--line2)}
.matrix-tbl thead .mx-sticky{z-index:3}

/* ---- Mobile catch-all: force EVERY modal, popup/dropdown, and multi-column grid to auto-fit the screen, overriding
   any inline pixel widths so nothing overflows or needs manual fixing per-component. ---- */
@media(max-width:820px){
  /* modal width/height handled fluidly by the base .modal-card rule (min(92vw,--modal-w) + max-height:85vh). Here we
     only reflow the CONTENT to a single column so it fits a narrow screen. */
  .modal-card input,.modal-card select,.modal-card textarea{max-width:100%;box-sizing:border-box}
  .modal-card .settings-grid,.settings-grid,.st-grid{grid-template-columns:1fr}
  /* JS-built popups / menus */
  .notif-pop,.emp-menu,.umenu-pop,#an-scope-pop,#export-sched-menu,#an-scope-pop .an-scope-list{max-width:94vw!important;box-sizing:border-box}
  .notif-pop{right:3vw!important}
  /* keep wide data tables (heatmap, goals, schedule, man-hour) scrolling inside their own box, not breaking the page */
  .an-matrix-wrap,.sched-grid-area,.fin-wm{max-width:100%;overflow-x:auto}
}

/* ---- Schedule section on mobile: filters stack ABOVE the grid (full width, positions wrap horizontally), the
   week grid scrolls inside its own box instead of pushing the page, and the action button rows wrap cleanly. ---- */
@media(max-width:820px){
  .sched-wrap{flex-direction:column;gap:12px}
  .sched-filters{flex:0 0 auto;width:100%;box-sizing:border-box}
  .sched-filters #f-pos{display:flex;flex-wrap:wrap;gap:4px 16px}
  .sched-filters label{padding:3px 0}
  .sched-grid-area{width:100%;overflow-x:auto}
  .row{flex-wrap:wrap;gap:8px}
  .sched-top b{min-width:0}
  /* action buttons: comfortable tap targets, don't let margin-left:auto strand them off-screen */
  #main .row > button{flex:0 1 auto}
  #export-sched-menu{right:auto;left:0}
}

/* ---- Pacing / KPI tiles: the 4-across grid is too wide for a phone — stack to 2×2 (then it fits with no scroll). ---- */
@media(max-width:820px){
  .tile-kpis{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:380px){
  .tile-kpis{grid-template-columns:1fr}
}

/* ---- Schedule grid containment on mobile: the page must NOT scroll sideways; ONLY the grid box scrolls
   horizontally, so you can reach all 7 days + the totals. min-width:0 lets the flex/area shrink to the screen. ---- */
@media(max-width:820px){
  .workspace,#main,.sched-wrap,.sched-filters,.sched-grid-area{min-width:0}
  /* #main scrolls with the PAGE on mobile (natural scroll, set in the shell block) — no internal overflow here. */
  .sched-wrap{width:100%}
  .sched-grid-area{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* slightly narrower columns so more of the week is visible before scrolling */
  .wiw-grid{min-width:760px}
  .wiw-row{grid-template-columns:130px repeat(7,minmax(86px,1fr))}
  .wiw-name{padding:7px 9px}
}

/* Week-nav stays one unit (matches the row's gap so DESKTOP is unchanged). */
.wk-nav{display:inline-flex;align-items:center;gap:10px}
.wk-nav #wk-label{white-space:nowrap}
/* Schedule action buttons — MOBILE ONLY: clean left-aligned wrap, no stranded auto-margins, even sizing. */
@media(max-width:820px){
  .sched-head #clear-btn{margin-left:0 !important}
  .sched-actions{gap:8px}
  .sched-actions > span[style*="margin-left:auto"]{margin-left:0 !important}
  .sched-actions > .muted{flex-basis:100%;margin-left:0 !important;order:9}
  .sched-actions > button{flex:1 1 140px}
  .sched-head{gap:8px}
}

/* ============================== RESPONSIVE FOUNDATION (consolidated) ==============================
   Universal rules so the whole app adapts without per-component patching. */
/* 1) Inline multi-column grids (style="grid-template-columns:repeat(3/2,...)") override CSS media queries — force
      them to reflow on smaller screens. repeat(1,...) single-tile grids are left alone. */
@media(max-width:900px){
  [style*="repeat(3,minmax"],[style*="repeat(2,minmax"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:560px){
  [style*="repeat(3,minmax"],[style*="repeat(2,minmax"]{grid-template-columns:1fr !important}
}
/* 2) Overflow safety: flex/grid children can refuse to shrink and force sideways scroll — let them shrink. */
@media(max-width:1024px){
  .row,.cards,.an-grid,.ov-grid,.fin-wm,.tile-kpis,.kpis,.workspace,#main{min-width:0}
  .row > *{min-width:0}
}
/* 3) Long words/emails/labels wrap instead of stretching the layout (numbers handled separately, single-line). */
@media(max-width:820px){
  /* Only break genuinely long unbreakable strings (emails/URLs in table cells). NOT short labels — that was
     breaking words like "Current" into "Curren"+"t". Short labels wrap at spaces normally. */
  td,th{overflow-wrap:break-word}
  .tk-l,.an-t-label,.kpi-l,.kpi-s{white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none}
}

/* ---- More mobile fixes: modal controls fill the row (shift editor was bleeding), and the employee-name + ▾ stay
   on ONE line in the schedule (the arrow was wrapping and stretching the row). ---- */
@media(max-width:820px){
  .modal-card .fld{min-width:0}
  .modal-card select,.modal-card input:not([type=color]):not([type=checkbox]),.modal-card textarea{width:100%;max-width:100%;box-sizing:border-box}
  .modal-card .settings-grid{grid-template-columns:1fr !important}
  .wiw-name > .row{flex-wrap:nowrap;min-width:0;gap:4px}
  .wiw-name > .row > b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .wiw-name .emp-menu-btn{flex:0 0 auto}
}

/* ---- Mobile schedule: FREEZE the names column while days scroll, + an obvious swipe hint. ---- */
.sched-scroll-hint{display:none}
@media(max-width:820px){
  .sched-scroll-hint{display:flex;align-items:center;gap:7px;justify-content:center;font-size:12.5px;color:var(--accent-d);background:var(--accent-soft);border:1px solid var(--accent);border-radius:9px;padding:8px 12px;margin-bottom:10px;font-weight:600}
  .sched-scroll-hint i{font-size:16px}
  /* frozen first column — names stay visible while the 7 days scroll under them (-webkit- for iOS Safari) */
  .wiw-name{position:-webkit-sticky;position:sticky;left:0;z-index:3;background:#fcfdfe;box-shadow:2px 0 5px -2px rgba(16,24,40,.18)}
  .wiw-row.head .wiw-name{z-index:4;background:#fbfcfd}
  .wiw-row.totals .wiw-name{background:#fbfcfd}
  /* edge fade on the scroller so there's a visual "more →" cue */
  .sched-grid-area{position:relative}
}

/* ---- Overview tile reordering. Desktop (>1024) = drag-and-drop (button hidden). Mobile/tablet (≤1024) = the
   "Reorder tiles" button toggles ↑/↓ move controls on each tile. ---- */
.reorder-btn{display:none;align-items:center;gap:6px;font-size:13px}
.reorder-btn.active{background:var(--accent);color:#04221f;border-color:var(--accent);font-weight:600}
.tile-move{display:none;flex-direction:column;gap:3px;margin-left:auto}
.tile-move .tmv{padding:3px 7px;line-height:1;border-radius:6px}
.ov-grid.reordering .site-tile{outline:2px dashed var(--accent);outline-offset:-2px}
.ov-grid.reordering .tile-move{display:flex}
@media(max-width:1024px){ .reorder-btn{display:inline-flex} }

/* ---- FIX: mobile CoverageIQ schedule visibility. Put the grid FIRST (filters were stacking on top and pushing the
   grid far below the fold), give it a min-height so it can't collapse, and let the frozen names stick cleanly. ---- */
@media(max-width:820px){
  .sched-wrap{display:flex;flex-direction:column}
  .sched-scroll-hint{order:1}
  .sched-grid-area{order:2;min-height:200px}
  .sched-filters{order:3}
  .wiw-grid{overflow:visible}   /* sticky names stick to the scroll area instead of being clipped by overflow:hidden */
}

/* ---- Goals page: company roll-up KPI cards + per-location expandable rows. ---- */
.goal-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:8px}
.goal-kpi{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--ac,var(--accent));border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.goal-kpi .gk-l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ac,var(--mut))}
.goal-kpi .gk-v{font-family:var(--display);font-size:22px;font-weight:600;margin:5px 0 4px;line-height:1}
.goal-kpi .gk-row{display:flex;justify-content:space-between;align-items:baseline;font-size:12px}
.goal-bar{height:5px;border-radius:3px;background:var(--line2);margin-top:8px;overflow:hidden}
.goal-bar span{display:block;height:100%;border-radius:3px;transition:width .3s ease}
.goal-site{border:1px solid var(--line);border-radius:12px;margin-top:10px;background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.goal-site-head{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;user-select:none}
.goal-site-head:hover{background:var(--bg)}
.goal-site-head .gs-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.goal-site-head .gs-cars{white-space:nowrap}
.goal-site-head .gs-pct{font-weight:700;min-width:48px;text-align:right}
.gs-chev{transition:transform .18s ease;color:var(--mut2);flex:0 0 auto}
.goal-site.open .gs-chev{transform:rotate(90deg)}
.goal-site-body{padding:0 16px 16px}
@media(max-width:560px){ .goal-site-head .gs-cars{display:none} .goal-kpis{grid-template-columns:1fr 1fr} }

/* ================= AUTHORITATIVE mobile schedule (supersedes every fragment above) =================
   Grid renders + scrolls sideways; the name column FREEZES. Two iOS keys: (1) NO -webkit-overflow-scrolling:touch
   on the scroll container (it breaks position:sticky inside it); (2) .wiw-grid must be overflow:VISIBLE so the
   sticky cells stick to .sched-grid-area (the real scroller), not to .wiw-grid. */
@media(max-width:820px){
  .sched-wrap{display:flex !important;flex-direction:column !important;gap:12px;width:100%;min-width:0;align-items:stretch}
  .sched-scroll-hint{order:0;width:100%}
  .sched-grid-area{order:1;display:block;width:100%;min-width:0;max-width:100%;min-height:0;height:auto;overflow-x:auto;overflow-y:visible;position:static}
  .sched-filters{order:2;width:100%;flex:0 0 auto;box-sizing:border-box}
  .wiw-grid{min-width:760px;width:100%;overflow:visible}
  .wiw-row{grid-template-columns:130px repeat(7,minmax(86px,1fr))}
  .wiw-name{position:-webkit-sticky !important;position:sticky !important;left:0;z-index:3;background:#fcfdfe;box-shadow:2px 0 5px -2px rgba(16,24,40,.18);padding:7px 9px}
  .wiw-row.head .wiw-name{z-index:4;background:#fbfcfd}
  .wiw-row.totals .wiw-name{background:#fbfcfd}
}

/* Shift block notes/checklist on the schedule calendar */
.wiw-note{display:block;font-size:10px;line-height:1.25;margin-top:2px;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.wiw-note i{font-size:11px;vertical-align:-1px}
.wiw-chk{margin-left:4px;opacity:.9}
.wiw-chk i{font-size:12px;vertical-align:-1px}

/* ================= AUTHORITATIVE modal + popup sizing (phones AND tablets, ≤1024 — matches the drawer breakpoint) =====
   Fixes the gap where 820–1024px tablets (iPad Air/Pro portrait) got desktop-sized modals. Contained cap so dialogs
   never fill a big tablet, but go ~full-width on phones. Overrides any inline pixel width. ===== */
@media(max-width:1024px){
  /* width/height = fluid base rule. Here: single-column content + full-width fields + capped JS popups. No !important. */
  .modal-card .settings-grid,.modal-card .st-grid,.settings-grid,.st-grid{grid-template-columns:1fr}
  .modal-card input:not([type=checkbox]):not([type=radio]):not([type=color]),.modal-card select,.modal-card textarea{width:100%;max-width:100%;box-sizing:border-box}
  .modal-card .fld,.modal-card label{min-width:0}
  .notif-pop,.emp-menu,.umenu-pop,#an-scope-pop,#export-sched-menu{max-width:94vw;box-sizing:border-box}
}
@media(max-width:560px){
  .modal-card h2{font-size:17px}
}

/* Man-hour matrix legend */
.mh-legend{font-size:11.5px;color:var(--mut);display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.mh-sw{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin:0 2px;border:1px solid var(--line)}

/* Pacing dashboard cards */
.pace-card{border-top:4px solid var(--ac,var(--accent))}
.pace-l{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ac,var(--mut))}
.pace-v{font-family:var(--display);font-size:26px;font-weight:600;margin:5px 0 0;line-height:1}
.pace-bar{height:6px;border-radius:3px;background:var(--line2);margin-top:9px;overflow:hidden}
.pace-bar span{display:block;height:100%;border-radius:3px;transition:width .3s ease}
.pace-deltas{font-size:12px;margin-top:9px;border-top:1px solid var(--line2);padding-top:7px}

/* Availability modal rows — responsive (were fixed-width inputs that overflowed inside the scaled modal) */
.av-day{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:3px}
.av-day-lbl{display:flex;align-items:center;gap:8px;margin:0;min-width:88px;font-weight:600}
.av-day-lbl input{width:18px;height:18px;margin:0;flex:0 0 auto}
.av-times{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
.av-times input[type=time]{flex:1 1 0;min-width:0;width:auto !important;margin:0}
@media(max-width:560px){ .av-day-lbl{flex:1 1 100%;min-width:0} .av-times{flex:1 1 100%} }
/* Safety net: any leftover fixed-width inline inputs inside a modal shrink on phones instead of overflowing */
@media(max-width:560px){
  .modal-card [style*="width:96px"],.modal-card [style*="width:120px"],.modal-card [style*="width:130px"],.modal-card [style*="width:90px"],.modal-card [style*="width:60px"]{width:auto !important;min-width:0 !important}
}

/* (mobile shell consolidated into the single drawer block above — protocol §3/§7; modals are fluid via base rules) */

/* ===== Schedule drag-and-drop (desktop) + Republish button ===== */
.wiw-shift[draggable="true"]{cursor:grab}
.wiw-shift.dragging{opacity:.4;cursor:grabbing}
.wiw-cell.drag-over{outline:2px dashed #0fb6a6;outline-offset:-2px;background:rgba(15,182,166,.10)}
#pub-btn.republish{background:#f59e0b;border-color:#f59e0b;color:#fff;font-weight:700;animation:pubPulse 1.6s ease-in-out infinite}
#pub-btn.republish:hover{background:#d97706;border-color:#d97706}
@keyframes pubPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.45)}50%{box-shadow:0 0 0 6px rgba(245,158,11,0)}}
#pub-btn.published-ok{opacity:.65}

/* ===== Time Off calendar ===== */
.to-grid{display:flex;flex-direction:column;gap:4px}
.to-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.to-dh{text-align:center;font-size:12px;font-weight:600;color:var(--mut);padding:4px 0}
.to-cell{min-height:84px;border:1px solid var(--line);border-radius:8px;padding:5px 6px;background:var(--card);min-width:0;overflow:hidden}
.to-cell.empty{background:transparent;border-color:transparent}
.to-cell.today{border-color:#0fb6a6;box-shadow:inset 0 0 0 1px #0fb6a6}
.to-d{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:3px}
.to-op{font-size:10px;color:var(--mut)}
.to-hol{font-size:10px;color:#7c3aed;font-weight:600;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.to-off{font-size:11px;background:rgba(0,0,0,.05);border-radius:4px;padding:1px 5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){.to-cell{min-height:58px;padding:3px}.to-d{font-size:11px}.to-op{display:none}.to-off{font-size:9px;padding:1px 3px}.to-dh{font-size:10px}}