/* ==========================================================================
   KANRO CODEZURA ERP - NEXT-LEVEL TECH UI THEME ENGINE
   Universal Dark Mode (Default) and Light Mode System
   ========================================================================== */

:root {
    --transition-speed: 0.25s;
}

/* --------------------------------------------------------------------------
   1. DARK MODE VARIABLES (DEFAULT)
   -------------------------------------------------------------------------- */
:root, [data-theme="dark"], html[data-theme="dark"], body[data-theme="dark"] {
    --erp-bg-canvas: #070b14;
    --erp-bg-panel: #0b101e;
    --erp-bg-card: #111a2e;
    --erp-bg-card-hover: #16223b;
    --erp-bg-card-subtle: #17233d;
    --erp-bg-input: #0e1628;
    --erp-bg-dropdown: #111a2e;
    --erp-bg-modal: #111a2e;
    --erp-bg-footer: #0b101e;
    --erp-bg-table-header: #152038;
    --erp-bg-table-hover: rgba(56, 189, 248, 0.05);
    
    --erp-border-color: rgba(255, 255, 255, 0.1);
    --erp-border-glow: rgba(56, 189, 248, 0.35);
    --erp-border-input: #233352;
    
    --erp-text-primary: #f8fafc;
    --erp-text-secondary: #cbd5e1;
    --erp-text-muted: #94a3b8;
    --erp-text-heading: #ffffff;
    
    --erp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --erp-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.6);
    --erp-shadow-glow: 0 0 20px rgba(56, 189, 248, 0.15);
    
    --erp-accent-primary: #38bdf8;
    --erp-accent-primary-hover: #0ea5e9;
    --erp-accent-neon-cyan: #00f0ff;
    --erp-accent-neon-emerald: #00ff9d;
    --erp-accent-neon-purple: #b026ff;
    --erp-accent-glow: 0 0 15px rgba(56, 189, 248, 0.35);
    
    /* Semantic Colors in Dark Mode */
    --erp-color-primary: #38bdf8;
    --erp-color-success: #34d399;
    --erp-color-warning: #fbbf24;
    --erp-color-danger: #f87171;
    --erp-color-info: #38bdf8;
    --erp-color-indigo: #a78bfa;
    --erp-color-orange: #fb923c;
}

/* --------------------------------------------------------------------------
   2. LIGHT MODE VARIABLES
   -------------------------------------------------------------------------- */
[data-theme="light"], html[data-theme="light"], body[data-theme="light"] {
    --erp-bg-canvas: #f8fafc;
    --erp-bg-panel: #ffffff;
    --erp-bg-card: #ffffff;
    --erp-bg-card-hover: #f1f5f9;
    --erp-bg-card-subtle: #f8fafc;
    --erp-bg-input: #ffffff;
    --erp-bg-dropdown: #ffffff;
    --erp-bg-modal: #ffffff;
    --erp-bg-footer: #ffffff;
    --erp-bg-table-header: #f1f5f9;
    --erp-bg-table-hover: rgba(37, 99, 235, 0.04);
    
    --erp-border-color: rgba(0, 0, 0, 0.08);
    --erp-border-glow: rgba(37, 99, 235, 0.2);
    --erp-border-input: #cbd5e1;
    
    --erp-text-primary: #0f172a;
    --erp-text-secondary: #334155;
    --erp-text-muted: #64748b;
    --erp-text-heading: #0f172a;
    
    --erp-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.04);
    --erp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --erp-shadow-glow: 0 0 15px rgba(37, 99, 235, 0.1);
    
    --erp-accent-primary: #2563eb;
    --erp-accent-primary-hover: #1d4ed8;
    --erp-accent-neon-cyan: #0284c7;
    --erp-accent-neon-emerald: #059669;
    --erp-accent-neon-purple: #7c3aed;
    --erp-accent-glow: 0 0 15px rgba(37, 99, 235, 0.25);
    
    /* Semantic Colors in Light Mode */
    --erp-color-primary: #2563eb;
    --erp-color-success: #16a34a;
    --erp-color-warning: #d97706;
    --erp-color-danger: #dc2626;
    --erp-color-info: #0284c7;
    --erp-color-indigo: #6366f1;
    --erp-color-orange: #ea580c;
}

/* --------------------------------------------------------------------------
   3. GLOBAL LAYOUT & CORE ELEMENTS
   -------------------------------------------------------------------------- */
html, body, .container-scroller, .page-body-wrapper {
    background-color: var(--erp-bg-canvas) !important;
    color: var(--erp-text-primary) !important;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.main-panel, .content-wrapper {
    background-color: var(--erp-bg-canvas) !important;
    color: var(--erp-text-primary) !important;
}

/* Default Headings */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--erp-text-heading);
}

/* Universal Text Classes for High-Contrast Mode Switching */
.text-dark, .text-black {
    color: var(--erp-text-primary) !important;
}

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

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

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

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

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

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

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

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

.text-white {
    color: #ffffff !important;
}

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

/* --------------------------------------------------------------------------
   4. COMPREHENSIVE ALERT THEME SYSTEM (Dark & Light)
   -------------------------------------------------------------------------- */
.alert {
    border-radius: 14px;
    font-weight: 500;
    transition: all var(--transition-speed) ease;
}

/* Dark Mode Alerts */
:root, [data-theme="dark"], html[data-theme="dark"], body[data-theme="dark"] {
    /* Alert Warning */
    .alert-warning {
        background-color: rgba(245, 158, 11, 0.12) !important;
        border: 1px solid rgba(245, 158, 11, 0.35) !important;
        color: #fde68a !important;
    }
    .alert-warning .alert-heading,
    .alert-warning h1, .alert-warning h2, .alert-warning h3, 
    .alert-warning h4, .alert-warning h5, .alert-warning h6 {
        color: #fef08a !important;
    }
    .alert-warning p, .alert-warning span, .alert-warning div,
    .alert-warning small, .alert-warning strong, .alert-warning li,
    .alert-warning .text-dark {
        color: #fde68a !important;
    }
    .alert-warning i, .alert-warning .mdi {
        color: #fbbf24 !important;
    }

    /* Alert Danger */
    .alert-danger {
        background-color: rgba(239, 68, 68, 0.12) !important;
        border: 1px solid rgba(239, 68, 68, 0.35) !important;
        color: #fca5a5 !important;
    }
    .alert-danger .alert-heading,
    .alert-danger h1, .alert-danger h2, .alert-danger h3, 
    .alert-danger h4, .alert-danger h5, .alert-danger h6 {
        color: #fee2e2 !important;
    }
    .alert-danger p, .alert-danger span, .alert-danger div,
    .alert-danger small, .alert-danger strong, .alert-danger li,
    .alert-danger .text-dark {
        color: #fca5a5 !important;
    }
    .alert-danger i, .alert-danger .mdi {
        color: #f87171 !important;
    }

    /* Alert Success */
    .alert-success {
        background-color: rgba(16, 185, 129, 0.12) !important;
        border: 1px solid rgba(16, 185, 129, 0.35) !important;
        color: #86efac !important;
    }
    .alert-success .alert-heading,
    .alert-success h1, .alert-success h2, .alert-success h3, 
    .alert-success h4, .alert-success h5, .alert-success h6 {
        color: #d1fae5 !important;
    }
    .alert-success p, .alert-success span, .alert-success div,
    .alert-success small, .alert-success strong, .alert-success li,
    .alert-success .text-dark {
        color: #86efac !important;
    }
    .alert-success i, .alert-success .mdi {
        color: #34d399 !important;
    }

    /* Alert Info */
    .alert-info, .alert-soft-primary {
        background-color: rgba(14, 165, 233, 0.12) !important;
        border: 1px solid rgba(14, 165, 233, 0.35) !important;
        color: #7dd3fc !important;
    }
    .alert-info .alert-heading,
    .alert-info h1, .alert-info h2, .alert-info h3, 
    .alert-info h4, .alert-info h5, .alert-info h6 {
        color: #e0f2fe !important;
    }
    .alert-info p, .alert-info span, .alert-info div,
    .alert-info small, .alert-info strong, .alert-info li,
    .alert-info .text-dark {
        color: #7dd3fc !important;
    }
    .alert-info i, .alert-info .mdi {
        color: #38bdf8 !important;
    }

    /* Alert Primary */
    .alert-primary {
        background-color: rgba(59, 130, 246, 0.12) !important;
        border: 1px solid rgba(59, 130, 246, 0.35) !important;
        color: #93c5fd !important;
    }
    .alert-primary .alert-heading,
    .alert-primary h1, .alert-primary h2, .alert-primary h3, 
    .alert-primary h4, .alert-primary h5, .alert-primary h6 {
        color: #dbeafe !important;
    }
    .alert-primary p, .alert-primary span, .alert-primary div,
    .alert-primary small, .alert-primary strong, .alert-primary li,
    .alert-primary .text-dark {
        color: #93c5fd !important;
    }
    .alert-primary i, .alert-primary .mdi {
        color: #60a5fa !important;
    }

    /* Alert Secondary & Light */
    .alert-secondary, .alert-light {
        background-color: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: #cbd5e1 !important;
    }
    .alert-secondary .alert-heading, .alert-light .alert-heading,
    .alert-secondary h1, .alert-light h1,
    .alert-secondary h2, .alert-light h2,
    .alert-secondary h3, .alert-light h3,
    .alert-secondary h4, .alert-light h4,
    .alert-secondary h5, .alert-light h5,
    .alert-secondary h6, .alert-light h6 {
        color: #f8fafc !important;
    }
    .alert-secondary p, .alert-light p,
    .alert-secondary span, .alert-light span,
    .alert-secondary div, .alert-light div,
    .alert-secondary .text-dark, .alert-light .text-dark {
        color: #cbd5e1 !important;
    }

    /* Alert Dark */
    .alert-dark {
        background-color: rgba(0, 0, 0, 0.4) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: #f8fafc !important;
    }
}

