/*
 * MCHS Hostel System — Theme (single source of truth for styling)
 * Overrides the Skote / Bootstrap template. Load this AFTER all other CSS.
 *
 * RULES
 *  1. Colours, radii, shadows and fonts are defined ONCE in :root below.
 *     Never type a hex colour anywhere else in this file or in a view
 *     (pure white/black via #fff / rgba(0,0,0,x) are the only exceptions).
 *  2. Views must not use style="" except for values computed in PHP
 *     (e.g. progress bar width). Use a class from this file instead.
 *  3. New reusable styles go in section 20 (Components), not in a view.
 *
 * To re-skin the whole system, edit section 1 only.
 */

/* ══ 1. DESIGN TOKENS ═══════════════════════════════════════════════════ */
:root {
    /* Font */
    --mchs-font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --bs-font-sans-serif: var(--mchs-font);

    /* Brand — MCHS aqua (primary) and red (accent) */
    --mchs-primary:       #006272;
    --mchs-primary-dark:  #004c59;
    --mchs-primary-mid:   #008DA4;
    --mchs-primary-light: #e0f2f5;
    --mchs-primary-tint:  #f0f8fa;   /* lighter than -light: drop-zone / hover fills */
    --mchs-primary-edge:  #b3d9e0;   /* soft border in the brand hue */
    --mchs-accent:        #8fd3de;   /* light aqua highlight on dark teal */
    --mchs-primary-rgb:   0, 98, 114; /* same as --mchs-primary, for rgba() */
    --mchs-red:           #C0272D;
    --mchs-red-dark:      #9e1f24;

    /* Deprecated aliases — old names kept so existing views don't break.
       Use the --mchs-primary* names in new code. */
    --mchs-navy:          var(--mchs-primary);
    --mchs-navy-dark:     var(--mchs-primary-dark);
    --mchs-navy-mid:      var(--mchs-primary-mid);
    --mchs-navy-light:    var(--mchs-primary-light);

    /* Surfaces & text */
    --mchs-bg:          #f8f7f4;
    --mchs-card:        #ffffff;
    --mchs-card-header: #fafaf8;
    --mchs-border:      #e8e4de;
    --mchs-text:        #222222;
    --mchs-label:       #555555;
    --mchs-muted:       #888888;
    --mchs-text-strong: #333333;
    --mchs-text-soft:   #666666;
    --mchs-faint:       #aaaaaa;
    --mchs-bg-subtle:   #f8f9fa;
    --mchs-bg-field:    #f4f7fa;

    /* Solid status colours (buttons, outlines) */
    --mchs-success:     #1a7a4a;
    --mchs-warning:     #b45309;
    --mchs-danger:      var(--mchs-red);
    --mchs-info:        #0369a1;
    --mchs-warning-btn: #d97706;
    --mchs-secondary:   #6b7280;

    /* Soft status colours (badges, alerts, stat icons)
       ink = text, soft = badge bg, tint = alert bg, edge = alert border */
    --mchs-success-ink: #15803d;  --mchs-success-soft: #dcfce7;  --mchs-success-tint: #f0fdf4;  --mchs-success-edge: #22c55e;
    --mchs-danger-ink:  #b91c1c;  --mchs-danger-soft:  #fee2e2;  --mchs-danger-tint:  #fef2f2;  --mchs-danger-edge:  #ef4444;
    --mchs-warning-ink: #92400e;  --mchs-warning-soft: #fef9c3;  --mchs-warning-tint: #fffbeb;  --mchs-warning-edge: #f59e0b;
    --mchs-info-ink:    #1d4ed8;  --mchs-info-soft:    #dbeafe;  --mchs-info-tint:    #eff6ff;  --mchs-info-edge:    #3b82f6;
    --mchs-neutral-ink: #4b5563;  --mchs-neutral-soft: #f3f4f6;

    /* Purple (secondary status colour: expired, hostel-fee stages) */
    --mchs-purple:      #ae3ec9;
    --mchs-purple-edge: #cc5de8;
    --mchs-purple-deep: #862e9c;
    --mchs-purple-ink:  #6b21a8;
    --mchs-purple-tint: #f8f0ff;

    /* Text/borders on dark photo backgrounds (login page) */
    --mchs-ondark-danger:       #fca5a5;  --mchs-ondark-danger-edge:  #f87171;
    --mchs-ondark-success:      #86efac;  --mchs-ondark-success-edge: #bbf7d0;

    /* Motion */
    --mchs-transition: all 0.3s ease;

    /* Shape & depth */
    --mchs-radius-sm: 6px;
    --mchs-radius:    8px;
    --mchs-radius-md: 10px;
    --mchs-radius-lg: 12px;
    --mchs-radius-xl: 14px;
    --mchs-shadow-card:  0 2px 8px rgba(var(--mchs-primary-rgb), 0.08);
    --mchs-shadow-bar:   0 2px 12px rgba(var(--mchs-primary-rgb), 0.18);
    --mchs-shadow-btn:   0 4px 14px rgba(var(--mchs-primary-rgb), 0.30);
    --mchs-focus-ring:   0 0 0 3px rgba(var(--mchs-primary-rgb), 0.12);
    --mchs-shadow-menu:  0 8px 24px rgba(0, 0, 0, 0.10);
    --mchs-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.18);

    /* Layout */
    --mchs-topbar-height: 70px;
    --mchs-content-gap:   16px;   /* space between topbar and page content */
}

/* ══ 2. BASE ════════════════════════════════════════════════════════════ */
body {
    font-family: var(--mchs-font) !important;
    background-color: var(--mchs-bg) !important;
    color: var(--mchs-text) !important;
}
a { color: var(--mchs-primary) !important; }
a:hover { color: var(--mchs-primary-mid) !important; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mchs-font) !important;
    color: var(--mchs-primary) !important;
}
.text-primary  { color: var(--mchs-primary) !important; }
.bg-primary    { background-color: var(--mchs-primary) !important; }
.border-primary{ border-color: var(--mchs-primary) !important; }
.bg-soft-success { background-color: var(--mchs-success-tint) !important; }
.bg-soft-danger  { background-color: var(--mchs-danger-tint) !important; }
.bg-soft-warning { background-color: var(--mchs-warning-tint) !important; }

/* ══ 3. PAGE LAYOUT (moved here from layouts/admin.blade.php) ═══════════
   NOTE: positioning of #page-topbar and .vertical-menu is owned by the Skote
   template (app.min.css). Do NOT set position/left/right/top/z-index/margin
   on them here — the template offsets the sidebar and topbar itself.
   Likewise do NOT set height on html/body: the template's footer is
   absolutely positioned and must anchor to the bottom of the document. */
#layout-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#page-topbar {
    background-color: var(--mchs-primary) !important;
    box-shadow: var(--mchs-shadow-bar) !important;
}
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--mchs-bg) !important;
}
/* The template's .page-content already pads the top to clear the fixed
   topbar, so .main-content needs NO margin-top (it doubled the gap).
   Tune the space under the topbar with --mchs-content-gap. */
.page-content {
    flex: 1;
    background-color: var(--mchs-bg) !important;
    padding-top: calc(var(--mchs-topbar-height) + var(--mchs-content-gap)) !important;
}
.footer { margin-top: auto; }

