/* ─────────────────────────────────────────────────────────────────
   ERGSN export-doc templates — shared screen + print + mobile CSS.
   Loaded by invoice/proforma/packing-list/co templates.
   ───────────────────────────────────────────────────────────────── */

/* ── Print: keep .doc inside A4 printable area + hide body chrome ─── */
@media print {
  html, body {
    background: #fff !important;
    color-scheme: light !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .doc {
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #111 !important;
  }
  /* Whitelist: hide every body child except .doc and inert tags. */
  body > *:not(.doc):not(script):not(style):not(link):not(noscript) {
    display: none !important;
  }
  /* Hide the brand-image when no logo uploaded (no .show class) */
  .brand-image:not(.show) { display: none !important; }
  /* Force all inputs to drop native appearance — some Chrome builds render
     <input> as a filled rectangle in print despite background:transparent.
     appearance:none + explicit white background eliminates the dark box. */
  input, textarea {
    background: #fff !important;
    border: 0 !important;
    border-bottom: .5px dotted #999 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    color: #111 !important;
    -moz-appearance: none !important;
  }
  /* Restore the table-cell input look (no bottom border inside table rows) */
  .doc table.lines input { border-bottom: 0 !important; }
  /* Hide the bottom attribution + its dotted border (common source of a faint
     line that some users perceive as a thicker band). */
  .doc .print-attr { display: none !important; }
  /* Brand controls — never show in print */
  .brand-customize-hint, .brand-input, .brand-sub-input {
    /* keep their value visible but strip input affordances */
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    color: inherit !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  .brand-image { box-shadow: none !important; }
  /* Generic input styling for filled fields */
  input { background: transparent !important; border-color: #ccc !important; }
}

/* ── Mobile: scale .doc to fit + tools sit below the doc (not fixed) ─
   210 mm × 96 dpi / 25.4 = ~793.7 px. Dividing one length by another
   length in calc() yields a unitless number, which `zoom` requires —
   the earlier `/ 793.7` (no unit) produced a length and was silently
   ignored, leaving .doc unscaled.

   Inputs become small but tappable via pinch-zoom (viewport meta on
   each template allows maximum-scale=5). The .tools bar is moved
   AFTER .doc in HTML so on mobile it sits at the document footer,
   not overlapping the public footer that scripts/footer.js injects. */
@media (max-width: 820px) {
  body {
    overflow-x: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #20201b !important;
  }
  .doc {
    zoom: calc((100vw - 24px) / 793.7px);
    margin: 60px auto 16px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
  }
  /* Tools bar — sits naturally after the document, before the public footer */
  .tools {
    position: static !important;
    top: auto !important; bottom: auto !important;
    left: auto !important; right: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 12px auto 32px !important;
    padding: 0 16px !important;
    max-width: 100% !important;
    z-index: auto !important;
  }
  .tools .tb {
    font-size: 13px !important;
    padding: 10px 16px !important;
    flex: 0 1 auto;
  }
  .ergsn-back-top {
    top: 12px !important;
    left: 12px !important;
    font-size: 11px !important;
    padding: 8px 12px !important;
  }
}

/* ── Brand block: editable name + subtitle + uploadable logo ──────── */
.brand-block { position: relative; }

.brand-input {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  outline: none;
  width: auto;
  min-width: 6ch;
  max-width: 100%;
  letter-spacing: inherit;
  text-transform: inherit;
}
.brand-input.brand { /* picks up font-size + family from .brand */ }
.brand-input:focus { background: rgba(52, 210, 152, 0.08); }

.brand-sub-input {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  outline: none;
  width: 100%;
  letter-spacing: inherit;
  text-transform: inherit;
}
.brand-sub-input:focus { background: rgba(52, 210, 152, 0.08); }

.brand-image {
  display: none;       /* JS toggles when user uploads */
  max-height: 18mm;
  max-width: 70mm;
  object-fit: contain;
  margin-bottom: 2mm;
}
.brand-image.show { display: block; }
.brand-image.show ~ .brand-input,
.brand-image.show ~ .brand-sub-input { display: none; }

/* On-screen hint: appears next to brand area, hidden in print */
.brand-customize-hint {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 9pt;
  color: #999;
  margin-top: 1mm;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}