/* ============================================================================
   components.css — Το κοινό λεξιλόγιο. Κάθε οθόνη χτίζεται ΜΟΝΟ από αυτά.

   Ύφος: λεπτές γραμμές αντί για σκιές, ήσυχα γκρι, ένα μόνο έντονο κουμπί ανά
   οθόνη. Ό,τι δεν χρειάζεται τονισμό, δεν τον παίρνει.
   ========================================================================== */

/* ── Κάρτες ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--card-glass); border-radius: var(--r);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-sm);
  /* χωρίς θόλωμα — κάθεται σε σκέτο φόντο, βλ. .escard */
  padding: var(--s5);
}
/* Η «επίπεδη» κρατά το τζάμι αλλά χάνει τη σκιά — μόνο η φωτισμένη ακμή. */
.card.flat { border-color: var(--line-2); box-shadow: 0 1px 0 var(--hair) inset; }
.card.tight { padding: var(--s4); }
/* Ακόμη πιο στενή: για λωρίδες που είναι ήδη μικρές και δεν θέλουν πλαίσιο
   μεγαλύτερο από το περιεχόμενό τους. */
.card.snug { padding: var(--s2) var(--s3); }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.card-t { font-family: var(--serif); font-weight: 500; font-size: var(--fs-lg); letter-spacing: var(--h-track); }
/* `letter-spacing: 0` ρητά: αλλιώς κληρονομεί το --h-track του τίτλου. */
.card-t small {
  display: block; font-family: var(--sans); font-size: var(--fs-sm);
  letter-spacing: 0; color: var(--muted);
  font-weight: 500; margin-top: 3px;
}

.grid { display: grid; gap: var(--s4); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 680px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* ── Κουμπιά ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 15px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--glass); color: var(--ink);
  /* χωρίς θόλωμα — κάθεται σε σκέτο φόντο, βλ. .escard */
  box-shadow: 0 1px 0 var(--hair) inset;
  font-size: var(--fs-base); font-weight: 500; white-space: nowrap;
  transition: background var(--t-btn) var(--spring), border-color var(--t-btn) var(--spring),
              color var(--t-btn) var(--spring), transform var(--t-btn) var(--spring),
              box-shadow var(--t-btn) var(--spring);
}
/* ⚠ ΜΟΝΟ `transform` ΚΑΙ `opacity` ΚΙΝΟΥΝΤΑΙ. Το `top`/`width`/`height` θα
   ανάγκαζε τον browser να ξαναϋπολογίσει τη διάταξη σε κάθε καρέ — με 40
   κουμπιά ανά οθόνη αυτό φαίνεται ως κόλλημα στο κινητό. */
.btn:hover { background: var(--card-2); border-color: var(--line); transform: translateY(-1px); }
/* Το βύθισμα είναι ΓΡΗΓΟΡΟ και βαθύτερο απ' ό,τι ήταν (.985 → .97): στο .985
   η κίνηση ήταν κάτω από το κατώφλι αντίληψης — υπήρχε στον κώδικα, όχι στα
   δάχτυλα. Στο κινητό ΑΥΤΟ είναι η μόνη ανάδραση που παίρνει ο οδηγός. */
.btn:active { transform: translateY(0) scale(.97); transition-duration: var(--t-press); }
.btn svg { width: 16px; height: 16px; transition: transform var(--t-btn) var(--spring); }
.btn:hover svg { transform: translateX(1.5px); }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* Η κύρια ενέργεια: ΚΟΚΚΙΝΗ από τις 06.09.2026 (απόφαση αφεντικού — βλ.
   --action στο tokens.css, όπου μένει και ο λόγος που ήταν χρυσή). Τα γράμματα
   λευκά. Όλα τα χρώματα εδώ περνούν από τα --action* tokens: κανένα hex. */
/* ⚠ ΧΩΡΙΣ ΤΗ ΛΕΥΚΗ ΓΡΑΜΜΗ ΣΤΗΝ ΚΟΡΥΦΗ (εντοπίστηκε από τον ιδιοκτήτη 04.09.2026:
   «στο day mode το πάνω μέρος δεν είναι γεμάτο μέχρι πάνω»). Το `.btn` βάζει
   `box-shadow: 0 1px 0 var(--hair) inset` — και το `--hair` στο ΦΩΣ είναι
   `rgba(255,255,255,.85)`, δηλαδή σχεδόν λευκή γραμμή 1px. Πάνω σε γυάλινο
   κουμπί είναι η φωτισμένη ακμή που θέλαμε· πάνω σε ΓΕΜΑΤΟ χρυσό φαίνεται σαν
   μισοτελειωμένη βαφή. Στη νύχτα το `--hair` πέφτει στο .10 και δεν φαινόταν —
   γι' αυτό επέζησε.
   ⚠ Φεύγει και το `backdrop-filter`: πίσω από αδιαφανές χρυσό δεν θολώνει
   τίποτα, αλλά κοστίζει GPU σε κάθε ένα από τα δεκάδες κουμπιά της οθόνης. */
.btn-primary {
  background: var(--action); border-color: var(--action); color: var(--action-ink);
  font-weight: 700; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.btn-primary:hover {
  background: var(--action-d); border-color: var(--action-d);
  /* Η σκιά είναι ΣΤΟ ΧΡΩΜΑ ΤΟΥ ΚΟΥΜΠΙΟΥ, όχι μαύρη — μέσω token, ώστε να
     ακολουθεί όποιο χρώμα κι αν έχει η κύρια ενέργεια. */
  box-shadow: 0 6px 18px -6px var(--action-glow);
}
.btn-primary:hover svg { transform: rotate(90deg); }
.btn-primary:focus-visible { box-shadow: 0 0 0 3px var(--action-ring); }
/* Το εικονίδιο μέσα στο κουμπί παίρνει κι αυτό το ναυτικό, αλλιώς κληρονομεί
   λευκό από τον γενικό κανόνα των .btn svg και χάνεται μέσα στο χρυσό. */
.btn-primary svg { color: var(--action-ink); }

.btn-navy {
  background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Είχε ΚΑΙ δεύτερο πρόβλημα: κανένα `:hover`, οπότε κληρονομούσε το
   `background: var(--card-2)` του `.btn` — το συμπαγές ναυτικό γινόταν κρεμ με
   λευκά γράμματα στο πέρασμα, δηλαδή άφαντο. */
.btn-navy:hover { background: var(--navy-l); border-color: var(--navy-l); box-shadow: 0 6px 18px -6px rgba(10,25,47,.5); }
/* Το κόκκινο ΔΕΝ γυαλίζει και ΔΕΝ ανασηκώνεται: η καταστροφική ενέργεια δεν
   πρέπει να καλεί το δάχτυλο. Μόνο η λευκή γραμμή φεύγει. */
.btn-danger { background: var(--crit-soft); border-color: transparent; color: var(--crit); box-shadow: none; }
.btn-danger:hover { transform: none; }
.btn-danger:hover { background: var(--crit-soft); border-color: var(--crit); }
/* Χωρίς τη λευκή ακμή του γυαλιού: σε αόρατο κουμπί ζωγράφιζε ένα ορφανό
   φωτεινό «τόξο» από πάνω (☰, εκτύπωση, ‹ ›). */
.btn-ghost { background: none; border-color: transparent; color: var(--muted); box-shadow: none; }
.btn-ghost:hover { background: var(--card-2); color: var(--ink); }
.btn-sm { padding: 5px 11px; font-size: var(--fs-sm); }
.btn-icon { padding: 7px; border-radius: var(--r-sm); }
.btn-icon svg { width: 18px; height: 18px; }
.btn-block { width: 100%; }

/* ══ Η ΛΑΜΨΗ ════════════════════════════════════════════════════════════════
   Μια λοξή ανταύγεια που διασχίζει το κουμπί στο πέρασμα — φως σε γυαλισμένο
   μέταλλο. Επιλογή ιδιοκτήτη 04.09.2026: «Β παντού, Α στο +».

   ⚠ ΓΙΑΤΙ ΟΧΙ ΣΤΟ «+»: ο πλωτήρας είναι ΜΟΝΙΜΑ στην οθόνη και το ποντίκι
   περνά από πάνω του κατά λάθος δεκάδες φορές την ώρα. Εκεί μια λάμψη γίνεται
   τικ. Κρατά μόνο το ανασήκωμα και το βύθισμα.

   ⚠ ΓΙΑΤΙ ΨΕΥΔΟΣΤΟΙΧΕΙΟ: δεν αγγίζει το DOM, άρα κανένα από τα 173 σημεία
   κλήσης δεν αλλάζει. Το `isolation: isolate` φτιάχνει δικό του πλαίσιο
   στοίβαξης ώστε το `z-index:-1` να μείνει ΠΑΝΩ από το φόντο και ΚΑΤΩ από τα
   γράμματα — χωρίς αυτό η ανταύγεια θα περνούσε πίσω από ολόκληρο το κουμπί
   και δεν θα φαινόταν καθόλου.

   ⚠ Το `overflow: hidden` είναι που την ΚΟΒΕΙ στα όρια του κουμπιού. */
.btn-primary, .btn-navy { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after, .btn-navy::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform var(--t-sheen) var(--spring);
}
/* Πάνω στο σκούρο ναυτικό η ίδια ένταση θα ήταν προβολέας — στο μισό. */
.btn-navy::after { background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%); }
.btn-primary:hover::after, .btn-navy:hover::after { transform: translateX(120%); }

/* Ο πλωτήρας. ΔΕΝ κρύβεται στο γραφείο — είναι η μόνη «Νέα κράτηση» που έχει
   η εφαρμογή, ώστε να μην τρώει ύψος από την μπάρα κορυφής. */
.fab {
  position: fixed; z-index: 25;
  /* Το «+» είναι το ΜΟΝΟ σημείο δημιουργίας κράτησης — δεν επιτρέπεται να
     ακουμπά τη ζώνη του home. Οριζόντια ο inset αφορά το τοπίο (landscape),
     όπου η εγκοπή πάει στο πλάι. */
  inset-inline-end: calc(var(--s5) + var(--safe-r));
  bottom: calc(var(--s5) + var(--safe-b));
  width: 52px; height: 52px; border-radius: 50%; border: 0;
  background: var(--action); color: var(--action-ink); box-shadow: var(--shadow-lg);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-btn) var(--spring), transform var(--t-btn) var(--spring),
              box-shadow var(--t-btn) var(--spring);
}
.fab svg { width: 22px; height: 22px; transition: transform .3s var(--spring); }
.fab:hover {
  background: var(--action-d); transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 32px -10px var(--action-glow);
}
/* Το «+» γυρίζει — υπαινιγμός ότι ανοίγει κάτι, όχι ότι προσθέτει επί τόπου. */
.fab:hover svg { transform: rotate(90deg); }
.fab:active { transform: scale(.93); transition-duration: var(--t-press); }
.fab:focus-visible { box-shadow: var(--shadow-lg), 0 0 0 4px var(--action-ring); }
/* Το «+» παίρνει το --action-ink (λευκό πάνω σε κόκκινο) και στα δύο θέματα. */


/* ── Φόρμες ─────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lbl {
  font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--muted);
  transition: color var(--t-fast);
}
/* Η ετικέτα χρυσίζει μαζί με το πεδίο της — ξέρεις πάντα πού γράφεις. */
.field:focus-within > .lbl { color: var(--field-lbl-focus); }
.lbl .req { color: var(--crit); margin-inline-start: 3px; }
.hint { font-size: var(--fs-xs); color: var(--faint); line-height: 1.45; }

/* ⚠ `box-sizing` ΡΗΤΑ ΕΔΩ, παρότι το base.css έχει ήδη καθολικό
   `*, *::before, *::after { box-sizing: border-box }`.

   Το Safari στο iOS ΔΕΝ το εφαρμόζει στα native χειριστήρια (`input[type=date]`
   κ.λπ.) — μετρημένο σε iPhone: `getComputedStyle(...).boxSizing === 'content-box'`
   ενώ ο καθολικός κανόνας ισχύει κανονικά για όλα τα υπόλοιπα.

   Αποτέλεσμα: `width: 100%` σήμαινε 100% ΣΥΝ 18px padding ΣΥΝ 2px περίγραμμα,
   δηλαδή κάθε πεδίο ξεχείλιζε το κουτί του κατά ακριβώς 20px. Στον desktop
   browser δεν φαινόταν ποτέ· γι' αυτό θέλει έλεγχο σε συσκευή. */
.inp, .sel, .txt {
  box-sizing: border-box;
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--field); color: var(--ink);
  font-size: var(--fs-md);
  /* Το πεδίο «βυθίζεται» (24.09.2026): μια σκιά μέσα από την πάνω ακμή. */
  box-shadow: var(--field-inset);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
@media (hover: hover) {
  /* `:not(.need)`: αλλιώς το hover (ειδικότητα 0,5,0) έσβηνε το κόκκινο
     περίγραμμα του «Λείπει» μόλις περνούσε το ποντίκι από πάνω. */
  .inp:not(:focus):not(.err):not(.need):not(:disabled):hover,
  .txt:not(:focus):not(.err):not(.need):not(:disabled):hover,
  .sel:not(:focus):not(.err):not(.need):not(.sel-gold):not(:disabled):hover { border-color: var(--field-hover); }
}
/* ⚠ `background-color`, ΟΧΙ `background`. Το σκέτο `background` σβήνει και την
   εικόνα — δηλαδή το βελάκι του επιλογέα, που ΧΑΝΟΤΑΝ μόλις τον πατούσες ή
   έβγαζε σφάλμα. */
.inp:focus, .sel:focus, .txt:focus, .stepper:focus-within {
  /* Το περίγραμμα εστίασης χρυσό — στη νύχτα το ναυτικό μπλε πάνω σε σκούρο
     πεδίο δεν φαίνεται, και τότε δεν ξέρεις πού γράφεις με το πληκτρολόγιο. */
  outline: none; border-color: var(--gold-ink); background-color: var(--field-solid);
  box-shadow: var(--field-inset), var(--field-halo);
}
/* Εικονίδιο ημερομηνίας στο χρώμα μας (μόνο Chrome/Edge υπολογιστή — το
   iPhone δεν ζωγραφίζει κανένα). */
.inp[type="date"]::-webkit-calendar-picker-indicator,
.inp[type="datetime-local"]::-webkit-calendar-picker-indicator,
.inp[type="month"]::-webkit-calendar-picker-indicator {
  width: 16px; height: 16px; padding: 2px; cursor: pointer; opacity: 1;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.inp[type="date"]:hover::-webkit-calendar-picker-indicator,
.inp[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
.inp[type="month"]:hover::-webkit-calendar-picker-indicator { background: var(--gold-ink); }
.inp::placeholder { color: var(--faint); }
.txt { min-height: 74px; resize: vertical; line-height: 1.5; }
/* ⚠ ΧΡΥΣΟ ΠΕΡΙΓΡΑΜΜΑ ΣΤΟΝ ΕΠΙΛΟΓΕΑ ΤΗΣ ΚΟΡΥΦΗΣ (07.09.2026, εντολή ιδιοκτήτη:
   «να το βρίσκω με τη μία»). Μόνο περίγραμμα και ελαφρύ γέμισμα — ένα γεμάτο
   χρυσό πεδίο θα διεκδικούσε την προσοχή της κύριας ενέργειας. */
.sel-gold {
  border-color: var(--gold); background: var(--gold-soft);
  font-weight: 600; color: var(--ink);
}
/* Το βελάκι στα χρώματα του θέματος (--chev, tokens.css) — ήταν σταθερό γκρι
   του iOS (#8e8e93) και στη νύχτα διαβαζόταν ξένο. */
.sel { appearance: none; padding-inline-end: 32px; cursor: pointer;
  background-image: var(--chev);
  background-repeat: no-repeat; background-position: right 12px center;
}
[dir="rtl"] .sel { background-position: left 12px center; }
/* Το λάθος (π.χ. ζωντανός έλεγχος ώρας) μένει κόκκινο ΚΑΙ όσο γράφεις. */
.inp.err, .sel.err, .txt.err { border-color: var(--crit); background-color: var(--crit-soft); }
.inp.err:focus, .sel.err:focus, .txt.err:focus { box-shadow: var(--field-inset), 0 0 0 3px var(--crit-soft); }
/* «Λείπει» από την Αποθήκευση (26.09.2026) — δες `showErrors()` στο
   booking-form.js. Χωριστή κλάση από το `.err`: αυτό το διαχειρίζεται η ρόδα
   ώρας μόνη της (άκυρη ώρα) και ένα σβήσιμο από εδώ θα το έπαιρνε μαζί. */
.inp.need, .sel.need, .txt.need, .stepper.need, .locbox.need .locinput {
  border-color: var(--crit); background-color: var(--crit-soft);
}
.field.need > .lbl, .stack.need > .field > .lbl { color: var(--crit); }
.err-msg { font-size: var(--fs-xs); color: var(--crit); font-weight: 500; }

/* Πιο σφιχτό κενό (02.09.2026, «όλα συμμαζεμένα»): με --s4 ανάμεσα σε κάθε
   σειρά, μια φόρμα οκτώ πεδίων χρειαζόταν σκρολ για να φανεί ολόκληρη. */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
@media (min-width: 640px) { .form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.span-2 { grid-column: 1 / -1; }

/* ── ΚΑΘΕ ΠΛΕΓΜΑ ΠΟΥ ΚΡΑΤΑ ΗΜΕΡΟΜΗΝΙΑ ──────────────────────────────────────
   Δες το `--date-w` στο tokens.css για το γιατί υπάρχει πάτωμα.

   `auto-fit` και ΟΧΙ σταθερό πλήθος στηλών: το πλήθος πρέπει να ακολουθεί το
   ΔΟΧΕΙΟ, όχι το viewport. Το ίδιο modal είναι 880px σε οθόνη 1440 και
   ολόκληρη η οθόνη στα 700· το πλέγμα εξόδων στενεύει κατά 236px μόλις
   ανοίξει το μενού, χωρίς να αλλάξει ούτε ένα media query. Με σταθερές στήλες
   κάθε τέτοια αλλαγή έπρεπε να μαντευτεί εκ των προτέρων — και δεν μαντεύτηκε.

   Το `min(…, 100%)` είναι η βαλβίδα: όταν το ίδιο το δοχείο είναι στενότερο
   από το πάτωμα, μένει ΜΙΑ στήλη αντί να ξεχειλίσει το πλέγμα.

   `:has()` — Safari 15.4+ / Chrome 105+. Όπου λείπει, η φόρμα συμπεριφέρεται
   όπως πριν· δεν χαλάει τίποτε άλλο. */
@media (min-width: 640px) {
  .form-grid.cols-2:has(input[type="date"]),
  .form-grid.cols-3:has(input[type="date"]) {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--date-w), 100%), 1fr));
  }
}

/* ── ΗΜΕΡΟΜΗΝΙΑ ΚΑΙ ΩΡΑ ΣΕ ΠΡΑΓΜΑΤΙΚΟ ΜΕΓΕΘΟΣ (εντολή ιδιοκτήτη 26.09.2026) ─
   «the date and time boxes can be smaller». Μετρημένο ΠΡΙΝ: σε tablet και
   υπολογιστή η ημερομηνία ΚΑΙ η ώρα άνοιγαν 368-403px η καθεμία για να
   χωρέσουν «26/09/2026» και «14:30» — το πλέγμα τις τέντωνε ισότιμα.

   Τώρα ΣΤΑΘΕΡΑ πλάτη σε σειρά που ΑΝΑΔΙΠΛΩΝΕΤΑΙ (flex, όχι πλέγμα):
       Date 186 (κινητό) / 200 (≥448) · Time 112 · Hours 80 · End time 112
   Ό,τι δεν χωρά κατεβαίνει μόνο του στην επόμενη γραμμή — χωρίς media query
   ανά πλάτος. Τα τρία παλιά μπλοκ (186 / auto-fit ≥448 / στοίβαγμα <360) και
   οι εξαιρέσεις `.modal .whenrow … max-width:none` έφυγαν μαζί. Στο κινητό
   375: Date+Time = 306 από 341 → μία γραμμή· το Hours/End time από κάτω.
   Στην ίδια σειρά κάθονται και τα κουτάκια «Επανάληψη / Επιστροφή» — στον
   υπολογιστή χωρούν δίπλα, στο κινητό κατεβαίνουν.
   ⚠ Οι κλάσεις των πεδίων (.wf-date / .wf-num) μπαίνουν από τη JS και ΟΧΙ με
   `:has()` — χωρίς :has() ένα flex-item χωρίς πλάτος θα κατέρρεε.

   ⚠ ΤΑ 186px ΤΗΣ ΗΜΕΡΟΜΗΝΙΑΣ ΣΤΟ ΚΙΝΗΤΟ ΔΕΝ ΕΙΝΑΙ ΣΤΡΟΓΓΥΛΟΠΟΙΗΣΗ: το
   χειριστήριο του Safari θέλει 168px καθαρό περιεχόμενο (194 μείον 24
   γεμίσματος μείον 2 περιγράμματος). Με 4px γέμισμα το πάτωμα γίνεται
   168+8+2 = 178px, άρα μένουν 8px περιθώριο ασφαλείας — δες --date-w. Το
   κείμενο κεντράρεται γιατί χωρίς γέμισμα ακουμπούσε το περίγραμμα. Κάτω από
   186 ΜΗΝ πας χωρίς μέτρηση σε αληθινό iPhone. Στα 200 (≥448) το γέμισμα
   επιστρέφει: 200−24−2 = 174 ≥ 168. */
.form-grid.whenrow {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--s3) var(--s2);
}
.form-grid.whenrow > .field { flex: 0 0 112px; min-width: 0; }
.form-grid.whenrow > .field.wf-date { flex-basis: 186px; }
.form-grid.whenrow > .field.wf-num { flex-basis: 80px; }
/* Δίχτυ: ημερομηνία ΧΩΡΙΣ `.wf-date` (παλιό booking-form.js στην cache, ή νέο
   πεδίο φτιαγμένο με σκέτο `field()`) θα έπαιρνε τα 112px της ώρας — κάτω από
   το πάτωμα του Safari, πάνω στο διπλανό κουτί. Εκεί όπου λείπει το :has()
   ισχύει ούτως ή άλλως η κλάση. */
.form-grid.whenrow > .field:has(input[type="date"]) { flex-basis: 186px; }
.form-grid.whenrow input[type="date"].inp { padding-inline: 4px; text-align: center; }
/* «Επανάληψη / Επιστροφή»: ΔΙΚΗ τους γραμμή ανάμεσα στο κουτί From/To και τις
   ημερομηνίες (26.09.2026 — όπως το κουτάκι της Wizz, δες `.legs`). */
.whenchecks {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s5);
  margin-bottom: var(--s3);
}

/* ── ΗΜΕΡΟΜΗΝΙΑ + ΩΡΑ ΣΕ ΚΟΥΤΙ, ΟΠΩΣ ΣΤΗ WIZZ AIR (26.09.2026) ─────────────
   Τελική μορφή μετά από τρεις γύρους με τον ιδιοκτήτη: «do it like before,
   date and time and underneath date and time … when not checked date and
   time together also». Δηλαδή:
     • ΠΑΝΤΑ ένα κουτί (`.legs`) με «Date · Time» — ίδια γλώσσα με το From/To:
       ένα περίγραμμα, γυμνά πεδία μέσα, μεγάλα γράμματα·
     • με την «Επιστροφή» (`.legs.two`) ανοίγει ΑΠΟ ΚΑΤΩ «Return date · Return
       time», με λεπτή γραμμή ανάμεσα — σε ΚΑΘΕ πλάτος οθόνης.
   Απορρίφθηκαν: σκέλη δίπλα-δίπλα στον υπολογιστή, και πλέγμα 2×2 με τις δύο
   ημερομηνίες πάνω (εκείνο ήθελε και ψεύτικο κείμενο πάνω από την ημερομηνία
   του iPhone — δεν χρειάζεται πια).
   Τα πλάτη μένουν του `.whenrow` (186/200 · 112 · 80): η ημερομηνία χωρά
   native, γιατί μέσα στο κουτί το γέμισμα της γίνεται 0.
   ⚠ Η γραμμή Επανάληψης («Repeat until») ζει ΕΞΩ από το κουτί. */
.legs {
  background: var(--field); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--field-inset);
}
/* Υπολογιστής/tablet: ΟΣΟ ΧΡΕΙΑΖΕΤΑΙ, όχι ως την άκρη (εντολή ιδιοκτήτη
   26.09.2026: «on desktop mode it shouldnt be stretched all the way to the end.
   it should be more compact»). Ήταν 818px για περιεχόμενο ~350. Τα πεδία έχουν
   ήδη σταθερά πλάτη (200 · 112 · 80), οπότε το `fit-content` = το άθροισμά τους
   και δεν αναδιπλώνονται. Στο κινητό μένει σε όλο το πλάτος — εκεί το
   περιεχόμενο το γεμίζει ούτως ή άλλως. */
@media (min-width: 640px) {
  .legs { width: fit-content; max-width: 100%; }
}
/* Κουτί ημερομηνίας + κουτί «Repeat until»: στο κινητό το ένα κάτω από το
   άλλο, στον υπολογιστή ΔΙΠΛΑ-ΔΙΠΛΑ, στην κορυφή — με την Επιστροφή το πρώτο
   ψηλώνει, το δεύτερο μένει στην πρώτη γραμμή. */
