/* views.css — consolidated view-level CSS extracted from inline <style> blocks.
   Colors use the MD3 theme tokens (custom-theme.css) so they follow light/dark.
   Each var() falls back to the original value if the theme class is absent. */

/* ===== Content layout — single standard gap/padding for every view =====
   Page content renders directly inside <main class="app-main">. We set the page
   gutter here ONCE (1rem) so views no longer need per-row `m-4`/`g-4`: any top-level
   content row gets a uniform bottom gap and normal Bootstrap column gutters whose
   content edge lines up with the page title. */
.app-main {
    padding: 1rem 1rem 1.5rem;
}

.app-main > .row {
    --bs-gutter-x: 1rem !important;
    /* Restore Bootstrap's row/col gutter compensation so a `g-4`/`g-3` first row
       doesn't leave its vertical gutter (~1.5rem) as an extra gap above the first
       card. Plain `.row` (gutter-y 0) is unaffected; grids keep their row gaps. */
    margin-top: calc(-1 * var(--bs-gutter-y, 0px)) !important;
    margin-bottom: 1rem !important;
    margin-left: calc(-0.5 * var(--bs-gutter-x)) !important;
    margin-right: calc(-0.5 * var(--bs-gutter-x)) !important;
}

.app-main > .row:last-child {
    margin-bottom: 0 !important;
}

/* Page title block (breadcrumb now lives in the top header bar).
   Title matches the hero-page headings (am/scan/erm) so every index page reads
   the same; a small bottom pad keeps the first card close under the title. */
.page-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0 0.4rem;
}

.page-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--on-background, var(--bs-body-color));
    margin: 0;
}

/* Opt-in back arrow before the title (ViewData["BackUrl"]) — same look as .ba-back. */
.page-header__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--on-surface);
    border: 1px solid var(--outline);
    background: var(--surface);
    font-size: 1.1rem;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
    flex: 0 0 auto;
}

.page-header__back:hover { background: var(--surface-variant); color: var(--primary); }

@media (max-width: 575.98px) {
    .app-main {
        padding: 0.75rem 0.75rem 1rem;
    }
}

/* ===== Student listing ===== */

.student-card-list .dt-layout-row:first-child {
  display: none;
}

.student-card-table,
.student-card-table tbody {
  display: block;
}

.student-card-table thead {
  display: none;
}

.student-card-table tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 1rem;
  text-align: left;
}

.student-card-table tbody tr,
.student-card-table tbody td {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.student-list-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  border: 1px solid var(--outline, var(--bs-border-color));
  border-top: 3px solid var(--primary, var(--bs-primary));
  border-radius: .5rem;
  background: var(--surface, var(--bs-body-bg));
  color: var(--on-surface, var(--bs-body-color));
  box-shadow: 0 .125rem .4rem rgba(0, 0, 0, .08);
  /* visible so the footer row-actions kebab (.ct-actions-menu) isn't clipped by the card */
  overflow: visible;
}

.student-list-card__header,
.student-list-card__footer {
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1rem;
}

.student-list-card__header {
  border-bottom: 1px solid var(--outline, var(--bs-border-color));
}

.student-list-card__name {
  min-width: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.student-list-card__admission {
  color: var(--on-surface-variant, var(--bs-secondary-color));
  font-size: .82rem;
}

.student-list-card__body {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 1rem;
  flex: 1;
  align-items: start;
  padding: 1rem;
}

.student-list-card__photo {
  display: flex;
  width: 88px;
  height: 88px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--outline, var(--bs-border-color));
  border-radius: 50%;
  background: var(--surface-variant, var(--bs-tertiary-bg));
  color: var(--primary, var(--bs-primary));
  font-size: 2rem;
  overflow: hidden;
}

.student-list-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.student-list-card__details {
  display: grid;
  gap: .55rem;
  min-width: 0;
}

.student-list-card__field {
  display: grid;
  gap: .1rem;
  min-width: 0;
}

.student-list-card__label {
  color: var(--on-surface-variant, var(--bs-secondary-color));
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.student-list-card__value {
  overflow-wrap: anywhere;
}

.student-list-card__footer {
  border-top: 1px solid var(--outline, var(--bs-border-color));
  justify-content: space-between;
  flex-wrap: wrap;
}

.student-list-card__footer .btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

@media (max-width: 575.98px) {
  .student-list-card__body {
    grid-template-columns: 1fr;
  }
}

/* ===== Card-list skeleton loading (student/teacher card grids) =====
   A .skel-grid of placeholder cards rendered next to the DataTable. The page JS
   toggles .is-loading on the card-list wrapper from the DataTable `processing`
   event: while loading the skeleton grid shows and the table (plus its built-in
   spinner) hides. Shapes mirror the real list card so there is no layout jump. */

.skel-grid {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 1rem;
}

.student-card-list.is-loading .skel-grid,
.teacher-card-list.is-loading .skel-grid {
  display: grid;
}

/* Match each listing's real card-grid column width so cards don't reflow on swap */
.teacher-card-list .skel-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

.student-card-list.is-loading .dt-container,
.teacher-card-list.is-loading .dt-container {
  display: none;
}

.student-card-list .dt-processing,
.teacher-card-list .dt-processing {
  display: none !important;
}

.skel-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--outline, var(--bs-border-color));
  border-top: 3px solid var(--outline, var(--bs-border-color));
  border-radius: .5rem;
  background: var(--surface, var(--bs-body-bg));
  box-shadow: 0 .125rem .4rem rgba(0, 0, 0, .08);
  overflow: hidden;
}

.skel-card__header,
.skel-card__footer {
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .85rem 1rem;
}

.skel-card__header {
  justify-content: space-between;
  border-bottom: 1px solid var(--outline, var(--bs-border-color));
}

.skel-card__footer {
  justify-content: flex-end;
  border-top: 1px solid var(--outline, var(--bs-border-color));
}

.skel-card__body {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem;
}

.skel-card__lines {
  display: grid;
  flex: 1;
  gap: .55rem;
  min-width: 0;
}

.skel {
  display: block;
  border-radius: .35rem;
  background-color: var(--surface-variant, var(--bs-tertiary-bg));
  background-image: linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, var(--on-surface, #000) 8%, transparent) 50%,
      transparent 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}

@keyframes skel-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skel {
    animation: none;
  }
}

.skel--line {
  height: .7rem;
}

.skel--avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
}

.skel--badge {
  flex: 0 0 auto;
  width: 56px;
  height: 1.25rem;
  border-radius: 999px;
}

.skel--btn {
  width: 72px;
  height: 29px;
  border-radius: .375rem;
}

.skel-card__header .skel--line:nth-child(1) { width: 65%; }
.skel-card__header .skel--line:nth-child(2) { width: 45%; height: .6rem; }
.skel-card__body .skel--line:nth-child(1) { width: 70%; }
.skel-card__body .skel--line:nth-child(2) { width: 55%; }
.skel-card__body .skel--line:nth-child(3) { width: 85%; }

@media (max-width: 575.98px) {
  .skel-card__body {
    grid-template-columns: 1fr;
  }
}

/* Bulk-screen skeleton shapes (BulkCore.showSkeleton — 'roster'/'bars'/'idcards').
   .skel-tile mirrors the promote-tab .bp-card; .skel--bar the monthly-fee accordion
   row; .skel-idcard a CR80 ID card + its download button in a .bid-grid. */

.skel-tile {
  border: 1px solid var(--outline, var(--bs-border-color));
  border-radius: 12px;
  padding: 1rem;
  background: var(--surface, var(--bs-body-bg));
}

.skel-tile__top {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.skel-tile__top .skel-card__lines {
  flex: 1;
}

.skel-tile__top .skel--line:nth-child(1) { width: 70%; }
.skel-tile__top .skel--line:nth-child(2) { width: 45%; height: .6rem; }

.skel--avatar-sm {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}

.skel-tile__meta {
  display: flex;
  gap: 1rem;
  margin: .85rem 0;
  padding: .6rem 0;
  border-top: 1px solid var(--outline, var(--bs-border-color));
  border-bottom: 1px solid var(--outline, var(--bs-border-color));
}

.skel-tile__meta .skel--line {
  width: 40%;
}

.skel--input {
  width: 100%;
  height: 38px;
  border-radius: .375rem;
}

.skel--bar {
  display: block;
  height: 72px;
  border-radius: 14px;
}

/* Attendance status-card skeleton ('statuscards') — row of 4 status buttons */
.skel-tile__btnrow {
  display: flex;
  gap: .3rem;
  margin-top: .75rem;
}

.skel-tile__btnrow .skel--btn {
  flex: 1;
  width: auto;
  height: 34px;
}

.skel-idcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  width: 100%;
  max-width: 260px;
}

.skel--idcard {
  width: 100%;
  aspect-ratio: 856 / 540; /* CR80 card proportions */
  border-radius: 12px;
}

.skel-idcard .skel--btn {
  width: 140px;
}

/* Week-grid table skeleton ('weekgrid') — header + one bar-row per period,
   7 columns (period/time + Mon–Sat) matching the timetable tables */
.skel-table {
  border: 1px solid var(--outline, var(--bs-border-color));
  border-radius: .5rem;
  background: var(--surface, var(--bs-body-bg));
  overflow: hidden;
}

.skel-table__row {
  display: grid;
  grid-template-columns: minmax(70px, 110px) repeat(6, 1fr);
  gap: .75rem;
  align-items: center;
  padding: .8rem .75rem;
  border-top: 1px solid var(--outline, var(--bs-border-color));
}

.skel-table__row:first-child {
  border-top: 0;
}

.skel-table__row .skel {
  height: .75rem;
  width: 75%;
}

.skel-table__row--head {
  border-bottom: 2px solid var(--outline, var(--bs-border-color));
}

.skel-table__row--head .skel {
  width: 55%;
}

/* ===== Teacher listing ===== */

.teacher-card-list .dt-layout-row:first-child {
  display: none;
}

.teacher-card-table,
.teacher-card-table tbody {
  display: block;
}

.teacher-card-table thead {
  display: none;
}

.teacher-card-table tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 1rem;
  text-align: left;
}

.teacher-card-table tbody tr,
.teacher-card-table tbody td {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.teacher-list-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  border: 1px solid var(--outline, var(--bs-border-color));
  border-top: 3px solid var(--primary, var(--bs-primary));
  border-radius: .5rem;
  background: var(--surface, var(--bs-body-bg));
  color: var(--on-surface, var(--bs-body-color));
  box-shadow: 0 .125rem .4rem rgba(0, 0, 0, .08);
  overflow: hidden;
}

.teacher-list-card__header,
.teacher-list-card__footer {
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1rem;
}

.teacher-list-card__header {
  border-bottom: 1px solid var(--outline, var(--bs-border-color));
}

.teacher-list-card__name {
  min-width: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.teacher-list-card__code {
  color: var(--on-surface-variant, var(--bs-secondary-color));
  font-size: .82rem;
}

/* Employee type chip in the card header (replaces the old Active/Inactive badge). */
.teacher-list-card__type {
  flex: 0 0 auto;
  background-color: var(--secondary-container, var(--bs-secondary-bg));
  color: var(--on-secondary-container, var(--bs-body-color));
  font-weight: 600;
  white-space: nowrap;
}

.teacher-list-card__body {
  display: grid;
  gap: .9rem;
  flex: 1;
  padding: 1rem;
}

.teacher-list-card__summary {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.teacher-list-card__photo {
  display: flex;
  width: 88px;
  height: 88px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--outline, var(--bs-border-color));
  border-radius: 50%;
  background: var(--surface-variant, var(--bs-tertiary-bg));
  color: var(--primary, var(--bs-primary));
  font-size: 2rem;
  overflow: hidden;
}

.teacher-list-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teacher-list-card__profile {
  display: grid;
  gap: .65rem;
  align-content: start;
  justify-items: center;
  min-width: 0;
}

.teacher-list-card__class-teacher {
  display: grid;
  gap: .45rem;
  width: 100%;
  min-width: 0;
}

.teacher-list-card__class-teacher > .badge {
  justify-self: start;
}

.teacher-list-card__class-teacher .teacher-list-card__assignment {
  width: 100%;
  font-size: .85rem;
  padding: .45rem .55rem;
}

.teacher-list-card__details {
  display: grid;
  gap: .55rem;
  min-width: 0;
}

.teacher-list-card__field {
  display: grid;
  gap: .1rem;
  min-width: 0;
}

.teacher-list-card__label {
  color: var(--on-surface-variant, var(--bs-secondary-color));
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.teacher-list-card__value {
  overflow-wrap: anywhere;
}

.teacher-list-card__assignment {
  border-radius: .35rem;
  background: var(--surface-variant, var(--bs-tertiary-bg));
  padding: .55rem .65rem;
}

/* Subject assignments live in a footer dropdown beside ID Card / Actions (the class-teacher
   block in the left column still renders inline). */
.teacher-list-card__assignments-menu > .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* Count pill: tertiary container (teal) rather than the grey .text-bg-secondary, so it reads
   as a value against the outline toggle instead of another piece of chrome. */
.teacher-list-card__assignments-menu .badge {
  font-size: .7rem;
  line-height: 1;
  padding: .3em .5em;
}

/* Panel holds read-only rows, not actionable items, so it opts out of the kit's
   dropdown-item padding and scrolls once a teacher has a long assignment list. */
/* Wide enough that a "G1 - Grade 1 / BA - Boys A" scope line stays on one line — the panel is
   viewport-bounded (data-bs-boundary), so it can exceed its own card's width.
   Doubled selector on purpose: the kit's `.custom-theme .ct-actions-pop` sets min-width: 190px
   at specificity (0,2,0), so a single-class rule here would silently lose. */
.teacher-list-card__assignments-pop.ct-actions-pop {
  gap: .45rem;
  min-width: 22rem;
  max-width: min(30rem, 92vw);
  max-height: 15rem;
  overflow-y: auto;
  padding: .5rem;
}

/* Only when open — a bare `display: grid` would override Bootstrap's `.dropdown-menu
   { display: none }` and leave every card's panel permanently expanded. */
.teacher-list-card__assignments-pop.show {
  display: grid;
}

.teacher-list-card__assignments-pop .teacher-list-card__assignment {
  width: 100%;
}

.teacher-list-card__footer {
  border-top: 1px solid var(--outline, var(--bs-border-color));
  justify-content: flex-end;
}

.teacher-list-card__footer .btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

@media (max-width: 575.98px) {
  .teacher-list-card__summary {
    grid-template-columns: 1fr;
  }
}

/* ===== Profile image wrapper (User & Role management) ===== */

.profile-img-wrapper {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--surface-variant, #f4f6f9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== Role management — role cards (RoleManagement/Index) =====
   Header carries the role name with its Active/Inactive `.status-pill` pinned right; the body
   is two stats: permissions granted / assignable (with a meter) and the users holding the role. */

.role-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.role-card__name {
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-card__body {
    display: grid;
    gap: .9rem;
    align-content: start;
}

.role-card__stat {
    display: grid;
    gap: .4rem;
}

.role-card__stat--inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border-top: 1px solid var(--outline, var(--bs-border-color));
    padding-top: .75rem;
}

.role-card__stat-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.role-card__stat-label {
    color: var(--on-surface-variant, var(--bs-secondary-color));
    font-size: .8125rem;
    font-weight: 600;
}

.role-card__stat-label i {
    margin-inline-end: .3rem;
}

.role-card__stat-value {
    font-weight: 700;
    white-space: nowrap;
}

.role-card__stat-total {
    color: var(--on-surface-variant, var(--bs-secondary-color));
    font-weight: 600;
}

.role-card__meter {
    height: .35rem;
    border-radius: 999px;
    background: var(--surface-variant, var(--bs-tertiary-bg));
    overflow: hidden;
}

.role-card__meter > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary, var(--bs-primary));
    transition: width .25s ease;
}

[data-bs-theme="dark"] .role-card__meter > span {
    background: var(--tertiary, var(--bs-primary));
}

/* ===== Permission picker (Assign claim to user / role) ===== */

.permission-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.permission-btn {
    min-width: 70px;
    text-align: center;
}

/* ===== Chart of Account tree ===== */

.coa-tree-container {
    min-height: 240px;
}

.coa-tree,
.coa-tree ul {
    list-style: none;
    margin: 0;
    padding-left: 1.5rem;
}

.coa-tree {
    padding-left: 0;
}

.coa-tree-item {
    position: relative;
    margin-bottom: 0.75rem;
}

.coa-tree-item::before {
    content: "";
    position: absolute;
    top: 2rem;
    left: 0.65rem;
    bottom: -0.75rem;
    width: 1px;
    background: var(--outline, #d7dee7);
}

.coa-tree-item:last-child::before {
    display: none;
}

.coa-tree-item > .coa-tree-node::before {
    content: "";
    position: absolute;
    top: 1rem;
    left: -0.85rem;
    width: 0.85rem;
    height: 1px;
    background: var(--outline, #d7dee7);
}

.coa-tree-root > .coa-tree-node::before {
    display: none;
}

.coa-tree-node {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--outline, #dbe5ef);
    border-radius: 0.85rem;
    background: var(--surface, #fff);
}

.coa-tree-toggle {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--outline, #cfd8e3);
    background: var(--surface, #fff);
    flex: 0 0 auto;
}

.coa-tree-toggle-placeholder {
    width: 2rem;
    flex: 0 0 auto;
}

.coa-tree-content {
    flex: 1 1 auto;
    min-width: 0;
}

.coa-tree-title {
    font-weight: 600;
    color: var(--on-surface, #1f2d3d);
    margin-bottom: 0.2rem;
    word-break: break-word;
}

.coa-tree-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.coa-tree-actions {
    display: flex;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.coa-tree-item.is-collapsed > ul {
    display: none;
}

.coa-tree-item.is-collapsed > .coa-tree-node .coa-tree-toggle i {
    transform: rotate(-90deg);
}

.coa-tree-empty {
    padding: 2rem;
    text-align: center;
    border: 1px dashed var(--outline, #cfd8e3);
    border-radius: 0.85rem;
    color: var(--on-surface-variant, #6c7a89);
    background: var(--surface-variant, #fbfcfe);
}

/* ===== Document editor hero (title + subtitle on the left, actions on the right) =====
   Shared by the full-page document editors (Purchase Order today; Journal / Goods Receipt /
   Delivery Note / Stock Document / Stock Count / Opening Stock / Company can adopt it as-is).
   Replaces the bare `d-flex justify-content-between align-items-lg-center` those pages used:
   there the long subtitle grew to fill the row, squeezed the action group, and its buttons
   wrapped onto a second line that collided with the paragraph. Here the text block is the only
   thing allowed to flex, the actions never shrink, and no button label ever breaks. */

.doc-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.doc-hero__text {
    flex: 1 1 20rem;
    min-width: 0;                 /* lets the paragraph wrap instead of forcing the row wider */
}

/* A measure, not the full row width — long help text otherwise runs to the action buttons. */
.doc-hero__text > p {
    max-width: 74ch;
}

/* `0 1 auto` + min-width:0, not `0 0 auto`: an editor in a late status can show seven actions
   (save / issue / compare / cancel / PDF / back …). Allowed to shrink, the group wraps its own
   buttons instead of overflowing the row — and because each button is nowrap, shrinking never
   squashes a label. */
.doc-hero__actions {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    /* optical alignment: sits level with the title's cap height, not its line box */
    padding-top: 0.25rem;
}

/* Every action is icon + text on one line — a wrapped "Back to / List" reads as two buttons. */
.doc-hero__actions .btn {
    white-space: nowrap;
}

/* Below lg the actions become their own full-width row, left-aligned under the text. */
@media (max-width: 991.98px) {
    .doc-hero__actions {
        margin-left: 0;
        justify-content: flex-start;
        padding-top: 0;
    }
}

/* ===== Purchase Order editor — line item rows =====
   A grid table, not a stack of cards: the labels are written once in the head row so each line is a
   single row of controls. The head and the rows share one column template, so they stay aligned. */

.po-lines-scroll {
    overflow-x: auto;
}

.po-lines {
    min-width: 68rem;
}

.po-lines-head,
.po-line-row {
    display: grid;
    grid-template-columns:
        2rem                    /* line no      */
        minmax(9rem, 1.3fr)     /* product      */
        minmax(10rem, 1.7fr)    /* description  */
        minmax(9rem, 1.3fr)     /* account      */
        5.5rem                  /* qty          */
        6.5rem                  /* unit price   */
        6.5rem                  /* discount     */
        minmax(7.5rem, 0.9fr)   /* tax rate     */
        7.5rem                  /* line total   */
        2.25rem;                /* remove       */
    gap: 0.5rem;
    align-items: center;
}

.po-lines-head {
    padding: 0 0 0.5rem;
    border-bottom: 1px solid var(--outline, var(--bs-border-color));
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.po-line-row {
    padding: 0.5rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--outline, #cfd8e3) 45%, transparent);
}

.po-line-row:last-child {
    border-bottom: 0;
}

.po-line-no {
    font-weight: 600;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.po-line-actions {
    display: flex;
    justify-content: flex-end;
}

/* Select2 replaces the <select> with its own container — without this it ignores the grid cell, and
   its control stands taller than the `form-control-sm` inputs beside it. */
.po-line-row .select2-container {
    width: 100% !important;
}

.po-line-row .select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + 0.5rem + 2px);
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    font-size: 0.875rem;
}

.po-line-row .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
}

/* The derived side of a line — only rendered once a receipt or bill exists against it. */
.po-line-meta {
    grid-column: 1 / -1;
    padding: 0.15rem 0 0.1rem 2.5rem;
    font-size: 0.8rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.po-line-meta-sep {
    padding: 0 0.5rem;
    opacity: 0.5;
}

/* ===== Journal (voucher) editor — line rows =====
   Same grid-table idea as the purchase order lines, with the voucher's own columns. It replaces a
   stack of one card per line: a ten-line voucher was ten cards and metres of scrolling, and the
   five dropdowns on each of them were labelled over and over. Here the labels are written once in
   the head row and a line is a single row of controls. */

.jv-lines-scroll {
    overflow-x: auto;
}

.jv-lines {
    min-width: 76rem;
}

.jv-lines-head,
.jv-line-row {
    display: grid;
    grid-template-columns:
        2rem                    /* line no     */
        minmax(11rem, 1.6fr)    /* account     */
        minmax(10rem, 1.5fr)    /* description */
        minmax(8rem, 1fr)       /* cost centre */
        minmax(8rem, 1fr)       /* project     */
        minmax(8rem, 1fr)       /* customer    */
        minmax(8rem, 1fr)       /* supplier    */
        7rem                    /* debit       */
        7rem                    /* credit      */
        4.5rem;                 /* include + remove */
    gap: 0.5rem;
    align-items: center;
}

.jv-lines-head {
    padding: 0 0 0.5rem;
    border-bottom: 1px solid var(--outline, var(--bs-border-color));
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.jv-line-row {
    padding: 0.5rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--outline, #cfd8e3) 45%, transparent);
}

.jv-line-row:last-child {
    border-bottom: 0;
}

.jv-line-no {
    font-weight: 600;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.jv-line-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

/* A line switched out of the voucher: still there, still editable, but not counted in the totals
   and not posted. Dimmed so the totals and the rows agree at a glance. */
.jv-line-row--excluded {
    opacity: 0.55;
}

/* Select2 replaces the <select> with its own container — without this it ignores the grid cell and
   stands taller than the `form-control-sm` inputs beside it. */
.jv-line-row .select2-container {
    width: 100% !important;
}

.jv-line-row .select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + 0.5rem + 2px);
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    font-size: 0.875rem;
}

.jv-line-row .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
}

/* ===== Purchase Order editor — goods receive drawer ===== */

.gr-drawer.offcanvas-end {
    width: min(30rem, 100vw);
    background: var(--surface, var(--bs-body-bg));
    color: var(--on-surface, var(--bs-body-color));
    border-left: 1px solid var(--outline, var(--bs-border-color));
}

.gr-drawer .offcanvas-header {
    border-bottom: 1px solid var(--outline, var(--bs-border-color));
}

.gr-drawer .offcanvas-title i {
    color: var(--tertiary, var(--primary));
}

/* Footer pinned below the scrolling body — the totals and actions stay visible however long the
   line list gets (the offcanvas itself is a flex column). */
.gr-drawer-footer {
    padding: 1rem 1rem 1.25rem;
    border-top: 1px solid var(--outline, var(--bs-border-color));
    background: var(--surface, var(--bs-body-bg));
}

.gr-lines {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gr-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--outline, var(--bs-border-color));
    border-radius: 0.75rem;
    background: var(--surface, var(--bs-body-bg));
}

.gr-line--ineligible {
    background: var(--surface-variant, var(--bs-tertiary-bg));
    opacity: 0.65;
}

.gr-line-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.gr-line-meta {
    font-size: 0.8125rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.gr-line-qty {
    width: 7.5rem;
    flex-shrink: 0;
}

.gr-line-reason {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

/* ===== Finance Dashboard ===== */

.finance-hero-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--on-primary) 16%, transparent), transparent 30%),
        linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%);
    color: var(--on-primary);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--primary) 30%, transparent);
}

.finance-hero-card::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -45px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--on-primary) 8%, transparent);
}

.finance-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--on-primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--on-primary) 22%, transparent);
    font-size: .9rem;
    font-weight: 600;
}

.finance-chip--light {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
    color: var(--primary);
}

.finance-chip--success {
    background: color-mix(in srgb, var(--chart-success) 16%, transparent);
    border-color: color-mix(in srgb, var(--chart-success) 32%, transparent);
    color: var(--chart-success);
}

.finance-card {
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(20, 41, 85, 0.06);
}

.finance-card > .card-header,
.finance-card > .card-body {
    border-radius: inherit;
}

.finance-card .card-header {
    border-bottom: 1px solid var(--outline, #edf2f8);
    background: transparent;
}

.finance-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--on-surface, #132238);
}

.finance-subtitle {
    margin: .25rem 0 0;
    color: var(--on-surface-variant, #6e7c92);
    font-size: .92rem;
}

.finance-info-box {
    height: 100%;
    min-height: 118px;
    margin-bottom: 0;
    display: flex;
    align-items: stretch;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(20, 41, 85, 0.06);
    border: 1px solid var(--outline, #e7edf7);
    background: var(--surface, #fff);
    overflow: hidden;
}

.finance-info-box .info-box-icon {
    width: 66px;
    flex: 0 0 66px;
    align-self: stretch;
    height: auto;
    border-radius: 0;
    font-size: 1.6rem;
}

.finance-info-box .info-box-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    padding: .85rem 1.1rem;
}

.finance-info-box .info-box-text {
    color: var(--on-surface-variant, #5d6b82);
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: .35rem;
}

.finance-info-box .info-box-number {
    color: var(--on-surface, #132238);
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.15;
}

.finance-info-box__hint {
    margin-top: .35rem;
    font-size: .85rem;
    color: var(--on-surface-variant, #6e7c92);
}

.chart-shell {
    height: 340px;
}

.chart-shell--sm {
    height: 295px;
}

.cash-flow-list {
    display: grid;
    gap: 1rem;
}

.cash-flow-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-bottom: .95rem;
    border-bottom: 1px solid var(--outline, #edf2f8);
}

.cash-flow-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.cash-flow-item__label {
    color: var(--on-surface-variant, #69788f);
    font-size: .9rem;
    font-weight: 700;
}

.cash-flow-item__value {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--on-surface, #132238);
}

.cash-flow-item__value.positive { color: var(--chart-success); }
.cash-flow-item__value.negative { color: var(--chart-danger); }

.transaction-list {
    display: grid;
    gap: 1rem;
}

.transaction-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .9rem;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--outline, #edf2f8);
}

.transaction-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.transaction-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.transaction-icon.in {
    background: color-mix(in srgb, var(--chart-success) 16%, transparent);
    color: var(--chart-success);
}

.transaction-icon.out {
    background: color-mix(in srgb, var(--chart-danger) 16%, transparent);
    color: var(--chart-danger);
}

.transaction-title {
    font-weight: 700;
    color: var(--on-surface, #16263d);
}

.transaction-meta {
    margin-top: .2rem;
    color: var(--on-surface-variant, #72819a);
    font-size: .85rem;
}

.transaction-amount {
    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap;
}

.transaction-amount.in {
    color: var(--chart-success);
}

.transaction-amount.out {
    color: var(--chart-danger);
}

.bank-account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.bank-account-tile {
    border: 1px solid var(--outline, #e7edf7);
    border-radius: 18px;
    padding: 1.1rem;
    background: var(--surface, #fff);
}

.bank-account-tile__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: .8rem;
}

.bank-account-tile__name {
    font-weight: 800;
    color: var(--on-surface, #16263d);
}

.bank-account-tile__meta {
    color: var(--on-surface-variant, #72819a);
    font-size: .85rem;
    margin-top: .15rem;
}

.bank-account-tile__amount {
    margin-top: .8rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--on-surface, #132238);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 180px;
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--on-surface-variant, #7b889c);
    font-weight: 600;
}

.empty-state__icon {
    font-size: 2.2rem;
    color: color-mix(in srgb, var(--primary) 55%, var(--on-surface-variant));
    opacity: .8;
}

@media (max-width: 767.98px) {
    .finance-info-box .info-box-number {
        font-size: 1.6rem;
    }
}

/* ===== School (Home) Dashboard ===== */

.dashboard-hero-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--on-primary) 16%, transparent), transparent 30%),
        linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 62%, var(--secondary)) 100%);
    color: var(--on-primary);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--primary) 30%, transparent);
}

.dashboard-hero-card::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -48px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--on-primary) 8%, transparent);
}

