/* ───────────────────────────────────────────────────────────────────────────
   Σύστημα εμφάνισης.

   Οι παλέτες ορίζονται σε [data-preset] και όχι σε :root, ώστε να ισχύουν σε
   ΟΠΟΙΟΔΗΠΟΤΕ στοιχείο. Αυτό επιτρέπει στη σελίδα ρυθμίσεων να δείχνει το κάθε
   στυλ ζωντανά, με τα πραγματικά του χρώματα, μέσα σε μικρές κάρτες -- αντί για
   ονόματα που δεν λένε τίποτα μέχρι να τα δοκιμάσεις και να φύγεις από τη
   σελίδα.

   Τα tokens χαρτογραφούνται πάνω στις μεταβλητές του Bootstrap 5.3, που είναι
   ανά component (--bs-btn-bg, --bs-card-bg...). Το σκέτο --bs-primary ΔΕΝ αρκεί:
   τα κουμπιά διαβάζουν δικές τους μεταβλητές, όχι αυτήν.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --font-scale: 1;
  --ui-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 6px;
}

/* Το Bootstrap μετρά σε rem, οπότε ένας πολλαπλασιαστής εδώ μεγαλώνει γράμματα,
   αποστάσεις ΚΑΙ επιφάνειες αφής μαζί -- αντί να φουσκώσει μόνο το κείμενο και
   να στριμώξει τα κουμπιά, που είναι ο συνηθισμένος τρόπος να χαλάσει μια
   ρύθμιση «μεγάλα γράμματα». */
html {
  font-size: calc(16px * var(--font-scale));
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--ui-font);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
}

