/* ============================================================
   SAFEGRID THEME SYSTEM — dark (default) + light override
   ============================================================ */

/* --- Dark theme (default) ---------------------------------- */
:root,
[data-sg-theme="dark"] {
    --sg-bg:           #0F172A;
    --sg-panel:        #111827;
    --sg-card:         #1F2937;
    /* 12 Sep 2026: briefly set to the heading colour ("impossible to see the feint… table lines
       and rounded borders"), then reverted the same morning — "too harsh. take the outlines back".
       Only the CHECKBOX outline keeps the heading colour (rule near the bottom of this file). */
    --sg-border:       #374151;
    --sg-text:         #E5E7EB;
    --sg-muted:        #9CA3AF;
    --sg-accent:       #3B82F6;
    --sg-danger:       #EF4444;
    --sg-warning:      #F59E0B;
    --sg-success:      #10B981;
    --sg-sidebar-bg:   #020617;
    --sg-sidebar-w:    240px;
    --sg-card-gap:     18px;
    --sg-gap:          18px;
    --sg-input-bg:     #1E293B;
    --sg-input-border: #334155;
    --sg-btn-bg:       #1D4ED8;
    --sg-btn-border:   #1E40AF;
    --sg-btn-text:     #F8FAFC;
    --sg-panel-overlay-start: rgba(15,23,42,0.38);
    --sg-panel-overlay-end: rgba(15,23,42,0.74);
    --sg-bg-city-image: url('/images/bgcity.jpg');
    --sg-heading: #F8FAFC;
    --sg-subtext: rgba(229,231,235,0.78);
    --sg-muted-soft: rgba(229,231,235,0.72);
    --sg-ok-text:     #34D399;
    --sg-err-text:    #F87171;
    --sg-warn-text:   #FBBF24;
    --sg-info-text:   #60A5FA;
    --sg-purple-text: #C084FC;
    --sg-orange-text: #FB923C;
    --sg-online-text: #4ADE80;
}

/* --- Light theme override ---------------------------------- */
[data-sg-theme="light"] {
    --sg-bg:           #F1F5F9;
    --sg-panel:        #F8FAFC;
    --sg-card:         #FFFFFF;
    --sg-border:       #E2E8F0;
    --sg-text:         #0F172A;
    --sg-muted:        #64748B;
    --sg-accent:       #1D4ED8;
    --sg-eyebrow:      #1D4ED8;
    --sg-danger:       #DC2626;
    --sg-warning:      #D97706;
    --sg-success:      #059669;
    --sg-sidebar-bg:   #F8FAFC;
    --sg-sidebar-w:    240px;
    --sg-card-gap:     18px;
    --sg-gap:          18px;
    --sg-input-bg:     #F1F5F9;
    --sg-input-border: #CBD5E1;
    --sg-btn-bg:       #2563EB;
    --sg-btn-border:   #1D4ED8;
    --sg-btn-text:     #FFFFFF;
    --sg-panel-overlay-start: rgba(248,250,252,0.88);
    --sg-panel-overlay-end: rgba(241,245,249,0.94);
    --sg-bg-city-image: url('/images/bgcitylight.jpeg');
    --sg-heading: #0F172A;
    --sg-subtext: #475569;
    --sg-muted-soft: #64748B;
    --sg-ok-text:     #047857;
    --sg-err-text:    #B91C1C;
    --sg-warn-text:   #B45309;
    --sg-info-text:   #1D4ED8;
    --sg-purple-text: #7E22CE;
    --sg-orange-text: #C2410C;
    --sg-online-text: #15803D;
}

/* Light mode Bootstrap overrides */
[data-sg-theme="light"] body {
    background: var(--sg-bg);
    color: var(--sg-text);
}

[data-sg-theme="light"] .sg-input,
[data-sg-theme="light"] .form-control,
[data-sg-theme="light"] .form-select {
    background: var(--sg-input-bg) !important;
    border-color: var(--sg-input-border) !important;
    color: var(--sg-text) !important;
}

[data-sg-theme="light"] .sg-input::placeholder,
[data-sg-theme="light"] .form-control::placeholder {
    color: var(--sg-muted) !important;
}

[data-sg-theme="light"] .sg-card,
[data-sg-theme="light"] .card {
    background: var(--sg-card) !important;
    border-color: var(--sg-border) !important;
    color: var(--sg-text) !important;
}

[data-sg-theme="light"] .app-panel,
[data-sg-theme="light"] .app-shell,
[data-sg-theme="light"] .members-card,
[data-sg-theme="light"] .cr-layout {
    background: var(--sg-bg) !important;
}

[data-sg-theme="light"] .app-page-header__title,
[data-sg-theme="light"] .app-page-header__eyebrow {
    color: var(--sg-text) !important;
}

[data-sg-theme="light"] .app-page-header__subtitle,
[data-sg-theme="light"] .app-panel__header p,
[data-sg-theme="light"] .app-filter span,
[data-sg-theme="light"] .app-filter label {
    color: var(--sg-muted) !important;
}

[data-sg-theme="light"] .app-panel {
    border-color: var(--sg-border) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08) !important;
    background:
        linear-gradient(var(--sg-panel-overlay-start), var(--sg-panel-overlay-end)),
        url('/images/bgcitylight.jpeg') center/cover no-repeat !important;
}

[data-sg-theme="light"] .members-card {
    background:
        linear-gradient(var(--sg-panel-overlay-start), var(--sg-panel-overlay-end)),
        url('/images/bgcitylight.jpeg') center/cover no-repeat !important;
}

[data-sg-theme="light"] .app-panel__header {
    border-bottom-color: var(--sg-border) !important;
}

[data-sg-theme="light"] .login-card,
[data-sg-theme="light"] .contact-form-card {
    background:
        linear-gradient(rgba(241,245,249,0.84), rgba(226,232,240,0.92)),
        url('/images/bgcitylight.jpeg') center/cover no-repeat !important;
}

[data-sg-theme="light"] .app-panel__header h2 {
    color: var(--sg-text) !important;
}

[data-sg-theme="light"] .btn-primary,
[data-sg-theme="light"] button.btn-primary,
[data-sg-theme="light"] .btn.btn-primary {
    background-color: var(--sg-btn-bg) !important;
    border-color: var(--sg-btn-border) !important;
    color: var(--sg-btn-text) !important;
}

[data-sg-theme="light"] .btn-outline-light {
    background: var(--sg-card) !important;
    border-color: var(--sg-input-border) !important;
    color: var(--sg-text) !important;
}

/* Bootstrap's neutral buttons (Cancel etc.) keep dark-theme white text — force readable
   text on light surfaces. Same treatment as .btn-outline-light above. */
[data-sg-theme="light"] .btn-secondary,
[data-sg-theme="light"] .btn-outline-secondary,
[data-sg-theme="light"] .btn-dark {
    background: var(--sg-card) !important;
    border-color: var(--sg-input-border) !important;
    color: var(--sg-text) !important;
}

[data-sg-theme="light"] .sg-muted,
[data-sg-theme="light"] .text-muted {
    color: var(--sg-muted) !important;
}

h1:focus,
h1:focus-visible,
.hero-title-frame:focus,
.hero-title-frame:focus-visible {
    outline: none !important;
}


.sg-side-patrol-card {
    margin: 8px 10px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--sg-border);
    background: linear-gradient(180deg, #1a2538 0%, #111a2b 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.35);
}

.sg-side-patrol-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--sg-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.sg-side-patrol-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.sg-side-patrol-id {
    font-size: 13px;
    font-weight: 700;
    color: var(--sg-text);
}

.sg-side-patrol-badge {
    font-size: 10px;
    border-radius: 4px;
    padding: 1px 6px;
    font-weight: 700;
}

.sg-side-patrol-badge.on {
    background: rgba(16,185,129,0.2);
    color: var(--sg-ok-text);
    border: 1px solid rgba(16,185,129,0.4);
}

.sg-side-patrol-badge.standby {
    background: rgba(245,158,11,0.18);
    color: var(--sg-warn-text);
    border: 1px solid rgba(245,158,11,0.4);
}

.sg-side-patrol-sub {
    margin-top: 2px;
    color: var(--sg-muted);
    font-size: 11px;
    display: flex;
    justify-content: space-between;
}

/* --- Bootstrap variable overrides (works for both themes via sg CSS vars) --- */
[data-bs-theme="dark"],
[data-bs-theme="light"] {
    --bs-body-bg:            var(--sg-bg);
    --bs-body-color:         var(--sg-text);
    --bs-card-bg:            var(--sg-card);
    --bs-card-border-color:  var(--sg-border);
    --bs-border-color:       var(--sg-border);
    --bs-secondary-bg:       var(--sg-panel);
    --bs-tertiary-bg:        var(--sg-card);
    --bs-table-color:        var(--sg-text);
    --bs-table-bg:           transparent;
    --bs-table-hover-bg:     rgba(0,0,0,0.04);
    --bs-table-striped-bg:   rgba(0,0,0,0.02);
    --bs-form-control-bg:    var(--sg-input-bg);
    --bs-input-bg:           var(--sg-input-bg);
    --bs-input-border-color: var(--sg-input-border);
    --bs-input-color:        var(--sg-text);
    --bs-modal-bg:           var(--sg-panel);
    --bs-dropdown-bg:        var(--sg-card);
    --bs-link-color:         var(--sg-accent);
}

/* --- Base -------------------------------------------------- */
html, body {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    /* Global base nudged 14→13px (Jeremy: text too big throughout). Anything inheriting the base
       (tables, lists, labels, buttons without an explicit px size) shrinks a notch so more fits. */
    font-size: 13px;
    margin: 0;
    padding: 0;
    background: var(--sg-bg);
    color: var(--sg-text);
    height: 100%;
    overflow: hidden;
}

[data-sg-theme="dark"] body,
[data-sg-theme="dark"] html {
    background: radial-gradient(ellipse at top, #0B1220, #020617);
}

.safegrid-layout--public {
    height: 100vh;
}

.safegrid-content-row--public {
    overflow: hidden;
}

.safegrid-main--public {
    height: 100vh;
    overflow: hidden;
}

.safegrid-main-scroll--public {
    display: block;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* ── Unified topbar ──────────────────────────────────────────────────────── */
.sg-topbar {
    display: flex;
    align-items: center;
    height: 52px;
    padding: 0 20px;
    background: var(--sg-panel);
    border-bottom: 1px solid var(--sg-border);
    flex-shrink: 0;
    position: relative;
    z-index: 400;
}

/* Left zone: section · title — does not grow, truncates at 28% */
.sg-topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    max-width: 28%;
    min-width: 0;
    overflow: hidden;
    padding-right: 16px;
}

.sg-topbar-section {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sg-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.sg-topbar-sep {
    color: var(--sg-border);
    font-size: 13px;
    flex-shrink: 0;
}

.sg-topbar-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--sg-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Centre zone: page-specific action buttons — fills remaining space */
.sg-topbar-actions {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: visible;   /* allow dropdowns to escape */
}

/* ── Topbar button normalisation ─────────────────────────────────────────────
   Every button / chip / link-button placed inside .sg-topbar-actions is
   normalised to the same height, font, and border-radius regardless of what
   Bootstrap or sg-chip class it was given by the page.
   Colors stay as-is (btn-primary = blue, btn-outline-secondary = ghost, etc.)
   ───────────────────────────────────────────────────────────────────────── */
.sg-topbar-actions button,
.sg-topbar-actions a.btn {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 13px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    border-width: 1px !important;
}

/* ── Topbar input / select normalisation ────────────────────────────────── */
.sg-topbar-input,
.sg-topbar-select {
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 7px;
    border: 1px solid var(--sg-border);
    background: var(--sg-card);
    color: var(--sg-text);
    outline: none;
    transition: border-color .15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.sg-topbar-input { min-width: 190px; }
.sg-topbar-select { min-width: 130px; }
.sg-topbar-input:focus,
.sg-topbar-select:focus { border-color: var(--sg-accent); }
.sg-topbar-input::placeholder { color: var(--sg-muted); font-size: 11px; }

/* Count badge in topbar */
.sg-topbar-count-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--sg-muted);
    background: rgba(148,163,184,0.1);
    border-radius: 10px;
    padding: 0 9px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Topbar vertical divider */
.sg-topbar-divider {
    width: 1px;
    height: 18px;
    background: var(--sg-border);
    flex-shrink: 0;
    align-self: center;
}

/* Single-site-only notice banner */
.sg-single-site-notice {
    background: rgba(99,102,241,0.1);
    border: 1px solid rgba(99,102,241,0.25);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12px;
    color: #a5b4fc;
    margin-bottom: 10px;
    flex-shrink: 0;
}

/* ── Advanced filter dropdown (position:fixed portal) ────────────────────── */
.sg-adv-filter-drop {
    position: fixed;
    top: 58px;
    left: 50%;
    transform: translateX(-50%);
    width: 340px;
    background: var(--sg-panel);
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,.5);
    z-index: 1200;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sg-adv-filter-drop__title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--sg-muted);
}

.sg-adv-filter-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sg-muted);
}

.sg-adv-filter-drop__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--sg-border);
}

/* sg-chip inside topbar: same height + squared corners */
.sg-topbar-actions .sg-chip,
.sg-topbar-actions .sg-chip--active {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 13px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}

/* Spinner inside topbar buttons keeps them from growing */
.sg-topbar-actions .spinner-border-sm {
    width: 13px !important;
    height: 13px !important;
    border-width: 2px !important;
}

/* Right zone: ALWAYS pinned to far right via margin-left:auto */
.sg-topbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 16px;
}

/* ── Site label / switcher (right side of topbar) ───────────────────────── */
.sg-topbar-icon {
    color: var(--sg-accent);
    font-size: 12px;
    flex-shrink: 0;
}

.sg-topbar-site-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--sg-text);
    white-space: nowrap;
}

.sg-topbar-chevron {
    font-size: 10px;
    color: var(--sg-muted);
    transition: transform 0.18s;
    flex-shrink: 0;
}

.sg-topbar-chevron--open {
    transform: rotate(180deg);
}

.sg-site-label {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--sg-border);
}

.sg-site-switcher {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--sg-border);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, border-color 0.15s;
}

.sg-site-switcher:hover {
    background: var(--sg-card);
    border-color: var(--sg-accent);
}

.sg-site-drop {
    /* Fixed so it floats above all content regardless of overflow:hidden parents */
    position: fixed;
    top: 58px;      /* topbar height (52px) + 6px gap */
    right: 20px;    /* aligns with topbar right padding */
    min-width: 230px;
    background: var(--sg-panel);
    border: 1px solid var(--sg-border);
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
    z-index: 1200;
    overflow: hidden;
}

/* ── Checkbox-style multi-site picker ────────────────────────────────────── */
.sg-site-drop--check {
    min-width: 260px;
    padding: 4px 0;
}

.sg-site-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background 0.12s;
    font-size: 13px;
    color: var(--sg-text);
    user-select: none;
}
.sg-site-check-row:hover { background: rgba(148,163,184,0.07); }

.sg-site-check-row--all {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sg-muted);
}
.sg-site-check-row--all:hover { background: rgba(99,102,241,0.08); }

.sg-site-check-row--current .sg-site-check-label {
    color: var(--sg-accent);
}

/* Custom checkbox box */
.sg-site-check-box {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--sg-border);
    background: var(--sg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    color: #fff;
    transition: background 0.15s, border-color 0.15s;
}
.sg-site-check-box--checked {
    background: var(--sg-accent);
    border-color: var(--sg-accent);
}

/* Indeterminate dash inside the "All" row */
.sg-site-check-partial {
    display: block;
    width: 8px;
    height: 2px;
    background: var(--sg-accent);
    border-radius: 2px;
}

.sg-site-check-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-site-check-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--sg-muted);
    background: rgba(148,163,184,0.1);
    border-radius: 10px;
    padding: 1px 7px;
    flex-shrink: 0;
}

.sg-site-check-active-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sg-accent);
    flex-shrink: 0;
    box-shadow: 0 0 5px rgba(99,102,241,0.6);
}

.sg-site-check-sep {
    height: 1px;
    background: var(--sg-border);
    margin: 3px 0;
}

.sg-site-check-switch-link {
    display: block;
    padding: 8px 14px;
    font-size: 12px;
    color: var(--sg-accent);
    text-decoration: none;
    transition: background 0.12s;
}
.sg-site-check-switch-link:hover {
    background: rgba(99,102,241,0.08);
    color: var(--sg-accent);
}

/* Multi-site indicator on the switcher button */
.sg-site-switcher--multi .sg-topbar-site-name {
    color: var(--sg-accent);
}
.sg-site-switcher--multi .sg-topbar-icon {
    color: var(--sg-accent);
}

/* ── Org gear button (topbar far-right) ──────────────────────────────────── */
.sg-org-btn {
    background: none;
    border: 1px solid var(--sg-border);
    padding: 4px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 8px;
    transition: border-color .15s, background .15s;
    margin-left: 2px;
}

.sg-org-btn:hover {
    border-color: var(--sg-accent);
    background: rgba(99,102,241,0.08);
}

.sg-org-avatar {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    object-fit: cover;
    flex-shrink: 0;
}

.sg-org-avatar--initials {
    background: var(--sg-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    flex-shrink: 0;
}

.sg-org-gear-icon {
    font-size: 12px;
    color: var(--sg-muted);
    flex-shrink: 0;
}

/* --- Layout ------------------------------------------------ */
.safegrid-layout {
    height: 100vh;
    overflow: hidden;
    display: flex;
}

.safegrid-content-row {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

.safegrid-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
    background: var(--sg-bg);
    min-width: 0;
}

.safegrid-main-scroll {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Standard page wrapper (used by non-CR pages) */
.sg-page {
    padding: var(--sg-card-gap);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    gap: var(--sg-card-gap);
    overflow: hidden;
}

.admin-dashboard.sg-page,
.suburb-admin-dashboard.sg-page,
.tenant-manager-dashboard.sg-page,
.patroller-dashboard.sg-page,
.resident-dashboard.sg-page {
    padding: 0;
}

/* Auto-pad any page content that isn't the full-bleed Control Room.
   .safegrid-main is height:100vh; overflow:hidden, so a plain block page taller than the
   viewport would be CLIPPED at the bottom (the cut-off bug). Give these pages their own
   vertical scroll so all content is reachable and nothing is cut off. Pages that manage
   their own height (.sg-page, .cr-shell, .home, .page-frame) are excluded and unaffected. */
.safegrid-main > *:not(.cr-shell):not(.sg-page):not(.home):not(.page-frame):not(.sg-topbar) {
    padding: 20px 24px;
    display: block;
    height: 100%;
    overflow-y: auto;
}

.safegrid-main > .home,
.safegrid-main > .page-frame {
    padding: 0;
}

.app-shell {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    width: 100%;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: var(--sg-card-gap);
    box-sizing: border-box;
    overflow: hidden;
    min-width: 0;
}

.app-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.app-page-header__eyebrow {
    color: var(--sg-muted-soft);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
    margin-bottom: 8px;
}

.app-page-header__title {
    margin: 0;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 700;
    color: var(--sg-heading);
}

.app-page-header__subtitle {
    margin: 8px 0 0;
    color: var(--sg-subtext);
    font-size: 15px;
    max-width: 760px;
}

.app-page-header__actions,
.app-panel__header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.app-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--sg-border);
    background:
        linear-gradient(var(--sg-panel-overlay-start), var(--sg-panel-overlay-end)),
        var(--sg-bg-city-image) center/cover no-repeat;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 20px 48px rgba(0,0,0,0.28);
    backdrop-filter: blur(8px);
}

.app-panel--loading,
.app-panel__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    color: var(--sg-muted-soft);
}

.app-panel__header {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--sg-border);
}

.app-panel__header h2 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: var(--sg-heading);
}

.app-panel__header p {
    margin: 0;
    color: var(--sg-muted-soft);
    font-size: 14px;
}

.app-filter-grid {
    flex: 0 0 auto;
    display: grid;
    gap: 16px;
    padding: 18px 22px 20px;
    border-bottom: 1px solid var(--sg-border);
}

.app-filter-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 220px));
}

.app-filter-grid--wide {
    grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(0, 1fr));
}

.app-filter {
    display: grid;
    grid-template-columns: minmax(120px, 148px) minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    row-gap: 8px;
}

.app-filter--actions {
    grid-template-columns: 1fr;
}

.app-filter span,
.app-filter label {
    grid-column: 1;
    color: var(--sg-muted-soft);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.35;
}

.app-filter input,
.app-filter select,
.app-filter textarea {
    grid-column: 2;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,0.24);
    background: var(--sg-card);
    color: var(--sg-heading);
    outline: none;
}

.app-filter textarea {
    min-height: 96px;
    padding: 12px 14px;
}

.app-filter .app-input-wrap {
    grid-column: 2;
    width: 100%;
}

.app-filter--checkbox {
    grid-template-columns: minmax(120px, 148px) auto;
    justify-content: flex-start;
}

.app-filter--checkbox input {
    width: auto;
    min-height: auto;
    justify-self: start;
}

.app-filter--actions > * {
    grid-column: 1;
}

.app-filter input:focus,
.app-filter select:focus,
.app-filter textarea:focus {
    border-color: rgba(96,165,250,0.72);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
}

.app-input-wrap {
    position: relative;
}

.app-input-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sg-muted-soft);
}

.app-input-wrap input {
    padding-left: 40px;
}

.app-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
}

.app-scroll--padded {
    padding: 20px 22px 22px;
}

.app-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

.app-table th,
.app-table td {
    padding: 9px 16px;
    border-bottom: 1px solid var(--sg-border);
    text-align: left;
    /* HARD RULE: grids never scroll horizontally — long content wraps instead of forcing width. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Belt-and-braces: list/grid wrappers must not produce a horizontal scrollbar. */
.app-panel__body, .user-profile-tabs__content { overflow-x: hidden; }

.app-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(8,15,30,0.96);
    color: rgba(226,232,240,0.68);
    font-size: 12px;
    font-weight: 600;
}

/* Standardised to 13px to match the app's base — was 15px, which read oversized/disproportionate. */
.app-table td {
    color: var(--sg-text);
    font-size: 13px;
}

.app-table tbody tr:last-child td {
    border-bottom: none;
}

.app-card-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sg-card-gap);
    padding: 22px;
    align-content: start;
}

.app-item-card,
.app-summary-card {
    border-radius: 16px;
    border: 1px solid var(--sg-border);
    background: linear-gradient(var(--sg-card), var(--sg-card));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 48px rgba(0,0,0,0.22);
    padding: 18px;
}

.app-item-card--alert {
    border-color: rgba(248,113,113,0.32);
}

.app-item-card__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(59,130,246,0.2);
    color: var(--sg-accent);
    font-size: 12px;
    margin-bottom: 12px;
}

.app-item-card__eyebrow--danger {
    background: rgba(239,68,68,0.22);
    color: var(--sg-err-text);
}

.app-item-card__title {
    margin: 0 0 6px;
    color: var(--sg-heading);
    font-size: 18px;
    font-weight: 700;
}

.app-item-card__meta,
.app-item-card__copy {
    color: var(--sg-muted-soft);
    font-size: 14px;
    margin: 0 0 6px;
}

.app-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sg-card-gap);
}

.app-summary-card__value {
    font-size: 32px;
    font-weight: 700;
    color: var(--sg-heading);
    line-height: 1;
    margin-bottom: 8px;
}

.app-summary-card__label {
    color: var(--sg-subtext);
    font-size: 14px;
}

.app-chat-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.6fr);
}

.app-chat-list,
.app-chat-thread {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.app-chat-list {
    border-right: 1px solid var(--sg-border);
    background: var(--sg-card);
}

.app-chat-list__header,
.app-chat-thread__header,
.app-chat-thread__composer {
    padding: 18px 20px;
    border-bottom: 1px solid var(--sg-border);
    color: var(--sg-heading);
    font-weight: 700;
}

.app-chat-thread__composer {
    border-top: 1px solid var(--sg-border);
    border-bottom: none;
}

.app-chat-list__items,
.app-chat-thread__messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.app-chat-list__item {
    padding: 16px 20px;
    border-bottom: 1px solid var(--sg-border);
    cursor: pointer;
}

.app-chat-list__item--active {
    background: rgba(59,130,246,0.14);
}

.app-chat-thread__messages {
    padding: 20px;
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
}

.app-chat-bubble {
    display: inline-block;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--sg-card);
    color: var(--sg-heading);
}

/* --- Sidebar ----------------------------------------------- */
.safegrid-sidebar {
    width: var(--sg-sidebar-w);
    min-width: var(--sg-sidebar-w);
    height: 100vh;
    background: var(--sg-sidebar-bg) !important;
    border-right: 1px solid var(--sg-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}

.sg-sidebar-menu {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0 0;
}

.sg-sidebar-footer {
    border-top: 1px solid var(--sg-border);
    padding: 8px 0 6px;
}

.sg-sidebar-footer.control-room {
    padding: 10px 0 14px;
}

.sg-sidebar-status-row {
    padding: 0 0 6px;
}

.sg-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 16px 20px;
    font-size: 18px;
    font-weight: 700;
    color: var(--sg-text);
    text-decoration: none;
    border-bottom: 1px solid rgba(55,65,81,0.5);
    margin-bottom: 8px;
}

.sg-logo:hover { color: var(--sg-text); text-decoration: none; }

.sg-logo-img {
    width: 164px;
    height: 54px;
    border-radius: 8px;
    object-fit: contain;
    flex-shrink: 0;
}

