/* Topbar "Map Display" dropdown (ui/mapDisplayPanel.js): base map, chart overlay, and
   airport-icon display settings, combined into one popover instead of four always-visible topbar
   controls. Same fixed-dropdown pattern as locations.css/stationGroups.css. */

.map-display-panel {
    position: fixed;
    top: calc(var(--topbar-h) + 8px);
    left: 12px;
    z-index: 100001;
    width: min(280px, 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: 10px;
}

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

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

.map-display-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
}

.map-display-row label {
    color: var(--text-muted, #9aa3ad);
}

.map-display-row select {
    padding: 6px 8px;
    background: var(--btn-bg);
    color: var(--text-light);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    font-size: 12px;
}

.map-display-airspace { padding-top: 6px; border-top: 1px solid var(--panel-border); }

/* Two columns (Airports | METAR only, My stations | My markers): one non-wrapping row of four ran past the
   panel's right edge (owner 2026-10-10). */
.map-display-checkbox-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    padding-top: 8px;
    border-top: 1px solid var(--panel-border);
}

/* Lightning (GLM) status line (map/glmLayer.js). */
.map-display-note { font-size: 11px; color: var(--text-muted, #9aa3ad); line-height: 1.35; }
.map-display-note.map-display-warn { color: #f59e0b; }
/* OpenSky aircraft controls (map/flightsLayer.js) */
.flights-airport-input { width: 4.5em; text-transform: uppercase; }
.flights-activity { margin-top: 4px; }
.flights-activity .flights-spark { display: block; margin-top: 4px; }