/* Κραγιόν design tokens — κοινό για login/parent/staff/offline */
:root {
  --paper: #fffef6;
  --ink: #191919;
  --ink-soft: #5c5c5c;

  /* ΕΠΙΦΑΝΕΙΕΣ & ΠΕΡΙΓΡΑΜΜΑΤΑ — τα καθαρά χρώματα κραγιονιού.
     Μεγάλα πλακάτα χρώματα, borders, διακόσμηση. ΠΟΤΕ κείμενο, ΠΟΤΕ γέμισμα
     κάτω από λευκά γράμματα: κανένα τους δεν φτάνει 4.5:1 σε λευκό/χαρτί. */
  --crayon-yellow: #f6c445;
  --crayon-red: #e64f3d;
  --crayon-blue: #3a7bd5;
  --crayon-green: #59a96a;

  /* ΜΕΛΑΝΙΑ — ίδια απόχρωση, σκουρότερη. Και τα 4 ≥4.8:1 σε λευκό ΚΑΙ σε χαρτί,
     άρα δουλεύουν ταυτόχρονα ως χρώμα κειμένου ΚΑΙ ως γέμισμα με λευκά γράμματα
     (είναι ο ίδιος υπολογισμός contrast). Αυτά μπαίνουν σε κάθε γράμμα και κουμπί. */
  --red-ink: #ce3c2b;
  --blue-ink: #3871c1;
  --green-ink: #2f7a4e;
  --yellow-ink: #8f6c12;

  /* ΤΙΝΤΣ & ΓΡΑΜΜΕΣ — απαλές επιφάνειες και διαχωριστικά. ΜΟΝΟ φόντο/περίγραμμα,
     ποτέ κείμενο: κανένα δεν φτάνει 4.5:1. Ένα token ανά ρόλο, όχι ανά σημείο. */
  --yellow-tint: #fdf4d8;  /* σημειώσεις, tracks, ό,τι «σημειωμένο με μαρκαδόρο» */
  --green-tint: #e6f2e8;   /* θετική κατάσταση: παρουσία, ενεργό pill */
  --line: #e5e1d3;         /* διαχωριστική γραμμή ΜΕΣΑ σε κάρτα ή πίνακα */
  --line-soft: #d9d4c4;    /* περίγραμμα ουδέτερου κελιού */
  --grid: #eee2c0;         /* γραμμές πλέγματος chart — διακοσμητικές */
  --skeleton-line: #e8e4d8;
  --skeleton-bg: #f4f1e6;
  --skeleton-sheen: #fbf9f0;

  --card: #ffffff;
  --ok: var(--crayon-green);
  --danger: var(--crayon-red);
  --info: var(--crayon-blue);
  --star-off: #9a9382; /* άδειο αστέρι — 3:1 ως στοιχείο UI (1.4.11) */

  /* ΤΥΠΟΓΡΑΦΙΑ σε rem, όχι px: το px αγνοεί τη ρύθμιση γραμματοσειράς του browser.
     Οι τιμές είναι ακριβώς οι προηγούμενες σε προεπιλογή 16px — μηδέν οπτική αλλαγή. */
  --text-2xs: 0.6875rem; /* 11 */
  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.8125rem;  /* 13 */
  --text-md: 0.875rem;   /* 14 */
  --text-base: 0.9375rem;/* 15 */
  --text-lg: 1rem;       /* 16 */
  --text-xl: 1.125rem;   /* 18 */
  --text-2xl: 1.3125rem; /* 21 */
  --text-3xl: 1.5rem;    /* 24 */
  --text-4xl: 1.625rem;  /* 26 */
  --text-display: 2.125rem; /* 34 */

  /* ΑΠΟΣΤΑΣΕΙΣ — η κλίμακα των κοινών primitives αυτού του αρχείου.
     Τα staff/parent κρατούν χειροκίνητα ρυθμισμένα κενά (7/9/11/13/18) όπου το
     σχέδιο τα θέλει εκτός πλέγματος· δεν τα ισοπεδώνουμε για χάρη της κλίμακας. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --radius: 12px;
  --radius-sm: 8px;
  --font: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--info); outline-offset: 2px; }

/* Πεδία φόρμας. Το `max(1rem, 16px)` κρατά τον φράχτη του iOS (κάτω από 16px
   κάνει auto-zoom στο focus) ΚΑΙ σέβεται μεγαλύτερη ρύθμιση γραμματοσειράς. */
input, select, textarea {
  font-family: inherit; font-size: max(1rem, 16px); padding: 9px var(--sp-3);
  border: 1.5px solid var(--ink); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink); outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--info); box-shadow: 2px 2px 0 var(--info);
}
textarea { resize: vertical; min-height: 60px; width: 100%; }

/* ΚΟΥΜΠΙΑ — ΕΝΑ σύστημα, δύο πυκνότητες.
   `.cr-btn` = η πλήρης χάρακα του Κραγιόν (γονείς, login, κύριες ενέργειες).
   `.btn` = πιο συμπαγής παραλλαγή για τα πυκνά εργαλεία του προσωπικού.
   Διαφέρουν ΜΟΝΟ στις μεταβλητές παρακάτω — οι κανόνες είναι κοινοί, ώστε ένα
   hover/active/disabled να μην μπορεί ποτέ να αποκλίνει ανάμεσα στις δύο apps. */