.whenwrap { display: flex; flex-direction: column; gap: var(--s3); }
@media (min-width: 640px) {
  .whenwrap { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
}
.legs > .whenrow {
  padding: 9px 14px 10px; column-gap: var(--s3); border-radius: calc(var(--r-md) - 1px);
  transition: background-color var(--t-fast), box-shadow var(--t-fast);
}
.legs.two > .whenrow:first-child { border-radius: calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0; }
.legs.two > .whenrow:last-child { border-top: 1px solid var(--line-2); border-radius: 0 0 calc(var(--r-md) - 1px) calc(var(--r-md) - 1px); }
.legs > .whenrow > .field { gap: 1px; }
/* Γυμνά πεδία μέσα στο κουτί (≥16px — αλλιώς ζουμ στο iPhone).
   ⚠ `.form-grid.whenrow` ΚΑΙ ΕΔΩ: ο κανόνας ≥448 πιο κάτω
   (`.form-grid.whenrow input[type=date].inp`, γέμισμα 12px) έχει ίδια
   ειδικότητα και ΜΕΤΑΓΕΝΕΣΤΕΡΗ θέση — θα ξανάβαζε γέμισμα και η ημερομηνία
   θα έπεφτε κάτω από το πάτωμα του Safari. */
.legs .form-grid.whenrow .inp,
.legs .form-grid.whenrow .inp:focus,
.legs .form-grid.whenrow input[type="date"].inp {
  border: 0; background: transparent; box-shadow: none;
  padding: 1px 0; font-size: 17px; font-weight: 600; line-height: 1.35; text-align: start;
}
/* ── ΕΙΚΟΝΙΔΙΑ ΣΥΜΜΕΤΡΙΚΑ: 📅 ΑΡΙΣΤΕΡΑ της ημερομηνίας, 🕐 ΑΡΙΣΤΕΡΑ της ώρας ──
   (εντολή ιδιοκτήτη 26.09.2026: «the calendar icon and the clock icon can be
   better placed … i want it to be pleasant to the eye, symetrical»).
   Πριν: το ημερολόγιο του Chrome στη ΔΕΞΙΑ άκρη της στήλης 200px (κολλημένο
   στην ώρα, ~70px μετά το κείμενο), το ρολόι στη δεξιά άκρη των 112px (~30px
   μετά) — άνισα κενά, δύο διαφορετικά εικονίδια, και στο iPhone μόνο το ένα.
   Τώρα: ίδιο μέγεθος, ίδιο χρώμα, ίδια θέση — 16px εικονίδιο + 8px κενό πριν από
   την τιμή, οι ετικέτες στοιχισμένες με το εικονίδιο. Χρυσίζουν όταν η γραμμή
   έχει εστίαση.
   Πλάτη στο κουτί: ημερομηνία 186+24 (κινητό) / 200+24 — ΤΟ ΙΔΙΟ καθαρό πλάτος
   για το πεδίο του iPhone (το πάτωμα του Safari δεν αγγίζεται)· η ώρα μίκρυνε
   112 → 88, γιατί δεν χρειάζεται πια χώρο δεξιά για το ρολόι. */
.legs .fline { display: flex; align-items: center; gap: 8px; }
.legs .fico {
  flex: 0 0 16px; display: grid; place-items: center; height: 23px;
  color: var(--faint); cursor: pointer; transition: color var(--t-fast);
}
.legs .fico svg, .legs .timebox .locbtn svg { width: 16px; height: 16px; }
.legs .fline > input[type="date"].inp { flex: 1 1 auto; min-width: 0; position: relative; }
/* Chrome/Edge: το δικό τους εικονίδιο γίνεται ΑΟΡΑΤΟ και απλώνεται σε όλο το
   πεδίο — κλικ οπουδήποτε στην ημερομηνία ανοίγει το ημερολόγιο (το πληκτρολόγιο
   με Tab γράφει κανονικά). Το Safari δεν έχει τέτοιο εικονίδιο. */
.legs input[type="date"].inp::-webkit-calendar-picker-indicator {
  position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0;
  opacity: 0; cursor: pointer;
}
/* Το ρολόι: το ίδιο κουμπί που ανοίγει τη ρόδα, μετακομισμένο ΑΡΙΣΤΕΡΑ. */
.legs .timebox .locbtn {
  inset-inline-start: 0; inset-inline-end: auto; top: 0; bottom: 0; width: 16px;
  /* `padding: 0`: το κουμπί έχει προεπιλεγμένο γέμισμα (1px 6px) — το ρολόι
     καθόταν ~6px πιο δεξιά από την ετικέτα «Time», ενώ το ημερολόγιο ακριβώς
     κάτω από το «Date». Μετρημένο σε Safari iPhone. */
  padding: 0; border-radius: 0; background: none; color: var(--faint);
}
.legs .timebox .locbtn:hover { background: none; color: var(--gold-ink); }
.legs .form-grid.whenrow .timebox .locinput { padding-inline: 24px 0; }
.legs > .whenrow:focus-within .fico,
.legs > .whenrow:focus-within .timebox .locbtn { color: var(--gold-ink); }
.legs .form-grid.whenrow > .field.wf-date,
.legs .form-grid.whenrow > .field:has(input[type="date"]) { flex-basis: 210px; }
.legs .form-grid.whenrow > .field.wf-time { flex-basis: 88px; }
@media (min-width: 448px) {
  .legs .form-grid.whenrow > .field.wf-date,
  .legs .form-grid.whenrow > .field:has(input[type="date"]) { flex-basis: calc(var(--date-w) + 24px); }
}
/* Κινητό: 12px γέμισμα αντί για 14 — ημερομηνία 210 + 12 + ώρα 88 = 310 χωρά
   στο εσωτερικό του κουτιού στα 375 (315) χωρίς να κατεβαίνει η ώρα. */
@media (max-width: 447px) {
  .legs > .whenrow { padding-inline: 12px; }
}
/* ⚠ iPHONE: το Safari ΚΕΝΤΡΑΡΕΙ την ημερομηνία μέσα στο πεδίο και της δίνει
   δικό του ύψος — έβγαινε μετατοπισμένη δεξιά από την ετικέτα «Date» και ~8px
   πιο χαμηλά από την ώρα. Το `text-align` του input ΔΕΝ το πιάνει· το πιάνει
   μόνο το ψευδο-στοιχείο. Ελεγμένο σε Safari (iOS Simulator, iPhone 17): στοίχιση
   αριστερά, ίδια γραμμή με την ώρα, και το πάτημα ανοίγει ακόμη το ημερολόγιο. */
.legs .form-grid.whenrow input[type="date"].inp { height: calc(17px * 1.35 + 2px); min-height: 0; }
.legs .form-grid.whenrow input[type="date"].inp::-webkit-date-and-time-value { text-align: left; margin: 0; }
/* «Ίδια μέρα»: στοιχισμένο με τις ΤΙΜΕΣ (24px = εικονίδιο + κενό), όχι με τις ετικέτες. */
.legs .sameday { font-size: var(--fs-md); color: var(--muted); padding: 2px 0; padding-inline-start: 24px; }
/* Εστίαση και «Λείπει» στη ΓΡΑΜΜΗ, όπως στο From/To. */
.legs > .whenrow:focus-within { background-color: var(--field-solid); box-shadow: inset 0 0 0 1.5px var(--gold-ink); }
.legs .whenrow .inp.need, .legs .whenrow .locbox.need .locinput { background: var(--crit-soft); }

@media (min-width: 448px) {
  .form-grid.whenrow { column-gap: var(--s3); }
  .form-grid.whenrow > .field.wf-date,
  .form-grid.whenrow > .field:has(input[type="date"]) { flex-basis: var(--date-w); }
  .form-grid.whenrow input[type="date"].inp { padding-inline: 12px; text-align: start; }
}
/* Η μέρα της εβδομάδας δίπλα στην ετικέτα — «Date · Σαβ». Γκρίζα: είναι
   επιβεβαίωση, όχι μέρος του ονόματος του πεδίου. */
.lbl .lbl-wd { color: var(--faint); font-weight: 600; margin-inline-start: 4px; }

/* ── Κινητό: κοντά πεδία δίπλα-δίπλα (εντολή ιδιοκτήτη 26.09.2026) ──────────
   Κάτω από 640 κάθε `.form-grid` είναι μία στήλη — σωστό για ονόματα και
   διευθύνσεις, σπατάλη για «A3308» και «120». Η Τιμή κρατά 128px (χωρά
   «1250.00»), η Πληρωμή τα υπόλοιπα. Τα πεδία πτήσης/πλοίου ανά δύο· το
   Itinerary (`.span-2`) μένει σε όλο το πλάτος. */
@media (max-width: 639px) {
  .form-grid.moneyrow { grid-template-columns: 128px minmax(0, 1fr); }
  .form-grid.extrarow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Κάτω από 360 (SE 1ης γενιάς, mini με Display Zoom) η Πληρωμή έμενε 148px και
   το «Clients Directly» κοβόταν. Η τιμή στενεύει — «1250» χωρά ακόμη. */
@media (max-width: 359px) {
  .form-grid.moneyrow { grid-template-columns: 104px minmax(0, 1fr); }
}

/* ── Παιδικά καθίσματα: μία γραμμή ανά παιδί (26.09.2026, `paintSeats`) ────
   «Βρέφος 1  ☐ Βρεφικό  ☐ Group I» — όπως στις φόρμες ξενοδοχείων. Το όνομα
   του παιδιού σε σταθερή στήλη, ώστε τα κουτάκια να στοιχίζονται κάτω-κάτω. */
.seatbox { margin-top: var(--s3); display: grid; gap: 6px; }
.seatrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--s4); min-height: 32px; }
.seatwho { flex: 0 0 72px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }

/* ── Προσφώνηση + όνομα ─────────────────────────────────────────────────── */
.form-grid.salrow { grid-template-columns: 116px minmax(0, 1fr); }
@media (max-width: 639px) {
  /* Στενότερη στο κινητό (εντολή ιδιοκτήτη 08.09.2026) — το όνομα θέλει κάθε
     pixel. Μαζί στενεύει και το γέμισμα γύρω από το βελάκι: σκέτα 100px θα
     άφηναν 56px κειμένου και θα έκοβαν το «Princess» στη μέση. */
  .form-grid.salrow { grid-template-columns: 100px minmax(0, 1fr); }
  .form-grid.salrow .sel { padding-inline: 8px 24px; background-position: right 7px center; }
}

/* ── Τηλέφωνο · δωμάτιο · άτομα ─────────────────────────────────────────── */
.form-grid.whorow { grid-template-columns: minmax(0, 1fr) 116px; }
.form-grid.whorow > .paxfield { grid-column: 1 / -1; }
/* Email ΚΑΤΩ από το τηλέφωνο, στη ΙΔΙΑ στήλη (05.10.2026). */
.form-grid.whorow > .emailfield { grid-column: 1; }
/* ⚠ ΙΔΙΑ ΑΠΟΣΤΑΣΗ ΜΕ ΤΙΣ ΑΛΛΕΣ ΓΡΑΜΜΕΣ («too much empty space»): Όνομα → Τηλέφωνο είναι δύο grid χωρίς κενό
   ανάμεσα (μετρημένο 0px — την απόσταση την κάνει η ετικέτα)· μέσα στο `.whorow` έμπαινε το row-gap 12px. */
.form-grid.whorow { row-gap: 0; }
@media (min-width: 760px) {
  /* Τα τρία σε μία γραμμή από tablet και πάνω: δέκα ψηφία τηλεφώνου δεν
     χρειάζονται 692px, και οι μετρητές κρατούσαν ολόκληρη σειρά από κάτω.
     `auto` στους μετρητές — φυσικό πλάτος, δεν τεντώνονται. */
  .form-grid.whorow { grid-template-columns: minmax(0, 1fr) 116px auto; }
  .form-grid.whorow > .paxfield { grid-column: 3; grid-row: 1; }
}
/* Οι μετρητές μικρότεροι: 28+34+28 συν περίγραμμα έκανε 92px ο καθένας, 300px
   και οι τρεις — όσο ολόκληρο το τηλέφωνο. Τώρα 84px και 268px. */
.paxsteps { gap: var(--s2); }
.paxsteps .stepper button { width: 26px; }
.paxsteps .stepper input { width: 30px; }

/* ── Αριθμημένες ενότητες — η ραχοκοκαλιά της φόρμας ────────────────────── */
/* min-width:0 γιατί το <fieldset> έχει από προεπιλογή min-width:min-content και
   δεν συρρικνώνεται — χωρίς αυτό το πλέγμα οχημάτων ξεχείλιζε από το modal. */
.fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.fieldset + .fieldset { margin-top: var(--s7); }
/* «1  The job ─────» σαν αληθινός τίτλος ενότητας, όχι αραιά ΚΕΦΑΛΑΙΑ. */
.fieldset-h {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-md); font-weight: 600; letter-spacing: -.01em;
  color: var(--ink); margin-bottom: var(--s4);
  padding: 0;
}
.fieldset-h::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }

/* Αυτόματη αρίθμηση 1 / 2 / 3 (χωρίς μηδενικό) — το μόνο σημείο με χρυσό στη φόρμα. */
.numbered { counter-reset: grp; }
.numbered > .fieldset > .fieldset-h { counter-increment: grp; }
.numbered > .fieldset > .fieldset-h::before {
  content: counter(grp);
  color: var(--gold-text); font-weight: 600; letter-spacing: 0;
  font-variant-numeric: tabular-nums; flex: none;
}

/* switch */
.switch { display: inline-flex; align-items: center; gap: var(--s3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 42px; height: 25px; border-radius: var(--r-pill); background: var(--line);
  position: relative; transition: background var(--t-fast); flex: 0 0 auto;
}
.switch .track::after {
  content: ''; position: absolute; top: 2.5px; inset-inline-start: 2.5px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform var(--t);
}
.switch input:checked + .track { background: var(--ok); }
.switch input:checked + .track::after { transform: translateX(17px); }
.switch input:focus-visible + .track { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Σκέτο κουτάκι με λεκτικό δίπλα ──────────────────────────────────────────
   ΟΧΙ διακόπτης. Ο διακόπτης λέει «ρύθμιση που αλλάζει κατάσταση» και πιάνει
   χώρο· εδώ θέλουμε «τσέκαρε αυτό τώρα», δύο δίπλα-δίπλα, χωρίς επεξήγηση.
   Εντολή ιδιοκτήτη 09.09.2026: «this is an ugly toggle, just make a checkbox,
   one next to the other and no explanation needed».
   Τα 16px και το `accent-color: var(--gold)` είναι ό,τι ήδη κάνουν τα άλλα
   κουτάκια της εφαρμογής (.mergecheck, .mi-pick) — ένα μέγεθος παντού. */
.chkline { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--ink); }
.chkline input {
  width: 16px; height: 16px; margin: 0; flex: 0 0 auto;
  accent-color: var(--gold); cursor: pointer;
}

/* ── Επιλογή κρατήσεων για μαζική ενέργεια ───────────────────────────────────
   Το κουτάκι κάθεται ΕΞΩ από την κάρτα, όχι μέσα: η κάρτα ολόκληρη είναι ήδη
   κουμπί που ανοίγει τη μεταφορά, και ένα κουτάκι μέσα της θα άνοιγε την
   κράτηση κάθε φορά που ήθελες απλώς να τη διαλέξεις.
   Το `margin-top` το ευθυγραμμίζει με την ΠΡΩΤΗ ΓΡΑΜΜΗ της κάρτας (ώρα και
   τιμή) αντί με την πάνω ακμή της — αλλιώς κρέμεται πάνω από το κείμενο. */
.selrow { display: flex; align-items: flex-start; gap: var(--s3); }
.selrow > input[type="checkbox"] {
  width: 16px; height: 16px; margin: 15px 0 0; flex: 0 0 auto;
  accent-color: var(--gold); cursor: pointer;
}
.selbar {
  flex-wrap: wrap; padding: var(--s2) var(--s3); margin-bottom: var(--s3);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--card-2);
}

/* ── Κουτάκια στα χρώματα της εταιρείας (24.09.2026) ────────────────────────
   Χρυσό τετράγωνο, ναυτικό τικ — ίδιο ζευγάρι με τα χρυσά κουμπιά. Ήταν τα
   κουτάκια του λειτουργικού («Επανάληψη / Επιστροφή» στη φόρμα).
   ⚠ ΜΗΔΕΝΙΚΗ ΕΙΔΙΚΟΤΗΤΑ (`:where`): τα μεγέθη που ορίζουν ήδη οι `.chkline`,
   `.selrow` κ.λπ. μένουν. Εξαιρείται ο διακόπτης και η επιλογή κάρτας. */
:where(input[type="checkbox"]:not(.switch input, .cardpick)) {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; flex: 0 0 auto;
  display: inline-grid; place-content: center;
  border: 1.5px solid var(--faint); border-radius: 5px;
  background: var(--field-solid);
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
:where(input[type="checkbox"]:not(.switch input, .cardpick))::before {
  content: ''; width: 8px; height: 4px;
  border: solid var(--navy); border-width: 0 0 2px 2px;
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transition: transform .16s var(--spring);
}
:where(input[type="checkbox"]:not(.switch input, .cardpick)):checked,
:where(input[type="checkbox"]:not(.switch input, .cardpick)):indeterminate {
  background: var(--gold); border-color: var(--gold-ink);
}
:where(input[type="checkbox"]:not(.switch input, .cardpick)):checked::before {
  transform: translateY(-1px) rotate(-45deg) scale(1);
}
:where(input[type="checkbox"]:not(.switch input, .cardpick)):indeterminate::before {
  width: 8px; height: 0; border-width: 0 0 2px 0; transform: none;
}
/* ⚠ ΑΝΕΝΕΡΓΟ ΠΡΕΠΕΙ ΝΑ ΦΑΙΝΕΤΑΙ ΑΝΕΝΕΡΓΟ. Το `appearance: none` σβήνει το γκρι
   του browser, οπότε το «Όλα» των Εγγράφων (χωρίς αρχεία για συγχώνευση)
   έμοιαζε ενεργό, χρύσιζε στο πέρασμα και δεν έκανε τίποτα. */
:where(input[type="checkbox"]:not(.switch input, .cardpick)):disabled { opacity: .45; cursor: default; }
.mergecheck input:disabled { cursor: default; }
@media (hover: hover) {
  :where(input[type="checkbox"]:not(.switch input, .cardpick)):not(:checked):not(:disabled):hover { border-color: var(--gold-ink); }
}
:where(input[type="checkbox"]:not(.switch input, .cardpick)):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
/* Υψηλή αντίθεση των Windows: πίσω στο κουτάκι του συστήματος. */
@media (forced-colors: active) {
  :where(input[type="checkbox"]:not(.switch input, .cardpick)) { appearance: auto; -webkit-appearance: auto; }
}

/* segmented control */
.seg {
  display: inline-flex; padding: 3px; background: var(--card-2);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); gap: 2px;
}
.seg button {
  border: 0; background: none; padding: 6px 14px; border-radius: var(--r-xs);
  font-size: var(--fs-sm); font-weight: 500; color: var(--muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.seg button:hover { color: var(--ink); }
/* Ο διακόπτης των τριών οθονών προσωπικού: δική του γραμμή, με αέρα από κάτω.
   Στο κινητό απλώνεται σε όλο το πλάτος — τρεις στόχοι δακτύλου, όχι τρία
   κουμπάκια στριμωγμένα αριστερά. */
.seg-people { margin-bottom: var(--s4); }
@media (max-width: 719px) {
  .seg-people { width: 100%; }
  .seg-people button { flex: 1 1 0; min-width: 0; }
}
/* Το «πατημένο» του esdocs: ναυτικό πλακίδιο, λευκό κείμενο, ελαφριά σκιά.
   Το --navy έχει ήδη εκδοχή για το σκούρο θέμα (tokens.css) — καμία δική μας
   λογική θεμάτων εδώ. Ένα chip που απλώς ασπρίζει δεν διαβάζεται ως επιλογή. */
.seg button.on {
  background: var(--navy); color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px rgba(10,25,47,.18);
}
/* Με επτά καρτέλες στα Reports η μπάρα δεν χωράει σε κινητό — κυλάει αντί να
   κόβεται στη μέση. Χωρίς ορατή μπάρα κύλισης: η σκιά της άκρης το λέει. */
@media (max-width: 720px) {
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { white-space: nowrap; flex: 0 0 auto; }
}

/* stepper */
.stepper {
  display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--field);
  box-shadow: var(--field-inset);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
/* Λεπτότεροι (02.09.2026): τρεις μετρητές δίπλα-δίπλα έπιαναν όλο το πλάτος
   της στήλης για τρία μονοψήφια νούμερα. Ο στόχος αφής μένει πάνω από 32px. */
.stepper button {
  border: 0; background: none; width: 28px; height: 34px; font-size: var(--fs-md); color: var(--muted);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.stepper button:hover { background: var(--card-2); color: var(--ink); }
.stepper button:not(:disabled):active { background: var(--gold-soft2); color: var(--ink); }
.stepper input { width: 34px; border: 0; text-align: center; background: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.stepper input:focus { outline: none; }

/* ── Chips & badges ─────────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .01em;
  background: var(--card-2); color: var(--muted); border: 1px solid var(--line-2);
  white-space: nowrap;
}
.chip-ok   { background: var(--ok-soft);   color: var(--ok);   border-color: transparent; }
.chip-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.chip-crit { background: var(--crit-soft); color: var(--crit); border-color: transparent; }
.chip-info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.chip-accent { background: var(--gold-soft2); color: var(--gold-ink); border-color: transparent; }
.chip-muted { background: var(--card-2); color: var(--faint); }
.chip button { border: 0; background: none; padding: 0; color: inherit; opacity: .55; display: inline-flex; }
.chip button:hover { opacity: 1; }

.dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.dot-account { background: var(--pay-account); }
.dot-cash    { background: var(--pay-cash); }
.dot-pos     { background: var(--pay-pos); }
.dot-prepaid { background: var(--pay-prepaid); }
.dot-free    { background: var(--pay-free); }

/* επιλέξιμα chips (τύποι υπηρεσίας, φίλτρα) */
.pick {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 11px 9px; min-width: 84px;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--card);
  font-size: var(--fs-xs); font-weight: 500; color: var(--muted);
  transition: all var(--t-fast);
}
.pick svg { width: 19px; height: 19px; color: var(--faint); }
.pick:hover { border-color: var(--line); color: var(--ink); }
.pick:hover svg { color: var(--muted); }
.pick.on {
  /* Χρυσό, όχι --primary: στη νύχτα το --primary είναι ναυτικό μπλε πάνω σε
     σκούρη κάρτα και το «επιλεγμένο» γίνεται αόρατο. */
  border-color: var(--gold); background: var(--card); color: var(--ink);
  font-weight: 600; box-shadow: 0 0 0 1px var(--gold);
}
.pick.on svg { color: var(--gold-ink); }
/* Ο τύπος άλλαξε ΜΟΝΟΣ του (αεροδρόμιο/λιμάνι — `autoType()`): δύο παλμοί
   χρυσής στεφάνης, για να το προσέξεις. Με «λιγότερη κίνηση» ο κανόνας του
   base.css μηδενίζει τη διάρκεια και μένει μόνο το κανονικό `.on`. */
.pick.autoset { animation: pick-auto .7s ease-out 2; }
/* ΜΕΣΑ στο κουμπί (inset), όχι γύρω του: στον υπολογιστή το `.pick-row` κυλά
   οριζόντια και έκοβε ό,τι έβγαινε έξω — η λάμψη φαινόταν κομμένη από πάνω.
   Σκέτο rgba αντί για color-mix (Safari < 16.2 το αγνοεί). Το 1px χρυσό του
   `.on` μένει μέσα στο κλειδί καρέ, αλλιώς θα χανόταν όσο παίζει η κίνηση. */
@keyframes pick-auto {
  0%   { box-shadow: 0 0 0 1px var(--gold), inset 0 0 0 4px rgba(208,171,100,.55); }
  100% { box-shadow: 0 0 0 1px var(--gold), inset 0 0 0 0 rgba(208,171,100,0); }
}
.pick-row { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s2); scrollbar-width: thin; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s2); }

/* ── ΦΩΤΟΓΡΑΦΙΚΑ ΦΙΛΤΡΑ — πρόσωπα και αυτοκίνητα, όχι ονόματα ────────────
   Ο dispatcher αναγνωρίζει τον οδηγό από το πρόσωπο πιο γρήγορα απ' ό,τι
   διαβάζει «Παπαδομανωλάκης».                                             */
/* Πιο πυκνά (εντολή ιδιοκτήτη 02.09.2026): «τους οδηγούς πιο κοντά μεταξύ
   τους». Μίκρυναν κενό, πλάτος και φωτογραφία — ΟΧΙ όμως τόσο ώστε να μη
   διαβάζεται το πρόσωπο: ο ιδιοκτήτης αναγνωρίζει κόσμο και αυτοκίνητα από την
   εικόνα, όχι από το όνομα.
   ⚠ ΑΦΟΡΑ ΜΟΝΟ ΤΗ ΜΠΑΡΑ ΦΙΛΤΡΩΝ. Ο επιλογέας ΜΕΣΑ στη φόρμα κράτησης έχει
   δικούς του, φαρδύτερους κανόνες (`.modal .pstrip .pchip`, ~γρ. 1063) ώστε να
   χωρούν ΟΛΟΚΛΗΡΑ τα επώνυμα — μην τους ισοπεδώσεις μαζί. */
.pstrip {
  display: flex; gap: 5px; overflow-x: auto;
  padding: 3px 2px 8px; scrollbar-width: thin; scroll-behavior: smooth;
}
.pstrip::-webkit-scrollbar { height: 6px; }
.pstrip::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); }

/* ⚠ ΕΠΙΛΕΓΜΕΝΟ = ΧΡΥΣΗ ΣΤΕΦΑΝΗ ΜΕ ΚΕΝΟ γύρω από τη φωτογραφία (24.09.2026),
   όπως το πορτρέτο στις κάρτες της εταιρείας — όχι κίτρινο φόντο πίσω από
   ολόκληρο το πλακίδιο. Το φόντο του πλακιδίου μένει ΠΑΝΤΑ διάφανο. */
.pchip {
  flex: 0 0 auto; border: 0; background: transparent; padding: 4px 2px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 58px; border-radius: var(--r-md);
  position: relative;
}
.pchip .pimg {
  --pimg-inner: var(--pimg-edge);
  width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  background: var(--card-2) center/cover no-repeat;
  border: 0; box-shadow: var(--pimg-inner);
  display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: 700; color: #fff;
  transition: box-shadow var(--t-fast), transform var(--t-btn) var(--spring);
}
/* Πρόσωπα (φωτογραφία ή αρχικά): σμάλτο αντί για γκρι γραμμή. */
.pchip:not(.car):not(.logo) .pimg[style] {
  --pimg-inner: var(--enamel);
  font-weight: 600; letter-spacing: .06em; text-indent: .06em;
}
@media (hover: hover) {
  .pchip:hover .pimg { box-shadow: var(--pimg-inner), 0 0 0 2px var(--bezel-gap), 0 0 0 3px var(--line); }
}
.pchip:active .pimg { transform: scale(.94); transition-duration: var(--t-press); }
.pchip .pimg svg { width: 20px; height: 20px; color: var(--muted); }
.pchip .pname {
  font-size: var(--fs-xs); font-weight: 600; color: var(--muted); line-height: 1.25;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: center;
}
/* Μετρητής: ήσυχο χαπάκι με λεπτή γραμμή, όχι μαύρη κουκκίδα ειδοποίησης σε
   κάθε πρόσωπο. Γίνεται χρυσός μόνο στο επιλεγμένο. */
