/**
 * CEM Carani Theme System
 * Supports: Light, Dark, and System (auto) themes
 * 
 * Usage: Include this file, then add theme.js
 * Theme is persisted in localStorage under 'cem-carani-theme'
 */

/* ============================================
   BASE THEME VARIABLES (Dark - Default)
   ============================================ */
:root {
    /* Color scheme hint for browser UI */
    color-scheme: dark;
    
    /* Background colors */
    --bg: #111217;
    --bg-panel: #181b1f;
    --bg-card: #181b1f;
    --bg-header: #1f2229;
    --bg-hover: #2c2f36;
    --bg-input: #252930;
    --bg-overlay: rgba(0, 0, 0, 0.7);
    
    /* Border colors */
    --border: #2c2f36;
    --border-light: #3a3f4d;
    --border-focus: #3b82f6;
    
    /* Text colors */
    --text: #d8d9da;
    --text-muted: #8e8e8e;
    --text-dim: #6b7280;
    --text-inverse: #1a1a1a;
    
    /* Brand/Accent colors */
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --accent-dim: rgba(59, 130, 246, 0.15);
    
    /* Semantic colors */
    --green: #73bf69;
    --green-dim: rgba(115, 191, 105, 0.15);
    --green-text: #73bf69;
    
    --red: #f2495c;
    --red-dim: rgba(242, 73, 92, 0.15);
    --red-text: #f2495c;
    
    --yellow: #fade2a;
    --yellow-dim: rgba(250, 222, 42, 0.15);
    --yellow-text: #fade2a;
    
    --orange: #ff9830;
    --orange-dim: rgba(255, 152, 48, 0.15);
    
    --cyan: #06b6d4;
    --cyan-dim: rgba(6, 182, 212, 0.15);
    --cyan-text: #06b6d4;
    
    --purple: #b877d9;
    --purple-dim: rgba(184, 119, 217, 0.15);
    
    --blue: #5794f2;
    --blue-dim: rgba(87, 148, 242, 0.15);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4);
    --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.3);
    
    /* Chart colors (for Plotly and other chart libs) */
    --chart-bg: transparent;
    --chart-grid: #3d4250;
    --chart-text: #9ca3af;
    --chart-axis: #d8d9da;
    
    /* Status indicator */
    --status-online: #73bf69;
    --status-offline: #f2495c;
    --status-warning: #fade2a;
}

/* ============================================
   LIGHT THEME OVERRIDES
   ============================================ */
html[data-theme="light"],
html[data-theme="light"] :root {
    color-scheme: light;
    
    /* Background colors - using soft grays instead of pure white */
    --bg: #eef1f5;              /* Main bg: soft blue-gray */
    --bg-panel: #f8f9fa;        /* Panels: very light gray */
    --bg-card: #ffffff;         /* Cards: white for contrast */
    --bg-header: #ffffff;       /* Header: white */
    --bg-hover: #e9ecef;        /* Hover: slightly darker */
    --bg-input: #ffffff;        /* Inputs: white */
    --bg-overlay: rgba(0, 0, 0, 0.4);
    
    /* Border colors */
    --border: #d1d5db;          /* Visible but soft */
    --border-light: #e5e7eb;    /* Lighter variant */
    --border-focus: #3b82f6;
    
    /* Text colors - not pure black for less strain */
    --text: #1f2937;            /* Dark gray, not black */
    --text-muted: #6b7280;      /* Medium gray */
    --text-dim: #9ca3af;        /* Light gray */
    --text-inverse: #ffffff;
    
    /* Brand/Accent colors - slightly darker for light bg */
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-dim: rgba(37, 99, 235, 0.1);
    
    /* Semantic colors - adjusted for light backgrounds */
    --green: #059669;
    --green-dim: rgba(5, 150, 105, 0.12);
    --green-text: #047857;
    
    --red: #dc2626;
    --red-dim: rgba(220, 38, 38, 0.1);
    --red-text: #b91c1c;
    
    --yellow: #d97706;
    --yellow-dim: rgba(217, 119, 6, 0.12);
    --yellow-text: #b45309;
    
    --orange: #ea580c;
    --orange-dim: rgba(234, 88, 12, 0.1);
    
    --cyan: #0891b2;
    --cyan-dim: rgba(8, 145, 178, 0.12);
    --cyan-text: #0e7490;
    
    --purple: #7c3aed;
    --purple-dim: rgba(124, 58, 237, 0.1);
    
    --blue: #2563eb;
    --blue-dim: rgba(37, 99, 235, 0.1);
    
    /* Shadows - subtle for light theme */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
    --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.15);
    
    /* Chart colors */
    --chart-bg: #ffffff;
    --chart-grid: #e5e7eb;
    --chart-text: #6b7280;
    --chart-axis: #374151;
    
    /* Status indicator */
    --status-online: #059669;
    --status-offline: #dc2626;
    --status-warning: #d97706;
}

