/* ═══════════════════════════════════════════════════════════════
   GLOBAL DARK THEME — MeetingApp
   Loaded in base.html — applies to every page.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..800;1,14..32,300..800&display=swap');

/* ── Design Tokens ────────────────────────────────────────────── */
:root {
  --obs:        #0B0F19;
  --obs-1:      #0E1420;
  --obs-2:      #141C2C;
  --obs-3:      #1A2338;
  --glass:      rgba(255,255,255,0.03);
  --glass-md:   rgba(255,255,255,0.055);
  --glass-lg:   rgba(255,255,255,0.09);
  --border:     rgba(255,255,255,0.07);
  --border-md:  rgba(255,255,255,0.13);
  --txt-1:      #EEF2FF;
  --txt-2:      #8892A8;
  --txt-3:      #3E4B5C;
  --violet:     #818CF8;
  --violet-s:   rgba(129,140,248,0.14);
  --cyan:       #22D3EE;
  --cyan-s:     rgba(34,211,238,0.12);
  --emerald:    #10B981;
  --emerald-s:  rgba(16,185,129,0.13);
  --coral:      #F97316;
  --coral-s:    rgba(249,115,22,0.13);
  --amber:      #FBBF24;
  --amber-s:    rgba(251,191,36,0.13);
  --rose:       #FB7185;
  --rose-s:     rgba(251,113,133,0.13);
}

/* ── Page Base ────────────────────────────────────────────────── */
body {
  background: var(--obs) !important;
  color: var(--txt-1) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.container { max-width: 1400px !important; }

/* ── Navbar ───────────────────────────────────────────────────── */
.navbar.bg-primary {
  background: rgba(8,11,20,0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid var(--border-md) !important;
  box-shadow: none !important;
}
.nav-link { color: var(--txt-2) !important; font-size: 0.84rem; font-weight: 500; transition: color 0.2s; }
.nav-link:hover { color: var(--txt-1) !important; }
.btn-outline-light {
  border-color: var(--border-md) !important;
  color: var(--txt-2) !important;
  font-size: 0.81rem !important;
  background: transparent !important;
}
.btn-outline-light:hover {
  background: var(--glass-md) !important;
  color: var(--txt-1) !important;
  border-color: var(--border-md) !important;
}

/* ── Flash Alerts ─────────────────────────────────────────────── */
.alert { border-radius: 12px; font-size: 0.84rem; }
.alert-danger  { background: var(--rose-s)    !important; border-color: rgba(251,113,133,0.25) !important; color: var(--rose)    !important; }
.alert-success { background: var(--emerald-s) !important; border-color: rgba(16,185,129,0.25)  !important; color: var(--emerald) !important; }
.alert-warning { background: var(--amber-s)   !important; border-color: rgba(251,191,36,0.25)  !important; color: var(--amber)   !important; }
.alert-info    { background: var(--cyan-s)    !important; border-color: rgba(34,211,238,0.2)   !important; color: var(--cyan)    !important; }
.btn-close { filter: invert(1) brightness(0.7); }

/* ── Breadcrumb ───────────────────────────────────────────────── */
.breadcrumb-item a { color: var(--violet); text-decoration: none; transition: color 0.2s; }
.breadcrumb-item a:hover { color: var(--cyan); }
.breadcrumb-item.active { color: var(--txt-2); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--txt-3); }

/* ── Glass Card ───────────────────────────────────────────────── */
.g-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 18px;
  transition: border-color 0.25s;
}
.g-card:hover { border-color: var(--border-md); }

/* ── Section Label ────────────────────────────────────────────── */
.section-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--txt-2);
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.section-label i { color: var(--txt-2); }
.section-label--lg { font-size: 0.95rem; letter-spacing: 0.06em; color: #FFFFFF; font-weight: 800; }
.section-label--lg i { color: #FFFFFF; }
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.section-sublabel {
  font-size: 0.72rem; color: var(--txt-3); margin-top: -10px; margin-bottom: 16px;
  letter-spacing: 0.01em; line-height: 1.5;
}
.section-sublabel strong { color: rgba(255,255,255,0.55); font-weight: 600; }

/* ── Action Bar ───────────────────────────────────────────────── */
.action-bar {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: 18px; padding: 18px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 28px;
}
.action-bar-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.025em; color: var(--txt-1); margin: 0; }
.action-bar-sub   { font-size: 0.76rem; color: var(--txt-2); margin-top: 3px; }

/* ── Metric Card Grid ─────────────────────────────────────────── */
.mc-grid { display: grid; gap: 14px; }
.mc-grid-4 { grid-template-columns: repeat(4, 1fr); }
.mc-grid-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) {
  .mc-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .mc-grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .mc-grid-4, .mc-grid-6 { grid-template-columns: repeat(2, 1fr); }
}
.mc-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .mc-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .mc-grid-3 { grid-template-columns: 1fr; } }

/* ── Metric Card ──────────────────────────────────────────────── */
.mc {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: 18px; padding: 22px 20px 18px;
  position: relative; overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s, box-shadow 0.2s;
}
.mc:hover { transform: translateY(-2px); border-color: var(--border-md); box-shadow: 0 16px 48px rgba(0,0,0,0.55); }
.mc-link { cursor: pointer; color: inherit; display: block; }
.mc-link:hover { transform: translateY(-4px); border-color: var(--border-md); }
.mc-link .mc-label::after { content: '\F285'; font-family: 'bootstrap-icons'; font-size: 0.6rem; margin-left: 5px; opacity: 0; transition: opacity 0.2s; }
.mc-link:hover .mc-label::after { opacity: 0.55; }
.mc-active { border-color: var(--violet) !important; box-shadow: 0 0 0 1px var(--violet), 0 16px 48px rgba(0,0,0,0.55); }
.mc::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 1px; border-radius: 18px 18px 0 0;
}
.mc-violet::after  { background: linear-gradient(90deg, var(--violet), transparent 70%); }
.mc-cyan::after    { background: linear-gradient(90deg, var(--cyan),   transparent 70%); }
.mc-emerald::after { background: linear-gradient(90deg, var(--emerald),transparent 70%); }
.mc-coral::after   { background: linear-gradient(90deg, var(--coral),  transparent 70%); }
.mc-amber::after   { background: linear-gradient(90deg, var(--amber),  transparent 70%); }
.mc-rose::after    { background: linear-gradient(90deg, var(--rose),   transparent 70%); }