/* Light Mode Alerts */
[data-theme="light"], html[data-theme="light"], body[data-theme="light"] {
    .alert-warning {
        background-color: #fef3c7 !important;
        border: 1px solid #fde68a !important;
        color: #92400e !important;
    }
    .alert-warning .alert-heading,
    .alert-warning h1, .alert-warning h2, .alert-warning h3, 
    .alert-warning h4, .alert-warning h5, .alert-warning h6 {
        color: #78350f !important;
    }
    .alert-warning p, .alert-warning span, .alert-warning div,
    .alert-warning small, .alert-warning strong, .alert-warning li,
    .alert-warning .text-dark {
        color: #92400e !important;
    }
    .alert-warning i, .alert-warning .mdi {
        color: #b45309 !important;
    }

    .alert-danger {
        background-color: #fee2e2 !important;
        border: 1px solid #fca5a5 !important;
        color: #991b1b !important;
    }
    .alert-danger .alert-heading,
    .alert-danger h1, .alert-danger h2, .alert-danger h3, 
    .alert-danger h4, .alert-danger h5, .alert-danger h6 {
        color: #7f1d1d !important;
    }
    .alert-danger p, .alert-danger span, .alert-danger div,
    .alert-danger small, .alert-danger strong, .alert-danger li,
    .alert-danger .text-dark {
        color: #991b1b !important;
    }
    .alert-danger i, .alert-danger .mdi {
        color: #dc2626 !important;
    }

    .alert-success {
        background-color: #d1fae5 !important;
        border: 1px solid #a7f3d0 !important;
        color: #065f46 !important;
    }
    .alert-success .alert-heading,
    .alert-success h1, .alert-success h2, .alert-success h3, 
    .alert-success h4, .alert-success h5, .alert-success h6 {
        color: #064e3b !important;
    }
    .alert-success p, .alert-success span, .alert-success div,
    .alert-success small, .alert-success strong, .alert-success li,
    .alert-success .text-dark {
        color: #065f46 !important;
    }
    .alert-success i, .alert-success .mdi {
        color: #059669 !important;
    }

    .alert-info, .alert-soft-primary {
        background-color: #e0f2fe !important;
        border: 1px solid #bae6fd !important;
        color: #075985 !important;
    }
    .alert-info .alert-heading,
    .alert-info h1, .alert-info h2, .alert-info h3, 
    .alert-info h4, .alert-info h5, .alert-info h6 {
        color: #0c4a6e !important;
    }
    .alert-info p, .alert-info span, .alert-info div,
    .alert-info small, .alert-info strong, .alert-info li,
    .alert-info .text-dark {
        color: #075985 !important;
    }
    .alert-info i, .alert-info .mdi {
        color: #0284c7 !important;
    }

    .alert-primary {
        background-color: #dbeafe !important;
        border: 1px solid #bfdbfe !important;
        color: #1e40af !important;
    }
    .alert-primary .alert-heading,
    .alert-primary h1, .alert-primary h2, .alert-primary h3, 
    .alert-primary h4, .alert-primary h5, .alert-primary h6 {
        color: #1e3a8a !important;
    }
    .alert-primary p, .alert-primary span, .alert-primary div,
    .alert-primary small, .alert-primary strong, .alert-primary li,
    .alert-primary .text-dark {
        color: #1e40af !important;
    }
    .alert-primary i, .alert-primary .mdi {
        color: #2563eb !important;
    }

    .alert-secondary, .alert-light {
        background-color: #f1f5f9 !important;
        border: 1px solid #e2e8f0 !important;
        color: #334155 !important;
    }
    .alert-secondary .alert-heading, .alert-light .alert-heading,
    .alert-secondary h1, .alert-light h1,
    .alert-secondary h2, .alert-light h2,
    .alert-secondary h3, .alert-light h3,
    .alert-secondary h4, .alert-light h4,
    .alert-secondary h5, .alert-light h5,
    .alert-secondary h6, .alert-light h6 {
        color: #0f172a !important;
    }
    .alert-secondary p, .alert-light p,
    .alert-secondary span, .alert-light span,
    .alert-secondary div, .alert-light div,
    .alert-secondary .text-dark, .alert-light .text-dark {
        color: #334155 !important;
    }

    .alert-dark {
        background-color: #1e293b !important;
        border: 1px solid #0f172a !important;
        color: #ffffff !important;
    }
}

/* --------------------------------------------------------------------------
   5. SUBTLE BACKGROUND CONTAINERS (.bg-*-subtle)
   -------------------------------------------------------------------------- */
