/* ==========================================================================
   JobMaster Enterprise Design System - Dual Theme (Light & Dark)
   Modeled cleanly after mobile app design language:
   Deep Midnight Navy (#1b253c), Luminous Porcelain (#f8fafc),
   Crisp White (#ffffff), Subtle Slate Borders (#e2e8f0).
   ========================================================================== */

:root {
    --theme-mode: 'dark';
    --bg-canvas: #0d0d12;
    --bg-surface: rgba(22, 22, 34, 0.75);
    --bg-surface-elevated: #161622;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --border-color: rgba(255, 255, 255, 0.08);
    --input-bg: rgba(255, 255, 255, 0.05);
    --input-border: rgba(255, 255, 255, 0.1);
    --input-text: #f8fafc;
    --navy-primary: #1b253c;
    --prime-gradient: linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%);
    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
    --hover-shadow: 0 20px 30px -5px rgba(0, 0, 0, 0.4), 0 15px 15px -6px rgba(0, 0, 0, 0.3);

    /* Dark Glass System Tokens */
    --glass-bg: #121420;
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-blur: 20px;

    /* Modern Scrollbar Tokens (Dark by default) */
    --scrollbar-thumb: rgba(148, 163, 184, 0.3);
    --scrollbar-thumb-hover: rgba(148, 163, 184, 0.5);
    --scrollbar-thumb-active: rgba(148, 163, 184, 0.7);
    --scrollbar-track: transparent;
}

/* ==========================================================================
   LIGHT THEME DESIGN TOKENS (Active by default or when data-theme="light")
   ========================================================================== */
[data-theme="light"] {
    --theme-mode: 'light';
    --bg-canvas: #f8fafc;
    --bg-surface: #ffffff;
    --bg-surface-elevated: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --border-color: #e2e8f0;
    --input-bg: #f8fafc;
    --input-border: #cbd5e1;
    --input-text: #0f172a;
    
    /* Mobile App Brand Colors */
    --navy-primary: #1b253c;
    --navy-hover: #0f172a;
    --navy-active: #111827;
    --navy-tint: rgba(27, 37, 60, 0.06);
    --navy-border-tint: rgba(27, 37, 60, 0.12);
    
    /* Gradients & Shadows */
    --prime-gradient: linear-gradient(135deg, #1b253c 0%, #0f172a 100%);
    --accent-gradient: linear-gradient(135deg, #0f172a 0%, #1b253c 100%);
    --glass-bg: rgba(255, 255, 255, 0.92);
    --glass-border: rgba(226, 232, 240, 0.9);
    --glass-blur: 20px;
    
    --card-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
    --hover-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.09), 0 4px 10px -2px rgba(15, 23, 42, 0.04);

    /* Modern Scrollbar Tokens (Light Mode) */
    --scrollbar-thumb: #cbd5e1;
    --scrollbar-thumb-hover: #94a3b8;
    --scrollbar-thumb-active: #64748b;
    --scrollbar-track: transparent;
}

/* ==========================================================================
   MODERN MINIMALIST SCROLLBAR SYSTEM (UNIVERSAL)
   Ultra-sleek, 7px floating pill scrollbar across all views & containers
   ========================================================================== */

/* Universal Firefox thin scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Base Dimensions for WebKit / Blink (Chrome, Edge, Safari, Brave) */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

/* Remove clunky OS stepper buttons */
::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Transparent unobtrusive track */
::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 9999px;
}

/* Transparent corner */
::-webkit-scrollbar-corner {
    background: transparent;
}

/* Floating pill thumb */
::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 9999px;
    border: 1px solid transparent;
    background-clip: padding-box;
    transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

::-webkit-scrollbar-thumb:active {
    background-color: var(--scrollbar-thumb-active);
}

/* Light Theme Explicit Fallbacks (Viewport & Descendant Elements) */
[data-theme="light"],
html[data-theme="light"],
html[data-theme="light"] * {
    scrollbar-color: #cbd5e1 transparent;
}

[data-theme="light"]::-webkit-scrollbar-thumb,
html[data-theme="light"]::-webkit-scrollbar-thumb,
[data-theme="light"] *::-webkit-scrollbar-thumb,
html[data-theme="light"] *::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
}

[data-theme="light"]::-webkit-scrollbar-thumb:hover,
html[data-theme="light"]::-webkit-scrollbar-thumb:hover,
[data-theme="light"] *::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] *::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

[data-theme="light"]::-webkit-scrollbar-thumb:active,
html[data-theme="light"]::-webkit-scrollbar-thumb:active,
[data-theme="light"] *::-webkit-scrollbar-thumb:active,
html[data-theme="light"] *::-webkit-scrollbar-thumb:active {
    background-color: #64748b;
}

/* Dark Theme Explicit Fallbacks */
[data-theme="dark"],
html:not([data-theme="light"]),
html:not([data-theme="light"]) * {
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

[data-theme="dark"]::-webkit-scrollbar-thumb,
html:not([data-theme="light"])::-webkit-scrollbar-thumb,
[data-theme="dark"] *::-webkit-scrollbar-thumb,
html:not([data-theme="light"]) *::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.3);
}

[data-theme="dark"]::-webkit-scrollbar-thumb:hover,
html:not([data-theme="light"])::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] *::-webkit-scrollbar-thumb:hover,
html:not([data-theme="light"]) *::-webkit-scrollbar-thumb:hover {
    background-color: rgba(148, 163, 184, 0.5);
}

[data-theme="dark"]::-webkit-scrollbar-thumb:active,
html:not([data-theme="light"])::-webkit-scrollbar-thumb:active,
[data-theme="dark"] *::-webkit-scrollbar-thumb:active,
html:not([data-theme="light"]) *::-webkit-scrollbar-thumb:active {
    background-color: rgba(148, 163, 184, 0.7);
}

/* Preserve components that intentionally hide scrollbars */
.sidebar-scroll,
.no-scrollbar,
.hide-scrollbar {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

.sidebar-scroll::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar,
.hide-scrollbar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ==========================================================================
   MAIN CONTENT LAYOUT ALIGNMENT WITH TOP BAR (ENTIRE PROJECT)
   Ensures left and right content edges match navbar width precisely
   ========================================================================== */
#mainContent > .main-body-content,
#mainContent > .animate-slide-up {
    padding: 1.5rem 1.5rem 2.5rem 1.5rem !important;
}

#mainContent .fade-in,
#mainContent .fade-in.px-2,
#mainContent .fade-in.px-2.pb-5,
#mainContent .fade-in.px-3,
#mainContent .fade-in.px-4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 991.98px) {
    #mainContent > .main-body-content,
    #mainContent > .animate-slide-up {
        padding: 1.15rem 0.75rem 2rem 0.75rem !important;
    }
}

