/* ================================================================
   DTTASA OPERATIONS COMMAND CENTRE — Obsidian Command Design Language
   ================================================================ */
:root {
  --void:#0c1109; --deep:#111a0e; --base:#172213; --lift:#1e2e1b;
  --panel:rgba(255,255,255,0.11); --panel2:rgba(255,255,255,0.19);
  --border:rgba(255,255,255,0.23); --bord2:rgba(255,255,255,0.34);
  --gold:#f0c832; --gold2:#f7d94e; --gdim:rgba(212,175,55,0.12);
  --gglow:rgba(212,175,55,0.3); --gsoft:rgba(212,175,55,0.055);
  --green:#4cd657; --gndim:rgba(67,177,75,0.12); --gnsoft:rgba(67,177,75,0.055);
  --red:#ff4848; --rdim:rgba(232,64,64,0.12);
  --amber:#f59e0b; --adim:rgba(245,158,11,0.12);
  --blue:#60a5fa; --bdim:rgba(96,165,250,0.12);
  --text:#f4f9f0; --t2:rgba(244,249,240,0.95); --t3:rgba(244,249,240,0.82);
  --mono:'IBM Plex Mono',monospace; --disp:'Cinzel',serif; --body:'DM Sans',sans-serif;
  --hdh:66px;
}
*,::after,::before{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;min-height:100%;background:var(--void);color:var(--text);font-family:var(--body);font-size:15px;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 12% 0,rgba(67,177,75,.04) 0,transparent 52%),radial-gradient(ellipse at 88% 100%,rgba(212,175,55,.04) 0,transparent 52%),repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.025) 2px,rgba(0,0,0,.025) 4px);}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}

/* ── HEADER ── */
#ops-header{position:fixed;top:0;left:0;right:0;height:var(--hdh);z-index:500;display:flex;align-items:center;gap:16px;padding:0 28px;background:rgba(4,8,4,.78);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(36px) saturate(160%);-webkit-backdrop-filter:blur(36px) saturate(160%);animation:hdrDrop .7s cubic-bezier(.16,1,.3,1) both;box-shadow:inset 0 -1px 0 rgba(255,255,255,.05),0 4px 24px rgba(0,0,0,.3);}
#ops-header::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(212,175,55,.04) 50%,transparent 100%);background-size:250% 100%;animation:hdrScan 7s linear infinite;}
@keyframes hdrDrop{from{transform:translateY(-100%);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes hdrScan{from{background-position:250% 0;}to{background-position:-250% 0;}}
#ops-header .hdr-sep{width:1px;height:32px;background:var(--border);}
#ops-header .hdr-title{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--t3);white-space:nowrap;}
.brand-logo-wrap{display:flex;align-items:center;gap:12px;}
.brand-logo-img{height:34px;width:auto;display:block;filter:drop-shadow(0 0 6px rgba(212,175,55,.18));transition:filter .3s,transform .3s;}
.brand-logo-img:hover{filter:drop-shadow(0 0 12px rgba(212,175,55,.45));transform:scale(1.04);}
.brand-logo-text{display:flex;flex-direction:column;gap:1px;}
.brand-logo{font-family:var(--disp);font-size:22px;font-weight:900;letter-spacing:7px;line-height:1;background:linear-gradient(135deg,var(--green) 0%,var(--gold) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.brand-sub{font-size:13px;letter-spacing:3px;color:var(--gold);opacity:.55;text-transform:uppercase;}
.test-toggle-btn{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45);color:#fff;padding:5px 16px;border-radius:20px;cursor:pointer;font-size: 13px;font-weight:900;letter-spacing:1.5px;transition:background .2s,transform .2s;}
.test-toggle-btn:hover{background:rgba(255,255,255,.32);transform:scale(1.05);}
#ops-header .hdr-spacer{flex:1;}
#hdr-clock{font-family:var(--mono);font-size:13px;color:var(--t3);white-space:nowrap;}
#hdr-av{width:34px;height:34px;border-radius:50%;overflow:hidden;background:var(--gdim);border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--gold);flex-shrink:0;}
#hdr-name{font-size:13px;font-weight:600;color:var(--t2);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.role-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:10px;font-size: 13px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;}
.role-sa{background:var(--gdim);color:var(--gold);border:1px solid rgba(212,175,55,.3);}
.role-ops{background:var(--bdim);color:var(--blue);border:1px solid rgba(96,165,250,.3);}
.hdr-icon-btn{width:34px;height:34px;border-radius:10px;background:transparent;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t3);font-size:13px;transition:background .2s,color .2s;}
.hdr-icon-btn:hover{background:var(--panel);color:var(--text);}
.hdr-back-btn{display:flex;align-items:center;gap:7px;background:var(--gdim);border:1px solid rgba(212,175,55,.25);color:var(--gold);font-size:13px;font-weight:700;letter-spacing:.5px;padding:8px 14px;border-radius:8px;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);flex-shrink:0;white-space:nowrap;}
.hdr-back-btn:hover{background:rgba(212,175,55,.18);border-color:rgba(212,175,55,.5);transform:translateX(-2px);}
#hdr-back-btn{display:flex;align-items:center;gap:7px;background:var(--gdim);border:1px solid rgba(212,175,55,.25);color:var(--gold);font-size:13px;font-weight:700;letter-spacing:.5px;padding:8px 14px;border-radius:8px;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);flex-shrink:0;white-space:nowrap;}
#hdr-back-btn:hover{background:rgba(212,175,55,.18);border-color:rgba(212,175,55,.5);transform:translateX(-2px);}

/* ── MODE CHIP (SA header toggle) ── */
#mode-toggle-chip{display:none;align-items:center;gap:6px;padding:4px 14px;border-radius:20px;font-size:13px;font-weight:800;letter-spacing:1px;text-transform:uppercase;cursor:pointer;border:1px solid;transition:all .25s;white-space:nowrap;}
#mode-toggle-chip.live{background:rgba(76,214,87,.12);border-color:rgba(76,214,87,.3);color:var(--green);}
#mode-toggle-chip.live:hover{background:rgba(76,214,87,.24);}
#mode-toggle-chip.test{background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.4);color:var(--amber);}
#mode-toggle-chip.test:hover{background:rgba(245,158,11,.28);}

/* ── TEST MODE BANNER (ticker — only when ON) ── */
#test-mode-banner{display:none;position:fixed;top:var(--hdh);left:0;right:0;height:40px;z-index:490;background:repeating-linear-gradient(45deg,rgba(245,158,11,.18),rgba(245,158,11,.18) 12px,rgba(245,158,11,.08) 12px,rgba(245,158,11,.08) 24px);border-top:2px solid rgba(245,158,11,.5);border-bottom:2px solid rgba(245,158,11,.5);overflow:hidden;}
#test-mode-banner.show{display:flex;align-items:center;}
.tmb-ticker-track{display:flex;align-items:center;gap:0;white-space:nowrap;animation:tmb-scroll 18s linear infinite;}
.tmb-ticker-track span{font-size:13px;font-weight:800;letter-spacing:2.5px;color:var(--amber);text-transform:uppercase;padding:0 40px;}
.tmb-ticker-track i{color:rgba(245,158,11,.6);font-size:12px;}
@keyframes tmb-scroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
body.test-mode #sec-nav-wrap{top:calc(var(--hdh) + 40px);}

/* ── PIN GATE ── */
#pin-gate{position:fixed;inset:0;z-index:9000;background:linear-gradient(135deg,#080e06 0%,#0c1109 40%,#0a130a 100%);display:none;flex-direction:column;align-items:center;justify-content:center;gap:0;}
#pin-gate.show{display:flex;}
#pin-gate::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(212,175,55,.06) 0,transparent 65%);pointer-events:none;}
.pin-logo{font-family:var(--disp);font-size:13px;letter-spacing:4px;color:var(--gold);opacity:.6;margin-bottom:32px;}
.pin-title{font-family:var(--disp);font-size:22px;font-weight:700;letter-spacing:4px;color:var(--text);margin-bottom:6px;text-align:center;}
.pin-sub{font-size:13px;color:var(--t3);letter-spacing:1px;margin-bottom:36px;text-align:center;}
.pin-dots{display:flex;gap:14px;margin-bottom:28px;}
.pin-dot{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.12);border:1.5px solid var(--border);transition:all .2s;}
.pin-dot.filled{background:var(--gold);border-color:var(--gold);box-shadow:0 0 10px var(--gglow);}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:220px;}
.pin-key{height:56px;border-radius:14px;background:var(--panel);border:1px solid var(--border);color:var(--text);font-size:20px;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;}
.pin-key:hover{background:var(--panel2);border-color:var(--bord2);}
.pin-key:active{transform:scale(.94);}
.pin-key.del{font-size:14px;color:var(--t3);}
.pin-key.confirm{background:var(--gdim);border-color:rgba(212,175,55,.3);color:var(--gold);}
.pin-key.confirm:hover{background:var(--gglow);}
#pin-err{min-height:20px;font-size:13px;color:var(--red);text-align:center;margin-top:12px;}
.pin-attempts{font-size:13px;color:var(--amber);text-align:center;margin-top:4px;}
#pin-attempts-left{font-weight:700;}

/* ── PIN LOCKOUT ── */
#pin-lockout{position:fixed;inset:0;z-index:9500;background:#040704;display:none;flex-direction:column;align-items:center;justify-content:center;gap:0;}
#pin-lockout.show{display:flex;}
.lockout-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.lockout-particle{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--red);opacity:0;animation:lpFall linear infinite;}
@keyframes lpFall{0%{opacity:.9;transform:translateY(0) translateX(0);}100%{opacity:0;transform:translateY(100vh) translateX(var(--lx));}}
.lockout-icon{font-size:52px;color:var(--red);margin-bottom:24px;animation:lockPulse 2s cubic-bezier(.16,1,.3,1) infinite;}
@keyframes lockPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}
.lockout-title{font-family:var(--disp);font-size:20px;letter-spacing:4px;color:var(--red);margin-bottom:12px;}
.lockout-msg{font-size:13px;color:var(--t3);text-align:center;max-width:340px;line-height:1.7;margin-bottom:6px;}
.lockout-contact{font-size:13px;color:var(--amber);font-family:var(--mono);}

/* ── CLEARANCE SCREEN ── */
#clearance-screen{position:fixed;inset:0;z-index:9800;background:#040704;display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px;}
#clearance-screen.show{display:flex;}
.clearance-icon{font-size:48px;color:var(--red);}
.clearance-msg{font-size:14px;color:var(--t3);text-align:center;max-width:360px;line-height:1.7;}

/* ── MAIN WRAP ── */
#ops-main-wrap{display:none;padding-top:calc(var(--hdh) + 48px);}
#ops-main-wrap.show{display:block;}

/* ── SECTION NAV ── */
.sec-nav-wrap{position:sticky;top:var(--hdh);z-index:490;background:rgba(4,7,4,.92);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);display:flex;align-items:stretch;}
#sec-nav{flex:1;display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none;padding:0 4px;}
#sec-nav::-webkit-scrollbar{display:none;}
.snav-arrow{flex-shrink:0;width:38px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:var(--gold);font-size:13px;opacity:0;pointer-events:none;transition:opacity .25s,background .2s;}
.snav-arrow.visible{opacity:1;pointer-events:all;}
.snav-arrow:hover{background:rgba(212,175,55,.08);}
.snav-item{display:flex;align-items:center;gap:6px;padding:0 14px;height:48px;font-size:13px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s,background .2s;flex-shrink:0;}
.snav-item:hover{color:var(--text);background:rgba(255,255,255,.03);}
.snav-item.active{color:var(--gold);border-bottom-color:var(--gold);}
.snav-badge{background:var(--red);color:#fff;font-size: 13px;font-weight:900;min-width:16px;height:16px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;margin-left:2px;}
.snav-badge.amber{background:var(--amber);}
.snav-badge.green{background:var(--green);}

/* ── GENERAL SECTION ── */
.ops-section{padding:0 28px 40px;}
.sec-lbl{font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:10px;margin-bottom:20px;padding:20px 0 0;}
.sec-lbl::after{content:'';flex:1;height:1px;background:rgba(212,175,55,.12);}

/* ── ALERT RIBBON ── */
#alert-ribbon{padding:16px 28px 0;}
.alert-stack{display:flex;flex-direction:column;gap:8px;margin-bottom:4px;}
.alert-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;border:1px solid;font-size:13px;animation:alertIn .4s cubic-bezier(.16,1,.3,1) both;}
@keyframes alertIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.alert-item.red{background:rgba(232,64,64,.07);border-color:rgba(232,64,64,.25);color:var(--red);}
.alert-item.amber{background:rgba(245,158,11,.07);border-color:rgba(245,158,11,.25);color:var(--amber);}
.alert-item.gold{background:rgba(212,175,55,.07);border-color:rgba(212,175,55,.25);color:var(--gold);}
.alert-item.blue{background:rgba(96,165,250,.07);border-color:rgba(96,165,250,.25);color:var(--blue);}
.alert-item.green{background:rgba(67,177,75,.07);border-color:rgba(67,177,75,.25);color:var(--green);}
.alert-icon{font-size:16px;flex-shrink:0;}
.alert-msg{flex:1;line-height:1.4;}
.alert-act{font-size:13px;font-weight:700;letter-spacing:.5px;cursor:pointer;text-decoration:underline;opacity:.8;}
#no-alerts{padding:12px 16px;font-size:13px;color:var(--t3);}