/* shared hero text (school + finance) */
.dashboard-hero-title {
    margin: 0 0 .5rem;
    font-weight: 800;
    color: var(--on-primary);
}

.dashboard-hero-lead {
    max-width: 760px;
    color: color-mix(in srgb, var(--on-primary) 88%, transparent);
}

.dashboard-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.1rem;
}

/* hero snapshot panel (replaces inline styles) */
.dashboard-snapshot {
    position: relative;
    z-index: 1;
    padding: 1.25rem 1.35rem;
    border-radius: 18px;
    background: color-mix(in srgb, var(--on-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--on-primary) 22%, transparent);
}

.dashboard-snapshot__label {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .76rem;
    font-weight: 700;
    margin-bottom: .65rem;
    color: color-mix(in srgb, var(--on-primary) 82%, transparent);
}

.dashboard-snapshot__value {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--on-primary);
}

.dashboard-snapshot__value--sm {
    font-size: 1.35rem;
}

.dashboard-snapshot__caption {
    font-size: .85rem;
    color: color-mix(in srgb, var(--on-primary) 80%, transparent);
}

.dashboard-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--on-primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--on-primary) 20%, transparent);
    /* Base chips sit on the primary-coloured hero, so pin the text to the hero's contrast
       colour instead of inheriting --on-surface (dark in light mode → unreadable). */
    color: var(--on-primary);
    font-size: .9rem;
    font-weight: 600;
}

.dashboard-chip--light {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
    color: var(--primary);
}

.dashboard-chip--success {
    background: color-mix(in srgb, var(--chart-success) 16%, transparent);
    border-color: color-mix(in srgb, var(--chart-success) 32%, transparent);
    color: var(--chart-success);
}

/* tinted KPI stat icons (shared by both dashboards) */
.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-variant);
    color: var(--on-surface-variant);
}

.stat-icon--primary   { background: color-mix(in srgb, var(--primary) 14%, transparent);       color: var(--primary); }
.stat-icon--secondary { background: color-mix(in srgb, var(--secondary) 18%, transparent);     color: var(--secondary); }
.stat-icon--tertiary  { background: color-mix(in srgb, var(--tertiary) 16%, transparent);      color: var(--tertiary); }
.stat-icon--success   { background: color-mix(in srgb, var(--chart-success) 16%, transparent); color: var(--chart-success); }
.stat-icon--danger    { background: color-mix(in srgb, var(--chart-danger) 16%, transparent);  color: var(--chart-danger); }
.stat-icon--warning   { background: color-mix(in srgb, var(--chart-warning) 18%, transparent); color: var(--chart-warning); }
.stat-icon--info      { background: color-mix(in srgb, var(--chart-3) 18%, transparent);       color: var(--chart-3); }

/* slim percentage bar inside a KPI card */
.stat-progress {
    margin-top: .55rem;
    height: 7px;
    border-radius: 999px;
    background: var(--surface-variant);
    overflow: hidden;
}

.stat-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.dashboard-card {
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(20, 41, 85, 0.06);
}

.dashboard-card > .card-body,
.dashboard-card > .card-header {
    border-radius: inherit;
}

.dashboard-card .card-header {
    border-bottom: 1px solid var(--outline, #edf2f8);
    background: transparent;
}

.dashboard-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--on-surface, #132238);
}

.dashboard-subtitle {
    margin: .25rem 0 0;
    color: var(--on-surface-variant, #6e7c92);
    font-size: .92rem;
}

.dashboard-info-box {
    height: 100%;
    min-height: 118px;
    margin-bottom: 0;
    display: flex;
    align-items: stretch;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(20, 41, 85, 0.06);
    border: 1px solid var(--outline, #e7edf7);
    background: var(--surface, #fff);
    overflow: hidden;
}

.dashboard-info-box .info-box-icon {
    width: 66px;
    flex: 0 0 66px;
    align-self: stretch;
    height: auto;
    border-radius: 0;
    font-size: 1.6rem;
}

.dashboard-info-box .info-box-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    padding: .85rem 1.1rem;
}

.dashboard-info-box .info-box-text {
    color: var(--on-surface-variant, #5d6b82);
    font-size: .9rem;
    font-weight: 700;
    text-transform: none;
    margin-bottom: .35rem;
}

.dashboard-info-box .info-box-number {
    color: var(--on-surface, #132238);
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.15;
}

.dashboard-info-box__hint {
    margin-top: .35rem;
    font-size: .85rem;
    color: var(--on-surface-variant, #6e7c92);
}

.attendance-list {
    display: grid;
    gap: .85rem;
}

.attendance-list__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
}

.attendance-list__name {
    font-weight: 700;
    color: var(--on-surface, #16263d);
}

.attendance-list__bar {
    margin-top: .55rem;
    height: 9px;
    border-radius: 999px;
    background: var(--surface-variant, #edf2f8);
    overflow: hidden;
}

.attendance-list__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary) 0%, var(--tertiary) 100%);
}

.attendance-list__bar span.low {
    background: linear-gradient(90deg, var(--chart-warning) 0%, var(--chart-danger) 100%);
}

.attendance-list__value {
    font-size: 1rem;
    font-weight: 800;
    color: var(--on-surface, #132238);
    min-width: 54px;
    text-align: right;
}

.student-chip {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.student-chip__avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%);
    color: var(--on-primary);
    font-weight: 800;
}

.student-chip__name {
    font-weight: 700;
    color: var(--on-surface);
}

.student-chip__meta {
    font-size: .82rem;
    color: var(--on-surface-variant);
}

.low-attendance-table {
    width: 100%;
    margin: 0;
}

.low-attendance-table th {
    border-top: 0;
    color: var(--on-surface-variant, #6f7d94);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.low-attendance-table td {
    vertical-align: middle;
    color: var(--on-surface, #1b2b42);
    font-weight: 500;
}

.percent-pill {
    display: inline-flex;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--chart-danger) 15%, transparent);
    color: var(--chart-danger);
    font-weight: 800;
    font-size: .86rem;
}

/* Phones: tighter hero type/spacing and shorter chart shells (shared by both dashboards) */
@media (max-width: 575.98px) {
    .dashboard-hero-title {
        font-size: 1.4rem;
    }

    .dashboard-hero-lead {
        font-size: .95rem;
    }

    .dashboard-snapshot {
        padding: 1rem 1.1rem;
    }

    .dashboard-snapshot__value {
        font-size: 1.5rem;
    }

    .dashboard-snapshot__value--sm {
        font-size: 1.2rem;
    }

    .chart-shell {
        height: 260px;
    }

    .chart-shell--sm {
        height: 240px;
    }
}

/* ===== Bulk Admission (Student/BulkAdmission) ===== */

.ba-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.ba-header__left {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}

.ba-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--on-surface);
    border: 1px solid var(--outline);
    background: var(--surface);
    font-size: 1.1rem;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
    flex: 0 0 auto;
}

.ba-back:hover { background: var(--surface-variant); color: var(--primary); }

.ba-title { font-size: 1.6rem; font-weight: 700; margin: 0; color: var(--on-background); }
.ba-subtitle { margin: .15rem 0 0; color: var(--on-surface-variant); font-size: .9rem; }

.ba-process { white-space: nowrap; }

.ba-card { border-radius: 14px; }

.ba-card__head,
.ba-preview__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem;
}

/* numbered step badge */
.ba-step { display: inline-flex; align-items: center; gap: .6rem; }

.ba-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-primary);
    font-size: .85rem;
    font-weight: 700;
    flex: 0 0 auto;
}

.ba-step__label {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--on-surface);
}

.ba-divider { border-color: var(--outline); opacity: .6; margin: 1.1rem 0; }

.ba-help {
    font-size: .78rem;
    font-style: italic;
    color: var(--on-surface-variant);
    text-align: center;
    margin: .6rem 0 0;
}

.ba-accepted {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--on-surface-variant);
}

/* PRO TIP card — fixed deep-green accent panel (readable in light AND dark;
   not tied to --primary, which becomes bright teal in dark mode). */
.ba-protip {
    background: linear-gradient(150deg, #0B3B35 0%, #06302A 100%);
    color: #C8DBD7;
    border: 1px solid #14463F;
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
}

.ba-protip__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: .8rem;
    text-transform: uppercase;
    color: #2FD0BE;
    margin-bottom: .5rem;
}

.ba-protip p { font-size: .85rem; line-height: 1.5; color: #C8DBD7; }
.ba-protip strong { color: #FFFFFF; }

/* guidelines footer (Entry Guidelines / Did you know) */
.ba-guidelines { margin-top: 1.25rem; }
.ba-guide .card-body { display: flex; gap: 1rem; align-items: flex-start; }
.ba-guide__icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: var(--on-primary);
    font-size: 1.2rem;
}
.ba-guide__title { font-size: 1.05rem; font-weight: 700; color: var(--on-surface); margin: 0 0 .45rem; }
.ba-guide__list { margin: 0; padding-left: 1.1rem; }
.ba-guide__list li { font-size: .85rem; color: var(--on-surface-variant); margin-bottom: .3rem; line-height: 1.45; }
.ba-guide__list li::marker { color: var(--primary); }
.ba-guide__list strong { color: var(--on-surface); }
.ba-guide__text { font-size: .85rem; color: var(--on-surface-variant); line-height: 1.55; margin: 0; }
.ba-guide__text strong { color: var(--on-surface); }

/* ===== Teacher subject assignment — card view ===== */
.ts-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.ts-card {
    position: relative; /* anchors the .ts-card--classteacher accent bar */
    display: flex;
    flex-direction: column;
    gap: .75rem;
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: 14px;
    padding: 1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ts-card:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--outline)); }

/* The class-teacher assignment is the one that carries pastoral responsibility for the
   section, so its card is lifted out of the row: tinted surface, primary border and a
   left accent bar. Only one per class/section is allowed (validated in teacher.form.js). */
.ts-card--classteacher {
    background: color-mix(in srgb, var(--primary) 7%, var(--surface));
    border-color: color-mix(in srgb, var(--primary) 55%, var(--outline));
    box-shadow: 0 0 14px -6px var(--glow-primary, transparent);
}
.ts-card--classteacher::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 14px 0 0 14px;
    background: var(--primary);
}

/* The remove button is taken out of the flow and parked on the "Class / Section" label line
   (the label is short, so nothing collides). That lets the picker span the full card width,
   so it ends up exactly as wide as the Subject select below it. */
.ts-card__head { position: relative; }
.ts-card__subjectwrap { min-width: 0; }
.ts-card__label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin-bottom: .25rem;
}
.ts-card__subject { font-weight: 700; }

.ts-card__del {
    position: absolute;
    top: -.2rem;
    right: 0;
    z-index: 1;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--on-surface-variant);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.ts-card__del:hover { background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--error); }

.ts-card__sublabel { font-size: .72rem; color: var(--on-surface-variant); margin-bottom: .2rem; }

.ts-card__foot {
    border-top: 1px solid var(--outline); padding-top: .65rem;
    display: flex; align-items: center; gap: .6rem;
}
/* Class Teacher pill reads YES / NO instead of the .scan-toggle default ON / OFF. */
.ts-card__toggle { --scan-toggle-on: 'YES'; --scan-toggle-off: 'NO'; }
.ts-card__togglelabel { font-size: .85rem; color: var(--on-surface); }

/* file upload row */
.ba-uploadrow { display: flex; gap: .6rem; flex-wrap: wrap; align-items: stretch; }

.ba-file {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .35rem .35rem .35rem .9rem;
    border: 1px solid var(--outline);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
    color: var(--on-surface-variant);
}

.ba-file:hover { border-color: var(--tertiary); }
.ba-file__name { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ba-file__browse {
    flex: 0 0 auto;
    background: var(--surface-variant);
    color: var(--on-surface);
    border-radius: 9px;
    padding: .35rem .85rem;
    font-size: .85rem;
    font-weight: 600;
}

.ba-validate { white-space: nowrap; }

/* data preview */
.ba-preview__title {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--on-surface);
    margin-right: .5rem;
}

.ba-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--on-surface-variant);
}

.ba-chip .ba-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ba-chip--valid .ba-dot { background: #16A34A; }
.ba-chip--error .ba-dot { background: var(--error); }

.ba-empty {
    text-align: center;
    color: var(--on-surface-variant);
    padding: 2.5rem 1rem;
}

.ba-empty i { font-size: 2rem; opacity: .5; display: block; margin-bottom: .5rem; }
.ba-empty p { font-size: .9rem; }

.ba-preview-table { font-size: .88rem; }
.ba-preview-table thead th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--on-surface-variant);
    background: var(--surface-variant);
    border-bottom: 0;
}

.ba-preview-table tbody td { vertical-align: middle; }
.ba-row--invalid { background: color-mix(in srgb, var(--error) 7%, transparent); }

.ba-status {
    display: inline-flex;
    align-items: center;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .5px;
    padding: .2rem .55rem;
    border-radius: 999px;
}

.ba-status--ready { background: color-mix(in srgb, #16A34A 15%, transparent); color: #15803D; }
.ba-status--invalid { background: color-mix(in srgb, var(--error) 15%, transparent); color: var(--error); }
.ba-status__msg { font-size: .7rem; color: var(--error); margin-top: .15rem; }

.ba-icon {
    border: 0;
    background: transparent;
    color: var(--on-surface-variant);
    padding: .25rem .35rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.ba-icon:hover { background: var(--surface-variant); color: var(--primary); }
.ba-icon--danger:hover { color: var(--error); }

/* upload summary dialog rows */
.ba-sum { display: flex; flex-direction: column; gap: .1rem; }
.ba-sum__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .25rem;
    border-bottom: 1px solid var(--outline);
}
.ba-sum__row:last-child { border-bottom: 0; }
.ba-sum__row span { color: var(--on-surface-variant); font-size: .9rem; }
.ba-sum__row strong { font-size: 1rem; }

/* ----- Tabs ----- */
/* .ba-tabs now inherits the app-wide flat underline .nav-tabs style (custom-theme.css) */
.ba-tabcontent { padding-top: 1.25rem; }
.ba-tabtools { display: flex; justify-content: flex-end; margin-bottom: 1rem; }

/* ----- Manual Bulk Entry grid ----- */
.ba-manual__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.ba-manual__title { font-size: 1.25rem; font-weight: 700; margin: 0; color: var(--on-surface); }
.ba-manual__sub { margin: .15rem 0 0; color: var(--on-surface-variant); font-size: .88rem; }
.ba-manual__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.ba-manual__context {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .85rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
    background: var(--surface-variant);
    border: 1px solid var(--outline);
    border-radius: 12px;
}
.ba-ctx { flex: 1 1 180px; min-width: 160px; }
.ba-ctx--wide { flex: 2 1 280px; }
.ba-ctx .form-label { font-size: .72rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--on-surface-variant); }
.ba-ctx .cs-picker { width: 100%; }
.ba-ctx__refresh { flex: 0 0 auto; }

.ba-manual__tablewrap { border: 1px solid var(--outline); border-radius: 12px; }
.ba-manual-table { margin-bottom: 0; }
.ba-manual-table > thead th {
    background: var(--surface-variant);
    color: var(--on-surface-variant);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--outline);
    white-space: nowrap;
}
.ba-manual-table > tbody > tr > td { vertical-align: middle; }
.ba-manual-table .ba-mrow__idx { font-variant-numeric: tabular-nums; }
.ba-manual-table .form-control,
.ba-manual-table .form-select { border-color: transparent; background: transparent; box-shadow: none; }
.ba-manual-table .form-control:hover,
.ba-manual-table .form-select:hover { border-color: var(--outline); }
.ba-manual-table .form-control:focus,
.ba-manual-table .form-select:focus { border-color: var(--tertiary); background: var(--surface); }
.ba-manual-table .is-invalid {
    border-color: var(--error) !important;
    background: color-mix(in srgb, var(--error) 8%, transparent);
}
.ba-manual-table tr.ba-mrow--invalid > td:first-child { box-shadow: inset 3px 0 0 var(--error); }

.ba-manual__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
}
.ba-addrow {
    border: 1px dashed var(--outline);
    background: transparent;
    color: var(--primary);
    border-radius: 10px;
    padding: .5rem 1rem;
    font-weight: 600;
}
.ba-addrow:hover { background: var(--surface-variant); border-color: var(--tertiary); }
[data-bs-theme="dark"] .ba-addrow { color: var(--tertiary); }
.ba-manual__counts { display: flex; align-items: center; gap: 1.25rem; font-size: .85rem; color: var(--on-surface-variant); }
.ba-attention { color: var(--error); font-weight: 600; }
.ba-manual__mode { margin: .75rem .25rem 0; font-size: .75rem; color: var(--on-surface-variant); }

/* ===== Bulk Promote / Graduate tab (Student/BulkAdmission #tab-promote) ===== */
.bp-config__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.bp-mode .btn-check:checked + label {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}
[data-bs-theme="dark"] .bp-mode .btn-check:checked + label {
    background: var(--tertiary);
    color: var(--on-surface);
    border-color: var(--tertiary);
}

.bp-flow {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    flex-wrap: wrap;
}
.bp-flow__panel {
    flex: 1 1 320px;
    background: var(--surface-variant);
    border: 1px solid var(--outline);
    border-radius: 12px;
    padding: 1rem;
}
.bp-flow__panel--target { transition: opacity .2s ease; }
.bp-flow__panel--disabled { opacity: .45; pointer-events: none; }
.bp-flow__title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--on-surface-variant);
    margin-bottom: .75rem;
}
.bp-flow__arrow {
    display: flex;
    align-items: center;
    color: var(--on-surface-variant);
    font-size: 1.5rem;
}
.bp-config__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
}

.bp-roster__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.bp-roster__title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.bp-roster__sub { font-size: .85rem; color: var(--on-surface-variant); margin: .15rem 0 0; }
.bp-roster__actions { display: flex; gap: .5rem; }

/* ----- live count chips ----- */
.bp-counts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.bp-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 600;
    padding: .3rem .65rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.bp-chip strong { font-weight: 800; }
.bp-chip__dot { width: .55rem; height: .55rem; border-radius: 50%; flex-shrink: 0; }

.bp-chip--selected {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}
.bp-chip--selected .bp-chip__dot { background: var(--primary); }
[data-bs-theme="dark"] .bp-chip--selected { color: var(--tertiary); }
[data-bs-theme="dark"] .bp-chip--selected .bp-chip__dot { background: var(--tertiary); }

.bp-chip--action {
    color: #1b7f4b;
    background: color-mix(in srgb, #21a366 14%, transparent);
    border-color: color-mix(in srgb, #21a366 35%, transparent);
}
.bp-chip--action .bp-chip__dot { background: #21a366; }
[data-bs-theme="dark"] .bp-chip--action { color: #4ade80; }

.bp-chip--retain {
    color: #b26a00;
    background: color-mix(in srgb, #e6920a 16%, transparent);
    border-color: color-mix(in srgb, #e6920a 38%, transparent);
}
.bp-chip--retain .bp-chip__dot { background: #e6920a; }
[data-bs-theme="dark"] .bp-chip--retain { color: #fbbf4c; }

.bp-chip--none {
    color: var(--on-surface-variant);
    background: var(--surface-variant);
    border-color: var(--outline);
}
.bp-chip--none .bp-chip__dot { background: var(--on-surface-variant); }

.bp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}
.bp-card {
    position: relative;
    border: 1px solid var(--outline);
    border-radius: 12px;
    padding: 1rem;
    background: var(--surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bp-card--off { opacity: .72; }
.bp-card--off:hover { opacity: 1; }

/* Selected + Promote/Graduate -> green; Selected + Retain -> amber. */
.bp-card--action {
    border-color: #21a366;
    box-shadow: 0 0 0 1px #21a366;
    background: color-mix(in srgb, #21a366 6%, var(--surface));
}
.bp-card--retain {
    border-color: #e6920a;
    box-shadow: 0 0 0 1px #e6920a;
    background: color-mix(in srgb, #e6920a 8%, var(--surface));
}
.bp-card__check { position: absolute; top: .75rem; right: .75rem; margin: 0; }
.bp-card__check .form-check-input { width: 1.15rem; height: 1.15rem; cursor: pointer; }
.bp-card__top { display: flex; align-items: center; gap: .75rem; padding-right: 1.5rem; }
.bp-card__avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--primary-container);
    color: var(--on-primary-container);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
    overflow: hidden;
}
.bp-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.bp-card__name { font-weight: 600; line-height: 1.2; }
.bp-card__adm { font-size: .78rem; color: var(--on-surface-variant); }
.bp-card__meta {
    display: flex;
    gap: 1rem;
    margin: .85rem 0;
    padding: .6rem 0;
    border-top: 1px solid var(--outline);
    border-bottom: 1px solid var(--outline);
}
.bp-card__metaitem { display: flex; flex-direction: column; gap: .1rem; }
.bp-card__metalabel { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--on-surface-variant); }
.bp-card__metaval { font-size: .85rem; font-weight: 600; }
.bp-card__decision .form-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--on-surface-variant); margin-bottom: .25rem; }

.bp-actionbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background: var(--primary);
    color: var(--on-primary);
    position: sticky;
    bottom: 1rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
[data-bs-theme="dark"] .bp-actionbar { background: var(--surface-variant); color: var(--on-surface); border: 1px solid var(--outline); }
.bp-actionbar__info { display: flex; flex-direction: column; }
.bp-actionbar__label { font-size: .68rem; letter-spacing: .08em; opacity: .85; }
.bp-actionbar__count { font-size: 1.05rem; }
.bp-actionbar__count strong { font-size: 1.3rem; }

/* ===== Student siblings tab ===== */
.sib-card {
    height: 100%;
    border: 1px solid var(--outline);
    border-radius: 14px;
    background: var(--surface);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sib-card:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
[data-bs-theme="dark"] .sib-card:hover { border-color: var(--tertiary); }
.sib-card__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sib-card__avatar {
    width: 52px; height: 52px; flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary-container); color: var(--on-primary-container);
    font-weight: 700;
}
.sib-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sib-card__name { font-weight: 700; line-height: 1.2; }
.sib-card__adm { font-size: .8rem; color: var(--on-surface-variant); margin-top: -.35rem; }
.sib-card__meta { display: flex; flex-direction: column; gap: .25rem; font-size: .84rem; color: var(--on-surface-variant); }
.sib-card__meta i { color: var(--primary); margin-right: .35rem; }
[data-bs-theme="dark"] .sib-card__meta i { color: var(--tertiary); }
.sib-card__link {
    margin-top: auto;
    align-self: flex-start;
    font-weight: 600;
    text-decoration: none;
    color: var(--primary);
}
[data-bs-theme="dark"] .sib-card__link { color: var(--tertiary); }
.sib-card__link:hover { text-decoration: underline; }

.sib-badge {
    font-size: .68rem; font-weight: 700;
    padding: .14rem .55rem; border-radius: 999px; white-space: nowrap;
}
.sib-badge--ok { color: #1b7f4b; background: color-mix(in srgb, #21a366 14%, transparent); }
[data-bs-theme="dark"] .sib-badge--ok { color: #4ade80; }
.sib-badge--warn { color: #b26a00; background: color-mix(in srgb, #e6920a 16%, transparent); }
[data-bs-theme="dark"] .sib-badge--warn { color: #fbbf4c; }
.sib-badge--muted { color: var(--on-surface-variant); background: var(--surface-variant); }

.sib-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    border: 1px dashed var(--outline);
    border-radius: 14px;
    color: var(--on-surface-variant);
    background: var(--surface-variant);
}
.sib-empty i { font-size: 1.8rem; display: block; margin-bottom: .5rem; opacity: .8; }

/* ===== Monthly Fee Generation tab (#tab-fees) ===== */
.mf-dates {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: .35rem .75rem;
    border: 1px dashed var(--outline);
    border-radius: 8px;
    font-size: .85rem;
    color: var(--on-surface-variant);
    background: var(--surface-variant);
}

/* Accordion items — two per row, fully rounded. */
.mf-acc { border-radius: 14px; }
.mf-acc__item {
    border: 1px solid var(--outline);
    border-radius: 14px !important;
    overflow: hidden;
    background: var(--surface);
    transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.mf-acc--selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
[data-bs-theme="dark"] .mf-acc--selected { border-color: var(--tertiary); box-shadow: 0 0 0 1px var(--tertiary); }
.mf-acc--off { opacity: .72; }
.mf-acc--off:hover { opacity: 1; }

.mf-acc__bar { display: flex; align-items: stretch; }
.mf-acc__check {
    display: flex; align-items: center; margin: 0; padding-left: .9rem;
}
.mf-acc__check .form-check-input { width: 1.15rem; height: 1.15rem; cursor: pointer; }

/* Re-skin the Bootstrap accordion button onto the design tokens. */
.mf-acc__btn.accordion-button {
    display: flex; align-items: center; gap: .75rem;
    background: var(--surface); color: var(--on-surface);
    box-shadow: none; padding: .85rem 1rem;
}
.mf-acc__btn.accordion-button:not(.collapsed) {
    background: var(--surface-variant); color: var(--on-surface);
    box-shadow: none;
}
.mf-acc__btn.accordion-button:focus { box-shadow: none; border: 0; }
.mf-acc__avatar { width: 42px; height: 42px; flex-shrink: 0; }
.mf-acc__id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mf-acc__name { font-weight: 700; line-height: 1.2; }
.mf-acc__meta { font-size: .76rem; color: var(--on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-acc__amount { text-align: right; flex-shrink: 0; margin-right: .4rem; display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
.mf-acc__total { font-weight: 800; font-size: 1.05rem; }

.mf-badge {
    display: inline-block;
    font-size: .66rem;
    font-weight: 700;
    padding: .12rem .5rem;
    border-radius: 999px;
}
.mf-badge--ready { color: #1b7f4b; background: color-mix(in srgb, #21a366 14%, transparent); }
[data-bs-theme="dark"] .mf-badge--ready { color: #4ade80; }
.mf-badge--done { color: #b26a00; background: color-mix(in srgb, #e6920a 16%, transparent); }
[data-bs-theme="dark"] .mf-badge--done { color: #fbbf4c; }
.mf-badge--blocked { color: var(--error); background: var(--error-container); }

.mf-acc__body { background: var(--surface); }

/* Section caption (e.g. "Fee Structure"). */
.mf-feelabel,
.mf-settings__title {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin-bottom: .5rem;
}

/* Per-student, toggleable fee lines. */
.mf-lines { display: flex; flex-direction: column; gap: .15rem; }
.mf-line {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .4rem .25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--outline) 45%, transparent);
    font-size: .86rem;
    cursor: pointer;
}
.mf-line:last-child { border-bottom: 0; }
.mf-line .form-check-input { margin: 0; flex-shrink: 0; cursor: pointer; }
.mf-line__head { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .4rem; }
.mf-line__amt { font-weight: 700; white-space: nowrap; }
.mf-line__tag {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .05rem .4rem;
    border-radius: 999px;
    color: var(--tertiary);
    background: color-mix(in srgb, var(--tertiary) 14%, transparent);
}
/* Dim an unchecked line so the selected ones read clearly. */
.mf-line:has(.mf-line__check:not(:checked)) .mf-line__head,
.mf-line:has(.mf-line__check:not(:checked)) .mf-line__amt { opacity: .5; }

/* Per-student billing settings panel. */
.mf-settings {
    background: var(--surface-variant);
    border: 1px solid color-mix(in srgb, var(--outline) 60%, transparent);
    border-radius: 12px;
    padding: .85rem .9rem;
}
.mf-mini {
    display: block;
    font-size: .74rem;
    font-weight: 600;
    color: var(--on-surface-variant);
    margin-bottom: .2rem;
}
.mf-settings .form-control { background: var(--surface); }
.mf-settings__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid var(--outline);
    margin-top: .75rem;
    padding-top: .55rem;
    font-weight: 800;
}
.mf-settings__total .mf-est { font-size: 1.15rem; }

.mf-acc__actions { margin-top: .85rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

/* Read-only actual breakdown shown on an already-invoiced card. */
.mf-invoiced { background: var(--surface); }
.mf-ilines { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .25rem; }
.mf-iline {
    display: flex;
    justify-content: space-between;
    gap: .6rem;
    padding: .4rem .25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--outline) 45%, transparent);
    font-size: .86rem;
}
.mf-iline:last-child { border-bottom: 0; }
.mf-iline span:last-child { font-weight: 700; white-space: nowrap; }
.mf-iline--muted { color: var(--on-surface-variant); font-style: italic; }
.mf-iline--muted span:last-child { font-weight: 400; }
.mf-iline--neg span:last-child { color: var(--error); }

/* Progress bar sits in the green action bar next to Bulk Generate. */
#mfActionBar .bulk-progress { width: 280px; max-width: 100%; margin: .5rem 0 0; }

/* ===== Shared bulk-processing utilities (BulkCore) ===== */
.bulk-progress { margin: .85rem 0 0; }
.bulk-progress .progress {
    height: 1.25rem;
    border-radius: 999px;
    background: var(--surface-variant);
}
.bulk-progress__bar {
    background: var(--primary);
    color: var(--on-primary);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.25rem;
    transition: width .25s ease;
}
[data-bs-theme="dark"] .bulk-progress__bar { background: var(--tertiary); color: var(--on-surface); }

/* ===== App header — current batch chip ===== */

.hdr-batch-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .75rem;
    margin-right: .35rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--on-primary-container);
    background: var(--primary-container);
    border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
}

.hdr-batch-chip i { color: var(--tertiary); }

@media (max-width: 575.98px) {
    .hdr-batch-chip { font-size: .72rem; padding: .25rem .6rem; }
}

/* ===== Page-header date chip (shared: Daily Attendance, Scan Attendance) ===== */

.page-date-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--on-surface);
    background: color-mix(in srgb, var(--tertiary) 7%, var(--surface));
    border: 1px solid var(--outline);
}

.page-date-chip i { color: var(--on-surface-variant); }

/* ===== Authentication (standalone login page, Layout = null) ===== */

/* Split shell: deep-green visual panel (left) + login form (right) */
.auth-page {
    height: 100vh;
    margin: 0;
    overflow: hidden;
    background: var(--background);
    color: var(--on-background);
}

.auth-split {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    height: 100vh;
}

/* ---- Left: branded visual panel with the Three.js canvas ---- */
.auth-visual {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 2.25rem 3rem;
    background:
        radial-gradient(120% 90% at 15% 10%, color-mix(in srgb, var(--tertiary) 22%, transparent), transparent 60%),
        linear-gradient(160deg, #00241F 0%, #00302A 55%, #001A16 100%);
    color: #EAF5F3;
}

.auth-visual__canvas {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0 !important;
    pointer-events: none;
}

/* gentle bottom scrim so the headline + features stay readable over the canvas */
.auth-visual::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 22, 18, .92) 0%, rgba(0, 22, 18, .55) 45%, transparent 100%);
}

/* Lift the panel content above the canvas + scrim (canvas excluded — it must
   stay absolutely positioned, otherwise it becomes a flex item and pushes the
   brand/copy out of view). */
.auth-visual > *:not(.auth-visual__canvas) {
    position: relative;
    z-index: 1;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.auth-brand__name {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .2px;
    color: #FFFFFF;
}

.auth-brand__name small {
    display: block;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--tertiary);
}

.auth-visual__bottom {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.auth-visual__copy {
    max-width: 30rem;
}

.auth-visual__copy h2 {
    font-size: clamp(1.5rem, 2vw, 1.95rem);
    font-weight: 700;
    line-height: 1.2;
    color: #FFFFFF;
    margin-bottom: 1.4rem;
}

.auth-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .85rem;
}

.auth-features li {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
}

.auth-features .auth-feat-ico {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.2rem;
    color: var(--tertiary);
    background: color-mix(in srgb, var(--tertiary) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--tertiary) 30%, transparent);
}

.auth-features h6 {
    margin: 0 0 .15rem;
    font-size: .98rem;
    font-weight: 600;
    color: #FFFFFF;
}

.auth-features p {
    margin: 0;
    font-size: .85rem;
    line-height: 1.45;
    color: #AFC8C3;
}

.auth-visual__foot {
    font-size: .78rem;
    color: #8FA9A4;
}

/* ---- Right: login form column ---- */
.auth-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--surface);
    height: 100vh;
    overflow-y: auto;
}

.auth-card {
    width: 100%;
    max-width: 26rem;
}

.auth-card__head h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--on-surface);
    margin-bottom: .35rem;
}

.auth-card__head p {
    color: var(--on-surface-variant);
    margin-bottom: 1.4rem;
}

/* custom-theme.css colors .form-control::placeholder, which beats Bootstrap's
   transparent rule; this standalone page has no site.css to restore it, so the
   floating label and placeholder would render on top of each other when empty. */
.auth-card .form-floating > .form-control::placeholder { color: transparent; }
.auth-card .form-floating > .form-control:focus::placeholder { color: var(--on-surface-variant); }

/* token-driven floating inputs (override AdminLTE input-group look) */
.auth-card .form-floating > .form-control {
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: 12px;
    color: var(--on-surface);
}

.auth-card .form-floating > .form-control:focus {
    border-color: var(--tertiary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--tertiary) 25%, transparent);
}

.auth-card .form-floating > label {
    color: var(--on-surface-variant);
}

.auth-card .auth-pass-toggle {
    position: absolute;
    top: 50%;
    right: .85rem;
    transform: translateY(-50%);
    z-index: 5;
    border: 0;
    background: transparent;
    color: var(--on-surface-variant);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.auth-card .auth-pass-toggle:hover { color: var(--tertiary); }

/* ---- Password strength meter + requirement chips ---- */
.auth-pass-meter {
    --pass-hue: var(--on-surface-variant); /* recolored per strength level below */
    margin-top: .65rem;
}

.auth-pass-meter.is-weak   { --pass-hue: var(--error); }
.auth-pass-meter.is-fair   { --pass-hue: #E8A13D; }   /* semantic amber */
.auth-pass-meter.is-good   { --pass-hue: var(--tertiary); }
.auth-pass-meter.is-strong { --pass-hue: #1FA860; }   /* semantic green */

.auth-pass-meter__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
}

.auth-pass-meter__label {
    font-size: .82rem;
    color: var(--on-surface-variant);
}

.auth-pass-meter__level {
    font-size: .82rem;
    font-weight: 700;
    color: var(--pass-hue);
}

.auth-pass-meter__track {
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--on-surface-variant) 18%, transparent);
    overflow: hidden;
}

.auth-pass-meter__bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--pass-hue);
    transition: width .25s ease, background-color .25s ease;
}