/* Dark Mode Subtle Boxes */
:root, [data-theme="dark"], html[data-theme="dark"], body[data-theme="dark"] {
    .bg-primary-subtle {
        background-color: rgba(56, 189, 248, 0.12) !important;
        color: #38bdf8 !important;
        border-color: rgba(56, 189, 248, 0.25) !important;
    }
    .bg-success-subtle {
        background-color: rgba(16, 185, 129, 0.12) !important;
        color: #34d399 !important;
        border-color: rgba(16, 185, 129, 0.25) !important;
    }
    .bg-success-subtle h1, .bg-success-subtle h2, .bg-success-subtle h3,
    .bg-success-subtle h4, .bg-success-subtle h5, .bg-success-subtle h6,
    .bg-success-subtle .text-dark, .bg-success-subtle p,
    .bg-success-subtle ul, .bg-success-subtle li {
        color: #d1fae5 !important;
    }

    .bg-warning-subtle {
        background-color: rgba(245, 158, 11, 0.12) !important;
        color: #fbbf24 !important;
        border-color: rgba(245, 158, 11, 0.25) !important;
    }
    .bg-warning-subtle h1, .bg-warning-subtle h2, .bg-warning-subtle h3,
    .bg-warning-subtle h4, .bg-warning-subtle h5, .bg-warning-subtle h6,
    .bg-warning-subtle .text-dark, .bg-warning-subtle p,
    .bg-warning-subtle ul, .bg-warning-subtle li {
        color: #fde68a !important;
    }

    .bg-info-subtle {
        background-color: rgba(14, 165, 233, 0.12) !important;
        color: #38bdf8 !important;
        border-color: rgba(14, 165, 233, 0.25) !important;
    }
    .bg-danger-subtle {
        background-color: rgba(239, 68, 68, 0.12) !important;
        color: #f87171 !important;
        border-color: rgba(239, 68, 68, 0.25) !important;
    }
    .bg-indigo-subtle {
        background-color: rgba(167, 139, 250, 0.12) !important;
        color: #c4b5fd !important;
        border-color: rgba(167, 139, 250, 0.25) !important;
    }
    .bg-secondary-subtle, .bg-light, .bg-light-subtle {
        background-color: var(--erp-bg-card-subtle) !important;
        color: var(--erp-text-primary) !important;
    }
}

/* Light Mode Subtle Boxes */
[data-theme="light"], html[data-theme="light"], body[data-theme="light"] {
    .bg-primary-subtle {
        background-color: #dbeafe !important;
        color: #1e40af !important;
        border-color: #bfdbfe !important;
    }
    .bg-success-subtle {
        background-color: #d1fae5 !important;
        color: #065f46 !important;
        border-color: #a7f3d0 !important;
    }
    .bg-success-subtle h1, .bg-success-subtle h2, .bg-success-subtle h3,
    .bg-success-subtle h4, .bg-success-subtle h5, .bg-success-subtle h6,
    .bg-success-subtle .text-dark, .bg-success-subtle p,
    .bg-success-subtle ul, .bg-success-subtle li {
        color: #064e3b !important;
    }

    .bg-warning-subtle {
        background-color: #fef3c7 !important;
        color: #92400e !important;
        border-color: #fde68a !important;
    }
    .bg-warning-subtle h1, .bg-warning-subtle h2, .bg-warning-subtle h3,
    .bg-warning-subtle h4, .bg-warning-subtle h5, .bg-warning-subtle h6,
    .bg-warning-subtle .text-dark, .bg-warning-subtle p,
    .bg-warning-subtle ul, .bg-warning-subtle li {
        color: #78350f !important;
    }

    .bg-info-subtle {
        background-color: #e0f2fe !important;
        color: #075985 !important;
        border-color: #bae6fd !important;
    }
    .bg-danger-subtle {
        background-color: #fee2e2 !important;
        color: #991b1b !important;
        border-color: #fca5a5 !important;
    }
    .bg-indigo-subtle {
        background-color: #ede9fe !important;
        color: #5b21b6 !important;
        border-color: #ddd6fe !important;
    }
    .bg-secondary-subtle, .bg-light, .bg-light-subtle {
        background-color: #f8fafc !important;
        color: #0f172a !important;
    }
}

/* --------------------------------------------------------------------------
   6. HEADER & NAVBAR COMPLETE OVERRIDES
   -------------------------------------------------------------------------- */
.navbar, 
.navbar.default-layout, 
.navbar.default-layout .navbar-brand-wrapper, 
.navbar.default-layout .navbar-menu-wrapper {
    background: var(--erp-bg-panel) !important;
    color: var(--erp-text-primary) !important;
    border-bottom: 1px solid var(--erp-border-color) !important;
    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

.navbar .navbar-brand-wrapper {
    border-right: 1px solid var(--erp-border-color) !important;
}

/* Brand Titles */
.erp-brand-title {
    font-family: 'Outfit', 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.4px;
    background: linear-gradient(135deg, #00f0ff 0%, #38bdf8 40%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 25px rgba(0, 240, 255, 0.35);
    display: block;
    line-height: 1.1;
}

[data-theme="light"] .erp-brand-title {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

.erp-brand-subtitle {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--erp-accent-neon-cyan) !important;
    text-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
    display: block;
    margin-top: 1px;
}

[data-theme="light"] .erp-brand-subtitle {
    color: #4f46e5 !important;
    text-shadow: none;
}

.erp-brand-mini-badge {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #00f0ff 0%, #4f46e5 100%);
    color: #ffffff;
    font-weight: 900;
    font-size: 17px;
    border-radius: 12px;
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.4);
}

/* Navbar Welcome Text */
.navbar .welcome-text,
.navbar .welcome-text h1,
.navbar .navbar-menu-wrapper .welcome-text {
    color: var(--erp-text-secondary) !important;
}

.navbar .welcome-text span,
.navbar .welcome-text .text-black,
.navbar .welcome-text .text-primary {
    color: var(--erp-accent-primary) !important;
    font-weight: 800 !important;
    text-shadow: 0 0 15px rgba(56, 189, 248, 0.3);
}

.navbar .welcome-sub-text {
    color: var(--erp-text-muted) !important;
}

/* Navbar Toggle & Hamburger */
.navbar .navbar-toggler,
.navbar .navbar-menu-wrapper .navbar-toggler,
.navbar .navbar-toggler-right {
    color: var(--erp-text-primary) !important;
}

.navbar .navbar-toggler .icon-menu,
.navbar .navbar-toggler .mdi,
.navbar .navbar-toggler span {
    color: var(--erp-text-primary) !important;
}

/* Navbar Search */
.navbar .search-form,
.navbar .search-form input {
    background: var(--erp-bg-input) !important;
    border: 1px solid var(--erp-border-input) !important;
    color: var(--erp-text-primary) !important;
    border-radius: 20px !important;
}

.navbar .search-form i,
.navbar .search-form .icon-search {
    color: var(--erp-text-muted) !important;
}

/* Navbar Notification Bell & Icons */
.navbar .count-indicator i,
.navbar .count-indicator .icon-bell {
    color: var(--erp-text-primary) !important;
}

/* Live Resort Clock HUD Pill */
.live-resort-clock-pill {
    display: inline-flex;
    align-items: center;
    background: var(--erp-bg-card-subtle);
    border: 1px solid var(--erp-border-color);
    border-radius: 30px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    gap: 8px;
    color: var(--erp-text-primary);
}

.clock-live-indicator .live-pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #00ff9d;
    box-shadow: 0 0 8px #00ff9d;
    animation: pulseGlow 1.8s infinite ease-in-out;
}

@keyframes pulseGlow {
    0%, 100% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; }
}

.clock-divider {
    width: 1px;
    height: 14px;
    background: var(--erp-border-color);
}

/* --------------------------------------------------------------------------
   7. SIDEBAR COMPLETE OVERRIDES & NEON ACCENTS
   -------------------------------------------------------------------------- */