/* Base Body & Layout */
[data-theme="light"] body {
    background-color: var(--bg-canvas) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .mesh-gradient {
    background-color: #f8fafc !important;
    background-image: 
        radial-gradient(at 0% 0%, rgba(224, 231, 255, 0.45) 0, transparent 45%), 
        radial-gradient(at 50% 0%, rgba(241, 245, 249, 0.7) 0, transparent 50%), 
        radial-gradient(at 100% 0%, rgba(219, 234, 254, 0.4) 0, transparent 45%),
        radial-gradient(at 80% 100%, rgba(243, 244, 246, 0.6) 0, transparent 50%) !important;
}

/* Headings & Text */
[data-theme="light"] h1, 
[data-theme="light"] h2, 
[data-theme="light"] h3, 
[data-theme="light"] h4, 
[data-theme="light"] h5, 
[data-theme="light"] h6,
[data-theme="light"] .text-dark {
    color: #0f172a !important;
}

[data-theme="light"] .text-muted {
    color: #64748b !important;
}

[data-theme="light"] .vr {
    background-color: #cbd5e1 !important;
    opacity: 0.6 !important;
}

/* Resolve any .text-white inside cards, tables, headers, and modals */
[data-theme="light"] .card-premium .text-white,
[data-theme="light"] .glass-card .text-white,
[data-theme="light"] .table-premium .text-white,
[data-theme="light"] .kpi-card-custom .text-white,
[data-theme="light"] .modal-content .text-white,
[data-theme="light"] .detail-card .text-white,
[data-theme="light"] .detail-value,
[data-theme="light"] .date-data,
[data-theme="light"] .tech-name-data,
[data-theme="light"] td .text-white,
[data-theme="light"] th .text-white,
[data-theme="light"] .kpi-value,
[data-theme="light"] .header-title,
[data-theme="light"] .user-name {
    color: #0f172a !important;
}

/* Keep white text where it MUST stay white (solid buttons, badges, dark avatars) */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-premium,
[data-theme="light"] .btn-neon,
[data-theme="light"] .btn-danger,
[data-theme="light"] .btn-success,
[data-theme="light"] .badge:not(.bg-light):not(.bg-opacity-10):not(.bg-opacity-25),
[data-theme="light"] .sidebar-link.active,
[data-theme="light"] .sidebar-link.active *,
[data-theme="light"] .logo-container,
[data-theme="light"] .logo-container *,
[data-theme="light"] .bg-primary *,
[data-theme="light"] .bg-danger *,
[data-theme="light"] .bg-success *,
[data-theme="light"] .tooltip-inner {
    color: #ffffff !important;
}

/* ==========================================================================
   PRIMARY BUTTONS & ACCENTS (Deep Midnight Navy from Mobile App)
   ========================================================================== */
[data-theme="light"] .btn-premium,
[data-theme="light"] .btn-neon {
    background: linear-gradient(135deg, #1b253c 0%, #0f172a 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(27, 37, 60, 0.25) !important;
    font-weight: 600;
}

[data-theme="light"] .btn-premium:hover,
[data-theme="light"] .btn-neon:hover {
    background: linear-gradient(135deg, #0f172a 0%, #020617 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(27, 37, 60, 0.35) !important;
    transform: translateY(-1px);
}

[data-theme="light"] .btn-outline-secondary {
    border-color: #cbd5e1 !important;
    color: #334155 !important;
    background-color: #ffffff !important;
}

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

/* ==========================================================================
   SIDEBAR (Clean Luminous Modern Glass)
   ========================================================================== */
[data-theme="light"] .glass-sidebar {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.05), 0 0 1px rgba(15, 23, 42, 0.1) !important;
}

[data-theme="light"] .sidebar-header {
    border-bottom: 1px solid #f1f5f9 !important;
}

[data-theme="light"] .sidebar-header h4 {
    color: #0f172a !important;
}

/* Mobile App Navy Brand Squircle Icon */
[data-theme="light"] .sidebar-header .logo-container,
[data-theme="light"] .icon-box-mobile-style {
    background: #1b253c !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(27, 37, 60, 0.25) !important;
    border-radius: 12px !important;
}

[data-theme="light"] .sidebar-link {
    color: #475569 !important;
    font-weight: 500;
}

[data-theme="light"] .sidebar-link i,
[data-theme="light"] .sidebar-link svg {
    color: #64748b;
    transition: color 0.2s ease;
}

[data-theme="light"] .sidebar-link:hover {
    background: #f1f5f9 !important;
    color: #1e293b !important;
}

[data-theme="light"] .sidebar-link:hover i,
[data-theme="light"] .sidebar-link:hover svg {
    color: #1e293b;
}

/* Active Link: Sleek Navy Squircle Pill */
[data-theme="light"] .sidebar-link.active {
    background: linear-gradient(135deg, #1b253c 0%, #0f172a 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(27, 37, 60, 0.25) !important;
}

[data-theme="light"] .sidebar-link.active i,
[data-theme="light"] .sidebar-link.active svg {
    color: #ffffff !important;
}

[data-theme="light"] .sidebar-footer {
    border-top: 1px solid #f1f5f9 !important;
}

[data-theme="light"] .sidebar-footer-nav {
    border-top-color: #f1f5f9 !important;
}

/* ==========================================================================
   SIDEBAR TOGGLE BUTTON (Modern Dual-Theme Squircle & Edge Pill)
   ========================================================================== */
/* Default / Dark Mode Expanded */
.sidebar-toggle-btn,
#sidebarToggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.sidebar-toggle-btn i,
.sidebar-toggle-btn svg,
#sidebarToggle i,
#sidebarToggle svg {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 2.25px !important;
    color: #94a3b8 !important;
    stroke: #94a3b8 !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease, stroke 0.2s ease !important;
}

.sidebar-toggle-btn:hover,
#sidebarToggle:hover {
    background: rgba(168, 85, 247, 0.2) !important;
    border-color: rgba(168, 85, 247, 0.45) !important;
    color: #c084fc !important;
    transform: scale(1.06) !important;
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.35) !important;
}

.sidebar-toggle-btn:hover i,
.sidebar-toggle-btn:hover svg,
#sidebarToggle:hover i,
#sidebarToggle:hover svg {
    color: #c084fc !important;
    stroke: #c084fc !important;
    transform: translateX(-1.5px) !important;
}

.sidebar-toggle-btn:active,
#sidebarToggle:active {
    transform: scale(0.94) !important;
}

/* Sidebar Header in Collapsed Mode */
.glass-sidebar.collapsed .sidebar-header {
    padding: 0 !important;
    justify-content: center !important;
    min-height: 70px !important;
    position: relative !important;
}

.glass-sidebar.collapsed .sidebar-header .logo-brand-wrap {
    margin: 0 auto !important;
    justify-content: center !important;
}

/* Dark Mode Collapsed (Sleek Floating Pill on Right Edge) */
.glass-sidebar.collapsed .sidebar-toggle-btn,
.glass-sidebar.collapsed #sidebarToggle {
    position: absolute !important;
    right: -13px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 50% !important;
    background: #161622 !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #f8fafc !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
    z-index: 1070 !important;
}

.glass-sidebar.collapsed .sidebar-toggle-btn:hover,
.glass-sidebar.collapsed #sidebarToggle:hover {
    background: #8b5cf6 !important;
    border-color: #8b5cf6 !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.6) !important;
    transform: translateY(-50%) scale(1.12) !important;
}

.glass-sidebar.collapsed .sidebar-toggle-btn:hover i,
.glass-sidebar.collapsed .sidebar-toggle-btn:hover svg,
.glass-sidebar.collapsed #sidebarToggle:hover i,
.glass-sidebar.collapsed #sidebarToggle:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    transform: translateX(1.5px) !important;
}

.glass-sidebar.collapsed .sidebar-toggle-btn:active,
.glass-sidebar.collapsed #sidebarToggle:active {
    transform: translateY(-50%) scale(0.94) !important;
}

.glass-sidebar.collapsed .sidebar-toggle-btn i,
.glass-sidebar.collapsed .sidebar-toggle-btn svg,
.glass-sidebar.collapsed #sidebarToggle i,
.glass-sidebar.collapsed #sidebarToggle svg {
    width: 14px !important;
    height: 14px !important;
}

/* Light Mode: Clean White Squircle with Subtle Slate Border */
[data-theme="light"] .sidebar-toggle-btn,
[data-theme="light"] #sidebarToggle,
html[data-theme="light"] .sidebar-toggle-btn,
html[data-theme="light"] #sidebarToggle {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

[data-theme="light"] .sidebar-toggle-btn i,
[data-theme="light"] .sidebar-toggle-btn svg,
[data-theme="light"] #sidebarToggle i,
[data-theme="light"] #sidebarToggle svg,
html[data-theme="light"] .sidebar-toggle-btn i,
html[data-theme="light"] .sidebar-toggle-btn svg,
html[data-theme="light"] #sidebarToggle i,
html[data-theme="light"] #sidebarToggle svg {
    color: #475569 !important;
    stroke: #475569 !important;
}

[data-theme="light"] .sidebar-toggle-btn:hover,
[data-theme="light"] #sidebarToggle:hover,
html[data-theme="light"] .sidebar-toggle-btn:hover,
html[data-theme="light"] #sidebarToggle:hover {
    background: #1b253c !important;
    border-color: #1b253c !important;
    color: #ffffff !important;
    transform: scale(1.06) !important;
    box-shadow: 0 4px 14px rgba(27, 37, 60, 0.25) !important;
}

[data-theme="light"] .sidebar-toggle-btn:hover i,
[data-theme="light"] .sidebar-toggle-btn:hover svg,
[data-theme="light"] #sidebarToggle:hover i,
[data-theme="light"] #sidebarToggle:hover svg,
html[data-theme="light"] .sidebar-toggle-btn:hover i,
html[data-theme="light"] .sidebar-toggle-btn:hover svg,
html[data-theme="light"] #sidebarToggle:hover i,
html[data-theme="light"] #sidebarToggle:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    transform: translateX(-1.5px) !important;
}

[data-theme="light"] .sidebar-toggle-btn:active,
[data-theme="light"] #sidebarToggle:active,
html[data-theme="light"] .sidebar-toggle-btn:active,
html[data-theme="light"] #sidebarToggle:active {
    transform: scale(0.94) !important;
}

/* Light Mode Collapsed (Crisp White Floating Pill with Navy Hover) */
[data-theme="light"] .glass-sidebar.collapsed .sidebar-toggle-btn,
[data-theme="light"] .glass-sidebar.collapsed #sidebarToggle,
html[data-theme="light"] .glass-sidebar.collapsed .sidebar-toggle-btn,
html[data-theme="light"] .glass-sidebar.collapsed #sidebarToggle {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .glass-sidebar.collapsed .sidebar-toggle-btn i,
[data-theme="light"] .glass-sidebar.collapsed .sidebar-toggle-btn svg,
[data-theme="light"] .glass-sidebar.collapsed #sidebarToggle i,
[data-theme="light"] .glass-sidebar.collapsed #sidebarToggle svg,
html[data-theme="light"] .glass-sidebar.collapsed .sidebar-toggle-btn i,
html[data-theme="light"] .glass-sidebar.collapsed .sidebar-toggle-btn svg,
html[data-theme="light"] .glass-sidebar.collapsed #sidebarToggle i,
html[data-theme="light"] .glass-sidebar.collapsed #sidebarToggle svg {
    color: #1e293b !important;
    stroke: #1e293b !important;
}

