/* ------------------------------------------------------------------
   Taxi KPI — design tokens
   Πάντα φωτεινό θέμα (σκόπιμα, όχι σκοτεινό) — παλέτα γραφημάτων
   επικυρωμένη για daltonism.
------------------------------------------------------------------- */
:root {
  color-scheme: light;
  --surface-0:  #f4f0e8;   /* φόντο σελίδας — ζεστό κρεμ */
  --surface-1:  #fffdf9;   /* κάρτες / επιφάνεια γραφημάτων */
  --surface-2:  #eeece3;   /* ήπια γεμίσματα, zebra */
  --border:     #dfe4df;
  --border-str: #cfd3ce;

  --text-primary:   #1e2b2b;
  --text-secondary: #45534f;
  --text-muted:     #71807d;

  --series-1: #2a78d6;  /* μπλε   — τζίρος */
  --series-2: #eb6834;  /* πορτ.  — έξοδα  */
  --series-3: #1baf7a;  /* aqua   — κέρδος */
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;

  --good:     #1baf7a;
  --warning:  #eda100;
  --critical: #e34948;

  --accent:      #176b69;  /* πετρόλ — πετρόλ χρώμα της εφαρμογής */
  --accent-ink:  #ffffff;
  --accent-gold: #e9b949;  /* χρυσό — κύριες ενέργειες (login, αποθήκευση) */
  --accent-gold-ink: #1e2b2b;
  --grid:        #e6e2d6;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(30,43,43,.04), 0 4px 14px rgba(30,43,43,.06);
  --shadow-hover: 0 2px 4px rgba(30,43,43,.05), 0 10px 22px rgba(30,43,43,.09);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
}

/* Διαχείριση: σκέτο ανοιχτό γκρι φόντο (χωρίς το κρεμ/χρυσό gradient), όπως τα
   κλασικά admin panels — οι κάρτες μένουν λευκές. Το ίδιο και η σελίδα του οδηγού
   (Σύνδεση οδηγού, και πριν φανεί οτιδήποτε — αλλιώς «αναβοσβήνει» το κρεμ/χρυσό).
   Το ταμείο του οδηγού, μετά τη σύνδεση: σκέτο λευκό φόντο. */
body.admin-page,
body:has(> #login.login-screen):not(:has(> #app:not(.hidden))),
body:not(.admin-page):has(> #app:not(.hidden)) {
  background: #f4f5f7;
  --surface-1: #ffffff;   /* κάρτες, πίνακες, μπάρα: καθαρό λευκό αντί για ζεστό */
  --surface-2: #f1f3f5;   /* ήπια γεμίσματα, zebra, hover σειρών */
  --border: #e4e7eb;
  --border-str: #d2d7dd;
  --grid: #e9ecef;
}
body:not(.admin-page):has(> #app:not(.hidden)) { background: #ffffff; }

/* Σκόπιμα ΧΩΡΙΣ @media (prefers-color-scheme: dark): η εφαρμογή μένει πάντα
   φωτεινή, ανεξάρτητα από τη ρύθμιση του συστήματος του επισκέπτη. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body {
  background:
    radial-gradient(900px 520px at 86% 4%, color-mix(in srgb, var(--accent-gold) 26%, transparent), transparent 45%),
    var(--surface-0);
  background-attachment: fixed;
  min-height: 100vh;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.011em; }
h1 { font-size: 1.25rem; }
h2 { font-size: 1.0rem; }
/* Τίτλοι ενοτήτων στη φόρμα ταμείου του οδηγού (Στοιχεία Ταμείου / Εισπράξεις / Έξοδα). */
h2.form-title { font-size: 1.125rem; font-weight: 700; }
h3 { font-size: .875rem; color: var(--text-secondary); font-weight: 600; }
a { color: var(--accent); }

/* ------------------------------------------------------------ σκελετός */

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 18px;
  background: color-mix(in srgb, var(--surface-1) 92%, transparent);
  backdrop-filter: saturate(1.3) blur(8px);
  -webkit-backdrop-filter: saturate(1.3) blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar .brand {
  display: flex; align-items: center; gap: 9px; font-weight: 650;
  min-width: 0; overflow: hidden;
}
.topbar .brand svg { display: block; flex: none; }
.topbar .brand .brand-logo {
  display: block; flex: none; width: 34px; height: 34px;
  border-radius: 50%; object-fit: cover;
  box-shadow: 0 1px 3px rgba(30,43,43,.25);
}
.topbar .brand span.label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .spacer { flex: 1; min-width: 8px; }
.topbar .who { color: var(--text-secondary); font-size: .875rem; white-space: nowrap; flex: none; }
/* Το «Διαχείριση» πάνω δεξιά είναι κουμπί (ανοίγει το popup αλλαγής κωδικού). */
.topbar .who-btn { color: var(--text-secondary); font-size: .875rem; white-space: nowrap; flex: none; }

/* Τετράγωνο εικονίδιο προς το πρόγραμμα κρατήσεων — ακριβώς το ίδιο tile με
   το "Ταμείο" που έχει το πρόγραμμα κρατήσεων προς τα εδώ (.tamio-tile στο
   public/reservations/styles.css), ίδιες διαστάσεις/typography. */
.topbar .tile-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 78px; height: 56px; flex: none;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-1); color: var(--text-primary);
  font-weight: 700; font-size: 11px; text-decoration: none;
  box-shadow: 0 4px 14px rgba(30,43,43,.05);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.topbar .tile-link:hover { transform: translateY(-2px); border-color: var(--border-str); box-shadow: 0 7px 18px rgba(30,43,43,.09); }
.topbar .tile-link:disabled { opacity: .45; filter: grayscale(1); cursor: not-allowed; box-shadow: none; }
.topbar .tile-link:disabled:hover { transform: none; box-shadow: none; border-color: var(--border); }
.topbar .tile-icon { font-size: 19px; line-height: 1; }
@media (max-width: 760px) {
  .topbar .tile-link { width: 60px; height: 46px; font-size: 9px; gap: 2px; }
  .topbar .tile-icon { font-size: 15px; }
}

.wrap { max-width: 1220px; margin: 0 auto; padding: 18px; }

/* ------------------------------------------------------------- sidebar */
/* Διαχείριση (admin.html): μόνιμη στήλη αριστερά (αχνό κίτρινο, άσπρα
   γράμματα/εικονίδια) με «Μενού» (Επισκόπηση / Οδηγοί / Ρυθμίσεις) και
   «Εργαλεία» (Πρόγραμμα, Ενοικιαζόμενα). Το σήμα και το όνομα της εταιρείας
   μένουν με τα κανονικά (σκούρα) χρώματα. Δίπλα, μια λευκή μπάρα (.apphead)
   στην κορυφή του περιεχομένου με απόκρυψη μενού, χαιρετισμό, Διαχείριση
   και Αποσύνδεση. Σε κινητό η στήλη γίνεται μπάρα στην κορυφή. */
:root {
  --sidebar-w: 236px;
  --sidebar-bg: #176b69;        /* πετρόλ — ίδιο με το --accent */
  --sidebar-ink: #ffffff;
  --sidebar-ink-soft: rgba(255,255,255,.78);
  --sidebar-line: rgba(255,255,255,.22);
  --sidebar-hover: rgba(255,255,255,.14);
  --sidebar-active: rgba(255,255,255,.26);
}
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); z-index: 20;
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 12px 14px;
  background: var(--sidebar-bg);
  color: var(--sidebar-ink);
  overflow-y: auto;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px; font-weight: 700;
  min-width: 0; padding: 4px 6px 14px; margin-bottom: 4px;
  color: var(--accent-gold);   /* το όνομα της εταιρείας χρυσό πάνω στο πετρόλ */
  border-bottom: 1px solid var(--sidebar-line);
}
.sidebar-brand svg { display: block; flex: none; }
.sidebar-brand .brand-logo {
  display: block; flex: none; width: 36px; height: 36px;
  border-radius: 50%; object-fit: cover;
  box-shadow: 0 1px 3px rgba(30,43,43,.3);
}
/* Σήμα AveMiles (διάφανο /favicon.svg): χωρίς κύκλο και σκιά — αυτά μένουν για τα λογότυπα πελατών. */
.sidebar-brand .brand-logo[src="/favicon.svg"], .topbar .brand .brand-logo[src="/favicon.svg"] { border-radius: 0; box-shadow: none; object-fit: contain; }
.sidebar-brand .label { min-width: 0; font-size: 1rem; line-height: 1.2; letter-spacing: -.01em; }
/* «Demo» / «Client 1» κάτω από το «AveMiles» (BRAND_SCRIPT στο worker/index.js). */
.sidebar-brand .brand-sub { display: block; margin-top: 1px; font-size: .75rem; font-weight: 500; letter-spacing: .02em; color: var(--sidebar-ink-soft); }
.sidebar-section { font-size: .8125rem; color: var(--sidebar-ink-soft); padding: 12px 10px 6px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 3px; }
.sidebar-nav > button, .sidebar-nav > a {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 12px; border: none; border-radius: 8px;
  background: transparent; color: var(--sidebar-ink);
  font: inherit; font-weight: 600; font-size: .9375rem; text-decoration: none;
  cursor: pointer; transition: background .12s;
}
.sidebar-nav > button:hover, .sidebar-nav > a:hover { background: var(--sidebar-hover); color: var(--sidebar-ink); transform: none; }
.sidebar-nav > button[aria-pressed="true"] { background: var(--sidebar-active); color: var(--sidebar-ink); font-weight: 700; }
.sidebar-nav .nav-icon { width: 19px; height: 19px; flex: none; color: var(--sidebar-ink); }
/* Κλειδωμένη ενότητα (LOCKED στο admin.js): αχνή, με λουκέτο δεξιά. */
.sidebar-nav > button.is-locked { opacity: .5; cursor: not-allowed; }
.sidebar-nav > button.is-locked:hover { background: transparent; }
.sidebar-nav .nav-lock { width: 15px; height: 15px; flex: none; margin-left: auto; color: var(--sidebar-ink); }
/* Συνεργάτες → Κανόνες φόρμας κράτησης και Alert: δύο κάρτες δίπλα-δίπλα, ίδια κεφαλίδα με
   τις υπόλοιπες. Στους Κανόνες μία ρύθμιση ανά γραμμή — όνομα + εξήγηση αριστερά, πεδία δεξιά
   (όλα στην ίδια στήλη) — και κάτω σημείωση + κουμπί, χωρισμένα με λεπτή γραμμή. */
