/* ── HetteNP dark-mode polish ──────────────────────────────────────────── */

body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Cards: no border, consistent radius */
.card {
    border: none;
    border-radius: 8px;
}

.card-body {
    padding: 1.25rem;
}

/* ── Hero metric card (matches HetteIT .metric-hero) ── */
.metric-hero {
    background: rgba(255,255,255,0.05);
    border-radius: 0.5rem;
    padding: 1rem;
    height: 100%;
    transition: background 0.2s;
}
.metric-hero:hover { background: rgba(255,255,255,0.09); }

.metric-value {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
}
.metric-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    opacity: 0.65;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}
.metric-sub {
    font-size: 0.78rem;
    opacity: 0.5;
    margin-top: 0.2rem;
}

/* ── Section header divider (matches HetteIT .sec-header / .sec-divider) ── */
.sec-header {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.6;
    font-weight: 700;
}
.sec-divider {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 4px 0 10px;
}

/* ── Navbar brand ── */
.brand-title { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
.brand-sub   { font-size: 0.78rem; opacity: 0.65; }

/* ── Form labels ── */
.form-label { font-weight: 500; }

/* ── Dash 4.x dcc.Dropdown dark-mode overrides ─────────────────────────────
   Dash 4 replaced react-select (Select-* classes) with a custom component
   whose class names all start with dash-dropdown-*.  The component uses
   --Dash-* CSS custom properties for colours; these are undefined in the
   Bootswatch DARKLY theme, causing <button> backgrounds to fall back to the
   browser's system-UI light grey while text inherits DARKLY's white body
   colour → white-on-white.  Fix: define the variables + hard-override colours.
   ─────────────────────────────────────────────────────────────────────────── */

/* Define the Dash design-system tokens for our dark theme.
   Scoping to .dash-dropdown-wrapper keeps them from interfering with
   any future Dash light-themed pages or other components. */
.dash-dropdown-wrapper {
    --Dash-Fill-Inverse-Strong:    #3a3a3a;
    --Dash-Fill-Interactive-Strong:#FFB900;
    --Dash-Fill-Interactive-Weak:  rgba(255,185,0,0.15);
    --Dash-Fill-Disabled:          rgba(255,255,255,0.15);
    --Dash-Stroke-Strong:          #555;
    --Dash-Text-Strong:            #f8f9fa;
    --Dash-Text-Weak:              #adb5bd;
    --Dash-Text-Disabled:          rgba(248,249,250,0.40);
    --Dash-Shading-Strong:         rgba(0,0,0,0.5);
    --Dash-Shading-Weak:           rgba(0,0,0,0.2);
    --Dash-Spacing:                4px;
}

/* Trigger button — the outer <button class="dash-dropdown"> */
.dash-dropdown {
    background-color: #3a3a3a !important;
    color:            #f8f9fa !important;
    border:           1px solid #555 !important;
    border-radius:    6px !important;
}
.dash-dropdown:focus {
    border-color: #FFB900 !important;
    outline:      1px solid #FFB900 !important;
}

/* Selected value text (and individual items in multi-select) */
.dash-dropdown-value,
.dash-dropdown-value-item {
    color: #f8f9fa !important;
}

/* Placeholder */
.dash-dropdown-placeholder {
    color: rgba(248,249,250,0.40) !important;
}

/* Chevron / trigger icon */
.dash-dropdown-trigger-icon {
    color: #adb5bd !important;
    fill:  #adb5bd !important;
}

/* Dropdown panel */
.dash-dropdown-content {
    background-color: #3a3a3a !important;
    border:           1px solid #555 !important;
    border-radius:    6px !important;
    z-index:          9999 !important;
    color:            #f8f9fa !important;
}

/* Options */
.dash-dropdown-option {
    background-color: #3a3a3a !important;
    color:            #f8f9fa !important;
}
.dash-dropdown-option:hover {
    background-color: #495057 !important;
    color:            #FFB900 !important;
}
/* Selected option (single-select uses hidden radio; multi uses checkbox) */
.dash-dropdown-option:has(input:checked) {
    background-color: #375a7f !important;
    color:            #f8f9fa !important;
}

/* Search field */
.dash-dropdown-search-container {
    background-color: #444 !important;
    border-color:     #555 !important;
}
.dash-dropdown-search {
    background-color: transparent !important;
    color:            #f8f9fa !important;
}

/* Select-all / deselect-all action buttons */
.dash-dropdown-actions {
    border-color: #555 !important;
}
.dash-dropdown-action-button {
    color: #adb5bd !important;
}
.dash-dropdown-action-button:hover {
    color: #FFB900 !important;
}

/* Clear (×) button */
.dash-dropdown-clear {
    color: #adb5bd !important;
}
.dash-dropdown-clear:hover {
    color: #FFB900 !important;
}

/* ── Tables ── */
.table-sm td {
    padding: 0.3rem 0.5rem;
    vertical-align: middle;
}
.scenario-table td, .scenario-table th { vertical-align: middle; font-size: 0.87rem; }
.scenario-table .val { font-weight: 600; }
.scenario-table .cat { opacity: 0.65; }

/* Financial summary table */
.financial-table td { padding: 0.4rem 0.5rem; vertical-align: middle; }
.financial-table .metric-label-cell { opacity: 0.75; font-size: 0.9rem; }
.financial-table .metric-value-cell { font-weight: 600; text-align: right; }

/* ── Plotly chart container ── */
.js-plotly-plot .plotly .modebar { opacity: 0.4; }
.js-plotly-plot .plotly { border-radius: 4px; }

/* ── Loading overlay ── */
._dash-loading-callback { opacity: 0.5; }

/* ── Collapse toggle buttons (dark-themed) ── */
.collapse-toggle-btn {
    font-size: 0.78rem !important;
    color: #ced4da !important;
    border-color: #495057 !important;
    background-color: rgba(255,255,255,0.04) !important;
}

/* ── Status badge (run-status) ── */
#simulation-error { font-size: 0.9rem; }