/* ============================================================================
   live-map.css — «Ζωντανός χάρτης» (views/live-map.js) + η κάρτα «Εντοπισμός
   θέσης» στα «Τα στοιχεία μου» + το παράθυρο QR του «Προσωπικό». 29.09.2026.

   ⚠ ΜΟΝΟ tokens (`var(--…)`), κανένα σταθερό χρώμα επιφάνειας: έτσι ημέρα και
   νύχτα δουλεύουν χωρίς δεύτερο μπλοκ. Οι εξαιρέσεις είναι δύο και γραμμένες
   ρητά: το ΛΕΥΚΟ φόντο του QR (οι σαρωτές θέλουν σκούρο σε ανοιχτό) και τα
   εικονίδια του MapLibre στη νύχτα (είναι μαύρα SVG — αντιστρέφονται).

   ⚠ ΚΑΝΕΝΑ backdrop-filter ΕΔΩ, ΕΠΙΤΗΔΕΣ. Ο χάρτης ξαναζωγραφίζεται σε κάθε
   καρέ όσο κινείται· ένα θόλωμα από πάνω του θα ξαναϋπολογιζόταν κι αυτό σε
   κάθε καρέ (βλ. [[blur-costs-frames]]). Οι λωρίδες και το φύλλο είναι
   σχεδόν αδιαφανή (`--card-solid`), οπότε διαβάζονται χωρίς θόλωμα — και δεν
   χρειάζεται καμία προσθήκη στη λίστα `prefers-reduced-transparency`.
   ========================================================================== */

/* ── Το σχήμα της σελίδας: ο χάρτης πιάνει ΟΛΟ το ύψος κάτω από τη μπάρα ─────
   Ίδια λογική με το `.maps-embed` (views.css): το `.main` γίνεται στήλη ΣΤΑΘΕΡΟΥ
   ύψους και η οθόνη γεμίζει ό,τι μένει κάτω από την κεφαλίδα. ΣΤΑΘΕΡΟΥ, όχι
   `min-height`: αλλιώς μια μακριά λίστα οδηγών θα μεγάλωνε τη σελίδα και ο
   χάρτης θα έφευγε από την οθόνη. Η κεφαλίδα έχει και τη ζώνη της εγκοπής
   (iPhone), γι' αυτό flex και όχι `calc(100dvh - 62px)`. */
.app:has(.lm) { min-height: 100vh; min-height: 100dvh; }
.main:has(> .view > .lm) {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
}
.view:has(> .lm) {
  flex: 1 1 auto; display: flex; flex-direction: column;
  max-width: none; width: 100%; margin: 0; padding: 0; min-height: 0;
}

.lm {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 48%, 400px);
}
/* ⚠ 340px ΣΤΑΘΕΡΑ ΗΤΑΝ ΛΙΓΑ ΓΙΑ ΤΙΣ ΚΑΡΤΕΣ (έλεγχος 30.09.2026): iPad 13″ όρθιο (1032px,
   μενού ανοιχτό 236px) → κάρτες 323px, στενότερες από του iPhone, και ΚΑΘΕ όνομα οδηγού
   κομμένο («Άρης Δοκι…»). Τώρα το 48% του χάρτη+στήλης, από 340 ως 400px: στο iPad όρθιο
   ~382px (ο χάρτης κρατά ~414px), σε στενότερο παράθυρο μένει 340 όπως πριν. */
/* v3 (30.09.2026, «Χάρτης & μεταφορές»): από 1080px η στήλη είναι 440px — εκεί ζουν
   ΚΑΙ οι κάρτες του Ημερολογίου (καρτέλα «Μεταφορές»), που θέλουν το πλάτος τους.
   Ήταν 380px από 1280px. Οι τρεις στήλες (≥1600px) στο τέλος του αρχείου. */
@media (min-width: 1080px) { .lm { grid-template-columns: minmax(0, 1fr) 440px; } }

.lm-stage { position: relative; min-width: 0; min-height: 0; }
/* ⚠ ΔΥΟ ΚΛΑΣΕΙΣ, ΟΧΙ ΜΙΑ: το maplibre-gl.css φορτώνει ΜΕΤΑ από εμάς (μόνο όταν
   ανοίξει η οθόνη) και γράφει `.maplibregl-map { position: relative }` — με
   ίδια ειδικότητα θα νικούσε και ο χάρτης θα είχε ΥΨΟΣ 0 (μετρήθηκε: 331×0).
   Το ίδιο ισχύει για κάθε κανόνα που αγγίζει στοιχεία του MapLibre πιο κάτω. */
.lm .lm-map { position: absolute; inset: 0; background: var(--bg2); isolation: isolate; z-index: 0; }
/* ⚠ ΔΙΚΟ ΤΟΥ ΕΠΙΠΕΔΟ ΣΤΟΙΒΑΞΗΣ (`isolation`, έλεγχος 29.09.2026). Οι δείκτες
   παίρνουν inline `z-index` 1-5 (SOS = 5· 🏎️ = 3 από 30.09) και χωρίς αυτό συναγωνίζονταν ΤΙΣ
   ΛΩΡΙΔΕΣ (`.lm-banners`, 3) στο ίδιο επίπεδο: στο κινητό ένα πρόσωπο SOS
   σκέπαζε το κείμενο και το «Δείξε» της λωρίδας SOS — της μόνης που ζητά
   πράξη ΤΩΡΑ — και έπιανε και τα πατήματα. Τώρα ΟΛΟΣ ο χάρτης είναι κάτω από
   τις λωρίδες. Μέσα στον χάρτη, τα κουμπιά ζουμ και η απόδοση πάνε πάνω από
   κάθε δείκτη (6 > 5· του MapLibre είναι 2). */
.lm .lm-map .maplibregl-ctrl-top-left,
.lm .lm-map .maplibregl-ctrl-top-right,
.lm .lm-map .maplibregl-ctrl-bottom-left,
.lm .lm-map .maplibregl-ctrl-bottom-right { z-index: 6; }

/* ── Λωρίδες πάνω από τον χάρτη ──────────────────────────────────────────────
   Δεξιά αφήνουν χώρο για τα κουμπιά ζουμ. `pointer-events` μόνο στις λωρίδες,
   ώστε ο χάρτης ανάμεσά τους να σέρνεται κανονικά. */
.lm-banners {
  position: absolute; top: 10px; left: calc(10px + var(--safe-l)); right: 56px; z-index: 3;
  display: flex; flex-direction: column; gap: 6px; max-width: 680px;
  pointer-events: none;
}
.lm-ban {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-md);
  background: var(--card-solid); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); font-size: var(--fs-sm); line-height: 1.4;
}
.lm-ban-ico { flex: 0 0 auto; display: inline-flex; margin-top: 1px; }
.lm-ban-ico svg { width: 17px; height: 17px; }
.lm-ban-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lm-ban-txt b { font-weight: 700; color: var(--ink); }
.lm-ban-txt span { color: var(--ink-2); }
.lm-ban-btn { flex: 0 0 auto; align-self: center; }
/* Λωρίδα ΜΕ κουμπί (π.χ. «Ενεργοποίηση» του Υπευθύνου): στο κινητό το κουμπί πάει σε
   ΔΙΚΗ ΤΟΥ γραμμή, αλλιώς έσπρωχνε το κείμενο σε στενή στήλη και η λωρίδα διπλασιαζόταν
   (125 → 212px στα 390px — έλεγχος 30.09.2026). */
@media (max-width: 719px) {
  .lm-ban.has-act { flex-wrap: wrap; row-gap: 6px; }
  .lm-ban.has-act .lm-ban-txt { flex-basis: calc(100% - 27px); }
  .lm-ban.has-act .lm-ban-btn { margin-inline-start: 27px; }
  .lm.lm-tools-open .lm-banners { visibility: hidden; }
}
@media (hover: none) { .lm-ban-btn { min-height: 44px; } }
/* Γέμισμα `-soft` ΠΑΝΩ σε συμπαγές φόντο: διαβάζεται πάνω από οποιοδήποτε
   πλακίδιο του χάρτη χωρίς θόλωμα. */
.lm-ban-off { background: linear-gradient(var(--warn-soft), var(--warn-soft)), var(--card-solid); border-color: var(--warn); }
.lm-ban-off .lm-ban-ico { color: var(--warn); }
.lm-ban-err { background: linear-gradient(var(--crit-soft), var(--crit-soft)), var(--card-solid); border-color: var(--crit); }
.lm-ban-err .lm-ban-ico { color: var(--crit); }
.lm-ban-warn .lm-ban-ico { color: var(--warn); }
.lm-ban-sos {
  background: linear-gradient(var(--crit-soft), var(--crit-soft)), var(--card-solid);
  border: 2px solid var(--crit);
}
.lm-ban-sos .lm-ban-ico, .lm-ban-sos b { color: var(--crit); }

/* Χωρίς φρέσκα δεδομένα (κόπηκε ο server): ΟΛΟΙ οι δείκτες ξεθωριάζουν —
   μια παλιά κουκκίδα δεν πρέπει ποτέ να μοιάζει ζωντανή. */
.lm.is-stale .lm-mkr { opacity: .45; filter: grayscale(1); }

/* ── Η στήλη / το φύλλο των οδηγών ───────────────────────────────────────── */
.lm-side {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  border-inline-start: 1px solid var(--line-2);
  background: var(--card-glass);
  padding-inline-end: var(--safe-r);
}
.lm-grab {
  cursor: default;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  width: 100%; padding: 12px 16px 10px; border: 0; background: none; color: inherit;
  font: inherit; text-align: start; border-bottom: 1px solid var(--line-2);
}
.lm-grab-bar { display: none; }
.lm-grab-row { display: flex; align-items: baseline; gap: 10px; }
.lm-grab-row b { font-size: var(--fs-md); font-weight: 700; }
.lm-count { flex: 1 1 auto; font-size: var(--fs-xs); color: var(--muted); }
.lm-grab-chev { display: none; }
.lm-grab-chev svg { width: 16px; height: 16px; transition: transform var(--t-fast); }
/* Υπολογιστής/iPad: σκέτη επικεφαλίδα, ΙΔΙΑ όψη με το `.lm-grab` — το κουμπί
   του φύλλου υπάρχει μόνο στο κινητό (βλ. `build()` στο live-map.js).
   ΠΡΟΣΘΗΚΗ, όχι αλλαγή: οι κανόνες του κινητού πιο κάτω μένουν ως είχαν. */
.lm-side-h { padding: 12px 16px 10px; border-bottom: 1px solid var(--line-2); }
@media (min-width: 720px) { .lm-grab { display: none; } }
@media (max-width: 719px) { .lm-side-h { display: none; } }

.lm-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 8px calc(var(--s4) + var(--safe-b));
}
.lm-skel { height: 64px; margin: 6px 4px; }
.lm-empty { margin: var(--s4) var(--s3); font-size: var(--fs-sm); color: var(--muted); }

