/* ------------------------------------------------------------------
   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;  /* πετρόλ — ταυτίζεται με το tsiakardonis-reservations */
  --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 {
  background: #f4f5f7;
  --surface-1: #ffffff;   /* κάρτες, πίνακες, μπάρα: καθαρό λευκό αντί για ζεστό */
  --surface-2: #f1f3f5;   /* ήπια γεμίσματα, zebra, hover σειρών */
  --border: #e4e7eb;
  --border-str: #d2d7dd;
  --grid: #e9ecef;
}

/* Σκόπιμα ΧΩΡΙΣ @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);
}
.sidebar-brand .label { min-width: 0; font-size: 1rem; line-height: 1.2; letter-spacing: -.01em; }
.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); }
/* «Ταμεία» κλειδωμένα (κωδικός Ταμείου, admin.js#renderTameioNav): διαγραμμένα γράμματα + λουκέτο. */
.sidebar-nav > button.is-tameio-locked > span { text-decoration: line-through; text-decoration-thickness: 1.5px; }
/* Συνεργάτες → Κανόνες φόρμας κράτησης και Alert: μία μικρή, διακριτική γραμμή αντί για πλήρη κάρτα. */
.card.rules-compact { padding: 10px 14px; box-shadow: none; }
.rules-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .8125rem; color: var(--text-secondary); }
.rules-row label { margin: 0; font-size: inherit; font-weight: 400; color: inherit; }
.rules-row input { width: auto; padding: 4px 8px; font-size: .8125rem; }
.rules-row #br_lead { width: 52px; }
.rules-title { font-weight: 600; color: var(--text-primary); margin-right: 6px; }
.rules-row > button, .rules-actions { margin-left: auto; }
.rules-actions { display: flex; gap: 6px; }
.rules-hint { margin-top: 4px; font-size: .75rem; color: var(--text-muted); }
.rules-head { font-weight: 600; font-size: .8125rem; color: var(--text-primary); margin-bottom: 8px; }
.rules-fields { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; align-items: center; font-size: .8125rem; color: var(--text-secondary); }
.rules-fields label { margin: 0; font-size: inherit; font-weight: 400; color: inherit; }
.rules-fields .rules-label { color: var(--text-muted); }
.rules-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.rules-fields input { width: auto; padding: 4px 8px; font-size: .8125rem; }
.rules-fields #br_lead { width: 52px; }
.rules-foot { display: flex; align-items: flex-end; gap: 12px; margin-top: 8px; }
.rules-foot .rules-hint { margin-top: 0; flex: 1; }
.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; }
/* Κρυμμένο μενού (κουμπί πάνω αριστερά): το περιεχόμενο πιάνει όλο το πλάτος. */
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; }
.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); }

.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; }

#login.login-screen {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(560px 320px at 50% 0%, color-mix(in srgb, var(--accent-gold) 16%, transparent), transparent 70%),
    radial-gradient(420px 260px at 85% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
}
.login {
  max-width: 380px; margin: 0 auto;
  text-align: center;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(30,43,43,.05), 0 12px 32px rgba(30,43,43,.09);
  animation: loginIn .4s cubic-bezier(.2,.7,.3,1) both;
}
.login-badge {
  width: 64px; height: 64px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 6px 18px rgba(30,43,43,.3);
}
.login-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.login h1 { font-size: 1.375rem; }
.login .field { text-align: left; }
.login .hint a { font-weight: 600; }
@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; }
/* Στόλος → στήλη «Χλμ»: σημάδι όταν τα χλμ έρχονται από ταμείο οδηγού (admin.js#kmFromShift). */
.fleet-km-src { display: block; font-size: .6875rem; color: var(--text-muted); font-weight: 400; }
.fleet-km-shift button { margin-left: 4px; }
.fleet-row .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-more td { padding: 4px 0 2px; }
.fleet-log-more button { color: var(--accent); font-weight: 600; padding-left: 0; }
.fleet-log-more:hover { background: transparent; }
.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; }
/* Πίνακας στόλου: κάθε κελί είναι κουμπί που ανοίγει μικρό popup μόνο για αυτό. */
#fleetTable .fleet-row { cursor: default; }
#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 strong { display: block; }
.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; }
@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); }

/* Ενοικιαζόμενα → Στατιστικά: το κελί «Έξοδα» ανοίγει popup με τη λίστα εξόδων του μήνα. */
#rentalsMonthTable td.rx-cell { cursor: pointer; }
#rentalsMonthTable td.rx-cell span {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  border-bottom: 1px dashed var(--border-str);
}
#rentalsMonthTable td.rx-cell:hover span { background: color-mix(in srgb, var(--accent) 10%, transparent); border-bottom-color: transparent; }
#rentalsMonthTable td.rx-cell .rx-plus { color: var(--text-muted); font-size: .75rem; margin-left: 4px; }
#rentalsMonthTable tr.is-muted td { color: var(--text-muted); }
#rb_monthTable tr.is-other-month td { color: var(--text-muted); }
/* Φόρμα νέου εξόδου σε δύο γραμμές: ημερομηνία + «τι ήταν», μετά αμάξι + ποσό + κουμπί. */
.rx-add { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: end; }
.rx-add .rx-add-note { grid-column: 2 / -1; }
.rx-add label { display: block; font-size: .75rem; color: var(--text-muted); margin-bottom: 4px; }
.rx-add input, .rx-add select { width: 100%; min-width: 0; }
.rx-add .rx-add-btn button { width: 100%; }
.rx-del { border: none; background: transparent; color: var(--text-muted); cursor: pointer; padding: 2px 6px; font-size: .9rem; }
.rx-del:hover { color: var(--critical); }
@media (max-width: 760px) {
  .rx-add { grid-template-columns: 1fr 1fr; }
  .rx-add .rx-add-note, .rx-add .rx-add-btn { grid-column: 1 / -1; }
  .rx-add .rx-add-note { grid-column: 1 / -1; }
}

.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-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: center; 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: center; 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: right;
}
.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: center; line-height: 1.2; }
  .cash-form .bal-val { font-size: 1.0625rem; }
  .cash-form .bal-arrow { font-size: 1rem; flex: none; }
}

/* Καρτέλα οχήματος σε δύο μορφές (admin.js#openFleetModal):
   από τα «Οχήματα» μόνο τα στοιχεία του αυτοκινήτου + σημειώσεις,
   από το «Σέρβις & υποχρεώσεις» μόνο λήξεις, σέρβις και ιστορικό εργασιών. */
.fleet-mode-info .fsec-svc,
.fleet-mode-info .fleet-log-sec,
.fleet-mode-info #fleetModalStatus { display: none; }
.fleet-mode-service .fsec-info,
.fleet-mode-service #fm_delete { display: none; }
/* Το μικρό 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-fields { grid-template-columns: 1fr; gap: 4px; }
  .rules-fields .rules-label:not(:first-child) { margin-top: 6px; }
  .rules-fields #br_lead { width: 70px; }
  .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; }
}