/* ================================================================
   DTTASA HR OPERATIONS MONITOR — 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);
  --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;
  --indigo:#818cf8; --idim:rgba(129,140,248,.12); --iglow:rgba(129,140,248,.3);
  --cyan:#2dd4bf;   --cdim:rgba(45,212,191,.10);
  --orange:#fb923c; --odim:rgba(251,146,60,.10);
  --slate:#94a3b8;  --sdim:rgba(148,163,184,.10);
  --purple:#a78bfa; --pdim:rgba(167,139,250,.10);
}
*,*::before,*::after{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,0.04) 0%,transparent 52%),
             radial-gradient(ellipse at 88% 100%,rgba(212,175,55,0.04) 0%,transparent 52%),
             repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.025) 2px,rgba(0,0,0,0.025) 4px);}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(212,175,55,0.25);border-radius:3px;}

/* ── BUTTONS ── */
.btn{border:none;padding:13px 26px;border-radius:50px;font-weight:800;font-size:11px;letter-spacing:1px;cursor:pointer;text-transform:uppercase;transition:all .35s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:7px;}
.btn::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.12);transform:translate(-50%,-50%);transition:width .4s,height .4s;}
.btn:active::after{width:220px;height:220px;}
.btn-green{background:var(--green);color:#fff;box-shadow:0 6px 18px rgba(67,177,75,.28);}
.btn-green:hover{transform:scale(1.04) translateY(-2px);box-shadow:0 12px 26px rgba(67,177,75,.44);}
.btn-gold{background:var(--gold);color:var(--deep);box-shadow:0 6px 18px rgba(212,175,55,.24);}
.btn-gold:hover{background:var(--gold2);transform:scale(1.04) translateY(-2px);box-shadow:0 12px 26px rgba(212,175,55,.4);}
.btn-red{background:var(--red);color:#fff;}
.btn-red:hover{transform:scale(1.04) translateY(-2px);box-shadow:0 12px 26px rgba(232,64,64,.4);}
.btn-outline{background:transparent;border:1px solid var(--bord2);color:var(--t2);padding:9px 16px;font-size:11px;border-radius:9px;}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);}
.btn-sm{padding:8px 15px;font-size:11px;border-radius:8px;}
.btn-xs{padding:5px 11px;font-size:11px;border-radius:6px;letter-spacing:1px;}
.btn-proc{opacity:.7;cursor:not-allowed!important;pointer-events:none;}
/* Async-action states for buttons in the recruitment pipeline drawer
   (Send to Referee, Resend) — the .is-sending class disables hover lift
   and the fa-spin icon does the rotation. .is-sent flashes a green
   confirmation for 700ms before the row re-renders. */
.btn.is-sending{opacity:.85;cursor:wait!important;pointer-events:none;transform:none!important;}
.btn.is-sending:hover{transform:none!important;}
.btn.is-sent{background:var(--green)!important;color:#fff!important;cursor:default;pointer-events:none;animation:btnSentIn .35s cubic-bezier(.16,1,.3,1);}
@keyframes btnSentIn{from{transform:scale(.92);}50%{transform:scale(1.06);}to{transform:scale(1);}}
.spin-ico{display:inline-block;width:11px;height:11px;border:2px solid rgba(255,255,255,.2);border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(1.4);}}

/* ── TOAST ── */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:rgba(5,9,5,.98);border:1px solid var(--gold);border-left:4px solid var(--gold);padding:13px 20px;border-radius:8px;display:flex;align-items:center;gap:11px;font-size:13px;font-weight:600;z-index:9999999;min-width:280px;max-width:460px;box-shadow:0 12px 40px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .45s;opacity:0;}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
#toast.error{border-color:var(--red);border-left-color:var(--red);}
#toast i{flex-shrink:0;}
#toast:not(.error) i{color:var(--gold);}
#toast.error i{color:var(--red);}

/* ── MODAL OVERLAY ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:800000;display:none;align-items:center;justify-content:center;padding:20px;-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
.modal-overlay.open,.modal-overlay.active{display:flex;}
/* Lock body scroll while ANY modal-overlay is open. Class is toggled by the
   modal-observer in js/hr-ops-monitor.js so we don't need to call into each
   open/close site individually. */
body.modal-locked{overflow:hidden !important;height:100vh !important;touch-action:none;}

/* Searchable timezone combobox — replaces the old grouped <select> on the
   interview availability modal. WAT is pinned first; everything else is
   filterable by typing in the search box. */
.tz-combo{position:relative;}
.tz-combo-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:9px 12px;font-size:12px;cursor:pointer;width:100%;transition:border-color .2s;}
.tz-combo-btn:hover{border-color:rgba(240,200,50,.4);}
.tz-combo-btn .tz-combo-chevron{color:var(--t3);font-size:10px;}
.tz-combo-pop{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#0d150c;border:1px solid rgba(240,200,50,.32);border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.55);z-index:1100;max-height:280px;display:none;flex-direction:column;overflow:hidden;}
.tz-combo.open .tz-combo-pop{display:flex;}
.tz-combo-search{background:rgba(0,0,0,.45);border:none;border-bottom:1px solid var(--border);color:var(--text);font-size:12px;padding:10px 12px;outline:none;}
.tz-combo-search::placeholder{color:var(--t3);}
.tz-combo-list{overflow-y:auto;padding:4px 0;}
.tz-combo-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;font-size:12px;cursor:pointer;color:var(--t2);transition:background .15s, color .15s;}
.tz-combo-opt:hover,.tz-combo-opt.active{background:rgba(240,200,50,.12);color:var(--gold);}
.tz-combo-opt.pinned{border-bottom:1px solid var(--border);background:rgba(240,200,50,.06);}
.tz-combo-opt .tz-utc{font-size:10px;color:var(--t3);letter-spacing:.6px;font-variant-numeric:tabular-nums;}
.tz-combo-empty{padding:14px 12px;font-size:12px;color:var(--t3);font-style:italic;text-align:center;}
.modal-box{background:#0d150c;border:1px solid var(--border);border-radius:22px;padding:36px;width:100%;max-width:480px;position:relative;animation:mIn .4s cubic-bezier(.16,1,.3,1) both;box-shadow:0 32px 80px rgba(0,0,0,.7);}
/* Digital ID Review modal — was overflowing top & bottom and cutting off content.
   Cap to the viewport and scroll inside; widen a little for the ID rows. */
#did-view-modal .modal-box{max-width:560px;max-height:92vh;overflow-y:auto;}
#did-image-viewer{z-index:900001;}
#did-image-viewer-body img{max-width:100%;max-height:74vh;border-radius:10px;display:block;margin:0 auto;background:#fff;cursor:zoom-in;}
#did-image-viewer-body img.zoomed{max-width:none;max-height:none;width:auto;cursor:zoom-out;border-radius:0;}
#did-image-viewer-body iframe{width:100%;height:74vh;border:0;border-radius:10px;background:#fff;}
.did-doc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;margin-top:10px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.04);}
.did-doc-row .did-doc-thumb{width:46px;height:46px;border-radius:8px;object-fit:cover;background:#fff;flex-shrink:0;}
.did-doc-row .did-doc-meta{flex:1;min-width:0;}
@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(--t2);margin-bottom:24px;}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px;}
.modal-close{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;background:var(--panel2);border:1px solid var(--border);color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;font-size:15px;z-index:10;}
.modal-close:hover{border-color:var(--red);color:var(--red);background:rgba(239,68,68,.08);}
input[type="date"].gi,input[type="time"].gi{color-scheme:dark;}

/* ── GLASS CARD ── */
.glass{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:22px;position:relative;overflow:hidden;transition:border-color .3s,transform .3s,box-shadow .3s;}
.glass::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);}
.glass:hover{border-color:var(--bord2);transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.3);}
/* ── Premium reveal animation ── */
@keyframes hrReveal{from{opacity:0;transform:translateY(20px) scale(.98);filter:blur(4px);}to{opacity:1;transform:none;filter:blur(0);}}
.hr-reveal{opacity:0;}
.hr-reveal.hr-in-view{animation:hrReveal .55s cubic-bezier(.16,1,.3,1) both;}
.glass-gold{border-color:rgba(212,175,55,.18);background:linear-gradient(135deg,var(--gsoft) 0%,var(--panel) 65%);}

/* ── FORM INPUTS ── */
.gi{width:100%;background:rgba(0,0,0,.32);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:11px 13px;font-size:14px;outline:none;font-family:var(--body);transition:border-color .25s,box-shadow .25s;margin-bottom:12px;}
.gi:focus{border-color:rgba(212,175,55,.4);box-shadow:0 0 0 3px rgba(212,175,55,.08);}
.gi-ta{min-height:80px;resize:vertical;}
select.gi option{background:var(--deep);}
.gi-label{font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--t3);text-transform:uppercase;margin-bottom:6px;display:block;}

/* ── SECTION LABEL ── */
.sec-lbl{font-size:12px;font-weight:800;letter-spacing:2.5px;color:var(--gold);text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.sec-lbl::after{content:'';flex:1;height:1px;background:var(--border);}
.sec-lbl i{font-size:13px;}

/* ================================================================
   LOGIN OVERLAY
   ================================================================ */
#login-overlay{position:fixed;inset:0;background:var(--void);z-index:9999999;display:none;align-items:center;justify-content:center;padding:20px;}
.login-card{width:100%;max-width:420px;background:var(--lift);border:1px solid rgba(212,175,55,.28);border-radius:24px;padding:44px 36px;text-align:center;position:relative;overflow:hidden;animation:lcIn .9s cubic-bezier(.16,1,.3,1) both;box-shadow:0 32px 80px rgba(0,0,0,.65),0 0 80px rgba(212,175,55,.05);}
@keyframes lcIn{from{opacity:0;transform:translateY(26px) scale(.96);filter:blur(8px);}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}}
.login-card::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:180px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.login-brand{font-family:var(--disp);font-size:34px;font-weight:900;letter-spacing:10px;background:linear-gradient(135deg,var(--green) 0%,var(--gold) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:5px;}
.login-sub{font-size: 11px;letter-spacing:4px;color:var(--gold);opacity:.6;text-transform:uppercase;margin-bottom:32px;}
#login-err{color:var(--red);font-size:12px;margin-bottom:13px;display:none;background:rgba(232,64,64,.08);border:1px solid rgba(232,64,64,.2);border-radius:8px;padding:8px 11px;}

/* ================================================================
   INSUFFICIENT CLEARANCE SCREEN
   ================================================================ */
#clearance-screen{position:fixed;inset:0;background:var(--void);z-index:9999990;display:none;align-items:center;justify-content:center;flex-direction:column;gap:20px;text-align:center;padding:30px;}
#clearance-screen.show{display:flex;}
.clearance-icon{width:90px;height:90px;border-radius:50%;background:var(--rdim);border:2px solid var(--red);display:flex;align-items:center;justify-content:center;font-size:36px;color:var(--red);animation:clearancePulse 2s cubic-bezier(.16,1,.3,1) infinite;}
@keyframes clearancePulse{0%,100%{box-shadow:0 0 20px rgba(232,64,64,.2);}50%{box-shadow:0 0 50px rgba(232,64,64,.5),0 0 100px rgba(232,64,64,.2);}}
.clearance-title{font-family:var(--disp);font-size:28px;font-weight:900;letter-spacing:6px;color:var(--red);text-transform:uppercase;}
.clearance-msg{font-size:14px;color:var(--t2);max-width:420px;line-height:1.7;}
.clearance-redirect{font-size:12px;color:var(--t3);margin-top:10px;}

/* ================================================================
   PIN GATE OVERLAY — Apple Glassmorphism
   ================================================================ */
#pin-gate {
  position:fixed; inset:0;
  background:radial-gradient(ellipse at 50% -5%, rgba(16,28,14,.99) 0%, #030703 70%);
  z-index:9999980; display:none; align-items:center; justify-content:center;
  padding:20px; overflow:hidden;
}
#pin-gate.show { display:flex; }

/* Ambient orbs (reuse lgo-orb pattern) */
#pin-gate .lgo-orb { position:absolute; border-radius:50%; pointer-events:none; z-index:0; filter:blur(88px); }
#pin-gate .lgo-orb-1 {
  width:580px; height:580px; top:-220px; left:-200px;
  background:radial-gradient(circle,rgba(76,214,87,.22) 0%,transparent 70%);
  opacity:0; animation:lgOrbFade .9s cubic-bezier(.16,1,.3,1) 0s 1 normal forwards, lgOrbDrift1 22s cubic-bezier(.16,1,.3,1) .9s infinite alternate none;
}
#pin-gate .lgo-orb-2 {
  width:500px; height:500px; bottom:-180px; right:-160px;
  background:radial-gradient(circle,rgba(240,200,50,.18) 0%,transparent 70%);
  opacity:0; animation:lgOrbFade .9s cubic-bezier(.16,1,.3,1) .15s 1 normal forwards, lgOrbDrift2 28s cubic-bezier(.16,1,.3,1) 1.05s infinite alternate none;
}
@keyframes lgOrbFade{to{opacity:1;}}
@keyframes lgOrbDrift1{from{transform:translate(0,0);}to{transform:translate(44px,30px);}}
@keyframes lgOrbDrift2{from{transform:translate(0,0);}to{transform:translate(-36px,-24px);}}

/* ── Pin card ── */
.pin-card {
  position:relative; z-index:1;
  width:100%; max-width:430px;
  background:rgba(10,18,9,.72);
  backdrop-filter:blur(52px) saturate(180%); -webkit-backdrop-filter:blur(52px) saturate(180%);
  border:1px solid rgba(255,255,255,.08); border-radius:30px;
  padding:44px 36px 36px; text-align:center; overflow:hidden;
  animation:lcIn .75s cubic-bezier(.16,1,.3,1) both;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.35),
             0 64px 140px rgba(0,0,0,.78),0 0 0 1px rgba(0,0,0,.45);
}
.pin-card::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:240px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,200,50,.6),transparent);
}
.pin-card::after {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:30px;
  background:linear-gradient(150deg,rgba(255,255,255,.055) 0%,transparent 55%,rgba(255,255,255,.018) 100%);
}

/* ── Logo with glowing orbit ring ── */
.pin-logo-wrap {
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:26px;
}
.pin-logo {
  height:58px; width:auto; display:block;
  position:relative; z-index:2;
  opacity:0;
  filter:drop-shadow(0 0 16px rgba(76,214,87,.2));
  animation:loginLogoIn .85s cubic-bezier(.16,1,.3,1) .1s forwards;
}
@keyframes loginLogoIn { from{opacity:0;transform:scale(.82) translateY(6px);} to{opacity:1;transform:scale(1) translateY(0);} }

/* Glowing ring — centered circle around the logo */
.pin-logo-ring {
  position:absolute;
  width:92px; height:92px;
  left:50%; top:50%; transform:translate(-50%,-50%);
  border-radius:50%;
  border:1.5px solid rgba(212,175,55,.38);
  pointer-events:none; z-index:1;
  animation:pinRingGlow 2.6s cubic-bezier(.16,1,.3,1) infinite;
}
/* Rotating gold sweep arc around the ring */
.pin-logo-ring::before {
  content:''; position:absolute; inset:-3px; border-radius:50%;
  background:conic-gradient(
    transparent 0deg,
    rgba(212,175,55,.0) 0deg,
    rgba(212,175,55,.95) 20deg,
    rgba(212,175,55,.6) 38deg,
    rgba(212,175,55,.15) 58deg,
    transparent 78deg,
    transparent 360deg
  );
  filter:blur(2px);
  animation:pinSweepRotate 2.8s linear infinite;
}
/* Outer soft halo ring */
.pin-logo-ring::after {
  content:''; position:absolute; inset:-10px; border-radius:50%;
  border:1px solid rgba(212,175,55,.1);
  box-shadow:0 0 24px rgba(212,175,55,.12);
  animation:pinRingGlow 2.6s cubic-bezier(.16,1,.3,1) 1.3s infinite;
}
@keyframes pinRingGlow {
  0%,100% {
    box-shadow:0 0 12px rgba(212,175,55,.22),0 0 30px rgba(212,175,55,.09);
    border-color:rgba(212,175,55,.3);
  }
  50% {
    box-shadow:0 0 30px rgba(212,175,55,.6),0 0 58px rgba(212,175,55,.24);
    border-color:rgba(212,175,55,.75);
  }
}
@keyframes pinSweepRotate { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

.pin-title { font-family:var(--disp); font-size:19px; font-weight:700; letter-spacing:4px; color:var(--gold); margin-bottom:5px; position:relative; z-index:1; }
.pin-sub   { font-size:12.5px; color:var(--t2); margin-bottom:24px; line-height:1.55; position:relative; z-index:1; }

/* ── PIN dots ── */
.pin-dots { display:flex; justify-content:center; gap:18px; margin-bottom:28px; position:relative; z-index:1; }
.pin-dot {
  width:14px; height:14px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.18); background:transparent;
  transition:all .22s cubic-bezier(.16,1,.3,1);
  position:relative;
}
.pin-dot::after {
  content:''; position:absolute; inset:-4px; border-radius:50%;
  background:transparent; transition:background .22s;
}
.pin-dot.filled {
  background:var(--gold); border-color:var(--gold);
  box-shadow:0 0 14px rgba(212,175,55,.65),0 0 5px rgba(212,175,55,.45);
  transform:scale(1.15);
}
.pin-dot.filled::after { background:rgba(212,175,55,.12); }

/* ── Apple dialpad keypad ── */
.pin-keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-bottom:18px; position:relative; z-index:1; }
.pin-key {
  position:relative; overflow:hidden;
  height:68px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(16px) saturate(130%); -webkit-backdrop-filter:blur(16px) saturate(130%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.2),0 4px 16px rgba(0,0,0,.25);
  transition:transform .16s cubic-bezier(.16,1,.3,1), background .18s, border-color .18s, box-shadow .18s;
  user-select:none;
}
/* inner shine layer */
.pin-key::before {
  content:''; position:absolute; top:0; left:0; right:0; height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,transparent 100%);
  border-radius:18px 18px 0 0; pointer-events:none;
}
.pin-key:hover {
  background:rgba(240,200,50,.12); border-color:rgba(240,200,50,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 22px rgba(240,200,50,.12);
  transform:scale(1.04) translateY(-1px);
}
.pin-key:active {
  transform:scale(.93) translateY(1px);
  background:rgba(240,200,50,.18); border-color:rgba(240,200,50,.4);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.25),0 1px 4px rgba(240,200,50,.1);
}
/* Number digit */
.pk-num {
  font-family:var(--mono); font-size:24px; font-weight:700; color:var(--text);
  line-height:1; position:relative; z-index:1;
  transition:color .18s;
}
.pin-key:hover .pk-num { color:var(--gold); }

/* Delete key */
.pin-key.pin-del {
  background:rgba(255,72,72,.06); border-color:rgba(255,72,72,.12);
}
.pin-key.pin-del i { font-size:20px; color:rgba(242,247,238,.7); position:relative; z-index:1; transition:color .18s; }
.pin-key.pin-del:hover {
  background:rgba(255,72,72,.14); border-color:rgba(255,72,72,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 20px rgba(255,72,72,.12);
}
.pin-key.pin-del:hover i { color:var(--red); }

/* Confirm key */
.pin-key.pin-confirm-key {
  background:rgba(76,214,87,.12); border-color:rgba(76,214,87,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.2),0 4px 18px rgba(76,214,87,.1);
}
.pin-key.pin-confirm-key i { font-size:22px; color:var(--green); position:relative; z-index:1; transition:color .18s, transform .2s cubic-bezier(.16,1,.3,1); }
.pin-key.pin-confirm-key:hover {
  background:rgba(76,214,87,.9); border-color:rgba(76,214,87,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 32px rgba(76,214,87,.38);
  transform:scale(1.04) translateY(-1px);
}
.pin-key.pin-confirm-key:hover i { color:#fff; transform:scale(1.15); }
.pin-key.pin-confirm-key:active { transform:scale(.93) translateY(1px); background:rgba(76,214,87,.7); }

#pin-err { color:var(--red); font-size:12px; margin-top:6px; min-height:18px; font-weight:600; position:relative; z-index:1; }
.pin-attempts { font-size:11px; color:var(--t3); margin-top:8px; position:relative; z-index:1; }
.pin-attempts span { color:var(--red); font-weight:700; }

/* ── Wrong PIN: ring + logo flash red twice, revert to gold ── */
@keyframes pinRingRedFlash {
  0%   { border-color:rgba(255,72,72,.25); box-shadow:0 0 10px rgba(255,72,72,.15); }
  18%  { border-color:rgba(255,72,72,.92); box-shadow:0 0 34px rgba(255,72,72,.75),0 0 64px rgba(255,72,72,.3); }
  36%  { border-color:rgba(255,72,72,.22); box-shadow:0 0 10px rgba(255,72,72,.12); }
  54%  { border-color:rgba(255,72,72,.92); box-shadow:0 0 34px rgba(255,72,72,.75),0 0 64px rgba(255,72,72,.3); }
  76%  { border-color:rgba(255,72,72,.3);  box-shadow:0 0 14px rgba(255,72,72,.18); }
  100% { border-color:rgba(212,175,55,.38); box-shadow:0 0 12px rgba(212,175,55,.22); }
}
@keyframes pinLogoRedFlash {
  0%,36%,76%,100% { filter:drop-shadow(0 0 16px rgba(76,214,87,.2)); }
  18%,54%         { filter:drop-shadow(0 0 26px rgba(255,72,72,.85)); }
}
@keyframes pinSweepRotateRed { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

/* Error state (temporary — 2 red flashes) */
#pin-gate .pin-logo-ring.pin-ring-error {
  animation:pinRingRedFlash .95s cubic-bezier(.16,1,.3,1) forwards,
            pinSweepRotate 2.8s linear infinite !important;
}
#pin-gate .pin-logo-ring.pin-ring-error::before {
  background:conic-gradient(
    transparent 0deg,
    rgba(255,72,72,.0) 0deg,
    rgba(255,72,72,.95) 20deg,
    rgba(255,72,72,.6) 38deg,
    rgba(255,72,72,.15) 58deg,
    transparent 78deg,
    transparent 360deg
  ) !important;
}
#pin-gate .pin-logo.pin-logo-error {
  animation:pinLogoRedFlash .95s cubic-bezier(.16,1,.3,1) forwards !important;
  opacity:1 !important;
}

/* Locked state (permanent — stays red after 3 fails) */
#pin-gate .pin-logo-ring.pin-ring-locked {
  animation:pinRingLockedGlow 1.6s cubic-bezier(.16,1,.3,1) infinite,
            pinSweepRotateRed 2.8s linear infinite !important;
}
@keyframes pinRingLockedGlow {
  0%,100% { border-color:rgba(255,72,72,.4);  box-shadow:0 0 16px rgba(255,72,72,.28),0 0 40px rgba(255,72,72,.1); }
  50%     { border-color:rgba(255,72,72,.88); box-shadow:0 0 36px rgba(255,72,72,.72),0 0 70px rgba(255,72,72,.28); }
}
#pin-gate .pin-logo-ring.pin-ring-locked::before {
  background:conic-gradient(
    transparent 0deg,
    rgba(255,72,72,.0) 0deg,
    rgba(255,72,72,.95) 20deg,
    rgba(255,72,72,.6) 38deg,
    rgba(255,72,72,.15) 58deg,
    transparent 78deg,
    transparent 360deg
  ) !important;
}
#pin-gate .pin-logo-ring.pin-ring-locked::after {
  border-color:rgba(255,72,72,.18) !important;
  box-shadow:0 0 30px rgba(255,72,72,.2) !important;
}
#pin-gate .pin-logo.pin-logo-locked {
  filter:drop-shadow(0 0 22px rgba(255,72,72,.45)) !important;
  opacity:1 !important;
}