.rules-card { display: flex; flex-direction: column; }
.rules-list { display: grid; }
.rules-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--border); }
.rules-item:first-child { border-top: 0; padding-top: 0; }
.rules-name { display: block; margin: 0; font-size: .875rem; font-weight: 600; color: var(--text-primary); }
.rules-desc { margin-top: 2px; font-size: .75rem; color: var(--text-muted); }
/* Ίδιες στήλες σε κάθε γραμμή (πεδίο · λέξη · πεδίο), ώστε το «3 ώρες» να στοιχίζεται κάτω από το «από». */
.rules-ctrl { display: grid; grid-template-columns: 112px 34px 112px; align-items: center; column-gap: 8px; flex: none; }
.rules-ctrl input { width: 100%; padding: 6px 10px; font-size: .875rem; }
.rules-ctrl #br_lead { text-align: center; }
.rules-ctrl .rules-sep:last-child { grid-column: 2 / 4; }
.rules-sep { font-size: .8125rem; color: var(--text-muted); text-align: center; }
.rules-ctrl .rules-sep:last-child { text-align: left; }
.rules-text-block { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--text-secondary); }
.rules-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
/* Το κουμπί κάτω κάτω και στις δύο κάρτες (ίδιο ύψος στη σειρά), με τουλάχιστον 12px απόσταση. */
.rules-list, .rules-text-block, .rules-card .alert-banner { margin-bottom: 12px; }
.rules-hint { flex: 1; font-size: .75rem; line-height: 1.45; color: var(--text-muted); }
.rules-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
@media (max-width: 760px) { .rules-pair { grid-template-columns: 1fr; } }
/* Ενότητα της έκδοσης Pro (PRO στο admin.js): χρυσό σήμα «PRO» δεξιά αντί για λουκέτο. */
.sidebar-nav .nav-pro {
  flex: none; margin-left: auto; padding: 2px 6px; border-radius: 4px;
  background: var(--accent-gold); color: var(--accent-gold-ink);
  font-size: .625rem; font-weight: 800; letter-spacing: .06em; line-height: 1.3;
}

.apphead {
  position: sticky; top: 0; z-index: 15;
  margin-left: var(--sidebar-w);
  display: flex; align-items: center; gap: 8px;
  min-height: 56px; padding: 8px 22px;
  background: var(--surface-1); border-bottom: 1px solid var(--border);
}
.apphead .spacer { flex: 1; }
.apphead-title { font-weight: 700; font-size: 1.0625rem; margin-left: 6px; }
/* Το χεράκι στο «Καλώς ήρθες» κάνει wave (κουνιέται από τον καρπό, επαναλαμβανόμενα). */
.apphead-title .wave { display: inline-block; transform-origin: 70% 70%; animation: wave 2.4s ease-in-out infinite; }
@keyframes wave {
  0%, 60%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) { .apphead-title .wave { animation: none; } }
.apphead-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; background: transparent; padding: 7px 10px; border-radius: var(--radius-sm);
  color: var(--text-primary); font-weight: 600; font-size: .9375rem;
}
.apphead-btn:hover { background: var(--surface-2); }
.apphead-btn .nav-icon { width: 18px; height: 18px; }
.apphead-toggle { border: 1px solid var(--border-str); padding: 6px; }
main.with-sidebar { margin: 0 0 0 var(--sidebar-w); max-width: none; padding: 22px 28px; }
main.with-sidebar > * { max-width: 1220px; }
/* Κρυμμένο μενού (κουμπί πάνω αριστερά): το περιεχόμενο πιάνει όλο το πλάτος. */
/* «Ταμεία» κλειδωμένα (κωδικός Ταμείου, admin.js#renderTameioNav): διαγραμμένα γράμματα + λουκέτο. */
.sidebar-nav > button.is-tameio-locked > span { text-decoration: line-through; text-decoration-thickness: 1.5px; }
body.nav-collapsed .sidebar { display: none !important; }
body.nav-collapsed .apphead, body.nav-collapsed main.with-sidebar { margin-left: 0; }
@media (max-width: 760px) {
  .sidebar {
    position: sticky; top: 0; bottom: auto; width: auto;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 8px 12px; overflow: visible;
  }
  .sidebar-brand { flex: 1 1 100%; padding: 2px 4px 8px; margin: 0; }
  .sidebar-section { display: none; }
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .sidebar-nav > button, .sidebar-nav > a { width: auto; padding: 7px 10px; font-size: .875rem; gap: 7px; }
  .sidebar-nav .nav-icon { width: 16px; height: 16px; }
  .apphead { position: static; margin: 0; padding: 8px 12px; min-height: 48px; }
  .apphead-toggle { display: none; }
  .apphead-title { font-size: 1rem; }
  main.with-sidebar { margin: 0; padding: 14px; }
}

.wrap.narrow { max-width: 760px; }

