/* =========================================================================
   Compact, enterprise density
   One layer over app.css / day-list.css: an 8 px rhythm, tighter cards and rows, smaller radii, hairline
   borders instead of floating shadows. Nothing here changes behaviour - delete this file (and its <link>)
   to get the roomier look back. Loaded after landing.css so the upload page keeps its own layout.
   ========================================================================= */
:root {
  --topbar-h: 52px;
  --r-lg: 10px; --r: 8px; --r-sm: 6px; --r-xs: 5px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-hover: 0 2px 6px rgba(15, 23, 42, .09);
}
:root[data-theme="dark"] { --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-hover: 0 2px 8px rgba(0, 0, 0, .5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-hover: 0 2px 8px rgba(0, 0, 0, .5); } }
body { font-size: 13px; line-height: 1.45; }

/* ---------------------------------------------------------------- header + filter bar */
.topbar { padding: 0 14px; gap: 14px; }
.brand { gap: 8px; }
.brand-logo { width: 30px; height: 30px; filter: none; }
.brand-name { font-size: 13.5px; }
.brand-sub { font-size: 10.5px; }
.tabs { padding: 3px; border-radius: 9px; }
.tab-ink { top: 3px; bottom: 3px; border-radius: 7px; box-shadow: 0 1px 2px rgba(15, 23, 42, .10); }
.tab { height: 26px; padding: 0 11px; font-size: 12.5px; border-radius: 7px; gap: 6px; }
.tab .ico { width: 14px; height: 14px; }
.btn { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 7px; gap: 6px; }
.btn-icon { width: 30px; padding: 0; }
.btn-icon .ico, .btn .ico { width: 16px; height: 16px; }
.btn-link { height: 22px; font-size: 12px; }
.corp { padding-left: 12px; margin-left: 4px; height: 24px; }
.corp-logo { height: 21px; }
.menu { top: 36px; border-radius: 8px; padding: 4px; min-width: 230px; }
.menu button { padding: 6px 9px; border-radius: 6px; font-size: 12.5px; }
.menu-label { padding: 4px 9px 3px; font-size: 10px; }

.filterbar { padding: 6px 14px; gap: 6px 10px; }
.filter-group { gap: 6px; }
.combo-btn { height: 34px; min-width: 215px; padding: 0 8px 0 4px; gap: 8px; border-radius: 8px; box-shadow: none; }
.combo-ico { width: 26px; height: 26px; border-radius: 6px; }
.combo-ico svg { width: 15px; height: 15px; }
.combo-cap { font-size: 9.5px; }
.combo-text { font-size: 13px; }
.combo-pop { top: 38px; border-radius: 8px; padding: 6px; }
.combo-pop li { padding: 5px 8px; gap: 9px; border-radius: 6px; }
.date-range { height: 34px; border-radius: 8px; box-shadow: none; padding: 0 4px 0 9px; }
.date-range input[type="date"] { height: 26px; font-size: 12px; }
.chips { padding: 2px; border-radius: 8px; }
.chip { height: 26px; padding: 0 10px; border-radius: 6px; font-size: 12px; }
.data-chip { height: 30px; padding: 2px 2px 2px 3px; box-shadow: none; }
.dc-main { height: 24px; font-size: 12px; }
.hold-x { width: 24px; height: 24px; }
.dc-pop { border-radius: 10px; padding: 11px; }

/* ---------------------------------------------------------------- page + cards */
.view { padding: 10px 14px 18px; gap: 10px; }
.view-overview { padding: 10px clamp(12px, 1.1vw, 24px) 20px; gap: 10px; }
.grid-2, .view-overview .grid-2 { gap: 10px; }
.card { padding: 10px 12px; border-radius: 10px; box-shadow: var(--shadow); }
.card-head { margin-bottom: 6px; gap: 8px; }
.card h2 { font-size: 13px; }
.card-sub { font-size: 11.5px; margin-top: 1px; }
.card-pill { font-size: 10.5px; padding: 1px 7px; }

/* ---------------------------------------------------------------- overview header */
.ov-hero { padding: 10px 14px; gap: 16px; border-radius: 10px; box-shadow: var(--shadow);
  background: radial-gradient(420px 120px at 0 0, rgba(59, 130, 246, .07), transparent 70%), radial-gradient(360px 120px at 100% 100%, rgba(168, 85, 247, .07), transparent 70%), var(--surface); }
