:root {
    --sidebar-width-expanded: 240px;
    --sidebar-width-icons: 56px;
    --topbar-height: 48px;
    /* Interactive accent (slate) — kept deliberately COOL so it never competes with operational red
       (DEPLOYED vehicles, LOP EXPECTED). The red brand logo owns identity; slate owns interaction. */
    --ft-accent: #4a6fa5;
    --ft-accent-hover: #3d5d87;
    --ft-accent-weak: rgba(74, 111, 165, 0.12);
    --brand-color: var(--ft-accent);   /* alias — existing rules reference --brand-color */
    --ft-logo-red: #e0391d;            /* the brand flame red — identity only, NOT operational status */
    /* Body font — Inter (loaded in base.html) with a system fallback. */
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sidebar-bg: #f8f9fa;
    --sidebar-border: #dee2e6;
    --sidebar-hover: #e9ecef;
    --sidebar-active: #e2e6ea;
    --topbar-bg: #ffffff;
    --topbar-border: #dee2e6;
}

[data-bs-theme="dark"] {
    --sidebar-bg: #1a1d21;
    --sidebar-border: #2d3339;
    --sidebar-hover: #2d3339;
    --sidebar-active: #343a40;
    --topbar-bg: #1a1d21;
    --topbar-border: #2d3339;
}

/* ── Inline ("click-to-edit") values ─────────────────────
   A value you can click to edit in place (see _inline.html / ft-inline.js). A dotted underline
   on hover signals "editable"; the control that replaces it is a normal Bootstrap input/select. */
.ft-inline { cursor: text; border-radius: .2rem; }
.ft-inline:hover { box-shadow: inset 0 -1px 0 0 currentColor; opacity: .92; }
.ft-inline:focus-visible { outline: 2px solid var(--brand-color); outline-offset: 1px; }
.ft-inline.badge { cursor: pointer; }
.ft-inline.badge:hover { box-shadow: none; filter: brightness(1.08); }
.ft-inline-input { vertical-align: baseline; }

/* ── Top Bar ─────────────────────────────────────────── */

.ft-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height);
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 1050;
}

.ft-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
    letter-spacing: -0.02em;
    color: var(--bs-body-color);
}

.ft-brand:hover {
    opacity: 0.85;
}

/* Brand mark — red flame + white location pin (inline SVG); the wordmark adapts to the theme so it
   reads on both the light and dark top bar, while "Fire" + the flame stay the identity red. */
.ft-logo {
    flex: 0 0 auto;
    display: block;
}

.ft-logo-flame {
    fill: var(--ft-logo-red);
}

.ft-logo-word {
    line-height: 1;
}

.ft-logo-fire {
    color: var(--ft-logo-red);
}

.ft-logo-two {
    color: var(--ft-logo-red);
    margin-left: 0.18em;
}

