@font-face {
    font-family: "PP Neue Montreal";
    src: url("assets/fonts/ppneuemontreal-book.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "PP Neue Montreal";
    src: url("assets/fonts/ppneuemontreal-thin.otf") format("opentype");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

:root {
    --kairos-purple: #7256d3;
    --kairos-purple-deep: #4a2594;
    --kairos-purple-glow: #aea0e1;
    --kairos-ink: #160d25;
    --kairos-ink-soft: #51485f;
    --kairos-app-bg: #f7f6fa;
    --kairos-panel: #ffffff;
    --kairos-border: #ded8e8;
    --kairos-border-subtle: #ede8f7;
    --kairos-selected: #f3f0fa;
    --kairos-critical: #b42318;
    --kairos-critical-bg: #fee4e2;
    --kairos-warning: #b54708;
    --kairos-warning-bg: #fef0c7;
    --kairos-ready: #7256d3;
    --kairos-ready-bg: #f3f0fa;
    --kairos-info: #175cd3;
    --kairos-info-bg: #eaf2ff;
    --kairos-neutral: #5f5968;
    --kairos-neutral-bg: #eeecef;
    --kairos-radius-sm: 10px;
    --kairos-radius: 14px;
    --kairos-radius-lg: 20px;
    --kairos-shadow-float: 0 10px 30px rgba(74, 37, 148, 0.1);
    --kairos-transition: 140ms ease;
    --green: var(--kairos-purple);
    --blue: var(--kairos-purple);
    --purple: var(--kairos-purple);
    --dark: var(--kairos-ink);
    --trans: all var(--kairos-transition);
}

/* Resizable panels and movable operational controls */

:root {
    --hub-panel-height: 300px;
    --address-panel-height: 104px;
}

#control-panel {
    position: fixed;
    height: var(--hub-panel-height);
    min-height: 180px;
    max-height: 82vh;
    transform: translateY(0);
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform 180ms ease, height 80ms linear;
}

#control-panel.state-min,
#control-panel.state-dash,
#control-panel.state-routes {
    transform: translateY(0);
}

#control-panel.panel-hidden {
    transform: translateY(calc(100% + 16px));
    pointer-events: none;
}

#address-panel {
    height: var(--address-panel-height);
    min-height: 92px;
    max-height: 42vh;
    transition: transform 180ms ease, opacity 180ms ease, height 80ms linear;
}

#address-panel .input-group {
    height: calc(100% - 12px);
    box-sizing: border-box;
    overflow: visible;
}

#address-panel.panel-hidden {
    transform: translateY(calc(-100% - 18px));
    opacity: 0;
    pointer-events: none;
}

.nav-active #address-panel:not(.panel-hidden),
.routes-open #address-panel:not(.panel-hidden) {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.panel-resize-handle {
    position: relative;
    z-index: 4;
    width: 72%;
    height: 16px;
    margin: 0 auto;
    cursor: ns-resize;
    touch-action: none;
}

.panel-resize-handle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 6px;
    height: 4px;
    border-radius: 999px;
    background: var(--kairos-purple-glow);
    box-shadow: 0 0 0 1px rgba(74, 37, 148, 0.08);
}

.panel-resize-handle-top {
    margin-top: -8px;
}

.panel-resize-handle-bottom {
    margin-top: -6px;
    margin-bottom: 4px;
}

.floating-panel-toggle {
    position: fixed;
    z-index: 5200;
    width: 42px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(114, 86, 211, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--kairos-purple-deep);
    box-shadow: 0 8px 24px rgba(74, 37, 148, 0.2);
    cursor: pointer;
    backdrop-filter: blur(12px);
    animation: panel-toggle-hover 2.2s ease-in-out infinite;
}

.hub-panel-toggle {
    left: 50%;
    bottom: calc(var(--hub-panel-height) + 36px);
    transform: translateX(-50%);
    transition: bottom 180ms ease;
}

.hub-panel-toggle.panel-collapsed {
    bottom: max(10px, env(safe-area-inset-bottom));
}

.address-panel-toggle {
    left: 50%;
    top: calc(var(--address-panel-height) + 14px);
    transform: translateX(-50%);
    transition: top 180ms ease;
}

.address-panel-toggle.panel-collapsed {
    top: max(8px, env(safe-area-inset-top));
}

@keyframes panel-toggle-hover {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -4px; }
}

