/* ============================================================================
   views.css — Ό,τι αφορά συγκεκριμένες οθόνες.
   ========================================================================== */

/* ── Σύνδεση ────────────────────────────────────────────────────────────── */
.login {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: var(--s4); background: var(--bg1);
}
.login-card {
  width: min(384px, 100%); background: var(--card); border-radius: var(--r);
  border: 1px solid var(--line-2); box-shadow: var(--shadow);
  padding: var(--s7) var(--s6) var(--s6);
  display: flex; flex-direction: column; gap: var(--s4);
}
.login-mark { text-align: center; margin-bottom: var(--s3); }
.login-mark img { height: 76px; width: auto; display: inline-block; }
.login-mark .wordmark {
  font-family: var(--serif); font-size: var(--fs-lg); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; margin-top: var(--s3); color: var(--ink);
}
.login-mark .wordmark-sub {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: var(--fs-2xs); letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-ink); font-weight: 700; margin-top: 6px;
}
.login-mark .wordmark-sub::before,
.login-mark .wordmark-sub::after { content: ''; height: 1px; width: 26px; background: var(--gold); }
.login-demo {
  display: flex; flex-direction: column; gap: 3px; padding-top: var(--s4);
  border-top: 1px solid var(--line-2); font-size: var(--fs-xs); color: var(--faint);
}
.login-demo b { color: var(--muted); font-size: var(--fs-2xs); margin-bottom: 4px; }

/* ── Γραμμή ημερολογίου ──────────────────────────────────────────────────────
   ΟΛΟΣ ο μήνας σε μία γραμμή. Οι 31 μέρες μοιράζονται το πλάτος αντί να
   κυλάνε — έτσι βλέπεις τη σεζόν με μια ματιά, όπως στο σημερινό σύστημα.
   Σε στενή οθόνη ξαναγίνεται λωρίδα που κυλάει.
   ========================================================================== */
.daystrip {
  display: flex; gap: 2px; padding: 0 0 3px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
@media (min-width: 900px) { .daystrip { overflow-x: hidden; } }

.day {
  flex: 0 0 auto; width: 46px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 4px 2px 3px; border: 0; background: none;
  border-radius: var(--r-xs); text-align: center;
  transition: background-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-btn) var(--spring);
}
@media (min-width: 900px) { .day { flex: 1 1 0; width: auto; min-width: 0; } }
.day:hover { background: var(--card-2); }
.day-dow {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; line-height: 1.3;
  text-transform: uppercase; color: var(--faint);
}
.day-n {
  font-size: var(--fs-base); font-weight: 600; color: var(--ink);
  line-height: 1.15; font-variant-numeric: tabular-nums;
}
/* Το πλήθος μεταφορών σε χρυσό σήμα — κρατά σταθερό ύψος όταν είναι κενό. */
.day-c {
  font-size: var(--fs-2xs); font-weight: 700; color: var(--gold-ink);
  background: var(--gold-soft2); border-radius: var(--r-xs);
  padding: 0 4px; line-height: 1.5; min-height: 12px;
  font-variant-numeric: tabular-nums;
}
.day-c:empty { background: none; padding: 0; }
.day.weekend .day-dow { color: var(--crit); opacity: .75; }
.day.today { background: var(--gold); }
/* ⚠ ΝΑΥΤΙΚΟ, ΟΧΙ ΛΕΥΚΟ. Το tokens.css το γράφει ρητά στην κορυφή του: λευκό
   σε χρυσό μετρά 2,46:1 και ΚΟΒΕΤΑΙ, ναυτικό σε χρυσό 7,16:1 και περνά. Ο
   κανόνας ίσχυε για τα κουμπιά αλλά ΟΧΙ εδώ — και «εδώ» είναι το σημερινό
   κελί, το πρώτο που κοιτά ο διαχειριστής κάθε πρωί. Στη νύχτα ήταν 1,82:1. */
/* ⚠⚠ ΞΑΝΑ ΝΑΥΤΙΚΟ (24.09.2026). Από τις 06.09 (κόκκινο κουμπί → λευκό μελάνι)
   το `--action-ink` είναι ΛΕΥΚΟ, οπότε ο αριθμός της σημερινής μέρας έγραφε
   λευκό σε χρυσό: 2,17:1 μέρα / 1,74:1 νύχτα. Σταθερό ναυτικό — ΟΧΙ `--navy`,
   που στη νύχτα ανοίγει σε #24405f. */
.day.today .day-dow, .day.today .day-n { color: #0a192f; }
.day.today .day-c { background: rgba(10,25,47,.14); color: #0a192f; }
/* Επιλεγμένη μέρα: ανασηκωμένη πλάκα με χρυσή ακμή, ίδια γλώσσα με το μενού. */
.day.on { background: var(--sel-plate); box-shadow: inset 0 0 0 1.5px var(--gold), var(--sel-lift); }
.day.today.on { background: var(--gold); box-shadow: inset 0 0 0 2px rgba(255,255,255,.92), var(--sel-lift); }
.day:active { transform: scale(.95); transition-duration: var(--t-press); }

/* Κεφαλίδα της γραμμής: μήνας αριστερά, βελάκια δεξιά. */
.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); margin-bottom: 2px;
}
/* Τα βελάκια του μήνα δεν χρειάζονται μέγεθος κουμπιού μπάρας — είναι
   μέσα στην κάρτα, δίπλα στο κείμενο. */
.cal-head .btn-icon { padding: 3px; }
.cal-head .btn-icon svg { width: 16px; height: 16px; }
/* Ο μήνας ΔΕΝ σπάει ποτέ σε δύο γραμμές (έσπαγε στο iPhone). */
.cal-head > .row { flex: 0 0 auto; gap: 2px; }
.cal-head-t { font-size: var(--fs-base); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.cal-head-s { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 0; text-align: end; line-height: 1.25; }

/* ── Ακρίβεια στη γραμμή εργαλείων του ημερολογίου (24.09.2026) ────────────
   Μετρημένα πριν: τρία ύψη στην ίδια γραμμή — διακόπτης 39 · βελάκια 34 ·
   «Σήμερα» 31px. Τώρα ΕΝΑ: 32px με ποντίκι, 36px στην αφή. Και ένας ρυθμός
   κενών (8px) από τη γραμμή εργαλείων ως τη λίστα. */
@media screen {
  .calview { gap: 8px; }
  .calview > .toolbar { margin-bottom: 0; }
  .calview > .stack { gap: 8px; }
  .calview > .stack > .stack { margin-top: 4px; }
}
.calview > .toolbar > .seg { padding: 2px; }
.calview > .toolbar > .seg > button { height: 26px; line-height: 26px; padding-block: 0; }
.calview > .toolbar > .row > .btn,
.calview > .toolbar > .rangebox > .btn { height: 32px; padding-block: 0; }
.calview > .toolbar > .row > .btn-icon { width: 32px; padding: 0; }
@media (hover: none) {
  .calview > .toolbar > .seg > button { height: 30px; line-height: 30px; }
  .calview > .toolbar > .row > .btn,
  .calview > .toolbar > .rangebox > .btn { height: 36px; }
  .calview > .toolbar > .row > .btn-icon { width: 36px; }
}

/* ── ΔΙΑΚΟΠΤΗΣ ΗΜΕΡΑ/ΔΙΑΣΤΗΜΑ ΩΣ ΕΙΚΟΝΙΔΙΑ + «ΣΗΜΕΡΑ» ΜΕΣΑ ΣΤΗΝ ΚΑΡΤΑ ΤΟΥ ΜΗΝΑ (05.10.2026) ────────
   Ιδιοκτήτης: «they take too much space» → «Merge into the month card», κινητό ΚΑΙ υπολογιστής.
   Η ΗΜΕΡΑ δεν έχει πια γραμμή εργαλείων: `‹ Οκτώβριος 2026 ›  20 μεταφορές…  [▣|▭▭] Σήμερα`. Το «Σήμερα»
   υπάρχει ΜΟΝΟ όταν δεν είσαι στο σήμερα· στο στενό κινητό τότε κρύβεται το «X μεταφορές τον μήνα» για να
   χωρέσουν όλα σε μία γραμμή. Το ΔΙΑΣΤΗΜΑ κρατά τη γραμμή του, με τον ίδιο διακόπτη-εικονίδια. */
.seg.seg-mode { padding: 2px; flex: 0 0 auto; }
.seg.seg-mode > button { width: 30px; height: 26px; padding: 0; display: inline-grid; place-items: center; line-height: 1; }
.seg.seg-mode > button svg { width: 16px; height: 16px; }
.cal-head-tools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.cal-head-tools > .cal-today { height: 30px; padding: 0 10px; }
.cal-head > .cal-head-s { flex: 1 1 auto; }
/* ΔΙΑΣΤΗΜΑ (05.10.2026): η ίδια γραμμή σε δική της κάρτα, στη θέση της κάρτας του μήνα — `‹ [εύρος] ›`
   αριστερά (το εύρος τεντώνει), διακόπτης δεξιά. Ο διακόπτης δεν μετακινείται όταν αλλάζεις προβολή. */
.cal-head > .cal-range-nav { flex: 1 1 auto; min-width: 0; }
.cal-range-nav > .rangebox { flex: 1 1 auto; min-width: 0; }
.cal-range-nav > .rangebox > .btn { width: 100%; min-width: 0; height: 30px; padding-block: 0; justify-content: center; }
.cal-range-nav > .rangebox > .btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: none) {
  .cal-range-nav > .rangebox > .btn { height: 34px; }
  .seg.seg-mode > button { width: 34px; height: 30px; }
  .cal-head-tools > .cal-today { height: 34px; }
}
/* Στο κινητό το «X μεταφορές τον μήνα» δεν χωρά δίπλα στα κουμπιά (έσπαγε σε ΤΡΕΙΣ γραμμές) — κρύβεται·
   κάθε μέρα της λωρίδας δείχνει ήδη το δικό της πλήθος. Ο υπολογιστής το κρατά. */
@media (max-width: 719px) {
  .cal-head > .cal-head-s { display: none; }
  .cal-head { gap: 6px; }
  .cal-head > .cal-head-tools { margin-inline-start: auto; gap: 4px; }
  /* «Σεπτέμβριος 2026» + διακόπτης + «Σήμερα» σε 319px: μετρημένο 19px ΕΞΩ από την κάρτα με τα
     μεγέθη αφής — εδώ λίγο πιο σφιχτά (ο στόχος μένει ≥30px). */
  .seg.seg-mode > button { width: 30px; }
  .cal-head-tools > .cal-today { padding: 0 8px; font-size: var(--fs-xs); }
  .cal-head > .row { gap: 0; }
}

/* ── Μηνιαίο πλέγμα ──────────────────────────────────────────────────────────
   ΧΩΡΙΣ κείμενο μεταφορών μέσα στα κελιά — μόνο πόσες έχει η μέρα και το
   σύνολό της. Το τι είναι η καθεμιά το βλέπεις πατώντας τη μέρα.
   ========================================================================== */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line-2);
  border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; }
.cal-dow {
  background: var(--card-2); padding: 7px 4px; text-align: center;
  font-size: var(--fs-2xs); font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .1em;
}
.cal-cell {
  background: var(--card); min-height: 74px; padding: 7px 6px; text-align: start;
  border: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 4px; transition: background var(--t-fast);
}
.cal-cell:hover { background: var(--card-2); }
.cal-cell.out { background: var(--card-2); opacity: .45; }
.cal-cell.today .cal-n { background: var(--gold); color: var(--navy); }
.cal-cell.on { box-shadow: inset 0 0 0 2px var(--gold); }
.cal-n {
  align-self: flex-start; font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums;
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
}
/* Το μεγάλο νούμερο: πόσες μεταφορές έχει η μέρα. */
.cal-count {
  font-size: var(--fs-2xl); font-weight: 600; line-height: 1; color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}
