html {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative;
}

/* Responsive Brand School Name Truncation */
.brand-school-name {
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
@media (min-width: 1400px) {
    .brand-school-name {
        max-width: 420px;
    }
}
@media (max-width: 768px) {
    .brand-school-name {
        max-width: 180px;
    }
}

.navbar-luxury {
    width: 100%;
    max-width: 100%;
}

.content {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
}

.footer {
    margin-top: auto;
}

.card {
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-weight: 600;
}

.table-responsive {
    border-radius: 8px;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Custom Sleek Scrollbar for Tables */
.table-responsive::-webkit-scrollbar {
    height: 7px;
}
.table-responsive::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Sticky First Column for Student Names (Eliminates losing student context on small screens) */
.col-sticky-student {
    position: sticky;
    left: 0;
    z-index: 3;
    background-color: #ffffff;
    box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.08);
}
thead th.col-sticky-student {
    z-index: 4;
    background-color: #f8f9fa !important;
}
tr.table-warning td.col-sticky-student {
    background-color: #fff8e6 !important;
}
.table-hover > tbody > tr:hover td.col-sticky-student {
    background-color: #f1f5f9 !important;
}
.table-hover > tbody > tr.table-warning:hover td.col-sticky-student {
    background-color: #fff1cc !important;
}

/* Dark mode adjustments for sticky columns */
[data-bs-theme="dark"] .table-responsive::-webkit-scrollbar-track {
    background: #111827;
}
[data-bs-theme="dark"] .table-responsive::-webkit-scrollbar-thumb {
    background: #334155;
}
[data-bs-theme="dark"] thead th.col-sticky-student {
    background-color: #0f172a !important;
    box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.4);
}
[data-bs-theme="dark"] .col-sticky-student {
    background-color: #111827 !important;
    box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.4);
}
[data-bs-theme="dark"] tr.table-warning td.col-sticky-student {
    background-color: rgba(245, 158, 11, 0.18) !important;
}
[data-bs-theme="dark"] .table-hover > tbody > tr:hover td.col-sticky-student {
    background-color: #1e293b !important;
}
[data-bs-theme="dark"] .table-hover > tbody > tr.table-warning:hover td.col-sticky-student {
    background-color: rgba(245, 158, 11, 0.28) !important;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: -0.5px;
}

.nav-link {
    font-weight: 500;
}

.dashboard-card {
    transition: transform 0.2s;
}

.dashboard-card:hover {
    transform: translateY(-5px);
}

/* ==========================================================================
   PREMIUM INSTITUTIONAL DARK MODE SYSTEM
   Deep Midnight Navy Canvas + Glassmorphic Cards + High Legibility Accents
   ========================================================================== */

[data-bs-theme="dark"] {
    --bs-body-bg: #0b0f19;
    --bs-body-color: #f1f5f9;
    --bs-dark: #090d16;
    --bs-dark-rgb: 9, 13, 22;
    --bs-tertiary-bg: #111827;
    --bs-secondary-bg: #1e293b;
    --bs-border-color: rgba(255, 255, 255, 0.08);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.06);

    /* Professional Core Brand Palette */
    --bs-primary: #3b82f6;
    --bs-primary-rgb: 59, 130, 246;
    --bs-success: #10b981;
    --bs-success-rgb: 16, 185, 129;
    --bs-warning: #f59e0b;
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger: #ef4444;
    --bs-danger-rgb: 239, 68, 68;
    --bs-info: #0ea5e9;
    --bs-info-rgb: 14, 165, 233;

    background-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] body {
    background-color: #0b0f19;
    background-image: 
        radial-gradient(at 0% 0%, rgba(30, 60, 114, 0.22) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(15, 23, 42, 0.85) 0px, transparent 50%),
        radial-gradient(at 50% 50%, rgba(37, 99, 235, 0.04) 0px, transparent 50%);
    background-attachment: fixed;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #f1f5f9;
}