/* ══ 4. TOP NAVIGATION BAR ══════════════════════════════════════════════ */
.navbar-header      { background-color: var(--mchs-primary) !important; }
.navbar-brand-box   { background-color: var(--mchs-primary-dark) !important; }
.logo-txt,
.logo span {
    color: #ffffff !important;
    font-family: var(--mchs-font) !important;
    font-weight: 700 !important;
}

.header-item,
.header-item i,
.header-profile-user,
.noti-icon i {
    color: rgba(255,255,255,0.8) !important;
}
.header-item:hover i,
.noti-icon:hover i {
    color: #ffffff !important;
}

.notification-dropdown .header-item { position: relative; }
.notification-count {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 10px;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 10px;
}
.notification-dropdown .notification-item {
    display: block;
    text-decoration: none;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.notification-dropdown .notification-item:hover {
    background-color: rgba(0,0,0,0.03);
}

.app-search .form-control {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: rgba(255,255,255,0.8) !important;
}
.app-search .form-control::placeholder { color: rgba(255,255,255,0.45) !important; }
.app-search span { color: rgba(255,255,255,0.5) !important; }

/* ══ 5. SIDEBAR ═════════════════════════════════════════════════════════ */
.vertical-menu {
    background-color: var(--mchs-primary) !important;
    border-right: none !important;
}
#sidebar-menu ul li a {
    color: rgba(255,255,255,0.65) !important;
    font-family: var(--mchs-font) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
}
#sidebar-menu ul li a i { color: rgba(255,255,255,0.5) !important; }
#sidebar-menu ul li a:hover,
#sidebar-menu ul li a:focus {
    color: #ffffff !important;
    background-color: rgba(255,255,255,0.07) !important;
}
#sidebar-menu ul li a:hover i { color: var(--mchs-accent) !important; }
#sidebar-menu ul li.mm-active > a,
#sidebar-menu ul li.active > a {
    color: #ffffff !important;
    background-color: rgba(255,255,255,0.1) !important;
    border-left: 3px solid var(--mchs-accent) !important;
}
#sidebar-menu ul li.mm-active > a i,
#sidebar-menu ul li.active > a i { color: var(--mchs-accent) !important; }

#sidebar-menu ul ul { background-color: rgba(0,0,0,0.15) !important; }
#sidebar-menu ul ul li a {
    color: rgba(255,255,255,0.5) !important;
    font-size: 13px !important;
}
#sidebar-menu ul ul li a:hover { color: rgba(255,255,255,0.85) !important; }

