/* =====================================================================
   EGOJI Students Portal — Site Theme
   Step 1 : Bootstrap 5.3 root (verbatim, untouched)
   Step 2 : EGOJI brand overrides — remap Bootstrap semantic tokens
   Step 3 : Component & layout styles
   ===================================================================== */

/* ── Step 1 · Bootstrap 5.3 root — DO NOT EDIT ────────────────────── */
:root, [data-bs-theme=light] {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13,110,253;
    --bs-secondary-rgb: 108,117,125;
    --bs-success-rgb: 25,135,84;
    --bs-info-rgb: 13,202,240;
    --bs-warning-rgb: 255,193,7;
    --bs-danger-rgb: 220,53,69;
    --bs-light-rgb: 248,249,250;
    --bs-dark-rgb: 33,37,41;
    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-info-bg-subtle: #cff4fc;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-dark-bg-subtle: #ced4da;
    --bs-primary-border-subtle: #9ec5fe;
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-success-border-subtle: #a3cfbb;
    --bs-info-border-subtle: #9eeaf9;
    --bs-warning-border-subtle: #ffe69c;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;
    --bs-white-rgb: 255,255,255;
    --bs-black-rgb: 0,0,0;
    --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg, #ffffff26, #fff0);
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33,37,41;
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255,255,255;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0,0,0;
    --bs-secondary-color: #212529bf;
    --bs-secondary-color-rgb: 33,37,41;
    --bs-secondary-bg: #e9ecef;
    --bs-secondary-bg-rgb: 233,236,239;
    --bs-tertiary-color: #21252980;
    --bs-tertiary-color-rgb: 33,37,41;
    --bs-tertiary-bg: #f8f9fa;
    --bs-tertiary-bg-rgb: 248,249,250;
    --bs-heading-color: inherit;
    --bs-link-color: #0d6efd;
    --bs-link-color-rgb: 13,110,253;
    --bs-link-decoration: underline;
    --bs-link-hover-color: #0a58ca;
    --bs-link-hover-color-rgb: 10,88,202;
    --bs-code-color: #d63384;
    --bs-highlight-color: #212529;
    --bs-highlight-bg: #fff3cd;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: #0000002d;
    --bs-border-radius: .375rem;
    --bs-border-radius-sm: .25rem;
    --bs-border-radius-lg: .5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 .5rem 1rem #00000026;
    --bs-box-shadow-sm: 0 .125rem .25rem #00000013;
    --bs-box-shadow-lg: 0 1rem 3rem #0000002d;
    --bs-box-shadow-inset: inset 0 1px 2px #00000013;
    --bs-focus-ring-width: .25rem;
    --bs-focus-ring-opacity: .25;
    --bs-focus-ring-color: #0d6efd40;
    --bs-form-valid-color: #198754;
    --bs-form-valid-border-color: #198754;
    --bs-form-invalid-color: #dc3545;
    --bs-form-invalid-border-color: #dc3545
}

/* ── Step 2 · EGOJI brand — remap Bootstrap semantic tokens ────────── */
/*
   Colour hierarchy:
     PRIMARY  → green   #166534 / #15803d / #dcfce7
     ACCENT   → orange  #ea580c / #c2410c / #ffedd5
     TERTIARY → gold    #d97706 / #fef3c7
     DARK     → black   #000 / #0f2420
*/
:root, [data-bs-theme=light] {

    /* ── EGOJI raw tokens (exact codes, never altered) ── */
    --green:        #166534;
    --green-mid:    #15803d;
    --green-light:  #dcfce7;
    --orange:       #ea580c;
    --orange-mid:   #c2410c;
    --orange-light: #ffedd5;
    --gold:         #d97706;
    --gold-light:   #fef3c7;

    /* neutrals */
    --bg:           #f4f7f6;
    --surface:      #ffffff;
    --border:       #e2e8e5;
    --border-dark:  #b8ccc7;
    --text:         #0f2420;
    --text-mid:     #3d5752;
    --text-muted:   #6b8e87;
    --text-light:   #a0bab5;

    /* semantics */
    --success:      #16a34a;
    --success-bg:   #dcfce7;
    --warning:      #d97706;
    --warning-bg:   #fef3c7;
    --danger:       #dc2626;
    --danger-bg:    #fee2e2;
    --info:         #0284c7;
    --info-bg:      #e0f2fe;

    /* shadows */
    --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.04);
    --shadow-lg: 0 10px 24px rgba(0,0,0,.12), 0 4px 6px rgba(0,0,0,.04);

    /* layout */
    --navbar-h:            60px;
    --sidebar-w:           260px;
    --sidebar-w-collapsed: 68px;
    --sidebar-bg:          #0f2d1a;   /* darkest green — sidebar chrome */

    /* ── Bootstrap semantic remaps → EGOJI palette ── */

    /* primary → green */
    --bs-primary:                  #15803d;
    --bs-primary-rgb:              21,128,61;
    --bs-primary-text-emphasis:    #166534;
    --bs-primary-bg-subtle:        #dcfce7;
    --bs-primary-border-subtle:    #86efac;
    --bs-green:                    #166534;

    /* success → lighter green */
    --bs-success:                  #16a34a;
    --bs-success-rgb:              22,163,74;
    --bs-success-text-emphasis:    #166534;
    --bs-success-bg-subtle:        #dcfce7;
    --bs-success-border-subtle:    #86efac;

    /* warning → orange (second brand colour) */
    --bs-warning:                  #ea580c;
    --bs-warning-rgb:              234,88,12;
    --bs-warning-text-emphasis:    #c2410c;
    --bs-warning-bg-subtle:        #ffedd5;
    --bs-warning-border-subtle:    #fed7aa;
    --bs-orange:                   #ea580c;
    --bs-yellow:                   #d97706;   /* gold mapped to yellow slot */

    /* danger — keep red family, use exact code */
    --bs-danger:                   #dc2626;
    --bs-danger-rgb:               220,38,38;
    --bs-danger-text-emphasis:     #7f1d1d;
    --bs-danger-bg-subtle:         #fee2e2;
    --bs-danger-border-subtle:     #fca5a5;

    /* info — blue */
    --bs-info:                     #0284c7;
    --bs-info-rgb:                 2,132,199;
    --bs-info-text-emphasis:       #0c4a6e;
    --bs-info-bg-subtle:           #e0f2fe;
    --bs-info-border-subtle:       #7dd3fc;

    /* dark → near-black from our text palette */
    --bs-dark:                     #0f2420;
    --bs-dark-rgb:                 15,36,32;
    --bs-black:                    #000;

    /* body */
    --bs-body-font-family:         'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-color:               #0f2420;
    --bs-body-color-rgb:           15,36,32;
    --bs-body-bg:                  #f4f7f6;
    --bs-body-bg-rgb:              244,247,246;

    /* links → green */
    --bs-link-color:               #15803d;
    --bs-link-color-rgb:           21,128,61;
    --bs-link-decoration:          none;
    --bs-link-hover-color:         #166534;
    --bs-link-hover-color-rgb:     22,101,52;

    /* borders */
    --bs-border-color:             #e2e8e5;
    --bs-border-color-translucent: rgba(15,36,32,.12);

    /* border-radius — slightly rounder than Bootstrap default */
    --bs-border-radius:            10px;
    --bs-border-radius-sm:         6px;
    --bs-border-radius-lg:         14px;
    --bs-border-radius-xl:         20px;
    --bs-border-radius-xxl:        28px;
    --bs-border-radius-2xl:        var(--bs-border-radius-xxl);

    /* shadows */
    --bs-box-shadow:               0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.04);
    --bs-box-shadow-sm:            0 1px 3px rgba(0,0,0,.08);
    --bs-box-shadow-lg:            0 10px 24px rgba(0,0,0,.12), 0 4px 6px rgba(0,0,0,.04);

    /* focus ring → green */
    --bs-focus-ring-color:         rgba(21,128,61,.25);

    /* form validation */
    --bs-form-valid-color:         #16a34a;
    --bs-form-valid-border-color:  #16a34a;
    --bs-form-invalid-color:       #dc2626;
    --bs-form-invalid-border-color:#dc2626;
}

