/* =====================================================================
   app.css — ΣΚΕΛΕΤΟΣ layout (3 ζώνες) για το app layer.
   Καταναλώνει ΜΟΝΟ μεταβλητές var(--…) από το design-tokens.css (skin = data-theme).
   Καμία hardcoded τιμή χρώματος — το χρώμα ζει στο design-tokens.css.
   ===================================================================== */
* { box-sizing: border-box; }
/* (11/7, απόφαση Αντώνη) ΚΑΘΟΛΙΚΗ απενεργοποίηση pull-to-refresh + swipe-back (Android/tablet):
   έκαναν ανανέωση/πλοήγηση κατά λάθος ενώ έγραφε/δούλευε ο χρήστης, χαλώντας ό,τι είχε ανοιχτό.
   ΔΕΝ επηρεάζει τη λήψη ενημερώσεων — οι νέες εκδόσεις έρχονται με ?v= σε κάθε φόρτωμα/login. */
html, body { margin: 0; min-height: 100%; overscroll-behavior: none; }
/* (9/8η, απόφαση Αντώνη) ΚΑΙ ΤΟ ΤΑΜΠΛΕΤ. Ο κανόνας «τέλος στο pull-to-refresh» της 2/8 είχε γραφτεί
   ως `html.mview, html.mview body.frost` — και το `mview` μπαίνει ΜΟΝΟ σε κινητό. Τα tablet έμεναν
   έξω και συνέχιζαν να ανανεώνουν με κάθε τράβηγμα. Εδώ ο κανόνας γίνεται καθολικός: το `body.frost`
   είναι το σώμα ΚΑΘΕ σελίδας του app, οπότε ένα σημείο τα καλύπτει όλα — κινητό, tablet, desktop. */
body.frost { overscroll-behavior-y: none; }
body {
  font-family: var(--font);
  background: var(--body);
  color: var(--text);
}

.shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;   /* μενού · περιεχόμενο · δεξί πάνελ */
  min-height: 100vh;
}
/* Σελίδες πλήρους πλάτους (π.χ. Ημερολόγιο): χωρίς δεξί πάνελ — το περιεχόμενο παίρνει όλο τον χώρο. */
.shell--wide { grid-template-columns: 240px minmax(0, 1fr); }
.zone { padding: 24px; }
.menu    { background: var(--menu-bg);  border-right: 1px solid var(--line); }
.content { background: var(--content-bg); }
.right   { background: var(--right-bg); border-left: 1px solid var(--line); }
/* frosted: οι πλαϊνές ζώνες θολώνουν το gradient φόντο (skins με --blur· στο flat = none) */
.menu, .right { backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }

.brand { font-weight: var(--w-title); font-size: 18px; margin-bottom: 20px; }
.nav a {
  display: block; padding: 10px 12px; margin-bottom: 4px;
  border-radius: var(--r-sm); color: var(--text); text-decoration: none; opacity: .82;
}
.nav a:hover { background: var(--chip); opacity: 1; }
.nav-group {
  margin: 18px 12px 6px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: var(--w-label);
}

.badge {
  display: inline-block; padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-ink); font-weight: var(--w-label);
}
.card {
  background: var(--card-bg); border: var(--card-bd); box-shadow: var(--card-sh);
  border-radius: var(--r-md); padding: 22px;
}
.card h1 { margin: 0 0 8px; font-weight: var(--w-title); }
code { background: var(--chip); padding: 2px 6px; border-radius: 6px; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .menu, .right { display: none; }
}

/* ---- auth (login / change-password): κεντραρισμένο, χωρίς 3 ζώνες ---- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card {
  width: 100%; max-width: 380px;
  background: var(--card-bg); border: var(--card-bd); box-shadow: var(--card-sh);
  border-radius: var(--r-lg); padding: 30px;
  position: relative;   /* (16/8δ) άγκυρα για το λαμπερό περίγραμμα από κάτω */
  --shine-out: 1px;     /* (16/8θ) = το πάχος του δικού της περιγράμματος· βλ. ::after */
}
/* ═══ (16/8δ, αίτημα Αντώνη) SHINE BORDER ΣΤΟ LOGIN — «πριν μπει κάποιος, να του εμφανίζει
   αυτό το εφέ». Η ΙΔΙΑ συνταγή του Magic UI ShineBorder με το ημερολόγιο (βλ. ops.css για την
   ανάλυση): ταξιδεύον radial-gradient, μάσκα ώστε να μένει μόνο ο δακτύλιος, 14s, χρώματα του
   demo. Το keyframes ξαναορίζεται εδώ γιατί οι σελίδες auth φορτώνουν ΜΟΝΟ το app.css. */
