/* =====================================================================
   عَــدزّة (Adzzah) — Print stylesheet
   Two families:
     1. Receipts  — body.paper-58 / .paper-72 / .paper-80  (thermal, @page auto height)
     2. Documents — body.paper-a4 (invoices, reports, statements)
   Loaded by layout/print.php. Screen preview mimics the paper.
   ===================================================================== */

:root {
  --p-ink: #000;
  --p-ink-2: #333;
  --p-ink-3: #666;
  --p-rule: #000;
  --p-rule-soft: #bbb;
  --p-font: 'Cairo', 'Tajawal', 'Segoe UI', system-ui, 'Noto Sans Arabic', sans-serif;
  --p-display: 'Cairo', 'Tajawal', 'Segoe UI', system-ui, 'Noto Sans Arabic', sans-serif;
  --p-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* Printable width per paper (mechanical margins removed) */
  --w-58: 48mm;
  --w-72: 64mm;
  --w-80: 72mm;
}

@font-face { font-family: 'Cairo'; src: url('../fonts/Cairo-arabic.woff2') format('woff2');     font-weight: 200 1000; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'Cairo'; src: url('../fonts/Cairo-latin-ext.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cairo'; src: url('../fonts/Cairo-latin.woff2') format('woff2');     font-weight: 200 1000; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--p-font);
  color: var(--p-ink);
  background: #fff;
  direction: rtl;
  text-align: start;
  line-height: 1.45;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  font-variant-numeric: tabular-nums lining-nums;
}
img { display: block; max-width: 100%; }
table { border-collapse: collapse; width: 100%; }
td, th { vertical-align: top; }
.num, td.num, th.num { direction: ltr; unicode-bidi: isolate; text-align: end; white-space: nowrap; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.center { text-align: center; }
.end { text-align: end; }
.start { text-align: start; }
.bold, b, strong { font-weight: 700; }
.small { font-size: .85em; }
.muted { color: var(--p-ink-3); }
.mono { font-family: var(--p-mono); }
.upper { text-transform: uppercase; }
.nowrap { white-space: nowrap; }
.break-before { break-before: page; page-break-before: always; }
.break-after { break-after: page; page-break-after: always; }
.avoid-break { break-inside: avoid; page-break-inside: avoid; }

/* Screen-only chrome (print toolbar). Never printed. */
.print-toolbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 16px;
  background: #1B1D21; color: #F4F5F7;
  font-size: 14px;
}
.print-toolbar button, .print-toolbar a {
  font: inherit; font-weight: 700; color: inherit; cursor: pointer;
  min-height: 40px; padding: 0 14px; border-radius: 10px;
  border: 1px solid rgb(255 255 255 / .2); background: rgb(255 255 255 / .08);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.print-toolbar button.primary { background: #E9EAEC; color: #1B1D21; border-color: #E9EAEC; }
.print-toolbar .spacer { flex: 1; }
.print-toolbar select { font: inherit; min-height: 40px; border-radius: 10px; padding: 0 10px; border: 1px solid rgb(255 255 255 / .2); background: #2A2D33; color: inherit; }

/* On screen, paper floats on a grey desk so the operator sees the real width */
@media screen {
  body { background: #E8EAED; padding: 24px 12px 64px; }
  body:has(.print-toolbar) { padding-top: 0; }
  .paper {
    background: #fff;
    margin: 24px auto;
    box-shadow: 0 2px 6px rgb(0 0 0 / .12), 0 18px 40px rgb(0 0 0 / .14);
  }
  .paper-a4 .paper { width: 210mm; min-height: 297mm; padding: 14mm 14mm 16mm; }
  .paper-58 .paper { width: 58mm; padding: 4mm 5mm 8mm; }
  .paper-72 .paper { width: 72mm; padding: 4mm 4mm 8mm; }
  .paper-80 .paper { width: 80mm; padding: 4mm 4mm 8mm; }
  /* Torn bottom edge on thermal preview */
  .paper-58 .paper, .paper-72 .paper, .paper-80 .paper { position: relative; }
  .paper-58 .paper::after, .paper-72 .paper::after, .paper-80 .paper::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px;
    background: linear-gradient(-45deg, transparent 6px, #fff 0) 0 0 / 12px 12px, linear-gradient(45deg, transparent 6px, #fff 0) 6px 0 / 12px 12px;
    background-repeat: repeat-x;
  }
}

/* ---------------------------------------------------------------------
   Receipts (thermal). Font sizes chosen for 203dpi legibility.
   --------------------------------------------------------------------- */
.paper-58, .paper-72, .paper-80 { font-size: 11px; }
.paper-80 { font-size: 12px; }
.rc { width: 100%; }
.rc-header { text-align: center; margin-bottom: 6px; }
.rc-logo { max-height: 60px; max-width: 70%; margin: 0 auto 4px; filter: grayscale(1) contrast(1.15); }
.rc-shop { font-family: var(--p-display); font-weight: 700; font-size: 1.45em; line-height: 1.2; }
.rc-sub { font-size: .92em; color: var(--p-ink-2); }
.rc-title { text-align: center; font-weight: 700; font-size: 1.2em; margin: 4px 0; padding: 3px 0; border-top: 1px solid var(--p-rule); border-bottom: 1px solid var(--p-rule); }
.rc-meta { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; font-size: .95em; margin: 4px 0; }
.rc-meta .k { color: var(--p-ink-2); }
.rc-meta .v { text-align: end; direction: ltr; unicode-bidi: isolate; font-weight: 700; }
.rc-dash { border: 0; border-top: 1px dashed var(--p-rule); margin: 5px 0; }
.rc-solid { border: 0; border-top: 1px solid var(--p-rule); margin: 5px 0; }
.rc-double { border: 0; border-top: 3px double var(--p-rule); margin: 5px 0; }
.rc-items { width: 100%; }
.rc-items th { font-weight: 700; font-size: .92em; padding: 2px 0 3px; border-bottom: 1px solid var(--p-rule); text-align: start; }
.rc-items td { padding: 3px 0; border-bottom: 1px dotted var(--p-rule-soft); }
.rc-items tr:last-child td { border-bottom: 0; }
.rc-items .c-name { width: auto; }
.rc-items .c-qty { width: 12%; text-align: center; direction: ltr; }
.rc-items .c-price, .rc-items .c-total { width: 20%; text-align: end; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.rc-items .c-total { font-weight: 700; }
.rc-items .item-name { font-weight: 700; display: block; }
.rc-items .item-mods { display: block; font-size: .88em; color: var(--p-ink-2); }
.rc-items .item-note { display: block; font-size: .88em; font-style: italic; color: var(--p-ink-2); }
.rc-totals { width: 100%; margin-top: 4px; }
.rc-totals td { padding: 2px 0; }
.rc-totals td:last-child { text-align: end; direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-weight: 700; }
.rc-totals tr.grand td { font-family: var(--p-display); font-weight: 700; font-size: 1.35em; padding-top: 4px; border-top: 1px solid var(--p-rule); }
.rc-totals tr.muted td { color: var(--p-ink-2); font-weight: 400; }
.rc-payments { width: 100%; font-size: .95em; }
.rc-payments td { padding: 1px 0; }
.rc-payments td:last-child { text-align: end; direction: ltr; unicode-bidi: isolate; }
.rc-change { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.1em; padding: 3px 0; }
.rc-words { font-size: .9em; text-align: center; margin: 4px 0; color: var(--p-ink-2); }
.rc-qr { display: grid; place-items: center; margin: 8px auto 4px; }
.rc-qr img, .rc-qr canvas, .rc-qr svg { width: 34mm; height: 34mm; image-rendering: pixelated; }
.paper-58 .rc-qr img, .paper-58 .rc-qr canvas, .paper-58 .rc-qr svg { width: 28mm; height: 28mm; }
.rc-footer { text-align: center; margin-top: 6px; font-size: .95em; }
.rc-footer .thanks { font-weight: 700; font-size: 1.1em; }
.rc-footer .policy { font-size: .85em; color: var(--p-ink-2); margin-top: 3px; }
.rc-barcode { text-align: center; font-family: var(--p-mono); letter-spacing: .12em; margin-top: 4px; }
.rc-feed { height: 10mm; }
.rc-badge { display: inline-block; border: 1px solid var(--p-rule); padding: 1px 8px; border-radius: 3px; font-weight: 700; font-size: .95em; }
.rc-copy { text-align: center; font-weight: 700; font-size: .9em; margin-bottom: 4px; letter-spacing: .04em; }
.rc-void { text-align: center; font-weight: 700; font-size: 1.4em; border: 2px solid var(--p-rule); padding: 4px; margin: 6px 0; letter-spacing: .1em; }
/* Kitchen ticket variant */
.kt .rc-items td { font-size: 1.25em; padding: 4px 0; }
.kt .rc-items .c-qty { font-size: 1.5em; font-weight: 700; }
.kt .rc-title { font-size: 1.5em; }

/* ---------------------------------------------------------------------
   A4 documents — invoices, purchase bills, statements, reports
   --------------------------------------------------------------------- */
.paper-a4 { font-size: 12px; }
.doc { width: 100%; }
.doc-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--p-ink); margin-bottom: 14px; }
.doc-brand { display: flex; gap: 12px; align-items: center; }
.doc-logo { max-height: 64px; max-width: 120px; }
.doc-shop { font-family: var(--p-display); font-weight: 700; font-size: 1.6em; line-height: 1.2; }
.doc-shop-meta { color: var(--p-ink-2); font-size: .95em; line-height: 1.5; }
.doc-titlebox { text-align: end; }
.doc-title { font-family: var(--p-display); font-weight: 700; font-size: 1.7em; line-height: 1.2; }
.doc-no { font-size: 1.1em; font-weight: 700; direction: ltr; unicode-bidi: isolate; }
.doc-kind { display: inline-block; border: 1.5px solid var(--p-ink); padding: 2px 10px; border-radius: 4px; font-weight: 700; margin-top: 4px; }
.doc-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 16px; margin-bottom: 14px; }
.doc-meta .box { border: 1px solid var(--p-rule-soft); border-radius: 6px; padding: 8px 10px; }
.doc-meta .box .k { font-size: .85em; color: var(--p-ink-3); font-weight: 700; margin-bottom: 2px; }
.doc-meta .box .v { font-weight: 700; }
.doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
.doc-party { border: 1px solid var(--p-rule-soft); border-radius: 6px; padding: 10px 12px; }
.doc-party h4 { font-size: .9em; color: var(--p-ink-3); margin-bottom: 4px; }
.doc-table { width: 100%; margin-bottom: 12px; }
.doc-table th { background: #F1F2F4; border: 1px solid var(--p-rule-soft); padding: 7px 8px; font-weight: 700; text-align: start; font-size: .95em; }
.doc-table td { border: 1px solid var(--p-rule-soft); padding: 6px 8px; }
.doc-table tbody tr:nth-child(even) td { background: #FAFAFB; }
.doc-table td.num, .doc-table th.num { text-align: end; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.doc-table th.num { text-align: end; }
.doc-table td.center, .doc-table th.center { text-align: center; }
.doc-table tfoot td { font-weight: 700; background: #F1F2F4; }
.doc-table .idx { width: 32px; text-align: center; color: var(--p-ink-3); }
.doc-table tr { break-inside: avoid; page-break-inside: avoid; }
.doc-table thead { display: table-header-group; }
.doc-table tfoot { display: table-footer-group; }
.doc-bottom { display: grid; grid-template-columns: 1fr minmax(240px, 300px); gap: 16px; align-items: start; }
.doc-notes { font-size: .95em; color: var(--p-ink-2); }
.doc-notes h4 { font-size: .9em; color: var(--p-ink-3); margin-bottom: 4px; }
.doc-totals { width: 100%; }
.doc-totals td { padding: 5px 8px; border-bottom: 1px solid var(--p-rule-soft); }
.doc-totals td:last-child { text-align: end; direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-weight: 700; }
.doc-totals tr.grand td { font-family: var(--p-display); font-size: 1.3em; font-weight: 700; border-top: 2px solid var(--p-ink); border-bottom: 2px solid var(--p-ink); background: #F1F2F4; }
.doc-words { margin-top: 8px; font-size: .95em; padding: 6px 10px; border: 1px dashed var(--p-rule-soft); border-radius: 6px; }
.doc-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; text-align: center; font-size: .95em; }
.doc-sign > div { border-top: 1px solid var(--p-ink); padding-top: 6px; }
.doc-qr { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.doc-qr img, .doc-qr svg, .doc-qr canvas { width: 30mm; height: 30mm; }
.doc-footer { margin-top: 20px; padding-top: 8px; border-top: 1px solid var(--p-rule-soft); text-align: center; font-size: .85em; color: var(--p-ink-3); }
.doc-stamp { display: inline-block; border: 3px double var(--p-ink); padding: 4px 16px; font-weight: 700; font-size: 1.3em; letter-spacing: .08em; rotate: -8deg; opacity: .8; }
.doc-stamp.paid { color: #1B6B47; border-color: #1B6B47; }
.doc-stamp.void { color: #A3271C; border-color: #A3271C; }

/* Reports (landscape-friendly tables, many columns) */
.rpt-title { font-family: var(--p-display); font-weight: 700; font-size: 1.5em; text-align: center; }
.rpt-sub { text-align: center; color: var(--p-ink-2); margin-bottom: 12px; }
.rpt-filters { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .9em; color: var(--p-ink-2); justify-content: center; margin-bottom: 10px; }
.rpt-table { width: 100%; font-size: .95em; }
.rpt-table th { border-bottom: 2px solid var(--p-ink); padding: 6px 6px; text-align: start; background: #F1F2F4; }
.rpt-table td { border-bottom: 1px solid var(--p-rule-soft); padding: 5px 6px; }
.rpt-table tr { break-inside: avoid; }
.rpt-table thead { display: table-header-group; }
.rpt-table tfoot td { font-weight: 700; border-top: 2px solid var(--p-ink); border-bottom: 0; }
.rpt-table .num { text-align: end; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.rpt-group td { background: #F4F5F7; font-weight: 700; }
.rpt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
.rpt-stat { border: 1px solid var(--p-rule-soft); border-radius: 6px; padding: 8px 10px; text-align: center; }
.rpt-stat .k { font-size: .85em; color: var(--p-ink-3); }
.rpt-stat .v { font-family: var(--p-display); font-weight: 700; font-size: 1.3em; direction: ltr; unicode-bidi: isolate; }
.page-no::after { content: counter(page); }

/* ---------------------------------------------------------------------
   @page — exact paper sizes. Thermal rolls use auto height (no blank feed).
   --------------------------------------------------------------------- */
@page { margin: 0; }
.paper-a4 { --page-size: A4; }

@media print {
  html, body { background: #fff !important; padding: 0 !important; margin: 0 !important; width: auto; }
  .print-toolbar, .no-print, .screen-only { display: none !important; }
  .paper { box-shadow: none !important; margin: 0 !important; }

  /* A4 */
  body.paper-a4 .paper { width: 100%; min-height: 0; padding: 0; }
  body.paper-a4 { font-size: 11.5pt; }

  /* Thermal — page width equals the roll, content width equals the printable area */
  body.paper-58 .paper { width: var(--w-58); padding: 0; margin: 0 auto !important; }
  body.paper-72 .paper { width: var(--w-72); padding: 0; margin: 0 auto !important; }
  body.paper-80 .paper { width: var(--w-80); padding: 0; margin: 0 auto !important; }
  body.paper-58, body.paper-72, body.paper-80 { width: 100%; }
  body.paper-58 { font-size: 9.5pt; }
  body.paper-72 { font-size: 9.5pt; }
  body.paper-80 { font-size: 10pt; }
  .rc-items td, .rc-totals td { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Named pages selected by body class through a wrapper; browsers honour the
   first matching @page for the document, so each layout prints its own rule. */
@page a4 { size: A4 portrait; margin: 12mm 12mm 14mm; }
@page a4l { size: A4 landscape; margin: 10mm 12mm; }
@page r58 { size: 58mm auto; margin: 2mm 4mm 6mm 4mm; }
@page r72 { size: 72mm auto; margin: 2mm 4mm 6mm 4mm; }
@page r80 { size: 80mm auto; margin: 2mm 4mm 6mm 4mm; }
body.paper-a4 .paper { page: a4; }
body.paper-a4.landscape .paper { page: a4l; }
body.paper-58 .paper { page: r58; }
body.paper-72 .paper { page: r72; }
body.paper-80 .paper { page: r80; }