/* =========================================================================
   PayrollSoft Web - Global Enterprise Multi-Theme Engine
   Supports:
     - ☀️ Clean Light (Enterprise White / High-Contrast Crisp)
     - 🌙 Dark Navy (Executive Fintech / Slate Dark)
     - 🌊 Royal Blue (Classic Corporate Navy)
   ========================================================================= */

/* =========================================================================
   1. CSS ROOT VARIABLES
   ========================================================================= */
:root,
[data-theme="light"],
.theme-light {
    --erp-theme-name: "light";
    --erp-bg-body: #f1f5f9;
    --erp-bg-toolbar: #ffffff;
    --erp-bg-sidebar: #ffffff;
    --erp-border-sidebar: #cbd5e1;
    --erp-sidebar-toprow: #f1f5f9;
    --erp-bg-card: #ffffff;
    --erp-bg-card-header: #f8fafc;
    --erp-bg-card-hover: #f1f5f9;
    --erp-bg-input: #ffffff;
    --erp-bg-input-readonly: #f8fafc;
    --erp-border-color: #cbd5e1;
    --erp-border-card: #e2e8f0;
    --erp-border-subtle: #f1f5f9;
    --erp-text-main: #0f172a;
    --erp-text-muted: #64748b;
    --erp-text-secondary: #475569;
    --erp-table-header-bg: #f8fafc;
    --erp-table-row-hover: #f1f5f9;
    --erp-accent-blue: #2563eb;
    --erp-accent-cyan: #0284c7;
    --erp-accent-emerald: #059669;
}


[data-theme="desktop"],
.theme-desktop {
    --erp-theme-name: "desktop";
    --erp-bg-body: #f0f4f9;
    --erp-bg-toolbar: #ffffff;
    --erp-bg-sidebar: #ffffff;
    --erp-border-sidebar: #cbd5e1;
    --erp-sidebar-toprow: #e8f0fe;
    --erp-bg-card: #ffffff;
    --erp-bg-card-header: #e8f0fe;
    --erp-bg-card-hover: #f8fafc;
    --erp-bg-input: #ffffff;
    --erp-bg-input-readonly: #f8fafc;
    --erp-border-color: #cbd5e1;
    --erp-border-card: #cbd5e1;
    --erp-border-subtle: #e2e8f0;
    --erp-text-main: #0f172a;
    --erp-text-muted: #64748b;
    --erp-text-secondary: #334155;
    --erp-table-header-bg: #f1f5f9;
    --erp-table-row-hover: #f8fafc;
    --erp-accent-blue: #1d4ed8;
    --erp-accent-cyan: #0284c7;
    --erp-accent-emerald: #059669;
}

[data-theme="dark"],
.theme-dark {
    --erp-theme-name: "dark";
    --erp-bg-body: #0b0f19;
    --erp-bg-toolbar: #0f172a;
    --erp-bg-sidebar: #0f172a;
    --erp-border-sidebar: #1f293d;
    --erp-sidebar-toprow: #090d16;
    --erp-bg-card: #111827;
    --erp-bg-card-header: #162032;
    --erp-bg-card-hover: rgba(30, 41, 59, 0.5);
    --erp-bg-input: #162032;
    --erp-bg-input-readonly: #0f172a;
    --erp-border-color: #334155;
    --erp-border-card: #1f293d;
    --erp-border-subtle: rgba(255, 255, 255, 0.05);
    --erp-text-main: #f8fafc;
    --erp-text-muted: #94a3b8;
    --erp-text-secondary: #cbd5e1;
    --erp-table-header-bg: #0d1322;
    --erp-table-row-hover: #1a273f;
    --erp-accent-blue: #3b82f6;
    --erp-accent-cyan: #06b6d4;
    --erp-accent-emerald: #10b981;
}

[data-theme="blue"],
.theme-blue {
    --erp-theme-name: "blue";
    --erp-bg-body: #07152b;
    --erp-bg-toolbar: #0a1f40;
    --erp-bg-sidebar: #081d3d;
    --erp-border-sidebar: rgba(59, 130, 246, 0.25);
    --erp-sidebar-toprow: #051329;
    --erp-bg-card: #0e274e;
    --erp-bg-card-header: #133363;
    --erp-bg-card-hover: rgba(59, 130, 246, 0.15);
    --erp-bg-input: #0a1f40;
    --erp-bg-input-readonly: #07152b;
    --erp-border-color: rgba(59, 130, 246, 0.35);
    --erp-border-card: rgba(59, 130, 246, 0.22);
    --erp-border-subtle: rgba(59, 130, 246, 0.1);
    --erp-text-main: #ffffff;
    --erp-text-muted: #93c5fd;
    --erp-text-secondary: #bfdbfe;
    --erp-table-header-bg: #0a1f40;
    --erp-table-row-hover: rgba(59, 130, 246, 0.2);
    --erp-accent-blue: #3b82f6;
    --erp-accent-cyan: #38bdf8;
    --erp-accent-emerald: #34d399;
}

/* =========================================================================
   2. GLOBAL BODY & PAGE WRAPPER
   ========================================================================= */