.menu-title {
    color: rgba(255,255,255,0.3) !important;
    font-size: 10px !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

/* ══ 6. CARDS ═══════════════════════════════════════════════════════════ */
.card {
    background-color: var(--mchs-card) !important;
    border: 1px solid var(--mchs-border) !important;
    border-radius: var(--mchs-radius-lg) !important;
    box-shadow: var(--mchs-shadow-card) !important;
}
.card-header {
    background-color: var(--mchs-card-header) !important;
    border-bottom: 1px solid var(--mchs-border) !important;
    border-radius: var(--mchs-radius-lg) var(--mchs-radius-lg) 0 0 !important;
}
.card-title {
    color: var(--mchs-primary) !important;
    font-family: var(--mchs-font) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

/* ══ 7. BUTTONS ═════════════════════════════════════════════════════════ */
.btn-primary {
    background-color: var(--mchs-primary) !important;
    border-color: var(--mchs-primary) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: var(--mchs-radius) !important;
    font-family: var(--mchs-font) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--mchs-primary-mid) !important;
    border-color: var(--mchs-primary-mid) !important;
    box-shadow: var(--mchs-shadow-btn) !important;
}
.btn-success {
    background-color: var(--mchs-success) !important;
    border-color: var(--mchs-success) !important;
    border-radius: var(--mchs-radius) !important;
    font-weight: 600 !important;
}
.btn-warning {
    background-color: var(--mchs-warning-btn) !important;
    border-color: var(--mchs-warning-btn) !important;
    color: #fff !important;
    border-radius: var(--mchs-radius) !important;
    font-weight: 600 !important;
}
.btn-danger {
    background-color: var(--mchs-danger) !important;
    border-color: var(--mchs-danger) !important;
    border-radius: var(--mchs-radius) !important;
    font-weight: 600 !important;
}
.btn-secondary {
    background-color: var(--mchs-secondary) !important;
    border-color: var(--mchs-secondary) !important;
    color: #fff !important;
    border-radius: var(--mchs-radius) !important;
    font-weight: 600 !important;
}
.btn-info {
    background-color: var(--mchs-info) !important;
    border-color: var(--mchs-info) !important;
    color: #fff !important;
    border-radius: var(--mchs-radius) !important;
    font-weight: 600 !important;
}
.btn-outline-info {
    color: var(--mchs-info) !important;
    border-color: var(--mchs-info) !important;
    border-radius: var(--mchs-radius) !important;
}
.btn-outline-info:hover {
    background-color: var(--mchs-info) !important;
    color: #fff !important;
}
.btn-outline-success {
    color: var(--mchs-success) !important;
    border-color: var(--mchs-success) !important;
    border-radius: var(--mchs-radius) !important;
}
.btn-outline-warning {
    color: var(--mchs-warning-btn) !important;
    border-color: var(--mchs-warning-btn) !important;
    border-radius: var(--mchs-radius) !important;
}

/* <a class="btn ..."> must keep white text: the global a{} rule is !important */
a.btn-primary, a.btn-success, a.btn-danger, a.btn-secondary,
a.btn-warning, a.btn-info, a.btn-dark { color: #fff !important; }
.btn-outline-primary {
    color: var(--mchs-primary) !important;
    border-color: var(--mchs-primary) !important;
    border-radius: var(--mchs-radius) !important;
}
.btn-outline-primary:hover { background-color: var(--mchs-primary) !important; color: #fff !important; }
.btn-outline-secondary {
    color: var(--mchs-secondary) !important;
    border-color: var(--mchs-secondary) !important;
    border-radius: var(--mchs-radius) !important;
}
.btn-outline-secondary:hover { background-color: var(--mchs-secondary) !important; color: #fff !important; }
.btn-outline-danger {
    color: var(--mchs-danger) !important;
    border-color: var(--mchs-danger) !important;
    border-radius: var(--mchs-radius) !important;
}
.btn-outline-danger:hover { background-color: var(--mchs-danger) !important; color: #fff !important; }
.btn-outline-success:hover, .btn-outline-warning:hover, .btn-outline-info:hover { color: #fff !important; }
.btn.btn-purple {
    background-color: var(--mchs-purple-edge) !important;
    border-color: var(--mchs-purple-edge) !important;
    color: #fff !important;
    border-radius: var(--mchs-radius) !important;
}
.btn.btn-purple:hover { background-color: var(--mchs-purple) !important; }

/* ══ 8. FORMS ═══════════════════════════════════════════════════════════ */
.form-control, .form-select {
    border: 1.5px solid var(--mchs-border) !important;
    border-radius: var(--mchs-radius) !important;
    font-family: var(--mchs-font) !important;
    font-size: 14px !important;
    color: var(--mchs-text) !important;
    background-color: #fff !important;
    transition: all 0.2s !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--mchs-primary) !important;
    box-shadow: var(--mchs-focus-ring) !important;
}
.form-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--mchs-label) !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 6px !important;
}
.form-check-input:checked {
    background-color: var(--mchs-primary) !important;
    border-color: var(--mchs-primary) !important;
}

/* ══ 9. TABLES ══════════════════════════════════════════════════════════ */
.table {
    font-family: var(--mchs-font) !important;
    font-size: 14px !important;
}
.table thead th,
.table-light th {
    background-color: var(--mchs-primary-light) !important;
    color: var(--mchs-primary) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-color: var(--mchs-border) !important;
}
.table-hover tbody tr:hover { background-color: rgba(var(--mchs-primary-rgb), 0.05) !important; }
.table td, .table th {
    border-color: var(--mchs-border) !important;
    padding: 12px 16px !important;
    vertical-align: middle !important;
}
.table-bordered { border-color: var(--mchs-border) !important; }

/* ══ 10. BADGES ═════════════════════════════════════════════════════════ */
.badge {
    font-family: var(--mchs-font) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: var(--mchs-radius-sm) !important;
    letter-spacing: 0.3px !important;
}
.badge-soft-success  { background-color: var(--mchs-success-soft) !important; color: var(--mchs-success-ink) !important; }
.badge-soft-danger   { background-color: var(--mchs-danger-soft)  !important; color: var(--mchs-danger-ink)  !important; }
.badge-soft-warning  { background-color: var(--mchs-warning-soft) !important; color: var(--mchs-warning-ink) !important; }
.badge-soft-info     { background-color: var(--mchs-info-soft)    !important; color: var(--mchs-info-ink)    !important; }
.badge-soft-primary  { background-color: var(--mchs-primary-light)   !important; color: var(--mchs-primary)        !important; }
.badge-soft-secondary{ background-color: var(--mchs-neutral-soft) !important; color: var(--mchs-neutral-ink) !important; }
.badge.bg-danger, .badge-soft-danger.position-absolute { background-color: var(--mchs-red) !important; color: #fff !important; }

/* ══ 11. ALERTS ═════════════════════════════════════════════════════════ */
.alert {
    border-radius: var(--mchs-radius-md) !important;
    font-size: 14px !important;
    font-family: var(--mchs-font) !important;
    border: none !important;
}
.alert-success { background-color: var(--mchs-success-tint) !important; color: var(--mchs-success-ink) !important; border-left: 4px solid var(--mchs-success-edge) !important; }
.alert-danger  { background-color: var(--mchs-danger-tint)  !important; color: var(--mchs-danger-ink)  !important; border-left: 4px solid var(--mchs-danger-edge)  !important; }
.alert-warning { background-color: var(--mchs-warning-tint) !important; color: var(--mchs-warning-ink) !important; border-left: 4px solid var(--mchs-warning-edge) !important; }
.alert-info    { background-color: var(--mchs-info-tint)    !important; color: var(--mchs-info-ink)    !important; border-left: 4px solid var(--mchs-info-edge)    !important; }

/* ══ 12. MODALS ═════════════════════════════════════════════════════════ */
.modal-content {
    border-radius: var(--mchs-radius-xl) !important;
    border: none !important;
    box-shadow: var(--mchs-shadow-modal) !important;
    font-family: var(--mchs-font) !important;
}
.modal-header {
    background-color: var(--mchs-primary) !important;
    color: #fff !important;
    border-radius: var(--mchs-radius-xl) var(--mchs-radius-xl) 0 0 !important;
    padding: 16px 24px !important;
    border-bottom: none !important;
}
.modal-title { color: #fff !important; font-family: var(--mchs-font) !important; font-weight: 700 !important; font-size: 16px !important; }
.btn-close   { filter: invert(1) !important; }
.modal-footer{ border-top: 1px solid var(--mchs-border) !important; }

/* ══ 13. PAGE TITLE & STAT CARDS ════════════════════════════════════════ */
.page-title-box h4,
.page-title-box .page-title {
    color: var(--mchs-primary) !important;
    font-family: var(--mchs-font) !important;
    font-weight: 700 !important;
}
.page-title-box .breadcrumb-item a      { color: var(--mchs-primary) !important; opacity: 0.6; }
.page-title-box .breadcrumb-item.active { color: var(--mchs-primary) !important; }

.avatar-title { border-radius: var(--mchs-radius-md) !important; }
.avatar-title.bg-light.text-primary { background-color: var(--mchs-primary-light)   !important; color: var(--mchs-primary)        !important; }
.avatar-title.bg-light.text-success { background-color: var(--mchs-success-soft) !important; color: var(--mchs-success-ink) !important; }
.avatar-title.bg-light.text-warning { background-color: var(--mchs-warning-soft) !important; color: var(--mchs-warning-ink) !important; }
.avatar-title.bg-light.text-danger  { background-color: var(--mchs-danger-soft)  !important; color: var(--mchs-danger-ink)  !important; }

/* ══ 14. FOOTER ═════════════════════════════════════════════════════════ */
.footer {
    background-color: #fff !important;
    border-top: 1px solid var(--mchs-border) !important;
    color: var(--mchs-muted) !important;
    font-size: 13px !important;
    font-family: var(--mchs-font) !important;
}

/* ══ 15. SCROLLBAR ══════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--mchs-primary-rgb), 0.30); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--mchs-primary-rgb), 0.50); }

/* ══ 16. DATATABLES & PAGINATION ════════════════════════════════════════ */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1.5px solid var(--mchs-border) !important;
    border-radius: var(--mchs-radius) !important;
    padding: 6px 12px !important;
    font-family: var(--mchs-font) !important;
    font-size: 13px !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--mchs-primary) !important;
    outline: none !important;
    box-shadow: var(--mchs-focus-ring) !important;
}
.page-item.active .page-link {
    background-color: var(--mchs-primary) !important;
    border-color: var(--mchs-primary) !important;
}
.pagination { margin-bottom: 0 !important; }
.page-link {
    color: var(--mchs-primary) !important;
    border-radius: var(--mchs-radius-sm) !important;
    font-family: var(--mchs-font) !important;
}
.page-link:hover { background-color: var(--mchs-primary-light) !important; }

/* ══ 17. DROPDOWNS & RIGHT SIDEBAR ══════════════════════════════════════ */
.dropdown-menu {
    border: 1px solid var(--mchs-border) !important;
    border-radius: var(--mchs-radius-md) !important;
    box-shadow: var(--mchs-shadow-menu) !important;
    font-family: var(--mchs-font) !important;
    font-size: 13.5px !important;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--mchs-primary-light) !important;
    color: var(--mchs-primary) !important;
}
.dropdown-item.active { background-color: var(--mchs-primary) !important; }

.right-bar { background-color: #fff !important; border-left: 1px solid var(--mchs-border) !important; }
.waves-effect { overflow: hidden; }

/* ══ 18. ONE-FONT POLICY ════════════════════════════════════════════════
   Every element renders in the MCHS brand stack. Icon fonts are restored
   below — they must keep their own families or glyphs render as boxes. */
*, *::before, *::after {
    font-family: var(--mchs-font) !important;
}

/* ══ 19. ICON FONT RESTORATIONS (order matters) ═════════════════════════ */
[class^="ri-"], [class*=" ri-"],
[class^="ri-"]::before, [class*=" ri-"]::before,
[class^="ri-"]::after, [class*=" ri-"]::after {
    font-family: "remixicon" !important;
}
[class^="mdi-"], [class*=" mdi-"], .mdi,
[class^="mdi-"]::before, [class*=" mdi-"]::before, .mdi::before,
[class^="mdi-"]::after, [class*=" mdi-"]::after, .mdi::after {
    font-family: "Material Design Icons" !important;
}
[class^="dripicons-"], [class*=" dripicons-"],
[class^="dripicons-"]::before, [class*=" dripicons-"]::before,
[class^="dripicons-"]::after, [class*=" dripicons-"]::after {
    font-family: "dripicons-v2" !important;
}
/* Font Awesome 5 (bundled theme icons) */
.fa, .fas, .far, .fal, .fad,
.fa::before, .fas::before, .far::before, .fal::before, .fad::before,
.fa::after, .fas::after, .far::after, .fal::after, .fad::after {
    font-family: "Font Awesome 5 Free" !important;
}
/* Font Awesome 6 (login page CDN) */
.fa-solid, .fa-regular, .fa-light, .fa-thin, .fa-duotone,
[class^="fa-"], [class*=" fa-"],
.fa-solid::before, .fa-regular::before, .fa-light::before, .fa-thin::before, .fa-duotone::before,
[class^="fa-"]::before, [class*=" fa-"]::before,
.fa-solid::after, .fa-regular::after, .fa-light::after, .fa-thin::after, .fa-duotone::after,
[class^="fa-"]::after, [class*=" fa-"]::after {
    font-family: var(--fa-style-family, "Font Awesome 6 Free") !important;
}
.fab, .fa-brands,
.fab::before, .fa-brands::before,
.fab::after, .fa-brands::after {
    font-family: var(--fa-style-family-brands, "Font Awesome 5 Brands") !important;
}

/* ══ 20. COMPONENTS & UTILITIES (replace inline styles here) ════════════
   Add a class here each time a view's style="" is removed. Group by page
   or component and keep colours as var(--mchs-*) tokens.
   ─────────────────────────────────────────────────────────────────────── */

/* ── Utilities ── */
.cursor-pointer { cursor: pointer; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.w-160 { width: 160px; }

/* ── Badge sizes (the base .badge rule is !important, so these are too) ── */
.badge.badge-md { font-size: 12px !important; padding: 5px 12px !important; }
.badge.badge-lg { font-size: 13px !important; padding: 6px 14px !important; }

/* ── Section label (small uppercase heading above a group of fields) ── */
.section-label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--mchs-primary-mid) !important;
}

/* ── Icons ── */
.card-header-icon { font-size: 18px; color: var(--mchs-primary-mid); }
.icon-muted       { font-size: 20px; color: var(--mchs-faint); }

/* ── Profile page (admin/users/show) ── */
.profile-banner {
    position: relative;
    height: 120px;
    border-radius: var(--mchs-radius-lg) var(--mchs-radius-lg) 0 0;
    background: linear-gradient(135deg, var(--mchs-primary-mid) 0%, var(--mchs-primary) 100%);
}
.profile-avatar-wrap { position: absolute; bottom: -44px; left: 32px; }
.profile-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #fff;
    padding: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.profile-avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--mchs-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--mchs-primary-mid);
}
.profile-header { padding: 56px 32px 24px; gap: 12px; }
.profile-avatar-inner img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* ── Avatar (profile photo; initials fallback when there is no image) ── */
.mchs-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: var(--mchs-primary-light);
    color: var(--mchs-primary-mid);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    user-select: none;
}
.mchs-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mchs-avatar-sm { width: 34px; height: 34px; font-size: 13px; }
.mchs-avatar-lg { width: 88px; height: 88px; font-size: 28px; }

