:root {
    /* --- THEME VARIABLES --- */
    --primary-gradient: linear-gradient(135deg, #6b8fc4 0%, #4a72a8 100%);
    --primary-color: #6b8fc4;

    /* Light Mode — single-accent, translucent glass system */
    --sidebar-bg: rgba(252,252,254,0.92);
    --sidebar-text: #6c757d;
    --sidebar-active-bg: rgba(107,143,196,0.09);
    --sidebar-active-text: #6b8fc4;

    --bg-body: #eef1f7;
    --bg-card: rgba(255,255,255,0.82);
    --text-main: #4a4a4a;
    --text-muted: #858796;
    --border-color: rgba(0,0,0,0.07);
    --shadow-soft: 0 2px 16px rgba(58,59,69,0.06), 0 1px 3px rgba(0,0,0,0.03);
    --bs-primary: #6b8fc4;
    --bs-primary-rgb: 107,143,196;
    --bs-primary-bg-subtle: #dce8f4;
    --bs-primary-text-emphasis: #3a5f8a;
    --bs-success: #5a9e78;
    --bs-success-rgb: 90,158,120;
    --bs-success-bg-subtle: #dbeee5;
    --bs-success-text-emphasis: #2d6a4a;
    --bs-info: #5ba4b8;
    --bs-info-rgb: 91,164,184;
    --bs-info-bg-subtle: #d6edf4;
    --bs-info-text-emphasis: #2a6a7a;
    --bs-warning: #d4a55a;
    --bs-warning-rgb: 212,165,90;
    --bs-warning-bg-subtle: #f5e8cc;
    --bs-warning-text-emphasis: #7a5420;
    --bs-danger: #c46a6a;
    --bs-danger-rgb: 196,106,106;
    --bs-danger-bg-subtle: #f2dada;
    --bs-danger-text-emphasis: #883030;
    --accent-subtle: rgba(107,143,196,0.12);
}

[data-theme="dark"] {
    /* Dark Mode — consistent accent blue, translucent glass system */
    --primary-gradient: linear-gradient(135deg, #a0bcd8 0%, #6b90b8 100%);
    --primary-color: #a0bcd8;

    --sidebar-bg: rgba(16,18,24,0.93);
    --sidebar-text: #9aa0ae;
    --sidebar-active-bg: rgba(78,115,223,0.12);
    --sidebar-active-text: #ffffff;

    --bg-body: #0d0f16;
    --bg-card: rgba(20,22,30,0.82);
    --text-main: #dde1ea;
    --text-muted: #9aa0ae;
    --border-color: rgba(255,255,255,0.06);
    --shadow-soft: 0 4px 20px rgba(0,0,0,0.28), 0 1px 4px rgba(0,0,0,0.18);
}

body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: 'Nunito', sans-serif;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Subtle ambient gradient that makes glass translucency visible */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 90% 60% at 50% -5%, rgba(78,115,223,0.07), transparent 60%);
}

/* =================================================================
   SIDEBAR — Four-State System
   Desktop (≥769px): State 1 = full (260px), State 2 = rail (64px)
   Mobile  (≤768px): State 1 = collapsed (hidden), State 2 = overlay
   ================================================================= */

/* --- BASE SIDEBAR STRUCTURE --- */
#sidebar {
    min-width: 260px;
    max-width: 260px;
    height: 100vh;
    background: var(--sidebar-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 1px 0 0 var(--border-color), 4px 0 24px rgba(0,0,0,0.04);
    transition: min-width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: flex-start;
    overflow: hidden;
}

/* ── DESKTOP STATE 2: Rail (icon-only, 64px) ── */
/* Applied by JS when sidebarDesktopState = 'rail' */
@media (min-width: 769px) {
    #sidebar.rail {
        min-width: 64px;
        max-width: 64px;
    }

    /* Rail: brand — keep icon, hide text */
    #sidebar.rail .sidebar-brand {
        padding: 1.25rem 0;
        justify-content: center;
    }
    #sidebar.rail .sidebar-brand-name { display: none; }
    #sidebar.rail .sidebar-brand i { margin: 0 !important; font-size: 1.3rem; }

    /* Rail: nav links — center icon, hide label with tooltip on hover */
    #sidebar.rail ul li a {
        justify-content: center;
        padding: 11px 0;
        position: relative;
        overflow: visible;
    }
    #sidebar.rail ul li a i {
        width: auto;
        font-size: 1.15rem;
        margin: 0;
    }
    #sidebar.rail ul li a[style*="padding-left"] {
        padding-left: 0 !important;
    }
    #sidebar.rail ul li a span {
        position: absolute;
        left: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%);
        background: var(--bg-card);
        color: var(--text-main);
        padding: 5px 11px;
        border-radius: 7px;
        font-size: 0.82rem;
        font-weight: 600;
        white-space: nowrap;
        box-shadow: 0 4px 16px rgba(0,0,0,0.14);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.14s ease;
        z-index: 2000;
    }
    #sidebar.rail ul li a:hover span { opacity: 1; }

    /* Rail: hide section labels + dividers */
    #sidebar.rail .sidebar-section-label,
    #sidebar.rail .sidebar-divider { display: none !important; }

    /* Rail: logout button — center icon only */
    #sidebar.rail .sidebar-logout-btn {
        justify-content: center;
        padding: 11px 0;
    }
    #sidebar.rail .sidebar-logout-btn i { margin: 0 !important; }
    #sidebar.rail .sidebar-logout-btn span { display: none; }
}

/* Brand Header */
.sidebar-brand {
    padding: 1.5rem 1rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: 0.05rem;
    text-align: center;
    flex-shrink: 0;
}

/* Menu Items (Grows to fill space) */
#sidebar ul.components {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    margin-bottom: 0;
}

#sidebar ul li { margin-bottom: 0.5rem; }

