:root {
            --mpurb-blue: #2b4c7e;
            --mpurb-key: #1f3a63; /* DBIM Key Colour */
            --bg: #FFFFFF;        /* DBIM Inclusive White */
            --linen: #EBEAEA;     /* DBIM Linen */
            --header-height: 72px;
            --sidebar-width: 240px;
        }

        body {
            background: var(--bg);
            font-size: 1rem; /* 16px DBIM Paragraph 1 */
            line-height: 1.5;
            font-family: 'Noto Sans', sans-serif !important;
            text-align: left;
            margin: 0;
        }
        html, body {
            overflow-x: hidden !important;
            max-width: 100vw;
        }
        body.dark-mode .app-card .justify-content-md-end {
            border-top-color: #334155 !important;
        }

        .app-wrapper {
            padding-top: var(--header-height);
        }

        .card-header {
            background-color: #2b4c7e;
            color: white;
            font-weight: 600;
            border-top-left-radius:14px;
            border-top-right-radius:14px;
        }

        #main-content {
            margin-left: var(--sidebar-width);
            min-height: calc(100vh - var(--header-height));
        }

        .content-inner {
            padding: 24px;
        }

        .nav-link.active {
            background: rgba(43,76,126,0.08);
            border-left: 3px solid var(--mpurb-blue);
            color: var(--mpurb-blue) !important;
        }

        #loader {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(255,255,255,0.75);
            backdrop-filter: blur(3px);
            z-index: 2000;
            align-items: center;
            justify-content: center;
        }

        .sidebar-inner {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1;
        }

        .content-wrapper {
            transition: margin-left 0.3s ease-in-out;
            padding: calc(var(--header-height) + 30px) 30px 30px 30px; 
        }


        h4, .h4 {
    font-size: 1.75rem;
    color: #1f3a63; 
}

.text-muted {
    color: #495057 !important;
}

.btn-sm {
    font-size: 1rem;
    padding: 8px 16px;
}

.table th {
    font-size: 0.875rem; /* 14px */
    background-color: var(--mpurb-key) !important;
    color: #FFFFFF;
    text-align: center; /* DBIM Mandatory center-aligned column headers */
    border-bottom: 2px solid #C6C6C6;
}

.table td {
    vertical-align: middle; 
}

.text-sm-90 { font-size: 0.9rem !important; }
.text-sm-85 { font-size: 0.85rem !important; }
.text-sm-65 { font-size: 0.65rem !important; }
.w-70px { width: 70px !important; }
.w-90px { width: 90px !important; }
.search-container { max-width: 250px; }


.slide-in-dropdown {
    animation: slideFade 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform-origin: top center;
}

@keyframes slideFade {
    0% {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(8px) scale(1);
    }
}


.main-header-nav {
    height: 76px;
    z-index: 1050;
}

.header-logo-img {
    padding-bottom: 20px;
}

.profile-icon {
    font-size: 1.8rem;
    color: #2b4c7e;
}

.mobile-toggle-icon {
    font-size: 2rem;
    color: #2b4c7e;
}

.notif-badge {
    top: 2px;
    left: 1.125rem;
    font-size: 0.65rem;
    border: 2px solid #ffffff;
}

.bi-bell-fill {
    color: rgb(57, 57, 19); 
    transition: color 0.2s ease-in-out;
}

#notificationBtn.show .bi-bell-fill {
    color: rgba(57, 57, 19, 0.615);
}

.notif-dropdown-menu {
    width: 520px;
    max-height: 780px; 
    overflow-y: auto;
    border-radius: 12px !important;
}

.hover-bg-light:hover {
    background-color: #f8fafc;
}

.req-uni-name {
    font-size: 0.75rem;
}

.req-student-name {
    font-size: 0.95rem;
}

.req-action-badge {
    font-size: 0.65rem;
}

.header-emblem-img {
    height: 52px;
    width: auto;
    object-fit: contain;
}

.header-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header-brand-text h1 {
    font-size: 1.2rem;
    margin: 0;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #1f3a63; 
}