/* ================================================================
   PIN LOCKOUT SCREEN
   ================================================================ */
#pin-lockout{position:fixed;inset:0;background:var(--void);z-index:9999999;display:none;align-items:center;justify-content:center;flex-direction:column;gap:0;text-align:center;padding:30px;overflow:hidden;}
#pin-lockout.show{display:flex;}
#pin-lockout::before{content:'';position:fixed;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(200,0,0,0.015) 3px,rgba(200,0,0,0.015) 4px);
  animation:scanline 8s linear infinite;}
@keyframes scanline{0%{background-position:0 0;}100%{background-position:0 100px;}}
.lockout-particles{position:fixed;inset:0;pointer-events:none;overflow:hidden;}
.lockout-particle{position:absolute;width:2px;height:2px;background:rgba(232,64,64,.4);border-radius:50%;animation:particleDrift linear infinite;}
@keyframes particleDrift{0%{transform:translateY(100vh) translateX(0);opacity:0;}10%{opacity:1;}90%{opacity:.4;}100%{transform:translateY(-10vh) translateX(var(--dx));opacity:0;}}
.lockout-shield-wrap{margin-bottom:32px;position:relative;}
.lockout-shield{width:110px;height:110px;border-radius:50%;background:rgba(232,64,64,.08);border:2px solid var(--red);display:flex;align-items:center;justify-content:center;font-size:50px;color:var(--red);margin:0 auto;animation:lockoutPulse 1.5s cubic-bezier(.16,1,.3,1) infinite;}
@keyframes lockoutPulse{0%,100%{box-shadow:0 0 20px rgba(232,64,64,.3),0 0 60px rgba(232,64,64,.1);}50%{box-shadow:0 0 50px rgba(232,64,64,.7),0 0 120px rgba(232,64,64,.3),0 0 200px rgba(232,64,64,.1);}}
.lockout-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140px;height:140px;border-radius:50%;border:1px solid rgba(232,64,64,.2);animation:lockoutRing 2s cubic-bezier(.16,1,.3,1) infinite;}
.lockout-ring2{width:180px;height:180px;animation-delay:.5s;border-color:rgba(232,64,64,.1);}
@keyframes lockoutRing{0%{transform:translate(-50%,-50%) scale(.9);opacity:.8;}100%{transform:translate(-50%,-50%) scale(1.4);opacity:0;}}
.lockout-title{font-family:var(--disp);font-size:32px;font-weight:900;letter-spacing:8px;color:var(--red);text-transform:uppercase;margin-bottom:14px;text-shadow:0 0 30px rgba(232,64,64,.4);}
.lockout-msg{font-size:15px;color:var(--t2);max-width:440px;line-height:1.7;margin-bottom:28px;}
.lockout-contact{display:inline-flex;align-items:center;gap:9px;background:rgba(232,64,64,.12);border:1px solid rgba(232,64,64,.3);color:var(--red);padding:12px 24px;border-radius:50px;font-size:13px;font-weight:700;text-decoration:none;transition:all .3s;}
.lockout-contact:hover{background:rgba(232,64,64,.2);box-shadow:0 8px 24px rgba(232,64,64,.25);}

/* ================================================================
   TEST MODE BANNER
   ================================================================ */
#test-mode-banner{display:none;position:fixed;top:0;left:0;right:0;height:40px;z-index:999999;
  background:linear-gradient(90deg,rgba(160,0,0,0.97),rgba(220,40,40,0.97));
  border-bottom:2px solid rgba(255,100,100,0.5);align-items:center;justify-content:center;gap:16px;
  font-size:11px;font-weight:900;letter-spacing:2px;color:#fff;text-transform:uppercase;-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
#test-mode-banner.show{display:flex;animation:testBannerIn .45s cubic-bezier(.16,1,.3,1) both;}
@keyframes testBannerIn{from{transform:translateY(-100%);opacity:0;}to{transform:translateY(0);opacity:1;}}
.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: 11px;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);}
body.test-mode #hr-main-wrap{margin-top:40px;}

/* ================================================================
   HEADER
   ================================================================ */
/* Scroll-perf 2026-05-26: backdrop-filter removed from the STICKY header.
   A sticky blurred element re-samples + re-blurs everything scrolling behind
   it on every frame — the main "hangs while scrolling" cause. Background
   bumped .62 -> .92 so cards no longer show through; near-identical look. */
/* Scroll-perf 2026-05-26: background now fully opaque (was .92 — without the
   blur, content showed through the sticky header while scrolling). */
/* 2026-05-26: header now matches the exec board exactly — backdrop-filter
   frosts the content behind it so nothing shows through on scroll, and puts
   the sticky header on its own compositing layer. The ONE perf win kept from
   the earlier pass is that the perpetual `hdrScan` infinite animation (which
   repainted the header every frame forever) stays removed — that was the real
   scroll-jank cause, not the blur. translateZ retained as a belt-and-braces
   layer promotion. */
#hr-header{height:var(--hdh);display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:rgba(2,5,2,.97);border-bottom:1px solid var(--border);backdrop-filter:blur(60px) saturate(160%);-webkit-backdrop-filter:blur(60px) saturate(160%);position:sticky;top:0;z-index:500;flex-shrink:0;animation:hdrDrop .7s cubic-bezier(.16,1,.3,1) both;transform:translateZ(0);isolation:isolate;}
@keyframes hdrDrop{from{transform:translateY(-100%);opacity:0;}to{transform:translateY(0);opacity:1;}}
/* Scroll-perf 2026-05-26: removed the infinite `hdrScan` gradient animation.
   A perpetual animation on the STICKY header repainted that region every
   frame forever (worse on desktop's wider header) — starved scroll of
   compositor headroom. The faint static gold sheen is kept. */
#hr-header::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(212,175,55,.04) 50%,transparent 100%);}
/* Enterprise "view ready" cue — a brighter gold highlight sweeps across the
   header ONCE on page load, then rests fully transparent. Uses the free
   ::before pseudo (::after is the static sheen above; body::before is the page
   background). Base opacity:0 means it's invisible at rest AND under
   reduced-motion (animation disabled globally → element stays at its opacity:0
   base), so no separate guard is needed. Non-blocking (pointer-events:none). */
#hr-header::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;background:linear-gradient(100deg,transparent 38%,rgba(247,217,78,.30) 50%,transparent 62%);background-size:260% 100%;background-repeat:no-repeat;animation:hmHdrSweep 1.2s cubic-bezier(.16,1,.3,1) .15s both;}
@keyframes hmHdrSweep{0%{background-position:140% 0;opacity:0;}15%{opacity:1;}85%{opacity:1;}100%{background-position:-40% 0;opacity:0;}}
.hdr-left{display:flex;align-items:center;gap:14px;}
.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:8.5px;letter-spacing:3px;color:var(--gold);opacity:.55;text-transform:uppercase;}
.brand-logo-wrap{display:flex;align-items:center;gap:12px;border-left:1px solid var(--border);padding-left:16px;margin-left:4px;}
.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;}
.page-pill{display:flex;align-items:center;gap:7px;background:var(--gdim);border:1px solid rgba(212,175,55,.22);padding:5px 14px;border-radius:20px;font-size: 11px;font-weight:800;color:var(--gold);letter-spacing:.5px;text-transform:uppercase;}
.hdr-right{display:flex;align-items:center;gap:10px;}
.hdr-clock{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--gold);border:1px solid rgba(212,175,55,.28);padding:7px 14px;border-radius:8px;background:var(--gdim);letter-spacing:2px;white-space:nowrap;}
.hdr-user-chip{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--border);padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;color:var(--text);}
.hdr-user-av{width:26px;height:26px;border-radius:50%;overflow:hidden;background:var(--gdim);border:1px solid rgba(212,175,55,.3);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--gold);font-family:var(--mono);}
.hdr-icon-btn{width:44px;height:44px;border-radius:50%;background:var(--panel);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:14px;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s;}
.hdr-icon-btn:hover{background:var(--gdim);color:var(--gold);box-shadow:0 0 14px var(--gglow);}
.hdr-icon-btn.muted{color:var(--t3);}
.back-btn{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;background:var(--panel2);border:1px solid var(--border);color:var(--t2);font-size: 11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all .25s;}
.back-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--gdim);}
.role-badge{font-size: 11px;font-weight:800;letter-spacing:1.5px;padding:3px 9px;border-radius:10px;text-transform:uppercase;}
.role-sa{background:rgba(212,175,55,.15);color:var(--gold);border:1px solid rgba(212,175,55,.3);}
.role-hr{background:rgba(67,177,75,.12);color:var(--green);border:1px solid rgba(67,177,75,.25);}
.role-ops{background:var(--idim);color:var(--indigo);border:1px solid var(--iglow);}

/* ================================================================
   ALERT RIBBON (Section 2)
   ================================================================ */
#alert-ribbon{padding:0 28px;margin-bottom:0;display:flex;flex-direction:column;gap:0;transition:all .3s;}
.alert-ribbon-inner{display:flex;flex-direction:column;gap:8px;padding:12px 0;}
.alert-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;animation:alertIn .5s cubic-bezier(.16,1,.3,1) both;position:relative;overflow:hidden;}
@keyframes alertIn{from{opacity:0;transform:translateX(-20px);}to{opacity:1;transform:none;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes slideInUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.alert-item.alert-red{background:rgba(232,64,64,.08);border:1px solid rgba(232,64,64,.25);}
.alert-item.alert-amber{background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.22);}
.alert-item.alert-yellow{background:rgba(212,175,55,.06);border:1px solid rgba(212,175,55,.18);}
.alert-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.alert-red .alert-dot{background:var(--red);box-shadow:0 0 8px rgba(232,64,64,.6);animation:dotPulse 1.2s cubic-bezier(.16,1,.3,1) infinite;}
.alert-amber .alert-dot{background:var(--amber);box-shadow:0 0 8px rgba(245,158,11,.5);animation:dotPulse 1.8s cubic-bezier(.16,1,.3,1) infinite;}
.alert-yellow .alert-dot{background:var(--gold);}
@keyframes dotPulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.alert-icon{font-size:14px;flex-shrink:0;}
.alert-red .alert-icon{color:var(--red);}
.alert-amber .alert-icon{color:var(--amber);}
.alert-yellow .alert-icon{color:var(--gold);}
.alert-text{flex:1;font-size:13px;font-weight:600;line-height:1.4;}
.alert-action-btn{font-size: 11px;font-weight:800;letter-spacing:.5px;padding:5px 12px;border-radius:8px;border:1px solid var(--bord2);background:transparent;color:var(--t2);cursor:pointer;transition:all .2s;text-transform:uppercase;}
.alert-action-btn:hover{border-color:var(--gold);color:var(--gold);}
.alert-dismiss{width:22px;height:22px;border-radius:50%;background:var(--panel2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t3);font-size: 11px;flex-shrink:0;transition:all .2s;}
.alert-dismiss:hover{background:var(--rdim);border-color:var(--red);color:var(--red);}
#alert-empty{text-align:center;padding:16px;font-size:13px;color:var(--t3);display:none;}
#alert-empty.show{display:block;}

/* ================================================================
   KPI STRIP (Section 3)
   ================================================================ */
#kpi-strip{padding:20px 28px;display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;flex-wrap:wrap;}
#kpi-strip::-webkit-scrollbar{display:none;}
.kpi-pill{flex:1;min-width:140px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px 18px;transition:all .35s cubic-bezier(.16,1,.3,1);animation:kpiIn .6s cubic-bezier(.16,1,.3,1) both;cursor:default;}
@keyframes kpiIn{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}
.kpi-pill:hover{border-color:rgba(212,175,55,.25);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25);}
.kpi-pill:nth-child(1){animation-delay:.05s}.kpi-pill:nth-child(2){animation-delay:.1s}.kpi-pill:nth-child(3){animation-delay:.15s}.kpi-pill:nth-child(4){animation-delay:.2s}.kpi-pill:nth-child(5){animation-delay:.25s}.kpi-pill:nth-child(6){animation-delay:.3s}.kpi-pill:nth-child(7){animation-delay:.35s}
.kpi-icon{font-size:16px;margin-bottom:8px;}
.kpi-label{font-size: 11px;font-weight:800;letter-spacing:1.5px;color:var(--t3);text-transform:uppercase;margin-bottom:6px;}
.kpi-val{font-family:var(--mono);font-size:28px;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-sub{font-size:11px;color:var(--t3);margin-top:4px;}

/* ================================================================
   CHARTS (Section 4)
   ================================================================ */
#charts-section{padding:0 28px 28px;}
/* ── ARC RING HEALTH WIDGET ─────────────────────────────────────── */
#arc-rings-section{padding:0 28px 4px;}
.arc-rings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.arc-tile{background:var(--panel);border:1px solid var(--border);border-radius:22px;padding:24px 16px 18px;display:flex;flex-direction:column;align-items:center;gap:8px;animation:kpiIn .7s cubic-bezier(.16,1,.3,1) both;transition:border-color .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1);cursor:default;}
.arc-tile:hover{border-color:rgba(212,175,55,.22);transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.28);}
.arc-wrap{position:relative;width:112px;height:112px;flex-shrink:0;}
.arc-svg{width:100%;height:100%;overflow:visible;}
.arc-track{fill:none;stroke:var(--panel2);stroke-width:7;stroke-linecap:round;stroke-dasharray:145.91 238.76;}
.arc-fill{fill:none;stroke-width:7;stroke-linecap:round;stroke-dasharray:145.91 238.76;stroke-dashoffset:145.91;transition:stroke-dashoffset .85s cubic-bezier(.16,1,.3,1);}
.arc-gold  {stroke:var(--gold);  filter:drop-shadow(0 0 7px rgba(240,200,50,.4));}
.arc-green {stroke:var(--green); filter:drop-shadow(0 0 7px rgba(76,214,87,.35));}
.arc-purple{stroke:var(--indigo);filter:drop-shadow(0 0 7px var(--iglow));}
.arc-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;pointer-events:none;}
.arc-pct{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--text);line-height:1;letter-spacing:-0.5px;}
.arc-icon{font-size:11px;}
.arc-lbl{font-size:12px;font-weight:700;color:var(--text);letter-spacing:.3px;text-align:center;line-height:1.3;}
.arc-sub{font-size: 11px;color:var(--t3);text-align:center;font-family:var(--mono);line-height:1.5;min-height:30px;}
@media(max-width:820px){.arc-rings-grid{grid-template-columns:repeat(3,1fr);gap:10px;}.arc-wrap{width:90px;height:90px;}.arc-pct{font-size:18px;}.arc-tile{padding:18px 10px 14px;}}
@media(max-width:540px){.arc-rings-grid{grid-template-columns:1fr;}.arc-wrap{width:100px;height:100px;}.arc-pct{font-size:20px;}}

#ext-analytics-section{padding:0 28px 28px;}
.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;}
.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:11px;font-weight:800;letter-spacing:1.5px;color:var(--t3);text-transform:uppercase;margin-bottom:16px;}
.chart-canvas-wrap{position:relative;height:180px;}

/* ================================================================
   SEARCH & FILTER (Section 5)
   ================================================================ */
#search-section{padding:0 28px 20px;}
.search-bar-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.search-input-wrap{flex:1;min-width:220px;position:relative;}
.search-input-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:14px;pointer-events:none;}
#workforce-search{width:100%;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:11px 14px 11px 40px;font-size:13px;outline:none;font-family:var(--body);transition:border-color .25s;}
#workforce-search:focus{border-color:rgba(212,175,55,.4);}
.filter-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.chip{padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:var(--panel);color:var(--t2);font-size:11px;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:.5px;}
.chip:hover{border-color:var(--gold);color:var(--gold);}
.chip.active{background:var(--gdim);border-color:rgba(212,175,55,.4);color:var(--gold);}

/* ================================================================
   WORKFORCE GRID (Section 6)
   ================================================================ */
#workforce-section{padding:0 28px 28px;}
.wf-table-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--border);}
.wf-table{width:100%;border-collapse:collapse;min-width:900px;}
.wf-table thead th{padding:12px 14px;text-align:left;font-size: 11px;font-weight:800;letter-spacing:.5px;color:var(--t3);text-transform:uppercase;background:rgba(0,0,0,.28);border-bottom:1px solid var(--border);}
.wf-table tbody tr{border-bottom:1px solid rgba(255,255,255,.04);transition:background .2s;cursor:pointer;}
.wf-table tbody tr:hover{background:rgba(255,255,255,.03);}
.wf-table tbody tr.changed{animation:rowFlash .8s cubic-bezier(.16,1,.3,1) both;}
@keyframes rowFlash{0%{background:rgba(212,175,55,.12);}100%{background:transparent;}}
.wf-table tbody td{padding:12px 14px;font-size:13px;vertical-align:middle;}
.wf-av{width:34px;height:34px;border-radius:50%;background:var(--gdim);border:1px solid rgba(212,175,55,.25);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--gold);font-family:var(--mono);flex-shrink:0;}
.wf-name-cell{display:flex;align-items:center;gap:10px;}
.wf-name{font-size:14px;font-weight:600;color:var(--text);}
.wf-role{font-size:11px;color:var(--t3);}
.badge{display:inline-flex;align-items:center;gap:4px;font-size: 11px;font-weight:800;letter-spacing:1px;padding:2px 7px;border-radius:8px;text-transform:uppercase;vertical-align:middle;margin-left:5px;}
.badge-new{background:var(--idim);color:var(--indigo);border:1px solid var(--iglow);}
.badge-prob{background:var(--rdim);color:var(--red);border:1px solid rgba(232,64,64,.25);}
.badge-complete{background:var(--gndim);color:var(--green);border:1px solid rgba(67,177,75,.25);}
.badge-hr{background:var(--gdim);color:var(--gold);border:1px solid rgba(212,175,55,.25);}
.contract-tag{display:inline-block;padding:3px 9px;border-radius:8px;font-size: 11px;font-weight:800;letter-spacing:.5px;}
.ct-20{background:var(--idim);color:var(--indigo);border:1px solid var(--iglow);}
.ct-25{background:var(--adim);color:var(--amber);border:1px solid rgba(245,158,11,.2);}
.ct-40{background:var(--gndim);color:var(--green);border:1px solid rgba(67,177,75,.2);}
.ct-other{background:var(--panel2);color:var(--t2);border:1px solid var(--border);}
.live-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;}
.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.status-active .status-dot{background:var(--green);box-shadow:0 0 8px rgba(67,177,75,.7);animation:dotPulse 1.5s cubic-bezier(.16,1,.3,1) infinite;}
.status-idle .status-dot{background:var(--t3);}
.status-late .status-dot{background:var(--red);animation:dotPulse 1s cubic-bezier(.16,1,.3,1) infinite;}
.status-leave .status-dot{background:var(--gold);}
.prob-bar-wrap{min-width:100px;}
.prob-bar{height:5px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;margin-bottom:3px;}
.prob-bar-fill{height:100%;border-radius:3px;background:var(--green);transition:width .5s;}
.prob-bar-fill.amber{background:var(--amber);}
.prob-bar-fill.red{background:var(--red);}
.prob-day{font-family:var(--mono);font-size:11px;color:var(--t3);}
.mini-prog{height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;margin-top:3px;}
.mini-prog-fill{height:100%;border-radius:2px;background:var(--green);transition:width .4s;}
.mini-prog-fill.red{background:var(--red);}
.star-rating{display:flex;gap:2px;font-size:12px;}
.star-rating i{color:var(--t3);}
.star-rating i.on{color:var(--gold);}
.wf-actions{display:flex;gap:6px;}
.wf-empty{text-align:center;padding:40px;color:var(--t3);font-size:13px;}

/* ================================================================
   PROFILE DRAWER
   ================================================================ */
#profile-drawer{position:fixed;top:0;right:-420px;width:420px;height:100vh;background:var(--deep);border-left:1px solid var(--border);z-index:700000;overflow-y:auto;transition:right .4s cubic-bezier(.16,1,.3,1);box-shadow:-20px 0 60px rgba(0,0,0,.5);}
#profile-drawer.open{right:0;}
#profile-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:699999;display:none;-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);}
#profile-drawer-overlay.open{display:block;}
.drawer-hdr{padding:24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.drawer-close{width:32px;height:32px;border-radius:50%;background:var(--panel2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);transition:all .2s;}
.drawer-close:hover{border-color:var(--red);color:var(--red);}
.drawer-body{padding:24px;}
.drawer-av{width:64px;height:64px;border-radius:50%;background:var(--gdim);border:2px solid rgba(212,175,55,.3);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:var(--gold);font-family:var(--mono);margin-bottom:14px;}
.drawer-name{font-family:var(--disp);font-size:20px;font-weight:700;color:var(--text);margin-bottom:3px;}
.drawer-role{font-size:13px;color:var(--t2);margin-bottom:16px;}
.drawer-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;}
.drawer-row-lbl{color:var(--t3);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.drawer-row-val{color:var(--text);font-family:var(--mono);font-size:13px;}
.drawer-actions{margin-top:20px;display:flex;gap:8px;flex-wrap:wrap;}

/* ================================================================
   PROBATION PANEL (Section 7)
   ================================================================ */
#probation-section{padding:0 28px 28px;}
.prob-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;}
.prob-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;position:relative;overflow:hidden;transition:border-color .25s,transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;animation:kpiIn .6s cubic-bezier(.16,1,.3,1) both;}
.prob-card:hover{border-color:rgba(212,175,55,.25);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3);}
.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-card.review-due{border-color:rgba(245,158,11,.25);}
.prob-card-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;}
.prob-card-name{font-size:16px;font-weight:700;color:var(--text);margin-bottom:2px;}
.prob-card-dept{font-size:12px;color:var(--t3);}
.prob-timeline{margin-bottom:14px;}
.prob-tl-bar{height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;position:relative;margin-bottom:6px;}
.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-fill{background:var(--red);}
.prob-tl-labels{display:flex;justify-content:space-between;font-size: 11px;color:var(--t3);font-family:var(--mono);}
.prob-days-remaining{font-family:var(--mono);font-size:30px;font-weight:700;line-height:1;margin-bottom:4px;}
.prob-days-remaining.green{color:var(--green);}
.prob-days-remaining.amber{color:var(--amber);}
.prob-days-remaining.red{color:var(--red);}
.prob-days-lbl{font-size:11px;color:var(--t3);margin-bottom:14px;}
.prob-stats{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap;}
.prob-stat{font-size:12px;color:var(--t3);}
.prob-stat strong{color:var(--text);display:block;font-family:var(--mono);font-size:15px;}
.prob-card-footer{display:flex;gap:8px;flex-wrap:wrap;}
/* VMEM-proposal banner inside a probation card */
.prob-vmem-proposal{margin-top:12px;padding:12px 14px;border-radius:10px;background:rgba(240,200,50,.08);border:1px solid rgba(240,200,50,.35);border-left:3px solid var(--gold);}
.prob-vmem-proposal-hd{font-size:12px;color:var(--gold);font-weight:700;}
.prob-vmem-proposal-hd i{margin-right:6px;}
.prob-vmem-proposal-meta{font-size:11px;color:var(--t3);margin-top:2px;}
.prob-vmem-proposal-extra{font-size:12px;color:var(--t2);margin-top:6px;}
.prob-vmem-proposal-notes{font-size:12px;color:var(--t2);margin-top:8px;font-style:italic;line-height:1.5;}
.prob-vmem-proposal-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
@media(max-width:640px){.prob-vmem-proposal-actions{flex-direction:column;}.prob-vmem-proposal-actions .btn{width:100%;justify-content:center;}}
.prob-status-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:4px 11px;border-radius:10px;text-transform:uppercase;letter-spacing:1px;}
.psb-active{background:var(--gndim);color:var(--green);border:1px solid rgba(67,177,75,.25);}
.psb-review{background:var(--adim);color:var(--amber);border:1px solid rgba(245,158,11,.25);}
.psb-escalated{background:var(--rdim);color:var(--red);border:1px solid rgba(232,64,64,.25);}
.psb-complete{background:var(--gndim);color:var(--green);border:1px solid rgba(67,177,75,.25);}
/* ── Probation appeal pills (added with the 7-working-day appeal feature) ── */
.prob-appeal-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;padding:3px 10px;border-radius:10px;letter-spacing:.6px;text-transform:uppercase;}
.prob-appeal-window{position:relative;background:rgba(245,158,11,.10);color:var(--amber);border:1px solid rgba(245,158,11,.45);}
.prob-appeal-expired{background:rgba(232,64,64,.10);color:var(--red);border:1px solid rgba(232,64,64,.50);}
.prob-appeal-upheld{background:rgba(67,177,75,.10);color:var(--green);border:1px solid rgba(67,177,75,.45);}
.prob-appeal-dismissed{background:rgba(232,64,64,.08);color:var(--red);border:1px solid rgba(232,64,64,.35);}
@keyframes probAppealPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,0);}50%{box-shadow:0 0 0 5px rgba(245,158,11,.15);}}
#no-probation{text-align:center;padding:32px;color:var(--t3);font-size:13px;display:none;}
#no-probation.show{display:block;}

