/*
 * Skywatch ADS-B: elevation layer (desktop). Loaded after the component sheets, so it has the last word on surface colours.
 *   map #181818 / sea #020202  <  control #131313, input #111111, panel #0d0d0d  <  card #1e1e1e (row #161616)
 * Text: #fff values, #939393 labels, #7a7a7a inactive nav and hints. White is the only accent.
 * The phone keeps its own flatter sheet (phone.css, #000 sheet and #161616 cards): everything here is scoped to desktop.
 */
@media (min-width: 769px) and (not (pointer: coarse)) {

    /* ---------- panels ---------- */
    #sidebar_container, #selected_infoblock, #airport_panel, #settings_infoblock, #graphsOverlay {
        background: var(--bg-panel) !important;
        border: 1px solid var(--line);
        border-radius: var(--r-panel);
        box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    #selected_infoblock, #airport_panel .apScroll { gap: 12px; }

    /* ---------- cards: 20px radius, 1px line, 12px apart ---------- */
    #selected_infoblock { --card: var(--bg-card); --card-line: var(--line); --mini: var(--bg-row); }
    #selected_infoblock .ibRoute, #selected_infoblock .ibCard, #selected_infoblock .ibCard2, #selected_infoblock .ibDetailsBtn,
    #selected_infoblock .ibTile, #selected_infoblock .ibNote,
    #airport_panel .ibCard,
    #graphsOverlay .gCard, .alRule, .statTile, .altimeterTile:not(.hidden) {
        background: var(--bg-card);
        border: 1px solid var(--line);
        border-radius: var(--r-card);
    }
    #selected_infoblock .ibDetailsBtn:hover { background: var(--bg-action-hover); }
    #selected_infoblock .ibScroll, #airport_panel .apScroll { gap: 12px; }
    .infoblock_row:not(.hidden), #columnsPopover #sortableColumns li, #airport_panel .ibTile, .apEnd { background: var(--bg-row); }

    /* the panel's own chips and small buttons */
    #selected_infoblock .ibBtn { background: var(--bg-segment); border: 1px solid var(--line); }
    #selected_infoblock .ibBtn:hover { background: var(--bg-control-hover); }

    /* action bar (Follow, 3D, Replay, Isolate) */
    .actionBar, #infoActions.actionBar { background: var(--bg-action); border: 1px solid var(--line); }
    .act { background: none; color: var(--text-2); }
    .act:hover { background: var(--bg-action-hover); color: var(--text); }
    .act.on, .act.activeButton { background: #fff; color: #000; }
    #infoActions.actionBar { border-radius: var(--r-card); }

    /* ---------- header: soft black scrim so the title never fights the map labels ---------- */
    #topbar::before {
        content: ''; position: absolute; left: 0; right: 0; top: 0; height: 96px; z-index: -1; pointer-events: none;
        background: linear-gradient(to bottom, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0));
    }
    #wordmark { text-shadow: none; }
    .wordmarkTitle { font-weight: 700; letter-spacing: -.01em; }
    .wordmarkCredit { font-size: 11px; color: var(--text-3); }
    .wordmarkTitle small { font-size: 12px; font-weight: 500; color: var(--text-2); margin-left: 6px; letter-spacing: 0; }

    /* ---------- text ---------- */
    body, .infoblock_heading { color: var(--text); }
    .ibTiny, .unit, #selected_infoblock .unit, .setNote, .filterHint, .mut, .lbl { color: var(--text-2); }

    /* ---------- top bar: nav as text links ---------- */
    #viewPill { background: none !important; border: 0; box-shadow: none; padding: 0; gap: 4px; }
    #viewPill .tb { height: 34px; padding: 0 14px; border-radius: 10px; background: none; color: var(--text-3); font-size: 14px; font-weight: 500; position: relative; }
    #viewPill .tb:not(.on):hover { color: var(--text); background: rgba(255, 255, 255, .06); }
    #viewPill .tb[aria-pressed="true"], #viewPill .tb.on { color: var(--text); background: none; }
    #viewPill .tb[aria-pressed="true"]::after, #viewPill .tb.on::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 1px; background: var(--text); }
    #viewPill .tb:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

    /* ---------- search ---------- */
    #searchWrap { width: 236px; }
    #search_form { background: var(--bg-input) !important; border: 1px solid var(--border-ctl); color: var(--text-input); box-shadow: none; }
    #search_form:focus-within { border-color: rgba(255, 255, 255, .28); }
    #search_input { color: var(--text-input); }
    #search_input::placeholder { color: var(--text-2); }
    #search_form kbd { font-family: var(--font-ui); font-size: 11px; font-weight: 500; color: var(--text-2); background: var(--bg-segment-on); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; line-height: 16px; white-space: nowrap; }
    #search_form svg { color: var(--icon); }

    /* ---------- control column, gear, zoom, 2D/3D/Globe ---------- */
    #controlStack, .ol-zoom.ol-control, #toolbar, #settingsCog {
        background: var(--bg-control) !important;
        border: 1px solid var(--border-ctl);
        box-shadow: none;
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    #controlStack { padding: 4px; gap: 4px; }
    #controlStack .btn, .ol-zoom.ol-control button, #settingsCog { color: var(--icon); }
    #controlStack .btn { width: 40px; height: 40px; border-radius: 50%; }
    #settingsCog { width: 40px; height: 40px; top: 16px; border-radius: 50%; }
    #controlStack .btn:hover, .ol-zoom.ol-control button:hover, #settingsCog:hover { background: var(--bg-control-hover) !important; color: var(--text); }
    #controlStack .btn[aria-pressed="true"], #controlStack .btn[aria-expanded="true"] { background: var(--bg-segment-on); color: var(--text); }
    #north_up .northN { fill: var(--compass-n); }
    #north_up .northS { fill: var(--compass-n); fill-opacity: .45; }
    #north_up .northRing { stroke: var(--icon); }
    .ol-zoom.ol-control { padding: 4px; background: var(--bg-segment) !important; }
    #viewMenu { background: var(--bg-segment) !important; }

    /* toggles in the bottom toolbar and filter chips: active = soft segment, white text */
    .tb.on, .tb.activeButton, .chip.on, .chip.activeButton { background: var(--bg-segment-on); color: var(--text); border-color: var(--line); }
    #toolbar .tb { color: var(--text-2); }
    #toolbar .tb:hover { color: var(--text); background: var(--bg-control-hover); }
    .tb kbd, .chip kbd { color: var(--text-3); }

    /* the old translucent button/chip fills */
    .chip { background: var(--bg-segment); border-color: var(--line); color: var(--text-2); }
    button.chip:hover { background: var(--bg-control-hover); color: var(--text); }
    #altitude_chart.ol-control { border-radius: var(--r-card); }

    /* settings and inputs */
    #settings_infoblock input:not([type=range]):not([type=checkbox]):not([type=radio]), #settings_infoblock select, .sk-input, .textFilter input, .filterRow input {
        background: var(--bg-input); border: 1px solid var(--border-ctl); color: var(--text-input);
    }
    .segmented { background: var(--bg-segment); }
    .segmented .on, .segmented button.on { background: var(--bg-segment-on); color: var(--text); }
    .popover, #filterPopover { background: var(--bg-panel) !important; border: 1px solid var(--line); border-radius: var(--r-card); }
}