.pchip .pcount {
  position: absolute; top: 1px; inset-inline-end: 2px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-pill);
  background: var(--card-solid); color: var(--ink-2); font-size: var(--fs-2xs); font-weight: 600;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(10,25,47,.10);
}
.pchip.on .pimg, .pchip.on:hover .pimg {
  box-shadow: var(--pimg-inner), 0 0 0 2px var(--bezel-gap), 0 0 0 4px var(--gold);
}
.pchip.on .pcount { background: var(--gold); color: #0a192f; font-weight: 700; box-shadow: 0 0 0 1.5px var(--bezel-gap); }
/* ⚠ `.pstrip` ΜΠΡΟΣΤΑ ΕΠΙΤΗΔΕΣ. Το views.css έχει δικό του `.pname` (όνομα στην
   κάρτα προσώπου) με κανόνα νύχτας `:root[data-theme="dark"] .pname` — ίδια
   ειδικότητα, φορτώνεται αργότερα, και έβαφε το επιλεγμένο όνομα ΛΕΥΚΟ αντί
   για χρυσό στο σκούρο θέμα. Κάθε φίλτρο ζει μέσα σε `.pstrip` (photoStrip). */
.pstrip .pchip.on .pname { color: var(--gold-text); font-weight: 700; }
.pchip.zero { opacity: .38; }

/* Τα αυτοκίνητα είναι φαρδιά, όχι στρογγυλά. */
/* Λογότυπα συνεργατών: ΟΧΙ κυκλικό crop προσώπου — ολόκληρο το σήμα, σε
   λευκή πλακέτα όπως στην κάρτα εταιρείας (.escard-logo). Το contain μετριέται
   στο content-box, ώστε το γέμισμα να δίνει αέρα γύρω από το λογότυπο. */
.pchip.logo { width: 72px; }
.pchip.logo .pimg {
  width: 64px; height: 40px; border-radius: var(--r-sm);
  background-color: #fff;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  background-origin: content-box; padding: 4px;
}
:root[data-theme="dark"] .pchip.logo .pimg { background-color: rgba(255,255,255,.94); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pchip.logo .pimg { background-color: rgba(255,255,255,.94); }
}

.pchip.car { width: 88px; }
.pchip.car .pimg {
  width: 80px; height: 50px; border-radius: var(--r-sm);
  background-size: cover; background-position: center;
}
.pchip.car .pcount { inset-inline-end: 4px; }
/* Μέσα στο (αδιαφανές) παράθυρο, το κενό της στεφάνης παίρνει το χρώμα του
   παραθύρου — αλλιώς θα φαινόταν λευκό δαχτυλίδι στη νύχτα. */
.modal .pstrip { --bezel-gap: var(--card-solid); }

/* ── Φόρμα κράτησης: οδηγοί & αυτοκίνητα σε ΜΙΑ γραμμή + αναζήτηση ─────────
   (εντολή ιδιοκτήτη 26.09.2026 — δες `searchStrip()` στο booking-form.js).
   ⚠ Η `.one` ΝΙΚΑ το `.modal .pstrip { flex-wrap: wrap }` του κινητού με
   ειδικότητα (0,3,0 έναντι 0,2,0), όχι με σειρά — άρα δουλεύει όπου κι αν
   μετακινηθεί εκείνος ο κανόνας. Οι άλλες λωρίδες σε modal τυλίγονται ακόμη. */
.filterbar.one .pstrip { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; }
.strip-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.strip-head .filterbar-l { margin: 0; min-width: 0; }
/* Μικρό, αλλά 16px γράμματα: κάτω από 16 το iPhone κάνει ζουμ σε όλη τη
   σελίδα με το πρώτο άγγιγμα. */
.inp.pick-search {
  flex: 0 1 180px; width: 180px; min-width: 120px;
  padding: 5px 10px; font-size: 16px; -webkit-appearance: none; appearance: none;
}
.pstrip-none { font-size: var(--fs-sm); color: var(--faint); padding: 4px 2px 8px; }
/* Αυτοκίνητα λίγο ΜΙΚΡΟΤΕΡΑ στη φόρμα (εντολή ιδιοκτήτη 26.09.2026: «the cars
   can be a bit smaller»): φωτογραφία 80×50 → 66×42, πλακίδιο 104 → 76px
   (χωρά ακόμη ολόκληρο το «BKA-8800»). ⚠ Ειδικότητα (0,5,0) επίτηδες: ο κανόνας
   του κινητού `.modal .pstrip .pchip.car { width: 104px }` είναι (0,4,0) και
   ζει ΠΙΟ ΚΑΤΩ στο αρχείο. Μόνο η φόρμα κράτησης (`.one`) — τα φίλτρα του
   ημερολογίου έχουν δικά τους μεγέθη (`.slim`). */
.modal .filterbar.one .pstrip .pchip.car { width: 76px; }
.modal .filterbar.one .pstrip .pchip.car .pimg { width: 66px; height: 42px; }

.filterbar { display: flex; flex-direction: column; gap: 2px; }
.filterbar-l {
  font-size: var(--fs-md); font-weight: 700; letter-spacing: -.01em;
  text-transform: none; color: var(--ink); margin-bottom: 2px;
}

/* ── Λεπτή έκδοση (.slim) — τα φίλτρα της ημέρας ────────────────────────────
   Ίδια ανάγνωση με τη μεγάλη έκδοση, στο ένα τρίτο του ύψους. Δύο πράγματα
   δίνουν τα pixel: η ετικέτα της γραμμής πάει ΑΡΙΣΤΕΡΑ αντί για από πάνω, και
   φωτογραφία και γράμματα μικραίνουν.

   Η ΠΙΝΑΚΙΔΑ μένει ΚΑΤΩ ΑΠΟ ΤΟ ΑΥΤΟΚΙΝΗΤΟ και το ΕΠΩΝΥΜΟ ΚΑΤΩ ΑΠΟ ΤΟ ΠΡΟΣΩΠΟ —
   έτσι διαβάζεται μια λωρίδα, μια ματιά κάθετα ανά όχημα, όχι κείμενο που
   τρέχει πλάι σε φωτογραφία. Ο dispatcher αναγνωρίζει από την εικόνα και
   επιβεβαιώνει από το κείμενο από κάτω· δεν τα διαβάζει σε σειρά.
   ========================================================================== */
.filter-card { display: flex; flex-direction: column; gap: 4px; }

.filterbar.slim { flex-direction: row; align-items: center; gap: var(--s2); }
/* 68px, όχι 54 (24.09.2026): σε κεφαλαία το «ΣΥΝΕΡΓΑΤΕΣ» ήθελε 73px και
   κοβόταν σε «ΣΥΝΕΡΓΑΤΕ»· σε πεζά μετρά ~62px. */
.filterbar.slim .filterbar-l {
  flex: 0 0 auto; width: 68px; margin: 0;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: -.01em; line-height: 1.2;
  color: var(--muted);
}
/* 1px αέρα στα πλάγια: η στεφάνη του πρώτου/τελευταίου δεν κόβεται στην άκρη. */
.filterbar.slim .pstrip { flex: 1 1 auto; min-width: 0; gap: 2px; padding: 2px 1px 3px; }
/* ⚠ ΑΝΑΘΕΩΡΗΘΗΚΕ 02.09.2026 — «κάνε τα φίλτρα πιο πυκνά, τους οδηγούς πιο
   κοντά μεταξύ τους». Εδώ έγραφε ότι τα πρόσωπα κρατούν 70px «γιατί το πλάτος
   δεν κοστίζει τίποτα και χωράει ολόκληρο το Μεγκρελισβίλι». ΚΟΣΤΙΖΕ: με
   φωτογραφία 28px μέσα σε πλακίδιο 70px, κάθε πρόσωπο είχε 21px κενό δεξιά κι
   αριστερά και τα πρόσωπα φαίνονταν μακριά μεταξύ τους — το κενό ΔΕΝ ήταν το
   `gap` (ήδη 3px), ήταν το πλάτος. Στα 54px το βήμα πέφτει 73px → 57px (-22%).
   Τα μακριά επώνυμα κόβονται πλέον με αποσιωπητικά· το πλήρες μένει στο
   `title` του πλακιδίου, και ο dispatcher αναγνωρίζει από το πρόσωπο ούτως ή
   άλλως. Το ΥΨΟΣ δεν άλλαξε — η φωτογραφία μένει 28px. */
.filterbar.slim .pchip {
  width: 54px; gap: 2px; padding: 2px 2px 3px; border-radius: var(--r-sm);
}
.filterbar.slim .pchip .pimg { width: 28px; height: 28px; font-size: 9.5px; }
.filterbar.slim .pchip .pimg svg { width: 15px; height: 15px; }
.filterbar.slim .pchip.car { width: 52px; }
.filterbar.slim .pchip.car .pimg { width: 46px; height: 28px; border-radius: var(--r-xs); }
/* Λογότυπο στη slim λωρίδα: ίδιο αποτύπωμα με το αυτοκίνητο, λευκή πλακέτα. */
.filterbar.slim .pchip.logo { width: 56px; }
.filterbar.slim .pchip.logo .pimg { width: 48px; height: 28px; border-radius: var(--r-xs); padding: 2px; }
.filterbar.slim .pchip .pname { font-size: var(--fs-2xs); line-height: 1.25; letter-spacing: -.01em; }
/* Ο αριθμός κάθεται στη γωνιά της φωτογραφίας, όχι πάνω στην πινακίδα. */
.filterbar.slim .pchip .pcount {
  top: 0; inset-inline-end: 2px;
  min-width: 14px; height: 14px; padding: 0 3px; font-size: var(--fs-2xs);
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(10,25,47,.10);
}
.filterbar.slim .pchip.on .pcount { box-shadow: 0 0 0 1.5px var(--bezel-gap); }
.filterbar.slim .pchip.car .pcount { inset-inline-end: 2px; }
.filterbar.slim .pchip.on .pimg, .filterbar.slim .pchip.on:hover .pimg {
  box-shadow: var(--pimg-inner), 0 0 0 1.5px var(--bezel-gap), 0 0 0 3.5px var(--gold);
}

/* Windows «υψηλή αντίθεση»: οι σκιές σβήνουν, άρα και η στεφάνη. Περίγραμμα
   στο χρώμα του συστήματος, και το επιλεγμένο με το χρώμα επιλογής του. */
@media (forced-colors: active) {
  .pchip .pimg { border: 1px solid CanvasText; }
  .pchip.on .pimg { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* Στα πολύ στενά κινητά η ετικέτα φεύγει: το «Όλα»/«Όλοι» με το εικονίδιο
   λέει ήδη ποια γραμμή είναι ποια, και κερδίζουμε 76px πλάτους (68 + 8 κενό). */
@media (max-width: 460px) { .filterbar.slim .filterbar-l { display: none; } }

/* ── «ΧΩΡΙΣ ΟΔΗΓΟ» — πρώτο τσιπ μετά το «Όλοι» στη λωρίδα «Οδηγοί» ──────────
   (27.09.2026, εντολή ιδιοκτήτη· ο ορισμός στο `hasNoDriver()` του schema.js.)
   Πορτοκαλί δίσκος με το εικονίδιο κινδύνου, πορτοκαλί όνομα, πορτοκαλί
   αριθμός — το ΜΟΝΟ χρωματιστό τσιπ της γραμμής, γιατί είναι το μόνο που
   σημαίνει «κάτι λείπει». Τα χρώματα ζουν στα `--nodriver*` (tokens.css).
   ⚠ ΤΟ ΕΠΙΛΕΓΜΕΝΟ ΜΕΝΕΙ ΧΡΥΣΟ, όπως σε ΚΑΘΕ τσιπ: στεφάνη, αριθμός, όνομα.
   Ένα πορτοκαλί «πατημένο» θα ήταν δεύτερη γλώσσα επιλογής στην ίδια λωρίδα.
   ⚠ ΔΙΚΟ ΤΟΥ ΠΛΑΤΟΣ. Το «Χωρίς οδηγό» στα 10px/600 μετρήθηκε 57,5-62,4px
   (Outfit→SF, SF, Helvetica Neue, Arial, Inter, system-ui)· το λεπτό τσιπ
   είναι 54px με `nowrap` + αποσιωπητικά, άρα θα έβγαινε «Χωρίς οδη…». Στα
   72px μένουν 68 για το όνομα — ~5px αέρας και στη φαρδύτερη γραμματοσειρά.
   Δύο γραμμές θα ψήλωναν ΟΛΗ τη λωρίδα για ένα όνομα· φαρδύτερο τσιπ κοστίζει
   μόνο οριζόντια, σε λωρίδα που ήδη κυλάει. */
.filterbar.slim .pchip.nodriver { width: 72px; }
.pchip.nodriver .pimg {
  --pimg-inner: inset 0 0 0 1px var(--nodriver-line);
  background-color: var(--nodriver-soft);
}
.pchip.nodriver .pimg svg { color: var(--nodriver); }
/* `.pstrip` μπροστά για τον ίδιο λόγο με το `.pstrip .pchip.on .pname` πιο
   πάνω: το `.pname` του views.css με τον κανόνα νύχτας έχει (0,3,0). */
.pstrip .pchip.nodriver .pname { color: var(--nodriver); }
.pstrip .pchip.nodriver.on .pname { color: var(--gold-text); }
.pchip.nodriver .pcount { background: var(--nodriver); color: var(--nodriver-ink); font-weight: 700; }
.filterbar.slim .pchip.nodriver .pcount { box-shadow: 0 0 0 1.5px var(--bezel-gap); }
.pchip.nodriver.on .pcount, .filterbar.slim .pchip.nodriver.on .pcount { background: var(--gold); color: #0a192f; }
/* ⚠ ΑΝΑΜΜΕΝΟ ΜΕ ΜΗΔΕΝ = ΟΧΙ ΞΕΘΩΡΙΑΣΜΕΝΟ. Είναι το ΜΟΝΟ τσιπ που μπορεί να
   είναι πατημένο στο μηδέν: το φίλτρο επιζεί της αλλαγής μέρας, και σε μέρα
   χωρίς ακάλυπτες το `.zero` (38%) έσβηνε και τη χρυσή στεφάνη — έμοιαζε
   σβηστό ενώ έκρυβε όλη τη λίστα. Μετρήθηκε στον έλεγχο της 27.09. */
.pchip.nodriver.on.zero { opacity: 1; }

/* ── Η ΜΠΑΡΑ «ΦΙΛΤΡΑ» — διπλώνει την κάρτα φίλτρων (27.09.2026) ──────────────
   Εντολή ιδιοκτήτη: ένα «Φίλτρα» με βελάκι πάνω από την κάρτα, σε Ημέρα ΚΑΙ
   Διάστημα· ανοιχτό/κλειστό ΑΝΑ ΣΥΣΚΕΥΗ (calendar.js, `es_cal_filters_open`).
   Διπλωμένη, δείχνει ΤΑ ΑΝΑΜΜΕΝΑ φίλτρα ως μικρά τσιπ με «✕» — αλλιώς ένα
   ξεχασμένο φίλτρο θα άφηνε λειψή λίστα χωρίς καμία εξήγηση.
   ⚠ ΧΩΡΙΣ ΓΥΑΛΙ ΚΑΙ ΧΩΡΙΣ ΘΟΛΩΜΑ: κάθεται πάνω στη σελίδα σαν ετικέτα, όχι
   σαν επιφάνεια. Γι' αυτό ΔΕΝ μπαίνει στις λίστες `@supports not` /
   `prefers-reduced-transparency` — δεν έχει τίποτα να σβήσουν.
   ⚠ ΟΧΙ `.pstrip`/`.filterbar` εδώ: το `paint()` ξαναβάζει την κύλιση των
   λωρίδων κατά σειρά, και η εκτύπωση κρύβει ήδη τα `.filterbar` με άλλον
   κανόνα. Η μπάρα φεύγει από το χαρτί με `.no-print`. */
.calf { display: flex; flex-direction: column; gap: 6px; }
/* 27.09 βράδυ — «just add an arrow on the top right of the filters section»:
   ΑΝΟΙΧΤΗ, το βελάκι ζει ΜΕΣΑ στην κάρτα. Grid δύο στηλών: η ΠΡΩΤΗ λωρίδα
   μοιράζεται τη γραμμή της με το βελάκι, οι υπόλοιπες πιάνουν όλο το πλάτος
   — μόνο η πρώτη χάνει ~30px, καμία δεν χάνει ύψος. Το `[hidden]` του
   base.css είναι `!important`, άρα το διπλωμένο `display:none` νικά το grid. */
.filter-card.has-fold {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 4px; row-gap: 4px;
}
.filter-card.has-fold > * { grid-column: 1 / -1; }
.filter-card.has-fold > .filterbar:first-of-type { grid-column: 1; grid-row: 1; }
.filter-card.has-fold > .calf-toggle { grid-column: 2; grid-row: 1; align-self: start; margin-inline-end: -4px; }
/* ΔΙΠΛΩΜΕΝΗ: λεπτή γραμμή — τσιπ «✕» αριστερά (τυλίγονται ΜΕΣΑ στη στήλη
   τους), βελάκι ΠΑΝΤΑ δεξιά, κι όταν δεν υπάρχει κανένα τσιπ. */
.calf-bar { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.calf-bar > .calf-toggle { margin-inline-start: auto; }
.calf-toggle {
  flex: none; display: inline-grid; place-items: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: var(--r-sm); background: none; cursor: pointer;
  color: var(--muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.calf-toggle svg {
  flex: none; width: 18px; height: 18px;
  transition: transform var(--t-fast);
}
/* Ανοιχτή = βελάκι ΠΑΝΩ («μάζεψέ τα»), διπλωμένη = ΚΑΤΩ («άνοιξέ τα»). */
.calf-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (hover: hover) { .calf-toggle:hover { color: var(--ink); } }
@media (hover: hover) { .calf-toggle:hover { background: var(--card-2); } }
.calf-toggle:focus-visible, .calf-chip:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }

.calf-on {
  flex: 1 1 0; min-width: 0; min-height: 28px;
  display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 6px;
}
/* Χρυσό περίγραμμα = «αναμμένο», όπως η στεφάνη του τσιπ στην ανοιχτή κάρτα.
   Τα γράμματα ΜΕΛΑΝΙ, όχι χρυσά: 11px χρυσό πάνω σε χρυσίζον γέμισμα πέφτει
   κάτω από 4,5:1. */
.calf-chip {
  display: inline-flex; align-items: center; gap: 4px;
  max-width: min(180px, 100%); height: 26px; padding: 0 6px 0 10px;
  border: 1px solid var(--gold); border-radius: var(--r-pill);
  background: var(--gold-soft2); color: var(--ink); cursor: pointer;
  font: inherit; font-size: var(--fs-xs); font-weight: 600; line-height: 1;
}
.calf-chip-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calf-chip svg { flex: none; width: 12px; height: 12px; color: var(--muted); }
@media (hover: hover) { .calf-chip:hover svg { color: var(--ink); } }
.calf-chip.nodriver { border-color: var(--nodriver); background: var(--nodriver-soft); }
.calf-chip.nodriver svg { color: var(--nodriver); }

/* Αφή: ίδια ύψη με τη γραμμή εργαλείων του ημερολογίου (36px, views.css). */
@media (hover: none) {
  .calf-toggle { width: 36px; height: 36px; }
  .calf-on { min-height: 36px; }
  .calf-chip { height: 32px; padding: 0 9px 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .calf-toggle, .calf-toggle svg { transition: none; }
}
/* Υψηλή αντίθεση Windows: τα γεμίσματα και οι σκιές σβήνουν. Ο αριθμός του
   πορτοκαλί τσιπ χάνει το χαπάκι του — παίρνει περίγραμμα· η εστίαση το
   χρώμα του συστήματος. */
@media (forced-colors: active) {
  .pchip.nodriver .pcount { border: 1px solid CanvasText; }
  .calf-chip { border-color: CanvasText; }
  .calf-toggle:focus-visible, .calf-chip:focus-visible { outline-color: Highlight; }
}
/* «Φίλτρο: Χωρίς οδηγό · Άφιξη» — η γραμμή του ΧΑΡΤΙΟΥ πάνω από τα σύνολα
   (calendar.js, `filterPrintNote`· στην οθόνη την κρύβει το `.print-only`).
   Μαύρη και έντονη, κάτω από τον τίτλο: είναι η μόνη ένδειξη στο φύλλο ότι
   ΔΕΝ είναι όλο το πρόγραμμα της μέρας. */
@media print {
  .calf-print { margin: 0 0 10px; font-size: var(--fs-sm); font-weight: 700; color: #000 !important; }
}

/* ── Πεδίο τοποθεσίας με λίστα συχνών σημείων ───────────────────────────────
   Γράφεις ελεύθερα· το βελάκι δεξιά ανοίγει ό,τι έχει ήδη περάσει από εδώ,
   με τα πιο συχνά πρώτα. Το native <datalist> δεν έκανε τη δουλειά: δεν έχει
   βελάκι, δεν ανοίγει με κλικ και στο κινητό δεν φαίνεται καθόλου.
   ========================================================================== */
.locbox { position: relative; }
.locbox .locinput { padding-inline-end: 34px; }
.locbtn {
  position: absolute; inset-inline-end: 1px; top: 1px; bottom: 1px; width: 32px;
  display: grid; place-items: center; border: 0; background: none;
  color: var(--faint); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  transition: color var(--t-fast), background var(--t-fast);
}
.locbtn:hover { color: var(--ink); background: var(--card-2); }
.locbtn svg { width: 16px; height: 16px; transition: transform var(--t-fast); }
.locbox.open .locbtn svg { transform: rotate(180deg); }

.locmenu {
  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 40;
  display: none; flex-direction: column; gap: 1px;
  max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 5px; box-shadow: var(--shadow-lg);
}
.locbox.open .locmenu { display: flex; }
.locitem {
  display: flex; align-items: center; gap: var(--s2); width: 100%;
  text-align: start; border: 0; background: none; padding: 8px 9px;
  border-radius: var(--r-xs); font-size: var(--fs-base); color: var(--ink);
}
.locitem:hover, .locitem.cur { background: var(--card-2); }
.loccount {
  flex: 0 0 auto; font-size: var(--fs-2xs); font-weight: 700; color: var(--faint);
  background: var(--card-2); border-radius: var(--r-pill); padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.locitem:hover .loccount, .locitem.cur .loccount { background: var(--line-2); }
.locempty { padding: 10px 9px; font-size: var(--fs-sm); color: var(--faint); }

/* Το πεδίο ώρας δανείζεται το ίδιο περίβλημα, αλλά είναι στενό και η λίστα
   του δεν χρειάζεται να απλωθεί σε όλο το πλάτος. */
.timebox .locinput { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ── Η ρόδα ώρας, τύπου iOS ────────────────────────────────────────────────
   Το κούμπωμα και η αδράνεια είναι ΤΟΥ ΛΕΙΤΟΥΡΓΙΚΟΥ, όχι δικά μας: το
   `scroll-snap` δίνει το ίδιο φυσικό κύλισμα με το ξυπνητήρι του iPhone.
   Χειρόγραφο drag με JS θα έχανε το momentum και θα κολλούσε. */
.timewheel {
  min-width: 220px; padding: 0; overflow: hidden;
  flex-direction: column; gap: 0;
  max-height: none;   /* η ρόδα κυλάει μέσα της, όχι το panel */
}
/* ⚠ ΑΝΑΠΟΔΑ ΟΤΑΝ ΔΕΝ ΧΩΡΑΕΙ ΑΠΟ ΚΑΤΩ.
   Η φόρμα είναι modal με ΚΟΛΛΗΜΕΝΗ μπάρα «Άκυρο / Αποθήκευση» στο κάτω μέρος.
   Πεδίο ώρας κοντά στο τέλος σήμαινε ρόδα με το «ΟΚ» της κρυμμένο ΠΙΣΩ από τη
   μπάρα — φαινόταν σαν να μην έχει κουμπιά. Η κλάση μπαίνει από τη JS, που
   μετράει τον πραγματικό χώρο· σκέτο CSS δεν μπορεί να το ξέρει. */
.timebox.up .timewheel { top: auto; bottom: calc(100% + 4px); }
/* Δεν χωρά δεξιά → κουμπώνει στη δεξιά άκρη του πεδίου (η JS το μετρά). */
.timebox.end .timewheel { inset-inline: auto 0; }
.tw-head {
  display: grid; grid-template-columns: 1fr 1fr; text-align: center;
  font-size: var(--fs-2xs); font-weight: 700;
  color: var(--faint); padding: 8px 0 6px; border-bottom: 1px solid var(--line-2);
}
.tw-cols { position: relative; display: grid; grid-template-columns: 1fr 1fr; }

/* ⚠ ΤΟ ΥΨΟΣ ΕΙΝΑΙ 5 ΚΕΛΙΑ ΑΚΡΙΒΩΣ (5 × 34). Με μονό αριθμό, ένα κελί πέφτει
   ΑΚΡΙΒΩΣ στο κέντρο και η μπάντα το αγκαλιάζει. Με ζυγό, το «επιλεγμένο»
   κάθεται ανάμεσα σε δύο γραμμές και τίποτα δεν ευθυγραμμίζεται. */
.tw-col {
  height: 170px; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /* ⚠ ΜΟΝΟ ΠΑΝΩ-ΚΑΤΩ (εντολή ιδιοκτήτη 02.09.2026). Με λοξή κίνηση του
     δαχτύλου, το κινητό έπιανε το ΟΡΙΖΟΝΤΙΟ σκρολ της σελίδας από κάτω και η
     ρόδα «ξέφευγε» στο πλάι. Το `touch-action: pan-y` λέει στο λειτουργικό ότι
     εδώ υπάρχει μόνο κατακόρυφη κίνηση· το `overscroll-behavior` κρατά το
     σκρολ μέσα στη ρόδα όταν φτάσει στην άκρη. */
  touch-action: pan-y; overscroll-behavior: contain;
  /* Το ξεθώριασμα στις άκρες — η «καμπύλη» της ρόδας χωρίς 3D. */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
}
.tw-col::-webkit-scrollbar { display: none; }
/* Δύο κελιά κενά πάνω και κάτω, ώστε το ΠΡΩΤΟ και το ΤΕΛΕΥΤΑΙΟ να μπορούν να
   φτάσουν στο κέντρο. Χωρίς αυτό, οι 00 και 23 δεν επιλέγονται ποτέ. */
.tw-list { padding: 68px 0; }
.tw-cell {
  height: 34px; line-height: 34px; text-align: center;
  scroll-snap-align: center; cursor: pointer;
  font-variant-numeric: tabular-nums; font-size: var(--fs-md);
  color: var(--muted); transition: color var(--t-fast), transform var(--t-fast);
}
.tw-cell.on { color: var(--ink); font-weight: 700; transform: scale(1.14); }

/* Η γκρι μπάντα του iOS. `pointer-events: none` — αλλιώς τρώει το σκρολ. */
.tw-band {
  position: absolute; inset-inline: 6px; top: 50%; height: 34px;
  transform: translateY(-50%); border-radius: var(--r-sm);
  background: var(--card-2); pointer-events: none; z-index: 0;
}
.tw-col { position: relative; z-index: 1; background: transparent; }
.tw-foot {
  display: flex; align-items: center; gap: var(--s2);
  padding: 8px 10px; border-top: 1px solid var(--line-2);
}

/* Σε κινητό η ρόδα πιάνει όλο το πλάτος του πεδίου και ψηλότερα κελιά για τον
   αντίχειρα — όπως το ξυπνητήρι.
   ⚠ ΠΑΤΩΜΑ 216px (26.09.2026): το κουτί της ώρας έγινε 112px και η ρόδα
   έμενε 112 — δύο στήλες των 56px για τον αντίχειρα. Όταν δεν χωρά δεξιά,
   η JS βάζει `.end` και ανοίγει προς τα αριστερά (δες placePanel). */
@media (max-width: 620px) {
  .timewheel { min-width: 216px; width: 100%; }
  .tw-col { height: 200px; }
  .tw-list { padding: 80px 0; }
  .tw-cell { height: 40px; line-height: 40px; font-size: var(--fs-lg); }
  .tw-band { height: 40px; }
}

/* ── Τύπος οχήματος: ΣΚΕΤΟ ΚΕΙΜΕΝΟ ──────────────────────────────────────────
   Sedan, SUV, MiniVan, MiniBus. Ο τύπος είναι κατηγορία, όχι αντικείμενο —
   δεν έχει φωτογραφία γιατί δεν υπάρχει «ένα» Sedan να δεις. Οι φωτογραφίες
   μένουν στα συγκεκριμένα αυτοκίνητα παρακάτω.
   ========================================================================== */
.typerow { display: flex; flex-wrap: wrap; gap: 6px; }
.typechip {
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  padding: 7px 15px; border-radius: var(--r-pill);
  font-size: var(--fs-base); font-weight: 600; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.typechip:hover { background: var(--card-2); color: var(--ink); }
.typechip.on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Δεν χωράνε οι επιβάτες: σβήνει, αλλά ΠΑΤΙΕΤΑΙ — μπορεί να ξέρεις κάτι που
   δεν ξέρει η χωρητικότητα (παιδί στα γόνατα, δεύτερο όχημα). */
.typechip.unfit { opacity: .45; }

/* «Άλλος τύπος ▾» — pill που ανοίγει λίστα (26.09.2026, δες `moreTypesPill`).
   Η λίστα δανείζεται το `.locmenu` των From/To· εδώ κουμπώνει ΑΡΙΣΤΕΡΑ στο pill
   και είναι φαρδύτερη απ' αυτό, και με `.end` δεξιά όταν δεν χωρά. */
.typemore .typechip { display: inline-flex; align-items: center; gap: 6px; }
.typemore .typechip svg { width: 14px; height: 14px; transition: transform var(--t-fast); }
.typemore.open .typechip { border-color: var(--gold-ink); color: var(--ink); background: var(--card-2); }
.typemore.open .typechip svg { transform: rotate(180deg); }
.typemore .typemenu { inset-inline: 0 auto; min-width: 240px; max-height: 280px; }
.typemore.end .typemenu { inset-inline: auto 0; }

/* ── Κάρτες οχήματος με φωτογραφία (φόρμα κράτησης) ─────────────────────── */
.vehgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--s3); min-width: 0; }
@media (max-width: 520px) { .vehgrid { grid-template-columns: 1fr 1fr; } }
.vehcard {
  position: relative; text-align: start; cursor: pointer;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 10px 12px 13px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t);
}
.vehcard:hover { border-color: var(--line); transform: translateY(-2px); }
.vehcard.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.vehcard .vphoto {
  width: 100%; height: 76px; object-fit: contain; display: block; margin: 4px 0 8px;
  transition: transform var(--t);
}
.vehcard:hover .vphoto { transform: scale(1.04); }
.vehcard .vname { font-weight: 600; font-size: var(--fs-base); color: var(--ink); line-height: 1.3; }
.vehcard .vstats { font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; }
.vehcard .vradio {
  position: absolute; inset-inline-start: 10px; top: 10px; z-index: 2;
  width: 16px; height: 16px; border: 1.5px solid var(--line); border-radius: 50%;
  background: var(--card); transition: border-color var(--t-fast);
}
.vehcard .vradio::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--primary); transform: scale(0); transition: transform var(--t);
}
.vehcard.on .vradio { border-color: var(--primary); }
.vehcard.on .vradio::after { transform: scale(1); }
.vehcard.unfit { opacity: .4; cursor: not-allowed; }
.vehcard.unfit:hover { transform: none; border-color: var(--line-2); }
.vehcard .vwarn { font-size: var(--fs-xs); color: var(--crit); margin-top: 5px; }

/* ── Πτυσσόμενο «Περισσότερα» ───────────────────────────────────────────── */
.disclose { border-top: 1px solid var(--line-2); margin-top: var(--s5); padding-top: var(--s4); }
.disclose-t {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; background: none; padding: 0; color: var(--muted);
  font-size: var(--fs-sm); font-weight: 600;
}
.disclose-t:hover { color: var(--ink); }
.disclose-t svg { width: 15px; height: 15px; transition: transform var(--t); }
.disclose.open .disclose-t svg { transform: rotate(180deg); }
.disclose-b { display: none; padding-top: var(--s4); }
.disclose.open .disclose-b { display: block; animation: rise .3s cubic-bezier(.22,.7,.3,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* ── Κουμπιά ενεργειών ανά μεταφορά ──────────────────────────────────────────
   Μεταφέρθηκαν από το combined.html: ένα ορατό κουμπί myDATA και ένα «⋯» που
   ανοίγει το μενού με voucher, όμοια κράτηση, επεξεργασία και διαγραφή.
   Ίδιες διαστάσεις, ίδια συμπεριφορά — μόνο τα χρώματα περνούν από tokens.  */
.tactions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding-top: 9px; margin-top: 9px; border-top: 1px solid var(--line-2);
}
.tact {
  width: 31px; height: 31px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.tact:hover { border-color: var(--gold-l); background: var(--gold-soft); }
.tact svg { width: 15px; height: 15px; color: var(--gold-ink); }
.tact[disabled] { opacity: .35; pointer-events: none; }

/* ── myDATA: το αυθεντικό σήμα της ΑΑΔΕ ─────────────────────────────────────
   ΤΟ ΠΕΡΙΓΡΑΜΜΑ ΕΙΝΑΙ Η ΠΛΗΡΟΦΟΡΙΑ: γκρι = δεν εκδόθηκε απόδειξη, μπλε =
   εκδόθηκε. Το λογότυπο μένει ΠΑΝΤΑ έγχρωμο — είναι σήμα τρίτου, δεν το
   βάφουμε· η κατάσταση λέγεται με το πλαίσιο γύρω του. */
.tact.mydata {
  width: auto; gap: 5px; padding: 0 9px;
  border-color: var(--line);
  background: var(--card);
}
.tact-img { display: block; height: 13px; width: auto; }
/* ⚠ Η ΛΕΥΚΗ ΠΛΑΚΕΤΑ ΚΑΤΑΡΓΗΘΗΚΕ (10.09.2026) ΚΑΙ ΔΕΝ ΞΑΝΑΜΠΑΙΝΕΙ.
   Ήταν το μπάλωμα για το ναυτικό «DATA» που χανόταν στη νύχτα. Πλέον το ίδιο
   το σήμα έχει ΛΕΥΚΑ ΓΡΑΜΜΑΤΑ στο σκούρο θέμα (mydata-dark.png), οπότε λευκή
   πλακέτα σημαίνει ΛΕΥΚΟ ΣΕ ΛΕΥΚΟ — το σήμα θα εξαφανιζόταν εντελώς.
   Με τη λευκή πλακέτα έφυγε και ο μόνος λόγος που το `.sent` γινόταν
   πράσινο στη νύχτα: το γαλάζιο #86a9e0 χανόταν πάνω στο λευκό. Τώρα το
   περίγραμμα ξαναγίνεται ΜΠΛΕ και στα δύο θέματα, όπως λέει ο κανόνας
   «γκρι = δεν εκδόθηκε, μπλε = εκδόθηκε» — και το πράσινο μένει ελεύθερο
   για τη σημασία που έχει παντού αλλού (εισπράχθηκε / θετικό περιθώριο). */
.tact.mydata:hover { border-color: var(--pay-account); background: var(--info-soft); }
/* Εκδόθηκε: μπλε περίγραμμα, διπλό για να ξεχωρίζει με μια ματιά σε λίστα. */
.tact.mydata.sent {
  border-color: var(--pay-account);
  box-shadow: 0 0 0 1px var(--pay-account) inset;
}
.tact.mydata.sent:hover { background: var(--info-soft); }
/* Μέσα στο ⋯ το λογότυπο μπαίνει στη θέση του εικονιδίου — λίγο μικρότερο,
   στο ίδιο ύψος με τα SVG των υπόλοιπων γραμμών (16px κουτί, 12px μελάνι). */
.tmenu-item .tact-img { height: 12px; }
.tmenu-item .logo-word { --logo-h: 12px; }

.tmore { position: relative; display: inline-flex; }
.tmore-btn svg { color: var(--muted); }
.tmore.open .tmore-btn { background: var(--card-2); border-color: var(--gold); }
.tmore.open .tmore-btn svg { color: var(--gold-ink); }

.tmenu {
  position: absolute; inset-inline-start: 0; bottom: calc(100% + 8px); z-index: 30;
  min-width: 216px; display: none; flex-direction: column;
  background: var(--glass-strong); border: 1px solid var(--line-2); border-radius: var(--r-md);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  padding: 6px; box-shadow: var(--shadow-lg);
}
.tmore.open .tmenu { display: flex; animation: tmenuIn .16s cubic-bezier(.4,0,.2,1); }

/* ── ΤΟ ΜΕΝΟΥ ΤΗΣ ΚΑΡΤΑΣ, ΣΤΟ ΣΗΜΕΙΟ ΤΟΥ ΠΑΤΗΜΑΤΟΣ ────────────────────────
   Ανοίγει με πάτημα ΟΠΟΥΔΗΠΟΤΕ στη μεταφορά (05.09.2026) — δεν υπάρχει πια
   κουμπί `⋯`. Ζει στο <body>, γι' αυτό `fixed` και όχι `absolute`: η κάρτα
   είναι γραμμή λίστας και ένα απόλυτο μενού μέσα της κοβόταν από την επόμενη.
   Τη θέση τη γράφει το `openJobMenu()` σε pixel, αφού μετρήσει το μέγεθος. */
.tmenu-float {
  position: fixed; inset-inline-start: auto; bottom: auto; z-index: 80;
  display: flex; animation: tmenuIn .16s cubic-bezier(.4,0,.2,1);
}
@keyframes tmenuIn { from { opacity: 0; transform: translateY(5px); } }
/* Κοντά στη δεξιά άκρη ανοίγει ανάποδα, αλλιώς βγαίνει εκτός οθόνης. */
.tmore.flip .tmenu { inset-inline-start: auto; inset-inline-end: 0; }
/* Και κοντά στην ΚΟΡΥΦΗ ανοίγει προς τα κάτω. Με όλες τις ενέργειες μέσα, το
   μενού είναι ψηλό — στην πρώτη μεταφορά της μέρας θα έβγαινε πάνω από την
   οθόνη και δεν θα το έφτανε κανείς. */
.tmore.down .tmenu { bottom: auto; top: calc(100% + 8px); }
/* Σε πολύ κοντή οθόνη κυλάει μέσα του αντί να ξεχειλίζει. */
.tmenu { max-height: min(70vh, 420px); overflow-y: auto; overscroll-behavior: contain; }

/* ── Emoji ως εικονίδιο ──────────────────────────────────────────────────
   Η `icon()` επιστρέφει αυτό το span όταν της δώσεις emoji αντί για όνομα
   σχεδίου. Στέκεται στη θέση ενός <svg>, οπότε χρειάζεται τα ίδια:
   σταθερό πλάτος (αλλιώς χορεύουν οι ετικέτες δίπλα του), κεντράρισμα, και
   `flex: 0 0 auto` για να μη ζαρώσει σε στενή κάρτα.

   ⚠ `line-height: 1` ΚΑΙ `font-style: normal`: τα emoji κουβαλούν δικές τους
   μετρικές και μεγαλώνουν τη γραμμή που τα φιλοξενεί, ενώ το `.job-note-row`
   και άλλα σημεία είναι πλάγια — ένα πλάγιο emoji γέρνει.
   ⚠ Το μέγεθος ΔΕΝ κληρονομείται από το κείμενο γύρω: ορίζεται ρητά σε κάθε
   συμφραζόμενο, δίπλα στον κανόνα του αδελφού `svg`, ώστε τα δύο είδη
   εικονιδίου να δείχνουν πάντα ίδια. */
.ico-emoji {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; line-height: 1; font-style: normal;
  font-size: 13px; width: 14px;
}

.tmenu-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  text-align: start; border: 0; background: none; padding: 9px 10px;
  border-radius: var(--r-xs); font-size: var(--fs-base); font-weight: 500; color: var(--ink);
}
.tmenu-item:hover { background: var(--card-2); }
.tmenu-item svg { width: 16px; height: 16px; color: var(--gold-ink); flex: 0 0 auto; }
/* Το emoji στη θέση του σχεδίου — ίδιο πλάτος με το svg, ώστε οι ετικέτες
   όλων των γραμμών να ξεκινούν στην ΙΔΙΑ κατακόρυφη. */
.tmenu-item .ico-emoji { width: 16px; font-size: 14px; }
/* Κλειδωμένη ενέργεια: φαίνεται σβηστή αλλά πατιέται — το πάτημα λέει γιατί
   δεν γίνεται, αντί να αφήνει τον χρήστη να απορεί. */
.tmenu-item.locked { opacity: .42; }
.tmenu-item.danger { color: var(--crit); }
.tmenu-item.danger svg { color: var(--crit); }
.tmenu-sep { height: 1px; background: var(--line-2); margin: 5px 2px; }

/* ── Avatars ────────────────────────────────────────────────────────────── */
.av {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 600; color: #fff;
  background-size: cover; background-position: center;
  /* Τα αρχικά λίγο αραιότερα — το `text-indent` τα ξανακεντράρει. */
  letter-spacing: .05em; text-indent: .05em;
}
/* Σμάλτο στα πρόσωπα, όπως στη στεφάνη των φίλτρων (24.09.2026). Μηδενική
   ειδικότητα: όπου ένας κανόνας δίνει ήδη σκιά (π.χ. `.av-stack`), νικά εκείνος. */
@media screen { :where(.av:not(.logo):not(.av-logo)) { box-shadow: var(--enamel); } }
/* ⚠ ΤΟ ΛΟΓΟΤΥΠΟ ΣΥΝΕΡΓΑΤΗ ΔΕΝ ΕΙΝΑΙ ΠΡΟΣΩΠΟ. Κυκλικό crop θα έκοβε ένα πλατύ
   σήμα δεξιά-αριστερά. Ίδια λύση με το `.pchip.logo` της λωρίδας συνεργατών:
   λευκή πλακέτα, ολόκληρο το σήμα με `contain`, και `background-origin:
   content-box` ώστε το γέμισμα να δίνει αέρα αντί να το κολλάει στις άκρες.
   ⚠ ΤΟ ΛΕΥΚΟ ΜΕΝΕΙ ΛΕΥΚΟ ΚΑΙ ΣΤΗ ΝΥΧΤΑ — τα λογότυπα είναι σχεδιασμένα για
   λευκό χαρτί και πολλά έχουν σκούρα γράμματα που θα εξαφανίζονταν. */
.av.logo {
  border-radius: var(--r-xs);
  background-color: #fff;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  background-origin: content-box; padding: 3px;
}
:root[data-theme="dark"] .av.logo { background-color: rgba(255, 255, 255, .94); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .av.logo { background-color: rgba(255, 255, 255, .94); }
}

.av-lg { width: 46px; height: 46px; font-size: var(--fs-base); }
.av-sm { width: 25px; height: 25px; font-size: 9.5px; }
.av-stack { display: inline-flex; }
.av-stack .av + .av { margin-inline-start: -9px; box-shadow: 0 0 0 2px var(--card); }

.car-thumb {
  width: 54px; height: 34px; border-radius: var(--r-xs); flex: 0 0 auto;
  background: var(--card-2) center/cover no-repeat; border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: var(--faint); text-align: center; padding: 2px;
}

/* ── Πίνακες & λίστες ───────────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--card); }
table.tbl { border-collapse: collapse; width: 100%; min-width: 640px; font-size: var(--fs-base); }
table.tbl thead th {
  text-align: start; font-size: var(--fs-sm);
  color: var(--muted); font-weight: 600; padding: 11px 14px;
  border-bottom: 1px solid var(--line-2); background: var(--plate); white-space: nowrap; position: sticky; top: 0;
}
table.tbl tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; color: var(--ink-2); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--card-2); }
table.tbl tbody tr.clickable { cursor: pointer; }
table.tbl td.right, table.tbl th.right { text-align: end; font-variant-numeric: tabular-nums; }

.list { display: flex; flex-direction: column; gap: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-2); }
.list-row { display: flex; align-items: center; gap: var(--s3); padding: 12px var(--s4); background: var(--plate); border-bottom: 1px solid var(--line-2); }
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--plate-2); }

.empty { text-align: center; padding: var(--s8) var(--s4); color: var(--muted); }
/* ⚠ `.empty > div > svg`, ΟΧΙ `.empty svg`. Ο κανόνας φτιάχτηκε για το ΜΕΓΑΛΟ
   διακοσμητικό εικονίδιο της άδειας οθόνης — 34px, σχεδόν αόρατο επίτηδες.
   Με σκέτο `.empty svg` έπιανε ΚΑΙ το εικονίδιο μέσα στο κουμπί ενέργειας που
   κάθεται στην ίδια άδεια οθόνη: το «+» του «Νέα κράτηση» έβγαινε
   `color: var(--line)` = rgba(255,255,255,.17) πάνω σε χρυσό — **1,78:1**,
   κυριολεκτικά αόρατο, ενώ το κείμενο δίπλα του μετρούσε 9,87:1.
   Ίδια ειδίκευση με το `.btn svg` (0,1,1) αλλά ΠΙΟ ΚΑΤΩ στο αρχείο, οπότε
   κέρδιζε. Το `>` το περιορίζει στο εικονίδιο-εικονογράφηση και μόνο. */
.empty > div > svg { width: 34px; height: 34px; color: var(--line); margin-bottom: var(--s3); }
.empty b { display: block; color: var(--ink); font-size: var(--fs-md); font-weight: 600; margin-bottom: 4px; }

/* ── Στατιστικά πλακίδια ────────────────────────────────────────────────── */
.stat {
  background: var(--card-glass); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: var(--s4);
  /* χωρίς θόλωμα — κάθεται σε σκέτο φόντο, βλ. .escard */
  box-shadow: var(--shadow-sm);
}
.stat-l { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.stat-v {
  font-family: var(--serif); font-size: var(--fs-2xl); font-weight: 400;
  font-variant-numeric: tabular-nums; margin-top: 6px; line-height: 1.05;
  letter-spacing: var(--h-track);
}
/* Το ποσό μικραίνει σε στενή οθόνη, ΑΛΛΙΩΣ ΤΟ € ΜΕΝΕΙ ΜΟΝΟ ΤΟΥ ΣΤΗ ΔΕΥΤΕΡΗ
   ΓΡΑΜΜΗ. Μετρημένο στα 375px: το `.grid-4` είναι δίστηλο ως τα 1000px, άρα το
   πλακίδιο δίνει 130px ωφέλιμα — αλλά στα 27,2px το «12.500,75 €» θέλει 144px
   και το «999.999,99 €» 171px. Δεν είναι σενάριο εργαστηρίου: ένα μηνιαίο
   τιμολόγιο ξενοδοχείου περνά άνετα τα πέντε ψηφία.
   Με 5vw: στα 375px → 18,8px (χειρότερη περίπτωση 118px ✓), στα 320px → πάτωμα
   16px (99px ✓), από τα 680px και πάνω επιστρέφει ακέραιο το --fs-2xl.
   ΔΕΝ μπαίνει `white-space: nowrap`: αν κάποτε εμφανιστεί ποσό εκτός κλίμακας,
   προτιμότερο να τυλιχτεί παρά να ξεχειλίσει έξω από το πλακίδιο. */
@media (max-width: 679px) {
  .stat-v { font-size: clamp(1rem, 5vw, var(--fs-2xl)); }
}
.stat-d { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }
.stat.accent { border-color: var(--gold-soft2); background: var(--card); }
.stat.accent .stat-v { color: var(--gold-ink); }

/* ⚠ ΜΕΤΑ ΤΟ `.accent`, ΚΑΙ ΕΙΝΑΙ Ο ΛΟΓΟΣ ΠΟΥ ΔΟΥΛΕΥΟΥΝ. Ίδια ειδικότητα με το
   `.stat.accent .stat-v` (0,2,1) — κερδίζει μόνο η σειρά. Αν μετακινηθούν πιο
   πάνω, ο αριθμός ξαναγίνεται χρυσός σιωπηλά.

   Χρησιμεύουν στα σύνολα των Reports: ο Τζίρος πράσινος (μπαίνουν) και το
   Σύνολο εξόδων κόκκινο (βγαίνουν), ώστε να ξεχωρίζουν με μια ματιά από το
   χρυσό Περιθώριο. Το περίγραμμα μένει χρυσό: σημαίνει «σύνολο», όχι πρόσημο. */
.stat.v-green .stat-v, .stat.v-green .stat-i { color: var(--ic-cash); }
.stat.v-red   .stat-v, .stat.v-red   .stat-i { color: var(--ic-free); }
/* Μπλε για τα ΕΣΟΔΑ της κεφαλίδας ημέρας — εντολή ιδιοκτήτη 07.09.2026:
   έσοδα μπλε, έξοδα κόκκινα, μεικτό κέρδος χρυσό. Το χρυσό το δίνει ήδη το
   `.accent`, οπότε εδώ χρειάζονται μόνο τα δύο πρώτα. */
.stat.v-blue  .stat-v, .stat.v-blue  .stat-i { color: var(--ic-office); }

/* ⚠ ΤΟ ΧΡΥΣΟ ΚΟΥΜΠΙ. Η κύρια ενέργεια έγινε ΚΟΚΚΙΝΗ (βλ. --action στο
   tokens.css), αλλά ο ιδιοκτήτης ξεχώρισε έξι σημεία όπου το κόκκινο δεν
   χρειάζεται: εκεί το κουμπί «προσθήκης» δεν είναι η επείγουσα ενέργεια της
   οθόνης, είναι η καθημερινή. Κρατούν το παλιό χρυσό γέμισμα με ναυτικά
   γράμματα. ΔΕΝ αγγίζει τα --action* tokens — μόνο αυτά τα κουμπιά. */
.btn-gold {
  background: var(--gold); border-color: var(--gold); color: var(--navy);
  font-weight: 700; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.btn-gold:hover {
  background: var(--gold-l); border-color: var(--gold-l);
  box-shadow: 0 6px 18px -6px var(--gold-glow);
}
.btn-gold:hover svg { transform: rotate(90deg); }
.btn-gold:focus-visible { box-shadow: 0 0 0 3px var(--gold-glow); }
.btn-gold svg { color: var(--navy); }
/* Ίδια λάμψη με τα άλλα γεμάτα κουμπιά. */
.btn-gold { position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform var(--t-sheen) var(--spring);
}
.btn-gold:hover::after { transform: translateX(120%); }

/* ── Μικρό πλακίδιο με εικονίδιο (κεφαλίδα ημέρας στο Ημερολόγιο) ──────────
   Τα μεγάλα πλακίδια χωρούσαν τέσσερα νούμερα. Εδώ είναι έξι — επτά όταν
   υπάρχει προπληρωμένη — και κάθονται ΠΑΝΩ από τη λίστα της ημέρας. Κάθε
   pixel ύψους εδώ είναι μια δουλειά που ο dispatcher δεν βλέπει χωρίς κύλιση,
   γι' αυτό: χωρίς γραμμή επεξήγησης, μικρό padding, μικρός αριθμός, και το
   εικονίδιο αναλαμβάνει τη δουλειά του μακριού λεκτικού. */
/* ⚠ ΜΙΑ ΓΡΑΜΜΗ, ΟΧΙ ΣΤΟΙΒΑ: λεκτικό αριστερά, νούμερο δεξιά.
   Στοιβαγμένα, κάθε πλακίδιο ήταν 44px ύψος ΚΑΙ 376px πλάτος σε οθόνη
   γραφείου — για να δείξει «0 €». Το κενό δεν ήταν ανάμεσα στα κουτιά αλλά
   ΜΕΣΑ τους. Στη μία γραμμή, το πλάτος που περίσσευε γίνεται η απόσταση
   λεκτικού-νούμερου και το ύψος πέφτει στο μισό. */
.stat-sm {
  padding: 5px 9px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.stat-h { display: flex; align-items: center; gap: 4px; min-width: 0; }
.stat-i { display: inline-flex; align-items: center; color: var(--gold-ink); flex-shrink: 0; }

/* ── Πλακίδιο ΜΟΝΟ με εικονίδιο ─────────────────────────────────────────────
   Χωρίς λεκτικό, το εικονίδιο είναι το μόνο που ξεχωρίζει το ένα πλακίδιο από
   το άλλο — οπότε μεγαλώνει από 13px σε 20px για να διαβάζεται με μια ματιά,
   και το νούμερο παίρνει τον χώρο που έμεινε. */
.stat-icon .stat-i svg { width: 20px; height: 20px; }
/* Το 🗃️ του γραφείου στη θέση του σχεδίου. Μετρημένο: τα αδέλφια του σε αυτή
   τη σειρά (💶 μετρητά, PNG του POS, PNG του «χωρίς χρέωση», SVG) είναι ΟΛΑ
   20×20· χωρίς αυτόν τον κανόνα το emoji έπεφτε στα 14×13 από το γενικό
   `.ico-emoji` και φαινόταν μισό. */
.stat-icon .stat-i .ico-emoji { width: 20px; font-size: 20px; }
.stat-icon .stat-h { gap: 0; }
/* ── Τα σύμβολα πληρωμής που δεν είναι SVG ──────────────────────────────────
   Το μέγεθος το δίνει το `payGlyph()` inline, γιατί διαφέρει ανά θέση: 20px
   στην κεφαλίδα της μέρας, 16px στη γραμμή της κάρτας, 26px στη σφραγίδα της
   δωρεάν. Εδώ μένει μόνο ό,τι είναι κοινό.
   Τα PNG είναι ΕΓΧΡΩΜΑ: δεν βάφονται από `color` όπως τα SVG, άρα αγνοούν τα
   --ic-* και κρατούν τα δικά τους χρώματα. */
.pay-img { object-fit: contain; display: block; flex: 0 0 auto; }
.pay-emoji { line-height: 1; display: block; flex: 0 0 auto; }
.stat-sm .stat-l {
  font-size: var(--fs-2xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Το νούμερο δεν συρρικνώνεται ποτέ — αν λείψει χώρος, κόβεται το ΛΕΚΤΙΚΟ
   (που το λέει ήδη το χρωματιστό εικονίδιο), όχι το ποσό. */
.stat-sm .stat-v { font-size: var(--fs-md); margin-top: 0; line-height: 1.15; flex-shrink: 0; }

/* Χρώμα ανά τρόπο είσπραξης — ο ιδιοκτήτης ξεχωρίζει το κουτί από το χρώμα
   του εικονιδίου πριν διαβάσει το λεκτικό. Μόνο το ΕΙΚΟΝΙΔΙΟ βάφεται: αν
   βαφόταν και ο αριθμός, έξι κουτιά με έξι χρώματα γίνονται καραμέλα και
   χάνεται το χρυσό των Εσόδων που πρέπει να ξεχωρίζει. */
.stat-i.ic-cash   { color: var(--ic-cash); }
.stat-i.ic-pos    { color: var(--ic-pos); }
.stat-i.ic-office { color: var(--ic-office); }
.stat-i.ic-prepaid{ color: var(--ic-prepaid); }
.stat-i.ic-later  { color: var(--ic-later); }
.stat-i.ic-free   { color: var(--ic-free); }

/* Το FREE pill μέσα στο πλακίδιο: ίδιο με της κάρτας, αλλά ΙΣΙΟ. Η κλίση των
   -3° δίνει χαρακτήρα σε μια φαρδιά κάρτα· σε πλακίδιο 29px ακουμπάει τις
   άκρες και μοιάζει στραβοτυπωμένη. */
.stat-h .job-free { transform: none; font-size: var(--fs-2xs); }
/* Αρνητικό μεικτό κέρδος: η μέρα έβγαλε ζημιά (π.χ. no-show που πληρώθηκε σε
   εξωτερικό συνεργάτη). Κόκκινο, ώστε να μη διαβαστεί ως κέρδος. */
/* ── Το «Περιθώριο»: τονισμένο ΚΑΙ πράσινο ──────────────────────────────────
   Εντολή ιδιοκτήτη 10.09.2026: «i want the περιθωριο from gold to become green
   like the clients directly green». Το ΠΡΑΣΙΝΟ ΕΙΝΑΙ ΤΟ ΙΔΙΟ με τα μετρητά
   (`--ic-cash`) — πράσινο σημαίνει «λεφτά που μπαίνουν» σε όλη την εφαρμογή.
   ⚠ Τα ΕΣΟΔΑ μένουν ΜΠΛΕ. Ρητή διευκρίνιση του ιδιοκτήτη στην ίδια κουβέντα:
   αλλάζει ΜΟΝΟ το Περιθώριο.

   ⚠ ΓΡΑΜΜΕΝΟ ΡΗΤΑ ΩΣ `.accent.v-green` (0,3,0) ΚΑΙ ΟΧΙ ΜΕ ΣΕΙΡΑ ΚΑΝΟΝΩΝ.
   Τα `.stat.accent .stat-v` και `.stat.v-green .stat-v` έχουν ΙΔΙΑ ειδικότητα
   (0,2,1) — κερδίζει όποιο γράφτηκε τελευταίο. Μια μετακίνηση μπλοκ θα άλλαζε
   σιωπηλά το χρώμα. Η διπλή κλάση δεν εξαρτάται από σειρά.

   ⚠ ΣΕ ΖΗΜΙΑ ΔΕΝ ΜΠΑΙΝΕΙ ΚΑΘΟΛΟΥ: το `v-green` το δίνει η JS μόνο όταν το
   νούμερο είναι θετικό, ώστε το κόκκινο του `is-loss` να μη χρειάζεται να
   νικήσει τίποτα. Ζημιά που φαίνεται πράσινη είναι το χειρότερο δυνατό λάθος
   σε αυτό το πλακίδιο. */
/* ⚠ ΧΩΡΙΣ ΠΛΑΙΣΙΟ. Η πρώτη έκδοση έβαφε πράσινο και το περίγραμμα· ο ιδιοκτήτης
   το είδε και το απέρριψε (10.09): «remove the green outline». Το πλακίδιο
   κρατά το ίδιο διακριτικό πλαίσιο με τα αδέλφια του — πράσινα είναι ΜΟΝΟ το
   νούμερο και το εικονίδιο. */
.stat.accent.v-green .stat-v, .stat.accent.v-green .stat-i { color: var(--ic-cash); }

.stat.is-loss { border-color: var(--crit); }
.stat.is-loss .stat-v, .stat.is-loss .stat-i { color: var(--crit); }

/* ── Η γραμμή συνόλων: λεπτομέρεια αριστερά, αποτέλεσμα δεξιά ──────────────
   ΑΡΙΣΤΕΡΑ πλέγμα 2×2 με τους τρόπους είσπραξης, ΔΕΞΙΑ στοιβαγμένα τα Έσοδα
   και το Μεικτό κέρδος. Η διάταξη λέει τη σχέση: τα τέσσερα αριστερά
   αθροίζουν στο πάνω δεξί. */
/* ⚠⚠ ΣΤΟΙΒΑΓΜΕΝΑ, ΟΧΙ ΔΙΠΛΑ-ΔΙΠΛΑ (08.09.2026, αναφορά ιδιοκτήτη: «the
   numbers dont fit well inside the boxes»).

   ΗΤΑΝ: `minmax(0, 1.9fr) minmax(0, 1.1fr)` — εισπράξεις αριστερά, σύνολα
   δεξιά, όλα σε ΜΙΑ γραμμή. Ο λόγος 1.9:1.1 διαλέχτηκε την 01.09 όταν τα
   σύνολα ήταν **ΔΥΟ** πλακίδια. Από τότε έγιναν ΤΕΣΣΕΡΑ (μπήκαν τα Έξοδα και
   το Κόστος συνεργατών), χωρίς το 1.1fr να μεγαλώσει ποτέ.

   ΜΕΤΡΗΜΕΝΟ ΠΡΙΝ, με αληθινά ποσά («2.633,50 €» θέλει ~120px με το εικονίδιο):
     οθόνη 1440 → κουτί 103px, λείπουν 17px
     οθόνη 1280 → κουτί 103px, λείπουν 17px
     οθόνη 1024 → κουτί  79px, λείπουν 41px
     οθόνη  768 → κουτί  60px, λείπουν 60px  (μισό απ' όσο χρειάζεται)
   Δηλαδή ΔΕΝ χωρούσαν σε ΚΑΝΕΝΑ πλάτος — απλώς στα δοκιμαστικά τα νούμερα
   ήταν τριψήφια και δεν φαινόταν.

   ΤΩΡΑ: μία στήλη, τα σύνολα ΑΠΟ ΚΑΤΩ, με ολόκληρο το πλάτος στη διάθεσή τους.
   Κοστίζει μία σειρά ύψους στην κεφαλίδα· η εναλλακτική ήταν να μη διαβάζονται
   τα νούμερα. Η σχέση «τα πάνω αθροίζουν στο πρώτο από κάτω» διαβάζεται πλέον
   από πάνω προς τα κάτω αντί για αριστερά-δεξιά. */
/* ⚠ ΜΙΑ ΛΟΓΙΣΤΙΚΗ ΠΛΑΚΑ, ΟΧΙ ΟΚΤΩ ΚΟΥΤΙΑ (εγκρίθηκε 24.09.2026). Ίδια
   πλακίδια, ίδια σειρά, ίδια χρώματα, ίδιο 4-στη-σειρά / 2×2 στο κινητό·
   αλλάζει μόνο το «ντύσιμο»: μία επιφάνεια, λεπτές διαχωριστικές, και η ΔΙΠΛΗ
   γραμμή του λογιστή πάνω από τα σύνολα. */
.daystats {
  display: grid; gap: 0; grid-template-columns: 1fr; overflow: hidden;
  background: var(--card-glass); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
.daystats-pay { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; overflow: hidden; }
/* ⚠ ΜΕΝΕΙ FLEX, ΟΧΙ GRID: το πλήθος ΑΛΛΑΖΕΙ με τον ρόλο — τέσσερα για τον
   ιδιοκτήτη, δύο για το γραφείο (τα δύο τελευταία περνούν από `seesMoney()`).
   Ένα `repeat(4, 1fr)` θα άφηνε δύο άδειες στήλες στο γραφείο.
   Το `flex-wrap` με βάση 132px είναι το δίχτυ: μόλις τέσσερα δεν χωρούν στη
   σειρά, γίνονται 2×2 μόνα τους, χωρίς media query και χωρίς να μαντεύουμε το
   πλάτος του δοχείου (που αλλάζει με το μενού — δες `--date-w`).

   ⚠ ΓΙΑΤΙ 132 ΚΑΙ ΟΧΙ 150: στα 320px η σειρά είναι 288px. Με βάση 150 δύο
   πλακίδια θέλουν 150+6+150 = 306 > 288, οπότε έπεφταν ΕΝΑ-ΕΝΑ σε ΤΕΣΣΕΡΙΣ
   σειρές και η κεφαλίδα φούσκωνε στα 246px. Με 132 γίνονται 2×2 (141px το
   καθένα, 21px περίσσευμα για το «2.633,50 €») — ίδια διάταξη με τα πλακίδια
   είσπραξης από πάνω.
   ⚠ 137 ΑΠΟ 24.09.2026: η λογιστική πλάκα έβγαλε το κενό των 6px, οπότε η
   βάση μεγάλωσε όσο χρειάζεται για ΤΑ ΙΔΙΑ σημεία αναδίπλωσης (2×2 κάτω από
   τα 408px). */
.daystats-sum { display: flex; gap: 0; flex-wrap: wrap; overflow: hidden; border-top: 3px double var(--line); }
.daystats-sum .stat { flex: 1 1 137px; min-width: 0; }
/* Τα πλακίδια χάνουν το κουτί τους. Οι διαχωριστικές είναι ΠΕΡΙΓΡΑΜΜΑΤΑ (η
   εκτύπωση σβήνει τις σκιές, τα περιγράμματα μένουν), τραβηγμένα 1px πάνω-
   αριστερά ώστε να κόβονται οι εξωτερικές: φαίνονται ΜΟΝΟ οι εσωτερικές, σε 4
   στήλες ή 2×2. */
.daystats .stat {
  background: transparent; box-shadow: none; border-radius: 0;
  border: 0; border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2);
  margin: -1px 0 0 -1px;
  padding: 8px 12px;
}
/* Ζημιά: απαλό κόκκινο γέμισμα στο κελί (όχι πλαίσιο που θα το έκοβε η
   στρογγυλή γωνία). */
.daystats .stat.is-loss { background: var(--crit-soft); }
/* Στο χαρτί το κόκκινο νούμερο είναι το σήμα της ζημιάς — και στα Reports,
   ώστε τα δύο χαρτιά να λένε το ίδιο πράγμα με τον ίδιο τρόπο. */
@media print { .stat.is-loss .stat-v { color: #a3271b !important; } }
/* ⚠ ΤΡΙΑ ΜΕΓΕΘΗ ΓΙΑ ΤΟ ΙΔΙΟ ΝΟΥΜΕΡΟ ΕΓΙΝΑΝ ΕΝΑ. Ήταν .95rem / .9rem / .98rem
   — 15,2px, 14,4px και 15,7px για το ΙΔΙΟ πλακίδιο σε τρία σημεία. Διαφορά
   1,3px: κανείς δεν τη βλέπει ως πρόθεση, όλοι τη βλέπουν ως ακαταστασία. */

/* Σε κινητό ούτε τέσσερα εισπράξεων δεν χωρούν στη σειρά: γίνονται 2×2. Τα
   σύνολα τα τυλίγει ήδη μόνο του το `flex-wrap` παραπάνω. */
@media (max-width: 620px) {
  .daystats-pay { grid-template-columns: 1fr 1fr; }
}

/* ── ΤΟ ΒΕΛΑΚΙ ΤΩΝ ΠΟΣΩΝ (calendar.js `moneyFold`, 05.10.2026) ──────────────────────────────
   Πάνω δεξιά, ΜΕΣΑ στην κάρτα, σαν των φίλτρων. Το πάνω-δεξιά πλακίδιο (4ο σε 4 στήλες, 2ο σε 2×2)
   αφήνει χώρο στο νούμερό του για να μη σκεπαστεί. Διπλωμένη: η λεπτή γραμμή `.calf-bar`. */
.daystats.has-fold { position: relative; }
.daystats.has-fold > .calm-toggle { position: absolute; top: 4px; inset-inline-end: 4px; z-index: 1; }
.daystats.has-fold .daystats-pay > .stat:nth-child(4) { padding-inline-end: 40px; }
@media (max-width: 620px) {
  .daystats.has-fold .daystats-pay > .stat:nth-child(4) { padding-inline-end: 12px; }
  .daystats.has-fold .daystats-pay > .stat:nth-child(2) { padding-inline-end: 40px; }
}
/* Στο χαρτί ισχύει ό,τι στην οθόνη: διπλωμένα ποσά ΔΕΝ τυπώνονται (ιδιοκτήτης 05.10: «when i hide the
   money and then click print it should also be hidden in the print»). Η λεπτή γραμμή είναι .no-print. */

/* ── Modal / sheet ──────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 60; display: none; }
.modal.show { display: block; }
.modal-bg { position: absolute; inset: 0; background: var(--overlay); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-box {
  position: absolute; inset-inline: 0; bottom: 0;
  /* ⚠ `dvh`, ΟΧΙ `vh`. Στο iOS το `vh` είναι το ΜΕΓΑΛΟ viewport — μετρημένο με
     τη γραμμή διευθύνσεων ΚΡΥΜΜΕΝΗ. Με τη γραμμή ορατή, 94vh είναι ψηλότερο
     από όσο φαίνεται, και το πόδι με το «Αποθήκευση» πέφτει εκτός οθόνης.
     Η πρώτη γραμμή μένει ως εφεδρεία για browser χωρίς `dvh`. */
  max-height: 94vh;
  max-height: 94dvh;
  background: var(--glass-strong); border: 1px solid var(--line-2);
  border-radius: var(--r) var(--r) 0 0;
  -webkit-backdrop-filter: var(--blur-lg); backdrop-filter: var(--blur-lg);
  box-shadow: 0 1px 0 var(--hair) inset, 0 -10px 60px rgba(10,25,47,.18);
  display: flex; flex-direction: column;
  animation: sheet-up .28s cubic-bezier(.22,.7,.3,1);
}
@keyframes sheet-up { from { transform: translateY(20px); opacity: .5; } }
@media (min-width: 760px) {
  .modal-box {
    inset: 50% auto auto 50%; transform: translate(-50%, -50%);
    /* 620px — το πλάτος του .sheet στο esdocs. Το 720 έδειχνε «φαρδύ κι
       αραιό»· οι φόρμες προσώπου/οχήματος είναι δίστηλες και τους φτάνει. */
    width: min(620px, 94vw); border-radius: var(--r); bottom: auto; max-height: 90vh;
  }
  .modal-box.wide { width: min(880px, 96vw); }
  @keyframes sheet-up { from { transform: translate(-50%, calc(-50% + 14px)); opacity: .5; } }
}
.modal-h {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line-2); flex: 0 0 auto;
}
.modal-body { padding: var(--s5) var(--s6) var(--s6); overflow-y: auto; flex: 1 1 auto; }
@media (max-width: 640px) { .modal-body { padding: var(--s4); } }
.modal-f {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s2);
  /* ⚠ ΤΟ ΧΕΙΡΟΤΕΡΟ ΣΗΜΕΙΟ ΗΤΑΝ ΕΔΩ: το «Αποθήκευση» έχανε το 43% του ύψους
     του μέσα στη ζώνη του home. Είναι η κύρια ενέργεια ΚΑΘΕ φόρμας. */
  padding: var(--s4) var(--s5) calc(var(--s4) + var(--safe-b));
  border-top: 1px solid var(--line-2); flex: 0 0 auto;
  /* Διάφανο: το γυαλί του κουτιού φαίνεται ΚΑΙ πίσω από τα κουμπιά — το
     συμπαγές φόντο εδώ ήταν αυτό που «έσβηνε» τη διαφάνεια του esdocs. */
  background: transparent; border-radius: 0 0 var(--r) var(--r);
}
.modal-f .grow { text-align: start; }

/* ── Toast ──────────────────────────────────────────────────────────────── */
.toasts { position: fixed; inset-inline: 0; bottom: calc(var(--s5) + var(--safe-b)); z-index: 80; display: flex; flex-direction: column; align-items: center; gap: var(--s2); pointer-events: none; }
.toast {
  background: rgba(28,28,32,.94); color: #fff; padding: 10px 18px; border-radius: var(--r-pill);
  font-size: var(--fs-base); font-weight: 500; box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
  animation: toast-in .26s cubic-bezier(.22,.7,.3,1); max-width: min(92vw, 460px);
}
.toast.ok   { background: rgba(63,125,84,.95); }
.toast.crit { background: rgba(168,84,84,.95); }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } }

/* ── Ειδοποιήσεις ───────────────────────────────────────────────────────── */
.notice {
  display: flex; gap: var(--s3); padding: 13px 15px;
  border-radius: var(--r-sm); border: 1px solid var(--line-2);
  background: var(--card-2); font-size: var(--fs-base);
}
.notice svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; }
.notice b { display: block; margin-bottom: 3px; font-weight: 600; }
.notice p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
.notice-warn { background: var(--warn-soft); border-color: transparent; }
.notice-warn svg { color: var(--warn); }
.notice-crit { background: var(--crit-soft); border-color: transparent; }
.notice-crit svg { color: var(--crit); }
.notice-ok { background: var(--ok-soft); border-color: transparent; }
.notice-ok svg { color: var(--ok); }
.notice-info { background: var(--info-soft); border-color: transparent; }
.notice-info svg { color: var(--info); }

/* ── Search ─────────────────────────────────────────────────────────────── */
.search { position: relative; flex: 1 1 260px; min-width: 0; }
.search svg { position: absolute; inset-inline-start: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--faint); pointer-events: none; }
.search .inp { padding-inline-start: 33px; }

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--line-2); overflow-x: auto; }
.tab {
  border: 0; background: none; padding: 9px 14px; white-space: nowrap;
  font-size: var(--fs-base); font-weight: 500; color: var(--muted);
  border-bottom: 1.5px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--gold); }

/* ── Loading ────────────────────────────────────────────────────────────── */
.skeleton { background: linear-gradient(90deg, var(--card-2), var(--card), var(--card-2)); background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: var(--r-md); }
@keyframes sk { to { background-position: -200% 0; } }

/* ── Επιλογέας διαστήματος (Shopify-style) ──────────────────────────────────
   Κουμπί με το τρέχον διάστημα· ταμπλό με έτοιμες επιλογές αριστερά και
   ημερολόγιο δύο μηνών δεξιά. Σε στενή οθόνη γίνεται φύλλο από κάτω και
   δείχνει έναν μήνα — δύο δεν χωράνε σε 375px.
   ========================================================================== */
.rangebox { position: relative; display: inline-flex; }
.rangebtn { gap: 7px; }
.rangebtn svg { width: 15px; height: 15px; color: var(--muted); }
.rangelabel { font-weight: 600; }
.rangecar svg { width: 13px; height: 13px; transition: transform var(--t-fast); }
.rangebox.open .rangecar svg { transform: rotate(180deg); }

.rangepanel {
  position: absolute; inset-inline-start: 0; top: calc(100% + 6px); z-index: 45;
  display: none; gap: 0;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.rangebox.open .rangepanel { display: flex; }
.rangebox.flip .rangepanel { inset-inline-start: auto; inset-inline-end: 0; }

.rangepresets {
  display: flex; flex-direction: column; gap: 1px; padding: 8px;
  border-inline-end: 1px solid var(--line-2); background: var(--card-2);
  min-width: 186px;
}
.rangepreset {
  text-align: start; border: 0; background: none; padding: 8px 11px;
  border-radius: var(--r-xs); font-size: var(--fs-base); color: var(--ink); white-space: nowrap;
}
.rangepreset:hover { background: var(--card); }
.rangepreset.on { background: var(--primary); color: #fff; font-weight: 600; }


.rangeright { display: flex; flex-direction: column; padding: 12px; gap: 10px; }
.rangefields { display: flex; align-items: end; gap: var(--s2); }
.rangefield { display: flex; flex-direction: column; gap: 3px; }
.rangefield .inp { padding: 6px 9px; font-size: var(--fs-sm); }
.rangedash { color: var(--faint); padding-bottom: 9px; }
.rangenav { display: flex; align-items: center; margin-bottom: -6px; }
.rangenav .btn-icon { padding: 4px; }
.rangenav .btn-icon svg { width: 15px; height: 15px; }

.rangemonths { display: flex; gap: var(--s5); }
.rangemonth-h {
  text-align: center; font-size: var(--fs-sm); font-weight: 700;
  margin-bottom: 6px; letter-spacing: -.01em;
}
.rangegrid { display: grid; grid-template-columns: repeat(7, 30px); gap: 1px; }
.rangedow {
  text-align: center; font-size: var(--fs-2xs); font-weight: 700; color: var(--faint);
  text-transform: uppercase; letter-spacing: .05em; padding-bottom: 3px;
}
.rangeday {
  height: 29px; border: 0; background: none; border-radius: var(--r-xs);
  font-size: var(--fs-sm); color: var(--ink); font-variant-numeric: tabular-nums;
  transition: background var(--t-fast);
}
.rangeday:hover { background: var(--card-2); }
.rangeday.out { color: var(--faint); opacity: .5; }
/* …εκτός αν ανήκουν στο διάστημα: τότε είναι επιλεγμένες μέρες σαν τις άλλες
   και δεν έχουν λόγο να ξεθωριάζουν. */
.rangeday.out.in { opacity: 1; color: var(--gold-ink); }
/* Το διάστημα ως συνεχής λωρίδα· τα δύο άκρα γεμάτα. */
.rangeday.in { background: var(--gold-soft2); border-radius: 0; }
/* ⚠ ΝΑΥΤΙΚΟ ΣΕ ΧΡΥΣΟ, ΟΧΙ ΛΕΥΚΟ — ίδιος κανόνας με τα κουμπιά και το σημερινό
   κελί. Ήταν `#fff`: 2,46:1 στο φως, 1,82:1 στη νύχτα. Και δεν είναι μια
   τυχαία λεπτομέρεια — είναι ΟΙ ΔΥΟ ΗΜΕΡΟΜΗΝΙΕΣ που ορίζουν το διάστημα, τα
   μόνα δύο νούμερα που κοιτάς πριν πατήσεις «Εφαρμογή». */
/* ⚠⚠ ΣΤΑΘΕΡΟ #0a192f, ΟΧΙ `--action-ink`: εκείνο έγινε ΛΕΥΚΟ στις 06.09 (κόκκινο
   κουμπί) και το σχόλιο από πάνω έλεγε ψέματα ως τις 24.09 — 2,18:1 στο φως,
   1,74:1 στη νύχτα. Το `.out.in.edge` νικά το χρυσό μελάνι των ημερών του
   διπλανού μήνα. */
.rangeday.edge, .rangeday.out.in.edge { background: var(--gold); color: #0a192f; font-weight: 700; }
.rangeday.start { border-start-start-radius: var(--r-xs); border-end-start-radius: var(--r-xs); }
.rangeday.end { border-start-end-radius: var(--r-xs); border-end-end-radius: var(--r-xs); }
.rangeday.today:not(.edge) { box-shadow: inset 0 0 0 1.5px var(--gold); }

.rangefoot { display: flex; align-items: center; gap: var(--s2); padding-top: 2px; }

/* Στενή οθόνη: φύλλο από κάτω, ένας μήνας, κουμπιά που πιάνονται με το δάχτυλο. */
@media (max-width: 760px) {
  .rangebox { position: static; }
  /* ΠΡΟΣΟΧΗ στη σειρά: το `.rangebox.flip .rangepanel` παραπάνω έχει μεγαλύτερη
     ειδικότητα και μηδενίζει το inset-inline-start. Σε στενή οθόνη το flip δεν
     έχει νόημα — το φύλλο πιάνει ΟΛΟ το πλάτος — οπότε το ακυρώνουμε ρητά,
     αλλιώς το ταμπλό παίρνει το πλάτος του περιεχομένου (925px) και κρέμεται
     έξω από την αριστερή άκρη. */
  .rangepanel,
  .rangebox.flip .rangepanel {
    position: fixed; inset: auto 0 0 0; top: auto; z-index: 60;
    flex-direction: column; border-radius: var(--r) var(--r) 0 0;
    /* Ίδιος λόγος με το φύλλο της φόρμας: `dvh` και ζώνη home στο πόδι, όπου
       κάθεται το «Εφαρμογή». */
    max-height: 88vh;
    max-height: 88dvh;
    padding-bottom: var(--safe-b);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .rangepresets {
    flex-direction: row; overflow-x: auto; border-inline-end: 0;
    border-bottom: 1px solid var(--line-2); min-width: 0; flex: 0 0 auto;
    padding: 6px; gap: 2px;
  }
  .rangepreset { white-space: nowrap; padding: 6px 10px; font-size: var(--fs-sm); }
  .rangeright { min-width: 0; padding: 10px; gap: 7px; }
  .rangemonth.second { display: none; }
  .rangemonths { justify-content: center; }
  .rangemonth { width: 100%; }
  .rangegrid { grid-template-columns: repeat(7, 1fr); width: 100%; }
  /* 33px: άνετο για δάχτυλο, αλλά έξι σειρές × 5px λιγότερα είναι 30px που δεν
     τρώει το φύλλο. */
  .rangeday { height: 33px; font-size: var(--fs-base); }
  /* ── ΟΙ ΔΥΟ ΗΜΕΡΟΜΗΝΙΕΣ ΜΠΑΙΝΟΥΝ Η ΜΙΑ ΚΑΤΩ ΑΠΟ ΤΗΝ ΑΛΛΗ ────────────────
     Δεν είναι θέμα γούστου: είναι `<input type="date">`, και το Safari δίνει
     στο ΔΙΚΟ ΤΟΥ native χειριστήριο ένα ΕΓΓΕΝΕΣ ελάχιστο πλάτος που ΔΕΝ
     υπακούει σε `min-width: 0` — μετρημένο σε iPhone: 194px το καθένα.

     Δίπλα-δίπλα θέλουν 194+6+194 = 394px μέσα σε σειρά 380px, οπότε το «Έως»
     έβγαινε έξω από την οθόνη και το έκοβε το `overflow-x: hidden` του φύλλου.
     Μικρότερη γραμματοσειρά θα τα χωρούσε, αλλά κάτω από 16px το iPhone
     ζουμάρει μόλις τα πατήσεις — το πρόβλημα που μόλις λύσαμε.

     Άρα στοιβάζονται. Οι ετικέτες «Από» και «Έως» λένε ήδη τη φορά, οπότε το
     βελάκι ανάμεσά τους περισσεύει και φεύγει. */
  .rangefields { flex-wrap: wrap; gap: 8px; align-items: stretch; }
  .rangefield { flex: 1 1 100%; min-width: 0; }
  /* ⚠ ΤΟ iOS ΑΓΝΟΕΙ ΤΟ box-sizing ΣΕ `input[type=date]`.
     Μετρημένο σε iPhone με ρητό `box-sizing: border-box` στον κανόνα `.inp`:
     `getComputedStyle(...).boxSizing === 'content-box'` παρ' όλα αυτά. Το
     χειριστήριο το ζωγραφίζει το ίδιο το σύστημα και δεν υπακούει.

     Άρα δεν παλεύουμε με το box-sizing — μετράμε γύρω του: μηδέν οριζόντιο
     padding και ρητή αφαίρεση των 2px του περιγράμματος. 378 + 2 = 380 = το
     ακριβές πλάτος της σειράς. Το κείμενο κεντράρεται ώστε να μην ακουμπάει
     στο περίγραμμα τώρα που δεν υπάρχει padding. */
  .rangefield .inp {
    padding-block: 7px; padding-inline: 0;
    width: calc(100% - 2px); text-align: center;
    font-size: var(--fs-xs);
  }
  .rangedash { display: none; }
  .rangefoot { position: sticky; bottom: 0; background: var(--card); padding-bottom: 2px; }

  /* Τα βελάκια ΠΑΝΩ στη γραμμή του μήνα, όχι σε δική τους σειρά. Ο τίτλος
     είναι κεντραρισμένος και τα βελάκια στις άκρες — δεν συναντιούνται ποτέ,
     και κερδίζουμε ολόκληρη σειρά από το ύψος του φύλλου. */
  .rangenav {
    margin: 0 0 -27px; position: relative; z-index: 2; pointer-events: none;
  }
  .rangenav .btn-icon { pointer-events: auto; }
  .rangemonth-h { margin-bottom: 4px; }
}

/* ── ΚΙΝΗΤΟ: η φόρμα κράτησης χωράει ΟΛΟΚΛΗΡΗ ───────────────────────────────
   Καμία οριζόντια κύλιση πουθενά μέσα στη φόρμα. Οι λωρίδες που κυλούσαν
   πλάγια (υπηρεσίες, αυτοκίνητα, οδηγοί) ΤΥΛΙΓΟΝΤΑΙ: σε τηλέφωνο δεν
   ανακαλύπτεις με το δάχτυλο ότι υπάρχει κι άλλο δεξιά — απλώς δεν το βλέπεις.
   ========================================================================== */
@media (max-width: 719px) {
  /* Οι υπηρεσίες: ΜΙΑ γραμμή που κυλά, ΙΔΙΑ με τον υπολογιστή (εντολή
     ιδιοκτήτη 26.09.2026: «transfer αφιξη and all of that should be in 1 line
     and scroll left to right just like in desktop mode»). Ήταν πλέγμα τριών
     στηλών με 16 κουμπιά σε 6 σειρές — ~250px πριν φανεί η διαδρομή. Το
     κομμένο κουμπί στη δεξιά άκρη δείχνει ότι υπάρχουν κι άλλα.
     `overscroll-behavior-x`: στο τέλος της γραμμής το σύρσιμο ΔΕΝ περνά στη
     σελίδα (στο iPhone θα γύριζε «πίσω»). */
  .modal .pick-row { padding-bottom: 2px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .modal .pick-row::-webkit-scrollbar { display: none; }

  /* Τα ονόματα των οδηγών ΟΛΟΚΛΗΡΑ: «Megkrelisvili» δεν χωρούσε σε 62px και
     γινόταν «Megkreli…», που δεν ξεχωρίζει κανέναν. Τυλίγεται σε δύο σειρές. */
  .modal .pstrip { align-items: flex-start; }
  .modal .pstrip .pchip { width: 84px; }
  .modal .pstrip .pchip.car { width: 104px; }
  .modal .pstrip .pchip .pname { white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.15; }

  /* Αυτοκίνητα και οδηγοί: τυλίγονται σε γραμμές, δεν κυλούν. */
  .modal .pstrip { flex-wrap: wrap; overflow-x: visible; gap: 6px; padding: 2px 0 4px; }

  /* Η γραμμή του επιλεγμένου ατόμου: όνομα πάνω, ρόλος και κόστος από κάτω.
     Σε μία σειρά, το select των 150px και το κόστος των 110px έσφιγγαν το
     όνομα σε 24px — δηλαδή σε τίποτα. */
  .modal .list-row { flex-wrap: wrap; gap: var(--s2) var(--s3); padding: 10px var(--s3); }
  /* Δύο σειρές: [φωτό · όνομα · ✕] και από κάτω [ρόλος · κόστος].
     Η σειρά ορίζεται με `order`, γιατί στο DOM το ✕ είναι τελευταίο και χωρίς
     αυτό έπεφτε μόνο του σε τρίτη σειρά. */
  .modal .list-row > .av { order: 0; }
  .modal .list-row > .grow { order: 1; flex: 1 1 auto; min-width: 0; }
  .modal .list-row > .btn { order: 2; flex: 0 0 auto; }
  .modal .list-row > .sel {
    order: 3; flex: 1 1 140px; min-width: 0 !important; width: auto !important;
  }
  .modal .list-row > .inp { order: 4; flex: 0 1 100px; width: auto !important; }
  .modal .list-row > .tiny { order: 4; flex: 0 0 auto; width: auto !important; text-align: end; }

  /* Ημερομηνία και ώρα: πεδία ΣΤΑΘΕΡΟΥ μήκους. Το «21/08/2026» δεν γίνεται
     ευκολότερο σε πλάτος 343px — απλώς αφήνει τεράστιο κενό δεξιά. Αρκετά
     φαρδιά για να πατηθούν άνετα, όχι όσο η οθόνη. */
  .modal input[type="date"] { max-width: 200px; }
  .modal .timebox { max-width: 168px; }

  /* Η γραμμή ημερομηνίας/ώρας της κράτησης ΔΕΝ χρειάζεται πια εξαίρεση από
     τα δύο καπάκια (26.09.2026): τα πεδία της έχουν σταθερό πλάτος 186/200 ·
     112 · 80 (δες `.form-grid.whenrow`), πάντα κάτω από τα καπάκια.
     ⚠ Τα καπάκια μένουν ΕΔΩ και όχι ως `.modal .form-grid:not(…)`: η φόρμα
     εξόδων ΤΟΥ ΟΔΗΓΟΥ (driver-cash.js) χτίζει `.grid.grid-2`, ΟΧΙ
     `.form-grid`, και θα τα έχανε σιωπηλά. */
}

/* ── FROM / TO ΣΕ ΕΝΑ ΚΟΥΤΙ, ΟΠΩΣ ΣΤΗ WIZZ AIR (εντολή ιδιοκτήτη 26.09.2026) ──
   «we can do our pick up and drop off exactly like these, very close to each
   other with the arrows like that». Ένα κουτί, δύο γραμμές με λεπτή γραμμή
   ανάμεσα, και ΣΤΡΟΓΓΥΛΟ κουμπί ∨∧ ΠΑΝΩ στη διαχωριστική. Στον υπολογιστή τα
   δύο κάθονται δίπλα-δίπλα στο ίδιο κουτί, με το κουμπί στην όρθια γραμμή.
   ⚠ Τα πεδία είναι τα ΙΔΙΑ `locInput` (λίστα συχνών, ▾, Escape) — αλλάζει μόνο
   το ντύσιμο: χωρίς δικό τους περίγραμμα, το περίγραμμα το έχει το κουτί.
   ⚠ Το κουμπί ΔΕΝ πάει τέρμα δεξιά όπως στη Wizz: εκεί κάθονται τα ▾ της
   λίστας, και στο ύψος της διαχωριστικής θα έπεφτε πάνω τους. */
.routerow {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--field); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--field-inset);
  /* Ανάσα από τα κουμπιά υπηρεσίας από πάνω και την ημερομηνία από κάτω —
     χωρίς ετικέτα έξω από το κουτί, ακουμπούσε και στα δύο. */
  margin-block: var(--s3);
}
.routerow > .field { gap: 1px; padding: 9px 14px 8px; transition: background-color var(--t-fast), box-shadow var(--t-fast); }
.routerow > .field:first-of-type { border-bottom: 1px solid var(--line-2); border-radius: calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0; }
.routerow > .field:last-of-type { border-radius: 0 0 calc(var(--r-md) - 1px) calc(var(--r-md) - 1px); }
/* Το πεδίο μέσα στο κουτί: γυμνό, μεγάλα γράμματα (≥16px — αλλιώς ζουμ στο iPhone). */
.routerow .locinput,
.routerow .locinput:focus {
  border: 0; background: transparent; box-shadow: none;
  padding: 1px 34px 1px 0; font-size: 17px; font-weight: 600; line-height: 1.35;
}
.routerow .locinput::placeholder { font-weight: 400; }
/* Εστίαση και «Λείπει» ζουν στη ΓΡΑΜΜΗ, όχι στο (γυμνό) πεδίο. */
.routerow > .field:focus-within { background-color: var(--field-solid); box-shadow: inset 0 0 0 1.5px var(--gold-ink); }
.routerow > .field.need { background-color: var(--crit-soft); }
.routerow .locbox.need .locinput { border: 0; background: transparent; }

.routerow .swapbtn {
  position: absolute; z-index: 2; top: 50%; inset-inline-end: 58px; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 4px;
  height: 34px; padding: 0 11px; border-radius: var(--r-pill);
  background: var(--card-solid); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm);
  color: var(--gold-ink);
}
.routerow .swapbtn:hover { background: var(--card2-solid); color: var(--gold-ink); }
.routerow .swapbtn svg { width: 16px; height: 16px; stroke-width: 2.4; }

/* Υπολογιστής: δίπλα-δίπλα, κουμπί ‹ › στο κέντρο της όρθιας γραμμής. Τα
   γεμίσματα αφήνουν χώρο στο κουμπί: αλλιώς θα σκέπαζε το ▾ του From και την
   αρχή του κειμένου του To. */
@media (min-width: 640px) {
  .routerow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .routerow > .field:first-of-type {
    border-bottom: 0; border-inline-end: 1px solid var(--line-2); padding-inline-end: 38px;
    border-radius: calc(var(--r-md) - 1px) 0 0 calc(var(--r-md) - 1px);
  }
  .routerow > .field:last-of-type { padding-inline-start: 40px; border-radius: 0 calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0; }
  .routerow .swapbtn { inset-inline-end: auto; left: 50%; transform: translate(-50%, -50%); flex-direction: row-reverse; padding: 0 9px; }
  .routerow .swapbtn svg { transform: rotate(-90deg); }
}

/* ── Γρήγορη αλλαγή οδηγού / οχήματος από την κάρτα ─────────────────────────
   Η φωτογραφία γίνεται κουμπί. Δεν αλλάζει μέγεθος ούτε θέση — αλλιώς η
   γραμμή θα χοροπηδούσε ανάλογα με τον ρόλο που είναι συνδεδεμένος.
   ========================================================================== */
.qp { position: relative; display: inline-flex; flex: 0 0 auto; }
.qp-btn {
  border: 0; background: none; padding: 0; display: inline-flex; border-radius: 50%;
  cursor: pointer; position: relative;
}
.qp-btn::after {
  /* Διακριτικό σημάδι ότι πατιέται — φαίνεται μόνο όταν πλησιάζεις. */
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px dashed transparent; transition: border-color var(--t-fast);
}
.job:hover .qp-btn::after, .qp-btn:focus-visible::after { border-color: var(--gold-l); }
.qp.open .qp-btn::after { border-color: var(--gold); border-style: solid; }
.qp-btn > img, .qp-btn > .job-veh-none { border-radius: var(--r-xs); }

.qp-menu {
  position: absolute; inset-inline-start: 0; top: calc(100% + 6px); z-index: 50;
  display: none; flex-direction: column; gap: 1px;
  min-width: 208px; max-height: min(58vh, 340px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 5px; box-shadow: var(--shadow-lg);
}
.qp.open .qp-menu { display: flex; }
.qp-menu.up { top: auto; bottom: calc(100% + 6px); }

/* ── Αναζήτηση μέσα στο μενού (24.09.2026) ──────────────────────────────────
   Το πεδίο ΔΕΝ κυλά μαζί με τη λίστα: το μενού κρατά σταθερό ύψος και κυλά
   μόνο το `.qp-list` από κάτω — αλλιώς με 40 ονόματα το πεδίο έφευγε από την
   οθόνη τη στιγμή που ήθελες να διορθώσεις ένα γράμμα. */
/* ⚠ ΠΛΑΤΟΣ = ΤΟ ΜΑΚΡΥΤΕΡΟ ΟΝΟΜΑ (ως 320px). Το μενού κρέμεται από ένα κουμπί
   36px, οπότε ο browser το έφτιαχνε στο ΕΛΑΧΙΣΤΟ πλάτος του (208px) και έκοβε
   πινακίδες και μακριά επώνυμα («ANP-28…», «Megkrelisv…») — ακριβώς αυτό που
   ψάχνεις. Η JS κλειδώνει μετά το πλάτος, ώστε να μη στενεύει όσο γράφεις. */
.qp-findmenu {
  padding: 0; gap: 0; overflow: hidden;
  width: max-content; max-width: min(320px, calc(100vw - 16px));
  /* Στο κινητό το μενού ανεβαίνει στην κορυφή όταν ανοίγει το πληκτρολόγιο
     (quick-switch.js) — να σταματά ΚΑΤΩ από την κολλημένη πάνω μπάρα. */
  scroll-margin-top: calc(var(--topbar) + var(--safe-t) + 8px);
}
.qp-search {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  margin: 5px 5px 0; padding: 0 9px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--field); box-shadow: var(--field-inset); cursor: text;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.qp-search:focus-within { border-color: var(--gold-ink); box-shadow: var(--field-inset), var(--field-halo); }
.qp-search svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--faint); }
.qp-find {
  flex: 1 1 auto; min-width: 0; padding: 7px 0; border: 0; background: none;
  font-size: var(--fs-base); color: var(--ink); outline: none;
}
.qp-find::placeholder { color: var(--faint); }
/* `flex: 0 1 auto`: το ύψος του μενού κλειδώνει στο άνοιγμα, και τα λίγα
   αποτελέσματα μένουν ΚΟΛΛΗΤΑ κάτω από το πεδίο, με το κενό από κάτω τους.
   5px πάνω (όχι 2): εκεί ζωγραφίζεται το δαχτυλίδι εστίασης της πρώτης γραμμής. */
.qp-list {
  display: flex; flex-direction: column; gap: 1px; flex: 0 1 auto; min-height: 0;
  padding: 5px; overflow-y: auto; overscroll-behavior: contain;
}
/* Αυτό θα διαλέξει το Enter — φαίνεται ΠΡΙΝ το πατήσεις. */
.qp-item.hot { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--sel-edge); }
.qp-none { padding: 8px 12px 12px; font-size: var(--fs-sm); color: var(--faint); }
/* Η γραμμή «Όλοι / Όλα»: εικονίδιο στη θέση του προσώπου (25px, όσο το .av-sm). */
.qp-ico {
  width: 25px; height: 25px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; background: var(--card-2);
  box-shadow: 0 0 0 1px var(--line-2);
}
.qp-ico svg { width: 14px; height: 14px; color: var(--muted); }

/* ── Ίδιο μενού, σκανδάλη = επιλογέας (Reports, 24.09.2026) ─────────────────
   Η σκανδάλη ΜΟΙΑΖΕΙ με το χρυσό <select> που αντικατέστησε: ίδιο `.sel`,
   ίδιο βελάκι. Χωρίς το στρογγυλό διακεκομμένο δαχτυλίδι της φωτογραφίας. */
.qp-select { display: flex; min-width: 0; }
.qp-select .qp-btn { display: flex; width: 100%; min-width: 0; border-radius: var(--r-sm); }
.qp-select .qp-btn::after { content: none; }
.qp-select .qp-btn:focus-visible { outline: none; }
.qp-selface {
  display: block; min-width: 0; text-align: start; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qp-select .qp-btn:focus-visible .qp-selface,
.qp-select.open .qp-selface { border-color: var(--gold-ink); box-shadow: var(--field-inset), var(--field-halo); }
.qp-select .qp-menu { min-width: 100%; }

.qp-item {
  display: flex; align-items: center; gap: var(--s2); width: 100%;
  text-align: start; border: 0; background: none; padding: 6px 8px;
  border-radius: var(--r-xs); font-size: var(--fs-base); color: var(--ink);
}
.qp-item:hover { background: var(--card-2); }
.qp-item.on { background: var(--gold-soft); font-weight: 600; }
.qp-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qp-hint { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--faint); }
.qp-tick { flex: 0 0 auto; display: inline-flex; }
.qp-tick svg { width: 15px; height: 15px; color: var(--gold-ink); }
.qp-car {
  width: 40px; height: 25px; border-radius: var(--r-xs); flex: 0 0 auto;
  background: var(--card-2) center/cover no-repeat;
  display: grid; place-items: center; box-shadow: 0 0 0 1px var(--line-2);
}
.qp-car svg { width: 15px; height: 15px; color: var(--faint); }
.job-veh-none { display: inline-grid; place-items: center; width: 42px; height: 26px; }
.job-veh-none svg { width: 16px; height: 16px; color: var(--faint); }

/* ── Ληγμένα χαρτιά μέσα στον επιλογέα ──────────────────────────────────────
   Ο δισπάτσερ βλέπει ΠΟΙΟ χαρτί και ΠΟΤΕ έληξε πριν διαλέξει, όχι μετά.
   ========================================================================== */
.qp-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.qp-flag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-2xs); font-weight: 600; line-height: 1.25;
}
.qp-flag svg { width: 11px; height: 11px; flex: 0 0 auto; }
.qp-flag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qp-flag.b-bad  { color: var(--crit); }
.qp-flag.b-soon { color: var(--warn); }

/* Η κάρτα με ανοιχτό μενού σηκώνεται ΟΛΟΚΛΗΡΗ: το backdrop-filter της κάθε
   .job φτιάχνει δικό της stacking context, οπότε χωρίς αυτό η ΕΠΟΜΕΝΗ κάρτα
   ζωγραφιζόταν πάνω από το ανοιχτό μενού και δεν πατιόταν τίποτα. Την κλάση
   τη βάζει/βγάζει το quick-switch.js (openQp/shutQp). */
.qp-raised { z-index: 55; }

/* ── Τιμή & πληρωμή από την κάρτα ──────────────────────────────────────────
   Το κουμπί είναι ΟΛΟ το μπλοκ ποσό+εικονίδιο· το δαχτυλίδι-στόχος του .qp-btn
   είναι κύκλος για φωτογραφίες — εδώ γίνεται ορθογώνιο γύρω από το ποσό. */
.qp-pay { max-width: 100%; }
.qp-paybtn { border-radius: var(--r-xs); }
.qp-paybtn::after { border-radius: var(--r-sm); inset: -3px -6px; }
.job-money-in { display: flex; flex-direction: column; gap: 0; align-items: center; min-width: 0; }
.qp-paymenu { min-width: 232px; }
.qp-amt {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 3px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line-2);
}
.qp-amt-l { color: var(--faint); font-weight: 700; padding-inline-start: 5px; flex: 0 0 auto; }
.qp-amt-in { flex: 1 1 auto; width: 0; min-width: 0; padding: 7px 9px; font-variant-numeric: tabular-nums; }
.qp-locked { padding: 8px 10px; font-size: var(--fs-sm); color: var(--muted); max-width: 236px; }

/* ── Ο ΕΠΙΛΟΓΕΑΣ ΩΡΑΣ ΠΑΝΩ ΣΤΗΝ ΚΑΡΤΑ ──────────────────────────────────────
   Το ίδιο κουτί με την τιμή (`.qp-amt`), μία ή δύο σειρές, και από κάτω μια
   γραμμή που δείχνει ΤΙ ΘΑ ΓΡΑΦΤΕΙ πριν πατηθεί το ΟΚ.
   ⚠ Η σκανδάλη είναι ΤΟ ΚΕΙΜΕΝΟ της ώρας, όχι φωτογραφία: το `.qp-btn` του
   οδηγού/οχήματος έχει δαχτυλίδι γύρω από εικόνα και δεν ταιριάζει εδώ. */
.qp-timebtn {
  font: inherit; color: inherit; text-align: start;
  border-radius: var(--r-xs); padding: 0;
}
.qp-timebtn::after { border-radius: var(--r-sm); inset: -2px -5px; }
/* ⚠ ΤΟ ΜΕΝΟΥ ΑΝΟΙΓΕΙ ΑΡΙΣΤΕΡΑ-ΣΤΟΙΧΙΣΜΕΝΟ ΚΑΙ ΣΤΕΝΟ: η ώρα κάθεται στην
   ΑΡΙΣΤΕΡΗ άκρη της κάρτας, οπότε δεν υπάρχει κίνδυνος να βγει εκτός οθόνης
   από εκεί — το `place()` προσέχει μόνο τη δεξιά. */
.qp-timemenu { min-width: 196px; gap: 0; }
.qp-timemenu .qp-trow { padding: 3px 3px 6px; }
.qp-timemenu .qp-trow:last-of-type { border-bottom: 0; margin-bottom: 0; }
.qp-time-in { text-align: center; letter-spacing: .04em; }
.qp-tfoot { display: flex; align-items: center; gap: 8px; padding: 4px 3px 2px; }
.qp-tprev {
  font-size: var(--fs-xs); color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Λάθος ώρα: το ΟΚ σβήνει και η γραμμή γίνεται κόκκινη — δεν αφήνουμε να
   πατηθεί κάτι που δεν θα γραφτεί. */
.qp-tprev.is-bad { color: var(--crit); }
.qp-payic { display: inline-flex; flex: 0 0 auto; }
.qp-payic svg { width: 18px; height: 18px; }
/* Ίδιο μέγεθος με το `payGlyph(key, 18)` που δίνει τα υπόλοιπα σύμβολα αυτού
   του μενού — αλλιώς η γραμμή του γραφείου ξεχώριζε ως μικρότερη. */
.qp-payic .ico-emoji { width: 18px; font-size: 18px; }
.qp-payic.pay-account svg { color: var(--ic-office); }
.qp-payic.pay-prepaid svg { color: var(--ic-prepaid); }

/* Η κουκκίδα πάνω στη φωτογραφία — φαίνεται ΧΩΡΙΣ να ανοίξεις τη λίστα. */
.qp-btn.flag-bad::before,
.qp-btn.flag-soon::before {
  content: ''; position: absolute; z-index: 2;
  inset-block-start: -2px; inset-inline-end: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--card);
}
.qp-btn.flag-bad::before  { background: var(--crit); }
.qp-btn.flag-soon::before { background: var(--warn); }

/* ── Κάρτα στο ύφος του esdocs ─────────────────────────────────────────────
   Το σχέδιο είναι δανεισμένο από το esdocs που ο ιδιοκτήτης χρησιμοποιεί
   καθημερινά: τίτλος σε serif, μικρά χρυσά tags, σήμα κατάστασης κάτω
   αριστερά, κουμπιά κάτω δεξιά. Ίδια γλώσσα, ώστε να μη μαθαίνει δεύτερη.
   ========================================================================== */
/* ΓΥΑΛΙ — το `.item` του esdocs (168-178) αυτούσιο. Το `var(--line)` του
   esdocs είναι το ΑΧΝΟ· εδώ γράφεται `var(--line-2)` (βλ. tokens.css). */
.escard {
  background: var(--card-glass); border: 1px solid var(--line-2); border-radius: 16px;
  /* χωρίς θόλωμα — κάθεται σε σκέτο φόντο, βλ. .escard */
  box-shadow: var(--shadow-sm); padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 11px; min-width: 0;
  transition: transform .18s, box-shadow .18s, border-color var(--t-fast);
}
.escard:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 var(--hair) inset, 0 14px 36px rgba(10,25,47,.10);
}
/* Το δικό μας προσωπικό ξεχωρίζει με χρυσό περίγραμμα, όπως στο esdocs. */
.escard.own { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, var(--shadow-sm); }
.escard.own:hover {
  box-shadow: 0 0 0 1px var(--gold) inset, 0 1px 0 var(--hair) inset,
              0 14px 36px rgba(10,25,47,.10);
}
/* Το δαχτυλίδι της φωτογραφίας — μόνο στην κάρτα. Στη λίστα δουλειών τα
   avatar είναι 25px και επικαλύπτονται· χρυσό δαχτυλίδι εκεί τα κάνει αλυσίδα. */
