/* ============================================
   Sequal Loan Manager - Theme Variables
   CSS Custom Properties for consistent theming
   ============================================ */

:root {
    /* ----------------------------------------
       Color Palette - Sequal Brand (Cyan/Teal)
       Based on Sequal logo colors
       ---------------------------------------- */

    /* Primary Cyan/Teal Palette (from Sequal logo) */
    --sl-primary-50: #E6FFFA;
    --sl-primary-100: #B2F5EA;
    --sl-primary-200: #81E6D9;
    --sl-primary-300: #4FD1C5;
    --sl-primary-400: #38B2AC;
    --sl-primary-500: #00A0B0;  /* Main brand color from logo */
    --sl-primary-600: #008B9A;
    --sl-primary-700: #0077B6;  /* Darker accent blue */
    --sl-primary-800: #005F73;
    --sl-primary-900: #003D4D;

    /* Secondary Gray Palette */
    --sl-gray-50: #f8f9fa;
    --sl-gray-100: #f1f3f5;
    --sl-gray-200: #e9ecef;
    --sl-gray-300: #dee2e6;
    --sl-gray-400: #ced4da;
    --sl-gray-500: #adb5bd;
    --sl-gray-600: #6c757d;
    --sl-gray-700: #495057;
    --sl-gray-800: #343a40;
    --sl-gray-900: #212529;

    /* Semantic Colors */
    --sl-success: #198754;
    --sl-success-light: #d1e7dd;
    --sl-warning: #ffc107;
    --sl-warning-light: #fff3cd;
    --sl-danger: #dc3545;
    --sl-danger-light: #f8d7da;
    --sl-info: #0dcaf0;
    --sl-info-light: #cff4fc;

    /* Accent Colors */
    --sl-accent-active: #00A0B0;  /* Cyan accent for active states (matches brand) */
    --sl-accent-highlight: #38B2AC;

    /* ----------------------------------------
       Sidebar Theme (Dark Charcoal - NO purple)
       ---------------------------------------- */
    --sl-sidebar-bg: #1A202C;
    --sl-sidebar-gradient-start: #1A202C;
    --sl-sidebar-gradient-end: #2D3748;  /* Charcoal gradient */
    --sl-sidebar-text: #A0AEC0;
    --sl-sidebar-text-hover: #E2E8F0;
    --sl-sidebar-text-active: #00A0B0;
    --sl-sidebar-hover-bg: rgba(255, 255, 255, 0.05);
    --sl-sidebar-active-bg: rgba(0, 160, 176, 0.15);
    --sl-sidebar-active-border: #00A0B0;
    --sl-sidebar-section-text: #718096;
    --sl-sidebar-width: 260px;
    --sl-sidebar-collapsed-width: 68px;

    /* ----------------------------------------
       Surface Colors (Light Theme Default)
       ---------------------------------------- */
    --sl-bg-body: #f7f7f7;
    --sl-bg-surface: #ffffff;
    --sl-bg-elevated: #ffffff;
    --sl-bg-muted: #f1f3f5;
    --sl-bg-subtle: #f8f9fa;

    /* ----------------------------------------
       Text Colors
       ---------------------------------------- */
    --sl-text-primary: #212529;
    --sl-text-secondary: #6c757d;
    --sl-text-muted: #adb5bd;
    --sl-text-inverse: #ffffff;
    --sl-text-link: #00A0B0;
    --sl-text-link-hover: #008B9A;

    /* ----------------------------------------
       Border Colors
       ---------------------------------------- */
    --sl-border-color: #dee2e6;
    --sl-border-light: #e9ecef;
    --sl-border-dark: #ced4da;
    --sl-border-focus: #00A0B0;

    /* ----------------------------------------
       Typography
       ---------------------------------------- */
    --sl-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --sl-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    /* Font Sizes */
    --sl-font-size-xs: 0.75rem;    /* 12px */
    --sl-font-size-sm: 0.875rem;   /* 14px */
    --sl-font-size-base: 1rem;     /* 16px */
    --sl-font-size-lg: 1.125rem;   /* 18px */
    --sl-font-size-xl: 1.25rem;    /* 20px */
    --sl-font-size-2xl: 1.5rem;    /* 24px */
    --sl-font-size-3xl: 1.875rem;  /* 30px */
    --sl-font-size-4xl: 2.25rem;   /* 36px */

    /* Font Weights */
    --sl-font-weight-light: 300;
    --sl-font-weight-normal: 400;
    --sl-font-weight-medium: 500;
    --sl-font-weight-semibold: 600;
    --sl-font-weight-bold: 700;

    /* Line Heights */
    --sl-line-height-tight: 1.25;
    --sl-line-height-normal: 1.5;
    --sl-line-height-relaxed: 1.75;

    /* ----------------------------------------
       Spacing Scale (4px base)
       ---------------------------------------- */
    --sl-space-0: 0;
    --sl-space-1: 0.25rem;   /* 4px */
    --sl-space-2: 0.5rem;    /* 8px */
    --sl-space-3: 0.75rem;   /* 12px */
    --sl-space-4: 1rem;      /* 16px */
    --sl-space-5: 1.25rem;   /* 20px */
    --sl-space-6: 1.5rem;    /* 24px */
    --sl-space-8: 2rem;      /* 32px */
    --sl-space-10: 2.5rem;   /* 40px */
    --sl-space-12: 3rem;     /* 48px */
    --sl-space-16: 4rem;     /* 64px */
    --sl-space-20: 5rem;     /* 80px */

    /* ----------------------------------------
       Border Radius
       ---------------------------------------- */
    --sl-radius-none: 0;
    --sl-radius-sm: 0.125rem;  /* 2px */
    --sl-radius-base: 0.25rem; /* 4px */
    --sl-radius-md: 0.375rem;  /* 6px */
    --sl-radius-lg: 0.5rem;    /* 8px */
    --sl-radius-xl: 0.75rem;   /* 12px */
    --sl-radius-2xl: 1rem;     /* 16px */
    --sl-radius-full: 9999px;

    /* ----------------------------------------
       Shadows
       ---------------------------------------- */
    --sl-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --sl-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --sl-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --sl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --sl-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --sl-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --sl-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

    /* Focus ring shadow */
    --sl-shadow-focus: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--sl-border-focus);

    /* ----------------------------------------
       Transitions
       ---------------------------------------- */
    --sl-transition-fast: 150ms ease;
    --sl-transition-base: 200ms ease;
    --sl-transition-slow: 300ms ease;
    --sl-transition-slower: 500ms ease;

    /* ----------------------------------------
       Z-Index Scale
       ---------------------------------------- */
    --sl-z-dropdown: 1000;
    --sl-z-sticky: 1020;
    --sl-z-fixed: 1030;
    --sl-z-modal-backdrop: 1040;
    --sl-z-modal: 1050;
    --sl-z-popover: 1060;
    --sl-z-tooltip: 1070;
    --sl-z-toast: 1080;
    --sl-z-command-palette: 9999;

    /* ----------------------------------------
       Component-Specific
       ---------------------------------------- */

    /* Cards */
    --sl-card-bg: var(--sl-bg-surface);
    --sl-card-border: var(--sl-border-color);
    --sl-card-shadow: var(--sl-shadow-base);
    --sl-card-radius: var(--sl-radius-lg);

    /* Buttons */
    --sl-btn-primary-bg: var(--sl-primary-500);
    --sl-btn-primary-hover: var(--sl-primary-600);
    --sl-btn-primary-active: var(--sl-primary-700);
    --sl-btn-primary-text: var(--sl-text-inverse);

    /* Inputs */
    --sl-input-bg: var(--sl-bg-surface);
    --sl-input-border: var(--sl-border-color);
    --sl-input-focus-border: var(--sl-primary-500);
    --sl-input-placeholder: var(--sl-text-muted);

    /* Tables */
    --sl-table-header-bg: var(--sl-bg-muted);
    --sl-table-border: var(--sl-border-light);
    --sl-table-stripe-bg: var(--sl-bg-subtle);
    --sl-table-hover-bg: rgba(0, 0, 0, 0.02);

    /* Top Bar */
    --sl-topbar-bg: #f7f7f7;
    --sl-topbar-border: #d6d5d5;
    --sl-topbar-height: 3.5rem;
}

