body, * {
    font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
}
body {
    background-color: #08090a !important;
}
:root {
    --Dash-Fill-Interactive-Strong: rgb(5, 13, 24);
}

html {
    font-size: 12px;
}

/* Reusable muted blue label text */
.text-label-blue {
    color: #8aaccc;
}

/* Reusable small grey helper text (footnotes, captions, etc.) */
.text-muted-small {
    font-size: 0.8rem;
    color: #95a5a6;
    margin-bottom: 0;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Reusable white helper text (notes/captions on dark backgrounds) */
.text-note-white {
    color: #ffffff;
    margin-bottom: 0;
}

.app-container.container-fluid {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    min-width: 468px;
}

.app-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 100vh;
}
.app-layout > *:first-child {
    margin-bottom: 0 !important;
}

/* Header: two columns; sticky on scroll; left takes remaining space, right fits icons */
.app-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    min-height: 3rem;
    margin: 0 !important;
    background-color: #08090a;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #25344c;
}
.header-left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.header-left .app-header-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
}
.app-header-title {
    margin: 0;
    font-size: 1.5rem;
    color: #ecf0f1;
}

/* Main content spacing */
.content {
    padding: 2rem 2rem;
    padding-top: 1rem;
}

/* Header summary metrics box (label + annualised cost + total emissions) */
.header-summary-metrics-label {
    color: white;
    font-size: 0.875rem;
}
.header-summary-metrics-box {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background-color: #0f1419;
    border-radius: 0.5rem;
    padding: 0.35rem 0.75rem;
}

/* Header summary metrics (annualised cost, total emissions) */
.header-summary-metric {
    color: #93cc8a;
    font-size: 0.875rem;
    margin-left: 0.25rem;
}
.header-summary-metrics-box .header-summary-metric:nth-child(2) {
    margin-left: 0;
}
.header-summary-metric:not(:first-of-type) {
    border-left: 1px solid #25344c;
    padding-left: 0.75rem;
    margin-left: 0;
}

/* Hide header results summary on narrow screens (disappear instead of wrap) */
@media (max-width: 680px) {
    .header-summary-metrics-box {
        display: none !important;
    }
}

/* About button: outline only, same effective bg as app so it stays subtle */
.about-btn {
    background-color: transparent;
}
.about-btn:hover {
    background-color: #1b5389 !important;
    border-color: #1b5389 !important;
    color: #ecf0f1 !important;
}

/* App modals (About, optimiser): match app dark theme */
.app-modal .modal-content {
    background-color: #101113 !important;
    border-color: #38393b !important;
    color: #c3c1bd !important;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.5);
}
.app-modal .modal-header {
    background-color: #09090b !important;
    color: #c3c1bd !important;
    border-bottom-color: #38393b !important;
}
.app-modal .modal-body {
    background-color: #101113 !important;
    color: #c3c1bd !important;
}
.app-modal .modal-footer {
    background-color: #101113 !important;
    border-top-color: #38393b !important;
}
.app-modal .modal-body a {
    color: #7aabd4;
}

.header-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.header-icon {
    height: 1.25rem;
    width: 1.25rem;
    opacity: 0.9;
}
.header-icon:hover {
    opacity: 1;
}

/* dcc.Dropdown dark theme – match DARKLY bootstrap theme */
.Select-control {
    background-color: #2c3e50 !important;
    border-color: #34495e !important;
    color: #ecf0f1 !important;
}
.Select-value-label,
.Select-placeholder {
    color: #ecf0f1 !important;
}
.Select-input > input {
    color: #ecf0f1 !important;
}
.Select-menu-outer {
    background-color: #2c3e50 !important;
    border-color: #34495e !important;
}
.Select-option {
    background-color: #2c3e50 !important;
    color: #ecf0f1 !important;
}
.Select-option.is-focused {
    background-color: #34495e !important;
    color: #ecf0f1 !important;
}
.Select-option.is-selected {
    background-color: #3498db !important;
    color: #ecf0f1 !important;
}
.Select-arrow {
    border-top-color: #ecf0f1 !important;
}

