/* FlightViewer web - base styles. Component-level classes are namespaced
   with `fv-`. Designed mobile-first with breakpoints at 768px and 480px. */

:root {
    --bg-0: #101418;
    --bg-1: #161b21;
    --bg-2: #181d23;
    --bg-3: #1f2a37;
    --bg-deep: #0a0d10;
    --bg-deeper: #0e1216;
    --border: #2a3038;
    --border-soft: #1a1f25;
    --fg-0: #e6e6e6;
    --fg-1: #dcdfe3;
    --fg-2: #9aa4ad;
    --fg-3: #6e7780;
    --fg-4: #5a6068;
    --accent: #2e7d32;
    --accent-2: #3a4452;
    --amber: #e8a83e;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg-0);
    color: var(--fg-0);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }

/* === App layout ======================================================= */

.fv-app {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--bg-0);
    overflow: hidden;
}

/* Desktop layout: map on the left, sidebar on the right */
.fv-app__main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    min-height: 0;
}

.fv-map {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    background: #1e1e2e;
    position: relative;
}

.fv-sidebar {
    /* Wider than you might guess: the airport Departures / Arrivals list
       packs 3 columns (time+status, airline, destination+badges+flight#)
       and badges don't shrink, so a narrower sidebar causes horizontal
       scroll. 440px keeps the destination column readable at typical
       airline name lengths. */
    flex: 0 0 440px;
    width: 440px;
    height: 100%;
    background: var(--bg-deeper);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Sidebar pane: flex column. The pane itself never scrolls -- each child
   manages its own overflow so the aircraft table can take the remaining
   space and scroll internally. */
.fv-sidebar__pane {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Bottom nav tabs (mobile portrait only). Hidden on wider layouts. */
.fv-bottomnav {
    display: none;
    flex: 0 0 auto;
    background: var(--bg-deep);
    border-top: 1px solid var(--border);
}
.fv-bottomnav__btn {
    flex: 1 1 0;
    background: transparent;
    border: none;
    color: var(--fg-2);
    padding: 10px 0;
    font-size: 12px;
    cursor: pointer;
    border-top: 2px solid transparent;
}
.fv-bottomnav__btn.active {
    color: var(--fg-0);
    border-top-color: var(--amber);
}

/* === TopBar =========================================================== */

.fv-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
    /* Anchor for the absolutely-centered .fv-topbar__count child. */
    position: relative;
}
.fv-topbar__left {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 0;
}
.fv-topbar__title {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}
/* Logotype. 28px matches topbar padding and keeps the wordmark the same
   vertical rhythm as the old "FlightViewer" text. `display:block` avoids
   the inline-image baseline gap that would otherwise push the count
   text out of alignment. */
.fv-topbar__logo {
    height: 28px;
    width: auto;
    display: block;
    flex: 0 0 auto;
}
.fv-topbar__search-wrap {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
}
/* Wraps the <input> + clear (×) button so the × can be absolutely
   positioned against the input. `display:inline-block` keeps it from
   stretching inside the flex search-wrap. */
.fv-topbar__search-box {
    position: relative;
    display: inline-block;
    width: 280px;
    max-width: 100%;
}
.fv-topbar__search {
    width: 100%;
    background: var(--bg-deep);
    color: var(--fg-0);
    border: 1px solid var(--border);
    border-radius: 4px;
    /* Right padding leaves room for the × button without it overlapping
       the placeholder or user-typed text. */
    padding: 5px 28px 5px 10px;
    font: inherit;
    font-size: 12px;
    outline: none;
}
.fv-topbar__search:focus { border-color: #64b5f6; }
.fv-topbar__search::placeholder { color: var(--fg-4); }
/* Clear (×) button -- hidden by default, shown via .has-content on the
   search-box when the input holds user text. JS adds/removes the class
   based on the shared search flow. */
.fv-topbar__search-clear {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--fg-3);
    font-size: 14px;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
    display: none;
    border-radius: 3px;
}
.fv-topbar__search-clear:hover { color: var(--fg-0); background: var(--bg-3); }
.fv-topbar__search-box.has-content .fv-topbar__search-clear { display: block; }
.fv-topbar__right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.fv-topbar__count {
    /* Absolutely centered relative to .fv-topbar. Sits above the flex
       siblings visually but never intercepts pointer events so it can't
       steal clicks from anything beneath (e.g. overlapping search input
       on tight viewports). */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    color: var(--fg-2);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.fv-topbar__iconbtn {
    background: transparent;
    border: none;
    color: var(--fg-2);
    font-size: 18px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 4px;
}
.fv-topbar__iconbtn:hover { color: var(--fg-0); background: var(--bg-3); }
.fv-topbar__iconbtn--active { color: #64b5f6; }
.fv-topbar__iconbtn--amber { color: var(--amber); }

.fv-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    background: var(--accent-2);
    color: #fff;
}
.fv-btn--primary { background: var(--accent); }
.fv-btn--ghost {
    background: transparent;
    color: var(--fg-2);
    border: 1px solid var(--border);
}
.fv-btn--icon {
    padding: 6px 8px;
    background: transparent;
    color: var(--fg-2);
    font-size: 16px;
}
.fv-btn--icon:hover { color: var(--fg-0); }
.fv-btn:active { transform: translateY(1px); }

/* === AircraftTable =================================================== */

.fv-table-wrap {
    /* Take all the space the sidebar pane has left after the panels above
       us. min-height:0 lets the flex item shrink below its content size so
       the inner .fv-table-scroll handles overflow instead of the page. */
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-deeper);
}
.fv-table-wrap__empty {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    color: var(--fg-4);
    font-size: 13px;
}
.fv-table-scroll {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
}
.fv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.fv-table th {
    text-align: left;
    padding: 6px 6px;
    background: var(--bg-1);
    color: var(--fg-2);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    font-weight: 600;
    z-index: 1;
    white-space: nowrap;       /* keep "From -> To" on one line */
    user-select: none;
    cursor: context-menu;
}
.fv-table td {
    padding: 5px 6px;
    color: var(--fg-1);
    border-bottom: 1px solid var(--border-soft);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* Right-align the numeric columns so digits line up and the table reads
   tighter; keeps total width narrower than left-aligned padding. */
.fv-table .fv-col-alt,
.fv-table .fv-col-spd,
.fv-table .fv-col-hdg,
.fv-table .fv-col-dist {
    text-align: right;
}
.fv-table tr {
    cursor: pointer;
    background: var(--bg-deeper);
}
.fv-table tr:hover { background: #15191f; }
.fv-table tr.selected { background: var(--bg-3); }
.fv-table .fv-col-hidden { display: none; }

/* Column-picker popup (right-click on the table header) */
.fv-col-menu {
    position: fixed;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    z-index: 6000;
    min-width: 170px;
    font-size: 13px;
}
.fv-col-menu__header {
    padding: 4px 14px 6px;
    color: var(--fg-3);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 4px;
}
.fv-col-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    cursor: pointer;
    color: var(--fg-1);
}
.fv-col-menu__item:hover { background: var(--bg-3); }
.fv-col-menu__item input { accent-color: var(--amber); cursor: pointer; }

/* === StatusBar ======================================================= */

.fv-statusbar {
    display: flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--bg-deep);
    border-top: 1px solid var(--border-soft);
    color: var(--fg-2);
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    min-height: 22px;
    flex: 0 0 auto;
}

/* === DetailPanel ===================================================== */

.fv-detail {
    background: #252540;
    border-bottom: 1px solid var(--border);
    /* Cap at ~60% of the sidebar pane so the table below always gets
       breathing room. Scrolls internally if the photo+grid don't fit. */
    flex: 0 1 auto;
    max-height: 60%;
    overflow-y: auto;
}
.fv-detail__header {
    display: flex;
    align-items: center;
    padding: 8px 10px 4px;
    gap: 6px;
}
.fv-detail__callsign {
    color: var(--amber);
    font-weight: 700;
    font-size: 17px;
}
.fv-detail__badge {
    background: #3a3a50;
    color: #ccd;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
}
.fv-detail__spacer { flex: 1 1 auto; }
.fv-detail__icon-btn {
    background: transparent;
    border: none;
    color: var(--fg-3);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 6px;
}
.fv-detail__icon-btn:hover { color: var(--fg-0); }
.fv-detail__icon-btn.active { color: var(--amber); }
.fv-detail__airline {
    padding: 0 10px 4px;
    color: var(--fg-3);
    font-size: 11px;
}
.fv-detail__photo {
    width: 100%;
    max-height: 200px;
    min-height: 90px;
    object-fit: cover;
    background: #1a1a30;
    display: block;
}
.fv-detail__route {
    display: flex;
    padding: 6px 10px 2px;
    align-items: stretch;
    gap: 6px;
}
.fv-detail__rcol {
    flex: 1 1 0;
    text-align: center;
    min-width: 0;
}
.fv-detail__rcode {
    font-size: 22px;
    font-weight: 900;
    color: #ddde;
}
.fv-detail__rname {
    font-size: 9px;
    color: var(--fg-3);
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fv-detail__rsep {
    width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 4px;
    color: var(--amber);
}
.fv-detail__progress {
    width: 100%;
    height: 2px;
    margin-top: 4px;
    background: #3a3a50;
    border-radius: 1px;
    overflow: hidden;
}
.fv-detail__progress-bar {
    height: 100%;
    background: var(--amber);
    border-radius: 1px;
}
.fv-detail__rtime {
    font-size: 12px;
    font-weight: 700;
    color: #ddde;
}
.fv-detail__rtime-label {
    font-size: 9px;
    font-weight: 700;
    color: #777;
    letter-spacing: 0.05em;
}
.fv-detail__rsummary {
    text-align: center;
    font-size: 10px;
    color: var(--fg-3);
    padding: 0 10px 4px;
}
.fv-detail__divider {
    height: 1px;
    background: #3a3a50;
    margin: 4px 0;
}
.fv-detail__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 0.7fr;
    gap: 6px 8px;
    padding: 4px 10px;
}
.fv-detail__cell-label {
    font-size: 9px;
    font-weight: 700;
    color: #777;
    letter-spacing: 0.05em;
}
.fv-detail__cell-value {
    font-size: 13px;
    font-weight: 700;
    color: #ddde;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fv-detail__cell-value.up    { color: #81c784; }
.fv-detail__cell-value.down  { color: #ff8a65; }
.fv-detail__cell-value.emer  { color: #ff5252; }

/* === SettingsDialog ================================================== */

.fv-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    padding: 16px;
}
.fv-modal {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    max-width: 420px;
    width: 100%;
    max-height: calc(100vh - 32px);
    overflow: auto;
}
.fv-modal h2 {
    margin: 0 0 14px 0;
    font-size: 16px;
    color: var(--fg-0);
}
.fv-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 12px;
}
.fv-form-row label {
    color: var(--fg-2);
    font-size: 13px;
    flex: 1 1 auto;
}
.fv-form-row input[type="text"],
.fv-form-row input[type="number"],
.fv-form-row select {
    background: var(--bg-deep);
    color: var(--fg-0);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 13px;
    width: 140px;
}
.fv-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

/* === Airport panel =================================================== */

.fv-airport {
    padding: 10px 12px;
    color: var(--fg-1);
    /* Same treatment as .fv-detail — capped so the table is always visible. */
    flex: 0 1 auto;
    max-height: 60%;
    overflow-y: auto;
    overflow-x: hidden;     /* no horizontal scroll, ever */
    min-width: 0;
}
.fv-airport > * { min-width: 0; max-width: 100%; }
.fv-airport h3 {
    margin: 0 0 4px 0;
    color: var(--amber);
    font-size: 16px;
}
.fv-airport__sub {
    color: var(--fg-3);
    font-size: 11px;
    margin-bottom: 10px;
}
.fv-airport__photo {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 10px;
    background: var(--bg-deeper);
}

/* ── Weather card ─────────────────────────────────────────────────────── */

.fv-airport__weather {
    background: var(--bg-1);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.fv-airport__weather-empty {
    color: var(--fg-3);
    font-size: 11px;
    padding: 2px 0;
}
.fv-airport__weather-head {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}
.fv-airport__weather-head > * { min-width: 0; }
.fv-airport__weather-cond {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fv-airport__weather-icon {
    font-size: 28px;
    line-height: 1;
}
.fv-airport__weather-condname {
    font-size: 11px;
    color: var(--fg-2);
    text-align: center;
    margin-top: 2px;
}
.fv-airport__weather-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.fv-airport__weather-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--fg-3);
    text-transform: uppercase;
}
.fv-airport__weather-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--fg-0);
    min-width: 0;
    overflow-wrap: anywhere;    /* wrap long values instead of overflowing */
    line-height: 1.25;
}
.fv-airport__weather-value--sm { font-size: 12px; font-weight: 600; }
.fv-airport__weather-sub {
    font-size: 11px;
    color: var(--fg-3);
}
.fv-airport__weather-grid {
    display: grid;
    /* Two columns on tight sidebars (clouds string is the longest value
       and deserves the full row when needed). Three columns on wider
       layouts via the media query below. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
}
.fv-airport__weather-grid > * { min-width: 0; }
/* Let the clouds cell span both columns since the text can be long. */
.fv-airport__weather-grid > :nth-child(2) { grid-column: 1 / -1; }
@media (min-width: 1200px) {
    .fv-airport__weather-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    }
    .fv-airport__weather-grid > :nth-child(2) { grid-column: auto; }
}
.fv-airport__weather-raw {
    margin-top: 8px;
    padding: 6px 8px;
    background: var(--bg-deeper);
    border-radius: 3px;
    font-family: ui-monospace, monospace;
    font-size: 10px;
    color: var(--fg-3);
    word-break: break-word;
    line-height: 1.4;
}
.fv-airport__empty {
    color: var(--fg-3);
    font-size: 12px;
    padding: 4px 0 8px;
}
.fv-airport__close { margin-top: 10px; }
.fv-airport__feeds {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}
/* Section header for grouped feeds (e.g. "Sun 'n Fun"). Appears above a
   .fv-airport__feeds block when that block is a named category. */
