/* frontend/css/chestny_znak.css
   Горизонтальные отступы даёт .app-scroll-inner / .app-footer-inner. */

/* AI-2995 iter 3.3 (живое замечание пользователя «кнопка уезжает вниз»):
   экран прижат к вьюпорту — список скроллится ВНУТРИ .app-scroll, нижняя
   панель с кнопкой всегда видна. Тот же паттерн, что #screen-consumables в
   iiko.css: shell даёт секции только min-height:100dvh, из-за чего длинный
   список раздувал документ и футер оказывался под ним, за экраном. */
#screen-chestny-znak.is-active.uses-shell {
  height: 100dvh; min-height: 0; max-height: 100dvh;
}

.cz-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.cz-loading, .cz-error, .cz-empty { padding: 24px 0; color: var(--ink-muted); text-align: center; }
.cz-hint { padding-bottom: 8px; color: var(--ink-muted); font-size: 13px; }

/* Шапка списка: «выбрать все» + подпись колонки количества */
.cz-listhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; border-bottom: 1.5px solid var(--hairline-strong, var(--hairline));
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted);
}
.cz-selectall { display: flex; align-items: center; gap: 8px; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); font-weight: 600; }
.cz-listhead-qty { padding-right: 8px; }

/* Список — построчная таблица */
.cz-list { display: flex; flex-direction: column; }
.cz-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
}
.cz-row:hover { background: var(--surface-raised); }
.cz-row-dim { opacity: .55; }
.cz-row-body { flex: 1; min-width: 0; }
.cz-row-name { font-weight: 600; }
.cz-row-sub { color: var(--ink-muted); font-size: 12px; margin-top: 2px; }
.cz-qty { width: 88px; flex: 0 0 auto; text-align: right; }

/* Нижняя панель: причина + документ + кнопка */
.cz-controls { margin-bottom: 12px; }
.cz-mt { margin-top: 12px; }
/* AI-3083 iter2 (живое замечание «нижний блок в одну строку»): первичный
   документ (номер) + дата — ОДИН ряд. Прежние правила целили `.field`/
   `.cz-doc-field-number`, которых в текущей разметке нет (там прямые `.input`,
   см. populateControls) — sizing не применялся, инпуты переносились/жались.
   Целим прямые `.input`, тянем поровну, min-width:0 разрешает ужиматься,
   без flex-wrap — гарантированно одна строка. */
.cz-doc-fields { display: flex; gap: 8px; margin-top: 4px; }
.cz-doc-fields > .input { flex: 1 1 0; min-width: 0; }

/* Селект причины: убираем native-стрелку (жалась к краю) на кастомный шеврон */
.cz-select {
  appearance: none; -webkit-appearance: none;
  min-height: 52px;              /* ровно как у number/date (.input) */
  padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23777' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.cz-select:focus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23777' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Pop-up статуса поверх экрана */
.cz-popup {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0, 0, 0, .35);
}
.cz-popup-card {
  width: 100%; max-width: 380px;
  background: var(--surface); border-radius: var(--r-xl);
  padding: 24px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
}
.cz-popup-icon {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.cz-popup-ok { background: var(--success-bg); color: var(--success); }
.cz-popup-err { background: var(--surface-sunken); color: var(--ink-muted); }
/* Нейтральный исход (напр. отмена подписи пользователем) — не ошибка,
   поэтому используем тот же приглушённый тон, что и .cz-popup-err, но
   отдельным классом (AI-2898): смысл другой, вид сознательно не «красный». */
.cz-popup-neutral { background: var(--surface-sunken); color: var(--ink-muted); }
.cz-popup-title { font-size: 18px; font-weight: 700; color: var(--ink); }
.cz-popup-sub { font-size: 13px; color: var(--ink-muted); }
.cz-popup-summary { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 4px; }
.cz-popup-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 16px; }
.cz-popup-actions .btn { width: 100%; }

/* AI-2995 iter 3: экран подтверждения перед подписью (план документов) —
   шире обычного popup-card (список позиций может быть длинным), содержимое
   слева выровнено (обычный cz-popup-card центрирует текст, план — таблица). */
