/* ════════════════════════════════════════════════════════════
   NRT FIDS — theme.css
   One visual language for the whole app (top bar, filters, modals,
   forms, radar), matching the statistics dashboard. Loaded last.
   The board rows and the kiosk keep their FIDS look on purpose.
════════════════════════════════════════════════════════════ */
:root {
    --ui-bg: #05080b;
    color-scheme: dark;
    --ui-surface: #0c1116;
    --ui-surface-2: #111a22;
    --ui-line: #18222b;
    --ui-line-2: #26343f;
    --ui-text: #e6edf3;
    --ui-dim: #8593a0;
    --ui-faint: #4f5d6a;
    --ui-accent: #00d8f0;
    --ui-accent-bg: #11303a;
    --ui-good: #3ddc84;
    --ui-warn: #f5b942;
    --ui-bad: #ff5a4d;
    --ui-r-s: 7px;
    --ui-r-m: 10px;
    --ui-r-l: 14px;
    --ui-mono: 'Share Tech Mono', 'Be Vietnam Pro', monospace;
    /* iOS Safari blurs content under the status bar and ~20pt below it. --safe-top is the
       notch plus an 18px fade; it is 0 where there is no notch (desktop) */
    --safe-fade: min(18px, env(safe-area-inset-top));
    --safe-top: calc(env(safe-area-inset-top) + var(--safe-fade));
}

/* solid band under the status bar, fading out below it, above every layer: Safari then only
   blurs a flat colour, and content is laid out to start beneath it (see --safe-top uses) */
body::before {
    content: ''; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; pointer-events: none;
    height: var(--safe-top);
    background: linear-gradient(to bottom, var(--ui-bg) calc(100% - var(--safe-fade)), rgba(5, 8, 11, 0));
}
.fx-radar-bar { padding-top: max(10px, var(--safe-top)); }
.fxk-head { padding-top: max(1.4vh, var(--safe-top)); }
.fxk-exit { top: calc(var(--safe-top) + 12px); }
.fx-card { padding-top: max(16px, var(--safe-top)); }

/* page background = theme-color, so iOS Safari's status bar tint and the overscroll
   bounce area stay dark instead of showing a light band */
html, body { background-color: var(--ui-bg); }

/* ── shared controls ─────────────────────────────────────── */
.stats-top-btn, .lang-btn, .mode-switch button, .fd-btn, .modal-close, .fx-close,
.search-box, .dropdowns select, .select-box, .ui-input {
    border-radius: var(--ui-r-s) !important;
}

/* ── top bar ─────────────────────────────────────────────── */
.top-dashboard { background: var(--ui-bg); border-bottom: 1px solid var(--ui-line); }
.lang-switcher {
    align-items: center; gap: 8px;
    border-bottom: 1px solid var(--ui-line); padding-bottom: 8px; margin-bottom: 8px;
}
#delay-stats {
    margin-right: auto; align-items: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap;
    font-family: var(--ui-mono); font-size: 11.5px; letter-spacing: .08em; color: var(--ui-dim);
    background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r-s);
    padding: 5px 10px;
}
#delay-stats .delay-sep { color: var(--ui-faint); }
.top-tools { display: flex; gap: 6px; align-items: center; }
.stats-top-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 2px;
    height: 30px; margin: 0; padding: 0 11px;
    background: var(--ui-surface); border: 1px solid var(--ui-line); color: var(--ui-dim);
    font-family: var(--ui-mono); font-size: 11.5px; font-weight: 400; letter-spacing: .08em; line-height: 1;
    transition: color .15s, border-color .15s, background .15s;
}
.stats-top-btn:hover { color: var(--ui-text); border-color: var(--ui-line-2); background: var(--ui-surface-2); }
#btn-stats:hover { background: var(--ui-surface-2) !important; box-shadow: none; }
#btn-push.fx-on { background: #0e2a1c; border-color: #1f6b43; color: var(--ui-good); }

.lang-seg {
    display: inline-flex; gap: 2px; padding: 2px;
    background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 9px;
}
.lang-btn {
    height: 24px; padding: 0 9px; border: 0; color: var(--ui-faint);
    font-family: var(--ui-mono); font-size: 11px; letter-spacing: .08em;
}
.lang-btn:hover { color: var(--ui-text); }
.lang-btn.active { background: var(--ui-accent-bg); color: var(--ui-accent); }
.lang-btn img { border-radius: 2px; }

