/* Лён: horizontal navigation, light map, vehicle dock and driver-first detail. */
.dispatcher .app-shell { margin: 0; height: 100vh; height: 100dvh; min-height: 820px; display: flex; flex-direction: column; }
.dispatcher .topbar { display: flex; align-items: center; gap: 24px; flex-shrink: 0; min-height: 74px; padding: 14px 27px; border-bottom: 1px solid var(--line); background: var(--surface); }
.topbar .wordmark { display: inline-flex; align-items: center; gap: 9px; }.brand-monogram { background: var(--brand-accent); color: var(--brand-on-accent); display: grid; place-items: center; width: 33px; height: 33px; border-radius: 9px; font-size: 18px; font-weight: 600; letter-spacing: -1.5px; }
.header-nav { display: flex; align-items: center; gap: 4px; }.header-nav button, .header-nav a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 11px; min-height: 38px; border-radius: 8px; background: transparent; color: var(--muted); font-size: 12px; white-space: nowrap; }.header-nav .active { color: var(--brand-accent); background: var(--brand-accent-soft); }.header-nav button:hover, .header-nav a:hover { background: var(--surface2); }.header-nav .icon { width: 17px; height: 17px; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; }.top-actions .button { font-size: 11px; }.top-actions .button span { font-size: 15px; }.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-accent-soft); color: var(--brand-accent); border: 0; font-size: 11px; flex-shrink: 0; }#clock { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.dispatcher main { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 17px; padding: 21px 25px 0; }.overview-bar { display: grid; grid-template-columns: minmax(180px,.95fr) minmax(0,2fr) auto; align-items: center; gap: 24px; flex-shrink: 0; }.page-heading h1 { font-size: 25px; font-weight: 550; }.page-heading p { font-size: 12px; margin-top: 5px; }
.stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 11px 0; }.stat { position: relative; padding: 0 18px; border-right: 1px solid var(--line); min-width: 0; }.stat:last-child { border: 0; }.stat-label { color: var(--muted); font-size: 11px; line-height: 1.35; }.stat-value { font-size: 24px; font-weight: 500; letter-spacing: -.5px; margin-top: 4px; line-height: 1.2; font-variant-numeric: tabular-nums; }.stat-description, .stat-symbol { display: none; }.stat.orange .stat-value { color: var(--orange); }.stat.blue .stat-value { color: var(--blue); }
.workspace { display: grid; grid-template-areas: "map" "fleet"; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(300px,1fr) minmax(250px,.65fr); flex: 1; gap: 16px; min-height: 0; }.workspace.details-open { grid-template-areas: "map detail" "fleet detail"; grid-template-columns: minmax(0,1fr) 320px; }
.map-panel { grid-area: map; position: relative; overflow: hidden; min-width: 0; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--map-land); isolation: isolate; }
.fleet-panel { grid-area: fleet; min-width: 0; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) minmax(170px,280px); grid-template-rows: auto auto minmax(0,1fr) auto; }.panel-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 13px 16px 5px; min-width: 0; }.panel-heading h2 { font-size: 14px; margin-right: auto; }.panel-heading h2 span { color: var(--muted); margin-left: 6px; font-size: 11px; font-weight: 400; }.panel-heading .text-button { font-size: 11px; padding: 5px 0; }.fleet-panel > .search { margin: 12px 14px 4px 0; padding: 7px 9px; align-self: start; }
.filter-group { grid-column: 1/-1; display: flex; align-items: center; gap: 5px; padding: 5px 14px 8px; }.filter { padding: 5px 9px; font-size: 11px; color: var(--muted); background: transparent; border-radius: 6px; }.filter.active { color: var(--brand-accent); background: var(--brand-accent-soft); }.filter span { margin-left: 4px; color: var(--orange); }
.fleet-list { grid-column: 1/-1; display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); align-content: start; gap: 6px; padding: 0 12px 12px; overflow: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }.vehicle-row { display: block; width: 100%; min-width: 0; text-align: left; background: var(--surface); border: 1px solid transparent; border-radius: 10px; padding: 11px 12px; }.vehicle-row:hover { background: var(--bg); }.vehicle-row.selected { background: var(--brand-accent-soft); border-color: color-mix(in srgb,var(--brand-accent) 30%,transparent); }
.row-top, .row-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.row-top > .icon { width: 16px; height: 16px; color: var(--muted); }.plate { font-size: 13px; font-weight: 600; letter-spacing: .1px; }.row-driver { font-size: 12px; margin: 4px 0; }.row-subtitle { color: var(--muted); font-size: 11px; margin: 4px 0 8px; overflow-wrap: anywhere; }.row-time { color: var(--muted); font-size: 11px; white-space: nowrap; }.row-time.warning { color: var(--orange); }.row-time.lost { color: var(--red); }.row-gps { margin-top: 7px; }.panel-foot { grid-column: 1/-1; padding: 8px 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; display: flex; align-items: center; gap: 7px; }
.map-toolbar { position: absolute; z-index: 3; top: 13px; left: 13px; right: 13px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; pointer-events: none; }.map-toolbar > * { pointer-events: auto; }.segmented { display: inline-flex; background: var(--surface); border: 1px solid var(--line); padding: 3px; border-radius: 8px; box-shadow: var(--shadow); }.segmented button { padding: 7px 10px; background: transparent; color: var(--muted); font-size: 11px; border-radius: 5px; }.segmented button.active { background: var(--brand-accent-soft); color: var(--brand-accent); }.map-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }.map-actions .button { background: var(--surface); padding: 8px 10px; min-height: 35px; font-size: 11px; box-shadow: var(--shadow); }
#yandex-map { position: absolute; inset: 0; width: 100%; height: 100%; }.map-view { position: relative; width: 100%; height: 100%; }#terrain { display: block; width: 100%; height: 100%; }.north { position: absolute; top: 115px; right: 18px; display: flex; flex-direction: column; align-items: center; color: var(--muted); font-size: 11px; }.north span { font-size: 23px; }.map-legend { position: absolute; bottom: 50px; left: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: calc(100% - 26px); padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 10px; color: var(--muted); }.map-legend span { display: flex; align-items: center; gap: 5px; }.map-disclaimer { position: absolute; bottom: 10px; left: 13px; max-width: calc(100% - 26px); color: var(--muted); background: var(--surface); border-radius: 5px; padding: 3px 6px; font-size: 10px; }
.map-marker { cursor: pointer; }.map-marker .marker-ring { fill: var(--surface); stroke-width: 1.5; }.map-marker.selected .marker-ring { stroke: var(--brand-accent); stroke-width: 3; }.map-marker text { font: 600 11px "Segoe UI",Arial,sans-serif; }.map-marker .marker-label { fill: var(--text); stroke: var(--surface); stroke-width: 5px; paint-order: stroke; stroke-linejoin: round; }
.map-empty { position: absolute; inset: 110px 18px 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 13px; }.map-empty > .icon { width: 37px; height: 37px; color: var(--brand-accent); }.map-empty p { font-size: 12px; }
.cargo-icon { width: 23px; height: 23px; stroke-width: 1.7; }.cargo-map-legend { position: absolute; z-index: 2; left: 13px; top: 64px; display: flex; flex-wrap: wrap; gap: 13px; max-width: calc(100% - 75px); padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); }.cargo-map-legend > span { display: flex; align-items: center; gap: 5px; }.cargo-map-legend .cargo-icon { width: 18px; height: 18px; }.cargo-map-legend b { font-size: 10px; font-weight: 500; }
.work-map-legend { position: absolute; bottom: 35px; left: 13px; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; max-width: calc(100% - 85px); padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 10px; }.work-map-legend b { font-weight: 500; }.work-map-legend .IN_TRANSIT { color: var(--lime); }.work-map-legend .LOADING { color: var(--orange); }.work-map-legend .UNLOADING { color: var(--blue); }.work-map-legend .SLEEP { color: var(--purple); }.work-map-legend small { font-size: 10px; }
.real-map-marker { position: relative; display: grid; place-items: center; width: 34px; height: 34px; background: var(--surface); border: 2px solid var(--brand-accent); border-radius: 11px; color: var(--brand-accent); box-shadow: 0 2px 8px #34423c18; font-size: 11px; font-weight: 600; }.real-map-marker.selected { background: var(--brand-accent-soft); box-shadow: 0 0 0 5px color-mix(in srgb,var(--brand-accent) 15%,transparent),0 2px 8px #34423c18; }.real-map-marker > small { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); white-space: nowrap; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--text); font-size: 11px; font-weight: 500; padding: 4px 6px; }.real-map-marker > .map-gps-dot { position: absolute; right: -3px; top: -3px; border: 2px solid var(--surface); width: 10px; height: 10px; }.real-map-marker.cargo-marker { width: 42px; height: 42px; }.cargo-marker > .cargo-icon { width: 25px; height: 25px; }.cargo-marker > small { bottom: 47px; }.cargo-marker > .work-status-badge { position: absolute; top: 47px; left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--line); padding: 3px 6px; border-radius: 5px; font-size: 10px; pointer-events: none; }
.fleet-group-marker { width: 104px; min-height: 82px; padding: 7px; color: var(--brand-accent); background: var(--surface); border: 2px solid var(--brand-accent); border-radius: 12px; box-shadow: var(--shadow); text-align: center; }.fleet-group-marker > strong { display: block; font-size: 12px; margin-bottom: 5px; }.fleet-group-marker > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }.fleet-group-marker .cargo-icon { width: 17px; height: 17px; }.fleet-group-marker > small { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }
.fleet-group-marker.selected { background: var(--brand-accent-soft); box-shadow: 0 0 0 4px color-mix(in srgb,var(--brand-accent) 15%,transparent); }
.fleet-maplibre-anchor { cursor: pointer; padding: 0; border: 0; background: transparent; }
.fleet-maplibre-anchor:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 6px; border-radius: 12px; }
#yandex-map .maplibregl-canvas { outline: none; }
#yandex-map .maplibregl-ctrl-top-right { top: 100px; }
#yandex-map .maplibregl-ctrl-group { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
#yandex-map .maplibregl-ctrl-group button:hover { background-color: var(--brand-accent-soft); }
#yandex-map .maplibregl-ctrl-attrib { max-width: calc(100% - 20px); color: var(--muted); background: var(--surface); font: 10px/1.5 "Segoe UI",Arial,sans-serif; }
#yandex-map .maplibregl-ctrl-attrib a { color: var(--text); }
.map-load-status { position: absolute; z-index: 3; top: 108px; left: 14px; max-width: calc(100% - 90px); padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 12px; box-shadow: var(--shadow); }
.map-load-status.is-error { border-color: var(--orange); color: var(--orange); }
#map-empty-description { white-space: pre-line; }
.detail-panel { grid-area: detail; display: none; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-width: 0; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }.workspace.details-open > .detail-panel { display: block; }.detail-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; color: var(--muted); font-size: 11px; letter-spacing: .04em; }.detail-close { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: transparent; font-size: 22px; color: var(--muted); flex-shrink: 0; }.detail-close:hover { background: var(--surface2); }
.detail-heading, .driver-identity { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }.driver-identity > div:last-child { min-width: 0; }.driver-initials, .vehicle-icon { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; background: var(--brand-accent-soft); color: var(--brand-accent); font-size: 15px; font-weight: 600; }.detail-heading h2, .driver-identity h2 { font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.35px; overflow-wrap: anywhere; }.detail-heading p, .driver-identity p { font-size: 12px; margin-top: 4px; color: var(--muted); }.detail-status { margin-bottom: 15px; }.driver-contact { display: flex; align-items: center; gap: 7px; color: var(--brand-accent); font-size: 13px; overflow-wrap: anywhere; }.driver-contact .icon { width: 16px; height: 16px; }.driver-contact a:hover { text-decoration: underline; }
.driver-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0 0; }.driver-card-actions .button { flex: 1 1 105px; min-width: 0; font-size: 12px; }.detail-fields { display: grid; gap: 12px; padding: 0; margin: 0; }.detail-field { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 12px; }.detail-field dt { color: var(--muted); }.detail-field dd { margin: 0; max-width: 65%; text-align: right; overflow-wrap: anywhere; font-weight: 500; }.detail-section { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 20px; }
.current-destination { background: var(--bg); padding: 14px; border-radius: 12px; margin: 11px 0 18px; }.destination-label { display: block; color: var(--muted); font-size: 11px; margin-bottom: 4px; }.current-destination strong { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }.telemetry-grid { display: grid; gap: 10px; }.telemetry-item { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12px; }.telemetry-item:last-child { border: 0; }.telemetry-item small { color: var(--muted); font-size: 11px; }.telemetry-item strong, .telemetry-item span { text-align: right; font-size: 12px; font-weight: 500; }.telemetry-item .icon { width: 15px; height: 15px; margin-right: 5px; }.telemetry-box { display: flex; align-items: center; gap: 8px; background: var(--brand-accent-soft); border: 1px solid var(--line); border-radius: 9px; color: var(--brand-accent); padding: 10px; font-size: 12px; }.telemetry-box.warning { background: var(--orange-soft); color: var(--orange); }.telemetry-box.lost { background: var(--red-soft); color: var(--red); }.detail-gps { margin-top: 10px; }.data-time, .driver-card-note { font-size: 11px; line-height: 1.6; color: var(--muted); margin-top: 10px; overflow-wrap: anywhere; }
.app-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; color: var(--muted); font-size: 10px; flex-shrink: 0; flex-wrap: wrap; }.app-footer b { color: var(--brand-accent); margin: 0 7px; }
.cargo-dialog { width: min(1800px,calc(100vw - 40px)); max-width: none; height: calc(100dvh - 50px); max-height: none; padding: 0; }.cargo-dialog[open] { display: flex; flex-direction: column; }.cargo-dialog-header { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 20px 24px; border-bottom: 1px solid var(--line); flex-shrink: 0; }.cargo-dialog-header > div:first-child { margin-right: auto; }.cargo-dialog-header .eyebrow { margin-bottom: 5px; }.cargo-dialog-header h2 { margin: 0; font-size: 23px; }.cargo-dialog-header p { margin: 5px 0 0; font-size: 12px; }.cargo-dialog-header .board-search { width: min(285px,40vw); }.cargo-dialog-header > .icon-button { flex-shrink: 0; }.export-actions { display: flex; flex-wrap: wrap; gap: 8px; }.export-actions .button { font-size: 12px; }.board-location-note { padding: 11px 24px; font-size: 11px; color: var(--muted); background: var(--bg); line-height: 1.6; flex-shrink: 0; }
.table-view { overflow: auto; min-height: 0; }.cargo-dialog .cargo-dialog-content { flex: 1; min-height: 0; padding: 16px; }.cargo-board-caption { font-size: 11px; color: var(--muted); margin-bottom: 14px; }.cargo-board { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); align-items: start; gap: 12px; }.cargo-column { min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }.cargo-column h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); font-size: 13px; }.cargo-heading { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }.cargo-heading .cargo-icon { color: var(--brand-accent); }.cargo-count { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 6px; background: var(--brand-accent-soft); color: var(--brand-accent); font-size: 11px; }.cargo-cards { display: grid; gap: 7px; padding: 8px; }
.cargo-card { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 100%; min-width: 0; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }.cargo-card:hover { border-color: var(--brand-accent); }.cargo-card.selected { background: var(--brand-accent-soft); border-color: var(--brand-accent); }.board-row-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-width: 0; flex-wrap: wrap; }.board-plate { font-size: 13px; font-weight: 600; }.board-row-heading .work-status-badge { font-size: 10px; }.board-driver { display: block; max-width: 100%; font-size: 12px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }.board-field { display: flex; align-items: baseline; gap: 5px; width: 100%; min-width: 0; }.board-field:not(.board-location)::before { content: '→'; color: var(--brand-accent); }.board-field strong { font-size: 11px; font-weight: 500; overflow-wrap: anywhere; }.board-location .gps-indicator { width: 100%; gap: 5px; font-size: 11px; }.board-location-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }.board-location-line > small { color: var(--muted); font-size: 10px; flex-shrink: 0; }.board-coordinates, .board-location-empty { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }.cargo-empty { color: var(--muted); text-align: center; font-size: 12px; padding: 20px 5px; }
.report-dialog { width: min(780px,calc(100vw - 28px)); }.report-dialog h2 { font-size: 22px; margin: 0; }.report-dialog > p { margin: 15px 0; }.report-dialog textarea { min-height: 260px; background: var(--bg); font: 12px/1.6 Consolas,monospace; resize: vertical; }.report-dialog .export-actions { margin-top: 15px; }.map-group-dialog { width: min(620px,calc(100vw - 28px)); }.map-group-dialog h2 { margin: 0; font-size: 21px; }.map-group-dialog p { margin-top: 12px; }#map-group-list { display: grid; gap: 8px; }.map-group-vehicle { display: flex; align-items: center; gap: 12px; padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; text-align: left; }.map-group-vehicle:hover { background: var(--brand-accent-soft); }.map-group-vehicle > span:not(.work-status-badge) { flex: 1; min-width: 0; display: grid; gap: 4px; }.map-group-vehicle small { color: var(--muted); font-size: 11px; }
.pairing-qr { display: block; width: min(100%,320px); height: auto; margin: 16px auto; background: #fff; image-rendering: pixelated; }.onboarding-dialog { width: min(900px,94vw); max-width: 94vw; }#onboarding-preview-list { max-height: 180px; overflow: auto; font-size: 13px; }#onboarding-preview-list p { margin: 4px 0; }#onboarding-codes { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 18px; margin-top: 18px; }#onboarding-codes section, #relay-links section { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); margin-top: 13px; }#onboarding-codes canvas { width: 100%; max-width: 300px; height: auto; image-rendering: pixelated; }#relay-links textarea { font-size: 12px; overflow-wrap: anywhere; }.card-edit-dialog { width: min(620px,94vw); max-width: 94vw; }
@media (min-width:1600px) { .workspace.details-open { grid-template-columns: minmax(0,1fr) 350px; }.dispatcher main { padding-left: 30px; padding-right: 30px; }.fleet-list { grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); }.detail-panel { padding: 25px; } }
@media (max-width:1250px) { .dispatcher .topbar { padding: 14px 20px; gap: 16px; }.topbar .edition, .top-actions time { display: none; }.top-actions { gap: 7px; }.overview-bar { gap: 17px; }.stat { padding: 0 13px; }.stat-label { font-size: 10px; }.workspace.details-open { grid-template-columns: minmax(0,1fr) 300px; }.detail-panel { padding: 19px; }.dispatcher main { padding: 18px 20px 0; }.cargo-board { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width:1000px) { .dispatcher .topbar { flex-wrap: wrap; gap: 10px 18px; }.header-nav { order: 3; width: 100%; }.top-actions .mode-badge { display: none; }.overview-bar { grid-template-columns: 1fr auto; }.stats { grid-column: 1/-1; grid-row: 2; }.overview-bar > #refresh { grid-column: 2; grid-row: 1; }.dispatcher .app-shell { min-height: 900px; }.workspace { grid-template-rows: minmax(340px,1fr) 245px; }.workspace.details-open { grid-template-columns: minmax(0,1fr) 280px; }.detail-panel { padding: 17px; }.detail-heading h2, .driver-identity h2 { font-size: 17px; }.fleet-panel { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto minmax(0,1fr) auto; }.fleet-panel > .search { grid-row: 2; margin: 6px 12px; }.filter-group { grid-row: 3; }.fleet-list { grid-row: 4; }.panel-foot { grid-row: 5; } }
@media (max-width:760px) { .dispatcher .app-shell { height: auto; min-height: 100dvh; }.dispatcher main { padding: 17px 15px 0; }.workspace, .workspace.details-open { grid-template-columns: minmax(0,1fr); grid-template-areas: "map" "detail" "fleet"; grid-template-rows: 450px auto 370px; flex: none; }.workspace:not(.details-open) { grid-template-areas: "map" "fleet"; grid-template-rows: 450px 370px; }.detail-panel { padding: 23px; }.detail-heading h2, .driver-identity h2 { font-size: 20px; }.telemetry-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }.telemetry-item { flex-direction: column; border: 0; gap: 4px; }.telemetry-item strong, .telemetry-item span { text-align: left; }.fleet-panel { grid-template-columns: minmax(0,1fr) minmax(160px,240px); grid-template-rows: auto auto minmax(0,1fr) auto; }.fleet-panel > .search { grid-row: 1; margin: 12px 12px 4px 0; }.filter-group { grid-row: 2; }.fleet-list { grid-row: 3; grid-template-columns: repeat(2,minmax(0,1fr)); }.panel-foot { grid-row: 4; }.cargo-dialog { width: calc(100vw - 24px); height: calc(100dvh - 28px); }.cargo-dialog-header { padding: 18px; gap: 12px; }.cargo-dialog-header .board-search { width: 100%; order: 4; }.cargo-board { grid-template-columns: repeat(3,minmax(0,1fr)); }.board-location-note { padding: 12px 18px; }.app-footer { padding-bottom: 18px; } }
@media (max-width:520px) { .dispatcher .topbar { padding: 14px 15px; }.topbar .wordmark { font-size: 15px; }.top-actions { gap: 5px; }.top-actions .button { font-size: 11px; padding: 8px; }.header-nav { flex-wrap: wrap; gap: 3px; }.header-nav button, .header-nav a { padding: 9px; font-size: 11px; }.header-nav .icon { width: 16px; }.overview-bar { gap: 13px; }.page-heading h1 { font-size: 23px; }.stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px 0; }.stat:nth-child(2) { border-right: 0; }.stat:first-child, .stat:nth-child(3) { padding-left: 0; }.stat-label { font-size: 11px; }.map-toolbar { flex-wrap: wrap; left: 10px; right: 10px; gap: 7px; }.map-actions { margin-left: auto; }.segmented button { padding: 7px 8px; }.map-actions .button { padding: 7px 8px; }.cargo-map-legend { top: 107px; left: 10px; gap: 9px; padding: 7px; }.cargo-map-legend > span { flex-direction: column; gap: 2px; }.work-map-legend { left: 10px; max-width: calc(100% - 60px); gap: 6px 9px; padding: 7px; font-size: 10px; }.work-map-legend small { flex-basis: 100%; }.north { top: 164px; }.map-legend { display: none; }.workspace, .workspace.details-open { grid-template-rows: 460px auto 440px; }.workspace:not(.details-open) { grid-template-rows: 460px 440px; }.fleet-panel { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto minmax(0,1fr) auto; }.fleet-panel > .search { grid-row: 2; margin: 8px 12px 4px; }.filter-group { grid-row: 3; }.fleet-list { grid-row: 4; grid-template-columns: minmax(0,1fr); }.panel-foot { grid-row: 5; }.panel-heading { padding-top: 13px; gap: 8px; }.detail-panel { padding: 20px; }.telemetry-grid { grid-template-columns: minmax(0,1fr); gap: 0; }.telemetry-item { flex-direction: row; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }.telemetry-item span { text-align: right; }.cargo-board { grid-template-columns: repeat(2,minmax(0,1fr)); }.cargo-dialog .cargo-dialog-content { padding: 10px; }.cargo-cards { padding: 5px; }.cargo-card { padding: 10px; }.app-footer { flex-direction: column; align-items: flex-start; gap: 5px; }.app-footer > span:last-child { display: none; } }
@media (max-width:360px) { .top-actions .avatar { display: none; }.top-actions .button { padding: 7px; font-size: 10px; }.header-nav button, .header-nav a { padding: 7px; }.header-nav .icon { display: none; }.dispatcher main { padding: 15px 11px 0; }.cargo-board { grid-template-columns: minmax(0,1fr); }.map-actions .button, .segmented button { font-size: 10px; }.map-toolbar { gap: 5px; }.panel-heading .text-button { font-size: 10px; } }
@media (pointer:coarse) { .header-nav button, .header-nav a, .filter, .segmented button, .map-actions .button, .detail-close { min-height: 44px; }.detail-close { min-width: 44px; } }
.telemetry-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 9px; align-items: baseline; }
.telemetry-item time { grid-column: 1/-1; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.telemetry-item .detail-gps { margin-top: 0; text-align: right; }
.telemetry-item .detail-gps .gps-indicator { text-align: left; }
.button.danger-button { color: var(--red); border-color: var(--line); background: var(--red-soft); }
.demo-map-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.demo-map-overlay .map-marker { pointer-events: auto; }
.is-demo .cargo-map-legend, .is-demo .map-legend, .is-demo .north { display: none; }
@media print { .topbar, .map-actions, .app-footer { display: none; }.dispatcher .app-shell { height: auto; }.workspace, .workspace.details-open { display: block; }.map-panel { min-height: 500px; }.fleet-panel, .detail-panel { overflow: visible; margin-top: 20px; }.fleet-list { overflow: visible; } }