.ov-hero::after { width: 96px; height: 96px; right: -8px; opacity: .05; }
.ov-eyebrow { font-size: 10px; letter-spacing: .1em; }
.ov-name { font-size: 26px; margin: 1px 0 6px; padding-bottom: 1px; max-width: 54vw; }
.ov-meta { gap: 5px; }
.meta-chip { height: 22px; padding: 0 8px; gap: 5px; font-size: 11.5px; border-radius: 11px; box-shadow: none; }
.meta-chip svg { width: 12px; height: 12px; }
.ov-side { min-width: 220px; max-width: 300px; gap: 3px; }
.ov-side-title { font-size: 10px; }
/* name, bar and share on one line (the markup order is swatch, name, share, bar) */
.dist-row { grid-template-columns: 8px minmax(0, 1fr) 72px 32px; font-size: 12px; gap: 0 8px; }
.dist-row > i { width: 8px; height: 8px; border-radius: 2px; }
.dist-row > span:nth-child(3) { grid-column: 4; grid-row: 1; text-align: right; }
.dist-row > .dist-bar { grid-column: 3; grid-row: 1; height: 4px; margin-top: 0; }
.ov-side .muted.small { font-size: 11px; line-height: 1.2; }

/* ---------------------------------------------------------------- KPI tiles */
.kpis { gap: 8px; }
.kpi { padding: 8px 11px 7px; border-radius: 10px; box-shadow: var(--shadow); }
.kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.kpi::before { top: -60px; right: -48px; width: 124px; height: 124px; }
.kpi-top { gap: 6px; }
.kpi-ico { width: 20px; height: 20px; border-radius: 6px; }
.kpi-ico .ico { width: 12px; height: 12px; }
.kpi:hover .kpi-ico { transform: rotate(-6deg) scale(1.05); box-shadow: none; }
.kpi-label { font-size: 11px; }
.kpi-value { font-size: 19px; margin-top: 5px; }
.kpi-value small { font-size: 11px; margin-left: 2px; }
.kpi-aside { font-size: 10px; padding: 1px 6px; border-radius: 6px; }
.kpi-foot { font-size: 11px; margin-top: 1px; }
.kpi-spark { height: 16px; margin-top: 4px; }
.kpi-dots { height: 14px; margin-top: 5px; gap: 1.5px; }
.kpi-dots span { border-radius: 2px; }

/* ---------------------------------------------------------------- charts and lists */
.chart { min-height: 0; }
.hbar-list { gap: 0; }
.hbar { padding: 3px 4px; gap: 2px 8px; border-radius: 6px; }
.hbar .nm { font-size: 12.5px; }
.hbar .val { font-size: 11.5px; }
.hbar .track { height: 4px; }
.split { min-height: 0; gap: 14px; }
.donut { width: 128px; height: 128px; }
.donut::before { inset: 20px; }
.donut-center b { font-size: 19px; }
.donut-center span { font-size: 8.5px; margin-top: 1px; }
.donut-center > div { max-width: 72px; }
.split-legend { gap: 1px; }
.split-row { padding: 4px 7px; border-radius: 6px; gap: 1px 8px; }
.split-row .l { font-size: 12.5px; }
.split-row .v { font-size: 12.5px; }
.split-row .s { font-size: 11px; }
.split-row .sbar { margin-top: 2px; }

/* ---------------------------------------------------------------- tables */
.table-wrap { max-height: 460px; border-radius: 8px; }
.table { font-size: 12px; }
.table th { padding: 6px 10px; font-size: 10.5px; }
.table td { padding: 4px 10px; }
.table .seq { gap: 3px 2px; }
.table .seq .pill { padding: 0 7px; font-size: 11px; }
.table .wd { font-size: 11px; }
.date-cell { gap: 7px; }
.date-badge { width: 28px; height: 28px; border-radius: 7px; }
.date-badge b { font-size: 12px; }
.date-badge span { font-size: 8px; margin-top: 1px; }
.mini-bar { width: 44px; height: 4px; margin-left: 6px; }
.tag { font-size: 10.5px; padding: 1px 7px; }
.mv-pill { padding: 1px 7px 1px 4px; }
.mv-chip { height: 24px; font-size: 11.5px; }