[data-draggable-ui] {
    touch-action: none;
    user-select: none;
}

[data-draggable-ui].ui-positioned {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
}

[data-draggable-ui].ui-dragging {
    z-index: 8000 !important;
    cursor: grabbing !important;
    transition: none !important;
    box-shadow: 0 10px 30px rgba(74, 37, 148, 0.32) !important;
}

#speedo-float {
    border-color: var(--kairos-purple) !important;
    box-shadow: 0 6px 20px rgba(74, 37, 148, 0.22);
}

#speedo-float .speed-val,
#speedo-float .speed-unit {
    color: var(--kairos-purple-deep);
}

#speedo-float:not(.ui-positioned).pos-min,
#speedo-float:not(.ui-positioned).pos-dash,
#speedo-float:not(.ui-positioned).pos-routes,
#recenter-btn.pos-min,
#recenter-btn.pos-dash,
#recenter-btn.pos-routes {
    bottom: calc(var(--hub-panel-height) + 18px) !important;
}

#control-panel.panel-hidden ~ #speedo-float:not(.ui-positioned) {
    bottom: 18px !important;
}

#grade-btn.active,
#satellite-btn.active,
#hydrant-btn.active,
#coverage-btn.active,
#buildings-btn.active,
#mutual-aid-btn.active,
#heatmap-btn.active {
    color: #fff !important;
    background: var(--kairos-purple) !important;
    border-color: var(--kairos-purple) !important;
}

@media (orientation: landscape) and (max-height: 540px) {
    #control-panel.panel-hidden {
        transform: translateX(calc(100% + 16px)) !important;
    }

    .hub-panel-toggle {
        left: auto;
        right: 270px;
        bottom: 10px;
        transform: none;
    }

    .hub-panel-toggle.panel-collapsed {
        right: 12px;
    }
}

html,
body,
button,
input,
select,
textarea,
.mapboxgl-popup {
    font-family: "PP Neue Montreal", Arial, sans-serif !important;
}

body {
    color: var(--kairos-ink);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
    font-weight: 500;
}

button {
    transition: background-color var(--kairos-transition),
        border-color var(--kairos-transition),
        color var(--kairos-transition),
        box-shadow var(--kairos-transition),
        transform var(--kairos-transition);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(114, 86, 211, 0.28) !important;
    outline-offset: 2px;
}

.dsp-time,
.uc-num,
.uc-eta,
.active-inc-timer,
.acct-timer,
.triage-count,
.waze-stat-val,
.waze-turn-dist,
.speed-val,
#clock,
[id*="eta"],
[id*="timer"],
[id*="time"] {
    font-variant-numeric: tabular-nums;
}

/* Unit workspace */

body:not(.night-ui) {
    background: var(--kairos-app-bg);
}

body:not(.night-ui) .input-group {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(222, 216, 232, 0.92);
    border-radius: 16px;
    box-shadow: var(--kairos-shadow-float);
    backdrop-filter: blur(16px);
}

body:not(.night-ui) .input-row {
    min-height: 44px;
    background: var(--kairos-app-bg);
    border: 1px solid var(--kairos-border-subtle);
    border-radius: var(--kairos-radius-sm);
}

body:not(.night-ui) .addr-input {
    color: var(--kairos-ink) !important;
    font-size: 14px;
    font-weight: 500;
}

body:not(.night-ui) .addr-input::placeholder {
    color: var(--kairos-neutral) !important;
}

body:not(.night-ui) .loc-btn,
body:not(.night-ui) .input-clear-btn {
    min-width: 44px;
    min-height: 44px;
    color: var(--kairos-purple);
}

body:not(.night-ui) .suggestions {
    border: 1px solid var(--kairos-border);
    border-radius: var(--kairos-radius);
    box-shadow: var(--kairos-shadow-float);
}

body:not(.night-ui) .suggestion-item {
    min-height: 44px;
    color: var(--kairos-ink);
    border-bottom-color: var(--kairos-border-subtle);
}

body:not(.night-ui) .suggestion-item:hover,
body:not(.night-ui) .suggestion-item:active {
    background: var(--kairos-selected);
}

body:not(.night-ui) .bottom-panel {
    background: var(--kairos-panel);
    color: var(--kairos-ink);
    border: 1px solid var(--kairos-border);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -10px 32px rgba(74, 37, 148, 0.08);
}