.escard .av-lg { border: 2px solid var(--gold); box-shadow: 0 3px 10px rgba(10,25,47,.12); }
.escard .car-thumb { border: 1px solid var(--gold-soft2); }
.escard-head { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.escard-t {
  font-family: var(--serif); font-size: var(--fs-lg); font-weight: 600;
  letter-spacing: -.015em; line-height: 1.15; color: var(--ink);
  flex: 1; min-width: 0; overflow-wrap: anywhere;
}
.escard-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 3px; }
/* Όχημα: πινακίδα από πάνω σε κεφαλαία, μοντέλο από κάτω σε serif. */
.escard-plate {
  font-size: var(--fs-sm); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums;
}
.escard-model {
  font-family: var(--serif); font-size: var(--fs-lg); font-weight: 600;
  letter-spacing: -.015em; line-height: 1.15; margin-top: 2px; color: var(--ink);
  overflow-wrap: anywhere;
}
.escard-photo { flex: 0 0 auto; display: flex; border-radius: 6px; overflow: hidden; }
.escard-photo img { display: block; width: auto; height: auto; max-width: 92px; max-height: 52px; }
.escard-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.escard-tags .badge { margin-inline-start: auto; }
.estag {
  font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  /* --gold-text, όχι --gold-ink: εδώ το χρυσό κουβαλάει ΛΕΞΕΙΣ (4.7:1 έναντι 3.3:1). */
  color: var(--gold-text); background: var(--gold-soft2);
  border: 1px solid var(--gold-soft2); border-radius: 7px; padding: 4px 9px;
}
.estag.plain { color: var(--muted); background: var(--card-2); border-color: var(--line-2); }
.escard-foot { display: flex; align-items: center; gap: var(--s2); margin-top: auto; padding-top: 2px; }
.escard-btns { display: flex; gap: 6px; margin-inline-start: auto; }
.esgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
@media (max-width: 560px) { .esgrid { grid-template-columns: 1fr; } }

