/* ASSAN Receipt Designer — printable receipt visibility rules.
   The actual layout is a free-form canvas of absolutely-positioned elements,
   generated inline by JS from the Receipt Designer template (ASSAN Receipts
   settings page), so this file only needs to control what shows when printing. */

.as-print-receipt { display: none; }

/* Without this, browsers strip background-color / background-image on any
   element unless the user has manually ticked "Background graphics" in the
   print dialog — which is off by default. That silently drops the receipt's
   colored rectangles and divider lines even though the design/JS is 100%
   correct. Forcing it here makes the printed/PDF output match the designer
   regardless of that setting. */
.as-print-receipt,
.as-print-receipt * {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  color-adjust: exact !important;
}

@media print {
  /* Neutralise the THEME's own box model on the page while printing.
     Hiding body's children (below) isn't enough: the theme's own rules on
     <html>/<body> — margins, padding, min-height, overflow-hidden scroll
     locks, grey page backgrounds, admin-bar offsets — still apply, and many
     themes only add them inside phone-width media queries. On a phone the
     print layout is narrow, so those rules kick in and show up as fixed
     blank space around the receipt (while laptop print layout is wide
     enough to dodge them). "html:root" raises specificity so these win
     over typical theme selectors. */
  html:root,
  html:root > body {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    position: static !important;
    overflow: visible !important;
    transform: none !important;
    background: #fff !important;
  }
  /* Phone print layouts are often narrower than the canvas (e.g. 390px vs
     794px). Forcing the page to be at least as wide as the canvas makes the
     browser lay the receipt out at its true size and then shrink the whole
     page uniformly onto the paper — instead of letting the canvas overflow
     a narrow page. --as-rd-w is set by assan-rd-frontend.js from the saved
     design's canvas width; on wide (desktop) layouts this changes nothing. */
  html:root,
  html:root > body {
    min-width: var(--as-rd-w, 0) !important;
  }

  body > * { display: none !important; }

  html:root > body > .as-print-receipt {
    display: block !important;
    position: relative !important;
    margin: 0 auto !important;
    padding: 0 !important;
    /* Stops mobile browsers (Android Chrome font boosting / iOS text
       inflation) from silently enlarging text inside the fixed-size canvas. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* A4 is 297mm (~1122.5px) tall but the designer's A4 preset is 1123px.
       That half-pixel overflow can push a blank second page. Clipping to
       the page height prevents it. */
    max-height: 297mm;
    overflow: hidden !important;
    break-inside: avoid;
    page-break-inside: avoid;
    page-break-after: avoid;
  }
  /* margin:0 so the design fills the page edge-to-edge — any breathing
     room around the content should come from the design itself (the
     canvas elements already start with their own internal padding), not
     from the browser adding its own space on top of that. Pinned to A4 to
     match the canvas's 794x1123px dimensions (A4 at 96dpi) exactly, rather
     than "auto" which can silently fall back to Letter size on some
     printers/OS defaults and throw off the layout. */
  @page { margin: 0; size: 210mm 297mm; }
}