/* Resources operational board — functional, fit-to-page layout. The page fills the
   viewport below the topbar; the column grid reflows the filtered selection to fit
   (no horizontal scroll), and only the board area scrolls when a big selection
   overflows. Status colours carry the meaning; capability badges use CAD colours. */

/* ── Page shell ───────────────────────────────────────────────────────────── */
.board-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--topbar-height));
    padding: 0.45rem 0.6rem;
    gap: 0.4rem;
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
.board-toolbar {
    display: flex; flex-wrap: wrap; align-items: flex-end;
    gap: 0.3rem 0.55rem; flex: 0 0 auto;
}
.bt-field { display: flex; flex-direction: column; gap: 1px; }
.bt-field > label {
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.02em; color: var(--bs-secondary-color, #6c757d); margin: 0;
}
.bt-field .form-select, .bt-field .form-control { min-width: 8.5rem; }
.bt-search .form-control { min-width: 9.5rem; }
.bt-check { align-self: center; padding-bottom: 3px; }
.bt-check .form-check-label { font-size: 0.78rem; white-space: nowrap; }

/* ── Scroll area + column grid ────────────────────────────────────────────── */
/* The board grid is a FIXED dark "display panel" (FT1 look) — it does NOT follow the app's
   light/dark theme, so it stays high-contrast on a RICC TV regardless of the theme toggle.
   Only the chrome around it (topbar, sidebar, toolbar) themes. Palette lives here as vars. */
.board-scroll {
    --col-min: 208px;
    --col-max: 264px;           /* cap so a few active columns keep a normal width, not balloon */
    --bd-panel: #0e1521;        /* the dark canvas behind the columns */
    --bd-col: #19212e;          /* column background */
    --bd-col-head: #232e3f;     /* column header background */
    --bd-border: #2c374a;       /* column / divider borders */
    --bd-text: #e7ebf0;         /* primary text on the dark panel */
    --bd-text-dim: #95a1b3;     /* secondary / muted text */
    --inc-amber: #d9881f;       /* incident block accent (FT1 amber) */
    --st-blue: #2f7fe0;         /* strike-team block accent (blue) */
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    background: var(--bd-panel);
    border-radius: 8px;
    padding: 6px;
}
.board-scroll.board-compact { --col-min: 156px; --col-max: 200px; }

.board-summary {
    font-size: 0.68rem; color: var(--bd-text-dim);
    padding: 1px 2px 4px;
}
.board-cols {
    display: grid;
    /* auto-FILL (not auto-fit) + a fixed max (not 1fr): tracks keep a uniform ~normal width and
       DON'T stretch to fill when only a few groups are active — the "stupidly wide" case. Empty
       tracks are held (invisible), so 3 active columns render at the same width as 66, left-
       aligned, with whitespace to the right rather than ballooning across the page. */
    grid-template-columns: repeat(auto-fill, minmax(var(--col-min), var(--col-max)));
    gap: 8px; align-items: start;
}
.board-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; color: var(--bs-secondary-color, #6c757d);
    padding: 3rem 1rem; font-size: 0.9rem;
}

.board-col {
    background: var(--bd-col);
    border: 1px solid var(--bd-border);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    color: var(--bd-text);
}

.board-col-header {
    padding: 6px 8px;
    border-bottom: 1px solid var(--bd-border);
    position: sticky;
    top: 0;
    background: var(--bd-col-head);
    border-radius: 6px 6px 0 0;
    z-index: 2;
}
.bch-name { font-weight: 700; font-size: 0.78rem; text-transform: uppercase; line-height: 1.1; color: var(--bd-text); }
.bch-total {
    font-size: 0.72rem; font-weight: 700; background: #495057; color: #fff;
    border-radius: 10px; padding: 0 7px; min-width: 22px; text-align: center;
}
.bch-head-right { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.bch-clear {
    font-size: 0.58rem; font-weight: 700; background: transparent; color: var(--bd-text-dim);
    border: 1px solid var(--bd-border); border-radius: 3px; padding: 0 5px; cursor: pointer;
}
.bch-clear:hover { background: #c92a2a; color: #fff; border-color: #c92a2a; }

.bch-counts { display: flex; gap: 3px; margin-top: 4px; flex-wrap: wrap; align-items: center; }
.bch-region {
    font-size: 0.58rem; font-weight: 700; background: rgba(255, 255, 255, 0.06); color: var(--bd-text-dim);
    border: 1px solid var(--bd-border);
    border-radius: 3px; padding: 0 5px; text-transform: uppercase; letter-spacing: 0.02em;
}
.cnt { font-size: 0.66rem; font-weight: 700; border-radius: 10px; padding: 0 6px; min-width: 20px; text-align: center; }
.cnt-committed { background: #c92a2a; color: #fff; }
.cnt-available { background: #2f9e44; color: #fff; }
.cnt-defaulted { background: #868e96; color: #fff; }
.cnt-offline   { background: #343a40; color: #ced4da; }

.bch-depletion { display: flex; gap: 3px; margin-top: 4px; flex-wrap: wrap; }
.dep { font-size: 0.62rem; font-weight: 700; border-radius: 3px; padding: 0 4px; }
.dep-tanker { background: #2f9e44; color: #fff; }
.dep-rescue { background: #FFFF00; color: #000; }
.dep-hazmat { background: #00FFFF; color: #000; }
.dep-bwc    { background: #808080; color: #fff; }
.dep-cafs   { background: #FFFFFF; color: #000; border: 1px solid #adb5bd; }
.dep-ba     { background: #FFA500; color: #000; }

.board-col-body { padding: 4px; }

/* incident block — the amber header + all its committed trucks read as ONE encompassed unit
   (FT1 style). The frame/tint groups them; each truck keeps its own status colour inside. */
.inc-block {
    border: 1.5px solid var(--inc-amber);
    border-radius: 5px;
    background: rgba(217, 136, 31, 0.10);
    margin: 5px 0;
    padding-bottom: 2px;
}
.inc-header {
    display: flex; justify-content: space-between; align-items: center; gap: 4px;
    background: var(--inc-amber); color: #1a1205; font-size: 0.66rem; font-weight: 800;
    padding: 2px 6px; border-radius: 3.5px 3.5px 0 0; text-transform: uppercase;
}
.inc-header .inc-ht { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inc-header .inc-din { font-weight: 700; opacity: 0.85; font-family: monospace; flex: 0 0 auto; }
/* trucks inside a block: small horizontal inset so the amber frame shows around the group */
.inc-block .veh-row { margin: 2px 3px 0; }

/* strike-team block — same frame as an incident block, but blue (NAME · #NUMBER · tasking) */
.st-block {
    border: 1.5px solid var(--st-blue);
    border-radius: 5px;
    background: rgba(47, 127, 224, 0.10);
    margin: 5px 0;
    padding-bottom: 2px;
}
.st-header {
    display: flex; justify-content: space-between; align-items: center; gap: 4px;
    background: var(--st-blue); color: #07101e; font-size: 0.66rem; font-weight: 800;
    padding: 2px 6px; border-radius: 3.5px 3.5px 0 0; text-transform: uppercase;
}
.st-header .st-name { color: #07101e; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-header .st-name:hover { text-decoration: underline; }
.st-header .st-num { font-family: monospace; }
.st-header .st-task { font-weight: 700; opacity: 0.9; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.st-header .st-task a { color: #07101e; text-decoration: none; }
.st-header .st-task a:hover { text-decoration: underline; }
.st-block .veh-row { margin: 2px 3px 0; }
.board-compact .st-header { font-size: 0.6rem; padding: 1px 5px; }

/* vehicle rows — background = status */
.veh-row {
    display: flex; justify-content: space-between; align-items: center; gap: 4px;
    padding: 3px 6px; border-radius: 3px; margin-bottom: 2px;
    font-size: 0.76rem; line-height: 1.2; cursor: pointer;
}
.veh-row:hover { filter: brightness(1.08); }
.veh-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.veh-side { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.veh-meta { font-size: 0.68rem; white-space: nowrap; opacity: 0.95; }
.veh-cog {
    background: none; border: 0; color: inherit; opacity: 0.55; cursor: pointer;
    padding: 0 1px; font-size: 0.8rem; line-height: 1;
}
.veh-cog:hover { opacity: 1; }

.st-AVAILABLE { background: #2f9e44; color: #fff; }
.st-ACTIVE    { background: #0a3622; color: #fff; }
.st-PAGED     { background: #fa5252; color: #fff; }
.st-DEPLOYED  { background: #c92a2a; color: #fff; }
.st-DEFAULTED { background: #868e96; color: #fff; }
.st-OFFLINE   { background: #495057; color: #adb5bd; }

/* SES unit block — same frame as an incident block, lit amber when the unit is activated. SES has no
   per-appliance status, so an idle unit's appliances are green and an activated unit's amber
   (.ses-active); an operator-set status on an appliance keeps its own .st-* colour. */
.unit-block { border: 1.5px solid #3a4658; border-radius: 5px; padding: 2px; margin-bottom: 4px; }
.unit-block.unit-active { border-color: var(--inc-amber); }
.unit-header {
    display: flex; justify-content: space-between; align-items: center; gap: 4px;
    padding: 2px 5px 3px; font-size: 0.66rem; font-weight: 700;
}
.unit-header .unit-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #8b97ab; }
.unit-block.unit-active .unit-name { color: var(--inc-amber); }
.unit-header .unit-act { color: var(--inc-amber); flex: 0 0 auto; white-space: nowrap; }
.unit-block .veh-row { margin: 2px 3px 0; }
.ses-active { background: #c47d18; color: #fff; }
.board-compact .unit-header { font-size: 0.6rem; padding: 1px 5px; }

/* capability badges — official CAD colours, fixed per type */
.cap { font-size: 0.58rem; font-weight: 800; padding: 0 3px; border-radius: 2px; margin-left: 2px; }
.cap-R  { background: #FFFF00; color: #000; }
.cap-H  { background: #00FFFF; color: #000; }
.cap-RH { background: #FF00FF; color: #fff; }
.cap-BW { background: #808080; color: #fff; }
.cap-C  { background: #FFFFFF; color: #000; border: 1px solid #999; }
.cap-BA { background: #FFA500; color: #000; }

/* ── Display toggles (toolbar; classes toggled on #board, persisted via FTPrefs) ──────── */
/* Callsign ↔ CAD code — both render; default shows the callsign, `.show-cad` flips to CAD. */
.vn-cad { display: none; }
.board-scroll.show-cad .vn-call { display: none; }
.board-scroll.show-cad .vn-cad { display: inline; }
/* Specialist capability badges on/off. */
.board-scroll.hide-specialists .cap { display: none; }

/* ── Status-change flash — a slow yellow pulse around a row for 30s after its status changes.
   Driven by JS (board.html): the row gets `.veh-flash` while within the 30s window and the
   pulse phase is kept continuous across the board's frequent re-renders via animation-delay. */
@keyframes vehFlash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 213, 0, 0); }
    50%      { box-shadow: 0 0 6px 2px rgba(255, 213, 0, 0.9); }
}
.veh-row.veh-flash { animation: vehFlash 1.8s ease-in-out infinite; }

/* ── Compact density — tighter cards & headers, more columns per row ──────── */
.board-compact .board-cols { gap: 6px; }
.board-compact .veh-row { font-size: 0.69rem; padding: 1px 5px; }
.board-compact .veh-meta { font-size: 0.62rem; }
.board-compact .board-col-header { padding: 4px 6px; }
.board-compact .bch-name { font-size: 0.72rem; }
.board-compact .inc-header { font-size: 0.6rem; padding: 1px 5px; }
.board-compact .cap { font-size: 0.54rem; }