/* ── Σήμα κατάστασης εγγράφων ───────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .01em;
  border-radius: var(--r-pill); padding: 4px 10px; white-space: nowrap;
  /* Τα σημασιολογικά γεμίσματα ρυθμίστηκαν πάνω σε ΣΥΜΠΑΓΗ κάρτα. Θόλωμα εδώ
     θα ξέπλενε το χρώμα που λέει «έληξε». Ρητά, ώστε να μην κληρονομηθεί. */
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.badge .bd { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: currentColor; }
.badge.b-ok   { color: var(--ok);   background: var(--ok-soft); }
.badge.b-soon { color: var(--warn); background: var(--warn-soft); }
.badge.b-bad  { color: var(--crit); background: var(--crit-soft); }
.badge.b-none { color: var(--faint); background: var(--card-2); }

/* ── Το φύλλο εγγράφων ──────────────────────────────────────────────────── */
/* Κάθε έγγραφο είναι ΚΑΡΤΑ, όχι γραμμή πίνακα — το γυαλί του esdocs
   (01.09.2026, «το δικό μας μοιάζει φτηνό»). Το κουτί-περίβλημα έφυγε:
   οι κάρτες κάθονται κατευθείαν στο φόντο, όπως παντού αλλού. */
.doclist { display: flex; flex-direction: column; gap: 8px; }
.docrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--s3);
  padding: 12px 14px;
  background: var(--card-glass);
  /* χωρίς θόλωμα — κάθεται σε σκέτο φόντο, βλ. .escard */
  border: 1px solid var(--line-2); border-left: 3px solid var(--line-2);
  border-radius: 13px;
  box-shadow: 0 1px 0 var(--hair) inset;
}
/* Το χρωματιστό φιλέτο λέει την κατάσταση χωρίς να διαβάσεις λέξη. */
.docrow.s-bad  { border-left-color: var(--crit); }
.docrow.s-soon { border-left-color: var(--warn); }
.docrow.s-ok   { border-left-color: var(--ok); }
.docmain { min-width: 0; }
.docname-t { font-weight: 600; font-size: var(--fs-base); color: var(--ink); }
.docname { font-weight: 600; padding: 5px 9px; }
.docmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; }
.docfile { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--info); min-width: 0; max-width: 240px; }
.docfile svg { width: 12px; height: 12px; flex: 0 0 auto; }
.docexp { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.docexp .inp { padding: 5px 8px; font-size: var(--fs-sm); width: auto; }
.docbtns { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.crit-t { color: var(--crit); font-weight: 600; }
.warn-t { color: var(--warn); font-weight: 600; }

@media (max-width: 719px) {
  .docrow { grid-template-columns: 1fr; gap: var(--s2); padding: 12px var(--s3); }
  .docexp { flex-direction: row; align-items: center; gap: var(--s2); }
  .docbtns { flex-wrap: wrap; }
  .docfile { max-width: 100%; }
}

/* ── ΚΙΝΗΤΟ: οι κάρτες ΘΟΛΩΝΟΥΝ (05.10.2026, γυαλί esdocs) ────────────────────────────
   Με το πιο διάφανο --card-glass του κινητού (tokens.css) το φόντο φαίνεται από μέσα· το
   θόλωμα + saturate το κάνει «γυαλί» αντί για ξεθωριασμένο χαρτί. Λίγες κάρτες ανά οθόνη στο
   κινητό — το κόστος του [[blur-costs-frames]] ήταν 29 κάρτες + κουμπιά σε υπολογιστή.
   ⚠ ΠΡΙΝ από τις ασφάλειες από κάτω: εκείνες (λιγότερη διαφάνεια / αντίθεση) πρέπει να νικούν. */
@media screen and (max-width: 719px) {
  .card, .daystats {
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  }
  /* ⚠ ΤΟ ΘΟΛΩΜΑ ΠΑΓΙΔΕΥΕΙ ΤΑ `position: fixed` ΠΑΙΔΙΑ (05.10.2026, μετρημένο): ένα δοχείο με backdrop-filter
     γίνεται containing block, οπότε το φύλλο του επιλογέα εύρους (`.rangepanel`, fixed κάτω) κρεμόταν από
     την ΚΑΡΤΑ — άνοιγε ΠΡΟΣ ΤΑ ΠΑΝΩ, έξω από την οθόνη. Κάρτα με επιλογέα εύρους: χωρίς θόλωμα. */
  .card:has(.rangebox) { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ΑΣΦΑΛΕΙΕΣ ΤΟΥ ΓΥΑΛΙΟΥ — στο ΤΕΛΟΣ του αρχείου ώστε να νικούν στη σειρά.

   Το esdocs δεν έχει καμία τέτοια δικλείδα — θεωρεί δεδομένο το backdrop-filter.
   Εμείς δεν μπορούμε: η εφαρμογή τρέχει και σε παλιό tablet, και το «Reduce
   transparency» του macOS είναι ρητή επιλογή του χρήστη που τη σεβόμαστε.

   Και στις τρεις περιπτώσεις το γυαλί γυρίζει στο --card, δηλαδή ΑΚΡΙΒΩΣ στην
   εμφάνιση που έχει σήμερα η εφαρμογή. Το fallback δεν είναι συμβιβασμός·
   είναι το σχέδιο που ήδη δουλεύει.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Ο browser δεν ξέρει backdrop-filter → συμπαγείς επιφάνειες. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass: var(--card); --glass-2: var(--card);
    --glass-strong: var(--card); --card-glass: var(--card); --bar-glass: var(--card);
  }
}

/* 2. Ρητή επιλογή χρήστη: λιγότερη διαφάνεια. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --card: var(--card-solid); --card-2: var(--card2-solid); --field: var(--field-solid);
    --plate: var(--plate-solid); --plate-2: var(--plate2-solid);
    --glass: var(--card); --glass-2: var(--card);
    --glass-strong: var(--card); --card-glass: var(--card); --bar-glass: var(--card);
    --hair: transparent;
  }
  .escard, .card, .stat, .notice, .topbar, .sidebar, .modal-box, .modal-h,
  .modal-f, .tmenu, .rangepanel, .doclist, .tablewrap, .job-list, .job, .btn, .chip,
  .day, .cal, .matrix, .exp-stat, .exp-form, .exp-filter, .exp-list,
  .mcard, .week-h, .exprow, .docrow, .locmenu, .qp-menu, .minibtn, .bcg-row, .bf-row, .qr-open, table.tbl thead th {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .modal-bg { backdrop-filter: none; background: var(--overlay); }
}

/* 3. Υψηλή αντίθεση — το γυαλί φεύγει, οι γραμμές δυναμώνουν. */
@media (prefers-contrast: more) {
  :root {
    --card: var(--card-solid); --card-2: var(--card2-solid); --field: var(--field-solid);
    --plate: var(--plate-solid); --plate-2: var(--plate2-solid);
    --glass: var(--card); --glass-2: var(--card);
    --glass-strong: var(--card); --card-glass: var(--card); --bar-glass: var(--card);
    --line-2: var(--line);
  }
  .escard, .card, .stat {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* Το μενού και η πάνω μπάρα έχουν ΣΤΑΘΕΡΑ χρώματα από τις 24.09 (όχι tokens),
     οπότε τα πιάνουμε ρητά — αλλιώς η «αυξημένη αντίθεση» θα έδινε ΠΙΟ ΑΧΝΕΣ
     γραμμές από το κανονικό. Και οι μπάρες κύλισης γυρίζουν στις κανονικές. */
  .sidebar { background: var(--card); border-right-color: var(--line); }
  .topbar { border-bottom-color: var(--line); }
  html, .nav, .pstrip, .daystrip, .modal-body, .tmenu, .locmenu, .tablewrap {
    scrollbar-width: auto; scrollbar-color: auto;
  }
}

/* ── Σύρσιμο καρτών ─────────────────────────────────────────────────────────
   Αντικατέστησε το πεδίο «Σειρά εμφάνισης». */

.escard { position: relative; }

/* Η λαβή: ένδειξη ότι η κάρτα μετακινείται, και ο δρόμος για πληκτρολόγιο.
   Το σύρσιμο ΔΕΝ ξεκινά μόνο από εδώ — πιάνεται από οπουδήποτε στην κάρτα. */
.grip {
  position: absolute; inset-block-start: 8px; inset-inline-end: 8px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  border: 1px solid transparent; border-radius: var(--r-xs);
  background: transparent; color: var(--faint);
  cursor: grab; opacity: 0; transition: opacity var(--t-fast), color var(--t-fast);
  /* Η ΛΑΒΗ κλειδώνει την κύλιση — μόνο αυτή. Πάτημα στη λαβή = σύρσιμο
     αμέσως, χωρίς κράτημα. */
  touch-action: none;
}
.grip svg { width: 16px; height: 16px; }
.escard:hover .grip, .grip:focus-visible { opacity: 1; }
.grip:hover { color: var(--ink); background: var(--card-2); border-color: var(--line-2); }
.grip:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; opacity: 1; }

/* ⚠ `pan-y`, ΟΧΙ `none`. Με `touch-action: none` σε ΟΛΗ την κάρτα, το δάχτυλο
   δεν κυλούσε ΠΟΤΕ τη λίστα — και με 25 άτομα η μόνη περιοχή που κυλούσε ήταν
   τα κενά ανάμεσα στις κάρτες. Το `pan-y` αφήνει την κατακόρυφη κύλιση να
   δουλέψει κανονικά· το σύρσιμο στο κινητό ξεκινά με ΠΑΡΑΤΕΤΑΜΕΝΟ ΠΑΤΗΜΑ ή
   από τη λαβή, και μόλις ξεκινήσει, ένα non-passive preventDefault στο
   touchmove σταματά την κύλιση (βλ. sortable() στο core/ui.js). */
.esgrid > .escard { touch-action: pan-y; cursor: grab; }
.esgrid > .escard:active { cursor: grabbing; }
/* ⚠ ΠΛΕΓΜΑ ΧΩΡΙΣ ΣΥΡΣΙΜΟ. Οι κάρτες συνεργάτη δείχνουν ίδιες με προσωπικό και
   στόλο, αλλά ΔΕΝ ταξινομούνται: οι εταιρείες δεν έχουν `display_order`, μπαίνουν
   σε ομάδες ανά είδος. Χωρίς αυτό ο δείκτης γινόταν «χεράκι» και το δάχτυλο
   περίμενε σύρσιμο που δεν έρχεται ποτέ — υπόσχεση που δεν τηρείται. */
.esgrid.no-drag > .escard { touch-action: auto; cursor: default; }
.esgrid.no-drag > .escard:active { cursor: default; }

/* ── Λογότυπο συνεργάτη ─ το `.plogo` του esdocs αυτούσιο ──────────────────
   ΔΕΞΙΑ μέσα στην κεφαλή, όχι avatar αριστερά: τα λογότυπα είναι ορθογώνια και
   συχνά με λευκό φόντο, οπότε ένας στρογγυλός δίσκος τα κόβει. Το λευκό φόντο
   μένει ΚΑΙ στο σκούρο θέμα — αλλιώς ένα μαύρο λογότυπο εξαφανίζεται. */
.escard-logo {
  flex: 0 0 auto; display: flex; border-radius: 5px; overflow: hidden;
  background: #fff; box-shadow: 0 2px 8px rgba(10,25,47,.10);
}
.escard-logo img { display: block; width: auto; height: auto; max-width: 76px; max-height: 46px; }
:root[data-theme="dark"] .escard-logo { background: rgba(255,255,255,.94); }

/* ── Το τσεκ της συγχώνευσης PDF στη γραμμή εγγράφου ───────────────────────
   ΤΕΤΑΡΤΗ στήλη ΜΠΡΟΣΤΑ στο υπάρχον πλέγμα (όνομα · λήξη · κουμπιά) — δεν
   ξαναστήνουμε τη γραμμή, της δίνουμε μια στήλη ακόμη. Το `.ghost` κρατά τη
   στοίχιση και στις γραμμές χωρίς αρχείο. */
.docrow { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.mergecheck { display: inline-flex; align-items: center; }
.mergecheck input { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; }
.mergecheck.ghost { width: 16px; }
@media (max-width: 719px) {
  .docrow { grid-template-columns: auto 1fr; }
  .docrow .docexp, .docrow .docbtns { grid-column: 2; }
}

/* ── Πεδίο με κουμπάκι αντιγραφής ─ το `pCopyFld` του esdocs ───────────────
   Επωνυμία, τηλέφωνο, email, ΑΦΜ: αντιγράφονται σε τιμολόγια και emails κάθε
   μέρα. Το κουμπί κάθεται ΜΕΣΑ στο πεδίο, δεξιά, για να μη μεγαλώνει η φόρμα. */
.cpwrap { position: relative; display: flex; min-width: 0; }
.cpwrap .inp { flex: 1; padding-inline-end: 34px; }
.cpbtn {
  position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.cpbtn:hover { color: var(--ink); background: var(--card-2); }
.cpbtn svg { width: 14px; height: 14px; }

/* ── Ο επιλογέας λογοτύπου ─ το `plogo-lg` του esdocs ──────────────────────
   Λευκό κουτί ΚΑΙ στο σκούρο θέμα — μαύρο λογότυπο σε μαύρο φόντο χάνεται. */
.logo-pick {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; overflow: hidden; background: #fff;
  box-shadow: 0 2px 10px rgba(10,25,47,.12);
}
.logo-pick img { display: block; width: auto; height: auto; max-width: 150px; max-height: 92px; }
.logo-pick.empty {
  width: 92px; height: 92px; padding: 6px; border-radius: 16px;
  background: var(--card-2); border: 1px dashed var(--line-2); box-shadow: none;
}
.logo-pick .ini {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; text-align: center; line-height: 1.3;
}
:root[data-theme="dark"] .logo-pick:not(.empty) { background: rgba(255,255,255,.94); }

/* ── Τίτλος ομάδας ─ το `.dgroup-title` του esdocs ─────────────────────────
   Πεζά (ήταν αραιά κεφαλαία ως 24.09.2026) και μια λεπτή γραμμή που τρέχει
   ως το τέλος. */
.kindgroup-t {
  font-size: var(--fs-sm);
  color: var(--muted); font-weight: 600; display: flex; align-items: center;
  gap: var(--s3); margin: 0;
}
.kindgroup-t::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.gcount {
  font-size: var(--fs-xs); font-weight: 700; color: var(--gold-text);
  background: var(--gold-soft); border-radius: 999px; padding: 2px 8px; letter-spacing: 0;
}
/* Τα χειριστήρια μέσα στην κάρτα ξαναπαίρνουν κανονικό δείκτη — πατιούνται. */
.escard button:not(.grip), .escard a, .escard input, .escard select { cursor: pointer; touch-action: auto; }

/* Η ΣΗΚΩΜΕΝΗ κάρτα: βγαίνει από τη ροή, ακολουθεί τον δείκτη, και ΔΕΝ πιάνει
   τον δείκτη — αλλιώς το elementFromPoint θα έβρισκε πάντα τον εαυτό της. */
.escard.dragging {
  box-shadow: 0 18px 44px -12px rgba(10,25,47,.45), 0 0 0 1px var(--gold);
  opacity: .96;
  cursor: grabbing;
}
.escard.dragging .grip { opacity: 1; color: var(--gold-ink); }

/* Το κενό όπου θα πέσει. Διακεκομμένο περίγραμμα, χωρίς περιεχόμενο. */
.drop-ph {
  border: 2px dashed var(--gold); border-radius: 16px;
  background: var(--gold-soft); box-sizing: border-box;
  transition: none;
}

/* Σε οθόνη αφής δεν υπάρχει hover — η λαβή μένει ορατή, αλλιώς δεν φαίνεται
   καν ότι η κάρτα μετακινείται. */
/* Σε οθόνη αφής: η λαβή είναι μόνιμα ορατή και ΜΕΓΑΛΗ. 26px είναι κάτω από
   το ελάχιστο των 44px που θέλει ένα δάχτυλο — γι' αυτό «δεν πιανόταν». */
@media (hover: none) {
  .grip {
    opacity: 1; width: 44px; height: 44px;
    inset-block-start: 2px; inset-inline-end: 2px;
    color: var(--muted);
  }
  .grip svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .escard.dragging { transform: none !important; }
}

/* ── ΓΙΑΤΙ ΤΑ ΠΕΔΙΑ ΓΙΝΟΝΤΑΙ 16px ΣΤΟ ΚΙΝΗΤΟ ────────────────────────────────
   ΜΗΝ ΤΟ ΚΑΤΕΒΑΣΕΙΣ. Δεν είναι αισθητική επιλογή — είναι ο μόνος τρόπος να μη
   ζουμάρει μόνο του το iPhone.

   Το Safari στο iOS ζουμάρει ΑΥΤΟΜΑΤΑ τη σελίδα μόλις πατήσεις πεδίο με
   γραμματοσειρά ΜΙΚΡΟΤΕΡΗ των 16px — και ΔΕΝ ξαναζουμάρει πίσω όταν φύγεις.
   Έτσι ο δισπάτσερ έβλεπε την εφαρμογή κομμένη από τα αριστερά και ξεζούμαρε
   με το χέρι κάθε φορά. Τα πεδία μας ήταν 15,2px (--fs-md), και τα στενά
   πεδία ημερομηνίας 12,5px — ακόμη και 11px σε μικρή οθόνη.

   Η ΑΛΛΗ «λύση» — `maximum-scale=1` ή `user-scalable=no` στο viewport — απλώς
   απαγορεύει το ζουμ σε ΟΛΟΥΣ, και μαζί σε όποιον το χρειάζεται για να
   διαβάσει. Δεν το κάνουμε. Τα 16px λύνουν το ίδιο πρόβλημα χωρίς να πάρουν
   τίποτα από κανέναν.

   `pointer: coarse` και όχι breakpoint πλάτους: το πρόβλημα το έχει η ΑΦΗ,
   όχι η στενή οθόνη. Το iPad στα 768px ζουμάρει κι αυτό· ένα στενό παράθυρο
   σε Mac δεν ζουμάρει ποτέ και κρατά τον σχεδιασμό του.                     */
@media (pointer: coarse) {
  .inp, .sel, .txt,
  input, select, textarea,
  .rangefield .inp,
  .docexp .inp,
  .qp-find {
    font-size: 16px;
  }
}

/* ── Ένδειξη συγχρονισμού ───────────────────────────────────────────────────
   Στο πλάι του ονόματος, κάτω αριστερά. ΑΟΡΑΤΗ όταν όλα είναι συγχρονισμένα —
   μια μόνιμη πράσινη τελίτσα «όλα καλά» γίνεται θόρυβος μέσα σε μια μέρα και
   μετά κανείς δεν την κοιτάζει όταν γίνει κόκκινη. */
.syncbadge {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 3px; padding: 2px 8px; border: 0; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
  font-family: inherit; line-height: 1.6;
}
.syncbadge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
}
.syncbadge.sb-ok { display: none; }             /* συγχρονισμένο = σιωπή */
.syncbadge.sb-busy { background: var(--gold-soft2); color: var(--gold-text); }
.syncbadge.sb-busy::before { background: var(--gold); }
.syncbadge.sb-off { background: var(--card-2); color: var(--muted); }
.syncbadge.sb-off::before { background: var(--faint); }
.syncbadge.sb-warn { background: var(--crit-soft); color: var(--crit); }
.syncbadge.sb-warn::before { background: var(--crit); }

/* ── Τεχνικές λεπτομέρειες μέσα στο παράθυρο κατάστασης ──────────────────────
   Ζευγάρια «κλειδί / τιμή». Ο ιδιοκτήτης δεν τα διαβάζει — τα ΑΝΤΙΓΡΑΦΕΙ και
   τα στέλνει. Άρα προτεραιότητα έχει να φαίνονται ΟΛΑ, όχι να είναι όμορφα:
   η απάντηση του server σπάει σε γραμμές και τυλίγεται, δεν κόβεται. Ίδιος
   κανόνας με το όνομα τιμολογίου — ό,τι κοπεί, χάθηκε.
   Το ύψος είναι φραγμένο ώστε μια στοίβα PHP να μη σπρώξει τα κουμπιά εκτός
   οθόνης στο κινητό. */
.diag {
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--card-2); padding: var(--s3);
  display: grid; gap: 6px;
  max-height: 40vh; overflow-y: auto;
}
.diag-row { display: grid; grid-template-columns: 92px 1fr; gap: var(--s3); align-items: start; }
@media (max-width: 419px) { .diag-row { grid-template-columns: 1fr; gap: 0; } }
.diag-k {
  font-size: var(--fs-2xs); font-weight: 700;
  color: var(--faint); padding-top: 2px;
}
.diag-v {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs); color: var(--ink-2);
  min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap;
}

/* ── Διάλογος σύγκρουσης ─────────────────────────────────────────────────── */
/* ⚠ ΔΕΙΧΝΕΙ ΤΗ ΔΙΑΦΟΡΑ, ΟΧΙ ΔΥΟ ΦΟΡΕΣ ΤΟ ΙΔΙΟ ΟΝΟΜΑ (23.09.2026).
   Οι παλιές κλάσεις `.cf-two` / `.cf-side` / `.cf-t` / `.cf-v` έδειχναν δύο
   κουτιά με το ΙΔΙΟ κείμενο — ήταν αδύνατο να διαλέξεις. Έφυγαν.
   Τώρα κάθε γραμμή είναι ΕΝΑ πεδίο: όνομα, δική μου τιμή, βέλος, του server. */
.cf-row { padding: var(--s4); margin-bottom: var(--s3); }
.cf-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.cf-fields { margin-top: var(--s2); }
.cf-cols, .cf-field {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 18px minmax(0, 1.1fr);
  gap: var(--s2); align-items: baseline;
}
.cf-cols { padding: 0 0 2px; }
.cf-cols > :nth-child(1) { grid-column: 2; }
.cf-cols > :nth-child(3) { grid-column: 4; }
.cf-field { padding: 5px 0; border-top: 1px solid var(--line-2); }
.cf-field:first-child { border-top: none; }
.cf-k { font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }
.cf-a, .cf-b { font-size: var(--fs-sm); font-weight: 700; overflow-wrap: anywhere; }
/* Η δική σου αριστερά σε ουδέτερο, του server δεξιά τονισμένη: το μάτι πάει
   πρώτα σε αυτό που ΔΕΝ ξέρεις. */
.cf-a { color: var(--ink); }
.cf-b { color: var(--gold-ink); }
.cf-arrow { font-size: var(--fs-xs); color: var(--faint); text-align: center; }
/* Σε στενή οθόνη το πλέγμα γίνεται δύο σειρές αντί να στριμωχτεί σε τέσσερις
   στήλες των 40px. Το βέλος περισσεύει εκεί — το όνομα του πεδίου αρκεί. */
@media (max-width: 619px) {
  .cf-cols { display: none; }
  .cf-field { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); }
  .cf-k { grid-column: 1 / -1; }
}