/* ============================================
   Dark Theme
   ============================================ */
[data-theme="dark"] {
    /* Surface Colors - slightly lighter for better contrast */
    --sl-bg-body: #1a1d21;
    --sl-bg-surface: #22262b;
    --sl-bg-elevated: #2d3238;
    --sl-bg-muted: #343a40;
    --sl-bg-subtle: #3d4349;
    --sl-bg-hover: rgba(255, 255, 255, 0.08);

    /* Text Colors - improved contrast */
    --sl-text-primary: #f1f3f5;
    --sl-text-secondary: #ced4da;
    --sl-text-muted: #9ca3af;
    --sl-text-inverse: #1a1d21;
    --sl-text-link: #6ea8fe;
    --sl-text-link-hover: #9ec5fe;

    /* Border Colors - slightly lighter for visibility */
    --sl-border-color: #4d5459;
    --sl-border-light: #3d4349;
    --sl-border-dark: #5d6469;

    /* Semantic Colors - adjusted for dark backgrounds */
    --sl-success: #4ade80;
    --sl-success-light: rgba(74, 222, 128, 0.15);
    --sl-warning: #fbbf24;
    --sl-warning-light: rgba(251, 191, 36, 0.15);
    --sl-danger: #f87171;
    --sl-danger-light: rgba(248, 113, 113, 0.15);
    --sl-info: #38bdf8;
    --sl-info-light: rgba(56, 189, 248, 0.15);

    /* Shadows (more subtle in dark mode) */
    --sl-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --sl-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
    --sl-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --sl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --sl-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);

    /* Focus ring for dark mode */
    --sl-shadow-focus: 0 0 0 0.1rem #22262b, 0 0 0 0.25rem var(--sl-primary-400);

    /* Card */
    --sl-card-bg: var(--sl-bg-elevated);
    --sl-card-border: var(--sl-border-color);
    --sl-card-shadow: var(--sl-shadow-md);

    /* Top Bar */
    --sl-topbar-bg: #22262b;
    --sl-topbar-border: #4d5459;

    /* Tables */
    --sl-table-header-bg: var(--sl-bg-muted);
    --sl-table-border: var(--sl-border-color);
    --sl-table-stripe-bg: var(--sl-bg-subtle);
    --sl-table-hover-bg: rgba(255, 255, 255, 0.05);

    /* Inputs */
    --sl-input-bg: var(--sl-bg-surface);
    --sl-input-border: var(--sl-border-color);
    --sl-input-placeholder: var(--sl-text-muted);

    /* Buttons - adjusted for dark mode */
    --sl-btn-primary-bg: var(--sl-primary-500);
    --sl-btn-primary-hover: var(--sl-primary-400);
    --sl-btn-primary-active: var(--sl-primary-600);

    /* Sidebar adjustments for dark mode */
    --sl-sidebar-gradient-start: #0F1419;
    --sl-sidebar-gradient-end: #1A202C;
    --sl-sidebar-text: #b8c1cc;
    --sl-sidebar-text-hover: #f1f3f5;
}

