/* Electric Ocean v3 — Forest Department Recruitment System */
/* ============================================================
   ELECTRIC OCEAN v3 — Forest Department Recruitment System
   Collapsible sidebar + animations + infographics
   ============================================================ */

/* -------- TOKENS: LIGHT -------- */
:root {
  --primary-900:#0C4A6E; --primary-800:#0E5A84; --primary-700:#0369A1;
  --primary-600:#0284C7; --primary-500:#0EA5E9; --primary-400:#38BDF8;
  --primary-300:#7DD3FC; --primary-200:#BAE6FD; --primary-100:#E0F2FE; --primary-50:#F0F9FF;
  --accent-700:#0E7490; --accent-600:#0891B2; --accent-500:#06B6D4;
  --accent-400:#22D3EE; --accent-300:#67E8F9; --accent-100:#CFFAFE;
  --success-700:#047857; --success-500:#10B981; --success-400:#34D399; --success-100:#D1FAE5;
  --warning-700:#B45309; --warning-500:#F59E0B; --warning-400:#FBBF24; --warning-100:#FEF3C7;
  --danger-700:#B91C1C; --danger-500:#EF4444; --danger-400:#F87171; --danger-100:#FEE2E2;
  --purple-500:#8B5CF6; --purple-400:#A78BFA; --purple-100:#EDE9FE;
  --pink-500:#EC4899; --pink-400:#F472B6; --pink-100:#FCE7F3;
  --neutral-900:#0F172A; --neutral-800:#1E293B; --neutral-700:#334155;
  --neutral-600:#475569; --neutral-500:#64748B; --neutral-400:#94A3B8;
  --neutral-300:#CBD5E1; --neutral-200:#E2E8F0; --neutral-100:#F1F5F9; --neutral-50:#F8FAFC;

  --bg-app:#F0F9FF;
  --bg-surface:#FFFFFF;
  --bg-surface-2:#F8FAFC;
  --surface-alt:#E2E8F0;
  --border:#E0F2FE;
  --border-strong:#BAE6FD;
  --text-primary:#0C4A6E;
  --text-secondary:#475569;
  --text-tertiary:#64748B;
  --text-muted:#94A3B8;

  --sidebar-bg-grad: linear-gradient(180deg, #0C4A6E 0%, #082F49 50%, #020617 100%);
  --sidebar-text:#BAE6FD;
  --sidebar-text-dim:#7DD3FC;
  --sidebar-border: rgba(255,255,255,0.08);
  --sidebar-hover: rgba(34,211,238,0.1);

  --grad-primary: linear-gradient(135deg,#0EA5E9 0%,#06B6D4 100%);
  --grad-success: linear-gradient(135deg,#10B981 0%,#059669 100%);
  --grad-warning: linear-gradient(135deg,#F59E0B 0%,#D97706 100%);
  --grad-danger:  linear-gradient(135deg,#EF4444 0%,#DC2626 100%);
  --grad-purple:  linear-gradient(135deg,#A78BFA 0%,#8B5CF6 100%);
  --grad-pink:    linear-gradient(135deg,#F472B6 0%,#EC4899 100%);
  --grad-hero:    linear-gradient(135deg,#0C4A6E 0%,#0369A1 40%,#06B6D4 100%);

  --shadow-xs:0 1px 2px rgba(12,74,110,0.05);
  --shadow-sm:0 1px 3px rgba(12,74,110,0.08), 0 1px 2px rgba(12,74,110,0.04);
  --shadow-md:0 4px 8px -2px rgba(12,74,110,0.1), 0 2px 4px -2px rgba(12,74,110,0.05);
  --shadow-lg:0 12px 20px -4px rgba(12,74,110,0.12), 0 4px 8px -4px rgba(12,74,110,0.08);
  --shadow-glow: 0 0 0 4px rgba(14,165,233,0.12);

  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:999px;
  --ease: cubic-bezier(.4,0,.2,1);
  --bounce: cubic-bezier(.34,1.56,.64,1);
  --fast:150ms; --med:300ms; --slow:500ms;

  --sidebar-w: 260px;
  --sidebar-w-collapsed: 72px;
}

/* -------- TOKENS: DARK -------- */
:root.dark {
  --bg-app:#020617;
  --bg-surface:#0B1628;
  --bg-surface-2:#0F1F35;
  --surface-alt:#1E293B;
  --border:#1E293B;
  --border-strong:#164A6E;
  --text-primary:#E0F7FA;
  --text-secondary:#CBD5E1;
  --text-tertiary:#94A3B8;
  --text-muted:#64748B;
  --sidebar-bg-grad: linear-gradient(180deg, #0B1628 0%, #020617 100%);
  --sidebar-text-dim:#64748B;
  --primary-100: rgba(14,165,233,.15);
  --accent-100:  rgba(6,182,212,.15);
  --success-100: rgba(16,185,129,.15);
  --warning-100: rgba(245,158,11,.15);
  --danger-100:  rgba(239,68,68,.15);
  --grad-hero: linear-gradient(135deg,#020617 0%,#0C4A6E 50%,#0891B2 100%);
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md:0 4px 8px -2px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.2);
  --shadow-lg:0 12px 20px -4px rgba(0,0,0,.5);
  --shadow-glow: 0 0 0 4px rgba(34,211,238,.18);
}

/* -------- BASE -------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* Tell the browser which mode to use for native widgets (select popups,
   scrollbars, form controls, date pickers). Without this, Chrome/Edge
   render a light-mode <select> options list inside our dark theme,
   resulting in white text on white background on the audit log filters
   and everywhere else a native dropdown is used. */
:root { color-scheme: light; }
:root.dark { color-scheme: dark; }

/* Force-legible <option> rows in native <select> popups. Browsers ignore
   most styles on <option>, but background/color DO apply reliably and
   survive the dark-mode native popup render. */
select option { background: #ffffff; color: #0F172A; }
select option:checked { background: #0EA5E9; color: #ffffff; }
:root.dark select option { background: #0F172A; color: #E2E8F0; }
:root.dark select option:checked { background: #0EA5E9; color: #ffffff; }
/* Multiple-select list view (not a popup — always rendered inline) */
select[multiple] {
  color: var(--text-primary);
  background: var(--bg-surface);
}
body{
  font-family:'Inter',-apple-system,sans-serif;
  font-size:14px; line-height:1.55;
  color:var(--text-primary); background:var(--bg-app);
  -webkit-font-smoothing:antialiased;
  transition: background var(--med) var(--ease), color var(--med) var(--ease);
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* -------- ANIMATIONS -------- */
@keyframes pulse-soft { 0%,100%{opacity:.7} 50%{opacity:1} }
@keyframes pulse-ring {
  0%{box-shadow:0 0 0 0 rgba(52,211,153,.4)}
  70%{box-shadow:0 0 0 6px rgba(52,211,153,0)}
  100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}
}
@keyframes fade-up { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes fade-in { from{opacity:0} to{opacity:1} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes spin-slow { to { transform:rotate(360deg) } }
@keyframes grow-bar { from { width: 0 !important; } }
@keyframes draw-line { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes blob-move {
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(30px,-20px) scale(1.1)}
  66%{transform:translate(-20px,20px) scale(.95)}
}
.animate-fade-up  { animation: fade-up var(--slow) var(--ease) both; }
.animate-float    { animation: float 4s ease-in-out infinite; }
.stagger > * { animation: fade-up var(--slow) var(--ease) both; }
.stagger > *:nth-child(1){animation-delay:.05s}
.stagger > *:nth-child(2){animation-delay:.1s}
.stagger > *:nth-child(3){animation-delay:.15s}
.stagger > *:nth-child(4){animation-delay:.2s}
.stagger > *:nth-child(5){animation-delay:.25s}
.stagger > *:nth-child(6){animation-delay:.3s}

/* -------- LAYOUT -------- */
.app-shell { display:flex; min-height:100vh; position:relative; }

/* ============================================================
   SIDEBAR v3 — COLLAPSIBLE
   ============================================================ */
.sidebar{
  width: var(--sidebar-w);
  background: var(--sidebar-bg-grad);
  color:var(--sidebar-text);
  padding:18px 12px 16px;
  display:flex; flex-direction:column;
  flex-shrink:0;
  border-right:1px solid var(--sidebar-border);
  position:relative;
  overflow:hidden;
  transition: width var(--med) var(--ease);
  z-index: 20;
}

/* === COLLAPSED STATE === */
.sidebar.collapsed{
  width: var(--sidebar-w-collapsed);
  padding: 18px 10px 16px;
}

/* elements that hide when collapsed */
.sidebar.collapsed .brand-text-wrap,
.sidebar.collapsed .brand-version,
.sidebar.collapsed .sidebar-search,
.sidebar.collapsed .nav-section,
.sidebar.collapsed .nav-item > span:not(.nav-indicator):not(.nav-badge),
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .nav-indicator,
.sidebar.collapsed .sidebar-widget,
.sidebar.collapsed .upgrade-card,
.sidebar.collapsed .user-info,
.sidebar.collapsed .user-action{
  opacity: 0;
  pointer-events: none;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  /* Root fix: these wrappers have flex:1 in expanded state (to fill the
     row next to the icon). Without this override, flex-grow keeps them
     consuming all free space in the collapsed row, which shoves the
     visible icon to the left edge — `justify-content: center` on the
     parent has no free space left to centre. */
  flex: 0 0 0 !important;
  overflow: hidden;
  transition: opacity var(--fast) var(--ease);
}

.sidebar.collapsed .brand{
  justify-content: center;
  padding: 6px 0 16px;
  gap: 0;                /* collapse the flex gap so the logo centres exactly */
}
.sidebar.collapsed .nav-item{
  justify-content: center;
  padding: 12px 0;
  gap: 0;
  position: relative;
}
.sidebar.collapsed .nav-item.active{
  padding: 12px 0;
  /* Drop the inset-left accent bar when collapsed — it would shove the icon
     3px right and break visual centring with the other nav items. Keep the
     gradient background + glow for the active highlight. */
  box-shadow: 0 4px 12px rgba(34,211,238,.15);
}
.sidebar.collapsed .nav-item.active::before { display: none; }

/* tooltip on collapsed hover */
.sidebar.collapsed .nav-item[data-label]::after{
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
  background: var(--neutral-900);
  color: #fff;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transition: all var(--fast) var(--ease);
  box-shadow: var(--shadow-md);
}
.sidebar.collapsed .nav-item[data-label]::before{
  content: "";
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: var(--neutral-900);
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transition: all var(--fast) var(--ease);
}
.sidebar.collapsed .nav-item:hover::after,
.sidebar.collapsed .nav-item:hover::before{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.sidebar.collapsed .sidebar-user{
  justify-content: center;
  padding-top: 12px;
  gap: 0;                /* collapse gap so the avatar centres exactly */
}

/* decorative glows */
.sidebar > .sidebar-glow-top,
.sidebar > .sidebar-glow-bottom{
  position:absolute; border-radius:50%; pointer-events:none;
}
.sidebar-glow-top{
  top:-100px; right:-100px;
  width:260px; height:260px;
  background: radial-gradient(circle, rgba(34,211,238,.18) 0%, transparent 70%);
  animation: blob-move 12s ease-in-out infinite;
}
.sidebar-glow-bottom{
  bottom:-120px; left:-80px;
  width:280px; height:280px;
  background: radial-gradient(circle, rgba(14,165,233,.14) 0%, transparent 70%);
  animation: blob-move 15s ease-in-out infinite reverse;
}

/* TOGGLE BUTTON — sits on the sidebar edge */
.sidebar-toggle{
  position: absolute;
  top: 62px;
  right: -14px;
  width: 28px;
  height: 28px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-600);
  z-index: 25;
  transition: all var(--fast) var(--ease);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.sidebar-toggle:hover{
  background: var(--primary-500);
  color: #fff;
  border-color: var(--primary-500);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(14,165,233,.4);
}
.sidebar-toggle svg{
  width: 14px; height: 14px;
  transition: transform var(--med) var(--ease);
}
.sidebar.collapsed .sidebar-toggle svg{
  transform: rotate(180deg);
}

/* BRAND */
.brand{
  display:flex; align-items:center; gap:10px;
  padding:6px 8px 16px;
  border-bottom:1px solid var(--sidebar-border);
  margin-bottom:14px;
  position:relative; z-index:1;
  transition: all var(--med) var(--ease);
  min-width: 0;
  overflow: hidden;
}
.brand-logo{
  width:42px; height:42px;
  background:var(--grad-primary);
  border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 14px rgba(6,182,212,.4);
  position:relative;
  animation: float 4s ease-in-out infinite;
  flex-shrink: 0;
}
.brand-logo::before{
  content:""; position:absolute; inset:-4px;
  border-radius:var(--r-lg);
  background: var(--grad-primary);
  opacity:.3; filter:blur(8px); z-index:-1;
}
.brand-text-wrap{
  flex: 1; min-width: 0;
  transition: opacity var(--fast) var(--ease);
}
.brand-name{
  font-family:'Space Grotesk',sans-serif;
  color:#fff; font-size:15px; font-weight:700;
  letter-spacing:-.01em; line-height:1.15;
  max-width: 100%;
  /* Allow a long name (14–16 chars) to wrap onto a second line instead of
     truncating with "…". Matches the tagline's behaviour right below it,
     so the whole brand block reads as a cohesive two-line label. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.brand-sub{
  color:var(--sidebar-text-dim);
  font-size:11px; line-height:1.25;
  margin-top:2px;
  max-width: 100%;
  /* Wrap onto up to 2 lines when the tagline is long, then clamp. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.brand-version{
  flex-shrink: 0;         /* never squeeze the version pill */
  font-size:9px; padding:2px 6px;
  background: rgba(34,211,238,.15);
  color:var(--accent-400);
  border-radius:var(--r-full);
  font-weight:600; letter-spacing:.05em;
  border:1px solid rgba(34,211,238,.25);
  flex-shrink: 0;
}

/* SEARCH */
.sidebar-search{
  position:relative; z-index:1;
  margin-bottom:14px;
  transition: opacity var(--fast) var(--ease);
}
.sidebar-search input{
  width:100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  padding: 8px 10px 8px 32px;
  font-size: 12px;
  color: #fff;
  font-family: inherit;
  transition: all var(--fast) var(--ease);
}
.sidebar-search input::placeholder{ color: var(--sidebar-text-dim); }
.sidebar-search input:focus{
  outline:none;
  background: rgba(255,255,255,0.08);
  border-color: var(--accent-400);
  box-shadow: 0 0 0 3px rgba(34,211,238,0.15);
}
.sidebar-search svg{
  position:absolute; left:10px; top:50%;
  transform:translateY(-50%);
  width:14px; height:14px;
  color: var(--sidebar-text-dim);
  pointer-events:none;
}
.sidebar-search kbd{
  position:absolute; right:8px; top:50%;
  transform:translateY(-50%);
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  padding:2px 5px;
  background: rgba(255,255,255,0.08);
  border-radius:3px;
  color: var(--sidebar-text-dim);
  border:1px solid rgba(255,255,255,0.1);
}

/* NAV */
.nav-section{
  font-size:10px; color:var(--sidebar-text-dim);
  letter-spacing:.1em; text-transform:uppercase;
  padding:12px 10px 6px; font-weight:600;
  position:relative; z-index:1;
  display:flex; align-items:center; gap:6px;
  transition: opacity var(--fast) var(--ease);
}
.nav-section::after{
  content:""; flex:1; height:1px;
  background: linear-gradient(90deg, var(--sidebar-border), transparent);
}

.nav-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 11px;
  border-radius:var(--r-sm);
  color:var(--sidebar-text);
  font-size:13px; font-weight:500;
  cursor:pointer;
  margin-bottom:2px;
  transition: all var(--fast) var(--ease);
  position:relative; z-index:1;
  white-space: nowrap;
}
.nav-item > span:first-of-type{
  flex: 1; overflow: hidden; text-overflow: ellipsis;
  transition: opacity var(--fast) var(--ease);
}
.nav-item svg{ width:17px; height:17px; flex-shrink:0; opacity:.8; transition: all var(--fast) var(--ease); }
.nav-item:hover{ background: var(--sidebar-hover); color:#fff; transform: translateX(2px); }
.sidebar.collapsed .nav-item:hover{ transform: none; }
.nav-item:hover svg{ opacity:1; color:var(--accent-400); transform: scale(1.08); }
.nav-item.active{
  background: linear-gradient(90deg, rgba(34,211,238,.18) 0%, rgba(34,211,238,.05) 100%);
  color:#fff;
  box-shadow: inset 3px 0 0 var(--accent-400), 0 4px 12px rgba(34,211,238,.15);
  padding-left:14px;
}
.nav-item.active svg{ opacity:1; color:var(--accent-400); }
.nav-item.active::before{
  content:""; position:absolute;
  right:0; top:0; bottom:0; width:40px;
  background: radial-gradient(circle at right, rgba(34,211,238,.2), transparent 70%);
  pointer-events:none;
}
.nav-badge{
  background: var(--grad-primary);
  color:#fff; font-size:10px; font-weight:700;
  padding:2px 7px; border-radius:var(--r-full);
  min-width:20px; text-align:center;
  box-shadow: 0 2px 6px rgba(14,165,233,.4);
  flex-shrink: 0;
}
.nav-badge-danger{ background: var(--grad-danger); box-shadow: 0 2px 6px rgba(239,68,68,.4); }
.nav-badge-warn{ background: var(--grad-warning); box-shadow: 0 2px 6px rgba(245,158,11,.4); }
.nav-indicator{
  width:6px; height:6px; border-radius:50%;
  background: var(--success-400);
  box-shadow: 0 0 0 3px rgba(52,211,153,.2);
  animation: pulse-ring 2s infinite;
  flex-shrink: 0;
}

/* STATS WIDGET */
.sidebar-widget{
  margin:16px 4px 12px;
  padding:14px;
  background: linear-gradient(135deg, rgba(34,211,238,.08) 0%, rgba(14,165,233,.04) 100%);
  border: 1px solid rgba(34,211,238,.15);
  border-radius: var(--r-lg);
  position:relative; z-index:1;
  overflow:hidden;
  transition: opacity var(--fast) var(--ease);
}
.sidebar-widget::before{
  content:""; position:absolute;
  top:-20px; right:-20px;
  width:80px; height:80px; border-radius:50%;
  background: radial-gradient(circle, rgba(34,211,238,.2), transparent);
}
.widget-label{
  font-size:10px; color: var(--sidebar-text-dim);
  text-transform:uppercase; letter-spacing:.08em;
  font-weight:600; margin-bottom:6px;
  display:flex; align-items:center; gap:5px;
}
.widget-value-row{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; }
.widget-value{
  font-family:'Space Grotesk',sans-serif;
  font-size:22px; font-weight:700; color:#fff;
  letter-spacing:-.02em;
}
.widget-trend{
  font-size:10px; font-weight:600;
  color: var(--success-400);
  display:flex; align-items:center; gap:3px;
}
.widget-bar-wrap{
  height:4px;
  background: rgba(255,255,255,.08);
  border-radius:var(--r-full);
  overflow:hidden;
  margin-bottom:8px;
}
.widget-bar-fill{
  height:100%;
  background: linear-gradient(90deg, var(--accent-400), var(--primary-500));
  border-radius:var(--r-full);
  width:68%;
  animation: grow-bar 1.5s var(--ease);
  box-shadow: 0 0 8px rgba(34,211,238,.5);
}
.widget-foot{
  font-size:10px; color: var(--sidebar-text-dim);
  display:flex; justify-content:space-between;
}

/* UPGRADE CARD */
.upgrade-card{
  margin:8px 4px 12px;
  padding:12px;
  background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
  border-radius: var(--r-lg);
  position:relative; z-index:1;
  overflow:hidden; color:#fff; cursor:pointer;
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.upgrade-card:hover{ transform: translateY(-2px) scale(1.02); }
.upgrade-card::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 80% -20%, rgba(255,255,255,.3), transparent 60%);
}
.upgrade-icon{
  width:28px; height:28px;
  background: rgba(255,255,255,.2);
  border-radius: var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:8px; backdrop-filter: blur(10px);
}
.upgrade-title{ font-size:12px; font-weight:700; margin-bottom:2px; }
.upgrade-sub{ font-size:10px; opacity:.9; line-height:1.35; }

/* SIDEBAR USER */
.sidebar-user{
  margin-top:auto; padding-top:12px;
  border-top:1px solid var(--sidebar-border);
  display:flex; align-items:center; gap:10px;
  position:relative; z-index:1;
  transition: all var(--med) var(--ease);
}
.user-avatar{
  width:38px; height:38px; border-radius:50%;
  background: var(--grad-primary);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
  box-shadow: 0 2px 10px rgba(6,182,212,.35);
  position:relative;
  font-family:'Space Grotesk',sans-serif;
  flex-shrink: 0;
}
.user-avatar::after{
  content:""; position:absolute;
  bottom:-1px; right:-1px;
  width:11px; height:11px;
  background: var(--success-400);
  border: 2px solid #082F49;
  border-radius:50%;
  animation: pulse-ring 2s infinite;
}
:root.dark .user-avatar::after{ border-color: #020617; }
.user-info{ flex:1; min-width:0; transition: opacity var(--fast) var(--ease); }
.user-name{ color:#fff; font-size:13px; font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-status{ color: var(--sidebar-text-dim); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-action{
  padding:7px; border-radius:var(--r-sm);
  color: var(--sidebar-text-dim);
  transition: all var(--fast) var(--ease);
}
.user-action:hover{ background: var(--sidebar-hover); color:#fff; transform: rotate(-12deg); }

/* ============================================================
   MAIN
   ============================================================ */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(12px);
}
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:13px; color: var(--text-tertiary); }
.breadcrumb a{ color: var(--text-tertiary); transition: color var(--fast) var(--ease); }
.breadcrumb a:hover{ color: var(--primary-600); }
.breadcrumb span:last-child{ color: var(--text-primary); font-weight:500; }

.topbar-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn, .theme-toggle{
  width:38px; height:38px; border-radius: var(--r-md);
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--text-secondary);
  background: var(--bg-surface-2);
  transition: all var(--fast) var(--ease);
  position:relative;
}
.icon-btn:hover, .theme-toggle:hover{
  background: var(--primary-100);
  color: var(--primary-700);
  transform: translateY(-1px);
}
:root.dark .icon-btn:hover, :root.dark .theme-toggle:hover{ color: var(--accent-400); }
.badge-dot{
  position:absolute; top:8px; right:8px;
  width:8px; height:8px; border-radius:50%;
  background: var(--danger-500);
  box-shadow: 0 0 0 2px var(--bg-surface);
  animation: pulse-ring 2s infinite;
}
.theme-toggle .icon-moon{ display:none; }
:root.dark .theme-toggle .icon-sun{ display:none; }
:root.dark .theme-toggle .icon-moon{ display:block; }

.role-pill{
  font-size:11px; padding:6px 12px;
  background: var(--grad-primary);
  color:#fff; border-radius: var(--r-full);
  font-weight:600;
  box-shadow: 0 2px 10px rgba(14,165,233,.3);
  display:flex; align-items:center; gap:6px;
}
.role-pill svg{ width:12px; height:12px; }
.user-avatar-sm{
  width:38px; height:38px; border-radius:50%;
  background: var(--grad-primary);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
  font-family:'Space Grotesk',sans-serif;
  cursor:pointer;
  transition: all var(--fast) var(--ease);
}
.user-avatar-sm:hover{ transform: scale(1.05); box-shadow: var(--shadow-glow); }

/* MOBILE TOGGLE (shown only on small screens) */
.mobile-toggle{
  display: none;
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  align-items: center; justify-content: center;
  color: var(--text-secondary);
  background: var(--bg-surface-2);
}

.content{ padding:24px; flex:1; display:flex; flex-direction:column; gap:20px; }

/* HERO */
.hero-banner{
  background: var(--grad-hero);
  background-size: 200% 200%;
  animation: gradient-shift 20s ease infinite;
  border-radius: var(--r-xl);
  padding: 28px 32px;
  color:#fff;
  position:relative; overflow:hidden;
  display:flex; justify-content:space-between; align-items:center;
  gap:24px;
  box-shadow: var(--shadow-lg);
}
.hero-blob{ position:absolute; border-radius:50%; filter: blur(40px); pointer-events:none; }
.hero-blob-1{ width:320px; height:320px; background: radial-gradient(circle, rgba(34,211,238,.5) 0%, transparent 70%); top:-100px; right:-50px; animation: blob-move 10s ease-in-out infinite; }
.hero-blob-2{ width:220px; height:220px; background: radial-gradient(circle, rgba(139,92,246,.3) 0%, transparent 70%); bottom:-80px; left:30%; animation: blob-move 14s ease-in-out infinite reverse; }
.hero-blob-3{ width:180px; height:180px; background: radial-gradient(circle, rgba(236,72,153,.25) 0%, transparent 70%); top:20%; left:20%; animation: blob-move 16s ease-in-out infinite; }
.hero-grid-overlay{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
  pointer-events:none;
}
.hero-content{ position:relative; z-index:1; flex:1; min-width:0; }
.hero-meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; font-size:12px; color: rgba(255,255,255,.85); }
.hero-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 11px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-full);
  backdrop-filter: blur(10px);
  font-weight:500;
}
.hero-chip svg{ width:12px; height:12px; }
.hero-chip-live{ background: rgba(16,185,129,.2); border-color: rgba(52,211,153,.35); color:#6EE7B7; }
.live-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#34D399; animation: pulse-soft 1.5s infinite; box-shadow: 0 0 8px #34D399; }
.hero-title{ font-family:'Space Grotesk',sans-serif; font-size:32px; font-weight:700; margin:0 0 6px; letter-spacing:-.02em; line-height:1.15; }
.gradient-text{
  background: linear-gradient(135deg, #22D3EE 0%, #A78BFA 50%, #F472B6 100%);
  background-size: 200% 200%;
  animation: gradient-shift 6s ease infinite;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-subtitle{ font-size: 14px; color: rgba(255,255,255,.75); margin: 0 0 22px; }
.hero-quick-stats{ display:flex; align-items:center; gap:24px; flex-wrap: wrap; }
.quick-stat-value{ font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:700; color:#fff; line-height:1; margin-bottom:3px; display:flex; align-items:baseline; gap:6px; }
.quick-stat-value small{ font-size:12px; color: rgba(255,255,255,.6); font-weight:500; }
.quick-stat-label{ font-size:11px; color: rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.05em; }
.quick-stat-divider{ width:1px; height:36px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.2), transparent); }
.hero-illustration{ flex-shrink:0; position:relative; z-index:1; width:220px; height:180px; }
.hero-svg{ width:100%; height:100%; filter: drop-shadow(0 8px 20px rgba(0,0,0,.2)); }
.orbit-ring{ animation: spin-slow 30s linear infinite; transform-origin:center; }
.orbit-ring-rev{ animation: spin-slow 40s linear infinite reverse; transform-origin:center; }

/* STATS */
.stats-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; }
.stat-card{
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  position:relative; overflow:hidden;
  transition: all var(--med) var(--ease);
  cursor:pointer;
}
.stat-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--primary-300); }
.stat-card::before{
  content:""; position:absolute;
  top:0; left:0; right:0; height:3px;
  background: var(--grad-primary);
  opacity:0;
  transition: opacity var(--med) var(--ease);
}
.stat-card:hover::before{ opacity:1; }
.stat-card.success::before{ background: var(--grad-success); }
.stat-card.warning::before{ background: var(--grad-warning); }
.stat-card.danger::before{ background: var(--grad-danger); }
.stat-gradient-bg{
  position:absolute; top:-30px; right:-30px;
  width:130px; height:0; border-radius:50%;
  background: radial-gradient(circle, rgba(14,165,233,.08), transparent 70%);
  pointer-events:none;
  transition: transform var(--slow) var(--ease);
}
.stat-card:hover .stat-gradient-bg{ transform: scale(1.2); }
.stat-grad-success{ background: radial-gradient(circle, rgba(16,185,129,.1), transparent 70%); }
.stat-grad-warning{ background: radial-gradient(circle, rgba(245,158,11,.1), transparent 70%); }
.stat-grad-danger { background: radial-gradient(circle, rgba(239,68,68,.1), transparent 70%); }
.stat-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; position:relative; }
.stat-icon{
  width:44px; height:44px; border-radius: var(--r-md);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 14px rgba(0,0,0,.1);
  transition: transform var(--med) var(--ease);
  position:relative;
}
.stat-card:hover .stat-icon{ transform: scale(1.08) rotate(-4deg); }
.stat-icon::after{ content:""; position:absolute; inset:-4px; border-radius: var(--r-lg); opacity:.3; filter:blur(10px); z-index:-1; }
.stat-icon svg{ width:22px; height:22px; }
.stat-icon-primary{ background: var(--grad-primary); color:#fff; } .stat-icon-primary::after{ background: var(--grad-primary); }
.stat-icon-success{ background: var(--grad-success); color:#fff; } .stat-icon-success::after{ background: var(--grad-success); }
.stat-icon-warning{ background: var(--grad-warning); color:#fff; } .stat-icon-warning::after{ background: var(--grad-warning); }
.stat-icon-danger { background: var(--grad-danger);  color:#fff; } .stat-icon-danger::after{ background: var(--grad-danger); }
.stat-trend{
  display:inline-flex; align-items:center; gap:3px;
  font-size:11px; font-weight:700;
  padding:4px 9px; border-radius: var(--r-full);
}
.trend-up   { background: var(--success-100); color: var(--success-700); }
.trend-down { background: var(--danger-100);  color: var(--danger-700);  }
.trend-live { background: var(--warning-100); color: var(--warning-700); }
:root.dark .trend-up   { color: var(--success-400); }
:root.dark .trend-down { color: var(--danger-400);  }
:root.dark .trend-live { color: var(--warning-400); }
.pulse-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background: currentColor; margin-right:4px; animation: pulse-soft 1.5s infinite; box-shadow: 0 0 6px currentColor; }
.stat-label{ font-size:11px; color: var(--text-tertiary); font-weight:600; letter-spacing:.06em; margin-bottom:4px; text-transform:uppercase; }
.stat-value{ font-family:'Space Grotesk',sans-serif; font-size:34px; font-weight:700; color: var(--text-primary); line-height:1; letter-spacing:-.02em; margin-bottom:12px; display:flex; align-items:baseline; gap:6px; }
.stat-value-unit{ font-size:14px; font-weight:500; color: var(--text-tertiary); }
.stat-footer{ display:flex; align-items:center; gap:10px; padding-top:10px; border-top: 1px solid var(--border); }
.sparkline{ width:84px; height:22px; flex-shrink:0; }
.stat-foot-text{ font-size:11px; color: var(--text-tertiary); }
.stat-progress{ flex:1; height:6px; background: var(--surface-alt); border-radius: var(--r-full); overflow:hidden; }
.stat-progress-bar{ height:100%; background: var(--grad-warning); border-radius: var(--r-full); box-shadow: 0 0 10px rgba(245,158,11,.5); animation: grow-bar 1.5s var(--ease); }

/* INFOGRAPHIC ROW */
.info-row{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:16px; }
.kpi-card{
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  transition: all var(--med) var(--ease);
  position:relative; overflow:hidden;
}
.kpi-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary-300); }
.radial-wrap{ position:relative; width:140px; height:140px; margin-bottom:14px; }
.radial-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; }
.radial-center-value{ font-size:28px; font-weight:700; color: var(--text-primary); line-height:1; }
.radial-center-label{ font-size:10px; color: var(--text-tertiary); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.kpi-title{ font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:600; color: var(--text-primary); margin-bottom:3px; }
.kpi-desc{ font-size:11px; color: var(--text-tertiary); line-height:1.4; }

.timeline-card, .geo-card{
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  transition: all var(--med) var(--ease);
}
.timeline-card:hover, .geo-card:hover{ border-color: var(--border-strong); box-shadow: var(--shadow-sm); }

.timeline-list{ position:relative; margin-top:10px; }
.timeline-list::before{
  content:""; position:absolute;
  left:10px; top:8px; bottom:8px;
  width:2px;
  background: linear-gradient(180deg, var(--primary-400), var(--accent-500), transparent);
  border-radius:var(--r-full);
}
.timeline-item{ position:relative; padding:6px 0 14px 30px; font-size:12px; }
.timeline-item::before{
  content:""; position:absolute;
  left:6px; top:9px;
  width:10px; height:10px;
  background: var(--bg-surface);
  border: 2px solid var(--primary-500);
  border-radius:50%;
  z-index:1;
  box-shadow: 0 0 0 3px var(--primary-100);
}
.timeline-item.success::before{ border-color: var(--success-500); box-shadow: 0 0 0 3px var(--success-100); }
.timeline-item.warning::before{ border-color: var(--warning-500); box-shadow: 0 0 0 3px var(--warning-100); }
.timeline-item.danger::before { border-color: var(--danger-500);  box-shadow: 0 0 0 3px var(--danger-100); }
.tl-title{ font-weight:600; color: var(--text-primary); margin-bottom:2px; }
.tl-meta{ color: var(--text-tertiary); font-size:11px; font-family:'JetBrains Mono',monospace; }

.geo-list{ display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.geo-item{ display:flex; align-items:center; gap:10px; }
.geo-flag{ width:24px; height:24px; border-radius: var(--r-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:11px; font-weight:700; font-family:'Space Grotesk',sans-serif; color:#fff; }
.geo-info{ flex:1; min-width:0; }
.geo-name-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.geo-name{ font-size:12px; font-weight:600; color: var(--text-primary); }
.geo-count{ font-size:12px; font-weight:700; color: var(--text-primary); font-family:'JetBrains Mono',monospace; }
.geo-bar-track{ height:4px; background: var(--surface-alt); border-radius: var(--r-full); overflow:hidden; }
.geo-bar-fill{ height:100%; border-radius: var(--r-full); animation: grow-bar 1.5s var(--ease) both; }

/* CHARTS */
.chart-row{ display:grid; grid-template-columns: 2fr 1fr; gap:16px; }
.chart-card{
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  transition: all var(--med) var(--ease);
}
.chart-card:hover{ border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.card-header{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; gap:12px; }
.card-title{ font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:700; color: var(--text-primary); letter-spacing:-.01em; display:flex; align-items:center; gap:8px; }
.card-title-icon{ width:24px; height:24px; border-radius: var(--r-sm); background: var(--primary-100); color: var(--primary-600); display:flex; align-items:center; justify-content:center; }
:root.dark .card-title-icon{ color: var(--accent-400); }
.card-title-icon svg{ width:14px; height:14px; }
.card-subtitle{ font-size:12px; color: var(--text-tertiary); margin-top:2px; }
.card-tabs{ display:flex; gap:4px; background: var(--bg-surface-2); padding:3px; border-radius: var(--r-md); }
.chip{ font-size:11px; padding:6px 11px; border-radius: var(--r-sm); color: var(--text-tertiary); font-weight:600; transition: all var(--fast) var(--ease); }
.chip:hover{ color: var(--text-primary); }
.chip-active{ background: var(--bg-surface); color: var(--primary-700); box-shadow: var(--shadow-xs); }
:root.dark .chip-active{ color: var(--accent-400); }
.chip-ghost{ background: transparent; color: var(--primary-600); padding:4px 8px; }

.chart-legend{ display:flex; gap:18px; margin-bottom:12px; font-size:12px; color: var(--text-secondary); }
.legend-item{ display:flex; align-items:center; gap:6px; }
.legend-swatch{ width:10px; height:10px; border-radius:3px; }
.swatch-primary{ background: var(--grad-primary); }
.swatch-success{ background: var(--grad-success); }
.swatch-warning{ background: var(--grad-warning); }

.chart-container{ width:100%; height:220px; }
.area-chart{ width:100%; height:100%; display:block; }
.grid-lines line{ stroke: var(--border); stroke-width:1; stroke-dasharray: 3 3; }
.axis-label{ font-family:'JetBrains Mono',monospace; font-size:10px; fill: var(--text-tertiary); }
.area-path-1{ stroke-dasharray: 1000; animation: draw-line 2s var(--ease) both; }
.area-path-2{ stroke-dasharray: 1000; animation: draw-line 2s var(--ease) .2s both; }
.area-path-3{ stroke-dasharray: 1000; animation: draw-line 2s var(--ease) .4s both; }
.data-point{ cursor:pointer; transition: transform var(--fast) var(--ease); }
.data-point:hover{ transform: scale(1.3); }

.donut-wrap{ display:flex; justify-content:center; margin:8px 0 16px; }
.donut-svg{ transform: rotate(-90deg); transition: transform var(--slow) var(--ease); }
.chart-card:hover .donut-svg{ transform: rotate(-90deg) scale(1.03); }
.donut-center-value{ font-family:'Space Grotesk',sans-serif; font-size:30px; font-weight:700; fill: var(--text-primary); }
.donut-center-label{ font-size:11px; fill: var(--text-tertiary); letter-spacing:.05em; text-transform:uppercase; font-weight:600; }
.donut-legend{ display:flex; flex-direction:column; gap:10px; }
.donut-legend-item{ display:flex; align-items:center; gap:10px; font-size:12px; padding:6px 8px; border-radius: var(--r-sm); transition: background var(--fast) var(--ease); cursor:pointer; }
.donut-legend-item:hover{ background: var(--bg-surface-2); }
.dot{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.dot-primary{ background: var(--grad-primary); }
.dot-success{ background: var(--grad-success); }
.dot-warning{ background: var(--grad-warning); }
.dot-danger { background: var(--grad-danger); }
.dl-label{ flex:1; color: var(--text-secondary); }
.dl-value{ color: var(--text-primary); font-weight:700; font-family:'JetBrains Mono',monospace; font-size:13px; }

/* SECONDARY */
.secondary-row{ display:grid; grid-template-columns: 1.5fr 1fr; gap:16px; }
.activity-list{ display:flex; flex-direction:column; gap:4px; }
.activity-item{ display:flex; align-items:flex-start; gap:12px; padding:12px; border-radius: var(--r-md); transition: all var(--fast) var(--ease); }
.activity-item:hover{ background: var(--bg-surface-2); transform: translateX(2px); }
.activity-avatar{ width:38px; height:38px; border-radius: var(--r-md); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; position:relative; }
.activity-avatar::after{ content:""; position:absolute; inset:-3px; border-radius: var(--r-lg); opacity:.25; filter:blur(6px); z-index:-1; }
.avatar-success{ background: var(--grad-success); } .avatar-success::after{ background: var(--grad-success); }
.avatar-primary{ background: var(--grad-primary); } .avatar-primary::after{ background: var(--grad-primary); }
.avatar-warning{ background: var(--grad-warning); } .avatar-warning::after{ background: var(--grad-warning); }
.avatar-neutral{ background: linear-gradient(135deg, var(--neutral-500), var(--neutral-700)); }
.activity-content{ flex:1; min-width:0; }
.activity-title{ font-size:13px; color: var(--text-primary); margin-bottom:4px; line-height:1.4; }
.activity-title strong{ font-weight:700; color: var(--primary-700); }
:root.dark .activity-title strong{ color: var(--accent-400); }
.activity-meta{ display:flex; align-items:center; gap:8px; font-size:11px; color: var(--text-tertiary); flex-wrap:wrap; }
.activity-dot-sep{ opacity:.5; }
.tag{ display:inline-flex; align-items:center; padding:2px 8px; border-radius: var(--r-sm); font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; }
.tag-success{ background: var(--success-100); color: var(--success-700); }
.tag-primary{ background: var(--primary-100); color: var(--primary-700); }
.tag-warning{ background: var(--warning-100); color: var(--warning-700); }
.tag-neutral{ background: var(--surface-alt); color: var(--text-secondary); }
:root.dark .tag-success{ color: var(--success-400); }
:root.dark .tag-primary{ color: var(--accent-400); }
:root.dark .tag-warning{ color: var(--warning-400); }
.activity-time{ font-size:11px; color: var(--text-muted); flex-shrink:0; font-variant-numeric: tabular-nums; }

.perf-list{ display:flex; flex-direction:column; gap:14px; margin-bottom:18px; }
.perf-header-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.perf-name{ font-size:13px; color: var(--text-primary); font-weight:600; display:flex; align-items:center; gap:8px; }
.perf-rank{ width:20px; height:20px; border-radius:50%; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; }
.perf-rank-1{ background: var(--grad-warning); color:#fff; box-shadow: 0 2px 6px rgba(245,158,11,.4); }
.perf-rank-2{ background: linear-gradient(135deg, #CBD5E1, #94A3B8); color:#fff; }
.perf-rank-3{ background: linear-gradient(135deg, #FCA5A5, #F87171); color:#fff; }
.perf-rank-4{ background: var(--surface-alt); color: var(--text-secondary); }
.perf-val{ font-size:14px; font-weight:700; color: var(--text-primary); font-variant-numeric: tabular-nums; font-family:'Space Grotesk',sans-serif; }
.perf-bar-track{ height:8px; background: var(--surface-alt); border-radius: var(--r-full); overflow:hidden; }
.perf-bar-fill{ height:100%; border-radius: var(--r-full); animation: grow-bar 1.5s var(--ease); }
.perf-grad-1{ background: linear-gradient(90deg, #22D3EE, #0EA5E9); box-shadow: 0 0 10px rgba(34,211,238,.4); }
.perf-grad-2{ background: linear-gradient(90deg, #34D399, #10B981); box-shadow: 0 0 10px rgba(52,211,153,.3); }
.perf-grad-3{ background: linear-gradient(90deg, #FBBF24, #F59E0B); box-shadow: 0 0 10px rgba(251,191,36,.3); }
.perf-grad-4{ background: linear-gradient(90deg, #A78BFA, #8B5CF6); box-shadow: 0 0 10px rgba(167,139,250,.3); }
.perf-summary{ display:flex; justify-content:space-between; padding-top:14px; border-top:1px solid var(--border); gap:8px; }
.perf-sum-stat{ text-align:center; flex:1; }
.perf-sum-val{ font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:700; color: var(--text-primary); line-height:1; margin-bottom:3px; }
.perf-sum-lbl{ font-size:10px; color: var(--text-tertiary); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }

/* SIDEBAR BACKDROP (mobile) */
.sidebar-backdrop{
  display: none;
  position: fixed; inset: 0;
  background: rgba(2, 6, 23, 0.5);
  backdrop-filter: blur(4px);
  z-index: 15;
  opacity: 0;
  transition: opacity var(--med) var(--ease);
}
.sidebar-backdrop.show{ display: block; opacity: 1; }

/* RESPONSIVE */
@media (max-width: 1280px){
  .stats-grid{ grid-template-columns: repeat(2, 1fr); }
  .chart-row, .secondary-row{ grid-template-columns: 1fr; }
  .info-row{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
  .mobile-toggle{ display: inline-flex; }
  .sidebar{
    position: fixed;
    top: 0; left: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform var(--med) var(--ease);
  }
  .sidebar.mobile-open{
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }
  .sidebar-toggle{ display: none; }
  .content{ padding:16px; gap:16px; }
  .hero-banner{ flex-direction:column; padding:22px; align-items:flex-start; }
  .hero-illustration{ display:none; }
  .hero-title{ font-size:24px; }
  .hero-quick-stats{ flex-wrap:wrap; gap:16px; }
}

/* ============================================================
   ADDONS — account dropdown, breadcrumb list (legacy Blade),
   flash helpers. These are Electric Ocean-native extensions.
   ============================================================ */

/* Account dropdown under the topbar avatar */
.user-menu { position: relative; }
.user-menu-panel.dropdown-menu {
  min-width: 240px;
  padding: 6px;
  margin-top: 10px !important;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-size: 13.5px;
  color: var(--text-primary);
}
.user-menu-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 12px;
}
.user-menu-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--grad-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.user-menu-name {
  font-size: 13.5px; font-weight: 600; color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-menu-email {
  font-size: 12px; color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-menu-sep { margin: 4px 0; border: 0; border-top: 1px solid var(--border); }
.user-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.user-menu-item svg, .user-menu-item i { color: var(--text-tertiary); flex-shrink: 0; }
.user-menu-item:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.user-menu-item.user-menu-danger { color: var(--danger-500); }
.user-menu-item.user-menu-danger svg, .user-menu-item.user-menu-danger i { color: var(--danger-500); }
.user-menu-item.user-menu-danger:hover { background: var(--danger-100); color: var(--danger-700); }
:root.dark .user-menu-item.user-menu-danger:hover { color: var(--danger-400); }

/* Breadcrumb — support both the simple <a>+<span> pattern AND
   existing legacy <ol class="breadcrumb"><li class="breadcrumb-item">...</li></ol>  */
.breadcrumb ol, .topbar .breadcrumb ol {
  list-style: none; padding: 0; margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.topbar .breadcrumb { overflow: hidden; }
.breadcrumb-item { display: inline-flex; align-items: center; color: var(--text-tertiary); font-size: 13px; }
.breadcrumb-item a { color: var(--text-tertiary); }
.breadcrumb-item a:hover { color: var(--primary-600); }
.breadcrumb-item.active { color: var(--text-primary); font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before {
  content: "/"; color: var(--text-muted); padding: 0 4px;
}

/* Flash alerts (partials/_flash.blade.php uses Bootstrap .alert) */
.alert {
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: 13.5px;
  margin-bottom: 12px;
}
.alert-success { background: var(--success-100); border-color: rgba(52,211,153,.35); color: var(--success-700); }
.alert-danger  { background: var(--danger-100);  border-color: rgba(248,113,113,.35); color: var(--danger-700); }
.alert-warning { background: var(--warning-100); border-color: rgba(251,191,36,.35);  color: var(--warning-700); }
.alert-info    { background: var(--primary-100); border-color: var(--border-strong);  color: var(--primary-700); }
:root.dark .alert-success { color: var(--success-400); }
:root.dark .alert-danger  { color: var(--danger-400); }
:root.dark .alert-warning { color: var(--warning-400); }
:root.dark .alert-info    { color: var(--accent-400); }

/* Focus ring applied to avatar dropdown button (open-state glow) */
.user-avatar-sm:focus-visible,
.user-avatar-sm[aria-expanded="true"] { box-shadow: var(--shadow-glow); outline: none; }

/* ============================================================
   PAGE HEADER + REPORT TABS + DATA TABLE + EMPTY STATE
   ============================================================ */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}
.page-header-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
  letter-spacing: -.01em;
}
.page-header-sub {
  font-size: 13.5px;
  color: var(--text-tertiary);
  margin: 0;
}
.page-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Report segmented tabs */
.report-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow-x: auto;
}
.report-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  border: 1px solid transparent;
  transition: all var(--fast) var(--ease);
}
.report-tab svg { width: 14px; height: 14px; color: var(--text-tertiary); }
.report-tab:hover { background: var(--bg-surface); color: var(--text-primary); }
.report-tab:hover svg { color: var(--primary-600); }
.report-tab.active {
  background: var(--bg-surface);
  color: var(--primary-700);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
  font-weight: 600;
}
.report-tab.active svg { color: var(--primary-600); }
:root.dark .report-tab.active { color: var(--accent-400); }
:root.dark .report-tab.active svg { color: var(--accent-400); }

/* ============================================================
   DATA TABLE (native + DataTables overrides)
   ============================================================ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--text-primary);
  margin: 0 !important;
}
.data-table thead th {
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--border);
  border-top: none !important;
  white-space: nowrap;
}
.data-table tbody td {
  padding: 14px 16px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  background: var(--bg-surface);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background var(--fast) var(--ease); }
.data-table tbody tr:hover td { background: var(--bg-surface-2); }

/* DataTables wrapper overrides */
.dataTables_wrapper { padding: 12px 16px 14px; }
.dataTables_wrapper .row:first-child { padding: 0 4px 10px; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-md) !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  font-family: inherit !important;
  height: 36px;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  outline: none;
  border-color: var(--primary-500) !important;
  box-shadow: var(--shadow-glow) !important;
}
.dataTables_wrapper .dataTables_filter { text-align: right; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  color: var(--text-tertiary); font-size: 13px;
  display: inline-flex; align-items: center; gap: 8px;
}
.dataTables_wrapper .dataTables_info {
  font-size: 12.5px;
  color: var(--text-tertiary);
  padding-top: 12px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
  margin: 0 2px !important;
  min-width: 32px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--grad-primary) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(14,165,233,.25);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--text-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
  cursor: not-allowed;
}

/* DataTables export/print buttons */
div.dt-buttons { display: inline-flex; gap: 8px; }
div.dt-buttons .btn {
  height: 36px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--border-strong) !important;
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all var(--fast) var(--ease);
  box-shadow: none !important;
}
div.dt-buttons .btn:hover {
  background: var(--bg-surface-2) !important;
  border-color: var(--primary-400) !important;
  transform: translateY(-1px);
}
div.dt-buttons .btn i, div.dt-buttons .btn svg { font-size: 14px; }
div.dt-buttons .btn-success { color: var(--success-700) !important; border-color: rgba(52,211,153,.35) !important; }
:root.dark div.dt-buttons .btn-success { color: var(--success-400) !important; }

/* Status pill (monospace tag for table cells) */
.status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .01em;
  border: 1px solid transparent;
}
.status-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .7;
}
.status-pill.s-success { background: var(--success-100); color: var(--success-700); border-color: rgba(52,211,153,.3); }
.status-pill.s-warning { background: var(--warning-100); color: var(--warning-700); border-color: rgba(251,191,36,.3); }
.status-pill.s-danger  { background: var(--danger-100);  color: var(--danger-700);  border-color: rgba(248,113,113,.3); }
.status-pill.s-info    { background: var(--primary-100); color: var(--primary-700); border-color: var(--border-strong); }
.status-pill.s-neutral { background: var(--surface-alt); color: var(--text-secondary); border-color: var(--border); }
:root.dark .status-pill.s-success { color: var(--success-400); }
:root.dark .status-pill.s-warning { color: var(--warning-400); }
:root.dark .status-pill.s-danger  { color: var(--danger-400); }
:root.dark .status-pill.s-info    { color: var(--accent-400); }

.cell-mono { font-family: 'JetBrains Mono', monospace; color: var(--text-tertiary); font-size: 12px; }
.cell-strong { color: var(--text-primary); font-weight: 600; font-size: 13px; }
.cell-time { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }
.cell-time strong { color: var(--text-primary); font-weight: 500; font-family: 'JetBrains Mono', monospace; }

/* Icon-button for row actions */
.ds-icon-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  transition: all var(--fast) var(--ease);
}
.ds-icon-link:hover {
  background: var(--primary-100);
  color: var(--primary-700);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.ds-icon-link svg { width: 14px; height: 14px; }

/* Empty state */
.empty-state { text-align: center; padding: 56px 24px; color: var(--text-tertiary); }
.empty-state-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bg-surface-2);
  color: var(--text-tertiary);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.empty-state-icon svg { width: 22px; height: 22px; }
.empty-state-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.empty-state-text { font-size: 13px; color: var(--text-tertiary); max-width: 360px; margin: 0 auto; }

/* Score percent pill (results) */
.score-pct {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
}
.score-pct.pass { background: var(--success-100); color: var(--success-700); border-color: rgba(52,211,153,.3); }
.score-pct.mid  { background: var(--warning-100); color: var(--warning-700); border-color: rgba(251,191,36,.3); }
.score-pct.fail { background: var(--danger-100);  color: var(--danger-700);  border-color: rgba(248,113,113,.3); }
:root.dark .score-pct.pass { color: var(--success-400); }
:root.dark .score-pct.mid  { color: var(--warning-400); }
:root.dark .score-pct.fail { color: var(--danger-400); }

/* ============================================================
   EXAM RUNNER — dark, distraction-free
   ============================================================ */
body.exam-body {
  margin: 0; padding: 0;
  background: #020617;
  height: 100vh;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  color: rgba(255,255,255,0.88);
}

/* Instructions screen */
.exam-instructions-shell {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1000px 500px at 80% -10%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(800px 400px at -10% 110%, rgba(14,165,233,.12), transparent 60%),
    #020617;
}
.exam-instructions-card {
  width: 100%; max-width: 720px;
  background: #0B1628;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-xl);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  overflow: hidden;
  color: rgba(255,255,255,.82);
}
.exam-instructions-header {
  padding: 28px 32px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: center;
  background: linear-gradient(180deg, rgba(34,211,238,.10) 0%, transparent 100%);
}
.exam-instructions-logo {
  width: 52px; height: 52px;
  background: var(--grad-primary);
  border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(34,211,238,.35);
  margin-bottom: 12px;
}
.exam-instructions-logo svg { width: 24px; height: 24px; color: #fff; }
.exam-instructions-header h1 { font-family: 'Space Grotesk', sans-serif; color: #fff; font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.exam-instructions-header p { color: rgba(255,255,255,.55); font-size: 13px; margin: 4px 0 0; }
.exam-instructions-body { padding: 24px 32px 28px; }

.exam-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.exam-meta-chip {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-sm);
  padding: 7px 12px;
  font-size: 12.5px;
  color: rgba(255,255,255,.65);
}
.exam-meta-chip strong { color: #fff; font-weight: 600; margin-left: 4px; font-family: 'JetBrains Mono', monospace; }

.exam-attempt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(245,158,11,.18);
  color: var(--warning-400);
  border: 1px solid rgba(245,158,11,.3);
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: 12px; font-weight: 600;
  margin-bottom: 12px;
}

.exam-section-title {
  display: flex; align-items: center; gap: 8px;
  color: #fff; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  margin: 0 0 12px;
  font-family: 'Space Grotesk', sans-serif;
}
.exam-section-title svg { width: 14px; height: 14px; color: var(--accent-400); }

.exam-rules { list-style: none; padding: 0; margin: 0 0 20px; }
.exam-rules li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 13.5px;
  color: rgba(255,255,255,.72);
  line-height: 1.5;
}
.exam-rules li:last-child { border-bottom: none; }
.exam-rules li strong { color: #fff; font-weight: 600; }
.exam-rule-num {
  width: 24px; height: 24px;
  border-radius: var(--r-sm);
  background: rgba(34,211,238,.15);
  color: var(--accent-400);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0; margin-top: 1px;
}

.exam-notice {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: var(--r-md);
  padding: 12px 14px;
  color: #FFDBB0;
  font-size: 13px;
  margin-bottom: 16px;
}
.exam-notice svg { color: var(--warning-500); flex-shrink: 0; margin-top: 2px; }
.exam-notice strong { color: #fff; }

.exam-error {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.35);
  border-radius: var(--r-md);
  padding: 12px 14px;
  color: #FFB8B0;
  font-size: 13px;
  margin-bottom: 16px;
}

.exam-begin-btn {
  width: 100%;
  height: 48px;
  background: var(--grad-primary);
  border: none;
  color: #fff;
  font-size: 15px; font-weight: 600;
  border-radius: var(--r-md);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: all var(--fast) var(--ease);
  box-shadow: 0 4px 14px rgba(14,165,233,.35);
}
.exam-begin-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(14,165,233,.5); }
.exam-begin-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.exam-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,.5);
  font-size: 13px;
  padding: 10px 0;
}
.exam-back-link:hover { color: #fff; }

/* ===== Exam runner shell ===== */
#exam-root {
  display: flex; flex-direction: column;
  height: 100vh;
  background: #020617;
  color: rgba(255,255,255,.88);
  position: relative;
}

/* Gradient timer bar — sits at very top, fills left→right as time elapses */
#timer-bar {
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: rgba(255,255,255,.05);
  z-index: 11;
  overflow: hidden;
}
#timer-bar-fill {
  height: 100%;
  width: 100%;
  background: var(--grad-primary);
  transform-origin: left;
  transition: transform 1s linear, background var(--fast) var(--ease);
  box-shadow: 0 0 12px rgba(34,211,238,.6);
}
#timer-bar.low #timer-bar-fill { background: var(--grad-warning); box-shadow: 0 0 12px rgba(251,191,36,.6); }
#timer-bar.urgent #timer-bar-fill { background: var(--grad-danger); box-shadow: 0 0 14px rgba(248,113,113,.7); }

/* Top bar */
#top-bar {
  height: 60px;
  background: #0B1628;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center;
  padding: 0 20px;
  gap: 14px;
  flex-shrink: 0;
  z-index: 10;
}
#top-bar .brand {
  display: flex; align-items: center; gap: 10px;
  color: #fff; font-weight: 700; font-size: 14px;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -.01em; flex-shrink: 0;
}
#top-bar .brand-icon {
  width: 32px; height: 32px;
  background: var(--grad-primary);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(14,165,233,.4);
}
#top-bar .brand-icon i, #top-bar .brand-icon svg { color: #fff; font-size: 16px; }

#top-bar .mode-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 600;
  flex-shrink: 0;
  background: rgba(52,211,153,.18);
  color: var(--success-400);
  border: 1px solid rgba(52,211,153,.3);
}

#top-bar .post-title {
  color: rgba(255,255,255,.55);
  font-size: 13px;
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}

/* Connection secure indicator */
.conn-secure {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: rgba(52,211,153,.12);
  color: var(--success-400);
  border: 1px solid rgba(52,211,153,.25);
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 600;
  font-family: 'Inter', sans-serif;
  flex-shrink: 0;
}
.conn-secure .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success-400);
  animation: pulse-soft 2s infinite;
  box-shadow: 0 0 6px var(--success-400);
}

#answered-counter {
  display: inline-flex; align-items: center; gap: 4px;
  color: rgba(255,255,255,.75);
  font-size: 13px; font-weight: 500;
  flex-shrink: 0; white-space: nowrap;
  padding: 5px 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-sm);
  font-family: 'JetBrains Mono', monospace;
}
#answered-counter #answered-num { color: #fff; font-weight: 700; }

#warning-counter {
  color: var(--warning-400);
  font-size: 11px; font-weight: 600;
  flex-shrink: 0; white-space: nowrap; display: none;
  padding: 5px 10px;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: var(--r-sm);
  font-family: 'JetBrains Mono', monospace;
}

#timer-display {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
  flex-shrink: 0;
  min-width: 72px;
  text-align: right;
  letter-spacing: -.01em;
}

/* Body row */
#body-row { display: flex; flex: 1; overflow: hidden; }

/* Palette (question navigator) */
#palette-panel {
  width: 232px;
  flex-shrink: 0;
  background: #0F1F35;
  border-right: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column; overflow: hidden;
}
#palette-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
#palette-header h6 {
  font-family: 'Space Grotesk', sans-serif;
  color: rgba(255,255,255,.5);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 10px;
}
.palette-legend { display: flex; gap: 10px; flex-wrap: wrap; }
.legend-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: rgba(255,255,255,.55);
}
.legend-dot { width: 10px; height: 10px; border-radius: 3px; }

#palette-grid { flex: 1; overflow-y: auto; padding: 12px; }
#palette-grid::-webkit-scrollbar { width: 8px; }
#palette-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 8px; }

#palette-grid-inner { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.palette-q-btn {
  width: 100%;
  padding: 8px 0;
  font-size: 11.5px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.palette-q-btn:hover { transform: translateY(-1px); }

/* answered = filled cyan */
.palette-answered {
  background: var(--grad-primary);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(14,165,233,.25);
}
/* current = amber */
.palette-current {
  background: var(--grad-warning);
  color: #0B1628;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(245,158,11,.35);
}
/* unanswered = outlined */
.palette-unanswered {
  background: transparent;
  color: rgba(255,255,255,.55);
  border-color: rgba(255,255,255,.12);
}
.palette-unanswered:hover { border-color: var(--accent-400); color: #fff; }

/* Main exam area */
#main-area {
  flex: 1;
  background: #fff;
  display: flex; flex-direction: column; overflow: hidden;
}
:root.dark #main-area { background: #fff; } /* always light inside for readability */

#question-content, #palette-panel {
  -webkit-user-select: none; -moz-user-select: none;
  -ms-user-select: none; user-select: none;
}

#question-header-bar {
  padding: 14px 28px;
  border-bottom: 1px solid #E0F2FE;
  background: #F8FAFC;
  flex-shrink: 0;
}
#question-header-bar #q-counter-label {
  color: #0C4A6E; font-size: 14px; font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
}
#question-header-bar .text-muted {
  color: #64748B !important; font-size: 12.5px;
}
#question-header-bar .progress {
  height: 5px !important;
  border-radius: var(--r-full) !important;
  background: #E2E8F0;
  margin-top: 8px;
}
#question-header-bar .progress-bar.bg-success {
  background: var(--grad-primary) !important;
  border-radius: var(--r-full);
  box-shadow: 0 0 8px rgba(14,165,233,.4);
  transition: width var(--med) var(--ease);
}