.mc-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; margin-bottom: 14px; }
.mc-violet  .mc-icon { background: var(--violet-s);  color: var(--violet); }
.mc-cyan    .mc-icon { background: var(--cyan-s);    color: var(--cyan); }
.mc-emerald .mc-icon { background: var(--emerald-s); color: var(--emerald); }
.mc-coral   .mc-icon { background: var(--coral-s);   color: var(--coral); }
.mc-amber   .mc-icon { background: var(--amber-s);   color: var(--amber); }
.mc-rose    .mc-icon { background: var(--rose-s);    color: var(--rose); }

.mc-val { font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; margin-bottom: 6px; }
.mc-violet  .mc-val { color: var(--violet); }
.mc-cyan    .mc-val { color: var(--cyan); }
.mc-emerald .mc-val { color: var(--emerald); }
.mc-coral   .mc-val { color: var(--coral); }
.mc-amber   .mc-val { color: var(--amber); }
.mc-rose    .mc-val { color: var(--rose); }

.mc-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--txt-2); }
.mc-sub   { font-size: 0.73rem; color: var(--txt-3); margin-top: 5px; }

/* SVG progress ring */
.mc-ring { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; opacity: 0.75; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 3.5; }
.ring-fg { fill: none; stroke-width: 3.5; stroke-linecap: round; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn-glass {
  background: var(--glass-md); border: 1px solid var(--border-md);
  color: var(--txt-2); border-radius: 10px;
  font-size: 0.81rem; font-weight: 500; padding: 8px 14px;
  transition: all 0.2s; cursor: pointer; display: inline-flex; align-items: center;
  text-decoration: none;
}
.btn-glass:hover { background: var(--glass-lg); color: var(--txt-1); border-color: rgba(255,255,255,0.2); }

.btn-primary-glow {
  background: linear-gradient(135deg, #6366F1 0%, #818CF8 100%);
  border: none; color: #fff !important;
  border-radius: 10px; font-size: 0.82rem; font-weight: 600; padding: 8px 18px;
  box-shadow: 0 4px 20px rgba(99,102,241,0.4);
  transition: all 0.2s; cursor: pointer; display: inline-flex; align-items: center;
}
.btn-primary-glow:hover { filter: brightness(1.1); box-shadow: 0 6px 28px rgba(99,102,241,0.55); }
.btn-primary-glow:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-view {
  display: inline-block;
  background: var(--glass-md); border: 1px solid var(--border-md);
  color: var(--violet) !important; border-radius: 8px;
  font-size: 0.74rem; font-weight: 600; padding: 5px 12px;
  text-decoration: none; transition: all 0.2s;
}
.btn-view:hover { background: var(--violet-s); border-color: rgba(129,140,248,0.35); }

/* ── Status Pills ─────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 20px; padding: 2px 9px; border: 1px solid;
  font-size: 0.69rem; font-weight: 600; white-space: nowrap;
}
.pill-coral   { background: var(--coral-s);   color: var(--coral);   border-color: rgba(249,115,22,0.25); }
.pill-emerald { background: var(--emerald-s); color: var(--emerald); border-color: rgba(16,185,129,0.25); }
.pill-violet  { background: var(--violet-s);  color: var(--violet);  border-color: rgba(129,140,248,0.25); }
.pill-cyan    { background: var(--cyan-s);    color: var(--cyan);    border-color: rgba(34,211,238,0.2); }
.pill-amber   { background: var(--amber-s);   color: var(--amber);   border-color: rgba(251,191,36,0.25); animation: pulse-amber 2.4s ease-in-out infinite; }

/* ── Keyframes ────────────────────────────────────────────────── */
@keyframes pulse-amber { 0%,100% { opacity:1; } 50% { opacity:0.6; } }
@keyframes card-rise   { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* ── Score Mini-Bar ───────────────────────────────────────────── */
.score-cell  { display: flex; flex-direction: column; gap: 3px; min-width: 36px; }
.score-val   { font-size: 0.8rem; font-weight: 600; color: var(--txt-1); line-height: 1; }
.score-track { height: 3px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; }
.score-fill  { height: 100%; border-radius: 2px; }
.sf-high { background: var(--emerald); }
.sf-mid  { background: var(--amber); }
.sf-low  { background: var(--coral); }

/* ── Camera Bar ───────────────────────────────────────────────── */
.cam-cell  { display: flex; align-items: center; gap: 6px; min-width: 56px; }
.cam-track { height: 3px; flex: 1; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; min-width: 24px; }
.cam-fill  { height: 100%; border-radius: 2px; }
.cf-good   { background: var(--emerald); }
.cf-warn   { background: var(--amber); }
.cf-bad    { background: var(--coral); }
.cam-label { font-size: 0.77rem; font-weight: 600; color: var(--txt-1); min-width: 34px; }

/* ── Flag Rate Pill ───────────────────────────────────────────── */
.frate-high { background: var(--coral-s);   color: var(--coral);   border: 1px solid rgba(249,115,22,0.25); }
.frate-mid  { background: var(--amber-s);   color: var(--amber);   border: 1px solid rgba(251,191,36,0.25); }
.frate-low  { background: var(--emerald-s); color: var(--emerald); border: 1px solid rgba(16,185,129,0.25); }

/* ── Dark Table ───────────────────────────────────────────────── */
.d-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.79rem; }
.d-tbl thead th {
  padding: 10px 14px;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--txt-3);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.d-tbl tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--txt-2); vertical-align: middle; }
.d-tbl tbody tr:last-child td { border-bottom: none; }
.d-tbl tbody tr { transition: background 0.15s; }
.d-tbl tbody tr:hover { background: var(--glass-md); }
.row-f > td:first-child { border-left: 3px solid var(--coral); }
.row-p > td:first-child { border-left: 3px solid var(--emerald); }

