/* =============================================================================
   print.css — the permit slip.

   Sized for the small roll printer that sits next to the kiosk (80 mm thermal),
   not for A4. Everything except #print-slip is removed from the print box; the
   slip itself is populated by kiosk.js with textContent just before window.print().

   Logical properties only, same as the rest of static/css.
   ============================================================================= */

@media print {

  /*
    margin: 0 is load-bearing, not tidiness. Chrome and Edge only drop the
    browser-generated header and footer (the URL, the page title, the date) when
    the page margin is zero; any non-zero @page margin brings them back and the
    slip prints with "localhost/ — 1/1" across the top. The physical margin is
    put back as padding on .slip below, where the browser cannot reinterpret it.
  */
  @page {
    size: 80mm auto;
    margin: 0;
  }

  html, body {
    margin: 0;
    padding: 0;
    background: #FFFFFF;
    color: #000000;
    block-size: auto;
  }

  /* Everything that is not the slip. Using hidden-by-default and revealing one
     subtree is safer than chasing each overlay: a modal that happens to be open
     when a visitor presses Print cannot end up on the paper. */
  .kiosk,
  .overlay,
  .toast,
  .boot-fallback,
  noscript {
    display: none !important;
  }

  .slip {
    display: block !important;
    inline-size: 72mm;          /* 80mm roll minus the printer's own dead margin */
    margin-inline: auto;
    padding-block: 6mm 8mm;
    padding-inline: 2mm;
    font-family: var(--font-ar);
    color: #000000;
    /* Thermal paper has no colour and a light grey renders as nothing. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .slip__head { text-align: center; margin-block-end: 4mm; }

  .slip__org {
    font-size: 10pt;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .slip__title {
    font-size: 9pt;
    margin-block-start: 1mm;
  }

  .slip__serialbox {
    text-align: center;
    padding-block: 3mm;
    margin-block-end: 3mm;
    border-block: 2px solid #000000;
  }

  .slip__label {
    display: block;
    font-size: 8pt;
    margin-block-end: 1mm;
  }

  /* The number is the whole point of the piece of paper: a guard reads it off
     the slip at arm's length, in daylight. */
  .slip__serial {
    display: block;
    font-family: var(--font-ltr);
    font-size: 30pt;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.06em;
  }

  .slip__qr {
    display: block;
    inline-size: 38mm;
    block-size: 38mm;
    margin-inline: auto;
    margin-block: 2mm 4mm;
  }

  .slip__facts {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 9pt;
  }

  .slip__facts th,
  .slip__facts td {
    padding-block: 1.6mm;
    text-align: start;
    vertical-align: top;
    border-block-end: 1px dotted #666666;
  }

  .slip__facts th {
    inline-size: 26mm;
    font-weight: 400;
    color: #333333;
  }

  .slip__facts td { font-weight: 700; }

  .slip__facts bdi {
    font-family: var(--font-ltr);
    letter-spacing: 0.04em;
  }

  /* The company name: free text in either script, in the slip's own Arabic
     face — not the Latin monospace above — and allowed to break anywhere, so
     an unbroken Latin name cannot widen the table past the 72mm roll. */
  .slip__facts .freetext {
    font-family: var(--font-ar);
    overflow-wrap: anywhere;
  }

  .slip__foot {
    margin-block-start: 4mm;
    font-size: 8pt;
    text-align: center;
    line-height: 1.5;
  }

  /* One slip, one piece of paper — never split the serial from the QR. */
  .slip__serialbox,
  .slip__qr,
  .slip__facts { break-inside: avoid; }
}