/* ================================================================
   DTTASA MISSION CONTROL v9 — OBSIDIAN COMMAND
   Military-Luxury | Cinzel + IBM Plex Mono + DM Sans
   Full mobile support + Live Mission Clock Widget
   ================================================================ */
:root {
  --void:    #0c1109;
  --deep:    #111a0e;
  --base:    #172213;
  --lift:    #1e2e1b;
  --panel:   rgba(255,255,255,0.10);
  --panel2:  rgba(255,255,255,0.23);
  --border:  rgba(255,255,255,0.21);
  --bord2:   rgba(255,255,255,0.30);
  --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);
  --blue:    #4a9eff;
  --bdim:    rgba(74,158,255,0.12);
  --text:    #f2f7ee;
  --t2:      rgba(242,247,238,0.88);
  --t3:      rgba(242,247,238,0.62);
  --mono:    'IBM Plex Mono', monospace;
  --disp:    'Cinzel', serif;
  --body:    'DM Sans', sans-serif;
  --sbw:     278px;
  --hdh:     70px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width:100%; height:100%; overflow:hidden; background:var(--void); color:var(--text); font-family:var(--body); font-size:15px; -webkit-font-smoothing:antialiased; }

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

/* ── SHELL ── */
#shell { position:fixed; inset:0; display:flex; flex-direction:column; z-index:1; overflow:hidden; }

/* ================================================================
   HEADER
   ================================================================ */
#hdr {
  height:var(--hdh); flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px;
  background:rgba(4,8,4,.78);
  border-bottom:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(40px) saturate(180%); -webkit-backdrop-filter:blur(40px) saturate(180%);
  box-shadow:0 1px 0 rgba(255,255,255,.04), 0 4px 40px rgba(0,0,0,.45);
  position:relative; z-index:500;
  animation:hdrDrop .7s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
@keyframes hdrDrop { from{transform:translateY(-100%);opacity:0;} to{transform:translateY(0);opacity:1;} }

.hdr-left { display:flex; align-items:center; gap:12px; }
#hamburger {
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:38px; height:38px; background:var(--panel2); border:1px solid var(--border);
  border-radius:9px; cursor:pointer; transition:all .25s; flex-shrink:0;
}
#hamburger:hover { border-color:var(--gold); background:var(--gdim); }
#hamburger span { width:16px; height:2px; background:var(--t2); border-radius:2px; transition:all .35s var(--ease-out, cubic-bezier(.16,1,.3,1)); display:block; }
#hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
#hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
#hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.brand { display:flex; flex-direction:row; align-items:center; gap:10px; }
.brand-text { display:flex; flex-direction:column; gap:1px; }
.brand-logo {
  font-family:var(--disp); font-size:24px; font-weight:900; letter-spacing:8px; 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: 11px; letter-spacing:3px; color:var(--gold); opacity:.55; text-transform:uppercase; }

.hdr-center {
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:14px;
}
.sys-pill {
  display:flex; align-items:center; gap:7px;
  background:var(--gndim); border:1px solid rgba(67,177,75,0.25);
  padding:5px 14px; border-radius:20px;
  font-size:10.5px; font-weight:800; color:var(--green); letter-spacing:1.5px;
}
.pip { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.pip-green { background:var(--green); box-shadow:0 0 8px var(--green); animation:blink 2s infinite; }
.pip-gold  { background:var(--gold);  box-shadow:0 0 7px var(--gold); animation:blink 1.4s infinite; }
.pip-red   { background:var(--red);   box-shadow:0 0 7px var(--red);  animation:blink 0.8s infinite; }
.pip-grey  { background:rgba(255,255,255,0.25); }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.18;} }

.hdr-date { font-size:10.5px; color:var(--t3); letter-spacing:1px; text-transform:uppercase; }
.hdr-right { display:flex; align-items:center; gap:10px; }
.hdr-clock {
  font-family:var(--mono); font-size:15px; font-weight:700; color:var(--gold);
  border:1px solid rgba(212,175,55,.28); padding:7px 16px; border-radius:8px;
  background:var(--gdim); letter-spacing:2px; white-space:nowrap;
}
.hdr-icon-btn {
  position:relative; 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-badge {
  position:absolute; top:-4px; right:-4px; background:var(--red); color:#fff;
  font-size: 11px; font-weight:700; min-width:16px; height:16px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  padding:0 3px; animation:badgePop .3s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
@keyframes badgePop { from{transform:scale(0);} to{transform:scale(1);} }
.hdr-notif-wrap { position:relative; }
.hdr-notif-dd {
  position:fixed; top:var(--hdh); right:10px; width:308px;
  background:var(--deep); border:1px solid var(--border);
  border-radius:13px; box-shadow:0 18px 52px rgba(0,0,0,.75);
  display:none; z-index:99999; overflow:hidden;
}
.hdr-notif-dd.open { display:block; animation:ddIn .2s var(--ease-out, cubic-bezier(.16,1,.3,1)) both; }
@keyframes ddIn { from{opacity:0;transform:translateY(-7px);} to{opacity:1;transform:none;} }
.hdr-notif-hdr { padding:12px 16px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.hdr-notif-clear { font-size:11px; color:var(--t3); cursor:pointer; background:none; border:none; transition:color .2s; }
.hdr-notif-clear:hover { color:var(--gold); }
.hdr-notif-list { max-height:280px; overflow-y:auto; }
.hdr-notif-item { padding:10px 14px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s; display:flex; gap:9px; align-items:flex-start; }
.hdr-notif-item:hover { background:var(--panel); }
.hdr-notif-item.unread { background:rgba(212,175,55,.04); }
.hdr-notif-item:not(.unread) { opacity:.52; }
.hdr-notif-item:not(.unread):hover { opacity:.85; }
.hdr-ni-icon { width:36px; height:36px; border-radius:50%; background:var(--gdim); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:12px; flex-shrink:0; }
.hdr-ni-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px; }
.hdr-ni-msg { font-size:12px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:210px; }
.hdr-ni-time { font-size:11px; color:var(--t3); margin-top:2px; }
.hdr-notif-empty { padding:22px; text-align:center; color:var(--t3); font-size:12px; }

/* ================================================================
   BODY SPLIT
   ================================================================ */
#body { flex:1; display:flex; overflow:hidden; position:relative; z-index:2; }

/* Mobile overlay */
#sb-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.65); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); z-index:399;
}
#sb-overlay.show { display:block; animation:fadeIn .25s var(--ease-out, cubic-bezier(.16,1,.3,1)); }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes mIn { from{opacity:0;transform:translateY(22px) scale(.96);} to{opacity:1;transform:none;} }

/* ================================================================
   SIDEBAR
   ================================================================ */
#sidebar {
  width:var(--sbw); flex-shrink:0;
  background:rgba(6,11,6,.82);
  backdrop-filter:blur(36px) saturate(160%); -webkit-backdrop-filter:blur(36px) saturate(160%);
  border-right:1px solid rgba(255,255,255,.07);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.04), 1px 0 32px rgba(0,0,0,.45);
  display:flex; flex-direction:column; overflow:hidden;
  animation:sbIn .75s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
  transition:transform .38s var(--ease-out, cubic-bezier(.16,1,.3,1)), box-shadow .38s;
  z-index:400; position:relative;
}
@keyframes sbIn { from{transform:translateX(-100%);opacity:0;} to{transform:translateX(0);opacity:1;} }

.sb-inner { padding:18px 13px 20px; flex:1; display:flex; flex-direction:column; gap:4px; overflow-y:auto; overflow-x:hidden; }
.sb-inner::-webkit-scrollbar { width:3px; }
.sb-inner::-webkit-scrollbar-thumb { background:rgba(212,175,55,.2); border-radius:10px; }

/* Profile card */
.profile-card {
  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,.18); border-left:2px solid rgba(212,175,55,.6);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-radius:14px; padding:15px; display:flex; align-items:flex-start; gap:12px;
  margin-bottom:10px; animation:pIn .8s .15s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 28px -14px rgba(0,0,0,.4);
  transition:border-color .3s, box-shadow .3s; position:relative;
}
.profile-card:hover { border-color:rgba(212,175,55,.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 28px rgba(0,0,0,.4); }
@keyframes pIn { from{opacity:0;transform:translateX(-18px);} to{opacity:1;transform:translateX(0);} }
.avatar {
  width:44px; height:44px; border-radius:11px; flex-shrink:0;
  background:linear-gradient(135deg,var(--green),var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--disp); font-size:19px; font-weight:700; color:var(--deep);
}
.profile-card > div:last-child { min-width:0; flex:1; padding-top:2px; }
.prof-name { font-size:13.5px; font-weight:700; line-height:1.4; overflow-wrap:break-word; color:var(--text); }
.prof-role { font-size:11.5px; color:var(--t2); margin-top:3px; letter-spacing:.5px; line-height:1.45; overflow-wrap:break-word; }

/* Ops health */
.ops-block {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); border-radius:13px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  padding:14px; margin-bottom:10px;
}
.ops-lbl { font-family:var(--disp); font-size: 11px; font-weight:700; letter-spacing:2px; color:var(--gold); text-transform:uppercase; margin-bottom:11px; }
.ops-row { display:flex; justify-content:space-between; align-items:center; font-size:12px; margin-bottom:6px; }
.ops-row .k { color:var(--t2); font-size:11px; }
.ops-row .v { font-family:var(--mono); font-weight:700; color:var(--gold); font-size:12px; }
.ops-bar { height:3px; background:rgba(255,255,255,.06); border-radius:10px; margin:7px 0 3px; overflow:hidden; }
.ops-bar-fill { height:100%; background:linear-gradient(90deg,var(--green),var(--gold)); border-radius:10px; transition:transform 1.5s var(--ease-out, cubic-bezier(.16,1,.3,1)); width:100%; transform:scaleX(0); transform-origin:left center; }

/* ================================================================
   LIVE MISSION CLOCK WIDGET
   Reads from localStorage — identical source to timer.html
   Ticks every 250ms for near-perfect sync
   ================================================================ */
#mission-widget {
  background:linear-gradient(135deg,rgba(212,175,55,.07) 0%,rgba(67,177,75,.04) 100%);
  border:1px solid rgba(212,175,55,.2); border-radius:14px;
  padding:15px 13px; margin-bottom:10px; position:relative; overflow:hidden;
  cursor:pointer; transition:all .3s var(--ease-out, cubic-bezier(.16,1,.3,1));
  animation:wgIn .9s .25s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
@keyframes wgIn { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }
#mission-widget::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.5;
}
#mission-widget:hover { border-color:rgba(212,175,55,.42); transform:translateY(-1px); box-shadow:0 8px 28px rgba(0,0,0,.32); }

.wg-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.wg-title { font-size: 11px; font-weight:800; letter-spacing:2px; color:var(--gold); text-transform:uppercase; display:flex; align-items:center; gap:6px; }
.wg-status { display:flex; align-items:center; gap:5px; font-size: 11px; font-weight:800; letter-spacing:1.2px; }

/* The actual timer digits — same monospace font as timer.html */
#widget-elapsed {
  font-family:var(--mono); font-weight:700; letter-spacing:2px; line-height:1;
  display:block; margin-bottom:9px; transition:color .5s, text-shadow .5s;
  font-size:26px; color:var(--t3);
}
#widget-elapsed.active {
  font-size:26px; color:var(--gold2);
  text-shadow:0 0 18px rgba(212,175,55,.4), 0 0 36px rgba(212,175,55,.14);
  animation:glow 2s var(--ease-out, cubic-bezier(.16,1,.3,1)) infinite;
}
#widget-elapsed.debrief { font-size:26px; color:var(--gold); }
@keyframes glow { 0%,100%{text-shadow:0 0 12px rgba(212,175,55,.28);} 50%{text-shadow:0 0 32px rgba(212,175,55,.6),0 0 60px rgba(212,175,55,.2);} }

.wg-shift-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; }
#widget-shift-label { font-size:11px; font-weight:700; letter-spacing:.8px; }
#widget-shift-window { font-family:var(--mono); font-size:11px; color:var(--t3); }

.wg-pbar { height:2px; background:rgba(255,255,255,.06); border-radius:10px; overflow:hidden; margin-bottom:10px; }
.wg-pbar-fill { height:100%; background:linear-gradient(90deg,var(--green),var(--gold)); border-radius:10px; width:100%; transform:scaleX(0); transform-origin:left center; transition:transform 1s linear; }

.wg-launch {
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(212,175,55,.1); border:1px solid rgba(212,175,55,.18);
  border-radius:8px; padding:8px; font-size:10.5px; font-weight:800;
  color:var(--gold); letter-spacing:1px; cursor:pointer; transition:all .25s;
}
.wg-launch:hover { background:var(--gdim); border-color:rgba(212,175,55,.38); }
.wg-launch i { font-size:11px; }

/* ── Mission Clock widget — full redesign ── */
#mission-widget {
  background:linear-gradient(135deg,rgba(212,175,55,.09) 0%,rgba(67,177,75,.05) 100%);
  border:1px solid rgba(212,175,55,.24); border-radius:15px;
  padding:18px 16px 16px; margin-bottom:12px; position:relative; overflow:visible;
  cursor:pointer; transition:all .3s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
#mission-widget:hover { border-color:rgba(212,175,55,.45); transform:translateY(-1px); box-shadow:0 10px 32px rgba(0,0,0,.35); }
.wg-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:6px; }
.wg-title { font-size:9.5px; font-weight:800; letter-spacing:2px; color:var(--gold); text-transform:uppercase; display:flex; align-items:center; gap:5px; flex-shrink:0; }
.wg-status { display:flex; align-items:center; gap:5px; font-size: 11px; font-weight:800; letter-spacing:1px; flex-shrink:0; }
#widget-elapsed {
  font-family:var(--mono); font-weight:700; letter-spacing:1.5px; line-height:1;
  display:block; margin-bottom:8px; font-size:26px; color:var(--t3);
  transition:color .5s, text-shadow .5s;
}
#widget-elapsed.active {
  font-size:26px; color:var(--gold2);
  text-shadow:0 0 18px rgba(212,175,55,.45), 0 0 36px rgba(212,175,55,.18);
  animation:glow 2s var(--ease-out, cubic-bezier(.16,1,.3,1)) infinite;
}
#widget-elapsed.debrief { font-size:26px; color:var(--gold); }
.wg-shift-row { display:flex; flex-direction:column; align-items:flex-start; gap:3px; margin-bottom:8px; }
#wg-shift-name { font-size:12px; font-weight:700; letter-spacing:.5px; }
#wg-shift-win  { font-family:var(--mono); font-size: 11px; color:var(--t3); }
.wg-pbar { height:3px; background:rgba(255,255,255,.06); border-radius:10px; overflow:hidden; margin-bottom:10px; }
.wg-pbar-fill { height:100%; background:linear-gradient(90deg,var(--green),var(--gold)); border-radius:10px; width:100%; transform:scaleX(0); transform-origin:left center; transition:transform 1s linear; }
.wg-launch {
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(212,175,55,.1); border:1px solid rgba(212,175,55,.2);
  border-radius:8px; padding:8px 10px; font-size: 11px; font-weight:800;
  color:var(--gold); letter-spacing:.8px; cursor:pointer; transition:all .25s;
}
.wg-launch:hover { background:var(--gdim); border-color:rgba(212,175,55,.4); }
.wg-launch i { font-size: 11px; }

/* ── nav section ── */
.nav-lbl { font-family:var(--disp); font-size: 11px; font-weight:700; letter-spacing:2.5px; color:var(--gold); text-transform:uppercase; padding:8px 7px 3px; margin-top:4px; }
.nav-div { height:1px; background:var(--border); margin:6px 0; }
.nav-spc { flex:1; min-height:12px; }

/* ── NAV GROUPS ── */
.nav-group { margin-bottom:2px; }
.nav-group-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 8px 5px; cursor:pointer; user-select:none;
  border-radius:8px; transition:background .2s;
}
.nav-group-hdr:hover { background:rgba(255,255,255,.035); }
.nav-group-lbl {
  font-family:var(--disp); font-size: 11px; font-weight:700; letter-spacing:2.5px;
  color:var(--gold); text-transform:uppercase;
}
.nav-group-chevron {
  font-size: 11px; color:rgba(242,175,55,.4);
  transition:transform .3s var(--ease-out, cubic-bezier(.16,1,.3,1)); flex-shrink:0;
}
.nav-group.collapsed .nav-group-chevron { transform:rotate(-90deg); }
.nav-group-body {
  overflow:hidden;
  max-height:1000px;
  transition:max-height .38s var(--ease-out, cubic-bezier(.16,1,.3,1)), opacity .28s;
  opacity:1;
}
.nav-group.collapsed .nav-group-body { max-height:0; opacity:0; }
.nav-group-body .mi { animation:none; }
/* SA group — hide by default, shown via JS */
#nav-group-admin { display:none; }

.mi {
  display:flex; align-items:center; gap:11px;
  padding:11px 13px; border-radius:11px; font-size:13px; font-weight:500; color:var(--text);
  cursor:pointer; border:1px solid transparent; letter-spacing:.2px;
  transition:color .22s var(--ease-out, cubic-bezier(.16,1,.3,1)), background .22s var(--ease-out, cubic-bezier(.16,1,.3,1)),
             border-color .22s var(--ease-out, cubic-bezier(.16,1,.3,1)), transform .22s var(--ease-out, cubic-bezier(.16,1,.3,1)),
             box-shadow .22s var(--ease-out, cubic-bezier(.16,1,.3,1));
  position:relative; overflow:hidden;
  animation:miIn .6s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
/* Live counter badge on sidebar nav items — used by Diagnostics SA entry.
   Pulse only runs when the badge actually has a value to draw attention to.
   Empty/zero badges sit still so they don't burn the user's attention budget. */
.mi-badge{
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:auto;
  min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:linear-gradient(135deg,#ff5973,#c62828);
  color:#fff;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:800;
  letter-spacing:.5px;
  box-shadow:0 4px 12px rgba(255,89,115,.35);
}
.mi-badge.has-count{
  animation:miBadgePulse 2s var(--ease-pulse, cubic-bezier(.4,0,.6,1)) infinite;
}
@keyframes miBadgePulse{
  0%,100%{box-shadow:0 4px 12px rgba(255,89,115,.35);}
  50%    {box-shadow:0 4px 18px rgba(255,89,115,.65);}
}
.mi::before { content:''; position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,rgba(212,175,55,.08),transparent); transition:width .3s var(--ease-out, cubic-bezier(.16,1,.3,1)); }
.mi:hover::before { width:100%; }
.mi:hover {
  color:var(--text); transform:translateX(3px);
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.mi.active {
  background:rgba(212,175,55,.1); border-color:rgba(212,175,55,.22); color:var(--gold);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(212,175,55,.08), 0 2px 12px rgba(212,175,55,.08);
}
.mi.active::before { width:100%; }
.mi i {
  width:16px; text-align:center; font-size:13px; flex-shrink:0;
  color:rgba(212,175,55,.58);
  transition:color .22s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.mi:hover i { color:var(--gold); }
.mi.active i { color:var(--gold); }
.mi.danger { color:rgba(232,64,64,.6); }
.mi.danger i { color:rgba(232,64,64,.6); }
.mi.danger:hover { color:var(--red); background:var(--rdim); border-color:rgba(232,64,64,.15); }
.mi.danger:hover i { color:var(--red); }
.nav-badge { margin-left:auto; background:var(--red); color:#fff; font-size: 11px; font-weight:700; min-width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 3px; animation:badgePop .3s var(--ease-out, cubic-bezier(.16,1,.3,1)) both; }
.mi:nth-child(1){animation-delay:.06s} .mi:nth-child(2){animation-delay:.10s}
.mi:nth-child(3){animation-delay:.14s} .mi:nth-child(4){animation-delay:.18s}
.mi:nth-child(5){animation-delay:.22s} .mi:nth-child(6){animation-delay:.26s}
.mi:nth-child(7){animation-delay:.30s} .mi:nth-child(8){animation-delay:.34s}
.mi:nth-child(9){animation-delay:.38s} .mi:nth-child(10){animation-delay:.42s}
@keyframes miIn { from{opacity:0;transform:translateX(-14px);} to{opacity:1;transform:translateX(0);} }

/* ================================================================
   MAIN WORKSPACE
   ================================================================ */
#main { flex:1; overflow-y:auto; overflow-x:hidden; padding:32px 30px 56px; height:100%; position:relative; }
#main::-webkit-scrollbar { width:5px; }
#main::-webkit-scrollbar-thumb { background:rgba(212,175,55,.22); border-radius:10px; }
#sidebar .sb-inner::-webkit-scrollbar { width:3px; }

/* ================================================================
   CONTENT SECTIONS
   ================================================================ */
.cv { display:none; }
.cv.active { display:block; animation:cvIn .5s var(--ease-out, cubic-bezier(.16,1,.3,1)) both; }
@keyframes cvIn { from{opacity:0;transform:translateY(16px);filter:blur(5px);} to{opacity:1;transform:translateY(0);filter:blur(0);} }

.sec-head { margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--border); display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.sec-head h2 { font-family:var(--disp); font-size:22px; font-weight:700; letter-spacing:3px; line-height:1.2; color:var(--text); }
.sec-head p { font-size:11px; color:var(--gold); letter-spacing:1.5px; margin-top:5px; text-transform:uppercase; font-weight:600; opacity:.85; }

/* Glass panels */
.glass {
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 42%,var(--panel)),linear-gradient(320deg,var(--gdim),transparent 60%);
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.20); border-radius:18px; padding:22px;
  position:relative; overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 12px 34px -12px rgba(0,0,0,.4);
  transition:border-color .3s, transform .3s var(--ease-out, cubic-bezier(.16,1,.3,1)), 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,.10),transparent); }
