:root {
  --bg: #0f1115;
  --panel: #161a20;
  --panel-alt: #1d232c;
  --panel-soft: #232b35;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #eff3f8;
  --muted: #9aa7b6;
  --accent: #54c7b0;
  --accent-strong: #2fd3ae;
  --accent-warm: #ffb347;
  --accent-danger: #ff6b6b;
  --accent-info: #6cb9ff;
  --success: #6dd58c;
  --warning: #ffd166;
  --danger: #ff6b6b;
  --road: #ece7de;
  --road-google: #e3ebd9;
  --hybrid-grid: rgba(255, 255, 255, 0.13);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  --sidebar-w: clamp(280px, 15.6vw, 334px);
  --map-side-w: clamp(300px, 18.1vw, 372px);
  --report-sidebar-w: clamp(316px, 18.6vw, 390px);
  --workspace-pad: clamp(16px, 1.45vw, 28px);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --map-overlay-bg: rgba(18, 21, 26, 0.94);
  --map-overlay-bg-soft: rgba(18, 21, 26, 0.9);
  --map-overlay-bg-strong: rgba(18, 21, 26, 0.98);
  --map-overlay-bg-glass: rgba(18, 21, 26, 0.88);
  --map-overlay-item-bg: rgba(255, 255, 255, 0.015);
  --map-overlay-border: rgba(255, 255, 255, 0.12);
  --map-overlay-border-soft: rgba(255, 255, 255, 0.1);
  --map-overlay-shadow: 0 18px 36px rgba(0, 0, 0, 0.34);
  --map-overlay-shadow-lg: 0 20px 44px rgba(0, 0, 0, 0.38);
  --mono: "Cascadia Mono", "Consolas", "Courier New", monospace;
  --ui: "Segoe UI Variable Text", "Segoe UI", "Noto Sans", "Tahoma", sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at top left, rgba(84, 199, 176, 0.08), transparent 28%),
    radial-gradient(circle at top right, rgba(108, 185, 255, 0.07), transparent 26%),
    linear-gradient(180deg, #12161c 0%, #0f1115 100%);
  color: var(--text);
  font-family: var(--ui);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
}

html[data-theme="light"],
html[data-theme="light"] body {
  background:
    radial-gradient(circle at top left, rgba(84, 199, 176, 0.12), transparent 26%),
    radial-gradient(circle at top right, rgba(108, 185, 255, 0.12), transparent 24%),
    linear-gradient(180deg, #f6f8fb 0%, #edf2f8 100%);
  color: #1d2733;
}

html[data-theme="light"] {
  --bg: #edf2f8;
  --panel: #ffffff;
  --panel-alt: #f7faff;
  --panel-soft: #eef3f8;
  --line: rgba(42, 65, 92, 0.12);
  --line-strong: rgba(42, 65, 92, 0.22);
  --text: #1d2733;
  --muted: #66778b;
  --shadow: 0 14px 32px rgba(55, 75, 102, 0.12);
  --map-overlay-bg: rgba(255, 255, 255, 0.92);
  --map-overlay-bg-soft: rgba(247, 250, 254, 0.94);
  --map-overlay-bg-strong: rgba(255, 255, 255, 0.97);
  --map-overlay-bg-glass: rgba(255, 255, 255, 0.9);
  --map-overlay-item-bg: rgba(42, 65, 92, 0.04);
  --map-overlay-border: rgba(42, 65, 92, 0.14);
  --map-overlay-border-soft: rgba(42, 65, 92, 0.12);
  --map-overlay-shadow: 0 18px 36px rgba(55, 75, 102, 0.18);
  --map-overlay-shadow-lg: 0 20px 44px rgba(55, 75, 102, 0.22);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  min-height: 100vh;
  height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  overflow: hidden;
}

.sidebar {
  background: linear-gradient(180deg, rgba(6, 9, 12, 0.9), rgba(10, 13, 17, 0.95));
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
  position: relative;
}

.sidebar-header {
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
}

.sidebar-search-wrap {
  padding: 0 18px 12px;
}

.map-sidebar-top {
  position: relative;
  z-index: 5;
}

.map-search-toolbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
}

.map-search-input-wrap {
  min-width: 0;
}

.map-search-input-wrap .search-field {
  width: 100%;
}

.map-search-icon-button {
  appearance: none;
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(16, 25, 34, 0.92);
  color: #d6e1ef;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.map-search-icon-button:hover {
  background: rgba(25, 39, 52, 0.96);
  border-color: rgba(132, 162, 191, 0.38);
  color: #f4f8fd;
  transform: translateY(-1px);
}

.map-search-icon-button.is-active {
  background: linear-gradient(135deg, rgba(16, 83, 82, 0.92) 0%, rgba(58, 202, 183, 0.18) 100%);
  color: #ecfffa;
  border-color: rgba(84, 199, 176, 0.56);
}

.map-search-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.map-search-icon path,
.map-search-icon circle {
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.map-status-popover {
  margin: 8px 18px 0;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(18, 21, 26, 0.96);
  box-shadow: var(--shadow);
}

.map-status-popover-title {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.map-status-option-list {
  display: grid;
  gap: 8px;
}

.map-status-option-list .status-pill {
  width: 100%;
  justify-content: flex-start;
}

.detail-sidebar-panel {
  margin-top: 0;
  margin-bottom: 14px;
}

#detailSidebarHeader .page-title {
  font-size: 1.08rem;
  line-height: 1.18;
}

.detail-metric-grid {
  display: grid;
  gap: 8px;
}

.detail-metric-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 0.82rem;
}

.detail-metric-item .muted {
  min-width: 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-metric-item > :last-child {
  color: var(--text);
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

body[data-page="detail"] .sidebar-header .page-title {
  margin: 0;
  font-size: 1.28rem;
  line-height: 1.15;
}

body[data-page="detail"] .sidebar-header .page-subtitle {
  margin-top: 10px;
  font-size: 0.92rem;
  line-height: 1.5;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
}

.theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.theme-button {
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.theme-icon-sun circle,
.theme-icon-sun path {
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.theme-icon-moon path {
  fill: currentColor;
}

.brand-mark {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-info) 100%);
  color: #041015;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.brand-copy strong {
  display: block;
  font-size: 0.98rem;
}

.brand-copy span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.82rem;
}

.sidebar .brand-copy {
  display: none;
}

.icon-button,
.ghost-button,
.solid-button,
.chip-button,
.layer-button,
.measure-button,
.tab-button,
.quick-link {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.icon-button:hover,
.ghost-button:hover,
.solid-button:hover,
.chip-button:hover,
.layer-button:hover,
.measure-button:hover,
.tab-button:hover,
.quick-link:hover {
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.solid-button {
  background: linear-gradient(135deg, var(--accent) 0%, #2cc9a4 100%);
  color: #041015;
  border-color: transparent;
  font-weight: 700;
}

.address-lookup-button {
  padding: 6px 10px;
  font-size: 0.74rem;
  border-radius: 10px;
  white-space: nowrap;
}

.ghost-button.is-active,
.chip-button.is-active,
.layer-button.is-active,
.measure-button.is-active,
.tab-button.is-active {
  background: rgba(84, 199, 176, 0.14);
  border-color: rgba(84, 199, 176, 0.5);
  color: #dffcf7;
}

.layer-button.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

.search-field,
.select-field {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 14px;
  outline: none;
}

.select-field {
  color-scheme: dark;
  background-color: rgba(18, 23, 30, 0.96);
}

.select-field option,
.select-field optgroup {
  background: #141a22;
  color: var(--text);
}

.search-field::placeholder {
  color: #718091;
}

html[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, rgba(250, 252, 255, 0.96), rgba(241, 246, 252, 0.98));
}

html[data-theme="light"] .icon-button,
html[data-theme="light"] .ghost-button,
html[data-theme="light"] .solid-button,
html[data-theme="light"] .chip-button,
html[data-theme="light"] .map-search-icon-button,
html[data-theme="light"] .layer-button,
html[data-theme="light"] .measure-button,
html[data-theme="light"] .tab-button,
html[data-theme="light"] .quick-link,
html[data-theme="light"] .search-field,
html[data-theme="light"] .select-field,
html[data-theme="light"] .mini-card,
html[data-theme="light"] .graph-stat-card,
html[data-theme="light"] .filter-card,
html[data-theme="light"] .metric-card,
html[data-theme="light"] .alert-card,
html[data-theme="light"] .dtc-code-row,
html[data-theme="light"] .pill,
html[data-theme="light"] .header-card,
html[data-theme="light"] .map-status-popover {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(42, 65, 92, 0.12);
}

html[data-theme="light"] .icon-button,
html[data-theme="light"] .ghost-button,
html[data-theme="light"] .chip-button,
html[data-theme="light"] .map-search-icon-button,
html[data-theme="light"] .quick-link,
html[data-theme="light"] .search-field,
html[data-theme="light"] .select-field {
  color: #1d2733;
}

html[data-theme="light"] .icon-button:hover,
html[data-theme="light"] .ghost-button:hover,
html[data-theme="light"] .solid-button:hover,
html[data-theme="light"] .chip-button:hover,
html[data-theme="light"] .map-search-icon-button:hover,
html[data-theme="light"] .layer-button:hover,
html[data-theme="light"] .measure-button:hover,
html[data-theme="light"] .tab-button:hover,
html[data-theme="light"] .quick-link:hover {
  border-color: rgba(42, 65, 92, 0.24);
}

html[data-theme="light"] .solid-button,
html[data-theme="light"] .brand-mark {
  color: #08131a;
}

html[data-theme="light"] .ghost-button.is-active,
html[data-theme="light"] .chip-button.is-active,
html[data-theme="light"] .map-search-icon-button.is-active,
html[data-theme="light"] .layer-button.is-active,
html[data-theme="light"] .measure-button.is-active,
html[data-theme="light"] .tab-button.is-active,
html[data-theme="light"] .quick-link.is-current {
  background: rgba(84, 199, 176, 0.14);
  border-color: rgba(48, 165, 144, 0.38);
  color: #145346;
}

html[data-theme="light"] .search-field::placeholder {
  color: #7a8ca0;
}

html[data-theme="light"] .select-field {
  color-scheme: light;
  background-color: rgba(255, 255, 255, 0.94);
}

html[data-theme="light"] .select-field option,
html[data-theme="light"] .select-field optgroup {
  background: #ffffff;
  color: #1d2733;
}

html[data-theme="light"] .status-pill {
  background: rgba(255, 255, 255, 0.92);
  color: #64778c;
  border-color: rgba(42, 65, 92, 0.12);
}

html[data-theme="light"] .status-pill:hover {
  background: rgba(245, 249, 253, 0.98);
  border-color: rgba(42, 65, 92, 0.22);
  color: #29455f;
}

html[data-theme="light"] .status-pill.is-active,
html[data-theme="light"] .device-item.is-active,
html[data-theme="light"] .report-item.is-active {
  color: #134b42;
  border-color: rgba(84, 199, 176, 0.34);
  box-shadow: 0 10px 22px rgba(84, 199, 176, 0.08);
}

html[data-theme="light"] body[data-page="map"] .map-search-icon-button {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(42, 65, 92, 0.12);
  color: #1d2733;
}

html[data-theme="light"] body[data-page="map"] .map-search-icon-button:hover {
  background: rgba(245, 249, 253, 0.98);
  border-color: rgba(42, 65, 92, 0.22);
  color: #1d2733;
}

html[data-theme="light"] body[data-page="map"] .map-search-icon-button.is-active {
  background: rgba(84, 199, 176, 0.14);
  border-color: rgba(48, 165, 144, 0.38);
  color: #145346;
}

html[data-theme="light"] .device-item:hover,
html[data-theme="light"] .report-item:hover,
html[data-theme="light"] tbody tr:hover {
  background: rgba(84, 199, 176, 0.08);
}

html[data-theme="light"] .surface,
html[data-theme="light"] .panel,
html[data-theme="light"] .card,
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .chart-card,
html[data-theme="light"] .table-card,
html[data-theme="light"] .info-card,
html[data-theme="light"] .wheel-card,
html[data-theme="light"] .report-card,
html[data-theme="light"] .summary-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 253, 0.98));
}