/* ============================================
   System Preference Detection
   Automatically applies dark theme if user
   prefers dark color scheme
   ============================================ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Only apply if not explicitly set to light */
        --sl-bg-body: #121416;
        --sl-bg-surface: #1a1d21;
        --sl-bg-elevated: #22262b;
        --sl-bg-muted: #2d3238;
        --sl-bg-subtle: #343a40;
        --sl-text-primary: #e9ecef;
        --sl-text-secondary: #adb5bd;
        --sl-text-muted: #6c757d;
        --sl-text-link: #6ea8fe;
        --sl-border-color: #3d4349;
        --sl-border-light: #2d3238;
        --sl-card-bg: var(--sl-bg-elevated);
        --sl-topbar-bg: #1a1d21;
        --sl-topbar-border: #3d4349;
    }
}

/* ============================================
   High Contrast Mode (Accessibility)
   ============================================ */
@media (prefers-contrast: high) {
    :root {
        --sl-border-color: #000000;
        --sl-text-primary: #000000;
        --sl-text-secondary: #333333;
    }

    [data-theme="dark"] {
        --sl-border-color: #ffffff;
        --sl-text-primary: #ffffff;
        --sl-text-secondary: #cccccc;
    }
}

/* ============================================
   Dark Theme - Bootstrap Component Overrides
   ============================================ */