/* ── Step 3 · Bootstrap component-level variable overrides ─────────── */
/* Buttons use their own --bs-btn-* vars; must override at class level  */

.btn-primary {
    --bs-btn-color:               #fff;
    --bs-btn-bg:                  #15803d;
    --bs-btn-border-color:        #166534;
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            #166534;
    --bs-btn-hover-border-color:  #14532d;
    --bs-btn-focus-shadow-rgb:    21,128,61;
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           #14532d;
    --bs-btn-active-border-color: #166534;
    --bs-btn-disabled-bg:         #15803d;
    --bs-btn-disabled-border-color: #15803d;
}
.btn-outline-primary {
    --bs-btn-color:               #15803d;
    --bs-btn-border-color:        #15803d;
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            #15803d;
    --bs-btn-hover-border-color:  #15803d;
    --bs-btn-focus-shadow-rgb:    21,128,61;
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           #166534;
    --bs-btn-active-border-color: #166534;
}
.btn-success {
    --bs-btn-color:               #fff;
    --bs-btn-bg:                  #16a34a;
    --bs-btn-border-color:        #15803d;
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            #15803d;
    --bs-btn-hover-border-color:  #166534;
    --bs-btn-focus-shadow-rgb:    22,163,74;
    --bs-btn-active-bg:           #166534;
    --bs-btn-disabled-bg:         #16a34a;
}
/* warning = orange — text must be white (orange is too dark for dark text) */
.btn-warning {
    --bs-btn-color:               #fff;
    --bs-btn-bg:                  #ea580c;
    --bs-btn-border-color:        #c2410c;
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            #c2410c;
    --bs-btn-hover-border-color:  #9a3412;
    --bs-btn-focus-shadow-rgb:    234,88,12;
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           #9a3412;
    --bs-btn-disabled-bg:         #ea580c;
    --bs-btn-disabled-border-color: #c2410c;
}
.btn-outline-warning {
    --bs-btn-color:               #ea580c;
    --bs-btn-border-color:        #ea580c;
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            #ea580c;
    --bs-btn-hover-border-color:  #ea580c;
    --bs-btn-focus-shadow-rgb:    234,88,12;
    --bs-btn-active-bg:           #c2410c;
}
.btn-danger {
    --bs-btn-color:               #fff;
    --bs-btn-bg:                  #dc2626;
    --bs-btn-border-color:        #b91c1c;
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            #b91c1c;
    --bs-btn-hover-border-color:  #991b1b;
    --bs-btn-focus-shadow-rgb:    220,38,38;
    --bs-btn-active-bg:           #991b1b;
    --bs-btn-disabled-bg:         #dc2626;
}
.btn-info {
    --bs-btn-color:               #fff;
    --bs-btn-bg:                  #0284c7;
    --bs-btn-border-color:        #0369a1;
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            #0369a1;
    --bs-btn-hover-border-color:  #075985;
    --bs-btn-focus-shadow-rgb:    2,132,199;
    --bs-btn-active-bg:           #075985;
    --bs-btn-disabled-bg:         #0284c7;
}
.btn-secondary, .btn-default {
    --bs-btn-color:               #3d5752;
    --bs-btn-bg:                  #ffffff;
    --bs-btn-border-color:        #b8ccc7;
    --bs-btn-hover-color:         #0f2420;
    --bs-btn-hover-bg:            #f4f7f6;
    --bs-btn-hover-border-color:  #6b8e87;
    --bs-btn-focus-shadow-rgb:    21,128,61;
    --bs-btn-active-bg:           #e2e8e5;
    --bs-btn-disabled-bg:         #ffffff;
}
/* Gold / accent button */
.btn-gold {
    --bs-btn-color:               #000;
    --bs-btn-bg:                  #d97706;
    --bs-btn-border-color:        #b45309;
    --bs-btn-hover-color:         #000;
    --bs-btn-hover-bg:            #b45309;
    --bs-btn-hover-border-color:  #92400e;
    --bs-btn-focus-shadow-rgb:    217,119,6;
    --bs-btn-active-bg:           #92400e;
    --bs-btn-disabled-bg:         #d97706;
}
.btn-gold { display: inline-flex; align-items: center; font-weight: 500; }
/* orange shorthand used in existing views */
.btn-accent {
    --bs-btn-color:               #fff;
    --bs-btn-bg:                  #ea580c;
    --bs-btn-border-color:        #c2410c;
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            #c2410c;
    --bs-btn-hover-border-color:  #9a3412;
    --bs-btn-focus-shadow-rgb:    234,88,12;
    --bs-btn-active-bg:           #9a3412;
    --bs-btn-disabled-bg:         #ea580c;
}

