/* ============================================================================ receipt.css — Η απόδειξη (ΑΠΥ): η κάρτα και οι σελίδες εκτύπωσης. Ο κώδικας: assets/js/views/receipt-print.js. ⚠ ΛΕΥΚΟ ΧΑΡΤΙ, ΜΟΝΟ ΓΡΑΜΜΕΣ (εντολή ιδιοκτήτη 27.09.2026: «make sure the background is white so that it doesnt waste a lot of ink»). ΚΑΝΕΝΑ `background` με χρώμα, καμία σκιά μέσα στην κάρτα. Χρώμα έχουν μόνο: το διπλό περίγραμμα, η μία χρυσή γραμμή, ο τίτλος και το σύνολο. ⚠ ΤΑ ΧΡΩΜΑΤΑ ΕΙΝΑΙ ΣΤΑΘΕΡΑ ΕΔΩ, ΟΧΙ var(--navy)/var(--gold). Τα tokens αλλάζουν στη νύχτα (το --navy γίνεται #24405f, το --ink ανοιχτό) — μια απόδειξη τυπωμένη από σκοτεινό θέμα θα έβγαινε με ανοιχτά γράμματα. Οι τιμές είναι οι ΦΩΤΕΙΝΕΣ του tokens.css, αντιγραμμένες ΜΙΑ φορά εδώ. Εξαίρεση το περίγραμμα: #1c3868 = το μπλε του ΠΑΛΙΟΥ, μετρημένο μέσα στο PDF (0.11/0.22/0.408)· το --navy #0a192f σε γραμμή 1px τυπώνεται μαύρο, και ζητήθηκε «navy … like the old». ⚠ ΜΗΝ ΒΑΛΕΙΣ `@page` ΕΔΩ. Είναι ΚΑΘΟΛΙΚΟ — θα γύριζε/μηδένιζε ΚΑΘΕ άλλη εκτύπωση της εφαρμογής. Μέγεθος και προσανατολισμό τα βάζει ο `printSheet()` (views/voucher.js) μόνο όση ώρα τυπώνονται αποδείξεις. ΟΛΑ ΣΕ em: η ίδια κάρτα βγαίνει 13px στην οθόνη, 10,5pt στο όρθιο Α4 (ίδια μεγέθη γραμμάτων με το παλιό) και 7,5pt στο 2×2 — αλλάζει ΜΟΝΟ το font-size της `.rcpt` και όλα ακολουθούν αναλογικά. ========================================================================== */ .rcpt { --rc-ink: #1a1a1a; /* = --ink, φως */ --rc-navy: #0a192f; /* = --navy, φως */ --rc-edge: #1c3868; /* το περίγραμμα του παλιού */ --rc-gold: #d0ab64; /* = --gold, φως */ --rc-label: #56606e; /* = --muted, φως */ --rc-line: #d9dee6; /* λεπτές διαχωριστικές */ --rc-crit: #ba1a1a; /* = --crit */ --rc-gap: 1.05em; /* Το πλέγμα στενεύει σε 2 στήλες ΜΕ ΒΑΣΗ ΤΟ ΠΛΑΤΟΣ ΤΗΣ ΚΑΡΤΑΣ, όχι της οθόνης: η ίδια κάρτα ζει σε παράθυρο, σε σελίδα και σε κελί 2×2. */ container: rcpt / inline-size; box-sizing: border-box; width: 100%; display: flex; flex-direction: column; gap: var(--rc-gap); padding: 1.7em 2em 1.6em; border: .36em double var(--rc-edge); background: #fff; color: var(--rc-ink); color-scheme: light; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.38; letter-spacing: normal; text-align: left; font-variant-numeric: tabular-nums; -webkit-text-size-adjust: 100%; break-inside: avoid; page-break-inside: avoid; } .rcpt *, .rcpt *::before, .rcpt *::after { box-sizing: border-box; } .rcpt b { color: inherit; font-weight: 700; } /* ── Κεφαλή: σήμα αριστερά, στοιχεία εταιρείας δεξιά, χρυσή γραμμή κάτω ── */ .rcpt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5em; padding-bottom: 1em; border-bottom: .1em solid var(--rc-gold); } .rcpt-logo { display: block; flex: none; height: 7.6em; width: auto; } .rcpt-co { text-align: right; font-size: .9em; line-height: 1.45; font-style: normal; color: var(--rc-ink); } .rcpt-co-name { font-weight: 700; letter-spacing: .04em; color: var(--rc-navy); } .rcpt-ic { margin-right: .3em; } .rcpt-title { text-align: center; font-size: 1.22em; font-weight: 700; line-height: 1.25; color: var(--rc-navy); letter-spacing: .005em; } /* Δοκιμαστική: κόκκινο ΠΕΡΙΓΡΑΜΜΑ και γράμματα, ΟΧΙ γεμάτο κουτί (μελάνι). Κάθεται στη ΜΕΣΗ της κεφαλής (τα `auto` περιθώρια την κεντράρουν ανάμεσα σε σήμα και στοιχεία) — δεν παίρνει δική της σειρά, βλ. receipt-print.js. */ .rcpt-test { align-self: center; flex: 0 1 auto; margin: 0 auto; border: 1px solid var(--rc-crit); border-radius: .6em; padding: .35em .9em; color: var(--rc-crit); font-size: .72em; font-weight: 700; letter-spacing: .06em; line-height: 1.3; text-align: center; } .rcpt-test > span { display: block; } /* ── Το πλέγμα των τεσσάρων στηλών — ΙΔΙΟ σε όλες τις γραμμές ───────────── Ετικέτες στη σειρά 1, τιμές στη σειρά 2· η θέση από κλάσεις (rc-c*, rc-r*), ώστε στο DOM να μένει ζευγάρι ετικέτα-τιμή. `baseline`: το μεγάλο GRAND TOTAL κάθεται στην ίδια γραμμή με PRICE και VAT, όχι ψηλότερα. */ .rcpt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1.4em; row-gap: 0; align-items: baseline; } .rc-r1 { grid-row: 1; } .rc-r2 { grid-row: 2; } .rc-c1 { grid-column: 1; } .rc-c2 { grid-column: 2; } .rc-c3 { grid-column: 3; } .rc-c4 { grid-column: 4; } .rc-c12 { grid-column: 1 / span 2; } .rc-c34 { grid-column: 3 / span 2; } .rcpt-lbl { font-size: .7em; font-weight: 600; line-height: 1.25; letter-spacing: .14em; text-transform: uppercase; color: var(--rc-label); } .rcpt-val { margin-top: .5em; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; } .rcpt-val.is-strong { font-weight: 600; } .rcpt-mark { letter-spacing: .02em; } .rcpt-party { padding: .85em 0; border-top: 1px solid var(--rc-line); border-bottom: 1px solid var(--rc-line); } /* Η γραμμή των χρημάτων: το QR πιάνει και τις δύο σειρές, και ΟΛΟ το περίσσιο ύψος του το παίρνει η σειρά των τιμών (1fr) — αλλιώς το πλέγμα το μοιράζει και οι ετικέτες κατεβαίνουν στη μέση. */ .rcpt-money { grid-template-rows: auto 1fr; } .rcpt-val.rcpt-total { margin-top: .2em; font-size: 1.62em; font-weight: 700; line-height: 1.1; letter-spacing: -.005em; color: var(--rc-navy); } .rcpt-qr { grid-row: 1 / span 2; align-self: start; justify-self: start; width: 6.8em; height: 6.8em; } .rcpt-qr svg { display: block; width: 100%; height: 100%; } /* ── Στενή κάρτα (παράθυρο σε κινητό): 2 στήλες αντί για 4 ──────────────── Στο χαρτί ΔΕΝ ενεργοποιείται ποτέ: και οι δύο σελίδες δίνουν ~51em. */ @container rcpt (max-width: 40em) { .rcpt-head { gap: 1em; flex-wrap: wrap; } /* Στη στενή κάρτα η μέση της κεφαλής δεν χωρά: η σήμανση πάει σε δική της γραμμή, κάτω από σήμα και στοιχεία, πάνω από τη χρυσή γραμμή. */ .rcpt-test { order: 3; flex-basis: 100%; } .rcpt-logo { height: 5.6em; } .rcpt-co { font-size: .8em; } .rcpt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rcpt-grid .rc-c3.rc-r1 { grid-column: 1; grid-row: 3; margin-top: 1em; } .rcpt-grid .rc-c3.rc-r2 { grid-column: 1; grid-row: 4; } .rcpt-grid .rc-c4.rc-r1 { grid-column: 2; grid-row: 3; margin-top: 1em; } .rcpt-grid .rc-c4.rc-r2 { grid-column: 2; grid-row: 4; } .rcpt-grid .rc-c12.rc-r1, .rcpt-grid .rc-c12.rc-r2 { grid-column: 1 / span 2; } .rcpt-grid .rc-c34.rc-r1 { grid-column: 1 / span 2; grid-row: 3; margin-top: 1em; } .rcpt-grid .rc-c34.rc-r2 { grid-column: 1 / span 2; grid-row: 4; } .rcpt-money { grid-template-rows: auto auto auto 1fr; } .rcpt-money .rcpt-qr { grid-column: 2; grid-row: 3 / span 2; margin-top: 1em; } } /* ═══════════════════════════════════════════════════════════════════════════ Σελίδες ═══════════════════════════════════════════════════════════════════════════ */ .rcpt-page { box-sizing: border-box; background: #fff; } /* Μία απόδειξη: Α4 όρθιο, η κάρτα ΠΑΝΩ, με το ίδιο πλάτος με το παλιό (190mm). Λίγο περισσότερος αέρας ανάμεσα στις γραμμές απ' ό,τι στο 2×2. */ .rcpt-sheet.is-single .rcpt-page { width: 210mm; padding: 10mm; } .rcpt-sheet.is-single .rcpt { font-size: 10.5pt; --rc-gap: 1.45em; } /* Πολλές: Α4 οριζόντιο, 2×2, ΑΚΡΙΒΩΣ όπως το παλιό· η τελευταία σελίδα κρατά τα ίδια κελιά (1 απόδειξη = πάνω αριστερά, όχι τεντωμένη). ⚠ 209mm ΚΑΙ ΟΧΙ 210: στρογγυλοποίηση προς τα πάνω = ΚΕΝΗ σελίδα μετά από κάθε φύλλο (το ίδιο μάθημα με το 296mm του voucher). */ .rcpt-sheet.is-batch .rcpt-page { width: 297mm; height: 209mm; padding: 8mm; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8mm; break-after: page; page-break-after: always; } .rcpt-sheet.is-batch .rcpt-page:last-child { break-after: auto; page-break-after: auto; } .rcpt-sheet.is-batch .rcpt-slot { display: flex; min-width: 0; min-height: 0; } /* Κάθε κάρτα γεμίζει το κελί της: ίδιο ύψος και οι τέσσερις, και το περίσσιο ύψος μοιράζεται ΑΝΑΜΕΣΑ στις γραμμές, όχι κάτω από το QR. ⚠ ΤΟ ΚΕΛΙ ΕΙΝΑΙ ΣΤΑΘΕΡΟ — ΚΑΙ ΤΟ ΕΠΙΒΑΛΛΕΙ Η CSS, ΟΧΙ Η ΕΛΠΙΔΑ (έλεγχος 27.09.2026). Στη σελιδοποίηση του Chrome μια κάρτα με περιεχόμενο πάνω από το κελί ΦΟΥΣΚΩΝΕ το πλέγμα: μετρημένο στο PDF, κάρτα 8,1→111,3mm πάνω σε γειτονική που ξεκινούσε στα 108,6mm (2,7mm επικάλυψη) και κάτω σειρά ως τα 204,9mm. Φυσικό ύψος κανονικής κάρτας 86,3mm σε κελί 92,5mm — σχεδόν καθόλου αέρας. Τρία μέτρα: 1. `height:100%` + `overflow:hidden` σε κελί ΚΑΙ κάρτα: το περίγραμμα (ανήκει στην `.rcpt`) δεν βγαίνει ΠΟΤΕ έξω από το κελί. 2. Αέρας: ελάχιστο κενό .8em (ήταν 1.05) και λίγο λιγότερο γέμισμα. Με `space-between` η κανονική κάρτα δείχνει ίδια — το κενό είναι ΠΑΤΩΜΑ, το περίσσιο μοιράζεται όπως πριν. Η σήμανση TEST μπήκε στην κεφαλή. 3. Αν ΠΑΛΙ δεν χωρά, ΣΤΕΝΕΥΕΙ ΜΟΝΟ η γραμμή πελάτη/περιγραφής — ποτέ τα ποσά και το QR, που είναι το νόημα της απόδειξης. Όρια κειμένου: πελάτης/περιγραφή 2 γραμμές, τρόπος πληρωμής 2 γραμμές («Domestic bank account» πιάνει δύο). Μετρημένο μετά (headless Chrome, εξομοίωση print): κανονική 81,8mm, χειρότερη (TEST + 2 γραμμές παντού) 88,6mm — 3,9mm αέρας στο κελί των 92,5mm, και στο PDF ΚΑΘΕ περίγραμμα μέσα στο κελί του (8,1→100,4 / 108,6→201,0mm). */ .rcpt-sheet.is-batch .rcpt-slot { overflow: hidden; } .rcpt-sheet.is-batch .rcpt { flex: 1 1 auto; height: 100%; min-height: 0; overflow: hidden; font-size: 7.5pt; justify-content: space-between; --rc-gap: .8em; padding: 1.35em 2em 1.25em; } .rcpt-sheet.is-batch .rcpt > * { flex-shrink: 0; } .rcpt-sheet.is-batch .rcpt > .rcpt-party { flex-shrink: 1; min-height: 0; overflow: hidden; } .rcpt-sheet.is-batch .rcpt-party .rc-r2, .rcpt-sheet.is-batch .rcpt-meta .rc-r2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* ── iPad/iPhone: ΩΣ PDF (05.10.2026) ───────────────────────────────────────── Το Safari του iOS τυπώνει ΠΑΝΤΑ υποσέλιδο με URL/ημερομηνία στις ιστοσελίδες («i dont want the https on the bottom of the page when i print from the tablet») — ένα PDF όχι. Εκεί ΤΟ ΙΔΙΟ φύλλο (με `.printing`) στήνεται σε αόρατο iframe όπου το `@media print` ισχύει, και κάθε `.rcpt-page` γίνεται μία σελίδα PDF (core/print-pdf.js). Κανένας ειδικός κανόνας εδώ: ό,τι τυπώνει ο υπολογιστής, αυτό βγαίνει και στο iPad. ΙΣΤΟΡΙΚΟ που απορρίφθηκε: γυρισμένο σε πλαίσιο (`.is-turned`, `.is-framed`), 2 ανά σελίδα, 1 ανά σελίδα + «Διάταξη 4» («too small»). ⚠ ΟΧΙ `@media print and (orientation)`: το iOS απαντά με τη ΣΥΣΚΕΥΗ, όχι με το χαρτί (μετρημένο). */ /* ── Στην οθόνη: το φύλλο δεν φαίνεται ποτέ, εκτός από προεπισκόπηση ───── */ @media screen { .rcpt-holder { display: none !important; } .rcpt-sheet:not(.is-preview) { display: none !important; } .rcpt-sheet.is-preview .rcpt-page { margin: 0 auto 10mm; box-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 10px 28px rgba(0, 0, 0, .10); } } /* ── Στο χαρτί ──────────────────────────────────────────────────────────── Η `base.css` δίνει στα html/body `height:100%` και ο σκοτεινός θέμα δικό του φόντο· όσο τυπώνονται αποδείξεις, λευκό και ύψος όσο το περιεχόμενο. Το `:has()` κρατά την εμβέλεια ΜΟΝΟ σε αυτή την εκτύπωση. */ @media print { html:has(.rcpt-sheet.printing), body:has(.rcpt-sheet.printing) { background: #fff !important; height: auto !important; } .rcpt-sheet.printing { display: block !important; margin: 0 !important; } .rcpt-sheet.printing .rcpt-page { box-shadow: none !important; margin: 0 !important; } .rcpt-sheet.printing ~ *, .no-print { display: none !important; } /* ⚠ Η «ΚΡΑΤΗΣΗ» ΤΟΥ iOS (`holdForIOS`, receipt-print.js). Εκεί το `afterprint` έρχεται με το παράθυρο ΑΚΟΜΗ ΑΝΟΙΧΤΟ, ο `printSheet` επαναφέρει τη σελίδα (φύλλο πίσω στο `.rcpt-holder`, χωρίς `.printing` και `.no-print`), και μια αλλαγή προσανατολισμού/χαρτιού ξαναστήνει την εκτύπωση από τη ζωντανή σελίδα — μετρημένο: τύπωνε την ΕΦΑΡΜΟΓΗ. Όσο το έχει `.rcpt-hold`, στο χαρτί υπάρχουν ΜΟΝΟ οι αποδείξεις, όπου κι αν βρίσκεται το φύλλο (στο body ή πίσω στον γονιό του). Το κενό `.rcpt-holder` που φαίνεται όσο το φύλλο είναι έξω έχει ύψος 0. */ html.rcpt-hold, html.rcpt-hold body { background: #fff !important; height: auto !important; } html.rcpt-hold body > :not(.rcpt-holder):not(.rcpt-sheet) { display: none !important; } html.rcpt-hold .rcpt-holder, html.rcpt-hold .rcpt-sheet { display: block !important; margin: 0 !important; } }