:root {
    /* Fonts */
    --font-main: 'Outfit', system-ui, -apple-system, sans-serif;

    /* Light Theme Variables */
    --bg-primary: #f8f9fa;
    --bg-surface: #ffffff;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --border-color: #dee2e6;
    --accent-color: #0d6efd;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);

    /* Specific Element Colors */
    --navbar-bg: #212529;
    --navbar-text: #ffffff;
    --link-color: #0d6efd;
    --link-hover: #0a58ca;

    /* Table Hover - Blue */
    --table-hover-bg: rgba(13, 110, 253, 0.15);


}

html {
    background-color: var(--bg-primary);
    /* Fix for overscroll black area */
}

[data-theme="dark"] {
    /* Dark Theme Variables */
    --bg-primary: #121212;
    /* Deepest background */
    --bg-surface: #1e1e1e;
    /* Cards, Modals, Dropdowns */
    --text-primary: #e0e0e0;
    /* Main text */
    --text-secondary: #a0a0a0;
    /* Muted text */
    --border-color: #333333;
    /* Borders */
    --accent-color: #8ab4f8;
    /* Lighter accent for dark mode */
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);

    /* Specific Element Colors */
    --navbar-bg: #000000;
    --navbar-text: #e0e0e0;
    --link-color: #8ab4f8;
    --link-hover: #aecbfa;

    /* Table Hover - Neutral Light */
    --table-hover-bg: rgba(255, 255, 255, 0.05);


}

[data-theme="vintage"] {
    /* Vintage Theme Variables */
    --bg-primary: #fdf6e3;
    /* Solarized Light / Parchment */
    --bg-surface: #eee8d5;
    /* Slightly darker parchment */
    --text-primary: #2b1d0e;
    /* Deep Espresso (Darker than #5f4b32) */
    --text-secondary: #5e4b35;
    /* Darker Earth (Darker than #8c7b6c) */
    --border-color: #d6cfc2;
    /* Tan border */
    --accent-color: #d2691e;
    /* Chocolate/Orange Accent */
    --card-shadow: 0 4px 6px rgba(43, 29, 14, 0.1);

    /* Specific Element Colors */
    --navbar-bg: #4a3b2a;
    /* Dark Coffee */
    --navbar-text: #f4ecd8;
    /* Cream */
    --link-color: #d2691e;
    --link-hover: #a0522d;

    /* Table Hover - Saddle Brown */
    --table-hover-bg: rgba(139, 69, 19, 0.25);


}

/* Global Styles */
html,
body {
    width: 100%;
    max-width: 100vw;
    /* Strict viewport width */
    /* overflow-x: hidden; */
    /* Prevent horizontal scroll causing black void */
    overscroll-behavior-x: none;
    /* Prevent horizontal bounce revealing background */
    position: relative;
    /* Ensure containment */
}

/* Ensure wrapper doesn't cause spillover */
.admin-layout {
    /* overflow-x: hidden; */
    width: 100%;
    position: relative;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-main);
    transition: background-color 0.3s ease, color 0.3s ease;
    line-height: 1.6;
}

/* Nav Tabs Overrides for Visibility */
.nav-tabs .nav-link {
    color: var(--text-secondary);
    border: 1px solid transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--accent-color);
    border-color: var(--border-color);
}

.nav-tabs .nav-link.active {
    background-color: var(--bg-surface) !important;
    color: var(--accent-color) !important;
    border-color: var(--border-color) var(--border-color) var(--bg-surface) !important;
    font-weight: 600;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--bg-surface) !important;
    /* #1e1e1e */
    color: var(--accent-color) !important;
    /* #8ab4f8 */
    border-color: var(--border-color) var(--border-color) var(--bg-surface) !important;
}

[data-theme="vintage"] .nav-tabs .nav-link.active {
    background-color: var(--bg-surface) !important;
    color: var(--accent-color) !important;
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

a:hover {
    color: var(--link-hover);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-primary);
    font-weight: 600;
}

/* Card Styling */
.card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    color: var(--text-primary);
}

.card-header {
    background-color: rgba(0, 0, 0, 0.03);
    /* Slight tint */
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .card-header {
    background-color: rgba(255, 255, 255, 0.05);
    /* Lighter tint for dark mode */
}

.card-footer {
    background-color: transparent;
    border-top: 1px solid var(--border-color);
}

/* Tables */
.table {
    color: var(--text-primary);
    --bs-table-color: var(--text-primary);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
    /* Default striping */
    --bs-table-hover-bg: var(--table-hover-bg);
    /* Theme-aware hover */
}

[data-theme="dark"] .table {
    --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
    /* Light striping for dark mode */
}

.table> :not(caption)>*>* {
    background-color: transparent !important;
    /* Force transparency to let body/card bg show */
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Force Hover Color for all Tables */
.table>tbody>tr:hover>* {
    background-color: var(--table-hover-bg) !important;
    box-shadow: inset 0 0 0 9999px var(--table-hover-bg) !important;
    color: var(--text-primary) !important;
}

/* Forms */
/* Forms - Enhanced & Animated */
.form-control,
.form-select {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    /* Softer corners */
    padding: 0.75rem 1rem;
    /* More breathing room */
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, color 0.3s;
    /* Smooth transition - avoid 'all' to prevent load flicker */
    max-width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--bg-surface);
    /* Ensure bg color is set immediately */
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15);
    /* Softer, wider glow */
    transform: translateY(-2px);
    /* Subtle lift */
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    box-shadow: 0 0 0 4px rgba(138, 180, 248, 0.15);
}

/* Fix for Date/Time Picker Icons in Dark Mode */
[data-theme="dark"] ::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* Fix for Select Dropdown Arrow in Dark Mode */
[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
}

/* Mobile Dropdown Stability Fix */
@media (max-width: 768px) {

    .form-select,
    .form-control {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }

    .form-select:focus,
    .form-control:focus {
        transform: none !important;
    }
}

.form-control::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

/* Form Labels */
.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.form-control:focus+.form-label,
.form-control:focus~.form-label {
    color: var(--accent-color);
}

/* Form Helper Text (Hint Text) */
.form-text,
.help-block {
    color: var(--text-secondary) !important;
    font-size: 0.875em;
    margin-top: 0.4rem;
    opacity: 0.9;
}

[data-theme="dark"] .form-text,
[data-theme="dark"] .help-block {
    color: #b0b3b8 !important;
    /* Lighter grey for better contrast on dark */
}

[data-theme="vintage"] .form-text,
[data-theme="vintage"] .help-block {
    color: #8c7b6c !important;
}

/* Form Groups Animation */
.mb-3 {
    transition: transform 0.3s ease;
}

.mb-3:hover {
    transform: translateX(5px);
    /* Micro-interaction on hover */
}

/* Buttons */
.btn-primary {
    background-color: #0d6efd;
    /* Keep brand color or vary? */
    border-color: #0d6efd;
}

[data-theme="dark"] .btn-primary {
    background-color: #3b82f6;
    /* Slightly lighter blue for contrast */
    border-color: #3b82f6;
}

.btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.btn-outline-secondary:hover {
    background-color: var(--text-secondary);
    color: var(--bg-primary);
}

/* Navbar */
.navbar {
    background-color: var(--navbar-bg) !important;
}

.navbar .navbar-brand,
.navbar .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    /* Always light on dark navbar */
}

.navbar .nav-link:hover {
    color: #ffffff !important;
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
    box-shadow: var(--card-shadow);
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1);
}

