/* ═══════════════════════════════════════════════════════════
   ДИЗАЙН-СИСТЕМА ДОКУМЕНТА «НАБАТ» — лист A4
   ═══════════════════════════════════════════════════════════
   Единый источник стиля для всех бланков заказа:
     · order-form.html  — бланк по составу корзины;
     · order-blank.html — бланки заказа на конкретное изделие.
   Правила печати, специфичные для страницы (что скрывать вокруг
   листа), остаются в самой странице — здесь только сам документ.
   ═══════════════════════════════════════════════════════════ */

.doc-overlay,
.doc-page {
  /* Фирменная палитра документа */
  --brand-red:       #ED1C24;
  --text-primary:    #16181D;
  /* Серые нейтральные, без синевы: холодный оттенок на печати
     выглядит дешевле и «экраннее», чем нужно документу. */
  --text-secondary:  #5B6067;
  --text-muted:      #8A8F96;
  --border-color:    #DFE1E5;   /* обычная линейка */
  --border-soft:     #EDEEF0;   /* разделитель позиций */
  --border-rule:     #C7CACF;   /* линия под подпись — по ней пишут */
  --doc-white:       #FFFFFF;

  /* Шаг сетки: только эти значения, без произвольных отступов */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-7: 32px; --space-8: 40px; --space-9: 48px;

  --radius-sm: 6px;

  /* Локальных шрифтов в проекте нет, внешние CDN запрещены —
     поэтому Inter/Manrope подхватятся, только если установлены
     в системе, иначе Segoe UI. */
  --doc-font: Inter, Manrope, 'Segoe UI', Arial, sans-serif;

  /* Поля листа */
  --page-pad-x: 16mm;
  --page-pad-top: 13mm;
  --page-pad-bottom: 13mm;

  background: #E9EAEC;
}

/* Предпросмотр поверх страницы корзины */
.doc-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.doc-overlay.is-open { display: block; }

/* Самостоятельная страница-бланк: тот же лист, но в обычном потоке */
.doc-page { min-height: 100vh; padding-bottom: var(--space-9); }