html[data-theme="light"] .map-badge,
html[data-theme="light"] .map-zoom,
html[data-theme="light"] .floating-card,
html[data-theme="light"] .measure-panel,
html[data-theme="light"] .map-provider-panel {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(42, 65, 92, 0.14);
}

html[data-theme="light"] .zoom-button {
  background: rgba(255, 255, 255, 0.96);
}

html[data-theme="light"] .zoom-button.is-active {
  color: #145346;
}

html[data-theme="light"] .zoom-readout,
html[data-theme="light"] .chart-tooltip-time,
html[data-theme="light"] .table-card h3,
html[data-theme="light"] .chart-card h3,
html[data-theme="light"] .info-card h3,
html[data-theme="light"] .summary-card h3,
html[data-theme="light"] .report-card h3,
html[data-theme="light"] .mini-card h3,
html[data-theme="light"] .section-title,
html[data-theme="light"] .page-title,
html[data-theme="light"] .page-subtitle strong,
html[data-theme="light"] .code-line {
  color: #1d2733;
}

html[data-theme="light"] .map-tool-readout,
html[data-theme="light"] .definition-row,
html[data-theme="light"] .device-meta,
html[data-theme="light"] .report-meta,
html[data-theme="light"] .meta-line,
html[data-theme="light"] .helper-note,
html[data-theme="light"] .foot-note,
html[data-theme="light"] .provider-label,
html[data-theme="light"] .wheel-title,
html[data-theme="light"] .graph-stat-row,
html[data-theme="light"] .kpi-label {
  color: #66778b;
}

html[data-theme="light"] .leaflet-map-host .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.92);
  color: #425468;
}

html[data-theme="light"] .leaflet-map-host .leaflet-control-attribution a {
  color: #1f6aa5;
}

html[data-theme="light"] .leaflet-vehicle-name,
html[data-theme="light"] .leaflet-track-label,
html[data-theme="light"] .track-point-label,
html[data-theme="light"] .marker-label {
  border-color: rgba(42, 65, 92, 0.16);
  text-shadow: none;
}

html[data-theme="light"] .leaflet-vehicle-name {
  background: transparent;
  border-color: transparent;
  color: #0b0f14;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

html[data-theme="light"] .leaflet-track-label.is-area,
html[data-theme="light"] .marker-label.is-selected,
html[data-theme="light"] .track-point-label.is-area {
  background: rgba(235, 251, 247, 0.96);
  color: #135447;
}

html[data-theme="light"] .leaflet-track-label.is-segment {
  background: rgba(28, 42, 54, 0.92);
  color: #f6fbff;
}

html[data-theme="light"] .chart-shell {
  background: linear-gradient(180deg, rgba(247, 250, 254, 0.98), rgba(241, 246, 252, 0.98));
}

html[data-theme="light"] .chart-axis-label {
  color: rgba(70, 87, 107, 0.86);
  text-shadow: none;
}

html[data-theme="light"] .chart-tooltip {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(42, 65, 92, 0.12);
  color: #1d2733;
  box-shadow: 0 18px 38px rgba(55, 75, 102, 0.16);
}

html[data-theme="light"] .chart-tooltip-meta {
  color: #6b7e92;
}

html[data-theme="light"] .chart-tooltip-meta strong,
html[data-theme="light"] .chart-tooltip-label {
  color: #1d2733;
}

html[data-theme="light"] .chart-tooltip-row {
  background: rgba(241, 246, 252, 0.9);
  border-color: rgba(42, 65, 92, 0.08);
}

html[data-theme="light"] .mini-tag {
  background: rgba(241, 246, 252, 0.94);
  border-color: rgba(42, 65, 92, 0.12);
  color: #425468;
}

html[data-theme="light"] .kpi-value {
  color: #1a2733;
}

html[data-theme="light"] .kpi-unit {
  color: rgba(29, 39, 51, 0.72);
}

html[data-theme="light"] .kpi-note {
  color: #5f7286;
}

html[data-theme="light"] .kpi-card::after {
  background: rgba(29, 39, 51, 0.06);
}

html[data-theme="light"] .accent-teal {
  background: linear-gradient(135deg, rgba(219, 242, 247, 0.96), rgba(242, 249, 252, 0.98));
}

html[data-theme="light"] .accent-green {
  background: linear-gradient(135deg, rgba(224, 245, 230, 0.96), rgba(245, 251, 247, 0.98));
}

html[data-theme="light"] .accent-orange {
  background: linear-gradient(135deg, rgba(252, 236, 214, 0.98), rgba(255, 247, 236, 0.98));
}

html[data-theme="light"] .accent-red {
  background: linear-gradient(135deg, rgba(252, 228, 228, 0.98), rgba(255, 245, 245, 0.98));
}

html[data-theme="light"] .accent-blue {
  background: linear-gradient(135deg, rgba(223, 236, 252, 0.98), rgba(244, 249, 255, 0.98));
}

html[data-theme="light"] .accent-violet {
  background: linear-gradient(135deg, rgba(236, 228, 252, 0.98), rgba(248, 245, 255, 0.98));
}

html[data-theme="light"] thead th {
  background: rgba(247, 250, 254, 0.98);
  color: #3b4b5d;
}

html[data-theme="light"] .table-scroll {
  background: rgba(255, 255, 255, 0.82);
}

html[data-theme="light"] .timeline-point {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 253, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .timeline-point.is-active {
  background: linear-gradient(180deg, rgba(231, 248, 244, 0.98), rgba(220, 242, 237, 0.98));
  box-shadow: 0 10px 18px rgba(47, 112, 104, 0.12), inset 0 0 0 1px rgba(84, 199, 176, 0.12);
}

html[data-theme="light"] .timeline-time,
html[data-theme="light"] .detail-timeline-label {
  color: #1d2733;
  text-shadow: none;
}

html[data-theme="light"] .timeline-speed,
html[data-theme="light"] .timeline-rpm {
  color: #66778b;
}

html[data-theme="light"] .detail-timeline-slider::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, rgba(114, 129, 232, 0.78) 0%, rgba(114, 129, 232, 0.78) var(--timeline-progress), rgba(223, 230, 243, 0.98) var(--timeline-progress), rgba(223, 230, 243, 0.98) 100%);
}

html[data-theme="light"] .detail-timeline-slider::-moz-range-track {
  background: rgba(223, 230, 243, 0.98);
}

.sidebar-controls,
.filter-row,
.toolbar-row,
.button-row,
.chip-row,
.measure-row,
.kpi-grid,
.card-grid,
.chart-grid,
.stats-grid,
.wheel-grid,
.summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sidebar-controls {
  margin-top: 10px;
}

.status-pills {
  padding: 14px 18px 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.status-pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: rgba(16, 25, 34, 0.92);
  color: #a8b7c9;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.status-pill:hover {
  background: rgba(25, 39, 52, 0.96);
  border-color: rgba(132, 162, 191, 0.38);
  color: #dbe8f5;
  transform: translateY(-1px);
}

.status-pill.is-active {
  background: linear-gradient(135deg, rgba(16, 83, 82, 0.92) 0%, rgba(58, 202, 183, 0.18) 100%);
  color: #ecfffa;
  border-color: rgba(84, 199, 176, 0.56);
  box-shadow: 0 0 0 1px rgba(84, 199, 176, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.device-list,
.report-menu {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 6px 10px 18px;
}

.report-menu {
  display: grid;
  gap: 8px;
  align-content: start;
}

.device-item,
.report-item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 12px;
  background: transparent;
  color: var(--text);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  margin-bottom: 8px;
}

.report-item {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin-bottom: 0;
  font: inherit;
}

.report-item > span:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.device-item:hover,
.report-item:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line);
}

.device-item.is-active,
.report-item.is-active {
  background: linear-gradient(135deg, rgba(84, 199, 176, 0.14), rgba(108, 185, 255, 0.12));
  border-color: rgba(108, 185, 255, 0.26);
}

.device-avatar {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #cfe4f5;
}

.device-title,
.report-title {
  font-weight: 700;
  font-size: 0.92rem;
}

.device-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.report-item .report-title,
.report-item .report-meta {
  display: block;
}

.report-item .report-title {
  line-height: 1.28;
}

.device-meta,
.report-meta,
.meta-line {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 4px;
}

.device-list-time {
  display: block;
}

.device-list-time.is-online {
  color: var(--success);
}

.report-item .report-meta {
  margin-top: 0;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.mini-tag {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.72rem;
  border: 1px solid var(--line);
  color: #bfd7ec;
  background: rgba(255, 255, 255, 0.04);
  align-self: start;
}

.report-item .mini-tag {
  justify-self: end;
}

.device-status-dot,
.status-dot {
  width: 11px;
  min-width: 11px;
  height: 11px;
  border-radius: 999px;
  display: inline-flex;
}

.status-online {
  background: var(--success);
  box-shadow: 0 0 0 6px rgba(109, 213, 140, 0.12);
}

.status-idle {
  background: var(--warning);
  box-shadow: 0 0 0 6px rgba(255, 209, 102, 0.12);
}

.status-offline {
  background: var(--danger);
  box-shadow: 0 0 0 6px rgba(255, 107, 107, 0.12);
}

.sidebar-footer {
  padding: 12px 12px 18px;
  border-top: 1px solid var(--line);
}

.sidebar-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 0;
}