.row  { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.grid { display: grid; gap: 14px; }

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.card > header {
  display: flex; align-items: baseline; gap: 10px;
  margin: -2px 0 14px;
}
.card > header .sub { color: var(--text-muted); font-size: .8125rem; margin-left: auto; }

.section-title {
  font-size: .75rem; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 26px 0 10px;
}
.section-title:first-child { margin-top: 0; }
.section-title.tight { margin: 16px 0 6px; }

/* -------------------------------------------------------------- στοιχεία */

button, .btn {
  font: inherit; font-weight: 550;
  padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-str);
  background: var(--surface-1); color: var(--text-primary);
  cursor: pointer; transition: background .12s, border-color .12s, transform .1s;
}
button:hover, .btn:hover { background: var(--surface-2); }
button:active, .btn:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
button.primary, .btn.primary {
  /* Πετρόλ (όπως το sidebar) — πριν ήταν χρυσό */
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  font-weight: 700;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}
button.primary:hover { filter: brightness(1.05); }
button.ghost { border-color: transparent; background: transparent; color: var(--text-secondary); }
button.ghost:hover { background: var(--surface-2); }
button.danger { color: var(--critical); border-color: var(--border); }
button.sm { padding: 4px 9px; font-size: .8125rem; }
/* Κουμπί «Alert!» (Συνεργάτες, κάτω): διακριτικό κόκκινο περίγραμμα, γεμάτο κόκκινο μόνο όσο είναι ενεργό (.is-on) — και η ένδειξη ότι το alert είναι ενεργό */
button.alert-button { background: transparent; border-color: var(--critical); color: var(--critical); font-weight: 700; }
button.alert-button.is-on { background: var(--critical); color: #fff; }
button.alert-button:hover { filter: brightness(1.05); }
.alert-banner { margin-top: 8px; padding: 6px 10px; border-left: 3px solid var(--critical); background: rgba(227, 73, 72, .08); color: var(--critical); font-size: .8125rem; line-height: 1.5; white-space: pre-wrap; }
button.big { padding: 13px 20px; font-size: 1rem; width: 100%; }

label { display: block; font-size: .8125rem; color: var(--text-secondary); margin-bottom: 4px; }

input, select, textarea {
  font: inherit; width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border-str); border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--text-primary);
}
/* Ώρα σε 24ωρη μορφή με δύο αριθμητικά πεδία (ώρα : λεπτά) — φόρμες ταμείου. */
.time-pick { display: flex; align-items: center; gap: 4px; }
.time-pick input { flex: 1; min-width: 0; padding-left: 8px; padding-right: 8px; text-align: center; }
.time-pick span { color: var(--text-muted); font-weight: 600; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 1px; border-color: var(--accent);
}
input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
textarea { min-height: 68px; resize: vertical; }

.field { margin-bottom: 12px; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.fields.two { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* Φόρμα σε μία στήλη, ένα πεδίο ανά σειρά (π.χ. Νέος οδηγός). */
.form-rows { display: grid; grid-template-columns: 1fr; gap: 12px; }
/* Δικαιώματα οδηγού ως τικ (Νέος οδηγός). */
.perm-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.perm-checks label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; font-size: .875rem; color: var(--text-primary); cursor: pointer; }
.perm-checks input { width: 16px; height: 16px; margin: 0; }
/* Οδηγοί → Νέος οδηγός / Επεξεργασία: τα δικαιώματα ένα κάτω από το άλλο. */
.perm-checks-stack { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
/* «Μόνο οι δικές του κούρσες»: περιορισμός ορατότητας, όχι δικαίωμα — ξεχωριστό πλαίσιο κάτω από τα τικ. */
.perm-scope { margin-top: 6px; padding: 10px 12px; border: 2px solid var(--critical); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--critical) 8%, var(--surface-1)); display: flex; flex-direction: column; gap: 6px; }
.perm-scope-title { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--critical); }
.perm-scope label { font-weight: 600; }
.perm-scope .hint { margin-top: 0; }
.hint { font-size: .75rem; color: var(--text-muted); margin-top: 4px; }
input:disabled { background: var(--surface-2); color: var(--text-secondary); cursor: not-allowed; }
input[readonly] { background: var(--surface-2); color: var(--text-secondary); }

/* πίνακας καταχώρησης εισπράξεων (πηγή x μετρητά/κάρτα) */
table.rev-grid td { padding: 5px 8px; }
table.rev-grid thead th { font-weight: 700; color: var(--text-primary); }
table.rev-grid td:not(.l) input { padding: 7px 9px; }

/* segmented control (επιλογή περιόδου / καρτέλες) */
.seg { display: inline-flex; background: var(--surface-2); border-radius: var(--radius-sm); padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button {
  border: none; background: transparent; padding: 6px 12px;
  border-radius: 6px; font-size: .875rem; color: var(--text-secondary);
}
.seg button[aria-pressed="true"] {
  background: var(--surface-1); color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 600;
}

/* πλοήγηση μήνα με δύο βελάκια, αντί για λίστα/dropdown */
.month-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; }
.month-nav button { font-size: 1.1rem; line-height: 1; padding: 6px 14px; }
.month-nav .month-label { font-weight: 620; min-width: 110px; text-align: center; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; }
.tabs button {
  border: none; background: transparent; border-radius: 0;
  border-bottom: 2px solid transparent; padding: 9px 13px;
  color: var(--text-secondary);
}
.tabs button[aria-pressed="true"] { color: var(--text-primary); border-bottom-color: var(--accent); font-weight: 600; }

/* ------------------------------------------------------------ stat tiles */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; }
.tile {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 14px;
}
.tile .label { font-size: .75rem; color: var(--text-secondary); margin-bottom: 3px; }
.tile .value {
  font-size: 1.5rem; font-weight: 620; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.tile .foot { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }
/* Επισκόπηση: πίνακας «Πρόγραμμα κρατήσεων» (αριστερά) και
   Συνεργάτες (δεξιά) — μισή οθόνη το καθένα, μία στήλη σε κινητό. */
.overview-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
/* Αριστερά ο πίνακας «Πρόγραμμα κρατήσεων», δεξιά οι Συνεργάτες — ίδιο ύψος. */
#programTable tr.is-sub td { font-size: .8125rem; }
@media (max-width: 760px) { .overview-split { grid-template-columns: 1fr; } }
.tile.hero { grid-column: span 2; }
.tile.hero .value { font-size: 2.6rem; line-height: 1.1; }
@media (max-width: 560px) { .tile.hero { grid-column: span 1; } .tile.hero .value { font-size: 2rem; } }

/* Τζίρος/Έξοδα/Κέρδος σε 3 στήλες — γράμματα λίγο μικρότερα ώστε το «€» να
   μη ξεφεύγει σε δεύτερη γραμμή όταν το ποσό γίνεται 4ψήφιο. */
.tiles.money3 .tile .value { font-size: 1.25rem; white-space: nowrap; }

.pos { color: var(--good); }
.neg { color: var(--critical); }
.warn { color: var(--warning); }

/* κατάσταση με τελεία (π.χ. ενεργός/ανενεργός οδηγός) */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .75rem; font-weight: 650; padding: 3px 10px 3px 8px;
  border-radius: 999px; white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.badge.pos { background: color-mix(in srgb, var(--good) 12%, transparent); color: color-mix(in srgb, var(--good) 85%, black); }
.badge.pos .dot { background: var(--good); }
.badge.muted { background: var(--surface-2); color: var(--text-muted); }
.badge.muted .dot { background: var(--text-muted); }
/* Στόλος: μικρό κίτρινο «Ε» δίπλα στο όνομα = το όχημα είναι και ενοικιαζόμενο. */
.rental-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 5px; border-radius: 50%;
  background: var(--accent-gold); color: #3d2f00;
  font-size: .5625rem; font-weight: 700; line-height: 1; vertical-align: 1px;
}

.swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8125rem; color: var(--text-secondary); }
.legend span.item { display: inline-flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------------------ ρεκόρ */

.records { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.record {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120px 90px at 100% 0%, color-mix(in srgb, var(--accent-gold) 12%, transparent), transparent 70%),
    var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.record:hover { box-shadow: var(--shadow-hover); border-color: var(--border-str); }
.record .record-icon {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; margin-bottom: 9px;
  background: color-mix(in srgb, var(--accent-gold) 20%, transparent);
  color: color-mix(in srgb, var(--accent-gold) 55%, var(--text-primary));
}
.record .record-icon svg { width: 16px; height: 16px; }
.record .label { font-size: .75rem; color: var(--text-secondary); margin-bottom: 3px; }
.record .value {
  font-size: 1.375rem; font-weight: 700; letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
.record .date { font-size: .75rem; color: var(--text-muted); margin-top: 4px; }

/* --------------------------------------------------------------- πίνακες */

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { padding: 8px 10px; text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th.l, td.l { text-align: left; }
th.c, td.c { text-align: center; }
thead th {
  font-size: .75rem; font-weight: 600; color: var(--text-muted);
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--surface-1); cursor: default;
}
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--text-primary); }
tbody tr { border-bottom: 1px solid var(--border); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
/* «Γραφείο» βάρδιας ≠ τζίρος προγράμματος κρατήσεων για τον οδηγό εκείνη τη μέρα (μόνο admin) */
tbody tr.row-mismatch { background: color-mix(in srgb, var(--critical) 10%, transparent); }
tbody tr.row-mismatch:hover { background: color-mix(in srgb, var(--critical) 16%, transparent); }
tbody td { font-variant-numeric: tabular-nums; }
tfoot td { border-top: 1px solid var(--border-str); font-weight: 650; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- γραφήματα */

.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; }
.chart .tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--surface-1); border: 1px solid var(--border-str);
  border-radius: var(--radius-sm); padding: 8px 10px;
  font-size: .8125rem; box-shadow: var(--shadow);
  white-space: nowrap; opacity: 0; transition: opacity .1s;
}
.chart .tip.on { opacity: 1; }
.chart .tip .t-row { display: flex; align-items: center; gap: 7px; }
.chart .tip .t-row .v { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.chart .tip .t-head { font-weight: 650; margin-bottom: 5px; }

/* ---------------------------------------------------------------- λοιπά */

.empty { text-align: center; color: var(--text-muted); padding: 34px 16px; font-size: .9375rem; }
.notice {
  border-radius: var(--radius-sm); padding: 10px 13px; font-size: .875rem;
  border: 1px solid var(--border-str); background: var(--surface-2);
}
.notice.err  { border-color: var(--critical); color: var(--critical); background: color-mix(in srgb, var(--critical) 8%, transparent); }
.notice.good { border-color: var(--good); color: var(--good); background: color-mix(in srgb, var(--good) 10%, transparent); }
.hidden { display: none !important; }

.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(12px);
  background: var(--text-primary); color: var(--surface-1);
  padding: 10px 18px; border-radius: 999px; font-size: .875rem; font-weight: 550;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 60;
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--critical); color: #fff; }

/* Οθόνες σύνδεσης (οδηγός + διαχειριστής): αριστερά λευκό με το σήμα AveMiles και
   «Καλώς ήρθες», δεξιά πετρόλ πάνελ με κυματιστή άκρη και η φόρμα. Στο κινητό: στοίβα. */
#login.login-screen {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: minmax(320px, 40%) 1fr;
  background: #ffffff;
}
.login-side {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  padding: 32px 44px;
}
.login-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text-primary); text-decoration: none;
  font-size: 1.375rem; font-weight: 500; letter-spacing: -.01em;
}
.login-brand img { width: 38px; height: 38px; display: block; }
.login-brand b { font-weight: 750; color: var(--accent); }
.login-welcome { margin: auto 0; padding-bottom: 8vh; max-width: 340px; }
.login-welcome h2 {
  margin: 0; font-size: 1.75rem; font-weight: 750; letter-spacing: -.02em;
  color: var(--accent);
}
.login-welcome p { margin: 0; font-size: 1.1875rem; line-height: 1.45; color: var(--text-secondary); }

