/* ════════════════════════════════════════════════════════
   print.css — наклейки и листы A4
   ════════════════════════════════════════════════════════ */
#print-root{display:none}

/* ═══════════ ПРЕДПРОСМОТР — В ОФОРМЛЕНИИ САЙТА ═══════════
   Раньше панель была зелёной (#1c2a20) и жила отдельно от темы
   приложения. Теперь цвета берутся из переменных: панель совпадает
   с шапкой, кнопки — со стилем .btn, тёмная тема поддержана.
   Сам лист остаётся белым — это бумага. */
@media screen{
  #print-root.preview{display:block;position:fixed;inset:0;z-index:300;
    overflow-y:auto;
    background:var(--bg)}

  /* Превью поверх окна настроек: оставляем края видными, чтобы было
     понятно: под ним осталось окно, и щелчок рядом вернёт к нему.
     Без этого лист A4 занимал всю площадь и конструктор казался пропавшим. */
  #print-root.preview.over{
    inset:max(12px, env(safe-area-inset-top)) 12px 12px;
    border-radius:var(--radius-lg);
    border:1px solid var(--line);
    box-shadow:var(--shadow-lg);
  }
  #print-root.preview.over .pr-bar{margin:8px 10px 0}
  @media(max-width:860px){
    #print-root.preview.over{inset:max(8px, env(safe-area-inset-top)) 6px 6px;
      border-radius:12px}
  }

  #print-root .pr-bar{position:sticky;top:0;z-index:9;
    margin:8px 20px 0;padding:0 16px;min-height:var(--top-h);
    display:flex;gap:9px;align-items:center;flex-wrap:wrap;
    color:var(--fg);
    background:var(--card);
    
    -webkit-
    border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh)}
  #print-root .pr-bar b{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);margin-right:6px;font-weight:600}

  /* главная кнопка — как .btn в приложении */
  #print-root .pr-bar button{background:var(--accent);color:var(--on-accent);border:0;
    padding:9px 18px;border-radius:var(--r-xs);font:inherit;font-size:13px;
    font-weight:600;cursor:pointer;transition:.15s}
  #print-root .pr-bar button:hover{background:var(--accent2)}
  /* второстепенные — как .btn.ghost */
  #print-root .pr-bar button.g{background:var(--card2);color:var(--fg2);
    border:1px solid var(--line);font-weight:400}
  #print-root .pr-bar button.g:hover{background:var(--hover);color:var(--fg)}
  #print-root .pr-bar .sp{margin-left:auto;font-size:12px;color:var(--muted)}

  #print-root .pr-wrap{padding:22px;display:flex;flex-direction:column;
    align-items:center;gap:18px}
  #print-root .pr-wrap.labels{flex-direction:row;flex-wrap:wrap;justify-content:center;
    align-items:flex-start;gap:12px}
  /* лист приподнят над фоном, как карточка */
  #print-root .p-page,#print-root .lb{box-shadow:var(--sh);border-radius:2px}
  #print-root .pr-wrap.big .p-page{font-size:1.25em}
}