.lm-row { border-radius: var(--r-md); border: 1px solid transparent; margin-bottom: 4px; }
.lm-row.is-sel { border-color: var(--gold); background: var(--gold-soft); }
.lm-row.is-sos { border: 2px solid var(--crit); background: var(--crit-soft); }
.lm-hit {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 10px; border: 0; border-radius: inherit; background: none;
  color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.lm-hit:hover { background: var(--plate-2); }
.lm-hit:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.lm-av {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; color: #fff;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em;
}
.lm-av img, .lm-mk-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 'stale' (πρώην «σιωπηλός» — η λέξη ΚΑΤΑΡΓΗΘΗΚΕ 30.09.2026): ΟΥΔΕΤΕΡΟ, όχι συναγερμός —
   λίγο ξεθωριασμένο πρόσωπο, όπως ο δείκτης του στον χάρτη. */
/* ⚠ ΟΧΙ στο SOS: SOS και μετά σιωπή είναι η ΧΕΙΡΟΤΕΡΗ περίπτωση — δεν ξεθωριάζει ποτέ. */
.lm-row.st-stale:not(.is-sos) .lm-av { filter: grayscale(.6); opacity: .75; }
.lm-row.st-nodevice .lm-av { filter: grayscale(1); opacity: .7; }

.lm-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lm-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lm-name { min-width: 0; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-state { flex: 0 0 auto; padding: 2px 8px; font-size: var(--fs-2xs); }
.lm-sos { flex: 0 0 auto; padding: 2px 8px; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .06em; margin-inline-start: auto; }
.lm-sos + .lm-state { margin-inline-start: 0; }
/* 'stale': το σήμα είναι ΜΑΚΡΥ («Τελευταίο σήμα 29/09 23:10» ≈ 160px) και στα 375px
   άφηνε «Εμμαν…» από το όνομα. Εδώ ΑΝΑΔΙΠΛΩΝΕΤΑΙ κάτω από το όνομα μόλις δεν χωρούν
   μαζί — το όνομα ΔΕΝ κόβεται για χάρη του. Το όνομα μεγαλώνει (flex-grow) ώστε στη
   μία γραμμή τα σήματα να μένουν δεξιά χωρίς auto margins· σε δεύτερη γραμμή πάνε
   αριστερά, κάτω από το όνομα, όπως η γραμμή meta. ΜΟΝΟ στο 'stale' — οι άλλες
   καταστάσεις έχουν σύντομες λέξεις και δεν πειράζονται. */
.lm-row.st-stale .lm-top { flex-wrap: wrap; row-gap: 3px; justify-content: flex-start; }
.lm-row.st-stale .lm-name { flex: 1 1 auto; }
.lm-row.st-stale .lm-sos { margin-inline-start: 0; }
.lm-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: var(--fs-xs); color: var(--muted); }
.lm-dot { color: var(--faint); }
.lm-ago { font-variant-numeric: tabular-nums; }
.lm-revoked { color: var(--crit); font-weight: 600; }
/* Η περιγραφή του εταιρικού κινητού (Α5): αναδιπλώνεται, ποτέ πλάγια κύλιση στα 375px. */
.lm-dev { display: inline-flex; align-items: center; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.lm-dev svg { flex: 0 0 auto; width: 11px; height: 11px; }

/* Μπαταρία: σχέδιο CSS, γεμίζει με `width` από το JS (αριθμός, όχι HTML). */
.lm-batt { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.lm-batt-cell {
  position: relative; width: 18px; height: 9px; padding: 1px;
  border: 1.5px solid currentColor; border-radius: 2px;
}
.lm-batt-cell::after {
  content: ''; position: absolute; right: -4px; top: 1.5px; width: 2px; height: 3px;
  background: currentColor; border-radius: 0 1px 1px 0;
}
.lm-batt-cell i { display: block; height: 100%; background: var(--ok); border-radius: 1px; }
.lm-batt svg { width: 11px; height: 11px; color: var(--warn); }
.lm-batt.is-low { color: var(--crit); font-weight: 600; }
.lm-batt.is-low .lm-batt-cell i { background: var(--crit); }

.lm-job { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; font-size: var(--fs-sm); }
.lm-job-l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; }
.lm-job-time { font-variant-numeric: tabular-nums; }
/* Ο κωδικός κράτησης (ENQ…) ΔΕΝ φαίνεται πια στον χάρτη (30.09.2026) — η κλάση του έφυγε. */
.lm-job-type { color: var(--muted); }
.lm-job-route { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-phase {
  padding: 1px 7px; border-radius: var(--r-pill);
  font-size: var(--fs-2xs); font-weight: 600;
  background: var(--card-2); color: var(--muted);
}
.lm-phase.ph-pre { background: var(--info-soft); color: var(--info); }
.lm-phase.ph-on { background: var(--ok-soft); color: var(--ok); }
.lm-phase.ph-after { background: var(--card-2); color: var(--muted); }

/* Η θέση του ETA — κρυφή μέχρι να αποφασιστεί πάροχος (βλ. live-map.js). */
.lm-eta { display: block; padding: 0 10px 8px 60px; font-size: var(--fs-sm); font-weight: 600; color: var(--info); }
.lm-eta[hidden] { display: none; }

.lm-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 10px 10px 60px; }
.lm-acts .btn svg { width: 14px; height: 14px; }

/* «Χωρίς θέση και μεταφορά — 12»: μαζεμένοι, όπως οι αδρανείς του Πίνακα (ΜΟΝΟ όσοι δεν
   έχουν ούτε θέση ούτε μεταφορά — η θέση χωρίς μεταφορά μένει στην κύρια λίστα). */
.lm-rest { margin-top: 6px; border-top: 1px solid var(--line-2); padding-top: 6px; }
.lm-rest-btn {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 10px; border: 0; background: none; color: var(--muted);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; text-align: start; cursor: pointer;
  border-radius: var(--r-sm);
}
.lm-rest-btn:hover { background: var(--plate-2); color: var(--ink); }
.lm-rest-btn svg { width: 14px; height: 14px; transition: transform var(--t-fast); }
.lm-rest.open .lm-rest-btn svg { transform: rotate(90deg); }

/* ── Δείκτες στον χάρτη ────────────────────────────────────────────────────
   Το `.lm-mkr` είναι το στοιχείο που μετακινεί ο MapLibre (δικό του
   `transform`)· ό,τι αλλάζει όψη ζει στο εσωτερικό `.lm-mk`. */
.lm-mkr { cursor: pointer; outline: none; }
.lm-mk { position: relative; width: 40px; height: 40px; }
.lm-mk-face {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; color: #fff;
  font-size: 13px; font-weight: 700;
  border: 3px solid var(--card-solid);
  box-shadow: 0 2px 8px rgba(10, 25, 47, .38);
}
.lm-mk.st-moving .lm-mk-face { border-color: var(--ok); }
.lm-mk.st-stopped .lm-mk-face { border-color: var(--info); }
/* 'stale': ΕΛΑΦΡΑ ξεθωριασμένος (όχι σβησμένος) — μια παλιά θέση δεν πρέπει να μοιάζει
   ζωντανή, αλλά ούτε να φωνάζει: όλη μέρα είναι συνήθως οδηγός εκτός υπηρεσίας.
   ⚠ ΟΧΙ με SOS: το grayscale έκανε το κόκκινο δαχτυλίδι καφετί-γκρι (SOS και μετά
   σιωπή = η χειρότερη περίπτωση, πρέπει να φωνάζει ΠΙΟ πολύ, όχι λιγότερο). */
.lm-mk.st-stale:not(.is-sos) .lm-mk-face { border-color: var(--faint); filter: grayscale(.6); opacity: .7; }
.lm-mk.is-sel .lm-mk-face { box-shadow: 0 0 0 3px var(--gold), 0 2px 10px rgba(10, 25, 47, .45); }
/* Επιλεγμένος ΜΕ παλιό σήμα: το φίλτρο του stale (γκρι + διαφάνεια) έπιανε ΚΑΙ το χρυσό
   δαχτυλίδι του προσώπου — έβγαινε μπεζ-γκρι και η επιλογή από κάρτα δεν φαινόταν στον
   χάρτη (έλεγχος 30.09.2026). Το δαχτυλίδι ξαναζωγραφίζεται ΠΑΝΩ από το πρόσωπο, σε
   στρώμα που το φίλτρο δεν φτάνει· το πρόσωπο μένει ξεθωριασμένο (το σήμα ΕΙΝΑΙ παλιό). */
.lm-mk.is-sel.st-stale:not(.is-sos)::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 3px var(--gold);
}
.lm-mkr:focus-visible .lm-mk-face { box-shadow: 0 0 0 3px var(--gold); }
.lm-mk-name {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  padding: 1px 7px; border-radius: var(--r-pill); white-space: nowrap;
  font-size: 11px; font-weight: 650; line-height: 1.5;
  background: var(--card-solid); color: var(--ink);
  box-shadow: 0 1px 4px rgba(10, 25, 47, .28);
  pointer-events: none;
}
/* ΤΡΕΧΟΥΣΑ ΤΑΧΥΤΗΤΑ (30.09.2026, «όπως το Life360»): φούσκα ΠΑΝΩ ΔΕΞΙΑ του προσώπου
   (πάνω αριστερά με `.is-left`), αυτοκινητάκι + «62 km/h»· πάνω από 130 km/h 🏎️ με κόκκινο
   δαχτυλίδι. Φαίνεται σε ΚΑΘΕ ζουμ. Δεν πιάνει πατήματα. */
.lm-mk-spd {
  position: absolute; left: calc(100% - 8px); bottom: calc(100% - 12px);
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px 1px 4px; border-radius: var(--r-pill); white-space: nowrap;
  font-size: 11px; font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums;
  background: var(--card-solid); color: var(--ink);
  box-shadow: 0 1px 4px rgba(10, 25, 47, .3);
  pointer-events: none;
}
.lm-mk-spd[hidden] { display: none; }
/* Πορεία βορειοανατολικά: το βέλος θα έπεφτε κάτω από τη φούσκα → πάει ΠΑΝΩ ΑΡΙΣΤΕΡΑ
   (`speedSide` στο live-map.js· έλεγχος 30.09: στις 45°–60° το βέλος χανόταν ολόκληρο). */
.lm-mk-spd.is-left { left: auto; right: calc(100% - 8px); }
.lm-mk-spd-ico { display: inline-flex; line-height: 1; }
.lm-mk-spd-ico svg { width: 13px; height: 13px; color: var(--ok); }
/* 🏎️: ΑΝΟΙΧΤΗ φούσκα με κόκκινο δαχτυλίδι και κόκκινα γράμματα. ΟΧΙ κόκκινο φόντο: το
   emoji είναι κόκκινο αυτοκίνητο σε κάθε πλατφόρμα και χανόταν μέσα του (στα 11px έμενε
   μια σκούρα κηλίδα με ρόδες)· και το λευκό πάνω στο σκούρο-θέμα --crit (#f0776a) έδινε
   2,78:1. Το δαχτυλίδι είναι σκιά, όχι border — ίδιο μέγεθος με την κανονική φούσκα. */
.lm-mk-spd.is-fast {
  color: var(--crit);
  box-shadow: 0 0 0 2px var(--crit), 0 1px 4px rgba(10, 25, 47, .3);
}
/* Όλη η Κρήτη στην οθόνη: μόνο πρόσωπα — τα ονόματα θα έπεφταν το ένα πάνω
   στο άλλο στο Ηράκλειο. Το επιλεγμένο και το SOS κρατούν το όνομα.
   Η ταχύτητα ΔΕΝ κρύβεται (έλεγχος 30.09): το πρώτο άνοιγμα χωράει όλους τους οδηγούς σε
   ζουμ < 10,5 (≈ 8 με οδηγούς σε όλη την Κρήτη), οπότε ο ιδιοκτήτης — που ζήτησε
   «62 km/h» δίπλα στη φωτογραφία, όπως το Life360 — δεν θα την έβλεπε ποτέ χωρίς ζουμ.
   Σε συστάδα, το 🏎️ μένει από πάνω (z-index στο `updateMarker`). */
.lm-lowzoom .lm-mk:not(.is-sel):not(.is-sos) .lm-mk-name { display: none; }
/* Βέλος πορείας: στρέφεται ολόκληρο το τετράγωνο γύρω από το κέντρο του
   προσώπου, οπότε το τρίγωνο «γλιστρά» πάνω στον κύκλο. */
.lm-mk-dir { position: absolute; inset: -10px; pointer-events: none; }
.lm-mk-dir[hidden] { display: none; }
.lm-mk-dir::before {
  content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 9px solid var(--ok);
}
/* SOS: κόκκινο περίγραμμα + παλμός. Με «λιγότερη κίνηση» ο δακτύλιος ΜΕΝΕΙ
   σταθερός — το γενικό `animation-duration: .001ms` του base.css θα τον
   άφηνε στο τελικό καρέ του, δηλαδή ΑΟΡΑΤΟ. */
.lm-mk.is-sos .lm-mk-face { border-color: var(--crit); }
.lm-mk.is-sos::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 3px solid var(--crit); pointer-events: none;
  animation: lm-sos 1.3s ease-out infinite;
}
@keyframes lm-sos {
  from { transform: scale(.85); opacity: .95; }
  to   { transform: scale(1.9);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lm-mk.is-sos::after { animation: none; transform: scale(1.15); opacity: 1; }
}

/* ── Τα κουμπιά και η απόδοση του MapLibre, στα χρώματα της εφαρμογής ───────
   Πρόθεμα `.lm .lm-map` (τρεις κλάσεις): νικά το maplibre-gl.css που φορτώνει
   αργότερα με κανόνες δύο κλάσεων (`.maplibregl-ctrl.maplibregl-ctrl-attrib`). */
.lm .lm-map .maplibregl-ctrl-group {
  background: var(--card-solid); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.lm .lm-map .maplibregl-ctrl-group button { width: 34px; height: 34px; }
.lm .lm-map .maplibregl-ctrl-group button + button { border-top-color: var(--line-2); }
.lm .lm-map .maplibregl-ctrl.maplibregl-ctrl-attrib { background: var(--glass-strong); color: var(--muted); }
.lm .lm-map .maplibregl-ctrl-attrib a { color: var(--ink-2); }
.lm .lm-map .maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact { background: var(--card-solid); }
:root[data-theme="dark"] .lm .lm-map .maplibregl-ctrl-icon,
:root[data-theme="dark"] .lm .lm-map .maplibregl-ctrl-attrib-button { filter: invert(1) hue-rotate(180deg); }
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lm .lm-map .maplibregl-ctrl-icon,
  :root:not([data-theme="light"]) .lm .lm-map .maplibregl-ctrl-attrib-button { filter: invert(1) hue-rotate(180deg); }
}

/* ── Κινητό: ο χάρτης πάνω, οι οδηγοί σε φύλλο από κάτω ─────────────────────
   Μαζεμένο, το φύλλο πιάνει 38% και ο χάρτης το ΥΠΟΛΟΙΠΟ (δεν σκεπάζεται
   τίποτα — ούτε η απόδοση του χάρτη). Ανοιγμένο, ανεβαίνει πάνω από τον χάρτη. */
@media (max-width: 719px) {
  .lm { display: block; --lm-peek: 38%; }
  .lm-stage { position: absolute; left: 0; right: 0; top: 0; bottom: var(--lm-peek); }
  .lm-banners { top: 8px; left: calc(8px + var(--safe-l)); right: 52px; }
  .lm-ban { padding: 8px 10px; }
  .lm-side {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
    height: var(--lm-peek);
    border: 1px solid var(--line-2); border-bottom: 0; border-inline-start-width: 1px;
    border-radius: 16px 16px 0 0;
    background: var(--card-solid); box-shadow: var(--shadow-up);
    padding-inline: var(--safe-l) var(--safe-r);
    transition: height var(--t);
  }
  .lm.sheet-open .lm-side { height: 84%; }
  .lm-grab { padding: 6px 16px 10px; cursor: pointer; }
  .lm-grab-bar {
    display: block; align-self: center; width: 38px; height: 4px;
    border-radius: 2px; background: var(--line);
  }
  .lm-grab-chev { display: inline-flex; color: var(--muted); }
  .lm.sheet-open .lm-grab-chev svg { transform: rotate(180deg); }
  .lm-grab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
  .lm-acts, .lm-eta { padding-left: 10px; }
}

/* ── Χαρτί: ΤΙΠΟΤΑ από τον χάρτη ─────────────────────────────────────────────
   Θέσεις εργαζομένων σε χαρτί είναι αντίγραφο που δεν σβήνεται στις 30 μέρες.
   Μένει μόνο η γραμμή `.print-only` της οθόνης. */
@media print {
  .lm { display: block !important; height: auto !important; }
  .lm-stage, .lm-side, .lm-banners { display: none !important; }
  .main:has(> .view > .lm) { height: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   «Τα στοιχεία μου» — κάρτα «Εντοπισμός θέσης (Traccar)»
   ═══════════════════════════════════════════════════════════════════════════ */
.trk { display: flex; flex-direction: column; gap: var(--s3); }
.trk .fieldset-h { margin-bottom: 0; }
.trk-skel { height: 120px; }
/* «ΑΝΕΝΕΡΓΟΣ»: μόνιμη, με περίγραμμα — δεν είναι απλή υπόδειξη. */
.trk-off { border-color: var(--warn); }
/* «Περιμένει την υπογεγραμμένη ενημέρωση» (v2, Τ23): κατάσταση, όχι υπόδειξη. */
.trk-wait { border-color: var(--info); }
.trk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s2); }
/* ('always') 5 κελιά: το «Τρέχον/Επόμενο παράθυρο» (με το μακρύ «οι θέσεις συνδέονται…»)
   έμενε ΟΡΦΑΝΟ στη 2η σειρά των 4 στηλών — πιάνει όλη τη σειρά. Στο 'jobs' (4 κελιά) και
   στο κινητό (1 στήλη) δεν αλλάζει τίποτα. */
.trk-grid > .trk-kv:nth-child(5):last-child { grid-column: 1 / -1; }
.trk-kv {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 9px 11px; border-radius: var(--r-sm); background: var(--plate-2);
  border: 1px solid var(--line-2);
}
.trk-k { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.trk-v { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; background: none; }
/* Τα `.t-ok/.t-warn` του views.css (Πίνακας) βάζουν και φόντο-χαπάκι· εδώ μόνο χρώμα. */
.trk-v.t-ok { color: var(--ok); }
.trk-v.t-warn { color: var(--warn); }
.trk-v.t-mute { color: var(--muted); font-weight: 500; }
.trk-why p { margin: 0 0 6px; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); }
.trk-why p:last-child { margin-bottom: 0; }
.trk-acts { display: flex; flex-wrap: wrap; gap: var(--s2); }
/* 44px: το ελάχιστο άγγιγμα — τα πατά οδηγός, συχνά με το ένα χέρι. */
.trk-acts .btn { min-height: 44px; text-decoration: none; }
.trk-acts .btn svg { width: 16px; height: 16px; }
.trk-start { background: var(--ok-soft); border-color: transparent; color: var(--ok); font-weight: 600; }
.trk-start:hover { border-color: var(--ok); }
.trk-fresh .btn { text-decoration: none; }
.trk-steps { border-top: 1px solid var(--line-2); padding-top: var(--s2); }
.trk-steps summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.trk-steps ol {
  margin: var(--s2) 0 0; padding-inline-start: 1.35em;
  display: flex; flex-direction: column; gap: 7px;
  font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2);
}
.trk-steps a { color: var(--info); font-weight: 600; }