/* ── Teacher Chip ─────────────────────────────────────────────── */
.teacher-chip { display: inline-flex; align-items: center; gap: 8px; }
.t-avatar {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, #6366F1 0%, #22D3EE 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 700; color: #fff;
}
.t-name { font-size: 0.79rem; font-weight: 500; color: var(--txt-1); }

/* ── Inline Data Links ────────────────────────────────────────── */
.tc-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--cyan-s); color: var(--cyan) !important;
  border: 1px solid rgba(34,211,238,0.2); border-radius: 8px;
  padding: 2px 8px; font-size: 0.7rem; font-weight: 600;
  text-decoration: none; transition: background 0.2s;
}
.tc-badge:hover { background: rgba(34,211,238,0.2); }

.rec-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--glass-md); border: 1px solid var(--border-md);
  border-radius: 8px; color: var(--txt-2);
  text-decoration: none; transition: all 0.2s; vertical-align: middle;
}
.rec-btn:hover { background: var(--violet-s); border-color: rgba(129,140,248,0.3); color: var(--violet); }

/* ── Placeholder / Empty ──────────────────────────────────────── */
.val-dash { display: inline-block; width: 18px; height: 2px; background: rgba(255,255,255,0.1); border-radius: 2px; vertical-align: middle; }

/* ── Date Cell ────────────────────────────────────────────────── */
.date-cell { color: var(--txt-3); font-size: 0.74rem; white-space: nowrap; }

/* ── Audit status element ─────────────────────────────────────── */
#audit-status { font-size: 0.79rem; color: var(--txt-2); }

/* ── Empty State ──────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 64px 20px; }
.empty-state i { font-size: 2.8rem; display: block; margin-bottom: 14px; color: var(--txt-3); }
.empty-state p { font-size: 0.86rem; color: var(--txt-2); }

/* ── Inputs ───────────────────────────────────────────────────── */
input[type=date], input[type=text] {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: var(--txt-1) !important;
  color-scheme: dark;
  border-radius: 8px !important; padding: 6px 10px !important;
  font-size: 0.8rem !important; font-family: inherit !important;
  outline: none;
}
input[type=date]:focus { border-color: var(--violet) !important; box-shadow: 0 0 0 3px var(--violet-s) !important; }
/* Force the native calendar icon to match the dark theme */
input[type=date]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.55);
  cursor: pointer;
}
input[type=date]::-webkit-calendar-picker-indicator:hover { filter: invert(1) opacity(0.9); }

/* ── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* ── Dashboard Header ─────────────────────────────────────────── */
.dash-header {
  background: rgba(14,20,32,0.82);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-md); border-radius: 20px;
  padding: 20px 26px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 24px;
  box-shadow: 0 2px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
.dash-title {
  font-size: 1.3rem; font-weight: 800; letter-spacing: -0.03em;
  color: var(--txt-1); margin: 0 0 3px;
  display: flex; align-items: center; gap: 10px;
}
.dash-title-icon {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--violet-s); color: var(--violet);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.dash-sub     { font-size: 0.76rem; color: var(--txt-2); margin: 0; }
.dash-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Camera Pending Banner ────────────────────────────────────── */
.cam-pending-banner {
  background: rgba(251,191,36,0.06); border: 1px solid rgba(251,191,36,0.2);
  border-radius: 12px; padding: 11px 18px;
  display: flex; align-items: center; gap: 10px;
  font-size: 0.82rem; color: var(--amber); margin-bottom: 22px;
  animation: pulse-amber 2.4s ease-in-out infinite;
}
.cam-pending-banner a { color: var(--violet); text-decoration: none; font-weight: 600; }
.cam-pending-banner a:hover { color: var(--cyan); }

/* ── Audit Summary Strip ──────────────────────────────────────── */
.audit-summary-row { display: flex; gap: 10px; flex-wrap: wrap; }
.asm-pill {
  display: inline-flex; flex-direction: column; align-items: center;
  background: var(--glass); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 22px; flex: 1; min-width: 100px;
}
.asm-val   { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.asm-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--txt-2); margin-top: 5px; }

/* ── Flag Breakdown Bars ──────────────────────────────────────── */
.fbd-row   { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fbd-label { font-size: 0.76rem; color: var(--txt-2); width: 160px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbd-track { flex: 1; height: 4px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; }
.fbd-fill  { height: 100%; border-radius: 2px; }
.fbd-coral  { background: var(--coral); }
.fbd-amber  { background: var(--amber); }
.fbd-violet { background: var(--violet); }
.fbd-count  { font-size: 0.73rem; color: var(--txt-3); width: 60px; text-align: right; flex-shrink: 0; }

/* ── Card Stream Container ────────────────────────────────────── */
.card-stream { display: flex; flex-direction: column; gap: 8px; }

/* ── Recently Flagged Mini-Card ───────────────────────────────── */
.rflag-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--glass); border: 1px solid var(--border);
  border-left: 3px solid var(--coral); border-radius: 12px;
  padding: 12px 16px; text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
  opacity: 0; animation: card-rise 0.28s ease forwards;
}
.rflag-card:hover { background: var(--glass-md); border-color: var(--border-md); }
.rflag-topic  { font-size: 0.82rem; font-weight: 600; color: var(--txt-1); margin-bottom: 3px; }
.rflag-meta   { font-size: 0.71rem; color: var(--txt-3); }
.rflag-reason { font-size: 0.69rem; color: var(--coral); margin-top: 3px; }
.rflag-date   { font-size: 0.7rem; color: var(--txt-3); white-space: nowrap; flex-shrink: 0; }

/* ── Week-over-week Deltas ────────────────────────────────────── */
.delta-up   { color: var(--emerald); font-size: 0.7rem; font-weight: 600; }
.delta-down { color: var(--coral);   font-size: 0.7rem; font-weight: 600; }
.delta-flat { color: var(--txt-3);   font-size: 0.7rem; }