/* Alerts */
.alert-primary, .alert-success {
    --bs-alert-color:         #166534;
    --bs-alert-bg:            #dcfce7;
    --bs-alert-border-color:  #86efac;
    --bs-alert-link-color:    #14532d;
}
.alert-warning {
    --bs-alert-color:         #c2410c;
    --bs-alert-bg:            #ffedd5;
    --bs-alert-border-color:  #fed7aa;
    --bs-alert-link-color:    #9a3412;
}
.alert-danger {
    --bs-alert-color:         #7f1d1d;
    --bs-alert-bg:            #fee2e2;
    --bs-alert-border-color:  #fca5a5;
    --bs-alert-link-color:    #450a0a;
}
.alert-info {
    --bs-alert-color:         #0c4a6e;
    --bs-alert-bg:            #e0f2fe;
    --bs-alert-border-color:  #7dd3fc;
    --bs-alert-link-color:    #075985;
}
/* gold/warning info-level alert */
.alert-gold {
    --bs-alert-color:         #92400e;
    --bs-alert-bg:            #fef3c7;
    --bs-alert-border-color:  #fcd34d;
    --bs-alert-link-color:    #78350f;
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border-color: var(--bs-alert-border-color);
    border: 1px solid var(--bs-alert-border-color);
    border-radius: var(--bs-border-radius);
    padding: .75rem 1rem;
}

