/* «Загрузка» нескольких точек — обзор (этап 7; Р526/Р528 — предложение 7, Р539; макеты 025 §3 и 026): карточки и
   таблица, проблемные сверху — красная рамка («обещано позже, чем успеваем» или новые заказы не принимаются), жёлтая —
   «требуют взгляда»; «← Все точки» и соседние точки у экрана точки; красная точка у «Загрузки» в шапке. Плотность —
   этапа 1: кнопки и строки — токенами `--ops-*` (на телефоне и сенсорном экране — 44). Компьютер и планшет: обзор — один
   экран, шапка обзора и поиск стоят на месте, список листается сам; телефон — листается страница (шапка там в две
   строки). Таблица не уже 760: теснее — листается вбок внутри списка, страница — нет. Этап 8 (Р528, Р537): кнопка
   «Ограничить несколько точек…» в шапке обзора, строки «Общие ограничения» со «Снять у всех» над списком (сами не растут)
   и окно ограничения с подтверждением. Размеры — только токенами, цвета — только ролями темы: сторож
   tests/design/test_tokens_guard.py читает и этот файл. */

:root {
  --ops-lov-card: 330px;   /* карточка точки не уже (макет 026: три в ряд на 1366, четыре — на 1440 и шире) */
  --ops-lov-table: 760px;  /* таблица обзора не уже — теснее листается вбок внутри списка */
  --ops-lov-name: 280px;   /* столбец «Точка»: название, адрес и тревога — по строке */
}

/* ── Красная точка у «Загрузки» в шапке ──────────────────────────────────────────────────────────────────────────── */
.staff-sections__dot {
  flex: none; width: var(--space-2); height: var(--space-2); margin-left: var(--space-1); border-radius: var(--radius-pill);
  background: var(--err);
}

/* ── Обзор ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
.oc-lov { display: flex; flex-direction: column; gap: var(--ops-gap); min-width: 0; }
.oc-lov__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-width: 0; }
.oc-lov__titles { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); min-width: 0; }
.oc-lov__titles h1 { margin: 0; font-size: var(--text-lg); line-height: var(--leading-title); white-space: nowrap; }
.oc-lov__titles h1:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.oc-lov__titles .oc-note { font-size: var(--ops-text-sm); }
.oc-lov__views .segments__item { gap: var(--space-1); padding-inline: var(--ops-pad); font-size: var(--ops-text); }
.oc-lov__views .segments__item svg { width: var(--icon-sm); height: var(--icon-sm); }
.oc-lov__search { flex: none; height: var(--ops-ctl); min-width: 0; }
.oc-lov__search input { font-size: var(--ops-text); }
/* Рамка фокуса — у поля поиска целиком (`.search:has(…)`), у самого ввода второй нет. */
#load .oc-lov__search input:focus-visible { outline: none; }
.oc-lov__list { min-width: 0; }
.oc-lov__none { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.oc-lov__muted { color: var(--muted); }
.oc-lov__warn { color: var(--warn); font-weight: var(--weight-semibold); }

/* ── Карточки ── */
.oc-lov__cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ops-lov-card)), 1fr)); align-items: start;
  gap: var(--ops-gap);
}
.oc-lov__card {
  display: grid; gap: var(--space-1); min-width: 0; padding: var(--space-2) var(--ops-pad); border: 1px solid var(--border);
  border-radius: var(--ops-radius); background: var(--panel); font-size: var(--ops-text-sm);
}
.oc-lov__card.is-attention { border-color: var(--warn); }
.oc-lov__card.is-late { border-color: var(--err); box-shadow: inset 2px 0 0 var(--err); }
.oc-lov__card-top { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.oc-lov__card-top h2 {
  flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--ops-text-no); font-weight: var(--weight-semibold);
  line-height: var(--leading-title); overflow-wrap: anywhere;
}
.oc-lov__mode {
  flex: none; padding: 0 var(--space-2); border-radius: var(--radius-pill); font-size: var(--ops-text-xs);
  font-weight: var(--weight-semibold); line-height: var(--ops-chip); white-space: nowrap;
}
.oc-lov__mode.is-auto { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.oc-lov__mode.is-manual { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.oc-lov__alarm {
  display: flex; align-items: center; gap: var(--space-1); margin: 0; padding: var(--space-1) var(--space-2);
  border-radius: var(--ops-ctl-radius); background: color-mix(in srgb, var(--err) 9%, transparent); color: var(--err);
  font-weight: var(--weight-semibold); overflow-wrap: anywhere;
}
.oc-lov__alarm svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); }
.oc-lov__unknown { margin: 0; color: var(--warn); }
/* Имя строки — не шире половины карточки (10.11: зона «ЗОНА 2 от 1000р - бесплатно, среднее время доставки 60 мин» при
   `max-content` растягивала колонку шире карточки, и ответ рассыпался по букве в строку): длинное переносится само. */