/* ── Quality Metric Mini-Bar ──────────────────────────────────── */
.qm-track { height: 3px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.qm-fill  { height: 100%; border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD GRID & ADVANCED COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* ── Dashboard Two-Column Grid ────────────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }

/* ── Audit Health Capsule ─────────────────────────────────────── */
.health-capsule {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
}
.health-capsule::before {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 210px; height: 210px;
  background: radial-gradient(circle, var(--hc-glow, rgba(16,185,129,0.07)) 0%, transparent 70%);
  pointer-events: none;
}
.hc-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.hc-id    { display: flex; align-items: center; gap: 12px; }
.hc-icon  {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.hc-title { font-size: 0.8rem; font-weight: 600; color: var(--txt-2); line-height: 1.2; }
.hc-sub   { font-size: 0.68rem; color: var(--txt-3); margin-top: 2px; }

.hc-stats {
  display: flex;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
}
.hc-stat { display: flex; flex-direction: column; align-items: center; padding: 14px 0; flex: 1; }
.hc-stat + .hc-stat { border-left: 1px solid var(--border); }
.hc-stat-val { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 5px; }
.hc-stat-lbl { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--txt-3); }

.hc-split-track {
  height: 4px; border-radius: 2px; overflow: hidden;
  display: flex; gap: 2px; margin-bottom: 10px;
  background: rgba(255,255,255,0.04);
}
.hc-split-pass { height: 100%; border-radius: 2px; background: var(--emerald); }
.hc-split-flag { height: 100%; border-radius: 2px; background: var(--coral); }

.hc-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.hc-rate-txt { font-size: 0.74rem; color: var(--txt-2); }
.hc-rate-txt strong { color: var(--txt-1); }

/* ── Flag Distribution Matrix ─────────────────────────────────── */
.fdm-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
}
.fdm-row + .fdm-row { border-top: 1px solid var(--border); }

.fdm-pill {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.71rem; font-weight: 600;
  padding: 3px 9px; border-radius: 20px; border: 1px solid;
  white-space: nowrap; line-height: 1.4;
}
.fdm-coral  { color: var(--coral);  background: var(--coral-s);  border-color: rgba(249,115,22,0.25);  box-shadow: 0 0 10px rgba(249,115,22,0.18); }
.fdm-amber  { color: var(--amber);  background: var(--amber-s);  border-color: rgba(251,191,36,0.25);   box-shadow: 0 0 10px rgba(251,191,36,0.18); }
.fdm-violet { color: var(--violet); background: var(--violet-s); border-color: rgba(129,140,248,0.25);  box-shadow: 0 0 10px rgba(129,140,248,0.18); }
.fdm-cyan   { color: var(--cyan);   background: var(--cyan-s);   border-color: rgba(34,211,238,0.2);    box-shadow: 0 0 10px rgba(34,211,238,0.15); }

.fdm-track { flex: 1; height: 5px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; }
.fdm-fill {
  height: 100%; border-radius: 3px;
  transform-origin: left center;
  transform: scaleX(0);
  animation: fdm-in 0.9s cubic-bezier(0.34, 1.1, 0.64, 1) forwards;
  animation-delay: var(--fd, 0s);
}
@keyframes fdm-in { to { transform: scaleX(1); } }

.fdm-count { flex-shrink: 0; font-size: 0.74rem; font-weight: 600; color: var(--txt-2); text-align: right; min-width: 50px; }

/* ── Quick-Action Hub ─────────────────────────────────────────── */
.qa-hub {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.qa-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 14px 14px;
  text-decoration: none; color: inherit;
  will-change: transform;
  position: relative; overflow: hidden;
  /* CSS transition is baseline; GSAP overrides on hover */
  transition: background 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease;
}
/* Radial glow overlay — fades in on hover */
.qa-tile::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, var(--qa-g, rgba(129,140,248,0.1)) 0%, transparent 70%);
  opacity: 0; transition: opacity 0.28s;
  pointer-events: none;
}
.qa-tile:hover::after { opacity: 1; }
.qa-tile:hover {
  background: rgba(255,255,255,0.075);
  border-color: rgba(255,255,255,0.16);
  box-shadow: var(--qa-s, 0 0 22px rgba(129,140,248,0.18)), 0 10px 32px rgba(0,0,0,0.4);
}

/* Icon badge — rounded-square with function-specific glow */
.qa-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.qa-tile:hover .qa-icon {
  transform: scale(1.08);
  box-shadow: 0 4px 18px rgba(0,0,0,0.3);
}

/* Text block */
.qa-text { width: 100%; }
.qa-name {
  font-size: 0.8rem; font-weight: 700; color: #FFFFFF;
  line-height: 1.25; margin-bottom: 3px;
  letter-spacing: -0.01em;
}
.qa-desc {
  font-size: 0.65rem; color: var(--txt-2);
  line-height: 1.35;
}

/* Live telemetry badge inside tile */
.qa-badge {
  display: inline-flex; align-items: center;
  font-size: 0.62rem; font-weight: 700;
  padding: 2px 7px; border-radius: 8px;
  letter-spacing: 0.03em;
  margin-top: 1px;
}

