*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ══════════════════════════════════════
   DARK THEME (default)
══════════════════════════════════════ */
:root {
  --bg:        #0b0f1a;
  --surface:   #111827;
  --surface2:  #1a2235;
  --border:    rgba(255,255,255,0.07);
  --accent:    #00d4b4;
  --accent2:   #0ea5e9;
  --danger:    #f43f5e;
  --warn:      #f59e0b;
  --success:   #10b981;
  --text:      #f0f4ff;
  --muted:     #6b7a99;
  --font-disp: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --topbar-bg: rgba(17,24,39,0.90);
  --sidebar-bg: rgba(17,24,39,0.60);
  --body-grad1: rgba(0,212,180,0.08);
  --body-grad2: rgba(14,165,233,0.07);
  --grid-line:  rgba(255,255,255,0.02);
  --scrollbar:  rgba(255,255,255,0.10);
  --scrollbar-h:rgba(255,255,255,0.20);
  --row-hover:  rgba(255,255,255,0.025);
  --select-bg:  var(--surface2);
  --chart-grid: rgba(255,255,255,0.05);
  --chart-tick: #6b7a99;
  --chart-legend:#f0f4ff;
  --shadow:     0 4px 24px rgba(0,0,0,0.4);
}

/* ══════════════════════════════════════
   LIGHT THEME
══════════════════════════════════════ */
body.light {
  --bg:        #f0f4f8;
  --surface:   #ffffff;
  --surface2:  #f1f5f9;
  --border:    rgba(15,23,42,0.10);
  --accent:    #0284c7;
  --accent2:   #6366f1;
  --danger:    #dc2626;
  --warn:      #d97706;
  --success:   #059669;
  --text:      #0f172a;
  --muted:     #64748b;
  --topbar-bg: #0f172a;
  --sidebar-bg: #ffffff;
  --body-grad1: rgba(2,132,199,0.05);
  --body-grad2: rgba(99,102,241,0.04);
  --grid-line:  rgba(15,23,42,0.03);
  --scrollbar:  rgba(15,23,42,0.12);
  --scrollbar-h:rgba(15,23,42,0.22);
  --row-hover:  rgba(2,132,199,0.04);
  --select-bg:  #f8fafc;
  --chart-grid: rgba(15,23,42,0.06);
  --chart-tick: #64748b;
  --chart-legend:#0f172a;
  --shadow:     0 4px 24px rgba(15,23,42,0.10);
}

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
  background-image:
    radial-gradient(ellipse 80% 50% at 10% -10%, var(--body-grad1) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 110%, var(--body-grad2) 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent, transparent 39px, var(--grid-line) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, var(--grid-line) 40px);
}

/* ── TOPBAR ── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; height: 64px;
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
  transition: background 0.3s;
}
.topbar-brand { display: flex; align-items: center; gap: 12px; }
.brand-icon {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.brand-name {
  font-family: var(--font-disp); font-size: 17px; font-weight: 700;
  background: linear-gradient(90deg, #fff 60%, var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.topbar-right { display: flex; align-items: center; gap: 16px; }
.topbar-date { font-size: 13px; color: #94a3b8; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: #fff;
}

/* ── THEME TOGGLE ── */
.theme-toggle {
  display: flex; align-items: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; overflow: hidden;
  height: 34px;
}
.theme-btn {
  padding: 0 14px; height: 100%;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  background: transparent; border: none; cursor: pointer;
  color: #94a3b8; font-family: var(--font-body);
  transition: background 0.2s, color 0.2s;
  display: flex; align-items: center; gap: 5px;
}
.theme-btn.active {
  background: rgba(255,255,255,0.14);
  color: #ffffff;
}
body.light .theme-toggle {
  background: rgba(15,23,42,0.08);
  border-color: rgba(15,23,42,0.14);
}
body.light .theme-btn { color: #94a3b8; }
body.light .theme-btn.active { background: rgba(15,23,42,0.16); color: #0f172a; }

/* ── LAYOUT ── */
.app-layout { display: flex; min-height: calc(100vh - 64px); }

/* ── SIDEBAR ── */
.sidebar {
  width: 220px; flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  padding: 24px 12px;
  display: flex; flex-direction: column; gap: 4px;
  transition: background 0.3s;
}
.sidebar-section {
  font-size: 10px; font-weight: 600; letter-spacing: 1.2px;
  color: var(--muted); text-transform: uppercase;
  padding: 0 10px; margin: 8px 0 6px;
}
.nav-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--muted); background: transparent; border: none; cursor: pointer;
  transition: all 0.18s; width: 100%; text-align: left;
}
.nav-btn:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.nav-btn.tab-active {
  background: rgba(0,212,180,0.12); color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.nav-icon { font-size: 16px; width: 20px; text-align: center; }

/* ── MAIN ── */
.main-content { flex: 1; padding: 32px 36px; overflow-y: auto; }

/* ── PAGE HEADER ── */
.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 28px;
}
.page-title { font-family: var(--font-disp); font-size: 26px; font-weight: 700; }
.page-subtitle { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ── CONTROLS BAR ── */
.controls-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 20px; margin-bottom: 24px;
}
.ctrl-label { font-size: 13px; color: var(--muted); white-space: nowrap; }
.ctrl-spacer { flex: 1; }

