/* ═══════════════════════════════════════════════════════════════
   FaceAttend AI v3 — Premium Yellow & White Enterprise Theme
   Designer: Aizaz Ali Shah
═══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
  /* Yellow & White System */
  --y:        #FFD000;       /* primary yellow */
  --y2:       #FFBE00;       /* darker yellow  */
  --y3:       #FFF3B0;       /* soft yellow tint */
  --y-glow:   rgba(255,208,0,.18);
  --y-glow2:  rgba(255,208,0,.08);
  --white:    #FFFFFF;
  --off-white:#F8F9FC;

  /* Dark backgrounds */
  --bg:   #0A0C14;
  --bg2:  #0F1220;
  --bg3:  #13172A;
  --card: #181C30;
  --card2:#1D2238;

  /* Borders */
  --b:    #252A42;
  --b2:   #2E3555;
  --b-y:  rgba(255,208,0,.22);

  /* Semantic colours */
  --grn:  #22C55E;
  --grn2: #16A34A;
  --red:  #EF4444;
  --red2: #DC2626;
  --blue: #3B82F6;
  --blue2:#2563EB;

  /* Text */
  --tx:   #F1F3FA;
  --tx2:  #8892B0;
  --tx3:  #4A5270;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.6);
  --shadow-y:  0 0 24px rgba(255,208,0,.15);
  --shadow-card: 0 2px 12px rgba(0,0,0,.35);

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  /* Transitions */
  --t-fast: .15s ease;
  --t-base: .22s ease;
  --t-slow: .35s ease;
  --t-spring: .3s cubic-bezier(.34,1.56,.64,1);
}

/* ── RESET & BASE ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--tx);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Belt-and-suspenders: prevent any element from causing horizontal scroll */
img, svg, video, canvas, table { max-width: 100%; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--y); }

/* ── COLOUR UTILITIES ── */
.y   { color: var(--y)   !important; }
.grn { color: var(--grn) !important; }
.red { color: var(--red) !important; }
.blu { color: var(--blue)!important; }

/* ════════════════════════════════════════════════════
   MODEL OVERLAY
════════════════════════════════════════════════════ */
.model-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, #0F1525 0%, #080C14 100%);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
}
.model-loader {
  text-align: center;
  padding: 48px 56px;
  background: var(--card);
  border: 1px solid var(--b-y);
  border-radius: var(--r-lg);
  min-width: 380px;
  box-shadow: var(--shadow-y), var(--shadow-lg);
  animation: overlayIn .5s ease both;
}
@keyframes overlayIn { from { opacity:0; transform:scale(.94) translateY(16px); } to { opacity:1; transform:scale(1) translateY(0); } }
.loader-brand {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, #1a2040, #0d1028);
  border: 2px solid var(--b-y);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  box-shadow: var(--shadow-y);
  animation: brandFloat 2.5s ease-in-out infinite;
}
@keyframes brandFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.loader-title {
  font-size: 22px; font-weight: 800; letter-spacing: -.5px;
  color: var(--tx); margin-bottom: 6px;
}
.loader-sub { font-size: 13px; color: var(--tx2); margin-bottom: 28px; }
.loader-bar-wrap {
  height: 6px; background: var(--bg3);
  border-radius: 3px; overflow: hidden; margin-bottom: 14px;
  position: relative;
}
.loader-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--y), #FFF0A0, var(--y));
  background-size: 200% 100%;
  border-radius: 3px;
  transition: width .4s ease;
  animation: barShimmer 1.8s linear infinite;
}
@keyframes barShimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.loader-bar-glow {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,208,0,.3), transparent);
  animation: barGlow 1.5s ease-in-out infinite;
}
@keyframes barGlow { 0%{transform:translateX(-100%)} 100%{transform:translateX(400%)} }
.loader-steps { font-size: 12px; color: var(--tx2); margin-bottom: 16px; min-height: 18px; }
.loader-dots { display: flex; justify-content: center; gap: 6px; }
.loader-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--y); animation: dotPulse 1.4s ease-in-out infinite;
}
.loader-dots span:nth-child(2) { animation-delay: .2s; }
.loader-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dotPulse { 0%,80%,100%{transform:scale(.7);opacity:.4} 40%{transform:scale(1);opacity:1} }

/* ════════════════════════════════════════════════════
   TOP NAVIGATION — Premium Yellow Bar
════════════════════════════════════════════════════ */
.topnav {
  display: flex; align-items: center;
  height: 64px; padding: 0 20px;
  background: var(--bg2);
  border-bottom: 1px solid var(--b);
  position: sticky; top: 0; z-index: 100;
  gap: 12px;
  overflow: visible;
}

/* Brand */
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; text-decoration: none; }
.brand-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, #1C2240, #12182E);
  border: 1.5px solid var(--b-y);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 16px var(--y-glow), inset 0 1px 0 rgba(255,208,0,.1);
  transition: transform var(--t-spring), box-shadow var(--t-base);
}
.brand:hover .brand-icon { transform: rotate(8deg) scale(1.08); box-shadow: 0 0 24px var(--y-glow), var(--shadow-y); }
.brand-name { font-size: 15px; font-weight: 800; letter-spacing: -.4px; color: var(--tx); }
.brand-tag  { font-size: 9px; color: var(--tx3); letter-spacing: 1px; text-transform: uppercase; margin-top: 1px; display: none; }

/* Nav tabs — scrollable container prevents overflow/overlap with nav-right */
.nav-tabs {
  display: flex; gap: 1px;
  flex: 1 1 auto; min-width: 0;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.nav-tabs::-webkit-scrollbar { display: none; height: 0; }
.ntab {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: var(--r-sm); border: none;
  background: transparent; color: var(--tx2);
  font-size: 11.5px; font-weight: 500; font-family: inherit;
  cursor: pointer;
  transition: color var(--t-base), background var(--t-base);
  position: relative; white-space: nowrap;
}
.ntab-icon { width: 14px; height: 14px; flex-shrink: 0; transition: transform var(--t-spring); }
.ntab:hover { color: var(--tx); background: rgba(255,208,0,.06); }
.ntab:hover .ntab-icon { transform: translateY(-1px); }
.ntab.active { color: var(--y); background: rgba(255,208,0,.1); font-weight: 600; }
.ntab.active .ntab-icon { color: var(--y); }

/* Active tab bottom bar */
.ntab::after {
  content: '';
  position: absolute; bottom: 0; left: 50%; right: 50%;
  height: 2px; background: var(--y);
  border-radius: 2px 2px 0 0;
  transition: left var(--t-base), right var(--t-base), opacity var(--t-base);
  opacity: 0;
}
.ntab.active::after { left: 12px; right: 12px; opacity: 1; }

.nav-tabs .ntab { flex-shrink: 0; }

/* Nav right */
.nav-right {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; overflow: visible;
}
.model-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: var(--tx2);
  background: var(--bg3); border: 1px solid var(--b);
  padding: 4px 10px; border-radius: 20px;
  white-space: nowrap;
}
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--y); flex-shrink: 0;
}
.status-dot.loading { animation: statusPulse 1s ease-in-out infinite; }
.status-dot.ready   { background: var(--grn); box-shadow: 0 0 6px rgba(34,197,94,.5); animation: none; }
.status-dot.error   { background: var(--red); animation: none; }
@keyframes statusPulse { 0%,100%{opacity:.3;transform:scale(.8)} 50%{opacity:1;transform:scale(1.1)} }
.nav-sep { width: 1px; height: 20px; background: var(--b); flex-shrink:0; }
.nav-clock {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--tx2); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nav-clock svg { color: var(--y); }

/* ════════════════════════════════════════════════════
   SHELL LAYOUT
════════════════════════════════════════════════════ */
.shell {
  display: flex;
  min-height: calc(100vh - 64px);
  min-height: calc(100dvh - 64px);
}

/* ════════════════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════════════════ */
.sidebar {
  width: 216px; flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--b);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.sidebar-section {
  padding: 18px 16px;
  border-bottom: 1px solid var(--b);
}
.sidebar-log { flex: 1; }
.sidebar-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 9px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--tx3);
  margin-bottom: 12px;
}
.sidebar-label svg { color: var(--y); flex-shrink: 0; }
.stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 8px; border-radius: var(--r-sm); margin: 0 -8px;
  transition: background var(--t-fast);
}
.stat-row:hover { background: rgba(255,208,0,.05); }
.sr-name { font-size: 12px; color: var(--tx2); }
.stat-val { font-size: 13px; font-weight: 700; color: var(--tx); }
.stat-val.y    { color: var(--y); }
.stat-val.grn  { color: var(--grn); }
.stat-val.red  { color: var(--red); }
.mini-log {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 220px; overflow-y: auto;
}
.mini-log-empty { font-size: 11px; color: var(--tx3); text-align: center; padding: 16px 8px; }
.mini-entry {
  font-size: 11px; padding: 6px 8px; border-radius: 6px;
  border-left: 2px solid; background: var(--bg3);
  animation: miniSlide .25s ease both;
  line-height: 1.4;
}
.mini-entry.in  { border-color: var(--grn); color: var(--grn); }
.mini-entry.out { border-color: var(--y);   color: var(--y); }
.mini-entry.unk { border-color: var(--red); color: var(--red); }
@keyframes miniSlide { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} }

/* ════════════════════════════════════════════════════
   CONTENT
════════════════════════════════════════════════════ */
.content { flex: 1; padding: 24px; overflow-y: auto; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: panelIn .35s ease both; }
@keyframes panelIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* Page header */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 22px; flex-wrap: wrap; gap: 12px;
}
.page-header-left h1 {
  font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--white);
}
.page-header-left p { font-size: 12px; color: var(--tx2); margin-top: 3px; }
.page-header-right { display: flex; align-items: center; gap: 10px; }
.header-badge {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 20px;
  border: 1px solid var(--b-y);
  background: rgba(255,208,0,.06);
  font-size: 12px; font-weight: 600; color: var(--y);
}
.live-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--y); box-shadow: 0 0 6px var(--y);
  animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.85)} }