.sidebar-footer .theme-switcher {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.sidebar-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.quick-link {
  position: relative;
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0;
}

.quick-link.is-current {
  background: rgba(84, 199, 176, 0.14);
  border-color: rgba(84, 199, 176, 0.42);
}

.quick-link-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.quick-link-icon path,
.quick-link-icon circle {
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.workspace {
  min-width: 0;
  min-height: 0;
  padding: var(--workspace-pad);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.workspace::-webkit-scrollbar,
.device-list::-webkit-scrollbar,
.report-menu::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.workspace::-webkit-scrollbar-track,
.device-list::-webkit-scrollbar-track,
.report-menu::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.workspace::-webkit-scrollbar-thumb,
.device-list::-webkit-scrollbar-thumb,
.report-menu::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(227, 236, 246, 0.92), rgba(171, 188, 206, 0.86));
  border-radius: 999px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.page-title {
  margin: 0;
  font-size: clamp(1.55rem, 2vw, 2.2rem);
  line-height: 1.05;
}

.page-subtitle {
  margin: 7px 0 0;
  color: var(--muted);
  max-width: 720px;
}

.surface,
.panel,
.card,
.kpi-card,
.chart-card,
.table-card,
.info-card,
.wheel-card,
.report-card,
.summary-card {
  background: linear-gradient(180deg, rgba(30, 36, 44, 0.94), rgba(19, 24, 31, 0.96));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.surface {
  padding: 18px;
}

.panel {
  padding: 16px;
}

.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--map-side-w);
  gap: 16px;
}

.map-widget {
  position: relative;
  overflow: hidden;
}

.map-widget.is-fill-height {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.map-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.section-title {
  margin: 0;
  font-size: 1.02rem;
}

.section-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.provider-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.provider-stack .provider-row.is-single-line {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.provider-stack .provider-row.is-single-line .select-field {
  min-width: 200px;
}

.provider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.provider-label {
  color: var(--muted);
  font-size: 0.78rem;
}

.map-shell {
  position: relative;
  min-height: clamp(520px, 60vh, 760px);
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.map-shell.is-compact {
  min-height: clamp(360px, 42vh, 540px);
}

.map-shell.is-report {
  min-height: clamp(430px, 50vh, 620px);
}

.map-widget.is-fill-height .map-shell {
  flex: 1;
  min-height: 0;
}

.map-surface {
  position: absolute;
  inset: 0;
  background: #c7d2de;
  cursor: grab;
  touch-action: none;
  user-select: none;
  --map-pan-x: 0px;
  --map-pan-y: 0px;
  --map-visual-zoom: 1;
}

.map-surface.is-dragging {
  cursor: grabbing;
}

.map-surface[data-layer="road"] {
  background: #dad3c5;
}

.map-surface[data-layer="satellite"] {
  background: #58624f;
}

.map-surface[data-layer="hybrid"] {
  background: #606854;
}

.map-pan {
  position: absolute;
  inset: 0;
  transition: transform 0.18s ease;
  will-change: transform;
}

.leaflet-map-host,
.leaflet-map-host .leaflet-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.map-shell.is-selection-enabled .leaflet-container,
.map-shell.is-selection-enabled .leaflet-container * {
  cursor: crosshair;
}

.yandex-map-host {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
  transition: opacity 0.18s ease;
}

.yandex-map-host.is-visible {
  opacity: 1;
}

.yandex-map-host.is-frozen {
  opacity: 0;
}

.yandex-drag-ghost {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
}

.yandex-drag-ghost canvas {
  display: block;
}

.leaflet-map-host {
  background: #ccd6e1;
  border-radius: 22px;
}

.leaflet-map-host {
  z-index: 1;
}

.map-surface[data-provider="yandex"] .leaflet-map-host {
  background: transparent;
}

.leaflet-map-host .leaflet-control-attribution {
  background: rgba(12, 16, 21, 0.72);
  color: rgba(255, 255, 255, 0.82);
  border-radius: 10px 0 0 0;
}

.leaflet-map-host .leaflet-control-attribution a {
  color: rgba(255, 255, 255, 0.9);
}

.map-canvas {
  position: absolute;
  inset: 0;
  transform-origin: center center;
  transition: transform 0.18s ease;
  will-change: transform;
}

.map-surface.is-dragging .map-pan,
.map-surface.is-dragging .map-canvas {
  transition: none;
}

.map-surface::before,
.map-surface::after {
  display: none;
}

.map-svg,
.chart-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.chart-svg text {
  font-family: var(--ui);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.map-svg {
  z-index: 1;
}

.map-canvas::before,
.map-canvas::after {
  content: "";
  position: absolute;
  inset: -28%;
  pointer-events: none;
}

.map-canvas::before {
  z-index: 0;
}

.map-canvas::after {
  z-index: 0;
}

.map-canvas[data-provider="osm"][data-layer="road"]::before {
  background:
    radial-gradient(circle at 18% 24%, rgba(116, 170, 230, 0.54) 0 8%, transparent 8.4%),
    radial-gradient(circle at 72% 76%, rgba(140, 190, 112, 0.34) 0 11%, transparent 11.4%),
    radial-gradient(circle at 44% 58%, rgba(124, 191, 112, 0.24) 0 16%, transparent 16.4%),
    linear-gradient(135deg, #f4efe6 0%, #ddd6c8 100%);
}

.map-canvas[data-provider="google"][data-layer="road"]::before {
  background:
    radial-gradient(circle at 16% 22%, rgba(92, 164, 236, 0.56) 0 9%, transparent 9.4%),
    radial-gradient(circle at 82% 70%, rgba(149, 198, 108, 0.34) 0 10%, transparent 10.4%),
    linear-gradient(135deg, #eef4df 0%, #d9e4c9 100%);
}

.map-canvas[data-provider="yandex"][data-layer="road"]::before {
  background:
    radial-gradient(circle at 14% 20%, rgba(90, 165, 232, 0.5) 0 8%, transparent 8.4%),
    radial-gradient(circle at 78% 74%, rgba(152, 196, 116, 0.33) 0 9%, transparent 9.4%),
    linear-gradient(135deg, #f6efe1 0%, #e3d9cb 100%);
}

.map-canvas[data-layer="road"]::after {
  background:
    linear-gradient(90deg, transparent 0 14%, rgba(244, 197, 76, 0.96) 14.2%, transparent 14.45% 100%),
    linear-gradient(180deg, transparent 0 56%, rgba(250, 211, 88, 0.92) 56.2%, transparent 56.45% 100%),
    linear-gradient(136deg, transparent 0 44%, rgba(255, 255, 255, 0.9) 44.15%, transparent 44.35% 100%),
    linear-gradient(118deg, transparent 0 66%, rgba(255, 255, 255, 0.82) 66.15%, transparent 66.35% 100%),
    repeating-linear-gradient(0deg, rgba(43, 58, 71, 0.12) 0 1px, transparent 1px 70px),
    repeating-linear-gradient(90deg, rgba(43, 58, 71, 0.12) 0 1px, transparent 1px 70px);
  opacity: 0.96;
}

.map-canvas[data-layer="satellite"]::before {
  background:
    radial-gradient(circle at 12% 20%, rgba(57, 96, 71, 0.98) 0 13%, transparent 13.4%),
    radial-gradient(circle at 76% 32%, rgba(91, 126, 63, 0.88) 0 16%, transparent 16.4%),
    radial-gradient(circle at 84% 76%, rgba(101, 131, 70, 0.84) 0 12%, transparent 12.4%),
    radial-gradient(circle at 42% 54%, rgba(137, 153, 88, 0.62) 0 18%, transparent 18.4%),
    radial-gradient(circle at 22% 74%, rgba(80, 131, 159, 0.56) 0 8%, transparent 8.4%),
    linear-gradient(135deg, #324338 0%, #625741 46%, #3d493c 100%);
}

.map-canvas[data-layer="satellite"]::after {
  background:
    repeating-linear-gradient(34deg, rgba(255, 255, 255, 0.06) 0 4px, transparent 4px 18px),
    repeating-linear-gradient(126deg, rgba(0, 0, 0, 0.08) 0 6px, transparent 6px 22px),
    radial-gradient(circle at 54% 46%, rgba(88, 157, 192, 0.46) 0 5%, transparent 5.4%);
  opacity: 0.96;
}

.map-canvas[data-layer="hybrid"]::before {
  background:
    radial-gradient(circle at 12% 20%, rgba(72, 110, 84, 0.95) 0 13%, transparent 13.4%),
    radial-gradient(circle at 76% 32%, rgba(98, 128, 74, 0.82) 0 15%, transparent 15.4%),
    radial-gradient(circle at 84% 76%, rgba(95, 125, 78, 0.78) 0 11%, transparent 11.4%),
    radial-gradient(circle at 42% 54%, rgba(124, 151, 92, 0.52) 0 17%, transparent 17.4%),
    linear-gradient(135deg, #4d5947 0%, #786e53 46%, #475043 100%);
}

.map-canvas[data-layer="hybrid"]::after {
  background:
    linear-gradient(90deg, transparent 0 14%, rgba(255, 255, 255, 0.64) 14.15%, transparent 14.35% 100%),
    linear-gradient(180deg, transparent 0 56%, rgba(255, 229, 150, 0.58) 56.15%, transparent 56.35% 100%),
    linear-gradient(136deg, transparent 0 44%, rgba(255, 255, 255, 0.72) 44.15%, transparent 44.35% 100%),
    linear-gradient(118deg, transparent 0 66%, rgba(255, 255, 255, 0.66) 66.15%, transparent 66.35% 100%),
    repeating-linear-gradient(34deg, rgba(255, 255, 255, 0.05) 0 4px, transparent 4px 18px);
}

.map-badge,
.map-zoom,
.floating-card,
.measure-panel,
.map-provider-panel {
  position: absolute;
  z-index: 1000;
  backdrop-filter: blur(12px);
  background: rgba(14, 17, 22, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.map-badge {
  top: 16px;
  left: 16px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  max-width: min(440px, calc(100% - 188px));
}

.map-control-stack {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: grid;
  gap: 10px;
  justify-items: end;
}

.map-provider-panel {
  position: static;
  padding: 10px 12px;
  width: min(360px, calc(100vw - 44px));
}

.map-provider-panel .provider-row {
  justify-content: flex-end;
}

.map-provider-panel .select-field {
  min-width: 210px;
}

.map-zoom {
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 10px;
}

.map-control-stack .map-zoom {
  position: static;
  top: auto;
  right: auto;
}

.map-zoom-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.map-zoom.is-bottom {
  top: auto;
  right: auto;
  bottom: 16px;
  left: 16px;
  width: fit-content;
  max-width: min(640px, calc(100% - 32px));
  align-items: flex-start;
  padding: 10px 12px;
}

.map-zoom.is-single-line .map-zoom-row {
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
}

.map-zoom.is-single-line .zoom-button {
  min-width: 44px;
  padding-inline: 12px;
}

.map-zoom.is-single-line .zoom-readout {
  min-width: 44px;
}

.zoom-button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-radius: 12px;
  min-width: 38px;
  padding: 8px 10px;
  cursor: pointer;
}

.zoom-button.is-active {
  background: rgba(84, 199, 176, 0.14);
  border-color: rgba(84, 199, 176, 0.5);
  color: #dffcf7;
}

.zoom-button.is-reset {
  min-width: 52px;
}

.zoom-readout {
  min-width: 54px;
  text-align: center;
  color: #f4f7fb;
  font-size: 0.8rem;
  font-weight: 700;
}

.map-tool-readout {
  max-width: 260px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
  text-align: right;
}

.map-tool-readout.is-inline {
  max-width: 100%;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.floating-card {
  right: 16px;
  bottom: 116px;
  width: 320px;
  max-height: calc(100% - 172px);
  overflow: auto;
  padding: 16px;
}

.leaflet-vehicle-wrapper,
.leaflet-label-wrapper,
.leaflet-arrow-wrapper {
  background: transparent;
  border: none;
}

.leaflet-vehicle-marker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding-top: 18px;
  transform-origin: 14px 34px;
  transition: transform 0.16s ease, filter 0.16s ease;
}

.leaflet-vehicle-pin {
  position: relative;
  width: 28px;
  height: 28px;
  display: inline-block;
  border-radius: 999px 999px 999px 0;
  rotate: -45deg;
  background: #d54747;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.leaflet-vehicle-marker.is-online .leaflet-vehicle-pin {
  background: #28d7a5;
}

.leaflet-vehicle-marker.is-idle .leaflet-vehicle-pin {
  background: #ffb347;
}

.leaflet-vehicle-marker.is-offline .leaflet-vehicle-pin {
  background: #d54747;
}

.leaflet-vehicle-pin::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
}

.leaflet-vehicle-name {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 6px);
  transform: translateX(-50%);
  display: block;
  max-width: 120px;
  padding: 0;
  background: transparent;
  border: 0;
  color: #0b0f14;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
  box-shadow: none;
}

.leaflet-vehicle-marker.is-selected .leaflet-vehicle-name {
  font-size: 0.78rem;
  font-weight: 700;
  max-width: 132px;
}

.leaflet-vehicle-marker.is-selected .leaflet-vehicle-pin {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2), 0 4px 10px rgba(0, 0, 0, 0.18);
}

.leaflet-vehicle-marker.is-selected {
  transform: scale(1.18);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
}

.leaflet-track-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(12, 16, 21, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.72rem;
  color: #f5f7fb;
  text-shadow: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.leaflet-track-label.is-area {
  background: rgba(16, 27, 31, 0.92);
  border-color: rgba(84, 199, 176, 0.45);
  color: #dffcf7;
}

.leaflet-track-label.is-segment {
  background: rgba(255, 255, 255, 0.9);
  color: #10151b;
  border-color: rgba(255, 255, 255, 0.3);
}

.leaflet-route-arrow {
  width: 14px;
  height: 14px;
  display: inline-block;
  background: var(--arrow-color, #43b5ff);
  clip-path: polygon(0 28%, 44% 28%, 44% 0, 100% 50%, 44% 100%, 44% 72%, 0 72%);
  transform: rotate(var(--arrow-angle, 0deg));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.22));
}

.measure-panel {
  left: 16px;
  bottom: 16px;
  width: 320px;
  padding: 16px;
}

.measure-results,
.popup-grid,
.mini-definition {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.definition-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.82rem;
}

.definition-row strong {
  color: var(--text);
  text-align: right;
}

.map-side {
  display: grid;
  gap: 14px;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  padding-right: 4px;
  scrollbar-width: thin;
}

.map-side::-webkit-scrollbar {
  width: 10px;
}

.map-side::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.map-side::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(227, 236, 246, 0.92), rgba(171, 188, 206, 0.86));
  border-radius: 999px;
}

.map-side .chip-row.is-map-layer-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.map-side .chip-row.is-map-layer-row .layer-button {
  justify-content: center;
  white-space: nowrap;
  padding-left: 10px;
  padding-right: 10px;
}

.mini-card {
  padding: 16px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

.mini-card h3,
.summary-card h3,
.report-card h3,
.table-card h3,
.chart-card h3,
.info-card h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.map-side .panel h3 {
  margin: 0;
  font-size: 1.08rem;
}

.muted {
  color: var(--muted);
}

.strong {
  color: var(--text);
  font-weight: 700;
}

.kpi-grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(235, 241, 247, 0.78) rgba(255, 255, 255, 0.08);
}

body[data-page="detail"] #detailKpis {
  overflow-y: hidden;
  padding-bottom: 0;
}

body[data-page="detail"] #detailKpis .kpi-card {
  min-height: 116px;
  height: 116px;
}

.kpi-grid .kpi-card {
  flex: 1 0 118px;
  min-width: 118px;
}

.kpi-card {
  padding: clamp(12px, 0.82vw, 15px) clamp(13px, 0.94vw, 17px);
  min-height: clamp(92px, calc(66px + 1.9vw), 116px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.kpi-card::after {
  content: "";
  position: absolute;
  inset: auto -24px -24px auto;
  width: clamp(64px, 4.7vw, 86px);
  height: clamp(64px, 4.7vw, 86px);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.kpi-label {
  color: var(--muted);
  font-size: clamp(0.72rem, 0.26vw + 0.64rem, 0.8rem);
  line-height: 1.15;
}

.kpi-value {
  margin-top: clamp(9px, 0.7vw, 16px);
  font-size: clamp(1.46rem, 0.9vw + 0.72rem, 1.88rem);
  line-height: 1;
  font-weight: 800;
}

.kpi-unit {
  font-size: clamp(0.74rem, 0.24vw + 0.66rem, 0.84rem);
  color: rgba(255, 255, 255, 0.76);
}

.kpi-note {
  margin-top: clamp(8px, 0.62vw, 11px);
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.72rem, 0.22vw + 0.64rem, 0.8rem);
  line-height: 1.22;
}

.accent-teal { background: linear-gradient(135deg, rgba(59, 147, 161, 0.88), rgba(36, 68, 88, 0.94)); }
.accent-green { background: linear-gradient(135deg, rgba(57, 143, 97, 0.92), rgba(29, 79, 55, 0.96)); }
.accent-orange { background: linear-gradient(135deg, rgba(208, 127, 33, 0.92), rgba(118, 53, 16, 0.96)); }
.accent-red { background: linear-gradient(135deg, rgba(181, 58, 58, 0.92), rgba(94, 25, 25, 0.96)); }
.accent-blue { background: linear-gradient(135deg, rgba(53, 117, 181, 0.92), rgba(26, 53, 96, 0.96)); }
.accent-violet { background: linear-gradient(135deg, rgba(130, 72, 189, 0.92), rgba(67, 38, 102, 0.96)); }

.detail-layout,
.reports-layout {
  display: grid;
  gap: 16px;
  align-content: start;
  grid-auto-rows: max-content;
}

.detail-layout {
  grid-template-columns: minmax(0, 1fr);
}

body[data-page="detail"] #detailHeader {
  display: none !important;
}

body[data-page="detail"] .detail-layout {
  gap: 12px;
}

#detailHeader:empty {
  display: none;
}

.detail-toolbar-surface,
.detail-timeline-surface {
  padding: 16px 18px;
}

body[data-page="detail"] .detail-toolbar-surface {
  padding: 12px 18px;
}

body[data-page="detail"] .detail-timeline-surface {
  padding: 10px 18px 12px;
}

.detail-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

body[data-page="detail"] .detail-toolbar {
  align-items: start;
}

.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

body[data-page="detail"] .tabs {
  align-items: center;
  min-height: 42px;
  gap: 6px;
}

body[data-page="detail"] .tabs .tab-button {
  padding: 10px 12px;
  font-size: 0.94rem;
}

.detail-period-bar {
  display: grid;
  gap: 10px;
  justify-items: end;
}

body[data-page="detail"] .detail-period-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-end;
  align-self: start;
  gap: 12px;
  min-width: 0;
}

.detail-period-preset-row {
  justify-content: flex-end;
}

body[data-page="detail"] .detail-period-preset-row {
  min-height: 42px;
  align-items: center;
  flex-wrap: nowrap;
}

.detail-period-custom {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr)) auto;
  gap: 10px;
  width: min(100%, 690px);
}

body[data-page="detail"] .detail-period-custom {
  width: auto;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(156px, 184px)) auto;
  align-items: center;
  gap: 8px;
}

