/* ================================================================
   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,.06);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px 20px;display:flex;flex-direction:column;gap:4px;flex:1;min-width:130px;max-width:220px;position:relative;overflow:hidden;transition:border-color .3s,transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;animation:glassIn .65s cubic-bezier(.16,1,.3,1) both;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 32px rgba(0,0,0,.3);}
@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:700;letter-spacing:.8px;text-transform:uppercase;color:var(--t3);}
.kpi-val{font-family:var(--mono);font-size:30px;font-weight:700;line-height:1;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);}}
@media(max-width:700px){.charts-grid{grid-template-columns:1fr;}}
.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;}
.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;}
}