.fv-airport__feeds-section {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--amber);
    padding: 8px 0 4px;
}
.fv-airport__feeds-section:first-child { padding-top: 0; }
.fv-airport__feed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--bg-1);
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    /* Reserve a 3px left border slot even when idle so the row width
       doesn't change when .playing adds its accent stripe — prevents
       layout shift that read as "the row below got selected" when the
       border appeared. */
    border-left: 3px solid transparent;
}
.fv-airport__feed:hover { background: var(--bg-3); }
.fv-airport__feed.playing {
    /* Strong combined cue: amber stripe AND a warm background tint so
       the active row is unambiguous even on mobile where a 3px stripe
       is easy to lose. */
    border-left-color: var(--amber);
    background: rgba(232, 168, 62, 0.14);
    color: var(--amber);
    font-weight: 600;
}
.fv-airport__feed.playing:hover { background: rgba(232, 168, 62, 0.22); }

/* === ATC player bar ================================================== */

.fv-atc {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #1c1f28;
    border-top: 1px solid var(--border);
    color: var(--fg-1);
    font-size: 13px;
}
.fv-atc__title { font-weight: 600; min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-atc__status { font-size: 11px; color: var(--fg-3); }
.fv-atc__status.error { color: #ff7070; }
.fv-atc__vol { width: 100px; }

/* === Bookmarks panel ================================================= */

.fv-bookmarks {
    padding: 8px 12px;
    flex: 0 1 auto;
    max-height: 40%;
    overflow-y: auto;
    border-bottom: 1px solid var(--border-soft);
}
.fv-bookmarks__header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-soft);
}
.fv-bookmarks__star { color: var(--amber); font-size: 14px; }
.fv-bookmarks__title {
    color: var(--amber);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.fv-bookmarks__spacer { flex: 1 1 auto; }
.fv-bookmarks__close {
    background: transparent;
    border: none;
    color: var(--fg-3);
    font-size: 13px;
    cursor: pointer;
    padding: 2px 6px;
}
.fv-bookmarks__close:hover { color: var(--fg-0); }

.fv-bookmarks__empty {
    color: var(--fg-4);
    font-size: 12px;
    padding: 12px 4px;
    text-align: center;
}
/* Section label between "Flights" and "Airports" groups in the
   favorites panel. Small, uppercase, muted; sits above each list. */
.fv-bookmarks__section-label {
    color: var(--fg-3);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 8px 2px 4px;
}
.fv-bookmarks__section-label:first-of-type { margin-top: 2px; }
.fv-bookmarks__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fv-bookmarks__item {
    background: var(--bg-1);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fv-bookmarks__item:hover { background: var(--bg-3); }
.fv-bookmarks__row1 {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.fv-bookmarks__row2 {
    color: var(--fg-3);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fv-bookmarks__callsign {
    font-weight: 700;
    color: var(--fg-0);
}
.fv-bookmarks__badge {
    background: #3A3A50;
    color: #ccd;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
}
.fv-bookmarks__time {
    color: var(--fg-4);
    font-size: 10px;
    white-space: nowrap;
}
.fv-bookmarks__delete {
    background: transparent;
    border: none;
    color: var(--fg-4);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    margin-left: 2px;
}
.fv-bookmarks__delete:hover { color: #ff8a65; }
.fv-bookmarks__hex { color: var(--fg-3); font-family: ui-monospace, monospace; }

/* === Map controls ===================================================== */

.fv-map-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: rgba(30, 30, 46, 0.9);
    border-radius: 6px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fv-map-btn {
    background: rgba(50, 50, 70, 0.95);
    color: #ccc;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
}
.fv-map-btn:hover { background: #444; color: #fff; }
.fv-map-btn.active { background: #64b5f6; color: #fff; border-color: #64b5f6; }
/* Weather toggle uses a distinct color so the "on" state doesn't look like
   a selected tile style. */
.fv-map-btn--weather.active { background: #2a8fbd; color: #fff; border-color: #2a8fbd; }

.fv-recenter-btn {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: none;
    background: rgba(30, 30, 46, 0.92);
    color: #64b5f6;
    border: 1px solid #64b5f6;
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}
.fv-recenter-btn:hover { background: #64b5f6; color: #fff; }

/* Aircraft markers (Leaflet divIcon styling) */
.fv-aircraft-marker { background: none !important; border: none !important; }
.fv-aircraft-label {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 3px;
    white-space: nowrap;
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #1a1a1a;
    background: rgba(255, 235, 130, 0.75);
    padding: 1px 4px;
    border-radius: 2px;
}
body.fv-low-zoom .fv-aircraft-label { display: none; }
@keyframes fv-emergency-pulse {
    0% { opacity: 0.6; }
    50% { opacity: 0.15; }
    100% { opacity: 0.6; }
}
.fv-emergency-pulse { animation: fv-emergency-pulse 1.5s ease-in-out infinite; }

/* === Responsive: tablet (<=1024px): narrower sidebar =============== */

@media (max-width: 1024px) {
    /* Tablet tier: shrink by the same ~15% as the desktop->tablet ratio
       used to be (380->320). With the new desktop width of 440px that's
       roughly 380 -- enough to keep flight-list rows from scrolling. */
    .fv-sidebar { flex-basis: 380px; width: 380px; }
}

/* === Responsive: mobile portrait (<=768px) ========================== */

@media (max-width: 768px) {
    .fv-app__main { flex-direction: column; }
    .fv-map {
        flex: 1 1 auto;       /* Map takes all remaining space */
        height: auto;
    }
    .fv-sidebar {
        flex: 0 0 auto;       /* Sidebar height controlled by content */
        width: 100%;
        max-height: 50vh;
        border-left: none;
        border-top: 1px solid var(--border);
    }
    /* Show only one pane at a time on mobile, switched via bottom nav */
    .fv-app[data-mobile-tab="map"] .fv-sidebar { display: none; }
    .fv-app[data-mobile-tab="map"] .fv-map { height: 100%; }
    .fv-app[data-mobile-tab="list"] .fv-map { display: none; }
    .fv-app[data-mobile-tab="list"] .fv-sidebar { max-height: none; height: 100%; }
    .fv-bottomnav { display: flex; }

    /* Bottom-sheet overlay: when on the Map tab and the user has
       selected an aircraft or airport, surface the relevant panel on
       top of the map instead of forcing them to switch to the List
       tab. The sheet is pinned to the bottom and capped at 60vh so
       the map stays partially visible (their pin / the tapped marker
       is often right above the sheet). Bookmarks DON'T use this
       overlay -- tapping the ★ icon auto-switches to the List tab
       (see TopBar.kt) because the bookmarks panel is long-form and
       reads better with the full sidebar real estate. */
    .fv-app__main { position: relative; }
    .fv-app[data-mobile-tab="map"][data-has-selection="true"] .fv-sidebar {
        display: flex;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 60vh;
        height: auto;
        border-left: none;
        border-top: 1px solid var(--border);
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.45);
        z-index: 1200;    /* above Leaflet controls (1000) and recenter btn */
    }
    /* Inside the overlay, hide the list-oriented panels so the sheet
       stays focused on the active detail/airport content. DetailPanel
       and AirportPanel handle their own display via selection flow. */
    .fv-app[data-mobile-tab="map"][data-has-selection="true"] .fv-bookmarks,
    .fv-app[data-mobile-tab="map"][data-has-selection="true"] .fv-filter,
    .fv-app[data-mobile-tab="map"][data-has-selection="true"] .fv-table-wrap {
        display: none !important;
    }
    /* Detail / airport containers cap themselves at a percentage of
       their parent's height on desktop; free them here so the overlay
       uses its full 60vh budget. */
    .fv-app[data-mobile-tab="map"][data-has-selection="true"] .fv-detail,
    .fv-app[data-mobile-tab="map"][data-has-selection="true"] .fv-airport {
        max-height: none;
        flex: 1 1 auto;
    }

    .fv-topbar { padding: 8px 10px; }
    /* Hide the absolutely-centered count at tablet+mobile widths — the
       search box + icon row is too wide at this scale and the count
       would overlap. Mobile breakpoint below also hides it. */
    .fv-topbar__count { display: none; }
    .fv-table th, .fv-table td { padding: 6px 6px; }
}

@media (max-width: 480px) {
    .fv-topbar__title { font-size: 14px; }
    .fv-topbar__logo { height: 24px; }     /* scale the mark down on narrow phones */
    .fv-topbar__count { font-size: 11px; display: none; }   /* free up space for search */
    .fv-topbar__search { width: 100%; }
    .fv-btn { padding: 8px 14px; font-size: 14px; }   /* bigger touch target */
    .fv-table { font-size: 11px; }
    .fv-modal { padding: 14px; }
    .fv-form-row { flex-direction: column; align-items: stretch; gap: 4px; }
    .fv-form-row input[type="text"], .fv-form-row input[type="number"], .fv-form-row select { width: 100%; }
    .fv-map-controls { right: 6px; top: 6px; }
    .fv-map-btn { font-size: 12px; padding: 6px 10px; }
}

/* === FilterPanel ====================================================== */

.fv-filter {
    background: #252540;
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
    flex: 0 0 auto;
}
.fv-filter__header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.fv-filter__title {
    color: #64b5f6;
    font-size: 13px;
    font-weight: 700;
}
.fv-filter__spacer { flex: 1 1 auto; }
.fv-filter__reset {
    background: transparent;
    border: none;
    color: #ff8a65;
    font-size: 11px;
    cursor: pointer;
    padding: 2px 6px;
    margin-right: 4px;
}
.fv-filter__reset:hover { color: #ffb089; }
.fv-filter__close {
    background: transparent;
    border: none;
    color: var(--fg-3);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 2px 6px;
}
.fv-filter__close:hover { color: var(--fg-0); }

.fv-filter__label {
    color: #bbc;
    font-size: 11px;
    margin-bottom: 4px;
}
.fv-filter__range-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}
.fv-filter__range {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 20px;
}
.fv-filter__range::-webkit-slider-runnable-track {
    height: 4px;
    background: #444466;
    border-radius: 2px;
}
.fv-filter__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 14px;
    width: 14px;
    background: #64b5f6;
    border: none;
    border-radius: 50%;
    margin-top: -5px;
    cursor: pointer;
}
.fv-filter__range::-moz-range-track {
    height: 4px;
    background: #444466;
    border-radius: 2px;
}
.fv-filter__range::-moz-range-thumb {
    height: 14px;
    width: 14px;
    background: #64b5f6;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.fv-filter__toggles {
    display: flex;
    gap: 14px;
    margin-bottom: 8px;
}
.fv-filter__checkbox {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #bbc;
    font-size: 12px;
    cursor: pointer;
}
.fv-filter__checkbox input { accent-color: #64b5f6; cursor: pointer; }

.fv-filter__airline {
    width: 100%;
    background: var(--bg-deep);
    color: var(--fg-0);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 5px 8px;
    font: inherit;
    font-size: 12px;
    outline: none;
}
.fv-filter__airline:focus { border-color: #64b5f6; }
.fv-filter__airline::placeholder { color: var(--fg-4); }

/* === Table: sort indicator + emergency row tints ===================== */

.fv-table .fv-col-sortable { cursor: pointer; }
.fv-table .fv-col-sortable:hover { color: var(--fg-0); }
.fv-table .fv-col-sorted { color: #64b5f6; }

.fv-table tr.fv-table__row--emer-7700 { background: #3A1515; }
.fv-table tr.fv-table__row--emer-7600 { background: #3A2A15; }
.fv-table tr.fv-table__row--emer-7500 { background: #2A153A; }
/* Emergency tints stay visible on hover but slightly brighter */
.fv-table tr.fv-table__row--emer-7700:hover { background: #4a1e1e; }
.fv-table tr.fv-table__row--emer-7600:hover { background: #4a361c; }
.fv-table tr.fv-table__row--emer-7500:hover { background: #3a1e4a; }
/* Selection still wins over emergency */
.fv-table tr.selected { background: var(--bg-3); }
.fv-table tr.selected.fv-table__row--emer-7700,
.fv-table tr.selected.fv-table__row--emer-7600,
.fv-table tr.selected.fv-table__row--emer-7500 { background: var(--bg-3); }

.fv-table td.up    { color: #81c784; }
.fv-table td.down  { color: #ff8a65; }

/* === Airport panel: tabs + info row + flight list ===================== */

.fv-airport__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}
.fv-airport__spacer { flex: 1 1 auto; }
.fv-airport__tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    margin: 8px 0 10px;
}
.fv-airport__tab {
    background: transparent;
    border: none;
    color: var(--fg-3);
    padding: 6px 12px;
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;     /* collapse with the tabs border */
}
.fv-airport__tab:hover { color: var(--fg-1); }
.fv-airport__tab.active {
    color: #64b5f6;
    border-bottom-color: #64b5f6;
}
.fv-airport__tab-content { min-height: 0; min-width: 0; overflow-x: hidden; }

.fv-airport__info-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px 10px;
    padding: 6px 0;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-soft);
}
.fv-airport__info-cell { min-width: 0; }
.fv-airport__info-cell--wide { grid-column: 1 / -1; }
.fv-airport__info-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--fg-3);
    text-transform: uppercase;
}
.fv-airport__info-value {
    font-size: 12px;
    font-weight: 700;
    color: var(--fg-0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fv-airport__flightlist,
.fv-airport__onground {
    display: flex;
    flex-direction: column;
}
.fv-airport__loading {
    color: var(--fg-3);
    font-size: 12px;
    padding: 8px 2px;
}
.fv-airport__flight-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 12px;
    min-width: 0;
}
.fv-airport__flight-time {
    flex: 0 0 72px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.fv-airport__ground-callsign {
    flex: 0 0 100px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.fv-airport__flight-time-big {
    font-size: 13px;
    font-weight: 700;
    color: var(--fg-0);
    line-height: 1.2;
}
.fv-airport__flight-status {
    font-size: 10px;
    color: var(--fg-3);
    line-height: 1.25;
}
.fv-airport__flight-status.enroute { color: #81c784; }
.fv-airport__flight-airline {
    flex: 0 0 90px;
    min-width: 0;
    font-size: 10px;
    color: var(--fg-3);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.fv-airport__flight-dest {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fv-airport__flight-dest-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.fv-airport__flight-destname {
    font-size: 12px;
    font-weight: 700;
    color: var(--fg-0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.fv-airport__flight-num {
    font-size: 11px;
    color: var(--fg-3);
}
.fv-airport__code-badge {
    flex: 0 0 auto;
    background: #3A3A50;
    color: #ccd;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
}
.fv-airport__type-badge {
    flex: 0 0 auto;
    background: #2A4A6A;
    color: #64b5f6;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
}