/* Badges */
.badge { border-radius: 20px; font-weight: 600; font-size: .72rem; padding: .35em .6em; }
.text-bg-primary { background-color: #15803d !important; color: #fff !important; }
.text-bg-success { background-color: #16a34a !important; color: #fff !important; }
.text-bg-warning { background-color: #ea580c !important; color: #fff !important; }
.text-bg-danger  { background-color: #dc2626 !important; color: #fff !important; }
.text-bg-info    { background-color: #0284c7 !important; color: #fff !important; }
.text-bg-gold    { background-color: #d97706 !important; color: #000 !important; }
.text-bg-dark    { background-color: #0f2420 !important; color: #fff !important; }

/* Utility overrides */
.bg-primary  { background-color: #15803d !important; }
.bg-success  { background-color: #16a34a !important; }
.bg-warning  { background-color: #ea580c !important; }
.bg-danger   { background-color: #dc2626 !important; }
.bg-info     { background-color: #0284c7 !important; }
.bg-gold     { background-color: #d97706 !important; }
.bg-dark     { background-color: #0f2420 !important; }
.text-primary { color: #15803d !important; }
.text-success  { color: #16a34a !important; }
.text-warning  { color: #ea580c !important; }
.text-danger   { color: #dc2626 !important; }
.text-info     { color: #0284c7 !important; }
.text-gold     { color: #d97706 !important; }

/* Pagination */
.page-link {
    --bs-pagination-color:           #15803d;
    --bs-pagination-hover-color:     #166534;
    --bs-pagination-focus-box-shadow:0 0 0 .25rem rgba(21,128,61,.25);
}
.page-item.active .page-link {
    --bs-pagination-active-bg:           #15803d;
    --bs-pagination-active-border-color: #166534;
}

/* Form controls */
.form-control:focus, .form-select:focus {
    border-color: #15803d;
    box-shadow: 0 0 0 .25rem rgba(21,128,61,.2);
}
.form-check-input:checked {
    background-color: #15803d;
    border-color: #166534;
}
.form-check-input:focus {
    border-color: #15803d;
    box-shadow: 0 0 0 .25rem rgba(21,128,61,.25);
}

/* Dropdowns */
.dropdown-menu {
    --bs-dropdown-link-hover-bg:     #dcfce7;
    --bs-dropdown-link-hover-color:  #15803d;
    --bs-dropdown-link-active-bg:    #15803d;
    --bs-dropdown-border-color:      transparent;
    --bs-dropdown-box-shadow:        0 10px 24px rgba(0,0,0,.12);
    --bs-dropdown-padding-x:         6px;
    --bs-dropdown-padding-y:         6px;
    --bs-dropdown-item-padding-x:    12px;
    --bs-dropdown-item-padding-y:    7px;
    --bs-dropdown-border-radius:     10px;
    --bs-dropdown-item-border-radius:6px;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* Progress */
.progress-bar { background-color: #15803d; }

/* ── Step 4 · Base resets ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; }
input, select, textarea { max-width: 100%; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.form-label { font-weight: 500; font-size: .875rem; color: #3d5752; margin-bottom: 4px; }
.input-group-text { font-size: .875rem; background: #f4f7f6; border-color: #e2e8e5; color: #6b8e87; }
.btn { font-weight: 500; }
.btn-flat { box-shadow: none !important; }

/* Cards */
.card { border-color: #e2e8e5; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.card-header { font-weight: 600; font-size: .9rem; padding: 14px 18px; background: #fff; border-bottom-color: #e2e8e5; }
.card-body { padding: 18px; }
.card-footer { padding: 12px 18px; background: #f4f7f6; border-top-color: #e2e8e5; }

/* Tables */
.table { font-size: .875rem; }
.table th { font-weight: 600; color: #3d5752; background: #f4f7f6; border-color: #e2e8e5; }
.table td { border-color: #e2e8e5; vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background-color: #dcfce7; }
.no-margin { margin: 0; }

/* DataTables */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #e2e8e5; border-radius: 6px; padding: 5px 10px; font-size: .875rem; color: #0f2420; max-width: none;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: #15803d; box-shadow: 0 0 0 .25rem rgba(21,128,61,.2); outline: none; }
table.dataTable thead th { background: #f4f7f6; color: #3d5752; font-weight: 600; }

/* Select2 */
.select2-container { max-width: 100%; }
.select2-container--default .select2-selection--single {
    border: 1px solid #e2e8e5; border-radius: 6px; height: 38px; display: flex; align-items: center; max-width: 100%;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; color: #0f2420; padding: 0 12px; }
.select2-container--default .select2-results__option--highlighted { background-color: #15803d; }
.select2-container--default.select2-container--focus .select2-selection--single { border-color: #15803d; box-shadow: 0 0 0 .25rem rgba(21,128,61,.2); }

/* ── Step 5 · App layout ──────────────────────────────────────────── */

/* ── Skeleton loaders ──────────────────────────────────────────────
   Shimmer uses green-tinted palette to stay on brand.
   #page-skeleton is position:fixed covering the content area — the
   real content is always in the DOM underneath; plugins init fine.
   JS removes the overlay after window.load (min 520 ms visible).
───────────────────────────────────────────────────────────────────── */
@keyframes egoji-shimmer {
    0%   { background-position: -700px 0; }
    100% { background-position: 700px 0; }
}
.skel {
    background: linear-gradient(90deg, #e6ede6 25%, #d2ddd2 50%, #e6ede6 75%);
    background-size: 1400px 100%;
    animation: egoji-shimmer 1.6s ease-in-out infinite;
    border-radius: 6px;
    display: block;
}
.skel-line      { height: 12px; margin-bottom: 10px; }
.skel-line-lg   { height: 16px; margin-bottom: 12px; }
.skel-head      { height: 22px; margin-bottom: 14px; border-radius: 8px; }
.skel-avatar    { width: 46px;  height: 46px; border-radius: 50%; flex-shrink: 0; }
.skel-table-row { height: 40px; border-radius: 6px; margin-bottom: 8px; }
.skel-card {
    background: #fff; border: 1px solid #e2e8e5; border-radius: 12px;
    padding: 22px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.07);
}

/* Page skeleton — fixed overlay covering only the content area.
   position:fixed avoids the percentage-height collapse that happens
   when the parent is a flex:1 child with no explicit height.
   Offsets mirror the navbar height and sidebar width exactly.       */
#page-skeleton {
    position: fixed;
    top: var(--navbar-h);           /* sit flush below navbar          */
    left: var(--sidebar-w);         /* sit flush right of sidebar      */
    right: 0;
    bottom: 0;
    background: #f4f7f6;
    z-index: 1049;                  /* below navbar (1050), above all content */
    padding: 20px 24px 32px;
    overflow-y: auto;
    transition: opacity .35s ease;
}
body.sidebar-collapsed #page-skeleton { left: var(--sidebar-w-collapsed); }
@media (max-width: 991.98px) { #page-skeleton { left: 0; } }
#page-skeleton.skel-out { opacity: 0; pointer-events: none; }

/* ── Navbar — green with orange loader bar at bottom ───────────────
   The orange line IS the progress bar.
   A dim track (#ea580c at 20% opacity) is always visible.
   The bright fill (.np-fill) animates from 0 → 82% → 100% on load.
   After load completes the fill stays at 100% = a solid orange line.
───────────────────────────────────────────────────────────────────── */
.app-navbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--navbar-h);
    background: #166534;
    display: flex; align-items: center; padding: 0 16px; gap: 12px;
    z-index: 1050; box-shadow: 0 2px 12px rgba(0,0,0,.25);
    overflow: visible;
}
/* dim orange track — always present */
.np-track {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; background: rgba(234,88,12,.22); pointer-events: none;
    z-index: 2;
}
/* animated fill */
.np-fill {
    position: absolute; bottom: 0; left: 0;
    height: 3px; width: 0;
    background: linear-gradient(90deg, #ea580c 0%, #d97706 100%);
    box-shadow: 0 0 10px rgba(234,88,12,.6);
    pointer-events: none; z-index: 3;
    transition: width .55s cubic-bezier(.4,0,.2,1);
}
/* instant reset without animation */
.np-fill.np-reset { transition: none; width: 0 !important; }
.np-fill.np-go    { width: 80%; }
.np-fill.np-done  { width: 100%; }
.sidebar-toggle-btn {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; background: rgba(255,255,255,.12);
    border: none; border-radius: 6px; color: #fff; cursor: pointer;
    flex-shrink: 0; transition: background .15s; font-size: 1rem;
}
.sidebar-toggle-btn:hover { background: rgba(255,255,255,.22); }

.navbar-brand-logo {
    display: flex; align-items: center; gap: 10px;
    color: #fff; font-weight: 700; font-size: 1rem;
    white-space: nowrap; text-decoration: none; flex-shrink: 0;
}
.navbar-brand-logo:hover { color: rgba(255,255,255,.9); text-decoration: none; }
.navbar-brand-logo img { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; }
@media (max-width: 575.98px) { .navbar-brand-logo .brand-full { display: none; } }

/* Orange notice badge in navbar */
.navbar-notice { flex: 1; min-width: 0; overflow: hidden; }
.notice-badge {
    display: inline-block; background: #ea580c; color: #fff;
    padding: 3px 12px; border-radius: 20px; font-size: .78rem; font-weight: 600; white-space: nowrap;
}

/* User dropdown in navbar */
.navbar-user { display: flex; align-items: center; flex-shrink: 0; }
.navbar-user .dropdown-toggle {
    display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none;
    padding: 6px 10px; border-radius: 6px; transition: background .15s;
}
.navbar-user .dropdown-toggle:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.navbar-user .dropdown-toggle::after { display: none; }
.navbar-user .user-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.35); flex-shrink: 0; }
.navbar-user .user-name { font-size: .875rem; font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 575.98px) { .navbar-user .user-name { display: none; } }
.navbar-user .dropdown-menu { margin-top: 8px !important; min-width: 210px; }
.navbar-user .dropdown-item { display: flex; align-items: center; gap: 8px; color: #0f2420; }
.navbar-user .dropdown-item:hover { background: #dcfce7; color: #15803d; }
.navbar-user .dropdown-item.text-danger:hover { background: #fee2e2; color: #dc2626; }

/* Wrapper */
.app-wrapper { display: flex; min-height: 100vh; padding-top: var(--navbar-h); }

/* Sidebar — darkest green */
.app-sidebar {
    position: fixed; top: var(--navbar-h); left: 0;
    width: var(--sidebar-w); height: calc(100vh - var(--navbar-h));
    background: var(--sidebar-bg);       /* #0f2d1a */
    overflow-y: auto; overflow-x: hidden;
    z-index: 1040;
    transition: width .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1);
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent;
}
.app-sidebar::-webkit-scrollbar { width: 4px; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

/* Sidebar user panel */
.sidebar-user-panel { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 6px; }
.sidebar-user-panel .user-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.25); flex-shrink: 0; }
.sidebar-user-panel .user-name { color: #fff; font-weight: 600; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.sidebar-user-panel .user-status { font-size: .7rem; color: #4ade80; display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; flex-shrink: 0; }

/* Sidebar section label — gold accent */
.sidebar-section-label {
    font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #d97706; padding: 14px 20px 5px; user-select: none;    /* --gold */
}

/* Sidebar nav links */
.sidebar-nav { padding: 0 8px 28px; list-style: none; margin: 0; }
.sidebar-nav .nav-item { margin: 1px 0; }
.sidebar-nav .nav-link {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    color: rgba(255,255,255,.82); border-radius: 6px; font-size: .875rem; font-weight: 500;
    transition: background .15s, color .15s; cursor: pointer; text-decoration: none; white-space: nowrap; overflow: hidden;
}
.sidebar-nav .nav-link .nav-icon { font-size: .9rem; width: 20px; text-align: center; flex-shrink: 0; opacity: .72; }
.sidebar-nav .nav-link .nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav .nav-link .nav-chevron { font-size: .65rem; opacity: .5; transition: transform .2s; flex-shrink: 0; }
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,.09); color: #fff; text-decoration: none; }
.sidebar-nav .nav-link:hover .nav-icon { opacity: 1; }
/* Active & open states — orange accent on icon */
.sidebar-nav .nav-item.open > .nav-link,
.sidebar-nav .nav-link.is-active { background: rgba(255,255,255,.13); color: #fff; }
.sidebar-nav .nav-item.open > .nav-link .nav-icon,
.sidebar-nav .nav-link.is-active .nav-icon { opacity: 1; color: #ea580c; }   /* --orange */
.sidebar-nav .nav-item.open > .nav-link .nav-chevron { transform: rotate(-90deg); }

/* Submenu */
.sidebar-submenu { list-style: none; padding: 2px 0 4px; margin: 0; max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.sidebar-nav .nav-item.open > .sidebar-submenu { max-height: 500px; }
.sidebar-submenu .nav-link { padding: 7px 12px 7px 42px; font-size: .82rem; font-weight: 400; color: rgba(255,255,255,.45); }
.sidebar-submenu .nav-link:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); }
.sidebar-submenu .nav-link.is-active { color: #ea580c; background: transparent; }  /* orange active */

/* Collapsed sidebar */
.sidebar-collapsed .app-sidebar { width: var(--sidebar-w-collapsed); }
.sidebar-collapsed .app-content, .sidebar-collapsed .app-footer { margin-left: var(--sidebar-w-collapsed); }
.sidebar-collapsed .sidebar-section-label,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .nav-chevron,
.sidebar-collapsed .sidebar-user-panel .user-info { display: none !important; }
.sidebar-collapsed .sidebar-user-panel { justify-content: center; }
.sidebar-collapsed .sidebar-nav .nav-link { justify-content: center; padding: 11px 0; }
.sidebar-collapsed .sidebar-nav .nav-icon { width: auto; font-size: 1.1rem; opacity: 1; }
.sidebar-collapsed .sidebar-submenu { display: none !important; }

/* Mobile sidebar */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1035; backdrop-filter: blur(1px); }
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); width: var(--sidebar-w) !important; }
    .app-content, .app-footer { margin-left: 0 !important; }
    .sidebar-open .app-sidebar { transform: translateX(0); }
    .sidebar-open .sidebar-overlay { display: block; }
}

/* Content area */
.app-content {
    flex: 1; min-width: 0; margin-left: var(--sidebar-w);
    min-height: calc(100vh - var(--navbar-h));
    background: #f4f7f6; display: flex; flex-direction: column;
    transition: margin-left .25s cubic-bezier(.4,0,.2,1);
}
.page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 8px; padding: 20px 24px 16px;
    border-bottom: 1px solid #e2e8e5; background: #fff;
    border-left: 4px solid #ea580c;  /* orange left accent */
}
.page-header h1 {
    font-size: 1.15rem; font-weight: 700; color: #0f2420; margin: 0 0 4px;
    display: flex; align-items: center; gap: 8px;
}
.page-header h1::before {
    content: ''; display: inline-block; width: 10px; height: 10px;
    background: #166534; border-radius: 50%; flex-shrink: 0;  /* green dot */
}
.page-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: #6b8e87; flex-wrap: wrap; }
.page-breadcrumb a { color: #6b8e87; }
.page-breadcrumb a:hover { color: #15803d; }
.page-breadcrumb .sep { color: #a0bab5; }
.page-body { padding: 20px 24px 28px; flex: 1; }

/* Footer — black anchor at the bottom */
.app-footer {
    background: #000; border-top: 3px solid #166534;
    padding: 14px 24px; font-size: .78rem; color: rgba(255,255,255,.55); text-align: center;
    margin-left: var(--sidebar-w); transition: margin-left .25s cubic-bezier(.4,0,.2,1);
}
.app-footer a { color: #d97706; }                  /* gold links on black */
.app-footer a:hover { color: #ea580c; }

/* ── Step 6 · Login page — split panel, solid black bg ─────────────
   Left : brand panel  (#166534 green, decorative rings, gold/orange accents)
   Right: form panel   (white, clean)
   Outer page: #000 solid — no gradient
───────────────────────────────────────────────────────────────────── */
.login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: #000;       /* solid black — no gradient */
    padding: 20px;
}

/* Outer wrapper */
.login-wrap {
    display: flex; width: 100%; max-width: 940px;
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 28px 90px rgba(0,0,0,.55);
}

/* ── Brand panel (left) ── */
.login-brand {
    flex: 0 0 42%;
    background: #166534;     /* --green */
    padding: 52px 40px;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
}
/* Orange + gold accent bar at bottom */
.login-brand::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #ea580c 0%, #d97706 100%);
}
.login-brand-top   { position: relative; z-index: 2; }
.login-brand-logo  { width: 72px; height: 72px; border-radius: 16px; object-fit: contain;
                     background: rgba(255,255,255,.15); padding: 10px; display: block; margin-bottom: 24px; }
.login-brand-title { color: #fff; font-size: 1.35rem; font-weight: 700; margin: 0 0 8px; line-height: 1.3; }
.login-brand-sub   { color: rgba(255,255,255,.68); font-size: .84rem; margin: 0; }

/* Decorative rings */
.login-brand-deco  { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.deco-ring {
    position: absolute; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.1);
}
.deco-ring-1 { width: 220px; height: 220px; bottom: -60px; right: -60px; }
.deco-ring-2 { width: 140px; height: 140px; bottom: 50px;  right: 20px;
               border-color: rgba(234,88,12,.35); }            /* orange ring */
.deco-ring-3 { width: 80px;  height: 80px;  top: 40px; right: -15px;
               border-color: rgba(217,119,6,.3); }             /* gold ring */
.deco-dot    { position: absolute; border-radius: 50%; }
.deco-dot-1  { width: 10px; height: 10px; background: #ea580c; bottom: 90px; right: 55px; }
.deco-dot-2  { width: 6px;  height: 6px;  background: #d97706; top: 80px; right: 35px; }

/* Feature bullets on the brand panel */
.login-brand-features { position: relative; z-index: 2; margin-top: auto; }
.login-feature {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
}
.login-feature-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.login-feature-dot.green  { background: #4ade80; }
.login-feature-dot.orange { background: #ea580c; }
.login-feature-dot.gold   { background: #d97706; }
.login-feature-text { color: rgba(255,255,255,.72); font-size: .82rem; }

/* ── Form panel (right) ── */
.login-form-panel {
    flex: 1; background: #fff;
    display: flex; flex-direction: column;
}
.login-form-inner {
    flex: 1; padding: 52px 44px 28px;
    display: flex; flex-direction: column; justify-content: center;
}
.login-form-title { font-size: 1.35rem; font-weight: 700; color: #0f2420; margin: 0 0 4px; }
.login-form-sub   { font-size: .85rem; color: #6b8e87; margin: 0 0 30px; }
/* Orange accent underline on title */
.login-form-title::after {
    content: ''; display: block; width: 40px; height: 3px;
    background: #ea580c; border-radius: 2px; margin-top: 8px;
}
.login-form-footer {
    padding: 18px 44px;
    background: #f4f7f6; border-top: 1px solid #e2e8e5;
    font-size: .78rem; color: #6b8e87; text-align: center;
}

/* Keep old .login-card aliases for ForgotPassword / ResetPassword */
.login-card { width: 100%; max-width: 460px; background: #fff; border-radius: 20px;
              box-shadow: 0 24px 72px rgba(0,0,0,.45); overflow: hidden;
              border-top: 4px solid #166534; }
.login-card-header { padding: 30px 36px 22px; text-align: center; border-bottom: 1px solid #e2e8e5; }
.login-card-header .school-logo { width: 68px; height: 68px; border-radius: 14px; object-fit: contain;
    display: block; margin: 0 auto 14px; }
.login-card-header h1 { color: #0f2420; font-size: 1.2rem; font-weight: 700; margin: 0; line-height: 1.3; }
.login-card-header p  { color: #6b8e87; font-size: .82rem; margin: 5px 0 0; }
.login-card-body   { padding: 28px 36px 22px; }
.login-card-footer { padding: 16px 36px; background: #f4f7f6; text-align: center;
                     font-size: .78rem; color: #6b8e87; border-top: 1px solid #e2e8e5; }

/* ── Mobile: stack vertically ── */
@media (max-width: 700px) {
    .login-wrap { flex-direction: column; max-width: 440px; border-radius: 16px; }
    .login-brand { flex: none; padding: 28px 28px 24px; }
    .login-brand-features { display: none; }
    .login-form-inner { padding: 28px 28px 20px; }
    .login-form-footer { padding: 14px 28px; }
}

/* ── Step 7 · Dashboard stat cards ───────────────────────────────── */
/*   green = total paid,  orange = balance,  gold = billed            */
.stat-card {
    background: #fff; border: 1px solid #e2e8e5; border-radius: 14px;
    padding: 20px; display: flex; align-items: flex-start; gap: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: box-shadow .2s, transform .18s; height: 100%;
}
.stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.10); transform: translateY(-2px); }
.stat-icon { width: 50px; height: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.stat-icon.green  { background: #dcfce7; color: #166534; }      /* --green-light / --green */
.stat-icon.orange { background: #ffedd5; color: #ea580c; }      /* --orange-light / --orange */
.stat-icon.gold   { background: #fef3c7; color: #d97706; }      /* --gold-light / --gold */
.stat-icon.dark   { background: #e2e8e5; color: #0f2420; }      /* neutral dark */
.stat-icon.info   { background: #e0f2fe; color: #0284c7; }
.stat-icon.danger { background: #fee2e2; color: #dc2626; }
.stat-body { flex: 1; min-width: 0; }
.stat-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #6b8e87; margin-bottom: 4px; }
.stat-value { font-size: 1.45rem; font-weight: 700; color: #0f2420; line-height: 1.2; }
.stat-footer { margin-top: 8px; font-size: .78rem; color: #6b8e87; }
.stat-footer a { color: #15803d; font-weight: 500; }

/* ── Step 8 · AdminLTE / Bootstrap 3 shims ───────────────────────── */
.pull-right { float: right !important; }
.pull-left  { float: left  !important; }
.no-margin  { margin: 0; }

/* Box (AdminLTE → card-like) */
.box { background: #fff; border: 1px solid #e2e8e5; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-bottom: 20px; overflow: hidden; }
.box-header { padding: 12px 18px; border-bottom: 1px solid #e2e8e5; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.box-header.with-border { border-bottom: 1px solid #e2e8e5; }
.box-title { font-size: .9rem; font-weight: 600; color: #0f2420; margin: 0; flex: 1; }
.box-body { padding: 18px; }
.box-footer { padding: 12px 18px; background: #f4f7f6; border-top: 1px solid #e2e8e5; }
.box-body.box-profile { text-align: center; }
.box-tools { display: flex; gap: 4px; align-items: center; }
.btn-box-tool { background: transparent; border: none; color: #6b8e87; padding: 4px 8px; border-radius: 6px; cursor: pointer; font-size: .8rem; }
.btn-box-tool:hover { background: #f4f7f6; color: #0f2420; }
/* box colour borders — top stripe in brand palette */
.box-primary { border-top: 3px solid #15803d; }   /* green */
.box-success { border-top: 3px solid #16a34a; }
.box-warning { border-top: 3px solid #ea580c; }   /* orange */
.box-danger  { border-top: 3px solid #dc2626; }
.box-info    { border-top: 3px solid #0284c7; }
.box-default { border-top: 3px solid #b8ccc7; }
.box-gold    { border-top: 3px solid #d97706; }   /* gold */
.box-dark    { border-top: 3px solid #000; }       /* black */
.box-primary > .box-header { background: #dcfce7; }
.box-warning > .box-header { background: #ffedd5; }
.box-info    > .box-header { background: #e0f2fe; }
.box-danger  > .box-header { background: #fee2e2; }
.box-gold    > .box-header { background: #fef3c7; }
.box-dark    > .box-header { background: #0f2420; color: #fff; }

/* Panel (BS3) */
.panel { background: #fff; border: 1px solid #e2e8e5; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-bottom: 20px; overflow: hidden; }
.panel-heading { padding: 12px 18px; border-bottom: 1px solid #e2e8e5; }
.panel-title { font-size: .9rem; font-weight: 600; margin: 0; }
.panel-body { padding: 18px; }
.panel-footer { padding: 12px 18px; background: #f4f7f6; border-top: 1px solid #e2e8e5; }
.panel-primary > .panel-heading { background: #15803d; color: #fff; border-color: #166534; }
.panel-success > .panel-heading { background: #16a34a; color: #fff; }
.panel-warning > .panel-heading { background: #ea580c; color: #fff; }   /* orange */
.panel-danger  > .panel-heading { background: #dc2626; color: #fff; }
.panel-info    > .panel-heading { background: #0284c7; color: #fff; }
.panel-default > .panel-heading { background: #f4f7f6; color: #0f2420; }
.panel-gold    > .panel-heading { background: #d97706; color: #000; }   /* gold */
.panel-dark    > .panel-heading { background: #000; color: #fff; }       /* black */

/* Info-box (AdminLTE dashboard widget) */
.info-box { display: flex; align-items: stretch; min-height: 80px; background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-bottom: 20px; overflow: hidden; }
.info-box-icon { width: 72px; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff; flex-shrink: 0; }
.info-box-content { padding: 12px 16px; flex: 1; }
.info-box-text { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #6b8e87; display: block; font-weight: 600; }
.info-box-number { font-size: 1.25rem; font-weight: 700; color: #0f2420; display: block; }
.small-box-footer { font-size: .75rem; display: block; margin-top: 6px; }
.info-box.bg-green  .info-box-icon { background: #15803d; }   /* green */
.info-box.bg-yellow .info-box-icon { background: #d97706; }   /* gold */
.info-box.bg-aqua   .info-box-icon { background: #0284c7; }
.info-box.bg-red    .info-box-icon { background: #dc2626; }
.info-box.bg-blue   .info-box-icon { background: #166534; }   /* dark green */
.info-box.bg-orange .info-box-icon { background: #ea580c; }   /* orange */

/* Labels (BS3) */
.label { display: inline-block; padding: 3px 9px; font-size: .75rem; font-weight: 600; border-radius: 20px; color: #fff; background: #6b8e87; line-height: 1.4; }
.label-primary { background: #15803d; }
.label-success  { background: #16a34a; }
.label-warning  { background: #ea580c; }   /* orange */
.label-danger   { background: #dc2626; }
.label-info     { background: #0284c7; }
.label-default  { background: #b8ccc7; color: #0f2420; }
.label-gold     { background: #d97706; color: #000; }
.label-dark     { background: #000; color: #fff; }

/* Legacy colour helpers */
.text-blue   { color: #15803d !important; }
.text-aqua   { color: #0284c7 !important; }
.text-red    { color: #dc2626 !important; }
.text-yellow { color: #d97706 !important; }   /* gold */
.text-green  { color: #16a34a !important; }
.text-orange { color: #ea580c !important; }
.text-black  { color: #000 !important; }
.bg-blue-active { background: #166534 !important; color: #fff !important; }
.bg-green   { background: #15803d !important; color: #fff !important; }
.bg-yellow  { background: #d97706 !important; color: #000 !important; }   /* gold */
.bg-aqua    { background: #0284c7 !important; color: #fff !important; }
.bg-red     { background: #dc2626 !important; color: #fff !important; }
.bg-blue    { background: #166534 !important; color: #fff !important; }
.bg-orange  { background: #ea580c !important; color: #fff !important; }
.bg-black   { background: #000 !important; color: #fff !important; }

/* Images */
.img-circle { border-radius: 50%; }
.img-responsive { max-width: 100%; height: auto; display: block; }
.profile-user-img { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; border: 3px solid #e2e8e5; display: block; margin: 0 auto 12px; }
.profile-username { font-size: 1.05rem; font-weight: 700; color: #0f2420; margin-bottom: 4px; }

/* Form horizontal (BS3 compat) */
.form-horizontal .form-group { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.control-label { padding-top: calc(.375rem + 1px); font-weight: 500; font-size: .875rem; color: #3d5752; }

/* col-xs-* (BS3 compat) */
[class*="col-xs-"] { position: relative; padding-right: 12px; padding-left: 12px; }
.col-xs-1  { flex: 0 0  8.333%; max-width:  8.333%; } .col-xs-2  { flex: 0 0 16.667%; max-width: 16.667%; }
.col-xs-3  { flex: 0 0 25%;     max-width: 25%;     } .col-xs-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.col-xs-5  { flex: 0 0 41.667%; max-width: 41.667%; } .col-xs-6  { flex: 0 0 50%;     max-width: 50%;     }
.col-xs-7  { flex: 0 0 58.333%; max-width: 58.333%; } .col-xs-8  { flex: 0 0 66.667%; max-width: 66.667%; }
.col-xs-9  { flex: 0 0 75%;     max-width: 75%;     } .col-xs-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.col-xs-11 { flex: 0 0 91.667%; max-width: 91.667%; } .col-xs-12 { flex: 0 0 100%;    max-width: 100%;    }
@media (max-width: 767.98px) { .hidden-xs { display: none !important; } }
@media (min-width: 576px) and (max-width: 767.98px) { .visible-sm-block { display: block !important; } }

/* Misc */
.clearfix::after { display: block; content: ""; clear: both; }
.margin-r-5 { margin-right: 5px !important; }
.margin-b-10 { margin-bottom: 10px !important; }
.content { padding: 0; }
.content-header { display: none; }
.nav-pills.nav-stacked { flex-direction: column; }
.nav-pills.nav-stacked .nav-link { border-radius: 6px; color: #3d5752; display: flex; justify-content: space-between; align-items: center; }
.nav-pills.nav-stacked .nav-link:hover { background: #dcfce7; color: #15803d; }

/* ── Step 9 · Responsive ──────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header { padding: 14px 16px 12px; border-left-width: 3px; }
    .page-body   { padding: 14px 16px 20px; }
    .login-card-body   { padding: 22px 22px; }
    .login-card-header { padding: 22px 22px 16px; }
}