/* Topbar avatar — replaces the template's stock photo (Skote: 36px + 3px pad) */
.header-profile-avatar {
    width: 36px;
    height: 36px;
    font-size: 12px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
/* The avatar is the whole account trigger (no name text beside it), so give it
   a visible hover/open state — vendor sizes the bell at 16px, too small. */
.header-item .header-profile-avatar { transition: var(--mchs-transition); }
.header-item:hover .header-profile-avatar,
.header-item:focus-visible .header-profile-avatar,
.header-item[aria-expanded="true"] .header-profile-avatar {
    border-color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.35);
}
.header-bell-icon { font-size: 22px; line-height: 1; }

/* Clickable avatar that opens the file viewer */
.mchs-avatar-btn {
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--mchs-transition);
}
.mchs-avatar-btn:hover .mchs-avatar,
.mchs-avatar-btn:focus-visible .mchs-avatar { box-shadow: 0 0 0 3px rgba(var(--mchs-primary-rgb), 0.22); }

/* ── Read-only info tile (label + value) ── */
.info-tile {
    background: var(--mchs-bg-subtle);
    border-radius: var(--mchs-radius-md);
    padding: 16px;
}
.info-tile-label {
    font-size: 11px;
    color: var(--mchs-faint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.info-tile-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--mchs-text-strong);
}

/* ── More utilities ── */
.w-130 { width: 130px; }
.text-brand      { color: var(--mchs-primary-mid) !important; }
.text-label      { color: var(--mchs-label) !important; }
.text-ink-danger { color: var(--mchs-danger-ink) !important; }
.scroll-box      { max-height: 180px; overflow-y: auto; }
.table.table-compact { font-size: 13px !important; }

/* ── Card with a coloured left edge ── */
.card.card-accent-left { border-left: 4px solid var(--mchs-primary-mid) !important; }

/* ── Stat tile: coloured summary box (counts). Set the colour with a modifier ── */
.stat-tile {
    background: var(--stat-bg, var(--mchs-bg-subtle));
    border-radius: var(--mchs-radius-md);
    padding: 16px;
    text-align: center;
}
.stat-tile-label {
    font-size: 11px;
    color: var(--stat-ink, var(--mchs-text));
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}
.stat-tile-value { color: var(--stat-ink, var(--mchs-text)) !important; }
.stat-tile-danger  { --stat-bg: var(--mchs-danger-soft);  --stat-ink: var(--mchs-danger-ink); }
.stat-tile-warning { --stat-bg: var(--mchs-warning-soft); --stat-ink: var(--mchs-warning-ink); }
.stat-tile-info    { --stat-bg: var(--mchs-info-soft);    --stat-ink: var(--mchs-info-ink); }
.stat-tile-success { --stat-bg: var(--mchs-success-soft); --stat-ink: var(--mchs-success-ink); }

/* ── Dashboard stat grid (home/stat_tile partial) ──
   auto-fit decides the column count from the space available, and every track
   is 1fr, so all tiles are exactly the same width. grid-auto-rows:1fr makes
   rows equal in height too — a lone tile left over on the last row keeps the
   size of its siblings instead of looking smaller or stretching, and the note
   is pushed to the bottom so labels/values line up across the row. */
.mchs-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 195px), 1fr));
    grid-auto-rows: 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