.cz-popup-card-wide { max-width: 520px; text-align: left; }
.cz-popup-card-wide .cz-popup-title,
.cz-popup-card-wide .cz-popup-sub { text-align: center; align-self: stretch; }
.cz-confirm-list {
  width: 100%; max-height: 40vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 8px;
}
.cz-confirm-doc {
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: 8px 10px;
}
.cz-confirm-doc-head { font-weight: 600; font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.cz-confirm-item { font-size: 12px; color: var(--ink-muted); padding: 2px 0; }

/* Browser-auth флоу (ADR-004): needs_auth / плагин не установлен / ошибка входа.
   Только для провайдера true_api — рядовые пользователи (mock) это не видят. */
.cz-authgate {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 40px 8px;
}
.cz-authgate-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.cz-authgate-sub { font-size: 13px; color: var(--ink-muted); max-width: 320px; }
.cz-authgate .btn { margin-top: 6px; width: 100%; max-width: 280px; }
/* .cz-authgate-neutral — hook для нейтральных sign-состояний (напр. CANCELLED,
   AI-2898): без err-акцента; сейчас совпадает с базовым видом .cz-authgate. */

/* AI-2967 iter 3: строка с сохранённым сертификатом + ссылка смены (в
   renderNeedsAuth, рядом с кнопкой «Войти по сертификату»). */
.cz-cert-current { font-size: 12px; color: var(--ink-muted); }
.cz-cert-change {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; font-size: 12px; color: var(--accent, var(--ink));
  text-decoration: underline; cursor: pointer;
}

/* AI-3041: дропдаун переключения активной товарной группы — над списком,
   до шапки таблицы. Не рендерится вовсе (см. renderList/pgsWithItems), если
   у точки настроена только одна товарная группа — нечего переключать. */
.cz-gtin-pg-row { margin-bottom: 10px; }

/* AI-2995: разбивка ОСУ-остатка по поставкам («По товарам», true_api-only) —
   ссылка-переключатель внутри .cz-row-sub + развёрнутая панель поставок. */
.cz-row-expand {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; font-size: 12px; color: var(--accent, var(--ink));
  text-decoration: underline; cursor: pointer;
}
.cz-delivery-panel {
  padding: 4px 0 10px 32px;  /* отступ слева = ширина чекбокса родительской строки */
  border-bottom: 1px solid var(--hairline);
}
.cz-delivery-panel-head { font-size: 12px; color: var(--ink-muted); padding-bottom: 6px; }
.cz-delivery-list { display: flex; flex-direction: column; }
.cz-delivery-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 6px 0;
}
.cz-delivery-row-dim { opacity: .55; }
.cz-delivery-row-body { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cz-delivery-row-date { font-weight: 600; font-size: 13px; }
.cz-delivery-row-qty { font-size: 12px; color: var(--ink-muted); }
.cz-delivery-row-reason { font-size: 12px; color: var(--danger, #dc2626); flex-basis: 100%; }
/* AI-2995 iter 3 (см. ADR-010): строка-остаток «без установленной даты
   поступления» — ИНФОРМАЦИОННАЯ, без чекбокса. Пунктирная граница + приглушённый
   фон визуально отделяют её от обычных (хотя бы датированных) поставок —
   свой класс проблем, не просто «недоступна». */
.cz-delivery-row-remainder {
  padding: 8px 10px; margin: 4px 0;
  border: 1px dashed var(--hairline-strong, var(--hairline));
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}
.cz-delivery-row-remainder .cz-delivery-row-date { color: var(--ink-muted); font-weight: 400; font-style: italic; }
.cz-delivery-row-remainder .cz-delivery-row-reason { color: var(--ink-muted); }
/* Контрольная сумма панели — визуально сходится с "Остаток по данным ЧЗ" в
   шапке (см. deliveryPanelHtml), включая remainder. */
.cz-delivery-panel-total { font-size: 12px; color: var(--ink-muted); padding-top: 6px; border-top: 1px solid var(--hairline); margin-top: 4px; }
/* AI-2995 iter 3: количество в true_api-режиме — текстовое отображение
   (свободный ввод убран, все выводы идут через бакеты), тот же размер/
   выравнивание, что и у убранного input.cz-qty. */
.cz-qty-display { width: 88px; flex: 0 0 auto; text-align: right; font-size: 14px; color: var(--ink); }