#sidebar ul li a {
    padding: 12px 15px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sidebar-text);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

#sidebar ul li a i { width: 30px; text-align: center; font-size: 1.1rem; }

/* Hover & Active States */
#sidebar ul li a:hover,
#sidebar ul li.active a {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    transform: translateX(5px);
}
#sidebar ul li.active a { transform: none; }

/* --- SIDEBAR FOOTER & LOGOUT --- */
.sidebar-footer {
    padding: 1rem;
    background: transparent;
    box-shadow: 0 -1px 0 var(--border-color);
}

.sidebar-logout-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100%;
    padding: 12px 15px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sidebar-text);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-align: left;
}

.sidebar-logout-btn i {
    width: 30px;
    text-align: center;
    font-size: 1.1rem;
    color: var(--bs-danger);
}

.sidebar-logout-btn:hover {
    background-color: rgba(196,106,106,0.1) !important;
    color: var(--bs-danger) !important;
}

[data-theme="dark"] .sidebar-logout-btn:hover {
    background-color: rgba(231, 74, 59, 0.2) !important;
}

/* --- MAIN CONTENT & LAYOUT --- */
.wrapper { display: flex; width: 100%; align-items: stretch; }
#content { flex: 1; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
.full-width { width: 100% !important; }

.navbar {
    background: var(--sidebar-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 var(--border-color);
}

.card {
    background-color: var(--bg-card);
    border: none;
    box-shadow: var(--shadow-soft);
    border-radius: 0.85rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.main-content { padding: 2rem; }

/* --- SCRIM / OVERLAY (mobile only) --- */
#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

/* ── MOBILE OVERLAY SIDEBAR (≤768px) ── */
@media (max-width: 768px) {
    /* Show scrim element only on mobile */
    #sidebar-overlay { display: block; }

    body.sidebar-open #sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    /* Mobile State 1: collapsed (hidden off left edge) */
    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        z-index: 1100;
        transform: translateX(-100%);
        margin-left: 0 !important;
        min-width: 260px;
        max-width: 260px;
    }

    /* Mobile State 2: overlay (slides in over content) */
    #sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Content never reflows on mobile — always full width */
    #content {
        width: 100% !important;
        min-width: 0;
    }

    .main-content {
        padding: 1rem !important;
    }
}

/* --- USER AVATAR (Navbar) --- */
.avatar-circle {
    width: 40px; height: 40px;
    background: var(--primary-gradient);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: bold; font-size: 1.2rem;
    border: 2px solid var(--bg-card);
    overflow: hidden;
}
.avatar-circle img { width: 100%; height: 100%; object-fit: cover; }

/* --- DARK MODE BOOTSTRAP OVERRIDES --- */
/* Forces Bootstrap to use our CSS variables */
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-main) !important;
}

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

.form-control {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}

.form-control:focus {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--primary-color) !important;
    box-shadow: none;
}

/* Fix disabled inputs so they are readable in dark mode */
.form-control:disabled, .form-control[readonly] {
    background-color: rgba(0,0,0, 0.05) !important;
    color: var(--text-muted) !important;
    opacity: 1;
}

[data-theme="dark"] .form-control:disabled, 
[data-theme="dark"] .form-control[readonly] {
    background-color: rgba(255,255,255, 0.05) !important;
}

.card-header { border-bottom: 1px solid var(--border-color) !important; border-bottom-color: var(--border-color) !important; }

/* --- FORCE HEADER & LABEL COLORS (The "Nuclear" Option) --- */
.card-header h6, 
.card-header span, 
.card-title {
    color: var(--text-main) !important;
}

.card-header i {
    opacity: 1 !important; 
}

.form-check-label, .form-label, .card-body span, .card-body label {
    color: var(--text-main);
}

.small, small {
    color: var(--text-muted) !important;
}

/* --- FIX FILE INPUT BUTTON --- */
.form-control[type="file"] {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}

.form-control::file-selector-button {
    background-color: var(--sidebar-bg) !important;
    color: var(--text-main) !important;
    border-right: 1px solid var(--border-color) !important;
    border-top: none; border-bottom: none; border-left: none;
}

[data-theme="dark"] .form-control::file-selector-button:hover {
    background-color: var(--sidebar-active-bg) !important;
}

