/* =====================================================================
   RestoPOS - φύλλο στυλ
   Σχεδιασμένο πρώτα για κινητό: ο σερβιτόρος το χρησιμοποιεί όρθιος, με
   ένα χέρι, συχνά σε φωτεινό εξωτερικό χώρο. Μεγάλοι στόχοι αφής,
   υψηλή αντίθεση, ελάχιστα διακοσμητικά.
   ===================================================================== */

:root {
  /* ΠΑΝΤΑ ΣΚΟΥΡΟ - και όχι «ό,τι λέει το κινητό».
     Το μαγαζί δουλεύει 18:00-08:00 σε χαμηλό φωτισμό. Αν η εφαρμογή
     ακολουθούσε το θέμα της συσκευής, το κινητό που γυρίζει μόνο του σε
     φωτεινό μέσα στη μέρα θα τύφλωνε τον σερβιτόρο μέσα στη βραδιά.

     Το color-scheme είναι εξίσου σημαντικό με τα χρώματα: χωρίς αυτό τα
     select, τα input ημερομηνίας και οι μπάρες κύλισης μένουν λευκά
     κουτιά πάνω στο σκούρο φόντο. */
  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;
  --info:        #4a90c2;

  --radius:      12px;
  --tap:         48px;          /* ελάχιστος στόχος αφής */
  --gap:         12px;
}

/* Το φωτεινό θέμα μένει εδώ γραμμένο αλλά ΑΝΕΝΕΡΓΟ. Αν κάποτε χρειαστεί
   φωτεινή έκδοση για υπολογιστή γραφείου, αρκεί να μπει σε κλάση
   (π.χ. html.is-light) - όχι όμως σε prefers-color-scheme, που αλλάζει
   μόνο του μέσα στη βραδιά.

@media (prefers-color-scheme: light) {
  :root {
    --bg:        #f4f5f8;
    --surface:   #ffffff;
    --surface-2: #eceef3;
    --border:    #d6dae3;
    --text:      #1a1d24;
    --text-dim:  #5d6577;
  }
}
*/

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: 100%;
  /* Αποτρέπει το «λάστιχο» του iOS όταν ο σερβιτόρος σκρολάρει λίστες */
  overscroll-behavior-y: contain;
}

/* --- Είσοδος -------------------------------------------------------- */

.auth-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
}

.auth-logo {
  text-align: center;
  margin-bottom: 24px;
}

.auth-logo h1 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.02em;
}

.auth-logo p {
  margin: 4px 0 0;
  color: var(--text-dim);
  font-size: 14px;
}

/* --- Φόρμες --------------------------------------------------------- */

.field { margin-bottom: 16px; }

.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--text-dim);
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 14px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* 16px ακριβώς: μικρότερο και το iOS κάνει ζουμ στο πεδίο */
  font-size: 16px;
  font-family: inherit;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

