/**
 * Theme System for GEX Financial Application
 * Supports light and dark modes with Bootstrap 5.3.0 data-bs-theme attribute
 * Uses CSS custom properties for dynamic theme switching
 */

/* ========================================
   LIGHT THEME (Default)
   ======================================== */
:root {
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
}

[data-bs-theme="light"] {
    /* Background colors */
    --theme-bg-primary: #f8f9fa;
    --theme-bg-secondary: #ffffff;
    --theme-bg-tertiary: #f0f0f0;
    --theme-bg-card: #ffffff;

    /* Core color tokens */
    --color-primary: #2980b9;
    --color-success: #16a085;
    --color-danger: #e74c3c;
    --color-warning: #f39c12;
    --color-info: #2980b9;
    --color-light: #ecf0f1;
    --color-dark: #2c3e50;
    --color-grey: #95a5a6;
    --color-grey-light: #ecf0f1;
    --color-grey-medium: #bdc3c7;
    --color-grey-dark: #7f8c8d;

    /* Soft utility colors */
    --color-primary-soft: rgba(41, 128, 185, 0.25);
    --color-primary-tint: rgba(41, 128, 185, 0.1);
    --color-danger-soft: rgba(231, 76, 60, 0.12);
    --color-warning-soft: rgba(243, 156, 18, 0.18);
    --color-grey-soft: rgba(149, 165, 166, 0.12);
    --color-control-handle: #ffffff;

    /* Text colors */
    --theme-text-primary: #212529;
    --theme-text-secondary: #6c757d;
    --theme-text-muted: #adb5bd;

    /* Header gradient */
    --theme-header-start: #667eea;
    --theme-header-end: #764ba2;

    /* Border colors */
    --theme-border-primary: #dee2e6;
    --theme-border-secondary: #e9ecef;

    /* Chart colors */
    --theme-chart-bg: #ffffff;
    --theme-chart-paper: #f8f9fa;
    --theme-chart-grid: rgba(0, 0, 0, 0.1);
    --theme-chart-text: #212529;
    --theme-chart-axis: #495057;

    /* Financial colors (consistent across themes) */
    --theme-positive: #28a745;
    --theme-negative: #dc3545;
    --theme-flip: #db61a2;
    --theme-cliff: #f78166;
    --theme-warning: #f39c12;

    /* GEX Chart Colors (Light Theme) */
    --gex-call-color: #28a745;
    --gex-put-color: #dc3545;
    --gex-price-line: #f59e0b;
    --gex-flip-color: #db61a2;
    --gex-cliff-color: #f78166;

    /* Marker Colors (Centralized) */
    --marker-pos-bg: #28a745;
    --marker-pos-text: #ffffff;
    --marker-neg-bg: #dc3545;
    --marker-neg-text: #ffffff;
    --marker-abs-bg: #6c00cd;
    --marker-abs-text: #ffffff;
    --marker-flip-bg: #ff00ff;
    --marker-flip-text: #ffffff;
    --marker-mp-bg: #007bff;
    --marker-mp-text: #ffffff;

    /* Marker Font */
    --marker-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --marker-font-weight: 600;

    /* Interactive elements */
    --theme-hover-bg: #e9ecef;
    --theme-hover-border: #667eea;
    --theme-active-bg: #dee2e6;

    /* Help Drawer expanded entry */
    --theme-help-expanded-bg: rgba(255, 193, 7, 0.1);
    --theme-help-expanded-border: rgba(255, 193, 7, 0.55);
    --theme-help-expanded-title: #997404;

    /* Highlight colors for closest strike marker */
    --theme-highlight-bg: #fffacd;
    --theme-highlight-text: #212529;

    /* Shadows */
    --theme-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --theme-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --theme-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.3);

    /* Modal overlay */
    --theme-modal-overlay: rgba(0, 0, 0, 0.6);

    /* Chart loading overlay */
    --gex-loading-overlay-bg: rgba(248, 249, 250, 0.72);
    --gex-loading-spinner-color: #343a40;
    --gex-loading-spinner-track: rgba(52, 58, 64, 0.18);

    /* Scrollbar */
    --theme-scrollbar-track: #f1f1f1;
    --theme-scrollbar-thumb: #888;
    --theme-scrollbar-thumb-hover: #555;

    /* GEX Shaded Zones */
    --gex-zone-opacity: 0.2;
    --gex-absolute-color: #9333ea;

    /* Gamma Profile Zone Colors (Base RGB values) - Light Theme */
    --gamma-zone-support-rgb: 0, 180, 0;
    /* Growing Support - Green */
    --gamma-zone-support-soft-rgb: 100, 200, 100;
    /* Declining Stabilization - Light Green (Adjusted for visibility) */
    --gamma-zone-resist-rgb: 0, 100, 255;
    /* Increasing Stabilization - Blue */
    --gamma-zone-resist-soft-rgb: 60, 150, 255;
    /* Decreasing Stabilization - Light Blue (Adjusted for visibility) */
    --gamma-zone-vol-rgb: 255, 80, 80;
    /* Increasing Destabilization - Red */
    --gamma-zone-vol-soft-rgb: 255, 165, 0;
    /* Decreasing Destabilization - Orange */
}