/* ═══════════ НАКЛЕЙКА ═══════════ */
.lb{background:#fff;color:#000;overflow:hidden;display:flex;position:relative;
  font-family:'Segoe UI',Arial,sans-serif;border:1px dashed #c3c8c3}
.lb *{line-height:1.15}
.lb.row{flex-direction:row}
.lb.col{flex-direction:column}
.lb.frame{border:.6mm solid #000}

/* зона типографии — не печатаем */
.lb-zone{flex:none;background:repeating-linear-gradient(45deg,#f2f2f2 0 2.5mm,#fff 2.5mm 5mm)}
.lb-zone.v{height:100%;border-right:.3mm dashed #aaa}
.lb-zone.h{width:100%;border-bottom:.3mm dashed #aaa}
/* печатаем сами */
.lb-strip{flex:none;background:#000;color:#fff;position:relative;display:grid;place-items:center}
.lb-strip.v{height:100%}
.lb-strip.h{width:100%}
.lb-strip span{font-size:11pt;font-weight:300;letter-spacing:.15em}
.lb-strip.v span{writing-mode:vertical-rl;transform:rotate(180deg)}

.lb-body{flex:1;min-width:0;padding:var(--pt,2mm) var(--pr,3mm) var(--pb,2mm) var(--pl,3mm);
  display:flex;flex-direction:column}
.lb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:2mm}
.lb-name{font-size:var(--fn,10pt);font-weight:700;letter-spacing:-.01em}
.lb-sub{font-size:6.6pt;color:#333;margin-top:.5mm}
.lb-lot{font-size:10.5pt;font-weight:800;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.lb-mid{margin-top:auto;margin-bottom:auto;text-align:center}
/* Вес — главное на наклейке. Должно читаться с двух метров,
   поэтому крупно и по центру, а не мелко сбоку. */
.lb-w{font-size:var(--fw,25pt);font-weight:800;letter-spacing:-.03em;line-height:.9;
  font-variant-numeric:tabular-nums;text-align:center}
.lb-w span{font-size:.42em;font-weight:600;margin-left:.5mm}
/* название продукта над весом — тоже крупно */
.lb-big{font-size:calc(var(--fn,10pt) * 1.45);font-weight:800;line-height:1.05;
  text-align:center;letter-spacing:-.02em;margin-bottom:.8mm;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lb-mid .lb-pal{font-size:7.5pt;font-weight:600;margin-top:.8mm;text-align:center}
.lb-w span{font-size:.34em;font-weight:600;margin-left:1mm}
.lb-line{display:inline-block;width:60%;border-bottom:.6mm solid #000;height:.6em}
.lb-pal{font-size:8pt;font-weight:700;margin-top:.8mm}
.lb-ft{display:flex;justify-content:space-between;align-items:baseline;font-size:7.4pt;
  border-top:.3mm solid #000;padding-top:1mm;margin-top:1mm}
.lb-ft b{font-size:9pt}
.lb-ft b{font-size:8pt;font-weight:700;font-variant-numeric:tabular-nums}
.lb-rows{font-size:7.4pt;margin:1mm 0}
.lb-rows div{display:flex;justify-content:space-between;padding:.5mm 0;
  border-bottom:.2mm solid #ddd}
.lb-rows div:last-child{border-bottom:0}
.lb-rows b{font-weight:700;font-variant-numeric:tabular-nums}
.lb-qty{display:flex;align-items:baseline;gap:1.5mm;justify-content:center}
.lb-qty .q{font-size:21pt;font-weight:800;line-height:.9;font-variant-numeric:tabular-nums}
.lb-qty .t{font-size:8pt;font-weight:600}
.lb-band{background:#000;color:#fff;font-size:6.8pt;font-weight:700;letter-spacing:.13em;
  text-align:center;padding:.7mm;margin:calc(var(--pt,2mm)*-1) calc(var(--pr,3mm)*-1) 1.4mm
    calc(var(--pl,3mm)*-1)}
.lb-turn{writing-mode:vertical-rl;transform:rotate(180deg);height:100%;
  display:flex;flex-direction:column;justify-content:center;gap:1.2mm}
.lb-small{font-size:7.4pt}
.lb-x{line-height:1.15;text-align:center;white-space:pre-line}

/* ═══════════ ЛИСТ A4 ═══════════ */
.p-page{width:210mm;min-height:297mm;background:#fff;color:#111;padding:15mm 17mm;
  display:flex;flex-direction:column;position:relative;
  font-family:'Segoe UI',-apple-system,Roboto,Arial,sans-serif}
/* Своя надпись: отступ слева и сверху задан от края листа,
   поэтому лист становится точкой отсчёта. */
.p-free{position:absolute;white-space:pre-wrap;line-height:1.25;
  max-width:calc(100% - 20mm)}
/* Черта и рамка на листе: те же координаты от края, что и у надписей. */
.p-shape{position:absolute;box-sizing:border-box}
.p-page.land{width:297mm;min-height:210mm;padding:12mm 15mm}
.p-head{display:flex;justify-content:space-between;align-items:flex-start;
  border-bottom:2px solid #1a1a1a;padding-bottom:5mm}
.p-logo-img{max-height:16mm;max-width:60mm;object-fit:contain}
/* Строка под заголовком листа — задаётся в шаблоне печати. */
.p-sub-line{font-size:11pt;color:#555;margin:-4mm 0 5mm;letter-spacing:.02em}
/* Цветной логотип: маску не накладываем, печатаем картинку как есть.
   Нужен для цветного принтера — на чёрно-белом просто выйдет серым. */
.p-logo-color .p-logo-mask{display:none}
.p-logo-color .p-logo-img{max-height:100%}
/* Одноцветный SVG на бумаге: перекрашиваем маской в чёрный.
   Один файл логотипа годится и на экран, и на печать. */
.p-logo-mask{display:block;width:60mm;height:16mm;background:#1a1a1a;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:left center;mask-position:left center;
  -webkit-mask-size:contain;mask-size:contain;
  print-color-adjust:exact;-webkit-print-color-adjust:exact}
.p-logo-txt{font-size:20pt;font-weight:300;letter-spacing:.14em;line-height:1;color:#1a1a1a}
.p-logo-txt.big{font-size:26pt}
.p-head-r{text-align:right}
.p-lot{font-size:24pt;font-weight:800;letter-spacing:.04em;line-height:1;
  font-variant-numeric:tabular-nums}
.p-lot-sub{font-size:8pt;letter-spacing:.18em;color:#888;text-transform:uppercase;margin-top:2mm}
.p-prod{font-size:19pt;font-weight:600;margin:8mm 0 6mm;letter-spacing:-.01em}

/* Крупный блок на паллетном листе: читается с двух метров.
   Раньше вес стоял мелко сбоку и его искали глазами. */
.p-hero{text-align:center;margin:7mm 0 6mm;padding:6mm 4mm;
  border:2.5px solid #1a1a1a;border-radius:3mm}
.p-hero-name{font-size:30pt;font-weight:800;line-height:1.05;letter-spacing:-.02em}
.p-hero-kg{font-size:62pt;font-weight:900;line-height:1;margin-top:3mm;
  font-variant-numeric:tabular-nums}
.p-hero-kg span{font-size:24pt;font-weight:700;margin-left:3mm}
.p-hero-sub{font-size:11pt;color:#555;margin-top:3mm;letter-spacing:.04em}
/* в альбомном виде места меньше — чуть ужимаем */
.p-page.land .p-hero{margin:4mm 0;padding:4mm}
.p-page.land .p-hero-name{font-size:24pt}
.p-page.land .p-hero-kg{font-size:48pt}
.p-info{width:100%;border-collapse:collapse;margin-bottom:7mm}
.p-info td{padding:2mm 0;font-size:10pt;color:#6d766f;width:32%}
.p-info th{padding:2mm 0;font-size:11.5pt;text-align:left;font-weight:600}
.p-rows{width:100%;border-collapse:collapse;margin-bottom:6mm}
.p-rows th{font-size:8.5pt;text-transform:uppercase;letter-spacing:.09em;color:#6d766f;
  text-align:left;padding:2.5mm 2mm;border-bottom:1.5px solid #1a1a1a}
.p-rows td{padding:5mm 2mm;font-size:13pt;border-bottom:1px solid #e4e7e3}
.p-rows td.n,.p-rows th.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.p-rows.dense td{padding:2.6mm 2mm;font-size:10.5pt}
.p-fill{display:inline-block;width:36mm;border-bottom:1px solid #999}
.p-total{margin-top:auto;border-top:2px solid #1a1a1a;padding-top:4mm;
  display:flex;justify-content:space-between;align-items:baseline}
.p-total span{font-size:9.5pt;letter-spacing:.15em;color:#6d766f}
.p-total b{font-size:26pt;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.p-note{margin-top:5mm;padding:3mm 4mm;background:#f6f7f5;border-radius:2mm;font-size:10pt}
.p-sign{display:flex;justify-content:space-between;gap:6mm;margin-top:8mm;font-size:10pt;color:#444}
.p-foot{margin-top:5mm;padding-top:2.5mm;border-top:1px solid #e6e9e5;
  font-size:8pt;color:#8a938c;text-align:center}

/* ═══════════ ПЕЧАТЬ ═══════════ */
@media print{
  body > *:not(#print-root){display:none !important}
  #print-root{display:block !important;position:static}
  #print-root .pr-bar{display:none !important}
  #print-root .pr-wrap{padding:0;gap:0;display:block}
  .p-page{border:0;box-shadow:none;page-break-after:always;width:auto;min-height:0;
    padding:12mm 14mm}
  .p-page.land{width:auto;padding:10mm 12mm}
  .p-page:last-child{page-break-after:auto}
  .lb{border:0;box-shadow:none;page-break-after:always;margin:0}
  .lb:last-child{page-break-after:auto}
}
/* ═══════════ РАСКЛАДКА ═══════════ */
/* Раскладка переключается при каждой печати, а не настройкой навсегда.
   Размер листа задаёт правило @page из print.js — здесь только вид на экране. */
.pr-wrap.land .p-page{width:297mm;min-height:210mm}
.pr-wrap.big .p-page{padding:10mm 12mm}
.pr-wrap.big table.p-tbl{font-size:13pt}
.pr-wrap.big .p-total b{font-size:32pt}
@media print{
  .pr-wrap.land .p-page{width:auto;min-height:0}
}

/* ═══════════ РУКОВОДСТВО НА ПЕЧАТИ ═══════════ */
.p-guide td{vertical-align:top;padding:3mm 2.5mm}
.p-gsub{font-size:9.5pt;color:#555;margin-top:1.2mm;font-weight:400;line-height:1.35}
/* важные и опасные шаги видно даже на чёрно-белой печати */
.p-guide tr.imp td{background:#f4f4f2}
.p-guide tr.imp td:first-child{box-shadow:inset 3px 0 0 #1a1a1a}
.p-guide tr.dng td{background:#eeeeec}
.p-guide tr.dng td:first-child{box-shadow:inset 4px 0 0 #1a1a1a}
.p-guide tr.dng b{text-decoration:underline}


/* снимки в печати руководства */
.p-gimgs{display:flex;flex-wrap:wrap;gap:3mm;margin-top:2mm}
.p-gimgs img{max-width:48mm;max-height:38mm;object-fit:contain;
  border:.3mm solid #ccc;border-radius:1.5mm}
@media print{ .p-gimgs img{max-width:44mm;max-height:34mm} }