/* Accordion dark theme – match DARKLY */
.accordion,
.accordion-item {
    border-color: #08090a !important;
}
.accordion-item + .accordion-item {
    margin-top: 0.25rem;
}
.accordion-button {
    background-color: #0c345b !important;
    color: #ecf0f1 !important;
    border-color: #34495e !important;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.accordion-button:hover,
.accordion-button:not(.collapsed):hover {
    background-color: #3c648a !important;
}
.accordion-button:not(.collapsed) {
    background-color: #1b5389 !important;
    color: #ecf0f1 !important;
    box-shadow: none;
}
.accordion-button:focus {
    border-color: #34495e;
    box-shadow: none;
}
.accordion-button::after {
    filter: brightness(0) invert(1);
}
.accordion-body {
    background-color: #08090a;
    color: #ecf0f1;
    border-color: #34495e;
    --bs-accordion-body-padding-x: 0;
}

/* Solar data section: heading / table / footer spacing */
.solar-data-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem !important;
}
.solar-data-footer {
    margin-top: 0.75rem;
}

/* Solar PV data table */
#solar-data-table {
    border: 1px solid #2a3f55;
    border-radius: 6px;
    overflow: hidden;
    font-size: 1rem;
    color: #c8d8e8;
}
#solar-data-table table {
    margin-bottom: 0 !important;
    table-layout: fixed;
    width: 100%;
}
#solar-data-table th:nth-child(2),
#solar-data-table td:nth-child(2) {
    width: 5.5rem;
    min-width: 5.5rem;
    text-align: right;
}
#solar-data-table thead tr {
    background-color: #0f2035 !important;
    border-bottom: 1px solid #2a3f55;
}
#solar-data-table th {
    background-color: #0f2035 !important;
    color: inherit !important;
    padding: 0.35rem 0.6rem !important;
    border: none !important;
    font-weight: normal !important;
}
#solar-data-table tbody tr:nth-child(odd) {
    background-color: #0d1e30 !important;
}
#solar-data-table tbody tr:nth-child(even) {
    background-color: #091624 !important;
}
#solar-data-table tbody tr:last-child td {
    border-bottom: none !important;
}
#solar-data-table td {
    background-color: transparent !important;
    color: #c8d8e8;
    padding: 0.3rem 0.5rem !important;
    border-color: #1a2e42 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    word-break: break-word;
}

/* Map graph: responsive height */
.map-with-helper {
    position: relative;
}
.map-helper-overlay {
    position: absolute;
    top: 0.75rem;
    left: 1rem;
    z-index: 10;
    pointer-events: none;
    background-color: rgba(8, 9, 10, 0.85);
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
}
/* Wrapped colorbar title overlay – full text, no wording change */
.map-colorbar-title {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    max-width: 5.5em;
    line-height: 1.25;
    font-size: 0.8rem;
    color: #e0e0e0;
    pointer-events: none;
    z-index: 10;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: right;
}
.map-graph {
    height: 300px;
    max-height: 300px;
}
@media (max-width: 991px) {
    .map-graph { height: 260px; max-height: 260px; }
}
@media (max-width: 767px) {
    .map-graph {
        height: auto;
        max-height: 260px;
        aspect-ratio: 4 / 3;
    }
}

/* Map graph: dark background before figure is loaded (hydration gap fallback) */
#map {
    background-color: rgb(5, 13, 24) !important;
    border-radius: 4px;
}
#map .js-plotly-plot,
#map .plot-container,
#map .svg-container {
    background-color: rgb(5, 13, 24) !important;
}

/* Hide any colorbar title (we use .map-colorbar-title overlay); fallback if Plotly still renders one */
#map .cbtitle {
    display: none !important;
    visibility: hidden !important;
}