/* List Groups */
.list-group-item {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Modals */
.modal-content {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.modal-header,
.modal-footer {
    border-color: var(--border-color);
}

.btn-close {
    filter: invert(0);
    /* Default black x */
}

[data-theme="dark"] .btn-close {
    filter: invert(1);
    /* White x for dark mode */
}

/* KPI Card Specific Adjustments for Dark Mode */
/* If using gradients, text is white, so usually fine. */
/* But ensuring proper background for charts */

/* Utility */
.text-muted {
    color: var(--text-secondary) !important;
}

.bg-light {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .bg-light {
    background-color: #2b2b2b !important;
    /* Override bootstrap bg-light */
}

.bg-white {
    background-color: var(--bg-surface) !important;
}

.border {
    border-color: var(--border-color) !important;
}

/* --- Theme Utilities for Analytics --- */
.text-theme-primary {
    color: var(--text-primary) !important;
}

/* Dark Mode Contrast Boosts for Bootstrap colors */
[data-theme="dark"] .text-primary {
    color: #8ab4f8 !important;
}

[data-theme="dark"] .text-success {
    color: #81c995 !important;
}

[data-theme="dark"] .text-danger {
    color: #f28b82 !important;
}

[data-theme="dark"] .text-warning {
    color: #fdd663 !important;
}

[data-theme="dark"] .text-info {
    color: #78d9ef !important;
}

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

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

/* In Vintage Mode, use softer earth tones */
[data-theme="vintage"] .text-primary {
    color: #8b4513 !important;
}

[data-theme="vintage"] .text-success {
    color: #556b2f !important;
}

/* --- Premium UI Enhancements --- */

/* Gradient Titles for Dark Mode */
[data-theme="dark"] .h1,
[data-theme="dark"] h1,
[data-theme="dark"] .h2,
[data-theme="dark"] h2,
[data-theme="dark"] .h3,
[data-theme="dark"] h3,
[data-theme="dark"] .text-header-premium {
    background: linear-gradient(90deg, #8ab4f8, #c58af9);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0px 0px 20px rgba(138, 180, 248, 0.3);
    font-weight: 700;
}

[data-theme="light"] .text-header-premium {
    background: linear-gradient(90deg, #1a73e8, #9334e6);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Glass Export Button */
.btn-glass-export {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    font-weight: 500;
}

.btn-glass-export:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    color: var(--text-primary);
    border-color: var(--accent-color);
}

[data-theme="dark"] .btn-glass-export {
    background: rgba(138, 180, 248, 0.1);
    border-color: rgba(138, 180, 248, 0.3);
    color: #8ab4f8;
}

[data-theme="dark"] .btn-glass-export:hover {
    background: rgba(138, 180, 248, 0.2);
    box-shadow: 0 0 15px rgba(138, 180, 248, 0.3);
    color: #fff;
}

/* Enhancing existing btn-outline-success for Dark Mode if not replaced */
[data-theme="dark"] .btn-outline-success {
    color: #81c995;
    border-color: #81c995;
    box-shadow: 0 0 10px rgba(129, 201, 149, 0.1);
}

[data-theme="dark"] .btn-outline-success:hover {
    background-color: #81c995;
    color: #202124;
    box-shadow: 0 0 20px rgba(129, 201, 149, 0.4);
}

/* Card Modern Specifics */
.dashboard-card .list-group-item {
    color: var(--text-primary);
    border-color: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .dashboard-card .list-group-item {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Ensure Leaderboard badges pop */
[data-theme="dark"] .badge.bg-light.text-dark {
    background-color: #3c4043 !important;
    color: #e8eaed !important;
    border-color: #5f6368 !important;
}

/* Vintage Nav Pills Fix for Notification Buttons */
[data-theme="vintage"] .nav-pills .nav-link:not(.active) {
    color: var(--text-primary) !important;
    background-color: rgba(94, 75, 53, 0.1);
    /* Subtle background for visibility */
    border: 1px solid rgba(94, 75, 53, 0.2);
}

[data-theme="vintage"] .nav-pills .nav-link:not(.active):hover {
    color: var(--accent-color) !important;
    background-color: rgba(94, 75, 53, 0.2);
    border-color: var(--accent-color);
}


/* =========================================
   SIDEBAR & ADMIN LAYOUT STYLES
   ========================================= */

/* Admin Layout Container */
/* When sidebar is present, push content to the right */
.admin-layout {
    display: block;
    min-height: 100vh;
    transition: all 0.3s ease;
}

/* Sidebar Styling */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    z-index: 1040;
    /* Above most things, below Bootstrap modal backdrop (1050) */
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1rem;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Smooth slide */
    overflow-x: hidden;
    /* Fix horizontal scroll */
}

/* Light Mode Hover Shadow */
[data-theme="light"] .sidebar:hover {
    box-shadow: 8px 0 35px rgba(0, 0, 0, 0.15);
}

/* Dark Mode Sidebar */
[data-theme="dark"] .sidebar {
    background: rgba(18, 18, 18, 0.85);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
}

[data-theme="vintage"] .sidebar {
    background: rgba(253, 246, 227, 0.95);
    /* Parchment */
    border-right: 1px solid #d6cfc2;
    box-shadow: 4px 0 15px rgba(94, 75, 53, 0.1);
}

/* Sidebar Header (Logo) */
.sidebar-header {
    margin-bottom: 2rem;
    padding: 0 0.5rem;
    display: flex;
    justify-content: center;
    /* Center the logo */
    align-items: center;
}

.sidebar-logo-img {
    max-width: 100%;
    height: auto;
    max-height: 50px;
    /* Limit height to look good */
    object-fit: contain;
    transition: transform 0.3s ease;
}

.sidebar-logo-img:hover {
    transform: scale(1.05);
}

/* Sidebar Navigation Links */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /* Prevent horizontal scroll from hover animation */
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    text-decoration: none !important;
    border: 1px solid transparent;
    /* Reserve space for border to prevent layout shift */
}

.sidebar-link i {
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}

/* Hover Effect */
.sidebar-link:hover {
    background-color: rgba(13, 110, 253, 0.08);
    color: var(--accent-color);
    transform: translateX(5px);
}

[data-theme="dark"] .sidebar-link:hover {
    background-color: rgba(138, 180, 248, 0.1);
}

.sidebar-link:hover i {
    transform: scale(1.1) rotate(5deg);
}

/* Active State */
.sidebar-link.active {
    background: linear-gradient(90deg, rgba(13, 110, 253, 0.1) 0%, rgba(13, 110, 253, 0.02) 100%);
    color: var(--accent-color);
    font-weight: 700;
    box-shadow: inset 3px 0 0 0 var(--accent-color);
}

[data-theme="dark"] .sidebar-link.active {
    background: linear-gradient(90deg, rgba(138, 180, 248, 0.15) 0%, rgba(138, 180, 248, 0.02) 100%);
}

/* Sidebar Footer */
.sidebar-footer {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Main Content Area Offset */
.main-content-wrapper {
    width: auto;
    margin-left: 300px;
    /* Match sidebar width */
    padding: 2rem;
    min-height: 100vh;
    transition: margin-left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Responsive Handling */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        /* Hide by default on mobile */
    }

    .main-content-wrapper,
    .main-content-wrapper.collapsed {
        margin-left: 0 !important;
        /* No offset on mobile */
    }

    /* Identify sidebar active state on mobile if feasible, or just keep simple for now */
    .sidebar.mobile-show {
        transform: translateX(0);
        z-index: 1045;
        /* High z-index */
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.3);
    }

    /* Ensure collapsed state doesn't break mobile view if triggered */
    .sidebar.collapsed {
        width: 300px !important;
        transform: translateX(-100%);
    }

    .sidebar.collapsed.mobile-show {
        transform: translateX(0);
    }

    /* Mobile Overlay Backdrop */
    .mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
        /* Below sidebar, above content */
        display: none;
        /* Hidden by default */
        backdrop-filter: blur(2px);
    }

    .mobile-overlay.show {
        display: block;
        animation: fadeIn 0.3s;
    }
}

/* Dark Mode Sidebar Overrides */
[data-theme="dark"] .sidebar {
    background: #111111;
    /* Distinct dark background, different from page bg */
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sidebar-nav {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* Optional divider if exists */
}

/* Glass Primary Button (SweetAlert & Modals) */
.btn-glass-primary {
    background-color: var(--accent-color) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 10px 24px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3) !important;
    transition: all 0.3s ease !important;
}

.btn-glass-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4) !important;
    filter: brightness(1.1);
}

/* Dark Mode Adjustment */
[data-theme="dark"] .btn-glass-primary {
    background: linear-gradient(135deg, rgba(138, 180, 248, 0.8), rgba(138, 180, 248, 0.6)) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* Vintage Mode Adjustment */
[data-theme="vintage"] .btn-glass-primary {
    background-color: #d2691e !important;
    /* Copper/Chocolate */
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(210, 105, 30, 0.3) !important;
}

[data-theme="vintage"] .btn-glass-primary:hover {
    background-color: #a0522d !important;
    /* Sienna */
}


[data-theme="dark"] .sidebar-link {
    color: #b0b3b8;
    /* Lighter text for better contrast */
}

[data-theme="dark"] .sidebar-link:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    color: #ffffff;
    transform: translateX(5px);
    /* Adds a premium feeling movement */
}

[data-theme="dark"] .sidebar-link.active {
    background: rgba(13, 110, 253, 0.2);
    color: #6ea8fe;
    /* Light blue */
    box-shadow: inset 3px 0 0 0 #6ea8fe;
}

/* =========================================
   SIDEBAR COLLAPSED STATE
   ========================================= */
/* =========================================
   SIDEBAR COLLAPSED STATE
   ========================================= */
.sidebar.collapsed {
    width: 80px;
}

.sidebar.collapsed .sidebar-header {
    flex-direction: column;
    padding: 0;
    margin-bottom: 1rem;
}

.sidebar.collapsed .sidebar-logo-img {
    max-height: 30px;
    margin-bottom: 0.5rem;
    display: none;
    /* Hide main logo in collapsed */
}

/* Ensure Text Hides Completely */
.sidebar.collapsed .sidebar-text,
.sidebar.collapsed .sidebar-link .sidebar-text {
    display: none !important;
}

/* Centered Links */
.sidebar.collapsed .sidebar-link {
    justify-content: center;
    padding: 0.85rem 0;
}

.sidebar.collapsed .sidebar-link i {
    font-size: 1.5rem;
    margin: 0;
}

/* Avatar Styling */
.sidebar-avatar {
    width: 24px;
    height: 24px;
    object-fit: cover;
    margin-right: 8px;
    transition: all 0.3s ease;
}

/* Collapsed Avatar - Larger and Centered */
.sidebar.collapsed .sidebar-avatar {
    width: 40px;
    height: 40px;
    margin-right: 0;
    margin-bottom: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.sidebar.collapsed .sidebar-footer .dropdown-toggle .sidebar-text {
    display: none !important;
}

.sidebar.collapsed .sidebar-footer .dropdown-toggle {
    justify-content: center !important;
    padding-left: 0;
    padding-right: 0;
}

.sidebar.collapsed .sidebar-footer .dropdown-toggle i {
    margin-right: 0 !important;
}

/* Sidebar Scrollbar Styling - Cross Browser */
.sidebar-nav {
    overflow-y: auto;
    /* Ensure scrolling is enabled */
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.sidebar-nav:hover {
    /* Firefox Hover */
    scrollbar-color: rgba(150, 150, 150, 0.4) transparent;
}

/* WebKit (Chrome, Edge, Safari) */
.sidebar-nav::-webkit-scrollbar {
    width: 6px;
    /* Slightly wider to be usable */
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

/* Default hidden (transparent) */
.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    border: 1px solid transparent;
    /* padding hack */
    background-clip: content-box;
}

/* Show on Hover of the Container */
.sidebar-nav:hover::-webkit-scrollbar-thumb {
    background-color: rgba(150, 150, 150, 0.4);
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(150, 150, 150, 0.7);
}

/* Main Content Adjustment */
.main-content-wrapper.collapsed {
    margin-left: 80px;
}

/* Toggle Button Styling */
#sidebarToggle {
    border: none;
    background: transparent;
    cursor: pointer;
    transition: transform 0.3s ease;
}

#sidebarToggle:hover {
    color: var(--bs-primary) !important;
    transform: scale(1.1);
}

.sidebar.collapsed #sidebarToggle {
    margin-top: 10px;
}