/* ── PROBATION REVIEW FORM ── */
.prob-review-panel{margin-top:28px;border-top:1px solid var(--border);padding-top:24px;}
.prob-review-panel .prp-title{font-size:11px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:8px;margin-bottom:18px;}
.prob-review-form{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:22px;max-width:680px;}
.prv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.prv-info-box{background:var(--gdim);border:1px solid rgba(212,175,55,.2);border-radius:10px;padding:12px 16px;margin-bottom:14px;font-size:12px;color:var(--gold);line-height:1.6;}
.prv-info-box i{margin-right:6px;}
.prv-warn-box{background:var(--rdim);border:1px solid rgba(232,64,64,.2);border-radius:10px;padding:12px 16px;margin-bottom:14px;font-size:12px;color:var(--red);display:none;}
.prv-warn-box.show{display:block;}

/* ── REVIEW HISTORY TABLE ── */
.prob-history-panel{margin-top:28px;}
.prob-history-panel .prp-title{font-size:11px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--t3);display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.rev-hist-table{width:100%;border-collapse:collapse;font-size:12px;}
.rev-hist-table th{text-align:left;padding:10px 12px;font-size:9.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--t3);border-bottom:1px solid var(--border);}
.rev-hist-table td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--t2);vertical-align:middle;}
.rev-hist-table tr:last-child td{border-bottom:none;}
.rev-hist-table tr:hover td{background:var(--panel);}
.outcome-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:6px;font-size: 11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;}
.op-satisfactory{background:var(--gndim);color:var(--green);border:1px solid rgba(67,177,75,.25);}
.op-exemplary{background:rgba(212,175,55,.15);color:var(--gold);border:1px solid rgba(212,175,55,.3);}
.op-unsatisfactory{background:var(--rdim);color:var(--red);border:1px solid rgba(232,64,64,.25);}
.op-extended{background:var(--adim);color:var(--amber);border:1px solid rgba(245,158,11,.25);}
.cert-link{font-size: 11px;color:var(--green);text-decoration:none;display:inline-flex;align-items:center;gap:4px;}
.cert-link:hover{text-decoration:underline;}

/* ── PROBATION REVIEW DRAWER ── */
#prv-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:700000;display:none;-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);}
#prv-drawer-overlay.open{display:block;}
#prv-drawer{position:fixed;top:0;right:-560px;width:520px;max-width:96vw;height:100%;background:linear-gradient(180deg,#09120a 0%,#0c150b 100%);border-left:1px solid var(--border);z-index:700001;overflow-y:auto;transition:right .45s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;scrollbar-width:thin;}
#prv-drawer.open{right:0;}
#prv-drawer::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);z-index:1;}
.prv-drw-hdr{padding:28px 24px 22px;border-bottom:1px solid var(--border);flex-shrink:0;position:relative;background:linear-gradient(135deg,rgba(212,175,55,.06) 0%,transparent 60%);}
.prv-drw-close{position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--border);color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;font-size:13px;}
.prv-drw-close:hover{border-color:var(--red);color:var(--red);background:var(--rdim);}
.prv-drw-top{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.prv-drw-avatar{width:54px;height:54px;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,rgba(212,175,55,.14),rgba(212,175,55,.04));border:1.5px solid rgba(212,175,55,.28);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;font-family:var(--disp);color:var(--gold);flex-shrink:0;letter-spacing:0;}
.prv-drw-avatar img{width:100%;height:100%;object-fit:cover;border-radius:14px;display:block;}
.prv-drw-meta{flex:1;min-width:0;}
.prv-drw-name{font-size:18px;font-weight:800;font-family:var(--disp);letter-spacing:.4px;color:var(--text);line-height:1.25;margin-bottom:2px;word-break:break-word;}
.prv-drw-dept{font-size:12px;color:var(--t3);margin-bottom:6px;}
.prv-drw-progress{margin-bottom:14px;}
.prv-drw-prog-row{display:flex;justify-content:space-between;align-items:center;font-size: 11px;color:var(--t3);font-family:var(--mono);margin-bottom:7px;}
.prv-drw-prog-bar{height:7px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;}
.prv-drw-prog-fill{height:100%;border-radius:4px;transition:width .7s cubic-bezier(.16,1,.3,1);}
.prv-drw-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;}
.prv-drw-stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 12px;}
.prv-drw-stat-val{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--text);margin-bottom:2px;line-height:1;}
.prv-drw-stat-lbl{font-size: 11px;color:var(--t3);text-transform:uppercase;letter-spacing:1px;}
.prv-drw-body{padding:24px;flex:1;}
.prv-drw-section-lbl{font-size: 11px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:8px;margin-bottom:18px;}
.prv-drw-section-lbl::after{content:'';flex:1;height:1px;background:rgba(212,175,55,.14);}
.prob-card{cursor:default;}
.prob-card.can-review{cursor:pointer;transition:border-color .25s,transform .25s,box-shadow .25s;}
.prob-card.can-review:hover{border-color:rgba(212,175,55,.35)!important;transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.28);}

/* ================================================================
   LEAVE QUEUE (Section 8)
   ================================================================ */
#leave-queue-section{padding:0 28px 28px;}
#leave-calendar-section{padding:0 28px 28px;}
.lq-cards{display:flex;flex-direction:column;gap:12px;}
.lq-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;animation:alertIn .4s cubic-bezier(.16,1,.3,1) both;transition:border-color .3s;}
.lq-card:hover{border-color:var(--bord2);}
.lq-card.conflict{border-color:rgba(245,158,11,.25);}
.lq-type-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.lq-info{flex:1;min-width:180px;}
.lq-name{font-size:15px;font-weight:700;color:var(--text);margin-bottom:2px;}
.lq-meta{font-size:12px;color:var(--t3);}
.lq-dates{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text);margin-top:4px;}
.lq-balance{font-size:12px;color:var(--t3);min-width:120px;}
.lq-balance strong{display:block;font-family:var(--mono);font-size:16px;font-weight:700;}
.lq-conflict-warn{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--amber);padding:4px 10px;background:var(--adim);border-radius:8px;border:1px solid rgba(245,158,11,.2);}
.lq-actions{display:flex;gap:8px;}
#lq-empty{text-align:center;padding:32px;color:var(--t3);font-size:13px;display:none;}
#lq-empty.show{display:block;}

/* ================================================================
   RECRUITMENT & HEADCOUNT (Section 9)
   ================================================================ */
#recruitment-section{padding:0 28px 28px;}
.recruit-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media(max-width:900px){.recruit-grid{grid-template-columns:1fr;}}

/* HR Assistant + Idealist Postings + Escalated Welfare — parity padding */
#hr-assistant-section,
#idealist-feed-section,
#escalated-welfare-section{padding:0 28px 28px;}
#hr-assistant-section .glass,
#idealist-feed-section .glass,
#escalated-welfare-section .glass{
  box-sizing:border-box;
  width:100%;
  /* Glass shells were missing a baseline radius/min-height under some viewport
     widths, leaving them visually different from their neighbours. */
  border-radius:14px;
  min-height:80px;
}
/* HR Assistant card stacks its blurb + button — the inline flex got cramped */
#hr-assistant-section .glass{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:center;
  justify-content:space-between;
}
#hr-assistant-section .glass > div:first-child{flex:1 1 320px;min-width:0;}
#hr-assistant-section .glass .btn{flex-shrink:0;}

/* Lists inside Idealist + Escalated Welfare must not overflow horizontally */
#idealist-feed-list,
#esc-welfare-list{
  display:block;
  width:100%;
  overflow-x:auto;     /* internal scroll only — the section box never overflows */
}

@media (max-width:640px){
  #hr-assistant-section .glass{padding:18px;gap:14px;}
  #hr-assistant-section .glass .btn{width:100%;text-align:center;justify-content:center;}
  #hr-assistant-section .glass > div:first-child{flex-basis:100%;}
}
.hc-breakdown{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.hc-row{display:flex;align-items:center;gap:10px;font-size:13px;}
.hc-dept-name{flex:1;color:var(--t2);}
.hc-count{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--text);min-width:28px;text-align:right;}
.hc-bar{flex:2;height:5px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;}
.hc-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--green),var(--gold));transition:width .6s;}
.recruit-cards{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.rc-card{background:var(--panel);border:1px solid var(--border);border-radius:13px;padding:15px 17px;transition:border-color .25s;}
.rc-card:hover{border-color:var(--bord2);}
.rc-card-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.rc-position{font-size:15px;font-weight:700;color:var(--text);}
.rc-meta{font-size:11px;color:var(--t3);margin-top:2px;}
.rc-progress-wrap{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.rc-prog-bar{flex:1;height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;}
.rc-prog-fill{height:100%;border-radius:3px;background:var(--green);transition:width .5s;}
.rc-prog-lbl{font-family:var(--mono);font-size:12px;color:var(--t2);white-space:nowrap;}
.status-tag{display:inline-flex;align-items:center;gap:5px;font-size: 11px;font-weight:800;padding:3px 9px;border-radius:8px;text-transform:uppercase;letter-spacing:1px;}
.st-open{background:var(--gndim);color:var(--green);border:1px solid rgba(67,177,75,.25);}
.st-inprogress{background:var(--adim);color:var(--amber);border:1px solid rgba(245,158,11,.25);}
.st-closed{background:var(--panel2);color:var(--t3);border:1px solid var(--border);}
.st-fulfilled{background:rgba(76,214,87,.12);color:var(--green);border:1px solid rgba(76,214,87,.25);}
.st-rejected-end{background:rgba(255,72,72,.12);color:var(--red);border:1px solid rgba(255,72,72,.25);}

/* IT Registration Tracker */
#it-tracker-section{padding:0 28px 28px;}
.it-counter-strip{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap;}
.it-counter{flex:1;min-width:130px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center;}
.it-counter-val{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--text);line-height:1;}
.it-counter-lbl{font-size: 11px;font-weight:700;letter-spacing:1.5px;color:var(--t3);text-transform:uppercase;margin-top:4px;}
.it-counter.awaiting .it-counter-val{color:var(--amber);}
.it-counter.registered .it-counter-val{color:var(--green);}
.it-tbl-wrap{overflow-x:auto;border-radius:13px;border:1px solid var(--border);}
.it-tbl{width:100%;border-collapse:collapse;min-width:780px;}
.it-tbl thead th{padding:11px 13px;text-align:left;font-size: 11px;font-weight:800;letter-spacing:1.5px;color:var(--t3);text-transform:uppercase;background:rgba(0,0,0,.25);border-bottom:1px solid var(--border);}
.it-tbl tbody tr{border-bottom:1px solid rgba(255,255,255,.04);transition:background .2s;}
.it-tbl tbody tr:hover{background:rgba(255,255,255,.025);}
.it-tbl tbody td{padding:11px 13px;font-size:13px;}
.itr-id{font-family:var(--mono);font-size:12px;color:var(--gold);cursor:pointer;user-select:all;}
.itr-status-pending{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--amber);animation:dotPulse 2s cubic-bezier(.16,1,.3,1) infinite;}
.itr-status-registered{color:var(--green);font-size:11px;font-weight:700;}
.itr-status-cancelled{color:var(--t3);font-size:11px;}
.days-pending{font-family:var(--mono);font-size:12px;font-weight:700;}
.days-pending.overdue{color:var(--red);}

/* ================================================================
   HOLIDAY CALENDAR (Section 10)
   ================================================================ */
#holiday-section{padding:0 28px 28px;}
.hol-cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.hol-cal-title{font-family:var(--disp);font-size:16px;font-weight:700;letter-spacing:2px;color:var(--gold);}
.cal-arrow{width:30px;height:30px;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;}
.cal-arrow:hover{border-color:var(--gold);color:var(--gold);}
.hol-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.hol-dow{text-align:center;font-size: 11px;font-weight:800;letter-spacing:1.5px;color:var(--t3);text-transform:uppercase;padding:6px 0;}
.hol-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;}
.hol-day:hover{border-color:rgba(212,175,55,.2);}
.hol-day.today{border-color:rgba(212,175,55,.4);background:rgba(212,175,55,.04);}
.hol-day.empty{background:transparent;border-color:transparent;}
.hol-day.public-holiday{background:rgba(212,175,55,.07);border-color:rgba(212,175,55,.3);}
.hol-day.has-leave{border-color:rgba(67,177,75,.25);}
.hol-dn{font-size:11px;font-weight:600;color:var(--t2);}
.hol-dots{display:flex;gap:2px;flex-wrap:wrap;margin-top:3px;}
.hol-dot{width:5px;height:5px;border-radius:50%;background:var(--green);}
.hol-dot.ph{background:var(--gold);}

/* ================================================================
   SHIFT PATTERN AUDITOR (Section 11)
   ================================================================ */
#shift-auditor-section{padding:0 28px 28px;}
.sa-tbl-wrap{overflow-x:auto;border-radius:13px;border:1px solid var(--border);}
.sa-tbl{width:100%;border-collapse:collapse;min-width:700px;}
.sa-tbl thead th{padding:11px 13px;text-align:left;font-size: 11px;font-weight:800;letter-spacing:1.5px;color:var(--t3);text-transform:uppercase;background:rgba(0,0,0,.25);border-bottom:1px solid var(--border);}
.sa-tbl tbody tr{border-bottom:1px solid rgba(255,255,255,.04);}
.sa-tbl tbody td{padding:11px 13px;font-size:13px;}
.traffic-green{color:var(--green);font-weight:700;}
.traffic-amber{color:var(--amber);font-weight:700;}
.traffic-red{color:var(--red);font-weight:700;}
.sparkline-wrap{display:flex;align-items:flex-end;gap:2px;height:24px;}
.spark-bar{width:6px;border-radius:2px;background:var(--green);transition:height .3s;}
.spark-bar.amber{background:var(--amber);}
.spark-bar.red{background:var(--red);}
.var-chip{font-family:var(--mono);font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;}
.var-ok{background:var(--gndim);color:var(--green);}
.var-warn{background:var(--adim);color:var(--amber);}
.var-bad{background:var(--rdim);color:var(--red);}

/* ================================================================
   SECTION NAV MENU
   ================================================================ */
/* ── Nav wrapper handles sticky/backdrop — arrow buttons live here ── */
/* Scroll-perf 2026-05-26: blur removed from sticky section-nav (same reason
   as the header). Background .92 -> .97 keeps it solid-clean over scrolling cards. */
/* 2026-05-26: matches exec sub-nav — backdrop-filter frosts content scrolling
   behind it so nothing bleeds through. Layer promotion retained. */
.sec-nav-wrap{position:sticky;top:var(--hdh);z-index:490;background:rgba(2,5,2,.98);border-bottom:1px solid var(--border);backdrop-filter:blur(40px) saturate(140%);-webkit-backdrop-filter:blur(40px) saturate(140%);display:flex;align-items:stretch;transform:translateZ(0);isolation:isolate;}
/* Scroll-perf 2026-05-26: explicit touch-scroll on the horizontal nav.
   Removing backdrop-filter from .sec-nav-wrap (its containing block) can
   disrupt nested touch scrolling on iOS — these flags restore reliable
   horizontal swipe + momentum on mobile. */
#sec-nav{flex:1;display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none;padding:0 4px;-webkit-overflow-scrolling:touch;touch-action:pan-x;}
#sec-nav::-webkit-scrollbar{display:none;}
/* ── Scroll arrow buttons ── */
.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;position:relative;z-index:1;}
.snav-arrow.visible{opacity:1;pointer-events:auto;}
.snav-arrow:hover{background:rgba(212,175,55,0.09);}
.snav-arrow i{transition:transform .2s;}
.snav-arrow:hover i{transform:scale(1.2);}
/* Gradient fade behind each arrow */
.snav-arrow.snav-left::after{content:'';position:absolute;top:0;right:-18px;width:18px;height:100%;background:linear-gradient(90deg,rgba(5,9,5,0.85),transparent);pointer-events:none;}
.snav-arrow.snav-right::before{content:'';position:absolute;top:0;left:-18px;width:18px;height:100%;background:linear-gradient(270deg,rgba(5,9,5,0.85),transparent);pointer-events:none;}
.snav-item{display:flex;align-items:center;gap:7px;padding:14px 16px;font-size:11px;font-weight:800;letter-spacing:.5px;color:var(--t3);text-transform:uppercase;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;position:relative;}
.snav-item:hover{color:var(--t2);}
.snav-item.active{color:var(--gold);border-bottom-color:var(--gold);}
.snav-item i{font-size:12px;}
.snav-badge{background:var(--red);color:#fff;font-size: 11px;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);color:var(--void);}
.snav-div{width:1px;background:rgba(255,255,255,.13);margin:10px 6px;flex-shrink:0;align-self:stretch;}
.snav-lbl{font-size: 11px;font-weight:900;letter-spacing:1px;color:rgba(240,200,50,.4);padding:0 2px 0 10px;white-space:nowrap;align-self:center;text-transform:uppercase;flex-shrink:0;pointer-events:none;user-select:none;}
body.test-mode .sec-nav-wrap{top:calc(var(--hdh) + 40px);}

/* ================================================================
   SICKNESS MANAGEMENT SECTION
   ================================================================ */
#sickness-section{padding:0 28px 28px;}
.sick-stats-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px;}
.sick-stat{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center;}
.sick-stat-val{font-family:var(--mono);font-size:28px;font-weight:700;line-height:1;margin-bottom:4px;}
.sick-stat-lbl{font-size: 11px;font-weight:700;letter-spacing:1.5px;color:var(--t3);text-transform:uppercase;}
.bradford-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size: 11px;font-weight:800;font-family:var(--mono);letter-spacing:.5px;}
.bf-low{background:rgba(67,177,75,.12);color:var(--green);border:1px solid rgba(67,177,75,.25);}
.bf-moderate{background:rgba(245,158,11,.1);color:#f59e0b;border:1px solid rgba(245,158,11,.25);}
.bf-elevated{background:rgba(245,158,11,.18);color:var(--amber);border:1px solid rgba(245,158,11,.4);}
.bf-high{background:rgba(232,64,64,.12);color:var(--red);border:1px solid rgba(232,64,64,.3);}
.bf-critical{position:relative;background:var(--red);color:#fff;border:1px solid var(--red);}
@keyframes bfPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,64,64,0);}50%{box-shadow:0 0 0 5px rgba(232,64,64,.25);}}
.bf-volunteer{background:var(--idim);color:var(--indigo);border:1px solid var(--iglow);}
.sick-tbl-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--border);}
.sick-tbl{width:100%;border-collapse:collapse;font-size:13px;}
.sick-tbl th{padding:10px 14px;text-align:left;font-size: 11px;font-weight:800;letter-spacing:.5px;color:var(--t3);text-transform:uppercase;background:rgba(0,0,0,.15);border-bottom:1px solid var(--border);}
.sick-tbl td{padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle;}
.sick-tbl tr:last-child td{border-bottom:none;}
.sick-tbl tr:hover td{background:rgba(255,255,255,.025);}
.bf-guide-btn{font-size:11px;color:var(--gold);cursor:pointer;text-decoration:underline;text-underline-offset:3px;background:none;border:none;padding:0;font-family:var(--body);}
.bf-guide-box{background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px;}
.bf-guide-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:12px;}
.bf-guide-row:last-child{border-bottom:none;}
.bf-score-range{font-family:var(--mono);font-weight:800;min-width:80px;}

/* ================================================================
   LEAVE BALANCE MANAGEMENT (new section)
   ================================================================ */
#leave-balance-section{padding:0 28px 28px;}
.lb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}
.lb-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px;transition:border-color .3s;}
.lb-card:hover{border-color:var(--bord2);}
.lb-card-hdr{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.lb-av{width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--gdim);border:1px solid rgba(212,175,55,.25);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--gold);flex-shrink:0;}
.lb-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.lb-name{font-size:14px;font-weight:700;color:var(--text);}
.lb-dept{font-size:11px;color:var(--t3);}
.lb-rows{display:flex;flex-direction:column;gap:8px;}
.lb-row{display:flex;align-items:center;gap:8px;}
.lb-type{font-size:11px;color:var(--t3);width:100px;flex-shrink:0;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}
.lb-bar-wrap{flex:1;height:5px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;}
.lb-bar-fill{height:100%;border-radius:3px;background:var(--green);transition:width .4s;}
.lb-bar-fill.red{background:var(--red);}
.lb-nums{font-family:var(--mono);font-size:12px;color:var(--t2);white-space:nowrap;min-width:70px;text-align:right;}
.lb-adjust-btn{min-width:36px;min-height:36px;border-radius:6px;background:var(--panel2);border:1px solid var(--border);color:var(--t3);font-size: 11px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;}
.lb-adjust-btn:hover{border-color:var(--gold);color:var(--gold);}

/* ================================================================
   MAIN WRAP
   ================================================================ */
#hr-main-wrap{display:none;}
#hr-main-wrap.show{display:block;}

/* ================================================================
   MOBILE
   ================================================================ */
@media(max-width:768px){
  #hr-header{padding:0 16px;}
  .page-pill{display:none;}
  #kpi-strip{padding:14px 16px;gap:8px;}
  .kpi-pill{min-width:120px;}
  #alert-ribbon,#workforce-section,#probation-section,#leave-queue-section,
  #recruitment-section,#it-tracker-section,#holiday-section,#shift-auditor-section,
  #search-section,#charts-section,#ext-analytics-section,
  #hr-assistant-section,#idealist-feed-section,#escalated-welfare-section{padding-left:16px;padding-right:16px;}
  .snav-item{padding:12px 12px;font-size:10px;}
  .recruit-grid{grid-template-columns:1fr;}
  #profile-drawer{width:100%;right:-100%;}
  .charts-grid{grid-template-columns:1fr!important;}
  .wf-table{min-width:700px;}
}
@media (max-width: 900px) {
  .charts-grid { grid-template-columns: 1fr 1fr !important; }
  #recruitment-section > div { grid-template-columns: 1fr !important; }
  .wf-table { font-size: 11px; }
  .wf-table th, .wf-table td { padding: 8px 6px; }
}
@media (max-width: 640px) {
  .charts-grid { grid-template-columns: 1fr !important; }
  .kpi-strip { grid-template-columns: 1fr 1fr !important; }
  #lsm-grid { grid-template-columns: 1fr !important; }
  .modal-box { max-width: 100% !important; margin: 8px; border-radius: 12px; }
  .modal-actions { flex-direction: column; }
  .modal-actions .btn { width: 100%; justify-content: center; }
  .sec-lbl { font-size: 11px !important; }
  #main-header { padding: 0 12px; }
  .page-section, [id$="-section"] { padding: 0 12px 20px !important; }
  .glass { padding: 14px !important; }
  .wf-table { min-width: 600px; }
  .profile-drawer { width: 100% !important; right: -100% !important; }
  .profile-drawer.open { right: 0 !important; }
  .filter-chips-wrap { flex-wrap: wrap; gap: 6px; }
}
/* ================================================================
   PERFORMANCE MANAGEMENT SECTION
   ================================================================ */
