/*
 * Application overrides for AdminLTE 4.
 *
 * Rule: customise AdminLTE, never replace it. Keep this file small; prefer AdminLTE and
 * Bootstrap utility classes in templates. Brand colours will later come from School Settings
 * by overriding the --app-brand variables below.
 */

:root {
    --app-brand: #1f6f8b;
    --app-brand-contrast: #ffffff;
    --app-radius: 0.5rem;
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.55;
}

/* ---------- Typography ---------- */
body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.page-title {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
}

.card-title {
    font-weight: 600;
}

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

/* ---------- Brand colours from School Settings (layouts set --app-brand / --app-accent) ---------- */
.btn-primary {
    --bs-btn-bg: var(--app-brand);
    --bs-btn-border-color: var(--app-brand);
    --bs-btn-hover-bg: color-mix(in srgb, var(--app-brand) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--app-brand) 85%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--app-brand) 75%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--app-brand) 75%, #000);
    --bs-btn-disabled-bg: var(--app-brand);
    --bs-btn-disabled-border-color: var(--app-brand);
}

.card-outline.card-primary {
    border-top-color: var(--app-brand) !important;
}

.brand-logo {
    width: 2.1rem;
    height: 2.1rem;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 0.35rem;
    background: #fff;
}

.brand-logo-lg {
    max-width: 5rem;
    max-height: 5rem;
    object-fit: contain;
}

.image-preview {
    display: inline-block;
    padding: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--app-radius);
    background: repeating-conic-gradient(#f1f3f5 0% 25%, #fff 0% 50%) 50% / 16px 16px;
}

.image-preview img {
    display: block;
    max-width: 220px;
    max-height: 90px;
    object-fit: contain;
}

/* ---------- Brand mark (school initials until a logo is uploaded) ---------- */
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--app-brand);
    color: var(--app-brand-contrast);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.brand-mark-lg {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1rem;
}

/* ---------- Sidebar ---------- */
.app-sidebar .sidebar-brand .brand-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    padding-left: 1rem;
    padding-right: 1rem;
}

.app-sidebar .sidebar-brand .brand-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
}

.app-sidebar .sidebar-menu .nav-link {
    min-height: 2.75rem; /* comfortable touch target */
    display: flex;
    align-items: center;
}

.app-sidebar .sidebar-menu .nav-link.active {
    background-color: var(--app-brand) !important;
    color: var(--app-brand-contrast) !important;
}

/* ---------- Navbar ---------- */
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

.user-name {
    max-width: 14rem;
}

/* ---------- Sign-in pages (AdminLTE login-box) ---------- */
.login-page .login-box {
    width: 100%;
    max-width: 400px;
    padding: 1rem;
}

.login-page .login-card-body .input-group-text {
    min-width: 2.75rem;
    justify-content: center;
}

/* ---------- Cards: minimal, flat ---------- */
.card {
    border-radius: var(--app-radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.card > .card-header {
    background: transparent;
}

.shortcut-card {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.shortcut-card:hover,
.shortcut-card:focus-visible {
    border-color: var(--app-brand);
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.1);
}

.shortcut-icon {
    display: block;
    font-size: 1.5rem;
    color: var(--app-brand);
    margin-bottom: 0.35rem;
}

/* ---------- Empty states ---------- */
.empty-state {
    text-align: center;
    color: var(--bs-secondary-color);
    padding: 0.75rem 0.5rem;
}

.empty-state-icon {
    display: block;
    font-size: 2rem;
    opacity: 0.55;
    margin-bottom: 0.5rem;
}

/* ---------- Tables (used from later phases) ---------- */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.table th {
    white-space: nowrap;
    font-weight: 600;
}

/* ---------- Health page ---------- */
.health-list .badge {
    font-weight: 500;
}

/* ---------- Landing / error pages ---------- */
.blank-box {
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
    padding: 1rem;
}

.debug-trace {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.75rem;
    max-height: 20rem;
    overflow: auto;
}

/* ---------- Accessibility ---------- */
/* AdminLTE's skip links sit at top:-40px but are ~41px tall, leaving a 1px blue line visible. */
.skip-link:not(:focus) {
    top: -100px;
}

a:focus-visible,
button:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid var(--app-brand);
    outline-offset: 2px;
}

/* ---------- Mobile ---------- */
@media (max-width: 575.98px) {
    .app-content-header {
        padding-top: 0.75rem;
        padding-bottom: 0.5rem;
    }

    .app-content .container-fluid,
    .app-content-header .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .page-title {
        font-size: 1.2rem;
    }

    .card-body {
        padding: 0.9rem;
    }

    .small-sm {
        font-size: 0.85rem;
    }
}

/* ---------- Print: content only ---------- */
@media print {
    .app-sidebar,
    .app-header,
    .app-footer,
    .page-actions,
    .bottom-nav,
    .app-wrapper .btn,
    .app-wrapper .alert-dismissible,
    #pending-updates {
        display: none !important;
    }

    .app-wrapper .table-responsive {
        overflow: visible !important;
    }

    .app-main {
        margin: 0 !important;
    }

    .card {
        box-shadow: none;
    }
}