.auth-pass-checks {
    list-style: none;
    margin: .6rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .45rem;
}

.auth-pass-checks li {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--on-surface-variant);
    background: color-mix(in srgb, var(--on-surface-variant) 10%, transparent);
    transition: color .2s ease, background-color .2s ease;
}

.auth-pass-checks li i {
    font-size: .8rem;
    color: color-mix(in srgb, var(--on-surface-variant) 55%, transparent);
    transition: color .2s ease;
}

.auth-pass-checks li.is-met {
    color: #1FA860;
    background: color-mix(in srgb, #1FA860 14%, transparent);
}

.auth-pass-checks li.is-met i { color: #1FA860; }

.auth-submit,
.auth-submit:hover,
.auth-submit:focus,
.auth-submit:active,
.auth-submit:disabled {
    background-color: var(--primary);
    color: var(--on-primary) !important;
    border: 1px solid var(--primary);
    border-radius: 12px;
    padding: .7rem 1rem;
    font-weight: 600;
    transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
}

.auth-submit:hover { filter: brightness(1.15); box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 30%, transparent); }
.auth-submit:focus { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--tertiary) 35%, transparent); }
.auth-submit:active { transform: translateY(1px); }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.15rem 0;
    color: var(--on-surface-variant);
    font-size: .75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--outline);
}

.auth-altbtn {
    border: 1px solid var(--outline);
    border-radius: 12px;
    background: var(--surface);
    color: var(--on-surface);
    padding: .6rem;
    font-weight: 600;
    transition: background .15s ease, border-color .15s ease;
}

.auth-altbtn:hover {
    background: var(--surface-variant);
    border-color: var(--tertiary);
    color: var(--on-surface);
}

/* ---- Two-factor OTP code boxes (LoginWith2fa.cshtml) ---- */
.auth-otp {
    display: flex;
    justify-content: space-between;
    gap: .55rem;
}

.auth-otp__box {
    flex: 0 1 3.1rem;
    width: 3.1rem;
    height: 3.5rem;
    padding: 0;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--on-surface);
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: 12px;
    caret-color: var(--tertiary);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-otp__box:focus {
    outline: 0;
    border-color: var(--tertiary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--tertiary) 25%, transparent);
}

.auth-otp__box.is-filled { border-color: var(--tertiary); }

/* Responsive: hide visual panel on small screens, stack to one column */
@media (max-width: 991.98px) {
    .auth-split { grid-template-columns: 1fr; }
    .auth-visual { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-visual__canvas { display: none; }
}

.btn-loader {
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    display: inline-block;
    animation: spin 0.8s linear infinite;
    margin-left: 8px;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 9999;
    transition: 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #1ebe5d;
    color: white;
    transform: scale(1.1);
}

/* ===== Student profile / workspace (UpdateStudent.cshtml) ===== */

.sp-hero__top {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-start;
    justify-content: space-between;
}

.sp-hero__id {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    min-width: 0;
}

.sp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.sp-avatar {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--outline, var(--bs-border-color));
    background: var(--primary-container, var(--bs-primary-bg-subtle));
    color: var(--on-primary-container, var(--bs-primary-text-emphasis));
    font-size: 1.9rem;
    font-weight: 700;
}

.sp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sp-eyebrow {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .72rem;
    font-weight: 700;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.sp-title {
    margin: 0 0 .25rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--on-surface, var(--bs-body-color));
    overflow-wrap: anywhere;
}

.sp-tagline {
    margin: 0;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.min-w-0 { min-width: 0; }

/* chips */
.sp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.sp-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .75rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: 1px solid var(--outline, var(--bs-border-color));
    background: var(--surface-variant, var(--bs-tertiary-bg));
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.sp-chip i { font-size: .95rem; }

.sp-chip--primary {
    border-color: transparent;
    background: var(--primary-container, var(--bs-primary-bg-subtle));
    color: var(--on-primary-container, var(--bs-primary-text-emphasis));
}

button.sp-chip,
a.sp-chip { cursor: pointer; transition: filter .15s ease; }

button.sp-chip:hover,
a.sp-chip:hover { filter: brightness(.97); color: var(--on-surface-variant, var(--bs-secondary-color)); }

.sp-chip--primary:hover { color: var(--on-primary-container, var(--bs-primary-text-emphasis)); }

.sp-due-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .75rem;
    font-size: .82rem;
    font-weight: 700;
}

/* summary cards */
.sp-card {
    height: 100%;
    transition: box-shadow .15s ease, transform .15s ease;
}

.sp-card:hover {
    box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

.sp-card .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sp-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.sp-card__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.sp-icon-primary   { background: var(--primary-container, var(--bs-primary-bg-subtle));   color: var(--on-primary-container, var(--bs-primary-text-emphasis)); }
.sp-icon-secondary { background: var(--secondary-container, var(--bs-secondary-bg-subtle)); color: var(--on-secondary-container, var(--bs-secondary-text-emphasis)); }
.sp-icon-tertiary  { background: var(--tertiary-container, var(--bs-info-bg-subtle));     color: var(--on-tertiary-container, var(--bs-info-text-emphasis)); }

.sp-person__meta {
    display: grid;
    gap: .65rem;
}

.sp-field__label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.sp-field__value {
    color: var(--on-surface, var(--bs-body-color));
    overflow-wrap: anywhere;
}

/* academic stat tiles */
.sp-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.sp-stat {
    padding: .6rem .75rem;
    border-radius: 10px;
    background: var(--surface-variant, var(--bs-tertiary-bg));
}

.sp-stat__label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.sp-stat__value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--on-surface, var(--bs-body-color));
}

/* finance */
.sp-finance__amount {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    color: var(--on-surface, var(--bs-body-color));
}

.sp-progress {
    height: .5rem;
    border-radius: 999px;
    background: var(--surface-variant, var(--bs-tertiary-bg));
}

.sp-finance__rows { display: grid; gap: 0; }

.sp-finance__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 0;
}

.sp-finance__row + .sp-finance__row { border-top: 1px solid var(--outline, var(--bs-border-color)); }

.sp-finance__label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    font-size: .9rem;
}

.sp-finance__value { font-size: 1.1rem; font-weight: 700; }

/* per-card quick actions pinned to the bottom */
.sp-card__actions {
    margin-top: auto;
    padding-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* detail tabs — inherit the app-wide flat underline .nav-tabs style (custom-theme.css) */

.sp-tab-content {
    border: 1px solid var(--outline, var(--bs-border-color));
    border-radius: 12px;
    padding: 1.25rem;
    background: var(--surface, var(--bs-body-bg));
    color: var(--on-surface, var(--bs-body-color));
}

@media (max-width: 575.98px) {
    .sp-hero__actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .sp-card,
    button.sp-chip,
    a.sp-chip { transition: none; }
    .sp-card:hover { transform: none; }
}

/* student form (profile tab) grouped sections.
   `.form-section__title` is the shared, entity-neutral alias — use it (with `.form-section`
   below) to group a long form into labelled blocks on any view. */
.sp-form-section__title,
.form-section__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .65rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.sp-form-section__title i,
.form-section__title i { color: var(--primary, var(--bs-primary)); }

/* Consecutive sections get a hairline rule so the groups read as separate blocks without
   boxing each one in its own card. */
.form-section + .form-section {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--outline) 45%, transparent);
}

/* ===== Student attendance calendar (_StudentAttendanceTab.cshtml) ===== */
.att-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.att-cal-dow {
    text-align: center;
    font-weight: 600;
    font-size: .75rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    padding: 2px 0;
}

.att-cal-cell {
    min-height: 76px;
    border: 1px solid var(--outline, var(--bs-border-color));
    border-radius: 10px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}

.att-cal-cell--blank { border-color: transparent; background: transparent; }

.att-cal-daynum {
    font-size: .78rem;
    font-weight: 600;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    line-height: 1;
}

.att-cal-cell--today {
    outline: 2px solid var(--primary, var(--bs-primary));
    outline-offset: -1px;
}

.att-cal-tag {
    font-size: .7rem;
    font-weight: 600;
    border-radius: 6px;
    padding: 1px 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.att-cal-key {
    border-radius: 999px;
    padding: 1px 10px;
    font-weight: 600;
    font-size: .72rem;
}

/* status tints — cell background + tag colour (semantic hues kept) */
.att-cal-cell--present { background: color-mix(in srgb, var(--bs-success) 14%, transparent); border-color: color-mix(in srgb, var(--bs-success) 45%, transparent); }
.att-cal-cell--absent  { background: color-mix(in srgb, var(--bs-danger) 14%, transparent);  border-color: color-mix(in srgb, var(--bs-danger) 45%, transparent); }
.att-cal-cell--late    { background: color-mix(in srgb, var(--bs-warning) 16%, transparent); border-color: color-mix(in srgb, var(--bs-warning) 50%, transparent); }
.att-cal-cell--leave   { background: color-mix(in srgb, var(--bs-info) 14%, transparent);    border-color: color-mix(in srgb, var(--bs-info) 45%, transparent); }

.att-cal-key--present, .att-cal-tag--present { background: var(--bs-success); color: #fff; }
.att-cal-key--absent,  .att-cal-tag--absent  { background: var(--bs-danger);  color: #fff; }
.att-cal-key--late,    .att-cal-tag--late     { background: var(--bs-warning); color: #000; }
.att-cal-key--leave,   .att-cal-tag--leave    { background: var(--bs-info);    color: #000; }
.att-cal-tag--other { background: var(--bs-secondary); color: #fff; }

@media (max-width: 575.98px) {
    .att-cal-cell { min-height: 58px; padding: 4px; }
    .att-cal-tag { font-size: .62rem; padding: 1px 4px; }
}

/* ===== Exam report (ExamReport.cshtml) ===== */
.exam-rpt-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1rem;
}

.exam-rpt-stat {
    display: inline-flex;
    flex-direction: column;
    min-width: 120px;
    padding: .55rem .85rem;
    border-radius: 12px;
    border: 1px solid var(--outline, var(--bs-border-color));
    background: var(--surface-variant, var(--bs-tertiary-bg));
}

.exam-rpt-stat--accent {
    border-color: transparent;
    background: var(--primary-container, var(--bs-primary-bg-subtle));
    color: var(--on-primary-container, var(--bs-primary-text-emphasis));
}

.exam-rpt-stat__label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.exam-rpt-stat--accent .exam-rpt-stat__label { color: inherit; opacity: .85; }

.exam-rpt-stat__value {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--on-surface, var(--bs-body-color));
}

.exam-rpt-stat--accent .exam-rpt-stat__value { color: inherit; }

/* Compact, grade-coloured count pills (one per grade) */
.exam-rpt-gradepill {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: .4rem;
    padding: .2rem .25rem .2rem .6rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
}

.exam-rpt-gradepill__grade { letter-spacing: .02em; }

.exam-rpt-gradepill__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
    font-size: .8rem;
}

/* Brighter grade tones (used by both summary chips and the table Grade column) */
.text-bg-success-bright {
    background-color: color-mix(in srgb, var(--bs-success, #198754) 65%, #20c997) !important;
    color: #fff !important;
}
.text-bg-primary-bright {
    background-color: color-mix(in srgb, var(--primary, var(--bs-primary, #00241F)) 60%, #fff 12%) !important;
    color: #fff !important;
}

.exam-rpt-context {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .65rem;
    margin-bottom: 1rem;
    font-size: .85rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.exam-rpt-context b { color: var(--on-surface, var(--bs-body-color)); font-weight: 600; }

.exam-rpt-table thead th {
    position: sticky;
    top: 0;
    white-space: nowrap;
}

.exam-rpt-roll {
    font-weight: 700;
    color: var(--primary-ct, var(--primary, var(--bs-primary)));
    text-align: center;
}

.exam-rpt-student__name { font-weight: 600; color: var(--on-surface, var(--bs-body-color)); }
.exam-rpt-student__adm { font-size: .75rem; color: var(--on-surface-variant, var(--bs-secondary-color)); }

.exam-rpt-grade {
    display: inline-block;
    min-width: 34px;
    text-align: center;
    border-radius: 999px;
    padding: 1px 8px;
    font-weight: 700;
    font-size: .78rem;
}

/* ===== Attendance report (AttendanceReport.cshtml) — calendar count chips ===== */
.att-rep-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.att-rep-chip {
    font-size: .68rem;
    font-weight: 600;
    border-radius: 6px;
    padding: 1px 5px;
    line-height: 1.3;
    white-space: nowrap;
}

.att-rep-chip--present { background: color-mix(in srgb, var(--bs-success) 18%, transparent); color: var(--bs-success-text-emphasis, #0f5132); }
.att-rep-chip--absent  { background: color-mix(in srgb, var(--bs-danger) 18%, transparent);  color: var(--bs-danger-text-emphasis, #842029); }
.att-rep-chip--late    { background: color-mix(in srgb, var(--bs-warning) 22%, transparent); color: var(--bs-warning-text-emphasis, #664d03); }
.att-rep-chip--leave   { background: color-mix(in srgb, var(--bs-info) 18%, transparent);    color: var(--bs-info-text-emphasis, #055160); }

.att-rep-total {
    margin-top: auto;
    font-size: .72rem;
    font-weight: 700;
    color: var(--on-surface, var(--bs-body-color));
}

/* ===== Student enrollment action (_StudentEnrollmentTab.cshtml) ===== */
.enr-current {
    border: 1px solid var(--outline, var(--bs-border-color));
    border-radius: 12px;
    padding: .75rem .9rem;
    background: var(--surface-variant, var(--bs-tertiary-bg));
}

.enr-current__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .55rem;
}

.enr-current__title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.enr-current__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem .9rem;
    margin: 0;
}

.enr-current__grid dt {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    margin-bottom: .05rem;
}

.enr-current__grid dd {
    margin: 0;
    font-weight: 600;
    color: var(--on-surface, var(--bs-body-color));
}

/* Action guidance banner — tone matches the selected enrollment action */
.enr-hint {
    border-radius: 10px;
    padding: .55rem .75rem;
    font-size: .82rem;
    line-height: 1.35;
    border: 1px solid transparent;
}

.enr-hint--primary { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); border-color: var(--bs-primary-border-subtle); }
.enr-hint--info    { background: var(--bs-info-bg-subtle);    color: var(--bs-info-text-emphasis);    border-color: var(--bs-info-border-subtle); }
.enr-hint--warning { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border-color: var(--bs-warning-border-subtle); }
.enr-hint--success { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); border-color: var(--bs-success-border-subtle); }
.enr-hint--danger  { background: var(--bs-danger-bg-subtle);  color: var(--bs-danger-text-emphasis);  border-color: var(--bs-danger-border-subtle); }
.enr-hint--secondary { background: var(--bs-secondary-bg-subtle); color: var(--bs-secondary-text-emphasis); border-color: var(--bs-secondary-border-subtle); }

/* ===== Class timetable builder (Timetable/Index.cshtml) ===== */
.tt-table th {
    background: var(--surface-variant, var(--bs-tertiary-bg));
    color: var(--on-surface, var(--bs-body-color));
    text-align: center;
    vertical-align: middle;
    font-size: .8rem;
}

.tt-table td { padding: .4rem; }
.tt-period-meta { background: var(--surface-variant, var(--bs-tertiary-bg)); }
.tt-period-head { min-width: 205px; }
.tt-day-head,
.tt-day-cell { min-width: 132px; }

/* ----- Quick period generator bar (edit mode) ----- */
.tt-gen {
    background: var(--surface-variant, var(--bs-tertiary-bg));
    border: 1px solid var(--outline, var(--bs-border-color));
    border-radius: 12px;
    padding: .75rem .9rem;
}

.tt-gen__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .6rem;
    margin-bottom: .5rem;
}
.tt-gen__title {
    font-weight: 600;
    font-size: .85rem;
    color: var(--on-surface, var(--bs-body-color));
}
.tt-gen__title > i { color: var(--primary, var(--bs-primary)); }
.tt-gen__hint {
    font-size: .74rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}
.tt-gen .form-label {
    font-size: .74rem;
    font-weight: 600;
    margin-bottom: .2rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

/* ===== Timetable builder — drag & drop cards =====
   Left panel = one card per subject + teacher combination (drag source / click to arm);
   each day cell holds a single .tt-slot drop zone that accepts one card. */
.tt-palette {
    background: var(--surface, var(--bs-body-bg));
    border: 1px solid var(--outline, var(--bs-border-color));
    border-radius: 12px;
    padding: .75rem;
    position: sticky;
    top: .5rem;
}

.tt-palette__head {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .85rem;
    color: var(--on-surface, var(--bs-body-color));
}
.tt-palette__head > i { color: var(--primary, var(--bs-primary)); }
.tt-palette__count {
    margin-left: auto;
    background: var(--surface-variant, var(--bs-tertiary-bg));
    color: var(--on-surface-variant, var(--bs-secondary-color));
    border-radius: 999px;
    padding: 0 .5rem;
    font-size: .72rem;
    font-weight: 600;
}
.tt-palette__hint {
    font-size: .74rem;
    line-height: 1.3;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    margin-top: .35rem;
}
.tt-palette__list {
    max-height: 58vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding-right: .15rem;
}

.tt-pal-group__head {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    margin-bottom: .3rem;
}
.tt-pal-group__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-pal-group__count {
    margin-left: auto;
    font-size: .7rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}
.tt-pal-dot {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    border: 1px solid var(--outline, var(--bs-border-color));
    flex: 0 0 auto;
}
.tt-pal-group__list { display: flex; flex-direction: column; gap: .3rem; }

/* Card — shared by the palette and the placed copies; tinted by .tt-lesson--cN. */
.tt-card {
    position: relative;
    background: var(--surface-variant, var(--bs-tertiary-bg));
    color: var(--on-surface, var(--bs-body-color));
    border: 1px solid var(--outline, var(--bs-border-color));
    border-radius: 9px;
    padding: .35rem .45rem;
    cursor: grab;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.tt-card:active { cursor: grabbing; }
.tt-card:hover { border-color: var(--primary, var(--bs-primary)); }
.tt-card__subject {
    font-weight: 600;
    font-size: .78rem;
    line-height: 1.2;
    padding-right: 1rem;
}
.tt-card__teacher {
    font-size: .72rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    margin-top: .1rem;
}
.tt-card__teacher--none { font-style: italic; }
.tt-card__room { margin-top: .3rem; font-size: .72rem; padding: .1rem .35rem; height: auto; }
.tt-card__room:hover { cursor: text; }

/* Usage badge on a palette card (how many slots use that combination). */
.tt-card__used {
    position: absolute;
    top: .25rem;
    right: .3rem;
    min-width: 1.15rem;
    text-align: center;
    background: var(--primary, var(--bs-primary));
    color: var(--on-primary, #fff);
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.15rem;
}
.tt-card--used { opacity: .92; }

/* Remove (×) button on a placed card. */
.tt-card__del {
    position: absolute;
    top: .1rem;
    right: .1rem;
    width: 1.1rem;
    height: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    font-size: .8rem;
    line-height: 1;
    opacity: .5;
    transition: opacity .15s ease;
}
.tt-card:hover .tt-card__del,
.tt-card__del:focus-visible { opacity: 1; }
.tt-card__del:hover { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }

/* Click-to-place: the armed palette card + the grid hint while arming. */
.tt-card--armed {
    border-color: var(--primary, var(--bs-primary));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #00241F) 35%, transparent);
}
.tt-grid--arming .tt-slot:empty {
    border-style: solid;
    border-color: var(--primary, var(--bs-primary));
    background: color-mix(in srgb, var(--primary, #00241F) 7%, transparent);
}

/* Teacher time clash — the save was refused and this card is one of the offenders. */
.tt-card--clash {
    border-color: var(--bs-red);
    border-width: 2px;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-red) 28%, transparent);
    animation: tt-clash-pulse 1.1s ease-in-out 2;
}
.tt-card__clash {
    position: absolute;
    bottom: .2rem;
    right: .3rem;
    color: var(--bs-danger-text-emphasis);
    font-size: .78rem;
    line-height: 1;
}
@keyframes tt-clash-pulse {
    0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-red) 28%, transparent); }
    50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--bs-red) 34%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .tt-card--clash { animation: none; }
}

/* Sortable drag states */
.tt-card--ghost { opacity: .45; }
.tt-card--chosen { box-shadow: 0 .25rem .6rem rgba(0, 0, 0, .18); }

/* Day slot — the drop target; shows a dashed placeholder while empty. */
.tt-slot {
    min-height: 62px;
    border: 1px dashed var(--outline, var(--bs-border-color));
    border-radius: 9px;
    padding: .2rem;
}
.tt-slot:empty::after {
    content: "Drop a card";
    display: block;
    text-align: center;
    font-size: .7rem;
    font-style: italic;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    padding-top: 1.1rem;
}
.tt-slot > .tt-card { border-style: solid; }

/* Trash strip — drop a card here to remove it. */
.tt-trash {
    margin-top: .6rem;
    border: 1px dashed var(--bs-danger-border-subtle);
    border-radius: 9px;
    padding: .5rem;
    text-align: center;
    font-size: .74rem;
    color: var(--bs-danger-text-emphasis);
    background: color-mix(in srgb, var(--bs-red) 6%, transparent);
    min-height: 44px;
}
/* Armed while a placed card is being dragged; lit up while a card hovers over it
   (Sortable parks the dragged element inside the strip — hidden, it only marks the hover). */
.tt-trash--armed { border-color: var(--bs-red); color: var(--bs-danger-text-emphasis); }
.tt-trash:has(.tt-card) { background: var(--bs-danger-bg-subtle); border-style: solid; }
.tt-trash .tt-card { display: none; }

/* A break row hides its day-cell controls and shows a muted "Break" strip. */
.tt-row--break .tt-day-cell > * { display: none; }
.tt-row--break .tt-day-cell::after {
    content: "Break";
    display: block;
    text-align: center;
    font-style: italic;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

/* ===== Class timetable — read-only weekly view (Timetable/Index.cshtml) ===== */
.tt-view {
    --bs-table-bg: var(--surface, var(--bs-body-bg));
    border: 1px solid var(--outline, var(--bs-border-color));
    border-radius: 12px;
    overflow: hidden;
    table-layout: fixed;
}

.tt-view thead th {
    background: var(--surface-variant, var(--bs-tertiary-bg));
    color: var(--on-surface, var(--bs-body-color));
    text-align: center;
    font-weight: 600;
    font-size: .82rem;
    padding: .55rem .5rem;
    border-bottom: 1px solid var(--outline, var(--bs-border-color));
}

.tt-view td {
    border: 1px solid var(--outline, var(--bs-border-color));
    vertical-align: top;
    padding: .4rem;
    width: 14%;
}

/* Left time column */
.tt-view-time-head { width: 16%; }
.tt-view-time {
    background: var(--surface-variant, var(--bs-tertiary-bg));
    text-align: center;
    vertical-align: middle !important;
}
.tt-view-time__name {
    font-weight: 600;
    font-size: .82rem;
    color: var(--on-surface, var(--bs-body-color));
}
.tt-view-time__range {
    font-size: .72rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

/* Lesson card inside a day cell — neutral base; a .tt-lesson--cN class tints it per subject */
.tt-lesson {
    background: var(--surface-variant, var(--bs-tertiary-bg));
    color: var(--on-surface, var(--bs-body-color));
    border: 1px solid var(--outline, var(--bs-border-color));
    border-radius: 9px;
    padding: .45rem .55rem;
    height: 100%;
}
.tt-lesson__subject { font-weight: 600; font-size: .82rem; line-height: 1.2; }
.tt-lesson__teacher {
    font-size: .74rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    margin-top: .1rem;
}
.tt-lesson__room {
    font-size: .72rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    margin-top: .15rem;
}
.tt-lesson__room > i { font-size: .7rem; }

/* Empty (free) period */
.tt-view-free {
    text-align: center;
    font-style: italic;
    font-size: .76rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    padding: .6rem 0;
}

/* Recess / break strip spanning all days */
.tt-view-break td { background: var(--surface-variant, var(--bs-tertiary-bg)); }
.tt-view-break__label {
    display: block;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .74rem;
    font-weight: 600;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

/* ===== Class timetable — at-a-glance summary cards ===== */
.tt-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.tt-sum-card {
    background: var(--surface, var(--bs-body-bg));
    color: var(--on-surface, var(--bs-body-color));
    border: 1px solid var(--outline, var(--bs-border-color));
    border-radius: 12px;
    padding: .85rem 1rem;
}

.tt-sum-card__head {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: .65rem;
}
.tt-sum-card__head > i { color: var(--primary, var(--bs-primary)); }
.tt-sum-card__count {
    margin-left: auto;
    background: var(--surface-variant, var(--bs-tertiary-bg));
    color: var(--on-surface-variant, var(--bs-secondary-color));
    border-radius: 999px;
    padding: 0 .5rem;
    font-size: .74rem;
    font-weight: 600;
}

.tt-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.tt-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--surface-variant, var(--bs-tertiary-bg));
    color: var(--on-surface, var(--bs-body-color));
    border: 1px solid var(--outline, var(--bs-border-color));
}
.tt-chip--teacher > i { color: var(--primary, var(--bs-primary)); }
.tt-allset { color: var(--bs-success-text-emphasis); }

.tt-stats { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.tt-stat__num { font-size: 1.4rem; font-weight: 700; line-height: 1; color: var(--primary, var(--bs-primary)); }
.tt-stat__lbl {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    margin-top: .15rem;
}

/* Per-subject colour palette — translucent hue tints over the surface so they read in
   light AND dark; text stays legible (inherits on-surface). Shared by lesson cards and
   the "Subjects Not in Timetable" chips. Declared LAST so the tint wins over the neutral
   .tt-lesson / .tt-chip base backgrounds (equal specificity → source order decides). */
.tt-lesson--c0 { background: color-mix(in srgb, var(--bs-teal)   16%, transparent); border-color: color-mix(in srgb, var(--bs-teal)   42%, transparent); }
.tt-lesson--c1 { background: color-mix(in srgb, var(--bs-pink)   16%, transparent); border-color: color-mix(in srgb, var(--bs-pink)   42%, transparent); }
.tt-lesson--c2 { background: color-mix(in srgb, var(--bs-indigo) 16%, transparent); border-color: color-mix(in srgb, var(--bs-indigo) 42%, transparent); }
.tt-lesson--c3 { background: color-mix(in srgb, var(--bs-orange) 18%, transparent); border-color: color-mix(in srgb, var(--bs-orange) 44%, transparent); }
.tt-lesson--c4 { background: color-mix(in srgb, var(--bs-green)  16%, transparent); border-color: color-mix(in srgb, var(--bs-green)  42%, transparent); }
.tt-lesson--c5 { background: color-mix(in srgb, var(--bs-cyan)   16%, transparent); border-color: color-mix(in srgb, var(--bs-cyan)   42%, transparent); }
.tt-lesson--c6 { background: color-mix(in srgb, var(--bs-purple) 16%, transparent); border-color: color-mix(in srgb, var(--bs-purple) 42%, transparent); }
.tt-lesson--c7 { background: color-mix(in srgb, var(--bs-blue)   16%, transparent); border-color: color-mix(in srgb, var(--bs-blue)   42%, transparent); }
.tt-lesson--c8 { background: color-mix(in srgb, var(--bs-yellow) 20%, transparent); border-color: color-mix(in srgb, var(--bs-yellow) 46%, transparent); }
.tt-lesson--c9 { background: color-mix(in srgb, var(--bs-red)    14%, transparent); border-color: color-mix(in srgb, var(--bs-red)    40%, transparent); }

/* Warning-tone chip (e.g. unscheduled exam papers) — shared summary chip variant. */
.tt-chip--warn {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
    border-color: var(--bs-warning-border-subtle);
}

/* ===== Exam datesheet — read-only view + extra info (ExamDatesheet/Index.cshtml) ===== */
/* Header strip above the read-only date sheet */
.ds-head { margin-bottom: 1rem; }
.ds-head__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--on-surface, var(--bs-body-color));
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem;
}
.ds-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .25rem;
    font-size: .85rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}
.ds-head__sep { opacity: .5; }

/* Subject cell with a colour-coded icon */
.ds-subj { display: flex; align-items: center; gap: .55rem; }
.ds-subj-ico {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--on-surface, var(--bs-body-color));
    border: 1px solid var(--outline, var(--bs-border-color));
}
.ds-table td > span > i { color: var(--on-surface-variant, var(--bs-secondary-color)); margin-right: .15rem; }

/* Exam Overview definition list */
.ds-meta { margin: 0; }
.ds-meta__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .3rem 0;
    border-bottom: 1px dashed var(--outline, var(--bs-border-color));
}
.ds-meta__row:last-child { border-bottom: 0; }
.ds-meta dt { font-weight: 500; color: var(--on-surface-variant, var(--bs-secondary-color)); font-size: .82rem; }
.ds-meta dd { margin: 0; font-weight: 600; color: var(--on-surface, var(--bs-body-color)); font-size: .82rem; text-align: right; }

/* Schedule progress bar */
.ds-progress { height: 10px; background: var(--surface-variant, var(--bs-tertiary-bg)); }
.ds-progress .progress-bar { background: var(--primary, var(--bs-primary)); font-size: .65rem; }

/* Exam instructions list */
.ds-instr-list { list-style: none; margin: 0; padding: 0; }
.ds-instr { display: flex; gap: .55rem; padding: .4rem 0; }
.ds-instr + .ds-instr { border-top: 1px dashed var(--outline, var(--bs-border-color)); }
.ds-instr > i { color: var(--primary, var(--bs-primary)); font-size: 1rem; margin-top: .1rem; }
.ds-instr__t { font-weight: 600; font-size: .82rem; color: var(--on-surface, var(--bs-body-color)); }
.ds-instr__d { font-size: .78rem; color: var(--on-surface-variant, var(--bs-secondary-color)); }

/* ===== Teachers timetable — duties placeholder (Timetable/Index.cshtml) ===== */
.ttch-duty-empty {
    border: 1px dashed var(--outline, var(--bs-border-color));
    border-radius: 9px;
    padding: .7rem .8rem;
    background: var(--surface-variant, var(--bs-tertiary-bg));
}
.ttch-duty-empty > i { color: var(--primary, var(--bs-primary)); margin-right: .25rem; }

/* Rules & criteria modal */
.enr-rule-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.enr-rule-list li {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .3rem 0;
    border-bottom: 1px dashed var(--outline-variant, var(--bs-border-color));
    color: var(--on-surface, var(--bs-body-color));
}

.enr-rule-list li:last-child { border-bottom: 0; }
.enr-rule-list li > i { flex-shrink: 0; }

/* ===== Report hub (Report/Index.cshtml) ===== */

.report-category { margin-top: 2.25rem; }
.report-category:first-of-type { margin-top: .25rem; }

.report-category__head {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.1rem;
}

.report-category__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.report-category__title {
    margin: 0;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--on-surface);
}

.report-category__caption {
    margin: 0;
    font-size: .85rem;
    color: var(--on-surface-variant);
}

.report-category__count {
    margin-left: auto;
    font-size: .78rem;
    font-weight: 600;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: var(--surface-variant);
    color: var(--on-surface-variant);
    white-space: nowrap;
}

.report-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.35rem;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--outline);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.report-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--primary) 45%, var(--outline));
    box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 16%, transparent);
}

.report-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.report-card__title {
    margin: 0 0 .45rem;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--on-surface);
}

.report-card__desc {
    margin: 0 0 1.1rem;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--on-surface-variant);
    flex-grow: 1;
}