#question-content { flex: 1; overflow-y: auto; padding: 28px 32px; }

.question-text-card {
  background: #E0F2FE;
  border-left: 3px solid var(--primary-500);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 18px 22px;
  margin-bottom: 22px;
  font-size: 16px; font-weight: 500;
  color: #0C4A6E;
  line-height: 1.6;
}

.option-label {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid #E0F2FE;
  border-radius: var(--r-md);
  margin-bottom: 10px;
  cursor: pointer;
  background: #fff;
  user-select: none;
  transition: all var(--fast) var(--ease);
}
.option-label:hover { border-color: var(--primary-300); background: #F0F9FF; }
.option-label.selected-opt {
  border-color: var(--primary-500);
  background: #E0F2FE;
  box-shadow: 0 0 0 3px rgba(14,165,233,.15);
}
.option-badge {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  color: #475569;
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  transition: all var(--fast) var(--ease);
}
.selected-opt .option-badge {
  background: var(--grad-primary);
  border-color: transparent;
  color: #fff;
}
.option-text {
  font-size: 14.5px;
  color: #0F172A;
  padding-top: 5px;
  line-height: 1.5;
}

.clear-link {
  font-size: 12.5px;
  color: #64748B;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  transition: all var(--fast) var(--ease);
}
.clear-link:hover { color: var(--danger-500); background: var(--danger-100); }

/* Nav footer */
#nav-footer {
  padding: 14px 28px;
  border-top: 1px solid #E0F2FE;
  background: #fff;
  display: flex; align-items: center;
  gap: 8px; flex-shrink: 0; flex-wrap: wrap;
}
#nav-footer .btn {
  height: 38px;
  padding: 0 14px;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: var(--r-md) !important;
  display: inline-flex; align-items: center; gap: 6px;
}
#nav-footer .btn-outline-secondary {
  background: #fff !important;
  border: 1px solid #BAE6FD !important;
  color: #0C4A6E !important;
}
#nav-footer .btn-outline-secondary:hover { background: #F0F9FF !important; border-color: var(--primary-400) !important; }
#nav-footer .btn-outline-primary {
  background: #fff !important;
  border: 1px solid var(--primary-500) !important;
  color: var(--primary-700) !important;
}
#nav-footer .btn-outline-primary:hover { background: #E0F2FE !important; }
#nav-footer .btn-primary {
  background: var(--grad-primary) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(14,165,233,.25);
}
#nav-footer .btn-warning {
  background: rgba(245,158,11,.15) !important;
  border: 1px solid rgba(245,158,11,.35) !important;
  color: var(--warning-700) !important;
}
#nav-footer .btn-danger {
  background: var(--grad-danger) !important;
  border: none !important;
  color: #fff !important;
}