/* ========================================
   DARK THEME
   ======================================== */
[data-bs-theme="dark"] {
    /* Background colors - optimized for financial applications */
    --theme-bg-primary: #0d1117;
    --theme-bg-secondary: #161b22;
    --theme-bg-tertiary: #21262d;
    --theme-bg-card: #161b22;

    /* Core color tokens */
    --color-primary: #58a6ff;
    --color-success: #3fb950;
    --color-danger: #f85149;
    --color-warning: #f39c12;
    --color-info: #79c0ff;
    --color-light: #1f242d;
    --color-dark: #e6edf3;
    --color-grey: #8b949e;
    --color-grey-light: #30363d;
    --color-grey-medium: #484f58;
    --color-grey-dark: #6e7681;

    /* Soft utility colors */
    --color-primary-soft: rgba(88, 166, 255, 0.35);
    --color-primary-tint: rgba(88, 166, 255, 0.18);
    --color-danger-soft: rgba(248, 81, 73, 0.2);
    --color-warning-soft: rgba(243, 156, 18, 0.25);
    --color-grey-soft: rgba(139, 148, 158, 0.2);
    --color-control-handle: #f0f6fc;

    /* Text colors */
    --theme-text-primary: #e6edf3;
    --theme-text-secondary: #7d8590;
    --theme-text-muted: #6e7681;

    /* Header gradient - darker professional tones */
    --theme-header-start: #4a5a8a;
    --theme-header-end: #5c4570;

    /* Border colors */
    --theme-border-primary: #30363d;
    --theme-border-secondary: #21262d;

    /* Chart colors */
    --theme-chart-bg: #0d1117;
    --theme-chart-paper: #161b22;
    --theme-chart-grid: #30363d;
    --theme-chart-text: #e6edf3;
    --theme-chart-axis: #7d8590;

    /* Financial colors (brighter for dark mode visibility) */
    --theme-positive: #3fb950;
    --theme-negative: #f85149;
    --theme-flip: #db61a2;
    --theme-cliff: #f78166;
    --theme-warning: #f39c12;

    /* GEX Chart Colors (Dark Theme - optimized for visibility) */
    --gex-call-color: #3fb950;
    --gex-put-color: #f85149;
    --gex-price-line: #fbbf24;
    --gex-flip-color: #db61a2;
    --gex-cliff-color: #f78166;

    /* Marker Colors (Dark Theme) */
    --marker-pos-bg: #28a745;
    --marker-pos-text: #ffffff;
    --marker-neg-bg: #dc3545;
    --marker-neg-text: #ffffff;
    --marker-abs-bg: #6c00cd;
    --marker-abs-text: #ffffff;
    --marker-flip-bg: #ff00ff;
    --marker-flip-text: #ffffff;
    --marker-mp-bg: #007bff;
    --marker-mp-text: #ffffff;

    /* Interactive elements */
    --theme-hover-bg: #21262d;
    --theme-hover-border: #4a5a8a;
    --theme-active-bg: #30363d;

    /* Help Drawer expanded entry */
    --theme-help-expanded-bg: rgba(255, 193, 7, 0.1);
    --theme-help-expanded-border: rgba(255, 193, 7, 0.4);
    --theme-help-expanded-title: #e6a817;

    /* Highlight colors for closest strike marker */
    --theme-highlight-bg: #3d3020;
    --theme-highlight-text: #e6edf3;

    /* Shadows - more pronounced for depth in dark mode */
    --theme-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --theme-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --theme-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.6);

    /* Modal overlay */
    --theme-modal-overlay: rgba(0, 0, 0, 0.8);

    /* Chart loading overlay */
    --gex-loading-overlay-bg: rgba(0, 0, 0, 0.5);
    --gex-loading-spinner-color: #ffffff;
    --gex-loading-spinner-track: rgba(255, 255, 255, 0.25);

    /* Scrollbar */
    --theme-scrollbar-track: #21262d;
    --theme-scrollbar-thumb: #484f58;
    --theme-scrollbar-thumb-hover: #6e7681;

    /* GEX Shaded Zones */
    --gex-zone-opacity: 0.25;
    --gex-absolute-color: #a855f7;
    /* Brighter purple for dark mode */

    /* Gamma Profile Zone Colors (Base RGB values) - Dark Theme (Brighter) */
    --gamma-zone-support-rgb: 46, 204, 113;
    /* Growing Support - Green */
    --gamma-zone-support-soft-rgb: 150, 220, 150;
    /* Declining Stabilization - Light Green */
    --gamma-zone-resist-rgb: 52, 152, 219;
    /* Increasing Stabilization - Blue */
    --gamma-zone-resist-soft-rgb: 100, 180, 255;
    /* Decreasing Stabilization - Light Blue */
    --gamma-zone-vol-rgb: 231, 76, 60;
    /* Increasing Destabilization - Red */
    --gamma-zone-vol-soft-rgb: 255, 165, 0;
    /* Decreasing Destabilization - Orange */
}

