/* ============================================================
   Flight Plan AI — Dark Theme CSS
   ============================================================ */

/* ── Dropdown styling ──
   The dropdown INPUT shows light/white text on dark bg.
   The dropdown MENU (option list) uses DARK text on WHITE bg for readability.

   IMPORTANT: Dash 2.14 dcc.Dropdown uses react-select v3+ which generates
   class names with random prefixes AND legacy Select-* classes.
   Dropdown menus are rendered as PORTALS at document.body level,
   NOT inside .fp-dark-dropdown. We must use global selectors.
   ============================================================ */

/* ── CONTROL (the input box) ── */
.fp-dark-dropdown .Select-control {
    background-color: #16213e !important;
    border-color: #2a2a4a !important;
    color: #e0e0e0 !important;
}

/* ── TYPED TEXT inside dropdown input ── */
.fp-dark-dropdown input,
.fp-dark-dropdown .Select-input input {
    color: #ffffff !important;
    caret-color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ── SELECTED VALUE text (after picking an option) ── */
.fp-dark-dropdown .Select-value-label,
.fp-dark-dropdown .Select-value .Select-value-label,
.fp-dark-dropdown .Select--single > .Select-control .Select-value {
    color: #e0e0e0 !important;
}

/* ── PLACEHOLDER text ── */
.fp-dark-dropdown .Select-placeholder {
    color: #888 !important;
}

/* ── CLEAR (x) and ARROW controls ── */
.fp-dark-dropdown .Select-clear-zone,
.fp-dark-dropdown .Select-arrow-zone {
    color: #e0e0e0 !important;
}
.fp-dark-dropdown .Select-arrow {
    border-color: #e0e0e0 transparent transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   DROPDOWN MENU OPTIONS — GLOBAL rules (portalled outside component)
   These MUST be global because Dash renders the menu at body level.
   Using every known class pattern from react-select + Dash.
   ═══════════════════════════════════════════════════════════════ */

/* Menu container */
.Select-menu-outer,
div[class$="-menu"],
div[class*="--menu"],
div[class*="MenuList"],
div[class*="menu-outer"] {
    background-color: #ffffff !important;
    border: 1px solid #ccc !important;
    z-index: 99999 !important;
}

/* Individual option — DARK text on WHITE bg */
.Select-option,
.VirtualizedSelectOption,
div[class$="-option"],
div[class*="--option"],
div[class*="MenuList"] > div,
div[role="option"] {
    background-color: #ffffff !important;
    color: #111111 !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
}

/* Focused/hovered option */
.Select-option.is-focused,
.VirtualizedSelectFocusedOption,
div[class*="-option"][class*="focused"],
div[class*="--option--is-focused"],
div[role="option"][aria-selected="false"]:hover {
    background-color: #e3f2fd !important;
    color: #0d47a1 !important;
}

/* Selected option */
.Select-option.is-selected,
.VirtualizedSelectSelectedOption,
div[class*="-option"][class*="selected"],
div[class*="--option--is-selected"],
div[role="option"][aria-selected="true"] {
    background-color: #bbdefb !important;
    color: #0d47a1 !important;
    font-weight: 600 !important;
}

/* No results message */
.Select-noresults,
div[class*="NoOptionsMessage"],
div[class*="noResults"] {
    background-color: #ffffff !important;
    color: #666 !important;
}

/* ── Layer toggle styling (inside layers panel) ── */
.fp-layer-chip {
    margin-bottom: 1px !important;
}
.fp-layer-chip label {
    display: flex !important;
    align-items: center !important;
    padding: 4px 6px !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    color: #ccc !important;
    background-color: transparent !important;
    border: none !important;
    user-select: none !important;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap !important;
    gap: 6px !important;
}
.fp-layer-chip label:hover {
    background-color: rgba(255,255,255,0.08) !important;
    color: #fff !important;
}
/* Checkbox — visible, styled */
.fp-layer-chip input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 14px !important;
    height: 14px !important;
    border: 1.5px solid #666 !important;
    border-radius: 3px !important;
    background: transparent !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    position: relative !important;
    margin: 0 !important;
}
.fp-layer-chip input[type="checkbox"]:checked {
    background: #00d4ff !important;
    border-color: #00d4ff !important;
}
.fp-layer-chip input[type="checkbox"]:checked::after {
    content: '✓' !important;
    position: absolute !important;
    top: -1px !important;
    left: 1px !important;
    font-size: 11px !important;
    color: #000 !important;
    font-weight: bold !important;
}
/* When checked, highlight label text */
.fp-layer-chip input[type="checkbox"]:checked + label,
.fp-layer-chip label:has(input:checked) {
    color: #fff !important;
}

/* ── Layers panel scrollbar ── */
#fp-layers-panel::-webkit-scrollbar {
    width: 4px;
}
#fp-layers-panel::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 2px;
}
/* ── Layers toggle button — match Leaflet control style ── */
#fp-layers-toggle-btn:hover {
    background: #f4f4f4 !important;
}

