/* Оформление СПИСКА позиций: границы строк, поля ввода, сворачивание меню.
   Вынесено из styles.css по правилу проекта (400 строк на файл). Граница по теме:
   здесь всё, что помогает не потерять строку среди 371 позиции и понять, куда писать. */

/* ── Чёткие границы строк и колонок ────────────────────────────────
   На списке из 371 позиции глаз теряет строку на первом же прокруте: числа стоят
   далеко от названия, и человек вписывает количество не в ту строку. Поэтому линия
   между позициями заметная, а поля ввода обведены — сразу видно, куда можно писать. */

/* Линия между товарами — главный разделитель списка. Владелец 05.09.2026: «выдели
   чётко линиями разделения между продуктами». В цветной версии её роль частично играл
   фон, в чёрно-белой держать строку взглядом больше нечем. */
.row { border-bottom: 1px solid var(--line-strong, rgba(0, 0, 0, .45)); }

/* Вертикальные линии — у ВСЕХ колонок сразу, правило ниже («Сетка как в Excel»).
   Раньше они стояли точечно у трёх столбцов через nth-child, и при добавлении колонки
   в середину съезжали под чужую подпись. Теперь считать номера не надо вовсе. */
.row:hover { background: var(--hover, rgba(0, 0, 0, .025)); }

.list-head { border-bottom: 2px solid var(--text); }
/* Заголовки колонок, в которые ВПИСЫВАЮТ, отмечены карандашом и выделены —
   иначе непонятно, где число из Додо, а где твоё. */
.head-input { color: var(--text); font-weight: 600; }