/* ========================================
   GLOBAL THEMING
   ======================================== */

/* Smooth transitions for theme changes */
body,
.card,
.header-bar,
.guide-modal-content,
.marker-item {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Viewport & reset */
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

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

/* Header Bar */
.header-bar {
    background: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
    box-shadow: var(--theme-shadow-sm);
}

/* Theme-specific header gradient backgrounds */
[data-bs-theme="dark"] .header-bar {
    background: var(--theme-bg-secondary);
}

[data-bs-theme="light"] .header-bar {
    background: var(--theme-bg-secondary);
}

/* Adaptive text colors for header - Dark theme uses white text */
[data-bs-theme="dark"] .header-bar h2,
[data-bs-theme="dark"] .header-bar h4,
[data-bs-theme="dark"] .header-bar p,
[data-bs-theme="dark"] .header-bar label,
[data-bs-theme="dark"] .header-bar .form-label {
    color: #ffffff !important;
    font-weight: 500;
}

/* Light theme uses dark text */
[data-bs-theme="light"] .header-bar h2,
[data-bs-theme="light"] .header-bar h4,
[data-bs-theme="light"] .header-bar p,
[data-bs-theme="light"] .header-bar label,
[data-bs-theme="light"] .header-bar .form-label {
    color: #1a1a2e !important;
    font-weight: 500;
}

/* Cards */
.card {
    background-color: var(--theme-bg-card);
    border-color: var(--theme-border-primary);
    box-shadow: none;
    color: var(--theme-text-primary);
}

.card-body {
    background-color: var(--theme-bg-card);
    color: var(--theme-text-primary);
}

.marker-item {
    background-color: transparent;
    color: var(--theme-text-primary);
}

.marker-item:hover {
    background-color: var(--theme-hover-bg) !important;
}

/* Custom scrollbar for markers */
#gex-markers-container::-webkit-scrollbar-track {
    background: var(--theme-scrollbar-track);
}

