/* ── Hette brand design tokens ─────────────────────────────────────────────── */
/* Mirrors hette.org — dark energy-tech aesthetic */

:root {
    /* Backgrounds */
    --hette-bg:           oklch(0.16 0.02 160);   /* page background */
    --hette-surface:      oklch(0.19 0.025 160);  /* card / panel */
    --hette-surface-el:   oklch(0.22 0.03 160);   /* elevated surface */

    /* Text */
    --hette-fg:           oklch(0.97 0.01 160);   /* primary text */
    --hette-muted:        oklch(0.68 0.03 160);   /* muted / secondary text */

    /* Accents */
    --hette-green:        oklch(0.82 0.18 155);   /* brand green */
    --hette-green-glow:   oklch(0.88 0.20 152);   /* hover green */
    --hette-gold:         oklch(0.82 0.17 82);    /* brand gold / solar */
    --hette-teal:         oklch(0.76 0.13 185);   /* battery / secondary */

    /* Structure */
    --hette-border:       oklch(0.28 0.03 160);
    --hette-radius:       0.75rem;
    --hette-radius-sm:    0.5rem;

    /* Font */
    --hette-font:         "Inter", system-ui, sans-serif;
    --hette-font-mono:    "JetBrains Mono", "Courier New", monospace;
}

/* ── Base ──────────────────────────────────────────────────────────────────── */

body {
    background-color: var(--hette-bg) !important;
    color: var(--hette-fg) !important;
    font-family: var(--hette-font) !important;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--hette-fg) !important;
}

/* ── Navbar ────────────────────────────────────────────────────────────────── */

.hette-navbar,
.navbar.bg-dark {
    background-color: color-mix(in oklab, var(--hette-bg) 70%, transparent) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid var(--hette-border) !important;
    box-shadow: none !important;
}

.brand-title   { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; color: var(--hette-fg) !important; }
.brand-sub     { font-size: 0.78rem; color: var(--hette-muted) !important; }
.brand-market-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-family: var(--hette-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hette-green);
    border: 1px solid color-mix(in oklab, var(--hette-green) 40%, transparent);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

/* ── Cards ─────────────────────────────────────────────────────────────────── */

.card {
    background-color: var(--hette-surface) !important;
    border-color: var(--hette-border) !important;
    border-radius: var(--hette-radius) !important;
    box-shadow: none !important;
}

.card-header {
    background-color: var(--hette-surface-el) !important;
    border-color: var(--hette-border) !important;
    color: var(--hette-fg) !important;
}

.card-body { color: var(--hette-fg) !important; }

/* Subtle green-tinted gradient on hover, matching website gradient-card */
.card:hover {
    border-color: color-mix(in oklab, var(--hette-green) 40%, transparent) !important;
    transition: border-color 0.2s;
}

/* ── Tabs ───────────────────────────────────────────────────────────────────── */

.nav-tabs {
    border-color: var(--hette-border) !important;
}

.nav-tabs .nav-link {
    color: var(--hette-muted) !important;
    border-color: transparent !important;
    font-size: 0.875rem;
    transition: color 0.15s;
}

.nav-tabs .nav-link:hover {
    color: var(--hette-fg) !important;
    border-color: transparent !important;
    background: transparent !important;
}

.nav-tabs .nav-link.active {
    background-color: transparent !important;
    border-color: transparent !important;
    border-bottom: 2px solid var(--hette-green) !important;
    color: var(--hette-fg) !important;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */

.btn-primary {
    background-color: var(--hette-green) !important;
    border-color: var(--hette-green) !important;
    color: oklch(0.16 0.02 160) !important;
    font-weight: 500;
    border-radius: 999px !important;
}
.btn-primary:hover {
    background-color: var(--hette-green-glow) !important;
    border-color: var(--hette-green-glow) !important;
}

/* Run Analysis button — gold accent */
.btn-warning, #run-btn {
    background-color: var(--hette-gold) !important;
    border-color: var(--hette-gold) !important;
    color: oklch(0.16 0.02 160) !important;
    font-weight: 500;
    border-radius: 999px !important;
}
.btn-warning:hover {
    background-color: color-mix(in oklab, var(--hette-gold) 90%, white) !important;
}

.btn-success {
    background-color: transparent !important;
    border-color: var(--hette-green) !important;
    color: var(--hette-green) !important;
    border-radius: 999px !important;
    font-weight: 500;
}
.btn-success:hover {
    background-color: color-mix(in oklab, var(--hette-green) 15%, transparent) !important;
}

.btn-secondary, .btn-outline-secondary {
    background-color: transparent !important;
    border-color: var(--hette-border) !important;
    color: var(--hette-muted) !important;
    border-radius: var(--hette-radius-sm) !important;
}
.btn-secondary:hover {
    border-color: var(--hette-green) !important;
    color: var(--hette-green) !important;
    background-color: transparent !important;
}

.btn-outline-danger {
    border-color: oklch(0.6 0.22 25) !important;
    color: oklch(0.6 0.22 25) !important;
}
.btn-outline-danger:hover {
    background-color: color-mix(in oklab, oklch(0.6 0.22 25) 20%, transparent) !important;
}

/* ── Input fields ───────────────────────────────────────────────────────────── */

.form-control, .form-select, select {
    background-color: var(--hette-surface-el) !important;
    border-color: var(--hette-border) !important;
    color: var(--hette-fg) !important;
    border-radius: var(--hette-radius-sm) !important;
}
.form-control:focus, .form-select:focus {
    background-color: var(--hette-surface-el) !important;
    border-color: var(--hette-green) !important;
    color: var(--hette-fg) !important;
    box-shadow: 0 0 0 0.15rem color-mix(in oklab, var(--hette-green) 25%, transparent) !important;
}