/* Arrow indicator — GSAP slides this +5px on hover */
.qa-chev {
  color: var(--txt-2);
  font-size: 0.7rem;
  margin-top: auto;
  display: inline-block;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.qa-tile:hover .qa-chev { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   BOOTSTRAP COMPONENT OVERRIDES
   Dark-system overrides for Bootstrap 5 defaults.
   ═══════════════════════════════════════════════════════════════ */

/* ── Bootstrap Cards ──────────────────────────────────────────── */
.card {
  background: var(--glass) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  color: var(--txt-1) !important;
  box-shadow: none !important;
}
.card-header {
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--txt-1) !important;
}
.card-body { background: transparent !important; color: var(--txt-1); }
.card-footer { background: rgba(0,0,0,0.14) !important; border-top: 1px solid var(--border) !important; }

/* ── Bootstrap Tables ─────────────────────────────────────────── */
.table { color: var(--txt-1) !important; --bs-table-bg: transparent; --bs-table-color: var(--txt-1); }
.table > thead > tr > th, .table thead th {
  background: transparent !important;
  color: rgba(255,255,255,0.55) !important;
  border-color: var(--border) !important;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
}
.table-light, .table-light > th, .table-light > td { background: transparent !important; color: rgba(255,255,255,0.55) !important; }
.table > :not(caption) > * { background-color: transparent !important; }
.table > :not(caption) > * > * {
  background-color: transparent !important;
  border-bottom-color: var(--border) !important;
  color: var(--txt-1) !important;
}
.table-hover > tbody > tr:hover > * { background-color: var(--glass-md) !important; color: var(--txt-1) !important; }
td, th { border-color: var(--border) !important; color: var(--txt-1) !important; }

/* ── Table row status variants → neutralise Bootstrap defaults ── */
.table > tbody > tr.table-warning > *,
.table > tbody > tr.table-danger > *,
.table > tbody > tr.table-success > * {
  background-color: transparent !important;
  color: var(--txt-1) !important;
}

/* ── Accordion table: Name column gets priority, no truncation ── */
.accordion-body .table { table-layout: auto; width: 100%; }
.accordion-body .table th:first-child,
.accordion-body .table td:first-child { width: 38%; min-width: 110px; word-break: break-word; }
.accordion-body .table th,
.accordion-body .table td { white-space: normal; }

/* ── Bootstrap Forms ──────────────────────────────────────────── */
.form-control, .form-select,
input[type=email], input[type=password], input[type=url], input[type=number],
textarea, select {
  background: var(--glass-md) !important;
  border: 1px solid var(--border-md) !important;
  color: var(--txt-1) !important;
  border-radius: 8px !important;
  font-size: 0.83rem !important;
  font-family: inherit !important;
}
.form-control:focus, .form-select:focus,
input[type=email]:focus, input[type=password]:focus, input[type=url]:focus,
input[type=number]:focus, textarea:focus, select:focus {
  background: var(--glass-md) !important;
  border-color: var(--violet) !important;
  box-shadow: 0 0 0 3px var(--violet-s) !important;
  color: var(--txt-1) !important;
  outline: none;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--txt-3) !important; }
.form-label { color: var(--txt-2) !important; font-size: 0.81rem; font-weight: 500; margin-bottom: 5px; }
.form-text  { color: var(--txt-3) !important; }
.form-select option { background: var(--obs-2); color: var(--txt-1); }

/* ── Bootstrap Badges ─────────────────────────────────────────── */
.badge {
  border-radius: 20px !important; font-size: 0.69rem !important;
  font-weight: 600 !important; padding: 3px 9px !important;
  border: 1px solid transparent;
}
.badge.bg-primary   { background: var(--violet-s)  !important; color: var(--violet)  !important; border-color: rgba(129,140,248,0.25) !important; }
.badge.bg-secondary { background: var(--glass-md)  !important; color: var(--txt-2)   !important; border-color: var(--border-md)        !important; }
.badge.bg-success   { background: var(--emerald-s) !important; color: var(--emerald) !important; border-color: rgba(16,185,129,0.25)   !important; }
.badge.bg-danger    { background: var(--coral-s)   !important; color: var(--coral)   !important; border-color: rgba(249,115,22,0.25)   !important; }
.badge.bg-warning   { background: var(--amber-s)   !important; color: var(--amber)   !important; border-color: rgba(251,191,36,0.25)   !important; }
.badge.bg-info      { background: var(--cyan-s)    !important; color: var(--cyan)    !important; border-color: rgba(34,211,238,0.2)    !important; }
.badge.bg-light     { background: var(--glass-md)  !important; color: var(--txt-2)   !important; border-color: var(--border-md)        !important; }
.badge.bg-dark      { background: rgba(255,255,255,0.1) !important; color: var(--txt-1) !important; border-color: var(--border-md) !important; }
.badge.text-dark    { color: var(--txt-1) !important; }

/* ── Bootstrap Buttons ────────────────────────────────────────── */
.btn-primary, .btn.btn-primary {
  background: linear-gradient(135deg, #6366F1 0%, #818CF8 100%) !important;
  border: none !important; color: #fff !important;
  border-radius: 10px !important; font-weight: 600 !important;
  box-shadow: 0 4px 16px rgba(99,102,241,0.35) !important;
  transition: all 0.2s !important;
}
.btn-primary:hover, .btn.btn-primary:hover { filter: brightness(1.1) !important; box-shadow: 0 6px 22px rgba(99,102,241,0.5) !important; }
.btn-primary:disabled, .btn-primary.disabled { opacity: 0.4 !important; filter: none !important; }
.btn-primary:focus, .btn.btn-primary:focus { box-shadow: 0 0 0 3px var(--violet-s), 0 4px 16px rgba(99,102,241,0.35) !important; }

.btn-outline-primary {
  background: transparent !important; border: 1px solid rgba(129,140,248,0.35) !important;
  color: var(--violet) !important; border-radius: 10px !important;
}
.btn-outline-primary:hover { background: var(--violet-s) !important; border-color: rgba(129,140,248,0.55) !important; color: var(--violet) !important; }

.btn-outline-secondary {
  background: transparent !important; border: 1px solid var(--border-md) !important;
  color: var(--txt-2) !important; border-radius: 10px !important;
}
.btn-outline-secondary:hover { background: var(--glass-md) !important; color: var(--txt-1) !important; }

.btn-outline-warning {
  background: transparent !important; border: 1px solid rgba(251,191,36,0.35) !important;
  color: var(--amber) !important; border-radius: 10px !important;
}
.btn-outline-warning:hover { background: var(--amber-s) !important; border-color: rgba(251,191,36,0.55) !important; color: var(--amber) !important; }

.btn-outline-danger {
  background: transparent !important; border: 1px solid rgba(249,115,22,0.35) !important;
  color: var(--coral) !important; border-radius: 10px !important;
}
.btn-outline-danger:hover { background: var(--coral-s) !important; border-color: rgba(249,115,22,0.55) !important; color: var(--coral) !important; }

/* ── Bootstrap Accordion ──────────────────────────────────────── */
.accordion-item {
  background: var(--glass) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  overflow: hidden;
  margin-bottom: 8px;
}
.accordion-item:first-of-type, .accordion-item:last-of-type { border-radius: 14px !important; }
.accordion-header { background: transparent; }
.accordion-button {
  background: var(--glass) !important; color: var(--txt-1) !important;
  font-size: 0.88rem !important; font-weight: 600 !important;
  border: none !important; box-shadow: none !important; padding: 16px 20px !important;
}
.accordion-button:not(.collapsed) {
  background: var(--glass-md) !important; color: var(--txt-1) !important; box-shadow: none !important;
}
.accordion-button::after, .accordion-button:not(.collapsed)::after { filter: invert(0.7) brightness(1.5); }
.accordion-body {
  background: rgba(0,0,0,0.12) !important; color: var(--txt-1) !important;
  font-size: 0.83rem; padding: 16px 20px !important;
  border-top: 1px solid var(--border);
}

/* ── Bootstrap List Group ─────────────────────────────────────── */
.list-group-item {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--txt-2) !important;
}
.list-group-item-action:hover { background: var(--glass-md) !important; color: var(--txt-1) !important; }