/* Plotly colorbar text – map backend may ignore tickfont/title font, so override with CSS */
#map .colorbar text,
#map .cbtitle text,
#map .cbaxis text {
    fill: #e0e0e0 !important;
    color: #e0e0e0 !important;
    font-size: 10px !important;
}

/* Optimiser form: row disabled state + native range slider track visibility */
.row-disabled .Select-control {
    opacity: 0.5;
    pointer-events: none;
}
.row-slider-wrapper {
    width: 100%;
    min-width: 120px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* Let the slider take remaining space; slider doesn’t wrap */
.row-slider-wrapper .row-slider-dcc,
.row-slider-wrapper .row-rangeslider-dcc {
    flex: 1;
    min-width: 0;
}
.row-slider-input.form-range {
    width: 100%;
    height: 1.25rem;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}
.row-slider-input.form-range::-webkit-slider-runnable-track {
    height: 8px;
    background: #34495e;
    border-radius: 4px;
}
.row-slider-input.form-range::-moz-range-track {
    height: 8px;
    background: #34495e;
    border-radius: 4px;
}
/* Invalid low range (e.g. 0–10 when min is 10): left portion of track grey */
.row-slider-input.slider-invalid-low::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #5a6a7a 0%, #5a6a7a 10%, #34495e 10%, #34495e 100%);
}
.row-slider-input.slider-invalid-low::-moz-range-track {
    background: linear-gradient(to right, #5a6a7a 0%, #5a6a7a 10%, #34495e 10%, #34495e 100%);
}
.row-slider-input.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -5px;
    background: #3498db;
    border-radius: 50%;
    border: 2px solid #282828;
    cursor: pointer;
}
.row-slider-input.form-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #3498db;
    border-radius: 50%;
    border: 2px solid #282828;
    cursor: pointer;
}
.row-disabled .row-slider-input {
    opacity: 0.5;
    pointer-events: none;
}

/* dcc.Slider / dcc.RangeSlider in optimiser form: full width + theme colours (rc-slider) */
.row-slider-wrapper .row-slider-dcc,
.row-slider-wrapper .row-rangeslider-dcc {
    width: 100%;
}
/* Dash 4.0 slider direct-input: scope to optimiser form so border/background apply (single class, no !important conflict) */
.row-slider-wrapper .row-slider-dcc .dash-range-slider-input {
    color: #ecf0f1;
    background-color: #2c3e50;
    border: 1px solid #375a7f;
    font-size: 0.875rem;
}
/* Workaround: dcc applies a wrapper with padding 0 25px 25px (from tooltip logic), so the
   slider sits at the top of the box and looks misaligned. Cancel the bottom padding. */
.row-slider-wrapper .row-slider-dcc,
.row-slider-wrapper .row-rangeslider-dcc {
    margin-bottom: -20px !important;
}
.row-slider-wrapper .rc-slider-rail {
    background-color: #34495e !important;
    height: 8px !important;
    border-radius: 4px !important;
}
.row-slider-wrapper .rc-slider-track {
    background-color: #375a7f !important;
    height: 8px !important;
    border-radius: 4px !important;
    opacity: 0.85 !important;
}
.row-slider-wrapper .rc-slider-handle {
    width: 18px !important;
    height: 18px !important;
    margin-top: -5px !important;
    background-color: #375a7f !important;
    border: 2px solid #282828 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
}
.row-slider-wrapper .rc-slider-handle:hover,
.row-slider-wrapper .rc-slider-handle:focus,
.row-slider-wrapper .rc-slider-handle-dragging {
    border-color: #282828 !important;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.4) !important;
}
.row-slider-wrapper .rc-slider-dot {
    background-color: #34495e !important;
    border-color: #34495e !important;
}
.row-slider-wrapper .rc-slider.rc-slider-disabled {
    background-color: transparent !important; /* or a dark grey */
}
/* Disabled row: grey out slider and value, block interaction (no opacity on wrapper to avoid layout quirks) */
.row-disabled .row-slider-wrapper .row-slider-dcc,
.row-disabled .row-slider-wrapper .row-rangeslider-dcc {
    pointer-events: none !important;
}
.row-disabled .row-slider-wrapper .rc-slider-rail {
    background-color: #2c3e50 !important;
}
/* Hide filled track when row disabled (visibility + opacity in case library sets opacity inline) */
.row-disabled .row-slider-wrapper .rc-slider-track,
.row-disabled .row-slider-wrapper .rc-slider.rc-slider-disabled .rc-slider-track {
    opacity: 0 !important;
    visibility: hidden !important;
}
.row-disabled .row-slider-wrapper .rc-slider-handle {
    background-color: #2c3e50 !important;
    cursor: not-allowed !important;
}