.header-brand-text p {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    line-height: 1.2;
    color: #6c757d;
}

.dynamic-back-btn i .bi-arrow-left-circle{
    border-radius: 50% !important;
    background-color: #94a3b800 !important;
}
.dynamic-back-btn a, .back-tbn{
    text-decoration: none !important;

}

.btn-promote{
    background-color: #19472af5;
    color: #fefefe;
}

.btn-promote:hover{
    background-color: #19472ab7;
    color: #fefefe;
}


/* --- INBOX FILTER BUTTONS --- */
.filter-btn {
    opacity: 0.65;
    transition: all 0.2s ease-in-out;
    font-weight: 600;
}

/* Let Bootstrap handle the colors, we just force the opacity to 100% when active or hovered */
.filter-btn:hover, .filter-btn.active {
    opacity: 1 !important;
}

/* --- REQUEST INBOX STAMPS --- */
.status-stamp-container {
    min-width: 170px; /* Keeps the right column from collapsing */
}

.tracking-widest {
    letter-spacing: 1.5px; /* Clean, enterprise-style text spacing */
}

/* =========================================
   SWEETALERT 2 CUSTOM THEME (CSP-SAFE)
   ========================================= */

/* 1. Backdrop & Container */
.swal2-container {
    z-index: 10000 !important;
    backdrop-filter: blur(4px); 
    background: rgba(15, 23, 42, 0.6) !important;
}

/* 2. The Modal Box */
.swal2-popup {
    border-radius: 16px !important;
    padding: 2.5em 2em !important;
    background: #ffffffc7 !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important;
    border: none !important;
    width: 32em !important; 
    max-width: 500px !important;
}

/* 3. Typography */
.swal2-title {
    color: #1f3a63 !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    margin-bottom: 0.5em !important;
    padding: 0 !important;
}

.swal2-html-container {
    color: #495057 !important; 
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* 4. Button Layout */
.swal2-actions {
    margin-top: 2em !important;
    gap: 16px !important; 
    width: 100% !important;
}

/* 5. Primary Confirm Button */
.swal2-confirm {
    background-color: #2b4c7e !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 10px rgba(43, 76, 126, 0.2) !important;
    white-space: nowrap !important; 
}

.swal2-confirm:hover {
    background-color: #1f3a63 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(43, 76, 126, 0.3) !important;
}

/* 6. Secondary / Cancel Button */
.swal2-cancel {
    background-color: #f8f9fa !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 11px 28px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important; /* Forces the text to stay on a single line */
}

.swal2-cancel:hover {
    background-color: #fff1f0 !important;
    color: #dc3545 !important; /* Turns red on hover to warn it's a cancellation */
    border-color: #dc3545 !important;
}

/* =========================================
   ACCESSIBILITY WIDGET OVERRIDES
   ========================================= */

/* Make the trigger button match the MPURB theme */
#uw-widget-custom-trigger {
    background: var(--mpurb-blue) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
}

/* =========================================
   ACCESSIBILITY WIDGET EXPANDED PANEL
   ========================================= */

/* 1. Square off the main panel and add a clean shadow */
#uw-main {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: -5px 0 30px rgba(0,0,0,0.15) !important;
}

/* 2. Override the purple gradient header with MPURB Blue */
#uw-main .gradient-head,
#uw-main .second-panel {
    background: var(--mpurb-blue) !important;
    background-image: none !important;
    border-radius: 0 !important; 
}

/* 3. Fix the purple "Reset All Settings" button at the bottom */
#uw-main .reset-panel {
    background: #f8f9fa !important;
    background-image: none !important;
    border-top: 1px solid #dee2e6 !important;
}

#uw-main .reset-panel button {
    background-color: #ffffff !important;
    color: #dc3545 !important;
    border: 1px solid #dc3545 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
}

.uwaw-features .uwaw-features__item .uwaw-features__item__i:active{
    background-color: #2b4c7e !important;
    color: #eff6ff !important;
    border: none;
}

.uwaw-features .uwaw-features__item .uwaw-features__item__i .uwaw-features__item__icon .ux4g-icon:active{
    color: #eff6ff !important;
}