.glass:hover { border-color:var(--gglow); transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 18px 44px -12px rgba(0,0,0,.5); }
.glass-gold {
  border-color:rgba(212,175,55,.34); background:linear-gradient(135deg,rgba(212,175,55,.14) 0%,var(--panel) 60%),linear-gradient(160deg,rgba(255,255,255,.10),transparent 50%);
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
}
.glass-green {
  border-color:rgba(67,177,75,.34); background:linear-gradient(135deg,rgba(67,177,75,.14) 0%,var(--panel) 60%),linear-gradient(160deg,rgba(255,255,255,.10),transparent 50%);
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
}

.mlbl { font-family:var(--disp); font-size: 11px; font-weight:700; letter-spacing:2.5px; color:var(--gold); text-transform:uppercase; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.mlbl::after { content:''; flex:1; height:1px; background:var(--border); }

/* ── Welcome banner ── */
.welcome {
  background:linear-gradient(135deg,rgba(67,177,75,.07) 0%,rgba(212,175,55,.05) 100%);
  border:1px solid rgba(212,175,55,.13); border-radius:20px; padding:26px 28px;
  margin-bottom:20px; position:relative; overflow:hidden;
  animation:wlcIn .9s .04s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
@keyframes wlcIn { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:translateY(0);} }
.welcome::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.welcome h2 { font-family:var(--disp); font-size:24px; font-weight:700; letter-spacing:2.5px; margin-bottom:6px; color:var(--text); }
.welcome p { font-size:11.5px; color:var(--gold); letter-spacing:1px; text-transform:uppercase; font-weight:600; opacity:.85; }
.gold-text { color:var(--gold); }
.green-text { color:var(--green); }
.sbadge {
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(67,177,75,.3); color:var(--green);
  padding:3px 12px; border-radius:20px; font-size: 11px; font-weight:700; letter-spacing:1px;
  background:rgba(67,177,75,.08); margin-top:8px;
}

/* ── Stat cards ── */
.dash-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }
.stat-card {
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 42%,var(--panel)),linear-gradient(320deg,var(--gdim),transparent 60%);
  border:1px solid rgba(255,255,255,.20); border-radius:16px; padding:20px;
  box-shadow:0 12px 34px -14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);
  transition:all .35s var(--ease-out, cubic-bezier(.16,1,.3,1));
  animation:scIn .7s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
.stat-card:hover { transform:translateY(-4px); border-color:rgba(212,175,55,.25); box-shadow:0 14px 36px rgba(0,0,0,.32),0 0 22px rgba(212,175,55,.06); }
.stat-card:nth-child(1){animation-delay:.12s} .stat-card:nth-child(2){animation-delay:.22s} .stat-card:nth-child(3){animation-delay:.32s}
@keyframes scIn { from{opacity:0;transform:translateY(22px) scale(.97);} to{opacity:1;transform:translateY(0) scale(1);} }
.card-ico { font-size:18px; color:var(--gold); margin-bottom:12px; }
.card-title { font-family:var(--disp); font-size:9.5px; font-weight:700; letter-spacing:2px; color:var(--gold); text-transform:uppercase; margin-bottom:9px; }
.card-val { font-family:var(--mono); font-size:26px; font-weight:700; color:var(--gold); line-height:1; }
.card-sub { font-size:11px; color:var(--t2); margin-top:5px; }
.card-mini { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:12px; }
.mini-item label { font-size:9.5px; color:var(--t2); letter-spacing:1.2px; text-transform:uppercase; display:block; font-weight:600; }
.mini-item p { font-size:12px; font-weight:700; font-family:var(--mono); margin-top:2px; color:var(--gold); }

/* ── Rota strip ── */
.rota-strip { display:grid; grid-template-columns:repeat(7,1fr); gap:9px; }
.rota-day {
  background:rgba(0,0,0,.28); border:1px solid var(--border); border-radius:10px;
  padding:11px 6px; text-align:center; transition:all .3s var(--ease-out, cubic-bezier(.16,1,.3,1)); cursor:default;
}
.rota-day:hover { border-color:var(--gold); transform:translateY(-2px); }
.rota-day.today { border-color:rgba(212,175,55,.35); background:rgba(212,175,55,.04); }
.rota-day-name { font-size: 11px; letter-spacing:1px; color:var(--t2); text-transform:uppercase; margin-bottom:5px; }
.rota-day-date { font-family:var(--mono); font-size:11px; color:var(--t2); margin-bottom:7px; }
.sbadge-day { font-size: 11px; font-weight:800; letter-spacing:.5px; padding:3px 7px; border-radius:5px; display:inline-block; }
.day-time { font-size: 11px; color:var(--t3); margin-top:4px; font-family:var(--mono); }