body:not(.night-ui) #control-panel > div:first-child {
    background: var(--kairos-border) !important;
}

body:not(.night-ui) #app-title {
    color: var(--kairos-ink);
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

body:not(.night-ui) .quick-section-label,
body:not(.night-ui) .s-section-label,
body:not(.night-ui) .route-panel-title {
    color: var(--kairos-ink-soft);
    font-weight: 500;
    letter-spacing: 0.06em;
}

body:not(.night-ui) .incident-chip,
body:not(.night-ui) .quick-chip,
body:not(.night-ui) .status-chip,
body:not(.night-ui) .unit-btn,
body:not(.night-ui) .s-cycle-btn,
body:not(.night-ui) #preplan-btn {
    min-height: 40px;
    background: var(--kairos-panel);
    color: var(--kairos-ink-soft);
    border: 1px solid var(--kairos-border);
    border-radius: var(--kairos-radius-sm);
    box-shadow: none;
    font-weight: 500;
}

body:not(.night-ui) .incident-chip:hover,
body:not(.night-ui) .quick-chip:hover,
body:not(.night-ui) .unit-btn:hover,
body:not(.night-ui) .s-cycle-btn:hover {
    background: var(--kairos-selected);
    border-color: var(--kairos-purple-glow);
    color: var(--kairos-purple-deep);
}

body:not(.night-ui) .incident-chip.active,
body:not(.night-ui) .incident-chip.active.ic-vehicle,
body:not(.night-ui) .incident-chip.active.ic-medical,
body:not(.night-ui) .incident-chip.active.ic-wildland,
body:not(.night-ui) .unit-btn.active {
    background: var(--kairos-selected);
    border-color: var(--kairos-purple);
    color: var(--kairos-purple-deep);
    box-shadow: inset 0 0 0 1px rgba(114, 86, 211, 0.08);
}

body:not(.night-ui) .status-chip.active.s-enroute {
    background: var(--kairos-critical-bg);
    border-color: rgba(180, 35, 24, 0.3);
    color: var(--kairos-critical);
}

body:not(.night-ui) .status-chip.active.s-onscene {
    background: var(--kairos-warning-bg);
    border-color: rgba(181, 71, 8, 0.3);
    color: var(--kairos-warning);
}

body:not(.night-ui) .status-chip.active.s-available {
    background: var(--kairos-ready-bg);
    border-color: rgba(6, 118, 71, 0.3);
    color: var(--kairos-ready);
}

body:not(.night-ui) .v2i-badge {
    background: var(--kairos-neutral-bg);
    color: var(--kairos-neutral);
    border-color: var(--kairos-border);
    font-weight: 500;
}

body:not(.night-ui) .v2i-online {
    background: var(--kairos-ready-bg) !important;
    color: var(--kairos-ready) !important;
    border-color: rgba(6, 118, 71, 0.3) !important;
    animation: none !important;
}

body:not(.night-ui) .btn-main {
    min-height: 48px;
    background: var(--kairos-purple);
    color: #fff;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 8px 20px rgba(74, 37, 148, 0.18);
}

body:not(.night-ui) .btn-main:hover {
    background: var(--kairos-purple-deep);
}

body:not(.night-ui) .btn-main:disabled {
    background: var(--kairos-neutral-bg);
    color: var(--kairos-neutral);
    box-shadow: none;
}

body:not(.night-ui) .route-card {
    min-height: 64px;
    background: var(--kairos-panel);
    color: var(--kairos-ink);
    border: 1px solid var(--kairos-border);
    border-radius: var(--kairos-radius);
    box-shadow: none;
}

body:not(.night-ui) .route-card:hover {
    background: var(--kairos-selected);
    border-color: var(--kairos-purple-glow);
}

body:not(.night-ui) .route-panel-header,
body:not(.night-ui) .s-row {
    border-bottom-color: var(--kairos-border-subtle);
}

body:not(.night-ui) .s-row-label {
    color: var(--kairos-ink);
    font-weight: 500;
}

body:not(.night-ui) .s-row-sub {
    color: var(--kairos-ink-soft);
}

body:not(.night-ui) .s-toggle.on,
body:not(.night-ui) #share-btn.active {
    background: var(--kairos-purple);
    border-color: var(--kairos-purple);
    box-shadow: 0 0 0 3px rgba(114, 86, 211, 0.14);
}