/* ---------------------------------------------------------------- day routes */
.day-list-panel { width: 236px; }
.panel-head { padding: 9px 12px 6px; }
.panel-head h2 { font-size: 13px; }
.count-pill { font-size: 10.5px; padding: 1px 8px; }
.day-summary { margin: 0 8px 6px; padding: 7px 10px 6px; border-radius: 8px; }
.ds-top { gap: 3px; }
.ds-total b { font-size: 20px; }
.ds-side { font-size: 10.5px; gap: 8px; }
.ds-bars { height: 22px; margin-top: 5px; }
.day-list { padding: 0 6px 8px; }
.day-item { grid-template-columns: 28px minmax(0, 1fr); gap: 0 8px; padding: 4px 6px 5px; border-radius: 8px; margin-bottom: 1px; }
.day-item .dnum { width: 28px; height: 32px; border-radius: 7px; }
.day-item .dnum b { font-size: 13px; }
.day-item .dnum span { font-size: 7.5px; margin-top: 1px; }
.day-item .d1 .km { font-size: 12.5px; }
.day-item .d1 .st { font-size: 10px; line-height: 15px; padding: 0 5px; }
.day-item .d2 { font-size: 10.5px; }
.day-item .mini { height: 2px; margin-top: 2px; }
.day-item:hover { transform: none; }
.month-sep { padding: 6px 8px 3px; font-size: 10px; }
.day-detail { width: 336px; }
.dd-head { padding: 9px 12px 8px; }
.dd-nav { gap: 4px; }
.dd-nav h2 { font-size: 14px; }
.dd-nav .btn-icon { width: 26px; height: 26px; border-radius: 6px; font-size: 14px; }
.dd-who { margin-top: 3px; font-size: 12px; }
.dd-sec { padding: 9px 12px; }
.dd-sec h3 { margin-bottom: 6px; font-size: 11px; }
.stat-grid { gap: 5px; }
.stat { padding: 5px 8px; border-radius: 7px; }
.stat .l { font-size: 9.5px; }
.stat .v { font-size: 13.5px; margin-top: 1px; }
.area-seq { gap: 4px 3px; }
.area-chip { padding: 3px 8px; border-radius: 7px; }
.area-chip b { font-size: 12px; }
.area-chip span { font-size: 10px; }
.timeline { height: 24px; border-radius: 6px; }
.timeline .tl-travel { top: 10px; bottom: 10px; }
.timeline .tl-gap { top: 8px; bottom: 8px; }
.timeline .tl-stop { top: 3px; bottom: 3px; }
.tl-axis { height: 14px; }
.tl-legend { margin-top: 4px; font-size: 10.5px; gap: 10px; }
.stop-list::before { left: 15px; top: 14px; bottom: 14px; }
.stop-item { grid-template-columns: 24px 1fr auto; gap: 0 8px; padding: 5px 4px; border-radius: 8px; }
.stop-num { width: 22px; height: 22px; font-size: 10px; box-shadow: 0 0 0 2px var(--surface); }
.stop-num.start, .stop-num.end { box-shadow: 0 0 0 2px var(--surface); }
.stop-main .t { font-size: 12.5px; }
.stop-main .p { font-size: 11.5px; }
.stop-dur { font-size: 11.5px; }
.stop-dur a { font-size: 10.5px; margin-top: 2px; padding: 0 6px; }
.leg-row { padding-left: 36px; min-height: 14px; font-size: 10.5px; }
.map-overlay { border-radius: 8px; box-shadow: var(--shadow-hover); }
.map-legend { padding: 6px 9px; font-size: 11.5px; bottom: 62px; }
.map-legend .grad { width: 96px; height: 6px; }
.playback { padding: 4px 10px 4px 4px; bottom: 10px; gap: 8px; }
.btn-play { width: 30px; height: 30px; }
.playback select { height: 24px; font-size: 11.5px; }
.mk-pill { font-size: 11px; padding: 2px 8px; }
.leaflet-bar, .leaflet-control-layers { border-radius: 8px !important; }

/* ---------------------------------------------------------------- area heatmap */
.heat-panel { width: 332px; }
.heat-controls { top: 10px; padding: 4px; gap: 6px; }
.heat-controls select { height: 26px; font-size: 12px; border-radius: 6px; }
.seg { padding: 2px; border-radius: 8px; }
.seg button { height: 22px; padding: 0 9px; font-size: 12px; border-radius: 6px; }
.heat-legend .scale i { width: 36px; height: 7px; }
.heat-legend .scale div { font-size: 10px; }
.search-wrap { margin: 0 10px 8px; }
.search-wrap .ico { top: 7px; left: 9px; width: 15px; height: 15px; }
.search-wrap .input { height: 30px; font-size: 12.5px; padding-left: 30px; }
.rank-list { padding: 0 6px 8px; }
.rank-item { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 1px 8px; padding: 5px 7px; border-radius: 8px; }
.rank-item:hover, .rank-item.hl { transform: none; }
.rank-item .rk { width: 20px; height: 20px; border-radius: 6px; font-size: 10.5px; }
.rank-item .nm { font-size: 12.5px; }
.rank-item .nm span { font-size: 11px; }
.rank-item .val { font-size: 12px; }
.rank-item .bar { height: 3px; }
.rank-item .sub { font-size: 10.5px; }
.area-detail { margin: 0 10px 8px; padding: 9px; border-radius: 9px; }
.area-detail h3 { font-size: 13.5px; }
.area-detail .kv { grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 6px 0; }
.area-detail .kv div { padding: 3px 6px; border-radius: 6px; font-size: 9.5px; line-height: 1.25; }
.area-detail .kv b { font-size: 13px; }
.area-detail li { padding: 2px 6px; font-size: 11.5px; }
.area-detail { max-height: 40%; }