body, html {
    background-color: var(--erp-bg-body) !important;
    color: var(--erp-text-main) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.page, main, article.content,
.modern-erp-page, .holiday-page-container, .attendance-container {
    background-color: var(--erp-bg-body) !important;
    color: var(--erp-text-main) !important;
}

/* Sidebar Navigation theme synchronization */
.sidebar {
    background: var(--erp-bg-sidebar) !important;
    border-right: 1px solid var(--erp-border-sidebar) !important;
}

.sidebar .top-row {
    background-color: var(--erp-sidebar-toprow) !important;
    border-bottom: 1px solid var(--erp-border-sidebar) !important;
}

/* =========================================================================
   3. TOP ERP TOOLBAR & CONTROLS
   ========================================================================= */
.erp-top-toolbar {
    background-color: var(--erp-bg-toolbar) !important;
    border-bottom: 1px solid var(--erp-border-card) !important;
    transition: all 0.2s ease;
}

.erp-top-toolbar .text-dark {
    color: var(--erp-text-main) !important;
}

.erp-top-toolbar .bg-light,
.app-theme-pill {
    background-color: var(--erp-bg-card-header) !important;
    border-color: var(--erp-border-card) !important;
    color: var(--erp-text-main) !important;
}

.app-theme-select {
    color: var(--erp-text-main) !important;
}

.app-theme-select option {
    background-color: var(--erp-bg-card) !important;
    color: var(--erp-text-main) !important;
}

/* =========================================================================
   4. CARDS, PANELS & CONTAINERS (EMPLOYEE MASTER, HOLIDAY, MASTERS)
   ========================================================================= */
.card,
.erp-card,
.content-card,
.bg-white {
    background-color: var(--erp-bg-card) !important;
    border-color: var(--erp-border-card) !important;
    color: var(--erp-text-main) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.bg-light {
    background-color: var(--erp-bg-card-header) !important;
    border-color: var(--erp-border-card) !important;
    color: var(--erp-text-main) !important;
}

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

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

.card-body {
    color: var(--erp-text-main) !important;
}

/* Stat Badges */
.erp-stat-badge,
.erp-theme-picker {
    background-color: var(--erp-bg-card-header) !important;
    border-color: var(--erp-border-card) !important;
    color: var(--erp-text-main) !important;
}

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

.erp-stat-badge .text-dark {
    color: var(--erp-text-main) !important;
}

/* HolidayMaster Specific Target Chips */
.target-pill-btn {
    background-color: var(--erp-bg-card-header) !important;
    border-color: var(--erp-border-color) !important;
    color: var(--erp-text-main) !important;
}

.target-pill-btn:hover {
    background-color: var(--erp-bg-card-hover) !important;
    border-color: var(--erp-accent-blue) !important;
}

.target-badge-chip {
    background-color: var(--erp-bg-card-header) !important;
    color: var(--erp-text-main) !important;
    border: 1px solid var(--erp-border-card);
}

/* =========================================================================
   5. TABS SYSTEM (EMPLOYEES.RAZOR)
   ========================================================================= */
.erp-tabs-bar {
    border-bottom: 2px solid var(--erp-border-card) !important;
    background-color: var(--erp-bg-card) !important;
}

.erp-tab-btn {
    color: var(--erp-text-muted) !important;
    background: transparent !important;
}

.erp-tab-btn:hover {
    color: var(--erp-text-main) !important;
    border-bottom-color: var(--erp-border-color) !important;
}

.erp-tab-btn.active {
    color: var(--erp-accent-blue) !important;
    border-bottom-color: var(--erp-accent-blue) !important;
    background-color: rgba(37, 99, 235, 0.08) !important;
}

/* =========================================================================
   6. TEXT BOXES, INPUTS, SELECTS & CONTROLS (CRITICAL MATCHING)
   ========================================================================= */
.form-control,
.form-select,
.erp-form-control,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="email"],
select,
textarea {
    background-color: var(--erp-bg-input) !important;
    color: var(--erp-text-main) !important;
    border: 1px solid var(--erp-border-color) !important;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

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

.form-control:focus,
.form-select:focus,
.erp-form-control:focus,
input:focus,
select:focus,
textarea:focus {
    background-color: var(--erp-bg-input) !important;
    border-color: var(--erp-accent-blue) !important;
    color: var(--erp-text-main) !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25) !important;
    outline: none !important;
}

.form-control[readonly],
.form-control:disabled,
.erp-form-control[readonly],
.erp-form-control:disabled,
input:not([type="checkbox"]):not([type="radio"])[readonly],
input:not([type="checkbox"]):not([type="radio"]):disabled,
select:disabled {
    background-color: var(--erp-bg-input-readonly) !important;
    border-color: var(--erp-border-card) !important;
    color: var(--erp-text-muted) !important;
}

/* =========================================================================
   6B. CHECKBOXES, RADIOS & FORM SWITCHES (CRISP HIGH-CONTRAST ENGINE)
   ========================================================================= */
.form-check-input {
    cursor: pointer;
    border: 1.5px solid #64748b !important;
    background-color: #ffffff;
    transition: all 0.15s ease-in-out;
}

/* Explicit Crisp White SVG Checkmark for all Checkboxes (No weird circle-in-box) */
.form-check-input[type="checkbox"]:checked,
input[type="checkbox"].form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.2' d='m4.5 10 4 4.2 7-7.7'/%3e%3c/svg%3e") !important;
    background-position: center !important;
    background-size: 11px 11px !important;
    background-repeat: no-repeat !important;
    border-radius: 4px !important;
}

/* Light Theme Checkbox (Clean Light High-Contrast) */
:root .form-check-input,
[data-theme="light"] .form-check-input,
.theme-light .form-check-input {
    border: 1.5px solid #64748b !important;
    background-color: #ffffff;
}

:root .form-check-input:checked,
[data-theme="light"] .form-check-input:checked,
.theme-light .form-check-input:checked {
    background-color: #2563eb !important;
    border-color: #1d4ed8 !important;
}

/* Dark Theme Checkbox */
[data-theme="dark"] .form-check-input,
.theme-dark .form-check-input {
    border: 1.5px solid #64748b !important;
    background-color: #1e293b !important;
}

[data-theme="dark"] .form-check-input:checked,
.theme-dark .form-check-input:checked {
    background-color: #3b82f6 !important;
    border-color: #60a5fa !important;
}

/* Blue Theme Checkbox */
[data-theme="blue"] .form-check-input,
.theme-blue .form-check-input {
    border: 1.5px solid rgba(59, 130, 246, 0.6) !important;
    background-color: #0d2244 !important;
}

[data-theme="blue"] .form-check-input:checked,
.theme-blue .form-check-input:checked {
    background-color: #3b82f6 !important;
    border-color: #60a5fa !important;
}

/* Disabled Checkboxes & Labels - Keep High Contrast, Never Fade Out */
.form-check-input:disabled {
    opacity: 0.9 !important;
    cursor: not-allowed;
}

.form-check-input[disabled] ~ .form-check-label,
.form-check-input:disabled ~ .form-check-label {
    opacity: 1 !important;
    color: var(--erp-text-main) !important;
    cursor: default;
}

:root .form-check-input:disabled:not(:checked),
[data-theme="light"] .form-check-input:disabled:not(:checked),
.theme-light .form-check-input:disabled:not(:checked) {
    background-color: #f1f5f9 !important;
    border: 1.5px solid #94a3b8 !important;
}

:root .form-check-input:disabled:checked,
[data-theme="light"] .form-check-input:disabled:checked,
.theme-light .form-check-input:disabled:checked {
    background-color: #2563eb !important;
    border-color: #1d4ed8 !important;
}

[data-theme="dark"] .form-check-input:disabled:not(:checked),
.theme-dark .form-check-input:disabled:not(:checked) {
    background-color: #0f172a !important;
    border: 1.5px solid #475569 !important;
}

[data-theme="dark"] .form-check-input:disabled:checked,
.theme-dark .form-check-input:disabled:checked {
    background-color: #3b82f6 !important;
    border-color: #60a5fa !important;
}

[data-theme="blue"] .form-check-input:disabled:not(:checked),
.theme-blue .form-check-input:disabled:not(:checked) {
    background-color: #07152b !important;
    border: 1.5px solid rgba(59, 130, 246, 0.5) !important;
}

[data-theme="blue"] .form-check-input:disabled:checked,
.theme-blue .form-check-input:disabled:checked {
    background-color: #3b82f6 !important;
    border-color: #60a5fa !important;
}

/* =========================================================================
   FORM SWITCHES / TOGGLE PILLS (Clean, High-Contrast Visibility)
   ========================================================================= */
.form-switch .form-check-input {
    width: 2.3em !important;
    min-width: 2.3em !important;
    height: 1.25em !important;
    border-radius: 2em !important;
    margin-top: 0.1em;
    background-position: left center;
}

/* Light Theme Switch Track (Unchecked & Checked) */
:root .form-switch .form-check-input,
[data-theme="light"] .form-switch .form-check-input,
.theme-light .form-switch .form-check-input {
    background-color: #cbd5e1 !important;
    border: 1.5px solid #64748b !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23475569'/%3e%3c/svg%3e") !important;
}

