/* «Обзор» — диспетчерская сети (js/dispatch.js). Палитра общая с кабинетом (app.css :root);
   цвета программ — только здесь: синий «Стандарт», фиолетовый «Премиум», бирюзовый «Облив». */
.dispatch {
  --std: #2f6fd9;
  --prem: #7048e0;
  --rinse: #0a7d8e;
  --other: #56657d;
  --none: #4d5666;
  --heat: 144, 120, 240;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
  padding: 10px 16px 12px;
}

/* Шапка: день, момент, вид. На ноутбуке одна строка высотой 32 px; места кнопок не зависят
   ни от дня, ни от времени (Егор 28.09: «удобно и понятно сразу и компактно»). */
.dispatch-bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.dispatch-day { display: flex; align-items: center; gap: 6px; }
.dispatch-heading { margin: 0; font-size: inherit; font-weight: inherit; }
.dispatch-anchor { position: relative; display: flex; }
.dispatch-icon { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel-2); font-size: 17px; line-height: 1; }
.dispatch-icon:hover:not(:disabled), .dispatch-date:hover, .dispatch-btn:hover { border-color: var(--blue); }
/* Дата — кнопка постоянной ширины: стрелки и всё правее не сдвигаются при смене дня. */
.dispatch-date { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 214px; height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel-2); font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.dispatch-date > span { overflow: hidden; text-overflow: ellipsis; }
.dispatch-title-short { display: none; }
.dispatch-caret { flex: none; width: 0; height: 0; border-top: 5px solid var(--muted); border-right: 4px solid transparent; border-left: 4px solid transparent; }
.dispatch-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.dispatch-today.placeholder { visibility: hidden; }
.dispatch-moment-pair { display: inline-flex; }
.dispatch-moment-button.set, .dispatch-moment-clear { border-color: var(--blue); background: #14294a; }
.dispatch-moment-pair:has(.dispatch-moment-clear:not([hidden])) .dispatch-moment-button { border-radius: 8px 0 0 8px; }
.dispatch-moment-clear { margin-left: -1px; padding: 0 10px; border-radius: 0 8px 8px 0; color: var(--muted); }
.dispatch-clock { position: relative; flex: none; width: 13px; height: 13px; border: 1.6px solid var(--muted); border-radius: 50%; }
.dispatch-clock::before, .dispatch-clock::after { content: ""; position: absolute; border-radius: 1px; background: var(--muted); }
.dispatch-clock::before { top: 1.6px; left: 4.1px; width: 1.6px; height: 4.4px; }
.dispatch-clock::after { top: 4.4px; left: 4.1px; width: 3.6px; height: 1.6px; }
.dispatch-moment-button.set .dispatch-clock { border-color: var(--text); }
.dispatch-moment-button.set .dispatch-clock::before, .dispatch-moment-button.set .dispatch-clock::after { background: var(--text); }
.dispatch-live-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(51, 211, 155, .18); }
.dispatch-view { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.dispatch-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel-2); }
.dispatch-seg button { min-height: 26px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.dispatch-seg button:hover { color: var(--text); }
.dispatch-seg button[aria-pressed="true"] { color: var(--text); background: var(--panel-3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.dispatch-seg.icons button { display: grid; place-items: center; width: 32px; padding: 0; }
.dispatch-zoom { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel-2); }
.dispatch-zoom button { width: 28px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; font-size: 17px; font-weight: 600; line-height: 1; }
.dispatch-zoom button:hover:not(:disabled) { background: var(--panel-3); }
.dispatch-zoom-dots { display: inline-flex; gap: 4px; padding: 0 3px; }
.dispatch-zoom-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); }
.dispatch-zoom-dots i.on { background: var(--text); }
.dispatch-view-open { display: none; }

