/* ===== Carlito (Calibri-совместимый open-source шрифт) ===== */
@font-face {
  font-family: 'Carlito';
  src: url('fonts/Carlito-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Carlito';
  src: url('fonts/Carlito-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== Сброс ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Carlito', 'Calibri', 'Helvetica Neue', Arial, sans-serif;
  background: #f0f2f5;
  color: #222;
  -webkit-text-size-adjust: 100%;
}

/* ===== Вкладки Чек / КП ===== */
.tabs {
  display: flex;
  gap: 6px;
  padding: 14px 20px 0;
  background: transparent;
}
.tab {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  border: 1px solid #d0d4da;
  border-radius: 8px 8px 0 0;
  background: #e6e9ee;
  color: #555;
  cursor: pointer;
  border-bottom: none;
}
.tab:hover { background: #eef0f4; }
.tab.is-active {
  background: #fff;
  color: #222;
  box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
}

/* Переключение по режиму через data-mode */
body[data-mode="receipt"] [data-show="kp"],
body[data-mode="receipt"] [data-show="blank"]   { display: none !important; }
body[data-mode="kp"]      [data-show="receipt"],
body[data-mode="kp"]      [data-show="blank"]   { display: none !important; }
body[data-mode="blank"]   [data-show="receipt"],
body[data-mode="blank"]   [data-show="kp"]      { display: none !important; }

/* ===== Каркас приложения ===== */
.app {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 20px;
  padding: 20px;
  min-height: 100vh;
}
.panel {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 20px;
}
.panel-form { position: sticky; top: 20px; align-self: start; max-height: calc(100vh - 40px); overflow-y: auto; }

.app-title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
}
.app-subtitle {
  margin: 0 0 20px;
  font-size: 13px;
  color: #777;
}

/* ===== Форма ===== */
.field { margin-bottom: 14px; display: flex; flex-direction: column; }
.field label {
  font-size: 12px;
  color: #555;
  margin-bottom: 4px;
  font-weight: 700;
}
.field input,
.field textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid #d0d4da;
  border-radius: 6px;
  background: #fff;
  width: 100%;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.15);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: #888;
  letter-spacing: 0.5px;
  margin: 18px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eee;
}