/* ── KPI PILLS ── */
#kpi-strip{padding:0 28px 24px;}
.kpi-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
.kpi-pill{background:rgba(255,255,255,.035);border:1px solid var(--border);border-radius:13px;padding:13px 16px;display:flex;flex-direction:column;gap:7px;flex:1;min-width:132px;max-width:230px;position:relative;overflow:hidden;transition:border-color .3s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1);animation:glassIn .55s cubic-bezier(.16,1,.3,1) both;}
@keyframes glassIn{from{opacity:0;transform:translateY(20px) scale(.97);filter:blur(6px);}to{opacity:1;transform:none;filter:blur(0);}}
@keyframes kpiIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.kpi-pill::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);}
.kpi-pill:hover{border-color:rgba(212,175,55,.28);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.35);}
.kpi-icon{font-size:18px;margin-bottom:4px;}
.kpi-label{font-size:13px;font-weight:500;letter-spacing:.2px;color:var(--t3);}
.kpi-val{font-family:var(--mono);font-size:22px;font-weight:600;line-height:1;letter-spacing:-.4px;color:var(--text);}
.kpi-val.gold{color:var(--gold);}
.kpi-val.green{color:var(--green);}
.kpi-val.red{color:var(--red);}
.kpi-val.amber{color:var(--amber);}
.kpi-val.blue{color:var(--blue);}
.kpi-sub{font-size:13px;color:var(--t3);}

/* ── CHART CARDS ── */
.charts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:1200px){.charts-grid{grid-template-columns:repeat(2,1fr);}}
/* MOBILE SINGLE-COLUMN MUST WIN (VP 2026-09-19). A later "missing 1100px"
   rule set .charts-grid to 2 columns at max-width:1100px, which ALSO matches a
   390px phone, and being later in the file it beat this rule (equal
   specificity, source order decides). The charts then showed as two shrunken
   columns on mobile. !important settles it, matching how hr-ops-monitor.css
   guarantees the same collapse. */
@media(max-width:700px){.charts-grid{grid-template-columns:1fr!important;}}
.chart-card{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:20px;position:relative;overflow:hidden;animation:kpiIn .7s cubic-bezier(.16,1,.3,1) both;transition:border-color .25s,transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;}
.chart-card:hover{border-color:rgba(212,175,55,.2);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.35);}
.chart-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);}
.chart-title{font-size:13px;font-weight:800;letter-spacing:1.5px;color:var(--t3);text-transform:uppercase;margin-bottom:16px;}
.chart-canvas-wrap{position:relative;height:180px;}

/* ── GLASS CARD ── */
.glass{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:22px;position:relative;overflow:hidden;backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 32px rgba(0,0,0,.3);animation:glassIn .65s cubic-bezier(.16,1,.3,1) both;}
.glass::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
@media(max-width:900px){.two-col,.three-col{grid-template-columns:1fr;}}

/* ── APPROVAL CARDS ── */
.approval-cards{display:flex;flex-direction:column;gap:12px;}
.appr-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px 20px;display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;animation:alertIn .4s cubic-bezier(.16,1,.3,1) both;transition:border-color .3s;}
.appr-card:hover{border-color:var(--bord2);}
.appr-av{width:44px;height:44px;border-radius:50%;background:var(--gdim);border:1.5px solid rgba(212,175,55,.25);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:14px;font-weight:700;color:var(--gold);flex-shrink:0;}
.appr-info{flex:1;min-width:160px;}
.appr-name{font-size:15px;font-weight:700;color:var(--text);margin-bottom:2px;}
.appr-dept{font-size:13px;color:var(--t3);}
.appr-type{font-size:13px;color:var(--t2);margin-top:6px;}
.appr-dates{font-family:var(--mono);font-size:13px;color:var(--t3);margin-top:4px;}
.appr-actions{display:flex;gap:8px;align-items:center;flex-shrink:0;flex-wrap:wrap;}
.appr-empty{padding:32px;text-align:center;color:var(--t3);font-size:13px;}

/* ── STATUS BADGES ── */
.status-badge{display:inline-flex;align-items:center;gap:5px;font-size: 13px;font-weight:800;padding:3px 10px;border-radius:8px;text-transform:uppercase;letter-spacing:.5px;}
.sb-pending{background:var(--adim);color:var(--amber);border:1px solid rgba(245,158,11,.25);}
.sb-approved{background:var(--gndim);color:var(--green);border:1px solid rgba(67,177,75,.25);}
.sb-rejected{background:var(--rdim);color:var(--red);border:1px solid rgba(232,64,64,.25);}
.sb-active{background:var(--gndim);color:var(--green);border:1px solid rgba(67,177,75,.25);}
.sb-submitted{background:var(--bdim);color:var(--blue);border:1px solid rgba(96,165,250,.25);}
.sb-reviewing{background:var(--gdim);color:var(--gold);border:1px solid rgba(212,175,55,.25);}
.sb-open{background:var(--adim);color:var(--amber);border:1px solid rgba(245,158,11,.25);}
.sb-closed{background:var(--panel2);color:var(--t3);border:1px solid var(--border);}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:10px;font-size:13px;font-weight:700;letter-spacing:.5px;cursor:pointer;border:1px solid transparent;transition:all .2s;text-transform:uppercase;}
.btn-sm{padding:6px 12px;font-size:13px;border-radius:8px;}
.btn-gold{background:var(--gdim);border-color:rgba(212,175,55,.35);color:var(--gold);}
.btn-gold:hover{background:var(--gglow);border-color:rgba(212,175,55,.6);}
.btn-green{background:var(--gndim);border-color:rgba(67,177,75,.35);color:var(--green);}
.btn-green:hover{background:rgba(67,177,75,.22);}
.btn-red{background:var(--rdim);border-color:rgba(232,64,64,.35);color:var(--red);}
.btn-red:hover{background:rgba(232,64,64,.22);}
.btn-blue{background:var(--bdim);border-color:rgba(96,165,250,.35);color:var(--blue);}
.btn-blue:hover{background:rgba(96,165,250,.22);}
.btn-outline{background:transparent;border-color:var(--border);color:var(--t2);}
.btn-outline:hover{background:var(--panel);border-color:var(--bord2);}

/* ── FORM INPUTS ── */
.gi{width:100%;padding:10px 14px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:13px;font-family:var(--body);outline:none;transition:border-color .2s;margin-bottom:12px;}
.gi:focus{border-color:rgba(212,175,55,.5);}
.gi-label{display:block;font-size:13px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--t3);margin-bottom:6px;}
.gi-ta{resize:vertical;min-height:80px;}
select.gi option{background:#111a0e;}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:800000;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%);}
.modal-overlay.open{display:flex;}
.modal-box{background:rgba(6,10,6,.78);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:36px;width:100%;max-width:520px;position:relative;animation:mIn .4s cubic-bezier(.16,1,.3,1) both;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 32px 80px rgba(0,0,0,.7);backdrop-filter:blur(32px) saturate(160%);-webkit-backdrop-filter:blur(32px) saturate(160%);
  /* A dialog taller than the screen must scroll INSIDE its card, never grow
     past the top and bottom edges with nothing to scroll. Reported on the HR
     dashboard 2026-07-28; the same fault was in this rule. dvh because 100vh
     on a phone does not subtract the browser chrome. */
  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
@keyframes mIn{from{opacity:0;transform:translateY(22px) scale(.96);}to{opacity:1;transform:none;}}
.modal-box::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:140px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.modal-title{font-family:var(--disp);font-size:18px;font-weight:700;letter-spacing:3px;color:var(--gold);margin-bottom:6px;}
.modal-sub{font-size:13px;color:var(--t3);margin-bottom:20px;}
.modal-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:8px;background:var(--panel);border:none;color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .2s;}
.modal-close:hover{background:var(--panel2);color:var(--text);}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px;}

/* ── WORKFORCE TABLE ── */
.wf-table-wrap{overflow-x:auto;border-radius:16px;border:1px solid var(--border);}
.wf-table{width:100%;border-collapse:collapse;min-width:900px;}
.wf-table thead th{padding:11px 14px;text-align:left;font-size:13px;font-weight:800;letter-spacing:1px;color:var(--t3);text-transform:uppercase;background:rgba(0,0,0,.25);border-bottom:1px solid var(--border);white-space:nowrap;}
.wf-table tbody tr{border-bottom:1px solid rgba(255,255,255,.04);transition:background .2s;}
.wf-table tbody tr:hover{background:rgba(255,255,255,.025);}
.wf-table tbody td{padding:11px 14px;font-size:13px;vertical-align:middle;}
.wf-empty{text-align:center;padding:32px;color:var(--t3);font-size:13px;}
.wf-av{width:32px;height:32px;border-radius:50%;background:var(--gdim);border:1px solid rgba(212,175,55,.2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--gold);}
.wf-av-wrap{display:flex;align-items:center;gap:10px;}

/* ── DOSG GRANT TABLE ── */
.grant-tbl-wrap{overflow-x:auto;border-radius:16px;border:1px solid var(--border);}
.grant-tbl{width:100%;border-collapse:collapse;min-width:800px;}
.grant-tbl thead th{padding:11px 14px;text-align:left;font-size:13px;font-weight:800;letter-spacing:1px;color:var(--t3);text-transform:uppercase;background:rgba(0,0,0,.25);border-bottom:1px solid var(--border);white-space:nowrap;}
.grant-tbl tbody tr{border-bottom:1px solid rgba(255,255,255,.04);transition:background .2s;cursor:pointer;}
.grant-tbl tbody tr:hover{background:rgba(255,255,255,.03);}
.grant-tbl tbody td{padding:12px 14px;font-size:13px;vertical-align:middle;}
.grant-amount{font-family:var(--mono);font-weight:700;color:var(--gold);}

/* ── DOSG DETAIL DRAWER ── */
#dosg-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:7000;display:none;-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
#dosg-drawer-overlay.open{display:block;}
#dosg-drawer{position:fixed;top:0;right:-600px;width:580px;max-width:95vw;height:100vh;background:linear-gradient(180deg,var(--deep) 0%,var(--void) 100%);border-left:1px solid var(--border);z-index:7100;transition:right .38s cubic-bezier(.16,1,.3,1);overflow-y:auto;display:flex;flex-direction:column;}
#dosg-drawer.open{right:0;}
.dosg-drw-hdr{padding:24px 24px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
.dosg-drw-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:8px;background:var(--panel);border:none;color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .2s;}
.dosg-drw-close:hover{background:var(--panel2);color:var(--text);}
.dosg-drw-body{padding:24px;flex:1;}
.dosg-field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px;}
.dosg-field{margin-bottom:14px;}
.dosg-field-label{font-size:13px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--t3);margin-bottom:4px;}
.dosg-field-val{font-size:13px;color:var(--t2);line-height:1.5;}
.dosg-field-val.mono{font-family:var(--mono);color:var(--gold);}

