/* ================================================================
   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:linear-gradient(165deg,var(--base),var(--deep));border:1px solid rgba(255,255,255,.20);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 90px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.06);}
/* 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;}
/* Broadcast Preview / Send-confirm modal — same overflow-top-&-bottom bug: a long
   message grew the box past the viewport, hiding the title AND the Edit/Confirm-Send
   buttons. Cap the box to the viewport and scroll ONLY the preview body, so the title,
   recipient count and action buttons stay visible at all times. (2026-06-20) */
#bc-preview-modal .modal-box{max-height:92vh;display:flex;flex-direction:column;}
#bc-preview-modal #bc-preview-body{flex:1 1 auto;overflow-y:auto;min-height:0;}
#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:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 42%,var(--panel)),linear-gradient(320deg,var(--gdim),transparent 60%);border:1px solid rgba(255,255,255,.20);border-radius:18px;padding:22px;position:relative;overflow:hidden;box-shadow:0 10px 30px -14px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.07);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,.08),transparent);}
.glass:hover{border-color:var(--gglow);transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(0,0,0,.42);}
/* ── 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,.3);background:linear-gradient(135deg,var(--gdim) 0%,var(--panel) 60%),linear-gradient(160deg,rgba(255,255,255,.10),transparent 50%);}

/* ── 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 Registration Tracker — premium counters + glass table (2026-06-07) */
.it-counter-strip{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.it-counter{flex:1;min-width:130px;position:relative;overflow:hidden;padding:16px;text-align:center;border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 42%,var(--panel)),linear-gradient(320deg,var(--gdim),transparent 60%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.10);
  animation:rcpKpiIn .5s cubic-bezier(.16,1,.3,1) both;transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s;}
.it-counter:nth-child(2){animation-delay:.05s}.it-counter:nth-child(3){animation-delay:.1s}
.it-counter:hover{transform:translateY(-3px);border-color:var(--gglow);box-shadow:0 18px 40px -12px rgba(0,0,0,.5)}
.it-counter-val{font-family:var(--disp);font-size:28px;font-weight:700;color:var(--gold);line-height:1;}
.it-counter-lbl{font-size: 11px;font-weight:700;letter-spacing:1.4px;color:var(--t3);text-transform:uppercase;margin-top:6px;}
.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:16px;border:1px solid rgba(255,255,255,.20);
  background:linear-gradient(160deg,rgba(255,255,255,.07),var(--panel));
  box-shadow:0 10px 30px -14px rgba(0,0,0,.4);}
.it-tbl{width:100%;border-collapse:collapse;min-width:780px;}
.it-tbl thead th{padding:12px 14px;text-align:left;font-size: 11px;font-weight:800;letter-spacing:1.5px;color:var(--gold);text-transform:uppercase;background:rgba(0,0,0,.28);border-bottom:1px solid var(--border);}
.it-tbl tbody tr{border-bottom:1px solid rgba(255,255,255,.05);transition:background .2s;}
.it-tbl tbody tr:hover{background:rgba(212,175,55,.06);}
.it-tbl tbody td{padding:11px 14px;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 */
/* Enterprise glass/facet/diamond cards (2026-06-07 — ported from /preview) */
.pl-card{position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.035) 42%,var(--panel)),linear-gradient(320deg,var(--gdim),transparent 60%);
  border:1px solid rgba(255,255,255,.20);border-radius:16px;padding:15px 17px;cursor:pointer;
  box-shadow:0 8px 26px -12px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s;}
.pl-card::after{content:"";position:absolute;top:-60%;left:-70%;width:42%;height:220%;pointer-events:none;z-index:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),rgba(255,255,255,.03),transparent);
  transform:rotate(9deg);transition:left .75s cubic-bezier(.16,1,.3,1);}
.pl-card:hover{border-color:var(--gglow);transform:translateY(-3px);box-shadow:0 18px 44px -12px rgba(0,0,0,.5),0 0 0 1px var(--gglow) inset;}
.pl-card:hover::after{left:150%;}
.pl-card-hdr{display:flex;align-items:flex-start;gap:13px;margin-bottom:10px;position:relative;z-index:1;}
.pl-avatar{width:48px;height:48px;border-radius:13px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;font-family:var(--mono);background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--void);}
.pl-avatar img{width:100%;height:100%;object-fit:cover;}
.pl-name{font-family:var(--disp);font-weight:700;font-size:16px;line-height:1.15;color:var(--text);}
.pl-meta{font-size:12.5px;color:var(--t2);margin-top:3px;}
.pl-tracking{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.5px;margin-top:3px;}
.pl-stage-bar{display:flex;gap:5px;margin-top:12px;position:relative;z-index:1;}
.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(--gold);box-shadow:0 0 8px var(--gglow);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:15px 18px;border-radius:16px;flex:1;min-width:130px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.035) 42%,var(--panel)),linear-gradient(320deg,var(--gdim),transparent 60%);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);
  animation:kpiIn .5s cubic-bezier(.16,1,.3,1) both;transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s;}