/* shift colour classes */
.sc-off           { background:rgba(255,255,255,.04);  color:rgba(255,255,255,.25); border:1px solid rgba(255,255,255,.06); }
.sc-morning       { background:rgba(255,215,0,.13);    color:#FFD700; border:1px solid rgba(255,215,0,.3); }
.sc-afternoon     { background:rgba(135,206,235,.13);  color:#87CEEB; border:1px solid rgba(135,206,235,.3); }
.sc-evening       { background:rgba(96,128,232,.15);   color:#6080E8; border:1px solid rgba(96,128,232,.3); }
.sc-full_day      { background:rgba(67,177,75,.13);    color:var(--green); border:1px solid rgba(67,177,75,.3); }
.sc-overtime      { background:rgba(255,140,0,.13);    color:#ff8c00; border:1px solid rgba(255,140,0,.3); }
.sc-day           { background:rgba(67,177,75,.13);    color:var(--green); border:1px solid rgba(67,177,75,.3); }
.sc-training      { background:rgba(147,112,219,.13);  color:#9370DB; border:1px solid rgba(147,112,219,.3); }
.sc-shadowing     { background:rgba(32,178,170,.13);   color:#20B2AA; border:1px solid rgba(32,178,170,.3); }
/* leave type colour classes — match rota.html SHIFT_COLORS exactly */
.sc-annual_leave  { background:rgba(147,112,219,.15);  color:#9370DB; border:1px solid rgba(147,112,219,.35); }
.sc-al            { background:rgba(147,112,219,.15);  color:#9370DB; border:1px solid rgba(147,112,219,.35); }
.sc-sick_leave    { background:rgba(100,149,237,.15);  color:#6495ED; border:1px solid rgba(100,149,237,.35); }
.sc-sl            { background:rgba(100,149,237,.15);  color:#6495ED; border:1px solid rgba(100,149,237,.35); }
.sc-eml           { background:rgba(255,140,0,.15);    color:#ff8c00; border:1px solid rgba(255,140,0,.35); }
.sc-emergency_leave{ background:rgba(255,140,0,.15);   color:#ff8c00; border:1px solid rgba(255,140,0,.35); }
.sc-maternity_leave{ background:rgba(255,105,180,.15); color:#FF69B4; border:1px solid rgba(255,105,180,.35); }
.sc-paternity_leave{ background:rgba(180,130,255,.15); color:#B482FF; border:1px solid rgba(180,130,255,.35); }
.sc-compassionate { background:rgba(32,178,170,.15);   color:#20B2AA; border:1px solid rgba(32,178,170,.35); }
.sc-lwp           { background:rgba(136,136,136,.12);  color:#888;    border:1px solid rgba(136,136,136,.25); }
.sc-tor           { background:rgba(136,136,136,.12);  color:#888;    border:1px solid rgba(136,136,136,.25); }
.sc-public_holiday_ng { background:rgba(212,175,55,.13); color:#D4AF37; border:1px solid rgba(212,175,55,.3); }
.sc-leave { background:rgba(147,112,219,.15); color:#9370DB; border:1px solid rgba(147,112,219,.35); }

/* ── Dashboard Calendar ── */
.dash-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.dash-cal-hdr { font-size: 11px; font-weight:800; letter-spacing:1px; color:var(--t3); text-align:center; padding:4px 0; text-transform:uppercase; }
.dash-cal-day {
  border-radius:7px; padding:5px 3px; min-height:48px; background:rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.05); cursor:default; text-align:center;
  transition:border-color .2s;
}
.dash-cal-day:hover { border-color:rgba(212,175,55,0.25); }
.dash-cal-day.cal-clickable:hover { border-color:rgba(212,175,55,0.5); background:rgba(212,175,55,0.06); transform:translateY(-1px); transition:all .15s var(--ease-out, cubic-bezier(.16,1,.3,1)); }
.dash-cal-day.cal-today { background:rgba(212,175,55,0.07); border-color:rgba(212,175,55,0.35); }
.dash-cal-day.cal-ph { background:rgba(255,215,0,0.05); border-color:rgba(255,215,0,0.15); }
.dash-cal-day.cal-empty { background:transparent; border-color:transparent; }
.cal-day-num { font-size: 11px; font-weight:600; color:var(--text); line-height:1; }
.cal-today .cal-day-num { color:var(--gold); font-weight:800; }
.cal-shift-badge { font-size: 11px; font-weight:800; letter-spacing:.3px; margin-top:3px; padding:1px 4px; border-radius:4px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-shift-time { font-size: 11px; color:var(--t3); font-family:var(--mono); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.cal-ph-icon { font-size: 11px; margin-top:2px; display:block; }

/* ── Data table ── */
.dtbl { width:100%; border-collapse:collapse; font-size:12px; }
.dtbl thead tr { background:rgba(0,0,0,.3); border-bottom:1px solid var(--border); }
.dtbl th { padding:13px 15px; text-align:left; font-family:var(--disp); font-size:9.5px; font-weight:700; letter-spacing:2px; color:var(--gold); text-transform:uppercase; white-space:nowrap; }
.dtbl td { padding:13px 15px; border-bottom:1px solid rgba(255,255,255,.03); vertical-align:middle; }
.dtbl tbody tr { transition:background .2s; }
.dtbl tbody tr:hover { background:rgba(255,255,255,.02); }
.dtbl tbody tr:last-child td { border-bottom:none; }

/* global rota scroll */
.rota-scroll { overflow-x:auto; border-radius:12px; background:rgba(0,0,0,.15); scrollbar-width:thin; scrollbar-color:rgba(212,175,55,.25) transparent; }
.rota-scroll::-webkit-scrollbar { height:5px; }
.rota-scroll::-webkit-scrollbar-thumb { background:rgba(212,175,55,.25); border-radius:10px; }
.grota { width:100%; border-collapse:separate; border-spacing:0; font-size:11px; min-width:1080px; }
.grota thead th { position:sticky; top:0; background:var(--base); z-index:5; padding:13px 11px; text-align:center; font-size:11px; font-weight:800; letter-spacing:1.5px; color:var(--gold); border-bottom:1px solid rgba(212,175,55,.2); }
.grota thead th.stk { position:sticky; left:0; z-index:20; text-align:left; min-width:200px; border-right:2px solid rgba(212,175,55,.22); background:var(--base); }
.grota tbody td { padding:9px 11px; text-align:center; border-bottom:1px solid rgba(255,255,255,.03); vertical-align:middle; }
.grota tbody td.stk { position:sticky; left:0; z-index:5; background:#080c08; border-right:2px solid rgba(212,175,55,.12); text-align:left; padding:10px 14px; }
.mem-name { font-weight:700; color:var(--gold); font-size:12px; }
.mem-role { font-size: 11px; color:var(--t3); margin-top:2px; }
.probation-badge { background:linear-gradient(135deg,#ff4500,#ff8c00); color:#fff; font-size:11px; font-weight:800; padding:2px 5px; border-radius:3px; margin-left:5px; box-shadow:0 0 6px rgba(255,69,0,.35); vertical-align:middle; }
@keyframes deptLeadGlow{0%,100%{box-shadow:0 0 8px rgba(240,200,50,.4);}50%{box-shadow:0 0 16px rgba(240,200,50,.75),0 0 24px rgba(240,200,50,.25);}}
.dept-lead-badge { display:inline-flex; align-items:center; gap:3px; font-size: 11px; font-weight:700; color:#000; background:var(--gold); border-radius:4px; padding:2px 6px; margin-left:6px; letter-spacing:.5px; vertical-align:middle; animation:deptLeadGlow 2.8s var(--ease-out, cubic-bezier(.16,1,.3,1)) infinite; }
/* Personnel table — hide Dept Lead column on mobile */
@media(max-width:640px){
  .dtbl th:last-child,.dtbl td:last-child{display:none;}
}

/* ── Buttons ── */
.btn { border:none; padding:13px 26px; border-radius:50px; font-weight:800; font-size:11px; letter-spacing:2px; cursor:pointer; text-transform:uppercase; transition:all .35s var(--ease-out, 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-full { width:100%; border-radius:12px; padding:15px; font-size:11.5px; justify-content:center; }
.btn-sm { padding:9px 16px; font-size:11px; border-radius:8px; }
.btn-proc { opacity:.7; cursor:not-allowed !important; pointer-events:none; }
.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);} }

/* ── Forms ── */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.ig label { display:block; font-size:8.5px; font-weight:800; letter-spacing:2px; color:var(--gold); text-transform:uppercase; margin-bottom:5px; }
.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:13px; outline:none; font-family:var(--body); transition:border-color .25s,box-shadow .25s; }
.gi:focus { border-color:rgba(212,175,55,.4); box-shadow:0 0 0 3px rgba(212,175,55,.08); }
.gi-ta { min-height:90px; resize:vertical; }
select.gi option { background:#0b130a; }
select.gi optgroup { background:#080d07; color:var(--gold); }

/* timer gateway */
.timer-gw { text-align:center; padding:60px 24px; position:relative; overflow:hidden; }
.timer-gw::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:370px; height:370px; border-radius:50%; background:radial-gradient(circle,rgba(212,175,55,.04) 0%,transparent 70%); pointer-events:none; animation:gwP 4s var(--ease-out, cubic-bezier(.16,1,.3,1)) infinite; }
@keyframes gwP { 0%,100%{transform:translate(-50%,-50%) scale(.9);opacity:.5;} 50%{transform:translate(-50%,-50%) scale(1.1);opacity:1;} }
.gw-icon { font-size:48px; color:var(--gold); text-shadow:0 0 34px rgba(212,175,55,.4); display:block; margin-bottom:17px; animation:ifl 3s var(--ease-out, cubic-bezier(.16,1,.3,1)) infinite; position:relative; z-index:1; }
@keyframes ifl { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);} }
.gw-title { font-family:var(--disp); font-size:18px; letter-spacing:4px; font-weight:700; color:var(--gold); margin-bottom:9px; position:relative; z-index:1; }
.gw-sub { font-size:12px; color:var(--t3); max-width:420px; margin:0 auto 26px; line-height:1.78; letter-spacing:.5px; position:relative; z-index:1; }
.gw-info { background:var(--gdim); border:1px solid rgba(212,175,55,.2); border-radius:11px; padding:14px 20px; max-width:430px; margin:0 auto 22px; font-size:12px; color:var(--t2); line-height:1.65; position:relative; z-index:1; }
.gw-info strong { color:var(--gold); }

/* skeleton */
.skel { background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%); background-size:400% 100%; animation:shim 1.5s infinite; border-radius:7px; }
@keyframes shim { from{background-position:100% 0;} to{background-position:-100% 0;} }

/* ================================================================
   LOGIN OVERLAY — Apple Glassmorphism
   ================================================================ */
/* Hide login overlay immediately when Firebase has a cached auth session */
[data-auth-cached="1"] #login-overlay { display:none !important; }

/* ─────────────────────────────────────────────────────────────────
   ENTERPRISE LOGIN — ARCHITECTURAL RINGS
   Deep backdrop · Diagonal light plane · Large circle outlines
   Corner markers · Status identifier
───────────────────────────────────────────────────────────────── */

/* Deep charcoal — asymmetric warm edge glow */
#login-overlay,
#first-login-overlay {
  background:
    radial-gradient(ellipse 80% 55% at 100%  0%, rgba(240,200,50,.07) 0%, transparent 58%),
    radial-gradient(ellipse 65% 50% at   0% 100%, rgba(76,214,87,.055) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at  50%  50%, rgba(12,20,10,.6)    0%, transparent 80%),
    #07090a !important;
}
#pw-reset-overlay {
  background:
    radial-gradient(ellipse 80% 55% at 100%  0%, rgba(240,200,50,.07) 0%, transparent 58%),
    radial-gradient(ellipse 65% 50% at   0% 100%, rgba(76,214,87,.055) 0%, transparent 55%),
    #07090a !important;
  overflow: hidden;
}

/* Diagonal light plane — single angled gradient wash across the scene */
.lg-slash {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(
    128deg,
    transparent             0%,
    transparent            30%,
    rgba(240,200,50,.012)  40%,
    rgba(240,200,50,.032)  50%,
    rgba(240,200,50,.012)  60%,
    transparent            70%,
    transparent           100%
  );
}

/* Architectural ring outlines — large overlapping circles, barely visible */
.lg-ring {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  opacity: 0; animation: lgRingIn 1.6s var(--ease-out, cubic-bezier(.16,1,.3,1)) forwards;
}
.lg-ring-1 {
  width: 660px; height: 660px;
  top: calc(50% - 330px); right: -200px;
  border: 1px solid rgba(240,200,50,.09);
  animation-delay: .3s;
}
.lg-ring-2 {
  width: 980px; height: 980px;
  top: calc(50% - 490px); right: -440px;
  border: 1px solid rgba(240,200,50,.05);
  animation-delay: .5s;
}
.lg-ring-3 {
  width: 460px; height: 460px;
  bottom: -190px; left: -120px;
  border: 1px solid rgba(76,214,87,.07);
  animation-delay: .65s;
}
@keyframes lgRingIn { to { opacity: 1; } }

/* Status line */
.lg-status {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 8px; letter-spacing: 3.5px; text-transform: uppercase;
  color: rgba(240,200,50,.30); white-space: nowrap; pointer-events: none; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  opacity: 0; animation: lgStatusFade 1s var(--ease-out, cubic-bezier(.16,1,.3,1)) .9s forwards;
}
.lg-status::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
  background: #4cd657;
  box-shadow: 0 0 6px rgba(76,214,87,.6);
  animation: lgDotPulse 2.4s var(--ease-pulse, cubic-bezier(.4,0,.6,1)) infinite;
}
@keyframes lgStatusFade { to { opacity: 1; } }
@keyframes lgDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .3; transform: scale(.65); }
}

/* Mobile */
@media (max-width: 540px) {
  .lg-status { display: none; }
  .lg-ring-2 { display: none; }
}

/* Ambient depth — very faint warm light leaks, replaced bright blobs with subtle warmth */
.lgo-orb { position:absolute; border-radius:50%; pointer-events:none; z-index:0; filter:blur(130px); }
.lgo-orb-1 {
  width:820px; height:820px; top:-340px; left:-300px;
  background:radial-gradient(circle,rgba(240,200,50,.10) 0%,transparent 70%);
  opacity:0;
  animation:lgOrbFade 1.2s var(--ease-out, cubic-bezier(.16,1,.3,1)) 0s 1 normal forwards, lgOrbDrift1 32s var(--ease-out, cubic-bezier(.16,1,.3,1)) 1.2s infinite alternate none;
}
.lgo-orb-2 {
  width:700px; height:700px; bottom:-260px; right:-220px;
  background:radial-gradient(circle,rgba(76,214,87,.07) 0%,transparent 70%);
  opacity:0;
  animation:lgOrbFade 1.2s var(--ease-out, cubic-bezier(.16,1,.3,1)) .2s 1 normal forwards, lgOrbDrift2 38s var(--ease-out, cubic-bezier(.16,1,.3,1)) 1.4s infinite alternate none;
}
.lgo-orb-3 {
  width:420px; height:420px; top:40%; left:50%;
  background:radial-gradient(circle,rgba(240,200,50,.05) 0%,transparent 70%);
  opacity:0;
  animation:lgOrbFade 1.2s var(--ease-out, cubic-bezier(.16,1,.3,1)) .35s 1 normal forwards, lgOrbDrift3 26s var(--ease-out, cubic-bezier(.16,1,.3,1)) 1.5s infinite alternate none;
}
@keyframes lgOrbFade { to { opacity:1; } }
@keyframes lgOrbDrift1 { from{transform:translate(0,0);} to{transform:translate(50px,35px);} }
@keyframes lgOrbDrift2 { from{transform:translate(0,0);} to{transform:translate(-40px,-28px);} }
@keyframes lgOrbDrift3 { from{transform:translate(0,0);} to{transform:translate(-24px,44px);} }

/* ── Org identity header above login card ── */
.lg-org-header {
  text-align: center;
  pointer-events: none;
  position: relative; z-index: 2;
  opacity: 0; animation: lgOrgIn .85s var(--ease-out, cubic-bezier(.16,1,.3,1)) .18s forwards;
}
.lg-org-name {
  font-family: var(--disp);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(240,200,50,.62);
  white-space: nowrap;
}
.lg-org-rule {
  width: 52px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,200,50,.45), transparent);
  margin: 10px auto 9px;
}
.lg-org-motto {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(242,247,238,.28);
  white-space: nowrap;
}
@keyframes lgOrgIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) { .lg-org-header { display: none; } }

#login-overlay {
  position:fixed; inset:0;
  background:radial-gradient(ellipse at 50% -5%, rgba(16,28,14,.99) 0%, #030703 70%);
  z-index:9999999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; padding:32px 20px;
  overflow-x:hidden; overflow-y:auto;
}
.login-card {
  position:relative; z-index:1;
  width:100%; max-width:440px;
  background:linear-gradient(160deg,rgba(255,255,255,.17),rgba(255,255,255,.04) 44%,transparent 62%),linear-gradient(320deg,rgba(240,200,50,.16),transparent 55%),rgba(10,18,9,.74);
  -webkit-backdrop-filter:blur(52px) saturate(180%); backdrop-filter:blur(52px) saturate(180%);
  -webkit-backdrop-filter:blur(52px) saturate(180%);
  border:1px solid rgba(240,200,50,.38);
  border-radius:28px;
  padding:48px 40px; text-align:center; overflow:hidden;
  animation:lcIn .75s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 64px 140px rgba(0,0,0,.78),
    0 0 70px rgba(240,200,50,.13),
    0 0 0 1px rgba(240,200,50,.20);
}
@keyframes lcIn { from{opacity:0;transform:translateY(32px) scale(.95);filter:blur(12px);} to{opacity:1;transform:translateY(0) scale(1);filter:blur(0);} }
/* top gold shimmer line */
.login-card::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:260px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,200,50,.65),transparent);
}
/* inner glass sheen */
.login-card::after {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:28px;
  background:linear-gradient(100deg,transparent 0%,transparent 32%,rgba(255,255,255,.14) 46%,rgba(240,200,50,.10) 52%,transparent 66%,transparent 100%);
  background-size:240% 100%; background-position:140% 0;
  animation:loginSheen 6s cubic-bezier(.16,1,.3,1) 1s infinite;
}
@keyframes loginSheen{0%{background-position:140% 0}26%{background-position:-60% 0}100%{background-position:-60% 0}}
.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; position:relative; z-index:1;
}
.login-sub {
  font-size:8.5px; letter-spacing:4.5px; color:var(--gold); opacity:.55;
  text-transform:uppercase; margin-bottom:32px; position:relative; z-index:1;
}
#login-err { color:var(--red); font-size:11px; 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; position:relative; z-index:1; }
/* glass inputs scoped to login cards */
.login-card .gi, .first-login-card .gi {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:13px; padding:13px 15px; font-size:14px;
  transition:border-color .28s var(--ease-out, cubic-bezier(.16,1,.3,1)), box-shadow .28s var(--ease-out, cubic-bezier(.16,1,.3,1)), background .25s;
}
.login-card .gi:focus, .first-login-card .gi:focus {
  border-color:rgba(240,200,50,.5);
  box-shadow:0 0 0 3.5px rgba(240,200,50,.1),inset 0 1px 0 rgba(255,255,255,.06);
  background:rgba(255,255,255,.08); outline:none;
}
/* premium button feel inside login */
.login-card .btn-green, .first-login-card .btn-green {
  transition:transform .25s var(--ease-out, cubic-bezier(.16,1,.3,1)), box-shadow .25s var(--ease-out, cubic-bezier(.16,1,.3,1)), filter .2s; position:relative; z-index:1;
}
.login-card .btn-green:hover, .first-login-card .btn-green:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 36px rgba(76,214,87,.3),0 2px 10px rgba(76,214,87,.2);
  filter:brightness(1.08);
}
.login-card .btn-green:active, .first-login-card .btn-green:active {
  transform:translateY(0) scale(.98);
  box-shadow:0 3px 14px rgba(76,214,87,.2);
}
/* form groups inside glass cards — render above ::after sheen */
.login-card .ig, .first-login-card .ig,
.login-card #login-err, .login-card #login-lockout-msg,
.login-card #forgot-pw-toggle, .login-card #forgot-pw-panel {
  position:relative; z-index:1;
}
/* Forgot-pw panel entrance — was a raw display none↔block pop (audit DM2). */
#forgot-pw-panel[style*="block"] { animation:cvIn .3s cubic-bezier(.16,1,.3,1) both; }
/* staggered field entrance */
@keyframes lgFieldIn { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} }
.login-card .ig:nth-child(4) { animation:lgFieldIn .55s var(--ease-out, cubic-bezier(.16,1,.3,1)) .32s both; }
.login-card .ig:nth-child(5) { animation:lgFieldIn .55s var(--ease-out, cubic-bezier(.16,1,.3,1)) .42s both; }
.first-login-card .ig:nth-child(4) { animation:lgFieldIn .55s var(--ease-out, cubic-bezier(.16,1,.3,1)) .32s both; }
.first-login-card .ig:nth-child(5) { animation:lgFieldIn .55s var(--ease-out, cubic-bezier(.16,1,.3,1)) .42s both; }
.first-login-card .ig:nth-child(6) { animation:lgFieldIn .55s var(--ease-out, cubic-bezier(.16,1,.3,1)) .52s both; }

/* ── 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:12px; font-weight:600; z-index:600000; 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 var(--ease-out, 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); }

/* ── Latency modal ── */
#latency-modal { position:fixed; inset:0; background:rgba(0,0,0,.92); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); z-index:100000; display:none; align-items:center; justify-content:center; padding:20px; }
#latency-modal.show { display:flex; }
.lat-box { width:100%; max-width:460px; background:var(--lift); border:2px solid var(--red); border-radius:20px; padding:34px; box-shadow:0 0 60px rgba(232,64,64,.2),0 40px 80px rgba(0,0,0,.5); animation:mpop .4s var(--ease-out, cubic-bezier(.16,1,.3,1)); }
@keyframes mpop { from{transform:scale(.85);opacity:0;} to{transform:scale(1);opacity:1;} }
.lat-title { display:flex; align-items:center; gap:11px; color:var(--red); font-family:var(--disp); font-size:14px; letter-spacing:3px; margin-bottom:11px; }

/* nav bar controls */
.nbc { display:flex; gap:9px; align-items:center; }

/* ================================================================
   TOGGLE SWITCH — SYSTEM CONTROLS
   ================================================================ */
.toggle-row {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 0; border-bottom:1px solid var(--border);
}
.toggle-row:last-child { border-bottom:none; padding-bottom:0; }
.toggle-info { flex:1; min-width:0; }
.toggle-info .ti-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:3px; }
.toggle-info .ti-sub { font-size:11px; color:var(--t3); line-height:1.55; }
.toggle-switch { position:relative; width:48px; height:26px; flex-shrink:0; cursor:pointer; }
.toggle-switch input { opacity:0; position:absolute; width:0; height:0; }
.toggle-track {
  position:absolute; inset:0; background:rgba(255,255,255,.08);
  border:1px solid var(--border); border-radius:26px;
  transition:background .3s, border-color .3s;
}
.toggle-switch input:checked + .toggle-track { background:var(--green); border-color:var(--green); }
.toggle-thumb {
  position:absolute; top:4px; left:4px; width:16px; height:16px;
  background:#fff; border-radius:50%; transition:transform .3s var(--ease-out, cubic-bezier(.16,1,.3,1));
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.toggle-switch input:checked ~ .toggle-thumb { transform:translateX(22px); }
.toggle-switch.danger input:checked + .toggle-track { background:var(--red); border-color:var(--red); }

/* SA sys panel */
#sa-sys-panel { border-color:rgba(212,175,55,.22); background:linear-gradient(135deg,rgba(212,175,55,.03) 0%,var(--panel) 70%); }

/* ── ANNOUNCEMENT BAR ── */
#announce-bar { display:none; margin-bottom:18px; border-radius:14px; overflow:hidden; animation:scIn .5s var(--ease-out, cubic-bezier(.16,1,.3,1)) both; }
#announce-bar.visible { display:block; }
.ab-item {
  display:flex; align-items:flex-start; gap:14px; padding:14px 18px;
  border-left:4px solid var(--gold); background:linear-gradient(135deg,rgba(212,175,55,.07) 0%,var(--panel) 100%);
  border-radius:12px; margin-bottom:8px; position:relative;
  animation:scIn .45s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
.ab-item:last-child { margin-bottom:0; }
.ab-item.urgent { border-left-color:var(--red); background:linear-gradient(135deg,rgba(232,64,64,.09) 0%,var(--panel) 100%); }
.ab-item.info { border-left-color:var(--blue); background:linear-gradient(135deg,var(--bdim) 0%,var(--panel) 100%); }
.ab-item.chat { border-left-color:#22d3ee; background:linear-gradient(135deg,rgba(34,211,238,.07) 0%,var(--panel) 100%); animation:chatFeedPulse 2.5s var(--ease-pulse, cubic-bezier(.4,0,.6,1)) infinite; }
.ab-item.chat .ab-icon { background:rgba(34,211,238,.12); color:#22d3ee; }
@keyframes chatFeedPulse { 0%,100%{box-shadow:0 0 0 0 rgba(34,211,238,.3);} 50%{box-shadow:0 0 0 6px rgba(34,211,238,0);} }
.ab-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; margin-top:1px; }
.ab-item .ab-icon { background:var(--gdim); color:var(--gold); }
.ab-item.urgent .ab-icon { background:var(--rdim); color:var(--red); }
.ab-item.info .ab-icon { background:var(--bdim); color:var(--blue); }
.ab-body { flex:1; min-width:0; }
.ab-title { font-size:13px; font-weight:700; color:var(--text); line-height:1.4; margin-bottom:3px; }
.ab-text { font-size:12px; color:var(--t2); line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ab-read-more {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:8px; padding:6px 14px;
  font-size:11.5px; font-weight:600; font-family:var(--body); letter-spacing:.4px;
  color:#0c1109; background:var(--gold);
  border:none; border-radius:20px; cursor:pointer;
  box-shadow:0 0 0 0 rgba(240,200,50,.55);
  animation:abPulse 2s var(--ease-out, cubic-bezier(.16,1,.3,1)) infinite;
  transition:transform .25s var(--ease-out, cubic-bezier(.16,1,.3,1)), box-shadow .25s var(--ease-out, cubic-bezier(.16,1,.3,1)), background .2s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.ab-read-more i { font-size: 11px; transition:transform .25s var(--ease-out, cubic-bezier(.16,1,.3,1)); }
.ab-read-more:hover { background:var(--gold2); transform:translateY(-2px) scale(1.04); box-shadow:0 6px 20px rgba(240,200,50,.35); animation:none; }
.ab-read-more:hover i { transform:translateX(3px); }
.ab-read-more:active { transform:scale(.97); }
@keyframes abPulse { 0%,100%{box-shadow:0 0 0 0 rgba(240,200,50,.55);} 50%{box-shadow:0 0 0 7px rgba(240,200,50,0);} }
.ab-meta { font-size: 11px; color:var(--t3); margin-top:5px; letter-spacing:.3px; }
.ab-dismiss { position:absolute; top:6px; right:6px; width:32px; height:32px; min-width:32px; min-height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--t3); font-size:13px; border-radius:50%; transition:all .2s; background:transparent; border:0; padding:0; z-index:5; pointer-events:auto; }
.ab-dismiss:hover, .ab-dismiss:focus-visible { color:var(--text); background:var(--panel2); outline:none; }
.ab-dismiss:active { transform:scale(.92); }
.ab-dismiss i { pointer-events:none; }
/* urgent pulse dot */
.ab-item.urgent .ab-icon::after { content:''; position:absolute; top:10px; right:10px; width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 0 rgba(232,64,64,.5); animation:urgentPulse 1.4s infinite; }
@keyframes urgentPulse { 0%{box-shadow:0 0 0 0 rgba(232,64,64,.5);} 70%{box-shadow:0 0 0 8px rgba(232,64,64,0);} 100%{box-shadow:0 0 0 0 rgba(232,64,64,0);} }

/* urgent alert modal */
#urgent-alert-modal { display:none; position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); align-items:center; justify-content:center; }
#urgent-alert-modal.open { display:flex; animation:fadeIn .25s cubic-bezier(.16,1,.3,1) both; }   /* container fade-in (card already animates) — audit DM2 */
.ual-card { background:var(--base); border:1px solid rgba(232,64,64,.4); border-radius:20px; padding:32px 28px; max-width:480px; width:92%; text-align:center; animation:scIn .4s var(--ease-out, cubic-bezier(.16,1,.3,1)) both; box-shadow:0 0 60px rgba(232,64,64,.12); }
.ual-icon { font-size:36px; color:var(--red); margin-bottom:16px; animation:urgentPulse 1.4s infinite; display:inline-block; }
.ual-title { font-family:var(--disp); font-size:17px; font-weight:700; color:var(--red); letter-spacing:1px; margin-bottom:10px; }
.ual-body { font-size:13px; color:var(--t2); line-height:1.7; margin-bottom:20px; }
.ual-pub { font-size:11px; color:var(--t3); margin-bottom:24px; }
.ual-btn { background:linear-gradient(135deg,var(--red),#c0392b); color:#fff; border:none; border-radius:10px; padding:10px 28px; font-size:13px; font-weight:600; cursor:pointer; transition:opacity .2s; }
.ual-btn:hover { opacity:.85; }

/* Profile page redesign */
.prof-page-hero {
  display:flex; align-items:flex-start; gap:20px; margin-bottom:22px;
  padding:20px; background:linear-gradient(135deg,rgba(212,175,55,.06) 0%,var(--panel) 70%);
  border:1px solid rgba(212,175,55,.16); border-radius:16px; flex-wrap:wrap;
}
.prof-hero-photo {
  width:88px; height:88px; border-radius:16px; flex-shrink:0; overflow:hidden;
  background:linear-gradient(135deg,var(--green),var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--disp); font-size:32px; font-weight:700; color:var(--deep);
  border:2px solid rgba(212,175,55,.3); box-shadow:0 0 20px rgba(212,175,55,.12);
}
.prof-hero-photo img { width:100%; height:100%; object-fit:cover; }
.prof-hero-info { flex:1; min-width:0; }
.prof-hero-name { font-family:var(--disp); font-size:20px; font-weight:700; letter-spacing:1.5px; color:var(--text); margin-bottom:4px; }
.prof-hero-role { font-size:12px; color:var(--gold); margin-bottom:3px; font-weight:600; }
.prof-hero-dept { font-size:11px; color:var(--t3); margin-bottom:10px; }
.prof-hero-badges { display:flex; gap:7px; flex-wrap:wrap; }
.prof-badge {
  display:inline-flex; align-items:center; gap:5px; font-size:9.5px; font-weight:800;
  letter-spacing:1px; padding:3px 10px; border-radius:20px; text-transform:uppercase;
}
.prof-badge-green { background:rgba(67,177,75,.1); border:1px solid rgba(67,177,75,.28); color:var(--green); }
.prof-badge-gold  { background:var(--gdim); border:1px solid rgba(212,175,55,.3); color:var(--gold); }
.prof-badge-red   { background:var(--rdim); border:1px solid rgba(232,64,64,.3); color:var(--red); }
.prof-badge-grey  { background:rgba(255,255,255,.05); border:1px solid var(--border); color:var(--t3); }

.prof-section-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.prof-info-block {
  background:var(--panel); border:1px solid var(--border); border-radius:13px; padding:16px;
}
.prof-info-block.full { grid-column:span 2; }
.pib-title { font-size:9.5px; font-weight:800; letter-spacing:2px; color:var(--gold); text-transform:uppercase; margin-bottom:12px; display:flex; align-items:center; gap:7px; }
.pib-title::after { content:''; flex:1; height:1px; background:var(--border); }
.pib-row { display:flex; justify-content:space-between; align-items:flex-start; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.03); gap:12px; }
.pib-row:last-child { border-bottom:none; padding-bottom:0; }
.pib-key { font-size:10.5px; color:var(--t3); flex-shrink:0; min-width:110px; }
.pib-val { font-size:12px; font-weight:600; color:var(--text); text-align:right; word-break:break-word; }
.pib-val.mono { font-family:var(--mono); color:var(--gold); }
.pib-val.green { color:var(--green); }
.pib-val.red { color:var(--red); }

.org-address-block {
  background:linear-gradient(135deg,rgba(67,177,75,.04) 0%,var(--panel) 70%);
  border:1px solid rgba(67,177,75,.15); border-radius:13px; padding:16px;
  display:flex; align-items:flex-start; gap:14px;
}
.org-addr-icon { width:40px; height:40px; border-radius:10px; background:var(--gndim); border:1px solid rgba(67,177,75,.2); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--green); flex-shrink:0; }
.org-addr-lines { flex:1; }
.org-addr-name { font-size:13px; font-weight:700; color:var(--text); margin-bottom:4px; }
.org-addr-line { font-size:11px; color:var(--t3); line-height:1.7; }
.org-addr-line a { color:var(--gold); text-decoration:none; }
.org-addr-line a:hover { text-decoration:underline; }

@media (max-width:640px) {
  .prof-section-grid { grid-template-columns:1fr; }
  .prof-info-block.full { grid-column:span 1; }
  .pib-row { flex-direction:column; gap:3px; }
  .pib-val { text-align:left; }
  .pib-key { min-width:unset; }
  .prof-page-hero { flex-direction:column; align-items:center; text-align:center; }
  .prof-hero-badges { justify-content:center; }
}

/* ================================================================
   MOBILE RESPONSIVE — COMPREHENSIVE
   ================================================================ */
@media (max-width:1100px) {
  .dash-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:820px) {
  :root { --sbw:0px; --hdh:58px; }
  #sidebar {
    /* Start below the header so the profile card isn't hidden behind it.
       z-index 600 keeps the slide-in panel above the header (550) for tap-out close. */
    position:fixed; top:var(--hdh); left:0; bottom:0; width:280px;
    transform:translateX(-100%); box-shadow:none; z-index:600; animation:none;
  }
  #sidebar.open { transform:translateX(0); box-shadow:8px 0 44px rgba(0,0,0,.7); }
  #hamburger { display:flex; }
  .hdr-center { display:none; }
  #main { padding:18px 14px 52px; }
  .dash-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .rota-strip { grid-template-columns:repeat(4,1fr); }
  .form-grid { grid-template-columns:1fr; }
  .hdr-date { display:none; }
  .brand-sub { display:none; }
  .hdr-clock { font-size:13px; padding:6px 10px; letter-spacing:1px; }
  .hdr-right { gap:7px; }
  .sec-head { flex-direction:column; align-items:flex-start; }
  .nbc { flex-wrap:wrap; gap:6px; }
  .hdr-notif-dd { width:calc(100vw - 20px); right:-60px; }
  /* Chat section mobile — panel-slide */
  #dash-chat-wrap{height:calc(100vh - 190px) !important;min-height:440px;}
  #dash-chat-sidebar-panel{
    position:absolute;inset:0;width:100% !important;border-right:none !important;
    transition:transform .28s var(--ease-out, cubic-bezier(.16,1,.3,1));z-index:2;
    background:var(--lift);border-bottom:none !important;
  }
  #dash-chat-main{
    position:absolute;inset:0;min-height:0 !important;
    transform:translateX(100%);
    transition:transform .28s var(--ease-out, cubic-bezier(.16,1,.3,1));z-index:1;
  }
  #dash-chat-wrap.chat-open #dash-chat-sidebar-panel{transform:translateX(-100%);}
  #dash-chat-wrap.chat-open #dash-chat-main{transform:translateX(0);}
  #chat-back-btn{display:flex !important;}
  /* Academy grid */
  .academy-grid { grid-template-columns:1fr !important; }
  /* Leave overview */
  .leave-overview { grid-template-columns:1fr 1fr; }
  /* Profile */
  .prof-section-grid { grid-template-columns:1fr; }
  .prof-info-block.full { grid-column:span 1; }
}

@media (max-width:640px) {
  .leave-overview { grid-template-columns:1fr 1fr; }
  .brand-logo { font-size:20px; letter-spacing:5px; }
  .ops-block { display:none; }
}

@media (max-width:540px) {
  :root { --hdh:52px; }
  .dash-grid { grid-template-columns:1fr; }
  .rota-strip { grid-template-columns:repeat(2,1fr); }
  .dash-cal-day { min-height:38px; padding:3px 2px; }
  .cal-day-num { font-size:9px; }
  .cal-shift-badge { font-size:6px; padding:1px 2px; }
  .cal-ph-icon { font-size:7px; }
  .welcome h2 { font-size:17px; letter-spacing:1px; }
  .welcome p { font-size:11px; }
  #widget-elapsed { font-size:26px; }
  #main { padding:12px 10px 56px; }
  .sec-head { margin-bottom:14px; padding-bottom:10px; }
  .sec-head h2 { font-size:18px; letter-spacing:2px; }
  .glass { padding:14px; border-radius:14px; }
  .brand-text { display:none; }
  .brand-logo-img { height:32px; }
  .hdr-clock { display:none; }
  .stat-card { padding:14px; }
  .card-val { font-size:22px; }
  .btn { padding:11px 18px; font-size:9px; }
  .btn-full { padding:14px; font-size:10.5px; }
  #toast { left:10px; right:10px; transform:translateY(80px); min-width:unset; width:auto; max-width:none; }
  #toast.show { transform:translateY(0); }
  .hdr-notif-dd { width:calc(100vw - 16px); right:-50px; top:48px; }
  .login-card { padding:32px 22px; border-radius:18px; }
  .login-brand { font-size:28px; letter-spacing:7px; }
  .dtbl { font-size:11px; }
  .dtbl th, .dtbl td { padding:9px 8px; }
  .form-grid { gap:12px; }
  .ig label { font-size:8px; }
  .leave-overview { grid-template-columns:1fr; }
  .grota { min-width:600px; }
  #test-mode-banner { font-size:9px; letter-spacing:1.5px; padding:5px 14px; }
  .prob-card { flex-direction:column; text-align:center; }
  .perf-chart { height:36px; }
}

@media (max-width:400px) {
  .brand-logo-img { height:28px; }
  .hdr-right { gap:5px; }
  .hdr-icon-btn { width:40px; height:40px; font-size:13px; }
  #main { padding:10px 8px 56px; }
  .sec-head h2 { font-size:16px; }
  .glass { padding:11px; }
  .leave-overview { grid-template-columns:1fr; }
}

/* ── THEME DEFINITIONS ── */
[data-theme="midnight"] {
  --void:#0d1526; --deep:#111c30; --base:#14223a; --lift:#1a2d4a;
  --gold:#7b9fd4; --gold2:#9ab5e0; --gdim:rgba(123,159,212,0.14);
  --gglow:rgba(123,159,212,0.3); --gsoft:rgba(123,159,212,0.07);
  --panel:rgba(255,255,255,0.10); --border:rgba(255,255,255,0.21);
}
[data-theme="slate"] {
  --void:#1a1a1a; --deep:#222222; --base:#2a2a2a; --lift:#333333;
  --gold:#b0b8c4; --gold2:#ccd4de; --gdim:rgba(176,184,196,0.12);
  --gglow:rgba(176,184,196,0.3); --gsoft:rgba(176,184,196,0.055);
}
[data-theme="forest"] {
  --void:#0b1a0d; --deep:#0f2214; --base:#132b18; --lift:#1a381f;
  --gold:#2ecc71; --gold2:#4be88a; --gdim:rgba(46,204,113,0.14);
  --gglow:rgba(46,204,113,0.3); --gsoft:rgba(46,204,113,0.07);
}
[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"] .glass{background:rgba(255,255,255,0.88)!important;border-color:rgba(4,80,30,0.13)!important;}
[data-theme="light"] #hdr{background:rgba(255,255,255,0.96)!important;border-color:rgba(4,80,30,0.14)!important;}
[data-theme="light"] #sidebar{background:rgba(244,246,244,0.98)!important;}
[data-theme="light"] .login-card,[data-theme="light"] .first-login-card{background:rgba(255,255,255,0.97)!important;border-color:rgba(4,80,30,0.22)!important;}
[data-theme="light"] #login-overlay{background:#f4f6f4!important;}
/* ── BROWSER THEME ── */
[data-theme="browser"]{--void:#ececec;--deep:#e4e4e4;--base:#ffffff;--lift:#f8f8f8;--panel:rgba(0,0,0,0.05);--panel2:rgba(0,0,0,0.09);--border:rgba(0,0,0,0.15);--bord2:rgba(0,0,0,0.25);--gold:#0066cc;--gold2:#0080ff;--gdim:rgba(0,102,204,0.10);--gglow:rgba(0,102,204,0.22);--gsoft:rgba(0,102,204,0.05);--green:#188a44;--gndim:rgba(24,138,68,0.12);--gnsoft:rgba(24,138,68,0.05);--red:#c00000;--rdim:rgba(192,0,0,0.10);--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"] .glass{background:rgba(255,255,255,0.92)!important;border-color:rgba(0,0,0,0.12)!important;}
[data-theme="browser"] #hdr{background:rgba(236,236,236,0.97)!important;border-color:rgba(0,0,0,0.14)!important;}
[data-theme="browser"] #sidebar{background:rgba(232,232,232,0.99)!important;}
[data-theme="browser"] .login-card,[data-theme="browser"] .first-login-card{background:rgba(255,255,255,0.97)!important;border-color:rgba(0,0,0,0.18)!important;}
[data-theme="browser"] #login-overlay{background:#ececec!important;}
[data-theme="browser"] .btn-gold{background:#0066cc;color:#fff;}[data-theme="browser"] .btn-green{background:#188a44;}

/* ── LOGO IN HEADER ── */
.brand-logo-img {
  height: 36px;
  width: auto;
  display: block;
  opacity: 0;
  animation: logoRevealHdr 0.8s var(--ease-out, cubic-bezier(.16,1,.3,1)) 0.3s forwards;
  cursor: pointer;
  transition: filter 0.3s, transform 0.3s;
  filter: drop-shadow(0 0 0px rgba(212,175,55,0));
}
.brand-logo-img:hover {
  filter: drop-shadow(0 0 8px rgba(212,175,55,0.5));
  transform: scale(1.04);
}
@keyframes logoRevealHdr {
  to { opacity:1; }
}

/* ── LOGO IN LOGIN CARD ── */
.login-logo-img {
  height:60px; width:auto; display:block;
  margin:0 auto 16px;
  opacity:0; position:relative; z-index:1;
  filter:drop-shadow(0 0 20px rgba(76,214,87,.25));
  animation:loginLogoIn .85s var(--ease-out, cubic-bezier(.16,1,.3,1)) .12s forwards;
}
@keyframes loginLogoIn { from{opacity:0;transform:scale(.82) translateY(6px);} to{opacity:1;transform:scale(1) translateY(0);} }

/* ── THEME CARDS ── */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.theme-card {
  border-radius: 12px;
  padding: 14px 12px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.35s var(--ease-out, cubic-bezier(.16,1,.3,1));
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  position: relative; overflow: hidden;
}
.theme-card:hover { transform: translateY(-3px); }
.theme-card.selected { border-color: var(--gold); box-shadow: 0 0 20px rgba(212,175,55,0.2); }
.theme-card.selected::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute; top: 6px; right: 8px;
  font-size: 11px; color: var(--gold);
}
.theme-swatch {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.theme-transition * { transition: background 0.4s var(--ease-out, cubic-bezier(.16,1,.3,1)), color 0.3s var(--ease-out, cubic-bezier(.16,1,.3,1)), border-color 0.3s var(--ease-out, cubic-bezier(.16,1,.3,1)), box-shadow 0.3s var(--ease-out, cubic-bezier(.16,1,.3,1)) !important; }

/* ── PASSWORD REQUEST ── */
.pw-request-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px; margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.pw-request-card .req-name { font-size: 13px; font-weight: 700; }
.pw-request-card .req-meta { font-size: 11px; color: var(--t3); letter-spacing: 0.5px; }
.pw-request-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ── FIRST LOGIN OVERLAY ── */
#first-login-overlay {
  position:fixed; inset:0;
  background:radial-gradient(ellipse at 50% -5%, rgba(16,28,14,.99) 0%, #030703 70%);
  z-index:9999998;
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:28px; padding:32px 20px;
  overflow-x:hidden; overflow-y:auto;
}
#first-login-overlay.show { display:flex; animation:fadeIn .3s cubic-bezier(.16,1,.3,1) both; }   /* overlay bg fade-in (card already animates) — audit DM2 */
.first-login-card {
  position:relative; z-index:1;
  width:100%; max-width:440px;
  background:linear-gradient(160deg,rgba(255,255,255,.17),rgba(255,255,255,.04) 44%,transparent 62%),linear-gradient(320deg,rgba(240,200,50,.16),transparent 55%),rgba(10,18,9,.74);
  -webkit-backdrop-filter:blur(52px) saturate(180%); backdrop-filter:blur(52px) saturate(180%);
  -webkit-backdrop-filter:blur(52px) saturate(180%);
  border:1px solid rgba(240,200,50,.38);
  border-radius:28px;
  padding:48px 40px; text-align:center; overflow:hidden;
  animation:lcIn .75s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 64px 140px rgba(0,0,0,.78),
    0 0 70px rgba(240,200,50,.13),
    0 0 0 1px rgba(240,200,50,.20);
}
.first-login-card::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:260px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,200,50,.65),transparent);
}
.first-login-card::after {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:28px;
  background:linear-gradient(100deg,transparent 0%,transparent 32%,rgba(255,255,255,.14) 46%,rgba(240,200,50,.10) 52%,transparent 66%,transparent 100%);
  background-size:240% 100%; background-position:140% 0;
  animation:loginSheen 6s cubic-bezier(.16,1,.3,1) 1s infinite;
}
@keyframes loginSheen{0%{background-position:140% 0}26%{background-position:-60% 0}100%{background-position:-60% 0}}

/* ================================================================
   PREMIUM ANIMATIONS — DTTASA MISSION CONTROL
   ================================================================ */

/* ── Header scan line (uses background-position so overflow:hidden is NOT needed) ── */
#hdr::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(212,175,55,.04) 50%,transparent 100%);
  background-size:250% 100%;
  animation:hdrScan 7s linear infinite;
}
@keyframes hdrScan { from{background-position:250% 0;} to{background-position:-250% 0;} }

/* ── Clock ambient pulse ── */
@keyframes clockPulse {
  0%,100% { border-color:rgba(212,175,55,.28); }
  50%      { border-color:rgba(212,175,55,.52); box-shadow:0 0 14px rgba(212,175,55,.18); }
}
#hdr-clock { animation:clockPulse 3.5s var(--ease-out, cubic-bezier(.16,1,.3,1)) infinite; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
/* Clock digit-transition polish (DL3): stable HH:MM, animated seconds tick */
#hdr-clock .clk-sep { opacity:.65; margin:0 1px; }
#hdr-clock .clk-ss  { display:inline-block; min-width:1.2em; text-align:left; }
.clk-tick { animation:clkTick .24s cubic-bezier(.16,1,.3,1); }
@keyframes clkTick { 0% { opacity:.4; transform:translateY(-2px); } 100% { opacity:1; transform:none; } }

/* Required-field marker (DM3) */
.u-red { color:var(--red, #ff4848); }
label .u-red { font-weight:700; margin-left:1px; }

.prof-hero-photo:hover .photo-hover-overlay { opacity:1 !important; }

/* ── Avatar glow ── */
@keyframes avatarGlow {
  0%,100% { box-shadow:0 0 0 2px rgba(212,175,55,.1); }
  50%      { box-shadow:0 0 14px rgba(212,175,55,.3), 0 0 0 2px rgba(212,175,55,.22); }
}
.avatar { animation:avatarGlow 4s var(--ease-out, cubic-bezier(.16,1,.3,1)) infinite; }

/* ── Notification badge heartbeat ── */
@keyframes badgeHeart {
  0%,90%,100% { transform:scale(1); }
  95%          { transform:scale(1.25); }
}
.hdr-icon-badge, .nav-badge { animation:badgePop .3s var(--ease-out, cubic-bezier(.16,1,.3,1)) both, badgeHeart 3s 2s var(--ease-out, cubic-bezier(.16,1,.3,1)) infinite; }

/* ── Mission widget ring ── */
#mission-widget { overflow:hidden; }
#mission-widget::after {
  content:''; position:absolute; inset:-1px; border-radius:15px;
  border:1px solid rgba(212,175,55,.08);
  animation:widgetRing 4s var(--ease-out, cubic-bezier(.16,1,.3,1)) infinite;
  pointer-events:none;
}
@keyframes widgetRing {
  0%,100% { opacity:.4; transform:scale(1); }
  50%      { opacity:1;  transform:scale(1.004); }
}

/* ── Stat card 3D tilt on hover ── */
.stat-card { perspective:600px; }
.stat-card:hover { transform:translateY(-4px) rotateX(1.5deg); }

/* ── Welcome banner shimmer ── */
.welcome { isolation:isolate; }
.welcome > * { position:relative; z-index:1; }
.welcome::after {
  content:''; position:absolute; inset:0; border-radius:20px; z-index:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.018) 50%,transparent 60%);
  background-size:300% 100%; background-position:300% 0;
  animation:wlcShimmer 6s var(--ease-out, cubic-bezier(.16,1,.3,1)) infinite 2s;
  pointer-events:none;
}
@keyframes wlcShimmer {
  0%   { background-position:300% 0; }
  100% { background-position:-300% 0; }
}

/* ── Section heading entrance ── */
.sec-head h2 { animation:headIn .55s var(--ease-out, cubic-bezier(.16,1,.3,1)) both; }
@keyframes headIn { from{opacity:0;transform:translateX(-10px);} to{opacity:1;transform:none;} }

/* ── Glass panel hover top shimmer ── */
.glass::before { transition:opacity .35s; }
.glass:hover::before { opacity:1 !important; }

/* ── Ops bar reveal animation ── */
.ops-bar-fill { animation:opsReveal 2s .6s var(--ease-out, cubic-bezier(.16,1,.3,1)) both; }
@keyframes opsReveal { from{ transform:scaleX(0) !important; } to{ transform:scaleX(1); } }

/* ── Btn active feedback ── */
.btn:active { transform:scale(.96) !important; transition:transform .08s !important; }


/* ── EOM widget entrance ── */
#eom-widget { animation:eomWidgetIn .8s .35s var(--ease-out, cubic-bezier(.16,1,.3,1)) both; }
@keyframes eomWidgetIn {
  from{opacity:0;transform:translateY(14px) scale(.97);}
  to{opacity:1;transform:none;}
}

/* ── Presence dots ── */
.presence-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;border:1.5px solid var(--panel);}
.presence-dot.online{background:#2ecc71;}
.presence-dot.away{background:#f0c832;}
.presence-dot.offline{background:#666;}

/* ── Typing indicator ── */
.chat-typing-bar{min-height:18px;padding:0 14px 5px;font-size:11px;color:var(--t3);font-style:italic;transition:opacity .2s;}

/* Chat message row, .chat-msg-meta, and .chat-msg-del live in
   `css/responsive.css` (centralised shared component CSS — loaded by every
   page). Do NOT re-define them here per CLAUDE.md "centralised mobile +
   shared interaction" rule. */

/* ── Chat back button (hidden desktop, shown mobile via media query) ── */
#chat-back-btn{display:none;}

/* ── Chat Messenger Dropdown ── */
.chat-dd-item {
  display:flex; align-items:center; gap:10px; padding:11px 14px;
  border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s;
}
.chat-dd-item:hover { background:var(--panel); }
.chat-dd-item:last-child { border-bottom:none; }
.chat-dd-avatar {
  width:38px; height:38px; border-radius:50%; flex-shrink:0; overflow:hidden;
  background:linear-gradient(135deg,var(--gold),#8b6914);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#000; position:relative;
}
.chat-dd-avatar img { width:100%; height:100%; object-fit:cover; }
.chat-dd-online { position:absolute; bottom:1px; right:1px; width:9px; height:9px; border-radius:50%; background:var(--green); border:2px solid #0d150c; }
.chat-dd-body { flex:1; min-width:0; }
.chat-dd-name { font-size:12px; font-weight:600; color:var(--text); margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-dd-preview { font-size:11px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-dd-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.chat-dd-time { font-size: 11px; color:var(--t3); }
.chat-dd-unread { background:var(--green); color:#fff; font-size: 11px; font-weight:700; min-width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 3px; }

/* ── Dropdown positioning by icon ── */
#conn-req-dd  { right:calc(2 * 46px + 10px + 10px); }
#hdr-chat-dd  { right:calc(1 * 46px + 10px + 10px); }
#hdr-notif-dd { right:10px; }

@media (max-width:600px) {
  .hdr-notif-dd { width:calc(100vw - 20px) !important; right:10px !important; left:auto !important; }
  #conn-req-dd  { right:10px !important; }
  #hdr-chat-dd  { right:10px !important; }
  #hdr-notif-dd { right:10px !important; }
}

/* ── Pin field regen button ── */
.pin-regen-wrap { display:flex; gap:8px; align-items:center; }
.pin-regen-wrap .gi { flex:1; font-family:var(--mono); letter-spacing:3px; font-size:16px; font-weight:700; color:var(--gold); }
.pin-regen-btn {
  flex-shrink:0; background:var(--gdim); border:1px solid rgba(212,175,55,.3);
  border-radius:9px; color:var(--gold); font-size:11px; font-weight:700;
  padding:10px 13px; cursor:pointer; letter-spacing:.5px;
  transition:background .2s, box-shadow .2s; white-space:nowrap;
}
.pin-regen-btn:hover { background:rgba(212,175,55,.2); box-shadow:0 0 12px rgba(212,175,55,.15); }

/* ================================================================
   TEST MODE BANNER
   ================================================================ */
#test-mode-banner {
  display:none; position:relative; z-index:490;
  background:linear-gradient(90deg,rgba(255,140,0,.14) 0%,rgba(255,180,0,.1) 50%,rgba(255,140,0,.14) 100%);
  border-bottom:1px solid rgba(255,165,0,.35);
  padding:6px 20px; text-align:center;
  font-size:10.5px; font-weight:800; letter-spacing:2.5px; color:#ff8c00;
  text-transform:uppercase;
  animation:testBannerIn .5s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
#test-mode-banner.visible { display:block; }
@keyframes testBannerIn { from{opacity:0;transform:translateY(-100%);} to{opacity:1;transform:none;} }
#test-mode-banner::before {
  content:''; position:absolute; top:0; left:0; right:0; bottom:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,165,0,.04) 50%,transparent 100%);
  background-size:300% 100%;
  animation:testScan 3s linear infinite;
  pointer-events:none;
}
@keyframes testScan { from{background-position:200% 0;} to{background-position:-200% 0;} }

/* ================================================================
   LEAVE BALANCE PANEL
   ================================================================ */
.leave-overview {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  margin-bottom:20px;
}
.lb-card {
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:16px 14px; text-align:center; position:relative; overflow:hidden;
  transition:all .3s var(--ease-out, cubic-bezier(.16,1,.3,1));
  animation:scIn .7s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
.lb-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); }
.lb-card:hover { transform:translateY(-3px); border-color:var(--bord2); }
.lb-card.green { border-color:rgba(67,177,75,.2); }
.lb-card.gold  { border-color:rgba(212,175,55,.2); }
.lb-card.red   { border-color:rgba(232,64,64,.2); }
.lb-lbl { font-size:9.5px; font-weight:800; letter-spacing:1.8px; color:var(--t3); text-transform:uppercase; margin-bottom:10px; }
.lb-val { font-family:var(--mono); font-size:24px; font-weight:700; line-height:1; margin-bottom:5px; }
.lb-unit { font-size: 11px; color:var(--t3); letter-spacing:1px; }
.lb-ring { position:relative; width:58px; height:58px; margin:0 auto 10px; }
.lb-ring svg { transform:rotate(-90deg); width:58px; height:58px; }
.lb-ring-bg { fill:none; stroke:rgba(255,255,255,.06); stroke-width:4; }
.lb-ring-fill { fill:none; stroke-width:4; stroke-linecap:round; stroke-dasharray:163; stroke-dashoffset:163; transition:stroke-dashoffset 1.6s var(--ease-out, cubic-bezier(.16,1,.3,1)); }
.lb-ring-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12px; font-weight:700; }
.lb-empty {
  text-align:center; padding:28px 16px; color:var(--t3);
}
.lb-empty i { font-size:28px; display:block; margin-bottom:10px; opacity:.3; }
.lb-empty p { font-size:12px; line-height:1.6; }

/* ================================================================
   PROBATION COUNTDOWN
   ================================================================ */
.prob-card {
  background:linear-gradient(135deg,rgba(255,69,0,.06) 0%,var(--panel) 70%);
  border:1px solid rgba(255,140,0,.2); border-radius:16px; padding:18px 20px;
  display:flex; align-items:center; gap:16px; margin-bottom:20px;
  animation:scIn .7s .35s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
  transition:all .3s;
}
.prob-card:hover { border-color:rgba(255,140,0,.35); transform:translateY(-2px); }
.prob-ring { position:relative; width:64px; height:64px; flex-shrink:0; }
.prob-ring svg { transform:rotate(-90deg); }
.prob-ring-bg { fill:none; stroke:rgba(255,255,255,.06); stroke-width:5; }
.prob-ring-fill { fill:none; stroke:#ff8c00; stroke-width:5; stroke-linecap:round; stroke-dasharray:178; stroke-dashoffset:178; transition:stroke-dashoffset 1.8s var(--ease-out, cubic-bezier(.16,1,.3,1)); }
.prob-ring-txt { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px; font-weight:700; color:#ff8c00; }
.prob-info { flex:1; }
.prob-title { font-size:11px; font-weight:800; letter-spacing:2px; color:#ff8c00; text-transform:uppercase; margin-bottom:5px; }
.prob-main { font-size:15px; font-weight:700; color:var(--text); margin-bottom:3px; }
.prob-sub { font-size:11px; color:var(--t3); }

/* Overdue probation — paint red so HR sees the action item immediately */
.probation-overdue .prob-card { border-color:rgba(255,72,72,.55); background:linear-gradient(135deg,rgba(255,72,72,.10),var(--panel) 70%); animation:probOverduePulse 1.8s var(--ease-pulse, cubic-bezier(.4,0,.6,1)) infinite; }
.probation-overdue .prob-ring-fill { stroke:#ff4848 !important; }
.probation-overdue .prob-ring-txt { color:#ff4848 !important; }
.probation-overdue .prob-title { color:#ff4848 !important; }
.probation-overdue .prob-main { color:#ff8b8b; }
@keyframes probOverduePulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,72,72,.30);} 50%{box-shadow:0 0 0 6px rgba(255,72,72,0);} }

/* ================================================================
   PERFORMANCE TREND CHART
   ================================================================ */
.perf-chart {
  display:flex; align-items:flex-end; gap:4px; height:44px; margin-top:10px; margin-bottom:4px;
}
.perf-bar {
  flex:1; border-radius:3px 3px 0 0; min-height:4px;
  transition:height .8s var(--ease-out, cubic-bezier(.16,1,.3,1)), background .5s;
  cursor:default; position:relative;
}
.perf-bar::after {
  content:attr(data-val);
  position:absolute; top:-18px; left:50%; transform:translateX(-50%);
  font-size: 11px; font-family:var(--mono); color:var(--t3);
  opacity:0; transition:opacity .2s;
}
.perf-bar:hover::after { opacity:1; }
.perf-trend-row { display:flex; align-items:center; gap:6px; font-size: 11px; color:var(--t3); margin-top:4px; }
.perf-trend-arrow { font-size:12px; font-weight:700; }

/* ================================================================
   ACADEMY CENTER
   ================================================================ */
.academy-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:6px; }
.academy-card {
  background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:18px;
  transition:all .3s var(--ease-out, cubic-bezier(.16,1,.3,1)); position:relative; overflow:hidden;
  animation:scIn .6s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
.academy-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent); }
.academy-card:hover { border-color:rgba(212,175,55,.3); transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,.3); }
.academy-card-icon { width:38px; height:38px; border-radius:10px; background:var(--gdim); border:1px solid rgba(212,175,55,.2); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--gold); margin-bottom:12px; }
.academy-card-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:4px; line-height:1.4; }
.academy-card-cat { font-size:9.5px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.academy-card-desc { font-size:11px; color:var(--t3); line-height:1.6; margin-bottom:12px; }
.academy-card-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:7px; font-size: 11px; font-weight:700; letter-spacing:.8px;
  text-decoration:none; cursor:pointer; transition:all .25s;
  background:var(--gdim); border:1px solid rgba(212,175,55,.25); color:var(--gold);
}
.academy-card-btn:hover { background:rgba(212,175,55,.2); box-shadow:0 0 14px rgba(212,175,55,.15); }
.academy-empty { text-align:center; padding:52px 24px; color:var(--t3); }
.academy-empty i { font-size:44px; display:block; margin-bottom:16px; opacity:.2; }
.academy-empty h3 { font-family:var(--disp); font-size:16px; letter-spacing:2px; color:var(--t3); margin-bottom:8px; }
.academy-empty p { font-size:12px; line-height:1.7; max-width:360px; margin:0 auto; }

/* ================================================================
   EOM ELIGIBILITY BADGE (on dashboard)
   ================================================================ */
.eom-eligibility-row {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  margin-top:12px; font-size:12px;
}
.eom-elig-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.eom-elig-open { background:var(--green); box-shadow:0 0 8px var(--green); animation:blink 1.8s infinite; }
.eom-elig-closed { background:rgba(255,255,255,.2); }

@media (max-width:1100px) { .leave-overview { grid-template-columns:repeat(2,1fr); } }
@media (max-width:820px)  { .leave-overview { grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px)  { .leave-overview { grid-template-columns:1fr 1fr; } .prob-card { flex-direction:column; text-align:center; } }
@media (max-width:400px)  { .leave-overview { grid-template-columns:1fr; } }

#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:tmBIn .45s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;}
@keyframes tmBIn{from{transform:translateY(-100%);opacity:0;}to{transform:translateY(0);opacity:1;}}
.maint-toggle-btn{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45);color:#fff;padding:4px 14px;border-radius:20px;cursor:pointer;font-size: 11px;font-weight:900;letter-spacing:1.5px;white-space:nowrap;transition:background .2s,transform .2s;}
.maint-toggle-btn:hover{background:rgba(255,255,255,.32);transform:scale(1.05);}
#maint-overlay{display:none;position:fixed;inset:0;z-index:999997;background:rgba(5,9,5,.96);align-items:center;justify-content:center;flex-direction:column;gap:16px;color:#fff;text-align:center;padding:32px;}
#maint-overlay.show{display:flex;}
#maint-overlay i{font-size:48px;color:var(--gold);margin-bottom:8px;}
#maint-overlay h2{font-family:var(--disp);font-size:28px;letter-spacing:4px;margin:0;}
#maint-overlay p{color:rgba(255,255,255,.6);font-size:13px;max-width:440px;line-height:1.7;}
/* Non-SA informational notice — index stays viewable; only boards are gated */
#maint-notice{display:none;position:fixed;top:0;left:0;right:0;z-index:999996;padding:9px 44px;
  background:linear-gradient(90deg,rgba(180,120,0,.97),rgba(220,160,0,.97));border-bottom:2px solid rgba(255,200,50,.55);
  align-items:center;justify-content:center;gap:10px;font-size:12.5px;font-weight:700;color:#1a1206;text-align:center;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
#maint-notice.show{display:flex;animation:tmBIn .45s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;}
#maint-notice i{font-size:14px;flex-shrink:0;}
/* ── SYSTEM NOTIFICATION BELL ── */
.sys-notif-wrap{position:relative;display:inline-flex;align-items:center;}.sys-notif-btn{width:36px;height:36px;border-radius:50%;background:transparent;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);font-size:15px;position:relative;transition:all .2s;}.sys-notif-btn:hover{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.4);color:var(--blue);}.sys-notif-btn.has-alerts{color:var(--gold);animation:sysNBShake 2s var(--ease-out, 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 var(--ease-out, 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;}

/* ── OUR TEAM SECTION ── */
@keyframes otCardIn{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}
.ot-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:22px 16px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;transition:border-color .22s var(--ease-out, cubic-bezier(.16,1,.3,1)),transform .22s var(--ease-out, cubic-bezier(.16,1,.3,1)),box-shadow .22s;animation:otCardIn .5s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;}
.ot-card:hover{border-color:rgba(212,175,55,.3);transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.25);}
.ot-avatar{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:22px;font-weight:700;flex-shrink:0;overflow:hidden;}
.ot-name{font-size:14px;font-weight:700;color:var(--text);line-height:1.3;margin-top:4px;}
.ot-dept-tag{font-size: 11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;padding:3px 10px;border-radius:20px;}
.ot-id-wrap{display:flex;align-items:center;gap:6px;margin-top:4px;}
.ot-id-label{font-size: 11px;font-weight:700;letter-spacing:1.5px;color:var(--t3);text-transform:uppercase;}
.ot-id-val{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--gold);letter-spacing:.5px;}
.ot-connect-btn{margin-top:6px;width:100%;padding:8px 0;background:rgba(240,200,50,.08);border:1px solid rgba(240,200,50,.25);border-radius:9px;color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.8px;cursor:pointer;transition:all .18s var(--ease-out, cubic-bezier(.16,1,.3,1));display:flex;align-items:center;justify-content:center;gap:6px;}
.ot-connect-btn:hover{background:rgba(240,200,50,.16);border-color:rgba(240,200,50,.5);transform:scale(1.02);}
.ot-self-tag{margin-top:6px;width:100%;padding:8px 0;background:rgba(76,214,87,.06);border:1px solid rgba(76,214,87,.18);border-radius:9px;color:var(--green);font-size:11px;font-weight:700;letter-spacing:.8px;display:flex;align-items:center;justify-content:center;gap:6px;}
@keyframes otBtnIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.ot-connect-btn{animation:otBtnIn .28s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;}
@media(max-width:640px){#ot-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px;}.ot-avatar{width:58px;height:58px;font-size:18px;}.ot-name{font-size:13px;}}
@media(max-width:400px){#ot-grid{grid-template-columns:repeat(2,1fr);}}

/* ───── iPhone-width mobile patches (≤414px) ─────
   Fixes audited by the mobile-fit pass. Targets only narrow viewports
   so desktop layout is untouched. */
@media (max-width:540px){
  .dash-grid{grid-template-columns:1fr 1fr!important;gap:10px!important;}
  .rota-strip{grid-template-columns:repeat(4,1fr)!important;}
  .modal-box{max-width:calc(100vw - 24px)!important;padding:20px 16px!important;}
}
@media (max-width:414px){
  .hdr-notif-dd,.hdr-chat-dd{width:calc(100vw - 20px)!important;right:10px!important;left:10px!important;}
}
@media (max-width:400px){
  .dash-grid{grid-template-columns:1fr!important;}
  .rota-strip{grid-template-columns:repeat(3,1fr)!important;font-size:11px;}
}

/* ================================================================
   PAGE TRANSITION — Enterprise fade between staff <-> applicant
   login pages. Triggered by a sessionStorage flag set just before
   navigation. The fade-out is on outgoing click; fade-in is on
   arrival when the flag is present.
   ================================================================ */
html.page-fading-out{
  animation:dttasaPageFadeOut 420ms var(--ease-out, cubic-bezier(.16,1,.3,1)) forwards;
}
@keyframes dttasaPageFadeOut{
  from{ opacity:1; transform:scale(1);   filter:blur(0); }
  to  { opacity:0; transform:scale(.985);filter:blur(2px); }
}
html.page-entering body{
  animation:dttasaPageEnterIn 600ms var(--ease-out, cubic-bezier(.16,1,.3,1));
}
@keyframes dttasaPageEnterIn{
  from{ opacity:0; transform:scale(1.012); filter:blur(3px); }
  to  { opacity:1; transform:scale(1);     filter:blur(0);   }
}

/* ================================================================
   LOGIN — Tab row (Staff vs Applicant) and mode-toggled fields.
   The card carries data-login-mode="staff" or "applicant". CSS
   selectors below hide the elements that don't belong to the
   current mode so a single card serves both audiences.
   ================================================================ */
.login-card[data-login-mode="staff"]     [data-applicant]{ display:none !important; }
.login-card[data-login-mode="applicant"] [data-staff]    { display:none !important; }

.login-card .login-tabrow{
  display:flex; gap:6px; margin-bottom:18px; padding:4px;
  background:rgba(0,0,0,.28); border:1px solid var(--border); border-radius:11px;
}
.login-card .login-tab{
  flex:1; background:transparent; border:none; cursor:pointer;
  color:var(--t3); font-family:'DM Sans',sans-serif; font-weight:700;
  font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
  padding:9px 10px; border-radius:7px;
  transition:background .25s var(--ease-out, cubic-bezier(.16,1,.3,1)), color .25s var(--ease-out, cubic-bezier(.16,1,.3,1)), box-shadow .25s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.login-card .login-tab i{ margin-right:5px; }
.login-card .login-tab.active{
  background:var(--gold); color:var(--void);
  box-shadow:0 4px 14px rgba(240,200,50,.25);
}
.login-card .login-tab:hover:not(.active){ color:var(--gold); }

.login-card .login-help-app{
  font-size:11px; color:var(--t2); line-height:1.6;
  margin:-4px 0 14px; padding:10px 12px;
  background:rgba(240,200,50,.06); border:1px solid rgba(240,200,50,.18);
  border-radius:8px; text-align:left;
}

/* ================================================================
   DTTASA SPLASH — Cathedral Boot
   Plays once per session over a 2.2s window. Self-removes via inline
   script in index.html. Native iOS launch storyboard stays #0c1109
   so the handoff is seamless — no white flash, no Apple-blue default.
   ================================================================ */
#dttasa-splash{
  position:fixed; inset:0; z-index:99999;
  background:#0c1109;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; pointer-events:none;
  animation:splashExit .4s var(--ease-out, cubic-bezier(.16,1,.3,1)) 1800ms forwards;
}
/* Suppressed by js/index-prepaint.js when this isn't a true cold start
   (pull-to-refresh, in-app navigation, or splash shown <5 min ago).
   Setting the attribute on <html> synchronously in <head> means the
   splash never renders at all, avoiding the "flash then remove" we saw
   on iOS PWA. */
html[data-no-splash] #dttasa-splash{ display:none !important; }
@keyframes splashExit{ from{opacity:1;} to{opacity:0;visibility:hidden;} }

#dttasa-splash .splash-orb{
  position:absolute; width:60vmax; height:60vmax; border-radius:50%;
  background:radial-gradient(circle, rgba(240,200,50,.06), transparent 60%);
  filter:blur(40px);
  animation:splashOrbDrift 10s var(--ease-pulse, cubic-bezier(.4,0,.6,1)) infinite alternate;
  will-change:transform;
}
#dttasa-splash .splash-orb-tl{ top:-30vmax; left:-30vmax; }
#dttasa-splash .splash-orb-br{ bottom:-30vmax; right:-30vmax; animation-delay:-5s; }
@keyframes splashOrbDrift{
  from{ transform:translate(0,0); }
  to  { transform:translate(8vmax,8vmax); }
}

#dttasa-splash .splash-scan{
  position:absolute; inset:0;
  background:linear-gradient(135deg,
    transparent 0%,
    rgba(240,200,50,.012) 45%,
    rgba(240,200,50,.025) 50%,
    rgba(240,200,50,.012) 55%,
    transparent 100%);
  background-size:200% 200%;
  animation:splashScan 6s linear infinite;
}
@keyframes splashScan{
  from{ background-position:100% 100%; }
  to  { background-position:-100% -100%; }
}

#dttasa-splash .splash-center{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  font-family:'Cinzel', serif;
  color:#f2f7ee;
}

#dttasa-splash .splash-logo{
  width:88px; height:88px; object-fit:contain;
  opacity:0; transform:scale(.92);
  filter:drop-shadow(0 0 0 rgba(240,200,50,0));
  animation:
    splashLogoIn .8s var(--ease-out, cubic-bezier(.16,1,.3,1)) 0ms forwards,
    splashLogoGlow 1s var(--ease-pulse, cubic-bezier(.4,0,.6,1)) 200ms 1;
}
@keyframes splashLogoIn{
  from{ opacity:0; transform:scale(.92); }
  to  { opacity:1; transform:scale(1);   }
}
@keyframes splashLogoGlow{
  0%,100%{ filter:drop-shadow(0 0 0 rgba(240,200,50,0));     }
  50%    { filter:drop-shadow(0 0 28px rgba(240,200,50,.55)); }
}