/* ── Μπάρα προόδου της μεταφοράς esdocs ──────────────────────────────────── */
.progressbar { height: 8px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.progressfill { height: 100%; width: 0; background: var(--gold); transition: width .3s ease; }
.divider { height: 1px; background: var(--line-2); margin: var(--s4) 0; }

/* ── Ο επιλογέας φωτογραφίας ─ το `photopick` του esdocs ───────────────────
   Μεγάλη προεπισκόπηση αριστερά, στήλη κουμπιών δεξιά:
   «Προσθήκη/Αλλαγή φωτογραφίας» + «Αφαίρεση» (κρυφό όσο δεν υπάρχει εικόνα).
   Το άδειο κουτί έχει διακεκομμένο περίγραμμα και το λέει με λέξεις — δεν
   αφήνει τον χρήστη να αναρωτιέται αν κάτι φόρτωσε ή όχι. */
.photopick { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: var(--s3); }
.photobtns { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.vphoto-lg {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; overflow: hidden;
}
.vphoto-lg img { display: block; width: auto; height: auto; max-width: 190px; max-height: 104px; }
.vphoto-lg.empty {
  width: 120px; height: 74px; padding: 6px; border-radius: 14px;
  background: var(--card-2); border: 1px dashed var(--line-2);
}
.vphoto-lg .ini, .photo-empty-t {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; text-align: center; line-height: 1.3;
}

/* ── «Διαγραφή» κάτω αριστερά ─ το `btn-danger` του esdocs ─────────────────
   Κόκκινο-διάφανο, όχι συμπαγές: είναι έξοδος κινδύνου, όχι πρόσκληση. */
.btn-del {
  color: var(--crit-t, #ba1a1a); background: transparent;
  border: 1px solid rgba(186,26,26,.28); border-radius: 11px;
  padding: 8px 16px; font-weight: 600; font-size: var(--fs-sm); cursor: pointer;
}
.btn-del:hover { background: rgba(186,26,26,.08); }

/* ── Πίνακας λήξεων ─ αντιγραφή του esdocs (renderDash) ────────────────────
   Τρεις μεγάλοι αριθμοί σε serif με το χρώμα της κατάστασης, και από κάτω
   γραμμές με χρωματιστό αριστερό φιλέτο: αριστερά ΤΙ και ΠΟΙΑΝΟΥ, δεξιά ΠΟΤΕ
   και ΣΕ ΠΟΣΕΣ ΜΕΡΕΣ. Όλη η γραμμή πατιέται — λίστα εργασιών, όχι αναφορά. */
.statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: var(--s5); }
.exp-stat {
  background: var(--card-glass); border: 1px solid var(--line-2); border-radius: 14px;
  padding: 16px 14px; text-align: center;
}
.exp-stat .num {
  font-family: var(--serif); font-size: var(--fs-3xl); font-weight: 600;
  letter-spacing: -.03em; line-height: 1; color: var(--ink);
}
.exp-stat .lab {
  font-size: var(--fs-2xs);
  color: var(--muted); font-weight: 600; margin-top: 7px;
}
.exp-stat.s-bad .num { color: var(--crit); }
.exp-stat.s-soon .num { color: var(--warn); }
.exp-stat.s-ok .num { color: var(--ok); }
@media (max-width: 560px) {
  .statrow { gap: 8px; }
  .exp-stat .num { font-size: var(--fs-2xl); }
}

.exprow {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: inherit;
  background: var(--card-glass);
  /* χωρίς θόλωμα — κάθεται σε σκέτο φόντο, βλ. .escard */
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--line-2); border-radius: 13px;
  box-shadow: 0 1px 0 var(--hair) inset;
  /* ⚠ ΧΩΡΙΣ δικό του margin: οι γραμμές ζουν σε λίστα με gap 7px. Πριν, το
     margin ΠΡΟΣΤΙΘΟΤΑΝ στο gap του .stack και η απόσταση έβγαινε διπλή —
     «πολύς άδειος χώρος» (ιδιοκτήτης, 01.09). */
  padding: 12px 15px; cursor: pointer;
}
.explist { display: flex; flex-direction: column; gap: 7px; }
.exprow:hover { border-color: var(--gold); border-left-width: 3px; }
.exprow.l-bad { border-left-color: var(--crit); }
.exprow.l-soon { border-left-color: var(--warn); }
.exprow.l-ok { border-left-color: var(--ok); }
.exprow .ex-main { flex: 1; min-width: 0; }
.exprow .ex-doc { font-weight: 600; font-size: var(--fs-base); color: var(--ink); }
.exprow .ex-who {
  font-size: var(--fs-sm); color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.exprow .ex-right { text-align: right; flex: 0 0 auto; }
.exprow .ex-date { font-size: var(--fs-base); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.exprow .ex-days { font-size: var(--fs-xs); margin-top: 2px; color: var(--muted); }
.exprow .ex-days.d-bad { color: var(--crit); }
.exprow .ex-days.d-soon { color: var(--warn); }
.exprow .ex-days.d-ok { color: var(--ok); }

/* Το τσεκ της συγχώνευσης πάνω-δεξιά στην κάρτα εγγράφου — εκεί που το esdocs
   βάζει τη λαβή συρσίματος: παρών όταν χρειάζεται, αόρατος όταν όχι. */
/* Φόρμα σε ΜΟΝΟ ΑΝΑΓΝΩΣΗ — ο οδηγός βλέπει την αυριανή δουλειά χωρίς να την
   αγγίζει. Ξεθωριάζει διακριτικά ΜΟΝΟ τα χειριστήρια: το κείμενο (διεύθυνση,
   τηλέφωνο, καθίσματα) πρέπει να διαβάζεται κανονικά — γι' αυτό ακριβώς άνοιξε. */
.form-ro .inp, .form-ro select, .form-ro textarea, .form-ro .btn, .form-ro .chip, .form-ro .stepper {
  opacity: .72;
}
.form-ro { cursor: default; }

/* ── Η φυσαλίδα της αφής (showTip στο core/ui.js) ───────────────────────────
   Τα πλακίδια `payTile` δείχνουν ΜΟΝΟ εικονίδιο και νούμερο. Στον υπολογιστή
   το `title` τα εξηγεί· στο κινητό δεν υπάρχει hover, οπότε το πάτημα ανοίγει
   αυτήν εδώ. Ζει στο <body> με `position: fixed` — μέσα σε καρτέλα με
   `overflow: hidden` θα κοβόταν.

   ⚠ ΣΥΜΠΑΓΕΣ ΦΟΝΤΟ, ΟΧΙ ΤΖΑΜΙ. Είναι κείμενο που διαβάζεται μια φορά και
   γρήγορα, συχνά πάνω από αριθμούς· διαφάνεια θα το έκανε δυσανάγνωστο. Έτσι
   δεν χρειάζεται ούτε καταχώρηση στη λίστα «Reduce Transparency».
   Το `--navy` είναι σκούρο και στα δύο θέματα, άρα το λευκό κείμενο στέκει. */
.tip {
  position: fixed; z-index: 90;
  max-width: min(320px, calc(100vw - 16px));
  padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--navy); color: #fff;
  font-size: var(--fs-sm); line-height: 1.35;
  box-shadow: var(--shadow-lg);
  /* Δεν πιάνει πατήματα: το επόμενο άγγιγμα πρέπει να φτάνει στη σελίδα. */
  pointer-events: none;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .16s var(--spring), transform .16s var(--spring);
}
.tip.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tip { transition: none; }
}

.escard .mergecheck-corner { position: absolute; top: 12px; right: 12px; }

/* ── Έγγραφα εταιρείας: χρυσό περίγραμμα στο πέρασμα, όπως στο esdocs ───────
   Το πρωτότυπο γράφει, και για τα δύο κουμπιά της κάρτας:
     `.btn-ghost:hover { border-color: var(--gold); color: var(--gold-deep);
                         background: var(--glass-2) }`
   Εδώ κρατάμε το δικό μας φόντο και το ανασήκωμα του `.btn:hover` — αλλάζουν
   ΜΟΝΟ το περίγραμμα και το μελάνι. Το `--gold-deep` του esdocs είναι το δικό
   μας `--gold-ink` (το βαθύ χρυσό για εικονίδια και έντονο κείμενο).

   ⚠ Εμβέλεια `.esgrid-3`: το πλέγμα ΤΩΝ ΕΓΓΡΑΦΩΝ και μόνο. Το `.escard-btns`
   είναι κοινό με Προσωπικό, Στόλο και Συνεργάτες — εκεί τα κουμπιά μένουν
   όπως ήταν, γιατί ο ιδιοκτήτης ζήτησε την αλλαγή για τα Έγγραφα.          */
.esgrid-3 .escard-btns .btn:hover,
.esgrid-3 .escard-btns .btn:focus-visible {
  border-color: var(--gold); color: var(--gold-ink);
}

/* ⚠ Η ΛΑΒΗ ΚΑΙ ΤΟ ΤΣΕΚ ΔΙΕΚΔΙΚΟΥΝ ΤΗΝ ΙΔΙΑ ΓΩΝΙΑ. Το `.grip` είναι σε
   `8px/8px` παντού, το τσεκ συγχώνευσης σε `12px/12px` — θα κάθονταν το ένα
   πάνω στο άλλο. Όπου υπάρχει τσεκ, η λαβή πάει αριστερά του. */
.escard.pickable .grip { inset-inline-end: 42px; }

/* Ο τίτλος κρατιέται μακριά από τη γωνία. Ήταν inline style στο vault.js με
   26px· τώρα καλύπτει και τη λαβή, που πριν δεν υπήρχε εδώ. */
.esgrid-3 .escard-t { padding-inline-end: 34px; }
.esgrid-3 .escard.pickable .escard-t { padding-inline-end: 64px; }
.escard .mergecheck-corner input { width: 16px; height: 16px; accent-color: var(--gold-text); }

/* Το υποσέλιδο του modal ΤΥΛΙΓΕΤΑΙ στο κινητό — αλλιώς το «Όλα» και η
   «Συγχώνευση PDF» έβγαιναν έξω από την οθόνη στα 375px. Η σημείωση μεγέθους
   είναι το πρώτο που θυσιάζεται: πληροφορία πολυτελείας, όχι χειριστήριο. */
@media (max-width: 560px) {
  .modal-f { flex-wrap: wrap; row-gap: 8px; }
  .modal-f .grow .tiny { display: none; }
}

/* ── Γρήγορες ενέργειες πεδίου ─ τα `minibtn` του esdocs ───────────────────
   Αντιγραφή σε ΑΦΜ/ΑΜΚΑ/ΙΒΑΝ/κ.λπ., κλήση στο τηλέφωνο, email στο email.
   42px τετράγωνα δίπλα στο πεδίο — αρκετά για δάχτυλο, διακριτικά για μάτι. */
.in-wrap { display: flex; gap: 6px; align-items: stretch; }
.in-wrap .inp { flex: 1 1 0; min-width: 0; }
.minibtn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; background: var(--glass); border: 1px solid var(--line-2);
  border-radius: 10px; color: var(--muted); cursor: pointer;
}
.minibtn:hover { border-color: var(--gold); color: var(--gold-text); background: var(--glass-2); }
.minibtn:active { transform: translateY(1px); }
.minibtn svg { display: block; width: 15px; height: 15px; }