.login-main {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 24px 72px;
  color: #fff;
  background: var(--accent);
}
.login-main > .card.login { position: relative; width: 100%; }
.login-copy {
  position: absolute; left: 24px; right: 24px; bottom: 18px;
  margin: 0; text-align: center;
  font-size: .8125rem; color: rgba(255,255,255,.72);
}
.login-copy b { color: #fff; font-weight: 650; }

/* Η «κάρτα» πάνω στο πετρόλ: διάφανη, λευκά γράμματα, πεδία σε σχήμα χαπιού. */
.login {
  max-width: 360px; margin: 0 auto;
  text-align: center;
  background: transparent; border: 0; box-shadow: none;
  color: #fff;
  animation: loginIn .4s cubic-bezier(.2,.7,.3,1) both;
}
.login#setupNote { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 16px; }
.login .muted, .login label { color: rgba(255,255,255,.8); }
.login label { padding-left: 14px; }
.login a { color: #fff; }
.login .hint a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.login-badge {
  width: 64px; height: 64px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden;
  border: 3px solid rgba(255,255,255,.9);
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}
.login-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.login-badge-mark { background: #fff; }
.login-badge-mark img { width: 70%; height: 70%; object-fit: contain; }
.login h1 { font-size: 1.625rem; font-weight: 750; letter-spacing: .02em; color: #fff; margin-bottom: 18px; }
.login .field { text-align: left; }
.login input, .login select {
  border-radius: 999px; border-color: transparent;
  padding-left: 18px; padding-right: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.login input:focus, .login select:focus { border-color: var(--accent-gold); }
.login button.primary {
  border-radius: 999px;
  background: var(--accent-gold); border-color: var(--accent-gold); color: var(--accent-gold-ink);
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.login .notice.err { background: #fff; }

@media (max-width: 760px) {
  #login.login-screen { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login-side { padding: 18px 16px 22px; }
  .login-brand { font-size: 1.25rem; }
  .login-brand img { width: 32px; height: 32px; }
  .login-welcome { margin: 18px 0 0; padding: 0; }
  .login-welcome h2 { font-size: 1.375rem; margin-bottom: 4px; }
  .login-welcome p { font-size: 1rem; }
  .login-main { padding: 32px 16px 64px; border-radius: 26px 26px 0 0; justify-content: flex-start; }
  .login-copy { left: 16px; right: 16px; }
}
@keyframes loginIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.pinpad button { padding: 15px 0; font-size: 1.125rem; font-weight: 550; }

/* -------------------------------------------------------- ενοικιαζόμενα */

/* Στόλος (Εργαλεία → Στόλος) */
.badge.warn { background: color-mix(in srgb, var(--warning) 16%, transparent); color: color-mix(in srgb, var(--warning) 70%, black); }
.badge.warn .dot { background: var(--warning); }
.badge.neg { background: color-mix(in srgb, var(--critical) 12%, transparent); color: color-mix(in srgb, var(--critical) 85%, black); }
.badge.neg .dot { background: var(--critical); }
.fleet-row { cursor: pointer; }
#overviewFleetCard.has-alerts { border-color: color-mix(in srgb, var(--critical) 45%, var(--border)); }
/* Πολλές υποχρεώσεις στο ίδιο κελί (Επισκόπηση → Στόλος): τα badges τυλίγονται. */
.badge-list { display: flex; flex-wrap: wrap; gap: 4px 6px; }
#overviewFleetTable td { vertical-align: top; }
#overviewFleetCard thead th .badge { font-size: .8125rem; }
.fleet-row.is-inactive { opacity: .55; }
.fleet-info-row { cursor: pointer; }
.fleet-info-row:hover td { background: var(--surface-2); }
.fleet-row td.l strong { font-weight: 600; }
.fleet-km-shift button { margin-left: 4px; }
.fleet-row .plate { font-family: var(--mono); font-size: .8125rem; color: var(--text-secondary); }
/* Οδηγοί → στήλη «Όχημα»: αμάξι + πινακίδα σε μία σειρά. */
.driver-vehicle { white-space: nowrap; }
.driver-vehicle .plate { font-family: var(--mono); font-size: .8125rem; color: var(--text-secondary); }
.fleet-status { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fleet-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.fleet-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.cash-form .sec-due { background: color-mix(in srgb, var(--series-1) 5%, var(--surface-1)); border-color: color-mix(in srgb, var(--series-1) 28%, var(--border)); }
.cash-form .sec-due .form-title::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--series-1); }
.fleet-service-summary { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: .8125rem; color: var(--text-secondary); }
.fleet-service-summary strong { color: var(--text-primary); font-weight: 600; }
.fleet-log-card { padding: 14px 16px; }
.fleet-log-add { display: grid; grid-template-columns: 150px 130px 110px 110px 1fr auto; gap: 10px; align-items: end; }
.fleet-log-add label { font-size: .75rem; margin-bottom: 3px; }
.fleet-log-add .fleet-log-btn button { height: 36px; }
/* Ιστορικό εργασιών: αλλαγή σελίδας κάτω δεξιά. */
.fleet-log-pager { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 8px; font-size: .8125rem; }
.fleet-log-pager:empty { display: none; }
.fleet-log-actions { white-space: nowrap; }
.fleet-log-edit, .fleet-log-del { color: var(--text-muted); }
.fleet-log-edit:hover { color: var(--accent); }
.fleet-log-del:hover { color: var(--critical); }
.fleet-log-btn { display: flex; gap: 6px; align-items: end; }
#fleetTable td.when { font-variant-numeric: tabular-nums; }
/* Πίνακας στόλου: κλικ οπουδήποτε στη σειρά ανοίγει την καρτέλα του οχήματος. */
#fleetTable td { white-space: nowrap; }
.fleet-cell { background: none; border: 1px solid transparent; border-radius: 8px; padding: 4px 6px; margin: -4px -6px; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.fleet-cell:hover { border-color: var(--border); background: var(--surface-2, color-mix(in srgb, var(--text-primary) 4%, transparent)); }
.fleet-cell .when { font-variant-numeric: tabular-nums; }
/* Όνομα + κίτρινο «Ε» (ενοικιαζόμενο) στην ίδια γραμμή, όπως στον πίνακα «Οχήματα». */
.fleet-name { display: inline-flex; align-items: center; white-space: nowrap; }
.fleet-cell-empty { color: var(--accent); font-size: .8125rem; font-weight: 600; }
.fleet-quick-chips { gap: 6px; align-items: center; margin-top: 8px; font-size: .8125rem; }
.fleet-quick-sub { font-size: .875rem; font-weight: 600; margin: 16px 0 0; }
#fq_body .fields.two { margin-top: 10px; }
#fv_columns { margin-left: auto; align-self: center; }
.fleet-cols-list { display: grid; gap: 2px; margin-top: 12px; }
.fleet-cols-item { display: flex; align-items: center; gap: 10px; padding: 8px 4px; font-size: .9375rem; cursor: pointer; border-radius: 6px; }
.fleet-cols-item:hover { background: var(--surface-2); }
.fleet-cols-item input { width: 18px; height: 18px; margin: 0; }
/* «⚙ Στήλες»: η σειρά αλλάζει σέρνοντας τη γραμμή (admin.js#colsDrag) — λαβή ⠿ δεξιά */
.fleet-cols-item { user-select: none; touch-action: none; }
.fleet-cols-item .cols-label { flex: 1; }
.fleet-cols-item .cols-note { font-size: .75rem; margin-left: 6px; }
/* «⚙ Στήλες» Στόλου: κλικ στο όνομα = διόρθωση. */
.fleet-cols-item .cols-name.is-editable { cursor: text; border-bottom: 1px dashed transparent; }
.fleet-cols-item .cols-name.is-editable:hover { border-bottom-color: var(--text-muted); }
.fleet-cols-item .cols-rename { width: 100%; max-width: 240px; padding: 2px 6px; font: inherit; }
/* Φόρμα ταμείου (διαχειριστής): μικρό «⚙» πάνω δεξιά σε Εισπράξεις / Έξοδα (admin.js#openCashRows). */
.cash-form .sec-box { position: relative; }
.rows-gear { position: absolute; top: 8px; right: 8px; padding: 2px 8px; font-size: .9375rem; line-height: 1.2; color: var(--text-muted); }
.rows-gear:hover { color: var(--text-primary); }
/* Popup σειρών: ✕ σε κάθε σειρά, «+ Νέα σειρά» και οι σβησμένες βασικές για επαναφορά. */
.fleet-cols-item .cols-del { padding: 2px 8px; color: var(--text-muted); }
.fleet-cols-item .cols-del:hover { color: var(--critical); }
.cols-extra:empty { display: none; }
.cols-extra { display: grid; gap: 10px; margin-top: 10px; }
.cash-add { display: flex; gap: 8px; }
.cash-add input { flex: 1; min-width: 0; }
.cash-add button { flex: none; white-space: nowrap; }
.cash-removed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8125rem; }
.cash-removed:empty { display: none; }
.fleet-cols-item .cols-grip { color: var(--text-muted); font-size: 1.1rem; line-height: 1; padding: 0 4px; cursor: grab; }
.fleet-cols-item.is-dragging { background: var(--surface-2); box-shadow: var(--shadow); cursor: grabbing; position: relative; z-index: 1; }
@media (max-width: 760px) {
  .fleet-grid3, .fleet-grid4 { grid-template-columns: 1fr 1fr; }
  .fleet-log-add { grid-template-columns: 1fr 1fr; }
  .fleet-log-add .fleet-log-notes, .fleet-log-add .fleet-log-btn { grid-column: 1 / -1; }
}

/* Ενοικιαζόμενα → Πρόγραμμα: μηνιαίο ημερολόγιο κρατήσεων. Κάθε κράτηση είναι
   μια χρωματιστή λωρίδα (--chip = χρώμα αμαξιού) που συνεχίζεται από μέρα σε
   μέρα· στρογγυλεύει μόνο στην πρώτη (.is-start) και στην τελευταία (.is-end). */
.rb-toolbar { margin-bottom: 12px; }
.rb-cal {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
  background: var(--border); gap: 1px;
}
.rb-dow {
  background: var(--surface-2); color: var(--text-muted); font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; padding: 6px 8px; text-align: center;
}
.rb-day {
  /* Ύψος για 5 κρατήσεις μαζί (5 × 22px + αριθμός ημέρας), χωρίς να μεγαλώνει το κελί. */
  background: var(--surface-1); min-height: 148px; padding: 4px 0 6px; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.rb-day:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface-1)); }
.rb-day.is-other { background: var(--surface-0); }
.rb-day.is-other .rb-daynum { color: var(--text-muted); opacity: .6; }
.rb-day.is-weekend .rb-daynum { color: var(--text-secondary); }
.rb-daynum { font-size: .8125rem; font-weight: 600; padding: 0 8px; font-variant-numeric: tabular-nums; }
.rb-day.is-today .rb-daynum::after {
  content: 'σήμερα'; margin-left: 6px; font-size: .625rem; font-weight: 700; text-transform: uppercase;
  color: var(--accent); letter-spacing: .04em;
}
.rb-chips { display: flex; flex-direction: column; gap: 2px; }
.rb-chip {
  height: 20px; line-height: 20px; font-size: .75rem; font-weight: 600; color: #fff;
  background: var(--chip); padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; margin: 0 -1px;             /* καλύπτει το 1px κενό ανάμεσα στις μέρες */
}
.rb-chip:hover { filter: brightness(1.08); }
.rb-chip.rb-spacer { background: transparent; cursor: default; pointer-events: none; }
.rb-chip.is-start { margin-left: 4px; border-radius: 5px 0 0 5px; }
.rb-chip.is-end   { margin-right: 4px; border-radius: 0 5px 5px 0; }
.rb-chip.is-start.is-end { border-radius: 5px; }
.rb-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--chip); margin-right: 7px; vertical-align: 0;
}
.rb-warn {
  padding: 9px 11px; border-radius: var(--radius-sm); font-size: .8125rem;
  background: color-mix(in srgb, var(--warning) 14%, transparent); color: color-mix(in srgb, var(--warning) 70%, black);
}
@media (max-width: 760px) {
  .rb-day { min-height: 110px; }
  .rb-chip { font-size: .6875rem; padding: 0 4px; }
  .rb-day.is-today .rb-daynum::after { content: ''; margin: 0; }
  .rb-day.is-today .rb-daynum { color: var(--accent); }
}

.rental-car-row { cursor: pointer; }
.rental-car-row.is-inactive { opacity: .55; }
.rental-car-row.is-selected { background: color-mix(in srgb, var(--accent-gold) 16%, transparent); }
.rental-car-row.is-selected:hover { background: color-mix(in srgb, var(--accent-gold) 22%, transparent); }

#rb_monthTable tr.is-other-month td { color: var(--text-muted); }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(30, 43, 43, .45);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.modal-card {
  position: relative; width: min(100%, 520px);
  max-height: calc(100vh - 40px); overflow-y: auto;
  animation: loginIn .25s cubic-bezier(.2,.7,.3,1) both;
}
.modal-close { position: absolute; top: 10px; right: 10px; }

.rental-profit-preview {
  padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); font-weight: 650; font-variant-numeric: tabular-nums;
}
.rental-profit-preview.pos { background: color-mix(in srgb, var(--good) 12%, transparent); color: color-mix(in srgb, var(--good) 85%, black); }
.rental-profit-preview.neg { background: color-mix(in srgb, var(--critical) 10%, transparent); color: var(--critical); }