/* ── PROFILE DRAWER (staff overview) ── */
#prof-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:7000;display:none;-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
#prof-drawer-overlay.open{display:block;}
#prof-drawer{position:fixed;top:0;right:-480px;width:460px;max-width:95vw;height:100vh;background:linear-gradient(180deg,var(--deep) 0%,var(--void) 100%);border-left:1px solid var(--border);z-index:7100;transition:right .38s cubic-bezier(.16,1,.3,1);overflow-y:auto;}
#prof-drawer.open{right:0;}
.prof-drw-hdr{padding:24px;border-bottom:1px solid var(--border);}
.prof-drw-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:8px;background:var(--panel);border:none;color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .2s;}
.prof-drw-close:hover{background:var(--panel2);color:var(--text);}
.prof-drw-av{width:56px;height:56px;border-radius:50%;background:var(--gdim);border:2px solid rgba(212,175,55,.35);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:20px;font-weight:700;color:var(--gold);margin-bottom:12px;}
.prof-drw-name{font-size:18px;font-weight:700;color:var(--text);margin-bottom:4px;}
.prof-drw-dept{font-size:13px;color:var(--t3);margin-bottom:12px;}
.prof-drw-body{padding:20px 24px;}
.prof-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:13px;}
.prof-row:last-child{border-bottom:none;}
.prof-row-label{color:var(--t3);font-size:13px;font-weight:700;letter-spacing:.5px;}
.prof-row-val{color:var(--t2);font-family:var(--mono);font-size:13px;}

/* ── SICKNESS CARDS ── */
.sick-cards{display:flex;flex-direction:column;gap:10px;}
.sick-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px 20px;display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;animation:alertIn .4s cubic-bezier(.16,1,.3,1) both;}
.sick-card.active{border-color:rgba(232,64,64,.28);}
.sick-av{width:40px;height:40px;border-radius:50%;background:var(--rdim);border:1px solid rgba(232,64,64,.2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--red);flex-shrink:0;}
.sick-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:2px;}
.sick-dept{font-size:13px;color:var(--t3);}
.sick-meta{font-size:13px;color:var(--t2);margin-top:4px;}

/* ── PROBATION CARDS ── */
.prob-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px;}
.prob-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;position:relative;overflow:hidden;animation:kpiIn .6s cubic-bezier(.16,1,.3,1) both;}
.prob-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);}
.prob-card.overdue{border-color:rgba(232,64,64,.3);background:linear-gradient(135deg,rgba(232,64,64,.04) 0%,var(--panel) 60%);}
.prob-tl{margin-bottom:12px;}
.prob-tl-bar{height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;margin-bottom:5px;}
.prob-tl-fill{height:100%;border-radius:4px;background:var(--green);transition:width .6s;}
.prob-tl-fill.amber{background:var(--amber);}
.prob-tl-fill.red{background:var(--red);}
.prob-tl-labels{display:flex;justify-content:space-between;font-size: 13px;color:var(--t3);font-family:var(--mono);}
.prob-days{font-family:var(--mono);font-size:28px;font-weight:700;line-height:1;margin-bottom:4px;}
.prob-days.green{color:var(--green);}
.prob-days.amber{color:var(--amber);}
.prob-days.red{color:var(--red);}

/* ── BRADFORD TABLE ── */
.bf-tbl-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--border);margin-top:16px;}
.bf-tbl{width:100%;border-collapse:collapse;min-width:600px;}
.bf-tbl thead th{padding:10px 14px;text-align:left;font-size:13px;font-weight:800;letter-spacing:1px;color:var(--t3);text-transform:uppercase;background:rgba(0,0,0,.25);border-bottom:1px solid var(--border);}
.bf-tbl tbody tr{border-bottom:1px solid rgba(255,255,255,.04);transition:background .2s;}
.bf-tbl tbody tr:hover{background:rgba(255,255,255,.025);}
.bf-tbl tbody td{padding:10px 14px;font-size:13px;}
.bf-score{font-family:var(--mono);font-weight:700;}
.bf-low{color:var(--green);}
.bf-med{color:var(--amber);}
.bf-high{color:var(--red);}

/* ── SHIFT MONITOR ── */
.shift-grid{display:flex;flex-direction:column;gap:10px;}
.shift-row{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;animation:alertIn .3s cubic-bezier(.16,1,.3,1) both;}
.shift-row.active{border-color:rgba(67,177,75,.28);}
.shift-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.shift-dot.on{background:var(--green);box-shadow:0 0 6px var(--green);}
.shift-dot.off{background:rgba(255,255,255,.18);}
.shift-name{flex:1;font-size:14px;font-weight:600;color:var(--text);}
.shift-dept{font-size:13px;color:var(--t3);}
.shift-hours{font-family:var(--mono);font-size:13px;color:var(--gold);font-weight:700;}
.shift-time{font-family:var(--mono);font-size:13px;color:var(--t3);}

/* ── LEAVE BALANCE TABLE ── */
.lb-tbl-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--border);}
.lb-tbl{width:100%;border-collapse:collapse;min-width:700px;}
.lb-tbl thead th{padding:10px 14px;text-align:left;font-size:13px;font-weight:800;letter-spacing:1px;color:var(--t3);text-transform:uppercase;background:rgba(0,0,0,.25);border-bottom:1px solid var(--border);white-space:nowrap;}
.lb-tbl tbody tr{border-bottom:1px solid rgba(255,255,255,.04);transition:background .2s;}
.lb-tbl tbody tr:hover{background:rgba(255,255,255,.025);}
.lb-tbl tbody td{padding:10px 14px;font-size:13px;}
.lb-bar-wrap{display:flex;align-items:center;gap:8px;}
.lb-bar-outer{flex:1;height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;min-width:60px;}
.lb-bar-fill{height:100%;border-radius:3px;transition:width .5s;}
.lb-bar-fill.green{background:var(--green);}
.lb-bar-fill.amber{background:var(--amber);}
.lb-bar-fill.red{background:var(--red);}

/* ── RECRUITMENT CARDS ── */
.recruit-cards{display:flex;flex-direction:column;gap:12px;}
.recruit-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px 20px;display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;animation:alertIn .4s cubic-bezier(.16,1,.3,1) both;}
.recruit-stage{display:inline-flex;align-items:center;gap:5px;font-size: 13px;font-weight:800;padding:3px 9px;border-radius:8px;text-transform:uppercase;letter-spacing:.5px;}
.rs-open{background:var(--adim);color:var(--amber);border:1px solid rgba(245,158,11,.25);}
.rs-approved{background:var(--gndim);color:var(--green);border:1px solid rgba(67,177,75,.25);}
.rs-filled{background:var(--bdim);color:var(--blue);border:1px solid rgba(96,165,250,.25);}
.rs-closed{background:var(--panel2);color:var(--t3);border:1px solid var(--border);}

/* ── BROADCAST ── */
.bc-history{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow-y:auto;}
.bc-item{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px 16px;}
.bc-item-subj{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;}
.bc-item-meta{font-size:13px;color:var(--t3);}

/* ── BAR CHART (custom CSS bars) ── */
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.bar-label{width:150px;flex-shrink:0;font-size:13px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bar-outer{flex:1;height:7px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;}
.bar-fill{height:100%;border-radius:4px;transition:width .6s;}
.bar-fill.gold{background:var(--gold);}
.bar-fill.green{background:var(--green);}
.bar-fill.amber{background:var(--amber);}
.bar-fill.red{background:var(--red);}
.bar-fill.blue{background:var(--blue);}
.bar-fill.grad{background:linear-gradient(90deg,var(--green),var(--gold));}
.bar-count{font-family:var(--mono);font-size:13px;color:var(--t3);min-width:30px;text-align:right;}

/* ── SEARCH BAR ── */
.search-wrap{position:relative;margin-bottom:16px;}
.search-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:14px;}
.search-input{width:100%;padding:11px 14px 11px 40px;background:var(--panel);border:1px solid var(--border);border-radius:12px;color:var(--text);font-size:13px;font-family:var(--body);outline:none;transition:border-color .2s;}
.search-input:focus{border-color:rgba(212,175,55,.4);}
.filter-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.chip{padding:5px 13px;border-radius:20px;font-size:13px;font-weight:700;cursor:pointer;background:var(--panel);border:1px solid var(--border);color:var(--t3);transition:all .2s;white-space:nowrap;}
.chip:hover{border-color:var(--bord2);color:var(--t2);}
.chip.active{background:var(--gdim);border-color:rgba(212,175,55,.35);color:var(--gold);}

/* ── TOAST ── */
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:#1a2718;border:1px solid rgba(212,175,55,.35);color:var(--text);padding:12px 22px;border-radius:12px;font-size:13px;font-weight:600;z-index:999999;opacity:0;pointer-events:none;transition:all .3s;white-space:nowrap;box-shadow:0 8px 32px rgba(0,0,0,.5);}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.err{border-color:rgba(232,64,64,.4);background:#1a0f0f;}