[data-theme="light"] .glass-sidebar.collapsed .sidebar-toggle-btn:hover,
[data-theme="light"] .glass-sidebar.collapsed #sidebarToggle:hover,
html[data-theme="light"] .glass-sidebar.collapsed .sidebar-toggle-btn:hover,
html[data-theme="light"] .glass-sidebar.collapsed #sidebarToggle:hover {
    background: #1b253c !important;
    border-color: #1b253c !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(27, 37, 60, 0.35) !important;
    transform: translateY(-50%) scale(1.12) !important;
}

[data-theme="light"] .glass-sidebar.collapsed .sidebar-toggle-btn:hover i,
[data-theme="light"] .glass-sidebar.collapsed .sidebar-toggle-btn:hover svg,
[data-theme="light"] .glass-sidebar.collapsed #sidebarToggle:hover i,
[data-theme="light"] .glass-sidebar.collapsed #sidebarToggle:hover svg,
html[data-theme="light"] .glass-sidebar.collapsed .sidebar-toggle-btn:hover i,
html[data-theme="light"] .glass-sidebar.collapsed .sidebar-toggle-btn:hover svg,
html[data-theme="light"] .glass-sidebar.collapsed #sidebarToggle:hover i,
html[data-theme="light"] .glass-sidebar.collapsed #sidebarToggle:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    transform: translateX(1.5px) !important;
}

[data-theme="light"] .glass-sidebar.collapsed .sidebar-toggle-btn:active,
[data-theme="light"] .glass-sidebar.collapsed #sidebarToggle:active,
html[data-theme="light"] .glass-sidebar.collapsed .sidebar-toggle-btn:active,
html[data-theme="light"] .glass-sidebar.collapsed #sidebarToggle:active {
    transform: translateY(-50%) scale(0.94) !important;
}

[data-theme="light"] .sidebar-scroll-indicator {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 100%) !important;
}

[data-theme="light"] .sidebar-scroll-indicator .indicator-icon {
    color: #1b253c !important;
    filter: drop-shadow(0 2px 6px rgba(27, 37, 60, 0.3)) !important;
}

/* ==========================================================================
   TOP NAVBAR (Luminous Glass Header)
   ========================================================================== */
[data-theme="light"] .glass-nav {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02) !important;
}

[data-theme="light"] .search-container .search-input {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme="light"] .search-container .search-input::placeholder {
    color: #94a3b8 !important;
}

[data-theme="light"] .search-container .search-input:focus {
    background: #ffffff !important;
    border-color: #1b253c !important;
    box-shadow: 0 0 0 3px rgba(27, 37, 60, 0.1) !important;
}

[data-theme="light"] .search-container .search-icon {
    color: #64748b !important;
}

[data-theme="light"] .date-display {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

[data-theme="light"] .date-display i,
[data-theme="light"] .date-display svg {
    color: #1b253c !important;
}

[data-theme="light"] .nav-link-btn {
    color: #64748b !important;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

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

[data-theme="light"] #mobileSidebarToggle {
    color: #1b253c !important;
}

/* Dropdown Menus */
[data-theme="light"] .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 25px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -2px rgba(15, 23, 42, 0.05) !important;
    backdrop-filter: blur(16px) !important;
}

[data-theme="light"] .dropdown-menu .dropdown-item {
    color: #334155 !important;
}

[data-theme="light"] .dropdown-menu .dropdown-item:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

[data-theme="light"] .dropdown-header {
    color: #64748b !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

[data-theme="light"] .quick-link-box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}

[data-theme="light"] .quick-link-box:hover {
    background: #1b253c !important;
    border-color: #1b253c !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(27, 37, 60, 0.25) !important;
}

/* Typeahead Search Results */
[data-theme="light"] .typeahead-dropdown {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 15px 30px rgba(15, 23, 42, 0.1) !important;
}

[data-theme="light"] .typeahead-item {
    color: #334155 !important;
}

[data-theme="light"] .typeahead-item i,
[data-theme="light"] .typeahead-item svg {
    color: #64748b !important;
}

[data-theme="light"] .typeahead-item:hover,
[data-theme="light"] .typeahead-item.active {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

[data-theme="light"] .typeahead-item:hover i,
[data-theme="light"] .typeahead-item.active i,
[data-theme="light"] .typeahead-item:hover svg,
[data-theme="light"] .typeahead-item.active svg {
    color: #1b253c !important;
}

/* Mobile Search Overlay */
[data-theme="light"] .mobile-search-overlay {
    background: rgba(255, 255, 255, 0.98) !important;
}

[data-theme="light"] #mobileSidebarSearchInput {
    color: #0f172a !important;
}

/* ==========================================================================
   CARDS & SURFACES (Crisp White with Soft Elevation)
   ========================================================================== */
[data-theme="light"] .glass-card,
[data-theme="light"] .card-premium,
[data-theme="light"] .detail-card,
html[data-theme="light"] .card-premium,
html[data-theme="light"] .glass-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02) !important;
}

[data-theme="light"] .card-premium .border-bottom {
    border-bottom: 1px solid #f1f5f9 !important;
}

[data-theme="light"] .card-premium h5,
[data-theme="light"] .card-premium h4,
[data-theme="light"] .card-premium h3,
[data-theme="light"] .card-premium h2 {
    color: #0f172a !important;
    font-weight: 700 !important;
}

[data-theme="light"] .glass-card::before,
[data-theme="light"] .card-premium::before {
    display: none !important;
}

[data-theme="light"] .glass-card:hover,
[data-theme="light"] .card-premium:hover,
[data-theme="light"] .detail-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.03) !important;
    border-color: #cbd5e1 !important;
}

/* KPI Stat Cards (Dual Theme: Dark Mode Default & Light Mode) */
/* Dark Mode: Deep Midnight Glass Surface */
.kpi-card-custom,
[data-theme="dark"] .kpi-card-custom,
html[data-theme="dark"] .kpi-card-custom,
html[data-theme="dark"] div.kpi-card-custom {
    background: rgba(22, 22, 34, 0.85) !important;
    background-color: rgba(22, 22, 34, 0.85) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px !important;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.35), 0 2px 6px -1px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease !important;
}

.kpi-card-custom:hover,
[data-theme="dark"] .kpi-card-custom:hover,
html[data-theme="dark"] .kpi-card-custom:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 32px -4px rgba(0, 0, 0, 0.5), 0 4px 12px -2px rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.18);
}

.kpi-card-custom .kpi-value,
[data-theme="dark"] .kpi-card-custom .kpi-value,
html[data-theme="dark"] .kpi-card-custom .kpi-value {
    color: #f8fafc !important;
    font-weight: 800 !important;
}

.kpi-card-custom .kpi-label,
[data-theme="dark"] .kpi-card-custom .kpi-label,
html[data-theme="dark"] .kpi-card-custom .kpi-label {
    color: #94a3b8 !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.5px !important;
}

/* Light Mode: Crisp White Card (Matching Mobile Aesthetics) */
[data-theme="light"] .kpi-card-custom,
html[data-theme="light"] .kpi-card-custom,
html[data-theme="light"] div.kpi-card-custom {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease !important;
}

[data-theme="light"] .kpi-card-custom:hover,
html[data-theme="light"] .kpi-card-custom:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 25px -4px rgba(15, 23, 42, 0.08), 0 4px 8px -2px rgba(15, 23, 42, 0.03) !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] .kpi-card-custom .kpi-value,
html[data-theme="light"] .kpi-card-custom .kpi-value {
    color: #0f172a !important;
    font-weight: 800 !important;
}

[data-theme="light"] .kpi-card-custom .kpi-label,
html[data-theme="light"] .kpi-card-custom .kpi-label {
    color: #64748b !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.5px !important;
}

/* ==========================================================================
   KPI ICON WRAPPERS & ICONS (Vibrant Contrast & Clear Silhouettes)
   ========================================================================== */
.kpi-card-custom .icon-box {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.kpi-card-custom:hover .icon-box {
    transform: scale(1.08);
}

.kpi-card-custom .icon-box i,
.kpi-card-custom .icon-box svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2.25px !important;
}

/* Light Mode: Saturated, High-Contrast Colors on Soft Tinted Badges */
[data-theme="light"] .kpi-card-custom .icon-box.bg-warning,
[data-theme="light"] .kpi-card-custom .icon-box.text-warning,
html[data-theme="light"] .kpi-card-custom .icon-box.bg-warning,
html[data-theme="light"] .kpi-card-custom .icon-box.text-warning {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.12) !important;
}
[data-theme="light"] .kpi-card-custom .icon-box.bg-warning i,
[data-theme="light"] .kpi-card-custom .icon-box.bg-warning svg,
[data-theme="light"] .kpi-card-custom .icon-box.text-warning i,
[data-theme="light"] .kpi-card-custom .icon-box.text-warning svg {
    stroke: #b45309 !important;
    color: #b45309 !important;
}