.oc-lov__see { display: grid; grid-template-columns: fit-content(45%) minmax(0, 1fr); gap: 2px var(--space-3); margin: 0; }
.oc-lov__see dt { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.oc-lov__see dd { margin: 0; overflow-wrap: anywhere; }
.oc-lov__see small, .oc-lov__table small { color: var(--muted); font-size: var(--ops-text-xs); }
.oc-lov__facts { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.oc-lov__fact {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--ops-chip); padding: 0 var(--space-2);
  border: 1px solid var(--border2); border-radius: var(--radius-pill); font-size: var(--ops-text-xs);
}
.oc-lov__fact svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--gold); }
.oc-lov__fact.is-warn { border-color: var(--warn); color: var(--warn); }
.oc-lov__fact.is-warn svg { color: var(--warn); }
.oc-lov__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-2);
  padding-top: var(--space-1); border-top: 1px solid var(--border2);
}
.oc-lov__limits { flex: 1 1 0; min-width: 0; margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.oc-lov__limits b { color: var(--ink); font-weight: var(--weight-semibold); }
.oc-lov__foot .btn { flex: none; gap: var(--space-1); }
.oc-lov__foot .btn svg { width: var(--icon-sm); height: var(--icon-sm); }

/* ── Таблица ── */
.oc-lov__list[data-load-shown="table"] {
  border: 1px solid var(--border); border-radius: var(--ops-radius); background: var(--panel); overflow-x: auto;
}
.oc-lov__table { width: 100%; min-width: var(--ops-lov-table); border-collapse: collapse; font-size: var(--ops-text); }
.oc-lov__table th {
  position: sticky; top: 0; z-index: var(--z-raised); height: var(--ops-th); padding: 0 var(--space-2); background: var(--panel);
  border-bottom: 1px solid var(--border); color: var(--muted); font-size: var(--ops-text-xs); font-weight: var(--weight-semibold);
  text-align: left; white-space: nowrap;
}
.oc-lov__table td {
  height: var(--ops-trow); padding: 2px var(--space-2); border-bottom: 1px solid var(--border2); vertical-align: middle;
  white-space: nowrap;
}
.oc-lov__table tbody tr { cursor: pointer; }
.oc-lov__table tbody tr:last-child td { border-bottom: 0; }
.oc-lov__table tbody tr:hover td { background: var(--tint); }
.oc-lov__table tr.is-late td { background: color-mix(in srgb, var(--err) 6%, transparent); }
.oc-lov__table tr.is-late td:first-child { box-shadow: inset 2px 0 0 var(--err); }
.oc-lov__table tr.is-attention td:first-child { box-shadow: inset 2px 0 0 var(--warn); }
.oc-lov__table td:first-child { width: var(--ops-lov-name); max-width: var(--ops-lov-name); white-space: normal; }
.oc-lov__name { display: grid; gap: 0; line-height: var(--leading-clamp); }
.oc-lov__name b { overflow-wrap: anywhere; }
.oc-lov__table small.oc-lov__alarm-text { color: var(--err); font-weight: var(--weight-semibold); white-space: normal; }
.oc-lov__go { width: var(--ops-ctl); text-align: right; }
.oc-lov__go .icon-btn svg { width: var(--icon-sm); height: var(--icon-sm); }

/* ── «← Все точки» и соседние точки у экрана точки ── */
.oc-load__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-width: 0; }
.oc-load__crumbs .btn { gap: var(--space-1); font-size: var(--ops-text); font-weight: var(--weight-semibold); }
.oc-load__crumbs .btn svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); }
.oc-load__neighbours { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1) var(--space-3); margin-left: auto; min-width: 0; }
.oc-load__goto span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── «Ограничить несколько точек…» и «Общие ограничения» (этап 8; Р528, Р537) ── */
.oc-lov__bulk-open { flex: none; gap: var(--space-1); }
.oc-lov__bulk-open svg { width: var(--icon-sm); height: var(--icon-sm); }
/* Строки общих ограничений стоят над списком и сами не растут: больше трёх — листаются внутри. */
.oc-lov__bulks { display: grid; flex: none; gap: var(--space-1); max-height: calc(var(--ops-trow) * 3 + var(--space-2)); overflow: auto; }
.oc-lov__bulk {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); min-width: 0; padding: 2px var(--ops-pad);
  border: 1px solid var(--warn); border-radius: var(--ops-ctl-radius); background: var(--panel); font-size: var(--ops-text-sm);
}
.oc-lov__bulk-what svg {
  display: inline-block; width: var(--icon-sm); height: var(--icon-sm); margin-right: var(--space-1); color: var(--warn);
  vertical-align: -2px;
}
.oc-lov__bulk-what { min-width: 0; overflow-wrap: anywhere; }
.oc-lov__bulk-what b { font-weight: var(--weight-semibold); }
.oc-lov__bulk-where { flex: 1 1 0; min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.oc-lov__bulk .btn { flex: none; gap: var(--space-1); }
.oc-lov__bulk .btn svg { width: var(--icon-sm); height: var(--icon-sm); }

/* Окно: шаг 1 — что, как, срок, причина, точки; шаг 2 — что изменится у каждой точки. Заголовок и низ стоят на месте,
   листается только середина. */
.dialog.oc-bulk { display: flex; flex-direction: column; overflow: hidden; }
.oc-bulk .dialog__head, .oc-bulk .dialog__foot { flex: none; }
.oc-bulk .dialog__body.oc-bulk__body {
  flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; gap: var(--space-3); font-size: var(--ops-text);
}
.oc-bulk .input, .oc-bulk .select { height: var(--ops-ctl); font-size: var(--ops-text); }
.oc-bulk__field { display: grid; gap: var(--space-1); min-width: 0; }
.oc-bulk__label { font-weight: var(--weight-semibold); }
.oc-bulk__about { margin: 0; color: var(--muted); font-size: var(--ops-text-sm); }
.oc-bulk__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; }
.oc-bulk__row .select, .oc-bulk__row .input { flex: 1 1 calc(var(--space-8) * 3); min-width: 0; max-width: 100%; }
.oc-bulk__row .btn { margin-left: auto; }
.oc-bulk__segments { display: flex; width: 100%; min-height: 0; }
.oc-bulk__segments .segments__item { min-height: var(--ops-ctl); padding-inline: var(--ops-pad); font-size: var(--ops-text); }
.oc-bulk__terms { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.oc-bulk__terms .chip { min-height: var(--ops-ctl); padding: 0 var(--space-3); font-size: var(--ops-text); }
.oc-bulk__until { display: inline-flex; align-items: center; gap: var(--space-1); }
.oc-bulk__clock { width: calc(var(--space-8) * 2); }
.oc-bulk__points {
  display: grid; max-height: calc(var(--ops-row) * 6); overflow: auto; padding: 2px var(--space-2);
  border: 1px solid var(--border); border-radius: var(--ops-ctl-radius); overscroll-behavior: contain;
}
.oc-bulk__point { min-height: var(--ops-row); gap: var(--space-2); }
.oc-bulk__point[hidden] { display: none; }
.oc-bulk__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); min-width: 0; }
.oc-bulk__name small { color: var(--muted); font-size: var(--ops-text-sm); }
.oc-bulk__alert {
  display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3);
  border-radius: var(--ops-ctl-radius); background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn);
  font-weight: var(--weight-semibold);
}
.oc-bulk__alert.is-err { background: color-mix(in srgb, var(--err) 10%, transparent); color: var(--err); }
.oc-bulk__alert svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); margin-top: 2px; }
.oc-bulk__plan { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.oc-bulk__plan li {
  display: grid; grid-template-columns: var(--icon-sm) minmax(0, 1fr); gap: var(--space-2); padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border2);
}
.oc-bulk__plan li:last-child { border-bottom: 0; }
.oc-bulk__plan li > svg { width: var(--icon-sm); height: var(--icon-sm); margin-top: 2px; color: var(--ok); }
.oc-bulk__plan li.is-off > svg { color: var(--muted); }
.oc-bulk__plan-text { display: grid; gap: 0; min-width: 0; overflow-wrap: anywhere; }
.oc-bulk__plan-text small { color: var(--muted); font-size: var(--ops-text-sm); }
.oc-bulk__off { color: var(--muted); }
.oc-bulk__said { margin: 0; color: var(--err); font-size: var(--ops-text-sm); }
.oc-bulk__foot { justify-content: flex-end; gap: var(--space-2); padding-block: var(--space-3); }
.oc-bulk__foot .btn { gap: var(--space-1); }
.oc-bulk__foot .btn svg { width: var(--icon-sm); height: var(--icon-sm); }