/* ── Γυαλί ΠΑΝΤΟΥ (esdocs, 01.09.2026) ──────────────────────────────────────
   Οι επιφάνειες έγιναν διαφανείς στα tokens· εδώ θολώνει το ΔΟΧΕΙΟ, ώστε
   κάθε παιδί (γραμμή κράτησης, κελί μήνα, γραμμή πίνακα) να πατά σε φρεσκα-
   ρισμένο φόντο χωρίς δικό του backdrop-filter — ένα θόλωμα ανά δοχείο. */
/* Το .job είναι πλέον ΔΙΚΗ του κάρτα (η .job-list έμεινε διάφανο δοχείο με
   κενά — θόλωμα εκεί θα φρεσκάριζε και τα κενά ανάμεσα στις κάρτες). */
.job, .day, .cal, .tablewrap, .matrix, .notice,
.exp-stat, .exp-form, .exp-filter, .exp-list, .mcard, .week-h,
.exprow, .docrow {
  /* ⚠ ΧΩΡΙΣ ΘΟΛΩΜΑ ΕΔΩ — ΜΕΤΡΗΜΕΝΟ, ΟΧΙ ΓΟΥΣΤΟ (06.09.2026).
     Το `backdrop-filter` θολώνει ΟΤΙ ΕΙΝΑΙ ΑΠΟ ΚΑΤΩ. Αυτή η επιφάνεια κάθεται
     πάνω στο σκέτο `--bg1` — και το θόλωμα ενός ΕΠΙΠΕΔΟΥ χρώματος δίνει το ίδιο
     επίπεδο χρώμα. Υπολογισμένη διαφορά: 0,7 στα 255 στη μέρα, 3,1 στη νύχτα.
     Δηλαδή ΑΟΡΑΤΗ — αλλά με πλήρες κόστος, πολλαπλασιασμένο επί τον αριθμό των
     στοιχείων στην οθόνη (29 κάρτες + τα κουμπιά τους ≈ 90 θολώματα ανά καρέ).
     Μετρημένο στον υπολογιστή του ιδιοκτήτη: 19,2ms → 16,7ms ανά καρέ, δηλαδή
     από ~52 σε 60 καρέ/δευτ. Το κόλλημα φαινόταν όταν πηδούσε στο τέλος της
     λίστας, όπου ο browser έπρεπε να θολώσει ~20 κάρτες ΜΑΖΙ.
     Το γυαλί ΜΕΝΕΙ όπου κάτι όντως περνά από κάτω: μπάρα, πλαϊνό μενού,
     αιωρούμενα μενού, παράθυρα, ειδοποιήσεις, κολλημένες κεφαλίδες πίνακα. */
}
/* Αιωρούμενα παράθυρα πάνω από άγνωστο περιεχόμενο → δυνατό γυαλί, όπως το
   φύλλο του esdocs. */