[data-theme="light"] .kpi-card-custom .icon-box.bg-success,
[data-theme="light"] .kpi-card-custom .icon-box.text-success,
html[data-theme="light"] .kpi-card-custom .icon-box.bg-success,
html[data-theme="light"] .kpi-card-custom .icon-box.text-success {
    background-color: #d1fae5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.12) !important;
}
[data-theme="light"] .kpi-card-custom .icon-box.bg-success i,
[data-theme="light"] .kpi-card-custom .icon-box.bg-success svg,
[data-theme="light"] .kpi-card-custom .icon-box.text-success i,
[data-theme="light"] .kpi-card-custom .icon-box.text-success svg {
    stroke: #047857 !important;
    color: #047857 !important;
}

[data-theme="light"] .kpi-card-custom .icon-box.bg-info,
[data-theme="light"] .kpi-card-custom .icon-box.text-info,
html[data-theme="light"] .kpi-card-custom .icon-box.bg-info,
html[data-theme="light"] .kpi-card-custom .icon-box.text-info {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #bae6fd !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.12) !important;
}
[data-theme="light"] .kpi-card-custom .icon-box.bg-info i,
[data-theme="light"] .kpi-card-custom .icon-box.bg-info svg,
[data-theme="light"] .kpi-card-custom .icon-box.text-info i,
[data-theme="light"] .kpi-card-custom .icon-box.text-info svg {
    stroke: #0369a1 !important;
    color: #0369a1 !important;
}

[data-theme="light"] .kpi-card-custom .icon-box.bg-primary,
[data-theme="light"] .kpi-card-custom .icon-box.text-primary,
html[data-theme="light"] .kpi-card-custom .icon-box.bg-primary,
html[data-theme="light"] .kpi-card-custom .icon-box.text-primary {
    background-color: #ede9fe !important;
    color: #6d28d9 !important;
    border: 1px solid #ddd6fe !important;
    box-shadow: 0 2px 6px rgba(109, 40, 217, 0.12) !important;
}
[data-theme="light"] .kpi-card-custom .icon-box.bg-primary i,
[data-theme="light"] .kpi-card-custom .icon-box.bg-primary svg,
[data-theme="light"] .kpi-card-custom .icon-box.text-primary i,
[data-theme="light"] .kpi-card-custom .icon-box.text-primary svg {
    stroke: #6d28d9 !important;
    color: #6d28d9 !important;
}

[data-theme="light"] .kpi-card-custom .icon-box.bg-danger,
[data-theme="light"] .kpi-card-custom .icon-box.text-danger,
html[data-theme="light"] .kpi-card-custom .icon-box.bg-danger,
html[data-theme="light"] .kpi-card-custom .icon-box.text-danger {
    background-color: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
    box-shadow: 0 2px 6px rgba(185, 28, 28, 0.12) !important;
}
[data-theme="light"] .kpi-card-custom .icon-box.bg-danger i,
[data-theme="light"] .kpi-card-custom .icon-box.bg-danger svg,
[data-theme="light"] .kpi-card-custom .icon-box.text-danger i,
[data-theme="light"] .kpi-card-custom .icon-box.text-danger svg {
    stroke: #b91c1c !important;
    color: #b91c1c !important;
}

/* Dark Mode: Vibrant Tinted Badges with Subtle Glow Borders */
.kpi-card-custom .icon-box.bg-warning,
.kpi-card-custom .icon-box.text-warning,
[data-theme="dark"] .kpi-card-custom .icon-box.bg-warning,
[data-theme="dark"] .kpi-card-custom .icon-box.text-warning {
    background-color: rgba(245, 158, 11, 0.18) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.32) !important;
}
.kpi-card-custom .icon-box.bg-warning i,
.kpi-card-custom .icon-box.bg-warning svg,
[data-theme="dark"] .kpi-card-custom .icon-box.bg-warning i,
[data-theme="dark"] .kpi-card-custom .icon-box.bg-warning svg {
    stroke: #fbbf24 !important;
    color: #fbbf24 !important;
}

.kpi-card-custom .icon-box.bg-success,
.kpi-card-custom .icon-box.text-success,
[data-theme="dark"] .kpi-card-custom .icon-box.bg-success,
[data-theme="dark"] .kpi-card-custom .icon-box.text-success {
    background-color: rgba(16, 185, 129, 0.18) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.32) !important;
}
.kpi-card-custom .icon-box.bg-success i,
.kpi-card-custom .icon-box.bg-success svg,
[data-theme="dark"] .kpi-card-custom .icon-box.bg-success i,
[data-theme="dark"] .kpi-card-custom .icon-box.bg-success svg {
    stroke: #34d399 !important;
    color: #34d399 !important;
}

.kpi-card-custom .icon-box.bg-info,
.kpi-card-custom .icon-box.text-info,
[data-theme="dark"] .kpi-card-custom .icon-box.bg-info,
[data-theme="dark"] .kpi-card-custom .icon-box.text-info {
    background-color: rgba(14, 165, 233, 0.18) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(14, 165, 233, 0.32) !important;
}
.kpi-card-custom .icon-box.bg-info i,
.kpi-card-custom .icon-box.bg-info svg,
[data-theme="dark"] .kpi-card-custom .icon-box.bg-info i,
[data-theme="dark"] .kpi-card-custom .icon-box.text-info svg {
    stroke: #38bdf8 !important;
    color: #38bdf8 !important;
}

.kpi-card-custom .icon-box.bg-primary,
.kpi-card-custom .icon-box.text-primary,
[data-theme="dark"] .kpi-card-custom .icon-box.bg-primary,
[data-theme="dark"] .kpi-card-custom .icon-box.text-primary {
    background-color: rgba(139, 92, 246, 0.18) !important;
    color: #a78bfa !important;
    border: 1px solid rgba(139, 92, 246, 0.32) !important;
}
.kpi-card-custom .icon-box.bg-primary i,
.kpi-card-custom .icon-box.bg-primary svg,
[data-theme="dark"] .kpi-card-custom .icon-box.bg-primary i,
[data-theme="dark"] .kpi-card-custom .icon-box.text-primary svg {
    stroke: #a78bfa !important;
    color: #a78bfa !important;
}

.kpi-card-custom .icon-box.bg-danger,
.kpi-card-custom .icon-box.text-danger,
[data-theme="dark"] .kpi-card-custom .icon-box.bg-danger,
[data-theme="dark"] .kpi-card-custom .icon-box.text-danger {
    background-color: rgba(239, 68, 68, 0.18) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.32) !important;
}
.kpi-card-custom .icon-box.bg-danger i,
.kpi-card-custom .icon-box.bg-danger svg,
[data-theme="dark"] .kpi-card-custom .icon-box.bg-danger i,
[data-theme="dark"] .kpi-card-custom .icon-box.text-danger svg {
    stroke: #f87171 !important;
    color: #f87171 !important;
}

/* ==========================================================================
   TOPBAR USER PROFILE & AVATAR (Dual Theme Support)
   ========================================================================== */
.profile-user-name {
    color: #f8fafc;
    transition: color 0.25s ease;
}

.profile-user-role {
    color: #94a3b8;
    transition: color 0.25s ease;
}

[data-theme="light"] .profile-user-name,
html[data-theme="light"] .profile-user-name {
    color: #0f172a !important;
}

[data-theme="light"] .profile-user-role,
html[data-theme="light"] .profile-user-role {
    color: #64748b !important;
}

/* User Profile Round Circle Avatar */
.profile-avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.5px !important;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s ease !important;
    user-select: none;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4) !important;
}

.profile-avatar:hover {
    transform: scale(1.06) !important;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5) !important;
}

.profile-avatar .avatar-initials {
    color: #ffffff !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
}

/* Profile Avatar in Light Mode (Deep Midnight Navy matching theme) */
[data-theme="light"] .profile-avatar,
html[data-theme="light"] .profile-avatar {
    background: linear-gradient(135deg, #1b253c 0%, #0f172a 100%) !important;
    background-color: #1b253c !important;
    color: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(27, 37, 60, 0.25) !important;
}

[data-theme="light"] .profile-avatar:hover,
html[data-theme="light"] .profile-avatar:hover {
    transform: scale(1.06) !important;
    box-shadow: 0 6px 18px rgba(27, 37, 60, 0.35) !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] .profile-avatar .avatar-initials,
html[data-theme="light"] .profile-avatar .avatar-initials {
    color: #ffffff !important;
}

/* Filter bar container (Dark Mode Base) */
#chartFilterForm,
.filter-card-bar {
    background: rgba(17, 18, 30, 0.55) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25) !important;
}

#chartFilterForm select,
.filter-card-bar select {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
    border-radius: 10px !important;
    font-weight: 500;
}

#chartFilterForm select option,
.filter-card-bar select option {
    background-color: #161824 !important;
    color: #f8fafc !important;
}

#chartFilterForm select:focus,
.filter-card-bar select:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(168, 85, 247, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2) !important;
    color: #ffffff !important;
}

/* Filter bar container (Light Mode) */
[data-theme="light"] #chartFilterForm,
[data-theme="light"] .filter-card-bar,
html[data-theme="light"] #chartFilterForm,
html[data-theme="light"] .filter-card-bar {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important;
}