.rp-stat-card:hover{transform:translateY(-3px);border-color:var(--gglow);box-shadow:0 18px 40px -12px rgba(0,0,0,.5);}
.rp-stat-card-warn{border-color:rgba(255,72,72,.32);}
.rp-stat-card-amber{border-color:rgba(245,158,11,.32);}
.rp-stat-card-green{border-color:rgba(76,214,87,.32);}
.rp-stat-card i{font-size:20px;flex-shrink:0;}
.rp-stat-val{font-family:var(--disp);font-size:24px;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;}
/* Same collision on every other HR-monitor modal (Leave Balance Adjust reported
   by VP 2026-06-12) — pin the X top-right for ALL modals on this page, and keep
   titles clear of it. (0,3,0) specificity beats responsive's (0,1,0) tie-winner. */
.modal-overlay .modal-box .modal-close{position:absolute;top:14px;right:14px;}
.modal-overlay .modal-box .modal-title{padding-right:56px;}

/* ── 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;}

/* ── Recruitment Pipeline KPI stats strip (2026-06-07, ported from /preview) ──
   Live counts from recruitApplicantData. Enterprise glass-facet 5-up; wraps to
   3-up then 2-up on narrow widths so every metric stays readable at 320px. */
.rcp-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
.rcp-kpi{position:relative;overflow:hidden;padding:15px 16px;border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 42%,var(--panel)),linear-gradient(320deg,var(--gdim),transparent 60%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  animation:rcpKpiIn .5s cubic-bezier(.16,1,.3,1) both}
.rcp-kpi:nth-child(2){animation-delay:.05s}.rcp-kpi:nth-child(3){animation-delay:.1s}
.rcp-kpi:nth-child(4){animation-delay:.15s}.rcp-kpi:nth-child(5){animation-delay:.2s}
@keyframes rcpKpiIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.rcp-kn{font-family:var(--disp);font-weight:700;font-size:26px;line-height:1}
.rcp-kl{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--t3);font-weight:700;margin-top:6px}
.rcp-ki{position:absolute;top:12px;right:13px;font-size:15px;opacity:.5}
.rcp-gold{color:var(--gold)}.rcp-red{color:var(--red)}.rcp-amber{color:var(--amber)}.rcp-green{color:var(--green)}
@media(max-width:900px){.rcp-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.rcp-kpis{grid-template-columns:repeat(2,1fr)}.rcp-kn{font-size:23px}}

/* ── Recruitment Pipeline — Stage Overview funnel (2026-06-07, ported from /preview) ──
   Live count per stage from recruitApplicantData. Horizontal scroll rail; click a
   step to filter the list to that stage (click again to clear). */
.rcp-funnelw{padding:18px 18px 14px;margin-bottom:16px;border-radius:16px}
.rcp-funnel-hd{font-family:var(--disp);font-size:14px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.rcp-funnel-hd i{color:var(--gold)}
.rcp-funnel{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.rcp-fstep{flex:0 0 auto;min-width:104px;border:1px solid var(--border);border-radius:13px;padding:11px 12px;background:var(--panel);cursor:pointer;transition:.25s cubic-bezier(.16,1,.3,1);position:relative}
.rcp-fstep:hover{border-color:var(--gglow);transform:translateY(-3px)}
.rcp-fstep.active{background:var(--gdim);border-color:var(--gglow);box-shadow:0 0 0 1px var(--gglow) inset}
.rcp-fn{display:flex;align-items:center;justify-content:space-between}
.rcp-fnum{font-family:var(--mono);font-size:10px;color:var(--t3);font-weight:700}
.rcp-fcount{font-family:var(--disp);font-size:20px;font-weight:700;color:var(--gold)}
.rcp-flbl{font-size:10.5px;color:var(--t2);font-weight:600;margin-top:5px;line-height:1.25}
.rcp-fstep.term .rcp-fcount{color:var(--red)}
.rcp-fstep.hired .rcp-fcount{color:var(--green)}
.rcp-fstep.dim{opacity:.5}

/* ── Recruitment Pipeline drawer — enterprise restyle (2026-06-07) ──────────
   Dock the (previously centred) modal as a tall right-side slide-in panel and
   elevate the header + .pd-* panels to the enterprise glass language. ALL rules
   scoped to #pipeline-drawer so no other modal/drawer is affected. The open/
   close JS and every body section/action/listener are unchanged. */
#pipeline-drawer.modal-overlay{justify-content:flex-end;align-items:stretch;padding:0;background:rgba(5,9,5,.52);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);animation:pdScrimIn .32s cubic-bezier(.16,1,.3,1) both}
@keyframes pdScrimIn{from{opacity:0}to{opacity:1}}
#pipeline-drawer .modal-card.s-548tebl{
  max-width:none !important;max-height:none !important;width:min(580px,100vw);height:100vh;
  margin:0;padding:0;border-radius:0;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(165deg,var(--base),var(--deep));
  border-left:1px solid var(--border);box-shadow:-28px 0 80px rgba(0,0,0,.6);
  will-change:transform}
#pipeline-drawer.open .modal-card.s-548tebl{animation:pdSlideIn .52s cubic-bezier(.16,1,.3,1) both}
@keyframes pdSlideIn{from{transform:translateX(102%);opacity:.55}60%{opacity:1}to{transform:none;opacity:1}}
/* Section stagger — runs ONLY on open (.pd-just-opened set in openPipelineDrawer),
   never on the in-action re-renders, so actions don't re-trigger the cascade. */
@keyframes pdSecIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#pipeline-drawer.pd-just-opened #pd-body > *{animation:pdSecIn .5s cubic-bezier(.16,1,.3,1) both}
#pipeline-drawer.pd-just-opened #pd-body > *:nth-child(1){animation-delay:.10s}
#pipeline-drawer.pd-just-opened #pd-body > *:nth-child(2){animation-delay:.16s}
#pipeline-drawer.pd-just-opened #pd-body > *:nth-child(3){animation-delay:.22s}
#pipeline-drawer.pd-just-opened #pd-body > *:nth-child(4){animation-delay:.28s}
#pipeline-drawer.pd-just-opened #pd-body > *:nth-child(5){animation-delay:.34s}
#pipeline-drawer.pd-just-opened #pd-body > *:nth-child(6){animation-delay:.40s}
#pipeline-drawer.pd-just-opened #pd-body > *:nth-child(n+7){animation-delay:.46s}

/* Header bar (s-caeoxtz = the row holding #pd-header + close X) */
#pipeline-drawer .s-caeoxtz{margin:0 !important;padding:17px 20px;flex-shrink:0;
  align-items:flex-start !important;gap:12px;border-bottom:1px solid var(--border);
  background:linear-gradient(160deg,rgba(255,255,255,.10),transparent)}