/* Upper-case registration numbers as they are typed, but keep the example text readable. */
.text-uppercase::placeholder {
    text-transform: none;
}

/* ---------- Class subjects screen ---------- */
.subject-choice .subject-options {
    opacity: 0.45;
}

.subject-choice.is-offered {
    background: color-mix(in srgb, var(--app-brand) 5%, transparent);
}

.subject-choice.is-offered .subject-options {
    opacity: 1;
}

.subject-desc {
    max-width: 28rem;
}

/* AdminLTE's card-header clearfix (::after) becomes a flex item and stops
   justify-content-between from pushing the right-hand content to the edge. */
.card-header.d-flex::after {
    display: none;
}

/* Assignment checkbox lists (teacher profile): scroll instead of growing the page. */
.assign-list {
    max-height: 16rem;
    overflow-y: auto;
}

/* Teacher MasterSheet / class sheets: keep the student name visible while scrolling across. */
.sheet-table th.sticky-col,
.sheet-table td.sticky-col {
    position: sticky;
    left: 0;
    background: var(--bs-body-bg);
    z-index: 1;
}

.sheet-table .sticky-col {
    min-width: 8rem;
    max-width: 12rem;
    white-space: normal;
    box-shadow: inset -1px 0 0 var(--bs-border-color);
}

.sheet-table .subject-col {
    min-width: 4.5rem;
    font-size: 0.75rem;
    white-space: normal;
}

/* Clickable card (teacher class picker). */
.card-link {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.card-link:hover,
.card-link:focus-visible {
    box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 10%);
    transform: translateY(-1px);
}

.sheet-header .sheet-logo {
    max-height: 3.5rem;
    max-width: 3.5rem;
    object-fit: contain;
}

/* Fieldsets used only to group checkboxes: no browser/AdminLTE box around them. */
fieldset.plain {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

/* Tables placed edge-to-edge in a card: line the first/last column up with the card padding. */
.card > .table-responsive > .table > :not(caption) > tr > :first-child,
.card > .table-responsive > .table > * > tr > :first-child {
    padding-left: 1rem;
}

.card > .table-responsive > .table > * > tr > :last-child {
    padding-right: 1rem;
}

/* Student passport photo (profile, form). */
.passport-photo {
    max-width: 100%;
    width: 8rem;
    height: 10rem;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid var(--bs-border-color);
}

.passport-placeholder {
    width: 8rem;
    height: 10rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border-radius: 0.5rem;
}

/* Printable pages (slips, MasterSheet, reports). On a phone screen a wide sheet scrolls inside the page. */
.print-page {
    background: #fff;
}

@media screen {
    .print-page main {
        overflow-x: auto;
    }
}

.credential-slip {
    max-width: 34rem;
    border: 1px dashed #6c757d;
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin: 0 auto 1.5rem;
    break-inside: avoid;
}

.credential-slip .slip-logo {
    max-height: 3rem;
    max-width: 3rem;
    object-fit: contain;
}

.credential-slip .slip-pin {
    letter-spacing: 0.15em;
}

@media print {
    .print-page main {
        padding: 0 !important;
    }

    .credential-slip {
        margin-bottom: 1cm;
    }
}

/* ===================== Student portal (Phase 8) ===================== */
.student-avatar {
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bs-border-color);
}

.student-avatar-lg {
    width: 4.5rem;
    height: 4.5rem;
}

.student-avatar-sm {
    width: 2rem;
    height: 2rem;
}

.student-avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.4rem;
    color: #fff;
    background: var(--app-brand, #1f6f8b);
    border-color: transparent;
}

.student-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.75rem 1rem;
    background: var(--bs-body-bg);
}

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