/* ── LIGHT THEME ── */
[data-theme="light"]{--void:#ffffff;--deep:#f4f6f4;--base:#e8ede8;--lift:#dce4dc;--panel:rgba(4,80,30,0.05);--panel2:rgba(4,80,30,0.09);--border:rgba(4,80,30,0.16);--bord2:rgba(4,80,30,0.26);--gold:#04501e;--gold2:#065a23;--gdim:rgba(4,80,30,0.10);--gglow:rgba(4,80,30,0.22);--gsoft:rgba(4,80,30,0.04);--green:var(--green);--gndim:rgba(67,177,75,0.12);--gnsoft:rgba(67,177,75,0.05);--red:#c42020;--rdim:rgba(196,32,32,0.10);--blue:#1d4ed8;--bdim:rgba(29,78,216,0.10);--text:#000000;--t2:rgba(0,0,0,0.80);--t3:rgba(0,0,0,0.52);}
[data-theme="light"] body{background:#ffffff;}
[data-theme="light"] body::before{display:none;}
[data-theme="light"] #ops-header{background:rgba(255,255,255,0.96)!important;border-color:rgba(4,80,30,0.14)!important;}
[data-theme="light"] .sec-nav-wrap{background:rgba(255,255,255,.96)!important;}
[data-theme="light"] #pin-gate,[data-theme="light"] #pin-lockout{background:#ffffff;}
[data-theme="light"] .modal-box{background:#f8fbf8;}
[data-theme="light"] #dosg-drawer,[data-theme="light"] #prof-drawer{background:#f8fbf8;}
[data-theme="light"] .search-input{background:rgba(4,80,30,.04);}
[data-theme="light"] #toast{background:#fff;color:#000;}
/* ── BROWSER THEME ── */
[data-theme="browser"]{--void:#ececec;--deep:#e4e4e4;--base:#ffffff;--lift:#f8f8f8;--panel:rgba(0,0,0,0.05);--panel2:rgba(0,0,0,0.09);--border:rgba(0,0,0,0.15);--bord2:rgba(0,0,0,0.25);--gold:#0066cc;--gold2:#0080ff;--gdim:rgba(0,102,204,0.10);--gglow:rgba(0,102,204,0.22);--gsoft:rgba(0,102,204,0.05);--green:#188a44;--gndim:rgba(24,138,68,0.12);--gnsoft:rgba(24,138,68,0.05);--red:#c00000;--rdim:rgba(192,0,0,0.10);--blue:#0044aa;--bdim:rgba(0,68,170,0.10);--text:#000000;--t2:rgba(0,0,0,0.80);--t3:rgba(0,0,0,0.55);}
[data-theme="browser"] body{background:#ececec;}[data-theme="browser"] body::before{display:none;}
[data-theme="browser"] #ops-header{background:rgba(236,236,236,0.97)!important;border-color:rgba(0,0,0,0.14)!important;}
[data-theme="browser"] .sec-nav-wrap{background:rgba(232,232,232,.97)!important;}
[data-theme="browser"] #pin-gate,[data-theme="browser"] #pin-lockout{background:#ececec;}
[data-theme="browser"] .modal-box{background:#f8f8f8;}
[data-theme="browser"] #dosg-drawer,[data-theme="browser"] #prof-drawer{background:#f8f8f8;}
[data-theme="browser"] .search-input{background:rgba(0,0,0,.05);}
[data-theme="browser"] #toast{background:#fff;color:#000;}
[data-theme="browser"] .btn-gold{background:#0066cc;color:#fff;}[data-theme="browser"] .btn-green{background:#188a44;}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  #ops-header{padding:0 14px;gap:8px;}
  #hdr-name{display:none;}
  .ops-section{padding:0 12px 32px;}
  #alert-ribbon{padding:12px 12px 0;}
  #kpi-strip{padding:0 12px 18px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
  .kpi-pill{min-width:0;max-width:none;padding:13px 14px;}
  .kpi-pill .kpi-val{font-size:18px;}
  .modal-box{max-width:calc(100vw - 16px);margin:8px;border-radius:14px;padding:22px;}
  #dosg-drawer{width:100%;right:-100%;}
  #prof-drawer{width:100%;right:-100%;}
  .two-col{grid-template-columns:1fr;}
  .three-col{grid-template-columns:1fr;}
  .ops-title-sep,.hdr-title{display:none;}
  #hdr-clock{display:none;}
  /* Snav: increase touch target. Horizontal scroll already handles overflow. */
  .snav-item{padding:0 12px;font-size:13px;height:46px;letter-spacing:.6px;}
  /* Section headers + button rows stack vertically. */
  .ops-section .sec-hdr,
  .ops-section .section-hdr,
  .ops-section .sec-lbl{flex-wrap:wrap;row-gap:10px;}
  .ops-section .sec-hdr .btn,
  .ops-section .section-hdr .btn,
  .ops-section .sec-lbl .btn{width:100%;justify-content:center;}
  /* Tables horizontally scroll, never overflow. */
  .ops-section table,
  .ops-section .dtbl,
  .ops-section .it-tbl,
  .ops-section .rp-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;max-width:100%;}
  .ops-section table thead,
  .ops-section table tbody,
  .ops-section table tr{width:100%;}
  /* Inline 2/3-col grids in HTML attrs collapse to one. */
  .ops-section [style*="grid-template-columns:1fr 1fr"],
  .ops-section [style*="grid-template-columns: 1fr 1fr"],
  .ops-section [style*="grid-template-columns:repeat(2"],
  .ops-section [style*="grid-template-columns:repeat(3"]{
    grid-template-columns:1fr!important;
  }
  /* Touch min-height on every form control + button. */
  .ops-section .btn,
  .ops-section .gi{min-height:44px;}
}
@media(max-width:540px){
  #ops-header{padding:0 10px;gap:6px;}
  .hdr-back-label{display:none;}
  #hdr-back-btn .hdr-back-label{display:none;}
  .brand-logo-text{display:none;}
  #role-badge-wrap{display:none;}
  #kpi-strip{grid-template-columns:1fr 1fr;gap:7px;}
  .kpi-pill{padding:11px 12px;}
  .kpi-pill .kpi-val{font-size:16px;}
  .kpi-pill .kpi-lbl{font-size:13px;letter-spacing:.6px;}
  .ops-section{padding:0 10px 28px;}
  .snav-item{padding:0 11px;font-size:13px;height:44px;}
  .snav-item i{font-size:11px;}
}
@media(max-width:400px){
  #ops-header{gap:5px;padding:0 8px;}
  .brand-logo-wrap{display:none;}
  .ops-section{padding:0 8px 24px;}
  #kpi-strip{padding:0 8px 14px;gap:6px;}
  .snav-item{padding:0 9px;font-size:13px;}
}

/* Centralised notification panel overflow guard — also applies on
   ops-dashboard (#sys-notif-panel). The shared rule in css/responsive.css
   already handles the case but this declaration documents the dependency
   so future ops-dashboard layout changes don't accidentally regress it. */
#maint-banner{display:none;position:fixed;top:0;left:0;right:0;height:36px;z-index:999998;background:linear-gradient(90deg,rgba(180,120,0,.97),rgba(220,160,0,.97));border-bottom:2px solid rgba(255,200,50,.5);align-items:center;justify-content:center;gap:12px;font-size: 13px;font-weight:900;letter-spacing:2px;color:#fff;text-transform:uppercase;-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
#maint-banner.show{display:flex;animation:tmBIn .45s cubic-bezier(.16,1,.3,1) both;}
@keyframes tmBIn{from{transform:translateY(-100%);opacity:0;}to{transform:translateY(0);opacity:1;}}
.maint-toggle-btn{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45);color:#fff;padding:4px 14px;border-radius:20px;cursor:pointer;font-size: 13px;font-weight:900;letter-spacing:1.5px;white-space:nowrap;transition:background .2s,transform .2s;}
.maint-toggle-btn:hover{background:rgba(255,255,255,.32);transform:scale(1.05);}
#maint-overlay{display:none;position:fixed;inset:0;z-index:999997;background:rgba(5,9,5,.96);align-items:center;justify-content:center;flex-direction:column;gap:16px;color:#fff;text-align:center;padding:32px;}
#maint-overlay.show{display:flex;}
#maint-overlay i{font-size:48px;color:var(--gold);margin-bottom:8px;}
#maint-overlay h2{font-family:var(--disp);font-size:28px;letter-spacing:4px;margin:0;}
#maint-overlay p{color:rgba(255,255,255,.6);font-size:13px;max-width:440px;line-height:1.7;}
/* ── LEAVE CALENDAR ── */
#leave-cal-section{padding:0 28px 28px;}
.lc-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.lc-title{font-family:var(--disp);font-size:16px;font-weight:700;letter-spacing:2px;color:var(--gold);}
.lc-arrow{width:44px;height:44px;border-radius:8px;background:var(--panel2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);transition:all .2s;padding:0;outline:none;appearance:none;-webkit-appearance:none;font-size:13px;}
.lc-arrow:hover{border-color:var(--gold);color:var(--gold);}
.lc-day.public-holiday{background:rgba(212,175,55,.07);border-color:rgba(212,175,55,.3);}
.lc-ph-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);}
.lc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.lc-dow{text-align:center;font-size:13px;font-weight:800;letter-spacing:1px;color:var(--t3);text-transform:uppercase;padding:6px 0;}
.lc-day{min-height:52px;border-radius:8px;background:rgba(0,0,0,.15);border:1px solid var(--border);padding:5px;cursor:default;transition:all .2s;position:relative;}
.lc-day:hover{border-color:rgba(212,175,55,.2);}
.lc-day.today{border-color:rgba(212,175,55,.4);background:rgba(212,175,55,.04);}
.lc-day.empty{background:transparent;border-color:transparent;}
.lc-day.has-leave{border-color:rgba(67,177,75,.3);cursor:pointer;}
.lc-day.has-leave:hover{background:rgba(67,177,75,.06);border-color:rgba(67,177,75,.6);}
.lc-dn{font-size:13px;font-weight:600;color:var(--t2);}
.lc-dots{display:flex;gap:2px;flex-wrap:wrap;margin-top:3px;}
.lc-dot{width:5px;height:5px;border-radius:50%;background:var(--green);}
.lc-count{font-size: 13px;font-weight:800;color:var(--green);margin-top:2px;}
.lc-today-panel{margin-bottom:16px;padding:12px 16px;background:rgba(67,177,75,.07);border:1px solid rgba(67,177,75,.2);border-radius:12px;}
.lc-today-panel-title{font-size:13px;font-weight:800;letter-spacing:1px;color:var(--green);text-transform:uppercase;margin-bottom:8px;}
.lc-staff-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.lc-staff-row:last-child{border-bottom:none;}
.lc-av{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.lc-av-ini{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-size: 13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}

/* ── ANALYTICS EXPAND ── */
#analytics-expand-overlay{position:fixed;inset:0;z-index:9100;background:rgba(0,0,0,0);display:flex;align-items:center;justify-content:center;padding:24px;pointer-events:none;transition:background .35s cubic-bezier(.16,1,.3,1);}
#analytics-expand-overlay.open{background:rgba(0,0,0,.78);pointer-events:all;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
#analytics-expand-box{background:var(--panel);border:1px solid var(--bord2);border-radius:22px;width:100%;max-width:700px;max-height:82vh;overflow-y:auto;padding:32px;position:relative;transform:scale(.86) translateY(24px);opacity:0;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .32s cubic-bezier(.16,1,.3,1);box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(212,175,55,.08);}
#analytics-expand-overlay.open #analytics-expand-box{transform:scale(1) translateY(0);opacity:1;}
#analytics-expand-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:14px;z-index:2;transition:background .2s,color .2s,border-color .2s;}
#analytics-expand-close:hover{background:rgba(232,64,64,.18);color:var(--red);border-color:rgba(232,64,64,.4);}
#analytics-expand-title{font-size:13px;font-weight:800;letter-spacing:2px;color:var(--gold);text-transform:uppercase;margin-bottom:22px;display:flex;align-items:center;gap:10px;}
.glass[data-expand]{cursor:pointer;transition:border-color .25s,box-shadow .25s,transform .2s;}
.glass[data-expand]:hover{border-color:rgba(212,175,55,.35);box-shadow:0 6px 28px rgba(0,0,0,.25);transform:translateY(-1px);}
.expand-hint{position:absolute;top:8px;right:8px;font-size: 13px;color:var(--t4);opacity:0;transition:opacity .2s;pointer-events:none;}
.glass[data-expand]:hover .expand-hint{opacity:1;}
/* ── SYSTEM NOTIFICATION BELL ── */
.sys-notif-wrap{position:relative;display:inline-flex;align-items:center;}.sys-notif-btn{width:36px;height:36px;border-radius:50%;background:transparent;border:1px solid var(--border,rgba(255,255,255,.22));display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2,rgba(244,249,240,.95));font-size:15px;position:relative;transition:all .2s;}.sys-notif-btn:hover{background:var(--bdim);border-color:rgba(96,165,250,.4);color:var(--blue);}.sys-notif-btn.has-alerts{color:var(--gold);animation:sysNBShake 2s cubic-bezier(.16,1,.3,1) infinite;}@keyframes sysNBShake{0%,100%{transform:rotate(0);}10%{transform:rotate(-14deg);}20%{transform:rotate(14deg);}30%{transform:rotate(-10deg);}40%{transform:rotate(10deg);}50%{transform:rotate(0);}}.sys-notif-count{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:9px;background:var(--red);color:#fff;font-size: 13px;font-weight:900;display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid var(--void);pointer-events:none;line-height:1;}.sys-notif-panel{position:absolute;top:calc(100% + 10px);right:0;width:310px;background:var(--base,#0d1b0a);border:1px solid var(--border,rgba(255,255,255,.22));border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.55);z-index:9999;display:none;overflow:hidden;}.sys-notif-panel.open{display:block;animation:snpIn .2s cubic-bezier(.16,1,.3,1) both;}@keyframes snpIn{from{opacity:0;transform:translateY(-8px) scale(.97);}to{opacity:1;transform:none;}}.snp-hdr{padding:12px 14px 8px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border,rgba(255,255,255,.12));}.snp-hdr-title{font-size: 13px;font-weight:900;letter-spacing:1.5px;color:var(--t3,rgba(244,249,240,.7));text-transform:uppercase;}.snp-mark-btn{background:none;border:none;color:var(--t3,rgba(244,249,240,.7));font-size: 13px;cursor:pointer;font-weight:700;padding:2px 7px;border-radius:4px;}.snp-mark-btn:hover{background:var(--panel,rgba(255,255,255,.1));color:var(--text,#fff);}.snp-body{max-height:360px;overflow-y:auto;}.sn-item{display:flex;align-items:flex-start;gap:9px;padding:9px 14px;cursor:pointer;transition:background .15s;border-left:3px solid transparent;}.sn-item:hover{background:var(--panel,rgba(255,255,255,.06));}.sn-item.sn-unread{background:rgba(255,255,255,.03);}.sn-item.sn-read{opacity:.46;transition:opacity .2s;}.sn-item.sn-read:hover{opacity:.78;}.sn-read-mark{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2);flex-shrink:0;align-self:center;margin-left:auto;}.snp-empty{padding:26px 14px;text-align:center;color:var(--t3,rgba(244,249,240,.6));font-size:13px;}.sn-unread-dot{width:7px;height:7px;border-radius:50%;background:#f0c832;flex-shrink:0;align-self:center;margin-left:auto;}

/* ── Governance Availability widget (shared card design) ── */
.gov-av-grid{display:flex;flex-direction:column;gap:12px;}
.gav-card{display:flex;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--panel);animation:fadeIn .35s cubic-bezier(.16,1,.3,1) both;}
.gav-stripe{width:5px;flex-shrink:0;}
.gav-available .gav-stripe{background:var(--green);}
.gav-on-leave  .gav-stripe{background:var(--gold);}
.gav-unavailable .gav-stripe{background:var(--red);}
.gav-card-body{flex:1;min-width:0;}
.gav-card-top{display:flex;align-items:center;gap:14px;padding:16px 18px;}
.gav-av{width:52px;height:52px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:2px solid rgba(212,175,55,.3);background:rgba(212,175,55,.1);font-size:16px;font-weight:700;color:var(--gold);font-family:var(--mono);}
.gav-meta{flex:1;min-width:0;}
.gav-name{font-size:14px;font-weight:700;color:var(--text);}
.gav-role{font-size: 13px;font-weight:800;letter-spacing:1.2px;color:var(--t3);text-transform:uppercase;margin-top:2px;}
.gav-status-col{text-align:right;flex-shrink:0;}
.gav-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;font-size: 13px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;}
.gav-badge-available{background:rgba(67,177,75,.1);color:var(--green);border:1px solid rgba(67,177,75,.3);}
.gav-badge-on-leave{background:rgba(212,175,55,.1);color:var(--gold);border:1px solid rgba(212,175,55,.3);}
.gav-badge-unavailable{background:rgba(255,72,72,.1);color:var(--red);border:1px solid rgba(255,72,72,.3);}
.gav-period{font-size: 13px;color:var(--t4);margin-top:4px;display:flex;align-items:center;gap:3px;justify-content:flex-end;}
.gav-arrow{opacity:.5;}
.gav-note-disp{font-size: 13px;color:var(--t3);font-style:italic;margin-top:3px;text-align:right;}
.gav-empty{display:flex;align-items:center;gap:10px;padding:28px;color:var(--t4);font-size:13px;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:540px){.gav-card-top{flex-wrap:wrap;}.gav-status-col{text-align:left;width:100%;}.gav-period,.gav-note-disp{justify-content:flex-start;text-align:left;}}

/* ══════════════════════════════════════════════════════
   PREMIUM PRESENCE CARDS
   ══════════════════════════════════════════════════════ */
@keyframes cardSlideUp {
  from { opacity:0; transform:translateY(28px) scale(.96); }
  to   { opacity:1; transform:translateY(0)    scale(1);   }
}
@keyframes activeShiftGlow {
  0%,100% { box-shadow:0 0 0 0 rgba(67,177,75,0),   0 6px 24px rgba(0,0,0,.35); }
  50%      { box-shadow:0 0 0 5px rgba(67,177,75,.1), 0 6px 24px rgba(0,0,0,.35); }
}
@keyframes pipLivePulse {
  0%,100% { transform:scale(1);   opacity:1; }
  50%      { transform:scale(1.6); opacity:.5; }
}
.pres-card {
  position:relative; background:var(--panel); border:1px solid var(--border);
  border-radius:18px; overflow:hidden; transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
  animation:cardSlideUp .45s cubic-bezier(.16,1,.3,1) both;
}
.pres-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.45); }
.pres-card--active { border-color:rgba(67,177,75,.3); animation:cardSlideUp .45s cubic-bezier(.16,1,.3,1) both, activeShiftGlow 3.5s cubic-bezier(.16,1,.3,1) 1s infinite; }
.pres-card__bar { height:3px; }
.pres-card--active .pres-card__bar  { background:linear-gradient(90deg,var(--green) 0%,rgba(67,177,75,0) 100%); }
.pres-card--done  .pres-card__bar   { background:linear-gradient(90deg,rgba(212,175,55,.5) 0%,transparent 100%); }
.pres-card--expected .pres-card__bar { background:linear-gradient(90deg,rgba(255,72,72,.5) 0%,transparent 100%); }
.pres-card__body { padding:18px 20px 16px; }
.pres-card__head  { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.pres-card__av {
  width:52px; height:52px; border-radius:50%; flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:800; color:var(--gold); font-family:var(--mono);
  border:2px solid rgba(212,175,55,.25); background:rgba(212,175,55,.07);
}
.pres-card--active .pres-card__av { border-color:rgba(67,177,75,.5); box-shadow:0 0 0 4px rgba(67,177,75,.1); }
.pres-card__info { flex:1; min-width:0; }
.pres-card__name { font-size:15px; font-weight:800; word-break:break-word; line-height:1.3; margin-bottom:2px; }
.pres-card__dept { font-size:13px; color:var(--t3); letter-spacing:.3px; }
.pres-card__badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:20px; font-size: 13px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; flex-shrink:0;
}
.pres-card__badge--active { background:rgba(67,177,75,.12); color:var(--green); border:1px solid rgba(67,177,75,.3); }
.pres-card__badge--done   { background:rgba(255,255,255,.05); color:var(--t3); border:1px solid var(--border); }
.pres-card__pip { width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; }
.pres-card--active .pres-card__pip { animation:pipLivePulse 1.8s cubic-bezier(.16,1,.3,1) infinite; }
.pres-card__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--border); margin:0 -20px -16px; }
.pres-card__stat { padding:12px 16px; text-align:center; }
.pres-card__stat + .pres-card__stat { border-left:1px solid var(--border); }
.pres-card__stat-val { font-size:13px; font-weight:700; font-family:var(--mono); color:var(--text); line-height:1.2; }
.pres-card__stat-lbl { font-size: 13px; color:var(--t3); letter-spacing:.5px; text-transform:uppercase; margin-top:2px; }
.pres-card--active .pres-card__stat-val.elapsed { color:var(--green); }