body:not(.night-ui) .nav-banner {
    border: 1px solid rgba(222, 216, 232, 0.9);
    box-shadow: var(--kairos-shadow-float);
}

body:not(.night-ui) .waze-turn-card {
    background: linear-gradient(135deg, var(--kairos-purple), var(--kairos-purple-deep));
    border-bottom-color: rgba(255, 255, 255, 0.16);
}

body:not(.night-ui) .waze-strip {
    background: rgba(255, 255, 255, 0.96);
    border-top-color: var(--kairos-border-subtle);
}

body:not(.night-ui) .waze-stat-val {
    color: var(--kairos-ink);
    font-weight: 600;
}

body:not(.night-ui) .waze-stat-label {
    color: var(--kairos-ink-soft);
    font-weight: 500;
}

body:not(.night-ui) .waze-vdivider {
    background: var(--kairos-border);
}

body:not(.night-ui) .waze-recalc {
    background: var(--kairos-selected);
    border-color: var(--kairos-purple-glow);
    color: var(--kairos-purple-deep);
}

body:not(.night-ui) #speedo-float,
body:not(.night-ui) #recenter-btn,
body:not(.night-ui) #fullscreen-btn,
body:not(.night-ui) #grade-btn,
body:not(.night-ui) #satellite-btn,
body:not(.night-ui) #compass-btn,
body:not(.night-ui) #hydrant-btn,
body:not(.night-ui) #coverage-btn,
body:not(.night-ui) #buildings-btn,
body:not(.night-ui) #mutual-aid-btn,
body:not(.night-ui) #heatmap-btn {
    background: rgba(255, 255, 255, 0.92);
    color: var(--kairos-ink);
    border-color: rgba(222, 216, 232, 0.9);
    box-shadow: 0 6px 18px rgba(74, 37, 148, 0.12);
    backdrop-filter: blur(14px);
}

/* Dispatcher workspace */

body:has(.dsp-header) {
    background: var(--kairos-app-bg);
    color: var(--kairos-ink);
}

.dsp-header {
    height: 64px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--kairos-ink);
    border-bottom: 1px solid var(--kairos-border);
    box-shadow: 0 1px 0 rgba(74, 37, 148, 0.03);
    backdrop-filter: blur(16px);
}

.dsp-logo {
    color: var(--kairos-ink);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-transform: none;
}

.dsp-logo span {
    color: var(--kairos-ink-soft);
    opacity: 1;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dsp-status {
    color: var(--kairos-ink-soft);
    font-weight: 500;
}

.dsp-status > button {
    min-height: 40px;
    border-radius: 12px !important;
    font-weight: 500 !important;
}

.dsp-status > button[title="Shift Roster"],
.dsp-status > button[title="Fullscreen"] {
    background: var(--kairos-selected) !important;
    color: var(--kairos-purple-deep) !important;
    border-color: var(--kairos-border) !important;
}

.dsp-status > button[title="EMS Hospital Pre-Alert"] {
    background: var(--kairos-purple) !important;
    color: #fff !important;
    border-color: var(--kairos-purple) !important;
}

.dsp-time {
    color: var(--kairos-ink-soft);
    font-weight: 500;
}

.dsp-body,
#dsp-map {
    background: var(--kairos-app-bg);
}

.dsp-sidebar {
    width: 256px;
    background: var(--kairos-panel);
    color: var(--kairos-ink);
    border-right: 1px solid var(--kairos-border);
}

.sidebar-section {
    padding: 16px;
    border-bottom-color: var(--kairos-border-subtle);
}

.sidebar-section-label {
    color: var(--kairos-ink-soft);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.07em;
}

.sidebar-section-label::after,
.sidebar-resizer::after,
.dsp-resize-handle::after {
    background: var(--kairos-border);
    color: var(--kairos-ink-soft);
}

.uc-badge,
.unit-card,
.active-inc,
.sboard-col,
.sboard-chip,
.pp-panel,
.triage-card {
    background: var(--kairos-panel);
    color: var(--kairos-ink);
    border-color: var(--kairos-border);
    border-radius: var(--kairos-radius);
    box-shadow: none;
}

.uc-num,
.uc-name,
.active-inc-title,
.acct-name,
.pp-val {
    color: var(--kairos-ink);
    font-weight: 600;
}