.cal-count.zero { color: var(--line); font-weight: 400; }
.cal-sum {
  font-size: var(--fs-2xs); font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── Εβδομάδα ───────────────────────────────────────────────────────────── */
.week { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: var(--s2); overflow-x: auto; padding-bottom: var(--s3); }
.week-col { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.week-h { position: sticky; top: 0; padding: 7px; text-align: center; border-radius: var(--r-sm); background: var(--card-2); }
.week-h.today { background: var(--gold-soft2); }
.week-h b { display: block; font-family: var(--serif); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.week-h span { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }

/* ── Γραμμή μεταφοράς ────────────────────────────────────────────────────────
   Γραμμές, όχι κάρτες. Ο dispatcher θέλει να βλέπει ΠΟΛΛΕΣ ταυτόχρονα και όλα
   τα κρίσιμα με μια ματιά: ώρα · διαδρομή · χρήματα · πελάτης · οδηγός · όχημα.
   Έξι στήλες, ύψος γραμμής ~74px, χωρίς κενά ανάμεσα — σαν πίνακας.

   Σε κινητό η ίδια γραμμή διπλώνει σε δύο σειρές χωρίς να χάσει τίποτα.
   ========================================================================== */
/* ΞΕΧΩΡΙΣΤΕΣ ΚΑΡΤΕΣ ΠΑΝΤΟΥ — εντολή ιδιοκτήτη 01.09.2026. Η λίστα έχασε το
   κουτί της και σε γραφείο: κάθε μεταφορά είναι δικό της γυαλί, όπως οι
   υπόλοιπες κάρτες της εφαρμογής (esdocs .item). */
.job-list {
  display: flex; flex-direction: column; gap: 5px;
  border: 0; background: none; overflow: visible;
}

.job {
  display: grid; width: 100%; text-align: start;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 1px 12px; padding: 7px 13px 7px 16px;
  background: var(--card-glass); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  position: relative; transition: background var(--t-fast), border-color var(--t-fast);
}
.job:hover { background: var(--card-2); border-color: var(--gold-soft2); }

/* ⚠ ΑΚΜΕΣ ΤΟΥ ΤΖΑΜΙΟΥ (24.09.2026, «Βάθος με μπλε σκιές»). Νύχτα: σχεδόν
   αόρατο περίγραμμα και ΦΩΤΙΣΜΕΝΗ πάνω ακμή — το φως έρχεται από πάνω. Μέρα:
   λίγο πιο σταθερή κάτω ακμή, εκεί που «πατά» η κάρτα. Ισχύει για κάρτες,
   μεταφορές, πλακίδια και την πλάκα χρημάτων· ΟΧΙ για την ίδια πλάκα από μέσα
   (`.daystats .stat`), που έχει δικές της διαχωριστικές. Το `:hover` της
   μεταφοράς ξαναγράφεται εδώ γιατί ο κανόνας του θέματος είναι ισχυρότερος. */
@media screen {
  :root[data-theme="dark"] :where(.card:not(.filter-card), .job, .stat:not(.daystats .stat), .daystats, .login-card):not(.accent):not(.is-loss) {
    border-color: rgba(255,255,255,.06);
    border-top-color: rgba(255,255,255,.12);
  }
  :root[data-theme="dark"] .job:hover { border-color: var(--gold-soft2); }
  :root[data-theme="light"] :where(.card:not(.filter-card), .job, .stat:not(.daystats .stat), .daystats):not(.accent):not(.is-loss) { border-bottom-color: rgba(10,25,47,.11); }
  :root[data-theme="light"] .job:hover { border-color: var(--gold-soft2); }
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :where(.card:not(.filter-card), .job, .stat:not(.daystats .stat), .daystats, .login-card):not(.accent):not(.is-loss) {
    border-color: rgba(255,255,255,.06);
    border-top-color: rgba(255,255,255,.12);
  }
  :root:not([data-theme="light"]) .job:hover { border-color: var(--gold-soft2); }
}
@media screen and (prefers-color-scheme: light) {
  :root:not([data-theme]) :where(.card:not(.filter-card), .job, .stat:not(.daystats .stat), .daystats):not(.accent):not(.is-loss) { border-bottom-color: rgba(10,25,47,.11); }
  :root:not([data-theme]) .job:hover { border-color: var(--gold-soft2); }
}
.job:focus-within { background: var(--card-2); }
.job.cancelled { opacity: .5; }
.job.cancelled .job-route { text-decoration: line-through; }

/* Λωρίδα κατάστασης — λεπτή, στην αριστερή άκρη της κάρτας, μέσα από την
   καμπύλη της γωνίας. */
.job::before {
  content: ''; position: absolute; inset-inline-start: 6px; top: 9px; bottom: 9px;
  width: 3px; border-radius: var(--r-pill); background: transparent;
}
/* ⚠ ΤΟ ΧΡΩΜΑ ΔΕΝ ΕΙΝΑΙ Η ΚΑΤΑΣΤΑΣΗ ΤΗΣ ΚΡΑΤΗΣΗΣ — ΕΙΝΑΙ Η ΠΡΟΟΔΟΣ.
   Παλιά ήταν `st-<status>`: «επιβεβαιωμένη» πράσινο, «προσφορά» μπλε. Έλεγε
   τι είχε αποφασίσει το γραφείο, όχι τι κάνει το αυτοκίνητο τώρα. Πλέον το
   χρώμα το δίνει η `stripeTone()` από τα κουμπιά που πατάει ο οδηγός.
   Οι κλάσεις είναι `tone-*` ώστε να ΣΠΑΣΕΙ θορυβωδώς ό,τι έμεινε στο παλιό. */

/* Άχρωμη = δεν την έχει δεχτεί οδηγός. ΓΡΑΜΜΕΝΗ ΡΗΤΑ, δεν βασιζόμαστε στο ότι
   η βάση είναι διαφανής: η απουσία χρώματος εδώ ΣΗΜΑΙΝΕΙ κάτι, και πρέπει να
   φαίνεται στον κώδικα ότι είναι απόφαση. */
.job.tone-none::before      { background: transparent; }
.job.tone-wait::before      { background: var(--st-wait); }
.job.tone-enroute::before   { background: var(--st-enroute); }
.job.tone-onsite::before    { background: var(--st-onsite); }
.job.tone-onboard::before   { background: var(--st-onboard); }
/* Ίδιο κόκκινο· η διαφορά είναι στο σώμα της κάρτας (βλ. `.job.cancelled`). */
.job.tone-noshow::before,
.job.tone-cancelled::before { background: var(--st-stop); }
/* ⚠ «ΠΕΡΑΣΕ Η ΩΡΑ ΚΑΙ ΔΕΝ ΕΧΕΙ ΟΔΗΓΟ» — η μόνη γραμμή που θέλει τηλέφωνο ΤΩΡΑ.
   Πριν έμενε ΑΧΡΩΜΗ, δηλαδή φώναζε λιγότερο από κάθε άλλη. Παλμός για να
   τραβήξει το μάτι σε γεμάτη λίστα· σταματά με prefers-reduced-motion. */
.job.tone-late::before { background: var(--st-stop); animation: late-pulse 1.8s ease-in-out infinite; }
@keyframes late-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .job.tone-late::before { animation: none; } }

/* ── 1. Ώρα ─────────────────────────────────────────────────────────────── */
.job-time {
  font-size: var(--fs-base); font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1.25; letter-spacing: -.01em; font-family: var(--sans);
  /* ⚠ ΠΟΤΕ ΑΝΑΔΙΠΛΩΣΗ. Η διάθεση γράφει ΕΥΡΟΣ («08:00–17:00»), που πιάνει
     87px — σε στήλη 68px έσπαγε σε δύο γραμμές, η κάρτα ψήλωνε μόνη της και
     χαλούσε η ευθεία που κρατούν όλες οι υπόλοιπες. Οι στήλες από κάτω
     πλάτυναν σε 92px ώστε το εύρος να χωράει ΟΛΟΚΛΗΡΟ σε μία γραμμή. */
  white-space: nowrap;
}
/* ⚠ Η ΗΜΕΡΟΜΗΝΙΑ ΠΑΝΩ ΑΠΟ ΤΗΝ ΩΡΑ, ΚΑΙ ΜΟΝΟ ΣΤΑ REPORTS (10.09.2026). Μπαίνει
   με την επιλογή `withDate` της `jobCard()` — στο Ημερολόγιο και στις
   Κρατήσεις οι κάρτες κάθονται ήδη κάτω από κεφαλίδα ημέρας.
   Χωρίς αναδίπλωση, για τον ίδιο λόγο με την ώρα: η στήλη είναι 92px και ένα
   σπάσιμο σε δεύτερη γραμμή ψήλωνε ΜΟΝΟ αυτή την κάρτα και χαλούσε την ευθεία
   που κρατούν οι υπόλοιπες. Μετρημένο «Πεμ 10 Σεπ» = 60px στα 92px. */
.job-date {
  font-size: var(--fs-2xs); font-weight: 600; color: var(--muted);
  line-height: 1.2; white-space: nowrap; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
/* Το δωμάτιο ή η πτήση κάτω από την ώρα — το ίδιο σημείο πάντα. */
.job-mark {
  display: flex; align-items: center; gap: 3px; line-height: 1.3;
  font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); white-space: nowrap;
}
.job-mark svg { width: 11px; height: 11px; flex: 0 0 auto; color: var(--faint); }
/* Το 🛏️ του δωματίου στέκεται εκεί που στέκεται η πτήση ή το πλοίο. Λίγο
   μικρότερο από το πλάτος του svg: τα emoji γεμίζουν όλο το τετράγωνό τους,
   ενώ ένα σχέδιο με γραμμές έχει αέρα γύρω — με ίδιο μέγεθος θα φαινόταν
   μεγαλύτερο από τα αδέλφια του. */
.job-mark .ico-emoji { width: 12px; font-size: 10px; }

/* ── Πτήση/πλοίο που ΠΑΤΙΕΤΑΙ (11.09.2026) ──────────────────────────────────
   Ανοίγει FlightRadar24 ή VesselFinder. Και τα δύο έχουν universal links,
   οπότε ο ίδιος σύνδεσμος ανοίγει την εφαρμογή στο κινητό και τη σελίδα στον
   υπολογιστή.
   ⚠ ΔΕΝ ΓΙΝΕΤΑΙ ΚΑΘΕ ΤΣΙΠΑΚΙ ΣΥΝΔΕΣΜΟΣ: το 12,5% των τιμών δεν αναγνωρίζεται
   («.», «TBA», «Private Jet»). Αυτά μένουν σκέτο κείμενο — γι' αυτό η διαφορά
   πρέπει να ΦΑΙΝΕΤΑΙ, αλλιώς ο οδηγός πατάει στα τυφλά και νομίζει ότι χάλασε. */
a.job-mark.job-track {
  color: var(--info);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.job-mark.job-track svg { color: var(--info); }
.job-mark.job-track:hover { text-decoration-style: solid; }
/* Στο κινητό είναι ΕΡΓΑΛΕΙΟ στο αεροδρόμιο, όχι διακοσμητικό — ίδιο σκεπτικό
   με το `.job-phone`: 14px ύψος δεν πατιέται με το ένα χέρι και βαλίτσες. */
@media (hover: none) {
  .job-mark.job-track { min-height: 26px; padding-block: 4px; }
  .job-mark.job-track svg { width: 13px; height: 13px; }
}
/* Στο χαρτί ο σύνδεσμος δεν πατιέται — η διακεκομμένη γραμμή είναι θόρυβος. */
@media print {
  .job-mark.job-track { text-decoration: none; color: var(--muted); }
}
/* ⚠ ΥΠΟΛΟΓΙΣΤΗΣ ΚΑΙ TABLET: ΤΟ ΣΗΜΑ ΑΝΑΔΙΠΛΩΝΕΤΑΙ ΜΕΣΑ ΣΤΗ ΣΤΗΛΗ ΤΟΥ (25.09.2026).
   Με `nowrap` το «SEAJETS CHAMPIONS LEAGUE JET 1» πιάνει 193px σε στήλη ώρας
   92px (≥1080 ΚΑΙ 720-1079 — εκεί πέφτει και το κινητό οριζόντια, 844px) και
   έπεφτε 101px ΠΑΝΩ στη διαδρομή / στο όνομα του πελάτη. Μετρημένα στα 3.402
   αληθινά πεδία «Πτήση»: 192 πάνω από 16 χαρακτήρες, το μεγαλύτερο 38· και τα
   δωμάτια (ίδια κλάση) ως 20, «405/401/502/406/207/».
   ⚠ ΜΟΝΟ ≥720px. ΤΟ ΚΙΝΗΤΟ ΜΕΝΕΙ ΟΠΩΣ ΗΤΑΝ — εντολή ιδιοκτήτη: «on mobile it
   was good. please make it like it was before on mobile. just fix the desktop
   and tablet view». Δοκιμάστηκε και εκδοχή για το κινητό (κελί ώρας σε δύο
   στήλες + αναδίπλωση) και ΑΠΟΡΡΙΦΘΗΚΕ: εκεί το σήμα-κάψουλα απλώνεται στο
   άδειο κάτω από τον τύπο και δεν ενοχλούσε. Όλοι οι κανόνες εδώ είναι
   ΠΡΟΣΘΗΚΕΣ πάνω στους βασικούς — κάτω από 720px δεν αλλάζει ούτε ένα pixel.
   ⚠ ΑΝΑΔΙΠΛΩΣΗ, ΟΧΙ «…»: το τέλος του ονόματος ξεχωρίζει το πλοίο —
   «CHAMPIONS LEAGUE JET 1» και «…JET 2» είναι ΔΥΟ ΔΙΑΦΟΡΕΤΙΚΑ πλοία (δες
   core/track-link.js).
   `anywhere` και όχι `break-word`: μόνο το πρώτο μικραίνει το min-content.
   Τα δωμάτια σπάνε στο διαχωριστικό χάρη στο `<wbr>` του `mark()`
   (job-card.js), όχι ανάμεσα σε ψηφία. `balance`: «SEAJETS CHAMPIONS /
   LEAGUE JET 1», όχι ορφανό «JET 1» (όπου δεν υποστηρίζεται, αγνοείται).
   `flex-start` + margin-top 1px = (γραμμή 13px − εικονίδιο 11px) / 2: σε
   πολλές γραμμές το εικονίδιο μένει στην ΠΡΩΤΗ γραμμή. Το 🛏️ παίρνει ύψος μιας
   γραμμής (13px) για τον ίδιο λόγο. */
@media (min-width: 720px) {
  .job-mark { align-items: flex-start; white-space: normal; min-width: 0; max-width: 100%; }
  .job-mark > span:last-child { min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }
  .job-mark svg { margin-top: 1px; }
  .job-mark .ico-emoji { height: 13px; }
}
/* Αφή σε tablet (iPad): τα 26px με PADDING, όχι με `min-height` — με το
   `flex-start` το `min-height` θα κολλούσε τη μία γραμμή στην κορυφή του
   κουτιού. 13px γραμμή + 2×6,5px = 26px, ίδιο ύψος, κεντραρισμένο. */
@media (min-width: 720px) and (hover: none) {
  .job-mark.job-track { min-height: 0; padding-block: 6.5px; }
  .job-mark.job-track svg { margin-top: 0; }
}
/* ⚠ ΤΟ `<wbr>` ΤΩΝ ΔΩΜΑΤΙΩΝ ΣΒΗΝΕΙ ΣΤΟ ΚΙΝΗΤΟ. Το Chrome ΣΠΑΕΙ στο `<wbr>` ΑΚΟΜΗ
   ΚΑΙ ΜΕ `nowrap` — μετρημένο: «405/<wbr>401/<wbr>502» σε 40px με nowrap = δύο
   γραμμές. Χωρίς αυτό, το «405/401/502/406/207/» θα έσπαγε σε δύο γραμμές στο
   κινητό, που ο ιδιοκτήτης θέλει ΑΚΡΙΒΩΣ όπως ήταν. Με `display: none` το
   `<wbr>` βγαίνει από τη διάταξη: μία γραμμή, ίδιο πλάτος με σκέτο κείμενο
   (55,62 / 55,63px). */
@media (max-width: 719px) {
  .job-mark wbr { display: none; }
}

/* ── 2. Στοιχεία διαδρομής ──────────────────────────────────────────────── */
.job-main { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.job-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; line-height: 1.25; }
.job-ref {
  font-style: italic; font-size: var(--fs-xs); font-weight: 500;
  color: var(--info); font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Ο τύπος υπηρεσίας με το βελάκι του — το χρώμα λέει τι είναι πριν το διαβάσεις. */
.job-dir { font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.job-dir .ar { font-weight: 700; }
/* Η απλή μεταφορά: ουδέτερο μπλε-γκρι. Είναι η ΣΥΝΗΘΕΣΤΕΡΗ γραμμή της
   λίστας — αν φώναζε, θα έπνιγε τις ειδικές κατηγορίες που θέλουν προσοχή. */
.dir-transfer   { --dir: #3f6285; color: var(--dir); }
.dir-arrival    { --dir: #1a7f4b; color: var(--dir); }
.dir-departure  { --dir: #7c53c9; color: var(--dir); }
.dir-disposal   { --dir: #a8791c; color: var(--dir); }
.dir-excursion  { --dir: #157b83; color: var(--dir); }
/* Το φορτηγό αποσκευών: λαδί. ΔΕΝ διαλέχτηκε στο μάτι — μετρήθηκαν οι
   αποχρώσεις όλων των υπαρχόντων τύπων και αυτή είναι η μέση του
   ΜΕΓΑΛΥΤΕΡΟΥ ελεύθερου κενού (109°, ανάμεσα στο κεχριμπάρι της διάθεσης
   στις 40° και το πράσινο της άφιξης στις 149°). Απέχει 54° και 55°
   αντίστοιχα — όσο πιο μακριά γίνεται και από τα δύο. */
.dir-luggagetruck { --dir: #4f8329; color: var(--dir); }
.dir-cruise     { --dir: #2765b5; color: var(--dir); }
.dir-charter    { --dir: #8a5a2b; color: var(--dir); }
.dir-guard      { --dir: #b3402f; color: var(--dir); }
.dir-tourguide  { --dir: #157b83; color: var(--dir); }
.dir-nanny      { --dir: #b0538f; color: var(--dir); }
.dir-butler,
.dir-concierge,
.dir-dispatcher { --dir: #5a6270; color: var(--dir); }
.dir-meetgreet,
.dir-fasttrack  { --dir: #1a6ea8; color: var(--dir); }
:root[data-theme="dark"] .job-dir,
:root[data-theme="dark"] .job-ref { filter: brightness(1.55) saturate(.85); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .job-dir,
  :root:not([data-theme="light"]) .job-ref { filter: brightness(1.55) saturate(.85); }
}

/* Η ΔΙΑΔΡΟΜΗ ΔΕΝ ΚΟΒΕΤΑΙ ΠΟΤΕ, σε κανένα πλάτος.

   Τα ονόματα ξενοδοχείων στην Κρήτη μοιάζουν μεταξύ τους στην αρχή και
   ξεχωρίζουν στο τέλος — «Vasia Resort», «Vasia Resort & Spa», «Vasia Sea
   Retreat». Με αποσιωπητικά, και τα τρία γίνονταν «Vasia Res…» και ο
   δισπάτσερ έστελνε το αυτοκίνητο σε λάθος πόρτα. Οπότε τυλίγεται, ακόμη κι
   αν η γραμμή ψηλώσει: ένα ψηλότερο κελί κοστίζει pixel, ένα κομμένο όνομα
   κοστίζει μεταφορά. */
.job-route {
  font-weight: 700; font-size: var(--fs-base); color: var(--navy); line-height: 1.3;
  display: flex; align-items: center; flex-wrap: wrap; gap: 1px 5px;
  min-width: 0; letter-spacing: -.01em;
}
/* `anywhere` και όχι `break-word`: πιάνει και το μονοκόμματο όνομα χωρίς κενά
   που αλλιώς θα ξεχείλιζε από τη στήλη του. */
.job-route span { overflow-wrap: anywhere; min-width: 0; }
.job-route .arr { color: var(--faint); flex: 0 0 auto; font-weight: 400; }
:root[data-theme="dark"] .job-route { color: #eef3fb; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .job-route { color: #eef3fb; }
}

/* ── ΤΟ ΣΧΟΛΙΟ, ΚΑΤΩ ΔΕΞΙΑ ΚΑΙ ΩΣ ΚΕΙΜΕΝΟ ─────────────────────────────────
   Ήταν πινέζα με `title` στο τέλος της διαδρομής — το iOS δεν το έδειχνε ΠΟΤΕ,
   κι έτσι ο οδηγός έβλεπε πορτοκαλί σήμα χωρίς να μπορεί να το διαβάσει.
   Τώρα φαίνεται ολόκληρο, και κόβεται με αποσιωπητικά αν είναι μεγάλο. */
/* ⚠ `justify-content: flex-end` ΚΑΙ ΟΧΙ `justify-self: end`. Το δεύτερο κάνει
   το κελί να πάρει πλάτος ΠΕΡΙΕΧΟΜΕΝΟΥ: με μεγάλο σχόλιο το κείμενο ξεχείλιζε
   έξω από την κάρτα, πάνω από τη λωρίδα κατάστασης. Έτσι το κελί γεμίζει τη
   στήλη και το κείμενο στοιχίζεται δεξιά. */
.job-note-row {
  display: flex; justify-content: flex-end; min-width: 0;
  color: var(--warn); font-size: var(--fs-xs);
}
/* ⚠ ΟΛΟΚΛΗΡΟ ΤΟ ΣΧΟΛΙΟ, ΧΩΡΙΣ ΑΠΟΣΙΩΠΗΤΙΚΑ (05.09.2026, εντολή ιδιοκτήτη:
   «το σχόλιο να φαίνεται ολόκληρο, ας ψηλώσει η κάρτα»). Ήταν ΜΙΑ γραμμή με
   κόψιμο — και εκεί μέσα ζουν τα παιδικά καθίσματα, δηλαδή θέμα ασφάλειας που
   ο οδηγός δεν έβλεπε χωρίς να ανοίξει την κράτηση.
   Η κάρτα ψηλώνει μόνη της: οι γραμμές του πλέγματος είναι `auto`.
   ⚠ `overflow-wrap: anywhere` — χωρίς αυτό, ΕΝΑ μεγάλο «σκέτο» κομμάτι (μια
   διεύθυνση ιστού, ένας κωδικός κράτησης χωρίς κενά) δεν σπάει πουθενά και
   ξεχειλίζει έξω από την κάρτα, ακριβώς το πρόβλημα που λύθηκε παραπάνω. */
.job-note-row .jn-t {
  min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: right;
}

/* Πινέζα σημείωσης — κρατά το ύψος της γραμμής σταθερό.
   ⚠ `pointer-events: auto` και δικό της cursor: το κείμενο ανοίγει πλέον με
   ΠΑΤΗΜΑ (showTip), γιατί το iOS δεν δείχνει ποτέ native `title`. */
.job-note { display: inline-flex; flex: 0 0 auto; cursor: help; }
.job-note svg { width: 13px; height: 13px; color: var(--warn); }


/* Δευτερεύουσες πληροφορίες σε σειρά — τη χρησιμοποιεί και η οθόνη οδηγού. */
.job-meta {
  display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 2px;
  font-size: var(--fs-sm); color: var(--muted);
}

/* ── 3. Χρήματα ─────────────────────────────────────────────────────────── */
.job-money { display: flex; flex-direction: column; gap: 0; line-height: 1.3; font-variant-numeric: tabular-nums; }
/* ⚠ ΤΙΜΗ ΚΑΙ ΕΙΚΟΝΙΔΙΟ ΠΛΗΡΩΜΗΣ ΣΤΗΝ ΙΔΙΑ ΓΡΑΜΜΗ (05.09.2026, εντολή
   ιδιοκτήτη «τα εικονίδια πληρωμής δεξιά από την τιμή»). Ήταν στοιβαγμένα και
   η κάρτα έτρωγε δύο γραμμές ύψους για δύο πράγματα που διαβάζονται μαζί:
   πόσα, και από πού. Η σειρά στο DOM είναι ήδη τιμή → τρόπος, οπότε δεν
   χρειάστηκε `order`.
   Ισχύει σε ΟΛΑ τα πλάτη — τα media queries από κάτω ρυθμίζουν μόνο ΠΟΥ
   στέκεται η γραμμή μέσα στη στήλη της, όχι τη φορά της. */
/* ⚠ ΤΟ ΣΗΜΑ ΤΟΥ myDATA ΣΤΗΝ ΚΑΡΤΑ (07.09.2026). Κάθεται κάτω από την τιμή και
   λέει ένα πράγμα: «γι' αυτή τη μεταφορά υπάρχει ήδη παραστατικό». Μπλε
   περίγραμμα — ζητήθηκε ρητά· είναι πληροφορία, όχι προειδοποίηση, γι' αυτό
   δεν παίρνει το κόκκινο ούτε το χρυσό της οθόνης. */
.job-mydata {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 5px; border-radius: var(--r-xs);
  border: 1.5px solid var(--ic-office);
  background: var(--card-2);
  line-height: 0; flex: 0 0 auto;
  /* Στη στήλη των χρημάτων: δική του γραμμή, στοιχισμένο με την τιμή. */
  align-self: inherit; margin-top: 3px;
}
/* ⚠ ΤΟ ΥΨΟΣ ΔΙΝΕΤΑΙ ΣΤΗ `--logo-h`, ΟΧΙ ΣΕ `height`. Το σήμα δεν είναι πια
   <img> αλλά φόντο (ώστε να αλλάζει αρχείο ανά θέμα — στη νύχτα το «DATA»
   είναι λευκό). Το `.logo-word` βγάζει μόνο του το πλάτος από τον λόγο. */
.job-mydata .logo-word { --logo-h: 13px; }
/* (04.10.2026 βράδυ) Το σήμα είναι ΚΟΥΜΠΙ που τυπώνει την απόδειξη (job-card.js `printMyData`) —
   φαίνεται πατήσιμο. `appearance`/`font`/`margin`: το <button> φέρνει δικά του από τον browser. */
.job-mydata.is-link {
  -webkit-appearance: none; appearance: none; font: inherit; color: inherit; margin: 3px 0 0;
  cursor: pointer; text-decoration: none; transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.job-mydata.is-link:hover { background: var(--info-soft); box-shadow: 0 2px 8px rgba(10, 25, 47, .14); transform: translateY(-1px); }
.job-mydata.is-link:active { transform: scale(.96); }
.job-mydata.is-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.job-money-in { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.job-sell { font-size: var(--fs-base); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.job-pay { display: flex; align-items: center; gap: 4px; font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); }
/* 16px, όχι 13. Με stroke 1.7 σε πλέγμα 24, τα 13px δίνουν γραμμή 0,9px —
   κάτω από ένα pixel, και το εικονίδιο θολώνει. Στα 16px γίνεται 1,13px. */
.job-pay svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ⚠ ΤΑ ΙΔΙΑ TOKENS ΜΕ ΤΗΝ ΚΕΦΑΛΙΔΑ ΤΗΣ ΗΜΕΡΑΣ (`--ic-*`).
   Ήταν τα `--pay-*`: ίδια οικογένεια απόχρωσης αλλά άλλος κορεσμός, οπότε το
   ΙΔΙΟ εικονίδιο POS έβγαινε με δύο διαφορετικά πορτοκαλί στην ΙΔΙΑ οθόνη —
   κεχριμπαρένιο στη γραμμή, πορτοκαλί στο πλακίδιο. Διαβαζόταν σαν λάθος, όχι
   σαν ιεραρχία. Ένα χρώμα ανά τρόπο πληρωμής, παντού. */
/* Το κτήριο του γραφείου στα 20px, όπως και το POS: με stroke σε πλέγμα 24 το
   λεπτό περίγραμμα του κτηρίου χάνεται στα 16 δίπλα στα γεμάτα εικαστικά. Τα
   υπόλοιπα (προπληρωμένη, pay later) μένουν 16 — δεν ζητήθηκαν. */
.job-pay.pay-account svg { width: 20px; height: 20px; color: var(--ic-office); }
/* ⚠ 16px, ΟΧΙ 20 — ΚΑΙ ΕΧΕΙ ΛΟΓΟ. Το σχέδιο του κτηρίου μεγάλωνε σε 20px
   επειδή ήταν ψηλό-στενό γραμμικό και στα 16 φαινόταν μικρότερο από το
   χαρτονόμισμα δίπλα του (βλ. σχόλιο στο job-card.js). Το 🗃️ είναι γεμάτο
   έγχρωμο σύμβολο, σαν το 💶 — που εδώ μπαίνει στα 16px. Στα 20 θα ήταν το
   βαρύτερο πράγμα της κάρτας. */
.job-pay.pay-account .ico-emoji { width: 16px; font-size: 16px; }
.job-pay.pay-cash svg    { color: var(--ic-cash); }
.job-pay.pay-pos svg     { color: var(--ic-pos); }
.job-pay.pay-prepaid svg { color: var(--ic-prepaid); }
.job-pay.pay-free svg    { color: var(--ic-free); }
.job-pay.pay-later svg   { color: var(--ic-later); }
/* Η σφραγίδα FREE στη θέση της τιμής. Κεντραρισμένη όπως ήταν το pill. */
.job-freeart { display: flex; justify-content: flex-end; }
/* ⚠ ΣΤΗΛΗ ΠΟΣΩΝ ΜΕ ΣΤΑΘΕΡΗ ΔΕΞΙΑ ΑΚΜΗ (24.09.2026), όπως σε λογιστικό βιβλίο.
   Κεντραρισμένα, τα «90 €», «1.250 €», «100 €» τελείωναν σε τρία διαφορετικά
   σημεία (976/988/982px). Το σύμβολο πληρωμής παίρνει σταθερή θέση 20px
   (emoji 16px ή POS 20px), ώστε να μη σπρώχνει την τιμή. Από 720px και πάνω —
   στο iPhone η στήλη είναι ήδη δεξιά. Τα `align-items` των δύο πλεγμάτων πιο
   κάτω γράφουν `flex-end` για τον ίδιο λόγο. */
@media (min-width: 720px) {
  .job-money-in { justify-content: flex-end; }
  .job-pay { flex: 0 0 20px; width: 20px; justify-content: center; }
}
.job-free {
  display: inline-block; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .1em;
  color: var(--crit); border: 1.5px solid var(--crit); border-radius: var(--r-xs);
  padding: 1px 5px; transform: rotate(-3deg);
}
.job-margin { font-size: var(--fs-2xs); font-weight: 700; }
.job-margin.good { color: var(--ok); }
.job-margin.thin { color: var(--warn); }
.job-margin.bad  { color: var(--crit); }

/* ── 4. Πελάτης ─────────────────────────────────────────────────────────── */
.job-client { min-width: 0; display: flex; flex-direction: column; gap: 0; line-height: 1.3; }
.job-name { font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-phone {
  display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs);
  color: var(--info); font-weight: 600; font-variant-numeric: tabular-nums;
}
.job-phone svg { width: 11px; height: 11px; color: var(--crit); flex: 0 0 auto; }
/* Στο κινητό ο αριθμός είναι ΤΗΛΕΦΩΝΟ, όχι διακοσμητικό: 14px ύψος δεν
   πατιέται εν κινήσει. Το πλάτος υπάρχει ήδη — δίνουμε ύψος. */
@media (hover: none) {
  .job-phone { min-height: 26px; padding-block: 4px; }
  .job-phone svg { width: 13px; height: 13px; }
}
/* ⚠ ΤΡΕΙΣ ΕΝΔΕΙΞΕΙΣ, ΟΧΙ ΜΙΑ. Το κενό ΑΝΑΜΕΣΑ σε ενήλικες/παιδιά/βρέφη είναι
   9px, ενώ εικονίδιο-και-αριθμός δένουν με 4px — αλλιώς με ίδιο κενό παντού
   διαβάζονταν ως έξι ανεξάρτητα σύμβολα και ο αριθμός φαινόταν να ανήκει στο
   ΕΠΟΜΕΝΟ εικονίδιο. Ίδιες αποστάσεις με το `.paxgrp/.paxb` του πρωτοτύπου. */
.job-pax { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: var(--fs-2xs); color: var(--muted); font-weight: 600; }
.job-paxb { display: inline-flex; align-items: center; gap: 4px; }
.job-pax svg { width: 12px; height: 12px; color: var(--faint); flex: 0 0 auto; }

/* ── 5. Οδηγός ──────────────────────────────────────────────────────────── */
.job-crew { display: flex; align-items: center; gap: 8px; min-width: 0; }
.job-crew .av { width: 27px; height: 27px; }
.job-crew-n { min-width: 0; }
/* Το όνομα του οδηγού παίρνει το δικό του χρώμα — ο dispatcher το αναγνωρίζει
   πριν το διαβάσει, όπως στο σημερινό σύστημα. */
.job-driver {
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.job-role { font-size: var(--fs-2xs); color: var(--faint); font-weight: 600; }
.job-crew.none .job-driver { color: var(--warn); font-weight: 600; }
/* ⚠ ΠΑΛΙΑ ΚΡΑΤΗΣΗ ΜΕ 2+ ΑΤΟΜΑ Ή 2+ ΟΧΗΜΑΤΑ (03.10.2026, job-card.js `extras`).
   ΜΟΝΟ όταν υπάρχει: οι κανονικές κάρτες δεν αλλάζουν. ΑΝΑΔΙΠΛΩΝΕΤΑΙ, δεν
   κόβεται: στο κινητό η στήλη του οδηγού είναι ~80px και με αποσιωπητικά
   διαβαζόταν μόνο «2 άτομα — κ…» — έχανε ακριβώς το «κράτα ένα». Η πλήρης
   φράση με το «τι να κάνεις» ζει στο title. */
.job-multi {
  font-size: var(--fs-2xs); font-weight: 700; color: var(--crit); line-height: 1.3;
}
.job-multi svg { width: 11px; height: 11px; vertical-align: -1px; margin-inline-end: 3px; }

/* ── 6. Όχημα ───────────────────────────────────────────────────────────── */
.job-veh { display: flex; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.3; min-width: 0; }
.job-veh img {
  width: 58px; height: 22px; object-fit: contain; display: block;
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] .job-veh img { mix-blend-mode: normal; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .job-veh img { mix-blend-mode: normal; }
}
.job-veh-t { font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.job-veh-p {
  font-size: var(--fs-2xs); font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* ── ΣΥΝΕΡΓΑΤΗΣ (vendor, 03.10.2026): μοντέλο αμαξιού, «από το γραφείο» στη θέση της
   τιμής, τηλέφωνο οδηγού. Τα στοιχεία υπάρχουν ΜΟΝΟ στην κάρτα του συνεργάτη
   (job-card.js `partner`) — οι κάρτες γραφείου/οδηγού δεν αλλάζουν ούτε pixel. */
.job-veh-m {
  font-size: var(--fs-2xs); font-weight: 600; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.job-sell.job-sell-office { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); letter-spacing: 0; }
/* «Χωρίς τιμή» στο γραφείο (03.10.2026): πορτοκαλί σήμα. Μελάνι #805700 στη μέρα (το --warn πάνω στο
   --warn-soft έβγαινε ~3:1 — κάτω από το όριο ανάγνωσης για μικρά γράμματα), --warn στη νύχτα. */
.job-sell.job-sell-noprice {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0; color: #805700;
  background: var(--warn-soft); padding: 2px 8px; border-radius: 999px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .job-sell.job-sell-noprice { color: var(--warn); } }
:root[data-theme="dark"] .job-sell.job-sell-noprice { color: var(--warn); }
.job-crew-tel { font-size: var(--fs-2xs); }
@media (min-width: 1080px) { .job-crew .job-crew-tel { justify-content: center; } }
/* Κάτω από 1080 το όχημα είναι ΓΡΑΜΜΗ (τύπος · πινακίδα · φωτογραφία) και το μοντέλο
   δεν χωρούσε δίπλα («E…») — πέφτει σε δική του σειρά από κάτω, μόνο σε αυτές τις κάρτες. */
@media (max-width: 1079px) {
  .job-veh:has(> .job-veh-m) { flex-wrap: wrap; row-gap: 0; }
  .job-veh > .job-veh-m { order: 4; flex-basis: 100%; min-width: 0; }
}

/* ── Επιτραπέζια διάταξη: έξι στήλες σε μία γραμμή ──────────────────────
   Η ΤΕΛΙΚΗ σειρά του ιδιοκτήτη (01.09.2026, τρίτη διατύπωση): ώρα →
   ΔΙΑΔΡΟΜΗ → ΠΕΛΑΤΗΣ → ΠΛΗΡΩΜΗ → οδηγός → όχημα. Το DOM μένει στη σειρά
   ανάγνωσης του κινητού· εδώ κάθε κελί τοποθετείται ΡΗΤΑ (στήλη ΚΑΙ
   γραμμή). Χωρίς ρητό grid-row, το sparse auto-placement έσπρωχνε σε
   δεύτερη γραμμή όποιο κελί είχε στήλη μικρότερη από το προηγούμενο. */
@media (min-width: 1080px) {
  .job {
    grid-template-columns:
      92px                /* ώρα — χωράει το εύρος της διάθεσης, βλ. .job-time */
      minmax(0, 2.5fr)    /* διαδρομή */
      minmax(0, 1.35fr)   /* πελάτης */
      104px               /* χρήματα */
      minmax(0, 172px)    /* οδηγός */
      96px;               /* όχημα */
    align-items: center; gap: 0 14px; padding: 7px 14px 7px 18px;
  }
  .job-when   { grid-column: 1; grid-row: 1; }
  .job-main   { grid-column: 2; grid-row: 1; }
  .job-client { grid-column: 3; grid-row: 1; }
  .job-money  { grid-column: 4; grid-row: 1; }
  .job-crew   { grid-column: 5; grid-row: 1; }
  .job-veh    { grid-column: 6; grid-row: 1; }
  /* ⚠ Η 7η ΣΤΗΛΗ ΤΟΥ `⋯` ΕΦΥΓΕ (05.09.2026) — δεν υπάρχουν πια κουμπιά στην
     κάρτα. Το σχόλιο πιάνει ΔΕΥΤΕΡΗ ΓΡΑΜΜΗ, στοιχισμένο ΔΕΞΙΑ: εντολή
     ιδιοκτήτη «κάτω δεξιά», και ως κείμενο ώστε να διαβάζεται χωρίς πάτημα. */
  .job-note-row { grid-column: 2 / -1; grid-row: 2; }

  /* Ο οδηγός στοιβάζεται: πρόσωπο ΠΑΝΩ, όνομα από κάτω. Σε πλατιά οθόνη η
     στήλη είναι 172px και το πρόσωπο δίπλα στο όνομα έτρωγε 35px από αυτά —
     τα μεγάλα ονόματα κόβονταν με «…». Στοιβαγμένα, το όνομα παίρνει ΟΛΟ το
     πλάτος και το πρόσωπο μεγαλώνει, που είναι και ο τρόπος που ο dispatcher
     αναγνωρίζει τον οδηγό: από τη φάτσα, όχι από το επώνυμο. */
  /* Η γραμμή «τιμή + τρόπος» ΣΤΟΙΧΙΖΕΤΑΙ ΔΕΞΙΑ (24.09.2026· ήταν κεντραρισμένη):
     σταθερή ακμή ποσών σε όλες τις κάρτες, όπως σε λογιστικό βιβλίο. */
  .job-money { align-items: flex-end; }

  .job-crew { flex-direction: column; align-items: center; gap: 4px; text-align: center; }
  .job-crew .av { width: 34px; height: 34px; }
  .job-crew-n { min-width: 0; max-width: 100%; }
}
/* Ενδιάμεσο: η ΔΙΑΔΡΟΜΗ απλώνεται πρώτη γραμμή· από κάτω ΠΕΛΑΤΗΣ αριστερά
   και ΠΛΗΡΩΜΗ δεξιά του, στην ΙΔΙΑ γραμμή (εντολή ιδιοκτήτη 01.09.2026 —
   η πληρωμή δεν κάθεται πάνω από τον πελάτη). Οδηγός πάνω, όχημα από κάτω. */
@media (min-width: 720px) and (max-width: 1079px) {
  .job { grid-template-columns: 92px minmax(0, 1fr) 100px minmax(0, 170px) 30px; align-items: center; gap: 4px 12px; }
  /* ΟΛΑ τα κελιά ρητά. Με αυτόματη τοποθέτηση, η πέμπτη στήλη για το ⋯ έστελνε
     τον οδηγό σε κελί 100px αντί για 170px και το όνομα κοβόταν. */
  .job-when   { grid-column: 1; grid-row: 1 / span 2; }
  /* Η διαδρομή παίρνει ΚΑΙ τη στήλη της πληρωμής — τα μακριά ονόματα
     ξενοδοχείων χωρούν, και δεν μένει τρύπα πάνω από την τιμή. */
  .job-main   { grid-column: 2 / 4; grid-row: 1; }
  .job-client { grid-column: 2; grid-row: 2; }
  /* Τιμή και εικονίδιο πληρωμής ΣΤΟΙΧΙΖΟΝΤΑΙ ΔΕΞΙΑ (24.09.2026· ήταν
     κεντραρισμένα): σταθερή ακμή ποσών σε όλες τις κάρτες. */
  .job-money  { grid-column: 3; grid-row: 2; align-items: flex-end; }
  .job-crew   { grid-column: 4; grid-row: 1; }
  .job-veh    { grid-column: 4; grid-row: 2; flex-direction: row; align-items: center; gap: 6px; }
  /* ⚠⚠ ΤΟ ΣΧΟΛΙΟ ΘΕΛΕΙ ΡΗΤΗ ΘΕΣΗ ΚΑΙ ΕΔΩ (10.09.2026). Ήταν το ΜΟΝΟ παιδί
     χωρίς `grid-column`, οπότε έπεφτε σε αυτόματη τοποθέτηση και έπιανε ό,τι
     κελί έβρισκε ελεύθερο:
       • διαχειριστής (πλέγμα 4 στηλών, γραμμή 1072) → γραμμή 3, ΣΤΗΛΗ 1 —
         δηλαδή στριμωγμένο στα 92px της ώρας. Μετρημένο: «1 baby seat & 1
         booster» σε 92×34px, κάρτα 96 → 134px.
       • υπόλοιποι ρόλοι (πλέγμα 5 στηλών) → γραμμή 1, ΣΤΗΛΗ 5 — τα 30px που
         κρατούσε το καταργημένο «⋯», δηλαδή κάθετη κορδέλα ~240px ύψος, και
         με το `align-items: center` όλα τα άλλα κελιά κένταραν στη μέση ενός
         σχεδόν άδειου πλαισίου.
     Ο ιδιοκτήτης το είδε στην ΕΚΤΥΠΩΣΗ των Reports («the vertical print
     doesnt show the transfers correctly»): το A4 κάθετο δίνει σελίδα 794px,
     ακριβώς μέσα σε αυτό το εύρος. Το βλέπει ΚΑΙ στην οθόνη του iPad σε
     κατακόρυφη θέση (744-834px) — το iPad δεν φταίει, απλώς πέφτει εδώ.
     Γραμμή 3: οι γραμμές 1-2 είναι πιασμένες (το `.job-when` πιάνει και τις
     δύο). Στήλη `2 / -1` όπως και στο πλέγμα ≥1080, ώστε να μη μπαίνει κάτω
     από την ώρα — και δουλεύει και με τα 4 και με τα 5 tracks. */
  .job-note-row { grid-column: 2 / -1; grid-row: 3; }
  .job > .tactions { grid-column: 5; grid-row: 1 / span 2; justify-self: end; align-self: center; }
}
/* ── ΚΙΝΗΤΟ: ΚΑΡΤΕΣ, όπως στο combined.html ────────────────────────────────
   Όχι μία ατέλειωτη λίστα με γραμμούλες, αλλά ΞΕΧΩΡΙΣΤΕΣ κάρτες με αέρα
   ανάμεσά τους. Και η σειρά ανάγνωσης που είχε το παλιό:

     ΩΡΑ ─────────────────────────────── ΤΙΜΗ
     [δωμάτιο/πτήση]
     ΤΥΠΟΣ · διαδρομή
     πελάτης · τηλέφωνο · άτομα
     οδηγός · όχημα
     ────────────────────────────────────  ⋯

   Η στοίβα «όλα δεξιά από την ώρα» έσφιγγε τα πάντα σε μισή οθόνη και έμοιαζε
   με πίνακα που δεν χώρεσε — όχι με κάρτα.
   ========================================================================== */
/* Το αντίγραφο του τύπου για το κινητό: ΚΡΥΦΟ στον υπολογιστή. Βλ. job-card.js
   («ΓΙΑΤΙ ΔΕΥΤΕΡΟ ΑΝΤΙΓΡΑΦΟ»). */
.job-dir-m { display: none; }

@media (max-width: 719px) {
  /* Το κουτί, το γυαλί και η λωρίδα έρχονται πλέον από τη βασική κάρτα —
     εδώ μένει μόνο η διάταξη και το πιο γενναιόδωρο γέμισμα της αφής. */
  .job {
    /* ⚠ ΔΥΟ ΙΣΕΣ ΑΚΡΕΣ, ΤΥΠΟΣ ΣΤΗ ΜΕΣΗ (07.09.2026). Με `auto … auto` η μεσαία
       στήλη κεντραριζόταν ΑΝΑΜΕΣΑ σε ώρα και τιμή — και επειδή η ώρα πιάνει
       115px και η τιμή 26px, ο τύπος έπεφτε 45px δεξιά από το κέντρο της
       κάρτας. Με ίσα `1fr` στις δύο άκρες, η μέση είναι η ΜΕΣΗ ΤΗΣ ΚΑΡΤΑΣ. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 6px 12px;
    padding: 11px 13px 11px 16px;
  }

  /* Σειρά 1: ώρα αριστερά, ΤΥΠΟΣ στο κέντρο, τιμή δεξιά (07.09.2026, εντολή
     ιδιοκτήτη). Τρεις στήλες μόνο στο κινητό — ο υπολογιστής μένει ως έχει. */
  .job-when  { grid-column: 1; grid-row: 1; }
  /* `align-self: start` — με `center` καθόταν 2px χαμηλότερα από ώρα και τιμή,
     γιατί το κελί είναι ψηλότερο από το κείμενο. Τώρα ίδια γραμμή, ίδιο ύψος. */
  .job-dir-m { display: block; grid-column: 2; grid-row: 1; justify-self: center; align-self: start; min-width: 0; }
  .job-money { grid-column: 3; grid-row: 1; justify-self: end; align-items: flex-end; }
  /* Ο τύπος μέσα στο `.job-main` κρύβεται — αλλιώς θα φαινόταν δύο φορές. */
  .job-head  { display: none; }
  /* ⚠ ΕΚΤΟΣ ΑΝ ΚΟΥΒΑΛΑΕΙ ΚΩΔΙΚΟ (10.09.2026). Ο κωδικός μπαίνει μόνο στα
     Reports (`withRef`) και ΔΕΝ έχει δεύτερη θέση: αν κρυβόταν η κεφαλίδα,
     θα χανόταν σε πλάτος κινητού — ακριβώς το είδος «φαίνεται σε άλλα πλάτη,
     όχι σε αυτό» που μόλις διορθώθηκε στο σχόλιο της κάρτας. Ξαναδείχνουμε
     ΜΟΝΟ τον κωδικό· ο τύπος μένει κρυμμένος γιατί ζει ήδη στο `.job-dir-m`.
     Το `:has()` χρησιμοποιείται ήδη αλλού στο αρχείο (`.card:has(.daystrip)`). */
  .job-head:has(.job-ref) { display: block; }
  .job-head:has(.job-ref) .job-dir { display: none; }
  /* ⚠ ΤΟ `align-items` ΕΙΝΑΙ ΠΛΕΟΝ ΚΑΘΕΤΟ. Όσο το `.job-money-in` ήταν στήλη,
     το `flex-end` το κολλούσε στη ΔΕΞΙΑ άκρη· τώρα που είναι γραμμή, θα
     κατέβαζε το εικονίδιο στο πάτωμα του κειμένου. Τη δεξιά ευθεία την κρατά
     πλέον το `justify-self: end` του `.job-money` από πάνω. */
  .job-money-in { align-items: center; }
  .job-time  { font-size: var(--fs-md); }

  /* Και όλα τα υπόλοιπα σε ΟΛΟΚΛΗΡΟ το πλάτος, το ένα κάτω από το άλλο. */
  .job-main   { grid-column: 1 / -1; grid-row: 2; }
  .job-client { grid-column: 1 / -1; grid-row: 3; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  /* ⚠ ΟΔΗΓΟΣ ΚΑΙ ΟΧΗΜΑ ΣΤΗΝ ΙΔΙΑ ΓΡΑΜΜΗ (05.09.2026, εντολή ιδιοκτήτη
     «στο κινητό το όχημα να κάθεται δεξιά από τον οδηγό»). Ήταν δύο ξεχωριστές
     γραμμές (4 και 5) και η κάρτα έτρωγε ύψος χωρίς λόγο: και τα δύο κελιά
     είναι κοντά, και μαζί λένε μία πληροφορία — ποιος πάει με τι.
     Έτσι ήταν και στο `reference/combined.html` (`.tassign-row`). */
  .job-crew {
    /* ΤΡΕΙΣ στήλες: εικόνα · τύπος · πινακίδα. Η τρίτη χρειάζεται επειδή ο
       τύπος και η πινακίδα είναι ΞΕΧΩΡΙΣΤΑ παιδιά — με δύο στήλες γίνονταν
       grid items στην ίδια στήλη και η πινακίδα έπεφτε σε δική της γραμμή. */
    display: grid; grid-template-columns: 34px auto minmax(0, 1fr);
    align-items: center; gap: 0 8px;
    grid-row: 4; grid-column: 1;
  }
  /* ⚠ ΤΟ ΟΧΗΜΑ ΣΕ ΜΙΑ ΓΡΑΜΜΗ: ΤΥΠΟΣ → ΠΙΝΑΚΙΔΑ → ΦΩΤΟΓΡΑΦΙΑ (05.09.2026,
     εντολή ιδιοκτήτη). Ήταν πλέγμα με τη φωτογραφία ΑΡΙΣΤΕΡΑ και την πινακίδα
     να πέφτει σε δεύτερη γραμμή κάτω από τον τύπο — δύο γραμμές ύψος για τρία
     κοντά στοιχεία.
     ⚠ Η ΣΕΙΡΑ ΑΛΛΑΖΕΙ ΜΕ `order`, ΟΧΙ ΣΤΟ DOM. Στον υπολογιστή η στήλη είναι
     στοιβαγμένη με τη φωτογραφία ΠΑΝΩ, και αλλαγή στο DOM θα την αναποδογύριζε
     κι εκεί. Το `order` ζει μόνο μέσα σε αυτό το media query.
     Η φωτογραφία μπορεί να είναι `.qp` (επιλογέας αλλαγής οχήματος), σκέτο
     `img`, ή `.job-veh-none` όταν λείπει — και τα τρία πάνε τελευταία. */
  .job-veh {
    /* ⚠ `flex-direction: row` ΡΗΤΑ. Ο βασικός κανόνας του `.job-veh` είναι
       `column` (στοιβαγμένη στήλη στον υπολογιστή) και ΔΕΝ ακυρώνεται από το
       σκέτο `display: flex` — τα τρία στοιχεία έμεναν το ένα κάτω από το άλλο
       παρότι όλα τα υπόλοιπα εδώ ίσχυαν. */
    display: flex; flex-direction: row; align-items: center;
    gap: 6px; flex-wrap: nowrap;
    grid-row: 4; grid-column: 2; justify-self: end; min-width: 0;
  }
  .job-veh > .job-veh-t { order: 1; }
  .job-veh > .job-veh-p { order: 2; }
  .job-veh > .qp,
  .job-veh > img,
  .job-veh > .job-veh-none { order: 3; }
  /* Το πρόσωπο κεντράρεται μέσα στη στήλη των 34px· η φωτογραφία του αμαξιού
     τη γεμίζει, γιατί το αμάξωμα είναι που το κάνει αναγνωρίσιμο. */
  .job-crew .av { justify-self: center; }
  .job-veh img  { width: 34px; height: 20px; }
  .job-veh-none { justify-self: center; }
  /* Το όνομα πιάνει ό,τι απομένει. */
  .job-crew-n { grid-column: 2 / -1; }
  /* Οι γραμμές 4-6 πιάνουν ΟΛΟ το πλάτος των τριών στηλών. */
  .job-crew { grid-column: 1 / 2; }
  .job-veh  { grid-column: 2 / -1; }
  /* Κενό κελί οχήματος δεν κρατά σειρά για τον εαυτό του. */
  .job-veh:empty { display: none; }
  /* Το σχόλιο: δική του γραμμή στο τέλος, στοιχισμένο δεξιά όπως ζητήθηκε. */
  .job-note-row { grid-column: 1 / -1; grid-row: 5; }

  .job > .tactions.compact,
  .job > .tactions {
    grid-column: 1 / -1; grid-row: 6; justify-content: flex-end;
    margin-top: 3px; padding-top: 8px; border-top: 1px solid var(--line-2);
  }

  /* Το δωμάτιο/πτήση ως σήμα κάτω από την ώρα, όπως τα «metab» του παλιού. */
  .job-mark {
    display: inline-flex; margin-top: 4px; padding: 2px 8px;
    background: var(--card-2); border-radius: var(--r-pill);
  }
  .job-route { font-size: var(--fs-md); }
}

/* ── Πού κάθεται το ⋯ ──────────────────────────────────────────────────────
   Είναι κελί του πλέγματος, οπότε αλλάζει θέση ανά πλάτος όπως στο
   combined.html: ΔΙΠΛΑ στη διαδρομή όταν υπάρχει χώρος, ΚΑΤΩ ΚΑΤΩ στο κινητό
   με γραμμή από πάνω. Στη μέση της κάρτας δεν στέκει πουθενά. */
/* Το reset ΜΟΝΟ σε πλατιά οθόνη. Χωρίς το media query, αυτός ο κανόνας —
   που στο αρχείο έρχεται ΜΕΤΑ τα breakpoints — ακύρωνε τη γραμμή που χωρίζει
   τις ενέργειες στην κάρτα του κινητού. */
@media (min-width: 720px) { .job > .tactions { margin: 0; padding: 0; border-top: 0; } }
/* Διακριτικά όσο σκανάρεις τη μέρα, καθαρά μόλις σταθείς στη γραμμή. */
.job > .tactions.compact { opacity: .4; transition: opacity var(--t-fast); }
.job:hover .tactions.compact,
.job:focus-within .tactions.compact { opacity: 1; }
@media (hover: none) { .job > .tactions.compact { opacity: 1; } }
/* Και αυτό ΜΟΝΟ σε πλατιά οθόνη — στο κινητό η κάρτα θέλει τη γραμμή της. */
@media (min-width: 720px) { .tactions.compact { gap: 4px; padding-top: 0; margin-top: 0; border-top: 0; } }
@media (max-width: 719px) { .tactions.compact { gap: 4px; } }
/* Το ⋯ είναι πλέον το ΜΟΝΟ κουμπί της κάρτας — δεν υπάρχει λόγος να είναι
   22px όπως όταν ήταν ένα από έξι. Και σε οθόνη αφής μεγαλώνει κι άλλο: εκεί
   το πατάει αντίχειρας μέσα σε αυτοκίνητο, όχι ποντίκι σε γραφείο. */
.tactions.compact .tact { width: 26px; height: 26px; border-radius: var(--r-xs); }
.tactions.compact .tact svg { width: 14px; height: 14px; }
@media (hover: none) {
  .tactions.compact .tact { width: 36px; height: 36px; }
  .tactions.compact .tact svg { width: 18px; height: 18px; }
}
.tactions.compact .tact.mydata { width: auto; padding: 0 7px; }
.tactions.compact .tact-img { height: 12px; }

/* ── ΣΕΙΡΑ ΚΟΥΜΠΙΩΝ ΣΤΟΝ ΠΑΤΟ ΤΗΣ ΚΑΡΤΑΣ, ΜΕ ΠΑΤΗΜΑ (26.09.2026) ────────────────
   Εντολή ιδιοκτήτη: *«remember how we had the buttons on the bottom of the
   transfer cards? i want them to appear like that whenever we click on a
   transfer card. add a nice motion»*. Χτίζεται από το `toggleJobBar`
   (job-actions.js). ΜΟΝΟ εικονίδια (επιλογή του), Διαγραφή κόκκινη τελευταία.
   ⚠ ΔΙΚΗ ΤΗΣ ΚΛΑΣΗ, ΟΧΙ `.tactions`: οι παλιοί κανόνες `.job > .tactions` την
   έβαζαν στη στήλη του καταργημένου «⋯» (720-1079) και ξεθώριαζαν (`.compact`).
   Θέση: ΤΕΛΕΥΤΑΙΑ γραμμή του πλέγματος σε κάθε πλάτος — κινητό 6, μεσαίο 4,
   υπολογιστής 3 (μετά το σχόλιο). Το αρνητικό `margin-top` τρώει το κενό
   γραμμής του πλέγματος (6 / 4 / 0px), αλλιώς το κουτί θα «πηδούσε» τόσα pixel
   στην αρχή της κίνησης, πριν αρχίσει να ψηλώνει. */
.job > .job-bar {
  grid-column: 1 / -1; grid-row: 6; margin-top: -6px; min-width: 0;
  /* Το `scrollIntoView` (job-actions.js) σταματά ΠΑΝΩ από το «+» (52px + η
     απόστασή του + η ζώνη του home), όχι από κάτω του. */
  scroll-margin-bottom: calc(var(--s5) + 52px + 12px + var(--safe-b));
}
@media (min-width: 720px) and (max-width: 1079px) { .job > .job-bar { grid-row: 4; margin-top: -4px; } }
@media (min-width: 1080px) { .job > .job-bar { grid-row: 3; margin-top: 0; } }
/* ⚠ ΚΑΡΤΑ ΧΩΡΙΣ ΣΧΟΛΙΟ = ΜΙΑ ΓΡΑΜΜΗ ΠΙΟ ΠΑΝΩ (έλεγχος 26.09). Η γραμμή του
   σχολίου (5 στο κινητό, 3 στο μεσαίο) μένει ΑΔΕΙΑ, και μια άδεια γραμμή πλέγματος
   κρατά ΚΑΙ ΤΑ ΔΥΟ κενά της: η κάρτα πηδούσε 12px στην αρχή της κίνησης και τα
   κουμπιά κάθονταν 6px χαμηλότερα απ' ό,τι σε κάρτα με σχόλιο. Στον υπολογιστή
   το κενό γραμμής είναι 0 — δεν χρειάζεται. (`:has()` όπως αλλού στο αρχείο.) */
@media (max-width: 719px) { .job:not(:has(> .job-note-row)) > .job-bar { grid-row: 5; } }
@media (min-width: 720px) and (max-width: 1079px) { .job:not(:has(> .job-note-row)) > .job-bar { grid-row: 3; } }
.job-bar-in {
  position: relative; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;
  gap: 6px; padding: 12px 0 2px;
}
/* Η χρυσή γραμμή πάνω από τα κουμπιά — σβήνει στις άκρες, όχι σκληρό όριο. */
.job-bar-in::before {
  content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 14%, var(--gold) 86%, transparent);
  opacity: .5; transform-origin: left center; pointer-events: none;
}
.job-bar .tact { width: 30px; height: 30px; }
.job-bar .tact svg { width: 15px; height: 15px; }
/* Στο κινητό τα πατάει αντίχειρας εν κινήσει — ίδιο 36-38px με τους επιλογείς. */
@media (hover: none) {
  .job-bar .tact { width: 38px; height: 38px; }
  .job-bar .tact svg { width: 18px; height: 18px; }
}
.job-bar .tact.mydata { width: auto; padding: 0 9px; }
.job-bar .tact .logo-word { --logo-h: 12px; }
/* Κλειδωμένη (π.χ. Επεξεργασία εκτός ημέρας): σβηστή αλλά πατιέται — λέει γιατί. */
.job-bar .tact.locked { opacity: .4; }
/* ⚠ ΤΑ ΚΟΥΜΠΙΑ ΑΡΙΣΤΕΡΑ, Η ΔΙΑΓΡΑΦΗ ΤΕΡΜΑ ΔΕΞΙΑ (26.09.2026, εντολή ιδιοκτήτη
   «all the buttons should be on the far left except of the delete one»). Το
   `auto` την σπρώχνει στην άλλη άκρη — μακριά από τα κουμπιά της δουλειάς,
   ώστε να μην πατιέται κατά λάθος. Αν η σειρά τυλιχτεί, μένει δεξιά. */
.job-bar .job-bar-del { margin-inline-start: auto; }
/* (03.10.2026, έλεγχος στα 375px) 7 κουμπιά έστελναν τη Διαγραφή σε ΔΕΥΤΕΡΗ γραμμή: 278px κουμπιά
   + 6 κενά × 6px = 314 > 312 διαθέσιμα. Τότε το 7ο ήταν το 🧪 της δοκιμής myDATA.
   (04.10.2026) Το 🧪 ΑΦΑΙΡΕΘΗΚΕ και ήρθε το WhatsApp — ο κανόνας κλειδώνει πια στο ΠΛΗΘΟΣ, όχι σε
   συγκεκριμένο κουμπί: σε κινητό, σειρά με 7+ κουμπιά → κενό 4px, κουμπιά 36px (μέσα στο 36-38 των
   επιλογέων) = 290px· με 8 (άφιξη του admin: + Πινακίδα) κενό 3px = 323px, χωρά από τα 390px. Το
   myDATA κρατά το πλάτος του λογοτύπου. Σειρές ως 6 κουμπιά μένουν ακριβώς όπως ήταν. */
@media (hover: none) and (max-width: 440px) {
  .job-bar-in:has(> .tact:nth-child(7)) { gap: 4px; }
  .job-bar-in:has(> .tact:nth-child(7)) > .tact { height: 36px; }
  .job-bar-in:has(> .tact:nth-child(7)) > .tact:not(.mydata) { width: 36px; }
  .job-bar-in:has(> .tact:nth-child(8)) { gap: 3px; }
}

/* Η ΚΙΝΗΣΗ: το ύψος (0 → φυσικό) το κάνει η JS· εδώ η γραμμή που «ζωγραφίζεται»
   αριστερά→δεξιά και τα κουμπιά που ανεβαίνουν ΕΝΑ-ΕΝΑ (35ms το καθένα, από τη
   σειρά τους `--i`). Όλα μαζί ~¼ δευτερολέπτου. */
.job-bar.in .job-bar-in::before { animation: jobbar-line .34s cubic-bezier(.22,.7,.3,1) both; }
.job-bar.in .tact { animation: jobbar-btn .26s cubic-bezier(.22,.7,.3,1) both; animation-delay: calc(60ms + var(--i, 0) * 35ms); }
@keyframes jobbar-line { from { transform: scaleX(0); opacity: 0; } }
@keyframes jobbar-btn { from { opacity: 0; transform: translateY(7px) scale(.94); } }
@media (prefers-reduced-motion: reduce) {
  .job-bar.in .job-bar-in::before, .job-bar.in .tact { animation: none; }
}
@media print { .job-bar { display: none !important; } }
/* ⚠ ΤΟ ΠΡΑΣΙΝΟ «ΣΤΑΛΘΗΚΕ» ΕΦΥΓΕ (01.09.2026). Το κουμπί φοράει πια το
   αυθεντικό σήμα myDATA και η κατάσταση λέγεται ΜΟΝΟ με το περίγραμμα:
   γκρι = καμία απόδειξη, μπλε = εκδόθηκε (components.css). Πράσινο εδώ
   σήμαινε «επιτυχία» και νικούσε το μπλε λόγω σειράς φόρτωσης. */

/* Όσο είναι ανοιχτό το μενού, η γραμμή ανεβαίνει πάνω από τις επόμενες. */
.job:has(.tmore.open) { z-index: 40; }

/* ── Φόρμα κράτησης ─────────────────────────────────────────────────────── */
.bf-money {
  display: grid; grid-template-columns: 1fr; gap: var(--s3);
  padding: var(--s4); border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--gold-soft), transparent 70%), var(--card-2);
  border: 1px solid var(--gold-soft2);
}
@media (min-width: 640px) { .bf-money { grid-template-columns: repeat(3, 1fr); } }
.bf-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding-top: var(--s3); margin-top: var(--s1); border-top: 1px dashed var(--line); grid-column: 1 / -1; }
.bf-total b { font-family: var(--serif); font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }

.assign-row {
  display: grid; grid-template-columns: 1fr; gap: var(--s2);
  padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
}
@media (min-width: 720px) { .assign-row { grid-template-columns: 1.4fr 1fr .9fr .9fr auto; align-items: end; } }
.assign-row .btn-icon { align-self: center; }

.pickrow { display: flex; gap: var(--s2); overflow-x: auto; padding: 2px 2px var(--s2); }

/* ── Οθόνη οδηγού ─────────────────────────────────────────────────────────
   Οι κανόνες `.drv-job/.drv-head/.drv-time/.drv-route/.drv-body/.drv-line` και
   τα `.drv-steps/.drv-step` ΕΦΥΓΑΝ την 01.09.2026: ο οδηγός βλέπει πλέον την
   ίδια κάρτα με το γραφείο (`.job`) και δεν έχει κουμπιά βημάτων.
   ⚠ Το `.drv-img` στο voucher.css είναι ΑΛΛΟ πράγμα (φωτογραφία οδηγού πάνω
   στο voucher) και ΜΕΝΕΙ. */

/* ── Πίνακας ανά οδηγό / όχημα ──────────────────────────────────────────── */
.matrix { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--card); }
table.mx { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
table.mx th, table.mx td { border: 1px solid var(--line-2); padding: 0; }
table.mx thead th { background: var(--card-2); font-size: var(--fs-2xs); font-weight: 700; color: var(--muted);
  padding: 6px 2px; text-align: center; font-variant-numeric: tabular-nums; }
table.mx thead th.weekend { background: var(--bg1); }
table.mx th.name {
  text-align: start; padding: 6px 12px; position: sticky; inset-inline-start: 0; z-index: 2;
  background: var(--card); min-width: 168px; font-size: var(--fs-sm); color: var(--ink); font-weight: 700;
}
table.mx thead th.name { background: var(--card-2); z-index: 3; }
.mx-cell { width: 100%; height: 30px; border: 0; background: none; font-size: var(--fs-xs); font-weight: 800;
  color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mx-cell:hover { outline: 2px solid var(--gold); outline-offset: -2px; }
.mx-cell.l1 { background: rgba(208,171,100,.13); }
.mx-cell.l2 { background: rgba(208,171,100,.26); }
.mx-cell.l3 { background: rgba(208,171,100,.42); }
/* ⚠ Το πιο φορτωμένο κελί της πλάκας — αυτό που ψάχνει το μάτι — ήταν το ΜΟΝΟ
   που δεν διαβαζόταν: λευκό πάνω σε 60% χρυσό = 1,88:1.

   ⚠ ΕΔΩ ΤΟ ΜΕΛΑΝΙ ΑΛΛΑΖΕΙ ΜΕ ΤΟ ΘΕΜΑ, ΚΑΙ ΕΙΝΑΙ ΣΩΣΤΟ. Η ράμπα θερμότητας
   (l1-l4) είναι σταθερό `rgba(208,171,100,…)` και ΔΕΝ ακολουθεί το θέμα: στο
   φως πέφτει πάνω σε κρεμ και βγαίνει λαμπερή, στη νύχτα πάνω σε σκούρο μπλε
   και βγαίνει καφετιά. Άρα ναυτικό μελάνι δουλεύει ΜΟΝΟ στο φως (μετρήθηκε
   9,57:1) και κόβεται στη νύχτα (2,98:1). Τα l1-l3 ήδη κληρονομούν το ανοιχτό
   `--ink-2` της βάσης στη νύχτα· το l4 ήταν το μόνο που το παρέκαμπτε. */
.mx-cell.l4 { background: rgba(208,171,100,.60); color: #0a192f; }   /* ΟΧΙ --action-ink: έγινε λευκό στις 06.09 */
:root[data-theme="dark"] .mx-cell.l4 { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mx-cell.l4 { color: var(--ink); }
}
table.mx td.total, table.mx th.total { background: var(--card-2); font-weight: 800; text-align: center;
  font-variant-numeric: tabular-nums; padding: 0 8px; min-width: 62px; }

/* ── Voucher ─────────────────────────────────────────────────────────────────
   Το ίδιο το φύλλο ζει στο voucher.css — είναι το πρωτότυπο σχέδιο και δεν
   το πειράζουμε. Εδώ μόνο το κάδρο μέσα στο modal και η εκτύπωση.          */
.voucher-frame {
  color-scheme: light;   /* προεπισκόπηση χαρτιού — μένει ανοιχτή πάντα */
  background: #e9e6df; padding: var(--s3); border-radius: var(--r-sm);
  overflow-x: auto;
}
/* Το φύλλο σχεδιάστηκε στα 794px (A4 στα 96dpi). Σε στενή οθόνη το
   σμικρύνουμε ολόκληρο αντί να σπάσουμε τη διάταξή του.

   🔴 ΕΔΩ ΗΤΑΝ ΤΟ BUG ΤΟΥ ΚΙΝΗΤΟΥ (διορθώθηκε 15.09.2026). Υπήρχε:
       @media (max-width: 900px) { .voucher-frame .esvsheet {
           transform: scale(.62); height: 0; } }
   Το `height: 0` ΜΗΔΕΝΙΖΕ ΤΟ ΦΥΛΛΟ σε κάθε οθόνη κάτω από 900px — δηλαδή σε
   ΚΑΘΕ κινητό. Ο ιδιοκτήτης το ανέφερε ως «πατάω voucher και δεν βλέπω
   τίποτα»: δεν έσκαγε τίποτα, το χαρτί απλώς είχε μηδέν ύψος.
   Μάλλον μπήκε για να μαζέψει το κενό που αφήνει το `transform` — γιατί το
   `transform` ΔΕΝ αλλάζει τον χώρο που πιάνει το στοιχείο στη διάταξη. Σωστό
   πρόβλημα, καταστροφική λύση.

   Τώρα η σμίκρυνση γίνεται με ΜΕΤΡΗΣΗ, στο `fitToWidth()` του voucher.js: το
   φύλλο κλιμακώνεται όσο ακριβώς χρειάζεται για να χωρέσει, και το ύψος του
   κάδρου ορίζεται ρητά στο σμικρυμένο. Σταθερό όρισμα .62 δεν θα δούλευε
   ούτως ή άλλως — άλλο iPhone SE, άλλο iPad. */
/* Το ενδιάμεσο κουτί κρατά τις ΣΜΙΚΡΥΜΕΝΕΣ διαστάσεις. Χωρίς αυτό, το κάδρο
   έβλεπε το ασμίκρυντο παιδί των 794×1067 και κρατούσε τεράστια περιοχή
   κύλισης — και επειδή είναι `border-box` με γέμισμα, έκοβε 23px από κάτω. */
.voucher-box { margin: 0 auto; overflow: hidden; }
.voucher-frame .esvsheet {
  width: 794px; margin: 0 auto; transform-origin: top center;
  background: #F6F2EA; box-shadow: var(--shadow);
}

@media print {
  .esvsheet.printing { width: 794px; margin: 0 auto; box-shadow: none; }
  /* ⚠ ΤΟ `@page` ΕΦΥΓΕ ΑΠΟ ΕΔΩ (10.09.2026) — ΜΗΝ ΤΟ ΞΑΝΑΒΑΛΕΙΣ.
     Είναι ΚΑΘΟΛΙΚΟ: ένα `margin: 0` γραμμένο για ΑΥΤΟ το φύλλο μηδένιζε το
     περιθώριο σε ΚΑΘΕ εκτύπωση της εφαρμογής. Μπαίνει πλέον δυναμικά από τον
     `printSheet()` (views/voucher.js), μόνο όση ώρα τυπώνεται φύλλο. */
}

/* ── Μικρές βοήθειες οθονών ─────────────────────────────────────────────── */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.toolbar .search { flex: 1 1 220px; }
/* Τα φίλτρα ημερομηνίας στο μετρημένο τους πάτωμα — δες --date-w στο
   tokens.css. Καρφωμένα στα 148px ξεχείλιζαν πάνω στο επόμενο φίλτρο. */
.toolbar .filter-date { flex: 0 0 auto; width: var(--date-w); }
/* Στο κινητό ΟΛΟΚΛΗΡΗ γραμμή η καθεμία: δύο δίπλα-δίπλα σε 341px βγάζουν
   166px, κάτω από το πάτωμα ακόμη και με μηδενικό γέμισμα. Ίδια απόφαση με
   τον επιλογέα διαστήματος (components.css, `.rangefield`). */
@media (max-width: 719px) { .toolbar .filter-date { flex: 1 1 100%; width: auto; } }
/* Η λίστα ειδικότητας δίπλα στην αναζήτηση. */
.toolbar .field-inline { flex: 1 1 210px; min-width: 0; }
.toolbar .field-inline .sel { width: 100%; }
/* ⚠ Στο κινητό παίρνει ΟΛΟΚΛΗΡΗ γραμμή. Δίπλα στο «Ενεργοί / Όλοι» δεν χωρά:
   στα 402px το κείμενο κοβόταν στη μέση του αριθμού («Όλες οι ειδικότητες (2…»)
   που διαβάζεται σαν χαλασμένο, όχι σαν συντόμευση. Μία γραμμή παραπάνω, αλλά
   συνολικά κερδίσαμε τρεις: τα 13 chips που αντικατέστησε έπιαναν τέσσερις. */
@media (max-width: 719px) {
  .toolbar .field-inline { flex: 1 1 100%; }
}
.section-gap { margin-top: var(--s6); }
.money-hidden { color: var(--faint); font-style: italic; }
/* Ποσό που ΕΜΕΙΣ χρωστάμε, όχι που μας χρωστούν — αντίθετη κατεύθυνση, και
   πρέπει να ξεχωρίζει με μια ματιά μέσα σε στήλη με θετικά. */
.money-neg { color: var(--crit); }
.expiry-soon { color: var(--warn); font-weight: 700; }
.expiry-past { color: var(--crit); font-weight: 700; }

/* ── Έξοδα ───────────────────────────────────────────────────────────────────
   Μεταφέρθηκε η διάταξη από το combined.html: φόρμα καταχώρησης πάνω, μετά
   φίλτρα με διάστημα και λωρίδα οδηγών, μετά το σύνολο και η λίστα.

   ΡΟΛΟΙ — ίδιοι κανόνες με το παλιό:
     body.role-driver #expFormDriverWrap  → κρυφό (γράφει μόνο για τον εαυτό του)
     body.role-driver #expDriverStripWrap → κρυφό (δεν φιλτράρει άλλους)
     body.role-driver .exp-act            → κρυφό (ΔΕΝ επεξεργάζεται, ΔΕΝ σβήνει)
   ========================================================================== */
.exp-wrap { display: flex; flex-direction: column; gap: var(--s4); }

.exp-form {
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: var(--s5);
}
/* Η μπάρα που ανοιγοκλείνει τη φόρμα. Είναι <button> και όχι <div> ώστε να
   δουλεύει με πληκτρολόγιο και να το ανακοινώνει το VoiceOver (aria-expanded).
   Στα 44px ύψος πιάνεται άνετα με δάχτυλο. */
/* ⚠ ΦΑΙΝΕΤΑΙ ΟΤΙ ΕΙΝΑΙ ΚΟΥΜΠΙ (07.09.2026, εντολή ιδιοκτήτη). Ήταν σκέτο
   κείμενο με ένα βελάκι: κανείς δεν καταλάβαινε ότι ανοίγει η φόρμα. Κόκκινο
   περίγραμμα — το ίδιο κόκκινο της κύριας ενέργειας — χωρίς γέμισμα, ώστε να
   μη διεκδικεί την προσοχή του «+» αλλά να διαβάζεται ως πατούμενο. */
.exp-form-h {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  width: 100%; min-height: 44px;
  padding: var(--s3) var(--s4);
  border: 1.5px solid var(--action); border-radius: var(--r-md);
  background: none;
  cursor: pointer; text-align: start; color: inherit;
  transition: background var(--t-btn) var(--spring), border-color var(--t-btn) var(--spring);
}
.exp-form-h:hover { background: var(--action-ring); }
.exp-form-h:focus-visible { box-shadow: 0 0 0 3px var(--action-ring); }
.exp-form-h .exp-form-t { color: var(--action); }
.exp-form-h.open { margin-bottom: var(--s4); }
.exp-form-t {
  font-size: var(--fs-md); font-weight: 700; letter-spacing: -.01em;
}
/* Το βελάκι είναι δύο πλευρές τετραγώνου στραμμένες 45° — δεν υπάρχει chevron
   στο εικονοστάσιο και δεν αξίζει να μπει ένα για ένα σημείο. */
.exp-form-caret {
  width: 8px; height: 8px; flex: 0 0 auto; margin-inline-end: 4px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-fast);
}
.exp-form-h.open .exp-form-caret { transform: rotate(225deg) translate(-2px, -2px); }
.exp-form-h .exp-form-caret { border-color: var(--action); }
/* ⚠ ΤΟ ΠΛΕΓΜΑ ΑΚΟΛΟΥΘΕΙ ΤΟ ΔΟΧΕΙΟ, ΟΧΙ ΤΟ VIEWPORT.
   Είχε σταθερές στήλες ανά μέγεθος οθόνης — και δεν έβλεπε ότι το ίδιο το
   πλέγμα στενεύει κατά 236px μόλις ανοίξει το μενού. Μετρημένο ΠΡΙΝ, με το
   μενού ανοιχτό: 146px ανά στήλη σε οθόνη 1280 και 179px στα 1440, δηλαδή
   έξι στήλες εκεί που χωρούσαν τέσσερις. Το `input[type=date]` δεν κατεβαίνει
   κάτω από ~194px στο Safari, οπότε ξεχείλιζε πάνω στην «Ώρα» — αυτό έβλεπε ο
   ιδιοκτήτης στον 13άρη. Δες `--date-w` στο tokens.css.
   Τώρα: 1 στήλη στο κινητό, 3 σε tablet, 4 στα 1280, 5 στα 1440. */
.exp-grid {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--date-w), 100%), 1fr));
}
/* Στο κινητό η ημερομηνία και η ώρα κάθονται ΔΙΠΛΑ-ΔΙΠΛΑ, όπως και στη φόρμα
   κράτησης· τα υπόλοιπα πεδία παίρνουν ολόκληρη σειρά.
   341px δεν υπάρχουν εδώ: το πλέγμα των εξόδων είναι 297px στα 375, άρα
   297 − 12 − 108 = 177px για την ημερομηνία. Κάτω από τα 200, γι' αυτό
   μηδενίζεται το οριζόντιο γέμισμα και κεντράρεται το κείμενο — ο ίδιος
   τρόπος με τον επιλογέα διαστήματος, που κατεβάζει το πάτωμα κατά ~24px. */
@media (max-width: 519px) {
  /* ⚠ ΕΔΩ ΤΟ ΠΛΑΤΟΣ ΔΕΝ ΒΓΑΙΝΕΙ ΑΠΟ ΤΗΝ ΗΜΕΡΟΜΗΝΙΑ — ΔΕΝ ΥΠΑΡΧΕΙ.
     Ο ιδιοκτήτης ζήτησε (08.09.2026) «κάνε το κουτί της ημερομηνίας μικρότερο
     για να χωρέσει καλύτερα η ώρα» και στις δύο φόρμες. Στη φόρμα κράτησης
     βγήκαν 35px· εδώ ΟΧΙ: το πλέγμα των εξόδων είναι 297px στα 375 και η
     ημερομηνία ήταν ΗΔΗ 177px, δηλαδή 3px πάνω από το πάτωμα των 174 (δες
     --date-w). Κάθε pixel που θα έφευγε από εκεί θα ξεχείλιζε σε iPhone.

     Άρα το πλάτος ήρθε από την ΚΑΡΤΑ: το οριζόντιο γέμισμα 22px → 12px μόνο σε
     κινητό. Σε οθόνη 375px τα 44px περιθωρίου ήταν πολυτέλεια — κερδίζουμε
     20px και τα παίρνει ΟΛΑ η ώρα, μαζί με 4px από το οριζόντιο κενό.
     Αποτέλεσμα: ώρα 108px → 131px, ημερομηνία 177px → 180px (πρακτικά ίδια,
     με 6px περιθώριο ασφαλείας αντί για 3). */
  .exp-form { padding: var(--s5) var(--s3); }
  .exp-grid { grid-template-columns: 180px minmax(0, 1fr); column-gap: var(--s2); }
  .exp-grid > * { grid-column: 1 / -1; }
  .exp-grid > .g-date { grid-column: 1; }
  .exp-grid > .g-time { grid-column: 2; }
  .exp-grid > .g-date .inp { padding-inline: 2px; text-align: center; }
}
/* Κάτω από 360px δεν βγαίνει με κανέναν συνδυασμό — μετρημένο: το πλέγμα
   είναι 242px, δηλαδή 122px για την ημερομηνία. Στοιβάζονται, και το γέμισμα
   επιστρέφει γιατί το πεδίο έχει πια ολόκληρη τη γραμμή. */
@media (max-width: 359px) {
  .exp-grid { grid-template-columns: minmax(0, 1fr); }
  .exp-grid > .g-date, .exp-grid > .g-time { grid-column: 1 / -1; }
  .exp-grid > .g-date .inp { padding-inline: 12px; text-align: start; }
}
.exp-grid label, .exp-note-l {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  font-size: var(--fs-sm); font-weight: 500; color: var(--muted);
}
.exp-note-l { margin-top: var(--s3); }
.exp-actions { display: flex; gap: var(--s2); margin-top: var(--s4); }

/* ── Αρχειοθήκη τιμολογίων ─────────────────────────────────────────────────
   Η γραμμή ξαναχρησιμοποιεί το `.list-row`· εδώ μένει μόνο ό,τι διαφέρει. */
/* ⚠⚠ ΤΟ ΟΝΟΜΑ ΦΑΙΝΕΤΑΙ ΠΑΝΤΑ ΟΛΟΚΛΗΡΟ — ΕΝΤΟΛΗ ΙΔΙΟΚΤΗΤΗ («make sure that
   never happens»). Είχα βάλει `white-space: nowrap` + αποσιωπητικά· σε πλάτος
   κινητού το `.grow` συρρικνωνόταν και το όνομα ΕΞΑΦΑΝΙΖΟΤΑΝ.
   ΜΕΤΡΗΜΕΝΟ ΠΡΙΝ, στα 375px: «Ξενοδοχειακές Επιχειρήσεις Κρήτης Α.Ε. — Vasia
   Sea Retreat & Spa» έπαιρνε **29px** ενώ χρειαζόταν **472px**. Ακόμη και το
   «Vasia Resort» κοβόταν (67 από 87px).

   ΔΥΟ ΣΚΕΛΗ, ΚΑΙ ΤΑ ΔΥΟ ΧΡΕΙΑΖΟΝΤΑΙ:
   1. Η ΓΡΑΜΜΗ ΤΥΛΙΓΕΤΑΙ. Με βάση 160px, μόλις δεν μένει τόσος χώρος για το
      όνομα, ποσό και κουμπιά πέφτουν σε ΔΕΥΤΕΡΗ σειρά και το όνομα παίρνει
      ολόκληρη την πρώτη. Χωρίς media query — μετράει ο ΧΩΡΟΣ, όχι η οθόνη.
   2. ΤΟ ΙΔΙΟ ΤΟ ΟΝΟΜΑ ΤΥΛΙΓΕΤΑΙ. `overflow-wrap: anywhere` ώστε ακόμη και μια
      ατέλειωτη λέξη χωρίς κενά να σπάει αντί να ξεχειλίζει.
   ΜΗΝ ξαναβάλεις `nowrap`/`ellipsis` εδώ: το όνομα είναι ΤΟ ΜΟΝΟ αναγνωριστικό
   της εγγραφής — δεν υπάρχει αριθμός τιμολογίου ούτε ημερομηνία. */
.inv-row { gap: var(--s2) var(--s3); flex-wrap: wrap; }
.inv-row > .grow { display: flex; flex-direction: column; gap: 2px; flex: 1 1 160px; min-width: 0; }
.inv-row > .grow > b { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.inv-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-file { display: inline-flex; align-items: center; gap: 4px; color: var(--gold-ink); }
.inv-file svg { width: 13px; height: 13px; }
/* ⚠ ΤΟ ΑΠΛΗΡΩΤΟ ΞΕΧΩΡΙΖΕΙ ΜΕ ΛΩΡΙΔΑ, ΟΧΙ ΜΕ ΦΟΝΤΟ. Σε λίστα τριάντα γραμμών
   ένα χρωματιστό φόντο ανά γραμμή γίνεται καραμέλα και δεν ξεχωρίζει τίποτα·
   η λωρίδα στην άκρη διαβάζεται με μια κάθετη ματιά. Ίδια λογική με τη λωρίδα
   της κάρτας μεταφοράς. */
.inv-row.is-unpaid { border-inline-start: 3px solid var(--warn); }
/* ⚠⚠ ΣΤΑΘΕΡΟ ΠΛΑΤΟΣ — ΕΙΝΑΙ ΘΕΜΑ ΑΣΦΑΛΕΙΑΣ, ΟΧΙ ΣΤΟΙΧΙΣΗΣ (10.09.2026).
   Το κουμπί αλλάζει ΕΤΙΚΕΤΑ σε κάθε πάτημα, και με `white-space: nowrap` το
   πλάτος του ακολουθούσε τη λέξη. Στα Εξόδων «Δεν πληρώσαμε» (144,9px) γίνεται
   «Πληρώσαμε» (120,2px): η γραμμή μαζεύει 25px και ο ΚΑΔΟΣ ΔΙΑΓΡΑΦΗΣ έρχεται
   15,7px ΜΕΣΑ στην περιοχή που μόλις πατήθηκε — ένα δεύτερο, λίγο αργοπορημένο
   πάτημα σβήνει το τιμολόγιο. Στα Εσόδων το ίδιο πάτημα ΜΕΓΑΛΩΝΕΙ το κουμπί
   (109,6 → 118,8) και σπρώχνει τον κάδο ΜΑΚΡΙΑ, γι' αυτό δεν ενόχλησε ποτέ.
   Το 9,25rem χωράει και τις τέσσερις ετικέτες (μετρημένη μεγαλύτερη: 144,9px)
   και είναι σε rem, άρα ακολουθεί τη γραμματοσειρά αντί να την καρφώνει. */
.inv-paid { flex: 0 0 auto; min-width: 9.25rem; justify-content: flex-start; }
/* Πληρωμένο = ήσυχο πράσινο. Απλήρωτο = το προεπιλεγμένο κουμπί· ΔΕΝ βάφεται
   κόκκινο, γιατί το κόκκινο σε αυτή την εφαρμογή σημαίνει «κύρια ενέργεια». */
.inv-paid.is-paid { border-color: var(--ok); color: var(--ok); }
.inv-paid.is-paid svg { color: var(--ok); }

.exp-filter {
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: var(--s4) var(--s5);
}
.exp-range { display: flex; gap: var(--s4); flex-wrap: wrap; align-items: flex-end; }
/* Ίδιο πλάτος σε Chrome και Safari. Χωρίς αυτό το ένα τα έδειχνε 155px και το
   άλλο 194px — δηλαδή άλλη γραμμή φίλτρων σε κάθε μηχανή. Το `flex-wrap`
   αναλαμβάνει το κινητό: 200 + 200 δεν χωρούν σε 297px και τυλίγονται. */
.exp-range .f-date { flex: 0 0 var(--date-w); }
.exp-range label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: var(--fs-sm); font-weight: 500; color: var(--muted);
}
.exp-strip-wrap { margin-top: var(--s3); }

.exp-total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); padding: 0 var(--s1);
}
.exp-total .lbl { font-size: var(--fs-base); color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
.exp-total .val { font-size: var(--fs-2xl); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: var(--h-track); }

.exp-list { display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; }
.exp-row {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--card); padding: 10px 13px; border-bottom: 1px solid var(--line-2);
}
.exp-row:last-child { border-bottom: 0; }
.exp-row:hover { background: var(--card-2); }
.exp-icon {
  width: 36px; height: 36px; border-radius: var(--r-sm); flex: 0 0 auto;
  background: var(--gold-soft2); color: var(--gold-ink); display: grid; place-items: center;
}
.exp-icon svg { width: 18px; height: 18px; }
.exp-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.exp-cat-l { font-weight: 600; font-size: var(--fs-base); color: var(--ink); }
.exp-meta {
  font-size: var(--fs-xs); color: var(--muted);
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
}
.exp-meta .edrv { display: inline-flex; align-items: center; gap: 5px; }
.exp-meta .edrv .av { width: 18px; height: 18px; font-size: 8px; }
/* Λογότυπο συνεργάτη-οδηγού (ui.js `staffPic`): ΦΑΡΔΥ κουτί, όχι τετράγωνο 18px —
   με το padding 3px του `.av.logo` ένα λογότυπο 2,5:1 έπεφτε στα 12×5px, μια
   κηλίδα. 36×18 με 1px αέρα: ίδιο ύψος γραμμής, διαβάζεται. */
.exp-meta .edrv .av.logo { width: 36px; padding: 1px; }
.exp-note-t {
  font-size: var(--fs-xs); color: var(--faint); font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.exp-amt {
  font-weight: 700; font-size: var(--fs-md); color: var(--ink);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.exp-acts { display: flex; gap: 5px; flex: 0 0 auto; }
.exp-act {
  width: 28px; height: 28px; border-radius: var(--r-xs);
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  display: grid; place-items: center; transition: all var(--t-fast);
}
.exp-act svg { width: 14px; height: 14px; }
.exp-act.edit:hover { border-color: var(--gold-l); color: var(--gold-ink); }
.exp-act.del:hover { border-color: var(--crit); color: var(--crit); }

.exp-bars { display: flex; flex-direction: column; gap: 7px; }
.exp-bar-row { display: grid; grid-template-columns: minmax(0, 140px) 1fr auto; gap: var(--s3); align-items: center; }
.exp-bar-l { font-size: var(--fs-sm); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-bar-t { height: 7px; border-radius: var(--r-pill); background: var(--card-2); overflow: hidden; }
.exp-bar-f { height: 100%; border-radius: var(--r-pill); background: var(--gold); }
.exp-bar-v { font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.exp-pager { display: flex; align-items: center; justify-content: center; gap: var(--s4); }
.exp-pager:empty { display: none; }
.exp-page-info { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Ο ρόλος του συνδεδεμένου γράφεται στο <body> από το app.js. Οι κλάσεις
   role-admin / role-vendor υπάρχουν για μελλοντικούς κανόνες·
   σήμερα μόνο η role-driver κρύβει κάτι. */
body.role-admin, body.role-vendor { /* δεσμευμένες */ }

/* Ο οδηγός βλέπει τα δικά του έξοδα και ΔΕΝ τα αλλάζει. */
body.role-driver .exp-driver-field,
body.role-driver .exp-strip-wrap,
body.role-driver .exp-acts { display: none !important; }

/* ── ΚΙΝΗΤΟ: η διαδρομή ΔΕΝ κόβεται ποτέ ────────────────────────────────────
   Σε 375px τα δύο ονόματα μοιράζονταν μία γραμμή με αποσιωπητικά, οπότε ο
   δισπάτσερ διάβαζε «Grecotel Cape S… → Athens Air…» — δηλαδή τίποτα χρήσιμο
   όταν δύο ξενοδοχεία αρχίζουν ίδια. Η παραλαβή παίρνει δική της γραμμή, ο
   προορισμός την επόμενη με το βελάκι, και ό,τι δεν χωράει ΤΥΛΙΓΕΤΑΙ.
   ========================================================================== */
@media (max-width: 719px) {
  /* Οι δύο τοποθεσίες παραμερίζουν προς τα δεξιά και αφήνουν πίσω τους ένα
     λουρί 16px: κουκκίδα · γραμμή · βέλος · κουκκίδα. Δεν είναι διακόσμηση —
     είναι το ίδιο σχήμα που έχει κάθε εφαρμογή μεταφοράς, και το διαβάζεις
     πριν διαβάσεις τις λέξεις: ΑΠΟ εδώ, ΠΡΟΣ εκεί. Κερδίζουμε και την
     ευθυγράμμιση: χωρίς το inline «→» τα δύο ονόματα ξεκινούν στο ίδιο x,
     οπότε η κάρτα διαβάζεται σαν στήλη αντί για σπασμένη πρόταση. */
  .job-route {
    --rail: 16px;    /* πλάτος λουριού */
    --dot: 7px;      /* διάμετρος κουκκίδας */
    --half: .65em;   /* μισή γραμμή κειμένου — line-height 1.3 */
    padding-inline-start: var(--rail);
    flex-wrap: wrap; row-gap: 6px; align-items: flex-start;
  }
  .job-route > span {
    white-space: normal; overflow: visible; text-overflow: clip;
    overflow-wrap: anywhere;
  }
  /* Η παραλαβή κρατά ολόκληρη γραμμή· ο προορισμός παίρνει την επόμενη και
     αφήνει τη σημείωση να καθίσει δίπλα του. Και τα δύο γίνονται άγκυρες
     (`position: relative`) για τα σημάδια του λουριού. */
  .job-route > .rt-a { flex: 1 0 100%; position: relative; }
  .job-route > .rt-b { position: relative; }
  /* Το inline «→» φεύγει: τη φορά τη λέει πλέον το βέλος του λουριού, και
     χωρίς αυτό ο προορισμός ξεκινά ακριβώς κάτω από την παραλαβή. */
  .job-route > .arr { display: none; }
  .job-note { align-self: center; }

  /* Κούφια η παραλαβή, γεμάτος ο προορισμός — ξεχωρίζεις αρχή από τέλος χωρίς
     να διαβάσεις. Γκρι και τα δύο: το χρώμα στη γραμμή το κρατά η λωρίδα
     κατάστασης, δεν το μοιράζεται. */
  .job-route > .rt-a::before,
  .job-route > .rt-b::before {
    content: ''; position: absolute; z-index: 1;
    width: var(--dot); height: var(--dot); border-radius: 50%;
    inset-inline-start: calc(var(--rail) / -2 - var(--dot) / 2);
    top: calc(var(--half) - var(--dot) / 2);
  }
  .job-route > .rt-a::before { border: 1.5px solid var(--faint); background: transparent; }
  .job-route > .rt-b::before { background: var(--muted); }

  /* Η γραμμή δένεται στο ΚΑΤΩ άκρο της παραλαβής, όχι σε σταθερό ύψος: όταν
     το «Grecotel Cape Sounio & Spa Resort» τυλιχτεί σε δύο σειρές, τεντώνεται
     μόνη της αντί να κοπεί στη μέση της λέξης. */
  .job-route.has-b > .rt-a::after {
    content: ''; position: absolute;
    width: 1.5px; border-radius: 1px; background: var(--faint); opacity: .4;
    inset-inline-start: calc(var(--rail) / -2 - .75px);
    top: calc(var(--half) + var(--dot) / 2);
    bottom: calc(var(--dot) / 2 - var(--half) + 3px);
  }

  /* Η μύτη του βέλους — δύο πλευρές ενός τετραγώνου στραμμένες 45°, ακριβώς
     πάνω από τη γεμάτη κουκκίδα. */
  .job-route > .rt-b::after {
    content: ''; position: absolute;
    width: 5px; height: 5px;
    border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint);
    transform: rotate(45deg);
    inset-inline-start: calc(var(--rail) / -2 - 2.5px);
    top: calc(var(--half) - var(--dot) / 2 - 9px);
  }
}

/* ── ΔΙΑΧΕΙΡΙΣΤΗΣ: όλες οι ενέργειες απλωμένες στον πάτο της κάρτας ─────────
   Χωρίς ⋯. Ο ιδιοκτήτης τα πατάει δεκάδες φορές τη μέρα και το μενού ήταν ένα
   κλικ παραπάνω κάθε φορά. Οι υπόλοιποι ρόλοι κρατούν το ⋯.

   Η ειδικότητα (.job > .tactions.flat) είναι μεγαλύτερη από τους κανόνες ανά
   πλάτος παραπάνω, οπότε νικά όποια σειρά κι αν έχουν στο αρχείο.
   ========================================================================== */
.job > .tactions.flat {
  grid-column: 1 / -1; grid-row: auto;
  justify-self: stretch; align-self: auto;
  justify-content: flex-start; flex-wrap: wrap; gap: 6px;
  margin-top: 4px; padding-top: 8px;
  border-top: 1px solid var(--line-2);
}
/* Με τη μπάρα σε δική της σειρά, η στενή στήλη που κρατούσαμε για το ⋯ θα
   έμενε άδεια σε κάθε κάρτα — τη δίνουμε πίσω στο περιεχόμενο. */
@media (min-width: 1080px) {
  /* Ίδια σειρά και αναλογία με το βασικό πλέγμα (διαδρομή → πελάτης →
     πληρωμή) — μόνο χωρίς την 7η στήλη του ⋯, που εδώ έγινε flat μπάρα. */
  body.role-admin .job {
    grid-template-columns:
      92px minmax(0, 2.5fr) minmax(0, 1.35fr) 104px minmax(0, 172px) 96px;
  }
}
@media (min-width: 720px) and (max-width: 1079px) {
  body.role-admin .job { grid-template-columns: 92px minmax(0, 1fr) 100px minmax(0, 170px); }
}
/* Η μπάρα δεν ξεθωριάζει: δεν είναι διακριτικό μενού πια, είναι εργαλεία. */
.job > .tactions.flat.compact { opacity: 1; }

/* Η διαγραφή ξεχωρίζει με το χρώμα της, όχι με τη θέση της. */
.tact.danger svg { color: var(--crit); }
.tact.danger:hover { border-color: var(--crit); background: var(--crit-soft); }

/* ── Συνεργάτες ομαδοποιημένοι κατά είδος ───────────────────────────────────
   Μία ενότητα ανά είδος, με τη σειρά των PARTNER_KINDS. Ο τίτλος κουβαλάει
   πλήθος και τη χειρότερη κατάσταση εγγράφων της ομάδας. */
.kindgroup { margin-bottom: var(--s6); }
.kindgroup:last-child { margin-bottom: 0; }
.kindgroup-h { margin-bottom: var(--s3); align-items: center; }
.row-gap { display: inline-flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

/* ── Κάρτες επιβράβευσης ────────────────────────────────────────────────────
   Ένα panel ανά ΑΤΟΜΟ, μέσα του οι κάρτες του σε αναλογία πιστωτικής κάρτας
   (1.585:1 — η ίδια που έχει το esdocs). */
.pgrid { display: flex; flex-direction: column; gap: 14px; }

.pcard {
  background: var(--card-glass); border: 1px solid var(--line-2);
  border-radius: var(--r); overflow: hidden;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--shadow-sm);
}
.pchead {
  display: flex; align-items: center; gap: var(--s3);
  padding: 12px var(--s4); background: var(--gold-soft);
  border-bottom: 1px solid var(--gold-soft2);
}
.pname {
  font-family: var(--serif); font-size: var(--fs-lg); font-weight: 600;
  letter-spacing: -.015em; color: var(--navy); min-width: 0;
}
:root[data-theme="dark"] .pname { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pname { color: var(--ink); }
}

.pcards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px; padding: 14px;
}
.pc-empty { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--muted); }

.mcard {
  background: var(--plate); border: 1px solid var(--line-2);
  border-radius: var(--r-md); overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.mcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* ⚠ ΧΩΡΙΣ ΔΙΚΗ ΤΗΣ ΚΑΜΠΥΛΗ. Είχε `border-radius:16px`, οπότε στρογγύλευαν και
   οι ΚΑΤΩ γωνίες — εκεί που η όψη ακουμπά το σώμα της κάρτας — και έμενε μια
   εγκοπή. Το κόψιμο το κάνει ο γονιός (`.mcard` έχει `overflow:hidden`), όπως
   ακριβώς στο esdocs: πάνω γωνίες στρογγυλές, κάτω ίσιες.
   Αναλογία 1.585/1 = ISO/IEC 7810 ID-1, η αναλογία πιστωτικής κάρτας. */
.art {
  position: relative; aspect-ratio: 1.585 / 1;
  background-size: cover; background-position: center;
  background-image: linear-gradient(135deg, #F3E7C9 0%, #E4CF9C 55%, #D8BD80 100%);
  display: flex; align-items: flex-start; justify-content: center;
}
/* Όσο διαβάζεται το αρχείο: πιο ξεπλυμένο, ώστε «φορτώνει» και «δεν υπάρχει»
   να μη μοιάζουν ίδια — το ίδιο κάνει το esdocs με το `.art.loading`. */
.art.loading { background-image: linear-gradient(135deg, #EFE8D8 0%, #E2D8BE 100%); }
.placeholder-lbl {
  margin-top: 18px; font-family: var(--serif); font-size: var(--fs-base);
  letter-spacing: .12em; color: rgba(10,25,47,.55); text-align: center; padding: 0 10px;
}
/* Το τετράγωνο τσεκ πάνω-αριστερά στην όψη της κάρτας.
   ⚠ ΟΧΙ `.pick` — αυτό είναι ΗΔΗ chip στο components.css:210.
   ⚠ `color-scheme: light` γιατί κάθεται πάνω σε ΣΤΑΘΕΡΑ ανοιχτό ντεγκραντέ:
      χωρίς αυτό, στη νύχτα ο browser το ζωγραφίζει σκούρο και εξαφανίζεται. */
.art .cardpick {
  color-scheme: light;
  position: absolute; inset-inline-start: 8px; inset-block-start: 8px;
  width: 22px; height: 22px; border-radius: 6px; margin: 0;
  accent-color: var(--gold); cursor: pointer;
}

.mbody { display: flex; flex-direction: column; gap: 9px; padding: 11px 13px 13px; }

/* ── Η ΟΘΟΝΗ «QR CODES» (views/qr-codes.js) ─────────────────────────────────
   Ίδιο μοτίβο με τις Bonus Cards από πάνω: η ίδια η αφίσα στην κορυφή της
   κάρτας, και από κάτω ΜΟΝΟ ο τίτλος. Ολόκληρη η κάρτα είναι σύνδεσμος.

   ⚠ Η ΑΝΑΛΟΓΙΑ ΔΕΝ ΕΙΝΑΙ ΤΟΥ `.art`. Εκείνο είναι 1.585/1 (πιστωτική κάρτα)·
   οι αφίσες είναι **Α4 ΚΑΤΑΚΟΡΥΦΕΣ** — 595×842pt, μετρημένο στο MediaBox και
   των τριών. Με οριζόντια αναλογία και `cover` θα φαινόταν μια λωρίδα από τη
   μέση και **το QR θα κοβόταν**, δηλαδή η κάρτα θα ήταν άχρηστη.

   ⚠ `contain` ΚΑΙ ΟΧΙ `cover`: ακόμη και με σωστή αναλογία, το `cover` κόβει
   στα υπο-εικονοστοιχεία. Σε αφίσα που ο κόσμος ΣΑΡΩΝΕΙ, μια κομμένη άκρη του
   QR το χαλάει. Το λευκό φόντο από κάτω γεμίζει ό,τι περισσέψει.            */
.qr-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Η κάρτα είναι ΔΟΧΕΙΟ. Μέσα της το `.qr-send` (κουμπί, η κύρια ενέργεια) και
   το `.qr-open` (σύνδεσμος για το PDF). Κουμπί και όχι σύνδεσμος στην κύρια
   ενέργεια: το πάτημα ΣΤΕΛΝΕΙ, δεν πλοηγεί. */
.qr-card {
  position: relative;
  background: var(--plate); border: 1px solid var(--line-2);
  border-radius: var(--r-md); overflow: hidden;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.qr-card:hover, .qr-card:focus-within {
  transform: translateY(-3px); box-shadow: var(--shadow-lg);
  border-color: var(--gold);
}

/* Το κουμπί γεμίζει την κάρτα και δεν μοιάζει με κουμπί — η κάρτα ΕΙΝΑΙ το
   κουμπί. Μηδενίζουμε ό,τι βάζει ο browser από μόνος του. */
.qr-send {
  display: block; width: 100%; padding: 0; margin: 0;
  border: 0; background: none; color: inherit; font: inherit;
  text-align: start; cursor: pointer;
}
.qr-send:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.qr-send[disabled] { opacity: .55; cursor: progress; }

/* Το «Άνοιγμα» κάθεται πάνω στην αφίσα, διακριτικά, και δυναμώνει στο πέρασμα. */
.qr-open {
  position: absolute; z-index: 2; inset-block-start: 8px; inset-inline-end: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-xs);
  border: 1px solid var(--line-2); background: var(--card-glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  color: var(--ink-2); opacity: 0; transition: opacity var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.qr-open svg { width: 16px; height: 16px; }
.qr-card:hover .qr-open, .qr-open:focus-visible { opacity: 1; }
.qr-open:hover { color: var(--gold-ink); border-color: var(--gold); text-decoration: none; }
/* Στην αφή δεν υπάρχει πέρασμα — εκεί φαίνεται πάντα. */
@media (hover: none) { .qr-open { opacity: 1; } }

.qr-art {
  position: relative; aspect-ratio: 1 / 1.414;
  background-color: #fff;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  background-image: linear-gradient(135deg, #F3E7C9 0%, #E4CF9C 55%, #D8BD80 100%);
  display: flex; align-items: flex-start; justify-content: center;
}
/* Όσο διαβάζεται το αρχείο: πιο ξεπλυμένο, ώστε «φορτώνει» και «απέτυχε» να
   μη μοιάζουν ίδια — ίδια σύμβαση με το `.art.loading`. */
.qr-art.loading { background-image: linear-gradient(135deg, #EFE8D8 0%, #E2D8BE 100%); }
.qr-art.noart { background-image: linear-gradient(135deg, #F3E7C9 0%, #E4CF9C 55%, #D8BD80 100%); }

.qr-body { padding: 11px 13px 13px; display: flex; align-items: center; gap: var(--s3); }
/* ⚠ `--ink` ΚΑΙ ΟΧΙ `--navy`. Το `--navy` είναι #24405f και ΔΕΝ αλλάζει στο
   σκούρο θέμα — μετρήθηκε **1,60:1** πάνω στη νυχτερινή κάρτα, δηλαδή ο τίτλος
   ήταν σχεδόν αόρατος. Το `--ink` ακολουθεί το θέμα. */
.qr-title {
  font-family: var(--serif); font-size: var(--fs-md); color: var(--ink);
  line-height: 1.25;
}

/* Η υπόδειξη λέει ΤΙ ΘΑ ΓΙΝΕΙ με το πάτημα — χωρίς αυτή, μια κάρτα που δεν
   ανοίγει αλλά στέλνει είναι έκπληξη. */
.qr-hint {
  margin-inline-start: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-2xs); font-weight: 600;
  color: var(--faint);
  transition: color var(--t-fast);
}
.qr-hint svg { width: 14px; height: 14px; }
.qr-card:hover .qr-hint { color: var(--gold-ink); }

@media (prefers-reduced-motion: reduce) {
  .qr-card:hover { transform: none; }
}
.mcompany { font-family: var(--serif); font-size: var(--fs-md); color: var(--navy); }
:root[data-theme="dark"] .mcompany { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mcompany { color: var(--ink); }
}
.mnumrow { display: flex; align-items: center; gap: var(--s2); }
.mcode {
  font-family: var(--serif); font-size: var(--fs-md); letter-spacing: .05em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.mbtns { display: flex; gap: var(--s2); }

.cards-print { width: 100%; margin-top: 14px; }
.cards-print:disabled { opacity: .55; }

/* Η γραμμή κάρτας μέσα στη φόρμα του ατόμου. */
.ferryrow .docmain { display: flex; flex-direction: column; gap: var(--s2); }

/* ── Τιμές ──────────────────────────────────────────────────────────────────
   Ο τιμοκατάλογος του esdocs. Κουμπιά κατηγορίας από πάνω, pills υπο-κατηγορίας
   από κάτω, και κάρτες τριών στηλών. Οι αριθμοί στοιχίζονται με tabular-nums —
   μια στήλη τιμών που χορεύει δεν διαβάζεται. */
.rate-cats { display: flex; gap: var(--s2); flex-wrap: wrap; }
.rate-btn {
  flex: 1; min-width: 104px; padding: 11px var(--s4);
  font-family: var(--serif); font-size: var(--fs-md); font-weight: 500;
  color: var(--ink-2); background: var(--glass); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); cursor: pointer;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.rate-btn:hover { border-color: var(--gold); color: var(--ink); }
/* ⚠ ΤΟ ΠΕΡΙΓΡΑΜΜΑ ΤΟΥ ΕΠΙΛΕΓΜΕΝΟΥ ΑΚΟΛΟΥΘΕΙ ΤΟ ΚΕΙΜΕΝΟ, ΟΧΙ ΤΟ ΓΕΜΙΣΜΑ.
   Το esdocs γράφει `border-color: var(--heading)` — και το `--heading` του
   αλλάζει με το θέμα: navy στην ημέρα (ίδιο με το γέμισμα, άρα αόρατο) και
   #eef3fb στη νύχτα, δηλαδή ΑΣΠΡΟ ΠΕΡΙΓΡΑΜΜΑ. Εδώ έγραφε `var(--primary)`
   και στα δύο, οπότε στη νύχτα το περίγραμμα είχε ΤΟ ΙΔΙΟ χρώμα με το γέμισμα
   (#24405f) και το επιλεγμένο κουμπί χανόταν μέσα στο σκούρο φόντο.
   Το `--ink` μας είναι το αντίστοιχο του `--heading` (#e9eef7 στη νύχτα). */
.rate-btn.active {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 6px 18px rgba(10, 25, 47, .18);
}
/* Δύο κανόνες, όχι ένας — ίδιο μοτίβο με το φόντο του `body`: η ρητή επιλογή
   νύχτας πιάνει πάντα, το «αυτόματο» μόνο μέσα από το media query. */
:root[data-theme="dark"] .rate-btn.active { border-color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rate-btn.active { border-color: var(--ink); }
}

.rate-subs { display: flex; gap: var(--s2); flex-wrap: wrap; }
.rate-subbtn {
  padding: 6px 14px; font-size: var(--fs-base); font-weight: 500;
  color: var(--muted); background: transparent;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.rate-subbtn:hover { color: var(--ink); }
.rate-subbtn.active {
  background: var(--gold-soft2); border-color: var(--gold); color: var(--gold-text);
}

.rate-card {
  border: 1px solid var(--line-2); border-radius: var(--r);
  overflow: hidden; background: var(--plate);
}
.rate-th, .rate-tr {
  display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px;
  gap: var(--s3); align-items: center; padding: 11px var(--s4);
}
.rate-card.cols3 .rate-th,
.rate-card.cols3 .rate-tr { grid-template-columns: minmax(0, 1fr) 66px 66px 66px; }

.rate-th {
  background: var(--primary); color: #fff;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .02em;
}
.rate-card.cols3 .rate-th { font-size: var(--fs-xs); }
.rate-th .right, .rate-tr .rt-v { text-align: end; }

.rate-tr { border-top: 1px solid var(--line-2); font-size: var(--fs-base); }
.rate-tr.zebra { background: var(--plate-2); }
.rate-card.cols3 .rate-tr { font-size: var(--fs-sm); }
.rt-label { min-width: 0; }
.rt-from { font-size: var(--fs-2xs); font-weight: 700; color: var(--faint); }
/* Οι σημειώσεις είναι γραμμένες με μικρό («ιδιωτική, με ξεναγό») — κεφαλαίο
   μόνο το πρώτο γράμμα, όπως ο τίτλος από πάνω (ήταν ΟΛΑ κεφαλαία ως 24.09). */
.rt-note { font-size: var(--fs-xs); color: var(--muted); }
.rt-note::first-letter { text-transform: uppercase; }
.rt-v { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.rt-wide { text-align: start; color: var(--muted); }

/* Μία γραμμή ανά κατάλογο είναι η «κύρια» διαδρομή — το αεροδρόμιο. */
.rate-tr.hi { background: var(--gold-soft2); }
.rate-tr.hi .rt-label { font-family: var(--serif); font-weight: 700; color: var(--navy); }
:root[data-theme="dark"] .rate-tr.hi .rt-label { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rate-tr.hi .rt-label { color: var(--ink); }
}
.rate-tr.hi .rt-v { font-size: var(--fs-lg); color: var(--gold-text); font-weight: 600; }

.rate-sub {
  font-size: var(--fs-sm);
  color: var(--gold-text); font-weight: 600; margin-top: var(--s5);
}
.rate-foot { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s3); }

/* ── ΕΠΕΞΕΡΓΑΣΙΑ ΤΙΜΟΚΑΤΑΛΟΓΩΝ (rates.js, 12.09.2026) ────────────────────────
   Εντολή ιδιοκτήτη: «a pencil icon somewhere hidden». Οι τιμές αλλάζουν ΜΙΑ
   φορά τον χρόνο — το κουμπί δεν δικαιούται μόνιμη θέση στο μάτι. */
.rate-bar { display: flex; justify-content: flex-end; min-height: 30px; }
.rate-bar.on { display: block; }
/* ⚠ ΞΕΘΩΡΙΑΣΜΕΝΟ, ΟΧΙ ΚΡΥΜΜΕΝΟ. Με `display:none` μέχρι το hover δεν θα
   υπήρχε ΚΑΘΟΛΟΥ σε οθόνη αφής, όπου δεν υπάρχει hover — και το iPad είναι η
   κύρια συσκευή του γραφείου. Έτσι φαίνεται αμυδρά πάντα και πατιέται. */
.rate-pencil { opacity: .32; transition: opacity var(--t-fast); }
.rate-pencil:hover, .rate-pencil:focus-visible { opacity: 1; }

.rate-editbar {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  align-items: center; justify-content: space-between;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--gold); border-radius: var(--r-sm);
  background: var(--gold-soft2);
}
.rate-editmsg { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.rate-editico { display: inline-flex; color: var(--gold-text); }

/* Τα «+»: ίδιο σχήμα με τα διπλανά τους αλλά ΔΙΑΚΕΚΟΜΜΕΝΑ — λένε «εδώ
   προστίθεται», δεν είναι επιλογή καταλόγου που μπορείς να διαλέξεις. */
.rate-btn.rate-add, .rate-subbtn.rate-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px dashed var(--line); color: var(--muted); background: transparent;
  box-shadow: none;
}
.rate-btn.rate-add { flex: 0 0 auto; min-width: 0; }
.rate-btn.rate-add:hover, .rate-subbtn.rate-add:hover { color: var(--ink); border-color: var(--gold); }
.rate-add svg { width: 14px; height: 14px; }

.rate-ed { margin-top: var(--s3); }
.rate-edhead { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; }
.rate-edhead .rate-f { flex: 1 1 240px; }
.rate-edgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); }

.rate-f { display: block; }
.rate-f + .rate-f, .rate-edcols, .rate-edrows { margin-top: var(--s3); }
.rate-flab {
  display: block; margin-bottom: 4px;
  font-size: var(--fs-2xs);
  color: var(--muted);
}
.rate-edsubs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.rate-edsub { display: flex; align-items: center; gap: 2px; }
.rate-edsub .inp { width: 150px; }
.rate-edcols { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.rate-edcols .inp { width: 96px; }

/* ⚠ ΜΙΑ ΓΡΑΜΜΗ ΜΕΝΕΙ ΜΙΑ ΓΡΑΜΜΗ — ΚΥΛΑ, ΔΕΝ ΑΝΑΔΙΠΛΩΝΕΤΑΙ. Ο ιδιοκτήτης
   συγκρίνει τιμές ΚΑΘΕΤΑ (τι πληρώνει ο ίδιος προορισμός στα τρία κλιμάκια).
   Αν τα κελιά έσπαγαν σε δεύτερη σειρά σε στενή οθόνη, θα χανόταν ακριβώς
   αυτή η στοίχιση — και τα λάθη σε τιμοκατάλογο βγαίνουν στο τιμολόγιο. */
.rate-edrows { overflow-x: auto; }
.rate-edrow {
  display: flex; gap: var(--s2); align-items: center;
  padding: 3px 0; min-width: 560px;
}
.rate-edrow .inp { flex: 1 1 110px; min-width: 0; }
.rate-edrow .inp.rate-wide { flex: 2 1 180px; }
/* Οι τιμές στοιχίζονται δεξιά και με σταθερό πλάτος ψηφίου, ώστε το «150» και
   το «90» να ευθυγραμμίζονται όπως στον τυπωμένο πίνακα. */
.rate-edrow .inp.rate-num {
  flex: 0 0 82px; text-align: end; font-variant-numeric: tabular-nums;
}
.rate-edrow > .btn-icon { flex: 0 0 auto; }
/* ⚠ Η ΛΑΒΗ ΕΙΝΑΙ ΦΤΙΑΓΜΕΝΗ ΓΙΑ ΚΑΡΤΑ, ΟΧΙ ΓΙΑ ΓΡΑΜΜΗ. Στο `components.css`
   είναι `position:absolute` με `opacity:0`, κολλημένη πάνω δεξιά στην κάρτα
   και ορατή στο hover της. Μέσα σε γραμμή πίνακα αυτό σημαίνει ότι ΟΛΕΣ οι
   λαβές στοιβάζονται αόρατες στην ίδια γωνία της κάρτας και καμία δεν πιάνεται
   — μετρήθηκε: `opacity 0`, πλάτος 26px, εκτός ροής. Εδώ ξαναμπαίνει στη ροή
   και φαίνεται μόνιμα, αμυδρά. */
.rate-edrow > .grip { position: static; flex: 0 0 auto; opacity: .5; }
.rate-edrow:hover > .grip, .rate-edrow > .grip:focus-visible { opacity: 1; }

@media (max-width: 620px) {
  .rate-th, .rate-tr { grid-template-columns: minmax(0, 1fr) 72px 72px; }
  .rate-card.cols3 .rate-th,
  .rate-card.cols3 .rate-tr { grid-template-columns: minmax(0, 1fr) 52px 52px 52px; gap: var(--s2); }
}

/* ── Analytics: κατάταξη εσόδων ─────────────────────────────────────────────
   Οριζόντιες μπάρες, χωρίς βιβλιοθήκη. Τρεις στήλες: όνομα · μπάρα · νούμερα.
   Στο κινητό η μπάρα πέφτει κάτω από το όνομα — σε 402px μια μπάρα δίπλα σε
   δύο κείμενα δεν αφήνει πλάτος ούτε στο ένα ούτε στο άλλο. */
/* ⚠ Τα πλακίδια ΧΡΕΙΑΖΟΝΤΑΙ πλέγμα. Γράφτηκαν αρχικά με μια κλάση
   `.stats-row` που ΔΕΝ ΥΠΑΡΧΕΙ πουθενά στο CSS, οπότε στοιβάζονταν σε τρεις
   ολόσωμες κάρτες και έσπρωχναν την κατάταξη κάτω από τη μέση της οθόνης.
   `auto-fit` αντί για σταθερές στήλες: τρία στην οθόνη, δύο στο τηλέφωνο,
   χωρίς δεύτερο breakpoint. */
.anl-totals {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s3); margin-bottom: var(--s4);
}

/* ── Το γράφημα ─────────────────────────────────────────────────────────────
   Τα χρώματα ΔΕΝ γράφονται μέσα στο SVG: μπαίνουν από εδώ με μεταβλητές, ώστε
   να γυρίζουν μόνα τους σε νύχτα/ημέρα όπως όλα τα υπόλοιπα. */
.anl-card { padding: var(--s5); }
.anl-chart { width: 100%; overflow: hidden; }
/* ⚠ ΚΑΜΙΑ `width: 100%` ΕΔΩ. Το SVG ζωγραφίζεται σε αληθινά pixel και ορίζει
   μόνο του το `width`. Με `width: 100%` το CSS το ΤΕΝΤΩΝΕΙ από το viewBox του
   στο πλάτος του δοχείου — δηλαδή μεγεθύνει και τα γράμματα, που είναι
   ακριβώς αυτό που η μέτρηση σε pixel υπάρχει για να αποφύγει. */
.anl-svg { display: block; }
.anl-grid { stroke: var(--line-2); stroke-width: 1; shape-rendering: crispEdges; }
.anl-bar { fill: var(--gold); }
.anl-bar:hover { fill: var(--gold-l); }
/* ⚠ ΜΠΑΡΑ ΣΕ ΤΡΙΑ ΧΡΩΜΑΤΑ (06.09.2026, εντολή ιδιοκτήτη: «όχι χρυσό — πράσινο
   Clients Directly, πορτοκαλί POS, μπλε Accounting Office»). Κάθε τμήμα είναι
   δικό του <rect> με 2px κενό ανάμεσα (το φόντο φαίνεται), ώστε τα όρια να
   διαβάζονται και χωρίς χρώμα. Το `.anl-bar` με χρυσό ΜΕΝΕΙ για την όψη
   «πλήθος» (όταν ο ρόλος δεν βλέπει χρήματα) — εκεί δεν υπάρχει τι να σπάσει. */
.anl-seg { transition: filter .12s; }
.anl-seg:hover { filter: brightness(1.12); }
.anl-seg.s-cash    { fill: var(--anl-cash); }
.anl-seg.s-account { fill: var(--anl-account); }
.anl-seg.s-pos     { fill: var(--anl-pos); }
.anl-seg.s-other   { fill: var(--anl-other); }
/* Υπόμνημα: ΠΑΝΤΑ παρόν όταν η μπάρα έχει πάνω από ένα χρώμα — το χρώμα μόνο
   του δεν λέει τίποτα σε όποιον δεν ξέρει τη σύμβαση. Κείμενο σε μελάνι, ΟΧΙ
   στο χρώμα της σειράς· το χρώμα το κουβαλά η κουκκίδα δίπλα του. */
.anl-legend {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin: var(--s2) 0 var(--s3); font-size: var(--fs-xs); color: var(--ink-2);
}
.anl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.anl-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.anl-legend .s-cash    { background: var(--anl-cash); }
.anl-legend .s-account { background: var(--anl-account); }
.anl-legend .s-pos     { background: var(--anl-pos); }
.anl-legend .s-other   { background: var(--anl-other); }
/* Δύο ομάδες (Έσοδα / Έξοδα) όταν υπάρχει δεύτερη μπάρα — ο τίτλος της
   ομάδας σε αχνό μελάνι, όπως οι ενδείξεις του άξονα. */
.anl-legend .lg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.anl-legend .lg b { font-weight: 600; color: var(--faint); margin-right: 2px; }
/* Οι ρίγες του «Κάρτα»: ίδιες στο υπόμνημα και στη μπάρα (SVG pattern), ώστε
   το μάτι να τις ταιριάξει. Λευκή γραμμή με διαφάνεια — δουλεύει και στα δύο
   θέματα πάνω στο πορτοκαλί, και μένει ορατή σε ασπρόμαυρη εκτύπωση. */
.anl-legend i.hatch { background: repeating-linear-gradient(-45deg, var(--anl-pos) 0 3px, rgba(255,255,255,.42) 3px 5px); }
.anl-hatch { stroke: #fff; stroke-opacity: .42; stroke-width: 2; }
.anl-expv { fill: var(--faint); font-weight: 600; }
.anl-tick { fill: var(--faint); font-size: var(--fs-2xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.anl-cat { fill: var(--ink-2); font-size: var(--fs-base); font-weight: 600; }
.anl-sub { fill: var(--faint); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; }
.anl-val { fill: var(--ink); font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 519px) {
  .anl-cat { font-size: var(--fs-sm); }
  .anl-val { font-size: var(--fs-xs); }
  .anl-card { padding: var(--s4) var(--s3); }
}

/* ── Maps: η σελίδα «Destination Maps» σε iframe ────────────────────────────
   Το iframe γεμίζει ό,τι μένει κάτω από το top bar και κυλά ΜΟΝΟ ΤΟΥ — η
   σελίδα έχει δικά της περιθώρια (24/20px) και δικό της φόντο (ίδια κλίση με
   της εφαρμογής), οπότε τα δικά μας περιθώρια και το max-width φεύγουν και
   πρέπει να καλύπτει ΟΛΟ τον χώρο, αλλιώς φαίνεται «κουτί» με ραφή.
   Το `:has()` γλιτώνει hook «βγήκα από την οθόνη» που ο router δεν δίνει.

   ⚠ Στήλη flex, ΟΧΙ `calc(100dvh - var(--topbar))`: το --topbar είναι
   min-height (62px) και το top bar ζωγραφίζεται ~64px → 2px κύλισης. Το calc
   μένει μόνο ως fallback για browsers χωρίς :has().
   ⚠ `margin:0; width:100%` στο .view: ως flex item, το `margin: 0 auto` του το
   στένευε στα 300px (intrinsic πλάτος iframe) — μετρήθηκε.
   ⚠ `100dvh` και στο .app: με `min-height:100vh` το .main τεντώνεται στο
   ΜΕΓΑΛΟ viewport του iPhone και ο πάτος του iframe κρύβεται πίσω από τη
   γραμμή εργαλείων του Safari. */
.app:has(.maps-embed) { min-height: 100vh; min-height: 100dvh; }
.main:has(.maps-embed) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.view:has(> .maps-embed) { flex: 1 1 auto; display: flex; flex-direction: column; max-width: none; width: 100%; margin: 0; padding: 0; min-height: 0; }
.maps-embed { display: block; width: 100%; border: 0; height: calc(100vh - var(--topbar)); height: calc(100dvh - var(--topbar)); }
.view:has(> .maps-embed) > .maps-embed { flex: 1 1 auto; height: auto; min-height: 0; }

/* ── Γεννήτρια ψηφιακών επαγγελματικών καρτών (views/business-cards.js) ─────
   Απλή στήλη: διαλέγεις άτομο, βλέπεις τον κύκλο της φωτογραφίας, ρυθμίζεις
   δύο ροδέλες, πατάς προεπισκόπηση. Τίποτα άλλο — ο ιδιοκτήτης ζήτησε ρητά
   «όσο πιο απλό γίνεται, να το κάνει ο διευθυντής μόνος του». */
.bc-pick { padding: var(--s4) var(--s5); }
.bc-form { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }

/* Ο κύκλος με το χρυσό δαχτυλίδι — ίδιο ύφος με την κάρτα που θα βγει. */
.bc-photo { display: flex; gap: var(--s5); align-items: center; flex-wrap: wrap; }
.bc-ring {
  width: 118px; height: 118px; flex: 0 0 auto; border-radius: 50%;
  background: #0b0e14 center/cover no-repeat;
  border: 3px solid var(--gold);
  box-shadow: 0 6px 22px rgba(201, 169, 110, .28);
}
.bc-photo .grow { min-width: 240px; }
.bc-range { width: 100%; accent-color: var(--gold); }

/* Η προεπισκόπηση: αληθινή κάρτα σε iframe, στο πλάτος ενός κινητού.
   ⚠ `srcdoc` και ΟΧΙ blob URL — η κάρτα είναι αυτοτελής, δεν χρειάζεται
   διεύθυνση, και έτσι δεν μένει πίσω της ζωντανό object URL σε κάθε πάτημα. */
.bc-preview:empty { display: none; }
.bc-preview { display: flex; flex-direction: column; gap: var(--s2); align-items: center; }
.bc-frame {
  width: 100%; max-width: 390px; height: 620px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: #07090d; display: block;
}
.bc-steps { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); }

/* ── Η ΟΘΟΝΗ «BUSINESS CARDS» — η λίστα (views/business-cards.js) ───────────
   Αντιγραφή του `reference/allcards.html` του ιδιοκτήτη, με τις ΙΔΙΕΣ τιμές:
   56px πρόσωπο, 78px ύψος σειράς, δύο στήλες από τα 640px, και το πέρασμα που
   ανασηκώνει ΚΑΙ το πλακίδιο (-4px) ΚΑΙ τη φωτογραφία (scale 1.06).

   ⚠ ΙΔΙΑ ΔΙΑΤΑΞΗ ΚΑΙ ΚΙΝΗΣΗ, ΔΙΚΑ ΜΑΣ ΧΡΩΜΑΤΑ. Το πρωτότυπο κουβαλά δική του
   παλέτα γιατί ζει μόνο του στο ίντερνετ· εδώ θα αγνοούσε τον διακόπτη θέματος.
   Οι αντιστοιχίες: `--avatar-ring` → `--card-solid` (λευκό/σκούρο, το φόντο
   πίσω από το δαχτυλίδι) · `--tile-press` → `--card-2` · το `--gold-glow`
   προστέθηκε στο tokens.css γιατί δεν υπήρχε.

   ⚠ ΤΟ 640px ΔΟΥΛΕΥΕΙ ΩΣ ΕΧΕΙ, παρότι εμείς έχουμε sidebar. Το sidebar πιάνει
   χώρο μόνο από τα 1024px (base.css) — και εκεί το περιεχόμενο είναι
   1024-236=788px, πάνω από το κατώφλι. Δεν χρειάστηκε μετατόπιση.            */
.bcg-list { display: flex; flex-direction: column; gap: 10px; }

@media (min-width: 640px) {
  .bcg-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}

.bcg-row, .bf-row {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  min-height: 78px; padding: 11px 18px 11px 11px; border-radius: 20px;
  background: var(--card-glass); border: 1px solid var(--line-2);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  color: var(--ink); text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  /* Η καμπύλη του πρωτοτύπου — υπερβαίνει λίγο το 1, γι' αυτό «κουμπώνει». */
  transition: transform .22s cubic-bezier(.34, 1.4, .5, 1), box-shadow .22s ease,
              border-color .22s ease, background .22s ease;
  animation: bcg-rise .5s cubic-bezier(.22, .9, .3, 1) backwards;
}

/* Η φωτισμένη γωνία πάνω αριστερά — δίνει στο τζάμι πάχος. */
.bcg-row::before, .bf-row::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 80% at 12% -14%, rgba(255, 255, 255, .16), transparent 58%);
  opacity: .85;
}

/* Η χρυσή λάμψη που ανεβαίνει από πάνω ΜΟΝΟ στο πέρασμα. */
.bcg-row::after, .bf-row::after {
  content: ""; position: absolute; left: 50%; top: -42%; width: 150%; aspect-ratio: 1;
  transform: translateX(-50%) scale(.6); pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-glow), transparent 62%);
  opacity: 0; transition: opacity .3s ease, transform .35s ease;
}
.bcg-row:hover::after, .bcg-row:focus-visible::after,
.bf-row:hover::after, .bf-row:focus-visible::after {
  opacity: .5; transform: translateX(-50%) scale(1);
}

/* ⚠ Το `text-decoration: none` ΞΑΝΑΓΡΑΦΕΤΑΙ στο :hover επίτηδες — το base.css
   έχει καθολικό `a:hover { text-decoration: underline }`, που υπογράμμιζε το
   όνομα σε κάθε πέρασμα. Η σειρά είναι πλακίδιο, όχι σύνδεσμος σε κείμενο. */
.bcg-row:hover, .bf-row:hover {
  transform: translateY(-4px); border-color: var(--gold);
  box-shadow: var(--shadow), 0 0 0 1px var(--gold-soft);
  text-decoration: none;
}
.bcg-row:focus-visible, .bf-row:focus-visible {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-soft), var(--shadow);
  text-decoration: none;
}
.bcg-row:active, .bf-row:active {
  transform: translateY(-1px) scale(.965);
  background: var(--card-2); transition-duration: .09s;
}

/* ⚠ Το μέγεθος περνά ΜΟΝΟ λόγω σειράς φόρτωσης: το `.bcg-face` είναι
   `.av.bcg-face`, ίδια ειδικότητα με το `.av` του components.css, και νικά
   επειδή το views.css φορτώνεται ΜΕΤΑ (index.html γρ. 24-25).              */
.bcg-face {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 56px; height: 56px; font-size: var(--fs-md);
  box-shadow: 0 0 0 2px var(--card-solid), 0 0 0 3.5px var(--gold),
              0 6px 16px rgba(0, 0, 0, .42);
  transition: box-shadow .22s ease, transform .22s cubic-bezier(.34, 1.4, .5, 1);
}
/* ΚΑΙ η φωτογραφία ανασηκώνεται — αυτό ζήτησε ρητά ο ιδιοκτήτης. */
.bcg-row:hover .bcg-face, .bcg-row:focus-visible .bcg-face {
  box-shadow: 0 0 0 2px var(--card-solid), 0 0 0 3.5px var(--gold-l),
              0 0 26px -4px var(--gold-glow), 0 8px 20px rgba(0, 0, 0, .45);
  transform: scale(1.06);
}
.bcg-row:active .bcg-face { transform: scale(.98); }

/* z-index: πάνω από τα ::before/::after του πλακιδίου, αλλιώς τα σκεπάζουν. */
.bcg-who {
  position: relative; z-index: 1; min-width: 0; flex: 1 1 auto;
  font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2;
}

/* ⚠ ΤΟ ΜΕΓΕΘΟΣ ΤΟΥ SVG ΠΡΕΠΕΙ ΝΑ ΔΟΘΕΙ ΕΔΩ. Το `icon()` χωρίς δεύτερο όρισμα
   δεν γράφει width/height, οπότε το βελάκι έβγαινε 0×0 — υπαρκτό στο DOM,
   αόρατο στην οθόνη. Ίδιο μοτίβο με `.btn svg`, `.pick svg`.                */
.bcg-go {
  position: relative; z-index: 1; display: inline-flex; color: var(--faint);
  transition: transform var(--t-btn) var(--spring), color .22s ease;
}
.bcg-go svg { width: 18px; height: 18px; }
.bcg-row:hover .bcg-go { transform: translateX(2px); color: var(--gold-ink); }

@keyframes bcg-rise { from { opacity: 0; transform: translateY(14px) scale(.97); } }

/* Στο κινητό όλα μαζεύουν λίγο — οι τιμές του πρωτοτύπου. */
@media (max-width: 480px) {
  .bcg-row { min-height: 70px; padding: 10px 14px 10px 10px; gap: 12px; border-radius: 18px; }
  .bcg-face { width: 50px; height: 50px; }
  .bcg-who { font-size: 15.5px; }
}

/* Η κίνηση είναι στολίδι — φεύγει ολόκληρη αν ζητηθεί ησυχία. */
@media (prefers-reduced-motion: reduce) {
  .bcg-row, .bf-row { animation: none; }
  .bcg-row:hover, .bcg-row:active, .bf-row:hover, .bf-row:active { transform: none; }
  .bcg-row:hover .bcg-face, .bcg-row:active .bcg-face { transform: none; }
  .bf-row:hover .bf-plate, .bf-row:active .bf-plate { transform: none; }
}

/* ── Η ΠΛΑΚΑ ΤΩΝ ΧΡΗΜΑΤΩΝ στα Reports (views/reports.js) ────────────────────
   Τρεις γραμμές × τέσσερα πλακίδια. Τα πλακίδια είναι ΤΑ ΙΔΙΑ με του
   Ημερολογίου (`.stat.stat-sm.stat-icon`) — εικονίδιο και νούμερο, χωρίς
   λεκτικό· ο τίτλος ζει σε `title`/`aria-label`. Ο ιδιοκτήτης τα ζήτησε ρητά
   «λεπτά και μικρά, όπως στο Ημερολόγιο».

   Η ΛΕΖΑΝΤΑ αριστερά (Μπαίνουν/Βγαίνουν/Μένουν) είναι ο μόνος τρόπος να
   διαβαστούν δώδεκα πλακίδια χωρίς λεκτικά: λέει τι κάνει η ΓΡΑΜΜΗ, μία φορά,
   αντί να επαναλαμβάνεται σε κάθε κουτί.                                    */
.mtx { padding: var(--s4); }
.mtx-row { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: var(--s3); }
/* ⚠ ΤΟ ΧΡΩΜΑ ΖΕΙ ΣΤΗ ΛΕΞΗ, ΟΧΙ ΣΤΑ ΚΟΥΤΙΑ (07.09.2026, εντολή ιδιοκτήτη).
   Πριν, ολόκληρη η σειρά «Βγαίνουν» ήταν κόκκινη και τα εικονίδιά της
   διαφορετικά από τα «Μπαίνουν». Τώρα και οι τρεις σειρές δείχνουν ΤΑ ΙΔΙΑ
   εικονίδια με τα ίδια χρώματα καναλιού, και η κατεύθυνση διαβάζεται από τη
   λέξη: μπλε μπαίνουν, κόκκινο βγαίνουν, χρυσό μένουν. */
.mtx-cap.dir-in   { color: var(--ic-office); }
.mtx-cap.dir-out  { color: var(--ic-free); }
/* «Μένουν» ΠΡΑΣΙΝΟ, μαζί με το Περιθώριο της ίδιας γραμμής (10.09.2026).
   Οι τρεις επικεφαλίδες κρατούν ξεχωριστό χρώμα η καθεμία: μπαίνουν=μπλε,
   βγαίνουν=κόκκινο, μένουν=πράσινο. */
.mtx-cap.dir-keep { color: var(--ic-cash); }

.mtx-cap {
  font-size: var(--fs-2xs); font-weight: 700;
  color: var(--faint);
}
.mtx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
/* Σφιχτό, τέσσερα κουτιά σε μία γραμμή (ήταν ίδιο με τα πλακίδια της ημέρας
   πριν αυτά γίνουν λογιστική πλάκα, 24.09.2026). */
.mtx .stat-sm { padding: 7px 9px; }
/* Το κενό τρίτο κουτί της τελευταίας γραμμής: κρατά τη ΣΤΗΛΗ, δεν ζωγραφίζει
   τίποτα. Χωρίς αυτό το Περιθώριο θα γλιστρούσε στην 3η θέση και η στοίχιση
   με το «Σύνολο εξόδων» από πάνω του θα χανόταν — που είναι όλο το νόημα. */
.mtx-empty { visibility: hidden; }

/* Η ίδια πλάκα σε ΜΙΑ γραμμή, μέσα σε καρτέλα: κρατά τα λίγα νούμερα που δεν
   χωρούν στο πλέγμα των χρημάτων (μη τιμολογημένα, μεικτό κέρδος, πλήθη).
   Ίδια λεζάντα και ίδια πλακίδια — ώστε να διαβάζεται ως συνέχεια, όχι ως
   δεύτερο σύστημα. */
.mtx-inline { padding: var(--s3) var(--s4); }

@media (max-width: 620px) {
  .mtx-row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .mtx-tiles { grid-template-columns: 1fr 1fr; }
}

/* ── Η ΟΘΟΝΗ «BOOKING FORMS» (views/booking-forms.js) ───────────────────────
   Αντιγραφή του `reference/booking-forms.html`: δύο στήλες με λευκές πλάκες
   λογοτύπων. Η ΓΡΑΜΜΗ είναι η ίδια με τις Business Cards — το πρωτότυπο γράφει
   ΤΟΝ ΙΔΙΟ κανόνα πέρασματος, γι' αυτό το `.bf-row` μπήκε στους ίδιους
   κανόνες παραπάνω αντί να τους ξαναγράψει.

   Εδώ μένουν μόνο όσα ΔΙΑΦΕΡΟΥΝ: η πλάκα αντί για πρόσωπο+όνομα, και το ότι
   οι δύο στήλες ισχύουν ΑΠΟ ΤΗΝ ΑΡΧΗ (τα λογότυπα είναι φαρδιά και χαμηλά,
   μία στήλη θα άφηνε τεράστιο κενό δεξιά).                                  */
.bf-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.bf-row { justify-content: center; padding: 12px 34px; min-height: 96px; }

/* Η λευκή πλάκα. Το `background: #fff` ΔΕΝ είναι token επίτηδες: τα λογότυπα
   των συνεργατών είναι σχεδιασμένα για λευκό, και σε σκούρο φόντο τα σκούρα
   γράμματά τους θα εξαφανίζονταν. Ίδια επιλογή με το πρωτότυπο. */
.bf-plate {
  position: relative; z-index: 1; flex: 0 1 auto;
  width: 100%; max-width: 216px; height: 72px;
  border-radius: 12px; display: block;
  background: #fff; object-fit: contain;
  border: 1px solid var(--line-2);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  transition: box-shadow .22s ease, transform .22s cubic-bezier(.34, 1.4, .5, 1),
              border-color .22s ease;
}
.bf-row:hover .bf-plate, .bf-row:focus-visible .bf-plate {
  transform: scale(1.04); border-color: var(--gold-l);
  box-shadow: 0 0 22px -4px var(--gold-glow), 0 8px 20px rgba(0, 0, 0, .28);
}
.bf-row:active .bf-plate { transform: scale(.99); }

/* ΤΟ ΣΤΙΓΜΙΟΤΥΠΟ ΕΙΝΑΙ ΜΙΑ ΚΑΝΟΝΙΚΗ ΠΛΑΚΑ, ΙΔΙΑ ΜΕ ΤΑ ΛΟΓΟΤΥΠΑ (25.09.2026).
   Ιστορικό: 06.09 η εικόνα γέμιζε ΟΛΟ το κουμπί από άκρη σε άκρη («just make
   the photo fill the whole button»). 25.09 ο ιδιοκτήτης: «make the 3 last
   buttons same size with the others, so it looks better to the eye» — οι
   τρεις έμοιαζαν μεγαλύτερες (196×76 γυμνή εικόνα έναντι 144×58 πλάκας μέσα
   σε σκούρο πλαίσιο, στο κινητό) και η γραμμή τους έβγαινε 2px κοντύτερη.
   Τώρα: ίδιο γέμισμα γραμμής, ίδια πλάκα (πλάτος/ύψος/γωνίες/σκιά/hover) — το
   στιγμιότυπο απλώς `cover` ΜΕΣΑ στην πλάκα αντί για `contain`, αλλιώς θα
   έμενε λευκό περιθώριο γύρω από μια μικροσκοπική φόρμα. Η κλάση
   `.bf-row-shot` μένει στο DOM αλλά δεν έχει πια δικούς της κανόνες. */
.bf-plate.bf-shot { object-fit: cover; object-position: center; }

/* Γραμμή ΧΩΡΙΣ σύνδεσμο (δεν έχει δοθεί ακόμη η διεύθυνση): ίδια όψη, χωρίς
   δάχτυλο — για να μην υπόσχεται πάτημα που δεν πάει πουθενά. */
.bf-row[aria-disabled="true"] { cursor: default; }

/* Οι ΔΙΚΕΣ ΜΑΣ φόρμες χωρίς σήμα ΚΑΙ χωρίς στιγμιότυπο — το όνομά τους μέσα
   στο ίδιο πλαίσιο. Καμία απομίμηση λογοτύπου. (Καμία γραμμή σήμερα.) */
.bf-plate-text {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 8px 14px; color: var(--navy);
  font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.015em;
}

/* Το βελάκι `.bf-go` ΚΑΤΑΡΓΗΘΗΚΕ 25.09.2026 («remove the arrows»). */

@media (max-width: 480px) {
  .bf-list { gap: 8px; }
  .bf-row { min-height: 78px; padding: 10px 26px; }
  .bf-plate { height: 58px; }
  .bf-plate-text { font-size: var(--fs-base); }
}

/* Τέσσερις καρτέλες πια — στο κινητό τυλίγονται αντί να ξεχειλίζουν. */
.seg.seg-people { flex-wrap: wrap; }

/* ── «Τα στοιχεία μου» (views/myinfo.js) ────────────────────────────────────
   Η καρτέλα του οδηγού από τα δικά του μάτια. Δύο καταστάσεις ανά πεδίο:
   ΑΔΕΙΟ (κανονικό input) ή ΓΕΜΑΤΟ (κείμενο + αντιγραφή + λουκέτο). */
.mi-head { display: flex; align-items: center; gap: var(--s4); padding: var(--s5); }
.mi-name { font-family: var(--serif); font-size: var(--fs-xl); font-weight: 600; color: var(--ink); }

.mi-locked {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 40px; padding: 8px 12px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.mi-val { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Το λουκέτο δεν είναι προειδοποίηση — είναι «αυτό είναι οριστικό». Ήσυχο. */
.mi-lock { display: inline-flex; flex: 0 0 auto; color: var(--faint); }
.mi-lock svg { width: 15px; height: 15px; }

.mi-doc {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: 11px 0; border-top: 1px solid var(--line);
}
.mi-doc:first-child { border-top: 0; }
.mi-doc-t { font-weight: 600; color: var(--ink); }

/* Επιλογή εγγράφων για το ένα PDF — «Τα στοιχεία μου». Ίδιο νόημα με το
   «Όλα» + «Συγχώνευση PDF» του φύλλου εγγράφων που έχει το γραφείο. */
.mi-merge { display: flex; align-items: center; gap: var(--s3); padding-bottom: var(--s2); }
.mi-all { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.mi-pick { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--gold); cursor: pointer; }
/* Οι γραμμές χωρίς αρχείο κρατούν τη στοίχιση — χωρίς αυτό ο τίτλος τους
   μετακινείται 18px αριστερά και η λίστα φαίνεται σπασμένη. */
.mi-pick-gap { width: 18px; flex: 0 0 auto; }

/* ═══ Reports (ξαναγράφτηκαν 03.09.2026) ═════════════════════════════════════ */
/* Η δεύτερη γραμμή εργαλείων της καρτέλας (επιλογέας συνεργάτη, «Για τον
   συνεργάτη»). Δική της γραμμή, ώστε η κύρια να μείνει καρτέλες + διάστημα. */
.rep-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.rep-sub .sel, .rep-sub .qp-select { flex: 1 1 240px; max-width: 360px; min-width: 0; }
/* Μέσα στο κουμπί του `.qp-select` το `.sel` είναι η ΟΨΗ — το πλάτος το ορίζει το δοχείο. */
.rep-sub .qp-select .sel { flex: 1 1 auto; max-width: none; }

/* ── Κλείσιμο μετρητών: ένας οδηγός, ένας μήνας (24.09.2026) ────────────────
   Ο λογαριασμός διαβάζεται σαν απόδειξη: γραμμές με ποσό δεξιά, μία ΔΙΠΛΗ
   γραμμή πάνω από το αποτέλεσμα (ίδια γλώσσα με την πλάκα χρημάτων της μέρας),
   και ΕΝΑ ποσό — «μου δίνει» ή «του δίνω». */
.monthnav { gap: 2px; flex: 0 0 auto; }
.monthnav-t { min-width: 150px; text-align: center; font-size: var(--fs-md); white-space: nowrap; }
.cash-sum { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-sm); color: var(--muted); }
.cash-sum .money-neg { color: var(--crit); }
.cash-st { max-width: 560px; }
.cash-st-h { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.cash-st-h .av { width: 40px; height: 40px; font-size: var(--fs-sm); }
.cash-lines { display: flex; flex-direction: column; }
.cash-line {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: 9px 0; border-top: 1px solid var(--line-2);
}
.cash-line:first-child { border-top: 0; }
.cash-amt { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.cash-line.is-closing { color: var(--muted); }
.cash-total { border-top: 3px double var(--line); margin-top: 2px; padding-top: 11px; font-size: var(--fs-md); }
.cash-total .cash-amt { font-size: var(--fs-xl); }
.cash-total.is-take .cash-amt { color: var(--ink); }
.cash-total.is-pay, .cash-total.is-pay .cash-amt { color: var(--crit); }
.cash-total.is-closed, .cash-total.is-closed .cash-amt { color: var(--ok); }
.cash-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.cash-field { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.cash-in { width: 120px; text-align: end; font-variant-numeric: tabular-nums; }
.cash-gap { margin-top: 6px; color: var(--warn); min-height: 1em; }
.cash-gap.is-err { color: var(--crit); }
.cash-gap:empty { display: none; }
.cash-line .btn { flex: 0 0 auto; align-self: center; }
.cash-next { display: flex; justify-content: flex-end; margin-top: var(--s3); }
.cash-next .btn svg { width: 14px; height: 14px; }
.cash-det { margin-top: var(--s3); border-top: 1px solid var(--line-2); padding-top: var(--s2); }
.cash-det summary { cursor: pointer; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; padding: 4px 0; }
.cash-det-list { display: flex; flex-direction: column; }
.cash-det-row {
  display: flex; align-items: baseline; gap: var(--s3); padding: 5px 0;
  font-size: var(--fs-sm); border-top: 1px solid var(--line-2);
}
.cash-det-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cash-det-row .grow { min-width: 0; overflow-wrap: anywhere; }
.cash-owed { margin-bottom: var(--s3); }
/* Στο χαρτί: δύο γραμμές υπογραφής (τις λεπτομέρειες τις ανοίγει το
   `beforeprint` του reports.js). */
@media print {
  .cash-st { max-width: none; }
  .cash-det > summary { list-style: none; }
  .cash-sign.print-only { display: flex; gap: 40px; margin-top: 36px; }
  .cash-printed.print-only { margin-top: 10px; font-weight: 600; }
  .cash-printed:empty, .cash-gap { display: none !important; }
  .cash-sign span { flex: 1; border-top: 1px solid #000; padding-top: 4px; font-size: var(--fs-sm); }
}

/* Αναζήτηση πάνω από πίνακα: στενότερη από την κύρια, και ΔΕΝ τυπώνεται.
   ⚠ Η ΠΑΓΙΔΑ ΤΟΥ .search ΣΕ ΣΤΗΛΗ, ΤΡΙΤΗ ΦΟΡΑ: το `.search` έχει
   `flex: 1 1 260px` και μέσα σε `.stack` (flex-direction: column) το basis
   γίνεται ΥΨΟΣ — το πεδίο έβγαινε 340px ψηλό με το εικονίδιο να αιωρείται στη
   μέση. `flex: 0 0 auto` + width, και δύο κλάσεις για να νικήσει τον βασικό
   κανόνα του components.css όποια κι αν είναι η σειρά φόρτωσης. */
.search.tbl-search { flex: 0 0 auto; width: 340px; max-width: 100%; }
.tr-total td { font-weight: 700; border-top: 2px solid var(--line); }

/* Πέντε καρτέλες + επιλογέας: σε στενή οθόνη η μπάρα κυλάει (κανόνας .seg στο
   components.css) και ο επιλογέας πάει από κάτω σε όλο το πλάτος. */
@media (max-width: 719px) {
  .toolbar .rangebox { flex: 1 1 100%; }
}

/* ── Η πίτα ─────────────────────────────────────────────────────────────── */
.pie-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s6); }
.pie-plot { position: relative; width: 220px; height: 220px; flex: 0 0 auto; }
.pie-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pie-slice {
  fill: none; stroke-width: 30; cursor: pointer;
  transition: stroke-width .16s ease, opacity .16s ease;
}
.pie-slice.on { stroke-width: 40; }
/* Όταν μία είναι αναμμένη, οι άλλες υποχωρούν — χωρίς να χαθούν. */
.pie-svg:hover .pie-slice:not(.on), .pie-wrap:has(.pie-legend:hover) .pie-slice:not(.on) { opacity: .55; }
.pie-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; pointer-events: none; padding: 0 52px;
}
.pie-c-v { font-family: var(--serif); font-size: var(--fs-2xl); font-weight: 600; color: var(--ink); line-height: 1; }
.pie-c-l {
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); margin-top: 6px;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pie-c-s { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pie-legend { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; min-width: 0; }
.pie-row {
  display: grid; grid-template-columns: 12px 1fr auto auto; gap: 10px; align-items: center;
  padding: 6px 10px; border-radius: var(--r-xs); cursor: pointer; font-size: var(--fs-sm);
  transition: background var(--t-fast);
}
.pie-row:hover, .pie-row.on { background: var(--card-2); }
.pie-row.on .pie-lbl { font-weight: 700; color: var(--ink); }
.pie-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.pie-lbl { color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie-amt { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pie-pct { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 38px; text-align: end; }

/* Οκτώ χρώματα, μεσαίας φωτεινότητας ώστε να στέκουν ΚΑΙ στο σκούρο θέμα:
   χρυσό και ναυτικό της εταιρείας πρώτα, μετά αποχρώσεις που δεν μαλώνουν. */
/* ⚠ Η πρώτη φέτα ήταν #B8912F — ΤΡΙΤΟ χρυσό, ορατά διαφορετικό μέταλλο δίπλα
   στα χρυσά της ίδιας οθόνης. Τώρα το χρώμα της μάρκας. */
.pie-c0 { stroke: #d0ab64; background: #d0ab64; }
.pie-c1 { stroke: #2F4F7F; background: #2F4F7F; }
.pie-c2 { stroke: #6B8E9E; background: #6B8E9E; }
.pie-c3 { stroke: #C97B4A; background: #C97B4A; }
.pie-c4 { stroke: #7A9A6E; background: #7A9A6E; }
.pie-c5 { stroke: #9C6B9E; background: #9C6B9E; }
.pie-c6 { stroke: #D9BC6A; background: #D9BC6A; }
.pie-c7 { stroke: #8A8F99; background: #8A8F99; }

@media (max-width: 560px) {
  .pie-wrap { justify-content: center; }
  .pie-legend { flex-basis: 100%; }
}
@media print {
  /* ⚠ Η ΡΑΜΠΑ ΘΕΡΜΟΤΗΤΑΣ ΞΕΘΩΡΙΑΖΕΙ ΣΤΟ ΧΑΡΤΙ, ΔΕΝ ΕΞΑΦΑΝΙΖΕΤΑΙ. Στην οθόνη
     τα γεμίσματα φτάνουν 60% χρυσό· τυπωμένα σε πλάκα 31 στηλών × 10 γραμμών
     είναι τριακόσια γεμάτα πλακίδια μελάνι. Στο ένα τέταρτο της έντασης η
     ΣΕΙΡΑ παραμένει ορατή — που είναι όλη η πληροφορία — με ελάχιστο μελάνι. */
  .mx-cell.l1 { background: rgba(208,171,100,.06) !important; }
  .mx-cell.l2 { background: rgba(208,171,100,.11) !important; }
  .mx-cell.l3 { background: rgba(208,171,100,.17) !important; }
  .mx-cell.l4 { background: rgba(208,171,100,.24) !important; }
  .pie-slice { transition: none; }
  .pie-row { break-inside: avoid; }
  /* Στο χαρτί δεν υπάρχει κύλιση: με `overflow-x:auto` η κατάσταση συνεργάτη
     έχανε τις ΤΕΛΕΥΤΑΙΕΣ στήλες — Τιμή και Σύνολο, το μόνο που θέλει το
     ξενοδοχείο. Οι στήλες τυλίγουν και η γραμματοσειρά μικραίνει, ώστε 13
     στήλες να χωράνε σε A4. */
  /* ⚠ ΧΩΡΙΣ `#view` (10.09.2026). Το «Συγκεντρωτικό μήνα» τυπώνεται από
     ΠΑΡΑΘΥΡΟ, και τα παράθυρα μπαίνουν στο `<body>` (`ui.js`) — ΕΞΩ από το
     `#view`. Δεμένοι εδώ, αυτοί οι κανόνες δεν το άγγιζαν καθόλου: ο πίνακας
     κρατούσε `overflow-x: auto` και `min-width`, και στα 794px έχανε **189px
     από τα δεξιά — δηλαδή τις στήλες ΦΠΑ και Σύνολο**, τα δύο νούμερα που
     χρειάζεται ο λογιστής. Στο χαρτί δεν υπάρχει κύλιση: οι στήλες πρέπει να
     τυλίγουν, όχι να κόβονται. */
  .tablewrap { overflow: visible; }
  table.tbl { font-size: var(--fs-2xs); table-layout: auto; width: 100%; min-width: 0; }
  /* ⚠ ΟΧΙ ΚΟΛΛΗΜΕΝΗ ΚΕΦΑΛΙΔΑ ΣΤΟ ΧΑΡΤΙ: το `position: sticky` δεν έχει νόημα
     χωρίς κύλιση και σε σελιδοποίηση μετακινεί τη γραμμή. */
  /* ⚠⚠ ΤΑΙΡΙΑΣΤΗ ΕΙΔΙΚΟΤΗΤΑ, ΑΛΛΙΩΣ ΔΕΝ ΙΣΧΥΕΙ ΤΙΠΟΤΑ. Οι κανόνες οθόνης στο
     `components.css` είναι `table.tbl thead th` και `table.tbl tbody td` —
     ειδικότητα (0,1,3). Γραμμένο σκέτο `table.tbl th` (0,1,2) ΧΑΝΕΙ, όσο πιο
     κάτω κι αν είναι στο αρχείο, και η κεφαλίδα κρατούσε `nowrap` + γέμισμα
     14px: μετρημένο, ο πίνακας ξεχείλιζε 38px έξω από την Α4. Παλιά κέρδιζε
     χάρη στο `#view` (ταυτότητα)· μόλις έφυγε, έπρεπε να μπει το `thead`. */
  table.tbl thead th { position: static; }
  /* ⚠ ΟΙ ΚΕΦΑΛΙΔΕΣ ΔΕΝ ΣΠΑΝΕ ΣΤΗ ΜΕΣΗ ΛΕΞΗΣ. Με `word-break: break-word` το
     «ΕΙΔΙΚΟΤΗΤΕΣ» τυπωνόταν «ΕΙΔΙΚΟΤΗΤΕ / Σ» — ένα ορφανό γράμμα σε δεύτερη
     γραμμή, σε χαρτί που μπορεί να πάει σε συνεργάτη. Τα ΚΕΛΙΑ σπάνε (μεγάλες
     διαδρομές, ονόματα ξενοδοχείων)· οι ΚΕΦΑΛΙΔΕΣ όχι — η στήλη ανοίγει. */
  table.tbl thead th { white-space: normal; padding: 3px 5px; word-break: normal; hyphens: none; }
  /* ⚠ `anywhere` ΚΑΙ ΟΧΙ `break-word` — ΔΕΝ ΕΙΝΑΙ ΤΟ ΙΔΙΟ. Το `break-word`
     σπάει τη λέξη ΜΟΝΟ αφού ο πίνακας έχει ήδη πάρει το πλάτος που θέλει· δεν
     μειώνει το ΕΛΑΧΙΣΤΟ πλάτος του, οπότε ένα ΜΑΡΚ 15 ψηφίων κρατούσε τη
     στήλη ανοιχτή και ο πίνακας ξεχείλιζε 109px έξω από την Α4. Το `anywhere`
     μετρά και στο ελάχιστο, άρα ο πίνακας μαζεύεται όσο χρειάζεται.
     Οι ΚΕΦΑΛΙΔΕΣ μένουν `normal` — δες το σχόλιο από πάνω. */
  table.tbl tbody td { white-space: normal; padding: 3px 5px; overflow-wrap: anywhere; }
  /* ⚠ ΟΙ ΚΩΔΙΚΟΙ ΔΕΝ ΣΠΑΝΕ. Ένα ΜΑΡΚ 15 ψηφίων κομμένο σε δύο γραμμές
     («400089051017 / 672») αντιγράφεται λάθος από τον λογιστή. Τα `.num`
     κελιά μένουν ακέραια και το πλάτος το δίνουν οι στήλες με κείμενο, που
     τυλίγουν χωρίς κόστος. Μετρημένο: ο πίνακας χωρά ακόμη σε Α4 κάθετο. */
  table.tbl tbody td.num { overflow-wrap: normal; }
  /* Τα αρχικά σε χρυσό δισκάκι δεν προσθέτουν τίποτα δίπλα στο ΟΝΟΜΑ, που
     τυπώνεται ούτως ή άλλως — και είναι ένας γεμάτος κύκλος μελάνι ανά γραμμή. */
  #view .av, #view .av-sm, #view .car-thumb { display: none !important; }
  #view .matrix { overflow: visible; }
  #view .stat-v { font-size: 20px; }
}

/* ── ΠΙΝΑΚΑΣ (board.js) ─────────────────────────────────────────────────────
   Η μέρα ανά οδηγό. Πυκνές γραμμές, γιατί ο dispatcher θέλει να χωρέσει όλη
   η βάρδια σε μία οθόνη — αν κυλάει, χάνει το κενό που ψάχνει. */
.bd-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.bd-card.bd-orphans { border-color: var(--crit); }

.bd-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-bottom: 1px solid var(--line);
}
.bd-head-t { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--fs-sm); }
.bd-orphans .bd-head { background: var(--crit-soft); }
.bd-orphans .bd-head-t { color: var(--crit); }
.bd-orphans .bd-head-t svg { width: 15px; height: 15px; }
.bd-av { width: 26px; height: 26px; font-size: var(--fs-2xs); flex: 0 0 auto; }
.bd-count { font-size: var(--fs-2xs); color: var(--muted); }
/* Η τελευταία σύνδεση σπρώχνεται δεξιά: είναι στοιχείο ΤΟΥ ΑΝΘΡΩΠΟΥ, όχι της
   μέρας, οπότε δεν πρέπει να μπερδεύεται με τα νούμερα των μεταφορών. */
.bd-seen { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: var(--fs-2xs); white-space: nowrap; }
.bd-seen svg { width: 12px; height: 12px; }

.bd-rows { display: flex; flex-direction: column; }
.bd-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 13px; border-top: 1px solid var(--line);
  cursor: pointer; min-width: 0;
}
.bd-rows .bd-row:first-child { border-top: 0; }
.bd-row:hover { background: var(--gold-soft); }
/* Η δουλειά που τρέχει ΤΩΡΑ — δηλαδή που η ώρα της ήρθε. ΟΧΙ «οδηγεί». */
.bd-row.is-now { background: var(--ok-soft); }
.bd-row.is-past { opacity: .55; }

.bd-time {
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--fs-sm);
  min-width: 44px; flex: 0 0 auto;
}
.bd-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bd-line1 { display: flex; align-items: baseline; gap: 7px; min-width: 0; font-size: var(--fs-sm); }
.bd-line1 strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-type, .bd-co { font-size: var(--fs-2xs); color: var(--muted); white-space: nowrap; }
.bd-line2 {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: var(--fs-2xs); color: var(--muted);
}
.bd-line2 > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-track {
  display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
  color: var(--info); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px;
}
.bd-track svg { width: 12px; height: 12px; }

.bd-eur { font-variant-numeric: tabular-nums; font-size: var(--fs-2xs); color: var(--muted); flex: 0 0 auto; }
.bd-when {
  font-variant-numeric: tabular-nums; font-size: var(--fs-2xs); font-weight: 600;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; min-width: 58px; text-align: center;
}
.t-ok   { color: var(--ok);   background: var(--ok-soft); }
.t-warn { color: var(--warn); background: var(--warn-soft); }
.t-bad  { color: var(--crit); background: var(--crit-soft); }
.t-mute { color: var(--faint); background: transparent; }
/* Στην κεφαλίδα ο τόνος είναι ΜΟΝΟ χρώμα — πλακέτα εκεί θα ανταγωνιζόταν το όνομα. */
.bd-seen.t-ok, .bd-seen.t-warn, .bd-seen.t-bad, .bd-seen.t-mute { background: transparent; padding: 0; }

.bd-idle-btn {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: transparent; border: 0; padding: 6px 2px; cursor: pointer;
  font-size: var(--fs-2xs); color: var(--muted); text-align: left;
}
.bd-idle-btn svg { width: 14px; height: 14px; transition: transform .15s ease; }
.bd-idle-btn.open svg { transform: rotate(90deg); }
.bd-idle-names { font-size: var(--fs-2xs); color: var(--faint); padding: 0 2px 4px 22px; line-height: 1.6; }

/* Στο κινητό η τιμή και η εταιρεία φεύγουν: η γραμμή πρέπει να χωρά ώρα,
   πελάτη και καθυστέρηση — αυτά είναι η δουλειά του πίνακα. */
@media (max-width: 560px) {
  .bd-eur, .bd-co { display: none; }
  .bd-row { gap: 8px; padding: 7px 10px; }
  .bd-when { min-width: 50px; }
}

/* ── ΦΙΛΤΡΟ ΤΥΠΟΥ ΜΕΤΑΦΟΡΑΣ (calendar.js, 12.09.2026) ───────────────────────
   Κάθεται ανάμεσα στα πλακίδια εσόδων και τη λίστα, και δείχνει ΑΚΡΙΒΩΣ όπως ο
   τύπος πάνω στην κάρτα: ίδιο χρώμα, ίδιο βελάκι, ίδια λέξη. Το χρώμα το
   φέρνουν οι κλάσεις `.job-dir.dir-<τύπος>` που ορίζονται πιο πάνω σε ΑΥΤΟ το
   αρχείο — δεν ξαναγράφεται εδώ ούτε ένα hex. */
.seg-type { display: flex; width: 100%; }
.seg-type button {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap; overflow: hidden;
}
.seg-type .job-dir { overflow: hidden; text-overflow: ellipsis; }
/* ⚠ ΤΟ «ΠΑΤΗΜΕΝΟ» ΔΕΝ ΕΙΝΑΙ ΤΟ ΝΑΥΤΙΚΟ ΠΛΑΚΙΔΙΟ ΤΟΥ `.seg`. Εκείνο βάφει
   λευκό το κείμενο — δηλαδή θα έσβηνε ακριβώς το χρώμα του τύπου, που είναι
   το ζητούμενο. Εδώ το επιλεγμένο ανασηκώνεται αντί να βαφτεί. */
.seg-type button.on {
  /* ⚠ ΔΑΧΤΥΛΙΔΙ ΣΤΟ ΧΡΩΜΑ ΤΟΥ ΤΥΠΟΥ, ΟΧΙ ΓΕΜΙΣΜΑ. Πρώτη εκδοχή ανασήκωνε το
     κουμπί με `var(--card)`: στο ΣΚΟΥΡΟ θέμα εκείνο είναι ΠΙΟ ΣΚΟΥΡΟ από το
     αυλάκι του `.seg`, οπότε το επιλεγμένο βυθιζόταν αντί να ξεχωρίζει.
     Το `--dir` το ορίζουν οι ίδιοι κανόνες `.dir-*` που βάφουν την κάρτα —
     μηδέν νέα hex, και αν αλλάξει το μωβ της αναχώρησης αλλάζει και εδώ. */
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 1.5px var(--dir, var(--line));
}
/* Ο αριθμός λέει «θα βρεις κάτι αν πατήσεις». Χωρίς αυτόν, πατούσες κουμπί και
   έβγαινε άδεια λίστα — και δεν ήξερες αν φταίει το φίλτρο ή η μέρα. */
.seg-type .seg-n {
  flex: 0 0 auto; font-variant-numeric: tabular-nums;
  font-size: var(--fs-2xs); font-weight: 600; color: var(--faint);
  background: var(--card-2); border-radius: 999px; padding: 1px 6px; min-width: 20px;
}
.seg-type button.on .seg-n { background: var(--line); color: var(--ink); }
/* Άδειος τύπος: σβήνει, ΔΕΝ εξαφανίζεται. Αν έφευγε το κουμπί, η μπάρα θα
   άλλαζε πλάτος σε κάθε μέρα και τα υπόλοιπα θα χοροπηδούσαν κάτω απ' το δάχτυλο. */
.seg-type button.is-empty { opacity: .42; }

@media (max-width: 719px) {
  /* Σε στενή οθόνη μένει ο αριθμός και κόβεται η λέξη — ο αριθμός είναι η
     πληροφορία, η λέξη η ετικέτα. Το βελάκι ΜΕΝΕΙ: είναι ένας χαρακτήρας και
     λέει «έρχεται/φεύγει» χωρίς να διαβάσεις τίποτα. */
  .seg-type button { padding: 6px 5px; gap: 4px; }
  .seg-type .job-dir { font-size: var(--fs-2xs); }
  .seg-type .seg-n { padding: 1px 4px; min-width: 16px; }
}

/* ── ΠΑΡΑΣΤΑΤΙΚΑ: ΕΠΙΛΟΓΗ & ΕΚΤΥΠΩΣΗ ΑΠΟΔΕΙΞΕΩΝ (documents.js, 27.09.2026) ─────
   Κουτάκι σε κάθε γραμμή, «Επιλογή όλων των ορατών», «Εκτύπωση επιλεγμένων (N)»
   και — μόνο για τον μόνιμο διαχειριστή — «Διαγραφή δοκιμαστικών». Η ΙΔΙΑ η
   απόδειξη (όψη και εκτύπωση) ζει στο receipt.css· εδώ μόνο η λίστα.
   Πρόθεμα `docl-` (documents list) ΕΠΙΤΗΔΕΣ, όχι `rx-`/`rcpt-`: η κάρτα της
   απόδειξης γράφεται σε άλλο αρχείο και μια κοινή κλάση θα έβαφε το ένα με
   τους κανόνες του άλλου. */

/* Μήνας (με ετικέτα από πάνω) και αναζήτηση (χωρίς) στην ΙΔΙΑ βάση: με το
   `center` του .toolbar το κουτί αναζήτησης κρεμόταν στη μέση της ετικέτας. */
.docl-toolbar { align-items: flex-end; }
.docl-toolbar .docl-month { flex: 0 0 190px; }

.docl-selbar { margin-bottom: 0; }
.docl-selact { flex-wrap: wrap; justify-content: flex-end; }
/* Ο αριθμός δεν «χορεύει» όσο τσεκάρεις (1 → 12 → 120). */
.docl-selinfo { font-variant-numeric: tabular-nums; }

/* ⚠ ΤΟ ΠΛΑΤΟΣ ΤΟ ΜΕΤΡΑ ΤΟ ΚΟΥΤΙ, ΟΧΙ Η ΟΘΟΝΗ. Στα 1280px με το πλαϊνό μενού
   ο πίνακας έχει 982px· στα 768px χωρίς μενού 706px· στο κινητό 341px. Ένα
   `@media` πλάτους οθόνης θα έκανε λάθος μόλις ανοιγόκλεινε το μενού (βλ.
   μνήμη date-field-min-width: «τα viewport media queries ήταν λάθος
   εργαλείο»). Το `container` το λύνει. Σε browser χωρίς container queries
   (Safari < 16) μένει ο πλήρης πίνακας με κύλιση ΜΕΣΑ στο κουτί — ποτέ
   οριζόντια κύλιση σελίδας. */
.docl-wrap { container: docl / inline-size; }
/* ⚠ Χωρίς το `min-width: 640px` που δίνει το components.css σε ΚΑΘΕ πίνακα:
   εδώ το πλάτος το ορίζουν οι επτά στήλες, και στο κινητό τα 640px θα
   έκρυβαν πίσω από κύλιση ακριβώς τα κουμπιά εκτύπωσης. */
table.tbl.docl-tbl { min-width: 0; }
table.tbl.docl-tbl thead th,
table.tbl.docl-tbl tbody td { padding: 10px 12px; }

/* Η στήλη του κουτιού: ΟΣΟ ΤΟ ΚΟΥΤΙ. Το εμβαδόν αφής το δίνει η <label>
   (36×36)· το ίδιο το κουτάκι μένει 16px, ένα μέγεθος παντού (`.chkline`). */
table.tbl.docl-tbl thead th.docl-pick,
table.tbl.docl-tbl tbody td.docl-pick { width: 1%; padding: 0 0 0 6px; }
.docl-hit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; cursor: pointer; vertical-align: middle;
}
.docl-no b, .docl-money b { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.tbl.docl-tbl td.docl-date { white-space: nowrap; }
.docl-kind, .docl-split, .docl-mark { white-space: nowrap; margin-top: 2px; }
.docl-mark { margin-top: 4px; font-variant-numeric: tabular-nums; }
.docl-m { display: none; }
.docl-party { overflow-wrap: anywhere; }
.docl-chips { display: flex; flex-wrap: wrap; gap: 4px; }
/* Ο συνεργάτης κάτω από τον πελάτη (ο πελάτης = ό,τι γράφει το χαρτί). */
.docl-via { margin-top: 2px; }
/* Οι εξαιρέσεις της στήλης myDATA για το κινητό — κρυφές ως τότε (βλ. από
   κάτω, container ≤560px), ώστε να μη διαβάζονται δύο φορές. */
.docl-mchips { display: none; }
.docl-acts { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
/* Τα κουμπιά της γραμμής δεν μαζεύουν: ένας εκτυπωτής 20px δεν πατιέται. */
.docl-print { flex: 0 0 auto; }
/* Η επιλεγμένη γραμμή φαίνεται και χωρίς να κοιτάξεις το κουτάκι — σε
   εξήντα γραμμές το μάτι ψάχνει ΛΩΡΙΔΕΣ, όχι τικ 16px. */
table.tbl.docl-tbl tbody tr.is-picked td { background: var(--gold-soft2); }

.docl-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Το `warn` του κουμπιού διαγραφής ανοίγει σε ΟΛΟ το πλάτος της στήλης.
   Ως `inline-flex` (components.css) το `.delbtn` έχει το πλάτος του κουμπιού,
   οπότε ~170 χαρακτήρες στριμώχνονταν σε 200px και τους έκοβε το `max-height`. */
.docl-testact { margin-top: var(--s3); }
.docl-tests .delbtn { display: flex; }
/* «Εισαγωγή από το παλιό ημερολόγιο» (28.09.2026): κάτω από το κείμενο της
   ειδοποίησης, όχι δίπλα — ίδια λογική με το `.docl-testact`. */
.docl-importact { margin-top: var(--s3); }

/* Στενό κουτί (tablet όρθιο, στενό παράθυρο): η ημερομηνία κατεβαίνει κάτω
   από τον αριθμό και το είδος φεύγει — είναι σχεδόν πάντα ΑΠΥ 11.2. */
@container docl (max-width: 760px) {
  table.tbl.docl-tbl .docl-date { display: none; }
  .docl-kind, .docl-split { display: none; }
  .docl-m { display: block; white-space: nowrap; }
  /* (Εδώ ζούσε το στένεμα του κουμπιού «myDATA» της γραμμής, `.docl-send`·
     έφυγε με το κουμπί 28.09.2026 — η εφαρμογή δεν στέλνει πια αποδείξεις.) */
}
/* Κινητό: μένουν κουτάκι · αριθμός (+ μέρα) · πελάτης · σύνολο · ενέργειες.
   Η στήλη myDATA κρύβεται, αλλά οι ΕΞΑΙΡΕΣΕΙΣ της («Δοκιμαστική», «Πρόχειρο»,
   «Απέτυχε»…) κατεβαίνουν κάτω από τον πελάτη (`.docl-mchips`) — ήταν
   αόρατες στο iPhone. Το ΜΑΡΚ και η ανάλυση καθαρή/ΦΠΑ είναι στο χαρτί και
   στο «Συγκεντρωτικό μήνα». Οι κεφαλίδες τυλίγουν (το components.css τις
   έχει `nowrap`, και το «Πελάτης» κρατούσε μόνο του τη στήλη ανοιχτή). */
@container docl (max-width: 560px) {
  table.tbl.docl-tbl { font-size: var(--fs-sm); }
  table.tbl.docl-tbl thead th,
  table.tbl.docl-tbl tbody td { padding: 8px 5px; }
  table.tbl.docl-tbl thead th { white-space: normal; }
  table.tbl.docl-tbl thead th.docl-pick,
  table.tbl.docl-tbl tbody td.docl-pick { padding: 0 0 0 2px; }
  table.tbl.docl-tbl .docl-md { display: none; }
  .docl-mchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
  .docl-mchips .chip { padding: 1px 7px; font-size: var(--fs-2xs); }
  .docl-hit { width: 32px; }
  .docl-acts { gap: 4px; }
}
@media (max-width: 640px) {
  .docl-toolbar .docl-month { flex: 1 1 100%; }
}

/* Αν κάποιος τυπώσει την ΟΘΟΝΗ (Cmd+P) και όχι αποδείξεις: τα κουτάκια και
   τα κουμπιά δεν είναι χαρτί. */
@media print {
  .docl-selbar, .docl-tests, .docl-hit, .docl-acts, .docl-importact { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ΑΡΧΙΚΗ «Command center» (04.10.2026) — views/home.js · «Αναζήτηση παντού» — views/command.js
   Γύρος 2 (04.10 βράδυ, «better, cooler and easier … use 21st.dev»): η μέρα σε μία πρόταση,
   ⌘K, δαχτυλίδι/μπάρες, λωρίδα ημέρας, «Επόμενες 7 ημέρες», Dock, λάμψη. Μία οθόνη laptop.
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --wa: #1a9e4b; }
:root[data-theme="dark"] { --wa: #25d366; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --wa: #25d366; } }

/* `container-type`: τα πλακίδια στοιχίζονται με το ΠΛΑΤΟΣ ΤΗΣ ΑΡΧΙΚΗΣ (ανοιχτό ή κλειστό μενού),
   όχι της οθόνης — βλ. `@container home` πιο κάτω. */
.home { display: flex; flex-direction: column; gap: var(--s3); container-type: inline-size; container-name: home; }

/* ── κεφαλίδα: χαιρετισμός + η μέρα σε μία πρόταση | αναζήτηση + ενέργειες ── */
.hm-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px var(--s4); }
.hm-hello { flex: 1 1 auto; min-width: 0; font-family: var(--serif); font-size: var(--fs-xl); font-weight: 500; letter-spacing: var(--h-track); line-height: 1.2; }
.hm-brief { flex-basis: 100%; margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2); }
.hm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.hm-find {
  -webkit-appearance: none; appearance: none; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 10px; min-width: 300px; height: 40px; padding: 0 8px 0 12px;
  border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--field); color: var(--muted);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.hm-find:hover { border-color: var(--gold); }
.hm-find:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.hm-find-i { display: inline-flex; color: var(--gold-text); }
.hm-find-i svg { width: 16px; height: 16px; }
.hm-find-t { flex: 1; min-width: 0; text-align: left; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-kbd, .cmd kbd {
  font-family: var(--sans); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--plate); color: var(--ink-2);
}
.hm-qas { display: flex; flex-wrap: wrap; gap: var(--s2); }
.hm-qa {
  -webkit-appearance: none; appearance: none; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--card-glass); border: 1px solid var(--line-2); color: var(--ink); font-size: var(--fs-sm); font-weight: 600;
  transition: transform .2s cubic-bezier(.34, 1.4, .5, 1), border-color .2s ease, box-shadow .2s ease;
}
.hm-qa svg { width: 16px; height: 16px; color: var(--gold-text); }
.hm-qa:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 6px 18px -8px var(--gold-glow); }
.hm-qa:active { transform: scale(.97); }
.hm-qa:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hm-qa.is-main { background: var(--action); border-color: transparent; color: var(--action-ink); }
.hm-qa.is-main svg { color: var(--action-ink); }

/* ── αριθμοί (έμπνευση «Insight Cards», «Radial progress») ── */
.hm-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.hm-kpis.n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Ποτέ ορφανό πλακίδιο: 6 → 3+3 → 2+2+2 (μετρημένο: στο iPad έβγαινε 5+1 και 4+2). */
@container home (max-width: 1050px) { .hm-kpis.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container home (max-width: 560px) {
  .hm-kpis.n6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-kpis.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-kpis.n3 > :first-child { grid-column: span 2; }
}
.hm-kpi {
  -webkit-appearance: none; appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 3px; min-width: 0;
  padding: 11px 14px 12px; border-radius: var(--r);
  background: var(--card-glass); border: 1px solid var(--line-2); box-shadow: 0 1px 0 var(--hair) inset;
  transition: transform .22s cubic-bezier(.34, 1.4, .5, 1), border-color .2s ease;
}
.hm-kpi:hover { transform: translateY(-2px); border-color: var(--gold); }
.hm-kpi:active { transform: scale(.98); }
.hm-kpi:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hm-kpi-top { display: flex; align-items: center; gap: 8px; min-width: 0; height: 30px; }
.hm-kpi-i {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px;
  background: var(--gold-soft); color: var(--gold-text);
}
.hm-kpi-i svg { width: 15px; height: 15px; }
.hm-kpi-l { flex: 1; min-width: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-kpi-v {
  font-family: var(--serif); font-size: 1.55rem; font-weight: 500; line-height: 1.1;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-kpi-s { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* «Χωρίς οδηγό»: το ΙΔΙΟ πορτοκαλί με το τσιπ του Ημερολογίου — ένα χρώμα, ένα νόημα. */
.hm-kpi.is-crit { background: var(--nodriver-soft); border-color: var(--nodriver-line); }
.hm-kpi.is-crit .hm-kpi-l, .hm-kpi.is-crit .hm-kpi-v { color: var(--nodriver); }
.hm-kpi.is-crit .hm-kpi-i { background: var(--nodriver); color: var(--nodriver-ink); animation: hm-pulse 2.2s ease-in-out infinite; }
.hm-kpi.is-ok .hm-kpi-i { background: var(--ok-soft); color: var(--ok); }
.hm-kpi.is-ok .hm-kpi-s, .hm-kpi.is-up .hm-kpi-s { color: var(--ok); font-weight: 600; }
.hm-kpi.is-down .hm-kpi-s { color: var(--crit); font-weight: 600; }
@keyframes hm-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--nodriver-line); } 50% { box-shadow: 0 0 0 7px transparent; } }
/* δαχτυλίδι «ξεκίνησαν ως ώρα» */
.hm-ring { position: relative; flex: none; width: 36px; height: 36px; margin: -2px 0; display: grid; place-items: center; }
.hm-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hm-ring circle { fill: none; stroke-width: 3; }
.hm-ring-bg { stroke: var(--line-2); }
.hm-ring-fg { stroke: var(--gold); stroke-linecap: round; }
.hm-ring b { position: relative; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: -.02em; color: var(--gold-text); font-variant-numeric: tabular-nums; }
.hm-ring.is-full b { font-size: var(--fs-xs); }
/* μπάρες 7 ημερών (σήμερα χρυσή) */
.hm-spark { flex: none; display: flex; align-items: flex-end; gap: 2px; height: 24px; }
.hm-spark i { width: 4px; border-radius: 2px; background: var(--line-2); }
.hm-spark i.on { background: var(--gold); }

/* ── χρυσή λάμψη που ακολουθεί τον δείκτη (έμπνευση «Spotlight card») ── */
.hm-glow { position: relative; isolation: isolate; }
.hm-glow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, -60%), var(--gold-soft), transparent 70%);
  opacity: 0; transition: opacity .3s ease;
}
.hm-glow:hover::before { opacity: 1; }

/* ── δύο στήλες: Επόμενες | Θέλουν εσένα + 7 ημέρες ── */
.hm-main { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s3); align-items: start; }
.hm-col { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.hm-card { padding: var(--s4); }
.hm-card-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); }
.hm-card-t {
  margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-family: var(--serif); font-size: var(--fs-lg); font-weight: 500; letter-spacing: var(--h-track);
}
.hm-card-t > span { display: inline-flex; color: var(--gold-text); }
.hm-card-t > span svg { width: 18px; height: 18px; }
.hm-card-t small { flex-basis: 100%; margin-top: -2px; font-family: var(--sans); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; color: var(--muted); }
.hm-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: var(--r-pill); background: var(--crit-soft); color: var(--crit); font-size: var(--fs-xs); font-weight: 700;
}
.hm-more {
  -webkit-appearance: none; appearance: none; border: 0; background: none; cursor: pointer; padding: 4px 2px;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--gold-text); white-space: nowrap;
}
.hm-more:hover { text-decoration: underline; }
.hm-more-b { display: block; margin-top: var(--s2); }
.hm-rows > * + * { border-top: 1px solid var(--line); }
.hm-empty { margin: var(--s2) 0 0; font-size: var(--fs-sm); color: var(--muted); }

/* ── οι επόμενες μεταφορές ── */
.hm-row {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: var(--s3);
  padding: 7px 4px; border-radius: var(--r-sm); cursor: pointer;
}
.hm-row:hover { background: var(--gold-soft); }
.hm-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.hm-row.is-nodriver .hm-time { color: var(--nodriver); }
.hm-time { font-size: var(--fs-md); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hm-time small { display: block; margin-top: 2px; font-size: var(--fs-2xs); font-weight: 700; color: var(--gold-text); }
.hm-what { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hm-who { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
/* Ιεραρχία (ιδιοκτήτης 04.10): η ΔΙΑΔΡΟΜΗ είναι το κύριο — έντονη, μεγαλύτερη· ο πελάτης
   από πάνω μικρός και κανονικός, ο συνεργάτης ακόμη πιο σβηστός. */
.hm-name { font-size: var(--fs-sm); font-weight: 400; color: var(--ink-2); }
.hm-co { font-size: var(--fs-xs); color: var(--muted); }
.hm-name, .hm-co, .hm-route, .hm-crew { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-sub { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: var(--fs-sm); }
.hm-route { flex: 1 1 auto; min-width: 0; font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.hm-crew { flex: 0 1 auto; max-width: 45%; color: var(--ink-2); }
.hm-side { display: flex; align-items: center; gap: 6px; }
.hm-tag {
  padding: 3px 8px; border-radius: var(--r-pill); white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 600; background: var(--plate); border: 1px solid var(--line);
  /* Το πεδίο πτήσης/πλοίου κουβαλά καμιά φορά ΟΝΟΜΑ («CHAMPIONS LEAGUEJET 1») —
     χωρίς όριο έτρωγε όλη τη γραμμή και το όνομα του πελάτη χανόταν στο κινητό. */
  max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}
/* Πτήση/πλοίο = σύνδεσμος (FlightRadar24 / MarineTraffic) — ΜΠΛΕ σαν το τσιπάκι της
   κάρτας (a.job-mark.job-track), ώστε να ξεχωρίζει από το σκέτο κείμενο («TBA»). */
a.hm-tag.hm-track {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0;
  color: var(--info); text-decoration: none; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.hm-track svg { flex: none; width: 13px; height: 13px; }
.hm-tag-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
a.hm-tag.hm-track:hover { background: var(--info-soft); border-color: var(--info); }
a.hm-tag.hm-track:focus-visible { outline: 2px solid var(--info); outline-offset: 1px; }
/* Αφή (iPhone/iPad): ψηλότερο για δάχτυλο — ίδιο σκεπτικό με το τσιπάκι της κάρτας. */
@media (hover: none) { a.hm-tag.hm-track { min-height: 30px; padding-block: 5px; } }
/* «Χωρίς οδηγό» κάθεται στη θέση του οδηγού (home.js nextRow). */
.hm-crew.is-nodriver { color: var(--nodriver); font-weight: 600; }
.hm-wa {
  -webkit-appearance: none; appearance: none; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--line-2); background: var(--plate); color: var(--wa);
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.hm-wa svg { width: 18px; height: 18px; }
.hm-wa:hover { background: var(--wa); color: #fff; border-color: transparent; }
.hm-wa:active { transform: scale(.92); }
.hm-wa:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── «Θέλουν εσένα» ── */
.hm-need {
  -webkit-appearance: none; appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left; width: 100%;
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 8px 4px; border-radius: var(--r-sm);
}
.hm-need:hover { background: var(--gold-soft); }
.hm-need:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.hm-need-i { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--plate); color: var(--ink-2); }
.hm-need-i svg { width: 16px; height: 16px; }
.hm-need.is-nodriver .hm-need-i { background: var(--nodriver-soft); color: var(--nodriver); }
.hm-need.is-crit .hm-need-i { background: var(--crit-soft); color: var(--crit); }
.hm-need.is-warn .hm-need-i { background: var(--warn-soft); color: var(--warn); }
.hm-need.is-info .hm-need-i { background: var(--info-soft); color: var(--info); }
.hm-need-x { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-sm); line-height: 1.35; }
.hm-need-x small { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-need-go {
  padding: 4px 10px; border-radius: var(--r-pill); background: var(--gold-soft); color: var(--gold-text);
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; transition: background .2s ease, color .2s ease;
}
.hm-need:hover .hm-need-go { background: var(--gold); color: #0a192f; }
.hm-allgood { display: flex; align-items: center; gap: 12px; padding: 8px 4px; }
.hm-allgood-i { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.hm-allgood-i svg { width: 20px; height: 20px; }
.hm-allgood b { display: block; font-weight: 700; }
.hm-allgood span { font-size: var(--fs-sm); color: var(--muted); }

/* ── «Επόμενες 7 ημέρες» (έμπνευση «Weekly KPI chart» + «Heat calendar») ── */
.hm-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; align-items: end; }
.hm-wk-d {
  -webkit-appearance: none; appearance: none; font: inherit; color: inherit; cursor: pointer; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border: 0; border-radius: var(--r-md);
  background: none; transition: background .2s ease;
}
.hm-wk-d:hover { background: var(--gold-soft); }
.hm-wk-d:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.hm-wk-n { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hm-wk-bar { display: flex; align-items: flex-end; width: 12px; height: 60px; overflow: hidden; border-radius: 6px; background: var(--plate); border: 1px solid var(--line); }
.hm-wk-bar i { display: block; width: 100%; border-radius: 5px; background: linear-gradient(180deg, var(--gold-l), var(--gold)); }
.hm-wk-dw { font-size: var(--fs-2xs); font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.hm-wk-dd { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.hm-wk-d.is-today .hm-wk-dd { background: var(--gold); color: #0a192f; font-weight: 800; }
.hm-wk-d.is-today .hm-wk-dw { color: var(--gold-text); }
.hm-wk-nd {
  position: absolute; top: 2px; left: calc(50% + 6px); display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--nodriver); color: var(--nodriver-ink); font-size: var(--fs-2xs); font-weight: 800;
  box-shadow: 0 0 0 2px var(--card-solid);
}

/* ── Launchpad: μικρά πλακίδια όπως τα Delegations του Digital Maps + Dock ── */
.hm-dock { padding: var(--s3) var(--s4); }
.hm-groups { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s2) var(--s3); }
.hm-group { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hm-group-t {
  padding-left: 4px; font-size: var(--fs-2xs); font-weight: 700; color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase;
}
.hm-group.is-star .hm-group-t { color: var(--gold-text); }
.hm-group.is-star .hm-group-t::before { content: "★ "; }
.hm-links { display: flex; flex-wrap: wrap; gap: 2px; }
.hm-link {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 52px; padding: 5px 1px 3px;
  border-radius: var(--r-md); color: var(--ink-2); text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background .2s ease;
}
.hm-link:hover { background: var(--gold-soft); }
.hm-link:active .hm-chip { transform: scale(.94); }
.hm-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
/* Λευκή πλακέτα ΚΑΙ στη νύχτα: κάθε λογότυπο κρατά τα δικά του χρώματα (Viva,
   Mercedes, «10» είναι μαύρα — πάνω σε σκούρο γυαλί θα χάνονταν). Η μεγέθυνση Dock
   αλλάζει ΜΟΝΟ transform (home.js `magnify`) — καμία μετακίνηση διάταξης. */
.hm-chip {
  position: relative; z-index: 1; display: block; width: 40px; height: 40px; overflow: hidden; border-radius: 12px; background: #fff;
  border: 1px solid var(--line-2); box-shadow: 0 1px 0 var(--hair) inset, 0 4px 12px rgba(10, 25, 47, .14);
  transform-origin: 50% 100%; transition: transform .14s ease-out, box-shadow .2s ease;
}
.hm-link:hover .hm-chip { box-shadow: 0 0 0 2px var(--gold), 0 8px 18px rgba(10, 25, 47, .22); }
.hm-chip img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hm-link-t {
  max-width: 50px; overflow: hidden; text-align: center; font-size: var(--fs-2xs); line-height: 1.2; overflow-wrap: normal; word-break: normal; hyphens: manual;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* Το κουμπί WhatsApp στη σειρά κουμπιών της κάρτας — στο πράσινο του WhatsApp — και το μικρό
   μενού του (πελάτης / οδηγός) με το όνομα ή τον αριθμό από κάτω. */
.tact.wa:not(.locked) { color: var(--wa); }
.tmenu-wa .tmenu-item svg { color: var(--wa); }
.tmenu-wa .tmenu-item span { display: flex; flex-direction: column; min-width: 0; }
.tmenu-wa .tmenu-item small { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }

/* ═══ «ΑΝΑΖΗΤΗΣΗ ΠΑΝΤΟΥ» (⌘K) — views/command.js · έμπνευση 21st.dev «Command Menu» ═══ */
html.cmd-open { overflow: hidden; }
.cmd {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center;
  padding: max(10vh, calc(var(--safe-t, 0px) + 12px)) 12px 12px;
  background: rgba(6, 11, 23, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: cmd-fade .16s ease-out;
}
@keyframes cmd-fade { from { opacity: 0; } to { opacity: 1; } }
.cmd-panel {
  display: flex; flex-direction: column; width: min(640px, 100%); max-height: min(560px, 80dvh); overflow: hidden;
  border-radius: 16px; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); animation: cmd-pop .2s cubic-bezier(.22, .9, .3, 1);
}
@keyframes cmd-pop { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.cmd-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cmd-i { display: inline-flex; color: var(--gold-text); }
.cmd-i svg { width: 18px; height: 18px; }
/* 17px: κάτω από 16 το Safari του iPhone ΜΕΓΕΘΥΝΕΙ τη σελίδα στο πάτημα. */
.cmd-in { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: 17px; -webkit-appearance: none; appearance: none; }
.cmd-in::-webkit-search-cancel-button { display: none; }
.cmd-x {
  -webkit-appearance: none; appearance: none; cursor: pointer; font: inherit; font-size: var(--fs-2xs); font-weight: 700;
  padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--plate); color: var(--ink-2);
}
.cmd-list { overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.cmd-g { padding: 10px 10px 4px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cmd-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.cmd-row.on { background: var(--gold-soft); }
.cmd-row.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--gold); }
.cmd-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--plate); color: var(--gold-text); }
.cmd-ico svg { width: 16px; height: 16px; }
.cmd-ico.is-muted { color: var(--muted); }
.cmd-logo { flex: none; width: 30px; height: 30px; overflow: hidden; border-radius: 8px; background: #fff; border: 1px solid var(--line-2); }
.cmd-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cmd-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmd-t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-s { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-meta { flex: none; font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmd-act {
  -webkit-appearance: none; appearance: none; cursor: pointer; flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--plate); color: var(--ink-2);
}
.cmd-act svg { width: 15px; height: 15px; }
.cmd-act:hover { border-color: var(--gold); color: var(--gold-text); }
.cmd-act[aria-label^="WhatsApp"] { color: var(--wa); }
.cmd-empty { display: flex; flex-direction: column; gap: 4px; padding: 22px 14px; text-align: center; font-size: var(--fs-sm); color: var(--muted); }
.cmd-empty b { color: var(--ink); }
.cmd-foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: var(--fs-2xs); color: var(--muted); }

/* ── πλάτη ── */
@media (max-width: 1100px) { .hm-find { min-width: 240px; } }
@media (max-width: 899px) {
  .hm-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .hm-top { align-items: stretch; }
  .hm-hello { font-size: var(--fs-lg); }
  .hm-tools { width: 100%; }
  .hm-find { flex: 1 1 100%; min-width: 0; }
  .hm-kbd { display: none; }
  /* Οι ενέργειες γίνονται λωρίδα που κυλά ΜΕΣΑ της — όχι οριζόντια κύλιση σελίδας. */
  .hm-qas { flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px; }
  .hm-qas::-webkit-scrollbar { display: none; }
  .hm-qa { flex: 1 0 auto; justify-content: center; height: 38px; padding: 0 10px; gap: 5px; font-size: var(--fs-xs); }
  .hm-kpis { gap: var(--s2); }
  .hm-kpi { padding: 9px 11px 10px; }
  .hm-kpi-v { font-size: var(--fs-xl); }
  .hm-spark { display: none; }
  .hm-card { padding: var(--s3); }
  /* Στο κινητό η κάθε μεταφορά παίρνει ύψος αντί να στριμώχνεται: διαδρομή και
     πλήρωμα σε δικές τους γραμμές, ο πελάτης πάνω από την εταιρεία. */
  .hm-row { grid-template-columns: 46px minmax(0, 1fr) auto; gap: var(--s2); }
  .hm-who { flex-wrap: wrap; column-gap: 6px; row-gap: 0; }
  .hm-sub { flex-direction: column; align-items: stretch; gap: 0; }
  /* Στο κινητό η διαδρομή ΑΝΑΔΙΠΛΩΝΕΤΑΙ (ως 2 γραμμές) αντί να κόβεται: με έντονα
     γράμματα το «… → Four Season …» θα έκρυβε ακριβώς τον προορισμό. */
  .hm-route { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .hm-crew { max-width: none; }
  .hm-side { flex-direction: column; align-items: flex-end; gap: 4px; }
  .hm-tag { max-width: 92px; }
  .hm-group { width: 100%; }
  .hm-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
  .hm-link { width: auto; }
  .cmd { padding: calc(var(--safe-t, 0px) + 8px) 8px 8px; }
  .cmd-panel { max-height: 72dvh; }
  .cmd-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-kpi, .hm-link, .hm-wa, .hm-qa, .hm-chip, .hm-track { transition: none; }
  .hm-kpi:hover, .hm-qa:hover { transform: none; }
  .hm-kpi.is-crit .hm-kpi-i { animation: none; }
  .cmd, .cmd-panel { animation: none; }
}

/* ── «Η εφαρμογή μετακόμισε» (04.10.2026, core/moved.js) — ΜΟΝΟ στην παλιά διεύθυνση, όσο
   περιμένουν αλλαγές να σταλούν. Πάνω από όλα, δεν κλείνει, δεν κρύβει τα κουμπιά (κάτω). ── */
.moved-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  padding: 10px 16px calc(10px + var(--safe-b, env(safe-area-inset-bottom, 0px)));
  background: var(--gold); color: #0a192f; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35;
  text-align: center; box-shadow: 0 -4px 18px rgba(0, 0, 0, .25);
}
@media print { .moved-bar { display: none; } }