.student-fact-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
}

.student-fact-value {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.glance-tile .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 7rem;
}

.glance-icon {
    font-size: 1.4rem;
    color: var(--app-brand, #1f6f8b);
}

.glance-label {
    font-weight: 600;
    color: var(--bs-body-color);
}

.glance-value {
    font-size: 0.875rem;
    color: var(--bs-body-color);
}

.glance-value.is-empty {
    color: var(--bs-secondary-color);
}

.glance-tile:hover,
.glance-tile:focus-visible {
    box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 10%);
}

.profile-list .profile-row {
    display: grid;
    grid-template-columns: minmax(7rem, 38%) 1fr;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    font-size: 0.9rem;
}

.profile-list .profile-row:last-child {
    border-bottom: 0;
}

.profile-list dt {
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.profile-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Bottom navigation (phones/tablets). */
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -0.25rem 0.75rem rgb(0 0 0 / 6%);
    padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-height: 3.5rem;
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.bottom-nav-item .bi {
    font-size: 1.25rem;
}

.bottom-nav-item.active {
    color: var(--app-brand, #1f6f8b);
    font-weight: 600;
}

.bottom-nav-item:focus-visible {
    outline: 2px solid var(--app-brand, #1f6f8b);
    outline-offset: -2px;
}

@media (max-width: 991.98px) {
    /* Keep the last content and the footer clear of the bottom navigation. */
    .role-student .app-wrapper {
        padding-bottom: calc(3.5rem + env(safe-area-inset-bottom));
    }
}

@media print {
    .bottom-nav {
        display: none !important;
    }
}

/* Score sheets (Phase 9). */
.score-table .score-col {
    min-width: 4.75rem;
    font-size: 0.8rem;
}

.score-table .score-input {
    width: 4.5rem;
    margin: 0 auto;
    text-align: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.score-table td {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

@media (max-width: 575.98px) {
    /* Phones: keep more room for the score columns next to the sticky name column. */
    .score-table th.sticky-col {
        min-width: 7rem;
        max-width: 8.5rem;
        font-size: 0.85rem;
    }
}

/* Grading bands table. */
.grading-table td {
    min-width: 5rem;
}

.grading-table td:last-child {
    min-width: 9rem;
}

/* MasterSheet (Phase 11). */
.mastersheet-table {
    font-size: 0.82rem;
}

.mastersheet-table thead th {
    white-space: nowrap;
    vertical-align: middle;
}

.mastersheet-table .sub-head {
    font-size: 0.7rem;
    font-weight: 600;
}

.mastersheet-table .subject-head {
    border-bottom-width: 1px;
}

.mastersheet-table .sort-link {
    color: inherit;
    text-decoration: none;
}

.mastersheet-table .sort-link.active,
.mastersheet-table .sort-link:hover {
    color: var(--app-brand, #1f6f8b);
}

.mastersheet-header .sheet-logo {
    max-height: 3rem;
    max-width: 3rem;
    object-fit: contain;
}

@media print {
    @page {
        size: A4 landscape;
        margin: 10mm;
    }

    .mastersheet-print .mastersheet-table {
        font-size: 8pt;
    }

    .mastersheet-print .sticky-col {
        position: static;
    }
}

/* ---- Result workflow (Phase 12) ---------------------------------------- */
.status-badge { font-weight: 600; }
.result-steps { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; padding: 0; margin: 0; counter-reset: step; }
.result-steps li { flex: 1 1 0; min-width: 5.5rem; position: relative; text-align: center; font-size: .8rem; color: var(--bs-secondary-color); padding-top: 1.9rem; counter-increment: step; }
.result-steps li::before { content: counter(step); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1.6rem; height: 1.6rem; line-height: 1.6rem;
    border-radius: 50%; background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); font-weight: 600; z-index: 1; }
.result-steps li::after { content: ""; position: absolute; top: .8rem; left: calc(-50% + .8rem); right: calc(50% + .8rem); height: 2px; background: var(--bs-border-color); }
.result-steps li:first-child::after { display: none; }
.result-steps li.done { color: var(--bs-success-text-emphasis); }
.result-steps li.done::before { content: "\2713"; background: var(--bs-success); border-color: var(--bs-success); color: #fff; }
.result-steps li.done::after, .result-steps li.current::after { background: var(--bs-success); }
.result-steps li.current { color: var(--bs-emphasis-color); font-weight: 600; }
.result-steps li.current::before { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); }
@media (max-width: 575.98px) {
    .result-steps li { min-width: 0; font-size: .7rem; }
    .result-steps li:not(.current) span { display: none; }   /* phones: only the current step is named */
    .result-steps li.current span { white-space: nowrap; }
}
.reason-form > summary { list-style: none; }
.reason-form > summary::-webkit-details-marker { display: none; }
.reason-form[open] { flex-basis: 100%; }
.score-input.is-changed { border-color: var(--bs-warning); background-color: var(--bs-warning-bg-subtle); }

/* ---- Ranking & promotion (Phase 13) ------------------------------------ */
.rule-order { max-width: 7rem; }
.rule-name { min-width: 10rem; flex-basis: 12rem; }
.promotion-rule.border-dashed { border-style: dashed; }
.promotion-checks { list-style: none; padding: 0; margin: 0; }
.promotion-checks li::before { content: "\2717"; color: var(--bs-danger); margin-right: .35rem; font-weight: 700; }
.promotion-checks li.ok::before { content: "\2713"; color: var(--bs-success); }

/* ---- Attendance (Phase 14) ---------------------------------------------- */
.input-narrow { max-width: 16rem; }
.attendance-row .btn-group .btn { min-width: 4.75rem; }
.attendance-row .att-remark { max-width: 22rem; }
@media (max-width: 575.98px) {
    .attendance-row .btn-group { width: 100%; }
    .attendance-row .btn-group .btn { min-width: 0; flex: 1 1 0; }
    .attendance-row .att-remark { max-width: none; }
}
.attendance-toolbar { position: sticky; bottom: 0; z-index: 5; }

/* ---- CBT (Phase 15) ------------------------------------------------------ */
.cbt-thumb { max-width: 16rem; max-height: 12rem; }
.cbt-body { font-size: 1.05rem; white-space: normal; }
.cbt-blank { display: inline-block; min-width: 4rem; border-bottom: 2px solid var(--bs-body-color); color: transparent; }
.cbt-media img, .cbt-media video { max-height: 24rem; }
.cbt-type-card { transition: border-color .15s; }
.cbt-type-card:hover, .cbt-type-card:focus-visible { border-color: var(--bs-primary); }
.question-snippet { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.order-input { width: 4.5rem; }

/* ------------------------------------------------------------------ Student exam page (Phase 16)
   Distraction-free: white page, top bar with timer, one question, bottom navigation bar. */
.cbt-exam-body { background: #fff; color: #1f2328; min-height: 100vh; }
.cbt-shell { --cbt-bar: 3.75rem; min-height: 100vh; }
.cbt-topbar {
    position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: .75rem;
    padding: .5rem 1rem; padding-top: calc(.5rem + env(safe-area-inset-top));
    background: #fff; border-bottom: 1px solid var(--bs-border-color);
}
.cbt-topbar-title { flex: 1 1 auto; }
.cbt-title { font-weight: 600; font-size: 1rem; line-height: 1.25; }
.cbt-subtitle { font-size: .8rem; color: var(--bs-secondary-color); }
.cbt-save-state { font-size: .8rem; color: var(--bs-secondary-color); white-space: nowrap; }
.cbt-save-state[data-state="offline"] { color: var(--bs-danger); font-weight: 600; }
.cbt-save-state[data-state="unsaved"], .cbt-save-state[data-state="saving"] { color: var(--bs-body-color); }
.cbt-timer {
    font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.15rem; white-space: nowrap;
    padding: .25rem .65rem; border-radius: .5rem; background: var(--bs-light); border: 1px solid var(--bs-border-color);
}
.cbt-timer.is-warning { background: #fff3cd; border-color: #ffc107; }
.cbt-timer.is-danger { background: #f8d7da; border-color: #dc3545; color: #842029; }
.cbt-notices { max-width: 72rem; margin: .75rem auto 0; padding: 0 1rem; }
.cbt-notices:empty { display: none; }
.cbt-notices .btn { white-space: nowrap; }
.cbt-layout { max-width: 72rem; margin: 0 auto; padding: 1rem 1rem calc(var(--cbt-bar) + 2rem + env(safe-area-inset-bottom)); display: flex; gap: 2rem; align-items: flex-start; }
.cbt-main { flex: 1 1 auto; min-width: 0; max-width: 48rem; }
.cbt-side { flex: 0 0 16.5rem; position: sticky; top: 5rem; }
.cbt-q { padding: .5rem 0 1.5rem; border-bottom: 1px solid var(--bs-border-color); margin-bottom: 1.5rem; }
.cbt-js .cbt-q { border-bottom: 0; margin-bottom: 0; }
.cbt-js .cbt-q[hidden] { display: none; }
.cbt-q-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.cbt-q-number { font-size: 1rem; font-weight: 700; margin: 0; outline: none; }
.cbt-q-of { font-weight: 400; color: var(--bs-secondary-color); }
.cbt-q-marks { font-size: .85rem; color: var(--bs-secondary-color); white-space: nowrap; }
.cbt-shell .cbt-body { font-size: 1.15rem; line-height: 1.6; margin-bottom: 1.25rem; overflow-wrap: anywhere; }
.cbt-shell .cbt-media { margin-bottom: 1.25rem; }
.cbt-answer-area { font-size: 1.05rem; }
.cbt-shell .cbt-options .list-group-item { padding: .85rem 1rem; cursor: pointer; }
.cbt-shell .cbt-options .list-group-item.is-selected,
.cbt-options .list-group-item:has(input:checked) { background: rgba(var(--bs-primary-rgb), .08); border-color: rgba(var(--bs-primary-rgb), .5); z-index: 1; }
.cbt-shell .cbt-options .form-check-input { width: 1.25rem; height: 1.25rem; }
.cbt-tf .btn { padding: .9rem 1rem; font-size: 1.05rem; }
.cbt-tf label.is-selected, .cbt-tf label:has(input:checked) { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.cbt-tf label:has(input:focus-visible) { box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .35); }
.cbt-matching { display: grid; gap: .5rem; }
.cbt-match-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--bs-border-color-translucent); }
.cbt-match-left { margin: 0; }
.cbt-q-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.cbt-flag .form-check-label { color: var(--bs-secondary-color); }
.cbt-flag .form-check-input:checked + .form-check-label { color: #b35c00; font-weight: 600; }
.cbt-clear { color: var(--bs-secondary-color); text-decoration: none; }

.cbt-bottombar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; gap: .5rem; justify-content: center; align-items: center;
    padding: .5rem 1rem; padding-bottom: calc(.5rem + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--bs-border-color);
}
.cbt-bottombar .btn { min-height: 2.75rem; min-width: 2.75rem; font-size: 1rem; }
.cbt-pos-btn { font-variant-numeric: tabular-nums; flex: 0 1 9rem; }
.cbt-js-only { display: none !important; }
.cbt-js .cbt-js-only { display: revert !important; }
.cbt-js .cbt-bottombar.cbt-js-only { display: flex !important; }
.cbt-js .cbt-bottombar [hidden] { display: none !important; }
.cbt-js .cbt-nojs-submit { display: none; }

.cbt-palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: .4rem; }
.cbt-pal-btn, .cbt-pal-key {
    display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; border-radius: .5rem;
    border: 1px solid var(--bs-border-color); background: #fff; color: var(--bs-body-color); text-decoration: none; font-weight: 600; position: relative;
}
.cbt-pal-btn:hover { border-color: var(--bs-primary); }
.cbt-pal-btn.is-answered, .cbt-pal-key.is-answered { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.cbt-pal-btn.is-flagged::after, .cbt-pal-key.is-flagged::after {
    content: ""; position: absolute; top: 3px; right: 3px; width: .55rem; height: .55rem; border-radius: 50%; background: #fd7e14; border: 1px solid #fff;
}
.cbt-pal-btn.is-current, .cbt-pal-key.is-current { outline: 3px solid var(--bs-body-color); outline-offset: 1px; }
.cbt-pal-key { min-height: 1rem; width: 1.25rem; height: 1.25rem; margin-right: .5rem; vertical-align: middle; }
.cbt-palette-legend li { display: flex; align-items: center; margin-bottom: .25rem; }
.cbt-jump-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.cbt-jump-list .cbt-pal-btn { width: 2.75rem; }
.cbt-drawer.offcanvas-bottom { height: auto; max-height: 75vh; }

.cbt-overlay { position: fixed; inset: 0; z-index: 1090; background: rgba(255, 255, 255, .97); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.cbt-overlay[hidden] { display: none; }
.cbt-overlay-card { max-width: 26rem; width: 100%; text-align: center; }
.cbt-overlay-icon { font-size: 2.75rem; color: var(--bs-primary); margin-bottom: .5rem; }

@media (max-width: 575.98px) {
    .cbt-topbar { gap: .5rem; padding-left: .75rem; padding-right: .75rem; }
    .cbt-save-state { font-size: 1.15rem; }
    .cbt-save-state .bi { margin-right: 0 !important; }
    .cbt-save-state .cbt-save-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .cbt-layout { padding-left: .75rem; padding-right: .75rem; }
    .cbt-match-row { grid-template-columns: 1fr; gap: .25rem; }
    .cbt-shell .cbt-body { font-size: 1.1rem; }
}

/* Student CBT list and exam page */
.cbt-exam-card { transition: border-color .15s, box-shadow .15s; }
.cbt-exam-card:hover, .cbt-exam-card:focus-visible { border-color: var(--bs-primary); box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06); }
.cbt-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .75rem 1rem; }
.cbt-facts dt { font-size: .8rem; font-weight: 400; color: var(--bs-secondary-color); }
.cbt-facts dd { margin: 0; font-weight: 600; }
.cbt-facts .cbt-facts-wide { grid-column: 1 / -1; }
.cbt-rules li { margin-bottom: .4rem; }

/* CBT results and marking (Phase 17) */
.cbt-stat { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .5rem .25rem; font-size: .8rem; color: var(--bs-secondary-color); height: 100%; }
.cbt-stat span { display: block; font-size: 1.15rem; font-weight: 600; color: var(--bs-body-color); font-variant-numeric: tabular-nums; }
.cbt-given { background: var(--bs-tertiary-bg); border-radius: .375rem; padding: .5rem .75rem; overflow-wrap: anywhere; }
.cbt-given-essay { max-height: 22rem; overflow: auto; }
.cbt-mark-card .card-footer summary { cursor: pointer; }

/* E-learning (Phase 18) */
.elearning-icon { flex: 0 0 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .5rem; background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); font-size: 1.35rem; }
.elearning-pdf { width: 100%; height: min(75vh, 48rem); border: 1px solid var(--bs-border-color); border-radius: .375rem; background: var(--bs-tertiary-bg); }
.elearning-video { max-height: 70vh; }
.elearning-image { max-height: 75vh; }
.elearning-details { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; }
.elearning-details dt { font-weight: 400; color: var(--bs-secondary-color); }
.elearning-details dd { margin: 0; }
.elearning-subjects { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; -webkit-overflow-scrolling: touch; }
.elearning-subjects .btn { white-space: nowrap; }
.elearning-card:hover, .elearning-card:focus-visible { border-color: var(--bs-primary); }
.elearning-item a:hover .fw-semibold { color: var(--bs-primary); }

/* Notification centre (Phase 19) */
.notification-badge { font-size: .65rem; padding: .2em .45em; top: .35rem; right: .2rem; position: absolute; }
.notification-dropdown { width: min(22rem, calc(100vw - 1rem)); }
.notification-dropdown-list { max-height: min(60vh, 26rem); overflow-y: auto; }
.notification-item { display: flex; gap: .65rem; align-items: flex-start; white-space: normal; padding: .6rem 1rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
.notification-item:last-child { border-bottom: 0; }
.notification-icon { flex: 0 0 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bs-tertiary-bg); font-size: 1rem; }
.notification-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.notification-title { font-size: .9rem; color: var(--bs-body-color); overflow-wrap: anywhere; }
.notification-snippet { font-size: .8rem; color: var(--bs-secondary-color); overflow-wrap: anywhere; }
.notification-time { font-size: .75rem; color: var(--bs-secondary-color); margin-top: .1rem; }
.notification-dot { flex: 0 0 .55rem; height: .55rem; border-radius: 50%; background: var(--bs-primary); margin-top: .4rem; }
.is-unread .notification-title { font-weight: 600; }
.notification-row.is-unread { background: rgba(var(--bs-primary-rgb), .04); box-shadow: inset 3px 0 0 var(--bs-primary); }
.notification-message { overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .notification-dropdown { position: fixed !important; left: .5rem !important; right: .5rem !important; top: 3.5rem !important; transform: none !important; width: auto; }
}

/* ===================== Reports (Phase 20) ===================== */
.report-card { transition: box-shadow .15s ease; }
.report-card:hover, .report-card:focus-visible { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08); }
.report-summary { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; }
.report-summary dt { font-size: .75rem; font-weight: 400; color: var(--bs-secondary-color); }
.report-summary dd { margin: 0; font-weight: 600; font-size: 1.05rem; }
.report-chart-wrap { max-width: 48rem; }
.report-bar { display: grid; grid-template-columns: minmax(6rem, 12rem) 1fr 4.5rem; gap: .5rem; align-items: center; font-size: .8125rem; margin-bottom: .25rem; }
.report-bar-label { min-width: 0; }
.report-bar-track { display: block; height: .75rem; background: var(--bs-tertiary-bg); border-radius: .25rem; overflow: hidden; }
.report-bar-fill { display: block; height: 100%; background: var(--bs-primary); border-radius: .25rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.report-bar-value { text-align: right; font-variant-numeric: tabular-nums; }
.report-table td, .report-table th { font-size: .8125rem; }
.report-table td { font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) {
    .report-bar { grid-template-columns: minmax(4rem, 8rem) 1fr 3.75rem; }
}
@media print {
    .report-print .table-responsive { overflow: visible; }
    .report-print .report-table td, .report-print .report-table th { font-size: 9pt; padding: .15rem .3rem; }
    .report-print .report-table thead { display: table-header-group; }
    .report-print .report-table tr { break-inside: avoid; }
}

/* Scratch cards (print layout: 10 cards per A4 page, cutting lines). */
.scratch-limit-input {
    width: 5rem;
}

.scratch-sheet {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    max-width: 190mm;
}

.scratch-card {
    border: 1px dashed #8a8a8a;
    padding: 4mm 5mm;
    height: 54mm;
    display: flex;
    flex-direction: column;
    font-size: 8pt;
    break-inside: avoid;
    page-break-inside: avoid;
    overflow: hidden;
}

.scratch-card-head {
    display: flex;
    align-items: center;
    gap: 3mm;
}

.scratch-card-logo {
    width: 11mm;
    height: 11mm;
    object-fit: contain;
}

.scratch-card-school {
    font-weight: 700;
    font-size: 9pt;
    line-height: 1.1;
}

.scratch-card-kind {
    color: #555;
    font-size: 7.5pt;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.scratch-card-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 2mm;
}

.scratch-card-pin {
    margin: 1.5mm 0;
    border: 1px solid #000;
    background: #ececec;
    padding: 1.5mm 3mm;
    display: flex;
    align-items: baseline;
    gap: 3mm;
}

.scratch-card-pin span {
    font-size: 7pt;
    color: #555;
}

.scratch-card-pin strong {
    font-family: var(--bs-font-monospace);
    font-size: 14pt;
    letter-spacing: 0.08em;
    margin: 0 auto;
}

.scratch-card-steps {
    margin: 0;
    padding-left: 4mm;
    font-size: 7pt;
    line-height: 1.25;
}

.scratch-card-foot {
    margin-top: auto;
    font-size: 6.5pt;
    font-style: italic;
    color: #555;
}

@media screen and (max-width: 575.98px) {
    .scratch-sheet {
        grid-template-columns: 1fr;
    }
    .scratch-card {
        height: auto;
    }
}

@media print {
    @page {
        size: A4 portrait;
        margin: 10mm;
    }
    .scratch-sheet .scratch-card:nth-child(10n) {
        break-after: page;
        page-break-after: always;
    }
}

/* Public result checker. */
.checker-box {
    max-width: 30rem;
}

.brand-logo-sm {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Developmental progress reports (Play Group / Nursery): rating buttons and key colours of the school's document. */
.milestone-row .milestone-text {
    min-width: 14rem;
    flex: 1 1 18rem;
}

.rating-group .btn {
    min-width: 2.6rem;
}

.rating-group .btn-check:checked + .rating-ex,
.rating-group .btn-check:checked + .rating-m,
.rating-key-ex,
.rating-key-m {
    background-color: #c6f5d5;
    border-color: #8fd3a7;
    color: #1d3b29;
}

.rating-group .btn-check:checked + .rating-d,
.rating-key-d {
    background-color: #fffcbf;
    border-color: #d9d27a;
    color: #3d3a12;
}

.rating-group .btn-check:checked + .rating-e,
.rating-group .btn-check:checked + .rating-n,
.rating-key-e,
.rating-key-n {
    background-color: #ffd9d9;
    border-color: #e5a5a5;
    color: #4a1f1f;
}

.range-input {
    width: 5.5rem;
    margin-inline: auto;
}

.text-pre-line {
    white-space: pre-line;
}