/* [2026-09-06][CLX][КП-V1-W5-DRAFT] Экран черновика КП и правки списка КП.
 *
 * ЧТО ЭТО. Стили ТОЛЬКО для экрана подборки (`client/js/pages/kp-draft.js`) и для того
 * немногого, что добавлено в список КП (`client/js/pages/quotes.js`). Каркас берётся из
 * `components.css` — `.detail-card`, `.calc-field`, `.input`, `.select`, `.state-box`,
 * `.modal-overlay/.modal`, `.quotes-toolbar`. Здесь только то, чего там нет.
 *
 * 🪤 ПОЧЕМУ НЕ `.quote-item`. В `components.css:1514` уже живёт `.quote-item` — флекс-строка
 * старого редактора КП из пяти полей. Раскладка волны 5 — сетка из восьми колонок с органами
 * выбора цвета и подключения. Дописывать в чужой класс = менять старый экран, который ещё
 * работает, пока выключатель `kp_v1_enabled` в `false`. Поэтому весь новый экран живёт на
 * своём префиксе `kp-`, и ни одно правило отсюда не задевает старую разметку.
 *
 * 🪤 ИМЕНА `cat-sr__kp-*` В ВИТРИНЕ ЗАНЯТЫ «ключевыми параметрами», это не КП
 * (`PORTAL-INVENTORY §3.2`). Здесь префикс `kp-` без `cat-sr__`, пересечения нет.
 *
 * Мобильной раскладки НЕТ намеренно — решение владельца 30.07 («мобильную адаптацию не
 * делать и не предлагать до запроса»). Проверено на 1440×900 и 1280×800.
 */

/* ── Шапка черновика ─────────────────────────────────────────────────────── */

.kp-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.kp-head__num {
  font-family: var(--font-data);
  font-size: var(--text-lg);
  font-weight: 600;
}

.kp-head__num--empty {
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--c-text-muted);
}

.kp-head__series {
  font-size: var(--text-base);
  color: var(--c-text-secondary);
}

.kp-head__spacer { flex: 1; }

.kp-head__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.kp-head__status .select { min-width: 150px; }

/* ── Вид документа ───────────────────────────────────────────────────────── */

.kp-kind {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

.kp-kind__btn {
  padding: 6px 16px;
  font-size: var(--text-base);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  background: transparent;
  color: var(--c-text-secondary);
  cursor: pointer;
  transition: all var(--tr-fast);
}

.kp-kind__btn:hover { border-color: var(--c-primary); color: var(--c-primary); }

.kp-kind__btn.is-on {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--text-on-accent);
}

.kp-kind__hint {
  font-size: var(--text-sm);
  color: var(--c-text-muted);
  margin-top: var(--space-2);
}

/* ── Блок «Кому» ─────────────────────────────────────────────────────────── */

.kp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3) var(--space-5);
}

.kp-grid__wide { grid-column: 1 / -1; }

.kp-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  cursor: pointer;
  user-select: none;
}

.kp-check input { cursor: pointer; }

.kp-gender {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* ── Позиции ─────────────────────────────────────────────────────────────── */

.kp-items { display: block; }

/* Восемь колонок из `designer.md §2.2`. «Мощн.» снимается целиком у T4 —
   тогда на её месте не пустая клетка, а отсутствующая колонка (класс --nopower). */
.kp-item,
.kp-items__head {
  display: grid;
  grid-template-columns: 28px minmax(220px, 1fr) 96px 132px 88px 104px 132px 32px;
  gap: var(--space-2);
  align-items: center;
}

.kp-item--nopower,
.kp-items__head--nopower {
  grid-template-columns: 28px minmax(220px, 1fr) 96px 132px 104px 132px 32px;
}

.kp-items__head {
  padding: 0 0 var(--space-2);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
}

.kp-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--c-border);
}

.kp-item:last-child { border-bottom: none; }

.kp-item__num {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg);
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--c-text-muted);
}

.kp-item__info { min-width: 0; }

.kp-item__title {
  font-weight: 500;
  font-size: var(--text-base);
  overflow-wrap: anywhere;
}

/* «Вариант 1» — БЕЗ `text-transform: uppercase`. Спека аналитика §1.2 п. 2 пишет подпись
   строчными, и ровно так она печатается в документе. Заглавные тут стоили ложной тревоги
   на проверке: браузер отдаёт в `innerText` УЖЕ преобразованный текст, поиск «Вариант 1»
   не находил ничего, и проверка объявила подпись отсутствующей, хотя она была на экране. */
.kp-item__alt {
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--c-text-muted);
  margin-bottom: 2px;
}

/* Вторая строка — «исполнение словами» плюс органы выбора подключения и вида нижнего.
   Слова и органы стоят рядом намеренно: менеджер сверяет глазами то, что уйдёт в документ. */
.kp-item__exec {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--c-text-muted);
}

/* Компактные органы выбора внутри строки: класса `select-sm` в портале нет (проверено
   grep по components.css), поэтому размер задаётся здесь, а не выдуманным классом. */
.kp-item .select {
  padding: 4px 8px;
  font-size: var(--text-sm);
  height: auto;
}

.kp-item__exec .select { max-width: 230px; }

.kp-item__size,
.kp-item__power {
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
  text-align: center;
}

.kp-item__qty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.kp-item__qty-val {
  min-width: 24px;
  text-align: center;
  font-weight: 500;
}

.kp-item__price { text-align: right; }

.kp-item__unit { font-weight: 600; }

.kp-item__line {
  font-size: var(--text-xs);
  color: var(--c-text-muted);
  margin-top: 2px;
}