.uc-label,
.uc-meta,
.active-inc-addr,
.pp-row,
.hosp-name {
    color: var(--kairos-ink-soft);
}

.unit-card {
    padding: 12px;
    margin-bottom: 8px;
}

.unit-card:hover {
    background: var(--kairos-selected);
    border-color: var(--kairos-purple-glow);
}

.unit-card.enroute {
    border-left-color: var(--kairos-critical);
}

.unit-card.onscene {
    border-left-color: var(--kairos-warning);
}

.unit-card.available {
    border-left-color: var(--kairos-ready);
}

.uc-badge-status.enroute {
    background: var(--kairos-critical-bg);
    color: var(--kairos-critical);
}

.uc-badge-status.onscene {
    background: var(--kairos-warning-bg);
    color: var(--kairos-warning);
}

.uc-badge-status.available {
    background: var(--kairos-ready-bg);
    color: var(--kairos-ready);
}

.uc-assign,
.uca-btn,
.layer-btn,
.ann-btn,
.inc-tab,
.inc-tab-add,
.triage-btn {
    min-height: 36px;
    background: var(--kairos-panel);
    color: var(--kairos-ink-soft);
    border-color: var(--kairos-border);
    border-radius: var(--kairos-radius-sm);
    font-weight: 500;
}

.uc-assign:hover,
.uca-btn:hover,
.layer-btn:hover,
.ann-btn:hover {
    background: var(--kairos-selected);
    color: var(--kairos-purple-deep);
    border-color: var(--kairos-purple-glow);
}

.uc-assign.assigned,
.uca-btn.uca-assigned {
    background: var(--kairos-ready-bg);
    color: var(--kairos-ready);
    border-color: rgba(6, 118, 71, 0.3);
}

.inc-input,
#unit-search,
.radio-input {
    min-height: 44px;
    background: var(--kairos-panel);
    color: var(--kairos-ink);
    border-color: var(--kairos-border);
    border-radius: var(--kairos-radius-sm);
    font-size: 13px;
}

.inc-input:focus,
#unit-search:focus,
.radio-input:focus {
    border-color: var(--kairos-purple);
    box-shadow: 0 0 0 3px rgba(114, 86, 211, 0.12);
}

.inc-btn {
    min-height: 44px;
    background: var(--kairos-purple);
    color: #fff;
    border-radius: var(--kairos-radius-sm);
    font-size: 13px;
    font-weight: 500;
}

#inc-tabs {
    background: var(--kairos-panel);
    border-bottom-color: var(--kairos-border);
}

.inc-tab.active,
.layer-btn.on,
.ann-btn.active {
    background: var(--kairos-selected);
    color: var(--kairos-purple-deep);
    border-color: var(--kairos-purple-glow);
}

#wx-bar {
    background: var(--kairos-panel);
    color: var(--kairos-ink-soft);
    border-bottom-color: var(--kairos-border);
}

#notif-drawer,
.acct-panel,
.par-panel,
.roster-panel,
.medalert-panel,
#reply-popover {
    background: var(--kairos-panel);
    color: var(--kairos-ink);
    border-color: var(--kairos-border);
    border-radius: var(--kairos-radius-lg);
    box-shadow: 0 18px 48px rgba(74, 37, 148, 0.16);
}

.acct-header,
.acct-row,
.par-unit-row,
.roster-row,
.analytics-row,
.hosp-row {
    border-bottom-color: var(--kairos-border-subtle);
}

.narr-entry {
    background: var(--kairos-app-bg);
    color: var(--kairos-ink);
    border-left-color: var(--kairos-border);
}

.narr-entry.system {
    border-left-color: var(--kairos-info);
}

.narr-entry.action {
    border-left-color: var(--kairos-purple);
}

.narr-entry.alert {
    border-left-color: var(--kairos-critical);
}

.mapboxgl-popup-content {
    color: var(--kairos-ink);
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--kairos-border);
    border-radius: var(--kairos-radius);
    box-shadow: var(--kairos-shadow-float);
}

@media (max-width: 900px) {
    .dsp-header {
        padding-inline: 16px;
    }

    .dsp-sidebar {
        min-width: 240px;
    }

    body:not(.night-ui) .bottom-panel {
        padding-inline: 16px;
    }

    body:not(.night-ui) .incident-chip,
    body:not(.night-ui) .status-chip,
    body:not(.night-ui) .unit-btn {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}