/* Number inputs */
input[type="number"] {
    background-color: var(--hette-surface-el) !important;
    border-color: var(--hette-border) !important;
    color: var(--hette-fg) !important;
}

/* ── Checkboxes and switches ─────────────────────────────────────────────── */

.form-check-input:checked {
    background-color: var(--hette-green) !important;
    border-color: var(--hette-green) !important;
}

/* ── Tables ─────────────────────────────────────────────────────────────────── */

.table-dark {
    --bs-table-bg: var(--hette-surface) !important;
    --bs-table-striped-bg: var(--hette-surface-el) !important;
    --bs-table-hover-bg: color-mix(in oklab, var(--hette-green) 8%, var(--hette-surface)) !important;
    --bs-table-border-color: var(--hette-border) !important;
    color: var(--hette-fg) !important;
}

/* ── Loading spinner ─────────────────────────────────────────────────────── */

.dash-spinner { border-top-color: var(--hette-green) !important; }

/* ── Badge ───────────────────────────────────────────────────────────────── */

.hette-badge, .badge.bg-secondary {
    background-color: color-mix(in oklab, var(--hette-gold) 15%, var(--hette-surface-el)) !important;
    color: var(--hette-gold) !important;
    border: 1px solid color-mix(in oklab, var(--hette-gold) 35%, transparent) !important;
    border-radius: 999px !important;
    font-family: var(--hette-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.68rem !important;
    font-weight: 400 !important;
}

/* ── Alerts / info boxes ─────────────────────────────────────────────────── */

.alert-info {
    background-color: color-mix(in oklab, var(--hette-teal) 12%, var(--hette-surface)) !important;
    border-color: color-mix(in oklab, var(--hette-teal) 30%, transparent) !important;
    color: var(--hette-fg) !important;
}

/* ── Metric cards (results summary) ─────────────────────────────────────── */

.metric-hero {
    background: color-mix(in oklab, var(--hette-green) 5%, var(--hette-surface)) !important;
    border: 1px solid var(--hette-border);
    border-radius: var(--hette-radius);
    padding: 1rem;
    height: 100%;
    transition: background 0.2s, border-color 0.2s;
}
.metric-hero:hover {
    background: color-mix(in oklab, var(--hette-green) 10%, var(--hette-surface)) !important;
    border-color: color-mix(in oklab, var(--hette-green) 40%, transparent) !important;
}

.metric-value {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    font-family: "Michroma", var(--hette-font), sans-serif;
}
.metric-label {
    font-family: var(--hette-font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--hette-muted) !important;
    margin-bottom: 0.25rem;
}
.metric-sub { font-size: 0.78rem; color: var(--hette-muted) !important; margin-top: 0.2rem; }

/* ── Scenario comparison table ──────────────────────────────────────────── */

.scenario-table td, .scenario-table th { vertical-align: middle; font-size: 0.87rem; }
.scenario-table .val { font-weight: 600; }
.scenario-table .cat { color: var(--hette-muted) !important; }

/* ── Section dividers ────────────────────────────────────────────────────── */

.sec-header {
    font-family: var(--hette-font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--hette-muted) !important;
    font-weight: 400;
}
.sec-header::before { content: "// "; color: var(--hette-green); }
.sec-divider { border-top: 1px solid var(--hette-border); margin: 4px 0 10px; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

#sidebar-scroll {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--hette-border) transparent;
}
#sidebar-scroll::-webkit-scrollbar { width: 4px; }
#sidebar-scroll::-webkit-scrollbar-thumb { background: var(--hette-border); border-radius: 4px; }
#sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
#sidebar-scroll .card-body { padding: 0.875rem; }

/* ── Tariff radio buttons ─────────────────────────────────────────────────── */

.tariff-radio .form-check { display: inline-block; margin-right: 0.5rem; }
.tariff-radio .form-check-input { display: none; }
.tariff-radio .form-check-label {
    cursor: pointer;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--hette-border);
    font-size: 0.82rem;
    color: var(--hette-muted);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tariff-radio .form-check-input:checked + .form-check-label {
    background: color-mix(in oklab, var(--hette-green) 20%, transparent);
    border-color: color-mix(in oklab, var(--hette-green) 50%, transparent);
    color: var(--hette-fg);
}

/* ── Language toggle ─────────────────────────────────────────────────────── */

.lang-radio .form-check { display: inline-block; margin-right: 0.25rem; }
.lang-radio .form-check-input { display: none; }
.lang-radio .form-check-label {
    cursor: pointer;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--hette-border);
    font-size: 0.75rem;
    color: var(--hette-muted);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lang-radio .form-check-input:checked + .form-check-label {
    background: color-mix(in oklab, var(--hette-green) 20%, transparent);
    border-color: color-mix(in oklab, var(--hette-green) 50%, transparent);
    color: var(--hette-fg);
}

/* ── Misc ────────────────────────────────────────────────────────────────── */

#run-status      { font-size: 0.78rem; min-height: 1.2em; color: var(--hette-muted) !important; }
.js-plotly-plot .plotly .modebar { opacity: 0.35; }

/* Collapse toggle buttons */
.btn[style*="backgroundColor: rgba(255,255,255,0.04)"] {
    border-color: var(--hette-border) !important;
    color: var(--hette-muted) !important;
    background-color: var(--hette-surface-el) !important;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.hette-footer {
    border-top: 1px solid var(--hette-border);
    margin-top: 4rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--hette-muted);
}
.hette-footer a {
    color: var(--hette-muted);
    text-decoration: none;
    transition: color 0.15s;
}
.hette-footer a:hover { color: var(--hette-green); }