/* Χαρτί: τα κουμπιά του Traccar (και το μπλοκ με τον σύνδεσμο-κλειδί) δεν
   έχουν νόημα τυπωμένα — και ο σύνδεσμος ΕΙΝΑΙ μυστικό. */
@media print { .trk-acts, .trk-fresh { display: none !important; } }

/* «Προσωπικό» → φόρμα ατόμου → πλαίσιο κλειδιού (μόνο μόνιμος Admin).
   v2: Βεβαίωση Παραλαβής + κλειδί — βλ. `mountStaffTracking` στο live-map.js.
   Τα κενά τα δίνει το `gap` της στήλης (ήταν margin-top στο .row-wrap). */
.trk-adm { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.trk-adm > p { margin: 0; }
.trk-adm-skel { height: 58px; }
.trk-admin .btn svg { width: 14px; height: 14px; }
.trk-revoke { color: var(--crit); }
.trk-st {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  padding: 9px 11px; border-radius: var(--r-sm); background: var(--plate-2);
  border: 1px solid var(--line-2);
}
.trk-line { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.trk-line-k { font-weight: 600; color: var(--ink); }
/* Μόνο χρώμα — τα `.t-*` του views.css βάζουν και φόντο-χαπάκι. */
.trk-line-v { font-weight: 600; background: none; }
.trk-line-v.t-ok { color: var(--ok); }
.trk-line-v.t-warn { color: var(--warn); }
.trk-line-v.t-mute { color: var(--muted); font-weight: 500; }
/* Η φόρμα «Καταχώριση υπογεγραμμένης ενημέρωσης» — μέσα στο πλαίσιο. */
.trk-nform {
  display: flex; flex-direction: column; gap: var(--s3); min-width: 0;
  padding: var(--s3); border-radius: var(--r-sm);
  border: 1px solid var(--gold); background: var(--gold-soft);
}
.trk-nform > p { margin: 0; line-height: 1.5; color: var(--ink-2); }
.trk-err { margin: 0; color: var(--crit); font-weight: 600; }

/* «Θα μπει σε ΕΤΑΙΡΙΚΟ κινητό» — κουτάκι με ΔΥΟ γραμμές κειμένου: στοίχιση
   στην πρώτη γραμμή, όχι στο κέντρο του μπλοκ (το `.chkline` κεντράρει). */
.trk-chk { align-items: flex-start; gap: 10px; }
.trk-chk input { margin-top: 3px; }
.trk-chk > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.trk-chk .tiny { line-height: 1.45; }

/* «Επόμενο παράθυρο»: πώς ΚΛΕΙΝΕΙ (με την άφιξη / στις ΩΩ:ΛΛ) — v2, Α12. */
.trk-sub { font-size: var(--fs-sm); line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }

/* ── Το παράθυρο του QR ──────────────────────────────────────────────────── */
.lmk-seg { align-self: center; }
/* ΛΕΥΚΟ σε κάθε θέμα: οι σαρωτές διαβάζουν σκούρο πάνω σε ανοιχτό. */
.lmk-qr {
  width: min(260px, 72vw); aspect-ratio: 1; margin: 0 auto; padding: 6px;
  background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  display: grid; place-items: center;
}
.lmk-qr svg { width: 100%; height: 100%; display: block; }
.lmk-qr .tiny { color: #3d4650; text-align: center; }
.lmk-qr-skel { width: 100%; height: 100%; }
/* Το QR ΕΙΝΑΙ το κλειδί: αν κάποιος πατήσει «Εκτύπωση» με ανοιχτό το παράθυρο,
   στο χαρτί βγαίνει κενό τετράγωνο. */
@media print { .lmk-qr { visibility: hidden !important; } }
.lmk-steps {
  margin: 0; padding-inline-start: 1.35em;
  display: flex; flex-direction: column; gap: 5px;
  font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   v2 (29.09.2026) — «Σημεία», «Διερεύνηση κράτησης», «Αρχείο πρόσβασης» και η
   γραμμή «κλείνει όταν φτάσει» της επιλεγμένης μεταφοράς. Βλ. live-map.js,
   track-places.js, track-investigate.js. Μόνο tokens — εξαιρέσεις: η κόκκινη
   πινέζα (ίδια με του Google, --action) και τα χρώματα των ιχνών, που πρέπει να
   είναι ΤΑ ΙΔΙΑ με τα στρώματα του χάρτη (hex στο layerColors του live-map.js).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── «Σημεία» + εργαλεία Υπευθύνου: μπάρα (≥720px) ή γωνία χάρτη (κινητό) ─────
   Στο κινητό ένα ακόμη κουμπί δίπλα στο «Όλοι» κατέβαζε τις ενέργειες σε
   δεύτερη γραμμή (μπάρα 62 → 101px, μετρημένο) — εκεί ζουν κάτω από το ζουμ,
   όπως τα κουμπιά στρώσεων του Google Maps. Βλ. `addTopTools` στο live-map.js. */
.lm-tb.is-on { border-color: var(--gold); background: var(--gold-soft); color: var(--ink); }
.lm-tb.is-on svg { color: var(--gold-ink); }
.lm-tb-t { white-space: nowrap; }
.lm-tools .tmenu { min-width: 236px; }
.lm .lm-map .lm-mapctl { display: none; }
.lm .lm-map .lm-mapctl .lm-mapbtn { display: grid; place-items: center; color: var(--ink); }
.lm .lm-map .lm-mapctl .lm-mapbtn svg { width: 18px; height: 18px; }
.lm .lm-map .lm-mapctl .lm-mapbtn.is-on { background: var(--gold-soft); color: var(--gold-ink); }
.lm .lm-map .lm-mapctl .lm-mapbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.lm .lm-map .lm-tools-map { display: block; }
.lm .lm-map .lm-tools-map .tmore-btn { border-top: 1px solid var(--line-2); }
/* Το μενού ανοίγει ΑΡΙΣΤΕΡΑ του κουμπιού, μέσα στον χάρτη.
   ⚠ ΜΕΣΑ ΣΕ `.maplibregl-ctrl-group` κάθε <button> παίρνει τα 34×34 / block /
   padding 0 των κουμπιών ζουμ (και η γραμματοσειρά 12px του χάρτη): οι γραμμές
   του μενού γίνονταν στήλη λέξεων (μετρημένο στα 375px). Επαναφορά εδώ. */
.lm .lm-map .lm-tools-map .tmenu { top: 0; bottom: auto; inset-inline-start: auto; inset-inline-end: calc(100% + 8px); font-family: var(--sans); line-height: 1.4; }
/* (έλεγχος 02.10.2026) ΑΝΑΔΙΠΛΩΣΗ + ΟΡΙΟ ΠΛΑΤΟΥΣ: με nowrap το «Οι οδηγοί βλέπουν συναδέλφους: ΟΧΙ —
   άνοιγμα» (~365px κείμενο) άπλωνε το μενού στα 447px και στα 375px η ΑΡΧΗ κάθε γραμμής έβγαινε έξω
   από την οθόνη (x = −125). Το μενού ξεκινά 8px αριστερά του κουμπιού (~52px από τη δεξιά άκρη):
   χωράει ως 100vw − 66px (12px περιθώριο αριστερά), ποτέ πάνω από 320px. */
.lm .lm-map .lm-tools-map .tmenu { max-width: min(320px, calc(100vw - 66px - var(--safe-l) - var(--safe-r))); }
.lm .lm-map .lm-tools-map .tmenu .tmenu-item {
  display: flex; width: 100%; height: auto; min-height: 40px; padding: 9px 10px;
  border: 0; border-radius: var(--r-xs); background: none;
  font-size: var(--fs-base); color: var(--ink); text-align: start; white-space: normal; overflow-wrap: anywhere;
}
.lm .lm-map .lm-tools-map .tmenu .tmenu-item > span { min-width: 0; }
.lm .lm-map .lm-tools-map .tmenu .tmenu-item:hover { background: var(--card-2); }
@media (max-width: 719px) {
  .topbar #topActions .lm-tb, .topbar #topActions .lm-tools { display: none; }
  .lm .lm-map .lm-mapctl { display: block; }
}

/* ── Η γραμμή «πότε κλείνει» στην επιλεγμένη μεταφορά ─────────────────────── */
.lm-end { display: flex; flex-direction: column; gap: 3px; padding: 0 10px 8px 60px; font-size: var(--fs-sm); }
.lm-end-l { display: flex; align-items: flex-start; gap: 6px; color: var(--ink-2); line-height: 1.4; }
.lm-end-l svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; color: var(--muted); }
.lm-end-l.is-arr svg { color: var(--gold-ink); }
.lm-end-l.is-ok { color: var(--ok); font-weight: 600; }
.lm-end-l.is-ok svg { color: var(--ok); }
.lm-end-l.is-pick svg { color: var(--info); }
.lm-end-x { color: var(--muted); font-weight: 400; }
.lm-end .lm-linkbtn { align-self: flex-start; margin-inline-start: 18px; }

/* Κουμπί που μοιάζει σύνδεσμος — μικρή δευτερεύουσα ενέργεια μέσα σε κείμενο. */
.lm-linkbtn {
  display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 2px 2px;
  border: 0; background: none; color: var(--info); cursor: pointer;
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.lm-linkbtn svg { width: 13px; height: 13px; }
.lm-linkbtn:hover { color: var(--ink); }
.lm-linkbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* ── Το πάνελ στη θέση της λίστας ────────────────────────────────────────── */
.lm-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.lm-panel[hidden] { display: none; }
.lm.has-panel .lm-list, .lm.has-panel .lm-side-h { display: none; }
.lmp-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line-2); flex: 0 0 auto;
}
.lmp-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.lmp-title b { font-size: var(--fs-md); font-weight: 700; white-space: nowrap; }
.lmp-title .lm-count { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lmp-x { flex: 0 0 auto; }
.lmp-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px calc(var(--s4) + var(--safe-b));
}
.lmp-intro, .lmp-hint { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }
.lmp-note { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ok); }
.lmp-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.lmp-tools .btn svg { width: 14px; height: 14px; }
.lmp-tabs { flex: 0 0 auto; }
/* ⚠ Η ΠΑΓΙΔΑ ΤΟΥ .search ΣΕ ΣΤΗΛΗ (βλ. views.css `.tbl-search`): το `flex: 1 1 260px`
   μέσα σε flex-direction: column γίνεται ΥΨΟΣ 260px. */
.search.lmp-search { flex: 0 0 auto; width: 100%; }
.lmp-list { display: flex; flex-direction: column; gap: 2px; }
.lmp-item { display: flex; align-items: center; gap: 10px; }
.lmp-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px;
  padding: 7px 8px; border: 0; border-radius: var(--r-md); background: none;
  color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.lmp-row:hover { background: var(--plate-2); }
.lmp-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.lmp-ico {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--card-2); color: var(--ok);
}
.lmp-ico svg { width: 16px; height: 16px; }
.lmp-row.is-todo .lmp-ico { color: var(--warn); }
.lmp-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lmp-name { font-weight: 600; overflow-wrap: anywhere; line-height: 1.3; }
.lmp-meta { font-size: var(--fs-xs); color: var(--muted); }
.lmp-todo { flex: 0 0 auto; padding: 2px 8px; font-size: var(--fs-2xs); }
.lmp-un { padding: 7px 8px; border-radius: var(--r-md); }
.lmp-un .lmp-ico { color: var(--muted); }
.lmp-un .btn { flex: 0 0 auto; }
.lmp-attr { margin: auto 0 0; padding-top: 6px; font-size: var(--fs-2xs); color: var(--faint); }
.lmp-attr a { color: var(--muted); }