#gex-markers-container::-webkit-scrollbar-thumb {
    background: var(--theme-scrollbar-thumb);
}

#gex-markers-container::-webkit-scrollbar-thumb:hover {
    background: var(--theme-scrollbar-thumb-hover);
}

/* Guide Modal */
.guide-modal {
    background-color: var(--theme-modal-overlay);
}

.guide-modal-content {
    background-color: var(--theme-bg-card);
    box-shadow: var(--theme-shadow-lg);
}

.guide-modal-header {
    background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%);
    color: white;
    border-bottom-color: var(--theme-border-primary);
}

.guide-modal-body {
    background-color: var(--theme-bg-card);
    color: var(--theme-text-primary);
}


/* Form Controls */
.form-select,
.form-control {
    background-color: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
    border-color: var(--theme-border-primary);
}

.form-select:focus,
.form-control:focus {
    background-color: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
    border-color: var(--theme-hover-border);
}

.form-label {
    color: var(--theme-text-primary);
}

/* Header form controls - enhanced visibility */
[data-bs-theme="dark"] .header-bar .form-select,
[data-bs-theme="dark"] .header-bar .form-control {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

[data-bs-theme="dark"] .header-bar .form-select:focus,
[data-bs-theme="dark"] .header-bar .form-control:focus {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.4);
}

[data-bs-theme="light"] .header-bar .form-select,
[data-bs-theme="light"] .header-bar .form-control {
    background-color: rgba(255, 255, 255, 0.8);
    color: #1a1a2e;
    border-color: rgba(0, 0, 0, 0.15);
}

[data-bs-theme="light"] .header-bar .form-select:focus,
[data-bs-theme="light"] .header-bar .form-control:focus {
    background-color: #ffffff;
    color: #1a1a2e;
    border-color: rgba(0, 0, 0, 0.25);
}

/* Dropdown options visibility */
[data-bs-theme="dark"] .header-bar .form-select option {
    background-color: #1e293b;
    color: #ffffff;
}

[data-bs-theme="light"] .header-bar .form-select option {
    background-color: #ffffff;
    color: #1a1a2e;
}

/* Buttons */
.btn-primary {
    background-color: var(--theme-header-start);
    border-color: var(--theme-header-start);
}

.btn-primary:hover {
    background-color: var(--theme-hover-border);
    border-color: var(--theme-hover-border);
}

.markers-toggle-btn {
    background-color: var(--theme-header-start);
}

.markers-toggle-btn:hover {
    background-color: var(--theme-hover-border);
}

/* Tab Navigation */
.nav-tabs .nav-link {
    color: var(--theme-text-secondary);
    background-color: transparent;
    border-color: transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--theme-text-primary);
    border-color: var(--theme-border-primary);
}

.nav-tabs .nav-link.active {
    color: var(--theme-header-start);
    background-color: var(--theme-bg-card);
    border-color: var(--theme-border-primary) var(--theme-border-primary) transparent;
}

/* Slider (noUiSlider) */
#gexThresholdSlider .noUi-value {
    color: var(--theme-text-primary);
}

#gexThresholdSlider .noUi-value.active-tick {
    color: var(--theme-header-start);
}

#gexThresholdSlider .noUi-value:hover {
    color: var(--theme-header-start);
}

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

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

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

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

/* Tables (if present) */
.table {
    color: var(--theme-text-primary);
}

.table-bordered {
    border-color: var(--theme-border-primary);
}

/* Alerts */
.alert-info {
    background-color: rgba(41, 128, 185, 0.1);
    border-color: rgba(41, 128, 185, 0.3);
    color: var(--theme-text-primary);
}