/* #pd-header (s-3bm20p4) — neutralise the forced gold/18px/800; make it an identity block */
#pipeline-drawer .s-3bm20p4{color:var(--text) !important;font-size:14px !important;font-weight:600 !important;
  flex:1;min-width:0;display:flex;align-items:flex-start;gap:13px}
#pipeline-drawer .pd-hd-av{width:52px;height:52px;border-radius:14px;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--void);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;font-family:var(--mono)}
#pipeline-drawer .pd-hd-av img{width:100%;height:100%;object-fit:cover}
#pipeline-drawer .pd-hd-id{flex:1;min-width:0}
#pipeline-drawer .pd-hd-name{font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.15;color:var(--text);word-break:break-word}
#pipeline-drawer .pd-hd-meta{font-size:12px;color:var(--t2);margin-top:3px}
#pipeline-drawer .pd-hd-track{font-family:var(--mono);font-size:11px;color:var(--gold);margin-top:3px;letter-spacing:.5px}
#pipeline-drawer .pd-hd-stage{font-size:11px;font-weight:800;margin-top:6px}

/* Scrollable body region */
#pipeline-drawer #pd-body{flex:1;overflow-y:auto;padding:18px 20px 28px;-webkit-overflow-scrolling:touch}

/* Body panels — glass facet */
#pipeline-drawer .pd-section{
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 42%,var(--panel)),linear-gradient(320deg,var(--gdim),transparent 60%);
  border:1px solid rgba(255,255,255,.20);border-radius:14px;padding:16px;margin-bottom:14px;
  box-shadow:0 8px 26px -12px rgba(0,0,0,.42)}
#pipeline-drawer .pd-section-title{color:var(--gold);font-size:10.5px;letter-spacing:1.6px}
#pipeline-drawer .pd-field{font-size:12.5px;padding:7px 0}
#pipeline-drawer .pd-ref-card{background:var(--panel);border:1px solid var(--border);border-left-width:3px;border-radius:11px}

/* Stage stepper inside the drawer — a touch more refined */
#pipeline-drawer .pd-stages{margin-bottom:16px}
#pipeline-drawer .pd-stage-num{box-shadow:0 0 0 3px rgba(0,0,0,.18)}
#pipeline-drawer .pd-stage-step.current .pd-stage-num{box-shadow:0 0 12px var(--gglow)}

/* Time-to-Hire premium tiles (reuses .rcp-kpi; 3-up with a sub-label) */
.rcp-kpis.tth-kpis{grid-template-columns:repeat(3,1fr)}
.tth-sub{font-size:10px;color:var(--t3);margin-top:3px;font-weight:600}
@media(max-width:560px){.rcp-kpis.tth-kpis{grid-template-columns:1fr}}

/* ════ Premium pass — HR Ops sections (2026-06-07): IATN Registry, Leave Balance,
   Probation Certificate Registry, Live Workforce Grid. Table rules are scoped by
   section ID to avoid touching the hashed (s-*) classes those tables share. ════ */

/* Shared premium table wraps */
.wf-table-wrap,
#iatn-registry-section .s-qtrfdal,
#cert-registry-section .s-qtrfdal{
  border-radius:16px !important;border:1px solid rgba(255,255,255,.20) !important;
  background:linear-gradient(160deg,rgba(255,255,255,.07),var(--panel)) !important;
  box-shadow:0 10px 30px -14px rgba(0,0,0,.4) !important;overflow-x:auto;}

/* Gold uppercase headers + gold-tint hover (Live Workforce Grid, IATN, Cert Registry) */
.wf-table thead th,
#iatn-registry-section table thead th,
#cert-registry-section .rev-hist-table th{color:var(--gold) !important;background:rgba(0,0,0,.28);}
.wf-table tbody tr:hover,
#iatn-registry-section table tbody tr:hover,
#cert-registry-section .rev-hist-table tbody tr:hover{background:rgba(212,175,55,.06) !important;}