[data-theme="light"] #chartFilterForm select,
[data-theme="light"] .filter-card-bar select,
html[data-theme="light"] #chartFilterForm select {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    border-radius: 10px !important;
    font-weight: 500;
}

[data-theme="light"] #chartFilterForm select option,
[data-theme="light"] .filter-card-bar select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

[data-theme="light"] #chartFilterForm select:focus,
[data-theme="light"] .filter-card-bar select:focus {
    background-color: #ffffff !important;
    border-color: #1b253c !important;
    box-shadow: 0 0 0 3px rgba(27, 37, 60, 0.1) !important;
}

/* Timeline */
[data-theme="light"] .timeline-premium::before {
    background: #e2e8f0 !important;
}

[data-theme="light"] .timeline-premium .timeline-item {
    color: #64748b !important;
}

/* ==========================================================================
   FORMS, FLOATING LABELS & INPUTS (Soft Porcelain)
   ========================================================================== */
[data-theme="light"] .form-control,
[data-theme="light"] .form-select,
[data-theme="light"] input.bg-dark,
[data-theme="light"] select.bg-dark,
[data-theme="light"] textarea.bg-dark {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    color-scheme: light !important;
}

[data-theme="light"] .form-control::placeholder,
[data-theme="light"] input.bg-dark::placeholder {
    color: #94a3b8 !important;
}

/* Fix form-floating placeholder overlay with label in light mode */
[data-theme="light"] .form-floating > .form-control:not(:focus)::placeholder,
[data-theme="light"] .form-floating > input.bg-dark:not(:focus)::placeholder,
[data-theme="light"] .form-floating > .form-control::placeholder,
[data-theme="light"] .form-floating > input.bg-dark::placeholder {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    opacity: 0 !important;
}
[data-theme="light"] .form-floating > .form-control:not(:focus)::-webkit-input-placeholder,
[data-theme="light"] .form-floating > input.bg-dark:not(:focus)::-webkit-input-placeholder,
[data-theme="light"] .form-floating > .form-control::-webkit-input-placeholder,
[data-theme="light"] .form-floating > input.bg-dark::-webkit-input-placeholder {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}
[data-theme="light"] .form-floating > .form-control:not(:focus)::-moz-placeholder,
[data-theme="light"] .form-floating > input.bg-dark:not(:focus)::-moz-placeholder,
[data-theme="light"] .form-floating > .form-control::-moz-placeholder,
[data-theme="light"] .form-floating > input.bg-dark::-moz-placeholder {
    color: transparent !important;
    opacity: 0 !important;
}
[data-theme="light"] .form-floating > .form-control:not(:focus):-ms-input-placeholder,
[data-theme="light"] .form-floating > input.bg-dark:not(:focus):-ms-input-placeholder,
[data-theme="light"] .form-floating > .form-control:-ms-input-placeholder,
[data-theme="light"] .form-floating > input.bg-dark:-ms-input-placeholder {
    color: transparent !important;
}

[data-theme="light"] .form-floating > .form-control:focus::placeholder,
[data-theme="light"] .form-floating > input.bg-dark:focus::placeholder {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    opacity: 1 !important;
}
[data-theme="light"] .form-floating > .form-control:focus::-webkit-input-placeholder,
[data-theme="light"] .form-floating > input.bg-dark:focus::-webkit-input-placeholder {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}
[data-theme="light"] .form-floating > .form-control:focus::-moz-placeholder,
[data-theme="light"] .form-floating > input.bg-dark:focus::-moz-placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}
[data-theme="light"] .form-floating > .form-control:focus:-ms-input-placeholder,
[data-theme="light"] .form-floating > input.bg-dark:focus:-ms-input-placeholder {
    color: #94a3b8 !important;
}

[data-theme="light"] .form-control:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] input.bg-dark:focus,
[data-theme="light"] select.bg-dark:focus {
    background-color: #ffffff !important;
    border-color: #1b253c !important;
    box-shadow: 0 0 0 3px rgba(27, 37, 60, 0.12) !important;
    color: #0f172a !important;
}

[data-theme="light"] .form-floating > label {
    color: #64748b !important;
}

[data-theme="light"] .form-floating > .form-control:focus ~ label,
[data-theme="light"] .form-floating > .form-control:not(:placeholder-shown) ~ label,
[data-theme="light"] .form-floating > .form-select ~ label {
    color: #1b253c !important;
}

[data-theme="light"] .form-floating > .form-control:focus ~ label::after,
[data-theme="light"] .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
[data-theme="light"] .form-floating > .form-select ~ label::after {
    background-color: transparent !important;
}

[data-theme="light"] select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

[data-theme="light"] input:-webkit-autofill,
[data-theme="light"] input:-webkit-autofill:hover, 
[data-theme="light"] input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px #f8fafc inset !important;
    -webkit-text-fill-color: #0f172a !important;
}

/* Filter bar cards */
[data-theme="light"] #chartFilterForm,
[data-theme="light"] .filter-card-bar {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important;
}

/* ==========================================================================
   TABLES & DATATABLES (Modern Clean Grid & Outer Borders - Light Mode)
   ========================================================================== */

/* Outer Border Frame on Tables */
[data-theme="light"] table.dataTable,
[data-theme="light"] .table-premium,
[data-theme="light"] .table.table-dark,
html[data-theme="light"] table.dataTable,
html[data-theme="light"] .table-premium,
html[data-theme="light"] .table.table-dark {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02) !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* Ensure Corners of Table Frame are Smoothly Rounded */
[data-theme="light"] table.dataTable thead tr:first-child th:first-child,
[data-theme="light"] .table-premium thead tr:first-child th:first-child {
    border-top-left-radius: 13px !important;
}
[data-theme="light"] table.dataTable thead tr:first-child th:last-child,
[data-theme="light"] .table-premium thead tr:first-child th:last-child {
    border-top-right-radius: 13px !important;
}
[data-theme="light"] table.dataTable tbody tr:last-child td:first-child,
[data-theme="light"] .table-premium tbody tr:last-child td:first-child {
    border-bottom-left-radius: 13px !important;
}
[data-theme="light"] table.dataTable tbody tr:last-child td:last-child,
[data-theme="light"] .table-premium tbody tr:last-child td:last-child {
    border-bottom-right-radius: 13px !important;
}