.row-qty {
  border: 1px solid var(--line-strong, rgba(0, 0, 0, .38));
  border-radius: 6px;
  padding: 4px 6px;
  text-align: right;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
/* Пустое поле обведено бледнее заполненного. Причина: в строке ТРИ поля ввода
   (сухой вес, остаток руками, «едет»), и почти всегда они пустые — на 371 строке
   это тысяча одинаковых рамок, среди которых не видно ни одного числа. Рамка
   не исчезает совсем: человек должен видеть, что сюда МОЖНО писать.

   ⚠️ `:not(:disabled)` здесь обязателен. Без него это правило перебивало по весу
   строку ниже, и у закрытых полей (выводится, недоступна региону) снова появлялась
   рамка — она обещает «сюда можно писать» там, где писать нельзя. */
.row-qty:placeholder-shown:not(:focus):not(:disabled) { border-color: var(--border); }
.row-qty:focus { outline: 2px solid var(--accent, #111); outline-offset: 1px; }
.row-qty.is-edited { border-color: var(--accent, #111); font-weight: 700; }
/* Столбец «Итого к заказу» — единственный, куда человек пишет ради поставщика, и в бланке
   ИВЛ он единственный залитый (светло-жёлтая колонка «Количество», FFFFFFCC). Повторяем
   это в чёрно-белом: заливка светлее фона строки и рамка заметнее, чем у остальных полей.
   Так столбец находится взглядом сразу, как в Excel, — а по нему идёт вся работа.

   Ищем столбец ПО ИМЕНИ (row-order / col-order), а не по месту в строке. До 10.09.2026
   здесь стояло `:nth-last-child(2)` — «предпоследняя ячейка»; в тот день «Едет» переехало
   правее «Итого к заказу», и правило по месту покрасило бы чужую колонку. */
.row > .row-order {
  background: var(--muted-bg, #efefef);
  border-width: 2px;
  font-weight: 600;
}
.row > .row-order:focus { background: var(--bg); }
.list-head > .col-order { text-decoration: underline; }

/* Ошибка ввода в чёрно-белом видна толщиной рамки, а не краснотой. */
.row-qty.is-invalid { border-width: 2px; border-color: var(--text); background: var(--muted-bg); }
.row-qty:disabled { background: transparent; border-color: transparent; }

/* ── Сворачивание меню ─────────────────────────────────────────────── */

.icon-button {
  font: inherit;
  line-height: 1;
  padding: 6px 9px;
  margin-right: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.icon-button:hover { background: var(--hover, rgba(0, 0, 0, .04)); }

body.sidebar-hidden .sidebar { display: none; }

/* Кнопки выбора внутри верхней плашки — например, какую колонку переносить из Excel. */
.message-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* ── Приглушённые строки: заказать нельзя ──────────────────────────
   Серым красим ровно то, что серым красит сам бланк поставщика: позиции, недоступные
   региону. Заодно так же приглушаем выводимые из ассортимента — по смыслу это то же
   самое: строку видно, а заказать её нельзя.

   Это НЕ противоречит правилу «фон строки не красим»: правило про цветные СИГНАЛЫ
   (красный, жёлтый), которые на 371 строке превращают список в светофор. Приглушение
   работает наоборот — оно убирает строку из внимания, а не притягивает его. И оно
   привычно: ровно так эти позиции выглядят в бланке. */

.row.is-blocked,
.row.is-retiring {
  background: var(--muted-bg, #efefef);
  color: var(--muted, #5e5e5e);
}
.row.is-blocked .row-name,
.row.is-retiring .row-name { color: var(--muted, #5e5e5e); }
/* Полосу слева у приглушённых не показываем: она спорит с фоном и обещает сигнал,
   которого нет — делать с этой строкой всё равно нечего. */
.row.is-blocked .row-mark { background: transparent; }

/* ── Название и подпись позиции ─────────────────────────────────────
   Перенесено из styles.css 05.09.2026: файл упёрся в границу 400 строк, а этим
   правилам место здесь — они про то, как читается строка списка. */

/* Место справа — под крестик «убрать». Он стоит абсолютно, поэтому колонок в сетке
   не прибавляется и список из 371 строки не сдвигается ни на пиксель. */
.row-name-box { min-width: 0; position: relative; padding-right: 90px; }

/* Название переносится на вторую строку, а не обрезается многоточием. Хвост у этих
   названий несёт смысл — «новинка», «10уп*0,3кг», «ЗАКАЗЫВАТЬ ТОЛЬКО ПИЦЦЕРИЯМ ЦФО» —
   и исчезал первым. Две строки максимум: третья растянула бы список из 371 позиции. */
/* Название КРУПНЕЕ и в одну строку. Владелец 07.09.2026: «наименования слишком
   маленькие, и строчки у них неоправданно длинные. Лучше сделать больше и короче».
   Прежние две строки заводились ради хвоста («новинка», «10уп*0,3кг», «ЗАКАЗЫВАТЬ
   ТОЛЬКО ПИЦЦЕРИЯМ ЦФО») — он никуда не делся: предупреждение вытаскивается в подпись
   отдельной пометкой, а полное название осталось в подсказке при наведении. */
.row-name {
  font-size: 15px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Подпись — одной строкой, полный текст в подсказке. Исключение: строка с ПРОБЛЕМОЙ
   (класс is-full) не обрезается никогда — там это сигнал, а не справка, и прятать его
   под многоточие значит спрятать причину, по которой заказ не считается. */
.row-note {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-note.is-full { white-space: normal; }
/* Подпись проблемы в чёрно-белом выделяется начертанием, а не цветом. */
.row.is-problem .row-note { color: var(--text); font-style: italic; }

/* Числа КРУПНЕЕ и цветом текста, а не серым. Владелец 07.09.2026: «цифры на складе
   и расход маленькие и непонятные что значат вообще». Цифры выровнены по разрядам
   (tabular-nums), у остатка рядом мелко стоит единица. */
.row-stock,
.row-rate,
.row-need {
  font-size: 14px;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cell-unit {
  margin-left: 3px;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: normal;
}

/* ── Полоска дней окна с множителями ─────────────────────────────── */
.day-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 2px; font-size: 12px; }
.day-strip-hint { color: var(--muted); margin-right: 4px; }
.day-cell { display: flex; align-items: center; gap: 4px; }
.day-cell.is-weekend span { color: var(--muted); }
.day-cell.is-set span { font-weight: 600; }
.day-cell input { width: 44px; padding: 2px 4px; font: inherit; font-size: 12px; border: 1px solid var(--border); border-radius: 4px; }
.day-cell input.is-invalid { border-color: var(--danger); }
.row-sent { font-style: italic; }

/* Три знака — три РАЗНЫЕ формы, а не три цвета (кабинет чёрно-белый):
   сплошная чёрная полоса — «нужно заказать»; полоса в штриховку — «проблема»;
   светло-серая — «выводится». В цвете их различал оттенок, здесь различает рисунок,
   поэтому знаки не сливаются ни на слабом мониторе, ни на печати. */
.row-mark { align-self: stretch; background: transparent; }
.row.is-needed .row-mark { background: var(--danger); }
.row.is-problem .row-mark {
  background: repeating-linear-gradient(
    45deg, var(--text) 0 2px, transparent 2px 5px
  );
}
.row.is-retiring .row-mark { background: var(--muted); }
/* ↑ Полоса «выводится» ТЕМНЕЕ фона строки. До 08.09.2026 она была того же цвета, что
   и серый фон приглушённой строки (--muted-bg), — то есть знака на экране не было
   вовсе, а «выводится» и «не возят в регион» выглядели одинаково. Найдено на ревью. */

/* ── Легенда знаков ────────────────────────────────────────────────
   Образцы полос рисуются теми же правилами, что и в строке, — иначе легенда описывала
   бы не то, что на экране. */
.legend { margin: 6px 0 4px; font-size: 12px; color: var(--muted); }
.legend summary { cursor: pointer; width: max-content; }
.legend summary:hover { color: var(--text); }
.legend-row { display: flex; align-items: center; gap: 8px; padding: 3px 0 0 4px; color: var(--text); }
.legend-note { color: var(--muted); }
.legend-mark { display: inline-block; width: 3px; height: 16px; flex: none; background: transparent; }
.legend-mark.is-needed { background: var(--danger); }
.legend-mark.is-problem {
  background: repeating-linear-gradient(45deg, var(--text) 0 2px, transparent 2px 5px);
}
.legend-mark.is-retiring { background: var(--muted); }
.legend-mark.is-blocked { background: transparent; border-left: 3px solid var(--muted-bg); }

/* ── Колонки расчёта в строке ──────────────────────────────────── */

.row-rate { font-size: 12px; color: var(--muted); text-align: right; }
.row-need { font-size: 12px; color: var(--muted); text-align: right; }
/* Нехватку выделяем ТЕКСТОМ и полосой слева, фоном её не сигналим:
   на 371 строке цветной фон превращает список в светофор, где не виден ни один сигнал. */
.row-need.is-needed-text { color: var(--text); font-weight: 600; }
.row-pack-input { width: 100%; }

/* Подпись под заголовком «Итого к заказу». Самая важная фраза экрана — «уходит
   поставщику» — раньше жила только в подсказке под мышью, то есть её никто не видел. */
.head-note { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }


/* ── Кнопка «убрать» ────────────────────────────────────────────────
   Стоит СБОКУ, в последней ячейке рядом с единицей (владелец 07.09.2026: «кнопка
   убрать стоит внизу, еле видно, а можно сбоку»). Отдельной колонки не заводим —
   она отняла бы ширину у названия на всех 371 строке; крестик делит ячейку с единицей.

   Крестик, а не слово: действие редкое, а места в ячейке мало. Проявляется заметнее
   при наведении на строку — так он не тянет на себя взгляд в спокойном списке. */
.row-remove {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  color: var(--border);
  cursor: pointer;
}
.row:hover .row-remove { color: var(--muted); }
.row-remove:hover,
.row-remove:focus { color: var(--text); }

/* Расход, посчитанный НАМИ по фактам за две недели, отличается от среднего с экрана
   Додо пунктиром снизу — не цветом (кабинет чёрно-белый). Иначе две соседние строки
   с числами из разных источников выглядят одинаково, и разницу видно только наведя
   мышь на каждую. */
.row-rate.is-own-rate {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* Подпись «на полке меньше на 3,7 кг, чем по Додо». Это ответ на вопрос владельца
   «какая разница реальна», поэтому она не приглушена, а выделена начертанием. */
.row-diff { font-style: italic; }
.row-diff[hidden] { display: none; }

/* ── Сетка как в Excel: линии между ВСЕМИ колонками и строками ──────
   Требование владельца 07.09.2026: «надо чтоб как в XL было чёткое разделение всех
   позиций и списков как вертикально, так и горизонтально». До этого вертикальные линии
   стояли только у трёх колонок из одиннадцати, и глаз терял, к какой подписи относится
   число, — ровно та беда, ради которой в Excel есть сетка.

   Линии рисуем у ЯЧЕЙКИ, а не у поля ввода: у полей своя рамка, и если совместить,
   получится двойная черта. Поэтому у ячеек с полями линия идёт по краю ячейки,
   а поле внутри стоит с отступом. */

.list-head,
.rows { border-left: 1px solid var(--border); }

.row > *,
.list-head > * {
  border-right: 1px solid var(--border);
  padding-right: 8px;
  min-width: 0;
}
/* Полоса-знак слева — не колонка, а сигнал: линия у неё лишняя. */
.row > .row-mark { border-right: 0; padding-right: 0; }

/* Поля ввода стоят в ячейке целиком, чтобы линия сетки читалась как граница столбца,
   а не как вторая рамка вокруг поля. */
.row > input.row-qty { margin-right: 0; width: 100%; }

/* Горизонтальная линия под каждой строкой уже есть (.row выше), здесь только шапка:
   она отделяется толще — как строка заголовков в Excel. */
.list-head { border-bottom: 2px solid var(--text); }

/* ── Условия заказа ────────────────────────────────────────────── */

.calc-bar { gap: 8px 12px; flex-wrap: wrap; align-items: flex-end; }

.calc-bar .field { display: flex; flex-direction: column; gap: 1px; font-size: 11px; color: var(--muted); }
.calc-bar .field input {
  font: inherit; padding: 4px 7px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg); color: var(--text);
}
.calc-bar .field-narrow input { width: 72px; }

.calc-bar .switch { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.calc-bar .switch input { margin: 0; }

.days-note { font-size: 12px; color: var(--muted); }

/* Пометка «выводим» — рядом с крестиком, в ячейке названия. Выглядит подписью, а не
   кнопкой: действие редкое и не должно спорить взглядом с полями ввода. Поставленная
   пометка становится заметной (рамка и цвет текста) — по ней видно, что строка выключена
   из заказа осознанно, а не сама по себе. */
.row-retire {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  padding: 1px 5px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  font: inherit;
  font-size: 11px;
  line-height: 1.3;
  color: var(--border);
  cursor: pointer;
}
.row:hover .row-retire { color: var(--muted); }
.row-retire:hover,
.row-retire:focus { color: var(--text); border-color: var(--border); }
.row-retire.is-on {
  color: var(--text);
  border-color: var(--text);
  font-weight: 600;
}

/* Расход, посчитанный по слишком короткому окну сбора. Число показываем — оно верное,
   но подписываем числом дней и снимаем «уверенное» начертание: по трём дням среднее
   шумит, а на экране выглядит так же солидно, как по двум неделям.
   Найдено суперревью 07.09.2026. */
.row-rate.is-few-days { font-style: italic; }

/* ── Плашки над списком: чек-лист перед заказом и тема письма ─────
   Здесь, а не в styles.css: тот упёрся в потолок 400 строк. */
/* ── Чек-лист перед заказом ──────────────────────────────────────── */
.checklist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin: 8px 0 4px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}
.checklist-title { font-weight: 600; }
.checklist-item { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.checklist-item.is-done { color: var(--muted); text-decoration: line-through; }
.checklist .link { margin-left: auto; }

/* Тема письма после скачивания бланка. */
.mail-subject { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip-small { padding: 2px 8px; font-size: 12px; }

/* Сетка для второй колонки «Едет», как и все остальные варианты, переехала 10.09.2026
   в styles-grid.css. */
.head-link { margin-left: 4px; font-size: 11px; }
.is-overdue { text-decoration: underline dotted; }


/* ── Несколько ячеек сразу ────────────────────────────────────────
   Выделенные поля — как в Excel: рамка потолще и лёгкая заливка, чтобы диапазон был
   виден целиком, а не по одной ячейке. Цвета нет: кабинет чёрно-белый. */
.row-qty.is-selected {
  border-color: var(--text);
  border-width: 2px;
  background: var(--muted-bg, #efefef);
}
/* Квадратик протягивания в правом нижнем углу поля — тот самый, за который в Excel
   тянут число вниз. Появляется только у поля под курсором. */
.row { position: relative; }   /* слой для маркера протягивания */
.cell-fill-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--text);
  cursor: crosshair;
  z-index: 3;
  touch-action: none;
}