#uw-main .reset-panel button:hover {
    background-color: #fff1f0 !important;
}

/* 7. Custom Warning Banner inside SweetAlert */
.swal-warning-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background-color: #fffbeb; /* Very soft, professional amber */
    border-left: 4px solid #f59e0b; /* Solid amber edge */
    color: #92400e; /* Dark brown/amber text for readability */
    padding: 16px;
    border-radius: 6px;
    text-align: left;
    margin-top: 10px;
}

.swal-warning-banner .warning-icon {
    flex-shrink: 0;
    color: #d97706; /* Icon color matches the border */
    margin-top: 2px;
}

.swal-warning-banner .warning-text {
    font-size: 0.95rem;
    line-height: 1.5;
}

/* =========================================
   SWEETALERT WARNING BANNER - DARK MODE
   ========================================= */
body.dark-mode .swal-warning-banner {
    background-color: #332701; /* Deep, muted gold/brown background */
    border-left-color: #d97706;
    color: #fde68a; /* Soft light amber text to maintain contrast */
}

body.dark-mode .swal-warning-banner .warning-icon {
    color: #fbbf24;
}
/* dark mode override of the ux4cg widget */

/* =========================================
   UX4G DARK MODE OVERRIDES (CORRECTED)
   ========================================= */

/* The UX4G widget applies the class "dark-mode" to the body tag */

/* 1. Fix the Cards */
body.dark-mode .card,
body.dark-mode .stat-card,
body.dark-mode .table-container {
    background-color: #1e293b !important; /* Deep Slate Gray */
    border-color: #334155 !important;
}

/* 2. Fix Text Contrast inside Cards */
body.dark-mode .card *,
body.dark-mode .stat-card *,
body.dark-mode h4, 
body.dark-mode .h4,
body.dark-mode .section-title,
body.dark-mode .text-dark {
    color: #f8fafc !important; /* Off-white text */
}

body.dark-mode .text-muted,
body.dark-mode .text-secondary {
    color: #94a3b8 !important; /* Light gray for muted text */
}

/* 3. Fix the Data Tables */
body.dark-mode .table {
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.dark-mode .table-light,
body.dark-mode .table thead th {
    background-color: #0f172a !important; /* Darker header */
    color: #f8fafc !important;
    border-bottom: 2px solid #334155 !important;
}

/* Strip out Bootstrap's alternating light-gray stripes */
body.dark-mode .table td,
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: transparent !important;
    border-bottom: 1px solid #334155 !important;
    color: #f8fafc !important;
    box-shadow: none !important; 
}

body.dark-mode .table-hover tbody tr:hover td,
body.dark-mode .table-hover tbody tr:hover * {
    background-color: #334155 !important; /* Highlight row on hover */
}

