/*
 * SMSPro Web - Modern Branded Design System
 * Unique Public Graduate College Chichawatni
 *
 * Design Philosophy: Clean, Minimalist, Professional
 * Brand Colors: Deep Green & Rich Gold from College Logo
 */

/* ============================================================================
   BRAND COLOR PALETTE - From College Logo
   ============================================================================ */
:root {
    /* Primary Brand Colors */
    --brand-green-deep: #1e5631;      /* Deep forest green from shield */
    --brand-green-medium: #2d7a4a;    /* Medium green */
    --brand-green-light: #3a9b60;     /* Light green */
    --brand-green-subtle: #e8f5ed;    /* Very light green tint */

    --brand-gold: #d4a53a;            /* Rich gold from accents */
    --brand-gold-light: #e6c563;      /* Light gold */
    --brand-gold-dark: #b8912e;       /* Dark gold */
    --brand-gold-subtle: #fef9f0;     /* Cream tint */

    --brand-blue: #5db4e5;            /* Sky blue from sun */
    --brand-blue-light: #8dcef0;      /* Light blue */

    /* Neutral Grays - Professional */
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #eeeeee;
    --gray-300: #e0e0e0;
    --gray-400: #bdbdbd;
    --gray-500: #9e9e9e;
    --gray-600: #757575;
    --gray-700: #616161;
    --gray-800: #424242;
    --gray-900: #212121;

    /* Theme-stable ink for LIGHT colour fills (gold / sky blue / emerald).
       Declared here and deliberately NEVER redefined in the [data-theme="dark"]
       block: those fills are the same colour in both themes, so their ink must
       be too. Using a --gray-* token here is the bug this replaces (the gray
       scale inverts in dark). Deep enough to clear AA on the DARKEST stop of every
       light fill it lands on: 7.81:1 on --brand-gold (#d4a53a), 7.71:1 on
       --brand-blue (#5db4e5), 5.81:1 on the emerald far stop (#0ea875). */
    --ink-on-light-fill: #111827;

    /* Semantic Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --danger-muted: #d35454;     /* Slightly desaturated red — KPI/card edge accents */
    --danger-dark: #a13434;      /* Darker red — defaulter balance text */
    --info: var(--brand-blue);

    /* Shadows - Subtle & Layered */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-brand: 0 8px 16px rgba(30, 86, 49, 0.15);

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.25);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --navbar-height: 60px;
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 76px;
}

/* Global UI scale — shrink the whole interface ~10% for a denser, more
   professional layout that fits on screen without zooming the browser out. */
html {
    font-size: 90%;
}

/* ============================================================================
   GLOBAL STYLES
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--gray-900);
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--brand-gold-subtle) 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--brand-green-deep);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }

/* ============================================================================
   NAVBAR - Glassmorphism with Brand Colors
   ============================================================================ */
.navbar {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
    padding: 0 1.25rem;
    min-height: var(--navbar-height);
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--brand-green-deep) !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
}

.navbar-brand img.logo {
    height: 38px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.navbar .dropdown-menu {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-lg);
    border-radius: 12px;
    padding: 0.5rem;
}

.navbar .dropdown-item {
    border-radius: 8px;
    padding: 0.625rem 1rem;
    font-size: 1rem;
    color: var(--gray-700);
    transition: all var(--transition-fast);
}

.navbar .dropdown-item:hover {
    background: var(--brand-green-subtle);
    color: var(--brand-green-deep);
}

/* ============================================================================
   SIDEBAR - Modern Dark with Brand Accents
   ============================================================================ */
.sidebar {
    background: linear-gradient(180deg, var(--brand-green-deep) 0%, #153920 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-xl);
    transition: width var(--transition-base);
}

/* Slim, subtle scrollbar for the (now scrollable) sidebar */
.sidebar::-webkit-scrollbar {
    width: 6px;
}
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.sidebar .nav-link {
    color: #ffffff;
    display: flex;
    align-items: center;
    padding: 0.55rem 0.9rem;
    margin: 0.15rem 0.6rem;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.92rem;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.sidebar .nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: var(--brand-gold);
    transform: scaleY(0);
    transition: transform var(--transition-base);
}

.sidebar .nav-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
}

.sidebar .nav-link.active {
    color: #ffffff;
    background: linear-gradient(90deg, rgba(212, 165, 58, 0.35) 0%, rgba(212, 165, 58, 0.2) 100%);
    box-shadow: 0 4px 12px rgba(212, 165, 58, 0.4);
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.sidebar .nav-link.active::before {
    transform: scaleY(1);
}

.sidebar .nav-link i {
    width: 20px;
    margin-right: 0.75rem;
    font-size: 1.05rem;
    text-align: center;
    flex-shrink: 0;
    color: #ffffff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* ============================================================================
   COLLAPSIBLE SIDEBAR — icon rail + flyout submenus (desktop)
   Inspired by the mysms.zsoft.pk rail: a slim icon-only rail where hovering a
   group icon reveals a flyout panel listing that group's pages.
   ============================================================================ */
.sidebar-collapse-btn {
    align-items: center;
    justify-content: center;
}

/* A group wraps a rail icon (collapsed), a text label (expanded) and the item
   list (inline when expanded, flyout when collapsed). */
.sidebar-group {
    position: relative;
}

.sidebar-group + .sidebar-group {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Rail icon and flyout header are only used by the collapsed desktop rail. */
.sidebar-rail-icon { display: none; }
.sidebar-flyout-header { display: none; }

@media (min-width: 992px) {
    .app-container.sidebar-collapsed .sidebar {
        width: var(--sidebar-collapsed-width);
        overflow: visible;            /* let flyouts escape the narrow rail */
        padding-top: 0.75rem;
    }

    .app-container.sidebar-collapsed .main-content {
        margin-left: var(--sidebar-collapsed-width);
    }

    /* Hide expanded-only chrome in the rail */
    .app-container.sidebar-collapsed .sidebar-brand,
    .app-container.sidebar-collapsed .sidebar-group-label {
        display: none;
    }

    .app-container.sidebar-collapsed .sidebar-group {
        border-top: none;
    }

    /* One rail icon per group */
    .app-container.sidebar-collapsed .sidebar-rail-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        margin: 0.25rem auto;
        border-radius: 12px;
        color: #ffffff;
        font-size: 1.15rem;
        text-decoration: none;
        transition: all var(--transition-base);
    }

    .app-container.sidebar-collapsed .sidebar-rail-icon i {
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
    }

    .app-container.sidebar-collapsed .sidebar-group:hover .sidebar-rail-icon,
    .app-container.sidebar-collapsed .sidebar-rail-icon:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
    }

    .app-container.sidebar-collapsed .sidebar-rail-icon.active {
        background: linear-gradient(135deg, rgba(212, 165, 58, 0.38) 0%, rgba(212, 165, 58, 0.22) 100%);
        box-shadow: 0 4px 12px rgba(212, 165, 58, 0.35);
    }

    /* Flyout panel = the group's item list, popped out beside the rail */
    .app-container.sidebar-collapsed .sidebar-group-items {
        position: absolute;
        top: 0;
        left: 100%;
        min-width: 220px;
        max-height: calc(100vh - var(--navbar-height) - 1rem);
        overflow-y: auto;
        padding: 0 0 0.4rem;
        background: linear-gradient(180deg, var(--brand-green-deep) 0%, #153920 100%);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-left: none;
        border-radius: 0 14px 14px 0;
        box-shadow: var(--shadow-xl);
        opacity: 0;
        visibility: hidden;
        transform: translateX(-6px);
        transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
        pointer-events: none;
        z-index: 1100;
    }

    .app-container.sidebar-collapsed .sidebar-group:hover .sidebar-group-items,
    .app-container.sidebar-collapsed .sidebar-group:focus-within .sidebar-group-items {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        pointer-events: auto;
    }

    /* Dark header inside the flyout showing the group name */
    .app-container.sidebar-collapsed .sidebar-flyout-header {
        display: block;
        padding: 0.6rem 1rem;
        margin-bottom: 0.35rem;
        font-family: 'Inter', sans-serif;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #ffffff;
        background: rgba(0, 0, 0, 0.28);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0 13px 0 0;
    }

    /* Flyout links keep their full label + icon and normal alignment */
    .app-container.sidebar-collapsed .sidebar-group-items .nav-link {
        justify-content: flex-start;
        margin: 0.1rem 0.5rem;
        padding: 0.5rem 0.85rem;
        white-space: nowrap;
        min-height: 44px;
    }

    .app-container.sidebar-collapsed .sidebar-group-items .nav-link:hover {
        transform: none;
    }
}

/* Denser flyout targets for precise pointers; touch keeps the 44px above
   (WCAG 2.5.5). */
@media (min-width: 992px) and (pointer: fine) {
    .app-container.sidebar-collapsed .sidebar-group-items .nav-link {
        min-height: 38px;
    }
}

/* ============================================================================
   MAIN CONTENT
   ============================================================================ */
.main-content {
    background: transparent;
    min-height: 100vh;
    padding: 1.5rem;
    transition: margin-left var(--transition-base);
}

/* ============================================================================
   CARDS - Glassmorphism with Subtle Neumorphism
   ============================================================================ */
.card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.card-header {
    background: linear-gradient(135deg, var(--brand-green-subtle) 0%, rgba(255, 255, 255, 0.5) 100%);
    border-bottom: 1px solid var(--gray-200);
    padding: 0.9rem 1.25rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--brand-green-deep);
    border-radius: 16px 16px 0 0;
}

.card-body {
    padding: 1.25rem;
}

/* Stats Cards - Brand Colored */
.card-stats {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    border: none;
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.card-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-green-deep) 0%, var(--brand-gold) 100%);
}

.card-stats:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-brand);
}

.card-stats .card-body {
    padding: 1.25rem;
}

.card-stats h3 {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--brand-green-deep);
    margin-bottom: 0.35rem;
    font-family: 'Poppins', sans-serif;
}

.card-stats p {
    font-size: 0.78rem;
    color: var(--gray-600);
    font-weight: 500;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-stats-subtitle {
    font-size: 0.7rem;
}

.stat-icon {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, var(--brand-green-subtle) 0%, var(--brand-gold-subtle) 100%);
    color: var(--brand-green-deep);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

/* ============================================================================
   BUTTONS - Modern with Brand Colors
   ============================================================================ */
.btn {
    font-weight: 500;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border: none;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: var(--shadow-xs);
    max-width: 100%;
    width: auto;
}

.btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

.btn:focus-visible {
    /* Match the global signature gold ring (this rule's higher specificity
       would otherwise suppress it and leave the old green shadow ring). */
    outline: 3px solid var(--brand-gold);
    outline-offset: 2px;
    box-shadow: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand-green-deep) 0%, var(--brand-green-medium) 100%);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--brand-green-medium) 0%, var(--brand-green-light) 100%);
    box-shadow: var(--shadow-brand);
    transform: translateY(-2px);
    color: white;
}

.btn-primary:active {
    background: var(--brand-green-deep);
    transform: translateY(1px);
    box-shadow: none;
}

.btn-success {
    background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
    color: white;
}

.btn-success:hover {
    background: linear-gradient(135deg, #059669 0%, var(--success) 100%);
    transform: translateY(-2px);
    color: white;
}

.btn-success:active {
    background: #059669;
    transform: translateY(1px);
    box-shadow: none;
}

.btn-warning {
    background: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-gold-light) 100%);
    color: var(--gray-900);
}

.btn-warning:hover {
    background: linear-gradient(135deg, var(--brand-gold-light) 0%, var(--brand-gold) 100%);
    transform: translateY(-2px);
    color: var(--gray-900);
}

.btn-warning:active {
    background: var(--brand-gold);
    transform: translateY(1px);
    box-shadow: none;
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%);
    color: white;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, var(--danger) 100%);
    transform: translateY(-2px);
    color: white;
}

.btn-danger:active {
    background: #dc2626;
    transform: translateY(1px);
    box-shadow: none;
}

.btn-outline-primary {
    border: 2px solid var(--brand-green-deep);
    color: var(--brand-green-deep);
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--brand-green-deep);
    color: white;
    border-color: var(--brand-green-deep);
}

.btn-outline-primary:active {
    background: var(--brand-green-medium);
    transform: translateY(1px);
    box-shadow: none;
}

/* ============================================================================
   TABS - Modern Clean Design
   ============================================================================ */
.nav-tabs {
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: 2rem;
    gap: 0.5rem;
}

.nav-tabs .nav-link {
    border: none;
    color: var(--gray-600);
    font-weight: 500;
    font-size: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 10px 10px 0 0;
    position: relative;
    transition: all var(--transition-fast);
}

.nav-tabs .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-green-deep) 0%, var(--brand-gold) 100%);
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.nav-tabs .nav-link:hover {
    color: var(--brand-green-deep);
    background: var(--brand-green-subtle);
}

.nav-tabs .nav-link.active {
    color: var(--brand-green-deep);
    background: transparent;
    font-weight: 600;
}

.nav-tabs .nav-link.active::after {
    transform: scaleX(1);
}

/* ============================================================================
   FORMS - Clean & Accessible
   ============================================================================ */
.form-control, .form-select {
    border: 1.5px solid var(--gray-300);
    border-radius: 8px;
    padding: 0.45rem 0.85rem;
    font-size: 0.9rem;
    color: var(--gray-900);
    transition: all var(--transition-fast);
    background: white;
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand-green-deep);
    box-shadow: 0 0 0 4px rgba(30, 86, 49, 0.1);
    outline: none;
}

.form-label {
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.input-group-text {
    background: var(--brand-green-subtle);
    border: 2px solid var(--gray-300);
    border-right: none;
    color: var(--brand-green-deep);
    font-weight: 500;
}

/* ============================================================================
   TABLES - Modern Enterprise Design
   ============================================================================ */
.table {
    font-size: 0.9rem;
}

.table thead th {
    background: linear-gradient(135deg, var(--brand-green-subtle) 0%, rgba(255, 255, 255, 0.8) 100%);
    color: var(--brand-green-deep);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--brand-green-deep);
    padding: 0.6rem 0.9rem;
}

.table tbody tr {
    border-bottom: 1px solid var(--gray-200);
    transition: all var(--transition-fast);
}

.table tbody tr:hover {
    background: var(--brand-green-subtle);
}

.table tbody td {
    padding: 0.55rem 0.9rem;
    vertical-align: middle;
    color: var(--gray-800);
}

/* ============================================================================
   BADGES - Brand Colored
   ============================================================================ */
.badge {
    font-weight: 600;
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    font-size: 0.875rem;
}

.badge-primary, .bg-primary.text-white {
    background: linear-gradient(135deg, var(--brand-green-deep) 0%, var(--brand-green-medium) 100%) !important;
    color: white !important;
}

.badge-success, .bg-success.text-white {
    /* Far stop lifted #059669 -> #0ea875. This fill now carries NEAR-BLACK ink
       (see "INK ON COLOUR-FILLED SURFACES" below) — white only ever managed
       2.54:1 on emerald — and dark ink gains contrast as the fill gets LIGHTER.
       At #059669 the small sub-label bottomed out at 4.20:1; at #0ea875 it makes
       5.12:1 and the headline number 5.81:1, both clear of AA. */
    background: linear-gradient(135deg, var(--success) 0%, #0ea875 100%) !important;
    color: var(--ink-on-light-fill) !important;
}

.badge-warning, .bg-warning.text-white {
    background: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-gold-light) 100%) !important;
    /* NOT var(--gray-900): that token inverts to #eeeef4 under [data-theme="dark"],
       which would put near-white ink on this gold fill (1.03:1). The gold fill is
       identical in both themes, so its ink must be theme-stable too. */
    color: var(--ink-on-light-fill) !important;
}

.badge-danger, .bg-danger.text-white {
    /* Deepened from (--danger -> #dc2626): white ink only made 3.76:1 on the
       #ef4444 start stop, which fails AA for the 14.4px card-header title sitting
       on this same fill. #c0392b (the deficit red already used in FinanceMain)
       through --danger-dark measures 5.44:1 -> 6.87:1 and still reads as danger. */
    background: linear-gradient(135deg, #c0392b 0%, var(--danger-dark) 100%) !important;
    color: #fff !important;
}

.badge-info, .bg-info.text-white {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-light) 100%) !important;
    /* The logo's sky blue is a LIGHT fill — white ink only reached 2.33:1 on it. */
    color: var(--ink-on-light-fill) !important;
}

/* Card headers with colors.
   These must use the SAME fill + ink pairing as the badge/card rules above, or a
   `card-header bg-success text-white` ends up with one rule's gradient and another
   rule's ink. Light fills (success / info) take near-black ink; dark fills
   (primary / danger) take white. */
.card-header.bg-primary, .card-header.bg-primary.text-white {
    background: linear-gradient(135deg, var(--brand-green-deep) 0%, var(--brand-green-medium) 100%) !important;
    color: #fff !important;
    border-bottom: none !important;
}

.card-header.bg-success, .card-header.bg-success.text-white {
    background: linear-gradient(135deg, var(--success) 0%, #0ea875 100%) !important;
    color: var(--ink-on-light-fill) !important;
    border-bottom: none !important;
}

.card-header.bg-info, .card-header.bg-info.text-white {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-light) 100%) !important;
    color: var(--ink-on-light-fill) !important;
    border-bottom: none !important;
}

