/**
 * Theme Variables CSS
 * Defines CSS custom properties for light and dark themes
 */

/* ============================================
   LIGHT THEME (Default)
   ============================================ */
:root {
    /* Background Colors */
    --bg-body: #f6f6f6;
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-hover: #f0f0f0;

    /* Text Colors */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #868e96;
    --text-inverse: #ffffff;

    /* Border Colors */
    --border-color: #dee2e6;
    --border-light: #e9ecef;
    --border-dark: #ced4da;

    /* Navbar */
    --navbar-bg: #ffffff;
    --navbar-text: #333333;
    --navbar-border: #e7e7e7;

    /* Sidebar */
    --sidebar-bg: #ffffff;
    --sidebar-text: #333333;
    --sidebar-border: #e7e7e7;
    --sidebar-hover: #f5f5f5;
    --sidebar-active: #e8f4f8;

    /* Cards & Panels */
    --card-bg: #ffffff;
    --card-border: #dee2e6;
    --card-header-bg: #ffffff;

    /* Forms */
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --input-text: #495057;
    --input-placeholder: #6c757d;
    --input-focus-border: #80bdff;
    --input-disabled-bg: #e9ecef;

    /* Dropdowns */
    --dropdown-bg: #ffffff;
    --dropdown-border: #dee2e6;
    --dropdown-hover: #f8f9fa;
    --dropdown-text: #212529;

    /* Tables */
    --table-bg: #ffffff;
    --table-border: #dee2e6;
    --table-stripe: #f8f9fa;
    --table-hover: #e9ecef;

    /* Modals */
    --modal-bg: #ffffff;
    --modal-header-bg: #f8f9fa;
    --modal-border: #dee2e6;
    --modal-backdrop: rgba(0, 0, 0, 0.5);

    /* Map Overlays */
    --map-panel-bg: rgba(255, 255, 255, 0.95);
    --map-panel-border: #cccccc;
    --map-panel-shadow: rgba(0, 0, 0, 0.2);

    /* Buttons - keeping brand colors consistent */
    --btn-default-bg: #f8f9fa;
    --btn-default-text: #333333;
    --btn-default-border: #ddd;

    /* Scrollbar */
    --scrollbar-track: #f1f1f1;
    --scrollbar-thumb: #c1c1c1;
    --scrollbar-thumb-hover: #a8a8a8;

    /* Footer */
    --footer-bg: #f8f9fa;
    --footer-text: #6c757d;
    --footer-border: #dee2e6;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    /* Indicator list */
    --indicator-bg: #f8f9fa;
    --indicator-hover: #e9ecef;
    --indicator-active: #d4edda;
    --indicator-border: #dee2e6;
}

/* ============================================
   DARK THEME
   ============================================ */