/* Leave Balance — premium facet cards */
#leave-balance-section .lb-card{position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.035) 42%,var(--panel)),linear-gradient(320deg,var(--gdim),transparent 60%);
  border:1px solid rgba(255,255,255,.20);border-radius:16px;
  box-shadow:0 8px 26px -12px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);
  animation:kpiIn .5s cubic-bezier(.16,1,.3,1) both;
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s;}
#leave-balance-section .lb-card:hover{border-color:var(--gglow);transform:translateY(-3px);box-shadow:0 18px 44px -12px rgba(0,0,0,.5);}
#leave-balance-section .lb-av{border-radius:12px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--void);border:none;}
#leave-balance-section .lb-av img{border-radius:12px;}

/* ════ Premium modal shells + mobile fit (2026-06-07) — page-wide pass ════
   Premium base for modals that use .modal-card (not .modal-box). Additive:
   .modal-card had no bg base on this page. The pipeline-drawer keeps its own
   #pipeline-drawer rules (higher specificity). Buttons/inputs/JS untouched. */
.modal-overlay .modal-card{
  background:linear-gradient(165deg,var(--base),var(--deep));
  border:1px solid rgba(255,255,255,.20);border-radius:20px;
  box-shadow:0 32px 90px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.06);}
/* pipeline-drawer is a full-height docked panel — keep its square left edge */
#pipeline-drawer .modal-card.s-548tebl{border-radius:0;border-left:1px solid var(--border);}

/* Mobile fit — premium modals stay inside the viewport with comfortable padding */
@media(max-width:640px){
  .modal-box{padding:22px !important;}
  .modal-overlay .modal-card{border-radius:16px !important;}
  #pipeline-drawer .modal-card.s-548tebl{border-radius:0 !important;}
}
@media(max-width:400px){
  .modal-box{padding:18px !important;}
}

/* ════ Premium section labels (2026-06-08 — VP "apply premium on all label") ════
   Every .sec-lbl on the page: gold chip-icon with glow, glowing gold mono-spaced
   text, and a gold gradient rule that fades out — replaces the flat gold text +
   plain border line. Single class → reaches all 89 labels.                       */
.sec-lbl{ color:var(--gold) !important; text-shadow:0 0 14px var(--gglow); gap:12px; }
.sec-lbl i{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(145deg, var(--gold2), var(--gold));
  color:var(--void) !important; text-shadow:none;
  box-shadow:0 4px 14px var(--gglow), inset 0 1px 0 rgba(255,255,255,.45);
}
.sec-lbl::after{ background:linear-gradient(90deg, var(--gglow), transparent); height:1px; }
@media(max-width:640px){ .sec-lbl i{ width:26px; height:26px; } }

/* ════ Register premium — gold mono table headers + row hover (styling only) ════
   Step 2 of incremental restore. NO layout/overflow/width/stretch — just colour.
   Covers Probation Cert Registry, IATN, Intelligence Scores, Vetting/Clearance,
   NDPA, DSAR, Conflict of Interest, Global IP & NDA, Certificates of Service.   */
#iatn-registry-section .s-8mzqqhe thead th, #clearance-section .dtbl thead th,
#ndpa-section .dtbl thead th, #dsar-section .dtbl thead th, #coi-section .dtbl thead th,
#ipnda-section .dtbl thead th, #svccert-section .dtbl thead th, #cert-registry-section .dtbl thead th,
#cert-registry-section .rev-hist-table thead th, #intelligence-section .rota-scroll .dtbl thead th{
  background:linear-gradient(180deg,var(--gdim),rgba(0,0,0,.20)) !important;
  color:var(--gold) !important; border-bottom:1px solid var(--gglow) !important;
  font-family:var(--mono); letter-spacing:.4px;
}
#iatn-registry-section .s-8mzqqhe tbody tr, #clearance-section .dtbl tbody tr,
#ndpa-section .dtbl tbody tr, #dsar-section .dtbl tbody tr, #coi-section .dtbl tbody tr,
#ipnda-section .dtbl tbody tr, #svccert-section .dtbl tbody tr, #cert-registry-section .dtbl tbody tr,
#cert-registry-section .rev-hist-table tbody tr, #intelligence-section .rota-scroll .dtbl tbody tr{ transition:background .25s ease; }
#iatn-registry-section .s-8mzqqhe tbody tr:hover, #clearance-section .dtbl tbody tr:hover,
#ndpa-section .dtbl tbody tr:hover, #dsar-section .dtbl tbody tr:hover, #coi-section .dtbl tbody tr:hover,
#ipnda-section .dtbl tbody tr:hover, #svccert-section .dtbl tbody tr:hover, #cert-registry-section .dtbl tbody tr:hover,
#cert-registry-section .rev-hist-table tbody tr:hover, #intelligence-section .rota-scroll .dtbl tbody tr:hover{ background:var(--gdim) !important; }

/* ════ Exit Reasons Breakdown — premium bar rows (match the audit-row look) ════
   Step 3 of incremental restore. Styling only. */
#exit-reasons-chart .exit-reason-row{
  background:linear-gradient(160deg,rgba(255,255,255,.06),transparent 62%);
  border:1px solid rgba(255,255,255,.10); border-left:3px solid var(--gglow);
  border-radius:10px; padding:10px 12px; margin-bottom:8px;
}
#exit-reasons-chart .exit-reason-bar-fill{box-shadow:0 0 10px var(--gglow);}