/* Force blue theme in optimiser sliders (override Dash 4 default purple) */
.row-slider-wrapper {
    --Dash-Fill-Interactive-Weak: #375a7f;
    --Dash-Fill-Inverse-Strong: #282828;
    --Dash-Shading-Weak: rgba(0, 0, 0, 0.2);
}
.row-slider-wrapper .row-slider-dcc {
    accent-color: #375a7f;
}
/* Dash 4.0 new class names (dash-slider-thumb, etc.) – explicit overrides in case variables aren’t enough */
.row-slider-wrapper .dash-slider-thumb {
    border-color: #282828 !important;
}
.dash-slider-track,
.row-slider-wrapper .dash-slider-track,
.row-slider-wrapper [class*="dash-slider"][class*="track"] {
    background-color: #34475a !important;
}
.dash-slider-range {
    background-color: rgb(180, 210, 255) !important;
}
.dash-slider-mark {
    color: #ecf0f1;
}
.dash-slider-mark.dash-slider-mark-outside-selection {
    color: #6c757d;
}
.dash-input-container {
    color: #050d18;
    background: #e7e1d4;
}
/* Legacy rc-slider and generic patterns (older Dash / fallback) */
.row-slider-wrapper [class*="track"] {
    background-color: #34475a !important;
}
.row-slider-wrapper [class*="handle"] {
    background-color: #375a7f !important;
    border-color: #282828 !important;
}