.mchs-stat-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 18px;
    background: var(--mchs-card);
    border: 1px solid var(--mchs-border);
    border-radius: var(--mchs-radius-lg);
    box-shadow: var(--mchs-shadow-card);
    color: var(--mchs-text) !important;
    text-decoration: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.mchs-stat-card:hover,
.mchs-stat-card:focus-visible {
    color: var(--mchs-text) !important;
    border-color: var(--mchs-primary-edge);
    box-shadow: 0 6px 18px rgba(var(--mchs-primary-rgb), 0.16);
    transform: translateY(-1px);
}
.mchs-stat-card:focus-visible { outline: 3px solid rgba(var(--mchs-primary-rgb), 0.25); outline-offset: 2px; }
.mchs-stat-card--active {
    border-color: var(--mchs-primary);
    box-shadow: 0 0 0 3px rgba(var(--mchs-primary-rgb), 0.15);
}
.mchs-stat-card--active .mchs-stat-card__label { color: var(--mchs-primary); }
.mchs-stat-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.mchs-stat-card__label {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mchs-muted);
}
.mchs-stat-card__value {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--mchs-primary);
    font-variant-numeric: tabular-nums;
}
.mchs-stat-card__note {
    margin: auto 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--mchs-muted);
}
.mchs-stat-card__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-size: 20px;
    border-radius: var(--mchs-radius-md);
    background: var(--mchs-primary-light);
    color: var(--mchs-primary);
}
.mchs-stat-card__icon--success { background: var(--mchs-success-soft); color: var(--mchs-success-ink); }
.mchs-stat-card__icon--warning { background: var(--mchs-warning-soft); color: var(--mchs-warning-ink); }
.mchs-stat-card__icon--danger  { background: var(--mchs-danger-soft);  color: var(--mchs-danger-ink);  }
.mchs-stat-card__icon--info    { background: var(--mchs-info-soft);    color: var(--mchs-info-ink);    }

/* ── Import result panel ── */
.card.result-card-success {
    background: var(--mchs-success-tint) !important;
    border: 0 !important;
    border-left: 4px solid var(--mchs-success-edge) !important;
    border-radius: var(--mchs-radius-md) !important;
}
.result-title  { color: var(--mchs-success-ink) !important; font-weight: 700; }
.result-number { font-size: 24px; font-weight: 700; }
.result-number-success { color: var(--mchs-success-ink); }
.result-number-danger  { color: var(--mchs-danger-ink); }
.result-number-neutral { color: var(--mchs-secondary); }

/* ── File drop zone (state classes are toggled by JS: is-dragover, has-file) ── */
.drop-zone {
    border: 2px dashed var(--mchs-primary-edge);
    border-radius: var(--mchs-radius-lg);
    padding: 48px 24px;
    text-align: center;
    background: var(--mchs-bg-subtle);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 20px;
}
.drop-zone.has-file    { border-color: var(--mchs-primary-mid); background: var(--mchs-primary-tint); }
.drop-zone.is-dragover { border-color: var(--mchs-primary);     background: var(--mchs-primary-light); }
.drop-zone-icon  { font-size: 40px; color: var(--mchs-primary-mid); display: block; margin-bottom: 10px; }
.drop-zone-title { font-weight: 600; color: var(--mchs-text-strong); }

/* ── Small helpers ── */
.eyebrow     { font-size: 11px; letter-spacing: 0.5px; }
.list-indent { padding-left: 18px; }
.mw-140 { max-width: 140px; }
.mw-160 { max-width: 160px; }

/* ── Application journey (student/applications/my) ── */
.workflow-stepper {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 28px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.workflow-step {
    flex: 1;
    min-width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-align: center;
}
.workflow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18px;
    left: 55%;
    width: 90%;
    height: 2px;
    background: var(--mchs-border);
    z-index: 0;
}
.workflow-step.done:not(:last-child)::after   { background: var(--mchs-success); }
.workflow-step.active:not(:last-child)::after { background: var(--mchs-warning-btn); }

.step-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    position: relative;
    z-index: 1;
    border: 2px solid var(--mchs-border);
    background: var(--mchs-bg-subtle);
    color: var(--mchs-muted);
    transition: all 0.2s;
}
.workflow-step.done   .step-dot { background: var(--mchs-success);     border-color: var(--mchs-success);     color: #fff; }
.workflow-step.active .step-dot { background: var(--mchs-warning-btn); border-color: var(--mchs-warning-btn); color: #fff; }
.workflow-step.error  .step-dot { background: var(--mchs-danger);      border-color: var(--mchs-danger);      color: #fff; }

.step-label { font-size: 11px; font-weight: 600; color: var(--mchs-muted); margin-top: 7px; line-height: 1.3; }
.workflow-step.done   .step-label { color: var(--mchs-success); }
.workflow-step.active .step-label { color: var(--mchs-warning-btn); }
.workflow-step.error  .step-label { color: var(--mchs-danger); }

/* Gate card: a bordered status panel */
.gate-card {
    border-radius: var(--mchs-radius-lg);
    border: 2px solid;
    padding: 20px 24px;
    margin-bottom: 24px;
}
.gate-card.gate-blocked { border-color: var(--mchs-warning-edge); background: var(--mchs-warning-tint); }
.gate-card.gate-open    { border-color: var(--mchs-success-edge); background: var(--mchs-success-tint); }
.gate-card.gate-error   { border-color: var(--mchs-danger-edge);  background: var(--mchs-danger-tint); }
.gate-card.gate-info    { border-color: var(--mchs-info-edge);    background: var(--mchs-info-tint); }
.gate-card.gate-expired { border-color: var(--mchs-purple-edge);  background: var(--mchs-purple-tint); animation: expiredPulse 2.5s ease-in-out 3; }
.gate-icon  { font-size: 28px; margin-bottom: 8px; }
.gate-icon-purple  { color: var(--mchs-purple-edge); }
.gate-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.gate-title-purple { color: var(--mchs-purple-deep); }
.gate-text  { font-size: 13px; color: var(--mchs-label); margin-bottom: 0; }

@keyframes expiredPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mchs-purple-edge) 40%, transparent); }
    50%      { box-shadow: 0 0 0 8px transparent; }
}

/* Status trail inside the application card */
.app-status-trail { border-left: 3px solid var(--mchs-border); padding-left: 18px; margin-left: 8px; }
.trail-item { position: relative; margin-bottom: 16px; }
.trail-item::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mchs-border);
}
.trail-item.done::before   { background: var(--mchs-success); }
.trail-item.active::before { background: var(--mchs-warning-btn); }
.trail-item.error::before  { background: var(--mchs-danger); }
.trail-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--mchs-muted); }
.trail-item.done   .trail-label { color: var(--mchs-success); }
.trail-item.active .trail-label { color: var(--mchs-warning-btn); }
.trail-item.error  .trail-label { color: var(--mchs-danger); }
.trail-value { font-size: 13px; color: var(--mchs-text); margin-top: 1px; }