:root .form-switch .form-check-input:checked,
[data-theme="light"] .form-switch .form-check-input:checked,
.theme-light .form-switch .form-check-input:checked {
    background-color: #2563eb !important;
    border-color: #1d4ed8 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}

/* Dark Theme Switch Track */
[data-theme="dark"] .form-switch .form-check-input,
.theme-dark .form-switch .form-check-input {
    background-color: #1e293b !important;
    border: 1.5px solid #64748b !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2394a3b8'/%3e%3c/svg%3e") !important;
}

[data-theme="dark"] .form-switch .form-check-input:checked,
.theme-dark .form-switch .form-check-input:checked {
    background-color: #3b82f6 !important;
    border-color: #60a5fa !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}

/* Blue Theme Switch Track */
[data-theme="blue"] .form-switch .form-check-input,
.theme-blue .form-switch .form-check-input {
    background-color: #0d2244 !important;
    border: 1.5px solid rgba(59, 130, 246, 0.6) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2393c5fd'/%3e%3c/svg%3e") !important;
}

[data-theme="blue"] .form-switch .form-check-input:checked,
.theme-blue .form-switch .form-check-input:checked {
    background-color: #3b82f6 !important;
    border-color: #60a5fa !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}

/* Disabled Switch Track */
.form-switch .form-check-input:disabled {
    opacity: 0.9 !important;
}

:root .form-switch .form-check-input:disabled:not(:checked),
[data-theme="light"] .form-switch .form-check-input:disabled:not(:checked),
.theme-light .form-switch .form-check-input:disabled:not(:checked) {
    background-color: #e2e8f0 !important;
    border: 1.5px solid #94a3b8 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2364748b'/%3e%3c/svg%3e") !important;
}

:root .form-switch .form-check-input:disabled:checked,
[data-theme="light"] .form-switch .form-check-input:disabled:checked,
.theme-light .form-switch .form-check-input:disabled:checked {
    background-color: #2563eb !important;
    border: 1.5px solid #1d4ed8 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}

[data-theme="dark"] .form-switch .form-check-input:disabled:not(:checked),
.theme-dark .form-switch .form-check-input:disabled:not(:checked) {
    background-color: #1e293b !important;
    border: 1.5px solid #475569 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2364748b'/%3e%3c/svg%3e") !important;
}

[data-theme="dark"] .form-switch .form-check-input:disabled:checked,
.theme-dark .form-switch .form-check-input:disabled:checked {
    background-color: #3b82f6 !important;
    border: 1.5px solid #60a5fa !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}

[data-theme="blue"] .form-switch .form-check-input:disabled:not(:checked),
.theme-blue .form-switch .form-check-input:disabled:not(:checked) {
    background-color: #0b1d3a !important;
    border: 1.5px solid rgba(59, 130, 246, 0.4) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2360a5fa'/%3e%3c/svg%3e") !important;
}

[data-theme="blue"] .form-switch .form-check-input:disabled:checked,
.theme-blue .form-switch .form-check-input:disabled:checked {
    background-color: #3b82f6 !important;
    border-color: #60a5fa !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}

/* Switch & Checkbox Cards / Items (Ensure sharp border in all themes) */
.p-2.border.rounded-3.bg-light {
    border: 1px solid #cbd5e1 !important;
    background-color: #f8fafc !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .p-2.border.rounded-3.bg-light,
.theme-dark .p-2.border.rounded-3.bg-light {
    border: 1px solid #334155 !important;
    background-color: #162032 !important;
}

[data-theme="blue"] .p-2.border.rounded-3.bg-light,
.theme-blue .p-2.border.rounded-3.bg-light {
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    background-color: #0e274e !important;
}

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

/* Custom Month select in toolbar */
.month-select {
    cursor: pointer;
}

/* =========================================================================
   7. TYPOGRAPHY & LABELS
   ========================================================================= */
label,
.erp-form-label,
.form-label {
    color: var(--erp-text-secondary) !important;
    font-weight: 600;
}

.text-dark,
.text-black,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--erp-text-main) !important;
}

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

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

/* =========================================================================
   8. DATA TABLES & ALLOWANCES GRIDS (HIGH CONTRAST & LEGIBILITY)
   ========================================================================= */
.table,
.table-responsive .table,
.erp-allowance-table,
.attendance-table {
    --bs-table-bg: var(--erp-bg-card) !important;
    --bs-table-color: var(--erp-text-main) !important;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02) !important;
    --bs-table-striped-color: var(--erp-text-main) !important;
    --bs-table-hover-bg: var(--erp-table-row-hover) !important;
    --bs-table-hover-color: var(--erp-text-main) !important;
    --bs-table-border-color: var(--erp-border-subtle) !important;
    background-color: var(--erp-bg-card) !important;
    color: var(--erp-text-main) !important;
    border-color: var(--erp-border-card) !important;
}

/* Force Table Cell Background and eliminate Bootstrap inset box-shadow */
.table > :not(caption) > * > *,
.table tbody tr td,
.table tbody tr th,
.table th,
.table td,
.erp-allowance-table > :not(caption) > * > *,
.erp-allowance-table tbody tr td,
.erp-allowance-table tbody tr th,
.erp-allowance-table th,
.erp-allowance-table td,
.attendance-table > :not(caption) > * > *,
.attendance-table tbody tr td,
.attendance-table tbody tr th,
.attendance-table th,
.attendance-table td {
    background-color: var(--erp-bg-card) !important;
    box-shadow: none !important;
    color: var(--erp-text-main) !important;
    border-color: var(--erp-border-subtle) !important;
}

/* Table Header */
.table thead th,
.table thead.table-light th,
.table-light,
.table-light th,
.table-light td,
.erp-allowance-table thead th,
.erp-allowance-table thead.table-light th {
    background-color: var(--erp-table-header-bg) !important;
    color: var(--erp-text-muted) !important;
    border-bottom: 1px solid var(--erp-border-card) !important;
    border-color: var(--erp-border-card) !important;
    box-shadow: none !important;
    font-weight: 700;
}

/* Table Footer */
.table tfoot th,
.table tfoot td,
.table tfoot.table-light th,
.table tfoot.table-light td,
.erp-allowance-table tfoot th,
.erp-allowance-table tfoot td {
    background-color: var(--erp-table-header-bg) !important;
    color: var(--erp-text-main) !important;
    border-top: 1px solid var(--erp-border-card) !important;
    border-color: var(--erp-border-card) !important;
    box-shadow: none !important;
    font-weight: 700;
}

.table tbody tr,
.erp-allowance-table tbody tr {
    background-color: var(--erp-bg-card) !important;
    color: var(--erp-text-main) !important;
    border-bottom: 1px solid var(--erp-border-subtle) !important;
}

.table tbody tr td .text-dark,
.table tbody tr td span.text-dark,
.table td .text-dark,
.table td span.text-dark,
.erp-allowance-table td .text-dark,
.erp-allowance-table td span.text-dark {
    color: var(--erp-text-main) !important;
}

.table tbody tr td .text-muted,
.erp-allowance-table td .text-muted {
    color: var(--erp-text-muted) !important;
}

.table-hover tbody tr:hover > *,
.table tbody tr:hover > *,
.table-hover tbody tr:hover,
.hover-bg-light:hover,
.erp-allowance-table tbody tr:hover > *,
.erp-allowance-table tbody tr:hover {
    background-color: var(--erp-table-row-hover) !important;
    color: var(--erp-text-main) !important;
}
    color: var(--erp-text-main) !important;
}

/* =========================================================================
   9. MODALS, POPUPS & DROPDOWNS
   ========================================================================= */
.modal-content {
    background-color: var(--erp-bg-card) !important;
    border: 1px solid var(--erp-border-color) !important;
    color: var(--erp-text-main) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5) !important;
}

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

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

.dropdown-menu {
    background-color: var(--erp-bg-card) !important;
    border: 1px solid var(--erp-border-color) !important;
    color: var(--erp-text-main) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

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

.dropdown-item:hover {
    background-color: var(--erp-table-row-hover) !important;
    color: var(--erp-text-main) !important;
}

/* =========================================================================
   10. LOAN ENTRY LIGHT / BLUE ADAPTATION
   ========================================================================= */
[data-theme="light"] .fintech-dashboard-wrapper,
.theme-light .fintech-dashboard-wrapper {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

[data-theme="light"] .fintech-top-header,
.theme-light .fintech-top-header {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

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

[data-theme="light"] .fintech-top-header p,
.theme-light .fintech-top-header p {
    color: #64748b !important;
}

[data-theme="light"] .fintech-company-pill,
.theme-light .fintech-company-pill {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

[data-theme="light"] .fintech-month-subpill,
.theme-light .fintech-month-subpill {
    background: #e2e8f0 !important;
    color: #1e40af !important;
}

[data-theme="light"] .fintech-card,
.theme-light .fintech-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .fintech-card-header,
.theme-light .fintech-card-header {
    background: #f8fafc !important;
    border-bottom-color: #e2e8f0 !important;
}

[data-theme="light"] .fintech-card-header h5,
.theme-light .fintech-card-header h5 {
    color: #0f172a !important;
}

[data-theme="light"] .fintech-field-label,
.theme-light .fintech-field-label {
    color: #475569 !important;
}

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

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

[data-theme="light"] .tenure-chip,
.theme-light .tenure-chip {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}

[data-theme="light"] .tenure-chip.active,
.theme-light .tenure-chip.active {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

[data-theme="light"] .emi-glow-badge,
.theme-light .emi-glow-badge {
    background: #f0fdf4 !important;
    border-color: #86efac !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08) !important;
}

[data-theme="light"] .emi-glow-badge .text-white,
.theme-light .emi-glow-badge .text-white {
    color: #0f172a !important;
}

[data-theme="light"] .selected-employee-fintech-card,
.theme-light .selected-employee-fintech-card {
    background: #f8fafc !important;
    border-color: #bfdbfe !important;
}

[data-theme="light"] .selected-employee-fintech-card h6,
.theme-light .selected-employee-fintech-card h6 {
    color: #0f172a !important;
}

[data-theme="light"] .interest-toggle-box,
.theme-light .interest-toggle-box {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .fintech-kpi-card,
.theme-light .fintech-kpi-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .fintech-kpi-card .kpi-number,
.theme-light .fintech-kpi-card .kpi-number {
    color: #0f172a !important;
}

[data-theme="light"] .fintech-kpi-card .kpi-tag,
.theme-light .fintech-kpi-card .kpi-tag {
    color: #64748b !important;
}

[data-theme="light"] .fintech-table thead th,
.theme-light .fintech-table thead th {
    background: #f8fafc !important;
    color: #475569 !important;
    border-bottom-color: #e2e8f0 !important;
}

[data-theme="light"] .fintech-table tbody tr,
.theme-light .fintech-table tbody tr {
    background-color: #ffffff !important;
    border-bottom-color: #f1f5f9 !important;
}

[data-theme="light"] .fintech-table tbody tr:hover,
.theme-light .fintech-table tbody tr:hover {
    background: #f8fafc !important;
}

[data-theme="light"] .fintech-table tbody td,
.theme-light .fintech-table tbody td {
    color: #1e293b !important;
}

[data-theme="light"] .fintech-table tbody td .text-white,
.theme-light .fintech-table tbody td .text-white {
    color: #0f172a !important;
}

[data-theme="light"] .fintech-type-badge,
.theme-light .fintech-type-badge {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .fintech-tab-group,
.theme-light .fintech-tab-group {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .fintech-tab-group .tab-btn,
.theme-light .fintech-tab-group .tab-btn {
    color: #64748b !important;
}

[data-theme="light"] .fintech-tab-group .tab-btn.active,
.theme-light .fintech-tab-group .tab-btn.active {
    background: #2563eb !important;
    color: #ffffff !important;
}

/* =========================================================================
   11. NAVIGATION CONTROLS, BTN-LIGHT & ERP REIMBURSEMENT THEME ENGINE
   ========================================================================= */
[data-theme="dark"] .btn-light,
.theme-dark .btn-light,
[data-theme="blue"] .btn-light,
.theme-blue .btn-light {
    background-color: var(--erp-bg-card-header) !important;
    border-color: var(--erp-border-color) !important;
    color: var(--erp-text-main) !important;
}

[data-theme="dark"] .btn-light:hover,
.theme-dark .btn-light:hover,
[data-theme="blue"] .btn-light:hover,
.theme-blue .btn-light:hover {
    background-color: var(--erp-bg-card-hover) !important;
    border-color: var(--erp-accent-blue) !important;
    color: var(--erp-text-main) !important;
}

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

.erp-nav-btn:hover {
    background-color: var(--erp-bg-card-hover) !important;
    border-color: var(--erp-accent-blue) !important;
    color: var(--erp-text-main) !important;
}



/* =========================================================================
   12. DESKTOP THEME - COMPREHENSIVE BOX SYMMETRY & FORM STYLING
   Directly matched to user reference: media_1792769421996_0ece806c.png
   ========================================================================= */

/* 12A. Cards & Box Containers */
.theme-desktop .card,
.theme-desktop .erp-card,
.theme-desktop .content-card,
[data-theme="desktop"] .card,
[data-theme="desktop"] .erp-card,
[data-theme="desktop"] .content-card {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* 12B. Card Section Header Banner (Signature Ice-Blue Header from Screenshot) */
.theme-desktop .card-header,
.theme-desktop .erp-card-header,
[data-theme="desktop"] .card-header,
[data-theme="desktop"] .erp-card-header {
    background: #e8f0fe !important;
    border-bottom: 1px solid #cbd5e1 !important;
    color: #1e3a8a !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    padding: 9px 14px !important;
    border-top-left-radius: 7px !important;
    border-top-right-radius: 7px !important;
}

.theme-desktop .card-header .bi,
.theme-desktop .card-header .fa,
.theme-desktop .erp-card-header .bi,
[data-theme="desktop"] .card-header .bi,
[data-theme="desktop"] .erp-card-header .bi {
    color: #1d4ed8 !important;
}

/* Badge inside Card Header (e.g. "11 Heads Defined", "F2", "F5") */
.theme-desktop .card-header .badge,
.theme-desktop .erp-card-header .badge,
[data-theme="desktop"] .card-header .badge,
[data-theme="desktop"] .erp-card-header .badge {
    background-color: #dbeafe !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    padding: 3px 8px !important;
}

/* 12C. Symmetrical 4-KPI / Summary Top Cards */
.theme-desktop .erp-stat-badge,
.theme-desktop .kpi-card,
.theme-desktop .fintech-kpi-card,
.theme-desktop .summary-box,
[data-theme="desktop"] .erp-stat-badge,
[data-theme="desktop"] .kpi-card,
[data-theme="desktop"] .fintech-kpi-card,
[data-theme="desktop"] .summary-box {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.theme-desktop .erp-stat-badge .text-muted,
.theme-desktop .kpi-card .text-muted,
[data-theme="desktop"] .erp-stat-badge .text-muted {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #64748b !important;
}

.theme-desktop .erp-stat-badge .text-dark,
.theme-desktop .kpi-card .text-dark,
[data-theme="desktop"] .erp-stat-badge .text-dark {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

/* 12D. Disciplined Tab Navigation (Replacing multi-color button mess with cohesive Desktop Tabs) */
.theme-desktop .erp-tabs-bar,
[data-theme="desktop"] .erp-tabs-bar {
    background: transparent !important;
    border-bottom: 1.5px solid #cbd5e1 !important;
    padding: 6px 0 10px 0 !important;
    gap: 6px !important;
}

.theme-desktop .erp-tab-chip,
[data-theme="desktop"] .erp-tab-chip {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    padding: 6px 14px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.15s ease !important;
}

.theme-desktop .erp-tab-chip:hover,
[data-theme="desktop"] .erp-tab-chip:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

.theme-desktop .erp-tab-chip.active,
[data-theme="desktop"] .erp-tab-chip.active {
    background: #e8f0fe !important;
    border: 1.5px solid #2563eb !important;
    color: #1d4ed8 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.15) !important;
}

.theme-desktop .erp-tab-chip .erp-tab-icon,
[data-theme="desktop"] .erp-tab-chip .erp-tab-icon {
    color: #2563eb !important;
    margin-right: 6px !important;
}

/* 12E. Tables & Allowance Grids */
.theme-desktop .table thead th,
.theme-desktop .erp-allowance-table thead th,
.theme-desktop .attendance-table thead th,
[data-theme="desktop"] .table thead th,
[data-theme="desktop"] .erp-allowance-table thead th,
[data-theme="desktop"] .attendance-table thead th {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 1.5px solid #cbd5e1 !important;
    border-top: none !important;
    padding: 8px 10px !important;
}

.theme-desktop .table tbody tr td,
.theme-desktop .erp-allowance-table tbody tr td,
.theme-desktop .attendance-table tbody tr td,
[data-theme="desktop"] .table tbody tr td,
[data-theme="desktop"] .erp-allowance-table tbody tr td,
[data-theme="desktop"] .attendance-table tbody tr td {
    background-color: #ffffff !important;
    border-bottom: 1px solid #eef2f6 !important;
    color: #1e293b !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
    vertical-align: middle !important;
}

.theme-desktop .table tbody tr:hover td,
.theme-desktop .erp-allowance-table tbody tr:hover td,
[data-theme="desktop"] .table tbody tr:hover td,
[data-theme="desktop"] .erp-allowance-table tbody tr:hover td {
    background-color: #f8fafc !important;
}

/* Active Row in Table (e.g. TDS Active Row) */
.theme-desktop .table tbody tr.active td,
.theme-desktop .erp-allowance-table tbody tr.active td,
[data-theme="desktop"] .table tbody tr.active td,
[data-theme="desktop"] .erp-allowance-table tbody tr.active td {
    background-color: #eff6ff !important;
    border-left: 3px solid #2563eb !important;
}

/* Inputs Inside Tables */
.theme-desktop .table input,
.theme-desktop .erp-allowance-table input,
.theme-desktop .table select,
.theme-desktop .erp-allowance-table select,
[data-theme="desktop"] .table input,
[data-theme="desktop"] .erp-allowance-table input {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    padding: 3px 6px !important;
    height: 28px !important;
}

.theme-desktop .table input:focus,
.theme-desktop .erp-allowance-table input:focus,
[data-theme="desktop"] .table input:focus,
[data-theme="desktop"] .erp-allowance-table input:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}

/* 12F. Buttons & Action CTAs */
.theme-desktop .btn-primary,
[data-theme="desktop"] .btn-primary {
    background-color: #1d4ed8 !important;
    border-color: #1e40af !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

.theme-desktop .btn-primary:hover,
[data-theme="desktop"] .btn-primary:hover {
    background-color: #1e40af !important;
    border-color: #172554 !important;
}

.theme-desktop .btn-secondary,
.theme-desktop .btn-light,
.theme-desktop .btn-outline-secondary,
[data-theme="desktop"] .btn-secondary,
[data-theme="desktop"] .btn-light,
[data-theme="desktop"] .btn-outline-secondary {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

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

/* 12G. Form Controls Across All Pages */
.theme-desktop .form-control,
.theme-desktop .form-select,
[data-theme="desktop"] .form-control,
[data-theme="desktop"] .form-select {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.theme-desktop .form-control:focus,
.theme-desktop .form-select:focus,
[data-theme="desktop"] .form-control:focus,
[data-theme="desktop"] .form-select:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}

.theme-desktop label,
.theme-desktop .form-label,
[data-theme="desktop"] label,
[data-theme="desktop"] .form-label {
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-bottom: 3px !important;
}

/* 12H. Modals & Dialogs (Clean White Modal with Ice-Blue Header) */
.theme-desktop .modal-content,
[data-theme="desktop"] .modal-content {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden;
}

.theme-desktop .modal-header,
[data-theme="desktop"] .modal-header {
    background-color: #e8f0fe !important;
    border-bottom: 1px solid #cbd5e1 !important;
    color: #1e3a8a !important;
    font-weight: 700 !important;
    padding: 12px 18px !important;
}

.theme-desktop .modal-footer,
[data-theme="desktop"] .modal-footer {
    background-color: #f8fafc !important;
    border-top: 1px solid #cbd5e1 !important;
    padding: 10px 18px !important;
}

/* 12I. Badges & Status Indicators */
.theme-desktop .badge.bg-success,
.theme-desktop .badge-success,
[data-theme="desktop"] .badge.bg-success {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
}

.theme-desktop .badge.bg-primary,
.theme-desktop .badge-primary,
[data-theme="desktop"] .badge.bg-primary {
    background-color: #dbeafe !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
}


/* 12J. Search Bar, Filter & Autocomplete Dropdown (Desktop Theme) */
.search-nav-card,
.theme-desktop .search-nav-card,
[data-theme="desktop"] .search-nav-card,
.card:has(.search-dropdown-menu),
.card:has(.erp-search-dropdown),
.card:has(.fintech-autocomplete-menu),
.erp-card:has(.erp-search-dropdown),
.erp-card:has(.search-dropdown-menu) {
    overflow: visible !important;
    position: relative !important;
    z-index: 1050 !important;
}

.search-nav-card .card-body,
.theme-desktop .search-nav-card .card-body,
[data-theme="desktop"] .search-nav-card .card-body,
.card:has(.search-dropdown-menu) .card-body,
.card:has(.erp-search-dropdown) .card-body {
    overflow: visible !important;
}

.search-dropdown-menu,
.theme-desktop .search-dropdown-menu,
[data-theme="desktop"] .search-dropdown-menu,
.erp-search-dropdown,
.theme-desktop .erp-search-dropdown,
[data-theme="desktop"] .erp-search-dropdown,
.theme-desktop .fintech-autocomplete-menu,
[data-theme="desktop"] .fintech-autocomplete-menu {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.16) !important;
    z-index: 9999 !important;
}

.search-item-row:hover,
.theme-desktop .search-item-row:hover,
[data-theme="desktop"] .search-item-row:hover,
.theme-desktop .autocomplete-entry:hover,
[data-theme="desktop"] .autocomplete-entry:hover {
    background-color: #e8f0fe !important;
    color: #1e3a8a !important;
    cursor: pointer !important;
}

.theme-desktop .fintech-autocomplete-menu .text-white,
[data-theme="desktop"] .fintech-autocomplete-menu .text-white {
    color: #0f172a !important;
}

.theme-desktop .fintech-autocomplete-menu .text-white-50,
[data-theme="desktop"] .fintech-autocomplete-menu .text-white-50 {
    color: #64748b !important;
}


/* =========================================================================
   12K. DESKTOP THEME - SIDEBAR & NAVIGATION STYLING (Google Stitch Light Style)
   ========================================================================= */
[data-theme="desktop"] .sidebar,
.theme-desktop .sidebar,
[data-theme="light"] .sidebar,
.theme-light .sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid #cbd5e1 !important;
}

[data-theme="desktop"] .sidebar .top-row,
.theme-desktop .sidebar .top-row,
[data-theme="light"] .sidebar .top-row,
.theme-light .sidebar .top-row {
    background: #e8f0fe !important;
    border-bottom: 1px solid #cbd5e1 !important;
}

[data-theme="desktop"] .sidebar .navbar-brand,
.theme-desktop .sidebar .navbar-brand,
[data-theme="light"] .sidebar .navbar-brand,
.theme-light .sidebar .navbar-brand {
    color: #1e3a8a !important;
}

[data-theme="desktop"] .sidebar .brand-text,
.theme-desktop .sidebar .brand-text,
[data-theme="light"] .sidebar .brand-text,
.theme-light .sidebar .brand-text {
    color: #1e3a8a !important;
    font-weight: 700 !important;
}

[data-theme="desktop"] .sidebar .pin-btn,
.theme-desktop .sidebar .pin-btn,
[data-theme="light"] .sidebar .pin-btn,
.theme-light .sidebar .pin-btn {
    color: #1d4ed8 !important;
}

[data-theme="desktop"] .sidebar .nav-top-link,
.theme-desktop .sidebar .nav-top-link,
[data-theme="light"] .sidebar .nav-top-link,
.theme-light .sidebar .nav-top-link {
    color: #1e293b !important;
}

[data-theme="desktop"] .sidebar .nav-top-link:hover,
.theme-desktop .sidebar .nav-top-link:hover,
[data-theme="light"] .sidebar .nav-top-link:hover,
.theme-light .sidebar .nav-top-link:hover {
    background-color: #e8f0fe !important;
    color: #1d4ed8 !important;
}

[data-theme="desktop"] .sidebar .nav-top-link.active,
.theme-desktop .sidebar .nav-top-link.active,
[data-theme="light"] .sidebar .nav-top-link.active,
.theme-light .sidebar .nav-top-link.active {
    background: linear-gradient(90deg, #1d4ed8 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3) !important;
}

[data-theme="desktop"] .sidebar .tree-parent-btn,
.theme-desktop .sidebar .tree-parent-btn,
[data-theme="light"] .sidebar .tree-parent-btn,
.theme-light .sidebar .tree-parent-btn {
    color: #1e293b !important;
}

[data-theme="desktop"] .sidebar .tree-parent-btn:hover,
.theme-desktop .sidebar .tree-parent-btn:hover,
[data-theme="light"] .sidebar .tree-parent-btn:hover,
.theme-light .sidebar .tree-parent-btn:hover {
    background-color: #e8f0fe !important;
    color: #1d4ed8 !important;
}

[data-theme="desktop"] .sidebar .tree-parent-btn.expanded,
.theme-desktop .sidebar .tree-parent-btn.expanded,
[data-theme="light"] .sidebar .tree-parent-btn.expanded,
.theme-light .sidebar .tree-parent-btn.expanded {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #1e3a8a !important;
}

[data-theme="desktop"] .sidebar .tree-chevron,
.theme-desktop .sidebar .tree-chevron,
[data-theme="light"] .sidebar .tree-chevron,
.theme-light .sidebar .tree-chevron {
    color: #64748b !important;
}

[data-theme="desktop"] .sidebar .tree-guide-line,
.theme-desktop .sidebar .tree-guide-line,
[data-theme="light"] .sidebar .tree-guide-line,
.theme-light .sidebar .tree-guide-line {
    background: linear-gradient(180deg, #93c5fd 0%, rgba(147, 197, 253, 0.3) 100%) !important;
}

[data-theme="desktop"] .sidebar .tree-child-item,
.theme-desktop .sidebar .tree-child-item,
[data-theme="light"] .sidebar .tree-child-item,
.theme-light .sidebar .tree-child-item {
    color: #475569 !important;
}

[data-theme="desktop"] .sidebar .tree-child-item:hover,
.theme-desktop .sidebar .tree-child-item:hover,
[data-theme="light"] .sidebar .tree-child-item:hover,
.theme-light .sidebar .tree-child-item:hover {
    background-color: #e8f0fe !important;
    color: #1d4ed8 !important;
}

[data-theme="desktop"] .sidebar .tree-child-item.active,
.theme-desktop .sidebar .tree-child-item.active,
[data-theme="light"] .sidebar .tree-child-item.active,
.theme-light .sidebar .tree-child-item.active {
    background: linear-gradient(90deg, #1d4ed8 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35) !important;
}

[data-theme="desktop"] .sidebar .tree-dot,
.theme-desktop .sidebar .tree-dot,
[data-theme="light"] .sidebar .tree-dot,
.theme-light .sidebar .tree-dot {
    background-color: #94a3b8 !important;
}

[data-theme="desktop"] .sidebar .tree-child-item:hover .tree-dot,
.theme-desktop .sidebar .tree-child-item:hover .tree-dot,
[data-theme="light"] .sidebar .tree-child-item:hover .tree-dot,
.theme-light .sidebar .tree-child-item:hover .tree-dot {
    background-color: #1d4ed8 !important;
}

[data-theme="desktop"] .sidebar .tree-child-item.active .tree-dot,
.theme-desktop .sidebar .tree-child-item.active .tree-dot,
[data-theme="light"] .sidebar .tree-child-item.active .tree-dot,
.theme-light .sidebar .tree-child-item.active .tree-dot {
    background-color: #ffffff !important;
}

[data-theme="desktop"] .sidebar .nav-divider,
.theme-desktop .sidebar .nav-divider,
[data-theme="light"] .sidebar .nav-divider,
.theme-light .sidebar .nav-divider {
    background-color: #e2e8f0 !important;
}

[data-theme="desktop"] .sidebar .nav-scrollable::-webkit-scrollbar-track,
.theme-desktop .sidebar .nav-scrollable::-webkit-scrollbar-track,
[data-theme="light"] .sidebar .nav-scrollable::-webkit-scrollbar-track,
.theme-light .sidebar .nav-scrollable::-webkit-scrollbar-track {
    background-color: #f8fafc !important;
}

[data-theme="desktop"] .sidebar .nav-scrollable::-webkit-scrollbar-thumb,
.theme-desktop .sidebar .nav-scrollable::-webkit-scrollbar-thumb,
[data-theme="light"] .sidebar .nav-scrollable::-webkit-scrollbar-thumb,
.theme-light .sidebar .nav-scrollable::-webkit-scrollbar-thumb {
    background-color: #cbd5e1 !important;
}

/* =========================================================================
   12L. SALARY STRUCTURE & HEADS MASTER (DESKTOP THEME)
   ========================================================================= */
[data-theme="desktop"] .modern-erp-page,
.theme-desktop .modern-erp-page,
[data-theme="light"] .modern-erp-page,
.theme-light .modern-erp-page {
    background-color: #f0f4f9 !important;
}

[data-theme="desktop"] .shm-header-card,
.theme-desktop .shm-header-card,
[data-theme="light"] .shm-header-card,
.theme-light .shm-header-card {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-top: 3px solid #1d4ed8 !important;
}

[data-theme="desktop"] .shm-root-theme .card,
.theme-desktop .shm-root-theme .card,
[data-theme="light"] .shm-root-theme .card,
.theme-light .shm-root-theme .card {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}

[data-theme="desktop"] .shm-root-theme .card-header,
.theme-desktop .shm-root-theme .card-header,
[data-theme="light"] .shm-root-theme .card-header,
.theme-light .shm-root-theme .card-header {
    background: #e8f0fe !important;
    color: #1e3a8a !important;
    border-bottom: 1px solid #cbd5e1 !important;
}

[data-theme="desktop"] .shm-root-theme .card-header .text-dark,
[data-theme="desktop"] .shm-root-theme .card-header h6,
[data-theme="desktop"] .shm-root-theme .card-header span,
.theme-desktop .shm-root-theme .card-header .text-dark,
.theme-desktop .shm-root-theme .card-header h6,
.theme-desktop .shm-root-theme .card-header span,
[data-theme="light"] .shm-root-theme .card-header .text-dark,
[data-theme="light"] .shm-root-theme .card-header h6,
[data-theme="light"] .shm-root-theme .card-header span,
.theme-light .shm-root-theme .card-header .text-dark,
.theme-light .shm-root-theme .card-header h6,
.theme-light .shm-root-theme .card-header span {
    color: #1e3a8a !important;
}

[data-theme="desktop"] .shm-root-theme .card-header .btn-primary,
.theme-desktop .shm-root-theme .card-header .btn-primary,
[data-theme="light"] .shm-root-theme .card-header .btn-primary,
.theme-light .shm-root-theme .card-header .btn-primary {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

[data-theme="desktop"] .shm-root-theme .nav-pills .nav-link,
.theme-desktop .shm-root-theme .nav-pills .nav-link,
[data-theme="light"] .shm-root-theme .nav-pills .nav-link,
.theme-light .shm-root-theme .nav-pills .nav-link {
    color: #334155 !important;
}

[data-theme="desktop"] .shm-root-theme .nav-pills .nav-link.active,
.theme-desktop .shm-root-theme .nav-pills .nav-link.active,
[data-theme="light"] .shm-root-theme .nav-pills .nav-link.active,
.theme-light .shm-root-theme .nav-pills .nav-link.active {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 4px 10px rgba(29, 78, 216, 0.25) !important;
}

[data-theme="desktop"] .shm-root-theme .table thead,
[data-theme="desktop"] .shm-root-theme .table thead th,
.theme-desktop .shm-root-theme .table thead,
.theme-desktop .shm-root-theme .table thead th,
[data-theme="light"] .shm-root-theme .table thead,
[data-theme="light"] .shm-root-theme .table thead th,
.theme-light .shm-root-theme .table thead,
.theme-light .shm-root-theme .table thead th {
    background-color: #f8fafc !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}

[data-theme="desktop"] .shm-root-theme .table tbody tr:hover,
.theme-desktop .shm-root-theme .table tbody tr:hover,
[data-theme="light"] .shm-root-theme .table tbody tr:hover,
.theme-light .shm-root-theme .table tbody tr:hover {
    background-color: #f1f5f9 !important;
}

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

/* =========================================================================
   12M. LOAN & ADVANCE DESK (DESKTOP THEME)
   ========================================================================= */
[data-theme="desktop"] .fintech-dashboard-wrapper,
.theme-desktop .fintech-dashboard-wrapper,
[data-theme="light"] .fintech-dashboard-wrapper,
.theme-light .fintech-dashboard-wrapper {
    background-color: #f0f4f9 !important;
    color: #0f172a !important;
}

[data-theme="desktop"] .fintech-top-header,
.theme-desktop .fintech-top-header,
[data-theme="light"] .fintech-top-header,
.theme-light .fintech-top-header {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="desktop"] .fintech-top-header h4,
.theme-desktop .fintech-top-header h4,
[data-theme="light"] .fintech-top-header h4,
.theme-light .fintech-top-header h4 {
    color: #1e3a8a !important;
}

[data-theme="desktop"] .fintech-top-header p,
.theme-desktop .fintech-top-header p,
[data-theme="light"] .fintech-top-header p,
.theme-light .fintech-top-header p {
    color: #64748b !important;
}

[data-theme="desktop"] .fintech-company-pill,
.theme-desktop .fintech-company-pill,
[data-theme="light"] .fintech-company-pill,
.theme-light .fintech-company-pill {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
}

[data-theme="desktop"] .fintech-month-subpill,
.theme-desktop .fintech-month-subpill,
[data-theme="light"] .fintech-month-subpill,
.theme-light .fintech-month-subpill {
    background: #e8f0fe !important;
    color: #1e40af !important;
}

[data-theme="desktop"] .btn-fintech-secondary,
.theme-desktop .btn-fintech-secondary,
[data-theme="light"] .btn-fintech-secondary,
.theme-light .btn-fintech-secondary {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}

[data-theme="desktop"] .btn-fintech-secondary:hover,
.theme-desktop .btn-fintech-secondary:hover,
[data-theme="light"] .btn-fintech-secondary:hover,
.theme-light .btn-fintech-secondary:hover {
    background: #f8fafc !important;
    color: #1e293b !important;
}

[data-theme="desktop"] .fintech-card,
.theme-desktop .fintech-card,
[data-theme="light"] .fintech-card,
.theme-light .fintech-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="desktop"] .fintech-card-header,
.theme-desktop .fintech-card-header,
[data-theme="light"] .fintech-card-header,
.theme-light .fintech-card-header {
    background: #e8f0fe !important;
    border-bottom: 1px solid #cbd5e1 !important;
    color: #1e3a8a !important;
}

[data-theme="desktop"] .fintech-card-header h5,
[data-theme="desktop"] .fintech-card-header h6,
.theme-desktop .fintech-card-header h5,
.theme-desktop .fintech-card-header h6,
[data-theme="light"] .fintech-card-header h5,
[data-theme="light"] .fintech-card-header h6,
.theme-light .fintech-card-header h5,
.theme-light .fintech-card-header h6 {
    color: #1e3a8a !important;
}

[data-theme="desktop"] .fintech-card-header span,
.theme-desktop .fintech-card-header span,
[data-theme="light"] .fintech-card-header span,
.theme-light .fintech-card-header span {
    color: #475569 !important;
}

[data-theme="desktop"] .fintech-kpi-card,
.theme-desktop .fintech-kpi-card,
[data-theme="light"] .fintech-kpi-card,
.theme-light .fintech-kpi-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="desktop"] .kpi-number,
.theme-desktop .kpi-number,
[data-theme="light"] .kpi-number,
.theme-light .kpi-number {
    color: #0f172a !important;
}

[data-theme="desktop"] .fintech-tab-group,
.theme-desktop .fintech-tab-group,
[data-theme="light"] .fintech-tab-group,
.theme-light .fintech-tab-group {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
}

[data-theme="desktop"] .tab-btn,
.theme-desktop .tab-btn,
[data-theme="light"] .tab-btn,
.theme-light .tab-btn {
    color: #475569 !important;
}

[data-theme="desktop"] .tab-btn.active,
.theme-desktop .tab-btn.active,
[data-theme="light"] .tab-btn.active,
.theme-light .tab-btn.active {
    background: #1d4ed8 !important;
    color: #ffffff !important;
}

[data-theme="desktop"] .fintech-table thead th,
.theme-desktop .fintech-table thead th,
[data-theme="light"] .fintech-table thead th,
.theme-light .fintech-table thead th {
    background: #f8fafc !important;
    color: #334155 !important;
    border-bottom: 1px solid #cbd5e1 !important;
}

[data-theme="desktop"] .fintech-table,
.theme-desktop .fintech-table,
[data-theme="light"] .fintech-table,
.theme-light .fintech-table {
    color: #0f172a !important;
}

[data-theme="desktop"] .fintech-table tbody tr,
.theme-desktop .fintech-table tbody tr,
[data-theme="light"] .fintech-table tbody tr,
.theme-light .fintech-table tbody tr {
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="desktop"] .fintech-table tbody tr:hover,
.theme-desktop .fintech-table tbody tr:hover,
[data-theme="light"] .fintech-table tbody tr:hover,
.theme-light .fintech-table tbody tr:hover {
    background: #f1f5f9 !important;
}

[data-theme="desktop"] .fintech-table tbody tr.row-selected,
.theme-desktop .fintech-table tbody tr.row-selected,
[data-theme="light"] .fintech-table tbody tr.row-selected,
.theme-light .fintech-table tbody tr.row-selected {
    background: #e8f0fe !important;
    border-left: 3px solid #1d4ed8 !important;
}

[data-theme="desktop"] .fintech-input,
[data-theme="desktop"] .fintech-select,
.theme-desktop .fintech-input,
.theme-desktop .fintech-select,
[data-theme="light"] .fintech-input,
[data-theme="light"] .fintech-select,
.theme-light .fintech-input,
.theme-light .fintech-select {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

[data-theme="desktop"] .fintech-input-addon,
.theme-desktop .fintech-input-addon,
[data-theme="light"] .fintech-input-addon,
.theme-light .fintech-input-addon {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

[data-theme="desktop"] .fintech-field-label,
.theme-desktop .fintech-field-label,
[data-theme="light"] .fintech-field-label,
.theme-light .fintech-field-label {
    color: #334155 !important;
}

[data-theme="desktop"] .tenure-chip,
.theme-desktop .tenure-chip,
[data-theme="light"] .tenure-chip,
.theme-light .tenure-chip {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

[data-theme="desktop"] .tenure-chip:hover,
.theme-desktop .tenure-chip:hover,
[data-theme="light"] .tenure-chip:hover,
.theme-light .tenure-chip:hover {
    background: #e8f0fe !important;
    color: #1d4ed8 !important;
}

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

[data-theme="desktop"] .selected-employee-fintech-card,
.theme-desktop .selected-employee-fintech-card,
[data-theme="light"] .selected-employee-fintech-card,
.theme-light .selected-employee-fintech-card {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}

[data-theme="desktop"] .selected-employee-fintech-card h6,
.theme-desktop .selected-employee-fintech-card h6,
[data-theme="light"] .selected-employee-fintech-card h6,
.theme-light .selected-employee-fintech-card h6 {
    color: #0f172a !important;
}

[data-theme="desktop"] .selected-employee-fintech-card .text-white-50,
.theme-desktop .selected-employee-fintech-card .text-white-50,
[data-theme="light"] .selected-employee-fintech-card .text-white-50,
.theme-light .selected-employee-fintech-card .text-white-50 {
    color: #64748b !important;
}

[data-theme="desktop"] .emi-glow-badge,
.theme-desktop .emi-glow-badge,
[data-theme="light"] .emi-glow-badge,
.theme-light .emi-glow-badge {
    background: #f0fdf4 !important;
    border: 1px solid #86efac !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1) !important;
}

[data-theme="desktop"] .emi-glow-amount,
.theme-desktop .emi-glow-amount,
[data-theme="light"] .emi-glow-amount,
.theme-light .emi-glow-amount {
    color: #059669 !important;
}

[data-theme="desktop"] .fintech-modal-card,
.theme-desktop .fintech-modal-card,
[data-theme="light"] .fintech-modal-card,
.theme-light .fintech-modal-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

[data-theme="desktop"] .fintech-autocomplete-menu,
.theme-desktop .fintech-autocomplete-menu,
[data-theme="light"] .fintech-autocomplete-menu,
.theme-light .fintech-autocomplete-menu {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

[data-theme="desktop"] .autocomplete-entry,
.theme-desktop .autocomplete-entry,
[data-theme="light"] .autocomplete-entry,
.theme-light .autocomplete-entry {
    color: #0f172a !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

[data-theme="desktop"] .autocomplete-entry:hover,
.theme-desktop .autocomplete-entry:hover,
[data-theme="light"] .autocomplete-entry:hover,
.theme-light .autocomplete-entry:hover {
    background: #e8f0fe !important;
}


/* =========================================================================
   ERP COMPACT TABLE SELECT - PREVENTS TEXT SQUEEZING & DROPDOWN ARROW OVERLAP
   ========================================================================= */
.erp-table-select,
.erp-allowance-table select.form-select,
.erp-allowance-table select.form-select-sm,
table select.erp-table-select,
table select.form-select-sm.py-0 {
    height: 24px !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    padding-left: 6px !important;
    padding-right: 22px !important; /* CRITICAL: Never let text overlap dropdown arrow */
    background-position: right 6px center !important;
    background-size: 10px 8px !important;
    min-width: 98px !important;
    border-color: #cbd5e1 !important;
}


/* Theme-aware Brand Text for PayrollSetu */
[data-theme="desktop"] .brand-text-payroll,
.theme-desktop .brand-text-payroll,
[data-theme="light"] .brand-text-payroll,
.theme-light .brand-text-payroll {
    color: #1e3a8a !important;
}

[data-theme="desktop"] .brand-text-setu,
.theme-desktop .brand-text-setu,
[data-theme="light"] .brand-text-setu,
.theme-light .brand-text-setu {
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

[data-theme="dark"] .brand-text-payroll,
[data-theme="slate"] .brand-text-payroll,
[data-theme="obsidian"] .brand-text-payroll,
[data-theme="charcoal"] .brand-text-payroll {
    color: #ffffff !important;
}

[data-theme="dark"] .brand-text-setu,
[data-theme="slate"] .brand-text-setu,
[data-theme="obsidian"] .brand-text-setu,
[data-theme="charcoal"] .brand-text-setu {
    background: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}