/* Окна шапки: календарь и «показать как в» */
.dispatch-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }
.dispatch-menu-caption { color: var(--muted); font-size: 12px; font-weight: 600; }
.dispatch-menu-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.dispatch-calendar { width: 272px; }
.dispatch-calendar-head { display: flex; align-items: center; justify-content: space-between; }
.dispatch-calendar-head b { font-size: 14px; }
.dispatch-calendar-head .dispatch-icon { width: 28px; height: 28px; font-size: 15px; }
.dispatch-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.dispatch-calendar-grid .dow { padding-bottom: 2px; color: var(--faint); font-size: 11px; text-align: center; }
.dispatch-calendar-grid button { height: 30px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: var(--panel-2); font-size: 12.5px; font-weight: 600; }
.dispatch-calendar-grid button:hover:not(:disabled) { border-color: var(--blue); }
.dispatch-calendar-grid button:disabled { background: transparent; color: var(--faint); opacity: 1; }
.dispatch-calendar-grid button.today { border-color: var(--green); }
.dispatch-calendar-grid button.sel { background: var(--blue); color: #fff; }
.dispatch-moment-menu { width: 320px; }
.dispatch-moment-menu output { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.dispatch-moment-menu input[type=range] { width: 100%; height: auto; margin: 0; padding: 0; border: 0; background: transparent; accent-color: var(--blue); }
.dispatch-ticks { display: flex; justify-content: space-between; margin-top: -6px; color: var(--faint); font-size: 11px; }
.dispatch-moment-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.dispatch-moment-steps button { height: 28px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--panel-2); font-size: 12px; font-weight: 600; }
.dispatch-moment-steps button:hover { border-color: var(--blue); }
.dispatch-moment-steps #dispatchAtAll { margin-left: auto; }

/* Лист «Вид» — только на телефоне: касанием подсказок не увидеть, поэтому группы подписаны словами. */
.dispatch-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(4, 6, 9, .55); }
.dispatch-sheet { position: fixed; right: 0; bottom: 0; left: 0; z-index: 81; display: flex; flex-direction: column; gap: 14px; padding: 14px 14px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-2); border-radius: 16px 16px 0 0; background: var(--panel); }
.dispatch-sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dispatch-sheet-head b { font-size: 15px; }
.dispatch-sheet-head span { color: var(--muted); font-size: 12px; }
.dispatch-sheet-group { display: flex; flex-direction: column; gap: 6px; }
.dispatch-sheet-group > span { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.dispatch-sheet .dispatch-seg { display: flex; }
.dispatch-sheet .dispatch-seg button { flex: 1; min-height: 34px; }
.dispatch-sheet-done { min-height: 42px; border: 1px solid #316eba; border-radius: 8px; background: #17375d; font-weight: 700; }

/* Цифры дня — одна полоса плиток, две из них — фильтры доски. На узких экранах короткие
   подписи (.short) вместо полных (.full); полный текст — в подсказке плитки. */
.dispatch-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.dispatch-kpi { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 7px 11px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); text-align: left; white-space: nowrap; }
button.dispatch-kpi:hover { border-color: var(--line-2); background: var(--panel-2); }
button.dispatch-kpi.on { border-color: var(--text); background: var(--panel-2); }
.dispatch-kpi-label { display: flex; align-items: center; gap: 6px; min-width: 0; height: 17px; color: var(--muted); font-size: 12px; font-weight: 600; }
.dispatch-kpi-label > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Значок фильтра: воронка в рамке; включённый фильтр — светлая заливка. Что делает — в подсказке плитки. */
.dispatch-kpi-flag { display: inline-grid; flex: none; place-items: center; width: 22px; height: 15px; margin-left: auto; border: 1px solid var(--line-2); border-radius: 999px; color: var(--faint); }
.dispatch-kpi-flag svg { display: block; width: 9px; height: 9px; }
button.dispatch-kpi:hover .dispatch-kpi-flag { border-color: var(--muted); color: var(--muted); }
.dispatch-kpi.on .dispatch-kpi-flag { border-color: var(--text); background: var(--text); color: var(--panel); }
.dispatch-kpi-value { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.dispatch-kpi.money .dispatch-kpi-value { color: var(--red); }
.dispatch-kpi.process .dispatch-kpi-value { color: var(--amber); }
.dispatch-kpi-note { overflow: hidden; color: var(--faint); font-size: 11.5px; font-weight: 400; line-height: 1.35; text-overflow: ellipsis; }
.dispatch-kpi .short { display: none; }

/* Рабочая область: доска и «Требует решения» */
.dispatch-work { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) 318px; gap: 10px; min-height: 380px; }
.dispatch-boardwrap { display: flex; flex-direction: column; gap: 7px; min-width: 0; min-height: 0; }
.dispatch-board { position: relative; flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overscroll-behavior: contain; }
.dispatch-board.h { flex: 0 1 auto; }
.dispatch-board[aria-busy="true"] { opacity: .55; }
.dispatch-grid { position: relative; display: grid; min-width: 100%; }

/* Шапка поста: одна строка, подробности — при наведении */
.dispatch-post { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; padding: 6px 10px; background: var(--panel-2); color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }
.dispatch-post:hover { background: var(--panel-3); }
.dispatch-post.off { color: var(--muted); }
.dispatch-post-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dispatch-post-line.sub { color: var(--muted); font-size: 11.5px; }
.dispatch-post-name { overflow: hidden; font-size: 13.5px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.dispatch-post-load { margin-left: auto; font-weight: 800; }
.dispatch-post-load.none { color: var(--faint); }
.dispatch-post-site { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dispatch-badges { display: inline-flex; gap: 3px; margin-left: auto; }
.dispatch-badges b { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; color: #0d1015; font-size: 11px; line-height: 17px; text-align: center; }
.dispatch-badges b.money { background: var(--red); }
.dispatch-badges b.process { background: var(--amber); }
.dispatch-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--faint); }
.dispatch-dot.on { background: var(--green); box-shadow: 0 0 0 3px rgba(51, 211, 155, .18); }
.dispatch-dot.dry { background: var(--blue); }
.dispatch-dot.blind { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); }

/* Горизонтально: посты строками, время слева направо */
.dispatch-grid.h .dispatch-corner { position: sticky; top: 0; left: 0; z-index: 8; display: flex; align-items: flex-end; padding: 0 10px 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 11px; font-weight: 700; }
.dispatch-grid.h .dispatch-axis { position: sticky; top: 0; z-index: 6; height: 28px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.dispatch-grid.h .dispatch-axis span { position: absolute; bottom: 6px; color: var(--faint); font-size: 11.5px; transform: translateX(-50%); }
.dispatch-grid.h .dispatch-heat-title { position: sticky; left: 0; z-index: 5; display: flex; align-items: center; padding: 0 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 11px; font-weight: 700; }
.dispatch-heat-row { position: relative; border-bottom: 1px solid var(--line); }
.dispatch-grid.h .dispatch-post { position: sticky; left: 0; z-index: 4; border-right: 1px solid var(--line); }
.dispatch-grid.h .dispatch-lane { position: relative; border-bottom: 1px solid var(--line); background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px var(--pph)); }
.dispatch-grid.h .dispatch-night { position: absolute; top: 0; bottom: 0; left: 0; }
.dispatch-grid.h .dispatch-car { top: 14px; height: 32px; padding: 0 5px; }
.dispatch-grid.h .dispatch-idle { top: 8px; bottom: 8px; }
.dispatch-grid.h .dispatch-blind { top: 6px; bottom: 6px; }
.dispatch-grid.h .dispatch-pay { top: -1px; width: 14px; height: 14px; font-size: 9px; transform: translateX(-50%); }
.dispatch-grid.h .dispatch-nodata { position: sticky; left: calc(var(--head) + 12px); display: inline-block; margin-top: 9px; max-width: 640px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Вертикально: посты столбцами, время сверху вниз */
.dispatch-grid.v .dispatch-corner, .dispatch-grid.v .dispatch-heat-title, .dispatch-grid.v .dispatch-post { position: sticky; top: 0; z-index: 6; height: 52px; border-left: 1px solid var(--line); }
.dispatch-grid.v .dispatch-corner { left: 0; z-index: 8; border-left: 0; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.dispatch-grid.v .dispatch-heat-title { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 7px; border-bottom: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 11px; font-weight: 700; }
.dispatch-grid.v .dispatch-axis { position: sticky; left: 0; z-index: 5; background: var(--panel); }
.dispatch-grid.v .dispatch-axis span { position: absolute; right: 7px; color: var(--faint); font-size: 11.5px; transform: translateY(-50%); }
.dispatch-heat-col { position: relative; border-left: 1px solid var(--line); }
.dispatch-grid.v .dispatch-lane { position: relative; border-left: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--pph)); }
.dispatch-grid.v .dispatch-night { position: absolute; top: 0; right: 0; left: 0; }
.dispatch-grid.v .dispatch-car { right: 6px; left: 6px; padding: 0 7px; }
.dispatch-grid.v .dispatch-idle { right: 6px; left: 6px; }
.dispatch-grid.v .dispatch-blind { right: 4px; left: 4px; }
.dispatch-grid.v .dispatch-pay { right: 2px; transform: translateY(-50%); }
.dispatch-grid.v .dispatch-nodata { position: sticky; top: 62px; margin: 10px 8px 0; }
.dispatch-axis span.major { color: var(--muted); font-weight: 700; }

.dispatch-night { background: rgba(0, 0, 0, .2); pointer-events: none; }
.dispatch-heat-cell { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 4px; color: var(--text); font-size: 10.5px; font-weight: 700; }
.dispatch-heat-cell.dark { color: #0d1015; }

/* Машина: цвет и подпись — программа, рамка — нарушение */
.dispatch-car { position: absolute; display: flex; align-items: center; gap: 4px; overflow: hidden; border-radius: 4px; color: #fff; text-decoration: none; white-space: nowrap; transition: filter .12s; }
.dispatch-car:hover, .dispatch-car:focus-visible { z-index: 3; filter: brightness(1.22); }
.dispatch-car.pg-std, .dispatch-chip.pg-std { background: var(--std); }
.dispatch-car.pg-prem, .dispatch-chip.pg-prem { background: var(--prem); }
.dispatch-car.pg-rinse, .dispatch-chip.pg-rinse { background: var(--rinse); }
.dispatch-car.pg-other, .dispatch-chip.pg-other { background: var(--other); }
.dispatch-car.pg-none, .dispatch-chip.pg-none, .dispatch-car.pg-nocash, .dispatch-chip.pg-nocash { background: var(--none); }
.dispatch-car-label { overflow: hidden; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; text-overflow: ellipsis; }
.dispatch-car.lv-money { z-index: 2; box-shadow: 0 0 0 2px var(--red), 0 0 12px rgba(255, 97, 115, .55); }
.dispatch-car.lv-process { z-index: 2; box-shadow: 0 0 0 2px var(--amber); }
.dispatch-car.lv-check { outline: 1.5px dashed #aab4c4; outline-offset: 1px; }
.dispatch-car-mark { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff; }
.dispatch-car.lv-money .dispatch-car-mark { background: var(--red); }
.dispatch-car.lv-process .dispatch-car-mark { background: var(--amber); }
.dispatch-car.confirmed .dispatch-car-mark { width: 9px; height: 9px; box-shadow: 0 0 0 2px #fff; }
.dispatch-car.live { box-shadow: 0 0 0 2px var(--green), 0 0 14px rgba(51, 211, 155, .5); }
.dispatch-car.hl { z-index: 7; outline: 2px solid #fff; outline-offset: 2px; }
.dispatch-board.only-money .dispatch-car:not(.lv-money), .dispatch-board.only-process .dispatch-car:not(.lv-process) { opacity: .16; }
.dispatch-board.no-check .dispatch-car.lv-check { outline: 0; }

.dispatch-idle { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 6px, transparent 6px 12px); }
.dispatch-idle span { padding: 1px 7px; border-radius: 6px; background: var(--panel); color: var(--muted); font-size: 11.5px; white-space: nowrap; }
/* «Три этапа»: у поста дорожки ожидания, мойки и протирки. Машина — одна фигура, как в тетрисе:
   её этапы одного цвета (программа), соединены перемычками и взяты в общую обводку. */
.dispatch-fill.pg-std, .dispatch-outline.pg-std { --pc: var(--std); }
.dispatch-fill.pg-prem, .dispatch-outline.pg-prem { --pc: var(--prem); }
.dispatch-fill.pg-rinse, .dispatch-outline.pg-rinse { --pc: var(--rinse); }
.dispatch-fill.pg-other, .dispatch-outline.pg-other { --pc: var(--other); }
.dispatch-fill.pg-none, .dispatch-outline.pg-none, .dispatch-fill.pg-nocash, .dispatch-outline.pg-nocash { --pc: var(--none); }
.dispatch-track { position: absolute; border-radius: 4px; background: rgba(255, 255, 255, .03); pointer-events: none; }
/* Заливка этапов и обводка — в SVG по скруглённой фигуре машины; сам кусок прозрачный: подпись, наведение, клик. */
.dispatch-stage { position: absolute; display: flex; align-items: center; overflow: hidden; padding: 0 4px; border-radius: 5px; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; transition: opacity .12s; }
.dispatch-fills { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dispatch-fill { transition: opacity .12s; }
.dispatch-fill .q { fill: color-mix(in srgb, var(--pc) 30%, #10151d); }
.dispatch-fill .w { fill: var(--pc); }
.dispatch-fill .d { fill: color-mix(in srgb, var(--pc) 58%, #10151d); }
/* Перешейки — тоном между соседними этапами; .b — сама фигура под ними (скругления впадин). */
.dispatch-fill .qw, .dispatch-fill .b { fill: color-mix(in srgb, var(--pc) 65%, #10151d); }
.dispatch-fill .wd { fill: color-mix(in srgb, var(--pc) 79%, #10151d); }
.dispatch-stage.join-in { border-top-left-radius: 0; }
.dispatch-stage.join-out { border-bottom-right-radius: 0; }
.dispatch-stage-part { position: absolute; pointer-events: none; }
.dispatch-stage-part.entry { background: rgba(255, 255, 255, .32); }
.dispatch-stage-part.grate { background: repeating-linear-gradient(135deg, rgba(8, 12, 18, .6) 0 3px, transparent 3px 6px); }
.dispatch-stage-label { position: relative; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.dispatch-outlines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.dispatch-outline { fill: none; stroke: color-mix(in srgb, var(--pc) 45%, #fff); stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: opacity .12s; }
.dispatch-stage.lv-money { z-index: 2; box-shadow: 0 0 0 2px var(--red), 0 0 10px rgba(255, 97, 115, .5); }
.dispatch-stage.lv-process { z-index: 2; box-shadow: 0 0 0 2px var(--amber); }
.dispatch-stage.lv-check { outline: 1.5px dashed #aab4c4; outline-offset: 1px; }
.dispatch-stage.live { box-shadow: 0 0 0 2px var(--green), 0 0 12px rgba(51, 211, 155, .45); }
.dispatch-board.focus :is(.dispatch-stage, .dispatch-fill, .dispatch-outline):not(.piece) { opacity: .25; }
.dispatch-outline.piece { stroke: #fff; stroke-width: 2.5px; }
.dispatch-stage.hl { z-index: 7; outline: 2px solid #fff; outline-offset: 2px; }
.dispatch-board.only-money :is(.dispatch-stage, .dispatch-fill, .dispatch-outline):not(.car-l3),
.dispatch-board.only-process :is(.dispatch-stage, .dispatch-fill, .dispatch-outline):not(.car-l2) { opacity: .16; }
.dispatch-board.no-check .dispatch-stage.lv-check { outline: 0; }
.dispatch-post-lanes { position: absolute; pointer-events: none; color: var(--faint); font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.dispatch-grid.h .dispatch-post-lanes { top: 0; right: 8px; bottom: 0; width: 58px; }
.dispatch-grid.h .dispatch-post-lanes span { position: absolute; right: 0; display: flex; align-items: center; height: 20px; }
.dispatch-grid.h .dispatch-post-lanes .q { top: 7px; }
.dispatch-grid.h .dispatch-post-lanes .w { top: 33px; }
.dispatch-grid.h .dispatch-post-lanes .d { top: 59px; }
.dispatch-grid.h.stages .dispatch-post { padding-right: 72px; }
.dispatch-grid.v.stages .dispatch-corner, .dispatch-grid.v.stages .dispatch-heat-title, .dispatch-grid.v.stages .dispatch-post { height: 68px; }
.dispatch-grid.v.stages .dispatch-post { justify-content: flex-start; padding-top: 8px; }
.dispatch-grid.v .dispatch-post-lanes { left: 0; right: 0; bottom: 5px; height: 13px; }
.dispatch-grid.v .dispatch-post-lanes span { position: absolute; width: 30%; overflow: hidden; font-size: 9.5px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.dispatch-grid.v .dispatch-post-lanes .q { left: 3%; }
.dispatch-grid.v .dispatch-post-lanes .w { left: 35%; }
.dispatch-grid.v .dispatch-post-lanes .d { left: 67%; }
.dispatch-grid.v.stages .dispatch-nodata { top: 78px; }
.dispatch:not(.stages) .stage-only { display: none; }
.dispatch-legend .sw-q { background: color-mix(in srgb, var(--std) 30%, #10151d); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--std) 45%, #fff); }
.dispatch-legend .sw-w { background: linear-gradient(90deg, rgba(255, 255, 255, .32) 0 25%, transparent 25% 70%, rgba(8, 12, 18, .55) 70%), var(--std); }
.dispatch-legend .sw-d { background: color-mix(in srgb, var(--std) 58%, #10151d); }
.dispatch-pop-stage { padding: 5px 8px; border-radius: 6px; background: var(--panel-3); font-weight: 700; }

/* Нет видео камеры бокса: не простой, а неизвестность — серым пунктиром, без подписи-упрёка. */
.dispatch-blind { position: absolute; display: flex; align-items: center; justify-content: center; border: 1px dashed rgba(170, 180, 196, .32); border-radius: 6px; background: repeating-linear-gradient(45deg, rgba(170, 180, 196, .09) 0 2px, transparent 2px 8px); }
.dispatch-blind span { padding: 1px 7px; border-radius: 6px; background: var(--panel); color: var(--faint); font-size: 11.5px; white-space: nowrap; }
.dispatch-pay { position: absolute; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1px solid var(--money); border-radius: 50%; background: var(--panel); color: var(--money); font-size: 10px; font-weight: 800; }
.dispatch-nodata { position: absolute; padding: 8px 10px; border: 1px dashed var(--line-2); border-radius: 8px; background: var(--panel); color: var(--muted); font-size: 12px; line-height: 1.4; }
.dispatch-now { position: absolute; z-index: 9; background: #fff; pointer-events: none; }
.dispatch-now-tag { position: absolute; z-index: 10; padding: 1px 6px; border-radius: 6px; background: #fff; color: #0d1015; font-size: 11.5px; font-weight: 800; pointer-events: none; }

/* Легенда */
.dispatch-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--muted); font-size: 11.5px; }
.dispatch-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dispatch-legend i { display: inline-block; width: 20px; height: 11px; border-radius: 3px; }
.dispatch-legend .sw-std { background: var(--std); }
.dispatch-legend .sw-prem { background: var(--prem); }
.dispatch-legend .sw-rinse { background: var(--rinse); }
.dispatch-legend .sw-none { background: var(--none); }
.dispatch-legend .sw-money { background: var(--none); box-shadow: 0 0 0 2px var(--red); }
.dispatch-legend .sw-process { background: var(--none); box-shadow: 0 0 0 2px var(--amber); }
.dispatch-legend .sw-check { background: var(--none); outline: 1.5px dashed #aab4c4; outline-offset: 1px; }
.dispatch-legend .sw-idle { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .25) 0 3px, transparent 3px 6px); }
.dispatch-legend .sw-blind { border: 1px dashed rgba(170, 180, 196, .6); background: repeating-linear-gradient(45deg, rgba(170, 180, 196, .3) 0 1px, transparent 1px 4px); }
.dispatch-legend .sw-live { background: var(--std); box-shadow: 0 0 0 2px var(--green); }
.dispatch-legend .sw-pay { width: 14px; height: 14px; border: 1px solid var(--money); border-radius: 50%; }
.dispatch-legend label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.dispatch-legend input { width: auto; height: auto; padding: 0; }

/* «Требует решения» */
.dispatch-rail { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.dispatch-rail h2 { margin: 0; padding: 11px 14px 2px; font-size: 15px; font-weight: 800; }
.dispatch-rail-note { margin: 0; padding: 0 14px 9px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11.5px; }
.dispatch-cases { flex: 1; min-height: 0; overflow: auto; }
.dispatch-group { padding: 8px 14px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dispatch-group.money { color: var(--red); }
.dispatch-group.process { color: var(--amber); }
.dispatch-case { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 1px 8px; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.dispatch-case:hover, .dispatch-case:focus-visible { background: var(--panel-2); }
.dispatch-case-time { grid-row: span 2; font-weight: 800; }
.dispatch-case-where { overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.dispatch-case-text { font-size: 12.5px; font-weight: 600; }
.dispatch-case.l3 .dispatch-case-text { color: var(--red); }
.dispatch-case.l2 .dispatch-case-text { color: var(--amber); }
.dispatch-case.l1 .dispatch-case-text { color: var(--muted); font-weight: 500; }
.dispatch-check summary { padding: 9px 14px; border-top: 1px solid var(--line); color: var(--muted); font-weight: 700; cursor: pointer; }
.dispatch-empty { margin: 0; padding: 14px; color: var(--muted); }

/* Подсказка при наведении */
.dispatch-pop { position: fixed; z-index: 120; display: flex; flex-direction: column; gap: 7px; width: min(350px, calc(100vw - 16px)); padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel-3); box-shadow: 0 14px 40px rgba(0, 0, 0, .55); color: var(--text); font-size: 12.5px; pointer-events: none; }
.dispatch-pop.touch { pointer-events: auto; }
.dispatch-pop p { margin: 0; }
.dispatch-pop-head { display: flex; align-items: flex-start; gap: 10px; }
.dispatch-pop-thumb { width: 84px; height: 56px; flex: none; border-radius: 6px; object-fit: cover; background: var(--panel-2); }
.dispatch-pop-title { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.dispatch-pop-title strong { font-size: 13.5px; }
.dispatch-pop-title small, .dispatch-pop-sub { color: var(--muted); }
.dispatch-pop-title.plain { display: block; font-size: 13.5px; font-weight: 800; }
.dispatch-chip { padding: 1px 7px; border-radius: 6px; color: #fff; font-size: 11.5px; font-weight: 700; }
.dispatch-pop dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; margin: 0; }
.dispatch-pop dt { color: var(--muted); }
.dispatch-pop dd { margin: 0; }
.dispatch-money { color: var(--money); }
.dispatch-bad { color: var(--red); }
.dispatch-pop-signals { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dispatch-pop-signals li { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 7px; color: var(--muted); }
.dispatch-pop-signals li::before { content: ""; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--muted); }
.dispatch-pop-signals li.l3 { color: #ffb3bc; }
.dispatch-pop-signals li.l3::before { background: var(--red); }
.dispatch-pop-signals li.l2 { color: #ffd99a; }
.dispatch-pop-signals li.l2::before { background: var(--amber); }
.dispatch-pop-signals small { grid-column: 2; color: var(--muted); }
.dispatch-pop-live { color: var(--green); font-weight: 700; }
.dispatch-pop-note { color: var(--muted); }
.dispatch-pop-foot { padding-top: 6px; border-top: 1px solid var(--line-2); color: var(--blue); font-size: 12px; font-weight: 700; text-decoration: none; }

@media (max-width: 1280px) {
  .dispatch-kpi .full { display: none; }
  .dispatch-kpi .short { display: inline; }
}
@media (max-width: 1100px) {
  .dispatch { height: auto; }
  .dispatch-kpi-value { font-size: 18px; }
  .dispatch-work { grid-template-columns: minmax(0, 1fr); }
  .dispatch-board.v { flex: none; height: 70vh; }
  .dispatch-rail { max-height: none; }
}
@media (max-width: 880px) {
  .dispatch { padding: 8px 10px 14px; }
  /* Объект (на узких экранах его нет в верхней шапке) — во второй строке рядом с видом. */
  .dispatch-view { order: 3; margin-left: 0; }
  .dispatch-bar .report-mobile-site { order: 4; flex: 1 1 200px; width: auto; }
  .dispatch-bar .report-mobile-site select { height: 32px; min-height: 32px; padding: 0 10px; }
  .dispatch-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  /* Телефон: две строки — день; объект, момент и «Вид». Окна раскрываются на всю ширину под шапкой. */
  .dispatch-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "day day day" "site moment view"; gap: 8px 6px; }
  .dispatch-day { grid-area: day; min-width: 0; }
  .dispatch-anchor { position: static; }
  .dispatch-date-anchor, .dispatch-heading { flex: 1; min-width: 0; }
  .dispatch-date { width: 100%; font-size: 14px; }
  .dispatch-date #dispatchTitle { display: none; }
  .dispatch-date .dispatch-title-short { display: block; }
  .dispatch-icon, .dispatch-date, .dispatch-btn { height: 40px; }
  .dispatch-day > .dispatch-icon { width: 40px; }
  .dispatch-bar .report-mobile-site { grid-area: site; min-width: 0; }
  .dispatch-bar .report-mobile-site > span { display: none; }
  .dispatch-bar .report-mobile-site select { height: 40px; min-height: 40px; }
  .dispatch-moment { grid-area: moment; }
  .dispatch-view { display: none; }
  .dispatch-view-open { display: inline-flex; grid-area: view; }
  .dispatch-menu { right: 0; width: auto; }
  .dispatch-kpis { gap: 6px; }
  .dispatch-kpi { padding: 6px 8px; }
  .dispatch-kpi-label { gap: 4px; font-size: 11px; }
  .dispatch-kpi-flag { width: 20px; }
  .dispatch-kpi-value { font-size: clamp(15px, 4.6vw, 18px); }
  .dispatch-kpi-note { font-size: 10.5px; }
  .dispatch-grid.h .dispatch-post { padding-right: 6px; padding-left: 8px; }
  .dispatch-grid.h .dispatch-post-name { font-size: 12.5px; }
  .dispatch-grid.h .dispatch-post-load { font-size: 11.5px; }
  .dispatch-grid.h .dispatch-post-lanes { right: 6px; width: 40px; font-size: 9.5px; }
  .dispatch-grid.h.stages .dispatch-post { padding-right: 50px; }
  /* Две строки в полосу поста; полный текст — в подсказке поста. */
  .dispatch-grid.h .dispatch-nodata { max-width: calc(100vw - var(--head) - 56px); margin-top: 6px; padding: 5px 8px; font-size: 11px; line-height: 1.3; white-space: normal; }
  .dispatch-grid.h .dispatch-nodata span { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
@media (prefers-reduced-motion: reduce) {
  .dispatch-car { transition: none; }
}