@font-face{
font-family:'Vazirmatn';
src:url('') format('woff2');
font-weight:100 900;font-display:swap;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
font-family:'Vazirmatn',system-ui,-apple-system,'Segoe UI',Tahoma,Arial,sans-serif;
color:#111;direction:rtl;-webkit-print-color-adjust:exact;print-color-adjust:exact;
font-size:13px;line-height:1.7;
}
/* On screen, give the operator a neutral backdrop + a print hint bar. */
@media screen{
body{background:#e9eaee;padding:24px}
/* On screen the page-box margin (@page) doesn't apply, so give the sheet its
own inner padding to mirror the printed A4 margins. Print keeps using
@page so multi-page invoices margin every page. */
.sheet{width:210mm;background:#fff;margin:0 auto 24px;box-shadow:0 1px 4px rgba(0,0,0,.15);padding:14mm 12mm}
.sheet--a5{width:148mm;padding:7mm 8mm}
.label{margin:0 auto}
.alabel{margin:0 auto 24px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15)}
/* Rotated preview: the wrapper is the physical page; the .alabel inside is
absolutely positioned and rotated, so the wrapper is the white sheet. */
.alabel-rot{margin:0 auto 24px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.alabel-rot .alabel{margin:0;box-shadow:none}
.rahkar-print-bar{
position:fixed;top:0;inset-inline:0;z-index:10;display:flex;gap:12px;
align-items:center;justify-content:center;background:#0a66c2;color:#fff;
padding:10px;font-size:14px;
}
.rahkar-print-bar button{
font:inherit;cursor:pointer;border:0;border-radius:6px;
background:#fff;color:#0a66c2;padding:6px 18px;font-weight:700;
}
body{padding-top:64px}
}
@media print{.rahkar-print-bar{display:none}}
/* ---- Invoice ----
Print: @page owns the page size and margins, so the sheet fills the printable
area and can never be wider than the margin box.
Screen: the @media screen rule above fakes an A4 page with width + padding. */
.sheet{page-break-after:always}
.sheet:last-child{page-break-after:auto}
.inv{padding:0}
.inv-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #0a66c2;padding-bottom:12px;margin-bottom:16px}
.inv-brand{display:flex;gap:12px;align-items:center}
.inv-brand .logo{max-width:120px;max-height:60px}
.inv-brand .logo svg,.inv-brand .logo img{max-width:120px;max-height:60px;height:auto}
.inv-title{text-align:left}
.inv-title h1{margin:0;font-size:20px;color:#0a66c2}
.inv-title .meta{font-size:12px;color:#555;margin-top:4px}
.inv-parties{display:flex;gap:16px;margin-bottom:16px}
.inv-parties .box{flex:1;border:1px solid #ddd;border-radius:8px;padding:10px}
.inv-parties h2{margin:0 0 6px;font-size:13px;color:#0a66c2}
.inv-parties .row{font-size:12px;margin:2px 0}
table.items{width:100%;border-collapse:collapse;margin-bottom:14px}
table.items th,table.items td{border:1px solid #ddd;padding:7px 8px;text-align:right;font-size:12px}
table.items th{background:#f3f6fb;color:#0a66c2;font-weight:700}
table.items td.num,table.items th.num{text-align:center;white-space:nowrap}
.totals{width:45%;margin-inline-start:auto;border-collapse:collapse}
.totals td{padding:5px 8px;font-size:12px}
.totals tr.grand td{font-weight:700;font-size:14px;border-top:2px solid #0a66c2;color:#0a66c2}
.inv-foot{margin-top:18px;border-top:1px dashed #bbb;padding-top:10px;font-size:11px;color:#666;text-align:center}
/* ---- Postal label (two per A4) ---- */
.label{
width:210mm;height:148.5mm;padding:12mm;page-break-inside:avoid;
border-bottom:1px dashed #999;
}
.label-inner{height:100%;border:2px solid #111;border-radius:8px;padding:8mm;display:flex;flex-direction:column}
.label-row{display:flex;gap:8mm;flex:1}
.label-box{flex:1;display:flex;flex-direction:column}
.label-box h2{margin:0 0 6px;font-size:14px;color:#0a66c2;border-bottom:1px solid #ddd;padding-bottom:4px}
.label-name{font-size:16px;font-weight:700;margin-bottom:4px}
.label-addr{font-size:14px;line-height:2}
.label-meta{font-size:13px;margin-top:6px}
.label-foot{display:flex;justify-content:space-between;border-top:1px solid #ddd;margin-top:8px;padding-top:6px;font-size:12px;color:#444}
/* ---- Thermal roll label (one label per order; long orders flow on) ----
Top-anchored stack; WIDTH is pinned inline to the configured roll size
(cm→mm in the renderer), height is content-defined so a long order simply
continues onto the next physical label. Thin grey rules instead of solid
black fills: a thermal head is 1-bit, so grey prints as light dithering and
uses far less ribbon than a black bar. Recipient and sender sit side by side
by default; .alabel--onecol stacks them. On short rolls the renderer adds
.alabel--compact, which shrinks every dimension. The logo's max width comes
from the --logo-w custom property, set inline. */
.alabel{
width:100mm;padding:2mm;page-break-after:always;
color:#000;font-size:13px;line-height:1.55;
}
.alabel:last-child{page-break-after:auto}
.alabel-head{display:flex;justify-content:space-between;align-items:center;gap:3mm;
border-bottom:1px solid #444;padding-bottom:1.5mm;margin-bottom:2mm}
.alabel-head .logo svg,.alabel-head .logo img{max-width:var(--logo-w,42mm);max-height:16mm;height:auto;width:auto}
.alabel--onecol .alabel-parties{flex-direction:column;gap:1.5mm}
/* Stacked boxes must be content-height, not vertically stretched: the base
.rcpt{flex:1} would grow in a column flexbox and add empty space that pushes
the label onto a second page. */
.alabel--onecol .alabel-box{flex:0 0 auto}
.alabel-head .logo .name{font-weight:700;font-size:17px}
.alabel-headmeta{text-align:left;font-size:14px;font-weight:700;line-height:1.6}
.alabel-parties{display:flex;gap:2mm;margin-bottom:2mm;align-items:stretch}
.alabel-box{border:1px solid #555;border-radius:1.5mm;padding:2mm}
.alabel-box.rcpt{flex:1}
.alabel-box.sndr{flex:0 0 34mm;font-size:12px}
.alabel-box h2{margin:0 0 1mm;font-size:12px;font-weight:700;
border-bottom:1px solid #777;padding-bottom:.8mm}
.alabel-name{font-size:16px;font-weight:700;margin-bottom:1mm}
.alabel-addr{font-size:14px;line-height:1.7}
.alabel-meta{margin-top:1mm;font-size:13px}
.alabel-meta b{font-weight:700}
.alabel-box.sndr .alabel-name{font-size:13px}
.alabel-box.sndr .alabel-addr{font-size:12px;line-height:1.55}
table.alabel-items{width:100%;border-collapse:collapse;margin-bottom:2mm}
table.alabel-items th,table.alabel-items td{border:1px solid #777;padding:1.2mm 1.5mm;font-size:13px;text-align:right}
table.alabel-items th{font-weight:700;text-align:center;border-bottom:1px solid #444}
table.alabel-items td.qty,table.alabel-items th.qty,
table.alabel-items td.row,table.alabel-items th.row{text-align:center;white-space:nowrap;width:1%}
.alabel-note{border:1px dashed #777;border-radius:1.5mm;padding:1.5mm 2mm;margin-bottom:2mm;font-size:12px}
.alabel-note b{font-weight:700}
.alabel-foot{border-top:1px solid #777;padding-top:1.2mm;font-size:12px;font-weight:700;
display:flex;justify-content:space-between}
/* Compact variant for SHORT rolls (8×5cm and similar): everything shrinks so
the whole label — logo, parties, footer — fits inside a ~50mm-tall sticker
without overflowing. Applied by the renderer when the configured height is
small. With the items table on, a 5cm label is too short to hold it; the
admin turns items off for such rolls, and overflow is clipped regardless. */
.alabel--compact{padding:1.5mm;font-size:8px;line-height:1.3}
.alabel--compact .alabel-head{padding-bottom:1mm;margin-bottom:1mm}
.alabel--compact .alabel-head .logo svg,.alabel--compact .alabel-head .logo img{max-height:8mm}
.alabel--compact .alabel-head .logo .name{font-size:10px}
.alabel--compact .alabel-headmeta{font-size:8px;line-height:1.25}
.alabel--compact .alabel-parties{gap:1.5mm;margin-bottom:1mm}
.alabel--compact .alabel-box{padding:1mm;border-radius:1mm}
.alabel--compact .alabel-box.sndr{flex:0 0 24mm;font-size:7px}
.alabel--compact .alabel-box h2{font-size:8px;margin:0 0 .5mm;padding-bottom:.3mm}
.alabel--compact .alabel-name{font-size:9px;margin-bottom:.3mm}
.alabel--compact .alabel-addr{font-size:8px;line-height:1.3}
.alabel--compact .alabel-meta{font-size:8px;margin-top:.3mm}
.alabel--compact .alabel-box.sndr .alabel-name{font-size:8px}
.alabel--compact .alabel-box.sndr .alabel-addr{font-size:7px;line-height:1.25}
.alabel--compact table.alabel-items th,.alabel--compact table.alabel-items td{padding:.5mm 1mm;font-size:8px}
.alabel--compact .alabel-note{font-size:7px;padding:1mm}
.alabel--compact .alabel-foot{font-size:8px;padding-top:.8mm}
/* ---- Classic pre-invoice — compact, sized for A5 ----
Tight enough that ten or more item rows fit on one A5 sheet: small logo,
condensed header, slim rows. Light header rows with slate rules rather than
solid fills, zebra rows, and a dashed cut line with a scissors mark between
the parties table and the items table. */
.inv2{font-size:10px;color:#222}
/* A soft 1px slate divider rather than a heavy near-black 2px rule: the same
separation for far less ink on every printed sheet. */
.inv2-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:6px;margin-bottom:8px;border-bottom:1px solid #94a3b8}
.inv2-logo{flex:0 0 auto;max-width:90px}
.inv2-logo img,.inv2-logo svg{max-width:90px;max-height:34px;height:auto}
.inv2-logo .name{font-weight:700;font-size:13px;color:#1f2937}
.inv2-title{flex:1;text-align:center}
.inv2-title h1{margin:0;font-size:16px;font-weight:700;color:#1f2937}
.inv2-meta{flex:0 0 auto;text-align:left;font-size:10px;line-height:1.6;min-width:120px}
.inv2-meta b{font-weight:700}
.inv2-table{width:100%;border-collapse:collapse}
.inv2-table th,.inv2-table td{border:1px solid #cbd2dc;padding:3px 6px;font-size:10px}
.inv2-parties th{background:#f1f5f9;font-weight:700;text-align:center;font-size:11px;color:#1f2937}
.inv2-parties td{vertical-align:top;width:50%;line-height:1.6}
.inv2-parties .lbl{color:#475569;font-weight:700}
.inv2-cut{position:relative;height:16px;margin:8px 0}
.inv2-cut::before{content:"";position:absolute;top:8px;inset-inline:0;border-top:1px dashed #94a3b8}
.inv2-cut svg{position:absolute;top:0;inset-inline-start:24px;width:16px;height:16px;background:#fff;padding:0 4px;color:#64748b;box-sizing:content-box}
.inv2-cut .hint{position:absolute;top:2px;inset-inline-end:24px;background:#fff;padding:0 6px;font-size:9px;color:#94a3b8}
.inv2-items{margin-top:0}
/* Light header with a slate bottom rule instead of a solid dark fill: a full
black band wastes toner on every printed invoice, and the rule keeps the
header legible at a fraction of the coverage. */
.inv2-items thead th{background:#f1f5f9;color:#1f2937;font-weight:700;text-align:center;font-size:10px;border-bottom:2px solid #94a3b8}
.inv2-items tbody td{text-align:center}
.inv2-items tbody td.desc{text-align:right}
.inv2-items tbody tr:nth-child(even){background:#f8fafc}
.inv2-items .unit del{display:block;color:#9aa6b5;font-size:9px;font-weight:400}
.inv2-items tfoot td{font-size:10px}
.inv2-items .sum-lbl{text-align:right;font-weight:700;color:#334155;background:#f8fafc}
.inv2-items .sum-val{text-align:center;font-weight:700}
.inv2-items tr.grand .sum-lbl,.inv2-items tr.grand .sum-val{background:#eef2ff;color:#1e293b;font-size:11px}
.inv2-foot{margin-top:8px;text-align:center;font-size:9px;color:#64748b;border-top:1px dashed #cbd2dc;padding-top:6px}
window.addEventListener('load', function () {
var go = function () { window.print(); };
if ( document.fonts && document.fonts.ready ) {
document.fonts.ready.then( go ).catch( go );
} else {
go();
}
});