/* clock: fixed-width digit cells so neither the time nor the live dot jitters */
.clock { display: inline-flex; align-items: center; letter-spacing: 0; }
.clock .ck-d { display: inline-block; width: .74em; text-align: center; }
.clock .ck-sep { display: inline-block; width: .34em; text-align: center; }

/* ── DEP / ARR / NOW / FAV ───────────────────────────────── */
.mode-switch { gap: 6px; }
.mode-switch button {
    height: 32px; padding: 0 14px;
    background: var(--ui-surface); border: 1px solid var(--ui-line); color: var(--ui-dim);
    font-family: var(--ui-mono); font-size: 13px; letter-spacing: .1em;
}
.mode-switch button:hover { color: var(--ui-text); border-color: var(--ui-line-2); }
.mode-switch button.active {
    background: var(--ui-accent-bg); border-color: #1d5a68; color: var(--ui-accent);
    font-weight: 400; box-shadow: none;
}
.mode-switch .btn-now { background: transparent; color: #ff6b5e; border-color: #5a2420; }
.mode-switch .btn-now:hover { color: #ff8a80; border-color: #7a302a; }
.mode-switch #btn-fav-filter.active { background: #2e2610; border-color: #6b5419; color: #f5c542; }

/* ── search + filters ────────────────────────────────────── */
.search-box, .dropdowns select, .select-box {
    background-color: var(--ui-surface); border: 1px solid var(--ui-line); color: var(--ui-text);
    font-family: var(--ui-mono);
}
.search-box::placeholder { color: var(--ui-faint); }
.search-box:focus, .dropdowns select:focus, .select-box:focus, .ui-input:focus { border-color: #1d5a68; outline: none; }
.dropdowns select:hover, .select-box:hover { border-color: var(--ui-line-2); }

/* ── modals ──────────────────────────────────────────────── */
.modal-overlay { background: rgba(2, 4, 6, .82); }
.modal-card {
    background: #070a0d; border: 1px solid #16202a; border-radius: var(--ui-r-l);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .7);
}
.modal-card::-webkit-scrollbar-thumb { background: var(--ui-line-2); border-radius: 4px; }
.modal-close {
    width: 34px; height: 34px; background: var(--ui-surface); border: 1px solid var(--ui-line); color: var(--ui-dim);
}
.modal-close:hover { color: var(--ui-text); border-color: var(--ui-line-2); }

.fd-btn {
    background: var(--ui-surface); border: 1px solid var(--ui-line); color: var(--ui-dim);
    font-family: var(--ui-mono); letter-spacing: .12em;
}
.fd-btn:hover { color: var(--ui-text); border-color: var(--ui-line-2); background: var(--ui-surface-2); }
.fd-btn.primary { background: var(--ui-accent-bg); border-color: #1d5a68; color: var(--ui-accent); }
.fd-btn.primary:hover { background: #143a46; border-color: #247080; }

/* flight detail panels: cards with hairline dividers; an empty last grid cell stays card-coloured */
.fd-route, .fd-times, .fd-info-grid, .fd-mini-timeline {
    border: 1px solid var(--ui-line) !important; border-radius: var(--ui-r-m); overflow: hidden;
    background: var(--ui-surface);
}
.fd-mini-timeline { margin-bottom: 16px; }
.fd-times, .fd-info-grid { gap: 0; }
.fd-info-item, .fd-time-col { background: transparent; box-shadow: 1px 0 0 var(--ui-line), 0 1px 0 var(--ui-line); }
.fd-progress-wrap { border-bottom-color: var(--ui-line); }
.fd-mini-step { background: var(--ui-bg); border-color: var(--ui-line); }
.alliance-badge { border-radius: 6px; }
.fd-status-badge { border-radius: var(--ui-r-s); }
.fd-airline-logo, .ap-logo { border-radius: var(--ui-r-m); }
.fd-aircraft-photo, .fd-aircraft-photo img { border-radius: var(--ui-r-m); }

/* airline profile + aircraft page */
.ap-stats { background: transparent; gap: 8px; }
.ap-stat { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r-m); }
.ap-tab-bar {
    background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 9px; padding: 3px; gap: 2px;
}
.ap-tab-btn { background: transparent; border-radius: 6px; color: var(--ui-faint); font-family: var(--ui-mono); }
.ap-tab-btn:hover { color: var(--ui-text); }
.ap-tab-btn.active { background: var(--ui-accent-bg) !important; color: var(--ui-accent) !important; border: 0 !important; }
.ap-flight-list { margin-top: 8px; }
.ap-flight-row { background: var(--ui-surface); border-radius: var(--ui-r-s); margin-bottom: 4px; }
.ap-flight-row:hover { background: var(--ui-surface-2); }
.ap-info-grid { gap: 8px 16px; }

/* ── forms (Telegram) ────────────────────────────────────── */
.ui-modal-sm { width: min(440px, 94vw); padding: 26px 22px 22px; }
.ui-modal-title {
    margin: 0 0 18px; font-family: 'Orbitron', var(--ui-mono); font-weight: 700;
    font-size: 17px; letter-spacing: .12em; color: var(--ui-accent);
}
.ui-form { display: flex; flex-direction: column; gap: 14px; }
.ui-field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.ui-field > span { font-family: var(--ui-mono); font-size: 11.5px; letter-spacing: .12em; color: var(--ui-dim); text-transform: uppercase; }
.ui-input {
    width: 100%; box-sizing: border-box; padding: 11px 12px;
    background: var(--ui-surface); border: 1px solid var(--ui-line); color: var(--ui-text);
    font-family: var(--ui-mono); font-size: 16px; text-transform: none;
}
.ui-input::placeholder { color: var(--ui-faint); }
select.ui-input { appearance: auto; }
.ui-select-like { cursor: pointer; user-select: none; color: var(--ui-dim); }
.ui-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 100; margin-top: 6px;
    flex-direction: column; max-height: 320px;
    background: #0f161d; border: 1px solid var(--ui-line-2); border-radius: var(--ui-r-m);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .6); overflow: hidden;
}
.ui-dropdown-bar, .ui-dropdown-foot { display: flex; gap: 8px; padding: 10px; }
.ui-dropdown-bar { border-bottom: 1px solid var(--ui-line); }
.ui-dropdown-bar .fd-btn { flex: 1; justify-content: center; }
.ui-dropdown-foot { border-top: 1px solid var(--ui-line); }
.ui-dropdown-list { display: flex; flex-direction: column; gap: 8px; padding: 10px; overflow-y: auto; max-height: 200px; }
.ui-dropdown-list label { color: var(--ui-text) !important; text-transform: none; }
.ui-dropdown-list input[type="checkbox"] { accent-color: var(--ui-accent); }
.ui-block { width: 100%; justify-content: center; }
.ui-big { padding: 13px 16px; font-size: 13px; margin-top: 6px; }

/* floating NOW on the phone board */
.mob-now-btn { border-radius: var(--ui-r-m); background: #2a0f0d !important; border-color: #6b2a24 !important; color: #ff8a80 !important; }

/* ── radar chrome ────────────────────────────────────────── */
.fx-radar .leaflet-bar { border: 1px solid var(--ui-line); border-radius: var(--ui-r-s); overflow: hidden; box-shadow: none; }
.fx-radar .leaflet-bar a { background: var(--ui-surface); color: var(--ui-dim); border-bottom-color: var(--ui-line); }
.fx-radar .leaflet-bar a:hover { background: var(--ui-surface-2); color: var(--ui-text); }
.fx-radar-bar { background: linear-gradient(rgba(5, 8, 11, .96), rgba(5, 8, 11, .8)); border-bottom-color: var(--ui-line); }
.fx-chip { border-radius: var(--ui-r-s); background: rgba(12, 17, 22, .7); }
.fx-close { background: var(--ui-surface); border-color: var(--ui-line); color: var(--ui-dim); }
.fx-close:hover { color: var(--ui-text); border-color: var(--ui-line-2); }
.fx-radar-panel { border-radius: var(--ui-r-m); }

/* ── phones ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .top-dashboard { padding-top: calc(6px + var(--safe-top)); }
    .modal-card { padding-top: calc(14px + var(--safe-top)); }
    .modal-close { top: calc(10px + var(--safe-top)); }
    .fx-radar-bar { padding-top: max(8px, var(--safe-top)); }
    .st-top { padding-top: max(12px, var(--safe-top)); }
    /* row 1: average delay across the full width; row 2: tools + language */
    .lang-switcher { flex-wrap: wrap; justify-content: space-between; gap: 6px; }
    #delay-stats { order: -1; flex: 1 1 100%; justify-content: center; font-size: 11px; padding: 5px 8px; margin-right: 0; }
    .top-tools { gap: 5px; }
    .stats-top-btn { width: 36px; height: 32px; padding: 0; font-size: 15px; }
    .lang-btn { height: 26px; padding: 0 7px; font-size: 10.5px; }
    .lang-btn img { width: 15px; height: 10px; }
    .mode-switch button { height: 32px; padding: 0 11px; font-size: 12px; }
    .modal-card { border-radius: 0; border: 0; }
    /* pinch-zoom on phones; the +/- buttons would sit under the approach list */
    .fx-radar .leaflet-control-zoom { display: none; }
}
@media (max-width: 360px) {
    .stats-top-btn { width: 32px; }
    .lang-btn { padding: 0 5px; }
    .lang-btn img { display: none; }
}

/* flight detail: departure-airport and arrival-airport times as two separate blocks */
.fd-time-blocks { display: grid; gap: 10px; margin-bottom: 16px; }
.fd-time-block .fd-times { margin-bottom: 0; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.fd-time-block-head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    padding: 7px 14px; border: 1px solid var(--ui-line); border-bottom: 0;
    border-radius: var(--ui-r-m) var(--ui-r-m) 0 0; background: var(--ui-bg);
    font-size: 10px; letter-spacing: 2px; color: var(--ui-dim);
}
.fd-tb-kind { font-weight: 700; color: var(--ui-accent); }
.fd-time-block-arr .fd-tb-kind { color: #5fb3a1; }
.fd-tb-ap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fd-tb-ap b { color: var(--ui-text); letter-spacing: 1px; margin-right: 4px; }
/* three fixed slots per block so departure and arrival line up; the sub-line carries EST / delay / taxi */
.fd-time-block .fd-times { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.fd-time-block .fd-time-col { padding: 12px 14px; min-width: 0; }
.fd-time-block .fd-time-label { line-height: 1.3; min-height: 1.3em; overflow-wrap: anywhere; }
.fd-time-block .fd-time-value.v-est { color: #7fb6dc; }
.fd-time-block .fd-time-value.v-none { color: var(--ui-faint); }
.fd-time-sub { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 6px; min-height: 16px; font-size: 10px; letter-spacing: 1px; }
.fd-time-sub .fd-time-delay { margin: 0; font-size: 11px; font-weight: 700; }
.fd-time-tag { color: #7fb6dc; border: 1px solid #24435a; border-radius: 4px; padding: 0 5px; line-height: 15px; }
.fd-time-note { color: var(--ui-dim); }
@media (max-width: 600px) {
    .fd-time-block .fd-time-col { padding: 10px 9px; }
    .fd-time-block .fd-time-label { font-size: 9px; letter-spacing: 1px; min-height: 2.6em; }
    .fd-time-block .fd-time-value { font-size: 20px; }
    .fd-time-block-head { padding: 7px 10px; letter-spacing: 1.5px; }
}

/* flight detail: TRACK menu (in-app radar / Flightradar24) */
.fd-track { position: relative; display: inline-flex; }
.fd-track-menu {
    display: none; position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 20; min-width: 230px;
    background: var(--ui-surface-2); border: 1px solid var(--ui-line-2); border-radius: var(--ui-r-m);
    box-shadow: 0 8px 28px rgba(0,0,0,.5); padding: 4px; flex-direction: column;
}
.fd-track.open .fd-track-menu { display: flex; }
.fd-track-menu > button, .fd-track-menu > a {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; text-decoration: none;
    background: none; border: 0; border-radius: var(--ui-r-s); color: var(--ui-text); padding: 9px 12px;
    font: inherit; font-size: 12px; letter-spacing: 1.5px; cursor: pointer;
}
.fd-track-menu > button:hover:not([disabled]), .fd-track-menu > a:hover { background: var(--ui-accent-bg); color: var(--ui-accent); }
.fd-track-menu > button[disabled] { color: var(--ui-faint); cursor: default; }
.fd-track-menu small { font-size: 10px; letter-spacing: 1px; color: var(--ui-faint); text-transform: none; }

/* Telegram modal: daily report row */
.ui-check { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ui-text); cursor: pointer; text-transform: none; letter-spacing: .02em; }
.ui-check input { width: 16px; height: 16px; accent-color: var(--ui-accent); }
.ui-row-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.ui-row-btns .fd-btn { flex: 1 1 0; width: auto; min-width: 0; justify-content: center; text-decoration: none; text-align: center; padding-left: 6px; padding-right: 6px; white-space: nowrap; }

.fd-operator { color: var(--ui-faint); }