/* Review banner */
#review-banner {
  background: #FEF3C7;
  border-top: 1px solid rgba(245,158,11,.35);
  border-bottom: 1px solid rgba(245,158,11,.35);
  padding: 10px 28px;
  color: var(--warning-700);
  font-size: 13px; font-weight: 500;
  display: none;
  flex-shrink: 0;
}
#review-banner strong { color: #0C4A6E; }
#review-banner #review-timer-text { font-family: 'JetBrains Mono', monospace; }

/* Timer colors (top-right display) */
.timer-white  { color: #fff !important; }
.timer-yellow { color: var(--warning-400) !important; }
.timer-red    { color: #FF6B6B !important; }
@keyframes ds-blink { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
.timer-urgent { animation: ds-blink .6s infinite; }

/* Warning toast */
#warning-toast {
  position: fixed; top: 76px; left: 50%;
  transform: translateX(-50%);
  background: #0B1628;
  color: #fff;
  border: 1px solid rgba(245,158,11,.4);
  border-left: 3px solid var(--warning-500);
  padding: 14px 40px 14px 16px;
  border-radius: var(--r-md);
  z-index: 9999;
  min-width: 340px; max-width: 620px;
  box-shadow: var(--shadow-lg);
  display: none;
  font-size: 13.5px; font-weight: 500;
}
#warning-toast.danger-level {
  border-color: rgba(239,68,68,.5);
  border-left-color: var(--danger-500);
  background: #1A0E0D;
}
#warning-toast .warning-icon { font-size: 18px; margin-right: 8px; vertical-align: middle; color: var(--warning-400); }
#warning-toast .warning-close {
  position: absolute; top: 8px; right: 12px;
  cursor: pointer; color: rgba(255,255,255,.4); font-size: 18px; line-height: 1;
}
#warning-toast .warning-close:hover { color: #fff; }