/* ════ HR Document Library + Handbook & Guides — 3-up grid, 9 visible + Load More ════
   Step 4 (safe retry). 3-up computer / 2-up <=980 / 1-up <=640. Only 9 shown until JS
   adds .dl-ready; Load More reveals 9 more per click. */
.hr-guides-grid{grid-template-columns:repeat(3,1fr) !important;}
.hrdl-grid{grid-template-columns:repeat(3,1fr) !important;}
@media(max-width:980px){.hr-guides-grid,.hrdl-grid{grid-template-columns:repeat(2,1fr) !important;}}
@media(max-width:640px){.hr-guides-grid,.hrdl-grid{grid-template-columns:1fr !important;}}
#hr-guides-grid:not(.dl-ready) > .hr-guide-card:nth-child(n+10){display:none !important;}
#hrdl-grid:not(.dl-ready) > *:nth-child(n+10){display:none !important;}
.dl-more-wrap{display:flex;justify-content:center;margin:16px 0 4px;}
.dl-more-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border-radius:30px;cursor:pointer;
  background:linear-gradient(135deg,var(--gdim),var(--panel));border:1px solid var(--gglow);color:var(--gold);
  font-weight:800;font-size:12px;letter-spacing:.5px;text-transform:uppercase;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;}
.dl-more-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(0,0,0,.5),0 0 18px var(--gglow);}
@media(max-width:640px){.dl-more-btn{width:100%;justify-content:center;min-height:44px;}}

/* ── Doc Library fix: cards live in the INNER .hrdl-grid (#hrdl-grid > .hrdl-grid),
   recreated on each render — target THAT for the 3-up layout + the 9-cap. The #hrdl-grid
   id holds only the wrapper, so the earlier rules never reached the cards. ── */
