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

: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; }

.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: #0d1a10 !important;
    font-weight: 500;
    transition: background 0.15s, box-shadow 0.15s;
}
.btn-primary:hover {
    background-color: var(--hette-green-glow) !important;
    border-color: var(--hette-green-glow) !important;
    box-shadow: 0 0 24px -6px var(--hette-green) !important;
}

.btn-outline-secondary {
    border-color: var(--hette-border) !important;
    color: var(--hette-muted) !important;
}
.btn-outline-secondary:hover {
    background-color: var(--hette-surface-el) !important;
    color: var(--hette-fg) !important;
    border-color: var(--hette-border) !important;
}

/* ── Form controls ──────────────────────────────────────────────────────────── */

.form-control,
.form-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: color-mix(in oklab, var(--hette-green) 70%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--hette-green) 15%, transparent) !important;
    color: var(--hette-fg) !important;
}

.form-label { font-weight: 500; color: var(--hette-fg) !important; }

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) !important;
    border-radius: var(--hette-radius) !important;
    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;
}
.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; }

/* ── Financial summary table ─────────────────────────────────────────────── */

.financial-table td { padding: 0.4rem 0.5rem; vertical-align: middle; }
.financial-table .metric-label-cell { color: var(--hette-muted) !important; font-size: 0.9rem; }
.financial-table .metric-value-cell { font-weight: 600; text-align: right; }

/* ── 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 scroll ──────────────────────────────────────────────────────── */

#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; }

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

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

/* ── 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); }