/* Save-status pill (answer-queue health indicator in the top bar) */
.save-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 600;
  font-family: 'Inter', sans-serif;
  flex-shrink: 0;
  border: 1px solid transparent;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.save-status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.save-status-synced {
  background: rgba(52,211,153,.12);
  color: var(--success-400);
  border-color: rgba(52,211,153,.25);
}
.save-status-synced .dot { animation: pulse-soft 2s infinite; }
.save-status-saving {
  background: rgba(34,211,238,.15);
  color: var(--accent-400);
  border-color: rgba(34,211,238,.3);
}
.save-status-saving .dot { animation: ds-blink .8s infinite; }
.save-status-pending {
  background: rgba(245,158,11,.15);
  color: var(--warning-400);
  border-color: rgba(245,158,11,.3);
}
.save-status-pending .dot { animation: ds-blink .6s infinite; }
.save-status-offline {
  background: rgba(239,68,68,.15);
  color: var(--danger-400);
  border-color: rgba(239,68,68,.35);
}
.save-status-offline .dot { animation: ds-blink .5s infinite; }

/* Recovery modal — shown as last-resort when CSRF is permanently dead.
   Full-screen cover, candidate copies a recovery payload for the supervisor. */
#recovery-cover {
  position: fixed; inset: 0;
  background: rgba(2,6,23,.95);
  backdrop-filter: blur(8px);
  z-index: 99999;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
#recovery-cover.show { display: flex; }
.recovery-panel {
  max-width: 640px; width: 100%;
  background: #0B1628;
  border: 1px solid rgba(239,68,68,.4);
  border-radius: var(--r-lg);
  padding: 28px;
  color: rgba(255,255,255,.88);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.recovery-panel h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px; font-weight: 700;
  color: #fff; margin: 0 0 8px;
  display: flex; align-items: center; gap: 10px;
}
.recovery-panel h2 svg { color: var(--danger-400); width: 20px; height: 20px; }
.recovery-panel p { font-size: 13.5px; color: rgba(255,255,255,.75); margin: 0 0 12px; line-height: 1.55; }
.recovery-panel textarea {
  width: 100%; min-height: 180px;
  padding: 12px; margin: 8px 0 12px;
  background: #020617;
  color: var(--accent-400);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  resize: vertical;
}
.recovery-panel .recovery-code {
  display: inline-block;
  padding: 4px 10px;
  background: var(--danger-100);
  color: var(--danger-700);
  border-radius: var(--r-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}
:root.dark .recovery-panel .recovery-code { background: rgba(239,68,68,.15); color: var(--danger-400); }
.recovery-panel .recovery-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.recovery-panel .btn-recovery {
  background: var(--grad-primary); color: #fff; border: none;
  padding: 10px 16px; font-size: 13px; font-weight: 600;
  border-radius: var(--r-md); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.recovery-panel .btn-recovery-alt {
  background: transparent; color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.15);
  padding: 10px 16px; font-size: 13px; font-weight: 600;
  border-radius: var(--r-md); cursor: pointer;
}

/* Final-submit lock overlay — shown while infinite-retrying the submit POST.
   Ignores Escape + beforeunload so the candidate can't close and lose answers. */
#submit-lock-cover {
  position: fixed; inset: 0;
  background: rgba(2,6,23,.88);
  backdrop-filter: blur(6px);
  z-index: 99998;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  color: #fff;
}
#submit-lock-cover.show { display: flex; }
.submit-lock-panel {
  max-width: 460px; width: 100%;
  text-align: center;
  background: #0B1628;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg);
  padding: 32px 28px;
}
.submit-lock-panel h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px; font-weight: 700;
  color: #fff; margin: 16px 0 6px;
}
.submit-lock-panel p { font-size: 13.5px; color: rgba(255,255,255,.7); margin: 0 0 14px; line-height: 1.55; }
.submit-lock-spinner {
  width: 56px; height: 56px; margin: 0 auto;
  border-radius: 50%;
  border: 3px solid rgba(34,211,238,.15);
  border-top-color: var(--accent-400);
  animation: spin-slow 0.9s linear infinite;
}
.submit-lock-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,.4);
  margin-top: 14px;
}

/* Connection bar (bottom) */
#connection-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--grad-danger);
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  font-size: 13px; font-weight: 500;
  z-index: 9998;
  display: none;
}
#connection-bar .connection-dot {
  display: inline-block; width: 8px; height: 8px;
  background: #fff; border-radius: 50%; margin-right: 8px;
  animation: ds-blink .8s infinite;
  vertical-align: middle;
}
#connection-bar.restored { background: var(--grad-success); }

/* Submit modal — stays dark */
#submitModal .modal-content {
  background: #0B1628 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.82);
  border-radius: var(--r-md);
}
#submitModal .modal-header { background: transparent !important; border-color: rgba(255,255,255,.06) !important; }
#submitModal .modal-header .modal-title { color: #fff; font-size: 15px; font-weight: 700; font-family: 'Space Grotesk', sans-serif; }
#submitModal .modal-footer { border-color: rgba(255,255,255,.06) !important; }
.submit-modal-stat {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-md);
  padding: 14px 8px;
  text-align: center;
}
.submit-modal-stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 700; line-height: 1;
}
.submit-modal-stat-value.success { color: var(--success-400); }
.submit-modal-stat-value.danger  { color: var(--danger-400); }
.submit-modal-stat-value.info    { color: var(--accent-400); }
.submit-modal-stat-label {
  font-size: 10px;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 6px;
  font-weight: 600;
}

