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