.auth-card::after {
  content: ''; pointer-events: none; position: absolute;
  /* (16/8θ, αίτημα Αντώνη) ΠΑΝΩ ΣΤΟ ΕΞΩΤΕΡΙΚΟ ΠΕΡΙΓΡΑΜΜΑ, ΟΧΙ ΕΝΑ ΠΙΞΕΛ ΜΕΣΑ: το `inset: 0`
     μετριέται από το PADDING BOX του γονέα, δηλαδή ΜΕΣΑ από το 1px περίγραμμα της κάρτας —
     γι' αυτό «φαινόταν σαν να έχει ακόμα λίγο περιθώριο ελεύθερο». Βγάζουμε τον δακτύλιο
     ακριβώς όσο το περίγραμμα (--shine-out) και μεγαλώνουμε την ακτίνα το ίδιο, αλλιώς οι
     γωνίες θα έσφιγγαν. (Ίδια διόρθωση και στο ημερολόγιο — ops.css.) */
  inset: calc(-1 * var(--shine-out, 0px));
  border-radius: calc(var(--r-lg) + var(--shine-out, 0px));
  /* (16/8η, απόφαση Αντώνη) ΜΟΝΟ ΤΟ ΚΙΤΡΙΝΟ ΤΗΣ «ΕΙΣΟΔΟΥ»: έξω το ροζ/κόκκινο και το
     πορτοκαλί του demo. Τρεις αποχρώσεις του ΙΔΙΟΥ χρώματος (--accent): έντονο → απαλό →
     έντονο, ώστε το ταξίδι να διαβάζεται ως λάμψη και όχι ως εναλλαγή χρωμάτων. */
  background-image: radial-gradient(transparent, transparent,
                    var(--accent, #D8EE6F), var(--accent-soft, #EDF6C7), var(--accent, #D8EE6F),
                    transparent, transparent);
  background-size: 300% 300%;
  /* (16/8θ) ΠΙΣΩ ΣΤΟ ΠΑΧΟΣ ΠΟΥ ΗΤΑΝ ΠΡΙΝ (.75 → 1.5px), όπως και στο ημερολόγιο */
  padding: var(--shine-bw, 1.5px);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  will-change: background-position;
  animation: frShine var(--shine-dur, 22s) linear infinite;   /* (16/8η) πιο αργή */
}
@keyframes frShine { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } }
@media (prefers-reduced-motion: reduce) { .auth-card::after { animation: none; } }
/* ── (16/8θ, αίτημα Αντώνη) ΤΟ ΛΟΓΟΤΥΠΟ ΑΝΤΙ ΓΙΑ ΤΟΝ ΤΙΤΛΟ, ΚΕΝΤΡΑΡΙΣΜΕΝΟ ─────────────────
   «Εκεί που λέει ekΜάθησις βάλε το μαύρο λογότυπο, περίπου σε αυτό το ύψος γραμμάτων, και
   κεντράρισέ το στη μέση του παραθύρου.» Το ίδιο αρχείο που ήδη χρησιμοποιούν τα έντυπα
   (εγγραφή/σημειώσεις) — ένα λογότυπο, ένα σπίτι. Ύψος 28px: το κείμενο ήταν 22px με
   γλυφή ~16px, και το png έχει αέρα πάνω-κάτω, οπότε τα 28 δίνουν οπτικά ίδια σειρά.
   width:auto + max-width: κρατά την αναλογία (300×68) και δεν ξεχειλίζει σε στενή οθόνη.
   (16/8ια) ΔΙΠΛΑΣΙΟ: 28 → 56px (πλάτος 247px σε ωφέλιμα 320px της κάρτας). Το max-width
   κρατά το δίχτυ για στενές οθόνες.
   (16/8ιγ) −10% ΜΕΤΑ ΑΠΟ ΘΕΑ ΣΤΗΝ ΟΘΟΝΗ: 56 → 50px (πλάτος 221px) — «γέμιζε» υπερβολικά την
   κάρτα στα 56. Ένα νούμερο· το πλάτος ακολουθεί μόνο του. */