.sg-logo-icon {
    width: 34px;
    height: 34px;
    background: var(--sg-accent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.sg-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    color: var(--sg-muted);
    text-decoration: none;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
    cursor: pointer;
    border-left: 3px solid transparent;
    margin: 1px 8px;
}

.sg-nav-item:hover {
    background: var(--sg-card);
    color: var(--sg-text);
}

/* ── Drone module (Coming soon preview) ─────────────────────────────────── */
.drone-subnav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.drone-soon-pill {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.07em;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sg-accent) 16%, transparent);
    color: var(--sg-accent);
    border: 1px solid color-mix(in srgb, var(--sg-accent) 40%, transparent);
    white-space: nowrap;
}
.drone-disclaimer {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 12px 14px 4px;
    padding: 10px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, #f59e0b 10%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
    color: var(--sg-text);
    font-size: 12.5px;
    line-height: 1.45;
}
.drone-disclaimer i { color: #f59e0b; font-size: 16px; margin-top: 1px; }
.drone-disclaimer--tight { margin: 0; }
.drone-cap {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    margin-right: 6px;
    background: color-mix(in srgb, #38bdf8 16%, transparent);
    color: #38bdf8;
    border: 1px solid color-mix(in srgb, #38bdf8 40%, transparent);
}

/* Scheduled Patrols page: map designer beside the route list */
.drone-patrols-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 16px;
    margin-top: 14px;
    align-items: start;
}
@media (max-width: 1100px) { .drone-patrols-grid { grid-template-columns: 1fr; } }
.drone-design-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.drone-design-map {
    width: 100%;
    height: 420px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--sg-border);
    background: var(--sg-surface-2, rgba(255,255,255,0.03));
}
.drone-design-panel {
    border: 1px solid color-mix(in srgb, #22c55e 40%, transparent);
    border-radius: 12px;
    padding: 14px 16px;
    background: color-mix(in srgb, #22c55e 6%, transparent);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.drone-design-panel__head { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--sg-text); }
.drone-design-panel__head i { color: #22c55e; margin-top: 2px; }
.drone-design-fields { grid-template-columns: 1fr 1fr; gap: 10px; }
.drone-design-actions { display: flex; gap: 6px; align-items: center; }
.drone-design-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sg-muted);
    border: 1px dashed var(--sg-border);
    border-radius: 10px;
    padding: 12px 14px;
}
.drone-design-hint i { color: var(--sg-accent, #2563eb); }
.drone-list-col { min-width: 0; }

/* Ops page: hero strip + map card with side panel; page never scrolls */
.drone-ops-page {
    flex: 1 1 auto; height: 100%; max-height: 100%; min-height: 0;
    overflow: hidden; display: flex; flex-direction: column;
    padding: var(--sg-card-gap); box-sizing: border-box; gap: 12px;
}
.drone-hero { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; }
.drone-hero__title { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; color: var(--sg-text); flex-wrap: wrap; }
.drone-hero__title i { color: var(--sg-accent); }
.drone-ops-card {
    flex: 1 1 auto; min-height: 0; overflow: hidden;
    display: flex; gap: 14px;
    background: var(--sg-card); border: 1px solid var(--sg-card-border);
    border-radius: 14px; padding: 14px;
}
.drone-ops-maparea { flex: 1 1 auto; min-width: 0; position: relative; border-radius: 10px; overflow: hidden; }
.drone-ops-map { position: absolute; inset: 0; background: #0b1a34; }
/* Swappable tiles: whichever is "main" fills the area; the other docks bottom-left as the PIP. */
.drone-tile--main { position: absolute; inset: 0; background: #0b1a34; z-index: 1; }
.drone-tile--pip {
    position: absolute; left: 12px; bottom: 12px; z-index: 5;
    width: 300px; height: 190px; border-radius: 10px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 6px 22px rgba(0,0,0,0.45);
    background: #000; cursor: pointer;
}
.drone-tile-clickcatch { z-index: 6; background: transparent; border: none; box-shadow: none; display: flex; align-items: flex-start; justify-content: flex-end; padding: 6px; }
.drone-tile-swaphint {
    font-size: 9px; font-weight: 800; letter-spacing: 0.06em; color: #fff;
    background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.35);
    padding: 3px 8px; border-radius: 6px;
}
.drone-cam-shell { }
.drone-design-banner {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    z-index: 6; padding: 7px 16px; border-radius: 999px; white-space: nowrap;
    font-size: 12px; font-weight: 700; color: #0b1a34;
    background: #22c55e; box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
/* PIP simulated drone-camera window (bottom-left over the map) */
.drone-cam-pip {
    position: absolute; left: 12px; bottom: 12px; z-index: 5;
    width: 300px; height: 190px; border-radius: 10px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 6px 22px rgba(0,0,0,0.45);
    background: #000;
}
.drone-cam-view { position: absolute; inset: 0; }
/* Thermal look: white-hot IR — grayscale + inverted + crushed contrast over the satellite view */
.drone-cam-pip--thermal .drone-cam-view { filter: grayscale(1) invert(1) brightness(1.05) contrast(1.6); }
.drone-cam-pip--thermal::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.06), rgba(0,0,0,0.18));
    mix-blend-mode: overlay;
}
.drone-cam-cross {
    position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%);
    pointer-events: none; z-index: 3;
    background:
        linear-gradient(#ffffffb0, #ffffffb0) center/2px 26px no-repeat,
        linear-gradient(#ffffffb0, #ffffffb0) center/26px 2px no-repeat;
}
.drone-cam-hud {
    position: absolute; left: 0; right: 0; top: 0; z-index: 4;
    display: flex; align-items: center; gap: 7px; padding: 6px 10px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: #fff;
    background: linear-gradient(rgba(0,0,0,0.55), transparent);
    font-variant-numeric: tabular-nums;
}
.drone-cam-rec { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: droneRec 1.2s infinite; }
@keyframes droneRec { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.drone-cam-btns { position: absolute; right: 8px; bottom: 8px; z-index: 4; display: flex; gap: 6px; }
.drone-cam-btn {
    padding: 4px 10px; border-radius: 7px; cursor: pointer;
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em;
    background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.35); color: #fff;
}
.drone-cam-btn--on { background: #38bdf8; border-color: #38bdf8; color: #06263c; }
.drone-ops-side { flex: 0 0 300px; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
.drone-side-block { background: color-mix(in srgb, var(--sg-text) 4%, transparent); border: 1px solid var(--sg-card-border); border-radius: 10px; padding: 12px; }
.drone-side-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.drone-side-name { font-size: 17px; font-weight: 800; color: var(--sg-text); }
.drone-side-model { font-size: 12px; color: var(--sg-muted); }
.drone-caps-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.drone-phase { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, #16a34a 15%, transparent); color: #16a34a; }
.drone-phase--patrol, .drone-phase--enroute { background: color-mix(in srgb, #38bdf8 15%, transparent); color: #38bdf8; }
.drone-phase--orbit { background: color-mix(in srgb, #dc2626 15%, transparent); color: #dc2626; }
.drone-phase--rth { background: color-mix(in srgb, #f59e0b 15%, transparent); color: #f59e0b; }
.drone-pilot-row { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 12px; color: var(--sg-muted); }
.drone-pilot-row i { color: var(--sg-accent); }
.drone-pilot-row strong { color: var(--sg-text); }
.drone-pilot-notified { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 12px; font-weight: 600; color: #16a34a; }
.drone-telemetry { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.drone-tele { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.drone-tele span { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--sg-muted); }
.drone-tele strong { font-size: 15px; color: var(--sg-text); font-variant-numeric: tabular-nums; }
.drone-bat-low { color: #dc2626 !important; }
.drone-mission-strip { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #38bdf8; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, #38bdf8 10%, transparent); }
.drone-speed-row { display: flex; align-items: center; gap: 6px; padding: 0 4px; }
.drone-speed-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; color: var(--sg-muted); margin-right: auto; }
.drone-speed-btn {
    min-width: 38px; padding: 4px 0; border-radius: 8px; cursor: pointer;
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--sg-text) 5%, transparent);
    border: 1px solid var(--sg-card-border); color: var(--sg-muted);
    transition: background 0.12s, color 0.12s;
}
.drone-speed-btn:hover { color: var(--sg-text); }
.drone-speed-btn--on {
    background: color-mix(in srgb, var(--sg-accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--sg-accent) 45%, transparent);
    color: var(--sg-accent);
}
.drone-dispatch-box { border-color: color-mix(in srgb, #dc2626 35%, transparent); }
.drone-dispatch-title { font-size: 13px; font-weight: 800; color: #dc2626; margin-bottom: 4px; }
.drone-dispatch-desc { font-size: 12px; color: var(--sg-muted); margin-bottom: 10px; max-height: 54px; overflow: hidden; }
.drone-side-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; color: var(--sg-muted); margin-bottom: 8px; }
.drone-route-row {
    display: flex; align-items: center; gap: 9px; margin-bottom: 6px;
    padding: 8px 10px; border-radius: 9px;
    background: color-mix(in srgb, var(--sg-text) 4%, transparent);
    border: 1px solid var(--sg-card-border);
}
.drone-route-row__icon { color: var(--sg-accent); font-size: 15px; }
.drone-route-row__body { flex: 1 1 auto; min-width: 0; }
.drone-route-row__name { font-size: 13px; font-weight: 700; color: var(--sg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drone-route-row__meta { font-size: 11px; color: var(--sg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drone-route-row__fly { color: #fff !important; font-weight: 700; }
.drone-actions { padding: 8px; }
.drone-sim-note { font-size: 11px; color: var(--sg-muted); line-height: 1.4; padding: 0 4px 6px; }

/* "Coming soon" pill on nav entries (Drone Ops) */
.sg-nav-soon {
    margin-left: auto;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sg-accent) 18%, transparent);
    color: var(--sg-accent);
    border: 1px solid color-mix(in srgb, var(--sg-accent) 40%, transparent);
}

.sg-nav-item.active {
    color: var(--sg-accent) !important;
    border-left-color: var(--sg-accent);
    background: color-mix(in srgb, var(--sg-accent) 10%, transparent);
}

.sg-nav-item i {
    font-size: 15px;
    width: 18px;
    text-align: center;
}

.sg-online-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--sg-success);
}

.control-room-layout .sg-online-bar {
    padding: 10px 18px 8px;
}

.sg-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sg-success);
    box-shadow: 0 0 6px var(--sg-success);
}

/* --- Cards / Panels --------------------------------------- */
.sg-card {
    background: var(--sg-card);
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    padding: 16px;
}

/* Override Bootstrap card in dark mode */
.card {
    background: var(--sg-card) !important;
    border-color: var(--sg-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4) !important;
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.55) !important;
}

.card-header {
    background: rgba(0,0,0,0.25) !important;
    border-bottom-color: var(--sg-border) !important;
    color: var(--sg-text) !important;
    font-size: 14px;
    font-weight: 600;
}

.card-header.bg-dark {
    background: rgba(0,0,0,0.4) !important;
}

/* --- Tables ---------------------------------------------- */
.table {
    color: var(--sg-text) !important;
}

.table thead th {
    color: var(--sg-muted) !important;
    border-bottom-color: var(--sg-border) !important;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    background: rgba(0,0,0,0.2) !important;
}

.table td, .table th {
    border-color: var(--sg-border) !important;
    vertical-align: middle;
}

.table-light th {
    background: rgba(0,0,0,0.2) !important;
    color: var(--sg-muted) !important;
}

.table-hover tbody tr:hover {
    background: var(--sg-card) !important;
    color: var(--sg-text) !important;
}

/* --- Forms ----------------------------------------------- */
.form-control, .form-select,
.modal .form-control,
.modal .form-select {
    background: var(--sg-card) !important;
    border-color: var(--sg-border) !important;
    color: var(--sg-text) !important;
    border-radius: 8px;
}

.form-control:focus, .form-select:focus,
.modal .form-control:focus,
.modal .form-select:focus {
    background: var(--sg-card) !important;
    border-color: var(--sg-accent) !important;
    color: var(--sg-text) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.2) !important;
}

.form-control::placeholder,
.modal .form-control::placeholder,
.modal .form-select::placeholder {
    color: var(--sg-muted) !important;
}

.form-label,
.modal .form-label,
.modal .form-check-label {
    color: var(--sg-muted);
    font-size: 13px;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.modal .form-control:disabled,
.modal .form-control[readonly],
.modal .form-select:disabled {
    background: var(--sg-card) !important;
    border-color: var(--sg-border) !important;
    color: var(--sg-muted-soft) !important;
    opacity: 1;
}

.form-select option,
.modal .form-select option {
    background: var(--sg-panel);
    color: var(--sg-text);
}

.form-text,
.modal .form-text,
.modal .text-muted {
    color: var(--sg-muted) !important;
}

textarea.form-control { resize: vertical; }

/* --- Modals ---------------------------------------------- */
.modal-content,
.modal .modal-content {
    background: var(--sg-panel) !important;
    border: 1px solid var(--sg-border) !important;
    color: var(--sg-text);
    border-radius: 14px;
}

.modal-header,
.modal .modal-header {
    border-bottom-color: var(--sg-border) !important;
}

.modal-footer,
.modal .modal-footer {
    border-top-color: var(--sg-border) !important;
}

.modal-title { font-weight: 600; }

.modal .btn-close {
    filter: invert(1) grayscale(1) brightness(200%);
}

/* --- Buttons --------------------------------------------- */
.btn-primary {
    background: var(--sg-accent) !important;
    border-color: var(--sg-accent) !important;
    font-weight: 500;
}

.btn-primary:hover {
    background: #2563EB !important;
    border-color: #2563EB !important;
}

.btn-outline-primary {
    color: var(--sg-accent) !important;
    border-color: var(--sg-accent) !important;
}

.btn-outline-primary:hover {
    background: var(--sg-accent) !important;
    color: #fff !important;
}

.btn-outline-light {
    color: var(--sg-muted) !important;
    border-color: var(--sg-border) !important;
}

.btn-outline-light:hover {
    background: var(--sg-card) !important;
    color: var(--sg-text) !important;
}

/* --- Badges --------------------------------------------- */
.badge { font-weight: 500; }

/* --- Breadcrumb ----------------------------------------- */
.breadcrumb-item a { color: var(--sg-accent); text-decoration: none; }
.breadcrumb-item.active { color: var(--sg-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--sg-border); }

/* --- Page title ----------------------------------------- */
.sg-page-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--sg-text);
    margin-bottom: 20px;
}

/* --- Scrollbars ----------------------------------------- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sg-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sg-muted); }

/* ============================================================
   CONTROL ROOM LAYOUT
   ============================================================ */

.cr-shell {
    display: flex;
    height: 100%;
    overflow: hidden;
    background: transparent;
    padding: 6px;
    box-sizing: border-box;
    gap: var(--sg-card-gap);
}

/* Main area (banner + content-row, everything right of sidebar) */
.cr-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background: transparent;
}

.control-room-header {
    flex: 0 0 auto;
    padding: 0 12px 6px;
}

/* Header right cluster: WT widget + notification bell */
.cr-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Compact walkie-talkie widget ── */
.cr-wt-widget {
    position: relative;
}

.cr-wt-widget-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--sg-border, #2d4a6b);
    background: var(--sg-card, #0a1628);
    color: var(--sg-text-muted, #90a4c0);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
}

.cr-wt-widget-btn:hover {
    border-color: var(--sg-accent, #3b82f6);
    color: var(--sg-text, #d8e7fa);
}

.cr-wt-widget--live .cr-wt-widget-btn {
    border-color: var(--sg-success, #22c55e);
    color: var(--sg-success, #22c55e);
}

.cr-wt-widget-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(100,116,139,.25);
    color: var(--sg-muted);
}

.cr-wt-widget-badge--live {
    background: rgba(34,197,94,.2);
    color: var(--sg-success, #22c55e);
}

/* Dropdown panel */
.cr-wt-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;   /* opens under the button toward the page, not over the topbar title */
    z-index: 1200;
    width: 340px;
    background: var(--sg-card, #0a1628);
    border: 1px solid var(--sg-border, #2d4a6b);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    overflow: hidden;
}

.cr-wt-dropdown__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--sg-border, #2d4a6b);
    font-size: 13px;
    font-weight: 600;
    color: var(--sg-text, #d8e7fa);
}

/* 2 × 2 control room: map top-left, to-do top-right, incidents bottom-left, patrols bottom-right.
   Left column a touch wider so the (now smaller) map stays readable. */
.control-room-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(340px, 1fr);
    grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas:
        "left  right"
        "left  right";
    gap: var(--sg-card-gap);
}

/* Left column = map + (optional) active-incidents stacked. The map fills the column;
   when there ARE active incidents the panel is rendered below it and grows to its
   content up to half the column height, then its list scrolls. With no active
   incidents the panel isn't rendered at all, so the map spans the full column. */
.cr-left-col                  { grid-area: left; min-height: 0; display: flex; flex-direction: column; gap: var(--sg-card-gap); }
.control-room-map-panel       { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.control-room-incidents-panel { flex: 0 1 auto; min-height: 0; max-height: 50%; overflow: hidden; display: flex; flex-direction: column; }
/* Right column mirrors the left: Patrol units fills the column; the To-do panel grows to its
   content up to half the column height (then its list scrolls), and is hidden entirely when
   there's nothing needing the operator — so Patrol units takes the whole column. */
.cr-right-col                 { grid-area: right; min-height: 0; display: flex; flex-direction: column; gap: var(--sg-card-gap); }
.control-room-todo-panel      { flex: 0 1 auto; min-height: 0; max-height: 50%; overflow: hidden; display: flex; flex-direction: column; }
.control-room-patrols-panel   { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.crtd-list                    { flex: 1 1 0; min-height: 0; overflow-y: auto; }

/* WT expanded content — scrollable so it never overflows the right col */
.cr-wt-body {
    /* No outer scroll — the panel grows; only the log scrolls internally. */
    padding: 0 16px 14px;
}
.cr-wt-body .form-range { accent-color: var(--sg-success); }

/* ── Walkie-Talkie panel ─────────────────────────────────────── */
.cr-wt-talking-banner {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid var(--sg-success);
    color: var(--sg-success);
    font-size: 13px;
    margin-bottom: 10px;
    animation: wtPulse 1.2s infinite;
}

@keyframes wtPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.65; }
}

.cr-wt-members {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
}

.cr-wt-ptt-area {
    display: flex;
    justify-content: center;
}

.cr-wt-ptt-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 20px;
    border-radius: 16px;
    border: 2px solid var(--sg-success);
    background: rgba(34, 197, 94, 0.08);
    color: var(--sg-success);
    cursor: pointer;
    user-select: none;
    transition: background .15s, transform .1s;
    width: 100%;
    overflow: hidden;
}

/* The WT dropdown lives inside the topbar, where ALL buttons are force-squashed
   to 32px (!important). Exempt the dropdown's contents — the talk button needs
   its full two-line height, the on/off switch its own shape. */
.sg-topbar-actions .cr-wt-dropdown button {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
}
.sg-topbar-actions .cr-wt-dropdown .cr-wt-ptt-btn {
    flex-direction: column !important;
    padding: 16px 20px !important;
    border-radius: 16px !important;
}
.cr-wt-ptt-btn i { font-size: 24px; line-height: 1; }
.cr-wt-ptt-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1; }

.cr-wt-ptt-btn:hover { background: rgba(34, 197, 94, 0.16); }

.cr-wt-ptt-btn--active {
    background: rgba(34, 197, 94, 0.28) !important;
    border-color: var(--sg-success) !important;
    transform: scale(0.98);
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.4);
    animation: wtPulse 0.8s infinite;
}

.cr-wt-ptt-label {
    font-family: var(--sg-font-semibold, sans-serif);
    font-size: 12px;
    letter-spacing: 0.06em;
}

.cr-wt-log {
    max-height: 80px;
    overflow-y: auto;
}

.cr-wt-log-entry {
    font-size: 11px;
    color: var(--sg-muted);
    padding: 1px 0;
    border-bottom: 1px solid var(--sg-card-border);
}

.control-room-map-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px;
    display: flex;
}

.control-room-map-body .cr-map {
    min-height: 0;
}

.control-room-incidents-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.control-room-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
    border-top: 1px solid var(--sg-border);
}

/* Top banner — full width above map, spans center + right */
.cr-top-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 18px;
    background: var(--sg-sidebar-bg);
    border-bottom: 1px solid var(--sg-border);
    flex-shrink: 0;
    z-index: 30;
    min-height: 48px;
}

.cr-banner-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cr-banner-logo-img {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    object-fit: contain;
}

.cr-banner-logo-text {
    font-size: 17px;
    font-weight: 700;
    color: var(--sg-text);
    letter-spacing: 0.3px;
}

.cr-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cr-banner-icon-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--sg-card);
    border: 1px solid var(--sg-border);
    color: var(--sg-muted);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cr-banner-icon-btn:hover {
    background: var(--sg-input-bg);
    color: var(--sg-text);
    border-color: var(--sg-accent);
}

.cr-banner-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--sg-danger);
    color: white;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(239,68,68,0.6);
}

.cr-banner-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3B82F6, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: white;
    cursor: pointer;
    border: 2px solid var(--sg-border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: border-color 0.15s, box-shadow 0.15s;
    overflow: hidden;
}

.cr-banner-avatar:hover {
    border-color: var(--sg-accent);
    box-shadow: 0 0 12px rgba(59,130,246,0.4);
}

.cr-banner-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Content row — holds center map area + right panel side by side */
.cr-content-row {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
    gap: 12px;
    padding: 0 12px 12px 12px;
}

/* --- Map area ------------------------------------------- */
.cr-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.cr-map-wrapper {
    flex: 0 0 54%;
    padding: 12px 0 6px;
    min-height: 0;
}

.cr-map {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background:
        /* Water — river/lake running through city */
        radial-gradient(ellipse 14% 45% at 73% 54%, rgba(12,60,160,0.65) 0%, transparent 100%),
        /* Parks */
        radial-gradient(ellipse 11% 14% at 24% 70%, rgba(15,95,40,0.60) 0%, transparent 100%),
        radial-gradient(ellipse  9% 10% at 80% 20%, rgba(15,95,40,0.50) 0%, transparent 100%),
        /* City centre glow */
        radial-gradient(ellipse 22% 26% at 48% 46%, rgba(55,100,180,0.22) 0%, transparent 100%),
        /* Base land */
        linear-gradient(160deg, #203e6a 0%, #1a3358 45%, #152845 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* What became of the address the operator just saved. Placed with the location panel because
   "saved, nothing changed" is the outcome it exists to prevent (11 Sep 2026). */
.sg-addr-result {
    display: flex; align-items: flex-start; gap: 6px;
    margin: 6px 0 0; font-size: 12px; line-height: 1.35;
    color: var(--sg-muted);
}
.sg-addr-result .bi { flex: 0 0 auto; margin-top: 1px; }

/* ── Location missing ─────────────────────────────────────────────────────────────────────────
   No coordinates means the team has nowhere to go. This is THE thing to fix before an incident can
   be dispatched, so it reads as an alert, not a hint — the first version was a thin border and a
   small line, and Jeremy's verdict was "thats too discrete ... needs real focus".
   Everything here stops the moment coordinates exist. */
.sg-loc-missing {
    border: 2px solid #f59e0b !important;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.10) !important;
    animation: sg-loc-pulse 1.4s ease-in-out infinite;
}
@keyframes sg-loc-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.00); }
    50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.30); }
}

/* The INPUT is the control they have to touch, so the input is what moves. */
.sg-loc-missing input {
    border: 2px solid #f59e0b !important;
    background: rgba(245, 158, 11, 0.14) !important;
    color: var(--sg-text) !important;
    font-weight: 600;
    animation: sg-loc-field 1.4s ease-in-out infinite;
}
@keyframes sg-loc-field {
    0%, 100% { background: rgba(245, 158, 11, 0.08); }
    50%      { background: rgba(245, 158, 11, 0.26); }
}

/* "FIX FIRST" chip — says what to DO, not just that something is wrong. Rendered in the markup
   (the panel header ends with a Save button, so a ::after chip landed after it). */
.sg-loc-chip {
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #f59e0b;
    color: #111827;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    vertical-align: middle;
}

.sg-loc-missing__hint {
    display: flex; align-items: flex-start; gap: 7px;
    margin: 8px 0 2px;
    padding: 7px 10px;
    border-radius: 7px;
    background: rgba(245, 158, 11, 0.18);
    border-left: 3px solid #f59e0b;
    font-size: 13px; font-weight: 600; line-height: 1.35;
    color: #fbbf24;
}
.sg-loc-missing__hint .bi { flex: 0 0 auto; margin-top: 1px; }

@media (prefers-reduced-motion: reduce) {
    .sg-loc-missing,
    .sg-loc-missing input { animation: none; }
}

/* Per-incident "no map pin" line on the active-incidents card. Deliberately ON THE CARD and not a
   single notice under the map: with two unlocated incidents in the queue, one message cannot say
   which it means (Jeremy, 11 Sep 2026). */
.cr-incident-nopin {
    display: flex; align-items: center; gap: 5px;
    margin-top: 3px;
    font-size: 11px; font-weight: 600; line-height: 1.3;
    color: #f59e0b;
}

.cr-map__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.cr-map__hint {
    position: absolute;
    left: 18px;
    bottom: 18px;
    max-width: 320px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--sg-border);
    background: var(--sg-card);
    color: rgba(241,245,249,0.92);
    display: grid;
    gap: 6px;
    z-index: 15;
}

/* Subtle street mesh overlay */
.cr-map::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(210,200,165,0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(210,200,165,0.10) 1px, transparent 1px);
    background-size: 52px 52px;
    pointer-events: none;
    z-index: 1;
}

.cr-map-road-h {
    position: absolute;
    left: 0; right: 0;
    height: 11px;
    background: linear-gradient(90deg,
        rgba(210,200,160,0.20),
        rgba(230,220,175,0.32),
        rgba(210,200,160,0.20));
    border-radius: 2px;
    z-index: 2;
    box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.cr-map-road-v {
    position: absolute;
    top: 0; bottom: 0;
    width: 11px;
    background: linear-gradient(
        rgba(210,200,160,0.20),
        rgba(230,220,175,0.32),
        rgba(210,200,160,0.20));
    border-radius: 2px;
    z-index: 2;
    box-shadow: 1px 0 6px rgba(0,0,0,0.5);
}

.cr-map-block {
    position: absolute;
    background: rgba(10, 22, 42, 0.62);
    border-radius: 3px;
    z-index: 1;
}

.cr-map-block.park  { background: rgba(12, 88, 35, 0.68); }
.cr-map-block.water { background: rgba(8,  50, 140, 0.72); border-radius: 6px; }
.cr-map-block.dense { background: rgba(6,  14, 30, 0.78); }

.cr-pin {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -100%);
    z-index: 12;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cr-pin-head {
    width: 40px;
    height: 40px;
    background: radial-gradient(circle at 35% 32%, #ff7070, #e53030);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 0 22px rgba(239,68,68,0.9), 0 0 50px rgba(239,68,68,0.35), 0 4px 12px rgba(0,0,0,0.6);
    animation: pinPulse 2.2s ease-in-out infinite;
    position: relative;
}

.cr-pin-head::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
}

.cr-pin-glow {
    width: 56px;
    height: 22px;
    background: radial-gradient(ellipse, rgba(239,68,68,0.40) 0%, transparent 70%);
    margin-top: -6px;
}

@keyframes pinPulse {
    0%, 100% { box-shadow: 0 0 22px rgba(239,68,68,0.9), 0 0 50px rgba(239,68,68,0.35), 0 4px 12px rgba(0,0,0,0.6); }
    50%       { box-shadow: 0 0 36px rgba(239,68,68,1.0), 0 0 80px rgba(239,68,68,0.55), 0 4px 16px rgba(0,0,0,0.7); }
}

.cr-vehicle {
    position: absolute;
    font-size: 26px;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.7));
    z-index: 5;
    pointer-events: none;
}

.cr-map-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.cr-map-lock-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--sg-muted);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.cr-map-lock-toggle input { display: none; }

.cr-map-lock-toggle i {
    font-size: 14px;
    color: var(--sg-accent);
}

.cr-panic-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--sg-danger);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 0 20px rgba(239,68,68,0.7), 0 0 40px rgba(239,68,68,0.3);
    z-index: 20;
    letter-spacing: 0.5px;
    animation: panicGlow 1.2s ease-in-out infinite;
}