#dttasa-splash .splash-wordmark{
  margin-top:18px;
  font-size:26px; font-weight:700; letter-spacing:6px;
  color:#f0c832; opacity:0;
  animation:splashFadeIn .6s var(--ease-out, cubic-bezier(.16,1,.3,1)) 600ms forwards;
}
@keyframes splashFadeIn{ to{ opacity:1; } }

#dttasa-splash .splash-line{
  margin-top:14px; width:0; height:1px;
  background:linear-gradient(90deg, transparent, #f0c832, transparent);
  animation:splashLineDraw .4s var(--ease-out, cubic-bezier(.16,1,.3,1)) 800ms forwards;
}
@keyframes splashLineDraw{ to{ width:180px; } }

#dttasa-splash .splash-tagline{
  margin-top:18px;
  font-family:'Cinzel', serif; font-style:italic;
  font-size:12px; letter-spacing:1px;
  color:rgba(242,247,238,.6); opacity:0;
  animation:splashFadeIn .5s var(--ease-out, cubic-bezier(.16,1,.3,1)) 1100ms forwards;
}

@media (max-width:540px){
  #dttasa-splash .splash-logo{ width:72px; height:72px; }
  #dttasa-splash .splash-wordmark{ font-size:22px; letter-spacing:5px; }
  #dttasa-splash .splash-line{ animation-name:splashLineDrawMobile; }
  @keyframes splashLineDrawMobile{ to{ width:140px; } }
  #dttasa-splash .splash-tagline{ font-size:11px; padding:0 24px; text-align:center; }
}
@media (prefers-reduced-motion: reduce){
  /* Global override — every keyframe/transition runs effectively instantly.
     Per WCAG 2.3.3, users who opted out of motion in their OS should not
     receive entrance animations / loops / pulses / breathing effects. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  #dttasa-splash, #dttasa-splash *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}

.ix-hover-gold:hover{color:var(--gold)!important;}
.ix-hover-green-border:hover{border-color:rgba(67,177,75,.5)!important;}


/* Stronger visual distinction between read and unread system-notifications.
   Reported 2026-05-24 — the bell dropdown made every row look the same. */
.sn-item {
  border-left: 3px solid transparent !important;
  transition: background .25s, border-color .25s, opacity .25s !important;
}
.sn-item.sn-unread {
  background: linear-gradient(90deg, rgba(240,200,50,.10), rgba(240,200,50,.02)) !important;
  border-left-color: var(--gold, #f0c832) !important;
}
.sn-item.sn-unread .sn-title {
  font-weight: 700;
  color: var(--text);
}
.sn-item.sn-unread .sn-title .s-6prouic,
.sn-item.sn-unread .sn-title :is(span):last-child {
  /* The inline "NEW" badge from the renderer — give it a strong pill look. */
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  background: var(--gold, #f0c832);
  color: #11160a;
  border-radius: 999px;
  vertical-align: 2px;
}
.sn-item.sn-read {
  opacity: .55 !important;
  background: transparent !important;
}
.sn-item.sn-read:hover { opacity: .82 !important; }
.sn-item.sn-read .sn-title { font-weight: 500; color: var(--t2); }
.sn-unread-dot { background: var(--gold, #f0c832) !important; box-shadow: 0 0 0 0 rgba(240,200,50,.45); animation: snDotPulse 2.4s var(--ease-out, cubic-bezier(.16,1,.3,1)) infinite; }
@keyframes snDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(240,200,50,.55); transform: scale(.92); }
  70%  { box-shadow: 0 0 0 7px rgba(240,200,50,0); transform: scale(1.18); }
  100% { box-shadow: 0 0 0 0 rgba(240,200,50,0); transform: scale(.92); }
}

/* ════════════════════════════════════════════════════════════════
   DASHBOARD — full port of dashboard-preview.html design (2026-06-07)
   Every class is `dp-` prefixed + tokens are scoped to #dash-sec.dp-dash
   so NOTHING collides with the rest of the portal. Weather stays the
   real #dash-weather-card (per VP). Other sections/pages untouched.
   ════════════════════════════════════════════════════════════════ */
#dash-sec.dp-dash{
  --gold2:#f7d94e;--gdim:rgba(212,175,55,.12);--gglow:rgba(212,175,55,.3);
  --amber:#f59e0b;--blue:#7b9fd4;--lift:#1e2e1b;--ease:cubic-bezier(.16,1,.3,1);
  --panel2:rgba(255,255,255,.18);--border:rgba(255,255,255,.16);--t3:rgba(242,247,238,.58);
}
.dp-glass{background:var(--panel);border:1px solid var(--border);border-radius:18px;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 10px 34px -8px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.10);
  transition:background .5s ease,border-color .35s ease,transform .35s var(--ease),box-shadow .35s var(--ease)}
.dp-rv{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.dp-rv.in{opacity:1;transform:none}

/* hero */
.dp-hero{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;margin-bottom:20px}
.dp-hero-main{padding:26px 28px;position:relative;overflow:hidden}
.dp-hero-main::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,var(--gglow),transparent 70%);animation:dpAurora 12s ease-in-out infinite alternate}
@keyframes dpAurora{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-20px,14px,0) scale(1.08)}}
.dp-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.dp-greet{font-family:var(--disp);font-weight:700;font-size:29px;margin:8px 0 6px;line-height:1.12;color:var(--text)}
.dp-sub{color:var(--t3);font-size:14px;max-width:58ch}
.dp-pips{display:flex;gap:16px;margin-top:20px;flex-wrap:wrap}
.dp-pip{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t2)}
.dp-pip i{width:30px;height:30px;border-radius:9px;background:var(--gdim);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:13px}
.dp-pip b{font-weight:700;color:var(--text)}
.dp-clock{padding:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:linear-gradient(160deg,var(--gdim),var(--panel))}
.dp-clock-time{font-family:var(--mono);font-weight:700;font-size:40px;letter-spacing:2px;color:var(--gold2)}
.dp-clock-date{color:var(--t3);font-size:13px;margin-top:4px}
.dp-clock-status{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;padding:7px 14px;border-radius:20px;background:rgba(76,214,87,.14);color:var(--green);border:1px solid rgba(76,214,87,.3);cursor:pointer}
.dp-blink{width:8px;height:8px;border-radius:50%;background:var(--green);animation:dpBk 1.6s var(--ease) infinite}
@keyframes dpBk{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* KPIs */
.dp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.dp-kpi{padding:18px;display:flex;flex-direction:column;gap:6px}
.dp-kpi:hover{transform:translateY(-4px);border-color:var(--gglow);box-shadow:0 14px 34px rgba(0,0,0,.3)}
.dp-kpi-top{display:flex;align-items:center;justify-content:space-between}
.dp-kpi-ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px}
.dp-kpi-val{font-family:var(--mono);font-weight:700;font-size:29px;line-height:1;color:var(--text)}
.dp-kpi-lbl{font-size:12px;color:var(--t3);font-weight:600}
.dp-kpi-trend{font-size:11px;font-weight:700}.dp-up{color:var(--green)}