/* ── INPUTS ── */
input[type="date"], input[type="number"], select, .ctrl-input {
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); padding: 8px 12px; border-radius: 7px;
  font-family: var(--font-body); font-size: 14px;
  outline: none; transition: border-color 0.2s;
}
input[type="date"]:focus, input[type="number"]:focus, select:focus {
  border-color: var(--accent);
}

/* ── BUTTONS ── */
button {
  font-family: var(--font-body); cursor: pointer;
  transition: all 0.2s; border: none;
}
.btn-primary {
  padding: 9px 20px; border-radius: 7px;
  font-size: 14px; font-weight: 600;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: var(--bg);
}
.btn-primary:hover { opacity: 0.85; transform: translateY(-1px); }
.btn-ghost {
  padding: 9px 18px; border-radius: 7px;
  font-size: 14px; font-weight: 500;
  background: transparent; border: 1px solid var(--border); color: var(--text);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-danger {
  padding: 9px 18px; border-radius: 7px;
  font-size: 14px; font-weight: 500;
  background: transparent; border: 1px solid rgba(244,63,94,0.3); color: var(--danger);
}
.btn-danger:hover { background: rgba(244,63,94,0.1); }

/* ── CARD ── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; margin-bottom: 20px;
}

/* ── TABLE ── */
table { width: 100%; border-collapse: collapse; }
thead tr { background: var(--surface2); }
th {
  font-family: var(--font-disp); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px; color: var(--muted);
  padding: 14px 20px; text-align: left;
}
td { padding: 13px 20px; font-size: 14px; border-top: 1px solid var(--border); }
tbody tr { transition: background 0.15s; }
tbody tr:hover td { background: var(--row-hover); }

/* row status colours */
tr.present td:first-child { border-left: 3px solid var(--success); }
tr.absent  td:first-child { border-left: 3px solid var(--danger); }
tr.leave   td:first-child { border-left: 3px solid var(--warn); }
tr.wfh     td:first-child { border-left: 3px solid var(--accent2); }
tr.awol    td:first-child { border-left: 3px solid #a855f7; }

/* select inside table */
td select {
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); padding: 6px 10px; border-radius: 6px;
  font-size: 13px; min-width: 130px;
}

/* ── KPI GRID ── */
.kpi-container {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 16px;
  margin-bottom: 24px;
}
.kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 22px 24px; position: relative; overflow: hidden;
}
.kpi::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
}
#kpiPresent::before { background: var(--success); }
#kpiAbsent::before  { background: var(--danger); }
#kpiLeave::before   { background: var(--warn); }
#kpiRate::before    { background: linear-gradient(90deg, var(--accent), var(--accent2)); }

.kpi-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--muted); margin-bottom: 8px;
}
.kpi-value {
  font-family: var(--font-disp); font-size: 36px; font-weight: 800; line-height: 1;
}
#kpiPresent .kpi-value { color: var(--success); }
#kpiAbsent  .kpi-value { color: var(--danger); }
#kpiLeave   .kpi-value { color: var(--warn); }
#kpiRate    .kpi-value {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* ── CHARTS ── */
.charts-row { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }
.chart-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 22px 24px;
}
.chart-title {
  font-family: var(--font-disp); font-size: 14px; font-weight: 700;
  margin-bottom: 16px; color: var(--text);
}
#attendanceChart, #trendChart { max-height: 240px; }

/* ── CALENDAR ── */
#calendar {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 8px; margin-top: 16px;
}
/* Add to style.css */
.day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  padding: 8px;
  text-align: center;
  font-weight: 600;
}

.day-number {
  font-size: 14px;
  font-weight: 700;
}

