body {
    font-family: 'Consolas', 'Courier New', monospace;
    background: #000;
    color: #ccc;
    height: 100vh;
    display: flex;
    flex-direction: column;
    /* height must stay a fixed 100vh, not min-height/auto — with an auto height, this being a flex
       container means .main's "flex: 1 fills the remaining space" stops meaning anything (there's no
       definite remaining space to fill without a definite container size), so it collapses to fit its own
       content instead of the viewport, and the virtualized flight table's giant off-screen row area then
       drives the whole page's height. With height staying fixed, .main's min-height/overflow below can
       still make it (and, as a last resort, this overflow) scroll when zoom shrinks the effective viewport
       enough that the fixed-height chrome above .main no longer fits inside it. */
    overflow-y: auto;
}

/* ── Top bar ──────────────────────────────────────────────── */
.topbar {
    background: #0a0a0a;
    border-bottom: 1px solid #333;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.topbar h1 { font-size: 15px; color: #cccc44; font-weight: normal; letter-spacing: 2px; }
.status { font-size: 11px; color: #666; }
.status.ok { color: #44aa44; }
.stats { font-size: 11px; color: #888; margin-left: auto; }

/* ── Filter bar ───────────────────────────────────────────── */
.filterbar {
    background: #0a0a0a;
    border-bottom: 1px solid #333;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.search-box {
    background: #111;
    border: 1px solid #333;
    border-radius: 2px;
    padding: 4px 10px;
    font-size: 12px;
    font-family: inherit;
    color: #ccc;
    width: 280px;
    outline: none;
}
.search-box:focus { border-color: #cccc44; }
.search-box::placeholder { color: #555; }
.filter-label { font-size: 10px; color: #666; letter-spacing: 1px; }
.filter-select {
    background: #111;
    border: 1px solid #333;
    border-radius: 2px;
    padding: 3px 6px;
    font-size: 11px;
    font-family: inherit;
    color: #ccc;
    outline: none;
}
.filter-select:focus { border-color: #cccc44; }
.filter-sep { width: 1px; height: 18px; background: #333; }
.result-count { font-size: 11px; color: #555; }

/* ── Main split layout ───────────────────────────────────── */
.main {
    display: flex;
    flex: 1;
    /* A floor so this never gets flexed down to nothing when the chrome above it is tall relative to the
       viewport (zoomed in, a narrow window, etc.) — past this point the panel scrolls itself, and if that
       still isn't enough room the body (overflow-y: auto above) takes over as the last-resort scrollbar. */
    min-height: 280px;
    overflow: auto;
}

/* ── Flight list (left panel) ────────────────────────────── */
.flight-list {
    flex: 1;
    overflow-y: auto;
    min-width: 0;
}

/* Column header */
.col-header {
    display: grid;
    grid-template-columns: 22px 100px 54px 88px 88px 62px 52px 26px 80px 54px 26px 24px;
    gap: 6px;
    padding: 6px 12px;
    font-size: 10px;
    color: #555;
    letter-spacing: 1px;
    border-bottom: 1px solid #222;
    background: #050505;
    position: sticky;
    top: 0;
    z-index: 2;
    cursor: pointer;
    user-select: none;
}
.col-header span:hover { color: #cccc44; }
.col-header .sorted { color: #cccc44; }

/* Virtualized rows: fixed height, absolutely positioned within #rows.
   The #rows container is sized to (rowCount × ROW_HEIGHT) so the scrollbar
   reflects the full virtual list, but only the visible window is rendered. */
#rows { position: relative; }
.flight-row {
    position: absolute;
    left: 0;
    right: 0;
    box-sizing: border-box;
    height: 24px;
    display: grid;
    grid-template-columns: 22px 100px 54px 88px 88px 62px 52px 26px 80px 54px 26px 24px;
    gap: 6px;
    padding: 4px 12px;
    font-size: 12px;
    border-bottom: 1px solid #111;
    cursor: pointer;
    align-items: center;
}
.flight-row:hover { background: #0a0a0a; }
.flight-row:hover { background: #0a0a0a; }
.flight-row.selected { background: #0a1a0a; border-left: 2px solid #44aa44; }
/* Keep long values (e.g. lat/long dep/arr, long callsigns) inside their column —
   show as much as fits, ellipsize the rest; full text is available via title tooltip. */
.flight-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.flight-row .cs { color: #fff; }
.flight-row .dep, .flight-row .arr { color: #888; }
.flight-row .alt { color: #39d2c0; }
.flight-row .alt.vfr { color: #cccc44; }
.flight-row .int { color: #ff8844; }
.flight-row .rules { color: #888; }
.flight-row .sector { color: #5588ff; }
.flight-row .sqk { color: #888; }
.flight-row .dl { font-size: 10px; }
.flight-row .dl.yes { color: #44aa44; }
.flight-row .dl.no { color: #333; }
.flight-row .pin {
    color: #444; cursor: pointer; font-size: 13px; line-height: 1;
    text-align: center; user-select: none; transition: color 0.1s;
}
.flight-row .pin:hover { color: #888; }
.flight-row .pin.pinned { color: #cccc44; }
.flight-row .pin.pinned:hover { color: #ffff66; }
.flight-row .pin.grace { color: #886600; }
.col-header .pin-col { color: #555; }

/* Export CSV button (top bar) */
.export-btn {
    background: #1a1a1a; color: #cccc44; border: 1px solid #444;
    padding: 4px 10px; font-family: 'Consolas', monospace; font-size: 11px;
    cursor: pointer; margin-left: 8px;
}
.export-btn:hover { background: #333; border-color: #cccc44; }

/* Confirmation modal */
.confirm-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}
.confirm-box {
    background: #1a1a1a; border: 1px solid #cccc44; padding: 18px 22px;
    color: #ddd; font-family: 'Consolas', monospace; font-size: 12px;
    max-width: 420px; line-height: 1.5;
}
.confirm-box h3 { color: #cccc44; margin-bottom: 10px; font-size: 13px; }
.confirm-box .actions { margin-top: 14px; text-align: right; }
.confirm-box button {
    background: #1a1a1a; color: #cccc44; border: 1px solid #444;
    padding: 4px 12px; font-family: inherit; font-size: 11px; cursor: pointer; margin-left: 6px;
}
.confirm-box button:hover { border-color: #cccc44; }
.confirm-box button.danger { color: #ff8844; border-color: #663322; }
.confirm-box button.danger:hover { border-color: #ff8844; background: #221008; }
.flight-row .st { width: 8px; height: 8px; border-radius: 50%; margin-top: 3px; }
.flight-row .st.active { background: #44aa44; }
.flight-row .st.dropped { background: #ff4444; }
.flight-row .st.cancelled { background: #555; }
.flight-row .st.historical { background: #444; }
.flight-row.historical { opacity: 0.5; }
.flight-row.historical:hover { opacity: 0.75; }
.flight-row.historical.selected { opacity: 0.75; }
.purge-banner {
    background: #1a1000;
    border: 1px solid #665500;
    color: #cccc44;
    font-size: 11px;
    padding: 6px 12px;
    margin-bottom: 10px;
    letter-spacing: 1px;
    text-align: center;
}
.detail-header .status-badge.historical { background: #1a1a00; color: #888; border: 1px solid #555; }

/* ── Detail panel (right) ────────────────────────────────── */
.detail-panel {
    width: 440px;
    background: #050505;
    border-left: 1px solid #333;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.2s;
    flex-shrink: 0;
}
.detail-panel.collapsed { width: 0; border: none; }

.detail-header {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid #333;
    gap: 10px;
    flex-shrink: 0;
}
.detail-header .cs-big { font-size: 16px; color: #fff; }
.detail-header .type-badge { color: #888; font-size: 12px; }
.detail-header .status-badge { font-size: 10px; padding: 1px 6px; border-radius: 2px; }
.detail-header .status-badge.active { background: #0a200a; color: #44aa44; border: 1px solid #44aa44; }
.detail-header .status-badge.dropped { background: #200a0a; color: #ff4444; border: 1px solid #ff4444; }
.detail-close {
    margin-left: auto;
    cursor: pointer;
    color: #555;
    font-size: 18px;
    padding: 2px 6px;
}
.detail-close:hover { color: #fff; }

/* Tabs */
.tab-bar {
    display: flex;
    border-bottom: 1px solid #333;
    flex-shrink: 0;
}
.tab {
    padding: 6px 16px;
    font-size: 11px;
    letter-spacing: 1px;
    color: #555;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s;
}
.tab:hover { color: #aaa; }
.tab.active { color: #cccc44; border-bottom-color: #cccc44; }

.detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px;
}

/* Detail sections */
.section { margin-bottom: 14px; }
.section h3 {
    font-size: 10px;
    color: #555;
    letter-spacing: 1px;
    margin-bottom: 5px;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 3px;
    font-weight: normal;
}
.field-grid {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 3px 10px;
    font-size: 12px;
}
.field-label { color: #555; }
.field-value { color: #ccc; word-break: break-all; }
.field-value.hl { color: #39d2c0; }
.field-value.warn { color: #ff8844; }
.field-value.accent { color: #5588ff; }

.route-text {
    font-size: 11px;
    color: #aaa;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.5;
    padding: 5px 8px;
    background: #080808;
    border: 1px solid #1a1a1a;
    border-radius: 2px;
    margin-bottom: 6px;
}

.icao-btn {
    background: #0a200a;
    color: #cccc44;
    border: 1px solid #44aa44;
    padding: 4px 14px;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
    margin-bottom: 8px;
}
.icao-btn:hover { background: #0a300a; color: #fff; }
.simbrief-btn { text-decoration: none; display: inline-block; margin-left: 6px; }
.icao-block {
    background: #080808;
    border: 1px solid #333;
    padding: 10px 12px;
    padding-top: 28px;
    font-size: 12px;
    color: #ccc;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.6;
    margin-bottom: 14px;
    position: relative;
}
.icao-copy {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #1a1a1a;
    color: #888;
    border: 1px solid #333;
    padding: 2px 8px;
    font-size: 10px;
    cursor: pointer;
    font-family: inherit;
}
.icao-copy:hover { color: #fff; }

/* Event log (tab 2) */
.event-row {
    padding: 3px 0;
    border-bottom: 1px solid #0a0a0a;
    cursor: pointer;
}
.event-row:hover { background: #0a0a0a; }
.event-row .ev-line {
    display: flex;
    gap: 8px;
    font-size: 11px;
}
.event-row .ev-time { color: #555; min-width: 68px; font-variant-numeric: tabular-nums; }
.event-row .ev-src { min-width: 22px; font-weight: normal; }
.event-row .ev-src.oh, .event-row .ev-src.hp, .event-row .ev-src.ah,
.event-row .ev-src.hu, .event-row .ev-src.hx { color: #5588ff; }
.event-row .ev-src.fh { color: #ccc; }
.event-row .ev-src.th, .event-row .ev-src.hz { color: #333; }
.event-row .ev-src.lh { color: #ff8844; }
.event-row .ev-src.ba, .event-row .ev-src.re { color: #888; }
.event-row .ev-src.pt, .event-row .ev-src.ht { color: #cc44cc; }
.event-row .ev-src.cl { color: #ff4444; }
.event-row .ev-center { color: #444; min-width: 30px; }
.event-row .ev-summary { color: #aaa; flex: 1; }
.event-row .ev-xml-indicator { color: #333; font-size: 10px; }
.event-row .ev-xml-indicator.has-xml { color: #555; }

/* Raw XML expansion */
.xml-block {
    background: #080808;
    border: 1px solid #1a1a1a;
    border-radius: 2px;
    padding: 6px 8px;
    margin: 4px 0 2px 0;
    font-size: 10px;
    line-height: 1.4;
    max-height: 400px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    display: none;
    position: relative;
    user-select: text;
}
.xml-block.open { display: block; }
.xml-block .xml-tag { color: #44aa44; }
.xml-block .xml-attr { color: #cccc44; }
.xml-block .xml-val { color: #5588ff; }
.xml-block .xml-text { color: #ccc; }
.xml-copy-btn {
    position: absolute; top: 4px; right: 4px;
    background: #222; border: 1px solid #444; color: #aaa;
    font-size: 10px; padding: 2px 6px; cursor: pointer; border-radius: 2px;
}
.xml-copy-btn:hover { background: #333; color: #fff; }

.th-group {
    font-size: 10px;
    color: #333;
    padding: 3px 0;
    cursor: pointer;
}
.th-group:hover { color: #555; }

.loading { color: #444; font-size: 11px; padding: 8px 0; }

/* Event count in tab label */
.event-count { color: #555; font-size: 10px; margin-left: 4px; }

/* ── Mobile / narrow screens ─────────────────────────────────── */
@media (max-width: 768px) {
    /* Top bar: leave room for the floating HOME button, let stats wrap below. */
    .topbar { flex-wrap: wrap; gap: 6px 12px; padding: 8px 12px 8px 88px !important; }
    .topbar h1 { font-size: 13px; }
    .stats { margin-left: 0; flex-basis: 100%; }

    /* Filter bar already wraps; give the search box the full row. */
    .filterbar { gap: 6px 10px; padding: 6px 10px; }
    .search-box { width: 100%; flex: 1 1 100%; }
    .filter-sep { display: none; }

    /* Keep the dense table readable by scrolling it horizontally instead of
       crushing the columns. */
    .flight-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .col-header, .flight-row { min-width: 700px; }

    /* Detail panel becomes a full-screen overlay over the list. */
    .detail-panel {
        position: fixed; inset: 0; width: auto; max-width: none;
        z-index: 60; border-left: none; transition: none;
    }
    .detail-panel.collapsed { display: none; width: 0; }
}

/* ── Main 2×2 dashboard layout ── */
.dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    padding: 8px;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* ── Dashboard cards ── */
.card {
    background: #050505;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.card-content {
    padding: 10px;
}

.card .header {
    background: #0a0a0a;
    border-bottom: 1px solid #333;
    padding: 8px 12px;
    font-size: 11px;
    color: #cccc44;
    letter-spacing: 1px;
    flex-shrink: 0;
}

/* ── Bottom-left: eight METAR boxes ── */
.grid-wrapper {
    flex: 1;
    min-height: 0;
    padding: 8px;
    overflow: auto;
}

.metar-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 8px;
    height: 100%;
}

.metar-box {
    background: #080808;
    border: 1px solid #333;
    min-width: 0;
    min-height: 0;
    padding: 8px;
    overflow: auto;
}

/* ── Smaller screens ── */
@media (max-width: 768px) {
    .dashboard {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, minmax(180px, auto));
    }

    .metar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(4, minmax(100px, auto));
    }
}