[data-theme="dark"] {
    /* Body background */
    background-color: #1a1d21;
    color: #e9ecef;
}

[data-theme="dark"] body {
    background-color: #1a1d21;
    color: #e9ecef;
}

/* Bootstrap Cards */
[data-theme="dark"] .card {
    background-color: #2d3238;
    border-color: #4d5459;
    color: #e9ecef;
}

[data-theme="dark"] .card-body {
    background-color: #2d3238;
    color: #e9ecef;
}

[data-theme="dark"] .card-header {
    background-color: #343a40;
    border-color: #4d5459;
    color: #e9ecef;
}

[data-theme="dark"] .card-footer {
    background-color: #343a40;
    border-color: #4d5459;
    color: #e9ecef;
}

/* KPI Cards specific */
[data-theme="dark"] .kpi-card {
    background-color: #2d3238 !important;
    color: #e9ecef;
}

[data-theme="dark"] .kpi-card h2,
[data-theme="dark"] .kpi-card h3,
[data-theme="dark"] .kpi-card h4 {
    color: #f1f3f5;
}

/* Text utilities */
[data-theme="dark"] .text-muted {
    color: #9ca3af !important;
}

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

[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: #f1f3f5;
}

[data-theme="dark"] p {
    color: #ced4da;
}

/* Tables */
[data-theme="dark"] .table {
    color: #e9ecef;
    border-color: #4d5459;
}

[data-theme="dark"] .table > thead {
    background-color: #343a40;
    color: #f1f3f5;
}

[data-theme="dark"] .table > tbody > tr {
    background-color: #2d3238;
    border-color: #4d5459;
}

[data-theme="dark"] .table > tbody > tr:nth-of-type(odd) {
    background-color: #343a40;
}

[data-theme="dark"] .table-hover > tbody > tr:hover {
    background-color: #3d4349;
}

/* Form controls */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #2d3238;
    border-color: #4d5459;
    color: #e9ecef;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: #343a40;
    border-color: var(--sl-primary-500);
    color: #f1f3f5;
}

[data-theme="dark"] .form-control::placeholder {
    color: #6c757d;
}

/* Login card form controls - keep light even in dark mode */
[data-theme="dark"] .login-card .form-control,
.login-card .form-control {
    background-color: #ffffff !important;
    border: 1px solid #d0d7de !important;
    border-radius: 12px !important;
    color: #333333 !important;
    text-align: center !important;
}

[data-theme="dark"] .login-card .form-control:focus,
.login-card .form-control:focus {
    background-color: #ffffff !important;
    border-color: #007bff !important;
    border-radius: 12px !important;
    color: #333333 !important;
    text-align: center !important;
}

[data-theme="dark"] .login-card .form-control::placeholder,
.login-card .form-control::placeholder {
    color: transparent !important;
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background-color: #2d3238;
    border-color: #4d5459;
    color: #e9ecef;
}

[data-theme="dark"] .dropdown-item {
    color: #e9ecef;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: #3d4349;
    color: #f1f3f5;
}

[data-theme="dark"] .dropdown-divider {
    border-color: #4d5459;
}

/* Modals */
[data-theme="dark"] .modal-content {
    background-color: #2d3238;
    border-color: #4d5459;
    color: #e9ecef;
}

[data-theme="dark"] .modal-header {
    background-color: #343a40;
    border-color: #4d5459;
}