/* quick actions */
.dp-qa{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:22px}
.dp-qtile{padding:16px 12px;border-radius:14px;background:var(--panel);border:1px solid var(--border);text-align:center;cursor:pointer;transition:.3s var(--ease);position:relative;overflow:hidden;color:var(--text)}
.dp-qtile:hover{transform:translateY(-5px);border-color:var(--gglow);background:var(--gdim)}
.dp-qtile i{font-size:20px;color:var(--gold);display:block;margin-bottom:9px;transition:transform .3s var(--ease)}
.dp-qtile:hover i{transform:scale(1.2) translateY(-2px)}
.dp-qtile span{font-size:12px;font-weight:600}

/* grid */
.dp-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:18px;align-items:start}
.dp-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.dp-card{padding:20px 22px}
.dp-card:hover{border-color:var(--gglow)}
.dp-card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px}
.dp-card-t{font-size:15px;font-weight:700;display:flex;align-items:center;gap:9px;color:var(--text)}
.dp-card-t i{color:var(--gold)}
.dp-more{font-size:12px;color:var(--gold);font-weight:600;cursor:pointer;white-space:nowrap}
.dp-lrow{margin-bottom:14px}
.dp-lrow-top{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px;color:var(--t2)}
.dp-lrow-top b{font-family:var(--mono);font-weight:700}
.dp-bar{height:8px;border-radius:6px;background:var(--panel2);overflow:hidden}
.dp-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--gold),var(--gold2));width:0;transition:width 1.1s var(--ease)}
.dp-lst{display:flex;flex-direction:column;gap:2px}
.dp-li{display:flex;align-items:center;gap:13px;padding:11px 8px;border-radius:10px;transition:background .2s,transform .2s var(--ease)}
.dp-li:hover{background:var(--panel);transform:translateX(3px)}
.dp-li-main{flex:1;min-width:0}.dp-li-main .dp-nm{font-size:13.5px;font-weight:600;color:var(--text)}.dp-li-main .dp-mt{font-size:11.5px;color:var(--t3)}
.dp-badge{font-size:10px;font-weight:800;letter-spacing:.4px;padding:4px 9px;border-radius:14px;text-transform:uppercase;white-space:nowrap}
.dp-b-green{background:rgba(76,214,87,.15);color:var(--green)}.dp-b-gold{background:var(--gdim);color:var(--gold)}.dp-b-amber{background:rgba(245,158,11,.15);color:var(--amber)}
.dp-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--void);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;font-family:var(--mono);flex-shrink:0}
.dp-spot{padding:24px;text-align:center;background:linear-gradient(160deg,var(--gdim),var(--panel));position:relative;overflow:hidden}
.dp-crown{font-size:26px;color:var(--gold);margin-bottom:10px;animation:dpFloat 3.5s ease-in-out infinite}
@keyframes dpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.dp-spot-av{width:72px;height:72px;border-radius:50%;margin:0 auto 12px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--void);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;font-family:var(--mono);border:3px solid var(--gglow);box-shadow:0 0 24px var(--gglow)}
.dp-spot-nm{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--text)}
.dp-spot-rl{font-size:12px;color:var(--t3);margin:3px 0 12px}
.dp-spot-q{font-size:13px;font-style:italic;color:var(--t2);line-height:1.5}
.dp-msg{display:flex;gap:10px;padding:9px 0}.dp-msg .dp-av{width:28px;height:28px;font-size:11px}
.dp-msg-b{flex:1}.dp-msg-b .dp-mn{font-size:12px;font-weight:700;color:var(--text)}.dp-msg-b .dp-mx{font-size:12.5px;color:var(--t2);line-height:1.4}
.dp-chat-in{display:flex;gap:8px;margin-top:12px}
.dp-chat-in input{flex:1;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:9px 12px;color:var(--text);font-family:var(--body);font-size:13px}
.dp-btn{background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--void);border:none;border-radius:10px;padding:9px 14px;font-weight:700;cursor:pointer}