/* ===== Exam result page — score ring + breakdown ===== */
.score-ring {
  width: 150px; height: 150px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  box-shadow: 0 8px 24px rgba(14,165,233,.2);
  background: conic-gradient(var(--primary-500) var(--score, 0%), var(--surface-alt) 0);
}
.score-ring-inner {
  width: 118px; height: 118px;
  background: var(--bg-surface);
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.score-ring-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 32px; font-weight: 700;
  color: var(--text-primary);
  line-height: 1; letter-spacing: -.02em;
}
.score-ring-total { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }

.breakdown-row { margin-bottom: 16px; }
.breakdown-label {
  display: flex; justify-content: space-between;
  font-size: 13px;
  margin-bottom: 6px;
}
.breakdown-label .left { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.breakdown-label .right { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.breakdown-bar {
  height: 8px;
  background: var(--surface-alt);
  border-radius: var(--r-full);
  overflow: hidden;
}
.breakdown-bar-fill {
  height: 100%;
  border-radius: var(--r-full);
  transition: width var(--slow) var(--ease);
}

.breakdown-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 16px;
}
.breakdown-chip {
  text-align: center;
  padding: 16px 12px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
}
.breakdown-chip-value { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 700; line-height: 1; }
.breakdown-chip-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-tertiary); margin-top: 6px;
}
.breakdown-chip.correct { background: var(--success-100); border-color: rgba(52,211,153,.3); }
.breakdown-chip.correct .breakdown-chip-value { color: var(--success-700); }
.breakdown-chip.wrong   { background: var(--danger-100); border-color: rgba(248,113,113,.3); }
.breakdown-chip.wrong .breakdown-chip-value   { color: var(--danger-700); }
.breakdown-chip.none    { background: var(--surface-alt); border-color: var(--border); }
.breakdown-chip.none .breakdown-chip-value    { color: var(--text-secondary); }
:root.dark .breakdown-chip.correct .breakdown-chip-value { color: var(--success-400); }
:root.dark .breakdown-chip.wrong .breakdown-chip-value { color: var(--danger-400); }

/* Exam responsive */
@media (max-width: 900px) {
  #palette-panel { width: 180px; }
  #question-content { padding: 20px; }
  #top-bar .post-title { display: none; }
}

/* ============================================================
   CANDIDATE PORTAL primitives
   ============================================================ */
/* Page banner (status alert) */
.page-banner {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--bg-surface);
}
.page-banner-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--bg-surface);
}
.page-banner-icon svg { width: 18px; height: 18px; }
.page-banner-body { flex: 1; min-width: 0; }
.page-banner-title { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0 0 2px; }
.page-banner-text { font-size: 13px; color: var(--text-secondary); margin: 0; }
.page-banner-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

.page-banner.tone-info    { background: var(--primary-100); border-color: var(--border-strong); }
.page-banner.tone-info .page-banner-icon    { color: var(--primary-600); }
.page-banner.tone-success { background: var(--success-100); border-color: rgba(52,211,153,.3); }
.page-banner.tone-success .page-banner-icon { color: var(--success-500); }
.page-banner.tone-warning { background: var(--warning-100); border-color: rgba(251,191,36,.3); }
.page-banner.tone-warning .page-banner-icon { color: var(--warning-500); }
.page-banner.tone-danger  { background: var(--danger-100);  border-color: rgba(248,113,113,.3); }
.page-banner.tone-danger .page-banner-icon  { color: var(--danger-500); }

/* Section card — generic content container (not a chart/data card) */
.section-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 16px;
}
.section-card-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.section-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px; font-weight: 700; color: var(--text-primary);
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; letter-spacing: -.005em;
}
.section-card-title svg { width: 16px; height: 16px; color: var(--primary-600); }
:root.dark .section-card-title svg { color: var(--accent-400); }
.section-card-body { padding: 20px; }
.section-card-body.tight { padding: 12px 16px; }

/* Info grid / key-value pairs */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 24px; }
.info-field-label {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: 4px;
}
.info-field-value { font-size: 14px; color: var(--text-primary); font-weight: 500; word-break: break-word; }
.info-field-value.mono { font-family: 'JetBrains Mono', monospace; }

.info-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  gap: 12px;
}
.info-row:last-child { border-bottom: none; }
.info-row-label { color: var(--text-tertiary); }
.info-row-value { color: var(--text-primary); font-weight: 500; text-align: right; }

/* Form primitives (candidate profile) */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; }
.form-label { font-size: 13px; font-weight: 600; color: var(--text-primary); margin: 0; }
.form-required { color: var(--danger-500); font-weight: 400; }
.form-text { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.form-input, .form-select, .form-textarea,
.form-group .form-control, .form-group .form-select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-family: inherit;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.form-textarea, textarea.form-control { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; }
.form-input::placeholder, textarea.form-control::placeholder { color: var(--text-muted); }
.form-input:focus, .form-select:focus, .form-textarea:focus,
.form-group .form-control:focus, .form-group .form-select:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: var(--shadow-glow);
}
.form-error {
  display: block;
  font-size: 12px;
  color: var(--danger-500);
  margin-top: 5px;
}
.form-group .is-invalid { border-color: var(--danger-500); }
.form-group .invalid-feedback {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--danger-500);
}

/* File input polish */
.form-control[type=file] {
  padding: 6px 10px;
  line-height: 26px;
  cursor: pointer;
}
.form-control[type=file]::file-selector-button {
  margin-right: 10px; padding: 5px 12px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--fast) var(--ease);
}
.form-control[type=file]::file-selector-button:hover { background: var(--surface-alt); }

/* Profile hero (avatar block on profile show) */
.profile-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 24px 20px;
}
.profile-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bg-surface);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--border);
  margin-bottom: 14px;
}
.profile-name { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0 0 2px; }
.profile-email { font-size: 13px; color: var(--text-tertiary); margin: 0 0 10px; }

/* Document row (uploaded docs display) */
.doc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 8px;
}
.doc-row:last-child { margin-bottom: 0; }
.doc-row-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.doc-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--danger-100);
  color: var(--danger-500);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.doc-icon svg { width: 18px; height: 18px; }
.doc-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.doc-meta { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }

/* Post card (available posts grid) */
.post-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex; flex-direction: column;
  height: 100%;
  transition: all var(--med) var(--ease);
  box-shadow: var(--shadow-xs);
}
.post-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary-300); transform: translateY(-2px); }
.post-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.post-card-code { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--text-tertiary); margin-bottom: 4px; letter-spacing: .02em; }
.post-card-title { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; color: var(--text-primary); line-height: 1.35; margin: 0; }
.post-card-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; margin: 8px 0 12px; }
.post-card-spec-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); }
.post-card-spec-value { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.post-card-qual { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 12px; }
.post-card-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }

.quota-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 500;
  color: var(--text-secondary);
  margin: 0 4px 4px 0;
}

/* Application row (dashboard list) */
.app-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.app-row:last-child { border-bottom: none; }
.app-row-main { min-width: 0; flex: 1; }
.app-row-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.app-row-meta { font-size: 12.5px; color: var(--text-tertiary); display: flex; gap: 10px; flex-wrap: wrap; }
.app-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
@media (max-width: 575px) { .app-row { flex-direction: column; align-items: stretch; } }

/* Buttons (candidate portal uses these for CTAs) */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  font-size: 14px; font-weight: 600;
  border-radius: var(--r-md);
  transition: all var(--fast) var(--ease);
  cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--grad-primary); color: #fff;
  box-shadow: 0 4px 12px rgba(14,165,233,.25);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(14,165,233,.35); color: #fff; }