/* ── Компьютер и планшет: обзор — один экран, список листается сам ── */
@media (min-width: 768px) {
  #load.is-overview {
    display: flex; flex-direction: column; height: calc(100dvh - var(--ops-bar)); min-height: 0; overflow: hidden;
    padding-bottom: var(--ops-gap);
  }
  /* «Что вижу» сужен (этап 6, Р522) — под шапкой полоса «Видна не вся сеть» (sees.css, `--ops-strip`): обзор — без неё. */
  body:has(> #staff-sees:not([hidden])) #load.is-overview { height: calc(100dvh - var(--ops-bar) - var(--ops-strip)); }
  #load.is-overview > .oc-lov { flex: 1 1 0; min-height: 0; }
  #load.is-overview .oc-lov__list { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
  #load.is-overview .oc-lov__list[data-load-shown="table"] { flex: 0 1 auto; }
}
/* Планшет (768–1099): шапка в палец — `--ops-bar` и ещё её нижняя линия (на компьютере линия уже внутри 44): без неё
   обзор вылезал за край на 1 точку (этап 6, замер 1024×768). */
@media (min-width: 768px) and (max-width: 1099px) {
  #load.is-overview { height: calc(100dvh - var(--ops-bar) - 1px); }
  body:has(> #staff-sees:not([hidden])) #load.is-overview { height: calc(100dvh - var(--ops-bar) - var(--ops-strip) - 1px); }
}

/* ── Телефон: карточки во всю ширину, кнопки в палец ── */
@media (max-width: 767px) {
  .oc-lov__views { display: none; }
  .oc-lov__titles h1 { white-space: normal; }
  .oc-lov__search { height: var(--tap); }
  .oc-lov__search input { font-size: var(--text-field); }
  .oc-lov__foot .btn { min-height: var(--tap); }
  .oc-load__neighbours { justify-content: flex-start; margin-left: 0; }
  .oc-load__goto { max-width: 100%; }
  .oc-lov__bulk-open, .oc-lov__bulk .btn { min-height: var(--tap); }
  .oc-lov__bulks { max-height: none; }
  .oc-bulk__segments .segments__item, .oc-bulk__terms .chip, .oc-bulk__point, .oc-bulk__foot .btn,
  .oc-bulk__row .btn { min-height: var(--tap); }
  .oc-bulk .input, .oc-bulk .select { height: var(--tap); font-size: var(--text-field); }
  .oc-bulk__points { max-height: none; }
  /* Две кнопки окна — рядом поровну («Отмена» / «Изменить» и главная), а не одна над другой. */
  .oc-bulk .oc-bulk__foot > .btn:first-child { grid-column: auto; }
}