/* ============================================================
   QRATTEND Modern School Design System v31
   A modern, polished UI layer for school QR attendance systems
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  --m-primary: #1e3a8a;
  --m-primary-light: #3b82f6;
  --m-primary-soft: rgba(59, 130, 246, 0.10);
  --m-accent: #0ea5e9;
  --m-success: #10b981;
  --m-warning: #f59e0b;
  --m-danger: #ef4444;
  --m-info: #06b6d4;
  --m-radius-sm: 10px;
  --m-radius-md: 14px;
  --m-radius-lg: 20px;
  --m-radius-xl: 28px;
  --m-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
  --m-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --m-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
  --m-shadow-primary: 0 8px 24px rgba(30, 58, 138, 0.18);
  --m-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --m-sidebar-width: 272px;
  --m-topbar-height: 72px;
}

/* ---------- Base ---------- */
body {
  font-family: var(--m-font);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

.signup-card .form-label { margin-bottom: .3rem; font-size: .86rem; font-weight: 600; }
.signup-card .form-control, .signup-card .form-select { min-height: 42px; }
.signup-card .input-group-text { min-width: 42px; justify-content: center; }
.compact-help { font-size: .76rem; }
.password-requirements { display: flex; flex-wrap: wrap; gap: .35rem .7rem; font-size: .76rem; color: var(--bs-secondary-color); }

/* ---------- Sidebar: Modern Gradient + Branding ---------- */
.sidebar {
  width: var(--m-sidebar-width);
  min-width: var(--m-sidebar-width);
  max-width: var(--m-sidebar-width);
  background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 45%, #1d4ed8 100%) !important;
  border-right: 0 !important;
  box-shadow: 4px 0 24px rgba(15, 23, 42, 0.12) !important;
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

/* Sidebar brand area */
.sidebar .sidebar-brand {
  margin-bottom: 1.75rem !important;
  padding: 0 1rem;
}
.sidebar .sidebar-brand img {
  width: 88px;
  max-width: 88px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  padding: 6px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sidebar .sidebar-brand img:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* Sidebar school name */
.sidebar .sidebar-school-name {
  display: block;
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  line-height: 1.35;
  margin-top: 0.5rem;
  padding: 0 0.5rem;
}

/* Sidebar nav */
.sidebar .nav {
  gap: 0.3rem !important;
  padding: 0 0.75rem;
}
.sidebar .nav-link {
  border-radius: 12px !important;
  min-height: 46px;
  padding: 0.7rem 0.9rem !important;
  margin: 0 !important;
  font-weight: 500;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.82) !important;
  transition: all 0.2s ease;
  position: relative;
}
.sidebar .nav-link i {
  font-size: 1.05rem;
  width: 22px;
  text-align: center;
  color: rgba(255, 255, 255, 0.65) !important;
  transition: color 0.2s ease;
}
.sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
  transform: translateX(3px);
}
.sidebar .nav-link:hover i {
  color: #ffffff !important;
}
.sidebar .nav-link.active {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.9), 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}
.sidebar .nav-link.active i {
  color: #ffffff !important;
}
.sidebar .nav-link-logout {
  margin-top: 0.5rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0 !important;
  padding-top: 1rem !important;
}
.sidebar .nav-link-logout:hover {
  background: rgba(239, 68, 68, 0.18) !important;
}

/* Sidebar footer */
.sidebar .sidebar-footer {
  margin-top: auto;
  padding: 1rem 1.25rem 0.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  text-align: center;
  line-height: 1.5;
}

/* ---------- Topbar: Modern Glass ---------- */
.topbar {
  min-height: var(--m-topbar-height);
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 1px 12px rgba(15, 23, 42, 0.04);
  padding: 0.85rem 1.5rem !important;
}
.topbar h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.25rem;
}
.topbar .text-muted {
  font-size: 0.78rem;
}
.topbar-school {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--m-primary);
  background: linear-gradient(135deg, var(--m-primary), var(--m-primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.topbar .dashboard-clock {
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.12);
  border-radius: 14px;
  padding: 0.5rem 1rem;
  min-width: 190px;
}
.topbar .dashboard-clock #live-time {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--m-primary);
  font-variant-numeric: tabular-nums;
}
.topbar .dashboard-clock .text-muted {
  font-size: 0.72rem;
}
.topbar .profile-info {
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.10);
  border-radius: 14px;
  padding: 0.5rem 1rem;
}
.topbar .profile-info .fw-semibold {
  font-weight: 600;
  font-size: 0.9rem;
}
.topbar .profile-info .badge {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: linear-gradient(135deg, var(--m-primary), var(--m-primary-light)) !important;
  border-radius: 999px;
  padding: 0.3rem 0.6rem;
}
.theme-toggle-btn {
  border-radius: 999px !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  color: var(--m-primary) !important;
  font-weight: 600;
  font-size: 0.82rem;
  min-height: 38px;
  padding: 0.4rem 1rem;
  transition: all 0.2s ease;
}
.theme-toggle-btn:hover {
  background: var(--m-primary-soft) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* ---------- Cards: Modern Elevated ---------- */
.card {
  border-radius: var(--m-radius-lg) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: var(--m-shadow-sm) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.card:hover {
  box-shadow: var(--m-shadow-md) !important;
}
.card-header {
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
  padding: 1.1rem 1.25rem;
}
.card-body {
  padding: 1.25rem;
}

/* Dashboard hero */
.dashboard-hero {
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 50%, #3b82f6 100%) !important;
  border: 0 !important;
  border-radius: var(--m-radius-xl) !important;
  position: relative;
  overflow: hidden;
}
.dashboard-hero::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -10%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.dashboard-hero::after {
  content: '';
  position: absolute;
  bottom: -80%;
  left: 20%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.dashboard-hero .card-body {
  position: relative;
  z-index: 1;
  padding: 2rem 2.25rem !important;
}
.dashboard-hero .eyebrow {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
}
.dashboard-hero h2 {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.75rem;
}
.dashboard-hero p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.92rem;
}
.dashboard-hero .btn-primary {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--m-primary) !important;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}
.dashboard-hero .btn-primary:hover {
  background: rgba(255, 255, 255, 0.92) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
}

/* Stat cards */
.stat-card, .stats-card {
  border-radius: var(--m-radius-lg) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: var(--m-shadow-sm) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.stat-card:hover, .stats-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--m-shadow-lg) !important;
}
.stat-card .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-size: 1.3rem;
}
.stat-card .display-6 {
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* Metric boxes */
.metric-box {
  border-radius: var(--m-radius-md) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.04), transparent) !important;
  padding: 1.1rem !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.metric-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--m-shadow-sm);
}
.metric-box strong {
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Quick actions */
.quick-action {
  border-radius: var(--m-radius-md) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  background: var(--bg-card) !important;
  padding: 1rem !important;
  transition: all 0.2s ease;
}
.quick-action:hover {
  transform: translateX(4px);
  border-color: rgba(59, 130, 246, 0.3) !important;
  box-shadow: var(--m-shadow-sm);
}
.quick-action > i:first-child {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--m-primary-soft);
  color: var(--m-primary) !important;
  font-size: 1.1rem;
}

/* Session rows */
.session-row-link {
  border-radius: var(--m-radius-md) !important;
  padding: 0.75rem 0.85rem !important;
  transition: all 0.2s ease;
}
.session-row-link:hover {
  background: var(--m-primary-soft) !important;
  transform: translateX(3px);
}

/* ---------- Buttons: Modern ---------- */
.btn {
  border-radius: var(--m-radius-sm) !important;
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: all 0.2s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--m-primary) 0%, var(--m-primary-light) 100%) !important;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(30, 58, 138, 0.2) !important;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(30, 58, 138, 0.3) !important;
  filter: brightness(1.05);
}
.btn-outline-primary {
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: var(--m-primary) !important;
}
.btn-outline-primary:hover {
  background: var(--m-primary-soft) !important;
  border-color: var(--m-primary-light) !important;
  color: var(--m-primary) !important;
}
.btn-outline-success {
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #059669 !important;
}
.btn-outline-success:hover {
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  color: #059669 !important;
}
.btn-outline-secondary {
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #475569 !important;
  background: var(--bg-card) !important;
}
.btn-outline-secondary:hover {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.2) !important;
  color: #1e293b !important;
}
.btn-outline-danger {
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #dc2626 !important;
}
.btn-outline-danger:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  color: #dc2626 !important;
}

/* ---------- Forms: Modern ---------- */
.form-control, .form-select {
  border-radius: var(--m-radius-sm) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  min-height: 44px;
  font-size: 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--m-primary-light) !important;
  box-shadow: 0 0 0 0.22rem rgba(59, 130, 246, 0.12) !important;
}
.form-label {
  font-weight: 600;
  font-size: 0.82rem;
  color: #334155;
  margin-bottom: 0.4rem;
}
.input-group-text {
  border-radius: 0 var(--m-radius-sm) var(--m-radius-sm) 0 !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  background: rgba(59, 130, 246, 0.04);
}

/* ---------- Tables: Modern Clean ---------- */
.table {
  --bs-table-border-color: rgba(15, 23, 42, 0.06);
  font-size: 0.88rem;
}
.table thead th {
  background: rgba(59, 130, 246, 0.06) !important;
  color: #334155 !important;
  font-weight: 700;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid rgba(59, 130, 246, 0.12) !important;
  padding: 0.85rem 0.9rem;
  white-space: nowrap;
}
.table tbody tr {
  transition: background-color 0.15s ease;
}
.table tbody tr:hover {
  background: rgba(59, 130, 246, 0.035) !important;
}
.table tbody td {
  padding: 0.75rem 0.9rem;
  vertical-align: middle;
}
.sheet-table {
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
  border-radius: var(--m-radius-md);
  overflow: hidden;
}
.sheet-table thead th {
  background: rgba(59, 130, 246, 0.06) !important;
}
.sheet-table tbody tr:nth-child(odd) {
  background: rgba(59, 130, 246, 0.015);
}
.sheet-table tbody tr:hover {
  background: rgba(59, 130, 246, 0.05) !important;
}

/* Profile thumbnails */
.profile-thumb {
  border-radius: 0 !important;
  border: 2px solid rgba(59, 130, 246, 0.15) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  object-fit: cover;
}

/* QR thumbnails */
.learner-qr-thumb {
  border-radius: 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.learner-qr-thumb:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

/* ---------- Inline QR preview modal (Learners list) ---------- */
.qr-preview-dialog { max-width: 380px; }
.qr-preview-body { padding: 1.5rem 1.5rem 1.1rem; }
.qr-preview-name {
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.4;
  letter-spacing: .01em;
  text-align: center;
  white-space: normal;          /* wrap long names — never truncate */
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  margin: 0 auto 3px;
}
.qr-preview-section {
  color: rgba(15, 23, 42, 0.62);
  font-size: .86rem;
  font-weight: 600;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  margin: 0 auto 14px;
}
.qr-preview-code {
  width: min(212px, 58vw);
  height: auto;
  display: block;
  margin: 0 auto;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
.qr-preview-school { margin-top: 14px; text-align: center; }
.qr-preview-school-name { display: block; font-weight: 700; font-size: .92rem; overflow-wrap: anywhere; }
.qr-preview-school-meta { display: block; color: rgba(15, 23, 42, 0.6); font-size: .78rem; margin-top: 3px; overflow-wrap: anywhere; }
body.theme-dark .qr-preview-name { color: #e2e8f0; }
body.theme-dark .qr-preview-section,
body.theme-dark .qr-preview-school-meta { color: #94a3b8; }

/* ---------- Badges & Status ---------- */
.badge {
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
}
.status-badge {
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  font-weight: 700;
  font-size: 0.75rem;
}
.status-badge-present { background: #d1fae5; color: #047857; }
.status-badge-absent { background: #fee2e2; color: #b91c1c; }
.status-badge-late { background: #fef3c7; color: #92400e; }
.status-badge-cutting { background: #e2e8f0; color: #475569; }
.status-dot {
  font-size: 0.78rem;
  font-weight: 700;
}
.status-dot:before {
  width: 8px;
  height: 8px;
}

/* ---------- Action Menu ---------- */
.action-menu-btn {
  border-radius: 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: var(--bg-card) !important;
  color: #475569 !important;
  transition: all 0.2s ease;
}
.action-menu-btn:hover {
  background: var(--m-primary-soft) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: var(--m-primary) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
}
.dropdown-menu {
  border-radius: var(--m-radius-md) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: var(--m-shadow-lg) !important;
  padding: 0.5rem !important;
}
.dropdown-item {
  border-radius: 8px !important;
  padding: 0.6rem 0.75rem !important;
  font-size: 0.88rem;
  transition: all 0.15s ease;
}
.dropdown-item:hover {
  background: var(--m-primary-soft) !important;
  color: var(--m-primary) !important;
}
.dropdown-item.text-danger:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #dc2626 !important;
}

/* ---------- Report Toolbar ---------- */
.report-toolbar {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: var(--m-radius-md);
  padding: 1rem;
}
.report-period-label {
  border-radius: var(--m-radius-sm) !important;
  border: 1px solid rgba(59, 130, 246, 0.15) !important;
  background: rgba(59, 130, 246, 0.04) !important;
}
.report-period-label strong {
  color: var(--m-primary);
}
.date-display-control {
  border-radius: var(--m-radius-sm) !important;
  border: 1px solid rgba(59, 130, 246, 0.15) !important;
  background: rgba(59, 130, 246, 0.04) !important;
}
.date-display-control .fw-semibold {
  color: var(--m-primary);
  font-weight: 700;
}

/* ---------- Scanner: Modern ---------- */
.scanner-stage {
  border-radius: var(--m-radius-xl) !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2) !important;
}
.scanner-control-card {
  border-radius: var(--m-radius-lg) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: var(--m-shadow-md) !important;
}
.scanner-time-card {
  border-radius: var(--m-radius-sm) !important;
  background: rgba(59, 130, 246, 0.04) !important;
  border: 1px solid rgba(59, 130, 246, 0.12) !important;
}
.scanner-time-card strong {
  color: var(--m-primary);
  font-weight: 700;
}
.scanner-control-hint {
  border-radius: var(--m-radius-sm) !important;
  background: rgba(59, 130, 246, 0.05) !important;
  border: 1px solid rgba(59, 130, 246, 0.08);
}
.scanner-feedback {
  border-radius: var(--m-radius-sm) !important;
}
.scanner-feedback-info {
  background: rgba(59, 130, 246, 0.06) !important;
  border-color: rgba(59, 130, 246, 0.15) !important;
  color: var(--m-primary) !important;
}
.qr-scanner-modal {
  border-radius: var(--m-radius-xl) !important;
}

/* ---------- Login Page: Modern Split ---------- */
.auth-page {
  padding: 0 !important;
  min-height: 100vh;
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 55%, #3b82f6 100%);
  position: relative;
  overflow: hidden;
}
.auth-page::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.auth-page::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
}
.auth-page .container {
  position: relative;
  z-index: 1;
}
.auth-page .card {
  border-radius: var(--m-radius-xl) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.95) !important;
}
.auth-page .login-brand-logo {
  width: 100px;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(30, 58, 138, 0.25);
  border: 3px solid rgba(255, 255, 255, 0.9);
}
.auth-page h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--m-primary);
}
.auth-page .btn-primary {
  min-height: 48px;
  font-weight: 700;
  font-size: 0.95rem;
}
.auth-page .form-control {
  min-height: 46px;
  border-radius: 12px !important;
}
.auth-page .form-check-input:checked {
  background-color: var(--m-primary);
  border-color: var(--m-primary);
}
.auth-page a {
  color: var(--m-primary-light);
  font-weight: 600;
  text-decoration: none;
}
.auth-page a:hover {
  color: var(--m-primary);
  text-decoration: underline;
}

/* ---------- Settings ---------- */
.settings-section-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.05)) !important;
  color: var(--m-primary) !important;
  font-size: 1.2rem;
}
.school-year-switcher {
  border-radius: var(--m-radius-md) !important;
  border: 1px solid rgba(59, 130, 246, 0.12) !important;
  background: rgba(59, 130, 246, 0.03) !important;
}
.school-year-current {
  border-radius: var(--m-radius-sm) !important;
  border: 1px solid rgba(59, 130, 246, 0.15) !important;
  background: rgba(255, 255, 255, 0.8) !important;
}
.school-year-state.current {
  color: var(--m-primary) !important;
}

/* ---------- Modals ---------- */
.modal-content {
  border-radius: var(--m-radius-lg) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2) !important;
}
.modal-header {
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
  padding: 1.25rem 1.5rem;
}
.modal-body {
  padding: 1.5rem;
}
.modal-footer {
  border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
  padding: 1rem 1.5rem;
}

/* ---------- Alerts ---------- */
.alert {
  border-radius: var(--m-radius-sm) !important;
  border: 1px solid transparent;
}
.alert-info {
  background: rgba(59, 130, 246, 0.06) !important;
  border-color: rgba(59, 130, 246, 0.15) !important;
  color: var(--m-primary) !important;
}
.alert-success {
  background: rgba(16, 185, 129, 0.06) !important;
  border-color: rgba(16, 185, 129, 0.15) !important;
  color: #047857 !important;
}
.alert-danger {
  background: rgba(239, 68, 68, 0.06) !important;
  border-color: rgba(239, 68, 68, 0.15) !important;
  color: #b91c1c !important;
}
.alert-warning {
  background: rgba(245, 158, 11, 0.06) !important;
  border-color: rgba(245, 158, 11, 0.15) !important;
  color: #92400e !important;
}

/* ---------- Toasts ---------- */
.qr-toast {
  border-radius: var(--m-radius-md) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: var(--m-shadow-lg) !important;
}
.qr-toast-icon {
  border-radius: 10px !important;
}