/* Панель управления предпросмотром — только для экрана */
.doc-toolbar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-color);
}
.doc-toolbar__title {
  font: 600 13px/1 var(--doc-font);
  color: var(--text-primary); letter-spacing: -0.1px;
}
.doc-toolbar__hint {
  font: 400 12px/1.4 var(--doc-font);
  color: var(--text-muted); margin-right: auto;
}
.doc-btn {
  height: 34px; padding: 0 var(--space-4);
  border-radius: var(--radius-sm); cursor: pointer;
  font: 600 13px/1 var(--doc-font);
  display: inline-flex; align-items: center; gap: var(--space-2);
  transition: background 150ms, border-color 150ms, color 150ms;
}
.doc-btn--primary { background: var(--brand-red); color: #fff; border: 1px solid var(--brand-red); }
.doc-btn--primary:hover { background: #C8151C; border-color: #C8151C; }
.doc-btn--ghost { background: #fff; color: var(--text-primary); border: 1px solid var(--border-color); }
.doc-btn--ghost:hover { border-color: var(--text-muted); }

/* ── Лист ──────────────────────────────────────────────── */
.doc {
  width: 210mm;
  min-height: 297mm;
  margin: var(--space-7) auto;
  background: var(--doc-white);
  color: var(--text-primary);
  font-family: var(--doc-font);
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 8px 32px rgba(22,24,29,0.16);
  border-radius: 2px;
  display: flex; flex-direction: column;
  overflow: hidden;              /* удерживает full-bleed акцент в скруглении */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* Единственная сплошная плашка документа — тонкая, во всю ширину листа */
.doc__accent {
  height: 3px; flex: 0 0 3px;
  background: var(--brand-red);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.doc__inner {
  flex: 1;
  display: flex; flex-direction: column;
  padding: var(--page-pad-top) var(--page-pad-x) var(--page-pad-bottom);
}

/* ── Шапка ─────────────────────────────────────────────── */
.doc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-8);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-color);
  break-inside: avoid; page-break-inside: avoid;
}
/* 42 мм — логотип остаётся первым уровнем, но перестаёт выглядеть
   как «фирменный бланк из редактора»: документу нужен знак, а не вывеска. */
.doc-head__logo {
  width: 42mm; height: auto;
  display: block; object-fit: contain;
}
.doc-head__tagline {
  margin-top: var(--space-2);
  font-size: 10px; line-height: 1.4;
  color: var(--text-muted);
  max-width: 74mm;              /* подпись должна умещаться в одну строку */
}
.doc-head__right { text-align: right; flex-shrink: 0; }
/* Тип документа — спокойная разрядка, а не второй логотип.
   Первый уровень в шапке один: знак НАБАТ. */
.doc-head__type {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-primary);
}
.doc-head__meta {
  margin-top: var(--space-2);
  font-size: 10.5px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Служебная подпись поля — единый стиль по всему документу */
.doc-label {
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Стороны документа ─────────────────────────────────── */
.doc-parties {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  /* Снизу линейки нет намеренно: заголовок «Состав заказа» не должен
     оказаться зажатым между двумя правилами. Разделяет воздух. */
  padding-block: var(--space-5) 0;
  break-inside: avoid; page-break-inside: avoid;
}
.doc-party__name {
  margin-top: var(--space-3);
  font-size: 14px; font-weight: 650;
  letter-spacing: -0.1px;
}
.doc-party__lines {
  margin-top: var(--space-2);
  font-size: 11.5px; line-height: 1.55;
  color: var(--text-secondary);
  font-style: normal;
}
/* Пустые поля заказчика — заполняются от руки на распечатанном бланке.
   Подпись стоит слева от линии, а не под ней: так поле не съедает
   лишнюю строку по высоте. */
.doc-party__field {
  display: flex; align-items: baseline; gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
}
/* Фиксированная колонка под подпись: иначе линии начинаются с разной
   вертикали и левый край поля получается рваным. */
.doc-party__field > span { flex: 0 0 30mm; }
.doc-party__field::after {
  content: ''; flex: 1;
  border-bottom: 1px solid var(--border-rule);
}

/* ── Состав заказа ─────────────────────────────────────── */
.doc-section {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding-top: var(--space-7); padding-bottom: var(--space-2);
}
.doc-section__title {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.doc-section__count { font-size: 11px; color: var(--text-muted); }

/* Сетка позиций: номер | описание | кол-во | цена | сумма.
   Числовые колонки стоят плотной группой (gap 12px), а от описания их
   отделяет запас справа — иначе «кол-во» отрывается от цены и суммы
   и три числа перестают читаться как один блок. */
.doc-row {
  display: grid;
  grid-template-columns: 8mm 1fr 19mm 22mm 27mm;
  gap: var(--space-3);
  align-items: baseline;
}
.doc-row > :nth-child(2) { padding-right: var(--space-7); }
.doc-thead {
  /* По нижнему краю, а не по базовой линии: если подпись колонки
     когда-нибудь перенесётся на две строки, шапка не поедет. */
  align-items: end;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-color);
}
.doc-thead .doc-label { line-height: 1.25; }
/* Сетка позиций собрана на div с ролями ARIA, а не на <table>:
   display:block/grid на <table> лишает её табличной семантики,
   а роли на div сохраняются. */
.doc-table { display: block; }
.doc-item {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
  break-inside: avoid; page-break-inside: avoid;
}
/* Линейку под последней позицией снимаем: её роль берёт на себя
   более весомое правило над итогом — иначе две линии стоят рядом. */
.doc-item:last-of-type { border-bottom: none; }

.doc-item__num {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.doc-item__name {
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.15px;
  overflow-wrap: anywhere;      /* длинное название не рвёт сетку */
}
.doc-item__article {
  margin-top: 3px;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.doc-item__variant {
  margin-top: var(--space-1);
  font-size: 12px; line-height: 1.45;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
/* Внутри позиции держим три регистра, а не четыре: название — акцент,
   артикул и исполнение — служебный уровень. Раньше «Исп. 1» спорил
   с названием и строка выглядела шумной. */
.doc-item__variant b {
  font-weight: 600; color: var(--text-muted);
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
}
.doc-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.doc-item__qty  { font-size: 13px; font-weight: 600; }
.doc-item__unit { font-size: 12.5px; color: var(--text-secondary); }
.doc-item__sum  { font-size: 14px; font-weight: 700; }
.doc-item__sum--unknown,
.doc-item__unit--unknown {
  font-size: 11px; font-weight: 500;
  color: var(--text-muted); white-space: normal;
}

/* ── Итог ──────────────────────────────────────────────── */
/* Итоговая строка, а не отдельная плашка: метка слева, сумма справа,
   на одной базовой линии, правым краем в колонку «Сумма». Раньше три
   строки столбиком висели у края и не были связаны с таблицей. */
/* Единственное «сильное» правило на листе — граница между составом
   заказа и итогом. Все остальные линейки светлее по весу. */
.doc-total-wrap {
  border-top: 1px solid var(--text-primary);
  padding-top: var(--space-4);
  break-inside: avoid; page-break-inside: avoid;
}
.doc-total-group { width: 100%; }
/* Во всю ширину текстового блока: метка встаёт у левого поля, сумма —
   у правого, в колонке «Сумма». Блок фиксированной ширины начинался
   посреди листа и не совпадал ни с одной вертикалью. */
.doc-total {
  width: 100%;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-6);
}
.doc-total__count {
  margin-left: var(--space-2);
  font-size: 11px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.doc-total__val {
  font-size: 25px; font-weight: 700;
  letter-spacing: -0.7px; line-height: 1;
  color: var(--brand-red);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.doc-total__val--unknown {
  font-size: 14px; font-weight: 600;
  letter-spacing: 0; color: var(--text-secondary);
}
.doc-total__note {
  margin-top: var(--space-2);
  font-size: 9.5px; color: var(--text-muted);
  text-align: right;
}

/* ── Примечание заказчика ──────────────────────────────── */
/* Без серой плашки и левого бордера: залитый блок — самый «шаблонный»
   элемент, какой может быть в документе. Достаточно линейки и метки,
   как во всех остальных разделах листа. */
.doc-note {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
  break-inside: avoid; page-break-inside: avoid;
}
.doc-note__text {
  margin-top: var(--space-2);
  font-size: 11.5px; line-height: 1.5;
  color: var(--text-secondary);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ── Подпись ───────────────────────────────────────────── */
.doc-sign {
  display: grid; grid-template-columns: 40fr 60fr;
  gap: var(--space-9);
  margin-top: auto;                       /* прижимаем к низу листа */
  padding-top: var(--space-6);
  break-inside: avoid; page-break-inside: avoid;
}
/* Дата уже заполнена — она набирается как значение, без линии.
   Линия остаётся только там, где действительно пишут: под подписью. */
.doc-sign__value {
  margin-top: var(--space-3);
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.doc-sign__rule {
  margin-top: var(--space-5);
  border-bottom: 1px solid var(--border-rule);
}

/* ── Подвал листа ──────────────────────────────────────── */
.doc-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-color);
  font-size: 9.5px; color: var(--text-muted);
  break-inside: avoid; page-break-inside: avoid;
}
.doc-foot__brand { font-weight: 650; letter-spacing: 0.04em; color: var(--text-secondary); }

/* ── Экран: узкие окна ─────────────────────────────────── */
@media screen and (max-width: 980px) { .doc { zoom: 0.72; } }
@media screen and (max-width: 720px) { .doc { zoom: 0.52; } }
@media screen and (max-width: 520px) { .doc { zoom: 0.4; } }

/* ── Печать: сам лист ──────────────────────────────────────
   Скрытие окружения страницы задаётся в каждой странице отдельно. */
@media print {
  .doc-toolbar { display: none !important; }
  .doc {
    width: 210mm; min-height: 297mm;
    margin: 0; zoom: 1;
    box-shadow: none; border-radius: 0;
  }
}

@page { size: A4 portrait; margin: 0; }