/* Η φόρμα του σημείου */
.lmp-form { display: flex; flex-direction: column; gap: 12px; }
/* «Ορισμός»: το κείμενο της κράτησης ΩΣ ΑΝΑΦΟΡΑ — δεν είναι πεδίο, δεν αποθηκεύεται. */
.lmp-ref {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px; border-radius: var(--r-sm); border: 1px dashed var(--line); background: var(--plate-2);
}
.lmp-ref-t { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.lmp-ref-t b { color: var(--ink); }
.lm-linkbtn.lmp-ref-use { align-self: flex-start; text-align: start; }
.lmp-radius { display: flex; align-items: center; gap: 10px; }
.lmp-range { flex: 1 1 auto; min-width: 0; height: 30px; margin: 0; accent-color: var(--gold-ink); cursor: pointer; }
.lmp-r-out { flex: 0 0 68px; text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.lmp-aliases { display: flex; flex-direction: column; gap: 6px; }
.lmp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lmp-chip {
  display: inline-flex; align-items: center; gap: 2px; max-width: 100%;
  padding: 2px 2px 2px 10px; border-radius: var(--r-pill);
  background: var(--card-2); border: 1px solid var(--line-2); font-size: var(--fs-sm);
}
.lmp-chip span { overflow-wrap: anywhere; }
.lmp-chip button {
  flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px;
  border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer;
}
.lmp-chip button:hover { color: var(--crit); background: var(--crit-soft); }
.lmp-chip button svg { width: 12px; height: 12px; }
.lmp-chips-none { font-size: var(--fs-sm); color: var(--faint); }
.lmp-alias-add { display: flex; gap: 6px; align-items: center; }
.lmp-alias-add .inp { flex: 1 1 auto; min-width: 0; }
.lmp-pos {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  padding: 7px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--plate-2);
  font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.lmp-pos > svg { color: var(--action); }
.lmp-pos-t { overflow-wrap: anywhere; }
.lmp-ver { font-weight: 500; color: var(--ink); }
.lmp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; }
.lmp-acts .delbtn { margin-inline-start: auto; }

/* Η πινέζα της επεξεργασίας: ΚΟΚΚΙΝΗ, όπως του Google Maps (αναγνωρίζεται με
   μισό μάτι) — ίδιο κόκκινο με την κύρια ενέργεια, και στα δύο θέματα. */
.lm-pin { cursor: grab; filter: drop-shadow(0 2px 3px rgba(10, 25, 47, .45)); }
.lm-pin:active { cursor: grabbing; }
.lm-pin svg { display: block; }
.lm-pin path { fill: var(--action); stroke: #fff; stroke-width: 1.4; }
.lm-pin circle { fill: #fff; }

/* ── Διερεύνηση: μόνο τα ίχνη εκείνης της κράτησης ─────────────────────────── */
.lm.is-inv .lm-mkr { display: none; }
.lmi-card {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px;
  border-radius: var(--r-md); background: var(--plate-2); border: 1px solid var(--line-2);
}
.lmi-job-l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; }
.lmi-ref { color: var(--gold-text); font-weight: 700; }
.lmi-type { color: var(--muted); }
.lmi-route { font-size: var(--fs-sm); color: var(--ink-2); overflow-wrap: anywhere; }
.lmi-people { font-size: var(--fs-xs); color: var(--muted); }
.lmi-reason { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--ink-2); overflow-wrap: anywhere; }
.lmi-drv { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.lmi-drv-h { display: flex; align-items: center; gap: 8px; }
.lmi-sw { flex: 0 0 auto; width: 20px; height: 5px; border-radius: 3px; }
/* ΙΔΙΑ hex με τα inv0/inv1/inv2 του layerColors() — το WebGL δεν διαβάζει tokens. */
.lmi-sw.sw-0 { background: #2f6fd0; }
.lmi-sw.sw-1 { background: #8e44ad; }
.lmi-sw.sw-2 { background: #00897b; }
:root[data-theme="dark"] .lmi-sw.sw-0 { background: #7fb0ff; }
:root[data-theme="dark"] .lmi-sw.sw-1 { background: #c9a3e6; }
:root[data-theme="dark"] .lmi-sw.sw-2 { background: #4dd0c0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lmi-sw.sw-0 { background: #7fb0ff; }
  :root:not([data-theme="light"]) .lmi-sw.sw-1 { background: #c9a3e6; }
  :root:not([data-theme="light"]) .lmi-sw.sw-2 { background: #4dd0c0; }
}
.lmi-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); color: var(--ink-2); }
.lmi-facts .is-ok { color: var(--ok); font-weight: 600; }
.lmi-facts .is-mute { color: var(--muted); }
.lmi-facts .is-sos, .lmi-facts .is-sos .lm-linkbtn { color: var(--crit); font-weight: 700; }
.lmi-times summary { cursor: pointer; padding: 4px 0; font-size: var(--fs-sm); font-weight: 600; }
.lmi-tlist { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.lmi-t {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px;
  padding: 5px 8px; border: 0; border-radius: var(--r-sm); background: none;
  color: inherit; font: inherit; font-size: var(--fs-sm); text-align: start; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.lmi-t:hover { background: var(--plate-2); }
.lmi-t:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.lmi-t.is-on { background: var(--gold-soft); box-shadow: 0 0 0 1px var(--gold) inset; }
.lmi-t-time { font-weight: 600; }
.lmi-t-acc { font-size: var(--fs-xs); color: var(--muted); }
.lmi-t-tag {
  margin-inline-start: auto; padding: 1px 7px; border-radius: var(--r-pill);
  font-size: var(--fs-2xs); font-weight: 600; background: var(--card-2); color: var(--muted);
}
.lmi-t.is-arr .lmi-t-tag { background: var(--gold-soft); color: var(--gold-text); }

/* Το παράθυρο «Διερεύνηση κράτησης» */
.lmi-ask { display: flex; flex-direction: column; gap: 12px; }
.lmi-lead { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.lmi-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.lmi-results { display: flex; flex-direction: column; gap: 6px; }
.lmi-item { display: block; min-width: 0; }
.lmi-warn { margin-top: 2px; }
.lmi-job {
  display: flex; flex-direction: column; gap: 3px; width: 100%;
  padding: 9px 11px; border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--plate); color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.lmi-job:hover:not(:disabled) { border-color: var(--gold); background: var(--gold-soft); }
.lmi-job:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.lmi-job:disabled { opacity: .62; cursor: not-allowed; }
.lmi-picked {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; font-size: var(--fs-sm);
  border-radius: var(--r-md); background: var(--plate-2); border: 1px solid var(--line-2);
}
.lmi-picked b { font-size: var(--fs-base); color: var(--ink); }
.lmi-count { align-self: flex-end; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.lmi-count.is-short { color: var(--warn); }
.lmi-foot { flex: 1 1 auto; display: flex; justify-content: flex-end; gap: 8px; }

/* Το παράθυρο «Αρχείο πρόσβασης» */
.lma { display: flex; flex-direction: column; gap: 10px; }
.lma-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.lma-n { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.lma-out { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lma-wrap { max-width: 100%; }
.lma-tbl { min-width: 780px; }
.lma-tbl td { font-size: var(--fs-sm); vertical-align: top; }
.lma-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lma-det { min-width: 220px; overflow-wrap: anywhere; }
.lma-more { align-self: flex-start; }

/* ── Κινητό: το πάνελ σε ΜΙΣΟ φύλλο (ο χάρτης πρέπει να πατιέται για την
   πινέζα), χωρίς διπλό τίτλο — ο τίτλος ζει στην κεφαλίδα του πάνελ. ── */
@media (max-width: 719px) {
  .lm.has-panel { --lm-peek: 52%; }
  .lm.has-panel .lm-grab-row > b, .lm.has-panel .lm-grab-row > .lm-count { display: none; }
  .lm.has-panel .lm-grab-row { justify-content: flex-end; }
  .lm.has-panel .lm-grab { padding-bottom: 4px; }
  .lm-end { padding-left: 10px; }
  .lmi-filters, .lma-filters { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   «Μεταφορές» — η στήλη καρτών του χάρτη (views/live-cards.js, 30.09.2026).
   Οι κάρτες είναι ΟΙ ΚΑΡΤΕΣ ΤΟΥ ΗΜΕΡΟΛΟΓΙΟΥ (views.css)· εδώ μόνο:
     1. ΣΥΜΠΑΓΕΣ φόντο, ΚΑΝΕΝΑ backdrop-filter — η στήλη κάθεται δίπλα σε χάρτη που
        ξαναζωγραφίζεται σε κάθε καρέ ([[blur-costs-frames]]).
     2. ΑΝΤΙΓΡΑΦΑ `@container lmc` των κανόνων `@media (max-width: 719px)` της κάρτας.
        ⚠ ΤΟ ΠΛΑΤΟΣ ΤΟ ΜΕΤΡΑ Η ΣΤΗΛΗ, ΟΧΙ Η ΟΘΟΝΗ: σε 27″ / 13″ η στήλη έχει ~440px
        αλλά η ΟΘΟΝΗ είναι πλατιά, οπότε τα media queries του views.css θα έστηναν
        την εξάστηλη κάρτα του γραφείου μέσα σε 440px. Ίδιο μοτίβο με `@container
        docl` (views.css) και `@container rcpt` (receipt.css).
        ⚠ ΑΝ ΑΛΛΑΞΕΙ ΚΑΝΟΝΑΣ ΚΑΡΤΑΣ ΣΤΟ `@media (max-width: 719px)` ΤΟΥ views.css,
        ΑΛΛΑΖΕΙ ΚΑΙ ΕΔΩ — αλλιώς η στήλη του χάρτη δείχνει παλιά κάρτα.
        Ό,τι σημειώνεται «⟲» ΑΚΥΡΩΝΕΙ κανόνα των πλατιών media queries (≥720 /
        ≥1080) που το κινητό δεν έχει — χωρίς αυτά η κάρτα θα ήταν μείγμα.
        ⚠ ΕΙΔΙΚΟΤΗΤΑ: πρόθεμα `.lm-cards .lmc-item` (0,3,0) — το `body.role-admin
        .job` του views.css (0,2,1) αλλάζει τις στήλες ΜΟΝΟ για τον Admin και θα
        νικούσε ένα σκέτο `.lm-cards .job`.
     3. Η γραμμή «ζωντανά» (`.lmc-live`) / το 🔒 (`.lmc-conf`) κάτω από οδηγό·όχημα, με
        ΑΥΤΟΜΑΤΗ θέση: ζωντανά → σχόλιο → σειρά κουμπιών (`order`), ώστε να μη μένει
        ΑΔΕΙΑ γραμμή πλέγματος (που θα κρατούσε δύο κενά) όταν λείπει κάποιο.
   Σε browser χωρίς container queries (Safari < 16) μένει η κάρτα της οθόνης.
   ═══════════════════════════════════════════════════════════════════════════ */
.lm-cards {
  container: lmc / inline-size;
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0; height: 100%;
}

/* ── Η γραμμή φίλτρων: ΜΙΑ γραμμή, ≤ 36px, κυλά πλάγια αν δεν χωρά ─────────── */
.lmc-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 2px 8px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  border-bottom: 1px solid var(--line-2);
}
.lmc-bar::-webkit-scrollbar { display: none; }
.lmc-nd, .lmc-who {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 9px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--card2-solid); color: var(--muted);
  font: inherit; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; cursor: pointer;
}
.lmc-nd svg { width: 13px; height: 13px; }
.lmc-nd-t, .lmc-who-t { min-width: 0; }
.lmc-n {
  min-width: 18px; padding: 1px 5px; border-radius: var(--r-pill); text-align: center;
  font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; background: var(--card-solid); color: var(--faint);
}
/* > 0 χωρίς οδηγό: ΚΟΚΚΙΝΟ — είναι η μόνη πληροφορία της γραμμής που θέλει τηλέφωνο. */
.lmc-nd.is-crit { color: var(--crit); border-color: var(--crit); background: linear-gradient(var(--crit-soft), var(--crit-soft)), var(--card-solid); }
.lmc-nd.is-crit .lmc-n { background: var(--crit); color: #fff; }
/* Αναμμένο φίλτρο = ΧΡΥΣΟ (ο κανόνας επιλογής της εφαρμογής). */
.lmc-nd.on { box-shadow: 0 0 0 1.5px var(--gold); }
.lmc-nd:focus-visible, .lmc-who:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
/* Το τσιπ «Νίκος Π. ✕» (πάτημα δείκτη): αναμμένο φίλτρο, άρα χρυσό. */
.lmc-who { border-color: var(--gold); background: var(--gold-soft); color: var(--ink); padding-inline-end: 6px; }
.lmc-who svg { width: 12px; height: 12px; color: var(--muted); }
.lmc-who:hover svg { color: var(--crit); }
/* Οι τύποι: τα κουμπιά του Ημερολογίου (`.seg-type`), σε ύψος 30px — με ΣΥΝΤΟΜΟ σήμα
   στο χρώμα του τύπου («→ 19  ↓ 13  ↑ 14  D 9  E 5», λέξη στο title) και ΦΥΣΙΚΟ πλάτος.
   ⚠ ΟΧΙ `flex: 1 1 0` με κομμένη λέξη (έλεγχος 30.09.2026): σε 440px έμεναν
   «Tr… Ά… Av…» (54px το καθένα, και «Άφιξη»/«Αναχώρηση» και τα δύο «Ά…»), σε 340px
   μισά γράμματα, και με το τσιπ οδηγού σκέτοι αριθμοί. Αν κάποτε δεν χωρούν, η γραμμή
   κυλά πλάγια (`overflow-x`) — δεν κόβεται τίποτα. */
.lm-cards .lmc-types { flex: 0 0 auto; width: auto; min-width: 0; height: 30px; padding: 2px; }
.lm-cards .lmc-types button { flex: 0 0 auto; height: 24px; padding: 0 6px; gap: 4px; }
.lm-cards .lmc-types .job-dir { overflow: visible; }
.lm-cards .lmc-types .seg-n { padding: 1px 4px; min-width: 16px; }
.lmc-tg { font-size: var(--fs-sm); font-weight: 800; line-height: 1; }
/* Στενή στήλη (iPad όρθιο, κινητό) ή με τσιπ οδηγού: το «Χωρίς οδηγό» γίνεται ⚠ + N (το
   όνομα μένει στο aria-label/title). */
@container lmc (max-width: 399px) { .lmc-nd-t { display: none; } }
.lmc-bar:has(.lmc-who) .lmc-nd-t { display: none; }

/* ── Η λίστα ─────────────────────────────────────────────────────────────── */
/* Το σώμα: η λίστα + το χάπι «Θέλουν προσοχή N ↑» ΠΑΝΩ της (όχι μέσα: δεν σπρώχνει καμία
   κάρτα όταν φαίνεται/κρύβεται). */
.lmc-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.lmc-attjump {
  position: absolute; z-index: 3; top: 6px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 24px);
  height: 30px; padding: 0 12px; border-radius: var(--r-pill);
  border: 1px solid var(--crit); color: var(--crit);
  background: linear-gradient(var(--crit-soft), var(--crit-soft)), var(--card-solid);
  box-shadow: var(--shadow-sm);
  font: inherit; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; cursor: pointer;
}
.lmc-attjump[hidden] { display: none; }
.lmc-attjump svg { flex: 0 0 auto; width: 13px; height: 13px; }
.lmc-attjump-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lmc-attjump:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* `position: relative`: το `offsetTop` της γραμμής «Τώρα» μετριέται ως προς ΑΥΤΗΝ. */
.lmc-scroll {
  position: relative; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 8px calc(var(--s4) + var(--safe-b));
}
.lmc-day {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 2px 4px 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2);
}
/* «Σήμερα» από άλλη μέρα (`?date=` του Ημερολογίου): δευτερεύον, σαν σύνδεσμος. */
.lmc-today {
  flex: 0 0 auto; min-height: 30px; padding: 2px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--card2-solid); color: var(--ink);
  font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
}
.lmc-today:hover { border-color: var(--gold); }
.lmc-today:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.lmc-grp { margin-bottom: 10px; }
.lmc-h {
  display: flex; align-items: center; gap: 6px; margin: 4px 4px 6px;
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.lmc-hn {
  padding: 0 6px; border-radius: var(--r-pill); background: var(--card2-solid);
  font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--faint);
}
.lmc-att .lmc-h { color: var(--crit); }
/* Η ΓΡΑΜΜΗ «ΤΩΡΑ»: κόκκινη, όπως σε κάθε ημερολόγιο — εδώ κυλά η στήλη όταν ανοίγει. */
.lmc-now {
  display: flex; align-items: center; gap: 8px; margin: 6px 2px 12px;
  color: var(--crit); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.lmc-now-t { flex: 0 0 auto; }
.lmc-now::before { content: ''; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--crit); }
.lmc-now::after { content: ''; flex: 1 1 auto; height: 2px; border-radius: 1px; background: var(--crit); }
/* «Ολοκληρώθηκαν (N) ▸» — μαζεμένες, όπως οι «Χωρίς θέση και μεταφορά» της λίστας οδηγών. */
.lmc-fold {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 36px;
  padding: 6px 4px; border: 0; border-top: 1px solid var(--line-2); background: none;
  color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: 600; text-align: start; cursor: pointer;
}
.lmc-fold:hover { color: var(--ink); }
.lmc-fold:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.lmc-fold svg { width: 14px; height: 14px; order: -1; transition: transform var(--t-fast); }
.lmc-done.open .lmc-fold svg { transform: rotate(90deg); }
.lmc-done > .job-list { margin-top: 4px; }
/* Η αιτία «προσοχής» πάνω από την κάρτα (χωρίς οδηγό / σύγκρουση). */
.lmc-why { margin: 2px 4px 3px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.35; color: var(--crit); overflow-wrap: anywhere; }

/* ── Οι κάρτες: ΣΥΜΠΑΓΕΣ φόντο, ΚΑΝΕΝΑ θόλωμα ─────────────────────────────── */
.lm-cards .lmc-item > .job {
  background: var(--card-solid);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.lm-cards .lmc-item > .job:hover,
.lm-cards .lmc-item > .job:focus-within { background: var(--card2-solid); }
/* Επιλεγμένη (πάτημα κάρτας ή δείκτη): ΧΡΥΣΟ περίγραμμα, όπως η γραμμή οδηγού. */
.lm-cards .lmc-item.is-sel > .job,
.lm-cards .lmc-item.is-sel > .job:hover { border-color: var(--gold); box-shadow: 0 0 0 1.5px var(--gold), var(--shadow-sm); }
/* Πάτημα δείκτη → η κάρτα του «αναβοσβήνει» μία φορά. Με λιγότερη κίνηση: σταθερό. */
.lm-cards .lmc-item.is-flash > .job { animation: lmc-flash 1.4s ease-out 1; }
@keyframes lmc-flash {
  0%, 30% { box-shadow: 0 0 0 3px var(--gold), 0 0 18px 2px var(--gold); }
  100% { box-shadow: 0 0 0 1.5px var(--gold), var(--shadow-sm); }
}
@media (prefers-reduced-motion: reduce) {
  .lm-cards .lmc-item.is-flash > .job { animation: none; box-shadow: 0 0 0 3px var(--gold); }
}

/* Ζωντανά → σχόλιο → σειρά κουμπιών: ΑΥΤΟΜΑΤΗ θέση κάτω από τα σταθερά κελιά. */
.lm-cards .lmc-item > .job > .lmc-live,
.lm-cards .lmc-item > .job > .lmc-conf { grid-column: 1 / -1; grid-row: auto; order: 1; min-width: 0; }
.lm-cards .lmc-item > .job > .job-note-row { grid-row: auto; order: 2; }
.lm-cards .lmc-item > .job > .job-bar { grid-row: auto; order: 3; }
.lm-cards .lmc-item > .job:not(:has(> .job-note-row)) > .job-bar { grid-row: auto; }

/* Η γραμμή «ζωντανά»: κουκκίδα στα χρώματα του χάρτη + ΚΕΙΜΕΝΟ (ποτέ μόνο χρώμα). */
.lm-cards .lmc-item > .job > .lmc-live:not([hidden]) {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.35; color: var(--ink-2);
}
.lmc-live-t { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.lmc-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.lmc-live.lk-moving .lmc-dot { background: var(--ok); }
.lmc-live.lk-stopped .lmc-dot { background: var(--info); }
.lmc-live.lk-arrived .lmc-dot { background: var(--ok); box-shadow: 0 0 0 2px var(--ok-soft); }
.lmc-live.lk-arrived .lmc-live-t { color: var(--ok); }
/* Παλιό σήμα: ΟΥΔΕΤΕΡΟ γκρι, όπως ο δείκτης του στον χάρτη — όχι συναγερμός. */
.lmc-live.lk-stale .lmc-dot { background: var(--faint); }
.lmc-live.lk-stale .lmc-live-t,
.lmc-live.lk-idle .lmc-live-t,
.lmc-live.lk-off .lmc-live-t,
.lmc-live.lk-nodevice .lmc-live-t,
.lmc-live.lk-partner .lmc-live-t,
.lmc-live.lk-plan .lmc-live-t { color: var(--muted); font-weight: 500; }
/* Χωρίς θέση (περιμένει / εκτός / χωρίς Traccar / συνεργάτης / προγραμματισμένος): ΚΟΥΦΙΑ κουκκίδα. */
.lmc-live.lk-idle .lmc-dot,
.lmc-live.lk-off .lmc-dot,
.lmc-live.lk-nodevice .lmc-dot,
.lmc-live.lk-partner .lmc-dot,
.lmc-live.lk-plan .lmc-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); }
.lmc-live.lk-sos .lmc-dot { background: var(--crit); box-shadow: 0 0 0 2px var(--crit-soft); }
.lmc-live.lk-sos .lmc-live-t { color: var(--crit); font-weight: 800; }
/* Εμπιστευτική: σκέτο σήμα, ΚΑΜΙΑ θέση οδηγού. */
.lm-cards .lmc-item > .job > .lmc-conf { display: flex; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.lmc-conf > span {
  padding: 1px 8px; border-radius: var(--r-pill);
  border: 1px dashed var(--line); background: var(--card2-solid);
}

/* ── ΑΝΤΙΓΡΑΦΑ των κανόνων `@media (max-width: 719px)` της κάρτας (views.css) ── */
@container lmc (max-width: 719px) {
  /* views.css «ΤΟ `<wbr>` ΤΩΝ ΔΩΜΑΤΙΩΝ ΣΒΗΝΕΙ ΣΤΟ ΚΙΝΗΤΟ» */
  .lm-cards .lmc-item .job-mark wbr { display: none; }

  /* views.css «ΚΙΝΗΤΟ: ΚΑΡΤΕΣ, όπως στο combined.html» */
  .lm-cards .lmc-item > .job {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 6px 12px;
    padding: 11px 13px 11px 16px;
    align-items: normal;                                   /* ⟲ ≥720: center */
  }
  .lm-cards .lmc-item .job-when  { grid-column: 1; grid-row: 1; }
  .lm-cards .lmc-item .job-dir-m { display: block; grid-column: 2; grid-row: 1; justify-self: center; align-self: start; min-width: 0; }
  .lm-cards .lmc-item .job-money { grid-column: 3; grid-row: 1; justify-self: end; align-items: flex-end; }
  .lm-cards .lmc-item .job-head  { display: none; }
  .lm-cards .lmc-item .job-head:has(.job-ref) { display: block; }
  .lm-cards .lmc-item .job-head:has(.job-ref) .job-dir { display: none; }
  .lm-cards .lmc-item .job-money-in { align-items: center; justify-content: normal; }   /* ⟲ ≥720: flex-end */
  .lm-cards .lmc-item .job-pay { flex: 0 1 auto; width: auto; justify-content: normal; } /* ⟲ ≥720: 20px στήλη */
  .lm-cards .lmc-item .job-time  { font-size: var(--fs-md); }

  .lm-cards .lmc-item .job-main   { grid-column: 1 / -1; grid-row: 2; }
  .lm-cards .lmc-item .job-client { grid-column: 1 / -1; grid-row: 3; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  .lm-cards .lmc-item .job-crew {
    display: grid; grid-template-columns: 34px auto minmax(0, 1fr);
    align-items: center; gap: 0 8px;
    grid-row: 4; grid-column: 1 / 2;
    text-align: start;                                     /* ⟲ ≥1080: center */
  }
  .lm-cards .lmc-item .job-veh {
    display: flex; flex-direction: row; align-items: center;
    gap: 6px; flex-wrap: nowrap;
    grid-row: 4; grid-column: 2 / -1; justify-self: end; min-width: 0;
  }
  .lm-cards .lmc-item .job-veh > .job-veh-t { order: 1; }
  .lm-cards .lmc-item .job-veh > .job-veh-p { order: 2; }
  .lm-cards .lmc-item .job-veh > .qp,
  .lm-cards .lmc-item .job-veh > img,
  .lm-cards .lmc-item .job-veh > .job-veh-none { order: 3; }
  .lm-cards .lmc-item .job-crew .av { justify-self: center; width: 27px; height: 27px; }   /* ⟲ ≥1080: 34px */
  .lm-cards .lmc-item .job-veh img  { width: 34px; height: 20px; }
  .lm-cards .lmc-item .job-veh-none { justify-self: center; }
  .lm-cards .lmc-item .job-crew-n { grid-column: 2 / -1; }
  .lm-cards .lmc-item .job-veh:empty { display: none; }
  /* Σχόλιο: όλο το πλάτος, στοιχισμένο δεξιά. Η ΓΡΑΜΜΗ του (5 στο views.css) εδώ
     μπαίνει ΑΥΤΟΜΑΤΑ κάτω από τα ζωντανά — δες πιο πάνω. */
  .lm-cards .lmc-item .job-note-row { grid-column: 1 / -1; }
  /* (Τα `.job > .tactions` του κινητού ΔΕΝ αντιγράφονται: η κάρτα δεν έχει πια
     μόνιμα κουμπιά από 05.09.2026 — η σειρά είναι το `.job-bar` από κάτω.) */

  .lm-cards .lmc-item .job-mark {
    display: inline-flex; margin-top: 4px; padding: 2px 8px;
    background: var(--card-2); border-radius: var(--r-pill);
    align-items: center; white-space: nowrap; min-width: auto; max-width: none;   /* ⟲ ≥720: αναδίπλωση */
  }
  .lm-cards .lmc-item .job-mark > span:last-child { min-width: auto; overflow-wrap: normal; text-wrap: wrap; } /* ⟲ ≥720 */
  .lm-cards .lmc-item .job-mark svg { margin-top: 0; }                            /* ⟲ ≥720: 1px */
  .lm-cards .lmc-item .job-mark .ico-emoji { height: auto; }                      /* ⟲ ≥720: 13px */
  .lm-cards .lmc-item .job-route { font-size: var(--fs-md); }

  /* views.css «ΣΕΙΡΑ ΚΟΥΜΠΙΩΝ»: όλο το πλάτος, το κενό γραμμής (6px) φαγωμένο. */
  .lm-cards .lmc-item > .job > .job-bar { grid-column: 1 / -1; margin-top: -6px; }

  /* views.css «ΚΙΝΗΤΟ: η διαδρομή ΔΕΝ κόβεται ποτέ» — το λουρί κουκκίδα·γραμμή·βέλος. */
  .lm-cards .lmc-item .job-route {
    --rail: 16px;
    --dot: 7px;
    --half: .65em;
    padding-inline-start: var(--rail);
    flex-wrap: wrap; row-gap: 6px; align-items: flex-start;
  }
  .lm-cards .lmc-item .job-route > span {
    white-space: normal; overflow: visible; text-overflow: clip;
    overflow-wrap: anywhere;
  }
  .lm-cards .lmc-item .job-route > .rt-a { flex: 1 0 100%; position: relative; }
  .lm-cards .lmc-item .job-route > .rt-b { position: relative; }
  .lm-cards .lmc-item .job-route > .arr { display: none; }
  .lm-cards .lmc-item .job-note { align-self: center; }
  .lm-cards .lmc-item .job-route > .rt-a::before,
  .lm-cards .lmc-item .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);
  }
  .lm-cards .lmc-item .job-route > .rt-a::before { border: 1.5px solid var(--faint); background: transparent; }
  .lm-cards .lmc-item .job-route > .rt-b::before { background: var(--muted); }
  .lm-cards .lmc-item .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);
  }
  .lm-cards .lmc-item .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);
  }

  /* (Οι τύποι της γραμμής φίλτρων ΔΕΝ αντιγράφονται: έχουν δικό τους σύντομο σήμα, βλ.
     `.lmc-types` πιο πάνω.) */
}
/* ΜΟΝΟ ΣΤΗ ΣΤΗΛΗ (ΟΧΙ αντίγραφο του κινητού): χωρίς όχημα, το όνομα του οδηγού παίρνει
   ΚΑΙ τη μεσαία στήλη — το κελί του οχήματος κρατά μόνο το εικονίδιο του επιλογέα. Στο iPad
   όρθιο κάθε όνομα κοβόταν («Άρης Δοκι…», 69/97px) δίπλα σε άδειο κελί (έλεγχος 30.09.2026). */
@container lmc (max-width: 719px) {
  .lm-cards .lmc-item > .job:not(:has(> .job-veh .job-veh-t)) > .job-crew { grid-column: 1 / 3; }
  .lm-cards .lmc-item > .job:not(:has(> .job-veh .job-veh-t)) > .job-veh { grid-column: 3; }
}
/* Αφή: η πτήση/το πλοίο στα 26px του κινητού (views.css `@media (hover: none)`) — το
   ⟲ του `@media (min-width: 720px) and (hover: none)` (6,5px χωρίς min-height). */
@media (hover: none) {
  @container lmc (max-width: 719px) {
    .lm-cards .lmc-item .job-mark.job-track { min-height: 26px; padding-block: 4px; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v3 — «ΧΑΡΤΗΣ & ΜΕΤΑΦΟΡΕΣ»: η διάταξη ανά πλάτος (live-map.js, 30.09.2026)
     ≥ 1600px  τρεις στήλες: Μεταφορές 440 | χάρτης | Οδηγοί 380 (27″ 2560×1440)
     1080–1599 χάρτης + στήλη 440 με «Μεταφορές | Οδηγοί» (13″ MacBook, iPad 13″ οριζόντια)
     720–1079  ίδιες καρτέλες στη στήλη των 340–400 (iPad 13″ όρθιο ~382) — η κάρτα
               στενεύει με το `@container lmc` πιο πάνω, όχι με το πλάτος της οθόνης
     < 720     το φύλλο του κινητού ΟΠΩΣ ΗΤΑΝ + διακόπτης «Οδηγοί | Μεταφορές» (ζήτημα
               ιδιοκτήτη) ΣΤΗ ΓΡΑΜΜΗ ΤΗΣ ΛΑΒΗΣ· ΤΙΠΟΤΑ άλλο στο κινητό.
   ⚠ ΤΟ 1600 ΕΙΝΑΙ ΚΑΙ ΣΤΟ JS (`WIDE3_MQ`): εκεί αποφασίζεται ΠΟΥ κάθεται ο κόμβος της
   στήλης (αριστερή στήλη ή καρτέλα). Αλλάζουν ΜΑΖΙ.
   ⚠ ΚΑΝΕΝΑ backdrop-filter (βλ. κεφαλίδα): οι στήλες δίπλα στον χάρτη.
   ═══════════════════════════════════════════════════════════════════════════ */
.lm-cardcol { display: none; }
.lm-cardslot, .lm-panebox { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.lm-pane-wait { padding: 8px; }
.lm-pane-err { margin: 12px; }

/* Οι καρτέλες: το `.seg` της εφαρμογής, στη γραμμή του τίτλου «Οδηγοί». Ο αριθμός
   «N με θέση» μένει δεξιά — μόνο στην καρτέλα των οδηγών (αφορά εκείνους). */
.lm-tabs {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 8px 12px 8px 14px; border-bottom: 1px solid var(--line-2);
}
.lm-tabs .lm-seg { flex: 0 0 auto; padding: 2px; }
.lm-tabs .lm-tab { height: 30px; padding: 0 14px; font-weight: 600; }
/* Αφή (iPad): 40px — η γραμμή του τίτλου έχει χώρο. */
@media (pointer: coarse) { .lm-tabs .lm-tab { height: 40px; } }
.lm-tabs .lm-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.lm-tabs .lm-count { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm.tab-cards .lm-tabs .lm-count { visibility: hidden; }

/* 720–1599: οι καρτέλες ΑΝΤΙ για τον τίτλο — καμία επιπλέον γραμμή. */
@media (min-width: 720px) and (max-width: 1599px) { .lm-side-h { display: none; } }
/* Κάτω από 1600 (και στο κινητό) φαίνεται ΜΙΑ από τις δύο. */
@media (max-width: 1599px) {
  .lm.tab-cards .lm-list { display: none; }
  .lm.tab-drivers .lm-cardslot { display: none; }
}
/* Ανοιχτό πάνελ («Σημεία», «Διερεύνηση») = παίρνει τη θέση της λίστας ΟΠΩΣ ΠΡΙΝ:
   οι καρτέλες και οι μεταφορές κρύβονται ώσπου να κλείσει (≥1600 η αριστερή στήλη μένει). */
.lm.has-panel .lm-tabs, .lm.has-panel .lm-cardslot { display: none; }

/* ≥ 1600px: τρεις στήλες, χωρίς καρτέλες. Ρητές θέσεις — η αριστερή στήλη είναι ΤΕΛΕΥΤΑΙΑ
   στο DOM (με παλιό CSS δεν παίρνει το κελί του χάρτη) και `hidden` κάτω από 1600. */
@media (min-width: 1600px) {
  .lm { grid-template-columns: 440px minmax(0, 1fr) 380px; }
  .lm-cardcol {
    display: flex; flex-direction: column; min-width: 0; min-height: 0;
    grid-column: 1; grid-row: 1;
    border-inline-end: 1px solid var(--line-2);
    background: var(--card-glass);
    padding-inline-start: var(--safe-l);
  }
  .lm-stage { grid-column: 2; grid-row: 1; }
  .lm-side { grid-column: 3; grid-row: 1; }
  .lm-tabs, .lm-cardslot { display: none; }
}

/* Κινητό: ο διακόπτης ΣΤΗ ΓΡΑΜΜΗ ΤΗΣ ΛΑΒΗΣ, στη θέση του τίτλου «Οδηγοί» (όπως στο
   iPad). ⚠ Ήταν ΚΑΤΩ από τη λαβή (έλεγχος 30.09.2026): 42px λιγότερα στο μαζεμένο φύλλο
   — η λίστα οδηγών έπεφτε από 2 ολόκληρες γραμμές σε 1 — και ο τίτλος επαναλάμβανε την
   καρτέλα («Οδηγοί» / «Οδηγοί»). Η λαβή είναι <button> (δεν χωρά κουμπιά μέσα της), οπότε
   ο διακόπτης κάθεται ΑΠΟ ΠΑΝΩ της (`absolute`, στο ύψος της γραμμής της: περίγραμμα 1 +
   6 + λωρίδα 4 + κενό 4 = 15px)· ό,τι άλλο της λαβής (αριθμός, βελάκι) πατιέται όπως
   πριν. Ο τίτλος μένει για τον αναγνώστη οθόνης (όνομα της λαβής), αόρατος. 40px στόχοι
   αντίχειρα. Με ανοιχτό πάνελ ο διακόπτης κρύβεται και ο τίτλος ξαναφαίνεται.
   ΜΕΤΡΗΜΕΝΟ (390×844): λαβή 63px → η λίστα οδηγών κρατά 2 ολόκληρες γραμμές στο
   μαζεμένο φύλλο (με 67px έμενε 1 — οι γραμμές είναι 110px με τη «Μετά:»). */
@media (max-width: 719px) {
  .lm:not(.has-panel) .lm-grab { gap: 4px; padding-bottom: 4px; }
  .lm:not(.has-panel) .lm-grab-row { min-height: 44px; align-items: center; }
  .lm:not(.has-panel) .lm-grab-row > b {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .lm:not(.has-panel) .lm-grab .lm-count {
    margin-inline-start: 200px; min-width: 0; text-align: end;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .lm:not(.has-panel) .lm-grab-chev { margin-inline-start: auto; }
  .lm-tabs {
    position: absolute; z-index: 1; top: 15px; left: calc(14px + var(--safe-l));
    padding: 0; border: 0;
  }
  .lm-tabs .lm-seg { padding: 1px; gap: 1px; }
  .lm-tabs .lm-tab { flex: 0 0 auto; min-width: 94px; height: 40px; padding: 0 12px; }
  .lm-tabs .lm-count { display: none; }
  .lm.tab-cards .lm-grab .lm-count { display: none; }
}

/* ΑΦΗ (iPad/iPhone, έλεγχος 30.09.2026): η γραμμή φίλτρων ΜΕΝΕΙ ≤ 36px (κανόνας
   πυκνότητας) — τα κουμπιά της πιάνουν ΟΛΟ το ύψος της (34px αντί 30/24). Η αναδίπλωση
   «Ολοκληρώθηκαν» και το «Σήμερα» φτάνουν τα 44/36px. */
@media (pointer: coarse) {
  .lmc-bar { padding-block: 1px; }
  .lmc-nd, .lmc-who { height: 34px; }
  .lm-cards .lmc-types { height: 34px; }
  .lm-cards .lmc-types button { height: 30px; }
  .lmc-fold { min-height: 44px; }
  .lmc-today { min-height: 36px; }
  .lmc-attjump { height: 36px; }
}

/* Επιλογή ΑΠΟ ΚΑΡΤΑ (`is-jobsel`): ο οδηγός της με χρυσό δαχτυλίδι, οι ΑΛΛΟΙ σβηστοί.
   Το SOS ΠΟΤΕ δεν σβήνει. Μόνο από κάρτα — η επιλογή από λίστα/δείκτη μένει όπως ήταν. */
.lm.is-jobsel .lm-mk:not(.is-sel):not(.is-sos) { opacity: .4; }

/* «Μετά: 11:30 Μάλια → Αεροδρόμιο · σε 25′» στη γραμμή κάθε οδηγού. Η διαδρομή
   κόβεται, ΠΟΤΕ η ώρα ή το «σε 25′». Πορτοκαλί ως 20′ (SOON_MINUTES του Πίνακα),
   ΚΟΚΚΙΝΟ με «⚠» όταν η επόμενη παραλαβή είναι πριν από το τέλος της τρέχουσας. */
.lm-next {
  display: flex; align-items: baseline; gap: 5px; min-width: 0; margin-top: 1px;
  font-size: var(--fs-xs); color: var(--muted);
}
.lm-next[hidden] { display: none; }
.lm-next-k { flex: 0 0 auto; font-weight: 700; color: var(--ink-2); }
.lm-next-t { flex: 0 0 auto; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lm-next-r { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-next-in { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lm-next.is-soon .lm-next-t, .lm-next.is-soon .lm-next-in { color: var(--warn); font-weight: 700; }
.lm-next.is-clash .lm-next-k, .lm-next.is-clash .lm-next-t, .lm-next.is-clash .lm-next-in { color: var(--crit); font-weight: 700; }

/* Το εικονίδιο του Ημερολογίου προς τον χάρτη: ΜΟΝΟ από 720px — το Ημερολόγιο του
   κινητού μένει ίδιο (η μπάρα τίτλου του κινητού δεν χωρά άλλο κουμπί, βλ. «Σημεία»). */
@media (max-width: 719px) { .topbar #topActions .cal-live { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   v4 (02.10.2026) — «ΣΑΝ ΤΟ LIFE360», ΓΥΡΟΣ 1 (αποφάσεις ιδιοκτήτη Α18–Α22)
   live-map.js (γραφείο), team-map.js (οδηγοί), track-week.js (εβδομάδα), live-cards.js.
   Μόνο tokens. Εξαιρέσεις, γραμμένες ρητά: η μπλε γραμμή διαδρομής ζει στο WebGL
   (hex στο `routeColors` του live-map.js) — εδώ ΔΕΝ υπάρχει.
   ⚠ ΤΟ ΚΟΚΚΙΝΟ ΤΟΥ «ΑΡΓΕΙ» ΕΙΝΑΙ ΚΑΤΑΣΤΑΣΗ (--crit: δαχτυλίδι, λωρίδα, σήμα με απαλό φόντο) —
   ΠΟΤΕ γεμάτο κουτί σαν το κόκκινο κουμπί της κύριας ενέργειας (--action, [[primary-action-red]]).
   ⚠ ΚΑΝΕΝΑ backdrop-filter (κεφαλίδα του αρχείου: ο χάρτης ξαναζωγραφίζεται σε κάθε καρέ).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── (Α21) «Heraklion Airport · εδώ και 37 λεπτά»: το σήμα του σταματημένου είναι ΜΑΚΡΥ — όπως
   το 'stale', αναδιπλώνεται κάτω από το όνομα αντί να το κόβει. Ως 2 γραμμές μέσα στο σήμα. ── */
.lm-row.st-stopped .lm-top { flex-wrap: wrap; row-gap: 3px; justify-content: flex-start; }
.lm-row.st-stopped .lm-name { flex: 1 1 auto; }
.lm-row.st-stopped .lm-state { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }

/* ── (02.10.2026, Α23) «Χωρίς διαδρομή»: ο πάροχος δεν έδωσε δρόμο, άρα ΚΑΜΙΑ γραμμή στον χάρτη (ποτέ
   ευθεία). ΣΙΩΠΗΛΟ κείμενο δίπλα στη φάση — όχι σήμα, όχι χρώμα κατάστασης· ο λόγος στο title. ── */
.lm-noroute { font-size: var(--fs-2xs); color: var(--muted); white-space: nowrap; }

/* ── (Α22) «Αργεί ~12′» / «Οριακά» / «Το κινητό δεν στέλνει» / «Μπαταρία 15%» ────────────── */
.lm-warns { display: flex; flex-wrap: wrap; gap: 4px; }
.lm-warns[hidden] { display: none; }
.lm-warn, .lmc-warn {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--r-pill);
  font-size: var(--fs-2xs); font-weight: 700; line-height: 1.6; white-space: nowrap;
  font-variant-numeric: tabular-nums; border: 1px solid transparent;
}
.lm-warn.is-late, .lmc-warn.is-late { background: var(--crit-soft); color: var(--crit); border-color: var(--crit); }
.lm-warn.is-tight, .lmc-warn.is-tight,
.lm-warn.is-ready, .lmc-warn.is-ready { background: var(--warn-soft); color: var(--lm-warn-ink); border-color: var(--warn); }
/* (έλεγχος 02.10.2026) ΑΝΤΙΘΕΣΗ: το --warn (#b07d1a) πάνω στο --warn-soft έδινε ~3,1:1 σε κείμενο 10px
   bold — κάτω από το AA (4,5:1). Στη ΜΕΡΑ το ΚΕΙΜΕΝΟ των πορτοκαλί σημάτων παίρνει σκούρο κεχριμπαρένιο
   (#805700: 5,5:1 στο απαλό φόντο, 6,4:1 σε λευκό)· περίγραμμα / δαχτυλίδι / εικονίδιο μένουν --warn.
   Ρητή εξαίρεση από το «μόνο tokens» της κεφαλίδας: το tokens.css δεν έχει σκούρο warn για κείμενο.
   ΝΥΧΤΑ: το --warn (#eab74a) σε σκούρο φόντο περνά ήδη — μένει αυτό. */
:root { --lm-warn-ink: #805700; }
:root[data-theme="dark"] { --lm-warn-ink: var(--warn); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lm-warn-ink: var(--warn); } }

/* Ο δείκτης: ΔΑΧΤΥΛΙΔΙ γύρω από το πρόσωπο (το ::after ανήκει στο SOS και στο χρυσό του
   επιλεγμένου — εδώ ::before). Το SOS κερδίζει: έχει δικό του κόκκινο που πάλλεται. */
.lm-mk.is-late::before, .lm-mk.is-tight::before {
  content: ''; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  border: 3px solid var(--crit);
}
.lm-mk.is-tight::before { border-color: var(--warn); border-style: dashed; }
.lm-mk.is-sos::before { display: none; }

/* Η λωρίδα ειδοποιήσεων πάνω από τον χάρτη: ΜΙΑ σειρά που κυλά οριζόντια (στο κινητό ο χάρτης
   είναι μικρός — δεύτερη και τρίτη σειρά θα τον σκέπαζαν). Πάτημα → ο οδηγός στο κάδρο. */
.lm-al-strip {
  pointer-events: auto; display: flex; gap: 6px; overflow-x: auto; overscroll-behavior: contain;
  scrollbar-width: none; padding: 1px; margin: -1px;
}
.lm-al-strip::-webkit-scrollbar { display: none; }
.lm-al-strip[hidden] { display: none; }
.lm-al {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; min-height: 30px;
  padding: 3px 10px 3px 8px; border-radius: var(--r-pill);
  background: var(--card-solid); color: var(--ink); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); font: inherit; font-size: var(--fs-xs); line-height: 1.3; cursor: pointer;
  white-space: nowrap;
}
.lm-al svg { width: 13px; height: 13px; flex: 0 0 auto; }
.lm-al:hover { border-color: var(--ink-2); }
.lm-al:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.lm-al-n { font-weight: 700; }
.lm-al-t { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lm-al.is-late { border-color: var(--crit); box-shadow: inset 3px 0 0 var(--crit), var(--shadow-sm); }
.lm-al.is-late svg, .lm-al.is-late .lm-al-t { color: var(--crit); font-weight: 700; }
.lm-al.is-tight, .lm-al.is-ready { border-color: var(--warn); box-shadow: inset 3px 0 0 var(--warn), var(--shadow-sm); }
.lm-al.is-tight svg, .lm-al.is-ready svg { color: var(--warn); }
.lm-al.is-tight .lm-al-t, .lm-al.is-ready .lm-al-t { color: var(--lm-warn-ink); }
@media (pointer: coarse) { .lm-al { min-height: 36px; } }
/* (έλεγχος 02.10.2026) ΜΕ ΠΟΝΤΙΚΙ η μία σειρά που κυλά δεν φαίνεται ότι κυλά (κρυφή μπάρα, καμία
   χειρονομία): στα 1440px η 4η ειδοποίηση κοβόταν κάτω από το ζουμ ως «Δημήτρης Σ». Εκεί ο χάρτης
   είναι μεγάλος → ΑΝΑΔΙΠΛΩΣΗ σε ως 2 σειρές· πέρα από αυτές κάθετη κύλιση με ΟΡΑΤΗ λεπτή μπάρα.
   Στην αφή (κινητό/tablet) μένει η μία σειρά που σέρνεται με το δάχτυλο. */
@media (pointer: fine) {
  .lm-al-strip { flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; max-height: 70px; scrollbar-width: thin; }
  .lm-al-strip::-webkit-scrollbar { display: block; width: 6px; }
  .lm-al-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
}
.lm.is-inv .lm-al-strip { display: none; }

/* Στήλη «Μεταφορές»: η κάρτα που αργεί — ΠΕΡΙΓΡΑΜΜΑ, όχι γέμισμα. Η ΕΠΙΛΕΓΜΕΝΗ κρατά το χρυσό
   της (το σήμα «Αργεί» μένει στη γραμμή «ζωντανά»). */
.lm-cards .lmc-item.is-late:not(.is-sel) > .job { border-color: var(--crit); box-shadow: 0 0 0 1.5px var(--crit), var(--shadow-sm); }
.lm-cards .lmc-item.is-tight:not(.is-sel) > .job { border-color: var(--warn); box-shadow: 0 0 0 1.5px var(--warn), var(--shadow-sm); }
.lm-cards .lmc-item > .job > .lmc-live:has(> .lmc-warns) { flex-wrap: wrap; row-gap: 3px; }
.lmc-warns { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* ── (Α18) Η πινέζα της τελικής ταχύτητας (μόνιμος Admin) ─────────────────────────────────── */
.lm-topspd {
  position: relative; padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--card-solid); color: var(--crit); border: 2px solid var(--crit);
  box-shadow: 0 2px 8px rgba(10, 25, 47, .35); font-size: 11px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; pointer-events: none; margin-bottom: 8px;
}
.lm-topspd::after {
  content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--crit);
}

/* ── (Α18) «Εβδομάδα» — γραμμή οδηγού (γραφείο), «Η εβδομάδα μου» (οδηγός), αναφορά ────────── */
.lm-wk-slot { padding: 0 10px 10px 60px; }
@media (max-width: 719px) { .lm-wk-slot { padding-left: 10px; } }
.wk { display: block; }
.wk-sel { padding: 10px; border-radius: var(--r-md); background: var(--card-solid); border: 1px solid var(--line-2); }
.wk-card { display: flex; flex-direction: column; gap: var(--s3); }
.wk-card .fieldset-h { margin-bottom: 0; }
.wk-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wk-head { display: flex; align-items: center; gap: 6px; }
.wk-range { flex: 1 1 auto; text-align: center; font-variant-numeric: tabular-nums; }
.wk-nav svg { width: 16px; height: 16px; }
.wk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; }
.wk-kv {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 8px 10px; border-radius: var(--r-sm); background: var(--plate-2); border: 1px solid var(--line-2);
  font: inherit; color: inherit; text-align: start;
}
.wk-k { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.wk-v { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wk-v.is-fast, .wk-v.is-crit { color: var(--crit); }
.wk-v.is-warn { color: var(--warn); }
.wk-sub { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }
.wk-sub svg { width: 11px; height: 11px; flex: 0 0 auto; }
button.wk-top { cursor: pointer; }
button.wk-top:hover:not(:disabled) { border-color: var(--gold); background: var(--gold-soft); }
button.wk-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
button.wk-top:disabled { cursor: default; }
.wk-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; height: 104px; }
.wk-bar { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.wk-bar-v { font-size: var(--fs-2xs); color: var(--muted); font-variant-numeric: tabular-nums; min-height: 1.3em; }
.wk-bar-c {
  flex: 1 1 auto; width: 100%; max-width: 28px; display: flex; align-items: flex-end;
  border-radius: 5px; background: var(--plate-2); overflow: hidden;
}
.wk-bar-c i { display: block; width: 100%; background: var(--info); border-radius: 5px 5px 0 0; }
.wk-bar.is-today .wk-bar-c i { background: var(--gold); }
.wk-bar.is-today .wk-bar-d { color: var(--gold-text); font-weight: 800; }
.wk-bar.is-future { opacity: .45; }
.wk-bar-d { font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); }
.wk-since { margin: 0; font-size: var(--fs-xs); line-height: 1.45; color: var(--muted); }
.wk-note { margin: 0; }
/* (02.10.2026, γύρος 2 — D5) Βεβαίωση παλαιότερη της 0.4: ΚΑΤΑΣΤΑΣΗ (πορτοκαλί λωρίδα), όχι κουμπί — το
   κόκκινο είναι η κύρια ενέργεια. Κείμενο --lm-warn-ink (≥ 4,5:1 στη μέρα, UX8). */
.wk-old {
  margin: 0; padding: 8px 10px; border-radius: var(--r-sm); line-height: 1.45;
  background: var(--warn-soft); color: var(--lm-warn-ink); border-left: 3px solid var(--warn);
}
.wk-err { margin: 0; color: var(--crit); font-weight: 600; }
.wk-skel { height: 150px; }
/* Η αναφορά (παράθυρο): ◀ εβδομάδα ▶ + ταξινόμηση, και ο πίνακας. */
.wk-rep { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wk-rep-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.wk-rep-bar .wk-head { flex: 1 1 260px; max-width: 420px; }
.wk-wrap { max-width: 100%; }
.wk-tbl { min-width: 720px; }
.wk-tbl td { font-size: var(--fs-sm); }
/* (έλεγχος 02.10.2026) ΚΙΝΗΤΟ: ο πίνακας των 720px έδειχνε στα 375px μόνο Οδηγό / Χιλιόμετρα / Οδήγηση —
   η «Τελική» και τα > 110 / > 130 έμεναν εκτός οθόνης ακόμη κι όταν ταξινομούσες με την τελική. Κάτω
   από 720px κάθε οδηγός = ΚΑΡΤΑ: όνομα σε όλο το πλάτος και τα 6 νούμερα σε 3 στήλες, με την ετικέτα
   πάνω από το καθένα (`data-l` του track-week.js). Η κεφαλίδα μένει για αναγνώστη οθόνης (κρυφή οπτικά).
   Υπολογιστής/tablet: ο πίνακας όπως ήταν ([[dont-touch-views-that-work]]). */
@media (max-width: 719px) {
  .wk-wrap { overflow-x: visible; }
  table.tbl.wk-tbl { min-width: 0; display: block; }
  table.tbl.wk-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  table.tbl.wk-tbl tbody { display: block; }
  table.tbl.wk-tbl tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
  table.tbl.wk-tbl tbody tr:last-child { border-bottom: 0; }
  table.tbl.wk-tbl tbody td { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 0; border: 0; text-align: start; }
  table.tbl.wk-tbl tbody td:first-child { grid-column: 1 / -1; }
  table.tbl.wk-tbl tbody td[data-l]::before {
    content: attr(data-l); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
  }
  .wk-tbl .wk-when { white-space: normal; }
}
.wk-who { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.wk-av {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; color: #fff; font-size: var(--fs-2xs); font-weight: 700;
}
.wk-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-fast { color: var(--crit); font-weight: 700; }
.wk-when { display: block; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }

/* ── (Α19) Ο «Χάρτης» του οδηγού (views/team-map.js) — ΙΔΙΑ διάταξη με το γραφείο ──────────── */
.tm-me {
  flex: 0 0 auto; padding: 1px 8px; font-size: var(--fs-2xs); font-weight: 800;
  background: var(--gold-soft2); color: var(--gold-text); border-color: var(--gold);
}
.lm-team .lm-top { flex-wrap: wrap; row-gap: 3px; justify-content: flex-start; }
.lm-team .lm-name { flex: 1 1 auto; }
.lm-row.is-me:not(.is-sel) { background: var(--gold-soft); }
.tm-line { min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.lm-row.st-stale .tm-line { color: var(--muted); }
.tm-dest { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.tm-dest svg { flex: 0 0 auto; width: 12px; height: 12px; color: var(--gold-ink); }
.tm-dest span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* «Εσύ» στον χάρτη: χρυσό περίγραμμα και ετικέτα — ο ίδιος βρίσκεται με μια ματιά. */
.lm-mk.is-me .lm-mk-face { border-color: var(--gold); }
.lm-mk.is-me .lm-mk-name { background: var(--gold); color: #1a1a1a; }
/* 403 (κλειστό από το γραφείο κ.λπ.): ΜΗΝΥΜΑ στη θέση του χάρτη — καθόλου χάρτης, καθόλου φύλλο. */
.lm.is-deny { display: block; overflow: auto; }
.lm.is-deny .lm-stage, .lm.is-deny .lm-grab, .lm.is-deny .lm-side-h { display: none; }
.lm.is-deny .lm-side {
  position: static; height: auto; border: 0; border-radius: 0; box-shadow: none; background: none;
}
.tm-deny {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  max-width: 460px; margin: 40px auto; padding: 24px 20px; border-radius: var(--r-md);
  background: var(--card-solid); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm);
}
.tm-deny b { font-size: var(--fs-md); color: var(--ink); }
.tm-deny p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.tm-deny-ico { display: inline-flex; color: var(--muted); }
.tm-deny-ico svg { width: 28px; height: 28px; }
.tm-deny .btn { min-height: 44px; }
/* «Όλοι» / «Εγώ» του οδηγού στη γωνία του χάρτη — σε ΚΑΘΕ πλάτος (τα «Σημεία» του γραφείου μόνο στο κινητό). */
.lm .lm-map .tm-ctl { display: block; }
/* Κινητό: στον χάρτη των οδηγών ΔΕΝ υπάρχουν καρτέλες στη γραμμή της λαβής — ο τίτλος «Συνάδελφοι»
   ξαναφαίνεται και ο αριθμός δεν σπρώχνεται 200px (εκεί κάθεται ο διακόπτης του γραφείου). */
@media (max-width: 719px) {
  .lm.lm-team:not(.has-panel) .lm-grab-row > b {
    position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: nowrap;
  }
  .lm.lm-team:not(.has-panel) .lm-grab .lm-count { margin-inline-start: 0; }
}
/* Ο χάρτης των οδηγών ΔΕΝ έχει καρτέλες ούτε στήλη μεταφορών: ο τίτλος «Συνάδελφοι» μένει σε κάθε
   πλάτος (720–1599 τον κρύβει ο κανόνας του γραφείου), και ≥1600 ΔΥΟ στήλες, όχι τρεις με κενή. */
@media (min-width: 720px) { .lm.lm-team .lm-side-h { display: block; } }
@media (min-width: 1600px) {
  .lm.lm-team { grid-template-columns: minmax(0, 1fr) 380px; }
  .lm.lm-team .lm-stage { grid-column: 1; }
  .lm.lm-team .lm-side { grid-column: 2; }
}
/* Κλάσεις που το JS γράφει (ελέγχονται από το tools/check-classes.py) — χωρίς νέα όψη. */
.lm-mk-spd-t, .lm-topspd-t { font-variant-numeric: tabular-nums; }
.wk-sort { flex: 0 0 auto; }