/* --- Κουμπιά -------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 12px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  /* Σβήνει την γκρι λάμψη του Android στο πάτημα */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn-danger  { background: var(--danger);  border-color: var(--danger);  color: #fff; }
.btn-success { background: var(--success); border-color: var(--success); color: #06210f; }
.btn-block   { width: 100%; }
.btn-lg      { min-height: 56px; font-size: 18px; }

/* --- Μηνύματα ------------------------------------------------------- */

.alert {
  padding: 12px 14px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 14px;
  border: 1px solid transparent;
}

/* Επιβεβαίωση χρέωσης: σκόπιμα ΜΙΚΡΗ και διακριτική. Ο σερβιτόρος
   θέλει να δει ότι πέρασε, όχι να διαβάσει ανακοίνωση - και δεν πρέπει
   να σπρώχνει κάτω τα κουμπιά που θα ξαναπατήσει σε δύο δευτερόλεπτα.

   ΓΙΑΤΙ ΑΙΩΡΕΙΤΑΙ: η οθόνη δεν γυρίζει πια στην κορυφή μετά τη χρέωση -
   μένει εκεί που ήσουν. Ένα μήνυμα καρφωμένο στην κορυφή δεν θα το
   έβλεπε ποτέ κανείς, και η επιβεβαίωση υπάρχει ακριβώς για να μην
   ξαναπατηθεί το κουμπί. Σβήνει μόνο του χωρίς JavaScript, ώστε να μη
   σκεπάζει τίποτα για πάντα. */
.alert-charged {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 50;
  width: max-content;
  max-width: calc(100vw - 32px);
  pointer-events: none;          /* δεν κλέβει πατήματα */
  background: var(--surface-2);
  border-color: var(--success);
  color: var(--success);
  font-size: 12.5px;
  padding: 8px 14px;
  margin-bottom: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  gap: 6px;
  animation: charged-fade 3.5s forwards;
}

@keyframes charged-fade {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
  8%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

/* Όποιος έχει ζητήσει λιγότερη κίνηση: εμφανίζεται και μένει. */
@media (prefers-reduced-motion: reduce) {
  .alert-charged { animation: none; }
}

.alert-charged::before {
  content: "✓";
  font-weight: 700;
}

/* ΤΟ ΣΦΑΛΜΑ ΑΚΟΛΟΥΘΕΙ ΤΟ ΜΑΤΙ. Η οθόνη δεν πηδάει πια στην κορυφή για
   να το δείξει - αντ' αυτού το μήνυμα κολλάει στην κορυφή της περιοχής
   και μένει ορατό όσο κι αν έχεις σκρολάρει. */
.alert-error {
  background: var(--surface);
  border-color: var(--danger);
  color: var(--danger);
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.alert-success { background: rgba(76, 175, 125, .14); border-color: var(--success); color: var(--success); }
.alert-info    { background: rgba(74, 144, 194, .14); border-color: var(--info);    color: var(--info); }

/* --- Επιλογή γλώσσας ------------------------------------------------ */

.lang-switch {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
}

.lang-switch button {
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.lang-switch button[aria-current="true"] {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--accent);
}

/* --- Πληκτρολόγιο PIN ----------------------------------------------- */

.pin-display {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 20px 0 24px;
}

.pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border);
}

.pin-dot.filled {
  background: var(--accent);
  border-color: var(--accent);
}

.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.pin-pad button {
  min-height: 64px;
  font-size: 24px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.pin-pad button:active { background: var(--border); }

/* --- Σκελετός εφαρμογής --------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 10px 16px;
  /* env(safe-area-inset-*): το «φρύδι» και η μπάρα του iPhone δεν πρέπει
     να καλύπτουν στοιχεία που πατάει ο σερβιτόρος */
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar-title { font-weight: 700; letter-spacing: -0.01em; }

/* Σε ποιον server τρέχουμε. Διακριτικό όταν όλα είναι φυσιολογικά -
   ΕΜΦΑΝΕΣΤΑΤΟ όταν είμαστε σε εφεδρικό, γιατί τότε κάθε καταχώρηση
   κινδυνεύει να χαθεί στην επόμενη συγχρόνιση. */
.srv-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  vertical-align: 2px;
  background: var(--surface-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.srv-badge.is-standby {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

.srv-line {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-dim);
}

.srv-line.is-standby {
  color: #fff;
  background: var(--danger);
  border-radius: var(--radius);
  padding: 8px 10px;
}
.topbar-user  { display: flex; align-items: center; gap: 10px; }

/* Το «Πίσω» της κορυφής.
   Μεγάλη επιφάνεια αφής: πατιέται με τον αντίχειρα, όρθιος, με δίσκο
   στο άλλο χέρι. Τα 44px είναι το ελάχιστο που συνιστά η Apple και ο
   λόγος που δεν είναι απλός σύνδεσμος κειμένου. */
.topbar-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 0 12px 0 6px;
  margin-right: -4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
}

.topbar-back:active { background: var(--surface-2, rgba(255,255,255,.08)); }

/* Σε στενή οθόνη μένει μόνο το βέλος: ο τίτλος του μαγαζιού και το
   όνομα του χρήστη προηγούνται σε χώρο. */
@media (max-width: 380px) {
  .topbar-back { font-size: 0; padding: 0 10px; }
  .topbar-back::before { content: '‹'; font-size: 26px; line-height: 1; }
}

.content {
  padding: 16px;
  /* Χώρος ώστε η κάτω μπάρα να μην κρύβει το τελευταίο στοιχείο */
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
  max-width: 1100px;
  margin: 0 auto;
}

/* =====================================================================
   ΤΟ ΚΕΛΥΦΟΣ: ΣΚΡΟΛΑΡΕΙ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ, ΟΧΙ Η ΣΕΛΙΔΑ

   ΤΟ ΣΥΜΠΤΩΜΑ: σκρολάρεις κάτω και χάνεται η ΚΑΤΩ μπάρα· σκρολάρεις
   λίγο πάνω, ξαναφαίνεται, και τότε χάνεται η ΠΑΝΩ. Μόνο ο πίνακας
   ελέγχου ήταν σταθερός.

   Η ΑΙΤΙΑ: ο πίνακας ελέγχου χωράει σε μία οθόνη, άρα δεν σκρολάρει
   ΠΟΤΕ. Παντού αλλού σκρολάρει το έγγραφο, και ο browser του κινητού
   απαντά μαζεύοντας ή ξαναβγάζοντας τη ΔΙΚΗ ΤΟΥ μπάρα διεύθυνσης. Τότε
   το «πάνω» και το «κάτω» της οθόνης αλλάζουν θέση, και οι δύο μπάρες
   -που είναι καρφωμένες σε αυτά- ακολουθούν.

   Η ΛΥΣΗ: να μη σκρολάρει το έγγραφο. Ο browser μαζεύει τη μπάρα του
   μόνο όταν σκρολάρει η ΣΕΛΙΔΑ - όχι όταν σκρολάρει ένα στοιχείο μέσα
   της. Έτσι η μπάρα του μένει μόνιμα ανοιχτή και τίποτα δεν κουνιέται.

   ΠΡΟΣΟΧΗ - ΤΟ ΛΑΘΟΣ ΠΟΥ ΕΓΙΝΕ ΗΔΗ ΜΙΑ ΦΟΡΑ: εδώ υπήρχε
   «height: 100dvh». Το dvh υποτίθεται ότι δίνει το ορατό ύψος· στην
   πράξη μετρήθηκε 800 px ενώ η οθόνη τελείωνε στο 965 - απόκλιση 165.
   Η μπάρα κατέληξε εκτός οθόνης και, με overflow: hidden, άφταστη.
   ΜΗΝ ΞΑΝΑΜΠΕΙ dvh: το «position: fixed + inset: 0» καρφώνεται στις
   τέσσερις άκρες χωρίς να μαντεύει ύψος.

   Ισχύει ΜΟΝΟ στη διάταξη της εφαρμογής. Η είσοδος και η κονσόλα
   σκρολάρουν κανονικά· οι εκτυπώσεις δεν φορτώνουν καν αυτό το αρχείο.
   ===================================================================== */
body.app-shell {
  position: fixed;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

body.app-shell > .topbar,
body.app-shell > .tabbar { flex: 0 0 auto; }

body.app-shell > .content {
  flex: 1 1 auto;

  /* ΤΟ ΡΗΤΟ ΠΛΑΤΟΣ ΕΙΝΑΙ ΑΠΑΡΑΙΤΗΤΟ, ΟΧΙ ΔΙΑΚΟΣΜΗΤΙΚΟ.

     Το «.content» έχει «margin: 0 auto» για να κεντράρεται στις μεγάλες
     οθόνες. Μέσα όμως σε στήλη flex, τα ΑΥΤΟΜΑΤΑ περιθώρια ακυρώνουν το
     τέντωμα στον εγκάρσιο άξονα: το στοιχείο σταματά να παίρνει το
     πλάτος της οθόνης και παίρνει το πλάτος του ΠΕΡΙΕΧΟΜΕΝΟΥ του.

     Αποτέλεσμα σε οθόνη 360 px: η περιοχή γινόταν 500 px και το
     τελευταίο τσιπάκι των Κινήσεων («Προηγ. μήνας») κάθεται στο 361-484
     - εκτός οθόνης, και ΑΠΡΟΣΙΤΟ, αφού το overflow-x: hidden δεν
     επιτρέπει κύλιση προς τα εκεί. */
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Η μπάρα δεν σκεπάζει πια τίποτα - περιττός ο χώρος των 84 px. */
  padding-bottom: 16px;
}

/* Μέσα στο κέλυφος είναι γραμμή της στήλης, όχι «κολλημένη». */
body.app-shell > .tabbar { position: static; }

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab {
  flex: 1;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 4px;
}

.tab[aria-current="page"] { color: var(--accent); }

/* ΟΛΑ ΤΑ ΠΑΡΑΚΑΤΩ ΑΦΟΡΟΥΝ ΜΟΝΟ ΤΗΝ ΚΑΤΩ ΜΠΑΡΑ. Η κλάση «.tab»
   χρησιμοποιείται και στα φίλτρα περιόδου των Κερασμάτων· εκεί δεν
   πρέπει να αλλάξει τίποτα, γι' αυτό μπαίνει το «.tabbar» μπροστά. */
.tabbar .tab {
  /* Τα στοιχεία flex αρνούνται να γίνουν στενότερα από τη μεγαλύτερη
     λέξη τους. Χωρίς αυτό, με έξι κουμπιά το «Ρυθμίσεις» έβγαινε εκτός
     οθόνης στα 360 px. */
  min-width: 0;

  /* ΚΑΜΙΑ ΚΟΠΗ ΜΕΣΑ ΣΕ ΛΕΞΗ. Εδώ υπήρχε «overflow-wrap: anywhere» και
     έστελνε το τελικό «ς» του «Ρυθμίσεις» στην από κάτω γραμμή. Οι
     λέξεις μένουν ακέραιες· αν χρειαστεί αλλαγή γραμμής, γίνεται στο
     κενό ή στην κάθετο του «Τραπέζια/Πελάτες». */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;

  /* ΤΟ ΜΕΓΕΘΟΣ ΒΓΑΙΝΕΙ ΑΠΟ ΤΟ ΠΛΑΤΟΣ ΤΗΣ ΟΘΟΝΗΣ, ΟΧΙ ΑΠΟ ΣΚΑΛΟΠΑΤΙΑ.

     Χειρότερη περίπτωση: έξι κουμπιά. Κάθε κουμπί παίρνει 100vw/6 και
     ξοδεύει 8 px σε εσωτερικά περιθώρια. Η μακρύτερη αδιάσπαστη λέξη
     είναι το «Τραπέζια/» και μετρήθηκε ότι θέλει 4,7 φορές το μέγεθος
     της γραμματοσειράς. Άρα το μεγαλύτερο μέγεθος που χωράει είναι
     (100vw/6 − 8px) / 4,7 - με ανώτατο όριο τα 13 px, που είναι το
     κανονικό, και κατώτατο τα 9 px για οθόνες-μινιατούρες.

     Ένας τύπος αντί για media queries γιατί τα σκαλοπάτια αστοχούν στα
     ενδιάμεσα πλάτη: ένα κινητό 366 px έπεφτε στη λάθος βαθμίδα. */
  font-size: clamp(9px, calc((100vw / 6 - 8px) / 4.7), 13px);
}
}

.page-title { margin: 0 0 16px; font-size: 20px; font-weight: 700; }

.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 13px; }

/* --- Πλακίδια στατιστικών ------------------------------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap);
}

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.stat-value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  /* Τα ποσά ευθυγραμμίζονται κάθετα μεταξύ πλακιδίων */
  font-variant-numeric: tabular-nums;
}

.stat-label { color: var(--text-dim); font-size: 13px; margin-top: 4px; }

.muted { color: var(--text-dim); font-size: 14px; }
.center { text-align: center; }
.mt-16 { margin-top: 16px; }

/* --- Κάτοψη τραπεζιών ------------------------------------------------ */

.area { margin-bottom: 24px; }

.area-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
}