[data-theme="dark"] {
    /* Background Colors - Lighter neutral grays */
    --bg-body: #2d2d2d;
    --bg-primary: #363636;
    --bg-secondary: #404040;
    --bg-tertiary: #4a4a4a;
    --bg-hover: #505050;

    /* Text Colors */
    --text-primary: #e8e8e8;
    --text-secondary: #b0b0b0;
    --text-muted: #888888;
    --text-inverse: #363636;

    /* Border Colors */
    --border-color: #555555;
    --border-light: #4a4a4a;
    --border-dark: #666666;

    /* Navbar */
    --navbar-bg: #363636;
    --navbar-text: #e8e8e8;
    --navbar-border: #555555;

    /* Sidebar */
    --sidebar-bg: #363636;
    --sidebar-text: #e8e8e8;
    --sidebar-border: #555555;
    --sidebar-hover: #404040;
    --sidebar-active: #1abc9c;

    /* Cards & Panels */
    --card-bg: #404040;
    --card-border: #555555;
    --card-header-bg: #4a4a4a;

    /* Forms */
    --input-bg: #4a4a4a;
    --input-border: #555555;
    --input-text: #e8e8e8;
    --input-placeholder: #999999;
    --input-focus-border: #1abc9c;
    --input-disabled-bg: #404040;

    /* Dropdowns */
    --dropdown-bg: #404040;
    --dropdown-border: #555555;
    --dropdown-hover: #4a4a4a;
    --dropdown-text: #e8e8e8;

    /* Tables */
    --table-bg: #404040;
    --table-border: #555555;
    --table-stripe: #4a4a4a;
    --table-hover: #505050;

    /* Modals */
    --modal-bg: #404040;
    --modal-header-bg: #4a4a4a;
    --modal-border: #555555;
    --modal-backdrop: rgba(0, 0, 0, 0.7);

    /* Map Overlays */
    --map-panel-bg: rgba(64, 64, 64, 0.95);
    --map-panel-border: #555555;
    --map-panel-shadow: rgba(0, 0, 0, 0.4);

    /* Buttons */
    --btn-default-bg: #4a4a4a;
    --btn-default-text: #e8e8e8;
    --btn-default-border: #555555;

    /* Scrollbar */
    --scrollbar-track: #404040;
    --scrollbar-thumb: #555555;
    --scrollbar-thumb-hover: #666666;

    /* Footer */
    --footer-bg: #363636;
    --footer-text: #b0b0b0;
    --footer-border: #555555;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);

    /* Indicator list */
    --indicator-bg: #4a4a4a;
    --indicator-hover: #505050;
    --indicator-active: #1abc9c;
    --indicator-border: #555555;
}

/* ============================================
   THEME APPLICATION STYLES
   ============================================ */

/* Body */
body {
    background-color: var(--bg-body);
    color: var(--text-primary);
}

/* Navbar */
.navbar-default {
    background-color: var(--navbar-bg);
    border-color: var(--navbar-border);
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
    color: var(--navbar-text);
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    background-color: var(--bg-hover);
}

/* Sidebar */
.sidebar {
    background-color: var(--sidebar-bg);
    border-color: var(--sidebar-border);
}

.sidebar-block {
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
}

.sidebar-block h4,
.sidebar-block label {
    color: var(--text-primary);
}

/* Cards */
.card,
.panel {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

.card-header,
.panel-heading {
    background-color: var(--card-header-bg);
    border-color: var(--card-border);
    color: var(--text-primary);
}

/* Forms */
.form-control {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

.form-control:focus {
    border-color: var(--input-focus-border);
    background-color: var(--input-bg);
    color: var(--input-text);
}

.form-control::placeholder {
    color: var(--input-placeholder);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--input-disabled-bg);
}

/* Select dropdowns */
select.form-control {
    background-color: var(--input-bg);
    color: var(--input-text);
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--dropdown-border);
}

.dropdown-menu > li > a {
    color: var(--dropdown-text);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--dropdown-hover);
    color: var(--dropdown-text);
}

.dropdown-menu .divider {
    background-color: var(--border-color);
}

/* Tables */
.table {
    background-color: var(--table-bg);
    color: var(--text-primary);
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    border-color: var(--table-border);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--table-stripe);
}

.table-hover > tbody > tr:hover {
    background-color: var(--table-hover);
}

/* Modals */
.modal-content {
    background-color: var(--modal-bg);
    border-color: var(--modal-border);
}

.modal-header {
    background-color: var(--modal-header-bg);
    border-color: var(--modal-border);
    color: var(--text-primary);
}

.modal-header .close {
    color: var(--text-primary);
    opacity: 0.7;
}

.modal-body {
    color: var(--text-primary);
}

.modal-footer {
    border-color: var(--modal-border);
}

/* Buttons - default */
.btn-default {
    background-color: var(--btn-default-bg);
    border-color: var(--btn-default-border);
    color: var(--btn-default-text);
}

.btn-default:hover,
.btn-default:focus {
    background-color: var(--bg-hover);
    border-color: var(--border-dark);
    color: var(--btn-default-text);
}

/* Footer */
.footer {
    background-color: var(--footer-bg);
    border-color: var(--footer-border);
    color: var(--footer-text);
}