@keyframes panicGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(239,68,68,0.7), 0 0 40px rgba(239,68,68,0.3); }
    50%       { box-shadow: 0 0 30px rgba(239,68,68,1.0), 0 0 60px rgba(239,68,68,0.5); }
}

.cr-panic-badge::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: white;
}

/* --- Lower section -------------------------------------- */
.cr-lower {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 6px 0 0;
    overflow: hidden;
    min-height: 0;
}

/* Patrol units column */
.cr-patrol-units-col {
    width: 185px;
    min-width: 185px;
    background: linear-gradient(180deg, var(--sg-panel) 0%, #0d1520 100%);
    border-right: 1px solid var(--sg-border);
    overflow-y: auto;
    padding: 10px 8px;
    flex-shrink: 0;
}

.cr-online-bar {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--sg-success);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding: 0 4px;
}

.cr-online-dot-sm {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sg-success);
    box-shadow: 0 0 5px var(--sg-success);
    flex-shrink: 0;
}

.cr-patrol-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--sg-text);
    margin-bottom: 8px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cr-unit-card {
    background: linear-gradient(135deg, var(--sg-card), #1a2333);
    border-radius: 8px;
    padding: 7px 8px;
    margin-bottom: 5px;
    border: 1px solid var(--sg-border);
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.cr-unit-card:hover {
    border-color: var(--sg-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(59,130,246,0.2);
}

.cr-unit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.cr-unit-id {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sg-text);
}

.cr-unit-badge {
    font-size: 9.5px;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.cr-unit-badge.onduty  { background: var(--sg-success); color: #fff; }
.cr-unit-badge.standby { background: var(--sg-warning); color: #000; }
.cr-unit-badge.other   { background: #6366f1;           color: #fff; }

.cr-unit-address {
    font-size: 10.5px;
    color: var(--sg-muted);
}

/* Chat list column (middle lower) */
.cr-chat-list-col {
    background: linear-gradient(180deg, #182235 0%, var(--sg-panel) 100%);
    border: 1px solid var(--sg-border);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 8px 22px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.cr-tabs-bar {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--sg-border);
    gap: 2px;
    flex-shrink: 0;
}

.cr-tab-btn {
    background: none;
    border: none;
    color: var(--sg-muted);
    font-size: 13px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, color 0.12s;
}

.cr-tab-btn.active {
    color: var(--sg-text);
    background: var(--sg-card);
}

.cr-patroller-list {
    overflow-y: auto;
    flex: 1 1 0;
    min-height: 0;
}

.cr-patroller-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-bottom: 1px solid rgba(55,65,81,0.5);
    cursor: pointer;
    transition: background 0.1s;
}

.cr-patroller-item:hover { background: var(--sg-card); }

.cr-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #475569;            /* offline = grey (matches the map's offline pins) */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.cr-avatar.standby { background: #f59e0b; }            /* Standby = amber, like the STANDBY badge + map pins */
.cr-avatar.onduty  { background: var(--sg-success); }  /* On Duty = green */

/* Standby with the position withheld. Deliberately NOT the standby amber — a hidden member read as
   an ordinary standby unit at a glance ("its orange for myself in list so i look like rest of on
   standby's", 06 Aug 2026). Still in the amber family because they ARE reachable, but a deep,
   desaturated amber with a dashed ring: reachable, not placed. */
.cr-avatar.hidden {
    background: #7c4a10;
    color: #fcd9a4;
    border: 1px dashed #f59e0b;
}

.cr-patroller-info { flex: 1; min-width: 0; }

.cr-patroller-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.cr-inline-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    border: 1px solid var(--sg-border);
    background: var(--sg-card);
    color: var(--sg-subtext);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.cr-inline-action-btn:hover {
    color: var(--sg-heading);
    border-color: rgba(96,165,250,0.42);
}

.cr-inline-action-btn:disabled {
    opacity: 0.5;
}

.cr-profile-modal {
    border-radius: 18px;
    border: 1px solid var(--sg-border);
    background: linear-gradient(var(--sg-card), var(--sg-card));
    color: var(--sg-text);
}

.cr-profile-modal .modal-header,
.cr-profile-modal .modal-footer {
    border-color: var(--sg-border);
}

.cr-profile-modal__summary {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}

.cr-profile-modal__avatar {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(59,130,246,0.92), rgba(96,165,250,0.35));
    color: var(--sg-heading);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
}

.cr-profile-modal__avatar--image {
    object-fit: cover;
}

.cr-profile-modal__name {
    color: var(--sg-heading);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 6px;
}

.cr-profile-modal__meta {
    color: var(--sg-muted-soft);
    font-size: 14px;
}

.cr-profile-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}

.cr-profile-modal__grid span {
    display: block;
    color: var(--sg-muted-soft);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.cr-profile-modal__grid strong {
    color: var(--sg-heading);
    font-size: 15px;
}

.cr-patroller-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sg-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cr-patroller-sub {
    font-size: 11px;
    color: var(--sg-muted);
}

.cr-standby-badge {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--sg-warning);
    border: 1px solid var(--sg-warning);
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Coordinated search grid — toggle strip under a selected eligible incident */
.cr-searchgrid-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--sg-border, rgba(148, 163, 184, .25));
}
.cr-searchgrid-meta {
    font-size: 11px;
    color: var(--sg-muted);
    white-space: nowrap;
}
/* Wedge allocation chip beside a responder's name */
.cr-wedge-badge {
    font-size: 10px;
    font-weight: 700;
    color: #1d4ed8;
    background: rgba(37, 99, 235, .12);
    border: 1px solid rgba(37, 99, 235, .45);
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
    margin-left: 6px;
}

/* Chat stream column */
.cr-chat-stream-col {
    background: linear-gradient(180deg, #182235 0%, var(--sg-panel) 100%);
    border: 1px solid var(--sg-border);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 8px 22px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.cr-chat-header {
    display: flex;
    align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid var(--sg-border);
    font-size: 13.5px;
    font-weight: 600;
    gap: 8px;
    flex-shrink: 0;
}

.cr-chat-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cr-messages {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.cr-message {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 12px 8px;
    border-bottom: 1px solid rgba(55,65,81,0.3);
    transition: background 0.12s;
    cursor: pointer;
}

.cr-message:hover { background: var(--sg-card); }

.cr-message-bubble {
    background: var(--sg-card);
    border-radius: 0 10px 10px 10px;
    padding: 7px 10px;
    flex: 1;
    min-width: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.cr-message-bubble.onduty  { border-top: 1px solid rgba(16,185,129,0.3); }
.cr-message-bubble.standby { border-top: 1px solid rgba(245,158,11,0.3); }

.cr-message-info { flex: 1; min-width: 0; }

.cr-message-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.cr-message-sender {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sg-text);
}

.cr-duty-label {
    font-size: 10.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cr-duty-label::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.cr-duty-label.onduty  { color: var(--sg-success); }
.cr-duty-label.onduty::before { background: var(--sg-success); }
.cr-duty-label.standby { color: var(--sg-warning); }
.cr-duty-label.standby::before { background: var(--sg-warning); }

.cr-message-text {
    font-size: 11.5px;
    color: var(--sg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cr-message-time {
    font-size: 10.5px;
    color: var(--sg-muted);
    text-align: right;
    margin-top: 2px;
}

.cr-input-bar {
    padding: 8px 10px;
    border-top: 1px solid var(--sg-border);
    display: flex;
    gap: 7px;
    align-items: center;
    flex-shrink: 0;
}

.cr-msg-input {
    flex: 1;
    background: var(--sg-card);
    border: 1px solid var(--sg-border);
    border-radius: 18px;
    color: var(--sg-text);
    font-size: 12.5px;
    padding: 6px 14px;
    outline: none;
    font-family: inherit;
    transition: border-color 0.12s;
}

.cr-msg-input:focus { border-color: var(--sg-accent); }
.cr-msg-input::placeholder { color: var(--sg-muted); }

.cr-send-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--sg-accent);
    border: none;
    color: white;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s;
}

.cr-send-btn:hover { background: #2563EB; }

/* --- SOS/Backup Alert Popup ----------------------------- */
.cr-alert-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cr-alert-fade-in 0.2s ease-out;
}

@keyframes cr-alert-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cr-alert-card {
    width: 420px;
    max-width: 92vw;
    background: var(--sg-card);
    border: 1px solid var(--sg-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 64px rgba(0,0,0,0.6);
}

.cr-alert-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
}

.cr-alert-card__header.sos { background: #dc2626; }
.cr-alert-card__header.backup { background: #d97706; }

.cr-alert-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--sg-subtext);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
}

.cr-alert-card__body { padding: 18px; }

.cr-alert-card__person {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.cr-alert-card__photo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--sg-border);
}

.cr-alert-card__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--sg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--sg-text);
    text-transform: uppercase;
    flex-shrink: 0;
}

.cr-alert-card__name { font-size: 16px; font-weight: 700; color: var(--sg-text); }
.cr-alert-card__role { font-size: 12px; color: var(--sg-muted); }

.cr-alert-card__details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.cr-alert-card__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--sg-text);
}

.cr-alert-card__row i {
    color: var(--sg-muted);
    font-size: 14px;
    margin-top: 1px;
    flex-shrink: 0;
}

.cr-alert-card__row a {
    color: var(--sg-accent);
    text-decoration: none;
}

.cr-alert-card__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cr-alert-dispatch-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 10px;
    background: #dc2626;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s;
}

.cr-alert-dispatch-btn:hover { background: #b91c1c; }

.cr-alert-dispatched {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    background: rgba(34,197,94,0.12);
    color: #22c55e;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cr-alert-dismiss-btn {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--sg-border);
    border-radius: 10px;
    background: transparent;
    color: var(--sg-muted);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.12s;
}

.cr-alert-dismiss-btn:hover { background: var(--sg-card); }

/* --- Right panel ---------------------------------------- */
.cr-right {
    width: 320px;
    min-width: 320px;
    margin: 12px 0 12px 0;
    background: linear-gradient(180deg, rgba(24, 32, 54, 0.98) 0%, rgba(15, 22, 39, 0.98) 100%);
    border: 1px solid rgba(67, 79, 113, 0.55);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 40px rgba(0,0,0,0.38);
}

.control-room-layout .sg-side-patrol-card {
    margin: 0 10px 0;
}

.control-room-layout .sg-nav-item {
    margin: 2px 10px;
}

.control-room-layout .sg-nav-item.active {
    box-shadow: inset 0 0 0 1px rgba(59,130,246,0.18);
}

.cr-right-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sg-text);
    border-bottom: 1px solid var(--sg-border);
    flex-shrink: 0;
}

.cr-right-header-actions {
    display: flex;
    gap: 6px;
    color: var(--sg-muted);
    font-size: 14px;
}

.cr-right-header-actions i { cursor: pointer; }
.cr-right-header-actions i:hover { color: var(--sg-text); }

.cr-incidents-list {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

.cr-no-incidents {
    padding: 24px 16px;
    text-align: center;
    color: var(--sg-text-muted);
    font-size: 0.9rem;
}

.cr-incident-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(55,65,81,0.5);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-left-color 0.15s;
    margin: 3px 6px;
    border-radius: 0 8px 8px 0;
}

.cr-incident-card:hover { background: var(--sg-card); }
.cr-incident-card:last-child { border-bottom: none; }

/* Selected state — highlighted when row is clicked to focus map pin */
.cr-incident-card--selected,
.cr-incident-card--selected:hover {
    background: rgba(99,102,241,0.15) !important;
    border-left-color: #6366f1 !important;
}

/* View-details arrow button on the right of each incident row */
.cr-incident-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-shrink: 0;
}
/* Larger, labelled row actions (icon + caption) so it's obvious what each does. */
.cr-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    background: var(--sg-card);
    border: 1px solid var(--sg-border);
    color: var(--sg-subtext);
    white-space: nowrap;
    transition: all .12s ease;
}
.cr-act-btn i { font-size: 14px; }
.cr-act-btn:hover { background: var(--sg-input-bg); color: #fff; }
.cr-act-btn--primary {
    background: rgba(59,130,246,0.18);
    border-color: rgba(59,130,246,0.55);
    color: var(--sg-accent);
}
.cr-act-btn--primary:hover { background: color-mix(in srgb, var(--sg-accent) 32%, transparent); color: #fff; }
.cr-incident-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--sg-muted);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.cr-incident-view-btn:hover {
    background: rgba(99,102,241,0.2);
    color: #818cf8;
}

.cr-incident-card.panic {
    border-left-color: var(--sg-danger);
    background: rgba(239,68,68,0.07);
    box-shadow: inset 4px 0 12px rgba(239,68,68,0.15);
}

.cr-incident-card.panic:hover { background: rgba(239,68,68,0.12); }

.cr-incident-card.robbery {
    border-left-color: var(--sg-warning);
    background: rgba(245,158,11,0.05);
}

.cr-incident-card.robbery:hover { background: rgba(245,158,11,0.09); }

.cr-incident-card.suspicious {
    border-left-color: var(--sg-success);
    background: rgba(16,185,129,0.05);
}

.cr-incident-card.default {
    border-left-color: var(--sg-accent);
}

.cr-incident-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    margin-top: 2px;
}

.cr-incident-num.panic      { background: var(--sg-danger);  box-shadow: 0 0 14px rgba(239,68,68,0.7), 0 0 4px rgba(239,68,68,0.4); }
.cr-incident-num.robbery    { background: var(--sg-warning); color: #000; box-shadow: 0 0 10px rgba(245,158,11,0.4); }
.cr-incident-num.suspicious { background: var(--sg-success); box-shadow: 0 0 8px rgba(16,185,129,0.4); }
.cr-incident-num.default    { background: var(--sg-accent);  }

.cr-incident-body { flex: 1; min-width: 0; }

.cr-incident-type {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sg-text);
    letter-spacing: 0.1px;
}

.cr-incident-card.panic .cr-incident-type {
    color: var(--sg-err-text);
}

.cr-incident-meta {
    font-size: 11px;
    color: var(--sg-muted);
    margin-top: 1px;
}

.cr-incident-status {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 3px;
}

.cr-incident-status.responding { background: var(--sg-warning); color: #000; }
.cr-incident-status.dispatched { background: var(--sg-accent);  color: #fff; }
.cr-incident-status.onscene    { background: var(--sg-success); color: #fff; }

.cr-chevron {
    color: var(--sg-muted);
    font-size: 14px;
    align-self: center;
    flex-shrink: 0;
}

/* Stats section */
.cr-stats-section {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
}

.cr-stats-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.cr-stats-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--sg-text);
}

.cr-stats-nav {
    display: flex;
    gap: 4px;
    color: var(--sg-muted);
    font-size: 13px;
}

.cr-stats-nav i { cursor: pointer; }
.cr-stats-nav i:hover { color: var(--sg-text); }

.cr-stats-sub {
    font-size: 10.5px;
    color: var(--sg-muted);
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}

.cr-big-stat-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 6px;
}

.cr-big-num {
    font-size: 48px;
    font-weight: 800;
    color: var(--sg-text);
    line-height: 1;
    text-shadow: 0 2px 12px rgba(59,130,246,0.2);
}

.cr-mini-nums {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
}

.cr-mini-item {
    font-size: 22px;
    font-weight: 700;
    color: var(--sg-text);
    line-height: 1.1;
}

.cr-mini-label {
    font-size: 9.5px;
    color: var(--sg-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cr-chart-svg {
    width: 100%;
    height: 70px;
    margin: 8px 0;
    display: block;
}

.cr-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: 4px;
}

.cr-stat-cell {
    text-align: center;
}

.cr-stat-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--sg-text);
    line-height: 1.2;
}

.cr-stat-lbl {
    font-size: 9.5px;
    color: var(--sg-muted);
}

.cr-chart-bottom {
    width: 100%;
    height: 36px;
    margin-top: 8px;
    display: block;
}

.cr-chart-weeks {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--sg-muted);
    padding: 0 2px;
    margin-top: 2px;
}

/* ============================================================
   BLAZOR ERROR UI
   ============================================================ */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: 8px;
    margin: 8px;
}

.blazor-error-boundary::after { content: "An unhandled error has occurred." }

/* Misc */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--sg-success); }
.invalid { outline: 1px solid var(--sg-danger); }
.validation-message { color: var(--sg-danger); }


/* ===== LOGIN CARD ===== */

.login-card {
    max-width: 420px;
    padding: 32px;
    border-radius: 16px;
    background: linear-gradient(var(--sg-panel-overlay-start), var(--sg-panel-overlay-end)), var(--sg-bg-city-image) center/cover no-repeat;
    backdrop-filter: blur(8px);
    border: 1px solid var(--sg-border);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4), inset 0 0 30px rgba(59,130,246,0.06);
}

/* HEADER */

.login-header {
    text-align: center;
    margin-bottom: 20px;
}

    .login-header h3 {
        margin: 0;
    }

    .login-header span {
        font-size: 13px;
        color: var(--sg-muted);
    }

/* ERROR */

.login-error {
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.3);
    color: var(--sg-text);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 16px;
    text-align: center;
}

/* FORM */

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}

    .form-group label {
        font-size: 14px;
        margin-bottom: 6px;
        color: var(--sg-muted);
    }

    .form-group input {
        padding: 12px;
        border-radius: 8px;
        border: 1px solid var(--sg-input-border);
        background: var(--sg-input-bg);
        color: var(--sg-text);
    }

        .form-group input:focus {
            outline: none;
            border-color: #3B82F6;
            box-shadow: 0 0 10px rgba(59,130,246,0.3);
        }

/* BUTTON */

.login-btn {
    width: 100%;
    margin-top: 10px;
}

/* FOOTER */

.login-footer {
    margin-top: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--sg-muted);
}

    .login-footer a {
        color: #3B82F6;
        text-decoration: none;
    }

/* ===== CONTACT FORM FIX ===== */

.contact-form-card {
    max-width: 640px;
    margin: 30px auto 0;
    padding: 30px;
    border-radius: 16px;
    background: linear-gradient(var(--sg-panel-overlay-start), var(--sg-panel-overlay-end)), var(--sg-bg-city-image) center/cover no-repeat;
    backdrop-filter: blur(8px);
    border: 1px solid var(--sg-border);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4), inset 0 0 30px rgba(59,130,246,0.06);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ROWS */

.contact-row {
    display: flex;
    gap: 12px;
}

    .contact-row input {
        flex: 1;
    }

/* INPUTS */

.contact-form-card input,
.contact-form-card textarea {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--sg-input-border);
    background: var(--sg-input-bg);
    color: var(--sg-text);
}

    .contact-form-card input:focus,
    .contact-form-card textarea:focus {
        outline: none;
        border-color: #3B82F6;
        box-shadow: 0 0 10px rgba(59,130,246,0.3);
    }

/* BUTTON */

.contact-submit {
    align-self: flex-end;
    margin-top: 10px;
}

/* members/community shared list styles */
/* Scrollable body inside an .sg-page shape: without min-height:0 a flex-column child
   sizes to its content, overflow:auto never engages, and the page's overflow:hidden
   silently clips everything below the fold (WhatsApp replies queue bug, 25 Jul). */
.sg-page-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.members-page {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    width: 100%;
    padding: var(--sg-card-gap);
    display: flex;
    flex-direction: column;
    gap: var(--sg-card-gap);
    box-sizing: border-box;
    overflow: hidden;
    min-width: 0;
}

.members-page__topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.members-page__eyebrow {
    color: var(--sg-muted-soft);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
    margin-bottom: 8px;
}

.members-page__title {
    margin: 0;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 700;
    color: var(--sg-heading);
}

.members-page__subtitle {
    margin: 8px 0 0;
    color: var(--sg-subtext);
    font-size: 15px;
    max-width: 760px;
}

.members-page__topbar-actions,
.members-card__header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.members-page__chips {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
}

.members-chip {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    height: 48px;
    min-width: 130px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid var(--sg-border);
    background: linear-gradient(var(--sg-panel-overlay-start), var(--sg-panel-overlay-end));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 48px rgba(0,0,0,0.22);
}

.members-chip__label {
    display: inline-block;
    margin: 0;
    color: var(--sg-muted-soft);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}

.members-chip strong {
    font-size: 22px;
    line-height: 1;
    color: var(--sg-heading);
}

.members-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    max-height: 100%;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--sg-border);
    background:
        linear-gradient(var(--sg-panel-overlay-start), var(--sg-panel-overlay-end)),
        var(--sg-bg-city-image) center/cover no-repeat;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 20px 48px rgba(0,0,0,0.28);
    backdrop-filter: blur(8px);
}

.members-card--empty,
.members-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    color: var(--sg-muted-soft);
}

.members-card__header {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--sg-border);
}

.members-card__header h2 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: var(--sg-heading);
}

.members-card__header p {
    margin: 0;
    color: var(--sg-muted-soft);
    font-size: 14px;
}

.members-clear-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid rgba(96,165,250,0.45);
    color: #e0f2fe;
    background: linear-gradient(180deg, rgba(59,130,246,0.78), rgba(37,99,235,0.72));
    font-size: 14px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.members-clear-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(37,99,235,0.24);
    color: var(--sg-heading);
}

.members-filters {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 18px 22px 20px;
    border-bottom: 1px solid var(--sg-border);
}

.members-filter--actions {
    align-self: end;
    display: flex;
    justify-content: flex-end;
}

.members-filters--cross-tenant {
    grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(0, 1fr));
}

.members-filters--3col {
    grid-template-columns: minmax(240px, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
}

.members-filter {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.members-filter span {
    color: var(--sg-muted-soft);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.members-filter input,
.members-filter select {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,0.24);
    background: var(--sg-card);
    color: var(--sg-heading);
    outline: none;
}

.members-filter input:focus,
.members-filter select:focus {
    border-color: rgba(96,165,250,0.72);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
}

.members-input-wrap {
    position: relative;
}

.members-input-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sg-muted-soft);
}

.members-filter--search input {
    padding-left: 40px;
}

.members-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
}

.members-table {
    width: 100%;
    border-collapse: collapse;
}

.members-table th,
.members-table td {
    padding: 16px 22px;
    border-bottom: 1px solid var(--sg-border);
    text-align: left;
}

.members-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(8,15,30,0.96);
    color: rgba(226,232,240,0.68);
    font-size: 13px;
    font-weight: 500;
}

.members-table td {
    color: var(--sg-text);
    font-size: 15px;
}

.members-table tbody tr:last-child td {
    border-bottom: none;
}

.members-table__row--pending {
    background: rgba(245,158,11,0.08);
}

.members-table__name {
    font-weight: 600;
    color: var(--sg-heading);
}

.members-table__suburb {
    color: rgba(191,219,254,0.92);
}

.members-table__action {
    text-align: right;
}

.members-role-pill,
.members-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1;
    border: 1px solid transparent;
}

.members-role-pill {
    color: var(--sg-accent);
    background: rgba(59,130,246,0.24);
    border-color: rgba(96,165,250,0.32);
}

.members-status--active {
    color: var(--sg-ok-text);
    background: rgba(34,197,94,0.28);
    border-color: rgba(74,222,128,0.38);
}

.members-status--pending {
    color: var(--sg-warn-text);
    background: rgba(245,158,11,0.22);
    border-color: rgba(251,191,36,0.34);
}

@media (max-width: 1200px) {
    .members-page__topbar,
    .members-card__header {
        flex-direction: column;
    }

    .members-filters,
    .members-filters--cross-tenant {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 840px) {
    .members-page {
        padding: 6px;
    }

    .members-card__header-actions {
        justify-content: flex-start;
    }

    .members-filters,
    .members-filters--cross-tenant {
        grid-template-columns: 1fr;
    }

    .members-table th,
    .members-table td {
        padding: 14px 16px;
    }
}


.members-table__row--clickable { cursor: pointer; }
.members-table__row--clickable:hover td { background: color-mix(in srgb, var(--sg-accent) 8%, transparent); }

/* -- Star Rating -- */
.sg-stars { display: inline-flex; align-items: center; gap: 2px; }
.sg-stars i { color: #f59e0b; }
.sg-stars--sm i { font-size: 12px; }
.sg-stars--md i { font-size: 15px; }
.sg-stars--lg i { font-size: 20px; }
.sg-stars__label { margin-left: 6px; font-size: 13px; color: var(--sg-text); font-weight: 600; }
.sg-stars__count { font-weight: 400; color: var(--sg-muted-soft); }
.sg-stars__label--unrated { font-weight: 400; color: var(--sg-muted-soft); font-size: 12px; }
.sg-stars__false-alarm { margin-left: 8px; font-size: 12px; color: #f59e0b; font-weight: 600; }


/* Community page - pending bell + row action buttons */
.community-pending-bell {
    position: relative;
    background: none;
    border: 1px solid rgba(250,204,21,0.45);
    border-radius: 10px;
    color: var(--sg-warn-text);
    font-size: 18px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
    margin-right: 4px;
}
.community-pending-bell:hover {
    color: var(--sg-warn-text);
    border-color: rgba(250,204,21,0.7);
    box-shadow: 0 0 0 4px rgba(250,204,21,0.12);
}
.community-pending-bell__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

/* Community stats bar — lives inside the card, above the table */
.community-stats-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px 22px;
    border-bottom: 1px solid var(--sg-border);
    flex-shrink: 0;
}
.community-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 18px 0 0;
}
.community-stat--sep {
    width: 1px;
    height: 28px;
    background: var(--sg-input-bg);
    margin: 0 18px 0 0;
    padding: 0;
    flex-direction: row;
}
.community-stat__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sg-muted-soft);
    line-height: 1;
}
.community-stat__val {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--sg-heading);
}
.community-stat__val--active  { color: var(--sg-online-text); }
.community-stat__val--pending { color: var(--sg-warn-text); }