/* announcement banner */
.dp-anbn{display:flex;align-items:center;gap:16px;padding:16px 22px;margin-bottom:20px;border-radius:16px;background:linear-gradient(100deg,var(--gdim),var(--panel));border:1px solid var(--gglow);position:relative;overflow:hidden}
.dp-anbn .dp-ic{width:44px;height:44px;border-radius:12px;background:var(--gold);color:var(--void);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.dp-anbn-b{flex:1;min-width:0}.dp-anbn-b .dp-t{font-weight:700;font-size:14.5px;color:var(--text)}.dp-anbn-b .dp-x{font-size:12.5px;color:var(--t2);margin-top:2px}
.dp-anbn .dp-when{font-size:11px;color:var(--gold);font-weight:700;white-space:nowrap}
.dp-anbn .dp-pin{position:absolute;top:10px;right:14px;font-size:10px;color:var(--gold)}

/* pending actions */
.dp-pa{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:11px;border:1px solid transparent;transition:.2s}
.dp-pa:hover{background:var(--panel);border-color:var(--border);transform:translateX(3px)}
.dp-pa .dp-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.dp-pa-b{flex:1}.dp-pa-b .dp-t{font-size:13px;font-weight:600;color:var(--text)}.dp-pa-b .dp-x{font-size:11.5px;color:var(--t3)}
.dp-pa .dp-go{font-size:11px;font-weight:700;color:var(--gold);white-space:nowrap}

/* week strip */
.dp-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.dp-wd{text-align:center;padding:10px 4px;border-radius:11px;background:var(--panel2);border:1px solid transparent}
.dp-wd.dp-today{border-color:var(--gglow);background:var(--gdim)}
.dp-wd .dp-dn{font-size:10px;color:var(--t3);font-weight:700;text-transform:uppercase}
.dp-wd .dp-dd{font-family:var(--mono);font-weight:700;font-size:16px;margin:3px 0;color:var(--text)}
.dp-wd .dp-tag{font-size:9px;font-weight:800;border-radius:6px}.dp-wd .dp-tag.s{color:var(--green)}.dp-wd .dp-tag.l{color:var(--gold)}.dp-wd .dp-tag.o{color:var(--t3)}

.dp-cpill{font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:3px 7px;border-radius:10px;background:var(--gdim);color:var(--gold)}
.dp-ago{font-size:10.5px;color:var(--t3);white-space:nowrap;margin-left:auto}

/* activity feed */
.dp-feed-i{display:flex;gap:11px;padding:9px 0}
.dp-feed-i .dp-fi{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.dp-feed-b{flex:1}.dp-feed-b .dp-ft{font-size:12.5px;color:var(--t2);line-height:1.4}.dp-feed-b .dp-ft b{color:var(--text);font-weight:700}
.dp-feed-b .dp-fw{font-size:10.5px;color:var(--t3);margin-top:1px}

/* glass + diamond */
.dp-dia{position:relative;overflow:hidden}
.dp-dia::after{content:"";position:absolute;top:-60%;left:-70%;width:45%;height:220%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),rgba(255,255,255,.04),transparent);
  transform:rotate(9deg);transition:left .75s var(--ease)}
.dp-dia:hover::after{left:150%}
.dp-dia-auto::after{animation:dpShine 7s ease-in-out infinite}
@keyframes dpShine{0%,55%{left:-70%}78%,100%{left:150%}}
.dp-facet{background:
  linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 42%,var(--panel)),
  linear-gradient(320deg,var(--gdim),transparent 60%)}
.dp-facet,.dp-dia{border:1px solid rgba(255,255,255,.22)}
.dp-dmd{width:9px;height:9px;background:var(--gold);transform:rotate(45deg);box-shadow:0 0 10px var(--gglow);flex-shrink:0;display:inline-block;vertical-align:middle;margin-left:4px}
@keyframes dpSparkle{0%,100%{opacity:.35;transform:scale(.8) rotate(45deg)}50%{opacity:1;transform:scale(1.15) rotate(45deg)}}
.dp-spk{animation:dpSparkle 2.6s ease-in-out infinite}

/* mission performance */
.dp-perf{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.dp-ring{--p:23;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:radial-gradient(closest-side,var(--deep) 78%,transparent 79%),conic-gradient(var(--gold) calc(var(--p)*1%),var(--panel2) 0)}
.dp-ring b{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--gold2)}
.dp-ring small{display:block;font-size:9px;color:var(--t3);text-align:center;margin-top:-2px}
.dp-perf-meta .dp-pm{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:8px;color:var(--t2)}
.dp-perf-meta .dp-pm i{color:var(--green)}.dp-perf-meta .dp-pm b{font-family:var(--mono);color:var(--text)}
.dp-perf-stats{display:flex;gap:10px;margin-top:6px}
.dp-pstat{flex:1;background:var(--panel2);border-radius:12px;padding:12px;text-align:center}
.dp-pstat .v{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--text)}.dp-pstat .l{font-size:10.5px;color:var(--t3);font-weight:600}

/* security level */
.dp-sec{display:flex;align-items:center;gap:16px;padding:18px 20px}
.dp-sec-badge{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--void);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;box-shadow:0 0 22px var(--gglow)}
.dp-sec-b .dp-lv{font-family:var(--disp);font-weight:700;font-size:18px;color:var(--text)}.dp-sec-b .dp-rl{font-size:12px;color:var(--t2);margin-top:2px}
.dp-sec-b .dp-ac{font-size:11px;color:var(--gold);font-weight:700;margin-top:3px}

/* EOM voting */
.dp-eomv{padding:20px;text-align:center;background:linear-gradient(160deg,var(--gdim),var(--panel))}
.dp-eomv .dp-st{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.5px;padding:5px 12px;border-radius:16px;background:rgba(76,214,87,.16);color:var(--green);text-transform:uppercase}
.dp-eomv .dp-cd{font-family:var(--mono);font-weight:700;font-size:26px;color:var(--gold2);margin:14px 0 4px;letter-spacing:1px}
.dp-eomv .dp-cl{font-size:11.5px;color:var(--t3)}
.dp-eomv .dp-vbtn{margin-top:14px;width:100%;background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--void);border:none;border-radius:11px;padding:11px;font-weight:800;cursor:pointer;font-size:13px}

/* mini calendar */
.dp-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.dp-cal-grid .dp-dh{font-size:9px;color:var(--t3);text-align:center;font-weight:700;font-family:var(--mono);padding-bottom:4px}
.dp-cal-c{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:12.5px;color:var(--t2);position:relative;background:var(--panel2);transition:transform .2s var(--ease)}
.dp-cal-c:hover{transform:scale(1.08)}
.dp-cal-c.dp-mut{background:transparent;color:var(--t3);opacity:.35}
.dp-cal-c.dp-today{background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--void);font-weight:800;box-shadow:0 0 16px var(--gglow)}
.dp-cal-c .dp-mk{position:absolute;bottom:4px;display:flex;gap:2px}
.dp-cal-c .dp-mk i{width:4px;height:4px;border-radius:50%;display:block}
.dp-cal-leg{display:flex;gap:16px;margin-top:14px;font-size:11px;color:var(--t3);flex-wrap:wrap}
.dp-cal-leg span{display:inline-flex;align-items:center;gap:6px}
.dp-cal-leg b{width:8px;height:8px;border-radius:50%;display:inline-block}

/* section label + board launchers */
.dp-sec-lbl{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--t3);margin:4px 2px 12px;display:flex;align-items:center;gap:9px}
.dp-sec-lbl::after{content:"";flex:1;height:1px;background:var(--border)}
.dp-boards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.dp-bcard{position:relative;overflow:hidden;border-radius:15px;padding:16px;background:var(--panel);border:1px solid var(--border);cursor:pointer;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;color:var(--text)}
.dp-bcard:hover{transform:translateY(-4px);border-color:var(--gglow);box-shadow:0 14px 32px rgba(0,0,0,.3)}
.dp-bcard .dp-bic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:17px;margin-bottom:10px}
.dp-bcard .dp-bt{font-size:13.5px;font-weight:700}
.dp-bcard .dp-bx{font-size:11px;color:var(--t3);margin-top:2px}
.dp-bcard .dp-brole{position:absolute;top:12px;right:12px;font-size:8.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--gold);background:var(--gdim);padding:3px 7px;border-radius:8px}

/* connections */
.dp-conn-i{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--border)}
.dp-conn-i:last-child{border-bottom:none}
.dp-conn-act{display:flex;gap:6px;margin-left:auto}
.dp-conn-act button{border:none;border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:12px;transition:transform .2s}
.dp-conn-act .ok{background:var(--green);color:var(--void)}.dp-conn-act .no{background:var(--panel2);color:var(--t2)}

/* SA controls */
.dp-sc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.dp-sc-row:last-child{border-bottom:none}
.dp-sc-l .dp-sc-t{font-size:13px;font-weight:600;color:var(--text)}.dp-sc-l .dp-sc-x{font-size:11px;color:var(--t3);margin-top:1px}
.dp-tgl{width:44px;height:24px;border-radius:13px;background:var(--panel2);position:relative;cursor:pointer;transition:background .3s;flex-shrink:0}
.dp-tgl::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .3s var(--ease)}
.dp-tgl.on{background:var(--green)}.dp-tgl.on::after{left:23px}
.dp-tgl.on.amber{background:var(--amber)}
.dp-tgl:active{transform:scale(.9);filter:brightness(1.35)}
.dp-tgl{transition:background .3s,transform .12s,filter .12s}
/* System Controls v2 — interactive switch rows (VP 2026-06-12 redesign) */
.dp-sw-row{display:flex;align-items:center;gap:12px;width:100%;padding:11px 2px;background:none;border:0;border-bottom:1px solid var(--border);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:background .2s;border-radius:8px}
.dp-sw-row:hover{background:rgba(255,255,255,.04)}
.dp-sw-row:active .dp-sw{transform:scale(.92)}
.dp-sw-row .dp-sc-l{flex:1;display:flex;flex-direction:column;gap:2px}
.dp-sw-state{font-family:var(--mono,monospace);font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--t3);min-width:26px;text-align:right}
.dp-sw-row.on .dp-sw-state{color:var(--green)}
.dp-sw-row.on.amber .dp-sw-state{color:var(--amber)}
.dp-sw{width:44px;height:24px;border-radius:13px;background:var(--panel2);position:relative;flex-shrink:0;transition:background .3s,transform .12s;display:inline-block}
.dp-sw-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .3s var(--ease);display:block}
.dp-sw-row.on .dp-sw{background:var(--green)}
.dp-sw-row.on .dp-sw-knob{left:23px}
.dp-sw-row.on.amber .dp-sw{background:var(--amber)}
.dp-sc-status{margin-top:10px;font-size:11px;color:var(--t3);line-height:1.6;letter-spacing:.3px}
.dp-sc-status.err{color:var(--red);font-weight:600}
/* Premium pass — profile "Update Contact Details" + "Restricted Profile Fields" (VP 2026-06-12) */
.s-4lmpbyv{background:linear-gradient(165deg,rgba(212,175,55,.05),rgba(8,13,7,.0)) , var(--panel)!important;border:1px solid rgba(212,175,55,.22)!important;border-radius:18px!important;padding:22px 24px!important;box-shadow:0 10px 34px -18px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05)!important;}
.s-4lmpbyv .pib-title{font-family:var(--disp,'Cinzel',serif);letter-spacing:1.6px;color:var(--gold);}
.s-4lmpbyv .gi{background:rgba(0,0,0,.30)!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:11px!important;padding:12px 14px!important;transition:border-color .25s,box-shadow .25s,transform .25s;}
.s-4lmpbyv .gi:focus{border-color:var(--gold)!important;box-shadow:0 0 0 3px var(--gdim),0 8px 22px -10px rgba(212,175,55,.35)!important;transform:translateY(-1px);}
.s-di0oppl{background:linear-gradient(165deg,rgba(100,116,139,.07),rgba(8,13,7,0)),var(--panel)!important;border:1px solid rgba(100,116,139,.28)!important;border-radius:18px!important;padding:22px 24px!important;box-shadow:0 10px 34px -18px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04)!important;}
.s-di0oppl .pib-title{font-family:var(--disp,'Cinzel',serif);letter-spacing:1.6px;}
.s-xpnzy1e{background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:11px!important;padding:12px 14px!important;transition:border-color .25s,transform .25s;}
.s-xpnzy1e:hover{border-color:rgba(212,175,55,.3)!important;transform:translateY(-1px);}
.s-dziagcr{font-size:12.5px!important;color:var(--text)!important;}