/* --- EMAIL LIST DARK MODE FIXES --- */
/* 1. Fix the List Group (Emails) Background */
.list-group-item {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

/* 2. Fix "Re-send Verification" Button Visibility in Dark Mode */
[data-theme="dark"] .btn-outline-secondary {
    color: #e3e6f0 !important;
    border-color: #e3e6f0 !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: #e3e6f0 !important;
    color: #1a1c23 !important;
}

[data-theme="dark"] .form-control::placeholder {
    color: #a0a0a0 !important;
    opacity: 1; /* Forces full visibility */
}

/* Ensures the text you type is bright white */
[data-theme="dark"] .form-control {
    color: #ffffff !important;
}

/* --- FINAL LOGIN & AUTOFILL FIXES --- */

/* 1. FORCE AUTOFILL TO BE DARK (The "Blue Box" Fix) */
/* This specific transition trick prevents Chrome from turning inputs blue/yellow */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px var(--bg-card) inset !important;
    -webkit-text-fill-color: var(--text-main) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* 2. CUSTOM GOOGLE BUTTON STYLING */
.btn-google {
    background-color: #ffffff;
    color: #333333;
    border: 1px solid var(--border-color);
    transition: all 0.2s;
}

.btn-google:hover {
    background-color: #f8f9fa;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Dark Mode Google Button */
[data-theme="dark"] .btn-google {
    background-color: #2c2f3b; /* Lighter than card, darker than white */
    color: #ffffff;
    border-color: #444;
}

[data-theme="dark"] .btn-google:hover {
    background-color: #3a3f4b;
}

/* --- INPUT GROUP SEAMLESS FIXES (Search Bar) --- */
.input-group-text {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
}

.input-group .form-control {
    border-color: var(--border-color) !important;
}

/* Fix Focus State for Seamless Group */
.input-group:focus-within .input-group-text,
.input-group:focus-within .form-control {
    border-color: var(--primary-color) !important;
    box-shadow: none;
}

/* --- ULTIMATE DARK MODE TABLE & TAB FIXES --- */
/* These rules use high specificity to override Bootstrap defaults */

/* 1. TABLE RESET: Force transparent backgrounds so dark card shows through */
[data-theme="dark"] .table {
    --bs-table-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-active-bg: transparent !important;
    --bs-table-hover-bg: var(--sidebar-active-bg) !important;
    --bs-table-color: var(--text-main) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

/* 2. TABLE HEADERS & BORDERS */
[data-theme="dark"] .table thead th {
    color: var(--text-muted) !important;
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .table td, 
[data-theme="dark"] .table th {
    border-bottom-color: var(--border-color) !important;
}

/* 3. TABLE HOVER FIX (The "Black Text" Killer) */
[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    /* Override Bootstrap's internal hover variables */
    --bs-table-accent-bg: var(--sidebar-active-bg) !important;
    --bs-table-hover-color: var(--text-main) !important;
    
    /* Direct Override for legacy browsers */
    color: var(--text-main) !important;
    background-color: var(--sidebar-active-bg) !important;
    
    /* Ensure shadows/borders don't create white lines */
    box-shadow: inset 0 0 0 9999px var(--sidebar-active-bg) !important;
}

/* 4. FIX LINKS ON HOVER (PDF Icon, Edit/Delete Buttons) */
/* Ensures icons stay visible/colored when row is hovered */
[data-theme="dark"] .table-hover > tbody > tr:hover a {
    color: var(--primary-color) !important;
}
[data-theme="dark"] .table-hover > tbody > tr:hover .text-danger {
    color: var(--bs-danger-text-emphasis) !important; /* Keep delete button red */
}

/* 5. ACTIVE TAB FIX (Force Background & Text) */
[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    border-bottom-color: var(--bg-card) !important; /* Blends with card */
    color: var(--primary-color) !important;
    font-weight: 700 !important;
    
    /* Fix for the white background issue */
    background-image: none !important;
    isolation: isolate;
}

/* 6. INACTIVE TAB HOVER */
[data-theme="dark"] .nav-tabs .nav-link:hover:not(.active) {
    border-color: transparent;
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-main) !important;
}

/* --- DARK MODE TAB BRIGHTNESS --- */
/* Makes inactive tabs brighter/white in dark mode for better readability */
[data-theme="dark"] .nav-tabs .nav-link:not(.active) {
    color: #e0e0e0 !important; /* Much brighter than previous muted grey */
    opacity: 0.7;
}

[data-theme="dark"] .nav-tabs .nav-link:hover:not(.active) {
    opacity: 1;
    color: #ffffff !important;
}

/* --- MUTED DELETE CARD STYLING --- */

/* 1. Light Mode Defaults (Soft Red) */
.delete-card {
    border-top: 4px solid var(--bs-danger) !important; /* Subtle top colored border only */
}
.delete-header {
    background-color: #fff !important;
    color: var(--bs-danger) !important;
    border-bottom: none !important;
}
.text-highlight {
    color: #333; /* Standard dark text for invoice number */
}

/* 2. Dark Mode Overrides (Muted & Readable) */
[data-theme="dark"] .delete-header {
    background-color: var(--bg-card) !important;
    color: var(--bs-danger-text-emphasis) !important; /* Softer, brighter red for dark bg */
}

[data-theme="dark"] .delete-card {
    border-color: var(--border-color) !important;
    border-top-color: var(--bs-danger) !important; /* Keep the red accent on top */
}

[data-theme="dark"] .text-highlight {
    color: #ffffff !important; /* Bright white invoice number */
}

[data-theme="dark"] .text-secondary {
    color: #b0b0b0 !important; /* Readable grey for helper text */
}

/* Fix the 'Cancel' button in dark mode to not be glaring white */
[data-theme="dark"] .btn-light {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}
[data-theme="dark"] .btn-light:hover {
    background-color: rgba(255,255,255,0.1) !important;
}

/* --- UNIVERSAL ACTIVE TAB COLOR --- */
/* Forces the Active Tab text to be Blue (Primary) in ALL modes */
.nav-tabs .nav-link.active,
[data-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--primary-color) !important;
    font-weight: 700 !important;
}

/* --- DARK MODE MODAL FIXES --- */

/* 1. Force the Modal Content to match Dark Card styling */
[data-theme="dark"] .modal-content {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}

/* 2. Ensure the Header text is visible */
[data-theme="dark"] .modal-header .modal-title {
    color: #ffffff !important; /* Bright white title */
}

/* 3. Ensure Header Close Button (X) is visible if present */
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* 4. Fix Modal Body Text & Highlight */
[data-theme="dark"] .modal-body p {
    color: var(--text-main) !important; /* Standard readable grey */
}

[data-theme="dark"] .modal-body .text-highlight {
    color: #ffffff !important; /* Bright white for invoice number */
}

[data-theme="dark"] .modal-body .text-secondary {
    color: #b0b0b0 !important; /* Softer grey for helper text */
}

/* 5. Fix the Cancel Button in Dark Mode */
[data-theme="dark"] .modal-footer .btn-light,
[data-theme="dark"] .modal-body .btn-light {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
    transition: all 0.2s;
}

[data-theme="dark"] .modal-footer .btn-light:hover,
[data-theme="dark"] .modal-body .btn-light:hover {
    background-color: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
}

/* --- SYSTEM SETTINGS DARK MODE FIXES --- */

/* 1. Fix "Apps & Roles" List Item Visibility */
[data-theme="dark"] .list-group-item {
    background-color: var(--bg-card) !important; /* Match card bg */
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
    transition: background-color 0.2s;
}

[data-theme="dark"] .list-group-item:hover {
    background-color: var(--sidebar-active-bg) !important; /* Lighten on hover */
    color: #ffffff !important;
}

/* 2. GLOBAL BADGE FIXES (Contrast) */
/* Forces white text on primary badges in Light Mode too */
.badge.bg-primary {
    color: #ffffff !important;
}

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

/* 3. CRITICAL: Fix Badge Contrast on Table Hover */
/* When hovering a row, turn the semi-transparent badge into a SOLID color */
[data-theme="dark"] .table-hover > tbody > tr:hover .badge.bg-secondary {
    background-color: #6c757d !important; /* Solid grey */
    opacity: 1 !important;
    color: #ffffff !important;
}

/* Fix the border on the badge so it doesn't look messy on hover */
[data-theme="dark"] .badge.border {
    border-color: rgba(255,255,255,0.2) !important;
}

/* --- SIDEBAR DIVIDER STYLING --- */
.sidebar-divider {
    margin: 0.6rem 0;
    opacity: 0.12;
    border-color: var(--text-muted) !important;
}

[data-theme="dark"] .sidebar-heading {
    color: var(--text-muted) !important;
    opacity: 0.6;
}

/* --- AUTH PAGE DARK MODE FIXES --- */

/* 1. Fix the Footer Background */
/* This removes the bright white box at the bottom of the login/signup card */
[data-theme="dark"] .card-footer.bg-light {
    background-color: transparent !important; 
    border-top: 1px solid var(--border-color) !important; /* Adds a subtle separator line */
}

/* 2. Fix the Footer Text */
/* Ensures "Need an account?" text isn't too dark */
[data-theme="dark"] .card-footer .small {
    color: var(--text-muted) !important;
}

/* 3. Fix Input Placeholders (Optional Polish) */
/* Ensures placeholder text like "name@example.com" is readable */
[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.5;
}

/* --- FIXED SIDEBAR SETTINGS --- */

/* Removed CSS that hid the toggle button on desktop to allow state management functionality across all screen sizes */

/* --- DARK MODE BADGE FIXES --- */

/* Override the 'bg-light' badges in Dark Mode */
/* This creates a dark grey badge with light text, instead of a bright white one */
[data-theme="dark"] .badge.bg-light {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Semi-transparent dark */
    color: #e9ecef !important;            /* Light/White text */
    border-color: rgba(255, 255, 255, 0.2) !important; /* Subtle border */
}

/* Force override the 'text-dark' class if it's still clinging on */
[data-theme="dark"] .badge.bg-light.text-dark {
    color: #e9ecef !important;
}

/* --- DARK MODE FORM FIXES --- */

/* 1. Fix the Select Dropdown (The box itself) */
[data-theme="dark"] .form-select {
    background-color: #212529 !important; /* Dark Grey background */
    color: #e9ecef !important;            /* Light Text */
    border-color: rgba(255, 255, 255, 0.2) !important;
    
    /* This overrides the default blue/black arrow with a lighter one if needed */
    /* Bootstrap 5 usually handles this if data-bs-theme is set, but this forces it: */
    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='%23e9ecef' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; 
}

/* 2. Fix the Options (The dropdown list) */
[data-theme="dark"] .form-select option {
    background-color: #212529;
    color: #e9ecef;
}

/* 3. Fix Text Inputs if they aren't fully cooperating yet */
[data-theme="dark"] .form-control {
    background-color: #212529 !important;
    color: #e9ecef !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Overdue gate textarea — no form-control class from widget, target by id */
[data-theme="dark"] #id_delay_reason {
    background-color: #212529 !important;
    color: #e9ecef !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 4. Fix Disabled/Readonly Inputs to not be bright white */
[data-theme="dark"] .form-control:disabled, 
[data-theme="dark"] .form-select:disabled {
    background-color: #343a40 !important;
    opacity: 0.6;
}

/* --- DARK MODE DROPDOWN FIXES --- */

/* 1. The Menu Container */
[data-theme="dark"] .dropdown-menu {
    background-color: #212529 !important;       /* Dark Grey */
    border-color: rgba(255, 255, 255, 0.15) !important; /* Subtle Border */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important; /* Deeper Shadow */
}

/* 2. The Link Items */
[data-theme="dark"] .dropdown-item {
    color: #e9ecef !important; /* Light Text */
}

/* 3. Hover State (When you mouse over an item) */
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Semi-transparent highlight */
    color: #ffffff !important; /* Bright White text on hover */
}

/* 4. Dropdown Headers or Text (if you use them) */
[data-theme="dark"] .dropdown-item-text {
    color: #adb5bd !important;
}

/* --- BOOTSTRAP SUBTLE/EMPHASIS VAR OVERRIDES FOR data-theme="dark" --- */
/* Bootstrap 5.3 *-subtle / *-emphasis classes use CSS vars that only flip
   with data-bs-theme="dark". This project uses data-theme="dark" instead,
   so we override the vars manually here to get the same effect. */
[data-theme="dark"] {
  --bs-primary: #a0bcd8;
  --bs-primary-rgb: 160,188,216;
  --bs-primary-bg-subtle:       #1c2d3d;
  --bs-primary-text-emphasis:   #a0bcd8;
  --bs-secondary-bg-subtle:     #2a2f3a;
  --bs-secondary-text-emphasis: #c0c4cc;
  --bs-success-bg-subtle:       #1b3228;
  --bs-success-text-emphasis:   #7ec8a0;
  --bs-info-bg-subtle:          #1a303a;
  --bs-info-text-emphasis:      #7ec4d0;
  --bs-warning-bg-subtle:       #322a1a;
  --bs-warning-text-emphasis:   #d4a96c;
  --bs-danger-bg-subtle:        #321c22;
  --bs-danger-text-emphasis:    #d48888;
  --bs-border-color:            var(--border-color, #2a2f3a);
  /* Fix text-body-emphasis visibility in dark mode */
  --bs-emphasis-color: #f5f6f8;
  --bs-emphasis-color-rgb: 245, 246, 248;
  --bs-body-color: var(--text-main, #dde1ea);
  --bs-body-color-rgb: 221, 225, 234;
  --bs-secondary-color: rgba(245, 246, 248, 0.65);
  --accent-subtle: rgba(160,188,216,0.10);
}

/* --- DARK MODE DASHBOARD REFINEMENTS --- */

/* 1. Fix Card Headers (Work In Progress Section) */
/* Overrides the 'bg-warning bg-opacity-10' to be darker and more readable */
[data-theme="dark"] .card-header.bg-warning {
    background-color: rgba(212, 165, 90, 0.15) !important; /* Slightly more visible tint */
    border-bottom: 1px solid rgba(212, 165, 90, 0.2) !important;
}

[data-theme="dark"] .card-header .text-warning-emphasis {
    color: var(--bs-warning-text-emphasis) !important; /* Brighter yellow for dark background */
}

/* 2. Fix List Group Items inside Cards */
[data-theme="dark"] .list-group-item.bg-transparent {
    border-bottom-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

/* 3. Fix "Process Timer" Text Visibility */
/* Ensures the timer isn't too dark blue in dark mode */
/* NOTE: actual class on timer element is .timer-display; .process-timer kept for legacy */
[data-theme="dark"] .process-timer.text-primary,
[data-theme="dark"] .timer-display.text-primary {
    color: #6ea8fe !important; /* Light Blue */
}
[data-theme="dark"] .process-timer.text-danger,
[data-theme="dark"] .timer-display.text-danger {
    color: var(--bs-danger-text-emphasis) !important; /* Light Red (Overdue) */
}

/* 4. Fix Table Headers inside Stock Cards */
[data-theme="dark"] .card .table thead.bg-light {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Subtle dark grey header */
    color: var(--text-muted) !important;
}

[data-theme="dark"] .card .table thead th {
    border-bottom-color: var(--border-color) !important;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* 5. Fix "Last Update" Text in Stock Table */
[data-theme="dark"] .table .text-end.small.text-muted {
    color: #858796 !important; /* Ensures it doesn't disappear */
}

/* 6. Fix "No Inventory/Process" Empty States */
[data-theme="dark"] .alert-light {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
}

/* 7. Fix Material Name Links (if they become links later) */
[data-theme="dark"] .table td.text-primary {
    color: #6ea8fe !important; /* Lighter blue for better contrast on black */
}

/* 8. Refine "Stock In" Button Shadow */
[data-theme="dark"] .btn-success.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.5) !important;
}

/* --- DARK MODE TRANSACTION FORM FIXES --- */

/* 1. Fix "Waste/Faulty" Box Background */
/* Ensures the container is dark grey, not bright white */
[data-theme="dark"] .bg-secondary.bg-opacity-10 {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border-color) !important;
}

/* 2. Fix Input Labels inside the Waste Box */
[data-theme="dark"] .bg-secondary.bg-opacity-10 label {
    color: #e0e0e0 !important;
}

/* 3. Fix "Expected Output" Alert Text */
[data-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.15) !important;
    color: #a3cfbb !important; /* Softer green text */
    border-color: rgba(25, 135, 84, 0.3) !important;
}

/* 4. Fix "Cancel" Button in Dark Mode */
[data-theme="dark"] .btn-light {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
    color: #e0e0e0 !important;
}
[data-theme="dark"] .btn-light:hover {
    background-color: rgba(255,255,255,0.1) !important;
}

/* --- DASHBOARD BUTTON CONTRAST FIXES --- */

/* 1. Fix "Complete Process" Button on Red/Yellow Cards */
/* Ensures the green button pops against the red overdue background */
.process-card .btn-success {
    box-shadow: 0 4px 6px rgba(25, 135, 84, 0.3); /* Adds depth */
    border: 1px solid rgba(255,255,255,0.2);     /* Adds separation */
}

/* 2. Fix "Wait for Process" (Disabled) Button */
/* Makes it look clearly disabled but readable */
.process-card .btn-secondary.disabled {
    background-color: rgba(108, 117, 125, 0.5);
    border-color: transparent;
    color: #fff;
    opacity: 0.7;
}

/* 3. Dark Mode Overdue Card Text */
[data-theme="dark"] .process-card.theme-danger .card-body {
    /* Ensures text inside the red overdue card is readable */
    color: #ffcccc; 
}
[data-theme="dark"] .process-card.theme-danger .text-muted {
    color: #ffb3b3 !important; /* Light red-grey instead of standard grey */
}

/* --- LIGHT & DARK MODE CONTRAST REFINEMENTS --- */

/* 1. Force WHITE text on the Process Name Badge (e.g. "Winding") */
/* This fixes the issue where it might look grey in Light Mode */
.process-card .badge.bg-dark {
    color: #ffffff !important;
}

/* 2. Force WHITE text on the Complete Button */
/* Ensures high contrast against the green button */
.process-card .btn-success {
    color: #ffffff !important;
}

/* 3. LIGHT MODE: Specific text colors for colored cards */
.process-card.theme-danger .text-muted {
    color: #6a1a21 !important; /* Dark Red-Grey for readability on pink */
}
.process-card.theme-danger .timer-display.text-danger {
    color: #842029 !important; /* Deep Crimson for "OVERDUE" */
}
.process-card.theme-warning .text-muted {
    color: #664d03 !important; /* Dark Brown-Yellow for readability on yellow */
}

/* 4. DARK MODE: Revert Overdue Card Text to White */
/* As requested: Text inside red cards stays bright white in dark mode */
[data-theme="dark"] .process-card.theme-danger .card-body {
    color: #ffffff !important; 
}
[data-theme="dark"] .process-card.theme-danger .text-muted {
    color: #e0e0e0 !important; /* Bright Grey, almost white */
}
[data-theme="dark"] .process-card.theme-danger h5 {
    color: #ffffff !important; /* Material Name (e.g. "Silk") */
}

/* 5. Button Borders for "Pop" on colored backgrounds */
.process-card .btn {
    border: 1px solid rgba(255,255,255,0.4); 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* --- FINAL CONTRAST FIXES --- */

/* 1. Force WHITE text on the Process Name Badge (e.g. "Winding") */
.process-card .badge.bg-dark {
    color: #ffffff !important;
}

/* 2. Force WHITE text on the Complete Button (Green) */
/* We target hover/focus states to prevent it flipping back to dark */
.process-card .btn-success,
.process-card .btn-success:hover,
.process-card .btn-success:focus,
.process-card .btn-success:active {
    color: #ffffff !important;
}

/* 3. LIGHT MODE: Specific text colors for colored cards */
.process-card.theme-danger .text-muted {
    color: #6a1a21 !important; /* Dark Red-Grey for readability on pink */
}
.process-card.theme-danger .timer-display.text-danger {
    color: #842029 !important; /* Deep Crimson for "OVERDUE" */
}
.process-card.theme-warning .text-muted {
    color: #664d03 !important; /* Dark Brown-Yellow for readability on yellow */
}

/* 4. DARK MODE: Revert Overdue Card Text to White */
[data-theme="dark"] .process-card.theme-danger .card-body {
    color: #ffffff !important; 
}
[data-theme="dark"] .process-card.theme-danger .text-muted {
    color: #e0e0e0 !important; /* Bright Grey */
}
[data-theme="dark"] .process-card.theme-danger h5,
[data-theme="dark"] .process-card.theme-danger small, 
[data-theme="dark"] .process-card.theme-danger p {
    color: #ffffff !important;
}

/* --- ULTIMATE CONTRAST OVERRIDE --- */

/* 1. Force Complete Button Text White (All States, All Children) */
/* We use 'body' to increase specificity above everything else */
body .process-card .btn-success,
body .process-card .btn-success:hover,
body .process-card .btn-success:focus,
body .process-card .btn-success:active,
body .process-card .btn-success i, 
body .process-card .btn-success span {
    color: #ffffff !important;
}

/* 2. Force Process Badge (e.g. "Winding") Text White */
body .process-card .badge.bg-dark {
    color: #ffffff !important;
}

/* 3. LIGHT MODE: Specific text colors for Red/Pink Overdue Cards */
/* Makes the "Input: 5kg" and "Overdue" text readable on pink background */
body .process-card.theme-danger .text-muted {
    color: #6a1a21 !important; 
}
body .process-card.theme-danger .timer-display.text-danger {
    color: #842029 !important; 
}
body .process-card.theme-warning .text-muted {
    color: #664d03 !important;
}

/* 4. DARK MODE: Revert Overdue Card Text to White */
/* As requested: Text inside red cards stays bright white in dark mode */
[data-theme="dark"] .process-card.theme-danger .card-body,
[data-theme="dark"] .process-card.theme-danger .text-muted,
[data-theme="dark"] .process-card.theme-danger h5,
[data-theme="dark"] .process-card.theme-danger small, 
[data-theme="dark"] .process-card.theme-danger p {
    color: #ffffff !important;
}

/* --- OVERDUE FORM DARK MODE FIXES --- */

/* 1. Fix the "Info Box" Background in Dark Mode */
[data-theme="dark"] .info-box.bg-light {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Transparent dark grey */
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--bs-danger) !important; /* Keep the red accent */
    color: #e0e0e0;
}

/* 2. Fix Text Visibility inside the Info Box */
[data-theme="dark"] .info-box .fw-bold {
    color: #ffffff !important;
}

/* 3. Fix the Main Title Text */
[data-theme="dark"] .card-title {
    color: #ffffff !important;
}

/* 4. Fix the Input Field (Text Area) */
/* Prevents it from being glaringly white in dark mode */
[data-theme="dark"] textarea.form-control {
    background-color: rgba(255,255,255,0.05) !important;
    border-color: var(--border-color) !important;
    color: #ffffff !important;
}

/* 5. Fix the "Log & Continue" Button in Dark Mode */
/* Inverts the dark button to be white/light-grey so it stands out on black */
[data-theme="dark"] .btn-dark {
    background-color: #e0e0e0;
    color: #1a1c23;
    border: none;
}
[data-theme="dark"] .btn-dark:hover {
    background-color: #ffffff;
}

/* --- DARK MODE REPORTS PAGE FIXES --- */

/* 1. KPI Big Numbers (100%, 0, etc.) */
/* Forces them to be bright white */
[data-theme="dark"] .display-6 {
    color: #ffffff !important;
    font-weight: 700;
}

/* 2. Bottleneck Progress Bars */
/* Makes the "empty" part of the bar dark grey instead of the default light grey/white */
[data-theme="dark"] .progress {
    background-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}

/* 3. Action Items (Red Card) Fixes */
/* Ensures the Red Header text is White */
[data-theme="dark"] .card-header.bg-danger .card-title,
[data-theme="dark"] .card-header.bg-danger small,
[data-theme="dark"] .card-header.bg-danger i {
    color: #ffffff !important;
}

/* 4. Action Items "Explanation" Box */
/* Turns the 'alert-light' box into a dark, semi-transparent box with readable text */
[data-theme="dark"] .list-group-item .alert-light {
    background-color: rgba(255, 255, 255, 0.05) !important; /* See-through dark */
    border-color: rgba(196, 106, 106, 0.4) !important;        /* Subtle red border */
    color: #e0e0e0 !important;                              /* Light Grey Text */
}
[data-theme="dark"] .list-group-item .alert-light strong {
    color: var(--bs-danger-text-emphasis) !important;                              /* Light Red for labels */
}

/* 5. Date Filter Buttons (Active State) */
/* Makes the selected "30 Days" button white text on dark grey, vs black on dark */
[data-theme="dark"] .btn-outline-secondary.active {
    background-color: #e0e0e0 !important;
    color: #1a1c23 !important;
    border-color: #e0e0e0 !important;
}

/* 6. Success/Normal Badges in Table */
/* Ensures the "Normal" badge isn't too bright or unreadable */
[data-theme="dark"] .badge.bg-success-subtle {
    background-color: rgba(25, 135, 84, 0.2) !important;
    color: #a3cfbb !important; /* Soft Green text */
    border-color: rgba(25, 135, 84, 0.3) !important;
}

/* 7. Flagged Badges in Table */
[data-theme="dark"] .badge.bg-danger-subtle {
    background-color: rgba(196, 106, 106, 0.2) !important;
    color: var(--bs-danger-text-emphasis) !important; /* Soft Red text */
    border-color: rgba(196, 106, 106, 0.3) !important;
}

/* 8. Archived/Secondary Badges */
[data-theme="dark"] .badge.bg-secondary-subtle {
    background-color: rgba(108, 117, 125, 0.15) !important;
    color: #adb5bd !important;
    border-color: rgba(108, 117, 125, 0.25) !important;
}

/* 9. Table-secondary rows (inactive/archived rows) */
[data-theme="dark"] .table-secondary,
[data-theme="dark"] .table-secondary > td,
[data-theme="dark"] .table-secondary > th {
    --bs-table-accent-bg: rgba(255, 255, 255, 0.04) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: var(--text-muted) !important;
}

/* --- DARK MODE PATCH: Override Utility Classes --- */

/* 1. KILL THE WHITE HEADERS (The Main Fix) */
/* Forces any element with 'bg-white' inside a dark theme to become dark */
[data-theme="dark"] .bg-white {
    background-color: var(--bg-card) !important;
    color: #ffffff !important;
    border-color: var(--border-color) !important;
}

/* 2. Fix Text inside those headers */
/* Ensures "Recent Activity Log" and "Bottleneck Analysis" titles are visible */
[data-theme="dark"] .bg-white .card-title,
[data-theme="dark"] .bg-white h5,
[data-theme="dark"] .bg-white span {
    color: #ffffff !important;
}

/* 3. Fix Subtitle Text (e.g., "Top processes causing delays") */
[data-theme="dark"] .bg-white .text-muted {
    color: #a0a0a0 !important;
}

/* 4. Fix Table Headers (bg-light) */
/* Turns the bright grey table header into a subtle dark header */
[data-theme="dark"] .table thead.bg-light {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Transparent Dark */
    color: #e0e0e0 !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* 5. Fix "No Records Found" Table Row */
/* Ensures the empty state text is readable */
[data-theme="dark"] .table tbody tr td {
    color: var(--text-muted) !important;
    border-bottom-color: var(--border-color) !important;
}

/* 6. Bottleneck Card: Fix "Most frequent delays..." visibility */
[data-theme="dark"] .card-body small {
    color: var(--text-muted) !important;
}

/* --- REPORTS PAGE TEXT FIX --- */
/* Forces 'text-dark' elements to become white in Dark Mode */
[data-theme="dark"] .text-dark {
    color: #e0e0e0 !important;
}

/* Enhances the "Process Name" specifically in the table */
[data-theme="dark"] .table .fw-bold.text-dark {
    color: #ffffff !important;
    font-weight: 700;
}

/* 8. Resolved (Warning) Badges in Table */
/* Fixes the "Resolved" badge to be a readable dark yellow/orange */
[data-theme="dark"] .badge.bg-warning-subtle {
    background-color: rgba(212, 165, 90, 0.2) !important; /* Semi-transparent dark yellow */
    color: var(--bs-warning-text-emphasis) !important;                             /* Bright yellow text */
    border-color: rgba(212, 165, 90, 0.3) !important;       /* Subtle border */
}

/* --- DARK MODE TABLE WARNING FIX (Admin Wipes in Audit Logs) --- */

/* 1. Mute the bright yellow background to a dark, tinted amber */
[data-theme="dark"] .table-warning,
[data-theme="dark"] .table .table-warning > td,
[data-theme="dark"] .table .table-warning > th {
    background-color: rgba(212, 165, 90, 0.12) !important;
    color: var(--text-main) !important;
    --bs-table-bg: transparent !important; /* Strips Bootstrap's default variable */
}

/* 2. Fix the Hover state so it smoothly brightens slightly */
[data-theme="dark"] .table-hover > tbody > tr.table-warning:hover > td,
[data-theme="dark"] .table-hover > tbody > tr.table-warning:hover > th {
    background-color: rgba(212, 165, 90, 0.2) !important;
    box-shadow: none !important;
}

/* 3. Ensure the text inside the row stays crisp and readable */
[data-theme="dark"] .table-warning .text-muted {
    color: #b0b0b0 !important; /* Lighter grey to contrast the amber tint */
}

[data-theme="dark"] .table-warning .text-dark {
    color: #ffffff !important; /* Pure white for primary data (Material Name) */
}

/* 4. Keep the negative quantity text bright red */
[data-theme="dark"] .table-warning .text-danger {
    color: var(--bs-danger-text-emphasis) !important;
}

/* --- DARK MODE SEMANTIC COLORS (Additions & Deductions) --- */

/* Muted, glowing green for Positive values (Additions) */
[data-theme="dark"] .table .text-success {
    color: #6ee7b7 !important; /* Soft mint green */
}

/* Muted, glowing red for Negative values (Deductions) */
[data-theme="dark"] .table .text-danger {
    color: var(--bs-danger-text-emphasis) !important; /* Soft pastel red */
}

/* Ensure the units span stays subtle grey instead of turning red/green */
[data-theme="dark"] .table .text-success .fw-normal,
[data-theme="dark"] .table .text-danger .fw-normal {
    color: #a0a0a0 !important;
}

/* --- COMMERCE CATALOG ACCORDION DARK MODE FIXES --- */
[data-theme="dark"] .accordion-item {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .accordion-button {
    background-color: var(--sidebar-active-bg) !important;
    color: var(--text-main) !important;
}
[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}
[data-theme="dark"] .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ================================================================
   DARK MODE: FORM FIELD & UTILITY CLASS FIXES
   ================================================================ */

/* input-group-text addons (search icon, unit labels) */
[data-theme="dark"] .input-group-text {
    background-color: #212529 !important;
    color: #9aa0ae !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* General bg-light fix for form wrappers and non-badge contexts */
[data-theme="dark"] .bg-light {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

/* text-muted labels and crispy-form help text — #6c757d too dark on dark backgrounds */
[data-theme="dark"] .form-label,
[data-theme="dark"] label.text-muted,
[data-theme="dark"] .small.text-muted,
[data-theme="dark"] .form-text {
    color: #9aa0ae !important;
}

/* date/time input calendar-icon color in dark mode */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"] {
    color-scheme: dark;
}

/* --- DARK MODE ALERT & BG-BODY-TERTIARY FIXES (Transaction Form) --- */

/* Fix alert-light background in dark mode — use dark card colors */
[data-theme="dark"] .alert.border {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .alert.border strong {
    color: #ffffff !important;
}

/* Fix bg-body-tertiary in dark mode (Faulty Output section) */
[data-theme="dark"] .bg-body-tertiary {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border-color) !important;
}

/* ================================================================
   LIQUID GLASS & MOBILE RESPONSIVENESS
   ================================================================ */

/* --- GLASSMORPHISM: Sticky Top Navbar --- */
/* Makes navbar sticky so page content scrolls beneath the frosted bar */
.navbar {
    position: sticky !important;
    top: 0;
    z-index: 1030;
}

/* --- GLASSMORPHISM: Modal Backdrop --- */
/* Blurs the workout page behind all modals (frosted glass backdrop) */
.modal-backdrop.show {
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    background-color: rgba(0, 0, 0, 0.35) !important;
    opacity: 1 !important;
}

/* --- GLASSMORPHISM: Fitness Missing-Fields Modal content --- */
/* Only applied to .modal-glass-content modals */
.modal-glass .modal-content {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="dark"] .modal-glass .modal-content {
    background: rgba(30, 30, 30, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
}

/* --- MOBILE: Responsive utilities (≤ 768px) --- */
@media (max-width: 768px) {
    /* Phase-cycle log button: full width, thumb-friendly height */
    #sticky-log-bar .phase-cycle-btn,
    #log-btn-mobile {
        width: 100% !important;
        min-height: 56px !important;
    }
}

/* ================================================================
   DARK MODE: PROCESS CARD OVERRIDES (dashboard.html)
   Placed last to win over all earlier rules including body-prefixed
   light-mode specificity hacks above.
   ================================================================ */

/* Progress-bar fill: reduce opacity so dark card bg shows through */
[data-theme="dark"] .process-card.theme-danger .progress-bg {
    background-color: rgba(196, 106, 106, 0.12) !important;
}
[data-theme="dark"] .process-card.theme-warning .progress-bg {
    background-color: rgba(212, 165, 90, 0.1) !important;
}

/* Overdue card: all text must be legible on dark-red-tinted dark bg */
[data-theme="dark"] body .process-card.theme-danger .text-muted {
    color: var(--bs-danger-text-emphasis, #f08080) !important;
}
[data-theme="dark"] body .process-card.theme-danger h5,
[data-theme="dark"] body .process-card.theme-danger p,
[data-theme="dark"] body .process-card.theme-danger small {
    color: var(--text-main, #dde1ea) !important;
}

/* OVERDUE timer text: use danger-emphasis var (already defined for dark) */
[data-theme="dark"] body .process-card.theme-danger .timer-display.text-danger {
    color: var(--bs-danger-text-emphasis, #f08080) !important;
}

/* Warning card text */
[data-theme="dark"] body .process-card.theme-warning .text-muted {
    color: var(--bs-warning-text-emphasis, #f0c674) !important;
}
[data-theme="dark"] body .process-card.theme-warning .timer-display {
    color: var(--bs-warning-text-emphasis, #f0c674) !important;
}

/* Queued state timer text (QUEUED label uses text-primary — already fine) */
/* Shade/output badges use *-subtle classes covered by existing BS var overrides */

/* btn-outline-dark on storage process cards */
[data-theme="dark"] .process-card .btn-outline-dark,
[data-theme="dark"] .card .btn-outline-dark {
    color: var(--text-main, #dde1ea) !important;
    border-color: rgba(255,255,255,0.25) !important;
}
[data-theme="dark"] .process-card .btn-outline-dark:hover,
[data-theme="dark"] .card .btn-outline-dark:hover {
    background-color: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
}

/* --- THEME TOGGLE ICON SWAP + BUTTON STYLING --- */
/* Default (no attribute): show moon */
.theme-icon-dark { display: inline; }
.theme-icon-light { display: none; }

/* Light mode: show moon (switch to dark) */
[data-theme="light"] .theme-icon-dark { display: inline; }
[data-theme="light"] .theme-icon-light { display: none; }

/* Dark mode: show sun (switch to light) */
[data-theme="dark"] .theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-light { display: inline; }

/* Theme toggle button — transparent, no border, no underline */
#themeToggle {
  background: transparent;
  border: none;
  color: var(--text-main);
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease;
}
#themeToggle:hover {
  background: var(--chrome-divider);
}
#themeToggle i {
  text-decoration: none;
}