/* ── Base ─────────────────────────────────────────────────────────────────── */
/* Light-mode tinted background — dark mode inherits Bootstrap's token */
[data-bs-theme="light"] body { background-color: #f5f6fa; }
.navbar-brand { letter-spacing: 1px; }

/* ── Tablet-friendly touch targets ──────────────────────────────────────── */
.btn { min-height: 44px; }
.form-control, .form-select { min-height: 44px; font-size: 1rem; }
.nav-link { padding: 0.6rem 1rem; }

/* ── Status badges ───────────────────────────────────────────────────────── */
.status-current  { background-color: #198754; color: #fff; }
.status-due_soon { background-color: #fd7e14; color: #fff; }
.status-expired  { background-color: #dc3545; color: #fff; }
.status-none     { background-color: #6c757d; color: #fff; }

/* ── Dashboard stat cards ────────────────────────────────────────────────── */
.stat-card { border-left: 4px solid; }
.stat-card.green  { border-color: #198754; }
.stat-card.orange { border-color: #fd7e14; }
.stat-card.red    { border-color: #dc3545; }
.stat-card.blue   { border-color: #0d6efd; }

/* ── Live session timer ──────────────────────────────────────────────────── */
.timer-display {
  font-size: 3rem;
  font-variant-numeric: tabular-nums;
  font-weight: bold;
  letter-spacing: 2px;
}

/* ── Proctor checklist items ─────────────────────────────────────────────── */
/* Use Bootstrap's CSS variable so the neutral border adapts to dark mode */
.checklist-item { border-left: 4px solid var(--bs-border-color); padding-left: 1rem; margin-bottom: 0.75rem; }
.checklist-item.completed { border-color: #198754; }
.checklist-item.missed    { border-color: #dc3545; }

/* ── Settings — weight balance bar ──────────────────────────────────────── */
.weight-bar-checklist { background-color: #0d6efd; border-radius: 4px 0 0 4px; transition: width 0.2s; }
.weight-bar-criteria  { background-color: #198754; border-radius: 0 4px 4px 0; transition: width 0.2s; }

/* ── Dark-mode adaptive neutral badge ───────────────────────────────────── */
/* Replaces bg-light text-dark border on small count/status badges.          */
/* Uses Bootstrap 5.3 CSS custom properties that flip correctly in dark mode. */
.badge-neutral {
  background-color: var(--bs-secondary-bg) !important;
  color:            var(--bs-secondary-color) !important;
  border:           1px solid var(--bs-border-color) !important;
}

/* ── Dark-mode adaptive muted card background ───────────────────────────── */
/* Use on .card instead of .bg-light so the card adapts in dark mode.        */
.card-muted {
  background-color: var(--bs-tertiary-bg) !important;
}

/* ── Mobile / tablet ─────────────────────────────────────────────────────── */

/* Proctor scoring page — sticky submit stays visible while scrolling         */
.proctor-submit-wrap {
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding: 0.75rem 0 0.5rem;
  background-color: var(--bs-body-bg);
  border-top: 1px solid var(--bs-border-color);
}

/* Criteria rating buttons — taller touch targets on all screen sizes         */
.criteria-btn .btn { min-height: 64px; }

/* Stop button confirmation — full-width on small screens                     */
@media (max-width: 575.98px) {
  .btn-start, .btn-stop { width: 100%; margin-top: 0.25rem; }
}

/* Responsive tables — all card-body.p-0 containers (which wrap every data   */
/* table in the app) scroll horizontally instead of overflowing their card.  */
.card-body.p-0 { overflow-x: auto; }