/* Operations Map — a full-bleed map filling the content area (below the top bar; the whole screen
   in focus / wall mode). The Maps provider draws its own surface, so we only size the container. */
.ops-map {
    width: 100%;
    height: calc(100vh - var(--topbar-height));
}
body.ft-focus .ops-map {
    height: 100vh;
}

.ops-map-nokey {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - var(--topbar-height));
    padding: 2rem;
}

/* Info window — Google draws the bubble; we style the inner block to match the app. */
.ops-info {
    font-size: 0.85rem;
    line-height: 1.35;
    min-width: 9rem;
}
.ops-info strong {
    font-size: 0.92rem;
}
.ops-info a {
    display: inline-block;
    margin-top: 0.35rem;
}
/* Dark mode: Google draws the info-window bubble WHITE, so our inherited light text was unreadable on it.
   Theme the bubble dark + keep the text light. */
[data-bs-theme="dark"] .ops-info { color: #e9ecef; }
[data-bs-theme="dark"] .ops-info .text-muted { color: #adb5bd !important; }
[data-bs-theme="dark"] .gm-style .gm-style-iw,
[data-bs-theme="dark"] .gm-style .gm-style-iw-c,
[data-bs-theme="dark"] .gm-style .gm-style-iw-d { background-color: #2b2b2b !important; }
[data-bs-theme="dark"] .gm-style .gm-style-iw-tc::after { background: #2b2b2b !important; }
[data-bs-theme="dark"] .gm-style .gm-ui-hover-effect > span { background-color: #ced4da !important; }

/* ── Mode toolbar (a native map control, top-left) ───────────────────────── */
.ops-toolbar {
    display: flex;
    flex-wrap: wrap;                              /* grouped buttons wrap to more rows when busy */
    align-items: center;
    gap: 3px;
    margin: 10px;
    max-width: calc(100vw - 420px);              /* keep clear of the right-hand search box */
    overflow: visible;                            /* let the filter pop-boxes escape the bar */
}
.ops-mode-btn {
    border: none;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
}
.ops-mode-btn.active { background: #1565c0; color: #fff; }
.ops-mode-btn.open { box-shadow: 0 0 0 2px #1565c0; }
[data-bs-theme="dark"] .ops-mode-btn { background: #2a2a2a; color: #ddd; }
[data-bs-theme="dark"] .ops-mode-btn.active { background: #1565c0; color: #fff; }
/* Category labels + a separator between the Incidents / Stations / Vehicles groups. */
.ops-tgroup {
    font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: #1565c0; padding: 0 3px 0 7px; align-self: center;
}
.ops-tgroup:first-child { padding-left: 0; }
[data-bs-theme="dark"] .ops-tgroup { color: #6db3f2; }
.ops-tsep { width: 1px; align-self: stretch; min-height: 18px; background: rgba(0,0,0,.18); margin: 0 3px; }
[data-bs-theme="dark"] .ops-tsep { background: rgba(255,255,255,.18); }
/* A filter button + its drop-down chip box. */
.ops-fbtn-wrap { position: relative; display: inline-flex; }
.ops-fbtn.has-filter { background: #e7f0fb; }
[data-bs-theme="dark"] .ops-fbtn.has-filter { background: #1b3a5c; color: #cfe2ff; }
.ops-fbtn-badge {
    background: #1565c0; color: #fff; border-radius: 999px;
    padding: 0 5px; font-size: 9px; font-weight: 700; margin-left: 3px;
}
.ops-fpop {
    position: absolute; top: 100%; left: 0; z-index: 1300;
    margin: 4px 0 0 !important; min-width: 175px; max-height: 72vh; overflow: auto;
}
.ops-incident-cluster { background: #c62828; color: #fff; }   /* clustered incidents (vs station clusters) */
/* Half-step (±0.5) zoom control — replaces Google's integer +/- on the main map + each PIP inset. */
.ops-zoom { display: flex; flex-direction: column; margin: 0 10px 26px; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.ops-zoom-btn { border: none; background: #fff; width: 32px; height: 32px; font-size: 19px; line-height: 1; color: #333; cursor: pointer; }
.ops-zoom-btn:hover { background: #f1f3f5; }
.ops-zoom-btn:first-child { border-bottom: 1px solid rgba(0,0,0,.12); }
[data-bs-theme="dark"] .ops-zoom-btn { background: #2a2a2a; color: #ddd; }
[data-bs-theme="dark"] .ops-zoom-btn:hover { background: #343a40; }
[data-bs-theme="dark"] .ops-zoom-btn:first-child { border-bottom-color: rgba(255,255,255,.12); }

/* Vehicle search box (top-centre control). */
.ops-search {
    display: flex;
    margin: 10px;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.ops-search-inp {
    border: none; outline: none; background: transparent; color: #222;
    padding: 6px 10px; font-size: 12px; width: 150px;
}
.ops-search-btn { border: none; background: #1565c0; color: #fff; padding: 0 12px; cursor: pointer; font-size: 12px; }
.ops-search.notfound { box-shadow: 0 0 0 2px #d32f2f; }
[data-bs-theme="dark"] .ops-search { background: #2a2a2a; }
[data-bs-theme="dark"] .ops-search-inp { color: #eee; }

.ops-inc-toggles { display: inline-flex; gap: 4px; }   /* the Incidents group's ON/OFF + CARDS/PINS pills */

/* ── Filter panel (class / capability / status chips) ─────────────────────── */
.ops-filter-panel {
    margin: 0 10px 10px;
    padding: 8px 10px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    max-width: 280px;
}
.ops-fgroup { margin-bottom: 7px; }
/* Filter-panel section header — groups the filters by target (Stations / Vehicles / Incidents).
   A solid full-bleed bar so the three groups are unmistakable. */
.ops-fsection {
    margin: 10px -10px 5px;            /* full-bleed across the panel's 10px padding */
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #fff;
    background: #1565c0;
}
.ops-fsection:first-of-type { margin-top: 2px; }
[data-bs-theme="dark"] .ops-fsection { background: #1b3a5c; color: #cfe2ff; }
.ops-flabel {
    display: block;
    font-weight: 700;
    color: #888;
    font-size: 9px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.ops-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ops-chip {
    border: 1px solid #ccc;
    background: #f4f4f4;
    color: #333;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.ops-chip:hover { border-color: #1565c0; }
.ops-chip.active { background: #1565c0; color: #fff; border-color: #1565c0; }
/* Type filter is EXCLUDE-semantics — an active chip is a HIDDEN type, so show it struck-through/muted
   (red) rather than the blue "selected" of the include-filters, to read correctly. */
.ops-fgroup[data-group="incTypesHidden"] .ops-chip.active {
    background: #b02a37; border-color: #b02a37; color: #fff; text-decoration: line-through;
}
.ops-filter-clear {
    border: none;
    background: none;
    color: #1565c0;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 0;
    margin-top: 2px;
}
/* Capability Any/All toggle (sits in the Capability group header). */
.ops-fhead { display: flex; align-items: center; justify-content: space-between; }
.ops-cap-mode {
    border: 1px solid #ccc; background: #f4f4f4; color: #666;
    border-radius: 999px; padding: 0 7px; font-size: 9px; font-weight: 700;
    letter-spacing: 0.04em; cursor: pointer; line-height: 1.6;
}
.ops-cap-mode.on { background: #1565c0; color: #fff; border-color: #1565c0; }
[data-bs-theme="dark"] .ops-cap-mode { background: #3a3a3a; color: #bbb; border-color: #555; }
/* Non-matching: Hide / Dim segmented toggle. */
.ops-dim-seg { display: inline-flex; border: 1px solid #ccc; border-radius: 6px; overflow: hidden; }
.ops-dim-btn {
    border: none; background: #f4f4f4; color: #555;
    padding: 2px 10px; font-size: 10px; font-weight: 600; cursor: pointer;
}
.ops-dim-btn + .ops-dim-btn { border-left: 1px solid #ccc; }
.ops-dim-btn.active { background: #1565c0; color: #fff; }
[data-bs-theme="dark"] .ops-dim-seg { border-color: #555; }
[data-bs-theme="dark"] .ops-dim-btn { background: #3a3a3a; color: #ccc; }
[data-bs-theme="dark"] .ops-dim-btn + .ops-dim-btn { border-left-color: #555; }
/* Layers panel — overlay toggles (aircraft / logistics / weather / …). */
.ops-layers-panel { max-width: 220px; }
.ops-layer-row {
    display: flex; align-items: center; gap: 7px;
    padding: 3px 2px; font-size: 11px; font-weight: 600; color: #333; cursor: pointer;
}
.ops-layer-row.disabled { color: #aaa; cursor: not-allowed; }
.ops-layer-hint {
    margin-left: auto; font-size: 8px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: #aaa; border: 1px solid #ddd; border-radius: 999px; padding: 0 5px;
}
[data-bs-theme="dark"] .ops-layer-row { color: #ddd; }
[data-bs-theme="dark"] .ops-layer-row.disabled { color: #777; }
[data-bs-theme="dark"] .ops-layer-hint { color: #888; border-color: #555; }

/* ── PIP insets — floating, draggable, resizable detail maps over the main map ──────────────── */
.ops-pip {
    position: fixed;
    width: 320px;
    height: 260px;
    min-width: 200px;
    min-height: 150px;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #999;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    resize: both;
}
.ops-pip-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #1565c0;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: move;
    user-select: none;
}
.ops-pip-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-pip-close {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    padding: 0 3px;
    cursor: pointer;
}
.ops-pip-close:hover { color: #ffd6d6; }
.ops-pip-map { flex: 1; min-height: 0; }
[data-bs-theme="dark"] .ops-pip { background: #2a2a2a; border-color: #555; }

/* ＋Inset menu (This view / Adelaide metro). */
.ops-pip-menu {
    position: fixed;
    z-index: 1050;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.32);
    padding: 3px;
    display: flex;
    flex-direction: column;
    min-width: 140px;
}
.ops-pip-menu-item {
    border: none;
    background: transparent;
    text-align: left;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 4px;
    color: #333;
    cursor: pointer;
}
.ops-pip-menu-item:hover { background: #e7f1fb; }
.ops-pip-menu-note { padding: 6px 10px; font-size: 11px; color: #888; }
[data-bs-theme="dark"] .ops-pip-menu { background: #2a2a2a; border-color: #555; }
[data-bs-theme="dark"] .ops-pip-menu-item { color: #ddd; }
[data-bs-theme="dark"] .ops-pip-menu-item:hover { background: #3a3a3a; }

/* Info-window action links (Open incident · Open inset). */
.ops-info-actions { margin-top: 0.4rem; display: flex; gap: 10px; }
.ops-info-actions a { margin-top: 0; cursor: pointer; }
.ops-views-row { display: flex; gap: 3px; align-items: center; }
.ops-views-select {
    flex: 1;
    min-width: 0;
    font-size: 10px;
    padding: 2px 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #333;
}
.ops-views-btn {
    border: 1px solid #ccc;
    background: #f4f4f4;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    color: #555;
    cursor: pointer;
}
.ops-views-btn:hover { border-color: #1565c0; color: #1565c0; }
[data-bs-theme="dark"] .ops-views-select { background: #3a3a3a; color: #ddd; border-color: #555; }
[data-bs-theme="dark"] .ops-views-btn { background: #3a3a3a; color: #ccc; border-color: #555; }
[data-bs-theme="dark"] .ops-filter-panel { background: #2a2a2a; }
[data-bs-theme="dark"] .ops-flabel { color: #999; }
[data-bs-theme="dark"] .ops-chip { background: #3a3a3a; color: #ddd; border-color: #555; }
/* The selected (active/on) state must beat the dark base rules above — equal specificity means the
   later rule wins, so re-assert the highlight in dark mode (else you can't see what's selected). */
[data-bs-theme="dark"] .ops-chip.active { background: #1565c0; color: #fff; border-color: #4dabf7; }
[data-bs-theme="dark"] .ops-mode-btn.active { background: #1565c0; color: #fff; }
[data-bs-theme="dark"] .ops-cap-mode.on { background: #1565c0; color: #fff; border-color: #4dabf7; }
[data-bs-theme="dark"] .ops-dim-btn.active { background: #1565c0; color: #fff; }

/* ── Station cards (OverlayView; positioned by JS, centred on the point) ──── */
.ops-station {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 2px 6px;
    border-radius: 8px;
    color: #1a1a1a;
    border: 1.5px solid #bbb;                /* colour set by the availability band below */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.ops-st-head { display: flex; align-items: center; gap: 5px; justify-content: space-between; }
.ops-st-name { font-weight: 600; }
.ops-st-count {
    background: rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 700;
}

/* Availability band fills the whole card: green = all available, amber = some, red = none. */
.ops-depl-ok   { background: #b2f2bb; border-color: #2f9e44; }
.ops-depl-warn { background: #ffe3bf; border-color: #d9881f; }
.ops-depl-low  { background: #ffc9c9; border-color: #c92a2a; }
.ops-depl-none { background: #e9ecef; border-color: #adb5bd; }

/* Tall vehicle lists wrap into side-by-side columns (built in JS). */
.ops-veh-grid { display: flex; gap: 4px; align-items: flex-start; }
/* Vehicle list (vehicle mode + station info window). */
.ops-veh-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 2px;
    max-height: 55vh;          /* generous — only scrolls a genuinely huge list, never a normal one */
    overflow: auto;
}
.ops-veh {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
}
.ops-veh-st { margin-left: auto; opacity: 0.85; font-weight: 500; }
/* CoQ "covering" — a vehicle visiting this station to cover it (drawn here, not at home). */
.ops-veh-cover { outline: 1.5px dashed #ffc107; outline-offset: -1px; }
/* Vehicle status colours — same palette as the Resources board (.st-*). */
.ops-veh.s-AVAILABLE { background: #2f9e44; }
.ops-veh.s-ACTIVE    { background: #0a3622; }
.ops-veh.s-PAGED     { background: #fa5252; }
.ops-veh.s-DEPLOYED  { background: #c92a2a; }
.ops-veh.s-DEFAULTED { background: #868e96; }
.ops-veh.s-OFFLINE   { background: #495057; color: #adb5bd; }
/* SES unit activated → orange, matching the resources board (.ses-active #c47d18). Placed after the
   status colours so it wins for an available/active appliance of an activated unit. */
.ops-veh.ops-veh-ses { background: #c47d18; color: #fff; }

/* ── Agency indicators — a colour-coded left stripe on station cards + tag chips on incidents ──── */
.ops-ag-SACFS { --ag: #ffd000; }   /* CFS — yellow */
.ops-ag-SAMFS { --ag: #d32f2f; }   /* MFS — red */
.ops-ag-SASES { --ag: #e8530c; }   /* SES — orange */
.ops-ag-SADEW { --ag: #2b8a3e; }   /* DEW — green */
.ops-station[class*="ops-ag-"], .ops-merged-st[class*="ops-ag-"] {
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: var(--ag, #adb5bd);
}
.ops-inc-ags { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 1px; }
.ops-ag-tag {
    padding: 0 4px;
    border-radius: 3px;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.6;
    color: #fff;
    background: var(--ag, #adb5bd);
}
.ops-ag-tag.ops-ag-SACFS { color: #1a1a1a; }   /* yellow needs dark text */
/* Dim mode — filtered-out items kept on the map but greyed back so the matches lead. */
.ops-dim { opacity: 0.38; filter: grayscale(0.55); }
.ops-veh.ops-veh-dim { opacity: 0.45; filter: grayscale(0.5); }

/* ── Incident cards (a name label beside each pin; + responding vehicles in vehicle mode) ── */
.ops-incident {
    position: absolute;
    transform: translate(0, -50%);          /* left edge just right of the pin */
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 7px;
    border-radius: 8px;
    background: #fff;
    color: #1a1a1a;
    border: 1.5px solid #d32f2f;
    border-left-width: 4px;                  /* status accent down the side */
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    /* Grow to fit the responder / merged content — NEVER scroll (matches .ops-station). A busy incident
       (>6 units) splits into side-by-side vehicle columns via vehListHtml; those must WIDEN the card,
       not spawn a horizontal scrollbar. vehicleColumns() caps each column at 6 rows, so the card grows
       sideways rather than tall — no vertical scroll needed either. */
    cursor: pointer;
}
.ops-inc-head { display: flex; flex-direction: column; max-width: 180px; }
.ops-inc-type { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.ops-inc-loc { font-size: 9px; color: #666; overflow: hidden; text-overflow: ellipsis; }
/* No-resources incident (e.g. an automatic alarm with no attributable units) — dimmed + a NO UNITS tag. */
.ops-no-resources { opacity: 0.7; filter: saturate(0.7); }
.ops-inc-noresp {
    align-self: flex-start;
    font-size: 8px; font-weight: 700; letter-spacing: 0.3px;
    background: rgba(255, 255, 255, 0.88); color: #555;
    padding: 0 3px; border-radius: 3px; margin-top: 2px; white-space: nowrap;
}
/* incident status → border colour (mirrors the pins) */
.st-inc-GOING      { border-color: #d32f2f; }
.st-inc-CONTAINED  { border-color: #f57c00; }
.st-inc-CONTROLLED { border-color: #fbc02d; }
.st-inc-SAFE       { border-color: #388e3c; }
[data-bs-theme="dark"] .ops-incident { background: #2a2a2a; color: #eee; }
[data-bs-theme="dark"] .ops-inc-loc { color: #aaa; }

/* ── Clusters (count of stations in an area; click to zoom in) ────────────── */
.ops-cluster {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #1a1a1a;
    /* background + border-colour come from the availability band (.ops-depl-*), same as cards. */
    border-width: 2px;
    border-style: solid;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}
.ops-cl-n { font-size: 13px; font-weight: 700; line-height: 1; }
.ops-cl-sub { font-size: 9px; color: #666; line-height: 1; }

/* Merged card — overlapping stations LISTED inside one frame; offset shadow hints at "stacked". */
.ops-merged {
    display: flex;                 /* a row of masonry columns (built + balanced in JS, no grid gaps) */
    align-items: flex-start;
    gap: 3px;
    background: #fff;
    border: 1.5px solid #bbb;
    padding: 3px;
    box-shadow: 3px 3px 0 -1px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.25);
}
.ops-merged-col { display: flex; flex-direction: column; gap: 3px; }
.ops-merged-st {
    padding: 2px 6px;
    border-radius: 6px;
    border: 1.5px solid;          /* fill + border colour come from the per-station band (.ops-depl-*) */
}
[data-bs-theme="dark"] .ops-merged { background: #2a2a2a; border-color: #555; }
[data-bs-theme="dark"] .ops-merged { box-shadow: 3px 3px 0 -1px rgba(255, 255, 255, 0.13), 0 1px 4px rgba(0, 0, 0, 0.6); }

/* Merged incident card — overlapping fires listed in one neutral frame, each with a status accent. */
.ops-merged-inc { border-color: #bbb; border-left-width: 1.5px; gap: 3px; }
[data-bs-theme="dark"] .ops-merged-inc { border-color: #555; }
.ops-merged-inc-st {
    display: flex;
    flex-direction: column;
    padding: 1px 7px;
    cursor: pointer;
    border-left-width: 4px;          /* status colour comes from .st-inc-* (border-color) */
    border-left-style: solid;
}

/* ── Dark theme ──────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .ops-toolbar { background: #2a2a2a; }
[data-bs-theme="dark"] .ops-mode-btn { color: #ddd; }
[data-bs-theme="dark"] .ops-station { color: #eee; border-color: #555; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
[data-bs-theme="dark"] .ops-st-count { background: rgba(0, 0, 0, 0.32); }
[data-bs-theme="dark"] .ops-cluster { background: rgba(38, 38, 38, 0.95); color: #eee; }
[data-bs-theme="dark"] .ops-cl-sub { color: #aaa; }
/* Dark availability bands — deeper fills + light text (override the dark .ops-station bg/colour). */
[data-bs-theme="dark"] .ops-depl-ok   { background: #173a28; border-color: #2f9e44; color: #d3f9d8; }
[data-bs-theme="dark"] .ops-depl-warn { background: #463210; border-color: #e8a33d; color: #ffe8cc; }
[data-bs-theme="dark"] .ops-depl-low  { background: #481a1a; border-color: #e85d5d; color: #ffd6d6; }
[data-bs-theme="dark"] .ops-depl-none { background: #2a2a2a; border-color: #666; color: #ccc; }