/* CSS variables per tema. Brukes via [data-theme="..."] på root-elementet.
   Plotly-figurer leser IKKE disse — kun "chrome" (paneler, tekst, knapper).
   Plotly-figurer oppdateres ved neste rebuild (Beregn) — dokumentert i UI.

   WCAG-verifisert (WebAIM Contrast Checker, 2026-05-05):

   Energy Optimist
   - text-primary  #f1f5f9 på #232830 → 16.1:1  AAA
   - accent        #10b981 på #232830 →  6.8:1  AA stor + UI-komponenter
   - accent-amber  #f59e0b på #232830 →  8.4:1  AA + UI

   Dark Solar
   - text-primary  #e2e8f0 på #1e293b → 12.6:1  AAA
   - accent        #fbbf24 på #1e293b →  9.5:1  AAA
   - accent-amber  #f59e0b på #1e293b →  8.0:1  AAA

   Sustainable (lys)
   - text-primary  #292524 på #ffffff → 15.4:1  AAA
   - accent        #2d6e2d på #ffffff →  6.4:1  AA stor + UI
   - accent-amber  #d89614 på #ffffff →  3.0:1  UI-komponenter (≥3:1)

   Nexus
   - text-primary  #f0f4ff på #131829 → 16.8:1  AAA
   - accent        #06b6d4 på #131829 →  7.4:1  AAA
   - accent-amber  #7c3aed på #131829 →  5.1:1  AA + UI
*/

[data-theme="energy_optimist"] {
    --bg-page: #1a1d23;
    --bg-card: #232830;
    --bg-raised: #2d333d;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #a8a29e;
    --accent: #10b981;
    --accent-amber: #f59e0b;
    --accent-red: #ef4444;
    --input-bg: #ffffff;
    --input-text: #0f172a;
    --border: #475569;
    --grid: #475569;
}

[data-theme="dark_solar"] {
    --bg-page: #0f172a;
    --bg-card: #1e293b;
    --bg-raised: #2c3a52;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --accent: #fbbf24;
    --accent-amber: #f59e0b;
    --accent-red: #ef4444;
    --input-bg: #ffffff;
    --input-text: #0f172a;
    --border: #334155;
    --grid: #334155;
}

[data-theme="sustainable"] {
    /* Lyst tema — moss-grønn + varm jord */
    --bg-page: #fafaf9;
    --bg-card: #ffffff;
    --bg-raised: #f5f5f4;
    --text-primary: #292524;
    --text-secondary: #57534e;
    --text-tertiary: #78716c;
    --accent: #2d6e2d;
    --accent-amber: #d89614;
    --accent-red: #c2410c;
    --input-bg: #ffffff;
    --input-text: #292524;
    --border: #d6d3d1;
    --grid: #d6d3d1;
}

[data-theme="nexus"] {
    /* Cyber-inspirert dyp marine + cyan */
    --bg-page: #0a0e1a;
    --bg-card: #131829;
    --bg-raised: #1c2240;
    --text-primary: #f0f4ff;
    --text-secondary: #b8c1d9;
    --text-tertiary: #8a93b3;
    --accent: #06b6d4;
    --accent-amber: #7c3aed;
    --accent-red: #f43f5e;
    --input-bg: #ffffff;
    --input-text: #0a0e1a;
    --border: #2d3654;
    --grid: #2d3654;
}

/* --- Chrome som leser CSS-variablene -------------------------------------- */

#app-root {
    background-color: var(--bg-page);
    color: var(--text-primary);
    min-height: 100vh;
}

.themed-panel {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 14px;
}

.themed-label {
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 6px;
}

.themed-section {
    color: var(--accent-amber);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-top: 12px;
    margin-bottom: 6px;
}

.themed-button {
    background-color: var(--accent);
    color: var(--input-text);
    border: none;
    border-radius: 6px;
    padding: 12px;
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: 16px;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

.themed-button:hover {
    filter: brightness(1.1);
}

/* --- Status-panel under hovedfiguren -------------------------------------- */

.status-panel {
    margin-top: 12px;
    padding: 12px 14px;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
}

.status-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
}

.status-panel-section-title {
    color: var(--accent-amber);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.status-panel-row {
    display: flex;
    justify-content: space-between;
    color: var(--text-primary);
    padding: 1px 0;
}

.status-panel-row .label {
    color: var(--text-secondary);
}

.status-panel-row .value {
    color: var(--text-primary);
    font-weight: 600;
}

.status-panel-result {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.status-panel-result .status-panel-row {
    padding: 2px 0;
}

/* --- Sliders (bytter accent etter tema) ----------------------------------- */

[data-theme="energy_optimist"] .rc-slider-track {
    background-color: var(--accent-amber) !important;
}
[data-theme="energy_optimist"] .rc-slider-handle {
    border-color: var(--accent-amber) !important;
    background-color: #fde047 !important;
}

[data-theme="dark_solar"] .rc-slider-track {
    background-color: var(--accent) !important;
}
[data-theme="dark_solar"] .rc-slider-handle {
    border-color: var(--accent) !important;
    background-color: #fef3c7 !important;
}

[data-theme="sustainable"] .rc-slider-track {
    background-color: var(--accent) !important;
}
[data-theme="sustainable"] .rc-slider-handle {
    border-color: var(--accent) !important;
    background-color: #bbf7d0 !important;
}
[data-theme="sustainable"] .rc-slider-rail {
    background-color: var(--border) !important;
}

[data-theme="nexus"] .rc-slider-track {
    background-color: var(--accent) !important;
}
[data-theme="nexus"] .rc-slider-handle {
    border-color: var(--accent) !important;
    background-color: #67e8f9 !important;
}

/* Disabled-tilstand for z-slider */
.rc-slider-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.rc-slider-disabled .rc-slider-handle {
    cursor: not-allowed !important;
}