/* ════════════════════════════════════════════════════
   CARDS
════════════════════════════════════════════════════ */
.card {
  background: var(--card);
  border: 1px solid var(--b);
  border-radius: var(--r-md);
  padding: 20px;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.card:hover { border-color: var(--b2); box-shadow: var(--shadow-card); }
.card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.card-title-group { display: flex; align-items: center; gap: 8px; }
.card-title { font-size: 13px; font-weight: 700; color: var(--tx); }

/* ════════════════════════════════════════════════════
   STAT CARDS — Dashboard
════════════════════════════════════════════════════ */
.stat-cards {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 14px; margin-bottom: 20px;
}
.stat-card {
  background: var(--card);
  border: 1px solid var(--b);
  border-radius: var(--r-md);
  padding: 20px;
  position: relative; overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  animation: cardIn .45s ease both;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.stat-cards .stat-card:nth-child(1){animation-delay:.05s}
.stat-cards .stat-card:nth-child(2){animation-delay:.12s}
.stat-cards .stat-card:nth-child(3){animation-delay:.19s}
.stat-cards .stat-card:nth-child(4){animation-delay:.26s}
@keyframes cardIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* Yellow card */
.sc-yellow { border-color: var(--b-y); }
.sc-yellow:hover { border-color: var(--y); box-shadow: var(--shadow-y), var(--shadow-md); }
/* Subtle glow bg per card */
.sc-yellow::before { content:''; position:absolute; top:-20px; right:-20px; width:80px; height:80px; border-radius:50%; background:radial-gradient(circle, var(--y-glow) 0%, transparent 70%); }
.sc-green::before  { content:''; position:absolute; top:-20px; right:-20px; width:80px; height:80px; border-radius:50%; background:radial-gradient(circle, rgba(34,197,94,.1) 0%, transparent 70%); }
.sc-blue::before   { content:''; position:absolute; top:-20px; right:-20px; width:80px; height:80px; border-radius:50%; background:radial-gradient(circle, rgba(59,130,246,.1) 0%, transparent 70%); }
.sc-red::before    { content:''; position:absolute; top:-20px; right:-20px; width:80px; height:80px; border-radius:50%; background:radial-gradient(circle, rgba(239,68,68,.1) 0%, transparent 70%); }

.sc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.sc-icon-wrap {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sc-icon-y { background: rgba(255,208,0,.12); color: var(--y); border: 1px solid rgba(255,208,0,.2); }
.sc-icon-g { background: rgba(34,197,94,.12);  color: var(--grn); border: 1px solid rgba(34,197,94,.2); }
.sc-icon-b { background: rgba(59,130,246,.12);  color: var(--blue); border: 1px solid rgba(59,130,246,.2); }
.sc-icon-r { background: rgba(239,68,68,.12);   color: var(--red); border: 1px solid rgba(239,68,68,.2); }
.sc-trend {
  font-size: 11px; font-weight: 600; padding: 3px 8px;
  border-radius: 20px; flex-shrink: 0;
}
.sc-trend.up      { color: var(--grn); background: rgba(34,197,94,.1); }
.sc-trend.dn      { color: var(--red); background: rgba(239,68,68,.1); }
.sc-trend.neutral { color: var(--tx2); background: var(--bg3); }
.sc-val {
  font-size: 32px; font-weight: 900; letter-spacing: -1.5px;
  color: var(--white); line-height: 1; margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.sc-label { font-size: 13px; font-weight: 600; color: var(--tx); margin-bottom: 2px; }
.sc-sub   { font-size: 11px; color: var(--tx2); margin-bottom: 14px; }
.sc-bar { height: 3px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
.sc-bar-fill { height: 100%; border-radius: 2px; transition: width .8s ease; }

/* ════════════════════════════════════════════════════
   DASHBOARD GRID
════════════════════════════════════════════════════ */
.dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }

/* ═══════════════════════════════════════════════════════════════
   ANALYTICS DASHBOARD — stat row + chart grid
═══════════════════════════════════════════════════════════════ */
.analytics-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.an-stat-card {
  background: var(--card);
  border: 1px solid var(--b);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color var(--t-base), transform var(--t-base);
}
.an-stat-card:hover { border-color: var(--b-y); transform: translateY(-2px); }
.an-stat-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 2px;
}
.an-icon-y { background: rgba(255,208,0,.12); color: var(--y); }
.an-icon-g { background: rgba(34,197,94,.12); color: #22c55e; }
.an-icon-b { background: rgba(59,130,246,.12); color: #3b82f6; }
.an-icon-p { background: rgba(168,85,247,.12); color: #a855f7; }
.an-stat-val { font-size: 24px; font-weight: 800; color: var(--tx); line-height: 1; }
.an-stat-label { font-size: 11px; color: var(--tx2); font-weight: 600; }

.analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.an-chart-card { display: flex; flex-direction: column; }
.an-chart-wrap {
  padding: 16px;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.an-chart-wrap svg { width: 100%; height: auto; overflow: visible; }
.an-chart-empty {
  color: var(--tx3);
  font-size: 12px;
  text-align: center;
  padding: 30px 10px;
}

/* Bar chart elements */
.an-bar-rect { transition: height .4s ease, y .4s ease; }
.an-bar-label { font-size: 9px; fill: var(--tx3); font-family: inherit; }
.an-bar-value { font-size: 10px; font-weight: 700; fill: var(--tx); font-family: inherit; }

/* Line chart elements */
.an-line-path { fill: none; stroke: var(--y); stroke-width: 2; }
.an-line-area { fill: rgba(255,208,0,.08); stroke: none; }
.an-line-dot  { fill: var(--y); }
.an-line-grid { stroke: var(--b); stroke-width: 1; opacity: .5; }
.an-line-label { font-size: 9px; fill: var(--tx3); font-family: inherit; }

/* Pie chart elements */
.an-pie-legend { display: flex; flex-direction: column; gap: 8px; margin-left: 16px; }
.an-pie-legend-item { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--tx2); }
.an-pie-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.an-pie-legend-val { font-weight: 700; color: var(--tx); margin-left: auto; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .analytics-stat-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .analytics-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .analytics-stat-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .an-stat-card { padding: 10px 12px; }
  .an-stat-val { font-size: 19px; }
  .an-stat-label { font-size: 10px; }
  .an-chart-wrap { padding: 10px; min-height: 180px; }
}

/* ════════════════════════════════════════════════════
   LOG TABLE
════════════════════════════════════════════════════ */
.log-table-wrap { overflow-y: auto; overflow-x: auto; max-height: 320px; -webkit-overflow-scrolling: touch; }
.log-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 12px; }
.log-table th {
  text-align: left; padding: 8px 10px;
  color: var(--tx3); font-size: 10px;
  letter-spacing: .6px; text-transform: uppercase;
  border-bottom: 1px solid var(--b);
  position: sticky; top: 0; background: var(--card); font-weight: 600;
}
.log-table td { padding: 10px 10px; border-bottom: 1px solid rgba(37,42,66,.6); }
.log-table tbody tr { transition: background var(--t-fast); animation: rowIn .25s ease both; }
.log-table tbody tr:hover td { background: rgba(255,208,0,.04); }
@keyframes rowIn { from{opacity:0;transform:translateX(-4px)} to{opacity:1;transform:translateX(0)} }

.log-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px; color: var(--tx3); font-size: 12px; text-align: center;
}

/* Pills */
.pill {
  padding: 3px 9px; border-radius: 20px;
  font-size: 10px; font-weight: 700; display: inline-block;
  letter-spacing: .3px;
}
.pill-in  { background: rgba(34,197,94,.12);  color: var(--grn); }
.pill-out { background: rgba(255,208,0,.12);   color: var(--y); }
.pill-unk { background: rgba(239,68,68,.12);   color: var(--red); }
.pill-ok  { background: rgba(34,197,94,.12);   color: var(--grn); }
.pill-fail{ background: rgba(239,68,68,.12);   color: var(--red); }
.conf-high { color: var(--grn); font-weight: 600; }
.conf-low  { color: var(--red); font-weight: 600; }

/* ════════════════════════════════════════════════════
   ALERTS
════════════════════════════════════════════════════ */
.alerts-list { display: flex; flex-direction: column; gap: 8px; }
.alert-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--bg3); border: 1px solid var(--b);
  border-left: 3px solid;
  animation: alertSlide .3s ease both;
  transition: filter var(--t-fast);
}
.alert-item:hover { filter: brightness(1.08); }
.alert-item.info    { border-left-color: var(--y); }
.alert-item.warn    { border-left-color: var(--y); }
.alert-item.danger  { border-left-color: var(--red); }
.alert-item.success { border-left-color: var(--grn); }
@keyframes alertSlide { from{opacity:0;transform:translateX(10px)} to{opacity:1;transform:translateX(0)} }
.alert-icon-wrap {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.alert-icon-wrap.info    { background: rgba(255,208,0,.12); color: var(--y); }
.alert-icon-wrap.warn    { background: rgba(255,208,0,.12); color: var(--y); }
.alert-icon-wrap.danger  { background: rgba(239,68,68,.12); color: var(--red); }
.alert-icon-wrap.success { background: rgba(34,197,94,.12); color: var(--grn); }
.alert-title  { font-size: 12px; font-weight: 600; color: var(--tx); }
.alert-sub    { font-size: 11px; color: var(--tx2); margin-top: 2px; }
.badge-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--y); color: #000;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ════════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--r-sm); border: none;
  font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: transform var(--t-fast), box-shadow var(--t-base), background var(--t-fast), filter var(--t-fast);
}
.btn:active:not(:disabled) { transform: scale(.96); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn-primary {
  background: var(--y); color: #000;
  box-shadow: 0 2px 10px rgba(255,208,0,.25);
}
.btn-primary:hover:not(:disabled) {
  background: #FFDA30; filter: brightness(1.06);
  box-shadow: 0 4px 20px rgba(255,208,0,.4);
  transform: translateY(-1px);
}

.btn-success {
  background: var(--grn); color: #000;
  box-shadow: 0 2px 10px rgba(34,197,94,.2);
}
.btn-success:hover:not(:disabled) {
  background: #28D96A; box-shadow: 0 4px 18px rgba(34,197,94,.35);
  transform: translateY(-1px);
}

.btn-danger {
  background: var(--red); color: #fff;
  box-shadow: 0 2px 10px rgba(239,68,68,.2);
}
.btn-danger:hover:not(:disabled) {
  background: var(--red2); box-shadow: 0 4px 18px rgba(239,68,68,.35);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--b2); color: var(--tx2);
}
.btn-outline:hover:not(:disabled) {
  border-color: var(--y); color: var(--y);
  background: rgba(255,208,0,.05);
}

.btn-xs  { padding: 4px 10px; font-size: 11px; }
.btn-sm  { padding: 6px 12px; font-size: 11px; }
.btn-block { width: 100%; justify-content: flex-start; }

/* ════════════════════════════════════════════════════
   SCANNER
════════════════════════════════════════════════════ */
.scan-status-indicator {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 20px;
  border: 1px solid var(--b);
  background: var(--bg3);
  font-size: 12px; font-weight: 600; color: var(--tx2);
}
.scan-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tx3); flex-shrink: 0;
  transition: background var(--t-base);
}
.scan-dot.live { background: var(--y); box-shadow: 0 0 8px var(--y); animation: livePulse 1.2s infinite; }
.scan-dot.paused { background: var(--y); animation: none; opacity: .6; }
.scanner-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }

.camera-card {
  background: var(--card); border: 1px solid var(--b);
  border-radius: var(--r-md); padding: 18px;
  transition: border-color var(--t-base);
}
.cam-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.cam-title-group {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--tx);
}

