/* The Weekly forecast screens (/NationalAvailabilityWeekly, /AvailabilityByFuelTypeWeekly, Views/Forecasts/Weekly.cshtml).
   Page-scoped, loaded from that view's Styles section the way System Prices loads its own. */

/* The charts and the grid in one panel with its own scroll bar, sized to what is left of the window
   (weeklyForecast.js fitPanelHeight). */
.gc-fc-panel {
    overflow-y: auto;
}

/* The charts one above the next, each the page's full width. */
.gc-fc-charts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Twice the height they were (2026-10-28), since the panel scrolls: the chart, grid and form scroll together. */
.gc-fc-chart {
    flex: 0 0 auto;
    height: 544px;
}

.gc-fc-tip {
    text-align: left;
    line-height: 1.5;
}

.gc-fc-tip-title {
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.gc-fc-tip-label {
    color: var(--bs-secondary-color);
}

/* The fuel type charts' tooltip (weeklyForecast.js fuelTypeTooltip): a name and figure a row, figures in a column, and
   the total under a rule. */
.gc-fc-tip-row {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
}

.gc-fc-tip-value {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.gc-fc-tip-total {
    border-top: 1px solid var(--bs-border-color);
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    font-weight: bold;
}

/* The detail form's column headings and row labels (weeklyForecast.js formItems). */
.gc-fc-form-heading {
    font-weight: bold;
}

.gc-fc-form-label {
    font-weight: bold;
    line-height: 36px;
}

/* National Demand (Half Hourly) (Views/NationalDemand): twice the height it was (2026-10-28), the panel scrolling. */
.gc-nd-chart {
    height: 680px;
}

.gc-nd-slider-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gc-nd-slider {
    flex: 1 1 auto;
}

/* Beside the slider's end, whatever its length ("Latest Only" or "Published 28 Oct 06:30"); the fixed width keeps the
   slider from changing length as the text does. */
.gc-nd-published {
    flex: 0 0 auto;
    min-width: 11rem;
    text-align: left;
}