/* ---------------------------------------------------------------- upload page cards */
.lp { padding-top: 16px; padding-bottom: 16px; }
.lp-lead { margin: 18px 0 20px; font-size: 15px; line-height: 1.55; }
.lp-drop { padding: 9px 10px 9px 12px; gap: 12px; border-radius: 9px; }
.lp-drop::after { border-radius: 9px; }
.lp-drop-ico { width: 34px; height: 34px; border-radius: 8px; }
.lp-drop-ico svg { width: 18px; height: 18px; }
.lp-drop-text .t { font-size: 14px; }
.lp-drop-text .s { font-size: 12px; }
.lp-drop-btn { height: 32px; padding: 0 13px; border-radius: 7px; font-size: 13px; gap: 6px; }
.lp .csv-hint { margin-top: 10px; }
.lp-card { right: 18px; bottom: 18px; width: 224px; padding: 10px 12px 9px; border-radius: 9px; }
.c-top { font-size: 11.5px; }
.c-km { margin-top: 3px; }
.c-km b { font-size: 26px; }
.c-km span { font-size: 12px; }
.c-row { margin-top: 3px; gap: 10px; font-size: 11px; }
.c-tl { height: 5px; margin-top: 8px; }
.c-ax { margin-top: 3px; font-size: 9px; }
.lp-legend { left: 14px; top: 52px; padding: 6px 8px; gap: 3px; border-radius: 7px; }
.lp-legend .ramp i { width: 18px; height: 6px; }
.lp-band { gap: 14px; padding: 14px 0 20px; }
.lp-steps { gap: 14px; }
.lp-steps small { font-size: 11.5px; margin-top: 1px; }
.lp-stats { gap: 32px; }
.lp-stats dd { font-size: 22px; }
.lp-pipe { padding-top: 10px; }
.lp .upload-error, .upload-error { margin-top: 8px; padding: 9px 11px; }

/* ---------------------------------------------------------------- dialogs, popovers, toasts */
.dialog { width: min(440px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 12px; }
.dlg-head { gap: 10px; margin-bottom: 0; }
.dlg-ico { width: 30px; height: 30px; border-radius: 8px; }
.dlg-ico svg { width: 17px; height: 17px; }
.dialog h2 { font-size: 15px; margin-bottom: 1px; }
.field { gap: 2px; margin: 9px 0; }
.field span { font-size: 12.5px; }
.field b { padding: 0 7px; border-radius: 6px; font-size: 12px; }
.field small { font-size: 11px; }
.field select { height: 30px; font-size: 12.5px; }
.dialog-actions { margin-top: 12px; gap: 6px; }
.loading-card { padding: 10px 16px; border-radius: 10px; gap: 10px; font-size: 13px; }
.spinner { width: 20px; height: 20px; }
.toast { bottom: 16px; padding: 7px 12px; border-radius: 8px; font-size: 12.5px; }
.tip { padding: 5px 8px; border-radius: 6px; font-size: 11.5px; box-shadow: var(--shadow-hover); }
.tip b { font-size: 12px; margin-bottom: 2px; }
.tip .tr { gap: 10px; }
.leaflet-tooltip { padding: 4px 8px; border-radius: 6px; font-size: 11.5px; }
.leaflet-popup-content-wrapper { border-radius: 8px; }
.leaflet-popup-content { margin: 8px 10px; font-size: 12px; line-height: 1.4; }
.leaflet-popup-content b { font-size: 12.5px; }
.dc-pop { width: 296px; padding: 10px; border-radius: 10px; top: calc(100% + 8px); }
.dc-head { font-size: 12.5px; }
.dc-files { margin: 7px 0; gap: 3px; }
.dc-files li { padding: 4px 6px; border-radius: 6px; font-size: 11.5px; gap: 7px; }
.dc-files .fi { width: 18px; height: 18px; border-radius: 5px; }
.dc-files .fi svg { width: 11px; height: 11px; }
.dc-stats { gap: 4px; }
.dc-stats div { padding: 5px 8px; border-radius: 7px; }
.dc-stats b { font-size: 14px; }
.dc-stats span { font-size: 10px; }
.dc-range { margin: 6px 0 8px; font-size: 11.5px; }
.hold-bar { height: 32px; border-radius: 8px; font-size: 12.5px; }
.dc-note { margin-top: 5px; font-size: 10.5px; }
.pdf-card { width: 316px; padding: 9px 12px 9px 10px; gap: 10px; border-radius: 10px; bottom: 16px; right: 16px; }
.pdf-sheet { width: 30px; height: 40px; padding: 9px 6px 0; gap: 3px; }
.pdf-check { width: 22px; height: 22px; padding: 3px; }
.pdf-stage { font-size: 12.5px; }
.pdf-name { font-size: 10.5px; }
.mi-stack code { font-size: 10px; max-width: 260px; }