/* ================================================================
   MY SCHOOL APP - Main Stylesheet
   Dark/Light Theme | Collapsible Sidebar | Mobile First
   ================================================================ */

/* ─── CSS Variables ─────────────────────────────────────────── */
:root {
  --primary:       #7C3AED;
  --primary-light: #8B5CF6;
  --primary-dark:  #6D28D9;
  --primary-rgb:   124,58,237;

  --bg-body:       #f1f5f9;
  --bg-card:       #ffffff;
  --bg-sidebar:    #1a1a2e;
  --bg-sidebar-hover: rgba(124,58,237,0.15);
  --bg-sidebar-active: rgba(124,58,237,0.25);
  --bg-navbar:     #ffffff;
  --bg-input:      #ffffff;

  --text-primary:  #1e293b;
  --text-secondary:#64748b;
  --text-muted:    #94a3b8;
  --text-sidebar:  #c8d3e0;
  --text-sidebar-active: #ffffff;

  --border-color:  #e2e8f0;
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.12);

  --sidebar-w:     280px;
  --sidebar-collapsed-w: 72px;
  --navbar-h:      64px;

  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     16px;

  --transition:    0.25s ease;

  /* Status colors */
  --success: #10b981;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --info:    #3b82f6;

  /* Academic year accent (used in header, dashboards, teacher roles) */
  --academic-year-color:       #5b21b6;
  --academic-year-bg:          rgba(124, 58, 237, 0.14);
  --academic-year-border:      rgba(124, 58, 237, 0.38);

  /* Top bar year/term dropdown — distinct from navbar grey and brand purple */
  --navbar-academic-select-bg:     rgba(14, 165, 233, 0.14);
  --navbar-academic-select-border: rgba(14, 165, 233, 0.5);
  --navbar-academic-select-color:  #0e7490;
}

/* ─── Dark Mode ─────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-body:       #0f1117;
  --bg-card:       #1a1d2e;
  --bg-sidebar:    #12131f;
  --bg-navbar:     #1a1d2e;
  --bg-input:      #252842;
  --bg-sidebar-hover: rgba(124,58,237,0.20);

  --text-primary:  #e2e8f0;
  --text-secondary:#c5d0de;
  --text-muted:    #aeb9c9;

  --border-color:  #2d3148;
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.5);

  --academic-year-color:       #c4b5fd;
  --academic-year-bg:          rgba(139, 92, 246, 0.2);
  --academic-year-border:      rgba(167, 139, 250, 0.45);

  --navbar-academic-select-bg:     rgba(56, 189, 248, 0.16);
  --navbar-academic-select-border: rgba(56, 189, 248, 0.55);
  --navbar-academic-select-color:  #7dd3fc;

  /* Keep Bootstrap body utilities / forms aligned with app dark theme (no data-bs-theme). */
  --bs-body-bg: var(--bg-body);
  --bs-body-color: var(--text-primary);
  --bs-secondary-bg: var(--bg-card);
  --bs-tertiary-bg: var(--bg-input);
  --bs-border-color: var(--border-color);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-color: var(--text-muted);
}