[data-font="system"] { --ui-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[data-font="serif"]  { --ui-font: Georgia, "Times New Roman", serif; }
[data-font="narrow"] { --ui-font: "Arial Narrow", "Liberation Sans Narrow", Tahoma, sans-serif; }
[data-font="mono"]   { --ui-font: ui-monospace, Consolas, "DejaVu Sans Mono", monospace; }

/* ── Παλέτες ───────────────────────────────────────────────────────────────
   Καθεμιά απαντά σε πραγματική συνθήκη χρήσης, όχι σε γούστο. */

/* Υπηρεσιακό — καθημερινή χρήση. */
[data-preset="ypiresiako"] {
  --bg: #eceff3; --surface: #ffffff; --surface-2: #f4f6f9;
  --border: #ccd5df; --text: #12283c; --text-muted: #5b6f82;
  --accent-base: #17456b; --accent-hover: #0f3252; --accent-contrast: #ffffff;
  --nav-bg: #12304a; --nav-text: #eaf1f7;
}
[data-preset="ypiresiako"][data-bs-theme="dark"] {
  --bg: #0c151d; --surface: #131f2a; --surface-2: #182734;
  --border: #253746; --text: #dfe9f1; --text-muted: #8ba0b1;
  --accent-base: #4d9ad4; --accent-hover: #6aabdd; --accent-contrast: #06111b;
  --nav-bg: #0a121a; --nav-text: #dfe9f1;
}

/* Νυχτερινή περιπολία — κεχριμπάρι σε μαύρο. Το κεχριμπάρι δεν είναι αισθητική
   επιλογή: το μπλε φως καίει τη νυχτερινή προσαρμογή του ματιού, και μια λευκή
   οθόνη μέσα σε όχημα κοστίζει λεπτά ορατότητας έξω από αυτό. */
[data-preset="nyxta"] {
  --bg: #efe6d4; --surface: #faf4e8; --surface-2: #f3ead8;
  --border: #d8c7a4; --text: #3a2a0e; --text-muted: #7a6334;
  --accent-base: #a35d07; --accent-hover: #8a4e05; --accent-contrast: #fff8ec;
  --nav-bg: #3a2a0e; --nav-text: #f5e9d2;
}
[data-preset="nyxta"][data-bs-theme="dark"] {
  --bg: #070604; --surface: #0f0d08; --surface-2: #17130c;
  --border: #2e2515; --text: #ffc978; --text-muted: #b08745;
  --accent-base: #ff9c1f; --accent-hover: #ffb057; --accent-contrast: #1a1207;
  --nav-bg: #050403; --nav-text: #ffc978;
}

/* Υψηλή αντίθεση — για ήλιο πάνω στην οθόνη, και για όποιον δυσκολεύεται. */
[data-preset="antithesi"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #eeeeee;
  --border: #000000; --text: #000000; --text-muted: #2b2b2b;
  --accent-base: #0033cc; --accent-hover: #002499; --accent-contrast: #ffffff;
  --nav-bg: #000000; --nav-text: #ffffff;
}
[data-preset="antithesi"][data-bs-theme="dark"] {
  --bg: #000000; --surface: #0a0a0a; --surface-2: #171717;
  --border: #ffffff; --text: #ffffff; --text-muted: #d6d6d6;
  --accent-base: #ffd400; --accent-hover: #ffe34d; --accent-contrast: #000000;
  --nav-bg: #000000; --nav-text: #ffd400;
}

/* Χαρτί — πράσινο μελάνι σε χαρτί, όπως το βιβλίο συμβάντων που αντικαθιστά. */
[data-preset="charti"] {
  --bg: #e9e5d9; --surface: #f7f4ea; --surface-2: #f0ece0;
  --border: #cfc7b3; --text: #23241f; --text-muted: #605e53;
  --accent-base: #35573f; --accent-hover: #294331; --accent-contrast: #f4f7f2;
  --nav-bg: #2c3b30; --nav-text: #eef0e6;
}
[data-preset="charti"][data-bs-theme="dark"] {
  --bg: #131614; --surface: #1b1f1c; --surface-2: #222724;
  --border: #2e3630; --text: #e6e8df; --text-muted: #98a094;
  --accent-base: #7fb08a; --accent-hover: #96c19f; --accent-contrast: #0f130f;
  --nav-bg: #0f120f; --nav-text: #e6e8df;
}

/* Ουδέτερο — για όποιον δεν θέλει υπηρεσιακό μπλε στην οθόνη του. */
[data-preset="oudetero"] {
  --bg: #eef1f1; --surface: #ffffff; --surface-2: #f5f7f7;
  --border: #cfd7d7; --text: #1b2525; --text-muted: #5a6a6a;
  --accent-base: #0d6e6a; --accent-hover: #095855; --accent-contrast: #ffffff;
  --nav-bg: #1e2b2b; --nav-text: #e8eeee;
}
[data-preset="oudetero"][data-bs-theme="dark"] {
  --bg: #0e1313; --surface: #151d1d; --surface-2: #1c2626;
  --border: #263131; --text: #e0e9e9; --text-muted: #8ba0a0;
  --accent-base: #2fa79e; --accent-hover: #48bdb4; --accent-contrast: #04100f;
  --nav-bg: #0a0f0f; --nav-text: #e0e9e9;
}

/* Το χρώμα τόνου του χρήστη υπερισχύει του στυλ όταν έχει οριστεί. Το
   --accent-contrast-user υπολογίζεται στον server από τη φωτεινότητα του
   χρώματος, γιατί η CSS δεν μπορεί να απαντήσει αξιόπιστα «άσπρα ή μαύρα
   γράμματα πάνω σε αυτό». */
[data-preset] {
  --accent: var(--accent-user, var(--accent-base));
  --accent-hover-eff: var(--accent-user, var(--accent-hover));
  --accent-on: var(--accent-contrast-user, var(--accent-contrast));
}

/* ── Χαρτογράφηση στο Bootstrap ───────────────────────────────────────────── */

[data-preset] {
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-secondary-color: var(--text-muted);
  --bs-emphasis-color: var(--text);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-hover-eff);
  --bs-border-radius: var(--radius);
}

.text-muted { color: var(--text-muted) !important; }

.card {
  --bs-card-bg: var(--surface);
  --bs-card-border-color: var(--border);
  --bs-card-color: var(--text);
}

.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-color: var(--accent-on);
  --bs-btn-hover-bg: var(--accent-hover-eff);
  --bs-btn-hover-border-color: var(--accent-hover-eff);
  --bs-btn-hover-color: var(--accent-on);
  --bs-btn-active-bg: var(--accent-hover-eff);
  --bs-btn-active-border-color: var(--accent-hover-eff);
  --bs-btn-active-color: var(--accent-on);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-disabled-color: var(--accent-on);
}

.btn-outline-secondary {
  --bs-btn-color: var(--text);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-border-color: var(--border);
  --bs-btn-active-bg: var(--surface-2);
  --bs-btn-active-color: var(--text);
}