.sidebar, 
.sidebar-offcanvas {
    background: var(--erp-bg-panel) !important;
    border-right: 1px solid var(--erp-border-color) !important;
    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

.sidebar .nav .nav-item .nav-link {
    color: var(--erp-text-secondary) !important;
    border-radius: 12px;
    margin: 3px 10px;
    padding: 11px 16px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.sidebar .nav .nav-item .nav-link .menu-title {
    color: var(--erp-text-secondary) !important;
    font-weight: 600;
    transition: color 0.2s ease;
}

.sidebar .nav .nav-item .nav-link i.menu-icon {
    color: var(--erp-text-muted) !important;
    font-size: 19px;
    margin-right: 12px;
    transition: color 0.2s ease;
}

.sidebar .nav .nav-item:hover .nav-link {
    background: var(--erp-bg-card-hover) !important;
    color: var(--erp-accent-primary) !important;
    transform: translateX(4px);
}

.sidebar .nav .nav-item:hover .nav-link .menu-title,
.sidebar .nav .nav-item:hover .nav-link i.menu-icon {
    color: var(--erp-accent-neon-cyan) !important;
}

/* High-contrast Active Item with Neon Border & Glow */
.sidebar .nav .nav-item.active .nav-link {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.18) 0%, rgba(56, 189, 248, 0.25) 100%) !important;
    color: #ffffff !important;
    font-weight: 700;
    border: 1px solid rgba(0, 240, 255, 0.4) !important;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
}

.sidebar .nav .nav-item.active .nav-link .menu-title {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px;
}

[data-theme="light"] .sidebar .nav .nav-item.active .nav-link {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
}

[data-theme="light"] .sidebar .nav .nav-item.active .nav-link .menu-title,
[data-theme="light"] .sidebar .nav .nav-item.active .nav-link i.menu-icon {
    color: #ffffff !important;
}

.sidebar .nav .nav-item.active .nav-link i.menu-icon {
    color: #00f0ff !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}

[data-theme="light"] .sidebar .nav .nav-item.active .nav-link i.menu-icon {
    color: #ffffff !important;
}

.sidebar .nav .nav-item.nav-category {
    color: var(--erp-text-muted) !important;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 14px;
    margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   8. FOOTER COMPLETE OVERRIDES
   -------------------------------------------------------------------------- */
.footer, 
footer.footer {
    background: var(--erp-bg-footer) !important;
    border-top: 1px solid var(--erp-border-color) !important;
    color: var(--erp-text-muted) !important;
    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
    padding: 20px 24px;
}

.footer span,
.footer p {
    color: var(--erp-text-muted) !important;
}

.footer a {
    color: var(--erp-accent-primary) !important;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.2s ease;
}

.footer a:hover {
    color: var(--erp-accent-neon-cyan) !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

/* --------------------------------------------------------------------------
   9. CARDS & CONTAINERS
   -------------------------------------------------------------------------- */
.card, .bg-white {
    background-color: var(--erp-bg-card) !important;
    border: 1px solid var(--erp-border-color) !important;
    box-shadow: var(--erp-shadow-sm) !important;
    color: var(--erp-text-primary) !important;
    transition: all 0.2s ease;
}

.card-header {
    background-color: var(--erp-bg-card) !important;
    border-bottom: 1px solid var(--erp-border-color) !important;
    color: var(--erp-text-heading) !important;
}

.card-footer {
    background-color: var(--erp-bg-card) !important;
    border-top: 1px solid var(--erp-border-color) !important;
}

/* List Groups */
.list-group {
    background-color: var(--erp-bg-card) !important;
}

.list-group-item {
    background-color: var(--erp-bg-card) !important;
    border-color: var(--erp-border-color) !important;
    color: var(--erp-text-primary) !important;
    transition: all 0.2s ease;
}

.list-group-item:hover {
    background-color: var(--erp-bg-card-hover) !important;
}

.list-group-item.task-completed {
    background-color: rgba(52, 211, 153, 0.08) !important;
    border-left: 3px solid var(--erp-color-success) !important;
}

[data-theme="light"] .list-group-item.task-completed {
    background-color: rgba(22, 163, 74, 0.07) !important;
    border-left: 3px solid var(--erp-color-success) !important;
}

/* Theme Adaptive Button Overrides */
[data-theme="dark"] .btn-outline-dark,
body[data-theme="dark"] .btn-outline-dark {
    color: var(--erp-text-secondary) !important;
    border-color: var(--erp-border-color) !important;
}
[data-theme="dark"] .btn-outline-dark:hover,
body[data-theme="dark"] .btn-outline-dark:hover {
    background-color: var(--erp-bg-card-hover) !important;
    color: var(--erp-accent-primary) !important;
    border-color: var(--erp-accent-primary) !important;
}

[data-theme="dark"] .btn-light,
body[data-theme="dark"] .btn-light {
    background-color: var(--erp-bg-card-subtle) !important;
    color: var(--erp-text-primary) !important;
    border: 1px solid var(--erp-border-color) !important;
}
[data-theme="dark"] .btn-light:hover,
body[data-theme="dark"] .btn-light:hover {
    background-color: var(--erp-bg-card-hover) !important;
    color: var(--erp-accent-primary) !important;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--erp-shadow-md), var(--erp-shadow-glow) !important;
    border-color: var(--erp-border-glow) !important;
}

/* --------------------------------------------------------------------------
   10. FORM CONTROLS, INPUTS, SELECTS & CHECKBOXES
   -------------------------------------------------------------------------- */
.form-control, .form-select, .form-check-input, textarea,
input[type="text"], input[type="password"], input[type="email"], 
input[type="number"], input[type="date"], input[type="time"], input[type="search"] {
    background-color: var(--erp-bg-input) !important;
    border: 1px solid var(--erp-border-input) !important;
    color: var(--erp-text-primary) !important;
    transition: all 0.2s ease;
}

.form-control:focus, .form-select:focus, textarea:focus, input:focus {
    border-color: var(--erp-accent-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(56, 189, 248, 0.25) !important;
    color: var(--erp-text-primary) !important;
}

.form-control::placeholder, textarea::placeholder, input::placeholder {
    color: var(--erp-text-muted) !important;
    opacity: 0.7;
}

.input-group-text {
    background-color: var(--erp-bg-card-subtle) !important;
    border-color: var(--erp-border-input) !important;
    color: var(--erp-text-muted) !important;
}

.form-label {
    color: var(--erp-text-muted) !important;
    font-weight: 600;
}

.form-check-label {
    color: var(--erp-text-primary) !important;
}

.form-check-input:checked {
    background-color: var(--erp-accent-primary) !important;
    border-color: var(--erp-accent-primary) !important;
}

/* Custom Dish Checks & Options */
.custom-dish-check {
    background-color: var(--erp-bg-card) !important;
    border: 1px solid var(--erp-border-color) !important;
    color: var(--erp-text-primary) !important;
    transition: all 0.2s ease;
}

.custom-dish-check:hover {
    border-color: var(--erp-accent-primary) !important;
    background-color: var(--erp-bg-card-hover) !important;
}

/* Select options */
select option {
    background-color: var(--erp-bg-input) !important;
    color: var(--erp-text-primary) !important;
}

/* Time and Date input calendar icon */
:root, [data-theme="dark"], html[data-theme="dark"], body[data-theme="dark"] {
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator {
        filter: invert(1) brightness(130%) !important;
        cursor: pointer;
    }
}

[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: none !important;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   11. TABLES
   -------------------------------------------------------------------------- */
.table {
    color: var(--erp-text-primary) !important;
    border-color: var(--erp-border-color) !important;
}

.table th, .table td {
    border-color: var(--erp-border-color) !important;
    background-color: transparent !important;
    color: var(--erp-text-primary) !important;
    white-space: normal !important;
    line-height: 1.45 !important;
    vertical-align: middle;
}

.table thead th, .table-light, .table-light th {
    background-color: var(--erp-bg-table-header) !important;
    color: var(--erp-text-muted) !important;
    border-bottom: 1px solid var(--erp-border-color) !important;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.table-hover tbody tr:hover td {
    background-color: var(--erp-bg-table-hover) !important;
}

/* --------------------------------------------------------------------------
   12. DROPDOWNS & MODALS
   -------------------------------------------------------------------------- */
.dropdown-menu {
    background-color: var(--erp-bg-dropdown) !important;
    border: 1px solid var(--erp-border-color) !important;
    box-shadow: var(--erp-shadow-md) !important;
    color: var(--erp-text-primary) !important;
}

.dropdown-item {
    color: var(--erp-text-secondary) !important;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--erp-bg-card-hover) !important;
    color: var(--erp-accent-primary) !important;
}

.modal-content {
    background-color: var(--erp-bg-modal) !important;
    border: 1px solid var(--erp-border-color) !important;
    box-shadow: var(--erp-shadow-md), var(--erp-shadow-glow) !important;
    color: var(--erp-text-primary) !important;
}

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

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="light"] .btn-close {
    filter: none;
}

/* --------------------------------------------------------------------------
   13. THEME SWITCHER TOGGLE COMPONENT
   -------------------------------------------------------------------------- */
.theme-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--erp-bg-card-subtle) !important;
    border: 1px solid var(--erp-border-color) !important;
    border-radius: 30px;
    padding: 6px 14px;
    color: var(--erp-text-primary) !important;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.theme-switch-btn:hover {
    border-color: var(--erp-accent-primary) !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.3) !important;
}

.theme-switch-btn .icon-sun {
    color: #fbbf24;
    display: none;
}

.theme-switch-btn .icon-moon {
    color: #38bdf8;
    display: inline-block;
}

[data-theme="light"] .theme-switch-btn .icon-sun {
    display: inline-block;
}

[data-theme="light"] .theme-switch-btn .icon-moon {
    display: none;
}

/* --------------------------------------------------------------------------
   14. BUTTONS & PILLS HIGH-CONTRAST THEME ADAPTATION
   -------------------------------------------------------------------------- */
:root, [data-theme="dark"], html[data-theme="dark"], body[data-theme="dark"] {
    .btn-white {
        background-color: #17233d !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
        color: #f8fafc !important;
    }
    .btn-white:hover {
        background-color: #233352 !important;
        border-color: rgba(56, 189, 248, 0.4) !important;
        color: #ffffff !important;
    }
    .btn-light, .btn-light.border {
        background-color: #1e293b !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
        color: #f1f5f9 !important;
    }
    .btn-light:hover, .btn-light.border:hover {
        background-color: #334155 !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
        color: #ffffff !important;
    }
    .btn-outline-dark {
        color: #e2e8f0 !important;
        border-color: rgba(255, 255, 255, 0.25) !important;
        background-color: transparent !important;
    }
    .btn-outline-dark:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
        border-color: #ffffff !important;
    }
    .btn-outline-secondary {
        color: #94a3b8 !important;
        border-color: rgba(255, 255, 255, 0.18) !important;
    }
    .btn-outline-secondary:hover {
        background-color: rgba(255, 255, 255, 0.08) !important;
        color: #f8fafc !important;
    }
}