/* Map overlay panels */
.map-info-panel,
#unified-info-panel {
    background-color: var(--map-panel-bg) !important;
    border-color: var(--map-panel-border) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 1px 4px var(--map-panel-shadow) !important;
}

/* Measurement toolbar */
.measurement-toolbar-inner {
    background-color: var(--card-bg);
    box-shadow: 0 1px 4px var(--map-panel-shadow);
}

.measurement-btn {
    background-color: var(--btn-default-bg);
    color: var(--btn-default-text);
}

.measurement-btn:hover {
    background-color: var(--bg-hover);
}

.measurement-divider {
    background-color: var(--border-color);
}

/* Indicator list items */
.indicator-item {
    background-color: var(--indicator-bg);
    border-color: var(--indicator-border);
    color: var(--text-primary);
}

.indicator-item:hover {
    background-color: var(--indicator-hover);
}

.indicator-item.active {
    background-color: var(--indicator-active);
}

/* Filter sections */
.filter-section h4 {
    color: var(--text-primary);
}

/* Date slider */
.date-slider-container {
    background-color: var(--navbar-bg);
}

#dateSlider {
    background-color: var(--bg-secondary);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

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

/* Text colors */
.text-muted {
    color: var(--text-muted) !important;
}

/* Well */
.well {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

/* List groups */
.list-group-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.list-group-item:hover {
    background-color: var(--bg-hover);
}

/* Alerts - keep standard colors but adjust text */
[data-theme="dark"] .alert {
    color: var(--text-primary);
}

/* Code blocks */
code, pre {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Horizontal rules */
hr {
    border-color: var(--border-color);
}

/* Labels and badges */
.label-default,
.badge-default {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Nav tabs */
.nav-tabs {
    border-color: var(--border-color);
}

.nav-tabs > li > a {
    color: var(--text-primary);
}

.nav-tabs > li > a:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-color);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    border-bottom-color: transparent;
    color: var(--text-primary);
}

/* Progress bars background */
.progress {
    background-color: var(--bg-tertiary);
}

/* Breadcrumbs */
.breadcrumb {
    background-color: var(--bg-secondary);
}

.breadcrumb > li + li::before {
    color: var(--text-muted);
}

/* Pagination */
.pagination > li > a,
.pagination > li > span {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.pagination > li > a:hover {
    background-color: var(--bg-hover);
}

/* ============================================
   DARK THEME - COMPONENT OVERRIDES
   These override hardcoded colors in app CSS
   ============================================ */

/* Sidebar skin overrides - CRITICAL for fixing white patches */
[data-theme="dark"] .sidebar.sidebar-skin-white,
[data-theme="dark"] .sidebar-skin-white.sidebar {
    background: var(--sidebar-bg) !important;
    background-color: var(--sidebar-bg) !important;
}

[data-theme="dark"] .sidebar-skin-white .sidebar-block {
    background-color: var(--sidebar-bg) !important;
    color: var(--sidebar-text) !important;
}

[data-theme="dark"] .sidebar-skin-white .card-header,
[data-theme="dark"] .sidebar-skin-white .sidebar-fixed-header {
    background-color: var(--card-header-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Panel overrides */
[data-theme="dark"] .panel-default {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

[data-theme="dark"] .panel-default > .panel-heading {
    background-color: var(--card-header-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .panel-body {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .panel-footer {
    background-color: var(--card-header-bg) !important;
    border-color: var(--card-border) !important;
}

/* Field panel specific overrides */
[data-theme="dark"] .field-panel {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

[data-theme="dark"] .field-panel:hover {
    background-color: var(--bg-hover) !important;
}

[data-theme="dark"] .field-panel .media-heading,
[data-theme="dark"] .field-panel h4 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .field-panel p,
[data-theme="dark"] .field-panel span {
    color: var(--text-secondary) !important;
}

/* Label overrides */
[data-theme="dark"] .label-grey-100,
[data-theme="dark"] .label-default {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Search container */
[data-theme="dark"] .search-container {
    background-color: var(--sidebar-bg) !important;
}

/* Scrollable content areas */
[data-theme="dark"] .sidebar-scrollable-content {
    background-color: var(--sidebar-bg) !important;
}

/* Media elements */
[data-theme="dark"] .media,
[data-theme="dark"] .media-body {
    color: var(--text-primary);
}

/* Data scrollable */
[data-theme="dark"] [data-scrollable] {
    background-color: var(--sidebar-bg) !important;
}

/* Filter sections */
[data-theme="dark"] .filter-section {
    background-color: var(--sidebar-bg) !important;
    color: var(--text-primary) !important;
}

/* Map navbar overlay */
[data-theme="dark"] .navbar-map-overlay {
    background-color: var(--navbar-bg) !important;
    border-color: var(--navbar-border) !important;
}

[data-theme="dark"] .navbar-map-overlay .navbar-text h4 {
    color: var(--text-primary) !important;
}

/* Bottom panel */
[data-theme="dark"] #bottom-panel-container {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] #bottom-panel-toggle {
    background-color: var(--card-header-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] #bottom-panel-content {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] #chart-container {
    background-color: var(--card-bg) !important;
}

/* Input groups */
[data-theme="dark"] .input-group-addon {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

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

/* Checkboxes and radios */
[data-theme="dark"] .checkbox label,
[data-theme="dark"] .radio label {
    color: var(--text-primary) !important;
}

/* Content areas */
[data-theme="dark"] .st-content,
[data-theme="dark"] .st-content-inner {
    background-color: var(--bg-body) !important;
}

/* Container backgrounds */
[data-theme="dark"] .container-fluid,
[data-theme="dark"] .container-xxl {
    background-color: transparent !important;
}

/* Toggle buttons */
[data-theme="dark"] .toggle {
    color: var(--text-primary) !important;
}

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

/* Date slider items */
[data-theme="dark"] .date-item {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .date-item:hover {
    background-color: var(--bg-hover) !important;
}

[data-theme="dark"] .date-item.active {
    background-color: var(--indicator-active) !important;
    color: var(--text-inverse) !important;
}

/* SVG in dark mode - invert colors for visibility */
[data-theme="dark"] .media-left svg {
    filter: invert(0.85) hue-rotate(180deg);
}

/* Links in panels */
[data-theme="dark"] .field-link,
[data-theme="dark"] .panel a:not(.btn) {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .field-link:hover,
[data-theme="dark"] .panel a:not(.btn):hover {
    color: #1abc9c !important;
}

/* Override st-pusher backgrounds */
[data-theme="dark"] .st-pusher {
    background-color: var(--bg-body) !important;
}

/* Sidebar dividers */
[data-theme="dark"] .sidebar .divider,
[data-theme="dark"] .sidebar hr {
    border-color: var(--border-color) !important;
    background-color: var(--border-color) !important;
}

/* Ensure text visibility in all sidebar content */
[data-theme="dark"] .sidebar h1,
[data-theme="dark"] .sidebar h2,
[data-theme="dark"] .sidebar h3,
[data-theme="dark"] .sidebar h4,
[data-theme="dark"] .sidebar h5,
[data-theme="dark"] .sidebar h6 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .sidebar p,
[data-theme="dark"] .sidebar span:not(.label):not(.badge),
[data-theme="dark"] .sidebar li {
    color: var(--text-secondary);
}

/* Popup and tooltip backgrounds */
[data-theme="dark"] .popover {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .popover-title {
    background-color: var(--card-header-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .popover-content {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .tooltip-inner {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Google Maps info windows - these use inline styles, so we use !important */
[data-theme="dark"] .gm-style-iw {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .gm-style-iw-d {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .gm-style-iw-c {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .gm-style-iw h4 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .gm-style-iw p {
    color: var(--text-secondary) !important;
}

/* Close button in info windows */
[data-theme="dark"] .gm-ui-hover-effect {
    filter: invert(1);
}