:root {
    /* --- THEME VARIABLES --- */
    --primary-gradient: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
    --primary-color: #4e73df;
    
    /* Light Mode Defaults (Muted for Eye Comfort) */
    --sidebar-bg: #fdfdfd;       /* Slightly off-white to reduce glare */
    --sidebar-text: #6c757d;     /* Softer grey than previous */
    --sidebar-active-bg: #edf0f7;
    --sidebar-active-text: #4e73df;
    
    --bg-body: #f4f6f9;          /* Soft, neutral dashboard grey */
    --bg-card: #ffffff;
    --text-main: #4a4a4a;        /* Softened from #333 to reduce contrast strain */
    --text-muted: #858796;
    --border-color: #eaecf4;     /* Lighter, subtler borders */
    --shadow-soft: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.08); /* Much softer shadow */
}

[data-theme="dark"] {
    /* Dark Mode Defaults */
    --primary-gradient: linear-gradient(135deg, #375a7f 0%, #2c3e50 100%);
    --primary-color: #375a7f;
    
    --sidebar-bg: #1a1c23;
    --sidebar-text: #a0a0a0;
    --sidebar-active-bg: #2c3e50;
    --sidebar-active-text: #ffffff;
    
    --bg-body: #121212;
    --bg-card: #1e1e1e;
    --text-main: #e0e0e0;
    --text-muted: #a0a0a0;
    --border-color: #333333;
    --shadow-soft: 0 4px 6px rgba(0,0,0,0.3);
}

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

/* --- SIDEBAR STRUCTURE (Flex Column Fix) --- */
#sidebar {
    min-width: 260px;
    max-width: 260px;
    height: 100vh;           /* Full Viewport Height */
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    transition: all 0.3s;
    z-index: 1000;
    
    /* FLEX LAYOUT: Pushes footer to bottom */
    display: flex;
    flex-direction: column;
    
    /* Sticky positioning */
    position: sticky;
    top: 0;
}

#sidebar.active { margin-left: -260px; }

/* 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; } /* Only hover moves it */

/* --- SIDEBAR FOOTER & LOGOUT --- */
.sidebar-footer {
    padding: 1rem;
    background: var(--sidebar-bg);
    border-top: 1px solid 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: #e74a3b;
}

.sidebar-logout-btn:hover {
    background-color: #fee2e2 !important;
    color: #e74a3b !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 { width: 100%; min-height: 100vh; display: flex; flex-direction: column; }
.full-width { width: 100% !important; }

.navbar {
    padding: 1rem 1.5rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    box-shadow: none;
}

.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-soft);
    border-radius: 0.75rem;
}

.main-content { padding: 2rem; }

/* Mobile Response */
@media (max-width: 768px) {
    #sidebar { margin-left: -260px; }
    #sidebar.active { margin-left: 0; }
}

/* --- 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; }

/* --- 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: #e74a3b !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 #e74a3b !important; /* Subtle top colored border only */
}
.delete-header {
    background-color: #fff !important;
    color: #e74a3b !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: #ff6b6b !important; /* Softer, brighter red for dark bg */
}

[data-theme="dark"] .delete-card {
    border-color: var(--border-color) !important;
    border-top-color: #e74a3b !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: 1rem 0;
    opacity: 0.15;
}

[data-theme="dark"] .sidebar-divider {
    border-color: #ffffff !important;
    opacity: 0.1;
}

[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 --- */

/* 1. Hide the Toggle Button on Desktop (> 768px) */
/* This prevents users from closing the sidebar on large screens */
@media (min-width: 1069px) {
    #sidebarCollapse {
        display: none !important;
    }
}

/* 2. Ensure Toggle Button is Visible on Mobile */
@media (max-width: 1068px) {
    #sidebarCollapse {
        display: block;
    }
}

/* --- 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;
}

/* 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;
}

/* --- 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(255, 193, 7, 0.15) !important; /* Slightly more visible tint */
    border-bottom: 1px solid rgba(255, 193, 7, 0.2) !important;
}

[data-theme="dark"] .card-header .text-warning-emphasis {
    color: #ffca2c !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 */
[data-theme="dark"] .process-timer.text-primary {
    color: #6ea8fe !important; /* Light Blue */
}
[data-theme="dark"] .process-timer.text-danger {
    color: #ff6b6b !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 #dc3545 !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;
}