.btn-secondary {
  background: var(--bg-surface); color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover { background: var(--bg-surface-2); border-color: var(--primary-400); color: var(--text-primary); }
.btn-ghost { background: transparent; color: var(--primary-600); }
.btn-ghost:hover { background: var(--primary-100); color: var(--primary-700); }
.btn-danger { background: var(--grad-danger); color: #fff; }
.btn-danger:hover { transform: translateY(-1px); color: #fff; }
.btn-disabled, .btn:disabled {
  background: var(--bg-surface-2) !important; color: var(--text-muted) !important;
  border-color: var(--border) !important; box-shadow: none !important;
  cursor: not-allowed; transform: none !important;
}
.btn-sm { padding: 7px 12px; font-size: 12px; }
.btn-lg { padding: 12px 22px; font-size: 15px; }
.btn-block { width: 100%; justify-content: center; }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ============================================================
   LEGACY BOOTSTRAP BRIDGES
   Auto-skins every un-rewritten admin page (candidates show,
   posts crud, questions crud, applications show, exam-attempts,
   exam-security-logs, admin dashboard with inline Bootstrap).
   ============================================================ */

/* Legacy variable aliases (some old pages still use these in inline styles) */
:root {
  --gov-navy: var(--primary-700);
  --color-primary: var(--primary-700);
  --color-primary-dark: var(--primary-900);
  --color-primary-light: var(--primary-500);
  --color-bg-page: var(--bg-app);
  --color-bg-card: var(--bg-surface);
  --color-text-primary: var(--text-primary);
  --color-text-muted: var(--text-tertiary);
  --color-border: var(--border);
  --color-success: var(--success-500);
  --color-warning: var(--warning-500);
  --color-danger:  var(--danger-500);
  --color-info:    var(--primary-500);
  --color-accent:  var(--accent-500);
}

/* --- Bootstrap .card reskin --- */
.card {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  background: var(--bg-surface);
  transition: all var(--med) var(--ease);
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }

/* Override legacy navy card-headers (inline style="background:var(--color-primary);") */
.card-header {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 20px !important;
}
.card-header h5, .card-header h6, .card-header .fw-semibold {
  color: var(--text-primary) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -.005em;
  margin: 0;
}
.card-header .text-white { color: var(--text-primary) !important; }
.card-header .text-white-50, .card-header small { color: var(--text-tertiary) !important; font-size: 12px !important; }
.card-header i.bi { color: var(--primary-600) !important; }
:root.dark .card-header i.bi { color: var(--accent-400) !important; }

.card-body { color: var(--text-primary); }

/* --- Bootstrap .modal reskin --- */
.modal-content {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  background: var(--bg-surface);
  color: var(--text-primary);
}
.modal-header {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 16px 20px !important;
}
.modal-header .modal-title { color: var(--text-primary) !important; font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; }
.modal-header i.bi { color: var(--primary-600) !important; }
:root.dark .modal-header i.bi { color: var(--accent-400) !important; }
.modal-header .btn-close-white { filter: invert(1) grayscale(1) brightness(0.3); }
:root.dark .modal-header .btn-close-white { filter: none; }
.modal-footer { border-top: 1px solid var(--border); padding: 14px 20px; }
/* Keep the exam's dark modal */
#submitModal .modal-content { background: #0B1628 !important; border-color: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.82); }
#submitModal .modal-header { background: transparent !important; border-color: rgba(255,255,255,.06) !important; }
#submitModal .modal-header .modal-title { color: #fff !important; }
#submitModal .modal-header i.bi { color: var(--warning-400) !important; }

/* --- Bootstrap alerts (.alert) - override to quiet tinted banners --- */
.alert {
  border: 1px solid transparent !important;
  border-radius: var(--r-md) !important;
  padding: 12px 14px !important;
  font-size: 13.5px !important;
  margin-bottom: 16px;
}
.alert-success { background: var(--success-100) !important; border-color: rgba(52,211,153,.3) !important; color: var(--success-700) !important; }
.alert-danger  { background: var(--danger-100)  !important; border-color: rgba(248,113,113,.3) !important; color: var(--danger-700)  !important; }
.alert-warning { background: var(--warning-100) !important; border-color: rgba(251,191,36,.3) !important; color: var(--warning-700) !important; }
.alert-info    { background: var(--primary-100) !important; border-color: var(--border-strong) !important; color: var(--primary-700) !important; }
:root.dark .alert-success { color: var(--success-400) !important; }
:root.dark .alert-danger  { color: var(--danger-400) !important; }
:root.dark .alert-warning { color: var(--warning-400) !important; }
:root.dark .alert-info    { color: var(--accent-400) !important; }
.alert h5, .alert h6, .alert strong, .alert .fs-5 { color: inherit !important; font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
.alert-link { color: inherit !important; font-weight: 700; text-decoration: underline; }

/* --- Bootstrap .btn-* bridges --- */
.btn {
  border-radius: var(--r-md) !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
  transition: all var(--fast) var(--ease);
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-sm { padding: 7px 12px !important; font-size: 12.5px !important; }
.btn-primary {
  background: var(--grad-primary) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(14,165,233,.25);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(14,165,233,.35); }
.btn-success {
  background: var(--grad-success) !important; border: none !important; color: #fff !important;
  box-shadow: 0 4px 12px rgba(16,185,129,.25);
}
.btn-success:hover { transform: translateY(-1px); }
.btn-danger {
  background: var(--grad-danger) !important; border: none !important; color: #fff !important;
  box-shadow: 0 4px 12px rgba(239,68,68,.25);
}
.btn-danger:hover { transform: translateY(-1px); }
.btn-warning {
  background: var(--grad-warning) !important; border: none !important; color: #fff !important;
}
.btn-info { background: linear-gradient(135deg, var(--primary-500), var(--accent-500)) !important; border: none !important; color: #fff !important; }
.btn-secondary {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
}
.btn-secondary:hover { background: var(--bg-surface-2) !important; border-color: var(--primary-400) !important; color: var(--text-primary) !important; }
.btn-outline-primary   { background: var(--bg-surface) !important; border: 1px solid var(--primary-500) !important; color: var(--primary-700) !important; }
.btn-outline-primary:hover { background: var(--primary-100) !important; color: var(--primary-700) !important; }
.btn-outline-secondary { background: var(--bg-surface) !important; border: 1px solid var(--border-strong) !important; color: var(--text-primary) !important; }
.btn-outline-secondary:hover { background: var(--bg-surface-2) !important; border-color: var(--primary-400) !important; }
.btn-outline-success { background: var(--bg-surface) !important; border: 1px solid rgba(52,211,153,.4) !important; color: var(--success-700) !important; }
.btn-outline-success:hover { background: var(--success-100) !important; }
.btn-outline-danger  { background: var(--bg-surface) !important; border: 1px solid rgba(248,113,113,.4) !important; color: var(--danger-700) !important; }
.btn-outline-danger:hover  { background: var(--danger-100) !important; }
:root.dark .btn-outline-success { color: var(--success-400) !important; }
:root.dark .btn-outline-danger  { color: var(--danger-400) !important; }
.btn-link { color: var(--primary-600) !important; text-decoration: none; }
.btn-link:hover { color: var(--primary-700) !important; text-decoration: underline; }
.btn-gov-primary {
  background: var(--grad-primary) !important; border: none !important; color: #fff !important;
  box-shadow: 0 4px 12px rgba(14,165,233,.25);
}
.btn-gov-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(14,165,233,.35); color:#fff !important; }

/* --- Bootstrap .badge bridges — monospace tinted pills --- */
.badge {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
  border-radius: var(--r-full) !important;
  border: 1px solid transparent !important;
  letter-spacing: .01em;
  line-height: 1.5;
}
.badge.bg-success   { background: var(--success-100) !important; color: var(--success-700) !important; border-color: rgba(52,211,153,.3) !important; }
.badge.bg-danger    { background: var(--danger-100)  !important; color: var(--danger-700)  !important; border-color: rgba(248,113,113,.3) !important; }
.badge.bg-warning   { background: var(--warning-100) !important; color: var(--warning-700) !important; border-color: rgba(251,191,36,.3) !important; }
.badge.bg-info      { background: var(--primary-100) !important; color: var(--primary-700) !important; border-color: var(--border-strong) !important; }
.badge.bg-primary   { background: var(--primary-100) !important; color: var(--primary-700) !important; border-color: var(--border-strong) !important; }
.badge.bg-secondary { background: var(--surface-alt) !important; color: var(--text-secondary) !important; border-color: var(--border) !important; }
.badge.bg-light     { background: var(--bg-surface-2) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
.badge.bg-dark      { background: var(--text-primary) !important; color: var(--bg-surface) !important; }
.badge.text-dark    { color: var(--text-primary) !important; }
:root.dark .badge.bg-success { color: var(--success-400) !important; }
:root.dark .badge.bg-danger  { color: var(--danger-400) !important; }
:root.dark .badge.bg-warning { color: var(--warning-400) !important; }
:root.dark .badge.bg-info    { color: var(--accent-400) !important; }
:root.dark .badge.bg-primary { color: var(--accent-400) !important; }

/* --- Bootstrap .table bridges (non-DataTables) --- */
.table { color: var(--text-primary); font-size: 13.5px; margin: 0; background: var(--bg-surface); }
.table > :not(caption) > * > * { padding: 12px 16px !important; border-bottom-color: var(--border) !important; background-color: transparent !important; }
.table thead th {
  background: var(--bg-surface-2) !important;
  color: var(--text-tertiary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--border) !important;
  border-top: none !important;
  font-family: 'Inter', sans-serif !important;
}
.table-dark thead th, .table thead.table-dark th { background: var(--bg-surface-2) !important; color: var(--text-tertiary) !important; }
.table-hover > tbody > tr:hover > * { background: var(--bg-surface-2) !important; }
.table-bordered, .table-bordered th, .table-bordered td { border-color: var(--border) !important; }
.table-light { background: var(--bg-surface-2) !important; }
.table-danger, tr.table-danger > td { background: var(--danger-100) !important; color: var(--danger-700) !important; }
.table-warning, tr.table-warning > td { background: var(--warning-100) !important; color: var(--warning-700) !important; }
.table-success, tr.table-success > td { background: var(--success-100) !important; color: var(--success-700) !important; }
.table tbody td .fw-semibold, .table tbody td .fw-bold { color: var(--text-primary); }

/* --- Form controls bridge (bootstrap .form-control / .form-select / input-group) --- */
.form-control, .form-select {
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-md) !important;
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  font-family: inherit !important;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.form-control:not(textarea) { height: 40px; padding: 0 12px; }
textarea.form-control { padding: 10px 12px; line-height: 1.5; }
.form-control:focus, .form-select:focus {
  outline: none !important;
  border-color: var(--primary-500) !important;
  box-shadow: var(--shadow-glow) !important;
}
.form-control::placeholder { color: var(--text-muted); }
.form-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.form-text { font-size: 12px; color: var(--text-tertiary); }
.form-check-input {
  accent-color: var(--primary-500);
  border-color: var(--border-strong);
}
.form-check-input:checked {
  background-color: var(--primary-500) !important;
  border-color: var(--primary-500) !important;
}
.form-check-input:focus { box-shadow: var(--shadow-glow) !important; border-color: var(--primary-500) !important; }
.form-check-label { color: var(--text-primary); font-size: 13.5px; }
.input-group-text {
  background: var(--bg-surface-2) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-tertiary) !important;
}
.invalid-feedback {
  display: block;
  font-size: 12px !important;
  color: var(--danger-500) !important;
  margin-top: 4px;
}
.is-invalid, .form-control.is-invalid, .form-select.is-invalid {
  border-color: var(--danger-500) !important;
  background-image: none !important;
  padding-right: 12px !important;
}
.is-invalid:focus { box-shadow: 0 0 0 4px rgba(239,68,68,.15) !important; }

/* --- Bootstrap text/bg/border utility classes --- */
.text-muted { color: var(--text-tertiary) !important; }
.text-success { color: var(--success-700) !important; }
.text-danger  { color: var(--danger-700) !important; }
.text-warning { color: var(--warning-700) !important; }
.text-info    { color: var(--primary-700) !important; }
.text-primary { color: var(--primary-700) !important; }
.text-dark    { color: var(--text-primary) !important; }
.text-white   { color: #fff !important; }
:root.dark .text-success { color: var(--success-400) !important; }
:root.dark .text-danger  { color: var(--danger-400) !important; }
:root.dark .text-warning { color: var(--warning-400) !important; }
:root.dark .text-info    { color: var(--accent-400) !important; }
:root.dark .text-primary { color: var(--accent-400) !important; }
.bg-light   { background: var(--bg-surface-2) !important; }
.bg-white   { background: var(--bg-surface) !important; }
.bg-dark    { background: var(--text-primary) !important; color: var(--bg-surface) !important; }
.border { border-color: var(--border) !important; }
.border-top, .border-bottom, .border-start, .border-end { border-color: var(--border) !important; }

/* --- Dropdown menu bridge (Bootstrap) --- */
.dropdown-menu {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 6px !important;
  color: var(--text-primary);
}
.dropdown-item {
  color: var(--text-primary) !important;
  font-size: 13.5px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
}
.dropdown-divider { border-top-color: var(--border) !important; margin: 4px 0; }

/* --- DL (definition list) + hr bridge --- */
dl.row { font-size: 13.5px; }
dl.row dt { color: var(--text-tertiary) !important; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding-bottom: 6px; }
dl.row dd { color: var(--text-primary); padding-bottom: 10px; }
hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }

/* --- Bootstrap progress bar bridge --- */
.progress { background: var(--surface-alt) !important; border-radius: var(--r-full) !important; overflow: hidden; }
.progress-bar { background: var(--grad-primary) !important; border-radius: var(--r-full); }
.progress-bar.bg-success { background: var(--grad-success) !important; }
.progress-bar.bg-warning { background: var(--grad-warning) !important; }
.progress-bar.bg-danger  { background: var(--grad-danger)  !important; }

/* --- SweetAlert2 dark mode --- */
:root.dark .swal2-popup {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
}
:root.dark .swal2-title, :root.dark .swal2-html-container { color: var(--text-primary) !important; }

/* --- Pagination (laravel pagination) bridge --- */
.pagination .page-link {
  border: 1px solid var(--border) !important;
  background: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--r-sm) !important;
  margin: 0 2px;
  font-size: 13px;
}
.pagination .page-link:hover { background: var(--bg-surface-2) !important; color: var(--text-primary) !important; border-color: var(--border-strong) !important; }
.pagination .page-item.active .page-link {
  background: var(--grad-primary) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(14,165,233,.25);
}
.pagination .page-item.disabled .page-link {
  background: transparent !important;
  color: var(--text-muted) !important;
  border-color: transparent !important;
}

/* --- Legacy stat card pattern (border-left style) — normalize to our tokens --- */
.stat-card .stat-icon { background: var(--primary-100); }
.stat-card .stat-icon i { color: var(--primary-600); font-size: 20px; }
.stat-card .stat-value { font-family: 'Space Grotesk', sans-serif; font-size: 32px; font-weight: 700; color: var(--text-primary); line-height: 1; }
.stat-card .stat-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }

/* Removes legacy colored left border on any .stat-card with inline style (replaced by our top-accent hover) */
.stat-card[style*="border-left"] { border-left: 1px solid var(--border) !important; }

/* ============================================================
   MERIT LIST — rank medals + post cards
   ============================================================ */
.rank-medal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
  position: relative;
}
.rank-medal::after {
  content: ""; position: absolute; inset: -3px;
  border-radius: 50%;
  opacity: .35; filter: blur(6px); z-index: -1;
}
.rank-medal.gold   { background: linear-gradient(135deg, #FBBF24, #F59E0B); box-shadow: 0 2px 8px rgba(245,158,11,.4); }
.rank-medal.gold::after   { background: linear-gradient(135deg, #FBBF24, #F59E0B); }
.rank-medal.silver { background: linear-gradient(135deg, #CBD5E1, #94A3B8); box-shadow: 0 2px 8px rgba(148,163,184,.4); }
.rank-medal.silver::after { background: linear-gradient(135deg, #CBD5E1, #94A3B8); }
.rank-medal.bronze { background: linear-gradient(135deg, #FCA5A5, #D97706); box-shadow: 0 2px 8px rgba(217,119,6,.35); }
.rank-medal.bronze::after { background: linear-gradient(135deg, #FCA5A5, #D97706); }
.rank-medal.plain  {
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  width: auto; padding: 0 12px; height: 28px;
  border-radius: var(--r-full);
  box-shadow: none;
}
.rank-medal.plain::after { display: none; }

/* Merit post card (index) */
.merit-post-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex; flex-direction: column;
  gap: 12px;
  transition: all var(--med) var(--ease);
  height: 100%;
  box-shadow: var(--shadow-xs);
}
.merit-post-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary-300); transform: translateY(-2px); }
.merit-post-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.merit-post-card-title { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0; line-height: 1.3; }
.merit-post-card-meta { font-size: 12.5px; color: var(--text-tertiary); }
.merit-post-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px solid var(--border);
  margin-top: auto;
}

/* Merit search bar (hero) */
.merit-search-wrap {
  position: relative; z-index: 1;
  max-width: 480px; margin-top: 18px;
}
.merit-search-wrap input {
  width: 100%;
  height: 44px;
  padding: 0 16px 0 44px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-md);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  backdrop-filter: blur(8px);
  transition: all var(--fast) var(--ease);
}
.merit-search-wrap input::placeholder { color: rgba(255,255,255,.55); }
.merit-search-wrap input:focus {
  outline: none;
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 0 0 4px rgba(255,255,255,.12);
}
.merit-search-wrap svg {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  color: rgba(255,255,255,.6);
  pointer-events: none;
}

/* Warning count pill (used in security table) */
.warn-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  background: var(--warning-100);
  color: var(--warning-700);
  border: 1px solid rgba(251,191,36,.3);
}
:root.dark .warn-pill { color: var(--warning-400); }

/* ============================================================
   AUTH — split-screen login / register / forgot-password
   ============================================================ */
body.auth-body {
  background: var(--bg-surface);
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  margin: 0;
}

.auth-shell {
  display: flex;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--bg-surface);
}

/* LEFT — brand panel */
.auth-brand {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: var(--grad-hero);
  background-size: 200% 200%;
  animation: gradient-shift 20s ease infinite;
  color: #fff;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  height: 100dvh;
}
.auth-brand-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
  pointer-events: none;
}
.auth-brand > * { position: relative; z-index: 1; }

.auth-brand-top { display: flex; align-items: center; gap: 14px; }
.auth-brand-logo {
  width: 44px; height: 44px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.auth-brand-logo svg { width: 22px; height: 22px; color: #fff; }
.auth-brand-title { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.auth-brand-sub { font-size: 12px; color: rgba(255,255,255,.68); margin-top: 2px; }

.auth-brand-body { max-width: 480px; }
.auth-brand-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 36px;
  line-height: 1.18;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
  margin: 0 0 28px;
}
.auth-brand-headline .gradient-text { letter-spacing: -.02em; }

.auth-brand-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.auth-brand-features li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,.85);
  line-height: 1.5;
}
.auth-brand-features li svg {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px;
  color: #6EE7B7;
  filter: drop-shadow(0 0 8px rgba(52,211,153,.4));
}

.auth-brand-footer {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; color: rgba(255,255,255,.55);
}
.auth-brand-footer svg { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; color: #6EE7B7; }
.auth-brand-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.3); }

/* Decorative blobs (re-use hero-blob animations) */
.auth-brand .hero-blob-1 { width: 380px; height: 380px; top: -140px; right: -120px; }
.auth-brand .hero-blob-2 { width: 260px; height: 260px; bottom: -120px; left: 40%; }
.auth-brand .hero-blob-3 { width: 220px; height: 220px; top: 35%; left: 10%; }

/* RIGHT — form panel */
.auth-panel {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  height: 100vh;
  height: 100dvh;
  background: var(--bg-surface);
  position: relative;
  overflow: hidden;
}
.auth-panel-theme {
  position: absolute; top: 24px; right: 24px;
  z-index: 2;
}
.auth-panel-inner {
  width: 100%;
  max-width: 440px;
  padding: 0 16px;
}
.auth-panel-footer {
  position: absolute;
  bottom: 16px; left: 0; right: 0;
}

.auth-form-header { margin-bottom: 28px; }
.auth-form-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
.auth-form-sub {
  font-size: 14px;
  color: var(--text-tertiary);
  margin: 0;
}

.auth-panel-footer {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  padding-top: 16px;
}

/* Auth alerts */
.auth-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: 13.5px;
  margin-bottom: 16px;
}
.auth-alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.auth-alert-success { background: var(--success-100); border-color: rgba(52,211,153,.3); color: var(--success-700); }
.auth-alert-danger  { background: var(--danger-100);  border-color: rgba(248,113,113,.3); color: var(--danger-700); }
:root.dark .auth-alert-success { color: var(--success-400); }
:root.dark .auth-alert-danger  { color: var(--danger-400); }

/* Auth form primitives */
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-group { display: flex; flex-direction: column; gap: 6px; }
.auth-label {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
}
.auth-hint { font-size: 12px; color: var(--text-tertiary); }

.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-wrap .bi-lead {
  position: absolute; left: 12px;
  color: var(--text-muted);
  width: 16px; height: 16px;
  pointer-events: none;
}
.auth-input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 38px;
  font: inherit;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.auth-input::placeholder { color: var(--text-muted); }
.auth-input:hover { border-color: var(--primary-400); }
.auth-input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: var(--shadow-glow);
}
.auth-input.is-invalid { border-color: var(--danger-500); }
.auth-input.is-invalid:focus { box-shadow: 0 0 0 4px rgba(239,68,68,.15); }
.auth-input.has-trailing { padding-right: 44px; }

.auth-trailing-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  background: transparent; border: none;
  border-radius: var(--r-sm);
  color: var(--text-tertiary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.auth-trailing-btn:hover { background: var(--bg-surface-2); color: var(--text-primary); }

.auth-error {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--danger-500);
}
.auth-error svg { width: 13px; height: 13px; flex-shrink: 0; }

.auth-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.auth-check input { margin-top: 2px; accent-color: var(--primary-500); }

.auth-submit {
  width: 100%;
  height: 46px;
  background: var(--grad-primary);
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--r-md);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  box-shadow: 0 4px 12px rgba(14,165,233,.25);
}
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(14,165,233,.4); }
.auth-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.auth-submit svg { width: 16px; height: 16px; }
.auth-submit-secondary {
  background: var(--bg-surface); color: var(--text-primary);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}
.auth-submit-secondary:hover {
  background: var(--bg-surface-2); border-color: var(--primary-400);
  box-shadow: none;
}

.auth-meta-row { display: flex; align-items: center; justify-content: space-between; }
.auth-link {
  font-size: 13px; font-weight: 500; color: var(--primary-600);
  transition: color var(--fast) var(--ease);
}
.auth-link:hover { color: var(--primary-700); }
:root.dark .auth-link:hover { color: var(--accent-400); }

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--text-muted); font-size: 12px;
  margin: 8px 0;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.auth-footnote { text-align: center; font-size: 13px; color: var(--text-tertiary); }
.auth-footnote a { font-weight: 600; color: var(--primary-600); }
.auth-footnote a:hover { color: var(--primary-700); }

/* Responsive auth */
@media (max-width: 767px) {
  .auth-brand { display: none; }
  .auth-panel { padding: 32px 20px; }
  .auth-panel-theme { top: 16px; right: 16px; }
  .auth-panel-inner { padding: 0 8px; }
}

/* ============================================================
   FIX-UP PASS — visual bug fixes (load-order + dark-mode safety net)
   Appended last so they override Bootstrap, DataTables, and our
   own earlier rules where needed.
   ============================================================ */

/* ===== BUG 1 — kill link underlines inside sidebar/topbar/breadcrumb ===== */
.sidebar a,
.sidebar .nav-item,
.sidebar .nav-item:hover,
.sidebar .nav-item:focus,
.sidebar .brand,
.sidebar .brand a,
.topbar a,
.breadcrumb a,
.user-menu a,
.user-menu button { text-decoration: none !important; }

a { text-decoration: none; }
a:hover { text-decoration: none; }

/* ===== BUG 2 — sidebar toggle arrow always visible ===== */
.sidebar-toggle { color: var(--primary-600); }
.sidebar-toggle svg { stroke: currentColor; display: block; width: 14px; height: 14px; }
.sidebar-toggle:hover { color: #fff; }
:root.dark .sidebar-toggle {
  background: var(--bg-surface-2);
  border-color: var(--border-strong);
  color: var(--primary-400);
}
:root.dark .sidebar-toggle:hover {
  background: var(--primary-500);
  color: #fff;
  border-color: var(--primary-500);
}

/* ===== BUG 3 — sidebar three-zone flex (fixed top/bottom, scrollable middle) ===== */
.sidebar {
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  overflow: visible; /* override original overflow-y:auto; scrolling lives on .sidebar-nav */
}
.sidebar-top { flex-shrink: 0; }
.sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  margin: 0 -4px;
  padding: 4px 4px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(125,211,252,.2) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(125,211,252,.2); border-radius: 2px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-user { flex-shrink: 0; margin-top: 12px; }

/* ===== BUG 5 — main column scroll separation (so sidebar stays pinned) =====
   CRITICAL: lock html + body to viewport size so only .main scrolls. Without
   this you get DOUBLE scrollbars (one on the document, one on .main). */
html, body {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}
body.auth-body,
body.exam-body { height: 100vh; overflow: hidden; }
.app-shell { height: 100vh; overflow: hidden; }
.main {
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

/* ============================================================
   SCROLLBAR — cyan, slim, rounded (accent-400 = #22D3EE)
   Applies to every scrollable surface: .main, .sidebar-nav, tables,
   DataTables wrapper, dropdown menus, textareas. Scoped away from the
   exam runner which has its own dark aesthetic.
   ============================================================ */
/* WebKit / Blink */
.main::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
textarea::-webkit-scrollbar,
.dataTables_wrapper::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar,
[class*="overflow"]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.main::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track,
.dataTables_wrapper::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.dropdown-menu::-webkit-scrollbar-track,
[class*="overflow"]::-webkit-scrollbar-track {
  background: transparent;
}
.main::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb,
.dataTables_wrapper::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.dropdown-menu::-webkit-scrollbar-thumb,
[class*="overflow"]::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(34,211,238,.45), rgba(14,165,233,.55));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 150ms ease;
}
.main::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover,
.dataTables_wrapper::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.dropdown-menu::-webkit-scrollbar-thumb:hover,
[class*="overflow"]::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #22D3EE, #0EA5E9);
  background-clip: padding-box;
}
.main::-webkit-scrollbar-corner { background: transparent; }

/* Firefox */
.main,
.table-responsive,
textarea,
.dataTables_wrapper,
.modal-body,
.dropdown-menu,
[class*="overflow"] {
  scrollbar-width: thin;
  scrollbar-color: rgba(34,211,238,.5) transparent;
}

/* Dark-mode scrollbar: slightly more saturated so it stays visible on dark bg */
:root.dark .main::-webkit-scrollbar-thumb,
:root.dark .table-responsive::-webkit-scrollbar-thumb,
:root.dark textarea::-webkit-scrollbar-thumb,
:root.dark .dataTables_wrapper::-webkit-scrollbar-thumb,
:root.dark .modal-body::-webkit-scrollbar-thumb,
:root.dark .dropdown-menu::-webkit-scrollbar-thumb,
:root.dark [class*="overflow"]::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(34,211,238,.55), rgba(14,165,233,.65));
  background-clip: padding-box;
}
:root.dark .main,
:root.dark .table-responsive,
:root.dark textarea,
:root.dark .dataTables_wrapper,
:root.dark .modal-body,
:root.dark .dropdown-menu,
:root.dark [class*="overflow"] {
  scrollbar-color: rgba(34,211,238,.6) transparent;
}