/* ============================================
   THEME SWITCHER COMPONENT
   ============================================ */
.theme-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px;
    margin-left: 8px;
}

.theme-switcher-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 14px;
}

.theme-switcher-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.theme-switcher-btn.active {
    background: var(--accent);
    color: white;
}

.theme-switcher-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Tooltip for theme buttons */
.theme-switcher-btn[data-tooltip] {
    position: relative;
}

.theme-switcher-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.15s ease;
    box-shadow: var(--shadow-md);
    z-index: 1000;
}

.theme-switcher-btn[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   ADDITIONAL LIGHT THEME SPECIFIC FIXES
   ============================================ */

/* Nav tabs */
html[data-theme="light"] .nav-tab {
    color: var(--text-dim);
}

html[data-theme="light"] .nav-tab:hover {
    background: var(--bg-hover);
    color: var(--text);
}

html[data-theme="light"] .nav-tab.active {
    background: var(--accent);
    color: white;
}

/* Buttons */
html[data-theme="light"] .btn-default {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text);
}

html[data-theme="light"] .btn-default:hover {
    background: var(--bg-hover);
    border-color: var(--border-light);
}

html[data-theme="light"] .btn-primary {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

html[data-theme="light"] .btn-primary:hover {
    background: var(--accent-hover);
}

/* Inputs */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background: var(--bg-input);
    border-color: var(--border);
    color: var(--text);
}

html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px var(--accent-dim);
}

html[data-theme="light"] input::placeholder {
    color: var(--text-dim);
}

/* Date inputs - fix for light theme */
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
}

/* Tables */
html[data-theme="light"] table th {
    background: var(--bg-header);
    border-color: var(--border);
}

html[data-theme="light"] table td {
    border-color: var(--border);
}

html[data-theme="light"] table tr:hover td {
    background: var(--bg-hover);
}

/* Cards and panels */
html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .sidebar,
html[data-theme="light"] .info-panel {
    box-shadow: var(--shadow-sm);
}

/* Header shadow */
html[data-theme="light"] .header {
    box-shadow: var(--shadow-sm);
}

/* Modal overlay */
html[data-theme="light"] .modal-overlay {
    background: var(--bg-overlay);
}

/* Toast notifications */
html[data-theme="light"] .toast {
    box-shadow: var(--shadow-lg);
}

/* Status dot glow - reduce in light mode */
html[data-theme="light"] .status-dot {
    box-shadow: 0 0 4px var(--status-online);
}