body[data-page="detail"] .detail-period-custom .select-field {
  min-width: 0;
  padding: 10px 12px;
  font-size: 0.93rem;
}

body[data-page="detail"] .detail-period-custom .ghost-button {
  padding: 10px 12px;
  white-space: nowrap;
}

.tab-panel {
  display: none;
  min-width: 0;
}

.tab-panel.is-active {
  display: block;
}

.chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
  gap: 14px;
}

#graphsContainer.chart-grid {
  grid-template-columns: minmax(0, 1fr);
}

.chart-grid .chart-card {
  padding: 16px;
}

.report-chart-controls {
  margin-top: 14px;
}

#overviewCharts.chart-grid {
  align-items: stretch;
}

#overviewCharts.chart-grid .chart-card {
  align-self: stretch;
}

#overviewCharts .overview-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#overviewCharts .overview-card-main .chart-shell {
  flex: 1 1 auto;
  height: auto;
  min-height: clamp(360px, 42vh, 540px);
}

#overviewCharts .overview-card-map {
  position: relative;
  overflow: hidden;
  min-height: clamp(380px, 46vh, 620px);
}

#overviewCharts .overview-card-map .detail-map-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: clamp(360px, 42vh, 560px);
  height: 100%;
}

.detail-map-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  border-radius: 14px;
  background: rgba(15, 19, 26, 0.84);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
}

.detail-map-toggle-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.detail-map-toggle-icon path {
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.detail-map-toggle:hover {
  background: rgba(21, 28, 38, 0.94);
  border-color: rgba(96, 216, 190, 0.4);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
}

.field-area-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.field-controls-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.field-settings-toggle {
  width: 42px;
  min-width: 42px;
  padding: 10px;
}

.field-settings-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.field-settings-icon path {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.field-settings-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 80;
  width: 292px;
  padding: 12px;
  display: grid;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(18, 24, 33, 0.96);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(12px);
}

.field-settings-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.field-settings-row {
  display: grid;
  grid-template-columns: 1fr 96px;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.field-settings-input {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  background: var(--bg);
  font: inherit;
  outline: none;
}

.field-settings-input:focus {
  border-color: rgba(96, 216, 190, 0.65);
  box-shadow: 0 0 0 3px rgba(96, 216, 190, 0.12);
}

.field-settings-reset {
  width: 100%;
  justify-content: center;
}

html[data-theme="light"] .field-settings-panel {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
}

.rtos-field-auto-fill {
  filter: none;
}

.field-label {
  background: transparent;
  border: 0;
}

.field-label-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 20, 28, 0.84);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .field-label-badge {
  background: rgba(17, 24, 39, 0.84);
  color: #ffffff;
}

#overviewCharts .overview-card-map #detailMapHost,
#overviewCharts .overview-card-map .map-widget {
  height: 100%;
  min-height: 0;
}

#overviewCharts .overview-card-map .provider-row.is-single-line .detail-map-toggle {
  margin-left: 0;
  margin-right: 4px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
}

#overviewCharts .overview-card-map .provider-row.is-single-line .field-settings-toggle {
  display: none;
}