[data-theme="dark"] .modal-footer {
    background-color: #343a40;
    border-color: #4d5459;
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Alerts */
[data-theme="dark"] .alert {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Badges */
[data-theme="dark"] .badge.bg-light {
    background-color: #3d4349 !important;
    color: #e9ecef !important;
}

/* Buttons */
[data-theme="dark"] .btn-outline-secondary {
    color: #ced4da;
    border-color: #5d6469;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: #3d4349;
    border-color: #6c757d;
    color: #f1f3f5;
}

[data-theme="dark"] .btn-light {
    background-color: #3d4349;
    border-color: #4d5459;
    color: #e9ecef;
}

[data-theme="dark"] .btn-light:hover {
    background-color: #4d5459;
    border-color: #5d6469;
    color: #f1f3f5;
}

/* Content area background */
[data-theme="dark"] .content {
    background-color: #1a1d21;
}

[data-theme="dark"] main {
    background-color: #1a1d21;
}

/* Top row / toolbar area */
[data-theme="dark"] .top-row {
    background-color: #22262b;
    border-color: #4d5459;
}

/* Shadow adjustments for dark mode */
[data-theme="dark"] .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important;
}

/* ============================================
   Syncfusion Components - Dark Mode
   Comprehensive overrides for all SF components
   ============================================ */

/* Grid Container */
[data-theme="dark"] .e-grid {
    background-color: #2d3238 !important;
    color: #e9ecef !important;
    border-color: #4d5459 !important;
}

[data-theme="dark"] .e-grid .e-gridcontent {
    background-color: #2d3238 !important;
}

[data-theme="dark"] .e-grid .e-table {
    background-color: #2d3238 !important;
}

/* Grid Header */
[data-theme="dark"] .e-grid .e-gridheader {
    background-color: #343a40 !important;
    border-color: #4d5459 !important;
}

[data-theme="dark"] .e-grid .e-headercell,
[data-theme="dark"] .e-grid .e-headercelldiv {
    background-color: #343a40 !important;
    color: #f1f3f5 !important;
    border-color: #4d5459 !important;
}

[data-theme="dark"] .e-grid .e-headercell .e-headertext {
    color: #f1f3f5 !important;
}

[data-theme="dark"] .e-grid .e-icons {
    color: #9ca3af !important;
}

/* Grid Rows */
[data-theme="dark"] .e-grid .e-row,
[data-theme="dark"] .e-grid .e-row td {
    background-color: #2d3238 !important;
    color: #e9ecef !important;
    border-color: #4d5459 !important;
}

[data-theme="dark"] .e-grid .e-altrow,
[data-theme="dark"] .e-grid .e-altrow td {
    background-color: #343a40 !important;
    color: #e9ecef !important;
}

[data-theme="dark"] .e-grid .e-rowcell {
    background-color: inherit !important;
    color: #e9ecef !important;
    border-color: #4d5459 !important;
}

/* Grid Row Hover */
[data-theme="dark"] .e-grid .e-row:hover,
[data-theme="dark"] .e-grid .e-row:hover td,
[data-theme="dark"] .e-grid .e-row:hover .e-rowcell {
    background-color: #3d4349 !important;
}

/* Grid Row Selection */
[data-theme="dark"] .e-grid .e-selectionbackground,
[data-theme="dark"] .e-grid .e-active {
    background-color: rgba(0, 160, 176, 0.2) !important;
}

/* Grid Toolbar */
[data-theme="dark"] .e-grid .e-toolbar {
    background-color: #343a40 !important;
    border-color: #4d5459 !important;
}

[data-theme="dark"] .e-grid .e-toolbar-items {
    background-color: #343a40 !important;
}

[data-theme="dark"] .e-grid .e-toolbar-item {
    background-color: transparent !important;
}

/* Grid Pager */
[data-theme="dark"] .e-grid .e-pager,
[data-theme="dark"] .e-pager {
    background-color: #343a40 !important;
    color: #e9ecef !important;
    border-color: #4d5459 !important;
}

[data-theme="dark"] .e-pager .e-pagercontainer {
    background-color: #343a40 !important;
}

[data-theme="dark"] .e-pager .e-numericitem,
[data-theme="dark"] .e-pager .e-numericcontainer a {
    background-color: #2d3238 !important;
    color: #e9ecef !important;
    border-color: #4d5459 !important;
}

[data-theme="dark"] .e-pager .e-numericitem:hover,
[data-theme="dark"] .e-pager .e-numericcontainer a:hover {
    background-color: #3d4349 !important;
}

[data-theme="dark"] .e-pager .e-currentitem,
[data-theme="dark"] .e-pager .e-active {
    background-color: var(--sl-primary-500) !important;
    color: #fff !important;
}

[data-theme="dark"] .e-pager .e-icons {
    color: #9ca3af !important;
}

[data-theme="dark"] .e-pager .e-pagerexternalmsg,
[data-theme="dark"] .e-pager .e-pagerconstant {
    color: #9ca3af !important;
}

/* Grid Filter */
[data-theme="dark"] .e-grid .e-filterbar,
[data-theme="dark"] .e-grid .e-filterbarcell {
    background-color: #343a40 !important;
    border-color: #4d5459 !important;
}

[data-theme="dark"] .e-grid .e-filterbarcelldiv {
    background-color: #2d3238 !important;
}

[data-theme="dark"] .e-grid .e-flmenu-input,
[data-theme="dark"] .e-grid .e-search input {
    background-color: #2d3238 !important;
    color: #e9ecef !important;
    border-color: #4d5459 !important;
}

/* Input Components */
[data-theme="dark"] .e-input-group,
[data-theme="dark"] .e-input-group.e-control-wrapper,
[data-theme="dark"] .e-float-input,
[data-theme="dark"] .e-float-input.e-control-wrapper {
    background-color: #2d3238 !important;
    border-color: #4d5459 !important;
}

[data-theme="dark"] .e-input-group input.e-input,
[data-theme="dark"] .e-input-group.e-control-wrapper input.e-input,
[data-theme="dark"] .e-float-input input,
[data-theme="dark"] .e-float-input.e-control-wrapper input,
[data-theme="dark"] input.e-input,
[data-theme="dark"] .e-textbox {
    background-color: #2d3238 !important;
    color: #e9ecef !important;
    border-color: #4d5459 !important;
}

[data-theme="dark"] .e-input-group input.e-input::placeholder,
[data-theme="dark"] .e-float-input input::placeholder {
    color: #6c757d !important;
}

[data-theme="dark"] .e-input-group .e-input-group-icon,
[data-theme="dark"] .e-input-group.e-control-wrapper .e-input-group-icon {
    background-color: #343a40 !important;
    color: #9ca3af !important;
    border-color: #4d5459 !important;
}

[data-theme="dark"] .e-input-group:not(.e-disabled):not(.e-float-icon-left)::before,
[data-theme="dark"] .e-input-group:not(.e-disabled):not(.e-float-icon-left)::after {
    background-color: var(--sl-primary-500) !important;
}

/* Dropdown Components */
[data-theme="dark"] .e-dropdownbase,
[data-theme="dark"] .e-ddl,
[data-theme="dark"] .e-dropdown-btn {
    background-color: #2d3238 !important;
    border-color: #4d5459 !important;
}

[data-theme="dark"] .e-dropdownbase .e-list-item,
[data-theme="dark"] .e-ddl .e-list-item {
    background-color: #2d3238 !important;
    color: #e9ecef !important;
}

[data-theme="dark"] .e-dropdownbase .e-list-item:hover,
[data-theme="dark"] .e-dropdownbase .e-list-item.e-hover,
[data-theme="dark"] .e-ddl .e-list-item:hover,
[data-theme="dark"] .e-ddl .e-list-item.e-hover {
    background-color: #3d4349 !important;
    color: #f1f3f5 !important;
}

[data-theme="dark"] .e-dropdownbase .e-list-item.e-active,
[data-theme="dark"] .e-ddl .e-list-item.e-active {
    background-color: rgba(0, 160, 176, 0.2) !important;
    color: var(--sl-primary-400) !important;
}

/* Popup / List containers */
[data-theme="dark"] .e-popup,
[data-theme="dark"] .e-popup-open,
[data-theme="dark"] .e-list-parent,
[data-theme="dark"] .e-dropdownbase .e-content,
[data-theme="dark"] .e-ddl-content {
    background-color: #2d3238 !important;
    border-color: #4d5459 !important;
    color: #e9ecef !important;
}

/* Button Components */
[data-theme="dark"] .e-btn {
    background-color: #3d4349 !important;
    border-color: #5d6469 !important;
    color: #e9ecef !important;
}

[data-theme="dark"] .e-btn:hover {
    background-color: #4d5459 !important;
    border-color: #6c757d !important;
}

[data-theme="dark"] .e-btn.e-primary {
    background-color: var(--sl-primary-500) !important;
    border-color: var(--sl-primary-500) !important;
    color: #fff !important;
}

[data-theme="dark"] .e-btn.e-primary:hover {
    background-color: var(--sl-primary-400) !important;
    border-color: var(--sl-primary-400) !important;
}

[data-theme="dark"] .e-btn.e-outline {
    background-color: transparent !important;
    border-color: #5d6469 !important;
    color: #e9ecef !important;
}

[data-theme="dark"] .e-btn.e-outline:hover {
    background-color: #3d4349 !important;
}

[data-theme="dark"] .e-btn.e-info {
    background-color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
}

[data-theme="dark"] .e-btn.e-success {
    background-color: #198754 !important;
    border-color: #198754 !important;
}

[data-theme="dark"] .e-btn.e-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #000 !important;
}