/* ══════════════════════════════════════════════════════
   LIVE PRESENCE — HEARTBEAT, STATUS DOTS & DETAIL MODAL
   ══════════════════════════════════════════════════════ */
@keyframes heartbeatLive {
  0%,100% { transform:scale(1);    box-shadow:0 0 0 0   rgba(67,177,75,.7); }
  14%     { transform:scale(1.3);  box-shadow:0 0 0 8px rgba(67,177,75,.3); }
  28%     { transform:scale(1.05); box-shadow:0 0 0 0   rgba(67,177,75,0);  }
  42%     { transform:scale(1.2);  box-shadow:0 0 0 5px rgba(67,177,75,.2); }
  56%,80% { transform:scale(1);    box-shadow:0 0 0 0   rgba(67,177,75,0);  }
}
@keyframes presModalBgIn  { from{opacity:0} to{opacity:1} }
@keyframes presModalBgOut { from{opacity:1} to{opacity:0} }
@keyframes presModalIn  { from{opacity:0;transform:scale(.88) translateY(32px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes presModalOut { from{opacity:1;transform:scale(1) translateY(0)} to{opacity:0;transform:scale(.88) translateY(32px)} }
.pres-live-dot { width:12px;height:12px;border-radius:50%;background:var(--green);flex-shrink:0;animation:heartbeatLive 2s cubic-bezier(.16,1,.3,1) infinite; }
.pres-done-dot { width:12px;height:12px;border-radius:50%;background:rgba(212,175,55,.55);flex-shrink:0; }
.pres-away-dot { width:12px;height:12px;border-radius:50%;background:rgba(239,68,68,.7);flex-shrink:0; }
.pres-card__chip { font-size: 13px;font-family:var(--mono);padding:3px 9px;border-radius:6px;background:rgba(255,255,255,.05);color:var(--t2);border:1px solid var(--border);white-space:nowrap; }
.pres-card__meta { display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px; }
.pres-modal-wrap { position:fixed;inset:0;z-index:9100;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.65);backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%);animation:presModalBgIn .3s both; }
.pres-modal-wrap.pm-closing { animation:presModalBgOut .3s forwards; }
.pres-modal-box { background:rgba(6,10,6,.78);border:1px solid rgba(255,255,255,.08);border-radius:24px;width:min(560px,calc(100vw - 32px));max-height:86vh;overflow-y:auto;animation:presModalIn .42s cubic-bezier(.16,1,.3,1) both;scrollbar-width:thin;backdrop-filter:blur(32px) saturate(160%);-webkit-backdrop-filter:blur(32px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 32px 80px rgba(0,0,0,.7); }
.pres-modal-box.pm-closing { animation:presModalOut .28s cubic-bezier(.16,1,.3,1) forwards; }
.pres-modal-bar { height:4px; }
.pres-modal-header { display:flex;align-items:flex-start;gap:16px;padding:20px 24px 16px; }
.pres-modal-av { width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;font-family:var(--mono);flex-shrink:0;overflow:hidden;border:2px solid rgba(212,175,55,.3);background:rgba(212,175,55,.07);color:var(--gold); }
.pres-modal-av.pm-active { border-color:rgba(67,177,75,.5);box-shadow:0 0 0 6px rgba(67,177,75,.1); }
.pres-modal-meta { flex:1;min-width:0; }
.pres-modal-name { font-size:19px;font-weight:800;line-height:1.2;margin-bottom:4px; }
.pres-modal-dept { font-size:13px;color:var(--t3);letter-spacing:.3px;margin-bottom:8px; }
.pres-modal-close { width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:16px;flex-shrink:0;transition:background .2s; }
.pres-modal-close:hover { background:rgba(255,255,255,.12); }
.pres-modal-grid { display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border-top:1px solid var(--border); }
.pres-modal-cell { background:var(--panel);padding:14px 20px; }
.pres-modal-cell-lbl { font-size: 13px;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px; }
.pres-modal-cell-val { font-size:14px;font-weight:700;font-family:var(--mono);color:var(--text); }
.pres-modal-cell-val.pm-green { color:var(--green); }
.pres-modal-cell-val.pm-amber { color:var(--amber); }
.pres-modal-cell-val.pm-red   { color:var(--red); }
.pres-modal-footer { padding:14px 24px 20px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
@media(max-width:540px) { .pres-modal-grid{grid-template-columns:1fr;} .pres-modal-av{width:52px;height:52px;font-size:16px;} .pres-modal-name{font-size:16px;} }

/* ── Skeleton shimmer ── */
.skel{background:linear-gradient(90deg,var(--panel) 25%,var(--panel2) 50%,var(--panel) 75%);background-size:400% 100%;animation:shim 1.4s cubic-bezier(.16,1,.3,1) infinite;border-radius:8px;}
@keyframes shim{0%{background-position:100% 0}100%{background-position:-100% 0}}
/* ── Status pip ── */
.pip{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.pip-green{background:var(--green);box-shadow:0 0 6px rgba(76,214,87,.5);animation:blink 2s cubic-bezier(.16,1,.3,1) infinite;}
.pip-gold{background:var(--gold);box-shadow:0 0 6px rgba(212,175,55,.5);animation:blink 2s cubic-bezier(.16,1,.3,1) infinite;}
.pip-red{background:var(--red);box-shadow:0 0 6px rgba(255,72,72,.5);animation:blink 2s cubic-bezier(.16,1,.3,1) infinite;}
.pip-grey{background:rgba(255,255,255,.3);}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
/* ── Card/section entrance animations ── */
@keyframes wgIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes cvIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes scIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
/* ── Comms analytics grid → single column on mobile ── */
@media(max-width:540px){.ops-comms-grid{grid-template-columns:1fr!important;}}
/* ── sec-head layout for comms section header ── */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px;}
.sec-head-left{display:flex;align-items:center;gap:10px;}
.sec-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

/* ── Touch target compliance (min 44px) ── */
.hdr-icon-btn{min-width:44px;min-height:44px;}
.snav-arrow{min-width:44px;min-height:44px;}
@media(max-width:640px){.btn,.btn-green,.btn-gold,.btn-red,.btn-outline{min-height:44px;}.btn-sm{min-height:36px;}}
/* ── Missing 820px breakpoint ── */
@media(max-width:820px){
  #kpi-strip{padding:0 20px 20px;}
  .kpi-pill{min-width:100px;}
  .ops-section{padding:0 20px 32px;}
  #alert-ribbon{padding:12px 20px 0;}
  .page-pill{display:none;}
}
/* ── Missing 640px breakpoint ── */
@media(max-width:640px){
  #hdr-clock{display:none;}
  #ops-header .hdr-back-label{display:none;}
  .modal-box{max-width:calc(100vw - 32px)!important;}
}
/* ── Missing 1100px breakpoint ── */
@media(max-width:1100px){
  .charts-grid{grid-template-columns:repeat(2,1fr);}
}
/* ── Mission Records view toggle ── */
.mr-view-btn{background:transparent;border:none;color:var(--t3);}
.mr-view-btn.mr-active{background:var(--gdim);color:var(--gold);border:1px solid rgba(240,200,50,.3);}

/* ═══════════════════════════════════════════════════
   DDCP — Disciplinary & Conduct Case Processing
   ═══════════════════════════════════════════════════ */
@keyframes ddcpPulse{0%,100%{box-shadow:0 0 0 4px rgba(240,200,50,.12),0 0 12px rgba(240,200,50,.25);}50%{box-shadow:0 0 0 7px rgba(240,200,50,.05),0 0 20px rgba(240,200,50,.4);}}
@keyframes ddcpPulse2{0%,100%{box-shadow:0 0 0 4px rgba(255,112,67,.12),0 0 12px rgba(255,112,67,.25);}50%{box-shadow:0 0 0 7px rgba(255,112,67,.05),0 0 20px rgba(255,112,67,.4);}}
@keyframes ddcpPulse3{0%,100%{box-shadow:0 0 0 4px rgba(255,72,72,.12),0 0 12px rgba(255,72,72,.25);}50%{box-shadow:0 0 0 7px rgba(255,72,72,.05),0 0 20px rgba(255,72,72,.4);}}
@keyframes ddcpPulseGm{0%,100%{box-shadow:0 0 0 4px rgba(160,50,240,.12),0 0 12px rgba(160,50,240,.25);}50%{box-shadow:0 0 0 7px rgba(160,50,240,.05),0 0 20px rgba(160,50,240,.4);}}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.35;}}
.ddcp-kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:20px;}
.ddcp-kpi-card{padding:14px 12px;border-radius:14px;text-align:center;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1);cursor:default;animation:wgIn .45s cubic-bezier(.16,1,.3,1) both;}
.ddcp-kpi-card:hover{transform:translateY(-3px);}
.ddcp-case-row{transition:background .2s,border-color .2s,transform .2s;}
.ddcp-case-row:hover{transform:translateX(3px);}
.ddcp-stage-badge{letter-spacing:0;}
.ddcp-rail{scrollbar-width:thin;-webkit-overflow-scrolling:touch;overflow-x:auto;}
.ddcp-rail::-webkit-scrollbar{height:3px;}
.ddcp-rail::-webkit-scrollbar-thumb{background:rgba(212,175,55,.2);border-radius:2px;}
.ddcp-filter-strip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center;}
.ddcp-chip{padding:6px 14px;border-radius:20px;font-size:13px;font-weight:700;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:rgba(244,249,240,.6);cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1);letter-spacing:.3px;font-family:"DM Sans",sans-serif;}
.ddcp-chip:hover,.ddcp-chip.active{background:rgba(240,200,50,.12);border-color:rgba(240,200,50,.4);color:#f0c832;}
.ddcp-chip.red.active{background:rgba(255,72,72,.12);border-color:rgba(255,72,72,.4);color:#ff4848;}
.ddcp-outcome-opt:hover{border-color:rgba(255,255,255,.25) !important;background:rgba(255,255,255,.06) !important;}
.ddcp-sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px;}
@media(max-width:900px){.ddcp-kpi-row{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.ddcp-kpi-row{grid-template-columns:repeat(2,1fr);}.ddcp-kpi-card{padding:10px 8px;}.ddcp-case-row{flex-wrap:wrap;}.ddcp-chip{padding:5px 10px;font-size: 13px;}}
@media(max-width:400px){.ddcp-kpi-row{grid-template-columns:1fr 1fr;}}


/* ── Clock-in notification toast ── */
@keyframes ciSlideUp { from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes ciSlideDown { from{transform:translateY(0);opacity:1} to{transform:translateY(120%);opacity:0} }
.clockin-notif{display:flex;align-items:center;gap:10px;padding:10px 14px;min-width:260px;max-width:340px;background:rgba(26,40,23,.92);border:1px solid rgba(76,214,87,.35);border-left:3px solid var(--green);border-radius:12px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);pointer-events:auto;box-shadow:0 8px 32px rgba(0,0,0,.5);opacity:0;}
.clockin-notif.active{animation:ciSlideUp .45s cubic-bezier(.16,1,.3,1) both;}
.clockin-notif.exit{animation:ciSlideDown .3s ease-in both;}
.cn-av{width:34px;height:34px;border-radius:50%;background:var(--lift);border:1px solid var(--border);font-size:13px;font-weight:700;color:var(--gold);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.cn-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.cn-body{flex:1;min-width:0;}
.cn-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cn-meta{font-size:13px;color:var(--t3);margin-top:2px;}
.cn-meta span{color:var(--green);font-weight:600;}
.cn-time{font-size:13px;color:var(--t3);font-family:var(--mono);flex-shrink:0;}
.cn-pip{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;animation:blink 1.4s ease-in-out infinite;}

/* ── IT Registration Status Badges ── */
.itr-status-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:13px;font-weight:600;border:1px solid;}
.itr-pending{background:rgba(240,200,50,.08);border-color:rgba(240,200,50,.3);color:var(--gold);}
.itr-exec{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.3);color:#60a5fa;}
.itr-ready{background:rgba(76,214,87,.08);border-color:rgba(76,214,87,.3);color:var(--green);}
.itr-correction{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.3);color:#f59e0b;}
.itr-done{background:rgba(76,214,87,.12);border-color:rgba(76,214,87,.4);color:var(--green);}
.itr-cancelled{background:rgba(255,72,72,.08);border-color:rgba(255,72,72,.3);color:var(--red);}

/* ── Progress Board ── */
.pb-column{min-width:240px;flex:1 1 240px;max-width:300px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;}
.pb-col-hdr{padding:12px 14px;font-size:13px;font-weight:700;color:var(--t2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;min-width:0;flex-shrink:0;border-radius:14px 14px 0 0;}
.pb-col-hdr span:first-of-type{flex:1;min-width:0;}
.pb-col-count{margin-left:auto;background:rgba(255,255,255,.1);border-radius:10px;padding:2px 7px;font-family:var(--mono);font-size:13px;flex-shrink:0;}
.pb-cards-wrap{padding:10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;}
.pb-card{padding:12px 14px!important;cursor:default;}
.pb-card-name{font-size:13px;font-weight:700;color:var(--text);line-height:1.35;word-break:break-word;}
.pb-card-pos{font-size:13px;color:var(--t2);margin-top:4px;line-height:1.4;word-break:break-word;}
.pb-card-dept{font-size:13px;color:var(--t3);margin-top:3px;}
.pb-card-stage{font-size:13px;color:var(--t2);margin-top:7px;display:flex;align-items:center;padding-top:7px;border-top:1px solid var(--border);}
.pb-card-date{font-size:13px;color:var(--t3);margin-top:4px;font-family:var(--mono);}
.pb-card-sla{font-size:13px;color:var(--gold);margin-top:4px;font-family:var(--mono);}
.pb-empty{color:var(--t3);font-size:13px;padding:18px 4px;text-align:center;}

/* ── Ops Tab Bar ── */
.ops-tab-bar{display:flex;gap:6px;flex-wrap:wrap;}
.ops-tab{padding:7px 14px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--t2);font-size:13px;font-weight:600;cursor:pointer;transition:all .25s ease;}
.ops-tab.active{background:rgba(240,200,50,.12);border-color:rgba(240,200,50,.4);color:var(--gold);}
.ops-tab:hover:not(.active){background:rgba(255,255,255,.06);}

/* ── Side Drawer (Probation Review) ── */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:3000;opacity:0;pointer-events:none;transition:opacity .3s;}
.drawer-overlay.open{opacity:1;pointer-events:auto;}
.side-drawer{position:fixed;top:0;right:-440px;width:440px;max-width:calc(100vw - 24px);height:100%;background:var(--deep);border-left:1px solid var(--border);z-index:3001;display:flex;flex-direction:column;transition:right .35s cubic-bezier(.16,1,.3,1);box-shadow:-8px 0 40px rgba(0,0,0,.5);}
.side-drawer.open{right:0;}
.drw-hdr{display:flex;align-items:flex-start;justify-content:space-between;padding:20px;border-bottom:1px solid var(--border);}
.drw-close{background:transparent;border:none;color:var(--t2);font-size:18px;cursor:pointer;padding:4px;}
@media(max-width:540px){.side-drawer{width:100%;max-width:100%;}.pb-column{min-width:180px;max-width:100%;}}

/* ── SLA Push Modal ── */
#ops-sla-modal{display:none;}
#ops-sla-modal.open{display:flex;}

.ddcp-row-hoverable:hover{background:rgba(255,255,255,.14)!important;}


/* ── Premium pass (2026-06-08) — appended last; CSS-only, no logic touched ── */
.glass,.chart-card,.appr-card,.sick-card,.prob-card,.recruit-card,.gav-card{
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 42%,var(--panel)),linear-gradient(320deg,var(--gdim),transparent 60%) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  box-shadow:0 12px 34px -14px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08) !important;}
.glass:hover,.chart-card:hover,.appr-card:hover,.prob-card:hover{transform:translateY(-3px);border-color:var(--gglow) !important;box-shadow:0 18px 44px -12px rgba(0,0,0,.5) !important;}
.wf-table thead th,.grant-tbl thead th{color:var(--gold) !important;}
.wf-table tbody tr:hover,.grant-tbl tbody tr:hover{background:rgba(212,175,55,.06) !important;}