/* Link συνεργάτη: στον πίνακα της ενότητας Συνεργάτες και στο popup (πεδίο
   μόνο ανάγνωσης + «Αντιγραφή»). */
.link-text { font-family: var(--mono); font-size: .8125rem; }
/* Συνεργάτες: ματάκι δίπλα στο «Αντιγραφή» — ανοίγει το link σε νέα καρτέλα. */
.link-open { margin-left: 2px; padding-left: 7px; padding-right: 7px; vertical-align: middle; }
.link-open svg { display: block; }
.link-box { display: flex; gap: 8px; align-items: center; }
.link-box input { flex: 1; min-width: 0; font-family: var(--mono); font-size: .8125rem; }
.link-box button { flex: none; }

.stack > * + * { margin-top: 14px; }
.mt { margin-top: 14px; }
.muted { color: var(--text-muted); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }

/* ---------------------------------------------- φόρμα ταμείου (οδηγός) */
/* Η «Καταχώρηση ταμείου» του οδηγού: μία κάρτα με λεπτές διαχωριστικές
   γραμμές ανάμεσα στις ενότητες (αντί για τέσσερις ξεχωριστές κάρτες),
   μικροί διακριτικοί τίτλοι, πιο μαζεμένα πεδία και πίνακες, και τα
   υπόλοιπα ταμείου ως μία γραμμή σύνοψης στο τέλος. Όλα scoped στο
   .cash-form — το popup διόρθωσης της Διαχείρισης δεν επηρεάζεται. */
.cash-form .card { padding: 4px 18px; }
.cash-form .sec { padding: 16px 0; }
.cash-form .sec + .sec { border-top: 1px solid var(--border); }
/* Εισπράξεις και Έξοδα: το καθένα σε δικό του πλαίσιο με πολύ απαλή απόχρωση
   (πράσινο = έσοδα, πορτοκαλί = έξοδα, ίδια χρώματα με τα γραφήματα). */
.cash-form .sec-box {
  margin: 12px 0; padding: 12px 14px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.cash-form .sec + .sec-box, .cash-form .sec-box + .sec { border-top: none; }
.cash-form .sec-box .form-title { color: var(--text-primary); }
.cash-form .sec-info { background: var(--surface-2); border-color: var(--border-str); }
.cash-form .sec-rev { background: color-mix(in srgb, var(--series-3) 5%, var(--surface-1)); border-color: color-mix(in srgb, var(--series-3) 28%, var(--border)); }
.cash-form .sec-exp { background: color-mix(in srgb, var(--series-2) 5%, var(--surface-1)); border-color: color-mix(in srgb, var(--series-2) 28%, var(--border)); }
.cash-form .sec-rev .form-title::before, .cash-form .sec-exp .form-title::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px;
}
.cash-form .sec-rev .form-title::before { background: var(--series-3); }
.cash-form .sec-exp .form-title::before { background: var(--series-2); }
.cash-form .form-title {
  display: block;
  font-size: .8125rem; font-weight: 600; letter-spacing: .01em;
  color: var(--text-muted); margin: 0 0 10px;
}

.cash-form label { font-size: .75rem; margin-bottom: 3px; }
.cash-form input, .cash-form select, .cash-form textarea {
  padding: 7px 9px; border-color: var(--border); border-radius: 6px;
  font-size: .9375rem;
}
.cash-form input:focus, .cash-form textarea:focus { border-color: var(--accent); }
.cash-form .hint { margin: 8px 0 0; }

/* Ημερομηνία / Έναρξη / Λήξη σε μία γραμμή· χιλιόμετρα σε τρεις ίσες στήλες. */
.cash-form .when { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 10px; }
.cash-form .odo  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.cash-form .time-pick { gap: 3px; }
.cash-form .time-pick input { padding-left: 4px; padding-right: 4px; }
@media (max-width: 520px) {
  .cash-form .when { grid-template-columns: 1fr 1fr; }
  .cash-form .when > :first-child { grid-column: 1 / -1; }
}

/* Πίνακες εισπράξεων / εξόδων: ελαφριές επικεφαλίδες, στενότερα κελιά. */
.cash-form table { font-size: .875rem; }
.cash-form table.rev-grid thead th {
  font-size: .6875rem; font-weight: 600; color: var(--text-muted);
  letter-spacing: .02em; padding: 0 6px 6px; position: static;
  border-bottom: none;
}
.cash-form table.rev-grid td { padding: 3px 4px; }
.cash-form table.rev-grid td.l { padding-left: 0; color: var(--text-secondary); }
.cash-form table.rev-grid td:last-child { padding-right: 0; color: var(--text-secondary); font-size: .8125rem; min-width: 72px; }
.cash-form table.rev-grid td:not(.l) input { padding: 6px 8px; min-width: 68px; }
.cash-form table.rev-grid tbody tr { border-bottom: none; }
.cash-form table.rev-grid tbody tr:hover { background: transparent; }
.cash-form table.rev-grid tfoot td { border-top: 1px solid var(--border); padding-top: 8px; font-weight: 600; color: var(--text-primary); font-size: .875rem; }
.cash-form table.rev-grid tfoot td.l { color: var(--text-primary); }
.cash-form .note-in { margin-top: 10px; }
.cash-form textarea { min-height: 56px; }

/* Υπόλοιπο ταμείου: Προηγούμενο → Νέο, ως μορφοποιημένο ποσό (η τιμή μένει
   σε κρυφά πεδία, από εκεί διαβάζει/γράφει το driver.js). Αριστερή στοίχιση —
   ίδια στη φόρμα του οδηγού και του διαχειριστή. */