#overviewCharts .overview-card-map .detail-map-shell.is-fullscreen .provider-row.is-single-line .field-settings-toggle {
  display: inline-flex;
}

#overviewCharts .overview-card-map .provider-row.is-single-line {
  width: 100%;
  gap: 6px;
  padding-right: 4px;
  box-sizing: border-box;
}

#overviewCharts .overview-card-map .provider-row.is-single-line .select-field {
  width: 156px;
  min-width: 156px;
  padding: 10px 12px;
}

#overviewCharts .overview-card-map .provider-row.is-single-line .layer-button {
  padding: 10px 12px;
  font-size: 0.92rem;
}

#overviewCharts .overview-card-map .provider-row.is-single-line .field-area-button {
  padding: 10px 12px;
  font-size: 0.9rem;
}

#overviewCharts .overview-card-map .map-widget {
  display: flex;
  flex-direction: column;
}

#overviewCharts .overview-card-map .map-header {
  flex: 0 0 auto;
}

#overviewCharts .overview-card-map .map-shell {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

#overviewCharts .overview-card-map #detailMapHost {
  position: relative;
  min-height: clamp(360px, 42vh, 560px);
}

#overviewCharts .overview-card-map .detail-map-shell.is-fullscreen {
  position: fixed;
  inset: 16px;
  z-index: 2400;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(14, 17, 22, 0.98), rgba(10, 13, 18, 0.99));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.48);
  min-height: 0;
  height: auto;
}

#overviewCharts .overview-card-map .detail-map-shell.is-fullscreen #detailMapHost,
#overviewCharts .overview-card-map .detail-map-shell.is-fullscreen .map-widget {
  height: 100%;
  min-height: 0;
}

#overviewCharts .overview-card-map .detail-map-shell.is-fullscreen .map-shell {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

html.detail-map-fullscreen-open,
body.detail-map-fullscreen-open {
  overflow: hidden;
}

.graph-builder-card {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.chart-shell {
  position: relative;
  height: clamp(230px, 26vh, 320px);
  margin-top: 12px;
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--line);
}

.chart-shell.is-detail-sync {
  cursor: crosshair;
}

.chart-shell.is-short {
  height: clamp(180px, 20vh, 240px);
}

.chart-shell.is-graph-builder {
  height: clamp(320px, 40vh, 500px);
}

.chart-interactive {
  position: relative;
  width: 100%;
  height: 100%;
}

.chart-axis {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.chart-axis-label {
  position: absolute;
  color: rgba(232, 238, 247, 0.76);
  font-family: var(--ui);
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
}

.chart-axis-y .chart-axis-label {
  left: 10px;
  transform: translateY(-50%);
}

.chart-axis-x .chart-axis-label {
  bottom: 8px;
  transform: translateX(-50%);
}

.chart-active-line {
  position: absolute;
  top: 16px;
  bottom: 30px;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 209, 102, 0.98), rgba(255, 179, 71, 0.24));
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.16);
  pointer-events: none;
}

.chart-hover-line {
  position: absolute;
  top: 16px;
  bottom: 30px;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 244, 191, 0.98), rgba(255, 209, 102, 0.3));
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 244, 191, 0.18);
  pointer-events: none;
  z-index: 3;
}

.chart-hover-dot {
  pointer-events: none;
}

.chart-interactive.is-hovering .chart-active-line,
.chart-interactive.is-hovering .chart-active-dot {
  opacity: 0;
}

.chart-tooltip {
  position: absolute;
  min-width: 172px;
  max-width: 240px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(13, 18, 24, 0.96);
  color: #eef3f8;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px);
  pointer-events: none;
  z-index: 4;
}

.chart-tooltip-time {
  font-size: 0.8rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: #f5f8fc;
}

.chart-tooltip-meta-grid {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.chart-tooltip-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.74rem;
  color: #9aacbd;
  line-height: 1.35;
}

.chart-tooltip-meta strong {
  color: #eaf0f7;
  font-weight: 700;
}

.chart-tooltip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.82rem;
}

.chart-tooltip-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #dbe4ee;
}

.chart-tooltip-swatch {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--series-color, #6cb9ff);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
  flex: 0 0 auto;
}

.chart-tooltip-value {
  color: var(--series-color, #f6fbff);
  font-weight: 800;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
}

.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.graph-builder-header {
  display: grid;
  gap: 12px;
}

.sidebar-setting-label {
  margin-top: 14px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sidebar-chip-row {
  gap: 8px;
}

.detail-graph-picker {
  align-items: center;
}

.graph-summary-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.graph-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.graph-stat-card {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.graph-stat-title {
  font-size: 0.82rem;
  font-weight: 700;
}

.graph-stat-current {
  margin-top: 12px;
  font-size: 1.18rem;
  font-weight: 800;
}

.graph-stat-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--muted);
}

.graph-stat-row strong {
  color: var(--text);
}

.table-card {
  padding: 16px;
}

.table-scroll {
  overflow: auto;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
}

.table-limit-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.78rem;
}

.table-window-row td {
  color: var(--muted);
  text-align: center;
  background: rgba(255, 255, 255, 0.025);
  font-weight: 700;
}

.combined-report-table .table-scroll {
  overflow: auto;
  max-height: min(46vh, 520px);
  overscroll-behavior: contain;
}

.combined-report-table table {
  min-width: 0;
  table-layout: auto;
}

.combined-report-table th,
.combined-report-table td {
  white-space: normal;
  word-break: break-word;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}

th,
td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 0.84rem;
  white-space: nowrap;
}

thead th {
  position: sticky;
  top: 0;
  background: rgba(15, 18, 23, 0.95);
  z-index: 1;
  color: #dfe7f0;
}

tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

tbody tr.is-active {
  background: rgba(84, 199, 176, 0.10);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.78rem;
}

.alert-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.alert-card {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.alert-card.is-danger {
  border-color: rgba(255, 107, 107, 0.36);
  background: rgba(255, 107, 107, 0.08);
}

.alert-card.is-warning {
  border-color: rgba(255, 209, 102, 0.36);
  background: rgba(255, 209, 102, 0.08);
}

.dtc-code-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.dtc-code-row {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.dtc-code-row strong {
  font-size: 0.92rem;
  color: var(--text);
}

.dtc-code-row span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.wheel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.wheel-card {
  padding: 14px;
}

.wheel-title {
  color: var(--muted);
  font-size: 0.78rem;
}

.wheel-value {
  margin-top: 12px;
  font-size: 1.6rem;
  font-weight: 800;
}

.reports-shell {
  display: block;
  min-height: 0;
}

.report-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: sticky;
  top: 0;
  max-height: calc(100vh - 44px);
}

.report-sidebar-inline {
  position: relative;
  top: auto;
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 16px 0;
}

.report-sidebar-inline h3 {
  margin: 0 0 6px;
  font-size: 0.95rem;
}

.report-sidebar-inline .report-menu {
  padding: 8px 0 0;
}

body[data-page="reports"] .topbar {
  justify-content: flex-end;
}

.report-workspace {
  display: grid;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  width: 100%;
  align-content: start;
  grid-auto-rows: max-content;
  padding-bottom: 16px;
}

.report-content {
  display: grid;
  gap: 16px;
  min-width: 0;
  align-content: start;
  min-height: 0;
  grid-auto-rows: max-content;
}

.filter-bar {
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.filter-card {
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.filter-card label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.76rem;
  color: var(--muted);
}

.report-period-custom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 8px;
  margin-top: 10px;
}

.report-sidebar .section-title {
  margin-bottom: 6px;
}

.report-sidebar .report-menu {
  padding-top: 8px;
}

.report-content > * {
  min-width: 0;
}

.report-map-card {
  min-height: 560px;
  overflow: hidden;
  padding: 0;
  display: flex;
  min-width: 0;
}

.report-map-card .map-widget {
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
}

.report-map-card .map-header {
  flex: 0 0 auto;
  align-items: flex-start;
  margin-bottom: 12px;
}

.report-map-card .map-shell {
  flex: 1;
  min-height: 0;
  height: auto;
}

.report-map-card .provider-stack {
  max-width: 100%;
  align-items: flex-end;
}

.report-map-card .provider-stack .provider-row.is-single-line {
  flex-wrap: nowrap;
  justify-content: flex-end;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.report-map-card .provider-stack .provider-row.is-single-line .select-field {
  min-width: 220px;
  flex: 0 0 220px;
}

.report-map-card .provider-stack .provider-row.is-single-line .layer-button {
  white-space: nowrap;
}

.report-map-card .map-widget,
.report-map-card .map-surface {
  height: 100%;
}

.report-map-card .map-surface {
  min-height: 0;
}

.replay-report-map-card {
  min-height: min(84vh, 960px);
}

.report-map-card .map-control-stack {
  max-width: calc(100% - 32px);
}

.report-map-card .map-control-stack .map-provider-panel {
  width: auto;
  max-width: min(760px, calc(100vw - 72px));
}

.report-map-card .map-provider-panel .provider-row.is-single-line {
  flex-wrap: nowrap;
  justify-content: flex-end;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.report-map-card .map-provider-panel .provider-row.is-single-line .select-field {
  min-width: 220px;
  flex: 0 0 220px;
}

.report-map-card .map-provider-panel .provider-row.is-single-line .layer-button {
  white-space: nowrap;
}

.replay-player-card {
  top: 16px;
  left: 16px;
  right: auto;
  bottom: auto;
  width: min(360px, calc(100% - 188px));
  max-height: none;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.replay-player-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.replay-player-title {
  margin: 0;
}

.replay-player-counter {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.replay-player-device {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.replay-player-slider {
  width: 100%;
  margin: 0;
  accent-color: var(--accent);
}

.replay-player-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.replay-player-time {
  margin-left: auto;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.replay-player-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.replay-player-chip {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  gap: 4px;
}

.replay-player-chip span {
  color: var(--muted);
  font-size: 0.72rem;
}

.replay-player-chip strong {
  font-size: 0.82rem;
}

.replay-player-card .zoom-button.is-playing {
  background: rgba(84, 199, 176, 0.14);
  border-color: rgba(84, 199, 176, 0.5);
  color: #dffcf7;
}

.report-content .table-scroll {
  max-height: min(58vh, 720px);
}

.detail-layout #telemetryTable {
  display: flex;
  flex-direction: column;
  min-height: min(72vh, 860px);
}

.detail-layout #telemetryTable .table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(66vh, 780px);
}

.report-table-fill {
  display: flex;
  flex-direction: column;
  min-height: min(72vh, 860px);
}

.report-table-fill .table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

tbody tr.is-summary td {
  font-weight: 700;
  color: #f3f7fc;
  background: rgba(84, 199, 176, 0.10);
  border-top: 1px solid rgba(84, 199, 176, 0.24);
}

html[data-theme="light"] tbody tr.is-summary td {
  color: #1d2733;
  background: rgba(84, 199, 176, 0.12);
  border-top-color: rgba(84, 199, 176, 0.24);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.summary-card {
  padding: 14px 16px;
}

.summary-value {
  margin-top: 14px;
  font-size: 1.42rem;
  font-weight: 800;
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(340px, 0.92fr);
  gap: 16px;
}

#diagnosticsContent .split-layout {
  align-items: start;
}

#diagnosticsContent .panel,
#diagnosticsContent .table-card {
  min-width: 0;
}

#diagnosticsContent .wheel-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

#diagnosticsContent .wheel-card {
  padding: 12px;
}

#diagnosticsContent .wheel-title {
  font-size: 0.74rem;
}

#diagnosticsContent .wheel-value {
  margin-top: 8px;
  font-size: 1.32rem;
}

#diagnosticsContent .meta-line {
  font-size: 0.74rem;
}