/* ── Policy Doc Review status mirror (read-only) ───────────────────────── */
.prs-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,200px));gap:12px;margin-bottom:16px;}
.prs-kpi{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 16px;animation:scIn .5s cubic-bezier(.16,1,.3,1) both;}
.prs-kpi:nth-child(2){animation-delay:.07s;}
.prs-kpi-val{font-family:var(--disp,'Cinzel');font-size:26px;font-weight:900;color:var(--gold);line-height:1;}
.prs-kpi-lbl{font-size:13px;color:var(--t3);margin-top:6px;font-weight:600;}
@keyframes scIn{from{opacity:0;transform:translateY(10px) scale(.97);}to{opacity:1;transform:none;}}
.prs-card{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:14px;padding:14px 16px;margin-bottom:12px;animation:cvIn .45s cubic-bezier(.16,1,.3,1) both;}
.prs-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.prs-policy{font-size:13.5px;font-weight:700;color:var(--text);}
.prs-meta{font-size:13px;color:var(--t3);margin-top:3px;}
.prs-pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;border-radius:999px;padding:4px 11px;white-space:nowrap;}
.prs-chips{margin-top:10px;}
.prs-chip{display:inline-block;font-size:13px;font-weight:600;background:rgba(240,200,50,.14);border:1px solid var(--border);border-radius:999px;padding:3px 10px;margin:0 6px 6px 0;color:var(--t2);}
.prs-audit-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:12px;background:var(--panel);}
.prs-audit-table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px;}
.prs-audit-table th{text-align:left;padding:10px 13px;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--t3);border-bottom:1px solid var(--border);background:rgba(255,255,255,.03);white-space:nowrap;}
.prs-audit-table td{padding:10px 13px;border-bottom:1px solid rgba(255,255,255,.07);color:var(--t2);}
.prs-audit-table tr:last-child td{border-bottom:none;}
.prs-audit-empty{text-align:center;color:var(--t3);padding:18px;}
.prs-when{font-family:var(--mono,monospace);font-size:13px;color:var(--t3);white-space:nowrap;}
@media(max-width:560px){.prs-kpis{grid-template-columns:repeat(2,1fr);}}

/* ── Internal admissions rows (2026-07-29) ───────────────────────────
   The Head of Operations' own gate, added when the VP found that this dashboard
   had no route to it at all. Uses the page's own tokens rather than the
   #0c1109 literals the recruitment console uses, because this block belongs to
   this page and inherits its material. */