.cash-form .balances {
  display: flex; align-items: center; justify-content: flex-start; gap: 18px;
  flex-wrap: wrap;
  margin: 16px 0 14px;
}
.cash-form .sec + .sec.balances { border-top: none; margin-top: 2px; }
/* Κάθε υπόλοιπο σε δικό του πλαίσιο: το προηγούμενο γκρι, το νέο λευκό με πετρόλ περίγραμμα. */
.cash-form .bal {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 170px;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border-str);
}
.cash-form .bal.strong { background: var(--surface-1); border-color: var(--accent); }
.cash-form .bal.strong .bal-label { color: var(--accent); font-weight: 600; }
.cash-form .bal-label { font-size: .75rem; color: var(--text-muted); }
.cash-form .bal-val {
  display: inline-flex; align-items: baseline; gap: 3px;
  font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--text-secondary);
}
.cash-form .bal.strong .bal-val { color: var(--text-primary); font-weight: 700; }
/* Στη Διαχείριση τα υπόλοιπα είναι επεξεργάσιμα: το πεδίο μοιάζει με το ποσό (χωρίς κουτί). */
.cash-form .bal-val input {
  width: 7.5ch; min-width: 5ch; max-width: 12ch; padding: 0 2px; border: none; border-radius: 4px;
  background: transparent; font: inherit; color: inherit; text-align: left;
}
/* Όπου υποστηρίζεται, το πεδίο έχει το πλάτος του αριθμού, ώστε το «€» να κάθεται δίπλα του. */
@supports (field-sizing: content) {
  .cash-form .bal-val input { field-sizing: content; width: auto; min-width: 2ch; }
}
.cash-form .bal-val input:focus { outline: none; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cash-form .bal-label { cursor: default; margin: 0; }
.cash-form .bal-arrow { color: var(--text-muted); font-size: 1.125rem; }
/* Στήλες με σταθερό πλάτος, ώστε τα πεδία να μην απλώνονται σε όλο το πλάτος. */
.cash-form table.rev-grid th:nth-child(2), .cash-form table.rev-grid th:nth-child(3) { width: 23%; }
.cash-form table.rev-grid th:last-child { width: 17%; }
/* Κινητό: οι ετικέτες του πίνακα σπάνε σε δύο γραμμές αντί να βγει οριζόντιο
   scroll, και τα δύο υπόλοιπα χωράνε δίπλα δίπλα. */
@media (max-width: 520px) {
  .cash-form table.rev-grid td.l { white-space: normal; line-height: 1.2; }
  .cash-form table.rev-grid td:not(.l) input { min-width: 58px; }
  .cash-form table.rev-grid td:last-child { min-width: 62px; }
  /* Τα δύο υπόλοιπα μένουν δίπλα δίπλα και σε κινητό: μικρότερα πλαίσια και γράμματα. */
  .cash-form .balances { flex-wrap: nowrap; align-items: stretch; gap: 6px; }
  .cash-form .bal { flex: 1 1 0; min-width: 0; padding: 8px 6px; justify-content: center; }
  .cash-form .bal-arrow { align-self: center; }
  .cash-form .bal-label { font-size: .6875rem; text-align: left; line-height: 1.2; }
  .cash-form .bal-val { font-size: 1.0625rem; }
  .cash-form .bal-arrow { font-size: 1rem; flex: none; }
}

/* Παραλαβή ταμείου (μόνο στη φόρμα του διαχειριστή): κουμπί κάτω από τα υπόλοιπα,
   που ανοίγει μικρό πάνελ — Παίρνω/Δίνω, ποσό και το υπόλοιπο πριν → μετά. */
.cash-form .sec.pickup { border-top: none; margin-top: -4px; padding-top: 0; }
.pickup-panel { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border-str); border-radius: var(--radius-sm); background: var(--surface-2); display: grid; gap: 10px; max-width: 420px; }
.pickup-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pickup-title { font-weight: 600; font-size: .875rem; color: var(--text-primary); }
.pickup-amount { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--text-secondary); }
.pickup-amount label { margin: 0; font-size: inherit; font-weight: 400; color: inherit; }
.pickup-amount input { width: 120px; }
.pickup-close { padding: 0 6px; font-size: .8125rem; line-height: 1.4; color: var(--text-muted); }
.pickup-close:hover { color: var(--text-primary); }
/* Ταμεία → στήλη «Νέο υπόλοιπο»: μικρή σημείωση όταν έγινε παραλαβή. */
.pickup-note { font-size: .75rem; color: var(--text-muted); white-space: nowrap; }

/* Καρτέλα οχήματος (admin.js#openFleetModal): από τα «Οχήματα» μόνο τα
   στοιχεία του αυτοκινήτου + σημειώσεις· από το «Σέρβις & υποχρεώσεις» δύο
   subtabs — λήξεις & σέρβις (service) και ιστορικό εργασιών (log). */
.fleet-modal-seg { margin-top: 10px; }
.fleet-mode-info .fsec-svc,
.fleet-mode-info .fleet-log-sec,
.fleet-mode-info .fleet-modal-seg { display: none; }
.fleet-mode-service .fsec-info,
.fleet-mode-service .fleet-log-sec,
.fleet-mode-service #fm_delete { display: none; }
.fleet-mode-log .cash-form,
.fleet-mode-log .fleet-modal-actions { display: none; }
.fleet-mode-log .fleet-log-card { margin-top: 12px; }
/* Υποχρεώσεις και Σέρβις στην καρτέλα: απαλό γκρι φόντο και στα δύο. */
#fleetModalBackdrop .cash-form .sec-due,
#fleetModalBackdrop .cash-form .sec-exp { background: var(--surface-2); border-color: var(--border-str); }
#fleetModalBackdrop .cash-form .sec-due .form-title::before,
#fleetModalBackdrop .cash-form .sec-exp .form-title::before { background: var(--text-primary); }
/* Ημερομηνία που έληξε = κόκκινο πεδίο, λήγει σύντομα = κίτρινο. */
#fleetModalBackdrop input.due-neg { border-color: var(--critical); background: color-mix(in srgb, var(--critical) 12%, var(--surface-1)); }
#fleetModalBackdrop input.due-warn { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 16%, var(--surface-1)); }
/* Σέρβις που πέρασε / πλησιάζει: κόκκινο / πορτοκαλί το «Επόμενο: …» και πλαίσιο σε όλο το κουτί. */
#fleetModalBackdrop .cash-form .sec-exp.due-neg { border: 2px solid var(--critical); }
#fleetModalBackdrop .cash-form .sec-exp.due-warn { border: 2px solid var(--warning); }
.fleet-service-summary.due-neg .svc-next, .fleet-service-summary.due-neg .svc-next strong { color: var(--critical); }
.fleet-service-summary.due-warn .svc-next, .fleet-service-summary.due-warn .svc-next strong { color: color-mix(in srgb, var(--warning) 80%, black); }
/* Το μικρό popup (π.χ. «Καταχώρηση εργασίας / σέρβις») ανοίγει και πάνω από την καρτέλα οχήματος. */
#fleetQuickBackdrop { z-index: 60; }