.card-header.bg-danger, .card-header.bg-danger.text-white {
    background: linear-gradient(135deg, #c0392b 0%, var(--danger-dark) 100%) !important;
    color: #fff !important;
    border-bottom: none !important;
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* ============================================================================
   INK ON COLOUR-FILLED SURFACES  (UX #1, #18, #32, #71)
   ----------------------------------------------------------------------------
   Bootstrap puts `.text-white` on the CONTAINER (`.card` / `.card-header`), so
   the ink reaches the headline number only by INHERITANCE. But the global
   `h1,h2,h3,h4,h5,h6 { color: var(--brand-green-deep) }` rule near the top of
   this file is an element rule — it beats inheritance and repaints every
   heading deep green. On the surfaces we re-skin above (`.bg-primary` becomes a
   GREEN gradient) that is literally green-on-green:

       measured before:  "2,206" on .card.bg-primary  ->  1.00:1  (invisible)
                         "1,139" on .card.bg-warning  ->  1.03:1  (dark theme)
                         "1,068" on .card.bg-info     ->  1.06:1  (dark theme)

   In dark mode it is the same bug wearing a different colour: the dark heading
   rule (`[data-theme="dark"] h1..h6 { color:#a0d8b0 }`) paints the number mint,
   which then disappears on the gold / sky / emerald fills.

   Fix: pin the ink per surface and force the headings AND the muted sub-labels
   to follow it. Two ink families, chosen by how light the fill actually is:
     - DARK fills  (brand green, red, gray)         -> white ink
     - LIGHT fills (gold, sky blue, emerald)        -> near-black ink
   `--ink-on-light-fill` is declared in :root ONLY (never in the dark block) so
   it stays dark in both themes — the fills themselves do not change with theme,
   so their ink must not either. This is exactly the trap `var(--gray-900)` fell
   into below: that token inverts to #eeeef4 in dark, turning the gold tile's
   ink white.

   NOTE: `.card-header.bg-secondary` / `.bg-dark` are deliberately NOT listed.
   The generic `.card-header` rule already gives them a light green-subtle
   gradient, and their deep-green heading measures 7.70:1 — forcing white ink
   there would make them invisible. Leave them alone.
   ============================================================================ */

/* Dark fills carry white ink. */
.card.bg-primary.text-white,
.card-header.bg-primary.text-white,
.modal-header.bg-primary.text-white,
.card.bg-danger.text-white,
.card-header.bg-danger.text-white,
.modal-header.bg-danger.text-white,
.card.bg-secondary.text-white {
    --surface-ink: #ffffff;
    --surface-ink-muted: rgba(255, 255, 255, 0.90);
}

/* Light fills carry near-black ink. */
.card.bg-success.text-white,
.card-header.bg-success.text-white,
.modal-header.bg-success.text-white,
.card.bg-info.text-white,
.card-header.bg-info.text-white,
.modal-header.bg-info.text-white,
.card.bg-warning.text-white,
.card-header.bg-warning.text-white,
.modal-header.bg-warning.text-white {
    --surface-ink: var(--ink-on-light-fill);
    --surface-ink-muted: rgba(17, 24, 39, 0.90);
}

/* Paint the surface, its headings, and its muted sub-labels with that ink. */
.card.bg-primary.text-white, .card-header.bg-primary.text-white,
.card.bg-success.text-white, .card-header.bg-success.text-white,
.card.bg-info.text-white, .card-header.bg-info.text-white,
.card.bg-warning.text-white, .card-header.bg-warning.text-white,
.card.bg-danger.text-white, .card-header.bg-danger.text-white,
.card.bg-secondary.text-white,
/* headings */
.card.bg-primary.text-white h1, .card.bg-primary.text-white h2, .card.bg-primary.text-white h3,
.card.bg-primary.text-white h4, .card.bg-primary.text-white h5, .card.bg-primary.text-white h6,
.card-header.bg-primary.text-white h1, .card-header.bg-primary.text-white h2, .card-header.bg-primary.text-white h3,
.card-header.bg-primary.text-white h4, .card-header.bg-primary.text-white h5, .card-header.bg-primary.text-white h6,
.card.bg-success.text-white h1, .card.bg-success.text-white h2, .card.bg-success.text-white h3,
.card.bg-success.text-white h4, .card.bg-success.text-white h5, .card.bg-success.text-white h6,
.card-header.bg-success.text-white h1, .card-header.bg-success.text-white h2, .card-header.bg-success.text-white h3,
.card-header.bg-success.text-white h4, .card-header.bg-success.text-white h5, .card-header.bg-success.text-white h6,
.card.bg-info.text-white h1, .card.bg-info.text-white h2, .card.bg-info.text-white h3,
.card.bg-info.text-white h4, .card.bg-info.text-white h5, .card.bg-info.text-white h6,
.card-header.bg-info.text-white h1, .card-header.bg-info.text-white h2, .card-header.bg-info.text-white h3,
.card-header.bg-info.text-white h4, .card-header.bg-info.text-white h5, .card-header.bg-info.text-white h6,
.card.bg-warning.text-white h1, .card.bg-warning.text-white h2, .card.bg-warning.text-white h3,
.card.bg-warning.text-white h4, .card.bg-warning.text-white h5, .card.bg-warning.text-white h6,
.card-header.bg-warning.text-white h1, .card-header.bg-warning.text-white h2, .card-header.bg-warning.text-white h3,
.card-header.bg-warning.text-white h4, .card-header.bg-warning.text-white h5, .card-header.bg-warning.text-white h6,
.card.bg-danger.text-white h1, .card.bg-danger.text-white h2, .card.bg-danger.text-white h3,
.card.bg-danger.text-white h4, .card.bg-danger.text-white h5, .card.bg-danger.text-white h6,
.card-header.bg-danger.text-white h1, .card-header.bg-danger.text-white h2, .card-header.bg-danger.text-white h3,
.card-header.bg-danger.text-white h4, .card-header.bg-danger.text-white h5, .card-header.bg-danger.text-white h6,
.card.bg-secondary.text-white h1, .card.bg-secondary.text-white h2, .card.bg-secondary.text-white h3,
.card.bg-secondary.text-white h4, .card.bg-secondary.text-white h5, .card.bg-secondary.text-white h6 {
    color: var(--surface-ink) !important;
}

/* Muted sub-labels ("Enrolled Students", "48.37% Coverage", …). White-at-75%
   measured 1.48:1 on the gold fill and 1.51:1 on the sky fill. */
.card.bg-primary.text-white .text-white-50, .card-header.bg-primary.text-white .text-white-50,
.card.bg-success.text-white .text-white-50, .card-header.bg-success.text-white .text-white-50,
.card.bg-info.text-white .text-white-50, .card-header.bg-info.text-white .text-white-50,
.card.bg-warning.text-white .text-white-50, .card-header.bg-warning.text-white .text-white-50,
.card.bg-danger.text-white .text-white-50, .card-header.bg-danger.text-white .text-white-50,
.card.bg-secondary.text-white .text-white-50 {
    color: var(--surface-ink-muted) !important;
}


/* ============================================================================
   ALERTS - Clean Design
   ============================================================================ */
.alert {
    border: 1px solid;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
    border-left-width: 4px;
}

.alert-success {
    background: #f0fdf4;
    border-color: var(--success);
    color: #166534;
}

.alert-danger {
    background: #fef2f2;
    border-color: var(--danger);
    color: #991b1b;
}

.alert-warning {
    background: var(--brand-gold-subtle);
    border-color: var(--brand-gold);
    color: var(--brand-gold-dark);
}

.alert-info {
    background: #f0f9ff;
    border-color: var(--brand-blue);
    color: #1e40af;
}

/* ============================================================================
   MODALS - Clean Professional
   ============================================================================ */
.modal-content {
    border: none;
    border-radius: 20px;
    box-shadow: var(--shadow-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
}

.modal-header {
    background: linear-gradient(135deg, var(--brand-green-subtle) 0%, rgba(255, 255, 255, 0.5) 100%);
    border-bottom: 1px solid var(--gray-200);
    padding: 1.5rem 2rem;
    border-radius: 20px 20px 0 0;
}

.modal-title {
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--brand-green-deep);
}

/* Colored modal headers (e.g. the Bill/Receipt detail modals use bg-primary/bg-success
   with text-white). Without this, the default deep-green .modal-title color above blends
   into the green header and the title is unreadable.

   The title follows the header's --surface-ink (see "INK ON COLOUR-FILLED SURFACES"
   below), which is white on the DARK fills (bg-primary / bg-danger) and near-black on
   the LIGHT ones (bg-success / bg-info / bg-warning). Hard-coding #fff here would leave
   the "Receipt Details" title (modal-header bg-success text-white, FeesMain.js) white on
   emerald at 2.5–3.0:1 — the same failure this batch is fixing on the cards. The #fff
   fallback preserves the old behaviour for any header that sets no --surface-ink. */
.modal-header.text-white .modal-title {
    color: var(--surface-ink, #fff);
}

/* Bootstrap's .btn-close-white inverts the glyph to white — correct on the dark fills,
   invisible on the light ones. Restore the default dark glyph where the ink is dark. */
.modal-header.bg-success.text-white .btn-close-white,
.modal-header.bg-info.text-white .btn-close-white,
.modal-header.bg-warning.text-white .btn-close-white {
    filter: none;
}

.modal-body {
    padding: 2rem;
}

.modal-footer {
    border-top: 1px solid var(--gray-200);
    padding: 1.25rem 2rem;
    background: var(--gray-50);
    border-radius: 0 0 20px 20px;
}

/* ============================================================================
   PAGINATION - Modern Design
   ============================================================================ */
.pagination {
    gap: 0.375rem;
}

.page-link {
    border: 2px solid var(--gray-300);
    border-radius: 10px;
    color: var(--gray-700);
    padding: 0.625rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    background: white;
}

.page-link:hover {
    background: var(--brand-green-subtle);
    border-color: var(--brand-green-deep);
    color: var(--brand-green-deep);
}

.page-item.active .page-link {
    background: linear-gradient(135deg, var(--brand-green-deep) 0%, var(--brand-green-medium) 100%);
    border-color: var(--brand-green-deep);
    color: white;
}

/* ============================================================================
   PROGRESS BARS - Brand Styled
   ============================================================================ */
.progress {
    background: var(--gray-200);
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, var(--brand-green-deep) 0%, var(--brand-green-medium) 100%);
    transition: width var(--transition-slow);
}

.progress-bar.bg-primary {
    background: linear-gradient(90deg, var(--brand-green-deep) 0%, var(--brand-green-medium) 100%);
}

.progress-bar.bg-success {
    background: linear-gradient(90deg, var(--success) 0%, #059669 100%);
}

.progress-bar.bg-warning {
    background: linear-gradient(90deg, var(--brand-gold) 0%, var(--brand-gold-light) 100%);
}

.progress-bar.bg-danger {
    background: linear-gradient(90deg, var(--danger) 0%, #dc2626 100%);
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */
.text-primary {
    color: var(--brand-green-deep) !important;
}

.bg-primary-subtle {
    background: var(--brand-green-subtle);
}

.border-primary {
    border-color: var(--brand-green-deep);
}

/* ============================================================================
   SCROLLBAR - Custom Brand Styled
   ============================================================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--brand-green-deep) 0%, var(--brand-green-medium) 100%);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--brand-green-medium) 0%, var(--brand-green-light) 100%);
}

/* ============================================================================
   ANIMATIONS - Subtle & Professional
   ============================================================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Route-page entrance — OPACITY ONLY, deliberately no transform. A transform (even
   translateY(0)) on the .route-fade page wrapper establishes a containing block for
   position:fixed, which traps EVERY Bootstrap .modal inside the routed page and clips it to the
   page's box instead of the viewport (the "modal only covers half the page" bug). Kept SEPARATE
   from fadeIn so the shared fadeIn rise on other surfaces (.fade-in, .qf-overlay, cards) stays. */
@keyframes routeFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Signature gold focus ring — all widths (was green + mobile-only). Component
   rules with their own offsets (.home-tile etc.) still win on specificity. */
:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 2px; }

/* Route transitions: an opacity-only fade (routeFadeIn — NO transform, see above). Keyed by
   pathname in Layout so in-page ?tab= switches don't re-trigger it.

   FILL-MODE IS LOAD-BEARING — keep it `backwards`, never `both`/`forwards`.
   Making the keyframe opacity-only killed the position:fixed *containing-block* trap, but
   `both` left a second, subtler trap: an opacity animation that keeps FILLING after it ends
   is still "in effect", so Chrome keeps .route-fade as a STACKING CONTEXT even though the
   computed opacity is plainly 1. Every modal inside the routed page was therefore sealed
   inside that context, and its z-index:1060 could not out-rank the fixed navbar (z-index:1030)
   sitting outside it — the navbar painted straight over the modal's header, burying the title
   and the close button (proved with elementsFromPoint: NAV came back on top of .exp-modal-head,
   and stayed on top even when the navbar was forced to z-index:1).
   `backwards` fills only the BEFORE phase (identical visuals: opacity starts at 0, no flash),
   and nothing applies once the animation finishes — so the element drops back to a plain
   opacity:1 box, creates no stacking context, and page modals layer correctly again. */
.route-fade { animation: routeFadeIn 0.15s var(--transition-base, cubic-bezier(.4, 0, .2, 1)) backwards; }

/* Promoted from mobile-only nested media query — now covers all viewport widths. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Re-brands every legacy Bootstrap-blue .spinner-border to the brand green. */
.spinner-border.text-primary { color: var(--brand-green-deep) !important; }

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

/* ============ TOASTS (window.SMSProToast — see public/toast.js) ============ */
#vi-toast-region {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 1090; /* above modals' 1050 */
  display: flex;
  flex-direction: column;
  gap: .6rem;
  pointer-events: none;
}

.vi-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  min-width: 280px;
  max-width: 380px;
  padding: .8rem 1rem .8rem .85rem;
  background: #fff;
  border: 1px solid rgba(30, 86, 49, 0.08);
  border-left: 3px solid var(--brand-gold);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(30, 86, 49, 0.04), 0 8px 24px -10px rgba(30, 86, 49, 0.10);
  cursor: pointer;
  /* No fill-mode: a filled entrance animation would pin opacity/transform and
     block the .vi-toast--leaving exit transition on the same properties. */
  animation: vi-toast-in 0.3s var(--transition-base, cubic-bezier(.4, 0, .2, 1));
}

.vi-toast--leaving {
  opacity: 0;
  transform: translateX(12px);
  transition: opacity .35s, transform .35s;
}

.vi-toast-icon {
  margin-top: .12rem;
  font-size: 1rem;
}

.vi-toast--success .vi-toast-icon { color: var(--brand-green-medium); }
.vi-toast--error .vi-toast-icon { color: var(--danger); }
.vi-toast--info .vi-toast-icon { color: var(--brand-gold-dark); }

/* Destructive/error toasts signal with red, not gold (gold stays positive). */
.vi-toast--error { border-left-color: var(--danger); }

.vi-toast-msg {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: .85rem;
  color: var(--gray-800);
  line-height: 1.4;
  white-space: pre-line; /* several alerts carried \n line breaks */
}

@keyframes vi-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 575.98px) {
  #vi-toast-region { left: 1rem; right: 1rem; bottom: 1rem; }
  .vi-toast { min-width: 0; max-width: none; width: 100%; }
}

[data-theme="dark"] .vi-toast {
  background: #16241c;
  border-color: rgba(255, 255, 255, 0.07);
  border-left-color: var(--brand-gold);
}
[data-theme="dark"] .vi-toast--error { border-left-color: var(--danger); }
[data-theme="dark"] .vi-toast-msg { color: #d8d8e4; }

/* ============ QUICK FIND (Ctrl+K — see components/common/QuickFind.js) ============ */
.qf-backdrop {
  position: fixed; inset: 0; z-index: 1080;
  background: rgba(20, 35, 26, 0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  animation: fadeIn 0.15s var(--transition-base, cubic-bezier(.4, 0, .2, 1));
}
.qf-panel {
  width: 100%; max-width: 560px; margin: 0 1rem;
  background: #fff; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(30, 86, 49, 0.08);
  box-shadow: 0 1px 2px rgba(30, 86, 49, 0.04), 0 24px 48px -12px rgba(30, 86, 49, 0.25);
}
.qf-header {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1rem;
  background: var(--brand-green-deep);
  border-bottom: 2px solid var(--brand-gold);
}
.qf-header .fas { color: var(--brand-gold-light); }
.qf-input {
  flex: 1; border: none; outline: none; background: transparent;
  color: #fff; font-family: 'Inter', sans-serif; font-size: .95rem;
}
.qf-input::placeholder { color: rgba(255, 255, 255, 0.55); }
.qf-kbd {
  font-size: .65rem; font-weight: 700; letter-spacing: .08em;
  color: var(--brand-gold-light); border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px; padding: .1rem .35rem;
}
.qf-results { max-height: 46vh; overflow-y: auto; }
.qf-row { padding: .6rem 1rem; cursor: pointer; border-left: 3px solid transparent; }
.qf-row--active { background: var(--brand-green-subtle); border-left-color: var(--brand-gold); }
.qf-row-main { display: flex; justify-content: space-between; gap: .75rem; }
.qf-name { font-weight: 600; color: var(--gray-800); }
.qf-reg { color: var(--brand-gold-dark); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.qf-row-sub { font-size: .78rem; color: var(--gray-500); margin-top: .1rem; }
.qf-empty { padding: 1.1rem 1rem; font-size: .85rem; color: var(--gray-500); }
.qf-footer {
  padding: .5rem 1rem; font-size: .7rem; color: var(--gray-500);
  border-top: 1px solid rgba(30, 86, 49, 0.08); background: var(--gray-50);
}
/* Navbar trigger */
.qf-trigger {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255, 255, 255, 0.12); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px;
  padding: .3rem .65rem; font-size: .8rem; cursor: pointer;
}
.qf-trigger:hover { background: rgba(255, 255, 255, 0.2); }
.qf-trigger .qf-kbd { color: var(--brand-gold-light); }
@media (max-width: 575.98px) { .qf-trigger .qf-kbd { display: none; } }

/* Search-bar variant — wider, input-looking, left-aligned label */
.qf-trigger--bar {
  min-width: 200px; max-width: 280px;
  justify-content: flex-start;
  padding: .35rem .75rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.qf-trigger--bar:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
}
.qf-trigger--bar:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--brand-gold);
  border-color: var(--brand-gold);
}
.qf-trigger-label {
  flex: 1; text-align: left;
  color: rgba(255, 255, 255, 0.60);
  font-size: .82rem; font-style: normal;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 767.98px) { .qf-trigger--bar { min-width: 140px; } .qf-trigger-label { font-size: .78rem; } }
@media (max-width: 575.98px) { .qf-trigger--bar { min-width: 0; } .qf-trigger-label { display: none; } }

/* Dark mode overrides for the bar variant (navbar is green in both modes — same treatment) */
[data-theme="dark"] .qf-trigger--bar {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}
[data-theme="dark"] .qf-trigger--bar:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.28);
}
[data-theme="dark"] .qf-trigger--bar:focus-visible {
  box-shadow: 0 0 0 2px var(--brand-gold);
  border-color: var(--brand-gold);
}
[data-theme="dark"] .qf-trigger-label { color: rgba(255, 255, 255, 0.48); }