[data-theme="dark"] .e-btn.e-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

/* Dialog / Modal Components */
[data-theme="dark"] .e-dialog {
    background-color: #2d3238 !important;
    border-color: #4d5459 !important;
    color: #e9ecef !important;
}

[data-theme="dark"] .e-dialog .e-dlg-header-content {
    background-color: #343a40 !important;
    border-color: #4d5459 !important;
}

[data-theme="dark"] .e-dialog .e-dlg-header {
    color: #f1f3f5 !important;
}

[data-theme="dark"] .e-dialog .e-dlg-content {
    background-color: #2d3238 !important;
    color: #e9ecef !important;
}

[data-theme="dark"] .e-dialog .e-footer-content {
    background-color: #343a40 !important;
    border-color: #4d5459 !important;
}

[data-theme="dark"] .e-dlg-overlay {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* Tab Components */
[data-theme="dark"] .e-tab {
    background-color: #2d3238 !important;
}

[data-theme="dark"] .e-tab .e-tab-header {
    background-color: #343a40 !important;
    border-color: #4d5459 !important;
}

[data-theme="dark"] .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    color: #9ca3af !important;
}

[data-theme="dark"] .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: var(--sl-primary-400) !important;
}

[data-theme="dark"] .e-tab .e-content {
    background-color: #2d3238 !important;
    color: #e9ecef !important;
}