.table-grid {
  display: grid;
  /* 3 στήλες σε τηλέφωνο, περισσότερες σε ταμπλέτα - χωρίς media query:
     το auto-fill με minmax προσαρμόζεται μόνο του. */
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--gap);
}

.table-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 92px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.table-card.is-free  { border-style: dashed; }
.table-card.is-open  { border-color: var(--accent); background: var(--surface-2); }

.table-code {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.table-total {
  font-size: 17px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.table-seats { font-size: 13px; color: var(--text-dim); }
.table-meta  { font-size: 12px; color: var(--text-dim); }

.table-time {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* Τραπέζι που κάθεται πάνω από 90 λεπτά - πιθανόν ξεχάστηκε */
.table-time[data-stale="true"] {
  color: var(--danger);
  font-weight: 700;
}

/* --- Κεφαλίδα σελίδας ------------------------------------------------ */

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: 16px;
}

.page-head .page-title { margin: 0; }

/* Τα κουμπιά ενεργειών τυλίγονται σε δεύτερη γραμμή αντί να βγαίνουν
   εκτός οθόνης. Στο «Προσωπικό» οι τέσσερις ενέργειες έφταναν ως το
   507 px σε οθόνη 360 - το «+ Νέος» και η «Εκτύπωση» ήταν απρόσιτα. */
.page-head { flex-wrap: wrap; }
.page-head > * { min-width: 0; }
.page-head div { flex-wrap: wrap; }

/* --- Κάρτες & λίστες ------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.list { display: flex; flex-direction: column; gap: 10px; }

.list-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap);
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Σε στενή οθόνη οι ενέργειες πέφτουν κάτω από τα στοιχεία */
  flex-wrap: wrap;
}

.list-item.is-muted { opacity: .55; }

.list-main  { flex: 1 1 220px; min-width: 0; }
.list-title { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.list-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-dim);
}

.list-meta  { margin-top: 6px; font-size: 12px; color: var(--text-dim); }

.list-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.list-actions form { margin: 0; }

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

/* --- Σήματα ---------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

.badge-role { border-color: var(--accent); color: var(--accent); }
.badge-ok   { border-color: var(--success); color: var(--success); }
.badge-info { border-color: var(--info);    color: var(--info); }

/* --- Βοήθεια & σφάλματα πεδίων --------------------------------------- */

.field-hint  { margin: 6px 0 0; font-size: 12px; color: var(--text-dim); }
.field-error { margin: 6px 0 0; font-size: 13px; color: var(--danger); font-weight: 600; }

.field-check label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
}

.field-check input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
}

/* --- Ειδοποίηση νέας έκδοσης ---------------------------------------- */

.update-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  /* Πάνω από την κάτω μπάρα πλοήγησης, όχι από πάνω της */
  bottom: calc(68px + env(safe-area-inset-bottom));
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 10px 12px 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}

/* --- Κατάλογος ------------------------------------------------------- */

.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
}

.price {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.badge-danger { border-color: var(--danger); color: var(--danger); }

.color-input {
  min-height: 48px;
  padding: 4px;
  cursor: pointer;
}

textarea {
  min-height: 72px;
  resize: vertical;
  line-height: 1.4;
}

/* --- Λίστα ως πλοήγηση ----------------------------------------------- */

.list-link {
  align-items: center;
  color: var(--text);
  text-decoration: none;
}

.chevron {
  color: var(--text-dim);
  font-size: 24px;
  line-height: 1;
  flex: none;
}

/* --- Ενότητες φόρμας ------------------------------------------------- */

.form-section {
  margin: 24px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
}

.form-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Τρία στενά πεδία δίπλα-δίπλα (από/έως/θέσεις) */
.field-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.field-row .field { margin-bottom: 16px; }

/* --- Πτυσσόμενη ενότητα ---------------------------------------------- */

details > summary {
  cursor: pointer;
  font-weight: 600;
  /* Στόχος αφής: το προεπιλεγμένο βελάκι είναι πολύ μικρό για δάχτυλο */
  padding: 6px 0;
  list-style-position: inside;
}

details[open] > summary { color: var(--accent); }

/* --- Οθόνη λογαριασμού ----------------------------------------------- */

.total-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap);
  padding: 16px;
  margin-bottom: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--surface);
}

.total-label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.total-value { font-size: 30px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.total-sub   { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.total-side  { text-align: right; }

.section-title {
  margin: 24px 0 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
}

/* --- Γρήγορη προσθήκη ------------------------------------------------ */

.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--gap);
  /* ΟΛΕΣ ΟΙ ΣΕΙΡΕΣ ΙΣΟΥΨΕΙΣ. Χωρίς αυτό κάθε σειρά έπαιρνε το
     ύψος του δικού της περιεχομένου: ένα πλακίδιο με πεδίο
     ποσότητας έκανε τη σειρά του ψηλότερη από τις υπόλοιπες και
     το πλέγμα διαβαζόταν σαν ανάκατα κουτιά. */
  grid-auto-rows: 1fr;
}