[data-theme="dark"] .qf-panel { background: #16241c; border-color: rgba(255, 255, 255, 0.07); }
[data-theme="dark"] .qf-name { color: #d8d8e4; }
[data-theme="dark"] .qf-row--active { background: rgba(58, 155, 96, 0.15); }
[data-theme="dark"] .qf-footer { background: rgba(255, 255, 255, 0.04); border-top-color: rgba(255, 255, 255, 0.07); }
[data-theme="dark"] .qf-empty, [data-theme="dark"] .qf-row-sub, [data-theme="dark"] .qf-footer { color: #a0a0b8; }

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */
@media (max-width: 991.98px) {
    body {
        font-size: 15px;
    }

    h2 {
        font-size: 1.35rem;
    }

    .card-stats h3 {
        font-size: 1.6rem;
    }

    .navbar-brand img.logo {
        height: 34px;
    }
}

@media (max-width: 576px) {
    .btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.9375rem;
    }

    .nav-tabs .nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.9375rem;
    }

    .card-stats .card-body {
        padding: 1rem;
    }
}

/* ============================================================================
   STAT CARD COLOR VARIANTS
   ============================================================================ */
.card-stats--success::before {
    background: linear-gradient(90deg, var(--success) 0%, #059669 100%);
}

.card-stats--warning::before {
    background: linear-gradient(90deg, var(--brand-gold) 0%, var(--brand-gold-light) 100%);
}

.card-stats--danger::before {
    background: linear-gradient(90deg, var(--danger) 0%, #dc2626 100%);
}

.card-stats--info::before {
    background: linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-blue-light) 100%);
}

.stat-icon--success {
    color: var(--success);
    background: rgba(16, 185, 129, 0.1);
}

.stat-icon--warning {
    color: var(--brand-gold-dark);
    background: rgba(212, 165, 58, 0.12);
}

.stat-icon--danger {
    color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
}

.stat-icon--info {
    color: var(--brand-blue);
    background: rgba(93, 180, 229, 0.1);
}

/* ============================================================================
   SIDEBAR BRAND
   ============================================================================ */
.sidebar-brand {
    padding: 1rem 1.25rem 0.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-brand-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.sidebar-brand-title {
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
}

/* ============================================================================
   SIDEBAR GROUP LABELS
   ============================================================================ */
.sidebar-group-label {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 1.25rem 1.25rem 0.375rem;
    margin-top: 0.25rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}

/* ============================================================================
   DASHBOARD LAYOUT
   ============================================================================ */
.dashboard-header {
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, var(--brand-green-deep) 0%, #153920 60%, var(--brand-green-medium) 100%);
    border-radius: 16px;
    color: white;
    position: relative;
    overflow: hidden;
}

.dashboard-header::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    border-radius: 50%;
}

.dashboard-header h2 {
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: white;
    font-weight: 700;
    font-size: 1.5rem;
}

.dashboard-header h2 i {
    font-size: 1.25rem;
    opacity: 0.85;
}

.dashboard-header p {
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    font-size: 0.9375rem;
}

.dashboard-header .dashboard-date {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

.dashboard-section {
    margin-bottom: 2rem;
}

.dashboard-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--gray-200);
}

/* ============================================================================
   MODERN DATA TABLE
   ============================================================================ */
.data-table-enhanced {
    width: 100%;
}

.table-container-virtual {
    overflow-y: auto;
    overflow-x: auto;
    position: relative;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
}

.table-virtual-spacer {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    pointer-events: none;
    z-index: 0;
}

.table-virtual-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.sticky-header {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
    box-shadow: var(--shadow-sm);
}

.data-table-enhanced .filter-row input {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
}

.data-table-enhanced .sticky-header th,
.data-table-enhanced thead th {
    background: linear-gradient(135deg, var(--brand-green-subtle) 0%, rgba(255, 255, 255, 0.9) 100%);
    color: var(--brand-green-deep);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    border-bottom: 2px solid var(--gray-200);
}

.data-table-enhanced tbody tr:hover {
    background-color: var(--brand-green-subtle);
}

.data-table-enhanced tbody td {
    border-bottom: 1px solid var(--gray-100);
}

@media (max-width: 768px) {
    .hide-mobile { display: none; }
    .data-table-enhanced .table { font-size: 11px; }
    .data-table-enhanced .btn-sm {
        min-width: 40px;
        min-height: 40px;
        padding: 0.35rem 0.5rem;
        font-size: 0.8rem;
    }
    .data-table-enhanced .btn-group {
        gap: 0.35rem;
    }
    .data-table-enhanced .filter-row input {
        font-size: 11px;
        padding: 2px 4px;
    }
}

@media (max-width: 768px) and (pointer: fine) {
    .data-table-enhanced .btn-sm {
        min-width: 0;
        min-height: 0;
        padding: 0.1rem 0.3rem;
        font-size: 0.75rem;
    }
}

.data-table-container {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    background: white;
}

.data-table-container .table {
    margin-bottom: 0;
}

.data-table-container .table thead th {
    background: linear-gradient(135deg, var(--brand-green-subtle) 0%, rgba(255, 255, 255, 0.9) 100%);
    color: var(--brand-green-deep);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    padding: 0.875rem 1rem;
    border-bottom: 2px solid var(--gray-200);
    white-space: nowrap;
}

.data-table-container .table tbody tr {
    transition: background-color var(--transition-fast);
}

.data-table-container .table tbody tr:hover {
    background-color: var(--brand-green-subtle);
}

.data-table-container .table tbody td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    font-size: 0.875rem;
    color: var(--gray-800);
    border-bottom: 1px solid var(--gray-100);
}

/* ============================================================================
   MODERN FORMS
   ============================================================================ */
.form-control, .form-select {
    border: 1.5px solid var(--gray-300);
    border-radius: 8px;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    background-color: white;
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand-green-medium);
    box-shadow: 0 0 0 3px rgba(30, 86, 49, 0.08);
}

.form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.375rem;
}

/* ============================================================================
   MODERN BADGES
   ============================================================================ */
.badge {
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

.badge.bg-success {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #059669;
}

.badge.bg-danger {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #dc2626;
}

.badge.bg-warning {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #d97706;
}

.badge.bg-secondary {
    background: var(--gray-100) !important;
    color: var(--gray-600);
}

/* ============================================================================
   PAGE TITLE BAR
   ============================================================================ */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-header h2 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.page-header .btn-group-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ============================================================================
   TOUCH TARGETS - Accessibility
   ============================================================================ */
.btn, .form-control, .form-select, .page-link {
    min-height: 44px;
}

/* ============================================================================
   LAYOUT
   ============================================================================ */
.app-container {
    padding-top: var(--navbar-height);
}

.year-selector {
    width: auto;
    min-width: 120px;
}

/* ============================================================================
   LOGIN PAGE
   ============================================================================ */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-green-deep) 0%, #153920 50%, #0d2614 100%);
    padding: 1rem;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    animation: fadeIn 0.6s ease-out;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo {
    height: 80px;
    width: auto;
    margin-bottom: 1rem;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.login-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--brand-green-deep);
    margin-bottom: 0.25rem;
}

.login-subtitle {
    color: var(--gray-500);
    font-size: 0.9375rem;
    margin-bottom: 0;
}

.login-card .form-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gray-700);
}

.login-card .input-group-text {
    background: var(--brand-green-subtle);
    border-color: var(--gray-300);
    color: var(--brand-green-deep);
}

.login-card .form-control {
    border-left: none;
}

.login-card .form-control:focus {
    border-color: var(--brand-green-medium);
    box-shadow: none;
}

.login-card .form-control:focus + .input-group-text,
.login-card .input-group:focus-within .input-group-text {
    border-color: var(--brand-green-medium);
    color: var(--brand-green-deep);
}

.login-card .btn-primary.btn-lg {
    padding: 0.75rem;
    font-size: 1.0625rem;
    font-weight: 600;
    border-radius: 12px;
}

/* ============================================================================
   EMPTY STATE (Coming Soon pages)
   ============================================================================ */
.empty-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    color: var(--gray-500);
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--brand-green-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 2rem;
    color: var(--brand-green-medium);
}

.empty-state-container h3 {
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.empty-state-container p {
    color: var(--gray-500);
    font-size: 1rem;
}

/* ============================================================================
   DARK MODE
   ============================================================================ */
[data-theme="dark"] {
    --gray-50: #1a1a2e;
    --gray-100: #1f1f35;
    --gray-200: #2a2a40;
    --gray-300: #3a3a50;
    --gray-400: #5a5a70;
    --gray-500: #8888a0;
    --gray-600: #a0a0b8;
    --gray-700: #c0c0d0;
    --gray-800: #d8d8e4;
    --gray-900: #eeeef4;

    --brand-green-subtle: rgba(30, 86, 49, 0.2);
    --brand-gold-subtle: #1a1a2e;

    /* Shared "card surface" design tokens referenced (via var(--x, #fff)-style
       fallbacks) by several components — LedgerGraph.js, PayrollRunMain.js,
       FeeLabelsMain.js, StaffMain.js and others — but never previously defined
       anywhere, light or dark. The fallback (#fff/etc.) always won, so every
       one of those call sites silently stayed white in dark mode. Defining
       them here (dark-only; light keeps using each site's own fallback,
       unchanged) makes var(--card-bg, #fff) etc. actually theme-aware without
       touching any of those call sites. PR-C Task 4 finding. */
    /* opaque: token feeds sticky cells & dialogs; rgba here would bleed (composite of rgba(30,30,50,.85) over --gray-50) */
    --card-bg: #1d1d31;
    --border-color: rgba(255, 255, 255, 0.12);
    --surface-2: rgba(255, 255, 255, 0.04);

    --glass-bg: rgba(26, 26, 46, 0.92);
    --glass-border: rgba(255, 255, 255, 0.08);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    --shadow-brand: 0 8px 16px rgba(0, 0, 0, 0.3);

    color-scheme: dark;
}

[data-theme="dark"] body {
    background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%);
    color: var(--gray-900);
}