.intadm-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  transition: border-color .25s cubic-bezier(.16, 1, .3, 1), transform .25s cubic-bezier(.16, 1, .3, 1);
}
.intadm-row:last-child { margin-bottom: 0; }
.intadm-row:hover { border-color: var(--bord2); transform: translateY(-1px); }
/* Past the two working day standard. Amber, not red: it is late, not broken. */
.intadm-row.is-late {
  border-color: rgba(245, 158, 11, .45);
  background: var(--adim);
}
.intadm-row > .u-flex-min { flex: 1 1 auto; min-width: 0; }
.intadm-nm { font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.intadm-mt { margin-top: 3px; font-size: 13px; color: var(--t3); overflow-wrap: anywhere; }
.intadm-age { margin-top: 3px; font-size: 13px; color: var(--t3); }
.intadm-row.is-late .intadm-age { color: var(--amber); font-weight: 600; }
.intadm-row > .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .intadm-row { flex-direction: column; align-items: stretch; }
  .intadm-row > .btn { width: 100%; justify-content: center; }
}

/* ── Department Boards (VP 2026-07-29) ─────────────────────────────────
   The Head of Operations reads all four department boards. These are `.glass`
   cards that happen to be links, so they only need the affordance: a cursor, a
   lift on hover, and no underline on the heading inside. */
.s-boardcard{display:block;text-decoration:none;color:inherit;cursor:pointer;
  transition:transform .18s cubic-bezier(.16,1,.3,1),border-color .18s ease,box-shadow .18s ease;}
.s-boardcard:hover{transform:translateY(-2px);border-color:rgba(96,165,250,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 12px 36px rgba(0,0,0,.38);}
.s-boardcard:focus-visible{outline:2px solid var(--blue,#60a5fa);outline-offset:2px;}
.s-boardcard .sec-lbl{margin-bottom:6px;}
@media (prefers-reduced-motion:reduce){
  .s-boardcard{transition:none;}
  .s-boardcard:hover{transform:none;}
}

/* ════════════════════════════════════════════════════════════════════
   HEAD OF OPERATIONS REDESIGN  (2026-08-03)
   Ported from the Claude Design board "Head of Operations Board.dc.html".

   THE STRUCTURAL CHANGE the brief asked for: 33 sections sat in one long
   scroll behind a horizontal chip strip. They are now reached from a
   persistent grouped sidebar, 8 groups, collapsible, with the live
   badges kept where they were.

   THE CONTRACT IS UNTOUCHED. window.snavGo() queries
   `#sec-nav .snav-item[data-target="…"]`, so every item keeps its class,
   its data-target, its data-action and its badge id. Only the container
   around them changed. Not one section div moved.
   ════════════════════════════════════════════════════════════════════ */

body.ops-board .sec-nav-wrap{
  position:sticky;top:74px;align-self:start;
  max-height:calc(100vh - 90px);overflow-y:auto;overflow-x:hidden;
  border:1px solid var(--border);border-radius:16px;
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:6px;
}
/* the horizontal scroll arrows belong to the old strip */
body.ops-board #snav-arrow-left,
body.ops-board #snav-arrow-right{display:none !important;}

body.ops-board #sec-nav{
  display:flex;flex-direction:column;gap:2px;
  overflow:visible;white-space:normal;padding:0;
}
.snav-brand{display:flex;align-items:center;gap:11px;padding:12px 10px 14px;border-bottom:1px solid var(--border);margin-bottom:6px;}
.snav-brand-icon{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(240,200,50,0.34);background:rgba(212,175,55,0.12);color:var(--gold);font-size:14px;
}
.snav-brand-title{font-family:var(--display),'Cinzel',serif;font-size:17px;font-weight:700;color:var(--text);line-height:1.2;}
.snav-brand-sub{font-family:var(--mono),monospace;font-size:13px;color:var(--t3);margin-top:2px;}

.snav-group{margin-bottom:2px;}
.snav-group-head{
  display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:9px 10px;
  background:transparent;border:none;border-radius:9px;cursor:pointer;text-align:left;
  font-family:var(--mono),monospace;font-size:13px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--t3);transition:background .25s cubic-bezier(.16,1,.3,1),color .25s cubic-bezier(.16,1,.3,1);
}
.snav-group-head:hover{background:rgba(255,255,255,0.05);color:var(--text);}
.snav-group-head > span{flex:1;min-width:0;}
.snav-group-head > i:first-child{color:var(--gold);font-size:13px;width:16px;text-align:center;flex-shrink:0;}
.snav-group-count{
  font-style:normal;font-size:13px;padding:2px 8px;border-radius:10px;
  background:rgba(255,255,255,0.06);color:var(--t3);flex-shrink:0;
}
.snav-group-chev{transition:transform .3s cubic-bezier(.16,1,.3,1);font-size:13px;flex-shrink:0;}
.snav-group.collapsed .snav-group-chev{transform:rotate(-90deg);}
.snav-group-body{display:flex;flex-direction:column;gap:1px;padding-left:6px;}
.snav-group.collapsed .snav-group-body{display:none;}

body.ops-board #sec-nav .snav-item{
  position:relative;display:flex;align-items:center;gap:9px;
  min-height:44px;padding:9px 12px;border-radius:9px;
  border:1px solid transparent;background:transparent;color:var(--t2);
  font-size:13px;font-weight:500;white-space:normal;line-height:1.35;
  cursor:pointer;flex:none;
  transition:background .25s cubic-bezier(.16,1,.3,1),color .25s cubic-bezier(.16,1,.3,1);
}
body.ops-board #sec-nav .snav-item i{width:16px;text-align:center;font-size:13px;color:var(--t3);flex-shrink:0;}
body.ops-board #sec-nav .snav-item:hover{background:rgba(255,255,255,0.06);color:var(--text);}
body.ops-board #sec-nav .snav-item.active{
  background:rgba(212,175,55,0.12);border-color:rgba(240,200,50,0.34);color:var(--gold);font-weight:600;
}
body.ops-board #sec-nav .snav-item.active i{color:var(--gold);}
body.ops-board #sec-nav .snav-item.active::before{
  content:'';position:absolute;left:-6px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--gold);
}
body.ops-board #sec-nav .snav-badge{
  margin-left:auto;font-family:var(--mono),monospace;font-size:13px;font-weight:600;
  padding:2px 8px;border-radius:10px;flex-shrink:0;
}

/* ── the shell: sidebar beside the sections ── */
@media(min-width:1101px){
  /* `.show` IS LOAD-BEARING AND MUST NOT BE DROPPED. #ops-main-wrap is
     display:none until the PIN gate and auth both pass, and JS adds .show
     to reveal it. Writing `body.ops-board #ops-main-wrap{display:grid}`
     here computes to (1,1,1), which OUTRANKS both `#ops-main-wrap`
     (1,0,0) and `#ops-main-wrap.show` (1,1,0), so the whole board painted
     before the gate had run. Caught by measuring rather than reading:
     the element reported display:none at 820px and display:grid at
     1440px, which is the wrong way round for an auth gate. */
  body.ops-board #ops-main-wrap.show{
    display:grid;grid-template-columns:266px minmax(0,1fr);gap:18px;align-items:start;
  }
  body.ops-board #ops-main-wrap.show > .sec-nav-wrap{grid-column:1;grid-row:1 / span 999;}
  body.ops-board #ops-main-wrap.show > *:not(.sec-nav-wrap){grid-column:2;}
}
/* below that the sidebar returns to a normal block above the sections,
   which is the only honest thing to do with 33 entries on a phone */
@media(max-width:1100px){
  body.ops-board .sec-nav-wrap{position:static;max-height:none;margin-bottom:14px;}
  body.ops-board #sec-nav .snav-item.active::before{display:none;}
}

/* The per-board button floor that used to sit here has been REMOVED,
   for the same reason as the rota board: css/responsive.css now applies
   the 13px floor and the 44px touch target for all 71 pages. */


/* ── Probation cards: auto-fit, and cap the card ──────────────────────
   .prob-cards-grid used repeat(auto-fill, ...), which keeps empty tracks:
   with one probation review open, that card sat stranded at 300px against
   a full-width row. Third instance of the same defect found in this sweep,
   after the EOM grids and .network-grid on the rota. LESSONS.md. */
.prob-card{ width:100%; max-width:520px; margin-inline:auto; }

/* ── COLLAPSE THE SIDEBAR (VP 2026-08-03) ─────────────────────────────
   "make the ops head side bar collapsible to the right so that every data
   and section becomes full screen".

   Collapsed, the rail folds to the left and the section grid takes the
   whole width. The control itself stays visible, pinned to the left edge,
   so it can always be brought back: a collapse with no way out is a trap.
   Only applies where the sidebar exists as a rail, which is >=1101px. */
.snav-collapse{
  position:fixed;left:10px;top:calc(var(--hdh) + 12px);z-index:495;
  width:34px;height:34px;min-height:34px;border-radius:9px;
  border:1px solid var(--border);background:rgba(23,34,19,.94);color:var(--t2);
  cursor:pointer;font-size:13px;display:none;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .25s cubic-bezier(.16,1,.3,1),color .25s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1);
}
.snav-collapse:hover{background:rgba(212,175,55,.16);border-color:rgba(240,200,50,.34);color:var(--gold);}
body.ops-board.snav-collapsed .snav-collapse i{transform:rotate(180deg);}

@media(min-width:1101px){
  body.ops-board .snav-collapse{display:flex;}
  /* the rail folds away and the sections take the full width */
  body.ops-board.snav-collapsed #ops-main-wrap.show{grid-template-columns:0 minmax(0,1fr);gap:0;}
  body.ops-board.snav-collapsed .sec-nav-wrap{
    opacity:0;pointer-events:none;transform:translateX(-16px);
    width:0;padding:0;border-width:0;overflow:hidden;
  }
  body.ops-board .sec-nav-wrap{
    transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1);
  }
  /* the control sits clear of the folded rail either way */
  body.ops-board.snav-collapsed .snav-collapse{left:10px;}
  body.ops-board:not(.snav-collapsed) .snav-collapse{left:calc(266px - 27px);}
}

/* ════════════════════════════════════════════════════════════════════
   COMMAND OVERVIEW  (2026-08-03)
   The "what needs you today" screen from the Claude Design board.
   ════════════════════════════════════════════════════════════════════ */
.cmd-hero{
  border:1px solid rgba(240,200,50,.34);border-radius:16px;padding:20px 22px;margin-bottom:16px;
  background:linear-gradient(135deg,rgba(212,175,55,.12),rgba(255,255,255,.03));
}
.cmd-hero-eyebrow{font-family:var(--mono),monospace;font-size:13px;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold);}
.cmd-hero-title{font-family:var(--display),'Cinzel',serif;font-size:24px;font-weight:700;color:var(--text);margin:8px 0 9px;line-height:1.15;}
.cmd-hero-blurb{font-size:13px;line-height:1.65;color:var(--t2);margin:0;max-width:74ch;}

/* auto-fit, never auto-fill (LESSONS.md), and the card is capped so one
   tile cannot stretch across the whole row. */