/* ── Code tags ────────────────────────────────────────────────── */
code { color: var(--cyan) !important; background: var(--cyan-s) !important; padding: 1px 5px; border-radius: 4px; font-size: 0.82em; }

/* ── Text utilities ───────────────────────────────────────────── */
.text-muted     { color: rgba(255,255,255,0.45) !important; }
.text-secondary { color: var(--txt-2) !important; }
.text-success   { color: var(--emerald) !important; }
.text-danger    { color: var(--coral) !important; }
.text-warning   { color: var(--amber) !important; }
.text-info      { color: var(--cyan) !important; }
.fw-medium      { color: var(--txt-1); }

/* ── Legacy page-header ───────────────────────────────────────── */
.page-header { margin-bottom: 24px; }
.page-header h1, .page-header h1 i { color: var(--txt-1) !important; }
.sync-section {
  background: var(--glass) !important; border: 1px solid var(--border) !important;
  border-radius: 14px !important; padding: 20px 24px !important;
}
.link-card { padding: 18px 20px !important; }
h5.text-secondary, h5.fw-semibold { color: var(--txt-2) !important; }

/* ── Button Element UA Reset ──────────────────────────────────── */
/*
 * Browsers (especially on Windows) assign background-color:ButtonFace
 * (opaque white) to <button> elements via the UA stylesheet. Any time
 * an inline background override is removed or a pseudo-class changes,
 * that white snaps back. This reset eliminates the source entirely.
 */
button {
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  background-color: transparent !important;
}
button:focus        { outline: none; }
button:focus-visible { box-shadow: 0 0 0 2px var(--violet-s), 0 0 0 1px var(--violet); }

/* ── View-Links Accordion Toggle ──────────────────────────────── */
/*
 * All four interactive states are explicit dark values.
 * The .is-open class (toggled by JS) controls the open state —
 * no inline background property is ever set or cleared via JS,
 * so the UA ButtonFace white can never resurface.
 */
.vl-acc-btn {
  background: rgba(255,255,255,0.03) !important;    /* var(--glass) — closed */
  color: var(--txt-1) !important;
  transition: background 0.15s;
}
.vl-acc-btn:hover            { background: rgba(255,255,255,0.055) !important; }  /* var(--glass-md) */
.vl-acc-btn:focus            { background: rgba(255,255,255,0.03)  !important; }
.vl-acc-btn:active           { background: rgba(255,255,255,0.055) !important; }
.vl-acc-btn.is-open          { background: rgba(255,255,255,0.055) !important; }
.vl-acc-btn.is-open:hover    { background: rgba(255,255,255,0.08)  !important; }

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME — activated by data-bs-theme="light" on <html>
   All overrides use html[data-bs-theme="light"] for specificity.
   ═══════════════════════════════════════════════════════════════ */

/* ── Token overrides ─────────────────────────────────────────── */
html[data-bs-theme="light"] {
  --obs:        #EEF1FA;
  --obs-1:      #E5E9F5;
  --obs-2:      #DDE3F0;
  --obs-3:      #D0D8EC;
  --glass:      rgba(255,255,255,0.60);
  --glass-md:   rgba(255,255,255,0.82);
  --glass-lg:   rgba(255,255,255,0.96);
  --border:     rgba(0,0,0,0.08);
  --border-md:  rgba(0,0,0,0.14);
  --txt-1:      #1B1F2E;
  --txt-2:      #4B5675;
  --txt-3:      #8A95B4;
  --violet:     #6366F1;
  --violet-s:   rgba(99,102,241,0.11);
  --cyan:       #0891B2;
  --cyan-s:     rgba(8,145,178,0.11);
  --emerald:    #059669;
  --emerald-s:  rgba(5,150,105,0.11);
  --coral:      #EA580C;
  --coral-s:    rgba(234,88,12,0.11);
  --amber:      #D97706;
  --amber-s:    rgba(217,119,6,0.11);
  --rose:       #E11D48;
  --rose-s:     rgba(225,29,72,0.11);
}

/* ── Body ────────────────────────────────────────────────────── */
html[data-bs-theme="light"] body { background: var(--obs) !important; color: var(--txt-1) !important; }

/* ── Navbar (overrides hardcoded inline rgba) ────────────────── */
html[data-bs-theme="light"] .navbar {
  background: rgba(238,241,250,0.92) !important;
  border-bottom-color: rgba(0,0,0,0.1) !important;
}
html[data-bs-theme="light"] .navbar.bg-primary { background: rgba(238,241,250,0.96) !important; }
html[data-bs-theme="light"] .nav-link { color: var(--txt-2) !important; }
html[data-bs-theme="light"] .nav-link:hover { color: var(--txt-1) !important; }
html[data-bs-theme="light"] .btn-outline-light {
  border-color: var(--border-md) !important;
  color: var(--txt-2) !important;
}
html[data-bs-theme="light"] .btn-outline-light:hover {
  background: var(--glass-md) !important;
  color: var(--txt-1) !important;
}

