:root {
  --accent: #D91635; --text: #17202A; --muted: #65707F;
  --surface: #FFFFFF; --bg: #F5F7FA;
  --success: #1E7A46; --warning: #A96700; --danger: #B42318; --info: #1D5FA7;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--bg); font-size: 16px; }
h1, h2, h3 { margin: 0 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.card { background: var(--surface); border-radius: 14px; padding: 16px; box-shadow: 0 1px 4px rgba(23,32,42,.08); margin-bottom: 12px; }
.btn { min-height: 44px; min-width: 44px; padding: 10px 16px; border-radius: 12px; border: 1px solid transparent; font-size: 15px; cursor: pointer; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-ghost { background: transparent; color: var(--text); border-color: #C7CDD6; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-warning { background: var(--warning); color: #fff; }
.btn-block { width: 100%; }
.btn-compact { min-height: 34px; padding: 6px 10px; font-size: 13px; border-radius: 8px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #C7CDD6; border-radius: 12px; font-size: 16px; margin-bottom: 10px; }
label { display: block; margin-bottom: 4px; font-size: 14px; color: var(--muted); }
.alert { border-radius: 12px; padding: 12px; margin-bottom: 10px; border: 1px solid; }
.alert-error { background: #FDEBEA; border-color: var(--danger); color: var(--danger); }
.alert-warning { background: #FFF4E5; border-color: var(--warning); color: var(--warning); }
.alert-info { background: #E8F1FB; border-color: var(--info); color: var(--info); }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border-radius: 18px; padding: 28px; box-shadow: 0 4px 18px rgba(23,32,42,.12); }
.app { min-height: 100vh; display: flex; flex-direction: column; }
.app-header { display: flex; gap: 12px; align-items: center; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid #E3E7ED; }
.app-header > select.input { width: auto; min-width: 0; margin-bottom: 0; flex: 1 1 320px; }
.app-header > .muted { flex: 0 0 auto; min-width: 0; white-space: nowrap; }
.app-clock { min-width: 0; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* employee */
.emp-tabs { display: flex; position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid #E3E7ED; z-index: 5; }
.emp-tab { flex: 1; min-height: 52px; background: none; border: none; font-size: 13px; cursor: pointer; color: var(--muted); }
.emp-tab-active { color: var(--accent); font-weight: 600; }
.emp-stack { padding: 12px; }
.emp-card { padding: 20px; }
.emp-context { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 15px; }
.emp-big-stat { font-size: 40px; color: var(--muted); }
.emp-freshness { margin: 12px 0; font-size: 15px; }
.freshness-fresh { color: var(--success); }
.freshness-degraded { color: var(--warning); }
.freshness-stale, .freshness-lost, .freshness-unknown { color: var(--danger); }
.emp-exit { font-size: 22px; font-weight: 600; padding: 12px; background: #F0F5F1; border-radius: 12px; text-align: center; }
.emp-exit-now { color: var(--danger); }
.emp-next-head, .emp-map-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.emp-next-head h2, .emp-map-head h2 { font-size: 22px; }
.emp-clock-strip { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-width: 220px; padding: 10px 12px; border: 1px solid #E3E7ED; border-radius: 10px; background: #FAFBFC; font-variant-numeric: tabular-nums; }
.emp-action-grid { display: grid; grid-template-columns: minmax(340px, .85fr) minmax(0, 1.15fr); gap: 14px; align-items: stretch; }
.emp-action-panel { min-width: 0; padding: 14px; border: 1px solid #E3E7ED; border-radius: 10px; background: #FFFFFF; }
.emp-next-metric { margin-top: 8px; font-size: 46px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.emp-next-caption { margin: 4px 0 10px; color: var(--muted); font-size: 16px; }
.emp-facts-grid { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: 10px; min-width: 0; }
.emp-fact { min-height: 102px; display: flex; flex-direction: column; gap: 6px; justify-content: space-between; padding: 12px; border: 1px solid #E3E7ED; border-radius: 10px; background: #FAFBFC; }
.emp-fact strong { font-size: 20px; line-height: 1.16; overflow-wrap: anywhere; }
.emp-focus-btn { min-height: 36px; padding: 7px 12px; border: 1px solid #C7CDD6; border-radius: 10px; background: #FFFFFF; color: var(--text); cursor: pointer; font-size: 13px; }
.emp-focus-active { border-color: var(--accent); color: var(--accent); background: #FDE8ED; font-weight: 650; }
.emp-journey-card { margin-top: 12px; padding: 12px; border: 1px solid #E3E7ED; border-radius: 10px; background: #FAFBFC; }
.emp-journey-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 8px; }
.emp-journey-head h2 { font-size: 18px; }
.emp-journey-grid { display: grid; grid-template-columns: minmax(180px, .55fr) minmax(0, 1fr); gap: 7px 12px; margin: 0; }
.emp-journey-grid dt { color: var(--muted); font-size: 13px; }
.emp-journey-grid dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.emp-incident p { margin: 6px 0; }
.emp-arrivals, .emp-notifications, .emp-profile { margin: 0; padding: 0; list-style: none; }
.emp-arrival { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #EDF0F4; }
.emp-notification { padding: 10px 0; border-bottom: 1px solid #EDF0F4; }
.emp-unread { font-weight: 600; }
.emp-note-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.emp-note-row strong, .emp-note-row span { display: block; }
.emp-profile dt { color: var(--muted); font-size: 13px; margin-top: 8px; }
.emp-profile dd { margin: 2px 0 0; }
.emp-profile-summary .emp-profile { display: grid; grid-template-columns: minmax(130px, .35fr) minmax(0, 1fr); column-gap: 12px; row-gap: 6px; }
.emp-profile-summary .emp-profile dt { margin-top: 0; }
.emp-profile-summary .emp-profile dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.emp-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; align-items: start; }
.emp-field-wide { grid-column: 1 / -1; }
.emp-days { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.emp-day { min-width: 46px; min-height: 40px; border: 1px solid #C7CDD6; border-radius: 10px; background: #FFFFFF; color: var(--text); font-size: 14px; font-weight: 650; cursor: pointer; }
.emp-day-active { border-color: var(--accent); background: #FDE8ED; color: var(--accent); }
.emp-form-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.emp-editor-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.emp-editor-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.emp-trip-editor .alert { margin-top: 8px; }
.emp-profile-selected td { background: #FDE8ED; }
.emp-profiles-table td:first-child span { display: block; margin-top: 2px; }
.emp-profiles-table th, .emp-profiles-table td { vertical-align: top; }
.emp-board { margin-top: 12px; border: 1px solid #E3E7ED; border-radius: 10px; background: #FAFBFC; overflow: hidden; }
.emp-board-card .emp-board, .emp-stop-card .emp-board { margin-top: 0; }
.emp-board-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 12px 12px 4px; }
.emp-board-head h2 { font-size: 18px; }
.emp-board-table { table-layout: fixed; }
.emp-board-table th, .emp-board-table td { vertical-align: top; overflow: hidden; text-overflow: ellipsis; }
.emp-board-table td strong, .emp-board-table td span { display: block; }
.emp-board-table .bo-status { width: max-content; max-width: 100%; }
.route-legend { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.route-legend-item { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; max-width: 100%; padding: 5px 8px; border: 1px solid #E3E7ED; border-radius: 8px; background: #FFFFFF; font-size: 12px; overflow: hidden; }
.route-legend-item strong { font-variant-numeric: tabular-nums; }
.route-legend-item span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-swatch { width: 18px; height: 5px; border-radius: 999px; flex: 0 0 auto; }
.glyph { margin-right: 8px; font-weight: 700; }
/* dispatcher */
.dsp-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 12px 12px 0; }
.dsp-view-switch { display: flex; gap: 8px; flex-wrap: wrap; }
.dsp-date-field { min-width: 190px; }
.dsp-date-field .input { margin-bottom: 0; }
.dsp-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr) 520px; gap: 12px; padding: 12px; }
.dsp-side, .dsp-list { background: var(--surface); border-radius: 14px; padding: 14px; }
.dsp-summary { list-style: none; padding: 0; margin: 0 0 16px; }
.dsp-summary li { padding: 8px 0; border-bottom: 1px solid #EDF0F4; }
.st-warn { color: var(--warning); }
.st-crit { color: var(--danger); font-weight: 600; }
.dsp-incidents { list-style: none; padding: 0; margin: 0; }
.dsp-incident { padding: 10px; border: 1px solid #EDF0F4; border-radius: 12px; margin-bottom: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.dsp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dsp-table th { text-align: left; color: var(--muted); font-weight: 500; padding: 6px; }
.dsp-table td { padding: 8px 6px; border-top: 1px solid #EDF0F4; }
.dsp-row { cursor: pointer; }
.dsp-plan-table { table-layout: auto; font-size: 12px; }
.dsp-plan-table th, .dsp-plan-table td { overflow-wrap: anywhere; white-space: normal; }
.dsp-plan-table th { font-size: 11px; line-height: 1.15; padding: 5px 4px; }
.dsp-plan-table td { padding: 7px 4px; }
.dsp-plan-note { margin-top: 8px; margin-bottom: 16px; }
.dsp-drawer-layer { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.dsp-scrim { position: fixed; inset: 0; border: 0; background: rgba(15,23,42,.18); cursor: pointer; pointer-events: auto; }
.dsp-drawer { position: fixed; right: 14px; top: 88px; bottom: 14px; width: min(420px, calc(100vw - 28px)); z-index: 21; overflow: auto; pointer-events: auto; box-shadow: 0 14px 44px rgba(23,32,42,.26); }
.dsp-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dsp-drawer-head h2 { padding-right: 6px; }
.dsp-dl dt { color: var(--muted); font-size: 13px; margin-top: 8px; }
.dsp-dl dd { margin: 2px 0 0; }
.dsp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.dsp-dialog { position: relative; }
.dsp-dialog h3 { margin-bottom: 0; padding-right: 8px; }
.dsp-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.dialog-close { flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid #D8DDE5; border-radius: 50%; background: #F5F7FA; color: var(--muted); font-size: 24px; line-height: 30px; cursor: pointer; }
.dialog-close:hover, .dialog-close:focus { color: var(--text); border-color: #B8C0CA; background: #FFFFFF; }
.dsp-dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.dsp-offline { margin: 0 12px; }
.dsp-employee-board { padding: 12px; }
.dsp-employee-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.dsp-employee-kpis { display: grid; grid-template-columns: repeat(4, minmax(105px, 1fr)); gap: 8px; }
.dsp-employee-kpis div { min-height: 70px; padding: 10px; border: 1px solid #E3E7ED; border-radius: 10px; background: #FAFBFC; }
.dsp-employee-kpis strong { display: block; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dsp-employee-kpis span { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.dsp-employee-card { overflow: auto; }
.dsp-employee-table { min-width: 1180px; }
.dsp-employee-table th, .dsp-employee-table td { vertical-align: top; }
.dsp-employee-table td strong,
.dsp-employee-table td span { display: block; }
.dsp-employee-table .bo-status { margin-bottom: 4px; width: max-content; }
/* backoffice */
.bo-wrap { padding: 12px; }
.bo-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.bo-tab { flex: 0 0 auto; min-height: 44px; padding: 8px 18px; border-radius: 12px; border: 1px solid #C7CDD6; background: var(--surface); cursor: pointer; }
.bo-tab-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.bo-stack { display: flex; flex-direction: column; gap: 12px; }
.bo-live-strip { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 1px solid #D8DDE5; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(18, 25, 35, .04); }
.bo-live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(31, 132, 74, .12); }
.bo-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.bo-kpi-grid-rich { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.bo-kpi { min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; border-left: 4px solid #D8DDE5; }
.bo-kpi-good { border-left-color: var(--success); }
.bo-kpi-warn { border-left-color: var(--warning); }
.bo-num { font-size: 30px; line-height: 1.05; font-weight: 750; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bo-analytics-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 12px; align-items: stretch; }
.bo-analytics-grid-tight { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); }
.bo-panel { overflow: hidden; }
.bo-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bo-route-bars { display: flex; flex-direction: column; gap: 12px; }
.bo-route-bar-row { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(260px, 1.2fr); gap: 12px; align-items: center; }
.bo-route-bar-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bo-route-bar-meta span, .bo-route-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-bar-pair { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bo-bar-track { position: relative; height: 24px; background: #EEF2F6; border-radius: 8px; overflow: hidden; }
.bo-bar { position: absolute; inset: 0 auto 0 0; min-width: 8px; border-radius: 8px; background: #7C8795; }
.bo-bar-median { background: #1D5FA7; opacity: .75; }
.bo-bar.is-normal { background: var(--success); }
.bo-bar.is-warning { background: var(--warning); }
.bo-bar.is-critical { background: var(--danger); }
.bo-bar-track em { position: absolute; right: 8px; top: 3px; font-style: normal; font-size: 12px; color: var(--text); z-index: 1; }
.bo-risk-total { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.bo-risk-total strong { font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; }
.bo-risk-meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.bo-risk-meta span { padding: 5px 8px; background: #F0F3F7; border-radius: 8px; }
.bo-risk-buckets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bo-risk-bucket { min-height: 92px; padding: 10px; border: 1px solid #D8DDE5; border-radius: 8px; display: flex; flex-direction: column; gap: 4px; }
.bo-risk-bucket strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.bo-risk-bucket em { font-style: normal; color: var(--muted); font-size: 12px; }
.bo-risk-bucket.is-warning { border-color: #E0A13A; background: #FFF8EA; }
.bo-risk-bucket.is-critical { border-color: #E27B72; background: #FFF0EF; }
.bo-compact-table th, .bo-compact-table td { font-size: 13px; vertical-align: top; }
.bo-routes-table th, .bo-routes-table td { vertical-align: top; }
.bo-quality-table td:first-child { color: var(--muted); }
.bo-quality-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.bo-row-warning td { background: #FFF8EA; }
.bo-row-critical td { background: #FFF0EF; }
.bo-drill td { background: #F8FAFC; }
.bo-drill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; color: var(--muted); }
.bo-drill-grid span { padding: 8px; border-radius: 8px; background: #FFFFFF; border: 1px solid #EDF0F4; }
.bo-resources { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.bo-resource-hint { margin-top: -2px; }
.bo-admin-table th, .bo-admin-table td { vertical-align: top; }
.bo-admin-table th:first-child { width: 30%; }
.bo-admin-table th:nth-child(3) { width: 84px; }
.bo-admin-table th:nth-child(4) { width: 130px; }
.bo-admin-title, .bo-admin-subtitle { display: block; min-width: 0; overflow-wrap: anywhere; }
.bo-admin-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.bo-admin-field { display: inline-flex; max-width: 100%; gap: 3px; padding: 4px 7px; border: 1px solid #E2E7EF; border-radius: 8px; background: #F8FAFC; font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }
.bo-status { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 8px; border-radius: 999px; background: #EEF2F6; color: var(--muted); font-size: 12px; font-weight: 750; white-space: nowrap; }
.bo-status-ok { background: #EAF6EF; color: var(--success); }
.bo-status-warn { background: #FFF4E5; color: var(--warning); }
.bo-status-bad, .bo-status-off { background: #FDEBEA; color: var(--danger); }
.bo-telemetry { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 16px; padding: 14px; border: 1px solid #E3E7ED; border-radius: 10px; background: #FAFBFC; }
.bo-telemetry-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.bo-telemetry-head h3 { font-size: 20px; margin-bottom: 2px; }
.bo-endpoints { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.bo-endpoint { display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding: 8px 10px; border: 1px solid #D8DDE5; border-radius: 8px; background: #FFFFFF; }
.bo-endpoint small { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.bo-quarantine-list { display: flex; flex-direction: column; gap: 8px; }
.bo-quarantine-list h4 { margin: 0; }
.bo-quarantine-item { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px; border: 1px solid #E0A13A; border-radius: 8px; background: #FFF8EA; }
.bo-quarantine-item strong, .bo-terminal-card strong { overflow-wrap: anywhere; }
.bo-quarantine-item .bo-status { margin-left: 6px; }
.bo-row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.bo-telemetry-form { padding: 12px; border: 1px solid #D8DDE5; border-radius: 8px; background: #FFFFFF; }
.bo-form-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px 12px; align-items: start; }
.bo-terminal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.bo-terminal-card { min-height: 154px; display: flex; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid #D8DDE5; border-radius: 8px; background: #FFFFFF; }
.bo-terminal-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bo-status-demo { background: #E8F1FF; color: #245EA8; }
.bo-demo-toggle { min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid #D8DDE5; border-radius: 8px; background: #F7FAFF; }
.bo-demo-toggle input { width: 18px; height: 18px; margin: 0; accent-color: #245EA8; }
.bo-demo-toggle span { display: flex; flex-direction: column; min-width: 0; }
.bo-simulator { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid #D8DDE5; }
.bo-simulator-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.bo-simulator-head h4 { margin: 0 0 2px; }
.bo-simulator-form { display: grid; grid-template-columns: minmax(190px, 1.1fr) minmax(260px, 1.8fr) minmax(140px, .7fr) minmax(120px, .5fr) auto; gap: 10px; align-items: end; padding: 12px; border: 1px solid #C9D8EC; border-radius: 8px; background: #F7FAFF; }
.bo-simulator-form .btn { min-height: 42px; white-space: nowrap; }
.bo-simulator-runs { display: flex; flex-direction: column; gap: 8px; }
.bo-simulator-run { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(230px, auto) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid #D8DDE5; border-radius: 8px; background: #FFFFFF; }
.bo-simulator-run > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bo-simulator-run strong, .bo-simulator-run span { overflow-wrap: anywhere; }
.bo-simulator-run-state { align-items: flex-start; }
.bo-map-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.bo-map-form { padding: 12px; border: 1px solid #D8DDE5; border-radius: 8px; background: #FFFFFF; }
.bo-zoom-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bo-map-file-note { display: block; margin-top: -6px; margin-bottom: 10px; overflow-wrap: anywhere; }
.bo-map-payload { min-height: 116px; font-family: ui-monospace, monospace; font-size: 13px; }
.bo-map-section { margin-top: 14px; }
.bo-map-section h4 { margin: 0 0 8px; }
.bo-map-section .bo-compact-table { table-layout: fixed; }
.bo-map-section .bo-compact-table th, .bo-map-section .bo-compact-table td { overflow-wrap: anywhere; }
.bo-map-package-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.bo-map-package { min-height: 220px; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid #D8DDE5; border-radius: 8px; background: #FFFFFF; }
.bo-map-package strong, .bo-map-package span, .bo-map-package dd, .bo-map-sha { overflow-wrap: anywhere; }
.bo-map-dl { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 8px; margin: 0; font-size: 12px; }
.bo-map-dl dt { color: var(--muted); }
.bo-map-dl dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.bo-csv { font-family: ui-monospace, monospace; font-size: 13px; }
.bo-check { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.bo-check input { min-height: 20px; }
.bo-audit { list-style: none; padding: 0; margin: 0; }
.bo-audit li { padding: 8px 0; border-bottom: 1px solid #EDF0F4; display: flex; justify-content: space-between; }
.emp-map-toolbar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.emp-map-preview { margin: 8px 0 10px; }
.map-wrap { position: relative; width: 100%; }
.map { position: relative; width: 100%; min-height: 180px; border-radius: 14px; border: 1px solid #C7CDD6; background: #E8EDF2; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); touch-action: none; }
.map.maplibregl-map { font: inherit; background: #E8EDF2; touch-action: none; }
.map .maplibregl-canvas { outline: none; }
.map .maplibregl-ctrl-group {
  border: 1px solid #B8C0CA;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15,23,42,.14);
}
.map .maplibregl-ctrl-group button { width: 36px; height: 36px; }
.map .maplibregl-ctrl-attrib,
.map .maplibregl-ctrl-scale {
  border-radius: 8px;
  font-family: inherit;
  font-size: 10px;
}
.sps-map-route-label,
.sps-map-stop-label,
.sps-map-vehicle {
  font-family: inherit;
  color: var(--text);
  box-shadow: 0 3px 12px rgba(15,23,42,.18);
}
.sps-map-route-label,
.sps-map-stop-label {
  pointer-events: none;
}
.sps-map-route-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(203,213,225,.9);
  font-size: 12px;
  line-height: 1.15;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
  cursor: pointer;
}
.sps-map-route-label span { width: 16px; height: 5px; border-radius: 999px; flex: 0 0 auto; }
.sps-map-stop-label {
  max-width: 170px;
  padding: 4px 7px;
  border-radius: 7px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(203,213,225,.82);
  font-size: 11px;
  line-height: 1.12;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sps-map-vehicle {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px 6px 6px;
  border: 2px solid #FFFFFF;
  border-radius: 999px;
  background: rgba(255,255,255,.98);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
}
.sps-map-vehicle.is-selected { outline: 3px solid rgba(217,22,53,.32); }
.sps-map-vehicle-dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.58);
  flex: 0 0 auto;
}
.sps-map-vehicle-label { white-space: nowrap; font-variant-numeric: tabular-nums; }
.push-control { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.bo-resource-editor { width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; }
.bo-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bo-editor-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 700; }
.bo-checkbox-row { display: flex !important; grid-column: 1 / -1; align-items: center; grid-template-columns: auto 1fr; }
.bo-checkbox-row input { width: 20px; height: 20px; }
@media (max-width: 1180px) {
  .dsp-layout { grid-template-columns: 1fr; }
  .dsp-map { order: -1; }
}
@media (max-width: 900px) {
  .app-header { flex-wrap: wrap; }
  .app-header > select.input { width: 100%; flex-basis: 100%; }
  .app-clock { width: 100%; order: 3; }
  .dsp-toolbar, .dsp-employee-summary { grid-template-columns: 1fr; display: grid; align-items: stretch; }
  .dsp-date-field { min-width: 0; }
  .dsp-employee-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-analytics-grid, .bo-analytics-grid-tight, .bo-route-bar-row, .bo-drill-grid, .bo-form-grid, .bo-simulator-form, .bo-simulator-run { grid-template-columns: 1fr; }
  .bo-risk-buckets { grid-template-columns: 1fr; }
  .bo-telemetry-head, .bo-map-head, .bo-quarantine-item, .bo-simulator-head { flex-direction: column; align-items: stretch; }
  .bo-endpoints, .bo-row-actions { justify-content: flex-start; }
  .emp-action-grid, .emp-form-grid, .emp-profile-summary .emp-profile, .emp-journey-grid, .emp-facts-grid { grid-template-columns: 1fr; }
  .emp-next-head, .emp-map-head { flex-direction: column; }
  .emp-clock-strip { align-items: flex-start; flex-direction: column; }
  .emp-editor-head { flex-direction: column; }
  .emp-editor-actions { width: 100%; justify-content: stretch; }
  .emp-editor-actions .btn { flex: 1; }
  .emp-board { overflow-x: auto; }
  .emp-board-table { min-width: 720px; }
  .dsp-drawer { left: 12px; right: 12px; top: 74px; bottom: 12px; width: auto; }
  .bo-editor-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .sps-map-route-label { display: none; }
  .sps-map-stop-label { display: none; }
}