.cmd-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:16px;}
.cmd-kpi{
  width:100%;max-width:460px;margin-inline:auto;
  border:1px solid var(--border);border-radius:14px;padding:15px 17px;
  background:rgba(255,255,255,.05);display:flex;flex-direction:column;
}
.cmd-kpi-lbl{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:var(--mono),monospace;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--t3);
}
.cmd-kpi-val{font-family:var(--display),'Cinzel',serif;font-size:30px;font-weight:700;line-height:1.05;margin:9px 0 7px;color:var(--text);}
.cmd-kpi-sub{font-size:13px;line-height:1.55;color:var(--t3);}
.cmd-kpi-gold{border-color:rgba(240,200,50,.34);background:linear-gradient(160deg,rgba(212,175,55,.12),rgba(255,255,255,.05));}
.cmd-kpi-gold .cmd-kpi-val,.cmd-kpi-gold .cmd-kpi-lbl i{color:var(--gold);}
.cmd-kpi-red{border-color:rgba(255,72,72,.45);background:linear-gradient(160deg,rgba(232,64,64,.12),rgba(255,255,255,.05));}
.cmd-kpi-red .cmd-kpi-val,.cmd-kpi-red .cmd-kpi-lbl i{color:#ff8f8f;}
.cmd-kpi-green{border-color:rgba(76,214,87,.40);background:linear-gradient(160deg,rgba(67,177,75,.12),rgba(255,255,255,.05));}
.cmd-kpi-green .cmd-kpi-val,.cmd-kpi-green .cmd-kpi-lbl i{color:#8ce694;}

/* min(340px,100%) not 340px: a minmax minimum larger than the narrowest
   viewport forces the grid wider than the screen and the page scrolls
   sideways. Caught at 320px. */
.cmd-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:16px;}
.cmd-panel{border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.05);overflow:hidden;}
.cmd-panel-gold{border-color:rgba(240,200,50,.34);}
.cmd-panel-red{border-color:rgba(255,72,72,.45);}
.cmd-panel-head{
  display:flex;align-items:center;gap:10px;padding:14px 17px;border-bottom:1px solid var(--border);
  font-family:var(--display),'Cinzel',serif;font-size:16px;font-weight:700;color:var(--text);
}
.cmd-panel-gold .cmd-panel-head i{color:var(--gold);}
.cmd-panel-red .cmd-panel-head i{color:#ff8f8f;}
.cmd-panel-count{
  margin-left:auto;font-family:var(--mono),monospace;font-size:13px;font-weight:600;
  padding:3px 10px;border-radius:11px;background:rgba(255,255,255,.08);color:var(--t2);
}
.cmd-row{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px 17px;border:none;border-bottom:1px solid rgba(255,255,255,.07);
  background:transparent;color:var(--t2);font-family:inherit;font-size:13px;cursor:pointer;min-height:44px;
  transition:background .2s cubic-bezier(.16,1,.3,1);
}
.cmd-row:last-child{border-bottom:none;}
.cmd-row:hover{background:rgba(255,255,255,.05);}
.cmd-row-ico{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:rgba(255,255,255,.06);font-size:13px;color:var(--t3);
}
.cmd-row-body{flex:1;min-width:0;display:flex;flex-direction:column;}
/* THE TITLE AND THE SUBTITLE RAN TOGETHER (VP 2026-09-19)
   Both are <span>, so they are inline by default, and this rule set flex:1
   without ever setting display:flex. Every row in "Decisions only you can
   make" and "Out of the ordinary today" therefore read
   "Probationary reviewsKwa and Neema, terms end tomorrow" as one run of text.
   The margin-top:2px already on .cmd-row-sub is the giveaway that they were
   always meant to stack: margin-top does nothing to an inline box.
   Found by rendering the section rather than by reading the markup. */
.cmd-row-title{font-size:13px;font-weight:600;color:var(--text);line-height:1.35;}
.cmd-row-sub{font-family:var(--mono),monospace;font-size:13px;color:var(--t3);margin-top:2px;}
.cmd-row-n{
  font-family:var(--mono),monospace;font-size:13px;font-weight:700;flex-shrink:0;
  padding:4px 11px;border-radius:11px;border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--t2);
}
.cmd-row-n.gold{border-color:rgba(240,200,50,.34);background:rgba(212,175,55,.14);color:var(--gold);}
.cmd-row-n.red{border-color:rgba(255,72,72,.45);background:rgba(232,64,64,.14);color:#ff8f8f;}
.cmd-empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:28px 20px;color:var(--t3);font-size:13px;
}
.cmd-empty i{font-size:22px;color:var(--gold);opacity:.5;}
.cmd-empty p{margin:0;max-width:42ch;line-height:1.6;}
@media(max-width:640px){
  .cmd-hero-title{font-size:20px;}
  .cmd-kpi-val{font-size:26px;}
}

/* ════════════════════════════════════════════════════════════════
   FULL SCREEN (VP 2026-09-19)
   Collapse folds the rail; this reclaims the header too, so a dense rota or
   attendance table starts at the top of the glass.

   THE BUTTON DELIBERATELY CARRIES NO SIZE OR COLOUR OF ITS OWN. It inherits
   .hdr-icon-btn so it is identical to the controls either side of it. An
   earlier pass gave it 36px and a 9px radius, which would have left one
   button in the row subtly out of step with its neighbours.

   NOTE, NOT FIXED HERE: every .hdr-icon-btn is 34px, under the 44px touch
   minimum. That is pre-existing and organisation-wide, and header-command.css
   loads last on every page, so raising it belongs in one deliberate change
   across the portal rather than smuggled into an Operations restyle.
   ════════════════════════════════════════════════════════════════ */
#ops-fs-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
body.ops-board.ops-fullscreen #hdr{display:none;}
/* Without this the board keeps the space the header used to occupy. */
body.ops-board.ops-fullscreen #ops-main-wrap{padding-top:10px;}

/* ════════════════════════════════════════════════════════════════
   THE FRONT DOOR, RESTYLED (VP 2026-09-19)

   The prose hero and four large cards holding one figure each are replaced by
   a live watch board and a readout strip. Same numbers, no new query, roughly
   a quarter of the vertical space, and one thing on the screen she could not
   see before: who is actually on duty.

   PARADIGMS, per layer and deliberately. Bento sized by urgency rather than
   symmetry; density-first for the readouts; Material elevation earned only by
   the panel that is holding something. Rejected: Neumorphism, which needs an
   opaque ground and every panel here is translucent over a gradient.

   --steel is the approved fourth state: "in flight, not yours". Gold stays
   "needs you". Without it, work moving under somebody else is indistinguishable
   from nothing happening at all.
   THE 13px FLOOR IS REAL AND IT IS TESTED. This block first shipped with
   10px, 11px and 11.5px on the mono labels, which reads as instrumentation and
   is exactly the habit tests/ops-redesign.test.mjs exists to stop. Everything
   here is 13px or above; density comes from spacing and from the track width,
   never from shrinking the type.
   ════════════════════════════════════════════════════════════════ */
:root{ --steel:#6f9fae; }

/* ── watch board ── */
.cmd-watch{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:linear-gradient(165deg,rgba(23,34,19,.82),rgba(17,26,14,.88));
  border:1px solid var(--border);border-radius:16px;padding:16px 20px;margin-bottom:14px;}
.cmd-watch-now{display:flex;align-items:baseline;gap:9px;}
.cmd-watch-time{font-family:var(--mono);font-size:30px;font-weight:600;letter-spacing:-.5px;
  line-height:1;color:var(--text);}
.cmd-watch-meta{display:flex;flex-direction:column;gap:1px;}
.cmd-watch-zone{font-family:var(--mono);font-size:13px;color:var(--t3);line-height:1.2;}
.cmd-watch-date{font-family:var(--mono);font-size:13px;color:var(--t2);line-height:1.2;white-space:nowrap;}
.cmd-watch-sep{width:1px;align-self:stretch;min-height:40px;background:var(--border);}
.cmd-watch-duty{display:flex;align-items:center;gap:13px;flex-wrap:wrap;min-width:0;}
.cmd-watch-pips{display:flex;gap:5px;align-items:center;}
.cmd-pip{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.1);
  border:1px solid var(--border);opacity:0;transform:scale(.4);
  animation:cmdPipIn .45s cubic-bezier(.16,1,.3,1) forwards;}
.cmd-pip.on{background:var(--green);border-color:transparent;box-shadow:0 0 0 3px rgba(76,214,87,.15);}
.cmd-pip-more{font-family:var(--mono);font-size:13px;color:var(--t3);margin-left:5px;}
@keyframes cmdPipIn{to{opacity:1;transform:none;}}
.cmd-watch-txt{font-size:13px;color:var(--t2);line-height:1.5;}
.cmd-watch-txt b{color:var(--text);font-weight:600;}
.cmd-watch-short{color:var(--red);font-weight:600;}

/* ── readouts ── */
.cmd-inst{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;margin-bottom:14px;}
.cmd-i{background:var(--deep);padding:13px 15px;min-width:0;}
.cmd-i-l{font-size:13px;color:var(--t3);margin-bottom:6px;line-height:1.3;}
.cmd-i-v{font-family:var(--mono);font-size:21px;font-weight:600;letter-spacing:-.4px;line-height:1;}
.cmd-i-v.gold{color:var(--gold);} .cmd-i-v.red{color:var(--red);}
.cmd-i-v.green{color:var(--green);} .cmd-i-v.steel{color:var(--steel);}
.cmd-i-n{font-size:13px;color:var(--t3);margin-top:6px;line-height:1.4;}

/* ── skeletons: a dash cannot be told apart from a real zero ── */
.sk{display:inline-block;border-radius:5px;
  background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.1) 37%,rgba(255,255,255,.05) 63%);
  background-size:400% 100%;animation:cmdShim 1.5s ease infinite;}
.sk-time{width:104px;height:30px;} .sk-num{width:38px;height:21px;} .sk-line{width:230px;height:13px;}
@keyframes cmdShim{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

@media (prefers-reduced-motion:reduce){
  .cmd-pip{opacity:1;transform:none;animation:none;}
  .sk{animation:none;}
}
@media(max-width:640px){
  .cmd-watch-sep{display:none;}
  .cmd-watch{gap:14px;padding:14px;}
  .cmd-watch-time{font-size:26px;}
  .cmd-inst{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cmd-i{padding:12px 12px;} .cmd-i-v{font-size:19px;}
  /* An odd count leaves an orphan cell, and a half-empty row reads as
     something failing to load. */
  .cmd-i:last-child:nth-child(odd){grid-column:1 / -1;}
}

/* ════════════════════════════════════════════════════════════════
   SKELETONS EVERYWHERE (VP 2026-09-19)
   "All builds must have skeleton (loading skeleton) boards."

   43 readouts opened with a dash and 10 tables with the word "Loading…".
   A dash cannot be told apart from a real zero, and a line of text where a
   table will be gives no sense of what is coming.

   NO JAVASCRIPT CHANGED. Every one of these sits inside an element the
   renderers write with textContent or innerHTML, so the skeleton is replaced
   by the real value the moment it arrives. That is the whole reason this was
   safe to do across the entire board in one pass.
   ════════════════════════════════════════════════════════════════ */
.sk-kpi{display:inline-block;width:42px;height:26px;border-radius:6px;
  background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.1) 37%,rgba(255,255,255,.05) 63%);
  background-size:400% 100%;animation:cmdShim 1.5s ease infinite;vertical-align:middle;}
.wf-skel-host{padding:0!important;}
.wf-skel{width:100%;border-collapse:collapse;}
.wf-skel td{padding:13px 16px;border-bottom:1px solid var(--border);}
.wf-skel tr:last-child td{border-bottom:none;}
.sk-cell{display:block;height:13px;border-radius:5px;
  background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.1) 37%,rgba(255,255,255,.05) 63%);
  background-size:400% 100%;animation:cmdShim 1.5s ease infinite;}
/* Staggered, so it reads as loading rather than as a flashing block. */
.wf-skel tr:nth-child(2) .sk-cell{animation-delay:.12s;}
.wf-skel tr:nth-child(3) .sk-cell{animation-delay:.24s;}
@media (prefers-reduced-motion:reduce){ .sk-kpi,.sk-cell{animation:none;} }
/* Card skeleton for the probation grid, which is glass cards and not a table.
   Shaped like the card it stands in: a name, a sub-line, a spacer, a chip. */
.sk-card{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:16px;
  padding:18px 20px;display:flex;flex-direction:column;gap:9px;}
.sk-card .sk-chip{display:block;width:96px;height:30px;border-radius:9px;margin-top:14px;
  background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.1) 37%,rgba(255,255,255,.05) 63%);
  background-size:400% 100%;animation:cmdShim 1.5s ease infinite;}
@media (prefers-reduced-motion:reduce){ .sk-card .sk-chip{animation:none;} }

/* Block skeleton for chart and list panels, where a table skeleton would lie
   about the shape of what is coming. Bars of unequal width, because a real
   list is never three identical rows. */
.sk-block{display:flex;flex-direction:column;gap:10px;padding:4px 0;}
.sk-bar{display:block;height:13px;border-radius:5px;
  background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.1) 37%,rgba(255,255,255,.05) 63%);
  background-size:400% 100%;animation:cmdShim 1.5s ease infinite;}
.sk-block .sk-bar:nth-child(1){width:84%;}
.sk-block .sk-bar:nth-child(2){width:62%;animation-delay:.12s;}
.sk-block .sk-bar:nth-child(3){width:73%;animation-delay:.24s;}
@media (prefers-reduced-motion:reduce){ .sk-bar{animation:none;} }