/* Deadline countdown */
.deadline-countdown {
    background: var(--mchs-warning-tint);
    border: 1px solid var(--mchs-warning-edge);
    border-radius: var(--mchs-radius);
    padding: 12px 16px;
    font-size: 13px;
}
.deadline-countdown.urgent { background: var(--mchs-danger-tint); border-color: var(--mchs-danger-edge); }
.deadline-number { font-size: 28px; font-weight: 800; color: var(--mchs-warning-btn); line-height: 1; }
.deadline-countdown.urgent .deadline-number { color: var(--mchs-danger); }

/* ── Fee management (admin/payments) ── */
.fee-stat-card {
    border: 1px solid var(--mchs-border);
    border-radius: var(--mchs-radius-md);
    padding: 18px 20px;
    background: #fff;
    transition: box-shadow 0.15s;
}
.fee-stat-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); }
.fee-stat-card .stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--mchs-muted);
    margin-bottom: 6px;
}
.fee-stat-card .stat-value { font-size: 30px; font-weight: 700; line-height: 1; }
.fee-stat-card.stat-await  .stat-value { color: var(--mchs-warning-btn); }
.fee-stat-card.stat-hostel .stat-value { color: var(--mchs-purple); }
.fee-stat-card.stat-clear  .stat-value { color: var(--mchs-success); }
.fee-stat-card.stat-total  .stat-value { color: var(--mchs-primary); }

.fee-tab-bar {
    display: flex;
    gap: 6px;
    background: var(--mchs-bg-subtle);
    border: 1px solid var(--mchs-border);
    border-radius: 50px;
    padding: 5px;
    flex-wrap: wrap;
}
.fee-tab {
    border: none;
    background: transparent;
    border-radius: 50px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--mchs-muted) !important;     /* !important: beats the global a{} rule */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: all 0.15s;
    white-space: nowrap;
    text-decoration: none;
}
.fee-tab:hover { background: #fff; color: var(--mchs-text) !important; }
.fee-tab.active {
    background: var(--mchs-primary);
    color: #fff !important;
    box-shadow: var(--mchs-shadow-btn);
}
.fee-tab .tab-badge {
    background: var(--mchs-warning-btn);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50px;
    padding: 1px 7px;
    min-width: 20px;
    text-align: center;
}
.fee-tab.active .tab-badge { background: rgba(255, 255, 255, 0.25); }

.context-banner {
    border-radius: var(--mchs-radius-md);
    border-left: 4px solid var(--mchs-primary);
    background: var(--mchs-primary-light);
    color: var(--mchs-primary-dark);
    padding: 11px 16px;
    font-size: 13px;
}
.context-banner.banner-warning { border-left-color: var(--mchs-warning-edge); background: var(--mchs-warning-tint); color: var(--mchs-warning-ink); }
.context-banner.banner-success { border-left-color: var(--mchs-success-edge); background: var(--mchs-success-tint); color: var(--mchs-success-ink); }
.context-banner.banner-purple  { border-left-color: var(--mchs-purple);       background: var(--mchs-purple-tint);  color: var(--mchs-purple-ink); }

.filter-bar {
    background: var(--mchs-bg-subtle);
    border: 1px solid var(--mchs-border);
    border-radius: var(--mchs-radius-md);
    padding: 14px 16px;
    gap: 10px;
}
.filter-search { flex-grow: 1; min-width: 200px; max-width: 320px; }

.student-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.student-table thead th {
    background: var(--mchs-bg-subtle);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--mchs-muted);
    padding: 10px 14px;
    border-bottom: 1px solid var(--mchs-border);
    white-space: nowrap;
}
.student-table tbody tr { border-bottom: 1px solid var(--mchs-neutral-soft); transition: background 0.1s; }
.student-table tbody tr:hover { background: var(--mchs-primary-tint); }
.student-table tbody td { padding: 12px 14px; vertical-align: middle; font-size: 13px; }
.student-name { font-weight: 600; color: var(--mchs-text); font-size: 14px; }
.student-reg  { font-size: 11px; color: var(--mchs-muted); }

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 50px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
}
.pill-none      { background: var(--mchs-neutral-soft); color: var(--mchs-neutral-ink); }
.pill-pending   { background: var(--mchs-warning-tint); color: var(--mchs-warning-btn); }
.pill-confirmed { background: var(--mchs-success-tint); color: var(--mchs-success-ink); }
.pill-rejected  { background: var(--mchs-danger-tint);  color: var(--mchs-danger); }
.pill-overdue   { background: var(--mchs-danger-tint);  color: var(--mchs-danger); font-weight: 700; }

.btn-confirm-fee {
    background: var(--mchs-success);
    border: none;
    border-radius: var(--mchs-radius);
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.btn-confirm-fee:hover { background: var(--mchs-success-ink); }
.btn-reject-fee,
.btn-reverse-fee {
    background: #fff;
    border: 1.5px solid;
    border-radius: var(--mchs-radius);
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-reject-fee  { border-color: var(--mchs-danger);      color: var(--mchs-danger); }
.btn-reject-fee:hover  { background: var(--mchs-danger-tint); }
.btn-reverse-fee { border-color: var(--mchs-warning-btn); color: var(--mchs-warning-btn); }
.btn-reverse-fee:hover { background: var(--mchs-warning-tint); }

.countdown-badge {
    display: inline-block;
    background: var(--mchs-warning-tint);
    color: var(--mchs-warning-btn);
    border-radius: var(--mchs-radius-sm);
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
}
.countdown-badge.urgent { background: var(--mchs-danger-tint); color: var(--mchs-danger); }

.empty-state { text-align: center; padding: 60px 20px; color: var(--mchs-muted); }
.empty-state i { font-size: 48px; margin-bottom: 12px; display: block; opacity: 0.4; }

.row-unconfirmed { background: var(--mchs-warning-tint); }
.row-unconfirmed:hover { background: var(--mchs-warning-soft) !important; }

/* (add cleaned-up page/component styles above this line) */

/* ══ 21. LOGIN / GUEST PAGE ═════════════════════════════════════════════
   Used by auth/login.blade.php (<body class="login-page">). Every class is
   prefixed login- so none of the admin rules above can collide with it.
   The !important rules below exist only to beat the global admin rules
   (links, headings, form controls) for this one page. */
.login-page { margin: 0; overflow-x: hidden; }

.login-page h1,
.login-page h3 { color: #fff !important; }

.login-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: #fff;
    background:
        linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
        url('../images/background.jpg') no-repeat center center / cover;
}

/* Navbar */
.login-nav { padding: 1.5rem 2rem; z-index: 10; }
.login-nav .navbar-brand img { height: 65px; }
.login-nav .nav-link {
    color: #fff !important;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 12px;
    transition: var(--mchs-transition);
    display: flex;
    align-items: center;
}
.login-nav .nav-link i { font-size: 1.1rem; transition: var(--mchs-transition); }
.login-nav .nav-link:hover { color: var(--mchs-accent) !important; }
.login-nav .nav-link:hover i { transform: translateY(-2px); }
.login-nav .login-apply-btn {
    background-color: #fff !important;
    color: var(--mchs-text-strong) !important;
    border-radius: 5px;
    padding: 8px 20px !important;
}

/* Hero text */
.login-hero-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
    padding: 2rem 5%;
}
.login-hero-text h1 { font-size: 3.2rem; font-weight: 700; margin-bottom: 0.5rem; }
.login-hero-text h1 span { color: var(--mchs-accent); }
.login-description {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 500px;
    margin-bottom: 2rem;
    opacity: 0.9;
}
.login-campus-tags { display: flex; gap: 10px; margin-top: 8px; }
.login-campus-tag {
    padding: 6px 18px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.4px;
}

/* Glass card */
.login-card {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    margin-top: -60px;
}
.login-page .login-card .form-control {
    background: var(--mchs-bg-field) !important;
    border: none !important;
    padding: 0.8rem !important;
    border-radius: var(--mchs-radius) !important;
    font-size: 14px !important;
    color: var(--mchs-text) !important;
    transition: var(--mchs-transition) !important;
}
.login-page .login-card .form-control:focus {
    background: #fff !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mchs-accent) 45%, transparent) !important;
    outline: none;
}
.login-page .login-card .form-control.is-invalid {
    border: 1.5px solid var(--mchs-ondark-danger-edge) !important;
}
.login-card .invalid-feedback {
    font-size: 12px;
    color: var(--mchs-ondark-danger);
    margin-top: 4px;
    display: block;
}

/* Labels & small links */
.login-label,
.login-link-btn {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
}
.login-link-btn {
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: color 0.2s;
}
.login-link-btn:hover { color: var(--mchs-accent); }

/* Show / hide password toggle */
.login-password-wrap { position: relative; }
.login-page .login-card .login-password-wrap .form-control { padding-right: 2.9rem !important; }
.login-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #6b7280;
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
}
.login-password-toggle:hover { color: var(--mchs-accent); background: rgba(104, 18, 44, 0.08); }
.login-password-toggle:focus-visible { outline: 2px solid var(--mchs-accent); outline-offset: 2px; }
.login-password-toggle.is-visible { color: var(--mchs-accent); }

