/* public/css/custom.css */
/* Global typography and layout scale */
:root{
  --app-root-font-size: 16px;
  --app-body-font-size: clamp(0.875rem, 1.6vw, 1rem);
  --app-table-font-size: 0.95rem;
  --app-page-bg: #e7f4eb;
  --app-shell-bg: #eff8f2;
  --app-surface: rgba(255,255,255,0.96);
  --app-surface-muted: #f7fbf8;
  --app-surface-soft: #eef6f1;
  --app-border-color: rgba(15, 23, 42, 0.12);
  --app-table-border-color: rgba(15, 23, 42, 0.14);
  --app-table-header-border: rgba(15, 23, 42, 0.2);
  --app-table-shell-border: rgba(15, 23, 42, 0.16);
  --app-text-color: #1f2937;
  --app-muted-color: #64748b;
  --app-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --app-hover-bg: rgba(15, 23, 42, 0.04);
  --app-table-odd-bg: rgba(15, 23, 42, 0.022);
  --app-table-hover-bg: rgba(15, 23, 42, 0.05);
  --app-input-bg: #ffffff;
  --app-input-focus-ring: rgba(2, 115, 51, 0.14);
  --app-subnav-bg: linear-gradient(180deg, #0b7d3b 0%, #015a2a 100%);
  --app-dropdown-bg: rgba(255,255,255,0.97);
  --app-accent: #1f7a4a;
  --app-accent-strong: #015a2a;
  --app-accent-rgb: 2,115,51;
  --app-nav-bg-solid: #027333;
  --app-nav-bg: linear-gradient(180deg, #0b7d3b 0%, #015a2a 100%);
  --app-nav-text: #ecfdf5;
  --app-nav-hover: rgba(255,255,255,0.14);
  --app-nav-active: rgba(0,0,0,0.28);
  --app-nav-border: rgba(255,255,255,0.22);
  --app-nav-accent: #9ae6b4;
  --appearance-surface: var(--app-surface);
  --appearance-surface-soft: var(--app-surface-soft);
  --appearance-border: var(--app-border-color);
  --appearance-muted: var(--app-muted-color);
  --appearance-active-bg: rgba(var(--app-accent-rgb), 0.12);
  --appearance-active-border: rgba(var(--app-accent-rgb), 0.24);
  --appearance-active-color: var(--app-accent-strong);
}
html[data-app-theme='blue']{
  --app-page-bg: #e3ebf8;
  --app-shell-bg: #eaf0f9;
  --app-surface-muted: #edf3fb;
  --app-surface-soft: #e4edf9;
  --app-border-color: rgba(30, 64, 175, 0.14);
  --app-table-border-color: rgba(30, 64, 175, 0.18);
  --app-table-header-border: rgba(30, 64, 175, 0.26);
  --app-table-shell-border: rgba(30, 64, 175, 0.2);
  --app-input-focus-ring: rgba(30, 64, 175, 0.16);
  --app-subnav-bg: linear-gradient(180deg, #1d4ed8 0%, #1e40af 58%, #1e3a8a 100%);
  --app-accent: #1d4ed8;
  --app-accent-strong: #1e40af;
  --app-accent-rgb: 29,78,216;
  --app-nav-bg-solid: #1d4ed8;
  --app-nav-bg: linear-gradient(180deg, #1d4ed8 0%, #1e40af 58%, #1e3a8a 100%);
  --app-nav-text: #eff6ff;
  --app-nav-hover: rgba(255,255,255,0.14);
  --app-nav-active: rgba(15,23,42,0.24);
  --app-nav-border: rgba(191,219,254,0.34);
  --app-nav-accent: #bfdbfe;
}
html[data-app-theme='gray']{
  --app-page-bg: #e5eaef;
  --app-shell-bg: #edf1f4;
  --app-surface-muted: #f1f5f8;
  --app-surface-soft: #e7edf3;
  --app-border-color: rgba(51, 65, 85, 0.14);
  --app-table-border-color: rgba(51, 65, 85, 0.18);
  --app-table-header-border: rgba(51, 65, 85, 0.26);
  --app-table-shell-border: rgba(51, 65, 85, 0.2);
  --app-input-focus-ring: rgba(71, 85, 105, 0.18);
  --app-subnav-bg: linear-gradient(180deg, #475569 0%, #334155 58%, #1f2937 100%);
  --app-accent: #475569;
  --app-accent-strong: #334155;
  --app-accent-rgb: 71,85,105;
  --app-nav-bg-solid: #475569;
  --app-nav-bg: linear-gradient(180deg, #475569 0%, #334155 58%, #1f2937 100%);
  --app-nav-text: #f8fafc;
  --app-nav-hover: rgba(255,255,255,0.12);
  --app-nav-active: rgba(15,23,42,0.26);
  --app-nav-border: rgba(226,232,240,0.3);
  --app-nav-accent: #cbd5e1;
}
html[data-app-theme='dark']{
  --app-page-bg: #0b1220;
  --app-shell-bg: #111827;
  --app-surface: rgba(15,23,42,0.92);
  --app-surface-muted: #172132;
  --app-surface-soft: #1b2738;
  --app-border-color: rgba(148, 163, 184, 0.24);
  --app-table-border-color: rgba(148, 163, 184, 0.28);
  --app-table-header-border: rgba(148, 163, 184, 0.38);
  --app-table-shell-border: rgba(148, 163, 184, 0.3);
  --app-text-color: #e5edf7;
  --app-muted-color: #9fb0c5;
  --app-shadow: 0 16px 36px rgba(2, 6, 23, 0.42);
  --app-hover-bg: rgba(255,255,255,0.06);
  --app-table-odd-bg: rgba(255,255,255,0.03);
  --app-table-hover-bg: rgba(148,163,184,0.08);
  --app-input-bg: #111b2d;
  --app-input-focus-ring: rgba(96, 165, 250, 0.18);
  --app-subnav-bg: linear-gradient(180deg, #172132 0%, #0f172a 100%);
  --app-dropdown-bg: rgba(15,23,42,0.98);
  --app-accent: #60a5fa;
  --app-accent-strong: #93c5fd;
  --app-accent-rgb: 96,165,250;
  --app-nav-bg-solid: #172132;
  --app-nav-bg: linear-gradient(180deg, #172132 0%, #0f172a 100%);
  --app-nav-text: #e5edf7;
  --app-nav-hover: rgba(255,255,255,0.08);
  --app-nav-active: rgba(148,163,184,0.16);
  --app-nav-border: rgba(148,163,184,0.26);
  --app-nav-accent: #93c5fd;
}
html{
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  font-size: var(--app-root-font-size);
}
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: var(--app-body-font-size);
  line-height: 1.5;
  color: var(--app-text-color);
  background-color: var(--app-page-bg);
  max-width: 100%;
  overflow-x: hidden; /* prevent page-wide horizontal scroll on small screens */
  scrollbar-gutter: stable both-edges;
  transition: background-color .18s ease, color .18s ease;
}
main,
.main,
.content{
  background: transparent;
  color: inherit;
}
body.boxed{
  background-color: var(--app-page-bg);
  color: var(--app-text-color);
}
body.boxed .container{
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
}
body.boxed .navbar,
body.boxed .footer{
  background-color: var(--app-accent-strong);
}
h1 img, h2 img, h3 img, img, svg, video, canvas{ max-width: 100%; height: auto; }
h1{ font-size: clamp(1.6rem, 3.5vw, 2.25rem); }
h2{ font-size: clamp(1.4rem, 3vw, 2rem); }
h3{ font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
h4, .h4{ font-size: clamp(1.125rem, 2.1vw, 1.25rem); }
h5, .h5{ font-size: clamp(1.05rem, 1.9vw, 1.125rem); }
h6, .h6{ font-size: clamp(0.95rem, 1.6vw, 1rem); }

/* Cards & buttons */
.card{
  border-radius: .5rem;
  border-color: var(--app-border-color);
  background-color: var(--app-surface);
  color: inherit;
}
.card.shadow-sm{ box-shadow: var(--app-shadow) !important; }
.btn{ font-weight: 600; }
.btn-primary,
.btn-success,
.btn-info{ box-shadow: 0 2px 6px rgba(0,0,0,.06); }

/* Forms */
.form-control,
.form-select,
.input-group-text{
  border-radius: .4rem;
  border-color: var(--app-border-color);
  background-color: var(--app-input-bg);
  color: var(--app-text-color);
}
.form-control::placeholder{ color: var(--app-muted-color); opacity: .82; }
.form-control:focus,
.form-select:focus{
  border-color: rgba(var(--app-accent-rgb), 0.35);
  box-shadow: 0 0 0 .2rem var(--app-input-focus-ring);
}
.form-label{ font-weight: 600; color: var(--app-text-color); }
.form-text{ color: var(--app-muted-color); }

/* XS controls for tight action rows */
.btn-xxs{
  --bs-btn-padding-y: .125rem;
  --bs-btn-padding-x: .35rem;
  --bs-btn-font-size: .75rem;
  line-height: 1.1;
}
.form-select-xxs{
  padding: .1rem .75rem .1rem .35rem;
  font-size: .72rem;
  height: calc(1.35rem + 2px);
}

/* Tables */
.table-responsive{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--app-table-shell-border);
  border-radius: .7rem;
  background: var(--app-surface);
}
.table-responsive::-webkit-scrollbar{ height: 10px; }
.table-responsive::-webkit-scrollbar-thumb{
  background: rgba(var(--app-accent-rgb), 0.22);
  border-radius: 999px;
}
.table-responsive > .table{ margin-bottom: 0; }
.table thead th{ white-space: nowrap; }
.table thead.sticky-top{
  background: var(--app-surface-muted);
  box-shadow: inset 0 -2px 0 var(--app-table-header-border), 0 2px 6px rgba(0,0,0,.05);
}
/* Sticky table headers for long reports */
.table-sticky thead th,
.table-sticky thead td{
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--app-surface-muted);
  box-shadow: inset 0 -2px 0 var(--app-table-header-border);
}
/* Mobile-first table overflow for pages that didn't wrap tables */
@media (max-width: 576px){
  /* Allow horizontal scroll without breaking layout */
  .table{ display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Keep long content from exploding layout; allow opt-in wrapping via .text-wrap/.text-break */
  .table > :not(caption) > * > *{ white-space: nowrap; }
  .table .text-wrap, .table .text-break{ white-space: normal !important; }
}

/* ========== Report Form (screen only) ========== */
@media screen{
  /* Reduce school name on the on-screen report header only */
  .report-card .header-school .school-name{
    font-size: 2.1rem !important;
    line-height: 1.1;
    letter-spacing: .1px;
  }
  /* Slightly larger contact details for contrast */
  .report-card .header-school .school-meta{
    font-size: 1.05rem;
  }
}

/* Utilities */
.text-muted{ color: #6b7280 !important; }
.small{ font-size: .875rem !important; }
.table {
    margin-bottom: 0;
    font-size: var(--app-table-font-size);
    --bs-table-bg: var(--app-surface);
    --bs-table-color: var(--app-text-color);
    --bs-table-border-color: var(--app-table-border-color);
    --bs-table-striped-bg: var(--app-table-odd-bg);
    --bs-table-striped-color: var(--app-text-color);
    --bs-table-hover-bg: var(--app-table-hover-bg);
    --bs-table-hover-color: var(--app-text-color);
    background-color: var(--app-surface);
    color: var(--app-text-color);
    border-color: var(--app-table-shell-border);
}
.table > :not(caption) > * > *{
    font-size: inherit;
    background-color: var(--bs-table-bg);
    color: inherit;
    border-bottom-color: var(--app-table-border-color);
    border-bottom-width: 1px;
    box-shadow: none;
}

/* Reduce table row height across the app */
.table td, .table th {
    padding: 0.35rem 0.5rem; /* default ~.5rem -> slimmer */
    line-height: 1.25;       /* tighter than body 1.5 */
}

/* Extra compact tables */
.table-sm td, .table-sm th {
    padding: 0.25rem 0.4rem;
    line-height: 1.2;
}

.table-bordered{
    border-color: var(--app-table-shell-border);
}
.table-bordered th, .table-bordered td {
    border: 1px solid var(--app-table-border-color);
}
.table:not(.table-no-stripes) > tbody > tr:nth-of-type(odd) > *{
  background-color: var(--app-table-odd-bg);
}
.table-hover > tbody > tr:hover > *,
.table:not(.table-no-hover) > tbody > tr:hover > *{
  background-color: var(--app-table-hover-bg);
  color: inherit;
}
.table > thead > tr > th,
.table > thead > tr > td,
.table-light > :not(caption) > * > *,
thead.thead-dark > tr > th,
thead.thead-dark > tr > td,
.table-dark > :not(caption) > * > *{
  background-color: var(--app-surface-muted);
  color: var(--app-text-color);
  border-color: var(--app-table-border-color);
  border-bottom-color: var(--app-table-header-border);
  border-bottom-width: 2px;
}
.table > tfoot > tr > th,
.table > tfoot > tr > td{
  border-top: 2px solid var(--app-table-header-border);
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td{
  border-bottom-width: 2px;
}
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td{
  border-top-width: 2px;
}

/* Strong table grid lines (opt-in via .table-lines-bold) */
.table-lines-bold > :not(caption) > * > th,
.table-lines-bold > :not(caption) > * > td{
  border-width: 2px !important;
  border-color: var(--app-table-header-border) !important;
}
.table-lines-bold thead th{
  border-bottom-width: 3px !important;
}
.table-lines-bold tfoot th,
.table-lines-bold tfoot td{
  border-top-width: 3px !important;
}

/* Mass billing refinements */
.mass-actions .btn,
.mass-actions .form-select{
  vertical-align: middle;
}
.mass-actions .form-select{ min-width: 8.5rem; }
.mass-legend .badge{ margin-right: .35rem; }
.badge-current{ background: #0d6efd; }
.badge-applied{ background: #198754; }
.badge-delta{ background: #f59e0b; color: #111827; }

/* Print: force all tables to use full page width and readable borders */
@media print{
  html, body{ width: 100% !important; }
  /* Use full printable width regardless of grid */
  .container, .container-fluid, .row,
  [class^="col-"], [class*=" col-"]{
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
  }
  /* Override more specific layout caps used on screen */
  .subnav-wrap + .content > main.container-fluid,
  .content > main.container-fluid,
  main.container-fluid{
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Ensure receipt section and cards stretch full printable width */
  #receipt-print,
  #receipt-print .card,
  #receipt-print .card-body,
  #receipt-print .card-header,
  #receipt-print .card-footer{
    width: 100% !important;
    max-width: 100% !important;
  }
  .table-responsive{ overflow: visible !important; width: 100% !important; }
  .table, .receipt-table, #receipt-print table{ width: 100% !important; max-width: 100% !important; border-collapse: collapse !important; table-layout: auto !important; }
  .table th, .table td, .receipt-table th, .receipt-table td{ white-space: normal !important; word-wrap: break-word !important; word-break: break-word !important; }
  .table th, .table td{ border-color: #000 !important; }
  .table thead th{ background: #e9ecef !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .receipt-table th, .receipt-table td{ border: 1px solid #000 !important; }
  .receipt-table thead th{ background: #e9ecef !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Avoid clipping from overflow-hidden ancestors during print */
  *, *::before, *::after{ overflow: visible !important; }
}

.card-header {
    background-color: var(--app-accent);
    color: #fff;
    border-bottom-color: var(--app-border-color);
}
/* Improve readability when contextual light backgrounds are used */
.card-header.bg-light,
.card-header.bg-white,
.card-header.bg-transparent,
.card-header.bg-success-subtle,
.card-header.bg-warning-subtle,
.card-header.bg-info-subtle,
.card-header.bg-primary-subtle,
.card-header.bg-secondary-subtle {
    color: var(--bs-body-color, #212529) !important;
}
/* Ensure contextual background colors override the default blue header */
.card-header.bg-light { background-color: var(--bs-light, #f8f9fa) !important; }
.card-header.bg-white { background-color: #ffffff !important; }
.card-header.bg-transparent { background-color: transparent !important; }
.card-header.bg-success-subtle { background-color: var(--bs-success-bg-subtle, #d1e7dd) !important; }
.card-header.bg-warning-subtle { background-color: var(--bs-warning-bg-subtle, #fff3cd) !important; }
.card-header.bg-info-subtle { background-color: var(--bs-info-bg-subtle, #cff4fc) !important; }
.card-header.bg-primary-subtle { background-color: var(--bs-primary-bg-subtle, #cfe2ff) !important; }
.card-header.bg-secondary-subtle { background-color: var(--bs-secondary-bg-subtle, #e2e3e5) !important; }

.card-body {
    padding: 1.25rem;
}

.btn-sm {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.2rem;
}

/* Extra-extra small buttons for tight table actions */
.btn-xxs{
  font-size: 0.78rem; /* smaller than .btn-sm */
  padding: 0.15rem 0.4rem;
  line-height: 1.1;
  border-radius: 0.2rem;
}

/* ===== Fees Structures page polish ===== */
.fees-structures .form-text{ color:#6b7280; margin-top:.25rem; }
#matrix-editor .total-row{ font-weight:600; color:#0c4a6e; }
#matrix-editor .table-striped tbody tr:hover{ background:#f9fbff; }

/* ===== Library (scoped) ===== */
body.ctx-library .lib-page .page-title{
  letter-spacing: -0.2px;
}
body.ctx-library .lib-kpis .card{
  border: 1px solid rgba(226,232,240,.9);
}
body.ctx-library .lib-kpis .card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08) !important;
}
body.ctx-library .lib-table thead th{
  font-size: .825rem;
  color: #475569;
}
body.ctx-library .lib-table tbody tr:hover{
  background: rgba(59,130,246,.04);
}
body.ctx-library .lib-badge{
  font-weight: 700;
  letter-spacing: .2px;
}
body.ctx-library .lib-filters .form-control,
body.ctx-library .lib-filters .form-select{
  height: calc(2.15rem + 2px);
}

/* ===== Teacher Streams Page UI polish ===== */
.teacher-streams-page .card-item{
  background: var(--app-surface);
  border: 4px solid rgba(var(--app-accent-rgb), 0.28);
  transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.teacher-streams-page .card-item:hover{
  border-color: var(--app-accent-strong);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.teacher-streams-page .stream-chip,
.teacher-streams-page .subject-chip{
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: .8rem; font-weight: 700;
  background: rgba(var(--app-accent-rgb), 0.1);
  color: var(--app-accent-strong);
  border: 1px solid rgba(var(--app-accent-rgb), 0.22);
}
.teacher-streams-page .subject-chip{ background: rgba(var(--app-accent-rgb), 0.16); }

/* Hide compact stats bar on small screens (phones) */
@media (max-width: 576.98px){
  .teacher-streams-page .stats-compact{ display: none !important; }
}

/* Compact subject allocation cards */
.teacher-streams-page #subject-allocations-cards .card-item{
  padding: .5rem .6rem !important;
}
.teacher-streams-page #subject-allocations-cards .fw-semibold{
  font-size: .98rem;
}
.teacher-streams-page #subject-allocations-cards .small{
  font-size: .78rem;
}
.teacher-streams-page #subject-allocations-cards .btn-xxs{
  padding: .12rem .36rem; font-size: .77rem; border-radius: .2rem;
}
@media (max-width: 576.98px){
  .teacher-streams-page #subject-allocations-cards .fw-semibold{ font-size: .94rem; }
  .teacher-streams-page #subject-allocations-cards .small{ font-size: .75rem; }
}
/* List view for subject allocations */
.teacher-streams-page #subject-allocations-cards.list-view > [class*='col-']{
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
.teacher-streams-page #subject-allocations-cards.list-view .card-item{
  padding: .5rem .6rem !important;
}

/* Alternating light backgrounds for card grids */
.teacher-streams-page #ct-streams-cards > [class*='col-']:nth-child(odd) .card-item{
  background: #f3fdf7; /* very light green tint */
}
.teacher-streams-page #ct-streams-cards > [class*='col-']:nth-child(even) .card-item{
  background: #ffffff;
}
.teacher-streams-page #subject-allocations-cards > [class*='col-']:nth-child(odd) .card-item{
  background: #f3fdf7; /* very light green tint */
}
.teacher-streams-page #subject-allocations-cards > [class*='col-']:nth-child(even) .card-item{
  background: #ffffff;
}

/* Teacher select columns: readable width on small screens */
.teacher-cell .input-group{ flex-wrap: nowrap; }
@media (max-width: 576px){
  .teacher-cell{ min-width: 200px; }
  .teacher-cell .form-select{ min-width: 180px; }
}
@media (min-width: 577px) and (max-width: 768px){
  .teacher-cell{ min-width: 180px; }
  .teacher-cell .form-select{ min-width: 140px; }
}

/* Keep delete icon visible and compact inside teacher cells */
.teacher-cell .delete-teacher-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .15rem .3rem; /* tighter than .btn-sm */
  line-height: 1;
  flex: 0 0 auto; /* don't shrink */
}
.teacher-cell .delete-teacher-btn i{ font-size: .85rem; }
@media (max-width: 576px){
  .teacher-cell .delete-teacher-btn{
    width: 26px; min-width: 26px; height: 26px; /* fixed tap target */
  }
  .teacher-cell .delete-teacher-btn i{ font-size: .78rem; }
}

/* Students search UI */
.search-card .form-check-input {
    width: 1.05rem; height: 1.05rem;
}
.search-card .form-check-label { font-weight: 500; }
.search-card .form-label { font-weight: 600; color: var(--app-text-color); }
.search-card #studentSearch {
  background: var(--app-input-bg);
  color: var(--app-text-color);
}
.search-card .search-input-highlight {
    background-color: rgba(var(--app-accent-rgb), 0.06);
    border-color: rgba(var(--app-accent-rgb), 0.22);
}
.search-card .search-options .form-check-label {
    color: var(--app-text-color);
}
.search-card hr { border-top-color: var(--app-border-color); }
.search-result .card { border-color: var(--app-border-color); }
.badge.bg-warning.text-dark { font-weight: 600; }
/* ========== Navigation & Layout Alignment ==========
   Centralized styles for top subnavs and (optional) sidebar */
:root{
  --header-height: 54px; /* updated dynamically by layout script */
  --shell-topbar-height: 54px; /* fixed shell height to avoid feedback loops */
  --sidebar-width: 208px;
  --mobile-topbar-height: 0px; /* becomes >0 on small screens */

  /* Brand palette: unify greens */
  --brand-green: #027333;        /* base */
  --brand-green-dark: #015a2a;   /* hover/darker */
  --brand-green-deep: #0b4f2a;   /* active */
  --brand-green-contrast: #ecfdf5; /* light text on green */
  --brand-green-accent: #9ae6b4; /* accents/borders */

  /* Subnav theme (uses brand) */
  --subnav-bg: var(--app-nav-bg-solid);
  --subnav-link-hover: var(--app-nav-hover);
  --subnav-height: 40px; /* total subnav height (computed) */
  --subnav-row-h: 40px; /* per-row height for links */
  --subnav-font-size: 0.9rem; /* uniform subnav font size */
  --subnav-icon-size: 0.9rem; /* uniform subnav icon size */
  --subnav-max-width: none;  /* let the subnav stay fixed and fill available shell width */
  --subnav-x-padding: 0px;    /* horizontal padding inside subnav */
  --subnav-item-min: 138px;
  /* Subnav link outline styling */
  --subnav-link-border: var(--app-nav-border);
  --subnav-link-border-hover: rgba(255,255,255,0.6);
  --subnav-link-border-active: rgba(255,255,255,0.82);
  --subnav-link-radius: 6px;
  /* Content side padding independent of subnav */
  --content-x-padding: 16px;
  --content-y-padding: 8px;
  --shell-content-max-width: 1480px;
  --shell-content-gap: 8px;
}

@media (min-width: 992px){
  :root{
    --header-height: 52px;
    --shell-topbar-height: 52px;
    --subnav-height: 38px;
    --subnav-row-h: 38px;
    --subnav-font-size: 0.88rem;
    --subnav-icon-size: 0.88rem;
  }
}

/* Applies only to appbar layout pages */
body.appbar{
  padding-top: var(--shell-topbar-height, 58px);
  background:
    radial-gradient(circle at top center, rgba(var(--app-accent-rgb), 0.11), transparent 28rem),
    linear-gradient(180deg, var(--app-surface-muted) 0%, var(--app-surface) 240px, var(--app-surface-soft) 100%);
  color: var(--app-text-color);
}

/* Optional site header slot (currently unused) */
.app-header.navbar{
  position: fixed; top:0; left:0; right:0; z-index:1030;
  height: var(--header-height);
  background-image: var(--app-nav-bg);
  background-color: var(--subnav-bg);
}

/* Secondary navigation bar below header */
.navbar.subnav{
  position: sticky; top: var(--header-height, 56px); z-index:1029;
  background-image: var(--app-nav-bg);
  background-color: var(--subnav-bg);
  padding-top: 0; padding-bottom: 0; padding-left: .15rem; padding-right: .15rem;
  min-height: var(--subnav-row-h);
}
.navbar.subnav.subnav-empty{
  min-height: var(--subnav-row-h);
}
.navbar.subnav.subnav-empty .container-fluid{
  min-height: inherit;
}
.navbar.subnav .nav-link{
  color: var(--app-nav-text) !important; font-weight:600;
  height: var(--subnav-row-h); line-height: var(--subnav-row-h);
  padding: 0 .62rem; font-size: var(--subnav-font-size);
  display: inline-flex; align-items: center;
  white-space: nowrap; /* keep labels on one row */
  border-radius: var(--subnav-link-radius);
  /* Non-intrusive outline using inset shadow so layout doesn't shift */
  box-shadow: inset 0 0 0 1px var(--subnav-link-border);
  transition: box-shadow .15s ease, background-color .15s ease;
}
.navbar.subnav .nav-link:hover{
  background-color: var(--subnav-link-hover);
  box-shadow: inset 0 0 0 2px var(--subnav-link-border-hover);
}
.navbar.subnav .nav-link.bg-dark{
  background-color: var(--app-nav-active) !important;
  box-shadow: inset 0 0 0 2px var(--subnav-link-border-active);
}
.navbar.subnav .navbar-toggler{ border-color: var(--subnav-link-border); }
.navbar.subnav .navbar-toggler-icon{ filter: invert(1) grayscale(100%); }
.navbar.subnav .nav-link i{ font-size: var(--subnav-icon-size); }
.navbar.subnav .navbar-nav .nav-item{ margin-right: 0; }
.navbar.subnav .navbar-nav .nav-item:last-child{ margin-right: 0; }

/* Horizontal scrolling support for dense menus */
  .navbar.subnav .navbar-nav{ flex-wrap: wrap; overflow: visible; row-gap: 0; column-gap: 0; }

/* Subnav container padding */
  .navbar.subnav .container-fluid{ padding-left: 0; padding-right: 0; }

/* Subnav fixed container + inner width cap */
.subnav-wrap{
  margin: 0; padding: 0;
  position: fixed;
  top: calc(var(--header-height, 56px) + var(--mobile-topbar-height, 0px));
  left: 0; right: 0;
  z-index: 1028;
  overflow-x: clip;
  box-sizing: border-box;
}
.subnav-wrap, .subnav-wrap .navbar{ width: 100%; max-width: 100%; box-sizing: border-box; }

/* Override layout inline subnav background to use theme colors */
.subnav-wrap{ background: transparent !important; border-bottom: none !important; }
.subnav-wrap .navbar.subnav{
  max-width: none;
  width: 100%;
  margin-left: 0; margin-right: 0;
  padding-left: var(--subnav-x-padding); padding-right: var(--subnav-x-padding);
  overflow-x: clip;
}
/* Reserve space for the sidebar only when it is visible (desktop only) */
@media (min-width: 992px){
  .has-vertical .subnav-wrap{
    left: var(--sidebar-width);
    right: 0;
    width: auto;
    padding-left: 0;
  }
}

/* Subnav "More" dropdown styling */
.navbar.subnav .nav-item.more-toggle > .nav-link{ display: inline-flex; align-items: center; gap: 6px; }
.navbar.subnav .dropdown-menu{ z-index: 1035; max-height: 70vh; overflow-y: auto; }

/* Small-screen visual tweaks: show button-like pills for links */
@media (max-width: 576px){
  .navbar.subnav .nav-link{ background-color: rgba(255,255,255,0.08); }
  .navbar.subnav .nav-link.bg-dark{ background-color: var(--app-nav-active) !important; }
}

/* Top navbar: shrink username/brand on small screens */
@media (max-width: 576px){
  #navbarDropdown{ font-size: .85rem !important; }
  .navbar .navbar-brand span{ font-size: .9rem; }
}

/* Large screens: distribute items to use full width */
@media (min-width: 992px){
  .navbar.subnav .navbar-nav{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--subnav-item-min), 1fr));
    column-gap: .2rem;
    row-gap: .2rem;
    width: 100%;
  }
  .navbar.subnav .nav-item{ min-width: 0; }
  .navbar.subnav .nav-link{ justify-content: center; width: 100%; display: flex; }
}

/* Content helpers */
.page-section{ margin-top: 1rem; }

/* Subnav wrapper aligns with sidebar (handled above for lg+) */

/* Vertical sidebar: width and positioning below header */

/* ======================
   Fees Module Tuning
   ======================
   Keep the fees dashboard compact and aligned with the subnav width.
   Scope only to fees pages to avoid side effects elsewhere. */
body.ctx-fees .fees-page{ max-width: var(--subnav-max-width); margin-left: auto; margin-right: auto; }
body.ctx-fees .fees-page .card-header{ padding: .5rem .75rem; }
body.ctx-fees .fees-page .card-body{ padding: .75rem; }
body.ctx-fees .fees-page .row.g-3.fees-quick{ --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
body.ctx-fees .fees-quick .card{ transition: transform .12s ease, box-shadow .12s ease; }
body.ctx-fees .fees-quick .card:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.08) !important; }
.app-shell-sidebar{
  width: var(--sidebar-width) !important;
  position: fixed;
  top: var(--header-height, 56px);
  left: 0; bottom: 0;
}

.app-shell-content{
  margin-top: 0;
  padding-top: calc(var(--subnav-height, 0px) + var(--shell-content-gap));
  font-size: clamp(16px, 1.9vw, 18px);
  min-height: calc(100vh - var(--shell-topbar-height, 58px));
  position: relative;
}

.app-shell-content > .app-shell-main{
  max-width: min(var(--shell-content-max-width), calc(100vw - 1rem));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-x-padding) !important;
  padding-right: var(--content-x-padding) !important;
  padding-top: var(--content-y-padding) !important;
  padding-bottom: 1rem !important;
}

.app-shell-content .container,
.app-shell-content .container-sm,
.app-shell-content .container-md,
.app-shell-content .container-lg,
.app-shell-content .container-xl,
.app-shell-content .container-xxl{
  max-width: none !important;
  width: 100% !important;
}

.app-shell-content .table{ font-size: 1rem; }
.app-shell-content .btn-sm{ font-size: .95rem; padding: .3rem .55rem; }
.app-shell-content .form-label{ font-size: 1rem; }

/* Push content to align with sidebar when visible (desktop only) */
@media (min-width: 992px){
  .has-vertical .content{
    margin-left: var(--sidebar-width);
    padding-left: 0 !important; /* remove gap between sidebar and content */
  }
  .has-vertical .app-shell-content > .app-shell-main{
    max-width: min(var(--shell-content-max-width), calc(100vw - var(--sidebar-width) - 1.25rem));
  }
}

/* Ensure subnav sits flush to sidebar when inside content */
.has-vertical .content .navbar.subnav{ margin-left: 0; }

/* Responsive tweaks for subnav */
/* ========== Small-screen padding reductions ==========
   Tighten horizontal padding on phones to use more width */
@media (max-width: 576px){
  /* Remove subnav inner x padding on phones */
  :root{ --subnav-x-padding: 0px; }

  /* Reduce page content side padding */
  .content > main.container,
  .content > main.container-fluid,
  .content main.container,
  .content main.container-fluid,
  main.container,
  main.container-fluid{
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Also reduce padding for nested containers inside content (e.g., page sections) */
  .content .container,
  .content .container-sm,
  .content .container-md,
  .content .container-lg,
  .content .container-xl,
  .content .container-xxl,
  .content .container-fluid{
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Reduce Bootstrap grid gutters on phones */
  /* Keep explicit zero-gutter utilities intact */
  .row:not(.g-0):not(.gx-0):not(.gy-0){
    --bs-gutter-x: .375rem; /* ~6px total between cols */
    --bs-gutter-y: .375rem;
  }
}

/* Slightly snug on small tablets too */
@media (min-width: 577px) and (max-width: 768px){
  :root{ --subnav-x-padding: 0px; }
  .content > main.container,
  .content > main.container-fluid{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  /* Slightly reduced gutters on small tablets */
  .row:not(.g-0):not(.gx-0):not(.gy-0){
    --bs-gutter-x: .5rem; /* default is 1.5rem; shrink to 0.5rem */
    --bs-gutter-y: .5rem;
  }
}
  /* Small tablets: keep subnav horizontally scrollable */
  @media (min-width: 769px) and (max-width: 992px){
    :root{ --subnav-row-h: 48px; --subnav-font-size: .88rem; --subnav-icon-size: 1rem; }
    .navbar.subnav{ min-height: var(--subnav-row-h); }
    .navbar.subnav .navbar-nav{
      display: flex;
      flex-direction: row !important;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      gap: 0;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .navbar.subnav .navbar-nav::-webkit-scrollbar{ display: none; }
    .navbar.subnav .nav-item{ flex: 0 0 auto; }
    .navbar.subnav .nav-link{
      min-height: var(--subnav-row-h);
      height: var(--subnav-row-h);
      line-height: var(--subnav-row-h);
      padding: 0 .7rem;
      font-size: var(--subnav-font-size);
      border-radius: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }
    .navbar.subnav .nav-link i,
    .navbar.subnav .nav-link .fa,
    .navbar.subnav .nav-link svg{ font-size: var(--subnav-icon-size); margin: 0 .35rem 0 0 !important; }
    .navbar.subnav .dropdown-toggle::after{ display: none; }
  }
  /* Phones and small tablets: keep the subnav to one fixed row of tiles */
  @media (max-width: 768px){
    :root{ --subnav-row-h: 58px; --subnav-font-size: .76rem; --subnav-icon-size: .96rem; }
    .subnav-wrap{
      background: transparent !important;
      border-bottom: none !important;
      overflow: visible;
    }
    .subnav-wrap .navbar.subnav{
      max-width: 100%;
      padding: 3px;
      min-height: auto;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible;
    }
    .subnav-wrap .navbar.subnav.subnav-empty{
      min-height: calc(var(--subnav-row-h) + 6px) !important;
    }
    .subnav-wrap .navbar.subnav.subnav-empty .container-fluid{
      min-height: var(--subnav-row-h);
    }
    .subnav-wrap .navbar.subnav .container-fluid,
    .subnav-wrap .navbar.subnav .navbar-collapse{
      overflow: visible;
    }
    .subnav-wrap .navbar.subnav .navbar-nav{
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: stretch;
      gap: 3px;
      overflow: visible;
      width: 100%;
      margin: 0;
      padding: 0;
      min-width: 0;
    }
    .subnav-wrap .navbar.subnav .nav-item{
      flex: 0 0 calc((100% - ((var(--subnav-cols, 5) - 1) * 3px)) / var(--subnav-cols, 5));
      max-width: calc((100% - ((var(--subnav-cols, 5) - 1) * 3px)) / var(--subnav-cols, 5));
      min-width: 0;
      margin-right: 0;
      text-align: center;
    }
    .subnav-wrap .navbar.subnav .nav-item.more-toggle{
      flex: 0 0 calc((100% - ((var(--subnav-cols, 5) - 1) * 3px)) / var(--subnav-cols, 5));
      max-width: calc((100% - ((var(--subnav-cols, 5) - 1) * 3px)) / var(--subnav-cols, 5));
    }
    .subnav-wrap .navbar.subnav .nav-link{
      display: grid !important;
      grid-template-rows: minmax(.95rem, auto) minmax(1em, auto);
      justify-items: center !important;
      align-content: center !important;
      align-items: center !important;
      width: 100% !important;
      min-height: var(--subnav-row-h) !important;
      height: var(--subnav-row-h) !important;
      min-width: 0;
      padding: 4px 6px !important;
      font-size: var(--subnav-font-size) !important;
      line-height: 1 !important;
      text-align: center !important;
      white-space: normal !important;
      overflow: hidden;
      border-radius: 8px !important;
      background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
      box-shadow: inset 0 0 0 1px var(--subnav-link-border);
      gap: 2px;
    }
    .subnav-wrap .navbar.subnav .nav-link:hover{
      background-color: var(--app-nav-hover) !important;
    }
    .subnav-wrap .navbar.subnav .nav-link.bg-dark{
      background-color: var(--app-nav-active) !important;
      box-shadow: inset 0 0 0 2px rgba(255,255,255,0.16);
    }
    .subnav-wrap .navbar.subnav .nav-link i,
    .subnav-wrap .navbar.subnav .nav-link .fa,
    .subnav-wrap .navbar.subnav .nav-link svg{
      font-size: var(--subnav-icon-size);
      margin: 0 !important;
      flex-shrink: 0;
    }
    .subnav-wrap .navbar.subnav .nav-link > .nav-label{
      display: block !important;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap !important;
      max-width: 100%;
      min-width: 0;
      min-height: 1em;
      line-height: 1;
      font-weight: 600;
    }
    .subnav-wrap .navbar.subnav .nav-label{
      font-size: .72rem;
    }
    .subnav-wrap .navbar.subnav .nav-link > :not(i):not(.fa):not(svg):not(.svg-inline--fa):not(.badge){
      max-width: 100%;
    }
    .subnav-wrap .navbar.subnav .dropdown-toggle::after{ display: none; }
    .subnav-wrap .navbar.subnav .nav-item.more-toggle > .nav-link{
      justify-items: center !important;
    }
    .subnav-wrap .navbar.subnav .dropdown-menu{
      background: var(--app-dropdown-bg);
      color: var(--app-text-color);
      border: 1px solid var(--app-border-color);
      min-width: min(16rem, calc(100vw - 14px));
      margin-top: 6px;
      border-radius: 12px;
      box-shadow: var(--app-shadow);
    }
    .subnav-wrap .navbar.subnav .dropdown-menu .dropdown-item{
      color: var(--app-text-color) !important;
      font-weight: 600;
    }
    .subnav-wrap .navbar.subnav .dropdown-menu .dropdown-item:hover,
    .subnav-wrap .navbar.subnav .dropdown-menu .dropdown-item:focus{
      background: var(--app-hover-bg);
      color: var(--app-accent-strong) !important;
    }
    .subnav-wrap .navbar.subnav .dropdown-menu .dropdown-item .nav-label{
      color: inherit !important;
    }
  }
  @media (max-width: 576px){
    :root{ --subnav-row-h: 54px; --subnav-font-size: .7rem; --subnav-icon-size: .9rem; }
    .subnav-wrap .navbar.subnav{ padding: 2px; }
    .subnav-wrap .navbar.subnav.subnav-empty{
      min-height: calc(var(--subnav-row-h) + 4px) !important;
    }
    .subnav-wrap .navbar.subnav .navbar-nav{
      gap: 2px;
    }
    .subnav-wrap .navbar.subnav .nav-item,
    .subnav-wrap .navbar.subnav .nav-item.more-toggle{
      flex-basis: calc((100% - ((var(--subnav-cols, 4) - 1) * 2px)) / var(--subnav-cols, 4));
      max-width: calc((100% - ((var(--subnav-cols, 4) - 1) * 2px)) / var(--subnav-cols, 4));
    }
    .subnav-wrap .navbar.subnav .nav-link{ padding: 3px 4px !important; border-radius: 7px !important; }
    .subnav-wrap .navbar.subnav .nav-label{ font-size: .68rem; }
  }

/* Global mobile compaction for tighter fit */
@media (max-width: 576px){
  .card-body{ padding: .75rem; }
  .card-header{ padding: .5rem .75rem; }
  .btn{ padding: .4rem .6rem; font-size: .9rem; }
  .table{ font-size: .875rem; }
  .table td, .table th{ padding: .3rem .4rem; }
  .form-control{ padding: .4rem .6rem; font-size: .95rem; }
  .form-label{ font-size: .9rem; }
}

/* ========== Messages Module ========== */
.messages{
  /* Fill viewport minus header + subnav */
  min-height: calc(100vh - var(--header-height,56px) - var(--subnav-height,44px) - 48px);
}
.messages .messages-header{
  gap: .5rem;
}
.messages .messages-header h3{ margin: 0; }
.messages .messages-header .btn{ white-space: nowrap; }

/* Cards spacing and readability */
.messages .card{ border-radius: 12px; }
.messages .card + .card{ margin-top: 1rem; }
.messages .card-body{ padding: 1rem 1.25rem; }

/* Tables */
.messages .table th,
.messages .table td{ vertical-align: middle; }

/* ====== Compact card body utility for tighter content (e.g., tables) ====== */
.card-body.compact{
  padding: .75rem .75rem; /* reduce default 1.25rem to tighten top spacing */
}

/* ====== Form compaction + soft green inputs (scoped) ====== */
.form-compact .form-control,
.form-compact .form-select,
.form-compact textarea{
  padding: .35rem .5rem;
  font-size: .95rem;
}
.form-compact .form-group,
.form-compact .mb-3{ margin-bottom: .5rem !important; }

/* Tighter grid gutters inside compact forms */
.form-compact .row{
  --bs-gutter-x: .5rem; /* default 1.5rem */
  --bs-gutter-y: .5rem;
}

.form-soft-green .form-control,
.form-soft-green .form-select,
.form-soft-green textarea{
  background-color: #f9fff9; /* very light green */
  border-color: #cbead8;     /* soft green border */
}
.form-soft-green .form-control:focus,
.form-soft-green .form-select:focus,
.form-soft-green textarea:focus{
  background-color: #eef9f1;
  border-color: #8fd8b6;
  box-shadow: 0 0 0 .2rem rgba(13, 148, 136, .15); /* teal-green glow */
}
.messages .table thead th{ font-weight: 700; }

/* Inbox list: subject truncation and tidy meta */
.messages .list-group-item > div > div:first-child{
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: clamp(220px, 55vw, 720px);
}
.messages .list-group-item small.text-muted{ display: inline-block; margin-top: 2px; }

/* Polished inbox items */
.messages .message-item{ position: relative; border-left: 3px solid transparent; border-radius: 10px; }
.messages .message-item:hover{ background-color: #f8faf9; border-left-color: var(--brand-green-accent); }
.messages .message-item.is-unread{ background-color: #f6fffa; border-left-color: var(--brand-green); }
.messages .message-item .subject{ font-weight: 600; }
.messages .message-item.is-unread .subject{ font-weight: 700; }
.messages .status-dot{ width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-top: .45rem; flex: 0 0 auto; background: #d1d5db; }
.messages .status-dot.unread{ background: var(--brand-green); box-shadow: 0 0 0 2px #e6f9ef; }
.messages .status-dot.read{ background: #cbd5e1; }
/* Keyboard focus state for inbox items */
.messages .message-item:focus{ outline: 2px solid var(--brand-green-accent); outline-offset: 2px; background: #f2fffa; }

/* Message body block */
.messages pre{
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: .75rem; color: #111827;
}

/* ========== Subnav Pages: Full-width content + larger fonts ========== */
/* Make any Bootstrap container inside the content area span full width
   whenever a subnav bar is present (layouts.appbar renders .subnav-wrap). */
.subnav-wrap + .content .container,
.subnav-wrap + .content .container-sm,
.subnav-wrap + .content .container-md,
.subnav-wrap + .content .container-lg,
.subnav-wrap + .content .container-xl,
.subnav-wrap + .content .container-xxl{
  max-width: 100% !important;
  width: 100% !important;
}

/* ========== Appbar layout: make all content containers full width and bump font ========== */
.content .container,
.content .container-sm,
.content .container-md,
.content .container-lg,
.content .container-xl,
.content .container-xxl,
.content .container-fluid{
  max-width: none !important; /* remove Bootstrap breakpoint caps */
  width: 100% !important;     /* fill the available content width */
  padding-left: 0 !important; /* remove side padding inside containers */
  padding-right: 0 !important;
}

.content{
  font-size: clamp(16px, 1.9vw, 18px);
  padding-left: 0;  /* use full-bleed by default */
  padding-right: 0;
}
.content .table{ font-size: 1rem; }
.content .btn-sm{ font-size: .95rem; padding: .3rem .55rem; }
.content .form-label{ font-size: 1rem; }

/* Readability bump on all subnav pages */
.subnav-wrap + .content{
  font-size: clamp(16px, 1.9vw, 18px);
  padding-top: var(--subnav-height, var(--subnav-row-h, 44px)); /* offset fixed subnav */
}
.route-home .subnav-wrap + .content{
  /* Reduce apparent top spacing on Home only (keeps subnav visible) */
  padding-top: calc(var(--subnav-height, var(--subnav-row-h, 44px)) - 6px) !important;
}
/* Tighten top padding inside the main container on Home */
.route-home .content > main.container-fluid{ padding-top: .25rem !important; }
/* Tighten top spacing on Fees Dashboard (index) */
.route-fees-index .content > main.container-fluid{ padding-top: .25rem !important; }
.route-fees-index .fees-page{ margin-top: 0 !important; }
.subnav-wrap + .content .table{ font-size: 1rem; }
.subnav-wrap + .content .btn-sm{ font-size: .95rem; padding: .3rem .55rem; }
.subnav-wrap + .content .form-label{ font-size: 1rem; }

/* Align content width with subnav on large screens */
@media (min-width: 992px){
  .subnav-wrap + .content > main.container-fluid{
    max-width: var(--subnav-max-width) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--content-x-padding) !important;
    padding-right: var(--content-x-padding) !important;
  }
}

/* Keep comfortable side padding on small screens */
@media (max-width: 576px){
  .subnav-wrap + .content{ font-size: 15px; }
}

/* Mobile: restore comfortable side padding on very small screens */
@media (max-width: 576px){
  .content,
  .content .container,
  .content .container-sm,
  .content .container-md,
  .content .container-lg,
  .content .container-xl,
  .content .container-xxl,
  .content .container-fluid{
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

/* Reduce side gaps on boxed layout (small screens) */
@media (max-width: 576px){
  /* Tighten the default container padding inside layouts.app */
  body.boxed .container{ padding-left: 4px !important; padding-right: 4px !important; }
  /* Make login/register auth card span full width on phones */
  .auth-card{ max-width: 100% !important; }
  /* Trim extra padding around the auth background wrapper */
  .auth-bg{ padding-left: 4px !important; padding-right: 4px !important; }
}

/* (Removed turbo-frame wrapper; #app-view handles SPA content) */

/* Forms in compose: touch-friendly */
.messages .form-control,
.messages .form-select{ min-height: 42px; }
.messages .badge.rounded-pill{ padding: .4rem .6rem; font-weight: 700; }

/* Responsive tweaks */
@media (max-width: 576px){
  .messages .messages-header{ gap: .5rem; }
  .messages .messages-header .btn{ flex: 1 1 auto; }
  .messages .card-body{ padding: .875rem 1rem; }
}

/* ========== Header Brand Logo ========== */
/* Make the brand area above the sidebar fully utilized. */
.app-shell-topbar .navbar-logo{
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  display: flex; align-items: center; justify-content: flex-start;
  padding: 0 .55rem;
}
/* Remove default right margin on brand link in this slot */
.app-shell-topbar .navbar-logo .navbar-brand{
  margin-right: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
/* Scale the login image to fill the header height (keeping aspect). */
.app-shell-topbar .navbar-logo .brand-logo{
  height: 40px;
  max-height: 40px;
  width: auto; max-width: none;
  display: block; object-fit: contain;
  flex-shrink: 0;
}
/* Scale the school logo to fit header height on large screens */
.app-shell-topbar .school-logo{
  height: 40px;
  max-height: 40px;
  width: auto;
  max-width: none;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}
@media (max-width: 768px){
  .app-shell-topbar .school-logo{ height: 24px; width: auto; }
  .app-shell-topbar .navbar-school-title{
    overflow: visible;
    text-overflow: clip;
  }
  .app-shell-topbar .navbar-school-title-full{
    display: none !important;
  }
  .app-shell-topbar .navbar-school-title-short{
    display: inline-flex !important;
    align-items: center;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--brand-green);
    flex-shrink: 0;
  }
}

/* Brand school name color */
.app-shell-topbar .logo-text{ color: var(--brand-green) !important; }
.app-shell-topbar .navbar-school-context{
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  max-width: min(100%, 980px);
  min-height: 2.35rem;
  padding: .16rem .78rem;
  border: 1px solid rgba(var(--app-accent-rgb), 0.14);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(var(--app-accent-rgb), 0.08), rgba(var(--app-accent-rgb), 0.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.42);
}
.app-shell-topbar .navbar-school-title{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  line-height: 1.08;
  text-align: center;
}
.app-shell-topbar .navbar-school-title-short{ display: none; }

@media (min-width: 992px){
  .app-shell-topbar.navbar-top{
    height: var(--shell-topbar-height) !important;
    min-height: var(--shell-topbar-height) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: stretch;
  }
  .app-shell-topbar .navbar-logo{
    padding: 0 .45rem;
  }
  .app-shell-topbar .navbar-logo .brand-logo,
  .app-shell-topbar .school-logo{
    height: 36px;
    max-height: 36px;
  }
  .app-shell-topbar .navbar-school-context{
    min-height: 2.05rem;
    padding: .1rem .68rem;
    gap: .42rem;
  }
  .app-shell-topbar .collapse.navbar-collapse.app-shell-topbar-inner{
    height: 100%;
    min-height: inherit;
    gap: .45rem;
    padding: 0 .45rem 0 0;
  }
  .app-shell-topbar .navbar-nav-icons{
    padding: .06rem .18rem .06rem .22rem;
  }
  .app-shell-topbar .theme-control-toggle-label,
  .app-shell-topbar .navbar-action-link{
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    min-height: 2rem !important;
    flex-basis: 2rem;
  }
  .app-shell-topbar .navbar-user-link{
    min-height: 2rem;
  }
}

/* Hide Ratibu brand logo on small screens */
@media (max-width: 768px){
  .app-shell-topbar .navbar-logo{ display: none !important; }
}

/* ========== Exams Page Readability Tweaks ========== */
.exams-page{
  /* Bump the base size for exam management screens */
  font-size: clamp(16px, 1.9vw, 18px);
}
.exams-page h2{ font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
.exams-page h3{ font-size: clamp(1.35rem, 2.7vw, 1.7rem); }

/* Tables: slightly larger text and touch-friendly paddings */
.exams-page .table{ font-size: 1rem; }
.exams-page .table th,
.exams-page .table td{ padding: .6rem .75rem; }

/* Buttons and form controls on exams pages */
.exams-page .btn-sm{ font-size: .95rem; padding: .3rem .55rem; }
/* Tighter action buttons inside exams tables */
.exams-page .table .btn-sm{ font-size: .80rem; padding: .2rem .4rem; line-height: 1.2; }
.exams-page .form-label{ font-size: 1rem; }

/* Ensure content uses full available width (minus sidebar) */
.exams-page{ width: 100%; }
.has-vertical .content .exams-page{ margin-left: 0; }

/* Keep comfortable side padding on small screens */
@media (max-width: 576px){
  .exams-page{ font-size: 16px; }
}

/* Exams workspace theme compatibility */
html[data-app-theme] [data-exams-module='manage-exams'],
html[data-app-theme] .exam-create-page,
html[data-app-theme] [data-exams-module='upload-marks'],
html[data-app-theme] .exam-marks-page{
  --exam-page-surface: var(--app-surface);
  --exam-page-surface-muted: var(--app-surface-muted);
  --exam-page-surface-soft: var(--app-surface-soft);
  --exam-page-border: var(--app-border-color);
  --exam-page-text: var(--app-text-color);
  --exam-page-muted: var(--app-muted-color);
  --exam-page-shell-bg: linear-gradient(135deg, var(--app-surface) 0%, var(--app-surface-muted) 58%, var(--app-surface-soft) 100%);
  --exam-page-accent-bg: rgba(var(--app-accent-rgb), 0.1);
  --exam-page-accent-border: rgba(var(--app-accent-rgb), 0.24);
  --exam-page-row-odd: var(--app-surface);
  --exam-page-row-even: var(--app-table-odd-bg);
  --exam-page-row-hover: var(--app-table-hover-bg);
  color: var(--exam-page-text);
}

html[data-app-theme] [data-exams-module='manage-exams'] .card,
html[data-app-theme] .exam-create-page .create-card,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-card,
html[data-app-theme] .exam-marks-page .marks-entry-card,
html[data-app-theme] .exam-marks-page .marks-panel,
html[data-app-theme] .exam-marks-page .marks-management-tools{
  background: var(--exam-page-surface) !important;
  border-color: var(--exam-page-border) !important;
  color: var(--exam-page-text) !important;
  box-shadow: var(--app-shadow) !important;
}

html[data-app-theme] [data-exams-module='manage-exams'] .card-header,
html[data-app-theme] [data-exams-module='manage-exams'] .card-header[style],
html[data-app-theme] .exam-create-page .create-card .card-header,
html[data-app-theme] .exam-create-page .section-head,
html[data-app-theme] .exam-create-page .bg-light.px-3.py-2,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-card .card-header{
  background: var(--exam-page-surface-muted) !important;
  border-color: var(--exam-page-border) !important;
  color: var(--exam-page-text) !important;
}

html[data-app-theme] [data-exams-module='manage-exams'] .card-body,
html[data-app-theme] .exam-create-page .card-body,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-card .card-body,
html[data-app-theme] .exam-marks-page .marks-panel-body{
  color: var(--exam-page-text) !important;
}

html[data-app-theme] [data-exams-module='manage-exams'] .table-responsive,
html[data-app-theme] .exam-create-page .table-responsive,
html[data-app-theme] [data-exams-module='upload-marks'] .table-responsive,
html[data-app-theme] .exam-marks-page .marks-table-wrap{
  background: transparent !important;
  border-color: var(--exam-page-border) !important;
}

html[data-app-theme] [data-exams-module='manage-exams'] .table,
html[data-app-theme] .exam-create-page .table,
html[data-app-theme] [data-exams-module='upload-marks'] .table,
html[data-app-theme] .exam-marks-page .marks-table{
  color: var(--exam-page-text) !important;
}

html[data-app-theme] [data-exams-module='manage-exams'] .table > :not(caption) > * > *,
html[data-app-theme] .exam-create-page .table > :not(caption) > * > *,
html[data-app-theme] [data-exams-module='upload-marks'] .table > :not(caption) > * > *,
html[data-app-theme] .exam-marks-page .marks-table > :not(caption) > * > *{
  border-color: var(--exam-page-border) !important;
  color: var(--exam-page-text) !important;
}

html[data-app-theme] [data-exams-module='manage-exams'] .table > thead > tr > *,
html[data-app-theme] [data-exams-module='manage-exams'] .table > tfoot > tr > *,
html[data-app-theme] .exam-create-page .table > thead > tr > *,
html[data-app-theme] .exam-create-page .table > tfoot > tr > *,
html[data-app-theme] [data-exams-module='upload-marks'] .table > thead > tr > *,
html[data-app-theme] [data-exams-module='upload-marks'] .table > tfoot > tr > *,
html[data-app-theme] .exam-marks-page .marks-table > thead > tr > *{
  background: var(--exam-page-surface-muted) !important;
  color: var(--exam-page-text) !important;
  border-color: var(--exam-page-border) !important;
}

html[data-app-theme] [data-exams-module='manage-exams'] .table > tbody > tr > *,
html[data-app-theme] .exam-create-page .table > tbody > tr > *,
html[data-app-theme] [data-exams-module='upload-marks'] .table > tbody > tr > *,
html[data-app-theme] .exam-marks-page .marks-table > tbody > tr > *{
  background: var(--exam-page-row-odd) !important;
}

html[data-app-theme] [data-exams-module='manage-exams'] .table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-app-theme] [data-exams-module='upload-marks'] .table-striped > tbody > tr:nth-of-type(odd) > *{
  background: var(--exam-page-row-even) !important;
}

html[data-app-theme] [data-exams-module='manage-exams'] .table-hover > tbody > tr:hover > *,
html[data-app-theme] [data-exams-module='upload-marks'] .table-hover > tbody > tr:hover > *,
html[data-app-theme] .exam-marks-page .marks-table > tbody > tr:hover > *{
  background: var(--exam-page-row-hover) !important;
}

html[data-app-theme] .exam-marks-page .marks-table > tbody > tr:nth-child(even) > *{
  background: var(--exam-page-row-even) !important;
}

html[data-app-theme] [data-exams-module='manage-exams'] .bg-light,
html[data-app-theme] [data-exams-module='manage-exams'] .bg-white,
html[data-app-theme] .exam-create-page .bg-light,
html[data-app-theme] .exam-create-page .bg-white,
html[data-app-theme] [data-exams-module='upload-marks'] .bg-light,
html[data-app-theme] [data-exams-module='upload-marks'] .bg-white,
html[data-app-theme] .exam-marks-page .bg-light,
html[data-app-theme] .exam-marks-page .bg-white{
  background: var(--exam-page-surface-muted) !important;
  border-color: var(--exam-page-border) !important;
  color: var(--exam-page-text) !important;
}

html[data-app-theme] [data-exams-module='manage-exams'] .badge.bg-light,
html[data-app-theme] [data-exams-module='manage-exams'] .badge.bg-info,
html[data-app-theme] .exam-create-page .mini-badge,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-mode-badge,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-stat{
  background: var(--exam-page-accent-bg) !important;
  border-color: var(--exam-page-accent-border) !important;
  color: var(--exam-page-text) !important;
}

html[data-app-theme] .exam-create-page .compact-note,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-inline-note,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-guide,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-form-panel,
html[data-app-theme] .exam-marks-page .marks-toolbar__inner{
  background: var(--exam-page-surface-muted) !important;
  border-color: var(--exam-page-border) !important;
  color: var(--exam-page-text) !important;
}

html[data-app-theme] .exam-create-page .exam-type-option span,
html[data-app-theme] .exam-create-page .class-panel,
html[data-app-theme] .exam-create-page .class-panel .list-group-item{
  background: var(--exam-page-surface) !important;
  border-color: var(--exam-page-border) !important;
  color: var(--exam-page-text) !important;
}

html[data-app-theme] .exam-create-page .exam-type-option input:checked + span{
  background: var(--exam-page-accent-bg) !important;
  border-color: var(--app-accent) !important;
  color: var(--app-accent-strong) !important;
  box-shadow: 0 0 0 .18rem rgba(var(--app-accent-rgb), 0.12) !important;
}

html[data-app-theme] .exam-create-page .exam-type-option:hover span{
  background: var(--exam-page-surface-soft) !important;
  border-color: rgba(var(--app-accent-rgb), 0.22) !important;
}

html[data-app-theme] .exam-create-page .page-title,
html[data-app-theme] .exam-create-page .panel-label,
html[data-app-theme] .exam-create-page .form-label,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-card .card-title,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-guide-value,
html[data-app-theme] .exam-marks-page .marks-entry-title,
html[data-app-theme] .exam-marks-page .marks-management-tools__title{
  color: var(--exam-page-text) !important;
}

html[data-app-theme] .exam-create-page .compact-note,
html[data-app-theme] .exam-create-page .form-text,
html[data-app-theme] .exam-create-page .small,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-guide-label,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-form-panel .form-text,
html[data-app-theme] [data-exams-module='upload-marks'] .small,
html[data-app-theme] .exam-marks-page .marks-entry-meta,
html[data-app-theme] .exam-marks-page .marks-entry-tip,
html[data-app-theme] .exam-marks-page .marks-management-tools__hint,
html[data-app-theme] .exam-marks-page .marks-entry-meta-sep{
  color: var(--exam-page-muted) !important;
}

html[data-app-theme] .exam-marks-page .marks-entry-card{
  background: var(--exam-page-shell-bg) !important;
}

html[data-app-theme] .exam-marks-page .marks-entry-overline{
  color: var(--app-accent-strong) !important;
}

html[data-app-theme] .exam-marks-page .marks-panel{
  background: var(--exam-page-surface-muted) !important;
}

html[data-app-theme] .exam-marks-page .marks-panel--with .marks-panel-header{
  background: var(--app-accent-strong) !important;
  color: #fff !important;
}

html[data-app-theme] .exam-marks-page .marks-panel--pending .marks-panel-header{
  background: var(--app-accent) !important;
  color: #fff !important;
}

html[data-app-theme] .exam-marks-page .marks-panel--pending .marks-panel-header .btn-link,
html[data-app-theme] .exam-marks-page .marks-panel--pending .marks-panel-header .btn-link:hover,
html[data-app-theme] .exam-marks-page .marks-panel--pending .marks-panel-header .btn-link:focus{
  color: #fff !important;
}

html[data-app-theme] .exam-marks-page .marks-management-tools,
html[data-app-theme] .exam-marks-page .marks-form-actions{
  background: var(--exam-page-surface) !important;
  border-color: var(--exam-page-border) !important;
  color: var(--exam-page-text) !important;
}

html[data-app-theme] .exam-marks-page .marks-toolbar{
  background: rgba(var(--app-accent-rgb), 0.02);
}

html[data-app-theme] .exam-marks-page .marks-table input.form-control-sm,
html[data-app-theme] .exam-marks-page .marks-table .form-control.form-control-sm,
html[data-app-theme] .exam-marks-page .marks-table .form-select.form-select-sm,
html[data-app-theme] .exam-marks-page .marks-management-tools .form-control,
html[data-app-theme] .exam-marks-page .marks-management-tools .form-select,
html[data-app-theme] .exam-marks-page .marks-outof-group .input-group-text,
html[data-app-theme] .exam-marks-page .marks-outof-group .form-control{
  background: var(--app-input-bg) !important;
  border-color: var(--exam-page-border) !important;
  color: var(--exam-page-text) !important;
}

html[data-app-theme] [data-exams-module='manage-exams'] .btn-outline-secondary,
html[data-app-theme] [data-exams-module='manage-exams'] .btn-outline-dark,
html[data-app-theme] .exam-create-page .btn-outline-secondary,
html[data-app-theme] .exam-create-page .btn-outline-dark,
html[data-app-theme] [data-exams-module='upload-marks'] .btn-outline-secondary,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-preview-btn,
html[data-app-theme] .exam-marks-page .btn-outline-secondary,
html[data-app-theme] .exam-marks-page .btn-outline-dark{
  color: var(--app-accent-strong) !important;
  border-color: rgba(var(--app-accent-rgb), 0.38) !important;
  background: rgba(var(--app-accent-rgb), 0.04) !important;
}

html[data-app-theme] [data-exams-module='manage-exams'] .btn-outline-secondary:hover,
html[data-app-theme] [data-exams-module='manage-exams'] .btn-outline-secondary:focus,
html[data-app-theme] [data-exams-module='manage-exams'] .btn-outline-dark:hover,
html[data-app-theme] [data-exams-module='manage-exams'] .btn-outline-dark:focus,
html[data-app-theme] .exam-create-page .btn-outline-secondary:hover,
html[data-app-theme] .exam-create-page .btn-outline-secondary:focus,
html[data-app-theme] .exam-create-page .btn-outline-dark:hover,
html[data-app-theme] .exam-create-page .btn-outline-dark:focus,
html[data-app-theme] [data-exams-module='upload-marks'] .btn-outline-secondary:hover,
html[data-app-theme] [data-exams-module='upload-marks'] .btn-outline-secondary:focus,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-preview-btn:hover,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-preview-btn:focus,
html[data-app-theme] .exam-marks-page .btn-outline-secondary:hover,
html[data-app-theme] .exam-marks-page .btn-outline-secondary:focus,
html[data-app-theme] .exam-marks-page .btn-outline-dark:hover,
html[data-app-theme] .exam-marks-page .btn-outline-dark:focus{
  background: var(--app-accent) !important;
  border-color: var(--app-accent) !important;
  color: #fff !important;
}

html[data-app-theme] .exam-create-page .btn-primary,
html[data-app-theme] .exam-create-page .btn-success,
html[data-app-theme] .exam-create-page .btn-info,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-fast-btn,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-confirm-btn,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-inline-template-btn{
  background: linear-gradient(135deg, var(--app-accent) 0%, var(--app-accent-strong) 100%) !important;
  border-color: var(--app-accent) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(var(--app-accent-rgb), 0.18) !important;
}

html[data-app-theme] .exam-create-page .btn-primary:hover,
html[data-app-theme] .exam-create-page .btn-primary:focus,
html[data-app-theme] .exam-create-page .btn-success:hover,
html[data-app-theme] .exam-create-page .btn-success:focus,
html[data-app-theme] .exam-create-page .btn-info:hover,
html[data-app-theme] .exam-create-page .btn-info:focus,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-fast-btn:hover,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-fast-btn:focus,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-confirm-btn:hover,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-confirm-btn:focus,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-inline-template-btn:hover,
html[data-app-theme] [data-exams-module='upload-marks'] .upload-inline-template-btn:focus{
  background: linear-gradient(135deg, var(--app-accent-strong) 0%, var(--app-accent) 100%) !important;
  border-color: var(--app-accent-strong) !important;
  color: #fff !important;
}

html[data-app-theme='dark'] [data-exams-module='manage-exams'] .text-dark:not(.badge),
html[data-app-theme='dark'] [data-exams-module='manage-exams'] .text-black:not(.badge),
html[data-app-theme='dark'] .exam-create-page .text-dark:not(.badge),
html[data-app-theme='dark'] .exam-create-page .text-black:not(.badge),
html[data-app-theme='dark'] [data-exams-module='upload-marks'] .text-dark:not(.badge),
html[data-app-theme='dark'] [data-exams-module='upload-marks'] .text-black:not(.badge),
html[data-app-theme='dark'] .exam-marks-page .text-dark:not(.badge),
html[data-app-theme='dark'] .exam-marks-page .text-black:not(.badge),
html[data-app-theme='dark'] .exam-marks-page .marks-table .student-name-cell{
  color: var(--exam-page-text) !important;
}

/* General exams page compatibility */
html[data-app-theme] .exams-page{
  --exam-page-surface: var(--app-surface);
  --exam-page-surface-muted: var(--app-surface-muted);
  --exam-page-surface-soft: var(--app-surface-soft);
  --exam-page-border: var(--app-border-color);
  --exam-page-text: var(--app-text-color);
  --exam-page-muted: var(--app-muted-color);
  --exam-page-row-odd: var(--app-surface);
  --exam-page-row-even: var(--app-table-odd-bg);
  --exam-page-row-hover: var(--app-table-hover-bg);
  color: var(--exam-page-text);
}
html[data-app-theme] .exams-page .card,
html[data-app-theme] .exams-page .table-responsive,
html[data-app-theme] .exams-page .border.rounded-3,
html[data-app-theme] .exams-page .rounded-3.border{
  background: var(--exam-page-surface) !important;
  border-color: var(--exam-page-border) !important;
  color: var(--exam-page-text) !important;
}
html[data-app-theme] .exams-page .card-header{
  background: var(--exam-page-surface-muted) !important;
  border-color: var(--exam-page-border) !important;
  color: var(--exam-page-text) !important;
}
html[data-app-theme] .exams-page .table{
  color: var(--exam-page-text) !important;
}
html[data-app-theme] .exams-page .table > :not(caption) > * > *{
  border-color: var(--exam-page-border) !important;
  color: var(--exam-page-text) !important;
}
html[data-app-theme] .exams-page .table > thead > tr > *,
html[data-app-theme] .exams-page .table > tfoot > tr > *{
  background: var(--exam-page-surface-muted) !important;
  color: var(--exam-page-text) !important;
}
html[data-app-theme] .exams-page .table > tbody > tr > *{
  background: var(--exam-page-row-odd) !important;
}
html[data-app-theme] .exams-page .table-striped > tbody > tr:nth-of-type(odd) > *{
  background: var(--exam-page-row-even) !important;
}
html[data-app-theme] .exams-page .table-hover > tbody > tr:hover > *{
  background: var(--exam-page-row-hover) !important;
}
html[data-app-theme] .exams-page .bg-light,
html[data-app-theme] .exams-page .bg-white,
html[data-app-theme] .exams-page .bg-light-subtle,
html[data-app-theme] .exams-page .bg-white-subtle,
html[data-app-theme] .exams-page .thead-light,
html[data-app-theme] .exams-page .table-light,
html[data-app-theme] .exams-page .alert-light{
  background: var(--exam-page-surface-muted) !important;
  border-color: var(--exam-page-border) !important;
  color: var(--exam-page-text) !important;
}
html[data-app-theme] .exams-page .text-muted{
  color: var(--exam-page-muted) !important;
}
html[data-app-theme] .exams-page .btn-outline-secondary,
html[data-app-theme] .exams-page .btn-outline-dark{
  color: var(--app-accent-strong) !important;
  border-color: rgba(var(--app-accent-rgb), 0.38) !important;
  background-color: rgba(var(--app-accent-rgb), 0.04) !important;
}
html[data-app-theme] .exams-page .btn-outline-secondary:hover,
html[data-app-theme] .exams-page .btn-outline-secondary:focus,
html[data-app-theme] .exams-page .btn-outline-dark:hover,
html[data-app-theme] .exams-page .btn-outline-dark:focus{
  color: #fff !important;
  border-color: var(--app-accent) !important;
  background-color: var(--app-accent) !important;
}
html[data-app-theme] .exams-page .btn-dark,
html[data-app-theme] .exams-page .btn-secondary{
  background-color: var(--app-accent-strong) !important;
  border-color: var(--app-accent-strong) !important;
  color: #fff !important;
}
html[data-app-theme] .exams-page .btn-dark:hover,
html[data-app-theme] .exams-page .btn-dark:focus,
html[data-app-theme] .exams-page .btn-secondary:hover,
html[data-app-theme] .exams-page .btn-secondary:focus{
  background-color: var(--app-accent) !important;
  border-color: var(--app-accent) !important;
}
html[data-app-theme='dark'] .exams-page .text-dark:not(.badge):not(.btn),
html[data-app-theme='dark'] .exams-page .text-black:not(.badge):not(.btn){
  color: var(--exam-page-text) !important;
}

/* ========== Button Loading Animation ==========
   Lightweight pulse around buttons while submitting */
@keyframes pulseGlow {
  0%   { box-shadow: 0 0 0 0 rgba(13,110,253,.35); }
  70%  { box-shadow: 0 0 0 10px rgba(13,110,253,0); }
  100% { box-shadow: 0 0 0 0 rgba(13,110,253,0); }
}
.btn.is-loading{
  pointer-events: none;
  animation: pulseGlow 1.2s ease-out infinite;
}

/* Global compact tweaks for very small screens */
@media (max-width: 576px){
  /* Tighter layout padding when using the boxed layout */
  body.boxed{ padding-top: 56px !important; padding-bottom: 36px !important; }
  /* Slimmer footer */
  .footer{ padding: 8px 0 !important; font-size: .85rem !important; }
}

/* ========== Compact Stats Bar (Manage Classes) ========== */
.stats-compact{ font-size: .95rem; }
.stats-compact .fa, .stats-compact .fas{ opacity: .9; }
@media (max-width: 576px){
  .stats-compact{ font-size: .9rem; }
}

/* ========== Brand Table Styling (green header + zebra) ========== */
.brand-table thead th,
.brand-table thead td{
  background-color: var(--brand-green) !important;
  color: #fff !important;
  border-color: var(--brand-green-dark) !important;
}
.brand-table thead th{ vertical-align: middle; }

/* Soft green zebra striping */
.brand-table.table-striped tbody tr:nth-of-type(odd){
  background-color: #f2fbf6; /* very light green */
}
.brand-table.table-hover tbody tr:hover td,
.brand-table.table-hover tbody tr:hover th{
  background-color: #eaf7f0; /* hover tint */
}

/* Save navbar space on extra small screens: hide long brand text */
@media (max-width: 400px){
  .navbar-brand span{ display: none !important; }
}

/* ========== Compact Form Helpers (used on Add Students) ========== */
.form-compact .form-label{ font-size: .95rem; margin-bottom: .2rem; }
.form-compact .form-control,
.form-compact .form-select{ padding: .35rem .5rem; font-size: .95rem; }
.form-compact .invalid-feedback{ font-size: .85rem; }
.form-compact .row.g-2{ --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
/* Two-column field grid on large screens */
@media (min-width: 992px){
  .form-compact .field-grid{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  .form-compact .field-grid > .row{ margin-left: 0; margin-right: 0; }
  .form-compact .grid-span-2{ grid-column: 1 / -1; }
  /* In grid items, stack label above input for better width usage */
  .form-compact .field-grid .row.g-2 > .col-md-4,
  .form-compact .field-grid .row.g-2 > .col-md-6{ flex: 0 0 100%; max-width: 100%; }
  .form-compact .field-grid .col-form-label.text-md-end{ text-align: left !important; }
}
/* Borrowed form aesthetics: green section title, tinted inputs */
.content > .container,
.content > .container-fluid{
  /* Standardize a tighter top gap for primary content wrappers */
  margin-top: .5rem !important;
}
.section-title{ color: var(--app-accent); font-weight: 800; letter-spacing: .2px; }
.tint{ background-color: rgba(var(--app-accent-rgb), 0.08) !important; border-color: rgba(var(--app-accent-rgb), 0.22) !important; }
.tint:focus{ background-color: var(--brand-green-contrast) !important; border-color: var(--app-accent) !important; box-shadow: 0 0 0 .2rem rgba(var(--app-accent-rgb),.1); }
.form-compact label.required::after{ content: " *"; color: #dc3545; }
.form-compact .help-text{ font-size: .85rem; color: #6b7280; font-style: italic; }

/* Theme accent button overrides */
:root{
  --bs-primary: var(--app-accent);
  --bs-success: var(--app-accent);
  --bs-info: var(--app-accent);
}
.btn-primary,
.btn-success,
.btn-info{
  background-color: var(--app-accent) !important;
  border-color: var(--app-accent) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus,
.btn-info:hover, .btn-info:focus{
  background-color: var(--app-accent-strong) !important;
  border-color: var(--app-accent-strong) !important;
  color: #fff !important;
}
.btn-outline-primary,
.btn-outline-success,
.btn-outline-info{
  color: var(--app-accent) !important;
  border-color: rgba(var(--app-accent-rgb), 0.55) !important;
  background-color: transparent !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-success:hover, .btn-outline-success:focus,
.btn-outline-info:hover, .btn-outline-info:focus{
  background-color: rgba(var(--app-accent-rgb), 0.12) !important;
  border-color: var(--app-accent) !important;
  color: var(--app-accent-strong) !important;
}
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-success,
.btn-check:checked + .btn-outline-info{
  background-color: var(--app-accent) !important;
  border-color: var(--app-accent) !important;
  color: #fff !important;
}
.form-control:focus, .form-select:focus{ border-color: var(--app-accent) !important; box-shadow: 0 0 0 .2rem rgba(var(--app-accent-rgb),.1) !important; }

/* ========== Top Bar Icons & Profile Dropdown ========== */
/* Keep the permanent app shell visually stable across Turbo visits. */
.app-shell-topbar{
  background-color: var(--app-surface) !important;
  border-bottom: 1px solid var(--app-border-color) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,0.03);
  height: var(--shell-topbar-height, 56px);
  min-height: var(--shell-topbar-height, 56px);
}
.app-shell-topbar .collapse.navbar-collapse{
  height: 100%;
  min-height: inherit;
  gap: .35rem;
  padding: 0 .32rem;
}
@media (min-width: 992px){
  .app-shell-topbar .collapse.navbar-collapse.app-shell-topbar-inner{
    display: grid !important;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    padding: 0 .55rem 0 0;
  }
  .app-shell-topbar .navbar-nav-icons{
    justify-self: end;
  }
}
.app-shell-topbar .navbar-school-context,
.app-shell-topbar .navbar-nav-icons{
  min-height: inherit;
}
.app-shell-topbar .navbar-nav-icons{
  flex-wrap: nowrap;
  gap: .15rem;
  margin-bottom: 0;
  padding: .08rem .2rem .08rem .26rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--app-accent-rgb), 0.12);
  background: linear-gradient(135deg, rgba(var(--app-accent-rgb), 0.06), rgba(var(--app-accent-rgb), 0.015));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
/* Ensure icons align nicely and are visible */
.app-shell-topbar .navbar-nav-icons{ align-items: center; }
.app-shell-topbar .navbar-nav-icons > .nav-item{
  display: flex;
  align-items: center;
}
.app-shell-topbar .navbar-nav-icons .nav-link{ color: var(--brand-green); }
.app-shell-topbar .navbar-nav-icons .nav-link:hover{ color: var(--brand-green-dark); }
.app-shell-topbar .navbar-nav-icons .feather{ width: 20px; height: 20px; max-width: none; }
.app-shell-topbar .theme-control-toggle{
  display: flex;
  align-items: center;
}
.app-shell-topbar .theme-control-toggle-input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.app-shell-topbar .theme-control-toggle-label{
  height: 2.2rem !important;
  width: 2.2rem !important;
  padding: 0;
  border-radius: 999px;
}
.app-shell-topbar .theme-control-toggle-label:hover{
  background: rgba(229, 120, 11, 0.12);
}
.app-shell-topbar .navbar-theme-icon{
  width: 1.1rem;
  height: 1.1rem;
  min-width: 1.1rem;
  min-height: 1.1rem;
  max-width: none;
  display: block;
  flex: 0 0 1.1rem;
}
.app-shell-topbar .navbar-action-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border-radius: 999px;
  line-height: 1;
  flex: 0 0 2.2rem;
  transition: background-color .16s ease, color .16s ease;
}
.app-shell-topbar .navbar-action-link:hover{
  background: rgba(var(--app-accent-rgb), 0.08);
  text-decoration: none;
}
.app-shell-topbar .navbar-action-link-mail{
  color: var(--brand-green);
}
.app-shell-topbar .navbar-action-link-mail:hover{
  color: var(--brand-green-dark);
}
.app-shell-topbar .navbar-action-icon{
  width: 1.15rem;
  height: 1.15rem;
  min-width: 1.15rem;
  min-height: 1.15rem;
  max-width: none;
  display: block;
  flex: 0 0 1.15rem;
  stroke-width: 2.1;
}
.app-shell-topbar .navbar-profile-chevron{
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  max-width: none;
  display: block;
  flex: 0 0 1rem;
}
.app-shell-topbar .navbar-user-link{
  min-height: 2.2rem;
  white-space: nowrap;
}
.app-shell-topbar .dropdown-profile{
  min-width: 20rem;
}
.app-shell-topbar .navbar-user-avatar,
.app-shell-topbar img.rounded-circle{
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  object-fit: cover;
  flex-shrink: 0;
}
#unread-badge{ font-size: 10px; padding: 2px 5px; line-height: 1; min-width: 18px; }
#unread-badge,
#unread-badge-mobile{
  z-index: 1;
  font-size: 10px;
  padding: 2px 5px;
  line-height: 1;
  min-width: 18px;
}

/* Minimal Font Awesome utilities for JS (i2svg) mode */
/* Ensure inline SVGs scale with font-size similar to FA CSS */
.svg-inline--fa{ display: inline-block; height: 1em; overflow: visible; vertical-align: -0.125em; }
.svg-inline--fa.fa-lg{ font-size: 1.3333333333em; line-height: .75em; vertical-align: -.225em; }
.svg-inline--fa.fa-2x{ font-size: 2em; }
.svg-inline--fa.fa-3x{ font-size: 3em; }
.svg-inline--fa.fa-4x{ font-size: 4em; }
.fa-fw{ width: 1.25em; text-align: center; }

/* Normalize icon size in paginations (guards against oversized inline SVGs) */
.pagination .page-link svg{ width: 1em; height: 1em; }

/* Sticky form actions bar (used on Add Students) */
.form-actions-bar{ position: sticky; bottom: 0; background: #fff; border-top: 1px solid #e5e7eb; padding: .5rem .75rem; }

/* Profile dropdown tidy and icon alignment */
.app-shell-topbar .dropdown-profile .nav-link,
.app-shell-topbar .dropdown-profile .dropdown-item{ display: flex; align-items: center; gap: .5rem; }
.app-shell-topbar .dropdown-profile .feather{ width: 18px; height: 18px; }
.app-shell-topbar .dropdown-profile .card-footer{ background: transparent; }

/* Appearance controls */
.appearance-control-card{
  border: 1px solid var(--appearance-border);
  border-radius: 1rem;
  padding: .95rem;
  background: linear-gradient(180deg, var(--appearance-surface), var(--appearance-surface-soft));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}
.appearance-control-card--dropdown{
  margin: 0 .95rem 1rem;
}
.appearance-control-intro{
  margin-bottom: .9rem;
}
.appearance-control-title{
  font-size: .9rem;
  font-weight: 800;
  color: var(--app-text-color);
}
.appearance-control-copy{
  margin-top: .2rem;
  color: var(--appearance-muted);
  font-size: .74rem;
  line-height: 1.45;
}
.appearance-control-section + .appearance-control-section{
  margin-top: .8rem;
}
.appearance-control-label-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .45rem;
}
.appearance-control-label{
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--app-text-color);
}
.appearance-control-meta{
  font-size: .73rem;
  color: var(--appearance-muted);
}
.appearance-choice-grid{
  display: grid;
  gap: .45rem;
}
.appearance-choice-grid--theme{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.appearance-choice-grid--font{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.appearance-choice{
  width: 100%;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .58rem .68rem;
  border: 1px solid var(--appearance-border);
  border-radius: .8rem;
  background: rgba(255,255,255,0.84);
  color: var(--app-text-color);
  text-align: left;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
  min-height: 3.1rem;
}
.appearance-choice:hover{
  border-color: rgba(var(--app-accent-rgb), 0.28);
  box-shadow: 0 8px 18px rgba(var(--app-accent-rgb), 0.08);
}
.appearance-choice:focus-visible{
  outline: 0;
  border-color: rgba(var(--app-accent-rgb), 0.45);
  box-shadow: 0 0 0 .2rem rgba(var(--app-accent-rgb), 0.12);
}
.appearance-choice.is-active,
.appearance-choice[aria-pressed="true"]{
  background: var(--appearance-active-bg);
  border-color: var(--appearance-active-border);
  color: var(--appearance-active-color);
  box-shadow: 0 10px 22px rgba(var(--app-accent-rgb), 0.12);
}
.appearance-choice-body{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .04rem;
}
.appearance-choice-swatch{
  width: .9rem;
  height: .9rem;
  flex: 0 0 .9rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.36);
}
.appearance-choice-swatch--green{
  background: linear-gradient(135deg, #e4f5e8, #1f7a4a);
}
.appearance-choice-swatch--blue{
  background: linear-gradient(135deg, #dbeafe, #2563eb);
}
.appearance-choice-swatch--gray{
  background: linear-gradient(135deg, #e2e8f0, #64748b);
}
.appearance-choice-swatch--dark{
  background: linear-gradient(135deg, #1e293b, #0b1220);
  border-color: rgba(255,255,255,0.18);
}
.appearance-choice--font{
  justify-content: center;
  padding: .56rem .3rem;
  gap: 0;
  text-align: center;
  min-height: 3rem;
}
.appearance-choice--font .appearance-choice-body{
  width: 100%;
  align-items: center;
}
.appearance-choice-title{
  font-size: .79rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.appearance-choice-copy{
  font-size: .67rem;
  line-height: 1.2;
  color: var(--appearance-muted);
}
.appearance-choice.is-active .appearance-choice-copy,
.appearance-choice[aria-pressed="true"] .appearance-choice-copy{
  color: inherit;
  opacity: .82;
}
@media (max-width: 576px){
  .appearance-choice-grid--theme{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .appearance-choice-grid--font{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .appearance-choice{
    min-height: 2.95rem;
  }
  .appearance-control-card--dropdown{
    margin: 0 .7rem .8rem;
    padding: .72rem;
    border-radius: .9rem;
  }
  .appearance-control-card--dropdown .appearance-control-intro{
    margin-bottom: .5rem;
  }
  .appearance-control-card--dropdown .appearance-control-copy,
  .appearance-control-card--dropdown .appearance-control-meta,
  .appearance-control-card--dropdown .appearance-choice-copy{
    display: none;
  }
  .appearance-control-card--dropdown .appearance-control-label-row{
    margin-bottom: .3rem;
  }
  .appearance-control-card--dropdown .appearance-control-section + .appearance-control-section{
    margin-top: .55rem;
  }
  .appearance-control-card--dropdown .appearance-choice-grid{
    gap: .35rem;
  }
  .appearance-control-card--dropdown .appearance-choice{
    justify-content: center;
    min-height: 2.55rem;
    padding: .42rem .38rem;
    gap: .35rem;
    text-align: center;
  }
  .appearance-control-card--dropdown .appearance-choice-body{
    align-items: center;
  }
  .appearance-control-card--dropdown .appearance-choice-title{
    font-size: .74rem;
  }
  .appearance-control-card--dropdown .appearance-choice-swatch{
    width: .8rem;
    height: .8rem;
    flex-basis: .8rem;
  }
  .appearance-control-card--dropdown .appearance-choice--font{
    min-height: 2.45rem;
    padding: .4rem .2rem;
  }
}

/* App theme surfaces */
html[data-app-theme] body{
  background-color: var(--app-page-bg);
  color: var(--app-text-color);
}
html[data-app-theme] .subnav-wrap{
  background: var(--app-subnav-bg) !important;
  border-bottom: 1px solid var(--app-border-color) !important;
  backdrop-filter: blur(14px);
}
html[data-app-theme] .mobile-topbar{
  background: var(--app-surface) !important;
  border-bottom: 1px solid var(--app-border-color) !important;
}
html[data-app-theme] .app-shell-topbar .navbar-action-link,
html[data-app-theme] .app-shell-topbar .navbar-user-link{
  background: rgba(var(--app-accent-rgb), 0.06);
  box-shadow: inset 0 0 0 1px rgba(var(--app-accent-rgb), 0.08);
}
html[data-app-theme] .app-shell-topbar .navbar-school-context,
html[data-app-theme] .app-shell-topbar .navbar-nav-icons{
  border-color: rgba(var(--app-accent-rgb), 0.15);
  background: linear-gradient(135deg, rgba(var(--app-accent-rgb), 0.1), rgba(var(--app-accent-rgb), 0.03));
}
html[data-app-theme] .app-shell-topbar .navbar-action-link:hover,
html[data-app-theme] .app-shell-topbar .navbar-user-link:hover{
  background: rgba(var(--app-accent-rgb), 0.12);
}
html[data-app-theme] .dropdown-menu{
  background: var(--app-dropdown-bg);
  border-color: var(--app-border-color);
  color: var(--app-text-color);
  box-shadow: var(--app-shadow);
  backdrop-filter: blur(16px);
}
html[data-app-theme] .dropdown-item,
html[data-app-theme] .dropdown-header{
  color: var(--app-text-color);
}
html[data-app-theme] .dropdown-item:hover,
html[data-app-theme] .dropdown-item:focus{
  color: var(--app-text-color);
  background: var(--app-hover-bg);
}
html[data-app-theme] .modal-content,
html[data-app-theme] .offcanvas,
html[data-app-theme] .list-group-item,
html[data-app-theme] .input-group-text{
  background-color: var(--app-surface);
  border-color: var(--app-border-color);
  color: var(--app-text-color);
}
html[data-app-theme] .text-muted,
html[data-app-theme] .text-body-tertiary,
html[data-app-theme] .text-body-quaternary{
  color: var(--app-muted-color) !important;
}
html[data-app-theme] .card,
html[data-app-theme] .card-body,
html[data-app-theme] .card-footer,
html[data-app-theme] .table-responsive{
  color: var(--app-text-color);
}
html[data-app-theme] .card{
  background-color: var(--app-surface);
  border-color: var(--app-border-color);
}
html[data-app-theme] .card-body{
  background-color: inherit;
}
html[data-app-theme] .card-footer{
  background-color: var(--app-surface-muted);
  border-top-color: var(--app-border-color);
}
html[data-app-theme] .table{
  color: var(--app-text-color);
}
html[data-app-theme] .table-responsive{
  background-color: inherit;
  border-color: var(--app-table-shell-border);
}
html[data-app-theme] .bg-light,
html[data-app-theme] .bg-white,
html[data-app-theme] .thead-light,
html[data-app-theme] .table-light{
  background-color: var(--app-surface-muted) !important;
  color: var(--app-text-color) !important;
  border-color: var(--app-border-color) !important;
}
html[data-app-theme] .card-header.bg-light,
html[data-app-theme] .card-header.bg-white,
html[data-app-theme] .card-header.bg-transparent,
html[data-app-theme] .card-header.bg-success-subtle,
html[data-app-theme] .card-header.bg-warning-subtle,
html[data-app-theme] .card-header.bg-info-subtle,
html[data-app-theme] .card-header.bg-primary-subtle,
html[data-app-theme] .card-header.bg-secondary-subtle{
  background-color: var(--app-surface-muted) !important;
  color: var(--app-text-color) !important;
  border-bottom-color: var(--app-border-color) !important;
}
html[data-app-theme='dark'] body,
html[data-app-theme='dark'] .content,
html[data-app-theme='dark'] .main{
  background-color: var(--app-page-bg);
  color: var(--app-text-color);
}
html[data-app-theme='dark'] .card,
html[data-app-theme='dark'] .modal-content,
html[data-app-theme='dark'] .offcanvas,
html[data-app-theme='dark'] .dropdown-menu,
html[data-app-theme='dark'] .list-group-item,
html[data-app-theme='dark'] .form-control,
html[data-app-theme='dark'] .form-select,
html[data-app-theme='dark'] .input-group-text{
  background-color: var(--app-surface) !important;
  border-color: var(--app-border-color) !important;
  color: var(--app-text-color) !important;
}
html[data-app-theme='dark'] .card-header{
  background-color: var(--app-surface-muted) !important;
  color: var(--app-text-color) !important;
  border-bottom-color: var(--app-border-color) !important;
}
html[data-app-theme='dark'] .table thead.sticky-top,
html[data-app-theme='dark'] .table-sticky thead th,
html[data-app-theme='dark'] .table-sticky thead td{
  background: var(--app-surface-muted) !important;
  box-shadow: inset 0 -2px 0 var(--app-table-header-border), 0 2px 6px rgba(0,0,0,.12);
}
html[data-app-theme='dark'] .table-responsive,
html[data-app-theme='dark'] .table > :not(caption) > * > *{
  color: var(--app-text-color) !important;
}
html[data-app-theme='dark'] .table-light > :not(caption) > * > *,
html[data-app-theme='dark'] .thead-light > tr > th,
html[data-app-theme='dark'] .thead-light > tr > td{
  background-color: var(--app-surface-muted) !important;
  color: var(--app-text-color) !important;
}
html[data-app-theme='dark'] .bg-light,
html[data-app-theme='dark'] .bg-white,
html[data-app-theme='dark'] .badge.bg-light,
html[data-app-theme='dark'] .badge.bg-white{
  background-color: var(--app-surface-soft) !important;
  color: var(--app-text-color) !important;
  border-color: var(--app-border-color) !important;
}
html[data-app-theme='dark'] .bg-light.text-dark,
html[data-app-theme='dark'] .bg-white.text-dark{
  color: var(--app-text-color) !important;
}
html[data-app-theme='dark'] .table-bordered th,
html[data-app-theme='dark'] .table-bordered td{
  border-color: var(--app-table-border-color) !important;
}
html[data-app-theme='dark'] body.boxed .container{
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
}

/* Teacher workspace theme compatibility */
html[data-app-theme] .teacher-subjects-page,
html[data-app-theme] .teacher-streams-page,
html[data-app-theme] .teaching-groups-page,
html[data-app-theme] .group-markbook-page,
html[data-app-theme] .teacher-analysis-page,
html[data-app-theme] .teacher-markbook-index,
html[data-app-theme] .markbook{
  --teacher-page-surface: var(--app-surface);
  --teacher-page-surface-muted: var(--app-surface-muted);
  --teacher-page-surface-soft: var(--app-surface-soft);
  --teacher-page-border: var(--app-border-color);
  --teacher-page-text: var(--app-text-color);
  --teacher-page-muted: var(--app-muted-color);
  --teacher-page-pill-bg: rgba(var(--app-accent-rgb), 0.08);
  --teacher-page-pill-border: rgba(var(--app-accent-rgb), 0.18);
  --teacher-page-shell-bg: linear-gradient(135deg, var(--app-surface) 0%, var(--app-surface-muted) 55%, var(--app-surface-soft) 100%);
}
html[data-app-theme] .teacher-subjects-page .card,
html[data-app-theme] .teacher-streams-page .card,
html[data-app-theme] .teaching-groups-page .card,
html[data-app-theme] .group-markbook-page .card,
html[data-app-theme] .teacher-analysis-page .card,
html[data-app-theme] .teacher-analysis-page .section-card,
html[data-app-theme] .teacher-markbook-index .card,
html[data-app-theme] .markbook .card{
  background: var(--teacher-page-surface) !important;
  border-color: var(--teacher-page-border) !important;
  color: var(--teacher-page-text) !important;
}
html[data-app-theme] .teacher-subjects-page .card-header,
html[data-app-theme] .teacher-streams-page .card-header,
html[data-app-theme] .teaching-groups-page .card-header,
html[data-app-theme] .group-markbook-page .card-header,
html[data-app-theme] .teacher-analysis-page .card-header,
html[data-app-theme] .teacher-markbook-index .card-header,
html[data-app-theme] .markbook .card-header{
  background: var(--teacher-page-surface-muted) !important;
  border-color: var(--teacher-page-border) !important;
  color: var(--teacher-page-text) !important;
}
html[data-app-theme] .teacher-subjects-page .card-body,
html[data-app-theme] .teacher-streams-page .card-body,
html[data-app-theme] .teaching-groups-page .card-body,
html[data-app-theme] .group-markbook-page .card-body,
html[data-app-theme] .teacher-analysis-page .card-body,
html[data-app-theme] .teacher-markbook-index .card-body,
html[data-app-theme] .markbook .card-body{
  color: var(--teacher-page-text) !important;
}
html[data-app-theme] .teacher-subjects-page .table-responsive,
html[data-app-theme] .teacher-streams-page .table-responsive,
html[data-app-theme] .teaching-groups-page .table-responsive,
html[data-app-theme] .group-markbook-page .table-responsive,
html[data-app-theme] .teacher-analysis-page .table-responsive,
html[data-app-theme] .teacher-markbook-index .table-responsive,
html[data-app-theme] .markbook .table-responsive{
  background: transparent !important;
}
html[data-app-theme] .teacher-subjects-page .table > :not(caption) > * > *,
html[data-app-theme] .teacher-streams-page .table > :not(caption) > * > *,
html[data-app-theme] .teaching-groups-page .table > :not(caption) > * > *,
html[data-app-theme] .group-markbook-page .table > :not(caption) > * > *,
html[data-app-theme] .teacher-analysis-page .table > :not(caption) > * > *,
html[data-app-theme] .teacher-markbook-index .table > :not(caption) > * > *,
html[data-app-theme] .markbook .table > :not(caption) > * > *{
  border-color: var(--teacher-page-border) !important;
  color: var(--teacher-page-text) !important;
}
html[data-app-theme] .teacher-subjects-page .table > thead > tr > *,
html[data-app-theme] .teacher-subjects-page .table > tfoot > tr > *,
html[data-app-theme] .teacher-streams-page .table > thead > tr > *,
html[data-app-theme] .teacher-streams-page .table > tfoot > tr > *,
html[data-app-theme] .teaching-groups-page .table > thead > tr > *,
html[data-app-theme] .teaching-groups-page .table > tfoot > tr > *,
html[data-app-theme] .group-markbook-page .table > thead > tr > *,
html[data-app-theme] .group-markbook-page .table > tfoot > tr > *,
html[data-app-theme] .teacher-analysis-page .table > thead > tr > *,
html[data-app-theme] .teacher-analysis-page .table > tfoot > tr > *,
html[data-app-theme] .teacher-markbook-index .table > thead > tr > *,
html[data-app-theme] .teacher-markbook-index .table > tfoot > tr > *,
html[data-app-theme] .markbook .table > thead > tr > *,
html[data-app-theme] .markbook .table > tfoot > tr > *{
  background-color: var(--teacher-page-surface-muted) !important;
  color: var(--teacher-page-text) !important;
}
html[data-app-theme] .teacher-subjects-page .table > tbody > tr > *,
html[data-app-theme] .teacher-streams-page .table > tbody > tr > *,
html[data-app-theme] .teaching-groups-page .table > tbody > tr > *,
html[data-app-theme] .group-markbook-page .table > tbody > tr > *,
html[data-app-theme] .teacher-analysis-page .table > tbody > tr > *,
html[data-app-theme] .teacher-markbook-index .table > tbody > tr > *,
html[data-app-theme] .markbook .table > tbody > tr > *{
  background-color: var(--teacher-page-surface) !important;
}
html[data-app-theme] .teacher-subjects-page .table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-app-theme] .teacher-streams-page .table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-app-theme] .teaching-groups-page .table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-app-theme] .group-markbook-page .table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-app-theme] .teacher-analysis-page .table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-app-theme] .teacher-markbook-index .table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-app-theme] .markbook .table-striped > tbody > tr:nth-of-type(odd) > *{
  background-color: var(--app-table-odd-bg) !important;
}
html[data-app-theme] .teacher-subjects-page .table-striped > tbody > tr:nth-of-type(even) > *,
html[data-app-theme] .teacher-streams-page .table-striped > tbody > tr:nth-of-type(even) > *,
html[data-app-theme] .teaching-groups-page .table-striped > tbody > tr:nth-of-type(even) > *,
html[data-app-theme] .group-markbook-page .table-striped > tbody > tr:nth-of-type(even) > *,
html[data-app-theme] .teacher-analysis-page .table-striped > tbody > tr:nth-of-type(even) > *,
html[data-app-theme] .teacher-markbook-index .table-striped > tbody > tr:nth-of-type(even) > *,
html[data-app-theme] .markbook .table-striped > tbody > tr:nth-of-type(even) > *{
  background-color: var(--teacher-page-surface) !important;
}
html[data-app-theme] .teacher-subjects-page .table-hover > tbody > tr:hover > *,
html[data-app-theme] .teacher-streams-page .table-hover > tbody > tr:hover > *,
html[data-app-theme] .teaching-groups-page .table-hover > tbody > tr:hover > *,
html[data-app-theme] .group-markbook-page .table-hover > tbody > tr:hover > *,
html[data-app-theme] .teacher-analysis-page .table-hover > tbody > tr:hover > *,
html[data-app-theme] .teacher-markbook-index .table-hover > tbody > tr:hover > *,
html[data-app-theme] .markbook .table-hover > tbody > tr:hover > *{
  background-color: var(--app-table-hover-bg) !important;
}
html[data-app-theme] .teacher-subjects-page .tg-shell-card,
html[data-app-theme] .teacher-streams-page .teacher-workspace-card,
html[data-app-theme] .teaching-groups-page .tg-shell-card,
html[data-app-theme] .teacher-analysis-page .stat-tile,
html[data-app-theme] .teacher-analysis-page .mini-card,
html[data-app-theme] .teacher-markbook-index .mbk-card,
html[data-app-theme] .teacher-markbook-index .mbk-summary{
  background: var(--teacher-page-shell-bg) !important;
  border-color: var(--teacher-page-border) !important;
  color: var(--teacher-page-text) !important;
}
html[data-app-theme] .teacher-streams-page .workspace-chip,
html[data-app-theme] .teacher-streams-page .workspace-metric,
html[data-app-theme] .teacher-streams-page .card-item,
html[data-app-theme] .teacher-streams-page .meta-pill,
html[data-app-theme] .teaching-groups-page .tg-meta span,
html[data-app-theme] .teaching-groups-page .tg-head-pill,
html[data-app-theme] .teaching-groups-page .tg-stream-pill,
html[data-app-theme] .teacher-subjects-page .badge.bg-light,
html[data-app-theme] .teacher-subjects-page .badge.bg-white,
html[data-app-theme] .teacher-streams-page .badge.bg-light,
html[data-app-theme] .teacher-streams-page .badge.bg-white,
html[data-app-theme] .teaching-groups-page .badge.bg-light,
html[data-app-theme] .teaching-groups-page .badge.bg-white,
html[data-app-theme] .group-markbook-page .badge.bg-light,
html[data-app-theme] .group-markbook-page .badge.bg-white,
html[data-app-theme] .teacher-analysis-page .badge.text-bg-light,
html[data-app-theme] .teacher-markbook-index .badge.bg-light,
html[data-app-theme] .teacher-markbook-index .badge.bg-white,
html[data-app-theme] .markbook .badge.bg-light,
html[data-app-theme] .markbook .badge.bg-white{
  background: var(--teacher-page-pill-bg) !important;
  border-color: var(--teacher-page-pill-border) !important;
  color: var(--teacher-page-text) !important;
}
html[data-app-theme] .teacher-subjects-page .alert-light,
html[data-app-theme] .teacher-streams-page .alert-light,
html[data-app-theme] .teaching-groups-page .alert-light,
html[data-app-theme] .group-markbook-page .alert-light,
html[data-app-theme] .teacher-analysis-page .alert-light,
html[data-app-theme] .teacher-markbook-index .alert-light,
html[data-app-theme] .markbook .alert-light{
  background: var(--teacher-page-surface-muted) !important;
  border-color: var(--teacher-page-border) !important;
  color: var(--teacher-page-text) !important;
}
html[data-app-theme] .teacher-subjects-page .bg-light,
html[data-app-theme] .teacher-subjects-page .bg-white,
html[data-app-theme] .teacher-streams-page .bg-light,
html[data-app-theme] .teacher-streams-page .bg-white,
html[data-app-theme] .teaching-groups-page .bg-light,
html[data-app-theme] .teaching-groups-page .bg-white,
html[data-app-theme] .group-markbook-page .bg-light,
html[data-app-theme] .group-markbook-page .bg-white,
html[data-app-theme] .teacher-analysis-page .bg-light,
html[data-app-theme] .teacher-analysis-page .bg-white,
html[data-app-theme] .teacher-markbook-index .bg-light,
html[data-app-theme] .teacher-markbook-index .bg-white,
html[data-app-theme] .markbook .bg-light,
html[data-app-theme] .markbook .bg-white{
  background-color: var(--teacher-page-surface-muted) !important;
  color: var(--teacher-page-text) !important;
  border-color: var(--teacher-page-border) !important;
}
html[data-app-theme] .teacher-subjects-page .text-muted,
html[data-app-theme] .teacher-streams-page .text-muted,
html[data-app-theme] .teaching-groups-page .text-muted,
html[data-app-theme] .group-markbook-page .text-muted,
html[data-app-theme] .teacher-analysis-page .text-muted,
html[data-app-theme] .teacher-markbook-index .text-muted,
html[data-app-theme] .markbook .text-muted{
  color: var(--teacher-page-muted) !important;
}
html[data-app-theme='dark'] .teacher-subjects-page .table .text-dark:not(.badge),
html[data-app-theme='dark'] .teacher-streams-page .table .text-dark:not(.badge),
html[data-app-theme='dark'] .teaching-groups-page .table .text-dark:not(.badge),
html[data-app-theme='dark'] .group-markbook-page .table .text-dark:not(.badge),
html[data-app-theme='dark'] .teacher-analysis-page .table .text-dark:not(.badge),
html[data-app-theme='dark'] .teacher-markbook-index .table .text-dark:not(.badge),
html[data-app-theme='dark'] .markbook .table .text-dark:not(.badge),
html[data-app-theme='dark'] .teacher-subjects-page .table .text-black:not(.badge),
html[data-app-theme='dark'] .teacher-streams-page .table .text-black:not(.badge),
html[data-app-theme='dark'] .teaching-groups-page .table .text-black:not(.badge),
html[data-app-theme='dark'] .group-markbook-page .table .text-black:not(.badge),
html[data-app-theme='dark'] .teacher-analysis-page .table .text-black:not(.badge),
html[data-app-theme='dark'] .teacher-markbook-index .table .text-black:not(.badge),
html[data-app-theme='dark'] .markbook .table .text-black:not(.badge){
  color: var(--teacher-page-text) !important;
}

html[data-app-theme] .teacher-subjects-page .btn-outline-secondary,
html[data-app-theme] .teacher-streams-page .btn-outline-secondary,
html[data-app-theme] .teaching-groups-page .btn-outline-secondary,
html[data-app-theme] .group-markbook-page .btn-outline-secondary,
html[data-app-theme] .teacher-analysis-page .btn-outline-secondary,
html[data-app-theme] .teacher-markbook-index .btn-outline-secondary,
html[data-app-theme] .markbook .btn-outline-secondary,
html[data-app-theme] .teacher-assessment-page .btn-outline-secondary,
html[data-app-theme] .teacher-assignment-page .btn-outline-secondary,
html[data-app-theme] .teacher-subjects-page .btn-outline-dark,
html[data-app-theme] .teacher-streams-page .btn-outline-dark,
html[data-app-theme] .teaching-groups-page .btn-outline-dark,
html[data-app-theme] .group-markbook-page .btn-outline-dark,
html[data-app-theme] .teacher-analysis-page .btn-outline-dark,
html[data-app-theme] .teacher-markbook-index .btn-outline-dark,
html[data-app-theme] .markbook .btn-outline-dark,
html[data-app-theme] .teacher-assessment-page .btn-outline-dark,
html[data-app-theme] .teacher-assignment-page .btn-outline-dark{
  color: var(--app-accent-strong) !important;
  border-color: rgba(var(--app-accent-rgb), 0.38) !important;
  background-color: rgba(var(--app-accent-rgb), 0.04) !important;
}
html[data-app-theme] .teacher-subjects-page .btn-outline-secondary:hover,
html[data-app-theme] .teacher-streams-page .btn-outline-secondary:hover,
html[data-app-theme] .teaching-groups-page .btn-outline-secondary:hover,
html[data-app-theme] .group-markbook-page .btn-outline-secondary:hover,
html[data-app-theme] .teacher-analysis-page .btn-outline-secondary:hover,
html[data-app-theme] .teacher-markbook-index .btn-outline-secondary:hover,
html[data-app-theme] .markbook .btn-outline-secondary:hover,
html[data-app-theme] .teacher-assessment-page .btn-outline-secondary:hover,
html[data-app-theme] .teacher-assignment-page .btn-outline-secondary:hover,
html[data-app-theme] .teacher-subjects-page .btn-outline-secondary:focus,
html[data-app-theme] .teacher-streams-page .btn-outline-secondary:focus,
html[data-app-theme] .teaching-groups-page .btn-outline-secondary:focus,
html[data-app-theme] .group-markbook-page .btn-outline-secondary:focus,
html[data-app-theme] .teacher-analysis-page .btn-outline-secondary:focus,
html[data-app-theme] .teacher-markbook-index .btn-outline-secondary:focus,
html[data-app-theme] .markbook .btn-outline-secondary:focus,
html[data-app-theme] .teacher-assessment-page .btn-outline-secondary:focus,
html[data-app-theme] .teacher-assignment-page .btn-outline-secondary:focus,
html[data-app-theme] .teacher-subjects-page .btn-outline-dark:hover,
html[data-app-theme] .teacher-streams-page .btn-outline-dark:hover,
html[data-app-theme] .teaching-groups-page .btn-outline-dark:hover,
html[data-app-theme] .group-markbook-page .btn-outline-dark:hover,
html[data-app-theme] .teacher-analysis-page .btn-outline-dark:hover,
html[data-app-theme] .teacher-markbook-index .btn-outline-dark:hover,
html[data-app-theme] .markbook .btn-outline-dark:hover,
html[data-app-theme] .teacher-assessment-page .btn-outline-dark:hover,
html[data-app-theme] .teacher-assignment-page .btn-outline-dark:hover,
html[data-app-theme] .teacher-subjects-page .btn-outline-dark:focus,
html[data-app-theme] .teacher-streams-page .btn-outline-dark:focus,
html[data-app-theme] .teaching-groups-page .btn-outline-dark:focus,
html[data-app-theme] .group-markbook-page .btn-outline-dark:focus,
html[data-app-theme] .teacher-analysis-page .btn-outline-dark:focus,
html[data-app-theme] .teacher-markbook-index .btn-outline-dark:focus,
html[data-app-theme] .markbook .btn-outline-dark:focus,
html[data-app-theme] .teacher-assessment-page .btn-outline-dark:focus,
html[data-app-theme] .teacher-assignment-page .btn-outline-dark:focus{
  color: #fff !important;
  border-color: var(--app-accent) !important;
  background-color: var(--app-accent) !important;
}
html[data-app-theme] .teacher-subjects-page .btn-secondary,
html[data-app-theme] .teacher-streams-page .btn-secondary,
html[data-app-theme] .teaching-groups-page .btn-secondary,
html[data-app-theme] .group-markbook-page .btn-secondary,
html[data-app-theme] .teacher-analysis-page .btn-secondary,
html[data-app-theme] .teacher-markbook-index .btn-secondary,
html[data-app-theme] .markbook .btn-secondary,
html[data-app-theme] .teacher-assessment-page .btn-secondary,
html[data-app-theme] .teacher-assignment-page .btn-secondary,
html[data-app-theme] .teacher-subjects-page .btn-dark,
html[data-app-theme] .teacher-streams-page .btn-dark,
html[data-app-theme] .teaching-groups-page .btn-dark,
html[data-app-theme] .group-markbook-page .btn-dark,
html[data-app-theme] .teacher-analysis-page .btn-dark,
html[data-app-theme] .teacher-markbook-index .btn-dark,
html[data-app-theme] .markbook .btn-dark,
html[data-app-theme] .teacher-assessment-page .btn-dark,
html[data-app-theme] .teacher-assignment-page .btn-dark{
  background-color: var(--app-accent-strong) !important;
  border-color: var(--app-accent-strong) !important;
  color: #fff !important;
}
html[data-app-theme] .teacher-subjects-page .btn-secondary:hover,
html[data-app-theme] .teacher-streams-page .btn-secondary:hover,
html[data-app-theme] .teaching-groups-page .btn-secondary:hover,
html[data-app-theme] .group-markbook-page .btn-secondary:hover,
html[data-app-theme] .teacher-analysis-page .btn-secondary:hover,
html[data-app-theme] .teacher-markbook-index .btn-secondary:hover,
html[data-app-theme] .markbook .btn-secondary:hover,
html[data-app-theme] .teacher-assessment-page .btn-secondary:hover,
html[data-app-theme] .teacher-assignment-page .btn-secondary:hover,
html[data-app-theme] .teacher-subjects-page .btn-secondary:focus,
html[data-app-theme] .teacher-streams-page .btn-secondary:focus,
html[data-app-theme] .teaching-groups-page .btn-secondary:focus,
html[data-app-theme] .group-markbook-page .btn-secondary:focus,
html[data-app-theme] .teacher-analysis-page .btn-secondary:focus,
html[data-app-theme] .teacher-markbook-index .btn-secondary:focus,
html[data-app-theme] .markbook .btn-secondary:focus,
html[data-app-theme] .teacher-assessment-page .btn-secondary:focus,
html[data-app-theme] .teacher-assignment-page .btn-secondary:focus,
html[data-app-theme] .teacher-subjects-page .btn-dark:hover,
html[data-app-theme] .teacher-streams-page .btn-dark:hover,
html[data-app-theme] .teaching-groups-page .btn-dark:hover,
html[data-app-theme] .group-markbook-page .btn-dark:hover,
html[data-app-theme] .teacher-analysis-page .btn-dark:hover,
html[data-app-theme] .teacher-markbook-index .btn-dark:hover,
html[data-app-theme] .markbook .btn-dark:hover,
html[data-app-theme] .teacher-assessment-page .btn-dark:hover,
html[data-app-theme] .teacher-assignment-page .btn-dark:hover,
html[data-app-theme] .teacher-subjects-page .btn-dark:focus,
html[data-app-theme] .teacher-streams-page .btn-dark:focus,
html[data-app-theme] .teaching-groups-page .btn-dark:focus,
html[data-app-theme] .group-markbook-page .btn-dark:focus,
html[data-app-theme] .teacher-analysis-page .btn-dark:focus,
html[data-app-theme] .teacher-markbook-index .btn-dark:focus,
html[data-app-theme] .markbook .btn-dark:focus,
html[data-app-theme] .teacher-assessment-page .btn-dark:focus,
html[data-app-theme] .teacher-assignment-page .btn-dark:focus{
  background-color: var(--app-accent) !important;
  border-color: var(--app-accent) !important;
  color: #fff !important;
}

html[data-app-theme] .teacher-assessment-page,
html[data-app-theme] .teacher-assignment-page{
  --teacher-page-surface: var(--app-surface);
  --teacher-page-surface-muted: var(--app-surface-muted);
  --teacher-page-surface-soft: var(--app-surface-soft);
  --teacher-page-border: var(--app-border-color);
  --teacher-page-text: var(--app-text-color);
  --teacher-page-muted: var(--app-muted-color);
  --teacher-page-pill-bg: rgba(var(--app-accent-rgb), 0.08);
  --teacher-page-pill-border: rgba(var(--app-accent-rgb), 0.18);
  --teacher-page-shell-bg: linear-gradient(135deg, var(--app-surface) 0%, var(--app-surface-muted) 55%, var(--app-surface-soft) 100%);
  --bs-body-bg: var(--app-surface);
  --bs-body-color: var(--app-text-color);
}
html[data-app-theme] .teacher-assessment-page .card,
html[data-app-theme] .teacher-assignment-page .card{
  background: var(--teacher-page-surface) !important;
  border-color: var(--teacher-page-border) !important;
  color: var(--teacher-page-text) !important;
}
html[data-app-theme] .teacher-assessment-page .card-header,
html[data-app-theme] .teacher-assignment-page .card-header{
  background: var(--teacher-page-surface-muted) !important;
  border-color: var(--teacher-page-border) !important;
  color: var(--teacher-page-text) !important;
}
html[data-app-theme] .teacher-assessment-page .card-body,
html[data-app-theme] .teacher-assignment-page .card-body{
  color: var(--teacher-page-text) !important;
}
html[data-app-theme] .teacher-assessment-page .table-responsive,
html[data-app-theme] .teacher-assignment-page .table-responsive{
  background: transparent !important;
}
html[data-app-theme] .teacher-assessment-page .table > :not(caption) > * > *,
html[data-app-theme] .teacher-assignment-page .table > :not(caption) > * > *{
  border-color: var(--teacher-page-border) !important;
  color: var(--teacher-page-text) !important;
}
html[data-app-theme] .teacher-assessment-page .table > thead > tr > *,
html[data-app-theme] .teacher-assessment-page .table > tfoot > tr > *,
html[data-app-theme] .teacher-assignment-page .table > thead > tr > *,
html[data-app-theme] .teacher-assignment-page .table > tfoot > tr > *{
  background-color: var(--teacher-page-surface-muted) !important;
  color: var(--teacher-page-text) !important;
}
html[data-app-theme] .teacher-assessment-page .table > tbody > tr > *,
html[data-app-theme] .teacher-assignment-page .table > tbody > tr > *{
  background-color: var(--teacher-page-surface) !important;
}
html[data-app-theme] .teacher-assessment-page .table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-app-theme] .teacher-assignment-page .table-striped > tbody > tr:nth-of-type(odd) > *{
  background-color: var(--app-table-odd-bg) !important;
}
html[data-app-theme] .teacher-assessment-page .table-striped > tbody > tr:nth-of-type(even) > *,
html[data-app-theme] .teacher-assignment-page .table-striped > tbody > tr:nth-of-type(even) > *{
  background-color: var(--teacher-page-surface) !important;
}
html[data-app-theme] .teacher-assessment-page .table-hover > tbody > tr:hover > *,
html[data-app-theme] .teacher-assignment-page .table-hover > tbody > tr:hover > *{
  background-color: var(--app-table-hover-bg) !important;
}
html[data-app-theme] .teacher-assessment-page .list-group-item,
html[data-app-theme] .teacher-assignment-page .list-group-item{
  background: var(--teacher-page-surface) !important;
  border-color: var(--teacher-page-border) !important;
  color: var(--teacher-page-text) !important;
}
html[data-app-theme] .teacher-assessment-page .bg-light,
html[data-app-theme] .teacher-assessment-page .bg-white,
html[data-app-theme] .teacher-assessment-page .border.rounded,
html[data-app-theme] .teacher-assignment-page .bg-light,
html[data-app-theme] .teacher-assignment-page .bg-white,
html[data-app-theme] .teacher-assignment-page .border.rounded{
  background-color: var(--teacher-page-surface-muted) !important;
  border-color: var(--teacher-page-border) !important;
  color: var(--teacher-page-text) !important;
}
html[data-app-theme] .teacher-assessment-page .alert-light,
html[data-app-theme] .teacher-assignment-page .alert-light{
  background: var(--teacher-page-surface-muted) !important;
  border-color: var(--teacher-page-border) !important;
  color: var(--teacher-page-text) !important;
}
html[data-app-theme] .teacher-assessment-page .alert-info,
html[data-app-theme] .teacher-assignment-page .alert-info{
  background: rgba(var(--app-accent-rgb), 0.1) !important;
  border-color: rgba(var(--app-accent-rgb), 0.24) !important;
  color: var(--teacher-page-text) !important;
}
html[data-app-theme] .teacher-assessment-page .text-muted,
html[data-app-theme] .teacher-assignment-page .text-muted{
  color: var(--teacher-page-muted) !important;
}
html[data-app-theme] .teacher-assessment-page .bulk-assess-table .sticky-left-0,
html[data-app-theme] .teacher-assessment-page .bulk-assess-table .sticky-left-1,
html[data-app-theme] .teacher-assessment-page .bulk-assess-table .bg-body{
  background: var(--teacher-page-surface) !important;
  color: var(--teacher-page-text) !important;
}
html[data-app-theme] .teacher-assessment-page .bulk-assess-table thead .sticky-left-0,
html[data-app-theme] .teacher-assessment-page .bulk-assess-table thead .sticky-left-1{
  background: var(--teacher-page-surface-muted) !important;
}
html[data-app-theme] .teacher-assessment-page .bulk-assess-table.table-striped > tbody > tr:nth-of-type(odd) > .sticky-left-0,
html[data-app-theme] .teacher-assessment-page .bulk-assess-table.table-striped > tbody > tr:nth-of-type(odd) > .sticky-left-1{
  background: var(--app-table-odd-bg) !important;
}
html[data-app-theme] .teacher-assessment-page .bulk-assess-table.table-striped > tbody > tr:nth-of-type(even) > .sticky-left-0,
html[data-app-theme] .teacher-assessment-page .bulk-assess-table.table-striped > tbody > tr:nth-of-type(even) > .sticky-left-1{
  background: var(--teacher-page-surface) !important;
}
html[data-app-theme] .teacher-assessment-page .bulk-assess-table tbody tr.is-selected{
  outline-color: rgba(var(--app-accent-rgb), 0.34);
}
html[data-app-theme='dark'] .teacher-assessment-page .table .text-dark:not(.badge),
html[data-app-theme='dark'] .teacher-assignment-page .table .text-dark:not(.badge),
html[data-app-theme='dark'] .teacher-assessment-page .table .text-black:not(.badge),
html[data-app-theme='dark'] .teacher-assignment-page .table .text-black:not(.badge){
  color: var(--teacher-page-text) !important;
}

/* Class management theme compatibility */
html[data-app-theme] .manage-classes-simple,
html[data-app-theme] .assign-stream-page,
html[data-app-theme] .add-stream-page,
html[data-app-theme] .manage-class-page{
  --class-page-surface: var(--app-surface);
  --class-page-surface-muted: var(--app-surface-muted);
  --class-page-surface-soft: var(--app-surface-soft);
  --class-page-border: var(--app-border-color);
  --class-page-text: var(--app-text-color);
  --class-page-muted: var(--app-muted-color);
  --class-page-pill-bg: rgba(var(--app-accent-rgb), 0.1);
  --class-page-pill-bg-strong: rgba(var(--app-accent-rgb), 0.16);
  --class-page-pill-border: rgba(var(--app-accent-rgb), 0.24);
  --class-page-shell-bg: linear-gradient(135deg, var(--app-surface) 0%, var(--app-surface-muted) 56%, var(--app-surface-soft) 100%);
  --class-page-row-odd: var(--app-surface);
  --class-page-row-even: var(--app-table-odd-bg);
  --class-page-row-hover: var(--app-table-hover-bg);
}
html[data-app-theme] .manage-classes-simple,
html[data-app-theme] .assign-stream-page,
html[data-app-theme] .add-stream-page{
  background: var(--class-page-shell-bg) !important;
  color: var(--class-page-text) !important;
}
html[data-app-theme] .manage-classes-simple .card,
html[data-app-theme] .assign-stream-page .card,
html[data-app-theme] .add-stream-page .card,
html[data-app-theme] .manage-class-page .card{
  background: var(--class-page-surface) !important;
  border-color: var(--class-page-border) !important;
  color: var(--class-page-text) !important;
  box-shadow: var(--app-shadow) !important;
}
html[data-app-theme] .manage-classes-simple .card-header,
html[data-app-theme] .assign-stream-page .card-header,
html[data-app-theme] .add-stream-page .card-header,
html[data-app-theme] .manage-class-page .card-header,
html[data-app-theme] .manage-classes-simple .compact-summary,
html[data-app-theme] .assign-stream-page .compact-summary{
  background: var(--class-page-surface-muted) !important;
  border-color: var(--class-page-border) !important;
  color: var(--class-page-text) !important;
}
html[data-app-theme] .manage-classes-simple .card-body,
html[data-app-theme] .assign-stream-page .card-body,
html[data-app-theme] .add-stream-page .card-body,
html[data-app-theme] .manage-class-page .card-body{
  color: var(--class-page-text) !important;
}
html[data-app-theme] .manage-classes-simple .summary-strip-card,
html[data-app-theme] .assign-stream-page .compact-head,
html[data-app-theme] .assign-stream-page .class-master-panel,
html[data-app-theme] .add-stream-page .compact-head,
html[data-app-theme] .manage-class-page .compact-top-card,
html[data-app-theme] .manage-class-page .compact-stream-nav{
  background: var(--class-page-shell-bg) !important;
  border-color: var(--class-page-border) !important;
}
html[data-app-theme] .manage-classes-simple .page-title,
html[data-app-theme] .assign-stream-page .head-title,
html[data-app-theme] .assign-stream-page .section-title,
html[data-app-theme] .assign-stream-page .subject-picker-title,
html[data-app-theme] .assign-stream-page .subject-section-title,
html[data-app-theme] .assign-stream-page .subject-group-title,
html[data-app-theme] .add-stream-page .head-title,
html[data-app-theme] .add-stream-page .section-title,
html[data-app-theme] .add-stream-page .subject-picker-title,
html[data-app-theme] .add-stream-page .subject-section-title,
html[data-app-theme] .manage-classes-simple .class-name-main,
html[data-app-theme] .manage-class-page .compact-title,
html[data-app-theme] .manage-class-page .subject-name-short,
html[data-app-theme] .manage-class-page .stream-subject-card .form-check-label{
  color: var(--class-page-text) !important;
}
html[data-app-theme] .manage-classes-simple .summary-strip,
html[data-app-theme] .manage-classes-simple .class-name-sub,
html[data-app-theme] .manage-classes-simple .summary-strip .divider,
html[data-app-theme] .assign-stream-page .head-kicker,
html[data-app-theme] .assign-stream-page .section-kicker,
html[data-app-theme] .assign-stream-page .subject-group-meta,
html[data-app-theme] .assign-stream-page .subject-group-mode-note,
html[data-app-theme] .assign-stream-page .group-inline-note,
html[data-app-theme] .assign-stream-page .group-stream-empty,
html[data-app-theme] .assign-stream-page .empty-box,
html[data-app-theme] .assign-stream-page .scope-note,
html[data-app-theme] .add-stream-page .head-kicker,
html[data-app-theme] .add-stream-page .section-kicker,
html[data-app-theme] .add-stream-page .empty-box,
html[data-app-theme] .manage-class-page .compact-kicker,
html[data-app-theme] .manage-class-page .stream-subject-card .subject-card-state,
html[data-app-theme] .manage-class-page .stream-subject-card .subject-meta{
  color: var(--class-page-muted) !important;
}
html[data-app-theme] .manage-classes-simple .summary-strip strong{
  color: var(--class-page-text) !important;
}
html[data-app-theme] .manage-classes-simple .head-chip,
html[data-app-theme] .manage-classes-simple .summary-pill,
html[data-app-theme] .assign-stream-page .head-chip,
html[data-app-theme] .assign-stream-page .summary-pill,
html[data-app-theme] .assign-stream-page .subject-meta-pill,
html[data-app-theme] .assign-stream-page .stream-no,
html[data-app-theme] .assign-stream-page .group-slot-pill,
html[data-app-theme] .add-stream-page .head-chip,
html[data-app-theme] .add-stream-page .summary-pill,
html[data-app-theme] .add-stream-page .stream-no,
html[data-app-theme] .manage-classes-simple .stage-badge,
html[data-app-theme] .manage-class-page .compact-title-line .stream-pill,
html[data-app-theme] .manage-class-page .stream-subject-card--current{
  background: var(--class-page-pill-bg) !important;
  border-color: var(--class-page-pill-border) !important;
  color: var(--app-accent-strong) !important;
}
html[data-app-theme] .manage-classes-simple .count-badge-stream,
html[data-app-theme] .assign-stream-page .count-badge-stream{
  background: var(--app-accent) !important;
}
html[data-app-theme] .manage-classes-simple .count-badge-student,
html[data-app-theme] .assign-stream-page .count-badge-student{
  background: var(--app-accent-strong) !important;
}
html[data-app-theme] .manage-classes-simple .count-badge,
html[data-app-theme] .assign-stream-page .count-badge{
  color: #fff !important;
}
html[data-app-theme] .manage-classes-simple .badge.bg-light,
html[data-app-theme] .manage-classes-simple .badge.bg-white,
html[data-app-theme] .manage-classes-simple .badge.bg-success-subtle,
html[data-app-theme] .manage-classes-simple .badge.bg-secondary-subtle,
html[data-app-theme] .manage-classes-simple .badge.bg-warning-subtle,
html[data-app-theme] .assign-stream-page .badge.bg-light,
html[data-app-theme] .assign-stream-page .badge.bg-white,
html[data-app-theme] .assign-stream-page .badge.bg-success-subtle,
html[data-app-theme] .assign-stream-page .badge.bg-secondary-subtle,
html[data-app-theme] .assign-stream-page .badge.bg-warning-subtle,
html[data-app-theme] .add-stream-page .badge.bg-light,
html[data-app-theme] .add-stream-page .badge.bg-white,
html[data-app-theme] .manage-class-page .badge.bg-light,
html[data-app-theme] .manage-class-page .badge.bg-white,
html[data-app-theme] .manage-class-page .badge.bg-success-subtle,
html[data-app-theme] .manage-class-page .badge.bg-secondary-subtle,
html[data-app-theme] .manage-class-page .badge.bg-warning-subtle{
  background: var(--class-page-pill-bg) !important;
  border-color: var(--class-page-pill-border) !important;
  color: var(--class-page-text) !important;
}
html[data-app-theme] .manage-classes-simple .classes-table-wrap,
html[data-app-theme] .assign-stream-page .stream-table-wrap,
html[data-app-theme] .assign-stream-page .subject-group-table-wrap,
html[data-app-theme] .add-stream-page .setup-panel,
html[data-app-theme] .assign-stream-page .setup-panel,
html[data-app-theme] .assign-stream-page .subject-group-card,
html[data-app-theme] .assign-stream-page .subject-group-row,
html[data-app-theme] .assign-stream-page .subject-group-mode-box,
html[data-app-theme] .assign-stream-page .group-stream-menu,
html[data-app-theme] .assign-stream-page .scope-note,
html[data-app-theme] .assign-stream-page .empty-box,
html[data-app-theme] .add-stream-page .empty-box,
html[data-app-theme] .manage-classes-simple .compact-section,
html[data-app-theme] .manage-class-page .stream-subject-card{
  background: var(--class-page-surface) !important;
  border-color: var(--class-page-border) !important;
  color: var(--class-page-text) !important;
}
html[data-app-theme] .manage-class-page .stream-subject-card,
html[data-app-theme] .assign-stream-page .subject-group-card,
html[data-app-theme] .assign-stream-page .subject-group-row,
html[data-app-theme] .assign-stream-page .setup-panel,
html[data-app-theme] .add-stream-page .setup-panel{
  box-shadow: var(--app-shadow) !important;
}
html[data-app-theme] .manage-classes-simple .classes-table thead th,
html[data-app-theme] .assign-stream-page .stream-table thead th,
html[data-app-theme] .assign-stream-page .subject-group-table thead th,
html[data-app-theme] .manage-class-page .teacher-manager-table thead th,
html[data-app-theme] .manage-class-page .teacher-manager-table .sticky-subject-head{
  background: var(--class-page-surface-muted) !important;
  border-color: var(--class-page-border) !important;
  color: var(--class-page-text) !important;
}
html[data-app-theme] .manage-classes-simple .classes-table td,
html[data-app-theme] .assign-stream-page .stream-table td,
html[data-app-theme] .assign-stream-page .subject-group-table td,
html[data-app-theme] .manage-class-page .teacher-manager-table td{
  border-color: var(--class-page-border) !important;
  color: var(--class-page-text) !important;
}
html[data-app-theme] .manage-classes-simple .classes-table tbody tr:nth-child(odd) td,
html[data-app-theme] .assign-stream-page .stream-table tbody tr:nth-child(odd) td,
html[data-app-theme] .assign-stream-page .subject-group-table tbody tr:nth-child(odd) td{
  background: var(--class-page-row-odd) !important;
}
html[data-app-theme] .manage-classes-simple .classes-table tbody tr:nth-child(even) td,
html[data-app-theme] .assign-stream-page .stream-table tbody tr:nth-child(even) td,
html[data-app-theme] .assign-stream-page .subject-group-table tbody tr:nth-child(even) td{
  background: var(--class-page-row-even) !important;
}
html[data-app-theme] .manage-class-page .teacher-manager-table{
  --teacher-row-odd: var(--class-page-row-odd) !important;
  --teacher-row-even: var(--class-page-row-even) !important;
  --teacher-row-hover: var(--class-page-row-hover) !important;
}
html[data-app-theme] .manage-class-page .teacher-manager-table,
html[data-app-theme] .manage-class-page .teacher-manager-table > tbody > tr > td,
html[data-app-theme] .manage-class-page .teacher-manager-table > tbody > tr:nth-of-type(odd) > .sticky-subject-cell,
html[data-app-theme] .manage-class-page .teacher-manager-table > tbody > tr:nth-of-type(even) > .sticky-subject-cell{
  color: var(--class-page-text) !important;
}
html[data-app-theme] .manage-class-page .teacher-manager-table .sticky-subject-cell,
html[data-app-theme] .manage-class-page .teacher-manager-table .sticky-subject-head{
  box-shadow: 1px 0 0 var(--class-page-border) !important;
}
html[data-app-theme] .manage-class-page .teacher-manager-table .subject-name-full,
html[data-app-theme] .manage-class-page .teacher-manager-table .subject-name-short{
  color: var(--class-page-text) !important;
}
html[data-app-theme] .assign-stream-page .subject-row,
html[data-app-theme] .assign-stream-page .compact-row,
html[data-app-theme] .add-stream-page .subject-row{
  background: transparent !important;
  border-color: var(--class-page-border) !important;
}
html[data-app-theme] .assign-stream-page .subject-row:hover,
html[data-app-theme] .assign-stream-page .compact-row:hover,
html[data-app-theme] .add-stream-page .subject-row:hover{
  background: var(--app-hover-bg) !important;
}
html[data-app-theme] .assign-stream-page .subject-row.is-selected,
html[data-app-theme] .assign-stream-page .compact-row.is-selected,
html[data-app-theme] .add-stream-page .subject-row.is-selected,
html[data-app-theme] .manage-class-page .stream-subject-card--current{
  background: var(--class-page-pill-bg) !important;
}
html[data-app-theme] .manage-class-page .stream-subject-card:hover{
  background: var(--class-page-surface-soft) !important;
}
html[data-app-theme] .assign-stream-page .subject-name,
html[data-app-theme] .assign-stream-page .group-name-text,
html[data-app-theme] .add-stream-page .subject-name{
  color: var(--class-page-text) !important;
}
html[data-app-theme] .assign-stream-page .group-stream-toggle,
html[data-app-theme] .assign-stream-page .subject-group-table .group-stream-toggle{
  background: var(--class-page-surface) !important;
  border-color: var(--class-page-border) !important;
  color: var(--class-page-text) !important;
}
html[data-app-theme] .assign-stream-page .group-stream-option:hover,
html[data-app-theme] .assign-stream-page .subject-group-table .group-stream-option:hover{
  background: var(--app-hover-bg) !important;
}
html[data-app-theme] .assign-stream-page .group-stream-dropdown[open] .group-stream-toggle,
html[data-app-theme] .assign-stream-page .subject-group-table .group-stream-dropdown[open] .group-stream-toggle{
  border-color: rgba(var(--app-accent-rgb), 0.36) !important;
}
html[data-app-theme] .manage-classes-simple .compact-row,
html[data-app-theme] .assign-stream-page .compact-row{
  border-color: var(--class-page-border) !important;
}
html[data-app-theme] .manage-classes-simple .alert-light,
html[data-app-theme] .assign-stream-page .alert-light,
html[data-app-theme] .add-stream-page .alert-light,
html[data-app-theme] .manage-class-page .alert-light{
  background: var(--class-page-surface-muted) !important;
  border-color: var(--class-page-border) !important;
  color: var(--class-page-text) !important;
}
html[data-app-theme] .manage-classes-simple .text-muted,
html[data-app-theme] .assign-stream-page .text-muted,
html[data-app-theme] .add-stream-page .text-muted,
html[data-app-theme] .manage-class-page .text-muted{
  color: var(--class-page-muted) !important;
}
html[data-app-theme='dark'] .manage-classes-simple .text-dark:not(.badge),
html[data-app-theme='dark'] .assign-stream-page .text-dark:not(.badge),
html[data-app-theme='dark'] .add-stream-page .text-dark:not(.badge),
html[data-app-theme='dark'] .manage-class-page .text-dark:not(.badge),
html[data-app-theme='dark'] .manage-classes-simple .text-black:not(.badge),
html[data-app-theme='dark'] .assign-stream-page .text-black:not(.badge),
html[data-app-theme='dark'] .add-stream-page .text-black:not(.badge),
html[data-app-theme='dark'] .manage-class-page .text-black:not(.badge){
  color: var(--class-page-text) !important;
}
html[data-app-theme] .manage-classes-simple .btn-outline-secondary,
html[data-app-theme] .assign-stream-page .btn-outline-secondary,
html[data-app-theme] .add-stream-page .btn-outline-secondary,
html[data-app-theme] .manage-class-page .btn-outline-secondary,
html[data-app-theme] .manage-classes-simple .btn-outline-dark,
html[data-app-theme] .assign-stream-page .btn-outline-dark,
html[data-app-theme] .add-stream-page .btn-outline-dark,
html[data-app-theme] .manage-class-page .btn-outline-dark{
  color: var(--app-accent-strong) !important;
  border-color: rgba(var(--app-accent-rgb), 0.38) !important;
  background-color: rgba(var(--app-accent-rgb), 0.04) !important;
}
html[data-app-theme] .manage-classes-simple .btn-outline-secondary:hover,
html[data-app-theme] .assign-stream-page .btn-outline-secondary:hover,
html[data-app-theme] .add-stream-page .btn-outline-secondary:hover,
html[data-app-theme] .manage-class-page .btn-outline-secondary:hover,
html[data-app-theme] .manage-classes-simple .btn-outline-secondary:focus,
html[data-app-theme] .assign-stream-page .btn-outline-secondary:focus,
html[data-app-theme] .add-stream-page .btn-outline-secondary:focus,
html[data-app-theme] .manage-class-page .btn-outline-secondary:focus,
html[data-app-theme] .manage-classes-simple .btn-outline-dark:hover,
html[data-app-theme] .assign-stream-page .btn-outline-dark:hover,
html[data-app-theme] .add-stream-page .btn-outline-dark:hover,
html[data-app-theme] .manage-class-page .btn-outline-dark:hover,
html[data-app-theme] .manage-classes-simple .btn-outline-dark:focus,
html[data-app-theme] .assign-stream-page .btn-outline-dark:focus,
html[data-app-theme] .add-stream-page .btn-outline-dark:focus,
html[data-app-theme] .manage-class-page .btn-outline-dark:focus{
  color: #fff !important;
  border-color: var(--app-accent) !important;
  background-color: var(--app-accent) !important;
}
html[data-app-theme] .manage-classes-simple .btn-secondary,
html[data-app-theme] .assign-stream-page .btn-secondary,
html[data-app-theme] .add-stream-page .btn-secondary,
html[data-app-theme] .manage-class-page .btn-secondary,
html[data-app-theme] .manage-classes-simple .btn-dark,
html[data-app-theme] .assign-stream-page .btn-dark,
html[data-app-theme] .add-stream-page .btn-dark,
html[data-app-theme] .manage-class-page .btn-dark{
  background-color: var(--app-accent-strong) !important;
  border-color: var(--app-accent-strong) !important;
  color: #fff !important;
}
html[data-app-theme] .manage-classes-simple .btn-secondary:hover,
html[data-app-theme] .assign-stream-page .btn-secondary:hover,
html[data-app-theme] .add-stream-page .btn-secondary:hover,
html[data-app-theme] .manage-class-page .btn-secondary:hover,
html[data-app-theme] .manage-classes-simple .btn-secondary:focus,
html[data-app-theme] .assign-stream-page .btn-secondary:focus,
html[data-app-theme] .add-stream-page .btn-secondary:focus,
html[data-app-theme] .manage-class-page .btn-secondary:focus,
html[data-app-theme] .manage-classes-simple .btn-dark:hover,
html[data-app-theme] .assign-stream-page .btn-dark:hover,
html[data-app-theme] .add-stream-page .btn-dark:hover,
html[data-app-theme] .manage-class-page .btn-dark:hover,
html[data-app-theme] .manage-classes-simple .btn-dark:focus,
html[data-app-theme] .assign-stream-page .btn-dark:focus,
html[data-app-theme] .add-stream-page .btn-dark:focus,
html[data-app-theme] .manage-class-page .btn-dark:focus{
  background-color: var(--app-accent) !important;
  border-color: var(--app-accent) !important;
  color: #fff !important;
}

/* Dark-mode font color fallback for common content surfaces */
html[data-app-theme='dark'] .content .card .text-dark:not(.badge):not(.btn):not(.nav-link),
html[data-app-theme='dark'] .content .card .text-black:not(.badge):not(.btn):not(.nav-link),
html[data-app-theme='dark'] .content .table .text-dark:not(.badge):not(.btn):not(.nav-link),
html[data-app-theme='dark'] .content .table .text-black:not(.badge):not(.btn):not(.nav-link),
html[data-app-theme='dark'] .content .list-group-item .text-dark:not(.badge):not(.btn):not(.nav-link),
html[data-app-theme='dark'] .content .list-group-item .text-black:not(.badge):not(.btn):not(.nav-link),
html[data-app-theme='dark'] .content .modal-content .text-dark:not(.badge):not(.btn):not(.nav-link),
html[data-app-theme='dark'] .content .modal-content .text-black:not(.badge):not(.btn):not(.nav-link),
html[data-app-theme='dark'] .content .dropdown-menu .text-dark:not(.badge):not(.btn):not(.nav-link),
html[data-app-theme='dark'] .content .dropdown-menu .text-black:not(.badge):not(.btn):not(.nav-link){
  color: var(--app-text-color) !important;
}

/* Home dashboard theme compatibility */
html[data-app-theme] .school-admin-dashboard{
  --home-page-surface: var(--app-surface);
  --home-page-surface-muted: var(--app-surface-muted);
  --home-page-surface-soft: var(--app-surface-soft);
  --home-page-border: var(--app-border-color);
  --home-page-text: var(--app-text-color);
  --home-page-muted: var(--app-muted-color);
  --home-page-shell-bg: linear-gradient(135deg, var(--app-surface) 0%, var(--app-surface-muted) 55%, var(--app-surface-soft) 100%);
  color: var(--home-page-text);
}
html[data-app-theme] .school-admin-dashboard .card,
html[data-app-theme] .school-admin-dashboard .hero-panel,
html[data-app-theme] .school-admin-dashboard .quick-link-card,
html[data-app-theme] .school-admin-dashboard .pipeline-item,
html[data-app-theme] .school-admin-dashboard .notice-item{
  background: var(--home-page-surface) !important;
  color: var(--home-page-text) !important;
  border-color: var(--home-page-border) !important;
}
html[data-app-theme] .school-admin-dashboard .card-header,
html[data-app-theme] .school-admin-dashboard .card-body{
  color: inherit !important;
  border-color: var(--home-page-border) !important;
}
html[data-app-theme] .school-admin-dashboard .school-admin-hero{
  background: var(--home-page-shell-bg) !important;
  border-color: var(--home-page-border) !important;
}
html[data-app-theme] .school-admin-dashboard .analysis-card .row.g-2 > [class*='col-'],
html[data-app-theme] .school-admin-dashboard .hero-panel,
html[data-app-theme] .school-admin-dashboard .notice-board-card .card-header,
html[data-app-theme] .school-admin-dashboard .notice-board-card .card-body{
  background: var(--home-page-surface-muted) !important;
}
html[data-app-theme] .school-admin-dashboard .dashboard-title,
html[data-app-theme] .school-admin-dashboard .stat-value,
html[data-app-theme] .school-admin-dashboard .quick-link-card .title,
html[data-app-theme] .school-admin-dashboard .pipeline-item .title,
html[data-app-theme] .school-admin-dashboard .notice-item__title,
html[data-app-theme] .school-admin-dashboard .hero-panel-item .value,
html[data-app-theme] .school-admin-dashboard .card h5,
html[data-app-theme] .school-admin-dashboard .card h6{
  color: var(--home-page-text) !important;
}
html[data-app-theme] .school-admin-dashboard .dashboard-lead,
html[data-app-theme] .school-admin-dashboard .hero-panel-label,
html[data-app-theme] .school-admin-dashboard .hero-panel-item .label,
html[data-app-theme] .school-admin-dashboard .analysis-card .row.g-2 .small,
html[data-app-theme] .school-admin-dashboard .quick-link-card .meta,
html[data-app-theme] .school-admin-dashboard .pipeline-item .meta,
html[data-app-theme] .school-admin-dashboard .notice-item__message,
html[data-app-theme] .school-admin-dashboard .text-muted{
  color: var(--home-page-muted) !important;
}
html[data-app-theme] .school-admin-dashboard .dashboard-eyebrow,
html[data-app-theme] .school-admin-dashboard .section-eyebrow,
html[data-app-theme] .school-admin-dashboard .notice-board-pill,
html[data-app-theme] .school-admin-dashboard .dashboard-chip,
html[data-app-theme] .school-admin-dashboard .pipeline-item .step,
html[data-app-theme] .school-admin-dashboard .notice-state--scheduled,
html[data-app-theme] .school-admin-dashboard .notice-countdown{
  background: rgba(var(--app-accent-rgb), 0.12) !important;
  color: var(--app-accent-strong) !important;
  border-color: rgba(var(--app-accent-rgb), 0.22) !important;
}
html[data-app-theme] .school-admin-dashboard .notice-state--due,
html[data-app-theme] .school-admin-dashboard .notice-countdown.is-due{
  background: rgba(220, 53, 69, 0.14) !important;
  color: #c34a4a !important;
  border-color: rgba(220, 53, 69, 0.22) !important;
}
html[data-app-theme] .school-admin-dashboard .notice-state--published,
html[data-app-theme] .school-admin-dashboard .notice-countdown--published{
  background: rgba(25, 135, 84, 0.14) !important;
  color: #2f9b62 !important;
  border-color: rgba(25, 135, 84, 0.22) !important;
}
html[data-app-theme] .school-admin-dashboard .notice-item:hover,
html[data-app-theme] .school-admin-dashboard .quick-link-card:hover,
html[data-app-theme] .school-admin-dashboard .pipeline-item:hover{
  background: var(--app-hover-bg) !important;
  border-color: rgba(var(--app-accent-rgb), 0.24) !important;
}
html[data-app-theme] .school-admin-dashboard .btn-outline-dark,
html[data-app-theme] .school-admin-dashboard .btn-outline-secondary{
  color: var(--app-accent-strong) !important;
  border-color: rgba(var(--app-accent-rgb), 0.38) !important;
  background-color: rgba(var(--app-accent-rgb), 0.04) !important;
}
html[data-app-theme] .school-admin-dashboard .btn-outline-dark:hover,
html[data-app-theme] .school-admin-dashboard .btn-outline-dark:focus,
html[data-app-theme] .school-admin-dashboard .btn-outline-secondary:hover,
html[data-app-theme] .school-admin-dashboard .btn-outline-secondary:focus{
  color: #fff !important;
  border-color: var(--app-accent) !important;
  background-color: var(--app-accent) !important;
}
html[data-app-theme] .school-admin-dashboard .btn-dark,
html[data-app-theme] .school-admin-dashboard .btn-secondary{
  background-color: var(--app-accent-strong) !important;
  border-color: var(--app-accent-strong) !important;
  color: #fff !important;
}
html[data-app-theme] .school-admin-dashboard .btn-dark:hover,
html[data-app-theme] .school-admin-dashboard .btn-dark:focus,
html[data-app-theme] .school-admin-dashboard .btn-secondary:hover,
html[data-app-theme] .school-admin-dashboard .btn-secondary:focus{
  background-color: var(--app-accent) !important;
  border-color: var(--app-accent) !important;
  color: #fff !important;
}
html[data-app-theme='dark'] .school-admin-dashboard .text-dark:not(.badge):not(.btn),
html[data-app-theme='dark'] .school-admin-dashboard .text-black:not(.badge):not(.btn){
  color: var(--home-page-text) !important;
}

/* Teachers admin page theme compatibility */
html[data-app-theme] .admin-teachers-page{
  --admin-teachers-surface: var(--app-surface);
  --admin-teachers-surface-muted: var(--app-surface-muted);
  --admin-teachers-border: var(--app-border-color);
  --admin-teachers-text: var(--app-text-color);
  --admin-teachers-muted: var(--app-muted-color);
  color: var(--admin-teachers-text);
}
html[data-app-theme] .admin-teachers-page .teacher-profile,
html[data-app-theme] .admin-teachers-page .table-responsive,
html[data-app-theme] .admin-teachers-page .teachers-table{
  background: var(--admin-teachers-surface) !important;
  color: var(--admin-teachers-text) !important;
  border-color: var(--admin-teachers-border) !important;
}
html[data-app-theme] .admin-teachers-page .teachers-table > :not(caption) > * > *{
  border-color: var(--admin-teachers-border) !important;
}
html[data-app-theme] .admin-teachers-page .teachers-table thead th{
  background: var(--admin-teachers-surface-muted) !important;
  color: var(--admin-teachers-text) !important;
}
html[data-app-theme] .admin-teachers-page .teachers-table.table-striped > tbody > tr:nth-of-type(odd) > *{
  background: var(--app-table-odd-bg) !important;
  color: var(--admin-teachers-text) !important;
}
html[data-app-theme] .admin-teachers-page .teachers-table.table-striped > tbody > tr:nth-of-type(even) > *{
  background: var(--admin-teachers-surface) !important;
  color: var(--admin-teachers-text) !important;
}
html[data-app-theme] .admin-teachers-page .teachers-table.table-hover > tbody > tr:hover > *{
  background: var(--app-table-hover-bg) !important;
}
html[data-app-theme] .admin-teachers-page h3.text-primary,
html[data-app-theme] .admin-teachers-page .teacher-name,
html[data-app-theme] .admin-teachers-page .phone-link{
  color: var(--app-accent-strong) !important;
}
html[data-app-theme] .admin-teachers-page .text-muted,
html[data-app-theme] .admin-teachers-page .card-text{
  color: var(--admin-teachers-muted) !important;
}
html[data-app-theme] .admin-teachers-page .profile-pic img,
html[data-app-theme] .admin-teachers-page .avatar-fallback,
html[data-app-theme] .admin-teachers-page .teacher-table-avatar,
html[data-app-theme] .admin-teachers-page .teacher-table-avatar-fallback{
  border-color: var(--admin-teachers-border) !important;
}
html[data-app-theme] .admin-teachers-page .teacher-table-avatar-fallback{
  background: var(--admin-teachers-surface-muted) !important;
}
html[data-app-theme] .admin-teachers-page .role-badge-table{
  border: 1px solid rgba(var(--app-accent-rgb), 0.18) !important;
}
html[data-app-theme] .admin-teachers-page .role-admin{
  background: rgba(25, 135, 84, 0.16) !important;
  color: #2f9b62 !important;
}
html[data-app-theme] .admin-teachers-page .role-principal{
  background: rgba(13, 110, 253, 0.14) !important;
  color: #5d9bff !important;
}
html[data-app-theme] .admin-teachers-page .role-deputy_principal{
  background: rgba(108, 117, 125, 0.18) !important;
  color: #aeb8c4 !important;
}
html[data-app-theme] .admin-teachers-page .role-dean{
  background: rgba(220, 53, 69, 0.15) !important;
  color: #e67b87 !important;
}
html[data-app-theme] .admin-teachers-page .role-class_teacher,
html[data-app-theme] .admin-teachers-page .role-subject_teacher,
html[data-app-theme] .admin-teachers-page .role-default{
  background: rgba(var(--app-accent-rgb), 0.12) !important;
  color: var(--app-accent-strong) !important;
}
html[data-app-theme] .admin-teachers-page .ribbon-default span{
  background: linear-gradient(135deg, var(--app-accent-strong), var(--app-accent)) !important;
}
html[data-app-theme] .admin-teachers-page .btn-outline-primary,
html[data-app-theme] .admin-teachers-page .btn-outline-info,
html[data-app-theme] .admin-teachers-page .btn-outline-success,
html[data-app-theme] .admin-teachers-page .btn-outline-secondary,
html[data-app-theme] .admin-teachers-page .btn-outline-dark{
  color: var(--app-accent-strong) !important;
  border-color: rgba(var(--app-accent-rgb), 0.38) !important;
  background-color: rgba(var(--app-accent-rgb), 0.04) !important;
}
html[data-app-theme] .admin-teachers-page .btn-outline-primary:hover,
html[data-app-theme] .admin-teachers-page .btn-outline-primary:focus,
html[data-app-theme] .admin-teachers-page .btn-outline-info:hover,
html[data-app-theme] .admin-teachers-page .btn-outline-info:focus,
html[data-app-theme] .admin-teachers-page .btn-outline-success:hover,
html[data-app-theme] .admin-teachers-page .btn-outline-success:focus,
html[data-app-theme] .admin-teachers-page .btn-outline-secondary:hover,
html[data-app-theme] .admin-teachers-page .btn-outline-secondary:focus,
html[data-app-theme] .admin-teachers-page .btn-outline-dark:hover,
html[data-app-theme] .admin-teachers-page .btn-outline-dark:focus{
  color: #fff !important;
  border-color: var(--app-accent) !important;
  background-color: var(--app-accent) !important;
}
html[data-app-theme] .admin-teachers-page .btn-primary,
html[data-app-theme] #confirmActionModal .btn-primary{
  background-color: var(--app-accent-strong) !important;
  border-color: var(--app-accent-strong) !important;
  color: #fff !important;
}
html[data-app-theme] .admin-teachers-page .btn-primary:hover,
html[data-app-theme] .admin-teachers-page .btn-primary:focus,
html[data-app-theme] #confirmActionModal .btn-primary:hover,
html[data-app-theme] #confirmActionModal .btn-primary:focus{
  background-color: var(--app-accent) !important;
  border-color: var(--app-accent) !important;
}
html[data-app-theme='dark'] .admin-teachers-page .text-dark:not(.badge):not(.btn),
html[data-app-theme='dark'] .admin-teachers-page .text-black:not(.badge):not(.btn){
  color: var(--admin-teachers-text) !important;
}

/* Fees workspace theme compatibility */
html[data-app-theme] body.ctx-fees .fees-page{
  --fees-page-surface: var(--app-surface);
  --fees-page-surface-muted: var(--app-surface-muted);
  --fees-page-surface-soft: var(--app-surface-soft);
  --fees-page-border: var(--app-border-color);
  --fees-page-text: var(--app-text-color);
  --fees-page-muted: var(--app-muted-color);
  --fees-page-row-odd: var(--app-surface);
  --fees-page-row-even: var(--app-table-odd-bg);
  --fees-page-row-hover: var(--app-table-hover-bg);
  color: var(--fees-page-text);
}
html[data-app-theme] body.ctx-fees .fees-page .card,
html[data-app-theme] body.ctx-fees .fees-page .table-responsive,
html[data-app-theme] body.ctx-fees .fees-page .border.rounded-3,
html[data-app-theme] body.ctx-fees .fees-page .rounded-3.border,
html[data-app-theme] body.ctx-fees .fees-page .accordion-item{
  background: var(--fees-page-surface) !important;
  border-color: var(--fees-page-border) !important;
  color: var(--fees-page-text) !important;
}
html[data-app-theme] body.ctx-fees .fees-page .card-header,
html[data-app-theme] body.ctx-fees .fees-page .card-footer,
html[data-app-theme] body.ctx-fees .fees-page .accordion-button:not(.collapsed){
  background: var(--fees-page-surface-muted) !important;
  border-color: var(--fees-page-border) !important;
  color: var(--fees-page-text) !important;
}
html[data-app-theme] body.ctx-fees .fees-page .table{
  color: var(--fees-page-text) !important;
}
html[data-app-theme] body.ctx-fees .fees-page .table > :not(caption) > * > *{
  border-color: var(--fees-page-border) !important;
  color: var(--fees-page-text) !important;
}
html[data-app-theme] body.ctx-fees .fees-page .table > thead > tr > *,
html[data-app-theme] body.ctx-fees .fees-page .table > tfoot > tr > *{
  background: var(--fees-page-surface-muted) !important;
  color: var(--fees-page-text) !important;
}
html[data-app-theme] body.ctx-fees .fees-page .table > tbody > tr > *{
  background: var(--fees-page-row-odd) !important;
}
html[data-app-theme] body.ctx-fees .fees-page .table-striped > tbody > tr:nth-of-type(odd) > *{
  background: var(--fees-page-row-even) !important;
}
html[data-app-theme] body.ctx-fees .fees-page .table-hover > tbody > tr:hover > *{
  background: var(--fees-page-row-hover) !important;
}
html[data-app-theme] body.ctx-fees .fees-page .bg-light,
html[data-app-theme] body.ctx-fees .fees-page .bg-white,
html[data-app-theme] body.ctx-fees .fees-page .bg-light-subtle,
html[data-app-theme] body.ctx-fees .fees-page .table-light,
html[data-app-theme] body.ctx-fees .fees-page .thead-light,
html[data-app-theme] body.ctx-fees .fees-page .alert-light,
html[data-app-theme] body.ctx-fees .fees-page .badge.bg-light,
html[data-app-theme] body.ctx-fees .fees-page .badge.bg-white,
html[data-app-theme] body.ctx-fees .fees-page .badge.text-bg-light{
  background: var(--fees-page-surface-muted) !important;
  border-color: var(--fees-page-border) !important;
  color: var(--fees-page-text) !important;
}
html[data-app-theme] body.ctx-fees .fees-page .text-muted{
  color: var(--fees-page-muted) !important;
}
html[data-app-theme] body.ctx-fees .fees-page .pagination{
  --bs-pagination-color: var(--fees-page-text);
  --bs-pagination-bg: var(--fees-page-surface);
  --bs-pagination-border-color: var(--fees-page-border);
  --bs-pagination-hover-color: var(--fees-page-text);
  --bs-pagination-hover-bg: var(--fees-page-surface-soft);
  --bs-pagination-hover-border-color: rgba(var(--app-accent-rgb), 0.22);
  --bs-pagination-active-bg: var(--app-accent);
  --bs-pagination-active-border-color: var(--app-accent);
  --bs-pagination-active-color: #fff;
  --bs-pagination-disabled-color: var(--fees-page-muted);
  --bs-pagination-disabled-bg: var(--fees-page-surface-muted);
  --bs-pagination-disabled-border-color: var(--fees-page-border);
}
html[data-app-theme] body.ctx-fees .fees-page .btn-light,
html[data-app-theme] body.ctx-fees .fees-page .btn-outline-primary,
html[data-app-theme] body.ctx-fees .fees-page .btn-outline-secondary,
html[data-app-theme] body.ctx-fees .fees-page .btn-outline-dark{
  color: var(--app-accent-strong) !important;
  border-color: rgba(var(--app-accent-rgb), 0.38) !important;
  background-color: rgba(var(--app-accent-rgb), 0.04) !important;
}
html[data-app-theme] body.ctx-fees .fees-page .btn-light:hover,
html[data-app-theme] body.ctx-fees .fees-page .btn-light:focus,
html[data-app-theme] body.ctx-fees .fees-page .btn-outline-primary:hover,
html[data-app-theme] body.ctx-fees .fees-page .btn-outline-primary:focus,
html[data-app-theme] body.ctx-fees .fees-page .btn-outline-secondary:hover,
html[data-app-theme] body.ctx-fees .fees-page .btn-outline-secondary:focus,
html[data-app-theme] body.ctx-fees .fees-page .btn-outline-dark:hover,
html[data-app-theme] body.ctx-fees .fees-page .btn-outline-dark:focus{
  color: #fff !important;
  border-color: var(--app-accent) !important;
  background-color: var(--app-accent) !important;
}
html[data-app-theme] body.ctx-fees .fees-page .btn-primary,
html[data-app-theme] body.ctx-fees .fees-page .btn-secondary,
html[data-app-theme] body.ctx-fees .fees-page .btn-dark{
  background-color: var(--app-accent-strong) !important;
  border-color: var(--app-accent-strong) !important;
  color: #fff !important;
}
html[data-app-theme] body.ctx-fees .fees-page .btn-primary:hover,
html[data-app-theme] body.ctx-fees .fees-page .btn-primary:focus,
html[data-app-theme] body.ctx-fees .fees-page .btn-secondary:hover,
html[data-app-theme] body.ctx-fees .fees-page .btn-secondary:focus,
html[data-app-theme] body.ctx-fees .fees-page .btn-dark:hover,
html[data-app-theme] body.ctx-fees .fees-page .btn-dark:focus{
  background-color: var(--app-accent) !important;
  border-color: var(--app-accent) !important;
}
html[data-app-theme] body.ctx-fees .fees-page .fees-ledger-card .ledger-sticky-footer th,
html[data-app-theme] body.ctx-fees .fees-page .fees-ledger-card .ledger-sticky-footer td{
  background: var(--fees-page-surface-muted) !important;
  color: var(--fees-page-text) !important;
  box-shadow: 0 -1px 0 rgba(0,0,0,.08);
}
html[data-app-theme] body.ctx-fees .fees-page .fees-ledger-card .ledger-amount-charge,
html[data-app-theme] body.ctx-fees .fees-page .fees-ledger-card .ledger-type-charge,
html[data-app-theme] body.ctx-fees .fees-page .fees-ledger-card .ledger-cue-charge{
  color: #d46874 !important;
}
html[data-app-theme] body.ctx-fees .fees-page .fees-ledger-card .ledger-type-charge,
html[data-app-theme] body.ctx-fees .fees-page .fees-ledger-card .ledger-cue-charge{
  background: rgba(220, 53, 69, 0.12) !important;
  border-color: rgba(220, 53, 69, 0.22) !important;
}
html[data-app-theme] body.ctx-fees .fees-page .fees-ledger-card .ledger-amount-payment,
html[data-app-theme] body.ctx-fees .fees-page .fees-ledger-card .ledger-type-payment,
html[data-app-theme] body.ctx-fees .fees-page .fees-ledger-card .ledger-cue-payment{
  color: #2f9b62 !important;
}
html[data-app-theme] body.ctx-fees .fees-page .fees-ledger-card .ledger-type-payment,
html[data-app-theme] body.ctx-fees .fees-page .fees-ledger-card .ledger-cue-payment{
  background: rgba(25, 135, 84, 0.12) !important;
  border-color: rgba(25, 135, 84, 0.22) !important;
}
html[data-app-theme='dark'] body.ctx-fees .fees-page .text-dark:not(.badge):not(.btn),
html[data-app-theme='dark'] body.ctx-fees .fees-page .text-black:not(.badge):not(.btn){
  color: var(--fees-page-text) !important;
}

/* Library workspace theme compatibility */
html[data-app-theme] body.ctx-library .lib-page{
  --lib-page-surface: var(--app-surface);
  --lib-page-surface-muted: var(--app-surface-muted);
  --lib-page-surface-soft: var(--app-surface-soft);
  --lib-page-border: var(--app-border-color);
  --lib-page-text: var(--app-text-color);
  --lib-page-muted: var(--app-muted-color);
  --lib-page-row-odd: var(--app-surface);
  --lib-page-row-even: var(--app-table-odd-bg);
  --lib-page-row-hover: var(--app-table-hover-bg);
  color: var(--lib-page-text);
}
html[data-app-theme] body.ctx-library .lib-page .card,
html[data-app-theme] body.ctx-library .lib-page .table-responsive,
html[data-app-theme] body.ctx-library .lib-page .border.rounded,
html[data-app-theme] body.ctx-library .lib-page .border.rounded-3{
  background: var(--lib-page-surface) !important;
  border-color: var(--lib-page-border) !important;
  color: var(--lib-page-text) !important;
}
html[data-app-theme] body.ctx-library .lib-page .card-header,
html[data-app-theme] body.ctx-library .lib-page .card-footer{
  background: var(--lib-page-surface-muted) !important;
  border-color: var(--lib-page-border) !important;
  color: var(--lib-page-text) !important;
}
html[data-app-theme] body.ctx-library .lib-page .lib-table{
  color: var(--lib-page-text) !important;
}
html[data-app-theme] body.ctx-library .lib-page .lib-table > :not(caption) > * > *{
  border-color: var(--lib-page-border) !important;
  color: var(--lib-page-text) !important;
}
html[data-app-theme] body.ctx-library .lib-page .lib-table > thead > tr > *{
  background: var(--lib-page-surface-muted) !important;
  color: var(--lib-page-text) !important;
}
html[data-app-theme] body.ctx-library .lib-page .lib-table > tbody > tr > *{
  background: var(--lib-page-row-odd) !important;
}
html[data-app-theme] body.ctx-library .lib-page .lib-table.table-striped > tbody > tr:nth-of-type(odd) > *{
  background: var(--lib-page-row-even) !important;
}
html[data-app-theme] body.ctx-library .lib-page .lib-table > tbody > tr:hover > *{
  background: var(--lib-page-row-hover) !important;
}
html[data-app-theme] body.ctx-library .lib-page .text-muted{
  color: var(--lib-page-muted) !important;
}
html[data-app-theme] body.ctx-library .lib-page .btn-light,
html[data-app-theme] body.ctx-library .lib-page .btn-outline-secondary,
html[data-app-theme] body.ctx-library .lib-page .btn-outline-dark{
  color: var(--app-accent-strong) !important;
  border-color: rgba(var(--app-accent-rgb), 0.38) !important;
  background-color: rgba(var(--app-accent-rgb), 0.04) !important;
}
html[data-app-theme] body.ctx-library .lib-page .btn-light:hover,
html[data-app-theme] body.ctx-library .lib-page .btn-light:focus,
html[data-app-theme] body.ctx-library .lib-page .btn-outline-secondary:hover,
html[data-app-theme] body.ctx-library .lib-page .btn-outline-secondary:focus,
html[data-app-theme] body.ctx-library .lib-page .btn-outline-dark:hover,
html[data-app-theme] body.ctx-library .lib-page .btn-outline-dark:focus{
  color: #fff !important;
  border-color: var(--app-accent) !important;
  background-color: var(--app-accent) !important;
}
html[data-app-theme] body.ctx-library .lib-page .btn-primary,
html[data-app-theme] body.ctx-library .lib-page .btn-secondary,
html[data-app-theme] body.ctx-library .lib-page .btn-dark{
  background-color: var(--app-accent-strong) !important;
  border-color: var(--app-accent-strong) !important;
  color: #fff !important;
}
html[data-app-theme] body.ctx-library .lib-page .btn-primary:hover,
html[data-app-theme] body.ctx-library .lib-page .btn-primary:focus,
html[data-app-theme] body.ctx-library .lib-page .btn-secondary:hover,
html[data-app-theme] body.ctx-library .lib-page .btn-secondary:focus,
html[data-app-theme] body.ctx-library .lib-page .btn-dark:hover,
html[data-app-theme] body.ctx-library .lib-page .btn-dark:focus{
  background-color: var(--app-accent) !important;
  border-color: var(--app-accent) !important;
}
html[data-app-theme] body.ctx-library .lib-page .badge.bg-light,
html[data-app-theme] body.ctx-library .lib-page .badge.text-bg-light{
  background: var(--lib-page-surface-muted) !important;
  color: var(--lib-page-text) !important;
  border: 1px solid var(--lib-page-border) !important;
}
html[data-app-theme] body.ctx-library .lib-page .badge.bg-primary-subtle,
html[data-app-theme] body.ctx-library .lib-page .badge.bg-secondary-subtle,
html[data-app-theme] body.ctx-library .lib-page .badge.bg-success-subtle,
html[data-app-theme] body.ctx-library .lib-page .badge.bg-warning-subtle,
html[data-app-theme] body.ctx-library .lib-page .badge.bg-danger-subtle{
  border: 1px solid transparent !important;
}
html[data-app-theme] body.ctx-library .lib-page .badge.bg-primary-subtle{
  background: rgba(var(--app-accent-rgb), 0.12) !important;
  color: var(--app-accent-strong) !important;
  border-color: rgba(var(--app-accent-rgb), 0.24) !important;
}
html[data-app-theme] body.ctx-library .lib-page .badge.bg-secondary-subtle{
  background: rgba(108, 117, 125, 0.16) !important;
  color: var(--lib-page-text) !important;
  border-color: rgba(108, 117, 125, 0.22) !important;
}
html[data-app-theme] body.ctx-library .lib-page .badge.bg-success-subtle{
  background: rgba(25, 135, 84, 0.14) !important;
  color: #2f9b62 !important;
  border-color: rgba(25, 135, 84, 0.22) !important;
}
html[data-app-theme] body.ctx-library .lib-page .badge.bg-warning-subtle{
  background: rgba(255, 193, 7, 0.16) !important;
  color: #c08a00 !important;
  border-color: rgba(255, 193, 7, 0.24) !important;
}
html[data-app-theme] body.ctx-library .lib-page .badge.bg-danger-subtle{
  background: rgba(220, 53, 69, 0.14) !important;
  color: #d46874 !important;
  border-color: rgba(220, 53, 69, 0.22) !important;
}
html[data-app-theme] body.ctx-library .lib-page .pagination{
  --bs-pagination-color: var(--lib-page-text);
  --bs-pagination-bg: var(--lib-page-surface);
  --bs-pagination-border-color: var(--lib-page-border);
  --bs-pagination-hover-color: var(--lib-page-text);
  --bs-pagination-hover-bg: var(--lib-page-surface-soft);
  --bs-pagination-hover-border-color: rgba(var(--app-accent-rgb), 0.22);
  --bs-pagination-active-bg: var(--app-accent);
  --bs-pagination-active-border-color: var(--app-accent);
  --bs-pagination-active-color: #fff;
  --bs-pagination-disabled-color: var(--lib-page-muted);
  --bs-pagination-disabled-bg: var(--lib-page-surface-muted);
  --bs-pagination-disabled-border-color: var(--lib-page-border);
}
html[data-app-theme='dark'] body.ctx-library .lib-page .text-dark:not(.badge):not(.btn),
html[data-app-theme='dark'] body.ctx-library .lib-page .text-black:not(.badge):not(.btn){
  color: var(--lib-page-text) !important;
}

/* System admin dashboard theme compatibility */
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard{
  --sys-admin-surface: var(--app-surface);
  --sys-admin-surface-muted: var(--app-surface-muted);
  --sys-admin-surface-soft: var(--app-surface-soft);
  --sys-admin-border: var(--app-border-color);
  --sys-admin-text: var(--app-text-color);
  --sys-admin-muted: var(--app-muted-color);
  color: var(--sys-admin-text);
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .card,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .workspace-link,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .hero-panel,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .attention-list .list-group-item,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .border.rounded-3{
  background: var(--sys-admin-surface) !important;
  border-color: var(--sys-admin-border) !important;
  color: var(--sys-admin-text) !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .card-header,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .card-footer{
  background: var(--sys-admin-surface-muted) !important;
  border-color: var(--sys-admin-border) !important;
  color: var(--sys-admin-text) !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .system-hero{
  background:
    radial-gradient(circle at top right, rgba(var(--app-accent-rgb), 0.22), transparent 38%),
    linear-gradient(135deg, var(--app-nav-bg-solid), rgba(var(--app-accent-rgb), 0.28) 120%) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .system-hero .scope-badge,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .system-hero .hero-panel{
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .system-hero .btn-light{
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .system-hero .btn-light:hover,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .system-hero .btn-light:focus,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .system-hero .btn-outline-light:hover,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .system-hero .btn-outline-light:focus{
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .system-hero .btn-outline-light{
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: transparent !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .workspace-link:hover{
  background: var(--sys-admin-surface-soft) !important;
  border-color: rgba(var(--app-accent-rgb), 0.24) !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .workspace-link.active{
  background: linear-gradient(135deg, var(--app-nav-bg-solid), rgba(var(--app-accent-rgb), 0.32) 120%) !important;
  color: #fff !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .workspace-kicker,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .workspace-meta,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .text-muted{
  color: var(--sys-admin-muted) !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .workspace-title,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard h5,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard h6,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .h4{
  color: var(--sys-admin-text) !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .workspace-link.active .workspace-kicker,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .workspace-link.active .workspace-title,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .workspace-link.active .workspace-meta{
  color: #fff !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .metric-card .metric-icon,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .action-card .icon{
  background: rgba(var(--app-accent-rgb), 0.12) !important;
  color: var(--app-accent-strong) !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .action-card:hover{
  background: var(--sys-admin-surface-soft) !important;
  border-color: rgba(var(--app-accent-rgb), 0.24) !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .system-note,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .profile-chip{
  background: var(--sys-admin-surface-muted) !important;
  color: var(--sys-admin-text) !important;
  border-color: var(--sys-admin-border) !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .system-note{
  border-left-color: var(--app-accent) !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .status-pill.active{
  background: rgba(25, 135, 84, 0.14) !important;
  color: #2f9b62 !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .status-pill.suspended{
  background: rgba(220, 53, 69, 0.14) !important;
  color: #d46874 !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .table > :not(caption) > * > *{
  border-color: var(--sys-admin-border) !important;
  color: var(--sys-admin-text) !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .table > thead > tr > *{
  background: var(--sys-admin-surface-muted) !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .table-striped > tbody > tr:nth-of-type(odd) > *{
  background: var(--app-table-odd-bg) !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .table-striped > tbody > tr:nth-of-type(even) > *{
  background: var(--sys-admin-surface) !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .btn-success,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .btn-primary{
  background-color: var(--app-accent-strong) !important;
  border-color: var(--app-accent-strong) !important;
  color: #fff !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .btn-success:hover,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .btn-success:focus,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .btn-primary:hover,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .btn-primary:focus{
  background-color: var(--app-accent) !important;
  border-color: var(--app-accent) !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .btn-outline-primary{
  color: var(--app-accent-strong) !important;
  border-color: rgba(var(--app-accent-rgb), 0.38) !important;
  background-color: rgba(var(--app-accent-rgb), 0.04) !important;
}
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .btn-outline-primary:hover,
html[data-app-theme] body.ctx-system-admin .system-admin-dashboard .btn-outline-primary:focus{
  color: #fff !important;
  background-color: var(--app-accent) !important;
  border-color: var(--app-accent) !important;
}
html[data-app-theme='dark'] body.ctx-system-admin .system-admin-dashboard .text-dark:not(.badge):not(.btn),
html[data-app-theme='dark'] body.ctx-system-admin .system-admin-dashboard .text-black:not(.badge):not(.btn){
  color: var(--sys-admin-text) !important;
}

/* People overview theme compatibility */
html[data-app-theme] .people-overview-page{
  --people-page-surface: var(--app-surface);
  --people-page-surface-muted: var(--app-surface-muted);
  --people-page-border: var(--app-border-color);
  --people-page-text: var(--app-text-color);
  --people-page-muted: var(--app-muted-color);
  color: var(--people-page-text);
}
html[data-app-theme] .people-overview-page .card,
html[data-app-theme] .people-overview-page .table-responsive{
  background: var(--people-page-surface) !important;
  border-color: var(--people-page-border) !important;
  color: var(--people-page-text) !important;
}
html[data-app-theme] .people-overview-page .card-header{
  background: var(--people-page-surface-muted) !important;
  border-color: var(--people-page-border) !important;
  color: var(--people-page-text) !important;
}
html[data-app-theme] .people-overview-page .table > :not(caption) > * > *{
  border-color: var(--people-page-border) !important;
  color: var(--people-page-text) !important;
}
html[data-app-theme] .people-overview-page .table > thead > tr > *{
  background: var(--people-page-surface-muted) !important;
}
html[data-app-theme] .people-overview-page .text-muted{
  color: var(--people-page-muted) !important;
}
html[data-app-theme] .people-overview-page h3,
html[data-app-theme] .people-overview-page h5{
  color: var(--people-page-text) !important;
}
html[data-app-theme='dark'] .people-overview-page .text-dark:not(.badge):not(.btn),
html[data-app-theme='dark'] .people-overview-page .text-black:not(.badge):not(.btn){
  color: var(--people-page-text) !important;
}

/* Student workspace theme compatibility */
html[data-app-theme] .student-workspace-page{
  --student-page-surface: var(--app-surface);
  --student-page-surface-muted: var(--app-surface-muted);
  --student-page-surface-soft: var(--app-surface-soft);
  --student-page-border: var(--app-border-color);
  --student-page-text: var(--app-text-color);
  --student-page-muted: var(--app-muted-color);
  --student-page-row-odd: var(--app-surface);
  --student-page-row-even: var(--app-table-odd-bg);
  --student-page-row-hover: var(--app-table-hover-bg);
  color: var(--student-page-text);
}
html[data-app-theme] .student-workspace-page .card,
html[data-app-theme] .student-workspace-page .table-responsive,
html[data-app-theme] .student-workspace-page .border.rounded,
html[data-app-theme] .student-workspace-page .rounded.border,
html[data-app-theme] .student-workspace-page .border.rounded-3,
html[data-app-theme] .student-workspace-page .rounded-3.border,
html[data-app-theme] .student-workspace-page .profile-header,
html[data-app-theme] .student-workspace-page .section-card,
html[data-app-theme] .student-workspace-page .rf-metric,
html[data-app-theme] .student-workspace-page .rf-metric-bar,
html[data-app-theme] .student-workspace-page .mini-chart,
html[data-app-theme] .student-workspace-page .modal-content{
  background: var(--student-page-surface) !important;
  border-color: var(--student-page-border) !important;
  color: var(--student-page-text) !important;
}
html[data-app-theme] .student-workspace-page .card-header,
html[data-app-theme] .student-workspace-page .card-footer,
html[data-app-theme] .student-workspace-page .modal-header,
html[data-app-theme] .student-workspace-page .modal-footer{
  background: var(--student-page-surface-muted) !important;
  border-color: var(--student-page-border) !important;
  color: var(--student-page-text) !important;
}
html[data-app-theme] .student-workspace-page h3,
html[data-app-theme] .student-workspace-page h4,
html[data-app-theme] .student-workspace-page h5,
html[data-app-theme] .student-workspace-page h6,
html[data-app-theme] .student-workspace-page .h3,
html[data-app-theme] .student-workspace-page .h4,
html[data-app-theme] .student-workspace-page .h5,
html[data-app-theme] .student-workspace-page .h6,
html[data-app-theme] .student-workspace-page .form-label,
html[data-app-theme] .student-workspace-page .col-form-label,
html[data-app-theme] .student-workspace-page .form-check-label{
  color: var(--student-page-text) !important;
}
html[data-app-theme] .student-workspace-page .text-muted,
html[data-app-theme] .student-workspace-page .pi-label,
html[data-app-theme] .student-workspace-page .form-text{
  color: var(--student-page-muted) !important;
}
html[data-app-theme] .student-workspace-page .pi-title,
html[data-app-theme] .student-workspace-page .section-title,
html[data-app-theme] .student-workspace-page .chart-title{
  color: var(--app-accent-strong) !important;
}
html[data-app-theme] .student-workspace-page .pi-value{
  color: var(--student-page-text) !important;
}
html[data-app-theme] .student-workspace-page .form-check-input{
  background-color: var(--app-input-bg) !important;
  border-color: rgba(var(--app-accent-rgb), 0.34) !important;
}
html[data-app-theme] .student-workspace-page .form-check-input:checked{
  background-color: var(--app-accent) !important;
  border-color: var(--app-accent) !important;
}
html[data-app-theme] .student-workspace-page .avatar{
  background: rgba(var(--app-accent-rgb), 0.14) !important;
}
html[data-app-theme] .student-workspace-page .student-mini-card{
  background: var(--student-page-surface-muted) !important;
  border: 1px solid var(--student-page-border) !important;
  color: var(--student-page-text) !important;
}
html[data-app-theme] .student-workspace-page .rf-metric-bar{
  background:
    linear-gradient(135deg, rgba(var(--app-accent-rgb), 0.08), transparent 72%),
    var(--student-page-surface-muted) !important;
}
html[data-app-theme] .student-workspace-page .rf-metric:hover{
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12) !important;
}
html[data-app-theme] .student-workspace-page .table{
  color: var(--student-page-text) !important;
}
html[data-app-theme] .student-workspace-page .table > :not(caption) > * > *{
  border-color: var(--student-page-border) !important;
  color: var(--student-page-text) !important;
}
html[data-app-theme] .student-workspace-page .table > thead > tr > *,
html[data-app-theme] .student-workspace-page .table > tfoot > tr > *,
html[data-app-theme] .student-workspace-page .table-light > :not(caption) > * > *,
html[data-app-theme] .student-workspace-page .thead-light > tr > *{
  background: var(--student-page-surface-muted) !important;
  color: var(--student-page-text) !important;
}
html[data-app-theme] .student-workspace-page .table > tbody > tr > *{
  background: var(--student-page-row-odd) !important;
}
html[data-app-theme] .student-workspace-page .table-striped > tbody > tr:nth-of-type(odd) > *{
  background: var(--student-page-row-even) !important;
}
html[data-app-theme] .student-workspace-page .table-hover > tbody > tr:hover > *{
  background: var(--student-page-row-hover) !important;
}
html[data-app-theme] .student-workspace-page .table > tbody > tr.table-active > *,
html[data-app-theme] .student-workspace-page .table-active > *{
  background: rgba(var(--app-accent-rgb), 0.12) !important;
}
html[data-app-theme] .student-workspace-page .table > tbody > tr.table-danger > *,
html[data-app-theme] .student-workspace-page .table-danger > *{
  background: rgba(220, 53, 69, 0.16) !important;
  color: var(--student-page-text) !important;
}
html[data-app-theme] .student-workspace-page .bg-light,
html[data-app-theme] .student-workspace-page .bg-white,
html[data-app-theme] .student-workspace-page .bg-light-subtle,
html[data-app-theme] .student-workspace-page .alert-light,
html[data-app-theme] .student-workspace-page .badge.bg-light,
html[data-app-theme] .student-workspace-page .badge.bg-white,
html[data-app-theme] .student-workspace-page .badge.text-bg-light{
  background: var(--student-page-surface-muted) !important;
  border-color: var(--student-page-border) !important;
  color: var(--student-page-text) !important;
}
html[data-app-theme] .student-workspace-page .btn-light,
html[data-app-theme] .student-workspace-page .btn-outline-primary,
html[data-app-theme] .student-workspace-page .btn-outline-secondary,
html[data-app-theme] .student-workspace-page .btn-outline-dark{
  color: var(--app-accent-strong) !important;
  border-color: rgba(var(--app-accent-rgb), 0.38) !important;
  background-color: rgba(var(--app-accent-rgb), 0.04) !important;
}
html[data-app-theme] .student-workspace-page .btn-light:hover,
html[data-app-theme] .student-workspace-page .btn-light:focus,
html[data-app-theme] .student-workspace-page .btn-outline-primary:hover,
html[data-app-theme] .student-workspace-page .btn-outline-primary:focus,
html[data-app-theme] .student-workspace-page .btn-outline-secondary:hover,
html[data-app-theme] .student-workspace-page .btn-outline-secondary:focus,
html[data-app-theme] .student-workspace-page .btn-outline-dark:hover,
html[data-app-theme] .student-workspace-page .btn-outline-dark:focus{
  color: #fff !important;
  border-color: var(--app-accent) !important;
  background-color: var(--app-accent) !important;
}
html[data-app-theme] .student-workspace-page .btn-primary,
html[data-app-theme] .student-workspace-page .btn-secondary,
html[data-app-theme] .student-workspace-page .btn-dark{
  background-color: var(--app-accent-strong) !important;
  border-color: var(--app-accent-strong) !important;
  color: #fff !important;
}
html[data-app-theme] .student-workspace-page .btn-primary:hover,
html[data-app-theme] .student-workspace-page .btn-primary:focus,
html[data-app-theme] .student-workspace-page .btn-secondary:hover,
html[data-app-theme] .student-workspace-page .btn-secondary:focus,
html[data-app-theme] .student-workspace-page .btn-dark:hover,
html[data-app-theme] .student-workspace-page .btn-dark:focus{
  background-color: var(--app-accent) !important;
  border-color: var(--app-accent) !important;
}
html[data-app-theme] .student-workspace-page .form-control,
html[data-app-theme] .student-workspace-page .form-select,
html[data-app-theme] .student-workspace-page .input-group-text,
html[data-app-theme] .student-workspace-page .search-input-highlight,
html[data-app-theme] .student-workspace-page .tint{
  background-color: var(--app-input-bg) !important;
  border-color: var(--student-page-border) !important;
  color: var(--student-page-text) !important;
}
html[data-app-theme] .student-workspace-page .form-control::placeholder{
  color: var(--student-page-muted) !important;
}
html[data-app-theme] .student-workspace-page .tint{
  background-color: rgba(var(--app-accent-rgb), 0.08) !important;
  border-color: rgba(var(--app-accent-rgb), 0.24) !important;
}
html[data-app-theme] .student-workspace-page .tint:focus,
html[data-app-theme] .student-workspace-page .search-input-highlight:focus{
  background-color: var(--app-input-bg) !important;
  border-color: var(--app-accent) !important;
  box-shadow: 0 0 0 .2rem var(--app-input-focus-ring) !important;
}
html[data-app-theme] .student-workspace-page .progress{
  background: var(--student-page-surface-muted) !important;
}
html[data-app-theme] .student-workspace-page .pagination{
  --bs-pagination-color: var(--student-page-text);
  --bs-pagination-bg: var(--student-page-surface);
  --bs-pagination-border-color: var(--student-page-border);
  --bs-pagination-hover-color: var(--student-page-text);
  --bs-pagination-hover-bg: var(--student-page-surface-soft);
  --bs-pagination-hover-border-color: rgba(var(--app-accent-rgb), 0.24);
  --bs-pagination-active-bg: var(--app-accent);
  --bs-pagination-active-border-color: var(--app-accent);
  --bs-pagination-active-color: #fff;
  --bs-pagination-disabled-color: var(--student-page-muted);
  --bs-pagination-disabled-bg: var(--student-page-surface-muted);
  --bs-pagination-disabled-border-color: var(--student-page-border);
}
html[data-app-theme] .student-workspace-page code{
  background: rgba(var(--app-accent-rgb), 0.08) !important;
  border: 1px solid rgba(var(--app-accent-rgb), 0.18) !important;
  border-radius: .35rem;
  color: var(--student-page-text) !important;
  padding: .1rem .3rem;
}
html[data-app-theme] .student-search-page .search-card .search-options .form-check-label:not(.text-muted),
html[data-app-theme] .student-search-page .search-card .search-options .h6{
  color: var(--student-page-text) !important;
}
html[data-app-theme] .student-profile-page .profile-header{
  background:
    radial-gradient(circle at top right, rgba(var(--app-accent-rgb), 0.14), transparent 46%),
    var(--student-page-surface-muted) !important;
  border: 1px solid var(--student-page-border) !important;
}
html[data-app-theme] .student-profile-page .table-sticky thead th{
  background: var(--student-page-surface-muted) !important;
  color: var(--student-page-text) !important;
}
html[data-app-theme='dark'] .student-workspace-page .text-dark:not(.badge):not(.btn),
html[data-app-theme='dark'] .student-workspace-page .text-black:not(.badge):not(.btn){
  color: var(--student-page-text) !important;
}

/* ========== SPA Skeletons ========== */
#app-view.is-loading .skeleton{
  position: relative; overflow: hidden; background: #e5e7eb; color: transparent !important;
}
#app-view.is-loading .skeleton::after{
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background-image: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: shimmer 1.1s ease-in-out infinite;
}
.skeleton-text{ height: 1rem; border-radius: .25rem; }
.skeleton-rect{ border-radius: .5rem; }
@keyframes shimmer{ 0%{ transform: translateX(-100%);} 100%{ transform: translateX(100%);} }

/* ========== Sidebar (Vertical Navbar) ========== */
:root{
  --sidebar-bg: var(--app-nav-bg-solid);
  --sidebar-bg-image: var(--app-nav-bg);
  --sidebar-text: var(--app-nav-text);
  --sidebar-hover: var(--app-nav-hover);
  --sidebar-active: var(--app-nav-active);
  --sidebar-accent: var(--app-nav-accent);
  --sidebar-link-font-size: .98rem;
  --sidebar-link-line-height: 1.2;
  --sidebar-link-pad-y: .28rem;
  --sidebar-link-pad-x: .48rem;
  --sidebar-link-gap-bottom: .22rem;
  --sidebar-section-font-size: .72rem;
  --sidebar-row-height: 2.68rem;
  --sidebar-row-gap: .24rem;
}

/* Container and background */
.app-shell-sidebar{
  background-image: var(--sidebar-bg-image) !important;
  background-color: var(--sidebar-bg) !important;
  box-shadow: 10px 0 28px rgba(15,23,42,0.08), inset -1px 0 0 var(--app-nav-border);
  border-right: 1px solid var(--app-nav-border);
}
.app-shell-sidebar .navbar-vertical-content{
  background: transparent;
  height: 100%;
  padding: .24rem .38rem .32rem .28rem;
}
.app-shell-sidebar #navbarVerticalNav{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100%;
}

/* Section label & divider */
.app-shell-sidebar .navbar-vertical-label{
  color: var(--sidebar-text);
  text-transform: uppercase;
  font-size: var(--sidebar-section-font-size) !important;
  line-height: 1.1;
  letter-spacing: .06em;
  opacity: .9;
  display: inline-flex;
  align-items: center;
  padding: .28rem .58rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  margin: 0 .14rem .24rem .04rem;
}
.app-shell-sidebar .navbar-vertical-line{
  border-color: rgba(255,255,255,0.14) !important;
  margin: .18rem .24rem .48rem .1rem;
}

/* Items */
.app-shell-sidebar .nav-item-wrapper{
  margin: 0 .15rem var(--sidebar-row-gap) .02rem;
  flex: 0 0 auto;
}
.app-shell-sidebar .nav-link,
.app-shell-sidebar .nav-link.label-1,
.app-shell-sidebar .nav-link.label-1:visited{
  color: var(--sidebar-text) !important;
  display: flex;
  align-items: center;
  min-height: var(--sidebar-row-height);
  height: var(--sidebar-row-height);
  padding: var(--sidebar-link-pad-y) var(--sidebar-link-pad-x) !important;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: .55rem;
  text-decoration: none;
  background: rgba(255,255,255,0.035);
  box-shadow: none;
  font-size: var(--sidebar-link-font-size) !important;
  line-height: var(--sidebar-link-line-height) !important;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.app-shell-sidebar .nav-link > .d-flex{
  width: 100%;
  min-width: 0;
}
.app-shell-sidebar .app-shell-sidebar-split-row{
  display: flex;
  align-items: stretch;
  gap: .28rem;
}
.app-shell-sidebar .app-shell-sidebar-split-row > .nav-link{
  margin-bottom: 0;
}
.app-shell-sidebar .app-shell-sidebar-split-row > a.nav-link{
  flex: 1 1 auto;
}
.app-shell-sidebar .app-shell-sidebar-toggle{
  flex: 0 0 2.45rem;
  width: 2.45rem;
  min-width: 2.45rem;
  justify-content: center;
  padding: 0 !important;
}
.app-shell-sidebar .app-shell-sidebar-toggle .dropdown-indicator-icon-wrapper{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.app-shell-sidebar .nav-link:hover,
.app-shell-sidebar .nav-link.label-1:hover{
  background-color: rgba(255,255,255,0.09);
  color: var(--sidebar-text) !important;
  border-color: rgba(255,255,255,0.22);
}
.app-shell-sidebar .nav-link:focus,
.app-shell-sidebar .nav-link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--app-accent-rgb), .35);
}
.app-shell-sidebar .nav-link:active,
.app-shell-sidebar .nav-link.label-1:active{
  background-color: rgba(255,255,255,0.12);
  color: var(--sidebar-text) !important;
  border-color: rgba(255,255,255,0.22);
}
.app-shell-sidebar .nav-link.active,
.app-shell-sidebar .nav-link[aria-current="page"],
.app-shell-sidebar .nav-link.label-1.active,
.app-shell-sidebar .nav-link.label-1[aria-current="page"]{
  background: linear-gradient(135deg, rgba(15,23,42,0.26), rgba(var(--app-accent-rgb), 0.14));
  color: var(--sidebar-text) !important;
  border-color: rgba(var(--app-accent-rgb), 0.44);
  box-shadow: inset 3px 0 0 var(--sidebar-accent);
  font-weight: 700;
}

/* Icons & text */
.app-shell-sidebar .nav-link-icon{ color: var(--sidebar-text); margin-right: .4rem; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; min-width: 1.25rem; }
.app-shell-sidebar .nav-link-icon svg{ stroke: var(--sidebar-text); width: 1rem; height: 1rem; max-width: none; display: block; stroke-width: 2; flex-shrink: 0; }
.app-shell-sidebar .nav-link:hover .nav-link-icon svg{ stroke: #fff; }
.app-shell-sidebar .nav-link.active .nav-link-icon svg,
.app-shell-sidebar .nav-link[aria-current="page"] .nav-link-icon svg{ stroke: var(--sidebar-accent); }
.app-shell-sidebar .nav-link-text{
  color: var(--sidebar-text);
  font-weight: 600;
  font-size: var(--sidebar-link-font-size) !important;
  line-height: var(--sidebar-link-line-height) !important;
  letter-spacing: .01em;
}
.app-shell-sidebar .nav-link-text-wrapper{
  min-width: 0;
  flex: 1 1 auto;
}
.app-shell-sidebar .nav-link-text{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nested menus */
.app-shell-sidebar .collapse .nav{
  padding-left: .35rem;
  margin-top: .2rem;
  margin-left: .55rem;
  border-left: 1px solid rgba(255,255,255,0.08);
}
.app-shell-sidebar .collapse .nav .nav-link{
  border-radius: .35rem;
  height: auto;
  min-height: 2.35rem;
  padding: .38rem .55rem .38rem .95rem !important;
  opacity: .95;
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.app-shell-sidebar .collapse .nav .nav-link:hover{ background-color: rgba(255,255,255,0.08); }

/* Dropdown caret rotation */
.app-shell-sidebar .dropdown-indicator-icon{ transition: transform .2s ease; }
.app-shell-sidebar a[aria-expanded="true"] .dropdown-indicator-icon{ transform: rotate(90deg); }

/* Scrollbar host (Simplebar) */
.app-shell-sidebar .collapse.navbar-collapse,
.app-shell-sidebar .simplebar-wrapper,
.app-shell-sidebar .simplebar-mask,
.app-shell-sidebar .simplebar-offset,
.app-shell-sidebar .simplebar-content-wrapper{
  height: 100%;
}
.app-shell-sidebar .simplebar-content{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-right: .25rem;
}
.app-shell-sidebar .simplebar-track.simplebar-vertical{
  width: 6px;
  right: 1px;
}
.app-shell-sidebar .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{
  left: 1px;
  right: 1px;
  top: 2px;
  bottom: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.34);
  opacity: 1;
}
.app-shell-sidebar .simplebar-track.simplebar-vertical:hover .simplebar-scrollbar:before,
.app-shell-sidebar .simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before{
  background: rgba(255,255,255,0.46);
}

/* Small screens: keep contrast and touch targets */
@media (max-width: 576px){
  .app-shell-sidebar .nav-link{ padding: .4rem .5rem !important; border-radius: .4rem; }
  .app-shell-sidebar .nav-link-text{ font-size: .95rem !important; }
}
/* ========== Small Screens: Compact Top Bar (keep content) ========== */
/* Phones and small tablets: keep the top bar visible but compact */
@media (max-width: 768px){
  :root{ --header-height: 42px; --shell-topbar-height: 42px; --mobile-topbar-height: 0px; --sidebar-width: 120px; --content-x-padding: 12px; --content-y-padding: 6px; --shell-content-gap: 6px; }
  .app-shell-topbar{ display: flex !important; }
  .app-shell-topbar.navbar-top{
    height: var(--shell-topbar-height) !important;
    min-height: var(--shell-topbar-height) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(15,23,42,0.08) !important;
  }
  .app-shell-topbar .collapse.navbar-collapse{
    height: 100%;
    min-height: var(--shell-topbar-height);
    gap: .35rem;
    padding: 0 .35rem;
  }
  /* Compact elements inside the top bar */
  .navbar-top .theme-control-toggle-label{ height: 2.05rem !important; width: 2.05rem !important; }
  .app-shell-topbar img.rounded-circle,
  .app-shell-topbar .navbar-user-avatar{ width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; }
  .app-shell-topbar .school-logo{ height: 26px !important; }
  .navbar-top .logo-text{ font-size: .95rem !important; margin: 0; }
  .app-shell-topbar .navbar-school-context{
    max-width: none;
    min-height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    gap: .42rem;
    min-width: 0;
  }
  .app-shell-topbar .navbar-school-title{
    font-size: .92rem !important;
    line-height: 1.05;
  }
  .app-shell-topbar .theme-control-toggle{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .app-shell-topbar .navbar-nav-icons{
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    gap: .18rem;
  }
  .app-shell-topbar .navbar-nav-icons > .nav-item{
    min-height: var(--header-height);
  }
  .app-shell-topbar .navbar-nav-icons > .nav-item.ms-1{
    margin-left: 0 !important;
  }
  .app-shell-topbar .navbar-user-link{
    min-height: 2rem;
    gap: .3rem !important;
    padding: 0 .15rem 0 .05rem;
    border-radius: .7rem;
    background: rgba(var(--app-accent-rgb),0.06);
    box-shadow: inset 0 0 0 1px rgba(var(--app-accent-rgb),0.08);
  }
  .app-shell-topbar .navbar-action-link{
    width: 2rem;
    height: 2rem;
    flex-basis: 2rem;
    border-radius: .7rem;
    background: rgba(var(--app-accent-rgb),0.06);
    box-shadow: inset 0 0 0 1px rgba(var(--app-accent-rgb),0.08);
  }
  .app-shell-topbar .navbar-theme-icon{
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    flex-basis: 1rem;
  }
  .app-shell-topbar .navbar-action-icon{
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    flex-basis: 1rem;
  }
  .app-shell-topbar .dropdown-profile{
    min-width: 15rem;
  }
  /* Subnav sizing is handled by the mobile grid rules plus runtime measurement. */
  /* Ensure the custom mobile-topbar (if present) stays hidden */
  .mobile-topbar{ display: none !important; }
  .app-shell-content > .app-shell-main{ max-width: 100%; }
}

/* Very small devices: keep content tidy without shrinking the mobile subnav grid */
@media (max-width: 576px){
  :root{ --header-height: 40px; --shell-topbar-height: 40px; --sidebar-width: 100px; --content-x-padding: 8px; --content-y-padding: 4px; --shell-content-gap: 4px; }
  .subnav-wrap + .content{ font-size: 15px; }
  .content{ font-size: 15px; }
  .app-shell-topbar .collapse.navbar-collapse{
    gap: .25rem;
    padding: 0 .25rem;
  }
  .app-shell-topbar .school-logo{
    height: 24px !important;
  }
  .app-shell-topbar .navbar-school-title{
    font-size: .86rem !important;
    letter-spacing: .01em;
  }
  .app-shell-topbar .navbar-nav-icons{
    gap: .14rem;
  }
  .app-shell-topbar .navbar-action-link{
    width: 1.9rem;
    height: 1.9rem;
    flex-basis: 1.9rem;
    border-radius: .65rem;
  }
  .navbar-top .theme-control-toggle-label{
    height: 1.9rem !important;
    width: 1.9rem !important;
  }
  .app-shell-topbar .navbar-user-avatar{
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }
  .app-shell-topbar .navbar-user-link{
    gap: .2rem !important;
    padding: 0 .1rem 0 0;
  }
  .app-shell-topbar .navbar-profile-chevron{
    width: .75rem;
    height: .75rem;
    min-width: .75rem;
    min-height: .75rem;
  }
  .app-shell-topbar .dropdown-profile{
    min-width: 14rem;
  }
}

/* Minimal top bar shown only on small screens */
.mobile-topbar{
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--mobile-topbar-height, 36px);
  background: #ffffff; border-bottom: 1px solid #e5e5e5;
  z-index: 1030; display: none;
}
.mobile-topbar .school-abbr{
  color: var(--brand-green);
  font-weight: 800;
  letter-spacing: .08em;
  font-size: .84rem;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
.mobile-topbar .nav-link{ color: var(--brand-green); }
.mobile-topbar .nav-link:hover{ color: var(--brand-green-dark); }
.btn[aria-expanded] .fa-chevron-down{ transition: transform .2s ease; }
.btn[aria-expanded="true"] .fa-chevron-down{ transform: rotate(180deg); }


/* Highlight consolidated exams on Manage Exams index */
html[data-app-theme] .exams-page tr.ex-consolidated td {
  background-color: rgba(var(--app-accent-rgb), 0.08) !important;
  color: var(--app-text-color) !important;
}
html[data-app-theme] .exams-page tr.ex-consolidated:hover td {
  background-color: rgba(var(--app-accent-rgb), 0.14) !important;
}

/* ========== Marks Entry: Mobile Readability & Name Width ==========
   Increase table font size on small screens and prevent long names
   from wrapping to multiple lines by truncating with ellipsis.
*/
@media (max-width: 576px){
  /* Boost readability */
  .marks-table thead th{ font-size: .95rem !important; }
  .marks-table tbody td{ font-size: 1rem !important; }

  /* Name column: single line ellipsis */
  .marks-table .name-col{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55vw; }
  /* Fallback for legacy view where the Student column is 2nd */
  .marks-table td:nth-child(2),
  .marks-table th:nth-child(2){ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
}

/* ========== Home Analysis Card: Delta Badge ==========
   Small inline chip next to metric labels indicating deviation */
.analysis-card .delta-badge{
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 6px; padding: 3px 8px;
  background: #edf2f7; color: #1f2937; border-radius: 8px;
  font-weight: 500; font-size: .82rem; line-height: 1.05; /* keep number not bold */
}
.analysis-card .delta-badge .icon{ font-size: .98rem; font-weight: 900; line-height: 1; }
/* Color entire badge text by deviation type so number matches arrow */
.analysis-card .delta-badge.type-up{ color: #198754; }
.analysis-card .delta-badge.type-down{ color: #dc3545; }
.analysis-card .delta-badge.type-up .icon{ color: #198754; }
.analysis-card .delta-badge.type-down .icon{ color: #dc3545; }
.analysis-card .delta-badge.type-flat .icon{ color: #6c757d; }

/* ========== Theme Toggle Visibility ==========
   Show the icon that indicates the next theme (convert-to target).
   In light mode, show moon (switch to dark). In dark mode, show sun (switch to light). */
.theme-control-toggle-label{ display: inline-flex; align-items: center; justify-content: center; }
[data-bs-theme='light'] .theme-control-toggle-dark{ display: none !important; }
[data-bs-theme='dark'] .theme-control-toggle-light{ display: none !important; }

/* ========== Dark Mode Compatibility Hooks ========== */
[data-bs-theme='dark'] body{
  color: var(--app-text-color);
  background-color: var(--app-page-bg);
}
[data-bs-theme='dark'] .subnav-wrap{
  background: var(--app-subnav-bg);
  border-bottom: 1px solid var(--app-border-color);
}
[data-bs-theme='dark'] .mobile-topbar{
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border-color);
}
[data-bs-theme='dark'] .app-shell-topbar .navbar-action-link,
[data-bs-theme='dark'] .app-shell-topbar .theme-control-toggle-label,
[data-bs-theme='dark'] .app-shell-topbar .navbar-user-link{
  background: rgba(var(--app-accent-rgb), 0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--app-accent-rgb), 0.12);
}
[data-bs-theme='dark'] .app-shell-topbar .navbar-school-context,
[data-bs-theme='dark'] .app-shell-topbar .navbar-nav-icons{
  border-color: rgba(var(--app-accent-rgb), 0.18);
  background: linear-gradient(135deg, rgba(var(--app-accent-rgb), 0.16), rgba(var(--app-accent-rgb), 0.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-bs-theme='dark'] .card,
[data-bs-theme='dark'] .modal-content,
[data-bs-theme='dark'] .offcanvas,
[data-bs-theme='dark'] .dropdown-menu{
  background-color: var(--app-surface);
  border-color: var(--app-border-color);
  color: var(--app-text-color);
}
[data-bs-theme='dark'] .card.shadow-sm{ box-shadow: var(--app-shadow) !important; }
[data-bs-theme='dark'] .card-header{
  background-color: var(--app-surface-muted) !important;
  color: var(--app-text-color) !important;
  border-bottom-color: var(--app-border-color) !important;
}
[data-bs-theme='dark'] .table{
  color: var(--app-text-color);
}
[data-bs-theme='dark'] .table-striped tbody tr:nth-of-type(odd){
  background-color: var(--app-table-odd-bg);
}
[data-bs-theme='dark'] .table-responsive{
  border-color: var(--app-table-shell-border);
}
[data-bs-theme='dark'] .table thead th,
[data-bs-theme='dark'] .table-sticky thead th,
[data-bs-theme='dark'] .table-sticky thead td{
  border-bottom-color: var(--app-table-header-border);
}
[data-bs-theme='dark'] .table-bordered th,
[data-bs-theme='dark'] .table-bordered td{
  border-color: var(--app-table-border-color);
}
[data-bs-theme='dark'] body.boxed{
  background-color: var(--app-page-bg);
  color: var(--app-text-color);
}
[data-bs-theme='dark'] body.boxed .container{
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
}
[data-bs-theme='dark'] body.boxed .navbar,
[data-bs-theme='dark'] body.boxed .footer{
  background-color: #000000;
}
[data-bs-theme='dark'] body.boxed .navbar-nav .nav-link:hover{
  background-color: rgba(255,255,255,0.12);
}
[data-bs-theme='dark'] .appearance-control-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(15,23,42,0.6));
  border-color: var(--app-border-color);
  box-shadow: none;
}
[data-bs-theme='dark'] .appearance-control-title,
[data-bs-theme='dark'] .appearance-control-label{
  color: var(--app-text-color);
}
[data-bs-theme='dark'] .appearance-control-copy,
[data-bs-theme='dark'] .appearance-control-meta,
[data-bs-theme='dark'] .appearance-choice-copy{
  color: var(--app-muted-color);
}
[data-bs-theme='dark'] .appearance-choice{
  background: rgba(15,23,42,0.58);
  border-color: var(--app-border-color);
  color: var(--app-text-color);
}
[data-bs-theme='dark'] .appearance-choice:hover{
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 12px 30px rgba(0,0,0,.32);
}
[data-bs-theme='dark'] .appearance-choice.is-active,
[data-bs-theme='dark'] .appearance-choice[aria-pressed="true"]{
  background: rgba(var(--app-accent-rgb), 0.18);
  border-color: rgba(var(--app-accent-rgb), 0.34);
  color: #eff6ff;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
[data-bs-theme='dark'] .analysis-card .row.g-2 > [class*='col-']{ background: rgba(255,255,255,0.06); }
[data-bs-theme='dark'] .analysis-card .delta-badge{ background: rgba(255,255,255,0.08); color: var(--app-text-color); }
[data-bs-theme='dark'] .messages pre{
  background: var(--app-surface-muted);
  border-color: var(--app-border-color);
  color: var(--app-text-color);
}

/* ========== Top Appbar: Force Black Background (both modes) ========== */
[data-bs-theme='dark'] .app-shell-topbar{
  background-color: #000 !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}
/* Make topbar text/icons readable on black (dark mode only) */
[data-bs-theme='dark'] .app-shell-topbar .nav-link,
[data-bs-theme='dark'] .app-shell-topbar .navbar-brand,
[data-bs-theme='dark'] .app-shell-topbar .logo-text{
  color: #ffffff !important;
}
[data-bs-theme='dark'] .app-shell-topbar .nav-link:hover{ color: #e5e7eb !important; }
/* Keep warning (sun/moon) accent visible */
[data-bs-theme='dark'] .app-shell-topbar .theme-control-toggle-label .text-warning{ color: #ffc107 !important; }


/* Removed page-specific left offset for Fees → Structures on large screens */
/* Sticky in-page subnav for Fees ? Structures (below fixed top bar) */
body.ctx-fees.route-fees-structures .page-structures-subnav{
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: var(--header-height, 56px); /* align directly under the measured header */
  left: 0; right: 0; /* ensure full-width sticking */
  z-index: 1032; /* above content and cards, below any modals */
  background: var(--bs-body-bg, #ffffff);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
@media (max-width: 576px){
  body.ctx-fees.route-fees-structures .page-structures-subnav{
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: var(--header-height, 56px); /* align directly under the measured header */
  left: 0; right: 0; /* ensure full-width sticking */
  z-index: 1032; /* above content and cards, below any modals */
  background: var(--bs-body-bg, #ffffff);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
}

/* Sticky in-page subnav for Fees ? Structures using finance-module scope */
[data-finance-module="fees-structures"] .page-structures-subnav{
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: var(--header-height, 56px);
  left: 0; right: 0;
  z-index: 1032;
  background: var(--bs-body-bg, #ffffff);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
@media (max-width: 576px){
  [data-finance-module="fees-structures"] .page-structures-subnav{
    top: calc(var(--header-height, 56px) + var(--mobile-topbar-height, 0px));
  }
}

/* ========== Mobile Table/Card Width Optimization ========== */
@media (max-width: 767.98px){
  :root{
    --mobile-edge-gap: 6px;
    --mobile-card-x: .45rem;
    --mobile-card-y: .45rem;
    --mobile-table-cell-x: .32rem;
    --mobile-table-cell-y: .24rem;
  }

  .content > main.container,
  .content > main.container-fluid,
  .content main.container,
  .content main.container-fluid,
  .content .container,
  .content .container-sm,
  .content .container-md,
  .content .container-lg,
  .content .container-xl,
  .content .container-xxl,
  .content .container-fluid{
    padding-left: var(--mobile-edge-gap) !important;
    padding-right: var(--mobile-edge-gap) !important;
  }

  .content .card-body:not(.p-0){
    padding: var(--mobile-card-y) var(--mobile-card-x) !important;
  }

  .content .card-header:not(.p-0),
  .content .card-footer:not(.p-0){
    padding: .45rem var(--mobile-card-x) !important;
  }

  .content .card-body > .table-responsive,
  .content .card-body > .table{
    margin-left: -.45rem;
    margin-right: -.45rem;
    width: calc(100% + .9rem);
  }

  .content .card-body > .table-responsive > .table,
  .content .card-body > .table{
    margin-bottom: 0;
  }

  .content .table td,
  .content .table th{
    padding: var(--mobile-table-cell-y) var(--mobile-table-cell-x) !important;
  }

  .content .table-sm td,
  .content .table-sm th{
    padding: .18rem .24rem !important;
  }
}