/* Modern Header with Dividing Line & Column Separators */
[data-theme="light"] table.dataTable thead th,
[data-theme="light"] .table-premium thead th,
[data-theme="light"] .table.table-dark thead th,
html[data-theme="light"] table.dataTable thead th,
html[data-theme="light"] .table-premium thead th,
html[data-theme="light"] .table.table-dark thead th {
    background-color: #f8fafc !important;
    background: #f8fafc !important;
    color: #334155 !important;
    font-size: 0.775rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.65px !important;
    padding: 0.95rem 1.15rem !important;
    border-top: none !important;
    border-bottom: 2px solid #e2e8f0 !important;
    border-right: 1px solid #edf2f7 !important;
    border-left: none !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

[data-theme="light"] table.dataTable thead th:last-child,
[data-theme="light"] .table-premium thead th:last-child,
[data-theme="light"] .table.table-dark thead th:last-child {
    border-right: none !important;
}

/* Body Rows & Cells with Clean Dividers */
[data-theme="light"] table.dataTable tbody td,
[data-theme="light"] .table-premium tbody td,
[data-theme="light"] .table.table-dark tbody td,
html[data-theme="light"] table.dataTable tbody td,
html[data-theme="light"] .table-premium tbody td,
html[data-theme="light"] .table.table-dark tbody td {
    background-color: #ffffff !important;
    color: #1e293b !important;
    padding: 1rem 1.15rem !important;
    border-top: none !important;
    border-bottom: 1px solid #edf2f7 !important;
    border-right: 1px solid #edf2f7 !important;
    border-left: none !important;
    vertical-align: middle !important;
    font-size: 0.875rem !important;
    transition: background-color 0.15s ease !important;
}

[data-theme="light"] table.dataTable tbody td:last-child,
[data-theme="light"] .table-premium tbody td:last-child,
[data-theme="light"] .table.table-dark tbody td:last-child {
    border-right: none !important;
}

[data-theme="light"] table.dataTable tbody tr:last-child td,
[data-theme="light"] .table-premium tbody tr:last-child td,
[data-theme="light"] .table.table-dark tbody tr:last-child td {
    border-bottom: none !important;
}

/* Row Hover State */
[data-theme="light"] table.dataTable tbody tr:hover td,
[data-theme="light"] .table-premium tbody tr:hover td,
[data-theme="light"] .table.table-dark tbody tr:hover td,
html[data-theme="light"] table.dataTable tbody tr:hover td,
html[data-theme="light"] .table-premium tbody tr:hover td,
html[data-theme="light"] .table.table-dark tbody tr:hover td {
    background-color: #f8fafc !important;
}

/* Cell Text & Label Contrast */
[data-theme="light"] table.dataTable tbody td .text-white,
[data-theme="light"] .table-premium tbody td .text-white,
html[data-theme="light"] table.dataTable tbody td .text-white,
html[data-theme="light"] .table-premium tbody td .text-white {
    color: #0f172a !important;
}

[data-theme="light"] table.dataTable tbody td .text-muted,
[data-theme="light"] .table-premium tbody td .text-muted,
html[data-theme="light"] table.dataTable tbody td .text-muted,
html[data-theme="light"] .table-premium tbody td .text-muted {
    color: #64748b !important;
}

/* Sorting Arrows in Light Mode */
[data-theme="light"] table.dataTable thead .sorting::before,
[data-theme="light"] table.dataTable thead .sorting::after,
[data-theme="light"] table.dataTable thead .sorting_asc::before,
[data-theme="light"] table.dataTable thead .sorting_asc::after,
[data-theme="light"] table.dataTable thead .sorting_desc::before,
[data-theme="light"] table.dataTable thead .sorting_desc::after,
html[data-theme="light"] table.dataTable thead .sorting::before,
html[data-theme="light"] table.dataTable thead .sorting::after,
html[data-theme="light"] table.dataTable thead .sorting_asc::before,
html[data-theme="light"] table.dataTable thead .sorting_asc::after,
html[data-theme="light"] table.dataTable thead .sorting_desc::before,
html[data-theme="light"] table.dataTable thead .sorting_desc::after {
    color: #64748b !important;
    opacity: 0.45 !important;
}

[data-theme="light"] table.dataTable thead .sorting_asc::before,
[data-theme="light"] table.dataTable thead .sorting_desc::after,
html[data-theme="light"] table.dataTable thead .sorting_asc::before,
html[data-theme="light"] table.dataTable thead .sorting_desc::after {
    opacity: 1 !important;
    color: #1b253c !important;
}

/* Empty State */
[data-theme="light"] table.dataTable tbody td.dataTables_empty,
html[data-theme="light"] table.dataTable tbody td.dataTables_empty {
    padding: 3rem 1.5rem !important;
    color: #64748b !important;
    font-size: 0.925rem !important;
    font-weight: 500 !important;
    background-color: #ffffff !important;
    text-align: center !important;
}

/* DataTables Top Controls Wrapper */
[data-theme="light"] div.dataTables_wrapper div.dataTables_length,
[data-theme="light"] div.dataTables_wrapper div.dataTables_filter,
html[data-theme="light"] div.dataTables_wrapper div.dataTables_length,
html[data-theme="light"] div.dataTables_wrapper div.dataTables_filter {
    color: #475569 !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    margin-bottom: 0.85rem !important;
}

/* Length Select Dropdown */
[data-theme="light"] div.dataTables_wrapper div.dataTables_length select,
html[data-theme="light"] div.dataTables_wrapper div.dataTables_length select {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 9px !important;
    color: #0f172a !important;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.2s ease !important;
    min-width: 80px !important;
}

[data-theme="light"] div.dataTables_wrapper div.dataTables_length select:focus,
html[data-theme="light"] div.dataTables_wrapper div.dataTables_length select:focus {
    border-color: #1b253c !important;
    box-shadow: 0 0 0 3px rgba(27, 37, 60, 0.12) !important;
    outline: none !important;
}

[data-theme="light"] div.dataTables_wrapper div.dataTables_length select option,
html[data-theme="light"] div.dataTables_wrapper div.dataTables_length select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* Search Box */
[data-theme="light"] div.dataTables_wrapper div.dataTables_filter input,
html[data-theme="light"] div.dataTables_wrapper div.dataTables_filter input {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    color: #0f172a !important;
    padding: 0.45rem 1rem !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.2s ease !important;
}

[data-theme="light"] div.dataTables_wrapper div.dataTables_filter input:focus,
html[data-theme="light"] div.dataTables_wrapper div.dataTables_filter input:focus {
    border-color: #1b253c !important;
    box-shadow: 0 0 0 3px rgba(27, 37, 60, 0.12) !important;
    outline: none !important;
}

[data-theme="light"] div.dataTables_wrapper div.dataTables_filter input::placeholder,
html[data-theme="light"] div.dataTables_wrapper div.dataTables_filter input::placeholder {
    color: #94a3b8 !important;
}

/* Bottom Controls: Info & Pagination */
[data-theme="light"] div.dataTables_wrapper div.dataTables_info,
html[data-theme="light"] div.dataTables_wrapper div.dataTables_info {
    color: #64748b !important;
    font-size: 0.825rem !important;
    font-weight: 500 !important;
    padding-top: 1.15rem !important;
}

[data-theme="light"] div.dataTables_wrapper div.dataTables_paginate,
html[data-theme="light"] div.dataTables_wrapper div.dataTables_paginate {
    padding-top: 0.85rem !important;
}

[data-theme="light"] div.dataTables_wrapper .pagination,
html[data-theme="light"] div.dataTables_wrapper .pagination {
    gap: 5px !important;
}

[data-theme="light"] div.dataTables_wrapper .pagination .page-item .page-link,
[data-theme="light"] .page-link,
html[data-theme="light"] div.dataTables_wrapper .pagination .page-item .page-link,
html[data-theme="light"] .page-link {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    border-radius: 8px !important;
    font-size: 0.825rem !important;
    font-weight: 600 !important;
    padding: 0.4rem 0.8rem !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.2s ease !important;
}

[data-theme="light"] div.dataTables_wrapper .pagination .page-item .page-link:hover,
[data-theme="light"] .page-link:hover,
html[data-theme="light"] div.dataTables_wrapper .pagination .page-item .page-link:hover,
html[data-theme="light"] .page-link:hover {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    transform: translateY(-1px) !important;
}

[data-theme="light"] div.dataTables_wrapper .pagination .page-item.active .page-link,
[data-theme="light"] .page-item.active .page-link,
html[data-theme="light"] div.dataTables_wrapper .pagination .page-item.active .page-link,
html[data-theme="light"] .page-item.active .page-link {
    background-color: #1b253c !important;
    border-color: #1b253c !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(27, 37, 60, 0.25) !important;
}

[data-theme="light"] div.dataTables_wrapper .pagination .page-item.disabled .page-link,
[data-theme="light"] .page-item.disabled .page-link,
html[data-theme="light"] div.dataTables_wrapper .pagination .page-item.disabled .page-link,
html[data-theme="light"] .page-item.disabled .page-link {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    opacity: 0.55 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Table Action Buttons in Light Mode */
[data-theme="light"] table.dataTable .btn-outline-secondary,
[data-theme="light"] .table-premium .btn-outline-secondary,
html[data-theme="light"] table.dataTable .btn-outline-secondary,
html[data-theme="light"] .table-premium .btn-outline-secondary {
    border-color: #cbd5e1 !important;
    color: #475569 !important;
    background-color: #ffffff !important;
}

[data-theme="light"] table.dataTable .btn-outline-secondary:hover,
[data-theme="light"] .table-premium .btn-outline-secondary:hover,
html[data-theme="light"] table.dataTable .btn-outline-secondary:hover,
html[data-theme="light"] .table-premium .btn-outline-secondary:hover {
    background-color: #1b253c !important;
    border-color: #1b253c !important;
    color: #ffffff !important;
}

[data-theme="light"] table.dataTable .btn-outline-info,
[data-theme="light"] .table-premium .btn-outline-info,
html[data-theme="light"] table.dataTable .btn-outline-info,
html[data-theme="light"] .table-premium .btn-outline-info {
    border-color: #bae6fd !important;
    color: #0284c7 !important;
    background-color: #f0f9ff !important;
}

[data-theme="light"] table.dataTable .btn-outline-info:hover,
[data-theme="light"] .table-premium .btn-outline-info:hover,
html[data-theme="light"] table.dataTable .btn-outline-info:hover,
html[data-theme="light"] .table-premium .btn-outline-info:hover {
    background-color: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
}

[data-theme="light"] table.dataTable .btn-outline-danger,
[data-theme="light"] .table-premium .btn-outline-danger,
html[data-theme="light"] table.dataTable .btn-outline-danger,
html[data-theme="light"] .table-premium .btn-outline-danger {
    border-color: #fecaca !important;
    color: #dc2626 !important;
    background-color: #fef2f2 !important;
}

[data-theme="light"] table.dataTable .btn-outline-danger:hover,
[data-theme="light"] .table-premium .btn-outline-danger:hover,
html[data-theme="light"] table.dataTable .btn-outline-danger:hover,
html[data-theme="light"] .table-premium .btn-outline-danger:hover {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   STATUS BADGES (LIGHT MODE HIGH CONTRAST)
   ========================================================================== */
/* Active / Success Status Badge */
[data-theme="light"] .badge-status.success,
[data-theme="light"] .badge.badge-status.success,
[data-theme="light"] .badge.bg-success,
[data-theme="light"] .badge.bg-success.bg-opacity-10,
[data-theme="light"] .badge.text-success,
html[data-theme="light"] .badge-status.success,
html[data-theme="light"] .badge.badge-status.success,
html[data-theme="light"] .badge.bg-success,
html[data-theme="light"] .badge.bg-success.bg-opacity-10,
html[data-theme="light"] .badge.text-success {
    background-color: #ecfdf5 !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
    font-weight: 600 !important;
    font-size: 0.775rem !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    line-height: 1.2 !important;
    padding: 0.28rem 0.7rem !important;
}

[data-theme="light"] .badge-status.success:hover,
[data-theme="light"] .badge.badge-status.success:hover,
html[data-theme="light"] .badge-status.success:hover,
html[data-theme="light"] .badge.badge-status.success:hover {
    background-color: #d1fae5 !important;
    background: #d1fae5 !important;
    border-color: #6ee7b7 !important;
    color: #065f46 !important;
}

[data-theme="light"] .badge-status.success .badge-dot,
[data-theme="light"] .badge.bg-success .badge-dot,
[data-theme="light"] .badge.badge-status.success .badge-dot,
[data-theme="light"] .badge.text-success .badge-dot,
html[data-theme="light"] .badge-status.success .badge-dot,
html[data-theme="light"] .badge.bg-success .badge-dot,
html[data-theme="light"] .badge.badge-status.success .badge-dot,
html[data-theme="light"] .badge.text-success .badge-dot {
    background-color: #10b981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
    width: 6px !important;
    height: 6px !important;
    display: inline-block !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

/* Inactive / Danger Badge */
[data-theme="light"] .badge.bg-danger,
[data-theme="light"] .badge.bg-danger.bg-opacity-10,
[data-theme="light"] .badge.text-danger,
html[data-theme="light"] .badge.bg-danger,
html[data-theme="light"] .badge.bg-danger.bg-opacity-10,
html[data-theme="light"] .badge.text-danger {
    background-color: #fef2f2 !important;
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
    font-weight: 600 !important;
    font-size: 0.775rem !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 1px 2px rgba(239, 68, 68, 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    line-height: 1.2 !important;
    padding: 0.28rem 0.7rem !important;
}

[data-theme="light"] .badge.bg-danger:hover,
html[data-theme="light"] .badge.bg-danger:hover {
    background-color: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
}

[data-theme="light"] .badge.bg-danger .badge-dot,
html[data-theme="light"] .badge.bg-danger .badge-dot {
    background-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25) !important;
    width: 6px !important;
    height: 6px !important;
    display: inline-block !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

/* On Leave / Warning Badge */
[data-theme="light"] .badge.bg-warning,
[data-theme="light"] .badge.bg-warning.bg-opacity-10,
[data-theme="light"] .badge.text-warning,
html[data-theme="light"] .badge.bg-warning,
html[data-theme="light"] .badge.bg-warning.bg-opacity-10,
html[data-theme="light"] .badge.text-warning {
    background-color: #fffbeb !important;
    background: #fffbeb !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
    font-weight: 600 !important;
    font-size: 0.775rem !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 1px 2px rgba(245, 158, 11, 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    line-height: 1.2 !important;
    padding: 0.28rem 0.7rem !important;
}

[data-theme="light"] .badge.bg-warning:hover,
html[data-theme="light"] .badge.bg-warning:hover {
    background-color: #fef3c7 !important;
    border-color: #fcd34d !important;
    color: #92400e !important;
}

[data-theme="light"] .badge.bg-warning .badge-dot,
html[data-theme="light"] .badge.bg-warning .badge-dot {
    background-color: #f59e0b !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25) !important;
    width: 6px !important;
    height: 6px !important;
    display: inline-block !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

/* Terminated / Secondary Badge */
[data-theme="light"] .badge.bg-secondary,
[data-theme="light"] .badge.bg-secondary.bg-opacity-10,
[data-theme="light"] .badge.text-secondary,
html[data-theme="light"] .badge.bg-secondary,
html[data-theme="light"] .badge.bg-secondary.bg-opacity-10,
html[data-theme="light"] .badge.text-secondary {
    background-color: #f1f5f9 !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: 600 !important;
    font-size: 0.775rem !important;
    letter-spacing: 0.3px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    line-height: 1.2 !important;
    padding: 0.28rem 0.7rem !important;
}

[data-theme="light"] .badge.bg-secondary .badge-dot,
html[data-theme="light"] .badge.bg-secondary .badge-dot {
    background-color: #64748b !important;
    box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.25) !important;
    width: 6px !important;
    height: 6px !important;
    display: inline-block !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

/* Table Button-Link Wrapper for Badges */
[data-theme="light"] table.dataTable td .btn-link,
html[data-theme="light"] table.dataTable td .btn-link {
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Dark Mode Status Badges */
[data-theme="dark"] .badge-status.success,
[data-theme="dark"] .badge.badge-status.success {
    color: #34d399 !important;
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(52, 211, 153, 0.25) !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    line-height: 1.2 !important;
    padding: 0.28rem 0.7rem !important;
}

[data-theme="dark"] .badge-status.success .badge-dot,
[data-theme="dark"] .badge.badge-status.success .badge-dot {
    background-color: #34d399 !important;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.6) !important;
}

/* ==========================================================================
   SELECT2 DROPDOWNS
   ========================================================================== */
[data-theme="light"] .select2-container--default .select2-selection--single,
[data-theme="light"] .select2-container--default .select2-selection--multiple {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #0f172a !important;
}

[data-theme="light"] .select2-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1) !important;
    color: #0f172a !important;
}

[data-theme="light"] .select2-search--dropdown .select2-search__field {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

[data-theme="light"] .select2-container--default .select2-results__option--selectable {
    color: #334155 !important;
}

[data-theme="light"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #1b253c !important;
    color: #ffffff !important;
}

[data-theme="light"] .select2-container--default .select2-results__option--selected {
    background-color: #f1f5f9 !important;
    color: #1b253c !important;
}

/* ==========================================================================
   MODALS
   ========================================================================== */
[data-theme="light"] .modal-content {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.2) !important;
}

[data-theme="light"] .modal-header {
    border-bottom: 1px solid #f1f5f9 !important;
}

[data-theme="light"] .modal-title {
    color: #0f172a !important;
}

[data-theme="light"] .modal-footer {
    border-top: 1px solid #f1f5f9 !important;
}

[data-theme="light"] .modal .btn-close-white,
[data-theme="light"] .toast .btn-close-white {
    filter: none !important;
    opacity: 0.6 !important;
}

[data-theme="light"] .modal .btn-close-white:hover,
[data-theme="light"] .toast .btn-close-white:hover {
    opacity: 1 !important;
}

/* ==========================================================================
   FULLCALENDAR (Scheduling Page)
   ========================================================================== */
[data-theme="light"] #calendar {
    --fc-page-bg-color: transparent !important;
    --fc-neutral-bg-color: #f8fafc !important;
    --fc-neutral-text-color: #64748b !important;
    --fc-border-color: #e2e8f0 !important;
    --fc-button-text-color: #1e293b !important;
    --fc-button-bg-color: #ffffff !important;
    --fc-button-border-color: #cbd5e1 !important;
    --fc-button-hover-bg-color: #f1f5f9 !important;
    --fc-button-hover-border-color: #94a3b8 !important;
    --fc-button-active-bg-color: #1b253c !important;
    --fc-button-active-border-color: #1b253c !important;
    --fc-today-bg-color: rgba(27, 37, 60, 0.05) !important;
}

[data-theme="light"] .fc-theme-standard td, 
[data-theme="light"] .fc-theme-standard th,
[data-theme="light"] .fc-theme-standard .fc-scrollgrid {
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .fc .fc-toolbar-title {
    color: #0f172a !important;
}

[data-theme="light"] .fc-col-header-cell-cushion {
    color: #1e293b !important;
    font-weight: 600 !important;
}

[data-theme="light"] .fc-daygrid-day-number {
    color: #475569 !important;
}

/* ==========================================================================
   SETTINGS TABS & PILLS
   ========================================================================== */
[data-theme="light"] #settingsTabs {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #settingsTabs .nav-link {
    color: #64748b !important;
}

[data-theme="light"] #settingsTabs .nav-link:hover {
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
}

[data-theme="light"] #settingsTabs .nav-link.active {
    background: #1b253c !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(27, 37, 60, 0.25) !important;
}

/* ==========================================================================
   SWEETALERT2 LIGHT THEME
   ========================================================================== */
[data-theme="light"] .swal2-popup.glass-card {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.15) !important;
}

[data-theme="light"] .swal2-popup .swal2-title {
    color: #0f172a !important;
}

[data-theme="light"] .swal2-popup .swal2-html-container {
    color: #64748b !important;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
[data-theme="light"] .admin-footer {
    border-top: 1px solid #e2e8f0 !important;
    color: #64748b !important;
}

[data-theme="light"] .admin-footer .version-tag {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

/* ==========================================================================
   THEME TOGGLE BUTTON COMPONENT
   ========================================================================== */
.theme-toggle-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #f8fafc;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

[data-theme="light"] .theme-toggle-btn {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #1b253c;
}

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

/* Smooth Transition on Theme Switch */
body, 
.glass-nav, 
.glass-sidebar, 
.glass-card, 
.card-premium, 
.kpi-card-custom, 
.table-premium, 
.form-control, 
.form-select,
.sidebar-link {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease !important;
}

/* Technician Profile Banner & Avatar in Light Mode */
[data-theme="light"] .tech-profile-avatar {
    border-color: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12) !important;
}

[data-theme="light"] .tech-profile-header {
    background: linear-gradient(135deg, rgba(27, 37, 60, 0.04), rgba(59, 130, 246, 0.08)) !important;
    border-color: #e2e8f0 !important;
}

/* Tooltip light styling */
[data-theme="light"] .tooltip .tooltip-inner {
    background-color: #1b253c !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.2) !important;
}

[data-theme="light"] .tooltip .tooltip-arrow::before {
    border-top-color: #1b253c !important;
    border-bottom-color: #1b253c !important;
}

/* Direct overrides for any elements that have hardcoded inline dark styles */
[data-theme="light"] div[style*="rgba(22, 22, 34"],
[data-theme="light"] form[style*="rgba(22, 22, 34"],
[data-theme="light"] .kpi-card-custom[style*="rgba(22, 22, 34"],
[data-theme="light"] .card-premium[style*="rgba(22, 22, 34"],
html[data-theme="light"] div[style*="rgba(22, 22, 34"],
html[data-theme="light"] form[style*="rgba(22, 22, 34"],
html[data-theme="light"] .kpi-card-custom,
html[data-theme="light"] .card-premium {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] input[style*="rgba(255,255,255"],
[data-theme="light"] select[style*="rgba(255,255,255"],
html[data-theme="light"] input[style*="rgba(255,255,255"],
html[data-theme="light"] select[style*="rgba(255,255,255"] {
    background-color: #f8fafc !important;
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* Input Groups in Light & Dark Mode */
[data-theme="light"] .input-group-text,
html[data-theme="light"] .input-group-text {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

[data-theme="light"] .input-group-text i,
[data-theme="light"] .input-group-text svg,
html[data-theme="light"] .input-group-text i,
html[data-theme="light"] .input-group-text svg {
    color: #334155 !important;
    stroke: #334155 !important;
    opacity: 1 !important;
}

[data-theme="dark"] .input-group-text,
html:not([data-theme="light"]) .input-group-text {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .input-group-text i,
[data-theme="dark"] .input-group-text svg,
html:not([data-theme="light"]) .input-group-text i,
html:not([data-theme="light"]) .input-group-text svg {
    color: #94a3b8 !important;
    stroke: #94a3b8 !important;
    opacity: 0.9 !important;
}

/* Sidebar Dynamic Logo Expanded & Collapsed Handling */
.glass-sidebar .sidebar-logo-img {
    object-fit: contain;
    transition: all 0.3s ease;
}

/* Light Theme: Show Light Logo, Hide Dark Logo */
[data-theme="light"] .sidebar-logo-dark {
    display: none !important;
}
[data-theme="light"] .glass-sidebar:not(.collapsed) .sidebar-logo-light.sidebar-logo-expanded {
    display: block !important;
    max-height: 50px;
    max-width: 160px;
}
[data-theme="light"] .glass-sidebar:not(.collapsed) .sidebar-logo-light.sidebar-logo-collapsed {
    display: none !important;
}
[data-theme="light"] .glass-sidebar.collapsed .sidebar-logo-light.sidebar-logo-expanded {
    display: none !important;
}
[data-theme="light"] .glass-sidebar.collapsed .sidebar-logo-light.sidebar-logo-collapsed {
    display: block !important;
    max-height: 48px !important;
    max-width: 68px !important;
    margin: 0 auto;
}

/* Dark Theme: Show Dark Logo, Hide Light Logo */
[data-theme="dark"] .sidebar-logo-light,
html:not([data-theme="light"]) .sidebar-logo-light {
    display: none !important;
}
[data-theme="dark"] .glass-sidebar:not(.collapsed) .sidebar-logo-dark.sidebar-logo-expanded,
html:not([data-theme="light"]) .glass-sidebar:not(.collapsed) .sidebar-logo-dark.sidebar-logo-expanded {
    display: block !important;
    max-height: 50px;
    max-width: 160px;
}
[data-theme="dark"] .glass-sidebar:not(.collapsed) .sidebar-logo-dark.sidebar-logo-collapsed,
html:not([data-theme="light"]) .glass-sidebar:not(.collapsed) .sidebar-logo-dark.sidebar-logo-collapsed {
    display: none !important;
}
[data-theme="dark"] .glass-sidebar.collapsed .sidebar-logo-dark.sidebar-logo-expanded,
html:not([data-theme="light"]) .glass-sidebar.collapsed .sidebar-logo-dark.sidebar-logo-expanded {
    display: none !important;
}
[data-theme="dark"] .glass-sidebar.collapsed .sidebar-logo-dark.sidebar-logo-collapsed,
html:not([data-theme="light"]) .glass-sidebar.collapsed .sidebar-logo-dark.sidebar-logo-collapsed {
    display: block !important;
    max-height: 48px !important;
    max-width: 68px !important;
    margin: 0 auto;
}

/* Login Page Theme-Specific Logo Visibility */
[data-theme="light"] .login-logo-dark {
    display: none !important;
}
[data-theme="light"] .login-logo-light {
    display: block !important;
}
[data-theme="dark"] .login-logo-light,
html:not([data-theme="light"]) .login-logo-light {
    display: none !important;
}
[data-theme="dark"] .login-logo-dark,
html:not([data-theme="light"]) .login-logo-dark {
    display: block !important;
}

/* ==========================================================================
   MODERN PAGE HEADER DESIGN SYSTEM (PROJECT-WIDE)
   ========================================================================== */
.page-header-box {
    margin-top: 1.25rem;
    margin-bottom: 3rem;
    position: relative;
}

.page-header-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-header-icon i,
.page-header-icon svg {
    width: 22px;
    height: 22px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.page-header-box:hover .page-header-icon i,
.page-header-box:hover .page-header-icon svg {
    transform: scale(1.08);
}

.page-header-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
    line-height: 1;
}

.page-header-title {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.page-header-desc {
    font-size: 0.875rem;
    line-height: 1.45;
    margin-bottom: 0;
}

.page-header-back-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-header-back-btn:hover {
    transform: translateX(-3px);
}

/* Page Header Light Theme */
[data-theme="light"] .page-header-icon {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    color: #1e293b;
}

[data-theme="light"] .page-header-eyebrow {
    color: #6366f1;
}

[data-theme="light"] .page-header-title {
    color: #0f172a;
}

[data-theme="light"] .page-header-desc {
    color: #64748b;
}

[data-theme="light"] .page-header-back-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .page-header-back-btn:hover {
    background: #1b253c;
    border-color: #1b253c;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(27, 37, 60, 0.25);
}

/* Page Header Dark Theme */
[data-theme="dark"] .page-header-icon,
html:not([data-theme="light"]) .page-header-icon {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    color: #f8fafc;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .page-header-eyebrow,
html:not([data-theme="light"]) .page-header-eyebrow {
    color: #a5b4fc;
}

[data-theme="dark"] .page-header-title,
html:not([data-theme="light"]) .page-header-title {
    color: #f8fafc;
}

[data-theme="dark"] .page-header-desc,
html:not([data-theme="light"]) .page-header-desc {
    color: #94a3b8;
}

[data-theme="dark"] .page-header-back-btn,
html:not([data-theme="light"]) .page-header-back-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f8fafc;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .page-header-back-btn:hover,
html:not([data-theme="light"]) .page-header-back-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   UNIVERSAL MODAL DESIGN & OPACITY SYSTEM (Dual Theme)
   Ensures all modal dialog surfaces are fully opaque and background page
   content never shines through in Dark Mode or Light Mode.
   ========================================================================== */
.modal-content,
.modal-content.glass-card,
.modal-content:hover,
.modal-content.glass-card:hover {
    background: #121420 !important;
    background-color: #121420 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    color: #f8fafc !important;
    transform: none !important;
}

[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-content.glass-card,
html:not([data-theme="light"]) .modal-content,
html:not([data-theme="light"]) .modal-content.glass-card {
    background: #121420 !important;
    background-color: #121420 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    color: #f8fafc !important;
}

[data-theme="light"] .modal-content,
[data-theme="light"] .modal-content.glass-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.15) !important;
    color: #0f172a !important;
}

/* Modal Header & Footer borders and backgrounds */
[data-theme="dark"] .modal-header,
html:not([data-theme="light"]) .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(18, 20, 32, 0.98) !important;
}
[data-theme="dark"] .modal-footer,
html:not([data-theme="light"]) .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(18, 20, 32, 0.98) !important;
}
[data-theme="light"] .modal-header {
    border-bottom: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
}
[data-theme="light"] .modal-footer {
    border-top: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
}

/* Backdrop: Dim the background website with good solid contrast */
.modal-backdrop.show {
    opacity: 0.65 !important;
    background-color: #050508 !important;
}
[data-theme="dark"] .modal-backdrop.show,
html:not([data-theme="light"]) .modal-backdrop.show {
    opacity: 0.75 !important;
    background-color: #000000 !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* SweetAlert Popups Solid Surfaces */
[data-theme="dark"] .swal2-popup,
[data-theme="dark"] .swal2-popup.glass-card,
html:not([data-theme="light"]) .swal2-popup,
html:not([data-theme="light"]) .swal2-popup.glass-card {
    background: #121420 !important;
    background-color: #121420 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}