.login-page a.login-link {
    color: var(--mchs-accent) !important;
    text-decoration: none !important;
    transition: var(--mchs-transition);
}
.login-page a.login-link:hover { color: #fff !important; }

/* Alerts on the glass card */
.login-alert {
    border-radius: var(--mchs-radius-md);
    padding: 12px 16px;
    font-size: 13px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.login-alert-error {
    background: color-mix(in srgb, var(--mchs-ondark-danger) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--mchs-ondark-danger-edge) 50%, transparent);
    color: var(--mchs-ondark-danger);
}
.login-alert-success {
    background: color-mix(in srgb, var(--mchs-ondark-success) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--mchs-ondark-success-edge) 40%, transparent);
    color: var(--mchs-ondark-success);
}

/* Primary button */
.login-page .login-btn {
    display: inline-block;
    background-color: var(--mchs-primary-mid);
    color: #fff !important;
    padding: 14px 25px;
    font-weight: 700;
    border: none;
    border-radius: var(--mchs-radius-sm);
    text-decoration: none;
    transition: var(--mchs-transition);
}
.login-page .login-btn:hover {
    background-color: var(--mchs-primary);
    color: #fff !important;
    transform: translateY(-2px);
}

/* Bottom bar */
.login-bottom-bar {
    background-color: var(--mchs-primary);
    padding: 15px 40px;
    width: fit-content;
    min-width: 350px;
    font-weight: bold;
    font-size: 0.9rem;
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
}

/* Forgot-password modal */
.login-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.login-modal-overlay.open { display: flex; }
.login-modal-box {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    width: 420px;
    max-width: 90vw;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    animation: loginModalIn 0.2s ease;
}
@keyframes loginModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.login-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--mchs-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 20px;
}
.login-modal-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--mchs-primary);
    margin-bottom: 10px;
}
.login-modal-text {
    font-size: 14px;
    color: var(--mchs-text-soft);
    line-height: 1.75;
    margin-bottom: 24px;
}
.login-modal-campuses {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.login-modal-campus {
    padding: 6px 16px;
    border-radius: 20px;
    background: var(--mchs-primary-light);
    font-size: 12px;
    color: var(--mchs-primary);
    font-weight: 600;
}
.login-modal-close {
    background: var(--mchs-primary-mid);
    color: #fff;
    border: none;
    border-radius: var(--mchs-radius);
    padding: 12px 36px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--mchs-transition);
}
.login-modal-close:hover { background: var(--mchs-primary); }

@media (max-width: 991px) {
    .login-hero-text h1 { font-size: 2.5rem; }
    .login-card { padding: 2rem; margin-top: 0; }
    .login-bottom-bar {
        position: relative;
        width: 100%;
        clip-path: none;
        text-align: center;
    }
    .login-nav .nav-link { margin: 10px 0; }
}

/* ══ 22. PAGE LOADER (login page) ════════════════════════════════════════
   Same brand moment as mchs.mw: crest in a white disc, spinning ring,
   animated dots and a progress bar over the aqua gradient. */
.mchs-loader {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        var(--mchs-primary-dark) 0%,
        var(--mchs-primary) 60%,
        var(--mchs-primary-mid) 100%);
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.mchs-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.mchs-loader-content {
    text-align: center;
    padding: 0 20px;
    animation: mchsLoaderFadeUp 0.8s ease both;
}
.mchs-loader-logo {
    position: relative;
    width: 112px;
    height: 112px;
    margin: 0 auto 28px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.mchs-loader-logo img {
    width: 72%;
    height: 72%;
    object-fit: contain;
}
.mchs-loader-logo::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--mchs-red);
    animation: mchsLoaderSpin 1.1s linear infinite;
}
.mchs-loader .mchs-loader-title {
    color: #fff;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.25;
    margin: 0 0 8px;
}
.mchs-loader .mchs-loader-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.mchs-loader .mchs-loader-text {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0 0 14px;
}
.mchs-loader-dots::after {
    content: '.';
    animation: mchsLoaderDots 1.4s steps(1) infinite;
}
.mchs-loader-bar {
    width: 260px;
    max-width: 80vw;
    height: 4px;
    margin: 0 auto;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
}
.mchs-loader-bar-fill {
    width: 0;
    height: 100%;
    border-radius: 4px;
    background: #fff;
    transition: width 0.4s ease;
}
body.is-loading { overflow: hidden; }

@keyframes mchsLoaderSpin { to { transform: rotate(360deg); } }
@keyframes mchsLoaderDots {
    0%   { content: '.'; }
    33%  { content: '..'; }
    66%  { content: '...'; }
}
@keyframes mchsLoaderFadeUp {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 576px) {
    .mchs-loader .mchs-loader-title { font-size: 1.4rem; }
    .mchs-loader-logo { width: 96px; height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
    .mchs-loader-logo::before,
    .mchs-loader-content { animation: none; }
}

/* ══ 23. SIDEBAR ARROWS + COLLAPSED RAIL ═════════════════════════════════
   The vendored build draws submenu arrows with the Material Design Icons
   font, which this project never loads, so they render as empty boxes.
   Draw the chevron from borders instead — no icon font required.
   The second half restyles the 70px collapsed rail, whose vendor colours
   (white flyout, blue hover row) clash with the theme and whose submenu
   background is translucent by default, making the flyout unreadable. */

#sidebar-menu .has-arrow:after {
    content: '' !important;
    display: block !important;
    float: right;
    width: 6px;
    height: 6px;
    margin-top: 8px;
    border-right: 2px solid rgba(255, 255, 255, 0.55);
    border-bottom: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 1px;
    font-family: inherit !important;
    font-size: 0 !important;
    transform: rotate(45deg);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
#sidebar-menu li.mm-active > .has-arrow:after {
    transform: rotate(-135deg);
    border-color: var(--mchs-accent);
}
#sidebar-menu li > .has-arrow:hover:after { border-color: #fff; }