/* Running-build chip beside the brand — a muted, monospace short-HEAD so it reads as metadata, not UI. */
.ft-build {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.68rem;
    line-height: 1;
    padding: 0.15rem 0.35rem;
    border-radius: 0.25rem;
    color: var(--bs-secondary-color, #888);
    background: var(--bs-secondary-bg, rgba(128, 128, 128, 0.12));
    border: 0.5px solid var(--bs-border-color, rgba(128, 128, 128, 0.25));
    cursor: default;
    align-self: center;
}

/* System status strip (top-bar centre) — feed health + state LOP pills. */
.ft-status-strip {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
}
.ft-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}
.ft-status-pill:hover { filter: brightness(1.05); text-decoration: none; }
.ft-status-ok { background: rgba(25, 135, 84, 0.13); color: #198754; }
.ft-status-bad { background: rgba(220, 53, 69, 0.15); color: #dc3545; }
.ft-lop-pill { background: var(--lop); color: var(--lop-fg); }
/* "Show State LOP" off (body.lop-hide-state, set globally from FTPrefs) hides the header State pill. */
body.lop-hide-state .ft-lop-pill-state { display: none; }
/* On narrow screens the strip would crowd the top bar — hide it (status still on its own pages). */
@media (max-width: 767.98px) { .ft-status-strip { display: none; } }

/* Active-incident focus chip — the "bouncing ball" pill in the top bar (label → detail, quick jumps
   to logistics/crewing, clear). Painted client-side from FTPrefs scope (ft-prefs.js). */
.ft-focus-chip { display: inline-flex; align-items: stretch; gap: 1px; margin-right: 0.6rem; }
.ft-focus-link, .ft-focus-jump, .ft-focus-clear {
    background: var(--ft-accent-weak);
    color: var(--ft-accent);
    border: 0;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    line-height: 1;
}
.ft-focus-link {
    gap: 0.3rem;
    font-weight: 600;
    padding: 0.22rem 0.55rem;
    border-radius: 999px 0 0 999px;
    max-width: 20rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ft-focus-jump { padding: 0.22rem 0.45rem; }
.ft-focus-clear { padding: 0.22rem 0.5rem; border-radius: 0 999px 999px 0; font-size: 0.9rem; }
.ft-focus-link:hover, .ft-focus-jump:hover, .ft-focus-clear:hover { filter: brightness(1.06); }
@media (max-width: 767.98px) { .ft-focus-jump { display: none; } }

.ft-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ft-hamburger,
.ft-icon-btn {
    background: none;
    border: none;
    padding: 0.25rem 0.4rem;
    font-size: 1.25rem;
    color: var(--bs-body-color);
    cursor: pointer;
    border-radius: 0.25rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.ft-hamburger:hover,
.ft-icon-btn:hover {
    background: var(--sidebar-hover);
}

.ft-clock {
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Settings popover off the topbar gear (preferences). */
.ft-settings-menu {
    min-width: 16rem;
}

/* ── Sidebar ─────────────────────────────────────────── */

.ft-sidebar {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width-expanded);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    overflow-x: hidden;
    overflow-y: auto;
    transition: width 0.2s ease;
    z-index: 1040;
    padding-top: 0.5rem;
}

.ft-nav-group {
    padding: 0.25rem 0;
}

.ft-nav-group + .ft-nav-group {
    border-top: 1px solid var(--sidebar-border);
    margin-top: 0.25rem;
    padding-top: 0.5rem;
}

.ft-nav-group-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color);
    padding: 0.25rem 1rem 0.25rem;
    white-space: nowrap;
    overflow: hidden;
}

.ft-nav-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 1rem;
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 0;
    position: relative;
}

.ft-nav-item:hover {
    background: var(--sidebar-hover);
    color: var(--bs-body-color);
    text-decoration: none;
}

.ft-nav-item.active {
    background: var(--sidebar-active);
    font-weight: 600;
    color: var(--brand-color);
}

.ft-nav-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 3px;
    background: var(--brand-color);
    border-radius: 0 2px 2px 0;
}

.ft-nav-item i {
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
}

.ft-nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;   /* grow so count badges + carets sit flush right */
    min-width: 0;
}

/* ── Sidebar: expandable parents + children ──────────── */

/* Caret sits at the right edge of a parent's row; clicking it toggles the children without
   following the parent link (handled in base.html). */
.ft-nav-caret {
    margin-left: auto;
    background: none;
    border: 0;
    color: inherit;
    opacity: 0.55;
    padding: 0.1rem 0.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 0.2rem;
}
.ft-nav-caret:hover {
    opacity: 1;
    background: var(--sidebar-hover);
}
.ft-nav-caret i {
    font-size: 0.8rem;
    width: auto;
    transition: transform 0.15s ease;
}
.ft-nav-parent.open > .ft-nav-item .ft-nav-caret i {
    transform: rotate(180deg);
}