.report-card__action {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.report-card__action .bi { transition: transform .18s ease; }
.report-card:hover .report-card__action .bi { transform: translateX(3px); }

/* coming-soon placeholder card */
.report-card--soon {
    border-style: dashed;
    background: var(--surface-variant);
}

.report-card--soon:hover {
    transform: none;
    border-color: var(--outline);
    box-shadow: none;
}

.report-card__badge {
    align-self: flex-start;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .28rem .65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tertiary) 16%, transparent);
    color: var(--tertiary);
}

@media (prefers-reduced-motion: reduce) {
    .report-card,
    .report-card__action .bi { transition: none; }
    .report-card:hover { transform: none; }
}

/* ===== Student attendance history report (Report/StudentAttendanceHistory.cshtml) ===== */

.sah-report {
    color: var(--on-surface);
}

.sah-header {
    display: grid;
    grid-template-columns: 90px 1fr 90px;
    align-items: center;
    gap: 1rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--outline);
}

.sah-logo,
.sah-photo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
}

.sah-photo { object-fit: cover; }

.sah-logo--ph,
.sah-photo--ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: var(--surface-variant);
    color: var(--on-surface-variant);
}

.sah-header__photo { text-align: right; }

.sah-header__title { text-align: center; }

.sah-school {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
}

.sah-address {
    font-size: .9rem;
    font-weight: 600;
    color: var(--on-surface-variant);
    margin-top: .15rem;
}

.sah-report-title {
    margin-top: .5rem;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: underline;
}

.sah-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    padding: .85rem .25rem;
    font-size: .92rem;
}

/* Day grid */
.sah-grid,
.sah-summary {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
}

.sah-grid th,
.sah-grid td {
    border: 1px solid var(--outline);
    text-align: center;
    padding: .25rem .15rem;
    min-width: 1.55rem;
}

.sah-grid thead th,
.sah-summary thead th {
    background: var(--surface-variant);
    color: var(--on-surface);
    font-weight: 700;
}

.sah-grid__month {
    text-align: left !important;
    padding-left: .5rem !important;
    white-space: nowrap;
    background: var(--surface-variant);
    font-weight: 600;
}

.sah-cell--blank { background: var(--surface-variant); }
.sah-cell--none { color: var(--on-surface-variant); }
.sah-cell--present { background: color-mix(in srgb, var(--chart-success) 16%, transparent); color: var(--chart-success); font-weight: 700; }
.sah-cell--absent  { background: color-mix(in srgb, var(--chart-danger) 16%, transparent);  color: var(--chart-danger);  font-weight: 700; }
.sah-cell--late    { background: color-mix(in srgb, var(--chart-warning) 18%, transparent); color: var(--chart-warning); font-weight: 700; }
.sah-cell--leave   { background: color-mix(in srgb, var(--chart-3) 18%, transparent);       color: var(--chart-3);       font-weight: 700; }
.sah-cell--holiday { background: color-mix(in srgb, var(--tertiary) 18%, transparent);      color: var(--tertiary);      font-weight: 700; }

/* Monthly summary */
.sah-summary-title {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 1.4rem 0 .65rem;
}

.sah-summary th,
.sah-summary td {
    border: 1px solid var(--outline);
    text-align: center;
    padding: .4rem .5rem;
}

.sah-summary__month {
    text-align: left !important;
    background: var(--surface-variant);
    font-weight: 600;
}

.sah-summary__total th,
.sah-summary__total td {
    background: var(--surface-variant);
    font-weight: 800;
}

/* ===== System Log details dialog (Logging/_LogDetailsModal) ===== */
.log-detail .modal-header {
    align-items: flex-start;
}

.log-detail__eyebrow {
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    margin-bottom: .1rem;
}

.log-detail__level {
    font-size: .8rem;
    padding: .4em .7em;
}

/* Bordered panels (Metadata Summary, Extended Properties) */
.log-detail__panel {
    border: 1px solid var(--outline, var(--bs-border-color));
    background: var(--surface, var(--bs-body-bg));
    border-radius: .6rem;
    padding: 1rem 1.1rem;
}

.log-detail__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
}

.log-detail__panel-title {
    font-weight: 700;
    color: var(--on-surface, var(--bs-body-color));
    margin-bottom: .85rem;
}

.log-detail__panel-title .bi {
    color: var(--primary, var(--bs-primary));
}

.log-detail__label {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    margin-bottom: .35rem;
}

/* Metadata definition list */
.log-detail__meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: .15rem 0;
}

.log-detail__meta dt {
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    font-weight: 500;
    margin-top: .6rem;
}

.log-detail__meta dd {
    margin: 0;
    color: var(--on-surface, var(--bs-body-color));
}

/* Target URL */
.log-detail__url {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--outline, var(--bs-border-color));
    background: var(--surface-variant, var(--bs-tertiary-bg));
    border-radius: .5rem;
    padding: .55rem .7rem;
}

.log-detail__url .bi-link-45deg {
    color: var(--primary, var(--bs-primary));
    font-size: 1.1rem;
}

.log-detail__url-text {
    flex: 1 1 auto;
    font-family: var(--bs-font-monospace, monospace);
    font-size: .85rem;
    color: var(--primary, var(--bs-primary));
}

.log-detail__copy {
    flex: 0 0 auto;
}

/* System message — accent left border tinted by log level */
.log-detail__message {
    border-radius: .5rem;
    padding: .7rem .85rem;
    background: var(--surface-variant, var(--bs-tertiary-bg));
    border-left: 4px solid var(--outline, var(--bs-border-color));
    color: var(--on-surface, var(--bs-body-color));
    white-space: pre-wrap;
    word-break: break-word;
}