/* ===== BUG 6 — body no-scroll helper for mobile drawer ===== */
body.no-scroll { overflow: hidden; }

/* ============================================================
   BUG 4 — DARK MODE SAFETY NET
   Catches every element Bootstrap/DataTables hardcodes to white.
   ============================================================ */
:root.dark body,
:root.dark .main,
:root.dark .content,
:root.dark .container,
:root.dark .container-fluid {
  background: var(--bg-app) !important;
  color: var(--text-primary);
}

:root.dark .card,
:root.dark .modal-content,
:root.dark .dropdown-menu,
:root.dark .popover,
:root.dark .tooltip-inner,
:root.dark .offcanvas,
:root.dark .list-group-item,
:root.dark .accordion-item,
:root.dark .accordion-button,
:root.dark .toast,
:root.dark .chart-card,
:root.dark .stat-card,
:root.dark .section-card,
:root.dark .panel,
:root.dark .nav-tabs,
:root.dark .nav-pills,
:root.dark .tab-content,
:root.dark .tab-pane,
:root.dark .merit-post-card,
:root.dark .post-card,
:root.dark .data-card,
:root.dark .kpi-card,
:root.dark .timeline-card,
:root.dark .geo-card {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

:root.dark .table,
:root.dark .table > :not(caption) > * > *,
:root.dark table,
:root.dark table td,
:root.dark table th,
:root.dark .data-table tbody td,
:root.dark .data-table thead th {
  background-color: transparent !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
:root.dark .table thead th,
:root.dark table thead th,
:root.dark .data-table thead th {
  background: var(--bg-surface-2) !important;
  color: var(--text-tertiary) !important;
}
:root.dark .table-striped tbody tr:nth-of-type(odd) > * {
  background-color: rgba(255,255,255,0.02) !important;
}
:root.dark .table-hover tbody tr:hover > *,
:root.dark .data-table tbody tr:hover td {
  background: var(--bg-surface-2) !important;
}

:root.dark .form-control,
:root.dark .form-select,
:root.dark input[type="text"],
:root.dark input[type="email"],
:root.dark input[type="password"],
:root.dark input[type="number"],
:root.dark input[type="search"],
:root.dark input[type="tel"],
:root.dark input[type="url"],
:root.dark input[type="date"],
:root.dark select,
:root.dark textarea {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}
:root.dark .form-control::placeholder,
:root.dark input::placeholder,
:root.dark textarea::placeholder { color: var(--text-muted) !important; }
:root.dark .form-control:focus,
:root.dark input:focus,
:root.dark select:focus,
:root.dark textarea:focus {
  background: var(--bg-surface) !important;
  border-color: var(--primary-500) !important;
  box-shadow: var(--shadow-glow) !important;
  color: var(--text-primary) !important;
}
:root.dark .input-group-text {
  background: var(--bg-surface-2) !important;
  color: var(--text-tertiary) !important;
  border-color: var(--border-strong) !important;
}

:root.dark .btn-light,
:root.dark .btn-outline-secondary,
:root.dark .btn-default,
:root.dark .btn-secondary {
  background: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}

:root.dark .dropdown-item { color: var(--text-secondary) !important; }
:root.dark .dropdown-item:hover,
:root.dark .dropdown-item:focus {
  background: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
}
:root.dark .dropdown-divider { border-color: var(--border) !important; }

/* DataTables dark */
:root.dark .dataTables_wrapper,
:root.dark .dataTables_wrapper .dataTables_length,
:root.dark .dataTables_wrapper .dataTables_filter,
:root.dark .dataTables_wrapper .dataTables_info,
:root.dark .dataTables_wrapper .dataTables_paginate { color: var(--text-secondary) !important; }
:root.dark .dataTables_wrapper .dataTables_length select,
:root.dark .dataTables_wrapper .dataTables_filter input {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}
:root.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}
:root.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
:root.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--grad-primary) !important;
  color: #fff !important;
  border: none !important;
}
:root.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--primary-400) !important;
}
:root.dark div.dt-buttons .btn {
  background: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}
:root.dark div.dt-buttons .btn:hover { background: var(--bg-surface) !important; border-color: var(--primary-400) !important; }

/* Modal + backdrop dark */
:root.dark .modal-header,
:root.dark .modal-footer { border-color: var(--border) !important; }
:root.dark .modal-backdrop.show { opacity: 0.7; }

/* SweetAlert dark */
:root.dark .swal2-popup { background: var(--bg-surface) !important; color: var(--text-primary) !important; }
:root.dark .swal2-title, :root.dark .swal2-html-container { color: var(--text-primary) !important; }

/* Alerts dark */
:root.dark .alert { border-color: var(--border) !important; }
:root.dark .alert-info    { background: rgba(14,165,233,.1) !important;  color: var(--primary-300) !important; }
:root.dark .alert-success { background: rgba(16,185,129,.1) !important;  color: var(--success-400) !important; }
:root.dark .alert-warning { background: rgba(245,158,11,.1) !important;  color: var(--warning-400) !important; }
:root.dark .alert-danger  { background: rgba(239,68,68,.1) !important;   color: var(--danger-400) !important; }

/* Bootstrap utility bg/text in dark */
:root.dark .bg-white,
:root.dark .bg-light {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
}
:root.dark .text-dark      { color: var(--text-primary) !important; }
:root.dark .text-muted     { color: var(--text-tertiary) !important; }
:root.dark .text-secondary { color: var(--text-secondary) !important; }
:root.dark .border,
:root.dark .border-top,
:root.dark .border-bottom,
:root.dark .border-start,
:root.dark .border-end { border-color: var(--border) !important; }

/* Any inline style="background-color: #fff" or white — neutralize in dark */
:root.dark [style*="background: #fff"],
:root.dark [style*="background:#fff"],
:root.dark [style*="background: white"],
:root.dark [style*="background-color: #fff"],
:root.dark [style*="background-color:#fff"],
:root.dark [style*="background-color: white"] {
  background: var(--bg-surface) !important;
  color: var(--text-primary);
}

/* Exam runner stays dark regardless of the root .dark class — keep its
   forced-dark look. We never rewrite #main-area inside exam-body. */
body.exam-body #main-area { background: #fff; }
body.exam-body #main-area * { /* no-op guard */ }

/* Mobile: ensure sidebar keeps its scrollable-middle behavior inside drawer */
@media (max-width: 900px) {
  .sidebar { position: fixed; height: 100vh; top: 0; left: 0; }
  .main { height: 100vh; }
}

/* ============================================================
   STAT CARD ICON FIX — override any Bootstrap / bridge bleed-through.
   Applies to both class names: the user-spec `.stat-card-icon` and the
   existing markup's `.stat-icon`. This way we don't have to rename every
   dashboard Blade to make the gradients render solid.
   ============================================================ */
.stat-icon,
.stat-card-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--r-lg) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(14,165,233,0.2);
  position: relative;
  overflow: hidden;
}

.stat-icon svg,
.stat-card-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
  fill: none !important;
  stroke-width: 2 !important;
  position: relative;
  z-index: 1;
}

.stat-icon svg *,
.stat-card-icon svg * {
  stroke: #ffffff !important;
}

/* Gradient variants — solid vivid tiles */
.stat-icon-primary { background: var(--grad-primary) !important; box-shadow: 0 4px 14px rgba(14,165,233,0.35) !important; }
.stat-icon-success { background: var(--grad-success) !important; box-shadow: 0 4px 14px rgba(16,185,129,0.35) !important; }
.stat-icon-warning { background: var(--grad-warning) !important; box-shadow: 0 4px 14px rgba(245,158,11,0.35) !important; }
.stat-icon-danger  { background: var(--grad-danger)  !important; box-shadow: 0 4px 14px rgba(239,68,68,0.35) !important; }
.stat-icon-purple  { background: var(--grad-purple)  !important; box-shadow: 0 4px 14px rgba(139,92,246,0.35) !important; }
.stat-icon-pink    { background: var(--grad-pink)    !important; box-shadow: 0 4px 14px rgba(236,72,153,0.35) !important; }

/* Subtle sheen on top of the gradient */
.stat-icon::before,
.stat-card-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
  pointer-events: none;
}

/* Kill any Bootstrap / Font Awesome bleed that could wash out the tile */
.stat-icon i, .stat-icon .bi, .stat-icon .fa, .stat-icon .fas, .stat-icon .far, .stat-icon .svg-inline--fa,
.stat-card-icon i, .stat-card-icon .bi, .stat-card-icon .fa, .stat-card-icon .fas, .stat-card-icon .far, .stat-card-icon .svg-inline--fa {
  color: #ffffff !important;
  font-size: 22px !important;
}

/* Dark-mode shadow bump so the tiles still pop against the darker surface */
:root.dark .stat-icon-primary { box-shadow: 0 4px 18px rgba(14,165,233,0.45) !important; }
:root.dark .stat-icon-success { box-shadow: 0 4px 18px rgba(16,185,129,0.45) !important; }
:root.dark .stat-icon-warning { box-shadow: 0 4px 18px rgba(245,158,11,0.45) !important; }
:root.dark .stat-icon-danger  { box-shadow: 0 4px 18px rgba(239,68,68,0.45) !important; }

/* Also neutralize the legacy tone-* pale variants ONLY where they coexist with
   a gradient variant. A card with just `stat-icon tone-primary` (no gradient
   variant class) keeps the soft pale look, which is used by the info-row
   accent icons. A card with `stat-icon stat-icon-primary` stays gradient. */

/* ============================================================
   CLICKABLE CARD PATTERN — for dashboards.
   Implements a "stretched link" so the whole card is a navigable anchor
   while inner buttons / dropdowns / links still work. Keyboard-friendly:
   real <a> under the hood, Tab reaches it, Enter activates.
   ============================================================ */

.stat-card-clickable,
.chart-card-clickable,
.activity-item-clickable,
.perf-bar-clickable,
.geo-row-clickable {
  position: relative;
  cursor: pointer;
  transition: transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}

.stat-card-clickable:hover,
.chart-card-clickable:hover,
.activity-item-clickable:hover,
.perf-bar-clickable:hover,
.geo-row-clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-400);
}

.stat-card-clickable:focus-within,
.chart-card-clickable:focus-within,
.activity-item-clickable:focus-within {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: var(--shadow-glow), var(--shadow-md);
}

/* The invisible full-card link overlay (stretched link pattern) */
.card-link-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -9999px;
  overflow: hidden;
  border-radius: inherit;
  background: transparent;
}
.card-link-overlay:focus { outline: none; }

/* Direct children of the clickable card sit above the overlay */
.stat-card-clickable > *:not(.card-link-overlay),
.chart-card-clickable > *:not(.card-link-overlay),
.activity-item-clickable > *:not(.card-link-overlay),
.perf-bar-clickable > *:not(.card-link-overlay),
.geo-row-clickable > *:not(.card-link-overlay) {
  position: relative;
  z-index: 2;
  pointer-events: none; /* clicks fall through to the overlay by default */
}

/* But any real interactive child (button, inner link, dropdown) stays clickable
   and sits above the overlay. Keeps "Edit" / "Delete" / dropdown menus working. */
.stat-card-clickable button,
.stat-card-clickable a:not(.card-link-overlay),
.stat-card-clickable .dropdown,
.stat-card-clickable .btn,
.stat-card-clickable input,
.stat-card-clickable select,
.chart-card-clickable button,
.chart-card-clickable a:not(.card-link-overlay),
.chart-card-clickable .dropdown,
.chart-card-clickable .btn,
.activity-item-clickable button,
.activity-item-clickable a:not(.card-link-overlay) {
  pointer-events: auto;
  position: relative;
  z-index: 3;
}

/* Arrow affordance — fades in on hover so the card visibly announces
   itself as a link without being noisy at rest. */
.stat-card-clickable::after {
  content: "→";
  position: absolute;
  top: 12px; right: 12px;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-600);
  background: var(--primary-100);
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  transform: translateX(-4px);
  transition: all var(--fast) var(--ease);
  z-index: 2;
  pointer-events: none;
}
.stat-card-clickable:hover::after { opacity: 1; transform: translateX(0); }
:root.dark .stat-card-clickable::after { background: rgba(14,165,233,.2); color: var(--accent-400); }

/* Respect prefers-reduced-motion — no lift, no transition */
@media (prefers-reduced-motion: reduce) {
  .stat-card-clickable,
  .chart-card-clickable,
  .activity-item-clickable,
  .perf-bar-clickable,
  .geo-row-clickable { transition: none; }
  .stat-card-clickable:hover,
  .chart-card-clickable:hover,
  .activity-item-clickable:hover,
  .perf-bar-clickable:hover,
  .geo-row-clickable:hover { transform: none; }
  .stat-card-clickable::after { transition: none; }
}

/* ============================================================
   STAT CARD — compact vertical rhythm
   The original spec padding + gradient-bg + progress-footer combo made
   cards ~190–210px tall. Trim padding, reduce icon → value spacing,
   shrink the value font, collapse the footer when the content is small.
   ============================================================ */
.stat-card {
  padding: 10px 14px !important;
  min-height: 0 !important;
  /* Pin content to the top so grid-stretch (`align-items: stretch` is the
     default on grid items) can never bottom-align the stack. Without this
     the Candidates card — the only one with a progress bar in the footer —
     is naturally taller than its siblings, and the stretch lifts the
     siblings' height but leaves their content bottom-aligned because they
     were block-flow. Flex + flex-start pins the stack to the top of
     whatever final height the grid resolves to. */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}
.stat-card .stat-header,
.stat-card .stat-card-head {
  margin-bottom: 4px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
.stat-icon,
.stat-card-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--r-md) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.08) !important;
}
.stat-icon svg,
.stat-card-icon svg {
  width: 18px !important;
  height: 18px !important;
}
.stat-card .stat-label {
  font-size: 10px !important;
  margin-bottom: 1px !important;
  line-height: 1.3 !important;
}
.stat-card .stat-value {
  font-size: 22px !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
}
.stat-card .stat-value-unit { font-size: 11px !important; }
.stat-card .stat-footer {
  padding-top: 4px !important;
  gap: 8px !important;
  border-top: none !important;
}
.stat-card .stat-progress { height: 3px !important; }
.stat-card .sparkline { height: 16px !important; }
.stat-card .stat-foot-text { font-size: 10px !important; line-height: 1.2 !important; }
.stat-card .stat-trend {
  font-size: 10px !important;
  padding: 2px 6px !important;
}

/* Smaller arrow affordance to match compact card */
.stat-card-clickable::after {
  top: 10px !important;
  right: 10px !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 11px !important;
}

/* Stat grid — tighter gap between cards */
.stats-grid { gap: 12px !important; }
.ds-grid-3, .ds-grid-4 { gap: 12px !important; }


/* ============================================================
   APP FOOTER — global (fed by Super Admin settings)
   ============================================================ */
.app-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-tertiary);
  background: var(--bg-surface);
}
.app-footer-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.app-footer-links a { color: var(--text-secondary); }
.app-footer-links a:hover { color: var(--primary-600); }

/* Legacy sidebar-search wrapper (search has moved to topbar). Keep the
   selector defined as a no-op so any cached markup doesn't break layout. */
.sidebar-search { position: relative; }

/* ============================================================
   AUDIT LOG — enterprise monitoring UI
   ============================================================ */
.al-page { display: flex; flex-direction: column; gap: 16px; }
.al-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.al-header-actions .form-check-label { color: var(--text-tertiary); }

/* Stats bar */
.al-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 991.98px) { .al-stats { grid-template-columns: repeat(2, 1fr); } }
.al-stat {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-height: 74px;
}
.al-stat-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff;
  flex-shrink: 0;
}
.al-stat-value { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700; line-height: 1; color: var(--text-primary); }
.al-stat-label { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
.al-stat-primary .al-stat-icon { background: var(--grad-primary); }
.al-stat-danger  .al-stat-icon { background: var(--grad-danger); }
.al-stat-warning .al-stat-icon { background: var(--grad-warning); }
.al-stat-success .al-stat-icon { background: var(--grad-success); }

/* Filter panel */
.al-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.al-filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.al-field { display: flex; flex-direction: column; flex: 1 1 160px; min-width: 130px; }
.al-field-actions { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 6px; }
.al-filter-search {
  position: relative; flex: 2 1 360px; min-width: 260px;
}
.al-filter-search input { padding: 6px 48px 6px 30px; }
.al-filter-search > svg {
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 13px; height: 13px;
  color: var(--text-tertiary);
  pointer-events: none;
}
.al-filter-search > kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font: 600 10px/1 'JetBrains Mono', monospace;
  padding: 2px 5px; border-radius: 4px;
  background: var(--bg-surface-2); color: var(--text-tertiary);
  border: 1px solid var(--border);
}

/* Range chips (quick presets) */
.al-range { display: flex; flex-wrap: wrap; gap: 4px; }
.al-range-custom { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.al-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: 11.5px; font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--fast) var(--ease);
  text-decoration: none !important;
}
.al-chip:hover { border-color: var(--primary-400); color: var(--primary-700); }
.al-chip.is-active {
  background: var(--grad-primary); border-color: transparent; color: #fff;
  box-shadow: 0 4px 12px rgba(14,165,233,.3);
}
.al-chip.is-filter { background: var(--primary-100); color: var(--primary-700); border-color: transparent; }
:root.dark .al-chip.is-filter { background: rgba(34,211,238,.18); color: var(--accent-400); }
.al-chip-x {
  background: transparent; border: none; color: inherit; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0; margin-left: 2px;
}

.al-presets { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; border-top: 1px dashed var(--border); }