[data-theme="light"] .btn-white {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme="light"] .btn-white:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

[data-theme="light"] .btn-light {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* Category Filter & Quick Tag Pills */
.cat-pill-btn, .quick-tag-btn {
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #f1f5f9 !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.cat-pill-btn .badge {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.cat-pill-btn:hover, .quick-tag-btn:hover {
    background: #334155 !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    color: #38bdf8 !important;
}

.cat-pill-btn.active {
    background: #0284c7 !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.35) !important;
}

.cat-pill-btn.active .badge {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

[data-theme="light"] .cat-pill-btn, [data-theme="light"] .quick-tag-btn {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
}

[data-theme="light"] .cat-pill-btn .badge {
    background: #e2e8f0 !important;
    color: #475569 !important;
}

[data-theme="light"] .cat-pill-btn:hover, [data-theme="light"] .quick-tag-btn:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme="light"] .cat-pill-btn.active {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   15. ATTENDANCE & GLOBAL BADGES HIGH-CONTRAST SYSTEM
   -------------------------------------------------------------------------- */
/* Dark Mode Badges */
:root, [data-theme="dark"], html[data-theme="dark"], body[data-theme="dark"] {
    .badge-opacity-success, .badge.badge-success, .badge.bg-success, .badge.bg-success-subtle {
        background-color: rgba(16, 185, 129, 0.2) !important;
        color: #34d399 !important;
        border: 1px solid rgba(16, 185, 129, 0.35) !important;
        font-weight: 700 !important;
    }
    .badge-opacity-danger, .badge.badge-danger, .badge.bg-danger, .badge.bg-danger-subtle {
        background-color: rgba(239, 68, 68, 0.2) !important;
        color: #f87171 !important;
        border: 1px solid rgba(239, 68, 68, 0.35) !important;
        font-weight: 700 !important;
    }
    .badge-opacity-warning, .badge.badge-warning, .badge.bg-warning, .badge.bg-warning-subtle {
        background-color: rgba(245, 158, 11, 0.2) !important;
        color: #fbbf24 !important;
        border: 1px solid rgba(245, 158, 11, 0.35) !important;
        font-weight: 700 !important;
    }
    .badge-opacity-info, .badge.badge-info, .badge.bg-info, .badge.bg-info-subtle {
        background-color: rgba(14, 165, 233, 0.2) !important;
        color: #38bdf8 !important;
        border: 1px solid rgba(14, 165, 233, 0.35) !important;
        font-weight: 700 !important;
    }
    .badge-opacity-primary, .badge.badge-primary, .badge.bg-primary, .badge.bg-primary-subtle {
        background-color: rgba(59, 130, 246, 0.2) !important;
        color: #60a5fa !important;
        border: 1px solid rgba(59, 130, 246, 0.35) !important;
        font-weight: 700 !important;
    }
    .badge.bg-light, .badge.bg-secondary-subtle {
        background-color: rgba(255, 255, 255, 0.12) !important;
        color: #f1f5f9 !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        font-weight: 600 !important;
    }
    .badge.bg-white {
        background-color: #17233d !important;
        color: #f8fafc !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }
}

/* Light Mode Badges */
[data-theme="light"] .badge-opacity-success, 
[data-theme="light"] .badge.badge-success,
[data-theme="light"] .badge.bg-success,
[data-theme="light"] .badge.bg-success-subtle {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
    font-weight: 700 !important;
}
[data-theme="light"] .badge-opacity-danger, 
[data-theme="light"] .badge.badge-danger,
[data-theme="light"] .badge.bg-danger,
[data-theme="light"] .badge.bg-danger-subtle {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fca5a5 !important;
    font-weight: 700 !important;
}
[data-theme="light"] .badge-opacity-warning, 
[data-theme="light"] .badge.badge-warning,
[data-theme="light"] .badge.bg-warning,
[data-theme="light"] .badge.bg-warning-subtle {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
    font-weight: 700 !important;
}
[data-theme="light"] .badge-opacity-info, 
[data-theme="light"] .badge.badge-info,
[data-theme="light"] .badge.bg-info,
[data-theme="light"] .badge.bg-info-subtle {
    background-color: #e0f2fe !important;
    color: #075985 !important;
    border: 1px solid #bae6fd !important;
    font-weight: 700 !important;
}
[data-theme="light"] .badge-opacity-primary, 
[data-theme="light"] .badge.badge-primary,
[data-theme="light"] .badge.bg-primary,
[data-theme="light"] .badge.bg-primary-subtle {
    background-color: #dbeafe !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
    font-weight: 700 !important;
}
[data-theme="light"] .badge.bg-white {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

/* --------------------------------------------------------------------------
   16. BREADCRUMBS
   -------------------------------------------------------------------------- */
.breadcrumb {
    background: transparent !important;
}
.breadcrumb-item a {
    color: var(--erp-accent-primary) !important;
    text-decoration: none;
}
.breadcrumb-item.active {
    color: var(--erp-text-muted) !important;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--erp-text-muted) !important;
}

/* --------------------------------------------------------------------------
   17. BOOTSTRAP DATEPICKER COMPLETE THEME & CALENDAR OVERRIDES
   -------------------------------------------------------------------------- */
.datepicker,
.datepicker-dropdown {
    background-color: var(--erp-bg-card) !important;
    border: 1px solid var(--erp-border-glow) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75), 0 0 25px rgba(56, 189, 248, 0.25) !important;
    color: var(--erp-text-primary) !important;
    padding: 16px 18px !important;
    border-radius: 18px !important;
    z-index: 99999 !important;
    margin-top: 16px !important;
    min-width: 280px !important;
}

.datepicker.datepicker-dropdown::before,
.datepicker.datepicker-dropdown::after {
    display: none !important;
}

[data-theme="light"] .datepicker,
[data-theme="light"] .datepicker-dropdown {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
}

.datepicker table {
    width: 100% !important;
    background-color: transparent !important;
}

.datepicker table thead tr:first-child th {
    padding-top: 6px !important;
    padding-bottom: 12px !important;
    vertical-align: middle !important;
}

.datepicker table tr th {
    color: var(--erp-text-muted) !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    padding: 6px 4px !important;
    border: none !important;
    background-color: transparent !important;
    text-align: center !important;
}

.datepicker table tr th.datepicker-switch {
    color: var(--erp-accent-neon-cyan) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
}

[data-theme="light"] .datepicker table tr th.datepicker-switch {
    color: #2563eb !important;
}

.datepicker table tr th.prev,
.datepicker table tr th.next {
    color: var(--erp-accent-primary) !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    padding: 6px 10px !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
}

.datepicker table tr th.datepicker-switch:hover,
.datepicker table tr th.prev:hover,
.datepicker table tr th.next:hover {
    background: var(--erp-bg-card-hover) !important;
    color: #ffffff !important;
}

.datepicker table tr td {
    color: var(--erp-text-primary) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 8px !important;
    border: none !important;
    background-color: transparent !important;
    transition: all 0.15s ease !important;
}

.datepicker table tr td.day:hover {
    background: var(--erp-bg-card-hover) !important;
    color: var(--erp-accent-neon-cyan) !important;
    cursor: pointer;
}

.datepicker table tr td.day.old,
.datepicker table tr td.day.new {
    color: var(--erp-text-muted) !important;
    opacity: 0.35 !important;
}

.datepicker table tr td.day.active,
.datepicker table tr td.day.active:hover {
    background: linear-gradient(135deg, #00f0ff 0%, #3b82f6 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.6) !important;
}

[data-theme="light"] .datepicker table tr td.day.active,
[data-theme="light"] .datepicker table tr td.day.active:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
}

.datepicker table tr td.day.today {
    border: 1px solid var(--erp-accent-neon-cyan) !important;
    color: var(--erp-accent-neon-cyan) !important;
    font-weight: 800 !important;
}

.datepicker span.month,
.datepicker span.year {
    border-radius: 8px !important;
    color: var(--erp-text-primary) !important;
    padding: 6px !important;
}

.datepicker span.month:hover,
.datepicker span.year:hover {
    background: var(--erp-bg-card-hover) !important;
    color: var(--erp-accent-neon-cyan) !important;
}

.datepicker span.month.active,
.datepicker span.year.active {
    background: linear-gradient(135deg, #00f0ff 0%, #3b82f6 100%) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   18. NOTIFICATION TOAST POPUP (Dark & Light Theme)
   -------------------------------------------------------------------------- */
.notification-popup-toast {
    background: var(--erp-bg-card) !important;
    border: 1px solid var(--erp-border-color) !important;
    box-shadow: var(--erp-shadow-md), var(--erp-shadow-glow) !important;
    color: var(--erp-text-primary) !important;
}

.notification-popup-toast h6 {
    color: var(--erp-text-heading) !important;
}

.notification-popup-toast p, .notification-popup-toast small {
    color: var(--erp-text-muted) !important;
}

/* --------------------------------------------------------------------------
   19. CONFIRMATION & SELECTION MODAL CARDS
   -------------------------------------------------------------------------- */
.studio-confirm-card {
    background: var(--erp-bg-card) !important;
    border-color: var(--erp-border-color) !important;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.studio-confirm-card:hover {
    transform: translateY(-2px);
    border-color: var(--erp-accent-neon-cyan) !important;
    box-shadow: var(--erp-shadow-glow) !important;
}

.studio-confirm-card.border-primary {
    border-color: #0284c7 !important;
    background: rgba(2, 132, 199, 0.08) !important;
    box-shadow: 0 0 14px rgba(2, 132, 199, 0.25) !important;
}

body.dark-theme .studio-confirm-card.border-primary {
    border-color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.12) !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.3) !important;
}

.studio-confirm-card h6 {
    color: var(--erp-text-heading) !important;
}

.studio-confirm-card small,
.studio-confirm-card p {
    color: var(--erp-text-muted) !important;
}

/* --------------------------------------------------------------------------
   20. INVENTORY MODULE & STARADMIN CORE THEMING (Dark & Light Mode)
   -------------------------------------------------------------------------- */
.home-tab .nav-tabs {
    border-bottom-color: var(--erp-border-color) !important;
}

.home-tab .nav-tabs .nav-link {
    color: var(--erp-text-muted) !important;
    font-weight: 700;
    font-size: 1.05rem;
    border: none !important;
    background: transparent !important;
    padding-bottom: 12px;
}

.home-tab .nav-tabs .nav-link.active {
    color: var(--erp-accent-neon-cyan) !important;
    border-bottom: 3px solid var(--erp-accent-neon-cyan) !important;
    background: transparent !important;
}

[data-theme="light"] .home-tab .nav-tabs .nav-link.active {
    color: var(--erp-color-primary) !important;
    border-bottom: 3px solid var(--erp-color-primary) !important;
}

/* Home Tab Buttons */
.home-tab .btn-wrapper .btn {
    border-radius: 8px !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.2px !important;
    transition: all 0.2s ease !important;
}

.home-tab .btn-wrapper .btn-primary {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35) !important;
}

.home-tab .btn-wrapper .btn-primary:hover {
    background: #0369a1 !important;
    border-color: #0369a1 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.home-tab .btn-wrapper .btn-info {
    background: #0891b2 !important;
    border-color: #0891b2 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(8, 145, 178, 0.35) !important;
}

.home-tab .btn-wrapper .btn-info:hover {
    background: #0e7490 !important;
    border-color: #0e7490 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.home-tab .btn-wrapper .btn-warning {
    background: #d97706 !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35) !important;
}

.home-tab .btn-wrapper .btn-warning:hover {
    background: #b45309 !important;
    border-color: #b45309 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.home-tab .btn-wrapper .btn-outline-primary {
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    background: rgba(56, 189, 248, 0.06) !important;
}

.home-tab .btn-wrapper .btn-outline-primary:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

/* Statistics Details Top Bar */
.statistics-details {
    background: var(--erp-bg-card);
    border: 1px solid var(--erp-border-color);
    border-radius: 12px;
    padding: 16px 24px;
    box-shadow: var(--erp-shadow-sm);
}

.statistics-title {
    color: var(--erp-text-muted) !important;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.rate-percentage {
    color: var(--erp-text-heading) !important;
    font-weight: 800;
    margin-bottom: 0;
}

/* Card Titles & Subtitles */
.card-title, .card-title-dash {
    color: var(--erp-text-heading) !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px;
}

.card-subtitle, .card-subtitle-dash, .card-description {
    color: var(--erp-text-muted) !important;
    font-size: 0.85rem;
}

/* Select Tables & Data Tables in Inventory */
.select-table, .table {
    color: var(--erp-text-primary) !important;
}

.select-table thead th, .table thead th {
    background-color: var(--erp-bg-table-header) !important;
    color: var(--erp-text-muted) !important;
    border-bottom: 1px solid var(--erp-border-color) !important;
    border-top: none !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 14px !important;
}

.select-table tbody td, .table tbody td {
    color: var(--erp-text-primary) !important;
    border-bottom: 1px solid var(--erp-border-color) !important;
    border-top: none !important;
    padding: 12px 14px !important;
    vertical-align: middle;
}

.select-table tbody td h6, .table tbody td h6 {
    color: var(--erp-text-heading) !important;
    font-weight: 700;
    margin-bottom: 2px;
    font-size: 0.92rem;
}

.select-table tbody td p, .table tbody td p {
    color: var(--erp-text-muted) !important;
    margin-bottom: 0;
    font-size: 0.8rem;
}

.select-table tbody tr:hover, .table-hover tbody tr:hover {
    background-color: var(--erp-bg-table-hover) !important;
}

/* High-Contrast Badges */
.badge-opacity-primary {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
}

.badge-opacity-danger {
    background: rgba(248, 113, 113, 0.15) !important;
    color: #f87171 !important;
    border: 1px solid rgba(248, 113, 113, 0.3) !important;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
}

.badge-opacity-success {
    background: rgba(52, 211, 153, 0.15) !important;
    color: #34d399 !important;
    border: 1px solid rgba(52, 211, 153, 0.3) !important;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
}

.badge-opacity-warning {
    background: rgba(251, 191, 36, 0.15) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
}

[data-theme="light"] .badge-opacity-primary {
    background: #e0f2fe !important;
    color: #0284c7 !important;
    border: 1px solid #bae6fd !important;
}

[data-theme="light"] .badge-opacity-danger {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border: 1px solid #fca5a5 !important;
}

[data-theme="light"] .badge-opacity-success {
    background: #dcfce7 !important;
    color: #16a34a !important;
    border: 1px solid #86efac !important;
}

[data-theme="light"] .badge-opacity-warning {
    background: #fef3c7 !important;
    color: #d97706 !important;
    border: 1px solid #fde68a !important;
}

/* Recent Transactions List (Todo List styling) */
.todo-list-custom {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.todo-list-custom li {
    background: transparent !important;
    border-bottom: 1px solid var(--erp-border-color) !important;
    padding: 12px 0 !important;
    color: var(--erp-text-primary) !important;
}

.todo-list-custom li:last-child {
    border-bottom: none !important;
}

.todo-list-custom li .fw-bold {
    color: var(--erp-text-heading) !important;
    font-size: 0.9rem;
}

/* Filter Bar Form Controls in Dark Mode */
.input-group-text {
    background-color: var(--erp-bg-input) !important;
    border-color: var(--erp-border-input) !important;
    color: var(--erp-text-muted) !important;
}

.form-control, .form-select {
    background-color: var(--erp-bg-input) !important;
    border-color: var(--erp-border-input) !important;
    color: var(--erp-text-primary) !important;
}

.form-control:focus, .form-select:focus {
    background-color: var(--erp-bg-input) !important;
    border-color: var(--erp-accent-neon-cyan) !important;
    color: var(--erp-text-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(56, 189, 248, 0.15) !important;
}

[data-theme="light"] .input-group-text {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #64748b !important;
}

[data-theme="light"] .form-control, [data-theme="light"] .form-select {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* Modals & Dialogs */
.modal-content {
    background-color: var(--erp-bg-modal) !important;
    border: 1px solid var(--erp-border-color) !important;
    color: var(--erp-text-primary) !important;
    box-shadow: var(--erp-shadow-md) !important;
}

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

.modal-footer {
    border-top: 1px solid var(--erp-border-color) !important;
}

.modal-title {
    color: var(--erp-text-heading) !important;
    font-weight: 700 !important;
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="light"] .btn-close {
    filter: none;
}

/* Button Light Global Overrides */
.btn-light {
    background-color: var(--erp-bg-card-subtle) !important;
    border-color: var(--erp-border-color) !important;
    color: var(--erp-text-primary) !important;
}

.btn-light:hover {
    background-color: var(--erp-bg-card-hover) !important;
    border-color: var(--erp-border-glow) !important;
    color: var(--erp-accent-neon-cyan) !important;
}

[data-theme="light"] .btn-light {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

[data-theme="light"] .btn-light:hover {
    background-color: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* Pagination Links in Dark Mode */
.pagination .page-link {
    background-color: var(--erp-bg-card) !important;
    border-color: var(--erp-border-color) !important;
    color: var(--erp-text-primary) !important;
}

.pagination .page-item.active .page-link {
    background-color: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
}

.pagination .page-item.disabled .page-link {
    background-color: var(--erp-bg-input) !important;
    border-color: var(--erp-border-color) !important;
    color: var(--erp-text-muted) !important;
}

/* Form Labels & Descriptions */
.form-label, label {
    color: var(--erp-text-secondary) !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
}

/* Outline Badges */
.badge-outline-primary, .badge-outline-info {
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.08) !important;
    font-weight: 700;
}

.badge-outline-success {
    border: 1px solid rgba(52, 211, 153, 0.4) !important;
    color: #34d399 !important;
    background: rgba(52, 211, 153, 0.08) !important;
    font-weight: 700;
}

.badge-outline-danger {
    border: 1px solid rgba(248, 113, 113, 0.4) !important;
    color: #f87171 !important;
    background: rgba(248, 113, 113, 0.08) !important;
    font-weight: 700;
}

.badge-outline-warning {
    border: 1px solid rgba(251, 191, 36, 0.4) !important;
    color: #fbbf24 !important;
    background: rgba(251, 191, 36, 0.08) !important;
    font-weight: 700;
}

.badge-outline-secondary {
    border: 1px solid var(--erp-border-color) !important;
    color: var(--erp-text-muted) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    font-weight: 600;
}

[data-theme="light"] .badge-outline-primary, [data-theme="light"] .badge-outline-info {
    border: 1px solid #0284c7 !important;
    color: #0284c7 !important;
    background: #f0f9ff !important;
}

[data-theme="light"] .badge-outline-success {
    border: 1px solid #16a34a !important;
    color: #16a34a !important;
    background: #f0fdf4 !important;
}

[data-theme="light"] .badge-outline-danger {
    border: 1px solid #dc2626 !important;
    color: #dc2626 !important;
    background: #fef2f2 !important;
}

[data-theme="light"] .badge-outline-warning {
    border: 1px solid #d97706 !important;
    color: #d97706 !important;
    background: #fffbeb !important;
}

[data-theme="light"] .badge-outline-secondary {
    border: 1px solid #cbd5e1 !important;
    color: #64748b !important;
    background: #f8fafc !important;
}

/* --------------------------------------------------------------------------
   21. UNIVERSAL HIGH-CONTRAST ACTION BUTTONS (Dark & Light Modes)
   -------------------------------------------------------------------------- */
.btn-outline-primary {
    border: 1.5px solid #38bdf8 !important;
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.12) !important;
    font-weight: 700 !important;
}
.btn-outline-primary:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}
.btn-outline-primary.active,
.btn-outline-primary:active,
.btn-outline-primary.show {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.4) !important;
}

.btn-outline-warning {
    border: 1.5px solid #fbbf24 !important;
    color: #fbbf24 !important;
    background: rgba(251, 191, 36, 0.12) !important;
    font-weight: 700 !important;
}
.btn-outline-warning:hover {
    background: #fbbf24 !important;
    color: #1e293b !important;
    border-color: #fbbf24 !important;
}

.btn-outline-danger {
    border: 1.5px solid #f87171 !important;
    color: #f87171 !important;
    background: rgba(248, 113, 113, 0.12) !important;
    font-weight: 700 !important;
}
.btn-outline-danger:hover {
    background: #f87171 !important;
    color: #ffffff !important;
    border-color: #f87171 !important;
}

.btn-outline-success {
    border: 1.5px solid #34d399 !important;
    color: #34d399 !important;
    background: rgba(52, 211, 153, 0.12) !important;
    font-weight: 700 !important;
}
.btn-outline-success:hover {
    background: #34d399 !important;
    color: #ffffff !important;
    border-color: #34d399 !important;
}

.btn-outline-info {
    border: 1.5px solid #38bdf8 !important;
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.12) !important;
    font-weight: 700 !important;
}
.btn-outline-info:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

.btn-outline-secondary {
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    color: #e2e8f0 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    font-weight: 600 !important;
}
.btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Category Filter Pills */
.category-btn {
    border-radius: 50rem !important;
    padding: 0.38rem 1rem !important;
    font-size: 0.825rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    color: #cbd5e1 !important;
    background: rgba(14, 22, 40, 0.75) !important;
    transition: all 0.2s ease-in-out !important;
}
.category-btn:hover {
    color: #ffffff !important;
    background: rgba(56, 189, 248, 0.22) !important;
    border-color: #38bdf8 !important;
    transform: translateY(-1px);
}
.category-btn.active,
.category-btn:active {
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.45) !important;
}

[data-theme="light"] .btn-outline-primary {
    border: 1.5px solid #0284c7 !important;
    color: #0284c7 !important;
    background: #f0f9ff !important;
}
[data-theme="light"] .btn-outline-primary:hover,
[data-theme="light"] .btn-outline-primary.active,
[data-theme="light"] .btn-outline-primary:active,
[data-theme="light"] .btn-outline-primary.show {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

[data-theme="light"] .btn-outline-warning {
    border: 1.5px solid #d97706 !important;
    color: #d97706 !important;
    background: #fffbeb !important;
}
[data-theme="light"] .btn-outline-warning:hover {
    background: #d97706 !important;
    color: #ffffff !important;
}

[data-theme="light"] .btn-outline-danger {
    border: 1.5px solid #dc2626 !important;
    color: #dc2626 !important;
    background: #fef2f2 !important;
}
[data-theme="light"] .btn-outline-danger:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
}

[data-theme="light"] .btn-outline-success {
    border: 1.5px solid #16a34a !important;
    color: #16a34a !important;
    background: #f0fdf4 !important;
}
[data-theme="light"] .btn-outline-success:hover {
    background: #16a34a !important;
    color: #ffffff !important;
}

[data-theme="light"] .btn-outline-info {
    border: 1.5px solid #0284c7 !important;
    color: #0284c7 !important;
    background: #f0f9ff !important;
}
[data-theme="light"] .btn-outline-info:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
}

[data-theme="light"] .btn-outline-secondary {
    border: 1.5px solid #cbd5e1 !important;
    color: #475569 !important;
    background: #ffffff !important;
}
[data-theme="light"] .btn-outline-secondary:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

[data-theme="light"] .category-btn {
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    background: #ffffff !important;
}
[data-theme="light"] .category-btn:hover {
    color: #0284c7 !important;
    background: #f0f9ff !important;
    border-color: #0284c7 !important;
}
[data-theme="light"] .category-btn.active,
[data-theme="light"] .category-btn:active {
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
}

/* --------------------------------------------------------------------------
   22. MODALS & DIALOG THEME INTEGRATION
   -------------------------------------------------------------------------- */
.modal-content {
    background-color: var(--erp-bg-modal) !important;
    color: var(--erp-text-primary) !important;
    border: 1px solid var(--erp-border-color) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
.modal-header {
    border-bottom: 1px solid var(--erp-border-color) !important;
}
.modal-footer {
    border-top: 1px solid var(--erp-border-color) !important;
}

/* --------------------------------------------------------------------------
   23. SUBTLE BADGES & NAV PILLS
   -------------------------------------------------------------------------- */
.bg-success-subtle {
    background-color: rgba(52, 211, 153, 0.12) !important;
    color: #34d399 !important;
}
.border-success-subtle {
    border-color: rgba(52, 211, 153, 0.3) !important;
}

.bg-warning-subtle {
    background-color: rgba(251, 191, 36, 0.12) !important;
    color: #fbbf24 !important;
}
.border-warning-subtle {
    border-color: rgba(251, 191, 36, 0.3) !important;
}

.bg-info-subtle {
    background-color: rgba(56, 189, 248, 0.12) !important;
    color: #38bdf8 !important;
}
.border-info-subtle {
    border-color: rgba(56, 189, 248, 0.3) !important;
}

.bg-primary-subtle {
    background-color: rgba(37, 99, 235, 0.15) !important;
    color: #38bdf8 !important;
}
.border-primary-subtle {
    border-color: rgba(56, 189, 248, 0.35) !important;
}

.bg-secondary-subtle {
    background-color: rgba(148, 163, 184, 0.12) !important;
    color: #94a3b8 !important;
}
.border-secondary-subtle {
    border-color: rgba(148, 163, 184, 0.3) !important;
}

/* Nav Pills Theme Integration */
.nav-pills .nav-link {
    border-radius: 8px !important;
    color: var(--erp-text-muted) !important;
    transition: all 0.2s ease !important;
}
.nav-pills .nav-link:hover {
    color: var(--erp-text-primary) !important;
    background: rgba(56, 189, 248, 0.08) !important;
}
.nav-pills .nav-link.active {
    background: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important;
}

[data-theme="light"] .bg-success-subtle {
    background-color: #f0fdf4 !important;
    color: #16a34a !important;
}
[data-theme="light"] .border-success-subtle {
    border-color: #bbf7d0 !important;
}

[data-theme="light"] .bg-warning-subtle {
    background-color: #fffbeb !important;
    color: #d97706 !important;
}
[data-theme="light"] .border-warning-subtle {
    border-color: #fde68a !important;
}

[data-theme="light"] .bg-info-subtle {
    background-color: #f0f9ff !important;
    color: #0284c7 !important;
}
[data-theme="light"] .border-info-subtle {
    border-color: #bae6fd !important;
}

[data-theme="light"] .bg-primary-subtle {
    background-color: #eff6ff !important;
    color: #2563eb !important;
}
[data-theme="light"] .border-primary-subtle {
    border-color: #bfdbfe !important;
}

[data-theme="light"] .bg-secondary-subtle {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
}
[data-theme="light"] .border-secondary-subtle {
    border-color: #e2e8f0 !important;
}

/* Salary & Attendance Stat Cards */
.stat-icon-circle {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.action-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tech-action-card {
    background-color: var(--card-bg, #ffffff);
    transition: all 0.2s ease-in-out;
}
.tech-action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    border-color: rgba(56, 189, 248, 0.5) !important;
}

/* Dark Mode Theme Tuning */
:root[data-theme="dark"] .tech-action-card,
body.dark-theme .tech-action-card,
.dark-mode .tech-action-card {
    background-color: rgba(30, 41, 59, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
:root[data-theme="dark"] .tech-action-card:hover,
body.dark-theme .tech-action-card:hover,
.dark-mode .tech-action-card:hover {
    background-color: rgba(30, 41, 59, 1) !important;
    border-color: rgba(56, 189, 248, 0.45) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}
:root[data-theme="dark"] .tech-action-card h6,
body.dark-theme .tech-action-card h6,
.dark-mode .tech-action-card h6 {
    color: #f8fafc !important;
}
:root[data-theme="dark"] .tech-action-card p,
body.dark-theme .tech-action-card p,
.dark-mode .tech-action-card p {
    color: #94a3b8 !important;
}