.quick-btn {
  width: 100%;
  min-height: 84px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 12px;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.quick-btn:active { transform: scale(.98); }

/* Γρήγορη προσθήκη που ρωτάει ποσότητα: το πλακίδιο παύει να είναι
   ολόκληρο κουμπί - αλλιώς κάθε πάτημα στο πεδίο θα χρέωνε. */
.quick-btn.is-ask { cursor: default; gap: 6px; }
.quick-btn.is-ask .btn { width: 100%; }

.quick-name  { font-weight: 700; font-size: 15px; }
.quick-step  { font-size: 20px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.quick-price { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* --- Κατάλογος προσθήκης --------------------------------------------- */

.chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 12px;
  /* Οριζόντιο σκρολ χωρίς να σκρολάρει η σελίδα */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.chip-row::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  padding: 10px 16px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.chip.is-active { background: var(--surface-2); color: var(--text); border-color: var(--accent); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--gap);
  /* ΟΛΕΣ ΟΙ ΣΕΙΡΕΣ ΙΣΟΥΨΕΙΣ. Χωρίς αυτό κάθε σειρά έπαιρνε το
     ύψος του δικού της περιεχομένου: ένα πλακίδιο με πεδίο
     ποσότητας έκανε τη σειρά του ψηλότερη από τις υπόλοιπες και
     το πλέγμα διαβαζόταν σαν ανάκατα κουτιά. */
  grid-auto-rows: 1fr;
}

.product-btn {
  width: 100%;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.product-btn:active:not(:disabled) { background: var(--surface-2); transform: scale(.98); }
.product-btn:disabled { opacity: .45; cursor: not-allowed; }

.product-name  { font-weight: 600; font-size: 14px; line-height: 1.25; }
.product-price { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Premium ποτό με μεταβλητή τιμή: το πλακίδιο κρατά πεδίο τιμής αντί να
   είναι ολόκληρο κουμπί, ώστε να διορθώνεται πριν τη χρέωση. */
.product-btn.is-variable { cursor: default; gap: 6px; }
.product-btn.is-variable .btn { width: 100%; }

/* Ίδια ιστορία με πάνω: το «input[type="text"]» των φορμών επέβαλλε
   padding 10px 14px και το «4,00» δεν χωρούσε στο πεδίο των «Μεγάλων».
   Ο τύπος μπαίνει στον επιλογέα για να κερδίσει η ειδικότητα. */
input.product-price-input {
  width: 100%;
  padding: 8px;
  font-size: 16px;           /* κάτω από 16px το iOS κάνει ζουμ στο πεδίο */
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Είδη που ρωτάνε ποσότητα: το νούμερο και η τιμή στην ίδια γραμμή,
   ώστε το πλακίδιο να μη διπλασιάζεται σε ύψος και να χάνονται τα
   υπόλοιπα προϊόντα από την οθόνη. */
.product-qty-row {
  display: flex;
  gap: 6px;
  align-items: center;
  width: 100%;
  /* Αν δεν χωρέσουν στη σειρά, πέφτουν - ΠΟΤΕ δεν ξεχειλίζουν έξω από
     το πλακίδιο. Το είχε πάθει ακόμη και το κανονικό μέγεθος. */
  flex-wrap: wrap;
}

/* Ο ΤΥΠΟΣ ΕΙΝΑΙ ΜΕΡΟΣ ΤΟΥ ΕΠΙΛΟΓΕΑ ΕΠΙΤΗΔΕΣ. Ο γενικός κανόνας των
   φορμών είναι «input[type="number"] { width: 100% }» - ειδικότητα
   (0,1,1) - και νικούσε το σκέτο «.product-qty-input» (0,1,0). Έτσι η
   ποσότητα άνοιγε σε ΟΛΟ το πλάτος και η τιμή έπεφτε σε δεύτερη γραμμή:
   το πλακίδιο του ΚΑΝΟΝΙΚΟΥ μεγέθους έβγαινε 194 px, ψηλότερο από το
   «Μεγάλα» (152 px). Τα άλλα τέσσερα μεγέθη δεν το έπαθαν μόνο επειδή
   ορίζουν πλάτος με κλάση μεγέθους - δηλαδή κρύβαν το λάθος. */
input.product-qty-input {
  /* 3,6em χωρούν τριψήφια ποσότητα. Το προηγούμενο 4,5em έβγαζε την
     τιμή έξω από το πλαίσιο σε πλακίδιο 150 px. */
  width: 3.6em;
  flex: none;
  padding: 8px 6px;
  font-size: 16px;           /* κάτω από 16px το iOS κάνει ζουμ στο πεδίο */
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.product-qty-row .product-price-input { flex: 1; }
.product-qty-row .product-price { margin-left: auto; }

/* --- Τι πλήρωσε, ανά τρόπο ------------------------------------------- */

.pay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.pay-box {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.pay-label { font-size: 12px; color: var(--text-dim); }

.pay-value {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* Το σύνολο ξεχωρίζει: αυτό κοιτάει ο σερβιτόρος. */
.pay-box.is-total {
  border-color: var(--success);
  background: rgba(76, 175, 125, .10);
}

.pay-box.is-total .pay-value { color: var(--success); }

/* Το χρέος ΔΕΝ είναι πληρωμή - δεν πρέπει να μοιάζει με μία. */
.pay-box.is-debt { border-color: var(--danger); }
.pay-box.is-debt .pay-value { color: var(--danger); }

/* --- Φύλλο ταμείου --------------------------------------------------- */

.cash-sheet {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.cash-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.cash-row:last-child { border-bottom: none; }

.cash-row strong {
  font-variant-numeric: tabular-nums;   /* τα ποσά στοιχίζονται κάθετα */
  white-space: nowrap;
}

/* Η γραμμή που κοιτάει ο υπεύθυνος με τα λεφτά στο χέρι. */
.cash-row.is-total {
  background: var(--surface-2);
  font-size: 16px;
}

.cash-row.is-total span,
.cash-row.is-total strong { font-weight: 700; }

.cash-row.is-warn strong { color: var(--danger); }

/* --- Προτάσεις πελατών ----------------------------------------------- */

.suggest { position: relative; flex: 1; }

.suggest-list {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 46vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.suggest-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px;               /* μεγάλος στόχος αφής: πατιέται στο σκοτάδι */
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.suggest-item:last-child { border-bottom: none; }
.suggest-item:active     { background: var(--surface-2); }

.suggest-name  { display: block; font-weight: 600; }
.suggest-meta  { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.suggest-debt  { display: block; font-size: 12px; color: var(--danger); margin-top: 2px; }

/* Όταν έχει επιλεγεί υπάρχων πελάτης, φαίνεται ότι ο λογαριασμός θα
   δεθεί στην καρτέλα του και δεν θα φτιαχτεί διπλοεγγραφή. */
.suggest[data-selected] input[data-suggest-input] {
  border-color: var(--accent);
}

/* --- Λογαριασμοί μπαρ ------------------------------------------------ */

.new-tab-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.new-tab-form input { flex: 1; }
.new-tab-form .btn { flex: none; width: 56px; font-size: 22px; }

.table-open-form { display: contents; }

.qty-badge {
  display: inline-block;
  min-width: 32px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.actions-row form { margin: 0; }
.actions-row .btn { flex: 1; min-width: 110px; }

/* --- Ιστορικό -------------------------------------------------------- */

.timeline {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.timeline-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14px;
}

.timeline-row.is-settlement { border-color: var(--success); background: rgba(76, 175, 125, .08); }
.timeline-row.is-void       { opacity: .5; text-decoration: line-through; }

.timeline-time   { flex: none; color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.timeline-body   { flex: 1; min-width: 0; }
.timeline-amount { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Ραβδογράμματα στατιστικών --------------------------------------- */

.bars { display: flex; flex-direction: column; gap: 6px; }

.bar-row {
  display: grid;
  /* Σταθερές στήλες: οι μπάρες ευθυγραμμίζονται ανεξάρτητα από το
     μήκος της ετικέτας, αλλιώς το μάτι δεν μπορεί να συγκρίνει. */
  grid-template-columns: 82px 1fr 84px;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.bar-key {
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-track {
  height: 18px;
  border-radius: 4px;
  background: var(--surface-2);
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
}

.bar-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* --- Κέρασμα --------------------------------------------------------- */

.comp-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

/* Ενεργό κέρασμα: πρέπει να είναι αδύνατο να μη το προσέξεις, αλλιώς
   ολόκληρος γύρος περνάει δωρεάν κατά λάθος. */
.comp-toggle.is-on {
  border-style: solid;
  border-color: var(--success);
  background: rgba(76, 175, 125, .12);
  color: var(--success);
}

.comp-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  flex: none;
}

.comp-toggle.is-on .comp-dot { background: var(--success); }

.badge-comp { border-color: var(--success); color: var(--success); }

/* Η αξία ενός κερασμένου είδους.
   ΔΕΝ είναι χρέωση - δεν πληρώθηκε ποτέ - αλλά είναι κόστος για το
   μαγαζί. Γι' αυτό δεν γράφεται σαν κανονική τιμή ούτε κρύβεται ως
   «0,00»: μπαίνει σε παρένθεση και σε άλλο χρώμα, ώστε το μάτι να μην
   την προσθέτει στον τζίρο. */
.price-comp {
  color: var(--success);
  font-weight: 600;
  white-space: nowrap;
}

.price-comp::before { content: '('; opacity: .6; }
.price-comp::after  { content: ')'; opacity: .6; }

/* Η φιάλη από κάβα δεν είναι κέρασμα: διαφορετικό χρώμα ώστε να μη
   μπερδεύεται ούτε στην οθόνη ούτε στο δελτίο. */
.badge-cellar { border-color: var(--accent); color: var(--accent); }
.badge-discount { border-color: var(--warning, #d08700); color: var(--warning, #d08700); }

.product-btn.is-comp,
.quick-btn.is-comp { border-color: var(--success); }

/* --- Banner οθόνης εισόδου ------------------------------------------- */

.auth-stack {
  width: 100%;
  max-width: 380px;
}

.brand-banner {
  text-align: center;
  padding: 0 4px 18px;
}

.brand-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.25;
  color: var(--text);
}

.brand-venue {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.brand-address {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-dim);
}

.brand-owner {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* Δύο πρόσωπα, δύο ομάδες. Χωρίς το κενό ανάμεσα διαβάζονται σαν ένα
   μπλοκ κειμένου και δεν ξεχωρίζει ποιος είναι ποιος. */
.brand-line + .brand-line {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.brand-tel {
  display: block;
  color: var(--text-dim);
  text-decoration: none;
  /* Στο κινητό είναι πατήσιμο για κλήση - χρειάζεται στόχος αφής */
  padding: 4px 0;
}

.brand-product {
  margin-top: 12px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.auth-logo h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-dim);
  text-align: center;
}

/* --- Κλείδωμα πληκτρολογίου PIN -------------------------------------- */

.pin-pad[data-locked="true"] button {
  opacity: .35;
  pointer-events: none;
}

.pin-who {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 4px;
}

/* --- Μερική ακύρωση καταχώρησης -------------------------------------- */

.qty-form {
  display: flex;
  gap: 4px;
  align-items: center;
}

.qty-form input {
  /* Στενό πεδίο: χωράει διψήφια ποσότητα και μένει χώρος για τα κουμπιά */
  width: 62px;
  min-height: 36px;
  padding: 4px 8px;
  font-size: 15px;
  text-align: center;
}

/* Πολλαπλή επιλογή προϊόντων σε ομάδα επιλογών */
select[multiple] {
  min-height: 200px;
  padding: 8px;
}

select[multiple] option { padding: 6px 4px; }

/* --- Μήνυμα που σκάει μπροστά στον χρήστη ---------------------------- */
/*
 * Καταλαμβάνει ΟΛΗ την οθόνη, πάνω από κάθε άλλο στοιχείο. Μέσα στη
 * βραδιά κανείς δεν προσέχει διακριτικές ειδοποιήσεις - ένα μήνυμα που
 * περιμένει σε γωνία δεν διαβάζεται ποτέ.
 */
.msg-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 6, 10, .92);
  backdrop-filter: blur(3px);
  animation: msg-in .18s ease-out;
}

@keyframes msg-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

.msg-card {
  width: 100%;
  max-width: 520px;
  text-align: center;
  border-radius: 18px;
  padding: 26px 20px 20px;
  background: var(--surface);
  border: 3px solid var(--accent);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .6);
}

.msg-from {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

/* Μεγάλα, έντονα γράμματα: διαβάζεται με το κινητό στο χέρι, στο μισοσκόταδο */
.msg-body {
  font-size: 26px;
  line-height: 1.35;
  font-weight: 800;
  color: var(--text);
  word-break: break-word;
  margin-bottom: 12px;
}

.msg-when {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
}

.msg-ok {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #080b12;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
}

.msg-ok:disabled { opacity: .6; }

/* Επείγον: κόκκινο και με παλμό, ώστε να ξεχωρίζει με το που ανάψει */
.msg-urgent .msg-card {
  border-color: var(--danger);
  animation: msg-pulse 1s ease-in-out infinite;
}

.msg-urgent .msg-from { color: var(--danger); }
.msg-urgent .msg-body { color: #ffd9d9; }
.msg-urgent .msg-ok   { background: var(--danger); color: #fff; }

@keyframes msg-pulse {
  0%, 100% { box-shadow: 0 18px 60px rgba(0, 0, 0, .6), 0 0 0 0 rgba(239, 95, 95, .55); }
  50%      { box-shadow: 0 18px 60px rgba(0, 0, 0, .6), 0 0 0 16px rgba(239, 95, 95, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .msg-overlay, .msg-urgent .msg-card { animation: none; }
}

/* Κουμπί μηνυμάτων στην πάνω μπάρα */
.topbar-msg {
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--text);
}

/* =====================================================================
   ΤΟ ΜΕΝΟΥ
   =====================================================================
   Δοκιμαστικό: εμφανίζεται μόνο όπου η ρύθμιση «ui.menu» είναι «tree».

   ΤΙ ΔΙΟΡΘΩΘΗΚΕ: η πρώτη εκδοχή έβαζε κάτω από κάθε επιλογή μια
   επεξήγηση με κόμματα. Το αποτέλεσμα διαβαζόταν ως μπλεγμένο κείμενο -
   το μάτι δεν ξεχώριζε τις επιλογές μεταξύ τους. Τώρα: μία επιλογή ανά
   γραμμή, εικονίδιο αριστερά, γραμμή διαχωρισμού ανάμεσα.

   Χτισμένο με <details>, χωρίς JavaScript: σε παλιό κινητό μέσα στη
   βάρδια, μενού που εξαρτάται από scripts είναι μενού που κάποια στιγμή
   δεν θα ανοίξει. */

.drawer { position: relative; }

.drawer > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px: το ελάχιστο μέγεθος αφής - πατιέται με τον αντίχειρα, όρθιος. */
  min-width: 44px;
  min-height: 44px;
  font-size: 22px;
  line-height: 1;
  border-radius: 8px;
  user-select: none;
}

.drawer > summary::-webkit-details-marker { display: none; }
.drawer[open] > summary { background: var(--surface-2, rgba(255,255,255,.08)); }

.drawer-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  width: min(94vw, 400px);
  max-height: 80vh;
  overflow-y: auto;
  padding: 4px 0 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 56px rgba(0, 0, 0, .5);
}

/* --- Ενότητα -------------------------------------------------------- */

.drawer-section { padding-top: 4px; }

/* Η γραμμή πάνω από τον τίτλο χωρίζει τις ενότητες πιο καθαρά από ό,τι
   κενό: σε μικρή οθόνη το κενό χάνεται με το σκρολ. */
.drawer-section + .drawer-section,
.drawer-home + .drawer-section {
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.drawer-section-title {
  margin: 0;
  padding: 14px 16px 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Επιλογή -------------------------------------------------------- */

.drawer-home,
.drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 52px: άνετος στόχος αφής, και αρκετός αέρας ώστε δύο διαδοχικές
     επιλογές να μη διαβάζονται ως μία πρόταση. */
  min-height: 52px;
  padding: 0 16px;
  color: var(--text);
  text-decoration: none;
  font-size: 16px;
}

.drawer-item + .drawer-item {
  box-shadow: inset 0 1px 0 var(--border);
}

.drawer-home {
  font-weight: 700;
  min-height: 56px;
}

.drawer-icon {
  flex: none;
  width: 26px;
  font-size: 19px;
  line-height: 1;
  text-align: center;
}

.drawer-label { flex: 1; }

.drawer-arrow {
  flex: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
}

.drawer-home:active,
.drawer-item:active { background: var(--surface-2, rgba(255,255,255,.08)); }

/* Πού βρίσκεσαι τώρα: γραμμή στο πλάι και έντονο κείμενο, όχι μόνο
   χρώμα - το χρώμα χάνεται στον ήλιο μιας πλατείας. */
.drawer-item.is-here,
.drawer-home.is-here {
  background: var(--surface-2, rgba(255,255,255,.07));
  box-shadow: inset 4px 0 0 var(--accent, #6ea8fe);
  font-weight: 700;
}

/* =====================================================================
   ΠΙΝΑΚΑΣ ΜΙΣΘΟΔΟΣΙΑΣ - ονόματα × βραδιές
   ---------------------------------------------------------------------
   Ο μόνος πίνακας της εφαρμογής, και υπάρχει για λόγο: η ερώτηση «ποιος
   δούλεψε ποια βραδιά και τι πήρε» είναι δισδιάστατη, και οποιαδήποτε
   λίστα την ισοπεδώνει. Σε κινητό κυλάει οριζόντια με τη στήλη των
   ονομάτων καρφωμένη - αλλιώς κυλώντας δεξιά χάνεις ποιανού είναι η
   γραμμή που κοιτάς.
   ===================================================================== */

.matrix-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.matrix {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-size: 13px;
}

.matrix th,
.matrix td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}

.matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  color: var(--text-dim);
  font-weight: 600;
}

/* Η στήλη των ονομάτων μένει ορατή σε όλη την οριζόντια κύλιση. */
.matrix .matrix-name {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  text-align: left;
  font-weight: 600;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.matrix thead .matrix-name {
  z-index: 3;
  background: var(--surface-2);
}

.matrix tbody tr:nth-child(even) .matrix-name { background: var(--surface-2); }
.matrix tbody tr:nth-child(even) td { background: var(--surface-2); }

/* Το κελί είναι ολόκληρο σύνδεσμος: σε κινητό ο στόχος αφής πρέπει να
   είναι το κουτί, όχι το νούμερο μέσα του. */
.matrix-cell {
  display: block;
  min-width: 4.5rem;
  padding: 2px 0;
  color: var(--text);
  text-decoration: none;
}

.matrix-cell:active { color: var(--accent); }

.matrix-owed {
  display: block;
  font-size: 11px;
  color: var(--danger);
}

.matrix-paid {
  display: block;
  font-size: 11px;
  color: var(--success);
}

.matrix-empty { color: var(--border); }

.matrix tfoot td,
.matrix tfoot th {
  background: var(--surface-2);
  font-weight: 700;
  border-top: 2px solid var(--border);
}

.matrix-total { border-left: 2px solid var(--border); }

/* Η δεύτερη ημερομηνία της βραδιάς, στην κεφαλίδα του πίνακα: «08/08»
   από πάνω, «→ 09/08» από κάτω. Χωρίς αυτό η στήλη δεν λέει ποια νύχτα
   εννοεί, και ακριβώς αυτή η ασάφεια γέννησε τα λάθη στα μεροκάματα. */
.matrix-day2 {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-dim);
}

/* Η λέξη κάτω από το ποσό: μία λέξη, όχι δεύτερο νούμερο που διαβάζεται
   ως δεύτερο ποσό. */
.matrix-owed,
.matrix-paid { font-weight: 600; }

/* Το φιλοδώρημα δίπλα στο μεροκάματο: ορατό αλλά ποτέ στο ίδιο νούμερο.
   Πράσινο θα το έδειχνε «καλό», κόκκινο «λάθος» - είναι ούτε το ένα
   ούτε το άλλο, απλώς άλλο είδος χρήματος. */
.matrix-tip {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
}

/* =====================================================================
   ΜΕΓΕΘΟΣ ΚΟΥΜΠΙΩΝ ΧΡΕΩΣΗΣ - επιλογή της επιχείρησης
   ---------------------------------------------------------------------
   Άλλο μαγαζί δουλεύει με δύο δάχτυλα σε φως ημέρας και άλλο με ένα χέρι
   στο σκοτάδι. Πέντε μεγέθη, και ΚΑΝΕΝΑ δεν κατεβάζει το γράμμα κάτω από
   το όριο που διαβάζεται μέσα στη βραδιά: μικραίνει το πλακίδιο και οι
   αποστάσεις, όχι η αναγνωσιμότητα.

   Το «normal» είναι ό,τι ίσχυε πάντα και μένει η προεπιλογή - κανείς δεν
   πρέπει να δει την οθόνη του να αλλάζει χωρίς να το ζητήσει.
   ===================================================================== */

/* ΟΛΑ ΤΑ ΠΛΑΚΙΔΙΑ ΙΣΟΜΕΓΕΘΗ - ΚΑΙ ΟΣΑ ΕΧΟΥΝ ΠΕΔΙΑ.
   Ρητή απαίτηση: το πλέγμα πρέπει να διαβάζεται ως πλέγμα, όχι ως
   ανάκατα κουτιά. Όσα ρωτούν ποσότητα έπαιρναν διπλή θέση και χάλαγαν
   τη σειρά· τώρα χωράνε στο ίδιο κελί, με ό,τι μικρότερα γράμματα
   χρειαστεί. */

/* Το πλακίδιο γεμίζει το κελί του: στο grid οι γραμμές παίρνουν το ύψος
   του ψηλότερου, και χωρίς αυτό τα κοντά κουτιά έμεναν να αιωρούνται
   μέσα σε ψηλή γραμμή. */
.product-grid > form,
.quick-grid > form { display: flex; }

.product-grid > form > .product-btn,
.quick-grid > form > .quick-btn { flex: 1; height: 100%; }

/* ΤΑ ΠΕΔΙΑ ΚΑΙ ΤΑ ΚΟΥΜΠΙΑ ΑΚΟΛΟΥΘΟΥΝ ΤΟ ΜΕΓΕΘΟΣ.
   Είχαν σταθερές διαστάσεις και έμεναν τεράστια μέσα σε μικρό πλακίδιο.
   Η ΓΡΑΜΜΑΤΟΣΕΙΡΑ ΤΩΝ ΠΕΔΙΩΝ ΜΕΝΕΙ 16px: κάτω από αυτό το iOS κάνει ζουμ
   σε κάθε άγγιγμα - μικραίνουν τα περιθώρια και το πλάτος, όχι το
   γράμμα. Στα κουμπιά, που δεν έχουν αυτόν τον περιορισμό, μικραίνει
   και η γραμματοσειρά. */
/* Στα δύο μικρά μεγέθη τα πάντα συρρικνώνονται όσο χρειάζεται για να
   χωρέσουν στο ΙΔΙΟ κελί με τα απλά πλακίδια. Η γραμματοσειρά των
   πεδίων μένει 16px - κάτω από αυτό το iOS κάνει ζουμ σε κάθε άγγιγμα -
   αλλά το κουτί τους στενεύει όσο πάει. */
.btn-size-xs .product-qty-input   { width: 2.4em; padding: 3px 2px; border-radius: 8px; }
.btn-size-xs .product-price-input { padding: 3px 4px; border-radius: 8px; min-width: 0; }
.btn-size-xs .product-btn .btn,
.btn-size-xs .quick-btn .btn      { min-height: 24px; padding: 2px 4px; font-size: 11px;
                                    border-radius: 8px; }
.btn-size-xs .product-qty-row     { gap: 4px; }
.btn-size-xs .quick-btn.is-ask .quick-price,
.btn-size-xs .product-btn.is-variable .product-price { font-size: 11px; }

/* ΤΟ ΠΕΔΙΟ ΚΑΙ ΤΟ ΚΟΥΜΠΙ ΔΙΠΛΑ-ΔΙΠΛΑ, ΟΧΙ ΣΤΟΙΒΑΓΜΕΝΑ.
   Στοιβαγμένα κρατούσαν το πλακίδιο στα 123 px και - επειδή όλες οι
   σειρές είναι ισοϋψείς - τραβούσαν ΚΑΙ τα απλά είδη στο ίδιο ύψος.
   Δηλαδή τα «πολύ μικρά» έπαυαν να είναι μικρά. Σε μία σειρά, το ίδιο
   πλακίδιο πέφτει κάτω από τα 70 px. */
.btn-size-xs .product-btn.is-variable,
.btn-size-xs .quick-btn.is-ask,
.btn-size-small .product-btn.is-variable,
.btn-size-small .quick-btn.is-ask {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  align-items: center;
  row-gap: 3px;
  column-gap: 4px;
}

.btn-size-xs .product-btn.is-variable > .product-name,
.btn-size-xs .quick-btn.is-ask > .quick-name,
.btn-size-small .product-btn.is-variable > .product-name,
.btn-size-small .quick-btn.is-ask > .quick-name { grid-column: 1 / -1; }

.btn-size-xs .product-btn.is-variable > .product-qty-row,
.btn-size-xs .quick-btn.is-ask > .product-qty-row,
.btn-size-xs .product-btn.is-variable > .product-price-input,
.btn-size-small .product-btn.is-variable > .product-qty-row,
.btn-size-small .quick-btn.is-ask > .product-qty-row,
.btn-size-small .product-btn.is-variable > .product-price-input {
  grid-column: 1;
  width: auto;
  flex-wrap: nowrap;
}

.btn-size-xs .product-btn.is-variable > .btn,
.btn-size-xs .quick-btn.is-ask > .btn,
.btn-size-small .product-btn.is-variable > .btn,
.btn-size-small .quick-btn.is-ask > .btn { grid-column: 2; width: auto; }

/* ΤΑ ΠΑΙΔΙΑ ΤΟΥ GRID ΠΡΕΠΕΙ ΝΑ ΜΠΟΡΟΥΝ ΝΑ ΣΥΡΡΙΚΝΩΘΟΥΝ.
   Από προεπιλογή έχουν min-width:auto, δηλαδή δεν πέφτουν κάτω από το
   πλάτος του περιεχομένου τους - και έβγαιναν 2-3 px έξω από το
   πλακίδιο. Το ίδιο και οι μεγάλες λέξεις, που σπάνε πλέον. */
.btn-size-xs .product-btn > *,
.btn-size-xs .quick-btn > *,
.btn-size-small .product-btn > *,
.btn-size-small .quick-btn > * { min-width: 0; }

.btn-size-xs .product-name,
.btn-size-xs .quick-name,
.btn-size-small .product-name,
.btn-size-small .quick-name { overflow-wrap: anywhere; }

/* Λίγο πιο σφιχτά, ώστε να χωρέσουν όλα με άνεση. */
.btn-size-xs .product-btn.is-variable,
.btn-size-xs .quick-btn.is-ask { padding: 6px; column-gap: 3px; }
.btn-size-xs .product-btn.is-variable > .btn,
.btn-size-xs .quick-btn.is-ask > .btn { padding: 2px 3px; font-size: 10.5px; }
.btn-size-xs .product-qty-input { width: 2.2em; }

/* ΣΤΟ ΠΙΟ ΜΙΚΡΟ ΜΕΓΕΘΟΣ Η ΛΕΞΗ ΓΙΝΕΤΑΙ ΣΥΜΒΟΛΟ.
   Το «Χρέωση» δεν χωράει σε πλακίδιο 113 px δίπλα σε πεδίο και τιμή -
   στριμωχνόταν και το κείμενο ξεχείλιζε πάνω από την τιμή. Το ✓ δίπλα
   σε πεδίο ποσότητας διαβάζεται αμέσως, και η λέξη μένει στο DOM για
   τους αναγνώστες οθόνης. */
.btn-size-xs .product-btn.is-variable > .btn,
.btn-size-xs .quick-btn.is-ask > .btn,
.btn-size-small .product-btn.is-variable > .btn,
.btn-size-small .quick-btn.is-ask > .btn {
  font-size: 0;
  gap: 0;                 /* το κενό του .btn μετρούσε ακόμη κι άδειο */
  padding: 2px 6px;
  min-width: 2em;
}

.btn-size-xs .product-btn.is-variable > .btn::after,
.btn-size-xs .quick-btn.is-ask > .btn::after,
.btn-size-small .product-btn.is-variable > .btn::after,
.btn-size-small .quick-btn.is-ask > .btn::after {
  content: "✓";
  font-weight: 700;
  line-height: 1;
}

.btn-size-xs .product-btn.is-variable > .btn::after,
.btn-size-xs .quick-btn.is-ask > .btn::after { font-size: 15px; }

.btn-size-small .product-btn.is-variable > .btn::after,
.btn-size-small .quick-btn.is-ask > .btn::after { font-size: 17px; }

.btn-size-small .product-qty-input   { width: 2.8em; padding: 4px 3px; }
.btn-size-small .product-price-input { padding: 4px 6px; min-width: 0; }
.btn-size-small .product-btn .btn,
.btn-size-small .quick-btn .btn      { min-height: 28px; padding: 3px 6px; font-size: 12px; }
.btn-size-small .product-qty-row     { gap: 4px; }
.btn-size-small .quick-btn.is-ask .quick-price,
.btn-size-small .product-btn.is-variable .product-price { font-size: 12px; }

.btn-size-large .product-btn .btn,
.btn-size-large .quick-btn .btn      { min-height: 40px; font-size: 15px; }
.btn-size-large .product-qty-input   { width: 4.8em; }

.btn-size-xl .product-btn .btn,
.btn-size-xl .quick-btn .btn         { min-height: 46px; font-size: 16px; }
.btn-size-xl .product-qty-input      { width: 5.2em; padding: 10px; }
.btn-size-xl .product-price-input    { padding: 10px; }

/* Στα δύο μικρά μεγέθη το ύψος δεν το ορίζει το min-height αλλά το
   ΠΕΡΙΕΧΟΜΕΝΟ: τρεις σειρές κειμένου κρατούν το πλακίδιο ψηλό όσο κι αν
   μικρύνουν τα περιθώρια. Γι' αυτό ποσότητα και τιμή μπαίνουν στην ΙΔΙΑ
   σειρά - δύο σειρές αντί για τρεις, δηλαδή πραγματικά τα μισά.

   ΕΞΑΙΡΟΥΝΤΑΙ όσα ρωτούν ποσότητα: εκείνα έχουν πεδίο και κουμπί, και
   το δίστηλο πλέγμα τα διέλυε. */
.btn-size-xs .quick-btn:not(.is-ask),
.btn-size-small .quick-btn:not(.is-ask) {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  row-gap: 2px;
  column-gap: 8px;
}

/* Το grid απλώνει το όνομα σε όλο το πλάτος και το κείμενο του
   <button> κεντράρεται από προεπιλογή - στοιχίζεται ρητά αριστερά,
   όπως στα κανονικά πλακίδια. */
.btn-size-xs .quick-btn:not(.is-ask) .quick-name,
.btn-size-small .quick-btn:not(.is-ask) .quick-name { grid-column: 1 / -1; justify-self: start; text-align: left; }

.btn-size-xs .quick-btn:not(.is-ask) .quick-step,
.btn-size-small .quick-btn:not(.is-ask) .quick-step { justify-self: start; }

.btn-size-xs .quick-btn:not(.is-ask) .quick-price,
.btn-size-small .quick-btn:not(.is-ask) .quick-price { justify-self: end; }

/* --- Πολύ μικρά: τα περισσότερα είδη με μια ματιά -------------------- */
.btn-size-xs .product-grid,
.btn-size-xs .quick-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.btn-size-xs .product-btn { min-height: 0; padding: 7px 9px; gap: 1px; }
.btn-size-xs .quick-btn   { min-height: 0; padding: 7px 9px; }
.btn-size-xs .product-name { font-size: 13px; }
.btn-size-xs .quick-name   { font-size: 13px; }
.btn-size-xs .quick-step   { font-size: 15px; }
.btn-size-xs .product-price,
.btn-size-xs .quick-price  { font-size: 12px; }

/* --- Μικρά: τα μισά από τα κανονικά ---------------------------------- */
.btn-size-small .product-grid,
.btn-size-small .quick-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.btn-size-small .product-btn { min-height: 0; padding: 9px 11px; gap: 2px; }
.btn-size-small .quick-btn   { min-height: 0; padding: 9px 11px; }
.btn-size-small .product-name { font-size: 14px; }
.btn-size-small .quick-name   { font-size: 14px; }
.btn-size-small .quick-step   { font-size: 17px; }
.btn-size-small .product-price,
.btn-size-small .quick-price  { font-size: 12.5px; }

/* --- Κανονικά: η προεπιλογή, ίδια με πάντα --------------------------- */

/* --- Μεγάλα: για χοντρά δάχτυλα και φασαρία -------------------------- */
.btn-size-large .product-grid,
.btn-size-large .quick-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.btn-size-large .product-btn { min-height: 96px; padding: 15px; }
.btn-size-large .quick-btn   { min-height: 104px; padding: 15px; }
.btn-size-large .product-name { font-size: 16px; }
.btn-size-large .quick-name   { font-size: 17px; }
.btn-size-large .quick-step   { font-size: 23px; }

/* --- Πολύ μεγάλα: λίγα είδη, αλάνθαστο πάτημα ------------------------ */
.btn-size-xl .product-grid,
.btn-size-xl .quick-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.btn-size-xl .product-btn { min-height: 120px; padding: 18px; }
.btn-size-xl .quick-btn   { min-height: 128px; padding: 18px; }
.btn-size-xl .product-name { font-size: 18px; }
.btn-size-xl .quick-name   { font-size: 19px; }
.btn-size-xl .quick-step   { font-size: 26px; }

/* =====================================================================
   ΠΟΙΟΝ ΧΡΕΩΝΩ ΤΩΡΑ - το όνομα του λογαριασμού
   ---------------------------------------------------------------------
   Ήταν απλός τίτλος και χανόταν ανάμεσα στα υπόλοιπα. Ο σερβιτόρος
   χρεώνει όρθιος, με τρία τραπέζια να μιλάνε μαζί: το όνομα πρέπει να
   απαντάει «σε ποιον;» πριν προλάβει να διαβάσει. Αντίστροφα χρώματα -
   το μόνο στοιχείο της οθόνης με γεμάτο φόντο, ώστε να μην μπορεί να
   μπερδευτεί με τίποτα άλλο.
   ===================================================================== */

.order-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.order-who {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .2px;
  padding: 6px 14px;
  border-radius: var(--radius);
  /* Μεγάλα ονόματα δεν σπάνε τη διάταξη ούτε ξεχειλίζουν στο πλάι. */
  max-width: 100%;
  overflow-wrap: anywhere;
}