[data-sg-theme="light"] .community-stats-bar { border-bottom-color: var(--sg-border); }
[data-sg-theme="light"] .community-stat--sep  { background: var(--sg-border); }
[data-sg-theme="light"] .community-stat__val  { color: var(--sg-text); }

.community-row-actions { display: inline-flex; gap: 8px; justify-content: flex-end; }
.community-action-button { min-width: 110px; }
.community-action-button--approve { border-color: rgba(34,197,94,0.55); background: linear-gradient(180deg, rgba(34,197,94,0.85), rgba(22,163,74,0.78)); }
.community-action-button--approve:hover { box-shadow: 0 10px 20px rgba(22,163,74,0.28); }
.community-action-button--decline { border-color: rgba(248,113,113,0.55); background: linear-gradient(180deg, rgba(239,68,68,0.85), rgba(220,38,38,0.78)); }
.community-action-button--decline:hover { box-shadow: 0 10px 20px rgba(220,38,38,0.28); }

/* ── Topbar action buttons — consistent height/padding across ALL page headers ── */
.members-page__topbar-actions .btn,
.members-page__topbar-actions .sg-btn,
.app-page-header__actions .btn,
.app-page-header__actions .sg-btn,
.admin-dashboard__topbar-actions .btn,
.admin-dashboard__topbar-actions .sg-btn {
    height: 38px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 500;
}
.members-page__topbar-actions .btn-primary { height: 38px; padding: 0 16px; display: inline-flex; align-items: center; }

/* ============================================================
   GLOBAL UTILITY — sg-btn, sg-input, sg-form-row, sg-modal,
   sg-badge, ngz-card  (used across multiple pages)
   ============================================================ */

/* ── Buttons ─────────────────────────────────────────────── */
.sg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    height: 36px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    text-decoration: none;
}
.sg-btn--primary { background: var(--sg-accent); color: #fff; border-color: var(--sg-accent); }
.sg-btn--primary:hover { background: color-mix(in srgb, var(--sg-btn-bg) 88%, white); box-shadow: 0 4px 12px color-mix(in srgb, var(--sg-btn-bg) 35%, transparent); }
.sg-btn--ghost { background: transparent; color: var(--sg-text); border-color: var(--sg-border); }
.sg-btn--ghost:hover { background: var(--sg-card); }
.sg-btn--danger { color: var(--sg-danger) !important; border-color: rgba(239,68,68,.4) !important; }
.sg-btn--danger:hover { background: rgba(239,68,68,.12) !important; }
.sg-btn--sm { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 6px; }

/* ── Inputs ──────────────────────────────────────────────── */
.sg-input {
    width: 100%;
    background: var(--sg-panel);
    border: 1px solid var(--sg-border);
    border-radius: 8px;
    color: var(--sg-text);
    font-size: 13px;
    padding: 8px 12px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.sg-input:focus { border-color: var(--sg-accent); box-shadow: 0 0 0 2px rgba(59,130,246,.18); }
.sg-input::placeholder { color: var(--sg-muted); }
textarea.sg-input { resize: vertical; min-height: 64px; }
select.sg-input { appearance: auto; }
input[type="checkbox"].sg-input { width: auto; height: auto; accent-color: var(--sg-accent); }

/* ── Form rows ───────────────────────────────────────────── */
.sg-form-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.sg-form-row label,
.sg-form-label {
    flex-shrink: 0;
    width: 150px;
    font-size: 13px;
    color: var(--sg-muted);
    text-align: right;
}
.sg-form-row > .sg-input,
.sg-form-row > .form-control,
.sg-form-row > .form-select,
.sg-form-row > textarea,
.sg-form-row > div { flex: 1; }

/* Meeting file gallery */
.meeting-files-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}
.meeting-file-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border-radius: 10px;
    background: var(--sg-card);
    border: 1px solid var(--sg-border);
    text-decoration: none;
    color: var(--sg-text);
    transition: background .15s;
    overflow: hidden;
}
.meeting-file-thumb:hover { background: color-mix(in srgb, var(--sg-accent) 10%, transparent); border-color: color-mix(in srgb, var(--sg-accent) 40%, transparent); }
.meeting-file-thumb__img { width: 100%; height: 80px; object-fit: cover; border-radius: 6px; }
.meeting-file-thumb__icon { font-size: 36px; height: 80px; display: flex; align-items: center; justify-content: center; color: var(--sg-accent); }
.meeting-file-thumb__name { font-size: 11px; text-align: center; word-break: break-all; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meeting-file-thumb__date { font-size: 10px; color: var(--sg-muted); }

/* ── Modal ───────────────────────────────────────────────── */
.sg-modal-backdrop,
.sg-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sg-modal {
    background: var(--sg-card);
    border: 1px solid var(--sg-border);
    border-radius: 10px;   /* squarer (Jeremy) */
    width: clamp(340px, 90vw, 560px);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.sg-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px 0;
}
.sg-modal__header h3 { font-size: 16px; color: var(--sg-text); margin: 0; }
.sg-modal__close {
    background: transparent;
    border: none;
    color: var(--sg-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.sg-modal__close:hover { color: var(--sg-text); }
.sg-modal__body { padding: 20px 22px; }
.sg-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid var(--sg-border);
}

/* ── SgModal shell sizes (one shared shell for ALL entity modals) ── */
.sg-modal--sm   { width: min(480px, 94vw) !important; max-width: min(480px, 94vw) !important; }
.sg-modal--xl   { width: min(960px, 96vw) !important; max-width: min(960px, 96vw) !important; }
.sg-modal--full {
    width: 96vw !important; max-width: 96vw !important;
    height: 94vh; max-height: 94vh !important;
}
/* Structured shell: header/footer fixed, ONLY the body scrolls */
.sg-modal--shell {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 90vh;
}
/* INVERSE header bar (Jeremy: popups too grey/dull) — bright accent gradient,
   white title, buttons pop. Applies to EVERY SgModal app-wide. */
.sg-modal--shell > .sg-modal__header {
    flex-shrink: 0;
    padding: 14px 22px;
    border-bottom: 1px solid rgba(96,165,250,0.45);
    background: linear-gradient(105deg, #1d4ed8 0%, #2563eb 55%, #0e7490 100%);
}
.sg-modal--shell > .sg-modal__header h3 {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.sg-modal--shell > .sg-modal__header .sg-modal__close {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    /* translucent, NOT var(--sg-input-bg): light brand palettes make that near-white,
       which rendered a white square with a white x on the gradient header */
    background: rgba(255,255,255,0.14);
    color: #ffffff;
    font-size: 15px;
}
.sg-modal--shell > .sg-modal__header .sg-modal__close:hover {
    background: #ef4444;
    color: #ffffff;
}
/* Header action buttons must CONTRAST on the bright bar */
.sg-modal--shell > .sg-modal__header .sg-btn--primary {
    background: #ffffff;
    color: #1d4ed8;
    border-color: #ffffff;
    font-weight: 700;
}
.sg-modal--shell > .sg-modal__header .sg-btn--primary:hover {
    background: #e0ecff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.sg-modal--shell > .sg-modal__header .sg-btn--ghost {
    color: #ffffff;
    border-color: rgba(255,255,255,0.55);
    /* translucent, NOT var(--sg-card): on light-branded orgs the card var is white,
       which rendered a white pill with white text on the gradient header */
    background: rgba(255,255,255,0.14);
}
.sg-modal--shell > .sg-modal__header .sg-btn--ghost:hover { background: rgba(255,255,255,0.26); }
/* Destructive header action on the gradient header. This rule only recoloured the TEXT, so a
   plain --danger button kept the base button background and rendered as a washed-out pill on the
   blue (Jeremy, 9 Sep 2026). Giving it the same translucent fill --ghost gets means a header
   danger button looks right whether or not --ghost is also applied — fixed at the rule so the
   three call sites (Log Book planned patrol, Community, Members) cannot each get it wrong. */
.sg-modal--shell > .sg-modal__header .sg-btn--danger {
    color: #ffd9d9 !important;
    border-color: rgba(255,217,217,0.7) !important;
    background: rgba(255,120,120,0.16) !important;
}
.sg-modal--shell > .sg-modal__header .sg-btn--danger:hover {
    background: rgba(255,120,120,0.28) !important;
}
.sg-modal--shell > .sg-modal__header .sg-modal__back {
    border-color: rgba(255,255,255,0.45);
    background: var(--sg-input-bg);
    color: #ffffff;
}
.sg-modal__header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sg-modal--shell > .sg-modal__body   { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sg-modal--shell > .sg-modal__footer { flex-shrink: 0; }
.sg-modal__title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sg-modal__title-row h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-modal__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--sg-border);
    background: var(--sg-card);
    color: var(--sg-text);
    cursor: pointer;
    flex-shrink: 0;
}
.sg-modal__back:hover { background: var(--sg-input-bg); }

/* ── Emergency-contact CRUD modal: compact two-column form ── */
.ec-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}
.ec-form-grid .ec-form-field {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin: 0;
}
/* The stacked-label variant must UNDO the horizontal row's label column. `.sg-form-row label`
   is a fixed 150px right-aligned gutter (right for a label-beside-input row); left in place when
   ec-form-field stacks the label ABOVE the input it reads as centred, and any label longer than
   150px wraps. Reported 9 Sep 2026 ("weirdly aligned captions for all fields", "Seats (including
   the driver)" on two lines). This fixes every direct-edit modal using the pattern, not one page. */
.ec-form-grid .ec-form-field > label,
.ec-form-grid .ec-form-field > .sg-form-label {
    width: auto;
    text-align: left;
    white-space: nowrap;
}
.ec-form-grid .ec-form-field--wide { grid-column: 1 / -1; }
.ec-form-grid .ec-form-field--checks {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}
.sg-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--sg-border);
}

/* ── Badges ──────────────────────────────────────────────── */
.sg-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.sg-badge--green  { background: rgba(16,185,129,.18);  color: var(--sg-ok-text); }
.sg-badge--red    { background: rgba(239,68,68,.18);   color: var(--sg-err-text); }
.sg-badge--yellow { background: rgba(245,158,11,.18);  color: var(--sg-warn-text); }
.sg-badge--amber  { background: rgba(245,158,11,.18);  color: var(--sg-warn-text); }
.sg-badge--danger { background: rgba(239,68,68,.18);   color: var(--sg-err-text); }
.sg-badge--muted  { background: rgba(156,163,175,.12); color: var(--sg-muted); }
.sg-badge--blue   { background: rgba(59,130,246,.18);  color: var(--sg-accent); }
.sg-badge--orange { background: rgba(234,88,12,.18);   color: var(--sg-orange-text); }
.sg-badge--purple { background: rgba(168,85,247,.18);  color: var(--sg-purple-text); }

/* Badges inside the modal header sit on the blue gradient in BOTH themes — use
   header-friendly white-tinted pills there, never the theme text colours. */
