/* infoPanel.css
   Right-hand "info panel" -- persistent detail view for whatever is
   currently selected on the map (airport weather today; flight info /
   airport charts are reserved sections for later phases, per the
   planned layout). Station detail markup reuses the .station-popup*
   classes from popup.css (see render/stationPlot.js#buildStationDetailHtml)
   so the panel matches the look of the old map popup it replaces. */

#infoPanel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#infoPanelHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    font-weight: bold;
    color: white;
    border-bottom: 1px solid var(--panel-border);
    font-size: 15px;
}

/* Winter holdover-time lookup toggle (see ui/holdoverPanel.js). Lives
   in the static header, not #infoPanelBody, so it survives that
   body's full-innerHTML re-render on every station click and stays
   reachable even before any station has been selected. */
.info-header-toggle {
    font-size: 12px;
    font-weight: normal;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--panel-border);
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
}

.info-header-toggle.active {
    background: #2a6fdb;
    border-color: #2a6fdb;
    color: white;
}

#infoPanelBody {
    padding: 12px;
    overflow-y: auto;
    flex: 1;
}

#infoPanelBody.info-empty p {
    color: var(--text-light);
    opacity: 0.6;
    font-size: 13px;
}

.info-section {
    border-bottom: 1px solid var(--panel-border);
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.info-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.info-section-title {
    font-weight: bold;
    font-size: 13px;
    color: white;
    margin-bottom: 6px;
}

/* Collapsible sections (ui/collapsibleSections.js): click the title to fold the rest of the section away. */
.info-section-toggle { cursor: pointer; user-select: none; }
.info-section-toggle:hover { color: var(--accent, #93c5fd); }
.info-section-chevron { display: inline-block; width: 12px; font-size: 10px; color: var(--text-muted, #9aa3ad); }
.info-section-chevron::before { content: "▾"; }
.info-section-collapsed > .info-section-title .info-section-chevron::before { content: "▸"; }
.info-section-collapsed > .info-section-title { margin-bottom: 0; }
.info-section-collapsed > :not(.info-section-title) { display: none !important; }

.info-section-stub .info-stub-text {
    font-size: 12px;
    opacity: 0.65;
    font-style: italic;
    margin: 0;
}

.chart-group {
    margin-bottom: 10px;
}

.chart-group-title {
    color: var(--text-light);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 8px 0 4px;
    text-transform: uppercase;
}

.chart-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* One chart entry: a clickable name/meta button (opens the Chart Viewer popup, see
   ui/chartViewerPopup.js) plus, for SID/STAR rows, an overlay toggle -- either inline next to the
   name (0 or 1 overlays) or as a chip row underneath (multiple transitions/runways). See
   ui/chartViewer.js#chartRow. */
.chart-list-item-row {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    padding: 6px 8px;
}

.chart-list-item-row:hover {
    border-color: #2a6fdb;
    background: rgba(42, 111, 219, 0.18);
}

.chart-list-item-main {
    align-items: center;
    display: flex;
    gap: 6px;
}

.chart-list-open {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    text-align: left;
}

.chart-list-name,
.chart-list-meta {
    display: block;
}

.chart-list-name {
    font-size: 12px;
    line-height: 1.25;
}

.chart-list-meta {
    color: var(--text-light);
    font-size: 10px;
    margin-top: 2px;
    opacity: 0.72;
}

/* SID/STAR decoded map-overlay toggle (static/js/map/procedureOverlaysLayer.js draws the actual
   MapLibre line/point layers). A plain dot by default; filled + colored when the overlay is drawn
   on the map, amber-outlined when the underlying decode is only partial, and dimmed/disabled when
   no decoded geometry exists for this chart at all. */
.chart-procedure-toggle {
    align-items: center;
    background: transparent;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--text-light);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 5px;
    padding: 3px 7px;
}

.chart-procedure-toggle-icon {
    background: currentColor;
    border-radius: 50%;
    display: inline-block;
    height: 7px;
    opacity: 0.35;
    width: 7px;
}

.chart-procedure-toggle-label {
    font-size: 10px;
    white-space: nowrap;
}

.chart-procedure-toggle:hover:not(:disabled) {
    border-color: #2a6fdb;
}

.chart-procedure-toggle.active {
    border-color: #22d3ee;
    color: #22d3ee;
}

.chart-procedure-toggle.active .chart-procedure-toggle-icon {
    opacity: 1;
}

.chart-procedure-toggle.partial {
    border-style: dashed;
}

.chart-procedure-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.chart-procedure-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.taf-meta {
    color: var(--text-light);
    opacity: 0.75;
    font-size: 11px;
    margin: 2px 0;
    word-break: break-word;
}


/* Crosswind & head/tailwind section (see render/stationPlot.js#buildCrosswindHtml,
   ui/crosswindPanel.js) -- a table, one row per runway end. Crosswind badge
   color comes from weather/crosswind.js's registered "crosswind_severity"
   color table (see core/colorTables.js); head/tailwind carries no severity
   color (that's an operational limit, not something this display decides). */
.crosswind-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.crosswind-table th {
    text-align: left;
    font-weight: normal;
    color: var(--text-muted, #9aa3ad);
    font-size: 11px;
    line-height: 1.2;
    padding: 0 6px 4px 0;
    vertical-align: bottom;
}

.crosswind-table th small { font-size: 10px; opacity: 0.85; }

.crosswind-table td {
    padding: 3px 6px 3px 0;
    white-space: nowrap;
}

.crosswind-runway {
    color: var(--text-light);
    font-weight: bold;
}

.crosswind-arrow {
    margin: 0 3px;
    opacity: 0.6;
}

.crosswind-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    color: #111;
    font-weight: bold;
    min-width: 36px;
    text-align: center;
    cursor: help;
}

.crosswind-badge.crosswind-future {
    opacity: 0.85;
}

.headtail {
    display: inline-block;
    min-width: 34px;
    text-align: center;
    font-weight: bold;
    cursor: help;
}
.headtail-head { color: #7fd6a0; }
.headtail-tail { color: #ffb454; }
.headtail-none, .headtail-unknown { color: var(--text-muted, #9aa3ad); font-weight: normal; }

.crosswind-none {
    font-size: 12px;
    color: var(--text-muted, #9aa3ad);
    padding: 2px 0 6px;
}

/* Custom wind what-if */
.crosswind-custom { margin-top: 8px; font-size: 12px; }
.crosswind-custom summary { cursor: pointer; color: var(--text-light); font-weight: bold; }
.crosswind-custom-form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    align-items: flex-end;
    margin-top: 6px;
}
.crosswind-custom-form label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    color: var(--text-muted, #9aa3ad);
}
.crosswind-custom-form input {
    width: 64px;
    padding: 3px 5px;
    border-radius: 4px;
    border: 1px solid var(--panel-border);
    background: var(--btn-bg, #23272e);
    color: var(--text-light);
    font: inherit;
}
.crosswind-custom-form input[aria-invalid="true"] { border-color: #ff8080; }
.crosswind-custom-form .cx-clear {
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--panel-border);
    background: none;
    color: var(--text-light);
    cursor: pointer;
}
.crosswind-custom-hint { margin-top: 6px; font-size: 11px; color: var(--text-muted, #9aa3ad); }
.crosswind-custom-error { margin-top: 4px; font-size: 11px; color: #ff8080; }
.crosswind-custom-error:empty { display: none; }
.crosswind-custom-wind { margin: 8px 0 4px; font-size: 11px; color: var(--text-muted, #9aa3ad); }


/* Holdover Time section (see render/stationPlot.js#buildHoldoverHtml
   and ui/holdoverPanel.js) -- hidden unless the header's "HOT" toggle
   is on, since it's a winter-only add-on to the panel. */
.hot-disclaimer {
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-light);
    opacity: 0.75;
    font-style: italic;
    margin-bottom: 8px;
}

.hot-controls {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.hot-controls label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    color: var(--text-light);
}

.hot-controls select {
    font-size: 12px;
}

.hot-condition-row {
    font-size: 12px;
    margin-bottom: 6px;
}

.hot-result {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    margin-bottom: 6px;
}

.hot-time {
    font-size: 16px;
    font-weight: bold;
    color: white;
}

.hot-band {
    font-size: 11px;
    color: var(--text-light);
}

.hot-result.hot-no-guidelines {
    display: block;
    font-size: 12px;
    color: #ffb400;
    background: rgba(255, 180, 0, 0.12);
}

.hot-static-note {
    font-size: 11px;
    color: var(--text-light);
    opacity: 0.7;
    margin: 6px 0 0;
}

@media (max-width: 760px) {
    #infoPanelHeader {
        min-height: 44px;
        padding-right: 56px;
    }

    #infoPanelBody {
        padding-bottom: 18px;
    }

    .hot-controls {
        flex-wrap: wrap;
    }

    .hot-controls label {
        flex: 1 1 140px;
    }
}

@media (max-width: 420px) {
    .hot-result {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}

/* ---- Flights section (ui/flightsInfoSection.js): TFMS departures / arrivals ---- */
.flights-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 6px; margin-bottom: 4px; }
.flights-tabs { display: flex; gap: 2px; }
.flights-tab, .flights-refresh {
    font: inherit; font-size: 12px; color: var(--text-light); background: transparent;
    border: 1px solid var(--panel-border); border-radius: 3px; padding: 2px 8px; cursor: pointer;
}
.flights-tab.active { color: #fff; border-color: var(--mint, #43d2aa); }
.flights-tab:focus-visible, .flights-refresh:focus-visible, .flights-sort:focus-visible { outline: 1px solid var(--mint, #43d2aa); outline-offset: 1px; }
.flights-summary { font-size: 12px; color: var(--text-light); margin: 4px 0; }
.flights-table-wrap { max-height: 360px; overflow: auto; border: 1px solid var(--panel-border); border-radius: 3px; }
.flights-table { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.flights-table th {
    position: sticky; top: 0; background: var(--panel-bg, #1b1f27); color: var(--text-muted);
    font-weight: normal; text-align: left; padding: 3px 4px; white-space: nowrap; border-bottom: 1px solid var(--panel-border);
}
.flights-sort { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
.flights-sort:hover { color: var(--mint, #43d2aa); }
.flights-table td { padding: 2px 4px; white-space: nowrap; color: var(--text-light); border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.flights-acid { color: #fff; }
.flights-num { text-align: right; }
.flights-kind { margin-left: 2px; font-size: 9px; opacity: 0.85; }
.flights-kind-actual { opacity: 1; }
.flights-muted { color: #a8b0bb; }
/* Same red/amber tiers as the ATC program badges (atcPrograms.css): cancellations red, delay/EDCT amber. */
.flights-state-cancelled td { color: #f27474; }
.flights-state-cancelled .flights-acid { text-decoration: line-through; }
.flights-state-plan-cancelled .flights-state { color: #eab308; }
.flights-delayed .flights-num { color: #eab308; }
.flights-count-cancelled { color: #f27474; }
/* Airport panel Cancellations section (ui/cancellationsInfoSection.js): carrier rows, regionals underneath. */
.cxl-table { margin: 2px 0; }
.cxl-table td { vertical-align: top; }
.cxl-split { font-size: 10px; color: var(--text-muted); white-space: normal; }
.flights-count-edct, .flights-count-delayed { color: #eab308; }
.flights-footer { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
.flights-feed-bad { color: #f27474; }
.flights-airline { flex: 1 1 90px; min-width: 0; font: inherit; font-size: 11px; max-width: 170px; color: var(--text-light); background: var(--btn-bg, #2a2f37); border: 1px solid var(--panel-border); border-radius: 3px; }
.flights-row { cursor: pointer; }
.flights-row:hover td, .flights-row.open td { background: rgba(255, 255, 255, 0.05); }
.flights-row:focus-visible { outline: 1px solid var(--mint, #43d2aa); outline-offset: -1px; }
.flights-detail-row td { white-space: normal; padding: 4px 6px 8px; background: rgba(255, 255, 255, 0.03); }
.flights-detail { font-size: 11px; line-height: 1.5; color: var(--text-light); max-width: 420px; }
.flights-detail-head { color: #fff; font-weight: 600; }
.flights-detail-times { border-collapse: collapse; margin: 3px 0; }
.flights-detail-times th, .flights-detail-times td { padding: 1px 8px 1px 0; text-align: left; font-weight: normal; position: static; background: none; border: none; color: var(--text-light); white-space: nowrap; }
.flights-detail-times th { color: var(--text-muted); }
.flights-route { font-size: 10px; word-break: break-all; white-space: normal; }
.flights-center { font: inherit; font-size: 10px; color: var(--mint, #43d2aa); background: none; border: 1px solid var(--panel-border); border-radius: 3px; padding: 0 5px; cursor: pointer; }
.flights-provenance { font-size: 10px; opacity: 0.8; word-break: break-all; }
/* ADS-B <-> TFMS pairing (map popup + flight detail): a call-sign-only pairing is flagged amber. */
.flights-tfms-head { margin-top: 4px; }
.flights-tfms-weak { color: #eab308 !important; opacity: 1 !important; }

/* Airport panel: Diversions today, away from and into the airport (ui/diversionsInfoSection.js). */
.div-list { margin: 6px 0; }
.info-subtitle { font-size: 11px; font-weight: 600; color: #a8b0bb; margin: 6px 0 2px; }
.div-rows { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.div-rows li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 2px 0; }
.div-flight {
    background: none; border: none; padding: 0; color: #9cc8ff; font: inherit; font-weight: 600; cursor: pointer;
    text-decoration: underline; text-underline-offset: 2px;
}
.div-flight:focus-visible { outline: 2px solid #9cc8ff; outline-offset: 1px; }
.div-route s { color: #a8b0bb; }
.div-rows .muted { color: #a8b0bb; }