#hrdl-mount-ops .hrdl-grid{grid-template-columns:repeat(3,1fr) !important;}
@media(max-width:980px){#hrdl-mount-ops .hrdl-grid{grid-template-columns:repeat(2,1fr) !important;}}
@media(max-width:640px){#hrdl-mount-ops .hrdl-grid{grid-template-columns:1fr !important;}}
#hrdl-mount-ops .hrdl-grid:not(.dl-ready) > *:nth-child(n+10){display:none !important;}

/* ── Doc Library + Guides: keep 3-up on MOBILE too (VP) — the HR Monitor page is wide
   and scrolls horizontally, so cards should sit side-by-side on phones, not stack in a
   single column. Overrides the 2-up/1-up collapses above + the module's own 1fr@640. ── */
@media(max-width:980px){
  #hrdl-mount-ops .hrdl-grid,#hr-guides-grid{grid-template-columns:repeat(3,1fr) !important;}
}
@media(max-width:640px){
  #hrdl-mount-ops .hrdl-grid,#hr-guides-grid{grid-template-columns:repeat(3,1fr) !important;gap:8px;}
}

/* ── Doc Library + Guides on MOBILE: keep cards at full (computer) width and let the row
   SPREAD to the right (the HR page scrolls horizontally) — do NOT shrink 3 into the phone
   viewport. Fixed 300px columns + width:max-content so the grid grows past the viewport
   instead of squeezing. Overrides the repeat(3,1fr) above. ── */
@media(max-width:640px){
  #hrdl-mount-ops .hrdl-grid,#hr-guides-grid{
    grid-template-columns:repeat(3,300px) !important;
    width:max-content !important; max-width:none !important;
  }
}

/* ── HR Handbook & Guides: keep cards at their ORIGINAL natural width (340px) — do NOT
   stretch each to 1fr — and spread the row to the right (width:max-content) the same way
   the HR Library does. Overrides this session's repeat(3,1fr) + mobile repeat(3,300px). ── */
#hr-guides-grid{grid-template-columns:repeat(3,340px) !important; width:max-content !important; max-width:none !important;}
@media(max-width:980px){#hr-guides-grid{grid-template-columns:repeat(3,340px) !important;}}
@media(max-width:640px){#hr-guides-grid{grid-template-columns:repeat(3,340px) !important;}}

/* ── Beat #hr-guides-section .hr-guides-grid (id+class, line ~3208) which forced 1fr on
   mobile (= single stretched column). #hr-guides-section #hr-guides-grid is id+id → higher
   specificity, so the handbook keeps original 340px cards + spreads right on mobile too. ── */
#hr-guides-section #hr-guides-grid{grid-template-columns:repeat(3,340px) !important; width:max-content !important; max-width:none !important; gap:16px !important;}
@media(max-width:640px){#hr-guides-section #hr-guides-grid{grid-template-columns:repeat(3,340px) !important; width:max-content !important;}}

/* ── Registers: on MOBILE ONLY, stretch each table to its natural content width and
   spread it to the right (page scrolls horizontally) — fit to where the data ends, do
   NOT shrink or inner-scroll. Card (.glass) + wrap (.s-qtrfdal) grow to content; table
   = max-content; cells nowrap so columns keep their natural size. Computer untouched.
   Vetting/Clearance · NDPA · DSAR · Conflict of Interest · Global IP & NDA · Certs. ── */
@media(max-width:640px){
  #clearance-section,#ndpa-section,#dsar-section,#coi-section,#ipnda-section,#svccert-section{ overflow:visible !important; }
  #clearance-section .glass,#ndpa-section .glass,#dsar-section .glass,#coi-section .glass,
  #ipnda-section .glass,#svccert-section .glass,
  #clearance-section .s-qtrfdal,#ndpa-section .s-qtrfdal,#dsar-section .s-qtrfdal,
  #coi-section .s-qtrfdal,#ipnda-section .s-qtrfdal,#svccert-section .s-qtrfdal{
    overflow:visible !important; width:max-content !important; min-width:100% !important; max-width:none !important;
  }
  #clearance-section .dtbl,#ndpa-section .dtbl,#dsar-section .dtbl,
  #coi-section .dtbl,#ipnda-section .dtbl,#svccert-section .dtbl{
    width:max-content !important; min-width:0 !important; table-layout:auto;
  }
  #clearance-section .dtbl th,#clearance-section .dtbl td,
  #ndpa-section .dtbl th,#ndpa-section .dtbl td,
  #dsar-section .dtbl th,#dsar-section .dtbl td,
  #coi-section .dtbl th,#coi-section .dtbl td,
  #ipnda-section .dtbl th,#ipnda-section .dtbl td,
  #svccert-section .dtbl th,#svccert-section .dtbl td{ white-space:nowrap !important; }
}

/* ── Premium on the register stat chips (.gov-kpi-pill — Clearance/NDPA/DSAR/COI/IP&NDA
   TOTAL·CLEAR·PENDING·… counts). Was plain var(--panel) glass; now premium gold-tinted
   glass with glow + lift on hover, matching the kit. !important beats hr-governance.js's
   JS-injected base style. Page-wide (these pills only appear in these registers here). ── */
.gov-kpi-pill{
  background:linear-gradient(150deg,rgba(255,255,255,.11),var(--gdim)) !important;
  border:1px solid var(--gglow) !important;
  box-shadow:0 6px 20px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter:blur(13px) !important; -webkit-backdrop-filter:blur(13px) !important;
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-color .25s;
}
.gov-kpi-pill:hover{
  transform:translateY(-2px); border-color:var(--gold) !important;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.55), 0 0 16px var(--gglow) !important;
}
.gov-kpi-lbl{ color:var(--gold) !important; opacity:.85; }

/* ── Pipeline card header: keep the original side-by-side layout (avatar | name | right
   column) — do NOT stack the right column into a long vertical run (that was the over-fix).
   Just stop the owner row's human icon from overlapping the applicant name: give the name
   block min-width:0 so it wraps within its own space, and the right column flex-shrink:0 so
   it holds its place. Safe on desktop; fixes the mobile overlap. ── */
.pl-card-hdr .u-flex-min{min-width:0;}
.pl-card-hdr .pl-name{word-break:break-word;}
.pl-card-hdr .s-e8vgo5r{flex-shrink:0;}
.pl-owner i{flex-shrink:0;}

/* ── Recruitment card headcount line: keep a clear gap between "Headcount Target: N"
   and "Started: … · Hired: … · Remaining: …" so the numbers never crowd, and wrap
   cleanly on narrow cards (the line grew when Hired was added). ── */
.s-wbommq5{ gap:6px 18px; flex-wrap:wrap; align-items:baseline; }

/* ── IATN Registry + IT Registration Tracker: on MOBILE ONLY, stretch the table to its
   natural content width and spread it to the right (the wide HR Monitor page scrolls) —
   fit all columns with NO inner scrollbar, instead of scrolling inside the table box.
   Computer untouched. (2026-06-09, per VP — matches the other registers' mobile pattern.) ── */
@media(max-width:640px){
  #iatn-registry-section, #it-tracker-section{ overflow:visible !important; }
  #iatn-registry-section .glass, #iatn-registry-section .s-qtrfdal,
  #it-tracker-section .it-tbl-wrap{
    overflow:visible !important; width:max-content !important; min-width:100% !important; max-width:none !important;
  }
  #iatn-registry-section .s-8mzqqhe, #it-tracker-section .it-tbl{
    width:max-content !important; min-width:0 !important; table-layout:auto;
  }
  #iatn-registry-section .s-8mzqqhe th, #iatn-registry-section .s-8mzqqhe td,
  #it-tracker-section .it-tbl th, #it-tracker-section .it-tbl td{ white-space:nowrap !important; }
}

/* ════ IATN Registry — full PREMIUM pass (2026-06-09, per VP) ════
   The card was the flat base .glass (no premium). Bring it to the kit standard:
   premium glass gradient + glow + top gold hairline, BOLD gold table headers, and
   premium glass on the status count chips. (Pure styling, register-premium pattern.) */
#iatn-registry-section .glass{
  background:linear-gradient(165deg,rgba(255,255,255,.12),rgba(255,255,255,.04) 46%,var(--panel)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 18px 48px -18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.09) !important;
  position:relative;
}
#iatn-registry-section .glass::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gglow),transparent); border-radius:16px 16px 0 0; pointer-events:none;
}
/* Bolder gold header (out-specifies the t3 hashed th classes) */
#iatn-registry-section .s-8mzqqhe thead th{
  background:linear-gradient(180deg,var(--gdim),rgba(0,0,0,.30)) !important;
  color:var(--gold) !important; border-bottom:1px solid var(--gold) !important;
  text-shadow:0 0 10px var(--gglow); font-family:var(--mono); letter-spacing:.5px;
}
#iatn-registry-section .s-8mzqqhe tbody tr{ transition:background .25s ease; }
#iatn-registry-section .s-8mzqqhe tbody tr:hover{ background:var(--gdim) !important; }
/* Status count chips → premium glass */
#iatn-registry-counts > span{
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  box-shadow:0 5px 14px -7px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.10);
}