#graphsContainer #detailGraphSummary {
  margin-top: 4px;
}

#graphsContainer .graph-stat-card {
  padding: 12px;
}

#graphsContainer .graph-stat-current {
  margin-top: 8px;
  font-size: 1.04rem;
}

#graphsContainer .graph-stat-row {
  margin-top: 8px;
  font-size: 0.76rem;
}

.empty-state {
  padding: 24px;
  border-radius: 20px;
  border: 1px dashed var(--line-strong);
  color: var(--muted);
  text-align: center;
}

.timeline-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 4px 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(235, 241, 247, 0.9) rgba(255, 255, 255, 0.12);
}

.timeline-row::-webkit-scrollbar {
  height: 9px;
}

.timeline-row::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}

.timeline-row::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(233, 239, 246, 0.96), rgba(180, 197, 214, 0.92));
  border-radius: 999px;
}

.timeline-point {
  flex: 0 0 96px;
  min-width: 96px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(37, 45, 57, 0.92), rgba(20, 25, 33, 0.96));
  padding: 10px 8px 9px;
  cursor: pointer;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  text-align: center;
  scroll-snap-align: start;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.timeline-point:hover {
  transform: translateY(-1px);
  border-color: rgba(180, 196, 212, 0.28);
}

.timeline-point.is-active {
  background: linear-gradient(180deg, rgba(30, 62, 73, 0.96), rgba(18, 29, 35, 0.98));
  border-color: rgba(84, 199, 176, 0.5);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(84, 199, 176, 0.14);
  transform: translateY(-2px);
}

.timeline-point strong,
.timeline-time {
  display: block;
  font-size: 0.82rem;
  line-height: 1;
}

.timeline-speed,
.timeline-rpm {
  display: block;
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.15;
  white-space: nowrap;
}

.timeline-point.is-active .timeline-time {
  color: #f4fffd;
}

.timeline-point.is-active .timeline-speed,
.timeline-point.is-active .timeline-rpm {
  color: #cfe7e1;
}

.detail-timeline {
  display: grid;
  gap: 6px;
  padding: 2px 2px 0;
  width: 100%;
}

.detail-timeline-scale {
  display: grid;
  grid-template-columns: repeat(var(--timeline-labels, 2), minmax(0, 1fr));
  align-items: end;
  gap: 0;
}

.detail-timeline-label {
  appearance: none;
  border: none;
  background: transparent;
  color: #eef3fb;
  font-size: 0.74rem;
  line-height: 1;
  padding: 0 3px;
  cursor: pointer;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.36);
}

.detail-timeline-label.is-first {
  justify-self: start;
  text-align: left;
}

.detail-timeline-label.is-last {
  justify-self: end;
  text-align: right;
}

.detail-timeline-label:not(.is-first):not(.is-last) {
  justify-self: center;
  text-align: center;
}

.detail-timeline-label.is-active {
  color: #8be3d5;
}

.detail-timeline-slider-shell {
  padding: 0;
}

.detail-timeline-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin: 0;
  background: transparent;
}

.detail-timeline-slider:focus {
  outline: none;
}

.detail-timeline-slider::-webkit-slider-runnable-track {
  height: 16px;
  border-radius: 2px;
  border: 1px solid rgba(144, 156, 220, 0.45);
  background:
    linear-gradient(90deg, rgba(114, 129, 232, 0.78) 0%, rgba(114, 129, 232, 0.78) var(--timeline-progress), rgba(234, 238, 248, 0.96) var(--timeline-progress), rgba(234, 238, 248, 0.96) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.detail-timeline-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px;
  height: 20px;
  margin-top: -3px;
  border-radius: 2px;
  border: 1px solid rgba(88, 103, 204, 0.7);
  background: linear-gradient(180deg, #cfd7ff 0%, #7b8af1 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

.detail-timeline-slider::-moz-range-track {
  height: 16px;
  border-radius: 2px;
  border: 1px solid rgba(144, 156, 220, 0.45);
  background: rgba(234, 238, 248, 0.96);
}

.detail-timeline-slider::-moz-range-progress {
  height: 16px;
  border-radius: 2px;
  background: rgba(114, 129, 232, 0.78);
}

.detail-timeline-slider::-moz-range-thumb {
  width: 8px;
  height: 20px;
  border-radius: 2px;
  border: 1px solid rgba(88, 103, 204, 0.7);
  background: linear-gradient(180deg, #cfd7ff 0%, #7b8af1 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

.device-popup-actions,
.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.metric-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.detail-header-metrics {
  margin-top: 14px;
}

.metric-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}

.metric-card strong {
  display: block;
  font-size: 1.1rem;
  margin-top: 8px;
}

.map-focus-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.map-focus-head > div {
  min-width: 0;
}

.map-focus-dismiss {
  flex: 0 0 auto;
}

.map-focus-dismiss svg {
  width: 14px;
  height: 14px;
  display: block;
}

.map-focus-dismiss path {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.metric-card span {
  color: var(--muted);
  font-size: 0.78rem;
}

.marker-button,
.track-point,
.area-point {
  position: absolute;
  transform: translate(-50%, -50%) scale(var(--map-object-scale, 1));
  transform-origin: center center;
  z-index: 2;
  border: none;
  cursor: pointer;
}

.marker-button {
  width: 28px;
  height: 28px;
  border-radius: 999px 999px 999px 0;
  rotate: -45deg;
  background: #d54747;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26);
}

.marker-button span {
  position: absolute;
  inset: 5px;
  border-radius: 999px;
  background: #fff;
}

.marker-button.is-selected {
  outline: 3px solid rgba(84, 199, 176, 0.5);
}

.marker-label {
  position: absolute;
  z-index: 2;
  transform: translate(10px, -50%) scale(var(--map-object-scale, 1));
  transform-origin: left center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(12, 16, 21, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f5f8fc;
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.02em;
  pointer-events: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.marker-label.is-selected {
  border-color: rgba(84, 199, 176, 0.48);
  background: rgba(16, 27, 31, 0.92);
}

.track-point {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #f5fbff;
  border: 3px solid #16bac5;
  box-shadow: 0 0 0 6px rgba(22, 186, 197, 0.15);
}

.track-point.is-active {
  border-color: #ffb347;
  box-shadow: 0 0 0 7px rgba(255, 179, 71, 0.20);
}

.track-point.is-measured {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 7px rgba(255, 107, 107, 0.18);
}

.track-point-label,
.segment-label {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.track-point-label {
  transform: translate(-50%, -165%) scale(var(--map-object-scale, 1));
  transform-origin: center center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(12, 16, 21, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.72rem;
  color: #f5f7fb;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.34);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.track-point-label.is-area {
  transform: translate(-50%, -185%) scale(var(--map-object-scale, 1));
  padding: 3px 7px;
  background: rgba(16, 27, 31, 0.9);
  border-color: rgba(84, 199, 176, 0.45);
  color: #dffcf7;
}

.segment-label {
  transform: translate(-50%, -100%) scale(var(--map-object-scale, 1));
  transform-origin: center center;
  font-size: 0.72rem;
  color: #f5f7fb;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.map-shell.is-selection-disabled .track-point,
.map-shell.is-selection-disabled .area-point {
  cursor: default;
}

.area-point {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ffe49a;
  border: 3px solid #ffb347;
  box-shadow: 0 0 0 7px rgba(255, 179, 71, 0.16);
}

.area-point.is-selected {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 8px rgba(255, 107, 107, 0.18);
}

.helper-note {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.page-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.page-nav a {
  display: inline-flex;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}

.page-nav a.is-current {
  background: rgba(84, 199, 176, 0.14);
  border-color: rgba(84, 199, 176, 0.42);
}

.header-card {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.header-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr);
  gap: 14px;
}

.code-line {
  font-family: var(--ui);
  font-weight: 600;
  color: #d9e1ea;
}

.kpi-value,
.kpi-unit,
.summary-value,
.metric-card strong,
.definition-row strong,
.graph-stat-current,
.graph-stat-row strong,
.wheel-value,
.zoom-readout,
.detail-timeline-label,
.chart-tooltip,
.chart-tooltip-time,
.chart-tooltip-meta,
.chart-tooltip-row,
th,
td,
.code-line {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.foot-note {
  color: var(--muted);
  font-size: 0.76rem;
}

body[data-page="map"] .workspace {
  min-height: 0;
  height: 100%;
  gap: 12px;
}

body[data-page="map"] .map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--map-side-w);
  flex: 1;
  min-height: 0;
}

body[data-page="map"] #fleetMap {
  height: 100%;
  min-height: 0;
}

body[data-page="map"] #fleetSide {
  align-content: start;
}

body[data-page="map"] #fleetSide[hidden],
body[data-page="map"] #fleetSide.is-map-focus-hidden {
  display: none !important;
}

body[data-page="map"] .topbar {
  justify-content: flex-end;
}

body[data-page="map"] .page-nav a {
  font-size: 1rem;
}

body[data-page="map"] .brand-copy strong {
  font-size: 1.08rem;
}

body[data-page="map"] .brand-copy span {
  font-size: 0.92rem;
}

body[data-page="map"] .search-field,
body[data-page="map"] .select-field,
body[data-page="map"] .ghost-button,
body[data-page="map"] .solid-button,
body[data-page="map"] .quick-link,
body[data-page="map"] .layer-button,
body[data-page="map"] .measure-button {
  font-size: 0.95rem;
}

body[data-page="map"] .status-pill {
  font-size: 0.88rem;
}

body[data-page="map"] .device-title {
  font-size: 1rem;
}

body[data-page="map"] .device-meta,
body[data-page="map"] .meta-line {
  font-size: 0.86rem;
}

body[data-page="map"] .mini-tag {
  font-size: 0.78rem;
}

body[data-page="map"] .map-side .panel h3 {
  font-size: 1.18rem;
}

body[data-page="map"] .map-focus-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.09);
  color: rgba(233, 242, 251, 0.88);
  box-shadow: none;
}

body[data-page="map"] .map-focus-dismiss:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.085);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

body[data-page="map"] .kpi-label {
  font-size: 0.94rem;
}

body[data-page="map"] .metric-card span,
body[data-page="map"] .definition-row,
body[data-page="map"] .foot-note,
body[data-page="map"] .provider-label {
  font-size: 0.88rem;
}

body[data-page="map"] .metric-card strong {
  font-size: 1.08rem;
}

@media (min-width: 1121px) {
  body[data-page="map"] {
    overflow: hidden;
  }

  body[data-page="map"] .app-shell {
    display: block;
    position: relative;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
  }

  body[data-page="map"] .sidebar {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    z-index: 35;
    width: clamp(320px, 20vw, 362px);
    height: auto;
    border-right: 0;
    border-radius: 22px;
    border: 1px solid var(--map-overlay-border);
    background: var(--map-overlay-bg);
    backdrop-filter: blur(18px);
    box-shadow: var(--map-overlay-shadow-lg);
    overflow: hidden;
  }

  body[data-page="map"] .map-sidebar-top {
    padding-top: 2px;
  }

  body[data-page="map"] .workspace {
    position: relative;
    height: 100vh;
    min-height: 0;
    padding: 0;
    overflow: auto;
  }

  body[data-page="map"] .map-layout {
    position: relative;
    display: block;
    flex: none;
    height: 100%;
    min-height: 0;
  }

  body[data-page="map"] #fleetMap {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 100vh;
    z-index: 1;
  }

  body[data-page="map"] #fleetMap .map-widget {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  body[data-page="map"] #fleetMap .map-widget,
  body[data-page="map"] #fleetMap .map-shell,
  body[data-page="map"] #fleetMap .map-surface,
  body[data-page="map"] #fleetMap .leaflet-map-host,
  body[data-page="map"] #fleetMap .leaflet-map-host .leaflet-container {
    border-radius: 0;
  }

  body[data-page="map"] #fleetMap .map-shell {
    position: absolute;
    inset: 0;
    border: 0;
    box-shadow: none;
    min-height: 0;
    height: 100%;
  }

  body[data-page="map"] #fleetSide {
    position: absolute;
    top: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 30;
    width: clamp(316px, 20vw, 376px);
    max-width: calc(100vw - 740px);
    min-width: 300px;
    display: grid;
    gap: 12px;
    align-content: start;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
  }

  body[data-page="map"] #fleetSide .panel,
  body[data-page="map"] #fleetSide .mini-card {
    background: var(--map-overlay-bg-soft);
    border: 1px solid var(--map-overlay-border-soft);
    box-shadow: var(--map-overlay-shadow);
    backdrop-filter: blur(16px);
  }

  body[data-page="map"] .status-pills {
    padding: 16px 16px 10px;
    background: var(--map-overlay-bg-strong);
  }

  body[data-page="map"] .sidebar-search-wrap {
    padding: 14px 16px 10px;
    background: var(--map-overlay-bg-strong);
  }

  body[data-page="map"] .map-status-popover {
    position: absolute;
    top: 62px;
    right: 16px;
    left: 16px;
    margin: 0;
    z-index: 7;
    background: var(--map-overlay-bg-strong);
    border-color: var(--map-overlay-border-soft);
    box-shadow: var(--map-overlay-shadow-lg);
  }

  body[data-page="map"] .device-list {
    padding: 6px 10px 14px;
  }

  body[data-page="map"] .device-item {
    border-radius: 16px;
    padding: 11px 12px;
    margin-bottom: 6px;
    background: var(--map-overlay-item-bg);
  }

  body[data-page="map"] .device-item.is-active {
    background: linear-gradient(135deg, rgba(84, 199, 176, 0.16), rgba(108, 185, 255, 0.12));
  }

  body[data-page="map"] .sidebar-footer {
    padding: 12px;
    border-top-color: var(--map-overlay-border-soft);
    background: var(--map-overlay-bg-strong);
    backdrop-filter: blur(16px);
  }

  body[data-page="map"] .sidebar.is-list-collapsed {
    top: 10px;
    bottom: auto;
    height: auto;
    width: clamp(320px, 20vw, 362px);
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    overflow: visible;
  }

  body[data-page="map"] .sidebar.is-list-collapsed .map-sidebar-top {
    border-radius: 22px;
    background: var(--map-overlay-bg);
    border: 1px solid var(--map-overlay-border);
    box-shadow: var(--map-overlay-shadow-lg);
    backdrop-filter: blur(18px);
    overflow: hidden;
  }

  body[data-page="map"] .sidebar.is-list-collapsed .device-list {
    display: none;
  }

  body[data-page="map"] .sidebar.is-list-collapsed .sidebar-footer {
    position: fixed;
    left: 10px;
    bottom: 10px;
    width: clamp(320px, 20vw, 362px);
    border: 1px solid var(--map-overlay-border);
    border-radius: 22px;
    box-shadow: var(--map-overlay-shadow-lg);
  }

  body[data-page="map"] .sidebar.is-list-collapsed .map-status-popover {
    top: calc(100% + 8px);
    left: 0;
    right: 0;
  }

  body[data-page="map"] .map-control-stack {
    top: 14px;
    right: 14px;
  }

  body[data-page="map"] #fleetMap .map-zoom:not(.is-bottom) {
    top: auto;
    right: 14px;
    bottom: 14px;
    left: auto;
  }

  body[data-page="map"].is-map-focus-open #fleetMap .map-zoom:not(.is-bottom) {
    right: calc(clamp(316px, 20vw, 376px) + 30px);
  }

  body[data-page="map"] .map-zoom,
  body[data-page="map"] .map-provider-panel,
  body[data-page="map"] .measure-panel,
  body[data-page="map"] .floating-card {
    background: var(--map-overlay-bg-glass);
    border-color: var(--map-overlay-border);
    box-shadow: var(--map-overlay-shadow);
  }
}