.form-control, .form-select {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.form-control:focus, .form-select:focus {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 35%, transparent);
}
.form-control::placeholder { color: var(--text-muted); opacity: .75; }
.form-label { color: var(--text); }
.form-text { color: var(--text-muted); }

.dropdown-menu {
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-color: var(--text);
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-bg: var(--surface-2);
  --bs-dropdown-link-hover-color: var(--text);
  --bs-dropdown-link-active-bg: var(--accent);
  --bs-dropdown-link-active-color: var(--accent-on);
  --bs-dropdown-divider-bg: var(--border);
  --bs-dropdown-header-color: var(--text-muted);
}

.alert { border-radius: var(--radius); }
.alert-info    { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.alert-success { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: var(--accent); color: var(--text); }
.alert-danger  { background: color-mix(in srgb, #d13b3b 16%, var(--surface)); border-color: #d13b3b; color: var(--text); }

hr { border-color: var(--border); opacity: 1; }

/* Ορατή εστίαση πληκτρολογίου παντού. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ── Πλοήγηση ─────────────────────────────────────────────────────────────── */

.app-nav {
  background: var(--nav-bg);
  padding-block: .4rem;
}
.app-nav .navbar-brand,
.app-nav .nav-trigger { color: var(--nav-text); }

.app-nav .navbar-brand {
  font-weight: 600;
  letter-spacing: .01em;
  font-size: 1.05rem;
}

/* Ο διακόπτης του μενού. Ελάχιστο 44px ύψος: το χέρι που τον πατά κρατά συχνά
   και κάτι άλλο. */
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .25rem .6rem;
  border: 1px solid color-mix(in srgb, var(--nav-text) 35%, transparent);
  border-radius: var(--radius);
  background: transparent;
  font: inherit;
  line-height: 1.15;
}
.nav-trigger:hover { background: color-mix(in srgb, var(--nav-text) 12%, transparent); }

.nav-who { text-align: start; }
.nav-who b { display: block; font-weight: 600; font-size: .9rem; }
.nav-who small { display: block; opacity: .75; font-size: .72rem; }

/* Σε στενή οθόνη το όνομα κόβεται αντί να σπάσει η μπάρα σε δύο σειρές. */
.nav-who b, .nav-who small {
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-item { min-height: 44px; display: flex; align-items: center; gap: .6rem; }
.dropdown-item .di-icon { flex: 0 0 auto; opacity: .8; }
.navbar-brand .di-icon { vertical-align: -.2em; margin-inline-end: .15rem; }
.preview-bar .di-icon { width: .7em; height: .7em; vertical-align: -.1em; }

/* ── Σελίδα ρυθμίσεων ─────────────────────────────────────────────────────── */

.preset-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 576px) { .preset-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .preset-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* Κάθε επιλογή είναι label γύρω από κρυφό radio: όλη η κάρτα γίνεται στόχος
   αφής, όχι ένα κουκκάκι 16 εικονοστοιχείων. */
.preset-option { display: block; cursor: pointer; margin: 0; }
.preset-option input { position: absolute; opacity: 0; pointer-events: none; }

/* display:block σε όλα τα κομμάτια της κάρτας: είναι <span> επειδή το
   περιεχόμενο ενός <label> πρέπει να είναι phrasing content -- ένα <div> εκεί
   είναι άκυρη HTML. Χωρίς αυτό μένουν inline και το πλαίσιο εκφυλίζεται σε μια
   λεπτή κάθετη γραμμή αντί να κουτιώσει την κάρτα. */
.preset-card, .preset-why, .preview, .preview-bar, .preview-body, .preview-line {
  display: block;
}

.preset-card {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  transition: border-color .12s ease;
}
.preset-option input:focus-visible + .preset-card { outline: 3px solid var(--accent); outline-offset: 2px; }
.preset-option input:checked + .preset-card { border-color: var(--accent); }

.preset-name {
  display: flex;
  padding: .5rem .7rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.preset-check { color: var(--accent); font-size: 1.1rem; visibility: hidden; }
.preset-option input:checked + .preset-card .preset-check { visibility: visible; }

.preset-why {
  padding: 0 .7rem .55rem;
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Οι δύο μισές προεπισκοπήσεις: φως αριστερά, σκοτάδι δεξιά. Το ζευγάρι δείχνει
   ό,τι δεν λέει ένα όνομα -- ότι κάθε στυλ έχει δύο πρόσωπα. */
.preview-pair { display: grid; grid-template-columns: 1fr 1fr; }
.preview {
  background: var(--bg);
  padding: .5rem;
  border-top: 1px solid var(--border);
}
.preview + .preview { border-inline-start: 1px solid var(--border); }
.preview-bar {
  background: var(--nav-bg);
  color: var(--nav-text);
  font-size: .6rem;
  padding: .18rem .35rem;
  border-radius: 3px 3px 0 0;
}
.preview-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 3px 3px;
  padding: .4rem .35rem;
}
.preview-line { height: 5px; border-radius: 3px; background: var(--text); opacity: .8; }
.preview-line.short { width: 55%; margin-top: 4px; opacity: .4; }
.preview-btn {
  margin-top: 6px;
  display: inline-block;
  background: var(--accent-base);
  color: var(--accent-contrast);
  font-size: .58rem;
  padding: .12rem .4rem;
  border-radius: 3px;
}

.swatch-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.swatch {
  width: 2.6rem; height: 2.6rem;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  cursor: pointer;
  padding: 0;
}
.swatch[aria-pressed="true"] { border-color: var(--text); }

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

.field-grid {
  display: grid;
  gap: .85rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .field-grid { grid-template-columns: 1fr 1fr; } }
.field-grid .span-2 { grid-column: 1 / -1; }

/* Στο κινητό η γραμμή ενεργειών μένει στο κάτω μέρος της οθόνης, εκεί που
   φτάνει ο αντίχειρας, αντί να κυνηγιέται στο τέλος μιας μακριάς φόρμας. */
.action-bar {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: .7rem 0;
  margin-top: 1rem;
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
.action-bar .btn { min-height: 44px; }

.readonly-pair { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; }
.readonly-pair + .readonly-pair { border-top: 1px solid var(--border); }
.readonly-pair dt { color: var(--text-muted); font-weight: 500; font-size: .85rem; }
.readonly-pair dd { margin: 0; text-align: end; }

/* ── Βάρδιες ──────────────────────────────────────────────────────────────── */

/* Λίστα από πλακίδια και όχι πίνακας: σε πίνακα, οι έξι στήλες μιας βάρδιας
   είτε ξεχειλίζουν οριζόντια στο κινητό είτε στριμώχνονται σε δύο γράμματα
   την καθεμία. Το πλακίδιο διπλώνει μόνο του. */
.shift-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.shift-row {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  flex-wrap: wrap;
  padding: .85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  min-height: 44px;
}
.shift-row:hover, .shift-row:focus-visible {
  border-color: var(--accent);
  color: var(--text);
}
.shift-when { flex: 0 0 auto; min-width: 7.5rem; }
.shift-what { flex: 1 1 12rem; min-width: 0; }
.shift-when b, .shift-what b { display: block; font-weight: 600; }
.shift-when small, .shift-what small {
  display: block;
  color: var(--text-muted);
  font-size: .8rem;
  overflow-wrap: anywhere;
}

.status-badge {
  flex: 0 0 auto;
  align-self: center;
  font-size: .75rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  white-space: nowrap;
}
/* Μόνο η βάρδια σε εξέλιξη παίρνει το χρώμα τόνου. Αν το έπαιρναν και οι
   τρεις καταστάσεις, η λίστα θα ήταν ένα χαλί από χρώμα και το «ποια τρέχει
   τώρα» δεν θα ξεχώριζε από τίποτα. */
.status-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--text);
}
.status-cancelled { text-decoration: line-through; }

.filter-summary { cursor: pointer; list-style: none; font-weight: 600; }
.filter-summary::-webkit-details-marker { display: none; }
.filter-summary::before { content: "▸ "; }
details[open] > .filter-summary::before { content: "▾ "; }
.filter-count {
  display: inline-block;
  min-width: 1.4em;
  text-align: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast, #fff);
  font-size: .75rem;
  padding: 0 .35em;
}

/* Ο σύνδεσμος της μπάρας ακολουθεί το χρώμα της μπάρας, όχι του κειμένου:
   η μπάρα έχει δικό της φόντο σε κάθε στυλ. */
.nav-link-plain {
  color: var(--nav-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .6rem;
  border-radius: var(--radius);
  min-height: 44px;
}
.nav-link-plain:hover { background: color-mix(in srgb, var(--nav-text) 12%, transparent); color: var(--nav-text); }
/* ── Η μπάρα σε στενή οθόνη ───────────────────────────────────────────────
   Χωρίς min-width: 0 τα δύο μισά της μπάρας δεν συρρικνώνονται καθόλου: ένα
   στοιχείο flex έχει εξ ορισμού min-width: auto, δηλαδή αρνείται να γίνει
   στενότερο από το περιεχόμενό του. Η περικοπή με ellipsis παρακάτω δεν
   ενεργοποιείται ποτέ και η μπάρα βγαίνει έξω από την οθόνη. */
/* Ρητός καταμερισμός των δύο μισών, αντί να αφεθεί το flex να μαντέψει.

   Η αριστερή πλευρά ΔΕΝ συρρικνώνεται: το περιεχόμενό της είναι λογότυπο και
   δύο εικονίδια, δηλαδή ήδη το ελάχιστο -- ένα min-width: 0 εδώ θα την
   στένευε κάτω από το περιεχόμενό της και το μενού χρήστη θα ζωγραφιζόταν
   πάνω από τα εικονίδια.

   Η δεξιά παίρνει ό,τι περισσεύει και κόβει το όνομα με αποσιωπητικά. Έτσι το
   σημείο κοπής προκύπτει από τον διαθέσιμο χώρο και δεν είναι ένα ποσοστό
   γραμμένο με το χέρι, που θα ήταν λάθος σε κάθε πλάτος εκτός από ένα. */
.app-nav .nav-start { flex: 0 0 auto; }
.app-nav .nav-end {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}
/* Το κουμπί δεν είναι στοιχείο flex του ίδιου περιέκτη με τα παραπάνω, οπότε
   κρατά το φυσικό του πλάτος και βγαίνει έξω από τον γονέα αν δεν δεσμευτεί. */
.app-nav .nav-trigger { max-width: 100%; }
.app-nav .nav-who { min-width: 0; }

@media (max-width: 575.98px) {
  /* Οι ετικέτες φεύγουν ΟΠΤΙΚΑ και μόνο. Το display: none θα τις έβγαζε και
     από το δέντρο προσβασιμότητας, αφήνοντας δύο συνδέσμους-εικονίδια χωρίς
     όνομα -- ο αναγνώστης οθόνης θα διάβαζε «σύνδεσμος» και τίποτε άλλο. */
  .nav-label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  /* Ο βαθμός φεύγει, το όνομα μένει: σε κοινή συσκευή το «ποιος καταγράφει»
     είναι η χρήσιμη πληροφορία, το «τι βαθμό έχει» όχι. */
  .nav-who small { display: none; }
  /* 100% και όχι σταθερό vw: το κουμπί παίρνει ό,τι περισσεύει από την
     αριστερή πλευρά, οπότε το όνομα κόβεται ακριβώς όσο χρειάζεται και όχι
     όσο μάντεψε ένας αριθμός γραμμένος με το χέρι. */
  .nav-who b { max-width: 100%; }
}

/* ── Σήματα ───────────────────────────────────────────────────────────────── */

/* Το πεδίο ώρας με το κουμπί «Τώρα» δίπλα. Το κουμπί δεν συρρικνώνεται: στο
   κινητό το datetime-local θέλει όλο τον χώρο που μπορεί να πάρει, και ένα
   κουμπί δύο γραμμάτων δεν πατιέται. */
.time-field { display: flex; gap: .5rem; align-items: stretch; }
.time-field .form-control { flex: 1 1 auto; min-width: 0; }
.time-field .btn { flex: 0 0 auto; white-space: nowrap; min-height: 44px; }

/* <details> που ανοίγει με κουμπί: το summary είναι το κουμπί, χωρίς το
   τριγωνάκι που θα πρόδιδε ότι δεν είναι πραγματικό. */
.button-summary { display: inline-block; list-style: none; cursor: pointer; min-height: 44px; }
.button-summary::-webkit-details-marker { display: none; }
.button-summary::marker { content: ""; }
details[open] > .button-summary { margin-bottom: .25rem; }

.service-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.service-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .55rem .75rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.service-list small { display: block; color: var(--text-muted); font-size: .8rem; }
/* Το «Παρών/Ανέλαβε» είναι κουμπί εναλλαγής, όχι ετικέτα -- πρέπει να δείχνει
   πατήσιμο χωρίς να γίνεται τρίτο κουμπί στη σειρά. */
button.status-badge { cursor: pointer; }

/* Η ετικέτα Α/Β/Γ του ατόμου: στρογγυλή και σταθερού πλάτους, ώστε μια
   στήλη από άτομα να ευθυγραμμίζεται ανεξάρτητα από το μήκος των ονομάτων. */
.person-label {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast, #fff);
  font-weight: 700;
}
.person-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--text);
  min-width: 0;
}
.person-link:hover { color: var(--text); text-decoration: underline; }

/* Η σύλληψη ξεχωρίζει από την κλήση ΚΟΚ. Κόκκινο και όχι χρώμα τόνου: είναι η
   μόνη ενέργεια με συνέπειες που δεν αναιρούνται με ένα πρόστιμο. */
.status-arrest {
  border-color: #d13b3b;
  background: color-mix(in srgb, #d13b3b 16%, var(--surface));
  color: var(--text);
}

/* Ο πίνακας κυλά μέσα στο δικό του κουτί. Χωρίς αυτό, τρεις στήλες με
   ονόματα και πινακίδες κάνουν ΟΛΗ τη σελίδα να κυλά οριζόντια στο κινητό. */
.table-scroll { overflow-x: auto; }
.table-scroll .table { color: var(--text); --bs-table-bg: transparent; }
.table-scroll .table > :not(caption) > * > * { border-color: var(--border); }
.table-scroll .person-label { width: 1.6rem; height: 1.6rem; font-size: .8rem; }

/* Τα πλακίδια της βάρδιας. Δύο στήλες στο κινητό, τρεις από τα 640 και πάνω:
   έξι πλακίδια σε μία στήλη είναι κύλιση, σε τρεις σειρές των δύο είναι μια
   ματιά. */
.tile-grid {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } }
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  min-height: 88px;
  padding: .8rem .5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  text-align: center;
}
.tile:hover, .tile:focus-visible { border-color: var(--accent); color: var(--text); }
.tile b { font-size: 1.6rem; line-height: 1; font-weight: 700; color: var(--accent); }
.tile span { font-size: .85rem; }
.tile small { color: var(--text-muted); font-size: .72rem; }

/* Το είδος της εγγραφής στο ιστορικό. Αχνές αποχρώσεις και όχι έντονα
   χρώματα: τρία είδη επί εκατό γραμμές γίνονται χαλί, και τότε το χρώμα παύει
   να ξεχωρίζει οτιδήποτε. */
.kind-signal     { border-style: dashed; }
.kind-inspection { border-style: solid; }
.kind-event      { border-style: dotted; }

/* Η γραμμή γεγονότος ανοίγει επί τόπου. Το summary μοιάζει με τα υπόλοιπα
   πλακίδια της εφαρμογής, χωρίς το τριγωνάκι του <details>. */
.event-row {
  padding: .85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.event-row > summary {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
}
.event-row > summary::-webkit-details-marker { display: none; }
.event-row > summary::marker { content: ""; }
.event-row[open] > summary { border-bottom: 1px solid var(--border); padding-bottom: .6rem; }

/* Οι κάρτες της απόδοσης. Ίδιο πλέγμα, χωρίς σύνδεσμο. */
.stat-grid {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
.stat {
  padding: .8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.stat b { display: block; font-size: 1.6rem; line-height: 1.1; font-weight: 700; }
.stat span { color: var(--text-muted); font-size: .8rem; }
/* Το μηδέν δεν διεκδικεί την προσοχή που διεκδικεί ένα νούμερο. */
.stat.is-zero b { color: var(--text-muted); font-weight: 500; }

/* Πλέγμα φωτογραφιών. Οι μικρογραφίες είναι το ίδιο αρχείο σμικρυμένο από τον
   browser: με 1600px στη μεγάλη πλευρά και λίγες φωτογραφίες ανά εγγραφή, ένα
   δεύτερο μέγεθος στον δίσκο θα ήταν διπλάσια αρχεία για μηδέν κέρδος. */
.photo-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.photo-grid small { display: block; color: var(--text-muted); font-size: .75rem; }

/* Κάρτα που είναι σύνδεσμος προς άλλη οθόνη. */
.nav-card { display: block; color: var(--text); }
.nav-card:hover, .nav-card:focus-visible { border-color: var(--accent); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}