/* ── Start Processing modal: keep the close (X) button clear of the title/sub + the
   candidate-form content (2026-06-09). The X is absolute top:14/right:14 (44px); reserve
   that corner so "Start Processing Candidates" + the position sub-line + the candidate
   card headers never run under it. ── */
#sp-modal .modal-title,
#sp-modal .modal-sub { padding-right: 56px; }
#sp-modal .modal-close { z-index: 20; }
@media(max-width:640px){
  #sp-modal .modal-title, #sp-modal .modal-sub { padding-right: 46px; }
}


/* ════ ATR premium table + PIN access bar (2026-06-10) ════ */
.atr-howto{display:flex;gap:11px;align-items:flex-start;background:linear-gradient(160deg,var(--gdim),rgba(0,0,0,.25));border:1px solid var(--gglow);border-radius:12px;padding:13px 16px;margin-bottom:14px;font-size:12.5px;line-height:1.65;color:var(--t2);}
.atr-howto i{color:var(--gold);font-size:16px;margin-top:2px;text-shadow:0 0 10px var(--gglow);}
.atr-tbl-wrap{overflow-x:auto;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:linear-gradient(165deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 46%,var(--panel));box-shadow:0 16px 42px -16px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);}
.atr-tbl{width:100%;border-collapse:collapse;min-width:760px;}
.atr-tbl thead th{background:linear-gradient(180deg,var(--gdim),rgba(0,0,0,.30));color:var(--gold) !important;border-bottom:1px solid var(--gold);text-shadow:0 0 10px var(--gglow);font-family:var(--mono);font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;text-align:left;padding:11px 14px;white-space:nowrap;}
.atr-tbl tbody td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);font-size:12.5px;color:var(--t2);vertical-align:middle;}
.atr-tbl tr.atr-row{transition:background .25s;}
.atr-tbl tr.atr-row:hover{background:var(--gdim);}
.atr-tbl tr.atr-detail-row > td{border-bottom:1px solid rgba(255,255,255,.14);}
.atr-pin-bar{display:flex;flex-direction:column;gap:7px;min-width:230px;background:rgba(240,200,50,.05);border:1px dashed var(--gglow);border-radius:10px;padding:9px 11px;}
.atr-pin-bar input{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:7px;color:var(--text);font-family:var(--mono);letter-spacing:2px;padding:7px 10px;font-size:13px;width:100%;min-width:0;}
.atr-pin-bar input:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 2px var(--gdim);}
@media(max-width:640px){
  .atr-tbl{min-width:680px;}
  .atr-pin-bar{min-width:200px;}
}

/* ── Avatar audit (2026-06-12): photos in every avatar circle ─────────
   All 13 initials-only sites now render the user's photo via the shared
   avatarHtml() helper. These rules make the <img> fill each container. */
.wf-av,.drawer-av,.s-vtuvytx,.s-rznzmsa{overflow:hidden;}
.wf-av img,.drawer-av img,.s-vtuvytx img,.s-rznzmsa img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}

/* ── Notification bell on mobile (2026-06-12): the absolute-positioned panel
   was clipped/off-viewport on small screens, so taps appeared to do nothing.
   Fixed positioning pins it to the viewport — always visible when open. */
@media(max-width:640px){
  .sys-notif-panel{position:fixed !important;top:64px;left:8px;right:8px;width:auto;max-height:72vh;}
  .snp-body{max-height:calc(72vh - 44px);}
}

/* ── Native-feel load (VP 2026-06-12) ────────────────────────────────────
   1) LAYOUT RESERVATION — same containment the Exec Board has used since
   audit: off-screen sections render lazily AND keep a reserved height, so
   data arriving later cannot shove the page around ("sections loading one
   by one"). Matches every top-level content section; sticky bars, drawers,
   modals and the small kpi/alert strips are deliberately not matched. */
#hr-main-wrap > [id$="-section"]{content-visibility:auto;contain-intrinsic-size:auto 620px;}

/* 2) SINGLE-REVEAL VEIL — branded cover held until the first real data
   paint, then one smooth fade. The page appears complete, like a native
   load, instead of skeleton-by-skeleton. */
#hm-veil{position:fixed;inset:0;z-index:6000;background:var(--void,#0c1109);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;opacity:1;transition:opacity .45s cubic-bezier(.16,1,.3,1);}
#hm-veil img{height:78px;width:auto;animation:hmVeilPulse 2.2s ease-in-out infinite;filter:drop-shadow(0 0 22px rgba(212,175,55,.3));}
#hm-veil .hm-veil-txt{font-family:var(--mono,monospace);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--t3,rgba(242,247,238,.62));}
#hm-veil.out{opacity:0;pointer-events:none;}
@keyframes hmVeilPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.05);opacity:.85;}}

/* ── Structural skeleton system (VP 2026-06-12) ──────────────────────────
   Layout-stability pass: every data container renders a skeleton that
   matches the SHAPE of its final content (table rows / list rows / card
   grids) instead of a one-line "Loading…" that snaps to full height when
   data lands. All widths are fluid (%), the card grid uses auto-fill so it
   collapses to a single column on narrow viewports with the same breakpoint
   behaviour as the real grids — no horizontal scroll, no zero-height flash. */