/* ── Dropdowns ───────────────────────────────────────────────── */
html[data-bs-theme="light"] .dropdown-menu,
html[data-bs-theme="light"] .dropdown-menu-dark {
  background: #fff !important;
  border-color: rgba(0,0,0,0.12) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}
html[data-bs-theme="light"] .dropdown-menu .dropdown-item,
html[data-bs-theme="light"] .dropdown-menu-dark .dropdown-item { color: var(--txt-1) !important; }
html[data-bs-theme="light"] .dropdown-menu .dropdown-item:hover,
html[data-bs-theme="light"] .dropdown-menu-dark .dropdown-item:hover {
  background: var(--violet-s) !important; color: var(--violet) !important;
}
html[data-bs-theme="light"] .dropdown-divider { border-color: var(--border) !important; }

/* ── Form inputs ─────────────────────────────────────────────── */
html[data-bs-theme="light"] .form-control,
html[data-bs-theme="light"] .form-select,
html[data-bs-theme="light"] input[type="date"],
html[data-bs-theme="light"] input[type="text"],
html[data-bs-theme="light"] input[type="email"],
html[data-bs-theme="light"] input[type="password"],
html[data-bs-theme="light"] input[type="number"],
html[data-bs-theme="light"] input[type=date],
html[data-bs-theme="light"] input[type=text],
html[data-bs-theme="light"] textarea {
  color-scheme: light !important;
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.15) !important;
  color: var(--txt-1) !important;
}
html[data-bs-theme="light"] .form-control:focus,
html[data-bs-theme="light"] .form-select:focus,
html[data-bs-theme="light"] input[type="date"]:focus,
html[data-bs-theme="light"] input[type="text"]:focus,
html[data-bs-theme="light"] input[type="email"]:focus,
html[data-bs-theme="light"] input[type="password"]:focus,
html[data-bs-theme="light"] input[type=date]:focus,
html[data-bs-theme="light"] input[type=text]:focus {
  background: rgba(0,0,0,0.06) !important;
  border-color: #6366F1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15) !important;
  color: var(--txt-1) !important;
}
html[data-bs-theme="light"] .form-control::placeholder,
html[data-bs-theme="light"] input::placeholder,
html[data-bs-theme="light"] textarea::placeholder { color: rgba(75,86,117,0.5) !important; }
html[data-bs-theme="light"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%234B5675' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
}
html[data-bs-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-bs-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-bs-theme="light"] input[type=date]::-webkit-calendar-picker-indicator { filter: none !important; opacity: 0.6; cursor: pointer; }
html[data-bs-theme="light"] input[type=date]::-webkit-calendar-picker-indicator:hover { filter: none !important; opacity: 0.9; }
html[data-bs-theme="light"] option { background: #fff !important; color: var(--txt-1) !important; }

/* ── Status select (issue tracker) ──────────────────────────── */
html[data-bs-theme="light"] .status-select {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: var(--txt-2) !important;
}
html[data-bs-theme="light"] .status-select:hover,
html[data-bs-theme="light"] .status-select:focus { border-color: rgba(0,0,0,0.2) !important; color: var(--txt-1) !important; }
html[data-bs-theme="light"] .status-select option,
html[data-bs-theme="light"] .status-select optgroup { background: #fff !important; color: var(--txt-1) !important; }

/* ── Accordion ───────────────────────────────────────────────── */
html[data-bs-theme="light"] .accordion-item { background: rgba(255,255,255,0.7) !important; border-color: var(--border) !important; }
html[data-bs-theme="light"] .accordion-button { background: rgba(0,0,0,0.02) !important; color: var(--txt-1) !important; }
html[data-bs-theme="light"] .accordion-button:not(.collapsed) { background: rgba(0,0,0,0.04) !important; color: var(--txt-1) !important; }
html[data-bs-theme="light"] .accordion-button::after,
html[data-bs-theme="light"] .accordion-button:not(.collapsed)::after { filter: none !important; }
html[data-bs-theme="light"] .accordion-body { background: rgba(0,0,0,0.02) !important; color: var(--txt-2) !important; }
html[data-bs-theme="light"] .accordion-body td,
html[data-bs-theme="light"] .accordion-body th,
html[data-bs-theme="light"] .accordion-body p,
html[data-bs-theme="light"] .accordion-body li { color: var(--txt-1) !important; }

/* ── Card and metric hover ───────────────────────────────────── */
html[data-bs-theme="light"] .g-card:hover,
html[data-bs-theme="light"] .health-capsule:hover {
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(0,0,0,0.14) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 0 0 1px rgba(99,102,241,0.1) !important;
}
html[data-bs-theme="light"] .mc:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important; }

/* ── Dashboard header ────────────────────────────────────────── */
html[data-bs-theme="light"] .dash-header {
  background: rgba(255,255,255,0.82) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

/* ── Progress tracks (rgba white bg → dark equivalent) ──────── */
html[data-bs-theme="light"] .fbd-track,
html[data-bs-theme="light"] .score-track,
html[data-bs-theme="light"] .cam-track { background: rgba(0,0,0,0.08) !important; }

/* ── SVG ring bg stroke ──────────────────────────────────────── */
html[data-bs-theme="light"] .ring-bg { stroke: rgba(0,0,0,0.08) !important; }

/* ── Scrollbar ───────────────────────────────────────────────── */
html[data-bs-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
html[data-bs-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

/* ── Text utilities ──────────────────────────────────────────── */
html[data-bs-theme="light"] .text-muted { color: rgba(0,0,0,0.45) !important; }
html[data-bs-theme="light"] .section-sublabel strong { color: rgba(0,0,0,0.6) !important; }

/* ── btn-close (modal/alert) ─────────────────────────────────── */
html[data-bs-theme="light"] .btn-close,
html[data-bs-theme="light"] .btn-close-white { filter: none !important; }

/* ── Delete confirm popup (hardcoded #1a1a22) ────────────────── */
html[data-bs-theme="light"] .del-confirm {
  background: #fff !important;
  border-color: rgba(234,88,12,0.3) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
}

/* ── val-dash placeholder ────────────────────────────────────── */
html[data-bs-theme="light"] .val-dash { background: rgba(0,0,0,0.1) !important; }

/* ── vl-acc-btn (view-links accordion) ──────────────────────── */
html[data-bs-theme="light"] .vl-acc-btn             { background: rgba(0,0,0,0.03) !important; }
html[data-bs-theme="light"] .vl-acc-btn:hover       { background: rgba(0,0,0,0.05) !important; }
html[data-bs-theme="light"] .vl-acc-btn:focus       { background: rgba(0,0,0,0.03) !important; }
html[data-bs-theme="light"] .vl-acc-btn:active      { background: rgba(0,0,0,0.05) !important; }
html[data-bs-theme="light"] .vl-acc-btn.is-open     { background: rgba(0,0,0,0.05) !important; }
html[data-bs-theme="light"] .vl-acc-btn.is-open:hover { background: rgba(0,0,0,0.07) !important; }

/* ── btn-primary-glow (UA button reset clears gradient) ─────────── */
/* button { background: transparent !important } in this file overrides
   the gradient on <button> elements. Restore it in light mode. */
html[data-bs-theme="light"] .btn-primary-glow {
  background: linear-gradient(135deg, #6366F1 0%, #818CF8 100%) !important;
  color: #fff !important;
}
html[data-bs-theme="light"] .btn-primary-glow:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 28px rgba(99,102,241,0.45) !important;
}
html[data-bs-theme="light"] .btn-primary-glow:disabled { opacity: 0.4; }

/* ── audit-theme.css light overrides ────────────────────────────── */

/* Control bar header (hardcoded rgba(14,20,32,0.82)) */
html[data-bs-theme="light"] .ctrl-bar {
  background: rgba(238,241,250,0.92) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

/* Audit card body (hardcoded rgba white 5%) */
html[data-bs-theme="light"] .audit-card {
  background: rgba(255,255,255,0.8) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}
html[data-bs-theme="light"] .audit-card.card-f:hover {
  box-shadow: 0 6px 28px rgba(234,88,12,0.15), -4px 0 28px rgba(234,88,12,0.12) !important;
}
html[data-bs-theme="light"] .audit-card.card-w:hover {
  box-shadow: 0 6px 28px rgba(217,119,6,0.12), -4px 0 28px rgba(217,119,6,0.1) !important;
}
html[data-bs-theme="light"] .audit-card.card-p:hover {
  box-shadow: 0 6px 28px rgba(0,0,0,0.1), -4px 0 16px rgba(5,150,105,0.08) !important;
}

/* Flag/warning nested containers (very dark rgba background) */
html[data-bs-theme="light"] .ac-flags {
  background: rgba(234,88,12,0.06) !important;
  border-color: rgba(234,88,12,0.2) !important;
  border-left-color: var(--coral) !important;
}
html[data-bs-theme="light"] .ac-warnings {
  background: rgba(217,119,6,0.06) !important;
  border-color: rgba(217,119,6,0.18) !important;
  border-left-color: var(--amber) !important;
}

/* Metric micro-grid labels (hardcoded rgba(255,255,255,0.38) — invisible) */
html[data-bs-theme="light"] .ac-m-lbl { color: var(--txt-3) !important; }

/* Metric bar track (hardcoded rgba white) */
html[data-bs-theme="light"] .ac-m-bar { background: rgba(0,0,0,0.08) !important; }

/* Card footer subtle tint */
html[data-bs-theme="light"] .ac-footer { background: rgba(0,0,0,0.02) !important; }

/* Timeline rows (hardcoded rgba white) */
html[data-bs-theme="light"] .tl-row {
  background: rgba(255,255,255,0.75) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
}
html[data-bs-theme="light"] .tl-row:hover {
  background: rgba(255,255,255,0.95) !important;
  border-color: var(--border-md) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
}

/* Inactive timeline dot (rgba white — invisible on light bg) */
html[data-bs-theme="light"] .tl-dot-off { background: rgba(0,0,0,0.2) !important; }

/* ── Audit accuracy feedback widget (issue #68) ──────────────────── */
.fb-widget { margin: 6px 0 4px; }
.fb-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--glass-md); border: 1px solid var(--border-md);
  border-radius: 8px; color: var(--txt-2);
  font-size: 0.7rem; font-weight: 600; padding: 4px 11px; cursor: pointer;
  transition: all 0.2s;
}
.fb-toggle:hover { color: var(--amber); border-color: rgba(251,191,36,0.4); }
.fb-widget[data-fb-rated="1"] .fb-toggle { color: var(--amber); border-color: rgba(251,191,36,0.35); }
.fb-form {
  margin-top: 10px; padding: 12px 14px; max-width: 420px;
  background: var(--glass); border: 1px solid var(--border-md); border-radius: 12px;
}
.fb-q { font-size: 0.74rem; color: var(--txt-2); margin-bottom: 8px; }
.fb-q strong { color: var(--txt-1); }
.fb-stars { display: inline-flex; gap: 3px; margin-bottom: 10px; }
.fb-stars label { cursor: pointer; line-height: 1; margin: 0; }
.fb-stars label input { position: absolute; opacity: 0; width: 0; height: 0; }
.fb-stars label i { font-size: 1.15rem; color: var(--border-md); transition: color 0.12s; }
.fb-stars label i.fb-on { color: var(--amber); }
.fb-comment {
  width: 100%; background: var(--glass-md); border: 1px solid var(--border-md);
  border-radius: 8px; color: var(--txt-1); font-size: 0.76rem;
  padding: 7px 10px; resize: vertical; font-family: inherit;
}
.fb-comment:focus { outline: none; border-color: var(--violet); }
.fb-actions { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.fb-msg { font-size: 0.72rem; }
/* Popover variant for dense tables (regular lesson audit) */
.fb-widget--pop { position: relative; display: inline-block; margin: 0; }
.fb-widget--pop .fb-toggle { padding: 2px 7px; }
.fb-widget--pop .fb-toggle-txt { display: none; }
.fb-widget--pop .fb-form {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 60;
  width: 300px; text-align: left; box-shadow: 0 16px 48px rgba(0,0,0,0.55);
}