/* Topbar "ATC Programs" dropdown (ui/atcProgramsPanel.js) -- same fixed-dropdown pattern as
   nwsAlerts.css/mapDisplay.css/locations.css. */

.atc-programs-panel {
    position: fixed;
    top: calc(var(--topbar-h) + 8px);
    left: 12px;
    z-index: 100001;
    width: min(320px, calc(100vw - 24px));
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.48);
    color: var(--text-light);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.atc-programs-panel[hidden] { display: none; }

.atc-programs-header {
    font-weight: bold;
    font-size: 14px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--panel-border);
}

.atc-programs-list {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.atc-programs-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--panel-border);
}

.atc-programs-row:last-child { border-bottom: none; }

.atc-programs-row-clickable { cursor: pointer; }
.atc-programs-row-clickable:hover .atc-programs-row-title { color: var(--mint, #43d2aa); }
.atc-programs-row-clickable:focus-visible { outline: 1px solid var(--mint, #43d2aa); outline-offset: 2px; }

.atc-programs-detail {
    margin-top: 6px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
}

.atc-programs-detail[hidden] { display: none; }

.atc-programs-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    padding: 2px 0;
}

.atc-programs-detail-row span:first-child {
    color: var(--text-muted, #9aa3ad);
    flex: 0 0 auto;
}

.atc-programs-detail-row span:last-child {
    text-align: right;
    word-break: break-word;
}

.atc-programs-detail-loading {
    font-size: 11px;
    font-style: italic;
    color: var(--text-muted, #9aa3ad);
}

/* Airport info panel's "ATC Programs" section (ui/atcProgramsInfoSection.js) -- reuses the
   .atc-programs-badge-* colors above so a program's type-color means the same thing everywhere. */
.info-atc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 3px 0;
}

.info-atc-row-text { color: var(--text-light); }

.atc-programs-badge {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 2px 6px;
    border-radius: 4px;
    color: #0b0f14;
    margin-top: 1px;
}

/* Ground Delay Programs directly hold flights on the ground -- the most operationally urgent type
   here, so it gets the same amber used for a NWS Watch (impact.js's severity convention keeps
   red for the most severe tier; a GDP is a real constraint but not an active hazard). FCA/FEA are
   defined constraint/evaluation areas, not yet a program acting on flights -- a cooler, lower-key
   color. */
.atc-programs-badge-GS { background: #e34b4b; } /* holds everything bound for the airport -- red tier, as in the Watchlist */
.atc-programs-badge-GDP { background: #eab308; }
.atc-programs-badge-AFP { background: #f97316; } /* same color as its map layer (map/atcProgramsLayer.js) */
.atc-programs-badge-FCA { background: #43d2aa; }
.atc-programs-badge-FEA { background: #6fb3e0; }

.atc-programs-row-main {
    min-width: 0;
    flex: 1 1 auto;
}

.atc-programs-row-title {
    font-size: 13px;
    font-weight: 600;
    color: white;
}

.atc-programs-row-detail {
    font-size: 11px;
    color: var(--text-muted, #9aa3ad);
    margin-top: 1px;
}

.atc-programs-empty {
    color: var(--text-muted, #9aa3ad);
    font-size: 12px;
    font-style: italic;
    padding: 4px 0;
}

.atc-programs-count {
    font-size: 11px;
    color: var(--text-muted, #9aa3ad);
}

.atc-programs-subtitle {
    color: var(--text-muted, #9aa3ad);
    font-size: 11px;
    line-height: 1.35;
    padding-top: 6px;
    border-top: 1px solid var(--panel-border);
}

/* "Show flow programs on map" controls (map/atcProgramsLayer.js). */
.atc-programs-map-controls {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--panel-border);
    font-size: 12px;
}

.atc-programs-map-row { display: flex; align-items: center; gap: 6px; cursor: pointer; }

.atc-programs-map-types { display: flex; flex-wrap: wrap; gap: 10px; padding-left: 20px; }

.atc-programs-map-type { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

.atc-programs-map-note {
    font-size: 11px;
    color: var(--text-muted, #9aa3ad);
    line-height: 1.35;
    padding-left: 20px;
}

.atc-programs-map-error { color: #f59e0b; }

.atc-programs-map-btn {
    flex: 0 0 auto;
    align-self: flex-start;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid var(--panel-border);
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
}

.atc-programs-map-btn:hover { border-color: var(--mint, #43d2aa); color: var(--mint, #43d2aa); }

/* Map popup -- same chrome as .nws-alert-popup (nwsAlerts.css). */
.atc-map-popup .maplibregl-popup-content {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    color: var(--text-light);
    font-size: 12px;
    padding: 8px 10px;
    max-width: 280px;
}

.atc-map-popup-title { color: white; font-weight: 700; margin-bottom: 3px; }
.atc-map-popup-meta { opacity: 0.85; margin-bottom: 2px; }
.atc-map-popup-disclaimer { font-size: 10px; font-style: italic; margin-top: 6px; opacity: 0.65; }

/* ATCSCC advisories list (ui/atcProgramsPanel.js's renderAdvisories). */
.atc-programs-advisories { border-top: 1px solid var(--panel-border); padding-top: 6px; max-height: 220px; overflow-y: auto; }
.atc-programs-adv-header { font-size: 11px; font-weight: 700; color: var(--text-muted, #9aa3ad); margin-bottom: 4px; }
.atc-programs-adv summary { font-size: 11px; cursor: pointer; padding: 2px 0; }
.atc-programs-adv-text {
    font: 10.5px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 6px;
    padding: 6px; background: rgba(255, 255, 255, 0.04); border-radius: 4px;
}

/* Grouped list (ui/atcProgramsPanel.js, 2026-09-25): one header per program type with an "all on map"
   switch for mapped types; each program with a shape has its own map checkbox in place of the badge. */
.atc-programs-group-header { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; padding-bottom: 3px;
    border-bottom: 1px solid var(--panel-border); font-size: 12px; font-weight: 600; color: #e6e9ee; }
.atc-programs-group-header:first-child { margin-top: 0; }
.atc-programs-group-label { flex: 1 1 auto; }
.atc-programs-group-map { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; color: #c8ced6; cursor: pointer; white-space: nowrap; }
.atc-programs-group-note { font-weight: 400; color: #a8b0bb; font-size: 11px; }
.atc-programs-row-lead { flex: none; display: inline-flex; align-items: center; min-width: 34px; }
.atc-programs-map-check { margin: 0; cursor: pointer; }

/* Airport info panel: each program is a button row that expands its details (ui/atcProgramsInfoSection.js). */
.info-atc-row-toggle { width: 100%; background: none; border: none; color: inherit; font-family: inherit; text-align: left; cursor: pointer; }
.info-atc-row-toggle:hover .info-atc-row-text { color: var(--mint, #43d2aa); }
.info-atc-row-toggle:focus-visible { outline: 1px solid var(--mint, #43d2aa); outline-offset: 2px; }
.info-atc-chevron { margin-left: auto; color: #a8b0bb; }
.info-atc-detail { margin: 2px 0 8px 8px; }

/* NTML restrictions (ui/restrictionsView.js), in the ATC list and the airport panel: one <details> row each --
   badge, what and where, until when, then the reason on its own line. Red = traffic held (STOP, as a Ground
   Stop), orange = a release time is needed (APREQ), cooler tones for spacing and metering. */
.atc-programs-restrictions { border-top: 1px solid var(--panel-border); padding-top: 6px; }
.atc-programs-restrictions .rstr-list { max-height: 320px; overflow-y: auto; }
.rstr-group > summary { cursor: pointer; display: flex; align-items: center; gap: 6px; }
.rstr-row > summary {
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 0;
    font-size: 12px; padding: 3px 0; cursor: pointer; list-style: none;
}
.rstr-row > summary::-webkit-details-marker { display: none; }
.rstr-row > summary:hover .rstr-what { color: var(--mint, #43d2aa); }
.rstr-row > summary:focus-visible { outline: 1px solid var(--mint, #43d2aa); outline-offset: 2px; }
.rstr-row > .atc-programs-detail { margin: 2px 0 6px 8px; }
.rstr-badge {
    flex: none; min-width: 44px; text-align: center; font-size: 10px; font-weight: 700; padding: 1px 5px;
    border-radius: 4px; color: #0b0f14; background: #c4cdd8;
}
.rstr-badge-STOP { background: #e34b4b; }
.rstr-badge-APREQ { background: #f97316; }
.rstr-badge-TBM { background: #8fb7ff; }
/* Line 1: badge + what it applies to (full width); line 2: until when, the Staffing tag, the reason. */
.rstr-what { flex: 1 1 calc(100% - 60px); min-width: 0; color: var(--text-light); overflow-wrap: anywhere; }
.rstr-when { flex: none; margin-left: 50px; font-size: 11px; color: #c8ced6; font-variant-numeric: tabular-nums; }
.rstr-staffing { flex: none; font-size: 10px; font-weight: 700; padding: 0 4px; border-radius: 3px; color: #0b0f14; background: #eab308; }
.rstr-reason { flex: 1 1 auto; min-width: 0; font-size: 11px; color: var(--text-muted, #9aa3ad); }
.rstr-reason:empty { display: none; }
.rstr-upcoming .rstr-badge { background: transparent; color: #c8ced6; box-shadow: inset 0 0 0 1px #6b7480; }
.rstr-upcoming .rstr-when { color: #eab308; }

/* Airport panel "Runways & Rates" (ui/restrictionsView.js airportConfigHtml). */
.apt-config { font-size: 12px; }
.apt-config-side { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; }
.apt-config-label { flex: none; width: 76px; color: var(--text-muted, #9aa3ad); }
.apt-config-rwys { flex: 1 1 auto; color: var(--text-light); overflow-wrap: anywhere; }
.apt-config-rate { flex: none; font-weight: 700; color: white; font-variant-numeric: tabular-nums; }
.apt-config-none { color: var(--text-muted, #9aa3ad); font-style: italic; }
.apt-config-notes { margin-top: 3px; color: #c8ced6; font-size: 11px; }
.apt-config-wx { font-weight: 700; }
.apt-config-remarks { margin-top: 3px; white-space: pre-line; font-size: 11px; color: var(--text-light);
    padding: 4px 6px; background: rgba(255, 255, 255, 0.04); border-radius: 4px; }
.apt-config-asof { margin-top: 3px; font-size: 10.5px; color: var(--text-muted, #9aa3ad); }

/* Arrivals due vs. AAR (ui/restrictionsView.js arrivalDemandHtml) */
.apt-demand { margin-top: 8px; font-size: 11.5px; }
.apt-demand-head { color: var(--text-light); margin-bottom: 3px; }
.apt-demand-warn { color: #fbbf24; }
.apt-demand-plot { position: relative; display: flex; gap: 6px; --bar-h: 72px; }
.apt-demand-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.apt-demand-n { font-size: 11px; color: white; font-variant-numeric: tabular-nums; line-height: 14px; }
.apt-demand-bar { position: relative; width: 100%; max-width: 34px; height: var(--bar-h); background: rgba(255, 255, 255, 0.06); border-radius: 2px; }
.apt-demand-fill { position: absolute; inset: auto 0 0 0; background: #60a5fa; border-radius: 2px; }
.apt-demand-col.over .apt-demand-fill { background: #f59e0b; }
.apt-demand-hour { font-size: 10.5px; color: var(--text-muted, #9aa3ad); font-variant-numeric: tabular-nums; line-height: 14px; }
/* AAR line: --aar (a fraction) of the bar height up from the bars' baseline (bars sit between a 14px count and a 14px hour). */
.apt-demand-aar { position: absolute; left: 0; right: 0; height: 2px; margin-bottom: -1px; background: white; pointer-events: none;
                  bottom: calc(14px + var(--bar-h) * var(--aar)); }
.apt-demand-note { margin-top: 3px; font-size: 10.5px; color: var(--text-muted, #9aa3ad); }

/* RAPT departure routes (ui/raptView.js) */
.rapt { font-size: 11.5px; }
.rapt-head { color: var(--text-light); margin-bottom: 4px; }
.rapt-route { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.rapt-name { flex: 0 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-light); }
.rapt-cells { flex: 1 1 auto; display: flex; gap: 1px; }
.rapt-cells .rapt-cell { flex: 1 1 0; height: 10px; }
.rapt-cell { display: inline-block; width: 10px; height: 10px; border-radius: 1px; vertical-align: -1px; }
.rapt-l0 { background: #22c55e; }
.rapt-l1 { background: #facc15; }
.rapt-l2 { background: #ef4444; }
.rapt-lx { background: #4b5563; }
.rapt-trend { flex: none; width: 74px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: var(--text-muted, #9aa3ad); }
.rapt-open > summary { cursor: pointer; color: var(--text-muted, #9aa3ad); margin: 3px 0; }
.rapt-asof { margin-top: 4px; font-size: 10.5px; color: var(--text-muted, #9aa3ad); }
.rapt-key .rapt-cell { width: 8px; height: 8px; margin: 0 2px 0 4px; }