.locmenu, .qp-menu, .rangepanel {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur-lg); backdrop-filter: var(--blur-lg);
}
/* Κολλημένες κεφαλίδες πινάκων: οι γραμμές κυλούν ΑΠΟ ΚΑΤΩ τους, άρα θέλουν
   δικό τους δυνατό γυαλί για να μη φαίνεται το κείμενο από πίσω. */
table.tbl thead th { background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
table.mx thead th, table.mx thead th.name { background: var(--glass-strong); }
.rangefoot { background: var(--glass-strong); }

/* ── Κουμπί διαγραφής με επιβεβαίωση πάνω του (core/ui.js `deleteButton`) ───
   Η μεταφορά του React συστατικού που έδωσε ο ιδιοκτήτης (02.09.2026) σε
   σκέτο CSS. Το «ελατήριο» του framer-motion γίνεται μία καμπύλη με ελαφρύ
   ξεπέρασμα· κανένας δεν καταλαβαίνει τη διαφορά, και δεν θέλει build.

   ⚠ ΤΟ ΠΛΑΤΟΣ ΤΟΥ ΚΟΥΜΠΙΟΥ ΔΕΝ ΑΛΛΑΖΕΙ. Τα δύο λεκτικά κάθονται στο ΙΔΙΟ
   κελί ενός grid, οπότε το κουμπί είναι πάντα όσο το μακρύτερο από τα δύο.
   Αν εναλλάσσονταν, κάθε όπλισμα θα κουνούσε ολόκληρη τη γραμμή ή τον πάτο
   του παραθύρου — σε κινητό αυτό διαβάζεται ως «πήδηξε η οθόνη».
   Το × είναι το μόνο που μεγαλώνει, και μεγαλώνει από το μηδέν. */
.delbtn { display: inline-flex; align-items: center; flex-wrap: wrap; vertical-align: middle; }
.delbtn-main { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.delbtn-main[disabled] { opacity: .5; cursor: not-allowed; }
/* Μόνο εικονίδιο: δεν υπάρχει λεκτικό δίπλα του, άρα ούτε κενό. */
.delbtn.is-icon .delbtn-main { gap: 0; }

/* Οπλισμένο: το κόκκινο γεμίζει. ΟΧΙ λευκά γράμματα σε συμπαγές κόκκινο —
   κρατάμε το ζευγάρι του `.btn-danger`, που έχει ήδη μετρημένη αντίθεση. */
.delbtn.is-armed .delbtn-main { background: var(--crit-soft); border-color: var(--crit); color: var(--crit); }

/* Το εικονίδιο: κάδος → τσεκ, στο ίδιο κελί, χωρίς μετατόπιση. */
.delbtn-ico { display: inline-grid; place-items: center; }
.delbtn-ico > span { grid-area: 1 / 1; display: inline-flex; transition: opacity .16s ease, transform .22s cubic-bezier(.34, 1.4, .5, 1); }
.delbtn-ico .i-go { opacity: 0; transform: scale(.8); }
.delbtn.is-armed .delbtn-ico .i-idle { opacity: 0; transform: scale(.8); }
.delbtn.is-armed .delbtn-ico .i-go { opacity: 1; transform: none; }

/* Τα δύο λεκτικά, στοιβαγμένα (βλ. σχόλιο για το πλάτος). */
.delbtn-labels { display: inline-grid; place-items: center; }
.delbtn-labels > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity .16s ease, transform .2s ease; }
.delbtn-labels .l-go { opacity: 0; transform: translateY(4px); }
.delbtn.is-armed .delbtn-labels .l-idle { opacity: 0; transform: translateY(-4px); }
.delbtn.is-armed .delbtn-labels .l-go { opacity: 1; transform: none; }

/* Το ×: ξεπροβάλλει από πλάτος μηδέν, με το ελατήριο στο τέλος.
   ⚠ `max-width` και ΟΧΙ `display`, ώστε να υπάρχει μετάβαση και στις δύο
   κατευθύνσεις· `overflow: hidden` για να μη ξεχειλίζει το εικονίδιο όσο
   κλείνει, και διάφανο περίγραμμα στην ηρεμία γιατί τα borders ΔΕΝ κόβονται
   από το overflow και θα άφηναν μια κόκκινη γραμμή 2px να αιωρείται. */
.delbtn-x {
  flex: 0 0 auto; overflow: hidden;
  max-width: 0; opacity: 0; margin-inline-start: 0;
  border-color: transparent !important; background: transparent;
  transition: max-width .3s cubic-bezier(.34, 1.25, .5, 1),
              margin-inline-start .3s cubic-bezier(.34, 1.25, .5, 1),
              opacity .18s ease, transform .12s ease;
}
.delbtn.is-armed .delbtn-x {
  max-width: 60px; opacity: 1; margin-inline-start: 7px;
  border-color: var(--line-2) !important; background: var(--card);
}
.delbtn.is-armed .delbtn-x:hover { border-color: var(--crit) !important; color: var(--crit); }
.delbtn.is-armed .delbtn-x:active { transform: scale(.92); }

/* Ό,τι έλεγε το παλιό παράθυρο πριν το «Ναι» — τι παρασύρεται, πόσα είναι —
   δεν χάνεται: εμφανίζεται εδώ, οπλισμένο, σε δική του γραμμή. */
.delbtn-warn {
  flex-basis: 100%; order: 9;
  font-size: var(--fs-sm); line-height: 1.4; color: var(--crit);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .3s ease, opacity .2s ease, margin-top .3s ease;
}
.delbtn-warn:empty { display: none; }
.delbtn.is-armed .delbtn-warn { max-height: 8em; opacity: 1; margin-top: 7px; }

@media (prefers-reduced-motion: reduce) {
  .delbtn-main, .delbtn-x, .delbtn-warn,
  .delbtn-ico > span, .delbtn-labels > span { transition-duration: .01ms !important; }
}

/* ── ΤΟ ΣΗΜΑ ΠΟΥ ΖΩΓΡΑΦΙΖΕΤΑΙ ΜΟΝΟ ΤΟΥ (core/loader.js) ────────────────────
   Αυτούσιο από το `exclusive-loader.html` του ιδιοκτήτη — ίδιες καμπύλες,
   ίδιος κύκλος 3,8s. Δύο μόνο αλλαγές, και οι δύο επειδή εκεί ζούσε σε μία
   σελίδα με ένα μέγεθος:

   1. Το `stroke` ΔΕΝ δηλώνεται εδώ. Το CSS νικάει τα attributes του SVG, οπότε
      ένα σταθερό `stroke:url(#esGold)` θα ακύρωνε το μοναδικό id κάθε
      αντιγράφου και όλα τα σήματα θα κρέμονταν από την πρώτη διαβάθμιση.
   2. Το πάχος έρχεται από το `--es-stroke`. Το `5` του πρωτοτύπου ζει σε
      viewBox 220 μονάδων: σωστό στα 120px, ΑΟΡΑΤΟ (0,45px) στα 20px. */
.es-loader {
  --es-size: 120px;
  --es-gold: #dfad3c;
  --es-stroke: 5;
  --es-cream: #f0ece3;
  --es-glow: drop-shadow(0 4px 18px rgba(201, 169, 110, .22));
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; width: var(--es-size); flex: 0 0 auto;
}
.es-emblem { position: relative; width: var(--es-size); height: calc(var(--es-size) * 1.164); }
.es-loader svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.es-loader .es-shield {
  fill: none; stroke-width: var(--es-stroke);
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 810; stroke-dashoffset: 810;
  animation: es-draw 3.8s cubic-bezier(.45, .05, .35, .95) infinite;
}
.es-loader .es-logo-img { filter: var(--es-glow); animation: es-logo-fade 3.8s ease-in-out infinite; }
.es-loader .es-reveal-rim { animation: es-unveil-rim 3.8s cubic-bezier(.45, .05, .35, .95) infinite; }
.es-loader .es-reveal-fill { animation: es-unveil-fill 3.8s linear infinite; }

.es-loader .es-lines {
  width: 56%; height: 3px; opacity: .65;
  border-top: 1px solid var(--es-gold); border-bottom: 1px solid var(--es-gold);
}
.es-loader .es-label {
  font-size: var(--fs-xs); font-weight: 500; line-height: 1;
  letter-spacing: .42em; text-indent: .42em; text-transform: uppercase;
  color: var(--es-cream); opacity: .55;
  animation: es-blink 3.8s ease-in-out infinite;
}

@keyframes es-draw {
  0%   { stroke-dashoffset: 810; opacity: 1; filter: drop-shadow(0 0 0 rgba(223, 173, 60, 0)); }
  42%  { stroke-dashoffset: 0;   opacity: 1; filter: drop-shadow(0 0 6px rgba(223, 173, 60, .55)); }
  70%  { stroke-dashoffset: 0;   opacity: 1; filter: drop-shadow(0 0 2px rgba(223, 173, 60, .25)); }
  88%  { opacity: 0; }
  100% { stroke-dashoffset: 810; opacity: 0; }
}
@keyframes es-unveil-rim {
  0%, 4% { stroke-dashoffset: 810; }
  46%    { stroke-dashoffset: 0; }
  100%   { stroke-dashoffset: 0; }
}
@keyframes es-unveil-fill {
  0%, 8% { stroke-dashoffset: 368; }
  11.1% { stroke-dashoffset: 339; } 14.3% { stroke-dashoffset: 273; }
  17.4% { stroke-dashoffset: 213; } 20.6% { stroke-dashoffset: 153; }
  23.7% { stroke-dashoffset: 108; } 26.9% { stroke-dashoffset: 79; }
  30%   { stroke-dashoffset: 57; }  33.1% { stroke-dashoffset: 33; }
  36.3% { stroke-dashoffset: 22; }  39.4% { stroke-dashoffset: 18; }
  45%   { stroke-dashoffset: 12; }  48%   { stroke-dashoffset: 7; }
  52%   { stroke-dashoffset: 0; }   100%  { stroke-dashoffset: 0; }
}
@keyframes es-logo-fade { 0%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes es-blink { 0%, 100% { opacity: .3 } 50% { opacity: .75 } }

/* Μικρό, μέσα σε κουμπί: χοντρότερη γραμμή για να φαίνεται, μικρότερη λάμψη. */
.es-loader.es-sm { --es-stroke: 13; --es-glow: drop-shadow(0 1px 3px rgba(201, 169, 110, .35)); gap: 0; }

/* ⚠ ΤΟ ΜΙΚΡΟ ΤΡΕΧΕΙ ΤΡΕΙΣ ΦΟΡΕΣ ΓΡΗΓΟΡΟΤΕΡΑ (1,3s αντί 3,8s). Ο κύκλος του
   πρωτοτύπου είναι φτιαγμένος για σελίδα που περιμένει: η ασπίδα ολοκληρώνεται
   στο 42%, δηλαδή στο 1,6ο δευτερόλεπτο. Μια αποθήκευση κρατάει 0,6s — μέσα
   της προλάβαινες να δεις το 16% του κύκλου, δηλαδή ένα χρυσό τοξάκι και
   ΚΑΘΟΛΟΥ λογότυπο. Μετρήθηκε σε screenshot: το κουμπί έδειχνε ουσιαστικά
   κενό. Στα 1,3s η ασπίδα κλείνει στα 546ms και το λογότυπο προλαβαίνει να
   ξεσκεπαστεί ολόκληρο μέσα στον χρόνο που ζει το κουμπί. */
.es-loader.es-sm .es-shield,
.es-loader.es-sm .es-reveal-rim,
.es-loader.es-sm .es-reveal-fill,
.es-loader.es-sm .es-logo-img { animation-duration: 1.3s; }

/* ── Κουμπί που φορτώνει ───────────────────────────────────────────────────
   Το κουμπί «ανοίγει» από αριστερά και το σήμα γλιστράει μέσα, όπως στο
   παράδειγμα που έδωσε. Κινείται το `max-width` και όχι η θέση, ώστε να ΜΗΝ
   χρειαστεί `position: relative` στο `.btn` — υπάρχουν κουμπιά με απόλυτα
   τοποθετημένα παιδιά που θα άλλαζαν σημείο αναφοράς. */
/* ⚠ ΑΡΝΗΤΙΚΟ ΠΕΡΙΘΩΡΙΟ ΠΑΝΩ-ΚΑΤΩ. Η ασπίδα είναι 1,164× ψηλότερη από φαρδιά,
   άρα στα 20px βγάζει 23,3px — δύο pixel πιο ψηλή από τη σειρά του κειμένου,
   και το κουμπί ΑΝΑΠΗΔΟΥΣΕ κάθε φορά που ξεκινούσε η αποθήκευση. Το περιθώριο
   τη βγάζει από τον υπολογισμό του ύψους χωρίς να την κόψει. */
.btn.is-busy > .es-loader { overflow: hidden; margin-block: -3px; animation: es-btn-in .28s cubic-bezier(.34, 1.25, .5, 1) both; }
@keyframes es-btn-in {
  from { max-width: 0; opacity: 0; margin-inline-end: -7px; }
  to   { max-width: 24px; opacity: 1; margin-inline-end: 0; }
}
/* ⚠ Το `[disabled]` ξεθωριάζει στο 40%. Όσο φορτώνει ΔΕΝ είναι σβηστό, είναι
   απασχολημένο — αλλιώς το σήμα ζωγραφίζεται μέσα σε ένα ξέθωρο κουμπί. */
.btn.is-busy[disabled] { opacity: 1; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .es-loader .es-shield { animation: none; stroke-dashoffset: 0; }
  .es-loader .es-reveal-rim, .es-loader .es-reveal-fill { animation: none; stroke-dashoffset: 0; }
  .es-loader .es-logo-img { animation: none; opacity: 1; }
  .es-loader .es-label { animation: none; opacity: .75; }
  .btn.is-busy > .es-loader { animation-duration: .01ms; }
}

/* Η ψηφιακή επαγγελματική κάρτα, τέρμα αριστερά στον πάτο της καρτέλας —
   ακριβώς κάτω από τη φωτογραφία. Χρυσό περίγραμμα ώστε να διαβάζεται ως
   «κάτι δικό του», όχι ως τρίτο γκρι κουμπί δίπλα στα άλλα δύο. */
.escard-card { flex: 0 0 auto; color: var(--gold-ink); border-color: var(--gold-soft2); }
.escard-card:hover { border-color: var(--gold); background: var(--gold-soft2); }

/* Λογότυπο συνεργάτη μέσα στο άβαταρ: ΟΛΟΚΛΗΡΟ το σήμα σε λευκή πλακέτα, όχι
   κυκλικό crop. Ένα οριζόντιο λογότυπο κομμένο σε κύκλο χάνει τα άκρα του και
   γίνεται αγνώριστο — ίδιος λόγος με το `.pchip.logo` της μπάρας φίλτρων. */
.av.av-logo {
  background-color: #fff; background-size: contain; background-repeat: no-repeat;
  background-origin: content-box; padding: 2px; border: 1px solid var(--line-2);
}

/* ── ΑΥΤΟΚΙΝΗΤΑ & ΛΟΓΟΤΥΠΑ ΧΩΡΙΣ ΛΕΥΚΟ ΦΟΝΤΟ (25.09.2026) ──────────────────
   Εντολή ιδιοκτήτη: *«can we do the car photos and the logos transparent so
   that they dont have the white background?»* — στυλ ΙΔΙΟ, λογότυπα ΛΕΥΚΑ
   στη νύχτα και αυθεντικά στη μέρα, ΠΑΝΤΟΥ στην οθόνη.
   Τη διάφανη εικόνα τη φτιάχνει το core/cutout.js και τη δίνει ως δύο
   μεταβλητές: `--cut-day` και `--cut-night` (ίδιες για τα αυτοκίνητα). Εδώ
   μόνο διαλέγουμε ποια φαίνεται και σβήνουμε τη λευκή πλακέτα.
   ⚠ ΤΑ ΠΑΡΑΠΑΝΩ ΣΧΟΛΙΑ «ΤΟ ΛΕΥΚΟ ΜΕΝΕΙ ΚΑΙ ΣΤΗ ΝΥΧΤΑ» ισχύουν πλέον ΜΟΝΟ για
   όσα λογότυπα ΔΕΝ έχουν λευκό φόντο (π.χ. δικό τους μαύρο τετράγωνο): εκεί
   το cutout.js δεν αγγίζει τίποτα και η πλακέτα μένει. Τα σκούρα γράμματα που
   φοβόμασταν στο navy λύνονται με το ΛΕΥΚΟ μελάνι της νύχτας.
   ⚠ `!important` ΕΠΙΤΗΔΕΣ: αντικαθιστά inline `background-image` και κανόνες
   θέματος με ειδικότητα ως (0,5,0) (`:root[data-theme="dark"] .pchip.logo
   .pimg`). Ο κανόνας της νύχτας ζει μέσα σε `@media screen`, ώστε το ΧΑΡΤΙ να
   παίρνει πάντα την εκδοχή της μέρας (λευκό μελάνι σε λευκό χαρτί = τίποτα). */
.cut:not(img) { background-image: var(--cut-day) !important; }
@media screen {
  :root[data-theme="dark"] .cut:not(img) { background-image: var(--cut-night) !important; }
  :root[data-theme="dark"] img.cut-logo { content: var(--cut-night); }
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cut:not(img) { background-image: var(--cut-night) !important; }
  :root:not([data-theme="light"]) img.cut-logo { content: var(--cut-night); }
}
/* Η πλακέτα των λογοτύπων: χωρίς λευκό, χωρίς περίγραμμα, χωρίς σκιά. Το
   πλακίδιο των ΑΥΤΟΚΙΝΗΤΩΝ (`--card-2`) δεν αγγίζεται — ήταν πάντα εκεί, απλώς
   το έκρυβε το λευκό της φωτογραφίας. */
.pchip.logo .pimg.cut, .av.logo.cut, .av.av-logo.cut { background-color: transparent !important; }
.av.av-logo.cut { border-color: transparent; }
.escard-logo.cut-plate { background: transparent !important; box-shadow: none; }
/* Το «Όλοι» της λωρίδας συνεργατών (σκέτο εικονίδιο, χωρίς εικόνα — γι' αυτό
   χωρίς `style`) κληρονομούσε τη λευκή πλακέτα των λογοτύπων. Με τα λογότυπα
   διάφανα θα ήταν το ΜΟΝΟ λευκό κουτί της γραμμής· παίρνει το πλακίδιο του
   «Όλα» των αυτοκινήτων. Τα αρχικά (BA, VA) έχουν `style` και μένουν ίδια. */
.pchip.logo .pimg:not([style]) { background-color: var(--card-2) !important; }
/* Όσο υπολογίζεται (μόνο το πρώτο άνοιγμα, ~6ms): τίποτα αντί για λευκό κουτί
   που θα αναβόσβηνε. Σε αποτυχία το cutout.js βγάζει την κλάση και ξαναφαίνεται
   το πρωτότυπο με την πλακέτα του. */
.cut-wait:not(img) { background-image: none !important; }
img.cut-wait { opacity: 0; }
.pchip.logo .pimg.cut-wait, .av.logo.cut-wait, .av.av-logo.cut-wait { background-color: transparent !important; }
.escard-logo.cut-wait { background: transparent !important; box-shadow: none; }

/* Τρεις στήλες αντί για αυτόματο γέμισμα — ΜΟΝΟ τα «Έγγραφα εταιρείας»
   (εντολή ιδιοκτήτη 03.09.2026: «τρεις, όχι τέσσερις»). Το σκέτο `.esgrid`
   μένει auto-fill για Προσωπικό / Στόλο / Συνεργάτες, όπου οι κάρτες είναι
   δεκάδες και η πυκνότητα βοηθά. */
@media (min-width: 900px) { .esgrid.esgrid-3 { grid-template-columns: repeat(3, 1fr); } }