/* Theme System - CSS Variables */
:root {
    /* Default Light Theme (Purple) */
    --theme-primary: #667eea;
    --theme-secondary: #764ba2;
    --theme-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --theme-body-bg: #f5f5f5;
    --theme-container-bg: #ffffff;
    --theme-text: #333333;
    --theme-text-light: #666666;
    --theme-border: #e9ecef;
    --theme-section-bg: #f8f9fa;
    --theme-button-primary: #667eea;
    --theme-button-success: #28a745;
    --theme-button-danger: #dc3545;
    --theme-button-secondary: #6c757d;
    --theme-shadow: rgba(0,0,0,0.1);
    --theme-input-bg: #ffffff;
    --theme-input-border: #e9ecef;
}

/* Light Theme 1: Default Purple */
[data-theme="light-purple"] {
    --theme-primary: #667eea;
    --theme-secondary: #764ba2;
    --theme-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --theme-body-bg: #f5f5f5;
    --theme-container-bg: #ffffff;
    --theme-text: #333333;
    --theme-text-light: #666666;
    --theme-border: #e9ecef;
    --theme-section-bg: #f8f9fa;
    --theme-button-primary: #667eea;
    --theme-button-success: #28a745;
    --theme-button-danger: #dc3545;
    --theme-button-secondary: #6c757d;
    --theme-shadow: rgba(0,0,0,0.1);
    --theme-input-bg: #ffffff;
    --theme-input-border: #e9ecef;
    --theme-table-header-118: #E8F4F8;
    --theme-table-header-454: #FFF4E6;
    --theme-table-header-default: #D9E1F2;
    --theme-table-cell-118: #F0F8FF;
    --theme-table-cell-454: #FFFBF0;
    --theme-table-totals: #e8e8e8;
    --theme-table-text-light: #666;
}

/* Light Theme 2: Blue Ocean */
[data-theme="light-blue"] {
    --theme-primary: #4facfe;
    --theme-secondary: #00f2fe;
    --theme-background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --theme-body-bg: #e3f2fd;
    --theme-container-bg: #ffffff;
    --theme-text: #1565c0;
    --theme-text-light: #42a5f5;
    --theme-border: #bbdefb;
    --theme-section-bg: #e1f5fe;
    --theme-button-primary: #2196f3;
    --theme-button-success: #4caf50;
    --theme-button-danger: #f44336;
    --theme-button-secondary: #607d8b;
    --theme-shadow: rgba(33, 150, 243, 0.2);
    --theme-input-bg: #ffffff;
    --theme-input-border: #90caf9;
    --theme-table-header-118: #BBDEFB;
    --theme-table-header-454: #C5E1A5;
    --theme-table-header-default: #B3E5FC;
    --theme-table-cell-118: #E3F2FD;
    --theme-table-cell-454: #E8F5E9;
    --theme-table-totals: #BBDEFB;
    --theme-table-text-light: #42a5f5;
}

/* Light Theme 3: Green Nature */
[data-theme="light-green"] {
    --theme-primary: #56ab2f;
    --theme-secondary: #a8e063;
    --theme-background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
    --theme-body-bg: #f1f8e9;
    --theme-container-bg: #ffffff;
    --theme-text: #2e7d32;
    --theme-text-light: #66bb6a;
    --theme-border: #c8e6c9;
    --theme-section-bg: #e8f5e9;
    --theme-button-primary: #4caf50;
    --theme-button-success: #66bb6a;
    --theme-button-danger: #ef5350;
    --theme-button-secondary: #78909c;
    --theme-shadow: rgba(76, 175, 80, 0.2);
    --theme-input-bg: #ffffff;
    --theme-input-border: #a5d6a7;
    --theme-table-header-118: #C8E6C9;
    --theme-table-header-454: #DCEDC8;
    --theme-table-header-default: #E8F5E9;
    --theme-table-cell-118: #F1F8E9;
    --theme-table-cell-454: #F9FBE7;
    --theme-table-totals: #C8E6C9;
    --theme-table-text-light: #66bb6a;
}

/* Dark Theme 1: Dark Purple */
[data-theme="dark-purple"] {
    --theme-primary: #7c3aed;
    --theme-secondary: #a855f7;
    --theme-background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    --theme-body-bg: #0f172a;
    --theme-container-bg: #1e293b;
    --theme-text: #e2e8f0;
    --theme-text-light: #94a3b8;
    --theme-border: #334155;
    --theme-section-bg: #1e293b;
    --theme-button-primary: #7c3aed;
    --theme-button-success: #10b981;
    --theme-button-danger: #ef4444;
    --theme-button-secondary: #64748b;
    --theme-shadow: rgba(0,0,0,0.5);
    --theme-input-bg: #334155;
    --theme-input-border: #475569;
    --theme-table-header-118: #4c1d95;
    --theme-table-header-454: #581c87;
    --theme-table-header-default: #312e81;
    --theme-table-cell-118: #1e293b;
    --theme-table-cell-454: #1e293b;
    --theme-table-totals: #334155;
    --theme-table-text-light: #94a3b8;
}