/* ---------- Page Headers ---------- */
.page-card .card-body h4,
.card-body h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.card-body h5 {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.card-body h6 {
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.82rem;
  text-transform: uppercase;
  color: var(--m-primary);
}

/* ---------- Dark Theme Adjustments ---------- */
body.theme-dark .sidebar {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
}
body.theme-dark .topbar {
  background: rgba(15, 23, 42, 0.85) !important;
}
body.theme-dark .topbar-school {
  background: linear-gradient(135deg, #93c5fd, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body.theme-dark .topbar .dashboard-clock,
body.theme-dark .topbar .profile-info {
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.12);
}
body.theme-dark .topbar .dashboard-clock #live-time {
  color: #93c5fd;
}
body.theme-dark .theme-toggle-btn {
  background: rgba(148, 163, 184, 0.08) !important;
  border-color: rgba(148, 163, 184, 0.15) !important;
  color: #e2e8f0 !important;
}
body.theme-dark .report-toolbar {
  background: rgba(148, 163, 184, 0.04);
  border-color: rgba(148, 163, 184, 0.1);
}
body.theme-dark .table thead th {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #dbeafe !important;
}
body.theme-dark .form-label {
  color: #cbd5e1;
}
body.theme-dark .card-body h6 {
  color: #93c5fd;
}
body.theme-dark .auth-page {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
body.theme-dark .auth-page .card {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: rgba(148, 163, 184, 0.15) !important;
}
body.theme-dark .auth-page h3 {
  color: #e2e8f0;
}
body.theme-dark .auth-page .login-brand-logo {
  border-color: rgba(148, 163, 184, 0.3);
}
body.theme-dark .metric-box {
  background: rgba(148, 163, 184, 0.04) !important;
}
body.theme-dark .quick-action > i:first-child {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd !important;
}
body.theme-dark .report-period-label,
body.theme-dark .date-display-control {
  background: rgba(148, 163, 184, 0.06) !important;
  border-color: rgba(148, 163, 184, 0.15) !important;
}
body.theme-dark .report-period-label strong,
body.theme-dark .date-display-control .fw-semibold {
  color: #93c5fd;
}
body.theme-dark .scanner-control-card {
  background: #1f2937 !important;
}
body.theme-dark .scanner-time-card {
  background: rgba(148, 163, 184, 0.06) !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
}
body.theme-dark .scanner-time-card strong {
  color: #93c5fd;
}
body.theme-dark .scanner-control-hint {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.15);
}
body.theme-dark .settings-section-icon {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #93c5fd !important;
}
body.theme-dark .school-year-switcher {
  background: rgba(148, 163, 184, 0.04) !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
}
body.theme-dark .school-year-current {
  background: rgba(148, 163, 184, 0.06) !important;
  border-color: rgba(148, 163, 184, 0.15) !important;
}

/* ---------- Responsive ---------- */
/* Large desktop / PC screens (>= 1400px) */
@media (min-width: 1400px) {
  .sidebar {
    width: 290px;
    min-width: 290px;
    max-width: 290px;
  }
  .topbar {
    padding: 0.9rem 2rem !important;
  }
  .card-body {
    padding: 1.5rem !important;
  }
  .dashboard-hero .card-body {
    padding: 2.5rem 3rem !important;
  }
  .dashboard-hero h2 {
    font-size: 2rem;
  }
  .preview-content,
  main.container-fluid {
    padding: 2rem !important;
  }
  .table {
    font-size: 0.92rem;
  }
}

/* Shared application header: left metadata, centered identity, right account clock. */
.app-main > .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1035 !important;
  width: 100% !important;
  min-height: 92px !important;
  padding: .7rem 0 !important;
  background: #14532d !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .18) !important;
}
.app-main > .topbar .topbar-backdrop {
  display: none !important;
}
.app-main > .topbar .topbar-inner {
  width: 100%;
  min-height: 76px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem;
}
.app-main > .topbar .topbar-left,
.app-main > .topbar .topbar-center,
.app-main > .topbar .topbar-right {
  min-width: 0;
}
.app-main > .topbar .topbar-left {
  flex: 0 0 22%;
}
.app-main > .topbar .topbar-center {
  flex: 1 1 auto;
  min-width: 260px;
}
.app-main > .topbar .topbar-right {
  flex: 0 0 30%;
}
.app-main > .topbar .topbar-school-meta-block {
  gap: .08rem;
  color: #fff !important;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}
.app-main > .topbar .topbar-school-title,
.app-main > .topbar .topbar-school-subtitle,
.app-main > .topbar .topbar-system-title,
.app-main > .topbar .topbar-page-title {
  color: #fff !important;
  opacity: 1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-main > .topbar .topbar-school-title {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.app-main > .topbar .topbar-school-subtitle {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.app-main > .topbar .topbar-system-title {
  margin-top: .18rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.app-main > .topbar .topbar-page-title {
  margin-top: .2rem;
  color: #bbf7d0 !important;
  font-size: .72rem;
  font-weight: 800;
}
.app-main > .topbar .topbar-user {
  gap: 1rem;
}
.app-main > .topbar .profile-info,
.app-main > .topbar .dashboard-clock {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  min-width: 0 !important;
}
.app-main > .topbar .profile-info {
  gap: .1rem;
}
.app-main > .topbar .profile-info .fw-semibold,
.app-main > .topbar .topbar-profile-title,
.app-main > .topbar .topbar-role-label,
.app-main > .topbar .dashboard-clock,
.app-main > .topbar .dashboard-clock * {
  color: #fff !important;
  opacity: 1 !important;
}
.app-main > .topbar .profile-info .fw-semibold {
  font-size: .84rem;
  white-space: nowrap;
}
.app-main > .topbar .topbar-profile-title,
.app-main > .topbar .topbar-role-label,
.app-main > .topbar .dashboard-clock {
  font-size: .7rem;
  line-height: 1.35;
  white-space: nowrap;
}
.app-main > .topbar .topbar-role-label {
  font-weight: 700;
}
.app-main > .topbar .dashboard-clock {
  gap: .05rem;
  text-align: right;
}
.app-main > .topbar .dashboard-clock #live-time {
  font-size: .86rem;
  font-weight: 800;
}
.app-main > .topbar .topbar-menu-btn {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .55) !important;
  background: transparent !important;
}
@media (max-width: 991.98px) {
  .app-main > .topbar {
    min-height: 84px !important;
  }
  .app-main > .topbar .topbar-inner {
    min-height: 68px;
  }
  .app-main > .topbar .topbar-left {
    flex-basis: 25%;
  }
  .app-main > .topbar .topbar-right {
    flex-basis: 33%;
  }
  .app-main > .topbar .topbar-school-title {
    font-size: .9rem;
  }
}
@media (max-width: 767.98px) {
  .app-main > .topbar {
    min-height: 0 !important;
    padding: .65rem 0 !important;
  }
  .app-main > .topbar .topbar-inner {
    min-height: 0;
    flex-wrap: wrap;
    row-gap: .6rem;
  }
  .app-main > .topbar .topbar-left,
  .app-main > .topbar .topbar-right {
    flex: 1 1 48%;
  }
  .app-main > .topbar .topbar-center {
    order: 3;
    flex: 0 0 100%;
  }
  .app-main > .topbar .topbar-right {
    justify-content: flex-end;
  }
  .app-main > .topbar .topbar-school-meta-block {
    font-size: .68rem;
  }
  .app-main > .topbar .topbar-user {
    gap: .65rem;
  }
  .app-main > .topbar .dashboard-clock {
    display: none !important;
  }
  .app-main > .topbar .topbar-school-title {
    font-size: .9rem;
  }
  .app-main > .topbar .topbar-school-subtitle,
  .app-main > .topbar .topbar-system-title,
  .app-main > .topbar .topbar-page-title {
    font-size: .62rem;
  }
}
@media (max-width: 575.98px) {
  .app-main > .topbar .topbar-left,
  .app-main > .topbar .topbar-right {
    flex-basis: 100%;
  }
  .app-main > .topbar .topbar-right {
    justify-content: flex-start !important;
  }
  .app-main > .topbar .topbar-user {
    width: 100%;
    justify-content: space-between;
  }
  .app-main > .topbar .profile-info .fw-semibold {
    font-size: .78rem;
  }
}

/* Standard desktop / laptop (992px - 1399px) */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .sidebar {
    width: 272px;
    min-width: 272px;
    max-width: 272px;
  }
  .topbar {
    padding: 0.85rem 1.5rem !important;
  }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .sidebar {
    width: min(75vw, 300px);
    min-width: min(75vw, 300px);
    max-width: min(75vw, 300px);
  }
  .topbar .dashboard-clock {
    display: none;
  }
  .topbar .profile-info {
    min-width: 0;
  }
  .report-toolbar {
    grid-template-columns: 1fr;
  }
  .toolbar-search,
  .toolbar-actions {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 991.98px) {
  .sidebar {
    width: min(82vw, 300px);
    min-width: min(82vw, 300px);
    max-width: min(82vw, 300px);
  }
  .topbar {
    padding: 0.75rem 1rem !important;
  }
  .dashboard-hero .card-body {
    padding: 1.5rem !important;
  }
  .dashboard-hero h2 {
    font-size: 1.4rem;
  }
}

@media (max-width: 767.98px) {
  .topbar {
    min-height: auto;
  }
  .topbar .dashboard-clock {
    display: none;
  }
  .topbar .profile-info {
    min-width: 0;
    width: auto;
  }
  .dashboard-hero .card-body {
    padding: 1.25rem !important;
  }
  .dashboard-hero h2 {
    font-size: 1.25rem;
  }
  .dashboard-hero p {
    font-size: 0.85rem;
  }
  .dashboard-hero .btn {
    width: 100%;
  }
  .report-toolbar {
    padding: 0.85rem;
  }
  .auth-page .card .card-body {
    padding: 1.5rem !important;
  }
}

/* Portal Selection uses the same dark Official School Information glass treatment. */
.auth-page .auth-front-shell .auth-front-portal {
  background: rgba(0, 20, 60, .4) !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  border-radius: 16px !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 48px rgba(3, 17, 47, .3) !important;
}
.auth-page .auth-front-shell .auth-front-heading {
  color: #fff !important;
}
.auth-page .auth-front-shell .auth-front-heading h2 {
  color: #86efac !important;
  font-weight: 800;
}
.auth-page .auth-front-shell .auth-front-heading p,
.auth-page .auth-front-shell .auth-front-heading .auth-kicker {
  color: #f0fdf4 !important;
}
.auth-page .auth-front-shell .auth-front-heading .auth-kicker {
  font-weight: 800;
}
.auth-page .auth-front-shell .portal-role-list {
  gap: 1rem;
}
.auth-page .auth-front-shell .portal-role-list .role-option {
  background: rgba(0, 20, 60, .4) !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  border-radius: 16px !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px rgba(3, 17, 47, .2) !important;
}
.auth-page .auth-front-shell .portal-role-list .role-option h3,
.auth-page .auth-front-shell .portal-role-list .role-option p,
.auth-page .auth-front-shell .portal-role-list .role-option ul,
.auth-page .auth-front-shell .portal-role-list .role-option li {
  color: #fff !important;
}
.auth-page .auth-front-shell .portal-role-list .role-option p {
  opacity: .92;
}
.auth-page .auth-front-shell .portal-role-list .role-option li i {
  color: #86efac !important;
}
.auth-page .auth-front-shell .portal-role-list .role-icon {
  background: rgba(255, 255, 255, .15) !important;
  color: #bbf7d0 !important;
  border: 1px solid rgba(255, 255, 255, .2);
}
.auth-page .auth-front-shell .portal-role-list .role-option .btn-admin,
.auth-page .auth-front-shell .portal-role-list .role-option .btn-teacher {
  background: #2e7d32 !important;
  border-color: #2e7d32 !important;
  color: #fff !important;
}
.auth-page .auth-front-shell .auth-front-help {
  background: rgba(0, 20, 60, .4) !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.auth-page .auth-front-shell .auth-front-help > i,
.auth-page .auth-front-shell .auth-front-help strong,
.auth-page .auth-front-shell .auth-front-help span {
  color: #fff !important;
}
@media (min-width: 768px) {
  .auth-page .auth-front-shell .portal-role-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Final auth source of truth: stable white text and responsive Bootstrap layout. */
.auth-page .auth-school-side *,
.auth-page .auth-school-info *,
.auth-page .auth-front-portal *,
.auth-page .auth-login-card *,
.auth-page .auth-secondary-card * {
  opacity: 1 !important;
}
.auth-page .auth-school-side p,
.auth-page .auth-school-side span,
.auth-page .auth-school-side strong,
.auth-page .auth-school-side a,
.auth-page .auth-school-info p,
.auth-page .auth-school-info span,
.auth-page .auth-school-info strong,
.auth-page .auth-school-info a,
.auth-page .auth-front-portal .auth-front-heading p,
.auth-page .auth-front-portal .auth-kicker,
.auth-page .auth-front-portal .role-option h3,
.auth-page .auth-front-portal .role-option p,
.auth-page .auth-front-portal .role-option ul,
.auth-page .auth-front-portal .role-option li,
.auth-page .auth-front-portal .auth-front-help,
.auth-page .auth-front-portal .auth-front-help strong,
.auth-page .auth-front-portal .auth-front-help span,
.auth-page .auth-login-card p,
.auth-page .auth-login-card .form-label,
.auth-page .auth-login-card .form-text,
.auth-page .auth-secondary-card p,
.auth-page .auth-secondary-card .form-label,
.auth-page .auth-secondary-card .form-text,
.auth-page .auth-secondary-card small,
.auth-page .auth-form-links,
.auth-page .auth-form-links a,
.auth-page .auth-back,
.auth-page .auth-back a {
  color: #fff !important;
  opacity: 1 !important;
}
.auth-page .auth-form-links a:link,
.auth-page .auth-form-links a:visited,
.auth-page .auth-form-links a:focus,
.auth-page .auth-back a:link,
.auth-page .auth-back a:visited,
.auth-page .auth-back a:focus,
.auth-page .auth-secondary-card a:link,
.auth-page .auth-secondary-card a:visited,
.auth-page .auth-secondary-card a:focus {
  color: #ffffff !important;
  opacity: 1 !important;
}
.auth-page .auth-front-portal .auth-front-heading h2,
.auth-page .auth-kicker,
.auth-page .auth-front-portal .role-option li i {
  color: #86efac !important;
  opacity: 1 !important;
}
.auth-page .btn,
.auth-page button[type="submit"],
.auth-page input[type="submit"],
.auth-page .btn-primary,
.auth-page .btn-admin,
.auth-page .btn-teacher,
.auth-page .auth-submit,
.auth-page .portal-role-list .btn {
  background: #2e7d32 !important;
  border-color: #2e7d32 !important;
  color: #fff !important;
  opacity: 1 !important;
  text-shadow: none !important;
  min-height: 48px;
  border-radius: 12px !important;
  font-weight: 800 !important;
}
.auth-page .btn:hover,
.auth-page .btn:focus,
.auth-page .btn:active,
.auth-page button[type="submit"]:hover,
.auth-page button[type="submit"]:focus,
.auth-page button[type="submit"]:active {
  background: #2e7d32 !important;
  border-color: #2e7d32 !important;
  color: #fff !important;
}
.auth-page .auth-login-card .form-control::placeholder,
.auth-page .auth-secondary-card .form-control::placeholder,
.auth-page .auth-secondary-card .form-select::placeholder {
  color: #526b5b !important;
  opacity: 1 !important;
}
.auth-page .auth-login-card .form-control,
.auth-page .auth-secondary-card .form-control,
.auth-page .auth-secondary-card .form-select {
  background: #fff !important;
  color: #102a43 !important;
  opacity: 1 !important;
}
.auth-page .auth-front-shell,
.auth-page .auth-enhanced-layout {
  width: 100% !important;
  max-width: 1400px !important;
  min-width: 0;
  margin-left: auto !important;
  margin-right: auto !important;
}
.auth-page .auth-front-shell .auth-school-info,
.auth-page .auth-front-shell .auth-front-portal,
.auth-page .auth-school-side,
.auth-page .auth-form-column,
.auth-page .auth-school-column,
.auth-page .auth-login-card,
.auth-page .auth-secondary-card {
  min-width: 0;
  overflow: hidden;
}
.auth-page .auth-front-shell .role-copy,
.auth-page .auth-front-shell .role-copy h3,
.auth-page .auth-front-shell .role-copy p,
.auth-page .auth-front-shell .role-copy li,
.auth-page .auth-school-info h1,
.auth-page .auth-school-side h2 {
  overflow-wrap: anywhere;
  word-break: normal;
  writing-mode: horizontal-tb !important;
}
@media (max-width: 767.98px) {
  .auth-page .auth-front-shell > .auth-front-grid,
  .auth-page .auth-enhanced-layout {
    flex-wrap: wrap !important;
  }
  .auth-page .auth-front-shell > .auth-front-grid > .col-md-5,
  .auth-page .auth-front-shell > .auth-front-grid > .col-md-7,
  .auth-page .auth-enhanced-layout > .auth-school-column,
  .auth-page .auth-enhanced-layout > .auth-form-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .auth-page .auth-form-column {
    margin-top: 1rem;
  }
  .auth-page .auth-front-shell .portal-role-list {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .auth-page .auth-front-shell .portal-role-list {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .auth-page .auth-front-shell,
  .auth-page .auth-enhanced-layout {
    max-width: 1140px !important;
  }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .auth-page .auth-front-shell,
  .auth-page .auth-enhanced-layout {
    max-width: 1320px !important;
  }
}
@media (min-width: 1400px) {
  .auth-page .auth-front-shell,
  .auth-page .auth-enhanced-layout {
    max-width: 1360px !important;
  }
}

/* Global auth contract: stable contrast, shared actions, and Bootstrap breakpoints. */
.auth-page,
.auth-page .auth-front-shell,
.auth-page .auth-enhanced-layout,
.auth-page .auth-school-side,
.auth-page .auth-school-info,
.auth-page .auth-front-portal,
.auth-page .auth-login-card,
.auth-page .auth-secondary-card {
  color: #ffffff !important;
}
.auth-page .auth-school-side *,
.auth-page .auth-school-info *,
.auth-page .auth-front-portal *,
.auth-page .auth-login-card *,
.auth-page .auth-secondary-card * {
  opacity: 1 !important;
}
.auth-page .auth-school-side h2,
.auth-page .auth-school-side h3,
.auth-page .auth-school-side p,
.auth-page .auth-school-side span,
.auth-page .auth-school-side strong,
.auth-page .auth-school-side a,
.auth-page .auth-school-info h1,
.auth-page .auth-school-info h2,
.auth-page .auth-school-info p,
.auth-page .auth-school-info span,
.auth-page .auth-school-info strong,
.auth-page .auth-school-info a,
.auth-page .auth-front-portal .auth-front-heading p,
.auth-page .auth-front-portal .auth-kicker,
.auth-page .auth-front-portal .role-option h3,
.auth-page .auth-front-portal .role-option p,
.auth-page .auth-front-portal .role-option ul,
.auth-page .auth-front-portal .role-option li,
.auth-page .auth-front-portal .auth-front-help,
.auth-page .auth-front-portal .auth-front-help strong,
.auth-page .auth-front-portal .auth-front-help span,
.auth-page .auth-login-card p,
.auth-page .auth-login-card .form-label,
.auth-page .auth-login-card .form-text,
.auth-page .auth-secondary-card p,
.auth-page .auth-secondary-card .form-label,
.auth-page .auth-secondary-card .form-text,
.auth-page .auth-secondary-card small,
.auth-page .auth-form-links,
.auth-page .auth-form-links a,
.auth-page .auth-back,
.auth-page .auth-back a {
  color: #ffffff !important;
  opacity: 1 !important;
}
.auth-page .auth-front-portal .auth-front-heading h2,
.auth-page .auth-kicker {
  color: #86efac !important;
  opacity: 1 !important;
}
.auth-page .auth-front-portal .role-option li i {
  color: #86efac !important;
  opacity: 1 !important;
}
.auth-page .auth-front-portal .auth-front-help > i {
  color: #ffffff !important;
  opacity: 1 !important;
}
.auth-page .btn,
.auth-page button[type="submit"],
.auth-page input[type="submit"],
.auth-page .btn-primary,
.auth-page .btn-admin,
.auth-page .btn-teacher,
.auth-page .auth-submit,
.auth-page .portal-role-list .btn {
  background: #2e7d32 !important;
  border-color: #2e7d32 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: none !important;
  min-height: 48px;
  border-radius: 12px !important;
  font-weight: 800 !important;
}
.auth-page .btn:hover,
.auth-page .btn:focus,
.auth-page .btn:active,
.auth-page button[type="submit"]:hover,
.auth-page button[type="submit"]:focus,
.auth-page button[type="submit"]:active {
  background: #2e7d32 !important;
  border-color: #2e7d32 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}
.auth-page .auth-form-links a,
.auth-page .auth-back a,
.auth-page .auth-secondary-card a,
.auth-page .auth-front-contact a {
  color: #ffffff !important;
  opacity: 1 !important;
  text-decoration-color: rgba(255, 255, 255, .75);
}
.auth-page .auth-login-card .form-control::placeholder,
.auth-page .auth-secondary-card .form-control::placeholder,
.auth-page .auth-secondary-card .form-select::placeholder {
  color: #526b5b !important;
  opacity: 1 !important;
}
.auth-page .auth-login-card .form-control,
.auth-page .auth-secondary-card .form-control,
.auth-page .auth-secondary-card .form-select {
  color: #102a43 !important;
  background: #ffffff !important;
  opacity: 1 !important;
}
.auth-page .auth-login-card .input-group-text,
.auth-page .auth-secondary-card .input-group-text,
.auth-page .auth-login-card .qr-password-toggle,
.auth-page .auth-secondary-card .qr-password-toggle {
  opacity: 1 !important;
}
.auth-page .auth-front-shell,
.auth-page .auth-enhanced-layout {
  width: 100% !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  min-width: 0;
}
.auth-page .auth-front-shell > .auth-front-grid,
.auth-page .auth-enhanced-layout {
  min-width: 0;
}
.auth-page .auth-front-shell .auth-school-info,
.auth-page .auth-front-shell .auth-front-portal,
.auth-page .auth-school-side,
.auth-page .auth-form-column,
.auth-page .auth-school-column,
.auth-page .auth-login-card,
.auth-page .auth-secondary-card {
  min-width: 0;
  overflow: hidden;
}
.auth-page .auth-front-shell .auth-front-heading,
.auth-page .auth-front-shell .portal-role-list,
.auth-page .auth-front-shell .role-option,
.auth-page .auth-form-links {
  min-width: 0;
}
.auth-page .auth-front-shell .role-copy,
.auth-page .auth-front-shell .role-copy h3,
.auth-page .auth-front-shell .role-copy p,
.auth-page .auth-front-shell .role-copy li,
.auth-page .auth-school-info h1,
.auth-page .auth-school-side h2 {
  overflow-wrap: anywhere;
  word-break: normal;
  writing-mode: horizontal-tb !important;
}

@media (max-width: 575.98px) {
  .auth-page-content {
    padding: .75rem !important;
  }
  .auth-page .auth-front-shell,
  .auth-page .auth-enhanced-layout {
    max-width: 100% !important;
  }
  .auth-page .auth-front-shell > .auth-front-grid > .col-md-5,
  .auth-page .auth-front-shell > .auth-front-grid > .col-md-7,
  .auth-page .auth-enhanced-layout > .auth-school-column,
  .auth-page .auth-enhanced-layout > .auth-form-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .auth-page .auth-form-column {
    margin-top: 1rem;
  }
  .auth-page .auth-front-shell .portal-role-list {
    grid-template-columns: 1fr !important;
  }
  .auth-page .auth-school-info,
  .auth-page .auth-school-side-content,
  .auth-page .auth-front-portal > .card-body,
  .auth-page .auth-login-card .card-body,
  .auth-page .auth-secondary-card .card-body {
    padding: 1.15rem !important;
  }
  .auth-page .auth-school-info-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .auth-page .auth-front-contact,
  .auth-page .auth-school-contact,
  .auth-page .auth-form-links {
    flex-direction: column;
    align-items: stretch;
  }
  .auth-page .auth-front-contact a,
  .auth-page .auth-school-contact a {
    justify-content: center;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .auth-page .auth-front-shell,
  .auth-page .auth-enhanced-layout {
    max-width: 720px !important;
  }
  .auth-page .auth-front-shell .portal-role-list {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .auth-page .auth-front-shell,
  .auth-page .auth-enhanced-layout {
    max-width: 960px !important;
  }
  .auth-page .auth-front-shell .portal-role-list {
    grid-template-columns: 1fr !important;
  }
  .auth-page .auth-front-shell .auth-school-info h1 {
    font-size: 1.45rem;
  }
  .auth-page .auth-school-side h2 {
    font-size: 1.45rem !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .auth-page .auth-front-shell,
  .auth-page .auth-enhanced-layout {
    max-width: 1140px !important;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .auth-page .auth-front-shell,
  .auth-page .auth-enhanced-layout {
    max-width: 1320px !important;
  }
}

@media (min-width: 1400px) {
  .auth-page .auth-front-shell,
  .auth-page .auth-enhanced-layout {
    max-width: 1360px !important;
  }
}

/* End-of-file auth palette. */
.auth-page .auth-front-shell .portal-role-list .role-option .btn-admin,
.auth-page .auth-front-shell .portal-role-list .role-option .btn-teacher,
.auth-page .auth-login-card .auth-submit,
.auth-page .auth-secondary-card button[type="submit"],
.auth-page .auth-secondary-card .btn-primary,
.auth-page .btn-primary,
.auth-page .btn-admin,
.auth-page .btn-teacher {
  background: #2e7d32 !important;
  border-color: #2e7d32 !important;
  color: #fff !important;
}
.auth-page .auth-form-links a,
.auth-page .auth-back a,
.auth-page .auth-secondary-card a,
.auth-page .auth-front-contact a {
  color: #f0fdf4 !important;
}

/* Absolute final button palette after all legacy auth overrides. */
.auth-page .auth-front-shell .portal-role-list .role-option .btn-admin,
.auth-page .auth-front-shell .portal-role-list .role-option .btn-teacher,
.auth-page .auth-login-card .auth-submit,
.auth-page .auth-secondary-card button[type="submit"],
.auth-page .auth-secondary-card .btn-primary,
.auth-page .btn-primary,
.auth-page .btn-admin,
.auth-page .btn-teacher {
  background: #2e7d32 !important;
  border-color: #2e7d32 !important;
  color: #fff !important;
}
.auth-page .auth-form-links a,
.auth-page .auth-back a,
.auth-page .auth-secondary-card a,
.auth-page .auth-front-contact a {
  color: #f0fdf4 !important;
}

/* Final shared auth contrast: every action is green with white text. */
.auth-page .btn,
.auth-page button,
.auth-page input[type="submit"],
.auth-page input[type="button"] {
  color: #fff !important;
}
.auth-page .btn-primary,
.auth-page .btn-admin,
.auth-page .btn-teacher,
.auth-page .auth-submit,
.auth-page .auth-secondary-card button[type="submit"],
.auth-page .portal-role-list .btn,
.auth-page .auth-front-portal .btn {
  background: #2e7d32 !important;
  border-color: #2e7d32 !important;
  color: #fff !important;
  min-height: 48px;
  border-radius: 12px !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}
.auth-page .btn-primary:hover,
.auth-page .btn-primary:focus,
.auth-page .btn-admin:hover,
.auth-page .btn-admin:focus,
.auth-page .btn-teacher:hover,
.auth-page .btn-teacher:focus,
.auth-page .auth-submit:hover,
.auth-page .auth-submit:focus,
.auth-page .auth-secondary-card button[type="submit"]:hover,
.auth-page .auth-secondary-card button[type="submit"]:focus,
.auth-page .portal-role-list .btn:hover,
.auth-page .portal-role-list .btn:focus {
  background: #256628 !important;
  border-color: #256628 !important;
  color: #fff !important;
}
.auth-page .auth-form-links,
.auth-page .auth-back,
.auth-page .auth-form-links a,
.auth-page .auth-back a,
.auth-page .auth-secondary-card a,
.auth-page .auth-front-contact a {
  color: #f0fdf4 !important;
}
.auth-page .auth-form-links a:hover,
.auth-page .auth-form-links a:focus,
.auth-page .auth-back a:hover,
.auth-page .auth-back a:focus,
.auth-page .auth-secondary-card a:hover,
.auth-page .auth-secondary-card a:focus,
.auth-page .auth-front-contact a:hover,
.auth-page .auth-front-contact a:focus {
  color: #fff !important;
}
.auth-page .auth-login-card .form-label,
.auth-page .auth-secondary-card .form-label,
.auth-page .auth-login-card h1,
.auth-page .auth-secondary-card h3 {
  color: #fff !important;
}
.auth-page .auth-login-card p,
.auth-page .auth-secondary-card .text-muted,
.auth-page .auth-login-card .form-text,
.auth-page .auth-secondary-card .form-text,
.auth-page .auth-secondary-card small,
.auth-page .password-requirements {
  color: #e8f5ec !important;
}
.auth-page .auth-login-card .form-control::placeholder,
.auth-page .auth-secondary-card .form-control::placeholder,
.auth-page .auth-secondary-card .form-select::placeholder {
  color: #526b5b !important;
  opacity: 1 !important;
}
.auth-page .auth-login-card .form-control,
.auth-page .auth-secondary-card .form-control,
.auth-page .auth-secondary-card .form-select {
  color: #102a43 !important;
  background: #fff !important;
}
.auth-page .auth-login-card .input-group-text,
.auth-page .auth-secondary-card .input-group-text {
  color: #14532d !important;
}
.auth-page .auth-login-card .qr-password-toggle,
.auth-page .auth-secondary-card .qr-password-toggle {
  color: #14532d !important;
}
.auth-page .auth-front-shell .auth-front-heading h2 {
  color: #86efac !important;
}
.auth-page .auth-front-shell .auth-front-heading p,
.auth-page .auth-front-shell .auth-front-heading .auth-kicker,
.auth-page .auth-front-shell .role-option h3,
.auth-page .auth-front-shell .role-option p,
.auth-page .auth-front-shell .role-option ul,
.auth-page .auth-front-shell .role-option li,
.auth-page .auth-front-shell .auth-front-help,
.auth-page .auth-front-shell .auth-front-help strong,
.auth-page .auth-front-shell .auth-front-help span {
  color: #fff !important;
}
.auth-page .auth-front-shell .auth-front-help {
  background: rgba(0, 20, 60, .4) !important;
}
.auth-page .auth-school-side .auth-school-contact a {
  color: #f0fdf4 !important;
}
.auth-page .password-requirements span,
.auth-page [id$="-requirements"] span,
.auth-page [id$="-match"],
.auth-page [id$="-status"],
.auth-page #form-hint {
  color: #f0fdf4 !important;
}

@media (max-width: 575.98px) {
  .topbar h1 {
    font-size: 1.05rem;
  }
  .topbar-school {
    font-size: 0.85rem;
  }
  .topbar .profile-info {
    padding: 0.4rem 0.75rem;
  }
  .topbar .profile-info .fw-semibold {
    font-size: 0.82rem;
  }
  .theme-toggle-btn {
    min-height: 36px;
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
  }
  .card-body {
    padding: 1rem !important;
  }
  .stat-card .display-6 {
    font-size: 1.6rem;
  }
  .auth-page .card {
    border-radius: var(--m-radius-lg) !important;
  }
}
/* ============================================================
   QRATTEND v33 — Global modernisation & polish
   Alignment, spacing, animations, dark-theme readability,
   sidebar branding, tables, buttons, cards and responsive fixes.
   ============================================================ */

/* ---------- Entrance & micro animations ---------- */
@keyframes qrFadeUp    { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes qrFadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes qrSlideInL  { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes qrScaleIn   { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes qrPulseSoft { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.82); } }
@keyframes qrSpinRing  { to { transform: rotate(360deg); } }

.topbar    { animation: qrFadeIn .4s ease backwards; }

@media (min-width: 992px) {
  /* Sidebar slides in only on desktop so it never fights the
     mobile off-canvas translateX(-105%) closed position. */
  .sidebar { animation: qrSlideInL .38s cubic-bezier(.2,.7,.3,1) backwards; }
}

/* Cards reveal softly after the sidebar/topbar */
.app-main main > .card,
.app-main main > .row > [class*="col-"] > .card,
.app-main main > form.card {
  animation: qrFadeUp .45s cubic-bezier(.2,.7,.3,1) backwards;
}
.app-main main > .row > [class*="col-"]:nth-child(1) > .card { animation-delay: .02s; }
.app-main main > .row > [class*="col-"]:nth-child(2) > .card { animation-delay: .07s; }
.app-main main > .row > [class*="col-"]:nth-child(3) > .card { animation-delay: .12s; }
.app-main main > .row > [class*="col-"]:nth-child(4) > .card { animation-delay: .17s; }

.dashboard-hero { animation: qrScaleIn .5s cubic-bezier(.2,.7,.3,1) backwards; }
.auth-page .card { animation: qrScaleIn .5s cubic-bezier(.2,.7,.3,1) backwards; }

.scanner-live-dot { animation: qrPulseSoft 1.3s ease-in-out infinite; }
.stat-card, .stats-card, .quick-action, .session-row-link {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.btn { transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease; }
.btn:active { transform: translateY(0) scale(.97) !important; }
.sidebar .nav-link { transition: background-color .18s ease, color .18s ease, transform .18s ease; }

@media (prefers-reduced-motion: reduce) {
  .sidebar, .topbar, .app-main main > .card,
  .app-main main > .row > [class*="col-"] > .card,
  .app-main main > form.card, .dashboard-hero, .auth-page .card {
    animation: none !important;
  }
  * { transition-duration: .01ms !important; }
}

/* ---------- Sidebar: theme-aware branding + footer ---------- */
/* Fallback (no color-mix support): keep a dark blue gradient so white text stays readable. */
.sidebar {
  background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 50%, #1d4ed8 100%) !important;
}
@supports (background: color-mix(in srgb, #000 10%, #fff)) {
  /* Themed gradient — clamps every theme to a dark, readable shade. */
  .sidebar {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--bg-sidebar) 78%, #0f172a) 0%,
      color-mix(in srgb, var(--bg-sidebar) 58%, #0f172a) 100%) !important;
  }
}
.sidebar .sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  padding: 0 1rem;
}
.sidebar .sidebar-brand img {
  width: 84px;
  max-width: 84px;
  margin-bottom: .35rem;
}
.sidebar-brand-title {
  display: block;
  color: #ffffff;
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.sidebar-brand-tagline {
  display: block;
  color: rgba(255, 255, 255, .62);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
  text-align: center;
  margin-top: .1rem;
}
.sidebar .sidebar-school-name { display: none; }

.sidebar .nav { gap: .28rem !important; }
.sidebar .nav-link {
  min-height: 44px;
  border-radius: 11px !important;
  font-weight: 600;
  letter-spacing: .01em;
}
.sidebar .nav-link.active {
  box-shadow: inset 3px 0 0 rgba(255,255,255,.85), 0 6px 18px rgba(0,0,0,.22) !important;
}
.sidebar .nav-link-logout { border-top: 0 !important; }

/* Sidebar footer: School Head card */
.sidebar-footer {
  margin-top: 1rem;
  padding: .9rem .5rem .25rem;
}
.sidebar-school-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem .8rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
  text-align: left;
}
.sidebar-school-head-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, .16);
  color: #ffffff;
  font-size: 1.05rem;
}
.sidebar-school-head-text { min-width: 0; display: flex; flex-direction: column; }
.sidebar-school-head-label {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.sidebar-school-head-name {
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  word-break: break-word;
}
/* ---------- Topbar polish ---------- */
.topbar { gap: .75rem 1rem; }
.topbar-heading h1 { font-size: 1.15rem; margin-bottom: .15rem !important; }
.topbar-meta { white-space: nowrap; overflow: hidden; }
.topbar-meta .topbar-dot { color: rgba(15,23,42,.28); font-weight: 700; }
.topbar-school-head {
  margin-top: .1rem;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-muted, #6c757d);
  -webkit-text-fill-color: var(--text-muted, #6c757d);
  opacity: .85;
}
.dashboard-clock { display: flex; flex-direction: column; align-items: flex-end; }

/* Live clock sits directly below the Welcome/Role box in the topbar,
   right-aligned to the same edge and matching the profile card width. */
.topbar .dashboard-clock.topbar-profile-clock {
  min-width: 180px;
  margin-top: .15rem;
}

/* Compact header: school info stacked on the left, centered school name,
   Welcome/Role + live clock stack on the right. The theme control lives in
   Settings, so the header no longer carries the theme button. */
.topbar .topbar-meta { display: flex; flex-direction: column; gap: .05rem; }
.topbar .topbar-meta > div { display: flex; align-items: center; white-space: nowrap; }
.topbar .topbar-school { font-size: 1.35rem; font-weight: 900; letter-spacing: .02em; }
@media (max-width: 1199.98px) { .topbar .topbar-school { font-size: 1.15rem; } }
@media (max-width: 767.98px) { .topbar .topbar-school { font-size: 1.02rem; } }

/* ---------- Cards, spacing, globals ---------- */
main.container-fluid { padding-top: 1.4rem !important; padding-bottom: 2.5rem !important; }
.card { border-radius: 18px !important; }
.card-body { padding: 1.3rem !important; }
.page-card:hover { box-shadow: var(--m-shadow-md) !important; }
.dashboard-hero { border-radius: 22px !important; }
.dashboard-hero h2 { letter-spacing: -.01em; }
.text-muted, .form-text { line-height: 1.45; }
.page-description {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 500;
  line-height: 1.5;
}
.page-heading {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
h1, h2, h3, h4, h5, h6, .card-title { letter-spacing: -.012em; }
.stat-card:hover, .stats-card:hover { transform: translateY(-3px); }

/* ---------- Buttons ---------- */
.btn { border-radius: 12px !important; }
.btn-primary { box-shadow: 0 6px 16px rgba(30, 58, 138, .22) !important; }
.btn-primary:focus-visible, .btn-outline-primary:focus-visible,
.btn-outline-secondary:focus-visible, .btn-outline-success:focus-visible {
  box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .18) !important;
}
.btn-outline-secondary { border-color: rgba(15,23,42,.14) !important; }
.btn-sm { min-height: 34px; border-radius: 10px !important; }

/* Spinner ring used by AJAX buttons */
.btn .qr-btn-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: qrSpinRing .6s linear infinite;
}
.btn.is-loading .qr-btn-spinner { display: inline-block; }
.btn.is-loading { pointer-events: none; opacity: .85; }

/* ---------- Forms ---------- */
.form-control, .form-select { border-radius: 12px !important; }
.form-control:focus, .form-select:focus {
  box-shadow: 0 0 0 .22rem rgba(59, 130, 246, .12) !important;
}
.input-group > .form-control { border-radius: 0 12px 12px 0 !important; }
.input-group .input-group-text:first-child { border-radius: 12px 0 0 12px !important; }

/* ---------- Tables ---------- */
.table-responsive { border-radius: 14px; }
.table { --bs-table-border-color: rgba(15,23,42,.07); }
.table thead th {
  background: rgba(59, 130, 246, .08) !important;
  color: #1e3a8a !important;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .06em;
  padding: .85rem .9rem;
}
.table tbody td { padding: .72rem .9rem; }
.table tbody tr:nth-child(even) { background: rgba(15, 23, 42, .018); }
.table tbody tr:hover { background: rgba(59, 130, 246, .05) !important; }
.sheet-table tbody tr:nth-child(even) { background: rgba(15, 23, 42, .015); }
.badge.pill, .status-badge { font-weight: 700; }

/* Focus rings for accessibility */
:focus-visible { outline: 3px solid rgba(59, 130, 246, .35); outline-offset: 2px; }

/* ---------- Scanner ---------- */
.scanner-stage { border-radius: 20px !important; }
.scanner-result-card { animation: qrScaleIn .22s ease both; }
/* ---------- Dark theme: full readability ---------- */
body.theme-dark {
  background: var(--bg-soft);
  color: var(--text-color);
}
body.theme-dark .text-muted,
body.theme-dark .form-text,
body.theme-dark .topbar-meta span,
body.theme-dark .small.text-muted,
body.theme-dark .text-secondary { color: #94a3b8 !important; }
body.theme-dark .topbar-school-head { color: #94a3b8 !important; opacity: 1; }
body.theme-dark .topbar-meta .topbar-dot { color: rgba(148,163,184,.45) !important; }
body.theme-dark .card,
body.theme-dark .dropdown-menu,
body.theme-dark .modal-content,
body.theme-dark .page-card,
body.theme-dark .scanner-control-card,
body.theme-dark .account-settings {
  background: var(--bg-card) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}
body.theme-dark .card-body,
body.theme-dark .modal-body,
body.theme-dark .modal-header,
body.theme-dark .modal-footer { color: var(--text-color); }
body.theme-dark h1, body.theme-dark h2, body.theme-dark h3,
body.theme-dark h4, body.theme-dark h5, body.theme-dark h6,
body.theme-dark .fw-semibold, body.theme-dark .fw-bold,
body.theme-dark .display-6 { color: #e2e8f0 !important; }
body.theme-dark .form-control,
body.theme-dark .form-select {
  background-color: rgba(30, 41, 59, .9);
  border-color: rgba(148, 163, 184, .22);
  color: #e2e8f0;
}
body.theme-dark .form-control::placeholder { color: #64748b; }
body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus {
  border-color: #3b82f6;
  background-color: #1e293b;
  color: #e2e8f0;
}
body.theme-dark .input-group-text {
  background: rgba(148, 163, 184, .08);
  border-color: rgba(148, 163, 184, .22);
  color: #cbd5e1;
}
body.theme-dark .table {
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(148, 163, 184, .12);
  color: #e2e8f0;
}
body.theme-dark .table thead th {
  background: rgba(59, 130, 246, .18) !important;
  color: #bfdbfe !important;
}
body.theme-dark .table tbody tr:nth-child(even) { background: rgba(148, 163, 184, .04); }
body.theme-dark .table tbody tr:hover { background: rgba(59, 130, 246, .12) !important; }
body.theme-dark .sheet-table tbody tr:nth-child(odd) { background: rgba(148, 163, 184, .03); }
body.theme-dark .sheet-table tbody tr:nth-child(even) { background: rgba(148, 163, 184, .05); }
body.theme-dark .btn-outline-secondary,
body.theme-dark .btn-light {
  background: rgba(148, 163, 184, .08) !important;
  border-color: rgba(148, 163, 184, .22) !important;
  color: #e2e8f0 !important;
}
body.theme-dark .btn-outline-secondary:hover,
body.theme-dark .btn-light:hover {
  background: rgba(148, 163, 184, .16) !important;
  color: #ffffff !important;
}
body.theme-dark .dropdown-item { color: #e2e8f0 !important; }
body.theme-dark .dropdown-item:hover {
  background: rgba(59, 130, 246, .18) !important;
  color: #ffffff !important;
}
body.theme-dark .dropdown-item.text-danger { color: #fca5a5 !important; }
body.theme-dark .modal-title { color: #e2e8f0; }
body.theme-dark .btn-close { filter: invert(1) grayscale(1) brightness(1.4); }
body.theme-dark .alert-info,
body.theme-dark .scanner-feedback-info,
body.theme-dark .scanner-control-hint {
  background: rgba(59, 130, 246, .14) !important;
  border-color: rgba(59, 130, 246, .28) !important;
  color: #bfdbfe !important;
}
body.theme-dark .alert-success { background: rgba(16, 185, 129, .12) !important; border-color: rgba(16, 185, 129, .28) !important; color: #6ee7b7 !important; }
body.theme-dark .alert-danger  { background: rgba(239, 68, 68, .12) !important; border-color: rgba(239, 68, 68, .28) !important; color: #fca5a5 !important; }
body.theme-dark .alert-warning  { background: rgba(245, 158, 11, .12) !important; border-color: rgba(245, 158, 11, .28) !important; color: #fcd34d !important; }
body.theme-dark .stat-card, body.theme-dark .stats-card,
body.theme-dark .metric-box, body.theme-dark .quick-action {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
body.theme-dark .profile-thumb,
body.theme-dark .learner-qr-thumb { background: #1e293b; }
body.theme-dark .status-badge-neutral { background: rgba(148,163,184,.18); color: #cbd5e1; }
body.theme-dark .status-badge-late { background: rgba(245,158,11,.16); color: #fcd34d; }
body.theme-dark .status-badge-absent { background: rgba(239,68,68,.16); color: #fca5a5; }
body.theme-dark .status-badge-present { background: rgba(16,185,129,.16); color: #6ee7b7; }
body.theme-dark .status-badge-cutting { background: rgba(148,163,184,.16); color: #cbd5e1; }
body.theme-dark .badge.text-body { color: #e2e8f0 !important; }
body.theme-dark .qr-toast {
  background: #1e293b !important;
  border-color: rgba(148,163,184,.2) !important;
}
body.theme-dark .qr-toast-content,
body.theme-dark .qr-toast-content strong { color: #e2e8f0 !important; }
body.theme-dark .qr-toast-close { color: #94a3b8 !important; }
body.theme-dark .report-toolbar { background: rgba(148,163,184,.05) !important; }
body.theme-dark .report-period-label,
body.theme-dark .date-display-control { background: rgba(148,163,184,.08) !important; }
body.theme-dark .glass-card { background: rgba(30, 41, 59, .92) !important; }
body.theme-dark .text-success-strong, body.theme-dark .text-body { color: #e2e8f0 !important; }
/* ---------- Login / guest polish ---------- */
.auth-page { animation: qrFadeIn .45s ease both; }
.auth-page .login-brand-logo { transition: transform .25s ease; }
.auth-page .login-brand-logo:hover { transform: scale(1.05) rotate(-2deg); }
.auth-page .card-body { animation: qrFadeUp .45s ease both; }

/* ---------- Responsive refinements ---------- */
@media (max-width: 991.98px) {
  .sidebar { animation: none; }
  .topbar-school { position: relative; left: auto; transform: none; order: 3; width: 100%; margin-top: .25rem; }
  .topbar { align-items: center; }
}
@media (max-width: 767.98px) {
  .topbar-school { order: 3; text-align: center; }
  .topbar-school .topbar-school-head { display: block !important; }
  .dashboard-clock { display: none; }
  .topbar-meta { white-space: normal; }
  main.container-fluid { padding-left: .85rem !important; padding-right: .85rem !important; }
  .table-responsive > .table { min-width: 720px; }
}
@media (max-width: 575.98px) {
  .topbar-heading h1 { font-size: 1rem; }
  .topbar-meta { font-size: .7rem; }
  .profile-info .text-muted { display: none; }
  .toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; width: 100%; }
  .toolbar-actions .btn { width: 100%; margin: 0 !important; }
  .learner-header-actions { width: 100%; }
  .learner-header-actions .btn, .learner-header-actions form { width: 100%; }
  .dashboard-hero .btn-lg { width: 100%; }
  .stat-card .display-6, .stats-card .display-6 { font-size: 1.7rem; }
}

/* Wide desktop: keep reading area comfortable */
@media (min-width: 1600px) {
  .app-main main.container-fluid { max-width: 1560px; margin-inline: auto; }
}
/* Smooth theme transition (restored — this line previously contained stray
   characters that invalidated the rule and the one after it). */
body { transition: background-color .25s ease, color .25s ease; }


/* QRAttend v33 - GLOBAL FIXED-SIDEBAR layout
   The LEFT SIDEBAR stays fixed and locked to the viewport at all times.
   Only the RIGHT main content area scrolls independently. This is the
   base/global shell applied to every authenticated page. */
.app-shell { align-items: stretch; min-height: 100vh; }
.sidebar {
  align-self: stretch !important;
  overflow-x: hidden;
}
.app-main { min-width: 0; }
.app-main > main { min-height: calc(100vh - var(--m-topbar-height)); }

/* Desktop / landscape (>= 992px): sidebar is pinned, content scrolls. */
@media (min-width: 992px) {
  .app-shell {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 20;
    width: var(--m-sidebar-width);
    min-width: 0;
    max-width: var(--m-sidebar-width);
    height: 100vh;
    min-height: 0;
    overflow-y: auto;
  }
  .app-main {
    margin-left: var(--m-sidebar-width);
    height: 100vh;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 10;
  }
}

/* Large desktop (>= 1400px): the wider sidebar stays in sync with the
   main-content gutter so they never drift apart. */
@media (min-width: 1400px) {
  .app-main { margin-left: 290px; }
}

/* Learner toolbar: one straight baseline for search + actions. */
#learnerFilterForm .report-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  align-items: end;
  gap: 1rem;
}
#learnerFilterForm .toolbar-search,
#learnerFilterForm .toolbar-actions { min-width: 0; }
#learnerFilterForm .toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
  flex-wrap: nowrap;
  /* The helper text below the search field must not push the action buttons
     down the column. Reserve the exact space it occupies so Search / Export /
     Print align on the same straight line as the search input. */
  margin-bottom: calc(.4rem + 19px);
}
#learnerFilterForm .toolbar-actions .btn,
#learnerSearchButton {
  height: 44px;
  min-height: 44px;
  white-space: nowrap;
}
#learnerFilterForm .input-group { height: 44px; }
#learnerFilterForm .input-group .form-control { height: 44px; }
#learnerFilterForm .form-text {
  margin-top: .4rem;
  height: 19px;
  line-height: 19px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Make grade/section filters clearly visible and usable. */
.qr-grade-filter-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 14px;
  background: var(--bg-card, #fff);
  box-shadow: 0 4px 14px rgba(15,23,42,.04);
}
.qr-grade-filter-label {
  font-size: .78rem;
  font-weight: 800;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.qr-grade-filter-card .btn-group { flex-wrap: wrap; gap: .35rem; }
.qr-grade-filter-card .btn-group > .btn {
  border-radius: 10px !important;
  margin-left: 0 !important;
  min-height: 54px;
  padding: .4rem .8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  text-align: center;
}
/* Grade/Section filter buttons: main label + adviser subtitle (from SF4 records). */
.grade-filter-btn .grade-filter-main { font-size: .85rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.grade-filter-btn .grade-filter-adviser {
  font-size: .68rem;
  font-weight: 500;
  line-height: 1.25;
  opacity: .8;
  max-width: 180px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Grade/Section filter buttons: standardized, accessible design =====
   One partial (views/partials/grade_buttons.php) renders these on every page
   that shows the filter (Dashboard, Daily Attendance, Learners, Weekly and
   Monthly Reports), so these class-based rules apply globally to both
   Administrator and Teacher accounts.

   Unselected: light neutral surface, dark readable text, subtle border.
   Hover:      soft brand tint.
   Active:     brand blue (theme accent, fallback #165DFF) with WHITE text.
               This replaces the previous look where Bootstrap's hardcoded
               bright-blue .btn-outline-primary.active fill combined with the
               global .btn-outline-primary color override produced unreadable
               dark-on-blue text. */
.qr-grade-filter-card .grade-filter-btn {
  background: var(--theme-card-bg, #ffffff) !important;
  border: 1px solid var(--theme-border, #e2e8f0) !important;
  color: var(--theme-text, #1e293b) !important;
  border-radius: 10px !important;
  min-height: 54px;
  padding: .4rem .8rem;
  font-size: .85rem;
  font-weight: 600;
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.qr-grade-filter-card .grade-filter-btn:hover,
.qr-grade-filter-card .grade-filter-btn:focus-visible {
  background: var(--theme-primary-soft, rgba(22, 93, 255, .08)) !important;
  border-color: var(--theme-focus, #165DFF) !important;
  color: var(--theme-primary, #165DFF) !important;
}
.qr-grade-filter-card .grade-filter-btn.active,
.qr-grade-filter-card .grade-filter-btn.active:hover,
.qr-grade-filter-card .grade-filter-btn.active:focus,
.qr-grade-filter-card .grade-filter-btn.active:focus-visible {
  background: var(--theme-primary, #165DFF) !important;
  border-color: var(--theme-primary, #165DFF) !important;
  color: var(--theme-on-primary, #ffffff) !important;
  box-shadow: 0 4px 14px rgba(22, 93, 255, .26);
}
.qr-grade-filter-card .grade-filter-btn.active .grade-filter-main {
  color: var(--theme-on-primary, #ffffff);
}
.qr-grade-filter-card .grade-filter-btn.active .grade-filter-adviser {
  color: var(--theme-on-primary, #ffffff);
  opacity: .92;
}
.qr-grade-filter-card .grade-filter-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(22, 93, 255, .22);
}
.qr-grade-filter-card .grade-filter-btn.active:focus-visible {
  box-shadow: 0 0 0 .2rem rgba(22, 93, 255, .32);
}

/* Dark theme: unselected buttons keep a neutral dark surface with readable
   text; the active button is pinned to the brand blue #165DFF with white
   text so contrast stays high (the dark theme's own accent is a light blue
   that would be too pale for white text). */
body.theme-dark .qr-grade-filter-card .grade-filter-btn {
  background: rgba(148, 163, 184, .08) !important;
  border-color: var(--border-color, rgba(148, 163, 184, .25)) !important;
  color: var(--text-color, #e2e8f0) !important;
}
body.theme-dark .qr-grade-filter-card .grade-filter-btn:hover,
body.theme-dark .qr-grade-filter-card .grade-filter-btn:focus-visible {
  background: rgba(148, 163, 184, .16) !important;
  border-color: var(--m-primary-light, #60a5fa) !important;
  color: var(--text-color, #e2e8f0) !important;
}
/* Dark active state needs no override: the base rule already uses
   --theme-primary / --theme-on-primary, which auto-switch to the pale
   accent + dark text in dark mode for guaranteed readability. */

/* Refresh button: sits at the right side of the grade/section filter buttons
   and refreshes the current module's data. Reuses the shared qrSpinRing
   keyframes for its spinning state and matches the grade button metrics. */
.qr-grade-filter-card .qr-refresh-btn {
  border-radius: 10px !important;
  margin-left: 0 !important;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .4rem 1rem;
  background: var(--m-primary-soft, rgba(59, 130, 246, .10));
  border: 1px solid rgba(59, 130, 246, .4) !important;
  color: var(--m-primary, #1e3a8a) !important;
  font-weight: 700;
  white-space: nowrap;
}
.qr-grade-filter-card .qr-refresh-btn:hover,
.qr-grade-filter-card .qr-refresh-btn:focus-visible {
  background: rgba(59, 130, 246, .18) !important;
  border-color: rgba(59, 130, 246, .65) !important;
  color: var(--m-primary, #1e3a8a) !important;
}
.qr-grade-filter-card .qr-refresh-btn .bi {
  font-size: 1.05rem;
  line-height: 1;
}
.qr-grade-filter-card .qr-refresh-btn.qr-refreshing {
  pointer-events: none;
  opacity: .8;
}
.qr-grade-filter-card .qr-refresh-btn.qr-refreshing .bi {
  animation: qrSpinRing .7s linear infinite;
}
body.theme-dark .qr-grade-filter-card .qr-refresh-btn {
  background: rgba(59, 130, 246, .16);
  border-color: rgba(59, 130, 246, .45) !important;
  color: #bfdbfe !important;
}
body.theme-dark .qr-grade-filter-card .qr-refresh-btn:hover {
  background: rgba(59, 130, 246, .26) !important;
  color: #dbeafe !important;
}
/* On small screens the grade buttons take the full row; the refresh button
   wraps below as a full-width control so the layout stays tidy. */
@media (max-width: 767.98px) {
  .qr-grade-filter-card .qr-refresh-btn { width: 100%; }
}

/* Learner table: predictable spacing and action alignment. */
.learner-screen-table { min-width: 1420px; }
.learner-screen-table th,
.learner-screen-table td { vertical-align: middle; padding: .72rem .85rem; }
.learner-screen-table th { white-space: nowrap; }
.learner-screen-table td:last-child,
.learner-screen-table th:last-child { width: 74px; min-width: 74px; text-align: center !important; }
.learner-screen-table .action-menu-btn { margin: 0 auto; }
.learner-qr-cell { width: 78px; min-width: 78px; }

/* Dedicated view/print actions should always be easy to click. */
.learner-view-actions { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.learner-view-actions .btn { min-height:42px; }

@media (max-width: 991.98px) {
  #learnerFilterForm .report-toolbar { grid-template-columns: 1fr; align-items: stretch; }
  #learnerFilterForm .toolbar-actions { width: 100%; justify-content: stretch; margin-bottom: 0; }
  #learnerFilterForm .toolbar-actions .btn { flex: 1 1 0; }
}
@media (max-width: 575.98px) {
  .sidebar { min-height: 100vh !important; }
  #learnerFilterForm .toolbar-actions { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .5rem; }
  #learnerFilterForm .toolbar-actions .btn { width: 100%; padding-left: .5rem; padding-right: .5rem; }
  .qr-grade-filter-card { align-items: flex-start; }
  .qr-grade-filter-label { width: 100%; }
  .qr-grade-filter-card .btn-group { width: 100%; }
  .qr-grade-filter-card .btn-group > .btn { flex: 1 1 auto; }
}

/* QRAttend learner table usability: keep the row number and Actions visible
   while the wide information table is horizontally scrolled. */
.learner-screen-table th:first-child,
.learner-screen-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--theme-card-bg, #ffffff);
  color: var(--theme-text, #0f172a);
  box-shadow: 3px 0 8px rgba(15,23,42,.05);
}
.learner-screen-table th:last-child,
.learner-screen-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 3;
  background: var(--theme-card-bg, #ffffff);
  color: var(--theme-text, #0f172a);
  box-shadow: -3px 0 8px rgba(15,23,42,.06);
}
.learner-screen-table thead th:first-child,
.learner-screen-table thead th:last-child { z-index: 5; }

#reportContent.qr-ajax-loading { opacity:.55; pointer-events:none; transition:opacity .15s ease; }
.report-gender-total td, .report-overall-total td { background:rgba(59,130,246,.06); }

/* Keep learner No. and Actions permanently visible while the wide table scrolls. */
.learner-screen-table th:first-child,.learner-screen-table td:first-child{min-width:58px;width:58px;}
.learner-screen-table th:last-child,.learner-screen-table td:last-child{min-width:86px;width:86px;background:var(--theme-card-bg, #ffffff) !important;}
.learner-screen-table tbody td:last-child{box-shadow:-6px 0 10px rgba(15,23,42,.08);}
.learner-screen-table thead th:last-child{box-shadow:-6px 0 10px rgba(15,23,42,.10);}


/* QRAttend learner table final usability: No. and Actions remain visible. */
.learner-screen-table { min-width: 1180px; }
.learner-screen-table th:first-child,
.learner-screen-table td:first-child { position: sticky !important; left: 0 !important; z-index: 7 !important; background: var(--theme-card-bg, #ffffff) !important; color: var(--theme-text, #0f172a) !important; }
.learner-screen-table th:last-child,
.learner-screen-table td:last-child { position: sticky !important; right: 0 !important; z-index: 8 !important; min-width: 88px !important; width: 88px !important; background: var(--theme-card-bg, #ffffff) !important; color: var(--theme-text, #0f172a) !important; }
.learner-screen-table thead th:first-child,
.learner-screen-table thead th:last-child { z-index: 10 !important; }
.learner-screen-table tbody td:last-child { box-shadow: -8px 0 14px rgba(15,23,42,.10); }
.learner-screen-table thead th:last-child { box-shadow: -8px 0 14px rgba(15,23,42,.12); }

/* Modern global theme bridge: every page, including Login, inherits the Settings theme. */
body[class*="theme-"] { --m-primary: var(--table-accent, #1e3a8a); --m-primary-light: color-mix(in srgb, var(--table-accent, #1e3a8a) 72%, #ffffff 28%); --m-primary-soft: color-mix(in srgb, var(--table-accent, #1e3a8a) 12%, transparent); --m-accent: var(--table-accent, #1e3a8a); --m-shadow-primary: 0 8px 24px color-mix(in srgb, var(--table-accent, #1e3a8a) 22%, transparent); }
body[class*="theme-"] .sidebar { background: linear-gradient(180deg, color-mix(in srgb, var(--bg-sidebar, #1e3a8a) 88%, #ffffff 12%), var(--bg-sidebar, #1e3a8a)) !important; }
body[class*="theme-"] .auth-page h3,
body[class*="theme-"] .auth-page a { color: var(--m-primary) !important; }
body[class*="theme-"] .auth-page .btn-primary { background: var(--m-primary) !important; border-color: var(--m-primary) !important; color: #ffffff !important; }
body[class*="theme-"] .glass-card .btn-primary { color: #ffffff !important; }
body[class*="theme-"] .auth-page .btn-primary:hover,
body[class*="theme-"] .auth-page .btn-primary:focus { color: #ffffff !important; }
body[class*="theme-"] .topbar-school { color: var(--m-primary) !important; }

/* Missing Settings themes: teal + rose. */
body.theme-teal{--bg-body:#f0fdfa;--bg-soft:radial-gradient(circle at top,rgba(13,148,136,.20),transparent 45%),#f0fdfa;--bg-sidebar:#0f766e;--bg-card:#fff;--text-color:#134e4a;--text-muted:#475569;--border-color:rgba(13,148,136,.18);--table-head-bg:rgba(13,148,136,.12);--table-accent:#0f766e;--topbar-bg:rgba(255,255,255,.94);--topbar-border:rgba(13,148,136,.20)}
body.theme-rose{--bg-body:#fff1f2;--bg-soft:radial-gradient(circle at top,rgba(225,29,72,.18),transparent 45%),#fff1f2;--bg-sidebar:#be123c;--bg-card:#fff;--text-color:#4c0519;--text-muted:#6b7280;--border-color:rgba(190,18,60,.18);--table-head-bg:rgba(225,29,72,.10);--table-accent:#be123c;--topbar-bg:rgba(255,255,255,.94);--topbar-border:rgba(190,18,60,.20)}


/* ===== QRAttend Presentation-Ready Global UX Layer ===== */
:root{--qr-success:#16a34a;--qr-danger:#dc2626;--qr-warning:#d97706;--qr-cutting:#6b7280;--qr-info:#0284c7;--qr-radius:16px}
*{scrollbar-width:thin}html{scroll-behavior:smooth}body{overflow-x:hidden}.app-main{min-width:0}.card,.qr-grade-filter-card,.table-responsive,.modal-content{transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}.card:hover{box-shadow:0 10px 30px rgba(15,23,42,.08)}button,.btn,.nav-link,input,select,.form-control{transition:all .18s ease}.btn:hover{transform:translateY(-1px)}.qr-clicked{transform:scale(.98)!important}.qr-ajax-loading{position:relative;min-height:90px}.qr-ajax-loading:after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.42);backdrop-filter:blur(1px);z-index:20;pointer-events:none}.status-badge{display:inline-flex;align-items:center;gap:2px;border-radius:999px;padding:.38rem .62rem;font-weight:800;letter-spacing:.01em;white-space:nowrap}.status-badge-present{background:rgba(22,163,74,.12)!important;color:#15803d!important;border:1px solid rgba(22,163,74,.2)}.status-badge-absent{background:rgba(220,38,38,.11)!important;color:#b91c1c!important;border:1px solid rgba(220,38,38,.2)}.status-badge-late{background:rgba(217,119,6,.13)!important;color:#b45309!important;border:1px solid rgba(217,119,6,.22)}.status-badge-cutting{background:rgba(124,58,237,.12)!important;color:#6d28d9!important;border:1px solid rgba(124,58,237,.2)}.status-badge-neutral{background:#f1f5f9!important;color:#64748b!important;border:1px solid #e2e8f0}.status-present{color:#15803d!important;background:rgba(22,163,74,.08)!important}.status-absent{color:#b91c1c!important;background:rgba(220,38,38,.08)!important}.status-late{color:#b45309!important;background:rgba(217,119,6,.08)!important}.status-cutting{color:#6d28d9!important;background:rgba(124,58,237,.08)!important}.report-summary-cards .card{border-top:3px solid transparent}.report-summary-cards .card:nth-child(1){border-top-color:var(--qr-success)}.report-summary-cards .card:nth-child(2){border-top-color:var(--qr-danger)}.report-summary-cards .card:nth-child(3){border-top-color:var(--qr-warning)}.report-summary-cards .card:nth-child(4){border-top-color:var(--qr-cutting)}.report-summary-cards .card:nth-child(5){border-top-color:var(--qr-info)}
@media(max-width:1199.98px){.app-main .container-fluid{padding-left:1rem!important;padding-right:1rem!important}.topbar-school{order:3!important;width:100%;padding:.35rem 0}.topbar-left{flex:1 1 auto}.topbar-meta{font-size:.72rem!important}.sheet-table{min-width:1050px}}
@media(max-width:767.98px){.topbar{padding:.75rem!important}.topbar-heading h1{font-size:1rem}.dashboard-clock{display:none}.profile-info{display:none}.qr-grade-filter-card{padding:.75rem}.qr-grade-filter-card .btn-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.qr-grade-filter-card .btn-group>.btn{width:100%;min-width:0;font-size:.78rem}.report-toolbar{grid-template-columns:1fr!important}.toolbar-actions{width:100%;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}.toolbar-actions .btn{width:100%;font-size:.78rem}.report-summary-cards .h3{font-size:1.4rem}.table-responsive{border-radius:12px}.sidebar{width:280px;max-width:86vw}.app-shell{overflow-x:hidden}}
@media(max-width:480px){.toolbar-actions{grid-template-columns:1fr!important}.topbar-meta .topbar-dot{display:none}.topbar-meta span{font-size:.68rem}.qr-grade-filter-card .btn-group{grid-template-columns:1fr}.form-control,.btn{min-height:42px}.report-summary-cards .col-6{width:50%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* ============================================================
   QRATTEND GLOBAL DESIGN SYSTEM — v51
   One professional component language for every page and role.
   Colors follow the signed-in user's theme through the --theme-*
   aliases below (they reuse the existing theme variables — no
   duplicate palette). Screen-only layer: standalone print
   documents keep their own optimized styles.
   ============================================================ */

/* ---------- 1. Universal theme tokens (aliases over the existing theme system) ---------- */
:root {
  --theme-primary: #1d4ed8;             /* user's chosen main theme color */
  --theme-primary-hover: #173a9e;
  --theme-primary-strong: #1e3a8a;      /* fill guaranteed readable with white text */
  --theme-primary-soft: rgba(59, 130, 246, 0.10);
  --theme-on-primary: #ffffff;          /* readable text ON a primary fill */
  --theme-background: #f8fafc;          /* main page background */
  --theme-card-bg: #ffffff;             /* cards, panels, boxes */
  --theme-surface: #f1f5f9;
  --theme-text: #0f172a;                /* primary readable text */
  --theme-heading: #0f172a;
  --theme-text-muted: #64748b;          /* labels, hints, dates, empty messages */
  --theme-border: #e2e8f0;
  --theme-input-bg: #ffffff;
  --theme-success: #16a34a;             /* Present / good status */
  --theme-danger: #dc2626;              /* Absent / bad status */
  --theme-warning: #d97706;             /* Late / warning status */
  --theme-focus: #3b82f6;
  --theme-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  --theme-stripe: #f8fafc;              /* alternate table row shade */
  --theme-focus-ring: rgba(59, 130, 246, 0.38);
}
body[class*="theme-"] {
  --theme-primary: var(--m-primary, #1d4ed8);
  --theme-primary-strong: var(--m-primary, #1e3a8a);
  --theme-primary-soft: var(--m-primary-soft, rgba(59, 130, 246, 0.10));
  --theme-on-primary: #ffffff;          /* every light theme accent is dark enough for white */
  --theme-background: var(--bg-body, #f8fafc);
  --theme-card-bg: var(--bg-card, #ffffff);
  --theme-surface: var(--bg-card, #ffffff);
  --theme-text: var(--text-color, #0f172a);
  --theme-heading: var(--text-color, #0f172a);
  --theme-text-muted: var(--text-muted, #64748b);
  --theme-border: var(--border-color, #e2e8f0);
  --theme-input-bg: var(--bg-card, #ffffff);
  --theme-focus: var(--m-primary-light, #3b82f6);
  --theme-stripe: var(--table-stripe, #f8fafc);
  /* Compatibility aliases kept so earlier rules keep resolving. */
  --theme-bg: var(--theme-background);
  --theme-card: var(--theme-card-bg);
  --theme-muted: var(--theme-text-muted);
}
/* Hover shade: a slightly darker step of the primary (fallback = primary). */
body[class*="theme-"] { --theme-primary-hover: var(--m-primary, #173a9e); }
@supports (background: color-mix(in srgb, #000 10%, #fff)) {
  body[class*="theme-"]:not(.theme-dark) { --theme-primary-hover: color-mix(in srgb, var(--m-primary) 84%, #000); }
  body[class*="theme-"] { --theme-focus-ring: color-mix(in srgb, var(--m-primary-light) 55%, transparent); }
}
/* Dark theme: its accent is a PALE tint, so text placed on it auto-switches
   to dark gray/navy (auto contrast). Solid fills needing white text keep the
   brand blue via --theme-primary-strong. Hover lightens the pale fill. */
body.theme-dark {
  --theme-primary: #1e3a8a;
  --theme-on-primary: #ffffff;
  --theme-primary-strong: #1e3a8a;
  --theme-primary-hover: #2563eb;
  --theme-success: #4ade80;
  --theme-danger: #f87171;
  --theme-warning: #fbbf24;
}

/* ---------- 2. Typography hierarchy ---------- */
body { line-height: 1.5; }
h1, h2, h3, h4, h5, h6 { color: var(--theme-heading, inherit); }
.card-body h4 { font-size: 1.22rem; font-weight: 700; letter-spacing: -.012em; }
.card-body h5 { font-size: 1.03rem; font-weight: 700; }
.card-body h6 { font-size: .8rem; font-weight: 700; }
.card-body p { line-height: 1.55; }
.text-muted, .form-text { color: var(--theme-text-muted, #64748b) !important; }
/* ---------- 3. Button system (one language for every action) ---------- */
.btn {
  min-height: 40px;
  padding: .48rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .005em;
}
/* ~8px radius on regular buttons; intentional pill/circle shapes survive. */
.btn:not(.rounded-circle):not(.rounded-pill):not(.rounded-3):not(.rounded-4):not(.rounded-5) { border-radius: 8px !important; }
.btn.rounded-3, .btn.rounded-4, .btn.rounded-5 { border-radius: 8px !important; }
.btn.rounded-pill { border-radius: 999px !important; }
.btn.rounded-circle { border-radius: 50% !important; }
.btn-sm:not(.rounded-pill):not(.rounded-circle) { min-height: 34px; padding: .34rem .72rem; font-size: .8125rem; border-radius: 7px !important; }
.btn-lg { min-height: 48px; padding: .62rem 1.35rem; font-size: .95rem; }
.btn i, .btn .bi { vertical-align: -.08em; }

/* Primary actions: theme fill + auto-readable label */
.btn-primary {
  background: var(--theme-primary) !important;
  border: 1px solid var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .12) !important;
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--theme-primary-hover) !important;
  border-color: var(--theme-primary-hover) !important;
  color: var(--theme-on-primary) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .16) !important;
}
.btn-primary:active { background: var(--theme-primary) !important; transform: none; }
.btn-primary:disabled, .btn-primary.disabled { background: var(--theme-primary) !important; opacity: .55; transform: none; }

/* Secondary / neutral actions: theme surface + border */
.btn-secondary { background: var(--theme-text-muted) !important; border: 1px solid var(--theme-text-muted) !important; color: var(--theme-on-primary) !important; }
.btn-secondary:hover, .btn-secondary:focus-visible { filter: brightness(.92); }
.btn-outline-secondary {
  background: var(--theme-card-bg) !important;
  border: 1px solid var(--theme-border) !important;
  color: var(--theme-text) !important;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus-visible {
  background: var(--theme-primary-soft) !important;
  border-color: var(--theme-focus) !important;
  color: var(--theme-primary) !important;
}
/* Destructive / success / outline variants: semantic, never theme-branded */
.btn-success { background: var(--theme-success) !important; border: 1px solid var(--theme-success) !important; color: var(--theme-on-primary) !important; }
.btn-success:hover, .btn-success:focus-visible { filter: brightness(.93); }
.btn-danger { background: var(--theme-danger) !important; border: 1px solid var(--theme-danger) !important; color: var(--theme-on-primary) !important; }
.btn-danger:hover, .btn-danger:focus-visible { filter: brightness(.93); }
.btn-outline-danger { color: var(--theme-danger) !important; border: 1px solid var(--theme-danger) !important; background: var(--theme-card-bg) !important; }
.btn-outline-danger:hover, .btn-outline-danger:focus-visible { background: var(--theme-danger) !important; color: var(--theme-on-primary) !important; }
.btn-outline-success { color: var(--theme-success) !important; border: 1px solid var(--theme-success) !important; background: var(--theme-card-bg) !important; }
.btn-outline-success:hover, .btn-outline-success:focus-visible { background: var(--theme-success) !important; color: var(--theme-on-primary) !important; }
.btn-outline-primary {
  color: var(--theme-primary) !important;
  border: 1px solid var(--theme-focus) !important;
  background: var(--theme-card-bg) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus-visible { background: var(--theme-primary-soft) !important; color: var(--theme-primary) !important; }
.btn-light { background: var(--theme-card-bg) !important; color: var(--theme-text) !important; border: 1px solid var(--theme-border) !important; }
body.theme-dark .btn-light { background: rgba(148, 163, 184, .10) !important; color: #e2e8f0 !important; border-color: rgba(148, 163, 184, .22) !important; }
/* Disabled state: consistent, clearly inactive */
.btn:disabled, .btn.disabled, fieldset:disabled .btn { opacity: .55; }
/* ---------- 4. Form system ---------- */
.form-control, .form-select {
  border-radius: 8px !important;
  min-height: 42px;
  padding: .48rem .8rem;
  font-size: .9rem;
  background: var(--theme-input-bg, #fff);
  color: var(--theme-text, #0f172a);
}
.form-control:focus, .form-select:focus {
  border-color: var(--theme-focus) !important;
  box-shadow: 0 0 0 .22rem var(--theme-primary-soft) !important;
}
.form-label { font-weight: 600; font-size: .84rem; margin-bottom: .4rem; color: var(--theme-text); opacity: .92; }
.form-text { font-size: .78rem; }
.form-control::placeholder, .form-select::placeholder { color: var(--theme-muted, #94a3b8); opacity: 1; }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background: #f1f5f9; background: color-mix(in srgb, var(--theme-border) 38%, var(--theme-card-bg)); cursor: not-allowed; }
.form-check-input:checked { background-color: var(--theme-primary-strong); border-color: var(--theme-primary-strong); }
.form-check-input:focus { border-color: var(--theme-focus); box-shadow: 0 0 0 .2rem var(--theme-primary-soft); }
.input-group > .form-control, .input-group > .form-select { border-radius: 0 8px 8px 0 !important; }
.input-group > .input-group-text:first-child { border-radius: 8px 0 0 8px !important; }
.input-group > .btn:last-child { border-radius: 0 8px 8px 0 !important; }
/* Borderless password-visibility toggle used on Login / Signup */
.qr-password-toggle {
  border: 0 !important;
  background: transparent !important;
  color: var(--theme-muted, #64748b) !important;
  font-size: 1.02rem;
  padding: .45rem .8rem;
  box-shadow: none !important;
}
.qr-password-toggle:hover, .qr-password-toggle:focus-visible { color: var(--theme-primary, #1d4ed8) !important; background: transparent !important; transform: none; }

/* ---------- 5. Table system: one visual language ---------- */
.table { --bs-table-border-color: var(--theme-border, #e2e8f0); background: var(--theme-card-bg, #fff); }
.table thead th, .sheet-table thead th {
  background: var(--theme-primary, #1e3a8a) !important;
  color: var(--theme-on-primary, #ffffff) !important;
  border-bottom: 0 !important;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .8rem .9rem;
}
.table, .sheet-table, .sf-table {
  color: var(--theme-text, #0f172a);
  --bs-table-bg: var(--theme-card-bg, #ffffff);
  --bs-table-color: var(--theme-text, #0f172a);
  --bs-table-border-color: var(--theme-border, #e2e8f0);
}
.table thead th, .sheet-table thead th, .sf-table thead th {
  background: var(--theme-primary, #1e3a8a) !important;
  color: var(--theme-on-primary, #ffffff) !important;
  border-color: var(--theme-border, #e2e8f0) !important;
}
.table tbody td, .sheet-table tbody td, .sf-table tbody td { color: var(--theme-text, #0f172a); }
.learner-screen-table tbody td:first-child,
.learner-screen-table tbody td:last-child {
  background: var(--theme-card-bg, #ffffff) !important;
  color: var(--theme-text, #0f172a) !important;
}
.learner-screen-table thead th:first-child,
.learner-screen-table thead th:last-child {
  background: var(--theme-primary, #1e3a8a) !important;
  color: var(--theme-on-primary, #ffffff) !important;
}
.dashboard-hero p { color: var(--theme-on-primary, #ffffff) !important; opacity: .86; }
.table thead th .bi, .sheet-table thead th .bi { color: var(--theme-on-primary, #ffffff); }
/* Every solid-theme table header stays readable on the colored header fill in
   every theme. Sub-labels (e.g. report dates shown with .text-muted) inherit
   the on-primary color instead of the global muted gray that would be
   unreadable on the fill. Light-tint headers (.clean-table etc.) keep their
   own dark-on-light text and are intentionally not forced to on-primary. */
.table thead th, .sheet-table thead th { color: var(--theme-on-primary, #ffffff) !important; }
.table thead th .text-muted,
.sheet-table thead th .text-muted { color: var(--theme-on-primary, #ffffff) !important; opacity: .78; }
.table thead th a { color: inherit; }
.table tbody td, .sheet-table tbody td { color: var(--theme-text, inherit); }
/* Alternate rows: a subtle shade derived from the theme background. */
.table tbody tr:nth-child(even), .sheet-table tbody tr:nth-child(even) { background: var(--theme-stripe) !important; }
.table tbody tr:hover, .sheet-table tbody tr:hover { background: var(--theme-primary-soft) !important; }
/* Week group header rows keep a lighter treatment inside the header block. */
.sheet-table thead tr.sheet-week-header th {
  background: var(--theme-primary-soft) !important;
  color: var(--theme-primary) !important;
  border-top: 1px solid var(--theme-border) !important;
  border-bottom: 1px solid var(--theme-border) !important;
}
/* ---------- 6. Cards & panels ---------- */
.card { border-color: var(--theme-border, rgba(15, 23, 42, .06)) !important; }
.card-header { border-bottom-color: var(--theme-border) !important; }
.list-group-item { border-color: var(--theme-border) !important; }
.stat-card, .stats-card, .metric-box, .quick-action { border-color: var(--theme-border) !important; color: var(--theme-text); }

/* ---------- 7. Badges & chips: theme-aware, semantic kept ---------- */
.badge { font-weight: 600; }
.bg-primary { background-color: var(--theme-primary, #1e3a8a) !important; color: var(--theme-on-primary, #fff) !important; }
.text-primary { color: var(--theme-primary, #1d4ed8) !important; }
.bg-success { background-color: var(--theme-success, #16a34a) !important; }
.bg-danger { background-color: var(--theme-danger, #dc2626) !important; }
.bg-warning { background-color: var(--theme-warning, #d97706) !important; }
.text-success { color: var(--theme-success, #16a34a) !important; }
.text-danger { color: var(--theme-danger, #dc2626) !important; }
.text-warning { color: var(--theme-warning, #d97706) !important; }
.topbar-role-badge {
  background: var(--theme-primary, #1e3a8a) !important;
  color: var(--theme-on-primary, #fff) !important;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ---------- 8. Alerts & toasts ---------- */
.alert .bi { flex: 0 0 auto; }
.alert-info a, .alert-success a, .alert-warning a, .alert-danger a { font-weight: 700; }

/* ---------- 9. Dropdowns & modals ---------- */
.dropdown-menu { border: 1px solid var(--theme-border) !important; }
.modal-content { border-color: var(--theme-border) !important; }
.modal-header, .modal-footer { border-color: var(--theme-border) !important; }

/* ---------- 10. Navigation polish: sidebar + topbar ---------- */
/* Active item carries a theme-accent edge on top of the themed sidebar. */
.sidebar .nav-link.active {
  box-shadow: inset 3px 0 0 var(--theme-focus, rgba(255, 255, 255, .9)), 0 6px 18px rgba(0, 0, 0, .22) !important;
}
.sidebar .nav-link:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: -2px; }
.topbar { border-bottom: 1px solid var(--theme-border) !important; }

/* ---------- 11. Page theming: hero + auth follow the active theme ---------- */
/* Hero: solid theme fill so the auto-contrast on-primary text stays readable
   in every theme (a gradient would end in pale tones in dark mode). */
.dashboard-hero {
  background: var(--theme-primary, #1e3a8a) !important;
  color: var(--theme-on-primary, #ffffff);
}
.dashboard-hero h2, .dashboard-hero .text-white { color: var(--theme-on-primary, #ffffff) !important; }
.dashboard-hero p, .dashboard-hero .eyebrow { color: var(--theme-on-primary, #ffffff); opacity: .78; }
/* Guard: any muted helper text inside the hero still follows the hero contrast. */
.dashboard-hero .text-muted { color: var(--theme-on-primary, #ffffff) !important; opacity: .78; }
/* Hero action button: white surface so it stands out on the theme fill. */
.dashboard-hero .btn-primary {
  background: var(--theme-card-bg, #fff) !important;
  border-color: var(--theme-card-bg, #fff) !important;
  color: var(--theme-primary-strong, #1e3a8a) !important;
}
.dashboard-hero .btn-primary:hover {
  background: var(--theme-card-bg, #fff) !important;
  color: var(--theme-primary-strong, #1e3a8a) !important;
  filter: brightness(.96);
}
/* Login/Signup use the school default theme — gradient follows its colors. */
.auth-page {
  background: linear-gradient(135deg, var(--theme-primary-strong, #1e3a8a) 0%, var(--theme-primary, #1d4ed8) 58%, var(--m-primary-light, #3b82f6) 100%);
}
.auth-page .card { border: 1px solid rgba(255, 255, 255, .35) !important; }
.auth-page h3 { color: var(--theme-primary); }
/* ---------- 12. Empty & loading states ---------- */
.qr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--theme-text-muted, #64748b);
  font-weight: 500;
}
.qr-empty .bi { font-size: 1.9rem; opacity: .55; }
.qr-ajax-loading { opacity: .55; pointer-events: none; transition: opacity .18s ease; }

/* ---------- 13. Focus, motion & accessibility ---------- */
:focus-visible { outline: 3px solid var(--theme-focus-ring, rgba(59, 130, 246, .38)); outline-offset: 2px; }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem var(--theme-primary-soft), 0 0 0 1px var(--theme-focus) !important;
}
@media (prefers-reduced-motion: reduce) {
  body, .btn, .card, .sidebar .nav-link { transition: none !important; }
}

/* ---------- 14. Dark-mode hardening (semantic text + Bootstrap utilities) ---------- */
body.theme-dark .text-info { color: #7dd3fc !important; }
body.theme-dark .text-secondary { color: #cbd5e1 !important; }
body.theme-dark .bg-primary-subtle { background-color: rgba(59, 130, 246, .18) !important; }
body.theme-dark .text-primary-emphasis { color: #93c5fd !important; }
body.theme-dark .bg-success-subtle { background-color: rgba(16, 185, 129, .16) !important; }
body.theme-dark .text-success-emphasis { color: #6ee7b7 !important; }
body.theme-dark .bg-danger-subtle { background-color: rgba(239, 68, 68, .16) !important; }
body.theme-dark .text-danger-emphasis { color: #fca5a5 !important; }
body.theme-dark .bg-warning-subtle { background-color: rgba(245, 158, 11, .16) !important; }
body.theme-dark .text-warning-emphasis { color: #fcd34d !important; }
body.theme-dark .input-group-text { background: #26334d; color: #cbd5e1; border-color: rgba(148, 163, 184, .2); }
body.theme-dark .form-control::placeholder, body.theme-dark .form-select::placeholder { color: #64748b; }
body.theme-dark .form-control:disabled, body.theme-dark .form-select:disabled,
body.theme-dark .form-control[readonly] { background: rgba(148, 163, 184, .10); color: #cbd5e1; }
body.theme-dark .qr-password-toggle { color: #94a3b8 !important; }
body.theme-dark .qr-password-toggle:hover, body.theme-dark .qr-password-toggle:focus-visible { color: #93c5fd !important; }
body.theme-dark .btn-close { filter: invert(1) grayscale(1) brightness(1.5); }

/* ---------- 15. Print safety: keep browser-printed screens printer-friendly ---------- */
@media print {
  .table thead th, .sheet-table thead th {
    background: #eef2f7 !important;
    color: #0f172a !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .table tbody tr:hover, .sheet-table tbody tr:hover { background: transparent !important; }
  .qr-empty .bi { display: none; }
}

/* ---------- 16. Responsive touch-ups ---------- */
@media (max-width: 575.98px) {
  .btn { min-height: 42px; }
  .btn-sm:not(.rounded-pill):not(.rounded-circle) { min-height: 38px; }
  .form-control, .form-select { min-height: 44px; }
}


/* Final login composition */
.auth-page .glass-card{width:100%;max-width:526px;border:1px solid rgba(148,163,184,.25);border-radius:28px!important;background:rgba(248,250,252,.97);box-shadow:0 24px 60px rgba(15,23,42,.18)!important;overflow:hidden}.auth-page .card-body{padding:34px 36px 24px!important}.login-welcome{display:flex;flex-direction:column;align-items:flex-start;text-align:left;margin-bottom:28px!important}.login-welcome .login-brand-logo{width:88px!important;height:88px!important;object-fit:contain;align-self:flex-start;margin:0 0 20px!important}.login-welcome-label{font-size:14px!important;color:#1e293b;font-weight:800!important}.login-system-link{font-size:31px!important;line-height:1.05!important;letter-spacing:.035em!important;color:var(--m-primary,#2347b7)!important;font-weight:900!important}.login-system-name{font-size:14px!important;color:#64748b!important;margin-top:5px!important;font-weight:700!important}.auth-page .form-label{font-size:14px;font-weight:700;color:#334155}.auth-page .input-group{border-radius:13px;overflow:hidden}.auth-page .input-group-text{background:#f1f5f9;border-color:#cbd5e1;min-width:42px;justify-content:center}.auth-page .form-control{min-height:46px;border-color:#cbd5e1}.auth-page .form-control:focus{box-shadow:0 0 0 .2rem rgba(37,99,235,.12);border-color:var(--m-primary,#2347b7)}.auth-page .btn-primary{min-height:48px;border-radius:13px;font-weight:800;box-shadow:0 8px 18px rgba(37,99,235,.22)}.auth-page .form-check-label{color:#1e335e}@media(max-width:575.98px){.auth-page .glass-card{max-width:calc(100vw - 28px);border-radius:22px!important}.auth-page .card-body{padding:26px 22px 20px!important}.login-welcome .login-brand-logo{width:76px!important;height:76px!important}.login-system-link{font-size:27px!important}}

/* ===== Final presentation polish: status coding + centered login ===== */
.status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 8px;border-radius:8px;font-size:.78rem;font-weight:900;line-height:1;border:1px solid transparent;box-shadow:0 1px 2px rgba(15,23,42,.08)}
.status-badge-present{background:#dcfce7!important;color:#15803d!important;border-color:#86efac!important}
.status-badge-absent{background:#fee2e2!important;color:#b91c1c!important;border-color:#fca5a5!important}
.status-badge-late{background:#fef3c7!important;color:#a16207!important;border-color:#fcd34d!important}
.status-badge-cutting{background:#e5e7eb!important;color:#4b5563!important;border-color:#9ca3af!important}
body.theme-dark .status-badge-present{background:#14532d!important;color:#bbf7d0!important;border-color:#166534!important}
body.theme-dark .status-badge-absent{background:#7f1d1d!important;color:#fecaca!important;border-color:#991b1b!important}
body.theme-dark .status-badge-late{background:#78350f!important;color:#fde68a!important;border-color:#92400e!important}
body.theme-dark .status-badge-cutting{background:#374151!important;color:#e5e7eb!important;border-color:#6b7280!important}
.auth-page .login-welcome{align-items:center!important;text-align:center!important}
.auth-page .login-welcome .login-brand-logo{align-self:center!important;margin-left:auto!important;margin-right:auto!important}
.auth-page .login-system-link{cursor:default!important;pointer-events:none!important;text-decoration:none!important}

/* Authentication fields share a fixed geometry so password toggles never reflow the form. */
.auth-page .input-group {
  min-height: 46px;
  border-radius: 13px;
  overflow: hidden;
}
.auth-page .input-group > .input-group-text {
  flex: 0 0 46px;
  width: 46px;
  min-width: 46px;
  min-height: 46px;
  padding: 0;
  border-radius: 0;
}
.auth-page .input-group > .form-control,
.auth-page .input-group > .form-select {
  min-width: 0;
  min-height: 46px;
  height: 46px;
  border-radius: 0;
}
.auth-page .qr-password-toggle {
  flex: 0 0 46px;
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  border: 1px solid #cbd5e1;
  border-left: 0;
  border-radius: 0;
  background: #fff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.auth-page .qr-password-toggle:hover,
.auth-page .qr-password-toggle:focus-visible {
  color: var(--m-primary, #2347b7);
  background: #f8fafc;
}
.auth-page .password-requirements {
  align-items: center;
  gap: .25rem .65rem;
  line-height: 1.35;
}
.auth-page .password-requirements span {
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .auth-page .input-group > .input-group-text,
  .auth-page .input-group > .form-control,
  .auth-page .input-group > .form-select,
  .auth-page .qr-password-toggle {
    min-height: 44px;
    height: 44px;
  }
  .auth-page .input-group > .input-group-text,
  .auth-page .qr-password-toggle {
    flex-basis: 44px;
    width: 44px;
    min-width: 44px;
  }
}

/* Sticky learner headers must keep the same themed fill as the other headers. */
body[class*="theme-"] {
  --theme-primary: color-mix(in srgb, var(--bg-sidebar, #1e3a8a) 82%, #000000 18%);
  --theme-primary-strong: var(--theme-primary);
  --theme-on-primary: #ffffff;
  --m-primary: var(--theme-primary);
  --table-accent: var(--theme-primary);
}
body.theme-dark {
  --theme-primary: #1e3a8a;
  --theme-primary-strong: #1e3a8a;
  --theme-on-primary: #ffffff;
}
.learner-screen-table thead th:first-child,
.learner-screen-table thead th:last-child {
  background: var(--theme-primary, #1e3a8a) !important;
  background-color: var(--theme-primary, #1e3a8a) !important;
  background-image: none !important;
  color: var(--theme-on-primary, #ffffff) !important;
}

/* Global P/A/L/C semantic colors: P=green, A=red, L=yellow, C=gray */
.status-present{color:#15803d!important;background:#dcfce7!important}
.status-absent{color:#b91c1c!important;background:#fee2e2!important}
.status-late{color:#a16207!important;background:#fef3c7!important}
.status-cutting{color:#4b5563!important;background:#e5e7eb!important}


/* Learner profile photo placeholders */
.learner-profile-placeholder{
    width:52px;height:52px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
    background:var(--bs-secondary-bg,#eef1f4);color:var(--bs-secondary-color,#6c757d);font-size:24px;
    border:1px solid var(--bs-border-color,#dee2e6);
}
.learner-profile-placeholder.female{background:#f5edf5;color:#9a5a9a}
.learner-profile-placeholder.male{background:#eaf2f8;color:#39739d}
.learner-view-photo-placeholder{
    min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:var(--bs-secondary-bg,#eef1f4);color:var(--bs-secondary-color,#6c757d);
    border:1px solid var(--bs-border-color,#dee2e6);font-size:16px;gap:8px;
}
.learner-view-photo-placeholder i{font-size:72px}
.learner-view-photo-placeholder.female{background:#f5edf5;color:#9a5a9a}
.learner-view-photo-placeholder.male{background:#eaf2f8;color:#39739d}
.learner-photo-placeholder{
    width:150px;min-height:150px;border-radius:16px;display:inline-flex;flex-direction:column;
    align-items:center;justify-content:center;gap:6px;background:var(--bs-secondary-bg,#eef1f4);
    color:var(--bs-secondary-color,#6c757d);border:1px solid var(--bs-border-color,#dee2e6);
}
.learner-photo-placeholder i{font-size:58px}
.learner-photo-placeholder-female{background:#f5edf5;color:#9a5a9a}
.learner-photo-placeholder-male{background:#eaf2f8;color:#39739d}

/* Authentication portal and role-specific sign-in experience. */
.auth-page{padding:24px 0;background:radial-gradient(circle at 10% 12%,rgba(96,165,250,.28),transparent 28%),radial-gradient(circle at 92% 88%,rgba(45,212,191,.16),transparent 24%),linear-gradient(135deg,#0b1f46,#173d7a)!important}
.auth-page .glass-card{background:rgba(255,255,255,.96)!important;box-shadow:0 25px 65px rgba(3,17,47,.35)!important}
.auth-page .auth-portal-card{max-width:850px!important;margin:auto;border-radius:28px!important}.auth-portal-card .card-body{padding:42px!important}.auth-branding .login-brand-logo{width:82px!important;height:82px!important;object-fit:contain;margin:0 auto 15px!important}.auth-kicker{display:inline-block;color:#3565b5;font-size:.7rem;font-weight:800;letter-spacing:.12em}.auth-branding h1{font-size:2rem;font-weight:800;color:#16284a;margin:5px 0 7px}.auth-branding h1 span{color:#2764c6}.auth-branding p,.auth-form-header p{color:#64748b;font-size:.93rem;margin:0}.portal-heading{text-align:center;margin:28px 0 18px}.portal-heading h2{font-size:1.1rem;font-weight:800;color:#1e293b;margin-bottom:3px}.portal-heading p{font-size:.85rem;color:#64748b;margin:0}.role-option{position:relative;padding:25px 22px 21px;border:1px solid #e2e8f0;border-radius:18px;background:linear-gradient(180deg,#fff,#f8fbff);transition:.2s ease;height:100%}.role-option:hover{transform:translateY(-4px);border-color:#93c5fd;box-shadow:0 16px 30px rgba(30,64,175,.12)}.role-icon,.auth-role-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:14px}.role-icon{width:52px;height:52px;font-size:1.4rem;margin-bottom:14px}.role-admin .role-icon,.badge-admin{background:#e8f0ff;color:#1e40af}.role-teacher .role-icon,.badge-teacher{background:#e0edff;color:#2563c7}.role-option h3{font-size:1.1rem;font-weight:800;color:#1e293b}.role-option p{font-size:.85rem;color:#64748b;line-height:1.55;min-height:40px}.role-option ul{padding:0;margin:16px 0 21px;list-style:none;color:#475569;font-size:.8rem;line-height:1.9}.role-option li i{color:#16a34a}.btn-admin{background:linear-gradient(135deg,#1e3a8a,#2563eb)!important;border-color:#1e3a8a!important;color:#fff!important;font-weight:700}.auth-page .btn-admin,.auth-page .btn-admin:hover,.auth-page .btn-admin:focus,.auth-page .btn-admin:active{color:#fff!important;background:linear-gradient(135deg,#1e3a8a,#2563eb)!important;border-color:#1e3a8a!important}.btn-admin:hover,.btn-admin:focus{background:linear-gradient(135deg,#173074,#1d4ed8)!important;border-color:#173074!important;transform:translateY(-1px);box-shadow:0 8px 18px rgba(30,58,138,.20)}.auth-security-note{text-align:center;color:#64748b;font-size:.76rem;margin-top:26px}.auth-security-note i{color:#16a34a;margin-right:5px}.auth-login-card{border-radius:24px!important}.auth-login-card .card-body{padding:34px 38px 26px!important}.auth-form-header{display:flex;align-items:center;gap:14px;margin-bottom:26px}.auth-role-badge{width:50px;height:50px;flex:0 0 50px;font-size:1.35rem}.auth-form-header h1{font-size:1.3rem;font-weight:800;color:#1e293b;margin:2px 0 4px}.auth-form-header p{font-size:.8rem;line-height:1.35}.auth-login-form .form-label{font-size:.83rem;font-weight:750;color:#334155;margin-bottom:7px}.auth-login-form .form-text{font-size:.72rem;color:#78869a;margin-top:6px}.auth-login-form .input-group{border-radius:12px!important;overflow:hidden}.auth-login-form .form-control{font-size:.9rem}.auth-login-form .form-control::placeholder{color:#a0aec0}.auth-submit{min-height:48px;border-radius:12px!important;font-size:.9rem;font-weight:800!important}.auth-form-links{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:20px;color:#cbd5e1;font-size:.79rem}.auth-form-links a,.auth-back a{color:#3565b5!important;font-weight:650;text-decoration:none}.auth-form-links a:hover,.auth-back a:hover{text-decoration:underline}.auth-form-links i{margin-right:3px}.auth-back{text-align:center;margin-top:18px;font-size:.79rem}.auth-back i{margin-right:4px}.auth-alert{font-size:.84rem;border-radius:12px;margin-bottom:20px}.auth-login-card .qr-password-toggle{cursor:pointer}.auth-login-card .qr-password-toggle:focus-visible{outline:2px solid #2563eb;outline-offset:-2px}
@media(max-width:575.98px){.auth-page{padding:12px 0}.auth-portal-card .card-body{padding:28px 21px!important}.auth-login-card .card-body{padding:27px 22px 21px!important}.auth-branding h1{font-size:1.65rem}.auth-branding .login-brand-logo{width:70px!important;height:70px!important}.role-option p{min-height:0}.auth-form-header{align-items:flex-start}.auth-form-header h1{font-size:1.17rem}}
.auth-form-logo-wrap{text-align:center;margin:0 0 18px}.auth-form-logo{width:72px;height:72px;object-fit:contain;display:inline-block}
.auth-form-header{display:block!important;text-align:center!important;margin-bottom:26px!important}.auth-form-header h1{margin:5px 0 6px!important}.auth-form-header .auth-kicker{display:block}.auth-form-header .auth-form-logo-wrap{margin-bottom:14px}


/* ---------- Authentication consistency polish (scoped to guest/auth pages) ---------- */
.auth-page {
  color: #1e293b;
}
.auth-page .auth-secondary-card {
  width: 100%;
  max-width: 520px;
  border: 1px solid rgba(148,163,184,.22) !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 22px 55px rgba(15,23,42,.14) !important;
}
.auth-page .auth-secondary-card .card-body {
  padding: 32px 36px 28px !important;
}
.auth-page .auth-secondary-card > .card-body > .text-center:first-child {
  margin-bottom: 24px !important;
}
.auth-page .auth-secondary-card .login-brand-logo {
  width: 72px !important;
  height: 72px !important;
  object-fit: contain;
  margin: 0 auto 12px !important;
}
.auth-page .auth-secondary-card h3 {
  color: #1e293b;
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.auth-page .auth-secondary-card .text-muted,
.auth-page .auth-secondary-card .form-text {
  color: #64748b !important;
}
.auth-page .auth-secondary-card .form-label {
  color: #334155;
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: 7px;
}
.auth-page .auth-secondary-card .input-group {
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,.02);
}
.auth-page .auth-secondary-card .input-group-text,
.auth-page .auth-secondary-card .form-control,
.auth-page .auth-secondary-card .form-select {
  min-height: 46px;
  border-color: #dbe3ee;
}
.auth-page .auth-secondary-card .input-group-text {
  min-width: 46px;
  justify-content: center;
  color: #2563eb;
  background: #f8fbff;
}
.auth-page .auth-secondary-card .form-control,
.auth-page .auth-secondary-card .form-select {
  font-size: .88rem;
  color: #1e293b;
  background: #fff;
}
.auth-page .auth-secondary-card .form-control:focus,
.auth-page .auth-secondary-card .form-select:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 .2rem rgba(37,99,235,.10);
}
.auth-page .auth-secondary-card .qr-password-toggle {
  min-width: 46px;
  color: #64748b;
  background: #fff;
  border-color: #dbe3ee;
}
.auth-page .auth-secondary-card .btn-primary,
.auth-page .auth-secondary-card .btn-admin {
  min-height: 48px;
  border-radius: 12px !important;
  font-weight: 800;
}
.auth-page .auth-secondary-card a {
  color: #24458f;
  font-weight: 650;
  text-decoration: none;
}
.auth-page .auth-secondary-card a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}
.auth-page .auth-secondary-card .alert {
  border-radius: 12px;
  font-size: .82rem;
}
.auth-page .auth-secondary-card.signup-card {
  max-width: none;
}
.auth-page .auth-secondary-card .signup-card .form-label {
  font-size: .8rem;
}
.auth-page .auth-secondary-card .signup-card .form-control,
.auth-page .auth-secondary-card .signup-card .form-select,
.auth-page .auth-secondary-card .signup-card .input-group-text {
  min-height: 42px;
}
.auth-page .auth-secondary-card .signup-card #signup-submit {
  min-height: 48px !important;
  border-radius: 12px !important;
}
.auth-page .auth-secondary-card .signup-card .login-brand-logo {
  width: 72px !important;
}

@media (max-width: 575.98px) {
  .auth-page .auth-secondary-card .card-body {
    padding: 26px 20px 22px !important;
  }
}

/* QRAttend authentication color consistency: use the same school blue as the
   core system and keep authentication button labels white in every state. */
.auth-page .auth-portal-card .role-option .btn-admin,
.auth-page .auth-portal-card .role-option .btn-primary,
.auth-page .auth-login-card .btn-admin,
.auth-page .auth-secondary-card .btn-admin,
.auth-page .auth-secondary-card .btn-primary {
  background: var(--qa-primary, #1f3b64) !important;
  border-color: var(--qa-primary, #1f3b64) !important;
  color: #fff !important;
}
.auth-page .auth-portal-card .role-option .btn-admin:hover,
.auth-page .auth-portal-card .role-option .btn-admin:focus,
.auth-page .auth-portal-card .role-option .btn-admin:active,
.auth-page .auth-portal-card .role-option .btn-primary:hover,
.auth-page .auth-portal-card .role-option .btn-primary:focus,
.auth-page .auth-portal-card .role-option .btn-primary:active,
.auth-page .auth-login-card .btn-admin:hover,
.auth-page .auth-login-card .btn-admin:focus,
.auth-page .auth-login-card .btn-admin:active,
.auth-page .auth-secondary-card .btn-admin:hover,
.auth-page .auth-secondary-card .btn-admin:focus,
.auth-page .auth-secondary-card .btn-admin:active,
.auth-page .auth-secondary-card .btn-primary:hover,
.auth-page .auth-secondary-card .btn-primary:focus,
.auth-page .auth-secondary-card .btn-primary:active {
  background: var(--qa-primary-2, #2d5b91) !important;
  border-color: var(--qa-primary-2, #2d5b91) !important;
  color: #fff !important;
}
.auth-page .auth-portal-card .role-option .btn-admin .bi,
.auth-page .auth-portal-card .role-option .btn-primary .bi,
.auth-page .auth-login-card .btn-admin .bi,
.auth-page .auth-secondary-card .btn-admin .bi,
.auth-page .auth-secondary-card .btn-primary .bi { color: #fff !important; }


/* ===== Binoongan High School visual identity ===== */
body.theme-school {
  --m-primary: #166534;
  --m-primary-light: #22c55e;
  --m-primary-soft: rgba(34, 197, 94, .11);
  --theme-primary: #166534;
  --theme-primary-strong: #14532d;
  --theme-primary-soft: rgba(34, 197, 94, .11);
}
body.theme-school .sidebar {
  background: linear-gradient(180deg, #166534 0%, #14532d 72%, #0f3d23 100%) !important;
}
body.theme-school .topbar-school,
body.theme-school .topbar-school-mini h1 {
  color: #166534 !important;
}
body.theme-school .btn-primary {
  background: linear-gradient(135deg, #166534, #22c55e) !important;
  border-color: #166534 !important;
}
body.theme-school .btn-outline-primary {
  color: #166534 !important;
  border-color: rgba(22,101,52,.38) !important;
}
body.theme-school .btn-outline-primary:hover {
  background: rgba(22,101,52,.08) !important;
  color: #14532d !important;
}
body.theme-school .table thead th,
body.theme-school .sheet-table thead th {
  border-color: rgba(22,101,52,.16) !important;
}

.sidebar-school-logo {
  width: 82px !important;
  height: 82px !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  padding: 0 !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.20) !important;
}
.sidebar-brand-title {
  display:block;
  margin-top:.7rem;
  font-weight:900;
  letter-spacing:.08em;
}
.sidebar-brand-tagline {
  display:block;
  margin-top:.15rem;
  font-size:.7rem;
  opacity:.82;
}
.topbar-school-mini {
  display:flex;
  align-items:center;
  gap:.65rem;
}
.topbar-school-mini > img {
  width:38px;
  height:38px;
  border-radius:50%;
  object-fit:contain;
  background:#fff;
  padding:2px;
  box-shadow:0 2px 10px rgba(15,23,42,.12);
}
.topbar-school-mini > div { min-width:0; }

.dashboard-hero {
  background-image:
    linear-gradient(90deg, rgba(9,50,27,.92) 0%, rgba(9,50,27,.72) 48%, rgba(9,50,27,.30) 100%),
    url('../images/binoongan-campus-bg.png') !important;
  background-size: cover !important;
  background-position: center 62% !important;
}
.dashboard-hero::before,
.dashboard-hero::after { display:none !important; }

.auth-page {
  position:relative;
  background-image:
    linear-gradient(135deg, rgba(9,50,27,.82), rgba(22,101,52,.52)),
    url('../images/binoongan-campus-bg.png') !important;
  background-size:cover !important;
  background-position:center !important;
  isolation:isolate;
}
.auth-page::before {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.14)) !important;
}
.auth-branding .school-login-logo {
  width:92px !important;
  height:92px !important;
  object-fit:contain !important;
  border-radius:50% !important;
  background:#fff !important;
  padding:4px !important;
  box-shadow:0 10px 30px rgba(0,0,0,.20) !important;
}
.auth-school-name {
  margin-top:.35rem;
  color:#14532d;
  font-size:1.25rem;
  font-weight:900;
  letter-spacing:.01em;
}
.auth-security-note {
  border-color:rgba(22,101,52,.14) !important;
}
.school-info-hero {
  position:relative;
  min-height:220px;
  background-image:
    linear-gradient(90deg, rgba(9,50,27,.88), rgba(9,50,27,.52)),
    url('../images/binoongan-campus-bg.png');
  background-size:cover;
  background-position:center 58%;
  color:#fff;
}
.school-info-hero-overlay { position:absolute; inset:0; }
.school-info-logo {
  width:112px;
  height:112px;
  object-fit:contain;
  border-radius:50%;
  background:#fff;
  padding:5px;
  box-shadow:0 12px 30px rgba(0,0,0,.24);
  flex:0 0 auto;
}
.school-info-section-title {
  display:flex;
  align-items:center;
  gap:.85rem;
}

/* Final responsive/readability polish. Keep wide data tables scrollable inside
   their own containers while preventing the page shell from overflowing. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.app-shell,
.app-main,
.app-main > main,
.topbar,
.topbar-inner {
  min-width: 0;
}

.app-main {
  overflow-x: clip;
}

.topbar-inner {
  width: 100%;
}

.topbar-school-meta-block,
.topbar-center,
.topbar-right,
.topbar-user,
.profile-info {
  min-width: 0;
}

.topbar-school-meta-block > span,
.topbar-school-title,
.topbar-school-subtitle,
.topbar-page-title,
.profile-info,
.topbar-profile-title,
.topbar-role-label {
  overflow-wrap: anywhere;
}

.topbar-school-meta-block > span {
  white-space: nowrap;
}

.card,
.modal-content,
.qr-grade-filter-card,
.report-toolbar,
.school-year-switcher {
  max-width: 100%;
}

.report-toolbar,
.toolbar-actions,
.learner-view-actions,
.site-footer-main,
.site-footer-info {
  min-width: 0;
}

.toolbar-actions .btn,
.learner-view-actions .btn {
  min-height: 42px;
}

.table-responsive {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.table-responsive > .table {
  width: max-content;
  max-width: none;
}

.modal-dialog {
  max-width: calc(100vw - 1rem);
}

.form-control,
.form-select,
.input-group,
.input-group > .form-control,
.input-group > .form-select {
  min-width: 0;
}

.site-footer-main {
  width: 100%;
}

.site-footer-info a,
.site-footer-info span {
  overflow-wrap: anywhere;
}

body.theme-dark .page-description,
body.theme-dark .text-muted,
body.theme-dark .form-text {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}

@media (max-width: 991.98px) {
  .app-main > .topbar .topbar-inner {
    flex-wrap: wrap;
  }

  .app-main > .topbar .topbar-left,
  .app-main > .topbar .topbar-right {
    flex: 1 1 48%;
  }

  .app-main > .topbar .topbar-center {
    flex: 0 0 100%;
    order: 3;
  }

  .report-toolbar {
    align-items: stretch;
  }

  .toolbar-search {
    flex-basis: 100%;
  }
}

@media (max-width: 767.98px) {
  main.container-fluid {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }

  .topbar-inner {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }

  .topbar-school-meta-block {
    font-size: .68rem !important;
  }

  .topbar-school-meta-block > span:nth-child(2) {
    display: none;
  }

  .topbar-user {
    width: 100%;
    justify-content: flex-end;
  }

  .profile-info .fw-semibold {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .report-toolbar,
  .toolbar-actions {
    width: 100%;
  }

  .toolbar-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toolbar-actions .btn {
    width: 100%;
    white-space: normal;
  }

  .report-period-nav {
    max-width: 100%;
  }

  .report-period-nav .btn,
  .report-period-label {
    min-width: 0;
  }

  .qr-grade-filter-card .btn-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qr-grade-filter-card .btn-group > .btn {
    width: 100%;
    min-width: 0;
  }

  .site-footer-main {
    align-items: flex-start;
    text-align: left;
    flex-direction: column;
  }

  .site-footer-info {
    width: 100%;
    justify-content: flex-start;
    gap: .45rem .8rem;
  }

  .site-footer-info a,
  .site-footer-info span {
    white-space: normal;
  }

  .modal-dialog {
    margin: .5rem;
  }
}

@media (max-width: 575.98px) {
  .topbar-school-meta-block {
    max-width: 48%;
  }

  .app-main > .topbar .topbar-right {
    flex-basis: 48%;
  }

  .app-main > .topbar .topbar-user {
    justify-content: flex-end;
    padding: .35rem .45rem;
  }

  .app-main > .topbar .topbar-profile-title,
  .app-main > .topbar .topbar-role-label {
    font-size: .62rem;
  }

  .toolbar-actions {
    grid-template-columns: 1fr;
  }

  .report-period-nav {
    gap: .25rem;
  }

  .report-period-nav .btn {
    padding-left: .45rem;
    padding-right: .45rem;
    font-size: .76rem;
  }

  .report-period-label {
    flex: 1 1 auto;
  }

  .qr-grade-filter-card .btn-group {
    grid-template-columns: 1fr;
  }

  .card-body {
    padding: .9rem !important;
  }

  .site-footer-brand {
    align-items: flex-start;
  }

  .site-footer-brand span {
    white-space: normal;
  }
}
.school-info-section-title > span {
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(22,101,52,.10);
  color:#166534;
  font-size:1.15rem;
}
.school-info-note {
  display:flex;
  gap:.65rem;
  align-items:flex-start;
  padding:.9rem 1rem;
  border-radius:14px;
  background:#f0fdf4;
  color:#166534;
  font-size:.9rem;
}
.school-contact-list { display:grid; gap:.7rem; }
.school-contact-item {
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:.85rem 1rem;
  border:1px solid var(--border-color);
  border-radius:14px;
  color:inherit;
  text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.school-contact-item:hover {
  transform:translateX(3px);
  border-color:rgba(22,101,52,.30);
  box-shadow:0 8px 20px rgba(15,23,42,.07);
}
.school-contact-item > i:first-child {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:rgba(22,101,52,.09);
  color:#166534;
}
.school-contact-item small,
.school-contact-item strong { display:block; }
.school-contact-item small { color:var(--text-muted); margin-bottom:.1rem; }
.school-contact-item strong { font-size:.9rem; }

.report-warning-banner {
  border-left:4px solid #d97706 !important;
}
.status-badge-present { background:#dcfce7 !important; color:#166534 !important; }
.status-badge-absent { background:#fee2e2 !important; color:#b91c1c !important; }
.status-badge-late { background:#fef3c7 !important; color:#a16207 !important; }
.status-badge-cutting { background:#ffedd5 !important; color:#c2410c !important; }
.status-badge-neutral { background:#f1f5f9 !important; color:#475569 !important; }
.btn-success { background:#16a34a !important; border-color:#16a34a !important; }
.btn-danger { background:#dc2626 !important; border-color:#dc2626 !important; }
.btn-warning { background:#f59e0b !important; border-color:#f59e0b !important; color:#422006 !important; }
.btn-info { background:#0284c7 !important; border-color:#0284c7 !important; color:#fff !important; }

/* Universal password visibility control. Existing custom toggles are left alone. */
.qr-auto-password-toggle {
  min-width:42px !important;
  border:1px solid var(--border-color) !important;
  border-left:0 !important;
  background:var(--bg-card) !important;
  color:var(--text-muted) !important;
}
.qr-auto-password-toggle:hover,
.qr-auto-password-toggle:focus-visible {
  color:var(--m-primary) !important;
  background:var(--m-primary-soft) !important;
}
@media (max-width: 575.98px) {
  .school-info-logo { width:88px; height:88px; }
  .topbar-school-mini > img { width:32px; height:32px; }
}


/* ===== QRATTEND / Binoongan visual polish - pre-beta ===== */
:root{--qa-school-green:#166534;--qa-school-green-dark:#14532d;--qa-school-green-soft:#ecfdf3;--qa-school-yellow:#facc15;--qa-school-red:#dc2626;--qa-school-blue:#2563eb;}

/* Compact authenticated header with the campus background. */
.topbar{position:relative;min-height:76px!important;padding:.45rem 1.15rem!important;overflow:hidden;background:#0f3d23!important;color:#fff;border-bottom:1px solid rgba(255,255,255,.16)!important;box-shadow:0 4px 18px rgba(15,23,42,.10);}
.topbar-backdrop{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(8,46,25,.94),rgba(15,61,35,.82),rgba(15,61,35,.70)),url('../images/binoongan-campus-bg.png');background-size:cover;background-position:center 56%;opacity:1;}
.topbar-inner{position:relative;z-index:1;width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px;}
.topbar-left,.topbar-right{display:flex;align-items:center;min-width:0;}
.topbar-school-identity{display:flex;align-items:flex-start;gap:.18rem;min-width:0;flex-direction:column;}
.topbar-school-identity>img{width:28px;height:28px;object-fit:contain;border-radius:50%;background:#fff;padding:1px;box-shadow:0 3px 10px rgba(0,0,0,.22);flex:0 0 auto;}
.topbar-school-copy{min-width:0;}
.topbar-school-name{font-size:.86rem;font-weight:900;line-height:1.05;letter-spacing:.01em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-school-meta{display:flex;gap:.65rem;flex-wrap:wrap;color:rgba(255,255,255,.82);font-size:.61rem;margin-top:.18rem;line-height:1.05;}
.topbar-school-meta span{white-space:nowrap}.topbar-school-meta i{margin-right:.18rem;opacity:.9}
.topbar-right{gap:.75rem;justify-content:flex-end;}
.topbar-page-title{font-size:.72rem;color:rgba(255,255,255,.76);font-weight:700;border-right:1px solid rgba(255,255,255,.18);padding-right:.8rem;white-space:nowrap;}
.topbar-user{display:flex;align-items:center;gap:.55rem;}
.topbar .profile-info{background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:11px!important;padding:.32rem .65rem!important;color:#fff!important;}
.topbar .profile-info .fw-semibold{font-size:.76rem!important;color:#fff!important;}
.topbar .profile-info .text-muted{color:rgba(255,255,255,.76)!important;font-size:.64rem!important;}
.topbar .profile-info .badge{font-size:.56rem!important;padding:.2rem .45rem!important;background:rgba(255,255,255,.18)!important;color:#fff!important;}
.topbar .dashboard-clock{min-width:138px!important;padding:.32rem .6rem!important;border-radius:11px!important;background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.16)!important;}
.topbar .dashboard-clock #live-time{font-size:.78rem!important;color:#fff!important;}.topbar .dashboard-clock .text-muted{color:rgba(255,255,255,.76)!important;font-size:.62rem!important;}
.topbar-menu-btn{color:#fff!important;border-color:rgba(255,255,255,.35)!important;background:rgba(255,255,255,.08)!important;}

/* Global footer */
.site-footer{margin-top:auto;background:rgba(5,30,16,.88);color:rgba(255,255,255,.88);font-size:.72rem;border-top:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.site-footer-main{display:flex;justify-content:center;align-items:center;text-align:center;gap:1.25rem;padding:.8rem 1.25rem;max-width:1600px;margin:0 auto;line-height:1.5;}
.site-footer-brand{display:flex;align-items:center;gap:.55rem;min-width:0}.site-footer-brand img{width:34px;height:34px;border-radius:50%;background:#fff;padding:2px;object-fit:contain}.site-footer-brand div{display:flex;flex-direction:column;min-width:0}.site-footer-brand strong{color:#fff;font-size:.76rem}.site-footer-brand span{font-size:.62rem;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.site-footer-info{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:flex-end}.site-footer-info span{white-space:nowrap}.site-footer-info i{color:#86efac;margin-right:.2rem}.site-footer-bottom{border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:1rem;padding:.45rem 1.25rem;max-width:1600px;margin:0 auto;font-size:.61rem;opacity:.72;}

/* Authentication school panel and front portal */
.auth-page-content{width:100%;padding:10px 0;}
.auth-enhanced-layout{width:100%;display:grid;grid-template-columns:minmax(320px,1fr) minmax(420px,620px);gap:22px;align-items:stretch;}
.auth-school-column{min-width:0;display:flex;}.auth-form-column{min-width:0;display:flex;align-items:center;}.auth-form-column>.container{width:100%;padding:0!important;max-width:none!important;}
.auth-school-side{position:relative;width:100%;min-height:560px;border-radius:26px;overflow:hidden;background:#123f25;color:#fff;box-shadow:0 24px 60px rgba(2,20,10,.28);isolation:isolate;}
.auth-school-side:before{content:'';position:absolute;inset:0;background-image:linear-gradient(180deg,rgba(7,48,25,.30),rgba(5,30,16,.92)),url('../images/binoongan-campus-bg.png');background-size:cover;background-position:center;z-index:-2;}
.auth-school-side-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,61,34,.06),rgba(5,33,18,.42));z-index:-1;}
.auth-school-side-content{position:relative;padding:30px;display:flex;flex-direction:column;min-height:560px;}
.auth-school-logo-wrap{width:72px;height:72px;border-radius:50%;background:#fff;padding:4px;box-shadow:0 10px 28px rgba(0,0,0,.24);margin-bottom:18px;}.auth-school-logo-wrap img{width:100%;height:100%;object-fit:contain;border-radius:50%;}
.auth-school-eyebrow{font-size:.62rem;letter-spacing:.12em;font-weight:900;color:#dcfce7;}.auth-school-side h2{font-size:2rem;font-weight:900;line-height:1.06;margin:.35rem 0 .45rem;color:#fff;}.auth-school-location{font-size:.78rem;color:rgba(255,255,255,.84);margin:0 0 18px;}
.auth-school-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}.auth-school-facts>div{padding:10px 11px;border:1px solid rgba(255,255,255,.14);border-radius:13px;background:rgba(0,0,0,.18);backdrop-filter:blur(8px);}.auth-school-facts span{display:block;font-size:.59rem;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.62);}.auth-school-facts strong{display:block;color:#fff;font-size:.72rem;line-height:1.35;margin-top:2px;}
.auth-school-about{padding:13px 14px;border-left:3px solid #86efac;background:rgba(0,0,0,.17);border-radius:0 13px 13px 0;margin-bottom:16px;}.auth-school-about h3{font-size:.8rem;margin:0 0 5px;color:#fff;}.auth-school-about p{font-size:.7rem;line-height:1.55;color:rgba(255,255,255,.78);margin:0;}.auth-school-contact{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;}.auth-school-contact a{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid rgba(255,255,255,.15);border-radius:10px;color:#fff;text-decoration:none;background:rgba(255,255,255,.08);font-size:.64rem;}.auth-school-contact a:hover{background:rgba(255,255,255,.15);color:#fff;}
.auth-front-shell{width:100%;}.auth-front-grid{display:grid;grid-template-columns:minmax(390px,1.05fr) minmax(430px,.95fr);gap:22px;align-items:stretch;}.auth-front-school,.auth-front-portal{border-radius:28px!important;box-shadow:0 24px 65px rgba(2,20,10,.26)!important;}.auth-front-school{position:relative;overflow:hidden;min-height:620px;background:#0d4325;color:#fff;}.auth-front-school-bg{position:absolute;inset:0;background-image:linear-gradient(180deg,rgba(6,53,27,.12),rgba(4,31,17,.93)),url('../images/binoongan-campus-bg.png');background-size:cover;background-position:center;}.auth-front-school-content{position:relative;padding:34px;display:flex;flex-direction:column;height:100%;}.auth-front-logo{width:82px;height:82px;border-radius:50%;background:#fff;padding:5px;box-shadow:0 12px 30px rgba(0,0,0,.26);margin-bottom:18px}.auth-front-logo img{width:100%;height:100%;object-fit:contain;border-radius:50%;}.auth-front-school h1{font-size:2.45rem;line-height:1.02;font-weight:900;margin:.4rem 0 .25rem}.auth-front-school .lead{font-size:.9rem;font-weight:800;color:#dcfce7;margin:0 0 9px}.auth-front-description{max-width:650px;font-size:.76rem;line-height:1.6;color:rgba(255,255,255,.82);margin:0 0 18px}.auth-front-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.auth-front-facts>div{display:flex;align-items:flex-start;gap:8px;padding:10px;border-radius:13px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.14)}.auth-front-facts>div>i{color:#bbf7d0;font-size:.9rem;margin-top:2px}.auth-front-facts small{display:block;color:rgba(255,255,255,.6);font-size:.56rem;text-transform:uppercase;letter-spacing:.06em}.auth-front-facts strong{display:block;font-size:.69rem;line-height:1.35;color:#fff}.auth-front-about{margin-top:14px;padding:13px 14px;border-left:3px solid #facc15;background:rgba(0,0,0,.17);border-radius:0 13px 13px 0}.auth-front-about h2{font-size:.8rem;margin:0 0 5px;color:#fff}.auth-front-about p{font-size:.68rem;line-height:1.55;color:rgba(255,255,255,.78);margin:0}.auth-front-contact{margin-top:auto;display:flex;flex-wrap:wrap;gap:7px;padding-top:18px}.auth-front-contact a{display:inline-flex;align-items:center;gap:6px;color:#fff;text-decoration:none;font-size:.63rem;padding:7px 9px;border-radius:9px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14)}.auth-front-contact a:hover{color:#fff;background:rgba(255,255,255,.16)}
.auth-front-portal{background:rgba(255,255,255,.97)!important;}.auth-front-heading{display:flex;align-items:center;gap:13px;padding-bottom:20px;border-bottom:1px solid #e2e8f0}.auth-front-system-badge{width:50px;height:50px;display:grid;place-items:center;border-radius:15px;background:#ecfdf3;color:#166534;font-size:1.3rem;flex:0 0 auto}.auth-front-heading h2{font-size:1.25rem;font-weight:900;color:#172033;margin:3px 0 2px}.auth-front-heading p{font-size:.72rem;color:#64748b;margin:0}.portal-role-list{display:grid;gap:13px;margin-top:20px}.portal-role-list .role-option{display:grid;grid-template-columns:48px 1fr auto;gap:13px;align-items:center;padding:18px;border-radius:17px;background:#fff;border:1px solid #e2e8f0;box-shadow:none;}.portal-role-list .role-option:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,.08)}.portal-role-list .role-icon{width:48px;height:48px;margin:0;border-radius:13px}.portal-role-list .role-copy h3{font-size:.94rem;margin:0 0 3px;font-weight:900}.portal-role-list .role-copy p{font-size:.69rem;line-height:1.45;min-height:0;margin:0;color:#64748b}.portal-role-list .role-copy ul{font-size:.63rem;line-height:1.7;margin:5px 0 0}.portal-role-list .btn{min-width:145px;white-space:nowrap;font-size:.7rem;padding:.62rem .8rem}.auth-front-help{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:11px 12px;border-radius:13px;background:#f8fafc;border:1px solid #e2e8f0;color:#475569}.auth-front-help>i{color:#166534;font-size:1rem}.auth-front-help strong,.auth-front-help span{display:block}.auth-front-help strong{font-size:.68rem;color:#1e293b}.auth-front-help span{font-size:.62rem;line-height:1.4;margin-top:2px;}

/* Keep the campus photo as the page surface while retaining a readable glass UI. */
.bg-auth {
  background-color: #123f25 !important;
  background-image:
    linear-gradient(135deg, rgba(4, 28, 16, .46), rgba(10, 74, 42, .28)),
    url('../images/binoongan-campus-bg.png') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}
.auth-page {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}
.auth-page-content {
  position: relative;
  z-index: 1;
}
.auth-front-school,
.auth-school-side {
  background: rgba(255, 255, 255, .10) !important;
  border: 1px solid rgba(255, 255, 255, .48) !important;
  box-shadow: 0 24px 65px rgba(2, 20, 10, .34) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
}
.auth-front-school-bg,
.auth-school-side:before {
  display: none !important;
}
.auth-front-portal,
.auth-page .auth-login-card,
.auth-page .auth-secondary-card {
  background: rgba(255, 255, 255, .84) !important;
  border: 1px solid rgba(255, 255, 255, .58) !important;
  box-shadow: 0 24px 65px rgba(2, 20, 10, .34) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
}
.auth-page .auth-login-card,
.auth-page .auth-secondary-card {
  color: #172033;
}
.auth-page .auth-login-card .form-label,
.auth-page .auth-login-card .form-text,
.auth-page .auth-secondary-card .form-label,
.auth-page .auth-secondary-card .form-text {
  color: #24324a !important;
}
.auth-page .auth-login-card .form-control,
.auth-page .auth-secondary-card .form-control,
.auth-page .auth-secondary-card .form-select {
  background: rgba(255, 255, 255, .9) !important;
  border-color: rgba(30, 64, 90, .2) !important;
  color: #172033 !important;
}
.auth-page .auth-login-card .input-group-text {
  background: rgba(236, 253, 243, .94) !important;
  border-color: rgba(30, 64, 90, .2) !important;
  color: #166534 !important;
}
.auth-page .auth-login-card .qr-password-toggle {
  background: rgba(255, 255, 255, .9) !important;
  border-color: rgba(30, 64, 90, .2) !important;
  color: #166534 !important;
}
.auth-page .auth-front-portal .auth-front-heading h2,
.auth-page .auth-front-portal .role-option h3,
.auth-page .auth-front-portal .role-option p,
.auth-page .auth-front-portal .role-option ul {
  color: #172033;
}
.auth-page .auth-front-portal .role-option {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(30, 64, 90, .16);
}
.auth-page .auth-front-portal .auth-kicker,
.auth-page .auth-login-card .auth-kicker,
.auth-page .auth-secondary-card .auth-kicker {
  color: #14532d !important;
}
.auth-page .auth-front-portal .role-option .role-copy p,
.auth-page .auth-front-portal .role-option .role-copy ul {
  color: #334155 !important;
}
.auth-page .auth-front-portal .auth-front-help {
  background: rgba(240, 253, 244, .92);
  border-color: rgba(22, 101, 52, .16);
  color: #334155;
}

/* Final auth layout: one consistent glass treatment for every guest form. */
.auth-page-content {
  min-height: 0;
  padding: 28px 20px !important;
}
.auth-front-shell,
.auth-enhanced-layout {
  width: min(1380px, 100%) !important;
  max-width: 1380px !important;
  margin: 0 auto !important;
}
.auth-front-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(460px, .92fr);
  gap: 24px;
}
.auth-front-school,
.auth-front-portal,
.auth-school-side,
.auth-page .auth-login-card,
.auth-page .auth-secondary-card {
  border-radius: 24px !important;
}
.auth-front-school,
.auth-school-side {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}
.auth-front-school-content,
.auth-school-side-content {
  max-width: 820px;
  margin: 0 auto;
}
.auth-front-school,
.auth-school-side {
  min-height: 620px;
}
.auth-front-school-content,
.auth-school-side-content {
  padding: 34px !important;
}
.auth-front-school h1,
.auth-school-side h2 {
  color: #fff !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .78), 0 4px 20px rgba(0, 0, 0, .42);
}
.auth-front-school .auth-kicker,
.auth-school-side .auth-school-eyebrow,
.auth-front-school .lead,
.auth-school-side .auth-school-location {
  color: #f0fdf4 !important;
}
.auth-front-description,
.auth-front-about p,
.auth-school-about p {
  color: rgba(255, 255, 255, .92) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .72);
}
.auth-front-facts > div,
.auth-school-facts > div,
.auth-front-about,
.auth-school-about {
  background: rgba(4, 28, 16, .5) !important;
  border-color: rgba(255, 255, 255, .24) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}
.auth-front-facts small,
.auth-school-facts span {
  color: rgba(255, 255, 255, .78) !important;
}
.auth-front-contact a,
.auth-school-contact a {
  color: #f0fdf4 !important;
  background: rgba(4, 28, 16, .34) !important;
  border-color: rgba(255, 255, 255, .26) !important;
}
.auth-front-school .auth-front-logo,
.auth-school-side .auth-school-logo-wrap {
  box-shadow: 0 8px 22px rgba(0, 0, 0, .36);
}
.auth-front-portal {
  align-self: stretch;
}
.auth-front-portal > .card-body {
  padding: 34px !important;
}
.portal-role-list .role-option {
  min-width: 0;
  grid-template-columns: 48px minmax(0, 1fr) auto;
}
.portal-role-list .role-copy {
  min-width: 0;
}
.portal-role-list .role-copy h3,
.portal-role-list .role-copy p,
.portal-role-list .role-copy ul {
  overflow-wrap: anywhere;
}
.auth-form-column {
  align-items: center;
}
.auth-form-column > .container {
  padding: 0 !important;
}
.auth-form-column .row {
  margin: 0 !important;
}
.auth-form-column [class*="col-"] {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  padding: 0 !important;
}
.auth-page .auth-login-card,
.auth-page .auth-secondary-card {
  background: rgba(255, 255, 255, .82) !important;
}
.auth-page .auth-login-card .card-body,
.auth-page .auth-secondary-card .card-body {
  padding: 34px 38px 30px !important;
}
.auth-page .auth-form-header,
.auth-page .auth-secondary-card > .card-body > .text-center:first-child {
  margin-bottom: 26px !important;
}
.auth-page .auth-form-header h1,
.auth-page .auth-secondary-card h3 {
  color: #172033 !important;
  line-height: 1.2;
}
.auth-page .auth-form-header p,
.auth-page .auth-secondary-card .text-muted {
  color: #475569 !important;
}
.auth-page .auth-login-form .form-control,
.auth-page .auth-secondary-card .form-control,
.auth-page .auth-secondary-card .form-select {
  min-height: 48px;
  background: rgba(255, 255, 255, .94) !important;
  color: #172033 !important;
}
.auth-page .auth-login-form .input-group-text,
.auth-page .auth-secondary-card .input-group-text {
  min-width: 48px;
  background: rgba(240, 253, 244, .96) !important;
  color: #166534 !important;
}
.auth-page .auth-login-form .form-label,
.auth-page .auth-secondary-card .form-label {
  color: #24324a !important;
}
.auth-page .auth-login-form .form-text,
.auth-page .auth-secondary-card .form-text {
  color: #475569 !important;
}
.auth-page .auth-submit,
.auth-page .auth-secondary-card button[type="submit"] {
  min-height: 50px;
  margin-top: 4px;
}
.auth-page .auth-form-links,
.auth-page .auth-back,
.auth-page .auth-secondary-card .text-center.mt-3 {
  line-height: 1.5;
}
.auth-page .auth-form-links a,
.auth-page .auth-back a,
.auth-page .auth-secondary-card a {
  color: #14532d !important;
}

/* Dashboard scanner CTA must stay readable over the school-photo hero. */
.dashboard-hero .btn-primary{background:#fff!important;border-color:#fff!important;color:#14532d!important;box-shadow:0 8px 20px rgba(0,0,0,.18)!important;font-weight:900!important;}.dashboard-hero .btn-primary:hover,.dashboard-hero .btn-primary:focus{background:#f0fdf4!important;border-color:#f0fdf4!important;color:#14532d!important;transform:translateY(-1px);}.dashboard-hero .btn-primary .bi{color:#166534!important;}

/* Status semantics across the UI. */
.status-dot.status-present,.status-present{color:#166534!important;background:#dcfce7!important;border-color:#86efac!important}.status-dot.status-absent,.status-absent{color:#b91c1c!important;background:#fee2e2!important;border-color:#fecaca!important}.status-dot.status-tardy,.status-tardy{color:#a16207!important;background:#fef3c7!important;border-color:#fde68a!important}.status-dot.status-cutting,.status-cutting{color:#c2410c!important;background:#ffedd5!important;border-color:#fed7aa!important}

@media(max-width:1100px){.auth-enhanced-layout,.auth-front-grid{grid-template-columns:1fr}.auth-school-side{min-height:430px}.auth-school-side-content{min-height:430px}.auth-front-school{min-height:500px}.topbar-page-title{display:none}}
@media(max-width:767.98px){.topbar{min-height:70px!important;padding:.4rem .65rem!important}.topbar-inner{min-height:62px}.topbar-school-identity>img{width:24px;height:24px}.topbar-school-name{font-size:.76rem}.topbar-school-meta{font-size:.52rem;gap:.4rem}.topbar-school-meta span:nth-child(2){display:none}.topbar-user{gap:.35rem}.topbar .dashboard-clock{min-width:105px!important}.topbar .profile-info{padding:.25rem .4rem!important}.topbar .profile-info .fw-semibold{font-size:.65rem!important}.topbar .profile-info .text-muted,.topbar .profile-info .badge{font-size:.52rem!important}.auth-front-school-content,.auth-school-side-content{padding:23px}.auth-front-school h1{font-size:1.85rem}.auth-front-facts,.auth-school-facts{grid-template-columns:1fr}.portal-role-list .role-option{grid-template-columns:42px 1fr}.portal-role-list .btn{grid-column:1/-1;width:100%}.site-footer-main,.site-footer-bottom{flex-direction:column;align-items:flex-start}.site-footer-info{justify-content:flex-start}.site-footer-brand span{white-space:normal}}

.school-info-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.school-info-quick-grid>div{display:flex;gap:10px;align-items:center;padding:12px 13px;border-radius:15px;background:var(--theme-card,#fff);border:1px solid var(--theme-border,#e2e8f0);box-shadow:0 6px 18px rgba(15,23,42,.05)}.school-info-quick-grid i{font-size:1rem;color:#166534}.school-info-quick-grid small{display:block;color:#64748b;font-size:.58rem;text-transform:uppercase;letter-spacing:.06em}.school-info-quick-grid strong{display:block;font-size:.72rem;line-height:1.3}@media(max-width:900px){.school-info-quick-grid{grid-template-columns:1fr 1fr}}@media(max-width:575px){.school-info-quick-grid{grid-template-columns:1fr}}

/* Landing page refresh: keep school information independent from the portal. */
.auth-front-grid { --bs-gutter-y: 1.5rem; }
.auth-glass-card {
  background: rgba(255, 255, 255, .15) !important;
  border: 1px solid rgba(255, 255, 255, .34) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 48px rgba(3, 17, 47, .28) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  overflow: hidden;
}
.auth-school-info { padding: clamp(1.25rem, 3vw, 2rem); color: #fff; display: flex; flex-direction: column; }
.auth-school-info-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.auth-school-info h1 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin: .3rem 0 .2rem; }
.auth-school-info .lead { margin: 0; font-size: .84rem; color: #dcfce7; font-weight: 700; }
.auth-school-info .auth-front-description { max-width: none; }
.auth-front-logo { width: 78px; height: 78px; flex: 0 0 78px; margin: 0; }
.auth-front-logo img { width: 100%; height: 100%; object-fit: contain; }
.auth-front-facts { grid-template-columns: 1fr; }
.auth-front-facts > div { background: rgba(255, 255, 255, .12) !important; border-color: rgba(255, 255, 255, .25) !important; }
.auth-front-about { background: rgba(255, 255, 255, .1) !important; margin-top: 1rem; }
.auth-front-contact { margin-top: auto; }
.auth-front-portal { color: #172033; }
.auth-front-portal > .card-body { padding: clamp(1.25rem, 3vw, 2rem) !important; }
.portal-role-list .role-option {
  background: rgba(255, 255, 255, .15) !important;
  border: 1px solid rgba(255, 255, 255, .48) !important;
  border-radius: 16px !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.portal-role-list .role-admin .role-icon { background: rgba(13, 71, 161, .16); color: #0d47a1; }
.portal-role-list .role-teacher .role-icon { background: rgba(46, 125, 50, .16); color: #2e7d32; }
.btn-admin { background: #0d47a1 !important; border-color: #0d47a1 !important; }
.btn-admin:hover, .btn-admin:focus { background: #08357c !important; border-color: #08357c !important; }
.btn-teacher { background: #2e7d32 !important; border-color: #2e7d32 !important; color: #fff !important; font-weight: 700; }
.btn-teacher:hover, .btn-teacher:focus { background: #1f5d24 !important; border-color: #1f5d24 !important; color: #fff !important; }
.site-footer-info a { color: inherit; text-decoration: none; }
.site-footer-info a:hover { color: #bbf7d0; }

/* Keep the login footer text consistently readable on the dark footer. */
.auth-page .site-footer,
.auth-page .site-footer-brand strong,
.auth-page .site-footer-brand span,
.auth-page .site-footer-info span,
.auth-page .site-footer-info a,
.auth-page .site-footer-info a:link,
.auth-page .site-footer-info a:visited,
.auth-page .site-footer-info a:focus {
  color: #ffffff !important;
  opacity: 1 !important;
}
.auth-page .site-footer-info a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}
@media (max-width: 575.98px) {
  .auth-school-info-header { align-items: flex-start; flex-direction: column; }
  .auth-front-logo { width: 68px; height: 68px; flex-basis: 68px; }
  .auth-front-portal > .card-body { padding: 1.15rem !important; }
}

@media (max-width: 767.98px) {
  .auth-page-content {
    padding: 18px 12px !important;
  }
  .auth-front-portal > .card-body,
  .auth-page .auth-login-card .card-body,
  .auth-page .auth-secondary-card .card-body {
    padding: 26px 22px 24px !important;
  }
  .auth-front-school-content,
  .auth-school-side-content {
    padding: 24px !important;
  }
  .portal-role-list .role-option {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .portal-role-list .btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Final Bootstrap grid alignment for the public portal. */
.auth-front-shell {
  width: 100%;
  max-width: 1320px;
}
.auth-front-grid {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
}
.auth-front-grid > [class*="col-"] {
  min-width: 0;
  display: flex;
}
.auth-front-grid > [class*="col-"] > .auth-glass-card {
  width: 100%;
}
.auth-school-info-header,
.auth-school-info-header > div:last-child,
.auth-front-heading,
.auth-front-heading > div:last-child,
.role-copy {
  min-width: 0;
}
.auth-school-info h1,
.auth-front-heading h2,
.role-copy h3,
.role-copy p,
.role-copy li,
.auth-front-description,
.auth-front-about p {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  overflow-wrap: anywhere;
  word-break: normal;
}
.auth-school-info h1 {
  line-height: 1.15;
}
.auth-front-heading > div:last-child {
  flex: 1 1 auto;
}
.portal-role-list .role-option {
  grid-template-columns: 48px minmax(0, 1fr) auto;
}
.portal-role-list .role-copy p {
  max-width: 100%;
}
@media (max-width: 991.98px) {
  .auth-front-grid > [class*="col-"] {
    display: block;
  }
  .auth-school-info {
    min-height: auto;
  }
}
@media (max-width: 767.98px) {
  .auth-school-info-header {
    flex-direction: row;
    align-items: center;
  }
  .auth-school-info-header > div:last-child {
    flex: 1 1 auto;
  }
  .auth-school-info h1 {
    font-size: 1.55rem;
  }
}
@media (max-width: 480px) {
  .auth-school-info-header {
    align-items: flex-start;
  }
  .auth-front-logo {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
  }
  .auth-school-info h1 {
    font-size: 1.3rem;
  }
}

/* Shared auth template: teacher reset is the visual baseline for every guest page. */
.auth-page {
  padding: 0 !important;
}
.auth-page-content {
  width: 100%;
  padding: 2rem 1rem !important;
}
.auth-enhanced-layout {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1.5rem;
}
.auth-school-column,
.auth-form-column {
  min-width: 0;
  display: flex;
}
.auth-school-column {
  flex: 1 1 420px;
}
.auth-form-column {
  flex: 1 1 460px;
  align-items: center;
  justify-content: center;
}
.auth-form-column > .container {
  width: 100%;
  max-width: 600px;
  padding: 0 !important;
}
.auth-school-side {
  width: 100%;
  min-height: 100%;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .15) !important;
  border: 1px solid rgba(255, 255, 255, .34) !important;
  box-shadow: 0 20px 48px rgba(3, 17, 47, .28) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.auth-school-side:before,
.auth-school-side-overlay {
  display: none !important;
}
.auth-school-side-content {
  min-height: 100% !important;
  padding: clamp(1.25rem, 3vw, 2rem) !important;
}
.auth-school-logo-wrap {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.auth-school-logo-wrap img {
  object-fit: contain;
}
.auth-school-eyebrow,
.auth-school-side h2,
.auth-school-location,
.auth-school-facts,
.auth-school-about,
.auth-school-contact {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}
.auth-school-side h2 {
  line-height: 1.15 !important;
}
.auth-school-facts {
  grid-template-columns: 1fr 1fr;
}
.auth-school-facts > div,
.auth-school-about {
  background: rgba(255, 255, 255, .11) !important;
  border-color: rgba(255, 255, 255, .25) !important;
}
.auth-page .auth-login-card,
.auth-page .auth-secondary-card {
  width: 100%;
  max-width: 560px;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .15) !important;
  border: 1px solid rgba(255, 255, 255, .34) !important;
  box-shadow: 0 20px 48px rgba(3, 17, 47, .28) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.auth-page .auth-login-card .card-body,
.auth-page .auth-secondary-card .card-body {
  padding: clamp(1.25rem, 4vw, 2rem) !important;
}
.auth-form-header,
.auth-page .auth-secondary-card > .card-body > .text-center:first-child {
  text-align: center !important;
}
.auth-form-logo-wrap,
.auth-page .auth-secondary-card .login-brand-logo {
  display: block;
  width: 76px !important;
  height: 76px !important;
  margin: 0 auto 1rem !important;
  object-fit: contain;
}
.auth-page .auth-login-card h1,
.auth-page .auth-secondary-card h3 {
  color: #fff !important;
  font-size: clamp(1.25rem, 3vw, 1.55rem) !important;
  font-weight: 800 !important;
  line-height: 1.2;
}
.auth-page .auth-login-card p,
.auth-page .auth-secondary-card .text-muted {
  color: rgba(255, 255, 255, .82) !important;
}
.auth-page .auth-login-form .form-label,
.auth-page .auth-secondary-card .form-label {
  color: #fff !important;
}
.auth-page .auth-login-form .input-group,
.auth-page .auth-secondary-card .input-group {
  border-radius: 12px !important;
  overflow: hidden;
}
.auth-page .auth-login-form .input-group-text,
.auth-page .auth-secondary-card .input-group-text {
  min-width: 46px;
  justify-content: center;
  color: #14532d !important;
  background: rgba(240, 253, 244, .95) !important;
  border-color: rgba(255, 255, 255, .4) !important;
}
.auth-page .auth-login-form .form-control,
.auth-page .auth-secondary-card .form-control,
.auth-page .auth-secondary-card .form-select {
  min-height: 46px;
  color: #172033 !important;
  background: rgba(255, 255, 255, .95) !important;
  border-color: rgba(255, 255, 255, .4) !important;
}
.auth-page .auth-login-form .form-text,
.auth-page .auth-secondary-card .form-text {
  color: rgba(255, 255, 255, .78) !important;
}
.auth-page .auth-submit,
.auth-page .auth-secondary-card button[type="submit"],
.auth-page .auth-secondary-card .btn-primary,
.auth-page .btn-primary {
  background: #14532d !important;
  border-color: #14532d !important;
  color: #fff !important;
  min-height: 48px;
  border-radius: 12px !important;
  font-weight: 800 !important;
}
.auth-page .auth-submit:hover,
.auth-page .auth-secondary-card button[type="submit"]:hover,
.auth-page .btn-primary:hover {
  background: #0f3d21 !important;
  border-color: #0f3d21 !important;
}
.auth-page .auth-form-links a,
.auth-page .auth-back a,
.auth-page .auth-secondary-card a,
.auth-page .auth-form-links a:link,
.auth-page .auth-form-links a:visited,
.auth-page .auth-form-links a:focus,
.auth-page .auth-back a:link,
.auth-page .auth-back a:visited,
.auth-page .auth-back a:focus,
.auth-page .auth-secondary-card a:link,
.auth-page .auth-secondary-card a:visited,
.auth-page .auth-secondary-card a:focus {
  color: #ffffff !important;
}
.auth-page .auth-secondary-card .qr-password-toggle,
.auth-page .auth-login-card .qr-password-toggle {
  background: rgba(255, 255, 255, .95) !important;
  color: #14532d !important;
}
.auth-front-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-bottom: 0;
  padding-bottom: 1rem;
}
.auth-portal-brand {
  width: 76px;
  height: 76px;
  margin-bottom: .8rem;
}
.auth-portal-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.auth-front-portal .auth-front-heading h2 {
  color: #fff !important;
  font-size: clamp(1.3rem, 3vw, 1.6rem);
}
.auth-front-portal .auth-front-heading p,
.auth-front-portal .auth-kicker {
  color: rgba(255, 255, 255, .82) !important;
}
.auth-front-portal .auth-front-system-badge {
  display: none;
}
.auth-front-portal {
  background: rgba(255, 255, 255, .15) !important;
}
.auth-front-portal .role-option {
  grid-template-columns: 48px minmax(0, 1fr);
  background: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .42) !important;
}
.auth-front-portal .role-option .btn {
  grid-column: 1 / -1;
  width: 100%;
  background: #14532d !important;
  border-color: #14532d !important;
  color: #fff !important;
}
.auth-front-portal .portal-role-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.auth-front-portal .role-option {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: stretch;
}
.auth-front-portal .role-option .role-icon {
  margin-bottom: .35rem;
}
.auth-front-portal .role-option h3,
.auth-front-portal .role-option p,
.auth-front-portal .role-option ul {
  color: #fff !important;
}
.auth-front-portal .auth-front-help {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .28) !important;
  color: #fff !important;
}
.auth-front-portal .auth-front-help strong {
  color: #fff !important;
}
.auth-front-portal .auth-front-help span {
  color: rgba(255, 255, 255, .8) !important;
}
@media (min-width: 992px) {
  .auth-front-shell .auth-front-grid > .col-lg-5,
  .auth-front-shell .auth-front-grid > .col-lg-7 {
    display: flex;
  }
}
@media (max-width: 991.98px) {
  .auth-front-portal .portal-role-list {
    grid-template-columns: 1fr;
  }
  .auth-enhanced-layout {
    gap: 1rem;
  }
  .auth-school-column {
    flex-basis: 100%;
  }
  .auth-form-column {
    flex-basis: 100%;
  }
  .auth-school-side {
    min-height: auto;
  }
}
@media (max-width: 575.98px) {
  .auth-page-content {
    padding: 1rem .75rem !important;
  }
  .auth-school-facts {
    grid-template-columns: 1fr;
  }
  .auth-front-heading h2 {
    font-size: 1.25rem !important;
  }
}

/* Final contrast and two-column landing composition. */
.auth-front-shell {
  max-width: 1400px !important;
}
.auth-front-shell > .auth-front-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  align-items: stretch !important;
}
.auth-front-shell > .auth-front-grid > .col-md-5,
.auth-front-shell > .auth-front-grid > .col-md-7 {
  display: flex !important;
  flex: 0 0 auto;
}
.auth-front-shell > .auth-front-grid > .col-md-5 {
  width: 41.66666667%;
}
.auth-front-shell > .auth-front-grid > .col-md-7 {
  width: 58.33333333%;
}
.auth-front-shell .auth-school-info {
  background: rgba(7, 34, 58, .72) !important;
  border-color: rgba(255, 255, 255, .38) !important;
}
.auth-front-shell .auth-front-portal {
  background: rgba(244, 249, 252, .9) !important;
  border-color: rgba(255, 255, 255, .7) !important;
  color: #12263a !important;
}
.auth-front-shell .auth-front-portal .auth-front-heading h2 {
  color: #102a43 !important;
}
.auth-front-shell .auth-front-portal .auth-front-heading p {
  color: #334e68 !important;
}
.auth-front-shell .auth-front-portal .auth-kicker {
  color: #14532d !important;
}
.auth-front-shell .auth-front-portal .role-option {
  background: rgba(255, 255, 255, .78) !important;
  border-color: rgba(16, 42, 67, .16) !important;
  box-shadow: 0 8px 22px rgba(16, 42, 67, .08);
}
.auth-front-shell .auth-front-portal .role-option h3 {
  color: #102a43 !important;
}
.auth-front-shell .auth-front-portal .role-option p,
.auth-front-shell .auth-front-portal .role-option ul {
  color: #334e68 !important;
}
.auth-front-shell .auth-front-portal .auth-front-help {
  background: rgba(226, 241, 232, .95) !important;
  border-color: rgba(20, 83, 45, .2) !important;
  color: #173b27 !important;
}
.auth-front-shell .auth-front-portal .auth-front-help strong {
  color: #14532d !important;
}
.auth-front-shell .auth-front-portal .auth-front-help span {
  color: #365947 !important;
}
.auth-front-shell .auth-front-portal .role-icon {
  background: #e6f0f8 !important;
  color: #0d47a1 !important;
}
.auth-front-shell .auth-front-portal .role-teacher .role-icon {
  background: #e3f3e7 !important;
  color: #2e7d32 !important;
}
.auth-front-shell .auth-front-portal .btn-admin,
.auth-front-shell .auth-front-portal .btn-teacher {
  color: #fff !important;
}
.auth-front-shell .auth-school-info h1,
.auth-front-shell .auth-school-info .auth-front-description,
.auth-front-shell .auth-school-info .auth-front-about h2,
.auth-front-shell .auth-school-info .auth-front-about p {
  color: #fff !important;
}
.auth-front-shell .auth-school-info .auth-front-facts strong,
.auth-front-shell .auth-school-info .auth-front-contact a {
  color: #f8fffb !important;
}
.auth-front-shell .auth-school-info .auth-front-facts small {
  color: #d4e8dc !important;
}
.auth-page .auth-login-card,
.auth-page .auth-secondary-card {
  background: rgba(13, 48, 38, .78) !important;
  border-color: rgba(255, 255, 255, .38) !important;
}
.auth-page .auth-login-card h1,
.auth-page .auth-secondary-card h3,
.auth-page .auth-login-card .form-label,
.auth-page .auth-secondary-card .form-label {
  color: #fff !important;
}
.auth-page .auth-login-card p,
.auth-page .auth-secondary-card .text-muted,
.auth-page .auth-login-card .form-text,
.auth-page .auth-secondary-card .form-text {
  color: #e3f3e7 !important;
}
.auth-page .auth-login-card .form-control,
.auth-page .auth-secondary-card .form-control,
.auth-page .auth-secondary-card .form-select {
  background: #fff !important;
  color: #102a43 !important;
}
@media (max-width: 767.98px) {
  .auth-front-shell > .auth-front-grid > .col-md-5,
  .auth-front-shell > .auth-front-grid > .col-md-7 {
    width: 100%;
  }
}

/* Primary auth template: fixed school information on the left, forms on the right. */
.auth-page .auth-enhanced-layout {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  max-width: 1280px !important;
}
.auth-page .auth-enhanced-layout > .auth-school-column {
  flex: 0 0 41.66666667% !important;
  width: 41.66666667% !important;
  max-width: 41.66666667% !important;
  padding-right: .75rem;
}
.auth-page .auth-enhanced-layout > .auth-form-column {
  flex: 0 0 58.33333333% !important;
  width: 58.33333333% !important;
  max-width: 58.33333333% !important;
  padding-left: .75rem;
}
.auth-page .auth-school-side {
  background: rgba(7, 34, 58, .72) !important;
  border: 1px solid rgba(255, 255, 255, .38) !important;
  border-radius: 16px !important;
  color: #fff !important;
}
.auth-page .auth-school-side-content {
  width: 100%;
  max-width: none !important;
  writing-mode: horizontal-tb !important;
}
.auth-page .auth-school-side h2,
.auth-page .auth-school-side .auth-school-eyebrow,
.auth-page .auth-school-side .auth-school-location,
.auth-page .auth-school-side .auth-school-facts,
.auth-page .auth-school-side .auth-school-about,
.auth-page .auth-school-side .auth-school-contact {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}
.auth-page .auth-school-side h2 {
  color: #fff !important;
  font-size: clamp(1.45rem, 2.7vw, 2.1rem) !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere;
}
.auth-page .auth-school-side .auth-school-location,
.auth-page .auth-school-side .auth-school-about p {
  color: #eefaf1 !important;
}
.auth-page .auth-school-side .auth-school-facts > div,
.auth-page .auth-school-side .auth-school-about {
  background: rgba(255, 255, 255, .11) !important;
  border-color: rgba(255, 255, 255, .28) !important;
}
.auth-page .auth-school-side .auth-school-facts span {
  color: #d7ecdd !important;
}
.auth-page .auth-school-side .auth-school-facts strong,
.auth-page .auth-school-side .auth-school-contact a,
.auth-page .auth-school-side .auth-school-about h3 {
  color: #fff !important;
}
.auth-page .auth-form-column > .container {
  max-width: 640px !important;
  margin: 0 auto;
}
.auth-page .auth-form-column .row {
  width: 100%;
}
.auth-page .auth-form-column [class*="col-"] {
  max-width: 100% !important;
}
.auth-page .auth-login-card,
.auth-page .auth-secondary-card {
  background: rgba(7, 34, 58, .72) !important;
  border: 1px solid rgba(255, 255, 255, .38) !important;
  border-radius: 16px !important;
  color: #fff !important;
}
.auth-page .auth-login-card h1,
.auth-page .auth-secondary-card h3 {
  color: #fff !important;
}
.auth-page .auth-login-card .auth-kicker,
.auth-page .auth-secondary-card .auth-kicker {
  color: #86efac !important;
}
.auth-page .auth-front-shell > .auth-front-grid {
  flex-wrap: nowrap !important;
}
.auth-page .auth-front-shell > .auth-front-grid > .col-md-5 {
  width: 41.66666667% !important;
}
.auth-page .auth-front-shell > .auth-front-grid > .col-md-7 {
  width: 58.33333333% !important;
}
.auth-page .auth-front-shell > .auth-front-grid > [class*="col-"] {
  display: flex !important;
}
.auth-page .auth-front-shell .auth-school-info,
.auth-page .auth-front-shell .auth-front-portal {
  width: 100%;
}
.auth-page .auth-front-shell .auth-front-heading h2 {
  color: #14532d !important;
}
.auth-page .auth-front-shell .auth-front-heading p {
  color: #334e68 !important;
}
.auth-page .auth-front-shell .auth-front-portal {
  background: rgba(244, 249, 252, .92) !important;
}
.auth-page .auth-front-shell .auth-front-portal .portal-role-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.auth-page .auth-front-shell .auth-front-portal .role-option {
  min-width: 0;
}
@media (max-width: 767.98px) {
  .auth-page .auth-enhanced-layout {
    flex-wrap: wrap !important;
  }
  .auth-page .auth-enhanced-layout > .auth-school-column,
  .auth-page .auth-enhanced-layout > .auth-form-column {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
  }
  .auth-page .auth-form-column {
    margin-top: 1rem;
  }
  .auth-page .auth-front-shell > .auth-front-grid {
    flex-wrap: wrap !important;
  }
  .auth-page .auth-front-shell > .auth-front-grid > .col-md-5,
  .auth-page .auth-front-shell > .auth-front-grid > .col-md-7 {
    width: 100% !important;
  }
  .auth-page .auth-front-shell .auth-front-portal .portal-role-list {
    grid-template-columns: 1fr !important;
  }
}

/* Last cascade layer: one button and text palette for every auth page. */
.auth-page .auth-front-shell .portal-role-list .role-option .btn-admin,
.auth-page .auth-front-shell .portal-role-list .role-option .btn-teacher,
.auth-page .auth-login-card .auth-submit,
.auth-page .auth-secondary-card button[type="submit"],
.auth-page .auth-secondary-card .btn-primary,
.auth-page .btn-primary,
.auth-page .btn-admin,
.auth-page .btn-teacher {
  background: #2e7d32 !important;
  border-color: #2e7d32 !important;
  color: #fff !important;
  text-shadow: none !important;
}
.auth-page .auth-front-shell .portal-role-list .role-option .btn-admin:hover,
.auth-page .auth-front-shell .portal-role-list .role-option .btn-teacher:hover,
.auth-page .auth-login-card .auth-submit:hover,
.auth-page .auth-secondary-card button[type="submit"]:hover,
.auth-page .auth-secondary-card .btn-primary:hover,
.auth-page .btn-primary:hover,
.auth-page .btn-admin:hover,
.auth-page .btn-teacher:hover {
  background: #256628 !important;
  border-color: #256628 !important;
  color: #fff !important;
}
.auth-page .auth-form-links a,
.auth-page .auth-back a,
.auth-page .auth-secondary-card a,
.auth-page .auth-front-contact a {
  color: #f0fdf4 !important;
}
.auth-page .auth-form-links a:hover,
.auth-page .auth-back a:hover,
.auth-page .auth-secondary-card a:hover,
.auth-page .auth-front-contact a:hover {
  color: #fff !important;
}

/* Final Portal Selection theme: dark blue glass with high-contrast content. */
.auth-page .auth-front-shell .auth-front-portal {
  background: rgba(0, 20, 60, .4) !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  border-radius: 16px !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 48px rgba(3, 17, 47, .3) !important;
}
.auth-page .auth-front-shell .auth-front-heading h2 {
  color: #86efac !important;
  font-weight: 800;
}
.auth-page .auth-front-shell .auth-front-heading p,
.auth-page .auth-front-shell .auth-front-heading .auth-kicker {
  color: #f0fdf4 !important;
}
.auth-page .auth-front-shell .portal-role-list .role-option {
  background: rgba(0, 20, 60, .4) !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  border-radius: 16px !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px rgba(3, 17, 47, .2) !important;
}
.auth-page .auth-front-shell .portal-role-list .role-option h3,
.auth-page .auth-front-shell .portal-role-list .role-option p,
.auth-page .auth-front-shell .portal-role-list .role-option ul,
.auth-page .auth-front-shell .portal-role-list .role-option li {
  color: #fff !important;
}
.auth-page .auth-front-shell .portal-role-list .role-option p {
  opacity: .92;
}
.auth-page .auth-front-shell .portal-role-list .role-option li i {
  color: #86efac !important;
}
.auth-page .auth-front-shell .portal-role-list .role-icon {
  background: rgba(255, 255, 255, .15) !important;
  color: #bbf7d0 !important;
  border-color: rgba(255, 255, 255, .2) !important;
}
.auth-page .auth-front-shell .portal-role-list .role-option .btn-admin,
.auth-page .auth-front-shell .portal-role-list .role-option .btn-teacher {
  background: #2e7d32 !important;
  border-color: #2e7d32 !important;
  color: #fff !important;
}
.auth-page .auth-front-shell .auth-front-help {
  background: rgba(0, 20, 60, .4) !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.auth-page .auth-front-shell .auth-front-help > i,
.auth-page .auth-front-shell .auth-front-help strong,
.auth-page .auth-front-shell .auth-front-help span {
  color: #fff !important;
}
@media (min-width: 768px) {
  .auth-page .auth-front-shell .portal-role-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Final auth source of truth: stable white text and responsive Bootstrap layout. */
.auth-page .auth-school-side *,
.auth-page .auth-school-info *,
.auth-page .auth-front-portal *,
.auth-page .auth-login-card *,
.auth-page .auth-secondary-card * {
  opacity: 1 !important;
}
.auth-page .auth-school-side p,
.auth-page .auth-school-side span,
.auth-page .auth-school-side strong,
.auth-page .auth-school-side a,
.auth-page .auth-school-info p,
.auth-page .auth-school-info span,
.auth-page .auth-school-info strong,
.auth-page .auth-school-info a,
.auth-page .auth-front-portal .auth-front-heading p,
.auth-page .auth-front-portal .auth-kicker,
.auth-page .auth-front-portal .role-option h3,
.auth-page .auth-front-portal .role-option p,
.auth-page .auth-front-portal .role-option ul,
.auth-page .auth-front-portal .role-option li,
.auth-page .auth-front-portal .auth-front-help,
.auth-page .auth-front-portal .auth-front-help strong,
.auth-page .auth-front-portal .auth-front-help span,
.auth-page .auth-login-card p,
.auth-page .auth-login-card .form-label,
.auth-page .auth-login-card .form-text,
.auth-page .auth-secondary-card p,
.auth-page .auth-secondary-card .form-label,
.auth-page .auth-secondary-card .form-text,
.auth-page .auth-secondary-card small,
.auth-page .auth-form-links,
.auth-page .auth-form-links a,
.auth-page .auth-back,
.auth-page .auth-back a {
  color: #fff !important;
  opacity: 1 !important;
}
.auth-page .auth-front-portal .auth-front-heading h2,
.auth-page .auth-kicker,
.auth-page .auth-front-portal .role-option li i {
  color: #86efac !important;
  opacity: 1 !important;
}
.auth-page .btn,
.auth-page button[type="submit"],
.auth-page input[type="submit"],
.auth-page .btn-primary,
.auth-page .btn-admin,
.auth-page .btn-teacher,
.auth-page .auth-submit,
.auth-page .portal-role-list .btn {
  background: #2e7d32 !important;
  border-color: #2e7d32 !important;
  color: #fff !important;
  opacity: 1 !important;
  text-shadow: none !important;
  min-height: 48px;
  border-radius: 12px !important;
  font-weight: 800 !important;
}
.auth-page .btn:hover,
.auth-page .btn:focus,
.auth-page .btn:active,
.auth-page button[type="submit"]:hover,
.auth-page button[type="submit"]:focus,
.auth-page button[type="submit"]:active {
  background: #2e7d32 !important;
  border-color: #2e7d32 !important;
  color: #fff !important;
}
.auth-page .auth-login-card .form-control::placeholder,
.auth-page .auth-secondary-card .form-control::placeholder,
.auth-page .auth-secondary-card .form-select::placeholder {
  color: #526b5b !important;
  opacity: 1 !important;
}
.auth-page .auth-login-card .form-control,
.auth-page .auth-secondary-card .form-control,
.auth-page .auth-secondary-card .form-select {
  background: #fff !important;
  color: #102a43 !important;
  opacity: 1 !important;
}
.auth-page .auth-front-shell,
.auth-page .auth-enhanced-layout {
  width: 100% !important;
  max-width: 1400px !important;
  min-width: 0;
  margin-left: auto !important;
  margin-right: auto !important;
}
.auth-page .auth-front-shell .role-copy,
.auth-page .auth-front-shell .role-copy h3,
.auth-page .auth-front-shell .role-copy p,
.auth-page .auth-front-shell .role-copy li,
.auth-page .auth-school-info h1,
.auth-page .auth-school-side h2 {
  overflow-wrap: anywhere;
  word-break: normal;
  writing-mode: horizontal-tb !important;
}
@media (max-width: 767.98px) {
  .auth-page .auth-front-shell > .auth-front-grid,
  .auth-page .auth-enhanced-layout {
    flex-wrap: wrap !important;
  }
  .auth-page .auth-front-shell > .auth-front-grid > .col-md-5,
  .auth-page .auth-front-shell > .auth-front-grid > .col-md-7,
  .auth-page .auth-enhanced-layout > .auth-school-column,
  .auth-page .auth-enhanced-layout > .auth-form-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .auth-page .auth-form-column {
    margin-top: 1rem;
  }
  .auth-page .auth-front-shell .portal-role-list {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .auth-page .auth-front-shell .portal-role-list {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .auth-page .auth-front-shell,
  .auth-page .auth-enhanced-layout {
    max-width: 1140px !important;
  }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .auth-page .auth-front-shell,
  .auth-page .auth-enhanced-layout {
    max-width: 1320px !important;
  }
}
@media (min-width: 1400px) {
  .auth-page .auth-front-shell,
  .auth-page .auth-enhanced-layout {
    max-width: 1360px !important;
  }
}

/* Final application-header override. */
.app-main > .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1035 !important;
  width: 100% !important;
  min-height: 92px !important;
  padding: .7rem 0 !important;
  background: #14532d !important;
  color: #fff !important;
  border: 0 !important;
}
.app-main > .topbar .topbar-backdrop {
  display: none !important;
}
.app-main > .topbar .topbar-inner {
  width: 100% !important;
  min-height: 76px;
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem;
}
.app-main > .topbar .topbar-left,
.app-main > .topbar .topbar-center,
.app-main > .topbar .topbar-right {
  min-width: 0;
}
.app-main > .topbar .topbar-left { flex: 0 0 22%; }
.app-main > .topbar .topbar-center { flex: 1 1 auto; min-width: 260px; }
.app-main > .topbar .topbar-right { flex: 0 0 30%; }
.app-main > .topbar .topbar-school-meta-block {
  color: #fff !important;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}
.app-main > .topbar .topbar-school-icon {
  flex: 0 0 auto;
  color: #fff !important;
  font-size: 1.35rem;
  line-height: 1;
}
.app-main > .topbar .topbar-school-title,
.app-main > .topbar .topbar-school-subtitle,
.app-main > .topbar .topbar-page-title {
  color: #fff !important;
  opacity: 1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-main > .topbar .topbar-school-title { font-size: 1.05rem; font-weight: 900; letter-spacing: .08em; }
.app-main > .topbar .topbar-school-subtitle { font-size: .72rem; font-weight: 700; letter-spacing: .1em; }
.app-main > .topbar .topbar-page-title { margin-top: .2rem; color: #fff !important; font-size: .72rem; font-weight: 800; }
.app-main > .topbar .topbar-user { gap: .15rem; }
.app-main > .topbar .profile-info,
.app-main > .topbar .dashboard-clock {
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
}
.app-main > .topbar .profile-info .fw-semibold,
.app-main > .topbar .topbar-profile-title,
.app-main > .topbar .topbar-role-label,
.app-main > .topbar .dashboard-clock,
.app-main > .topbar .dashboard-clock * {
  color: #fff !important;
  opacity: 1 !important;
}
.app-main > .topbar .profile-info .fw-semibold { font-size: .84rem; white-space: nowrap; }
.app-main > .topbar .topbar-profile-title,
.app-main > .topbar .topbar-role-label,
.app-main > .topbar .dashboard-clock { font-size: .7rem; line-height: 1.35; white-space: nowrap; }
.app-main > .topbar .topbar-role-label { font-weight: 700; }
.app-main > .topbar .dashboard-clock #live-time { font-size: .86rem; font-weight: 800; }
.app-main > .topbar .topbar-menu-btn {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .55) !important;
  background: transparent !important;
}
@media (max-width: 991.98px) {
  .app-main > .topbar .topbar-left { flex-basis: 25%; }
  .app-main > .topbar .topbar-right { flex-basis: 33%; }
  .app-main > .topbar .topbar-school-title { font-size: .9rem; }
}
@media (max-width: 767.98px) {
  .app-main > .topbar { min-height: 0 !important; padding: .65rem 0 !important; }
  .app-main > .topbar .topbar-inner { min-height: 0; flex-wrap: wrap; row-gap: .6rem; }
  .app-main > .topbar .topbar-left,
  .app-main > .topbar .topbar-right { flex: 1 1 48%; }
  .app-main > .topbar .topbar-center { order: 3; flex: 0 0 100%; }
  .app-main > .topbar .topbar-right { justify-content: flex-end; }
  .app-main > .topbar .dashboard-clock { display: none !important; }
  .app-main > .topbar .topbar-school-title { font-size: .9rem; }
  .app-main > .topbar .topbar-school-subtitle,
  .app-main > .topbar .topbar-page-title { font-size: .62rem; }
}
@media (max-width: 575.98px) {
  .app-main > .topbar .topbar-left,
  .app-main > .topbar .topbar-right { flex-basis: 100%; }
  .app-main > .topbar .topbar-right { justify-content: flex-start !important; }
  .app-main > .topbar .topbar-user { width: 100%; justify-content: space-between; }
}

/* Exact final header composition: icon-led school metadata and glass account panel. */
.app-main > .topbar {
  background: rgba(20, 83, 45, .94) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.app-main > .topbar .topbar-school-meta-block {
  gap: .12rem;
}
.app-main > .topbar .topbar-school-meta-block > span {
  display: flex;
  align-items: center;
  min-height: 1.15rem;
}
.app-main > .topbar .topbar-school-meta-block > span > i {
  width: 1.25rem;
  margin-right: .35rem;
  color: #fff !important;
  font-size: .86rem;
  text-align: center;
}
.app-main > .topbar .topbar-user {
  gap: 1rem;
  align-items: stretch !important;
  padding: .55rem .75rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 16px;
  background: rgba(255, 255, 255, .12) !important;
  box-shadow: 0 8px 24px rgba(2, 20, 10, .16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.app-main > .topbar .topbar-user .profile-info {
  justify-content: center;
  text-align: left !important;
}
.app-main > .topbar .topbar-user .dashboard-clock {
  justify-content: center;
  min-width: 150px !important;
  text-align: left !important;
  align-items: flex-start !important;
}
.app-main > .topbar .topbar-user .profile-info,
.app-main > .topbar .topbar-user .dashboard-clock {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.app-main > .topbar .topbar-user .dashboard-clock #live-time {
  font-size: .86rem;
}
@media (max-width: 767.98px) {
  .app-main > .topbar .topbar-user {
    width: 100%;
    gap: .7rem;
    padding: .5rem .65rem;
  }
  .app-main > .topbar .topbar-user .profile-info,
  .app-main > .topbar .topbar-user .dashboard-clock {
    flex: 1 1 50%;
  }
  .app-main > .topbar .topbar-user .dashboard-clock {
    display: flex !important;
    min-width: 0 !important;
  }
  .app-main > .topbar .topbar-right {
    justify-content: stretch !important;
  }
}
@media (max-width: 575.98px) {
  .app-main > .topbar .topbar-user {
    gap: .5rem;
  }
  .app-main > .topbar .topbar-user .profile-info .fw-semibold,
  .app-main > .topbar .topbar-user .dashboard-clock #live-time {
    font-size: .74rem;
  }
  .app-main > .topbar .topbar-user .topbar-profile-title,
  .app-main > .topbar .topbar-user .topbar-role-label,
  .app-main > .topbar .topbar-user .dashboard-clock {
    font-size: .62rem;
  }
}
/* NEW FEATURE — Attendance notes, warning icons, and summary totals */
.attendance-feature-summary{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 2rem;padding:.65rem .9rem;margin-bottom:1rem;border:1px solid #fde68a;border-radius:.75rem;background:#fffbeb;color:#78350f;font-size:.9rem}
.attendance-summary-item{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.attendance-summary-item strong{font-weight:800}
.attendance-summary-excused{color:#374151}.attendance-summary-warning{color:#92400e}
.attendance-no-column{width:58px;min-width:58px;text-align:center!important;vertical-align:middle!important;white-space:nowrap}
.attendance-warning-icon{display:inline-block;margin-left:.2rem;font-size:.82rem;line-height:1;vertical-align:middle;color:#b45309;white-space:nowrap}
.attendance-excuse-note{margin-top:.2rem;color:#6b7280;font-size:.72rem;font-style:italic;line-height:1.2}
.attendance-auto-note{margin-top:.2rem;color:#6b7280;font-size:.68rem;line-height:1.2}
/* NEW FEATURE — Match excuse and warning totals to statistic cards */
.attendance-feature-summary{display:flex;flex-wrap:wrap;gap:1rem;padding:0;margin-bottom:1rem;border:0;background:transparent;color:inherit;font-size:inherit}
.attendance-feature-summary .attendance-summary-card{min-width:0}
.attendance-summary-card{border-top:3px solid transparent!important}
.attendance-summary-excused .text-muted{color:#374151!important}.attendance-summary-excused{border-top-color:#64748b!important}
.attendance-summary-warning .text-muted{color:#92400e!important}.attendance-summary-warning{border-top-color:#d97706!important}
/* NEW FEATURE — Place summary values to the right of their labels */
.report-summary-cards > [class*="col-"] > .card,
.attendance-feature-summary > .col-6 > .card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.35rem 1rem}
.report-summary-cards > [class*="col-"] > .card .h3,
.attendance-feature-summary > .col-6 > .card .h3{margin:0!important;white-space:nowrap}
.report-summary-cards > [class*="col-"] > .card > :last-child{grid-column:1 / -1}
.learners-summary-cards > [class*="col-"] > .card > .card-body{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.learners-summary-cards > [class*="col-"] > .card .h3{margin:0!important;white-space:nowrap}
/* NEW FEATURE — Uniform monthly-style card sizing across all summary groups */
.report-summary-cards > [class*="col-"],
.learners-summary-cards > [class*="col-"]{display:flex;flex:1 1 0;min-width:0;max-width:none}
.report-summary-cards > [class*="col-"] > .card,
.learners-summary-cards > [class*="col-"] > .card{width:100%;min-height:96px}

/* The public school information is intentionally a plain text layout. */
.auth-page .auth-school-info-plain {
  width: 100%;
  min-width: 0;
  align-self: flex-start;
  padding: clamp(.5rem, 2vw, 1.25rem) clamp(.25rem, 1vw, .75rem);
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}
.auth-page .auth-front-grid > .col-md-5 > .auth-school-info-plain,
.auth-page .auth-front-grid > .col-md-5 > .auth-school-info-plain::before,
.auth-page .auth-front-grid > .col-md-5 > .auth-school-info-plain::after,
.auth-page .auth-school-info-plain .auth-school-details,
.auth-page .auth-school-info-plain .auth-school-about,
.auth-page .auth-school-info-plain .auth-school-contact,
.auth-page .auth-school-info-plain .auth-school-contact a {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.auth-page .auth-school-info-plain .auth-kicker {
  display: block;
  margin-bottom: .75rem;
  color: #86efac !important;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.auth-page .auth-school-info-plain h1 {
  margin: 0;
  color: #fff !important;
  font-size: clamp(1.7rem, 3.5vw, 2.35rem);
  line-height: 1.15;
  text-transform: uppercase;
}
.auth-page .auth-school-info-plain .auth-school-location,
.auth-page .auth-school-info-plain .auth-school-portal-name {
  margin: .3rem 0 0;
  color: #eefaf1 !important;
}
.auth-page .auth-school-info-plain .auth-school-portal-name {
  font-weight: 700;
}
.auth-page .auth-school-info-plain .auth-school-details {
  margin-top: 1.5rem;
}
.auth-page .auth-school-side-plain {
  width: 100%;
  min-width: 0;
  align-self: flex-start;
  padding: clamp(.5rem, 2vw, 1.25rem) clamp(.25rem, 1vw, .75rem);
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.auth-page .auth-school-side-plain::before,
.auth-page .auth-school-side-plain::after,
.auth-page .auth-school-side-plain .auth-school-side-overlay {
  display: none !important;
  content: none !important;
}
.auth-page .auth-school-side-plain .auth-school-eyebrow {
  display: block;
  margin-bottom: .75rem;
  color: #86efac !important;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.auth-page .auth-school-side-plain h2 {
  margin: 0;
  color: #fff !important;
  font-size: clamp(1.7rem, 3.5vw, 2.35rem);
  line-height: 1.15;
  text-transform: uppercase;
}
.auth-page .auth-school-side-plain .auth-school-location,
.auth-page .auth-school-side-plain .auth-school-portal-name {
  margin: .3rem 0 0;
  color: #eefaf1 !important;
}
.auth-page .auth-school-side-plain .auth-school-portal-name {
  font-weight: 700;
}
.auth-page .auth-school-side-plain .auth-school-details {
  margin-top: 1.5rem;
}
.auth-page .auth-school-side-plain .auth-school-details p,
.auth-page .auth-school-side-plain .auth-school-about p,
.auth-page .auth-school-side-plain .auth-school-contact a {
  color: #fff !important;
  font-size: .92rem;
  line-height: 1.55;
}
.auth-page .auth-school-side-plain .auth-school-details p {
  margin: 0 0 .45rem;
}
.auth-page .auth-school-side-plain .auth-school-about,
.auth-page .auth-school-side-plain .auth-school-contact {
  margin-top: 1.35rem;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.auth-page .auth-school-side-plain .auth-school-about h3,
.auth-page .auth-school-side-plain .auth-school-contact h3 {
  margin: 0 0 .35rem;
  color: #86efac !important;
  font-size: 1rem;
  font-weight: 800;
}
.auth-page .auth-school-side-plain .auth-school-about p {
  margin: 0;
}
.auth-page .auth-school-side-plain .auth-school-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
}
.auth-page .auth-school-side-plain .auth-school-contact a {
  display: block;
  width: fit-content;
  padding: 0 !important;
  text-decoration: none;
}
.auth-page .auth-school-side-plain .auth-school-contact a:hover,
.auth-page .auth-school-side-plain .auth-school-contact a:focus {
  color: #bbf7d0 !important;
  text-decoration: underline;
}
.auth-page .auth-school-info-plain .auth-school-details p,
.auth-page .auth-school-info-plain .auth-school-about p,
.auth-page .auth-school-info-plain .auth-school-contact a {
  color: #fff !important;
  font-size: .92rem;
  line-height: 1.55;
}
.auth-page .auth-school-info-plain .auth-school-details p {
  margin: 0 0 .45rem;
}
.auth-page .auth-school-info-plain .auth-school-about,
.auth-page .auth-school-info-plain .auth-school-contact {
  margin-top: 1.35rem;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.auth-page .auth-school-info-plain .auth-school-about h2,
.auth-page .auth-school-info-plain .auth-school-contact h2 {
  margin: 0 0 .35rem;
  color: #86efac !important;
  font-size: 1rem;
  font-weight: 800;
}
.auth-page .auth-school-info-plain .auth-school-about p {
  margin: 0;
}
.auth-page .auth-school-info-plain .auth-school-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
}
.auth-page .auth-school-info-plain .auth-school-contact a {
  display: block;
  width: fit-content;
  padding: 0;
  text-decoration: none;
}
.auth-page .auth-school-info-plain .auth-school-contact a:hover,
.auth-page .auth-school-info-plain .auth-school-contact a:focus {
  color: #bbf7d0 !important;
  text-decoration: underline;
}
@media (max-width: 767.98px) {
  .auth-page .auth-school-info-plain {
    padding: .25rem 0;
  }
  .auth-page .auth-school-info-plain .auth-school-details {
    margin-top: 1.25rem;
  }
}

/* Shared school information: deliberately plain text on every public auth screen. */
.auth-page .auth-school-side-plain,
.auth-page .auth-school-side-plain *,
.auth-page .auth-school-side-plain::before,
.auth-page .auth-school-side-plain::after {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.auth-page .auth-school-side-plain {
  display: block !important;
  width: 100% !important;
  max-width: 36rem;
  margin: 0 !important;
  padding: .5rem 0 1.5rem !important;
  color: #fff !important;
  text-align: left !important;
}

.auth-page .auth-school-side-plain .auth-school-eyebrow {
  display: block;
  margin: 0 0 .7rem !important;
  color: #86efac !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  line-height: 1.3 !important;
}

.auth-page .auth-school-side-plain h2 {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(1.55rem, 3vw, 2.15rem) !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  line-height: 1.2 !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.28);
  text-transform: uppercase;
}

.auth-page .auth-school-side-plain .auth-school-location,
.auth-page .auth-school-side-plain .auth-school-portal-name {
  margin: .2rem 0 0 !important;
  color: #fff !important;
  font-size: .98rem !important;
  line-height: 1.45 !important;
}

.auth-page .auth-school-side-plain .auth-school-portal-name {
  font-weight: 600 !important;
}

.auth-page .auth-school-side-plain .auth-school-details {
  display: grid !important;
  gap: .8rem !important;
  margin: 1.7rem 0 0 !important;
}

.auth-page .auth-school-side-plain .auth-school-details p {
  display: flex !important;
  flex-direction: column !important;
  gap: .22rem !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: .93rem !important;
  line-height: 1.45 !important;
}

.auth-page .auth-school-side-plain .auth-school-label {
  display: block !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}

.auth-page .auth-school-side-plain .auth-school-value {
  display: block !important;
  padding-left: 1.45rem !important;
  color: rgba(255,255,255,.92) !important;
  font-weight: 500 !important;
  overflow-wrap: anywhere;
}

.auth-page .auth-school-side-plain .auth-school-about,
.auth-page .auth-school-side-plain .auth-school-contact {
  margin: 1.5rem 0 0 !important;
  padding: 0 !important;
}

.auth-page .auth-school-side-plain .auth-school-about h3,
.auth-page .auth-school-side-plain .auth-school-contact h3 {
  margin: 0 0 .35rem !important;
  color: #bbf7d0 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  line-height: 1.4 !important;
}

.auth-page .auth-school-side-plain .auth-school-about p,
.auth-page .auth-school-side-plain .auth-school-contact a {
  margin: 0 !important;
  color: #fff !important;
  font-size: .93rem !important;
  line-height: 1.55 !important;
}

.auth-page .auth-school-side-plain .auth-school-about p {
  max-width: 34rem;
  color: rgba(255,255,255,.94) !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.2);
}

.auth-page .auth-school-side-plain .auth-school-contact {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: .08rem !important;
}

.auth-page .auth-school-side-plain .auth-school-contact a {
  display: block !important;
  width: auto !important;
  padding: .12rem 0 !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}

.auth-page .auth-school-side-plain .auth-school-contact a span {
  color: rgba(255,255,255,.92) !important;
}

.auth-page .auth-school-side-plain .auth-school-contact a:hover,
.auth-page .auth-school-side-plain .auth-school-contact a:focus {
  color: #bbf7d0 !important;
  text-decoration: underline !important;
}

/* Keep secondary authentication cards readable against their dark surface. */
.auth-page .auth-secondary-card h3,
.auth-page .auth-secondary-card h4 {
  color: #ffffff !important;
  text-shadow: none !important;
}

.auth-page .auth-secondary-card p,
.auth-page .auth-secondary-card small,
.auth-page .auth-secondary-card .text-muted,
.auth-page .auth-secondary-card .form-text {
  color: #e3f3e7 !important;
  opacity: 1 !important;
}

.auth-page .auth-secondary-card .form-label {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.auth-page .auth-secondary-card .form-control,
.auth-page .auth-secondary-card .form-select {
  color: #1f2937 !important;
  background-color: #fff !important;
}

.auth-page .auth-secondary-card .auth-password-help,
.auth-page .auth-secondary-card .compact-help {
  color: #d9eee0 !important;
}

/* Use QRATTEND's single external eye control instead of the browser's
   built-in password reveal icon inside the input. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none !important;
}
.report-summary-cards > [class*="col-"] > .card .h3,
.learners-summary-cards > [class*="col-"] > .card .h3{font-size:1.35rem}
.dashboard-hero .dashboard-scanner-btn,
.dashboard-hero .dashboard-scanner-btn:hover,
.dashboard-hero .dashboard-scanner-btn:focus,
.dashboard-hero .dashboard-scanner-btn:focus-visible,
.dashboard-hero .dashboard-scanner-btn:active {
  min-height: 54px;
  padding: .78rem 1.55rem !important;
  font-size: 1rem;
  font-weight: 800 !important;
  background: #2e7d32 !important;
  border-color: #2e7d32 !important;
  color: #ffffff !important;
}
.dashboard-hero .dashboard-scanner-btn .bi,
.dashboard-hero .dashboard-scanner-btn:hover .bi,
.dashboard-hero .dashboard-scanner-btn:focus .bi,
.dashboard-hero .dashboard-scanner-btn:focus-visible .bi,
.dashboard-hero .dashboard-scanner-btn:active .bi {
  color: #ffffff !important;
}
@media(max-width:767.98px){.report-summary-cards > [class*="col-"],.learners-summary-cards > [class*="col-"]{flex:0 0 50%;max-width:50%}}
/* NEW FEATURE — Learners page follows the Daily summary-before-controls order */
.learners-page-flow{display:flex;flex-direction:column}
.learners-page-flow>#learnersContent{display:contents}
.learners-page-flow>#learnerFilterForm{order:2}
.learners-page-flow>#learnersContent>#learnersStatsRow{order:1}
.learners-page-flow>#learnersContent>#learnersTableCard{order:3}
.learners-summary-cards > [class*="col-"]{display:flex;flex:1 1 0;min-width:0;max-width:none}
.learners-summary-cards > [class*="col-"] > .card{width:100%;min-height:96px}

/* Beta-final targeted readability polish: attendance/report text only. */
.attendance-excuse-note,.attendance-auto-note{font-weight:600;color:#475569!important;text-shadow:none!important}
.attendance-proof-link{display:block;margin-top:.28rem;font-size:.72rem;font-weight:700;color:#166534!important;text-decoration:none}
.attendance-proof-link:hover,.attendance-proof-link:focus{text-decoration:underline;color:#14532d!important}
.attendance-warning-message{grid-column:1 / -1;margin-top:.15rem;font-size:.72rem;line-height:1.35;color:#64748b!important;font-weight:500}
.attendance-warning-message.has-warning{color:#92400e!important;font-weight:700}
.attendance-summary-warning .attendance-warning-message{color:#92400e!important}
.sheet-table td,.sheet-table th{color:#1f2937}
.sheet-table .text-muted{color:#475569!important}
.report-warning-banner{color:#713f12!important}
.report-warning-banner .small{color:#713f12!important}
body.theme-dark .sheet-table td,body.theme-dark .sheet-table th{color:#e5e7eb}
body.theme-dark .sheet-table .text-muted{color:#cbd5e1!important}
body.theme-dark .attendance-excuse-note,body.theme-dark .attendance-auto-note{color:#cbd5e1!important}

/* Authentication messages: keep the page background intact while giving the message its own readable surface. */
.auth-login-card .auth-alert, .auth-page .auth-alert, .auth-page .alert.alert-danger, .auth-page .alert.alert-success, .auth-page .alert.alert-info { background:#fff !important; border:1px solid #dbe3ee !important; box-shadow:0 6px 18px rgba(15,23,42,.06); }
.auth-page .alert.alert-danger { color:#b42318 !important; border-color:#fecaca !important; }
.auth-page .alert.alert-success { color:#166534 !important; border-color:#bbf7d0 !important; }
.auth-page .alert.alert-info { color:#1d4ed8 !important; border-color:#bfdbfe !important; }
.auth-page .alert.alert-danger *, .auth-page .alert.alert-success *, .auth-page .alert.alert-info * { color:inherit !important; }
.attendance-warning-banner { display:flex; align-items:center; gap:10px; padding:12px 15px; border:1px solid #fde68a; border-radius:14px; background:#fffbeb; color:#854d0e; font-weight:700; }
.attendance-warning-banner i { color:#eab308; font-size:1.05rem; }
.attendance-warning-banner span { font-size:.88rem; }