#performance-section{padding:0 28px 28px;}
.perf-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.perf-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;position:relative;overflow:hidden;transition:border-color .3s,transform .3s;animation:kpiIn .6s cubic-bezier(.16,1,.3,1) both;}
.perf-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);}
.perf-card:hover{border-color:var(--bord2);transform:translateY(-2px);}
.perf-card-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;}
.perf-card-name{font-size:15px;font-weight:700;color:var(--text);margin-bottom:2px;}
.perf-card-dept{font-size:11px;color:var(--t3);}
.perf-outcome{display:inline-flex;align-items:center;padding:3px 10px;border-radius:8px;font-size: 11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;}
.po-outstanding{background:rgba(212,175,55,.15);color:var(--gold);border:1px solid rgba(212,175,55,.3);}
.po-satisfactory{background:var(--gndim);color:var(--green);border:1px solid rgba(67,177,75,.25);}
.po-needs-improvement{background:var(--adim);color:var(--amber);border:1px solid rgba(245,158,11,.25);}
.po-pip{background:var(--rdim);color:var(--red);border:1px solid rgba(232,64,64,.25);}
.po-pending{background:var(--panel2);color:var(--t3);border:1px solid var(--border);}
.perf-stars{display:flex;gap:3px;margin:8px 0;font-size:14px;}
.perf-stars i.on{color:var(--gold);}
.perf-stars i.off{color:rgba(255,255,255,.12);}
.perf-notes-excerpt{font-size:12px;color:var(--t3);line-height:1.5;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.perf-meta{font-size:11px;color:var(--t3);display:flex;gap:12px;flex-wrap:wrap;}
.perf-meta strong{color:var(--t2);}

/* ================================================================
   TRAINING & DEVELOPMENT SECTION
   ================================================================ */
#training-section{padding:0 28px 28px;}
.training-tbl-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--border);}
.training-tbl{width:100%;border-collapse:collapse;min-width:800px;}
.training-tbl thead th{padding:11px 14px;text-align:left;font-size: 11px;font-weight:800;letter-spacing:.5px;color:var(--t3);text-transform:uppercase;background:rgba(0,0,0,.25);border-bottom:1px solid var(--border);}
.training-tbl tbody tr{border-bottom:1px solid rgba(255,255,255,.04);transition:background .2s;}
.training-tbl tbody tr:hover{background:rgba(255,255,255,.025);}
.training-tbl tbody td{padding:11px 14px;font-size:13px;vertical-align:middle;}
.training-status{display:inline-flex;align-items:center;gap:5px;font-size: 11px;font-weight:800;padding:3px 9px;border-radius:8px;text-transform:uppercase;letter-spacing:.5px;}
.ts-complete{background:var(--gndim);color:var(--green);border:1px solid rgba(67,177,75,.25);}
.ts-expiring{background:var(--adim);color:var(--amber);border:1px solid rgba(245,158,11,.25);}
.ts-overdue{background:var(--rdim);color:var(--red);border:1px solid rgba(232,64,64,.25);}
.ts-no-expiry{background:var(--panel2);color:var(--t3);border:1px solid var(--border);}
.training-cat{display:inline-block;padding:2px 8px;border-radius:6px;font-size: 11px;font-weight:800;letter-spacing:.5px;background:var(--gdim);color:var(--gold);border:1px solid rgba(212,175,55,.2);}

/* ================================================================
   DOCUMENT COMPLIANCE SECTION
   ================================================================ */
#doc-expiry-section{padding:0 28px 28px;}
.doc-list{display:flex;flex-direction:column;gap:10px;}
.doc-item{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;animation:alertIn .4s cubic-bezier(.16,1,.3,1) both;transition:border-color .3s;}
.doc-item:hover{border-color:var(--bord2);}
.doc-item.doc-expired{border-color:rgba(232,64,64,.3);background:linear-gradient(135deg,rgba(232,64,64,.04) 0%,var(--panel) 60%);}
.doc-item.doc-expiring{border-color:rgba(245,158,11,.25);}
.doc-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.doc-icon.expired{background:var(--rdim);color:var(--red);}
.doc-icon.expiring{background:var(--adim);color:var(--amber);}
.doc-icon.valid{background:var(--gndim);color:var(--green);}
.doc-info{flex:1;min-width:180px;}
.doc-name{font-size:15px;font-weight:700;color:var(--text);margin-bottom:2px;}
.doc-type{font-size:12px;color:var(--t3);}
.doc-ref{font-family:var(--mono);font-size:11px;color:var(--t3);margin-top:3px;}
.doc-dates{font-size:12px;color:var(--t3);min-width:160px;}
.doc-dates strong{display:block;font-family:var(--mono);font-size:13px;color:var(--text);}
.doc-status-tag{display:inline-flex;align-items:center;gap:5px;font-size: 11px;font-weight:800;padding:4px 11px;border-radius:8px;text-transform:uppercase;letter-spacing:.5px;}
.dst-expired{background:var(--rdim);color:var(--red);border:1px solid rgba(232,64,64,.25);}
.dst-expiring{background:var(--adim);color:var(--amber);border:1px solid rgba(245,158,11,.25);}
.dst-valid{background:var(--gndim);color:var(--green);border:1px solid rgba(67,177,75,.25);}
.dst-no-expiry{background:var(--idim);color:var(--indigo);border:1px solid var(--iglow);}
.dst-review-due{background:var(--adim);color:var(--amber);border:1px solid rgba(245,158,11,.25);}
.doc-item.doc-review-overdue{border-color:rgba(232,64,64,.3);background:linear-gradient(135deg,rgba(232,64,64,.04) 0%,var(--panel) 60%);}
.doc-item.doc-review-due{border-color:rgba(245,158,11,.25);}

/* ================================================================
   HR CASE MANAGEMENT SECTION
   ================================================================ */
#hr-cases-section{padding:0 28px 28px;}
.case-cards{display:flex;flex-direction:column;gap:12px;}
.case-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;transition:border-color .3s;}
.case-card:hover{border-color:var(--bord2);}
.case-type-badge{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.ctb-grievance{background:var(--adim);color:var(--amber);}
.ctb-disciplinary{background:var(--rdim);color:var(--red);}
.ctb-investigation{background:var(--idim);color:var(--indigo);}
.ctb-complaint{background:var(--gdim);color:var(--gold);}
.ctb-other{background:var(--panel2);color:var(--t3);}
.case-info{flex:1;min-width:200px;}
.case-name{font-size:15px;font-weight:700;color:var(--text);margin-bottom:3px;}
.case-summary{font-size:12px;color:var(--t3);line-height:1.5;margin-bottom:8px;}
.case-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--t3);}
.case-meta strong{color:var(--t2);}
.case-priority{display:inline-flex;align-items:center;gap:4px;font-size: 11px;font-weight:800;padding:3px 9px;border-radius:8px;text-transform:uppercase;letter-spacing:.5px;}
.cp-high{background:var(--rdim);color:var(--red);border:1px solid rgba(232,64,64,.25);}
.cp-medium{background:var(--adim);color:var(--amber);border:1px solid rgba(245,158,11,.25);}
.cp-low{background:var(--panel2);color:var(--t3);border:1px solid var(--border);}
.case-status-badge{display:inline-flex;align-items:center;gap:5px;font-size: 11px;font-weight:800;padding:3px 9px;border-radius:8px;text-transform:uppercase;letter-spacing:.5px;}
.csb-open{background:var(--adim);color:var(--amber);border:1px solid rgba(245,158,11,.25);}
.csb-inprogress{background:var(--idim);color:var(--indigo);border:1px solid var(--iglow);}
.csb-resolved{background:var(--gndim);color:var(--green);border:1px solid rgba(67,177,75,.25);}
.csb-closed{background:var(--panel2);color:var(--t3);border:1px solid var(--border);}
.case-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start;}
.case-card-closed{opacity:.75;border-style:dashed;}
.failed-prob-card{border-color:rgba(232,64,64,.35)!important;}
.case-card-closed:hover{opacity:1;}
.case-stage-notes{margin-top:10px;background:var(--panel2);border-radius:10px;padding:10px 12px;border:1px solid var(--border);}
.case-stage-notes-title{font-size: 11px;font-weight:700;letter-spacing:1px;color:var(--t3);text-transform:uppercase;margin-bottom:8px;}
.case-stage-note-item{padding:6px 0;border-bottom:1px solid var(--border);font-size:12px;}
.case-stage-note-item:last-child{border-bottom:none;padding-bottom:0;}
.case-note-author{font-weight:700;color:var(--t2);margin-right:6px;}
.case-note-date{font-size: 11px;color:var(--t3);}
.case-note-text{color:var(--text);margin-top:3px;line-height:1.5;}
.case-resolution-note{margin-top:10px;padding:8px 12px;background:rgba(67,177,75,.08);border:1px solid rgba(67,177,75,.2);border-radius:8px;font-size:12px;color:var(--t2);line-height:1.5;}
#closed-cases-chevron{transition:transform .25s cubic-bezier(.16,1,.3,1);}

/* ================================================================
   EXIT ANALYTICS SECTION
   ================================================================ */
#exit-analytics-section2{padding:0 28px 28px;}
.exit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:1100px){.exit-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:700px){.exit-grid{grid-template-columns:1fr;}}
.exit-reason-bar-wrap{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.exit-reason-row{display:flex;align-items:center;gap:10px;font-size:13px;}
.exit-reason-label{width:160px;flex-shrink:0;color:var(--t2);font-size:12px;}
.exit-reason-bar-outer{flex:1;height:7px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;}
.exit-reason-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--green),var(--gold));transition:width .6s;}
.exit-reason-count{font-family:var(--mono);font-size:12px;color:var(--t3);min-width:24px;text-align:right;}
.exit-leavers-tbl{width:100%;border-collapse:collapse;font-size:12px;}
.exit-leavers-tbl th{padding:9px 12px;text-align:left;font-size:9.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--t3);border-bottom:1px solid var(--border);}
.exit-leavers-tbl td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--t2);}
.exit-leavers-tbl tr:last-child td{border-bottom:none;}
.exit-leavers-tbl tr:hover td{background:var(--panel);}
.rehire-yes{color:var(--green);font-weight:700;}
.rehire-no{color:var(--red);font-weight:700;}
/* Exit monthly bar chart — reuses month-trend-* from time-intel */
.exit-month-chart-wrap{display:flex;flex-direction:column;gap:4px;}
.exit-month-bars{display:flex;align-items:flex-end;gap:5px;height:80px;margin-top:10px;}
.exit-month-bar{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--gold),var(--green));min-height:4px;transition:height .5s cubic-bezier(.16,1,.3,1);display:flex;align-items:flex-end;justify-content:center;padding-bottom:2px;}
.exit-month-bar-label{font-size: 11px;color:rgba(255,255,255,.55);font-family:var(--mono);}
.exit-month-xlabels{display:flex;gap:5px;margin-top:4px;}
.exit-month-xlabels span{flex:1;text-align:center;font-size: 11px;color:var(--t3);font-family:var(--mono);}
/* Exit category badge */
.exit-cat-badge{font-size: 11px;font-weight:700;padding:2px 7px;border-radius:6px;}
.exit-cat-failed{background:rgba(239,68,68,.12);color:var(--red);border:1px solid rgba(239,68,68,.2);}
.exit-cat-resign{background:rgba(245,158,11,.12);color:var(--amber);border:1px solid rgba(245,158,11,.2);}
.exit-cat-contract{background:var(--idim);color:var(--indigo);border:1px solid var(--iglow);}
.exit-cat-other{background:var(--panel);color:var(--t3);border:1px solid var(--border);}
/* D&I nationality + staffvol bar reuse di-bar-row styles */
.succ-prob-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--panel);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;animation:pIn .35s cubic-bezier(.16,1,.3,1) both;}
.succ-prob-row:hover{border-color:var(--bord2);}
.succ-prob-days{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--green);white-space:nowrap;}
.succ-prob-days.soon{color:var(--amber);}
.succ-role-row{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--panel);border:1px solid var(--border);border-radius:10px;margin-bottom:7px;}
.succ-role-name{flex:1;font-size:12px;font-weight:600;color:var(--text);}
.succ-role-count{font-family:var(--mono);font-size:12px;color:var(--t3);}
.succ-role-count.solo{color:var(--red);font-weight:700;}
.succ-role-count.low{color:var(--amber);font-weight:600;}

/* ================================================================
   DIVERSITY & INCLUSION SECTION
   ================================================================ */
#di-section{padding:0 28px 28px;}
.di-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px;}
@media(max-width:1100px){.di-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:700px){.di-grid{grid-template-columns:1fr;}}
.di-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.di-bar-label{width:130px;flex-shrink:0;font-size:12px;color:var(--t2);}
.di-bar-outer{flex:1;height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;}
.di-bar-fill{height:100%;border-radius:4px;transition:width .6s;}
.di-bar-count{font-family:var(--mono);font-size:12px;color:var(--t3);min-width:36px;text-align:right;}
.di-stacked-bar{height:18px;border-radius:9px;overflow:hidden;display:flex;margin:10px 0;}
.di-stack-seg{height:100%;transition:width .6s;display:flex;align-items:center;justify-content:center;font-size: 11px;font-weight:700;color:rgba(255,255,255,.85);overflow:hidden;white-space:nowrap;}
.di-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;}
.di-leg-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--t3);}
.di-leg-dot{width:10px;height:10px;border-radius:50%;}
.di-count-table{margin-top:12px;font-size:12px;width:100%;}
.di-count-table td{padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.04);}
.di-count-table td:last-child{font-family:var(--mono);font-weight:700;text-align:right;}

/* ================================================================
   TIME INTELLIGENCE SECTION
   ================================================================ */
#time-intel-section{padding:0 28px 28px;}
.time-intel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:20px;}
@media(max-width:1200px){.time-intel-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:700px){.time-intel-grid{grid-template-columns:1fr;}}
/* Apple-style pill bars */
@keyframes tiRowIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.ti-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;animation:tiRowIn .5s cubic-bezier(.16,1,.3,1) both;}
.ti-bar-row:nth-child(1){animation-delay:.04s}.ti-bar-row:nth-child(2){animation-delay:.08s}
.ti-bar-row:nth-child(3){animation-delay:.12s}.ti-bar-row:nth-child(4){animation-delay:.16s}
.ti-bar-row:nth-child(5){animation-delay:.20s}.ti-bar-row:nth-child(6){animation-delay:.24s}
.ti-bar-row:nth-child(7){animation-delay:.28s}.ti-bar-row:nth-child(8){animation-delay:.32s}
.ti-bar-label{flex:0 0 auto;min-width:96px;max-width:180px;font-size:12px;color:var(--t2);word-break:break-word;line-height:1.3;}
.ti-bar-outer{flex:1;height:8px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden;}
.ti-bar-fill{height:100%;border-radius:99px;background:var(--amber);transition:width .75s cubic-bezier(.16,1,.3,1);}
.ti-bar-fill.green{background:var(--green);}
.ti-bar-fill.red{background:var(--red);}
.ti-bar-val{font-family:var(--mono);font-size:11px;color:var(--t3);min-width:36px;text-align:right;}
/* Leave area chart */
.ti-area-wrap{position:relative;height:96px;margin-top:6px;}
/* Month trend bars */
.month-trend-bars{display:flex;align-items:flex-end;gap:5px;height:80px;margin-top:10px;}
.month-trend-bar{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(0deg,rgba(76,214,87,.6),rgba(240,200,50,.8));min-height:4px;transition:height .6s cubic-bezier(.16,1,.3,1);display:flex;align-items:flex-end;justify-content:center;padding-bottom:2px;cursor:default;}
.month-trend-bar:hover{filter:brightness(1.15);}
.month-trend-label{font-size: 11px;color:rgba(255,255,255,.65);font-family:var(--mono);}
.month-trend-xlabels{display:flex;gap:5px;margin-top:5px;}
.month-trend-xlabels span{flex:1;text-align:center;font-size: 11px;color:var(--t3);font-family:var(--mono);}

/* ================================================================
   SUCCESSION & WORKFORCE PLANNING SECTION
   ================================================================ */
#succession-section{padding:0 28px 28px;}
.succ-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
@media(max-width:900px){.succ-grid{grid-template-columns:1fr;}}
.succ-tenure-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;animation:tiRowIn .5s cubic-bezier(.16,1,.3,1) both;}
.succ-tenure-bar-row:nth-child(1){animation-delay:.04s}.succ-tenure-bar-row:nth-child(2){animation-delay:.08s}
.succ-tenure-bar-row:nth-child(3){animation-delay:.12s}.succ-tenure-bar-row:nth-child(4){animation-delay:.16s}
.succ-tenure-bar-row:nth-child(5){animation-delay:.20s}.succ-tenure-bar-row:nth-child(6){animation-delay:.24s}
.succ-tenure-label{width:85px;flex-shrink:0;font-size:12px;color:var(--t2);}
.succ-tenure-bar-outer{flex:1;height:8px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden;}
.succ-tenure-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,rgba(76,214,87,.8),var(--gold));transition:width .75s cubic-bezier(.16,1,.3,1);}
.succ-tenure-count{font-family:var(--mono);font-size:12px;color:var(--t3);min-width:28px;text-align:right;}
.succ-top-list{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.succ-top-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--panel);border:1px solid var(--border);border-radius:10px;transition:border-color .2s;}
.succ-top-row:hover{border-color:var(--bord2);}
.succ-av{width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--gdim);border:1px solid rgba(212,175,55,.25);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--gold);font-family:var(--mono);flex-shrink:0;}
.succ-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.succ-top-name{flex:1;font-size:13px;font-weight:600;color:var(--text);}
.succ-top-dept{font-size:11px;color:var(--t3);}
.succ-top-tenure{font-family:var(--mono);font-size:13px;color:var(--gold);font-weight:700;}
/* Risk-dept cards — primary (1 person) */
.risk-dept-card{background:rgba(232,64,64,.05);border:1px solid rgba(232,64,64,.22);border-radius:12px;padding:14px 16px;margin-bottom:10px;animation:pIn .35s cubic-bezier(.16,1,.3,1) both;}
.risk-dept-card:hover{border-color:rgba(232,64,64,.4);transition:border-color .2s;}
.risk-dept-card-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.risk-dept-name{font-size:14px;font-weight:700;color:var(--text);}
.risk-dept-badge{font-size: 11px;font-weight:800;color:var(--red);background:var(--rdim);border:1px solid rgba(232,64,64,.25);padding:3px 9px;border-radius:8px;letter-spacing:.5px;}
.risk-dept-person{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(0,0,0,.12);border-radius:8px;margin-bottom:8px;}
.risk-dept-person-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--gold);font-family:var(--mono);background:var(--gdim);border:1px solid rgba(240,200,50,.2);flex-shrink:0;overflow:hidden;}
.risk-dept-person-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.risk-dept-person-name{font-size:13px;font-weight:600;color:var(--text);flex:1;}
.risk-dept-person-meta{font-size:11px;color:var(--t3);}
.risk-dept-tenure{font-family:var(--mono);font-size:11px;color:var(--amber);font-weight:700;}
.risk-dept-rec{font-size:11px;color:var(--t3);line-height:1.55;padding-top:6px;border-top:1px solid rgba(255,255,255,.06);margin-top:6px;}
.risk-dept-rec i{color:var(--amber);margin-right:5px;}
/* Secondary risk (2 people) */
.risk-dept-card.secondary{background:rgba(245,158,11,.04);border-color:rgba(245,158,11,.18);}
.risk-dept-card.secondary:hover{border-color:rgba(245,158,11,.35);}
.risk-dept-card.secondary .risk-dept-badge{color:var(--amber);background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.25);}
/* Hours compliance table */
.ti-hours-table{width:100%;border-collapse:collapse;font-size:12px;}
.ti-hours-table th{color:var(--t3);font-weight:600;font-size: 11px;letter-spacing:.5px;text-transform:uppercase;padding:4px 8px;text-align:left;border-bottom:1px solid var(--border);}
.ti-hours-table td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--t2);}
.ti-hours-table tr:last-child td{border-bottom:none;}
.ti-hours-table .name-col{font-weight:600;color:var(--text);}
.ti-comp-bar-outer{height:5px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;min-width:60px;}
.ti-comp-bar-fill{height:100%;border-radius:3px;transition:width .5s cubic-bezier(.16,1,.3,1);}
.ti-comp-ok{background:var(--green);}
.ti-comp-warn{background:var(--amber);}
.ti-comp-low{background:var(--red);}
@media(max-width:600px){.risk-dept-card-hdr{flex-wrap:wrap;gap:6px;}}

/* ═══════════════════════════════════════════════════
   DATA INTELLIGENCE WIDGET STRIP
   ═══════════════════════════════════════════════════ */
.di-widget-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 28px 28px;}
@media(max-width:900px){.di-widget-strip{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.di-widget-strip{grid-template-columns:1fr;}}
.di-widget{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px 18px;animation:wgIn .6s cubic-bezier(.16,1,.3,1) both;}
.di-widget-head{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.di-widget-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.di-widget-title{font-size:12px;font-weight:700;color:var(--t2);letter-spacing:.3px;}

/* Training Compliance arc ring */
.di-ring-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.di-ring-item{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:56px;}
.di-ring-svg{width:56px;height:56px;}
.di-ring-track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:5;stroke-linecap:round;stroke-dasharray:109.96 175.93;}/* 220° of r=28 */
.di-ring-fill{fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:109.96 175.93;stroke-dashoffset:109.96;transition:stroke-dashoffset .85s cubic-bezier(.16,1,.3,1);}
.di-ring-fill.gold{stroke:var(--gold);filter:drop-shadow(0 0 5px rgba(240,200,50,.4));}
.di-ring-fill.green{stroke:var(--green);filter:drop-shadow(0 0 5px rgba(76,214,87,.35));}
.di-ring-fill.amber{stroke:#f59e0b;filter:drop-shadow(0 0 5px rgba(245,158,11,.35));}
.di-ring-fill.red{stroke:var(--red);filter:drop-shadow(0 0 5px rgba(255,72,72,.35));}
.di-ring-label{font-size: 11px;color:var(--t3);text-align:center;max-width:60px;line-height:1.3;}
.di-ring-pct{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--text);}

/* Training-compliance department filter (Data Intelligence widget A). */
.di-tc-filter-row{
  display:flex;align-items:center;gap:8px;
  padding:6px 0 10px;margin-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.di-tc-filter-lbl{
  font-size:10px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--t3);
  display:flex;align-items:center;gap:5px;
}
.di-tc-filter-lbl i{font-size:9px;color:var(--gold);}
.di-tc-filter-sel{
  flex:1;min-width:0;
  padding:5px 8px;border-radius:7px;
  background:var(--panel2);border:1px solid var(--border);
  color:var(--t2);font-size:11.5px;font-weight:600;
  font-family:var(--body);cursor:pointer;
  max-width:220px;
}
.di-tc-filter-sel:focus{outline:none;border-color:var(--gold);}

/* Training-compliance signal pills (expired / expiring / failed). */
.di-sig-row{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:10px;
}
.di-sig-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:14px;
  font-size:10.5px;font-weight:700;letter-spacing:.2px;
  border:1px solid;
}
.di-sig-pill i{font-size:9px;}
.di-sig-pill.red{
  background:rgba(255,72,72,.10);
  border-color:rgba(255,72,72,.30);
  color:var(--red);
}
.di-sig-pill.amber{
  background:rgba(245,158,11,.10);
  border-color:rgba(245,158,11,.30);
  color:#f59e0b;
}