/* ── Leaflet LayersControl — ensure all base layer options are visible ── */
#fp-route-map .leaflet-control-layers {
    max-height: 300px !important;
    overflow-y: auto !important;
}
#fp-route-map .leaflet-control-layers-expanded {
    max-height: 300px !important;
    overflow-y: auto !important;
}

/* ── WxCam dbc.Modal dark theme ── */
#fp-cam-modal .modal-content {
    background-color: #0f0f23 !important;
    border: 1px solid #38bdf8 !important;
    color: #e0e0e0 !important;
}
#fp-cam-modal .modal-header {
    background-color: #0a0a1a !important;
    border-bottom: 1px solid #1e293b !important;
    color: #38bdf8 !important;
}
#fp-cam-modal .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
#fp-cam-modal .modal-title {
    color: #38bdf8 !important;
    font-weight: bold;
}
#fp-cam-modal .modal-body {
    background-color: #0f0f23 !important;
    padding: 12px !important;
}

/* ── Suppress ALL loading / flicker on the flightplan page ──
   Dash applies _dash-loading-callback class to EVERY output component
   while a callback is in-flight. This causes individual sections to
   disappear / lose opacity. We force everything to stay visible.  */

/* Global loading wrapper — hide spinner, keep content */
.loading-wrapper > .dash-spinner-container,
.loading-wrapper > .dash-default-spinner,
#loading > .dash-spinner-container,
#loading > .dash-default-spinner {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}
.loading-wrapper._dash-loading-callback::before,
#loading._dash-loading-callback::before {
    display: none !important;
}
.loading-wrapper,
.loading-wrapper._dash-loading-callback,
#loading,
#loading._dash-loading-callback {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
}
#page-content {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Per-component anti-flicker — every fp-* output stays put during callbacks */
#fp-route-layer,
#fp-route-status,
#fp-route-selector,
#fp-route-summary,
#fp-route-string-box,
#fp-preflight-checklist,
#fp-detail-panel,
#fp-profile-container,
#fp-route-map,
#fp-radar-layer,
#fp-nmac-layer,
#fp-page-root,
#fp-cam-modal {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
}
/* Dash wraps callback-targeted divs in a span with this class */
#fp-page-root ._dash-loading-callback,
#fp-page-root [data-dash-is-loading="true"] {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
/* Dash injects inline opacity:0.35 via style attribute on loading —
   override it with a high-specificity rule on the flightplan page */
#fp-page-root div[id^="fp-"] {
    opacity: 1 !important;
    visibility: visible !important;
}
/* Suppress any overlay that Dash might add inside output containers */
#fp-page-root .dash-loading {
    display: none !important;
}
#fp-page-root .dash-spinner-container {
    display: none !important;
}
/* Catch-all: Dash sets inline opacity on output components during callbacks.
   This targets only the loading-specific wrappers. */
#fp-page-root .dash-loading-callback,
#fp-page-root ._dash-loading,
.loading-wrapper .dash-loading-callback {
    opacity: 1 !important;
    visibility: visible !important;
}