/* Camera video area */
.cam-wrap {
  position: relative; width: 100%; aspect-ratio: 4/3;
  background: var(--bg3); border-radius: var(--r-sm);
  overflow: hidden;
  border: 2px solid var(--b);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.cam-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-wrap canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.cam-wrap.scanning { border-color: var(--y); box-shadow: 0 0 20px rgba(255,208,0,.15); }
.cam-wrap.ok   { border-color: var(--grn); box-shadow: 0 0 20px rgba(34,197,94,.15); }
.cam-wrap.fail { border-color: var(--red); box-shadow: 0 0 20px rgba(239,68,68,.15); }
.enroll-cam-wrap { aspect-ratio: 4/3; }

/* Camera overlay / placeholder */
.cam-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg3); }
.cam-overlay.hidden { display: none; }
.cam-placeholder { text-align: center; color: var(--tx2); }
.cam-ph-icon {
  width: 72px; height: 72px; border-radius: 16px;
  background: var(--bg2); border: 1px solid var(--b);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px; color: var(--tx3);
}
.cam-ph-title { font-size: 14px; font-weight: 600; color: var(--tx); margin-bottom: 4px; }
.cam-ph-sub   { font-size: 11px; color: var(--tx3); }

/* Camera badge */
.cam-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
  background: rgba(239,68,68,.1); color: var(--red);
  border: 1px solid rgba(239,68,68,.2);
  transition: all var(--t-base);
}
.cam-badge.live { background: rgba(255,208,0,.12); color: var(--y); border-color: rgba(255,208,0,.3); }
.cam-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cam-badge.live .cam-badge-dot { animation: livePulse 1.2s infinite; }

/* Recognition result popup */
.recog-result {
  position: absolute; bottom: 10px; left: 10px; right: 10px;
  background: rgba(10,12,20,.9);
  border: 1px solid var(--b2); border-radius: var(--r-sm);
  padding: 12px 14px; backdrop-filter: blur(10px);
  display: flex; align-items: center; gap: 12px;
  animation: recogPop .3s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes recogPop { from{opacity:0;transform:translateY(12px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
.recog-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--y), var(--y2));
  color: #000; font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.recog-name  { font-size: 14px; font-weight: 800; color: var(--white); }
.recog-conf  { font-size: 11px; color: var(--tx2); margin-top: 1px; }
.recog-status{ font-size: 11px; font-weight: 700; margin-top: 3px; }
.recog-status.known   { color: var(--grn); }
.recog-status.unknown { color: var(--red); }

/* Cam controls */
.cam-controls { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* Scan info row */
.scan-info-row {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 8px; margin-top: 12px;
}
.scan-info-item {
  background: var(--bg3); border-radius: var(--r-sm);
  border: 1px solid var(--b);
  padding: 9px; text-align: center;
  transition: border-color var(--t-base);
}
.scan-info-item:hover { border-color: var(--b-y); }
.sii-icon { display: flex; justify-content: center; margin-bottom: 3px; color: var(--y); }
.sii-label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .8px; color: var(--tx3); margin-bottom: 3px; }
.sii-val { font-size: 13px; font-weight: 700; color: var(--tx); }

/* Scanner right panel */
.scanner-right { display: flex; flex-direction: column; gap: 14px; }
.recog-log { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.recog-log-empty { text-align: center; padding: 24px; font-size: 12px; color: var(--tx3); }
.rl-entry {
  padding: 9px 11px; border-radius: var(--r-sm);
  background: var(--bg3); border-left: 3px solid;
  animation: rlIn .28s ease both;
  transition: filter var(--t-fast);
}
.rl-entry:hover { filter: brightness(1.08); }
.rl-entry.known   { border-color: var(--grn); }
.rl-entry.unknown { border-color: var(--red); }
.rl-name { font-size: 12px; font-weight: 700; color: var(--tx); }
.rl-sub  { font-size: 11px; color: var(--tx2); margin-top: 2px; }
@keyframes rlIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }

/* Pill count */
.pill-count {
  background: var(--y); color: #000;
  font-size: 10px; font-weight: 800;
  padding: 2px 8px; border-radius: 20px;
}

/* ════════════════════════════════════════════════════
   SETTINGS ROWS (Scanner panel)
════════════════════════════════════════════════════ */
.setting-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--b);
}
.setting-row.no-border { border: none; padding-bottom: 0; }
.sr-label      { font-size: 12px; color: var(--tx2); }
.sr-label-bold { font-size: 13px; font-weight: 600; color: var(--tx); }
.sr-desc       { font-size: 11px; color: var(--tx3); margin-top: 2px; }
.sr-right { display: flex; align-items: center; gap: 10px; }
.sr-val { font-size: 11px; font-weight: 600; color: var(--y); min-width: 32px; text-align: right; }

/* Range sliders */
input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 90px; height: 4px;
  background: var(--b2); border-radius: 2px; outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--y); cursor: pointer;
  box-shadow: 0 0 8px rgba(255,208,0,.4);
  transition: transform var(--t-spring);
}
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.2); }

/* Toggle */
.toggle {
  width: 36px; height: 20px; background: var(--b2);
  border-radius: 10px; cursor: pointer; position: relative;
  transition: background var(--t-base); flex-shrink: 0;
}
.toggle.on { background: var(--y); }
.toggle::after {
  content: ''; width: 14px; height: 14px;
  background: #fff; border-radius: 50%;
  position: absolute; top: 3px; left: 3px;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.toggle.on::after { transform: translateX(16px); }

/* ════════════════════════════════════════════════════
   FACE GUIDE (Enroll)
════════════════════════════════════════════════════ */
.face-guide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
}
.guide-box {
  width: 180px; height: 220px; border-radius: 12px;
  border: 2px solid var(--y);
  box-shadow: 0 0 0 9999px rgba(0,0,0,.45), 0 0 24px rgba(255,208,0,.3);
  animation: guideGlow 2s ease-in-out infinite;
}
@keyframes guideGlow { 0%,100%{box-shadow:0 0 0 9999px rgba(0,0,0,.45),0 0 20px rgba(255,208,0,.25)} 50%{box-shadow:0 0 0 9999px rgba(0,0,0,.45),0 0 36px rgba(255,208,0,.55)} }
.guide-text {
  margin-top: 12px; background: rgba(255,208,0,.15);
  border: 1px solid rgba(255,208,0,.3); color: var(--y);
  font-size: 12px; font-weight: 700;
  padding: 5px 14px; border-radius: 6px;
  backdrop-filter: blur(4px);
}

/* ════════════════════════════════════════════════════
   ENROLL SAMPLES
════════════════════════════════════════════════════ */
.samples-row { margin-top: 12px; }
.sample-label {
  font-size: 12px; color: var(--tx2); margin-bottom: 8px;
  font-weight: 500;
}
.sample-counter { color: var(--y); font-weight: 700; }
.samples-grid { display: flex; gap: 7px; }
.sample-slot {
  width: 54px; height: 54px; border-radius: var(--r-sm);
  background: var(--bg3); border: 2px dashed var(--b2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--tx3); overflow: hidden; flex-shrink: 0;
  transition: border-color var(--t-base);
}
.sample-slot.filled {
  border: 2px solid var(--y);
  box-shadow: 0 0 10px rgba(255,208,0,.2);
  animation: samplePop .32s cubic-bezier(.34,1.56,.64,1) both;
}
.sample-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
@keyframes samplePop { from{transform:scale(.65);opacity:0} to{transform:scale(1);opacity:1} }

/* ════════════════════════════════════════════════════
   ENROLL FORM
════════════════════════════════════════════════════ */
.enroll-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.enroll-form   { display: flex; flex-direction: column; gap: 12px; }
.enroll-controls { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.enroll-form-btns { display: flex; gap: 10px; margin-top: 16px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 11px; font-weight: 500; color: var(--tx2); }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.req { color: var(--red); }

.form-input {
  background: var(--bg3); border: 1px solid var(--b);
  color: var(--tx); border-radius: var(--r-sm);
  padding: 9px 12px; font-size: 12px; font-family: inherit;
  outline: none; transition: border-color var(--t-base), box-shadow var(--t-base);
  width: 100%;
}
.form-input:focus { border-color: var(--y); box-shadow: 0 0 0 3px rgba(255,208,0,.1); }
.form-input::placeholder { color: var(--tx3); }
select.form-input { cursor: pointer; }
select.form-input option { background: var(--bg3); }

/* Status badge */
.status-badge {
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 20px;
  background: var(--bg3); border: 1px solid var(--b);
  color: var(--tx2); transition: all var(--t-base);
}

/* Progress */
.enroll-progress { margin-top: 12px; }
.progress-label { font-size: 11px; color: var(--tx2); margin-bottom: 6px; }
.progress-bar-wrap {
  height: 5px; background: var(--bg3); border-radius: 3px; overflow: hidden;
  position: relative;
}
.progress-bar {
  height: 100%; background: linear-gradient(90deg, var(--y), #FFF0A0, var(--y));
  background-size: 200% 100%;
  border-radius: 3px; width: 0%; transition: width .4s ease;
  animation: barShimmer 1.8s linear infinite;
}

/* Enroll tips */
.enroll-tips {
  margin-top: 16px; background: var(--bg3);
  border: 1px solid var(--b); border-left: 3px solid var(--y);
  border-radius: var(--r-sm); padding: 12px 14px;
  font-size: 11px; color: var(--tx2); line-height: 1.8;
}
.tip-title {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--tx); margin-bottom: 6px;
}
.enroll-tips ul { padding-left: 16px; }

/* ════════════════════════════════════════════════════
   EMPLOYEES GRID
════════════════════════════════════════════════════ */
.emp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.emp-empty {
  grid-column: 1/-1; text-align: center;
  padding: 48px; color: var(--tx3); font-size: 13px;
  background: var(--card); border: 1px dashed var(--b);
  border-radius: var(--r-md);
}
.emp-card {
  background: var(--card); border: 1px solid var(--b);
  border-radius: var(--r-md); padding: 18px;
  text-align: center; cursor: pointer;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  position: relative; animation: cardIn .4s ease both;
}
.emp-card:hover { transform: translateY(-5px); border-color: var(--b-y); box-shadow: var(--shadow-y), var(--shadow-md); }
.emp-avatar {
  width: 62px; height: 62px; border-radius: 50%;
  margin: 0 auto 10px; border: 2px solid var(--b);
  overflow: hidden; background: var(--bg3);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  transition: border-color var(--t-base);
}
.emp-card:hover .emp-avatar { border-color: var(--y); }
.emp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.emp-name  { font-size: 13px; font-weight: 700; color: var(--tx); }
.emp-role  { font-size: 11px; color: var(--tx2); margin-top: 2px; }
.emp-dept  { font-size: 10px; color: var(--tx3); }
.emp-stat  { margin-top: 10px; }
.emp-rate  { font-size: 15px; font-weight: 800; color: var(--y); margin-top: 6px; }
.emp-rate-lbl { font-size: 10px; color: var(--tx3); }
.emp-delete {
  position: absolute; top: 10px; right: 10px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); color: #fff; border: none;
  cursor: pointer; font-size: 11px; font-weight: 700;
  display: none; align-items: center; justify-content: center;
  transition: transform var(--t-spring);
}
.emp-card:hover .emp-delete { display: flex; }
.emp-delete:hover { transform: scale(1.15); }