/* ---------- hover card (the old tar1090 popup, restyled with the shared surfaces) ---------- */
#highlighted_infoblock {
    background: var(--bg-card) !important;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
    padding: 12px;
    min-width: 188px;
    max-width: 260px;
    font-family: var(--font-ui);
    font-variant-numeric: tabular-nums;
    color: var(--text);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
#highlighted_infoblock .highlightedTitle { border: 0; display: block; width: auto; margin-bottom: 8px; }
#highlighted_infoblock .identLarge { font-size: 17px; line-height: 22px; font-weight: 700; color: var(--text); font-family: var(--font-ui); }
#highlighted_infoblock .identSmall { font-size: 12px; font-weight: 500; color: var(--text-2); }
#highlighted_infoblock .infoBlockSection { padding: 0; }
#highlighted_infoblock .infoBlockSection > div:not(.rSpacer) { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; min-height: 20px; }
#highlighted_infoblock .rSpacer { padding: 2px 0; }
#highlighted_infoblock .infoHeading { margin: 0; font-size: 12px; font-weight: 400; color: var(--text-2); }
#highlighted_infoblock .infoData { float: none; margin: 0; text-align: right; font-size: 13px; font-weight: 600; color: var(--text); }
#highlighted_infoblock #highlighted_airline { color: var(--text-2); font-weight: 400; }
#highlighted_infoblock .infoBlockSection > div:has(#routeRowHighlight) { display: none; }

/* below 1100px the credit would reach the view links: it moves to About */
@media (min-width: 769px) and (max-width: 1099px) { .wordmarkCredit { display: none; } }

/* ---------- type: Inter with tabular numerals for values, codes and times; mono only for raw identifiers ---------- */
#selected_infoblock .mono, #selected_infoblock .v, #selected_infoblock .ibCallsign, #selected_infoblock .chip.mono, #selected_infoblock .ibSub .mono,
#airport_panel .mono, #sidebar_container .mono, #highlighted_infoblock .mono, .histBar .mono, #altitude_chart .mono {
    font-family: var(--font-ui);
    font-variant-numeric: tabular-nums;
}
#selected_infoblock #ib_sq, #selected_infoblock #ib_p_sq_t .v, #selected_infoblock .ibHexW, #selected_infoblock #ib_hex,
#airport_panel .apRaw, #about_web, #about_decoder, #about_db, #webinterface_version, #decoder_version {
    font-family: var(--font-mono);
}
#selected_infoblock .ibCallsign { font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
#selected_infoblock .ibBigV { font-size: 22px; font-weight: 600; }
#selected_infoblock .ibRouteCodes .mono { font-weight: 700; }
#airport_panel .apIcao { font-weight: 700; letter-spacing: -.01em; }

/* ---------- brand ---------- */
.wordmarkTitle { display: flex; align-items: center; gap: 8px; }
.wordmarkMark { width: 28px; height: 28px; flex: none; }
.wordmarkCredit { margin-left: 0; }
.aboutLogo { display: block; height: 64px; width: auto; max-width: 100%; margin-bottom: 4px; }
#loader { flex-direction: column; gap: 14px; }
.loaderMark { width: 44px; height: 44px; }