/** * Flagstaff Wildfire Detection — Dispatcher Portal Styles * Industrial precision / emergency operations aesthetic, built on the * EmberSat console tier (/static/console/tokens.css, vendored from the * embersat-design-system repo). Dark-first with a day theme; every * status/urgency/environment color comes from console tokens. */ /* Legacy variable names, re-pointed at console tokens. Existing rules use these aliases; new rules should reference --console-* directly. Defined on body (not :root) so they resolve below the .console / .console--day theme class on . */ body { --header-bg: var(--console-surface-page); --header-text: var(--console-text-primary); --header-border: var(--console-border-subtle); --sidebar-bg: var(--console-surface-panel); --sidebar-border: var(--console-border-subtle); --card-hover: var(--console-surface-hover); --card-active: var(--console-selection-bg); --text-primary: var(--console-text-primary); --text-secondary: var(--console-text-secondary); --text-muted: var(--console-text-tertiary); --accent: var(--console-link); --map-bg: var(--console-surface-page); --link: var(--console-link); /* Agency-confirmed (purple) has no console token yet — local values pending a DS-repo agency treatment (flagged as a spec gap). */ --local-agency-accent: #8B5CF6; --local-agency-text: #C4B5FD; --local-agency-wash: #221A38; } .console--day body { --local-agency-accent: #6B46C1; --local-agency-text: #4C1D95; --local-agency-wash: #EDE9FE; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); background: var(--map-bg); color: var(--text-primary); overflow: hidden; height: 100vh; display: flex; flex-direction: column; } /* ============================================ HEADER ============================================ */ #header { height: 60px; background: var(--header-bg); border-bottom: 1px solid var(--console-border-strong); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; flex-shrink: 0; z-index: 1000; } .header-left { display: flex; align-items: center; gap: 14px; } /* Dual-tone wordmark (EMBER + SAT), Montserrat 900 per brand rule. */ .logo { font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; font-size: 20px; font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } .logo .wm__lead { color: var(--console-text-primary); } .logo .wm__tail { color: var(--console-text-tertiary); } .logo-sub { font-family: var(--font-body); font-size: 12px; color: var(--console-text-tertiary); font-weight: 400; padding-left: 14px; border-left: 1px solid var(--console-border-subtle); } .header-center { display: flex; align-items: center; gap: 18px; } .status-indicator { display: flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-size: 12px; font-weight: 500; letter-spacing: 0.5px; color: var(--console-text-tertiary); } /* System health dot: shape-first (filled = up, hollow = down) — never a red/green pair, no glow. Console StatusDot spec. */ .status-dot { width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--console-border-strong); background: transparent; transition: background 0.3s, border-color 0.3s; } .status-dot.online { background: var(--console-health-ok); border-color: var(--console-health-ok); } .status-dot.error { background: transparent; border-color: var(--console-health-fail-fill); } .status-label { color: var(--header-text); } /* Red budget: neutral unless something is actionable (CONFIRMED present or TTI-critical) — app.js adds .alerting. */ .fire-count-badge { background: var(--console-surface-hover); color: var(--console-text-secondary); font-family: var(--font-heading); font-size: 13px; font-weight: 700; padding: 2px 12px; border-radius: 10px; min-width: 28px; text-align: center; letter-spacing: 0.5px; } .fire-count-badge.alerting { background: var(--console-urgency-critical-fill); color: var(--console-urgency-critical-on-fill); } .fire-count-badge.zero { color: var(--console-text-tertiary); } .fire-count-label { font-family: var(--font-heading); font-size: 11px; font-weight: 500; color: var(--console-text-tertiary); letter-spacing: 0.5px; } .header-right { display: flex; align-items: center; gap: 18px; } .refresh-countdown { font-family: var(--font-mono); font-size: 11px; color: var(--console-text-tertiary); } .refresh-countdown strong { color: var(--console-text-secondary); } .header-clock { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--console-text-primary); } .header-clock small { font-family: var(--font-heading); font-weight: 500; color: var(--console-text-tertiary); font-size: 11px; margin-left: 4px; letter-spacing: 0.5px; } .header-help-btn { background: none; border: 1px solid var(--console-border-strong); color: var(--console-text-secondary); font-size: 13px; font-weight: 700; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; margin-left: 10px; padding: 0; line-height: 22px; text-align: center; } .header-help-btn:hover { border-color: var(--console-text-secondary); color: var(--console-text-primary); } /* ============================================ DEGRADATION BANNER ============================================ */ .band-gap-banner { background: var(--console-urgency-soon-wash); border-bottom: 2px solid var(--console-urgency-soon-fill); padding: 10px 20px; display: flex; align-items: center; gap: 12px; font-family: var(--font-body); font-size: 14px; color: var(--console-urgency-soon-text); z-index: 999; flex-shrink: 0; } .band-gap-icon { font-size: 22px; flex-shrink: 0; } .band-gap-text strong { color: var(--console-urgency-soon-text); } #band-gap-detail { font-size: 12px; color: var(--console-text-secondary); } /* ============================================ MAIN LAYOUT ============================================ */ #main { display: flex; flex: 1; overflow: hidden; } /* ============================================ SIDEBAR ============================================ */ #sidebar { width: 340px; background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; flex-shrink: 0; z-index: 500; box-shadow: var(--console-shadow-seam); } .sidebar-controls { padding: 10px 16px; border-bottom: 1px solid var(--sidebar-border); display: flex; align-items: center; justify-content: space-between; background: var(--console-surface-hover); } .sidebar-filters { padding: 6px 16px 8px 16px; border-bottom: 1px solid var(--sidebar-border); display: flex; flex-wrap: wrap; gap: 4px; background: var(--console-surface-hover); } .filter-btn { font-family: var(--font-heading); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 4px 10px; border: 1px solid var(--sidebar-border); border-radius: 3px; background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s ease; } /* Status-filter legend key: a shrunk map marker (shape + fill + stroke from status-labels.json — retracted = x-glyph) so the always-visible filter bar doubles as the map legend. The chip chrome stays blue; the key, not the chip, carries the status hue, so a control never looks like a detection. Rendered at box=22 geometry, scaled to 15px so hollow shapes stay hollow. */ .chip-key { display: inline-flex; align-items: center; flex-shrink: 0; } .chip-key svg { display: block; width: 15px; height: 15px; } /* Inactive filter: mute the key's hue (still legible) alongside the tertiary label; on/off itself stays carried by the chrome, not the key. */ .filter-btn:not(.active) .chip-key { filter: saturate(0.4) opacity(0.7); } /* Filters are chrome, not status: one selection treatment for every filter (console FilterChip spec) — a confirmed-fires filter must not itself look like a confirmed fire. */ .filter-btn.active { background: var(--console-selection-bg); color: var(--console-link); border-color: var(--console-link); } .filter-btn:hover:not(.active) { border-color: var(--console-border-strong); color: var(--console-text-secondary); background: var(--console-surface-hover); } .filter-btn.agency-filter { border-style: dashed; } .filter-btn[data-filter="agency-confirmed"].active { border-style: solid; } /* Time-window filter row */ .sidebar-time-filter { padding: 6px 16px 4px 16px; border-bottom: 1px solid var(--sidebar-border); display: flex; flex-wrap: wrap; gap: 4px; background: var(--console-surface-hover); } .time-btn { font-family: var(--font-heading); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; border: 1px solid var(--sidebar-border); border-radius: 3px; background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s ease; } .time-btn:hover:not(.active) { border-color: var(--console-border-strong); color: var(--console-text-secondary); } .time-btn.active { background: var(--console-selection-bg); color: var(--console-link); border-color: var(--console-link); } .sidebar-time-custom { padding: 6px 16px 8px 16px; border-bottom: 1px solid var(--sidebar-border); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--console-surface-hover); font-family: var(--font-body); font-size: 11px; color: var(--text-secondary); } .sidebar-time-custom label { display: flex; align-items: center; gap: 4px; } .sidebar-time-custom input[type="datetime-local"], .sidebar-time-custom select { font-family: var(--font-body); font-size: 11px; padding: 2px 4px; border: 1px solid var(--sidebar-border); border-radius: 3px; background: var(--console-surface-panel); color: var(--text-primary); } .sidebar-time-custom button { font-family: var(--font-heading); font-size: 10px; font-weight: 600; text-transform: uppercase; padding: 3px 10px; border: 1px solid var(--console-link); border-radius: 3px; background: var(--console-selection-bg); color: var(--console-link); cursor: pointer; } /* Time-to-impact subset filter: "only show fires with effective ETA <= 2h". Visually distinct (dashed border) to signal it's a subset filter, not a set-membership alert-level filter. Fires red when active. */ .filter-btn.tti-filter-btn { border-style: dashed; margin-left: 6px; } /* Act-now subset filter: on-state text may use the critical color (spec exception) — never a filled red chip. */ .filter-btn[data-filter="tti-critical"].active { background: var(--console-selection-bg); border-color: var(--console-urgency-critical-fill); color: var(--console-urgency-critical-text); border-style: solid; } .sort-control { font-family: var(--font-heading); font-size: 12px; font-weight: 500; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; letter-spacing: 0.5px; } .sort-control select { font-family: var(--font-body); font-size: 12px; border: 1px solid var(--sidebar-border); border-radius: 3px; padding: 4px 8px; background: var(--console-surface-panel); color: var(--text-primary); cursor: pointer; } .incident-count { font-family: var(--font-heading); font-size: 12px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.5px; } /* --- LGA Filter Active Banner --- */ .lga-filter-banner { display: flex; align-items: center; gap: 6px; padding: 5px 16px; background: #7A6548; border-bottom: 1px solid #6B5A40; font-family: var(--font-heading); font-size: 11px; font-weight: 600; color: #fff; letter-spacing: 0.4px; text-transform: uppercase; animation: lga-banner-slide-in 0.2s ease-out; } @keyframes lga-banner-slide-in { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .lga-filter-banner-icon { font-size: 10px; opacity: 0.8; } .lga-filter-banner-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lga-filter-banner-clear { background: none; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 3px; color: #fff; font-size: 13px; font-weight: 700; line-height: 1; width: 20px; height: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s; flex-shrink: 0; } .lga-filter-banner-clear:hover { background: rgba(255, 255, 255, 0.2); border-color: #fff; } .sidebar-list { flex: 1; overflow-y: auto; } .incident-item { padding: 12px 16px; border-bottom: 1px solid var(--sidebar-border); cursor: pointer; display: flex; gap: 10px; transition: background 0.15s ease; min-height: 72px; align-items: stretch; } .incident-item:hover { background: var(--card-hover); } .incident-item.active { background: var(--card-active); } .alert-stripe { width: 4px; border-radius: 2px; flex-shrink: 0; } .alert-stripe.status-confirmed { background: var(--console-status-confirmed-fill); } .alert-stripe.status-likely { background: var(--console-status-likely-fill); } .alert-stripe.status-provisional { background: var(--console-status-provisional-fill); } .alert-stripe.status-monitoring { background: var(--console-status-monitoring-fill); } .alert-stripe.status-retracted { background: var(--console-status-retracted-fill); } .alert-stripe.status-closed { background: var(--console-status-closed-fill); } .incident-content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .incident-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; } .incident-name { font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; letter-spacing: 0.3px; } .incident-alert-badge { font-family: var(--font-heading); font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; white-space: nowrap; } .incident-alert-badge.status-confirmed { background: var(--console-status-confirmed-wash); color: var(--console-status-confirmed-text); } .incident-alert-badge.status-likely { background: var(--console-status-likely-wash); color: var(--console-status-likely-text); } .incident-alert-badge.status-provisional { background: var(--console-status-provisional-wash); color: var(--console-status-provisional-text); } .incident-alert-badge.status-monitoring { background: var(--console-status-monitoring-wash); color: var(--console-status-monitoring-text); } .incident-alert-badge.status-retracted { background: var(--console-status-retracted-wash); color: var(--console-status-retracted-text); } .incident-alert-badge.status-closed { background: var(--console-status-closed-wash); color: var(--console-status-closed-text); } .incident-type { font-family: var(--font-body); font-size: 11px; color: var(--text-muted); } .incident-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); margin-top: 2px; } /* Recency reads by weight, not by borrowing status hues. */ .incident-time.recent { color: var(--console-text-secondary); font-weight: 600; } .incident-time.moderate { color: var(--console-text-secondary); } .sidebar-empty { padding: 40px 20px; text-align: center; color: var(--text-muted); font-family: var(--font-body); font-size: 13px; } /* ============================================ MAP ============================================ */ #map-container { flex: 1; position: relative; } #map { width: 100%; height: 100%; background: var(--map-bg); } .leaflet-control-zoom a { background: var(--console-surface-panel) !important; color: var(--console-text-secondary) !important; border-color: var(--console-border-subtle) !important; width: 32px !important; height: 32px !important; line-height: 32px !important; font-size: 16px !important; } .leaflet-control-zoom a:hover { background: var(--console-surface-hover) !important; } .leaflet-control-layers { border: 1px solid var(--console-border-subtle) !important; border-radius: 4px !important; box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important; font-family: var(--font-body) !important; font-size: 12px !important; } .leaflet-control-attribution { font-family: var(--font-body) !important; font-size: 10px !important; } /* ============================================ DISPATCH CARD POPUP ============================================ */ .leaflet-popup-content-wrapper { border-radius: 6px !important; padding: 0 !important; box-shadow: 0 6px 28px rgba(0,0,0,0.2) !important; border: 1px solid var(--console-border-subtle) !important; overflow: hidden; } .leaflet-popup-content { margin: 0 !important; width: 360px !important; font-family: var(--font-body); max-height: 620px; overflow-y: auto; } .leaflet-popup-tip { background: var(--console-surface-panel) !important; border: 1px solid var(--console-border-subtle) !important; box-shadow: none !important; } .dispatch-card { font-size: 13px; } .dc-status-banner { padding: 12px 16px; font-family: var(--font-heading); font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; } /* On-fill text color differs per status (AA-checked in the DS validator) — never assume white. */ .dc-status-banner.status-confirmed { background: var(--console-status-confirmed-fill); color: var(--console-status-confirmed-on-fill); } .dc-status-banner.status-likely { background: var(--console-status-likely-fill); color: var(--console-status-likely-on-fill); } .dc-status-banner.status-provisional { background: var(--console-status-provisional-fill); color: var(--console-status-provisional-on-fill); } .dc-status-banner.status-monitoring { background: var(--console-status-monitoring-fill); color: var(--console-status-monitoring-on-fill); } .dc-status-banner.status-retracted { background: var(--console-status-retracted-fill); color: var(--console-status-retracted-on-fill); } .dc-status-banner.status-closed { background: var(--console-status-closed-fill); color: var(--console-status-closed-on-fill); } /* Agency-confirmation badges + match provenance */ .agency-badge { display: inline-block; font-family: var(--font-heading); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; padding: 2px 6px; border-radius: 3px; background: var(--local-agency-wash); color: var(--local-agency-text); border: 1px solid var(--local-agency-accent); margin-top: 2px; } .agency-badge.confirmed-only { } .incident-agency-row { margin-top: 2px; } .dc-agency-banner { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--local-agency-wash); border-left: 3px solid var(--local-agency-accent); color: var(--local-agency-text); font-family: var(--font-body); font-size: 12px; margin-bottom: 0; } .dc-agency-banner strong { font-weight: 700; } .rfs-live-dot, .rfs-stale-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .rfs-live-dot { background: var(--console-health-ok); } .rfs-stale-dot { background: transparent; border: 2px solid var(--console-border-strong); box-sizing: border-box; } /* ---- KNOWN vs UNREPORTED cross-reference (WFIGS / Watch Duty) ---- KNOWN reuses the agency (violet) emphasis: an agency already has this fire. UNREPORTED is neutral-by-design — the LABEL carries the meaning (redundant encoding); red stays reserved for act-now urgency, and most events are unreported so a loud colour would be noise. */ .incident-known-row { margin-top: 2px; } .known-badge { display: inline-block; font-family: var(--font-heading); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; padding: 2px 6px; border-radius: 3px; background: var(--local-agency-wash); color: var(--local-agency-text); border: 1px solid var(--local-agency-accent); } .known-badge.unreported { background: var(--console-env-chip-bg); color: var(--console-text-secondary); border: 1px dashed var(--console-border-strong); } /* Card banner (mirrors .dc-agency-banner) */ .dc-known-banner { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-family: var(--font-body); font-size: 12px; margin-bottom: 0; } .dc-known-banner.known { background: var(--local-agency-wash); border-left: 3px solid var(--local-agency-accent); color: var(--local-agency-text); } .dc-known-banner.unreported { background: var(--console-env-chip-bg); border-left: 3px dashed var(--console-border-strong); color: var(--console-text-secondary); } .dc-known-tag { font-family: var(--font-heading); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; padding: 2px 6px; border-radius: 3px; flex-shrink: 0; } .dc-known-banner.known .dc-known-tag { background: var(--local-agency-accent); color: var(--smoke-0); } .dc-known-banner.unreported .dc-known-tag { border: 1px solid var(--console-border-strong); color: var(--console-text-secondary); } .dc-known-banner.known strong { font-weight: 700; } .dc-known-link { color: var(--console-link); text-decoration: none; white-space: nowrap; } .dc-known-link:hover { text-decoration: underline; } .dc-agency-details { padding: 6px 12px 10px 12px; background: var(--local-agency-wash); border-left: 3px solid var(--local-agency-accent); font-family: var(--font-body); font-size: 11px; margin-bottom: 8px; } .dc-agency-details summary { font-family: var(--font-heading); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--local-agency-text); cursor: pointer; padding: 4px 0; } .dc-agency-details[open] summary { margin-bottom: 4px; } .dc-agency-details .dc-row { padding: 2px 0; } .dc-agency-details .dc-label { color: var(--local-agency-text); } .dc-agency-actions { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--console-border-strong); display: flex; gap: 6px; align-items: center; } .rfs-sever-btn { font-family: var(--font-heading); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 10px; background: transparent; color: var(--console-urgency-critical-text); border: 1px solid var(--console-urgency-critical-fill); border-radius: 3px; cursor: pointer; transition: all 0.15s ease; } .rfs-sever-btn:hover { background: var(--console-urgency-critical-fill); color: var(--console-urgency-critical-on-fill); } /* Agency confirm action button in the dispatch card action bar */ .action-btn.confirm:hover { border-color: var(--local-agency-accent); color: var(--local-agency-text); background: var(--local-agency-wash); } .action-btn.confirm.stamped { background: var(--local-agency-wash); color: var(--local-agency-text); border-color: var(--local-agency-accent); box-shadow: inset 0 0 0 1px var(--local-agency-accent); font-weight: 700; } .dc-status-label { font-size: 11px; font-weight: 500; opacity: 0.8; letter-spacing: 0.5px; } .latency-badge { display: inline-block; padding: 1px 7px; border-radius: 3px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; } /* Env grammar: neutral until operationally significant. */ .latency-badge.fast { background: var(--console-env-chip-bg); color: var(--console-text-secondary); } .latency-badge.moderate { background: var(--console-env-danger-wash); color: var(--console-env-danger-text); } .latency-badge.slow { background: var(--console-env-extreme-wash); color: var(--console-env-extreme-text); } .dc-narrative { padding: 8px 16px; font-family: var(--font-body); font-size: 12px; font-style: italic; color: var(--text-secondary); background: var(--console-env-chip-bg); border-bottom: 1px solid var(--console-border-subtle); line-height: 1.4; } .dc-section { padding: 10px 16px; border-bottom: 1px solid var(--console-border-subtle); } .dc-section-title { font-family: var(--font-heading); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); margin-bottom: 6px; } .dc-row { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 0; font-size: 12px; } .dc-label { font-family: var(--font-body); color: var(--text-secondary); font-weight: 400; } .dc-value { color: var(--text-primary); font-weight: 500; text-align: right; max-width: 210px; } .dc-value.mono { font-family: var(--font-mono); font-size: 11px; } .dc-value.subtle { color: var(--text-muted); font-weight: 400; font-size: 11px; } .dc-value.dc-incident-name { font-weight: 600; color: var(--text-primary); letter-spacing: 0.02em; cursor: text; padding: 1px 4px; border-radius: 2px; border: 1px solid transparent; transition: border-color 0.15s ease, background 0.15s ease; outline: none; min-width: 80px; } .dc-value.dc-incident-name:hover { border-color: var(--console-border-subtle); } .dc-value.dc-incident-name:focus { border-color: var(--console-focus-ring); background: var(--console-surface-panel); } .dc-sources { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; } .source-tag { font-family: var(--font-heading); font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 2px; letter-spacing: 0.5px; } /* Neutral data chips: the source NAME is the information (a categorical dataviz palette is a flagged DS-repo gap). */ .source-tag.goes, .source-tag.viirs, .source-tag.modis, .source-tag.firms, .source-tag.dea { background: var(--console-env-chip-bg); color: var(--console-text-secondary); } /* Travel time section */ .dc-travel { padding: 10px 16px; border-bottom: 1px solid var(--console-border-subtle); } .dc-travel-origins { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .origin-pill { font-family: var(--font-heading); font-size: 10px; font-weight: 500; letter-spacing: 0.3px; padding: 3px 9px; border: 1px solid var(--console-border-subtle); border-radius: 12px; background: var(--console-surface-panel); color: var(--text-secondary); cursor: pointer; transition: all 0.15s ease; } .origin-pill:hover { background: var(--console-surface-hover); border-color: var(--text-muted); color: var(--text-primary); } .origin-pill.loading { opacity: 0.6; cursor: wait; } .travel-result { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text-primary); margin-top: 8px; padding: 6px 8px; background: var(--console-surface-hover); border-radius: 3px; display: none; } .travel-result.visible { display: block; } .travel-result .travel-from { font-size: 10px; font-weight: 400; color: var(--text-muted); margin-bottom: 2px; } /* Share location section */ .dc-share { padding: 10px 16px; border-bottom: 1px solid var(--console-border-subtle); } .dc-share-btns { display: flex; gap: 6px; margin-top: 6px; } .dc-btn { font-family: var(--font-heading); font-size: 11px; font-weight: 600; letter-spacing: 0.5px; padding: 6px 14px; border: 1px solid var(--console-border-subtle); border-radius: 3px; background: var(--console-surface-panel); color: var(--text-secondary); cursor: pointer; transition: all 0.15s ease; } .dc-btn:hover { background: var(--console-surface-hover); border-color: var(--console-text-tertiary); color: var(--text-primary); } .dc-btn.copied { background: var(--console-selection-bg); color: var(--console-link); border-color: var(--console-link); } .qr-container { display: none; margin-top: 10px; text-align: center; } .qr-container.visible { display: block; } .qr-container svg { width: 180px; height: 180px; } .qr-label { font-family: var(--font-body); font-size: 10px; color: var(--text-muted); margin-top: 4px; } /* Actions row */ .dc-actions { padding: 10px 16px; display: flex; gap: 8px; background: var(--console-surface-hover); } /* ============================================ BOTTOM BAR ============================================ */ #bottombar { height: 34px; background: var(--console-surface-panel); border-top: 1px solid var(--sidebar-border); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-family: var(--font-body); font-size: 11px; color: var(--text-muted); flex-shrink: 0; } .bottombar-links { display: flex; gap: 18px; } .bottombar-links a { color: var(--link); text-decoration: none; font-weight: 500; transition: color 0.15s ease; } .bottombar-links a:hover { color: var(--console-link-hover); text-decoration: underline; } .bottombar-right { display: flex; align-items: center; gap: 14px; } .refresh-indicator { display: none; align-items: center; gap: 6px; color: var(--console-link); font-weight: 500; } .refresh-indicator.active { display: flex; } .spinner { width: 12px; height: 12px; border: 2px solid var(--console-border-subtle); border-top-color: var(--console-link); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================ OVERLAYS ============================================ */ .overlay-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 2000; } .overlay-modal.open { display: flex; align-items: center; justify-content: center; } .modal-card { background: var(--console-surface-panel); border-radius: 6px; padding: 24px 32px; box-shadow: 0 8px 40px rgba(0,0,0,0.25); max-width: 520px; width: 90%; } .modal-card h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-primary); letter-spacing: 0.5px; } .legend-item { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 13px; } .legend-swatch { width: 28px; height: 14px; border-radius: 2px; flex-shrink: 0; } .legend-item-label { font-family: var(--font-heading); font-weight: 600; min-width: 130px; letter-spacing: 0.3px; } .legend-item-desc { color: var(--text-secondary); } .modal-close { margin-top: 16px; text-align: right; } .modal-close button { font-family: var(--font-heading); font-size: 12px; font-weight: 600; letter-spacing: 0.5px; padding: 6px 18px; border: 1px solid var(--console-border-subtle); border-radius: 3px; background: var(--console-surface-panel); cursor: pointer; color: var(--text-primary); transition: all 0.15s ease; } .modal-close button:hover { background: var(--console-surface-hover); } /* Alert info table in overlay */ .alert-info-table { width: 100%; font-size: 12px; border-collapse: collapse; font-family: var(--font-body); } .alert-info-table thead tr { border-bottom: 2px solid var(--console-border-subtle); } .alert-info-table th { text-align: left; padding: 6px 8px; font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.5px; color: var(--text-muted); font-size: 10px; text-transform: uppercase; } .alert-info-table tbody tr { border-bottom: 1px solid var(--console-border-subtle); } .alert-info-table tbody tr:last-child { border-bottom: none; } .alert-info-table td { padding: 8px; } .alert-info-table .alert-name { font-family: var(--font-heading); font-weight: 700; } /* ============================================ SCROLLBAR ============================================ */ .sidebar-list::-webkit-scrollbar { width: 6px; } .sidebar-list::-webkit-scrollbar-track { background: transparent; } .sidebar-list::-webkit-scrollbar-thumb { background: var(--console-border-strong); border-radius: 3px; } .sidebar-list::-webkit-scrollbar-thumb:hover { background: var(--console-text-tertiary); } .leaflet-popup-content::-webkit-scrollbar { width: 4px; } .leaflet-popup-content::-webkit-scrollbar-track { background: transparent; } .leaflet-popup-content::-webkit-scrollbar-thumb { background: var(--console-border-strong); border-radius: 2px; } /* ============================================ QR CODE MODAL ============================================ */ .qr-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 10000; opacity: 0; transition: opacity 0.2s ease; } .qr-modal-overlay.visible { opacity: 1; } .qr-modal { background: var(--console-surface-panel); border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); width: 320px; overflow: hidden; transform: scale(0.9); transition: transform 0.2s ease; } .qr-modal-overlay.visible .qr-modal { transform: scale(1); } .qr-modal-header { background: var(--header-bg); color: var(--header-text); padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-heading); font-weight: 600; font-size: 15px; letter-spacing: 0.3px; } .qr-modal-close { background: none; border: none; color: var(--header-text); font-size: 22px; cursor: pointer; padding: 0 4px; line-height: 1; opacity: 0.7; transition: opacity 0.15s ease; } .qr-modal-close:hover { opacity: 1; } .qr-modal-body { padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .qr-modal-svg svg { display: block; width: 200px; height: 200px; } .qr-modal-label { font-family: var(--font-body); font-size: 13px; color: var(--console-text-secondary); text-align: center; line-height: 1.5; } .qr-modal-coords { font-size: 12px; color: var(--console-text-tertiary); padding: 4px 10px; background: var(--console-env-chip-bg); border-radius: 4px; } /* ============================================ DETECTION TIMELINE MODAL ============================================ */ .timeline-modal { background: var(--console-surface-panel); border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); width: 560px; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; transform: scale(0.9); transition: transform 0.2s ease; } .qr-modal-overlay.visible .timeline-modal { transform: scale(1); } .timeline-body { overflow-y: auto; padding: 16px; flex: 1; } .timeline-loading { text-align: center; padding: 32px; color: var(--console-text-tertiary); font-family: var(--font-body); font-size: 13px; } .timeline-summary { background: var(--console-env-chip-bg); border-radius: 6px; padding: 12px; margin-bottom: 16px; } .timeline-summary-row { display: flex; justify-content: space-between; padding: 2px 0; font-family: var(--font-body); font-size: 13px; } .tl-status { padding: 1px 8px; border-radius: 3px; font-family: var(--font-heading); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; } .tl-status.status-confirmed { background: var(--console-status-confirmed-wash); color: var(--console-status-confirmed-text); } .tl-status.status-likely { background: var(--console-status-likely-wash); color: var(--console-status-likely-text); } .tl-status.status-provisional { background: var(--console-status-provisional-wash); color: var(--console-status-provisional-text); } .tl-status.status-monitoring { background: var(--console-status-monitoring-wash); color: var(--console-status-monitoring-text); } .tl-status.status-retracted { background: var(--console-status-retracted-wash); color: var(--console-status-retracted-text); } .tl-status.status-closed { background: var(--console-status-closed-wash); color: var(--console-status-closed-text); } .timeline-entries { position: relative; padding-left: 20px; } /* Vertical line */ .timeline-entries::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--console-border-subtle); } .tl-entry { position: relative; padding: 8px 0 8px 16px; border-bottom: 1px solid var(--console-border-subtle); } .tl-entry:last-child { border-bottom: none; } .tl-marker { position: absolute; left: -16px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--console-link); border: 2px solid var(--console-surface-panel); z-index: 1; } .tl-time { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } .tl-time .mono { font-size: 12px; font-weight: 500; color: var(--console-text-primary); } .tl-ago { font-family: var(--font-body); font-size: 11px; color: var(--console-text-tertiary); } .tl-details { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-family: var(--font-body); font-size: 12px; } .tl-sat { color: var(--console-text-secondary); font-style: italic; } .tl-conf, .tl-frp { color: var(--console-text-tertiary); font-size: 11px; } .tl-coords { font-size: 11px; color: var(--console-text-tertiary); margin-top: 2px; } /* ============================================ FRP TIMELINE CHART ============================================ */ .frp-chart-container { height: 250px; padding: 16px 8px 8px 8px; position: relative; } .frp-chart-container canvas { width: 100% !important; height: 100% !important; } .frp-chart-legend { font-family: var(--font-body); font-size: 11px; color: var(--console-text-tertiary); text-align: center; padding: 0 16px 8px 16px; } .frp-legend-marker { display: inline-block; width: 8px; height: 8px; border: 1.5px solid var(--console-text-tertiary); border-radius: 50%; background: var(--console-env-chip-bg); vertical-align: middle; margin-right: 2px; } /* Observation legend colors */ .obs-legend-fire { color: var(--console-status-confirmed-text); } .obs-legend-clear { color: var(--console-link); } .obs-legend-cloud { color: var(--console-text-tertiary); } .obs-legend-invalid { color: var(--console-text-tertiary); } .obs-legend-leo { color: var(--console-status-likely-text); font-size: 13px; vertical-align: middle; } .obs-legend-frp { color: var(--console-dv-line-frp); font-size: 13px; vertical-align: middle; } /* Closure evidence progress bar */ .closure-evidence-bar { margin: 4px 16px 8px 16px; padding: 8px 12px; background: var(--console-env-chip-bg); border: 1px solid var(--console-border-subtle); border-radius: 6px; } .closure-label { font-family: var(--font-heading); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--console-text-tertiary); margin-bottom: 4px; } .closure-progress { height: 6px; background: var(--console-env-chip-bg); border-radius: 3px; overflow: hidden; margin-bottom: 4px; } .closure-fill { height: 100%; background: var(--console-link); border-radius: 3px; transition: width 0.3s ease; } .closure-details { font-size: 10px; color: var(--console-text-tertiary); } /* Detail box shown on chart point click */ .frp-detail-box { display: none; margin: 8px 16px 12px 16px; padding: 10px 14px; background: var(--console-env-chip-bg); border: 1px solid var(--console-border-subtle); border-radius: 6px; } .frp-detail-grid { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12px; } .frp-detail-label { font-family: var(--font-body); color: var(--console-text-secondary); font-weight: 400; } .frp-detail-value { font-family: var(--font-body); color: var(--console-text-primary); font-weight: 500; text-align: right; } .frp-detail-value.mono { font-family: var(--font-mono); font-size: 11px; } /* Detection Log collapsible section */ .tl-log-section { margin-top: 4px; } .tl-log-toggle { display: block; width: 100%; text-align: left; background: none; border: none; border-top: 1px solid var(--console-border-subtle); padding: 10px 0 6px 0; font-family: var(--font-heading); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--console-text-tertiary); cursor: pointer; transition: color 0.15s ease; } .tl-log-toggle:hover { color: var(--console-text-secondary); } .tl-log-toggle-icon { font-size: 9px; display: inline-block; margin-right: 4px; transition: transform 0.15s ease; } .tl-log-entries { max-height: 300px; overflow-y: auto; } .tl-log-entries::-webkit-scrollbar { width: 4px; } .tl-log-entries::-webkit-scrollbar-track { background: transparent; } .tl-log-entries::-webkit-scrollbar-thumb { background: var(--console-border-strong); border-radius: 2px; } /* ============================================ ANNOTATION ACTION BAR ============================================ */ .dc-actions-bar { display: flex; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--console-border-subtle); background: var(--console-env-chip-bg); align-items: flex-end; } .dc-author-prompt { display: flex; align-items: center; flex-shrink: 0; } .author-input { width: 44px; border: 1px solid var(--console-border-subtle); border-radius: 3px; padding: 4px 5px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-align: center; text-transform: uppercase; letter-spacing: 0.5px; color: var(--console-text-primary); background: var(--console-surface-panel); } .author-input::placeholder { color: var(--console-text-tertiary); font-weight: 400; text-transform: none; } .action-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1.5px solid var(--console-border-subtle); border-radius: 4px; background: transparent; cursor: pointer; transition: all 0.15s ease; font-family: var(--font-heading); } .action-icon { font-size: 16px; line-height: 1; } .action-label { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--console-text-tertiary); } /* Actions are chrome: one recorded-state treatment; the LABEL says which action (console AnnotationLog spec). Dismiss is destructive-adjacent. */ .action-btn.ack:hover, .action-btn.flag:hover, .action-btn.resources:hover { border-color: var(--console-link); color: var(--console-link); background: var(--console-selection-bg); } .action-btn.dismiss:hover { border-color: var(--console-urgency-critical-fill); color: var(--console-urgency-critical-text); background: var(--console-urgency-critical-wash); } /* Active/stamped state — bold, filled, unmistakable */ .action-btn.ack.stamped, .action-btn.flag.stamped, .action-btn.resources.stamped { border-color: var(--console-link); background: var(--console-selection-bg); color: var(--console-link); box-shadow: inset 0 0 0 1px var(--console-link); font-weight: 700; } .action-btn.dismiss.stamped { border-color: var(--console-urgency-critical-fill); background: var(--console-urgency-critical-wash); color: var(--console-urgency-critical-text); box-shadow: inset 0 0 0 1px var(--console-urgency-critical-fill); font-weight: 700; } /* Stamped icon gets a filled-circle indicator */ .action-btn.stamped .action-icon { position: relative; } .action-btn.stamped .action-icon::after { content: ''; position: absolute; top: -2px; right: -6px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Stamped label color inherits from parent */ .action-btn.stamped .action-label { color: inherit; letter-spacing: 1px; } /* Hover on stamped shows a lighter state (hint: click to undo) */ .action-btn.stamped:hover { opacity: 0.7; } /* Note input */ .dc-note-input { display: flex; gap: 6px; padding: 6px 16px 8px 16px; border-bottom: 1px solid var(--console-border-subtle); } .dc-note-input input { flex: 1; border: 1px solid var(--console-border-subtle); border-radius: 3px; padding: 5px 8px; font-family: var(--font-body); font-size: 12px; background: var(--console-surface-panel); color: var(--console-text-primary); } .dc-note-input input::placeholder { color: var(--console-text-tertiary); font-style: italic; } .dc-note-input button { border: 1px solid var(--console-border-subtle); border-radius: 3px; background: transparent; padding: 4px 10px; cursor: pointer; font-size: 14px; color: var(--console-text-secondary); transition: all 0.15s ease; } .dc-note-input button:hover { background: var(--console-selection-bg); color: var(--console-link); border-color: var(--console-link); } /* Annotation log */ .dc-annotation-log { max-height: 120px; overflow-y: auto; padding: 0 16px; } .dc-annotation-log::-webkit-scrollbar { width: 4px; } .dc-annotation-log::-webkit-scrollbar-track { background: transparent; } .dc-annotation-log::-webkit-scrollbar-thumb { background: var(--console-border-strong); border-radius: 2px; } .annotation-entry { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; font-family: var(--font-body); font-size: 11px; color: var(--console-text-secondary); border-bottom: 1px solid var(--console-border-subtle); } .annotation-entry:last-child { border-bottom: none; } .ann-icon { font-size: 12px; width: 16px; text-align: center; flex-shrink: 0; } .ann-time { font-size: 10px; color: var(--console-text-tertiary); flex-shrink: 0; } .ann-action { font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; flex-shrink: 0; } .ann-author { font-size: 10px; color: var(--console-text-tertiary); flex-shrink: 0; } .ann-note { font-style: italic; color: var(--console-text-secondary); } /* Sidebar annotation badges */ .ann-badge { display: inline-block; width: 14px; height: 14px; line-height: 14px; text-align: center; font-size: 9px; border-radius: 2px; margin-left: 4px; vertical-align: middle; } .ann-badge.ack, .ann-badge.flagged, .ann-badge.resources { background: var(--console-selection-bg); color: var(--console-link); } .ann-badge.agency { background: var(--local-agency-wash); color: var(--local-agency-text); } /* Dismissed events in sidebar */ .incident-item.dismissed { opacity: 0.45; } .incident-item.dismissed .incident-name { text-decoration: line-through; } /* Station tooltips */ .station-tooltip { font-family: var(--font-body); font-size: 11px; padding: 3px 8px; background: var(--console-surface-raised); color: var(--console-text-primary); border: 1px solid var(--console-border-subtle); border-radius: 3px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); } .station-tooltip::before { border-top-color: var(--console-surface-raised) !important; } /* Nearest station pills */ .origin-pill.nearest-station { border-color: var(--console-link); color: var(--console-text-primary); font-weight: 500; } .pill-dist { font-family: var(--font-mono); font-size: 9px; color: var(--console-text-tertiary); margin-left: 2px; } /* Travel time improvements */ .travel-group-label { font-family: var(--font-heading); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--console-text-tertiary); padding: 6px 0 3px 0; } .travel-group-label:first-child { padding-top: 0; } .travel-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 2px; } .travel-time-value { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--console-text-primary); letter-spacing: -0.02em; } .travel-time-sep { color: var(--console-text-tertiary); margin: 0 2px; } .travel-time-detail { font-family: var(--font-body); font-size: 12px; color: var(--console-text-secondary); } /* Station search modal */ .station-search-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--console-border-subtle); cursor: pointer; transition: background 0.1s ease; } .station-search-item:hover { background: rgba(230, 126, 34, 0.06); margin: 0 -16px; padding: 8px 16px; } .station-search-name { font-family: var(--font-body); font-size: 13px; color: var(--console-text-primary); } .station-search-dist { font-size: 11px; color: var(--console-text-tertiary); flex-shrink: 0; } /* Station loading skeleton */ .travel-loading { font-family: var(--font-body); font-size: 11px; color: var(--console-text-tertiary); font-style: italic; } /* Skeleton pill placeholders */ @keyframes skeleton-pulse { 0% { opacity: 0.3; } 50% { opacity: 0.6; } 100% { opacity: 0.3; } } .skeleton-pill { display: inline-block; width: 90px; height: 26px; background: var(--console-border-subtle); border-radius: 14px; animation: skeleton-pulse 1.2s ease-in-out infinite; } /* Traffic badge */ .traffic-badge { display: inline-block; font-family: var(--font-heading); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 2px; margin-left: 6px; background: var(--console-env-chip-bg); color: var(--console-text-tertiary); } .traffic-badge.live { background: var(--console-env-chip-bg); color: var(--console-text-secondary); } .travel-directions-link { display: inline-block; margin-left: 8px; font-family: var(--font-heading); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--console-link); text-decoration: none; padding: 2px 6px; border-radius: 2px; background: var(--console-selection-bg); } .travel-directions-link:hover { text-decoration: underline; } /* Cities collapsed by default */ .travel-cities-details { margin-top: 4px; } .travel-cities-details summary { list-style: none; cursor: pointer; } .travel-cities-details summary::-webkit-details-marker { display: none; } .travel-cities-details summary::before { content: '\25B6 '; font-size: 8px; margin-right: 3px; } .travel-cities-details[open] summary::before { content: '\25BC '; } /* Apparatus routing */ .route-apparatus-row { display: grid; grid-template-columns: auto minmax(130px, 1fr); gap: 5px 8px; align-items: center; margin: 4px 0 8px; padding: 8px; border: 1px solid var(--console-border-subtle); background: var(--console-surface-panel); border-radius: 3px; } .route-apparatus-row label { font-family: var(--font-heading); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--console-text-secondary); } .route-apparatus-row > span { grid-column: 1 / -1; font-size: 10px; color: var(--console-text-tertiary); } .route-apparatus-select, .road-report-form select, .road-report-form input, .road-report-form textarea, .portal-auth-form input, .portal-auth-form select { width: 100%; box-sizing: border-box; padding: 7px 8px; border: 1px solid var(--console-border-subtle); border-radius: 3px; background: var(--console-surface-raised); color: var(--console-text-primary); font: 12px var(--font-body); } .route-loading { color: var(--console-text-secondary); font-size: 12px; padding: 8px 0; } .route-unavailable { color: var(--console-status-provisional-text); font-size: 12px; margin-bottom: 6px; } .route-fallback-label, .route-version { color: var(--console-text-tertiary); font-size: 10px; margin: 4px 0; } .route-warning, .route-advisory-text { margin-top: 7px; padding: 7px 8px; border-left: 3px solid var(--console-status-provisional-fill); color: var(--console-text-secondary); background: var(--console-surface-panel); font-size: 10px; line-height: 1.4; } .route-result-header { display: flex; justify-content: space-between; gap: 8px; align-items: center; color: var(--console-text-primary); font-size: 11px; } .route-advisory-badge { padding: 2px 6px; border: 1px solid var(--console-status-provisional-fill); border-radius: 10px; color: var(--console-status-provisional-text); font-family: var(--font-heading); font-size: 8px; text-transform: uppercase; letter-spacing: 0.6px; } .route-alternatives { display: grid; gap: 5px; margin-top: 7px; } .route-alternative { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%; padding: 8px; text-align: left; border: 1px solid var(--console-border-subtle); border-left: 4px solid var(--console-text-tertiary); border-radius: 3px; background: var(--console-surface-panel); color: var(--console-text-primary); cursor: pointer; } .route-alternative:hover { background: var(--console-surface-hover); } .route-alternative.selected { border-color: var(--console-link); border-left-color: var(--console-status-provisional-fill); background: var(--console-selection-bg); } .route-alt-title { font-family: var(--font-heading); font-size: 11px; font-weight: 700; } .route-alt-confidence { color: var(--console-text-primary); font-family: var(--font-mono); font-size: 10px; } .route-alt-meta, .route-alt-stage { color: var(--console-text-secondary); font-size: 10px; } .route-alt-stage { grid-column: 1 / -1; } .route-alt-warnings { grid-column: 1 / -1; margin: 4px 0 0 16px; padding: 0; color: var(--console-status-provisional-text); font-size: 9px; line-height: 1.35; } .route-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .route-report-notice { padding: 7px; margin-bottom: 6px; background: var(--console-selection-bg); color: var(--console-text-primary); border: 1px solid var(--console-link); font-size: 11px; } .road-report-modal { max-width: 520px; } .road-report-form, .portal-auth-form { display: grid; gap: 10px; padding: 16px; } .road-report-form label, .portal-auth-form label { display: grid; gap: 4px; color: var(--console-text-secondary); font: 600 10px var(--font-heading); text-transform: uppercase; letter-spacing: 0.5px; } .road-report-form textarea { resize: vertical; } .road-report-location, .reporter-identity { color: var(--console-text-secondary); font-size: 11px; } .form-error { min-height: 16px; color: var(--console-status-provisional-text); font-size: 11px; } .dc-btn.primary { color: var(--console-text-primary); border-color: var(--console-link); background: var(--console-selection-bg); } /* Optional account controls */ .account-btn { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-note { margin: 0; color: var(--console-text-secondary); font-size: 11px; line-height: 1.45; } .portal-user-list { display: grid; gap: 5px; max-height: 220px; overflow: auto; } .portal-user-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--console-border-subtle); font-size: 11px; } /* ============================================ ENVIRONMENT / WEATHER / TERRAIN ============================================ */ .dc-environment { padding: 10px 16px; border-bottom: 1px solid var(--console-border-subtle); } .dc-env-loading { padding: 10px 16px; border-bottom: 1px solid var(--console-border-subtle); color: var(--text-muted); font-size: 12px; } /* Wind primary display */ .dc-env-wind { margin-bottom: 6px; } .dc-env-wind-primary { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .dc-env-wind-stats { display: flex; flex-direction: column; line-height: 1.1; } .dc-env-wind-speed { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; } .dc-env-wind-speed small { font-size: 11px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0; } .dc-env-wind-dir { font-family: var(--font-heading); font-size: 11px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.5px; } /* Wind severity badges */ .dc-env-wind-severity { font-family: var(--font-heading); font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; margin-left: auto; } /* Env grammar: readings are data — neutral chips, color from dangerous up. */ .dc-env-wind-severity.wind-calm, .dc-env-wind-severity.wind-light, .dc-env-wind-severity.wind-moderate, .dc-env-wind-severity.wind-strong { background: var(--console-env-chip-bg); color: var(--console-env-chip-text); } .dc-env-wind-severity.wind-danger { background: var(--console-env-danger-wash); color: var(--console-env-danger-text); } .dc-env-wind-severity.wind-extreme { background: var(--console-env-extreme-wash); color: var(--console-env-extreme-text); } /* Conditions row */ .dc-env-conditions { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 12px; } .dc-env-condition-tag { font-family: var(--font-body); font-size: 12px; color: var(--text-secondary); font-weight: 500; } .dc-env-temp { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-primary); } .dc-env-humidity { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); } /* Subrows (precip, gusts, forecast summary) */ .dc-env-subrow { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 0; font-size: 12px; } /* Precipitation: a number, not an alarm. */ .precip-none { color: var(--console-text-tertiary); } .precip-trace, .precip-light { color: var(--console-text-secondary); } .precip-moderate { color: var(--console-text-secondary); font-weight: 600; } .precip-heavy { color: var(--console-text-primary); font-weight: 700; } /* Forecast strip */ .dc-env-forecast { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--console-border-subtle); } .dc-env-forecast-label { font-family: var(--font-heading); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 4px; } .dc-env-forecast-strip { display: flex; gap: 2px; } .dc-env-forecast-cell { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 2px; background: var(--console-env-chip-bg); border-radius: 3px; min-width: 0; } .dc-env-forecast-cell .fc-time { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); } .dc-env-forecast-cell .fc-speed { font-family: var(--font-heading); font-size: 11px; font-weight: 600; } .dc-env-forecast-cell .fc-speed.wind-calm, .dc-env-forecast-cell .fc-speed.wind-light, .dc-env-forecast-cell .fc-speed.wind-moderate, .dc-env-forecast-cell .fc-speed.wind-strong { color: var(--console-text-secondary); } .dc-env-forecast-cell .fc-speed.wind-danger { color: var(--console-env-danger-text); } .dc-env-forecast-cell .fc-speed.wind-extreme { color: var(--console-env-extreme-text); } .dc-env-forecast-cell .fc-precip { font-family: var(--font-mono); font-size: 9px; color: var(--console-text-secondary); font-weight: 500; } /* Terrain section */ .dc-env-terrain { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--console-border-subtle); } .dc-env-terrain-header { display: flex; align-items: center; gap: 10px; padding: 2px 0; } .dc-env-terrain-elev { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; } .dc-env-terrain-slope { font-family: var(--font-heading); font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; } .dc-env-terrain-slope.slope-flat, .dc-env-terrain-slope.slope-gentle, .dc-env-terrain-slope.slope-moderate { background: var(--console-env-chip-bg); color: var(--console-env-chip-text); } .dc-env-terrain-slope.slope-steep { background: var(--console-env-danger-wash); color: var(--console-env-danger-text); } .dc-env-terrain-slope.slope-extreme { background: var(--console-env-extreme-wash); color: var(--console-env-extreme-text); } .dc-env-terrain-aspect { font-family: var(--font-heading); font-size: 11px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.3px; } .dc-env-terrain-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; } .dc-env-terrain-tag { font-family: var(--font-heading); font-size: 10px; font-weight: 600; letter-spacing: 0.5px; padding: 1px 7px; border-radius: 2px; text-transform: capitalize; } .dc-env-terrain-tag.position, .dc-env-terrain-tag.relief, .dc-env-terrain-tag.landcover { background: var(--console-env-chip-bg); color: var(--console-env-chip-text); } .dc-env-terrain-desc { font-family: var(--font-body); font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.3; } /* Sidebar wind badge */ .wind-badge { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-heading); font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 2px; vertical-align: middle; letter-spacing: 0.3px; } .wind-badge.wind-calm, .wind-badge.wind-light, .wind-badge.wind-moderate, .wind-badge.wind-strong { background: var(--console-env-chip-bg); color: var(--console-env-chip-text); } .wind-badge.wind-danger { background: var(--console-env-danger-wash); color: var(--console-env-danger-text); } .wind-badge.wind-extreme { background: var(--console-env-extreme-wash); color: var(--console-env-extreme-text); } /* Map wind arrow markers */ .wind-map-arrow { background: none !important; border: none !important; pointer-events: none; } /* Wind particle animation canvas */ .wind-particle-canvas { pointer-events: none; opacity: 0.85; } /* ============================================================ VALUES AT RISK ============================================================ */ .dc-var-section { border-top: 1px solid var(--console-border-subtle); } .var-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .var-badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 10px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.5px; } .var-composite { font-size: 16px; font-weight: 700; color: var(--console-text-primary); } .var-summary { font-size: 10px; color: var(--console-text-tertiary); line-height: 1.3; flex: 1; min-width: 120px; } .var-bars { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; } .var-bar-row { display: flex; align-items: center; gap: 6px; } .var-cat-label { font-size: 10px; color: var(--console-text-tertiary); width: 52px; flex-shrink: 0; text-align: right; } .var-bar-track { flex: 1; height: 6px; background: var(--console-env-chip-bg); border-radius: 3px; overflow: hidden; } .var-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; } .var-bar-fill.var-people { background: #E74C3C; } .var-bar-fill.var-wui { background: #2ECC71; } .var-bar-fill.var-infra { background: #E67E22; } .var-bar-fill.var-services { background: #3498DB; } .var-bar-fill.var-heritage { background: #8E44AD; } .var-bar-val { font-size: 10px; color: var(--console-text-tertiary); width: 24px; text-align: right; font-family: var(--font-mono); } .var-residential-detail { font-size: 11px; color: var(--console-text-secondary); padding: 4px 0 2px; line-height: 1.4; } .var-res-label { color: var(--console-text-secondary); font-weight: 600; } .var-res-source { font-size: 9px; color: var(--console-text-tertiary); margin-left: 6px; } .var-details { margin-top: 4px; } .var-details summary { font-size: 10px; color: var(--console-text-tertiary); cursor: pointer; list-style: none; } .var-details summary::-webkit-details-marker { display: none; } .var-details summary::before { content: '\25B6 '; font-size: 8px; margin-right: 3px; } .var-details[open] summary::before { content: '\25BC '; } .var-asset-list { margin-top: 4px; max-height: 200px; overflow-y: auto; } .var-asset-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 10px; border-bottom: 1px solid var(--console-border-subtle); } .var-asset-name { flex: 1; color: var(--console-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .var-asset-cat { color: var(--console-text-tertiary); font-size: 9px; width: 70px; flex-shrink: 0; } .var-asset-dist { color: var(--console-text-tertiary); width: 44px; flex-shrink: 0; text-align: right; } /* Time-to-impact display — 3-line vertical layout inside the value column: [ETA badge expected] / [earliest X · latest Y] / [to Asset (cat, dist)] The dispatch card body is a light surface (text ~#333), so these are dark-on-light colours. The critical tier uses accent red on a light pink wash. */ .tti-row .tti-eta-line { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; justify-content: flex-end; } .tti-row .tti-eta { font-weight: 600; color: var(--console-text-primary); white-space: nowrap; } .tti-row .tti-bounds { margin-top: 1px; font-size: 10px; color: var(--console-text-tertiary); } .tti-row .tti-to { margin-top: 3px; color: var(--console-text-secondary); font-size: 11px; line-height: 1.3; } /* Tier chip -- qualitative band next to the ETA badge. The chip spells out the NSW RFS doctrine band (CRITICAL / SOON / 1-2 DAYS); the ETA badge next to it is the quantitative best-guess. */ .tti-chip { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; padding: 1px 6px; border-radius: 3px; vertical-align: middle; text-transform: uppercase; } .tti-chip-critical { background: var(--console-urgency-critical-fill); color: var(--console-urgency-critical-on-fill); } .tti-chip-soon { background: var(--console-urgency-soon-fill); color: var(--console-urgency-soon-on-fill); } .tti-chip-watch { background: none; border: 1px solid var(--console-border-strong); color: var(--console-urgency-watch-text); } /* CRITICAL tier: effective ETA <= 2 hours. Whole-row emphasis: coloured wash, border stripe, bold label, big ETA badge. Act-now signal. */ .dc-row.tti-row.tti-critical { background: var(--console-urgency-critical-wash); border-left: 3px solid var(--console-urgency-critical-fill); padding-left: 5px; margin-left: -8px; padding-right: 6px; border-radius: 3px; } .dc-row.tti-row.tti-critical .dc-label { color: var(--console-urgency-critical-text); font-weight: 700; } .dc-row.tti-row.tti-critical .tti-eta { color: var(--console-urgency-critical-on-fill); background: var(--console-urgency-critical-fill); padding: 1px 7px; border-radius: 3px; font-size: 15px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; } .dc-row.tti-row.tti-critical .tti-bounds { color: var(--console-urgency-critical-text); font-weight: 700; } .dc-row.tti-row.tti-critical .tti-to { color: var(--console-text-primary); font-weight: 600; } .dc-row.tti-row.tti-critical .tti-to .subtle { color: var(--console-text-secondary); } /* SOON tier: effective ETA 2-12h. Lighter wash + orange stripe. The row still reads as emphasised (you'd want to prepare) but not "act now". */ .dc-row.tti-row.tti-soon { background: var(--console-urgency-soon-wash); border-left: 3px solid var(--console-urgency-soon-fill); padding-left: 5px; margin-left: -8px; padding-right: 6px; border-radius: 3px; } .dc-row.tti-row.tti-soon .dc-label { color: var(--console-urgency-soon-text); font-weight: 700; } .dc-row.tti-row.tti-soon .tti-eta { color: var(--console-text-primary); font-weight: 700; } .dc-row.tti-row.tti-soon .tti-bounds { color: var(--console-urgency-soon-text); } /* WATCH tier: effective ETA 12-48h. Subtle amber stripe, no background wash. Informational -- "something to track over the next day or two". */ .dc-row.tti-row.tti-watch { border-left: 3px solid var(--console-border-strong); padding-left: 5px; margin-left: -8px; padding-right: 6px; border-radius: 3px; } .dc-row.tti-row.tti-watch .dc-label { color: var(--console-urgency-watch-text); font-weight: 600; } .tti-details { margin-top: 4px; } .tti-details summary { font-size: 10px; color: var(--console-text-tertiary); cursor: pointer; list-style: none; } .tti-details summary::-webkit-details-marker { display: none; } .tti-details summary::before { content: '\25B6 '; font-size: 8px; margin-right: 3px; } .tti-details[open] summary::before { content: '\25BC '; } .tti-asset-list { margin-top: 4px; max-height: 200px; overflow-y: auto; } .tti-asset-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 10px; border-bottom: 1px solid var(--console-border-subtle); } .tti-asset-row.tti-critical { background: var(--console-urgency-critical-wash); } .tti-asset-row.tti-critical .tti-asset-eta { color: var(--console-urgency-critical-on-fill); background: var(--console-urgency-critical-fill); padding: 0 4px; border-radius: 2px; font-weight: 700; } .tti-asset-row.tti-critical .tti-asset-name { color: var(--console-text-primary); font-weight: 600; } .tti-asset-row.tti-soon { background: var(--console-urgency-soon-wash); } .tti-asset-row.tti-soon .tti-asset-eta { color: var(--console-urgency-soon-on-fill); background: var(--console-urgency-soon-fill); padding: 0 4px; border-radius: 2px; font-weight: 700; } .tti-asset-row.tti-watch .tti-asset-eta { color: var(--console-urgency-watch-text); font-weight: 700; } .tti-asset-eta { width: 60px; flex-shrink: 0; color: var(--console-text-primary); font-weight: 600; } .tti-asset-range { width: 150px; flex-shrink: 0; text-align: left; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tti-asset-name { flex: 1; color: var(--console-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tti-asset-cat { color: var(--console-text-tertiary); font-size: 9px; width: 70px; flex-shrink: 0; } .tti-asset-dist { color: var(--console-text-tertiary); width: 44px; flex-shrink: 0; text-align: right; } /* VAR map layer tooltips */ .var-layer-tooltip { background: var(--console-surface-raised) !important; border: 1px solid var(--console-border-subtle) !important; color: var(--console-text-secondary) !important; font-size: 10px; padding: 2px 6px !important; border-radius: 3px !important; box-shadow: 0 2px 6px rgba(0,0,0,0.4); } .var-layer-tooltip::before { border-top-color: var(--console-surface-raised) !important; } /* Sidebar VAR priority dot — env grammar: neutral until dangerous (backend still sends legacy priority_color; the class wins). */ .var-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 4px; vertical-align: middle; box-sizing: border-box; } .var-dot.var-low, .var-dot.var-moderate { background: transparent !important; border: 2px solid var(--console-border-strong); } .var-dot.var-high { background: var(--console-env-danger-text) !important; } .var-dot.var-critical { background: var(--console-env-extreme-text) !important; } /* Dispatch-card VAR priority badge — same tiers, label carries the info */ .var-badge.var-low, .var-badge.var-moderate { background: var(--console-env-chip-bg) !important; color: var(--console-env-chip-text) !important; } .var-badge.var-high { background: var(--console-env-danger-wash) !important; color: var(--console-env-danger-text) !important; } .var-badge.var-critical { background: var(--console-env-extreme-wash) !important; color: var(--console-env-extreme-text) !important; } /* ============================================================ FIRE BEHAVIOUR (CHARACTERIZATION) BADGES ============================================================ */ .intensity-badge, .trend-badge { display: inline-block; padding: 1px 8px; border-radius: 3px; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; } /* Fire-behaviour tiers use the env grammar (green banned; low/steady are data, not good news). */ .intensity-high { background: var(--console-env-extreme-wash); color: var(--console-env-extreme-text); } .intensity-moderate { background: var(--console-env-danger-wash); color: var(--console-env-danger-text); } .intensity-low { background: var(--console-env-chip-bg); color: var(--console-env-chip-text); } .intensity-unknown { background: var(--console-env-chip-bg); color: var(--console-text-tertiary); } .trend-intensifying { background: var(--console-env-extreme-wash); color: var(--console-env-extreme-text); } .trend-diminishing { background: var(--console-env-chip-bg); color: var(--console-env-chip-text); } .trend-steady { background: var(--console-env-chip-bg); color: var(--console-env-chip-text); } .trend-new { background: var(--console-env-chip-bg); color: var(--console-text-tertiary); } .spread-arrow { font-size: 14px; font-weight: bold; color: var(--console-status-confirmed-text); vertical-align: middle; } .dc-char-loading .dc-label { color: var(--text-muted); font-style: italic; } /* ============================================ AHI PIXEL GRID LEGEND ============================================ */ .pixel-legend { background: var(--console-surface-raised); color: var(--console-text-primary); padding: 10px 12px; border-radius: 6px; font-family: var(--font-body); font-size: 11px; line-height: 1.4; max-width: 260px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); border: 1px solid var(--console-border-subtle); } .pixel-legend .pl-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; color: var(--console-text-primary); } .pixel-legend .pl-obs { font-size: 10px; color: var(--console-text-tertiary); font-family: var(--font-mono); margin-bottom: 8px; } .pixel-legend .pl-section-title { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--console-text-secondary); margin-top: 6px; margin-bottom: 3px; letter-spacing: 0.4px; } .pixel-legend .pl-scale { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 6px; font-size: 10px; margin-bottom: 6px; } .pixel-legend .pl-scale span { display: inline-block; width: 14px; height: 10px; border: 1px solid var(--console-border-strong); } .pixel-legend .pl-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 10px; } .pixel-legend .pl-swatch { display: inline-block; width: 14px; height: 14px; flex-shrink: 0; } .pixel-legend .pl-note { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--console-border-subtle); font-size: 10px; color: var(--console-text-secondary); line-height: 1.35; } .pixel-legend .pl-note b { color: var(--console-text-primary); } .pixel-legend .pl-close { display: block; margin-top: 8px; width: 100%; padding: 4px 8px; background: var(--console-surface-hover); color: var(--console-text-primary); border: 1px solid var(--console-border-strong); border-radius: 4px; font-size: 10px; font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: 0.4px; } .pixel-legend .pl-close:hover { background: var(--console-selection-bg); } /* ============================================ LGA FOCUS SECTION ============================================ */ .sidebar-lga-section { border-bottom: 1px solid var(--sidebar-border); background: var(--console-surface-hover); } .sidebar-lga-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 4px 16px; cursor: pointer; } .lga-section-title { font-family: var(--font-heading); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); } .lga-active-count { display: inline-block; font-size: 9px; font-weight: 700; background: #7A6548; color: #fff; border-radius: 2px; padding: 0 4px; margin-left: 4px; vertical-align: middle; line-height: 14px; } .lga-active-count:empty { display: none; } .lga-toggle-btn { background: none; border: none; font-size: 10px; color: var(--text-secondary); cursor: pointer; padding: 0 2px; transition: transform 0.2s; } .lga-toggle-btn.collapsed { transform: rotate(-90deg); } .sidebar-lga-body { padding: 0 16px 8px 16px; transition: max-height 0.2s ease, opacity 0.2s ease; overflow: hidden; } .sidebar-lga-body.collapsed { max-height: 0; padding: 0 16px; opacity: 0; } /* --- LGA Filter Chips --- */ .lga-filter-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } .lga-chip { font-family: var(--font-heading); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; padding: 2px 7px; border: 1px solid var(--sidebar-border); border-radius: 3px; background: transparent; color: var(--text-secondary); cursor: pointer; transition: all 0.15s; white-space: nowrap; } .lga-chip:hover { border-color: #8B7355; color: #8B7355; } .lga-chip.active { background: #8B7355; color: #fff; border-color: #8B7355; } .lga-clear-btn { font-family: var(--font-heading); font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; padding: 2px 6px; border: 1px dashed var(--text-secondary); border-radius: 3px; background: transparent; color: var(--text-secondary); cursor: pointer; } .lga-clear-btn:hover { border-color: var(--console-urgency-critical-fill); color: var(--console-urgency-critical-text); } /* --- LGA Stats Panel --- */ .lga-stats-panel { font-family: var(--font-body); font-size: 11px; color: var(--text-primary); } .lga-stats-table { width: 100%; border-collapse: collapse; } .lga-stats-table th { font-family: var(--font-heading); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary); text-align: left; padding: 3px 4px; border-bottom: 1px solid var(--sidebar-border); } .lga-stats-table td { padding: 3px 4px; border-bottom: 1px solid var(--console-border-subtle); vertical-align: middle; } .lga-stats-table tr:last-child td { border-bottom: none; } .lga-stats-table .lga-name-cell { font-weight: 500; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lga-stats-table .lga-name-cell.focused { color: #8B7355; font-weight: 600; } .lga-status-dot { display: inline-block; font-family: var(--font-mono); font-size: 9px; font-weight: 500; color: #fff; min-width: 14px; height: 14px; line-height: 14px; text-align: center; border-radius: 2px; margin-right: 2px; } .lga-stats-table .lga-count-cell { text-align: center; font-family: var(--font-mono); font-size: 10px; font-weight: 500; } .lga-stats-table .lga-dots-cell { white-space: nowrap; } .lga-stats-table .lga-ago-cell { font-family: var(--font-mono); font-size: 9px; color: var(--text-secondary); white-space: nowrap; text-align: right; } .lga-stats-table .lga-other-row td { font-style: italic; color: var(--text-secondary); font-size: 10px; padding-top: 5px; border-bottom: none; } .lga-stats-empty { color: var(--text-secondary); font-size: 10px; font-style: italic; padding: 4px 0; } .lga-tooltip { font-family: var(--font-heading); font-size: 11px; font-weight: 600; padding: 3px 8px; } .lga-label-permanent { font-family: var(--font-heading); font-size: 12px; font-weight: 700; color: var(--console-text-secondary); background: var(--console-surface-panel); border: 1px solid var(--console-border-strong); padding: 2px 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .lga-label-released { font-family: var(--font-heading); font-size: 12px; font-weight: 700; color: var(--console-urgency-critical-text); background: var(--console-surface-panel); border: 2px solid var(--console-urgency-critical-fill); padding: 2px 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } /* XPRIZE LGA release notification banner */ .xprize-lga-banner { background: var(--console-urgency-critical-wash); border-bottom: 2px solid var(--console-urgency-critical-fill); padding: 10px 20px; display: flex; align-items: center; gap: 12px; font-family: var(--font-body); font-size: 14px; color: var(--console-urgency-critical-text); z-index: 999; flex-shrink: 0; } .xprize-lga-icon { font-size: 20px; flex-shrink: 0; } .xprize-lga-text strong { font-weight: 600; } .xprize-lga-dismiss { margin-left: auto; background: none; border: none; font-size: 20px; color: var(--console-urgency-critical-text); cursor: pointer; padding: 0 4px; } /* XPRIZE competition zone badge on dispatch cards */ .dc-xprize-badge { display: inline-block; font-family: var(--font-heading); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; background: var(--console-urgency-critical-wash); color: var(--console-urgency-critical-text); border: 1px solid var(--console-urgency-critical-fill); border-radius: 3px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; } .lga-stats-table .lga-threat-cell { font-family: var(--font-mono); font-size: 9px; color: var(--console-urgency-critical-text); white-space: nowrap; max-width: 100px; overflow: hidden; text-overflow: ellipsis; } /* ============================================ LGA NEW ARRIVAL PULSE ============================================ */ @keyframes lga-arrival-pulse { 0% { background-color: var(--console-urgency-soon-wash); } 50% { background-color: transparent; } 100% { background-color: var(--console-urgency-soon-wash); } } /* Finite pulse (3 cycles) — the sanctioned state-change animation. */ .incident-item.lga-new-arrival { animation: lga-arrival-pulse 1s ease-in-out 3; border-left: 3px solid var(--console-urgency-soon-fill); } .incident-item.lga-new-arrival .incident-name::after { content: ' NEW'; font-family: var(--font-heading); font-size: 8px; font-weight: 700; color: var(--console-urgency-soon-text); letter-spacing: 0.5px; margin-left: 6px; vertical-align: middle; } /* ============================================ CONSOLE TIER ADDITIONS ============================================ */ /* Keyboard focus (console principles: visible focus everywhere). */ :focus-visible { outline: 2px solid var(--console-focus-ring); outline-offset: 2px; } /* Theme toggle (header). */ .theme-toggle-btn { background: none; border: 1px solid var(--console-border-strong); color: var(--console-text-secondary); border-radius: 3px; height: 24px; padding: 0 10px; cursor: pointer; font-family: var(--font-heading); font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; } .theme-toggle-btn:hover { color: var(--console-text-primary); border-color: var(--console-text-secondary); } /* Map status markers (divIcon SVG shapes — see console/status-labels.js). */ .status-marker { background: none !important; border: none !important; } /* Inline icon SVGs (banner + action buttons). */ .icon-svg { vertical-align: middle; flex-shrink: 0; } /* Satellite-hybrid basemap: tone the imagery pane per theme (token from the console tier); labels render in their own pane above, untouched. */ .leaflet-imageryBase-pane { filter: var(--console-imagery-filter); } /* Leaflet chrome defaults to white — theme it. */ .leaflet-container { background: var(--console-surface-page) !important; } .leaflet-popup-content-wrapper { background: var(--console-surface-panel) !important; color: var(--console-text-primary) !important; } .leaflet-popup-tip { background: var(--console-surface-panel) !important; } .leaflet-control-layers { background: var(--console-surface-panel) !important; color: var(--console-text-primary) !important; } .leaflet-control-layers label { color: var(--console-text-secondary); } .leaflet-control-scale-line { background: var(--console-surface-panel) !important; color: var(--console-text-secondary) !important; border-color: var(--console-border-strong) !important; } .leaflet-control-attribution { background: var(--console-surface-panel) !important; color: var(--console-text-tertiary) !important; } .leaflet-control-attribution a { color: var(--console-link) !important; } /* Reduced motion: finite/no animation (wind particles are gated in JS). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .routing-notice { position: fixed; right: 18px; bottom: 18px; z-index: 12000; max-width: min(420px, calc(100vw - 36px)); padding: 11px 14px; border: 1px solid #1e8449; border-radius: 4px; background: #eaf7ef; color: #145a32; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.22); font-family: var(--font-body); font-size: 13px; font-weight: 600; } .routing-notice.error { border-color: #c0392b; background: #fdecea; color: #922b21; } .road-layer-swatch { display: inline-block; width: 16px; height: 0; margin-right: 5px; vertical-align: middle; border-top: 3px dashed #d35400; } .road-layer-swatch.trail { border-top: 3px dotted #8e44ad; } .layer-control-section { margin: 5px 0 2px; padding-top: 5px; border-top: 1px solid var(--console-border-subtle); color: var(--console-text-tertiary); font: 600 10px/1.4 var(--console-font-ui, sans-serif); letter-spacing: 0.09em; text-transform: uppercase; } .road-reference-popup { font-family: var(--font-body); min-width: 250px; } .road-reference-popup h4 { margin: 0 0 8px; color: var(--console-text-primary); font-family: var(--font-heading); font-size: 14px; } .road-reference-popup dl { display: grid; grid-template-columns: minmax(105px, auto) 1fr; gap: 3px 10px; margin: 0 0 9px; font-size: 11px; } .road-reference-popup dt { color: var(--console-text-tertiary); font-weight: 600; } .road-reference-popup dd { margin: 0; color: var(--console-text-primary); } .road-source-link { display: inline-block; margin-bottom: 8px; color: var(--console-link); font-size: 11px; } .road-reference-caution { margin: 8px 0; padding: 7px; border-left: 3px solid #d35400; background: rgba(211, 84, 0, 0.10); font-size: 11px; line-height: 1.35; } .saved-route-warning { margin-bottom: 8px; padding: 8px 10px; border-left: 3px solid #d68910; background: rgba(214, 137, 16, 0.12); color: var(--console-text-secondary); font-size: 11px; line-height: 1.4; } /* Narrow field devices use a map with a compact incident sheet. */ @media (max-width: 640px) { #header { height: 50px; padding: 0 10px; } .logo { font-size: 17px; } .logo-sub, .header-center, .refresh-countdown, .header-clock, .header-help-btn, #theme-toggle-btn { display: none; } .header-right { gap: 6px; min-width: 0; } .account-btn { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #main { position: relative; display: block; } #map-container { position: absolute; inset: 0; width: 100%; height: 100%; } #sidebar { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 43%; z-index: 700; border: 1px solid var(--console-border-strong); border-bottom: 0; border-radius: 8px 8px 0 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35); } .sidebar-controls { padding: 6px 10px; } .sidebar-time-filter, .sidebar-filters { flex-wrap: nowrap; overflow-x: auto; padding: 5px 10px; scrollbar-width: thin; } .sidebar-time-filter > *, .sidebar-filters > * { flex: 0 0 auto; } .time-btn, .filter-btn { min-height: 28px; padding: 3px 8px; font-size: 10px; } .sidebar-lga-section, .lga-filter-banner { display: none !important; } .incident-item { min-height: 64px; padding: 9px 12px; } #bottombar { display: none; } .leaflet-popup-content { width: min(350px, calc(100vw - 36px)) !important; max-height: 48vh; padding: 8px 12px; box-sizing: border-box; } .leaflet-popup-pane { z-index: 1100; } .road-popup-open .leaflet-control-zoom, .road-popup-open .leaflet-control-layers { visibility: hidden; } .leaflet-control-layers-expanded { max-width: calc(100vw - 28px); max-height: calc(57vh - 70px); overflow-y: auto; } .routing-notice { right: 10px; bottom: calc(43% + 10px); max-width: calc(100vw - 20px); } }