/* ═══════════════════════════════════════════════════════════════
   Tactical Board v3 — FMS/Control Tower edition
   flyExclusive Intelligence Platform

   LOADED ALONGSIDE tactical-board-v2.css, NOT INSTEAD OF IT.
   The v3 container carries both `bi-content` and `tbv3-content`, so it inherits
   every --tb-* design token and all the shared `.tb-*` component styling from v2
   for free — which is precisely how the left-hand fleet grid stays pixel-identical
   between the two boards.

   Everything below is either (a) scoped to .tbv3-content so it cannot reach v2, or
   (b) a genuinely new .tbv3-* component.

   An earlier version of this header said "no v2 selector is redefined". That is no longer
   true and the weaker guarantee is the real one: a shared .tb-* selector MAY be overridden
   here — the grid legend's wrapping is — but ONLY under .tbv3-content, and v2's stylesheet
   is never edited. Nothing in this file can change how the v2 board renders.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Layout ──
   Whitespace was a wide revenue table and needed 650px. Fleet Summary / Key Alerts /
   Legend are narrow, so v3 reclaims ~310px of horizontal space for the aircraft grid. */

.bi-mode .tbv3-content {
    grid-template-columns: 1fr 340px;
}

.bi-mode .tbv3-content.right-collapsed {
    grid-template-columns: 1fr 0;
}

.bi-mode .tbv3-content .tbv3-right-column {
    padding: var(--tb-sp-4a) var(--tb-sp-5) var(--tb-sp-4a) 0;
    gap: var(--tb-sp-3);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--tb-elevated) transparent;
}

.bi-mode .tbv3-content.right-collapsed .tbv3-right-column {
    padding: 0;
    overflow: hidden;
}

.tbv3-right-column::-webkit-scrollbar {
    width: 5px;
}

.tbv3-right-column::-webkit-scrollbar-track {
    background: transparent;
}

.tbv3-right-column::-webkit-scrollbar-thumb {
    background: var(--tb-elevated);
    border-radius: 3px;
}

/* Bottom row now carries five panels (Low Hour · Crew · ERTS · ISO · Managed).
   ISO is a compact chip strip and Managed is a small tile pair, so they get
   narrower tracks than the three tables. */
.bi-mode .tbv3-content .tbv3-bottom-content {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 0.6fr 0.9fr;
    gap: var(--tb-sp-3);
    min-height: 0;
}

.bi-mode .tbv3-content .tbv3-bottom-content > .bi-panel {
    min-height: 0;
    overflow: auto;
}

@media (max-width: 1500px) {
    .bi-mode .tbv3-content .tbv3-bottom-content {
        grid-template-columns: 1fr 1fr 1fr;
    }

    /* ISO + Managed wrap onto a second line rather than being crushed. */
    .bi-mode .tbv3-content .tbv3-bottom-content > .bi-panel:nth-child(4) {
        grid-column: span 1;
    }
}

@media (max-width: 1200px) {
    .bi-mode .tbv3-content {
        grid-template-columns: 1fr 300px;
    }
}

/* ── 2. Grid legend additions ──
   v3 folds the old standalone "STATUS BAR" strip counters into the same row. */

.tbv3-content .tb-grid-legend-divider {
    width: 1px;
    height: 12px;
    background: var(--tb-border-hover);
    margin: 0 var(--tb-sp-2);
    flex: 0 0 auto;
}