/* VMEM bridge */
.dp-vmem-i{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:12.5px;color:var(--t2)}
.dp-vmem-i:last-child{border-bottom:none}
.dp-vbadge{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:3px 7px;border-radius:8px;background:rgba(245,158,11,.16);color:var(--amber);white-space:nowrap}
.dp-vbtn-sm{margin-left:auto;border:1px solid var(--gglow);background:var(--gdim);color:var(--gold);border-radius:8px;padding:6px 10px;font-size:10.5px;font-weight:700;cursor:pointer;white-space:nowrap}

/* system health */
.dp-health-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;font-size:12.5px;border-bottom:1px solid var(--border);color:var(--t2)}
.dp-health-row:last-child{border-bottom:none}
.dp-hpip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700}
.dp-hpip .d{width:8px;height:8px;border-radius:50%;box-shadow:0 0 8px currentColor}

/* responsive */
@media(max-width:1100px){#dash-sec .dp-hero,#dash-sec .dp-grid{grid-template-columns:1fr}#dash-sec .dp-kpis,#dash-sec .dp-boards{grid-template-columns:repeat(2,1fr)}#dash-sec .dp-qa{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){#dash-sec .dp-kpis,#dash-sec .dp-qa,#dash-sec .dp-boards{grid-template-columns:repeat(2,1fr)}#dash-sec .dp-greet{font-size:23px}#dash-sec .dp-week{gap:5px}}
@media(max-width:380px){#dash-sec .dp-kpis{grid-template-columns:1fr}}

/* ════════════════════════════════════════════════════════════════
   DASHBOARD UPGRADE — collapsible "close bar" menu + centered page
   width, exactly like dashboard-preview. Restyles the EXISTING shell
   (no markup of functional elements removed). 2026-06-07
   ════════════════════════════════════════════════════════════════ */
/* Centered page width (preview .wrap): 1180px, widening to 1560px when the menu is hidden */
#main > .cv{max-width:1180px;margin-left:auto;margin-right:auto;transition:max-width .38s cubic-bezier(.16,1,.3,1)}
#sidebar{transition:width .38s cubic-bezier(.16,1,.3,1),opacity .3s ease,padding .38s ease,border-color .3s ease}
body.dp-rail #sidebar{width:0;min-width:0;padding-left:0;padding-right:0;border-right-color:transparent;opacity:0;overflow:hidden;pointer-events:none}
body.dp-rail #main > .cv{max-width:1560px}

/* Header hide button (collapse the menu) */
#dp-railBtn{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--panel2);border:1px solid var(--border);color:var(--t2);cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1);flex-shrink:0}
#dp-railBtn:hover{border-color:var(--gold);color:var(--gold);background:rgba(212,175,55,.12)}
body.dp-rail #dp-railBtn{background:rgba(212,175,55,.12);border-color:rgba(212,175,55,.45);color:var(--gold)}

/* Sidebar close row (the « toggle at the top of the menu) */
.dp-sb-top{display:flex;align-items:center;justify-content:space-between;padding:0 4px 12px;margin-bottom:10px;border-bottom:1px solid var(--border)}
.dp-sb-top .t{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--t3);text-transform:uppercase}
.dp-sb-x{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);border:1px solid var(--border);background:var(--panel2);transition:all .25s}
.dp-sb-x:hover{color:var(--gold);border-color:var(--gold);background:rgba(212,175,55,.12)}

/* Floating reopen tab — only while the menu is hidden */
#dp-reopen{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:60;display:none;align-items:center;gap:7px;background:linear-gradient(135deg,var(--gold),#f7d94e);color:#0c1109;border:none;border-radius:0 13px 13px 0;padding:13px 12px 13px 9px;cursor:pointer;font-weight:800;font-size:12px;box-shadow:0 8px 24px rgba(0,0,0,.45);animation:dpReopenIn .4s cubic-bezier(.16,1,.3,1)}
#dp-reopen i{font-size:14px}
@keyframes dpReopenIn{from{transform:translateY(-50%) translateX(-100%);opacity:0}to{transform:translateY(-50%) translateX(0);opacity:1}}
body.dp-rail #dp-reopen{display:flex}

/* Preview-style sliding gold active indicator on nav items */
#sidebar .mi{position:relative}
#sidebar .mi.active::before{content:"";position:absolute;left:-13px;top:50%;transform:translateY(-50%);width:4px;height:62%;border-radius:0 4px 4px 0;background:var(--gold);box-shadow:0 0 12px rgba(212,175,55,.4)}

/* Mobile: the close-bar is desktop-only; phones keep the drawer */
@media(max-width:1000px){
  #dp-railBtn,.dp-sb-top{display:none}
  #dp-reopen{display:none!important}
  body.dp-rail #sidebar{width:var(--sbw);opacity:1;pointer-events:auto}
  body.dp-rail #main > .cv{max-width:1180px}
}

/* ── Full mission clock card (preview parity) ── */
#dash-sec .dp-mclock{padding:20px;position:relative;overflow:hidden}
#dash-sec .dp-mc-time{font-family:var(--mono);font-size:38px;font-weight:700;line-height:1;color:var(--gold2,#f7d94e)}
#dash-sec .dp-mc-date{font-size:11.5px;color:var(--t3);margin-top:2px}
#dash-sec .dp-mc-shift{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:12px}
#dash-sec .dp-mc-shift .ms-win{color:var(--t2)}#dash-sec .dp-mc-shift b{font-family:var(--mono)}
#dash-sec .dp-mc-bar{height:7px;border-radius:5px;background:var(--panel2);overflow:hidden;margin-top:8px}
#dash-sec .dp-mc-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--green),var(--gold));width:0;transition:width 1.1s cubic-bezier(.16,1,.3,1)}
#dash-sec .dp-mc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:13px}
#dash-sec .dp-mc-el{font-size:12px;color:var(--t2)}#dash-sec .dp-mc-el b{font-family:var(--mono);color:var(--green);font-size:14px}
#dash-sec .dp-mc-btn{border:none;border-radius:10px;padding:10px 16px;font-weight:800;font-size:12px;cursor:pointer;background:linear-gradient(135deg,var(--green),#6ee87a);color:var(--void);transition:transform .2s}
#dash-sec .dp-mc-btn:active{transform:scale(.96)}

/* ════════════════════════════════════════════════════════════════
   ADVANCED MOTION — preview-grade animations across ALL sections.
   Base state stays VISIBLE (opacity:1) so nothing can ever be hidden
   if the observer misfires; the .dp-seen class just REPLAYS a subtle
   rise-in. Plus global card hover lift. 2026-06-07
   ════════════════════════════════════════════════════════════════ */
@keyframes dpRise{from{opacity:.001;transform:translateY(18px)}to{opacity:1;transform:none}}
#main .dp-seen{animation:dpRise .6s cubic-bezier(.16,1,.3,1) both}
/* gentle hover lift + glow on cards in every section */
#main .glass:hover,#main .stat-card:hover,#main .dp-card:hover,#main .dp-glass:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.42),0 0 22px rgba(212,175,55,.07);
}
#main .glass,#main .stat-card{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),border-color .3s ease}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR — preview parity (profile card, account buttons, flat nav)
   ════════════════════════════════════════════════════════════════ */
#sidebar .profile-card{display:flex;align-items:center;gap:11px;padding:12px;margin-bottom:10px;border-radius:14px;background:var(--panel2);border:1px solid var(--border)}
#sidebar .profile-card .avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#f7d94e);color:var(--void);display:grid;place-items:center;font-weight:800;font-family:var(--mono);flex-shrink:0;font-size:15px;overflow:hidden}
/* Profile photo must FILL the sidebar avatar circle (was overflowing / not filling) */
#sidebar .profile-card .avatar img,#user-avatar img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:50%;display:block}
#sidebar .profile-card .prof-name{font-size:13px;font-weight:700;line-height:1.2}
#sidebar .profile-card .prof-role{font-size:10.5px;color:var(--t3);margin-top:1px}
/* account self-service buttons (preview sb-acct) */
.dp-sb-acct{display:flex;gap:6px;margin:0 2px 14px}
.dp-sb-acct button{flex:1;background:var(--panel2);border:1px solid var(--border);color:var(--t2);border-radius:10px;padding:8px 4px;font-size:9.5px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;transition:all .25s cubic-bezier(.16,1,.3,1)}
.dp-sb-acct button:hover{color:var(--gold);border-color:var(--gold);background:rgba(212,175,55,.12)}
.dp-sb-acct button i{font-size:13px}
/* preview sidebar has no ops-health / mission widget (the hero shows the clock; data still feeds the hero pips while hidden) */
#sidebar .ops-block,#sidebar #mission-widget{display:none!important}
/* flat nav groups like the preview (no collapse chevron) */
#sidebar .nav-group-chevron{display:none}
#sidebar .nav-group-hdr{cursor:default;pointer-events:none}
#sidebar .nav-group-lbl{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--t3)}
#sidebar .nav-group-body{max-height:none!important;overflow:visible!important;opacity:1!important}
@media(max-width:1000px){.dp-sb-acct{margin-bottom:10px}}

/* Sidebar profile: Employee ID + Department line under the role */
#sidebar .prof-iddept{font-size:10px;color:var(--t3);margin-top:3px;font-family:var(--mono);letter-spacing:.3px;line-height:1.45;word-break:break-word}

/* ════════════════════════════════════════════════════════════════
   MY DIGITAL ID (#myhub-sec) — enterprise design (2026-06-07)
   Details header + status rail + Front/Back uploaded-image grid
   (full-res, click-to-zoom) + downloads + permanent (no expiry).
   ════════════════════════════════════════════════════════════════ */
#myhub-sec .mid-rail,#myhub-sec .mid-panel,#myhub-sec .mid-info,#myhub-sec .mid-empty{margin-bottom:16px}
#myhub-sec .mid-rail{display:flex;align-items:flex-start;overflow-x:auto;padding:20px 22px}
#myhub-sec .mid-rstep{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:118px;text-align:center}
#myhub-sec .mid-rdot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;background:var(--panel2);color:var(--t3);border:2px solid var(--border)}
#myhub-sec .mid-rstep.done .mid-rdot{background:var(--green);color:var(--void);border-color:var(--green)}
#myhub-sec .mid-rstep.now .mid-rdot{background:var(--gold);color:var(--void);border-color:var(--gold);box-shadow:0 0 14px rgba(212,175,55,.4)}
#myhub-sec .mid-rt{font-size:11.5px;font-weight:700}#myhub-sec .mid-rx{font-size:10px;color:var(--t3)}
#myhub-sec .mid-rstep:not(.done):not(.now) .mid-rt{color:var(--t3)}
#myhub-sec .mid-rline{flex:1;height:2px;background:var(--border);margin-top:17px;min-width:16px}#myhub-sec .mid-rline.done{background:var(--green)}

#myhub-sec .mid-panel{padding:26px 28px 24px;position:relative;overflow:hidden;animation:scIn .5s cubic-bezier(.16,1,.3,1) both}
#myhub-sec .mid-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
#myhub-sec .mid-av{width:66px;height:66px;border-radius:50%;flex-shrink:0;overflow:hidden;background:linear-gradient(135deg,var(--gold),var(--gold2,#f7d94e));color:var(--void);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:23px;font-family:var(--mono);border:2px solid var(--gglow,rgba(212,175,55,.3));box-shadow:0 0 22px var(--gglow,rgba(212,175,55,.3))}
#myhub-sec .mid-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
#myhub-sec .mid-name{font-family:var(--disp);font-weight:700;font-size:20px;line-height:1.1}
#myhub-sec .mid-sub{font-size:13px;color:var(--t2);margin-top:3px}
#myhub-sec .mid-no{font-family:var(--mono);font-size:12px;color:var(--gold);margin-top:3px;letter-spacing:1px}
#myhub-sec .mid-status{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;padding:8px 14px;border-radius:20px;border:1px solid;}
#myhub-sec .mid-banner{display:flex;align-items:center;gap:11px;padding:13px 16px;border-radius:12px;font-size:12.5px;margin-bottom:16px}
#myhub-sec .mid-banner.warn{background:linear-gradient(100deg,rgba(255,72,72,.12),var(--panel));border:1px solid rgba(255,72,72,.32);color:var(--t2)}
#myhub-sec .mid-banner.warn i{color:var(--red)}
#myhub-sec .mid-avail{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--t2);background:var(--panel2);border:1px solid rgba(76,214,87,.3);border-radius:11px;padding:11px 14px;margin-bottom:14px}
#myhub-sec .mid-avail i{color:var(--green)}
#myhub-sec .mid-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
#myhub-sec .mid-grid.one{grid-template-columns:1fr;max-width:560px}
#myhub-sec .mid-frame{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:rgba(0,0,0,.18);transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s}
#myhub-sec .mid-frame:hover{transform:translateY(-3px);border-color:var(--gglow,rgba(212,175,55,.3));box-shadow:0 14px 30px rgba(0,0,0,.3)}
#myhub-sec .mid-lbl{display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.22);color:var(--t3);font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:9px 12px}
#myhub-sec .mid-lbl i{color:var(--gold)}
#myhub-sec .mid-img{display:block;padding:12px;background:rgba(0,0,0,.28)}
#myhub-sec .mid-real{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.5);cursor:zoom-in;transition:transform .3s cubic-bezier(.16,1,.3,1)}
#myhub-sec .mid-real:hover{transform:scale(1.012)}
#myhub-sec .mid-pdf{display:block;width:100%;height:280px;border:none;border-radius:8px}
#myhub-sec .mid-actions{display:flex;gap:10px;flex-wrap:wrap}
#myhub-sec .mid-prep{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--t2);background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:16px 18px}
#myhub-sec .mid-info{display:flex;gap:11px;align-items:flex-start;padding:15px 18px;font-size:12.5px;color:var(--t2);line-height:1.55}
#myhub-sec .mid-info i{color:var(--gold);margin-top:2px}
#myhub-sec .mid-empty{padding:44px 26px;text-align:center}
#myhub-sec .mid-empty-ic{width:64px;height:64px;border-radius:18px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:28px;background:var(--gdim,rgba(212,175,55,.12));color:var(--gold)}
#myhub-sec .mid-empty-t{font-family:var(--disp);font-size:18px;margin-bottom:8px;font-weight:700}
#myhub-sec .mid-empty-x{font-size:13px;color:var(--t3);line-height:1.6;max-width:46ch;margin:0 auto}
@media(max-width:700px){#myhub-sec .mid-grid{grid-template-columns:1fr}#myhub-sec .mid-status{margin-left:0}#myhub-sec .mid-rstep{min-width:90px}}

/* Zoom lightbox (shared) */
.id-zoom{position:fixed;inset:0;z-index:100000;background:rgba(5,9,5,.93);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:26px;cursor:zoom-out}
.id-zoom.show{display:flex;animation:fadeIn .25s ease}
.id-zoom img{max-width:96vw;max-height:90vh;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.75);cursor:default;animation:mIn .3s cubic-bezier(.16,1,.3,1)}
.id-zoom-x{position:fixed;top:18px;right:20px;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:rgba(12,17,9,.7);color:var(--text);font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:100001}
.id-zoom-x:hover{color:var(--gold);border-color:var(--gglow,rgba(212,175,55,.3))}

/* ── Reload-instant (2026-06-07) ──────────────────────────────────────────
   On a hot reload / back-forward, the <head> sets html.dp-instant. Suppress
   the one-shot ENTRANCE animations so the dashboard appears instantly instead
   of replaying its slide-in. Ambient/continuous motion (dpAurora glow, dpBk
   status blink, dpFloat crown, dpShine, dpSparkle, shimmer) is intentionally
   NOT listed here, so the dashboard still feels alive. The class is removed
   ~1.4s after load so later menu clicks animate section transitions normally. */
html.dp-instant #hdr, html.dp-warm #hdr,
html.dp-instant #sidebar, html.dp-warm #sidebar,
html.dp-instant .profile-card, html.dp-warm .profile-card,
html.dp-instant #mission-widget, html.dp-warm #mission-widget,
html.dp-instant #sidebar .mi, html.dp-warm #sidebar .mi,
html.dp-instant .cv.active, html.dp-warm .cv.active,
html.dp-instant .welcome, html.dp-warm .welcome,
html.dp-instant .stat-card, html.dp-warm .stat-card,
html.dp-instant .sec-head h2, html.dp-warm .sec-head h2,
html.dp-instant #eom-widget, html.dp-warm #eom-widget,
html.dp-instant #announce-bar, html.dp-warm #announce-bar,
html.dp-instant #main .dp-seen,
html.dp-instant #myhub-sec .mid-panel, html.dp-warm #myhub-sec .mid-panel,
/* header icon-wraps must NOT animate/pop in on warm — they reveal after auth */
html.dp-warm .hdr-notif-wrap, html.dp-warm .sys-notif-wrap, html.dp-warm .hdr-icon-btn { animation:none !important; }
/* dp-instant only kills keyframe `animation`; the .dp-rv reveal is a CSS
   *transition* (slide-up). dp-warm is PERSISTENT on warm/returning loads (never
   removed) so reveal elements are shown instantly AND never "drop" back to
   opacity:0 when dp-instant clears at 1.4s — the flash/drop the VP reported. */
html.dp-instant .dp-rv,
html.dp-warm .dp-rv,
html.dp-warm #main .dp-seen { opacity:1 !important; transform:none !important; transition:none !important; animation:none !important; }

/* ════ Premium pass — sidebar + opening menus (2026-06-08) ════
   Sidebar panel + every dropdown/popover that opens from the dashboard get the
   premium facet/glass language. Appended last; CSS-only, no logic/markup touched. */
#sidebar{
  background:linear-gradient(180deg,rgba(212,175,55,.06),transparent 26%),linear-gradient(180deg,rgba(255,255,255,.04),transparent 40%),rgba(6,11,6,.86) !important;
  border-right:1px solid rgba(212,175,55,.16) !important;
  box-shadow:inset -1px 0 0 rgba(212,175,55,.10), 1px 0 36px rgba(0,0,0,.5) !important;
}
/* Header dropdowns (Connections, Messages, Notifications) */
.hdr-notif-dd{
  background:linear-gradient(165deg,var(--base),var(--deep)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 24px 64px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.07) !important;
  border-radius:15px !important;
}
/* Org Alerts panel */
.sys-notif-panel{
  background:linear-gradient(165deg,var(--base),var(--deep)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 22px 60px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.07) !important;
  border-radius:15px !important;
}
/* Floating "Menu" reopen tab (when sidebar hidden) — premium gold pill */
#dp-reopen{
  box-shadow:0 10px 30px -8px rgba(0,0,0,.5), 0 0 22px var(--gglow) !important;
}
/* Nav group header — subtle gold underline accent on hover */
#sidebar .nav-group-hdr{ border-radius:9px; }

/* ════ PREMIUM — Personnel Profile cards (2026-06-09) ════
   Bring the profile info blocks up to the kit standard: premium glass + gold hairline +
   gold-glow section titles + subtle row hover. Pure styling. */