/* Search input */
.search-input {
  background: var(--bg3); border: 1px solid var(--b);
  color: var(--tx); border-radius: var(--r-sm);
  padding: 8px 14px; font-size: 12px; font-family: inherit;
  outline: none; width: 210px;
  transition: border-color var(--t-base);
}
.search-input:focus { border-color: var(--y); }
.search-input::placeholder { color: var(--tx3); }

/* ════════════════════════════════════════════════════
   SETTINGS
════════════════════════════════════════════════════ */
.settings-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.settings-btn-group { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.badge-active {
  font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  background: rgba(34,197,94,.12); color: var(--grn);
  border: 1px solid rgba(34,197,94,.25);
}
.engine-rows { display: flex; flex-direction: column; gap: 4px; }
.engine-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--b);
  font-size: 12px;
}
.engine-row:last-child { border: none; }
.er-label { color: var(--tx2); }
.er-val   { color: var(--tx); font-weight: 500; }
.about-block {}
.about-name { font-size: 16px; font-weight: 800; color: var(--tx); margin-bottom: 8px; }
.about-desc { font-size: 12px; color: var(--tx2); line-height: 1.7; margin-bottom: 14px; }
.about-tech-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.about-tech-chip {
  font-size: 11px; padding: 3px 9px; border-radius: 5px;
  border: 1px solid var(--b-y); background: var(--y-glow2); color: var(--y);
  transition: transform var(--t-fast);
}
.about-tech-chip:hover { transform: translateY(-2px); }

/* ════════════════════════════════════════════════════
   TOAST
════════════════════════════════════════════════════ */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--card2); border: 1px solid var(--b-y);
  border-radius: var(--r-md); padding: 13px 18px;
  font-size: 12px; font-weight: 500;
  min-width: 260px; z-index: 9998; display: none;
  box-shadow: var(--shadow-y), var(--shadow-lg);
  color: var(--tx);
}
.toast.show { display: block; animation: toastIn .3s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes toastIn { from{opacity:0;transform:translateY(16px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }

/* ═══════════════════════════════════════════════════════════
   COMPLETION FIXES — missing classes & yellow theme patches
═══════════════════════════════════════════════════════════ */

/* stat card bar IDs used as classes in JS */
#sc-pres-bar, #sc-unk-bar { transition: width .9s cubic-bezier(.25,.46,.45,.94); }

/* scan-cam-wrap — alias for cam-wrap in scanner */
#scan-cam-wrap { position:relative; width:100%; aspect-ratio:4/3; background:var(--bg3); border-radius:var(--r-sm); overflow:hidden; border:2px solid var(--b); transition:border-color var(--t-base), box-shadow var(--t-base); }
#scan-cam-wrap video  { width:100%; height:100%; object-fit:cover; display:block; }
#scan-cam-wrap canvas { position:absolute; top:0; left:0; width:100%; height:100%; }
#scan-cam-wrap.scanning { border-color:var(--y); box-shadow:0 0 22px rgba(255,208,0,.18); }
#scan-cam-wrap.ok       { border-color:var(--grn); box-shadow:0 0 18px rgba(34,197,94,.18); }
#scan-cam-wrap.fail     { border-color:var(--red); box-shadow:0 0 18px rgba(239,68,68,.18); }

/* alert-body — used in addAlert function */
.alert-body { flex:1; }
.alert-body strong { font-size:12px; font-weight:600; color:var(--tx); display:block; }
.alert-body small  { font-size:11px; color:var(--tx2); margin-top:2px; display:block; }

/* cam-badge stopped state */
.cam-badge.stopped { background:rgba(239,68,68,.1); color:var(--red); border:1px solid rgba(239,68,68,.2); }

/* enroll badge live state */
.status-badge.live { background:rgba(255,208,0,.12); border:1px solid rgba(255,208,0,.3); color:var(--y); }

/* scan-count-badge animate on new entry */
#scan-count-badge { transition:transform .2s cubic-bezier(.34,1.56,.64,1); }

/* Ensure .cam-badge has border by default */
.cam-badge { border:1px solid rgba(239,68,68,.2); }

/* Enroll video/canvas layering */
#enroll-cam-wrap { position:relative; width:100%; aspect-ratio:4/3; background:var(--bg3); border-radius:var(--r-sm); overflow:hidden; border:2px solid var(--b); margin-bottom:12px; transition:border-color var(--t-base), box-shadow var(--t-base); }
#enroll-cam-wrap video  { width:100%; height:100%; object-fit:cover; display:block; }
#enroll-cam-wrap canvas { position:absolute; top:0; left:0; width:100%; height:100%; }

/* recog-result flex layout */
#recog-result { display:flex; align-items:center; gap:12px; }

/* Smooth number transitions in sidebar */
.stat-val { transition:color var(--t-base); }

/* Settings card hover yellow accent */
.settings-grid .card:hover { border-color:var(--b-y); }

/* Report empty state */
#report-empty { flex-direction:column; align-items:center; justify-content:center; padding:48px; color:var(--tx3); font-size:13px; text-align:center; }

/* Nav tab focus ring for accessibility */
.ntab:focus-visible { outline:2px solid var(--y); outline-offset:2px; }
.btn:focus-visible   { outline:2px solid var(--y); outline-offset:2px; }

/* Micro-interaction: sidebar label icon rotate on hover */
.sidebar-section:hover .sidebar-label svg { transform:rotate(12deg); transition:transform var(--t-spring); }

/* Scanner info items yellow glow on scan */
.scan-info-item.flash { border-color:var(--y); box-shadow:0 0 10px rgba(255,208,0,.15); }

/* Scan status indicator live state */
#scan-status-ind.live { border-color:var(--b-y); background:rgba(255,208,0,.06); color:var(--y); }

/* Page header animation */
.page-header { animation:phIn .3s ease both; }
@keyframes phIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

/* Emp card delete pulse on hover */
.emp-delete { animation:none; }
.emp-card:hover .emp-delete { animation:deletePop .3s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes deletePop { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }

/* Loading skeleton shimmer for log table */
.log-table tbody:empty::after { content:''; display:block; height:200px; }

/* Yellow accent on focused form inputs */
.form-input:focus { box-shadow:0 0 0 3px rgba(255,208,0,.12); }

/* Ensure toast appears above everything */
#toast-el { z-index:99999; }

/* model-overlay smooth dismiss */
#model-overlay { transition:opacity .4s ease; }
#model-overlay.dismissed { opacity:0; pointer-events:none; }

/* Premium scrollbar for content area */
.content::-webkit-scrollbar { width:5px; }
.content::-webkit-scrollbar-thumb { background:var(--b2); border-radius:3px; }
.content::-webkit-scrollbar-thumb:hover { background:var(--y); }

/* Recog log scroll */
.recog-log::-webkit-scrollbar { width:3px; }
.recog-log::-webkit-scrollbar-thumb { background:var(--b2); border-radius:2px; }

/* About section link hover */
.about-tech-chip { cursor:default; }

/* Pulse animation for live system badge */
.header-badge .live-pulse { flex-shrink:0; }

/* Improve mini-log overflow */
.mini-log::-webkit-scrollbar { width:2px; }
.mini-log::-webkit-scrollbar-thumb { background:var(--b-y); }

/* Scan info flash animation for recognized event */
@keyframes scanFlash { 0%{background:rgba(255,208,0,.15);border-color:var(--y)} 100%{background:var(--bg3);border-color:var(--b)} }
.scan-info-item.flash { animation:scanFlash .8s ease forwards; }

/* sample-slot.empty — explicit empty state */
.sample-slot.empty { border: 2px dashed var(--b2); color: var(--tx3); background: var(--bg3); }

/* ═══════════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON — Navbar
═══════════════════════════════════════════════════════════════════ */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--b);
  background: var(--bg3);
  border-radius: 22px;
  cursor: pointer;
  font-family: inherit;
  outline: none;
  flex-shrink: 0;
  transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
}
.theme-toggle:hover {
  border-color: var(--y);
  background: rgba(255,208,0,.05);
  box-shadow: 0 0 10px rgba(255,208,0,.15);
}
.theme-toggle:focus-visible .theme-toggle-track {
  box-shadow: 0 0 0 3px rgba(255,208,0,.4);
}

.theme-toggle-track {
  position: relative;
  width: 42px;
  height: 22px;
  border-radius: 11px;
  background: var(--bg);
  border: 1.5px solid var(--b2);
  transition: background .4s ease, border-color .4s ease;
  flex-shrink: 0;
}
.theme-toggle:hover .theme-toggle-track {
  border-color: var(--y);
}

.theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--y), var(--y2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), background .4s ease, box-shadow .3s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,.4), 0 0 6px rgba(255,208,0,.4);
}

/* Icons inside thumb */
.icon-sun, .icon-moon {
  position: absolute;
  transition: opacity .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.icon-sun  { opacity: 1;  transform: rotate(0deg) scale(1); }
.icon-moon { opacity: 0;  transform: rotate(-60deg) scale(.5); }

.theme-toggle-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--tx2);
  transition: color .3s ease;
  white-space: nowrap;
  letter-spacing: .2px;
}
.theme-toggle:hover .theme-toggle-label { color: var(--y); }