.ft-nav-children {
    display: none;
    flex-direction: column;
    /* a connector rail under the parent icon visually ties the children to their parent */
    margin-left: 1.55rem;
    border-left: 1.5px solid var(--sidebar-border);
}
.ft-nav-parent.open > .ft-nav-children {
    display: flex;
}
.ft-nav-child {
    display: block;
    padding: 0.28rem 0.75rem 0.28rem 1rem;
    font-size: 0.76rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ft-nav-child:hover {
    background: var(--sidebar-hover);
    color: var(--bs-body-color);
    text-decoration: none;
}
.ft-nav-child.active {
    background: var(--sidebar-active);
    color: var(--brand-color);
    font-weight: 600;
}

/* Expand/collapse-all control at the top of the sidebar. */
.ft-nav-tools {
    padding: 0.15rem 0.5rem 0.25rem;
}
.ft-nav-toolbtn {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    background: none;
    border: 0;
    color: var(--bs-secondary-color);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}
.ft-nav-toolbtn:hover {
    background: var(--sidebar-hover);
    color: var(--bs-body-color);
}
.ft-nav-toolbtn i {
    font-size: 1rem;
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
}
body[data-sidebar="icons"] .ft-nav-toolbtn {
    justify-content: center;
    padding: 0.4rem 0;
}

/* ── Streamlined nav (body[data-nav="streamlined"]) — destinations only ──
   The decluttered sidebar: parents become flat destination links (their view-children move to the
   on-page tabs) and the expand/collapse-all tool is unnecessary. Classic mode keeps the nested
   children. Toggled in the settings popover (FTPrefs 'nav'); revert = flip the switch. */
body[data-nav="streamlined"] .ft-nav-children,
body[data-nav="streamlined"] .ft-nav-caret,
body[data-nav="streamlined"] .ft-nav-tools {
    display: none;
}

/* Sidebar live count badges (Global Layout spec) — a quiet pill at the right of a destination row.
   Empty (zero) badges collapse; hidden in icons-only mode to keep the rail clean. */
.ft-nav-count {
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.1rem 0.42rem;
    border-radius: 999px;
    background: var(--ft-accent-weak);
    color: var(--ft-accent);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.ft-nav-count:empty { display: none; }
body[data-sidebar="icons"] .ft-nav-count { display: none; }

/* Developer block: a flat group in CLASSIC; a collapsible "Developer" toggle in STREAMLINED so the
   dev tools don't wall the sidebar for everyday operators. (Tier-gated to DEVELOPER once auth lands.) */
.ft-nav-devtoggle {
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    font-size: 0.875rem;
    cursor: pointer;
    display: none;            /* classic: hidden — the group label + items show as-is */
}
.ft-dev-caret { font-size: 0.8rem; transition: transform 0.15s ease; }
body[data-nav="streamlined"] .ft-nav-group--dev .ft-nav-group-label { display: none; }
body[data-nav="streamlined"] .ft-nav-devtoggle { display: flex; }
body[data-nav="streamlined"] .ft-nav-devitems { display: none; }
body[data-nav="streamlined"] .ft-nav-group--dev.open .ft-nav-devitems { display: block; }
body[data-nav="streamlined"] .ft-nav-group--dev.open .ft-dev-caret { transform: rotate(180deg); }

/* ── Sidebar: Icons-only state ───────────────────────── */

body[data-sidebar="icons"] .ft-sidebar {
    width: var(--sidebar-width-icons);
}

body[data-sidebar="icons"] .ft-nav-label,
body[data-sidebar="icons"] .ft-nav-group-label,
body[data-sidebar="icons"] .ft-nav-caret,
body[data-sidebar="icons"] .ft-nav-children {
    display: none;
}

body[data-sidebar="icons"] .ft-nav-item {
    justify-content: center;
    padding: 0.6rem 0;
}

body[data-sidebar="icons"] .ft-nav-item[title]:hover::after {
    content: attr(title);
    position: absolute;
    left: calc(var(--sidebar-width-icons) + 4px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--sidebar-border);
    padding: 0.25rem 0.6rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 400;
    white-space: nowrap;
    z-index: 1060;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ── Sidebar: Hidden state ───────────────────────────── */

body[data-sidebar="hidden"] .ft-sidebar {
    width: 0;
    border-right: none;
    overflow: hidden;
}

/* ── Main Content ────────────────────────────────────── */

.ft-main {
    margin-top: var(--topbar-height);
    margin-left: var(--sidebar-width-expanded);
    transition: margin-left 0.2s ease;
    min-height: calc(100vh - var(--topbar-height));
}

/* Focus / fullscreen mode — drop the chrome (top bar + sidebar) so a situational-awareness page
   fills the screen for wall display. Toggled from the top bar; the floating exit button + Esc return
   to normal. Transient (not persisted) — you opt in each time. */
body.ft-focus .ft-topbar,
body.ft-focus .ft-sidebar {
    display: none;
}
body.ft-focus .ft-main {
    margin-top: 0;
    margin-left: 0;
    min-height: 100vh;
}
.ft-focus-exit {
    display: none;
}
body.ft-focus .ft-focus-exit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 1080;
    width: 36px;
    height: 36px;
    border: 0.5px solid var(--bs-border-color, #ced4da);
    border-radius: 0.375rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color);
    cursor: pointer;
    opacity: 0.65;
}
body.ft-focus .ft-focus-exit:hover {
    opacity: 1;
}

/* ── Shared page header (the _page_header.html macro) ── */
/* Standard family — normal document pages. */
.ft-page-head {
    margin-bottom: 1rem;
}
/* Compact family — dense board/wall pages (TV, Resources Board, Strike Teams Cards): a
   tighter strip that leaves more height for content. */
.ft-page-head--compact {
    margin-bottom: 0.6rem;
}
.ft-page-meta {
    line-height: 1.2;
}

/* Site-wide breadcrumb strip (the _page_header.html breadcrumbs macro) — thin and muted so it
   orients without competing with the page title below it. Sits above any view-tabs strip. */
.ft-breadcrumb {
    margin-bottom: 0.4rem;
}
.ft-breadcrumb .breadcrumb {
    font-size: 0.8rem;
    margin-bottom: 0;
    --bs-breadcrumb-divider-color: var(--bs-secondary-color);
}
.ft-breadcrumb .breadcrumb-item a {
    color: var(--bs-secondary-color);
    text-decoration: none;
}
.ft-breadcrumb .breadcrumb-item a:hover {
    color: var(--brand-color);
    text-decoration: underline;
}
.ft-breadcrumb .breadcrumb-item.active {
    color: var(--bs-body-color);
    font-weight: 600;
}
/* The leading Dashboard (home) crumb is an icon — keep it baseline-aligned with the text crumbs. */
.ft-breadcrumb .breadcrumb-item .bi {
    font-size: 0.95em;
    vertical-align: -1px;
}
/* In the full-height board/wall layouts keep the crumb a fixed, tight row like the tabs. */
.tv-page > .ft-breadcrumb,
.board-page > .ft-breadcrumb {
    flex: 0 0 auto;
    margin-bottom: 0.25rem;
}

/* Anchored view-tabs strip (the _page_header.html view_tabs macro) — sibling-view switcher kept
   at a constant position so it never jumps when the title below it changes size. */
.ft-viewtabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 0.7rem;
}
.ft-viewtab {
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    line-height: 1.4;
    text-decoration: none;
    color: var(--bs-secondary-color);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}
.ft-viewtab:hover {
    color: var(--bs-body-color);
}
.ft-viewtab.active {
    color: var(--brand-color);
    border-bottom-color: var(--brand-color);
    font-weight: 600;
}
/* In the full-height board/wall layouts the tabs are a fixed flex row; tighten the gap. */
.tv-page > .ft-viewtabs,
.board-page > .ft-viewtabs {
    flex: 0 0 auto;
    margin-bottom: 0.4rem;
}

/* Incident-status badge colours as classes (so the inline click-to-edit status control can
   render a properly coloured badge — its `css` is applied as a class, not an inline style).
   Mirrors INCIDENT_STATUS_DISPLAY in models.py. */
.badge.status-GOING      { background-color: #dc3545; color: #fff; }
.badge.status-CONTAINED  { background-color: #fd7e14; color: #000; }
.badge.status-CONTROLLED { background-color: #ffc107; color: #000; }
.badge.status-SAFE       { background-color: #198754; color: #fff; }
.badge.status-COMPLETE   { background-color: #198754; color: #fff; }
/* Inside the full-height flex board/wall layouts the column gap already spaces the header,
   so drop its own bottom margin to avoid a double gap. */
.tv-page > .ft-page-head,
.board-page > .ft-page-head {
    margin-bottom: 0;
}

body[data-sidebar="icons"] .ft-main {
    margin-left: var(--sidebar-width-icons);
}

body[data-sidebar="hidden"] .ft-main {
    margin-left: 0;
}

/* ── Mobile Backdrop ─────────────────────────────────── */

.ft-backdrop {
    display: none;
}

/* ── Responsive: Mobile / Tablet ─────────────────────── */

@media (max-width: 991.98px) {
    .ft-sidebar {
        width: 0;
        border-right: none;
        overflow: hidden;
    }

    body[data-sidebar="expanded"] .ft-sidebar {
        width: var(--sidebar-width-expanded);
        border-right: 1px solid var(--sidebar-border);
        box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
    }

    body[data-sidebar="icons"] .ft-sidebar {
        width: 0;
        border-right: none;
    }

    .ft-main {
        margin-left: 0 !important;
    }

    body[data-sidebar="expanded"] .ft-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 1035;
    }
}

/* ---- Per-viewer incident hide (ft-hidden.js) -------------------------------------------------
   The small per-item hide control + the dimmed "peek" state. The hide control is muted until you
   hover/focus its row so it doesn't compete with the operational content. */
.ft-hide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    padding: 0 .15rem;
    line-height: 1;
    opacity: .35;
    transition: opacity .12s ease, color .12s ease;
}
.ft-hide-btn:hover,
.ft-hide-btn:focus-visible {
    opacity: 1;
    color: var(--bs-body-color);
}
/* Reveal the control more readily when its row/card is hovered. */
tr:hover > td .ft-hide-btn,
.tv-card:hover .ft-hide-btn,
.inc-block:hover .ft-hide-btn { opacity: .7; }

/* Peek mode: hidden items return, dimmed, so you can review or un-hide them. */
.ft-hidden-dim { opacity: .4; filter: grayscale(.4); }
body.ft-peek .ft-hidden-dim { outline: 1px dashed var(--bs-warning, #ffc107); outline-offset: -1px; }

/* The top-bar reveal toggle reads as "armed" while peeking. */
#ft-hidden-toggle.active { color: var(--bs-warning, #ffc107); }