/* Метка «Своя цена» — она же кнопка правки этой цены: одна подпись вместо двух одинаковых
   (найдено глазами 06.09). Не цветом — цветных плашек в портале нет. */
.kp-item__manual {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 8px;
  border: 1px solid var(--c-text-muted);
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--c-text-secondary);
  cursor: pointer;
}

.kp-item__manual:hover { border-color: var(--c-primary); color: var(--c-primary); }

.kp-item__acts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-top: var(--space-1);
}

.kp-item__acts .btn { padding: 2px 8px; font-size: var(--text-xs); }

.kp-item__del {
  color: var(--c-text-muted);
  font-size: 1.2rem;
  line-height: 1;
  background: transparent;
  border: none;
  cursor: pointer;
}

.kp-item__del:hover { color: var(--c-danger); }

.kp-total {
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: 2px solid var(--c-border);
  text-align: right;
  font-size: var(--text-2xl);
}

/* ── Фото ────────────────────────────────────────────────────────────────── */

.kp-photo {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  flex-wrap: wrap;
}

.kp-photo__frame {
  width: 160px;
  height: 188px;              /* соотношение 0,853 — designer §2.2 */
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.kp-photo__frame img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.kp-photo__empty {
  padding: var(--space-3);
  font-size: var(--text-xs);
  color: var(--c-text-muted);
  text-align: center;
}

.kp-photo__side {
  flex: 1;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.kp-photo__rule {
  font-size: var(--text-sm);
  color: var(--c-text-muted);
}

.kp-photo__acts {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ── Условия серии ───────────────────────────────────────────────────────── */

.kp-cond { display: flex; flex-direction: column; gap: var(--space-2); }

.kp-cond__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-base);
  line-height: 1.45;
}

.kp-cond__row input { margin-top: 3px; flex-shrink: 0; }

.kp-cond__row--off { color: var(--c-text-muted); text-decoration: line-through; }

.kp-note {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px dashed var(--c-border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
}

/* ── Панель действий ─────────────────────────────────────────────────────── */

/* 🪤 НАЙДЕНО ГЛАЗАМИ: правый край полосы действий перекрывался плавающей кнопкой помощи
   (`.hh-fab`, `help-hub.js`) — «Удалить» уходила ей под низ. Кнопка помощи прижата к правому
   краю ОКНА и о нашей вёрстке не знает, поэтому место под неё освобождаем мы. */
.kp-acts {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
  padding-right: 80px;
}

.kp-acts__spacer { flex: 1; }

/* ── Окна ────────────────────────────────────────────────────────────────── */

.kp-modal { width: 460px; max-width: calc(100vw - 40px); }

.kp-modal--wide { width: 620px; }

.kp-modal__foot {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: 1px solid var(--c-border);
}

/* 🪤 НАЙДЕНО ГЛАЗАМИ. В портале нет правила `.btn:disabled` вообще (проверено: слово
   `disabled` в components.css встречается 7 раз и ни разу для `.btn`). Поэтому выключенная
   кнопка выглядела ровно как рабочая: «Сохранить» в окне «Своя цена» при пустом «Почему»,
   «Скачать PDF/Excel» на пустой подборке, «Всё верно, собрать» без подтверждённого
   обращения. Правило нарочно ограничено моими блоками — трогать общий `.btn` значит менять
   весь портал, а это не зона волны. */
.kp-modal__foot .btn:disabled,
.kp-acts .btn:disabled,
.kp-item__acts .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.kp-modal__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--c-border-light);
  font-size: var(--text-base);
}

.kp-modal__row:last-child { border-bottom: none; }

.kp-modal__key { color: var(--c-text-muted); flex-shrink: 0; }

.kp-modal__val { text-align: right; overflow-wrap: anywhere; }

.kp-modal__err {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--c-danger);
  min-height: 1em;
}

.kp-modal__sub {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

.kp-code {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}

.kp-hist { max-height: 420px; overflow-y: auto; }

.kp-hist__row {
  display: grid;
  grid-template-columns: 130px 130px 1fr;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--c-border-light);
  font-size: var(--text-sm);
}

.kp-hist__row:last-child { border-bottom: none; }

.kp-hist__when { color: var(--c-text-muted); font-family: var(--font-data); }

.kp-hist__who { color: var(--c-text-secondary); }

/* Плашка сторожа (🟠 косметика): документ отдан, но вёрстку надо посмотреть. */
.kp-flash {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--c-warning);
  border-radius: var(--radius);
  font-size: var(--text-base);
  background: var(--c-card);
}

/* ── Список КП: то немногое, что добавлено волной 5 ──────────────────────── */

.kp-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.kp-search .input { max-width: 420px; }

.kp-search__found {
  font-size: var(--text-sm);
  color: var(--c-text-muted);
}

.quote-card__series {
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
}

/* [2026-09-06][CLX][КП-V1] Окна КП поверх слоя панели «Изменения цен».
   Панель ставит на весь экран прозрачный перехватчик нажатий (`.pn-ov`, z-index 1290,
   `price-notify.js:39`) — он нужен ей, чтобы клик мимо панели её откладывал. Но окна портала
   живут на z-index 200, то есть ПОД ним: пока панель цен висит, ни «Своя цена», ни
   «Проверьте перед выгрузкой» не нажимались вовсе — замерено в живом браузере, клик не доходил.
   Поднимаем окна КП над перехватчиком; сам перехватчик не трогаем, иначе сломается закрытие
   панели по клику мимо. */
#kp-overlay { z-index: 1300; }