.day:hover:not(.weekend-day) {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.weekend-day {
  opacity: 0.7;
  cursor: default;
}

.weekend-day:hover {
  transform: none;
  box-shadow: none;
}
/* override inline bg colours from JS with themed versions */
.day[style*="#28a745"] { background: rgba(16,185,129,0.18) !important; color: #10b981 !important; border-color: rgba(16,185,129,0.3) !important; }
.day[style*="#ffc107"] { background: rgba(245,158,11,0.18) !important; color: #f59e0b !important; border-color: rgba(245,158,11,0.3) !important; }
.day[style*="#dc3545"] { background: rgba(244,63,94,0.18)  !important; color: #f43f5e !important; border-color: rgba(244,63,94,0.3)  !important; }
.day[style*="#e0e0e0"] { background: var(--surface2) !important; color: var(--muted) !important; }

/* ── LEGEND ── */
.legend-box {
  margin-top: 20px; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; display: inline-flex; gap: 24px; flex-wrap: wrap;
}
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.green  { background: var(--success); }
.yellow { background: var(--warn); }
.red    { background: var(--danger); }
.grey   { background: var(--muted); }

/* ── SUMMARY TABLE ── */
#summaryResults table { border-radius: 14px; overflow: hidden; }
#summaryResults th { background: var(--surface2); }
#summaryResults td { border-top: 1px solid var(--border); }

/* ── TAB CONTENT ── */
.tab-content { display: none; animation: fadeUp 0.3s ease both; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-h); }

/* ── DAY DETAILS ── */
#dayDetails {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 20px; margin-bottom: 20px;
  font-size: 14px; color: var(--muted);
}
#dayDetails table th { background: var(--surface2); }
#dayDetails strong { color: var(--accent); }

/* ── FILTER ROW ── */
.filter-row {
  display: flex; align-items: center; gap: 12px;
  margin-top: 20px;
}

/* ══════════════════════════════════════
   BULK STATUS APPLY
══════════════════════════════════════ */

/* Checkbox styling */
.bulk-checkbox {
  width: 16px; height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.bulk-checkbox-header { margin: 0; }

/* Highlight selected row */
tr.row-selected td { background: rgba(0,212,180,0.05) !important; }
tr.row-selected td:first-child { border-left: 3px solid var(--accent); }
body.light tr.row-selected td { background: rgba(2,132,199,0.05) !important; }

/* Bulk action bar */
.bulk-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 12px;
  animation: bulkBarIn 0.22s ease both;
  box-shadow: 0 0 0 3px rgba(0,212,180,0.08);
}
body.light .bulk-bar { box-shadow: 0 0 0 3px rgba(2,132,199,0.08); }

@keyframes bulkBarIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bulk-bar-left {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.bulk-bar-right { display: flex; align-items: center; gap: 8px; }

.bulk-count-badge {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #0b0f1a;
  font-weight: 700; font-size: 12px;
  padding: 4px 12px; border-radius: 20px;
  white-space: nowrap;
  font-family: var(--font-body);
}
body.light .bulk-count-badge { color: #fff; }

.bulk-bar-label {
  font-size: 13px; color: var(--muted); white-space: nowrap;
}

.bulk-status-select {
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); padding: 8px 12px; border-radius: 7px;
  font-family: var(--font-body); font-size: 13px;
  outline: none; transition: border-color 0.2s;
  min-width: 170px;
}
.bulk-status-select:focus { border-color: var(--accent); }

.bulk-apply-btn {
  padding: 8px 18px; font-size: 13px; white-space: nowrap;
}
.bulk-clear-btn {
  padding: 8px 14px; font-size: 13px; white-space: nowrap;
  opacity: 0.7;
}
.bulk-clear-btn:hover { opacity: 1; }

/* Bulk toast notification */
.bulk-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(0);
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--text);
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  padding: 12px 24px; border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  z-index: 9999;
  transition: opacity 0.4s, transform 0.4s;
  pointer-events: none;
  white-space: nowrap;
}
.bulk-toast-error {
  border-color: var(--danger);
  box-shadow: 0 8px 32px rgba(244,63,94,0.15);
}

/* ── TREND BOX ── */
#trendBox { margin-bottom: 8px; }

.staff-link {
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
  transition: color 0.2s ease;
}

.staff-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.person-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.person-stat {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}

.person-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  letter-spacing: 0.8px;
}

.person-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}

.person-history-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.person-history-table th,
.person-history-table td {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  text-align: left;
}

.person-history-table th {
  background: var(--surface2);
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .person-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .person-stats {
    grid-template-columns: 1fr;
  }
}

/* ── COMMENT INPUT ── */
.comment-input {
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); padding: 6px 10px; border-radius: 6px;
  font-family: var(--font-body); font-size: 12px;
  width: 100%; min-width: 160px; max-width: 280px;
  outline: none; transition: border-color 0.2s;
  resize: none;
}
.comment-input:focus { border-color: var(--accent); }
.comment-input::placeholder { color: var(--muted); font-style: italic; }

/* ── DEPT KPI OVERRIDES ── */
#deptKpis .kpi::before { background: var(--accent2); }

/* ── PERSON LINE CHART WRAPPER ── */
#staffAnalyticsCard { overflow: visible; }