.hm-sk{height:12px;border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.11) 50%,rgba(255,255,255,.05) 75%);background-size:200% 100%;animation:hmSkShim 1.4s ease-in-out infinite;}
@keyframes hmSkShim{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.hm-sk-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid rgba(255,255,255,.05);}
.hm-sk-row:last-child{border-bottom:none;}
.hm-sk-av{width:34px;height:34px;border-radius:50%;flex-shrink:0;background:rgba(255,255,255,.07);animation:hmSkShim 1.4s ease-in-out infinite;background-image:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.11) 50%,rgba(255,255,255,.05) 75%);background-size:200% 100%;}
.hm-sk-lines{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;}
.hm-sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
.hm-sk-card{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:110px;background:rgba(255,255,255,.02);}
.hm-sk-tr td{padding:12px 14px !important;}
/* Reserve breathing room while seeded so neighbours don't snap upward. */
.hm-seeded{min-height:120px;}
tbody.hm-seeded{min-height:0;}
/* Mobile: tighter intrinsic reservation for contained sections. */
@media(max-width:640px){
  #hr-main-wrap > [id$="-section"]{contain-intrinsic-size:auto 460px;}
  .hm-sk-grid{grid-template-columns:1fr;}
}

/* ── Scroll-smoothness release (VP 2026-06-12) ───────────────────────────
   content-visibility's reserved heights make the FIRST paint fast, but while
   scrolling they swap estimate→real height per section, which "hooks" the
   scroll. Once the page has settled (snapshot painted + idle), JS adds
   .hm-cv-off on <html>: every section is fully laid out once, and from then
   on scrolling glides over exact geometry — no per-section corrections. */
html.hm-cv-off #hr-main-wrap > [id$="-section"]{content-visibility:visible;contain-intrinsic-size:auto;}

/* ── No replays after settle (VP 2026-06-12) ─────────────────────────────
   Entrance animations are for the ENTRANCE. After the page settles
   (html.hm-cv-off), re-renders triggered by lazy loaders / listener updates
   must swap content silently — recreated cards replaying kpiIn-style
   entrances read as "sections replaying / flashing" while scrolling.
   (.alert-item is exempt: its renderer is hash-guarded, so an animation
   there means a genuinely NEW alert, which should draw the eye.) */
html.hm-cv-off #hr-main-wrap :is(.arc-tile,.case-card,.chart-card,.ddcp-kpi-card,.di-widget,.doc-item,.kpi-pill,.lq-card,.perf-card,.prob-card,.risk-dept-card,.succ-prob-row,.succ-tenure-bar-row,.ti-bar-row){animation:none !important;opacity:1 !important;transform:none !important;}

/* PIN verifying spinner + ring pulse (VP 2026-06-13) — keep the user informed
   that authentication is in progress during the (cold-start) server check. */
.pin-verifying-msg{color:var(--gold,#f0c832);display:inline-flex;align-items:center;gap:8px;font-weight:600;}
.pin-spin{display:inline-block;width:14px;height:14px;border-radius:50%;border:2.5px solid rgba(240,200,50,.25);border-top-color:var(--gold,#f0c832);animation:spin .65s linear infinite;flex:none;}
#pin-gate.pin-verifying .pin-logo-ring{animation:pinSweepRotate 1s linear infinite !important;}
#pin-gate.pin-verifying .pin-confirm-key{opacity:.6;}

/* ════════════════════════════════════════════════════════════════
   WARM-BOOT — suppress entrance-animation REPLAYS on return loads
   (2026-06-13, VP). An inline <head> flag adds html.ip-warm on every
   load AFTER the first, so sections/cards/KPIs sit still instead of
   re-playing fade/slide entrances each time the page loads or a
   listener re-renders. Animation-only — NO content is cached to
   localStorage (this page shows confidential all-staff data, so the
   full instant-paint snapshot pattern is deliberately NOT used here).
   The first-ever load still plays the entrance animations once.
   ════════════════════════════════════════════════════════════════ */
html.ip-warm .sec-head,
html.ip-warm .glass,
html.ip-warm .glass-gold,
html.ip-warm .glass-green,
html.ip-warm .kpi-pill,
html.ip-warm .di-widget,
html.ip-warm .alert-item,
html.ip-warm .arc-tile,
html.ip-warm .chart-card,
html.ip-warm .prob-card,
html.ip-warm .lq-card,
html.ip-warm .perf-card,
html.ip-warm .doc-item,
html.ip-warm .case-card,
html.ip-warm .succ-prob-row,
html.ip-warm .risk-dept-card {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ── Manual document upload: confidential assessment questions ─────────── */
.udq{margin:14px 0;padding:13px 14px;border:1px solid var(--border);border-radius:10px;background:rgba(240,200,50,.05)}
.udq-choices{display:flex;gap:16px;margin:6px 0 10px;flex-wrap:wrap}
.udq-choices label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--t2);cursor:pointer}
.udq-choices input[type=radio]{width:16px;height:16px;accent-color:var(--gold)}
.udq-note{font-size:11px;color:var(--t3);line-height:1.5;margin-top:4px}
#udq-followup{border-top:1px dashed var(--border);padding-top:10px;margin-top:4px}