.cr-btn, .btn {
  --btn-bw: 2.5px;                 /* πάχος περιγράμματος */
  --btn-off: 3px;                  /* μετατόπιση σκιάς */
  --btn-bg: var(--red-ink);
  --btn-fg: var(--card);
  border: var(--btn-bw) solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  padding: 11px 18px;
  min-height: 44px;
  box-shadow: var(--btn-off) var(--btn-off) 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
.btn {
  --btn-bw: 2px;
  --btn-off: 2px;
  --btn-bg: var(--blue-ink);
  font-size: var(--text-md);
  padding: 9px 14px;
  min-height: 40px;
}
.cr-btn:hover, .btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: calc(var(--btn-off) + 1px) calc(var(--btn-off) + 1px) 0 var(--ink);
}
.cr-btn:active, .btn:active {
  transform: translate(var(--btn-off), var(--btn-off));
  box-shadow: 0 0 0 var(--ink);
}
.cr-btn:disabled, .btn:disabled {
  opacity: .55; cursor: default; transform: none;
  box-shadow: var(--btn-off) var(--btn-off) 0 var(--ink);
}
.cr-btn.blue, .btn.blue { --btn-bg: var(--blue-ink); }
.cr-btn.green, .btn.green { --btn-bg: var(--green-ink); }
.cr-btn.yellow, .btn.yellow { --btn-bg: var(--crayon-yellow); --btn-fg: var(--ink); }
.cr-btn.ghost, .btn.ghost {
  --btn-bg: var(--card); --btn-fg: var(--ink);
  --btn-bw: 1.5px; box-shadow: none;
}
.cr-btn.ghost:hover, .btn.ghost:hover { box-shadow: none; }
.cr-btn.danger, .btn.danger {
  --btn-bg: var(--card); --btn-fg: var(--red-ink);
  border-color: var(--red-ink); box-shadow: none;
}
.cr-btn.danger:hover, .btn.danger:hover { box-shadow: none; }
.cr-btn.sm, .btn.sm {
  --btn-off: 2px;
  padding: 7px var(--sp-3); font-size: var(--text-sm); min-height: 36px;
}

/* Chips κατάστασης */
.cr-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--ink); border-radius: 999px;
  background: var(--card); color: var(--ink);
  font-size: var(--text-sm); font-weight: 700; padding: 5px var(--sp-3);
}
.cr-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-soft); }
.cr-chip.ok { border-color: var(--green-ink); color: var(--green-ink); }
.cr-chip.ok .dot { background: var(--ok); }
.cr-chip.danger { border-color: var(--red-ink); color: var(--red-ink); }
.cr-chip.danger .dot { background: var(--danger); }
.cr-chip.info { border-color: var(--blue-ink); color: var(--blue-ink); }

/* Section labels */
.cr-label {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft);
}

/* Skeleton loading. Το shimmer τρέχει σε ΞΕΧΩΡΙΣΤΟ στρώμα με `transform`:
   το `background-position` ξαναβάφει το στοιχείο σε κάθε καρέ (repaint στο main
   thread), ενώ το transform μένει στον compositor. */
.skeleton {
  position: relative; overflow: hidden;
  border: 1.5px solid var(--skeleton-line); border-radius: var(--radius);
  background: var(--skeleton-bg);
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 25%, var(--skeleton-sheen) 50%, transparent 75%);
  transform: translateX(-100%);
  animation: cr-shimmer 1.2s infinite linear;
  will-change: transform;
}
@keyframes cr-shimmer { to { transform: translateX(100%); } }

/* Modal (κοινό στυλ) */
.modal-back {
  position: fixed; inset: 0; background: rgba(25,25,25,.5);
  display: grid; place-items: center; z-index: 50; padding: var(--sp-4);
}
.modal {
  background: var(--card); border: 2.5px solid var(--ink);
  border-radius: var(--radius); box-shadow: 6px 6px 0 var(--ink);
  padding: 22px; width: 100%; max-width: 640px; max-height: 90vh; overflow: auto;
}
.modal h3 { margin-bottom: 14px; font-size: var(--text-xl); }
.modal.narrow { max-width: 400px; }

/* Toast. Στο κινητό και οι δύο apps έχουν σταθερή κάτω μπάρα (56px + safe area)
   — το toast κάθεται ΠΑΝΩ της, όχι από κάτω της. */
#as-toast {
  position: fixed; bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--card); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--radius-sm);
  box-shadow: 3px 3px 0 var(--ink);
  padding: var(--sp-3) 20px; font-size: var(--text-md); font-weight: 600;
  opacity: 0; transition: all .25s; z-index: 200; max-width: 90vw;
}
#as-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#as-toast.error { border-color: var(--red-ink); color: var(--red-ink); }
#as-toast.success { border-color: var(--green-ink); color: var(--green-ink); }
@media (max-width: 700px) {
  #as-toast { bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* Μόνο για αναγνώστες οθόνης. clip, ΟΧΙ display:none — το display:none
   αφαιρεί το στοιχείο και από το δέντρο προσβασιμότητας. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Empty state */
.empty { text-align: center; color: var(--ink-soft); padding: 48px var(--sp-4); font-size: var(--text-base); line-height: 1.5; }
.empty .big { font-size: 40px; display: block; margin-bottom: 10px; }

/* Κοινά utilities — ήταν γραμμένα αυτούσια και στο staff.html και στο parent.html. */
.muted { color: var(--ink-soft); }
.mt { margin-top: var(--sp-3); }
.flex { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.form-grid { display: grid; gap: 10px; }
.form-grid label {
  font-size: var(--text-xs); font-weight: 700; color: var(--ink-soft);
  display: block; margin-bottom: var(--sp-1);
  text-transform: uppercase; letter-spacing: .06em;
}
.form-grid input, .form-grid select { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
  .cr-btn, .btn, #as-toast { transition: none; }
}