/* Typography in Dark Mode */
[data-bs-theme="dark"] h1, 
[data-bs-theme="dark"] h2, 
[data-bs-theme="dark"] h3, 
[data-bs-theme="dark"] h4, 
[data-bs-theme="dark"] h5, 
[data-bs-theme="dark"] h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: #f8fafc !important;
    font-weight: 700;
    letter-spacing: -0.2px;
}

[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] a.text-dark,
[data-bs-theme="dark"] h1.text-dark,
[data-bs-theme="dark"] h2.text-dark,
[data-bs-theme="dark"] h3.text-dark,
[data-bs-theme="dark"] h4.text-dark,
[data-bs-theme="dark"] h5.text-dark,
[data-bs-theme="dark"] h6.text-dark,
[data-bs-theme="dark"] i.text-dark,
[data-bs-theme="dark"] .card-title.text-dark,
[data-bs-theme="dark"] .card-header.text-dark {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] a.text-dark:hover {
    color: #60a5fa !important;
}

[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .small.text-muted,
[data-bs-theme="dark"] small.text-muted {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .text-secondary {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .text-body,
[data-bs-theme="dark"] .text-body-secondary {
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .text-primary {
    color: #60a5fa !important;
    text-shadow: none !important;
}

[data-bs-theme="dark"] .text-success {
    color: #34d399 !important;
    text-shadow: none !important;
}

[data-bs-theme="dark"] .text-warning {
    color: #fbbf24 !important;
    text-shadow: none !important;
}

[data-bs-theme="dark"] .text-danger {
    color: #f87171 !important;
    text-shadow: none !important;
}

[data-bs-theme="dark"] .text-info {
    color: #38bdf8 !important;
    text-shadow: none !important;
}

/* Soft Background Utilities */
[data-bs-theme="dark"] .bg-soft-primary {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
}
[data-bs-theme="dark"] .bg-soft-success {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #6ee7b7 !important;
}
[data-bs-theme="dark"] .bg-soft-warning {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #fcd34d !important;
}
[data-bs-theme="dark"] .bg-soft-danger {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
}
[data-bs-theme="dark"] .bg-soft-info {
    background-color: rgba(14, 165, 233, 0.15) !important;
    color: #7dd3fc !important;
}

/* Glassmorphic Cards & Containers */
[data-bs-theme="dark"] .card {
    background-color: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
    color: #f1f5f9;
}

[data-bs-theme="dark"] .card-header {
    background-color: rgba(15, 23, 42, 0.5) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .card-footer {
    background-color: rgba(15, 23, 42, 0.5) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .card:hover {
    border-color: rgba(96, 165, 250, 0.3) !important;
    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.6), 0 0 20px rgba(37, 99, 235, 0.12) !important;
    transition: all 0.3s ease;
}

/* Metric Cards in Light Mode */
.dashboard-card.bg-primary {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
    color: #ffffff !important;
}
.dashboard-card.bg-info {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
}
.dashboard-card.bg-success {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
}
.dashboard-card.bg-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
}

/* Metric Cards in Dark Mode: Sleek Midnight Obsidian with Luminous Theme Accents */
[data-bs-theme="dark"] .dashboard-card {
    background: rgba(15, 23, 42, 0.75) !important;
    background-image: none !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
    color: #f1f5f9 !important;
    transition: all 0.3s ease;
}

[data-bs-theme="dark"] .dashboard-card h2,
[data-bs-theme="dark"] .dashboard-card h5,
[data-bs-theme="dark"] .dashboard-card .card-title {
    color: #ffffff !important;
}

/* Card 1: Students (Royal Blue Accent) */
[data-bs-theme="dark"] .dashboard-card.bg-primary {
    background: rgba(15, 23, 42, 0.75) !important;
    background-image: none !important;
    border: 1px solid rgba(59, 130, 246, 0.22) !important;
    border-top: 3px solid #3b82f6 !important;
}
[data-bs-theme="dark"] .dashboard-card.bg-primary i {
    color: #60a5fa !important;
    opacity: 0.85 !important;
}
[data-bs-theme="dark"] .dashboard-card.bg-primary:hover {
    border-color: rgba(59, 130, 246, 0.45) !important;
    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.6), 0 0 25px rgba(59, 130, 246, 0.2) !important;
}
[data-bs-theme="dark"] .dashboard-card.bg-primary .btn-outline-light {
    border-color: rgba(59, 130, 246, 0.45) !important;
    color: #93c5fd !important;
    background-color: rgba(59, 130, 246, 0.08) !important;
}
[data-bs-theme="dark"] .dashboard-card.bg-primary .btn-outline-light:hover {
    background-color: #2563eb !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.35) !important;
}

/* Card 2: JHS Portals (Cyan / Ocean Accent - NO bright teal block) */
[data-bs-theme="dark"] .dashboard-card.bg-info {
    background: rgba(15, 23, 42, 0.75) !important;
    background-image: none !important;
    border: 1px solid rgba(14, 165, 233, 0.22) !important;
    border-top: 3px solid #0ea5e9 !important;
}
[data-bs-theme="dark"] .dashboard-card.bg-info i {
    color: #38bdf8 !important;
    opacity: 0.85 !important;
}
[data-bs-theme="dark"] .dashboard-card.bg-info:hover {
    border-color: rgba(14, 165, 233, 0.45) !important;
    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.6), 0 0 25px rgba(14, 165, 233, 0.2) !important;
}
[data-bs-theme="dark"] .dashboard-card.bg-info .btn-outline-light {
    border-color: rgba(14, 165, 233, 0.45) !important;
    color: #7dd3fc !important;
    background-color: rgba(14, 165, 233, 0.08) !important;
}
[data-bs-theme="dark"] .dashboard-card.bg-info .btn-outline-light:hover {
    background-color: #0284c7 !important;
    border-color: #0ea5e9 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(14, 165, 233, 0.35) !important;
}

/* Card 3: Teachers (Emerald Green Accent) */
[data-bs-theme="dark"] .dashboard-card.bg-success {
    background: rgba(15, 23, 42, 0.75) !important;
    background-image: none !important;
    border: 1px solid rgba(16, 185, 129, 0.22) !important;
    border-top: 3px solid #10b981 !important;
}
[data-bs-theme="dark"] .dashboard-card.bg-success i {
    color: #34d399 !important;
    opacity: 0.85 !important;
}
[data-bs-theme="dark"] .dashboard-card.bg-success:hover {
    border-color: rgba(16, 185, 129, 0.45) !important;
    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.6), 0 0 25px rgba(16, 185, 129, 0.2) !important;
}
[data-bs-theme="dark"] .dashboard-card.bg-success .btn-outline-light {
    border-color: rgba(16, 185, 129, 0.45) !important;
    color: #6ee7b7 !important;
    background-color: rgba(16, 185, 129, 0.08) !important;
}
[data-bs-theme="dark"] .dashboard-card.bg-success .btn-outline-light:hover {
    background-color: #059669 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.35) !important;
}

/* Card 4: Classes (Amber Gold Accent) */
[data-bs-theme="dark"] .dashboard-card.bg-warning {
    background: rgba(15, 23, 42, 0.75) !important;
    background-image: none !important;
    border: 1px solid rgba(245, 158, 11, 0.22) !important;
    border-top: 3px solid #f59e0b !important;
}
[data-bs-theme="dark"] .dashboard-card.bg-warning i {
    color: #fbbf24 !important;
    opacity: 0.85 !important;
}
[data-bs-theme="dark"] .dashboard-card.bg-warning:hover {
    border-color: rgba(245, 158, 11, 0.45) !important;
    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.6), 0 0 25px rgba(245, 158, 11, 0.2) !important;
}
[data-bs-theme="dark"] .dashboard-card.bg-warning .btn-outline-dark,
[data-bs-theme="dark"] .dashboard-card.bg-warning .btn-outline-light {
    border-color: rgba(245, 158, 11, 0.45) !important;
    color: #fcd34d !important;
    background-color: rgba(245, 158, 11, 0.08) !important;
}
[data-bs-theme="dark"] .dashboard-card.bg-warning .btn-outline-dark:hover,
[data-bs-theme="dark"] .dashboard-card.bg-warning .btn-outline-light:hover {
    background-color: #d97706 !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.35) !important;
}