@media (max-width: 1440px) {
  .filter-bar {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }
}

@media (min-width: 1680px) {
  .sidebar-header,
  .sidebar-footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .status-pills {
    padding-left: 18px;
    padding-right: 18px;
  }

  .map-layout,
  .reports-shell,
  .split-layout,
  .chart-grid {
    gap: 16px;
  }

  .map-side {
    gap: 16px;
  }

  .report-sidebar .section-title,
  .map-side .panel h3 {
    font-size: 1.08rem;
  }

  .device-item,
  .report-item {
    padding: 12px;
  }

  body[data-page="reports"] .report-sidebar-inline {
    margin-left: 16px;
    margin-right: 16px;
  }

  body[data-page="reports"] .report-map-card {
    min-height: 580px;
  }

  body[data-page="reports"] .split-layout {
    grid-template-columns: minmax(0, 1.72fr) minmax(320px, 0.68fr);
  }

  body[data-page="detail"] .chart-shell {
    height: clamp(210px, 22vh, 290px);
  }

  body[data-page="detail"] .chart-shell.is-short {
    height: clamp(170px, 18vh, 220px);
  }

  body[data-page="detail"] .chart-shell.is-graph-builder {
    height: clamp(240px, 29vh, 360px);
  }

  body[data-page="detail"] #overviewCharts .overview-card-main .chart-shell {
    min-height: clamp(320px, 37vh, 480px);
  }

  body[data-page="detail"] #overviewCharts .overview-card-map {
    min-height: clamp(350px, 40vh, 540px);
  }

  body[data-page="detail"] #overviewCharts .overview-card-map .detail-map-shell,
  body[data-page="detail"] #overviewCharts .overview-card-map #detailMapHost {
    min-height: clamp(340px, 38vh, 520px);
  }

  body[data-page="detail"] #diagnosticsContent .wheel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="reports"] .workspace {
    height: 100%;
    overflow-y: auto;
  }

  body[data-page="reports"] .replay-report-map-card {
    min-height: min(78vh, 840px);
  }
}