/* Document expiry buckets */
.di-expiry-cols{display:flex;gap:10px;}
.di-expiry-col{flex:1;border-radius:10px;padding:10px 10px 8px;display:flex;flex-direction:column;gap:6px;}
.di-expiry-col.expired{background:rgba(255,72,72,.07);border:1px solid rgba(255,72,72,.2);}
.di-expiry-col.soon{background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.2);}
.di-expiry-col.ok{background:rgba(76,214,87,.05);border:1px solid rgba(76,214,87,.15);}
.di-expiry-col-head{font-size: 11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;}
.di-expiry-col.expired .di-expiry-col-head{color:var(--red);}
.di-expiry-col.soon .di-expiry-col-head{color:var(--amber);}
.di-expiry-col.ok .di-expiry-col-head{color:var(--green);}
.di-expiry-num{font-family:var(--mono);font-size:22px;font-weight:700;line-height:1;}
.di-expiry-col.expired .di-expiry-num{color:var(--red);}
.di-expiry-col.soon .di-expiry-num{color:var(--amber);}
.di-expiry-col.ok .di-expiry-num{color:var(--green);}
.di-expiry-chips{display:flex;flex-direction:column;gap:3px;}
.di-expiry-chip{font-size:12px;color:var(--t3);word-break:break-word;line-height:1.35;}

/* HR Cases donut */
.di-cases-row{display:flex;align-items:center;gap:14px;}
.di-cases-donut-wrap{position:relative;width:72px;height:72px;flex-shrink:0;}
.di-cases-donut-wrap canvas{width:72px!important;height:72px!important;}
.di-cases-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.di-cases-total{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--text);line-height:1;}
.di-cases-total-lbl{font-size: 11px;color:var(--t4);text-transform:uppercase;letter-spacing:.5px;}
.di-cases-legend{display:flex;flex-direction:column;gap:5px;flex:1;}
.di-cases-legend-row{display:flex;align-items:center;gap:6px;}
.di-cases-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.di-cases-legend-lbl{font-size:11px;color:var(--t2);flex:1;}
.di-cases-legend-val{font-family:var(--mono);font-size:11px;color:var(--t3);}

/* ── 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:#43b14b;--gndim:rgba(67,177,75,0.12);--gnsoft:rgba(67,177,75,0.05);--red:#c42020;--rdim:rgba(196,32,32,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"] #hr-header{background:rgb(255,255,255)!important;border-color:rgba(4,80,30,0.14)!important;}
[data-theme="light"] #login-overlay{background:#f4f6f4!important;}[data-theme="light"] .login-card{background:rgba(255,255,255,0.92)!important;border-color:rgba(4,80,30,0.2)!important;}
[data-theme="light"] #pin-gate{background:#f4f6f4!important;}[data-theme="light"] .pin-card{background:rgba(255,255,255,0.90)!important;border-color:rgba(4,80,30,0.15)!important;}
[data-theme="light"] #pin-lockout,[data-theme="light"] #clearance-screen{background:#f4f6f4!important;}
[data-theme="light"] .glass{background:rgba(255,255,255,0.88)!important;border-color:rgba(4,80,30,0.13)!important;}
[data-theme="light"] input.gi,[data-theme="light"] textarea.gi,[data-theme="light"] select.gi{background:rgba(255,255,255,0.85)!important;border-color:rgba(4,80,30,0.20)!important;color:#000!important;}
[data-theme="light"] .btn-green{background:#43b14b;}[data-theme="light"] .btn-gold{background:#04501e;color:#fff;}
[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);--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"] #hr-header{background:rgb(236,236,236)!important;border-color:rgba(0,0,0,0.14)!important;}
[data-theme="browser"] #login-overlay{background:#ececec!important;}[data-theme="browser"] .login-card{background:rgba(255,255,255,0.92)!important;border-color:rgba(0,0,0,0.18)!important;}
[data-theme="browser"] #pin-gate{background:#ececec!important;}[data-theme="browser"] .pin-card{background:rgba(255,255,255,0.90)!important;border-color:rgba(0,0,0,0.15)!important;}
[data-theme="browser"] #pin-lockout,[data-theme="browser"] #clearance-screen{background:#ececec!important;}
[data-theme="browser"] .glass{background:rgba(255,255,255,0.92)!important;border-color:rgba(0,0,0,0.12)!important;}
[data-theme="browser"] input.gi,[data-theme="browser"] textarea.gi,[data-theme="browser"] select.gi{background:rgba(255,255,255,0.9)!important;border-color:rgba(0,0,0,0.18)!important;color:#000!important;}
[data-theme="browser"] .btn-green{background:#188a44;}[data-theme="browser"] .btn-gold{background:#0066cc;color:#fff;}
#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: 11px;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:testBannerIn .45s cubic-bezier(.16,1,.3,1) both;}
.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: 11px;font-weight:900;letter-spacing:.5px;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;}
/* PIPELINE CARDS */
.pl-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px 18px;cursor:pointer;transition:border-color .2s,transform .15s;}
.pl-card:hover{border-color:var(--gold);transform:translateY(-1px);}
.pl-card-hdr{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.pl-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--panel2);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:var(--gold);}
.pl-avatar img{width:100%;height:100%;object-fit:cover;}
.pl-name{font-weight:700;font-size:14px;color:var(--text);}
.pl-meta{font-size:11px;color:var(--t3);}
.pl-tracking{font-family:var(--mono);font-size: 11px;color:var(--gold);letter-spacing:1px;}
.pl-stage-bar{display:flex;gap:2px;margin-top:10px;}
.pl-stage-dot{flex:1;height:5px;border-radius:3px;background:var(--panel2);transition:background .3s;}
.pl-stage-dot.done{background:var(--green);}
.pl-stage-dot.current{background:var(--amber);animation:plPulse 2s infinite;}
.pl-stage-dot.rejected{background:var(--red);}
@keyframes plPulse{0%,100%{opacity:1;}50%{opacity:.5;}}
@keyframes pulseGreen{0%,100%{box-shadow:0 4px 16px rgba(34,197,94,.35);}50%{box-shadow:0 4px 28px rgba(34,197,94,.65);}}
.pl-stage-label{font-size: 11px;font-weight:700;letter-spacing:1px;margin-top:6px;text-transform:uppercase;}
.pl-sla-warn{font-size: 11px;font-weight:700;color:var(--amber);}
.pl-sla-danger{font-size: 11px;font-weight:700;color:var(--red);}
.pl-owner{font-size: 11px;color:var(--t3);display:flex;align-items:center;gap:4px;}
/* Offer-response badges on Stage 6/7/13 pipeline cards */
.pl-offer-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:10px;margin-top:5px;border:1px solid transparent;}
.pl-ob-sent{background:rgba(212,175,55,.12);color:var(--gold);border-color:rgba(212,175,55,.35);}
.pl-ob-accepted{background:rgba(76,214,87,.14);color:var(--green);border-color:rgba(76,214,87,.4);}
.pl-ob-declined{background:rgba(255,72,72,.13);color:var(--red);border-color:rgba(255,72,72,.4);}
.pl-ob-resend{background:rgba(247,217,78,.13);color:#f7d94e;border-color:rgba(247,217,78,.45);}
/* DRAWER SECTIONS */
.pd-section{margin-bottom:18px;padding:14px;background:var(--panel);border:1px solid var(--border);border-radius:12px;}
.pd-section-title{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--gold);margin-bottom:10px;text-transform:uppercase;}
.pd-field{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px;}
.pd-field:last-child{border-bottom:none;}
.pd-field .pd-k{color:var(--t3);}
.pd-field .pd-v{font-weight:600;color:var(--text);text-align:right;max-width:60%;}
.pd-ref-card{padding:12px;background:var(--panel2);border-radius:10px;margin-bottom:8px;border-left:3px solid var(--border);}
.pd-ref-card.verified{border-left-color:var(--green);}
.pd-ref-card.unsatisfactory{border-left-color:var(--red);}
.pd-ref-card.pending{border-left-color:var(--amber);}
/* STAGE PROGRESS IN DRAWER */
.pd-stages{display:flex;gap:0;margin-bottom:18px;overflow-x:auto;padding-bottom:6px;}
.pd-stage-step{flex:1;min-width:60px;text-align:center;position:relative;padding-top:24px;}
.pd-stage-step::before{content:'';position:absolute;top:10px;left:0;right:0;height:3px;background:var(--panel2);}
.pd-stage-step.done::before{background:var(--green);}
.pd-stage-step.current::before{background:var(--amber);}
.pd-stage-step.rejected::before{background:var(--red);}
.pd-stage-num{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size: 11px;font-weight:800;position:relative;z-index:1;background:var(--panel2);color:var(--t3);}
.pd-stage-step.done .pd-stage-num{background:var(--green);color:#fff;}
.pd-stage-step.current .pd-stage-num{background:var(--amber);color:#000;}
.pd-stage-step.rejected .pd-stage-num{background:var(--red);color:#fff;}
.pd-stage-lbl{font-size: 11px;margin-top:4px;color:var(--t3);line-height:1.25;word-break:break-word;}

/* GUIDED TOUR — Fixed viewport positioning */
#tour-overlay{display:none;position:fixed;inset:0;z-index:9999990;}
#tour-overlay.active{display:block;}
#tour-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:9999991;pointer-events:auto;transition:background .4s;}
#tour-overlay.active #tour-backdrop{background:rgba(0,0,0,.6);}
#tour-highlight{position:fixed;z-index:9999992;border:3px solid var(--gold);border-radius:12px;box-shadow:0 0 0 9999px rgba(0,0,0,.55),0 0 40px rgba(212,175,55,.35);transition:all .45s cubic-bezier(.16,1,.3,1);pointer-events:none;}
#tour-card{position:fixed;z-index:9999993;background:var(--void);border:1px solid rgba(212,175,55,.35);border-radius:18px;padding:24px 26px 20px;width:380px;max-width:calc(100vw - 32px);color:#fff;pointer-events:auto;box-shadow:0 24px 64px rgba(0,0,0,.8),0 0 0 1px rgba(212,175,55,.1);transition:top .45s cubic-bezier(.16,1,.3,1),left .45s cubic-bezier(.16,1,.3,1),opacity .3s;}
#tour-card.entering{animation:tourCardPop .35s cubic-bezier(.16,1,.3,1) both;}
@keyframes tourCardPop{from{opacity:0;transform:scale(.92) translateY(8px);}to{opacity:1;transform:scale(1) translateY(0);}}
#tour-card h3{font-size:15px;font-weight:800;color:var(--gold);margin:0 0 6px;letter-spacing:1px;}
#tour-card .tour-step-tag{display:inline-block;font-size: 11px;font-weight:800;letter-spacing:2px;color:var(--void);background:var(--gold);padding:2px 10px;border-radius:10px;margin-bottom:10px;}
#tour-card p{font-size:12px;color:rgba(255,255,255,.75);line-height:1.7;margin:0 0 18px;}
.tour-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.tour-progress-bar{width:100%;height:3px;background:rgba(255,255,255,.1);border-radius:2px;margin-bottom:14px;overflow:hidden;}
.tour-progress-fill{height:100%;background:var(--gold);border-radius:2px;transition:width .4s cubic-bezier(.16,1,.3,1);}
.tour-dots{display:flex;gap:5px;justify-content:center;}
.tour-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.15);transition:all .3s;}
.tour-dot.active{background:var(--gold);transform:scale(1.3);}
.tour-dot.done{background:rgba(67,177,75,.6);}
.tour-btn{padding:8px 18px;border-radius:20px;font-size:11px;font-weight:800;letter-spacing:1px;cursor:pointer;border:none;transition:all .2s;}
.tour-btn-prev{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.15);}
.tour-btn-prev:hover{background:rgba(255,255,255,.16);color:#fff;}
.tour-btn-next{background:var(--gold);color:var(--void);}
.tour-btn-next:hover{transform:scale(1.05);filter:brightness(1.1);}
.tour-btn-skip{position:absolute;top:12px;right:16px;background:none;color:rgba(255,255,255,.4);font-size:18px;cursor:pointer;border:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s;}
.tour-btn-skip:hover{color:#fff;background:rgba(255,255,255,.1);}
@media(max-width:600px){#tour-card{width:calc(100vw - 24px);left:12px!important;bottom:12px!important;top:auto!important;}}
.asd-tb{background:var(--panel);border:1px solid var(--border);color:var(--t2);width:32px;height:32px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:all .2s;}
.asd-tb:hover{background:var(--gold);color:var(--void);border-color:var(--gold);}
/* ── SYSTEM NOTIFICATION BELL ── */
.sys-notif-wrap{position:relative;display:inline-flex;align-items:center;}.sys-notif-btn{width:40px;height:40px;border-radius:50%;background:rgba(240,200,50,.04);border:1.5px solid rgba(240,200,50,.28);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--gold);font-size:16px;position:relative;transition:all .25s cubic-bezier(.16,1,.3,1);box-shadow:0 1px 6px rgba(0,0,0,.18);}.sys-notif-btn:hover{background:rgba(240,200,50,.12);border-color:rgba(240,200,50,.55);color:var(--gold);transform:translateY(-1px);box-shadow:0 4px 16px rgba(240,200,50,.18);}.sys-notif-btn.has-alerts{color:var(--gold);border-color:rgba(240,200,50,.65);background:rgba(240,200,50,.10);box-shadow:0 0 0 3px rgba(240,200,50,.10),0 4px 18px rgba(240,200,50,.28);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,#ff4848);color:#fff;font-size: 11px;font-weight:900;display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid var(--void,#060a06);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);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);}.snp-hdr-title{font-size: 11px;font-weight:900;letter-spacing:1.5px;color:var(--t3);text-transform:uppercase;}.snp-mark-btn{background:none;border:none;color:var(--t3);font-size: 11px;cursor:pointer;font-weight:700;padding:2px 7px;border-radius:4px;}.snp-mark-btn:hover{background:var(--panel);color:var(--text);}.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);}.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);font-size:12px;}.sn-unread-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex-shrink:0;align-self:center;margin-left:auto;}
.snp-section-label{padding:6px 14px 5px;font-size: 11px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:var(--t3);background:rgba(255,255,255,.025);border-top:1px solid var(--border);display:flex;align-items:center;gap:6px;}
.snp-section-label-sys{margin-top:0;}
.snp-hr-body{max-height:220px;overflow-y:auto;}
.snp-empty-sm{padding:12px 14px;}
@keyframes snHrSlideIn{from{opacity:0;transform:translateX(10px);}to{opacity:1;transform:none;}}
.sn-hr-item{display:flex;align-items:flex-start;gap:9px;padding:8px 14px;cursor:pointer;
  transition:background .15s;border-left:3px solid transparent;
  animation:snHrSlideIn .28s cubic-bezier(.16,1,.3,1) both;}
.sn-hr-item:hover{background:var(--panel);}
.sn-hr-item.sn-hr-red{border-left-color:var(--red,#ff4848);}
.sn-hr-item.sn-hr-amber{border-left-color:var(--amber,#f59e0b);}
.sn-hr-item.sn-hr-yellow{border-left-color:#eab308;}
.sn-hr-item.sn-hr-green{border-left-color:var(--green);}
.sn-hr-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;align-self:center;margin-top:2px;}
.sn-hr-dot-red{background:var(--red,#ff4848);}
.sn-hr-dot-amber{background:var(--amber,#f59e0b);}
.sn-hr-dot-yellow{background:#eab308;}
.sn-hr-text{font-size:11px;color:var(--t2);line-height:1.4;}
/* doc-type other reveal */
#doc-type-other-wrap{overflow:hidden;max-height:0;opacity:0;
  transition:max-height .3s cubic-bezier(.16,1,.3,1),opacity .25s cubic-bezier(.16,1,.3,1);}
#doc-type-other-wrap.visible{max-height:60px;opacity:1;}
/* IT block action buttons — ensure they stack on mobile */
@media(max-width:540px){
  .doc-block-card-actions{flex-direction:column!important;width:100%;}
  .doc-block-card-actions .btn{width:100%;justify-content:center;}
}
/* ── CERTIFICATE REGISTRY ── */
.cert-tab-nav{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;}
.cert-tab-btn{padding:8px 18px;border-radius:20px;font-size:11px;font-weight:800;letter-spacing:1px;cursor:pointer;background:var(--panel);border:1px solid var(--border);color:var(--t2);transition:all .2s;}
.cert-tab-btn.active{background:var(--gold);color:var(--void);border-color:var(--gold);}
.cert-tab-btn:hover:not(.active){background:var(--panel2);color:var(--text);}
.cert-trace-wrap{max-width:700px;}
.cert-trace-input-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}

/* ── HR Offboarding Initiation Drawer ── */
#hr-ob-drawer{position:fixed;top:0;right:-560px;width:520px;max-width:calc(100vw - 24px);height:100vh;background:var(--void);border-left:1px solid var(--border);z-index:700000;overflow-y:auto;transition:right .4s cubic-bezier(.16,1,.3,1);box-shadow:-20px 0 60px rgba(0,0,0,.5);}
#hr-ob-drawer.open{right:0;}
#hr-ob-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:699999;display:none;-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);}
#hr-ob-overlay.open{display:block;}
#hr-ob-drawer .drawer-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--void);z-index:1;}
#hr-ob-drawer .drawer-title{font-size:15px;font-weight:800;letter-spacing:.5px;color:var(--text);}
#hr-ob-drawer .drawer-body{padding:24px;}
@media(max-width:600px){#hr-ob-drawer{width:100%;right:-100%;}}

/* ── fi form classes (used by HR offboarding drawer) ── */
.fi-label{font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--t3);display:block;margin-bottom:6px;text-transform:uppercase;}
.fi{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);transition:border-color .2s,background .2s;outline:none;box-sizing:border-box;}
.fi:focus{border-color:rgba(212,175,55,.4);background:rgba(255,255,255,.08);}
.fi-ta{resize:vertical;min-height:80px;}
.fi-group{margin-bottom:16px;}
.fi-select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23f0c832' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;}
.probation-badge{background:linear-gradient(135deg,var(--red),var(--amber));color:#fff;font-size:7.5px;font-weight:800;padding:2px 5px;border-radius:3px;margin-left:5px;box-shadow:0 0 6px var(--rdim);vertical-align:middle;}

/* ── FLAG INDICATORS ── */
.wf-flag-badge{background:rgba(232,64,64,.12)!important;border:1px solid rgba(232,64,64,.3)!important;color:var(--red)!important;font-size: 11px!important;padding:2px 7px!important;border-radius:20px!important;display:inline-flex!important;align-items:center!important;gap:3px!important;vertical-align:middle!important;}
.wf-flag-note{display:block;font-size:12px;color:var(--red);opacity:.85;margin-top:2px;word-break:break-word;line-height:1.35;max-width:320px;}
.wf-flag-btn{transition:all .18s;}
.wf-flag-btn.flagged{color:var(--red)!important;border-color:rgba(232,64,64,.4)!important;background:rgba(232,64,64,.08)!important;}

/* ══════════════════════════════════════════════════════
   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,#43b14b 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:11px; 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: 11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; flex-shrink:0;
}
.pres-card__badge--active { background:rgba(67,177,75,.12); color:#43b14b; 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: 11px; color:var(--t3); letter-spacing:.5px; text-transform:uppercase; margin-top:2px; }
.pres-card--active .pres-card__stat-val.elapsed { color:#43b14b; }

/* ══════════════════════════════════════════════════════
   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:#43b14b;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: 11px;font-family:var(--mono);padding:3px 9px;border-radius:6px;background:rgba(255,255,255,.05);color:var(--t2);border:1px solid var(--border); }
.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,.72);-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);animation:presModalBgIn .3s both; }
.pres-modal-wrap.pm-closing { animation:presModalBgOut .3s forwards; }
.pres-modal-box { background:var(--void,#0d0d14);border:1px solid var(--border);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; }
.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:12px;color:var(--t3);letter-spacing:.3px;margin-bottom:8px; }
.pres-modal-close { width:34px;height:34px;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: 11px;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:#43b14b; }
.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;} }

/* ── HR GUIDES ── */
.hr-guides-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; }
.hr-guide-card { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:14px; transition:border-color .2s, transform .2s; animation:fadeSlideUp .4s cubic-bezier(.16,1,.3,1) both; }
.hr-guide-card:hover { border-color:var(--gold); transform:translateY(-2px); }
.hr-guide-card.hr-guide-coming { opacity:.72; }
.hr-guide-card.hr-guide-coming:hover { border-color:var(--border); transform:none; }
.hr-guide-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.hr-guide-body { flex:1; display:flex; flex-direction:column; gap:6px; }
.hr-guide-title { font-size:14px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; flex-wrap:wrap; line-height:1.3; }
.hr-guide-soon { font-size: 11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; background:rgba(240,200,50,.1); color:var(--gold); border:1px solid rgba(240,200,50,.2); padding:2px 8px; border-radius:10px; }
.hr-guide-desc { font-size:12px; color:var(--t2); line-height:1.6; }
.hr-guide-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.hr-guide-tag { font-size: 11px; font-weight:600; letter-spacing:.5px; background:rgba(255,255,255,.05); border:1px solid var(--border); color:var(--t3); padding:2px 9px; border-radius:8px; }
.hr-guide-actions { display:flex; gap:8px; }
@media(max-width:640px) { .hr-guides-grid{grid-template-columns:1fr;} }

/* ════════════════════════════════════════════════════════════════
   REFERENCE REQUEST BOARD
════════════════════════════════════════════════════════════════ */

/* Card grid */
.ref-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* Applicant card */
.ref-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  animation: fadeSlideUp .4s cubic-bezier(.16,1,.3,1) both;
  transition: border-color .2s cubic-bezier(.16,1,.3,1),
              box-shadow .2s cubic-bezier(.16,1,.3,1);
  position: relative;
  overflow: hidden;
}
.ref-card:hover { border-color: rgba(240,200,50,.35); box-shadow: 0 4px 24px rgba(0,0,0,.18); }
.ref-card.ref-card-received  { border-left: 3px solid #14b8a6; }
.ref-card.ref-card-pending   { border-left: 3px solid var(--amber); }
.ref-card.ref-card-reviewed  { border-left: 3px solid var(--green); }
.ref-card.ref-card-expired   { border-left: 3px solid var(--red); opacity: .75; }
.ref-card.ref-card-in-review { border-left: 3px solid var(--indigo); }
.ref-card.ref-card-unsent    { border-left: 3px solid var(--border); }

/* Card top row */
.ref-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.ref-card-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(240,200,50,.1);
  border: 1px solid rgba(240,200,50,.2);
  color: var(--gold);
  font-family: var(--disp);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.ref-card-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.ref-card-info { flex: 1; min-width: 0; }
.ref-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
  line-height: 1.3;
  margin-bottom: 2px;
}
.ref-card-code {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 3px;
}
.ref-card-sub { font-size: 11px; color: var(--t3); line-height: 1.4; word-break: break-word; }

.ref-card-status-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}

/* Status badges */
.ref-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.ref-badge-pending   { background: rgba(245,158,11,.12); color: var(--amber); border: 1px solid rgba(245,158,11,.25); }
.ref-badge-received  { background: rgba(20,184,166,.12); color: #14b8a6; border: 1px solid rgba(20,184,166,.25); }
.ref-badge-in-review { background: var(--idim); color: var(--indigo); border: 1px solid var(--iglow); }
.ref-badge-reviewed  { background: rgba(34,197,94,.1); color: var(--green); border: 1px solid rgba(34,197,94,.2); }
.ref-badge-expired   { background: rgba(232,64,64,.1); color: var(--red); border: 1px solid rgba(232,64,64,.2); }
.ref-badge-unsent    { background: rgba(255,255,255,.06); color: var(--t3); border: 1px solid var(--border); }

/* Timeline strip */
.ref-timeline {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 10px 0;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ref-tl-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  min-width: 64px;
}
.ref-tl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  border: 2px solid var(--border);
  transition: background .3s;
  margin-bottom: 4px;
}
.ref-tl-dot.done  { background: var(--green); border-color: var(--green); }
.ref-tl-dot.active { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
.ref-tl-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .5px;
  text-align: center;
  line-height: 1.3;
}
.ref-tl-date {
  font-size: 11px;
  color: var(--t3);
  font-family: var(--mono);
  margin-top: 1px;
  text-align: center;
}
.ref-tl-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 4px;
  margin-bottom: 14px;
  min-width: 20px;
  transition: background .3s;
}
.ref-tl-line.done { background: var(--green); }

/* Next action */
.ref-next-action {
  font-size: 11px;
  color: var(--t3);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 12px;
  padding: 7px 11px;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  border: 1px solid var(--border);
  line-height: 1.4;
}
.ref-next-action i { flex-shrink: 0; font-size: 11px; }
.ref-next-action strong { color: var(--text); }

/* Action buttons row */
.ref-card-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.ref-card-actions .btn { font-size: 11.5px; padding: 7px 13px; min-height: 36px; flex: 1; justify-content: center; min-width: 100px; }

/* Sent-by info */
.ref-sent-by {
  font-size: 11px;
  color: var(--t3);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Empty state */
.ref-empty-state {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 24px;
  font-size: 13px;
  color: var(--t3);
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.ref-empty-state i { font-size: 18px; opacity: .5; }

/* Review panel section labels */
.ref-panel-sec-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Review panel grid (label + value pairs) */
.ref-panel-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.ref-panel-row {
  display: flex;
  gap: 0;
  background: var(--panel);
}
.ref-panel-row:hover { background: var(--panel2); }
.ref-panel-key {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--t3);
  padding: 9px 12px;
  min-width: 130px;
  flex-shrink: 0;
  line-height: 1.4;
  border-right: 1px solid var(--border);
  word-break: break-word;
}
.ref-panel-val {
  font-size: 12.5px;
  color: var(--text);
  padding: 9px 12px;
  flex: 1;
  line-height: 1.55;
  word-break: break-word;
}

/* Review panel animations */
@keyframes refBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes refDrawerIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes refDrawerOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

/* Responsive */
@media (max-width: 820px) {
  .ref-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .ref-card { padding: 14px; }
  .ref-card-actions .btn { flex: none; width: 100%; }
  .ref-panel-key { min-width: 100px; font-size: 9px; }
  .ref-panel-val { font-size: 12px; }
  #ref-review-drawer { width: 100vw; }
}

@media (max-width: 400px) {
  .ref-card { padding: 12px; }
  .ref-timeline { padding: 8px 10px; }
  .ref-tl-node { min-width: 54px; }
}

/* ================================================================
   PREMIUM ANIMATIONS — Standard keyframe library
   All entrances use cubic-bezier(.16,1,.3,1) per design spec.
================================================================ */
@keyframes cvIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wgIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes scIn {
  from { opacity: 0; transform: translateY(10px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sbIn {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes shim {
  0%   { background-position: -400% 0; }
  100% { background-position:  400% 0; }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .2; }
}
@keyframes snItemIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lblFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Section header entrance ── */
.sec-head {
  animation: cvIn .52s cubic-bezier(.16,1,.3,1) both .04s;
}

/* ── Glass card entrance + hover ── */
.glass, .glass-gold, .glass-green {
  animation: wgIn .5s cubic-bezier(.16,1,.3,1) both;
  transition: border-color .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s cubic-bezier(.16,1,.3,1);
}
.glass:hover, .glass-gold:hover, .glass-green:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
/* Stagger for sibling glass cards — first 8 children get individual offsets */
.glass:nth-child(1),.glass-gold:nth-child(1),.glass-green:nth-child(1){animation-delay:.05s;}
.glass:nth-child(2),.glass-gold:nth-child(2),.glass-green:nth-child(2){animation-delay:.09s;}
.glass:nth-child(3),.glass-gold:nth-child(3),.glass-green:nth-child(3){animation-delay:.13s;}
.glass:nth-child(4),.glass-gold:nth-child(4),.glass-green:nth-child(4){animation-delay:.17s;}
.glass:nth-child(5),.glass-gold:nth-child(5),.glass-green:nth-child(5){animation-delay:.21s;}
.glass:nth-child(6),.glass-gold:nth-child(6),.glass-green:nth-child(6){animation-delay:.25s;}
.glass:nth-child(7),.glass-gold:nth-child(7),.glass-green:nth-child(7){animation-delay:.29s;}
.glass:nth-child(8),.glass-gold:nth-child(8),.glass-green:nth-child(8){animation-delay:.33s;}

/* ── Skeleton shimmer (standardised) ── */
.skel {
  background: linear-gradient(90deg, var(--panel) 25%, rgba(255,255,255,.07) 50%, var(--panel) 75%);
  background-size: 400% 100%;
  animation: shim 1.6s cubic-bezier(.16,1,.3,1) infinite;
  border-radius: 6px;
}

/* ── Status pip blink ── */
.pip.pip-green { animation: blink 2.4s cubic-bezier(.16,1,.3,1) infinite; }
.pip.pip-red   { animation: blink 1.3s cubic-bezier(.16,1,.3,1) infinite; }
.pip.pip-gold  { animation: blink 2.8s cubic-bezier(.16,1,.3,1) infinite; }

/* ── Nav item entrance on page load ── */
#sec-nav .snav-item {
  animation: snItemIn .42s cubic-bezier(.16,1,.3,1) both .07s;
}
.snav-lbl {
  animation: lblFadeIn .55s cubic-bezier(.16,1,.3,1) both .12s;
}
.snav-div {
  animation: lblFadeIn .4s cubic-bezier(.16,1,.3,1) both .06s;
}

/* ════════════════════════════════════════════════════════════════
   ENTERPRISE PAGE-LOAD REVEAL (added 2026-05-30)
   A cohesive, premium boot sequence layered on the existing header
   drop (hdrDrop) + content card entrances. Two refinements:
   (1) the section-nav items cascade left→right after the header lands
       (was a simultaneous pop), and
   (2) a one-shot gold "ready" sweep travels across the top edge, the
       recognised enterprise "view composed" cue, then fades itself out.
   Scoped to this page via the body[data-page-key] attribute. Fully
   reduced-motion-safe (see the guard at the end) and non-blocking — the
   sweep is a 2px line that removes itself; it never gates interaction.
   ════════════════════════════════════════════════════════════════ */
/* (1) Refine the nav entrance into a staggered L→R cascade, sequenced
   just after the .7s header drop so the chrome settles top-down. */
#sec-nav .snav-item:nth-child(1){animation-delay:.20s;}
#sec-nav .snav-item:nth-child(2){animation-delay:.24s;}
#sec-nav .snav-item:nth-child(3){animation-delay:.28s;}
#sec-nav .snav-item:nth-child(4){animation-delay:.32s;}
#sec-nav .snav-item:nth-child(5){animation-delay:.36s;}
#sec-nav .snav-item:nth-child(6){animation-delay:.40s;}
#sec-nav .snav-item:nth-child(7){animation-delay:.44s;}
#sec-nav .snav-item:nth-child(8){animation-delay:.48s;}
#sec-nav .snav-item:nth-child(9){animation-delay:.52s;}
#sec-nav .snav-item:nth-child(10){animation-delay:.56s;}
#sec-nav .snav-item:nth-child(11){animation-delay:.60s;}
#sec-nav .snav-item:nth-child(12){animation-delay:.64s;}

/* (2) One-shot gold "ready" sweep — see #hr-header::after below, where the
   header's existing gold sheen animates across on load. (We reuse that element
   rather than add a body::before, which is already the page background layer.) */

/* ── Nav item hover — micro-lift ── */
.snav-item:not(.active):hover {
  color: var(--text);
  background: rgba(255,255,255,.04);
  border-radius: 4px;
}

/* ── Button interactions ── */
.btn {
  transition: opacity .22s cubic-bezier(.16,1,.3,1), transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s cubic-bezier(.16,1,.3,1);
}
.btn:not(:disabled):active {
  transform: scale(.96);
}

/* ── Form input focus glow ── */
.gi:focus, .gi-ta:focus, .ig:focus {
  box-shadow: 0 0 0 3px rgba(240,200,50,.15);
}

/* ── KPI pill entrance stagger (supplements existing kpiIn) ── */
.kpi-pill:nth-child(1){animation-delay:.06s;}
.kpi-pill:nth-child(2){animation-delay:.10s;}
.kpi-pill:nth-child(3){animation-delay:.14s;}
.kpi-pill:nth-child(4){animation-delay:.18s;}
.kpi-pill:nth-child(5){animation-delay:.22s;}
.kpi-pill:nth-child(6){animation-delay:.26s;}
.kpi-pill:nth-child(7){animation-delay:.30s;}
.kpi-pill:nth-child(8){animation-delay:.34s;}

/* ── Modal open animation (already defined — add backdrop blur entrance) ── */
.modal-overlay {
  animation: fadeIn .28s cubic-bezier(.16,1,.3,1) both;
}

/* ================================================================
   MOBILE — Comprehensive coverage
   Breakpoints: 768 / 640 / 540 / 400px  (320px minimum floor)
================================================================ */

/* 768px — already defined above; add missing items */
@media (max-width: 768px) {
  /* Touch targets — keep ≥40px (passes Apple HIG 44pt with padding) without
     bricking the row. Override aggressive existing rules that pushed every
     non-xs button to 44px min-height combined with full-width — that combo
     read as oversized stacked buttons on iPhone. */
  .btn:not(.btn-xs):not(.btn-sm) { min-height: 40px; }
  .btn-sm           { min-height: 36px; }
  .btn-xs           { min-height: 30px; }
  .snav-item        { min-height: 42px; padding: 0 12px; }
  .gi, .gi-ta, .ig  { min-height: 42px; font-size: 16px; } /* 16px prevents iOS zoom */

  /* Section nav group labels — smaller on mobile */
  .snav-lbl { font-size: 8px; padding: 0 2px 0 8px; letter-spacing: 1.5px; }
  .snav-div  { margin: 8px 3px; }
}

/* 640px — core mobile layout */
@media (max-width: 640px) {
  /* All section padding normalised */
  .page-section, [id$="-section"] { padding-left: 12px !important; padding-right: 12px !important; }

  /* Modals full-width on mobile */
  .modal-box { max-width: calc(100vw - 16px) !important; margin: 8px auto !important; border-radius: 14px !important; }
  .modal-actions { flex-direction: column; gap: 8px; }
  .modal-actions .btn { width: 100%; }

  /* Glass cards — reduce padding */
  .glass, .glass-gold, .glass-green { padding: 14px !important; }

  /* Drawers full-width */
  #profile-drawer, #prv-drawer { width: 100% !important; right: -100% !important; }
  #profile-drawer.open, #prv-drawer.open { right: 0 !important; }

  /* Wide tables — horizontal scroll */
  .wf-table-wrap, .dtbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wf-table, .dtbl { min-width: 520px; }

  /* KPI strip — 2 columns */
  #kpi-strip { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .kpi-pill  { padding: 12px 14px; }

  /* Pipeline drawer full-width */
  #pipeline-drawer { width: 100% !important; }

  /* Page pill hidden */
  .page-pill { display: none !important; }
}

/* 540px — single column everything */
@media (max-width: 540px) {
  /* All grids → single column */
  .charts-grid, .perf-cards-grid, .recruit-grid,
  .di-grid, .time-intel-grid, .exit-grid, .succ-grid,
  .cert-trace-input-row, .hr-guides-grid { grid-template-columns: 1fr !important; }

  /* KPI strip — still 2 col but smaller */
  #kpi-strip { grid-template-columns: 1fr 1fr !important; }
  .kpi-pill  { min-width: unset !important; }

  /* Sec-head stacking */
  .sec-head { flex-direction: column; align-items: flex-start !important; gap: 10px; }
  .sec-head .btn-group, .sec-head > div:last-child { width: 100%; }
  /* Buttons in section headers: flex-fit side-by-side instead of stretching
     to the full row width. `flex:1 1 auto; min-width:fit-content` keeps each
     button at the natural label size; if there's only one it grows to fill
     the row, if there are two they sit side-by-side. */
  .sec-head .btn-group { display: flex; flex-wrap: wrap; gap: 6px; }
  .sec-head .btn-group .btn { flex: 1 1 auto; min-width: fit-content; justify-content: center; }

  /* Tables — drop min-width so they can adapt */
  .wf-table, .dtbl { min-width: 420px; font-size: 11px; }
  .wf-table th, .wf-table td, .dtbl th, .dtbl td { padding: 7px 6px; }

  /* Modals */
  .modal-box { border-radius: 12px !important; }
  .modal-close { width: 36px; height: 36px; font-size: 16px; }

  /* Nav labels hidden at this width */
  .snav-lbl { display: none; }
  .snav-div  { margin: 6px 2px; }

  /* Action rows — buttons sit side-by-side, wrap to a second line only
     when they actually overflow. Previously the explicit
     `flex-direction:column; width:100%` made every action button a
     full-width brick — three actions per card became three giant
     stacked bars, which read as "really big buttons". */
  .card-actions, .action-row { flex-wrap: wrap; gap: 6px; }
  .card-actions .btn, .action-row .btn {
    flex: 1 1 auto;
    min-width: fit-content;
    justify-content: center;
  }
}

/* 400px — minimum floor (320px supported) */
@media (max-width: 400px) {
  /* Header compress */
  #hr-header { padding: 0 10px !important; }
  .hdr-user-chip span { display: none; } /* show avatar only */

  /* Nav items tighter */
  .snav-item { padding: 0 9px; font-size: 9px; letter-spacing: .8px; min-height: 40px; }
  .snav-item i { font-size: 11px; }

  /* KPI strip → single column at 400px */
  #kpi-strip { grid-template-columns: 1fr !important; }

  /* Cards */
  .glass, .glass-gold, .glass-green { padding: 12px !important; border-radius: 12px !important; }

  /* Tables */
  .wf-table, .dtbl { font-size: 11px; }
  .wf-table th, .wf-table td { padding: 5px 4px; }

  /* Modals */
  .modal-box { margin: 4px !important; border-radius: 10px !important; max-height: calc(100vh - 16px); overflow-y: auto; }

  /* Section padding floor */
  .page-section, [id$="-section"] { padding-left: 10px !important; padding-right: 10px !important; }
}

/* ── Onboarding step grid ──────────────────────────────────────── */
.ob-steps-grid { display:flex; flex-direction:column; gap:6px; }
.ob-step {
  display:flex; align-items:center; gap:8px; font-size:13px;
}
.ob-step-done { color:var(--t3); }
.ob-step-done .ob-step-lbl { text-decoration:line-through; }
@media(max-width:640px) {
  .ob-steps-grid {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:4px;
  }
  .ob-step {
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:3px;
    padding:6px 3px;
    border-radius:6px;
    background:rgba(255,255,255,.04);
    text-align:center;
    font-size:10px;
    min-height:54px;
  }
  .ob-step i { font-size:15px !important; flex-shrink:0; }
  .ob-step-lbl {
    line-height:1.25;
    word-break:break-word;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
  }
}

/* ── Pre-Registration candidates — horizontal 3-per-row grid ─── */
.prereg-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* nudge scrollbar below content */
  padding-bottom: 6px;
}
.prereg-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 14px;
  /* ensure the grid never collapses below 3 columns */
  min-width: calc(3 * 280px + 2 * 14px);
}
/* On wide desktop: allow each card up to 380px so they don't stretch absurdly */
@media(min-width:1200px) {
  .prereg-cards-grid {
    grid-template-columns: repeat(3, minmax(300px, 380px));
    min-width: unset;
  }
}

/* ================================================================
   SECTION-SPECIFIC MOBILE FIXES
   ================================================================ */

/* ── Broadcast section: stack 2-col compose/history grid ── */
@media(max-width:640px) {
  #broadcast-section > div[style*="grid-template-columns:1fr 1fr"],
  #broadcast-section > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Broadcast compose button row: stretch to full width */
  #broadcast-section .glass > div[style*="display:flex"][style*="gap:8px"] {
    flex-direction: column;
  }
  #broadcast-section .glass > div[style*="display:flex"][style*="gap:8px"] .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Offboarding section: stack title row so button doesn't get squashed ── */
@media(max-width:640px) {
  #offboarding-section > div[style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  #offboarding-section #btn-initiate-offboard {
    width: 100%;
    justify-content: center;
  }
}

/* ── Workforce Intelligence: collapse 3-col header row ── */
@media(max-width:820px) {
  #intel-inner > div[style*="grid-template-columns:260px 1fr 1fr"],
  #intel-inner > div[style*="grid-template-columns: 260px 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media(max-width:540px) {
  #intel-inner > div[style*="grid-template-columns:260px 1fr 1fr"],
  #intel-inner > div[style*="grid-template-columns: 260px 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* At-risk cards: fill container, remove fixed min-width */
  #intel-inner div[style*="min-width:180px"] {
    min-width: unset !important;
    width: 100%;
    box-sizing: border-box;
  }
  /* At-risk flex wrap → column */
  #intel-inner .glass > div[style*="display:flex"][style*="flex-wrap:wrap"] {
    flex-direction: column;
  }
}

/* ═══════════════════════════════════════════════════
   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);}}
/* (Removed a duplicate `@keyframes blink{…opacity:.35}` here — it silently
   re-defined the canonical pip blink (opacity .2, line ~2000) page-wide because
   same-named @keyframes resolve to the last one. Canonical blink now applies
   consistently to every .pip. Animation audit 2026-05-30.) */

/* KPI row */
.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);}

/* Case row */
.ddcp-case-row{transition:background .2s,border-color .2s,transform .2s;}
.ddcp-case-row:hover{transform:translateX(3px);}

/* Stage badge (inline chip) */
.ddcp-stage-badge{letter-spacing:0;}

/* Progression rail horizontal scroll */
.ddcp-rail{scrollbar-width:thin;-webkit-overflow-scrolling:touch;}
.ddcp-rail::-webkit-scrollbar{height:3px;}
.ddcp-rail::-webkit-scrollbar-thumb{background:rgba(212,175,55,.2);border-radius:2px;}

/* Filter strip */
.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:11px;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:var(--gold);}
.ddcp-chip.red.active{background:rgba(255,72,72,.12);border-color:rgba(255,72,72,.4);color:var(--red);}

/* Outcome option hover */
.ddcp-outcome-opt:hover{border-color:rgba(255,255,255,.25) !important;background:rgba(255,255,255,.06) !important;}

/* Section header row */
.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-filter-strip{gap:5px;}
  .ddcp-chip{padding:5px 10px;font-size:10px;}
}
@media(max-width:400px){.ddcp-kpi-row{grid-template-columns:1fr 1fr;}}