.sg-modal__header .sg-badge { background: rgba(255,255,255,0.16) !important; border: 1px solid rgba(255,255,255,0.35); }
.sg-modal__header .sg-badge--green  { color: #BBF7D0 !important; }
.sg-modal__header .sg-badge--red    { color: #FECACA !important; }
.sg-modal__header .sg-badge--orange { color: #FED7AA !important; }
.sg-modal__header .sg-badge--blue   { color: #BFDBFE !important; }

/* Light theme: the badge tints above are dark-theme colours — darken text for contrast */
[data-sg-theme="light"] .sg-badge--green  { color: #047857; }
[data-sg-theme="light"] .sg-badge--red    { color: #B91C1C; }
[data-sg-theme="light"] .sg-badge--yellow { color: #B45309; }
[data-sg-theme="light"] .sg-badge--amber  { color: #B45309; }
[data-sg-theme="light"] .sg-badge--danger { color: #B91C1C; }
[data-sg-theme="light"] .sg-badge--blue   { color: #1D4ED8; }
[data-sg-theme="light"] .sg-badge--orange { color: #C2410C; }
[data-sg-theme="light"] .sg-badge--purple { color: #7E22CE; }

/* ── No-Go Zone cards ────────────────────────────────────── */
.ngz-card {
    background: var(--sg-card);
    border: 1px solid var(--sg-border);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-align: left;
    width: 100%;
}
.ngz-card:hover { background: var(--sg-card); }
.ngz-card--selected { border-color: var(--sg-accent); background: rgba(59,130,246,.06); }
.ngz-card__header { display: flex; gap: 6px; margin-bottom: 6px; }
.ngz-card__name { font-size: 14px; font-weight: 600; color: var(--sg-text); }
.ngz-card__desc { font-size: 12px; color: var(--sg-muted); margin: 3px 0 8px; }
.ngz-card__actions { display: flex; gap: 8px; }

/* ─── Meetings page ────────────────────────────────────────────── */
.meetings-page.sg-page {
    display: flex;
    flex-direction: column;
    gap: var(--sg-gap);
    overflow: hidden;
    height: 100%;
}

.meetings-layout {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--sg-gap);
    min-height: 0;
}

.meetings-list-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.meetings-list-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.meetings-list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--sg-border);
    cursor: pointer;
    transition: background 0.12s;
}

.meetings-list-item:hover        { background: var(--sg-card); }
.meetings-list-item--active      { background: color-mix(in srgb, var(--sg-accent) 10%, transparent) !important; border-left: 3px solid var(--sg-accent); }

.meetings-list-item__status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.meetings-list-item__body { flex: 1; min-width: 0; }
.meetings-list-item__title { font-size: 14px; font-weight: 600; color: var(--sg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meetings-list-item__meta  { font-size: 12px; color: var(--sg-muted); margin-top: 2px; }

.meetings-dot--scheduled { background: #60a5fa; }
.meetings-dot--completed { background: #4ade80; }
.meetings-dot--cancelled { background: #ef4444; }

.meetings-detail-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.meetings-detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 22px;
}

.meetings-detail-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--sg-muted);
    font-size: 15px;
}

.meetings-attendance-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.meetings-attendance-table th,
.meetings-attendance-table td { padding: 8px 12px; border-bottom: 1px solid var(--sg-border); text-align: left; }
.meetings-attendance-table th { color: var(--sg-muted); font-weight: 500; }

.meetings-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px 12px;
    border-bottom: 1px solid var(--sg-border);
    flex-shrink: 0;
}

.meetings-detail-header h2 { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: var(--sg-text); }

/* ─── Incident / detail tabs (shared) ─────────────────────────── */
.inc-detail-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 22px 0;
    border-bottom: 1px solid var(--sg-border);
    flex-shrink: 0;
}

.inc-detail-tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--sg-muted);
    font-size: 13px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.inc-detail-tab:hover { color: var(--sg-text); }
.inc-detail-tab--active { color: var(--sg-accent); border-bottom-color: var(--sg-accent); }

.inc-detail-tab-badge {
    background: rgba(96,165,250,0.2);
    color: var(--sg-accent);
    border-radius: 10px;
    font-size: 11px;
    padding: 1px 6px;
    font-weight: 600;
}

/* ─── Incident Detail page ────────────────────────────────────── */
.inc-detail-page.sg-page { display: flex; flex-direction: column; gap: 0; overflow: hidden; height: 100%; }
/* Container-agnostic incident view — fills whatever frame hosts it (modal body / pane) */
.inc-detail-view { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
.inc-detail-actions { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 10px; flex-shrink: 0; }

.inc-detail-topbar { flex-shrink: 0; }
.inc-detail-back { color: var(--sg-accent); font-size: 13px; text-decoration: none; }
.inc-detail-back:hover { text-decoration: underline; }
.inc-detail-ref { font-size: 16px; background: rgba(96,165,250,0.12); color: var(--sg-accent); padding: 2px 8px; border-radius: 6px; font-family: monospace; }
.inc-detail-loading { display: flex; gap: 10px; align-items: center; padding: 40px; color: var(--sg-muted); }
.inc-detail-not-found { display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 60px; color: var(--sg-muted); }

.inc-detail-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; letter-spacing: .03em; }
.inc-detail-badge--severity.inc-detail-badge--critical { background: rgba(239,68,68,.18); color: var(--sg-err-text); border: 1px solid rgba(239,68,68,.3); }
.inc-detail-badge--severity.inc-detail-badge--high     { background: rgba(245,158,11,.18); color: var(--sg-warn-text); border: 1px solid rgba(245,158,11,.3); }
.inc-detail-badge--severity.inc-detail-badge--medium   { background: rgba(59,130,246,.18); color: var(--sg-accent); border: 1px solid rgba(59,130,246,.3); }
.inc-detail-badge--severity.inc-detail-badge--low      { background: rgba(100,116,139,.18); color: var(--sg-subtext); border: 1px solid rgba(100,116,139,.3); }
.inc-detail-badge--status  { background: rgba(96,165,250,.14); color: var(--sg-accent); border: 1px solid rgba(96,165,250,.25); }
.inc-detail-badge--escalated { background: rgba(239,68,68,.14); color: var(--sg-err-text); border: 1px solid rgba(239,68,68,.25); }
.inc-detail-actions-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inc-detail-card__title { font-size: 13px; font-weight: 600; color: var(--sg-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }

/* Type strip */
.inc-type-strip { display: flex; align-items: center; gap: 16px; padding: 14px 22px; border-radius: 14px; margin-bottom: 14px; }
.inc-type-strip--theft        { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.25); }
.inc-type-strip--vandalism    { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.25); }
.inc-type-strip--trespassing  { background: rgba(168,85,247,.12); border: 1px solid rgba(168,85,247,.25); }
.inc-type-strip--assault      { background: rgba(239,68,68,.18); border: 1px solid rgba(239,68,68,.38); }
.inc-type-strip--other        { background: rgba(100,116,139,.12); border: 1px solid rgba(100,116,139,.25); }
.inc-type-strip__icon  { font-size: 28px; }
.inc-type-strip__body  { flex: 1; }
.inc-type-strip__type  { font-size: 16px; font-weight: 700; color: var(--sg-text); }
.inc-type-strip__cat   { font-size: 12px; color: var(--sg-muted); }
.inc-type-strip__pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* Pills */
.inc-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; }
.inc-pill--status { background: rgba(96,165,250,.15); color: var(--sg-accent); }
.inc-pill--severity-critical { background: rgba(239,68,68,.2); color: var(--sg-err-text); }
.inc-pill--severity-high     { background: rgba(245,158,11,.2); color: var(--sg-warn-text); }
.inc-pill--severity-medium   { background: rgba(59,130,246,.18); color: var(--sg-accent); }
.inc-pill--severity-low      { background: rgba(100,116,139,.2); color: var(--sg-subtext); }
.inc-pill--risk-critical { background: rgba(239,68,68,.2); color: var(--sg-err-text); }
.inc-pill--risk-high     { background: rgba(245,158,11,.2); color: var(--sg-warn-text); }
.inc-pill--risk-medium   { background: rgba(59,130,246,.18); color: var(--sg-accent); }
.inc-pill--risk-low      { background: rgba(100,116,139,.2); color: var(--sg-subtext); }

/* Address / description */
.inc-address { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--sg-muted); margin-bottom: 8px; }
.inc-description { font-size: 14px; color: var(--sg-text); line-height: 1.55; }

/* Feed / notes */
.inc-feed { display: flex; flex-direction: column; gap: 14px; padding: 2px 0; }
.inc-feed-item { display: flex; gap: 12px; }
.inc-feed-item__body { flex: 1; padding: 12px 16px; border-radius: 12px; background: var(--sg-card); border: 1px solid var(--sg-border); }
.inc-feed-item__internal .inc-feed-item__body { background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.2); }
.inc-feed-item__head { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 12px; }
.inc-feed-item__time { color: var(--sg-muted); }
.inc-internal-label { font-size: 11px; color: var(--sg-warn-text); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.inc-note-add { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.inc-empty-mini { text-align: center; padding: 28px; color: var(--sg-muted); font-size: 13px; }

/* Incidents page — body date-filter row (kept out of the crowded topbar) */
.inc-date-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 2px 4px; }
.inc-date-filter__label { font-size: 12px; font-weight: 600; color: var(--sg-muted); }

/* Gallery */
.inc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
/* Each tile is its own SQUARE. Grid rows otherwise size to the tallest item, so one portrait CCTV
   crop stretched the whole row and every wide photo beside it was centre-cropped into a vertical
   sliver — a van's signage rendered as two letters (Jeremy, 9 Sep 2026). The tile owns the shape;
   the image just fills it. */
.inc-gallery-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--sg-border);
}
.inc-gallery-item img,
.inc-gallery-item > a { width: 100%; height: 100%; display: block; }
.inc-gallery-item img { object-fit: cover; }

/* WhatsApp media strip — MUST be global: IncidentDetailView is also shown inside the IncidentModal,
   where the page-scoped IncidentDetail.razor.css rules don't apply (that left WA images full-size). */
.inc-wa-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.inc-wa-img { height: 90px; width: auto; max-width: 140px; object-fit: cover; border-radius: 8px;
    border: 1px solid var(--sg-border); cursor: pointer; }
.inc-wa-audio { display: flex; align-items: center; gap: 8px; margin-top: 6px; max-width: 360px; }

/* Suspect row */
.inc-suspect-row { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--sg-border); }
.inc-suspect-row__face { width: 48px; height: 48px; border-radius: 50%; background: rgba(96,165,250,.15); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.inc-suspect-row__body { flex: 1; }
.inc-suspect-row__name { font-size: 14px; font-weight: 600; color: var(--sg-text); }
.inc-suspect-row__meta { font-size: 12px; color: var(--sg-muted); margin-top: 2px; }
.inc-suspect-desc { font-size: 13px; color: var(--sg-muted); line-height: 1.5; }
.inc-suspect-more { font-size: 12px; color: var(--sg-accent); text-decoration: none; cursor: pointer; }

/* Responder grid */
.inc-responder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.inc-responder-tile { padding: 10px 14px; border-radius: 10px; background: var(--sg-card); border: 1px solid var(--sg-border); font-size: 13px; }

/* Document grid */
.inc-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.inc-doc-tile { padding: 10px 14px; border-radius: 10px; background: var(--sg-card); border: 1px solid var(--sg-border); font-size: 12px; }
.inc-doc-tile__name { font-weight: 600; color: var(--sg-text); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inc-doc-tile__date { color: var(--sg-muted); }

/* AI banner */
.inc-ai-banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: 12px; background: rgba(139,92,246,.1); border: 1px solid rgba(139,92,246,.25); }
.inc-ai-banner__icon { font-size: 22px; flex-shrink: 0; color: var(--sg-purple-text); }
.inc-ai-banner__text { flex: 1; font-size: 13px; color: var(--sg-muted); line-height: 1.55; }
.inc-ai-badge { background: rgba(139,92,246,.2) !important; color: #c4b5fd !important; border: none; }

/* Dashboard lower section */
.inc-dash { display: flex; flex-direction: column; gap: 0; flex: 1 1 auto; min-height: 0; }
.inc-dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sg-gap); }
.inc-dash-col { display: flex; flex-direction: column; gap: var(--sg-gap); }
.inc-dash-col--feed { flex: 2; }

/* Two-column rows: top (summary | map) auto height; mid (suspect | photos) fills the gap.
   align-items:stretch (grid default) keeps both cards in a row the SAME height.
   Vertical separation uses margin-bottom (not the parent's flex gap) so it's reliable. */
.inc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; min-height: 340px; flex: 0 0 auto; }
.inc-row--mid { flex: 1 1 0; min-height: 140px; }
.inc-row > .members-card { display: flex; flex-direction: column; min-height: 0; }
.inc-loc-card .inc-map { flex: 1 1 auto; min-height: 200px; }

.inc-dash-bottom { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.inc-dash-bottom-body {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto;
    margin-top: 12px;          /* gap between tab strip and its card */
    padding: 16px 18px;        /* nothing touches the card edges */
}

/* ── Incident glance card: panic banner, reporter, stepper, actions, ticker ── */
.inc-panic-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: rgba(220, 38, 38, 0.16);
    border: 1px solid rgba(239, 68, 68, 0.55);
    color: var(--sg-err-text);
    font-size: 13px;
    animation: wtPulse 1.2s infinite;
}
.inc-panic-banner i { font-size: 18px; color: #ef4444; }

/* TRAINING DRILL banner — amber, no pulse (deliberate exercise, not an alarm) */
.inc-drill-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: rgba(217, 119, 6, 0.14);
    border: 1px solid rgba(217, 119, 6, 0.55);
    color: #b45309;
    font-size: 13px;
    font-weight: 600;
}
.inc-drill-banner i { font-size: 18px; color: #d97706; }

/* ── Radio clip player (incident Radio tab + situation room) — mobile-style waveform ── */
.sg-radioclip {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.sg-radioclip__btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--sg-accent, #2563eb);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sg-radioclip__wave {
    flex: 1;
    min-width: 0;
    height: 34px;
    display: block;
}
.sg-radioclip__time {
    font-size: 11.5px;
    color: var(--sg-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Small amber chip for list rows / popups */
.inc-drill-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(217, 119, 6, 0.16);
    border: 1px solid rgba(217, 119, 6, 0.5);
    color: #b45309;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .05em;
    white-space: nowrap;
}

.inc-reporter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 14.5px;
    color: var(--sg-muted);
    margin-top: 7px;
}
.inc-reporter__actions { display: inline-flex; gap: 6px; }
.inc-contact-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; text-decoration: none;
}
.inc-contact-btn--call { background: rgba(34,197,94,0.16);  color: var(--sg-online-text); }
.inc-contact-btn--wa   { background: rgba(37,211,102,0.12); color: #25d366; }
.inc-contact-btn:hover { filter: brightness(1.3); }

.inc-stepper {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--sg-card);
    border: 1px solid var(--sg-border);
}
.inc-step { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: center; }
/* Timestamp wraps to a second line, centered under the dot + label. */
.inc-step__time { flex-basis: 100%; text-align: center; font-size: 10px; color: var(--sg-muted); line-height: 1.2; }
.inc-step--done .inc-step__time { color: var(--sg-online-text); }
.inc-step__dot {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid var(--sg-border);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; line-height: 1;
    color: #0f172a;
    flex-shrink: 0;
}
.inc-step__label { font-size: 11px; color: var(--sg-muted); white-space: nowrap; }
.inc-step--done .inc-step__dot { background: #22c55e; border-color: #22c55e; }
.inc-step--done .inc-step__label { color: var(--sg-online-text); }
.inc-step--current .inc-step__dot { border-color: var(--sg-accent); box-shadow: 0 0 0 3px rgba(59,130,246,0.25); }
.inc-step--current .inc-step__label { color: var(--sg-accent); font-weight: 700; }
.inc-step__bar { flex: 1 1 8px; min-width: 8px; height: 2px; background: var(--sg-input-bg); }
.inc-step__bar--done { background: #22c55e; }

.inc-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}
/* The glance card scrolls ITSELF (overflow-y:auto above). When its content is taller than the
   viewport the action row used to scroll away with it — the buttons "gone" below the fold
   (Jeremy, 12 Sep 2026, again: "do not let the bottom buttons move down"). Sticky to the bottom of
   the scrolling card: always visible, content scrolls underneath. */
.inc-dash--cols > .inc-glance--col .inc-action-row {
    position: sticky;
    bottom: -18px;                 /* the card's own bottom padding */
    margin-bottom: -18px;
    padding-bottom: 18px;
    background: var(--sg-card, #162036);
    z-index: 3;
}
.inc-next-action {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 22px;
    border-radius: 10px;
    border: none;
    background: var(--sg-accent, #3b82f6);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.inc-next-action:hover { filter: brightness(1.12); }
.inc-next-action:disabled { opacity: .6; cursor: default; }
.inc-quick-btn {
    display: inline-flex; align-items: center;
    padding: 7px 13px;
    border-radius: 9px;
    border: 1px solid var(--sg-border);
    background: var(--sg-card);
    color: var(--sg-text);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.inc-quick-btn:hover { background: var(--sg-card); color: var(--sg-text); }
.inc-quick-btn--active { background: rgba(37,99,235,0.35); border-color: rgba(96,165,250,0.6); color: #fff; }

/* People cards: the reporter and responders are PEOPLE you can ring */
.inc-people {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

/* Inline "link this WhatsApp sender to a member" picker (LID senders have no number) */
.inc-link-reporter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    margin: -2px 0 4px;
    border: 1px dashed var(--sg-border, rgba(148,163,184,.4));
    border-radius: 10px;
    background: rgba(59,130,246,.06);
}
.inc-link-reporter__hint { font-size: 12px; color: var(--sg-muted); }
.inc-link-reporter__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inc-link-reporter__row .inc-input { flex: 1 1 220px; min-width: 180px; }
.inc-link-reporter__err { font-size: 12px; color: var(--sg-err-text); }
.inc-person-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid var(--sg-border);
    background: var(--sg-card);
}
.inc-person-card__photo {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.inc-person-card__photo--initial {
    display: flex; align-items: center; justify-content: center;
    background: rgba(96,165,250,0.15);
    color: var(--sg-accent);
    font-weight: 700;
    font-size: 16px;
}
.inc-person-card__body { flex: 1 1 auto; min-width: 0; }
.inc-person-card__name {
    font-size: 13.5px; font-weight: 700; color: var(--sg-text);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.inc-person-card__meta {
    font-size: 12px; color: var(--sg-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inc-person-card__tag {
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    padding: 2px 7px; border-radius: 999px;
}
.inc-person-card__tag--reporter  { background: rgba(96,165,250,0.16); color: var(--sg-accent); }
.inc-person-card__tag--responder { background: rgba(34,197,94,0.16);  color: var(--sg-online-text); }
.inc-person-card__actions { display: inline-flex; gap: 6px; flex-shrink: 0; }

.inc-ticker {
    margin-top: auto;            /* pin to the card bottom — fills the dead space */
    padding-top: 14px;
}
/* "view all" rendered as a <button> — strip the browser chrome so it looks like our links */
button.inc-card__link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 11px;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}
.inc-ticker__head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--sg-muted);
    border-top: 1px solid var(--sg-border);
    padding-top: 12px;
    margin-bottom: 8px;
}
.inc-ticker__row { display: flex; gap: 10px; font-size: 12px; padding: 3px 0; min-width: 0; }
.inc-ticker__time { color: var(--sg-muted); flex-shrink: 0; font-family: ui-monospace, monospace; font-size: 11px; }
.inc-ticker__text { color: var(--sg-subtext); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inc-ticker__empty { font-size: 12px; color: var(--sg-muted); }

/* ── Two-column incident detail: glance 40% | tabbed evidence 60% (Map = first tab) ── */
.inc-dash--cols { flex-direction: row; gap: 18px; align-items: stretch; }
.inc-dash--cols > .inc-glance--col {
    /* 46/54 split (was 40/60) — the action-button row needs the extra x-space to fit on
       one line; the map card gives it up (Jeremy, 26 Jul). */
    flex: 0 0 46%;
    max-width: 46%;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;          /* the left card scrolls itself; page never does */
    display: flex;
    flex-direction: column;
}
.inc-dash--cols > .inc-dash-bottom--col { flex: 1 1 54%; min-width: 0; }
/* Map tab: body stops scrolling and the map flex-fills the card instead */
.inc-dash-bottom-body--fill { display: flex; flex-direction: column; overflow: hidden; }
.inc-tab-map { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.inc-tab-map .inc-map { flex: 1 1 auto; min-height: 240px; }
@media (max-width: 1100px) {
    .inc-dash--cols { flex-direction: column; }
    .inc-dash--cols > .inc-glance--col { flex: 0 0 auto; max-width: none; overflow-y: visible; }
}
/* Spacing standard: card content never touches card edges */
.inc-loc-card { padding: 16px 18px; }
.inc-loc-card .inc-map { margin-top: 8px; }
.inc-address { margin-bottom: 4px; }
.inc-dash-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--sg-border); margin-bottom: 0; padding: 0 4px; align-items: stretch; }
/* Top-aligned column so the LABEL of every tab sits on the same line regardless of whether a
   "has content" dot is present — the dot hangs below without shifting the word (no zig-zag). */
.inc-dash-tab { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 8px 12px; border: none; background: transparent; color: var(--sg-muted); font-size: 13px; font-weight: 500; line-height: 1.15; text-align: center; border-bottom: 2px solid transparent; cursor: pointer; }
.inc-dash-tab--active { color: var(--sg-accent); border-bottom-color: var(--sg-accent); }

/* Misc */
.inc-map { border-radius: 12px; overflow: hidden; flex: 1 1 auto; min-height: 200px; }
.inc-bottom-row { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; gap: var(--sg-gap); }

/* ── Direct-edit fields (modal anatomy standard: the record IS the form) ── */
.inc-edit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
}
.inc-edit-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
.inc-edit-field > span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sg-muted);
}
.inc-edit-field--wide { grid-column: 1 / -1; }
.inc-address-input { margin-bottom: 8px; }
/* Locked (record closed): readonly styling — full-contrast text, no input chrome.
   NOT the grey disabled look; the values must stay as readable as plain text. */
.inc-input--locked,
.inc-input--locked:focus {
    background: transparent !important;
    border-color: var(--sg-border) !important;
    border-style: dashed !important;
    color: var(--sg-text) !important;
    box-shadow: none !important;
    cursor: default;
    opacity: 1 !important;
    -webkit-text-fill-color: var(--sg-text);
}
select.inc-input--locked { appearance: none; background-image: none !important; }

/* Cards within incident detail */
.inc-card__title { font-size: 13px; font-weight: 600; color: var(--sg-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.inc-card__count { font-size: 28px; font-weight: 800; color: var(--sg-text); }
.inc-card__count--green { color: var(--sg-online-text); }
.inc-card__count--red   { color: var(--sg-err-text); }
/* Severity dropdown: the SELECTED value reads in its severity colour even when closed.
   Two classes + !important beats the global `.form-select { color: ... !important }` rule. */
.form-select.inc-sev-select { font-weight: 700; }
.form-select.inc-sev-select--low      { color: var(--sg-accent) !important; }
.form-select.inc-sev-select--medium   { color: var(--sg-warn-text) !important; }
.form-select.inc-sev-select--high     { color: var(--sg-orange-text) !important; }
.form-select.inc-sev-select--critical { color: var(--sg-err-text) !important; }
/* Tab "has content" indicator — a small green dot instead of a distracting count number. */
.inc-tab-dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: #34d399; margin: 1px auto 0; box-shadow: 0 0 0 2px rgba(52,211,153,.18); }
/* AMBER = alerted, nobody has accepted yet. Green must only ever mean someone is actually coming.
   01 Aug, INC-202608-0001: four responders were Notified with RespondedAt NULL and the Responders
   tab showed a GREEN dot — the controller read it as "covered" when nobody had answered. Same
   honesty rule as the presence model: green is engagement, amber is waiting. */
.inc-tab-dot--waiting { background: #fbbf24; box-shadow: 0 0 0 2px rgba(251,191,36,.20); }
.inc-card__action { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sg-accent); cursor: pointer; margin-top: 6px; }
.inc-card__link { font-size: 13px; color: var(--sg-accent); text-decoration: none; }
.inc-card__link:hover { text-decoration: underline; }

/* ─── sg-select ────────────────────────────────────────────────── */
.sg-select {
    background: var(--sg-input-bg, var(--sg-card));
    border: 1px solid var(--sg-border, var(--sg-border));
    border-radius: 8px;
    color: var(--sg-text);
    font-size: 13px;
    padding: 7px 12px;
    width: 100%;
    outline: none;
    transition: border-color 0.15s;
}
.sg-select:focus { border-color: var(--sg-accent); box-shadow: 0 0 0 2px rgba(59,130,246,.18); }
.sg-select--sm { height: 32px; padding: 4px 10px; font-size: 12px; border-radius: 6px; }

/* ─── sg-alert ─────────────────────────────────────────────────── */
.sg-alert { padding: 10px 14px; border-radius: 8px; font-size: 13px; border: 1px solid transparent; }
.sg-alert--success { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.25); color: var(--sg-ok-text); }
.sg-alert--danger  { background: rgba(239,68,68,.1);  border-color: rgba(239,68,68,.25);  color: var(--sg-err-text); }
.sg-alert--info    { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.25); color: var(--sg-accent); }
 .chat-page{display:flex;flex-direction:column;min-height:0;flex:1 1 auto} .chat-shell{display:grid;grid-template-columns:300px 1fr;min-height:0;flex:1 1 auto;overflow:hidden;padding:0!important} .chat-thread-row{display:flex;align-items:flex-start;gap:10px} .chat-thread-info{flex:1;min-width:0} .chat-thread-name{font-weight:600;font-size:13px;color:var(--sg-heading);display:flex;align-items:center;gap:6px} .chat-thread-preview{font-size:12px;color:var(--sg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px} .chat-thread-time{font-size:11px;color:var(--sg-muted);margin-top:2px} .chat-thread-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;background:rgba(59,130,246,.2);color:var(--sg-accent);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center} .chat-thread-avatar--sm{width:32px;height:32px;font-size:12px} .chat-unread-badge{background:#ef4444;color:#fff;font-size:10px;font-weight:700;border-radius:9999px;padding:1px 6px;min-width:18px;text-align:center} .chat-msg{display:flex;align-items:flex-end;gap:8px} .chat-msg--mine{flex-direction:row-reverse} .chat-msg__avatar{width:28px;height:28px;border-radius:50%;flex-shrink:0;background:var(--sg-input-bg);color:var(--sg-heading);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center} .chat-msg__body{display:flex;flex-direction:column;gap:2px;max-width:66%} .chat-msg--mine .chat-msg__body{align-items:flex-end} .chat-msg__sender{font-size:11px;color:var(--sg-muted);margin-bottom:2px} .chat-msg__time{font-size:10px;color:var(--sg-muted);margin-top:2px} .app-chat-bubble--mine{background:rgba(59,130,246,.25);color:#f0f9ff;border-radius:18px 18px 4px 18px} .app-chat-bubble{border-radius:18px 18px 18px 4px} .chat-attachment{color:var(--sg-accent);font-size:12px} .chat-composer-input{flex:1} .chat-send-btn{flex-shrink:0;width:40px;height:40px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center} .app-chat-thread__composer{display:flex;align-items:center;gap:8px} .chat-empty-hint{color:var(--sg-muted);font-size:13px}
 .sg-chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid var(--sg-border);background:var(--sg-card);color:var(--sg-text);cursor:pointer;transition:all .15s} .sg-chip--active,.sg-chip:hover{background:color-mix(in srgb, var(--sg-accent) 20%, transparent);border-color:color-mix(in srgb, var(--sg-accent) 50%, transparent);color:var(--sg-accent)} .sg-chip--sm{font-size:11px;padding:2px 8px} .sg-chip--danger{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4);color:var(--sg-err-text);cursor:default} .sg-chip--warning{background:rgba(234,179,8,.15);border-color:rgba(234,179,8,.4);color:var(--sg-warn-text);cursor:default} .sg-chip--info{background:color-mix(in srgb, var(--sg-accent) 15%, transparent);border-color:color-mix(in srgb, var(--sg-accent) 40%, transparent);color:var(--sg-accent);cursor:default} .sg-chip--purple{background:rgba(139,92,246,.15);border-color:rgba(139,92,246,.4);color:#c4b5fd;cursor:default} .sg-chip--success{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.4);color:var(--sg-ok-text);cursor:default}

/* ============================================================
   LIGHT THEME — comprehensive overrides
   All dark hardcoded rgba/hex values replaced via var(--sg-*)
   ============================================================ */
[data-sg-theme="light"] {
    color-scheme: light;
}

/* ── Layout shells ─────────────────────────────────────────── */
[data-sg-theme="light"] html,
[data-sg-theme="light"] body,
[data-sg-theme="light"] .safegrid-main,
[data-sg-theme="light"] .app-shell,
[data-sg-theme="light"] .sg-page { background: var(--sg-bg) !important; color: var(--sg-text) !important; }

[data-sg-theme="light"] .safegrid-sidebar { background: var(--sg-sidebar-bg) !important; border-right-color: var(--sg-border) !important; }

/* ── App panel (main content card with background image) ─────── */
[data-sg-theme="light"] .app-panel {
    background: rgba(248,250,252,0.96) !important;
    border-color: var(--sg-border) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08) !important;
    backdrop-filter: none !important;
}
[data-sg-theme="light"] .app-panel--loading,
[data-sg-theme="light"] .app-panel__empty { color: var(--sg-muted) !important; }
[data-sg-theme="light"] .app-panel__header { border-bottom-color: var(--sg-border) !important; }
[data-sg-theme="light"] .app-panel__header h2 { color: var(--sg-text) !important; }
[data-sg-theme="light"] .app-panel__header p { color: var(--sg-muted) !important; }

/* ── Page header titles ─────────────────────────────────────── */
[data-sg-theme="light"] .app-page-header__title { color: var(--sg-text) !important; }
[data-sg-theme="light"] .app-page-header__eyebrow { color: var(--sg-muted) !important; }
[data-sg-theme="light"] .app-page-header__subtitle { color: var(--sg-muted) !important; }

/* ── Filter row ─────────────────────────────────────────────── */
[data-sg-theme="light"] .app-filter-grid { border-bottom-color: var(--sg-border) !important; }
[data-sg-theme="light"] .app-filter span,
[data-sg-theme="light"] .app-filter label { color: var(--sg-muted) !important; }
[data-sg-theme="light"] .app-filter input,
[data-sg-theme="light"] .app-filter select,
[data-sg-theme="light"] .app-filter textarea {
    background: var(--sg-input-bg) !important;
    border-color: var(--sg-input-border) !important;
    color: var(--sg-text) !important;
}
[data-sg-theme="light"] .app-filter input:focus,
[data-sg-theme="light"] .app-filter select:focus,
[data-sg-theme="light"] .app-filter textarea:focus { border-color: var(--sg-accent) !important; box-shadow: 0 0 0 3px rgba(29,78,216,0.12) !important; }
[data-sg-theme="light"] .app-input-wrap i { color: var(--sg-muted) !important; }

/* ── Tables ─────────────────────────────────────────────────── */
[data-sg-theme="light"] .app-table th,
[data-sg-theme="light"] .app-table td { border-bottom-color: var(--sg-border) !important; }
[data-sg-theme="light"] .app-table th {
    background: var(--sg-panel) !important;
    color: var(--sg-muted) !important;
}
[data-sg-theme="light"] .app-table td { color: var(--sg-text) !important; }
[data-sg-theme="light"] .table thead th { background: var(--sg-panel) !important; }
[data-sg-theme="light"] .table-hover tbody tr:hover { background: rgba(0,0,0,0.03) !important; }

/* ── Cards ──────────────────────────────────────────────────── */
[data-sg-theme="light"] .app-item-card,
[data-sg-theme="light"] .app-summary-card {
    background: var(--sg-card) !important;
    border-color: var(--sg-border) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
[data-sg-theme="light"] .app-item-card__title,
[data-sg-theme="light"] .app-summary-card__value { color: var(--sg-text) !important; }
[data-sg-theme="light"] .app-item-card__meta,
[data-sg-theme="light"] .app-item-card__copy,
[data-sg-theme="light"] .app-summary-card__label { color: var(--sg-muted) !important; }

[data-sg-theme="light"] .card { box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important; }
[data-sg-theme="light"] .card-header { background: var(--sg-panel) !important; }
[data-sg-theme="light"] .card-header.bg-dark { background: var(--sg-panel) !important; }

/* ── sg-side-patrol-card ─────────────────────────────────────── */
[data-sg-theme="light"] .sg-side-patrol-card { background: var(--sg-card) !important; border-color: var(--sg-border) !important; box-shadow: 0 1px 6px rgba(0,0,0,0.07) !important; }
[data-sg-theme="light"] .sg-side-patrol-title,
[data-sg-theme="light"] .sg-side-patrol-id { color: var(--sg-text) !important; }

/* ── Chat ───────────────────────────────────────────────────── */
[data-sg-theme="light"] .app-chat-list,
[data-sg-theme="light"] .app-chat-thread { border-color: var(--sg-border) !important; background: var(--sg-card) !important; }
[data-sg-theme="light"] .app-chat-list__item { border-bottom-color: var(--sg-border) !important; }
[data-sg-theme="light"] .app-chat-list__item--active { background: color-mix(in srgb, var(--sg-accent) 8%, transparent) !important; }
[data-sg-theme="light"] .app-chat-bubble { background: var(--sg-panel) !important; color: var(--sg-text) !important; }
[data-sg-theme="light"] .app-chat-thread__composer { border-top-color: var(--sg-border) !important; }
[data-sg-theme="light"] .chat-thread-name { color: var(--sg-text) !important; }

/* ── Control-room panels ─────────────────────────────────────── */
[data-sg-theme="light"] .cr-top-banner { background: var(--sg-card) !important; border-bottom-color: var(--sg-border) !important; }
[data-sg-theme="light"] .cr-banner-icon-btn { background: var(--sg-panel) !important; border-color: var(--sg-border) !important; }
[data-sg-theme="light"] .cr-banner-icon-btn:hover { background: var(--sg-bg) !important; }
[data-sg-theme="light"] .control-room-metrics { border-top-color: var(--sg-border) !important; }
[data-sg-theme="light"] .control-room-map-header,
[data-sg-theme="light"] .control-room-incidents-header,
[data-sg-theme="light"] .control-room-patrols-header { background: var(--sg-card) !important; border-bottom-color: var(--sg-border) !important; color: var(--sg-text) !important; }
[data-sg-theme="light"] .cr-map__hint { background: rgba(255,255,255,0.92) !important; border-color: var(--sg-border) !important; color: var(--sg-text) !important; }

/* ── Members / list pages ────────────────────────────────────── */
[data-sg-theme="light"] .members-card { background: var(--sg-card) !important; border-color: var(--sg-border) !important; }
[data-sg-theme="light"] .members-card__header { border-bottom-color: var(--sg-border) !important; }
[data-sg-theme="light"] .members-filters { border-bottom-color: var(--sg-border) !important; background: var(--sg-panel) !important; }
[data-sg-theme="light"] .members-table-wrap { background: var(--sg-card) !important; }
[data-sg-theme="light"] .members-table thead th { background: var(--sg-panel) !important; color: var(--sg-muted) !important; }
[data-sg-theme="light"] .members-table td { border-bottom-color: var(--sg-border) !important; color: var(--sg-text) !important; }
[data-sg-theme="light"] .members-table tbody tr:hover { background: rgba(0,0,0,0.02) !important; }

/* ── Modals ─────────────────────────────────────────────────── */
[data-sg-theme="light"] .modal-content { box-shadow: 0 8px 32px rgba(0,0,0,0.14) !important; }
[data-sg-theme="light"] .modal .btn-close { filter: none !important; }

/* ── Buttons ─────────────────────────────────────────────────── */
[data-sg-theme="light"] .btn-outline-light {
    color: var(--sg-text) !important;
    border-color: var(--sg-border) !important;
}
[data-sg-theme="light"] .btn-outline-light:hover {
    background: var(--sg-panel) !important;
    color: var(--sg-text) !important;
}

/* ── Disabled forms ─────────────────────────────────────────── */
[data-sg-theme="light"] .form-control:disabled,
[data-sg-theme="light"] .form-control[readonly],
[data-sg-theme="light"] .form-select:disabled {
    background: var(--sg-panel) !important;
    border-color: var(--sg-border) !important;
    color: var(--sg-muted) !important;
}
[data-sg-theme="light"] .form-select option { background: var(--sg-card) !important; color: var(--sg-text) !important; }

/* ── Nav / sidebar active state ─────────────────────────────── */
[data-sg-theme="light"] .sg-nav-item:hover { background: rgba(0,0,0,0.06) !important; }

/* ── SgDialog / SgAlert boxes ────────────────────────────────── */
[data-sg-theme="light"] .sg-alert--success { color: #166534 !important; }
[data-sg-theme="light"] .sg-alert--danger  { color: #991b1b !important; }
[data-sg-theme="light"] .sg-alert--info    { color: #1e40af !important; }

/* ── Chips ───────────────────────────────────────────────────── */
/* The sidebar logo PNG has a WHITE wordmark — swap to the navy-wordmark variant in light mode */
[data-sg-theme="light"] .sg-logo-img { content: url('/images/safegrid1a-dark.png'); }

[data-sg-theme="light"] .sg-chip { background: var(--sg-panel) !important; border-color: var(--sg-border) !important; color: var(--sg-text) !important; }
[data-sg-theme="light"] .sg-chip--active,
[data-sg-theme="light"] .sg-chip:hover { background: color-mix(in srgb, var(--sg-accent) 12%, transparent) !important; border-color: color-mix(in srgb, var(--sg-accent) 40%, transparent) !important; color: var(--sg-accent) !important; }

/* ── Dropdown menus ─────────────────────────────────────────── */
[data-sg-theme="light"] .dropdown-menu { background: var(--sg-card) !important; border-color: var(--sg-border) !important; }
[data-sg-theme="light"] .dropdown-item { color: var(--sg-text) !important; }
[data-sg-theme="light"] .dropdown-item:hover { background: var(--sg-panel) !important; }

/* ── Scrollbar in light mode ─────────────────────────────────── */
[data-sg-theme="light"] ::-webkit-scrollbar-thumb { background: var(--sg-border) !important; }

/* ── Super-admin page header ─────────────────────────────────── */
[data-sg-theme="light"] .super-admin-page-header,
[data-sg-theme="light"] .app-page-header { color: var(--sg-text) !important; }

/* ============================================================
   LEGAL PAGES — /terms and /privacy
   ============================================================ */
.mkt-legal-section {
    padding: 60px 24px 80px;
    display: flex;
    justify-content: center;
}
.mkt-legal-wrap { max-width: 800px; width: 100%; }
.mkt-legal-wrap h1 { font-size: clamp(28px,3vw,42px); font-weight: 800; margin: 8px 0 4px; }
.mkt-legal-meta { color: var(--sg-muted); font-size: 13px; margin-bottom: 36px; }
.mkt-legal-body { line-height: 1.8; font-size: 15px; }

/* Tenant WhatsApp feed */
.whatsapp-tenant-feed {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
    /* Fill the card to its bottom like the gold-standard .members-table-wrap — never a calc(100vh - N)
       magic offset, which mismatches the real header height and clipped the last card. */
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
}

.whatsapp-tenant-bubble {
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--sg-card);
}

.whatsapp-tenant-bubble--important {
    border-color: rgba(245,158,11,0.55);
    box-shadow: 0 0 0 1px rgba(245,158,11,0.25) inset;
}

.whatsapp-tenant-bubble__meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--sg-muted);
    margin-bottom: 4px;
}

.whatsapp-tenant-bubble__sender {
    font-size: 12px;
    color: var(--sg-muted);
    margin-bottom: 4px;
}

.whatsapp-tenant-bubble__message {
    font-size: 14px;
    color: var(--sg-text);
    white-space: pre-wrap;
}

.whatsapp-tenant-incident-link {
    margin-top: 8px;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 12px;
    text-decoration: none;
}

.whatsapp-tenant-sev {
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,.4);
}

.whatsapp-tenant-sev--critical { color: var(--sg-err-text); border-color: rgba(239,68,68,.45); }
.whatsapp-tenant-sev--high { color: var(--sg-err-text); border-color: rgba(248,113,113,.45); }
.whatsapp-tenant-sev--medium { color: var(--sg-warn-text); border-color: rgba(245,158,11,.45); }
.whatsapp-tenant-sev--low { color: var(--sg-accent); border-color: rgba(59,130,246,.45); }
.mkt-legal-body h2 { font-size: 18px; font-weight: 700; margin-top: 32px; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--sg-border); }
.mkt-legal-body h3 { font-size: 15px; font-weight: 600; margin-top: 16px; margin-bottom: 4px; }
.mkt-legal-body ul { padding-left: 20px; margin: 8px 0 12px; }
.mkt-legal-body ul li { margin-bottom: 4px; }
.mkt-legal-acceptance { margin-top: 32px; padding: 16px; background: rgba(59,130,246,0.08); border-left: 3px solid #3B82F6; border-radius: 4px; font-size: 14px; font-weight: 500; }
.mkt-legal-nav { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   ACCEPT TERMS PAGE
   ============================================================ */
.sg-terms-accept-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--sg-bg); }
.sg-terms-accept-card { width: 100%; max-width: 560px; background: var(--sg-card); border: 1px solid var(--sg-border); border-radius: 18px; padding: 36px 32px; box-shadow: 0 16px 48px rgba(0,0,0,0.28); }
.sg-terms-accept-logo { text-align: center; margin-bottom: 20px; }
.sg-terms-accept-title { font-size: 22px; font-weight: 700; color: var(--sg-text); margin: 0 0 8px; text-align: center; }
.sg-terms-accept-subtitle { font-size: 14px; color: var(--sg-muted); text-align: center; margin-bottom: 20px; }
.sg-terms-accept-scroll { max-height: 220px; overflow-y: auto; padding: 14px 16px; background: var(--sg-panel); border: 1px solid var(--sg-border); border-radius: 10px; font-size: 13px; color: var(--sg-text); line-height: 1.6; margin-bottom: 18px; }
.sg-terms-accept-scroll h3 { font-size: 13px; font-weight: 700; margin: 12px 0 4px; color: var(--sg-text); }
.sg-terms-accept-scroll h3:first-child { margin-top: 0; }
.sg-terms-accept-scroll a { color: var(--sg-accent); }
.sg-terms-accept-checks { display: flex; flex-direction: column; gap: 12px; }
.sg-terms-accept-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13px; color: var(--sg-text); line-height: 1.5; }
.sg-terms-accept-check input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--sg-accent); width: 16px; height: 16px; }
.sg-terms-accept-check a { color: var(--sg-accent); }
.sg-terms-accept-footer { text-align: center; margin-top: 14px; font-size: 12px; }
.sg-terms-accept-footer a { color: var(--sg-muted); text-decoration: none; }
.sg-terms-accept-footer a:hover { color: var(--sg-danger); }