[data-theme="dark"] .navbar {
    background: rgba(26, 26, 46, 0.95) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .navbar-brand {
    color: #a0d8b0 !important;
}

[data-theme="dark"] .navbar .dropdown-menu {
    background: rgba(30, 30, 50, 0.98);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .navbar .dropdown-item {
    color: var(--gray-700);
}

[data-theme="dark"] .navbar .dropdown-item:hover {
    background: rgba(30, 86, 49, 0.25);
    color: #a0d8b0;
}

[data-theme="dark"] .card {
    background: rgba(30, 30, 50, 0.85);
    border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .card-header {
    background: linear-gradient(135deg, rgba(30, 86, 49, 0.2) 0%, rgba(30, 30, 50, 0.5) 100%);
    border-bottom-color: rgba(255, 255, 255, 0.06);
    color: #a0d8b0;
}

[data-theme="dark"] .card-stats {
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.9) 0%, rgba(40, 40, 60, 0.85) 100%);
}

[data-theme="dark"] .card-stats h3 {
    color: var(--gray-900);
}

[data-theme="dark"] .card-stats p {
    color: var(--gray-600);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #a0d8b0;
}

[data-theme="dark"] .table {
    color: var(--gray-800);

    /* UX #17 — "every other student row in the class popup is invisible".
       Bootstrap 5.1.3 declares these state inks on `.table` and hard-codes them
       to NEAR-BLACK (#212529):
           .table { --bs-table-striped-color:#212529; --bs-table-hover-color:#212529; ... }
           .table-striped > tbody > tr:nth-of-type(odd) { color: var(--bs-table-striped-color); }
       The dark layer below only ever overrode the striped *background*, never the
       *colour* — so on every odd row the ink reverted to near-black and vanished
       into the dark surface (~1.2:1). Same trap on :hover, which repainted the
       hovered row near-black. Override the Bootstrap state vars themselves so the
       striped / hovered / active states inherit dark-theme ink (#d8d8e4 → 11.7:1). */
    --bs-table-striped-color: var(--gray-800);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-color: var(--gray-900);
    --bs-table-hover-bg: rgba(30, 86, 49, 0.18);
    --bs-table-active-color: var(--gray-900);
    --bs-table-active-bg: rgba(30, 86, 49, 0.22);
}

/* Bootstrap contextual row tints (`.table-danger` / `.table-warning` / `.table-success`,
   used by the dashboard defaulter call-list to flag urgency and by Class Bills to flag
   paid rows) ship a LIGHT pastel fill with `color:#000` baked onto the <tr>. Dropped
   into a dark table that reads as a pale band of near-black text. Re-tint them as
   translucent washes over the dark surface and let them carry dark-theme ink. — UX #1

   The state-ink vars are NOT optional here. Bootstrap declares `--bs-table-striped-color`
   / `-hover-color` / `-active-color` as `#000` on the SAME <tr> these rules target, and
   paints them from a CELL-level rule that out-specifies our row-level `color`:
       .table-striped > tbody > tr:nth-of-type(odd) > * { color: var(--bs-table-striped-color) }
   Overriding only the *-bg vars therefore leaves every odd/hovered row black-on-dark-red
   (2.1:1) while the even rows read fine — re-creating the exact bug this batch fixes.
   Override the ink vars too, so every state inherits the dark scale (11.8:1). */
[data-theme="dark"] .table-danger {
    --bs-table-bg: rgba(239, 68, 68, 0.18);
    --bs-table-striped-bg: rgba(239, 68, 68, 0.24);
    --bs-table-hover-bg: rgba(239, 68, 68, 0.28);
    --bs-table-striped-color: var(--gray-900);
    --bs-table-hover-color: var(--gray-900);
    --bs-table-active-color: var(--gray-900);
    color: var(--gray-900);
    border-color: rgba(239, 68, 68, 0.30);
}

[data-theme="dark"] .table-warning {
    --bs-table-bg: rgba(212, 165, 58, 0.18);
    --bs-table-striped-bg: rgba(212, 165, 58, 0.24);
    --bs-table-hover-bg: rgba(212, 165, 58, 0.28);
    --bs-table-striped-color: var(--gray-900);
    --bs-table-hover-color: var(--gray-900);
    --bs-table-active-color: var(--gray-900);
    color: var(--gray-900);
    border-color: rgba(212, 165, 58, 0.30);
}

[data-theme="dark"] .table-success {
    --bs-table-bg: rgba(30, 86, 49, 0.30);
    --bs-table-striped-bg: rgba(30, 86, 49, 0.36);
    --bs-table-hover-bg: rgba(30, 86, 49, 0.42);
    --bs-table-striped-color: var(--gray-900);
    --bs-table-hover-color: var(--gray-900);
    --bs-table-active-color: var(--gray-900);
    color: var(--gray-900);
    border-color: rgba(58, 155, 96, 0.30);
}

[data-theme="dark"] .table thead th {
    background: linear-gradient(135deg, rgba(30, 86, 49, 0.3) 0%, rgba(30, 30, 50, 0.8) 100%);
    color: #a0d8b0;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .table tbody tr {
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .table tbody tr:hover {
    background-color: rgba(30, 86, 49, 0.12);
}

/* The zebra wash is painted entirely by --bs-table-striped-bg above: Bootstrap renders
   it as `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)` on each cell. The old
   rule here ALSO set background-color on the <tr>, so the two stacked to ~5.9% white
   instead of the 3% either one asks for. Setting the var is enough — and it is the same
   var that carries the row INK (see the #17 note on [data-theme="dark"] .table), so
   driving the stripe from one place keeps ink and background from drifting apart. */

[data-theme="dark"] .data-table-container {
    background: rgba(30, 30, 50, 0.7);
    border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .data-table-container .table thead th {
    background: linear-gradient(135deg, rgba(30, 86, 49, 0.25) 0%, rgba(30, 30, 50, 0.9) 100%);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .data-table-container .table tbody tr:hover {
    background-color: rgba(30, 86, 49, 0.1);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: rgba(20, 20, 38, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--gray-900);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: rgba(20, 20, 38, 0.95);
    border-color: var(--brand-green-medium);
    box-shadow: 0 0 0 3px rgba(30, 86, 49, 0.3);
    color: var(--gray-900);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--gray-500);
}

[data-theme="dark"] .form-label {
    color: var(--gray-700);
}

[data-theme="dark"] .input-group-text {
    background-color: rgba(30, 30, 50, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--gray-600);
}

[data-theme="dark"] .modal-content {
    background: rgba(26, 26, 46, 0.98);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .modal-footer {
    border-top-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .modal-title {
    color: #a0d8b0;
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] .alert-info {
    background-color: rgba(93, 180, 229, 0.12);
    border-color: rgba(93, 180, 229, 0.2);
    color: #8dcef0;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

[data-theme="dark"] .text-muted {
    color: var(--gray-500) !important;
}

[data-theme="dark"] .text-dark {
    color: var(--gray-800) !important;
}

[data-theme="dark"] .bg-white {
    background-color: rgba(30, 30, 50, 0.85) !important;
}

[data-theme="dark"] .bg-light {
    background-color: rgba(26, 26, 46, 0.6) !important;
}

[data-theme="dark"] .border {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .border-bottom {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .badge.bg-success { background-color: rgba(16, 185, 129, 0.2) !important; color: #34d399; }
[data-theme="dark"] .badge.bg-danger { background-color: rgba(239, 68, 68, 0.2) !important; color: #f87171; }
[data-theme="dark"] .badge.bg-warning { background-color: rgba(245, 158, 11, 0.2) !important; color: #fbbf24; }
[data-theme="dark"] .badge.bg-info { background-color: rgba(93, 180, 229, 0.2) !important; color: #8dcef0; }
[data-theme="dark"] .badge.bg-primary { background-color: rgba(30, 86, 49, 0.3) !important; color: #a0d8b0; }
[data-theme="dark"] .badge.bg-secondary { background-color: rgba(255, 255, 255, 0.1) !important; color: var(--gray-700); }

[data-theme="dark"] .page-link {
    background-color: rgba(30, 30, 50, 0.8);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--gray-700);
}

[data-theme="dark"] .page-link:hover {
    background-color: rgba(30, 86, 49, 0.2);
    color: #a0d8b0;
}

[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--brand-green-deep);
    border-color: var(--brand-green-deep);
}

[data-theme="dark"] .page-item.disabled .page-link {
    background-color: rgba(20, 20, 38, 0.5);
    color: var(--gray-500);
}

[data-theme="dark"] .list-group-item {
    background-color: rgba(30, 30, 50, 0.6);
    border-color: rgba(255, 255, 255, 0.06);
    color: var(--gray-800);
}

[data-theme="dark"] .spinner-border {
    color: #a0d8b0;
}

[data-theme="dark"] .sidebar-section-label {
    color: rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .dashboard-header {
    background: linear-gradient(135deg, #0f2a1a 0%, #1a3d2a 60%, #0d3320 100%);
}

[data-theme="dark"] .dashboard-header h2 {
    color: #c0e8d0;
}

[data-theme="dark"] .dashboard-header p {
    color: rgba(192, 232, 208, 0.6);
}

[data-theme="dark"] .login-page {
    background: linear-gradient(135deg, #0a1628 0%, #0f1f30 50%, #0a1220 100%);
}

[data-theme="dark"] .login-card {
    background: rgba(30, 30, 50, 0.95);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .login-title {
    color: #a0d8b0;
}

[data-theme="dark"] .login-card .input-group-text {
    background: rgba(30, 86, 49, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
    color: #a0d8b0;
}

[data-theme="dark"] .empty-state-icon {
    background: rgba(30, 86, 49, 0.2);
    color: #a0d8b0;
}

[data-theme="dark"] .mobile-overlay.show {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Dark mode toggle button */
.theme-toggle {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--gray-600);
    font-size: 1.125rem;
    min-height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.theme-toggle:hover {
    background: rgba(102, 126, 234, 0.1);
    color: var(--brand-green-deep);
}

[data-theme="dark"] .theme-toggle {
    color: #fbbf24;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .theme-toggle:hover {
    background: rgba(251, 191, 36, 0.1);
    color: #fcd34d;
}

/* ============================================================================
   DARK MODE — CONTRAST FIXES
   Elements that kept light-mode (dark) colors and rendered dark-on-dark.
   ============================================================================ */

/* Base stat icon: gradient resolved to near-black with dark-green glyph.
   The colored variants (--success/--danger/etc.) already read fine. */
[data-theme="dark"] .stat-icon {
    background: linear-gradient(135deg, rgba(160, 216, 176, 0.18) 0%, rgba(160, 216, 176, 0.08) 100%);
    color: #a0d8b0;
}

/* Bootstrap text utilities used for the dashboard "Combined Summary" numbers.
   .text-primary is forced to brand green (dark) site-wide, so it must be
   re-lightened here; the others are brightened for legibility on dark cards. */
[data-theme="dark"] .text-primary { color: #8fd6a6 !important; }
[data-theme="dark"] .text-success { color: #34d399 !important; }
[data-theme="dark"] .text-info    { color: #67c7ef !important; }
[data-theme="dark"] .text-warning { color: #fbbf24 !important; }
[data-theme="dark"] .text-danger  { color: #f87171 !important; }

/* Sticky table header had a hard-coded white background */
[data-theme="dark"] .sticky-header {
    background: #1e1e32;
}

/* Academic students grouped (Section › Class) accordion. The headers previously
   used hardcoded LIGHT backgrounds (#f8f9fa) + deep-green title text, so in dark
   mode the near-white row text rendered invisibly on light bars and the section
   titles were dark-green-on-dark. These classes are theme-aware in both modes. */
.student-section-head {
    background: var(--brand-green-subtle);   /* #e8f5ed light · translucent green dark */
    cursor: pointer;
}
.student-section-head .student-section-title { color: var(--brand-green-deep); }
.student-class-head {
    background: var(--gray-100);              /* #f5f5f5 light · #1f1f35 dark */
    cursor: pointer;
    transition: background var(--transition-fast, 150ms) ease;
}
.student-class-head:hover { background: var(--gray-200); }
[data-theme="dark"] .student-section-head {
    background: linear-gradient(135deg, rgba(30, 86, 49, 0.35) 0%, rgba(30, 30, 50, 0.55) 100%);
}
[data-theme="dark"] .student-section-head .student-section-title { color: #a0d8b0; }

/* Outline buttons had no dark-mode treatment. .btn-outline-primary is themed
   deep-green (#1e5631) in BOTH modes, so it rendered dark-green-on-dark — e.g.
   the Grouped/Table toggle's inactive state and the row View buttons. Lighten
   the rest state in dark mode; hover/active keep a filled, readable look.
   (.btn-outline-secondary / -danger fell back to Bootstrap defaults — also too
   dark/low-contrast on the dark surface.) */
[data-theme="dark"] .btn-outline-primary { color: #a0d8b0; border-color: rgba(160, 216, 176, 0.45); }
[data-theme="dark"] .btn-outline-primary:hover { background: var(--brand-green-medium); color: #fff; border-color: var(--brand-green-medium); }
[data-theme="dark"] .btn-outline-secondary { color: var(--gray-700); border-color: rgba(255, 255, 255, 0.22); }
[data-theme="dark"] .btn-outline-secondary:hover { background: rgba(255, 255, 255, 0.08); color: var(--gray-900); }
[data-theme="dark"] .btn-outline-danger { color: #f87171; border-color: rgba(248, 113, 113, 0.5); }
[data-theme="dark"] .btn-outline-danger:hover { background: rgba(248, 113, 113, 0.16); color: #fca5a5; }

/* ============================================================================
   REPORTS: DiscountReport / UnbilledStudentsPage / DataIntegrityReport
   (PR-C Task 2 — inline light-color sweep). Same problem/fix shape as
   .student-section-head above: hardcoded light backgrounds + deep-green/gold
   text went unreadable on the dark card surface. Extracted to classes so the
   light-mode literal values are unchanged and dark mode gets a tuned override.
   ============================================================================ */

/* Discount Report per-section header (extracted from inline styles for dark mode) */
.discount-section-header { cursor: pointer; background: #eef3ee; border-left: 4px solid #1e5631; }
.discount-section-header strong { color: #1e5631; }
[data-theme="dark"] .discount-section-header { background: rgba(30, 86, 49, 0.22); border-left-color: #4a9e60; }
[data-theme="dark"] .discount-section-header strong { color: #8fd0a0; }

/* Discount Report money callouts (summary band + class-group header) + the
   projected-income share-of-income bar track. */
.discount-money-green { color: #1e5631; }
[data-theme="dark"] .discount-money-green { color: #8fd0a0; }
.discount-share-track { background: #e9ecef; }
[data-theme="dark"] .discount-share-track { background: rgba(255, 255, 255, 0.10); }

/* Unbilled Students section header (mirrors .discount-section-header — same
   pattern, this page's own light literal values) and class-group money. */
.unbilled-section-header { cursor: pointer; background: #e8f5ed; border-left: 4px solid #1e5631; }
.unbilled-section-header-icon, .unbilled-section-header-label { color: #1e5631; }
.unbilled-section-header-revenue { color: #9a7212; }
[data-theme="dark"] .unbilled-section-header { background: rgba(30, 86, 49, 0.22); border-left-color: #4a9e60; }
[data-theme="dark"] .unbilled-section-header-icon, [data-theme="dark"] .unbilled-section-header-label { color: #8fd0a0; }
[data-theme="dark"] .unbilled-section-header-revenue { color: #e0b84a; }
.unbilled-money-green { color: #1e5631; }
[data-theme="dark"] .unbilled-money-green { color: #8fd0a0; }

/* Data Integrity Report: reclassify gold-accent pill + "Apply" button. Gold
   stays an accent (border/text) with a neutral/transparent fill in both modes;
   dark mode only lightens the gold text so it clears contrast on a dark card. */
.dintegrity-override-marker { background: rgba(212, 165, 58, .10); color: #9a7212; border: 1px solid rgba(212, 165, 58, .55); }
[data-theme="dark"] .dintegrity-override-marker { background: rgba(212, 165, 58, .16); color: #e0b84a; border-color: rgba(212, 165, 58, .45); }
.dintegrity-reclassify-apply-btn { background: transparent; border: 1px solid rgba(212, 165, 58, .7); color: #9a7212; }
[data-theme="dark"] .dintegrity-reclassify-apply-btn { border-color: rgba(212, 165, 58, .55); color: #e0b84a; }

/* ============================================================================
   SNAPSHOTS: SnapshotsMain / SnapshotCompare / SnapshotInspect /
   SnapshotDeleteModal / SnapshotRollbackModal (PR-C Task 3 — inline light-
   color sweep). These pages hand-roll a "Verdant card" look entirely with
   inline styles (no Bootstrap .card), so none of it inherited dark coverage.
   Surface backgrounds/borders route through CSS custom properties with the
   OLD literal kept as the var() fallback, so light mode is byte-for-byte
   unchanged; a `.snap-scope` class on each page's root element supplies the
   dark values (same shape as the .card / .btn-outline-* treatment above).
   Two solid #fdecea fills (error banner, danger pill) are extracted to
   plain classes, Task-2 style, since they don't need the var() indirection.
   brand-green-deep is intentionally NOT inverted globally (Task 1), so the
   headings/labels/table-headers here that set `color: GREEN` inline (which
   no CSS class can out-specificity) route through the --snap-text-green
   fallback chain instead; the one spot that must KEEP the fixed deep green
   (SnapshotInspect's selected-table chip: green fill + white text) was
   changed to the literal hex so it stays immune to this override. --danger's
   real value (#ef4444, not its component-local #c0392b fallback) already
   clears ~4.4:1 on the dark surface, so DANGER text was left untouched.
   ============================================================================ */

.snap-error-banner { background: #fdecea; border: 1px solid rgba(192, 57, 43, .2); }
[data-theme="dark"] .snap-error-banner { background: rgba(200, 90, 90, 0.14); border-color: rgba(200, 90, 90, 0.38); }

.snap-pill-danger { background: #fdecea; }
[data-theme="dark"] .snap-pill-danger { background: rgba(200, 90, 90, 0.18); }

/* ── Snapshots page (Database Snapshots / Inspect / Compare) ──────────────── */
.snap-card {
    background: var(--snap-surface-bg, #fff);
    border-radius: 14px;
    border: 1px solid var(--snap-card-border, rgba(30, 86, 49, .08));
    box-shadow: 0 1px 2px rgba(30, 86, 49, .04), 0 8px 24px -10px rgba(30, 86, 49, .10);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.snap-microcap {
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: .7rem;
    font-weight: 700;
    color: var(--brand-gold-dark);
    margin-bottom: .6rem;
}
/* Ghost button — the default action. Gold only enters on hover (border) — never as fill. */
.snap-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 34px;
    padding: .25rem .8rem;
    border-radius: 8px;
    border: 1px solid var(--snap-btn-border, rgba(30, 86, 49, .25));
    background: var(--snap-surface-bg, #fff);
    color: var(--snap-text-green, var(--brand-green-deep));
    font-weight: 600;
    font-size: .82rem;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.snap-btn:hover:not(:disabled) { background: var(--brand-green-subtle); border-color: var(--brand-gold); }
.snap-btn:disabled { opacity: .55; cursor: default; }
/* Primary button — green carries the substance, gold is only the focus/hover ring. */
.snap-btn-primary {
    background: var(--brand-green-deep);
    border-color: var(--brand-green-deep);
    color: #fff;
    min-height: 40px;
    padding: .4rem 1.1rem;
    font-weight: 700;
    font-size: .88rem;
}
.snap-btn-primary:hover:not(:disabled) {
    background: var(--brand-green-medium);
    border-color: var(--brand-green-medium);
    box-shadow: 0 0 0 3px rgba(212, 165, 58, .45);
}
.snap-btn-danger { color: var(--danger, #c0392b); border-color: rgba(192, 57, 43, .35); }
.snap-btn-danger:hover:not(:disabled) { background: rgba(192, 57, 43, .08); border-color: var(--danger, #c0392b); }
.snap-hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
/* Data table — green microcap headers, subtle hover, dark-mode aware. */
.snap-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.snap-table th {
    text-align: left;
    padding: .55rem .75rem;
    border-bottom: 2px solid rgba(30, 86, 49, .1);
    color: var(--snap-text-green, var(--brand-green-deep));
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.snap-table td { padding: .55rem .75rem; border-bottom: 1px solid rgba(30, 86, 49, .06); }
.snap-table tbody tr { transition: background var(--transition-fast); }
.snap-table tbody tr:hover { background: var(--brand-green-subtle); }
[data-theme="dark"] .snap-table tbody tr:hover { background: rgba(255, 255, 255, .04); }

[data-theme="dark"] .snap-scope {
    --snap-text-green: #8fd0a0;
    --snap-surface-bg: rgba(30, 30, 50, 0.85);
    --snap-card-border: rgba(255, 255, 255, 0.06);
    --snap-btn-border: rgba(255, 255, 255, 0.18);
}

/* ============================================================================
   ADMIN / AUTH / FEES / MISC — PR-C Task 4 inline light-color sweep.
   AccessLogMain.js and AccountantsMain.js share the exact same hand-rolled
   card/btnGhost/GREEN-const shape Task 3 fixed in the snapshots pages (own
   scope per Task 3's own follow-up note: reuse the technique, new prefix,
   don't rename .snap-scope). DeviceEnroll.js and LocationGate.js render
   pre-login/pre-App-shell but data-theme is already applied to <html> at
   boot, so they need the same treatment; each is a one-off single card, so
   each gets its own tiny scope instead of joining .adminx-scope.
   ============================================================================ */

[data-theme="dark"] .adminx-scope {
    --adminx-text-green: #8fd0a0;
    --adminx-surface-bg: rgba(30, 30, 50, 0.85);
    --adminx-card-border: rgba(255, 255, 255, 0.06);
    --adminx-btn-border: rgba(255, 255, 255, 0.18);
    --adminx-danger-bg: rgba(200, 90, 90, 0.18);
}

[data-theme="dark"] .device-enroll-scope {
    --de-text-green: #8fd0a0;
    --de-surface-bg: rgba(30, 30, 50, 0.85);
    --de-card-border: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .location-gate-scope {
    --locg-text-green: #8fd0a0;
    --locg-card-bg: rgba(30, 30, 50, 0.85);
    --locg-card-border: rgba(255, 255, 255, 0.06);
    /* AcquiringOverlay's near-white full-bleed backdrop (rgba(255,255,255,.96))
       would otherwise flash a blinding white screen on every dark-mode login. */
    --locg-overlay-bg: rgba(15, 15, 30, 0.96);
}

/* ClassMonthBillsView.js — the paid/extra-bill row highlight tints, the sticky
   header cells, and the "Total Payable" gold figure are all inline-styled
   (heavily-edited file; PR-C Task 4 only swapped the literal colors for
   var()-fallback tokens in place, zero logic touched). */
[data-theme="dark"] .class-month-bills-view {
    --cmb-paid-tint: rgba(16, 185, 129, 0.18);
    --cmb-extra-tint: rgba(212, 165, 58, 0.16);
    --cmb-default-surface: rgba(30, 30, 50, 0.85);
    --cmb-default-text: #eeeef4;
    --cmb-row-border: rgba(255, 255, 255, 0.14);
    --cmb-thead-bg: #1f2e24;
    --cmb-gold-text: #e0b84a;
}

/* ============================================================================
   HOME LAUNCHER + SIDEBAR POLISH  (added with /home tile launcher PR)
   ============================================================================ */

/* --- Sidebar section headers ("MAIN NAVIGATION" / "ACCOUNT SETTINGS") ----- */
.sidebar-section {
    padding: 1.05rem 1.25rem .35rem;
}
.sidebar-section + .sidebar-group { border-top: none; }

.sidebar-section-label {
    font-family: 'Inter', sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(212, 165, 58, .78);
    display: inline-block;
    padding-bottom: .35rem;
    position: relative;
}
.sidebar-section-label::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 1.5px;
    background: linear-gradient(90deg, var(--brand-gold) 0%, transparent 100%);
    border-radius: 1px;
}
/* In the collapsed rail, hide the section text but keep a centered gold rule. */
@media (min-width: 992px) {
    .app-container.sidebar-collapsed .sidebar-section { padding: .45rem 0 .25rem; text-align: center; }
    .app-container.sidebar-collapsed .sidebar-section-label { font-size: 0; padding-bottom: 0; }
    .app-container.sidebar-collapsed .sidebar-section-label::after {
        position: static;
        display: block;
        margin: 0 auto;
        width: 28px;
        background: linear-gradient(90deg, transparent 0%, rgba(212, 165, 58, .6) 50%, transparent 100%);
    }
}

/* --- Group label: from tiny section caption -> clickable nav row -------- */
/* Scoped to `.sidebar .sidebar-group-label` so the override survives even if
   the original tiny-caption rule is later re-scoped or moved. */
.sidebar .sidebar-group-label {
    color: rgba(255, 255, 255, .92);
    font-size: .9rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    /* Harmless on the current div[role=button]; kept so the label never
       inherits Bootstrap's anchor underline if it's ever rendered as <a>. */
    text-decoration: none;
    padding: .55rem .9rem;
    margin: .15rem .6rem;
    min-height: 44px;  /* WCAG 2.5.5 touch target */
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    gap: .7rem;
    cursor: pointer;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition: all .2s var(--transition-base);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.sidebar .sidebar-group-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 2px;
    background: var(--brand-gold);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .25s var(--transition-base);
}
.sidebar .sidebar-group-label:hover {
    background: rgba(255, 255, 255, .06);
    color: white;
}
.sidebar .sidebar-group.active > .sidebar-group-label,
.sidebar .sidebar-group.open > .sidebar-group-label {
    background: linear-gradient(90deg, rgba(212, 165, 58, .16) 0%, rgba(212, 165, 58, .04) 100%);
    color: white;
    font-weight: 600;
}
.sidebar .sidebar-group.active > .sidebar-group-label::before,
.sidebar .sidebar-group.open > .sidebar-group-label::before {
    transform: scaleY(1);
}
/* Denser pointer-fine targets, keep 44px for touch (mirrors existing rule) */
@media (pointer: fine) {
    .sidebar .sidebar-group-label { min-height: 38px; }
}
.sidebar .sidebar-group-icon {
    width: 22px;
    flex-shrink: 0;
    text-align: center;
    color: rgba(255, 255, 255, .78);
    font-size: 1rem;
    transition: color .2s var(--transition-base);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18));
}
.sidebar .sidebar-group-label:hover .sidebar-group-icon { color: var(--brand-gold-light); }
.sidebar .sidebar-group-text { flex: 1; }

/* Chevron at the end of the group label */
.sidebar-group-chevron {
    margin-left: auto;
    font-size: .65rem;
    color: rgba(255, 255, 255, .55);
    transition: transform .25s cubic-bezier(.34, 1.4, .64, 1), color .2s var(--transition-base);
    flex-shrink: 0;
}
.sidebar-group-label:hover .sidebar-group-chevron { color: var(--brand-gold-light); }
.sidebar-group.open > .sidebar-group-label .sidebar-group-chevron {
    transform: rotate(180deg);
    color: var(--brand-gold-light);
}
@media (min-width: 992px) {
    .app-container.sidebar-collapsed .sidebar-group-chevron { display: none; }
    /* Collapsed rail: keep group-label hidden (existing rule already does this) */
}

/* --- Sidebar child items: gold-dot bullet, refined spacing -------------- */
/* These override the default .sidebar .nav-link::before (gold left-edge bar)
   ONLY for items inside a group's children list — top-level group labels
   keep the existing bar treatment. */
.sidebar .sidebar-group-items .nav-link {
    padding-left: 2rem;
    font-size: .85rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .72);
    margin: .08rem .6rem;
    min-height: 44px;  /* WCAG 2.5.5 touch target */
}
@media (pointer: fine) {
    .sidebar .sidebar-group-items .nav-link { min-height: 36px; }
}
.sidebar .sidebar-group-items .nav-link::before {
    content: '';
    position: absolute;
    left: .85rem;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    transform: translateY(-50%) scaleY(1);
    transition: all .2s var(--transition-base);
}
.sidebar .sidebar-group-items .nav-link:hover {
    background: rgba(255, 255, 255, .05);
    color: white;
    transform: none;
}
.sidebar .sidebar-group-items .nav-link:hover::before {
    background: var(--brand-gold-light);
    box-shadow: 0 0 8px rgba(212, 165, 58, .55);
}
.sidebar .sidebar-group-items .nav-link.active {
    background: linear-gradient(90deg, rgba(212, 165, 58, .18) 0%, transparent 100%);
    color: white;
    font-weight: 600;
    box-shadow: none;
}
.sidebar .sidebar-group-items .nav-link.active::before {
    background: var(--brand-gold);
    box-shadow: 0 0 10px rgba(212, 165, 58, .8);
    width: 6px;
    height: 6px;
}
.sidebar .sidebar-group-items .nav-link > i:not(.sidebar-group-chevron) { display: none; }

/* Inline expand/collapse animation on children list */
.sidebar-group-items {
    overflow: hidden;
    max-height: 0;
    transition: max-height .35s var(--transition-base);
}
/* Open-group clamp must exceed the TALLEST group or its trailing items are clipped
   and unreachable (the box is overflow:hidden). The Fees group is the longest — 13
   items (~500px) for admin — and 420px hid its last items (Installment Monitor,
   Discount Report, etc.). 900px clears the tallest group with headroom; the sidebar
   itself is overflow-y:auto, so anything beyond the viewport scrolls normally. */
.sidebar-group.open .sidebar-group-items { max-height: 900px; }


/* ============================================================================
   HOME LAUNCHER PAGE
   ============================================================================ */

.home-hero {
    position: relative;
    padding: 1.75rem 2rem;
    border-radius: 18px;
    background:
        radial-gradient(600px 200px at 90% 0%, rgba(212, 165, 58, .10), transparent 60%),
        linear-gradient(135deg, #ffffff 0%, var(--brand-green-subtle) 100%);
    border: 1px solid rgba(30, 86, 49, .08);
    box-shadow: 0 1px 2px rgba(30, 86, 49, .04), 0 18px 40px -24px rgba(30, 86, 49, .18);
    overflow: hidden;
    margin-bottom: 2rem;
}
.home-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-green-deep) 0%, var(--brand-gold) 60%, transparent 100%);
}
.home-hero-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--brand-gold-dark);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.home-hero-eyebrow::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 1.5px;
    background: var(--brand-gold);
}
.home-hero-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.85rem;
    margin: .5rem 0 .25rem;
    color: var(--brand-green-deep);
    letter-spacing: -.02em;
}
.home-hero-lead {
    color: var(--gray-700);
    font-size: .95rem;
    max-width: 640px;
    margin: 0;
}
.home-hero-lead strong {
    color: var(--brand-green-deep);
    font-weight: 600;
}
.home-hero-meta {
    display: flex;
    gap: 1.75rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(30, 86, 49, .14);
    flex-wrap: wrap;
}
.home-hero-meta-item {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}
.home-hero-meta-item .k {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--gray-600);
    font-weight: 600;
}
.home-hero-meta-item .v {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--brand-green-deep);
}

/* --- Section band ------------------------------------------------------ */
.home-section { margin-bottom: .25rem; }
.home-section-band {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0 1rem;
}
.home-section-caption {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--brand-green-deep);
    letter-spacing: -.005em;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}
.home-section-marker {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--brand-gold);
    box-shadow: 0 0 0 3px rgba(212, 165, 58, .18);
}
.home-section-count {
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--brand-gold-subtle);
    color: var(--brand-gold-dark);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid rgba(212, 165, 58, .25);
}
.home-section-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(30, 86, 49, .18) 0%, transparent 100%);
}

/* --- Tile grid + tile card ---------------------------------------------- */
.home-tile-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
@media (min-width: 1500px) {
    .home-tile-grid { grid-template-columns: repeat(6, 1fr); }
}

.home-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.4rem 1rem 1.15rem;
    background: white;
    border-radius: 14px;
    border: 1px solid rgba(30, 86, 49, .06);
    box-shadow: 0 1px 2px rgba(30, 86, 49, .04), 0 8px 24px -10px rgba(30, 86, 49, .10);
    text-decoration: none;
    color: inherit;
    transition: transform .25s var(--transition-base), box-shadow .3s var(--transition-base), border-color .25s var(--transition-base);
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px);
    animation: home-tile-in .5s var(--transition-base) forwards;
}
.home-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--brand-gold) 50%, transparent 100%);
    opacity: 0;
    transition: opacity .25s var(--transition-base);
}
.home-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(30, 86, 49, .06), 0 18px 36px -12px rgba(30, 86, 49, .18);
    border-color: rgba(212, 165, 58, .4);
}
.home-tile:hover::before { opacity: 1; }
.home-tile:hover .home-tile-icon { transform: scale(1.06); }
.home-tile:active { transform: translateY(-1px) scale(.99); }
.home-tile:focus-visible {
    outline: 3px solid var(--brand-gold);
    outline-offset: 3px;
}

.home-tile-icon {
    width: 60px;
    height: 60px;
    margin-bottom: .95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s cubic-bezier(.34, 1.4, .64, 1);
}
.home-tile-icon svg { width: 100%; height: 100%; }
.home-tile-label {
    font-family: 'Inter', sans-serif;
    font-size: .87rem;
    font-weight: 600;
    color: var(--gray-800);
    text-align: center;
    line-height: 1.3;
}
.home-tile-sub {
    font-size: .7rem;
    color: var(--gray-600);
    margin-top: .25rem;
    font-weight: 500;
    letter-spacing: .01em;
}

@keyframes home-tile-in {
    to { opacity: 1; transform: translateY(0); }
}

/* --- Mobile / tablet --------------------------------------------------- */
@media (max-width: 991.98px) {
    .home-hero { padding: 1.25rem 1.25rem; border-radius: 14px; }
    .home-hero-title { font-size: 1.4rem; }
    .home-hero-lead { font-size: .88rem; }
    .home-hero-meta { gap: .9rem; }
    .home-hero-meta-item { min-width: 42%; }
    .home-section-band { margin: 1.5rem 0 .85rem; }
    .home-tile-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
    .home-tile { padding: 1.1rem .6rem .9rem; }
    .home-tile-icon { width: 52px; height: 52px; margin-bottom: .7rem; }
    .home-tile-label { font-size: .82rem; }
    .home-tile-sub { font-size: .65rem; }
}
@media (max-width: 420px) {
    .home-hero-title { font-size: 1.25rem; }
    .home-hero-meta-item { min-width: 100%; }
}

@media (max-width: 767.98px) {
    .home-hero { padding: 0.9rem 1rem; }
    .home-hero-lead { display: none; }
    .home-hero-meta { margin-top: .4rem; gap: .5rem 1rem; padding-top: .4rem; }
    .home-hero-meta-item { min-width: 0; }
    .home-hero-meta-item .k { display: none; }
}

/* Tiny screens (Galaxy Fold ~280-320px): let the section band wrap so the
   count pill doesn't shove the caption onto a second line. */
@media (max-width: 360px) {
    .home-section-band { flex-wrap: wrap; gap: .4rem .6rem; }
    .home-section-rule { flex: 1 0 100%; }
}

/* Mobile: a lone trailing tile (odd-count section in 2-col grid) looks
   abandoned. Span it to fill the row so the layout reads intentional. */
@media (max-width: 991.98px) {
    .home-tile-grid > .home-tile:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* --- Dark mode --------------------------------------------------------- */
[data-theme="dark"] .home-hero {
    background:
        radial-gradient(600px 200px at 90% 0%, rgba(212, 165, 58, .10), transparent 60%),
        linear-gradient(135deg, #1a2620 0%, #14201a 100%);
    border-color: rgba(255, 255, 255, .06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -24px rgba(0, 0, 0, .5);
}
[data-theme="dark"] .home-hero-title { color: #f0e9d5; }
[data-theme="dark"] .home-hero-lead { color: rgba(255, 255, 255, .72); }
[data-theme="dark"] .home-hero-lead strong { color: var(--brand-gold-light); }
[data-theme="dark"] .home-hero-meta { border-top-color: rgba(255, 255, 255, .08); }
[data-theme="dark"] .home-hero-meta-item .k { color: rgba(255, 255, 255, .45); }
[data-theme="dark"] .home-hero-meta-item .v { color: #f0e9d5; }
[data-theme="dark"] .home-section-caption { color: #f0e9d5; }
[data-theme="dark"] .home-section-rule { background: linear-gradient(90deg, rgba(255, 255, 255, .14) 0%, transparent 100%); }
[data-theme="dark"] .home-tile {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .07);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 14px 32px -16px rgba(0, 0, 0, .6);
}
[data-theme="dark"] .home-tile:hover {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(212, 165, 58, .42);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 22px 44px -16px rgba(0, 0, 0, .7);
}
[data-theme="dark"] .home-tile-label { color: #f0e9d5; }
[data-theme="dark"] .home-tile-sub { color: rgba(255, 255, 255, .5); }
[data-theme="dark"] .sidebar-section-label { color: rgba(230, 197, 99, .78); }

/* ============================================================================
   TileLauncher — reusable inline tile-launcher pattern
   ----------------------------------------------------------------------------
   Used inside "report-heavy" sub-tabs (Data Integrity, Fee Reports, future
   Academic Reports …) so the hosting page can keep its filters + KPIs visible
   while tiles drive sub-report selection. Visual language mirrors .home-tile*
   (gold top accent, layered green-tinted shadow, spring icon scale) at a
   smaller default footprint suitable for inline use. The .is-md modifier
   widens the grid to match the full-bleed Home tile sizing.

   Important: tiles are plain <button>s with their own border + shadow, NOT
   the global .card class — .card adds backdrop-filter, which creates a
   stacking context and traps descendant popovers (we hit and fixed this
   exact bug earlier in this branch on .defaulters-colpicker-menu). The
   defensive `z-index: 1` on each tile leaves room for higher-z descendants
   (dropdowns, tooltips) to overflow cleanly.
   ============================================================================ */

.tile-launcher { display: block; }

.tile-launcher-section { margin-bottom: .25rem; }
.tile-launcher-section + .tile-launcher-section { margin-top: 1.25rem; }
.tile-launcher-section-band {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: .25rem 0 .85rem;
}
.tile-launcher-section-caption {
    font-family: 'Inter', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--brand-gold-dark);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.tile-launcher-section-marker {
    width: 18px;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-gold) 0%, transparent 100%);
    border-radius: 1px;
}
.tile-launcher-section-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(30, 86, 49, .14) 0%, transparent 100%);
}

.tile-launcher-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.tile-launcher-tile {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.1rem .8rem .95rem;
    background: white;
    border-radius: 12px;
    border: 1px solid rgba(30, 86, 49, .06);
    box-shadow: 0 1px 2px rgba(30, 86, 49, .04), 0 6px 18px -10px rgba(30, 86, 49, .10);
    color: inherit;
    cursor: pointer;
    transition: transform .25s var(--transition-base),
                box-shadow .3s var(--transition-base),
                border-color .25s var(--transition-base);
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px);
    animation: tile-launcher-in .5s var(--transition-base) forwards;
    /* button reset so <button class="tile-launcher-tile"> looks like the
       <a> in HomeMain — same affordance, same focus ring. */
    font: inherit;
    text-align: center;
    appearance: none;
    width: 100%;
}
.tile-launcher-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--brand-gold) 50%, transparent 100%);
    opacity: 0;
    transition: opacity .25s var(--transition-base);
}
.tile-launcher-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(30, 86, 49, .06), 0 14px 28px -12px rgba(30, 86, 49, .18);
    border-color: rgba(212, 165, 58, .4);
}
.tile-launcher-tile:hover::before { opacity: 1; }
.tile-launcher-tile:hover .tile-launcher-tile-icon { transform: scale(1.06); }
.tile-launcher-tile:active { transform: translateY(-1px) scale(.99); }
.tile-launcher-tile:focus-visible {
    outline: 3px solid var(--brand-gold);
    outline-offset: 3px;
}

.tile-launcher-tile-icon {
    width: 48px;
    height: 48px;
    margin-bottom: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s cubic-bezier(.34, 1.4, .64, 1);
}
.tile-launcher-tile-icon svg { width: 100%; height: 100%; }
.tile-launcher-tile-label {
    font-family: 'Inter', sans-serif;
    font-size: .85rem;
    font-weight: 600;
    color: var(--gray-800);
    line-height: 1.3;
}
.tile-launcher-tile-sub {
    font-size: .68rem;
    color: var(--gray-600);
    margin-top: .25rem;
    font-weight: 500;
    letter-spacing: .01em;
}
.tile-launcher-tile-badge {
    position: absolute;
    top: .55rem;
    right: .55rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .12rem .45rem;
    border-radius: 999px;
    background: var(--brand-gold-subtle);
    color: var(--brand-gold-dark);
    border: 1px solid rgba(212, 165, 58, .3);
}
.tile-launcher-tile-badge.is-danger {
    background: rgba(212, 60, 60, .08);
    color: var(--danger-dark, #b13b3b);
    border-color: rgba(212, 60, 60, .25);
}

/* Breadcrumb shown above the rendered child when a tile is selected. The
   back button uses a pill style consistent with our chip pattern; the trail
   echoes the page hero so users feel "still in the same context, one level
   deeper". */
.tile-launcher-breadcrumb {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .35rem 0 .65rem;
    margin-bottom: .85rem;
    border-bottom: 1px solid rgba(30, 86, 49, .08);
    flex-wrap: wrap;
}
.tile-launcher-breadcrumb-back {
    appearance: none;
    background: none;
    border: 1px solid rgba(30, 86, 49, .14);
    color: var(--brand-green-deep);
    border-radius: 999px;
    padding: .32rem .7rem;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: all var(--transition-fast);
    min-height: 32px;
}
.tile-launcher-breadcrumb-back:hover {
    border-color: var(--brand-gold);
    color: var(--brand-gold-dark);
    background: var(--brand-gold-subtle);
}
.tile-launcher-breadcrumb-back:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: 2px;
}
.tile-launcher-breadcrumb-trail {
    font-size: .85rem;
    color: var(--gray-700);
    font-weight: 500;
    line-height: 1.3;
}
.tile-launcher-breadcrumb-trail .crumb-sep {
    margin: 0 .4rem;
    color: var(--gray-400);
}
.tile-launcher-breadcrumb-trail strong {
    color: var(--brand-green-deep);
    font-weight: 600;
}

@keyframes tile-launcher-in {
    to { opacity: 1; transform: translateY(0); }
}

/* .is-md modifier — match the full-bleed Home tile sizing for surfaces that
   want the same generous feel (e.g., future top-level Reports landing). */
.tile-launcher.is-md .tile-launcher-grid {
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.tile-launcher.is-md .tile-launcher-tile {
    padding: 1.4rem 1rem 1.15rem;
    border-radius: 14px;
}
.tile-launcher.is-md .tile-launcher-tile-icon {
    width: 60px;
    height: 60px;
    margin-bottom: .95rem;
}
.tile-launcher.is-md .tile-launcher-tile-label { font-size: .87rem; }
.tile-launcher.is-md .tile-launcher-tile-sub { font-size: .7rem; }

/* Mobile / tablet */
@media (max-width: 991.98px) {
    .tile-launcher-grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
    .tile-launcher.is-md .tile-launcher-grid { gap: .75rem; }
    .tile-launcher-tile { padding: .9rem .55rem .8rem; }
    .tile-launcher.is-md .tile-launcher-tile { padding: 1.1rem .6rem .9rem; }
    .tile-launcher-tile-icon { width: 42px; height: 42px; margin-bottom: .55rem; }
    .tile-launcher.is-md .tile-launcher-tile-icon { width: 52px; height: 52px; margin-bottom: .7rem; }
    .tile-launcher-tile-label { font-size: .8rem; }
    .tile-launcher-tile-sub { font-size: .64rem; }
}
/* Trailing odd-tile mobile span — same rule we use on home so a lone tile at
   the end of a 2-col grid doesn't look abandoned. */
@media (max-width: 991.98px) {
    .tile-launcher-grid > .tile-launcher-tile:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* Dark mode */
[data-theme="dark"] .tile-launcher-section-caption { color: #f0e9d5; }
[data-theme="dark"] .tile-launcher-section-rule {
    background: linear-gradient(90deg, rgba(255, 255, 255, .14) 0%, transparent 100%);
}
[data-theme="dark"] .tile-launcher-tile {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .07);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 12px 28px -16px rgba(0, 0, 0, .6);
}
[data-theme="dark"] .tile-launcher-tile:hover {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(212, 165, 58, .42);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 38px -16px rgba(0, 0, 0, .7);
}
[data-theme="dark"] .tile-launcher-tile-label { color: #f0e9d5; }
[data-theme="dark"] .tile-launcher-tile-sub { color: rgba(255, 255, 255, .5); }
[data-theme="dark"] .tile-launcher-breadcrumb { border-bottom-color: rgba(255, 255, 255, .08); }
[data-theme="dark"] .tile-launcher-breadcrumb-back {
    color: var(--brand-gold-light);
    border-color: rgba(255, 255, 255, .14);
}
[data-theme="dark"] .tile-launcher-breadcrumb-back:hover {
    background: rgba(212, 165, 58, .12);
    color: var(--brand-gold-light);
}
[data-theme="dark"] .tile-launcher-breadcrumb-trail { color: rgba(255, 255, 255, .7); }
[data-theme="dark"] .tile-launcher-breadcrumb-trail strong { color: var(--brand-gold-light); }

/* ============================================================================
   Defaulters page — drill view, sort chips, KPI strip, student rows
   ----------------------------------------------------------------------------
   Verdant Institutional: white card surfaces with hairline green borders and
   layered green-tinted shadows; gold appears only as the signal (sort-chip
   active state, KPI emphasis card, left-edge bar on expanded group cards,
   focus rings). Never a gold fill.
   ============================================================================ */

.defaulters-page { padding-bottom: 2rem; }

/* Date-picker card (separate from Students tab's picker). */
.defaulters-date-card {
    /* Lift the card's stacking context above the KPI cards below so the
       column-picker dropdown (z-index 1200 inside this card) doesn't get
       overpainted by .defaulters-kpi-card siblings — which are
       position:relative + z-index:auto, and therefore paint later in tree
       order at the same level. Without this, .card's backdrop-filter
       traps the dropdown inside a z-index:auto stacking context. */
    position: relative;
    z-index: 10;
    border: 1px solid rgba(30, 86, 49, .08);
    border-left: 3px solid var(--brand-gold);
    box-shadow: 0 1px 2px rgba(30, 86, 49, .04), 0 8px 24px -10px rgba(30, 86, 49, .08);
}
.defaulters-date-label {
    font-weight: 600;
    color: var(--brand-green-deep);
}

/* KPI strip — three small cards. The middle card carries the gold accent. */
.defaulters-kpi-card {
    background: #fff;
    border: 1px solid rgba(30, 86, 49, .08);
    border-radius: .55rem;
    padding: .7rem .9rem;
    box-shadow: 0 1px 2px rgba(30, 86, 49, .04), 0 8px 24px -10px rgba(30, 86, 49, .08);
    position: relative;
}
.defaulters-kpi-card.is-emphasis { border-top: 2px solid var(--brand-gold); }
.defaulters-kpi-card.is-emphasis .defaulters-kpi-card-value { color: var(--brand-green-deep); }
.defaulters-kpi-card.is-danger { border-top: 2px solid var(--danger-muted); }
.defaulters-kpi-card.is-danger .defaulters-kpi-card-value { color: var(--danger-dark); }
.defaulters-kpi-card-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-gold-dark);
}
.defaulters-kpi-card-value {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--brand-green-deep);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.defaulters-kpi-card-sub {
    color: var(--gray-500);
    font-size: .72rem;
    min-height: 1em;
}

/* Sub-tabs strip — uses Bootstrap nav-tabs but with our gold underline */
.defaulters-subtabs .nav-link {
    color: var(--gray-700);
    font-weight: 600;
    border: none;
    border-bottom: 2px solid transparent;
    padding: .55rem 1rem;
    background: transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.defaulters-subtabs .nav-link:hover {
    color: var(--brand-green-deep);
    border-bottom-color: rgba(212, 165, 58, .4);
}
.defaulters-subtabs .nav-link.active {
    color: var(--brand-green-deep);
    background: transparent;
    border-bottom-color: var(--brand-gold);
}

/* Drill toolbars (per-level sort + PDF launcher) */
.defaulters-drill-toolbar,
.defaulters-level-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .4rem .6rem;
    margin-bottom: .6rem;
    background: var(--brand-green-subtle);
    border-radius: .45rem;
}
.defaulters-drill-toolbar { justify-content: space-between; }
.defaulters-drill-toolbar-left {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.defaulters-drill-toolbar-label,
.defaulters-level-toolbar-label,
.defaulters-students-toolbar-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-gold-dark);
}
.defaulters-level-toolbar {
    background: rgba(30, 86, 49, .04);
    margin-bottom: .5rem;
    padding: .3rem .5rem;
}

/* Sort chips — gold dot becomes filled + arrow when active. */
.defaulters-sort-chips { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.defaulters-sort-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: #fff;
    border: 1px solid rgba(30, 86, 49, .12);
    border-radius: 999px;
    padding: .22rem .65rem;
    font-size: .78rem;
    color: var(--gray-700);
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
    /* WCAG 2.5.5 + project rule: 44px tap target on touch, denser on desktop */
    min-height: 44px;
}
@media (pointer: fine) {
    .defaulters-sort-chip { min-height: 38px; }
}
.defaulters-sort-chip:hover { border-color: var(--brand-gold); color: var(--brand-green-deep); }
.defaulters-sort-chip:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 2px; }
.defaulters-sort-chip.is-active {
    border-color: var(--brand-gold);
    background: #fff;
    color: var(--brand-green-deep);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--brand-gold) inset;
}
.defaulters-sort-chip-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(212, 165, 58, .35);
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.defaulters-sort-chip.is-active .defaulters-sort-chip-dot {
    background: var(--brand-gold);
    box-shadow: 0 0 0 3px rgba(212, 165, 58, .25);
}
.defaulters-sort-chip-arrow { font-weight: 700; color: var(--brand-gold-dark); }

/* Group card — used at level 1 and level 2 of the drill. */
.defaulters-group-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(30, 86, 49, .08);
    border-radius: .55rem;
    margin-bottom: .6rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(30, 86, 49, .04), 0 8px 24px -10px rgba(30, 86, 49, .08);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.defaulters-group-card:hover {
    box-shadow: 0 1px 2px rgba(30, 86, 49, .04), 0 12px 32px -12px rgba(30, 86, 49, .18);
}
.defaulters-group-card.is-expanded { border-color: rgba(212, 165, 58, .35); }
.defaulters-group-card.is-warning {
    border-color: rgba(212, 165, 58, .35);
    background: linear-gradient(0deg, #fff, #fefcf6);
}

.defaulters-group-card-header {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    align-items: center;
    gap: 1rem;
    width: 100%;
    background: transparent;
    border: none;
    padding: .7rem .9rem;
    cursor: pointer;
    text-align: left;
    color: var(--gray-900);
}
.defaulters-group-card-header:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: -3px; }

.defaulters-group-card-edge {
    width: 3px;
    align-self: stretch;
    background: var(--brand-gold);
    border-radius: 2px;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform var(--transition-base);
}
.defaulters-group-card.is-expanded .defaulters-group-card-edge,
.defaulters-group-card-header:hover .defaulters-group-card-edge { transform: scaleY(1); }

.defaulters-group-card-title-row { display: flex; align-items: center; gap: .5rem; }
.defaulters-group-card-title {
    margin: 0;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--brand-green-deep);
    letter-spacing: -0.01em;
}
.defaulters-group-card-warning-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 0 3px rgba(212, 165, 58, .2);
}
.defaulters-group-card-subtitle { font-size: .75rem; color: var(--gray-500); margin-top: 2px; }

.defaulters-group-card-metrics { display: flex; gap: 1.25rem; align-items: baseline; }
.defaulters-group-card-metric { text-align: right; min-width: 80px; }
.defaulters-group-card-metric-value {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--brand-green-deep);
    line-height: 1;
}
.defaulters-group-card-metric-label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-gold-dark);
    margin-top: 2px;
}
.defaulters-group-card-metric-total .defaulters-group-card-metric-value { color: var(--danger-dark); }

.defaulters-group-card-chevron { color: var(--gray-400); transition: transform var(--transition-base); }
.defaulters-group-card.is-expanded .defaulters-group-card-chevron {
    transform: rotate(180deg);
    color: var(--brand-gold-dark);
}

/* The PDF action (shown when a card is expanded) used to be position:absolute at
   the top-right, which overlapped the chevron and the outstanding total — badly so
   on mobile. Render it as a normal right-aligned row under the header instead, so it
   never collides at any width. */
.defaulters-group-card-actions { display: flex; justify-content: flex-end; padding: 0 .9rem .55rem; }

/* Phones: stack the metrics under the title (the count + wide "Rs …" total no longer
   squeeze the title or fight the chevron). Chevron spans both rows on the right. */
@media (max-width: 575.98px) {
    .defaulters-group-card-header {
        grid-template-columns: 12px 1fr auto;
        grid-template-areas:
            "edge titles  chevron"
            "edge metrics chevron";
        row-gap: .4rem;
        column-gap: .6rem;
    }
    .defaulters-group-card-edge    { grid-area: edge; }
    .defaulters-group-card-titles  { grid-area: titles; min-width: 0; }
    .defaulters-group-card-metrics { grid-area: metrics; justify-content: flex-start; gap: 1.4rem; }
    .defaulters-group-card-chevron { grid-area: chevron; }
    .defaulters-group-card-metric  { text-align: left; min-width: 0; }
    .defaulters-group-card-title   { font-size: .95rem; overflow-wrap: anywhere; }
}

.defaulters-group-card-body {
    padding: 0 .9rem 1rem;
    border-top: 1px dashed rgba(30, 86, 49, .12);
    margin-top: 0;
}
.defaulters-group-card-skeleton {
    display: flex;
    align-items: center;
    padding: 1rem .25rem;
    color: var(--gray-600);
    font-size: .85rem;
}

.defaulters-level-2 { margin-top: .6rem; }
.defaulters-level-2 .defaulters-group-card {
    background: linear-gradient(0deg, rgba(30,86,49,.015), rgba(30,86,49,.015)), #fff;
}

/* Zone code pill (e.g., Z1, Z5) — gold accent prefix on zone titles */
.defaulters-zone-code {
    display: inline-block;
    background: rgba(212, 165, 58, .18);
    color: var(--brand-gold-dark);
    border: 1px solid rgba(212, 165, 58, .35);
    border-radius: .35rem;
    font-family: 'Inter', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 1px 6px;
    margin-right: .55rem;
    vertical-align: middle;
}

/* Student rows table — level 3 of the drill */
.defaulters-students { padding-top: .5rem; }
.defaulters-students-toolbar { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.defaulters-students-table { font-size: .82rem; margin-bottom: .5rem; }
.defaulters-students-table thead th {
    background: var(--brand-green-subtle);
    color: var(--brand-green-deep);
    font-weight: 700;
    border-bottom: 1.5px solid var(--brand-green-deep);
    padding: .35rem .5rem;
    position: sticky;
    top: 0;
}
.defaulters-students-table tbody td {
    padding: .35rem .5rem;
    vertical-align: middle;
    border-bottom: 1px dotted rgba(30, 86, 49, .08);
}
.defaulters-students-table .mono {
    font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
    font-size: .78rem;
    color: var(--gray-700);
}
.defaulters-students-table .reg {
    font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
    font-size: .78rem;
    font-weight: 600;
    color: var(--brand-green-deep);
}
.defaulters-students-table .balance { font-variant-numeric: tabular-nums; color: var(--danger-dark); }

/* On phones the student table has more columns (reg, name, father, bills, balance,
   days, actions) than fit — give it a min-width so the .table-responsive wrapper
   actually overflows and can be swiped sideways (instead of squishing columns into
   unreadable wraps and hiding the balance off-screen). */
@media (max-width: 767.98px) {
    .defaulters-students .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .defaulters-students-table {
        min-width: 680px;
    }
    /* Sticky header needs an explicit BFC on the scroller; drop sticky on mobile so
       it doesn't fight the horizontal scroll. */
    .defaulters-students-table thead th { position: static; }
}

/* Days-overdue pill: muted (<30), warm gold (30-89), hot (>=90) */
.defaulters-days-pill {
    display: inline-block;
    min-width: 32px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
}
.defaulters-days-pill.is-warm {
    background: rgba(212, 165, 58, .15);
    color: var(--brand-gold-dark);
    border: 1px solid rgba(212, 165, 58, .35);
}
.defaulters-days-pill.is-hot {
    background: #fbe7e7;
    color: var(--danger-dark);
    border: 1px solid rgba(161, 52, 52, .35);
}

/* GT-style class balance footer */
.defaulters-class-balance {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 1rem;
    padding: .4rem .6rem;
    margin-top: .25rem;
    border-top: 1.5px solid var(--brand-green-deep);
    background: var(--brand-green-subtle);
    border-radius: 0 0 .35rem .35rem;
}
.defaulters-class-balance-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-gold-dark);
}
.defaulters-class-balance-value {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--brand-green-deep);
    font-variant-numeric: tabular-nums;
}

/* Dark mode pass — every new surface gets a [data-theme="dark"] companion */
[data-theme="dark"] .defaulters-kpi-card,
[data-theme="dark"] .defaulters-group-card,
[data-theme="dark"] .defaulters-date-card {
    background: rgba(20, 36, 28, .92);
    border-color: rgba(212, 165, 58, .18);
    color: #e8eee5;
    box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 14px 32px -16px rgba(0,0,0,.6);
}
[data-theme="dark"] .defaulters-kpi-card-value,
[data-theme="dark"] .defaulters-group-card-title,
[data-theme="dark"] .defaulters-group-card-metric-value,
[data-theme="dark"] .defaulters-class-balance-value { color: #f0e9d5; }
[data-theme="dark"] .defaulters-drill-toolbar,
[data-theme="dark"] .defaulters-level-toolbar { background: rgba(30, 86, 49, .25); }
[data-theme="dark"] .defaulters-students-table thead th {
    background: rgba(30, 86, 49, .3);
    color: #f0e9d5;
    border-bottom-color: var(--brand-gold);
}
[data-theme="dark"] .defaulters-sort-chip {
    background: rgba(20, 36, 28, .85);
    border-color: rgba(212, 165, 58, .25);
    color: #d6d2c0;
}
[data-theme="dark"] .defaulters-sort-chip.is-active {
    background: rgba(20, 36, 28, .95);
    color: #f0e9d5;
}
[data-theme="dark"] .defaulters-class-balance {
    background: rgba(30, 86, 49, .25);
    border-top-color: var(--brand-gold);
}

/* ── Defaulters report column picker ─────────────────────────────────────
   Verdant Institutional: white surface, hairline green border, layered
   green-tinted shadow, gold as the signal on the active check. */
.defaulters-colpicker { position: relative; }
.defaulters-colpicker-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 1200;
    min-width: 234px;
    background: #fff;
    border: 1px solid rgba(30, 86, 49, .12);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(30, 86, 49, .04), 0 10px 28px -10px rgba(30, 86, 49, .20);
    padding: 8px;
}
.defaulters-colpicker-title {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-gold-dark);
    padding: 2px 6px 6px;
    border-bottom: 1px solid rgba(30, 86, 49, .08);
    margin-bottom: 4px;
}
.defaulters-colpicker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 8px;
    cursor: pointer;
    font-size: .9rem;
    min-height: 44px;
    transition: background var(--transition-fast);
}
.defaulters-colpicker-item:hover { background: var(--brand-green-subtle); }
.defaulters-colpicker-item input { accent-color: var(--brand-gold); width: 15px; height: 15px; cursor: pointer; }
.defaulters-colpicker-item.is-locked { cursor: default; color: var(--gray-500); }
.defaulters-colpicker-item.is-locked:hover { background: transparent; }
.defaulters-colpicker-item.is-locked input { cursor: default; }
.defaulters-colpicker-lock {
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gray-400);
}
.defaulters-colpicker-foot {
    border-top: 1px solid rgba(30, 86, 49, .08);
    margin-top: 4px;
    padding-top: 6px;
    text-align: right;
}
.defaulters-colpicker-foot .btn-link {
    color: var(--brand-green-medium);
    text-decoration: none;
    font-size: .82rem;
}
.defaulters-colpicker-foot .btn-link:hover { color: var(--brand-green-deep); text-decoration: underline; }

@media (pointer: fine) {
    .defaulters-colpicker-item { min-height: 38px; }
}

/* ============ SKELETON LOADING (green shimmer) ============ */
.vi-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(30, 86, 49, 0.06);
  border-radius: 6px;
  min-height: 0.9rem;
}
.vi-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(30, 86, 49, 0.10), transparent);
  animation: vi-shimmer 1.4s linear infinite;
}
@keyframes vi-shimmer {
  100% { transform: translateX(100%); }
}
.vi-skeleton-card {
  background: #fff;
  border: 1px solid rgba(30, 86, 49, 0.06);
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(30, 86, 49, 0.04), 0 8px 24px -10px rgba(30, 86, 49, 0.10);
}
[data-theme="dark"] .vi-skeleton { background: rgba(255, 255, 255, 0.07); }
[data-theme="dark"] .vi-skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}
[data-theme="dark"] .vi-skeleton-card { background: #16241c; border-color: rgba(255, 255, 255, 0.07); }

[data-theme="dark"] .defaulters-colpicker-menu {
    background: #1a2520;
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .55);
}
[data-theme="dark"] .defaulters-colpicker-title { border-bottom-color: rgba(255, 255, 255, .08); }
[data-theme="dark"] .defaulters-colpicker-item { color: var(--gray-200); }
[data-theme="dark"] .defaulters-colpicker-item:hover { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .defaulters-colpicker-item.is-locked { color: var(--gray-400); }

/* ============================================================================
   UNIFIED-SEARCH RESULT STATUS PILLS
   Light: brand colors; Dark: brighter, legible variants on dark cards.
   ============================================================================ */
.stu-srch-pill--active    { color: #1e5631; border-color: #1e5631; }
.stu-srch-pill--graduated { color: #2266a0; border-color: #2266a0; }
.stu-srch-pill--left      { color: #94a3b8; border-color: #94a3b8; }

[data-theme="dark"] .stu-srch-pill--active    { color: #7ecf9e; border-color: #7ecf9e; }
[data-theme="dark"] .stu-srch-pill--graduated { color: #8fcef0; border-color: #8fcef0; }
[data-theme="dark"] .stu-srch-pill--left      { color: #b8c4cf; border-color: #b8c4cf; }
[data-theme="dark"] .defaulters-colpicker-foot { border-top-color: rgba(255, 255, 255, .08); }

/* ============================================================================
   DARK MODE: Bootstrap 5.1.3 utility coverage (2026-07-02)
   Bootstrap 5.1 has no native dark mode; anything below was rendering light-on-
   light. Everything is scoped [data-theme="dark"] and reuses the inverted
   --gray-* palette defined at the top of the dark section. .bg-* / .text-*
   utilities ship with !important in Bootstrap, so ONLY those overrides carry
   !important here.
   NOTE: .bg-white, .bg-light, .text-dark, .text-muted, .border, .alert-warning,
   .alert-success, .alert-info, .alert-danger, .list-group-item, .modal-content,
   .modal-header, .modal-footer, .input-group-text, .page-link, .page-item.active
   .page-link and .page-item.disabled .page-link already have tuned dark rules
   earlier in this file (~1846-1953) and are intentionally NOT repeated here.
   ============================================================================ */

/* --- surfaces --- */
[data-theme="dark"] .card-footer { background: var(--gray-100); border-top-color: var(--glass-border); }

/* --- alerts: dark-tinted fills, readable text, tinted borders --- */
[data-theme="dark"] .alert-primary { background: rgba(30, 86, 49, 0.25); border-color: rgba(74, 158, 96, 0.35); color: #8fd0a0; }
[data-theme="dark"] .alert-secondary { background: var(--gray-200); border-color: var(--gray-300); color: var(--gray-700); }
[data-theme="dark"] .alert .alert-link { color: inherit; }
/* .alert-light was missed by the earlier Bootstrap-utilities dark pass — its
   default light-gray fill stayed light on dark (found on ClassMonthBillsView's
   legend box, PR-C Task 4). */
[data-theme="dark"] .alert-light { background: var(--gray-100); border-color: var(--glass-border); color: var(--gray-800); }

/* --- lists, dropdowns, modals --- */
[data-theme="dark"] .list-group-item-action:hover { background: var(--gray-200); }
[data-theme="dark"] .list-group-item.active { background: var(--brand-green-deep, #1e5631); border-color: var(--brand-green-deep, #1e5631); }
[data-theme="dark"] .dropdown-menu { background: var(--gray-100); border-color: var(--glass-border); }
[data-theme="dark"] .dropdown-item { color: var(--gray-800); }
[data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background: var(--gray-200); color: var(--gray-900); }
[data-theme="dark"] .dropdown-divider { border-color: var(--glass-border); }
[data-theme="dark"] .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* --- forms & inputs (extends existing .form-control/.form-select rules) --- */
[data-theme="dark"] .form-check-input:not(:checked) { background-color: var(--gray-200); border-color: var(--gray-400); }
[data-theme="dark"] .form-text { color: var(--gray-500); }

/* --- tabs, pagination, tables, progress, accordion, badges --- */
[data-theme="dark"] .nav-tabs { border-bottom-color: var(--glass-border); }
[data-theme="dark"] .nav-tabs .nav-link { color: var(--gray-600); }
[data-theme="dark"] .nav-tabs .nav-link.active { background: var(--gray-100); border-color: var(--glass-border) var(--glass-border) var(--gray-100); color: var(--gray-900); }
[data-theme="dark"] .table-light, [data-theme="dark"] .table-light > th, [data-theme="dark"] .table-light > td { background: var(--gray-200); color: var(--gray-800); }
[data-theme="dark"] .progress { background: var(--gray-200); }
[data-theme="dark"] .accordion-item { background: var(--gray-100); border-color: var(--glass-border); }
[data-theme="dark"] .accordion-button { background: var(--gray-100); color: var(--gray-800); }
[data-theme="dark"] .accordion-button:not(.collapsed) { background: var(--gray-200); color: var(--gray-900); }
[data-theme="dark"] .accordion-button::after { filter: invert(1) grayscale(100%); }
[data-theme="dark"] .badge.bg-light { background-color: var(--gray-200) !important; color: var(--gray-800) !important; }
[data-theme="dark"] .badge.bg-white { background-color: var(--gray-200) !important; color: var(--gray-800) !important; }

/* ============================================================================
   BOTTOM NAVIGATION — phone-only (<768px), Verdant Institutional
   Green is the suit (icons/surface), gold is the signal (active dot only).
   ============================================================================ */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1035; /* below the drawer overlay (1040): opening nav dims the bar */
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    min-height: 56px;
    padding: 0 .25rem env(safe-area-inset-bottom);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
    box-shadow: 0 -2px 12px rgba(30, 86, 49, 0.08);
}
@media (min-width: 768px) {
    .bottom-nav { display: none; }
}
.bottom-nav-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 5px 2px 7px;
    background: none;
    border: none;
    color: var(--brand-green-deep);
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--transition-fast);
}
.bottom-nav-item:active { transform: scale(0.97); }
.bottom-nav-item:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: -3px; border-radius: 10px; }
.bottom-nav-item i { font-size: 1.05rem; opacity: .72; }
.bottom-nav-item.active i { opacity: 1; }
.bottom-nav-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: transparent;
}
.bottom-nav-item.active .bottom-nav-dot {
    background: var(--brand-gold);
    box-shadow: 0 0 8px var(--brand-gold);
}
.bottom-nav-label {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bottom-nav-item.active .bottom-nav-label { font-weight: 700; }
.bottom-nav-search {
    flex: 0 0 auto;
    align-self: flex-start;
    width: 46px;
    height: 46px;
    margin: -14px .35rem 0;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--brand-green-medium) 0%, var(--brand-green-deep) 100%);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 14px rgba(30, 86, 49, 0.35);
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast);
}
.bottom-nav-search:active { transform: scale(0.94); }
.bottom-nav-search:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 2px; }

/* Clear the fixed bar: only when the bar exists (BottomNav toggles the body class) */
@media (max-width: 767.98px) {
    body.has-bottom-nav .main-content {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
}

[data-theme="dark"] .bottom-nav {
    background: rgba(16, 24, 19, 0.92);
    border-top-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .bottom-nav-item { color: #cfe3d6; }
[data-theme="dark"] .bottom-nav-search { border-color: rgba(255, 255, 255, 0.25); }

/* Hide-on-scroll top bar (phones/tablets). JS toggles .navbar--hidden.
   Selector is deliberately 0,3,0: mobile-responsive.css loads later and sets
   transform/-webkit-transform: translateZ(0) on .navbar (0,1,0 GPU hint), which
   would otherwise win the cascade and pin the bar on screen. */
@media (max-width: 991.98px) {
    .navbar.fixed-top { transition: transform var(--transition-base); }
    .navbar.fixed-top.navbar--hidden {
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .navbar.fixed-top { transition: none; }
}

/* ============================================================================
   STUDENT QUICK ACTIONS — admin-only Profile/Ledger icon pair on student rows
   ============================================================================ */
.sqa-group {
    display: inline-flex;
    gap: 0.3rem;
    vertical-align: middle;
}
.sqa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid rgba(30, 86, 49, 0.15);
    border-radius: 8px;
    background: var(--brand-green-subtle, #e8f5ed);
    color: var(--brand-green-deep, #1e5631);
    font-size: 0.85rem;
    transition: all var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.sqa-btn:hover { background: var(--brand-green-deep, #1e5631); color: #fff; }
.sqa-btn:focus-visible { outline: 3px solid var(--brand-gold, #d4a53a); outline-offset: 2px; }
.sqa-btn:active { transform: scale(0.95); }
@media (pointer: fine) {
    .sqa-btn { min-width: 30px; min-height: 30px; font-size: 0.75rem; border-radius: 6px; }
}
[data-theme="dark"] .sqa-btn {
    background: rgba(45, 122, 74, 0.18);
    border-color: rgba(255, 255, 255, 0.12);
    color: #cfe3d6;
}
[data-theme="dark"] .sqa-btn:hover { background: var(--brand-green-medium, #2d7a4a); color: #fff; }

/* ============================================================================
   QUICKFIND — full-screen mobile sheet + admin row actions
   Real selector names verified against the .qf-* block above (~1078-1179):
   .qf-backdrop / .qf-panel / .qf-results / .qf-row / .qf-input (NOT
   .qf-search-input — the input's class is .qf-input). .qf-row-actions and
   .qf-action-btn are new — QuickFind.js already emits them unstyled.
   ============================================================================ */
.qf-row-actions {
    display: inline-flex;
    gap: 0.35rem;
    margin-left: auto;
}
.qf-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    border: 1px solid rgba(30, 86, 49, 0.15);
    border-radius: 8px;
    background: var(--brand-green-subtle, #e8f5ed);
    color: var(--brand-green-deep, #1e5631);
    font-size: 0.8rem;
}
.qf-action-btn:focus-visible { outline: 3px solid var(--brand-gold, #d4a53a); outline-offset: 2px; }
[data-theme="dark"] .qf-action-btn {
    background: rgba(45, 122, 74, 0.18);
    border-color: rgba(255, 255, 255, 0.12);
    color: #cfe3d6;
}
@media (max-width: 575.98px) {
    /* No !important needed: this block is appended after the base .qf-*
       rules earlier in this same file, so equal-specificity + later-in-
       cascade already wins. margin: 0 added (beyond the brief's block) —
       the base .qf-panel rule sets `margin: 0 1rem`, which without an
       override here would leave 1rem gaps on each side and break the
       edge-to-edge full-screen sheet on phones. */
    .qf-backdrop { padding: 0; align-items: stretch; }
    .qf-panel {
        max-width: 100vw;
        width: 100vw;
        margin: 0;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }
    .qf-results { flex: 1 1 auto; overflow-y: auto; max-height: none; }
    .qf-row { min-height: 52px; }
    .qf-input { font-size: 16px; min-height: 48px; }
}

/* ============================================================================
   STUDENT DETAIL VIEW — Verdant section headers (replaces the retired rainbow
   Bootstrap card-headers) + closing-balance callout. Builds on the global
   .card-header treatment (subtle green gradient, deep-green text) and adds a
   gold left accent — gold is jewelry, green is the suit.
   (The .sdoc-missing-badge rules that lived here were removed with the per-row
   "Form missing" badge, replaced by the FilterStatTiles strip in StudentsMain.)
   ============================================================================ */
.sdv-section-header {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--brand-green-deep);
    border-left: 3px solid var(--brand-gold);
}
.sdv-section-header i { color: var(--brand-gold-dark); }

/* Field table — mirrors the admission wizard's duplicate-match comparison
   (.adw-cmp table): uppercase gold-dark micro-labels, aligned deep-green
   values, hairline green row rules. Two label/value pairs per row. */
.sdv-field-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.sdv-field-table td { padding: .38rem .6rem; border-bottom: 1px solid rgba(30, 86, 49, 0.08); vertical-align: top; }
.sdv-field-table tr:last-child td { border-bottom: 0; }
.sdv-field-table .sdv-fl {
    font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--brand-gold-dark); white-space: nowrap; width: 8.75rem; padding-top: .55rem;
}
.sdv-field-table .sdv-fv { color: var(--brand-green-deep); font-weight: 500; word-break: break-word; }

.sdv-balance-alert {
    background: var(--brand-green-subtle);
    border: 1px solid rgba(30, 86, 49, 0.15);
    border-left: 3px solid var(--brand-gold);
    color: var(--brand-green-deep);
    border-radius: 12px;
}

[data-theme="dark"] .sdv-section-header { color: #7ecf9e; }
[data-theme="dark"] .sdv-section-header i { color: var(--brand-gold-light); }
[data-theme="dark"] .sdv-field-table td { border-bottom-color: rgba(212, 165, 58, 0.12); }
[data-theme="dark"] .sdv-field-table .sdv-fl { color: var(--brand-gold-light); }
[data-theme="dark"] .sdv-field-table .sdv-fv { color: #cfe5d8; }
[data-theme="dark"] .sdv-balance-alert {
    background: rgba(30, 86, 49, 0.18);
    border-color: rgba(255, 255, 255, 0.08);
    border-left-color: var(--brand-gold);
    color: #7ecf9e;
}

/* ============================================================================
   ACCESS DENIED STATE (window.SMSProComponents.AccessDeniedState)
   The canonical "you don't have access" panel. Replaces a swallowed-403
   empty-data state (#88) and softens the route-guard bounce (#89). Restrained
   green surface, gold-ringed lock badge (gold = attention signal here).
   ============================================================================ */
.access-denied-state {
    max-width: 460px;
    margin: 2.5rem auto;
    padding: 2rem 1.75rem;
    text-align: center;
    background: var(--brand-green-subtle);
    border: 1px solid rgba(30, 86, 49, 0.12);
    border-top: 3px solid var(--brand-gold);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(30, 86, 49, 0.04), 0 8px 24px -10px rgba(30, 86, 49, 0.10);
}
.access-denied-state--compact { margin: 1.25rem auto; padding: 1.5rem 1.25rem; }
.access-denied-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 0.9rem;
    border-radius: 50%;
    background: #fff;
    color: var(--brand-green-deep);
    font-size: 1.25rem;
    box-shadow: 0 0 0 3px rgba(212, 165, 58, 0.35);
}
.access-denied-title {
    margin: 0 0 0.35rem;
    color: var(--brand-green-deep);
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}
.access-denied-msg { margin: 0; color: var(--gray-600); font-size: 0.92rem; }
.access-denied-redirect {
    margin: 0.9rem 0 0;
    color: var(--brand-gold-dark);
    font-size: 0.82rem;
    font-weight: 600;
}
.access-denied-redirect .spinner-border { width: 0.9rem; height: 0.9rem; border-width: 0.15em; vertical-align: -0.1em; }

[data-theme="dark"] .access-denied-state {
    background: rgba(30, 86, 49, 0.18);
    border-color: rgba(212, 165, 58, 0.20);
    border-top-color: var(--brand-gold);
}
[data-theme="dark"] .access-denied-badge {
    background: rgba(255, 255, 255, 0.06);
    color: var(--brand-gold-light);
}
[data-theme="dark"] .access-denied-title { color: #e8f5ed; }
[data-theme="dark"] .access-denied-msg { color: #b8c4bd; }
[data-theme="dark"] .access-denied-redirect { color: var(--brand-gold-light); }

/* ── System Health / reports overview (Verdant) ─────────────────────────────
   White surfaces, green substance, gold only as accent. Replaces the raw
   Bootstrap bg-primary/info/warning blocks the old overview used. */
.rpt-stat-card {
    background: var(--snap-surface-bg, #fff);
    border-radius: 14px;
    border: 1px solid rgba(30, 86, 49, .08);
    box-shadow: 0 1px 2px rgba(30, 86, 49, .04), 0 8px 24px -10px rgba(30, 86, 49, .10);
    padding: 1.1rem 1.25rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-base);
}
.rpt-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-green-deep), var(--brand-gold), transparent);
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.rpt-stat-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(30, 86, 49, .05), 0 14px 32px -12px rgba(30, 86, 49, .18); }
.rpt-stat-card:hover::before { opacity: 1; }
.rpt-stat-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-gold-dark);
    margin-bottom: .3rem;
}
.rpt-stat-value {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.55rem;
    color: var(--snap-text-green, var(--brand-green-deep));
    letter-spacing: -.02em;
    line-height: 1.15;
}
.rpt-stat-sub { font-size: .76rem; color: var(--gray-600, #475569); margin-top: .25rem; }
.rpt-stat-icon { font-size: 1.6rem; color: var(--brand-green-deep); opacity: .18; }
[data-theme="dark"] .rpt-stat-icon { color: #8fd0a0; }

.rpt-card {
    background: var(--snap-surface-bg, #fff);
    border-radius: 14px;
    border: 1px solid rgba(30, 86, 49, .08);
    box-shadow: 0 1px 2px rgba(30, 86, 49, .04), 0 8px 24px -10px rgba(30, 86, 49, .10);
    height: 100%;
    overflow: hidden;
}
.rpt-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .85rem 1.25rem .7rem;
    border-bottom: 1px solid rgba(30, 86, 49, .07);
}
.rpt-card-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--snap-text-green, var(--brand-green-deep));
    margin: 0;
}
.rpt-card-title i { color: var(--brand-gold-dark); margin-right: .45rem; }
.rpt-card-body { padding: 1rem 1.25rem 1.25rem; }

/* Progress bars on the brand scale — green shades sequence, gold as the one
   accent. Track is green-subtle; no Bootstrap primary/info/warning fills. */
.rpt-progress {
    display: flex;
    height: 22px;
    border-radius: 999px;
    background: var(--brand-green-subtle, #e8f5ed);
    overflow: hidden;
    font-size: .72rem;
    font-weight: 600;
    color: #fff;
}
[data-theme="dark"] .rpt-progress { background: rgba(255, 255, 255, .08); }
.rpt-progress .seg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: width var(--transition-base);
}
.rpt-seg-0 { background: var(--brand-green-deep); }
.rpt-seg-1 { background: var(--brand-green-medium); }
.rpt-seg-2 { background: var(--brand-green-light); }
.rpt-seg-3 { background: #6fb98a; }
.rpt-seg-4 { background: #a3d3b5; color: #1e5631; }
.rpt-seg-5 { background: #c8e4d2; color: #1e5631; }
.rpt-seg-gold { background: var(--brand-gold); color: #3a2f10; }
.rpt-seg-danger { background: var(--danger, #c0392b); }

/* Gender split tiles — tinted surfaces, never solid fills. */
.rpt-split-tile {
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    height: 100%;
}
.rpt-split-tile.green { background: var(--brand-green-subtle, #e8f5ed); }
.rpt-split-tile.gold { background: var(--brand-gold-subtle, #fef9f0); }
.rpt-split-tile i { font-size: 1.5rem; margin-bottom: .35rem; }
.rpt-split-tile.green i { color: var(--brand-green-deep); }
.rpt-split-tile.gold i { color: var(--brand-gold-dark); }
.rpt-split-tile .n {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--snap-text-green, var(--brand-green-deep));
}
.rpt-split-tile .k { font-size: .72rem; color: var(--gray-600, #475569); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

/* Rank badge — gold signal for the podium, neutral for the rest. */
.rpt-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    background: var(--gray-100, #f1f5f9);
    color: var(--gray-600, #475569);
}
.rpt-rank.top { background: var(--brand-gold-subtle, #fef9f0); color: var(--brand-gold-dark); border: 1px solid rgba(212, 165, 58, .4); }

/* ==========================================================================
   Number inputs: hide native spinner arrows app-wide.
   Amounts (fee bills, receipts, installments, payroll...) are typed/pasted
   directly; the tiny up/down arrows were being clicked accidentally and
   silently changing amounts. Typing, paste, min/max validation unaffected.
   ========================================================================== */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}


/* ==========================================================================
   BILL GENERATION MODAL (.bgm-) — Verdant Institutional restyle
   Deep-green header w/ gold accent line, gold microcaptions w/ fading
   underline, green-tinted layered shadows on inner cards, fee pills.
   ========================================================================== */
.bgm-header {
    background: var(--brand-green-deep);
    border-bottom: none;
    position: relative;
    border-radius: 20px 20px 0 0;
}
/* Gold accent line along the bottom of the modal header (modal recipe). */
.bgm-header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-gold) 0%, rgba(212, 165, 58, 0) 100%);
}
.bgm-header .modal-title {
    font-family: 'Poppins', sans-serif;
    color: #fff;
    letter-spacing: -.01em;
}
.bgm-header .modal-title i { color: var(--brand-gold-light); }

/* Section microcaptions — gold uppercase + 28px fading gold underline. */
.bgm-caption {
    position: relative;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-gold-dark);
    margin: 1.1rem 0 .8rem;
    padding-bottom: .4rem;
}
.bgm-caption:first-child { margin-top: 0; }
.bgm-caption::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 28px; height: 2px;
    background: linear-gradient(90deg, var(--brand-gold), transparent);
    border-radius: 2px;
}

/* Inner cards (bill preview) — hairline green border + layered green-tinted shadow. */
.bgm-card {
    border: 1px solid rgba(30, 86, 49, .08) !important;
    border-radius: 12px;
    box-shadow:
        0 1px 2px rgba(30, 86, 49, .04),
        0 8px 24px -10px rgba(30, 86, 49, .10);
    overflow: hidden;
}
.bgm-card .card-header {
    background: var(--brand-green-subtle);
    border-bottom: 1px solid rgba(30, 86, 49, .10);
}
.bgm-card .card-header h6 { color: var(--brand-green-deep); }

/* Roster toolbar (filter + select/clear-all + counter). */
.bgm-roster-tools {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .55rem;
}
.bgm-roster-search { flex: 1 1 170px; min-height: 38px; }
.bgm-roster-actions { display: flex; align-items: center; gap: .45rem; font-size: .8rem; }
.bgm-link-btn {
    background: none;
    border: none;
    padding: .25rem .35rem;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: var(--brand-green-deep);
    cursor: pointer;
    border-radius: 6px;
    transition: color var(--transition-fast, 150ms cubic-bezier(.4, 0, .2, 1));
}
.bgm-link-btn:hover { color: var(--brand-gold-dark); text-decoration: underline; }
.bgm-link-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(212, 165, 58, .35); }
.bgm-roster-sep { color: var(--gray-300); }
.bgm-roster-count { color: var(--gray-500); font-weight: 600; white-space: nowrap; }

/* Class roster — white card, hover rows, fee pills. */
.bgm-roster {
    background: #fff;
    border: 1px solid rgba(30, 86, 49, .08);
    border-radius: 12px;
    box-shadow:
        0 1px 2px rgba(30, 86, 49, .04),
        0 8px 24px -10px rgba(30, 86, 49, .10);
    max-height: 400px;
    overflow-y: auto;
    padding: .35rem;
}
.bgm-roster-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border-radius: 9px;
    cursor: pointer;
    margin: 0;
    transition: background var(--transition-fast, 150ms cubic-bezier(.4, 0, .2, 1));
}
.bgm-roster-row:hover { background: var(--brand-green-subtle); }
.bgm-roster-row.is-excluded { opacity: .55; }
.bgm-roster-row .form-check-input { margin: 0; flex-shrink: 0; }
.bgm-roster-name { flex: 1 1 auto; font-size: .88rem; color: var(--gray-900); min-width: 0; }
.bgm-roster-reg { font-weight: 600; color: var(--brand-green-deep); }
.bgm-fee-pill {
    flex-shrink: 0;
    font-size: .74rem;
    font-weight: 700;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--brand-green-subtle);
    color: var(--brand-green-deep);
    border: 1px solid rgba(30, 86, 49, .15);
    white-space: nowrap;
}
/* Missing/zero fee — muted-gold warning treatment so it can't be missed. */
.bgm-fee-pill--none {
    background: var(--brand-gold-subtle);
    color: var(--brand-gold-dark);
    border: 1px dashed var(--brand-gold);
    font-weight: 600;
}
.bgm-roster-empty { padding: 1.25rem; margin: 0; text-align: center; color: var(--gray-500); font-size: .86rem; }

/* Duplicate-bill guard result — amber/gold-muted info block, scrollable list. */
.bgm-skipped {
    background: var(--brand-gold-subtle);
    border: 1px solid var(--brand-gold);
    border-left: 4px solid var(--brand-gold);
    border-radius: 10px;
    padding: .7rem .9rem;
    margin-bottom: 1rem;
}
.bgm-skipped-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    font-weight: 700;
    color: var(--brand-gold-dark);
}
.bgm-skipped-list { max-height: 180px; overflow-y: auto; margin-top: .5rem; }
.bgm-skipped-row {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .28rem 0;
    font-size: .82rem;
    color: var(--gray-800);
    border-top: 1px dashed rgba(184, 145, 46, .35);
}
.bgm-skipped-bill { font-weight: 600; color: var(--brand-gold-dark); white-space: nowrap; }

/* Sticky footer — selection summary left, actions right (Bootstrap flex). */
.bgm-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #fff;
    border-top: 1px solid rgba(30, 86, 49, .10);
    border-radius: 0 0 20px 20px;
}
.bgm-footer-summary {
    margin-right: auto;
    font-size: .83rem;
    font-weight: 600;
    color: var(--brand-green-deep);
}

/* .bgm- dark pass */
[data-theme="dark"] .bgm-card { border-color: #2a3f33 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px -10px rgba(0, 0, 0, .35); }
[data-theme="dark"] .bgm-card .card-header { background: #1a2d22; border-bottom-color: #2a3f33; }
[data-theme="dark"] .bgm-card .card-header h6 { color: #8fd0a6; }
[data-theme="dark"] .bgm-caption { color: var(--brand-gold-light); }
[data-theme="dark"] .bgm-link-btn { color: #8fd0a6; }
[data-theme="dark"] .bgm-link-btn:hover { color: var(--brand-gold-light); }
[data-theme="dark"] .bgm-roster { background: #16241c; border-color: #2a3f33; box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px -10px rgba(0, 0, 0, .35); }
[data-theme="dark"] .bgm-roster-row:hover { background: #1f3328; }
[data-theme="dark"] .bgm-roster-name { color: #e8f5ed; }
[data-theme="dark"] .bgm-roster-reg { color: #8fd0a6; }
[data-theme="dark"] .bgm-fee-pill { background: #1a2d22; color: #8fd0a6; border-color: #2a3f33; }
[data-theme="dark"] .bgm-fee-pill--none { background: #2a2212; color: var(--brand-gold-light); border-color: #5a4a1e; }
[data-theme="dark"] .bgm-roster-count, [data-theme="dark"] .bgm-roster-empty { color: #7a9e8a; }
[data-theme="dark"] .bgm-skipped { background: #2a2212; border-color: #b8912e; }
[data-theme="dark"] .bgm-skipped-head, [data-theme="dark"] .bgm-skipped-bill { color: var(--brand-gold-light); }
[data-theme="dark"] .bgm-skipped-row { color: #d8d8e4; border-top-color: #5a4a1e; }
[data-theme="dark"] .bgm-footer { background: #16241c; border-top-color: #2a3f33; }
[data-theme="dark"] .bgm-footer-summary { color: #8fd0a6; }

/* ==========================================================================
   SETTINGS PAGE ACCORDION — collapsible section headers for ManageBanks
   (the base .mb-* styles live inline in components/receiving/ManageBanks.js;
   these rules complement them, so they share the .mb- namespace).
   ========================================================================== */
.mb-card-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    min-height: 44px;
    padding: .85rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast, 150ms cubic-bezier(.4, 0, .2, 1)),
                border-color var(--transition-fast, 150ms cubic-bezier(.4, 0, .2, 1));
}
.mb-card-head:hover { background: var(--brand-green-subtle, #e8f5ed); }
.mb-card-head:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(212, 165, 58, .35); }
.mb-card-head[aria-expanded="true"] { border-bottom-color: rgba(30, 86, 49, .07); }
.mb-card-head > i { color: var(--brand-gold-dark, #b8912e); font-size: .85rem; flex-shrink: 0; }
.mb-card-head-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.mb-card-head-title {
    font-family: 'Poppins', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    color: var(--brand-green-deep, #1e5631);
    letter-spacing: -.01em;
    line-height: 1.25;
}
.mb-card-head-sub { font-size: .76rem; color: var(--gray-500, #64748b); line-height: 1.4; }
.mb-chev {
    color: var(--gray-500, #64748b);
    font-size: .8rem;
    flex-shrink: 0;
    /* Spring easing — reserved for chevron rotation per the design system. */
    transition: transform var(--transition-slow, 400ms) cubic-bezier(.34, 1.4, .64, 1),
                color var(--transition-fast, 150ms cubic-bezier(.4, 0, .2, 1));
}
.mb-card-head[aria-expanded="true"] .mb-chev { transform: rotate(180deg); color: var(--brand-gold-dark, #b8912e); }

/* Collapsible body — grid-template-rows 0fr/1fr animates height without max-height hacks. */
.mb-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-slow, 400ms) cubic-bezier(.4, 0, .2, 1);
}
.mb-collapse.is-open { grid-template-rows: 1fr; }
.mb-collapse-inner { overflow: hidden; min-height: 0; }

/* Bare (injected-card) variant: the header is its own slim card floating above
   the injected component's own .mb-card inside the collapsible body. */
.mb-sec-wrap { margin-top: 1.5rem; }
.mb-sec-wrap > .mb-card-head {
    background: #fff;
    border: 1px solid rgba(30, 86, 49, .07);
    border-radius: 14px;
    box-shadow:
        0 1px 2px rgba(30, 86, 49, .04),
        0 8px 24px -10px rgba(30, 86, 49, .10);
}
.mb-sec-wrap .mb-collapse-inner { padding-top: .75rem; }

/* Accordion dark pass */
[data-theme="dark"] .mb-card-head:hover { background: #1f3328; }
[data-theme="dark"] .mb-card-head[aria-expanded="true"] { border-bottom-color: #2a3f33; }
[data-theme="dark"] .mb-card-head-title { color: #e8f5ed; }
[data-theme="dark"] .mb-card-head-sub { color: #7a9e8a; }
[data-theme="dark"] .mb-sec-wrap > .mb-card-head { background: #16241c; border-color: #2a3f33; box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px -10px rgba(0, 0, 0, .35); }

/* ═══════════════════════════════════════════════════════════════════════════
   CLASSIC FONT THEME — user-switchable via the navbar font toggle (like the
   dark-mode toggle). data-font="classic" on <html> swaps the typefaces:
     body/UI  Inter            → 'Source Sans 3'
     headings Poppins          → 'Playfair Display'
   Persisted in localStorage 'smspro-font'; anti-flash script in index.html.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-font='classic'] body,
[data-font='classic'] input,
[data-font='classic'] select,
[data-font='classic'] textarea,
[data-font='classic'] button,
[data-font='classic'] .btn,
[data-font='classic'] .table,
[data-font='classic'] .modal,
[data-font='classic'] .vi-toast-msg,
[data-font='classic'] .qf-input,
[data-font='classic'] .bgm-link-btn {
  font-family: 'Source Sans 3', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

[data-font='classic'] h1,
[data-font='classic'] h2,
[data-font='classic'] h3,
[data-font='classic'] h4,
[data-font='classic'] h5,
[data-font='classic'] h6,
[data-font='classic'] .navbar-brand,
[data-font='classic'] .login-title,
[data-font='classic'] .card-stats h3,
[data-font='classic'] .home-hero-title,
[data-font='classic'] .home-hero-meta-item .v,
[data-font='classic'] .home-section-caption,
[data-font='classic'] .home-tile-label,
[data-font='classic'] .tile-launcher-section-caption,
[data-font='classic'] .tile-launcher-tile-label,
[data-font='classic'] .rpt-card-title,
[data-font='classic'] .rpt-split-tile .n,
[data-font='classic'] .rpt-stat-value,
[data-font='classic'] .defaulters-kpi-card-value,
[data-font='classic'] .defaulters-group-card-title,
[data-font='classic'] .defaulters-group-card-metric-value,
[data-font='classic'] .defaulters-class-balance-value,
[data-font='classic'] .mb-card-head-title,
[data-font='classic'] .bgm-header .modal-title,
[data-font='classic'] .sdv-section-header,
[data-font='classic'] .sidebar-group-label,
[data-font='classic'] .sidebar-section-label,
[data-font='classic'] .app-container.sidebar-collapsed .sidebar-flyout-header {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
}