.btn-action {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    /* Modern soft square */
    border: 1px solid transparent;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Springy transition */
    background: var(--bg-surface);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    color: var(--text-secondary);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-action::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: currentColor;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    opacity: 0.1;
}

/* =========================================
   THEME-BASED BADGES (Soft/Glass Style)
   ========================================= */
.badge-theme {
    padding: 0.5em 0.75em;
    font-size: 0.85em;
    font-weight: 600;
    border-radius: 6px;
    /* Soft square/pill hybrid */
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

/* Light Theme / Default - Soft Pastel Style */
.badge-theme-success {
    background-color: #d1e7dd;
    color: #0f5132;
    border-color: #badbcc;
}

.badge-theme-warning {
    background-color: #fff3cd;
    color: #664d03;
    border-color: #ffecb5;
}

.badge-theme-danger {
    background-color: #f8d7da;
    color: #842029;
    border-color: #f5c2c7;
}

.badge-theme-info {
    background-color: #cff4fc;
    color: #055160;
    border-color: #b6effb;
}

.badge-theme-primary {
    background-color: #cfe2ff;
    color: #084298;
    border-color: #b6d4fe;
}

.badge-theme-secondary {
    background-color: #e2e3e5;
    color: #41464b;
    border-color: #d3d6d8;
}

/* Dark Theme - Glass/Neon Style */
[data-theme="dark"] .badge-theme-success {
    background-color: rgba(15, 81, 50, 0.3);
    color: #75b798;
    border-color: rgba(117, 183, 152, 0.2);
}

[data-theme="dark"] .badge-theme-warning {
    background-color: rgba(102, 77, 3, 0.3);
    color: #ffda6a;
    border-color: rgba(255, 218, 106, 0.2);
}

[data-theme="dark"] .badge-theme-danger {
    background-color: rgba(132, 32, 41, 0.3);
    color: #ea868f;
    border-color: rgba(234, 134, 143, 0.2);
}

[data-theme="dark"] .badge-theme-info {
    background-color: rgba(5, 81, 96, 0.3);
    color: #6edff6;
    border-color: rgba(110, 223, 246, 0.2);
}

[data-theme="dark"] .badge-theme-primary {
    background-color: rgba(8, 66, 152, 0.3);
    color: #6ea8fe;
    border-color: rgba(110, 168, 254, 0.2);
}

[data-theme="dark"] .badge-theme-secondary {
    background-color: rgba(56, 61, 65, 0.3);
    color: #a7acb1;
    border-color: rgba(167, 172, 177, 0.2);
}

/* Vintage Theme - Earthy Tones */
[data-theme="vintage"] .badge-theme-success {
    background-color: #e6eeb0;
    /* Olive tint */
    color: #3d4a1c;
    border-color: #d1dca0;
}

[data-theme="vintage"] .badge-theme-warning {
    background-color: #faeab8;
    color: #6b5518;
    border-color: #f0deaa;
}

[data-theme="vintage"] .badge-theme-danger {
    background-color: #ebd0ce;
    color: #6b2e2b;
    border-color: #e0beba;
}

[data-theme="vintage"] .badge-theme-primary {
    background-color: #d9cbb8;
    color: #5e4b35;
    border-color: #c9baa6;
}

.btn-action:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    color: #fff;
    border-color: transparent;
}