/* ═══════════════════════════════════════════════════
   RECRUITMENT PROGRESS BOARD
   ═══════════════════════════════════════════════════ */

/* Section background */
#recruitment-board-section{
  background:
    radial-gradient(ellipse at 0% 0%,rgba(240,200,50,.04) 0%,transparent 55%),
    radial-gradient(ellipse at 100% 100%,rgba(76,214,87,.03) 0%,transparent 55%);
}

/* Stats strip */
.rp-stats-strip{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
.rp-stat-card{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.1);flex:1;min-width:130px;animation:wgIn .5s cubic-bezier(.16,1,.3,1) both;}
.rp-stat-card-warn{border-color:rgba(255,72,72,.2);background:rgba(255,72,72,.05);}
.rp-stat-card-amber{border-color:rgba(245,158,11,.2);background:rgba(245,158,11,.05);}
.rp-stat-card-green{border-color:rgba(76,214,87,.2);background:rgba(76,214,87,.05);}
.rp-stat-card i{font-size:20px;flex-shrink:0;}
.rp-stat-val{font-family:var(--mono);font-size:22px;font-weight:700;line-height:1;}
.rp-stat-lbl{font-size: 11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--t3);margin-top:3px;}

/* Filter bar */
.rp-filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.rp-search-wrap{display:flex;align-items:center;gap:8px;flex:1;min-width:180px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:0 12px;}
.rp-search-input{background:none;border:none;outline:none;color:var(--text);font-family:var(--body);font-size:13px;padding:9px 0;width:100%;}
.rp-search-input::placeholder{color:var(--t3);}
.rp-select{background:var(--panel);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:var(--body);font-size:12px;padding:9px 12px;outline:none;cursor:pointer;min-width:160px;}
.rp-select option{background:var(--deep);}
.rp-toggle-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:10px;border:1px solid var(--border);background:var(--panel);color:var(--t3);font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1);}
.rp-toggle-btn.active{background:var(--gdim);border-color:var(--gglow);color:var(--gold);}
.rp-toggle-btn i{font-size:11px;}

/* Table wrapper */
.rp-table-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--border);-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.rp-table-wrap::-webkit-scrollbar{height:4px;}
.rp-table-wrap::-webkit-scrollbar-thumb{background:rgba(212,175,55,.2);border-radius:2px;}

/* Table */
.rp-table{width:100%;border-collapse:collapse;min-width:860px;}
.rp-thead-row th{background:rgba(0,0,0,.3);border-bottom:1px solid var(--border);}
.rp-th{padding:10px 14px;text-align:left;font-size: 11px;font-weight:800;letter-spacing:.5px;color:var(--t3);text-transform:uppercase;}
.rp-th-name{min-width:200px;position:sticky;left:0;z-index:2;background:rgba(10,20,9,.95);}
.rp-th-action{width:44px;padding:10px 8px;}

/* Group header row */
.rp-group-hdr{cursor:pointer;user-select:none;transition:background .2s;}
.rp-group-hdr:hover{background:rgba(255,255,255,.04);}
.rp-group-hdr td{padding:9px 14px;font-size: 11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;border-top:1px solid var(--border);border-bottom:1px solid transparent;background:var(--void);position:relative;z-index:2;}
.rp-group-hdr.expanded td{border-bottom:1px solid var(--border);}
.rp-group-chevron{float:right;transition:transform .25s cubic-bezier(.16,1,.3,1);}
.rp-group-hdr.expanded .rp-group-chevron{transform:rotate(180deg);}
.rp-group-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:20px;font-size: 11px;font-weight:800;padding:0 5px;margin-left:7px;vertical-align:middle;}

/* Data rows */
.rp-row{transition:background .15s;cursor:pointer;}
.rp-row:hover td{background:rgba(255,255,255,.04);}
.rp-row.hidden{display:none;}
.rp-cell{padding:10px 14px;font-size:13px;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:middle;}
.rp-cell-name{position:sticky;left:0;z-index:1;background:var(--void);min-width:200px;}
.rp-row:hover .rp-cell-name{background:#0f1a0d;}

/* Name cell innards */
.rp-av{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--gdim);border:1px solid var(--gglow);color:var(--gold);font-size:11px;font-weight:800;flex-shrink:0;overflow:hidden;}
.rp-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.rp-name-wrap{display:flex;align-items:center;gap:9px;}
.rp-name-text{font-weight:700;font-size:13px;line-height:1.2;}
.rp-name-code{font-family:var(--mono);font-size: 11px;color:var(--t3);margin-top:2px;}