/* Dark mode: ensure card headers and muted text are visible */
[data-theme="dark"] .card-header {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .card-header span:not(.badge) {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .card-header .badge.bg-warning,
[data-theme="dark"] .card-header .badge.text-dark,
[data-theme="dark"] .badge.bg-warning.text-dark {
  color: #1e293b !important;
}
[data-theme="dark"] .card-header .badge.bg-success {
  color: #fff !important;
}
[data-theme="dark"] .card-body {
  color: var(--text-primary);
}
[data-theme="dark"] .card-title,
[data-theme="dark"] .card-body .card-title,
[data-theme="dark"] .card-body h1, [data-theme="dark"] .card-body h2, [data-theme="dark"] .card-body h3,
[data-theme="dark"] .card-body h4, [data-theme="dark"] .card-body h5, [data-theme="dark"] .card-body h6,
[data-theme="dark"] .card-body .h1, [data-theme="dark"] .card-body .h2, [data-theme="dark"] .card-body .h3,
[data-theme="dark"] .card-body .h4, [data-theme="dark"] .card-body .h5, [data-theme="dark"] .card-body .h6 {
  color: var(--text-primary) !important;
}
/* Exclude timetable slot/light-panel helpers — pastel cells need dark text, not --text-secondary */
[data-theme="dark"] .card-body .small:not(.text-success):not(.text-danger):not(.text-warning):not(.text-info):not(.tt-slot-text):not(.tt-light-label):not(.tt-light-muted):not(.tt-saved-meta):not(.tt-class-cell):not(.tt-empty-slot):not(.bece-form-hint) {
  color: var(--text-secondary) !important;
}
/* Timetable preview stays light in dark mode (readable pastel lesson cards). */
html[data-theme="dark"] #timetable-preview .card-body,
html[data-theme="dark"] #adminTimetableZoomWrap,
html[data-theme="dark"] #adminTimetableZoomInner {
  background: #f8fafc !important;
}
html[data-theme="dark"] .timetable-grid,
html[data-theme="dark"] .timetable-grid.table {
  --bs-table-bg: #ffffff;
  --bs-table-color: #0f172a;
  --bs-table-border-color: #cbd5e1;
  background: #ffffff !important;
  color: #0f172a !important;
}
html[data-theme="dark"] .timetable-grid thead th,
html[data-theme="dark"] .timetable-grid tbody td {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
html[data-theme="dark"] .timetable-grid thead th {
  background: #e2e8f0 !important;
}
html[data-theme="dark"] #timetable-preview .tt-light-muted,
html[data-theme="dark"] #timetable-preview .card-body .tt-light-muted,
html[data-theme="dark"] .timetable-grid thead th .small,
html[data-theme="dark"] .timetable-grid thead th .text-muted,
html[data-theme="dark"] .timetable-grid thead th .tt-light-muted {
  color: #334155 !important;
}
html[data-theme="dark"] .timetable-grid .tt-day-cell {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}
html[data-theme="dark"] .timetable-grid .tt-class-cell {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
html[data-theme="dark"] .timetable-grid .tt-slot-card .tt-slot-text {
  color: #1e293b !important;
}
html[data-theme="dark"] .timetable-grid .tt-break-card .tt-slot-text {
  color: #854d0e !important;
}
html[data-theme="dark"] .timetable-grid .tt-empty-slot {
  color: #64748b !important;
}
html[data-theme="dark"] .timetable-grid td.table-warning {
  background: #fffbeb !important;
  color: #0f172a !important;
}
[data-theme="dark"] .text-muted,
[data-theme="dark"] .card-body .text-muted,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .stat-change {
  color: var(--text-secondary) !important;
}
/* Dark mode: tables inside cards (including table-responsive outside .card-body) */
[data-theme="dark"] .card-body .table,
[data-theme="dark"] .card-body .table td,
[data-theme="dark"] .card-body .table th,
[data-theme="dark"] .card > .table-responsive .table,
[data-theme="dark"] .card > .table-responsive .table td,
[data-theme="dark"] .card > .table-responsive .table th,
[data-theme="dark"] .card .table-responsive .table,
[data-theme="dark"] .card .table-responsive .table td,
[data-theme="dark"] .card .table-responsive .table th {
  --bs-table-bg: var(--bg-card);
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--border-color);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-hover-bg: rgba(124, 58, 237, 0.12);
  --bs-table-hover-color: var(--text-primary);
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  background-color: var(--bg-card) !important;
}
[data-theme="dark"] .card-body .table td.text-muted,
[data-theme="dark"] .card-body .table th.text-muted,
[data-theme="dark"] .card .table-responsive .table .text-muted,
[data-theme="dark"] .card .table-responsive .table .small.text-muted,
[data-theme="dark"] .card .table-responsive .table td .small,
[data-theme="dark"] .card .table-responsive .table td .text-muted {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .card .table-responsive .table thead th,
[data-theme="dark"] .card-body .table thead th {
  background: var(--bg-body) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .card .badge.bg-light,
[data-theme="dark"] .card .badge.bg-light.text-dark {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .page-subtitle {
  color: var(--text-secondary) !important;
}

/* School admin → Account signups: signup codes readable on dark table rows */
.signup-codes-table code.signup-code-cell {
  color: var(--text-primary, inherit);
  font-weight: 600;
  letter-spacing: 0.04em;
}
[data-theme="dark"] .signup-codes-table code.signup-code-cell {
  color: #e2e8f0;
}

/*
 * Alerts inside cards often use .small; .card-body .small above forces --text-secondary with !important,
 * which is light text on Bootstrap’s light tinted alert backgrounds (e.g. Paystack “active” banner) — unreadable.
 */
[data-theme="dark"] .card-body .alert.alert-success {
  background-color: rgba(16, 185, 129, 0.22) !important;
  border-color: rgba(52, 211, 153, 0.4) !important;
  color: #ecfdf5 !important;
}
[data-theme="dark"] .card-body .alert.alert-success strong {
  color: #ffffff !important;
}
/* Standalone or in-page alerts: never use .text-muted on success — it reads as gray on green */
.alert.alert-success .signup-code-hint {
  color: inherit !important;
  opacity: 0.92;
}
[data-theme="dark"] .alert.alert-success .signup-code-hint {
  color: #d1fae5 !important;
  opacity: 1;
}
.alert.alert-success .text-muted,
.alert.alert-success code,
[data-theme="dark"] .alert.alert-success .text-muted,
[data-theme="dark"] .alert.alert-success code {
  color: inherit !important;
}
.alert.alert-success code {
  background: transparent;
}
[data-theme="dark"] .card-body .alert.alert-warning {
  background-color: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(251, 191, 36, 0.45) !important;
  color: #fef3c7 !important;
}
[data-theme="dark"] .card-body .alert.alert-warning strong {
  color: #fffbeb !important;
}
[data-theme="dark"] .card-body .alert.alert-danger {
  background-color: rgba(239, 68, 68, 0.18) !important;
  border-color: rgba(248, 113, 113, 0.45) !important;
  color: #fee2e2 !important;
}
[data-theme="dark"] .card-body .alert.alert-info {
  background-color: rgba(59, 130, 246, 0.18) !important;
  border-color: rgba(96, 165, 250, 0.45) !important;
  color: #dbeafe !important;
}
[data-theme="dark"] .card-body .alert.alert-secondary {
  background-color: rgba(148, 163, 184, 0.16) !important;
  border-color: rgba(148, 163, 184, 0.4) !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .card-body .alert.alert-secondary strong {
  color: #f8fafc !important;
}

/* Code sample blocks inside muted card bodies: avoid inherited muted text on light/dim wells (e.g. backup restore instructions) */
.card-body.text-muted .restore-code-sample {
  display: block;
  margin-top: 0.25rem;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.85em;
  line-height: 1.45;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-body) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .card-body.text-muted .restore-code-sample {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.card-body.text-muted .restore-code-sample em {
  color: var(--text-secondary);
  font-style: italic;
}
[data-theme="dark"] .card-body.text-muted .restore-code-sample em {
  color: var(--text-muted);
}

/* Subscription page: Pay online / Pay offline pills — inactive tab text visible in dark mode */
[data-theme="dark"] .subscription-pay-tabs .nav-link {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .subscription-pay-tabs .nav-link:hover:not(.active) {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .subscription-pay-tabs .nav-link.active {
  color: #ffffff !important;
  background-color: var(--primary) !important;
}

/* Scrollable modals whose form wraps the body and footer (Bootstrap expects
   .modal-body as a direct child of .modal-content). Without this, overflow:hidden
   clips Save/Cancel below the phone viewport. */
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-content > form > .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal-dialog-scrollable .modal-content > form > .modal-footer {
  flex-shrink: 0;
  background: var(--bg-card, var(--bs-modal-bg, #fff));
  position: relative;
  z-index: 2;
}
@media (max-width: 575.98px) {
  .modal-dialog {
    max-width: calc(100vw - 1rem);
    margin-left: auto;
    margin-right: auto;
  }
  .modal-footer {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .modal-footer > .btn,
  .modal-footer > .d-flex {
    flex: 1 1 auto;
  }
}

/* Offline payment modal: form wraps header/body/footer — restore scrollable body (Bootstrap expects body as direct child of .modal-content) */
#offlinePaymentReportModal.modal .modal-dialog-scrollable .modal-content {
  max-height: min(92vh, calc(100vh - 1.5rem));
  display: flex;
  flex-direction: column;
}
#offlinePaymentReportModal.modal .modal-content > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  max-height: 100%;
}
#offlinePaymentReportModal.modal .modal-body {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.55) rgba(148, 163, 184, 0.15);
}
#offlinePaymentReportModal.modal .modal-body::-webkit-scrollbar {
  width: 10px;
}
#offlinePaymentReportModal.modal .modal-body::-webkit-scrollbar-track {
  background: rgba(148, 163, 184, 0.12);
  border-radius: 6px;
}
#offlinePaymentReportModal.modal .modal-body::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.45);
  border-radius: 6px;
}
#offlinePaymentReportModal.modal .modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(124, 58, 237, 0.65);
}
/* Offline payment modal: class list in 4 columns (body scrolls as a whole) */
.offline-pay-class-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.2rem 0.3rem;
  overflow-x: hidden;
  font-size: 0.72rem;
}
.offline-pay-class-grid .form-check {
  margin-bottom: 0;
  padding-left: 1.1rem;
  min-width: 0;
}
.offline-pay-class-grid .form-check-input {
  margin-top: 0.12rem;
  margin-left: -1.05rem;
}
.offline-pay-class-grid .form-check-label {
  display: block;
  line-height: 1.2;
  word-break: break-word;
}

/* Use app theme tokens instead of Bootstrap .text-body (fixes invisible text in dark mode) */
.fee-payment-emphasis {
  color: var(--text-primary);
}
.fee-payment-history {
  color: var(--text-secondary);
}
.fee-payment-history .fee-payment-detail {
  color: var(--text-secondary);
}

/* Fee installments: muted parent must not swallow balance / badges / weekly info / links */
.fee-payment-history .fee-payment-detail strong.text-warning {
  color: var(--bs-warning-text-emphasis, #997404) !important;
}
.fee-payment-history .fee-payment-detail strong.text-success {
  color: var(--bs-success-text-emphasis, #0a3622) !important;
}
[data-theme="dark"] .fee-payment-history .fee-payment-detail strong.text-warning {
  color: #ffc107 !important;
}
[data-theme="dark"] .fee-payment-history .fee-payment-detail strong.text-success {
  color: #75b798 !important;
}
.fee-payment-history .fee-payment-detail .badge.bg-success,
.fee-pay-history-wrap .badge.bg-success {
  background-color: var(--bs-success, #198754) !important;
  color: #fff !important;
}
.fee-payment-history .fee-payment-detail .badge.bg-secondary,
.fee-pay-history-wrap .badge.bg-secondary {
  background-color: var(--bs-secondary, #6c757d) !important;
  color: #fff !important;
}
[data-theme="dark"] .fee-payment-history .fee-payment-detail .badge.bg-secondary,
[data-theme="dark"] .fee-pay-history-wrap .badge.bg-secondary,
[data-theme="dark"] .card-body .fee-pay-history-table .badge.bg-secondary {
  background-color: #64748b !important;
  color: #f8fafc !important;
}
[data-theme="dark"] .card-body .fee-pay-history-table .badge.bg-success {
  background-color: #198754 !important;
  color: #fff !important;
}
.fee-payment-history .fee-payment-detail .text-info,
.fee-pay-history-wrap .text-info {
  color: var(--bs-info, #0dcaf0) !important;
}
[data-theme="dark"] .fee-payment-history .fee-payment-detail .text-info,
[data-theme="dark"] .fee-pay-history-wrap .text-info {
  color: #6ea8fe !important;
}
.fee-payment-history .fee-payment-detail .link-primary,
.fee-pay-history-wrap .link-primary {
  color: var(--bs-primary, #0d6efd) !important;
}
[data-theme="dark"] .fee-payment-history .fee-payment-detail .link-primary,
[data-theme="dark"] .fee-pay-history-wrap .link-primary {
  color: #6ea8fe !important;
}

/* Per-term-week: distinct type + coloured accent (same palette as Finance quick-pay inject) */
.record-pay-wh-li.record-pay-wh-default {
  font-family: inherit;
  border-left: 3px solid transparent;
  padding-left: 0;
}
.record-pay-wh-li {
  font-size: 12px;
  line-height: 1.4;
}
.record-pay-wh-li.record-pay-wh-1 {
  font-family: Georgia, "Times New Roman", serif;
  border-left: 4px solid #6366f1;
  padding-left: 0.45rem;
}
.record-pay-wh-li.record-pay-wh-2 {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  border-left: 4px solid #0891b2;
  padding-left: 0.45rem;
}
.record-pay-wh-li.record-pay-wh-3 {
  font-family: Cambria, "Liberation Serif", Times, serif;
  border-left: 4px solid #059669;
  padding-left: 0.45rem;
}
.record-pay-wh-li.record-pay-wh-4 {
  font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Geneva, sans-serif;
  border-left: 4px solid #ca8a04;
  padding-left: 0.45rem;
}
.record-pay-wh-li.record-pay-wh-5 {
  font-family: Corbel, "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-left: 4px solid #ea580c;
  padding-left: 0.45rem;
}
.record-pay-wh-li.record-pay-wh-6 {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  border-left: 4px solid #dc2626;
  padding-left: 0.45rem;
}
.record-pay-wh-li.record-pay-wh-7 {
  font-family: "Trebuchet MS", "Gill Sans", Arial, sans-serif;
  border-left: 4px solid #9333ea;
  padding-left: 0.45rem;
}
.record-pay-wh-li.record-pay-wh-8 {
  font-family: Garamond, Baskerville, "Times New Roman", serif;
  border-left: 4px solid #db2777;
  padding-left: 0.45rem;
}
.fee-pay-history-table tbody tr.record-pay-wh-li.record-pay-wh-default > td:first-child {
  box-shadow: none;
  padding-left: inherit;
}
.fee-pay-history-table tbody tr.record-pay-wh-li.record-pay-wh-1 > td:first-child {
  box-shadow: inset 4px 0 0 #6366f1;
  padding-left: 0.65rem !important;
}
.fee-pay-history-table tbody tr.record-pay-wh-li.record-pay-wh-2 > td:first-child {
  box-shadow: inset 4px 0 0 #0891b2;
  padding-left: 0.65rem !important;
}
.fee-pay-history-table tbody tr.record-pay-wh-li.record-pay-wh-3 > td:first-child {
  box-shadow: inset 4px 0 0 #059669;
  padding-left: 0.65rem !important;
}
.fee-pay-history-table tbody tr.record-pay-wh-li.record-pay-wh-4 > td:first-child {
  box-shadow: inset 4px 0 0 #ca8a04;
  padding-left: 0.65rem !important;
}
.fee-pay-history-table tbody tr.record-pay-wh-li.record-pay-wh-5 > td:first-child {
  box-shadow: inset 4px 0 0 #ea580c;
  padding-left: 0.65rem !important;
}
.fee-pay-history-table tbody tr.record-pay-wh-li.record-pay-wh-6 > td:first-child {
  box-shadow: inset 4px 0 0 #dc2626;
  padding-left: 0.65rem !important;
}
.fee-pay-history-table tbody tr.record-pay-wh-li.record-pay-wh-7 > td:first-child {
  box-shadow: inset 4px 0 0 #9333ea;
  padding-left: 0.65rem !important;
}
.fee-pay-history-table tbody tr.record-pay-wh-li.record-pay-wh-8 > td:first-child {
  box-shadow: inset 4px 0 0 #db2777;
  padding-left: 0.65rem !important;
}
/* Bootstrap 5 .text-body does not follow [data-theme="dark"] — keep card content readable */
[data-theme="dark"] .card .text-body {
  color: var(--text-primary) !important;
}

/* Dark mode: list-group items (standalone or in cards) – avoid light muted text on white Bootstrap bg */
[data-theme="dark"] .list-group-item {
  background: var(--bg-card) !important;
  color: var(--text-primary);
  border-color: var(--border-color);
}
[data-theme="dark"] .list-group-item.bg-light {
  background: var(--bg-input) !important;
}
[data-theme="dark"] .list-group-item h5,
[data-theme="dark"] .list-group-item h6,
[data-theme="dark"] .list-group-item .h5,
[data-theme="dark"] .list-group-item .h6 {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .list-group-item .text-muted,
[data-theme="dark"] .list-group-item .small {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .list-group-item:hover {
  background: var(--bg-input) !important;
  color: var(--text-primary);
}

/* Grade Scales page: remarks column visible in dark mode */
.grade-scale-remarks {
  color: var(--text-secondary);
}
[data-theme="dark"] .grade-scale-remarks {
  color: var(--text-primary) !important;
}

/* Student info page: profile details, results table exam/grade/remarks visible in dark mode */
.student-info-name,
.student-info-value {
  color: var(--text-primary);
}
[data-theme="dark"] .student-info-name {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .student-info-label,
[data-theme="dark"] .student-info-icon,
[data-theme="dark"] .student-info-class {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .student-info-value {
  color: var(--text-primary) !important;
}
/* Results table: exam name and remarks visible on both light (white table) and dark backgrounds */
.student-result-exam,
.student-result-remarks {
  color: var(--text-primary);
}
[data-theme="dark"] .student-result-exam,
[data-theme="dark"] .student-result-remarks {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .student-result-grade-badge {
  color: var(--text-primary) !important;
  background: rgba(124, 58, 237, 0.25) !important;
}

/* Dark mode: form labels, checkbox/radio labels, and helper text visible */
[data-theme="dark"] .form-label,
[data-theme="dark"] .form-label.small {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .form-check-label,
[data-theme="dark"] .form-check .form-check-label,
[data-theme="dark"] label.form-check {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .form-text {
  color: var(--text-secondary) !important;
}
/* Parent add-student: intro line — clearer than default muted */
.parent-section-intro {
  color: #475569 !important;
}
[data-theme="dark"] .parent-section-intro {
  color: #cbd5e1 !important;
}
.parent-section-intro a {
  font-weight: 600;
}

.student-parents-toggle {
  cursor: pointer;
}
.student-parents-toggle:hover {
  filter: brightness(0.98);
}
.student-parents-chevron {
  transition: transform 0.2s ease;
}
.student-parents-toggle[aria-expanded="true"] .student-parents-chevron {
  transform: rotate(180deg);
}

html.offline-sync-banner-on .page-content,
html.offline-sync-banner-on .main-content,
body.offline-sync-banner-on .page-content {
  padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
}
#offlineSyncBanner .offline-sync-banner-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
}

.adm-no-cell code {
  font-size: 12px;
}
.adm-no-view-btn {
  min-width: 1.25rem;
  color: var(--primary) !important;
  text-decoration: none !important;
}
.adm-no-view-btn i {
  font-size: 11px;
}
.adm-no-force-compact .adm-no-compact {
  max-width: 6.5rem;
}
.adm-no-force-compact.adm-no-expanded .adm-no-suffix {
  display: none !important;
}
.adm-no-force-compact.adm-no-expanded .adm-no-full-mobile {
  display: inline !important;
  white-space: normal;
  word-break: break-all;
  max-width: 12rem;
}
.adm-no-force-compact.adm-no-expanded {
  max-width: 13rem;
}
.adm-no-td-compact {
  white-space: nowrap;
  width: 1%;
  vertical-align: middle;
}
@media (max-width: 767.98px) {
  .students-roster-table th,
  .students-roster-table td {
    white-space: nowrap;
  }
  .students-roster-table .adm-no-td {
    max-width: 5.5rem;
  }
  .adm-no-cell.adm-no-expanded .adm-no-suffix {
    display: none !important;
  }
  .adm-no-cell.adm-no-expanded .adm-no-full-mobile {
    display: inline !important;
    white-space: normal;
    word-break: break-all;
    max-width: 11rem;
  }
  .adm-no-cell.adm-no-expanded {
    max-width: 12rem;
  }
}
@media print {
  .adm-no-full {
    display: inline !important;
  }
  .adm-no-compact {
    display: none !important;
  }
}

/* Parent add-student: SMS/email callout + field hints — distinct accent (readable on cards) */
.parent-notifications-callout {
  color: #1d4ed8 !important;
  font-weight: 500;
}
.parent-notifications-callout-border {
  border-color: rgba(59, 130, 246, 0.65) !important;
}
[data-theme="dark"] .parent-notifications-callout {
  color: #7dd3fc !important;
}
[data-theme="dark"] .parent-notifications-callout-border {
  border-color: rgba(125, 211, 252, 0.55) !important;
}
[data-theme="dark"] .parent-notifications-callout strong {
  color: #e0f2fe !important;
}
.form-text.parent-contact-hint {
  color: #2563eb !important;
  font-weight: 500;
  font-size: 0.8125rem;
}
[data-theme="dark"] .form-text.parent-contact-hint {
  color: #38bdf8 !important;
}
/* Beat [data-theme="dark"] .card-body .small { color: secondary } for parent add-student notes */
[data-theme="dark"] .card-body .parent-notifications-callout.small {
  color: #7dd3fc !important;
}
[data-theme="dark"] .card-body .parent-notifications-callout.small strong {
  color: #e0f2fe !important;
}
[data-theme="dark"] .card-body .parent-section-intro.small {
  color: #cbd5e1 !important;
}

/* Add Parent: searchable checkbox dropdown for linking students */
.parent-student-picker-menu {
  max-height: min(70vh, 360px);
}
.parent-student-picker-row.is-hidden {
  display: none !important;
}
.parent-student-picker .dropdown-toggle::after {
  margin-left: auto;
}

[data-theme="dark"] #class-checkboxes,
[data-theme="dark"] #classes-block .border.bg-light {
  background: var(--bg-input) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] #class-checkboxes .text-muted {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] #addSubjectClassCheckboxes,
[data-theme="dark"] #addSubjectClassesBlock .border.bg-light {
  background: var(--bg-input) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] #addSubjectClassCheckboxes .text-muted {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] #defaultSubjectClassCheckboxes,
[data-theme="dark"] #defaultSubjectClassesBlock .border.bg-light {
  background: var(--bg-input) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] #defaultSubjectClassCheckboxes .text-muted {
  color: var(--text-secondary) !important;
}

/* Dark mode: placeholder text in inputs must contrast with dark background */
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* Dark mode: modal form fields – placeholders and text visible on dark input background */
[data-theme="dark"] .modal .form-control,
[data-theme="dark"] .modal .form-select,
[data-theme="dark"] .modal input.form-control,
[data-theme="dark"] .modal textarea.form-control {
  color: var(--text-primary) !important;
  background-color: var(--bg-input) !important;
}
[data-theme="dark"] .modal .form-control::placeholder,
[data-theme="dark"] .modal input::placeholder,
[data-theme="dark"] .modal textarea::placeholder {
  color: var(--text-secondary) !important;
  opacity: 1;
}
[data-theme="dark"] .modal .form-label,
[data-theme="dark"] .modal .form-check-label {
  color: var(--text-primary) !important;
}
/* Dark mode: light panels inside modal (e.g. Education levels "Add level" form) */
[data-theme="dark"] .modal .bg-light {
  background: var(--bg-input) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .modal .bg-light .form-label,
[data-theme="dark"] .modal .bg-light .form-label.small {
  color: var(--text-primary) !important;
}
/* Dark mode: modal table – dark background and visible text (Education levels "All levels") */
[data-theme="dark"] .modal .table,
[data-theme="dark"] .modal .table thead,
[data-theme="dark"] .modal .table tbody,
[data-theme="dark"] .modal .table tr,
[data-theme="dark"] .modal .table td,
[data-theme="dark"] .modal .table th {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .modal .table tbody tr:hover td,
[data-theme="dark"] .modal .table tbody tr:hover th {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .modal .table code,
[data-theme="dark"] .modal code {
  color: var(--text-primary) !important;
  background: rgba(124, 58, 237, 0.25) !important;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}
[data-theme="dark"] .modal .modal-title,
[data-theme="dark"] .modal .modal-body h6,
[data-theme="dark"] .modal .card-header,
[data-theme="dark"] .modal .card-header span:not(.badge) {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .modal .card-header .badge.bg-warning,
[data-theme="dark"] .modal .card-header .badge.text-dark {
  color: #1e293b !important;
}
[data-theme="dark"] .modal .modal-content {
  background-color: var(--bg-card);
  border-color: var(--border-color);
}
[data-theme="dark"] .modal .modal-header {
  border-bottom-color: var(--border-color);
}
[data-theme="dark"] .modal .modal-footer {
  border-top-color: var(--border-color);
}

/* First option in selects (e.g. "Select type") visible in dark mode */
[data-theme="dark"] select.form-select option {
  color: var(--text-primary);
  background: var(--bg-card);
}
[data-theme="dark"] select.form-select option:disabled,
[data-theme="dark"] select.form-select option[value=""] {
  color: var(--text-muted);
}

/* Quick tips card: visible in dark mode */
[data-theme="dark"] .quick-tips-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
}
[data-theme="dark"] .quick-tips-card .quick-tips-title {
  color: var(--primary-light) !important;
}
[data-theme="dark"] .quick-tips-card .quick-tips-content,
[data-theme="dark"] .quick-tips-card .quick-tips-content ul,
[data-theme="dark"] .quick-tips-card .quick-tips-content li {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .quick-tips-card .quick-tips-content strong {
  color: var(--text-primary) !important;
}

/* Profile display name – always visible in light and dark mode */
.profile-name {
  color: var(--text-primary);
}

/* User role summary in navbar dropdown – readable in light & dark mode */
.user-role-summary {
  color: var(--text-secondary);
  font-weight: 500;
}
[data-theme="dark"] .user-role-summary {
  color: var(--text-primary) !important;
}

/* User dropdown (My Profile / Settings) - ensure readable text in dark mode */
[data-theme="dark"] .dropdown-menu {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .dropdown-item {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background: var(--bg-body) !important;
  color: var(--primary) !important;
}
[data-theme="dark"] .dropdown-divider {
  border-top-color: var(--border-color) !important;
}

/* ─── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--bg-body);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color var(--transition), color var(--transition);
  /* Safe area for notched devices (e.g. iPhone) when using viewport-fit=cover */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-dark); }

/* ─── Page Loader ────────────────────────────────────────────── */
#page-loader {
  position: fixed;
  inset: 0;
  background: var(--bg-sidebar);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
#page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-spinner { text-align: center; }
.spinner-ring {
  width: 48px; height: 48px;
  border: 4px solid rgba(124,58,237,0.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 12px;
}
.loader-text { color: white; font-size: 14px; font-weight: 600; letter-spacing: 1px; }

/* ─── App Wrapper ────────────────────────────────────────────── */
.app-wrapper {
  display: flex;
  min-height: 100vh;
  min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

/* ─── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  z-index: 1060;
  transition: width var(--transition), transform var(--transition);
  overflow: hidden;
}

.sidebar.collapsed { width: var(--sidebar-collapsed-w); }

/* Preference applied in <head> so collapsed state is correct on first paint (no open/close flash) */
html.sidebar-pref-collapsed .sidebar {
  width: var(--sidebar-collapsed-w);
}
html.sidebar-pref-collapsed .main-content {
  margin-left: var(--sidebar-collapsed-w);
}
html.sidebar-pref-collapsed:not(.sidebar-ready) .sidebar,
html.sidebar-pref-collapsed:not(.sidebar-ready) .main-content {
  transition: none !important;
}

.sidebar-header {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.brand-logo {
  width: 36px; height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.brand-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 16px;
  flex-shrink: 0;
}

.brand-name {
  color: white;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--transition), width var(--transition);
}

a.brand-name {
  text-decoration: none;
  cursor: pointer;
}
a.brand-name:hover {
  text-decoration: underline;
}

.brand-logo-form {
  margin: 0;
  display: flex;
  flex-shrink: 0;
}
.brand-logo-hit {
  margin: 0;
  padding: 0;
  cursor: pointer;
  line-height: 1;
}
label.brand-icon.brand-logo-hit {
  color: #fff;
}
.brand-logo-hit:hover .brand-logo,
.brand-logo-hit:hover.brand-icon {
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 1px;
}

/* Collapsed: icon-only — hide labels completely (opacity/width:0 still leaked truncated text) */
.sidebar.collapsed .brand-name,
.sidebar.collapsed .user-info,
.sidebar.collapsed .sidebar-label,
.sidebar.collapsed .nav-text,
.sidebar.collapsed .sidebar-footer span,
.sidebar.collapsed .nav-submenu-group,
html.sidebar-pref-collapsed .sidebar .brand-name,
html.sidebar-pref-collapsed .sidebar .user-info,
html.sidebar-pref-collapsed .sidebar .sidebar-label,
html.sidebar-pref-collapsed .sidebar .nav-text,
html.sidebar-pref-collapsed .sidebar .sidebar-footer span,
html.sidebar-pref-collapsed .sidebar .nav-submenu-group {
  display: none !important;
}

.sidebar-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: all var(--transition);
  flex-shrink: 0;
}
.sidebar-toggle:hover { background: rgba(255,255,255,0.1); color: white; }

/* Sidebar user */
.sidebar-user {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.user-avatar { position: relative; flex-shrink: 0; }
.user-avatar img, .avatar-initials {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.avatar-initials {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.user-status-dot {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 10px; height: 10px;
  background: var(--success);
  border-radius: 50%;
  border: 2px solid var(--bg-sidebar);
}
.user-info { overflow: hidden; }
.user-name { color: white; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sidebar nav - min-height: 0 allows flex child to shrink so it can scroll */
.sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent; }

.sidebar-label {
  padding: 6px 16px 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
}

.nav-item { list-style: none; }

/* Sidebar only — global .nav-link was breaking Bootstrap .nav-tabs in main content (pale text in light mode) */
.sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  color: var(--text-sidebar);
  border-radius: 8px;
  margin: 1px 8px;
  transition: all var(--transition);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  position: relative;
}
.sidebar .nav-link:hover { background: var(--bg-sidebar-hover); color: white; }
.sidebar .nav-link.active { background: var(--bg-sidebar-active); color: white; }
.sidebar .nav-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%;
  background: var(--primary-light);
  border-radius: 0 3px 3px 0;
}

.nav-icon { width: 20px; text-align: center; font-size: 15px; flex-shrink: 0; }
.nav-text { flex: 1; }
.nav-badge { background: var(--primary); color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; }

/* Collapsed sidebar: icons only */
.sidebar.collapsed .nav-link,
html.sidebar-pref-collapsed .sidebar .nav-link {
  justify-content: center;
  gap: 0;
  padding: 10px;
  margin: 2px 12px;
}
.sidebar.collapsed .nav-submenu .nav-link,
html.sidebar-pref-collapsed .sidebar .nav-submenu .nav-link {
  padding: 8px 10px;
  margin: 1px 12px;
  justify-content: center;
}
.sidebar.collapsed .nav-badge,
html.sidebar-pref-collapsed .sidebar .nav-badge { display: none; }
/* Hide submenu chevrons in collapsed mode — parent row stays clickable to toggle submenus */
.sidebar.collapsed .nav-arrow,
html.sidebar-pref-collapsed .sidebar .nav-arrow { display: none; }

/* Sub-menu */
.nav-submenu { list-style: none; overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
.nav-submenu.open { max-height: 500px; }
.nav-submenu.nav-submenu-tall.open { max-height: 1100px; }
.sidebar .nav-submenu .nav-link {
  font-size: 12.5px;
  padding: 6px 8px 6px 18px;
  margin: 1px 4px;
  gap: 8px;
  white-space: normal;
  line-height: 1.3;
  align-items: flex-start;
  overflow: visible;
}
.sidebar .nav-submenu .nav-icon { margin-top: 1px; width: 16px; font-size: 13px; }
.sidebar .nav-submenu .nav-text {
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}
.sidebar .nav-submenu-group {
  list-style: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  padding: 10px 16px 4px 44px;
  margin: 0;
  pointer-events: none;
}
.sidebar .nav-submenu-group:first-child { padding-top: 4px; }

.nav-arrow { margin-left: auto; font-size: 11px; transition: transform var(--transition); }
.sidebar .nav-link[data-submenu].active .nav-arrow,
.sidebar .nav-link[data-submenu].open-parent .nav-arrow { transform: rotate(90deg); }

/* Sidebar footer */
.sidebar-footer { padding: 10px 14px; border-top: 1px solid rgba(255,255,255,0.06); }
.btn-sidebar-logout {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  color: #f87171;
  border-radius: 8px;
  font-size: 13px; font-weight: 500;
  transition: all var(--transition);
  width: 100%;
}
.btn-sidebar-logout:hover { background: rgba(239,68,68,0.1); color: #ef4444; }
.sidebar.collapsed .btn-sidebar-logout,
html.sidebar-pref-collapsed .sidebar .btn-sidebar-logout { justify-content: center; gap: 0; }

/* Overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1050;
  backdrop-filter: blur(2px);
}
.sidebar-overlay.active { display: block; }

/* Pop-ups must paint above the fixed sidebar (1060) and mobile drawer (1080). */
.modal-backdrop {
  --bs-backdrop-zindex: 10840;
  z-index: 10840;
}
.modal {
  --bs-modal-zindex: 10850;
  z-index: 10850;
}
.swal2-container {
  z-index: 10860 !important;
}
@media (min-width: 992px) {
  body:has(.app-wrapper .sidebar) .modal {
    padding-left: var(--sidebar-w);
  }
  html.sidebar-pref-collapsed body:has(.app-wrapper .sidebar) .modal,
  body:has(.app-wrapper .sidebar.collapsed) .modal {
    padding-left: var(--sidebar-collapsed-w);
  }
}

/* Tighter section label spacing under Bootstrap's mt-2 utility */
.sidebar-label.mt-2 { margin-top: 4px !important; }

/* ─── Main Content ───────────────────────────────────────────── */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-w);
  transition: margin-left var(--transition);
  min-width: 0;
}

.sidebar.collapsed ~ .main-content,
html.sidebar-pref-collapsed .main-content {
  margin-left: var(--sidebar-collapsed-w);
}

/* Bootstrap tabs in main area (e.g. System Settings): explicit theme colors */
.main-content .nav-tabs .nav-link {
  color: var(--text-secondary);
}
.main-content .nav-tabs .nav-link:hover,
.main-content .nav-tabs .nav-link:focus {
  color: var(--primary);
}
.main-content .nav-tabs .nav-link.active {
  color: var(--primary);
  font-weight: 600;
}
[data-theme="dark"] .main-content .nav-tabs {
  border-bottom-color: var(--border-color);
}
[data-theme="dark"] .main-content .nav-tabs .nav-link {
  color: var(--text-secondary);
}
[data-theme="dark"] .main-content .nav-tabs .nav-link:hover,
[data-theme="dark"] .main-content .nav-tabs .nav-link:focus {
  color: #c4b5fd;
  border-color: transparent;
}
[data-theme="dark"] .main-content .nav-tabs .nav-link.active {
  color: #c4b5fd;
  background: var(--bg-card);
  border-color: var(--border-color) var(--border-color) var(--bg-card);
}

/* SweetAlert2 — match app light/dark theme (replaces native “localhost says” alerts) */
.swal2-popup.app-swal-popup,
.swal2-popup {
  background: var(--bg-card, #fff) !important;
  color: var(--text-primary, #0f172a) !important;
  border: 1px solid var(--border-color, #e2e8f0);
}
.swal2-title {
  color: var(--text-primary, #0f172a) !important;
}
.swal2-html-container,
.swal2-html-container.swal2-html-container {
  color: var(--text-secondary, #475569) !important;
}
.swal2-input,
.swal2-select,
.swal2-textarea {
  background: var(--bg-input, #fff) !important;
  color: var(--text-primary, #0f172a) !important;
  border: 1px solid var(--border-color, #e2e8f0) !important;
  box-shadow: none !important;
}
.swal2-input::placeholder,
.swal2-textarea::placeholder {
  color: var(--text-muted, #94a3b8) !important;
  opacity: 1;
}
.swal2-select option {
  /* Native OS dropdown panels are usually light — keep dark text for contrast */
  background: #ffffff !important;
  color: #0f172a !important;
}
[data-theme="dark"] .swal2-popup.app-swal-popup,
[data-theme="dark"] .swal2-popup {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color);
  box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .swal2-title {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .swal2-html-container {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .swal2-input,
[data-theme="dark"] .swal2-select,
[data-theme="dark"] .swal2-textarea {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .swal2-select option {
  background: #ffffff !important;
  color: #0f172a !important;
}
[data-theme="dark"] .swal2-actions .swal2-cancel {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
}

/* Software Developer → System Settings: integration cards + pill nav */
.sa-settings-summary-card .sa-settings-summary-inner {
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  border: 1px solid transparent !important;
}
.sa-settings-summary-card:hover .sa-settings-summary-inner {
  box-shadow: 0 0.35rem 1rem rgba(124, 58, 237, 0.12) !important;
  border-color: rgba(124, 58, 237, 0.25) !important;
}
.sa-settings-summary-card.active .sa-settings-summary-inner {
  border-color: rgba(124, 58, 237, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.35) !important;
}
.sa-settings-summary-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.95rem;
}
.sa-settings-tab-shell {
  background: var(--bg-card, var(--bg-body));
  border: 1px solid var(--border-color) !important;
}
.main-content .sa-settings-nav .nav-link {
  color: var(--text-secondary);
  border-radius: 0.5rem;
  padding: 0.45rem 0.95rem;
  font-size: 0.875rem;
}
.main-content .sa-settings-nav .nav-link:hover {
  color: var(--primary);
  background: rgba(124, 58, 237, 0.08);
}
.main-content .sa-settings-nav .nav-link.active {
  color: #fff;
  background: var(--primary);
  font-weight: 600;
}

/* ─── Top Navbar ─────────────────────────────────────────────── */
.top-navbar {
  height: var(--navbar-h);
  min-height: calc(var(--navbar-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: var(--bg-navbar);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: calc(24px + env(safe-area-inset-left));
  padding-right: calc(24px + env(safe-area-inset-right));
  position: sticky;
  top: 0;
  z-index: 1040;
  overflow: visible;
  box-shadow: var(--shadow-sm);
}

.navbar-left { display: flex; align-items: center; gap: 16px; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.top-navbar .navbar-left .breadcrumb {
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}
.top-navbar .navbar-left .breadcrumb-item.active {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(11rem, 22vw);
}
.navbar-year-term {
  display: flex; align-items: center; justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 12px;
  overflow: visible;
}
.navbar-week-stack {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.term-weeks-nav-btn {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  border-radius: 999px;
  flex-shrink: 0;
}
.term-current-week-nav-badge {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  border-radius: 999px;
  flex-shrink: 0;
  padding: 0.2rem 0.55rem;
}
html[data-theme="dark"] .sa-auto-approve-banner,
[data-theme="dark"] .sa-auto-approve-banner {
  background: rgba(245, 158, 11, 0.16) !important;
  color: var(--text-primary);
}
.term-nav-badge--ended,
.term-nav-badge--pending {
  color: #1e293b !important;
  background-color: #cbd5e1 !important;
}
.term-nav-badge--warning {
  color: #78350f !important;
  background-color: #fde68a !important;
}
html[data-theme="dark"] .term-current-week-nav-badge.text-bg-primary,
[data-theme="dark"] .term-current-week-nav-badge.text-bg-primary {
  background-color: rgba(59, 130, 246, 0.85) !important;
  color: #fff !important;
}
html[data-theme="dark"] .term-nav-badge--ended,
html[data-theme="dark"] .term-nav-badge--pending,
[data-theme="dark"] .term-nav-badge--ended,
[data-theme="dark"] .term-nav-badge--pending {
  background-color: #94a3b8 !important;
  color: #0f172a !important;
}
html[data-theme="dark"] .term-nav-badge--warning,
[data-theme="dark"] .term-nav-badge--warning {
  background-color: #f59e0b !important;
  color: #1e293b !important;
}
html[data-theme="dark"] .term-current-week-nav-badge.text-bg-secondary,
[data-theme="dark"] .term-current-week-nav-badge.text-bg-secondary {
  background-color: #94a3b8 !important;
  color: #0f172a !important;
}
html[data-theme="dark"] .term-current-week-nav-badge.text-bg-warning,
[data-theme="dark"] .term-current-week-nav-badge.text-bg-warning {
  background-color: #f59e0b !important;
  color: #1e293b !important;
}
[data-theme="dark"] .term-weeks-nav-btn.btn-outline-primary {
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.5);
}
/* Term weeks modal — compact width, fits table without wide empty space */
.modal-dialog.term-weeks-modal-dialog {
  max-width: min(380px, calc(100vw - 1.5rem));
}
#termWeeksModal .modal-content {
  border-radius: 10px;
}
.term-weeks-modal-table {
  font-size: 12px;
}
.term-weeks-modal-table th,
.term-weeks-modal-table td {
  padding: 0.35rem 0.45rem;
}
.term-weeks-modal-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary, #64748b);
}

.dashboard-calendar-hint {
  line-height: 1.35;
}
[data-theme="dark"] .dashboard-calendar-hint.text-bg-primary {
  background-color: rgba(124, 58, 237, 0.85) !important;
  color: #fff !important;
}
html[data-theme="dark"] .dashboard-calendar-hint.term-nav-badge--ended,
html[data-theme="dark"] .dashboard-calendar-hint.term-nav-badge--pending,
[data-theme="dark"] .dashboard-calendar-hint.term-nav-badge--ended,
[data-theme="dark"] .dashboard-calendar-hint.term-nav-badge--pending {
  background-color: #94a3b8 !important;
  color: #0f172a !important;
}
html[data-theme="dark"] .dashboard-calendar-hint.term-nav-badge--warning,
[data-theme="dark"] .dashboard-calendar-hint.term-nav-badge--warning {
  background-color: #f59e0b !important;
  color: #1e293b !important;
}
[data-theme="dark"] .dashboard-calendar-hint.text-bg-secondary {
  background-color: #94a3b8 !important;
  color: #0f172a !important;
}
[data-theme="dark"] .dashboard-calendar-hint.text-bg-warning {
  background-color: #f59e0b !important;
  color: #1e293b !important;
}
/* Academic year/term dropdown: desktop cap; mobile uses full row width (see responsive rules) */
.year-term-nav-select.form-select {
  font-size: 12px;
  font-weight: 600;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  max-width: min(300px, 42vw);
  min-width: 0;
  background-color: var(--navbar-academic-select-bg);
  border-color: var(--navbar-academic-select-border);
  color: var(--navbar-academic-select-color);
  border-radius: 999px;
  box-shadow: none;
}
.top-navbar .year-term-nav-select.form-select:focus {
  border-color: var(--navbar-academic-select-border);
  box-shadow: 0 0 0 0.2rem rgba(14, 165, 233, 0.22);
}
[data-theme="dark"] .top-navbar .year-term-nav-select.form-select:focus {
  box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.25);
}

/* Academic year colours in the year/term dropdown (one palette slot per year) */
.year-term-nav-select--y0 { --navbar-academic-select-bg: rgba(14, 165, 233, 0.14); --navbar-academic-select-border: rgba(14, 165, 233, 0.5); --navbar-academic-select-color: #0e7490; }
.year-term-nav-select--y1 { --navbar-academic-select-bg: rgba(16, 185, 129, 0.14); --navbar-academic-select-border: rgba(16, 185, 129, 0.5); --navbar-academic-select-color: #047857; }
.year-term-nav-select--y2 { --navbar-academic-select-bg: rgba(245, 158, 11, 0.16); --navbar-academic-select-border: rgba(245, 158, 11, 0.55); --navbar-academic-select-color: #b45309; }
.year-term-nav-select--y3 { --navbar-academic-select-bg: rgba(124, 58, 237, 0.14); --navbar-academic-select-border: rgba(124, 58, 237, 0.5); --navbar-academic-select-color: #6d28d9; }
.year-term-nav-select--y4 { --navbar-academic-select-bg: rgba(236, 72, 153, 0.14); --navbar-academic-select-border: rgba(236, 72, 153, 0.5); --navbar-academic-select-color: #be185d; }
.year-term-nav-select--y5 { --navbar-academic-select-bg: rgba(99, 102, 241, 0.14); --navbar-academic-select-border: rgba(99, 102, 241, 0.5); --navbar-academic-select-color: #4338ca; }
[data-theme="dark"] .year-term-nav-select--y0 { --navbar-academic-select-bg: rgba(56, 189, 248, 0.18); --navbar-academic-select-border: rgba(56, 189, 248, 0.55); --navbar-academic-select-color: #7dd3fc; }
[data-theme="dark"] .year-term-nav-select--y1 { --navbar-academic-select-bg: rgba(52, 211, 153, 0.18); --navbar-academic-select-border: rgba(52, 211, 153, 0.55); --navbar-academic-select-color: #6ee7b7; }
[data-theme="dark"] .year-term-nav-select--y2 { --navbar-academic-select-bg: rgba(251, 191, 36, 0.2); --navbar-academic-select-border: rgba(251, 191, 36, 0.55); --navbar-academic-select-color: #fcd34d; }
[data-theme="dark"] .year-term-nav-select--y3 { --navbar-academic-select-bg: rgba(167, 139, 250, 0.2); --navbar-academic-select-border: rgba(167, 139, 250, 0.55); --navbar-academic-select-color: #c4b5fd; }
[data-theme="dark"] .year-term-nav-select--y4 { --navbar-academic-select-bg: rgba(244, 114, 182, 0.2); --navbar-academic-select-border: rgba(244, 114, 182, 0.55); --navbar-academic-select-color: #f9a8d4; }
[data-theme="dark"] .year-term-nav-select--y5 { --navbar-academic-select-bg: rgba(129, 140, 248, 0.2); --navbar-academic-select-border: rgba(129, 140, 248, 0.55); --navbar-academic-select-color: #a5b4fc; }

.year-term-nav-select option.portal-academic-year-color-0 { background-color: #e0f2fe; color: #0c4a6e; }
.year-term-nav-select option.portal-academic-year-color-1 { background-color: #d1fae5; color: #064e3b; }
.year-term-nav-select option.portal-academic-year-color-2 { background-color: #fef3c7; color: #78350f; }
.year-term-nav-select option.portal-academic-year-color-3 { background-color: #ede9fe; color: #4c1d95; }
.year-term-nav-select option.portal-academic-year-color-4 { background-color: #fce7f3; color: #831843; }
.year-term-nav-select option.portal-academic-year-color-5 { background-color: #e0e7ff; color: #312e81; }
[data-theme="dark"] .year-term-nav-select option.portal-academic-year-color-0 { background-color: #0c4a6e; color: #e0f2fe; }
[data-theme="dark"] .year-term-nav-select option.portal-academic-year-color-1 { background-color: #064e3b; color: #d1fae5; }
[data-theme="dark"] .year-term-nav-select option.portal-academic-year-color-2 { background-color: #78350f; color: #fef3c7; }
[data-theme="dark"] .year-term-nav-select option.portal-academic-year-color-3 { background-color: #4c1d95; color: #ede9fe; }
[data-theme="dark"] .year-term-nav-select option.portal-academic-year-color-4 { background-color: #831843; color: #fce7f3; }
[data-theme="dark"] .year-term-nav-select option.portal-academic-year-color-5 { background-color: #312e81; color: #e0e7ff; }

/* Optgroup year headers (supported in Chromium / Safari) */
.year-term-nav-select optgroup.portal-academic-year-optgroup--0 { background: #bae6fd; color: #0c4a6e; font-weight: 700; }
.year-term-nav-select optgroup.portal-academic-year-optgroup--1 { background: #a7f3d0; color: #064e3b; font-weight: 700; }
.year-term-nav-select optgroup.portal-academic-year-optgroup--2 { background: #fde68a; color: #78350f; font-weight: 700; }
.year-term-nav-select optgroup.portal-academic-year-optgroup--3 { background: #ddd6fe; color: #4c1d95; font-weight: 700; }
.year-term-nav-select optgroup.portal-academic-year-optgroup--4 { background: #fbcfe8; color: #831843; font-weight: 700; }
.year-term-nav-select optgroup.portal-academic-year-optgroup--5 { background: #c7d2fe; color: #312e81; font-weight: 700; }

.navbar-academic-picker {
  position: relative;
  min-width: 0;
  max-width: min(300px, 42vw);
}
.navbar-academic-picker > summary,
.navbar-academic-year > summary {
  list-style: none;
  cursor: pointer;
}
.navbar-academic-picker > summary::-webkit-details-marker,
.navbar-academic-year > summary::-webkit-details-marker {
  display: none;
}
.navbar-academic-context-form {
  position: relative;
  min-width: 0;
}
.year-term-nav-control {
  position: relative;
  min-width: 0;
}
.year-term-nav-face {
  display: none;
}
.navbar-academic-picker .year-term-nav-toggle {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: none;
  text-align: left;
  cursor: pointer;
  appearance: none;
  background-image: none !important;
  padding-right: 1.75rem;
}
.navbar-academic-toggle-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}
.navbar-academic-picker .year-term-nav-toggle::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
  font-size: 10px;
  position: absolute;
  right: 0.7rem;
  opacity: 0.75;
  pointer-events: none;
}
.navbar-academic-picker.is-open .year-term-nav-toggle::after,
.navbar-academic-picker[open] .year-term-nav-toggle::after {
  content: "\f077";
}
.navbar-academic-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 220px;
  z-index: 1080;
  max-height: min(70vh, 420px);
  overflow-y: auto;
  border-radius: 12px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: var(--bg-card, #fff);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  padding: 6px;
}
[data-theme="dark"] .navbar-academic-menu {
  background: #1e2235;
  border-color: #2d3148;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.navbar-academic-year {
  border-radius: 8px;
  margin-bottom: 4px;
  overflow: hidden;
}
.navbar-academic-year-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  text-align: left;
}
.navbar-academic-year-chevron {
  font-size: 10px;
  transition: transform 0.15s ease;
  opacity: 0.8;
}
.navbar-academic-year.is-open .navbar-academic-year-chevron,
.navbar-academic-year[open] .navbar-academic-year-chevron {
  transform: rotate(180deg);
}
.navbar-academic-term-empty {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.7;
  padding: 0.4rem 0.85rem;
}
.navbar-academic-year.portal-academic-year-optgroup--0 .navbar-academic-year-toggle { background: #bae6fd; color: #0c4a6e; }
.navbar-academic-year.portal-academic-year-optgroup--1 .navbar-academic-year-toggle { background: #a7f3d0; color: #064e3b; }
.navbar-academic-year.portal-academic-year-optgroup--2 .navbar-academic-year-toggle { background: #fde68a; color: #78350f; }
.navbar-academic-year.portal-academic-year-optgroup--3 .navbar-academic-year-toggle { background: #ddd6fe; color: #4c1d95; }
.navbar-academic-year.portal-academic-year-optgroup--4 .navbar-academic-year-toggle { background: #fbcfe8; color: #831843; }
.navbar-academic-year.portal-academic-year-optgroup--5 .navbar-academic-year-toggle { background: #c7d2fe; color: #312e81; }
[data-theme="dark"] .navbar-academic-year.portal-academic-year-optgroup--0 .navbar-academic-year-toggle { background: #0c4a6e; color: #e0f2fe; }
[data-theme="dark"] .navbar-academic-year.portal-academic-year-optgroup--1 .navbar-academic-year-toggle { background: #064e3b; color: #d1fae5; }
[data-theme="dark"] .navbar-academic-year.portal-academic-year-optgroup--2 .navbar-academic-year-toggle { background: #78350f; color: #fde68a; }
[data-theme="dark"] .navbar-academic-year.portal-academic-year-optgroup--3 .navbar-academic-year-toggle { background: #4c1d95; color: #ede9fe; }
[data-theme="dark"] .navbar-academic-year.portal-academic-year-optgroup--4 .navbar-academic-year-toggle { background: #831843; color: #fce7f3; }
[data-theme="dark"] .navbar-academic-year.portal-academic-year-optgroup--5 .navbar-academic-year-toggle { background: #312e81; color: #e0e7ff; }
.navbar-academic-terms {
  display: flex;
  flex-direction: column;
  padding: 4px 0 6px;
}
.navbar-academic-term {
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  color: var(--text-primary, #1e293b);
  cursor: pointer;
  border-radius: 6px;
  margin: 0 4px;
}
.navbar-academic-term:hover {
  background: rgba(37, 99, 235, 0.08);
}
.navbar-academic-term.is-selected {
  background: rgba(37, 99, 235, 0.16);
  color: #1d4ed8;
}
[data-theme="dark"] .navbar-academic-term {
  color: #e2e8f0;
}
[data-theme="dark"] .navbar-academic-term:hover {
  background: rgba(96, 165, 250, 0.16);
}
[data-theme="dark"] .navbar-academic-term.is-selected {
  background: rgba(59, 130, 246, 0.28);
  color: #93c5fd;
}

/* Academic settings cog next to year/term selector — distinct from cyan pill & grey chrome */
a.year-term-settings-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  color: #059669;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.4);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
a.year-term-settings-link:hover {
  color: #047857;
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(5, 150, 105, 0.55);
}
a.year-term-settings-link:focus-visible {
  outline: 2px solid rgba(16, 185, 129, 0.65);
  outline-offset: 2px;
}
[data-theme="dark"] a.year-term-settings-link {
  color: #34d399;
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(52, 211, 153, 0.45);
}
[data-theme="dark"] a.year-term-settings-link:hover {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.26);
  border-color: rgba(110, 231, 183, 0.55);
}
.year-term-badge {
  font-size: 0.875rem;
  color: var(--text-primary);
  white-space: nowrap;
}
.year-term-badge-sep {
  display: inline;
}
/* School admin: whole year | term block links to academic settings (replaces separate Edit control) */
a.year-term-badge.year-term-badge--link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: 8px;
  padding: 4px 8px;
  margin: -4px -8px;
  transition: background 0.15s ease;
}
a.year-term-badge.year-term-badge--link:hover {
  background: rgba(124, 58, 237, 0.12);
}
a.year-term-badge.year-term-badge--link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* Academic year / term in top bar: year uses brand violet; term stays body color */
.academic-year-label {
  color: var(--academic-year-color);
  font-weight: 600;
}
.academic-term-label {
  color: var(--text-primary);
  font-weight: 600;
}
/* Inline text and Bootstrap badges for academic year name (any page) */
.academic-year-text {
  color: var(--academic-year-color);
  font-weight: 600;
}
.badge.academic-year-badge {
  background: var(--academic-year-bg) !important;
  color: var(--academic-year-color) !important;
  border: 1px solid var(--academic-year-border);
  font-weight: 600;
}
.portal-period-banner {
  overflow: visible;
}
.portal-period-banner-text {
  display: block;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portal-period-banner-text strong {
  white-space: nowrap;
  font-size: inherit;
}
@media (max-width: 575.98px) {
  .portal-period-banner-text {
    white-space: normal;
    font-size: 0.7rem;
  }
}
[data-theme="dark"] .portal-period-banner.alert-light {
  background-color: rgba(56, 189, 248, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .portal-period-banner .portal-period-banner-text {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .portal-period-banner .portal-period-banner-text strong {
  color: #7dd3fc !important;
}
.year-term-prompt {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning, #f59e0b);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.year-term-prompt:hover {
  background: rgba(245, 158, 11, 0.25);
  color: var(--warning, #f59e0b);
}
.navbar-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-shrink: 0; overflow: visible; }

.student-name-case-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.student-name-case-toggle-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary, #64748b);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.student-name-case-toggle .btn-group .btn {
  font-size: 11px;
  font-weight: 650;
  padding: 0.2rem 0.55rem;
}
input[data-name-case="upper"] {
  text-transform: uppercase;
}
.students-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
}
.students-list-toolbar-title {
  font-weight: 650;
}
.students-list-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--text-secondary);
  border-radius: 2px;
  transition: all var(--transition);
}

.navbar-right .search-box {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 148px;
  padding: 5px 10px;
  gap: 6px;
}
.search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 6px 14px;
  color: var(--text-secondary);
}
.search-box input {
  border: none; background: none; outline: none;
  font-size: 12px; color: var(--text-primary);
  width: 100%;
  min-width: 0;
}
.search-box input::placeholder { color: var(--text-muted); }

/* Panel is moved to document.body in JS; .global-search-visible shows it */
.global-search-results {
  display: none !important;
  position: fixed;
  left: 0;
  top: 0;
  width: min(360px, 92vw);
  max-height: min(320px, 50vh);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10050;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}
.global-search-results.global-search-visible {
  display: block !important;
}
.global-search-item {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
  line-height: 1.35;
}
.global-search-item:last-of-type { border-bottom: none; }
.global-search-item:hover { background: var(--bg-body); }
.global-search-view-all {
  display: block;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--primary);
  text-decoration: none;
}
.global-search-view-all:hover { background: rgba(124, 58, 237, 0.08); color: var(--primary); }

.icon-btn {
  width: 38px; height: 38px;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  overflow: visible;
}
.icon-btn:hover { background: var(--bg-body); color: var(--primary); border-color: var(--primary); }

.notif-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  padding: 0 4px;
  z-index: 2;
  background-color: var(--danger) !important;
  color: #fff !important;
  border: 2px solid var(--bg-navbar);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.user-btn {
  display: flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer;
  padding: 4px 8px 4px 4px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  transition: all var(--transition);
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
  flex-shrink: 0;
  max-width: none;
}
.user-btn-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(11rem, 18vw);
}
.user-btn:hover { border-color: var(--primary); }
.user-btn-avatar, .user-btn-initials {
  width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover;
}
.user-btn-initials {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.user-btn::after { display: none; }

/* Notifications dropdown */
.notif-dropdown {
  width: min(400px, calc(100vw - 20px));
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--border-color) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.06) !important;
  background: var(--bg-card) !important;
}
.notif-header, .notif-footer {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.notif-header {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(14, 165, 233, 0.08));
  border-bottom: 1px solid var(--border-color);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}
.notif-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.notif-header-bell {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
  font-size: 12px;
  flex-shrink: 0;
}
.notif-header-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.25rem;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: #ef4444;
}
.notif-dropdown .mark-all-read {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary) !important;
  text-decoration: none;
  white-space: nowrap;
}
.notif-dropdown .mark-all-read:hover { text-decoration: underline; }
.notif-list {
  max-height: min(70vh, 28rem);
  overflow-y: auto;
}
.notif-empty {
  text-align: center;
  padding: 1.75rem 1rem;
  color: var(--text-muted);
}
.notif-empty-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.65rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(124, 58, 237, 0.1);
  color: var(--primary);
  font-size: 1.15rem;
}
.notif-footer {
  border-top: 1px solid var(--border-color);
  justify-content: center;
  background: var(--bg-body);
}
.notif-footer a {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--primary) !important;
  text-decoration: none;
}
.notif-footer a:hover { color: var(--primary-dark) !important; }
.notif-item-action { cursor: default; }
.notif-item {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s ease;
  color: var(--text-primary) !important;
  border-left: 3px solid transparent;
  text-decoration: none !important;
  align-items: flex-start;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--bg-body); color: var(--text-primary) !important; }
.notif-item.is-read { opacity: 0.82; }
.notif-item.unread {
  background: rgba(124, 58, 237, 0.06);
  border-left-color: var(--primary);
}
.notif-item.unread .notif-title {
  font-weight: 700;
  color: var(--text-primary);
}
.notif-item.unread:hover {
  background: rgba(124, 58, 237, 0.1);
}
.notif-body { min-width: 0; flex: 1; }
.notif-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary);
  font-size: 14px;
}
.notif-icon-unread { box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.15); }
.notif-icon.is-account_signup { background: #ede9fe; color: #6d28d9; }
.notif-icon.is-admission_application { background: #ccfbf1; color: #0f766e; }
.notif-icon.is-supervisor_link_request { background: #dbeafe; color: #1d4ed8; }
.notif-icon.is-parent_link_request { background: #dcfce7; color: #15803d; }
.notif-icon.is-school_announcement,
.notif-icon.is-platform_announcement { background: #fef3c7; color: #b45309; }
.notif-icon.is-report_card_published { background: #ede9fe; color: #6d28d9; }
.notif-icon.is-platform_news { background: #e0f2fe; color: #0369a1; }
.notif-icon.is-platform_review_update,
.notif-icon.is-platform_review { background: #fce7f3; color: #be185d; }
.notif-icon.is-sms_setup_needed,
.notif-icon.is-sms_setup_request,
.notif-icon.is-sms_credit_queue { background: #ffedd5; color: #c2410c; }
.notif-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.notif-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.notif-snippet {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}
.notif-new-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6d28d9;
  background: rgba(124, 58, 237, 0.14);
  border: 0;
  border-radius: 999px;
  padding: 2px 7px;
  line-height: 1.4;
}
.notif-new-badge.is-action {
  color: #9a3412;
  background: #ffedd5;
}
.notif-new-badge.is-done {
  color: #166534;
  background: #dcfce7;
}
.notif-handled {
  font-size: 11.5px;
  font-weight: 700;
  color: #15803d;
  margin-top: 4px;
}
.notif-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.notif-item .notif-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff !important;
  border: 0;
  text-decoration: none !important;
  box-shadow: 0 6px 14px rgba(124, 58, 237, 0.25);
}
.notif-item .notif-action-btn:hover { filter: brightness(1.05); color: #fff !important; }
[data-theme="dark"] .notif-header {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.22), rgba(14, 165, 233, 0.1));
  color: var(--text-primary) !important;
}
[data-theme="dark"] .notif-dropdown {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45) !important;
}
[data-theme="dark"] .notif-item.unread {
  background: rgba(139, 92, 246, 0.16);
  border-left-color: #a78bfa;
}
[data-theme="dark"] .notif-item.unread:hover {
  background: rgba(139, 92, 246, 0.24);
}
[data-theme="dark"] .notif-icon-unread {
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35);
}
[data-theme="dark"] .notif-new-badge {
  color: #ede9fe;
  background: rgba(167, 139, 250, 0.22);
}
[data-theme="dark"] .notif-new-badge.is-action {
  color: #fed7aa;
  background: rgba(234, 88, 12, 0.28);
}
[data-theme="dark"] .notif-new-badge.is-done {
  color: #bbf7d0;
  background: rgba(22, 163, 74, 0.28);
}
[data-theme="dark"] .notif-handled {
  color: #86efac;
}

/* View-all notifications page */
.notif-page-item.unread {
  background: rgba(14, 165, 233, 0.12) !important;
  border-left: 3px solid #0ea5e9 !important;
}
.notif-page-item.is-read {
  background: transparent;
  border-left: 3px solid transparent;
}
[data-theme="dark"] .notif-page-item.unread {
  background: rgba(56, 189, 248, 0.14) !important;
  border-left-color: #38bdf8 !important;
}

/* ─── Page Content ───────────────────────────────────────────── */
.page-content { padding: 24px; }

/* ─── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); }
.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: 15px;
}
.card-body { padding: 20px; }

/* Stat cards */
.stat-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  padding: 20px;
  display: flex; align-items: center; gap: 16px;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 6px; height: 100%;
  background: var(--stat-color, var(--primary));
  border-radius: 8px 0 0 8px;
}

/* Icon tint follows each card’s --stat-color */
.stat-card .stat-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  color: var(--stat-color, var(--primary));
  background: color-mix(in srgb, var(--stat-color, var(--primary)) 14%, var(--bg-card));
}

.stat-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  flex-shrink: 0;
}
.stat-info { flex: 1; }
.stat-value { font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--text-primary); }
.stat-label { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.stat-change { font-size: 12px; margin-top: 4px; }
.stat-change.up { color: var(--success); }
.stat-change.down { color: var(--danger); }

/* Stat card variant: same left accent + icon, stacked header + scrollable body (e.g. teacher assignments) */
.stat-card.stat-card--panel {
  flex-direction: column;
  align-items: stretch;
  padding: 16px 18px 16px 22px;
  min-height: 100%;
}
.stat-card.stat-card--panel > .stat-card__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
}
.stat-card.stat-card--panel .stat-icon {
  width: 48px;
  height: 48px;
  font-size: 18px;
}
.stat-card.stat-card--panel .stat-card__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}
.stat-card.stat-card--panel .stat-card__subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.stat-card.stat-card--panel .stat-card__body {
  flex: 1;
  min-height: 0;
  margin-top: 12px;
  width: 100%;
}
.stat-card.stat-card--panel .teacher-dash-assign-scroll {
  max-height: 220px;
  overflow-y: auto;
}

/* Subject pills (teacher dashboard — list or mini cards) */
.teacher-dash-assign-pill {
  font-size: 9px;
  font-weight: 500;
  background: rgba(124, 58, 237, 0.12);
  color: #c4b5fd;
  border: 1px solid rgba(124, 58, 237, 0.28);
  padding: 0.2em 0.45em;
  line-height: 1.2;
  max-width: 100%;
  white-space: normal;
  text-align: left;
}
[data-theme="light"] .teacher-dash-assign-pill {
  color: #5b21b6;
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.22);
}

/* Grid: 5 cards per row from lg — tight gutters so five fit comfortably */
.row.teacher-dash-assign-grid {
  --bs-gutter-x: 0.4rem;
  --bs-gutter-y: 0.4rem;
}

/* One compact card per class — sized for 5-up on desktop */
.teacher-dash-assign-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px 8px 8px 12px;
  height: 100%;
  min-height: 100%;
  min-width: 0;
  transition: box-shadow var(--transition), transform var(--transition);
  overflow: hidden;
}
.teacher-dash-assign-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--teacher-assign-accent, #3b82f6);
  border-radius: 6px 0 0 6px;
}
.teacher-dash-assign-card:hover {
  box-shadow: var(--shadow-sm);
}
.teacher-dash-assign-card__title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
  word-break: break-word;
}
.teacher-dash-assign-card__meta {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.3;
  word-break: break-word;
}
.teacher-dash-assign-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 6px;
}

.teacher-dash-section-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  color: #3b82f6;
  background: color-mix(in srgb, #3b82f6 14%, var(--bg-card));
}
.teacher-dash-section-icon--sm {
  width: 36px;
  height: 36px;
  font-size: 15px;
}

/* Stat summary (My Classes + Marked Today) — always 2-up, including mobile */
.teacher-dash-stat-summary-row .stat-card {
  padding: 14px 16px;
}
.teacher-dash-stat-summary-row .stat-icon {
  width: 44px;
  height: 44px;
  font-size: 14px;
}
.teacher-dash-stat-summary-row .stat-value {
  font-size: 22px;
}
.teacher-dash-stat-summary-row .stat-label {
  font-size: 12px;
}
@media (max-width: 991.98px) {
  .teacher-dash-stat-summary-row .stat-card {
    padding: 10px 12px;
  }
  .teacher-dash-stat-summary-row .stat-icon {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }
  .teacher-dash-stat-summary-row .stat-value {
    font-size: 18px;
  }
  .teacher-dash-stat-summary-row .stat-label {
    font-size: 11px;
  }
}
@media (max-width: 575.98px) {
  .teacher-dash-stat-summary-row .stat-card {
    padding: 8px 10px;
    gap: 8px;
  }
  .teacher-dash-stat-summary-row .stat-icon {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  .teacher-dash-stat-summary-row .stat-value {
    font-size: 16px;
  }
}

/* Exam / performance summary mini-cards — 2 per row on mobile */
.exam-perf-stat-grid {
  --bs-gutter-x: 0.5rem;
  --bs-gutter-y: 0.5rem;
}
@media (max-width: 991.98px) {
  .exam-perf-stat-grid .card-body {
    padding: 0.65rem 0.75rem !important;
  }
  .exam-perf-stat-grid .fs-4 {
    font-size: 1.15rem !important;
    line-height: 1.2;
  }
  .exam-perf-stat-grid .text-muted.small {
    font-size: 0.7rem;
    line-height: 1.25;
  }
}
@media (max-width: 575.98px) {
  .exam-perf-stat-grid .card-body {
    padding: 0.5rem 0.6rem !important;
  }
  .exam-perf-stat-grid .fs-4 {
    font-size: 1.05rem !important;
  }
}

/* Today breakdown — 3 across on mobile; stacked in narrow desktop sidebar */
.teacher-dash-today-breakdown-grid {
  --bs-gutter-x: 0.35rem;
  --bs-gutter-y: 0.35rem;
}
@media (max-width: 991.98px) {
  .teacher-dash-today-breakdown-grid .rounded-3 {
    padding: 0.5rem 0.35rem !important;
  }
  .teacher-dash-today-breakdown-grid .fs-4 {
    font-size: 1.1rem !important;
    line-height: 1.2;
  }
  .teacher-dash-today-breakdown-grid .text-muted.small {
    font-size: 0.65rem;
    line-height: 1.2;
    word-break: break-word;
  }
}

/* Stat cards share a row with class cards (5-up on lg) — slightly tighter */
.teacher-dash-top-cards-row .stat-card {
  padding: 14px 16px;
}
.teacher-dash-top-cards-row .stat-icon {
  width: 44px;
  height: 44px;
  font-size: 14px;
}
.teacher-dash-top-cards-row .stat-value {
  font-size: 22px;
}
.teacher-dash-top-cards-row .stat-label {
  font-size: 12px;
}

/* Teacher dashboard header: horizontal role + levels card beside welcome */
.page-header.teacher-dash-page-header {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
.teacher-dash-welcome-row {
  width: 100%;
  align-items: stretch;
}
.teacher-dash-welcome-text {
  font-size: 16px;
  line-height: 1.4;
  color: var(--text-secondary);
}
.teacher-dash-welcome-hello {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.teacher-dash-welcome-date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  margin-top: 2px;
}
.teacher-dash-welcome-date {
  font-size: 16px;
  margin-top: 0;
}
.teacher-dash-welcome-year {
  margin-top: 0;
}
.teacher-dash-welcome-year .academic-year-badge {
  font-size: 13px;
}
@media (min-width: 992px) {
  .teacher-dash-welcome-row {
    flex-wrap: nowrap;
    align-items: center;
  }
}
.teacher-dash-role-card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.teacher-dash-role-card__meta {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 12px;
  border-left: 1px solid var(--border-color);
}
.teacher-dash-role-card__meta:first-child {
  padding-left: 0;
  border-left: none;
}
.teacher-dash-role-card__meta .teacher-dash-role-card__block {
  flex: 1 1 auto;
}
@media (max-width: 991.98px) {
  .teacher-dash-role-card {
    flex-basis: auto;
    width: auto;
    max-width: 100%;
    align-self: flex-start;
    padding: 6px 10px;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .teacher-dash-role-card__meta {
    padding-left: 8px;
  }
  .teacher-dash-role-card__block {
    flex: 0 1 auto;
    padding: 0 8px;
    gap: 3px;
    justify-content: flex-start;
    min-height: 0;
  }
  .teacher-dash-role-card__block + .teacher-dash-role-card__block {
    border-left: 1px solid var(--border-color);
    border-top: none;
    padding-left: 8px;
    padding-top: 0;
    margin-top: 0;
  }
  .teacher-dash-welcome-row {
    gap: 6px;
    align-items: flex-start;
  }
  .teacher-dash-role-card__label {
    font-size: 9px;
  }
  .teacher-dash-role-card__value {
    font-size: 12px;
    line-height: 1.25;
  }
  .teacher-dash-role-badge {
    font-size: 10px;
    padding: 0.2em 0.5em;
  }
  .teacher-dash-assign-card {
    padding: 6px 6px 6px 10px;
    border-radius: 10px;
  }
  .teacher-dash-assign-grid .teacher-dash-assign-card__title {
    font-size: 11px;
  }
  .teacher-dash-assign-grid .teacher-dash-assign-card__meta {
    font-size: 9px;
  }
  .teacher-dash-assign-grid .teacher-dash-assign-pill {
    font-size: 9px;
    padding: 0.15em 0.4em;
  }
  .teacher-dash-section-icon--sm {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
}
.teacher-dash-role-card__block {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 12px;
  flex: 1 1 140px;
  min-width: 0;
}
.teacher-dash-role-card__block:first-child {
  padding-left: 0;
}
.teacher-dash-role-card__block + .teacher-dash-role-card__block {
  border-left: 1px solid var(--border-color);
}
.teacher-dash-role-card__block--full {
  flex: 1 1 100%;
  padding-left: 0 !important;
  border-left: none !important;
}
.teacher-dash-role-card__block--action {
  flex: 0 0 auto;
  margin-left: 0;
  padding-right: 0;
  justify-content: flex-start;
}
@media (max-width: 480px) {
  .teacher-dash-role-card {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 5px 8px;
  }
  .teacher-dash-role-card__block + .teacher-dash-role-card__block {
    border-left: 1px solid var(--border-color);
    border-top: none;
    padding-left: 8px;
    padding-top: 0;
    margin-top: 0;
  }
}
.teacher-dash-role-card__label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.2;
}
.teacher-dash-role-card__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  word-break: break-word;
}
.teacher-dash-role-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 0.35em 0.75em;
}
.teacher-dash-role-badge--ct {
  background: rgba(var(--primary-rgb), 0.18);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), 0.35);
}
.teacher-dash-role-badge--st {
  background: rgba(59, 130, 246, 0.12);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.28);
}
[data-theme="light"] .teacher-dash-role-badge--st {
  color: #1d4ed8;
}
.teacher-dash-role-badge--fc {
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}
[data-theme="light"] .teacher-dash-role-badge--fc {
  color: #b45309;
}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
  font-family: inherit;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

/* ─── Forms ──────────────────────────────────────────────────── */
.form-control, .form-select {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus, .form-select:focus {
  background: var(--bg-input);
  color: var(--text-primary);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}
.form-label { font-weight: 600; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }

.transcript-filters {
  flex-wrap: wrap;
  align-items: flex-start;
}
.transcript-filter-class {
  flex: 0 0 220px;
  max-width: 280px;
}
.transcript-filter-student {
  flex: 1 1 320px;
  min-width: 240px;
}
.transcript-filters .form-label {
  display: block;
  margin-bottom: 6px;
}
.transcript-filters .form-select {
  width: 100%;
}

/* Bootstrap 5 .form-control uses --bs-body-bg/--bs-body-color; without data-bs-theme=dark, cards can get white inputs + theme text (invisible). */
[data-theme="dark"] .card .form-control,
[data-theme="dark"] .card .form-select,
[data-theme="dark"] .card textarea.form-control {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color);
}
[data-theme="dark"] .card .form-control::placeholder,
[data-theme="dark"] .card textarea.form-control::placeholder {
  color: var(--text-secondary) !important;
  opacity: 1;
}

/* Software Developer → Edit school: email/SMS template blocks — avoid Bootstrap .bg-body (forces light --bs-body-bg) with dark theme text */
.sa-school-template-pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
[data-theme="dark"] pre.bg-body {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Edit student parents slots (and similar nested panels): Bootstrap bg-body-* can stay white while labels go light */
[data-theme="dark"] .bg-body-tertiary,
[data-theme="dark"] .bg-body-secondary,
[data-theme="dark"] .student-parent-slot {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .bg-body-tertiary .form-label,
[data-theme="dark"] .bg-body-secondary .form-label,
[data-theme="dark"] .student-parent-slot .form-label,
[data-theme="dark"] .bg-body-tertiary h6,
[data-theme="dark"] .bg-body-secondary h6,
[data-theme="dark"] .student-parent-slot h6 {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .bg-body-tertiary .form-text,
[data-theme="dark"] .bg-body-secondary .form-text,
[data-theme="dark"] .student-parent-slot .form-text,
[data-theme="dark"] .bg-body-tertiary .text-muted,
[data-theme="dark"] .bg-body-secondary .text-muted,
[data-theme="dark"] .student-parent-slot .text-muted,
[data-theme="dark"] .bg-body-tertiary .small,
[data-theme="dark"] .bg-body-secondary .small,
[data-theme="dark"] .student-parent-slot .small {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .student-parent-slot .form-control,
[data-theme="dark"] .student-parent-slot .form-select,
[data-theme="dark"] .bg-body-tertiary .form-control,
[data-theme="dark"] .bg-body-tertiary .form-select,
[data-theme="dark"] .bg-body-secondary .form-control,
[data-theme="dark"] .bg-body-secondary .form-select {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .student-parent-slot .text-primary,
[data-theme="dark"] .bg-body-tertiary .text-primary,
[data-theme="dark"] .bg-body-secondary .text-primary {
  color: #a78bfa !important;
}

/* ─── Page Header ────────────────────────────────────────────── */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.page-title { font-size: 22px; font-weight: 800; color: var(--text-primary); }
.page-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }

/* ─── Badges ─────────────────────────────────────────────────── */
.badge-role-super_admin { background: #fef3c7; color: #92400e; font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.badge-role-school_admin { background: rgba(var(--primary-rgb),0.1); color: var(--primary); font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.badge-role-teacher { background: #d1fae5; color: #065f46; font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.badge-role-student { background: #dbeafe; color: #1e40af; font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.badge-role-parent { background: #fce7f3; color: #9d174d; font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.badge-role-accountant { background: #d1fae5; color: #064e3b; font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.badge-role-siso { background: #fdf2f8; color: #86198f; font-size: 11px; padding: 2px 8px; border-radius: 10px; }

/* ─── DataTables override ────────────────────────────────────── */
.dataTables_wrapper { color: var(--text-primary); }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}
table.dataTable tbody tr { background: var(--bg-card) !important; color: var(--text-primary); }
table.dataTable tbody tr:hover td { background: rgba(var(--primary-rgb),0.04) !important; }
table.dataTable thead th { background: var(--bg-body); color: var(--text-secondary); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--border-color) !important; }
table.dataTable td, table.dataTable th { border-color: var(--border-color) !important; }

/* Dark mode: DataTables body cells – all text visible on dark background */
[data-theme="dark"] table.dataTable tbody tr,
[data-theme="dark"] table.dataTable tbody tr.odd,
[data-theme="dark"] table.dataTable tbody tr.even {
  background: var(--bg-card) !important;
}
[data-theme="dark"] table.dataTable tbody td,
[data-theme="dark"] table.dataTable tbody th {
  color: var(--text-primary) !important;
  background: transparent !important;
}
[data-theme="dark"] table.dataTable tbody td.small,
[data-theme="dark"] table.dataTable tbody td .small,
[data-theme="dark"] table.dataTable tbody td.text-muted,
[data-theme="dark"] table.dataTable tbody td .text-muted {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] table.dataTable thead th {
  color: var(--text-primary) !important;
}
/* Dark mode: DataTables search/filter input – text and placeholder visible */
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
  color: var(--text-primary) !important;
  background: var(--bg-input) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input::placeholder {
  color: var(--text-muted) !important;
  opacity: 1;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_length label,
[data-theme="dark"] .dataTables_wrapper .dataTables_info {
  color: var(--text-secondary) !important;
}
/* Dark mode: table hover row lighter so text stays visible */
[data-theme="dark"] table.dataTable tbody tr:hover td,
[data-theme="dark"] .table-hover tbody tr:hover td {
  background: rgba(255,255,255,0.08) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] table.dataTable tbody tr:hover .text-muted,
[data-theme="dark"] table.dataTable tbody tr:hover td.small,
[data-theme="dark"] .table-hover tbody tr:hover .text-muted {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] table.dataTable tbody tr:hover a:not(.btn),
[data-theme="dark"] .table-hover tbody tr:hover a:not(.btn) {
  color: var(--primary-light) !important;
}

/* Affiliate payment requests: pending row highlight (readable in dark mode) */
.affiliate-payout-pending > * {
  background-color: rgba(245, 158, 11, 0.14) !important;
  color: var(--text-primary) !important;
  box-shadow: inset 3px 0 0 #f59e0b;
}
.table-hover tbody tr.affiliate-payout-pending:hover > * {
  background-color: rgba(245, 158, 11, 0.22) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .affiliate-payout-pending > * {
  background-color: rgba(245, 158, 11, 0.12) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .table-hover tbody tr.affiliate-payout-pending:hover > *,
[data-theme="dark"] .table-hover tbody tr.affiliate-payout-pending:hover td {
  background-color: rgba(245, 158, 11, 0.2) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .table-hover tbody tr.affiliate-payout-pending:hover .text-muted {
  color: var(--text-secondary) !important;
}
/* Bootstrap table-warning stays readable in app dark theme */
[data-theme="dark"] .table-warning > *,
[data-theme="dark"] .table-hover > tbody > tr.table-warning:hover > * {
  --bs-table-bg: rgba(245, 158, 11, 0.14);
  --bs-table-accent-bg: transparent;
  --bs-table-hover-bg: rgba(245, 158, 11, 0.22);
  --bs-table-color: var(--text-primary);
  --bs-table-hover-color: var(--text-primary);
  background-color: rgba(245, 158, 11, 0.14) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .table-hover > tbody > tr.table-warning:hover > * {
  background-color: rgba(245, 158, 11, 0.22) !important;
}

/* Super Admin → Offline payment requests */
.offline-payment-requests .table-responsive {
  border-color: var(--border-color) !important;
  background: var(--bg-card);
}
.offline-payment-requests .offline-pay-actions {
  white-space: nowrap;
}
.offline-payment-requests .offline-pay-action-btn {
  min-height: 38px;
}
@media (max-width: 767.98px) {
  .offline-payment-requests .offline-pay-actions {
    position: sticky;
    right: 0;
    z-index: 3;
    box-shadow: -10px 0 12px rgba(0, 0, 0, 0.18);
    white-space: normal;
    min-width: 7.25rem;
  }
  .offline-payment-requests .offline-pay-action-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    min-height: 44px;
    margin-bottom: 0.35rem;
  }
  .offline-payment-requests .offline-pay-action-btn:last-child {
    margin-bottom: 0;
  }
  .offline-payment-modal .modal-footer {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .offline-payment-modal .modal-footer .btn,
  .offline-payment-modal .modal-footer form {
    width: 100%;
  }
  .offline-payment-modal .modal-footer form .btn {
    width: 100%;
  }
}
.offline-payment-requests .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--border-color);
  --bs-table-striped-bg: transparent;
  color: var(--text-primary);
  margin-bottom: 0;
}
.offline-payment-requests .table thead th {
  background: var(--bg-body) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.offline-payment-requests .table tbody td,
.offline-payment-requests .table tbody th {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.offline-payment-requests .table tbody td code,
.offline-payment-requests .offline-payment-result-json {
  color: var(--text-primary);
  background: var(--bg-input);
  border-color: var(--border-color);
}
.offline-payment-highlight-row > td {
  background: rgba(var(--primary-rgb), 0.07) !important;
  color: var(--text-primary) !important;
  --bs-table-color: var(--text-primary);
}
.offline-payment-highlight-row > td a:not(.btn) {
  color: var(--primary) !important;
}
.offline-payment-result-row > td,
.offline-payment-result-cell {
  background: var(--bg-body) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.offline-payment-result-heading {
  color: var(--text-primary) !important;
}
.offline-payment-result-summary {
  color: var(--text-muted) !important;
}
.offline-payment-result-json {
  white-space: pre-wrap;
  color: var(--text-primary) !important;
}
.opc-preview-card {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.opc-preview-label {
  color: var(--text-muted) !important;
}
.opc-preview-code {
  color: var(--text-primary) !important;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.opc-preview-ref,
.opc-preview-ref-code {
  color: var(--text-secondary) !important;
}
.opc-partial-note,
.opc-partial-remaining {
  color: var(--warning) !important;
}
.opc-partial-remaining {
  font-weight: 600 !important;
}
.offline-payment-modal .modal-content,
.offline-payment-modal.modal-content {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.offline-payment-modal .modal-header,
.offline-payment-modal .modal-footer {
  border-color: var(--border-color) !important;
}
.offline-payment-modal .modal-body dt.text-muted,
.offline-payment-modal .modal-body .text-muted {
  color: var(--text-muted) !important;
}
.offline-payment-modal .modal-body code,
.offline-payment-tx-code {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  word-break: break-all;
}
[data-theme="dark"] .offline-payment-requests .table-hover tbody tr:hover > td {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .offline-payment-requests .table-hover tbody tr:hover .text-muted {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .offline-payment-highlight-row > td {
  background: rgba(var(--primary-rgb), 0.16) !important;
}
[data-theme="dark"] .offline-payment-requests .badge.bg-warning.text-dark,
[data-theme="dark"] .offline-payment-requests .badge.bg-info.text-dark,
[data-theme="dark"] .offline-payment-modal .badge.bg-warning.text-dark,
[data-theme="dark"] .offline-payment-modal .badge.bg-info.text-dark {
  color: #1e293b !important;
}
[data-theme="dark"] .offline-payment-requests .opc-partial-banner {
  background-color: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(251, 191, 36, 0.45) !important;
  color: #fef3c7 !important;
}
[data-theme="dark"] .offline-payment-requests .opc-partial-banner strong {
  color: #fffbeb !important;
}
[data-theme="dark"] .offline-payment-requests .opc-preview-card .btn-outline-secondary {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .offline-payment-requests .opc-preview-card .btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .offline-payment-modal .btn-close {
  filter: invert(1) grayscale(100%) brightness(1.15);
}

/* Attendance report: student weekly term modal — readable hover in dark mode */
.att-student-weekly-term-thead th {
  background: var(--bg-body) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.att-term-summary-col {
  background: rgba(148, 163, 184, 0.07) !important;
  color: var(--text-primary) !important;
}
.att-week-highlight-col {
  background: rgba(124, 58, 237, 0.1) !important;
}
[data-theme="dark"] .att-term-summary-col {
  background: rgba(148, 163, 184, 0.1) !important;
}
[data-theme="dark"] .att-week-highlight-col {
  background: rgba(124, 58, 237, 0.18) !important;
}
[data-theme="dark"] .att-student-weekly-term-table.table-hover > tbody > tr:hover > * {
  background: rgba(124, 58, 237, 0.22) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .att-student-weekly-term-table.table-hover > tbody > tr:hover .text-success {
  color: #34d399 !important;
}
[data-theme="dark"] .att-student-weekly-term-table.table-hover > tbody > tr:hover .text-warning {
  color: #fbbf24 !important;
}
[data-theme="dark"] .att-student-weekly-term-table.table-hover > tbody > tr:hover .text-danger {
  color: #f87171 !important;
}
[data-theme="dark"] .att-student-weekly-term-table.table-hover > tbody > tr:hover .text-muted {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .att-student-weekly-term-table.table-hover > tbody > tr:hover .att-term-summary-col {
  background: rgba(124, 58, 237, 0.28) !important;
}
[data-theme="dark"] .att-student-weekly-term-table.table-hover > tbody > tr:hover .att-week-highlight-col {
  background: rgba(124, 58, 237, 0.32) !important;
}

/* Attendance report: weekly attendance by gender modal */
.att-gender-weekly-thead th {
  background: var(--bg-body) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.att-gender-male-att {
  background: rgba(124, 58, 237, 0.08) !important;
  color: var(--primary) !important;
}
.att-gender-female-att {
  background: rgba(6, 182, 212, 0.08) !important;
  color: #0891b2 !important;
}
[data-theme="dark"] .att-gender-female-att {
  color: #67e8f9 !important;
}
.att-gender-total-head {
  background: rgba(148, 163, 184, 0.12) !important;
  color: var(--text-primary) !important;
}
.att-gender-total-col {
  background: rgba(148, 163, 184, 0.07) !important;
  color: var(--text-primary) !important;
}
.att-gender-total-att {
  color: var(--bs-success, #198754) !important;
}
.att-gender-weekly-table tr.att-week-highlight-row > td {
  background: rgba(124, 58, 237, 0.1) !important;
}
[data-theme="dark"] .att-gender-weekly-table.table-hover > tbody > tr:hover > * {
  background: rgba(124, 58, 237, 0.22) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .att-gender-weekly-table.table-hover > tbody > tr:hover .att-gender-male-att {
  background: rgba(124, 58, 237, 0.28) !important;
  color: #c4b5fd !important;
}
[data-theme="dark"] .att-gender-weekly-table.table-hover > tbody > tr:hover .att-gender-female-att {
  background: rgba(6, 182, 212, 0.22) !important;
  color: #67e8f9 !important;
}
[data-theme="dark"] .att-gender-weekly-table.table-hover > tbody > tr:hover .att-gender-total-col,
[data-theme="dark"] .att-gender-weekly-table.table-hover > tbody > tr:hover .att-gender-total-head {
  background: rgba(124, 58, 237, 0.28) !important;
}
[data-theme="dark"] .att-gender-weekly-table.table-hover > tbody > tr:hover .att-gender-total-att {
  color: #34d399 !important;
}
[data-theme="dark"] .att-gender-weekly-table.table-hover > tbody > tr:hover .text-danger {
  color: #f87171 !important;
}
[data-theme="dark"] .att-gender-weekly-table.table-hover > tbody > tr:hover .text-muted {
  color: var(--text-secondary) !important;
}

/* Teacher roles page: subject assignments collapsed by default */
.subject-assignments.collapsed {
  display: none;
}

/* Teacher roles page: class-teacher class chooser collapsed by default */
.class-teacher-assignments.collapsed {
  display: none;
}

/* Teacher roles page: class-teacher class chooser collapsed by default */
.class-teacher-assignments.collapsed {
  display: none;
}

/* Teacher roles: Assign financial role — tall fee picker starts collapsed */
.fee-assignments-collapsible.collapsed {
  display: none;
}

/* ─── AI Assistant / Study Buddy floating widget ─────────────── */
.ai-assistant { position: fixed; bottom: 20px; right: 20px; z-index: 1050; pointer-events: none; }
.ai-assistant .ai-toggle-btn,
.ai-assistant .ai-panel { pointer-events: auto; }
.ai-assistant.ai-size-compact .ai-toggle-btn {
  width: 40px; height: 40px; font-size: 16px;
}
.ai-assistant.ai-size-compact .ai-pulse { width: 10px; height: 10px; }
.ai-assistant.ai-size-compact .ai-panel {
  width: 280px; max-height: 340px; bottom: 52px;
}
.ai-assistant.ai-size-compact .ai-msg-bubble { max-width: 190px; font-size: 12px; }
.ai-assistant.ai-size-compact .ai-msg i { width: 24px; height: 24px; font-size: 10px; }
.ai-assistant.ai-size-large .ai-toggle-btn {
  width: 52px; height: 52px; font-size: 22px;
}
.ai-assistant.ai-size-large .ai-pulse { width: 13px; height: 13px; top: -1px; right: -1px; }
.ai-assistant.ai-size-large .ai-panel {
  width: 400px; max-height: 520px; bottom: 68px;
}
.ai-assistant.ai-size-large .ai-header { font-size: 15px; padding: 16px 18px; }
.ai-assistant.ai-size-large .ai-msg-bubble { max-width: 300px; font-size: 14px; padding: 10px 14px; }
.ai-assistant.ai-size-large .ai-msg i { width: 32px; height: 32px; font-size: 14px; }
.ai-assistant.ai-size-large .ai-messages { padding: 18px; gap: 12px; }
.ai-assistant.ai-size-large .ai-input-area { padding: 14px; }
.ai-assistant.ai-size-large .ai-input-area input { font-size: 14px; padding: 10px 16px; }
.ai-assistant.ai-size-large .ai-input-area button { width: 42px; height: 42px; font-size: 15px; }
.ai-toggle-btn {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border: none; border-radius: 50%;
  color: white; font-size: 18px;
  cursor: pointer; box-shadow: 0 4px 16px rgba(var(--primary-rgb),0.4);
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}
.ai-toggle-btn:hover { transform: scale(1.06); box-shadow: 0 6px 20px rgba(var(--primary-rgb),0.5); }
.ai-pulse {
  position: absolute; top: -2px; right: -2px;
  width: 11px; height: 11px;
  background: var(--success);
  border-radius: 50%;
  border: 2px solid white;
  animation: pulse 2s infinite;
}

.ai-panel {
  position: absolute; bottom: 56px; right: 0;
  width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: none; flex-direction: column;
  max-height: 400px;
  overflow: hidden;
}
.ai-panel.open { display: flex; animation: slideUp 0.2s ease; }
.ai-header { padding: 14px 16px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 14px; }
.ai-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; }
.ai-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ai-msg { display: flex; align-items: flex-start; gap: 8px; }
.ai-msg.user { flex-direction: row-reverse; }
.ai-msg i { width: 28px; height: 28px; background: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.ai-msg-bubble { background: var(--bg-body); border-radius: var(--radius-md); padding: 8px 12px; font-size: 13px; max-width: 220px; line-height: 1.5; }
.ai-msg.user .ai-msg-bubble { background: var(--primary); color: white; }
.ai-input-area { padding: 12px; border-top: 1px solid var(--border-color); display: flex; gap: 8px; }
.ai-input-area input { flex: 1; border: 1px solid var(--border-color); border-radius: 20px; padding: 8px 14px; font-size: 13px; background: var(--bg-body); color: var(--text-primary); outline: none; }
.ai-input-area input:focus { border-color: var(--primary); }
.ai-input-area button { width: 36px; height: 36px; background: var(--primary); border: none; border-radius: 50%; color: white; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; }

/* Phones: smaller FAB so it covers fewer page buttons */
@media (max-width: 767.98px) {
  .ai-assistant {
    bottom: 10px;
    right: 10px;
  }
  .ai-toggle-btn,
  .ai-assistant.ai-size-compact .ai-toggle-btn,
  .ai-assistant.ai-size-large .ai-toggle-btn {
    width: 36px;
    height: 36px;
    font-size: 15px;
    box-shadow: 0 3px 12px rgba(var(--primary-rgb), 0.35);
  }
  .ai-pulse,
  .ai-assistant.ai-size-compact .ai-pulse,
  .ai-assistant.ai-size-large .ai-pulse {
    width: 9px;
    height: 9px;
    border-width: 1.5px;
  }
  .ai-panel,
  .ai-assistant.ai-size-compact .ai-panel,
  .ai-assistant.ai-size-large .ai-panel {
    bottom: 48px;
    width: min(300px, calc(100vw - 20px));
    max-height: min(380px, 70vh);
  }
}

/* Typing dots */
.typing-dots { display: flex; gap: 4px; align-items: center; }
.typing-dots span { width: 6px; height: 6px; background: var(--text-muted); border-radius: 50%; animation: bounce 1.2s infinite; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

/* ─── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb { font-size: 13px; }
.breadcrumb-item a { color: var(--text-secondary); }
.breadcrumb-item.active { color: var(--text-primary); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }

/* ─── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ─── Animations ─────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bounce { 0%,80%,100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Offline subscription MoMo prompt (school admin / teacher) */
.offline-momo-flash-banner {
  border: 2px solid rgba(var(--primary-rgb, 13, 110, 253), 0.45);
  border-radius: var(--radius, 0.5rem);
  padding: 0.75rem 1rem;
  background: rgba(var(--primary-rgb, 13, 110, 253), 0.08);
  animation: offlineMomoFlash 2.2s ease-in-out infinite;
}
.offline-momo-flash-number {
  color: var(--primary, #0d6efd);
  letter-spacing: 0.04em;
}
.offline-momo-flash-name {
  color: var(--text-muted, #6c757d);
  font-weight: 600;
}
@keyframes offlineMomoFlash {
  0%, 100% {
    background: rgba(var(--primary-rgb, 13, 110, 253), 0.08);
    border-color: rgba(var(--primary-rgb, 13, 110, 253), 0.45);
    box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 13, 110, 253), 0.15);
  }
  50% {
    background: rgba(var(--warning-rgb, 255, 193, 7), 0.18);
    border-color: rgba(var(--warning-rgb, 255, 193, 7), 0.75);
    box-shadow: 0 0 12px 2px rgba(var(--warning-rgb, 255, 193, 7), 0.25);
  }
}
@media (prefers-reduced-motion: reduce) {
  .offline-momo-flash-banner { animation: none; }
}
.animate-in { animation: fadeIn 0.3s ease forwards; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-w) !important;
    z-index: 1080;
    top: 0;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
  }
  .sidebar-overlay {
    z-index: 1070;
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar.collapsed { transform: translateX(-100%); }
  .sidebar.collapsed.mobile-open { transform: translateX(0); }
  .main-content { margin-left: 0 !important; }
  .hamburger { display: flex; }
  .page-content { padding: 16px; }
  /* Navbar: one row — menu | academic year/term | actions (all roles; mobile browser + PWA) */
  .top-navbar {
    flex-wrap: nowrap;
    align-items: center;
    height: var(--navbar-h);
    min-height: calc(var(--navbar-h) + env(safe-area-inset-top));
    padding: 0 12px;
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
    padding-top: env(safe-area-inset-top);
    row-gap: 0;
  }
  .top-navbar .navbar-left {
    flex: 0 0 auto;
    min-width: 0;
  }
  .top-navbar .navbar-right {
    flex: 0 0 auto;
    gap: 4px;
  }
  .top-navbar .navbar-year-term {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
    padding: 0 6px;
    margin-top: 0;
    border-top: none;
    justify-content: flex-start;
    gap: 6px;
  }
  .top-navbar .navbar-year-term .navbar-week-stack {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 2px;
  }
  .top-navbar .navbar-year-term .term-current-week-nav-badge,
  .top-navbar .navbar-year-term .term-weeks-nav-btn {
    flex-shrink: 0;
    font-size: 9px;
    line-height: 1.15;
    padding: 1px 6px;
    text-align: center;
    white-space: nowrap;
  }
  .top-navbar .navbar-year-term .navbar-academic-context-form {
    flex: 0 1 auto;
    min-width: 4.75rem;
    max-width: 7.25rem;
    width: auto;
  }
  .top-navbar .navbar-year-term .navbar-academic-picker {
    width: 100%;
    max-width: 100%;
  }
  .top-navbar .navbar-year-term .year-term-nav-control {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    width: max-content;
    max-width: 7.25rem;
    min-width: 4.75rem;
    min-height: 34px;
    border-radius: 999px;
    background: var(--navbar-academic-select-bg);
    border: 1px solid var(--navbar-academic-select-border);
    color: var(--navbar-academic-select-color);
  }
  .top-navbar.top-navbar--single-account .navbar-year-term {
    align-items: stretch !important;
    justify-content: stretch;
    gap: 8px;
  }
  .top-navbar.top-navbar--single-account .navbar-year-term .navbar-week-stack {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    align-items: stretch;
    justify-content: center;
  }
  .top-navbar.top-navbar--single-account .navbar-year-term .term-current-week-nav-badge,
  .top-navbar.top-navbar--single-account .navbar-year-term .term-weeks-nav-btn {
    flex: 1 1 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .top-navbar.top-navbar--single-account .navbar-year-term .navbar-academic-context-form {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    width: auto;
    align-items: stretch !important;
  }
  .top-navbar.top-navbar--single-account .navbar-year-term .year-term-nav-control {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  .top-navbar.top-navbar--single-account .navbar-year-term .year-term-nav-face {
    align-items: center;
    text-align: center;
  }
  .top-navbar.top-navbar--multi-account .navbar-year-term .navbar-academic-context-form,
  .top-navbar.top-navbar--multi-account .navbar-year-term .year-term-nav-control {
    flex: 1 1 auto;
    width: 100%;
    max-width: 7.25rem;
  }
  .top-navbar .navbar-year-term .year-term-nav-control::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    font-size: 9px;
    margin-right: 8px;
    opacity: 0.75;
    pointer-events: none;
    flex-shrink: 0;
  }
  .top-navbar .navbar-year-term .year-term-nav-face {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 4px 2px 8px;
    line-height: 1.1;
    pointer-events: none;
  }
  .top-navbar .navbar-year-term .year-term-nav-face-year,
  .top-navbar .navbar-year-term .year-term-nav-face-term {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
  }
  .top-navbar .navbar-year-term .year-term-nav-face-year {
    font-size: 9px;
    opacity: 0.92;
  }
  .top-navbar .navbar-year-term .year-term-nav-face-term {
    font-size: 10px;
  }
  .top-navbar .navbar-year-term .year-term-nav-select.form-select {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
  .top-navbar .year-term-badge,
  .top-navbar a.year-term-badge.year-term-badge--link {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    white-space: normal;
    line-height: 1.1;
    font-size: 10px;
  }
  .top-navbar .year-term-badge-sep {
    display: none;
  }
  .top-navbar .navbar-year-term .year-term-settings-link {
    flex-shrink: 0;
  }

  /* Portal dashboards (all roles) — compact stats, cards, banners on tablet/phone */
  .page-content .page-header {
    margin-bottom: 12px;
    gap: 8px;
  }
  .page-content .page-title {
    font-size: 18px;
  }
  .page-content .page-subtitle {
    font-size: 12px;
    margin-top: 1px;
  }
  .page-content .page-header .btn {
    font-size: 12px;
    padding: 0.3rem 0.55rem;
  }
  .page-content .stat-card {
    padding: 10px 12px;
    gap: 10px;
    border-radius: var(--radius-md);
  }
  .page-content .stat-card .stat-icon {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }
  .page-content .stat-value {
    font-size: 18px;
  }
  .page-content .stat-label {
    font-size: 11px;
  }
  .page-content .stat-change {
    font-size: 10px;
    margin-top: 2px;
    line-height: 1.3;
  }
  .page-content .stat-card.stat-card--panel {
    padding: 12px 14px 12px 18px;
  }
  .page-content .stat-card.stat-card--panel .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  .page-content .card-body {
    padding: 12px 14px;
  }
  .page-content .card-header {
    padding: 10px 14px;
  }
  .page-content .card-header span,
  .page-content .card-header .fw-semibold,
  .page-content .card-header .small.fw-semibold {
    font-size: 13px;
  }
  .page-content .alert {
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.4;
  }
  .page-content .alert.mb-3,
  .page-content .alert.mb-4 {
    margin-bottom: 12px !important;
  }
  .page-content .alert .fa-lg {
    font-size: 1em;
  }
  .page-content .row.g-3,
  .page-content .row.g-2 {
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 0.5rem;
  }
  .page-content .row.g-3.mb-3,
  .page-content .row.g-3.mb-4,
  .page-content .row.g-2.mb-3,
  .page-content .row.g-2.mb-4 {
    margin-bottom: 12px !important;
  }
  .dashboard-calendar-hint {
    font-size: 10px !important;
    padding: 0.35rem 0.65rem !important;
    line-height: 1.3 !important;
  }
  .page-content .card.border-0.shadow-sm > .card-body.py-3 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .page-content a.card.text-decoration-none.p-3 {
    padding: 10px !important;
  }
  .page-content .card .card-body > .d-flex.align-items-center.gap-3.mb-3 img {
    width: 44px !important;
    height: 44px !important;
  }
  .page-content .card .card-body > .d-flex.align-items-center.gap-3.mb-3 > div[style*="width:56px"] {
    width: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
  }
  .page-content .card .card-body .rounded-2.p-2 {
    padding: 0.4rem !important;
  }
  .page-content .card.mb-4,
  .page-content .card.mb-3 {
    margin-bottom: 12px !important;
  }
  .page-content .card .card-body.p-0 .p-3.border-bottom {
    padding: 10px 12px !important;
  }
  .page-content .card .card-body.p-0 .p-3.border-bottom .fw-semibold[style*="font-size:14px"] {
    font-size: 13px !important;
  }
  .page-content .card-body[style*="min-height:260px"],
  .page-content .card-body[style*="min-height:240px"] {
    min-height: 200px !important;
  }
  .page-content .card .card-body .row.g-2 a.d-flex.p-2 {
    padding: 0.4rem !important;
  }
  .page-content .card .card-body .row.g-2 a.d-flex.p-2 > div[style*="width:30px"] {
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 575.98px) {
  .page-content .stat-value { font-size: 16px; }
  .page-title { font-size: 18px; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .page-content .page-header { gap: 6px; margin-bottom: 10px; }
  .page-content .stat-card { padding: 8px 10px; gap: 8px; }
  .page-content .stat-card .stat-icon { width: 32px; height: 32px; font-size: 12px; }
  .page-content .card-body { padding: 10px 12px; }
  .page-content .alert { padding: 6px 8px; font-size: 11px; }
  /* Prevent iOS zoom on input focus (requires font-size >= 16px) */
  .form-control, .form-select, input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="search"], input[type="tel"], input[type="url"] {
    font-size: 16px !important;
  }
  /* Navbar academic year/term: phones — dual-account stays compact; single-account fills the gap */
  .top-navbar .navbar-year-term {
    flex: 1 1 auto;
    max-width: none;
    padding: 0 4px;
    gap: 4px;
  }
  .top-navbar .navbar-year-term .navbar-academic-context-form {
    flex: 0 1 auto;
    min-width: 4.5rem;
    max-width: 6.75rem;
  }
  .top-navbar .navbar-year-term .navbar-academic-picker {
    width: 100%;
    max-width: 100%;
  }
  .top-navbar .navbar-year-term .year-term-nav-control {
    min-width: 4.5rem;
    max-width: 6.75rem;
    min-height: 32px;
  }
  .top-navbar.top-navbar--single-account .navbar-year-term {
    gap: 6px;
  }
  .top-navbar.top-navbar--single-account .navbar-year-term .navbar-academic-context-form,
  .top-navbar.top-navbar--single-account .navbar-year-term .year-term-nav-control {
    max-width: none;
    min-width: 0;
    flex: 1 1 0;
    width: 100%;
  }
  .top-navbar .navbar-year-term .year-term-nav-face-year {
    font-size: 8px;
  }
  .top-navbar .navbar-year-term .year-term-nav-face-term {
    font-size: 10px;
  }
  .top-navbar .navbar-year-term .year-term-nav-select.form-select {
    font-size: 16px !important;
  }
  .top-navbar .navbar-year-term .year-term-settings-link {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
}

/* Report cards: full PDF when opened from installed PWA (toolbar + save) */
.rc-pdf-pwa-shell {
  position: fixed;
  inset: 0;
  z-index: 20050;
  display: none;
  flex-direction: column;
  background: var(--bg-body);
  padding-bottom: env(safe-area-inset-bottom);
}
.rc-pdf-pwa-shell:not(.d-none) {
  display: flex !important;
}
.rc-pdf-pwa-shell-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  padding-top: max(8px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-navbar);
}
.rc-pdf-pwa-shell-title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-pdf-pwa-shell-status {
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 12px;
  font-size: 0.75rem;
  color: var(--text-muted, #94a3b8);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-navbar);
}
body.rc-pdf-pwa-shell-open .app-wrapper,
body.rc-pdf-pwa-shell-open .ai-assistant,
body.rc-pdf-pwa-shell-open .pwa-install-banner {
  pointer-events: none !important;
}
body.rc-pdf-pwa-shell-open .ai-assistant,
body.rc-pdf-pwa-shell-open .ai-assistant input {
  display: none !important;
}
body.rc-pdf-pwa-shell-open .swal2-container {
  z-index: 21000 !important;
}
body.rc-pdf-pwa-shell-open .modal {
  z-index: 21000;
}
body.rc-pdf-pwa-shell-open .modal-backdrop {
  z-index: 20990;
}
/* Full class PDF: PDF.js (all pages scroll) — not iframe (iOS often shows one page only) */
.rc-pdf-pwa-shell .rc-pdf-pwa-shell-pdfjs.rc-pdfjs-viewer {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  position: relative;
  border-radius: 0;
}
html.pwa-standalone .rc-pdf-open-hint-browser {
  display: none !important;
}
html.pwa-standalone .rc-pdf-open-hint-pwa {
  display: inline !important;
}
@media (display-mode: standalone) {
  .rc-pdf-open-hint-browser {
    display: none !important;
  }
  .rc-pdf-open-hint-pwa {
    display: inline !important;
  }
}
.exams-table td, .exams-table th { vertical-align: middle; }
.exam-name-cell .exam-name-text { font-size: 0.8125rem; }
.exam-type-cell { width: 1%; max-width: 120px; }
.exam-type-cell .badge { white-space: normal; text-align: left; line-height: 1.3; }
.exams-actions-cell { white-space: nowrap; min-width: 140px; }
.exams-actions-cell .btn { padding: 0.2rem 0.4rem; font-size: 0.75rem; }
.exams-actions-cell .btn i { font-size: 0.7rem; }

/* Dark mode: exams table Level/Classes and cell text visible */
[data-theme="dark"] .exams-table thead th {
  background: var(--bg-body) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color);
}
[data-theme="dark"] .exams-table td,
[data-theme="dark"] .exams-table th {
  color: var(--text-primary);
  border-color: var(--border-color);
  background-color: var(--bg-card);
}
[data-theme="dark"] .exams-table tbody tr:hover td {
  background-color: rgba(255,255,255,0.06) !important;
  color: var(--text-primary);
}
[data-theme="dark"] .exams-table .text-muted {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .exams-table .exam-name-cell .text-muted {
  color: var(--text-secondary) !important;
}

/* ─── Software Developer: compact subscription plan cards ───────────── */
.subscription-plan-card .card-header {
  padding: 0.4rem 0.75rem;
}
.subscription-plan-card .card-body {
  padding: 0.6rem 0.75rem;
}
.subscription-plan-card .card-footer.subscription-plan-actions {
  padding: 0.4rem 0.75rem 0.55rem;
}
.subscription-plan-title {
  font-size: 0.95rem;
}
.subscription-plan-desc {
  font-size: 0.75rem;
  line-height: 1.35;
  margin-bottom: 0.35rem !important;
}
.subscription-plan-prices .plan-price {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}
.subscription-plan-prices .plan-price-year {
  font-size: 0.9rem;
}
.subscription-plan-prices .plan-price-suffix {
  font-size: 0.7rem;
}
.subscription-plan-card .plan-features {
  font-size: 0.78rem;
  line-height: 1.35;
}
.subscription-plan-card .plan-features li {
  margin-bottom: 0.1rem;
}
.subscription-plan-card .plan-features li:last-child {
  margin-bottom: 0;
}
.subscription-plan-card .plan-features i {
  width: 0.85rem;
  text-align: center;
  font-size: 0.72rem;
}
.subscription-plan-card .plan-modules-label,
.subscription-plan-card .subscription-plan-usage {
  font-size: 0.72rem;
}
.subscription-plan-card .plan-modules-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.3rem;
}
.subscription-plan-card .plan-modules .badge {
  font-size: 0.62rem;
  font-weight: 500;
  padding: 0.2em 0.45em;
}
.subscription-plan-card .card-header .badge {
  font-size: 0.62rem;
  padding: 0.22em 0.45em;
}
.subscription-plan-card .subscription-plan-actions .btn-sm {
  padding: 0.18rem 0.45rem;
  font-size: 0.72rem;
}
.subscription-plan-card .subscription-plan-school-list {
  max-height: 220px;
  overflow-y: auto;
  padding-left: 0;
  margin-top: 0.2rem;
}
.subscription-plan-card .subscription-plan-school-item {
  line-height: 1.35;
}
.subscription-plan-card .subscription-plan-school-table {
  font-size: 0.78rem;
}
.subscription-plan-card .subscription-plan-school-table th,
.subscription-plan-card .subscription-plan-school-table td {
  padding: 0.35rem 0.25rem;
  border-color: var(--border-color);
}
.subscription-plan-card .subscription-plan-school-table code {
  font-size: 0.72rem;
}
[data-theme="dark"] .subscription-plan-card .plan-modules .badge.bg-light {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Students Bill: generate overlay — always dark text on white panel (beats dark-theme .card / .small) */
.sb-gen-loading-overlay .sb-gen-loading-inner {
  background: #ffffff !important;
  color: #0f172a !important;
}
.sb-gen-loading-overlay #sbGenLoadingTitle {
  color: #0f172a !important;
}
.sb-gen-loading-overlay #sbGenLoadingHint {
  color: #475569 !important;
  font-size: 0.875rem;
  line-height: 1.45;
  opacity: 1 !important;
}
[data-theme="dark"] .sb-gen-loading-overlay #sbGenLoadingHint {
  color: #475569 !important;
  opacity: 1 !important;
}
[data-theme="dark"] .sb-gen-loading-overlay #sbGenLoadingTitle {
  color: #0f172a !important;
}

/* Saved timetables table: muted meta stays readable on light/white cells */
.tt-saved-table .tt-saved-meta {
  color: #475569 !important;
}
[data-theme="dark"] .card-body .tt-saved-table .tt-saved-meta,
[data-theme="dark"] .tt-saved-table .tt-saved-meta,
[data-theme="dark"] .card-body .tt-saved-table .small.tt-saved-meta {
  color: #475569 !important;
}
[data-theme="dark"] .tt-saved-table.table {
  --bs-table-bg: var(--bg-card, #1e293b);
  --bs-table-color: var(--text-primary, #e2e8f0);
  --bs-table-hover-bg: var(--bg-input, #0f172a);
  color: var(--text-primary, #e2e8f0);
}
[data-theme="dark"] .tt-saved-table thead.table-light {
  --bs-table-bg: var(--bg-input, #0f172a);
  --bs-table-color: var(--text-primary, #e2e8f0);
  color: var(--text-primary, #e2e8f0);
}
[data-theme="dark"] .tt-saved-table .tt-saved-meta {
  color: #94a3b8 !important;
}

/* Timetable preview grid: pastel teacher cells keep dark text in dark mode.
   Must beat [data-theme="dark"] .card-body .small:not(...) which uses many :not() selectors. */
.tt-class-cell {
  background: #f8fafc !important;
  color: #0f172a !important;
}
.tt-slot-card {
  color: #1e293b;
}
.tt-slot-card .tt-slot-text,
.tt-slot-card .small.tt-slot-text,
.tt-slot-card .fw-semibold.tt-slot-text {
  color: inherit !important;
}
.tt-break-card,
.tt-break-card .tt-slot-text,
.tt-break-card .small.tt-slot-text {
  color: #854d0e !important;
}
html[data-theme="dark"] .card-body .tt-slot-card .small.tt-slot-text:not(.text-success):not(.text-danger):not(.text-warning):not(.text-info),
html[data-theme="dark"] .card-body .tt-slot-card .fw-semibold.tt-slot-text:not(.text-success):not(.text-danger):not(.text-warning):not(.text-info),
html[data-theme="dark"] body .card-body .tt-slot-card .tt-slot-text {
  color: inherit !important;
}
html[data-theme="dark"] .card-body .tt-break-card .small.tt-slot-text:not(.text-success):not(.text-danger):not(.text-warning):not(.text-info),
html[data-theme="dark"] .card-body .tt-break-card .tt-slot-text,
html[data-theme="dark"] body .card-body .tt-break-card {
  color: #854d0e !important;
}
html[data-theme="dark"] .card-body td.tt-class-cell,
html[data-theme="dark"] body .tt-class-cell {
  background: #f8fafc !important;
  color: #0f172a !important;
}
html[data-theme="dark"] .card-body .tt-empty-slot,
html[data-theme="dark"] body .tt-empty-slot {
  color: #64748b !important;
}

/* Timetable builder: light panels in light theme; follow app dark theme in dark mode */
.tt-light-panel {
  color: #0f172a;
}
.tt-light-panel .tt-light-label,
.tt-light-panel .fw-semibold {
  color: #0f172a !important;
}
.tt-light-panel .tt-light-muted,
.tt-light-panel .text-muted {
  color: #475569 !important;
}
[data-theme="dark"] .card-body .tt-light-panel,
[data-theme="dark"] .tt-light-panel {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .card-body .tt-light-panel.bg-white,
[data-theme="dark"] .card-body .tt-light-panel .bg-white,
[data-theme="dark"] .tt-light-panel.bg-light-subtle {
  background: var(--bg-card) !important;
}
[data-theme="dark"] .card-body .tt-light-panel,
[data-theme="dark"] .card-body .tt-light-panel .small,
[data-theme="dark"] .card-body .tt-light-panel .tt-light-label,
[data-theme="dark"] .card-body .tt-light-panel .fw-semibold,
[data-theme="dark"] .card-body .tt-light-panel label,
[data-theme="dark"] .card-body .tt-light-panel .form-label,
[data-theme="dark"] .card-body .tt-light-panel span:not(.badge):not(.text-success):not(.text-warning-emphasis) {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .card-body .tt-light-panel .tt-light-muted,
[data-theme="dark"] .card-body .tt-light-panel .text-muted {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .card-body .tt-light-panel .text-success {
  color: #4ade80 !important;
}
[data-theme="dark"] .card-body .tt-light-panel .text-warning-emphasis {
  color: #fbbf24 !important;
}
[data-theme="dark"] .card-body .tt-light-panel .form-control,
[data-theme="dark"] .card-body .tt-light-panel .form-control:focus {
  color: var(--text-primary) !important;
  background: var(--bg-input) !important;
  border-color: var(--border-color) !important;
}

/* Fee structures (and the same header pattern): keep action buttons on screen at phone width.
   The page stylesheet forces a single nowrap row; body overflow-x:hidden then clips the rest. */
@media (max-width: 575.98px) {
  .page-header.page-header--fee-structures,
  .page-header.page-header--items-given {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    min-width: 0;
  }
  .page-header .page-header-actions {
    flex-wrap: wrap !important;
    width: 100%;
    max-width: 100%;
    row-gap: 0.35rem;
  }
  #fsTable > thead > tr > th:last-child,
  #fsTable > tbody > tr:not(.fs-heading-child-wrap) > td:last-child,
  #fsTable .fs-heading-child-table > thead > tr > th:last-child,
  #fsTable .fs-heading-child-table > tbody > tr > td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--bg-card) !important;
    box-shadow: -8px 0 10px rgba(15, 23, 42, 0.12);
  }
  #fsTable > thead > tr > th:last-child,
  #fsTable .fs-heading-child-table > thead > tr > th:last-child {
    z-index: 3;
    background: var(--bg-body) !important;
  }
  #editFeeModal .modal-dialog,
  #addModal .modal-dialog {
    max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
    margin: 0.5rem auto;
  }
  #editFeeModal .modal-content {
    max-height: calc(100dvh - 1rem) !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}

/* ─── Print ──────────────────────────────────────────────────── */
@media print {
  .sidebar, .top-navbar, .ai-assistant, #page-loader { display: none !important; }
  .main-content { margin: 0 !important; }
  .page-content { padding: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}