/* ===== Список услуг в форме ===== */
.services-list { display: flex; flex-direction: column; gap: 8px; }
.service-row {
  display: grid;
  grid-template-columns: 1fr 70px 90px auto;
  gap: 6px;
  align-items: center;
}
.service-row input { font-size: 13px; padding: 6px 8px; }
.btn-remove {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 16px;
  color: #c44;
  padding: 0;
}
.btn-remove:hover { background: #fee; }

.btn {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 16px;
  border: 1px solid #d0d4da;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
}
.btn:hover { background: #f5f7fa; }
.btn-primary {
  background: #4a90e2;
  color: #fff;
  border-color: #4a90e2;
  width: 100%;
  padding: 12px;
  margin-top: 16px;
  font-size: 15px;
}
.btn-primary:hover { background: #357abd; }
.btn-add { width: 100%; margin-top: 8px; font-size: 13px; padding: 8px; }
.btn-reset { width: 100%; margin-top: 12px; font-size: 13px; padding: 8px; color: #555; }

/* ===== История ===== */
.history-list { display: flex; flex-direction: column; gap: 6px; }
.history-empty {
  margin: 0;
  font-size: 12px;
  color: #999;
  font-style: italic;
}
.history-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #fafbfc;
  border: 1px solid #e6e8ee;
  border-radius: 6px;
  font-size: 13px;
}
.history-main { flex: 1; min-width: 0; }
.history-title {
  font-weight: 600;
  color: #1f2430;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-meta { font-size: 11px; color: #6b7280; margin-top: 2px; }
.btn-history-load, .btn-history-del {
  width: 26px;
  height: 26px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
}
.btn-history-load { color: #4a90e2; }
.btn-history-load:hover { background: #eaf2fb; }
.btn-history-del { color: #c44; }
.btn-history-del:hover { background: #fee; }

.field textarea { resize: vertical; min-height: 56px; line-height: 1.35; }

/* ====================================================
   ШАБЛОН ЧЕКА — точная копия xlsx
   Размер A4: 210mm x 297mm. Используем mm.
   ==================================================== */
.preview-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.receipt {
  width: 210mm;
  min-height: 297mm;   /* минимум — A4; при росте контента страница вытягивается */
  background: #fff;
  font-family: 'Carlito', 'Calibri', sans-serif;
  color: #1f2430;
  padding: 10mm 14mm 14mm;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  font-size: 11pt;
  line-height: 1.22;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Шапка: логотип слева, телефон справа.
   Тонкая разделительная линия снизу — современный «hairline». */
.r-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-bottom: 5mm;
  padding-bottom: 3mm;
  min-height: 14mm;
  border-bottom: 1px solid #e6e8ee;
}
.r-logo img { height: 14mm; display: block; }
.r-phone {
  font-size: 14pt;
  font-weight: 700;
  text-align: center;
  color: #4a90e2;
  letter-spacing: 0.3px;
}

/* Слоган + номер акта */
.r-subhead {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-bottom: 5mm;
}
.r-slogan { font-size: 12pt; color: #5a6273; }
.r-number {
  background: #eaf2fb;
  color: #2e5fa0;
  border-radius: 999px;
  padding: 4px 18px;
  font-size: 12pt;
  font-weight: 600;
  text-align: center;
  min-width: 50mm;
}

/* Таблица услуг — современный «borderless» вид с тонкими разделителями */
.r-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 4mm;
}
.r-table th,
.r-table td {
  padding: 8px 10px;
  vertical-align: middle;
}
.r-table thead th {
  background: transparent;
  font-weight: 700;
  text-align: center;
  font-size: 10pt;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b7280;
  border-bottom: 2px solid #4a90e2;
  padding-top: 4px;
  padding-bottom: 8px;
}
.r-table thead th.col-name { text-align: left; }
.r-table tbody tr { background: #fff; border-bottom: 1px solid #eef0f4; }
.r-table tbody tr.spacer { display: none; }
.r-table tbody td.col-name { font-size: 12pt; padding-left: 10px; }
.r-table tbody td.col-qty,
.r-table tbody td.col-price,
.r-table tbody td.col-sum { text-align: center; }
.r-table .total-row {
  background: #f7f8fa;
  font-weight: 700;
  border-bottom: none;
}
.r-table .total-row .total-label { text-align: right; padding-right: 16px; color: #5a6273; }
.r-table .total-row .total-value { text-align: center; color: #2e5fa0; font-size: 12pt; }

/* Колонки */
.col-name { width: 48%; }
.col-qty { width: 15%; }
.col-price { width: 17%; }
.col-sum { width: 20%; }

/* Сумма прописью — отдельный абзац под таблицей */
.r-words, .kp-words {
  margin: 0 0 4mm;
  font-size: 11pt;
  color: #3a3f4b;
  line-height: 1.35;
}
.r-words-label, .kp-words-label {
  font-weight: 700;
  color: #1f2430;
}

/* Доп. строки итога: «Скидка», «Предоплата», «К оплате» */
.r-table .extra-row, .kp-table .extra-row {
  background: #fff;
  font-weight: 600;
  color: #5a6273;
}
.r-table .extra-row .total-value, .kp-table .extra-row .total-value {
  color: #c44;
}
.r-table .final-row, .kp-table .final-row {
  background: #eaf2fb;
  font-weight: 700;
  font-size: 12pt;
  border-bottom: none;
}
.r-table .final-row .total-label, .kp-table .final-row .total-label {
  color: #1f2430;
}
.r-table .final-row .total-value, .kp-table .final-row .total-value {
  color: #2e5fa0;
}

/* Гарантийный текст — с тонкой акцентной полосой слева */
.r-warranty {
  margin: 4mm 0;
  font-size: 10pt;
  line-height: 1.45;
  padding: 3mm 4mm;
  background: #fafbfc;
  border-left: 3px solid #4a90e2;
  border-radius: 0 6px 6px 0;
  color: #3a3f4b;
}
.r-warranty p { margin: 0 0 1.5mm; }
.r-warranty .bold { font-weight: 700; color: #1f2430; }
.r-warranty .bullet { padding-left: 4mm; text-indent: -4mm; }

/* Реквизиты заказа: вместо плотных серых блоков — карточки с тонкой границей */
.r-order { margin-top: 3mm; display: flex; flex-direction: column; gap: 2mm; }
.r-order-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fafbfc;
  border: 1px solid #e6e8ee;
  border-radius: 6px;
  min-height: 10mm;
  padding: 5px 12px;
  align-items: center;
  font-size: 12pt;
}
.r-order-row.full { grid-template-columns: 1fr; }
.r-order-label { padding-left: 0; }
.r-order-sign { text-align: left; padding-left: 8px; font-size: 11pt; color: #6b7280; }

/* Подпись и печать (наложение) — на чеке.
   Привязаны к НИЖНЕМУ-ПРАВОМУ углу страницы (right/bottom),
   чтобы при росте документа оставаться рядом с реквизитами заказа.
   Координаты задаёт JS (right/bottom/width в px), либо CSS-дефолты ниже. */
.r-signature-img {
  position: absolute;
  height: 26mm;
  right: 80mm;
  bottom: 70mm;
}
.r-stamp-img {
  position: absolute;
  height: 52mm;
  opacity: 0.9;
  right: 18mm;
  bottom: 6mm;
}

/* Контакты в подвале — тонкий hairline сверху */
.r-footer {
  margin-top: 4mm;
  padding-top: 3mm;
  border-top: 1px solid #e6e8ee;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  font-size: 12pt;
}
.r-footer-contacts p { margin: 0 0 1mm; color: #3a3f4b; }
.r-footer-contacts .bold { font-weight: 700; color: #1f2430; }
.r-footer-inn { font-size: 11pt; color: #6b7280; }

/* ====================================================
   ШАБЛОН КП — точная копия xlsx «КП ГУ Минюста»
   ==================================================== */
.kp {
  width: 210mm;
  min-height: 297mm;
  background: #fff;
  font-family: 'Carlito', 'Calibri', sans-serif;
  color: #1f2430;
  padding: 10mm 14mm 14mm;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  font-size: 11pt;
  line-height: 1.25;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Шапка КП: лого слева, заголовок по центру, телефон справа.
   Hairline снизу для современного «document»-вида. */
.kp-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 5mm;
  padding-bottom: 3mm;
  min-height: 16mm;
  border-bottom: 1px solid #e6e8ee;
}
.kp-logo img { height: 14mm; display: block; }
.kp-title {
  font-size: 14pt;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  color: #1f2430;
  letter-spacing: 0.3px;
}
.kp-phone {
  font-size: 14pt;
  font-weight: 700;
  text-align: right;
  color: #4a90e2;
  letter-spacing: 0.3px;
}

/* Таблица услуг — без серых блоков, тонкие разделители строк */
.kp-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 5mm;
}
.kp-table th, .kp-table td { padding: 9px 10px; vertical-align: middle; }
.kp-table thead th {
  background: transparent;
  font-weight: 700;
  text-align: center;
  font-size: 10pt;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b7280;
  border-bottom: 2px solid #4a90e2;
  padding-top: 4px;
  padding-bottom: 8px;
}
.kp-table thead th.col-name { text-align: left; }
.kp-table tbody tr { background: #fff; border-bottom: 1px solid #eef0f4; }
.kp-table tbody tr.spacer { display: none; }
.kp-table tbody td.col-name { font-size: 13pt; padding-left: 10px; }
.kp-table tbody td.col-qty,
.kp-table tbody td.col-price,
.kp-table tbody td.col-sum { text-align: center; font-size: 12pt; }
.kp-table .total-row {
  background: #f7f8fa;
  font-weight: 700;
  border-bottom: none;
}
.kp-table .total-row .total-label { text-align: right; padding-right: 16px; font-size: 12pt; color: #5a6273; }
.kp-table .total-row .total-value { text-align: center; font-size: 13pt; color: #2e5fa0; }
.kp-table .col-name  { width: 46%; }
.kp-table .col-qty   { width: 16%; }
.kp-table .col-price { width: 18%; }
.kp-table .col-sum   { width: 20%; }

/* Абзацы про компанию и гарантию */
.kp-paragraph {
  margin: 0 0 4mm;
  font-size: 12pt;
  line-height: 1.4;
  text-align: justify;
  white-space: pre-wrap;
  color: #3a3f4b;
}

/* Стороны — карточки с тонкой границей вместо плотных серых блоков */
.kp-parties { margin-top: 2mm; }
.kp-party-row {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 6px;
  margin-bottom: 2mm;
}
.kp-party-row-full { grid-template-columns: 1fr; }
.kp-party-cell {
  background: #fafbfc;
  border: 1px solid #e6e8ee;
  border-radius: 6px;
  padding: 7px 12px;
  min-height: 11mm;
  font-size: 12pt;
  display: flex;
  align-items: center;
}

/* Контакты в подвале — hairline сверху */
.kp-footer {
  margin-top: 4mm;
  padding-top: 3mm;
  border-top: 1px solid #e6e8ee;
  font-size: 12pt;
}
.kp-footer p { margin: 0 0 1mm; color: #3a3f4b; }
.kp-footer .bold { font-weight: 700; color: #1f2430; }
.kp-footer-warranty { margin-top: 3mm !important; }

/* Подпись и печать на КП — также привязаны к нижнему-правому углу. */
.kp-signature-img {
  position: absolute;
  height: 26mm;
  right: 18mm;
  bottom: 100mm;
}
.kp-stamp-img {
  position: absolute;
  height: 52mm;
  opacity: 0.9;
  right: 18mm;
  bottom: 15mm;
}

/* ====================================================
   DRAG & RESIZE подписи и печати
   ==================================================== */
.draggable {
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  outline: 2px dashed transparent;
  outline-offset: 2px;
  transition: outline-color 0.15s;
  z-index: 10;
}
.draggable:hover { outline-color: rgba(74, 144, 226, 0.6); }
.draggable.is-active { outline-color: #4a90e2; }
.draggable.is-dragging { cursor: grabbing; outline-color: #4a90e2; }
.draggable.is-resizing { outline-color: #4a90e2; }

/* «Ручка» масштабирования в правом-нижнем углу */
.resize-handle {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #4a90e2;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: nwse-resize;
  z-index: 11;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  transform: translate(50%, 50%);
  display: none;
}
.resize-handle:hover { background: #357abd; }
.draggable:hover ~ .resize-handle,
.resize-handle:hover,
.draggable.is-active ~ .resize-handle,
.resize-handle.is-active { display: block; }

/* «Крестик» удаления подписи/печати с бланка (левый-верхний угол картинки) */
.img-delete {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #c44;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  z-index: 12;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  transform: translate(50%, -50%);
  display: none;
  align-items: center;
  justify-content: center;
  font: 700 15px/1 system-ui, sans-serif;
  user-select: none;
}
.img-delete:hover { background: #a33; }
.draggable.is-active ~ .img-delete,
.img-delete:hover { display: flex; }

/* Скрываем ручки при PDF-генерации */
.is-rendering .draggable { outline-color: transparent !important; }
.is-rendering .resize-handle { display: none !important; }
.is-rendering .img-delete { display: none !important; }
/* PDF всегда снимается в исходном размере A4, даже если превью на телефоне уменьшено. */
.is-rendering .receipt,
.is-rendering .kp,
.is-rendering .blank { transform: none !important; box-shadow: none !important; }

/* Переключатели «показывать подпись / печать» */
.img-toggles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.img-toggles label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #444;
  cursor: pointer;
}
.img-toggles input { cursor: pointer; }

/* ====================================================
   БЛАНК БЫТОВОГО ПОДРЯДА / ГАРАНТИЙНЫЙ ТАЛОН
   Точная копия PDF stirmach.ru. Размер A4.
   ==================================================== */
.blank {
  width: 210mm;
  min-height: 297mm;
  background: #fff;
  font-family: 'Carlito', 'Calibri', sans-serif;
  color: #1f2430;
  padding: 6mm 8mm 8mm;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  font-size: 9pt;
  line-height: 1.25;
  position: relative;
  display: flex;
  flex-direction: column;
}
.blank .bl-bold { font-weight: 700; }

/* ===== Верхняя полоса: номер бланка слева, контакт справа ===== */
.bl-topbar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 6mm;
  font-size: 8pt;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  margin-bottom: 1mm;
}
.bl-topbar-left {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.bl-topbar-lbl { font-weight: 700; color: #1f2430; }
.bl-topbar-num {
  display: inline-block;
  min-width: 45mm;
  border-bottom: 1px solid #1f2430;
  font-weight: 700;
  color: #1f2430;
  padding: 0 6px 1px;
  text-align: center;
}
.bl-topbar-right { text-align: right; font-size: 8pt; line-height: 1.35; color: #1f2430; }
.bl-topbar-cap { white-space: nowrap; }

/* ===== Строка про права потребителей ===== */
.bl-rights {
  font-size: 8.5pt;
  color: #1f2430;
  padding: 2mm 0 1mm;
  margin-bottom: 1mm;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.bl-rights-text { color: #1f2430; }
.bl-rights-email { color: #1f2430; }

/* ===== Заголовок «Гарантийный талон» + телефон ===== */
.bl-title-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-bottom: 2mm;
}
.bl-title {
  font-size: 27pt;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #1f2430;
  line-height: 1;
}
.bl-title-phone {
  font-size: 17pt;
  color: #1f2430;
  white-space: nowrap;
}
.bl-title-phone .bl-bold { font-weight: 700; }

/* ===== Голубая лента 15% ===== */
.bl-ribbon {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 3mm;
  background: #2a9bd1;
  color: #fff;
  padding: 1.5mm 4mm 1.5mm 2mm;
  margin-bottom: 4mm;
  /* характерный «срезанный» правый край как в PDF */
  clip-path: polygon(0 0, 100% 0, calc(100% - 5mm) 50%, 100% 100%, 0 100%);
}
.bl-ribbon-badge {
  background: #fff;
  color: #2a9bd1;
  width: 11mm;
  height: 11mm;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12pt;
  font-weight: 800;
  flex-shrink: 0;
  margin-left: 1mm;
}
.bl-ribbon-text {
  font-size: 10pt;
  color: #fff;
}
.bl-ribbon-text .bl-bold { color: #fff; font-weight: 700; }
.bl-ribbon-hours {
  font-size: 8pt;
  color: #fff;
  opacity: 0.95;
  white-space: nowrap;
  padding-right: 5mm;
}

/* ===== Заголовки секций (мелкие, ВЕРХНИЙ РЕГИСТР) ===== */
.bl-section-h {
  font-size: 10pt;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #1f2430;
  margin-bottom: 1.5mm;
}
.bl-section-h2 {
  font-size: 12pt;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #1f2430;
  margin: 3mm 0 1.5mm;
}
.bl-section-h2-wide { margin-top: 4mm; }

/* ===== Заказчик — блок во всю ширину ===== */
.bl-customer { margin-bottom: 3mm; }

.bl-cust-row {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  align-items: end;
  gap: 3mm;
  margin-bottom: 3mm;
  font-size: 9pt;
}
.bl-cust-row-full { grid-template-columns: auto 1fr; }

.bl-cust-lbl { color: #1f2430; white-space: nowrap; padding-bottom: 1px; }
.bl-cust-line {
  border-bottom: 1px solid #1f2430;
  min-height: 4.5mm;
  padding: 0 2px 1px;
  font-size: 9pt;
  color: #1f2430;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ===== Таблица работ ===== */
.bl-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 3mm;
  font-size: 8.5pt;
}
.bl-table th, .bl-table td {
  border: 1px solid #1f2430;
  padding: 0.5mm 1.5mm;
  text-align: center;
  vertical-align: middle;
}
.bl-table thead th {
  font-weight: 600;
  background: #fff;
  color: #1f2430;
  font-size: 9pt;
  height: 6mm;
}
.bl-table tbody td {
  height: 4.6mm;
  color: #1f2430;
}
.bl-table .bl-c-num   { width: 7mm; }
.bl-table .bl-c-name  { width: auto; text-align: left; padding-left: 3mm; }
.bl-table tbody .bl-c-name { text-align: left; }
.bl-table .bl-c-code  { width: 22mm; }
.bl-table .bl-c-price { width: 22mm; }
.bl-table .bl-c-qty   { width: 18mm; }
.bl-table .bl-c-sum   { width: 24mm; }
.bl-table .bl-c-warr  { width: 22mm; }

/* ===== Общие условия — мелкий «договорный» текст ===== */
.bl-terms {
  font-size: 6.8pt;
  line-height: 1.3;
  text-align: justify;
  color: #1f2430;
  margin: 0 0 3mm;
}

/* ===== Строка подписи ЗАКАЗЧИК ===== */
.bl-sign-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto 1fr;
  align-items: end;
  gap: 3mm;
  margin: 1.5mm 0 2.5mm;
  font-size: 10pt;
}
.bl-sign-lbl { font-size: 12pt; font-weight: 800; color: #1f2430; }
.bl-sign-sub { font-size: 9pt; color: #1f2430; padding-bottom: 1px; }
.bl-sign-line {
  border-bottom: 1px solid #1f2430;
  min-height: 4.5mm;
  padding: 0 2px 1px;
  font-size: 9pt;
  color: #1f2430;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bl-sign-line-sm { min-width: 40mm; }

/* ===== Акт сдачи-приёмки ===== */
.bl-act-row {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  align-items: end;
  gap: 3mm;
  margin-bottom: 3mm;
  font-size: 9pt;
}
.bl-act-row .bl-act-line-full { grid-column: 2 / -1; }
.bl-act-row3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5mm;
  margin-bottom: 3mm;
}
.bl-act-cell {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 2.5mm;
}
.bl-act-lbl { color: #1f2430; white-space: nowrap; padding-bottom: 1px; }
.bl-act-line {
  border-bottom: 1px solid #1f2430;
  min-height: 4.5mm;
  padding: 0 2px 1px;
  font-size: 9pt;
  color: #1f2430;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bl-accept {
  font-size: 6.8pt;
  line-height: 1.3;
  color: #1f2430;
  margin: 0 0 2mm;
  text-align: justify;
}

/* ===== Подпись и печать на бланке — у нижнего-правого угла ===== */
.bl-signature-img {
  position: absolute;
  height: 26mm;
  right: 80mm;
  bottom: 14mm;
}
.bl-stamp-img {
  position: absolute;
  height: 48mm;
  opacity: 0.9;
  right: 18mm;
  bottom: 6mm;
}

/* В форме бланка строка услуг другая: имя, код, цена, кол-во, гарантия */
.services-list-blank .service-row {
  grid-template-columns: 1fr 60px 70px 50px 60px auto;
}

/* ===== Принт и pdf ===== */
@page {
  size: A4;
  margin: 0;
}
@media print {
  body { background: #fff; }
  .panel-form, .app-title, .app-subtitle, .no-print { display: none !important; }
  .app { display: block; padding: 0; }
  .panel { box-shadow: none; padding: 0; border-radius: 0; }
  .receipt, .kp, .blank { box-shadow: none; margin: 0; transform: none !important; }
  .resize-handle, .img-delete { display: none !important; }
}

/* ===== Адаптивность ===== */
@media (max-width: 1100px) {
  .app { grid-template-columns: 1fr; }
  .panel-form { position: static; max-height: none; }
  .preview-wrap { overflow: hidden; }

  /* На узком экране масштабируем чек/КП по ширине, чтобы был виден целиком.
     Сам PDF не зависит от этого — html2canvas рендерит документ в полном размере. */
  .receipt, .kp, .blank {
    transform: scale(var(--receipt-scale, 1));
    transform-origin: top left;
  }
  .preview-wrap {
    /* высота контейнера = реальная высота документа * scale (задаётся из JS) */
    height: var(--receipt-display-height, auto);
  }
}
@media (max-width: 600px) {
  .app { padding: 10px; gap: 10px; }
  .panel { padding: 14px; }
  .field-row { grid-template-columns: 1fr; }
  .service-row { grid-template-columns: 1fr 60px 80px auto; }
}