@media (max-width: 1120px) {
  .app-shell,
  .reports-shell,
  .map-layout,
  .split-layout,
  .chart-grid,
  .header-grid {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    min-height: auto;
    height: auto;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .report-sidebar {
    position: static;
    max-height: none;
  }

  .report-sidebar-inline {
    margin-left: 0;
    margin-right: 0;
    margin-top: 12px;
  }

  .report-map-card {
    min-height: 460px;
  }

  .replay-report-map-card {
    min-height: min(76vh, 820px);
  }

  .report-map-card .map-surface {
    min-height: 0;
  }

  #overviewCharts .overview-card-map {
    min-height: 520px;
  }

  #overviewCharts .overview-card-map .detail-map-shell,
  #overviewCharts .overview-card-map #detailMapHost {
    min-height: 488px;
  }

  .app-shell {
    grid-template-columns: 1fr;
    min-height: 100vh;
    height: auto;
    overflow: visible;
  }

  .workspace {
    padding: 16px;
    min-height: auto;
    overflow: visible;
  }

  .device-list,
  .report-menu {
    max-height: min(42vh, 420px);
  }

  body[data-page="detail"] .device-list {
    max-height: min(50vh, 520px);
  }

  body[data-page="reports"] .report-menu {
    max-height: min(44vh, 460px);
  }

  .sidebar-footer {
    position: sticky;
    bottom: 0;
    z-index: 4;
    background: linear-gradient(180deg, rgba(10, 13, 17, 0.84), rgba(10, 13, 17, 0.98));
    backdrop-filter: blur(16px);
  }

  .map-side {
    max-height: none;
    padding-right: 0;
  }

  body[data-page="map"] .map-layout {
    flex: 0 0 auto;
    min-height: auto;
  }

  body[data-page="map"] #fleetMap {
    height: auto;
    min-height: min(64vh, 620px);
  }

  body[data-page="map"] #fleetSide {
    max-height: none;
  }

  .detail-toolbar {
    grid-template-columns: 1fr;
  }

  .detail-period-bar {
    display: grid;
    justify-items: stretch;
  }

  .detail-period-preset-row {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .detail-period-custom {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .provider-stack .provider-row.is-single-line {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .report-map-card .map-control-stack .map-provider-panel {
    max-width: calc(100vw - 48px);
  }

  .detail-layout #telemetryTable,
  .report-table-fill {
    min-height: auto;
  }
}

@media (max-width: 720px) {
  :root {
    --workspace-pad: 12px;
  }

  .sidebar,
  .workspace,
  .workspace > *,
  .detail-layout > *,
  .report-workspace > *,
  .report-content > *,
  .chart-grid > *,
  .split-layout > * {
    min-width: 0;
  }

  .kpi-grid,
  .summary-grid,
  .wheel-grid,
  .metric-list,
  .filter-bar {
    grid-template-columns: 1fr;
  }

  .detail-toolbar-surface,
  .detail-timeline-surface {
    padding: 12px;
  }

  .workspace {
    padding: 12px;
    gap: 12px;
  }

  .status-pills {
    padding: 12px 12px 8px;
    gap: 6px;
  }

  .sidebar-search-wrap {
    padding: 10px 12px 10px;
  }

  .status-pill {
    padding: 8px 12px;
    font-size: 0.74rem;
  }

  .device-list,
  .report-menu {
    padding: 4px 8px 12px;
  }

  .device-item,
  .report-item {
    padding: 10px;
    border-radius: 16px;
  }

  .device-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .device-avatar {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  .device-title,
  .report-title {
    font-size: 0.86rem;
  }

  .device-meta,
  .report-meta,
  .meta-line {
    font-size: 0.74rem;
  }

  .sidebar-footer {
    padding: 10px 10px 12px;
  }

  .sidebar-footer-row {
    gap: 8px;
  }

  .theme-button,
  .quick-link {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }

  .quick-link-icon {
    width: 16px;
    height: 16px;
  }

  .map-search-toolbar {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 6px;
  }

  .map-search-icon-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
  }

  .map-status-popover {
    margin: 8px 12px 0;
    padding: 10px;
  }

  .search-field,
  .select-field,
  input[type="datetime-local"] {
    font-size: 16px;
  }

  .map-shell,
  .map-shell.is-report {
    min-height: 380px;
  }

  body[data-page="map"] #fleetMap {
    min-height: 52vh;
  }

  .map-layout {
    gap: 12px;
  }

  .map-side {
    gap: 12px;
  }

  .map-side .chip-row.is-map-layer-row {
    grid-template-columns: 1fr;
  }

  .mini-card {
    padding: 14px;
  }

  #overviewCharts .overview-card-map {
    min-height: 430px;
  }

  #overviewCharts .overview-card-map .detail-map-shell,
  #overviewCharts .overview-card-map #detailMapHost {
    min-height: 398px;
  }

  .floating-card,
  .measure-panel,
  .map-zoom,
  .map-provider-panel {
    position: static;
    width: auto;
    margin: 14px;
  }

  .map-control-stack {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 14px;
  }

  .map-control-stack .map-zoom,
  .map-control-stack .map-provider-panel {
    margin: 0;
  }

  .map-badge {
    position: static;
    margin: 14px;
  }

  .provider-stack {
    align-items: stretch;
  }

  body[data-page="detail"] .tabs,
  body[data-page="detail"] .detail-period-preset-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 2px;
    min-width: 0;
  }

  body[data-page="detail"] .tabs .tab-button,
  body[data-page="detail"] .detail-period-preset-row .ghost-button {
    flex: 0 0 auto;
  }

  body[data-page="detail"] .detail-toolbar,
  body[data-page="detail"] .detail-toolbar > *,
  body[data-page="detail"] .detail-period-bar,
  body[data-page="detail"] .detail-period-bar > * {
    min-width: 0;
  }

  body[data-page="detail"] .detail-period-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  body[data-page="detail"] .detail-period-custom {
    grid-template-columns: 1fr;
    width: 100%;
    min-width: 0;
  }

  body[data-page="detail"] .detail-period-custom > * {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .filter-bar {
    padding: 12px;
    gap: 8px;
  }

  .filter-card {
    padding: 10px;
  }

  .report-period-custom {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .report-period-custom > * {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .button-row {
    gap: 8px;
  }

  .button-row .ghost-button,
  .button-row .solid-button {
    flex: 1 1 96px;
    justify-content: center;
  }

  .report-map-card {
    min-height: 420px;
  }

  .report-map-card .map-widget {
    padding: 12px;
  }

  .report-map-card .map-header {
    gap: 10px;
  }

  .report-map-card .provider-stack,
  .report-map-card .map-provider-panel {
    align-items: stretch;
  }

  .report-map-card .provider-stack .provider-row.is-single-line,
  .report-map-card .map-provider-panel .provider-row.is-single-line {
    justify-content: flex-start;
  }

  .report-map-card .provider-stack .provider-row.is-single-line .select-field,
  .report-map-card .map-provider-panel .provider-row.is-single-line .select-field {
    min-width: 0;
    flex: 1 1 100%;
  }

  .report-content .table-scroll,
  .combined-report-table .table-scroll {
    max-height: none;
  }

  table {
    min-width: 760px;
  }

  #overviewCharts .overview-card-map .detail-map-shell.is-fullscreen {
    inset: 8px;
    padding: 10px;
    border-radius: 18px;
  }

  .map-provider-panel .provider-row {
    justify-content: flex-start;
  }

  .map-provider-panel .select-field {
    min-width: 0;
  }

  .replay-player-card {
    width: calc(100% - 28px);
  }

  .replay-player-time {
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  .theme-button,
  .quick-link {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .theme-switcher,
  .sidebar-nav {
    gap: 4px;
  }

  .status-pill {
    padding: 7px 10px;
  }

  .map-search-toolbar {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 5px;
  }

  .map-search-icon-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .map-search-icon {
    width: 16px;
    height: 16px;
  }

  .map-shell,
  .map-shell.is-report {
    min-height: 340px;
  }

  body[data-page="map"] #fleetMap {
    min-height: 48vh;
  }

  .kpi-grid .kpi-card {
    min-width: 110px;
    flex-basis: 110px;
  }
}

@media (max-width: 1120px) {
  body[data-page="map"] {
    overflow: hidden;
  }

  body[data-page="map"] .app-shell {
    display: block;
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  body[data-page="map"] .workspace {
    position: relative;
    min-height: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
  }

  body[data-page="map"] .map-layout {
    position: relative;
    display: block;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
  }

  body[data-page="map"] #fleetMap {
    position: absolute;
    inset: 0;
    z-index: 1;
    height: 100%;
    min-height: 100%;
  }

  body[data-page="map"] #fleetMap .map-widget,
  body[data-page="map"] #fleetMap .map-shell,
  body[data-page="map"] #fleetMap .map-surface,
  body[data-page="map"] #fleetMap .leaflet-map-host,
  body[data-page="map"] #fleetMap .leaflet-map-host .leaflet-container {
    width: 100%;
    height: 100%;
    min-height: 100%;
    border-radius: 0;
  }

  body[data-page="map"] #fleetMap .map-shell {
    border: 0;
    box-shadow: none;
  }

  body[data-page="map"] .sidebar {
    position: absolute;
    top: max(10px, calc(env(safe-area-inset-top, 0px) + 6px));
    left: 12px;
    right: auto;
    z-index: 35;
    width: min(360px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    height: auto;
    min-height: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    pointer-events: none;
  }

  body[data-page="map"] .map-sidebar-top,
  body[data-page="map"] .device-list,
  body[data-page="map"] .sidebar-footer,
  body[data-page="map"] #fleetSide {
    pointer-events: auto;
  }

  body[data-page="map"] .map-sidebar-top {
    padding-top: 0;
    border-radius: 18px;
    border: 1px solid var(--map-overlay-border);
    background: var(--map-overlay-bg);
    backdrop-filter: blur(18px);
    box-shadow: var(--map-overlay-shadow);
    overflow: visible;
  }

  body[data-page="map"] .sidebar-search-wrap {
    padding: 10px 12px;
    background: transparent;
  }

  body[data-page="map"] .map-status-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    margin: 0;
    z-index: 3;
    border-color: var(--map-overlay-border);
    box-shadow: var(--map-overlay-shadow);
  }

  body[data-page="map"] .device-list {
    position: fixed;
    top: calc(max(10px, env(safe-area-inset-top, 0px) + 6px) + 72px);
    left: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
    width: min(360px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    display: grid;
    align-content: start;
    padding: 8px 10px 12px;
    border-radius: 20px;
    border: 1px solid var(--map-overlay-border);
    background: var(--map-overlay-bg);
    backdrop-filter: blur(18px);
    box-shadow: var(--map-overlay-shadow);
  }

  body[data-page="map"] .sidebar.is-list-collapsed .device-list {
    display: none;
  }

  body[data-page="map"] .sidebar-footer {
    position: fixed;
    left: 12px;
    bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 6px));
    width: min(360px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    padding: 10px 12px 12px;
    border: 1px solid var(--map-overlay-border);
    border-radius: 18px;
    background: var(--map-overlay-bg);
    backdrop-filter: blur(18px);
    box-shadow: var(--map-overlay-shadow);
  }

  body[data-page="map"] .sidebar-footer-row {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  body[data-page="map"] .theme-switcher,
  body[data-page="map"] .sidebar-nav {
    flex-wrap: nowrap;
  }

  body[data-page="map"] #fleetSide {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
    z-index: 34;
    width: auto;
    max-width: 520px;
    min-width: 0;
    max-height: min(34vh, 280px);
    padding: 10px;
    padding-right: 10px;
    border-radius: 20px;
    border: 1px solid var(--map-overlay-border);
    background: var(--map-overlay-bg-strong);
    backdrop-filter: blur(18px);
    box-shadow: var(--map-overlay-shadow);
    overflow-y: auto;
    overflow-x: hidden;
  }

  body[data-page="map"] #fleetSide.is-mobile-focus-hidden {
    display: none;
  }

  body[data-page="map"] #fleetSide .panel:not(.map-focus-panel) {
    display: none;
  }

  body[data-page="map"] #fleetSide .map-focus-panel {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  body[data-page="map"] #fleetMap .map-control-stack {
    top: max(92px, calc(env(safe-area-inset-top, 0px) + 88px));
    right: 12px;
  }

  body[data-page="map"] #fleetMap .map-zoom:not(.is-bottom) {
    top: auto;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
    left: auto;
  }

  body[data-page="map"] .map-zoom,
  body[data-page="map"] .map-provider-panel,
  body[data-page="map"] .measure-panel,
  body[data-page="map"] .floating-card {
    background: var(--map-overlay-bg-glass);
    border-color: var(--map-overlay-border);
    box-shadow: var(--map-overlay-shadow);
  }
}

@media (max-width: 560px) {
  body[data-page="map"] .sidebar,
  body[data-page="map"] .device-list,
  body[data-page="map"] .sidebar-footer {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    left: 10px;
  }

  body[data-page="map"] .sidebar {
    top: max(8px, calc(env(safe-area-inset-top, 0px) + 4px));
  }

  body[data-page="map"] .device-list {
    top: calc(max(8px, env(safe-area-inset-top, 0px) + 4px) + 64px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
    border-radius: 18px;
  }

  body[data-page="map"] .sidebar-footer {
    bottom: max(8px, calc(env(safe-area-inset-bottom, 0px) + 4px));
    padding: 8px 10px 10px;
    border-radius: 16px;
  }

  body[data-page="map"] #fleetSide {
    left: 10px;
    right: 10px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 74px);
    max-height: min(32vh, 252px);
    padding: 8px;
    border-radius: 18px;
  }

  body[data-page="map"] .map-search-toolbar {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 6px;
  }

  body[data-page="map"] .map-search-icon-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
  }

  body[data-page="map"] .map-focus-panel {
    padding: 0;
  }

  body[data-page="map"] .map-focus-panel .metric-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="map"] .map-focus-panel .metric-card {
    padding: 10px;
    border-radius: 14px;
  }

  body[data-page="map"] .map-focus-panel .metric-card strong {
    font-size: 1rem;
  }

  body[data-page="map"] #fleetMap .map-control-stack {
    top: max(82px, calc(env(safe-area-inset-top, 0px) + 78px));
    right: 10px;
  }

  body[data-page="map"] #fleetMap .map-zoom:not(.is-bottom) {
    top: auto;
    right: 10px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
    left: auto;
  }
}