/* Pills */
.rp-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size: 11px;font-weight:700;letter-spacing:.3px;border:1px solid transparent;}
/* 72hr SLA staleness pill — shown next to the tracking code on the pipeline row */
.rp-stale-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:10px;font-size:10px;font-weight:800;letter-spacing:.3px;margin-left:6px;vertical-align:middle;}
.rp-stale-pill.rp-stale-red{background:rgba(255,72,72,.12);border:1px solid rgba(255,72,72,.45);color:var(--red);}
.rp-stale-pill.rp-stale-amber{background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.40);color:var(--amber);}
.rp-row.rp-row-stale{box-shadow:inset 3px 0 0 var(--red);}
.rp-pill-s1,.rp-pill-s2{background:var(--sdim);border-color:rgba(148,163,184,.25);color:var(--slate);}
.rp-pill-s3{background:var(--gdim);border-color:var(--gglow);color:var(--gold);}
.rp-pill-s4,.rp-pill-s5{background:var(--pdim);border-color:rgba(167,139,250,.28);color:var(--purple);}
.rp-pill-s6,.rp-pill-s7{background:rgba(240,200,50,.14);border-color:rgba(240,200,50,.35);color:var(--gold);font-weight:800;}
.rp-pill-s8{background:var(--odim);border-color:rgba(251,146,60,.28);color:var(--orange);}
.rp-pill-s9,.rp-pill-s10{background:var(--cdim);border-color:rgba(45,212,191,.28);color:var(--cyan);}
.rp-pill-s11{background:rgba(76,214,87,.1);border-color:rgba(76,214,87,.28);color:var(--green);}
.rp-pill-s12{background:rgba(255,72,72,.1);border-color:rgba(255,72,72,.28);color:var(--red);}
.rp-pill-s13{background:var(--panel);border-color:var(--border);color:var(--t3);}

/* SLA colours */
.rp-sla-ok{background:rgba(76,214,87,.1);border-color:rgba(76,214,87,.28);color:var(--green);}
.rp-sla-warn{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.28);color:var(--amber);}
.rp-sla-over{background:rgba(255,72,72,.1);border-color:rgba(255,72,72,.28);color:var(--red);}
.rp-sla-none{color:var(--t3);font-size:12px;}

/* Portal colours */
.rp-portal-yes{background:rgba(76,214,87,.1);border-color:rgba(76,214,87,.28);color:var(--green);}
.rp-portal-rec{background:var(--odim);border-color:rgba(251,146,60,.28);color:var(--orange);}
.rp-portal-del{background:rgba(255,72,72,.1);border-color:rgba(255,72,72,.28);color:var(--red);}
.rp-portal-no{color:var(--t3);font-size:12px;}

/* SLA edit button (inline with SLA cell) */
.rp-sla-edit-btn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;border-radius:5px;border:1px solid transparent;background:transparent;color:var(--t3);cursor:pointer;font-size: 11px;margin-left:5px;transition:all .2s cubic-bezier(.16,1,.3,1);vertical-align:middle;}
.rp-sla-edit-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--gdim);}
.rp-th-sla{min-width:130px;}

/* Refs */
.rp-refs-ok{color:var(--green);font-weight:700;}
.rp-refs-part{color:var(--amber);font-weight:700;}
.rp-refs-none{color:var(--t3);}

/* Open btn */
.rp-open-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--t3);cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);font-size:13px;}
.rp-open-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--gdim);}

/* Empty state */
.rp-empty{padding:28px;text-align:center;color:var(--t3);font-size:13px;}

/* Group header colours per stage band */
.rp-grp-1,.rp-grp-2{border-left:3px solid var(--slate);color:var(--slate);}
.rp-grp-3{border-left:3px solid var(--gold);color:var(--gold);}
.rp-grp-4,.rp-grp-5{border-left:3px solid var(--purple);color:var(--purple);}
.rp-grp-6,.rp-grp-7{border-left:3px solid var(--gold);color:var(--gold);}
.rp-grp-8{border-left:3px solid var(--orange);color:var(--orange);}
.rp-grp-9,.rp-grp-10{border-left:3px solid var(--cyan);color:var(--cyan);}
.rp-grp-11{border-left:3px solid var(--green);color:var(--green);}
.rp-grp-12{border-left:3px solid var(--red);color:var(--red);}
.rp-grp-13{border-left:3px solid var(--slate);color:var(--slate);}

/* Touch device row tap */
.rp-row{-webkit-tap-highlight-color:rgba(240,200,50,.08);}

/* Mobile */
@media(max-width:820px){
  .rp-filter-bar{gap:8px;}
  .rp-search-wrap{min-width:0;flex:1 1 100%;}
  .rp-select{flex:1;min-width:0;}
  .rp-stats-strip{gap:8px;}
  .rp-stat-card{min-width:120px;padding:12px 14px;}
  .rp-stat-val{font-size:18px;}
}
@media(max-width:640px){
  #recruitment-board-section{padding:0 14px 24px;}
  .rp-table{min-width:700px;}
  .rp-th,.rp-cell{padding:8px 10px;}
  .rp-toggle-btn span{display:none;}
  .rp-stats-strip{gap:8px;}
  .rp-stat-card{flex:1 1 calc(50% - 4px);min-width:0;}
  .rp-stat-card i{font-size:16px;}
  .rp-stat-val{font-size:16px;}
  .rp-open-btn{width:36px;height:36px;}

  /* Group header rows — CSS sticky pins the full-width colspan td */
  .rp-group-hdr td{
    position:sticky;
    left:0;
    z-index:2;
  }
  .rp-group-chevron{
    float:none;
    display:inline-block;
    margin-left:5px;
  }
}
@media(max-width:400px){
  .rp-table{min-width:580px;}
  .rp-stat-card{flex:1 1 100%;}
  .rp-th,.rp-cell{padding:7px 8px;}
}

/* ── btn-sm: prevent icon+text overflow on narrow containers ── */
@media(max-width:640px) {
  .btn-sm {
    white-space: normal;
    height: auto;
    min-height: 38px;
    line-height: 1.3;
  }
}

/* ── Interview availability panel ── */
.avail-slot-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:var(--panel);border:1px solid var(--border);border-radius:8px;font-size:12px;color:var(--text);}
.avail-slot-row .slot-lbl{flex:1;}
.avail-slot-row .btn-xs{padding:3px 8px;font-size:11px;}
.avail-confirmed-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;background:rgba(76,214,87,.12);border:1px solid rgba(76,214,87,.3);border-radius:20px;font-size:11px;font-weight:700;color:var(--green);}
.avail-pending-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;background:var(--gdim);border:1px solid rgba(240,200,50,.3);border-radius:20px;font-size:11px;font-weight:700;color:var(--gold);}
.avail-responded-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;background:rgba(100,160,255,.1);border:1px solid rgba(100,160,255,.25);border-radius:20px;font-size:11px;font-weight:700;color:#6da4ff;}

/* Masked meeting ID */
.masked-id{font-family:var(--mono);color:var(--t3);letter-spacing:1px;}

/* Interview confirmed table */
#interview-confirmed-section .rota-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.ic-table{width:100%;border-collapse:collapse;font-size:12px;}
.ic-table th{padding:10px 14px;text-align:left;font-size: 11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--t3);border-bottom:1px solid var(--border);}
.ic-table td{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.06);color:var(--text);vertical-align:middle;}
.ic-table tr:hover td{background:var(--panel);cursor:pointer;}
.ic-table tr:last-child td{border-bottom:none;}

/* ── Top Performers widget ── */
.perf-top-card{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--lift);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:border-color .25s ease,background .25s ease;min-width:200px;flex:1;}
.perf-top-card:hover{border-color:var(--gold);background:var(--panel);}
.perf-top-rank{font-size:20px;flex-shrink:0;width:28px;text-align:center;}

/* ── Report type cards ── */
.report-type-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 12px;background:var(--lift);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:border-color .25s ease,background .25s ease;font-size:12px;font-weight:600;color:var(--t2);text-align:center;}
.report-type-card i{font-size:20px;color:var(--t3);transition:color .25s ease;}
.report-type-card:hover,.report-type-card.active{border-color:var(--gold);background:var(--gdim);}
.report-type-card.active i,.report-type-card:hover i{color:var(--gold);}
.report-type-card.active{color:var(--text);}

/* ── Appraisal list item ── */
.appr-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--lift);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;font-size:13px;}
.appr-status-pill{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;flex-shrink:0;}
.appr-status-pill.scheduled{background:var(--gdim);color:var(--gold);}
.appr-status-pill.completed{background:rgba(76,214,87,.12);color:var(--green);}
.appr-status-pill.missed{background:rgba(255,72,72,.12);color:var(--red);}
.appr-status-pill.rescheduled{background:rgba(100,160,255,.12);color:#6da4ff;}

/* ── Goal list item ── */
.goal-item{padding:12px 14px;background:var(--lift);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;}
.goal-progress-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:8px;}
.goal-progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--green));transition:width .5s cubic-bezier(.16,1,.3,1);}

/* ── Survey card ── */
.survey-card{padding:14px 16px;background:var(--lift);border:1px solid var(--border);border-radius:12px;margin-bottom:10px;}
.survey-status-pill{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;}
.survey-status-pill.active{background:rgba(76,214,87,.12);color:var(--green);}
.survey-status-pill.draft{background:var(--gdim);color:var(--gold);}
.survey-status-pill.closed{background:rgba(255,255,255,.08);color:var(--t3);}

/* ── Question row in survey builder ── */
.sq-row{display:flex;gap:8px;align-items:center;padding:10px 12px;background:var(--panel);border:1px solid var(--border);border-radius:8px;margin-bottom:6px;}
.sq-row input{flex:1;background:transparent;border:none;outline:none;font-size:13px;color:var(--text);}
.sq-row select{background:var(--lift);border:1px solid var(--border);color:var(--t2);font-size:11px;padding:4px 6px;border-radius:6px;}

/* ── Audit export table ── */
.audit-tbl{width:100%;border-collapse:collapse;font-size:12px;}
.audit-tbl th{padding:9px 12px;text-align:left;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--t3);border-bottom:1px solid var(--border);}
.audit-tbl td{padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--text);vertical-align:middle;word-break:break-word;}
.audit-tbl tr:hover td{background:var(--panel);}

/* ── 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: 12px; 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: 11px; color: var(--t3); margin-top: 2px; }
.cn-meta span { color: var(--green); font-weight: 600; }
.cn-time { font-size: 10px; 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 cubic-bezier(.16,1,.3,1) infinite; }

/* ════════════════════════════════════════════════════════════════
   MOBILE OVERHAUL — Surgical additions only. Do NOT edit above.
   Breakpoints: 1100 / 820 / 640 / 540 / 400px
════════════════════════════════════════════════════════════════ */

/* ── 1. HOLIDAY GRID — 7-col → 2-col → 1-col ─────────────────── */
/* The .hol-grid uses repeat(7,1fr) with no mobile rule. Fix it. */
@media (max-width: 640px) {
  .hol-grid {
    /* Day-of-week labels (7) + day cells: keep 7-col headers but
       condense cells. Use a 2-col day layout with day-of-week
       labels shown inline in each cell instead. However, the
       simplest safe approach is to keep 7 cols but shrink cells. */
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
  }
  .hol-dow {
    font-size: 9px;
    letter-spacing: 0;
    padding: 4px 0;
  }
  .hol-day {
    min-height: 36px;
    padding: 3px;
    border-radius: 5px;
  }
  .hol-dn {
    font-size: 10px;
  }
  .hol-dots {
    gap: 1px;
    margin-top: 2px;
  }
  .hol-dot {
    width: 4px;
    height: 4px;
  }
}
@media (max-width: 400px) {
  .hol-grid {
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
  }
  .hol-dow {
    font-size: 8px;
    padding: 3px 0;
  }
  .hol-day {
    min-height: 28px;
    padding: 2px;
  }
  .hol-dn {
    font-size: 9px;
  }
  .hol-dots { display: none; }
}

/* ── 2. PRE-REGISTRATION CARDS — responsive collapse ────────────
   .prereg-scroll-wrap already has overflow-x:auto and
   .prereg-cards-grid has min-width forcing horizontal scroll.
   On screens ≥640px collapse to vertical single-column to avoid
   a squashed horizontal scroll on tablet.                       */
@media (max-width: 820px) {
  .prereg-cards-grid {
    grid-template-columns: 1fr 1fr;
    min-width: unset;
  }
}
@media (max-width: 540px) {
  .prereg-cards-grid {
    grid-template-columns: 1fr;
    min-width: unset;
  }
}

/* ── 3. ONBOARDING STEPS — 5-col is too narrow at ≤540px ────────
   The existing ≤640px rule sets repeat(5,1fr). Override to
   3-col at 640px and 2-col below 400px.                         */
@media (max-width: 640px) {
  .ob-steps-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 400px) {
  .ob-steps-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ob-step {
    font-size: 10px;
    min-height: 48px;
  }
}

/* ── 4. ATTENDANCE TABLE — already uses .wf-table-wrap (overflow-x:auto)
   The table reuses .wf-table. No extra scroll wrapper needed.
   Reduce min-width at very small screens.                       */
@media (max-width: 540px) {
  #attendance-section .wf-table { min-width: 480px; }
}

/* ── 5. CONTRACT TABLE — same pattern as attendance.
   Uses .wf-table-wrap and .wf-table. Shrink min-width.         */
@media (max-width: 540px) {
  #contract-section .wf-table { min-width: 480px; }
}

/* ── 5b. EXIT LEAVERS TABLE — already has inline overflow-x:auto wrapper.
   Set font-size and ensure the inner table scrolls correctly.  */
@media (max-width: 640px) {
  .exit-leavers-tbl { font-size: 11px; min-width: 540px; }
  .exit-leavers-tbl th,
  .exit-leavers-tbl td { padding: 7px 8px; }
}

/* ── 5c. SICK / IT / SA / TRAINING TABLES — ensure overflow wrappers
   are active. The wrappers already exist; enforce scroll on the
   inner tables at narrow widths.                                */
@media (max-width: 540px) {
  .sick-tbl  { min-width: 600px; font-size: 12px; }
  .it-tbl    { min-width: 580px; font-size: 12px; }
  .sa-tbl    { min-width: 520px; font-size: 12px; }
  .training-tbl { min-width: 600px; font-size: 12px; }
}
@media (max-width: 400px) {
  .sick-tbl th, .sick-tbl td,
  .it-tbl thead th, .it-tbl tbody td,
  .sa-tbl thead th, .sa-tbl tbody td,
  .training-tbl thead th, .training-tbl tbody td { padding: 7px 8px; }
}

/* ── 6. .btn-xs TOUCH TARGETS — 5px padding is below 44px min ──
   Raise to 36px min-height on mobile (secondary action tier).  */
@media (max-width: 640px) {
  .btn-xs {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 11px;
  }
}

/* ── 7. ASD MODAL (#add-stage-doc-modal) — inline max-width:700px
   Override via the wrapper .modal-card class used inside it.
   The modal itself uses .modal-overlay; inner div uses .modal-card
   (NOT .modal-box). Target via #add-stage-doc-modal .modal-card. */
@media (max-width: 640px) {
  #add-stage-doc-modal .modal-card,
  #stage-docs-modal .modal-card {
    max-width: calc(100vw - 24px) !important;
    padding: 20px 14px !important;
    border-radius: 16px !important;
  }
}
@media (max-width: 400px) {
  #add-stage-doc-modal .modal-card,
  #stage-docs-modal .modal-card {
    padding: 16px 12px !important;
  }
}

/* ── 8. TRAINING TABLE — .training-tbl-wrap already has overflow-x:auto.
   Reduce min-width so it scrolls gracefully rather than forcing
   a huge viewport overflow on small tablets.                    */
@media (max-width: 820px) {
  .training-tbl { min-width: 700px; }
}
@media (max-width: 640px) {
  .training-tbl { min-width: 580px; font-size: 12px; }
  .training-tbl thead th,
  .training-tbl tbody td { padding: 8px 10px; }
}

/* ── 9. SECTION PADDING — already handled by [id$="-section"] rule
   at 640 and 400. Add 0 28px sections that use inline style.   */
@media (max-width: 400px) {
  #attendance-section,
  #contract-section,
  #onboarding-section,
  #staff-notes-section,
  #disciplinary-section,
  #live-shift-section,
  #arc-rings-section,
  #ext-analytics-section {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ── 10. MODAL BOXES — .modal-box max-width:480px (base rule).
   Already overridden at ≤640px in existing rules (line 1958).
   Add tighter padding at ≤400px that the existing rule misses. */
@media (max-width: 540px) {
  .modal-box {
    max-width: calc(100vw - 32px) !important;
    padding: 24px 18px !important;
  }
}
@media (max-width: 400px) {
  .modal-box {
    padding: 20px 14px !important;
  }
}

/* ── 11. SEC-HEAD — font-size / gap micro-adjustments.
   Already has flex-direction:column at ≤540px. Add font trim.  */
@media (max-width: 640px) {
  .sec-head {
    gap: 10px;
  }
}
@media (max-width: 400px) {
  .sec-lbl {
    font-size: 11px !important;
    gap: 7px;
    letter-spacing: 1.5px;
  }
  .sec-lbl i { font-size: 11px; }
}

/* ── 12. DDCP CASE MODAL (#case-modal) — .modal-box with inline
   max-width:560px. Ensure full-width on mobile.                */
@media (max-width: 640px) {
  #case-modal .modal-box {
    max-width: calc(100vw - 24px) !important;
  }
}
/* DDCP modal grid (2-col fields) → single column on small screens */
@media (max-width: 540px) {
  #case-modal .modal-box > div[style*="grid-template-columns:1fr 1fr"],
  #case-modal .modal-box > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 13. OTHER MODAL CARDS (modal-card class used in pipeline/adf drawers)
   These use .modal-card not .modal-box — ensure they respect viewport. */
@media (max-width: 640px) {
  .modal-card {
    max-width: calc(100vw - 24px) !important;
    padding: 20px 16px !important;
    border-radius: 16px;
  }
}

/* ── 14. INTERVIEW SCHEDULE MODAL — 2-col grid inside .modal-card ── */
@media (max-width: 540px) {
  #interview-schedule-modal .modal-card > div[style*="grid-template-columns:1fr 1fr"],
  #interview-schedule-modal .modal-card > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 15. KPI-STRIP display fix — #kpi-strip is display:flex but
   existing ≤640px rule tries grid-template-columns on it.
   Ensure the flex-wrap handles 2-up layout properly.            */
@media (max-width: 540px) {
  #kpi-strip {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .kpi-pill {
    flex: 1 1 calc(50% - 8px);
    min-width: unset !important;
  }
}
@media (max-width: 400px) {
  .kpi-pill {
    flex: 1 1 100%;
  }
}

/* ── 16. HEADER CLOCK — hide at ≤540px to save horizontal space ── */
@media (max-width: 540px) {
  .hdr-clock { display: none; }
}

/* ── 17. LEAVE QUEUE CARDS — .lq-card already flex+wrap.
   Stack action buttons vertically on very small screens.       */
@media (max-width: 400px) {
  .lq-actions {
    flex-direction: column;
    width: 100%;
  }
  .lq-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .lq-card {
    padding: 14px;
  }
}

/* ── 18. PROFILE DRAWER — already full-width at ≤640px.
   Ensure drawer body padding is comfortable on 320px.         */
@media (max-width: 400px) {
  .drawer-body { padding: 14px; }
  .drawer-hdr  { padding: 14px; }
  .drawer-actions { flex-direction: column; gap: 6px; }
  .drawer-actions .btn { width: 100%; justify-content: center; }
}

/* ── 19. ARC RINGS — already has ≤820px and ≤540px rules.
   At 400px, show as single column.                             */
@media (max-width: 400px) {
  .arc-rings-grid { grid-template-columns: 1fr !important; }
  .arc-wrap { width: 90px !important; height: 90px !important; }
}

/* ── 20. PROB CARD FOOTER — wrap action buttons on very small screens */
@media (max-width: 400px) {
  .prob-card-footer { flex-direction: column; gap: 6px; }
  .prob-card-footer .btn { width: 100%; justify-content: center; }
}

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

/* Gold left-rail accent on the SA-only "My Rota Drafts" snav item. The
   hide/show state is governed by the `u-hide` utility class on the same
   element; this rule supplies only the visual decoration. */
.snav-my-rota{border-left:2px solid rgba(212,175,55,.4);}

/* ════════════════════════════════════════════════════════════
   Onboarding checklist (recruitment pipeline, stage 9)
   Native iOS checkboxes render too small + grey to read. This pair
   makes ticked items obviously green so HR can see at a glance what
   is complete. `.is-done` is applied to the row by the JS render
   so the styling works without depending on :has().
   ════════════════════════════════════════════════════════════ */
.recru-onb-cb{
  width:22px!important;height:22px!important;
  accent-color:var(--green);
  cursor:pointer;
}
.recru-onb-row.is-done{
  background:rgba(76,214,87,.08);
  border-radius:8px;
  padding:0 8px;
  margin:2px 0;
  border-bottom-color:rgba(76,214,87,.25)!important;
  transition:background .25s;
}

/* ════════════════════════════════════════════════════════════════════
   HR-Monitor mobile shim — broadcast section onwards.
   Targets the explicit section IDs from #broadcast-section through
   #audit-export-section so older sections (Workforce, Recruitment,
   etc.) are not touched. The user's complaint was that everything
   from Broadcast downwards struggles to fit on iPhone widths.
   Reduces fixed 28px container padding, force-stacks 2-col grids,
   wraps tables in horizontal scroll, and stops KPI pills + sec-lbl
   button rows from overflowing.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  /* Section containers — drop the 28px horizontal pad to 12px. The
     hashed `s-*` parent classes carry !important so we have to match. */
  #broadcast-section,
  #performance-section,
  #training-section,
  #doc-expiry-section,
  #hr-cases-section,
  #di-section,
  #time-intel-section,
  #succession-section,
  #data-intel-section,
  #intelligence-section,
  #hr-guides-section,
  #clearance-section,
  #ndpa-section,
  #dsar-section,
  #coi-section,
  #ipnda-section,
  #audit-export-section{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  /* Broadcast: 2-col compose/history grid (.s-7ssbwq2) stacks vertically. */
  #broadcast-section .s-7ssbwq2{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  /* Broadcast Preview/Send button row sticks to single line on phones. */
  #broadcast-section .s-7cz6uif{flex-wrap:wrap;gap:8px;}
  #broadcast-section .s-7cz6uif .btn{flex:1;justify-content:center;}

  /* Sec-lbl rows that mix an inline button on the right (Performance,
     Training, etc.) must stack so the title doesn't get squashed and
     the button stretches to fit. Targets the s-2epo7jg auto-margin
     pattern (.btn s-2epo7jg) used as the action button in those rows. */
  #performance-section .sec-lbl,
  #training-section .sec-lbl,
  #doc-expiry-section .sec-lbl,
  #hr-cases-section .sec-lbl,
  #di-section .sec-lbl,
  #time-intel-section .sec-lbl,
  #succession-section .sec-lbl,
  #data-intel-section .sec-lbl,
  #intelligence-section .sec-lbl,
  #hr-guides-section .sec-lbl{
    flex-wrap:wrap;
    row-gap:10px;
  }
  #performance-section .sec-lbl .btn.s-2epo7jg,
  #training-section .sec-lbl .btn.s-2epo7jg,
  #doc-expiry-section .sec-lbl .btn.s-2epo7jg,
  #hr-cases-section .sec-lbl .btn.s-2epo7jg,
  #di-section .sec-lbl .btn.s-2epo7jg,
  #time-intel-section .sec-lbl .btn.s-2epo7jg,
  #succession-section .sec-lbl .btn.s-2epo7jg,
  #data-intel-section .sec-lbl .btn.s-2epo7jg,
  #intelligence-section .sec-lbl .btn.s-2epo7jg{
    width:100%;
    justify-content:center;
    margin-left:0!important;
  }

  /* KPI strips (.s-q3qxymq, .s-kt66kpb): allow flex-wrap; pills shrink
     to fit two per row at 320px, three per row at 414px. */
  #broadcast-section ~ div .s-q3qxymq,
  #broadcast-section ~ div .s-kt66kpb,
  #broadcast-section .s-q3qxymq,
  #broadcast-section .s-kt66kpb{
    gap:8px!important;
  }
  /* The .kpi-pill min-width:140px overflows on 320px; clamp it so two
     pills fit per row with the 8px gap. */
  #broadcast-section ~ div .kpi-pill,
  #performance-section .kpi-pill,
  #training-section .kpi-pill,
  #doc-expiry-section .kpi-pill,
  #hr-cases-section .kpi-pill,
  #di-section .kpi-pill,
  #time-intel-section .kpi-pill,
  #succession-section .kpi-pill,
  #data-intel-section .kpi-pill,
  #intelligence-section .kpi-pill{
    min-width:calc(50% - 4px)!important;
    flex:0 0 calc(50% - 4px)!important;
    padding:12px 14px!important;
  }

  /* Card grids — force one column so the auto-fill 300px floors don't
     force horizontal overflow. */
  .perf-cards-grid,
  #training-section .perf-cards-grid,
  #hr-cases-section .perf-cards-grid,
  #broadcast-section ~ div [class*="cards-grid"]{
    grid-template-columns:1fr!important;
  }

  /* Tables in any of those sections gain horizontal-scroll wrappers.
     Tables in the disciplinary/performance/training sections render
     too wide for narrow viewports — let the user pan rather than
     compress the content. */
  #performance-section table,
  #training-section table,
  #doc-expiry-section table,
  #hr-cases-section table,
  #disciplinary-section table,
  #di-section table,
  #time-intel-section table,
  #data-intel-section table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    width:100%;
    max-width:100%;
  }

  /* HR guides grid: the existing 4-up grid collapses; keep cards full-
     width with a real touch-target gap so people can read each title. */
  #hr-guides-section .hr-guides-grid{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  /* Clearance / NDPA / DSAR / COI / IPNDA / Audit-export shells use the
     same .glass wrappers — drop their inner padding so the content has
     room to breathe on phone screens. */
  #clearance-section .glass,
  #ndpa-section .glass,
  #dsar-section .glass,
  #coi-section .glass,
  #ipnda-section .glass,
  #audit-export-section .glass{
    padding:16px!important;
  }

  /* Generic safety net: any inline-style grid in these sections that
     declared 2 or 3 columns collapses to one. */
  #broadcast-section ~ div [style*="grid-template-columns:1fr 1fr"],
  #broadcast-section ~ div [style*="grid-template-columns: 1fr 1fr"],
  #broadcast-section ~ div [style*="grid-template-columns:1fr 1fr 1fr"],
  #broadcast-section ~ div [style*="grid-template-columns: 1fr 1fr 1fr"]{
    grid-template-columns:1fr!important;
  }

  /* ── Workforce Intelligence — top 3-col grid (org gauge + score
     distribution + penalty signals) collapses on mobile. Cards inside
     reset to full-width. The at-risk cards (.s-g8onrqd) drop their
     180px min-width so they don't force horizontal scroll. */
  #intelligence-section .s-8lwknsg{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  #intelligence-section .s-0ezwtnt,
  #intelligence-section .s-qb5thyc{
    padding:14px 14px!important;
  }
  #intelligence-section .s-g8onrqd{
    min-width:100%!important;
    flex:1 1 100%!important;
  }
  #intelligence-section .s-kehnw9n{gap:8px!important;}
  /* Ranked table: keep it scrollable rather than crammed. */
  #intelligence-section table{
    min-width:540px; /* keeps the columns legible while user pans */
  }
  /* The score gauge sits inside .s-0ezwtnt — keep the central canvas+
     overlay readable on small viewports. */
  #intelligence-section #intel-gauge-canvas{max-width:100%;height:auto;}
}