/* 4. Fix Navbar and Sidebar to match */
body.dark-mode .main-header-nav,
body.dark-mode .sidebar-inner {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-mode a{
    color: #eff6ff !important;
}

body.dark-mode .nav-link,
body.dark-mode .navbar-brand * {
    color: #f8fafc !important;
}

/* 5. Ensure Quick Action buttons stay punchy and legible */
body.dark-mode .btn-outline-primary {
    color: #60a5fa !important;
    border-color: #60a5fa !important;
}

body.dark-mode .btn-outline-primary:hover {
    background-color: #60a5fa !important;
    color: #0f172a !important;
}

body.dark-mode .btn-outline-secondary {
    color: #94a3b8 !important;
    border-color: #94a3b8 !important;
}

body.dark-mode .btn-outline-secondary:hover {
    background-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* =========================================
   UX4G DARK MODE: YELLOW LINK FIX (SPECIFICITY WAR)
   ========================================= */

/* The widget uses 4 IDs in its selector (Score: 412). 
   We use 5 dummy IDs to hit a score of 500+ and force our styles to win. */

/* 1. Fix Sidebar Links & Icons (Forces them back to white) */
body.dark-mode a.nav-link:not(#x1):not(#x2):not(#x3):not(#x4):not(#x5),
body.dark-mode a.nav-link:not(#x1):not(#x2):not(#x3):not(#x4):not(#x5) * {
    color: #f8fafc !important; 
}

/* Add a nice hover effect to sidebar links in dark mode */
body.dark-mode a.nav-link:hover:not(#x1):not(#x2):not(#x3):not(#x4):not(#x5),
body.dark-mode a.nav-link:hover:not(#x1):not(#x2):not(#x3):not(#x4):not(#x5) * {
    color: #60a5fa !important; 
}

/* 2. Fix Quick Action & View All Buttons (Forces them to soft blue) */
body.dark-mode a.btn-outline-primary:not(#x1):not(#x2):not(#x3):not(#x4):not(#x5) {
    color: #60a5fa !important; 
}

body.dark-mode a.btn-outline-primary:hover:not(#x1):not(#x2):not(#x3):not(#x4):not(#x5) {
    color: #0f172a !important; 
    background-color: #60a5fa !important;
}

body.dark-mode a.btn-outline-secondary:not(#x1):not(#x2):not(#x3):not(#x4):not(#x5) {
    color: #94a3b8 !important; 
}

/* 3. Catch any other random links in tables/text */
body.dark-mode a:not(#x1):not(#x2):not(#x3):not(#x4):not(#x5):not(.btn):not(.nav-link) {
    color: #60a5fa !important;
}

/* =========================================
   6. FIX HEADER TEXT & GHOST DROPDOWNS
   ========================================= */

/* Force Header Branding to White */
/* Force Header Branding to White (Using the 500-point hack to crush Bootstrap) */
body.dark-mode .header-brand-text h1:not(#x1):not(#x2):not(#x3):not(#x4):not(#x5),
body.dark-mode .header-brand-text p:not(#x1):not(#x2):not(#x3):not(#x4):not(#x5),
body.dark-mode .navbar-brand .text-dark:not(#x1):not(#x2):not(#x3):not(#x4):not(#x5) {
    color: #f8fafc !important;
}

/* Fix the Dropdown Menu Base */
body.dark-mode .dropdown-menu {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

/* Fix the Dropdown Header (Overrides Bootstrap's .bg-light) */
body.dark-mode .dropdown-menu .bg-light {
    background-color: #0f172a !important; 
    border-bottom: 1px solid #334155 !important;
    color: #f8fafc !important;
}

/* Fix Standard Dropdown Items (Profile Menu) */
body.dark-mode .dropdown-item {
    color: #f8fafc !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: #334155 !important;
    color: #60a5fa !important;
}

body.dark-mode .dropdown-divider {
    border-top-color: #334155 !important;
}

/* Fix the Notification List Items Border & Text */
body.dark-mode #requestList .border-bottom {
    border-bottom-color: #334155 !important;
}

body.dark-mode #requestList .text-dark {
    color: #f8fafc !important;
}

/* Force the PNG Emblem to turn white in Dark Mode */
body.dark-mode .header-emblem-img:not(#x1):not(#x2):not(#x3):not(#x4):not(#x5) {
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important; /* Safari support */
}

/* =========================================
   7. FIX FORMS, BADGES & PAGINATION
   ========================================= */

/* Fix the Academic Year Badges (Overrides Bootstrap's bg-light) */
body.dark-mode .badge.bg-light {
    background-color: #334155 !important; /* Slate 700 */
    color: #f8fafc !important; /* White text */
    border: 1px solid #475569 !important;
}

/* Fix Input Fields, Select Dropdowns, and Search Bars */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input-group-text {
    background-color: #0f172a !important; /* Deep Slate 900 */
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Fix Dropdown options (the list that pops out) */
body.dark-mode option {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

body.dark-mode ::placeholder{
    color: #f8fafc !important;
}

/* Fix Input Focus outlines */
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #60a5fa !important; /* Soft blue glow */
    box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.25) !important;
}

/* Fix the Pagination (The white boxes at the bottom of the table) */
body.dark-mode .page-link {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

body.dark-mode .page-link:hover {
    background-color: #334155 !important;
    color: #f8fafc !important;
}

body.dark-mode .page-item.active .page-link {
    background-color: #60a5fa !important;
    border-color: #60a5fa !important;
    color: #0f172a !important;
}

body.dark-mode .page-item.disabled .page-link {
    background-color: #0f172a !important;
    color: #475569 !important;
}

/* Fix Success Buttons (View buttons) & their child icons */
body.dark-mode a.btn-outline-success:not(#x1):not(#x2):not(#x3):not(#x4):not(#x5),
body.dark-mode a.btn-outline-success:not(#x1):not(#x2):not(#x3):not(#x4):not(#x5) * {
    color: #4ade80 !important; 
    border-color: #4ade80 !important;
    text-decoration: none !important;
    outline: none !important;
}

body.dark-mode a.btn-outline-success:hover:not(#x1):not(#x2):not(#x3):not(#x4):not(#x5),
body.dark-mode a.btn-outline-success:hover:not(#x1):not(#x2):not(#x3):not(#x4):not(#x5) * {
    background-color: #4ade80 !important;
    color: #0f172a !important; 
}

/* =========================================
   10. DESKTOP SEARCH BAR & ROWS ALIGNMENT
   ========================================= */

/* 1. Protect the Rows dropdown from being squished on ALL screen sizes */
.app-card .justify-content-md-end > .d-flex.align-items-center {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* 2. Constrain the search bar specifically on desktop/tablets */
@media (min-width: 769px) {
    .app-card .input-group {
        max-width: 180px !important; /* Shrinks it down from 250px */
        transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Sleek UI Trick: Expand the search bar slightly when the user clicks into it */
    .app-card .input-group:focus-within {
        max-width: 240px !important;
    }
}

/* =========================================
   11. UX4G WIDGET FOUC (FLICKER) FIX
   ========================================= */

/* Hide the raw HTML elements during initial page load until their CSS arrives */
#uw-main, 
#uw-widget-custom-trigger {
    animation: preventFlicker 3s ease-in-out forwards;
}

@keyframes preventFlicker {
    0%, 90% {
        opacity: 0 !important; 
        visibility: hidden !important; 
        position: fixed !important; 
        bottom: -100vh !important; 
        pointer-events: none !important;
    }
    100% {
        opacity: 1; 
        visibility: visible; 
        pointer-events: auto;
    }
}

/* =========================================
   12. STUDENT DETAILS: DARK MODE FIX
   ========================================= */

/* Fix the main profile card background */
body.dark-mode .app-card,
body.dark-mode .card {
    background-color: #1e293b !important; /* Deep Slate */
    border: 1px solid #334155 !important;
}

/* Fix the Profile Image border */
body.dark-mode .img-thumbnail {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}

/* Ensure all labels (Full Name, Enrollment, etc.) are readable */
body.dark-mode .profileTitle,
body.dark-mode .fw-bold,
body.dark-mode .text-dark {
    color: #f8fafc !important;
}

/* Fix horizontal dividers */
body.dark-mode hr {
    border-top: 1px solid #334155 !important;
    opacity: 1;
}

/* Fix the table inside student details (if any) */
body.dark-mode .table {
    color: #f8fafc !important;
}

/* Fix the footer timestamps */
body.dark-mode .text-muted.small {
    color: #94a3b8 !important;
}


body.dark-mode .card-header.text-dark.bg-light.text-dark.fw-semibold, .alert .alert-light .border .text-muted {
    background-color: #0f172a !important; /* Dark Slate */
    color: #f8fafc !important;
}

/* <div class="alert alert-light border text-muted" style="word-spacing: 0em;background-color: red !important;">
                    No semester progression records found for this student.
                </div> */

/* Fix the border on the profile picture */
body.dark-mode .content-wrapper .img-thumbnail {
    background-color: #0f172a !important;
    border-color: #475569 !important;
}

/* Fix horizontal lines between sections */
body.dark-mode .content-wrapper hr {
    border-top: 1px solid #334155 !important;
    opacity: 1;
}

/* Fix any muted text in the footer of the card */
body.dark-mode .content-wrapper .text-muted {
    color: #94a3b8 !important;
}

/* =========================================
   13. CMS SETTINGS: DARK MODE FIXES
   ========================================= */

/* Fix the glaring white card headers */
body.dark-mode .content-wrapper .card-header.bg-white {
    background-color: #1e293b !important; /* Slate 800 */
    border-bottom: 1px solid #334155 !important;
}

/* Brighten the dark blue 'Mission & Overview' header text and icons */
body.dark-mode .content-wrapper .text-primary {
    color: #38bdf8 !important; /* Sky 400 */
}

/* Fix the bright 'bg-light' backgrounds (Chairman row & Actions card) */
body.dark-mode .content-wrapper .bg-light {
    background-color: #0f172a !important; /* Slate 900 */
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

/* Ensure secondary input labels (e.g. 'Vision Statement') are legible */
body.dark-mode .content-wrapper .form-label.text-secondary {
    color: #cbd5e1 !important; /* Slate 300 */
}

/* Fix the red 'Delete Member' trash can button */
body.dark-mode .btn-outline-danger {
    color: #f87171 !important; /* Red 400 */
    border-color: #f87171 !important;
}

body.dark-mode .btn-outline-danger:hover {
    background-color: #f87171 !important;
    color: #0f172a !important;
}

/* Fix the File Upload input boxes */
body.dark-mode input[type="file"].form-control::file-selector-button {
    background-color: #334155 !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
}

body.dark-mode i:not(#x1):not(#x2):not(#x3):not(#x4):not(#x5),
body.dark-mode a i:not(#x1):not(#x2):not(#x3):not(#x4):not(#x5),
body.dark-mode [class*="bi-"]:not(#x1):not(#x2):not(#x3):not(#x4):not(#x5),
body.dark-mode a [class*="bi-"]:not(#x1):not(#x2):not(#x3):not(#x4):not(#x5) {
    color: #cbd5e1 !important;
}

/* Optional: Slight highlight when hovering an icon or a linked icon */
body.dark-mode a:hover i:not(#x1):not(#x2):not(#x3):not(#x4):not(#x5),
body.dark-mode a:hover [class*="bi-"]:not(#x1):not(#x2):not(#x3):not(#x4):not(#x5) {
    color: #38bdf8 !important;
}



/* For the admission page */
/* --- ADMISSION WINDOWS CUSTOM STYLES --- */
.text-mpurb-primary {
    color: #2b4c7e !important;
}

.bg-mpurb-primary {
    background-color: #2b4c7e !important;
    color: #ffffff !important;
    transition: all 0.2s ease;
}

.bg-mpurb-primary:hover {
    background-color: #1c3355 !important; /* Darker shade for hover */
    color: #ffffff !important;
}

.table-header-custom {
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.icon-circle-custom {
    width: 38px;
    height: 38px;
    color: #2b4c7e;
}

.date-input-custom {
    max-width: 160px;
    cursor: pointer;
    border-radius: 6px !important;
}

.status-dot {
    font-size: 6px;
    vertical-align: middle;
}
/* END of the admission page */

@media (max-width: 768px) {
    #uw-widget-custom-trigger span {
        display: none !important;
    }

    #uw-widget-custom-trigger {
        width: 42px !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        min-width: 42px !important;
        border-radius: 50% !important; /* Make it a neat circle on mobile */
    }

    #uw-widget-custom-trigger img {
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. Fix the Accessibility Widget sizing on small screens */
    #uw-main {
        max-width: 85vw !important; /* Prevents it from being wider than the phone */
    }

    /* 3. Fix the Filter Form (Universities & Academic Year) */
    .app-card form.d-flex {
        flex-direction: column !important; /* Forces dropdowns to stack vertically */
        align-items: stretch !important;
        width: 100%;
    }

    .app-card form.d-flex .form-select {
        width: 100% !important; /* Overrides Bootstrap's w-auto class */
    }
    
    .app-card form.d-flex .bi-funnel-fill {
        display: none !important; /* Hide the funnel icon on mobile to save space */
    }

    /* 4. Fix the Search Bar and Rows Dropdown to share a single row */
    .app-card .justify-content-md-end {
        flex-direction: row !important; /* Keep them side-by-side */
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important; /* Prevent them from stacking */
        gap: 12px !important;
        margin-top: 15px !important;
        border-top: 1px solid #e2e8f0; /* The divider */
        padding-top: 15px;
    }

    /* Allow search bar to flex, but leave room for the Rows dropdown */
    .app-card .input-group {
        max-width: 100% !important; 
        flex-grow: 1; /* Let it fill available space */
    }

    /* Prevent the Rows container from stretching or getting squished */
    .app-card .justify-content-md-end > .d-flex.align-items-center {
        width: auto !important; 
        justify-content: flex-end !important;
        flex-shrink: 0; /* CRITICAL: Stops the search bar from crushing the dropdown */
    }
}


@media (max-width: 991.98px) {
    #uw-main {
        max-width: 65vw !important; /* Prevents accessibility widget from being wider than the phone */
    }
    
    .sidebar-inner {
        position: fixed !important; 
        top: 0;
        height: 100vh;
        transform: translateX(-100%);
        box-shadow: none;
        z-index: 1055;
        transition: transform 0.3s ease-in-out;
    }

    .sidebar-inner.show-mobile {
        transform: translateX(0);
        box-shadow: 0 0 0 10000px rgba(0,0,0,0.5); 
    }

    .content-wrapper, #main-content {
        margin-left: 0 !important; 
        padding: calc(var(--header-height) + 20px) 15px 15px 15px !important;
    }

    .heading-students h1 { font-size: 1.5rem; }
    .btn-add { font-size: 0.9rem !important; padding: 3px 6px !important; }
    .btn-sm { font-size: 0.85rem !important; padding: 5px 10px !important; }
    .btn i { font-size: 1rem !important; }

    /* 4. Fix SweetAlert sizes on mobile */
    .swal2-popup {
        width: 90% !important;
        padding: 1em !important;
    }


    .table-responsive table, .table-responsive tbody, 
    .table-responsive tr, .table-responsive td {
        display: block; width: 100%;
    }
    .table-responsive thead { display: none; }
    
    .table-responsive tr {
        margin-bottom: 15px; border: 1px solid #dee2e6;
        border-radius: 12px; background-color: #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05); padding: 5px 0;
    }
    
    .table-responsive td {
        border-bottom: 1px solid #f1f3f5; position: relative;
        padding: 12px 15px 12px 45% !important;
        text-align: right !important; min-height: 45px;
    }
    
    .table-responsive td:last-child {
        border-bottom: none; text-align: center !important;
        padding-left: 15px !important;
    }
    
    .table-responsive td::before {
        content: attr(data-label); position: absolute;
        left: 15px; width: 40%; text-align: left;
        font-weight: 600; color: #495057;
        top: 50%; transform: translateY(-50%);
    }
    
    .table-responsive .btn-sm { width: 100%; padding: 10px; font-size: 1.1rem; }

    .heading-students{
        font-size: 0.9rem;
        padding: 2px;
    }

    .heading-students h1{
        padding: 2px;
        font-size: 1.5rem;
    }

/* =========================================
   8. MOBILE DARK MODE FIXES
   ========================================= */

    /* Force the mobile table cards to turn dark */
    body.dark-mode .table-responsive tr {
        background-color: #1e293b !important; /* Slate 800 */
        border-color: #334155 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    }

    /* Fix the text and bottom borders of each row item */
    body.dark-mode .table-responsive td {
        border-bottom-color: #334155 !important;
        color: #f8fafc !important;
        background-color: transparent !important;
    }

    /* Fix the "Name:", "Enrollment:", etc. labels injected by CSS */
    body.dark-mode .table-responsive td::before {
        color: #94a3b8 !important; /* Muted slate for labels */
    }
}

/* =========================================
   14. QUILL RICH TEXT EDITOR: DARK MODE
   ========================================= */

body.dark-mode .ql-toolbar.ql-snow,
body.dark-mode .ql-container.ql-snow {
    border-color: #334155 !important;
    background-color: #0f172a !important; /* Deep Slate */
}

body.dark-mode .ql-editor {
    color: #f8fafc !important; /* Off-white text */
}

/* Invert Toolbar Icons to White */
body.dark-mode .ql-snow .ql-stroke {
    stroke: #cbd5e1 !important;
}

body.dark-mode .ql-snow .ql-fill {
    fill: #cbd5e1 !important;
}

/* --- DBIM Compliant Stat Card Icons (48x48px Box, 24x24px Key Colour Icon) --- */
.dbim-icon-box {
    width: 48px;
    height: 48px;
    background-color: var(--linen); /* #EBEAEA */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dbim-stat-icon {
    font-size: 24px;
    line-height: 1;
    color: var(--mpurb-key) !important; /* #1f3a63 Key Colour */
}

/* --- CSP-Safe Replacements for Inline Styles --- */
#aboutEditor {
    height: 250px;
}

#layoutSorter .list-group-item {
    cursor: grab;
}

#notifCount {
    display: none;
}

/* --- CSP & DBIM Helper Classes --- */
.edit-fields-scroll { max-height: 250px; overflow-y: auto; }
.promote-table-scroll { max-height: 350px; overflow-y: auto; }
.w-40px { width: 40px !important; }
.cursor-pointer { cursor: pointer; }

.modified-field {
    background-color: rgba(25, 135, 84, 0.03) !important;
}

/* Fix Notification Bell to use DBIM Key Colour (#1f3a63) instead of olive brown */
.bi-bell-fill, .bi-bell {
    color: var(--mpurb-key) !important;
}

/* =========================================
   15. CMS LAYOUT MANAGER: DARK MODE FIX
   ========================================= */

/* Fix the white boxes to use Dark Slate */
body.dark-mode .list-group-item {
    background-color: #1e293b !important; /* Slate 800 */
    border-color: #334155 !important;
    color: #f8fafc !important; /* White text */
}

/* Fix the grey grip icon inside the boxes */
body.dark-mode .list-group-item .text-muted {
    color: #94a3b8 !important; /* Slate 400 */
}

/* Ensure the "Ghost" item (the space left behind while dragging) remains visible */
body.dark-mode .list-group-item.bg-light {
    background-color: #0f172a !important; /* Deep Slate 900 */
    border: 2px dashed #475569 !important;
}

/* =========================================
   DBIM ALIGNED PORTAL HEADER
   ========================================= */

.dbim-portal-nav {
    height: 5.5rem;
    padding: 0 !important;
    border-bottom: 1px solid #C6C6C6;
}

/* Typography and Logo Scale */
.portal-emblem { height: 50px; object-fit: contain; }
.portal-state-logo { height: 42px; object-fit: contain; }

.portal-brand-text .gov-text { font-size: 0.95rem; line-height: 1.1; color: #000; }
.portal-brand-text .dept-text { font-size: 1.15rem; line-height: 1.1; letter-spacing: -0.01em; color: #000; }
.portal-brand-text .sub-dept-text { font-size: 0.75rem; margin-top: 1px; color: #606060; }

@media (max-width: 576px) {
    .portal-emblem { height: 40px; }
    .portal-state-logo { height: 34px; }
    .portal-brand-text .gov-text { font-size: 0.85rem; }
    .portal-brand-text .dept-text { font-size: 1rem; }
}

/* =========================================
   UX4G WIDGET UI CUSTOMIZATION (PORTAL)
   ========================================= */

#uw-widget-custom-trigger {
    position: static !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none !important;
    background: transparent !important;
    font-size: 0 !important;
}

#uw-widget-custom-trigger img { display: none !important; }
#uw-widget-custom-trigger i { display: block !important; }

/* Enforce Dark Mode Text Fixes for the New Header */
body.dark-mode .portal-brand-text .gov-text,
body.dark-mode .portal-brand-text .dept-text,
body.dark-mode .portal-brand-text .sub-dept-text {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}
body.dark-mode .portal-emblem { filter: brightness(0) invert(1) !important; }