/* Optimiser form: hide columns but keep their space so sliders align across sections (e.g. Data Centre) */
.optimiser-col-hidden {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Optimiser form: Tier column dropdowns fill column width */
.optimiser-tier-dropdown-wrapper {
    width: 100%;
}
.optimiser-tier-dropdown-wrapper > div,
.optimiser-tier-dropdown-wrapper .Select-control {
    width: 100% !important;
    max-width: 100%;
}

/* Global dbc.Card defaults – applies to every card in the app (overrides Darkly) */
.card {
    border: 1px solid #34495e;
    border-radius: 8px;
    background-color: #141e2e;
}
.card-header {
    background-color: #1a2a3a !important;
    border-bottom: 1px solid #34495e;
    color: #ecf0f1;
    padding: 0.6rem 1rem;
}
.generation-input-card .card-header {
    background-color: #050d18 !important;
    color: #e8f2fb;
    border-radius: 7px;
    transition: background-color 0.2s ease;
}
.generation-input-card .card-header:has(button[aria-expanded="true"]) {
    background-color: #1b5389 !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.generation-input-card .card-header:hover,
.generation-input-card .card-header:has(button[aria-expanded="true"]):hover {
    background-color: #3c648a !important;
}
.generation-input-card .card-header button {
    color: #e8f2fb !important;
}
.generation-input-card .card-body {
    background-color: #09131f;
}

.card-body {
    color: #ecf0f1;
    padding: 1rem;
}

/* Card animation for appearing/disappearing - rolls up/down */
.card-container-animated {
    transition: max-height 0.3s ease-in-out, margin 0.3s ease-in-out, padding 0.3s ease-in-out;
    overflow: hidden;
}

.card-container-animated.card-hidden {
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.card-container-animated.card-visible {
    max-height: 2000px; /* Large enough for any card content */
}

/* Cost columns row: cost columns have a fixed max, assumptions column flexes */
.cost-columns-row > .cost-parameter-col {
    flex: 0 0 auto;
    width: 100%;
    max-width: 22rem;
    align-self: start;
}
.cost-columns-row > .assumptions-flex-col {
    flex: 1 1 0;
    min-width: 22rem;
}
.cost-columns-row {
    row-gap: 1rem;
}

/* Generation input cards: cost level rows – button holds its width, input fills the rest */
.cost-level-row {
    flex-wrap: nowrap !important;
}
.cost-level-row > :first-child {
    flex: 0 0 auto !important;
    width: auto !important;
}
.cost-level-row > :last-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden;
}

/* Generation input cards: cost parameter columns */
.cost-column-header {
    display: block;
    margin-bottom: 0.5rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.cost-level-btn {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    color: #e8f2fb !important;
    border-color: #4a6a8a !important;
    white-space: nowrap !important;
    min-width: 6.5rem !important;
}
.cost-level-btn.active {
    background-color: #1b5389 !important;
    border-color: #7aabd4 !important;
}
.cost-level-btn:hover {
    background-color: #3c648a !important;
    border-color: #7aabd4 !important;
    color: #e8f2fb !important;
}
.cost-level-input {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    background-color: #e7e1d4 !important;
    min-width: 3rem !important;
}
.cost-level-input.input-active-disabled {
    cursor: not-allowed !important;
}
.cost-level-input.input-inactive-disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}

/* Additional assumptions table */
.additional-assumptions {
    border: 1px solid #2a3f55;
    border-radius: 6px;
    overflow: hidden;
    font-size: 0.9rem;
    color: #7aabd4;
    width: 100%;
    max-width: 40rem;
}
.assumptions-title {
    padding: 0.35rem 0.6rem;
    background-color: #0b1929;
    border-bottom: 1px solid #2a3f55;
}
.assumptions-header-row {
    background-color: #0f2035;
    border-bottom: 1px solid #2a3f55;
    margin: 0 !important;
}
.assumptions-col-header {
    padding: 0.25rem 0.5rem !important;
}
.assumptions-data-row {
    margin: 0 !important;
    border-bottom: 1px solid #1a2e42;
    align-items: center;
}
.assumptions-data-row:last-child {
    border-bottom: none;
}
.assumptions-data-row:nth-child(odd) {
    background-color: #0d1e30;
}
.assumptions-data-row:nth-child(even) {
    background-color: #091624;
}
.assumptions-cell {
    padding: 0.3rem 0.5rem !important;
    color: #c8d8e8;
    word-break: break-word;
}
.assumptions-cell-value {
    font-variant-numeric: tabular-nums;
}
.assumptions-cell-unit {
    font-style: italic;
}
.assumptions-cell-source {
    font-size: 0.8rem;
}

/* Assumptions columns: equal defaults, but Value shrinks sooner if needed */
.additional-assumptions .assumptions-header-row > .col-3,
.additional-assumptions .assumptions-data-row > .col-3 {
    flex: 1 1 25%;
    width: auto;
    max-width: none;
    min-width: 0;
}
.additional-assumptions .assumptions-header-row > .col-3:nth-child(2),
.additional-assumptions .assumptions-data-row > .col-3:nth-child(2) {
    flex: 1 3 15%;
    min-width: 4.5rem;
}

/* Generation pill button group */
.generation-pill-group {
    flex-wrap: wrap !important;
    row-gap: 0.4rem;
}
.generation-pill-group .btn {
    background-color: transparent;
    border-color: #4a6a8a;
    color: #8aaccc;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.generation-pill-group .btn:hover {
    background-color: #3c648a;
    border-color: #7aabd4;
    color: #c0d8f0;
}
.generation-pill-group .btn.active,
.generation-pill-group .btn:active {
    background-color: #1b5389;
    border-color: #7aabd4;
    color: #e8f2fb;
}
.generation-pill-group .btn.disabled,
.generation-pill-group .btn:disabled {
    background-color: transparent;
    border-color: #2c3e50;
    color: #3d5166;
    opacity: 1;
    cursor: not-allowed;
}

.form-check-input:checked {
    background-color: #2b68a2 !important;
    border-color: #2b68a2 !important;
}
.form-switch .form-check-input:not(:checked) {
    background-color: #e7e1d4;
    border-color: #7a8fa6;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%237a8fa6'/%3e%3c/svg%3e");
}

/* Results summary cards */
.results-summary-card {
    border: 1px solid #2a3f55;
    border-radius: 6px;
    background-color: #0c345b38;
    min-width: 10rem;
}
.results-summary-card .results-card-header {
    background-color: #0c345bcc !important;
    font-size: 1.1rem;
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid #2a3f55;
}
.results-summary-card .card-body {
    padding: 0.5rem 0.75rem;
}
.results-summary-card .results-card-value {
    color: #e8f2fb;
    margin-bottom: 0;
    font-variant-numeric: tabular-nums;
}

/* Results accordion layout */
.results-layout > .row {
    margin-bottom: 1rem;
}
.results-layout > .row:last-child {
    margin-bottom: 0;
}

/* Results bar charts: keep a responsive aspect ratio on narrow screens */
.results-bar-chart-wrapper {
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 220px;
    max-height: 420px;
}
.results-bar-chart-wrapper .dash-graph {
    height: 100%;
}

/* Wind profile figure: limit width when it gets its own row so it doesn't stretch too wide */
.wind-profile-figure-wrapper {
    width: 100%;
    /* max-width: 280px; */
    max-height: 200px;
    aspect-ratio: 3 / 4;
    min-height: 130px;
}
.wind-profile-figure-wrapper .dash-graph {
    height: 100%;
    width: 100%;
}

/* When solar/wind data are under the map (below lg), keep them side by side in one row */
@media (max-width: 991px) {
    .solar-wind-data-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .solar-wind-data-row .solar-wind-data-col {
        flex: 0 0 50%;
        max-width: 50%;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    /* Titles stay at top; table and plot vertically centered relative to each other */
    .solar-wind-data-row .solar-data-section,
    .solar-wind-data-row .wind-data-section {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }
    .solar-wind-data-row .solar-data-section > .h4,
    .solar-wind-data-row .wind-data-section > .h4 {
        flex-shrink: 0;
    }
    .solar-wind-data-row .solar-data-content,
    .solar-wind-data-row .wind-data-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        min-height: 0;
    }
    .results-bar-chart-wrapper {
        aspect-ratio: 16 / 10;
    }
}
@media (min-width: 992px) {
    .solar-wind-data-row {
        flex-direction: column;
    }
    .solar-wind-data-row .solar-wind-data-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
/* Narrow screens: stack Solar and Wind vertically under the map */
@media (max-width: 767px) {
    .solar-wind-data-row {
        flex-direction: column;
    }
    .solar-wind-data-row .solar-wind-data-col {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
    /* Let wind plot use full column width when stacked */
    .solar-wind-data-row .wind-profile-figure-wrapper {
        width: 100%;
        max-width: 100%;
        max-height: 180px;
        aspect-ratio: 16 / 9;
        align-self: stretch;
    }
}
@media (max-width: 767px) {
    .results-bar-chart-wrapper {
        aspect-ratio: 1 / 1;
        min-height: 180px;
    }
}

/* Optimise button */
#optimise-button {
    background-color: #76a576 !important;
    border-color: #76a576 !important;
    color: #ffffff !important;
}
#optimise-button:hover {
    background-color: #8aba8a !important;
    border-color: #8aba8a !important;
}
#optimise-button:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* Warning above Optimise button: slightly less tall */
#optimise-button-warning .alert {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}