.auth-card h1 { margin: 0 0 22px; font-size: 22px; font-weight: var(--w-title); text-align: center; }
.auth-card h1 picture { display: block; }
.auth-card h1 img { display: block; height: 50px; width: auto; max-width: 100%; margin: 0 auto; }
.auth-card form { display: flex; flex-direction: column; gap: 14px; }
.auth-card label { display: flex; flex-direction: column; gap: 6px; font-weight: var(--w-label); font-size: 14px; }
.auth-card input {
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  /* (16/8η, αίτημα Αντώνη) ΛΕΥΚΟ 80%: το πεδίο γραφής ξεχωρίζει από την κάρτα χωρίς να την
     «τρυπάει» — αφήνει να περνά λίγο από το φόντο, όπως τα υπόλοιπα γυαλιά της πλατφόρμας. */
  background: rgba(255, 255, 255, .8); color: var(--text); font-size: 15px;
}
.auth-card input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.auth-card button, .logout-form button { cursor: pointer; font-weight: var(--w-label); font-family: inherit; }
.auth-card button {
  margin-top: 6px; padding: 12px; border: 0; border-radius: var(--r-pill);
  background: var(--accent); color: #17161B; font-size: 15px;
  /* (16/8η) ΕΛΑΦΡΙΑ ΣΚΙΑ ΑΠΟ ΚΑΤΩ — δίνει στο κουμπί λίγο βάρος, στο χρώμα του ίδιου του
     accent ώστε να μη διαβάζεται ως γκρι λεκές πάνω στο απαλό φόντο. */
  box-shadow: 0 6px 16px -6px rgba(69, 82, 20, .45);
  /* (16/8θ) άγκυρα + ψαλίδι για τη λάμψη που περνά από πάνω */
  position: relative; overflow: hidden;
  transition: background .25s ease, box-shadow .25s ease;
}
/* ── (16/8ια, αίτημα Αντώνη πάνω στο δείγμα «Shimmer Effect») ΛΑΜΨΗ ΑΠΟ ΠΙΣΩ ΣΤΟ HOVER ─────
   «Βλέπεις ότι όταν κάνεις hover φαίνεται και μια λάμψη από πίσω του και αλλάζει ελαφρώς το
   χρώμα. Κάνει και το γυάλισμα που έχεις βάλει, αλλά δεν έχεις βάλει τη θολούρα πίσω.»
   Στο δείγμα η λάμψη είναι πράσινη — εμείς κρατάμε το κίτρινο, όπως είπε.
   ΔΥΟ ΣΤΡΩΣΕΙΣ, ΟΧΙ ΜΙΑ: ένα σφιχτό δαχτυλίδι 3px που «κολλάει» στο χάπι και δίνει το
   περίγραμμα της λάμψης, και ένα φαρδύ απλωτό 26px που είναι η θολούρα. Με μία μόνο στρώση
   ή σβήνει πολύ γρήγορα (σφιχτή) ή θολώνει χωρίς σχήμα (φαρδιά).
   Η σκιά βάρους (6px κάτω) ΜΕΝΕΙ πρώτη — αλλιώς το κουμπί θα «έχανε βάρος» στο hover.
   ΤΟ ΚΙΤΡΙΝΟ ΑΛΛΑΖΕΙ ΕΛΑΦΡΩΣ: 14% προς το λευκό. Είναι αισθητό ως ζωντάνεμα, όχι ως άλλο
   χρώμα — το σκούρο ανθρακί που είχε πριν το είχε απορρίψει ρητά. */