/* ── STATUS BADGE ── */
.status-badge {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
}
.badge-present { background: rgba(16,185,129,0.15); color: #10b981; }
.badge-absent  { background: rgba(244,63,94,0.15);  color: #f43f5e; }
.badge-leave   { background: rgba(245,158,11,0.15); color: #f59e0b; }
.badge-wfh     { background: rgba(14,165,233,0.15); color: #0ea5e9; }
.badge-awol    { background: rgba(168,85,247,0.15); color: #a855f7; }
.badge-other   { background: rgba(107,122,153,0.15);color: #6b7a99; }

/* ── DEPT TABLE DEPT PILL ── */
.dept-pill {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600; background: rgba(0,212,180,0.12); color: var(--accent);
}

/* ════════════════════════════════════════
   LEADERBOARD
════════════════════════════════════════ */
.podium-wrap { margin-bottom: 32px; }
.podium-stage {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 16px; padding: 40px 24px 0;
}
.podium-card {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; max-width: 240px; position: relative;
}
.podium-medal { font-size: 28px; margin-bottom: 6px; animation: floatMedal 3s ease-in-out infinite; }
@keyframes floatMedal { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.podium-rate  { font-family: var(--font-disp); font-size: 22px; font-weight: 800; margin-bottom: 3px; }
.podium-name  { font-family: var(--font-disp); font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 2px; text-align: center; }
.podium-days  { font-size: 11px; color: var(--muted); margin-bottom: 12px; }
.podium-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-disp); font-size: 22px; font-weight: 800; color: #0b0f1a;
  position: relative; z-index: 2; margin-bottom: -1px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  transition: transform 0.3s ease;
}
.podium-card:hover .podium-avatar { transform: translateY(-6px); }
.podium-block {
  width: 100%; border-radius: 12px 12px 0 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 14px; overflow: hidden; position: relative;
}
.podium-block::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,0.06) 0%,transparent 100%); }
.podium-rank-num { font-family: var(--font-disp); font-size: 48px; font-weight: 800; opacity: 0.1; color: #fff; }

.podium-card.rank-1 .podium-block  { height: 180px; background: linear-gradient(180deg,rgba(255,215,0,0.18),rgba(255,165,0,0.06)); border: 1px solid rgba(255,215,0,0.25); border-bottom: none; }
.podium-card.rank-2 .podium-block  { height: 130px; background: linear-gradient(180deg,rgba(192,192,192,0.15),rgba(168,168,168,0.05)); border: 1px solid rgba(192,192,192,0.2); border-bottom: none; }
.podium-card.rank-3 .podium-block  { height: 100px; background: linear-gradient(180deg,rgba(205,127,50,0.15),rgba(160,82,45,0.05)); border: 1px solid rgba(205,127,50,0.2); border-bottom: none; }
.podium-card.rank-1 .podium-avatar { background: linear-gradient(135deg,#FFD700,#FFA500); }
.podium-card.rank-2 .podium-avatar { background: linear-gradient(135deg,#C0C0C0,#A8A8A8); }
.podium-card.rank-3 .podium-avatar { background: linear-gradient(135deg,#CD7F32,#A0522D); }
.podium-card.rank-1 .podium-rate   { color: #FFD700; }
.podium-card.rank-2 .podium-rate   { color: #C0C0C0; }
.podium-card.rank-3 .podium-rate   { color: #CD7F32; }
.podium-card.rank-1 .podium-name   { font-size: 15px; }

.lb-list-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.lb-list-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; background: var(--surface2);
  font-family: var(--font-disp); font-size: 13px; font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.lb-col-hdr {
  display: grid; grid-template-columns: 52px 1fr 90px 80px 80px 80px 100px;
  padding: 10px 24px; background: var(--surface2);
  border-bottom: 1px solid var(--border); gap: 8px;
}
.lb-col-hdr span { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); text-align: center; }
.lb-col-hdr span:nth-child(2) { text-align: left; }
.lb-row {
  display: grid; grid-template-columns: 52px 1fr 90px 80px 80px 80px 100px;
  align-items: center; padding: 13px 24px;
  border-bottom: 1px solid var(--border); gap: 8px; transition: background 0.15s;
}
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: rgba(255,255,255,0.025); }
.lb-rank { font-family: var(--font-disp); font-size: 18px; font-weight: 800; text-align: center; color: var(--muted); }
.lb-rank.gold   { color: #FFD700; }
.lb-rank.silver { color: #C0C0C0; }
.lb-rank.bronze { color: #CD7F32; }
.lb-avatar-sm {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #0b0f1a; flex-shrink: 0;
}
.lb-name-cell { display: flex; align-items: center; gap: 10px; }
.lb-name      { font-weight: 600; font-size: 14px; }
.lb-dept      { font-size: 11px; color: var(--muted); margin-top: 1px; }
.lb-stat      { text-align: center; }
.lb-stat-val  { font-weight: 700; font-size: 14px; }
.lb-stat-lbl  { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.lb-rate-cell { text-align: center; }
.lb-rate-val  { font-family: var(--font-disp); font-size: 17px; font-weight: 800; }
.lb-rate-bar  { height: 4px; border-radius: 2px; background: var(--surface2); margin-top: 5px; overflow: hidden; }
.lb-rate-fill { height: 100%; border-radius: 2px; transition: width 0.8s ease; }
.lb-empty { padding: 60px 24px; text-align: center; color: var(--muted); font-size: 14px; }

/* ════════════════════════════════════════
   SUB STAFF
════════════════════════════════════════ */
.sub-group-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; margin-bottom: 24px;
}
.sub-group-header {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 24px; background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.sub-group-badge {
  font-family: var(--font-disp); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 4px 10px; border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #0b0f1a; white-space: nowrap;
}
.sub-group-title {
  font-family: var(--font-disp); font-size: 15px; font-weight: 700; color: var(--text);
}
.sub-group-meta {
  margin-left: auto; display: flex; gap: 16px; font-size: 12px; color: var(--muted);
}
.sub-meta-item { display: flex; align-items: center; gap: 5px; }
.sub-meta-dot  { width: 6px; height: 6px; border-radius: 50%; }
.sub-table { width: 100%; border-collapse: collapse; }
.sub-table thead tr { background: rgba(26,34,53,0.5); }
.sub-table th {
  font-family: var(--font-disp); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px; color: var(--muted);
  padding: 12px 20px; text-align: left;
}
.sub-table td { padding: 12px 20px; font-size: 14px; border-top: 1px solid var(--border); }
.sub-table tbody tr { transition: background 0.15s; }
.sub-table tbody tr:hover td { background: var(--row-hover); }
.sub-table tr.present td:first-child { border-left: 3px solid var(--success); }
.sub-table tr.absent  td:first-child { border-left: 3px solid var(--danger); }
.sub-table tr.leave   td:first-child { border-left: 3px solid var(--warn); }
.sub-table tr.wfh     td:first-child { border-left: 3px solid var(--accent2); }
.sub-table tr.awol    td:first-child { border-left: 3px solid #a855f7; }
.sub-table td select {
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); padding: 6px 10px; border-radius: 6px;
  font-size: 13px; min-width: 130px;
}

/* ── COMMENT INPUT ── */
.comment-input {
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); padding: 6px 10px; border-radius: 6px;
  font-family: var(--font-body); font-size: 12px;
  width: 100%; min-width: 160px; max-width: 280px;
  outline: none; transition: border-color 0.2s; resize: none;
}
.comment-input:focus { border-color: var(--accent); }
.comment-input::placeholder { color: var(--muted); font-style: italic; }

/* ── DEPT TABLE DEPT PILL ── */
.dept-pill {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600; background: rgba(0,212,180,0.12); color: var(--accent);
}
/* ── STATUS BADGE ── */
.status-badge {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
}
.badge-present { background: rgba(16,185,129,0.15); color: #10b981; }
.badge-absent  { background: rgba(244,63,94,0.15);  color: #f43f5e; }
.badge-leave   { background: rgba(245,158,11,0.15); color: #f59e0b; }
.badge-wfh     { background: rgba(14,165,233,0.15); color: #0ea5e9; }
.badge-awol    { background: rgba(168,85,247,0.15); color: #a855f7; }
.badge-other   { background: rgba(107,122,153,0.15);color: #6b7a99; }

/* ════ BIOMETRIC REPORT TAB ════ */
.bio-upload-zone{
  border:2px dashed var(--border);border-radius:16px;
  padding:56px 32px;text-align:center;cursor:pointer;
  transition:all .2s;background:var(--surface);margin-bottom:20px;
}
.bio-upload-zone:hover,.bio-upload-zone.drag-over{
  border-color:var(--accent);background:rgba(0,212,180,.05);transform:scale(1.005);
}
.bio-upload-icon{font-size:44px;margin-bottom:14px;}
.bio-upload-title{font-family:var(--font-disp);font-size:20px;font-weight:700;margin-bottom:8px;}
.bio-upload-sub{font-size:13px;color:var(--muted);}

.bio-loaded-banner{
  display:flex;align-items:center;gap:14px;
  background:rgba(16,185,129,.09);border:1px solid rgba(16,185,129,.22);
  border-radius:12px;padding:14px 20px;margin-bottom:20px;
}

.bio-pill{padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;background:var(--surface2);border:1px solid var(--border);color:var(--muted);cursor:pointer;transition:all .15s;}
.bio-pill.active,.bio-pill:hover{background:rgba(0,212,180,.12);border-color:var(--accent);color:var(--accent);}

/* Two-col layout */
.bio-layout{display:grid;grid-template-columns:280px 1fr;gap:20px;align-items:start;}

.bio-list-panel{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;max-height:78vh;overflow-y:auto;position:sticky;top:80px;
}
.bio-list-panel::-webkit-scrollbar{width:4px;}
.bio-list-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px;}

.bio-list-item{
  display:flex;align-items:center;gap:10px;padding:11px 14px;
  cursor:pointer;border-bottom:1px solid var(--border);transition:background .15s;
}
.bio-list-item:hover{background:rgba(255,255,255,.03);}
.bio-list-item.selected{background:rgba(0,212,180,.08);border-left:3px solid var(--accent);}
.bio-list-item:last-child{border-bottom:none;}
.bio-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#0b0f1a;flex-shrink:0;}
.bio-item-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bio-item-sub{font-size:11px;color:var(--muted);}
.bio-item-rate{font-size:11px;font-weight:700;flex-shrink:0;margin-left:auto;}

/* Profile panel */
.bio-profile-panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:28px;overflow-y:auto;max-height:78vh;
}
.bio-profile-panel::-webkit-scrollbar{width:4px;}
.bio-profile-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px;}
.bio-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;}

/* Profile header */
.bio-ph{
  display:flex;align-items:center;gap:20px;padding-bottom:22px;
  border-bottom:1px solid var(--border);margin-bottom:22px;position:relative;
}
.bio-ph::before{content:'';position:absolute;top:-28px;left:-28px;right:-28px;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent2),#6366f1);}
.bio-av-lg{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-disp);font-size:20px;font-weight:800;color:#0b0f1a;box-shadow:0 8px 24px rgba(0,0,0,.4);flex-shrink:0;}
.bio-pname{font-family:var(--font-disp);font-size:20px;font-weight:800;margin-bottom:6px;}
.bio-pmeta{display:flex;gap:12px;flex-wrap:wrap;}
.bio-pmeta span{font-size:12px;color:var(--muted);}
.bio-rate-big{text-align:right;margin-left:auto;flex-shrink:0;}
.bio-rate-num{font-family:var(--font-disp);font-size:34px;font-weight:800;line-height:1;}
.bio-rate-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;}

/* Stat cards row */
.bio-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:22px;}
.bio-stat{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px;position:relative;overflow:hidden;}
.bio-stat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
.bio-stat.sp::before{background:var(--success);}
.bio-stat.sa::before{background:var(--danger);}
.bio-stat.sl::before{background:var(--warn);}
.bio-stat.se::before{background:var(--accent2);}
.bio-stat.so::before{background:#6366f1;}
.bio-stat.sk::before{background:var(--muted);}
.bio-slbl{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:5px;font-weight:600;}
.bio-sval{font-family:var(--font-disp);font-size:22px;font-weight:800;line-height:1;}
.bio-stat.sp .bio-sval{color:var(--success);}
.bio-stat.sa .bio-sval{color:var(--danger);}
.bio-stat.sl .bio-sval{color:var(--warn);}
.bio-stat.se .bio-sval{color:var(--accent2);}
.bio-stat.so .bio-sval{color:#6366f1;}
.bio-stat.sk .bio-sval{color:var(--muted);}

/* Section header */
.bio-sec{font-family:var(--font-disp);font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.bio-sec::after{content:'';flex:1;height:1px;background:var(--border);}

/* Att bars */
.bio-bars{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:20px;}
.bio-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:7px;}
.bio-bar-row:last-child{margin-bottom:0;}
.bio-bar-lbl{font-size:11px;color:var(--muted);width:68px;text-align:right;flex-shrink:0;}
.bio-bar-track{flex:1;height:6px;background:rgba(255,255,255,.05);border-radius:3px;overflow:hidden;}
.bio-bar-fill{height:100%;border-radius:3px;transition:width 1s ease;}
.bio-bar-val{font-size:11px;font-weight:700;width:28px;text-align:right;}

/* Daily table */
.bio-daily{border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.bio-daily table{width:100%;border-collapse:collapse;}
.bio-daily thead tr{background:var(--surface2);}
.bio-daily th{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--muted);padding:9px 12px;text-align:left;}
.bio-daily td{padding:8px 12px;font-size:12px;border-top:1px solid var(--border);}
.bio-daily tbody tr:hover td{background:rgba(255,255,255,.02);}
.bio-daily tbody tr.wkend td{color:rgba(107,122,153,.45);}
.bio-daily tbody tr.absent-day{background:rgba(244,63,94,.03);}
.dchip{display:inline-block;width:30px;text-align:center;padding:1px 0;border-radius:3px;font-size:10px;font-weight:700;}
.dchip.wd{background:rgba(0,212,180,.08);color:var(--accent);}
.dchip.we{background:rgba(107,122,153,.1);color:var(--muted);}
.t-ok{font-weight:600;color:var(--success);}
.t-late{font-weight:600;color:var(--danger);}
.t-empty{color:rgba(107,122,153,.35);font-style:italic;}
.abs-tag{display:inline-block;padding:1px 6px;border-radius:3px;font-size:10px;font-weight:600;background:rgba(244,63,94,.12);color:var(--danger);}
.wk-tag{font-size:10px;color:rgba(107,122,153,.35);}
/* ── Biometric sync bar ── */
.bio-sync-bar {
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(135deg, rgba(0,212,180,0.07), rgba(14,165,233,0.07));
  border: 1px solid rgba(0,212,180,0.22);
  border-radius: 12px; padding: 16px 22px; margin-bottom: 20px;
}
.bio-sync-bar .btn-primary { font-size: 13px; padding: 10px 22px; white-space: nowrap; }
.bio-sync-bar .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ════════════════════════════════════════
   STATUS ROW COLOURS (all 19 statuses)
   Class prefix: s-  e.g. s-present, s-pub-holiday
════════════════════════════════════════ */

/* Left-border accent on first cell */
tr[class^="s-"] td:first-child,
tr[class*=" s-"] td:first-child { border-left: 3px solid transparent; }

/* Green family — counted as PRESENT */
tr.s-present          td:first-child { border-left-color: #10b981; background: rgba(16,185,129,0.04); }
tr.s-wfh              td:first-child { border-left-color: #0ea5e9; background: rgba(14,165,233,0.04); }
tr.s-training         td:first-child { border-left-color: #6366f1; background: rgba(99,102,241,0.04); }
tr.s-cust-app         td:first-child { border-left-color: #8b5cf6; background: rgba(139,92,246,0.04); }
tr.s-campus           td:first-child { border-left-color: #06b6d4; background: rgba(6,182,212,0.04); }
tr.s-staff-event      td:first-child { border-left-color: #a78bfa; background: rgba(167,139,250,0.04); }
tr.s-incent-day       td:first-child { border-left-color: #34d399; background: rgba(52,211,153,0.04); }
tr.s-pub-holiday      td:first-child { border-left-color: #2dd4bf; background: rgba(45,212,191,0.04); }
tr.s-1-2-day          td:first-child { border-left-color: #86efac; background: rgba(134,239,172,0.04); }
tr.s-study-leave      td:first-child { border-left-color: #4ade80; background: rgba(74,222,128,0.04); }
tr.s-special-leave    td:first-child { border-left-color: #a3e635; background: rgba(163,230,53,0.04); }
tr.s-maternity-leave  td:first-child { border-left-color: #fb7185; background: rgba(251,113,133,0.06); }

/* Red family — counted as ABSENT */
tr.s-absent           td:first-child { border-left-color: #f43f5e; background: rgba(244,63,94,0.05); }
tr.s-awol             td:first-child { border-left-color: #e11d48; background: rgba(225,29,72,0.06); }
tr.s-frl              td:first-child { border-left-color: #be123c; background: rgba(190,18,60,0.05); }

/* Amber family — counted as LEAVE */
tr.s-leave            td:first-child { border-left-color: #f59e0b; background: rgba(245,158,11,0.04); }
tr.s-sick             td:first-child { border-left-color: #fb923c; background: rgba(251,146,60,0.04); }
tr.s-unpaid           td:first-child { border-left-color: #fbbf24; background: rgba(251,191,36,0.04); }
tr.s-doc-apt          td:first-child { border-left-color: #f97316; background: rgba(249,115,22,0.04); }

/* Sub-table same colours */
.sub-table tr.s-present         td:first-child { border-left-color: #10b981; }
.sub-table tr.s-absent          td:first-child { border-left-color: #f43f5e; }
.sub-table tr.s-leave           td:first-child { border-left-color: #f59e0b; }
.sub-table tr.s-sick            td:first-child { border-left-color: #fb923c; }
.sub-table tr.s-wfh             td:first-child { border-left-color: #0ea5e9; }
.sub-table tr.s-awol            td:first-child { border-left-color: #e11d48; }
.sub-table tr.s-frl             td:first-child { border-left-color: #be123c; }
.sub-table tr.s-unpaid          td:first-child { border-left-color: #fbbf24; }
.sub-table tr.s-doc-apt         td:first-child { border-left-color: #f97316; }
.sub-table tr.s-training        td:first-child { border-left-color: #6366f1; }
.sub-table tr.s-cust-app        td:first-child { border-left-color: #8b5cf6; }
.sub-table tr.s-pub-holiday     td:first-child { border-left-color: #2dd4bf; }
.sub-table tr.s-staff-event     td:first-child { border-left-color: #a78bfa; }
.sub-table tr.s-incent-day      td:first-child { border-left-color: #34d399; }
.sub-table tr.s-1-2-day         td:first-child { border-left-color: #86efac; }
.sub-table tr.s-campus          td:first-child { border-left-color: #06b6d4; }
.sub-table tr.s-maternity-leave td:first-child { border-left-color: #fb7185; }
.sub-table tr.s-special-leave   td:first-child { border-left-color: #a3e635; }
.sub-table tr.s-study-leave     td:first-child { border-left-color: #4ade80; }

/* Status badge colours in history/analytics */
.badge-frl       { background: rgba(190,18,60,0.15);   color: #be123c; }
.badge-sick      { background: rgba(251,146,60,0.15);  color: #fb923c; }
.badge-unpaid    { background: rgba(251,191,36,0.15);  color: #fbbf24; }
.badge-doc-apt   { background: rgba(249,115,22,0.15);  color: #f97316; }
.badge-wfh       { background: rgba(14,165,233,0.15);  color: #0ea5e9; }
.badge-training  { background: rgba(99,102,241,0.15);  color: #6366f1; }
.badge-campus    { background: rgba(6,182,212,0.15);   color: #06b6d4; }
.badge-holiday   { background: rgba(45,212,191,0.15);  color: #2dd4bf; }

/* ── DELETE STAFF BUTTON ── */
.btn-delete-staff {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid rgba(244,63,94,0.25);
  color: var(--danger);
  font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.15s;
  opacity: 0.55;
}
.btn-delete-staff:hover {
  background: rgba(244,63,94,0.12);
  border-color: rgba(244,63,94,0.55);
  opacity: 1;
  transform: scale(1.1);
}

/* Inline delete confirm */
.delete-confirm-inline {
  display: flex; align-items: center; gap: 5px;
  animation: fadeIn 0.15s ease;
}
.delete-confirm-label {
  font-size: 11px; color: var(--danger); font-weight: 600; white-space: nowrap;
}
.btn-confirm-yes {
  padding: 3px 9px; border-radius: 5px; font-size: 11px; font-weight: 700;
  background: var(--danger); color: #fff; border: none; cursor: pointer;
  transition: opacity 0.15s;
}
.btn-confirm-yes:hover { opacity: 0.85; }
.btn-confirm-no {
  padding: 3px 9px; border-radius: 5px; font-size: 11px; font-weight: 600;
  background: transparent; border: 1px solid var(--border); color: var(--muted); cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-confirm-no:hover { border-color: var(--accent); color: var(--accent); }

/* Remote status row colour */
tr.s-remote td:first-child { border-left-color: #22d3ee; background: rgba(34,211,238,0.04); }
.sub-table tr.s-remote td:first-child { border-left-color: #22d3ee; }

/* ── ADD STAFF MODAL ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }

.modal-box {
  background: var(--surface);
  border: 1px solid rgba(0,212,180,0.18);
  border-radius: 16px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,212,180,0.06);
  width: 100%;
  max-width: 440px;
  overflow: hidden;
  animation: slideUp 0.2s cubic-bezier(.34,1.4,.64,1);
}
@keyframes slideUp { from { transform:translateY(24px); opacity:0 } to { transform:translateY(0); opacity:1 } }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.modal-title {
  font-family: var(--font-disp);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}
.modal-close {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.modal-close:hover { background: rgba(244,63,94,0.15); color: var(--danger); }

.modal-body {
  padding: 22px 24px 10px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--surface);
}
.modal-field { display: flex; flex-direction: column; gap: 7px; }
.modal-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.modal-input {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  background: var(--surface2);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  font-family: var(--font-body);
  width: 100%;
  box-sizing: border-box;
}
.modal-input::placeholder { color: var(--muted); }
.modal-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,212,180,0.12);
}
/* Make the dept select options readable in dark mode */
.modal-input option {
  background: var(--surface2);
  color: var(--text);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* ══════════════════════════════════════════════════
   LIGHT THEME — targeted overrides for hardcoded colours
══════════════════════════════════════════════════ */

/* Bio daily table hover */
body.light .bio-daily tbody tr:hover td { background: rgba(2,132,199,0.04); }
body.light .bio-daily tbody tr.absent-day { background: rgba(220,38,38,0.03); }

/* Nav active state light */
body.light .nav-btn:hover { background: rgba(2,132,199,0.07); color: var(--text); }
body.light .nav-btn.tab-active {
  background: rgba(2,132,199,0.10); color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Sidebar section label */
body.light .sidebar-section { color: #94a3b8; }

/* KPI gradient text — fix for light mode */
body.light #kpiRate .kpi-value {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Chart legend text */
body.light .chart-title { color: var(--text); }

/* Dept pill light */
body.light .dept-pill {
  background: rgba(2,132,199,0.08);
  border: 1px solid rgba(2,132,199,0.18);
  color: #0369a1;
}

/* Status badges light */
body.light .badge-present { background: #dcfce7; color: #166534; }
body.light .badge-absent  { background: #fee2e2; color: #991b1b; }
body.light .badge-leave   { background: #fef9c3; color: #854d0e; }
body.light .badge-other   { background: #f1f5f9; color: #475569; }

/* Sub-group card */
body.light .sub-group-card {
  background: var(--surface);
  border-color: var(--border);
}
body.light .sub-group-header { background: var(--surface2); }
body.light .sub-group-badge  { background: rgba(2,132,199,0.10); color: var(--accent); }

/* Leaderboard */
body.light .lb-list-header { color: var(--text); border-color: var(--border); }
body.light .lb-row { background: var(--surface); border-color: var(--border); }
body.light .lb-row:hover { background: var(--surface2); }

/* Podium */
body.light .podium-block { background: var(--surface); border-color: var(--border); }
body.light .podium-name  { color: var(--text); }

/* Person stats */
body.light .person-stat { background: var(--surface2); border-color: var(--border); }
body.light .person-stat-label { color: var(--muted); }

/* Day details */
body.light #dayDetails { background: var(--surface); border-color: var(--border); }

/* Bio panels */
body.light .bio-list-panel, body.light .bio-profile-panel {
  background: var(--surface); border-color: var(--border);
}
body.light .bio-card:hover { background: var(--surface2); }
body.light .bio-upload-zone {
  background: var(--surface2); border-color: var(--border);
}
body.light .bio-loaded-banner { background: var(--surface); border-color: var(--border); }
body.light .bio-sync-bar { background: var(--surface2); border-color: var(--border); }

/* Calendar weekend */
body.light .weekend-day { background: #f8fafc !important; border-color: #e2e8f0 !important; }

/* Ctrl input light */
body.light .ctrl-input { background: var(--surface2); color: var(--text); border-color: var(--border); }
body.light input[type="date"], body.light input[type="number"], body.light select {
  background: var(--surface2); color: var(--text); border-color: var(--border);
}

/* Delete confirm buttons light */
body.light .btn-confirm-no { color: var(--muted); border-color: var(--border); }

/* Chart.js tick & grid colours updated via JS — see updateChartTheme() */

/* ── SUB STAFF GROUP ACTIONS ── */
.sub-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sub-group-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.btn-sub-action {
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: inherit;
}
.btn-add-member {
  border-color: rgba(99,102,241,0.4);
  color: #6366f1;
  background: rgba(99,102,241,0.07);
}
.btn-add-member:hover {
  background: rgba(99,102,241,0.15);
  border-color: #6366f1;
}
.btn-delete-group {
  border-color: rgba(239,68,68,0.3);
  color: #ef4444;
  background: rgba(239,68,68,0.06);
}
.btn-delete-group:hover {
  background: rgba(239,68,68,0.14);
  border-color: #ef4444;
}

/* Light mode overrides for group actions */
[data-theme="light"] .btn-add-member { background: #EEF2FF; }
[data-theme="light"] .btn-add-member:hover { background: #E0E7FF; }
[data-theme="light"] .btn-delete-group { background: #FEF2F2; }
[data-theme="light"] .btn-delete-group:hover { background: #FEE2E2; }

/* ── MEMBER PICKLIST ── */
.member-picklist {
  max-height: 220px;
  overflow-y: auto;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface2, var(--bg));
  margin-top: 2px;
}
.picklist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
  gap: 10px;
}
.picklist-item:last-child { border-bottom: none; }
.picklist-item:hover { background: rgba(14,165,233,0.06); }
.picklist-item.selected {
  background: rgba(14,165,233,0.12);
  border-left: 3px solid var(--accent);
}
.picklist-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.picklist-dept {
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  background: rgba(14,165,233,0.1);
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}
.picklist-loading,
.picklist-empty {
  padding: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* Light mode */
[data-theme="light"] .member-picklist { background: #F8FAFC; }
[data-theme="light"] .picklist-item:hover { background: #EFF6FF; }
[data-theme="light"] .picklist-item.selected { background: #DBEAFE; }

/* ── SUB STAFF DATE PICKER — blur future dates ── */
#subDatePicker::-webkit-calendar-picker-indicator {
  cursor: pointer;
}
/* Future dates visually dimmed via input styling when value exceeds max */
#subDatePicker[max]:out-of-range {
  color: var(--muted);
  opacity: 0.4;
}

/* ── SUB STAFF TWO-CHOICE DELETE ── */
.sub-delete-choice {
  gap: 5px !important;
  flex-wrap: nowrap !important;
  align-items: center;
}
.btn-confirm-group-only {
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(245,158,11,0.12);
  color: #d97706;
  border: 1px solid rgba(245,158,11,0.45);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}
.btn-confirm-group-only:hover {
  background: rgba(245,158,11,0.24);
  border-color: #d97706;
}
.btn-confirm-system-del {
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  background: var(--danger, #ef4444);
  color: #fff;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
  font-family: inherit;
}
.btn-confirm-system-del:hover { opacity: 0.82; }
.btn-confirm-group-only:disabled,
.btn-confirm-system-del:disabled { opacity: 0.4; cursor: default; }