:root {
    /* Base Theme (Default: Dark Modern) */
    --primary-bg: #0a1f33;
    --secondary-bg: #122c46;
    --card-bg: #1a3e5c;
    --card-bg-hover: #21506f;
    --border-color-light: #355e7d;
    --border-color-medium: #3b7095;
    --border-color-dark: #4988b3;
    
    --text-light: #f8f9fa;
    --text-medium: #cfd8dc;
    --text-dark: #e1f0ff;
    --text-on-card: #ffffff;
    
    /* Accent Palette - Changable via JS */
    --accent-primary: #24dc84; /* Default: Reptile Green */
    --accent-secondary: #77d1fa; /* Bubbly Barracuda */
    --accent-hover: #1fae6d;

    /* Typography */
    --font-family-sans-serif: 'Inter', 'Nunito Sans', 'Segoe UI', sans-serif;

    /* Borders & Shadows */
    --border-radius-sm: 6px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-pill: 10rem;

    --box-shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
    --box-shadow-md: 0 10px 20px rgba(0, 0, 0, 0.2);
    --box-shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.3);
    
    /* Glassmorphism */
    --glass-bg: rgba(26, 62, 92, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
}

/* Light Theme Variables */
[data-theme="light"] {
    --primary-bg: #f4f7f6;
    --secondary-bg: #ffffff;
    --card-bg: #ffffff;
    --card-bg-hover: #f8f9fa;
    --border-color-light: #e0e0e0;
    --border-color-medium: #d1d5db;
    --border-color-dark: #9ca3af;
    
    --text-light: #1f2937;
    --text-medium: #4b5563;
    --text-dark: #111827;
    --text-on-card: #1f2937;
    
    --box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --box-shadow-md: 0 8px 16px rgba(0, 0, 0, 0.1);
    --box-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.15);

    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(0, 0, 0, 0.05);
}

/* Color Presets - Dark Mode Background Tints */
[data-color="blue"]:not([data-theme="light"]) {
    --accent-primary: #0d6efd;
    --accent-secondary: #0dcaf0;
    --accent-hover: #0b5ed7;
    --primary-bg: #0d1624;
    --secondary-bg: #142236;
    --card-bg: #1b2c45;
    --card-bg-hover: #233754;
    --glass-bg: rgba(27, 44, 69, 0.7);
}

[data-color="purple"]:not([data-theme="light"]) {
    --accent-primary: #6f42c1;
    --accent-secondary: #d63384;
    --accent-hover: #59359a;
    --primary-bg: #150f24;
    --secondary-bg: #211838;
    --card-bg: #2a1e45;
    --card-bg-hover: #352654;
    --glass-bg: rgba(42, 30, 69, 0.7);
}

[data-color="orange"]:not([data-theme="light"]) {
    --accent-primary: #fd7e14;
    --accent-secondary: #ffc107;
    --accent-hover: #e37112;
    --primary-bg: #24140a;
    --secondary-bg: #361f12;
    --card-bg: #452818;
    --card-bg-hover: #54311f;
    --glass-bg: rgba(69, 40, 24, 0.7);
}

/* Color Presets - Light Mode Background Tints */
[data-theme="light"][data-color="blue"] {
    --accent-primary: #0d6efd;
    --accent-secondary: #0dcaf0;
    --accent-hover: #0b5ed7;
    --primary-bg: #f0f4f8;
}

[data-theme="light"][data-color="purple"] {
    --accent-primary: #6f42c1;
    --accent-secondary: #d63384;
    --accent-hover: #59359a;
    --primary-bg: #f5f3ff;
}

[data-theme="light"][data-color="orange"] {
    --accent-primary: #fd7e14;
    --accent-secondary: #ffc107;
    --accent-hover: #e37112;
    --primary-bg: #fff7ed;
}

/* Light Theme Overrides for text visibility */
[data-theme="light"] .dataTables_wrapper .dataTables_length,
[data-theme="light"] .dataTables_wrapper .dataTables_length label,
[data-theme="light"] .dataTables_wrapper .dataTables_filter,
[data-theme="light"] .dataTables_wrapper .dataTables_filter label,
[data-theme="light"] .dataTables_wrapper .dataTables_info,
[data-theme="light"] .dataTables_wrapper .dataTables_paginate {
    color: var(--text-light) !important;
}

/* Force custom-dark-table to be readable in light theme */
[data-theme="light"] .custom-dark-table {
    --bs-table-color: var(--text-light) !important;
    --bs-table-border-color: var(--border-color-light) !important;
}
[data-theme="light"] .custom-dark-table tbody td,
[data-theme="light"] .custom-dark-table thead th {
    color: var(--text-light) !important;
    border-color: var(--border-color-light) !important;
}

[data-theme="light"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-light) !important;
}

[data-theme="light"] .form-label {
    color: var(--text-light) !important;
}

/* Modal and Card Typography Fixes for Light Theme when views have hardcoded text-white */
[data-theme="light"] .card-header .text-white,
[data-theme="light"] .modal-title.text-white,
[data-theme="light"] h1.text-white:not(.badge):not(.btn),
[data-theme="light"] h2.text-white:not(.badge):not(.btn),
[data-theme="light"] h3.text-white:not(.badge):not(.btn),
[data-theme="light"] h4.text-white:not(.badge):not(.btn),
[data-theme="light"] h5.text-white:not(.badge):not(.btn),
[data-theme="light"] h6.text-white:not(.badge):not(.btn),
[data-theme="light"] p.text-white:not(.badge):not(.btn),
[data-theme="light"] div.text-white:not(.badge):not(.btn),
[data-theme="light"] span.text-white:not(.badge):not(.btn) {
    color: var(--text-light) !important;
}

[data-theme="light"] .text-white-50:not(.badge):not(.btn),
[data-theme="light"] .text-light:not(.badge):not(.btn) {
    color: var(--text-medium) !important;
}

/* Dark Theme Overrides for text visibility */
[data-theme="dark"] input::placeholder, 
[data-theme="dark"] textarea::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    color: var(--text-light) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--card-bg) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-light) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_length label,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter label,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
    color: var(--text-light) !important;
}