/* ── LIGHT MODE ACTIVE STATE ── */
body.light .theme-toggle {
  border-color: rgba(180,140,0,.35);
  background: rgba(255,248,200,.4);
}
body.light .theme-toggle:hover {
  border-color: #B8860B;
  background: rgba(255,248,200,.7);
}
body.light .theme-toggle-track {
  background: #FFF3C0;
  border-color: rgba(180,140,0,.4);
}
body.light .theme-toggle-thumb {
  transform: translateX(20px);
  background: linear-gradient(135deg, #1a1a2e, #0f0f20);
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
body.light .icon-sun  { opacity: 0;  transform: rotate(60deg) scale(.5); }
body.light .icon-moon { opacity: 1;  transform: rotate(0deg) scale(1); color: var(--y); }
body.light .icon-moon path { fill: var(--y); }
body.light .theme-toggle-label { color: #8B7000; }
body.light .theme-toggle:hover .theme-toggle-label { color: var(--y2); }

/* ═══════════════════════════════════════════════════════════════════
   SMOOTH THEME TRANSITION — all elements
═══════════════════════════════════════════════════════════════════ */
body,
body *:not(.theme-toggle-thumb):not(.theme-toggle-track):not(.loader-bar):not(.progress-bar) {
  transition:
    background-color .45s ease,
    border-color .45s ease,
    color .35s ease,
    box-shadow .45s ease !important;
}
/* Exclude animation-heavy elements from transition override */
.status-dot, .live-pulse, .scan-dot,
.loader-dots span, .cp, .credit-avatar::before,
.loader-bar, .progress-bar, .sc-bar-fill,
.model-overlay, #model-overlay { transition: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   LIGHT THEME — Full White & Yellow Design System
═══════════════════════════════════════════════════════════════════ */
body.light {
  /* Override ALL CSS variables for light mode */
  --bg:        #F4F6FB;
  --bg2:       #FFFFFF;
  --bg3:       #F0F2F8;
  --card:      #FFFFFF;
  --card2:     #FAFBFE;

  --b:         #E4E8F5;
  --b2:        #CDD3EE;
  --b-y:       rgba(180,140,0,.25);

  --tx:        #0F1320;
  --tx2:       #4A5270;
  --tx3:       #9AA0BF;

  --shadow-sm:   0 1px 4px rgba(0,0,0,.07);
  --shadow-md:   0 4px 16px rgba(0,0,0,.09);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.12);
  --shadow-y:    0 0 24px rgba(255,208,0,.25);
  --shadow-card: 0 2px 12px rgba(0,0,0,.08);

  background: var(--bg);
  color: var(--tx);
}

/* ── LIGHT: ROOT PAGE ── */
body.light { background: var(--bg); }

/* ── LIGHT: NAVBAR ── */
body.light .topnav {
  background: #FFFFFF;
  border-bottom-color: #E4E8F5;
  box-shadow: 0 1px 8px rgba(0,0,0,.07);
}
body.light .brand-name { color: #0F1320; }
body.light .brand-tag  { color: #9AA0BF; }
body.light .brand-icon {
  background: linear-gradient(135deg, #FFF8D6, #FFFAE8);
  border-color: rgba(255,208,0,.4);
  box-shadow: 0 0 12px rgba(255,208,0,.15);
}
body.light .ntab         { color: #4A5270; }
body.light .ntab:hover   { background: rgba(255,208,0,.08); color: #0F1320; }
body.light .ntab.active  { background: rgba(255,208,0,.12); color: #B8860B; }
body.light .ntab.active .ntab-icon { color: #B8860B; }
body.light .nav-sep      { background: #E4E8F5; }
body.light .nav-clock    { color: #4A5270; }
body.light .nav-clock svg { color: #B8860B; }
body.light .model-status {
  background: #F4F6FB;
  border-color: #E4E8F5;
  color: #4A5270;
}

/* ── LIGHT: SIDEBAR ── */
body.light .sidebar {
  background: #FFFFFF;
  border-right-color: #E4E8F5;
  box-shadow: 2px 0 8px rgba(0,0,0,.04);
}
body.light .sidebar-section { border-bottom-color: #EEF0FA; }
body.light .sidebar-label   { color: #9AA0BF; }
body.light .sidebar-label svg { color: #B8860B; }
body.light .stat-row:hover  { background: rgba(255,208,0,.06); }
body.light .sr-name         { color: #4A5270; }
body.light .stat-val        { color: #0F1320; }
body.light .stat-val.y      { color: #B8860B; }
body.light .stat-val.grn    { color: var(--grn2); }
body.light .stat-val.red    { color: var(--red2); }
body.light .mini-log-empty  { color: #9AA0BF; }
body.light .mini-entry      { background: #F4F6FB; }
body.light .mini-entry.in   { border-color: var(--grn2); color: var(--grn2); }
body.light .mini-entry.out  { border-color: #B8860B;   color: #B8860B; }
body.light .mini-entry.unk  { border-color: var(--red2); color: var(--red2); }

/* ── LIGHT: CONTENT ── */
body.light .content { background: var(--bg); }

/* ── LIGHT: PAGE HEADER ── */
body.light .page-header-left h1 { color: #0F1320; }
body.light .page-header-left p  { color: #4A5270; }
body.light .header-badge {
  background: rgba(255,208,0,.1);
  border-color: rgba(180,140,0,.3);
  color: #B8860B;
}

/* ── LIGHT: STAT CARDS ── */
body.light .stat-card {
  background: #FFFFFF;
  border-color: #E4E8F5;
  box-shadow: var(--shadow-sm);
}
body.light .stat-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  border-color: #CDD3EE;
}
body.light .sc-yellow { border-color: rgba(180,140,0,.25); }
body.light .sc-yellow:hover { border-color: #B8860B; box-shadow: 0 8px 24px rgba(255,208,0,.15); }
body.light .sc-icon-y { background: rgba(255,208,0,.15); border-color: rgba(180,140,0,.2); }
body.light .sc-icon-g { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.2); }
body.light .sc-icon-b { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.2); }
body.light .sc-icon-r { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.2); }
body.light .sc-val  { color: #0F1320; }
body.light .sc-label{ color: #0F1320; }
body.light .sc-sub  { color: #4A5270; }
body.light .sc-bar  { background: #EEF0FA; }
body.light .sc-trend.up      { color: var(--grn2); background: rgba(34,197,94,.1); }
body.light .sc-trend.dn      { color: var(--red2); background: rgba(239,68,68,.1); }
body.light .sc-trend.neutral { color: #4A5270; background: #F0F2F8; }

/* ── LIGHT: CARDS ── */
body.light .card {
  background: #FFFFFF;
  border-color: #E4E8F5;
  box-shadow: var(--shadow-sm);
}
body.light .card:hover { border-color: #CDD3EE; box-shadow: var(--shadow-md); }
body.light .card-title { color: #0F1320; }
body.light .card-title-group svg { color: #B8860B !important; }

/* ── LIGHT: LOG TABLE ── */
body.light .log-table th {
  color: #9AA0BF;
  border-bottom-color: #EEF0FA;
  background: #FFFFFF;
}
body.light .log-table td    { border-bottom-color: #F0F2F8; color: #0F1320; }
body.light .log-table tbody tr:hover td { background: rgba(255,208,0,.04); }
body.light .log-empty       { color: #9AA0BF; }
body.light .log-empty svg   { color: #CDD3EE; opacity:1; }
body.light #report-empty    { color: #9AA0BF; }

/* ── LIGHT: PILLS ── */
body.light .pill-in   { background: rgba(22,163,74,.1);  color: var(--grn2); }
body.light .pill-out  { background: rgba(180,140,0,.12); color: #8B6F00; }
body.light .pill-unk  { background: rgba(220,38,38,.1);  color: var(--red2); }
body.light .pill-ok   { background: rgba(22,163,74,.1);  color: var(--grn2); }
body.light .pill-fail { background: rgba(220,38,38,.1);  color: var(--red2); }
body.light .conf-high { color: var(--grn2); }
body.light .conf-low  { color: var(--red2); }

/* ── LIGHT: ALERTS ── */
body.light .alert-item        { background: #F8F9FC; border-color: #EEF0FA; }
body.light .alert-item.info   { border-left-color: #B8860B; }
body.light .alert-item.warn   { border-left-color: #B8860B; }
body.light .alert-item.danger { border-left-color: var(--red2); }
body.light .alert-item.success{ border-left-color: var(--grn2); }
body.light .alert-icon-wrap.info    { background: rgba(255,208,0,.12);  color: #B8860B; }
body.light .alert-icon-wrap.warn    { background: rgba(255,208,0,.12);  color: #B8860B; }
body.light .alert-icon-wrap.danger  { background: rgba(220,38,38,.1);   color: var(--red2); }
body.light .alert-icon-wrap.success { background: rgba(22,163,74,.1);   color: var(--grn2); }
body.light .alert-title  { color: #0F1320; }
body.light .alert-sub    { color: #4A5270; }
body.light .badge-dot    { background: #B8860B; color: #fff; }

/* ── LIGHT: BUTTONS ── */
body.light .btn-primary {
  background: var(--y);
  color: #000;
  box-shadow: 0 2px 10px rgba(180,140,0,.2);
}
body.light .btn-primary:hover:not(:disabled) {
  background: var(--y2);
  box-shadow: 0 4px 18px rgba(180,140,0,.35);
}
body.light .btn-outline {
  border-color: #CDD3EE;
  color: #4A5270;
  background: transparent;
}
body.light .btn-outline:hover:not(:disabled) {
  border-color: #B8860B;
  color: #8B6F00;
  background: rgba(255,208,0,.06);
}

/* ── LIGHT: SCANNER ── */
body.light .scan-status-indicator {
  background: #F4F6FB;
  border-color: #E4E8F5;
  color: #4A5270;
}
body.light #scan-status-ind.live {
  background: rgba(255,208,0,.08);
  border-color: rgba(180,140,0,.3);
  color: #8B6F00;
}
body.light .camera-card {
  background: #FFFFFF;
  border-color: #E4E8F5;
}
body.light #scan-cam-wrap {
  background: #F0F2F8;
  border-color: #E4E8F5;
}
body.light #scan-cam-wrap.scanning {
  border-color: #B8860B;
  box-shadow: 0 0 20px rgba(255,208,0,.15);
}
body.light .cam-overlay  { background: #F0F2F8; }
body.light .cam-ph-icon  { background: #E4E8F5; border-color: #CDD3EE; color: #9AA0BF; }
body.light .cam-ph-title { color: #0F1320; }
body.light .cam-ph-sub   { color: #9AA0BF; }
body.light .cam-badge    { background: rgba(220,38,38,.08); color: var(--red2); border-color: rgba(220,38,38,.2); }
body.light .cam-badge.live { background: rgba(180,140,0,.1); color: #8B6F00; border-color: rgba(180,140,0,.25); }
body.light .cam-title-group { color: #0F1320; }
body.light .cam-title-group svg { color: #B8860B !important; }
body.light .recog-result  {
  background: rgba(255,255,255,.96);
  border-color: #E4E8F5;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
}
body.light .recog-name    { color: #0F1320; }
body.light .recog-conf    { color: #4A5270; }

/* ── LIGHT: SCAN INFO ROW ── */
body.light .scan-info-item {
  background: #F4F6FB;
  border-color: #E4E8F5;
}
body.light .scan-info-item:hover { border-color: rgba(180,140,0,.3); }
body.light .sii-icon   { color: #B8860B; }
body.light .sii-label  { color: #9AA0BF; }
body.light .sii-val    { color: #0F1320; }

/* ── LIGHT: RECOG LOG ── */
body.light .rl-entry         { background: #F4F6FB; }
body.light .rl-entry.known   { border-color: var(--grn2); }
body.light .rl-entry.unknown { border-color: var(--red2); }
body.light .rl-name { color: #0F1320; }
body.light .rl-sub  { color: #4A5270; }
body.light .recog-log-empty  { color: #9AA0BF; }
body.light .pill-count { background: #B8860B; color: #fff; }

/* ── LIGHT: SETTINGS ROWS ── */
body.light .setting-row  { border-bottom-color: #EEF0FA; }
body.light .sr-label     { color: #4A5270; }
body.light .sr-label-bold{ color: #0F1320; }
body.light .sr-desc      { color: #9AA0BF; }
body.light .sr-val       { color: #8B6F00; }
body.light input[type=range] { background: #CDD3EE; }
body.light input[type=range]::-webkit-slider-thumb { box-shadow: 0 0 6px rgba(180,140,0,.3); }
body.light .toggle { background: #CDD3EE; }
body.light .toggle.on { background: var(--y); }

/* ── LIGHT: ENROLL ── */
body.light #enroll-cam-wrap { background: #F0F2F8; border-color: #E4E8F5; }
body.light .enroll-overlay  { background: #F0F2F8; }
body.light .status-badge    { background: #F4F6FB; border-color: #E4E8F5; color: #4A5270; }
body.light .status-badge.live { background: rgba(255,208,0,.1); border-color: rgba(180,140,0,.3); color: #8B6F00; }
body.light .guide-text {
  background: rgba(255,208,0,.15);
  border-color: rgba(180,140,0,.3);
  color: #8B6F00;
}
body.light .sample-slot.empty  { background: #F0F2F8; border-color: #CDD3EE; color: #9AA0BF; }
body.light .sample-slot.filled { border-color: #B8860B; box-shadow: 0 0 8px rgba(255,208,0,.2); }
body.light .sample-label       { color: #4A5270; }
body.light .sample-counter     { color: #8B6F00; }
body.light .enroll-tips {
  background: #FFFBEB;
  border-color: #E4E8F5;
  border-left-color: #B8860B;
  color: #4A5270;
}
body.light .tip-title { color: #0F1320; }
body.light .tip-title svg { color: #B8860B !important; }
body.light .enroll-tips li { color: #4A5270; }

/* ── LIGHT: FORM INPUTS ── */
body.light .form-input {
  background: #F8F9FC;
  border-color: #CDD3EE;
  color: #0F1320;
}
body.light .form-input:focus {
  border-color: #B8860B;
  box-shadow: 0 0 0 3px rgba(255,208,0,.15);
}
body.light .form-input::placeholder { color: #9AA0BF; }
body.light select.form-input option { background: #FFFFFF; color: #0F1320; }
body.light .form-group label { color: #4A5270; }
body.light .req { color: var(--red2); }
body.light .progress-bar-wrap { background: #EEF0FA; }

/* ── LIGHT: EMPLOYEES ── */
body.light .emp-card {
  background: #FFFFFF;
  border-color: #E4E8F5;
  box-shadow: var(--shadow-sm);
}
body.light .emp-card:hover {
  border-color: rgba(180,140,0,.35);
  box-shadow: 0 10px 28px rgba(0,0,0,.1), 0 0 16px rgba(255,208,0,.1);
}
body.light .emp-avatar   { border-color: #E4E8F5; background: #F4F6FB; }
body.light .emp-card:hover .emp-avatar { border-color: #B8860B; }
body.light .emp-name     { color: #0F1320; }
body.light .emp-role     { color: #4A5270; }
body.light .emp-dept     { color: #9AA0BF; }
body.light .emp-rate     { color: #8B6F00; }
body.light .emp-rate-lbl { color: #9AA0BF; }
body.light .emp-empty {
  background: #FFFFFF;
  border-color: #E4E8F5;
  color: #9AA0BF;
}
body.light .search-input {
  background: #F4F6FB;
  border-color: #CDD3EE;
  color: #0F1320;
}
body.light .search-input:focus { border-color: #B8860B; }
body.light .search-input::placeholder { color: #9AA0BF; }

/* ── LIGHT: SETTINGS PAGE ── */
body.light .settings-grid .card:hover { border-color: rgba(180,140,0,.3); }
body.light .badge-active {
  background: rgba(22,163,74,.1);
  color: var(--grn2);
  border-color: rgba(22,163,74,.25);
}
body.light .engine-row   { border-bottom-color: #EEF0FA; }
body.light .er-label     { color: #4A5270; }
body.light .er-val       { color: #0F1320; }
body.light .about-name   { color: #0F1320; }
body.light .about-desc   { color: #4A5270; }
body.light .about-tech-chip {
  border-color: rgba(180,140,0,.3);
  background: rgba(255,208,0,.07);
  color: #8B6F00;
}
body.light .about-tech-chip:hover { transform: translateY(-2px); }

/* ── LIGHT: MODAL OVERLAY ── */
body.light .model-overlay { background: linear-gradient(135deg, #FFF9E0 0%, #FFFDE8 100%); }
body.light .model-loader  {
  background: #FFFFFF;
  border-color: rgba(180,140,0,.3);
  box-shadow: 0 8px 40px rgba(0,0,0,.1), 0 0 30px rgba(255,208,0,.1);
}
body.light .loader-title  { color: #0F1320; }
body.light .loader-sub    { color: #4A5270; }
body.light .loader-steps  { color: #4A5270; }
body.light .loader-bar-wrap { background: #EEF0FA; }
body.light .loader-brand  { background: linear-gradient(135deg,#FFF8D6,#FFFAE8); border-color: rgba(180,140,0,.3); }

/* ── LIGHT: TOAST ── */
body.light .toast {
  background: #FFFFFF;
  border-color: rgba(180,140,0,.3);
  color: #0F1320;
  box-shadow: 0 8px 30px rgba(0,0,0,.12), 0 0 20px rgba(255,208,0,.1);
}

/* ── LIGHT: SCROLLBARS ── */
body.light ::-webkit-scrollbar-thumb         { background: #CDD3EE; }
body.light ::-webkit-scrollbar-thumb:hover   { background: #B8860B; }
body.light .content::-webkit-scrollbar-thumb { background: #CDD3EE; }
body.light .content::-webkit-scrollbar-thumb:hover { background: #B8860B; }


/* ── LIGHT: SCAN INFO FLASH ── */
body.light .scan-info-item.flash {
  background: rgba(255,208,0,.12);
  border-color: #B8860B;
  box-shadow: 0 0 10px rgba(255,208,0,.15);
}

/* ── LIGHT: STATUS DOT READY ── */
body.light .status-dot.ready { box-shadow: 0 0 6px rgba(22,163,74,.5); }

/* ── LIGHT: HEADER BADGE ── */
body.light .live-pulse { background: #B8860B; box-shadow: 0 0 6px rgba(180,140,0,.5); }

/* ── FOUC prevention: apply bg immediately before JS runs ── */
html.light-pending { background: #F4F6FB; }
html.light-pending body { background: #F4F6FB; }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE & RESPONSIVE DESIGN
   Targets: Android phones (360px–430px), tablets (600px–900px)
═══════════════════════════════════════════════════════════════════════ */

/* ── HAMBURGER BUTTON (hidden on desktop) ── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  border: none;
  background: var(--bg3);
  border-radius: 9px;
  cursor: pointer;
  flex-shrink: 0;
  border: 1px solid var(--b);
  transition: background var(--t-base), border-color var(--t-base);
  order: -1; /* appears leftmost on mobile */
}
.hamburger:hover { background: var(--card); border-color: var(--b-y); }
.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--tx2);
  border-radius: 2px;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s ease, background .2s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--y); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--y); }

/* ── SIDEBAR OVERLAY (mobile backdrop) ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 200;
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s ease;
}
.sidebar-overlay.visible {
  display: block;
  opacity: 1;
}

/* ── MOBILE BOTTOM NAV ── */
.mobile-bottomnav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 150;
  background: var(--bg2);
  border-top: 1px solid var(--b);
  padding: 6px 4px max(6px, env(safe-area-inset-bottom)) 4px;
  box-shadow: 0 -4px 20px rgba(0,0,0,.4);
}
.mobile-bottomnav.visible { display: flex; }
.mbn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  border: none;
  background: transparent;
  color: var(--tx3);
  font-size: 10px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border-radius: 10px;
  transition: color .18s, background .18s, transform .15s;
  min-width: 0;
}
.mbn-item:active { transform: scale(.93); }
.mbn-item:hover  { background: rgba(255,208,0,.06); color: var(--tx2); }
.mbn-item.active { color: var(--y); }
.mbn-item.active svg { filter: drop-shadow(0 0 4px rgba(255,208,0,.5)); }
.mbn-item svg { flex-shrink: 0; }
.mbn-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48px; }

/* Light mode bottom nav */
body.light .mobile-bottomnav {
  background: #FFFFFF;
  border-top-color: #E4E8F5;
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
}
body.light .mbn-item       { color: #9AA0BF; }
body.light .mbn-item:hover { background: rgba(255,208,0,.06); color: #4A5270; }
body.light .mbn-item.active{ color: #8B6F00; }
body.light .hamburger {
  background: #F4F6FB;
  border-color: #E4E8F5;
}
body.light .hamburger span { background: #4A5270; }
body.light .hamburger.open span { background: #8B6F00; }

/* ═══════════════════════════════════════════════════════════════════════
   TABLET — 900px and below
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Sidebar — hidden off-screen, slides in */
  .sidebar {
    position: fixed;
    top: 64px;
    left: 0;
    bottom: 0;
    width: 240px;
    z-index: 250;
    transform: translateX(-100%);
    transition: transform .32s cubic-bezier(.25,.46,.45,.94);
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0,0,0,.5);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay { display: block; opacity: 0; pointer-events: none; }
  .sidebar-overlay.visible { opacity: 1; pointer-events: all; }

  /* Nav: hide middle tabs, show hamburger */
  .hamburger { display: flex; }
  .nav-tabs   { display: none; }

  /* Nav: tighter */
  .topnav { padding: 0 14px; gap: 10px; height: 58px; }

  /* Shell: full width */
  .shell { min-height: calc(100vh - 58px); }
  .content { padding: 16px; }

  /* Stat cards: 2 columns */
  .stat-cards { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }

  /* Dashboard grid: single column */
  .dash-grid { grid-template-columns: 1fr; }

  /* Scanner: stack vertically */
  .scanner-layout { grid-template-columns: 1fr; }

  /* Enroll: stack vertically */
  .enroll-layout { grid-template-columns: 1fr; }

  /* Settings: 2 columns */
  .settings-grid { grid-template-columns: 1fr 1fr; }

  /* Employee grid: 2 cols */
  .emp-grid { grid-template-columns: repeat(2, 1fr); }

  /* Page headers: stack */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .page-header-right { width: 100%; }

  /* Scan info row: 2x2 */
  .scan-info-row { grid-template-columns: 1fr 1fr; gap: 6px; }

  /* Bottom nav visible on tablet */
  .mobile-bottomnav { display: flex; }
  .content { padding-bottom: 80px; }

  /* Credit footer: stack */
  .credit-inner { flex-direction: column; gap: 16px; }
  .credit-divider { display: none; }
  .credit-right { text-align: left; }
  .credit-tech { justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE PHONE — 600px and below
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Nav: minimal */
  .topnav { height: 54px; padding: 0 12px; gap: 8px; }
  .brand-name { font-size: 13px; }
  .brand-icon { width: 32px; height: 32px; border-radius: 8px; }
  .model-status { display: none; } /* hide on small screen — shown in sidebar */
  .nav-sep     { display: none; }
  .nav-clock   { display: none; } /* clock in sidebar instead */

  /* Shell height */
  .shell { min-height: calc(100vh - 54px); }

  /* Content */
  .content { padding: 12px; padding-bottom: 80px; }

  /* Stat cards: 2 col compact */
  .stat-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card  { padding: 14px; }
  .sc-val     { font-size: 26px; }
  .sc-label   { font-size: 12px; }
  .sc-sub     { display: none; }
  .sc-icon-wrap { width: 34px; height: 34px; }
  .sc-icon-wrap svg { width: 18px; height: 18px; }

  /* Dashboard grid: 1 col */
  .dash-grid { grid-template-columns: 1fr; gap: 10px; }

  /* Cards */
  .card { padding: 14px; }
  .card-header { margin-bottom: 12px; }
  .card-title  { font-size: 12px; }

  /* Log table: hide dept column on mobile */
  .log-table th:nth-child(2),
  .log-table td:nth-child(2) { display: none; }
  .log-table th, .log-table td { padding: 8px 7px; font-size: 11px; }
  .log-table-wrap { max-height: 260px; }

  /* Alert items */
  .alert-title { font-size: 11px; }
  .alert-sub   { font-size: 10px; }

  /* Page header */
  .page-header h1 { font-size: 18px; }
  .page-header p  { font-size: 11px; }
  .page-header-right { flex-wrap: wrap; }
  .search-input { width: 100%; }

  /* Scanner */
  .scanner-layout { grid-template-columns: 1fr; gap: 10px; }
  .scanner-right  { gap: 10px; }
  .cam-wrap       { aspect-ratio: 4/3; }
  .cam-controls   { gap: 6px; flex-wrap: wrap; }
  .cam-controls .btn { font-size: 11px; padding: 7px 12px; flex: 1; justify-content: center; }
  .scan-info-row  { grid-template-columns: repeat(4,1fr); gap: 5px; }
  .sii-label      { font-size: 8px; }
  .sii-val        { font-size: 11px; }
  .camera-card    { padding: 14px; }

  /* Enroll */
  .enroll-layout  { grid-template-columns: 1fr; gap: 10px; }
  .enroll-cam-wrap { aspect-ratio: 3/2; }
  .form-row-2     { grid-template-columns: 1fr; gap: 8px; }
  .enroll-controls { flex-wrap: wrap; gap: 6px; }
  .enroll-controls .btn { flex: 1; min-width: calc(50% - 6px); justify-content: center; }
  .enroll-form-btns { flex-direction: column; gap: 8px; }
  .enroll-form-btns .btn { justify-content: center; }
  .samples-grid   { gap: 4px; }
  .sample-slot    { width: 46px; height: 46px; }

  /* Employees */
  .emp-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .emp-card { padding: 12px; }
  .emp-avatar { width: 52px; height: 52px; font-size: 22px; }
  .emp-name   { font-size: 12px; }
  .emp-role   { font-size: 10px; }
  .emp-rate   { font-size: 14px; }

  /* Reports */
  .log-table th:nth-child(5),
  .log-table td:nth-child(5) { display: none; } /* hide confidence col */

  /* Settings */
  .settings-grid { grid-template-columns: 1fr; gap: 10px; }
  .engine-row     { font-size: 11px; }
  .about-tech-grid { gap: 4px; }
  .about-tech-chip { font-size: 10px; }
  .settings-btn-group .btn { font-size: 11px; }

  /* Theme toggle: hide label */
  .theme-toggle-label { display: none; }
  .theme-toggle { padding: 4px; }

  /* Recog result */
  .recog-result { padding: 9px 11px; gap: 8px; }
  .recog-name   { font-size: 13px; }
  .recog-conf   { font-size: 10px; }

  /* Credit footer */
  .credit-inner   { flex-direction: column; gap: 14px; }
  .credit-divider { display: none; }
  .credit-titles  { gap: 4px; }
  .credit-right   { text-align: left; }
  .credit-tech    { justify-content: flex-start; flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SMALL PHONE — 390px and below (Galaxy A series, older devices)
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 390px) {

  .topnav { padding: 0 10px; gap: 6px; }
  .brand-name { font-size: 12px; }

  .content { padding: 10px; padding-bottom: 76px; }

  /* 1 column stats on very small screens */
  .stat-cards { grid-template-columns: 1fr 1fr; gap: 7px; }
  .stat-card  { padding: 12px; }
  .sc-val     { font-size: 24px; }

  /* 1 column employees */
  .emp-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .emp-avatar { width: 44px; height: 44px; font-size: 18px; }

  /* Scan info 2x2 */
  .scan-info-row { grid-template-columns: 1fr 1fr; }

  /* Enroll samples smaller */
  .sample-slot { width: 40px; height: 40px; font-size: 10px; }
  .samples-grid { gap: 3px; }

  /* Bottom nav */
  .mbn-item { font-size: 9px; gap: 2px; }
  .mbn-item svg { width: 18px; height: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE SIDEBAR — drawer specific styles
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Sidebar mobile extras: show clock & status inside sidebar */
  .sidebar-mobile-extras {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .sidebar-mobile-clock {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    font-size: 12px;
    color: var(--tx2);
    border-top: 1px solid var(--b);
    font-variant-numeric: tabular-nums;
  }
  .sidebar-mobile-clock svg { color: var(--y); }
  .sidebar-mobile-status {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px 14px;
    font-size: 11px;
    color: var(--tx2);
  }

  /* Mobile full-tab nav links in sidebar */
  .sidebar-nav-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 10px 0;
  }
  .sidebar-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 9px;
    border: none;
    background: transparent;
    color: var(--tx2);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background .18s, color .18s;
  }
  .sidebar-nav-link:hover  { background: var(--card2); color: var(--tx); }
  .sidebar-nav-link.active { background: rgba(255,208,0,.1); color: var(--y); }
  .sidebar-nav-link svg    { flex-shrink: 0; }
  body.light .sidebar-nav-link:hover  { background: #F0F2F8; color: #0F1320; }
  body.light .sidebar-nav-link.active { background: rgba(255,208,0,.1); color: #8B6F00; }
}

/* ─── Hide sidebar nav links on desktop ─── */
@media (min-width: 901px) {
  .sidebar-nav-links    { display: none; }
  .sidebar-mobile-extras{ display: none; }
  .mobile-bottomnav     { display: none !important; }
  .hamburger            { display: none !important; }
  .sidebar-overlay      { display: none !important; }
}

/* ─── Touch-friendly minimum tap sizes ─── */
@media (max-width: 900px) {
  .btn { min-height: 42px; }
  .btn-xs { min-height: 34px; }
  .btn-sm { min-height: 38px; }
  input[type=range] { height: 6px; }
  input[type=range]::-webkit-slider-thumb { width: 20px; height: 20px; }
  .toggle { width: 42px; height: 24px; }
  .toggle::after { width: 18px; height: 18px; }
  .toggle.on::after { transform: translateX(18px); }
  .form-input { padding: 10px 13px; font-size: 14px; min-height: 44px; }
  select.form-input { min-height: 44px; }
  .ntab { min-height: 40px; }
}

/* ─── Landscape phone ─── */
@media (max-width: 900px) and (orientation: landscape) {
  .cam-wrap       { aspect-ratio: 16/9; }
  .enroll-cam-wrap{ aspect-ratio: 16/9; }
  .stat-cards     { grid-template-columns: repeat(4,1fr); }
  .mobile-bottomnav { padding-bottom: max(4px, env(safe-area-inset-bottom)); }
}

/* ─── Safe area for notch/punch-hole cameras ─── */
@supports (padding-top: env(safe-area-inset-top)) {
  .topnav { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .mobile-bottomnav { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}

/* ═══════════════════════════════════════════════════════════════════════
   VOICE ANNOUNCEMENT UI STYLES
═══════════════════════════════════════════════════════════════════════ */

/* Voice toggle row label with speaker icon */
#voice-settings-row,
#voice-test-row { transition: opacity .3s ease; }

/* When voice is OFF, dim the sub-settings */
body:has(#tog-voice:not(.on)) #voice-settings-row,
body:has(#tog-voice:not(.on)) #voice-test-row {
  opacity: .4;
  pointer-events: none;
}

/* Voice select dropdown — compact */
#voice-select {
  min-height: unset !important;
  height: 30px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
}

/* Voice speed slider */
#voice-rate { width: 70px; }

/* Test voice button pulse on click */
#btn-test-voice:active {
  transform: scale(.94);
}
#btn-test-voice.speaking {
  border-color: var(--y);
  color: var(--y);
  animation: voicePulse .8s ease-in-out infinite;
}
@keyframes voicePulse {
  0%,100% { box-shadow: none; }
  50%      { box-shadow: 0 0 12px rgba(255,208,0,.4); }
}

/* Sound wave icon animation on active voice */
.voice-active-indicator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
}
.voice-active-indicator span {
  display: inline-block;
  width: 3px;
  background: var(--y);
  border-radius: 2px;
  animation: soundBar .8s ease-in-out infinite;
}
.voice-active-indicator span:nth-child(1) { height: 6px;  animation-delay: 0s; }
.voice-active-indicator span:nth-child(2) { height: 10px; animation-delay: .12s; }
.voice-active-indicator span:nth-child(3) { height: 14px; animation-delay: .24s; }
.voice-active-indicator span:nth-child(4) { height: 10px; animation-delay: .36s; }
.voice-active-indicator span:nth-child(5) { height: 6px;  animation-delay: .48s; }
@keyframes soundBar {
  0%,100% { transform: scaleY(.5); opacity: .5; }
  50%      { transform: scaleY(1);  opacity: 1;  }
}

/* Light mode voice styles */
body.light #voice-select {
  background: #F8F9FC;
  border-color: #CDD3EE;
  color: #0F1320;
}
body.light #voice-select option { background: #fff; }

/* ═══════════════════════════════════════════════════════════════════════
   ADDITIONAL RESPONSIVE FIXES & ANDROID ENHANCEMENTS
═══════════════════════════════════════════════════════════════════════ */

/* Tap-to-play button */
.tap-play-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,208,0,.1);
  border: 2px solid var(--y);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0 auto;
  transition: transform .2s, background .2s, box-shadow .2s;
  box-shadow: 0 0 20px rgba(255,208,0,.2);
  animation: tapPulse 1.8s ease-in-out infinite;
}
.tap-play-btn:hover,
.tap-play-btn:active { transform: scale(1.1); background: rgba(255,208,0,.2); }
@keyframes tapPulse {
  0%,100% { box-shadow: 0 0 20px rgba(255,208,0,.2); }
  50%      { box-shadow: 0 0 36px rgba(255,208,0,.45); }
}

/* Prevent text selection on interactive elements (mobile) */
.ntab, .btn, .mbn-item, .toggle, .hamburger,
.sidebar-nav-link, .theme-toggle, .tap-play-btn {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* Smooth momentum scrolling on iOS/Android */
.content, .mini-log, .recog-log, .log-table-wrap, .sidebar {
  -webkit-overflow-scrolling: touch;
}

/* Prevent double-tap zoom on buttons */
.btn, .ntab, .mbn-item { touch-action: manipulation; }

/* ── TABLET 768px ── */
@media (max-width: 768px) {

  .stat-cards { grid-template-columns: 1fr 1fr; }
  .dash-grid  { grid-template-columns: 1fr; gap: 12px; }

  .scanner-layout { grid-template-columns: 1fr; }
  .scanner-right  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

  .enroll-layout  { grid-template-columns: 1fr; }
  .settings-grid  { grid-template-columns: 1fr 1fr; gap: 12px; }

  .form-row-2 { grid-template-columns: 1fr 1fr; }

  /* iOS Safari zooms on focus if font-size < 16px — prevent that */
  .form-input, .search-input, select.form-input,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"], input[type="time"],
  input[type="search"], textarea {
    font-size: 16px;
  }
}

/* ── SMALL TABLET / LARGE PHONE 600–768px ── */
@media (max-width: 680px) {
  .scanner-right { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
}

/* ── PHONE 480px ── */
@media (max-width: 480px) {
  .page-header h1 { font-size: 17px; }
  .sc-val          { font-size: 22px; }
  .card-title      { font-size: 12px; }

  /* Stack enroll controls */
  .enroll-controls .btn { flex: 1 1 calc(50% - 6px); justify-content: center; }
  .enroll-form-btns      { flex-direction: column; gap: 8px; }
  .enroll-form-btns .btn { justify-content: center; }

  /* Compact report table */
  .log-table th:nth-child(3),
  .log-table td:nth-child(3) { display: none; } /* hide time on very small */

  /* Compact cam controls */
  .cam-controls { justify-content: center; }
  .cam-controls .btn { font-size: 11px; }
}

/* ── VERY SMALL 360px ── */
@media (max-width: 360px) {
  .content { padding: 8px; padding-bottom: 72px; }
  .topnav  { padding: 0 8px; }
  .brand-name { font-size: 11px; }
  .theme-toggle-label { display: none; }
  .stat-card { padding: 10px; }
  .sc-val    { font-size: 20px; }

  /* 1-column employees on very tiny screens */
  .emp-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
}

/* ── ULTRA-SMALL 320px (iPhone SE 1st gen, Galaxy Fold closed) ── */
@media (max-width: 330px) {
  .content { padding: 6px; }
  .topnav  { padding: 0 6px; gap: 6px; }
  .brand-icon { width: 30px; height: 30px; }
  .brand-name { font-size: 10px; }
  .brand-tag  { display: none; }
  .ntab { padding: 6px 8px; font-size: 10px; }
  .ntab-icon { width: 13px; height: 13px; }
  .stat-cards { grid-template-columns: 1fr; gap: 6px; }
  .emp-grid   { grid-template-columns: 1fr; }
  .sc-val     { font-size: 18px; }
  .card       { padding: 10px; }
  .btn        { font-size: 11px; padding: 8px 10px; }
  .form-row-2 { grid-template-columns: 1fr; }
  .field-row  { grid-template-columns: 1fr; }
  .nav-logout span { display: none; }
}

/* ── CREDIT FOOTER MOBILE ── */
@media (max-width: 600px) {
}

/* ── VIDEO ELEMENT MOBILE FIXES ── */
video {
  /* Prevent full-screen on Android tap */
  -webkit-playsinline: 1;
  /* Hardware acceleration */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* ── CANVAS TOUCH PASSTHROUGH ── */
.cam-wrap canvas {
  pointer-events: none; /* let touch events reach video underneath */
}

/* ── FACE GUIDE MOBILE ── */
@media (max-width: 600px) {
  .guide-box {
    width: 140px;
    height: 170px;
  }
}

/* ── BOTTOM NAV LIGHT MODE ── */
body.light .mbn-item.active {
  color: #8B6F00;
}
body.light .mbn-item.active svg {
  filter: drop-shadow(0 0 3px rgba(180,140,0,.4));
}

/* ── MODEL OVERLAY MOBILE ── */
@media (max-width: 480px) {
  .model-loader {
    min-width: unset;
    width: 90vw;
    padding: 32px 24px;
  }
  .loader-title { font-size: 18px; }
}

/* ── RECOG RESULT MOBILE ── */
@media (max-width: 480px) {
  .recog-result { flex-direction: column; text-align: center; gap: 6px; }
  .recog-avatar { margin: 0 auto; }
}

/* ═══════════════════════════════════════════════════════════════
   AUTH SYSTEM — Navbar User Info, Logout, Users Tab
═══════════════════════════════════════════════════════════════ */

/* ── Navbar user display ── */
.nav-user {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tx);
  padding: 5px 10px;
  border-radius: 20px;
  background: var(--bg3);
  border: 1px solid var(--b);
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 180px;
}
.nav-user svg { flex-shrink: 0; }
#nav-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}
body.light .nav-user {
  background: #F4F6FB;
  border-color: #E4E8F5;
  color: #0F1320;
}

/* ── Logout button ── */
.nav-logout {
  flex-shrink: 0;
  white-space: nowrap;
}
.nav-logout:hover {
  border-color: var(--red) !important;
  color: var(--red) !important;
  background: rgba(239,68,68,.06) !important;
}

/* ── Users Activity Grid ── */
.users-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ── PROGRESSIVE DESKTOP NAVBAR REDUCTION ──
   Prevents tab/element overlap on laptop & narrow-desktop widths
   (e.g. 1280px–1440px, or when a browser side-panel reduces viewport) */

/* < 1600px: shrink nav-user max-width further */
@media (max-width: 1600px) {
  .nav-user { max-width: 130px; }
  #nav-user-name { max-width: 90px; }
}

/* < 1440px: hide nav-user text label, icon only */
@media (max-width: 1440px) {
  .nav-user { max-width: 32px; padding: 6px; justify-content: center; }
  #nav-user-name { display: none; }
}

/* < 1280px: hide AI model status pill (redundant once models load) */
@media (max-width: 1280px) {
  .model-status { display: none; }
  .nav-right .nav-sep:nth-of-type(1) { display: none; }
}

/* < 1180px: hide clock */
@media (max-width: 1180px) {
  .nav-clock { display: none; }
  .nav-right .nav-sep:nth-of-type(2) { display: none; }
}

/* < 1100px: hide nav-user entirely (sign out button remains) */
@media (max-width: 1100px) {
  .nav-user { display: none !important; }
}
@media (max-width: 900px) {
  .nav-logout span,
  .nav-logout { font-size: 0; padding: 8px; gap: 0; }
  .nav-logout svg { margin: 0; width: 14px; height: 14px; }
}
@media (max-width: 768px) {
  .users-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .nav-logout { display: flex; align-items: center; justify-content: center; }
}

/* ── Activity log table — type badges ── */
.act-type-signup { color: var(--grn); font-weight: 700; }
.act-type-login  { color: var(--y);   font-weight: 700; }

/* ── Super Admin badge in Users tab ── */
.pill-superadmin {
  background: linear-gradient(135deg, rgba(255,208,0,.2), rgba(255,190,0,.12));
  color: var(--y);
  border: 1px solid rgba(255,208,0,.4);
  font-weight: 800;
  box-shadow: 0 0 10px rgba(255,208,0,.15);
}
body.light .pill-superadmin {
  background: linear-gradient(135deg, rgba(255,208,0,.22), rgba(255,190,0,.12));
  color: #8B6F00;
  border-color: rgba(180,140,0,.4);
}

/* ═══════════════════════════════════════════════════════════════
   ROLE-BASED ACCESS CONTROL (RBAC) — Hide admin-only UI for users
═══════════════════════════════════════════════════════════════ */

/* ── Role badge in navbar ── */
.nav-role-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 1px 6px;
  border-radius: 8px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.nav-role-badge.admin {
  background: rgba(255,208,0,.18);
  color: var(--y);
}
.nav-role-badge.user {
  background: rgba(59,130,246,.15);
  color: #4DA6FF;
}
body.light .nav-role-badge.admin { background: rgba(255,208,0,.2); color: #8B6F00; }
body.light .nav-role-badge.user  { background: rgba(59,130,246,.12); color: #0A66C2; }

/* Hide role badge alongside name at the same breakpoint */
@media (max-width: 1440px) {
  #nav-role-badge { display: none; }
}

/* ── HIDE ADMIN-ONLY NAV TABS for role-user ── */
body.role-user .ntab[data-tab="dashboard"],
body.role-user .ntab[data-tab="employees"],
body.role-user .ntab[data-tab="reports"],
body.role-user .ntab[data-tab="settings"],
body.role-user .ntab[data-tab="users"] {
  display: none !important;
}

/* ── HIDE ADMIN-ONLY MOBILE BOTTOM NAV ITEMS for role-user ── */
body.role-user .mbn-item[data-tab="dashboard"],
body.role-user .mbn-item[data-tab="employees"] {
  display: none !important;
}

/* ── HIDE ADMIN-ONLY SIDEBAR DRAWER LINKS for role-user ── */
body.role-user .sidebar-nav-link[data-tab="dashboard"],
body.role-user .sidebar-nav-link[data-tab="employees"],
body.role-user .sidebar-nav-link[data-tab="reports"],
body.role-user .sidebar-nav-link[data-tab="settings"],
body.role-user .sidebar-nav-link[data-tab="users"] {
  display: none !important;
}

/* ── HIDE ADMIN-ONLY TAB PANELS for role-user (defense-in-depth) ── */
body.role-user #tab-dashboard,
body.role-user #tab-employees,
body.role-user #tab-reports,
body.role-user #tab-settings,
body.role-user #tab-users {
  display: none !important;
}

/* ── HIDE DASHBOARD STATISTICS SIDEBAR for role-user ──
   (Live Stats, Camera stats, Today's Log — contain
    total-employee counts and system-wide statistics) */
body.role-user .sidebar-section {
  display: none !important;
}
/* On desktop the sidebar would then be empty — remove it entirely */
@media (min-width: 901px) {
  body.role-user .sidebar { display: none !important; }
}

/* ── Re-balance mobile bottom nav for 3 remaining items (Scan, Enroll, More) ── */
body.role-user .mobile-bottomnav {
  justify-content: space-evenly;
}

/* ── Small inline icon buttons (used in Users table actions) ── */
.btn-icon-sm {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: var(--bg3);
  border: 1px solid var(--b);
  color: var(--tx2);
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .15s;
  flex-shrink: 0;
}
.btn-icon-sm:hover {
  background: rgba(255,208,0,.1);
  border-color: var(--y);
  color: var(--y);
  transform: translateY(-1px);
}
.btn-icon-sm.btn-icon-danger:hover {
  background: rgba(239,68,68,.1);
  border-color: var(--red);
  color: var(--red);
}
body.light .btn-icon-sm {
  background: #F4F6FB;
  border-color: #E4E8F5;
  color: #4A5270;
}

/* ── Delete-account row: stack on small phones ── */
.delete-account-row { display: flex; gap: 8px; }
@media (max-width: 420px) {
  .delete-account-row { flex-direction: column; }
  .delete-account-row .btn { width: 100%; justify-content: center; }
}