.prof-info-block{
  background:linear-gradient(165deg,rgba(255,255,255,.11),rgba(255,255,255,.035) 46%,var(--panel)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 18px 48px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08) !important;
  position:relative; overflow:hidden;
}
.prof-info-block::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gglow),transparent); pointer-events:none;
}
.pib-title{ text-shadow:0 0 12px var(--gglow); }
.pib-row{ transition:background .2s ease; border-radius:6px; }
.pib-row:hover{ background:rgba(240,200,50,.05); }
.pib-val.mono, .pib-val{ word-break:break-word; }


/* ── Safe centering for the login overlay (2026-06-10) ──────────────────
   justify-content:center clips the TOP/BOTTOM of a flex child taller than
   the viewport even with overflow-y:auto (classic flex-centering overflow).
   The App Store badge at the card bottom was getting cut on shorter screens.
   margin:auto on the edge children restores true scrollable centering. */
#login-overlay{justify-content:flex-start;}
#login-overlay > :first-child{margin-top:auto;}
#login-overlay > :last-child{margin-bottom:auto;}


/* ── Login card must keep its FULL content height (2026-06-10) ──────────
   The card is a flex child of #login-overlay; on short screens the column
   flex was SHRINKING it below its content, and its own overflow:hidden then
   clipped the App Store badge hanging off the bottom. flex:none stops the
   shrink so the whole panel renders; the overlay's overflow-y:auto scrolls. */
#login-overlay > .login-card{flex:0 0 auto;}
.login-card{padding-bottom:42px;}
@media(max-height:760px){ #login-overlay{padding-top:20px;padding-bottom:20px;} .login-card{padding-top:34px;padding-bottom:34px;} }


/* ── 'Authorised Personnel Only' below the App Store badge (2026-06-10) ──
   .lg-status was absolute-bottom of the overlay, colliding with the badge at
   the card bottom. Make it an in-flow flex item ordered LAST so it sits below
   the whole card (badge included) on every screen, and keep it visible on
   mobile (was display:none). */
#login-overlay > .lg-status{
  position:static !important; order:99; transform:none !important;
  margin:16px auto 4px !important; opacity:1 !important; display:flex !important;
  bottom:auto !important; left:auto !important;
}

/* ════════════════════════════════════════════════════════════════
   DASHBOARD — HERITAGE INSTITUTIONAL (2026-06-13, VP-approved)
   CSS-first reskin of the #dash-sec home view: institutional masthead
   with the DTTASA crest, disciplined gold/green palette, calmed effects,
   a hairline KPI band, and consistent geometry. SCOPED to #dash-sec — no
   other section or page is affected. Styling only — every live id/binding
   (#welcome-h2, #dp-kpiHours, #dp-clk, #dp-pipShift, …) is untouched.
   ════════════════════════════════════════════════════════════════ */

/* — Calm the effects: no refraction shine / aurora on the dashboard — */
#dash-sec .dp-dia::after,
#dash-sec .dp-hero-main::after { display:none !important; }

/* — HERO → institutional masthead (crest + name + motto) — */
#dash-sec .dp-hero { grid-template-columns:1.7fr 1fr !important; gap:18px !important; margin-bottom:22px !important; }
#dash-sec .dp-hero-main {
  position:relative; overflow:hidden; padding:32px 36px !important; border-radius:20px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 55%),rgba(255,255,255,.02) !important;
  border:1px solid var(--border) !important;
}
#dash-sec .dp-hero-main::before { content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); }
#dash-sec .dp-eyebrow { font-size:10px !important; letter-spacing:3.5px !important; color:var(--t3) !important; }
#dash-sec .dp-greet   { font-size:38px !important; letter-spacing:.3px !important; margin:9px 0 8px !important; }
#dash-sec .dp-sub     { font-style:italic; color:var(--t2) !important; font-size:14px !important; max-width:62ch !important; }
/* Motto on its own line; the workspace description sits beneath it */
#dash-sec .dp-motto   { display:block; font-family:var(--disp) !important; font-style:normal; color:var(--gold) !important; font-size:13px; letter-spacing:.6px; margin-bottom:6px; }
#dash-sec .dp-pips    { margin-top:16px !important; gap:12px !important; }
/* Chips size to their content with proper interior padding so the full label
   ("Today: Off today" etc.) fits and never crams against the border. */
#dash-sec .dp-pip     { background:rgba(255,255,255,.04) !important; border:1px solid var(--border) !important; border-radius:12px !important; padding:9px 14px !important; white-space:nowrap !important; }
#dash-sec .dp-pip i   { color:var(--gold) !important; width:26px !important; height:26px !important; font-size:12px !important; flex:0 0 auto !important; }
#dash-sec .dp-pip span{ white-space:nowrap !important; }
@media (max-width:760px){ #dash-sec .dp-pip { white-space:normal !important; } #dash-sec .dp-pips { gap:10px !important; } }

/* — Mission clock → refined, mono-gold, calm — */
#dash-sec .dp-mclock { border-radius:20px !important; background:rgba(255,255,255,.02) !important; border:1px solid var(--border) !important; }
#dash-sec .dp-mc-time { color:var(--gold) !important; }
#dash-sec .dp-mc-bar i { background:var(--gold) !important; }

/* — KPIs → one hairline-divided band, monochrome gold, small-caps labels — */
#dash-sec .dp-kpis { display:flex !important; gap:0 !important; border:1px solid var(--border); border-radius:16px; overflow:hidden; background:rgba(255,255,255,.02); margin-bottom:22px !important; }
#dash-sec .dp-kpi { flex:1; min-width:0; background:none !important; border:0 !important; border-right:1px solid var(--border) !important; border-radius:0 !important; box-shadow:none !important; padding:20px 22px !important; }
#dash-sec .dp-kpi:last-child { border-right:0 !important; }
#dash-sec .dp-kpi:hover { transform:none !important; box-shadow:none !important; border-color:var(--border) !important; }
#dash-sec .dp-kpi-lbl { text-transform:uppercase !important; letter-spacing:1px !important; font-size:11px !important; }
#dash-sec .dp-kpi-trend { color:var(--t3) !important; font-weight:600 !important; }

/* — Disciplined palette: all icon chips → monochrome gold (overrides inline pastels) — */
#dash-sec .dp-kpi-ic,
#dash-sec .dp-bic { background:var(--gdim) !important; color:var(--gold) !important; }

/* — Quick-action tiles → calm, consistent — */
#dash-sec .dp-qtile { background:rgba(255,255,255,.02) !important; border:1px solid var(--border) !important; border-radius:14px !important; }
#dash-sec .dp-qtile:hover { background:var(--gdim) !important; transform:translateY(-3px) !important; border-color:var(--gglow) !important; }

/* — Board launchers + grid cards → calm glass, consistent radii — */
#dash-sec .dp-bcard { background:rgba(255,255,255,.02) !important; border-radius:14px !important; }
#dash-sec .dp-card,
#dash-sec .dp-glass.dp-card { border-radius:16px !important; }
#dash-sec .dp-sec-lbl { text-transform:uppercase; letter-spacing:1.5px; font-size:12px; }

/* — Mobile: masthead stacks, crest moves inline, KPI band wraps — */
@media (max-width:760px){
  #dash-sec .dp-hero { grid-template-columns:1fr !important; }
  #dash-sec .dp-hero-main { padding:22px 18px !important; }
  #dash-sec .dp-greet { font-size:26px !important; }
  #dash-sec .dp-kpis { flex-wrap:wrap !important; }
  #dash-sec .dp-kpi { flex:1 1 50% !important; border-bottom:1px solid var(--border) !important; }
  #dash-sec .dp-kpi:nth-child(2n) { border-right:0 !important; }
}

/* ════════════════════════════════════════════════════════════════
   TEAM CHAT — HERITAGE PREMIUM (2026-06-13, VP)
   Frame-level reskin scoped to #chat-sec (container, sidebar, header,
   empty state, inputs, scrollbar). Message bubbles are rendered by the
   shared messaging component (feature-messages.js, also used by the
   floating DM widget) so they're intentionally left to stay consistent.
   Id-boosted specificity overrides the hashed s- base rules. No markup
   or logic change.
   ════════════════════════════════════════════════════════════════ */
/* Container — premium glass + ANIMATED gold scan-line (premium system) */
#chat-sec .s-ib4nkew {
  height:min(640px,72vh) !important; border-radius:18px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 46%),rgba(12,17,9,.5) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 26px 70px -22px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,255,255,.08),0 0 60px -30px var(--gglow) !important;
  position:relative !important;
}
#chat-sec .s-ib4nkew::before { content:"" !important; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
  background:linear-gradient(90deg,transparent,rgba(240,200,50,.7),transparent) !important;
  background-size:200% 100% !important; animation:dpHdrScan 5s cubic-bezier(.16,1,.3,1) infinite !important; }
@keyframes dpHdrScan { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Sidebar — refined, slightly wider */
#chat-sec #dash-chat-sidebar-panel { width:248px !important; background:rgba(255,255,255,.02) !important; }
/* Sidebar header "Chats" — premium typography + gold mark */
#chat-sec .s-xnvfsf6 { font-family:var(--disp) !important; letter-spacing:.5px !important; padding:15px 16px !important; }
#chat-sec .s-xnvfsf6 i { color:var(--gold) !important; }
/* "Connect" pill */
#chat-sec .s-g8yljxx { border-radius:10px !important; }

/* Empty-state emblem — robust centered gold disc. The icon glyph is a Font
   Awesome ::before; inline-grid + place-items centres it reliably (the earlier
   display:flex + line-height combo pushed the glyph off-centre). */
#chat-sec .s-gpjndbf i.s-4gwvdhv,
#chat-sec .s-gpjndbf i.fa-comment-dots {
  width:78px !important; height:78px !important; line-height:1 !important; border-radius:50% !important;
  background:radial-gradient(circle at 50% 36%,rgba(240,200,50,.18),rgba(240,200,50,.03)) !important;
  border:1.5px solid var(--gglow) !important; color:var(--gold) !important; font-size:28px !important;
  display:inline-grid !important; place-items:center !important; text-align:center !important;
  box-shadow:0 0 0 6px rgba(240,200,50,.05),0 0 30px -8px var(--gglow) !important;
  animation:dpEmblemGlow 3.2s cubic-bezier(.16,1,.3,1) infinite !important;
}
@keyframes dpEmblemGlow { 0%,100%{box-shadow:0 0 0 6px rgba(240,200,50,.05),0 0 26px -10px var(--gglow)} 50%{box-shadow:0 0 0 6px rgba(240,200,50,.08),0 0 40px -6px var(--gglow)} }

/* Chat avatars — make the list (s-gbhzvhz) avatar fill its circle exactly like
   the header (s-u6rfsrr) one. Both wrappers hold the photo (img.s-wrdt6kp) AND,
   in the list, a presence dot; as a flex child the photo wasn't filling. Fix:
   the photo absolutely fills the wrapper circle (out of flex flow, so the
   initials-letter still centres for people with no photo, and the absolute
   presence dot still sits on top). Applies to list + header identically. */
#chat-sec .s-gbhzvhz, #chat-sec .s-u6rfsrr { position:relative !important; }
#chat-sec .s-gbhzvhz > img, #chat-sec .s-u6rfsrr > img {
  position:absolute !important; top:0 !important; left:0 !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center !important; border-radius:50% !important; z-index:1 !important;
}
/* presence dot stays above the photo */
#chat-sec .s-gbhzvhz > .presence-dot { z-index:2 !important; }
/* belt-and-suspenders for any other chat avatar img */
#chat-sec #dash-chat-sidebar-panel img, #chat-sec #dash-chat-main img { object-fit:cover !important; object-position:center !important; }

/* Inputs inside chat — refined focus (message composer) */
#chat-sec input, #chat-sec textarea {
  background:rgba(255,255,255,.04) !important; border:1px solid var(--border) !important; border-radius:12px !important;
}
#chat-sec input:focus, #chat-sec textarea:focus {
  border-color:var(--gglow) !important; box-shadow:0 0 0 3px rgba(240,200,50,.10) !important; outline:none !important;
}
/* Gold scrollbar to match the portal */
#chat-sec .s-qdnlurp::-webkit-scrollbar, #chat-sec .s-goeqxeq ::-webkit-scrollbar { width:5px; }
#chat-sec .s-qdnlurp::-webkit-scrollbar-thumb, #chat-sec .s-goeqxeq ::-webkit-scrollbar-thumb { background:rgba(240,200,50,.22); border-radius:10px; }

/* Section heading — Heritage */
#chat-sec .sec-head h2 { font-family:var(--disp) !important; }

@media (max-width:760px){
  #chat-sec .s-ib4nkew { height:min(600px,78vh) !important; }
  #chat-sec #dash-chat-sidebar-panel { width:150px !important; }
}

/* ════════════════════════════════════════════════════════════════
   DASHBOARD HERO — PREMIUM ACCENTS (2026-06-13, VP)
   Applies the DTTASA premium animation system (gold scan-line, ambient
   glow, refined motto) to the hero masthead. CSS-only, #dash-sec scoped.
   ════════════════════════════════════════════════════════════════ */
#dash-sec .dp-hero-main { box-shadow:0 22px 60px -24px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07),0 0 70px -34px var(--gglow) !important; }
/* Animated gold scan-line along the top edge (premium signature) */
#dash-sec .dp-hero-main::before {
  background:linear-gradient(90deg,transparent,rgba(240,200,50,.75),transparent) !important;
  background-size:200% 100% !important; animation:dpHdrScan 6s cubic-bezier(.16,1,.3,1) infinite !important;
}
/* Ambient gold corner glow behind the hero text */
#dash-sec .dp-hero-main::after {
  content:"" !important; position:absolute !important; right:-40px !important; top:-50px !important;
  width:240px !important; height:240px !important; border-radius:50% !important; pointer-events:none !important;
  background:radial-gradient(circle, var(--gglow), transparent 68%) !important; opacity:.5 !important;
  animation:dpHeroAura 14s ease-in-out infinite alternate !important;
}
@keyframes dpHeroAura { from{transform:translate(0,0) scale(1)} to{transform:translate(-22px,16px) scale(1.12)} }
/* Motto — its own gold line, premium weight */
#dash-sec .dp-motto { display:block !important; font-family:var(--disp) !important; font-style:normal !important;
  color:var(--gold) !important; font-size:13.5px !important; letter-spacing:.7px !important; margin-bottom:7px !important;
  text-shadow:0 0 18px rgba(240,200,50,.18) !important; }

/* ════════════════════════════════════════════════════════════════════
   TEAM CHAT — ENTERPRISE MESSENGER ELEVATION (VP 2026-06-14)
   CSS-ONLY, scoped #chat-sec. No markup/JS change — same send/delete/
   read-tick/connect/presence workflow. Builds on the existing premium
   base (scan-line, bubbles): adds message-area depth, gold-ringed
   avatars, refined sidebar rows, and a proper composer input bar.
   ════════════════════════════════════════════════════════════════════ */
/* Messages area — subtle "wallpaper" depth (dot grid + soft gold top glow) */
#chat-sec #dash-chat-msgs{
  background:
    radial-gradient(120% 60% at 50% 0,rgba(240,200,50,.05),transparent 60%),
    radial-gradient(rgba(255,255,255,.022) 1px,transparent 1px) !important;
  background-size:auto, 22px 22px !important;
}
/* Open-conversation header — gold avatar ring + display-font name + presence glow */
#chat-sec .s-r3dknsb{ background:linear-gradient(180deg,rgba(240,200,50,.05),transparent) !important;
  border-bottom:1px solid var(--gglow) !important; }
#chat-sec .s-u6rfsrr{ border:1.5px solid var(--gglow) !important; box-shadow:0 0 14px -4px var(--gglow) !important; }
#chat-sec .s-f6wt67y{ font-family:var(--disp) !important; letter-spacing:.3px !important; }
#chat-sec .s-r3dknsb .presence-dot{ box-shadow:0 0 7px currentColor !important; }
#chat-sec .s-ddyd1xk{ border-radius:9px !important; transition:background .2s,color .2s !important; }
#chat-sec .s-ddyd1xk:hover{ background:var(--gdim) !important; color:var(--gold) !important; }

/* Sidebar conversation rows — active gold left-bar + hover, gold avatar ring */
#chat-sec #dash-chat-sb > *{ position:relative !important; border-left:3px solid transparent !important;
  border-radius:10px !important; transition:background .18s,border-color .18s !important; }
#chat-sec #dash-chat-sb > *:hover{ background:rgba(240,200,50,.05) !important; }
#chat-sec #dash-chat-sb > *.active,
#chat-sec #dash-chat-sb > *[style*="background"]{ background:linear-gradient(90deg,rgba(240,200,50,.10),transparent 70%) !important;
  border-left-color:var(--gold) !important; }
#chat-sec #dash-chat-sb .s-gbhzvhz{ border:1.5px solid var(--gglow) !important; }

/* Composer — proper contained input bar with glow-lift send */
#chat-sec .s-kgv6d9j{ background:rgba(0,0,0,.22) !important; border-top:1px solid var(--gglow) !important;
  padding:12px 14px !important; gap:10px !important; align-items:flex-end !important; }
#chat-sec .s-ey1mrv2{ background:rgba(255,255,255,.05) !important; border:1px solid var(--border) !important;
  border-radius:22px !important; padding:11px 16px !important; max-height:120px !important; }
#chat-sec .s-ey1mrv2:focus{ border-color:var(--gglow) !important; box-shadow:0 0 0 3px rgba(240,200,50,.10) !important; }
#chat-sec .s-6geivoj{ width:44px !important; height:44px !important; border-radius:50% !important;
  background:linear-gradient(135deg,var(--gold),var(--gold2)) !important; color:#1a1305 !important;
  box-shadow:0 6px 18px -8px var(--gglow) !important; transition:transform .2s,box-shadow .2s !important; flex-shrink:0 !important; }
#chat-sec .s-6geivoj:hover{ transform:translateY(-2px) scale(1.04) !important; box-shadow:0 10px 24px -8px var(--gold) !important; }

/* Received bubble a touch brighter; both bubbles get a soft lift */
#chat-sec .chat-msg-row .s-7zykomw > div:not(.s-rnvf7zu):not(.chat-msg-meta){
  box-shadow:0 2px 10px -6px rgba(0,0,0,.5) !important; }
/* Sender label — gold mono kicker */
#chat-sec .s-rnvf7zu{ font-family:var(--mono) !important; font-size:10.5px !important; letter-spacing:.5px !important; color:var(--gold) !important; }

/* ── Google sign-in (VP 2026-08-02) ─────────────────────────────────
   Google's brand guidelines require their mark on a white or a neutral dark
   surface, never recoloured, and the wordmark must read "Continue with
   Google". The rest is matched to the portal's own login card rather than to
   Google's default chrome, so it sits as a second option beneath the primary
   action instead of competing with it. */
.gsi-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 12px;
  color: rgba(242,247,238,.42); font-size: 11px;
  letter-spacing: 1.4px; text-transform: uppercase;
}
.gsi-divider::before, .gsi-divider::after {
  content: ""; flex: 1; height: 1px;
  background: rgba(242,247,238,.16);
}
.gsi-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px;                    /* a real touch target */
  background: #fff; color: #1f1f1f;
  border: 1px solid rgba(0,0,0,.12); border-radius: 8px;
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: box-shadow .15s ease, background .15s ease;
}
.gsi-btn:hover { background: #f6f6f6; box-shadow: 0 1px 6px rgba(0,0,0,.22); }
.gsi-btn:focus-visible { outline: 2px solid #f0c832; outline-offset: 2px; }
.gsi-btn:disabled, .gsi-btn.is-busy { opacity: .62; cursor: default; box-shadow: none; }
.gsi-btn svg { flex: 0 0 17px; }

/* Busy state: a real spinner in place of the Google mark, so "working" is
   visible rather than inferred from a dimmed button. The mark is hidden rather
   than removed so the button does not change width mid-flow. */
.gsi-btn.is-busy svg { display: none; }
.gsi-btn.is-busy::before {
  content: ""; width: 15px; height: 15px; flex: 0 0 15px;
  border: 2px solid rgba(0,0,0,.22); border-top-color: #04501e;
  border-radius: 50%; animation: gsiSpin .7s linear infinite;
}
@keyframes gsiSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gsi-btn.is-busy::before { animation-duration: 2.4s; }
}