/* Collapsed header brand: swap the wide logo for the crest */
.vertical-collpsed .navbar-brand-box { padding: 0 !important; }
.vertical-collpsed .navbar-brand-box .logo-sm {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 70px;
}
.vertical-collpsed .navbar-brand-box .logo-sm img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Most layouts put home.sidebar inside a .vertical-menu and the partial opens
   its own, so the column is nested twice. Only the outermost wrapper may take
   the template's fixed positioning — the inner one must stay in flow. */
.vertical-menu .vertical-menu,
body.vertical-collpsed .vertical-menu .vertical-menu {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: 100% !important;
    min-height: 100%;
    box-shadow: none !important;
}

/* Collapsed rail. The vendored build flips .vertical-menu to position:absolute
   and leaves the simplebar wrappers at height:100% of an auto-height box, so
   the list collapsed to nothing. Pin the column and give every wrapper a real
   height so the icons keep rendering. */
body.vertical-collpsed .vertical-menu {
    position: fixed !important;
    top: var(--mchs-topbar-height) !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 70px !important;
    overflow: visible !important;
    z-index: 1001 !important;
}
body.vertical-collpsed .vertical-menu [data-simplebar],
body.vertical-collpsed .vertical-menu .simplebar-wrapper,
body.vertical-collpsed .vertical-menu .simplebar-mask,
body.vertical-collpsed .vertical-menu .simplebar-offset,
body.vertical-collpsed .vertical-menu .simplebar-content-wrapper,
body.vertical-collpsed .vertical-menu .simplebar-content {
    height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
}
body.vertical-collpsed #sidebar-menu { display: block !important; height: 100% !important; }

/* Icons only: centred, labels and chevrons hidden */
body.vertical-collpsed #sidebar-menu .has-arrow:after { display: none !important; }
body.vertical-collpsed #sidebar-menu > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 !important;
    border-left: none !important;
}
body.vertical-collpsed #sidebar-menu > ul > li > a i {
    display: inline-block !important;
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1;
    color: rgba(255, 255, 255, 0.7) !important;
}
body.vertical-collpsed #sidebar-menu > ul > li > a span { display: none !important; }
body.vertical-collpsed #sidebar-menu > ul > li.mm-active > a { background-color: rgba(255, 255, 255, 0.12) !important; }
body.vertical-collpsed #sidebar-menu > ul > li > a.active i,
body.vertical-collpsed #sidebar-menu > ul > li.mm-active > a i { color: var(--mchs-accent) !important; }

/* Flyout: hover on desktop, or pinned by a click (see the script in the
   sidebar partial). The row keeps its 70px width — the vendor build stretched
   it to 260px, which pushed the flyout's links under its own label. */
body.vertical-collpsed #sidebar-menu > ul > li:hover > a,
body.vertical-collpsed #sidebar-menu > ul > li.rail-open > a {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    width: 70px !important;
}
body.vertical-collpsed #sidebar-menu > ul > li:hover > a i,
body.vertical-collpsed #sidebar-menu > ul > li.rail-open > a i { color: #fff !important; }

body.vertical-collpsed #sidebar-menu > ul > li:hover > ul,
body.vertical-collpsed #sidebar-menu > ul > li.rail-open > ul {
    display: block;
    top: 0;
    left: 70px;
    position: absolute;
    width: 200px;
    height: auto !important;
    padding: 6px 0;
    background-color: var(--mchs-primary) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0 6px 6px 0;
    box-shadow: 3px 5px 12px -4px rgba(0, 0, 0, 0.35);
    z-index: 9999;
}
/* Last group sits near the bottom, so open its flyout upwards instead */
body.vertical-collpsed #sidebar-menu > ul > li:last-child:hover > ul,
body.vertical-collpsed #sidebar-menu > ul > li:last-child.rail-open > ul {
    top: auto;
    bottom: 0;
    border-radius: 6px 6px 6px 0;
}
body.vertical-collpsed #sidebar-menu > ul > li:hover > ul a,
body.vertical-collpsed #sidebar-menu > ul > li.rail-open > ul a {
    display: block;
    width: 200px;
    padding: 9px 20px !important;
    color: rgba(255, 255, 255, 0.75) !important;
}
body.vertical-collpsed #sidebar-menu > ul > li:hover > ul a:hover,
body.vertical-collpsed #sidebar-menu > ul > li.rail-open > ul a:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.07) !important;
}

/* ══ 24. RESPONSIVE (tablet & phone) ════════════════════════════════════
   The Skote template hides the sidebar below 992px and shows it again when
   the body carries .sidebar-enable. These rules only tighten spacing and add
   a backdrop — they never redefine the template's own layout math. */

@media (max-width: 991.98px) {
    /* Dim the page behind the open mobile menu. The template's document click
       handler closes the menu again, so tapping the overlay works. */
    body.sidebar-enable::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1000;
    }
    body.sidebar-enable .vertical-menu {
        z-index: 1001;
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.35) !important;
    }
}

@media (max-width: 767.98px) {
    /* Page title: date line and page name stack, so keep both compact. */
    .page-title-box { margin-bottom: 4px; }
    .page-title-box h4 { font-size: 18px !important; margin-bottom: 0; }
    .page-title-box .text-muted.font-size-16 { font-size: 13px !important; }
    .page-title-box .breadcrumb { flex-wrap: wrap; }

    /* Card headers holding a title plus buttons must wrap, not squeeze. */
    .card-header { flex-wrap: wrap !important; row-gap: 8px; }

    /* DataTables: search on its own line, pager centred under the table. */
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_paginate { float: none !important; text-align: left; }
    .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0 !important; }
    .dataTables_wrapper .dataTables_info { text-align: center !important; padding-top: 8px !important; }
    .dataTables_wrapper .dataTables_paginate .pagination { justify-content: center; }

    .table-responsive { -webkit-overflow-scrolling: touch; }

    /* Notification and account menus must never be wider than the screen. */
    .dropdown-menu { max-width: calc(100vw - 24px); }
}

@media (max-width: 575.98px) {
    /* Stat tiles: same equal-width grid, just a tighter box. */
    .mchs-stat-grid { gap: 12px; }
    .mchs-stat-card { padding: 14px; gap: 8px; }
    .mchs-stat-card__icon { width: 36px; height: 36px; font-size: 17px; }
    .mchs-stat-card__value { font-size: 22px; }
    .mchs-stat-card__label { font-size: 12px; }

    .modal-header { padding: 12px 16px !important; }
    .modal-body { padding: 16px; }
    .modal-footer { padding: 12px 16px; flex-wrap: wrap; }

    /* Key/value tables: let the label column shrink instead of squeezing the
       value into a sliver (the widths are HTML attributes / utility classes). */
    .table th[width] { width: auto !important; }
    .table .w-130 { width: auto !important; }
}