/* Επισκόπηση: κουτιά που διαλέγει ο χρήστης (admin.js#renderOverviewSlots). */
.overview-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.overview-slots > .card { margin: 0; min-width: 0; }
@media (max-width: 760px) { .overview-slots { grid-template-columns: 1fr; } }
.overview-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 160px; border: 2px dashed var(--border-str, var(--border)); border-radius: 12px;
  background: transparent; color: var(--text-muted); font: inherit; font-size: .875rem; cursor: pointer;
}
.overview-add:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, transparent); transform: none; }
.overview-add-plus { font-size: 2rem; line-height: 1; font-weight: 300; }
#overviewSlots .card header h2 { margin-right: auto; }   /* υπότιτλος και ✕ πάντα δεξιά */
.overview-tools { display: inline-flex; gap: 2px; margin-left: 8px; }
.overview-tools button { padding: 2px 8px; color: var(--text-muted); }
.overview-slots > .card.is-wide { grid-column: 1 / -1; }
.overview-handle { cursor: grab; touch-action: none; user-select: none; }   /* τράβηγμα και με δάχτυλο */
.overview-slots > .dragging { position: relative; z-index: 20; opacity: .9; cursor: grabbing; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.overview-slots > .drop-over { outline: 2px dashed var(--accent); outline-offset: 2px; }
/* Κενό δίπλα σε μισό κουτί (admin.js#overviewGap): αόρατο, φαίνεται μόνο όσο τραβάς ένα κουτί. */
.overview-gap {
  align-self: stretch; min-height: 80px; display: flex; align-items: center; justify-content: center;
  border: 2px dashed transparent; border-radius: 12px; color: transparent; font-size: .875rem;
}
.overview-slots.is-dragging .overview-gap { border-color: var(--border-str, var(--border)); color: var(--text-muted); }
.overview-slots.is-dragging .overview-gap.drop-over { border-color: var(--accent); color: var(--accent); outline: none; }
@media (max-width: 760px) { .overview-gap { display: none; } }
/* Λίστα επιλογών στο popup «Τι να δείχνει εδώ;» */
.widget-picker { display: grid; gap: 8px; }
.widget-option { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 14px; text-align: left; font: inherit; font-weight: 500; }
.widget-option:disabled { opacity: .55; cursor: not-allowed; }
.widget-pro { padding: 2px 6px; border-radius: 4px; background: var(--accent-gold); color: var(--accent-gold-ink); font-size: .625rem; font-weight: 800; letter-spacing: .06em; }

/* ================================================================ κινητό */
/* Όλη η διαχείριση φιλική σε κινητό (≤ 760px). Σε υπολογιστή μόνο τα παρακάτω
   «κρυφά» στοιχεία — το ☰ και τα ↑ ↓ των κουτιών της Επισκόπησης. */
.nav-burger { display: none; }
.overview-tools .overview-up, .overview-tools .overview-down { display: none; }
.period-row input[type="date"] { width: auto; }

@media (max-width: 760px) {
  /* Μενού: συμπαγής μπάρα (λογότυπο + ☰)· το μενού ανοίγει από κάτω σε λίστα. */
  .sidebar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 8px 12px; }
  body.nav-collapsed .sidebar:not(.hidden) { display: flex !important; }   /* η απόκρυψη του υπολογιστή δεν ισχύει εδώ */
  .sidebar-brand { flex: none; padding: 2px 4px; border-bottom: none; }
  .nav-burger {
    display: flex; align-items: center; justify-content: center; margin-left: auto;
    width: 42px; height: 42px; padding: 0; border: 1px solid var(--sidebar-line); border-radius: 10px;
    background: transparent; color: var(--sidebar-ink);
  }
  .nav-burger .nav-icon { width: 22px; height: 22px; }
  .nav-burger:hover, body.nav-open .nav-burger { background: var(--sidebar-hover); }
  .sidebar-section, .sidebar-nav { display: none; }
  body.nav-open .sidebar-section { display: block; padding: 10px 8px 4px; }
  body.nav-open .sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
  body.nav-open .sidebar-brand { padding-bottom: 8px; border-bottom: 1px solid var(--sidebar-line); }
  body.nav-open .sidebar { padding-bottom: 12px; max-height: 100dvh; overflow-y: auto; }
  .sidebar-nav > button, .sidebar-nav > a { width: 100%; padding: 12px 12px; font-size: 1rem; gap: 12px; }
  .sidebar-nav .nav-icon { width: 20px; height: 20px; }

  /* Πάνω μπάρα: χαιρετισμός σε μία γραμμή, κουμπιά μόνο με εικονίδιο. */
  .apphead { gap: 4px; }
  .apphead-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .apphead-btn > span { display: none; }
  .apphead-btn { padding: 9px; }
  .apphead-btn .nav-icon { width: 20px; height: 20px; }

  main.with-sidebar { padding: 10px; }
  .desktop-only { display: none !important; }
  /* Πάνω μπάρα οδηγού: το όνομα κόβεται με «…» αντί να σπρώχνει την Αποσύνδεση έξω από την οθόνη. */
  .topbar { gap: 8px; }
  .topbar .who { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .topbar #logout { flex: none; padding: 6px 8px; }
  table.m-cards tfoot tr { border-top: 2px solid var(--border-str, var(--border)); }
  table.m-cards tfoot td { border: none; }
  .card { padding: 14px; }
  .card > header { flex-wrap: wrap; row-gap: 6px; }

  /* Διάστημα: επιλογές σε όλο το πλάτος, από – έως δίπλα-δίπλα, Εφαρμογή από κάτω. */
  .period-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
  .period-row .seg { grid-column: 1 / -1; display: flex; }
  .period-row .seg button { flex: 1; padding: 7px 4px; font-size: .8125rem; white-space: nowrap; }
  .period-row .spacer { display: none; }
  .period-row input[type="date"] { width: 100%; min-width: 0; padding: 8px 6px; font-size: 15px; }
  .period-row #applyRange { grid-column: 1 / -1; padding: 9px; }

  /* Πεδία 16px: κάτω από αυτό το iPhone κάνει zoom μόλις πατήσεις το πεδίο. */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }

  /* Μικροί πίνακες (Πρόγραμμα, Συνεργάτες, μηνιαία κ.λπ.): πιο σφιχτοί για να χωράνε. */
  th, td { padding: 8px 6px; }
  table { font-size: .8125rem; }

  /* Μεγάλοι πίνακες (admin.js#labelMobileTable → table.m-cards): μία κάρτα ανά
     γραμμή — πρώτο κελί ο τίτλος, μετά «ετικέτα … τιμή» ανά στήλη. */
  table.m-cards thead { display: none; }
  table.m-cards, table.m-cards tbody, table.m-cards tfoot { display: block; }
  table.m-cards tr { display: block; padding: 10px 2px; }
  table.m-cards tbody tr:hover { background: transparent; }
  /* Ετικέτα αριστερά (::before), η τιμή δεξιά — αν η τιμή έχει πολλά κομμάτια
     (π.χ. όχημα + πινακίδα) μπαίνουν το ένα κάτω από το άλλο. */
  table.m-cards td {
    display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); column-gap: 12px;
    justify-items: end; align-items: center;
    padding: 3px 0; white-space: normal; text-align: right; min-height: 28px;
  }
  table.m-cards td > * { grid-column: 2; }
  table.m-cards td::before {
    content: attr(data-label); grid-column: 1; grid-row: 1 / span 6; align-self: center; justify-self: start;
    color: var(--text-muted); font-size: .75rem; text-align: left;
  }
  table.m-cards td:first-child { display: block; text-align: left; font-size: .9375rem; padding-bottom: 6px; }
  table.m-cards td:first-child::before, table.m-cards td:not([data-label])::before { content: none; }
  /* Κελί χωρίς ετικέτα (κουμπιά ενεργειών: ✎ ✕, Επεξεργασία): σε μία γραμμή, δεξιά. */
  table.m-cards td:not([data-label]):not(:first-child) { display: flex; justify-content: flex-end; gap: 6px; }
  table.m-cards td[colspan] { display: block; text-align: left; }
  table.m-cards td:empty { display: none; }
  table.m-cards .badge { white-space: normal; text-align: left; }
  /* Λίστα σημάτων (λήξεις κ.λπ.): κάτω από την ετικέτα, σε όλο το πλάτος. */
  table.m-cards td:has(.badge-list) { grid-template-columns: minmax(0, 1fr); justify-items: start; row-gap: 4px; }
  table.m-cards td:has(.badge-list) > * { grid-column: 1; }
  table.m-cards td:has(.badge-list)::before { grid-row: auto; }
  table.m-cards code, table.m-cards .mono { word-break: break-all; white-space: normal; }
  /* Link κράτησης συνεργάτη: κάτω από την ετικέτα, σε όλο το πλάτος, με την Αντιγραφή από κάτω. */
  table.m-cards td:has(.link-text) { grid-template-columns: minmax(0, 1fr); justify-items: start; row-gap: 4px; text-align: left; }
  table.m-cards td:has(.link-text) > * { grid-column: 1; margin-left: 0 !important; }
  table.m-cards td:has(.link-text)::before { grid-row: auto; }

  /* Επισκόπηση: ↑ ↓ αντί για ⇔ και τράβηγμα (το δάχτυλο στον τίτλο κάνει scroll). */
  .overview-tools .overview-up, .overview-tools .overview-down { display: inline-block; }
  .overview-tools .overview-wide { display: none; }
  .overview-tools button { padding: 6px 10px; font-size: .9375rem; }
  .overview-handle { touch-action: auto; cursor: default; }

  /* Κανόνες φόρμας κράτησης: τα πεδία κάτω από το όνομα κάθε ρύθμισης, κουμπί σε όλο το πλάτος. */
  .rules-item { flex-direction: column; align-items: stretch; gap: 8px; }
  .rules-ctrl { grid-template-columns: 1fr 34px 1fr; }
  .rules-foot { flex-wrap: wrap; }
  .rules-foot button { width: 100%; padding: 9px; }

  /* Popup: λιγότερο περιθώριο, ύψος με βάση την πραγματική οθόνη (μπάρες browser). */
  .modal-backdrop { padding: 10px; }
  .modal-card { max-height: calc(100dvh - 20px); padding: 16px; }
  /* Πεδία σε πλέγμα (στοιχεία οχήματος, λήξεις κ.λπ.): να στενεύουν αντί να ξεχειλίζουν. */
  .fields > *, .fleet-grid3 > *, .fleet-grid4 > * { min-width: 0; }
  .modal-card input, .modal-card select, .modal-card textarea { min-width: 0; max-width: 100%; }
  .modal-card input[type="date"] { padding-left: 8px; padding-right: 6px; }
}