/* Dark Theme 2: Dark Blue */
[data-theme="dark-blue"] {
    --theme-primary: #3b82f6;
    --theme-secondary: #60a5fa;
    --theme-background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    --theme-body-bg: #0c1226;
    --theme-container-bg: #1e293b;
    --theme-text: #e0e7ff;
    --theme-text-light: #a5b4fc;
    --theme-border: #334155;
    --theme-section-bg: #1e293b;
    --theme-button-primary: #3b82f6;
    --theme-button-success: #10b981;
    --theme-button-danger: #f87171;
    --theme-button-secondary: #64748b;
    --theme-shadow: rgba(0,0,0,0.5);
    --theme-input-bg: #334155;
    --theme-input-border: #475569;
    --theme-table-header-118: #1e40af;
    --theme-table-header-454: #1e3a8a;
    --theme-table-header-default: #1e40af;
    --theme-table-cell-118: #1e293b;
    --theme-table-cell-454: #1e293b;
    --theme-table-totals: #334155;
    --theme-table-text-light: #a5b4fc;
}

/* Dark Theme 3: Dark Green */
[data-theme="dark-green"] {
    --theme-primary: #10b981;
    --theme-secondary: #34d399;
    --theme-background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
    --theme-body-bg: #0a1f1a;
    --theme-container-bg: #1e293b;
    --theme-text: #d1fae5;
    --theme-text-light: #6ee7b7;
    --theme-border: #334155;
    --theme-section-bg: #1e293b;
    --theme-button-primary: #10b981;
    --theme-button-success: #34d399;
    --theme-button-danger: #f87171;
    --theme-button-secondary: #64748b;
    --theme-shadow: rgba(0,0,0,0.5);
    --theme-input-bg: #334155;
    --theme-input-border: #475569;
    --theme-table-header-118: #065f46;
    --theme-table-header-454: #064e3b;
    --theme-table-header-default: #065f46;
    --theme-table-cell-118: #1e293b;
    --theme-table-cell-454: #1e293b;
    --theme-table-totals: #334155;
    --theme-table-text-light: #6ee7b7;
}

/* Custom theme: baseline before JS applies picker values (matches light purple) */
[data-theme="custom"] {
    --theme-primary: #667eea;
    --theme-secondary: #764ba2;
    --theme-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --theme-body-bg: #f5f5f5;
    --theme-container-bg: #ffffff;
    --theme-text: #333333;
    --theme-text-light: #666666;
    --theme-border: #e9ecef;
    --theme-section-bg: #f8f9fa;
    --theme-button-primary: #667eea;
    --theme-button-success: #28a745;
    --theme-button-danger: #dc3545;
    --theme-button-secondary: #6c757d;
    --theme-shadow: rgba(0,0,0,0.1);
    --theme-input-bg: #ffffff;
    --theme-input-border: #e9ecef;
    --theme-primary-rgb: 102, 126, 234;
    --theme-table-header-118: #E8F4F8;
    --theme-table-header-454: #FFF4E6;
    --theme-table-header-default: #D9E1F2;
    --theme-table-cell-118: #F0F8FF;
    --theme-table-cell-454: #FFFBF0;
    --theme-table-totals: #e8e8e8;
    --theme-table-text-light: #666;
}

/* Apply theme variables to elements */
body {
    background: var(--theme-body-bg) !important;
    color: var(--theme-text) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.theme-header {
    background: var(--theme-background) !important;
    color: white !important;
}

.theme-container {
    background: var(--theme-container-bg) !important;
    color: var(--theme-text) !important;
    box-shadow: 0 10px 30px var(--theme-shadow) !important;
}

.theme-section {
    background: var(--theme-section-bg) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

.theme-section h2 {
    color: var(--theme-primary) !important;
    border-bottom-color: var(--theme-primary) !important;
}

.theme-input {
    background: var(--theme-input-bg) !important;
    border-color: var(--theme-input-border) !important;
    color: var(--theme-text) !important;
}

.theme-input:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.1) !important;
}

.theme-button-primary {
    background: var(--theme-button-primary) !important;
    color: white !important;
}

.theme-button-success {
    background: var(--theme-button-success) !important;
    color: white !important;
}

.theme-button-danger {
    background: var(--theme-button-danger) !important;
    color: white !important;
}

.theme-button-secondary {
    background: var(--theme-button-secondary) !important;
    color: white !important;
}

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