.al-active-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.al-sev-primary, .al-sev-critical { --sev: #EF4444; }
.al-sev-high     { --sev: #F59E0B; }
.al-sev-medium   { --sev: #EAB308; }
.al-sev-normal   { --sev: #10B981; }

/* Analytics (collapsible details) */
.al-analytics { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.al-analytics > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--text-primary);
  border-radius: var(--r-md);
}
.al-analytics > summary::-webkit-details-marker { display: none; }
.al-analytics[open] > summary { border-bottom: 1px solid var(--border); }
.al-analytics-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px;
}
@media (max-width: 1199.98px) { .al-analytics-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px)  { .al-analytics-grid { grid-template-columns: 1fr; } }
.al-card {
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.al-card-wide { grid-column: 1 / -1; }
/* Chart wrapper — CRITICAL: explicit height breaks the Chart.js +
   responsive + maintainAspectRatio:false infinite-resize loop.
   Without this the canvas grows every animation frame and the page
   scrolls infinitely. */
.al-chart-wrap {
  position: relative;
  width: 100%;
  height: 200px;
}
.al-chart-wrap-tall { height: 240px; }
.al-chart-wrap > canvas {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
.al-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.al-card-title { font-size: 12.5px; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: .06em; margin: 0; }

.al-gauge { display: flex; flex-direction: column; gap: 6px; }
.al-gauge-value { font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 700; color: var(--text-primary); line-height: 1; }
.al-gauge-bar { height: 8px; background: var(--bg-surface); border-radius: 999px; overflow: hidden; }
.al-gauge-bar span { display: block; height: 100%; background: var(--grad-success); }
.al-gauge-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-tertiary); }

.al-toplist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.al-toplist li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; font-size: 13px; }
.al-toplist-name { font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-toplist-count { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-tertiary); }

/* Heatmap */
.al-heatmap { display: flex; flex-direction: column; gap: 2px; overflow-x: auto; }
.al-heatmap-row { display: flex; align-items: center; gap: 2px; }
.al-heatmap-label { width: 36px; font-size: 10.5px; color: var(--text-tertiary); flex-shrink: 0; text-align: right; padding-right: 4px; }
.al-heatmap-cell {
  width: 14px; height: 14px; flex-shrink: 0; border-radius: 2px;
  background: rgba(14,165,233, calc(0.08 + var(--al-a) * 0.85));
}

/* Security insights */
.al-insight {
  background: linear-gradient(135deg, rgba(239,68,68,.08), rgba(245,158,11,.06));
  border: 1px solid rgba(239,68,68,.25);
  border-radius: var(--r-md);
  padding: 12px 16px;
}
.al-insight-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.al-insight-score { margin-left: auto; font-size: 12px; color: var(--text-tertiary); }
.al-insight-score em { font-style: normal; font-weight: 700; color: var(--danger-500); font-size: 15px; }
.al-insight-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.al-insight-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Table */
.al-table-card { padding: 0; }
.al-table-card > .al-card-head { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.al-table-scroll { overflow-x: auto; }
.al-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.al-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-surface-2);
  padding: 10px 14px;
  text-align: left;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border);
}
.al-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.al-row { cursor: pointer; transition: background var(--fast) var(--ease); }
.al-row:nth-child(even) { background: rgba(0,0,0,.015); }
:root.dark .al-row:nth-child(even) { background: rgba(255,255,255,.02); }
.al-row:hover, .al-row:focus { outline: none; background: var(--primary-50); }
:root.dark .al-row:hover, :root.dark .al-row:focus { background: rgba(34,211,238,.08); }

/* Left-border severity accent on each row */
.al-sev-row-critical td:first-child { box-shadow: inset 3px 0 0 #EF4444; }
.al-sev-row-high     td:first-child { box-shadow: inset 3px 0 0 #F59E0B; }
.al-sev-row-medium   td:first-child { box-shadow: inset 3px 0 0 #EAB308; }
.al-sev-row-normal   td:first-child { box-shadow: inset 3px 0 0 #10B981; }
.al-sev-row-critical { background: rgba(239,68,68,.04); }
.al-sev-row-high     { background: rgba(245,158,11,.04); }

.al-cell-when time { color: var(--text-secondary); }

/* Severity badge pill */
.al-sev-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.al-sev-badge.al-sev-critical { background: rgba(239,68,68,.15);   color: #B91C1C; }
.al-sev-badge.al-sev-high     { background: rgba(245,158,11,.18);  color: #B45309; }
.al-sev-badge.al-sev-medium   { background: rgba(234,179,8,.18);   color: #A16207; }
.al-sev-badge.al-sev-normal   { background: rgba(16,185,129,.18);  color: #047857; }
:root.dark .al-sev-badge.al-sev-critical { color: #FCA5A5; }
:root.dark .al-sev-badge.al-sev-high     { color: #FCD34D; }
:root.dark .al-sev-badge.al-sev-medium   { color: #FDE68A; }
:root.dark .al-sev-badge.al-sev-normal   { color: #6EE7B7; }

/* Action verb colour */
.al-verb { font-weight: 600; color: var(--text-primary); }
.al-verb-auth        { color: var(--primary-700); }
.al-verb-create      { color: #047857; }
.al-verb-update      { color: #B45309; }
.al-verb-destructive { color: #B91C1C; }
.al-verb-read        { color: var(--text-secondary); }
.al-verb-security    { color: #C2410C; }
:root.dark .al-verb-auth { color: var(--accent-400); }
:root.dark .al-verb-create { color: #6EE7B7; }
:root.dark .al-verb-update { color: #FCD34D; }
:root.dark .al-verb-destructive { color: #FCA5A5; }
:root.dark .al-verb-security { color: #FDBA74; }

.al-action-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11px; flex-wrap: wrap; }
.al-action-code { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); background: var(--bg-surface-2); padding: 1px 5px; border-radius: 3px; }
.al-flag { font-size: 11px; cursor: default; }
.al-flag-failed { color: #EF4444; }
.al-flag-after_hours { color: var(--text-tertiary); }
.al-flag-bulk { color: #F59E0B; }
.al-flag-privilege { color: #EAB308; }
.al-flag-sensitive { color: var(--primary-600); }

/* Actor cell */
.al-actor { display: flex; align-items: center; gap: 8px; }
.al-actor-av {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--grad-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  flex-shrink: 0;
}
.al-actor-name { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.al-actor-role { display: block; font-size: 11px; }

.al-link {
  background: none; border: none; padding: 0;
  color: var(--primary-600); font-family: inherit; cursor: pointer;
  text-align: left;
}
.al-link:hover { color: var(--primary-700); text-decoration: underline; }
:root.dark .al-link { color: var(--accent-400); }

/* UA + status glyphs */
.al-ua { font-size: 16px; cursor: default; }
.al-ua-unknown, .al-ua-cli { opacity: .6; }
.al-status { font-size: 14px; font-weight: 700; }
.al-status-ok     { color: #10B981; }
.al-status-failed { color: #EF4444; }

.al-pagination { display: flex; justify-content: center; padding: 12px 16px; }

.al-empty { text-align: center; padding: 48px 16px; color: var(--text-tertiary); }
.al-empty svg { color: var(--text-muted); margin-bottom: 10px; }

/* Drawer */
.al-drawer { --bs-offcanvas-width: 520px; background: var(--bg-surface); color: var(--text-primary); }
.al-drawer-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.al-drawer-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.al-drawer-actor { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.al-copy { background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: 4px; font-size: 10px; padding: 1px 5px; cursor: pointer; margin-left: 6px; }
.al-pre { background: var(--bg-surface-2); border-radius: 6px; padding: 8px; font-size: 11px; max-height: 180px; overflow: auto; margin: 4px 0 0; }
.al-diff summary { cursor: pointer; font-weight: 600; margin-top: 10px; }
.al-diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.al-related { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }

/* Skeleton */
.al-skel {
  height: 14px; margin-bottom: 8px;
  background: linear-gradient(90deg, var(--bg-surface-2) 0%, rgba(255,255,255,.08) 50%, var(--bg-surface-2) 100%);
  background-size: 200% 100%;
  animation: al-shimmer 1.2s infinite;
  border-radius: 4px;
}
@keyframes al-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Live indicator */
.al-live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-muted); margin-left: 2px;
}
body.al-live-on .al-live-dot {
  background: #10B981;
  box-shadow: 0 0 0 0 rgba(16,185,129, .6);
  animation: al-pulse 1.6s infinite;
}
@keyframes al-pulse {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129, .6); }
  70% { box-shadow: 0 0 0 8px rgba(16,185,129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129, 0); }
}

/* Toast */
.al-toast {
  position: fixed; right: 16px; bottom: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 10px 14px; font-size: 13px;
  color: var(--text-primary);
  box-shadow: 0 10px 28px rgba(0,0,0,.2);
  z-index: 1080;
}

/* ============================================================
   AVATAR IMAGE SUPPORT
   When an avatar slot has .has-image, its <img> fills the circle
   and the text initials branch isn't rendered.
   ============================================================ */
.user-avatar.has-image,
.user-avatar-sm.has-image,
.user-menu-avatar.has-image {
  padding: 0;
  overflow: hidden;
  background: var(--bg-surface-2);
}
.user-avatar.has-image > img,
.user-avatar-sm.has-image > img,
.user-menu-avatar.has-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* ============================================================
   TOPBAR SEARCH (relocated from sidebar)
   ============================================================ */
.topbar-search {
  position: relative;
  width: min(420px, 92vw);
}
.topbar-search input {
  width: 100%;
  height: 36px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0 56px 0 34px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.topbar-search input::placeholder { color: var(--text-tertiary); }
.topbar-search input:hover { border-color: var(--primary-300); }
.topbar-search input:focus {
  outline: none;
  background: var(--bg-surface);
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(14,165,233,.18);
}
.topbar-search > svg {
  position: absolute; left: 11px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--text-tertiary);
  pointer-events: none;
}
.topbar-search > kbd {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  padding: 2px 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-tertiary);
  pointer-events: none;
}
:root.dark .topbar-search input { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); color: #fff; }
:root.dark .topbar-search input::placeholder { color: rgba(255,255,255,.45); }
:root.dark .topbar-search input:hover { border-color: var(--accent-400); }
:root.dark .topbar-search input:focus {
  background: rgba(255,255,255,.06);
  border-color: var(--accent-400);
  box-shadow: 0 0 0 3px rgba(34,211,238,.18);
}
:root.dark .topbar-search > kbd {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.6);
}
@media (max-width: 767.98px) { .topbar-search { display: none; } }
.topbar-search-trigger { width: 36px; height: 36px; }

/* ============================================================
   GLOBAL SEARCH PANEL — re-anchored under the topbar input,
   high contrast in both light + dark modes.
   ============================================================ */
.global-search-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  width: min(420px, 92vw);
  max-height: 70vh;
  overflow-y: auto;
  margin-top: 0;
  padding: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow:
    0 18px 48px rgba(15, 23, 42, .18),
    0 4px 12px rgba(15, 23, 42, .08);
  z-index: 1050;
}
:root.dark .global-search-panel {
  background: #0F172A;
  border-color: rgba(34,211,238,.18);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .55),
    0 4px 14px rgba(0, 0, 0, .35),
    inset 0 0 0 1px rgba(255,255,255,.02);
}
.modal .global-search-panel {
  position: static;
  width: 100%;
  max-height: 55vh;
  margin-top: 6px;
  box-shadow: none;
  border: 1px solid var(--border);
}

.gs-results { display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.gs-group { display: flex; flex-direction: column; }
.gs-group + .gs-group { border-top: 1px solid var(--border); padding-top: 6px; margin-top: 2px; }
:root.dark .gs-group + .gs-group { border-top-color: rgba(255,255,255,.06); }

.gs-group-head {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 8px 10px 4px;
}
:root.dark .gs-group-head { color: rgba(255,255,255,.55); }

.gs-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  color: var(--text-primary);
  text-decoration: none !important;
  cursor: pointer;
  transition: background var(--fast) var(--ease),
              color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.gs-item:hover {
  background: var(--primary-50);
  color: var(--primary-700);
}
.gs-item.is-active {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(14,165,233,.35);
  transform: translateX(2px);
}
.gs-item.is-active .gs-item-sub { color: rgba(255,255,255,.85); }
.gs-item.is-active .gs-item-icon { background: rgba(255,255,255,.18); color: #fff; }
.gs-item.is-active mark { background: rgba(255,255,255,.28); color: #fff; }

:root.dark .gs-item { color: #E2E8F0; }
:root.dark .gs-item:hover { background: rgba(34,211,238,.12); color: #fff; }
:root.dark .gs-item.is-active {
  background: linear-gradient(135deg, rgba(14,165,233,.95), rgba(6,182,212,.95));
  box-shadow: 0 8px 22px rgba(14,165,233,.45);
}

.gs-item-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: var(--primary-100);
  color: var(--primary-700);
  font-size: 15px; font-weight: 600;
}
:root.dark .gs-item-icon { background: rgba(34,211,238,.15); color: var(--accent-400); }

.gs-item-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gs-item-title {
  font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gs-item-title mark {
  background: rgba(14,165,233,.18);
  color: inherit;
  padding: 0 2px; border-radius: 3px;
  font-weight: 700;
}
:root.dark .gs-item-title mark { background: rgba(34,211,238,.28); color: #fff; }

.gs-item-sub {
  font-size: 11.5px; color: var(--text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
:root.dark .gs-item-sub { color: rgba(255,255,255,.55); }

.gs-note { padding: 18px 12px; font-size: 12.5px; color: var(--text-tertiary); text-align: center; }
:root.dark .gs-note { color: rgba(255,255,255,.6); }
.gs-note-error { color: var(--danger-500); }
:root.dark .gs-note-error { color: var(--danger-400); }

.global-search-panel::-webkit-scrollbar { width: 6px; }
.global-search-panel::-webkit-scrollbar-thumb { background: rgba(14,165,233,.35); border-radius: 3px; }
:root.dark .global-search-panel::-webkit-scrollbar-thumb { background: rgba(34,211,238,.45); }

/* ============================================================
   BOOTSTRAP DROPDOWN — sharper option visibility (both modes)
   ============================================================ */
.dropdown-menu {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-md) !important;
  box-shadow:
    0 18px 48px rgba(15, 23, 42, .15),
    0 4px 12px rgba(15, 23, 42, .08) !important;
  padding: 6px !important;
  min-width: 200px;
}
:root.dark .dropdown-menu {
  background: #0F172A !important;
  border-color: rgba(34,211,238,.18) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .55),
    0 4px 14px rgba(0, 0, 0, .35),
    inset 0 0 0 1px rgba(255,255,255,.02) !important;
}

.dropdown-item {
  color: var(--text-primary) !important;
  font-size: 13.5px;
  font-weight: 500;
  padding: 9px 12px !important;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--primary-50) !important;
  color: var(--primary-700) !important;
}
.dropdown-item.active,
.dropdown-item:active {
  background: var(--grad-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(14,165,233,.3);
}
.dropdown-item:disabled,
.dropdown-item.disabled {
  color: var(--text-muted) !important;
  background: transparent !important;
  cursor: not-allowed;
}
.dropdown-divider {
  border-top: 1px solid var(--border) !important;
  margin: 6px -2px !important;
  opacity: .8;
}
:root.dark .dropdown-item { color: #E2E8F0 !important; }
:root.dark .dropdown-item:hover,
:root.dark .dropdown-item:focus {
  background: rgba(34,211,238,.14) !important;
  color: #FFFFFF !important;
}
:root.dark .dropdown-item.active,
:root.dark .dropdown-item:active {
  background: linear-gradient(135deg, rgba(14,165,233,.95), rgba(6,182,212,.95)) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(14,165,233,.4);
}
:root.dark .dropdown-divider { border-color: rgba(255,255,255,.08) !important; }

.dropdown-header {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary) !important;
  padding: 8px 12px 4px !important;
}
:root.dark .dropdown-header { color: rgba(255,255,255,.55) !important; }

/* ============================================================
   SKELETON LOADERS (B-9)
   ============================================================
   Lightweight shimmer placeholders shown while async content
   (charts, slow images, deferred fetches) is initialising. The
   `.skeleton` element auto-hides when its `.skel-target` sibling
   reports `data-loaded="true"`. For Chart.js canvases the chart
   init code sets that attribute after `new Chart(...)` returns.
   Fully theme-aware via existing tokens — works in dark mode. */
.skeleton {
  position: relative;
  background: linear-gradient(
    90deg,
    var(--bg-surface-2) 0%,
    var(--surface-alt) 50%,
    var(--bg-surface-2) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--r-md, 8px);
  animation: skeleton-shimmer 1.4s infinite linear;
  pointer-events: none;
}
:root.dark .skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 200% 100%;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Chart-canvas skeleton: drop a `.skel-chart` next to the canvas
   inside a `.chart-skel-wrap`. The skeleton fills the same box and
   fades out the moment the chart-init code adds `.is-loaded` to
   the wrapper. No-script users see the skeleton indefinitely
   (acceptable — Chart.js needs JS regardless). */
.chart-skel-wrap { position: relative; }
.chart-skel-wrap .skel-chart {
  position: absolute; inset: 0;
  height: 100%; width: 100%;
  z-index: 1;
  transition: opacity .3s ease;
}
.chart-skel-wrap.is-loaded .skel-chart {
  opacity: 0;
  pointer-events: none;
}

/* Optional inline skeleton-text and skeleton-block primitives
   for any future deferred-content needs. */
.skeleton-text { height: 14px; width: 80%; margin: 4px 0; }
.skeleton-text.short { width: 40%; }
.skeleton-text.long  { width: 100%; }
.skeleton-block { width: 100%; height: 80px; }