/*
 * Patrol - ένα φύλλο στυλ, πρώτα για κινητό.
 *
 * ΠΡΟΕΠΙΛΟΓΗ ΤΟ ΣΚΟΥΡΟ (βλ. theme.js). Η παλέτα είναι του RestoPOS, όπου
 * μετρήθηκε κατά WCAG και στα δύο θέματα (≥4,5:1). Τα --*-fill είναι
 * γεμίσματα κουμπιών και σημάτων· τα --accent/--success/--danger είναι και
 * χρώματα ΚΕΙΜΕΝΟΥ, γι' αυτό στο φωτεινό σκουραίνουν ενώ τα γεμίσματα μένουν.
 *
 * ΚΑΝΕΝΑ 100dvh/100vh ΓΙΑ ΥΨΟΣ: στο RestoPOS μέτρησε 800px σε οθόνη 965px
 * και εξαφάνισε την κάτω μπάρα. Η σελίδα εδώ απλώς ρέει.
 */
:root {
  color-scheme: dark;

  --bg:          #12141a;
  --surface:     #1b1e26;
  --surface-2:   #232733;
  --border:      #2f3543;
  --text:        #e8eaf0;
  --text-dim:    #9aa3b5;
  --accent:      #e8a33d;
  --accent-ink:  #1a1206;
  --success:     #4caf7d;
  --danger:      #e05a4f;
  --link:        #7cc4ff;

  --accent-fill:  #e8a33d;
  --success-fill: #4caf7d;
  --danger-fill:  #e05a4f;

  --ok-bg:     rgba(76, 175, 125, 0.16);
  --error-bg:  rgba(224, 90, 79, 0.16);

  --radius: 12px;
  --tap:    48px;
  --sidebar-w: 232px;
}

html.is-light {
  color-scheme: light;

  --bg:        #f4f5f8;
  --surface:   #ffffff;
  --surface-2: #eceef3;
  --border:    #c9ced9;
  --text:      #1a1d24;
  --text-dim:  #555d6e;
  --accent:    #8a5300;
  --success:   #1a7348;
  --danger:    #b42318;
  --link:      #0b62b3;

  --accent-fill:  #e8a33d;
  --success-fill: #4caf7d;
  --danger-fill:  #b42318;

  --ok-bg:    rgba(26, 115, 72, 0.12);
  --error-bg: rgba(180, 35, 24, 0.10);
}

/* Το hidden πρέπει να νικά κάθε display: ένα .btn-block με hidden φαινόταν. */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--link); }
h1 { font-size: 1.45rem; margin: 0 0 12px; }
h2 { font-size: 1.1rem; margin: 0 0 10px; }
p { margin: 0 0 10px; }