/* Background Utility Overrides */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-body,
[data-bs-theme="dark"] .bg-body-tertiary {
    background-color: rgba(15, 23, 42, 0.75) !important;
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .bg-body-secondary {
    background-color: rgba(30, 41, 59, 0.7) !important;
}

[data-bs-theme="dark"] .bg-white.bg-opacity-50,
[data-bs-theme="dark"] .bg-light.bg-opacity-50 {
    background-color: rgba(15, 23, 42, 0.45) !important;
}

/* Luxury Academic Navbar */
.navbar-luxury {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}

[data-bs-theme="dark"] .navbar-luxury {
    background: linear-gradient(135deg, #090d16 0%, #0f172a 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

[data-bs-theme="dark"] .navbar-luxury .navbar-brand {
    font-family: 'Inter', -apple-system, sans-serif !important;
    color: #f8fafc !important;
    text-shadow: none !important;
}

[data-bs-theme="dark"] .navbar-luxury .nav-link {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .navbar-luxury .nav-link:hover,
[data-bs-theme="dark"] .navbar-luxury .nav-link.active {
    color: #60a5fa !important;
}

[data-bs-theme="dark"] .navbar-luxury .dropdown-menu .dropdown-item i {
    color: inherit;
}

/* Buttons in Dark Mode */
[data-bs-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3) !important;
}

[data-bs-theme="dark"] .btn-primary:hover {
    background: linear-gradient(135deg, #162d56 0%, #1e3c72 100%) !important;
    color: #ffffff !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
    box-shadow: 0 6px 16px rgba(30, 60, 114, 0.45) !important;
}

[data-bs-theme="dark"] .btn-success {
    background-color: #059669 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
}
[data-bs-theme="dark"] .btn-success:hover {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .btn-warning,
[data-bs-theme="dark"] .btn-warning.text-dark {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border-color: #f59e0b !important;
    color: #0f172a !important;
    font-weight: 700;
}
[data-bs-theme="dark"] .btn-warning:hover,
[data-bs-theme="dark"] .btn-warning.text-dark:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    border-color: #fbbf24 !important;
    color: #0f172a !important;
}

[data-bs-theme="dark"] .rounded-circle.bg-warning,
[data-bs-theme="dark"] .rounded-circle.bg-warning.text-dark {
    background-color: #f59e0b !important;
    color: #0f172a !important;
}
[data-bs-theme="dark"] .rounded-circle.bg-warning i,
[data-bs-theme="dark"] .rounded-circle.bg-warning.text-dark i {
    color: #0f172a !important;
}

[data-bs-theme="dark"] .btn-outline-primary {
    border-color: rgba(59, 130, 246, 0.45) !important;
    color: #93c5fd !important;
    background-color: rgba(59, 130, 246, 0.08) !important;
}
[data-bs-theme="dark"] .btn-outline-primary:hover {
    background-color: #2563eb !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.35) !important;
}

[data-bs-theme="dark"] .btn-outline-success {
    border-color: rgba(16, 185, 129, 0.45) !important;
    color: #6ee7b7 !important;
    background-color: rgba(16, 185, 129, 0.08) !important;
}
[data-bs-theme="dark"] .btn-outline-success:hover {
    background-color: #059669 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.35) !important;
}

[data-bs-theme="dark"] .btn-outline-warning {
    border-color: rgba(245, 158, 11, 0.45) !important;
    color: #fcd34d !important;
    background-color: rgba(245, 158, 11, 0.08) !important;
}
[data-bs-theme="dark"] .btn-outline-warning:hover {
    background-color: #d97706 !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.35) !important;
}

[data-bs-theme="dark"] .btn-outline-info {
    border-color: rgba(14, 165, 233, 0.45) !important;
    color: #7dd3fc !important;
    background-color: rgba(14, 165, 233, 0.08) !important;
}
[data-bs-theme="dark"] .btn-outline-info:hover {
    background-color: #0284c7 !important;
    border-color: #0ea5e9 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(14, 165, 233, 0.35) !important;
}

[data-bs-theme="dark"] .btn-outline-danger {
    border-color: rgba(239, 68, 68, 0.45) !important;
    color: #fca5a5 !important;
    background-color: rgba(239, 68, 68, 0.08) !important;
}
[data-bs-theme="dark"] .btn-outline-danger:hover {
    background-color: #dc2626 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.35) !important;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #cbd5e1 !important;
    background: rgba(255, 255, 255, 0.04) !important;
}
[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .btn-outline-dark {
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: #f8fafc !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}
[data-bs-theme="dark"] .btn-outline-dark:hover,
[data-bs-theme="dark"] .btn-outline-dark:focus,
[data-bs-theme="dark"] .btn-outline-dark:active {
    background-color: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.2) !important;
}

[data-bs-theme="dark"] .card.bg-warning .btn-outline-dark,
[data-bs-theme="dark"] .card.bg-warning.text-dark .btn-outline-dark {
    border-color: rgba(245, 158, 11, 0.55) !important;
    color: #fcd34d !important;
    background-color: rgba(245, 158, 11, 0.08) !important;
}
[data-bs-theme="dark"] .card.bg-warning .btn-outline-dark:hover,
[data-bs-theme="dark"] .card.bg-warning.text-dark .btn-outline-dark:hover {
    background-color: #d97706 !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.35) !important;
}

[data-bs-theme="dark"] .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.32) !important;
    color: #f8fafc !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
}
[data-bs-theme="dark"] .btn-outline-light:hover,
[data-bs-theme="dark"] .btn-outline-light:focus,
[data-bs-theme="dark"] .btn-outline-light:active {
    background-color: rgba(255, 255, 255, 0.18) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.2) !important;
}

[data-bs-theme="dark"] .btn-dark {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
}
[data-bs-theme="dark"] .btn-dark:hover,
[data-bs-theme="dark"] .btn-dark:focus,
[data-bs-theme="dark"] .btn-dark:active {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .btn-light {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #f8fafc !important;
}
[data-bs-theme="dark"] .btn-light:hover,
[data-bs-theme="dark"] .btn-light:focus,
[data-bs-theme="dark"] .btn-light:active {
    background-color: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
}

/* Form Controls & Inputs */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: rgba(15, 23, 42, 0.95) !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: #64748b !important;
}

[data-bs-theme="dark"] .input-group-text {
    background-color: rgba(15, 23, 42, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .form-label {
    color: #cbd5e1;
}

/* Modals & Dropdowns */
[data-bs-theme="dark"] .modal-content {
    background-color: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7) !important;
    color: #f1f5f9;
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .dropdown-menu {
    background-color: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
}

[data-bs-theme="dark"] .dropdown-item {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: rgba(59, 130, 246, 0.12) !important;
    color: #60a5fa !important;
}

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

/* ==========================================================================
   TABLES IN DARK MODE (HIGH SPECIFICITY & CONTEXTUAL HIGHLIGHTS)
   ========================================================================== */

[data-bs-theme="dark"] .table {
    --bs-table-color: #f1f5f9;
    --bs-table-striped-color: #f1f5f9;
    --bs-table-active-color: #ffffff;
    --bs-table-hover-color: #ffffff;
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(255, 255, 255, 0.07);
    color: #f1f5f9 !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

[data-bs-theme="dark"] .table > :not(caption) > * > * {
    color: #f1f5f9 !important;
    background-color: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

[data-bs-theme="dark"] .table td,
[data-bs-theme="dark"] .table th {
    color: #f1f5f9 !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

[data-bs-theme="dark"] .table td strong,
[data-bs-theme="dark"] .table td b,
[data-bs-theme="dark"] .table th strong,
[data-bs-theme="dark"] .table th b {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-secondary,
[data-bs-theme="dark"] thead.table-light th,
[data-bs-theme="dark"] thead th {
    background-color: rgba(15, 23, 42, 0.75) !important;
    color: #94a3b8 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-weight: 600;
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: #f1f5f9 !important;
}

/* Debtor & Warning Table Rows (.table-warning) */
[data-bs-theme="dark"] .table > :not(caption) > tr.table-warning > *,
[data-bs-theme="dark"] .table > :not(caption) > *.table-warning > *,
[data-bs-theme="dark"] .table > tbody > tr.table-warning > *,
[data-bs-theme="dark"] tr.table-warning td,
[data-bs-theme="dark"] tr.table-warning th,
[data-bs-theme="dark"] .table-warning {
    --bs-table-color: #f8fafc !important;
    --bs-table-color-state: #f8fafc !important;
    --bs-table-bg: rgba(245, 158, 11, 0.12) !important;
    --bs-table-bg-state: rgba(245, 158, 11, 0.12) !important;
    --bs-table-border-color: rgba(245, 158, 11, 0.25) !important;
    background-color: rgba(245, 158, 11, 0.12) !important;
    color: #f8fafc !important;
}

/* Warning Table Row Hover - Subtle Golden Sheen, NO cream-yellow glare */
[data-bs-theme="dark"] .table-hover > tbody > tr.table-warning:hover > *,
[data-bs-theme="dark"] .table-hover > tbody > *.table-warning:hover > *,
[data-bs-theme="dark"] .table-hover > tbody > tr:hover.table-warning > *,
[data-bs-theme="dark"] tr.table-warning:hover td,
[data-bs-theme="dark"] tr.table-warning:hover th {
    --bs-table-hover-bg: rgba(245, 158, 11, 0.22) !important;
    --bs-table-hover-color: #ffffff !important;
    --bs-table-bg-state: rgba(245, 158, 11, 0.22) !important;
    --bs-table-color-state: #ffffff !important;
    background-color: rgba(245, 158, 11, 0.22) !important;
    color: #ffffff !important;
}

/* Absent & Overdue Table Rows (.table-danger) */
[data-bs-theme="dark"] .table > :not(caption) > tr.table-danger > *,
[data-bs-theme="dark"] .table > :not(caption) > *.table-danger > *,
[data-bs-theme="dark"] .table > tbody > tr.table-danger > *,
[data-bs-theme="dark"] tr.table-danger td,
[data-bs-theme="dark"] tr.table-danger th,
[data-bs-theme="dark"] .table-danger {
    --bs-table-color: #f8fafc !important;
    --bs-table-color-state: #f8fafc !important;
    --bs-table-bg: rgba(239, 68, 68, 0.14) !important;
    --bs-table-bg-state: rgba(239, 68, 68, 0.14) !important;
    --bs-table-border-color: rgba(239, 68, 68, 0.25) !important;
    background-color: rgba(239, 68, 68, 0.14) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .table-hover > tbody > tr.table-danger:hover > *,
[data-bs-theme="dark"] .table-hover > tbody > *.table-danger:hover > *,
[data-bs-theme="dark"] .table-hover > tbody > tr:hover.table-danger > *,
[data-bs-theme="dark"] tr.table-danger:hover td,
[data-bs-theme="dark"] tr.table-danger:hover th {
    --bs-table-hover-bg: rgba(239, 68, 68, 0.24) !important;
    --bs-table-hover-color: #ffffff !important;
    --bs-table-bg-state: rgba(239, 68, 68, 0.24) !important;
    --bs-table-color-state: #ffffff !important;
    background-color: rgba(239, 68, 68, 0.24) !important;
    color: #ffffff !important;
}

/* Success & Paid Table Rows (.table-success) */
[data-bs-theme="dark"] .table > :not(caption) > tr.table-success > *,
[data-bs-theme="dark"] .table > :not(caption) > *.table-success > *,
[data-bs-theme="dark"] .table > tbody > tr.table-success > *,
[data-bs-theme="dark"] tr.table-success td,
[data-bs-theme="dark"] tr.table-success th,
[data-bs-theme="dark"] .table-success {
    --bs-table-color: #f8fafc !important;
    --bs-table-color-state: #f8fafc !important;
    --bs-table-bg: rgba(16, 185, 129, 0.12) !important;
    --bs-table-bg-state: rgba(16, 185, 129, 0.12) !important;
    --bs-table-border-color: rgba(16, 185, 129, 0.25) !important;
    background-color: rgba(16, 185, 129, 0.12) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .table-hover > tbody > tr.table-success:hover > *,
[data-bs-theme="dark"] .table-hover > tbody > *.table-success:hover > *,
[data-bs-theme="dark"] .table-hover > tbody > tr:hover.table-success > *,
[data-bs-theme="dark"] tr.table-success:hover td,
[data-bs-theme="dark"] tr.table-success:hover th {
    --bs-table-hover-bg: rgba(16, 185, 129, 0.22) !important;
    --bs-table-hover-color: #ffffff !important;
    --bs-table-bg-state: rgba(16, 185, 129, 0.22) !important;
    --bs-table-color-state: #ffffff !important;
    background-color: rgba(16, 185, 129, 0.22) !important;
    color: #ffffff !important;
}

/* Info Table Rows (.table-info) */
[data-bs-theme="dark"] .table > :not(caption) > tr.table-info > *,
[data-bs-theme="dark"] .table > :not(caption) > *.table-info > *,
[data-bs-theme="dark"] .table > tbody > tr.table-info > *,
[data-bs-theme="dark"] tr.table-info td,
[data-bs-theme="dark"] tr.table-info th,
[data-bs-theme="dark"] .table-info {
    --bs-table-color: #f8fafc !important;
    --bs-table-color-state: #f8fafc !important;
    --bs-table-bg: rgba(14, 165, 233, 0.12) !important;
    --bs-table-bg-state: rgba(14, 165, 233, 0.12) !important;
    --bs-table-border-color: rgba(14, 165, 233, 0.25) !important;
    background-color: rgba(14, 165, 233, 0.12) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .table-hover > tbody > tr.table-info:hover > *,
[data-bs-theme="dark"] .table-hover > tbody > *.table-info:hover > *,
[data-bs-theme="dark"] .table-hover > tbody > tr:hover.table-info > *,
[data-bs-theme="dark"] tr.table-info:hover td,
[data-bs-theme="dark"] tr.table-info:hover th {
    --bs-table-hover-bg: rgba(14, 165, 233, 0.22) !important;
    --bs-table-hover-color: #ffffff !important;
    --bs-table-bg-state: rgba(14, 165, 233, 0.22) !important;
    --bs-table-color-state: #ffffff !important;
    background-color: rgba(14, 165, 233, 0.22) !important;
    color: #ffffff !important;
}

/* Active Row */
[data-bs-theme="dark"] .table > :not(caption) > tr.table-active > *,
[data-bs-theme="dark"] .table > :not(caption) > *.table-active > *,
[data-bs-theme="dark"] .table > tbody > tr.table-active > *,
[data-bs-theme="dark"] tr.table-active td,
[data-bs-theme="dark"] tr.table-active th,
[data-bs-theme="dark"] .table-active {
    --bs-table-color: #ffffff !important;
    --bs-table-color-state: #ffffff !important;
    --bs-table-bg: rgba(255, 255, 255, 0.08) !important;
    --bs-table-bg-state: rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* Default Table Hover */
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: rgba(59, 130, 246, 0.08) !important;
    color: #ffffff !important;
}

/* Badges */
[data-bs-theme="dark"] .badge {
    border: 1px solid transparent !important;
    font-weight: 600;
}

[data-bs-theme="dark"] .badge.bg-primary {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
}

[data-bs-theme="dark"] .badge.bg-success {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.bg-warning.text-dark {
    background-color: rgba(245, 158, 11, 0.22) !important;
    color: #fcd34d !important;
    border-color: rgba(245, 158, 11, 0.38) !important;
}

[data-bs-theme="dark"] .badge.bg-danger {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}

[data-bs-theme="dark"] .badge.bg-info {
    background-color: rgba(14, 165, 233, 0.2) !important;
    color: #7dd3fc !important;
    border-color: rgba(14, 165, 233, 0.35) !important;
}

[data-bs-theme="dark"] .badge.bg-secondary {
    background-color: rgba(148, 163, 184, 0.25) !important;
    color: #f1f5f9 !important;
    border-color: rgba(148, 163, 184, 0.38) !important;
}

[data-bs-theme="dark"] .badge.bg-light {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Nav Tabs & Nav Pills */
[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: #94a3b8 !important;
}
[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.15) transparent !important;
    color: #f8fafc !important;
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background-color: rgba(15, 23, 42, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12) transparent !important;
    color: #60a5fa !important;
}
[data-bs-theme="dark"] .nav-pills .nav-link {
    color: #94a3b8 !important;
}
[data-bs-theme="dark"] .nav-pills .nav-link.active {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* List Groups */
[data-bs-theme="dark"] .list-group-item {
    background-color: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .list-group-item:hover {
    background-color: rgba(59, 130, 246, 0.08) !important;
}
[data-bs-theme="dark"] .list-group-item.active {
    background-color: #2563eb !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

/* Pagination */
[data-bs-theme="dark"] .page-link {
    background-color: rgba(15, 23, 42, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
}
[data-bs-theme="dark"] .page-link:hover {
    background-color: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #60a5fa !important;
}
[data-bs-theme="dark"] .page-item.active .page-link {
    background-color: #2563eb !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}
[data-bs-theme="dark"] .page-item.disabled .page-link {
    background-color: rgba(15, 23, 42, 0.4) !important;
    color: #475569 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Alerts */
[data-bs-theme="dark"] .alert-info {
    background-color: rgba(14, 165, 233, 0.15) !important;
    border-color: rgba(14, 165, 233, 0.3) !important;
    color: #7dd3fc !important;
}

[data-bs-theme="dark"] .alert-success {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #6ee7b7 !important;
}

[data-bs-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fcd34d !important;
}

[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}

/* News Ticker in Header */
[data-bs-theme="dark"] .news-ticker-container {
    background: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="dark"] .news-ticker-label {
    background: #1e293b !important;
    color: #60a5fa !important;
}

/* ==========================================================================
   MODERN UI MICRO-INTERACTIONS & FEEDBACK SYSTEM
   ========================================================================== */

/* 1. Global Floating Toast Notifications */
#edusuite-toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 1095;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
    width: calc(100% - 48px);
    pointer-events: none;
}
.edusuite-toast {
    pointer-events: auto;
    background: #ffffff;
    color: #1e293b;
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 14px;
    border-left: 5px solid #0d6efd;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
    font-size: 0.92rem;
    font-weight: 500;
}
.edusuite-toast.show {
    transform: translateX(0);
    opacity: 1;
}
.edusuite-toast.toast-success { border-left-color: #10b981; }
.edusuite-toast.toast-success .toast-icon { color: #10b981; }
.edusuite-toast.toast-error { border-left-color: #ef4444; }
.edusuite-toast.toast-error .toast-icon { color: #ef4444; }
.edusuite-toast.toast-warning { border-left-color: #f59e0b; }
.edusuite-toast.toast-warning .toast-icon { color: #f59e0b; }
.edusuite-toast.toast-info { border-left-color: #3b82f6; }
.edusuite-toast.toast-info .toast-icon { color: #3b82f6; }

[data-bs-theme="dark"] .edusuite-toast {
    background: #1e293b;
    color: #f8fafc;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* 2. Live Offline / Online Connection Banner */
#offline-banner {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(150%);
    z-index: 1099;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    gap: 10px;
}
#offline-banner.is-offline {
    transform: translateX(-50%) translateY(0);
    background: #ef4444;
    color: #ffffff;
}
#offline-banner.is-online {
    transform: translateX(-50%) translateY(0);
    background: #10b981;
    color: #ffffff;
}

/* 3. Button Loading Spinner State */
.btn.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.85;
}

/* 4. Zero-Data Empty State Cards */
.empty-state-box {
    text-align: center;
    padding: 50px 20px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.02);
    border: 2px dashed rgba(0, 0, 0, 0.1);
}
[data-bs-theme="dark"] .empty-state-box {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.1);
}
.empty-state-icon {
    font-size: 3.5rem;
    opacity: 0.35;
    margin-bottom: 16px;
}