.auth-card button:hover {
  background: color-mix(in srgb, var(--accent, #D8EE6F) 86%, #fff);
  box-shadow: 0 6px 16px -6px rgba(69, 82, 20, .45),
              0 0 0 3px color-mix(in srgb, var(--accent, #D8EE6F) 34%, transparent),
              0 0 26px 6px color-mix(in srgb, var(--accent, #D8EE6F) 55%, transparent);
}
/* ── (16/8θ, αίτημα Αντώνη) ΤΟ ΚΟΥΜΠΙ ΔΕΝ ΜΑΥΡΙΖΕΙ ΠΙΑ ΣΤΟ HOVER ──────────────────────────
   «Δεν θέλω να γίνεται μαύρο· αυτό το σκούρο ανθρακί το καλύπτει από πάνω, δεν είναι ωραίο.
   Παραμένει στο χρώμα που είναι.» Το `background: var(--accent-ink)` (#455214) ΕΦΥΓΕ — το
   χρώμα μένει το κίτρινο σε κάθε κατάσταση. Στη θέση του, το εφέ που έστειλε: μια λωρίδα
   λευκού 30% που διασχίζει το κουμπί από αριστερά προς τα δεξιά σε 0.6s.
   ΓΙΑΤΙ ΧΩΡΙΣ GSAP: το παράδειγμα φτιάχνει <span> στο mouseenter και το κινεί με το gsap. Η
   πλατφόρμα δεν φορτώνει gsap (~70KB) και δεν αξίζει για μία λάμψη — η ΙΔΙΑ κίνηση γίνεται με
   ένα ::after που ζει ήδη εκεί (μηδέν DOM, μηδέν JS) και ένα keyframe από -100% ως 200%,
   ακριβώς οι τιμές του παραδείγματος. Το `:hover` ξεκινά το animation με την είσοδο του
   ποντικιού και το ξαναπαίζει σε κάθε νέα είσοδο — δηλαδή το mouseenter του δείγματος. */
.auth-card button::after {
  content: ''; pointer-events: none; position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
}
.auth-card button:hover::after { animation: authSweep .6s linear; }
@keyframes authSweep { from { left: -100%; } to { left: 200%; } }
@media (prefers-reduced-motion: reduce) { .auth-card button:hover::after { animation: none; } }
.auth-card .error { background: #fde8e8; color: #9b1c1c; padding: 10px 12px; border-radius: var(--r-sm); font-size: 14px; margin: 0 0 4px; }
.auth-card .note  { color: var(--muted); font-size: 14px; margin: 0 0 4px; }
.logout-form { margin-top: 18px; }
.logout-form button { padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--chip); color: var(--text); }

/* =====================================================================
   CONTENT-ZONE COMPONENTS — προβιβασμένα από το mockup (style-frost.html)
   + ui-ux-pro-max patterns (focus/hover/touch ≥40px/transitions 150-300ms).
   ΜΟΝΟ var(--…) tokens — συμβατά και με τα 4 θέματα (nimbus/lavender/aurora/night).
   Scope: .content (μεσαία ζώνη) → δεν αγγίζει auth/menu/right.
   Spacing/font-size σε px (consistent με το υπόλοιπο app.css).
   ΕΞΑΙΡΕΣΕΙΣ ΧΡΩΜΑΤΟΣ (ήδη υπάρχουσες, ΟΧΙ νέες — προς tokens σε επόμενο pass):
     · danger red #fde8e8/#9b1c1c = η ίδια εξαίρεση του .auth-card .error
     · #fff = το λευκό κείμενο σε solid-accent κουμπί (όπως .auth-card button)
   ===================================================================== */

/* ---- Γενικά .note / .error (προβιβασμένα ΕΞΩ από το .auth-card) ---- */
.note  { color: var(--muted); font-size: 14px; margin: 0 0 10px; }
.error { background: #fde8e8; color: #9b1c1c; padding: 10px 12px; border-radius: var(--r-sm); font-size: 14px; margin: 0 0 12px; }

/* ---- Πίνακες δεδομένων (.list) — λίστα μαθητών/τμημάτων/roster ---- */
.list { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 4px; }
.list th {
  text-align: left; color: var(--muted); font-weight: var(--w-label);
  font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
  padding: 9px 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.list td { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.list tbody tr { transition: background var(--dur-fast) var(--ease); }
.list tbody tr:hover { background: var(--accent-soft); }
.list tbody tr:last-child td { border-bottom: 0; }
.list a { color: var(--accent-ink); text-decoration: none; font-weight: var(--w-label); }
.list a:hover { text-decoration: underline; }

/* ---- Section headings στην κεντρική ζώνη ---- */
.content h2 { font-size: 17px; font-weight: var(--w-title); margin: 18px 0 10px; }

/* ---- Γενικές φόρμες κεντρικής ζώνης (νέο τμήμα, ανάθεση μαθητή) ----
   Εξαιρεί day-col / inline / logout-form (έχουν δικό τους στυλ). */
.content form:not(.day-col):not(.inline):not(.logout-form) { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.content form:not(.day-col):not(.inline):not(.logout-form) > label { display: flex; flex-direction: column; gap: 6px; font-weight: var(--w-label); font-size: 14px; }
/* :not(:where(.cw-pick *)) → εξαιρεί ΟΛΑ τα κουμπιά του cw-picker (trigger + μέρες/ώρες στο popup) ΧΩΡΙΣ αλλαγή specificity —
   αλλιώς το «form button → accent CTA» τα έβαφε lime μέσα στα modals του /ops (εντοπίστηκε 9/7). */
/* :not(.sreg-form) → η φόρμα εγγραφής μαθητή στυλάρει ΜΟΝΗ ΤΗΣ όλα τα κουμπιά της (fancy-selects, καρτέλες
   επαφών, pills φάσης, CTA)· αλλιώς αυτός ο «form button → accent CTA» τα έβαφε ΟΛΑ lime όταν η φόρμα
   σερβίρεται ΜΕΣΑ στη σελίδα (χειρόγραφες → Ολοκλήρωση). Στο popup δεν ίσχυε (εκτός .content). 11/7. */
.content form:not(.day-col):not(.inline):not(.logout-form):not(.sreg-form) button:not(:where(.cw-pick *)) {
  align-self: flex-start; cursor: pointer; font-family: inherit; font-weight: var(--w-label);
  min-height: 44px; padding: 11px 22px; border: 0; border-radius: var(--r-pill);
  background: var(--accent); color: #17161B; font-size: 15px;
  transition: background var(--dur-fast) var(--ease);
}
.content form:not(.day-col):not(.inline):not(.logout-form):not(.sreg-form) button:not(:where(.cw-pick *)):hover { background: var(--accent-ink); }

/* fieldsets (ομάδες checkbox: ρόλοι/παραρτήματα/τμήματα) — checkbox ΔΙΠΛΑ στο κείμενο, όχι από πάνω */
.content fieldset { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px 10px; margin: 0; }
.content fieldset legend { font-size: 13px; font-weight: var(--w-label); color: var(--muted); padding: 0 4px; }
.content fieldset label { display: flex; flex-direction: row; align-items: center; gap: 9px; font-weight: 400; font-size: 14px; padding: 7px 2px; cursor: pointer; }
.content fieldset input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); flex: none; margin: 0; cursor: pointer; }

/* inputs/selects σε όλες τις content φόρμες (text/password/time/date/number/select· checkbox & color ξεχωριστά) */
.content input[type="text"], .content input[type="password"], .content input[type="time"], .content input[type="date"], .content input[type="number"], .content select {
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card-bg); color: var(--text); font-family: inherit; font-size: 15px; width: 100%;
}
.content input[type="text"]:focus-visible, .content input[type="password"]:focus-visible, .content input[type="time"]:focus-visible, .content input[type="date"]:focus-visible, .content input[type="number"]:focus-visible, .content select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
/* color picker = μικρό swatch (όχι full-width) */
.content input[type="color"] {
  width: 64px; height: 44px; padding: 2px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--card-bg); cursor: pointer;
}
.content input[type="color"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- .actions (κουμπιά/links σε σειρά — π.χ. καρτέλα μαθητή) ---- */
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.actions a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px;
  border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink);
  text-decoration: none; font-weight: var(--w-label); font-size: 14px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.actions a:hover { background: var(--accent); color: #17161B; }

/* ---- .inline (μικρό κουμπί μέσα σε κελί, π.χ. «Αφαίρεση») ---- */
.inline { display: inline; }
.inline button {
  cursor: pointer; font-family: inherit; font-weight: var(--w-label); font-size: 12.5px;
  min-height: 36px; padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--chip); color: var(--text);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.inline button:hover { background: var(--accent-soft); color: var(--accent-ink); }

/* ---- Πρόγραμμα (grid Δευ-Παρ) ---- */
.program-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 8px; }
.day-col {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--chip); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px;
}
.day-col h3 { margin: 0 0 6px; font-size: 13px; font-weight: var(--w-label); }
.day-col .subj {
  display: flex; align-items: center; gap: 8px; padding: 9px 8px; border-radius: var(--r-sm);
  font-size: 13.5px; cursor: pointer; transition: background var(--dur-fast) var(--ease);
}
.day-col .subj:hover { background: var(--card-bg); }
.day-col .subj input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); flex: none; cursor: pointer; }
.day-col button {
  margin-top: 8px; cursor: pointer; font-family: inherit; font-weight: var(--w-label); font-size: 13px;
  min-height: 40px; padding: 9px; border: 0; border-radius: var(--r-pill);
  background: var(--accent); color: #17161B;
  transition: background var(--dur-fast) var(--ease);
}
.day-col button:hover { background: var(--accent-ink); }

@media (max-width: 900px) { .program-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .program-grid { grid-template-columns: 1fr; } }

/* ---- accessibility: σεβασμός prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- Theme switcher (preview· localStorage· top-right pill) ---- */
.themebar {
  position: fixed; top: 12px; right: 12px; z-index: 50;
  display: flex; gap: 4px; padding: 5px;
  background: var(--card-bg); border: var(--card-bd); box-shadow: var(--card-sh);
  border-radius: var(--r-pill); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.themebar button {
  font-family: inherit; font-size: 12.5px; font-weight: var(--w-label); color: var(--muted);
  border: 0; background: transparent; padding: 7px 14px; min-height: 36px;
  border-radius: var(--r-pill); cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.themebar button:hover { color: var(--text); }
.themebar button.on { color: #17161B; background: linear-gradient(135deg, var(--accent), var(--lav)); }
@media (max-width: 560px) { .themebar button { padding: 7px 10px; } }

/* ── PJAX «Λίστα ↔ Ραντεβού» (20/6): μετακινείται ΜΟΝΟ το εξόγκωμα (η γλωσσίδα) στην κορυφή.
   --nx = θέση γλωσσίδας. Καταγεγραμμένη ως <length> ώστε να γίνεται ΟΜΑΛΟ transition (interpolation):
   ο φάκελος χρησιμοποιεί την ίδια (συμμετρική) μάσκα και στα δύο tabs, μόνο το --nx αλλάζει → η εγκοπή
   του glass ΤΑΞΙΔΕΥΕΙ ενώ το σώμα μένει ακίνητο. Η ετικέτα (.cand-tablabel, παιδί του folder) κληρονομεί
   το animating --nx (left:var(--nx)) → σέρνεται ΜΑΖΙ. Το .cand-stage (JS, base.php) anim. μόνο το ύψος. */
@property --nx { syntax: '<length>'; inherits: true; initial-value: 0px; }
.cand-stage { position: relative; }
.cand-content { position: relative; }

/* ── Σειριακή εμφάνιση γραμμών (20/6): πάνω→κάτω, η μία μετά την άλλη (όχι «βεντάλια»).
   Κάθε .cand-row φέρει inline --i (δείκτης) → κλιμακωτό delay (cap 14). Παίζει σε full load ΚΑΙ
   μετά από pjax swap. Το base.php αφαιρεί την .cand-stagger μετά ~1.2s → το φιλτράρισμα ΔΕΝ ξανα-τρέχει. */
@keyframes candRowIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
/* (8/7) σειριακό αλλά λίγο πιο γρήγορο: βήμα 110ms/γραμμή (cap 16) → 1η, 2η, 3η… μία-μία */
.cand-listbox.cand-stagger .cand-row { animation: candRowIn .38s cubic-bezier(.4,0,.2,1) both; animation-delay: calc(min(var(--i, 0), 16) * 110ms); }
@media (prefers-reduced-motion: reduce) {
  .cand-listbox.cand-stagger .cand-row { animation: none; }
}


/* ═══ Ο ΚΑΔΟΣ ΤΗΣ ΑΛΥΣΙΔΑΣ — ΕΝΑΣ, ΓΙΑ ΟΛΑ ΤΑ ΕΙΔΗ ΑΝΘΡΩΠΟΥ (31/8μδ, ΕΝΤΟΛΗ ΑΝΤΩΝΗ) ═══════
   *«Από τον ενδιαφερόμενο μέχρι και τον ενεργό, θέλω να έχω ένα κουμπί διαγραφής.»*

   Ήρθε από το candidate-folder.css, ΑΥΤΟΥΣΙΟ. Ζει εδώ γιατί το app.css το φορτώνει κάθε σελίδα:
   ενδιαφερόμενος, υποψήφιος και συνεργάτης δείχνουν πλέον ΤΟ ΙΔΙΟ κουμπί, στην ίδια θέση, με το
   ίδιο μέγεθος — από μία πηγή. Αν κάποια μέρα αλλάξει το σχήμα του, αλλάζει και στα τρία μαζί·
   αντίγραφα θα άφηναν το ένα πίσω χωρίς να το πάρει κανείς είδηση.

   ΜΑΥΡΟ ΗΡΕΜΟ, ΚΟΚΚΙΝΟ ΣΤΟ ΑΓΓΙΓΜΑ: το κόκκινο είναι προειδοποίηση, όχι διακόσμηση. Ένας μόνιμα
   κόκκινος κάδος δίπλα σε κάθε όνομα θα έκανε την οθόνη να φωνάζει συνέχεια. */
.cw-delform{display:inline-flex; margin:0}
.cw-delbtn--foot{display:none}   /* μόνο σε κινητό (mobile.css) — στον υπολογιστή ο κάδος μένει στην κεφαλή */
.cw-delbtn{display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:50%; background:color-mix(in srgb, var(--text,#1B1A21) 8%, transparent); color:var(--text,#1B1A21); cursor:pointer; transition:background .16s ease, color .16s ease}
.cw-delbtn:hover{background:#fdecec; color:#a83232}
.cw-delbtn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--lav-soft,#E0DAF7)}
.cw-delbtn:disabled{opacity:.5; cursor:default}
.cw-delbtn .ic{width:17px; height:17px}

/* ΤΟ ΛΟΥΚΕΤΟ ΚΡΑΤΑΕΙ ΤΗ ΘΕΣΗ ΤΟΥ ΚΑΔΟΥ. Όταν κάποιος δεν σβήνεται (ο ίδιος ο συνδεδεμένος, ο
   ιδιοκτήτης, ο ενδιαφερόμενος που έγινε μαθητής), το κενό θα διάβαζε σαν «δεν φόρτωσε κάτι».
   Ίδιο ύψος, σβησμένο χρώμα, και ο λόγος στο `title` — δηλαδή «δεν γίνεται, και να γιατί». */
.cw-nodel{display:grid; place-items:center; width:32px; height:32px; color:var(--muted,#75717F); opacity:.55}
.cw-nodel .ic{width:17px; height:17px}
/* ═══ ΤΗΛΕΦΩΝΟ ΩΣ ΕΙΚΟΝΙΔΙΟ — ΕΝΑ ΕΞΑΡΤΗΜΑ ΠΑΝΤΟΥ (1/9/2026, εντολή Αντώνη) ══════════════
   «Δεν θέλω να φαίνεται ο αριθμός. Εικονίδιο, κλικ, παραθυράκι, παίρνω.»
   ΣΤΡΟΓΓΥΛΟ, ΓΡΑΜΜΙΚΟ, ΜΕ ΣΤΟΧΟ ΑΦΗΣ 44px: η πλατφόρμα δουλεύεται με το δάχτυλο σε tablet.
   Το ορατό κουμπί είναι 32px για να χωρά σε πυκνές λίστες· ο ΣΤΟΧΟΣ όμως μεγαλώνει με ::after
   χωρίς να πειράξει τη στοίχιση — αλλιώς είτε χαλάει η γραμμή είτε αστοχεί το δάχτυλο. */
.ph-chip,.ic-round{
  --ph-size:32px;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:var(--ph-size); height:var(--ph-size); flex:0 0 auto;
  padding:0; border-radius:50%; cursor:pointer;
  border:1px solid color-mix(in srgb, currentColor 22%, transparent);
  background:color-mix(in srgb, currentColor 7%, transparent);
  color:inherit; vertical-align:middle;
  transition:background .15s ease, border-color .15s ease;
}
.ph-chip::after,.ic-round::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);}
.ph-chip:hover,.ic-round:hover,.ph-chip[aria-expanded="true"]{background:color-mix(in srgb, currentColor 16%, transparent);border-color:color-mix(in srgb, currentColor 40%, transparent);}
.ph-chip:focus-visible,.ic-round:focus-visible{outline:2px solid var(--lav,#8B7BE8);outline-offset:2px;}
/* ΤΟ ΕΙΚΟΝΙΔΙΟ ΩΣ ΜΑΣΚΑ, ΟΧΙ ΩΣ ΚΟΜΒΟΣ (1/9ε): σε λίστα 126 γραμμών, inline SVG σημαίνει 126
   SVG + 126 path. Ως μάσκα δεν υπάρχει κόμβος καθόλου και το χρώμα ακολουθεί το `currentColor`
   όπως πριν. Ίδια τεχνική με το παλιό `.cand-tel::before` που αντικαταστάθηκε. */
.ph-chip::before{
  content:""; display:block; width:16px; height:16px; flex:0 0 auto;
  background:currentColor;
  -webkit-mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.8%2019.8%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.8%2019.8%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E') center/contain no-repeat;
          mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.8%2019.8%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.8%2019.8%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E') center/contain no-repeat;
}
.ph-chip--num::before{display:none;}   /* εκεί δείχνουμε ΜΟΝΟ τον αριθμό — η γραμμή έχει δικό της */

/* ΤΟ ΠΑΡΑΘΥΡΑΚΙ — ΕΝΑ ΓΙΑ ΟΛΗ ΤΗ ΣΕΛΙΔΑ (το μετακινεί το JS). Ζει στο <body> ώστε να μην το
   κόβει κανένα overflow:hidden γονικό πλαίσιο — το πάθαμε ήδη με τις γλωσσίδες. */
.ph-pop{
  position:fixed; z-index:9000; min-width:210px; padding:10px;
  border-radius:14px; border:1px solid rgba(0,0,0,.12);
  background:var(--paper,#fff); color:var(--ink,#1a1a2e);
  box-shadow:0 12px 32px rgba(0,0,0,.22);
  font:500 15px/1.35 inherit;
}
.ph-pop[hidden]{display:none;}
.ph-pop-who{font-size:12px;opacity:.65;margin-bottom:2px;}
.ph-pop-num{font-size:19px;font-weight:600;letter-spacing:.3px;user-select:all;font-variant-numeric:tabular-nums;}
.ph-pop-row{display:flex;gap:8px;margin-top:10px;}
.ph-pop-btn{
  flex:1; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:0 12px; border-radius:11px; cursor:pointer; font-size:14px; font-weight:600;
  border:1px solid rgba(0,0,0,.14); background:transparent; color:inherit; text-decoration:none;
}
.ph-pop-btn--go{background:var(--lav,#8B7BE8);border-color:transparent;color:#fff;}
.ph-pop-btn:active{transform:translateY(1px);}
@media (prefers-color-scheme:dark){
  .ph-pop{border-color:rgba(255,255,255,.16);}
  .ph-pop-btn{border-color:rgba(255,255,255,.22);}
}

/* Στρογγυλό εικονίδιο-κουμπί γενικής χρήσης (φάκελος κ.λπ.) — ίδιο σχήμα με το
   τηλέφωνο, ΧΩΡΙΣ τη συμπεριφορά του: το JS πιάνει ΜΟΝΟ .ph-chip. */
.ic-round{text-decoration:none;}
.ic-round svg{width:16px;height:16px;display:block;}

/* ═══ ΜΕΣΑ ΣΤΟΝ ΦΑΚΕΛΟ: ΟΧΙ ΧΑΠΙ — ΧΡΩΜΑΤΙΣΜΕΝΟΣ ΑΡΙΘΜΟΣ (1/9δ, διόρθωση Αντώνη) ═══════════
   *«Βάλ' το όπως ήταν πριν, απλά χρωματισμένο, να φαίνεται ότι μπορεί να πατηθεί, και το
     εικονίδιο κανονικά στοιχισμένο με τα υπόλοιπα εικονίδια.»*

   ΤΙ ΗΤΑΝ ΛΑΘΟΣ ΣΤΟ ΧΑΠΙ: φόντο και περίγραμμα σε μια στήλη όπου ΟΛΕΣ οι άλλες γραμμές είναι
   «εικονίδιο + απλό κείμενο». Το τηλέφωνο ξεχώριζε σαν να ήταν άλλου είδους πράγμα, και το
   δικό του εικονίδιο έμπαινε ΜΕΣΑ στο χάπι — δηλαδή μετατοπισμένο δεξιά από τη στήλη των
   υπολοίπων. Δύο εικονίδια τηλεφώνου στη σειρά, σε δύο διαφορετικές στοιχίσεις.

   ΤΩΡΑ: καθόλου κέλυφος. Ο αριθμός παίρνει το χρώμα της μάρκας — αυτό αρκεί για να διαβαστεί
   ως «πατιέται», όπως κάθε σύνδεσμος. */
.ph-chip--num,.ph-chip--both{
  width:auto; height:auto; min-height:34px; padding:0; gap:7px;
  border:0; border-radius:6px; background:transparent;
  color:var(--lav-ink,#5747A8); font:inherit;
}
.ph-chip--num:hover,.ph-chip--both:hover{background:transparent;}
.ph-chip--num .ph-num,.ph-chip--both .ph-num{
  font-size:14.5px; font-weight:600; letter-spacing:.2px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ph-chip--num:hover .ph-num,.ph-chip--both:hover .ph-num{text-decoration:underline;}
/* Ο ΣΤΟΧΟΣ ΑΦΗΣ ΜΕΓΑΛΩΝΕΙ ΜΟΝΟ ΚΑΘ᾽ ΥΨΟΣ: ο αριθμός είναι ήδη φαρδύς, οπότε ένα τετράγωνο
   44×44 στο κέντρο θα άφηνε τα άκρα του απ᾽ έξω. Πλήρες πλάτος, 44px ύψος. */
.ph-chip--num::after,.ph-chip--both::after{
  left:0; top:50%; width:100%; height:44px; transform:translateY(-50%);
}
/* Το εικονίδιο στη μορφή «πλήρες» έχει ΤΟ ΙΔΙΟ μέγεθος με τα διπλανά εικονίδια γραμμής. */
.ph-chip--both::before{width:15px;height:15px;opacity:.75;}