/* Tighter breakpoint — iPhone SE class (≤400px). */
@media (max-width:400px){
  #broadcast-section,
  #performance-section,
  #training-section,
  #doc-expiry-section,
  #hr-cases-section,
  #di-section,
  #time-intel-section,
  #succession-section,
  #data-intel-section,
  #intelligence-section,
  #hr-guides-section,
  #clearance-section,
  #ndpa-section,
  #dsar-section,
  #coi-section,
  #ipnda-section,
  #audit-export-section{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  /* On the narrowest phones, KPI pills go 1-per-row so the value isn't
     cropped. */
  #broadcast-section ~ div .kpi-pill,
  #performance-section .kpi-pill,
  #training-section .kpi-pill,
  #doc-expiry-section .kpi-pill,
  #hr-cases-section .kpi-pill,
  #di-section .kpi-pill,
  #time-intel-section .kpi-pill,
  #succession-section .kpi-pill,
  #data-intel-section .kpi-pill,
  #intelligence-section .kpi-pill{
    min-width:100%!important;
    flex:1 1 100%!important;
  }
}


/* Recruitment pipeline rows — long-string overflow on mobile.
   Long applicant + role + dept + iatn strings (Adizha Nyako case 2026-05-24)
   ran off the right edge on narrow widths. Allow break + cap cell width. */
.rp-name-text, .rp-name-code { word-break: break-word; overflow-wrap: anywhere; }
.rp-cell-name { max-width: 320px; }
@media (max-width: 820px) {
  .rp-cell-name { max-width: calc(100vw - 90px); }
  .rp-name-text { font-size: 12.5px; }
  .rp-name-code { font-size: 10.5px; }
}
@media (max-width: 540px) {
  .rp-cell-name { max-width: calc(100vw - 70px); }
}

/* ================================================================
   WIDE-SECTION OVERFLOW (mobile) — VP 2026-05-27
   The page already scrolls horizontally (the header overflows to the
   right). Data-dense grids/boards should keep their multi-column
   desktop layout and extend to the RIGHT rather than collapsing into
   one compressed column on phones. The minmax() floors make each grid
   wider than the viewport so the existing page-level horizontal scroll
   reveals the rest — no per-section scrollbars, same feel as the header.
   Deliberately EXCLUDED (stay stacked so they read without sideways
   scroll): plain cards, forms, single-item lists, guide cards,
   cert input rows, and the JS-injected #lsm-grid.
   Placed last in the file so it wins over the earlier `1fr !important`
   collapses; recruitment is ID-scoped to beat `#recruitment-section>div`.
   ================================================================ */
@media (max-width: 768px) {
  /* KPI strip — restore the horizontal scroll it was built for
     (#kpi-strip has overflow-x:auto) instead of wrapping into rows. */
  #kpi-strip { flex-wrap: nowrap !important; }
  #kpi-strip .kpi-pill { flex: 0 0 auto !important; min-width: 150px !important; }

  /* 4-column analytics grids */
  .charts-grid     { grid-template-columns: repeat(4, minmax(280px, 1fr)) !important; }
  .time-intel-grid { grid-template-columns: repeat(4, minmax(250px, 1fr)) !important; }

  /* 3-column analytics / intelligence grids */
  .exit-grid,
  .di-grid,
  .di-widget-strip { grid-template-columns: repeat(3, minmax(280px, 1fr)) !important; }

  /* KPI ring tiles (smaller cards) */
  .arc-rings-grid  { grid-template-columns: repeat(3, minmax(150px, 1fr)) !important; }

  /* 2-column boards */
  .succ-grid                          { grid-template-columns: repeat(2, minmax(320px, 1fr)) !important; }
  #recruitment-section .recruit-grid,
  .recruit-grid                       { grid-template-columns: repeat(2, minmax(320px, 1fr)) !important; }

  /* Performance cards — restore responsive auto-fill (was forced to 1fr) */
  .perf-cards-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; }

  /* HEADER — its WIDTH is set by JS (_sizeHeaderToPageEnd) to the page's
     right edge = where the widest section (Live Workforce Grid) ends, so
     the bar reaches the page end. flex-start keeps the text/icons packed
     at their natural position — the extra bar space is just empty
     background, NOT stretched controls. JS only touches the header; no
     section is widened. */
  #hr-header { justify-content: flex-start !important; }

  /* LIVE WORKFORCE GRID (the 11-column workforce table) — let it extend
     to the right via the page-level scroll (same as the analytics grids)
     instead of being squeezed inside its own internal-scroll box and
     compressed to a 420px min-width. The wrap grows to the table width so
     its border frames the whole table; the page scroll reveals the rest. */
  .wf-table-wrap { overflow-x: visible !important; width: max-content !important; max-width: none !important; }
  .wf-table      { min-width: 1000px !important; font-size: 12px !important; }
  .wf-table th, .wf-table td { padding: 9px 10px !important; }
}

/* ================================================================
   WIDE-SECTION OVERFLOW (mobile) — round 2 — VP 2026-05-27
   "Do same for": Progress Board, Shift Pattern Auditor, Currently
   Absent, Bradford/Welfare, Onboarding (New Joiners), Engine Alerts
   — Staff Requiring Action. Section-ID scoped so they beat BOTH the
   mobile min-width shrink rules AND the style-shim `!important`
   hashed-class grids. Ancestors confirmed free of overflow:hidden
   except the New Joiners panel (.s-6licuxe) — that one scrolls inside
   its own body rather than via the page.
   ================================================================ */
@media (max-width: 768px) {
  /* Tables → extend right via the page scroll (same as Live Workforce Grid) */
  #recruitment-board-section .rp-table-wrap,
  #shift-auditor-section .sa-tbl-wrap,
  #sickness-section .sick-tbl-wrap {
    overflow-x: visible !important;
    width: max-content !important;
    max-width: none !important;
  }
  #recruitment-board-section .rp-table { min-width: 900px !important; font-size: 12px !important; }
  #shift-auditor-section .sa-tbl       { min-width: 780px !important; font-size: 12px !important; }
  #sickness-section .sick-tbl          { min-width: 900px !important; font-size: 12px !important; }
  #recruitment-board-section .rp-table th, #recruitment-board-section .rp-table td,
  #shift-auditor-section .sa-tbl th,       #shift-auditor-section .sa-tbl td,
  #sickness-section .sick-tbl th,          #sickness-section .sick-tbl td { padding: 9px 11px !important; }

  /* Engine Alerts — Staff Requiring Action: keep the two columns wide, overflow right */
  #hr-cases-engine-wrap .s-thzqo5q { grid-template-columns: repeat(2, minmax(360px, 1fr)) !important; }

  /* Onboarding → New Joiners cards: multi-column, scroll right inside the
     panel (.s-6licuxe is overflow:hidden, so page-level overflow would be
     clipped — use the panel body's own horizontal scroll instead). */
  #joiners-body     { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  #onboarding-cards { grid-template-columns: repeat(3, minmax(280px, 1fr)) !important; }
}

/* ── Personal File — folder drill-down (user → category → files) ───────────── */
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px;margin-top:6px;}
.pf-view{animation:pfViewIn .42s cubic-bezier(.16,1,.3,1) both;}
@keyframes pfViewIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@keyframes pfFolderIn{from{opacity:0;transform:translateY(16px) scale(.95);}to{opacity:1;transform:none;}}
.pf-folder{position:relative;cursor:pointer;border-radius:14px;padding:18px 15px 15px;
  background:rgba(255,255,255,.06);border:1px solid var(--border);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-height:118px;
  animation:pfFolderIn .5s cubic-bezier(.16,1,.3,1) both;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s;}
.pf-folder::before{content:"";position:absolute;top:-9px;left:16px;width:64px;height:14px;border-radius:5px 5px 0 0;
  background:linear-gradient(135deg,var(--gold2,#f7d94e),var(--gold,#f0c832));box-shadow:0 2px 6px rgba(0,0,0,.3);}
.pf-folder:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(0,0,0,.42);border-color:var(--gglow,rgba(212,175,55,.3));background:rgba(255,255,255,.10);}
.pf-folder:active{transform:translateY(-2px) scale(.99);}
.pf-folder.pf-closed::before{background:linear-gradient(135deg,#ff7a7a,var(--red,#ff4848));}
.pf-folder.pf-closed{border-color:rgba(255,72,72,.32);}
.pf-fav{width:42px;height:42px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono,monospace);font-weight:700;font-size:14px;color:#0c1109;
  background:linear-gradient(135deg,var(--gold2,#f7d94e),var(--gold,#f0c832));}
.pf-fav img{width:100%;height:100%;object-fit:cover;}
.pf-ficon{width:42px;height:42px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--gold,#f0c832);background:var(--gdim,rgba(212,175,55,.12));border:1px solid var(--gglow,rgba(212,175,55,.3));}
.pf-folder.pf-closed .pf-ficon{color:var(--red,#ff4848);background:rgba(255,72,72,.10);border-color:rgba(255,72,72,.3);}
.pf-fname{font-weight:700;font-size:13.5px;color:var(--text,#f2f7ee);line-height:1.3;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pf-fsub{font-size:11px;color:var(--t3,rgba(242,247,238,.62));line-height:1.3;}
.pf-fmeta{margin-top:auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap;width:100%;}
.pf-fpill{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;
  background:var(--gdim,rgba(212,175,55,.12));color:var(--gold,#f0c832);border:1px solid var(--gglow,rgba(212,175,55,.3));}
.pf-fbadge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;
  background:rgba(255,72,72,.12);color:var(--red,#ff4848);border:1px solid rgba(255,72,72,.32);}
/* breadcrumb */
.pf-crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 14px;padding-bottom:12px;border-bottom:1px solid var(--border);}
.pf-crumb a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--t2,rgba(242,247,238,.88));
  cursor:pointer;text-decoration:none;background:transparent;border:none;padding:5px 9px;border-radius:8px;transition:all .25s ease;min-height:32px;}
.pf-crumb a:hover{background:var(--gdim,rgba(212,175,55,.12));color:var(--gold,#f0c832);}
.pf-crumb .pf-crumb-sep{color:var(--t3,rgba(242,247,238,.62));font-size:13px;}
.pf-crumb .pf-crumb-cur{font-size:12.5px;font-weight:700;color:var(--gold,#f0c832);padding:5px 4px;}
.pf-crumb .pf-crumb-spacer{flex:1 1 auto;}
.pf-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:6px 12px;border-radius:20px;cursor:pointer;
  background:transparent;border:1px solid var(--border);color:var(--t2,rgba(242,247,238,.88));transition:all .25s ease;min-height:32px;}
.pf-chip.active,.pf-chip:hover{background:var(--gdim,rgba(212,175,55,.12));border-color:var(--gglow,rgba(212,175,55,.3));color:var(--gold,#f0c832);}
.pf-filelist{display:flex;flex-direction:column;gap:9px;}
.pf-empty{font-size:13px;color:var(--t3,rgba(242,247,238,.62));padding:22px 4px;text-align:center;}
/* closed-case row */
.pf-closed-row{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--border);flex-wrap:wrap;}
.pf-closed-row .pf-cc-ico{width:34px;height:34px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--red,#ff4848);background:rgba(255,72,72,.1);border:1px solid rgba(255,72,72,.28);}
.pf-cc-main{flex:1 1 180px;min-width:0;}
.pf-cc-title{font-size:13px;font-weight:700;color:var(--text,#f2f7ee);}
.pf-cc-sub{font-size:11px;color:var(--t3,rgba(242,247,238,.62));margin-top:2px;}
.pf-cc-status{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;background:rgba(255,72,72,.12);color:var(--red,#ff4848);border:1px solid rgba(255,72,72,.3);}
.pf-cc-status.pf-cc-soft{background:var(--gdim,rgba(212,175,55,.12));color:var(--gold,#f0c832);border-color:var(--gglow,rgba(212,175,55,.3));}
.pf-cc-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
@media(max-width:640px){
  .pf-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:11px;}
  .pf-folder{min-height:108px;padding:16px 13px 13px;}
}
@media(max-width:400px){
  .pf-grid{grid-template-columns:1fr 1fr;}
  .pf-closed-row{padding:12px;}
}

/* ── Section quick-jump search (type → jump to a section) ──────────────────── */
.snav-search-wrap{position:relative;max-width:540px;margin:16px auto 12px;padding:0 12px;}
.snav-search-ico{position:absolute;left:26px;top:50%;transform:translateY(-50%);color:var(--t3,rgba(242,247,238,.62));font-size:13px;pointer-events:none;}
.snav-search-input{width:100%;height:42px;padding:0 40px;border-radius:50px;font-size:14px;color:var(--text,#f2f7ee);
  background:rgba(255,255,255,.07);border:1px solid var(--border,rgba(255,255,255,.21));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);outline:none;
  transition:border-color .25s ease,background .25s ease;font-family:var(--body,inherit);}
.snav-search-input::placeholder{color:var(--t3,rgba(242,247,238,.62));}
.snav-search-input:focus{border-color:var(--gglow,rgba(212,175,55,.3));background:rgba(255,255,255,.10);}
.snav-search-clear{position:absolute;right:22px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;
  border:none;background:rgba(255,255,255,.1);color:var(--t2,rgba(242,247,238,.88));cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;transition:all .2s ease;}
.snav-search-clear:hover{background:var(--red,#ff4848);color:#fff;}
.snav-search-results{position:absolute;left:12px;right:12px;top:48px;z-index:9000;border-radius:14px;overflow:hidden auto;max-height:62vh;
  background:#0d150c;border:1px solid var(--border,rgba(255,255,255,.21));box-shadow:0 18px 44px rgba(0,0,0,.55);
  animation:pfViewIn .25s cubic-bezier(.16,1,.3,1) both;}
.snav-sr-item{display:flex;align-items:center;gap:11px;padding:12px 16px;cursor:pointer;font-size:13.5px;color:var(--t2,rgba(242,247,238,.88));
  border-bottom:1px solid rgba(255,255,255,.06);transition:background .18s ease,color .18s ease;min-height:44px;}
.snav-sr-item:last-child{border-bottom:none;}
.snav-sr-item > i:first-child{width:18px;text-align:center;color:var(--gold,#f0c832);font-size:13px;flex-shrink:0;}
.snav-sr-item span{flex:1;}
.snav-sr-item .snav-sr-go{color:var(--t3,rgba(242,247,238,.62));font-size:11px;opacity:0;transition:opacity .18s ease;}
.snav-sr-item:hover,.snav-sr-item.active{background:var(--gdim,rgba(212,175,55,.12));color:var(--text,#f2f7ee);}
.snav-sr-item:hover .snav-sr-go,.snav-sr-item.active .snav-sr-go{opacity:1;}
.snav-sr-empty{padding:14px 16px;font-size:13px;color:var(--t3,rgba(242,247,238,.62));}
@media(max-width:640px){.snav-search-wrap{max-width:none;}}

/* ── Animation perf: compositor-friendly glows + off-screen pause ──────────────
   Replaces two infinite box-shadow oscillations (.bf-critical, .prob-appeal-window)
   with an opacity-breathing pseudo-ring — same look, but opacity is composited
   instead of repainting the shadow every frame. */
@keyframes hmGlowBreath{0%,100%{opacity:0;}50%{opacity:1;}}
.bf-critical::after{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 5px rgba(232,64,64,.25);opacity:0;animation:hmGlowBreath 1.8s cubic-bezier(.16,1,.3,1) infinite;}
.prob-appeal-window::after{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 5px rgba(245,158,11,.15);opacity:0;animation:hmGlowBreath 2.2s cubic-bezier(.16,1,.3,1) infinite;}

/* Pause continuous (infinite) animations whose section is scrolled off-screen,
   so indicators the user can't see stop costing repaint/compositing. Re-runs the
   instant the section scrolls back into view (IntersectionObserver in JS adds
   .hm-anim-off). [style*="infinite"] catches the JS-inline DDCP stage dots. */
.hm-anim-off [style*="infinite"],
.hm-anim-off .bf-critical::after,
.hm-anim-off .prob-appeal-window::after,
.hm-anim-off .status-dot,
.hm-anim-off .alert-dot,
.hm-anim-off .itr-status-pending,
.hm-anim-off .pip-live{animation-play-state:paused !important;}
/* The active live-shift card combines a one-shot ENTRANCE (cardSlideUp, opacity:0 → 1,
   fill `both`) with an infinite glow. Pausing the whole thing while the section is
   off-screen froze the card at opacity:0 — so the ON-SHIFT card became invisible while
   the completed cards (not paused) stayed visible. Disable only the animation and force
   the card to its visible end-state instead of pausing it. */
.hm-anim-off .pres-card--active{animation:none !important;opacity:1 !important;transform:none !important;}

/* ── Pagination control (10 per page) ─────────────────────────────────────── */
.hm-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 4px;flex-wrap:wrap;}
.hm-pager .btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none;}
.hm-pager-info{font-size:12px;font-weight:600;color:var(--t3,rgba(242,247,238,.62));letter-spacing:.3px;white-space:nowrap;}

/* Gov modal (IP/NDA, COI, DSAR, Clearance…) X-button collision fix.
   responsive.css loads AFTER this file and sets `.modal-close{position:relative}`
   at the same (0,1,0) specificity, so it won the cascade tie and the gov-modal X
   dropped into normal flow — landing between the title and the body and colliding
   with the first body line (e.g. the staff name) on desktop AND mobile. Force it
   back to the top-right corner with ID-level specificity that beats responsive.
   The title clearance is handled by responsive's canonical 88px rule (so the
   earlier #gov-modal-title{padding-right:52px} is removed — it only reduced it). */
#gov-modal .modal-close{position:absolute;top:14px;right:14px;}

/* ── Wide data tables: expand to the right + scroll, instead of cramping ──────
   The Workforce Intelligence "All Staff — Intelligence Scores" table reads well
   because it sits in a horizontal-scroll wrapper with non-wrapping cells, so it
   takes its natural width and the row scrolls right. The governance/compliance
   tables (Vetting & Clearance, NDPA, DSAR, Certificates of Service, Global IP &
   NDA Monitor) live in `.s-qtrfdal` (already overflow-x:auto) but their `.dtbl`
   defaults to width:100%, so columns wrap and the content cramps. Match the
   Intelligence table: let these tables grow to natural width (min 100%) and keep
   every cell on one line, scrolling horizontally within the existing wrapper.
   Applied to all six governance tables at once via `.s-qtrfdal`, plus the
   Intelligence scores table (`.s-qb5thyc .rota-scroll`). 2026-06-01. */
.s-qtrfdal,
#intelligence-section .s-qb5thyc .rota-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.s-qtrfdal .dtbl,
#intelligence-section .s-qb5thyc .rota-scroll .dtbl{ width:auto; min-width:100%; }
.s-qtrfdal .dtbl th, .s-qtrfdal .dtbl td,
#intelligence-section .s-qb5thyc .rota-scroll .dtbl th,
#intelligence-section .s-qb5thyc .rota-scroll .dtbl td{ white-space:nowrap; }
/* Long free-text cells (Notes/Description) may opt back into wrapping with a
   capped width so a single long note can't blow the row out to absurd width. */
.s-qtrfdal .dtbl td[data-wrap], .s-qtrfdal .dtbl td.wrap-cell{ white-space:normal; max-width:280px; }

/* Personal File — VMEM-guarded (restricted) file tile, e.g. imported Government ID (2026-06-06) */
.s-o5tebvy.pf-restricted{border-left:3px solid var(--amber,#f59e0b);background:rgba(245,158,11,.04);}
.pf-lock-icon{color:var(--amber,#f59e0b) !important;}