/* ============================================================
   LOG BOOK PAGE
   ============================================================ */

/* ── Filters — single row, no wrap ───────────────────────── */
.logbook-filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
    padding: 14px 22px 16px;
    border-bottom: 1px solid var(--sg-border);
    overflow-x: auto;
}
.logbook-filter-select { flex: 1 1 0; min-width: 120px; max-width: 200px; }
.logbook-filter-date   { flex: 0 0 148px; width: 148px; min-width: 0; }
.logbook-filter-sep    { flex: 0 0 auto; color: var(--sg-muted); font-size: 12px; white-space: nowrap; }

/* ── Page + card fill viewport height ─────────────────────── */
.logbook-page {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* Card fills the space REMAINING after the subnav — no height:100% (that would
   overflow once the subnav row is a sibling and clip the bottom of the card). */
.logbook-page .members-card {
    flex: 1 1 auto;
    min-height: 0;
}

/* ── View switcher row (own line, full width — was crammed into the global topbar) ── */
.logbook-subnav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 8px;
    padding: 2px 2px 12px;
}
.logbook-subnav__out {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Table ────────────────────────────────────────────────── */
.logbook-row { cursor: pointer; }
.logbook-row:hover td { background: var(--sg-panel) !important; }
.logbook-vehicle { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logbook-notes  { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sg-muted); font-size: 12px; }

/* ── Source badges ────────────────────────────────────────── */
.sg-source-badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.sg-source-badge--manual-web { background: rgba(59,130,246,0.15); color: var(--sg-accent); }
.sg-source-badge--manual-app { background: rgba(139,92,246,0.15); color: var(--sg-purple-text); }
.sg-source-badge--auto-app   { background: rgba(16,185,129,0.15); color: var(--sg-ok-text); }

/* ── Empty state ─────────────────────────────────────────── */
.logbook-empty { padding: 40px; text-align: center; color: var(--sg-muted); font-size: 14px; }

/* ── Wide modal ───────────────────────────────────────────── */
.sg-modal--lg { width: min(780px, 96vw) !important; max-width: min(780px, 96vw) !important; }

/* ── Modal body ───────────────────────────────────────────── */
.logbook-modal-body { display: flex; flex-direction: column; gap: 16px; }
.logbook-modal-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.logbook-modal-field { display: flex; flex-direction: column; gap: 5px; }
.logbook-modal-field--full { grid-column: 1 / -1; }
.logbook-modal-label { font-size: 12px; font-weight: 600; color: var(--sg-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.logbook-modal-meta { font-size: 11px; color: var(--sg-muted); padding-top: 4px; border-top: 1px solid var(--sg-border); }

/* ── Calendar ────────────────────────────────────────────── */
.logbook-calendar-nav { display: flex; align-items: center; gap: 12px; padding: 12px 16px 8px; }
.logbook-cal-month { font-size: 16px; font-weight: 700; color: var(--sg-text); min-width: 160px; text-align: center; }

/* THE scroller for the calendar. The grid inside is natural-height, so its rows are free to grow to
   their content; this bounded wrapper scrolls. (Making the GRID itself the bounded flex item was the
   bug: rows can't exceed a definite container height, so a busy day stayed clipped however small the
   blocks got.) */
.logbook-cal-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 12px 12px;
}

.logbook-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
    background: transparent;
    border: 1px solid var(--sg-border);
    border-radius: 8px;
    /* Rows size to their content — a day with eight patrols shows all eight. align-content:start stops
       the rows being stretched to fill; the 80px floor lives on the cell so the weekday header row
       stays its natural height instead of being padded to 80px too. */
    grid-auto-rows: auto;
    align-content: start;
}

.logbook-cal-header {
    /* The grid scrolls now, so the weekday names must stay put or you lose which column is which. */
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--sg-card);
    padding: 6px 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--sg-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.logbook-cal-cell {
    background: transparent;
    border: 1px solid var(--sg-border);
    padding: 4px 6px;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.logbook-cal-cell--other { opacity: 0.35; }
.logbook-cal-cell--today { background: rgba(59,130,246,0.08); }
.logbook-cal-cell--today .logbook-cal-day {
    background: var(--sg-accent);
    color: #fff;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.logbook-cal-day { font-size: 12px; font-weight: 600; color: var(--sg-muted); margin-bottom: 2px; }

.logbook-cal-block {
    background: rgba(59,130,246,0.18);
    color: var(--sg-text);
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 11px;
    line-height: 1.4;
    cursor: pointer;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    border-left: 2px solid var(--sg-accent);
    transition: background 0.15s;
    /* The cell is a flex COLUMN, so without this the blocks inherit flex-shrink:1 and a busy day
       squashes every one of them to a few pixels with the text clipped away — 6 patrols rendered as
       6 slivers. Blocks keep their natural height; the cell clips the overflow instead. */
    flex: 0 0 auto;
}
.logbook-cal-block:hover { background: rgba(59,130,246,0.3); }

/* Time left, member name RIGHT-ALIGNED on the same row — halves the block height so a busy day
   fits more patrols before the cell clips. The name must TRUNCATE, not wrap: a wrapped long name
   would put the second line back and defeat the point (min-width:0 is what lets a flex item
   shrink below its content width so the ellipsis can engage). */
.logbook-cal-block__top { display: flex; align-items: baseline; gap: 6px; }
.logbook-cal-block__time { font-weight: 700; white-space: nowrap; flex: 0 0 auto; }
.logbook-cal-block__who {
    margin-left: auto;
    min-width: 0;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Day number left, the day's totals right — on ONE row, so the summary costs no vertical space. */
.logbook-cal-daybar { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* The day number carries margin-bottom for the old stacked layout; inside the flex row that margin
   just adds dead height to every cell. */
.logbook-cal-daybar .logbook-cal-day { margin-bottom: 0; }
.logbook-cal-daysum {
    margin-left: auto;
    min-width: 0;
    font-size: 10px;
    font-weight: 600;
    color: var(--sg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Vehicles of Interest (VOI) ───────────────────────────── */
.voi-page { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.voi-page .members-card { flex: 1 1 auto; min-height: 0; }

.voi-plate {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    letter-spacing: 0.06em;
    font-size: 13.5px;
}
.voi-row--archived { opacity: 0.5; }

.voi-risk {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.voi-risk--high   { background: rgba(239,68,68,0.18);  color: #FCA5A5; }
.voi-risk--medium { background: rgba(245,158,11,0.18); color: #FCD34D; }
.voi-risk--low    { background: rgba(34,197,94,0.16);  color: #86EFAC; }

.voi-chip {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    background: rgba(148,163,184,0.18); color: var(--sg-muted);
    font-size: 11px; font-weight: 600;
}
/* A description-only profile can never auto-match — mark it, don't let it look watched. */
.voi-chip--warn { background: rgba(245,158,11,0.16); color: #FCD34D; }
.voi-chip--auto { background: rgba(56,189,248,0.16); color: #7DD3FC; }

.voi-warn {
    margin-top: 6px; padding: 8px 10px; border-radius: 8px;
    background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.35);
    color: #FCD34D; font-size: 12.5px; line-height: 1.45;
}

.voi-empty { padding: 28px 18px; text-align: center; color: var(--sg-muted); font-size: 14px; }

.voi-detail { display: flex; flex-direction: column; gap: 18px; }
.voi-detail__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.voi-code { font-weight: 700; letter-spacing: .04em; color: var(--sg-accent); }
.voi-detail__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.voi-detail__empty { padding: 24px; color: var(--sg-muted); }

.voi-section { border-top: 1px solid var(--sg-border); padding-top: 14px; }
.voi-section__head { display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; row-gap: 8px; margin-bottom: 10px; }
.voi-section__head h4 { font-size: 14px; margin: 0; }

.voi-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.voi-link { display: flex; align-items: center; gap: 8px; }
.voi-link__main {
    flex: 1 1 auto; min-width: 0; display: flex; gap: 10px; align-items: baseline;
    padding: 8px 10px; border-radius: 8px; background: rgba(148,163,184,0.08);
    text-decoration: none; color: var(--sg-text);
}
.voi-link__main:hover { background: rgba(148,163,184,0.16); }
.voi-link__date { font-size: 12px; color: var(--sg-muted); white-space: nowrap; }
.voi-link__type { font-weight: 600; font-size: 13px; }
.voi-link__loc  { font-size: 12px; color: var(--sg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.voi-note-add { display: flex; gap: 8px; margin-bottom: 10px; }
.voi-note-add .sg-input { flex: 1 1 auto; }
.voi-note { padding: 8px 10px; border-radius: 8px; background: rgba(148,163,184,0.08); margin-bottom: 6px; }
.voi-note__text { font-size: 13.5px; line-height: 1.45; }
.voi-note__meta { font-size: 11.5px; color: var(--sg-muted); margin-top: 3px; }

/* ── WhatsApp Feed ────────────────────────────────────────── */
.whatsapp-feed-page { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.whatsapp-feed-page .members-card { flex: 1 1 auto; min-height: 0; height: 100%; }

/* ── WhatsApp Account page ────────────────────────────────── */
.whatsapp-account-page { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.whatsapp-account-page .wa-account-card { flex: 0 0 auto; }
.whatsapp-account-page .wa-groups-card { flex: 1 1 auto; min-height: 0; }
.whatsapp-account-page .wa-groups-card .members-table-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.whatsapp-row--failed td { opacity: 0.6; }
.whatsapp-msg-body { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

.wa-intent-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.wa-intent-badge--incident  { background: rgba(239,68,68,0.18);  color: var(--sg-err-text); }
.wa-intent-badge--reply     { background: rgba(59,130,246,0.18); color: var(--sg-accent); }
.wa-intent-badge--ignore    { background: rgba(107,114,128,0.2); color: var(--sg-muted); }
.wa-intent-badge--escalate  { background: rgba(245,158,11,0.18); color: var(--sg-warn-text); }
.wa-intent-badge--createalert { background: rgba(139,92,246,0.18); color: var(--sg-purple-text); }

.wa-status-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.wa-status-badge--pending    { background: rgba(107,114,128,0.18); color: var(--sg-muted); }
.wa-status-badge--processing { background: rgba(59,130,246,0.18);  color: var(--sg-accent); }
.wa-status-badge--actioned   { background: rgba(16,185,129,0.18);  color: var(--sg-ok-text); }
.wa-status-badge--ignored    { background: rgba(107,114,128,0.14); color: #6b7280; }
.wa-status-badge--failed     { background: rgba(239,68,68,0.18);   color: var(--sg-err-text); }

.whatsapp-detail-body {
    background: var(--sg-card);
    border: 1px solid var(--sg-border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}
.whatsapp-detail-body--reply {
    background: rgba(59,130,246,0.08);
    border-color: rgba(59,130,246,0.25);
}

.whatsapp-media-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.whatsapp-media-thumb { width: 120px; height: 90px; object-fit: cover; border-radius: 8px;
    border: 1px solid var(--sg-border); cursor: pointer; }
.whatsapp-media-thumb:hover { opacity: 0.85; }

/* Sender resolution tags */
.wa-sender-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
    padding: 1px 7px; border-radius: 10px; margin-top: 4px; }
.wa-sender-tag--known   { background: rgba(16,185,129,0.15); color: var(--sg-ok-text); }
.wa-sender-tag--invited { background: rgba(245,158,11,0.15); color: var(--sg-warn-text); }
.wa-sender-tag--unknown { background: rgba(107,114,128,0.15); color: var(--sg-muted); }

/* Invite status badges */
.wa-invite-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.wa-invite-badge--pending    { background: rgba(245,158,11,0.18);  color: var(--sg-warn-text); }
.wa-invite-badge--sent       { background: rgba(59,130,246,0.18);  color: var(--sg-accent); }
.wa-invite-badge--accepted   { background: rgba(16,185,129,0.18);  color: var(--sg-ok-text); }
.wa-invite-badge--expired    { background: rgba(107,114,128,0.18); color: var(--sg-muted); }
.wa-invite-badge--suppressed { background: rgba(239,68,68,0.12);   color: var(--sg-err-text); }
.logbook-report { padding: 16px; overflow-y: auto; }
.logbook-report-filters { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; align-items: flex-end; }
.logbook-report-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.logbook-report-stat {
    background: var(--sg-panel);
    border: 1px solid var(--sg-border);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.logbook-report-stat__val { font-size: 28px; font-weight: 800; color: var(--sg-accent); }
.logbook-report-stat__lbl { font-size: 12px; color: var(--sg-muted); }
@media (max-width: 640px) { .logbook-report-stats { grid-template-columns: repeat(2, 1fr); } }

/* ═══════════════════════════════════════════════════════════════
   SuburbAdmin "Wow" Dashboard  (.sad-*)
   ═══════════════════════════════════════════════════════════════ */

.sad-shell {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    gap: 0; overflow: hidden; background: var(--sg-bg);
}
.sad-loading {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
    color: var(--sg-text-muted); font-size: 14px;
}

/* Top bar */
.sad-topbar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-bottom: 1px solid var(--sg-border);
    background: var(--sg-card); flex-wrap: nowrap; min-width: 0;
}
.sad-topbar__identity { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 0 auto; }
.sad-topbar__logo { height: 28px; width: auto; border-radius: 4px; flex-shrink: 0; }
.sad-topbar__name { font-size: 16px; font-weight: 700; color: var(--sg-text); white-space: nowrap; margin-right: 6px; }
.sad-topbar__pills { flex: 1 1 auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; min-width: 0; }
.sad-topbar__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

.suburb-admin-status-pill--green {
    background: rgba(34,197,94,.15); color: var(--sg-online-text);
    border: 1px solid rgba(34,197,94,.3); border-radius: 6px;
    padding: 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.suburb-admin-status-pill--amber {
    background: rgba(245,158,11,.15); color: var(--sg-warn-text);
    border: 1px solid rgba(245,158,11,.3); border-radius: 6px;
    padding: 2px 8px; font-size: 11px; font-weight: 700;
}

.sad-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 20px; font-size: 13px; font-weight: 600;
    text-decoration: none; transition: opacity .15s; white-space: nowrap;
}
.sad-pill:hover { opacity: .8; }
.sad-pill--blue  { background: rgba(59,130,246,.15);  color: var(--sg-accent); border: 1px solid rgba(59,130,246,.3); }
.sad-pill--amber { background: rgba(245,158,11,.15);  color: var(--sg-warn-text); border: 1px solid rgba(245,158,11,.3); }
.sad-pill--red   { background: rgba(239,68,68,.18);   color: var(--sg-err-text); border: 1px solid rgba(239,68,68,.4);  animation: sadPulse 2s infinite; }
@keyframes sadPulse { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 0 3px rgba(239,68,68,.2); } }

.sad-action-btn {
    display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px;
    border-radius: 9px; font-size: 13px; font-weight: 600; border: none;
    cursor: pointer; text-decoration: none; transition: opacity .15s;
}
.sad-action-btn:hover { opacity: .8; }
.sad-action-btn--ghost   { background: var(--sg-card); border: 1px solid var(--sg-border); color: var(--sg-text-muted); }
.sad-action-btn--primary { background: var(--sg-accent); color: #fff; }

/* Main body */
.sad-body {
    flex: 1 1 auto; min-height: 0;
    display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(280px, 1fr);
    gap: 8px; padding: 8px; overflow: hidden;
}

/* Live map panel */
.sad-map-panel { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; }
.sad-map-header { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 14px 8px; border-bottom: 1px solid var(--sg-border); }
.sad-map-title    { font-size: 13px; font-weight: 700; color: var(--sg-text); }
.sad-map-subtitle { font-size: 12px; color: var(--sg-text-muted); flex: 1; }
.sad-map-cr-link  { font-size: 12px; color: var(--sg-accent); text-decoration: none; white-space: nowrap; }
.sad-map-cr-link:hover { text-decoration: underline; }
.sad-map-canvas { flex: 1 1 auto; min-height: 0; }
.sad-map-hint {
    position: absolute; inset: 48px 0 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--sg-card); color: var(--sg-text-muted); font-size: 13px;
}

/* Right column */
.sad-right-col { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; }

/* Activity feed */
.sad-feed-panel   { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; }
.sad-feed-header  { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 8px; border-bottom: 1px solid var(--sg-border); font-size: 13px; font-weight: 700; color: var(--sg-text); }
.sad-feed-date    { font-size: 11px; font-weight: 400; color: var(--sg-text-muted); }
.sad-feed-list    { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.sad-feed-empty   { display: flex; align-items: center; gap: 8px; padding: 20px 14px; color: var(--sg-text-muted); font-size: 13px; }
.sad-feed-item    { display: flex; align-items: flex-start; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--sg-border); text-decoration: none; transition: background .1s; cursor: pointer; }
.sad-feed-item:hover { background: var(--sg-card); }
.sad-feed-dot     { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; }
.sad-feed--incident .sad-feed-dot { background: #f59e0b; }
.sad-feed--critical .sad-feed-dot { background: #ef4444; }
.sad-feed--high .sad-feed-dot     { background: #f97316; }
.sad-feed--panic .sad-feed-dot    { background: #ef4444; }
.sad-feed--wa .sad-feed-dot       { background: #25d366; }
.sad-feed--patrol .sad-feed-dot   { background: #22c55e; }
.sad-feed--closed .sad-feed-dot   { background: #6b7280; }
.sad-feed-content { flex: 1; min-width: 0; }
.sad-feed-text { display: block; font-size: 12px; color: var(--sg-text); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sad-feed-sub  { display: block; font-size: 11px; color: var(--sg-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sad-feed-time { flex-shrink: 0; font-size: 11px; color: var(--sg-text-muted); white-space: nowrap; margin-top: 1px; }

/* Active incidents panel */
.sad-incidents-panel { flex: 0 0 auto; max-height: 260px; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; }
.sad-incidents-list  { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.sad-inc-row { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-bottom: 1px solid var(--sg-border); text-decoration: none; cursor: pointer; transition: background .1s; }
.sad-inc-row:hover { background: var(--sg-card); }
.sad-inc-dot  { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; }
.sad-inc-body { flex: 1; min-width: 0; }
.sad-inc-ref  { display: block; font-size: 11px; font-weight: 700; color: var(--sg-text-muted); }
.sad-inc-desc { display: block; font-size: 12px; color: var(--sg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sad-inc-right { flex-shrink: 0; text-align: right; }
.sad-inc-age  { display: block; font-size: 11px; color: var(--sg-text-muted); }
.sad-inc-panic { display: block; font-size: 10px; font-weight: 700; color: #ef4444; letter-spacing: .06em; }
.sad-inc-more { display: block; text-align: center; padding: 6px; font-size: 12px; color: var(--sg-accent); text-decoration: none; }
.sad-inc-more:hover { text-decoration: underline; }

/* Light theme */
[data-sg-theme="light"] .sad-topbar { background: #f8fafc; border-bottom-color: #e2e8f0; }
[data-sg-theme="light"] .sad-topbar__name { color: #0f172a; }
[data-sg-theme="light"] .sad-feed-item:hover,
[data-sg-theme="light"] .sad-inc-row:hover { background: rgba(0,0,0,.03); }

/* ── Shared: dark modal definition list (manage-tenant + review modal) ── */
.manage-tenant-definition-list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}
.manage-tenant-definition-list div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.manage-tenant-definition-list dt {
    color: var(--sg-muted-soft);
    font-size: 14px;
    font-weight: 500;
}
.manage-tenant-definition-list dd {
    margin: 0;
    color: var(--sg-heading);
    font-size: 14px;
    text-align: right;
}
.manage-tenant-definition-list--compact { padding: 0; }
.manage-tenant-definition-list--stacked div { display: grid; gap: 4px; }
.manage-tenant-definition-list--stacked dd { text-align: left; color: rgba(241,245,249,0.9); line-height: 1.5; }


/* ───────────────────────────────────────────────────────────────────────────
   Shared "list popup" shell — used by the Site Configurator popups AND shared
   components (NearbySuggestModal). Two layouts share the same scroll shell:
     • .sgp-grid + .sgp-tile  — pick/toggle tiles (roles)
     • .sgp-grid-tbl          — editable grid table (shifts, contacts, weapons…)
   The grid-table column template is per-popup via the --sgp-cols variable.
   ─────────────────────────────────────────────────────────────────────────── */
.sgp-scroll { display: flex; flex-direction: column; max-height: 78vh; min-height: 360px; overflow-y: auto; padding-right: 6px; }
.sgp-section-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-muted); margin: 0 0 8px; }

.sgp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 8px; align-items: stretch; }
.sgp-tile {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    border: 1px solid var(--sg-border); border-radius: 9px; background: var(--sg-card);
    cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.sgp-tile:hover { border-color: rgba(96,165,250,0.5); }
/* Selected state is shown by the checkbox alone — no green row highlight (Jeremy). */
.sgp-tile--on { border-color: var(--sg-border); background: var(--sg-card); }
.sgp-tile--dashed { border-style: dashed; }
.sgp-tile__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sgp-tile__title { font-size: 13px; font-weight: 600; color: var(--sg-text); }
.sgp-tile__sub { font-size: 11px; color: var(--sg-muted); }

/* Editable grid table: a Use checkbox + entity columns, with blank rows to add.
   Each popup sets its own columns: style="--sgp-cols: 52px 1.5fr 1fr 1fr;" */
.sgp-grid-tbl { --sgp-cols: 52px 1fr 116px 116px; }
.sgp-grid-tbl__head, .sgp-grid-tbl__row {
    display: grid; grid-template-columns: var(--sgp-cols); gap: 8px; align-items: center;
}
.sgp-grid-tbl__head {
    padding: 0 4px 6px; font-size: 10px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--sg-muted);
}
.sgp-grid-tbl__row { padding: 5px 4px; border-radius: 8px; border: 1px solid transparent; }
/* No green highlight on selected rows — the checkbox is the only selection cue (Jeremy). */
.sgp-grid-tbl__row--on { border-color: transparent; background: transparent; }

/* ── .sgp-grid-tbl--lined ────────────────────────────────────────────────────
   Checklist-table variant: real gridlines (cell borders + row separators),
   wrapping column headers, outer frame. Used by the roll-call / kit cross-tab
   so many equipment columns read as a tidy grid, not floating fields. */
.sgp-grid-tbl--lined { border: 1px solid var(--sg-border, rgba(148,163,184,.22)); border-radius: 10px; overflow: hidden; }
.sgp-grid-tbl--lined .sgp-grid-tbl__head,
.sgp-grid-tbl--lined .sgp-grid-tbl__row { gap: 0; align-items: stretch; }
.sgp-grid-tbl--lined .sgp-grid-tbl__head { padding: 0; border-bottom: 2px solid var(--sg-border, rgba(148,163,184,.30)); background: var(--sg-card); }
.sgp-grid-tbl--lined .sgp-grid-tbl__row { padding: 0; border: 0; border-bottom: 1px solid var(--sg-border, rgba(148,163,184,.16)); border-radius: 0; }
.sgp-grid-tbl--lined .sgp-grid-tbl__row:last-child { border-bottom: 0; }
.sgp-grid-tbl--lined .sgp-grid-tbl__head > *,
.sgp-grid-tbl--lined .sgp-grid-tbl__row > * {
    display: flex; flex-direction: column; justify-content: center;
    padding: 8px 10px; border-right: 1px solid var(--sg-border, rgba(148,163,184,.16));
    min-width: 0; word-break: break-word;
}
.sgp-grid-tbl--lined .sgp-grid-tbl__head > * { white-space: normal; line-height: 1.2; }
.sgp-grid-tbl--lined .sgp-grid-tbl__head > *[style*="text-align:center"],
.sgp-grid-tbl--lined .sgp-grid-tbl__row > *[style*="text-align:center"] { align-items: center; }
.sgp-grid-tbl--lined .sgp-grid-tbl__head > *:last-child,
.sgp-grid-tbl--lined .sgp-grid-tbl__row > *:last-child { border-right: 0; }
.sgp-grid-tbl--lined .sgp-grid-tbl__row:nth-child(even) { background: var(--sg-card); }

/* Card action chip — shared by the Site Configurator + Controller Dashboard cards. */
.cfg-act {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 7px; font-size: 11.5px; font-weight: 700; line-height: 1;
    white-space: nowrap; padding: 6px 10px; transition: filter .12s ease;
}
.cfg-act--todo { background: #facc15; color: #1a1300; }
.cfg-act--done {
    background: rgba(34,197,94,0.16); color: var(--sg-online-text);
    border: 1px solid rgba(34,197,94,0.45); padding: 5px 9px; font-size: 14px;
}
.cfg-act--locked {
    background: rgba(148,163,184,0.14); color: var(--sg-muted);
    border: 1px solid rgba(148,163,184,0.32); padding: 5px 9px; font-size: 13px;
}
.sgp-grid-tbl__row .sg-input, .sgp-grid-tbl__row .sg-input.sg-input { padding: 6px 9px; font-size: 13px; }
.sgp-grid-tbl__row input[type=checkbox] { width: 17px; height: 17px; cursor: pointer; }

/* ── Print: strip the app chrome so only page content (e.g. ID cards) prints ──
   Without this, window.print() captures the whole shell — sidebar, topbar, menus.
   Anything explicitly marked .print-hide is removed too; the layout containers are
   unclamped so the print sheet can flow across pages. */
@media print {
    .safegrid-sidebar,
    .sg-topbar,
    .print-hide { display: none !important; }

    html, body {
        height: auto !important;
        overflow: visible !important;
        background: #fff !important;
    }
    .safegrid-layout,
    .safegrid-content-row,
    .safegrid-main {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}




/* ── Camera analytics triggers — floating heads-up on the Control Room ── */
.cr-cam-triggers {
    position: fixed; top: 76px; right: 18px; z-index: 1200;
    display: flex; flex-direction: column; gap: 10px; width: 340px; max-width: calc(100vw - 36px);
}
.cr-cam-trigger {
    display: flex; gap: 10px; padding: 10px;
    background: #1a0f12; border: 1px solid rgba(239,68,68,0.55); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.cr-cam-trigger__thumb { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: #0a1b34; }
.cr-cam-trigger__body { flex: 1 1 auto; min-width: 0; }
.cr-cam-trigger__label { font-weight: 700; color: var(--sg-err-text); font-size: 14px; }
.cr-cam-trigger__meta { font-size: 12px; color: var(--sg-subtext); margin: 2px 0 7px; }
.cr-cam-trigger__actions { display: flex; gap: 6px; }

/* Camera ALARM (fired inside the camera's alarm window) — louder than a plain detection. */
@keyframes sgCamAlarmPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); } }
.cr-cam-trigger--alarm {
    border-color: #ef4444; background: #2a0d0d;
    animation: sgCamAlarmPulse 1.4s ease-in-out infinite;
}
.cr-cam-trigger--alarm .cr-cam-trigger__label { color: #fff; }

/* Camera snapshot lightbox (Control Room) — full-size trigger frame on click. */
.cam-lightbox {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(0,0,0,0.9);
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-out;
}
.cam-lightbox__img { max-width: 95vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.cam-lightbox__hint { position: fixed; bottom: 18px; left: 0; right: 0; text-align: center; color: #cbd5e1; font-size: 13px; }
.cr-cam-trigger__thumb { cursor: zoom-in; }

/* WhatsApp feed per-name accents: same hue both themes, darkened for light */
.wa-accent { color: hsl(var(--wa-h), 62%, 66%) !important; }
.wa-accent-dot { background: hsl(var(--wa-h), 62%, 66%) !important; }
[data-sg-theme="light"] .wa-accent { color: hsl(var(--wa-h), 65%, 32%) !important; }
[data-sg-theme="light"] .wa-accent-dot { background: hsl(var(--wa-h), 65%, 40%) !important; }

/* ── Org-level subnav (Dashboard / Sites / Employees / Area report) ─────────
   Chip-style pills; active pill uses the accent so branded orgs get their colour. */
/* ── Checkboxes / radios / switches follow the theme accent everywhere ────── */
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--sg-accent); }
/* accent-color only paints the CHECKED state; an unchecked box keeps the browser's faint grey.
   Draw the box outline ourselves so an empty checkbox is as visible as a ticked one. */
input[type="checkbox"], input[type="radio"] { outline: 1.5px solid var(--sg-heading); outline-offset: -1px; border-radius: 3px; }
input[type="radio"] { border-radius: 50%; }
.form-check-input:checked { background-color: var(--sg-accent) !important; border-color: var(--sg-accent) !important; }
.form-check-input:focus { border-color: var(--sg-accent); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--sg-accent) 25%, transparent); }

/* A cooperating site's watch-list entry — visually distinct from our own so nobody edits or trusts it
   as theirs. Mutual aid shows you a neighbour's record; it stays the neighbour's record. */
.voi-chip--shared { background: rgba(56,189,248,0.16); color: #7DD3FC; margin-left: 8px; }

/* ── Site cooperation ─────────────────────────────────────── */
.coop-page { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.coop-card { border: 1px solid var(--sg-border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; background: var(--sg-card); }
.coop-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.coop-card__site { font-size: 15px; font-weight: 700; color: var(--sg-text); }
.coop-card__meta { font-size: 12px; color: var(--sg-muted); margin-top: 3px; }
.coop-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: rgba(148,163,184,0.18); color: var(--sg-muted); }
.coop-pill--active { background: rgba(34,197,94,0.16); color: #86EFAC; }
.coop-pill--pending { background: rgba(245,158,11,0.16); color: #FCD34D; }
.coop-scopes { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sg-border); }
.coop-note { font-size: 11.5px; color: var(--sg-muted); margin-top: 10px; line-height: 1.5; }

/* Incident case-file actions (27 Aug 2026) — download / email the whole incident as one PDF.
   Sits at the foot of the detail column, quiet by design: it is a hand-off action, not a
   response action, and must not compete with dispatch controls. */
.idv-export-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--sg-border);
}
.idv-export-row .sg-btn { text-decoration: none; }

/* ── Signed-in side menu hide/show (6 Sep 2026) ── the toggle lives at the far left of the topbar. */
.sg-nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: -6px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--sg-text-muted, #94a3b8); cursor: pointer; flex: 0 0 auto; }
.sg-nav-toggle:hover { background: rgba(148,163,184,.12); color: var(--sg-text, #e2e8f0); border-color: var(--sg-border); }
html.sg-nav-hidden .safegrid-sidebar { display: none !important; }

/* ── Phone interstitial on the signed-in shell (6 Sep 2026) — lives here, not in the component, so it can never render unstyled. ── */
.sg-phone-notice { display: none !important; }
    @media (max-width: 900px) {
        /* Full-screen branded interstitial: the signed-in web is a desktop console, the app is the phone product. */
        .sg-phone-notice { display: block !important; position: fixed; inset: 0; z-index: 2000; padding: 0 !important; margin: 0 !important; overflow-y: auto; -webkit-overflow-scrolling: touch;
            background: radial-gradient(120% 70% at 50% -10%, rgba(59,130,246,.35), transparent 60%), linear-gradient(180deg, #0b1630 0%, #060b18 100%); color: #e6edf7; }
        .sg-phone-notice__inner { min-height: 100%; display: flex; flex-direction: column; padding: max(22px, env(safe-area-inset-top)) 22px max(22px, env(safe-area-inset-bottom)); }
        .sg-phone-notice__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
        .sg-phone-notice__back { justify-self: start; background: none; border: 0; padding: 6px 4px; color: #7fa5ff; font-size: 14px; cursor: pointer; }
        .sg-phone-notice__home { display: block; }
        .sg-phone-notice__logo { display: block; height: 36px; width: auto; margin: 2px auto 0; }
        .sg-phone-notice__eyebrow { margin-top: 18px; text-align: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #7fa5ff; font-weight: 700; }
        .sg-phone-notice__title { margin: 8px 0 0; text-align: center; font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
        .sg-phone-notice__body { margin: 8px auto 0; max-width: 38ch; text-align: center; font-size: 14px; line-height: 1.45; color: #aab8d0; }
        .sg-phone-notice__why { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
        .sg-phone-notice__why li { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.045); border: 1px solid rgba(148,163,184,.18); }
        .sg-phone-notice__ico { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(59,130,246,.18); }
        .sg-phone-notice__why strong { display: block; font-size: 13.5px; margin-bottom: 1px; }
        .sg-phone-notice__why span { font-size: 12.5px; line-height: 1.35; color: #9fb0c8; }
        .sg-phone-notice__shot { margin: 18px auto 0; margin-bottom: calc(-1 * max(22px, env(safe-area-inset-bottom))); width: min(52%, 200px); border-radius: 22px 22px 0 0; border: 1px solid rgba(148,163,184,.3); border-bottom: 0; overflow: hidden; max-height: 150px; position: relative; box-shadow: 0 -10px 40px rgba(59,130,246,.15); }
        .sg-phone-notice__shot img { display: block; width: 100%; height: auto; }
        .sg-phone-notice__shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, #060b18 100%); }
        .sg-phone-notice__get { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(148,163,184,.18); text-align: center; font-size: 13px; color: #9fb0c8; }
        .sg-phone-notice__badges { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
        .sg-phone-notice__badges img { display: block; width: 140px; height: 47px; }
        .sg-phone-notice__continue { margin: 14px auto 0; background: none; border: 0; padding: 8px; color: #7fa5ff; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
    }

/* ── ONE tab strip for every tabbed page/panel (6 Sep 2026, Jeremy: "POI tab page is the correct style —
   apply it to profile and every other tabbed page"). Underline tabs, no pills. ── */
.sg-tabs { display: flex; gap: 6px; padding: 8px 18px 1px; border-bottom: 1px solid var(--sg-border); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; flex: 0 0 auto; }
.sg-tabs--flush { padding-left: 0; padding-right: 0; }
.sg-tabs__tab { background: transparent; border: none; border-radius: 0; color: var(--sg-muted-soft); padding: 12px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; line-height: 1.2; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; }
.sg-tabs__tab:hover { color: var(--sg-heading); text-decoration: none; }
.sg-tabs__tab--active, .sg-tabs__tab--active:hover { color: var(--sg-accent); border-bottom-color: #3b82f6; font-weight: 600; }
.sg-tabs__count { color: var(--sg-muted-soft); font-size: 12px; }
.org-subnav.sg-tabs { margin-bottom: 14px; }
.logbook-subnav.sg-tabs { align-items: center; margin-bottom: 12px; padding-bottom: 0; }
.people-tabs.sg-tabs { margin-bottom: var(--sg-card-gap); }
/* shell notice: dismissed for good (localStorage). login variant: dismissed for this browser session only. */
html.sg-phone-notice-off .sg-phone-notice:not(.sg-phone-notice--login) { display: none !important; }
html.sg-phone-login-off .sg-phone-notice--login { display: none !important; }

/* ── Crime stats series (6 Sep 2026): SafeGrid count over the police count in every cell ── */
.crime-stats-table td > span { display: block; line-height: 1.2; }
.crime-cell__police { font-size: 11px; color: #60a5fa; }
.crime-total-row td { border-top: 2px solid var(--sg-border); }

/* Named-place labels on the live map (7 Sep 2026, Jeremy: "illegible at any zoom") — a dark pill behind bold text. */
.sg-place-label { background: rgba(2,6,23,.88); padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(148,163,184,.45); letter-spacing: .01em; white-space: nowrap; }

/* ── Field log entries inside the log-book entry modal (8 Sep 2026) ──────────────────────────────
   The "+" on the mobile patrol page writes these against the open patrol; they render under the
   route map so one modal answers "what happened on this shift". Layout-critical CSS lives here,
   never in a component <style> block (a component block never reached production). */
.obs-card {
    border: 1px solid #2a3a4f;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.02);
}
.obs-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.obs-card__time { font-weight: 600; font-variant-numeric: tabular-nums; }
.obs-card__text { line-height: 1.45; overflow-wrap: anywhere; }
.obs-card__media {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.obs-media {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #2a3a4f;
}
.obs-media--audio { width: 220px; height: 36px; object-fit: unset; border: 0; }
.obs-media--file, .obs-media--gone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    text-decoration: none;
}
.obs-media--gone { opacity: .6; font-style: italic; }
.obs-card__ai {
    margin-top: 8px;
    font-size: .85rem;
    line-height: 1.4;
    opacity: .8;
}
.obs-card__actions { display: flex; gap: 8px; margin-top: 10px; }

/* ── Log-book entry modal: two columns on a desktop width (9 Sep 2026) ──────────────────────────
   Shift fields left, patrol route + field log entries right. Everything used to stack, so an entry
   with a route map and a photo ran past the viewport and had to be scrolled. Collapses to one
   column on a narrow window, and each column can shrink (minmax(0,…)) so a wide map or a long note
   cannot force the modal sideways. */
.logbook-modal-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.logbook-modal-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
@media (max-width: 900px) {
    .logbook-modal-split { grid-template-columns: 1fr; gap: 16px; }
}

/* ── PLANNED PATROLS (Log Book → Planned tab, 9 Sep 2026) ────────────────────
   The committee view of the phone's planner. One week, every night listed —
   the EMPTY nights are the point, because they are what a committee can still
   do something about. Only .plan-wrap scrolls; the page never does. */
.plan-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; row-gap: 8px; }
.plan-bar__nav { display: flex; align-items: center; gap: 8px; }
.plan-bar__range { font-weight: 600; color: var(--sg-text); min-width: 190px; text-align: center; }
.plan-bar__stats { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.plan-bar__stat { font-size: 13px; color: var(--sg-muted); }
.plan-bar__stat strong { color: var(--sg-text); font-size: 15px; margin-right: 4px; }
.plan-bar__stat--gap strong { color: #F59E0B; }

.plan-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* WEEK = the month calendar with a single row of seven, given the height a stack of
   day blocks used to waste. Seven columns use the width the page actually has. */
.plan-cal--week .logbook-cal-cell { min-height: 260px; }

/* DAY = the page's own grid (members-table + logbook-table). The only additions are the
   crew cell, which holds the initials chips inline, and a dimmed row for a cancelled patrol. */
.plan-crew-cell { display: inline-flex; align-items: center; gap: 6px; }
.plan-slot--off { opacity: .5; }
.plan-free { color: #22C55E; }

/* Initials, the same two-letter rule as the map pins. FILLED = they actually
   turned out (derived from the real patrol record); hollow = still only a plan. */
.plan-chip {
    width: 30px; height: 30px; border-radius: 15px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600;
    border: 1px solid rgba(91, 123, 166, .8);
    background: transparent; color: var(--sg-muted);
}
.plan-chip--on { background: #2563EB; border-color: #2563EB; color: #fff; }
.plan-chip--free { border-style: dashed; opacity: .55; }

.plan-modal-crew { margin-top: 20px; border-top: 1px solid var(--sg-card-border); padding-top: 16px; }
.plan-modal-crew__label { font-size: 11px; letter-spacing: 1px; color: var(--sg-muted); margin-bottom: 10px; }
.plan-modal-crew__none { font-size: 13px; color: var(--sg-muted); }
.plan-modal-crew__row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.plan-modal-crew__name { color: var(--sg-text); font-weight: 600; }
.plan-modal-crew__role,
.plan-modal-crew__state { font-size: 12px; color: var(--sg-muted); }
.plan-modal-crew__state { margin-left: auto; }
.plan-modal-crew__posted { margin-top: 12px; font-size: 12px; color: var(--sg-muted); }

@media (max-width: 1100px) {
    .plan-slot { grid-template-columns: 110px minmax(0, 1fr) 80px; }
    .plan-slot__where { grid-column: 1 / -1; }
}

/* Segmented range switch (Planned patrols: Day / Week / Month). Mirrors the phone
   board's switch so the two surfaces read the same. */
.sg-seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 10px;
          background: var(--sg-input-bg, rgba(148,163,184,.10));
          border: 1px solid var(--sg-card-border); }
.sg-seg__btn { border: 0; background: transparent; color: var(--sg-muted);
               padding: 6px 16px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.sg-seg__btn:hover { color: var(--sg-text); }
.sg-seg__btn--on { background: #2563EB; color: #fff; font-weight: 600; }

/* Month view reuses the Log Book calendar furniture — one calendar style per page. */
/* The planned calendar IS the Log Book calendar — same cells, same blocks, same day summary.
   These are the only additions: the day number is clickable (drops into that day) and a
   cancelled patrol is dimmed. An earlier cut painted an amber "no cover" into every empty
   cell, which is not how any other grid on this page speaks (Jeremy, 9 Sep 2026). The count
   of uncovered nights belongs in the header stat, once, not twenty times in the grid. */
.plan-cal-day { cursor: pointer; }
.plan-cal-day:hover { color: var(--sg-accent); }
.plan-cal-block { cursor: pointer; }


/* PLANNED vs ACTUAL on the shared calendar and grid (9 Sep 2026). A plan is an INTENTION and a log
   is a RECORD, so they must not look identical — but they are the same furniture, only outlined
   instead of filled. One calendar, one grid, two states. */
.logbook-cal-block.cal-block--planned {
    background: transparent;
    border: 1px dashed rgba(96, 165, 250, .65);
    color: var(--sg-muted);
}
.logbook-cal-block.cal-block--planned:hover { background: rgba(59, 130, 246, .12); }
/* The Type cell is WORDS, not chips. Jeremy, 9 Sep 2026: "why is planned in a chip. we dont need
   everything in a chip." The gap is a flex gap so the parts can never end up touching, which is
   what a literal space in Razor gave us. */
.patrol-kind { display: inline-flex; align-items: baseline; gap: 8px; }
.patrol-kind__word { color: #60A5FA; }
.patrol-kind__note { font-size: 12px; color: var(--sg-muted); }

/* VEHICLE OF INTEREST — PHOTOS (9 Sep 2026). A plate describes a vehicle; a photo identifies it.
   Same gallery language as the POI photos tab: square thumbnails, the promoted one badged. */
/* Add-photo controls read as one action: button then its caption box, on one line.
   In the half-width detail pane they were wrapping into a stack of right-aligned bits. */
.voi-photo-add { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.voi-photo-caption { max-width: 260px; min-width: 0; flex: 1 1 auto; }
.voi-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.voi-photo { position: relative; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.voi-photo img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 10px; border: 1px solid var(--sg-card-border); display: block;
}
.voi-photo--main img { border: 2px solid #22C55E; }
.voi-photo__badge {
    position: absolute; top: 6px; left: 6px;
    background: #22C55E; color: #04210F;
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
}
.voi-photo figcaption { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.voi-photo__caption { font-size: 11px; color: var(--sg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voi-photo__tools { display: flex; gap: 4px; margin-left: auto; }

.voi-photo-add > label { white-space: nowrap; flex: 0 0 auto; }


/* ═══════════════════════════════════════════════════════════════════════════════════════════
   BROWSER-SHAPE STYLES (list left / detail right) — SHARED, NOT PER-PAGE.

   These lived in PersonsOfInterest.razor.css and PoiDetail.razor.css, which are SCOPED
   stylesheets: Blazor rewrites every selector with that component's own attribute, so any
   other page using the same class names got NO styling at all — silently. That is exactly
   how Vehicles of Interest ended up with unstyled boxes where the POI page has tabs.

   One definition, used by Persons of Interest AND Vehicles of Interest. Change it here and
   both pages change together; that is the point. Appended last so these win over the
   generic .members-card rules they are meant to refine.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Browser shape: list page (from PersonsOfInterest) ────────────────────────────────── */
/* ── Persons of Interest page (Browser shape: list pane + detail pane frame) ──
   Detail-surface styles live in Components/Shared/PoiDetail.razor.css. */

.poi-page {
    gap: 16px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* Was min-height:100vh, which forced the page taller than the 100vh clipped main
       area and cut off the bottom. Fit within the parent and let .poi-layout scroll. */
    min-height: 0;
    overflow: hidden;
}

.poi-topbar .members-page__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.poi-title-info {
    color: rgba(96,165,250,0.8);
    font-size: 18px;
    cursor: help;
}

.poi-disclaimer {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sg-subtext);
}

.poi-disclaimer i {
    color: var(--sg-warn-text);
    font-size: 16px;
}

.poi-disclaimer strong {
    color: var(--sg-warn-text);
    font-weight: 600;
}

/* Stats bar — compact strip at top of left panel card */
.poi-stats-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 10px 18px;
    border-bottom: 1px solid var(--sg-border);
    flex-shrink: 0;
}

.poi-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-right: 14px;
}

.poi-stat-sep {
    width: 1px;
    height: 24px;
    background: var(--sg-card);
    margin-right: 14px;
    flex-shrink: 0;
}

.poi-stat__val {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: var(--sg-heading);
}

.poi-stat__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sg-muted-soft);
    line-height: 1;
    white-space: nowrap;
}

.poi-stat--danger .poi-stat__val  { color: var(--sg-err-text); }
.poi-stat--success .poi-stat__val { color: var(--sg-online-text); }
.poi-stat--purple  .poi-stat__val { color: var(--sg-purple-text); }

/* Layout */
.poi-layout {
    display: flex;
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
}

.poi-list-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    margin-bottom: 22px; /* outer gap like members page */
}

/* Detail pane frame — the hosted PoiDetail fills it; only this card scrolls */
.poi-detail-card {
    display: flex;
    flex-direction: column;
    flex: 1.05 1 0;
    min-height: 0;
    margin-bottom: 22px; /* outer gap like members page */
    position: relative;
    padding: 0;
    overflow-y: auto;
}

.poi-detail-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: transparent;
    border: none;
    color: var(--sg-muted-soft);
    font-size: 18px;
    cursor: pointer;
    z-index: 2;
}

.poi-detail-close:hover {
    color: var(--sg-heading);
}

/* Toolbar (search + filter pill) */
.poi-list-toolbar {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 16px 18px 10px;
    flex: 0 0 auto;
}

.poi-search {
    flex: 1 1 auto;
}

.poi-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid rgba(96,165,250,0.45);
    background: rgba(30,58,138,0.35);
    color: var(--sg-accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.poi-filter-pill i {
    font-size: 14px;
}

.poi-filter-pill--active {
    background: rgba(59,130,246,.18);
    border-color: var(--sg-accent);
    color: var(--sg-accent);
}

/* Compact filter selects row (Risk / Gender / Age / Sector / Incidents) */
.poi-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 18px 12px;
    border-bottom: 1px solid var(--sg-border);
    flex: 0 0 auto;
}

.poi-filter-row .sg-topbar-select {
    min-width: 0;
}

/* List */
.poi-list-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.poi-list-item {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    background: var(--sg-card);
    border: 1px solid var(--sg-border);
    border-radius: 14px;
    text-align: left;
    color: var(--sg-text);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    width: 100%;
}

.poi-list-item:hover {
    transform: translateY(-1px);
    border-color: rgba(96,165,250,0.35);
}

.poi-list-item--selected {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.35);
}

.poi-list-item__photo {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.poi-list-item__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.poi-list-item__title-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.poi-list-item__name {
    font-size: 16px;
    color: var(--sg-heading);
}

.poi-list-item__alias,
.poi-list-item__meta,
.poi-list-item__lastseen {
    font-size: 12px;
    color: var(--sg-muted-soft);
}

.poi-list-item__side {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.poi-list-item__incidents,
.poi-list-item__updated {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
    font-size: 11px;
    color: var(--sg-muted-soft);
}

.poi-list-item__incidents strong,
.poi-list-item__updated strong {
    color: var(--sg-heading);
    font-size: 14px;
}

.poi-list-item__chevron {
    color: var(--sg-muted-soft);
    font-size: 18px;
}

/* Risk pills (list rows) */
.poi-risk-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.poi-risk-pill--high {
    background: rgba(239,68,68,0.18);
    color: var(--sg-danger);
    border: 1px solid rgba(239,68,68,0.4);
}

.poi-risk-pill--medium {
    background: rgba(249,115,22,0.18);
    color: var(--sg-warning);
    border: 1px solid rgba(249,115,22,0.4);
}

.poi-risk-pill--low {
    background: rgba(59,130,246,0.18);
    color: var(--sg-accent);
    border: 1px solid rgba(59,130,246,0.4);
}

/* Pagination / summary strip */
.poi-pagination {
    display: flex;
    align-items: center;
    margin-top: auto;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--sg-border);
    flex: 0 0 auto;
}

.poi-pagination__summary {
    margin-left: auto;
    font-size: 13px;
    color: var(--sg-muted-soft);
}

/* Responsive */
@media (max-width: 1280px) {
    .poi-layout {
        flex-direction: column;
    }
}

/* ── Create New Profile modal (stays page-side) ───────────────────────── */

.poi-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.poi-modal {
    background: var(--sg-panel);
    border: 1px solid var(--sg-border);
    border-radius: 18px;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}

.poi-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--sg-border);
    flex-shrink: 0;
}

.poi-modal__header h2 {
    margin: 0;
    font-size: 20px;
    color: var(--sg-heading);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.poi-modal__header h2 i {
    color: var(--sg-accent);
}

.poi-modal__body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.poi-modal__row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.poi-modal__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 180px;
    min-width: 0;
}

.poi-modal__field--half {
    flex: 0 1 100px;
}

.poi-modal__field--full {
    flex: 1 1 100%;
}

.poi-modal__field label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--sg-muted-soft);
    font-weight: 600;
}

.poi-modal__required {
    color: var(--sg-err-text);
}

.poi-modal__field input,
.poi-modal__field select,
.poi-modal__field textarea {
    background: var(--sg-card);
    border: 1px solid var(--sg-border);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--sg-heading);
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
}

.poi-modal__field input:focus,
.poi-modal__field select:focus,
.poi-modal__field textarea:focus {
    border-color: #3b82f6;
}

.poi-modal__field select option {
    background: var(--sg-card);
}

.poi-modal__field textarea {
    resize: vertical;
    min-height: 64px;
}

.poi-modal__error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.35);
    border-radius: 8px;
    color: var(--sg-danger);
    font-size: 13px;
}

.poi-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--sg-border);
    flex-shrink: 0;
}

/* Photo upload in modal */
.poi-modal__photo-upload {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.poi-modal__photo-preview {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid var(--sg-border);
    flex-shrink: 0;
}

.poi-modal__photo-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background: var(--sg-card);
    border: 2px dashed var(--sg-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--sg-muted-soft);
    flex-shrink: 0;
}

/* Light theme: soften the filter pill fill (translucent navy over white read muddy) */
[data-sg-theme="light"] .poi-filter-pill { background: rgba(29,78,216,0.10); border-color: rgba(29,78,216,0.35); }

/* ── Browser shape: detail pane (from PoiDetail) ──────────────────────────────────────── */
/* ── PoiDetail — detail surface styles (extracted from PersonsOfInterest page) ── */

.poi-detail-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: transparent;
    border: none;
    color: var(--sg-muted-soft);
    font-size: 18px;
    cursor: pointer;
    z-index: 2;
}

.poi-detail-close:hover {
    color: var(--sg-heading);
}

.poi-detail-header {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 18px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--sg-border);
}

.poi-detail-header__photo {
    width: 110px;
    height: 110px;
    border-radius: 14px;
    object-fit: cover;
}

.poi-detail-header__photo-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.poi-detail-header__photo--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sg-card);
    border: 1px solid var(--sg-border);
    color: var(--sg-muted-soft);
    font-size: 44px;
}

/* "Add / Change Photo" — sized to the photo, wraps cleanly without overlapping. */
.poi-photo-btn {
    width: 110px;
    height: auto;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
    font-size: 12px;
    padding: 6px 8px;
}

.poi-photo-error {
    width: 120px;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    color: var(--sg-danger);
}

.poi-detail-header__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.poi-detail-header__title-row {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.poi-detail-header__title-row h2 {
    margin: 0;
    font-size: 24px;
    color: var(--sg-heading);
}

.poi-detail-header__row {
    font-size: 13px;
    color: var(--sg-subtext);
}

.poi-detail-header__meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    font-size: 12px;
    min-width: 130px;
}

.poi-detail-header__meta > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.poi-detail-header__meta span {
    color: var(--sg-muted-soft);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.06em;
}

.poi-detail-header__meta strong {
    color: var(--sg-heading);
    font-size: 14px;
}

/* Tabs */
.poi-tabs {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    padding: 8px 18px 1px;
    border-bottom: 1px solid var(--sg-border);
    overflow-x: auto;
    overflow-y: hidden;
}

.poi-tab {
    background: transparent;
    border: none;
    color: var(--sg-muted-soft);
    padding: 12px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}

.poi-tab:hover {
    color: var(--sg-heading);
}

.poi-tab--active {
    color: var(--sg-accent);
    border-bottom-color: #3b82f6;
    font-weight: 600;
}

.poi-tab__count {
    color: var(--sg-muted-soft);
    font-size: 12px;
}

/* Detail blocks */
.poi-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 18px 22px;
}

.poi-detail-block {
    background: var(--sg-card);
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    padding: 16px 18px;
}

.poi-detail-block h3 {
    margin: 0 0 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sg-muted-soft);
    font-weight: 700;
}

.poi-feature-list {
    margin: 0;
    padding-left: 18px;
    color: var(--sg-subtext);
    font-size: 13px;
    line-height: 1.8;
}

.poi-risk-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 16px;
    row-gap: 8px;
    margin: 0;
    font-size: 13px;
}

.poi-risk-dl dt {
    color: var(--sg-muted-soft);
}

.poi-risk-dl dd {
    margin: 0;
    color: var(--sg-heading);
    font-weight: 600;
}

.poi-risk-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.poi-risk-dot--high { background: #ef4444; }
.poi-risk-dot--medium { background: #f97316; }
.poi-risk-dot--low { background: #3b82f6; }

/* Risk pills (also used in the header) */
.poi-risk-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.poi-risk-pill--high {
    background: rgba(239,68,68,0.18);
    color: var(--sg-danger);
    border: 1px solid rgba(239,68,68,0.4);
}

.poi-risk-pill--medium {
    background: rgba(249,115,22,0.18);
    color: var(--sg-warning);
    border: 1px solid rgba(249,115,22,0.4);
}

.poi-risk-pill--low {
    background: rgba(59,130,246,0.18);
    color: var(--sg-accent);
    border: 1px solid rgba(59,130,246,0.4);
}

/* Linked incidents */
.poi-incidents-block {
    padding: 0 22px 18px;
}

.poi-incidents-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 10px;
}

.poi-incidents-block__header h3 {
    margin: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sg-muted-soft);
    font-weight: 700;
}

.poi-incidents-table {
    background: var(--sg-card);
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    overflow: hidden;
}

.poi-incidents-row {
    display: grid;
    grid-template-columns: 24px 110px 130px 1fr 100px 110px 18px;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--sg-subtext);
    border-bottom: 1px solid var(--sg-border);
    text-decoration: none;
    transition: background 0.12s;
}

.poi-incidents-row:hover {
    background: rgba(59,130,246,0.08);
    text-decoration: none;
    color: var(--sg-subtext);
}

.poi-incidents-row:last-child {
    border-bottom: none;
}

.poi-incidents-row__id {
    color: var(--sg-heading);
    font-weight: 600;
    font-family: ui-monospace, monospace;
    font-size: 12px;
}

.poi-incidents-row__type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: rgba(239,68,68,0.18);
    color: var(--sg-danger);
    border: 1px solid rgba(239,68,68,0.35);
    width: fit-content;
}

.poi-incidents-row__type--burglary { background: rgba(168,85,247,0.18); color: var(--sg-purple-text); border-color: rgba(168,85,247,0.35); }
.poi-incidents-row__type--suspicious { background: rgba(249,115,22,0.18); color: var(--sg-warning); border-color: rgba(249,115,22,0.35); }
.poi-incidents-row__type--trespassing { background: rgba(234,179,8,0.18); color: #fde047; border-color: rgba(234,179,8,0.35); }
.poi-incidents-row__type--vandalism { background: rgba(236,72,153,0.18); color: #f9a8d4; border-color: rgba(236,72,153,0.35); }
.poi-incidents-row__type--fraud { background: rgba(20,184,166,0.18); color: #5eead4; border-color: rgba(20,184,166,0.35); }
.poi-incidents-row__type--loitering { background: rgba(100,116,139,0.18); color: var(--sg-subtext); border-color: rgba(100,116,139,0.35); }

.poi-incidents-row__location { color: var(--sg-subtext); }
.poi-incidents-row__date { color: var(--sg-muted-soft); font-size: 12px; }

.poi-incidents-row__status {
    font-size: 11px;
    font-weight: 600;
}

.poi-incidents-row__status--review { color: var(--sg-accent); }
.poi-incidents-row__status--closed { color: var(--sg-muted-soft); }

.poi-incidents-row > i:last-child {
    color: var(--sg-muted-soft);
    justify-self: end;
}

/* Footer disclaimer */
.poi-footer-disclaimer {
    margin: 0 22px 22px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 18px;
    background: var(--sg-card);
    border: 1px solid rgba(234,179,8,0.25);
    border-radius: 10px;
    font-size: 12px;
    color: var(--sg-muted-soft);
    line-height: 1.5;
}

.poi-footer-disclaimer i {
    color: var(--sg-warn-text);
    font-size: 18px;
    margin-top: 1px;
}

/* ── Modals owned by this component (create-incident, edit) ──────────────── */

.poi-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.poi-modal {
    background: var(--sg-panel);
    border: 1px solid var(--sg-border);
    border-radius: 18px;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}

.poi-modal--narrow { max-width: 540px; }

.poi-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--sg-border);
    flex-shrink: 0;
}

.poi-modal__header h2 {
    margin: 0;
    font-size: 20px;
    color: var(--sg-heading);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.poi-modal__header h2 i {
    color: var(--sg-accent);
}

.poi-modal__body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.poi-modal__row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.poi-modal__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 180px;
    min-width: 0;
}

.poi-modal__field--half {
    flex: 0 1 100px;
}

.poi-modal__field--full {
    flex: 1 1 100%;
}

.poi-modal__field label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--sg-muted-soft);
    font-weight: 600;
}

.poi-modal__required {
    color: var(--sg-err-text);
}

.poi-modal__field input,
.poi-modal__field select,
.poi-modal__field textarea {
    background: var(--sg-card);
    border: 1px solid var(--sg-border);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--sg-heading);
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
}

.poi-modal__field input:focus,
.poi-modal__field select:focus,
.poi-modal__field textarea:focus {
    border-color: #3b82f6;
}

.poi-modal__field select option {
    background: var(--sg-card);
}

.poi-modal__field textarea {
    resize: vertical;
    min-height: 64px;
}

.poi-modal__error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.35);
    border-radius: 8px;
    color: var(--sg-danger);
    font-size: 13px;
}

.poi-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--sg-border);
    flex-shrink: 0;
}

.poi-tab-body {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.poi-photo-upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sg-border);
}

/* Direct-edit variant of .poi-risk-dl: the value cell holds an input instead of text.
   Kept to POI's row height so the Overview tab has POI's density and still FITS — a tab body
   that scrolls defeats the point of having tabs. */
.voi-edit-dl { align-items: center; }
.voi-edit-dl dd .sg-input {
    width: 100%;
    height: 30px;
    padding: 3px 8px;
    font-size: 13px;
}
.voi-edit-dl dd.voi-dl-static { font-weight: 600; }
.voi-edit-dl dd .voi-warn { margin-top: 4px; }

/* ── Landscape photo slots (vehicles) ────────────────────────────────────────────────────────
   The POI slots are square because a person photo is a portrait. A vehicle photo is landscape,
   and cropping one to a square throws away the length of the car — which is most of what
   identifies it. Same heights as POI so the rows and the header keep their alignment; only the
   width grows. */
.poi-detail-header--wide { grid-template-columns: 190px 1fr auto; }
.poi-detail-header__photo--wide { width: 180px; }
.poi-photo-btn--wide { width: 180px; }

.poi-list-item--wide { grid-template-columns: 112px 1fr auto; }
.poi-list-item__photo--wide { width: 104px; }

/* A row whose vehicle has no photo yet keeps the same slot, so the list does not jump. */
.poi-list-item__photo--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sg-card);
    border: 1px solid var(--sg-border);
    color: var(--sg-muted-soft);
    font-size: 22px;
    flex: 0 0 auto;
}

/* Every control on the toolbar row is the SAME height. POI's toolbar only ever held the search
   box and the archive pill (both 44px), so nothing forced it; adding a 32px select next to them
   made the row read as three unrelated controls. One height, set on the row that owns them. */
.poi-list-toolbar > * { height: 44px; }
.poi-list-toolbar .sg-topbar-select { height: 44px; padding-top: 0; padding-bottom: 0; }

/* Action rows: an input sitting beside a button must be the button's height. Found by measuring
   rather than by being told — same defect as the toolbar select, in two more places. */
.poi-photo-upload-row .sg-input,
.voi-note-add .sg-input {
    height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}
.poi-photo-upload-row,
.voi-note-add {
    align-items: center;
}

/* ── WhatsApp feed: "Add to incident" picker ─────────────────────────────────────────────── */
.wa-create-add { border-color: rgba(96,165,250,0.55); }

.twf-add-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 46vh;
    overflow-y: auto;
    margin-top: 12px;
}

.twf-add-row {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    gap: 12px;
    align-items: center;
    text-align: left;
    padding: 10px 12px;
    background: var(--sg-card);
    border: 1px solid var(--sg-border);
    border-radius: 10px;
    color: var(--sg-text);
    cursor: pointer;
}

.twf-add-row:hover { border-color: rgba(96,165,250,0.65); }
.twf-add-row__ref  { font-weight: 700; font-size: 12px; color: var(--sg-heading); white-space: nowrap; }
.twf-add-row__desc { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.twf-add-row__meta { font-size: 11px; color: var(--sg-muted); white-space: nowrap; }

/* ── Who attended: a line, not a wall ──────────────────────────────────────────────────────
   Eight responder cards plus two security companies pushed the incident itself ~680px down
   the panel. The people are reference material; the incident is the point. */
.inc-attended {
    margin-top: 14px;
    border-top: 1px solid var(--sg-border);
    padding-top: 10px;
}

.inc-attended__head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    color: var(--sg-muted-soft);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.inc-attended__head:hover { color: var(--sg-heading); }
.inc-attended__count {
    background: var(--sg-card);
    border: 1px solid var(--sg-border);
    border-radius: 999px;
    padding: 0 7px;
    font-size: 11px;
}

.inc-attended__list {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sg-text);
}

.inc-attended__sec {
    display: block;
    margin-top: 2px;
    color: var(--sg-ok-text);
}

.inc-people--expanded { margin-top: 8px; }

/* Incidents filter row: one line, fixed control widths. The selects were sizing to their longest
   option and wrapping onto a second line as soon as the scope filter appeared (Jeremy, 10 Sep). */
.inc-filter-row { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; }
.inc-filter-row .sg-topbar-input  { width: 190px; min-width: 0; flex: 0 0 190px; }
.inc-filter-row .sg-topbar-select { width: 138px; min-width: 0; flex: 0 0 138px; }

/* Incidents list: Site / Status / Severity as COLOURED TEXT, not pills. Three pill columns side by
   side read as a row of buttons, and "False Alarm" was wrapping (Jeremy, 10 Sep 2026). Colours
   match the pill variants they replace so nothing changes meaning. */
.inc-txt { font-weight: 600; font-size: 12px; white-space: nowrap; }
.inc-txt--red    { color: var(--sg-err-text); }
.inc-txt--yellow { color: #f59e0b; }
.inc-txt--blue   { color: var(--sg-accent); }
.inc-txt--green  { color: var(--sg-ok-text); }
.inc-txt--gray   { color: var(--sg-muted); }
.inc-txt--shared { color: #38bdf8; }


/* ── Incident discussion: endless content, bounded box ─────────────────────────────────────────
   Grows into whatever room the column has and scrolls inside itself, so the action buttons under
   it are always reachable without scrolling the whole card. flex-basis 0 + min-height:0 is what
   lets a flex child actually shrink; without min-height:0 it refuses to go below its content and
   the overflow never engages. max-height is the fallback for a non-flex parent. */
.inc-discussion-scroll {
    flex: 1 1 0;
    min-height: 96px;
    max-height: 34vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ── Radio log: per-clip delete + failure notice ───────────────────────────────────────────────
   Deliberately quiet until hovered: deleting a transmission is destructive, so the control should
   not compete with the play button that is the row's normal purpose. */
.radio-del {
    background: transparent;
    border: 1px solid rgba(148, 163, 184, .28);
    color: var(--sg-muted);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.6;
    cursor: pointer;
}
.radio-del:hover:not(:disabled) {
    color: var(--sg-err-text, #fca5a5);
    border-color: rgba(239, 68, 68, .55);
    background: rgba(239, 68, 68, .10);
}
.radio-del:disabled { opacity: .45; cursor: default; }

.radio-error {
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--sg-err-text, #fca5a5);
    background: rgba(239, 68, 68, .10);
    border: 1px solid rgba(239, 68, 68, .40);
}


/* ── INTAKE GATE tray (14 Sep 2026): reports waiting for the controller's yes/no ── */
.cr-intake-tray {
    position: fixed; top: 68px; right: 16px; width: 380px; max-width: 92vw; z-index: 190;
    max-height: calc(100vh - 84px); overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
    padding-bottom: 8px;
}
.cr-intake-card { width: 100%; box-shadow: 0 12px 40px rgba(0,0,0,0.45); animation: cr-alert-fade-in 0.2s ease-out; }
.cr-intake-card .cr-alert-card__body { padding: 12px 14px 14px; }
.cr-intake-card .cr-alert-card__row { margin-bottom: 4px; font-size: 13px; }
.cr-intake-card .cr-alert-card__actions { margin-top: 8px; }
.cr-intake-card .cr-alert-dispatch-btn, .cr-intake-card .cr-alert-dismiss-btn { padding: 8px; font-size: 13px; }
.cr-intake-repeat { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.45); border-radius: 8px; padding: 6px 8px; color: #b45309; }
.cr-intake-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px; background: #b45309; color: #fff; font-size: 11px; font-weight: 700; margin: 0 4px; }

/* ── SIGHTINGS page (15 Sep 2026): snapshot tiles + the detail popup's picture | map split ── */
.sgt-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.sgt-tile { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--sg-border); border-radius: 10px;
    background: var(--sg-card); overflow: hidden; cursor: pointer; color: var(--sg-text); }
.sgt-tile:hover { border-color: rgba(96,165,250,0.6); }
.sgt-tile img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #0B1220; display: block; }
.sgt-tile__cap { padding: 8px 10px 9px; }
.sgt-tile__name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgt-tile__age { font-size: 12px; margin-top: 2px; }
.sgt-detail { display: flex; gap: 16px; align-items: stretch; min-height: 420px; }
.sgt-detail__left { flex: 1 1 55%; min-width: 0; }
.sgt-detail__map { position: relative; flex: 1 1 45%; min-width: 260px; min-height: 420px; border-radius: 10px; overflow: hidden; background: #0f172a; border: 1px solid var(--sg-border); }
@media (max-width: 900px) { .sgt-detail { flex-direction: column; } .sgt-detail__map { min-height: 280px; } }

/* ── CAMERA EVENTS cards view (15 Sep 2026): large stills, newest top-left, live ── */
.camev-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; padding: 12px 14px; }
.camev-card { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--sg-border); border-radius: 12px;
    background: var(--sg-card); overflow: hidden; cursor: pointer; color: var(--sg-text); }
.camev-card:hover { border-color: rgba(96,165,250,0.6); }
.camev-card--alarm { border-color: rgba(239,68,68,0.7); }
.camev-card img, .camev-card__noimg { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0B1220; display: block; }
.camev-card__noimg { display: flex; align-items: center; justify-content: center; color: var(--sg-muted); font-size: 28px; }
.camev-card__cap { padding: 10px 12px 11px; display: flex; flex-direction: column; gap: 4px; }
.camev-card__top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.camev-card__name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.camev-card__age { font-size: 12px; color: var(--sg-muted); white-space: nowrap; }
.camev-card__row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.camev-card__time { color: var(--sg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.camev-card__badges { display: flex; gap: 6px; flex-wrap: wrap; min-height: 18px; }
.camev-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sg-muted); white-space: nowrap; }
.camev-live__dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,0.6); animation: camev-pulse 2s infinite; }
@keyframes camev-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
@media (prefers-reduced-motion: reduce) { .camev-live__dot { animation: none; } }

/* ── Camera event lightbox (shared by CameraEventModal; was a <style> block on /camera-events until 15 Sep 2026) ── */
.camfs-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; background: rgba(0,0,0,0.55); color: #fff; border: 1px solid rgba(255,255,255,0.3); transition: background .15s; }
.camfs-nav:hover:not(:disabled) { background: rgba(255,255,255,0.22); }
.camfs-nav:disabled { opacity: 0.28; cursor: default; }
.camfs-nav--left { left: 22px; }
.camfs-nav--right { right: 22px; }
.camfs-caption { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; padding: 8px 16px; border-radius: 20px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 13px; white-space: nowrap; }

/* ── Camera Watch (15 Sep 2026): the monitoring map ── */
.camw-card { display: flex; flex-direction: column; }
.camw-card:fullscreen { background: var(--sg-bg, #0b1220); padding: 10px; border-radius: 0; }
.camw-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; }
.camw-map { flex: 1 1 auto; min-height: 0; border-radius: 12px; overflow: hidden; background: #0f172a; border: 1px solid var(--sg-border); }
.camw-ticker { flex: 0 0 auto; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
.camw-ticker:empty { display: none; }
.camw-tick { flex: 0 0 auto; width: 150px; border-radius: 10px; overflow: hidden; background: var(--sg-card-2, #111a2c); border: 1px solid var(--sg-border); cursor: pointer; transition: transform .12s; }
.camw-tick:hover { transform: translateY(-2px); }
.camw-tick--new { border-color: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,0.25); }
.camw-tick img { display: block; width: 100%; height: 84px; object-fit: cover; background: #0b1220; }
.camw-tick__cap { padding: 5px 8px 6px; font-size: 11.5px; line-height: 1.25; }
.camw-tick__name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.camw-tick__when { color: var(--sg-muted); font-variant-numeric: tabular-nums; }
.camw-quiet { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(245,158,11,0.16); color: #f59e0b; border: 1px solid rgba(245,158,11,0.4); white-space: nowrap; }
.camw-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--sg-muted); font-size: 14px; }

.camw-pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; z-index: 10; user-select: none; pointer-events: none; }
.camw-pin__anchor, .camw-pin__thumb { pointer-events: auto; cursor: pointer; }
.camw-pin--badged { z-index: 30; }
.camw-pin--live { z-index: 60; }
.camw-pin__thumb { width: 168px; border-radius: 10px; overflow: hidden; background: #0b1220; border: 2px solid #22c55e; box-shadow: 0 12px 30px rgba(0,0,0,0.55); margin-bottom: 7px; animation: camw-pop .22s ease-out; }
.camw-pin--person .camw-pin__thumb { border-color: #f59e0b; }
.camw-pin__thumb img { display: block; width: 168px; height: 110px; object-fit: cover; }
.camw-pin__cap { font-size: 11px; color: #e2e8f0; padding: 4px 8px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #0b1220; }
.camw-pin__anchor { position: relative; width: 18px; height: 18px; }
.camw-pin__dot { width: 18px; height: 18px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; box-shadow: 0 0 0 3px rgba(34,197,94,0.35); box-sizing: border-box; }
.camw-pin--offline .camw-pin__dot { background: #64748b; box-shadow: none; }
/* Fired: red footprints over the anchor in place of the dot (15 Sep 2026). */
.camw-pin__feet { display: none; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); color: #ef4444; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 1px 3px rgba(0,0,0,0.7)); }
.camw-pin--badged .camw-pin__dot { visibility: hidden; }
.camw-pin--badged .camw-pin__feet { display: block; }
/* TRAIL mode (control room, 16 Sep 2026 = the mobile Live look): nothing until the camera fires, then BLACK footprints
   that fade over three minutes; the name label never shows. */
.camw-pin--trail { display: none; }
.camw-pin--trail.camw-pin--badged { display: flex; }
.camw-pin--trail .camw-pin__name, .camw-pin--trail .camw-pin__dot { display: none; }
/* Red with a pale halo (Jeremy, 16 Sep 2026: "dark on dark … make them red, something that sticks out"). */
.camw-pin--trail .camw-pin__feet { width: 30px; height: 30px; color: #ef4444; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgba(255,255,255,0.6)); }
.camw-pin--trail.camw-pin--fading { opacity: 0.3; transition: opacity 180s linear; }
/* Control room map "full screen" (16 Sep 2026): the DOCUMENT is the full-screen element (so modals still paint) and
   the named panel is blown up to fill it. Modals sit at z-index 1200 and stay on top. */
html.sg-maxed, html.sg-maxed body { overflow: hidden; }
html.sg-maxed #cr-map-panel {
    position: fixed; inset: 0; z-index: 900; margin: 0; border-radius: 0;
    background: var(--sg-bg, #0b1220); padding: 10px; display: flex; flex-direction: column; max-height: none;
}
html.sg-maxed #cr-map-panel .control-room-map-body { flex: 1 1 auto; min-height: 0; }
/* Legacy element-level full screen, kept for any browser that lands there. */
.control-room-map-panel:fullscreen { background: var(--sg-bg, #0b1220); padding: 10px; border-radius: 0; display: flex; flex-direction: column; }
.control-room-map-panel:fullscreen .control-room-map-body { flex: 1 1 auto; min-height: 0; }
.cr-feet-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; }
.cr-feet-chip svg { width: 18px; height: 18px; }
.cr-feet-chip--off svg { opacity: 0.55; }
.cr-feet-chip__strike { position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; background: #ef4444; transform: rotate(-35deg); }
.cr-feet-chip__glyph { position: relative; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; }
.camw-pin--live .camw-pin__dot { animation: camw-ping 1s ease-out 3; }
.camw-pin__badge { position: absolute; top: -9px; left: 12px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; border: 2px solid #0b1220; box-sizing: content-box; }
.camw-pin__name { margin-top: 3px; font-size: 11px; font-weight: 600; color: #e2e8f0; text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6); white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
@keyframes camw-pop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes camw-ping { 0% { box-shadow: 0 0 0 3px rgba(34,197,94,0.6); } 100% { box-shadow: 0 0 0 16px rgba(34,197,94,0); } }
@media (prefers-reduced-motion: reduce) { .camw-pin__thumb, .camw-pin--live .camw-pin__dot { animation: none; } }

/* INACTIVE (deactivated) vs PENDING (awaiting approval) — 16 Sep 2026. */
.members-status--inactive, .user-profile-status-pill--inactive { background: rgba(100,116,139,0.18) !important; color: #94a3b8 !important; border: 1px solid rgba(100,116,139,0.4) !important; }

/* CONTROL ROOM VIEW SETTINGS (16 Sep 2026): picture-in-picture on trigger (full screen), settings popover. */
.control-room-map-panel { position: relative; }   /* the PiP (and its size template) anchor here, in and out of full screen */
.cr-pip { position: absolute; top: 64px; right: 16px; z-index: 60; border-radius: 12px; overflow: hidden; background: #0b1220; border: 3px solid #22c55e; box-shadow: 0 18px 50px rgba(0,0,0,0.6); cursor: pointer; animation: camw-pop .22s ease-out; }
.cr-pip--person { border-color: #f59e0b; }
.cr-pip img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #0b1220; }
.cr-pip__cap { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; font-size: 14px; color: #e2e8f0; background: #0b1220; }
.cr-pip__cap strong { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-pip__cap span { color: var(--sg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-view-wrap { position: relative; }
.cr-view-pop { position: absolute; top: -6px; right: calc(100% + 8px); z-index: 80;   /* to the LEFT of the chip, so the PiP size template at the top right stays in view */ width: 300px; padding: 12px 14px; border-radius: 12px; background: var(--sg-card); border: 1px solid var(--sg-border); box-shadow: 0 14px 40px rgba(0,0,0,0.45); display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.cr-view-pop label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.cr-view-pop .cr-view-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding-left: 24px; color: var(--sg-muted); }
.cr-view-pop input[type=range] { width: 150px; accent-color: #2563eb; }
.cr-view-pop .cr-view-val { font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; color: var(--sg-text); }
@media (prefers-reduced-motion: reduce) { .cr-pip { animation: none; } }
.cr-pip--preview { border-style: dashed; border-color: #64748b; cursor: default; animation: none; }
.cr-pip__ph { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; aspect-ratio: 16 / 10; background: repeating-linear-gradient(135deg, #111a2c 0 12px, #0b1220 12px 24px); color: #94a3b8; font-size: 18px; font-weight: 700; }
.cr-pip__ph i { font-size: 28px; }