.tbv3-content .tb-grid-legend-stat {
    font-size: var(--tb-font-2xs);
    color: var(--tb-text-3);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.tbv3-content .tb-grid-legend-stat-label {
    color: var(--tb-text-4);
    text-transform: uppercase;
}

/* THE LEGEND ROW WRAPS IN v3, AND ONLY IN v3.
   `.tb-grid-legend` lives in tactical-board-v2.css as a nowrap flex row and must stay exactly as
   it is, so this is an override scoped to .tbv3-content rather than an edit over there.

   WHY v3 NEEDS IT AND v2 DOES NOT: v2's trailing element is a fixed-width hint ("Left = Crew |
   Right = MX"). v3's is a freshness chip that GROWS WITH THE FAILURE. Healthy it is
   "DATA AS OF 16:04:11 ET"; fully degraded it is "DATA AS OF 16:04:11 ET (14m OLD) · POSITIONS TO
   99D · CREW FEED QUIET 14D" — roughly 470px — on top of four stat spans, three swatch items and
   the "STATUS BAR" label.

   AND THE WORST CASE IS THE LIKELY CASE. One ControlTower outage stales the position feed and the
   crew-movement feed together, so all three freshness segments appear at the same time — precisely
   when the row most needs to be legible. In a nowrap row that state does not degrade gracefully:
   .tb-grid-legend-stat is white-space: nowrap and a flex item cannot shrink below min-content, so
   the stats push past the container edge while the swatch items (whose text CAN wrap) collapse
   into ragged two-line labels beside them.

   THE HEALTHY CASE IS UNTOUCHED, deliberately. Only row-gap is added; column-gap stays at v2's
   --tb-sp-4 via the inherited `gap`, and a row whose items all fit has no second line for the
   row-gap to apply to. Nothing moves until something is already wrong. */
.tbv3-content .tb-grid-legend {
    flex-wrap: wrap;
    row-gap: var(--tb-sp-1);
}

/* BREAK BETWEEN PHRASES, NEVER INSIDE ONE. Wrapping alone would let "· crew feed quiet 14d" split
   after "quiet" and orphan the magnitude — the one part of that segment that carries the message.
   Each freshness segment is its own <span> inside the chip (renderDataFreshness), so nowrap on the
   chip's element children moves whole segments to the next line and leaves the leading "Data as of
   …" text free to wrap normally if it ever has to. The swatch items get the same treatment for the
   same reason: "Crew Scheduled / In Transit" folding in half is the compression this rule exists to
   remove, not an acceptable wrap. */
.tbv3-content .tb-grid-legend-item,
.tbv3-content .tb-grid-legend-label > span {
    white-space: nowrap;
}

@media (max-width: 768px) {
    /* v2 already gives its trailing legend element a full-width line down here, but it selects
       `.tb-grid-legend-item[style*="margin-left:auto"]` — and v3's trailing element is a
       `.tb-grid-legend-label` (the freshness chip carries the label class, not the item class), so
       that rule has never matched anything on this board. The chip has been sharing the last line
       with whatever happened to fit beside it. Same treatment, v3's selector, v3's scope. */
    .tbv3-content .tb-grid-legend-label[style*="margin-left:auto"] {
        margin-left: 0 !important;
        width: 100%;
        text-align: right;
    }
}

/* ── 2b. Aircraft card: the crew-unavailability reason chip ──

   The card is 70px wide and every corner is already claimed: top-left MEL, top-right the MX type
   badge, bottom-centre non-rev, bottom-right the MX countdown. Bottom-LEFT is the crew slot, held
   by .tb-ac-crew-inbound — and a tail can be crew-unavailable AND have crew inbound, so the two
   chips share that slot instead of one hiding the other. .tbv3-ac-crew-flags is the shared anchor;
   the inbound chip is reset to static flow INSIDE it.

   That reset is an override of a shared .tb-* selector, which this file's header permits on exactly
   these terms: it is scoped under .tbv3-content, so v2's board cannot see it and
   tactical-board-v2.css is not edited. */

.bi-mode .tbv3-content .tbv3-ac-crew-flags {
    position: absolute;
    bottom: 4px;
    left: 2px;
    display: flex;
    align-items: center;
    gap: 2px;
    /* Decoration only — the card itself is the interactive element and carries the aria-label. */
    pointer-events: none;
}

.bi-mode .tbv3-content .tbv3-ac-crew-flags .tb-ac-crew-inbound {
    position: static;
    bottom: auto;
    left: auto;
}

.bi-mode .tbv3-content .tbv3-ac-crew-reason {
    font-size: var(--tb-font-2xs);
    font-weight: 700;
    background: var(--tb-red);
    color: #fff;
    padding: 0 2px;
    border-radius: 3px;
    line-height: 1.4;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* ── 3. Right-column density ──
   Three stacked panels have to share one column. At 1600x950 the natural heights came to
   822px in a 686px column (179px of overflow), which buried the Legend below the fold. The
   column still scrolls as a safety valve, but the default should FIT — so panel chrome and
   row padding are tightened here rather than letting the legend fall off the bottom. */

.tbv3-right-column .bi-panel {
    padding: var(--tb-sp-3) var(--tb-sp-4);
}

.tbv3-right-column .bi-panel h3 {
    margin-bottom: var(--tb-sp-2);
    padding-bottom: var(--tb-sp-1);
}

.tbv3-right-column .tb-table th,
.tbv3-right-column .tb-table td {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* ── 4. Fleet Summary by Aircraft Type ── */

.tbv3-fs-key {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tb-sp-3);
    margin: 0 0 var(--tb-sp-2);
}

.tbv3-fs-key-item {
    display: inline-flex;
    align-items: center;
    gap: var(--tb-sp-1);
    font-size: var(--tb-font-2xs);
    color: var(--tb-text-4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tbv3-fs-swatch {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    display: inline-block;
}

.tbv3-fs-table {
    width: 100%;
    table-layout: fixed;
}

.tbv3-fs-table th:first-child,
.tbv3-fs-table td:first-child {
    width: 74px;
}

.tbv3-fs-table th:last-child,
.tbv3-fs-table td:last-child {
    width: 46px;
    text-align: right;
}

.tbv3-fs-type {
    font-size: var(--tb-font-sm);
    font-weight: 600;
    color: var(--tb-text-2);
    white-space: nowrap;
}

.tbv3-fs-barcell {
    display: flex;
    align-items: center;
    gap: var(--tb-sp-2);
}

.tbv3-fs-pct {
    font-size: var(--tb-font-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 30px;
    text-align: right;
    flex: 0 0 auto;
}

.tbv3-fs-pct--good { color: var(--tb-green); }
.tbv3-fs-pct--warn { color: var(--tb-amber); }
.tbv3-fs-pct--crit { color: var(--tb-red); }

.tbv3-fs-bar {
    display: flex;
    flex: 1 1 auto;
    height: 7px;
    min-width: 40px;
    border-radius: var(--tb-r-xs);
    overflow: hidden;
    background: var(--tb-elevated);
    gap: 1px;
}

.tbv3-fs-seg {
    display: block;
    height: 100%;
    min-width: 2px;
}

.tbv3-fs-seg--avail { background: var(--tb-green); }
.tbv3-fs-seg--crew  { background: var(--tb-amber); }
.tbv3-fs-seg--mx    { background: var(--tb-red); }
.tbv3-fs-seg--other { background: var(--tb-muted); }

.tbv3-fs-count {
    font-size: var(--tb-font-sm);
    font-variant-numeric: tabular-nums;
    color: var(--tb-text-3);
}

.tbv3-fs-total td {
    border-top: 1px solid var(--tb-border-hover);
    padding-top: var(--tb-sp-2);
    font-weight: 700;
    font-size: var(--tb-font-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tb-text-2);
}

/* ── 5. Key Alerts ── */

.tbv3-alert-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tbv3-alert {
    display: grid;
    grid-template-columns: 14px 24px 1fr;
    align-items: center;
    gap: var(--tb-sp-2);
    padding: 3px var(--tb-sp-2);
    border-radius: var(--tb-r-sm);
    border-left: 2px solid transparent;
    background: transparent;
    transition: background var(--tb-transition);
}

.tbv3-alert-icon {
    font-size: var(--tb-font-xs);
    line-height: 1;
    text-align: center;
}

.tbv3-alert-count {
    font-size: var(--tb-font-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.tbv3-alert-label {
    font-size: var(--tb-font-sm);
    color: var(--tb-text-2);
    line-height: 1.25;
}

.tbv3-alert--critical {
    background: var(--tb-red-bg);
    border-left-color: var(--tb-red);
}
.tbv3-alert--critical .tbv3-alert-icon,
.tbv3-alert--critical .tbv3-alert-count { color: var(--tb-red); }

.tbv3-alert--warning {
    background: var(--tb-amber-bg);
    border-left-color: var(--tb-amber);
}
.tbv3-alert--warning .tbv3-alert-icon,
.tbv3-alert--warning .tbv3-alert-count { color: var(--tb-amber); }

.tbv3-alert--info {
    background: var(--tb-blue-bg);
    border-left-color: var(--tb-blue);
}
.tbv3-alert--info .tbv3-alert-icon,
.tbv3-alert--info .tbv3-alert-count { color: var(--tb-blue); }

/* A zero count is information, not an alarm — mute it rather than hide it, so the
   row order stays stable between refreshes and the eye can trust its position. */
.tbv3-alert--zero {
    background: transparent;
    border-left-color: var(--tb-border-hover);
}
.tbv3-alert--zero .tbv3-alert-icon,
.tbv3-alert--zero .tbv3-alert-count { color: var(--tb-muted); }
.tbv3-alert--zero .tbv3-alert-label { color: var(--tb-text-4); }

/* ── 6. Inline Legend ── */

.tbv3-legend-group {
    margin-bottom: var(--tb-sp-2);
}

.tbv3-legend-group:last-of-type {
    margin-bottom: var(--tb-sp-1);
}

.tbv3-legend-title {
    font-size: var(--tb-font-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tb-text-4);
    margin-bottom: var(--tb-sp-1);
}

.tbv3-legend-hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
    opacity: 0.8;
}

.tbv3-legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--tb-sp-3);
}

.tbv3-legend-foot + * { margin-top: 0; }

.tbv3-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--tb-sp-1);
    font-size: var(--tb-font-2xs);
    color: var(--tb-text-3);
    white-space: nowrap;
}

.tbv3-legend-swatch {
    width: 14px;
    height: 4px;
    border-radius: 2px;
    display: inline-block;
    flex: 0 0 auto;
}

.tbv3-legend-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 11px;
    padding: 0 3px;
    border-radius: 2px;
    font-size: 7px;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 0.02em;
    background: var(--tb-muted);
    color: #fff;
    flex: 0 0 auto;
}

.tbv3-legend-badge--transit { background: var(--tb-blue); }
.tbv3-legend-badge--aog     { background: var(--tb-red); }
.tbv3-legend-badge--sme     { background: var(--tb-amber); color: #1a1a1a; }
.tbv3-legend-badge--sch     { background: var(--tb-blue); }
.tbv3-legend-badge--pmx     { background: #2dd4bf; color: #08231f; }
.tbv3-legend-badge--other   { background: var(--tb-muted); }
.tbv3-legend-badge--mel     { background: var(--tb-amber); color: #1a1a1a; }
.tbv3-legend-badge--due     { background: var(--tb-amber); color: #1a1a1a; }
.tbv3-legend-badge--overdue { background: var(--tb-red); }
.tbv3-legend-badge--nr      { background: var(--tb-purple); }
.tbv3-legend-badge--ferry   { background: var(--tb-purple); }
.tbv3-legend-badge--eval    { background: var(--tb-cyan); color: #04252b; }

/* Crew-unavailability reason. RED, matching the card's crew bar in exactly the state that
   produces this chip: crewStatusColor returns --tb-red for an unavailable tail with nobody
   inbound. Reading as the same colour as the bar it explains is the point. */
.tbv3-legend-badge--crew-reason { background: var(--tb-red); }

.tbv3-legend-foot {
    font-size: var(--tb-font-2xs);
    color: var(--tb-text-4);
    font-style: italic;
    padding-top: var(--tb-sp-1);
    border-top: 1px solid var(--tb-border);
}

/* The legend is reference material, not live data — let it shrink last. */
.tbv3-legend-panel {
    flex: 0 0 auto;
}

.tbv3-fleet-summary-panel,
.tbv3-key-alerts-panel {
    flex: 0 0 auto;
}

/* ── 7. SME popup (v3-owned copy) ── */

.tbv3-sme-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    width: min(760px, 92vw);
    max-height: 80vh;
    overflow: auto;
    background: var(--tb-surface-solid, #111827);
    border: 1px solid var(--tb-border, rgba(148, 163, 184, 0.1));
    border-radius: var(--tb-r, 10px);
    box-shadow: var(--tb-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.3));
    padding: var(--tb-sp-4, 12px);
}

.tbv3-sme-popup.hidden {
    display: none;
}

.tbv3-sme-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--tb-sp-3, 8px);
}

.tbv3-sme-header h3 {
    margin: 0;
    border: none;
    padding: 0;
}

.tbv3-sme-close {
    background: none;
    border: none;
    color: var(--tb-text-3, #94a3b8);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--tb-sp-1, 4px);
}

.tbv3-sme-close:hover {
    color: var(--tb-text, #f1f5f9);
}