/* Tooltip */
[data-theme="dark"] .e-tooltip-wrap {
    background-color: #343a40 !important;
    border-color: #4d5459 !important;
    color: #e9ecef !important;
}

/* DatePicker / DateTimePicker */
[data-theme="dark"] .e-calendar,
[data-theme="dark"] .e-datepicker {
    background-color: #2d3238 !important;
    border-color: #4d5459 !important;
}

[data-theme="dark"] .e-calendar .e-header,
[data-theme="dark"] .e-datepicker .e-header {
    background-color: #343a40 !important;
    color: #f1f3f5 !important;
}

[data-theme="dark"] .e-calendar .e-content td,
[data-theme="dark"] .e-datepicker .e-content td {
    color: #e9ecef !important;
}

[data-theme="dark"] .e-calendar .e-content td:hover,
[data-theme="dark"] .e-datepicker .e-content td:hover {
    background-color: #3d4349 !important;
}

[data-theme="dark"] .e-calendar .e-content td.e-selected,
[data-theme="dark"] .e-datepicker .e-content td.e-selected {
    background-color: var(--sl-primary-500) !important;
    color: #fff !important;
}

/* Chart components */
[data-theme="dark"] .e-chart,
[data-theme="dark"] .e-accumulationchart {
    background-color: transparent !important;
}

[data-theme="dark"] .e-chart-focused {
    background-color: transparent !important;
}

/* Spinner */
[data-theme="dark"] .e-spinner-pane {
    background-color: rgba(26, 29, 33, 0.8) !important;
}

/* NumericTextBox */
[data-theme="dark"] .e-numerictextbox {
    background-color: #2d3238 !important;
    color: #e9ecef !important;
    border-color: #4d5459 !important;
}

/* Switch / Toggle */
[data-theme="dark"] .e-switch-wrapper {
    background-color: #4d5459 !important;
}