.log-detail__message--text-bg-danger    { border-left-color: var(--bs-danger,  #dc3545); background: color-mix(in srgb, var(--bs-danger,  #dc3545) 10%, transparent); }
.log-detail__message--text-bg-warning   { border-left-color: var(--bs-warning, #ffc107); background: color-mix(in srgb, var(--bs-warning, #ffc107) 12%, transparent); }
.log-detail__message--text-bg-info      { border-left-color: var(--tertiary,   #20B2A2); background: color-mix(in srgb, var(--tertiary,   #20B2A2) 12%, transparent); }
.log-detail__message--text-bg-secondary { border-left-color: var(--outline,    #6c757d); background: var(--surface-variant, var(--bs-tertiary-bg)); }

/* Terminal-style block (stack trace / exception / raw JSON) — intentionally dark in both themes */
.log-detail__terminal {
    background: #0d1117;
    color: #d6deeb;
    border: 1px solid #1c2433;
    border-radius: .5rem;
    padding: .9rem 1rem;
    font-family: var(--bs-font-monospace, monospace);
    font-size: .82rem;
    line-height: 1.55;
    max-height: 320px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.log-detail__terminal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #161b22;
    color: #d6deeb;
    border: 1px solid #1c2433;
    border-bottom: 0;
    border-radius: .5rem .5rem 0 0;
    padding: .45rem .8rem;
    font-size: .8rem;
    font-weight: 600;
}

.log-detail__terminal-head + .log-detail__terminal {
    border-radius: 0 0 .5rem .5rem;
}

.log-detail__terminal-head .log-detail__copy {
    color: #58a6ff;
    text-decoration: none;
}

/* Extended properties — highlighted key/value grid (formatted view) */
.log-prop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .6rem;
}

.log-prop {
    border: 1px solid var(--outline, var(--bs-border-color));
    border-left: 3px solid var(--primary, var(--bs-primary));
    background: color-mix(in srgb, var(--primary, #00241F) 5%, var(--surface, #fff));
    border-radius: .45rem;
    padding: .5rem .7rem;
}

.log-prop__key {
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    margin-bottom: .15rem;
}

.log-prop__value {
    font-family: var(--bs-font-monospace, monospace);
    font-size: .85rem;
    word-break: break-word;
}

.log-prop__token--string { color: var(--primary, #00241F); font-weight: 600; }
.log-prop__token--number { color: var(--tertiary, #20B2A2); font-weight: 700; }
.log-prop__token--bool   { color: #8957e5; font-weight: 700; }
.log-prop__token--null   { color: var(--on-surface-variant, var(--bs-secondary-color)); font-style: italic; }

/* Audit diff table (Changed Fields → original vs changed value) */
.log-diff__table th {
    font-size: .7rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    border-bottom: 2px solid var(--outline, var(--bs-border-color));
}

.log-diff__table td {
    vertical-align: top;
    font-family: var(--bs-font-monospace, monospace);
    font-size: .84rem;
    word-break: break-word;
}

.log-diff__field {
    font-family: inherit !important;
    font-weight: 600;
    color: var(--on-surface, var(--bs-body-color));
    white-space: nowrap;
}

.log-diff__old {
    color: var(--bs-danger, #b42318);
    background: color-mix(in srgb, var(--bs-danger, #b42318) 8%, transparent);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--bs-danger, #b42318) 55%, transparent);
}

.log-diff__new {
    color: #1a7f37;
    background: color-mix(in srgb, #1a7f37 10%, transparent);
    font-weight: 600;
}

/* ===== Subject Grade Distribution report ===== */
.sgd-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    border: 1px dashed var(--outline, var(--bs-border-color));
    border-radius: .6rem;
    background: var(--surface-variant, var(--bs-tertiary-bg));
}

.sgd-empty .bi { margin-right: .4rem; }

.sgd-context {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1rem;
}

.sgd-context__chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    font-size: .85rem;
    background: var(--surface-variant, var(--bs-tertiary-bg));
    border: 1px solid var(--outline, var(--bs-border-color));
    color: var(--on-surface, var(--bs-body-color));
}

.sgd-context__chip .bi { color: var(--primary, var(--bs-primary)); }

.sgd-subject-card {
    border: 1px solid var(--outline, var(--bs-border-color));
    border-radius: .7rem;
    overflow: hidden;
    margin-bottom: 1.1rem;
    background: var(--surface, var(--bs-body-bg));
}

.sgd-subject-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .65rem 1rem;
    background: color-mix(in srgb, var(--primary, #00241F) 10%, var(--surface, #fff));
    border-bottom: 1px solid var(--outline, var(--bs-border-color));
}

.sgd-subject-card__title {
    font-weight: 700;
    color: var(--primary, var(--bs-primary));
}

.sgd-subject-card__title .bi { margin-right: .35rem; }

.sgd-subject-card__teacher {
    font-size: .9rem;
    color: var(--on-surface, var(--bs-body-color));
}

.sgd-subject-card__teacher .bi {
    margin-right: .3rem;
    color: var(--tertiary, var(--bs-primary));
}

.sgd-table {
    margin-bottom: 0;
}

.sgd-table thead th {
    background: var(--surface-variant, var(--bs-tertiary-bg));
    color: var(--on-surface, var(--bs-body-color));
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    vertical-align: middle;
}

.sgd-table__exam {
    text-align: left;
    min-width: 160px;
    font-weight: 600;
}

/* On-screen report header (mirrors the PDF: logo left, identity center, teacher photo right) */
.sgd-report-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
    border: 1px solid var(--outline, var(--bs-border-color));
    border-radius: .7rem;
    background: color-mix(in srgb, var(--primary, #00241F) 6%, var(--surface, #fff));
    border-bottom: 3px solid var(--primary, var(--bs-primary));
}

.sgd-report-header__logo,
.sgd-report-header__photo {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: .5rem;
}

.sgd-report-header__logo img,
.sgd-report-header__photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sgd-report-header__photo img {
    object-fit: cover;
    border-radius: .5rem;
    border: 1px solid var(--outline, var(--bs-border-color));
}

.sgd-report-header__logo .bi {
    font-size: 2rem;
    color: var(--primary, var(--bs-primary));
}

.sgd-report-header__identity {
    flex: 1 1 auto;
    text-align: center;
    min-width: 0;
}

.sgd-report-header__school {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary, var(--bs-primary));
    line-height: 1.2;
}

.sgd-report-header__title {
    font-weight: 700;
    text-decoration: underline;
    color: var(--on-surface, var(--bs-body-color));
}

.sgd-report-header__meta {
    font-size: .85rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    margin-top: .15rem;
}

.sgd-report-header__teacher {
    font-size: .85rem;
    font-weight: 600;
    color: var(--tertiary, var(--bs-primary));
    margin-top: .2rem;
}

/* Keep the photo slot from collapsing the centered identity when empty */
.sgd-report-header__photo:empty {
    background: transparent;
}

/* ===== Compact-count multi-select (checkbox dropdown) ===== */
/* A .form-select-styled trigger that shows "N selected" and opens a themed
   panel of checkbox options. Value source is a hidden <select multiple>. */
.cc-ms { display: block; }

.cc-ms__toggle {
    display: inline-flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.cc-ms__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-ms__label.is-placeholder {
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.cc-ms__panel {
    padding: .35rem;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--outline, var(--bs-border-color));
    border-radius: .6rem;
    background: var(--surface, var(--bs-body-bg));
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12);
}

.cc-ms__opt {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .5rem .65rem;
    border-radius: .5rem;
    cursor: pointer;
    color: var(--on-surface, var(--bs-body-color));
    font-weight: 500;
}

.cc-ms__opt:hover {
    background: color-mix(in srgb, var(--primary, #00241F) 10%, transparent);
}

.cc-ms__opt .form-check-input {
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}

.cc-ms__opt-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-ms__empty {
    display: none;
    padding: .5rem .75rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    font-size: .85rem;
}

.cc-ms__empty .bi { margin-right: .4rem; }

.cc-ms__panel.is-empty .cc-ms__list { display: none; }
.cc-ms__panel.is-empty .cc-ms__empty { display: block; }

/* ===== Class Attendance report ===== */

.car-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    border: 1px dashed var(--outline, var(--bs-border-color));
    border-radius: .6rem;
    background: var(--surface-variant, var(--bs-tertiary-bg));
}

.car-empty .bi { margin-right: .4rem; }

.car-report-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
    border: 1px solid var(--outline, var(--bs-border-color));
    border-radius: .7rem;
    background: color-mix(in srgb, var(--primary, #00241F) 6%, var(--surface, #fff));
    border-bottom: 3px solid var(--primary, var(--bs-primary));
}

.car-report-header__logo,
.car-report-header__photo {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: .5rem;
}

.car-report-header__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.car-report-header__logo .bi {
    font-size: 2rem;
    color: var(--primary, var(--bs-primary));
}

.car-report-header__identity {
    flex: 1 1 auto;
    text-align: center;
    min-width: 0;
}

.car-report-header__school {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary, var(--bs-primary));
    line-height: 1.2;
}

.car-report-header__title {
    font-weight: 700;
    text-decoration: underline;
    color: var(--on-surface, var(--bs-body-color));
}

.car-report-header__meta {
    font-size: .85rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    margin-top: .15rem;
}

.car-context {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1rem;
}

.car-context__chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    font-size: .85rem;
    background: var(--surface-variant, var(--bs-tertiary-bg));
    border: 1px solid var(--outline, var(--bs-border-color));
    color: var(--on-surface, var(--bs-body-color));
}

.car-context__chip .bi { color: var(--primary, var(--bs-primary)); }

.car-context__chip--sunday .bi { color: var(--chart-danger, #C0392B); }

.car-table {
    min-width: 900px;
}

.car-table th,
.car-table td {
    vertical-align: middle;
}

.car-table thead th {
    background: var(--surface-variant, var(--bs-tertiary-bg));
    color: var(--on-surface, var(--bs-body-color));
    text-align: center;
}

.car-table .car-serial {
    width: 44px;
    text-align: center;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.car-table .car-student {
    min-width: 220px;
    text-align: left;
}

.car-day {
    min-width: 34px;
}

.car-day__no {
    display: block;
    font-weight: 700;
    line-height: 1.1;
}

.car-day__name {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.car-cell {
    text-align: center;
    font-weight: 700;
    font-size: .85rem;
}

/* Sunday column — soft red tint that adapts to light/dark (matches the PDF shading) */
.car-table th.car-sunday,
.car-table td.car-sunday {
    background: color-mix(in srgb, var(--chart-danger, #C0392B) 12%, var(--surface, transparent));
}

.car-table th.car-sunday .car-day__name {
    color: var(--chart-danger, #C0392B);
}

.car-status--p { color: var(--chart-success, #1E7D45); }
.car-status--a { color: var(--chart-danger, #C0392B); }
.car-status--l { color: var(--chart-warning, #B9770E); }
.car-status--lv { color: var(--chart-3, #1F618D); }
.car-status--h,
.car-status--none { color: var(--on-surface-variant, var(--bs-secondary-color)); font-weight: 500; }

.car-student-chip {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.car-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--outline, var(--bs-border-color));
    background: var(--surface-variant, var(--bs-tertiary-bg));
}

.car-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.car-avatar--initials {
    background: linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%);
    color: var(--on-primary);
    font-size: .74rem;
    font-weight: 800;
}

.car-student-chip__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.car-student-chip__name {
    font-weight: 700;
    color: var(--primary, var(--bs-primary));
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.car-student-chip__name:hover {
    text-decoration: underline;
}

.car-student-chip__meta {
    font-size: .76rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    white-space: nowrap;
}

/* Graphical tab — chart cards (shared by every report's Graphical tab: Class Attendance, Exam Report, …) */
.car-chart-card {
    height: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid var(--outline, var(--bs-border-color));
    border-radius: .7rem;
    background: var(--surface, var(--bs-body-bg));
}

.car-chart-card__title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .6rem;
    font-weight: 700;
    color: var(--on-surface, var(--bs-body-color));
}

.car-chart-card__title .bi {
    color: var(--primary, var(--bs-primary));
}

.car-chart-shell {
    height: 320px;
}

@media (max-width: 575.98px) {
    .car-chart-shell {
        height: 260px;
    }
}

/* ===== Student Subjects tab (card grid) ===== */
.sst-active-banner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    border-radius: .8rem;
    background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 70%, var(--secondary, #103935)) 100%);
    color: var(--on-primary);
}

.sst-active-banner__group { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }

.sst-active-banner__label {
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: color-mix(in srgb, var(--on-primary) 78%, transparent);
}

.sst-active-banner__label .bi { margin-right: .3rem; }
.sst-active-banner__value { font-weight: 700; font-size: 1.02rem; }

.sst-active-banner__divider {
    width: 1px;
    height: 34px;
    background: color-mix(in srgb, var(--on-primary) 25%, transparent);
}

.sst-active-banner__status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--on-primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--on-primary) 22%, transparent);
}

.sst-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--chart-success, #36b37e);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chart-success, #36b37e) 30%, transparent);
}

/* Subject card */
.sst-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    border: 1px solid var(--outline, var(--bs-border-color));
    border-left: 4px solid var(--primary, var(--bs-primary));
    border-radius: .8rem;
    background: var(--surface, var(--bs-body-bg));
    padding: 1rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.sst-card:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
    transform: translateY(-2px);
}

.sst-card--class-teacher {
    border-color: var(--primary, var(--bs-primary));
    background: color-mix(in srgb, var(--primary, #00241F) 6%, var(--surface, #fff));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--primary, #00241F) 18%, transparent);
}

.sst-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}

.sst-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: var(--surface-variant, var(--bs-tertiary-bg));
    color: var(--primary, var(--bs-primary));
}

.sst-card--class-teacher .sst-icon {
    background: var(--primary, var(--bs-primary));
    color: var(--on-primary, #fff);
}

.sst-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .3rem;
}

.sst-tag {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .2rem .5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.sst-tag--compulsory { background: color-mix(in srgb, var(--tertiary, #20B2A2) 18%, transparent); color: var(--tertiary, #20B2A2); }
.sst-tag--optional   { background: color-mix(in srgb, var(--bs-warning, #ffc107) 22%, transparent); color: var(--bs-warning-text-emphasis, #997404); }
.sst-tag--class-teacher { background: color-mix(in srgb, #1a7f37 18%, transparent); color: #1a7f37; }

.sst-card__name {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--on-surface, var(--bs-body-color));
}

.sst-card__code {
    font-size: .8rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    margin-top: .1rem;
}

.sst-teacher__label {
    font-size: .62rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    margin-bottom: .3rem;
}

.sst-teacher__row { display: flex; align-items: center; gap: .55rem; }

.sst-teacher__avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, #1a7f37 18%, transparent);
    color: #1a7f37;
}

.sst-teacher--unassigned .sst-teacher__avatar {
    background: var(--surface-variant, var(--bs-tertiary-bg));
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.sst-teacher__info { min-width: 0; }

.sst-teacher__name {
    font-weight: 600;
    color: var(--on-surface, var(--bs-body-color));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sst-teacher--unassigned .sst-teacher__name {
    color: var(--on-surface-variant, var(--bs-secondary-color));
    font-style: italic;
    font-weight: 500;
}

.sst-teacher__code { font-size: .72rem; color: var(--on-surface-variant, var(--bs-secondary-color)); }

.sst-criteria {
    margin-top: auto;
    padding-top: .75rem;
    border-top: 1px solid var(--outline, var(--bs-border-color));
}

.sst-criteria__head {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    margin-bottom: .3rem;
}

.sst-criteria__value { font-weight: 700; color: var(--on-surface, var(--bs-body-color)); }

.sst-criteria__bar {
    height: .5rem;
    background: var(--surface-variant, var(--bs-tertiary-bg));
    border-radius: 999px;
}

.sst-criteria__bar .progress-bar { border-radius: 999px; }

.sst-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    border: 1px dashed var(--outline, var(--bs-border-color));
    border-radius: .7rem;
    background: var(--surface-variant, var(--bs-tertiary-bg));
}

.sst-empty .bi { margin-right: .4rem; }

.sst-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--outline, var(--bs-border-color));
    font-size: .8rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.sst-footer .bi { color: var(--chart-success, #36b37e); margin-right: .3rem; }

/* ===== Attendance Management (card-based daily marking) ===== */
.am-page {
    /* the layout content area already pads horizontally — only add breathing room below */
    padding: 0 0 1.5rem;
    /* per-status hues, reused across stats, cards and buttons */
    --am-present: var(--chart-success);
    --am-absent: var(--chart-danger);
    --am-late: var(--chart-warning);
    --am-leave: var(--tertiary);
}

.am-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.am-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--on-background);
    margin: 0;
}

.am-subtitle {
    margin: .15rem 0 0;
    color: var(--on-surface-variant);
    font-size: .9rem;
    max-width: 60ch;
}

.am-context { display: flex; flex-wrap: wrap; gap: .5rem; }

.am-filters { margin-bottom: 1.25rem; }

/* selected class/section chip on the filter card header (sits on the primary header bar) */
.am-headchip {
    display: inline-flex;
    align-items: center;
    padding: .25rem .7rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    /* currentColor = the filled header's text color (--on-primary light / --on-secondary dark). */
    color: inherit;
    background: color-mix(in srgb, currentColor 14%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
}

/* ----- placeholder / empty states ----- */
.am-placeholder {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--on-surface-variant);
    background: var(--surface);
    border: 1px dashed var(--outline);
    border-radius: 16px;
}

.am-placeholder .bi { font-size: 2.5rem; color: color-mix(in srgb, var(--primary) 55%, var(--on-surface-variant)); display: block; margin-bottom: .5rem; }
.am-placeholder h5 { color: var(--on-surface); font-weight: 700; margin-bottom: .25rem; }
.am-placeholder p { margin: 0; font-size: .9rem; }

/* ----- toolbar: summary + actions ----- */
.am-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: 14px;
    position: sticky;
    top: .5rem;
    z-index: 5;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--on-surface) 8%, transparent);
}

.am-stats { display: flex; flex-wrap: wrap; gap: .5rem; }

.am-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 64px;
    padding: .35rem .7rem;
    border-radius: 12px;
    background: var(--surface-variant);
    border: 1px solid var(--outline);
    line-height: 1.1;
}

.am-stat__num { font-size: 1.2rem; font-weight: 700; color: var(--on-surface); }
.am-stat__label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--on-surface-variant); }

.am-stat--present { background: color-mix(in srgb, var(--am-present) 15%, transparent); border-color: color-mix(in srgb, var(--am-present) 35%, transparent); }
.am-stat--present .am-stat__num { color: var(--am-present); }
.am-stat--absent { background: color-mix(in srgb, var(--am-absent) 15%, transparent); border-color: color-mix(in srgb, var(--am-absent) 35%, transparent); }
.am-stat--absent .am-stat__num { color: var(--am-absent); }
.am-stat--late { background: color-mix(in srgb, var(--am-late) 18%, transparent); border-color: color-mix(in srgb, var(--am-late) 38%, transparent); }
.am-stat--late .am-stat__num { color: color-mix(in srgb, var(--am-late) 78%, var(--on-surface)); }
.am-stat--leave { background: color-mix(in srgb, var(--am-leave) 15%, transparent); border-color: color-mix(in srgb, var(--am-leave) 35%, transparent); }
.am-stat--leave .am-stat__num { color: var(--am-leave); }

.am-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.am-banner {
    margin: .85rem 0 0;
    padding: .6rem .9rem;
    border-radius: 12px;
    font-size: .86rem;
    color: var(--on-surface);
    background: color-mix(in srgb, var(--tertiary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--tertiary) 30%, transparent);
}

/* ----- student cards ----- */
.am-cards { margin-top: 1rem; }

.am-card {
    position: relative;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--outline);
    border-left: 4px solid transparent;
    border-radius: 14px;
    padding: .85rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Scan-captured check-in / check-out times, top-right corner */
.am-card__times {
    position: absolute;
    top: .6rem;
    right: .6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
    z-index: 1;
}
.am-time {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    padding: .25rem .5rem;
    border-radius: 999px;
    white-space: nowrap;
}
.am-time i { font-size: .8rem; }
.am-time--in {
    color: var(--am-present, #1b7f4b);
    background: color-mix(in srgb, var(--am-present, #1b7f4b) 14%, transparent);
}
.am-time--out {
    color: #1769aa;
    background: color-mix(in srgb, #1769aa 14%, transparent);
}
[data-bs-theme="dark"] .am-time--out { color: #6bb8e6; }
/* Reserve room for the times badge only when it is present, so unmarked cards keep full width. */
.am-card:has(.am-card__times) .am-card__head { padding-right: 3.75rem; }

.am-card[data-status="Present"] { border-left-color: var(--am-present); background: color-mix(in srgb, var(--am-present) 6%, var(--surface)); }
.am-card[data-status="Absent"]  { border-left-color: var(--am-absent);  background: color-mix(in srgb, var(--am-absent) 6%, var(--surface)); }
.am-card[data-status="Late"]    { border-left-color: var(--am-late);    background: color-mix(in srgb, var(--am-late) 8%, var(--surface)); }
.am-card[data-status="Leave"]   { border-left-color: var(--am-leave);   background: color-mix(in srgb, var(--am-leave) 6%, var(--surface)); }

.am-card__head { display: flex; gap: .65rem; align-items: center; margin-bottom: .75rem; }

.am-card__avatar {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid var(--outline);
}

.am-card__avatar--ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: var(--on-primary-container);
    background: var(--primary-container);
}

.am-card__id { min-width: 0; }
.am-card__name { font-weight: 700; color: var(--on-surface); font-size: .94rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-card__meta { display: flex; gap: .5rem; flex-wrap: wrap; font-size: .76rem; color: var(--on-surface-variant); }
.am-card__roll { font-weight: 600; }
.am-card__adm::before { content: "•"; margin-right: .4rem; opacity: .6; }
.am-card__phone { display: block; font-size: .76rem; color: var(--on-surface-variant); margin-top: .15rem; }

/* status button group */
.am-card__actions { display: flex; width: 100%; gap: .3rem; }

.am-stbtn {
    flex: 1 1 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    padding: .35rem .15rem;
    border-radius: 10px !important;
    border: 1px solid var(--outline);
    background: var(--surface-variant);
    color: var(--on-surface-variant);
    font-size: .66rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s ease;
}

.am-stbtn .bi { font-size: .95rem; }
.am-stbtn:hover { border-color: color-mix(in srgb, var(--primary) 45%, transparent); color: var(--on-surface); }

.am-stbtn--present.is-active { background: var(--am-present); border-color: var(--am-present); color: #fff; }
.am-stbtn--absent.is-active  { background: var(--am-absent);  border-color: var(--am-absent);  color: #fff; }
.am-stbtn--late.is-active    { background: var(--am-late);    border-color: var(--am-late);    color: #1f2937; }
.am-stbtn--leave.is-active   { background: var(--am-leave);   border-color: var(--am-leave);   color: #fff; }

/* read-only mode */
.am-cards--locked .am-stbtn { pointer-events: none; opacity: .85; }
.am-cards--locked .am-stbtn:not(.is-active) { opacity: .4; }

/* ----- summary modal ----- */
.am-summary__lead { font-weight: 600; color: var(--on-surface); }
.am-summary__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin: .5rem 0; }
.am-summary__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .6rem .3rem;
    border-radius: 12px;
    border: 1px solid var(--outline);
}
.am-summary__item span { font-size: 1.3rem; font-weight: 700; }
.am-summary__item small { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--on-surface-variant); }
.am-summary__item.am-stat--present span { color: var(--am-present); }
.am-summary__item.am-stat--absent span { color: var(--am-absent); }
.am-summary__item.am-stat--late span { color: color-mix(in srgb, var(--am-late) 80%, var(--on-surface)); }
.am-summary__item.am-stat--leave span { color: var(--am-leave); }
.am-summary__meta { margin: .25rem 0 0; font-size: .82rem; color: var(--on-surface-variant); }

/* the summary modal sits outside .am-page, so re-declare the status hues there */
#amSummaryModal { --am-present: var(--chart-success); --am-absent: var(--chart-danger); --am-late: var(--chart-warning); --am-leave: var(--tertiary); }

@media (max-width: 575.98px) {
    .am-toolbar { position: static; }
    .am-stat { min-width: 56px; }
}

/* =========================================================================
   Bulk Exam Results — matrix entry (ExamResultMatrix/Index)
   ========================================================================= */
.erm-page { display: flex; flex-direction: column; gap: 1rem; }

.erm-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.erm-title { font-size: 1.5rem; font-weight: 700; color: var(--on-background); margin: 0; }
.erm-subtitle { margin: .15rem 0 0; color: var(--on-surface-variant); font-size: .9rem; max-width: 70ch; }
.erm-context { display: flex; gap: .5rem; flex-wrap: wrap; }
.erm-context__chip {
    display: inline-flex; align-items: center;
    padding: .35rem .7rem; border-radius: 999px;
    background: var(--surface-variant); color: var(--on-surface-variant);
    font-size: .8rem; font-weight: 600;
}

.erm-filters .card-body { padding-bottom: 1rem; }

/* ----- placeholder ----- */
.erm-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: .3rem; padding: 3rem 1rem; color: var(--on-surface-variant);
}
.erm-placeholder .bi { font-size: 2.4rem; opacity: .55; }
.erm-placeholder h5 { margin: .4rem 0 0; color: var(--on-surface); font-weight: 600; }
.erm-placeholder p { margin: 0; font-size: .88rem; max-width: 52ch; }

/* ----- matrix card ----- */
/* neutral surface header (not the deep-green card-primary fill) so the outline
   toolbar buttons stay readable in light + dark mode, with actions pinned right */
.erm-matrix .erm-matrix__header {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem .5rem; flex-wrap: wrap;
    background: var(--surface); color: var(--on-surface);
    border-bottom: 1px solid var(--outline);
}
.erm-matrix .erm-matrix__header .card-title { color: var(--on-surface); font-weight: 700; }
.erm-matrix__title { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.erm-matrix__actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-left: auto; justify-content: flex-end; }
.erm-matrix__actions .erm-divider { width: 1px; height: 22px; background: var(--outline); margin: 0 .25rem; }
.erm-matrix .erm-matrix__footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .82rem; background: var(--surface); border-top: 1px solid var(--outline); }

/* upload "button" is a <label>; keep it sized like the sibling buttons */
#ermUploadBtn { display: inline-flex; align-items: center; }
#ermUploadBtn.disabled { pointer-events: none; opacity: .5; }

/* the disabled Upload label reads as muted (the always-on outline border is handled
   globally by .ct-btn-outline in custom-theme.css) */
.erm-matrix__actions #ermUploadBtn.disabled { border-color: var(--outline); color: var(--on-surface-variant); }

/* ----- badges ----- */
.erm-badge {
    display: inline-flex; align-items: center;
    padding: .2rem .6rem; border-radius: 999px;
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.erm-badge--draft { background: var(--surface-variant); color: var(--on-surface-variant); }
.erm-badge--saved { background: color-mix(in srgb, var(--chart-success) 18%, transparent); color: var(--chart-success); }
.erm-badge--error { background: color-mix(in srgb, var(--error) 15%, transparent); color: var(--error); }

/* ----- read-only banner ----- */
.erm-banner {
    display: flex; align-items: center;
    margin: 0; padding: .6rem 1rem;
    background: color-mix(in srgb, var(--tertiary) 12%, transparent);
    color: var(--on-surface); font-size: .85rem;
    border-bottom: 1px solid var(--outline);
}

/* ----- the grid ----- */
.erm-table-scroll { overflow-x: auto; max-height: 70vh; overflow-y: auto; }
.erm-table { margin: 0; min-width: 100%; font-size: .85rem; border-color: var(--outline); }
.erm-table thead th {
    position: sticky; top: 0; z-index: 3;
    background: var(--surface-variant); color: var(--on-surface);
    font-size: .7rem; letter-spacing: .03em; text-transform: uppercase;
    vertical-align: middle; text-align: center; white-space: nowrap;
    padding: .5rem .5rem;
}
.erm-table tbody td { vertical-align: middle; padding: .35rem .5rem; }

/* sticky leading columns so names stay visible while scrolling subjects */
.erm-col-idx { width: 42px; text-align: center; color: var(--on-surface-variant); }
.erm-col-roll { width: 70px; text-align: center; font-weight: 600; }
.erm-col-student { min-width: 190px; }
.erm-table thead th.erm-col-idx,
.erm-table thead th.erm-col-roll,
.erm-table thead th.erm-col-student { z-index: 4; }
.erm-table .erm-col-idx,
.erm-table .erm-col-roll,
.erm-table .erm-col-student { position: sticky; left: 0; background: var(--surface); }
.erm-table .erm-col-roll { left: 42px; }
.erm-table .erm-col-student { left: 112px; box-shadow: 1px 0 0 var(--outline); }
.erm-table thead .erm-col-idx { left: 0; }
.erm-table thead .erm-col-roll { left: 42px; }
.erm-table thead .erm-col-student { left: 112px; }

.erm-stu-name { font-weight: 600; color: var(--on-surface); }
.erm-stu-adm { font-size: .72rem; color: var(--on-surface-variant); }

.erm-col-subject { min-width: 88px; }
.erm-col-subject__max { display: block; font-size: .64rem; opacity: .7; font-weight: 600; }
.erm-cell-wrap { padding: .25rem .35rem !important; }
.erm-cell { text-align: center; width: 78px; margin: 0 auto; padding: .25rem .3rem; }
.erm-cell--ro { background: var(--surface-variant); border-color: transparent; pointer-events: none; }
.erm-cell.is-invalid { border-color: var(--error); background: color-mix(in srgb, var(--error) 12%, transparent); }

.erm-col-total { width: 84px; text-align: center; font-weight: 700; background: var(--surface-variant); }
.erm-total-val { color: var(--on-surface); }
.erm-row--error { background: color-mix(in srgb, var(--error) 7%, transparent); }
.erm-row--error .erm-col-idx { color: var(--error); font-weight: 700; }

/* zebra that still respects the sticky columns */
.erm-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-variant) 35%, var(--surface)); }
.erm-table tbody tr:nth-child(even) .erm-col-idx,
.erm-table tbody tr:nth-child(even) .erm-col-roll,
.erm-table tbody tr:nth-child(even) .erm-col-student { background: color-mix(in srgb, var(--surface-variant) 35%, var(--surface)); }

/* ----- summary modal ----- */
.erm-summary__lead { font-weight: 600; color: var(--on-surface); }
.erm-summary__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin: .5rem 0; }
.erm-summary__item {
    display: flex; flex-direction: column; align-items: center;
    padding: .6rem .3rem; border-radius: 12px; border: 1px solid var(--outline);
}
.erm-summary__item span { font-size: 1.3rem; font-weight: 700; color: var(--on-surface); }
.erm-summary__item small { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--on-surface-variant); }
.erm-summary--created span { color: var(--chart-success); }
.erm-summary--updated span { color: var(--tertiary); }
.erm-summary--cleared span { color: var(--chart-warning); }

@media (max-width: 575.98px) {
    .erm-col-student { min-width: 150px; }
    .erm-summary__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== User permissions (assign claims) ===== */
/* Master-detail permission picker rendered inside the shared modal (widened to
   modal-xl by user.management.js). Token-driven so it follows light/dark. */

.perm-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1rem;
    /* Fixed height so expanding/collapsing a category scrolls INSIDE the panes
       instead of resizing the (centered) modal — which would otherwise flicker. */
    height: min(72vh, 600px);
    align-items: stretch;
}

/* --- Categories rail --- */
.perm-rail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
}

.perm-rail__title {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--on-surface-variant);
    padding: 0 .25rem;
}

.perm-cats {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    background: var(--surface-variant);
    border: 1px solid var(--outline);
    border-radius: 14px;
    padding: .4rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* --- Main category accordion --- */
.perm-maincat { display: flex; flex-direction: column; }

.perm-maincat__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--on-surface);
    border-radius: 10px;
    padding: .5rem .55rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease;
}

.perm-maincat__head:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.perm-maincat.open > .perm-maincat__head { color: var(--primary); }

.perm-maincat__arrow {
    font-size: .8rem;
    transition: transform .18s ease;
    flex: 0 0 auto;
}
.perm-maincat.open > .perm-maincat__head .perm-maincat__arrow { transform: rotate(90deg); }

.perm-maincat__name { flex: 1 1 auto; }

.perm-maincat__count {
    flex: 0 0 auto;
    min-width: 2.2rem;
    text-align: center;
    font-size: .68rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .05rem .4rem;
    background: color-mix(in srgb, var(--on-surface-variant) 22%, transparent);
    color: var(--on-surface);
}

/* Collapsed by default; expand when the main category is open */
.perm-maincat__body {
    display: none;
    flex-direction: column;
    gap: .1rem;
    padding: .15rem 0 .35rem .35rem;
    margin-left: .55rem;
    border-left: 1px solid var(--outline);
}
.perm-maincat.open > .perm-maincat__body { display: flex; }

.perm-cat {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--on-surface);
    border-radius: 10px;
    padding: .5rem .6rem;
    font-size: .85rem;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.perm-cat:hover {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.perm-cat.active {
    background: var(--primary);
    color: var(--on-primary);
}

.perm-cat__icon { font-size: 1rem; opacity: .9; }
.perm-cat__name { flex: 1 1 auto; line-height: 1.15; }

.perm-cat__count {
    flex: 0 0 auto;
    min-width: 2.2rem;
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .05rem .4rem;
    background: color-mix(in srgb, var(--on-surface-variant) 22%, transparent);
    color: var(--on-surface);
}

.perm-cat.active .perm-cat__count {
    background: color-mix(in srgb, var(--on-primary) 28%, transparent);
    color: var(--on-primary);
}

.perm-rule {
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    border: 1px solid var(--outline);
    border-radius: 14px;
    padding: .85rem .9rem;
    flex: 0 0 auto;
}

.perm-rule__head {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--tertiary);
    margin-bottom: .45rem;
}

.perm-rule__text {
    font-size: .78rem;
    line-height: 1.45;
    color: var(--on-surface-variant);
}

.perm-rule__text #permSelectedCount {
    font-weight: 700;
    color: var(--on-surface);
}

/* --- Main list --- */
.perm-main {
    min-width: 0;
    border: 1px solid var(--outline);
    border-radius: 14px;
    background: var(--surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.perm-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--outline);
    background: var(--surface-variant);
    position: sticky;
    top: 0;
    z-index: 2;
}

.perm-total {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--on-surface-variant);
    white-space: nowrap;
}

.perm-search {
    position: relative;
    margin-left: auto;
    flex: 0 1 240px;
}

.perm-search .bi {
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--on-surface-variant);
    font-size: .85rem;
    pointer-events: none;
}

.perm-search .form-control {
    padding-left: 2rem;
    height: 2.1rem;
    font-size: .85rem;
    border-radius: 999px;
}

.perm-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .25rem 0;
}

.perm-toolbar { flex: 0 0 auto; }

.perm-grp + .perm-grp { border-top: 1px solid var(--outline); }

.perm-grp__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .9rem .45rem;
    position: sticky;
    top: 0;
    background: color-mix(in srgb, var(--surface-variant) 80%, var(--surface));
    backdrop-filter: blur(2px);
    z-index: 1;
}

.perm-grp__title {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--on-surface-variant);
}

/* Main-category tag shown before the sub-category name in each list group header */
.perm-grp__main {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    border-radius: 6px;
    padding: .1rem .4rem;
}

.perm-grp__rows {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .15rem .5rem .5rem;
}

.perm-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .65rem;
    margin: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s ease;
}

.perm-row:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); }

/* Highlight rows whose permission was already granted when the modal opened
   (fixed snapshot — does NOT change as switches are toggled) */
.perm-row.is-original {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    box-shadow: inset 3px 0 0 0 var(--primary);
}

.perm-row.is-original .perm-row__name { color: var(--primary); }

.perm-row__info { flex: 1 1 auto; min-width: 0; }

.perm-row__name {
    font-size: .9rem;
    font-weight: 600;
    color: var(--on-surface);
    line-height: 1.2;
}

.perm-row__desc {
    font-size: .76rem;
    color: var(--on-surface-variant);
    margin-top: .1rem;
}

.perm-row__code {
    flex: 0 0 auto;
    font-size: .7rem;
    letter-spacing: .02em;
    color: var(--on-surface-variant);
    background: var(--surface-variant);
    border: 1px solid var(--outline);
    border-radius: 6px;
    padding: .12rem .4rem;
    white-space: nowrap;
}

.perm-row__switch { flex: 0 0 auto; }

/* Switches — flex layout so Bootstrap's negative margin can't overlap the code badge */
.perm-switch {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-left: 0;
    min-height: auto;
}

.perm-switch .form-check-input {
    cursor: pointer;
    float: none;
    width: 2.1rem;
    height: 1.1rem;
    margin: 0;
    flex: 0 0 auto;
}

.perm-switch .form-check-label { margin: 0; }

.perm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 2.5rem 1rem;
    color: var(--on-surface-variant);
    font-size: .85rem;
}

.perm-empty .bi { font-size: 1.6rem; opacity: .6; }

.perm-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--outline);
}

@media (max-width: 767.98px) {
    /* Stack the rail above the list; let the page flow instead of a fixed height. */
    .perm-shell { grid-template-columns: 1fr; height: auto; }
    .perm-rail { flex-direction: column; }
    .perm-cats { flex: 0 0 auto; max-height: 40vh; }
    .perm-list { max-height: 60vh; }
    .perm-row__code { display: none; }
    .perm-search { flex-basis: 160px; }
}

/* ===== Class / Section access (reuses the perm-* token-driven look) =====
   Two-panel scope editor: a card browser of every class/section combination on the left
   (whole-class card first per class; selecting it covers & greys its sections), and a
   filled "Current Selection" panel on the right with per-row remove, a coverage meter,
   and the Save/Cancel actions. */
.csa-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 1rem;
    height: min(62vh, 640px);
}

.csa-browser { height: 100%; }

/* --- class group --- */
.csa-grp + .csa-grp { border-top: 1px solid var(--outline); }

.csa-grp__all {
    background: none;
    border: 0;
    padding: 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--primary);
    cursor: pointer;
    white-space: nowrap;
}

.csa-grp__all:hover { text-decoration: underline; }
.csa-grp__all.is-on { color: var(--tertiary); text-decoration: none; cursor: pointer; }

/* --- combo cards --- */
.csa-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: .5rem;
    padding: .15rem .75rem .75rem;
}

.csa-card {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .65rem;
    border: 1px solid var(--outline);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

.csa-card:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.csa-card--whole { border-style: dashed; }

.csa-card__info { flex: 1 1 auto; min-width: 0; }

.csa-card__name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--on-surface);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.csa-card__sub {
    font-size: .72rem;
    color: var(--on-surface-variant);
    margin-top: .1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.csa-card__action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    border: 1px solid var(--outline);
    color: var(--on-surface-variant);
    background: var(--surface-variant);
    font-size: .8rem;
}

.csa-card.is-selected {
    border-color: var(--primary);
    border-style: solid;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.csa-card.is-selected .csa-card__name { color: var(--primary); }

.csa-card.is-selected .csa-card__action {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

/* Section already covered by the selected whole-class rule */
.csa-card.is-covered { opacity: .55; cursor: not-allowed; }

.csa-card.is-covered .csa-card__action {
    background: color-mix(in srgb, var(--primary) 25%, transparent);
    border-color: transparent;
    color: var(--primary);
}

/* --- current-selection panel (filled; calmer secondary green in dark mode) --- */
.csa-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 14px;
    padding: 1rem;
    background: var(--primary);
    color: var(--on-primary);
}

[data-bs-theme="dark"] .custom-theme .csa-side {
    background: var(--secondary-container);
    color: var(--on-secondary-container);
}

.csa-side__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
}

.csa-side__title {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.15;
}

.csa-side__badge {
    flex: 0 0 auto;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: color-mix(in srgb, currentColor 16%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.csa-side__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.csa-side__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    text-align: center;
    padding: 1.5rem .5rem;
    font-size: .82rem;
    opacity: .85;
}

.csa-side__empty .bi { font-size: 1.5rem; opacity: .7; }

.csa-sel {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .6rem;
    border-radius: 10px;
    background: color-mix(in srgb, currentColor 12%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.csa-sel__info { flex: 1 1 auto; min-width: 0; }

.csa-sel__name {
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.csa-sel__kind {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .75;
    margin-top: .1rem;
}

.csa-sel__remove {
    flex: 0 0 auto;
    background: none;
    border: 0;
    color: inherit;
    padding: .15rem;
    line-height: 1;
    cursor: pointer;
    opacity: .7;
}

.csa-sel__remove:hover { opacity: 1; }

/* --- coverage meter --- */
.csa-cov {
    margin-top: .75rem;
    padding: .6rem .7rem;
    border-radius: 10px;
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.csa-cov__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .35rem;
}

.csa-cov__label {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .8;
}

.csa-cov__pct { font-size: .74rem; font-weight: 700; }

.csa-cov__bar {
    height: .35rem;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 18%, transparent);
    overflow: hidden;
}

.csa-cov__bar > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--tertiary);
    transition: width .25s ease;
}

/* --- panel actions --- */
.csa-side__actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .75rem;
}

.csa-commit {
    background: var(--tertiary);
    border: 1px solid var(--tertiary);
    color: var(--on-tertiary);
    font-weight: 700;
}

.csa-commit:hover {
    background: color-mix(in srgb, var(--tertiary) 85%, black);
    border-color: color-mix(in srgb, var(--tertiary) 85%, black);
    color: var(--on-tertiary);
}

.csa-cancel {
    background: transparent;
    border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
    color: inherit;
}

.csa-cancel:hover {
    background: color-mix(in srgb, currentColor 12%, transparent);
    color: inherit;
}

@media (max-width: 991.98px) {
    /* Stack: browser above, selection panel below; let the modal scroll naturally. */
    .csa-shell { grid-template-columns: 1fr; height: auto; }
    .csa-browser .perm-list { max-height: 45vh; }
    .csa-side__list { max-height: 30vh; }
}

/* ===== ID card preview (.sid-card) — shared by the profile modal + the bulk ID-card grid =====
   Deliberately fixed deep-green-on-white (a physical CR80 card look) regardless of light/dark,
   so the on-screen preview matches the printed/PDF card. Moved here from _IdCardPreview.cshtml so
   the partial can be rendered many times in the bulk grid without repeating a <style> block. */
.sid-card {
    width: 260px;
    background: #ffffff;
    border: 1px solid #d9e2dc;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(13, 51, 32, .12);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    position: relative;
    overflow: hidden; /* clips the diagonal role ribbon at the corner */
    display: flex;
    flex-direction: column;
}
/* Diagonal role ribbon across the top-right corner ("STUDENT" / "TEACHER") */
.sid-card__ribbon {
    position: absolute;
    top: 24px;
    right: -40px;
    width: 150px;
    transform: rotate(45deg);
    background: #0f3d2e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    padding: 4px 0;
    border-top: 1px solid rgba(255, 255, 255, .35);
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 2px 6px rgba(13, 51, 32, .35);
    text-align: center;
    z-index: 1;
}
/* Long employee types ("Maintenance Staff") shrink instead of wrapping in the ribbon. */
.sid-card__ribbon--long { font-size: 8px; letter-spacing: .08em; }
/* White header: centered logo + deep-green school name + tagline + gold rule (mirrors the PDF). */
.sid-card__header { padding: 16px 14px 0; text-align: center; }
.sid-card__logo { display: block; height: 44px; max-width: 64px; object-fit: contain; margin: 0 auto; }
.sid-card__school {
    margin-top: 6px; padding: 0 20px; font-size: 15px; font-weight: 800;
    color: #0f3d2e; text-transform: uppercase; line-height: 1.12;
}
.sid-card__tagline {
    margin-top: 4px; font-size: 8.5px; font-weight: 700;
    letter-spacing: .22em; color: #6c7d75; text-transform: uppercase;
}
.sid-card__rule { width: 56px; height: 2px; background: #c9a24b; margin: 7px auto 0; }
/* Body: photo left, name + labelled info rows right. */
.sid-card__body { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px 0; text-align: left; }
.sid-card__photo {
    flex: none; width: 92px; height: 102px;
    border: 2px solid #1b6b4a; border-radius: 10px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; background: #eef3f0;
}
.sid-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.sid-card__initials { font-size: 34px; font-weight: 700; color: #1b6b4a; }
.sid-card__info { flex: 1; min-width: 0; }
.sid-card__name { font-size: 15px; font-weight: 700; color: #0f3d2e; line-height: 1.12; }
.sid-card__subline { margin-top: 2px; font-size: 10px; font-weight: 600; color: #6c7d75; }
.sid-card__rows { margin-top: 6px; }
.sid-card__row { display: flex; align-items: center; gap: 7px; padding: 4px 0; }
.sid-card__row + .sid-card__row { border-top: 1px solid #e3eae6; }
.sid-card__row-icon {
    flex: none; width: 22px; height: 22px; border-radius: 5px;
    background: #1b6b4a; color: #fff; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
}
.sid-card__row-text { flex: 1; min-width: 0; }
.sid-card__row-label {
    display: block; font-size: 8px; font-weight: 600; letter-spacing: .1em;
    color: #6c7d75; text-transform: uppercase;
}
.sid-card__row-value {
    display: block; font-size: 12px; font-weight: 700; color: #0f3d2e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Lower band: QR (scan target) + IMPORTANT bullet list. */
.sid-card__lower { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px 14px; text-align: left; }
.sid-card__barcode {
    flex: none; width: 92px; padding: 4px;
    border: 1px solid #e3eae6; border-radius: 8px; text-align: center;
}
.sid-card__barcode svg { width: 100%; height: auto; } /* square QR, black-on-white for scanning */
.sid-card__barcode-text { font-size: 9px; letter-spacing: .1em; color: #6c7d75; margin-top: 2px; }
.sid-card__notes { flex: 1; min-width: 0; }
.sid-card__notes-title { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; color: #0f3d2e; }
.sid-card__notes ul { margin: 4px 0 0; padding-left: 14px; }
.sid-card__notes li { font-size: 8.8px; color: #6c7d75; margin-top: 2px; line-height: 1.25; }
/* Deep-green bottom band: website + address (hidden when the company has neither). */
.sid-card__footer {
    margin-top: auto; background: #0f3d2e; color: #fff;
    border-top: 2px solid #c9a24b;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 7px 12px; font-size: 8.6px; text-align: left;
}
.sid-card__footer-item { display: flex; align-items: center; gap: 4px; min-width: 0; }
.sid-card__footer-item i { font-size: 10px; flex: none; }

/* ===== Bulk ID-card grid (Bulk Admission -> ID Cards tab) ===== */
.bid-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem 1rem;
    justify-items: center;
    margin-top: .5rem;
}
.bid-card-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
}
.bid-card-dl { min-width: 140px; }

/* ===== Scan Attendance page ===== */
.scan-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.85rem;
}
.scan-title { font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--on-background); }
.scan-subtitle { font-size: .9rem; color: var(--on-surface-variant); margin: .15rem 0 0; }
.scan-context { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* WhatsApp default-instance chip — revealed by JS only when connected */
.scan-wa-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--on-surface);
    background: color-mix(in srgb, #25d366 12%, var(--surface));
    border: 1px solid color-mix(in srgb, #25d366 40%, var(--outline));
}
.scan-wa-chip i { color: #1fa855; }
.scan-wa-chip__num { color: var(--on-surface-variant); font-weight: 500; }

.scan-card { border-radius: 16px; }

/* Mode toggle — two big segmented buttons */
.scan-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-bottom: 1rem;
}
.scan-mode {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: .85rem .5rem;
    border: 1.5px solid var(--outline);
    border-radius: 12px;
    background: var(--surface);
    color: var(--on-surface-variant);
    font-weight: 700; font-size: .95rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.scan-mode i { font-size: 1.4rem; }
.scan-mode:hover { border-color: var(--primary); }
.scan-mode--in.active {
    border-color: #1b7f4b; color: #fff;
    background: #1b7f4b;
    box-shadow: 0 4px 12px color-mix(in srgb, #1b7f4b 35%, transparent);
}
.scan-mode--out.active {
    border-color: #1769aa; color: #fff;
    background: #1769aa;
    box-shadow: 0 4px 12px color-mix(in srgb, #1769aa 35%, transparent);
}

/* Camera viewfinder */
.scan-reader {
    width: 100%;
    min-height: 70px;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    margin-bottom: .75rem;
}
.scan-reader:empty { display: none; }
.scan-reader video { width: 100% !important; height: auto !important; display: block; }
.scan-camera-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.scan-camera-actions .btn { flex: 1 1 auto; }
.scan-hint { font-size: .8rem; color: var(--on-surface-variant); margin: .6rem 0 0; }

.scan-manual { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--outline); }

/* Recently-scanned log */
.scan-log__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.scan-log__title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.scan-log__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.8rem; height: 1.8rem; padding: 0 .5rem;
    border-radius: 999px; font-weight: 700; font-size: .85rem;
    background: var(--primary-container); color: var(--on-primary-container);
}
.scan-empty {
    text-align: center; color: var(--on-surface-variant);
    padding: 2.5rem 1rem;
}
.scan-empty i { font-size: 2.2rem; opacity: .5; display: block; margin-bottom: .5rem; }
.scan-empty p { font-size: .9rem; }

.scan-log { display: flex; flex-direction: column; gap: .6rem; max-height: 60vh; overflow-y: auto; }
.scan-row {
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem .85rem;
    border: 1px solid var(--outline);
    border-left-width: 4px;
    border-radius: 12px;
    background: var(--surface);
    animation: scanRowIn .18s ease;
}
@keyframes scanRowIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.scan-row--in { border-left-color: #1b7f4b; background: color-mix(in srgb, #1b7f4b 6%, var(--surface)); }
.scan-row--out { border-left-color: #1769aa; background: color-mix(in srgb, #1769aa 6%, var(--surface)); }
.scan-row--warn { border-left-color: #e6920a; background: color-mix(in srgb, #e6920a 8%, var(--surface)); }
.scan-row--bad { border-left-color: #d9534f; background: color-mix(in srgb, #d9534f 8%, var(--surface)); }

.scan-row__avatar {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-container); color: var(--on-primary-container);
    font-weight: 700;
}
.scan-row__avatar img { width: 100%; height: 100%; object-fit: cover; }
.scan-row__body { flex: 1 1 auto; min-width: 0; }
.scan-row__name { font-weight: 700; color: var(--on-surface); }
.scan-row__meta { font-size: .8rem; color: var(--on-surface-variant); display: flex; gap: .35rem; flex-wrap: wrap; }
.scan-row__msg { font-size: .82rem; color: var(--on-surface-variant); margin-top: .15rem; }
.scan-row__wa { font-size: .78rem; margin-top: .1rem; display: flex; align-items: center; gap: .3rem; min-width: 0; }
.scan-row__wa i { flex-shrink: 0; }
.scan-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; flex-shrink: 0; }
.scan-row__icon { font-size: 1.2rem; }
.scan-row--in .scan-row__icon { color: #1b7f4b; }
.scan-row--out .scan-row__icon { color: #1769aa; }
.scan-row--warn .scan-row__icon { color: #e6920a; }
.scan-row--bad .scan-row__icon { color: #d9534f; }
.scan-row__times { display: flex; flex-direction: column; gap: .15rem; align-items: flex-end; }
.scan-time { font-size: .72rem; font-weight: 600; white-space: nowrap; }
.scan-time--in { color: #1b7f4b; }
.scan-time--out { color: #1769aa; }

/* Verify-before-marking switch */
.scan-verify {
    display: flex; align-items: center; gap: 1rem;
    padding: .9rem 1rem; margin-bottom: 1rem;
    border: 1px solid var(--outline); border-radius: 12px;
    background: var(--surface-variant);
}
.scan-verify__label { cursor: pointer; margin: 0; }
.scan-verify__title { display: block; font-weight: 700; color: var(--on-surface); line-height: 1.25; }
.scan-verify__hint { display: block; font-size: .8rem; color: var(--on-surface-variant); }

/* Large pill toggle with ON / OFF text */
.scan-toggle { position: relative; display: inline-block; flex-shrink: 0; cursor: pointer; line-height: 0; }
.scan-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.scan-toggle__track {
    display: inline-block; position: relative;
    width: 82px; height: 36px; border-radius: 999px;
    background: #2b3648;
    transition: background .2s ease;
}
.scan-toggle__knob {
    position: absolute; left: 4px; top: 4px;
    width: 28px; height: 28px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
    transition: left .2s ease;
    z-index: 2;
}
.scan-toggle__text {
    position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
    font-size: .72rem; font-weight: 800; letter-spacing: .06em; color: #fff;
    transition: none;
}
/* Track text is overridable per instance (see .ts-card__toggle) — defaults keep ON / OFF. */
.scan-toggle__text::after { content: var(--scan-toggle-off, 'OFF'); }
.scan-toggle input:focus-visible + .scan-toggle__track {
    outline: 2px solid var(--primary); outline-offset: 2px;
}
.scan-toggle input:checked + .scan-toggle__track { background: #1b7f4b; }
.scan-toggle input:checked + .scan-toggle__track .scan-toggle__knob { left: 50px; }
.scan-toggle input:checked + .scan-toggle__track .scan-toggle__text { right: auto; left: 12px; }
.scan-toggle input:checked + .scan-toggle__track .scan-toggle__text::after { content: var(--scan-toggle-on, 'ON'); }

/* Verify confirm dialog */
.scan-verify-info { margin-top: 1rem; text-align: center; }
.scan-verify-mode {
    display: inline-flex; align-items: center; gap: .35rem;
    font-weight: 700; font-size: .85rem; padding: .3rem .8rem; border-radius: 999px;
    color: #fff; margin-bottom: .6rem;
}
.scan-verify-mode--in { background: #1b7f4b; }
.scan-verify-mode--out { background: #1769aa; }
.scan-verify-status {
    font-size: .9rem; color: var(--on-surface-variant);
    padding: .5rem .75rem; border-radius: 10px; background: var(--surface-variant);
}
.scan-verify-warn {
    margin-top: .5rem; font-size: .9rem; font-weight: 600;
    color: #b26a00; padding: .5rem .75rem; border-radius: 10px;
    background: color-mix(in srgb, #e6920a 14%, transparent);
}
[data-bs-theme="dark"] .scan-verify-warn { color: #fbbf4c; }

@media (max-width: 575.98px) {
    .scan-mode { padding: 1rem .5rem; font-size: 1.05rem; }
    .scan-mode i { font-size: 1.7rem; }
}

/* ===== Brand logos (CSS-only — no images) =====
   Two marks driven by ProjectSettings (ShortName / BrandText):
   - .brand-mark      → login page letter tile (first letter of ShortName + accent dot)
   - .brand-pill      → sidebar wordmark pill (full ShortName) next to .brand-text
   Both sit on permanently dark deep-green surfaces (auth visual panel / sidebar), so —
   like the .sid-card ID preview — they keep fixed brand colors instead of light/dark
   tokens; the teal comes from --sidebar-accent, which is constant across both themes. */

/* --- Letter mark: rounded deep-green tile + lowercase letter + teal dot --- */
.brand-mark {
    position: relative;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(150deg, #0B4038 0%, #00241F 62%);
    border: 1px solid color-mix(in srgb, var(--sidebar-accent) 38%, transparent);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.brand-mark__letter {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
    text-transform: lowercase;
    color: var(--sidebar-accent);
    transform: translateY(-1px); /* optically centre the lowercase glyph */
    user-select: none;
}

/* teal accent dot overlapping the top-right corner */
.brand-mark::after {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--sidebar-accent);
    box-shadow: 0 0 0 3px rgba(0, 22, 18, .85),
                0 0 10px color-mix(in srgb, var(--sidebar-accent) 55%, transparent);
}

/* --- Wordmark pill: ShortName in a teal gradient pill (sidebar brand) --- */
.brand-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 58px;
    height: 34px;
    padding: 0 .85rem;
    border-radius: 999px;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--sidebar-accent) 78%, #ffffff) 0%,
        var(--sidebar-accent) 45%,
        color-mix(in srgb, var(--sidebar-accent) 68%, #001512) 100%);
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0, 22, 18, .35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 6px rgba(0, 0, 0, .35);
    user-select: none;
}

.custom-theme .app-sidebar .brand-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
}

.custom-theme .app-sidebar .brand-link .brand-text {
    font-weight: 300;
    font-size: 1.15rem;
    letter-spacing: .03em;
    color: #EAF4F2;
    white-space: nowrap;
}

/* ===== Listing filter chips =====
   Active-filter chips shown in the card-tools of a filled (card-primary) Filters header,
   so the applied filters stay visible while the card is collapsed. Colors derive from
   currentColor — the header's own text color (--on-primary in light, --on-secondary in
   dark, where the filled header switches to the calmer secondary green) — so the chips
   stay legible on the header in both themes. */
.flt-chips {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

.flt-chip {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: inherit;
    background: color-mix(in srgb, currentColor 14%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
    max-width: 260px;
}

.flt-chip > .bi {
    margin-right: .35rem;
    flex-shrink: 0;
}

.flt-chip__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flt-chip__clear {
    background: none;
    border: 0;
    color: inherit;
    padding: 0 0 0 .4rem;
    line-height: 1;
    cursor: pointer;
    opacity: .75;
    flex-shrink: 0;
}

.flt-chip__clear:hover { opacity: 1; }
.flt-chip__clear .bi { font-size: .7rem; }

/* ===== Toastr notifications =====
   Bootstrap 5 also defines a `.toast` class (translucent white background, fixed width),
   which collides with toastr's markup and washes the toasts out. These overrides win via
   the #toast-container id and restore solid, readable status toasts. Semantic status hues
   stay fixed; they read correctly on both light and dark canvases. */
#toast-container > div {
    opacity: 1;
    width: 340px;
    max-width: calc(100vw - 24px);
    padding: 14px 18px 14px 50px;
    border: 0;
    border-radius: 10px;
    font-size: .875rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    background-color: var(--surface, #2b2b2b); /* fallback while type class loads */
    color: #fff;
}
#toast-container > div:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
#toast-container .toast-title { font-weight: 700; }
#toast-container .toast-message { color: #fff; }
#toast-container > .toast-success { background-color: #1b6b4a; }
#toast-container > .toast-error { background-color: #b02a37; }
#toast-container > .toast-warning { background-color: #b26a00; }
#toast-container > .toast-info { background-color: #1f7a8c; }
#toast-container > div .toast-close-button { color: #fff; opacity: .7; text-shadow: none; }
#toast-container > div .toast-close-button:hover { opacity: 1; }
#toast-container .toast-progress { background: rgba(255, 255, 255, .45); opacity: 1; }


/* ===== Header theme switch (light/dark pill, _Header.cshtml) ===== */
.theme-switch {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .22rem;
    border: 1px solid var(--outline);
    border-radius: 999px;
    background: var(--surface-variant);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.theme-switch:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.theme-switch__side {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: .8rem;
    color: var(--on-surface-variant);
    opacity: .55;
    transition: background .2s ease, color .2s ease, opacity .2s ease;
}

/* Active side gets the filled thumb: sun in light mode, moon in dark mode. */
html[data-bs-theme="light"] .theme-switch__side--light,
html:not([data-bs-theme="dark"]) .theme-switch__side--light {
    background: var(--primary);
    color: var(--on-primary);
    opacity: 1;
}

html[data-bs-theme="dark"] .theme-switch__side--dark {
    background: var(--primary);
    color: var(--on-primary);
    opacity: 1;
}

/* ===== Sidebar mini collapse (icons-only rail) =====
   AdminLTE 4 handles the standard menu (hides .brand-text, .nav-link p, .nav-arrow and
   expands on hover); these rules cover our custom sidebar elements only. */

/* Company switcher (CompanyWithChildren component) has no icon — hide it on the icon
   rail, restore it while the collapsed sidebar is hover-expanded. */
.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-menu form {
    display: none;
}

/* Shrink the brand wordmark pill so it centers on the narrow rail. */
.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .brand-pill {
    min-width: 0;
    height: 30px;
    padding: 0 .55rem;
    font-size: .9rem;
}

/* ===== Sidebar user panel (name + role, pinned to the sidebar footer, _Sidebar.cshtml) =====
   Sits below the scrolling .sidebar-wrapper. To pin it, the sidebar becomes a flex column and the
   wrapper flexes to fill the remaining height (overriding AdminLTE's fixed 100vh-minus-brand height,
   hence !important) so the panel stays visible while the menu scrolls. Like .brand-pill it sits on
   the permanently deep-green panel, so it keeps fixed brand tones via the --sidebar-* tokens (which
   are constant across light/dark) rather than the light/dark surface tokens. */
.custom-theme .app-sidebar {
    display: flex;
    flex-direction: column;
}

.custom-theme .app-sidebar .sidebar-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important; /* override AdminLTE's fixed wrapper height so the footer fits */
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 0 0 auto;
    margin-top: auto;
    padding: .7rem 1rem;
    text-decoration: none;
    color: var(--sidebar-color);
    border-top: 1px solid color-mix(in srgb, var(--sidebar-accent) 22%, transparent);
    background: color-mix(in srgb, #ffffff 4%, transparent);
    transition: background .2s ease;
}

.sidebar-user:hover,
.sidebar-user:focus {
    background: var(--sidebar-hover-bg);
}

.sidebar-user__avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    object-fit: cover;
    background: var(--sidebar-hover-bg);
    border: 2px solid color-mix(in srgb, var(--sidebar-accent) 55%, transparent);
}

.sidebar-user__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.sidebar-user__name {
    overflow: hidden;
    font-size: .9rem;
    font-weight: 600;
    color: #EAF4F2;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sidebar-user__role {
    overflow: hidden;
    font-size: .75rem;
    color: var(--sidebar-accent);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* On the collapsed icon rail: drop the text and center the avatar (restored on hover-expand). */
.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-user {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-user__info {
    display: none;
}

.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-user__avatar {
    width: 34px;
    height: 34px;
}

/* ===== Profile photo upload frame (student/teacher forms) ===== */
.photo-frame {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1 / 1;
    background: var(--surface);
}

/* ===== Image cropper modal (Views/Shared/Modals/_ImageCropperModal.cshtml) ===== */
.ic-stage {
    height: min(60vh, 420px);
    background: color-mix(in srgb, var(--on-surface) 8%, var(--surface));
    overflow: hidden;
}

.ic-stage img {
    display: block;
    max-width: 100%;
}

/* The raw <img> is only a source for Cropper (created on shown.bs.modal) — keep it
   invisible so it doesn't flash at natural size while the modal fades in. */
.ic-stage > img {
    opacity: 0;
    max-height: 100%;
}

.ic-controls {
    display: flex;
    gap: 2rem;
    align-items: center;
    padding: .75rem 1.5rem;
    background: var(--surface-variant);
    border-top: 1px solid var(--outline);
}

.ic-control {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.ic-control .form-label {
    margin-bottom: 0;
    white-space: nowrap;
    color: var(--on-surface-variant);
    font-weight: 600;
}

.ic-control .form-range { flex: 1; }

/* ===== My Profile (Profile/Index.cshtml) ===== */

/* Identity-card avatar: photo or initials fallback */
.pf-avatar {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-container);
    color: var(--on-primary-container);
    font-size: 2rem;
    font-weight: 700;
    border: 3px solid color-mix(in srgb, var(--primary) 25%, transparent);
}

.pf-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Key/value rows on the identity card */
.pf-meta__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.45rem 0;
}

.pf-meta__row + .pf-meta__row {
    border-top: 1px solid color-mix(in srgb, var(--outline) 35%, transparent);
}

.pf-meta__label {
    color: var(--on-surface-variant);
    font-size: 0.8125rem;
}

.pf-meta__value {
    font-weight: 600;
    font-size: 0.875rem;
    text-align: right;
    overflow-wrap: anywhere;
}

/* Recent sign-ins list */
.pf-signin__item {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0;
}

.pf-signin__item + .pf-signin__item {
    border-top: 1px dashed color-mix(in srgb, var(--outline) 45%, transparent);
}

.pf-signin__date {
    font-weight: 600;
    font-size: 0.875rem;
}

.pf-signin__ip {
    color: var(--on-surface-variant);
    font-size: 0.8125rem;
}

/* Placeholder panes for not-yet-shipped tabs */
.pf-soon {
    color: var(--on-surface-variant);
}

.pf-soon i {
    font-size: 2.25rem;
    opacity: 0.45;
}

/* Change-password tab: input wrapper + show/hide eye toggle
   (.auth-pass-toggle is scoped to .auth-card, so the profile page needs its own) */
.pf-pass-wrap {
    position: relative;
}

.pf-pass-wrap .form-control {
    padding-right: 2.75rem;
}

.pf-pass-toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    padding: 0.25rem 0.5rem;
    color: var(--on-surface-variant);
    line-height: 1;
}

.pf-pass-toggle:hover {
    color: var(--tertiary);
}

/* Two-factor tab: QR frame, manual key, recovery-code grid */
.pf-tfa-qr {
    width: 196px;
    min-height: 196px;
    padding: 8px;
    border: 1px solid var(--outline);
    border-radius: 0.5rem;
    background: #fff; /* QR must stay dark-on-white for scanners, in both themes */
    display: flex;
    align-items: center;
    justify-content: center;
}

.pf-tfa-key code {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    background: var(--surface-variant);
    color: var(--on-surface);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    overflow-wrap: anywhere;
}

.pf-tfa-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.5rem;
    max-width: 34rem;
}

.pf-tfa-codes code {
    display: block;
    padding: 0.4rem 0.6rem;
    border-radius: 0.375rem;
    border: 1px dashed color-mix(in srgb, var(--outline) 60%, transparent);
    background: var(--surface-variant);
    color: var(--on-surface);
    text-align: center;
    letter-spacing: 0.05em;
}

/* Sign-in methods tab: passkey list rows */
.pf-pk-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
}

.pf-pk-item + .pf-pk-item {
    border-top: 1px solid color-mix(in srgb, var(--outline) 35%, transparent);
}

.pf-pk-item__name {
    font-weight: 600;
}

.pf-pk-item__meta {
    color: var(--on-surface-variant);
    font-size: 0.8125rem;
}

/* ===== RTL overrides (Urdu / Arabic — header language dropdown) ===== */
/* Bootstrap/AdminLTE RTL builds handle their own classes; only our physical
   left/right properties need flipping. Add rules here as breakage is found. */

[dir="rtl"] .hdr-batch-chip {
    margin-right: 0;
    margin-left: .35rem;
}

[dir="rtl"] .whatsapp-float {
    right: auto;
    left: 20px;
}

/* ===== Google Workspace / Live Class Rooms ===== */

/* Buttons sitting on the FILLED .card-primary header. The header's ink differs per theme
   (on-primary in light, on-secondary in dark — see custom-theme.css), so these inherit the
   header's own text color via currentColor instead of naming a token. The a.* selectors
   out-rank the global `.custom-theme a { color: var(--primary) }` link rule. */
.card-header .gw-hdr-btn,
.card-header a.gw-hdr-btn {
    color: inherit;
    background: color-mix(in srgb, currentColor 12%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
}

.card-header .gw-hdr-btn:hover,
.card-header .gw-hdr-btn:focus,
.card-header a.gw-hdr-btn:hover,
.card-header a.gw-hdr-btn:focus {
    color: inherit;
    background: color-mix(in srgb, currentColor 24%, transparent);
    border-color: color-mix(in srgb, currentColor 60%, transparent);
}

/* Destructive variant (Disconnect) — solid error chip reads on any header color. */
.gw-hdr-btn-danger {
    color: var(--on-error);
    background: var(--error);
    border: 1px solid transparent;
}

.gw-hdr-btn-danger:hover,
.gw-hdr-btn-danger:focus {
    color: var(--on-error);
    background: color-mix(in srgb, var(--error) 85%, var(--on-error));
}

/* Connection-mode option cards on the Google Workspace settings page */
.gw-mode-card {
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: .75rem;
    padding: 1.25rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.gw-mode-card:hover {
    border-color: var(--primary);
}

.gw-mode-card.gw-mode-current {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.gw-cap-list li {
    padding: .15rem 0;
    font-size: 0.875rem;
}

/* Live Class Rooms placeholder / empty states */
.gw-empty-icon {
    font-size: 3rem;
    color: var(--on-surface-variant);
}

.gw-empty-text {
    max-width: 560px;
}

/* Overview module cards (whole card is the link) */
a.gw-module-card {
    display: block;
    text-decoration: none;
    color: var(--on-surface);
    transition: border-color .15s ease, transform .15s ease;
}

a.gw-module-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.gw-module-icon {
    font-size: 2rem;
    color: var(--primary);
}

/* ===== Paper Creation — bundled Urdu/Arabic/Math fonts (wwwroot/fonts, OFL-licensed) =====
   Same font files are registered with QuestPDF at startup (Program.cs), so on-screen
   question text and the printed paper PDF render identically. */

@font-face {
    font-family: 'Noto Nastaliq Urdu';
    src: url('../fonts/NotoNastaliqUrdu-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Nastaliq Urdu';
    src: url('../fonts/NotoNastaliqUrdu-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Naskh Arabic';
    src: url('../fonts/NotoNaskhArabic-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Naskh Arabic';
    src: url('../fonts/NotoNaskhArabic-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'STIX Two Math';
    src: url('../fonts/STIXTwoMath-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Helpers for bilingual question text: apply on inputs, previews and table cells. */
.text-urdu {
    font-family: 'Noto Nastaliq Urdu', serif;
    direction: rtl;
    text-align: right;
    line-height: 2.1; /* Nastaliq stacks glyphs vertically — needs generous leading */
}

.text-arabic {
    font-family: 'Noto Naskh Arabic', serif;
    direction: rtl;
    text-align: right;
    line-height: 1.9;
}

.text-math {
    font-family: 'STIX Two Math', 'Source Sans 3', serif;
}

/* Question bank form: Unicode math symbol palette + attachment preview */
.math-palette {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.math-palette-btn {
    min-width: 2.1rem;
    padding: .15rem .35rem;
    font-family: 'STIX Two Math', 'Source Sans 3', serif;
    font-size: 1rem;
    line-height: 1.2;
}

.qb-attachment-preview {
    max-height: 120px;
}

/* Diagram dropzone (single + bulk question forms): dashed click/drag target that feeds
   the shared ImageCropper modal. Token-driven so it follows light/dark. */
.qb-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    /* Matches .qb-qtext so the answer textarea and the dropzone bottom-align. */
    min-height: 140px;
    padding: 1rem;
    border: 2px dashed var(--outline);
    border-radius: 10px;
    background: var(--surface);
    color: var(--on-surface-variant);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s;
}

.qb-dropzone i {
    font-size: 1.4rem;
    color: var(--primary);
}

.qb-dropzone__hint {
    font-size: .8rem;
}

.qb-dropzone:hover,
.qb-dropzone.is-dragover {
    border-color: var(--tertiary);
    background: color-mix(in srgb, var(--tertiary) 8%, var(--surface));
    color: var(--on-surface);
}

/* Question bank single-question form: bilingual EN|UR panes + symbol strip + footer bar */
.qb-pane__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--outline);
}

.qb-pane__head--rtl {
    flex-direction: row-reverse;
}

.qb-pane__title {
    font-weight: 600;
    color: var(--on-surface);
}

.qb-pane__title--urdu {
    font-family: 'Noto Nastaliq Urdu', serif;
    line-height: 1.8;
}

.qb-lang-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 .4rem;
    border-radius: 8px;
    font-size: .75rem;
    font-weight: 700;
    background: var(--primary-container);
    color: var(--on-primary-container);
}

.qb-symbols {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.qb-symbols__label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    white-space: nowrap;
}

.qb-subhead {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
}

.qb-subhead--end {
    text-align: end;
}

.qb-correct {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.qb-correct .btn {
    flex: 1 1 0;
    min-width: 5.5rem;
}

.qb-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Equal-height bilingual question text boxes — Urdu's tall Nastaliq leading (line-height 2.1)
   otherwise makes the UR box taller than the EN one at the same row count. */
.qb-qtext {
    height: 140px;
    resize: vertical;
}

/* Bilingual pane inside another card (bulk-entry blocks): bordered section, not a nested card. */
.qb-pane-flat {
    border: 1px solid var(--outline);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
}

.qb-pane-flat__body {
    padding: .85rem;
}

/* Question bank bulk entry (BulkCreateQuestions): totals strip + collapsible block headers */
.qb-bulk-totals {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .5rem .9rem;
    border-radius: 8px;
    border-left: 3px solid var(--primary);
    font-size: .9rem;
}

.qb-bulk-row__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    cursor: pointer;
}

.qb-bulk-row__summary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: var(--on-surface-variant);
}

/* Question bank grid: keep long bilingual previews readable */
.qb-question-cell {
    max-width: 420px;
}

.qb-question-preview {
    white-space: normal;
    word-break: break-word;
}

/* ===== Status pill + inactive-row dim (reusable list status style) =====
   A compact status pill (colored dot + label) for a list's Active/Inactive column,
   paired with a dim treatment for inactive rows so switched-off records recede at a
   glance. Reusable on any DataTable: render `.status-pill` in the status column and
   tag inactive <tr>s with `.is-inactive` (see gradecriteria.index.js for the wiring).
   Token-driven, so it follows light/dark automatically. */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
}

.status-pill .status-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    flex: 0 0 auto;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}

.status-pill--active {
    color: var(--chart-success);
    background: color-mix(in srgb, var(--chart-success) 14%, transparent);
    border-color: color-mix(in srgb, var(--chart-success) 32%, transparent);
}

.status-pill--inactive {
    color: var(--on-surface-variant);
    background: color-mix(in srgb, var(--on-surface-variant) 14%, transparent);
    border-color: color-mix(in srgb, var(--on-surface-variant) 30%, transparent);
}

/* ---- Document lifecycle tones (Purchase Order today; any document with a status) -------------
   Five buckets, not one per status: what a reader needs from a status colour is "is this waiting
   on someone / moving / finished / dead", and the icon + spelled-out label already say which exact
   status it is.

   Deliberately NOT the `--*-container` tints the chips used before: --primary-container and
   --tertiary-container are the SAME hex (#103935) in dark mode, and --secondary-container is
   within a shade of them, so Approved / Sent / Received were indistinguishable on the dark theme.
   These use the semantic chart hues, which are picked per-theme to stay apart.

   Each modifier sets only `color`; the tint and border derive from it via currentColor. */
.status-pill--neutral  { color: var(--on-surface-variant); }   /* not started yet, or archived */
.status-pill--waiting  { color: var(--chart-warning); }        /* someone owes an action */
.status-pill--progress { color: var(--chart-3); }              /* agreed and in flight */
.status-pill--done     { color: var(--chart-success); }        /* complete */
.status-pill--dead     { color: var(--chart-danger); }         /* cancelled — nothing follows */

.status-pill--neutral,
.status-pill--waiting,
.status-pill--progress,
.status-pill--done,
.status-pill--dead {
    background: color-mix(in srgb, currentColor 16%, transparent);
    border-color: color-mix(in srgb, currentColor 40%, transparent);
}

/* The prominent size, for a document editor's header where the status is the single most
   important fact on the page — not a cell in a list. */
.status-pill--lg {
    padding: .4rem .9rem;
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.status-pill--lg .status-dot {
    width: .6rem;
    height: .6rem;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 20%, transparent);
}

/* Inactive rows recede: dim the data cells (not the Actions column, so edit/delete
   stay crisp); hovering the row restores full opacity for easy interaction. */
table.dataTable tbody tr.is-inactive > td:not(:last-child) {
    opacity: .6;
    transition: opacity .15s ease;
}

table.dataTable tbody tr.is-inactive:hover > td {
    opacity: 1;
}

/* ===== General Journal report ===== */
.gj-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    border: 1px dashed var(--outline, var(--bs-border-color));
    border-radius: .6rem;
    background: var(--surface-variant, var(--bs-tertiary-bg));
}

.gj-empty .bi { margin-right: .4rem; }

/* Loader shown in both result panes while the report AJAX call runs */
.gj-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 2.5rem 1rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.gj-loading__text { font-size: .9rem; }

/* On-screen report header (mirrors the PDF: logo left, identity center; general report — no photo) */
.gj-report-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
    border: 1px solid var(--outline, var(--bs-border-color));
    border-radius: .7rem;
    background: color-mix(in srgb, var(--primary, #00241F) 6%, var(--surface, #fff));
    border-bottom: 3px solid var(--primary, var(--bs-primary));
}

.gj-report-header__logo,
.gj-report-header__photo {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: .5rem;
}

.gj-report-header__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gj-report-header__logo .bi {
    font-size: 2rem;
    color: var(--primary, var(--bs-primary));
}

.gj-report-header__identity {
    flex: 1 1 auto;
    text-align: center;
    min-width: 0;
}

.gj-report-header__school {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary, var(--bs-primary));
    line-height: 1.2;
}

.gj-report-header__title {
    font-weight: 700;
    text-decoration: underline;
    color: var(--on-surface, var(--bs-body-color));
}

.gj-report-header__meta {
    font-size: .85rem;
    color: var(--on-surface-variant, var(--bs-secondary-color));
    margin-top: .15rem;
}

/* Cost-centre / project filter caveat on the General Ledger + Income Statement report
   headers. Only rendered while a dimension filter is applied, so it reads as a condition
   of the figures shown rather than as permanent page furniture. */
.gl-dimension-note {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .4rem;
    padding: .25rem .6rem;
    border-radius: 8px;
    font-size: .78rem;
    background: var(--tertiary-container);
    color: var(--on-tertiary-container);
}

/* Summary cards (total debits/credits/entries/balance) shared by both tabs */
.gj-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.gj-summary__card {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .7rem .9rem;
    border: 1px solid var(--outline, var(--bs-border-color));
    border-radius: .7rem;
    background: var(--surface, var(--bs-body-bg));
}

.gj-summary__label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.gj-summary__value {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--on-surface, var(--bs-body-color));
}

.gj-summary__value--ok { color: var(--chart-success, #1b7f4b); }
.gj-summary__value--warn { color: var(--chart-warning, #e6920a); }
.gj-summary__value .bi { margin-right: .25rem; }

/* One period (day/week/month/year) block */
.gj-period-card {
    border: 1px solid var(--outline, var(--bs-border-color));
    border-radius: .7rem;
    overflow: hidden;
    margin-bottom: 1.1rem;
    background: var(--surface, var(--bs-body-bg));
}

.gj-period-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .65rem 1rem;
    background: color-mix(in srgb, var(--primary, #00241F) 10%, var(--surface, #fff));
    border-bottom: 1px solid var(--outline, var(--bs-border-color));
}

.gj-period-card__title {
    font-weight: 700;
    color: var(--primary, var(--bs-primary));
}

.gj-period-card__title .bi { margin-right: .35rem; }

.gj-period-card__totals {
    font-size: .85rem;
    color: var(--on-surface, var(--bs-body-color));
    font-variant-numeric: tabular-nums;
}

.gj-table thead th {
    background: var(--surface-variant, var(--bs-tertiary-bg));
    color: var(--on-surface, var(--bs-body-color));
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    vertical-align: middle;
}

/* Entry blocks: separator above each journal entry's first line only */
.gj-table tbody td { border-top: none; }

.gj-table tbody tr.gj-table__entry-start td {
    border-top: 1px solid var(--outline, var(--bs-border-color));
}

.gj-table__date,
.gj-table__txn {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.gj-table__account { font-weight: 600; }

/* Credit lines indent + italicize the account, per journal convention */
.gj-table__account--credit {
    padding-left: 2rem !important;
    font-style: italic;
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.gj-table__desc { color: var(--on-surface-variant, var(--bs-secondary-color)); }

.gj-table__amount { font-variant-numeric: tabular-nums; }

/* Journal status pill (mirrors the app-wide state colors) */
.gj-status {
    display: inline-block;
    margin-left: .35rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: text-bottom;
}

.gj-status--posted {
    background: color-mix(in srgb, var(--chart-success, #1b7f4b) 15%, var(--surface, #fff));
    color: var(--chart-success, #1b7f4b);
}

.gj-status--draft {
    background: var(--surface-variant, var(--bs-tertiary-bg));
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.gj-status--reversed {
    background: color-mix(in srgb, var(--chart-warning, #e6920a) 15%, var(--surface, #fff));
    color: color-mix(in srgb, var(--chart-warning, #e6920a) 75%, var(--on-surface, #000));
}

.gj-status--cancelled {
    background: color-mix(in srgb, var(--error, #d9534f) 12%, var(--surface, #fff));
    color: var(--error, #d9534f);
}

/* Grand totals band after the period blocks */
.gj-grand-total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: .8rem 1rem;
    border: 1px solid var(--primary, var(--bs-primary));
    border-radius: .7rem;
    background: color-mix(in srgb, var(--primary, #00241F) 8%, var(--surface, #fff));
    font-variant-numeric: tabular-nums;
}

.gj-grand-total__label {
    margin-right: auto;
    font-weight: 700;
    color: var(--primary, var(--bs-primary));
}

.gj-grand-total__label .bi { margin-right: .35rem; }

.gj-grand-total__value strong { color: var(--primary, var(--bs-primary)); }

/* ===== General Ledger report ===== */
/* Reuses the General Journal chrome (.gj-report-header/.gj-summary/.gj-period-card/
   .gj-table/.gj-loading/.gj-empty) — only ledger-specific rows live here. */
.gl-account-type {
    display: inline-block;
    margin-left: .5rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: text-bottom;
    background: var(--surface-variant, var(--bs-tertiary-bg));
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

/* Period sub-strip row inside the account table */
.gj-table tbody tr.gl-period-row td {
    background: color-mix(in srgb, var(--primary, #00241F) 8%, var(--surface, #fff));
    color: var(--primary, var(--bs-primary));
    font-weight: 700;
    font-size: .8rem;
    border-top: 1px solid var(--outline, var(--bs-border-color));
}

.gj-table tbody tr.gl-period-row td .bi { margin-right: .35rem; }

.gj-table tbody tr.gl-opening-row td {
    background: var(--surface-variant, var(--bs-tertiary-bg));
    color: var(--on-surface-variant, var(--bs-secondary-color));
}

.gj-table tbody tr.gl-totals-row td {
    background: var(--surface-variant, var(--bs-tertiary-bg));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border-top: 1px solid var(--outline, var(--bs-border-color));
}

.gj-table tbody tr.gl-closing-row td {
    background: color-mix(in srgb, var(--primary, #00241F) 8%, var(--surface, #fff));
    color: var(--primary, var(--bs-primary));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border-top: 2px solid var(--primary, var(--bs-primary));
}

/* ===== Trial Balance report ===== */
/* Reuses the General Journal/Ledger chrome (.gj-* and .gl-* rows) — only the
   account-code column style is specific to this report. */
.tb-code {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--primary, var(--bs-primary));
    white-space: nowrap;
}

/* ===== Balance Sheet report ===== */
/* Reuses the General Journal/Ledger chrome (.gj-* and .gl-* rows) — only the
   statement-specific rows live here. */
.gj-table tbody tr.bs-part-row td {
    background: var(--primary, #00241F);
    color: var(--on-primary, #fff);
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .05em;
    border-top: none;
}

.gj-table tbody tr.bs-midtotal-row td {
    background: color-mix(in srgb, var(--primary, #00241F) 12%, var(--surface, #fff));
    color: var(--on-surface, var(--bs-body-color));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border-top: 1px solid var(--outline, var(--bs-border-color));
}

.bs-account { padding-left: 1.5rem !important; }
.bs-account .tb-code { font-size: .75rem; margin-left: .3rem; }

.bs-variance--up { color: var(--chart-success, #1b7f4b); font-weight: 600; }
.bs-variance--down { color: var(--error, #d9534f); font-weight: 600; }

/* ===== Teacher Portal dashboard ===== */
.tp-hero-photo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--outline, var(--bs-border-color));
    background: var(--surface, #fff);
    flex-shrink: 0;
}

.tp-day {
    border: 1px solid var(--outline, var(--bs-border-color));
    border-radius: 12px;
    padding: .75rem .9rem;
    height: 100%;
    background: var(--surface, #fff);
}

.tp-day--today {
    border-color: var(--primary, #00241F);
    background: color-mix(in srgb, var(--primary, #00241F) 6%, var(--surface, #fff));
}

.tp-day__name {
    font-weight: 700;
    color: var(--on-surface, var(--bs-body-color));
    margin-bottom: .5rem;
}

.tp-day__lesson {
    display: flex;
    gap: .6rem;
    align-items: baseline;
    padding: .2rem 0;
    font-size: .875rem;
}

.tp-day__time {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--primary, #00241F);
    white-space: nowrap;
    min-width: 3.2rem;
}

.tp-day__what {
    color: var(--on-surface, var(--bs-body-color));
}

/* ===== HR & Payroll — employee listing ===== */
.employee-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--outline);
    background: var(--surface-variant);
}

/* ===== HR & Payroll — employee card view (Employee/Index card tab) ===== */
.emp-tabcontent { padding-top: 1.25rem; }

/* Anchors the loading veil over whatever the grid currently shows. */
.emp-cardswrap { position: relative; min-height: 8rem; }

.emp-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 1rem;
}

.emp-card {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid var(--outline);
    border-radius: 14px;
    background: var(--surface);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.emp-card:hover {
    border-color: color-mix(in srgb, var(--tertiary) 45%, var(--outline));
    box-shadow: 0 10px 24px -14px var(--panel-glow);
    transform: translateY(-2px);
}

/* A retired/disabled record still has to be readable, just visibly out of rotation. */
.emp-card--inactive { background: color-mix(in srgb, var(--surface-variant) 60%, var(--surface)); }
.emp-card--inactive .emp-card__avatar { filter: grayscale(1); opacity: .8; }

.emp-card__top { display: flex; align-items: center; gap: .4rem; }

.emp-card__code,
.emp-card__pill {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: .22rem .55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.emp-card__code { background: var(--primary-container); color: var(--on-primary-container); }
.emp-card__pill { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.emp-card__menu { margin-left: auto; }

.emp-card__id {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .3rem;
}

.emp-card__avatar {
    width: 82px;
    height: 82px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid var(--outline);
    background: var(--surface-variant);
}

.emp-card__name {
    margin: .2rem 0 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--on-surface);
    overflow-wrap: anywhere;
}

.emp-card__role {
    margin: 0;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tertiary);
}

.emp-card__meta { display: flex; flex-direction: column; gap: .35rem; margin: 0; }

.emp-card__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.emp-card__row dt { font-size: .82rem; font-weight: 400; color: var(--on-surface-variant); }

.emp-card__row dd {
    margin: 0;
    min-width: 0;
    font-size: .85rem;
    font-weight: 600;
    color: var(--on-surface);
    text-align: right;
    overflow-wrap: anywhere;
}

.emp-card__contact {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .6rem .7rem;
    border-radius: 10px;
    background: var(--surface-variant);
}

.emp-card__contact a,
.emp-card__contact span {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    font-size: .8rem;
    color: var(--on-surface-variant);
    text-decoration: none;
}

.emp-card__contact a:hover { color: var(--primary); text-decoration: underline; }
.emp-card__contact .bi { flex: 0 0 auto; }

.emp-card__ctext {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emp-card__foot {
    margin-top: auto;
    padding-top: .7rem;
    border-top: 1px solid var(--outline);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.emp-card__state {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
}

.emp-card__dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--outline);
}

.emp-card__state--on { color: var(--primary); }

.emp-card__state--on .emp-card__dot {
    background: var(--tertiary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tertiary) 28%, transparent);
}

.emp-empty {
    text-align: center;
    padding: 2.75rem 1rem;
    color: var(--on-surface-variant);
}

.emp-empty > .bi {
    font-size: 2.25rem;
    color: color-mix(in srgb, var(--tertiary) 55%, var(--on-surface-variant));
}

.emp-empty__title {
    margin: .75rem 0 .25rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--on-surface);
}

.emp-empty__hint { margin: 0 0 1rem; font-size: .88rem; }

.emp-cards__loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 62%, transparent);
}

.emp-cardsfoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--outline);
}

@media (prefers-reduced-motion: reduce) {
    .emp-card { transition: none; }
    .emp-card:hover { transform: none; }
}

/* ===== Platform operator console (/platform) =====
   A deliberately different shell from the customer app: no sidebar, no company chrome, and an amber
   accent bar as a standing reminder that actions here cross every customer. All token-driven, so it
   follows light/dark with everything else. */

.plt-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--background);
    color: var(--on-background);
}

/* --- Top bar --- */
.plt-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 2px 10px var(--panel-glow);
}

.plt-topbar__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: .65rem 1.25rem;
}

/* The one visual signal separating the console from a customer workspace. */
.plt-topbar__accent {
    height: 3px;
    background: linear-gradient(90deg, #E0A100, var(--tertiary));
}

/* Scoped under .custom-theme: the global `.custom-theme a { color: var(--primary) }` rule
   out-specifies a bare class selector, which painted these links green-on-green (invisible). */
.custom-theme .plt-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--on-primary);
    text-decoration: none;
}

.custom-theme .plt-brand:hover { color: var(--on-primary); opacity: .9; }

.plt-brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--on-primary) 16%, transparent);
    font-size: 1.05rem;
}

.plt-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-weight: 600;
}

.plt-brand__text small {
    font-size: .72rem;
    font-weight: 400;
    opacity: .75;
}

.plt-nav { display: flex; gap: .35rem; margin-inline-start: auto; }

.custom-theme .plt-nav__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    color: var(--on-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: .9rem;
}

.custom-theme .plt-nav__link:hover { background: color-mix(in srgb, var(--on-primary) 12%, transparent); color: var(--on-primary); }
.custom-theme .plt-nav__link.active { background: color-mix(in srgb, var(--on-primary) 20%, transparent); color: var(--on-primary); }

.plt-topbar__end { display: flex; align-items: center; gap: .75rem; }

.plt-who {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    opacity: .9;
}

.plt-topbar__end .ct-btn-outline {
    border-color: color-mix(in srgb, var(--on-primary) 45%, transparent);
    color: var(--on-primary);
}

.plt-topbar__end .ct-btn-outline:hover {
    background: color-mix(in srgb, var(--on-primary) 14%, transparent);
    color: var(--on-primary);
}

/* --- Page frame --- */
.plt-main { flex: 1 0 auto; }

.plt-page { padding: 1.5rem 1.5rem 2rem; }

.plt-page__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.plt-page__head h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 .2rem;
    color: var(--on-background);
}

.plt-page__head p { margin: 0; color: var(--on-surface-variant); font-size: .9rem; }

/* .custom-theme scope: outranks the global `.custom-theme a` color, same as the topbar links. */
.custom-theme .plt-back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--on-surface-variant);
    margin-bottom: .35rem;
}

.custom-theme .plt-back:hover { color: var(--primary); }

.plt-foot {
    padding: .9rem 1.5rem;
    font-size: .8rem;
    color: var(--on-surface-variant);
    border-top: 1px solid var(--outline);
}

/* --- Search inside a card header --- */
.plt-search { position: relative; }

.plt-search i {
    position: absolute;
    top: 50%;
    left: .65rem;
    transform: translateY(-50%);
    color: var(--on-surface-variant);
    pointer-events: none;
    font-size: .9rem;
}

.plt-search .form-control { padding-inline-start: 2rem; min-width: 15rem; }

/* --- Small display atoms --- */
.plt-code {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: 6px;
    background: var(--surface-variant);
    color: var(--on-surface-variant);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .78rem;
    letter-spacing: .02em;
}

.plt-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
}

.plt-pill--ok {
    background: color-mix(in srgb, #1B9C5A 15%, transparent);
    color: #12764A;
}

.plt-pill--off {
    background: var(--surface-variant);
    color: var(--on-surface-variant);
}

[data-bs-theme="dark"] .plt-pill--ok { color: #5FD79B; }

/* --- Definition list (customer profile) --- */
.plt-dl { display: grid; grid-template-columns: 8rem 1fr; gap: .5rem .75rem; margin: 0; }
.plt-dl dt { font-size: .8rem; font-weight: 600; color: var(--on-surface-variant); }
.plt-dl dd { margin: 0; font-size: .9rem; color: var(--on-surface); word-break: break-word; }

.plt-notes {
    margin-top: 1.1rem;
    padding: .75rem .85rem;
    border-radius: 10px;
    background: var(--surface-variant);
}

.plt-notes__label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--on-surface-variant);
}

.plt-notes p { margin: .35rem 0 0; font-size: .88rem; white-space: pre-line; }

/* --- Organisation tree --- */
.plt-tree, .plt-tree__kids { list-style: none; margin: 0; padding: 0; }

.plt-tree__node + .plt-tree__node { margin-top: .5rem; }

.plt-tree__row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .75rem;
    border: 1px solid var(--outline);
    border-radius: 10px;
    background: var(--surface);
}

.plt-tree__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--primary-container);
    color: var(--on-primary-container);
    flex: 0 0 auto;
}

.plt-tree__ico--sub { background: var(--surface-variant); color: var(--on-surface-variant); }

.plt-tree__body { display: flex; flex-direction: column; min-width: 0; }
.plt-tree__name { font-weight: 600; font-size: .92rem; color: var(--on-surface); }
.plt-tree__meta { font-size: .76rem; color: var(--on-surface-variant); }

/* Branches get a connector rail rather than a nested card, so depth reads at a glance. */
.plt-tree__kids {
    margin: .4rem 0 0 1.35rem;
    padding-inline-start: 1rem;
    border-inline-start: 2px solid var(--outline);
}

.plt-tree__kids > li + li { margin-top: .4rem; }

/* --- Empty states --- */
.plt-empty { text-align: center; padding: 2rem 1rem; color: var(--on-surface-variant); }
.plt-empty i { font-size: 1.75rem; opacity: .6; }
.plt-empty h6 { margin: .6rem 0 .25rem; font-weight: 600; color: var(--on-surface); }
.plt-empty p { margin: 0; font-size: .87rem; }
.plt-empty--inline { padding: 1rem .5rem; }
.plt-empty--inline i { font-size: 1.25rem; }

/* --- Subscription status banner (customer app, _SubscriptionBanner) --- */
.sub-banner {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .75rem 1rem 0;
    padding: .6rem .9rem;
    border-radius: 10px;
    border: 1px solid var(--outline);
    background: var(--surface-variant);
    color: var(--on-surface-variant);
    font-size: .9rem;
}

.sub-banner i { font-size: 1.05rem; }

.sub-banner--suspended {
    border-color: color-mix(in srgb, #c62828 45%, transparent);
    background: color-mix(in srgb, #c62828 14%, transparent);
    color: var(--on-surface);
}

.sub-banner--grace {
    border-color: color-mix(in srgb, #e65100 45%, transparent);
    background: color-mix(in srgb, #e65100 13%, transparent);
    color: var(--on-surface);
}

.sub-banner--trial {
    border-color: var(--outline);
    background: var(--primary-container);
    color: var(--on-primary-container);
}

/* --- Plan & Modules card (tenant profile) --- */
.plt-modules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .35rem .75rem;
    margin-bottom: .5rem;
}

.plt-module--locked .form-check-label {
    color: var(--on-surface-variant);
    opacity: .55;
    text-decoration: line-through;
}

.plt-chiprow { display: flex; flex-wrap: wrap; gap: .4rem; }

.plt-chip {
    display: inline-flex;
    align-items: center;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    background: var(--primary-container);
    color: var(--on-primary-container);
}

.plt-chip--core {
    background: var(--surface-variant);
    color: var(--on-surface-variant);
}

.plt-pill--warn {
    background: color-mix(in srgb, #e65100 15%, transparent);
    color: var(--on-surface);
}

/* Subscription lifecycle trail on the tenant profile */
.plt-events { list-style: none; margin: 0; padding: 0; font-size: .84rem; }
.plt-events li {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .3rem 0;
    border-bottom: 1px dashed var(--outline);
}
.plt-events li:last-child { border-bottom: 0; }
.plt-events__type { font-weight: 600; color: var(--on-surface); }
.plt-events__detail { color: var(--on-surface-variant); flex: 1 1 auto; }
.plt-events__when { color: var(--on-surface-variant); white-space: nowrap; }

/* ===== Company editor — "no setup data" repair panel =====
   An attention panel, not an error: the company is fine, it just has nothing to post to yet. Amber
   container tones so it reads as "act on this" without the alarm of the error palette. */
.cmp-setup {
    border: 1px solid color-mix(in srgb, var(--tertiary) 45%, var(--outline));
    border-radius: 12px;
    background: color-mix(in srgb, #e65100 10%, var(--surface));
}
.cmp-setup__icon {
    font-size: 1.1rem;
    color: #e65100;
    line-height: 1.4;
}
[data-bs-theme="dark"] .cmp-setup { background: color-mix(in srgb, #ffb74d 12%, var(--surface)); }
[data-bs-theme="dark"] .cmp-setup__icon { color: #ffb74d; }

/* --- Record Payment row (tenant profile, subscription card) --- */
.plt-payrow {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: flex-end;
}
.plt-payrow__num { width: 5rem; }
.plt-payrow__amt { width: 8rem; }
.plt-payrow__txt { width: 9.5rem; }

/* --- Adjust terms (tenant profile, subscription card) --- */
.plt-adjust {
    border: 1px solid var(--outline);
    border-radius: 10px;
    padding: .5rem .8rem;
    background: var(--surface-variant);
}

.plt-adjust > summary {
    cursor: pointer;
    font-size: .88rem;
    font-weight: 600;
    color: var(--on-surface-variant);
    list-style: none;
}

.plt-adjust > summary::-webkit-details-marker { display: none; }
.plt-adjust[open] > summary { margin-bottom: .35rem; }

/* --- Plan catalog (/platform/plans) --- */
.plt-plans {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1rem;
}

.plt-plan {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--outline);
    border-radius: 14px;
    background: var(--surface);
}

.plt-plan--retired { opacity: .68; }

.plt-plan__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}

.plt-plan__name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--on-surface);
    margin: 0 0 .2rem;
}

.plt-plan__tier {
    font-size: .75rem;
    font-weight: 600;
    color: var(--on-surface-variant);
    margin-left: .35rem;
}

.plt-plan__desc {
    font-size: .85rem;
    color: var(--on-surface-variant);
    margin: 0;
}

.plt-plan__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .45rem .7rem;
    border-radius: 10px;
    background: var(--primary-container);
    color: var(--on-primary-container);
}

.plt-plan__amount { font-size: 1.05rem; font-weight: 700; }
.plt-plan__per { font-size: .78rem; }
.plt-plan__dot { color: var(--on-primary-container); opacity: .5; padding: 0 .15rem; }

.plt-plan__limits {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .2rem .8rem;
    font-size: .84rem;
    margin: 0;
}

.plt-plan__limits dt { font-weight: 500; color: var(--on-surface-variant); }
.plt-plan__limits dt i { margin-right: .3rem; }
.plt-plan__limits dd { margin: 0; text-align: right; color: var(--on-surface); font-weight: 600; }

.plt-plan__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
    padding-top: .65rem;
    border-top: 1px dashed var(--outline);
}

.plt-plan__count { font-size: .84rem; color: var(--on-surface-variant); }
.plt-plan__count i { margin-right: .25rem; }

/* Plan form: a switched-off grant list stays visible but reads as inert. */
.plt-grants--off { opacity: .5; }

/* --- Mark Invoice Paid modal --- */
.plt-markpaid__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    padding: .65rem .8rem;
    border: 1px solid var(--outline);
    border-radius: 10px;
    background: var(--surface-variant);
}
.plt-markpaid__amount {
    font-weight: 600;
    color: var(--on-surface);
    margin-left: auto;
}
.plt-markpaid__summary .small { flex: 1 1 100%; }

/* --- Usage & Limits card (tenant profile) --- */
.plt-meters { display: flex; flex-direction: column; gap: .85rem; }

.plt-meter__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .3rem;
}

.plt-meter__label {
    font-size: .88rem;
    font-weight: 600;
    color: var(--on-surface);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.plt-meter__label i { color: var(--on-surface-variant); }

.plt-meter__value { font-size: .82rem; color: var(--on-surface-variant); white-space: nowrap; }
.plt-meter__value .plt-chip { margin-inline-start: .35rem; }

.plt-meter__bar {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-variant);
    overflow: hidden;
}

.plt-meter__fill {
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
    transition: width .25s ease;
}

/* Nearing the cap reads amber, past it reads red — semantic hues tinted like the banners. */
.plt-meter__fill--warn { background: #e65100; }
.plt-meter__fill--over { background: #c62828; }

/* --- Tenant branding (Stage G) --- */
/* Customer app sidebar: the tenant's own logo replaces the wordmark pill when set. */
.brand-logo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    object-fit: contain;
    background: var(--surface);
    flex: 0 0 auto;
}

/* Operator branding card: small preview of the stored data-URL logo. */
.plt-brandlogo-preview {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: contain;
    border: 1px solid var(--outline);
    background: var(--surface);
}

/* --- API key reveal (Stage G): the one-time display of a freshly created key. --- */
.plt-keyreveal {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .75rem .9rem;
    margin-bottom: .9rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, #e65100 45%, transparent);
    background: color-mix(in srgb, #e65100 12%, transparent);
    color: var(--on-surface);
}

.plt-keyreveal i { font-size: 1.1rem; }

.plt-keyreveal code {
    display: block;
    margin-top: .3rem;
    padding: .35rem .5rem;
    border-radius: 7px;
    background: var(--surface);
    border: 1px solid var(--outline);
    font-size: .85rem;
    word-break: break-all;
    user-select: all;
}

/* --- Restricted permissions (tenant profile) --- */
.plt-restrict__bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.plt-restrict__search { position: relative; flex: 1 1 14rem; min-width: 12rem; }

.plt-restrict__search i {
    position: absolute;
    inset-inline-start: .65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--on-surface-variant);
    font-size: .9rem;
    pointer-events: none;
}

.plt-restrict__search .form-control { padding-inline-start: 2rem; }

.plt-restrict {
    max-height: 30rem;
    overflow-y: auto;
    border: 1px solid var(--outline);
    border-radius: 12px;
    background: var(--surface);
}

.plt-restrict__cat { border-bottom: 1px solid var(--outline); }
.plt-restrict__cat:last-child { border-bottom: 0; }

.plt-restrict__cat > summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .8rem;
    cursor: pointer;
    background: var(--surface-variant);
    color: var(--on-surface);
    font-weight: 600;
    font-size: .88rem;
    list-style: none;
}

.plt-restrict__cat > summary::marker,
.plt-restrict__cat > summary::-webkit-details-marker { display: none; }

.plt-restrict__cat > summary::before {
    content: "\F285"; /* bi-chevron-right */
    font-family: bootstrap-icons;
    font-size: .75rem;
    color: var(--on-surface-variant);
    transition: transform .15s ease;
}

.plt-restrict__cat[open] > summary::before { transform: rotate(90deg); }

.plt-restrict__catname { flex: 1 1 auto; }

.plt-restrict__catcount {
    min-width: 1.5rem;
    text-align: center;
    padding: .05rem .4rem;
    border-radius: 999px;
    font-size: .74rem;
    background: var(--surface);
    border: 1px solid var(--outline);
    color: var(--on-surface-variant);
}

/* Something withheld in this category — the same warning hue as the header pill. */
.plt-restrict__catcount--on {
    background: color-mix(in srgb, #e65100 18%, transparent);
    border-color: color-mix(in srgb, #e65100 45%, transparent);
    color: var(--on-surface);
    font-weight: 700;
}

.plt-restrict__grp { padding: .35rem 0 .5rem; }

.plt-restrict__grphead {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .85rem;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--on-surface-variant);
    cursor: pointer;
    list-style: none;
}

.plt-restrict__grphead::marker,
.plt-restrict__grphead::-webkit-details-marker { display: none; }

.plt-restrict__grphead::before {
    content: "\F285"; /* bi-chevron-right */
    font-family: bootstrap-icons;
    font-size: .65rem;
    color: var(--on-surface-variant);
    transition: transform .15s ease;
}

.plt-restrict__grp[open] > .plt-restrict__grphead::before { transform: rotate(90deg); }

.plt-restrict__grphead:hover { background: var(--surface-variant); }

.plt-restrict__grphead .form-check-input { margin: 0; flex: 0 0 auto; }

.plt-restrict__grpname { flex: 1 1 auto; }

.plt-restrict__grpcount { font-size: .7rem; }

.plt-restrict__row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .3rem .85rem;
    margin: 0;
    cursor: pointer;
}

.plt-restrict__row:hover { background: var(--surface-variant); }

.plt-restrict__row .form-check-input { margin: 0; flex: 0 0 auto; }

.plt-restrict__label { flex: 1 1 auto; min-width: 0; }

.plt-restrict__action {
    display: block;
    font-size: .86rem;
    font-weight: 600;
    color: var(--on-surface);
}

.plt-restrict__desc {
    display: block;
    font-size: .76rem;
    color: var(--on-surface-variant);
}

.plt-restrict__code {
    flex: 0 0 auto;
    font-size: .74rem;
    padding: .1rem .4rem;
    border-radius: 6px;
    background: var(--surface-variant);
    color: var(--on-surface-variant);
}

/* A withheld row reads as withheld even before the count is checked. */
.plt-restrict__row:has(.js-restrict:checked) {
    background: color-mix(in srgb, #e65100 10%, transparent);
}

.plt-restrict__row:has(.js-restrict:checked) .plt-restrict__action { font-weight: 700; }

/* --- Operator sign-in --- */
.plt-login {
    min-height: 100vh;
    display: flex;
    background: var(--background);
    color: var(--on-background);
}

.plt-login__wrap {
    margin: auto;
    width: 100%;
    max-width: 26rem;
    padding: 2rem 1.25rem;
}

.plt-login__card {
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: 14px;
    padding: 1.75rem;
    box-shadow: 0 10px 30px var(--panel-glow);
}

.plt-login__head { text-align: center; margin-bottom: 1.25rem; }

.plt-login__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--primary);
    color: var(--on-primary);
    font-size: 1.4rem;
    margin-bottom: .65rem;
}

.plt-login__head h1 { font-size: 1.3rem; font-weight: 600; margin: 0 0 .2rem; }
.plt-login__head p { margin: 0; font-size: .85rem; color: var(--on-surface-variant); }

/* Amber, matching the top-bar accent: the console's recurring "this is cross-customer" cue. */
.plt-login__warn {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .65rem .75rem;
    border-radius: 10px;
    background: color-mix(in srgb, #E0A100 16%, transparent);
    color: var(--on-surface);
    font-size: .82rem;
    margin-bottom: 1.1rem;
}

.plt-login__warn i { font-size: 1rem; line-height: 1.2; color: #B57F00; }
[data-bs-theme="dark"] .plt-login__warn i { color: #F0C24B; }

.plt-login__foot {
    margin-top: 1.25rem;
    padding-top: .9rem;
    border-top: 1px solid var(--outline);
    text-align: center;
}

.plt-login__foot a {
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--on-surface-variant);
}

.plt-login__foot a:hover { color: var(--primary); }

@media (max-width: 575.98px) {
    .plt-topbar__inner { gap: .75rem; }
    .plt-nav { margin-inline-start: 0; width: 100%; }
    .plt-search .form-control { min-width: 0; width: 100%; }
    .plt-dl { grid-template-columns: 1fr; gap: .15rem; }
    .plt-dl dd { margin-bottom: .5rem; }
}

/* ===== AR Ageing report (Views/FinanceReport/ArAgeing) =====
   Summary pills above the tabs (shared by both panes) and the overdue-day emphasis in the grid.
   Everything else reuses the shared report chrome (.gj-report-header, .gj-table, .car-chart-card). */
.ara-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem;
}
.ara-pill {
    flex: 1 1 10rem;
    padding: .65rem .85rem;
    border: 1px solid var(--outline);
    border-radius: 12px;
    background: var(--surface);
}
.ara-pill__label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--on-surface-variant);
}
.ara-pill__value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--on-surface);
}
/* Overdue money is a warning, not a neutral figure — tint adapts to light/dark. */
.ara-pill--warn {
    background: color-mix(in srgb, #f0a020 15%, transparent);
    border-color: color-mix(in srgb, #f0a020 45%, var(--outline));
}
.ara-days--late { color: #b8860b; font-weight: 600; }
.ara-days--severe { color: var(--error); font-weight: 700; }

/* ===== Inventory reports (Views/InventoryReport/*) =====
   Two additions only; everything else reuses the shared report chrome (.gj-report-header, .gj-table,
   .car-chart-card) and the AR Ageing summary pills, which are deliberately generic.

   .inv-recon is the ledger-to-GL reconciliation strip on the Stock Valuation report — the module's
   invariant (docs/INVENTORY.md section 2) shown on screen. It changes colour when the two disagree,
   because a silent break is exactly what this report exists to prevent. */
.inv-recon { margin-bottom: 1rem; }
.inv-recon__box {
    padding: .85rem 1rem;
    border: 1px solid var(--outline);
    border-radius: 12px;
    background: var(--surface);
}
.inv-recon__box--ok {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--outline));
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.inv-recon__box--break {
    border-color: color-mix(in srgb, var(--error) 55%, var(--outline));
    background: color-mix(in srgb, var(--error) 12%, transparent);
}
.inv-recon__title {
    font-weight: 600;
    color: var(--on-surface);
    margin-bottom: .5rem;
}
.inv-recon__box--break .inv-recon__title { color: var(--error); }
.inv-recon__figures {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.inv-recon__figures > div {
    display: flex;
    flex-direction: column;
}
.inv-recon__figures span {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--on-surface-variant);
}
.inv-recon__figures strong {
    font-size: 1.05rem;
    color: var(--on-surface);
}
.inv-recon__note {
    margin-top: .5rem;
    font-size: .8rem;
    color: var(--on-surface-variant);
}
.inv-recon__box--break .inv-recon__note { color: var(--error); font-weight: 500; }

/* Out of stock is a harder fact than below-level, so the reorder-alerts row carries a wash rather than
   leaving the reader to spot it in the numbers. */
.gj-table tr.inv-row--out > td {
    background: color-mix(in srgb, var(--error) 8%, transparent);
}

/* ===== Document line grids (Views/Invoice, SalesOrder, SalesNote, PurchaseBill — Editor) =====
   Column sizing for the line grid only. Everything visual (inputs, table, chips) is already themed
   globally — these rules exist so numeric columns stay narrow and the two pickers keep enough room
   instead of collapsing when the grid scrolls horizontally.
   Shared by the sales documents and the purchase bill on purpose: they are the same grid with
   different columns, and four copies of these widths would drift apart the first time one was
   tweaked. The `inv-` prefix is historical — it is the shared grid, not an invoice-only one. */
.inv-lines th { white-space: nowrap; }
.inv-lines td { vertical-align: top; }
.inv-lines .inv-col-product { min-width: 13rem; }
.inv-lines .inv-col-desc { min-width: 16rem; }
.inv-lines .inv-col-account { min-width: 14rem; }
.inv-lines .inv-col-tax { min-width: 11rem; }
.inv-lines .inv-col-num { width: 7.5rem; }
.inv-lines .inv-col-total { width: 9.5rem; }
.inv-lines .inv-col-actions { width: 3.25rem; }

.inv-line-total {
    background: var(--surface-variant);
    color: var(--on-surface-variant);
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.inv-totals { margin: 0; }
.inv-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.inv-totals dt { font-weight: 500; color: var(--on-surface-variant); margin: 0; }
.inv-totals dd { margin: 0; font-variant-numeric: tabular-nums; }

.inv-totals .inv-totals__grand {
    border-top: 1px solid var(--outline);
    margin-top: .4rem;
    padding-top: .6rem;
    font-weight: 700;
}

.inv-totals .inv-totals__grand dt { color: var(--on-surface); }

/* ===== Stock count (Views/StockCount/*) =====
   Data entry over a long list, so the table stays dense and the only colour carries meaning: a shortage
   is the finding that costs money, a surplus is the one that raises a question. Both tints are built with
   color-mix so they adapt to light and dark instead of being two hardcoded pastels.

   .stc-expected marks every cell and pill that reveals what the ledger expected. The editor hides that
   whole class while counts are being entered — the on-screen twin of the blind printed sheet. */

.stc-table { font-size: .9rem; }
.stc-table th { white-space: nowrap; }
.stc-table td { vertical-align: middle; }

.stc-col-num { width: 3rem; }
.stc-col-uom { width: 5rem; }
.stc-col-qty { width: 8rem; }
.stc-col-value { width: 9rem; }

.stc-table .line-counted { min-width: 6rem; }

/* The frozen baseline reads as reference material, not as something to act on. */
.stc-table .stc-system { color: var(--on-surface-variant); }

.stc-variance { font-weight: 600; }
.stc-variance.stc-short { color: var(--error); }
.stc-variance.stc-over { color: var(--primary); }

.stc-row--short > td { background: color-mix(in srgb, var(--error) 8%, transparent); }
.stc-row--over > td { background: color-mix(in srgb, var(--primary) 8%, transparent); }

/* ===== Product editor (Views/Product/_ProductForm) =====
   A full-page multi-section form. The status switch and the two page actions sit in one
   sticky bar above the cards so a long form never hides its Save button behind a scroll.
   The `.form-actionbar*` aliases are the shared, entity-neutral names — reuse those on any
   other full-page editor form (Customer, …) instead of copying this block. */
.pf-actionbar,
.form-actionbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 3;
    padding: .6rem .9rem;
    margin-bottom: .25rem;
    border: 1px solid var(--outline);
    border-radius: 14px;
    background: var(--surface);
}

.pf-actionbar__status,
.form-actionbar__status {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.pf-actionbar__status-label,
.form-actionbar__status-label {
    font-weight: 600;
    color: var(--on-surface-variant);
}

.pf-actionbar__buttons,
.form-actionbar__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-left: auto;
}

/* Stock levels stay visible but recede while Track Stock is off, so the fields remain
   discoverable without implying they apply to a service. */
.pf-fields--muted {
    opacity: .55;
    transition: opacity .15s ease;
}

/* Price-range slider (noUiSlider) in the product filters. Previously coloured with a raw
   Bootstrap .bg-success on the container; drive it from the theme tokens instead so it
   follows light/dark like every other control. */
#FilterPriceRangeSlider {
    height: 8px;
    margin: .9rem .35rem 0;
    border: 0;
    box-shadow: none;
    background: var(--surface-variant);
}

#FilterPriceRangeSlider .noUi-connect { background: var(--primary); }

#FilterPriceRangeSlider .noUi-handle {
    width: 18px;
    height: 18px;
    top: -6px;
    right: -9px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    background: var(--surface);
    box-shadow: none;
    cursor: pointer;
}

#FilterPriceRangeSlider .noUi-handle::before,
#FilterPriceRangeSlider .noUi-handle::after { display: none; }

/* ---------------------------------------------------------------------------
   RFQ quotation comparison (Views/PurchaseRfq/Comparison)
   A pivot whose columns are data: one per supplier who answered. It is wide by
   nature, so the table scrolls inside its own container and the item column is
   pinned to the left — losing sight of which row you are reading is the one way
   this grid stops being a comparison.
   --------------------------------------------------------------------------- */
.rfq-compare { min-width: 44rem; }

.rfq-compare th,
.rfq-compare td { vertical-align: top; }

.rfq-compare .rfq-compare__line {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 16rem;
    background: var(--surface);
}

.rfq-compare thead .rfq-compare__line { z-index: 3; }

.rfq-compare .rfq-compare__cell { min-width: 10rem; }

/* The lowest price on a line, and the lowest complete total. Tinted rather than
   coloured-in: it is a hint towards the answer, not the answer. */
.rfq-compare .rfq-compare__best { background: var(--primary-container); }

/* A quotation the buyer has already turned down stays in the grid for context,
   dimmed so it cannot be mistaken for a live option. */
.rfq-compare .rfq-compare__rejected { opacity: 0.6; }

.rfq-compare .rfq-compare__award { max-width: 9rem; margin-left: auto; }

/* ---------------------------------------------------------------------------
   Landed cost allocation grid (Views/LandedCostVoucher/Editor)
   The receipt's own figures are read-only text, not disabled inputs: an input
   the user can never type into still looks like somewhere to type. Only the
   manual amount is a field, and only under the Manual method.
   --------------------------------------------------------------------------- */
.lc-alloc { min-width: 56rem; }

.lc-alloc td,
.lc-alloc th { vertical-align: middle; }

/* The one figure on this screen a buyer acts on: what the goods really cost once
   the freight and the duty are on them. */
.lc-alloc .js-alloc-landed {
    font-weight: 600;
    color: var(--on-surface);
}

.lc-alloc .js-alloc-qty,
.lc-alloc .js-alloc-base { color: var(--on-surface-variant); }

/* ---------------------------------------------------------------------------
   Guided tour (driver.js, wired through ProjectJs/Components/guidedTour.js)
   driver.js ships a light-only popover with its own greys, so it looked like a
   foreign widget in dark mode. Re-skin it onto the tokens — one card, the same
   14px radius and outline as every other card — and let the buttons be real
   theme buttons. The `.zem-tour` class is the popoverClass the wrapper passes,
   so this styling never leaks onto anything else.
   --------------------------------------------------------------------------- */
.driver-popover.zem-tour {
    max-width: 22rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--outline);
    border-radius: 14px;
    background: var(--surface);
    color: var(--on-surface);
    box-shadow: 0 12px 28px rgb(0 0 0 / 22%);
}

.driver-popover.zem-tour .driver-popover-title {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--on-surface);
}

.driver-popover.zem-tour .driver-popover-description {
    margin-top: .35rem;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--on-surface-variant);
}

.driver-popover.zem-tour .driver-popover-progress-text {
    font-size: .78rem;
    font-weight: 600;
    color: var(--on-surface-variant);
}

.driver-popover.zem-tour .driver-popover-footer {
    margin-top: .9rem;
    gap: .5rem;
}

.driver-popover.zem-tour .driver-popover-footer button {
    padding: .3rem .8rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
    text-shadow: none;
    background: transparent;
    border: 1px solid var(--outline);
    color: var(--on-surface);
}

.driver-popover.zem-tour .driver-popover-footer button:hover {
    background: var(--surface-variant);
    color: var(--on-surface-variant);
}

/* The one forward action carries the accent; Back stays quiet beside it. */
.driver-popover.zem-tour .driver-popover-next-btn {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

.driver-popover.zem-tour .driver-popover-next-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    filter: brightness(1.1);
}

.driver-popover.zem-tour .driver-popover-close-btn {
    color: var(--on-surface-variant);
}

/* The arrow is a CSS triangle, so it needs the popover's fill on whichever side it points from. */
.driver-popover.zem-tour .driver-popover-arrow-side-top { border-top-color: var(--surface); }
.driver-popover.zem-tour .driver-popover-arrow-side-bottom { border-bottom-color: var(--surface); }
.driver-popover.zem-tour .driver-popover-arrow-side-left { border-left-color: var(--surface); }
.driver-popover.zem-tour .driver-popover-arrow-side-right { border-right-color: var(--surface); }

/* The highlighted control gets the same teal halo focused inputs use, so "this is the
   thing being talked about" reads the same way as "this is the thing you are typing in". */
.driver-active-element,
.driver-active-element:focus {
    outline: 2px solid var(--tertiary) !important;
    outline-offset: 2px;
    border-radius: 8px;
}

/* ===== Card header with a subtitle + action row (reusable) =====
   AdminLTE floats `.card-title` left, so a subtitle placed after it wraps around the float and
   reads as one run-on line ("Financial YearsCreate the year first…"). `.ct-head` lays the header
   out as flex instead: the text block stacks title over subtitle, the actions sit right and wrap
   underneath on narrow screens. Add it alongside `.card-header`. */
.ct-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem 1rem;
}

.ct-head .card-title,
.ct-head > .card-tools {
    float: none;
    margin-right: 0;
}

.ct-head__text {
    min-width: 0;
    flex: 1 1 auto;
}

.ct-head__text .card-title {
    display: block;
    font-weight: 600;
}

.ct-head__subtitle {
    margin-top: .2rem;
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--on-surface-variant);
}

/* `margin-left: auto` + `justify-content: flex-end` keep the action row flush right whether it
   shares the line with the title or wraps onto its own. */
.ct-head__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    margin-left: auto;
}

/* AdminLTE gives .btn-tool a negative block margin for the floated header; inside the flex row
   that would drag the dismiss button out of line. */
.ct-head__actions .btn-tool {
    margin: 0;
}

/* ===== Stat tiles (compact summary metrics above a table) =====
   Token-driven replacement for `border rounded p-3 bg-light` blocks — those paint a white card in
   dark mode and swallow their own text. Tone modifiers colour the value only, so the tiles stay a
   quiet row of numbers rather than four competing colour blocks. */
.stat-tile {
    height: 100%;
    padding: .75rem .9rem;
    border: 1px solid var(--outline);
    border-radius: 12px;
    background: var(--surface-variant);
}

.stat-tile__label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--on-surface-variant);
}

.stat-tile__value {
    margin-top: .15rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--on-surface);
}

.stat-tile--open .stat-tile__value { color: var(--chart-success); }
.stat-tile--closed .stat-tile__value { color: var(--on-surface-variant); }
.stat-tile--active .stat-tile__value { color: var(--tertiary); }

/* The list row whose children are shown in the panel below keeps a tint + left accent, so the
   two cards read as one selection (companion to the existing `.is-inactive` row treatment). */
table.dataTable tbody tr.is-selected > td {
    background: color-mix(in srgb, var(--tertiary) 12%, transparent);
}

table.dataTable tbody tr.is-selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--tertiary);
}

/* ===== Child-record panel table (accounting periods under a financial year) =====
   A plain table, not a DataTable: the set is small and loaded whole, so it gets the same muted
   uppercase header as the themed lists without the pager/search chrome. */
.child-table thead th {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--on-surface-variant);
    border-bottom: 1px solid var(--outline);
    white-space: nowrap;
}

.child-table tbody td {
    border-bottom: 1px solid color-mix(in srgb, var(--outline) 55%, transparent);
    vertical-align: middle;
}

.child-table tbody tr:last-child td {
    border-bottom: 0;
}

.child-table tbody tr:hover td {
    background: color-mix(in srgb, var(--tertiary) 8%, transparent);
}

/* Same recede-when-switched-off treatment the DataTable lists use: dim the data cells but not
   the Actions column, so edit/delete stay crisp; hover restores full opacity. */
.child-table tbody tr.is-inactive > td:not(:last-child) {
    opacity: .6;
}

.child-table tbody tr.is-inactive:hover > td {
    opacity: 1;
}