/* Scrollbar styling for light theme */
html[data-theme="light"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html[data-theme="light"] ::-webkit-scrollbar-track {
    background: var(--bg);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 5px;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
}

/* Scrollbar styling for dark theme */
html[data-theme="dark"] ::-webkit-scrollbar,
html:not([data-theme]) ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track,
html:not([data-theme]) ::-webkit-scrollbar-track {
    background: var(--bg);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb,
html:not([data-theme]) ::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 5px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
html:not([data-theme]) ::-webkit-scrollbar-thumb:hover {
    background: var(--border-light);
}

/* ============================================
   TRANSITION FOR SMOOTH THEME SWITCHING
   ============================================ */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.2s ease, 
                border-color 0.2s ease, 
                color 0.2s ease,
                box-shadow 0.2s ease !important;
}

/* ============================================
   LIGHT THEME - INLINE STYLE OVERRIDES
   For elements with hardcoded colors in HTML
   ============================================ */

/* Override hardcoded gray labels (#6b7280) */
html[data-theme="light"] [style*="color: #6b7280"],
html[data-theme="light"] [style*="color:#6b7280"] {
    color: #374151 !important;
}

/* Override hardcoded light values (#d1d5db) */
html[data-theme="light"] [style*="color: #d1d5db"],
html[data-theme="light"] [style*="color:#d1d5db"] {
    color: #1f2937 !important;
}

/* Override hardcoded muted text (#8e8e8e) */
html[data-theme="light"] [style*="color: #8e8e8e"],
html[data-theme="light"] [style*="color:#8e8e8e"] {
    color: #4b5563 !important;
}

/* Stat values - make them dark and readable */
html[data-theme="light"] .stat-value {
    color: #111827 !important;
}

html[data-theme="light"] #live-delta,
html[data-theme="light"] #live-grid,
html[data-theme="light"] #live-dev,
html[data-theme="light"] #live-pv,
html[data-theme="light"] #live-bess,
html[data-theme="light"] #live-soc,
html[data-theme="light"] #live-afrr {
    color: #111827 !important;
}

/* Colored stat values in light theme */
html[data-theme="light"] .stat-value.green,
html[data-theme="light"] .text-green,
html[data-theme="light"] [style*="color: #73bf69"],
html[data-theme="light"] [style*="color:#73bf69"] {
    color: #15803d !important;
}

html[data-theme="light"] .stat-value.red,
html[data-theme="light"] .text-red,
html[data-theme="light"] [style*="color: #f2495c"],
html[data-theme="light"] [style*="color:#f2495c"] {
    color: #dc2626 !important;
}

html[data-theme="light"] .stat-value.cyan,
html[data-theme="light"] .text-cyan,
html[data-theme="light"] [style*="color: #06b6d4"],
html[data-theme="light"] [style*="color:#06b6d4"] {
    color: #0e7490 !important;
}

html[data-theme="light"] .stat-value.yellow,
html[data-theme="light"] .text-yellow,
html[data-theme="light"] [style*="color: #fade2a"],
html[data-theme="light"] [style*="color:#fade2a"] {
    color: #a16207 !important;
}

html[data-theme="light"] .stat-value.orange,
html[data-theme="light"] .text-orange,
html[data-theme="light"] [style*="color: #ff9830"],
html[data-theme="light"] [style*="color:#ff9830"] {
    color: #c2410c !important;
}

html[data-theme="light"] .stat-value.purple,
html[data-theme="light"] .text-purple,
html[data-theme="light"] [style*="color: #b877d9"],
html[data-theme="light"] [style*="color:#b877d9"] {
    color: #7c3aed !important;
}

html[data-theme="light"] .stat-value.blue,
html[data-theme="light"] .text-blue,
html[data-theme="light"] [style*="color: #5794f2"],
html[data-theme="light"] [style*="color:#5794f2"] {
    color: #2563eb !important;
}

/* Current interval values */
html[data-theme="light"] #interval-dam,
html[data-theme="light"] #interval-idm,
html[data-theme="light"] #interval-afrr,
html[data-theme="light"] #interval-damas,
html[data-theme="light"] #interval-target,
html[data-theme="light"] #interval-delivered,
html[data-theme="light"] #interval-deviation {
    color: #111827 !important;
}

/* Panel titles and labels */
html[data-theme="light"] .panel-title {
    color: #111827 !important;
}

/* Legend items */
html[data-theme="light"] .legend-item {
    color: #374151 !important;
}

/* ============================================
   PRINT STYLES (always light)
   ============================================ */
@media print {
    :root {
        --bg: #ffffff;
        --bg-panel: #ffffff;
        --bg-card: #ffffff;
        --bg-header: #f5f7fa;
        --border: #e2e5e9;
        --text: #1a1d21;
        --text-muted: #5f6368;
    }
    
    .theme-switcher {
        display: none !important;
    }
}