.theme-text-light {
    color: var(--theme-text-light) !important;
}

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

/* Dark theme specific adjustments */
[data-theme^="dark"] .theme-section {
    background: var(--theme-container-bg) !important;
}

[data-theme^="dark"] .theme-input {
    background: var(--theme-input-bg) !important;
    color: var(--theme-text) !important;
}

[data-theme^="dark"] .theme-container {
    background: var(--theme-container-bg) !important;
}

[data-theme^="dark"] .menu-item {
    background: var(--theme-section-bg) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

[data-theme^="dark"] .menu-item:hover {
    background: var(--theme-primary) !important;
    color: white !important;
}

/* Select2 Dropdown Theme Support */
.select2-container--default .select2-selection--single {
    background: var(--theme-input-bg) !important;
    border-color: var(--theme-input-border) !important;
    color: var(--theme-text) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--theme-text) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--theme-text-light) transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--theme-text-light) transparent !important;
}

.select2-dropdown {
    background: var(--theme-container-bg) !important;
    border-color: var(--theme-border) !important;
}

.select2-container--default .select2-results__option {
    background: var(--theme-container-bg) !important;
    color: var(--theme-text) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--theme-primary) !important;
    color: white !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--theme-section-bg) !important;
    color: var(--theme-text) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--theme-input-bg) !important;
    border-color: var(--theme-input-border) !important;
    color: var(--theme-text) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--theme-primary) !important;
    outline: none !important;
}

.select2-results {
    background: var(--theme-container-bg) !important;
}

.select2-results__option--loading {
    background: var(--theme-container-bg) !important;
    color: var(--theme-text) !important;
}

.select2-container--default .select2-results__option[data-selected=true] {
    background: var(--theme-section-bg) !important;
    color: var(--theme-text) !important;
}

.select2-container--default .select2-results__option--disabled {
    background: var(--theme-container-bg) !important;
    color: var(--theme-text-light) !important;
    opacity: 0.6;
}

/* Handsontable Autocomplete Dropdown Theme Support */
.handsontable .autocompleteEditor {
    background: var(--theme-container-bg) !important;
    color: var(--theme-text) !important;
}

/* Handsontable autocomplete dropdown menu - multiple class variations */
.handsontable .autocompleteEditor .autocompleteMenu,
.handsontable .htAutocompleteMenu,
.htAutocompleteMenu,
.handsontable .autocompleteMenu {
    background: var(--theme-container-bg) !important;
    border: 1px solid var(--theme-border) !important;
    box-shadow: 0 2px 8px var(--theme-shadow) !important;
    color: var(--theme-text) !important;
}

.handsontable .autocompleteEditor .autocompleteMenu .autocompleteMenuItem,
.handsontable .htAutocompleteMenu .htAutocompleteItem,
.htAutocompleteMenu .htAutocompleteItem,
.handsontable .autocompleteMenu .autocompleteMenuItem {
    background: var(--theme-container-bg) !important;
    color: #000000 !important;
    border-bottom: 1px solid var(--theme-border) !important;
}

.handsontable .autocompleteEditor .autocompleteMenu .autocompleteMenuItem:hover,
.handsontable .autocompleteEditor .autocompleteMenu .autocompleteMenuItem.selected,
.handsontable .htAutocompleteMenu .htAutocompleteItem:hover,
.handsontable .htAutocompleteMenu .htAutocompleteItem.htAutocompleteItemSelected,
.htAutocompleteMenu .htAutocompleteItem:hover,
.htAutocompleteMenu .htAutocompleteItem.htAutocompleteItemSelected,
.handsontable .autocompleteMenu .autocompleteMenuItem:hover,
.handsontable .autocompleteMenu .autocompleteMenuItem.selected {
    background: var(--theme-primary) !important;
    color: white !important;
}

/* Override Handsontable listbox strong element color */
.handsontable.listbox table strong {
    color: #000000 !important;
    font-weight: 700;
}

/* Override dimmed cells in listbox to show black text */
.handsontable.listbox table td.htDimmed:not(.handsontable.listbox table td:hover),
.handsontable.listbox table td.htDimmed {
    background-color: inherit !important;
    color: #000000 !important;
}

.handsontable.listbox table td {
    color: #000000 !important;
}

/* Handsontable autocomplete input field */
.handsontable .autocompleteEditor input,
.handsontable .htAutocompleteEditor input {
    background: var(--theme-container-bg) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

/* Native Select Dropdowns */
select {
    background: var(--theme-input-bg) !important;
    border-color: var(--theme-input-border) !important;
    color: var(--theme-text) !important;
}

select:focus {
    border-color: var(--theme-primary) !important;
    outline: none !important;
}

select option {
    background: var(--theme-container-bg) !important;
    color: var(--theme-text) !important;
}