.muted  { color: var(--text-dim); }
.small  { font-size: 0.875rem; }
.center { text-align: center; }
.mono   { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.out    { white-space: pre-line; margin-top: 8px; }
.text-good { color: var(--success); font-weight: 600; }
.text-bad  { color: var(--danger); font-weight: 600; }

/* --- Κέλυφος: το μενού ΔΕΝ ΚΡΥΒΕΤΑΙ ΠΟΤΕ ------------------------------
 *
 * Ζήτημα του χρήστη 16/09/2026. Στο κινητό μπάρα επάνω που μένει στη θέση
 * της με την κύλιση· από 900 px στήλη αριστερά σε όλο το ύψος. Ούτε «☰».
 *
 * z-index 1100: πάνω από τα χειριστήρια του Leaflet (1000), αν ποτέ
 * επικαλυφθούν.
 */
.shell {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  padding-top: max(8px, env(safe-area-inset-top));
}

.brand { color: var(--accent); font-weight: 800; text-decoration: none; }

.who {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.who small { color: var(--text-dim); }

.inline { display: inline; margin: 0; }

button.link, a.link {
  background: none;
  border: 0;
  color: var(--link);
  font: inherit;
  padding: 8px 4px;
  cursor: pointer;
  text-decoration: none;
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 0 12px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.duty-pill {
  flex: none;
  padding: 3px 10px;
  border: 1px solid var(--success);
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.duty-pill.is-warn { border-color: var(--danger); background: var(--error-bg); }

.tabs a {
  flex: none;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--text-dim);
  text-decoration: none;
}

.tabs a.is-active { background: var(--surface-2); color: var(--text); font-weight: 600; }

.content {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: max(32px, env(safe-area-inset-bottom));
}

.back { display: inline-block; margin-bottom: 8px; color: var(--text-dim); text-decoration: none; }

/* --- Κάρτες, φόρμες, κουμπιά ------------------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.stack > * + * { margin-top: 12px; }

label { display: block; color: var(--text-dim); font-size: 0.9rem; }

input:not([type="checkbox"]), select {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin-top: 4px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  /* 16px: κάτω από αυτό το iPhone μεγεθύνει τη σελίδα όταν πατάς το πεδίο. */
  font-size: 16px;
}

label.check { display: flex; align-items: center; gap: 10px; color: var(--text); min-height: var(--tap); }
label.check input { width: 22px; height: 22px; margin: 0; }

.field-error { color: var(--danger); font-size: 0.875rem; }

/* Ρυθμιστής (ένταση φωνής): μεγάλο ύψος για το δάχτυλο, χρώμα της εφαρμογής. */
input[type="range"] { padding: 0 8px; accent-color: var(--accent-fill); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn:disabled { opacity: 0.6; }
.btn-primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-ink); }
.btn-block { display: flex; width: 100%; }
.btn-sm { min-height: 38px; padding: 6px 12px; font-size: 0.9rem; }
.btn-lg { min-height: 56px; font-size: 1.1rem; }
.btn-icon { min-width: 44px; min-height: 44px; padding: 6px 10px; }
.btn-block + .btn-block { margin-top: 8px; }

.flash { padding: 12px; border-radius: 10px; margin-bottom: 12px; }
.flash .btn { margin-top: 10px; }
.flash-ok    { background: var(--ok-bg); color: var(--text); border: 1px solid var(--success); }
.flash-error { background: var(--error-bg); color: var(--text); border: 1px solid var(--danger); }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.tone-good { background: var(--success-fill); color: #0b1f14; }
.tone-bad  { background: var(--danger-fill); color: #ffffff; }
.tone-warn { background: var(--accent-fill); color: var(--accent-ink); }
.tone-dim  { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); }

details summary { cursor: pointer; font-weight: 600; min-height: 32px; }

.facts { display: grid; grid-template-columns: minmax(7rem, 40%) 1fr; gap: 6px 12px; margin: 10px 0 0; }
.facts dt { color: var(--text-dim); }
.facts dd { margin: 0; overflow-wrap: anywhere; }

ol.small { padding-left: 20px; margin: 0; }

/* --- Λίστες ------------------------------------------------------------ */
.list, .scan-list { display: grid; gap: 8px; margin-bottom: 16px; }

.row, .scan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  color: var(--text);
  text-decoration: none;
}

.row { display: flex; justify-content: space-between; gap: 12px; }
.row small { display: block; color: var(--text-dim); }
.row .right { text-align: right; }
.is-off { opacity: 0.55; }

.scan-card { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.scan-time strong { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.scan-time small, .scan-who, .scan-verdict small { display: block; color: var(--text-dim); font-size: 0.85rem; }
.scan-place { font-weight: 600; }
.scan-verdict { text-align: right; }

@media (max-width: 420px) {
  .scan-card { grid-template-columns: auto 1fr; }
  .scan-verdict { grid-column: 1 / -1; text-align: left; }
  .scan-verdict small { display: inline; margin-left: 8px; }
}

/* --- Η οθόνη της σάρωσης: μια ματιά, στο σκοτάδι --------------------- */
.land { text-align: center; }
.land-status { font-size: 1.2rem; font-weight: 800; }
.land.is-known .land-status { color: var(--success); }
.land.is-unknown .land-status { color: var(--accent); }
.land-time { font-size: 3.2rem; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 6px; }
.land-date { color: var(--text-dim); font-size: 0.9rem; }
.land-place { font-size: 1.3rem; font-weight: 700; margin-top: 10px; }
.land-who { color: var(--text-dim); margin-bottom: 4px; }
.land .flash { text-align: left; margin-top: 12px; }

.geo-head { font-weight: 700; margin-bottom: 8px; }
.geo-live { font-size: 1.1rem; }
.geo-result { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.geo .btn { margin-top: 10px; }

.ready h1 { margin-top: 0; }
.nfc-box { margin-top: 12px; }

.tag-url {
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
  user-select: all;
  -webkit-user-select: all;
}

/* --- Είσοδος ---------------------------------------------------------- */
.auth-wrap { padding: 10vh 16px 32px; }

.auth-card {
  max-width: 420px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

/* Κεφαλίδα εισόδου: εταιρεία (τίτλος), εφαρμογή, υποστήριξη, σήμα λειτουργίας. */
.auth-head { margin-bottom: 18px; text-align: center; }
.auth-title { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: 0.02em; line-height: 1.2; }
.auth-brand { margin-top: 2px; color: var(--accent); font-size: 1.15rem; font-weight: 800; }
.auth-support { margin-top: 6px; color: var(--text-dim); font-size: 0.9rem; }

.auth-notice {
  width: fit-content;
  margin: 12px auto 0;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--accent-fill);
  color: var(--accent-ink);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.auth-card > p { margin: 16px 0 0; }

/* --- Υπομενού, κεφαλίδες ενοτήτων ------------------------------------- */
.subnav {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}

.subnav a {
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
}

.subnav a.is-active { background: var(--surface-2); color: var(--text); font-weight: 600; }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.section-head h2 { margin: 0; }

h3 { font-size: 1rem; margin: 0 0 8px; }

/* --- Υπηρεσία και αναθέσεις του εργαζομένου ---------------------------- */
.duty-card.is-on { border-color: var(--success); }
.duty-title { font-size: 1.2rem; font-weight: 800; margin-bottom: 6px; }
.duty-card.is-on .duty-title { color: var(--success); }
.duty-card .duty-title .muted { font-weight: 400; font-size: 1rem; }
.duty-form { margin-top: 10px; }

.banner {
  display: block;
  width: 100%;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.task.is-next { border: 2px solid var(--accent); }
.task-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }

.task-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-weight: 800;
}

.task.is-next .task-num { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-ink); }
.task-next { color: var(--accent); font-weight: 800; }
.task-name { font-size: 1.2rem; font-weight: 700; margin: 2px 0 4px; }
.task-address { font-weight: 600; }
.task-note { padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.task .btn { margin-top: 8px; }

/* Λίστα με σειρά (καρτέλα εργαζομένου, ομάδα, ζώνη). */
.task-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: task; }

.task-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  counter-increment: task;
}

ol.task-list .task-row::before {
  content: counter(task);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-fill);
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 0.85rem;
}

.task-main { flex: 1; min-width: 0; }
.task-main small { display: block; color: var(--text-dim); }
.task-main small.text-bad { color: var(--danger); }
.task-actions { flex: none; display: flex; gap: 4px; }
.task-actions form { margin: 0; }

@media (max-width: 420px) {
  .task-row { flex-wrap: wrap; }
  .task-actions { width: 100%; justify-content: flex-end; }
}

.land-assignment { margin-top: 12px; color: var(--success); font-size: 1.1rem; font-weight: 800; }

/* --- Επιλογή σημείων ανά ζώνη ------------------------------------------ */
.picker > * + * { margin-top: 12px; }

.pick-list {
  display: grid;
  gap: 10px;
  max-height: 460px;
  overflow-y: auto;
  padding: 2px;
  overscroll-behavior: contain;
}

.pick-zone { display: grid; gap: 6px; }

.pick-zone-head, .pick {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
}

.pick-zone-head { padding: 6px 4px; }
.pick-zone-head small { color: var(--text-dim); }

.pick {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.pick:has(input:checked) { border-color: var(--accent); }
.pick-zone-head input, .pick input { flex: none; width: 22px; height: 22px; margin: 0; }
.pick-main { flex: 1; min-width: 0; }
.pick-main small { display: block; color: var(--text-dim); }
.pick-side { flex: none; color: var(--text-dim); font-size: 0.85rem; white-space: nowrap; }

/* --- Από 900 px: το μενού γίνεται στήλη αριστερά ----------------------- */
@media (min-width: 900px) {
  .app { padding-left: var(--sidebar-w); }

  .shell {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-bottom: 0;
    border-right: 1px solid var(--border);
  }

  .topbar { flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 16px 12px; }
  .who { flex: none; width: 100%; white-space: normal; }
  .who small { display: block; }
  .tabs { flex-direction: column; gap: 2px; padding: 8px; overflow: visible; border-top: 1px solid var(--border); }
  .tabs a { padding: 10px 12px; border-radius: 10px; }
}

/* --- Λειτουργία χάρτη ----------------------------------------------------
 *
 * Η σελίδα δεν κυλά· ο χάρτης παίρνει ό,τι περισσεύει από το μενού.
 *
 * ΧΩΡΙΣ 100vh/100dvh (βλ. την κορυφή του αρχείου): το body καρφώνεται στο
 * παράθυρο με position: fixed και top/right/bottom/left 0 - αυτό ακολουθεί
 * το ορατό παράθυρο και όταν εμφανίζεται ή κρύβεται η μπάρα του browser.
 * Μέσα του, μενού και χάρτης μοιράζονται τον χώρο με flex.
 */
.app.is-map {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.is-map .shell { position: relative; flex: none; }

.is-map .content {
  position: relative;
  flex: 1;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

.map-wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/* Στο κινητό το κλειστό πλαίσιο πιάνει 48 px κάτω: ο χάρτης σταματά πάνω
   του, ώστε απόδοση και χειριστήρια να μην κρύβονται.

   ΤΟ ΦΙΝΙΣΤΡΙΝΙ (.map-viewport) κόβει ό,τι περισσεύει: όταν ο χάρτης γυρίζει,
   μεγαλώνει από κάτω του σε τετράγωνο (map-rotate.js) ώστε να φορτώνονται
   πλακίδια και για τις γωνίες. Το μπαίνει το map-base.js - ο κανόνας για
   .map-wrap > .map-canvas κρατά τη σελίδα σωστή ώσπου να τρέξει. */
.map-viewport,
.map-wrap > .map-canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 48px;
  left: 0;
}

.map-viewport { overflow: hidden; }

.map-wrap { --map-bearing: 0deg; }

.map-canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--surface-2);
}

.map-canvas.is-turned {
  top: calc(-1 * var(--map-grow-y, 0px));
  right: calc(-1 * var(--map-grow-x, 0px));
  bottom: calc(-1 * var(--map-grow-y, 0px));
  left: calc(-1 * var(--map-grow-x, 0px));
  transform: rotate(var(--map-bearing));
}

/* Κάτω, πάνω από τη μπάρα του πλαισίου: επάνω είναι το ζουμ και η απόδοση. */
.is-map .flashes,
.map-banner {
  position: absolute;
  bottom: 60px;
  left: 50%;
  z-index: 1200;
  width: min(92%, 460px);
  transform: translateX(-50%);
}

.is-map .flash,
.map-banner {
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.map-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  max-height: 65%;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
}

.map-panel-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.map-panel-arrow::after { content: '▼'; color: var(--text-dim); font-size: 0.8rem; }
.map-panel.is-collapsed .map-panel-arrow::after { content: '▲'; }
.map-panel-body { min-height: 0; overflow-y: auto; padding: 0 12px 12px; overscroll-behavior: contain; }
.map-panel.is-collapsed .map-panel-body { display: none; }
.map-panel-body > * + * { margin-top: 10px; }

@media (min-width: 900px) {
  .app.is-map { flex-direction: row; padding-left: 0; }
  .is-map .shell { position: relative; top: auto; bottom: auto; left: auto; flex: none; }

  .map-viewport,
  .map-wrap > .map-canvas { bottom: 0; }

  .map-panel {
    top: 12px;
    right: 12px;
    bottom: auto;
    left: auto;
    width: 360px;
    max-height: calc(100% - 24px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  /* Χωρίς μπάρα κάτω: τα μηνύματα κατεβαίνουν. Επάνω δεξιά είναι το πλαίσιο. */
  .is-map .flashes,
  .map-banner { bottom: 24px; }

  /* Επάνω δεξιά το βέλος δείχνει αντίθετα: ανοίγει προς τα κάτω. */
  .map-panel-arrow::after { content: '▲'; }
  .map-panel.is-collapsed .map-panel-arrow::after { content: '▼'; }
}

/* --- Χειριστήρια πάνω στον χάρτη ----------------------------------------
 *
 * Ζουν ΕΞΩ από το πλαίσιο του Leaflet (στο .map-wrap): όταν ο χάρτης γυρίζει,
 * μένουν στη θέση τους και όρθια. Επάνω αριστερά, μακριά από το πλαίσιο
 * (δεξιά) και από το κουμπί ομιλίας (κάτω δεξιά).
 */
.map-tools {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
  display: grid;
  gap: 6px;
}

.map-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  color: var(--text);
  font: 700 20px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
}

.map-btn:disabled { opacity: 0.4; cursor: default; }
.map-btn.is-done { border-color: var(--accent-fill); background: var(--accent-fill); color: var(--accent-ink); }

/* Η πυξίδα: ο δίσκος γυρίζει όσο και ο χάρτης, άρα το κόκκινο δείχνει πάντα
   τον Βορρά. Το touch-action κρατά το σύρσιμο για εμάς, όχι για την κύλιση. */
.map-compass { position: relative; overflow: hidden; border-radius: 50%; touch-action: none; }

.map-compass-dial {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: rotate(var(--map-bearing));
}

.map-compass-needle {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -4px;
  border-right: 4px solid transparent;
  border-bottom: 10px solid var(--danger);
  border-left: 4px solid transparent;
}

.map-compass-needle::after {
  content: '';
  position: absolute;
  top: 10px;
  left: -4px;
  width: 0;
  height: 0;
  border-top: 10px solid var(--text-dim);
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.map-compass-point {
  position: absolute;
  color: var(--text-dim);
  font: 700 9px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.map-compass-point.is-n { top: 3px; left: 50%; margin-left: -3px; color: var(--danger); }
.map-compass-point.is-s { bottom: 3px; left: 50%; margin-left: -3px; }
.map-compass-point.is-e { top: 50%; right: 4px; margin-top: -5px; }
.map-compass-point.is-w { top: 50%; left: 4px; margin-top: -5px; }

/* Η απόδοση του OpenStreetMap: πάντα ορατή, ποτέ κάτω από κάτι άλλο. Τα
   πλακίδια είναι ανοιχτόχρωμα και στα δύο θέματα, άρα και το πλαίσιό της. */
.map-credit {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1000;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: #1f2933;
  font: 11px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.map-credit a { color: #1c6ea4; }

@media (min-width: 900px) {
  .map-credit { top: auto; bottom: 6px; }
}

/* ΟΡΘΙΑ ΜΕ ΓΥΡΙΣΜΕΝΟ ΧΑΡΤΗ: αντίθετη στροφή γύρω από το ίδιο το σημείο τους,
   ώστε ονόματα, δείκτες και αναδυόμενα να διαβάζονται σε κάθε μοίρα. */
.map-upright { transform-origin: 50% 100%; }

.is-turned .map-tag { transform: rotate(calc(-1 * var(--map-bearing))); transform-origin: 0 0; }
.is-turned .wk-marker,
.is-turned .stop-marker,
.is-turned .map-upright { transform: rotate(calc(-1 * var(--map-bearing))); }
.is-turned .cp-marker { transform: rotate(calc(45deg - var(--map-bearing))); }

/* Δείκτες: σχήματα με κλάσεις. Το στοιχείο που μετακινεί το Leaflet είναι το
   εξωτερικό (.map-icon)· ό,τι περιστρέφεται ή χρωματίζεται είναι ΜΕΣΑ του,
   αλλιώς το transform του Leaflet θα έσβηνε την περιστροφή. */
.map-icon { display: flex; align-items: center; justify-content: center; }

.cp-marker {
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transform: rotate(45deg);
  background: #6b7280;
}

.cp-open { background: #1c6ea4; }
.cp-good { background: #2e9d62; }
.cp-bad  { background: #d64236; }
.cp-warn { background: #e8a33d; }
.cp-dim  { background: #8894a0; }
.cp-idle { background: #6b7280; }

.wk-marker, .stop-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  background: #2e7d57;
  color: #ffffff;
  font: 700 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.wk-marker.has-work { background: #1c6ea4; }
.wk-marker.is-stale { background: #8894a0; }
.wk-marker.is-off { background: var(--surface-2); color: var(--text-dim); border-color: var(--border); box-shadow: none; }

.stop-marker { background: #1c6ea4; font-size: 15px; }
.stop-marker.is-next { width: 38px; height: 38px; background: var(--accent-fill); color: var(--accent-ink); }

/* Leaflet SVG: χρώματα από CSS, που νικά τα attributes που βάζει εκείνο. */
.route-line { stroke: #e8a33d; stroke-opacity: 0.9; }
.here-dot { stroke: #ffffff; fill: #2563eb; }
.here-halo { stroke: #3b82f6; stroke-opacity: 0.5; fill: #3b82f6; fill-opacity: 0.12; }

.legend { display: grid; gap: 6px; color: var(--text-dim); font-size: 0.85rem; }
.legend span { display: flex; align-items: center; gap: 10px; }
.legend .cp-marker { flex: none; width: 12px; height: 12px; margin: 0 3px; }
.legend .wk-legend { flex: none; width: 22px; height: 22px; font-size: 9px; }

.roster-head { margin: 12px 4px 4px; color: var(--text-dim); font-size: 0.85rem; }
.roster-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.roster-row > .wk-marker { flex: none; width: 32px; height: 32px; box-shadow: none; }
.roster-main { flex: 1; min-width: 0; color: var(--text); text-decoration: none; }
.roster-main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-main small { display: block; color: var(--text-dim); }
.roster-main small.text-bad { color: var(--danger); }
.roster-row .btn { flex: none; }

.route-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.route-stop { display: flex; align-items: flex-start; gap: 10px; }

.route-num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #1c6ea4;
  color: #ffffff;
  font-weight: 800;
}

.route-stop.is-next .route-num { background: var(--accent-fill); color: var(--accent-ink); }
.route-main { flex: 1; min-width: 0; }
.route-main small { display: block; color: var(--text-dim); }
.route-main small.text-bad { color: var(--danger); }
.route-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Αναδυόμενα του Leaflet στα χρώματα της εφαρμογής, σε σκούρο και φωτεινό. */
.map-canvas .leaflet-popup-content-wrapper,
.map-canvas .leaflet-popup-tip {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.map-canvas .leaflet-popup-content {
  margin: 12px 14px;
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.map-canvas .leaflet-popup-content a { color: var(--link); }
.map-canvas .leaflet-popup-content a.btn { color: var(--text); }
.map-canvas .leaflet-popup-content a.btn-primary { color: var(--accent-ink); }
.map-canvas a.leaflet-popup-close-button { color: var(--text-dim); }

.popup > * + * { margin-top: 6px; }
.popup-title { display: block; padding-right: 16px; font-size: 1rem; }
.popup-form { display: grid; gap: 6px; }
.popup-form select { min-height: 42px; margin-top: 0; }
.popup .btn { margin-top: 0; }

/* --- Ετικέτες στον χάρτη: ονόματα εργαζομένων, ώρες ----------------------
 *
 * Εικονίδιο μηδενικού μεγέθους στο σημείο (P.tag στο map-base.js): η τελεία
 * κάθεται ακριβώς στο σημείο και το κείμενο κρέμεται από πάνω της, όσο
 * μακρύ κι αν είναι. Το χρώμα έρχεται από τη μεταβλητή --tag.
 */
.map-icon-free { overflow: visible; }

.map-tag { position: absolute; top: 0; left: 0; --tag: #1c6ea4; }

.map-tag-dot {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 14px;
  height: 14px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--tag);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.map-tag-text {
  position: absolute;
  bottom: 10px;
  left: 50%;
  padding: 2px 7px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  background: var(--tag);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  color: #ffffff;
  font: 700 11px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* Εργαζόμενοι στον ζωντανό χάρτη: μπλε με αναθέσεις, πράσινο ελεύθερος, γκρι χωρίς σήμα. */
.wk-work  { --tag: #1c6ea4; }
.wk-free  { --tag: #2e7d57; }
.wk-stale { --tag: #7b8794; }
.wk-off   { --tag: #7b8794; }
.map-tag.wk-stale .map-tag-text { opacity: 0.85; }

/* Χρώματα διαδρομών: ίδια σειρά με το History::COLOURS. */
.route-c0 { --tag: #2f80ed; }
.route-c1 { --tag: #e5484d; }
.route-c2 { --tag: #30a46c; }
.route-c3 { --tag: #f76b15; }
.route-c4 { --tag: #8e4ec6; }
.route-c5 { --tag: #12a594; }
.route-c6 { --tag: #d6409f; }
.route-c7 { --tag: #ad7f58; }
.route-mixed { --tag: #374151; }

.swatch {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--tag, var(--border));
  vertical-align: middle;
}

.swatch.is-empty { background: transparent; border: 1px solid var(--border); }

.legend-dot {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  margin: 0 3px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--tag);
}

/* Ενδείξεις ώρας πάνω στη γραμμή: μικρότερες, να μη σκεπάζουν τη διαδρομή. */
.map-tag.is-tick .map-tag-dot { top: -4px; left: -4px; width: 8px; height: 8px; border-width: 1px; }

.map-tag.is-tick .map-tag-text {
  bottom: 6px;
  padding: 0 5px;
  border-color: var(--tag);
  background: var(--surface);
  color: var(--text);
  font-size: 10px;
  box-shadow: none;
}

.map-tag.is-start .map-tag-dot,
.map-tag.is-end .map-tag-dot { border-radius: 3px; }

/* Σημείο που σαρώθηκε: ρόμβος στο χρώμα του χαρακτηρισμού, ώρες από πάνω. */
.map-tag.is-visit .map-tag-dot {
  top: -9px;
  left: -9px;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: var(--visit, #8894a0);
  transform: rotate(45deg);
}

.map-tag.is-visit .map-tag-text { bottom: 14px; }

.visit-good { --visit: #2e9d62; }
.visit-bad  { --visit: #d64236; }
.visit-warn { --visit: #e8a33d; }
.visit-dim  { --visit: #8894a0; }

.popup-visits { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.popup-visits li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.popup-visit-time { font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Πλαίσιο διαδρομών --------------------------------------------------- */

/* Καρφωμένο στην κορυφή της λίστας που κυλά. Αρνητικά περιθώρια: να καλύπτει
   όλο το πλάτος, ώστε ό,τι κυλά από κάτω να μη φαίνεται στα πλάγια. */
.panel-sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 -12px;
  padding: 8px 12px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.history-form { display: grid; gap: 10px; }
.day-nav { display: flex; align-items: center; gap: 6px; }
.day-nav input { flex: 1; min-width: 0; margin-top: 0; }
.btn.is-disabled { opacity: 0.35; pointer-events: none; }

.people {
  display: grid;
  gap: 2px;
  max-height: 240px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  border: 0;
}

.people legend { margin-bottom: 4px; padding: 0; }

.person {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  color: var(--text);
  font-size: 0.95rem;
  cursor: pointer;
}

.person input { flex: none; width: 20px; height: 20px; margin: 0; }
.person small { display: block; color: var(--text-dim); }

.route-card { padding-top: 10px; border-top: 1px solid var(--border); }
.route-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.route-head .swatch { width: 14px; height: 14px; }
.route-totals { margin: 4px 0 0; }

.duty-list, .visit-list { display: grid; gap: 2px; margin: 6px 0 0; padding: 0; list-style: none; }
.duty-row, .visit-row { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.duty-when { flex: 1; min-width: 0; }
.visit-row time { flex: none; min-width: 3.2em; font-weight: 700; font-variant-numeric: tabular-nums; }
.visit-name { flex: 1; min-width: 0; }

/* --- Βοηθητικά για οθόνες φωνής και ενημέρωσης ----------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.btn-danger { background: var(--danger-fill); border-color: var(--danger-fill); color: #ffffff; }

.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stack > .field-pair > * { margin-top: 0; }

@media (max-width: 420px) {
  .field-pair { grid-template-columns: 1fr; }
}

.quick-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; }

label.check span { flex: 1; }

/* --- Ενημέρωση καταγραφής ---------------------------------------------- */
.consent { margin: 8px 0 16px; }
.consent-section h3 { margin: 14px 0 4px; font-size: 1rem; }
.consent-section ul { margin: 0; padding-left: 20px; }
.consent-section li + li { margin-top: 6px; }
.consent-decline { margin-top: 10px; }

/* --- Συνομιλίες (έλεγχος) ------------------------------------------------ */
.voice-day { margin: 20px 0 8px; color: var(--text-dim); font-size: 1rem; }
.voice-item { margin-bottom: 0; }
.voice-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.voice-who { margin: 6px 0 8px; }
.voice-audio { display: block; width: 100%; height: 40px; }
.voice-video { display: block; width: 100%; max-height: 60vh; border-radius: 10px; background: #05070c; }
.voice-more { margin-top: 8px; }
.voice-deliveries { margin: 6px 0 0; padding-left: 18px; }

/* --- Push-to-talk ---------------------------------------------------------
 *
 * Σε ΚΑΘΕ οθόνη του συνδεδεμένου, και στον χάρτη (ζήτημα του χρήστη
 * 17/09/2026). Στο κινητό κάτω δεξιά· στον χάρτη ΠΑΝΩ από το πλαίσιο, όσο κι
 * αν ανοίξει (το --ptt-lift το μετρά το voice.js). Σε μεγάλη οθόνη χάρτη
 * κάτω αριστερά: δεξιά είναι το πλαίσιο και η απόδοση του OpenStreetMap.
 *
 * z-index: πάνω από το πλαίσιο του χάρτη (1050), κάτω από το μενού (1100)·
 * το ανοιχτό πλαίσιο ομιλίας πάνω από το μενού, κάτω από τα μηνύματα (1200).
 */
.has-ptt .content { padding-bottom: 96px; }
.has-ptt.is-map .content { padding-bottom: 0; }

.ptt-fab {
  position: fixed;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent-fill);
  color: var(--accent-ink);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  font-size: 1.6rem;
  cursor: pointer;
}

.ptt-fab:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.ptt.is-talking .ptt-fab { background: var(--danger-fill); color: #ffffff; }

.ptt-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--danger-fill);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
}

.is-map .ptt-fab { right: 12px; bottom: calc(var(--ptt-lift, 48px) + 12px); }

.ptt-bubble {
  position: fixed;
  right: 16px;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 72px);
  z-index: 1060;
  display: flex;
  gap: 6px;
  max-width: min(calc(100% - 32px), 420px);
}

.is-map .ptt-bubble { right: 12px; bottom: calc(var(--ptt-lift, 48px) + 84px); }
.ptt.is-open .ptt-bubble { display: none; }

.ptt-bubble-main,
.ptt-bubble-reply {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.ptt-bubble-main { flex: 1; min-width: 0; }
.ptt-bubble-reply { flex: none; font-weight: 700; }
.ptt-bubble.is-playing .ptt-bubble-main { border-color: var(--success); }
.ptt-bubble.is-waiting .ptt-bubble-main { border: 2px solid var(--accent-fill); font-weight: 700; }
.ptt-bubble.is-bad .ptt-bubble-main { border-color: var(--danger); }

.ptt-sheet {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1150;
  max-height: 80%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}

.ptt.is-open .ptt-fab { display: none; }

.ptt-head { display: flex; align-items: center; gap: 10px; }
.ptt-online { flex: 1; color: var(--text-dim); font-size: 0.85rem; }

.ptt-close {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--text-dim);
  font-size: 1.2rem;
  cursor: pointer;
}

.ptt-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }

.ptt-mode {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.ptt-mode input { width: 18px; height: 18px; margin: 0; }
.ptt-mode:has(input:checked) { border-color: var(--accent-fill); box-shadow: inset 0 0 0 1px var(--accent-fill); }
.ptt-to { margin-top: 8px; }

/* Το ίδιο το κουμπί: μεγάλο, και ΧΩΡΙΣ τις κινήσεις αφής του browser -
   αλλιώς το «κράτα πατημένο» ανοίγει επιλογή κειμένου ή μενού. */
.ptt-talk {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 96px;
  margin-top: 12px;
  padding: 12px;
  border: 2px solid var(--accent-fill);
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.ptt-talk-main { font-size: 1.15rem; font-weight: 800; }
.ptt-talk-sub { color: var(--text-dim); }
.ptt-talk.is-arming { background: var(--accent-fill); color: var(--accent-ink); }
.ptt-talk.is-talking { border-color: var(--danger-fill); background: var(--danger-fill); color: #ffffff; }
.ptt-talk.is-busy { opacity: 0.7; }
.ptt-talk.is-arming .ptt-talk-sub,
.ptt-talk.is-talking .ptt-talk-sub { color: inherit; }

.ptt-status { min-height: 1.5em; margin-top: 8px; font-size: 0.9rem; }
.ptt-status.is-bad { color: var(--danger); font-weight: 600; }

.ptt-recent { margin-top: 6px; }
.ptt-list { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }

.ptt-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.ptt-item.is-unplayed { border-color: var(--accent-fill); }
.ptt-item-main { flex: 1; min-width: 0; }
.ptt-item-main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptt-item-main small { color: var(--text-dim); }

.ptt-play,
.ptt-reply {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.ptt-empty { color: var(--text-dim); font-size: 0.9rem; }
.ptt-foot { margin: 10px 0 0; text-align: right; }

@media (min-width: 900px) {
  .ptt-fab { right: 24px; bottom: 24px; }
  .ptt-bubble { right: 24px; bottom: 96px; }

  .ptt-sheet {
    right: 24px;
    bottom: 96px;
    left: auto;
    width: 380px;
    max-height: calc(100% - 120px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .ptt.is-open .ptt-fab { display: flex; }

  .is-map .ptt-fab { right: auto; bottom: 24px; left: calc(var(--sidebar-w) + 16px); }
  .is-map .ptt-bubble { right: auto; bottom: 96px; left: calc(var(--sidebar-w) + 16px); }
  .is-map .ptt-sheet { right: auto; left: calc(var(--sidebar-w) + 16px); }
}

/* Ήχος και Bluetooth, μέσα στο πλαίσιο ομιλίας. */
.ptt-devices { margin-top: 6px; }
.ptt-devices > label { margin-top: 8px; }
.ptt-bt { color: var(--success); font-weight: 600; }
.ptt-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ptt-key span { flex: 1; min-width: 10em; }
.ptt-devices p { margin: 8px 0 0; }

/* Ζωντανή φωνή: κόκκινο όσο ακούγεται κάποιος, πράσινη ένδειξη σύνδεσης. */
.ptt-bubble.is-live .ptt-bubble-main { border: 2px solid var(--danger-fill); font-weight: 700; }
.ptt.is-hearing .ptt-fab { box-shadow: 0 0 0 4px var(--danger-fill), 0 4px 16px rgba(0, 0, 0, 0.35); }
.ptt-online.is-live { color: var(--success); }

/* --- Βιντεοκλήση ---------------------------------------------------------
 *
 * Καταλαμβάνει ΟΛΗ την οθόνη: σε κλήση δεν υπάρχει άλλη δουλειά. Πάνω από το
 * πλαίσιο συνομιλίας (1150), γι' αυτό 1400 - και το κουμπί ομιλίας κρύβεται,
 * γιατί στην κλήση το μικρόφωνο είναι ήδη ανοιχτό.
 *
 * Η εικόνα του άλλου σε <canvas> (τα καρέ έρχονται αποκωδικοποιημένα από το
 * call.js), η δική μου σε μικρό <video> στη γωνία - καθρέφτης, όπως τη
 * βλέπει κανείς τον εαυτό του.
 */
.call {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1400;
  display: flex;
  flex-direction: column;
  background: #05070c;
}

body.in-call .ptt-fab,
body.in-call .ptt-bubble { display: none; }

.call-stage { position: relative; flex: 1; min-height: 0; }

.call-far {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #05070c;
}

.call-near {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 104px;
  height: 78px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  background: #05070c;
  object-fit: cover;
  transform: scaleX(-1);
}

.call-name,
.call-state {
  position: absolute;
  left: 14px;
  margin: 0;
  color: #f3f5f9;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.call-name { top: 12px; font-size: 1.05rem; font-weight: 700; }
.call-state { top: 36px; font-size: 0.85rem; opacity: 0.85; }

.call-tools {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: #0c1017;
}

.call-btn {
  min-height: var(--tap);
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  background: #1b2129;
  color: #f3f5f9;
  font: 600 0.95rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
}

.call-btn[aria-pressed="true"] { border-color: var(--danger-fill); color: var(--danger-fill); }
.call-rec[aria-pressed="true"] { background: var(--danger-fill); border-color: var(--danger-fill); color: #ffffff; }

/* ΚΑΤΑΓΡΑΦΗ: το βλέπουν ΚΑΙ ΟΙ ΔΥΟ, όχι μόνο όποιος πάτησε. */
.call-rec-on {
  position: absolute;
  top: 12px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(224, 90, 79, 0.92);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  transform: translateX(-50%);
}

.call-rec-on::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  animation: call-blink 1.4s steps(1, end) infinite;
}

@keyframes call-blink { 50% { opacity: 0.15; } }

@media (prefers-reduced-motion: reduce) {
  .call-rec-on::before { animation: none; }
}
.call-hang { background: var(--danger-fill); border-color: var(--danger-fill); color: #ffffff; font-weight: 700; }

/* Εισερχόμενη: μικρό παράθυρο στη μέση, με τα δύο κουμπιά μεγάλα. */
.call-ring {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 7, 12, 0.72);
}

.call-ring-box {
  width: min(100%, 360px);
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  text-align: center;
}

.call-ring-name { display: block; font-size: 1.2rem; }
.call-ring-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 10px; }
.call-ring-actions .btn { min-height: var(--tap); }

/*
 * Τα τρία βήματα πριν ανοίξει το Google Maps (nav.js). Όπως το παράθυρο της
 * κλήσης, αλλά από κάτω του (1350 < 1400): μια κλήση που χτυπά σκεπάζει τις
 * οδηγίες, όχι το αντίθετο. Πάνω από μενού, χάρτη και κουμπί ομιλίας.
 */
.nav-hint {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1350;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 7, 12, 0.72);
}

.nav-hint-box {
  width: min(100%, 380px);
  max-height: 100%;
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.nav-hint-title { display: block; margin-bottom: 6px; font-size: 1.1rem; }
.nav-hint-steps { margin: 10px 0 12px; padding-left: 22px; }
.nav-hint-steps li { margin: 6px 0; }
.nav-hint-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin-top: 14px; }
.nav-hint-actions .btn { min-height: var(--tap); }

.ptt-to-row { display: grid; gap: 8px; }
.ptt-call { justify-self: start; }

/* --- Οδηγός χρήσης -------------------------------------------------------
 *
 * Διαβάζεται στο κινητό και τυπώνεται σε χαρτί: στην εκτύπωση φεύγουν μενού,
 * κουμπί ομιλίας και περιεχόμενα, και μένει το κείμενο.
 */
.help-toc ol { margin: 0; padding-left: 20px; }
.help-toc li { margin: 4px 0; }
.help h2 { margin-top: 0; }
.help .card { padding: 16px; }
.help .steps { margin: 0; padding-left: 20px; }
.help .steps li { margin: 8px 0; }
.help .facts { grid-template-columns: 1fr; gap: 2px 0; }
.help .facts dt { margin-top: 10px; color: var(--text); font-weight: 700; }
.help .facts dd { color: var(--text-dim); }

@media print {
  .shell, .ptt, .call, .call-ring, .help-toc, .flashes { display: none !important; }
  .content { max-width: none; padding: 0; }
  .card { border: 0; padding: 0 0 12px; background: none; break-inside: avoid; }
  a[href]::after { content: ''; }
  body { background: #ffffff; color: #000000; }
  .muted, .help .facts dd { color: #333333; }
}

/* Κατάσταση υπηρεσιών: τα συμβάντα σε στενή στήλη, να διαβάζονται και στο κινητό. */
.service-log { margin: 0; padding-left: 18px; }
.service-log li { margin: 4px 0; overflow-wrap: anywhere; }