[data-theme="dark"] .e-switch-wrapper.e-switch-active {
    background-color: var(--sl-primary-500) !important;
}

/* TreeView */
[data-theme="dark"] .e-treeview {
    background-color: #2d3238 !important;
    color: #e9ecef !important;
}

[data-theme="dark"] .e-treeview .e-list-item {
    background-color: #2d3238 !important;
    color: #e9ecef !important;
}

[data-theme="dark"] .e-treeview .e-list-item:hover {
    background-color: #3d4349 !important;
}

/* Accordion */
[data-theme="dark"] .e-accordion {
    background-color: #2d3238 !important;
    border-color: #4d5459 !important;
}

[data-theme="dark"] .e-accordion .e-acrdn-header {
    background-color: #343a40 !important;
    color: #f1f3f5 !important;
    border-color: #4d5459 !important;
}

[data-theme="dark"] .e-accordion .e-acrdn-panel {
    background-color: #2d3238 !important;
    color: #e9ecef !important;
}

/* ============================================
   Bootstrap Component Overrides - Additional
   ============================================ */

/* Breadcrumbs */
[data-theme="dark"] .breadcrumb {
    background-color: transparent;
}

[data-theme="dark"] .breadcrumb-item a {
    color: var(--sl-primary-400) !important;
}

[data-theme="dark"] .breadcrumb-item a:hover {
    color: var(--sl-primary-300) !important;
}

[data-theme="dark"] .breadcrumb-item.active {
    color: #e9ecef !important;
}

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: #6c757d !important;
}

/* List Groups */
[data-theme="dark"] .list-group-item {
    background-color: #2d3238;
    border-color: #4d5459;
    color: #e9ecef;
}

[data-theme="dark"] .list-group-item:hover {
    background-color: #3d4349;
}

[data-theme="dark"] .list-group-item.active {
    background-color: var(--sl-primary-500);
    border-color: var(--sl-primary-500);
}

/* Nav Tabs and Pills */
[data-theme="dark"] .nav-tabs {
    border-color: #4d5459;
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: #9ca3af;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: #4d5459 #4d5459 transparent;
    color: #e9ecef;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: #2d3238;
    border-color: #4d5459 #4d5459 #2d3238;
    color: #f1f3f5;
}

[data-theme="dark"] .nav-pills .nav-link {
    color: #9ca3af;
}

[data-theme="dark"] .nav-pills .nav-link:hover {
    background-color: #3d4349;
    color: #e9ecef;
}

[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--sl-primary-500);
    color: #fff;
}

/* Progress Bars */
[data-theme="dark"] .progress {
    background-color: #3d4349;
}

/* Pagination */
[data-theme="dark"] .pagination .page-link {
    background-color: #2d3238;
    border-color: #4d5459;
    color: #e9ecef;
}

[data-theme="dark"] .pagination .page-link:hover {
    background-color: #3d4349;
    border-color: #5d6469;
    color: #f1f3f5;
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--sl-primary-500);
    border-color: var(--sl-primary-500);
    color: #fff;
}

[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: #22262b;
    border-color: #3d4349;
    color: #6c757d;
}

/* Small/Muted Text */
[data-theme="dark"] small,
[data-theme="dark"] .small {
    color: #9ca3af !important;
}

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

/* HR */
[data-theme="dark"] hr {
    border-color: #4d5459;
    opacity: 1;
}

/* Code and Pre */
[data-theme="dark"] code {
    color: #f08d49;
    background-color: #22262b;
}

[data-theme="dark"] pre {
    color: #e9ecef;
    background-color: #22262b;
    border-color: #4d5459;
}

/* Placeholder text */
[data-theme="dark"] ::placeholder {
    color: #6c757d !important;
    opacity: 1;
}

/* Links in general */
[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.nav-item):not(.breadcrumb-item a) {
    color: var(--sl-primary-400);
}

[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.nav-item):hover {
    color: var(--sl-primary-300);
}

/* Login card links - keep consistent color in both themes */
.login-card .login-links a,
[data-theme="dark"] .login-card .login-links a {
    color: #007bff !important;
}

.login-card .login-links a:hover,
[data-theme="dark"] .login-card .login-links a:hover {
    color: #0056b3 !important;
}