/* Header Icon Buttons (Theme Toggle & Menu) */
.theme-toggle-btn,
.header-menu-btn {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.theme-toggle-btn {
    margin-left: 1rem;
}

.header-menu-btn {
    min-width: 42px;
}

.theme-toggle-btn:hover,
.header-menu-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

.theme-toggle-btn:active,
.header-menu-btn:active {
    transform: scale(0.95);
}

.theme-icon {
    font-size: 1.2rem;
    line-height: 1;
}

.header-menu-dropdown .dropdown-menu {
    background-color: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border-primary);
    box-shadow: var(--theme-shadow-sm);
    padding: 0.25rem 0;
    min-width: 180px;
}

.header-menu-dropdown .dropdown-item {
    color: var(--theme-text-primary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-menu-dropdown .dropdown-item:hover,
.header-menu-dropdown .dropdown-item:focus {
    background-color: var(--theme-hover-bg);
    color: var(--theme-text-primary);
}

/* Light theme - darker button for visibility */
[data-bs-theme="light"] .theme-toggle-btn,
[data-bs-theme="light"] .header-menu-btn {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: #1a1a2e;
}

[data-bs-theme="light"] .theme-toggle-btn:hover,
[data-bs-theme="light"] .header-menu-btn:hover {
    background-color: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
}

/* Dark theme - keep white/transparent */
[data-bs-theme="dark"] .theme-toggle-btn,
[data-bs-theme="dark"] .header-menu-btn {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

[data-bs-theme="dark"] .theme-toggle-btn:hover,
[data-bs-theme="dark"] .header-menu-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

/* Dark mode specific adjustments */
[data-bs-theme="dark"] .badge.bg-light {
    background-color: var(--theme-bg-tertiary) !important;
    color: var(--theme-text-primary) !important;
}

[data-bs-theme="dark"] .border-top {
    border-color: var(--theme-border-primary) !important;
}

[data-bs-theme="dark"] .border-bottom {
    border-color: var(--theme-border-primary) !important;
}

/* Totals section in markers sidebar */
.totals-section {
    background-color: var(--theme-bg-tertiary) !important;
    border-color: var(--theme-border-primary) !important;
}

/* Chart legends footer */
#gex-legend,
#gamma-profile-markers-legend {
    color: var(--theme-text-secondary);
}

/* View button hover states - ensure visibility in both themes */
[data-bs-theme="light"] .view-btn:not(.active):hover {
    color: var(--theme-text-primary) !important;
    background-color: var(--theme-hover-bg) !important;
}

[data-bs-theme="dark"] .view-btn:not(.active):hover {
    color: var(--theme-text-primary) !important;
    background-color: var(--theme-hover-bg) !important;
}

/* Responsive adjustments */
@media (max-width: 992px) {

    .theme-toggle-btn,
    .header-menu-btn {
        padding: 0.3rem 0.6rem;
        font-size: 1rem;
    }
}

@media (max-width: 768px) {

    .theme-toggle-btn,
    .header-menu-btn {
        margin-left: 0.5rem;
    }
}

/* Ensure proper contrast for important elements */
[data-bs-theme="dark"] .badge.bg-primary {
    background-color: var(--theme-header-start) !important;
}

[data-bs-theme="dark"] .badge.bg-success {
    background-color: var(--theme-positive) !important;
}

[data-bs-theme="dark"] .badge.bg-danger {
    background-color: var(--theme-negative) !important;
}

/* Highlight selected strike in markers */

/* Close button in modal (ensure visibility) */
.guide-modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

.guide-modal-header .btn-close:hover {
    opacity: 1;
}

/* Position card hover effects remain consistent */
.position-card:hover {
    box-shadow: var(--theme-shadow-md);
}

/* Alert styling in guide modal */
[data-bs-theme="dark"] .alert-info {
    background-color: rgba(74, 90, 138, 0.2);
    border-color: rgba(74, 90, 138, 0.4);
}