.btn-action:hover::before {
    width: 300%;
    height: 300%;
    opacity: 1;
}

.btn-action i {
    font-size: 1.1rem;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.btn-action:hover i {
    transform: scale(1.1);
}

/* View Button - Cyan/Blue */
.btn-action-view {
    color: #0dcaf0;
    border-color: rgba(13, 202, 240, 0.2);
}

.btn-action-view:hover::before {
    background: linear-gradient(135deg, #0dcaf0, #0d6efd);
}

.btn-action-view:hover {
    box-shadow: 0 8px 25px rgba(13, 202, 240, 0.4);
}

/* Edit Button - Purple/Indigo */
.btn-action-edit {
    color: #6610f2;
    border-color: rgba(102, 16, 242, 0.2);
}

.btn-action-edit:hover::before {
    background: linear-gradient(135deg, #6610f2, #d63384);
}

.btn-action-edit:hover {
    box-shadow: 0 8px 25px rgba(102, 16, 242, 0.4);
}

/* Delete Button - Red/Pink */
.btn-action-delete {
    color: #dc3545;
    border-color: rgba(220, 53, 69, 0.2);
}

.btn-action-delete:hover::before {
    background: linear-gradient(135deg, #dc3545, #ff0055);
}

.btn-action-delete:hover {
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4);
}

/* Dark Mode Specifics */
[data-theme="dark"] .btn-action {
    background: rgba(255, 255, 255, 0.08);
    /* More visible bg */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Make sure icons are visible in dark mode before hover */
[data-theme="dark"] .btn-action-view {
    color: #5bc0de;
    border-color: rgba(91, 192, 222, 0.3);
}

[data-theme="dark"] .btn-action-edit {
    color: #a56eff;
    border-color: rgba(165, 110, 255, 0.3);
}

[data-theme="dark"] .btn-action-delete {
    color: #ff6b6b;
    border-color: rgba(255, 107, 107, 0.3);
}

[data-theme="dark"] .btn-action:hover {
    color: #fff;
    /* Icons turn white on hover */
}

/* =========================================
   FIX: DISABLED / READONLY INPUTS (DARK MODE)
   ========================================= */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.form-select[readonly] {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    opacity: 0.8 !important;
    /* Ensure visibility */
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .form-select:disabled,
[data-theme="dark"] .form-select[readonly] {
    background-color: rgba(255, 255, 255, 0.05) !important;
    /* Distinct from active */
    color: #e0e0e0 !important;
    opacity: 1 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* =========================================
   PREMIUM GLASSMORPHISM UI (Forms & Modals)
   ========================================= */

/* --- Glass Card (Update Form) --- */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    border-radius: 20px;
    padding: 2rem;
    transition: transform 0.3s ease;
}

[data-theme="dark"] .glass-card {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

[data-theme="vintage"] .glass-card {
    background: rgba(253, 246, 227, 0.9);
    /* Parchment with slight transparency */
    border: 1px solid #d6cfc2;
    box-shadow: 6px 6px 0px rgba(94, 75, 53, 0.15);
    /* Retro offset shadow */
    color: #2b1d0e;
    border-radius: 6px;
    /* Slightly softer than sharp */
}

.glass-card-header {
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.5px;
}

[data-theme="dark"] .glass-card-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- Glass Inputs --- */
.glass-card .form-control,
.glass-card .form-select {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, color 0.3s;
}

[data-theme="dark"] .glass-card .form-control,
[data-theme="dark"] .glass-card .form-select {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.glass-card .form-control:focus,
.glass-card .form-select:focus {
    background: rgba(255, 255, 255, 0.8);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15);
    transform: translateY(-2px);
}

[data-theme="dark"] .glass-card .form-control:focus,
[data-theme="dark"] .glass-card .form-select:focus {
    background: rgba(0, 0, 0, 0.4);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.15);
}

[data-theme="vintage"] .glass-card .form-control,
[data-theme="vintage"] .glass-card .form-select {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid #d6cfc2;
    color: #2b1d0e;
    box-shadow: inset 1px 1px 4px rgba(94, 75, 53, 0.1);
}

[data-theme="vintage"] .glass-card .form-control:focus,
[data-theme="vintage"] .glass-card .form-select:focus {
    background: rgba(255, 255, 255, 0.7);
    border-color: #d2691e;
    box-shadow: 0 0 0 4px rgba(210, 105, 30, 0.2);
}

/* --- GLOBAL SweetAlert2 Animation Fixes (Prevent White Artifacts) --- */
.swal2-success-circular-line-left,
.swal2-success-circular-line-right,
.swal2-success-fix,
.swal2-success-ring {
    background-color: transparent !important;
}

/* --- Glass Popup (SweetAlert2) - Theme Adaptive --- */
body .glass-popup {
    /* Default / Light Theme */
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 20px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    padding: 2.5rem !important;
    color: var(--text-primary) !important;
    font-family: var(--font-main) !important;

    /* Responsive Sizing */
    width: 95% !important;
    max-width: 600px !important;
}

[data-theme="dark"] body .glass-popup {
    /* Dark Theme */
    background: rgba(25, 25, 35, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
    color: #e0e0e0 !important;
}

[data-theme="vintage"] body .glass-popup {
    /* Vintage Theme - Enforce Parchment Look */
    background: #fdf6e3 !important;
    border: 2px solid #d6cfc2 !important;
    box-shadow: 6px 6px 0px rgba(94, 75, 53, 0.15) !important;
    color: #2b1d0e !important;
    border-radius: 4px !important;
    /* Retro sharp corners */
}

/* SweetAlert Title */
body .glass-popup .swal2-title {
    font-size: 1.6rem !important;
    margin-bottom: 0.5rem !important;
    color: inherit !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    padding: 0 !important;
}

[data-theme="dark"] body .glass-popup .swal2-title {
    background: linear-gradient(135deg, #0dcaf0, #0d6efd) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

[data-theme="vintage"] body .glass-popup .swal2-title {
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: -1px !important;
    color: #d2691e !important;
}

/* SweetAlert Content */
body .glass-popup .swal2-html-container {
    color: inherit !important;
    font-size: 1.15rem !important;
    font-weight: 500 !important;
    opacity: 0.9;
    margin: 1rem 0 !important;
}

/* Icons Generic Scale Fix */
.glass-popup .swal2-icon {
    transform: scale(0.8) !important;
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
    border-color: currentColor !important;
    color: currentColor !important;
    background: transparent !important;
}

/* --- DataTables Length Select Fix --- */
.dataTables_length select,
.dataTables_length .form-select {
    padding-right: 2.5rem !important;
    /* Space for arrow */
    min-width: 55px !important;
    /* Widen dropdown */
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
}

/* Ensure label helps alignment */
.dataTables_length label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Specific Icons */
.glass-popup .swal2-icon.swal2-success {
    border-color: #198754 !important;
    color: #198754 !important;
}

[data-theme="dark"] .glass-popup .swal2-icon.swal2-success {
    box-shadow: 0 0 20px rgba(25, 135, 84, 0.3) !important;
    border-color: transparent !important;
    border: 3px solid rgba(25, 135, 84, 0.5) !important;
}

.glass-popup .swal2-icon.swal2-warning {
    border-color: #ffc107 !important;
    color: #ffc107 !important;
}

[data-theme="warning"] .glass-popup .swal2-icon.swal2-warning {
    /* For Dark Warning */
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.3) !important;
    border-color: transparent !important;
    border: 3px solid rgba(255, 193, 7, 0.5) !important;
}

/* Close Button Override */
.glass-popup .swal2-confirm {
    background: linear-gradient(135deg, #6c757d, #495057) !important;
    /* Default Neutral */
    border-radius: 50px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

.glass-popup .swal2-confirm.btn-glass-primary {
    box-shadow: 2px 2px 0px rgba(43, 29, 14, 0.3) !important;
}

/* --- Animated Buttons in Forms --- */
.btn-glass-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border: none;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    /* Pill */
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-glass-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.4);
    color: white;
}

.btn-glass-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    padding: 0.75rem 2rem;
    border-radius: 50px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-glass-ghost:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-glass-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* =========================================
   CUSTOM SCROLLBAR (Mobile/Desktop)
   ========================================= */
/* Ensure scrollbars are visible and styled appropriately */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    /* Width for horizontal scrollbar */
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: content-box;
    /* Makes the thumb smaller while keeping hit area */
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
    border: 3px solid transparent;
    background-clip: content-box;
}

/* Dark Mode Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Ensure smooth scrolling on mobile */
html {
    scroll-behavior: smooth;
}

[data-theme="dark"] .table-responsive {
    /* Dark Theme */
    background: rgba(25, 25, 35, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
    color: #e0e0e0 !important;
}

[data-theme="vintage"] body .glass-popup {
    /* Vintage Theme - Enforce Parchment Look */
    background: #fdf6e3 !important;
    border: 2px solid #d6cfc2 !important;
    box-shadow: 6px 6px 0px rgba(94, 75, 53, 0.15) !important;
    color: #2b1d0e !important;
    border-radius: 4px !important;
    /* Retro sharp corners */
}

/* SweetAlert Title */
body .glass-popup .swal2-title {
    font-size: 1.6rem !important;
    margin-bottom: 0.5rem !important;
    color: inherit !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    padding: 0 !important;
}

[data-theme="dark"] body .glass-popup .swal2-title {
    background: linear-gradient(135deg, #0dcaf0, #0d6efd) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

[data-theme="vintage"] body .glass-popup .swal2-title {
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: -1px !important;
    color: #d2691e !important;
}

/* SweetAlert Content */
body .glass-popup .swal2-html-container {
    color: inherit !important;
    font-size: 1.15rem !important;
    font-weight: 500 !important;
    opacity: 0.9;
    margin: 1rem 0 !important;
}

/* Icons Generic Scale Fix */
.glass-popup .swal2-icon {
    transform: scale(0.8) !important;
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
    border-color: currentColor !important;
    color: currentColor !important;
    background: transparent !important;
}

/* --- DataTables Length Select Fix --- */
.dataTables_length select,
.dataTables_length .form-select {
    padding-right: 2.5rem !important;
    /* Space for arrow */
    min-width: 55px !important;
    /* Widen dropdown */
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
}

/* Ensure label helps alignment */
.dataTables_length label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Specific Icons */
.glass-popup .swal2-icon.swal2-success {
    border-color: #198754 !important;
    color: #198754 !important;
}

[data-theme="dark"] .glass-popup .swal2-icon.swal2-success {
    box-shadow: 0 0 20px rgba(25, 135, 84, 0.3) !important;
    border-color: transparent !important;
    border: 3px solid rgba(25, 135, 84, 0.5) !important;
}

.glass-popup .swal2-icon.swal2-warning {
    border-color: #ffc107 !important;
    color: #ffc107 !important;
}

[data-theme="warning"] .glass-popup .swal2-icon.swal2-warning {
    /* For Dark Warning */
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.3) !important;
    border-color: transparent !important;
    border: 3px solid rgba(255, 193, 7, 0.5) !important;
}

/* Close Button Override */
.glass-popup .swal2-confirm {
    background: linear-gradient(135deg, #6c757d, #495057) !important;
    /* Default Neutral */
    border-radius: 50px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

.glass-popup .swal2-confirm.btn-glass-primary {
    box-shadow: 2px 2px 0px rgba(43, 29, 14, 0.3) !important;
}

/* --- Animated Buttons in Forms --- */
.btn-glass-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border: none;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    /* Pill */
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-glass-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.4);
    color: white;
}

.btn-glass-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    padding: 0.75rem 2rem;
    border-radius: 50px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-glass-ghost:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-glass-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* =========================================
   CUSTOM SCROLLBAR (Mobile/Desktop)
   ========================================= */
/* Ensure scrollbars are visible and styled appropriately */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    /* Width for horizontal scrollbar */
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: content-box;
    /* Makes the thumb smaller while keeping hit area */
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
    border: 3px solid transparent;
    background-clip: content-box;
}

/* Dark Mode Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Ensure smooth scrolling on mobile */
html {
    scroll-behavior: smooth;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Momentum scrolling on iOS */
    padding-bottom: 5px;
    /* Avoid scrollbar overlapping content */
}

/* --- Global Dropdown Width & Display Fix --- */
select,
.form-select,
.form-control {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-overflow: ellipsis;
    /* Ensure text doesn't overlap arrow */
    padding-right: 2.5rem !important;
    /* Force Native Appearance Reset for Consistency */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Ensure Dropdown Arrow is Visible (Bootstrap usually adds this, but standardizing) */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

option {
    max-width: 100vw;
    /* Prevent extreme expansion */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fix for native dropdowns detaching due to parent transforms */
@media (max-width: 768px) {

    .main-content-wrapper,
    .animate-fade-in,
    .animate-fade-in-up,
    .mb-3,
    .card,
    .glass-card,
    .form-control,
    .form-select,
    .btn {
        animation: none !important;
        transform: none !important;
        transition: none !important;
        opacity: 1 !important;
        /* Forces visibility */
    }

    /* Ensure no hover effects trigger on touch */
    .mb-3:hover,
    .btn:hover,
    .card:hover,
    .form-control:focus,
    .form-select:focus {
        transform: none !important;
        box-shadow: none !important;
    }
}

@media print {

    /* Hide non-essential elements */
    .sidebar,
    .mobile-overlay,
    .navbar-toggler,
    .theme-toggle,
    .btn:not(.btn-table-action),
    /* Keep table actions if needed, or hide all buttons */
    .no-print,
    .d-print-none,
    .mobile-header-bar,
    /* Specifically hide the mobile header */
    form,
    /* Hide filters usually */
    .card-header .btn,
    /* Hide buttons in card headers */
    .sidebar-footer,
    .pagination {
        display: none !important;
    }

    /* Reset Layout */
    .main-content-wrapper,
    .main-content-wrapper.collapsed {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        min-width: 100% !important;
    }

    body,
    html,
    .main-content-wrapper {
        background: #fff !important;
        background-color: #fff !important;
        color: #000 !important;
        height: auto !important;
        overflow: visible !important;
        width: 100% !important;
    }

    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Force Grid Layout for KPI Cards (3 per row on Portrait) */
    .row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-right: -15px !important;
        margin-left: -15px !important;
    }

    .print-col-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    /* Fallback generic col sizing if needed */
    .col-xl-2,
    .col-md-4,
    .col-sm-6,
    .col-12 {
        position: relative !important;
    }

    /* Reduce card padding/shadow for print */
    .kpi-card {
        min-height: auto !important;
        padding: 1rem !important;
        border: 1px solid #eee !important;
        box-shadow: none !important;
        margin-bottom: 20px !important;
        background: #fff !important;
        /* Remove gradient */
        color: #000 !important;
    }

    .kpi-card .text-white-50 {
        color: #666 !important;
    }

    .kpi-card .kpi-icon-bg {
        color: #eee !important;
        opacity: 0.5 !important;
    }

    /* Card Styling for Print */
    .card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        break-inside: avoid;
        margin-bottom: 20px !important;
    }

    .card-header {
        background: #f8f9fa !important;
        border-bottom: 1px solid #ddd !important;
        color: #000 !important;
    }

    .card-body {
        padding: 1rem !important;
    }

    /* Table Styling */
    .table {
        width: 100% !important;
        border-collapse: collapse !important;
    }

    .table th,
    .table td {
        border: 1px solid #ddd !important;
        color: #000 !important;
    }

    /* Charts (Ensure they are visible) */
    canvas {
        max-width: 100% !important;
        break-inside: avoid;
    }

    /* Typography */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: #000 !important;
        margin-top: 0 !important;
    }

    a {
        text-decoration: none !important;
        color: #000 !important;
    }
}

.candidate-name-text {
    word-break: break-word;
    line-height: 1.4;
    font-size: 0.95rem;
}

/* =========================================
   VINTAGE THEME ENHANCEMENTS & ANIMATIONS
   ========================================= */

@keyframes bounce-vintage {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

[data-theme="vintage"] .rank-icon {
    animation: bounce-vintage 2s infinite;
    /* Continuous bounce */
    display: inline-block;
    /* Required for transform */
}

/* Fix for icons that need to stay still (like dropdown arrows or structural icons if needed) */
[data-theme="vintage"] .form-select {
    animation: none;
}

/* 
   Rank Icons: Move inline styles to classes so we can override them 
   Default (Light) Colors
*/
.rank-icon-1 {
    color: #FFD700;
    text-shadow: 0 0 25px gold;
}

.rank-icon-2 {
    color: #A9A9A9;
    /* Darker Silver for Light Mode contrast */
    text-shadow: 0 0 15px silver;
}

.rank-icon-3 {
    color: #CD7F32;
    text-shadow: 0 0 15px #cd7f32;
}

/* Dark Theme Overrides - Brighter & More Glow */
[data-theme="dark"] .rank-icon-1 {
    color: #FFD700;
    text-shadow: 0 0 25px #FFD700, 0 0 10px #FFD700;
}

[data-theme="dark"] .rank-icon-2 {
    color: #E0E0E0;
    /* Lighter Silver for Dark Mode */
    text-shadow: 0 0 20px #C0C0C0;
}

[data-theme="dark"] .rank-icon-3 {
    color: #CD7F32;
    text-shadow: 0 0 20px #CD7F32;
}

/* Vintage Theme Overrides for Rank Icons */
[data-theme="vintage"] .rank-icon-1 {
    color: #DAA520;
    /* GoldenRod instead of bright Yellow Gold */
    text-shadow: 0 0 10px rgba(218, 165, 32, 0.5);
}

[data-theme="vintage"] .rank-icon-2 {
    color: #A9A9A9;
    /* DarkGray/Antique Silver */
    text-shadow: 0 0 10px rgba(169, 169, 169, 0.5);
}

[data-theme="vintage"] .rank-icon-3 {
    color: #8B4513;
    /* SaddleBrown/Old Copper */
    text-shadow: 0 0 10px rgba(139, 69, 19, 0.5);
}


/* -- Theme Utility Classes -- */

/* Override Bootstrap text-primary to follow theme accent */
.text-primary {
    color: var(--accent-color) !important;
}

/* Premium Header with subtle shadow */
.text-header-premium {
    color: var(--text-primary);
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    letter-spacing: 0.5px;
}

/* Theme-adaptive Badge */
.badge-theme {
    background-color: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .badge-theme {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

[data-theme="vintage"] .badge-theme {
    background-color: #fdf6e3;
    /* Lightest parchment */
    color: var(--text-primary);
    border-color: #d6cfc2;
}

/* Prevent text selection on static elements */
.no-select {
    user-select: none;
    -webkit-user-select: none;
}

/* -- Premium Search Input (Isolated from Bootstrap) -- */
.search-container-premium {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background-color: var(--bg-surface);
    padding: 5px 15px;
    transition: all 0.3s ease;
}

.search-container-premium:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.search-container-premium .search-icon {
    color: var(--text-secondary);
    margin-right: 10px;
    font-size: 1rem;
}

.search-container-premium .search-input {
    border: none;
    background: transparent;
    width: 100%;
    color: var(--text-primary);
    outline: none;
    /* Remove default browser outline */
    font-size: 0.95rem;
}

.search-container-premium .search-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

/* Vintage Fix */
[data-theme="vintage"] .search-container-premium {
    background-color: rgba(255, 255, 255, 0.4);
    border-color: #d6cfc2;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

/*   ========================================================================================
       M O D E R N   T A B L E   S T Y L E S   ( N e w   G e n e r a t i o n )
       ========================================================================================   */

/*   B a s e   M o d e r n   T a b l e   C o n t a i n e r   */
.table-responsive {
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* Soft shadow */
    overflow: hidden;
    /* Clip corners */
    background: var(--bg-surface);
    transition: all 0.3s ease;
}

.table {
    margin-bottom: 0;
    /* Remove bottom margin */
    border-collapse: separate;
    border-spacing: 0;
}

/*   H e a d e r   S t y l i n g   */
.table thead th {
    background-color: rgba(0, 0, 0, 0.02);
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--border-color);
    border-top: none;
    white-space: nowrap;
}

/*   R o w   S t y l i n g   */
.table tbody tr {
    transition: all 0.2s ease-in-out;
    background-color: transparent;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/*   C e l l   S t y l i n g   */
.table td {
    padding: 1.25rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
}

/*   H o v e r   E f f e c t s   ( A n i m a t i o n )   */
.table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02) !important;
    transform: scale(1.005);
    /* Subtle zoom */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    z-index: 10;
    position: relative;
    cursor: default;
}

/*   - - -   T H E M E   S P E C I F I C   O V E R R I D E S   - - -   */

/*   D A R K   T H E M E   */
[data-theme="dark"] .table-responsive {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    background: #1e1e1e;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .table thead th {
    background-color: rgba(255, 255, 255, 0.03);
    color: #a0a0a0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .table tbody tr:hover {
    background-color: rgba(138, 180, 248, 0.05) !important;
    /* Blue tint */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .table td {
    color: #e0e0e0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/*   V I N T A G E   T H E M E   */
[data-theme="vintage"] .table-responsive {
    box-shadow: 5px 5px 15px rgba(94, 75, 53, 0.15);
    border: 1px solid #d6cfc2;
    background: #fdf6e3;
    border-radius: 4px;
    /* Less rounded for vintage feel */
}

[data-theme="vintage"] .table {
    font-family: 'Courier New', Courier, monospace;
    /* Typewriter feel? Or maybe just serif */
    font-family: "Georgia", serif;
}

[data-theme="vintage"] .table thead th {
    background-color: rgba(94, 75, 53, 0.08);
    color: #5e4b35;
    font-family: var(--font-main);
    /* Keep header readable/standard or make it serif too? Let's keep serif */
    font-weight: 700;
    border-bottom: 2px solid #d6cfc2;
}

[data-theme="vintage"] .table tbody tr:hover {
    background-color: rgba(210, 105, 30, 0.05) !important;
    /* Sepia/Orange tint */
    box-shadow: inset 0 0 10px rgba(94, 75, 53, 0.1);
    /* Inset shadow for paper feel */
    transform: none;
    /* No zoom for vintage */
}

[data-theme="vintage"] .table td {
    color: #2b1d0e;
    border-bottom: 1px solid #d6cfc2;
}

/*   K P I   T a b l e   S p e c i f i c s   ( C a n d i d a t e   D a s h b o a r d )   */
/*   R e m o v e   t h e   B o o t s t r a p   ' t a b l e - b o r d e r e d '   l o o k   f o r   s p e c i f i c   t a b l e s   i f   v a l i d   */
.kpi-table.table-bordered {
    border: none !important;
}

.kpi-table.table-bordered th,
.kpi-table.table-bordered td {
    border: none;
    border-bottom: 1px solid var(--border-color);
}

.kpi-table thead th {
    border-bottom-width: 2px;
}


/* =========================================
   KPI CARDS & TABLE THEME VARIABLES (Synced with Analytics)
   ========================================= */

:root {
    /* DEFAULT (LIGHT THEME) - Vibrant & Aesthetic */
    --grad-apps: linear-gradient(135deg, #4da9ff 0%, #7dc4ff 100%);
    --grad-assess: linear-gradient(135deg, #be93fd 0%, #d8b4fe 100%);
    --grad-screen: linear-gradient(135deg, #ff8fa3 0%, #ffb3c1 100%);
    --grad-inter: linear-gradient(135deg, #ffc75f 0%, #ffe29a 100%);
    --grad-reply: linear-gradient(135deg, #48bfe3 0%, #64dfdf 100%);
    --grad-select: linear-gradient(135deg, #2ec4b6 0%, #cbf3f0 100%);
    --grad-reject: linear-gradient(135deg, #e01313ff 0%, #ff8787 100%);

    /* Table Header - Default Light Theme */
    --table-header-bg: #f8f9fa;
    --table-header-text: #495057;
    --table-header-border: #dee2e6;

    /* Close Button default */
    --btn-close-bg: linear-gradient(145deg, #ff6b6b, #e03131);


}

[data-theme='dark'] {
    /* DARK THEME - Neon Glow */
    --grad-apps: linear-gradient(135deg, #48cae4 0%, #90e0ef 100%);
    --grad-assess: linear-gradient(135deg, #c77dff 0%, #e0aaff 100%);
    --grad-screen: linear-gradient(135deg, #ff4d6d 0%, #ff758f 100%);
    --grad-inter: linear-gradient(135deg, #ffb703 0%, #fdc500 100%);
    --grad-reply: linear-gradient(135deg, #00b4d8 0%, #0096c7 100%);
    --grad-select: linear-gradient(135deg, #06d6a0 0%, #52b788 100%);
    --grad-reject: linear-gradient(135deg, #dc3545 0%, #b02a37 100%);

    /* Table Header - Dark Blue Accent */
    --table-header-bg: #0d6efd;
    --table-header-text: #ffffff;
    --table-header-border: rgba(255, 255, 255, 0.1);
}

[data-theme='vintage'] {
    /* VINTAGE THEME - Earthy Tones (Exact Analytics Match) */
    --grad-apps: linear-gradient(135deg, #8B4513 0%, #CD853F 100%);
    --grad-assess: linear-gradient(135deg, #556B2F 0%, #8FBC8F 100%);
    --grad-screen: linear-gradient(135deg, #DAA520 0%, #EEE8AA 100%);
    --grad-inter: linear-gradient(135deg, #A0522D 0%, #D2691E 100%);
    --grad-reply: linear-gradient(135deg, #3E2723 0%, #5D4037 100%);
    --grad-select: linear-gradient(135deg, #B8860B 0%, #F0E68C 100%);
    --grad-reject: linear-gradient(135deg, #800000 0%, #A52A2A 100%);

    /* Table Header - Deep Brown from Analytics */
    --table-header-bg: #5D4037;
    --table-header-text: #FFE4C4;
    /* Bisque */
    --table-header-border: #d6cfc2;
}

/* Apply Variables */
.bg-gradient-apps {
    background: var(--grad-apps) !important;
    color: white;
}

.bg-gradient-assess {
    background: var(--grad-assess) !important;
    color: white;
}

.bg-gradient-screen {
    background: var(--grad-screen) !important;
    color: white;
}

.bg-gradient-inter {
    background: var(--grad-inter) !important;
    color: white;
}

.bg-gradient-reply {
    background: var(--grad-reply) !important;
    color: white;
}

.bg-gradient-select {
    background: var(--grad-select) !important;
    color: white;
}

.bg-gradient-reject {
    background: var(--grad-reject) !important;
    color: white;
}

/* Dynamic KPI Header Backgrounds */
#kpi-details-section[data-type='apps'] .card-header {
    background: var(--grad-apps) !important;
}

#kpi-details-section[data-type='assess'] .card-header {
    background: var(--grad-assess) !important;
}

#kpi-details-section[data-type='screens'] .card-header {
    background: var(--grad-screen) !important;
}

#kpi-details-section[data-type='interviews'] .card-header {
    background: var(--grad-inter) !important;
}

#kpi-details-section[data-type='selections'] .card-header {
    background: var(--grad-select) !important;
}

/* Table Header Table-Specific Override */
.kpi-table thead th,
#table-apps thead th {
    background-color: var(--table-header-bg) !important;
    color: var(--table-header-text) !important;
    border-bottom-color: var(--table-header-border) !important;
}

/* Explicit Light Theme Override to beat Specificity */
[data-theme='light'],
html:not([data-theme]) {
    --grad-apps: linear-gradient(135deg, #4da9ff 0%, #7dc4ff 100%);
    --grad-assess: linear-gradient(135deg, #be93fd 0%, #d8b4fe 100%);
    --grad-screen: linear-gradient(135deg, #ff8fa3 0%, #ffb3c1 100%);
    --grad-inter: linear-gradient(135deg, #ffc75f 0%, #ffe29a 100%);
    --grad-reply: linear-gradient(135deg, #48bfe3 0%, #64dfdf 100%);
    --grad-select: linear-gradient(135deg, #2ec4b6 0%, #cbf3f0 100%);
    --grad-reject: linear-gradient(135deg, #e01313ff 0%, #ff8787 100%);

    --table-header-bg: #f8f9fa;
    --table-header-text: #495057;
    --table-header-border: #dee2e6;
}

/* FORCE RED CLOSE BUTTON FOR ALL THEMES */
/* FORCE RED CLOSE BUTTON FOR ALL THEMES */
.btn-close-animated,
button.btn-close {
    background-color: #dc3545 !important;
    /* Bootstrap Danger Red */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
    color: white !important;
    opacity: 1 !important;
    text-shadow: none !important;
    box-shadow: 0 3px 5px rgba(220, 53, 69, 0.3) !important;
    width: 1.25rem;
    height: 1.25rem;
    filter: none !important;
    border-radius: 50% !important;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    background-size: 45% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.btn-close-animated:hover,
button.btn-close:hover {
    background-color: #c92a2a !important;
    /* Darker Red */
    /* Ensure image persists by re-declaring or not overwriting with background shorthand */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
    transform: rotate(90deg) scale(1.1) !important;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.6) !important;
}


/* PREMIUM INFO ICON STYLES */
.info-icon-premium {
    color: var(--grad-apps) !important;
    /* Fallback */
    background: var(--grad-apps);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.1rem;
    vertical-align: middle;
    cursor: help;
    animation: iconPulse 2s infinite ease-in-out;
    display: inline-block;
    /* Required for transform */
}

@keyframes iconPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
        filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

/* Specific Theme Colors for Info Icon */
[data-theme='vintage'] .info-icon-premium {
    background: var(--grad-apps);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 1px 1px rgba(94, 75, 53, 0.2);
}

[data-theme='dark'] .info-icon-premium {
    background: var(--grad-apps);
    /* Neon Blue */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 5px rgba(72, 202, 228, 0.5));
}

[data-theme='light'] .info-icon-premium {
    background: var(--grad-apps);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Glass Primary Button (SweetAlert & Modals) */
.btn-glass-primary {
    background-color: var(--accent-color) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 10px 24px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3) !important;
    transition: all 0.3s ease !important;
}

.btn-glass-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4) !important;
    filter: brightness(1.1);
}

/* Dark Mode Adjustment */
[data-theme="dark"] .btn-glass-primary {
    background: linear-gradient(135deg, rgba(138, 180, 248, 0.8), rgba(138, 180, 248, 0.6)) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* Vintage Mode Adjustment */
[data-theme="vintage"] .btn-glass-primary {
    background-color: #d2691e !important;
    /* Copper/Chocolate */
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(210, 105, 30, 0.3) !important;
}

[data-theme="vintage"] .btn-glass-primary:hover {
    background-color: #a0522d !important;
    /* Sienna */
}


/* =========================================
   GLOBAL CHECKBOX VISIBILITY FIX
   ========================================= */

/* Light Theme (Default) */
[data-theme="light"] .form-check-input,
html:not([data-theme]) .form-check-input {
    border: 1px solid #adb5bd !important;
    /* Darker grey for visibility */
    background-color: #fff;
}

[data-theme="light"] .form-check-input:checked,
html:not([data-theme]) .form-check-input:checked {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* Vintage Theme */
[data-theme="vintage"] .form-check-input {
    border: 1px solid #a0937d !important;
    /* Darker vintage border */
    background-color: #fdf6e3;
}

[data-theme="vintage"] .form-check-input:checked {
    background-color: #d2691e !important;
    /* Copper */
    border-color: #d2691e !important;
}

/* Dark Theme (Ensure visibility) */
[data-theme="dark"] .form-check-input {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}



/* --- NEON STATUS BADGE STYLES --- */
.status-badge {
    display: inline-block;
    padding: 0.35em 0.8em;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid transparent; 
    box-shadow: 0 0 5px rgba(0,0,0,0.05);
}

.status-badge.w-100 { width: 100%; }

/* --- LIGHT THEME --- */
:root .status-badge, [data-theme="light"] .status-badge { box-shadow: none; border: 1px solid rgba(0,0,0,0.1); }
:root .status-badge-success,     [data-theme="light"] .status-badge-success { background: rgba(46, 204, 113, 0.1); color: #27ae60 !important; border-color: rgba(46, 204, 113, 0.3); }
:root .status-badge-warning,     [data-theme="light"] .status-badge-warning { background: rgba(241, 196, 15, 0.1); color: #d35400 !important; border-color: rgba(241, 196, 15, 0.3); }
:root .status-badge-danger,      [data-theme="light"] .status-badge-danger { background: rgba(231, 76, 60, 0.1); color: #c0392b !important; border-color: rgba(231, 76, 60, 0.3); }
:root .status-badge-primary,     [data-theme="light"] .status-badge-primary { background: rgba(52, 152, 219, 0.1); color: #2980b9 !important; border-color: rgba(52, 152, 219, 0.3); }
:root .status-badge-info,        [data-theme="light"] .status-badge-info { background: rgba(26, 188, 156, 0.1); color: #16a085 !important; border-color: rgba(26, 188, 156, 0.3); }
:root .status-badge-secondary,   [data-theme="light"] .status-badge-secondary { background: rgba(149, 165, 166, 0.1); color: #7f8c8d !important; border-color: rgba(149, 165, 166, 0.3); }

/* --- DARK THEME (True Neon) --- */
[data-theme="dark"] .status-badge { background: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .status-badge-success { color: #00ff88 !important; text-shadow: 0 0 8px rgba(0,255,136,0.6); border-color: rgba(0,255,136,0.2); }
[data-theme="dark"] .status-badge-warning { color: #ffea00 !important; text-shadow: 0 0 8px rgba(255,234,0,0.6); border-color: rgba(255,234,0,0.2); }
[data-theme="dark"] .status-badge-danger { color: #ff3366 !important; text-shadow: 0 0 8px rgba(255,51,102,0.6); border-color: rgba(255,51,102,0.2); }
[data-theme="dark"] .status-badge-primary { color: #00e5ff !important; text-shadow: 0 0 8px rgba(0,229,255,0.6); border-color: rgba(0,229,255,0.2); }
[data-theme="dark"] .status-badge-info { color: #00ffff !important; text-shadow: 0 0 8px rgba(0,255,255,0.6); border-color: rgba(0,255,255,0.2); }
[data-theme="dark"] .status-badge-secondary { color: #b388ff !important; text-shadow: 0 0 8px rgba(179,136,255,0.6); border-color: rgba(179,136,255,0.2); }

/* --- VINTAGE THEME (Muted Neon / Glowing Parchment Ink) --- */
[data-theme="vintage"] .status-badge { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); }
[data-theme="vintage"] .status-badge-success { color: #2e8b57 !important; text-shadow: 0 0 4px rgba(46,139,87,0.3); }
[data-theme="vintage"] .status-badge-warning { color: #b8860b !important; text-shadow: 0 0 4px rgba(184,134,11,0.3); }
[data-theme="vintage"] .status-badge-danger { color: #a52a2a !important; text-shadow: 0 0 4px rgba(165,42,42,0.3); }
[data-theme="vintage"] .status-badge-primary { color: #4682b4 !important; text-shadow: 0 0 4px rgba(70,130,180,0.3); }
[data-theme="vintage"] .status-badge-info { color: #008080 !important; text-shadow: 0 0 4px rgba(0,128,128,0.3); }
[data-theme="vintage"] .status-badge-secondary { color: #708090 !important; text-shadow: 0 0 4px rgba(112,128,144,0.3); }