/* Οπτικό στυλ εμπνευσμένο - γραμματοσειρά Barlow, χρυσό (champagne) accent, τετράγωνα/αθλητικά κουμπιά. */

:root {
    --ink: #171717;          /* κύριο κείμενο/τίτλοι, όπως το --header-text-col του PRVN */
    --muted: #6b6b6f;
    --bg: #fafafa;           /* φόντο σελίδας */
    --surface: #ffffff;
    --border: #e5e5e5;
    --accent: #c8b081;       /* το χρυσό/champagne */
    --accent-dark: #a98f5c;
    --accent-soft: #f6f1e6;
    --primary: #171717;      /* τα κουμπιά/μενού είναι μαύρα, όχι έγχρωμα */
    --primary-dark: #000000;
    --primary-soft: #f0f0f0;
    --success: #09728c;      /* δεύτερο accent (γαλάζιο-πράσινο) για το "γενικό" πρόγραμμα */
    --success-soft: #e9f3f5;
    --danger: #c20000;
    --radius: 8px;
    --radius-sm: 3px;        /* κουμπιά/ετικέτες: σχεδόν τετράγωνα */
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.06);
    --shadow-hover: 0 4px 10px rgba(16, 24, 40, 0.06), 0 10px 24px rgba(16, 24, 40, 0.08);
}

* { box-sizing: border-box; }

/* Φωτό φόντου σε όλο το site (όχι μόνο στις σελίδες σύνδεσης), με σκούρο
   overlay ώστε να μένει αναγνώσιμο το περιεχόμενο πάνω του. Οι κάρτες
   (.card) παραμένουν συμπαγές λευκό φόντο από πάνω· μόνο ο τίτλος (h1) και
   το εισαγωγικό κείμενο που κάθονται απευθείας πάνω στη σελίδα (δηλαδή του .container, όχι μέσα σε κάρτα) γίνονται λευκά/ανοιχτά
   παρακάτω ώστε να διαβάζονται πάνω στη φωτογραφία. */
body {
    font-family: "Barlow", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    margin: 0;
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.78)),
        url('/static/images/sam.jpg') center 10% / cover no-repeat fixed;
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.container > h1 { color: #fff; }
.container > p { color: rgba(255, 255, 255, 0.85); }
.container > p.hint { color: rgba(255, 255, 255, 0.65); }

h1, h2, h3 { font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
h1 {
    font-size: 1.7rem;
    margin: 0 0 0.4rem 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
h2 { font-size: 1.1rem; margin: 0 0 0.75rem 0; }
h3 { font-size: 1rem; margin: 0 0 0.5rem 0; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Χρυσό (--accent) μενού με μαύρα γράμματα, στο πάνω μέρος της σελίδας. */
.topbar {
    background: var(--accent);
    color: var(--ink);
    padding: 0.4rem 1.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.topbar a { color: var(--ink); text-decoration: none; }
.topbar nav a {
    color: rgba(23, 23, 23, 0.75);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.topbar nav a:hover { color: var(--ink); }
.brand {
    font-family: "Bebas Neue", "Barlow", "Segoe UI", system-ui, sans-serif;
    font-weight: 400;
    font-size: 2rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.container { max-width: 980px; margin: 0 auto; padding: 2rem 1.5rem 3rem; }
/* Φαρδαίνουμε το container μόνο στις σελίδες με το εβδομαδιαίο ημερολόγιο
   (.calendar), ώστε οι κάρτες ημέρας (στήλες grid μέσα στο container) να
   γίνουν πιο φαρδιές — οι υπόλοιπες σελίδες (login, πίνακας) μένουν στο
   κανονικό 980px. */
.container:has(.calendar) { max-width: 1300px; }
/* Φαρδαίνουμε επίσης το container στον πίνακα του coach, ώστε τα κουμπιά
   ενεργειών (Πρόγραμμα, Αποτελέσματα, Personal Records, Link, Διαγραφή) να
   χωράνε όλα σε μία γραμμή χωρίς οριζόντιο scroll. Στοχεύουμε το
   .athletes-section (η ίδια η κάρτα "Αθλητές", πάντα υπάρχει) αντί για το
   .table-scroll (μέσα στον πίνακα) — αλλιώς το container μίκραινε αν δεν
   υπήρχε κανένας αθλητής ακόμα, αφού τότε δεν αποδίδεται καθόλου πίνακας.
   Ένα σταθερό max-width (π.χ. 1200px) ξέμεινε πίσω από το πόσο φάρδυνε ο
   πίνακας μετά το "χωρίς αναδίπλωση" στα td (βλ. .athletes-section td
   παρακάτω) — όσο κι αν μεγαλώναμε τον αριθμό, κάποιο ακόμα μεγαλύτερο
   όνομα/email θα τον ξεπερνούσε πάλι. Το "width: fit-content" λύνει αυτό
   γενικά: το container γίνεται όσο φαρδύ χρειάζεται ο πίνακας (το
   πλατύτερο παιδί του, χάρη στο nowrap) ΑΛΛΑ ποτέ φαρδύτερο απ' όσο
   χωράει το παράθυρο (max-width: 100% του body) — οπότε η εσωτερική
   .table-scroll μπαίνει σε λειτουργία μόνο όταν γνήσια δεν χωράει στην
   οθόνη, αντί να εμφανίζεται πάντα επειδή το container ήταν τεχνητά πιο
   στενό απ' όσο επέτρεπε το παράθυρο. */
.container:has(.athletes-section) { width: fit-content; max-width: 100%; }
/* Και στις σελίδες "Καταγραφή"/"Ιστορικό" (coach_log.html, athlete_log.html)
   — ο πίνακας έχει πολλές στήλες με πολύ κείμενο, χρειάζεται παραπάνω χώρο.
   Στοχεύουμε το .log-filters (πάντα υπάρχει, στη φόρμα φίλτρων) αντί για
   κάτι μέσα στον ίδιο τον πίνακα (π.χ. .log-comments) — αλλιώς το container
   μίκραινε ξαφνικά όποτε το επιλεγμένο φίλτρο δεν είχε αποτελέσματα, αφού
   τότε ο πίνακας δεν αποδίδεται καθόλου. */
.container:has(.log-filters) { max-width: 1300px; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
    animation: fadeInUp 0.4s ease both;
}
.card.highlight { border: 1px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }

label { display: block; margin-bottom: 0.9rem; font-size: 0.88rem; color: var(--muted); font-weight: 500; }
input, textarea, button { font: inherit; }

input[type=email], input[type=password], input[type=text], input[type=date], textarea, select {
    width: 100%;
    padding: 0.55rem 0.7rem;
    margin-top: 0.3rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fbfbfb;
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* "Εμφάνιση/Απόκρυψη κωδικού": πεδίο password με κουμπί-κείμενο μέσα στο πλαίσιο. */
.password-field { position: relative; }
.password-field input { padding-right: 5.5rem; }
.toggle-password {
    position: absolute;
    right: 0.3rem;
    top: 50%;
    transform: translateY(calc(-50% + 0.15rem));
    background: none;
    border: none;
    box-shadow: none;
    padding: 0.3rem 0.5rem;
    font-size: 0.78rem;
    line-height: 1;
    color: var(--muted);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
    cursor: pointer;
}
.toggle-password:hover { background: none; box-shadow: none; transform: translateY(calc(-50% + 0.15rem)); color: var(--ink); }
input::placeholder, textarea::placeholder { color: #9a9a9d; }

/* Κουμπιά: συμπαγές σκούρο φόντο, ΚΕΦΑΛΑΙΑ με απόσταση γραμμάτων, ελάχιστη στρογγυλότητα */
button {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
button:hover { background: var(--primary-dark); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18); transform: translateY(-1px); }
button:active { transform: translateY(1px); }

.inline-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.inline-form input { width: auto; flex: 1; min-width: 150px; }

table { width: 100%; border-collapse: collapse; }
th {
    text-align: left;
    padding: 0.5rem 0.5rem 0.75rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}
td { text-align: left; padding: 0.85rem 0.5rem; border-bottom: 1px solid var(--border); }
/* Πίνακας Προπονητή (dashboard_coach.html) και Καταγραφή (coach_log.html):
   τα κελιά δεν έκοβαν/τύλιγαν πια σωστά τις μεγαλύτερες εγγραφές (μεγάλο
   email, μακρύ σχόλιο) — ο coach ζήτησε να μεγαλώνουν όσο χρειάζεται ώστε
   να χωράει η μεγαλύτερη εγγραφή σε μία γραμμή, αντί να τυλίγεται σε πολλές
   μέσα σε στενό κελί. white-space: nowrap αφήνει το table auto-layout να
   πλατύνει τη στήλη όσο χρειάζεται· το γονικό .table-scroll /
   overflow-x: auto (ήδη υπάρχει σε αυτές τις δύο σελίδες) καλύπτει την
   περίπτωση που ο πίνακας γίνει πλατύτερος από το viewport. */
.athletes-section td,
.log-exercises,
.log-comments { white-space: nowrap; }
td.log-comments { min-width: 200px; }
td.log-exercises { min-width: 160px; }
/* Ο τίτλος άσκησης στο "Καταγραφή" ανοίγει pop-up με όλη την άσκηση
   (βλ. showLogExerciseDialog στο coach_log.html) — μοιάζει με απλό link,
   ίδιο ύφος με τα .actions a, όχι σαν συμπαγές κουμπί. */
.log-exercise-title {
    background: none;
    color: var(--ink);
    border: none;
    box-shadow: none;
    padding: 0;
    font-weight: 700;
    font-size: 0.88rem;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    text-align: left;
}
.log-exercise-title:hover { background: none; box-shadow: none; transform: none; color: var(--accent-dark); text-decoration: underline; }
/* Φίλτρα "Ημερομηνία"/"Άσκηση" στο /athlete/log: ίδιο ύψος στα δύο πλαίσια
   (native date/select inputs μπορεί να αποδοθούν με ελαφρώς διαφορετικό
   ύψος από τον browser παρόλο το ίδιο padding), και το κουμπί × καθαρισμού
   ίδιου ύψους με το διπλανό πλαίσιο αντί για το μικρό δικό του ύψος. */
.log-filter-control { height: 2.6rem; box-sizing: border-box; }
.log-filter-clear { height: 2.6rem; box-sizing: border-box; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.15s ease; }
tbody tr:hover { background: #fafafa; }
.actions { display: flex; gap: 1rem; align-items: center; flex-wrap: nowrap; }
.table-scroll { overflow-x: auto; }
.actions a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; }
.actions a:hover { color: var(--accent-dark); }
.actions form { display: inline; }
.actions button { padding: 0.4rem 0.85rem; font-size: 0.78rem; }
.actions button.danger-button { background: var(--danger); }
.actions button.danger-button:hover { background: #8f0000; }
.actions button.link-button {
    background: none;
    color: var(--ink);
    border: none;
    box-shadow: none;
    padding: 0;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
}
.actions button.link-button:hover { background: none; box-shadow: none; transform: none; color: var(--accent-dark); }

.error {
    color: var(--danger);
    background: #fdf0f0;
    border: 1px solid #f3caca;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}
.hint { color: var(--muted); font-size: 0.88rem; margin-top: -0.3rem; }
.success {
    color: var(--success);
    background: var(--success-soft);
    border: 1px solid var(--success);
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.link-box {
    display: block;
    word-break: break-all;
    background: var(--accent-soft);
    color: var(--accent-dark);
    padding: 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
}
.link-box-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.link-box-row .link-box { flex: 1; min-width: 200px; }
.copy-link-button { padding: 0.6rem 1rem; white-space: nowrap; }

a.button {
    display: inline-block;
    background: var(--primary);
    color: #fff !important;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-sm);
    text-decoration: none !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
}
a.button:hover { background: var(--primary-dark); }

/* Το ημερολόγιο (<input type=date>) για επιλογή εβδομάδας, πάνω από το
   .calendar — συμπαγές πλάτος αντί για το προεπιλεγμένο 100% των πεδίων. */
.week-picker { margin-bottom: 1rem; }
/* Μόνο στο πρόγραμμα του coach: το "Αποθήκευση προγράμματος" κάθεται στην
   ίδια γραμμή με την Ημερομηνία, σπρωγμένο τέρμα δεξιά (justify-content:
   space-between), αντί για το κάτω μέρος της σελίδας — το κουμπί ανήκει στη
   δεύτερη φόρμα (.calendar, id="program-form") μέσω του attribute
   form="program-form" στο <button>, παρόλο που κάθεται οπτικά μέσα στην
   πρώτη (του date-picker). */
.week-picker-spread { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.week-picker-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.save-program-button { border: 1px solid #fff; }
.week-picker label { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0; }
.week-picker input[type=date] {
    width: auto;
    margin-top: 0;
    /* Ρητή γραμματοσειρά (όχι μόνο το γενικό font: inherit) — ο browser
       μερικές φορές αγνοεί την κληρονομημένη γραμματοσειρά στο εσωτερικό
       κείμενο (μέρα/μήνας/χρόνος) ενός native <input type=date>. Το ίδιο το
       popup ημερολόγιο παραμένει στοιχείο του λειτουργικού συστήματος και
       δεν επηρεάζεται — μόνο το ορατό πεδίο. */
    font-family: "Barlow", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
/* Πεδίο "Εβδομάδα N" (program_edit.html) — ΕΝΑ ενιαίο κουτί (όπως το πλαίσιο
   της Ημερομηνίας): η λέξη "Εβδομάδα" σταθερή μέσα του, το <input> δίπλα της
   χωρίς δικό του περίγραμμα/φόντο, ώστε να μοιάζει με ένα πεδίο κι όχι δύο —
   χρυσό φόντο/μαύρα γράμματα, ίδιο ύφος με τα .tag/.week-picker-label. */
.week-number-field {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 0.35rem;
    padding: 0 0.7rem;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--ink);
    font-family: "Barlow", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
.week-number-field:focus-within {
    box-shadow: 0 0 0 3px rgba(23, 23, 23, 0.3);
}
.week-number-input {
    display: inline-block;
    width: 2.2rem;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1;
    font-weight: 700;
    padding: 0;
    text-align: center;
    -webkit-appearance: textfield;
    appearance: textfield;
}
.week-number-input:focus { outline: none; }
.week-number-prefix {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.85rem;
    line-height: 1;
    white-space: nowrap;
    /* Κλικ εδώ επαναφέρει όλη την εβδομάδα αν ήταν φιλτραρισμένη σε μία
       μέρα (βλ. resetDayFilter στο base.html) — cursor pointer για να
       φαίνεται ότι είναι κλικάρισμα, όχι απλό label text. */
    cursor: pointer;
}
/* Γενικό πρόγραμμα του coach (program_edit.html, athlete_id=0): δεν
   υπάρχει "Εβδομάδα 1" αφετηρία, άρα ούτε αριθμός να δειχτεί — μόνο το
   ίδιο χρυσό κουτί με σκέτη τη λέξη "Εβδομάδα" (+ το εύρος ημερομηνιών,
   βλ. .week-range-display παρακάτω), για οπτική συνέπεια με τις σελίδες
   ανά αθλητή. Αυτή η σελίδα δεν έχει day-number-picker (είναι η φόρμα
   επεξεργασίας, όχι read-only προβολή), άρα το κλικ στο "Εβδομάδα" δεν
   κάνει τίποτα εδώ — χωρίς το cursor: pointer του .week-number-prefix.
   (Το read-only "Γενικό πρόγραμμα" του αθλητή ΕΧΕΙ day-number-picker, βλ.
   athlete_view_global.html, άρα εκεί χρησιμοποιείται το απλό
   .week-number-field, με κανονικό, λειτουργικό cursor: pointer.) */
.week-number-field-static .week-number-prefix {
    cursor: default;
}
/* Το πραγματικό εύρος ημερομηνιών της εβδομάδας (π.χ. "05/10 - 11/10
   (2026)"), δίπλα στον αριθμό "Εβδομάδα N" — ο αριθμός είναι σχετικός
   (εξαρτάται από το πότε όρισε ο coach "Εβδομάδα 1" για τον αθλητή), οπότε
   αυτό δείχνει πάντα σε ποιες πραγματικές ημερομηνίες αντιστοιχεί. */
.week-range-display {
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
    opacity: 0.8;
    border-left: 1px solid rgba(23, 23, 23, 0.25);
    padding-left: 0.5rem;
    margin-left: 0.15rem;
}
/* Ίδιο ύψος σε όλα τα κουτάκια/κουμπιά της γραμμής (ημερολόγιο, "Εβδομάδα
   N", κουτάκια ημέρας, PR, Γενικό πρόγραμμα, Αποθήκευση...) — διαφορετικά
   στοιχεία (label/div/input/button/a) με διαφορετικό padding/font-size το
   καθένα, οπότε ρητό ύψος + κεντράρισμα περιεχομένου αντί να αφήνουμε τον
   καθένα να πάρει το δικό του φυσικό ύψος. Το vertical-align: middle είναι
   εξίσου απαραίτητο με το ίδιο ύψος: χωρίς αυτό, σε σελίδες όπου αυτά τα
   στοιχεία κάθονται σε απλή inline ροή αντί για flex row (π.χ. το γυμνό
   .week-picker <form> στο dashboard_athlete.html/athlete_view_global.html,
   σε αντίθεση με το .week-picker-left που είναι ήδη flex), ο browser τα
   ευθυγραμμίζει εξ ορισμού στο δικό του baseline του καθενός — που διαφέρει
   ανά τύπο στοιχείου ακόμα κι όταν όλα έχουν το ίδιο ύψος. */
.week-picker .week-picker-label-plain,
.week-picker input[type=date],
.week-picker .week-number-field,
.week-picker .day-number-picker,
.week-picker .gold-accent-button,
.week-picker .add-exercise,
.week-picker .save-program-button {
    height: 2.6rem;
    box-sizing: border-box;
    vertical-align: middle;
}
.week-picker .week-picker-label-plain,
.week-picker .gold-accent-button,
.week-picker .add-exercise,
.week-picker .save-program-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Ετικέτα "Ημερομηνία" δίπλα στο ημερολόγιο — χρυσό φόντο, μαύρα γράμματα,
   ίδιο ύφος με τα .tag. */
.week-picker-label {
    display: inline-block;
    background: var(--accent);
    color: var(--ink);
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.85rem;
}
/* Στο πρόγραμμα (program_edit.html): σκέτο άσπρο φόντο, μαύρα γράμματα —
   ίδιο padding/border/μέγεθος με το διπλανό πεδίο ημερομηνίας ώστε τα δύο
   πλαίσια να ταιριάζουν. */
.week-picker-label-plain {
    background: #fff;
    color: var(--ink);
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    font-size: 1rem;
}
/* Κουμπιά "PR"/"Γενικό πρόγραμμα" στο dashboard του αθλητή — μαύρο φόντο
   (ίδιο με τα κανονικά button/a.button), χρυσά γράμματα αντί για άσπρα, και
   μια λεπτή άσπρη γραμμή γύρω-γύρω. */
.gold-accent-button, a.gold-accent-button {
    color: var(--accent) !important;
    border: 1px solid #fff;
    /* Το "Personal Records" είναι <button> (padding/font-size από το
       γενικό button{}) και το "Γενικό πρόγραμμα" είναι <a class="button">
       (δικό του, ελαφρώς διαφορετικό padding/font-size από το a.button) —
       ενιαίο padding/font εδώ τα κάνει πανομοιότυπα, χωρίς min-width (αυτό
       ανάγκαζε τη γραμμή να σπάει σε 2 σε στενότερες οθόνες, μετατοπίζοντας
       το ημερολόγιο από κάτω). */
    padding: 0.65rem 1.25rem;
    font-family: "Barlow", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.gold-accent-button:hover, a.gold-accent-button:hover {
    color: var(--accent) !important;
}

/* 4 μέρες ανά γραμμή (4+3 για τις 7 μέρες), εκτός από πολύ στενές
   οθόνες κινητού όπου πέφτει σε 2 ανά γραμμή. */
.calendar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: stretch;
}
@media (max-width: 560px) {
    .calendar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Όταν ένα από τα 7 κουτάκια ημέρας (.day-number-btn) απομονώνει μία μέρα
   (βλ. resetDayFilter/single-day-view στο base.html), η μοναδική ορατή
   .day-card δεν πρέπει να μένει στο στενό πλάτος του 4-ανά-γραμμή πλέγματος
   — μία στήλη, μεγαλύτερη γραμματοσειρά για να διαβάζεται άνετα η προπόνηση
   της μέρας. Το max-width (πόσο φαρδιά γίνεται η κάρτα) ΔΕΝ ορίζεται εδώ —
   το .calendar είναι block-level, άρα θα έπαιρνε πάντα όλο το πλάτος του
   .container ακόμα κι αν τα κουτάκια/ημερομηνία της γραμμής .week-picker από
   πάνω του δεν το γεμίζουν (σε φαρδιά οθόνη μένουν αριστερά, με κενό δεξιά).
   Το syncSingleDayWidth() στο base.html μετράει το πραγματικό πλάτος που
   πιάνουν εκείνα τα στοιχεία και το επιβάλλει εδώ σαν inline max-width, ώστε
   η κάρτα να μην ξεπερνάει οπτικά τη γραμμή από πάνω της σε καμία ανάλυση. */
.calendar.single-day-view {
    grid-template-columns: 1fr;
}
.calendar.single-day-view .day-card {
    min-height: 0;
    padding: 1.5rem;
    font-size: 1.08rem;
}
.calendar.single-day-view .day-card h3 { font-size: 1rem; }

/* 7 μικρά τετράγωνα κουμπιά (ένα ανά μέρα, ο αριθμός της ημερομηνίας με
   μηδενικό padding — βλ. strftime('%d') στα templates) μέσα στη γραμμή του
   week-picker, δίπλα στο πεδίο "Εβδομάδα" — κλικ σε ένα απομονώνει (δείχνει
   μόνο) την αντίστοιχη .day-card, ξανά κλικ στο ίδιο επαναφέρει όλη την
   εβδομάδα (βλ. το delegated click handler στο base.html). Μόνο στις
   read-only προβολές (dashboard αθλητή, WODs coach) — όχι στο πρόγραμμα του
   coach. display: inline-flex (όχι flex) ώστε να κάθεται ΔΙΠΛΑ στα άλλα
   πεδία της ίδιας γραμμής είτε μέσα σε flex container (.week-picker-left,
   coach) είτε στην απλή inline ροή του .week-picker (dashboard αθλητή). */
.day-number-picker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.day-number-btn {
    width: 2.6rem;
    height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.day-number-btn:hover { opacity: 0.8; }
.day-number-btn.active {
    background: var(--primary);
    color: #fff;
    opacity: 1;
}
.day-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    animation: fadeInUp 0.4s ease both;
    animation-delay: calc(var(--i, 0) * 60ms);
}
.day-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
/* Χρυσή "κορδέλα" τίτλου ανά μέρα, όπως τα προγράμματα προπόνησης
   (CrossFit-style "DAY N" κάρτες) που μας έδειξε ο coach. */
.day-card h3 {
    margin: -1rem -1rem 0.75rem;
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--accent);
    color: var(--ink);
    border-radius: var(--radius) var(--radius) 0 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.day-card textarea { width: 100%; resize: vertical; }
.calendar-actions { grid-column: 1 / -1; margin-top: 0.25rem; }

.view-only .day-card pre {
    white-space: pre-wrap;
    font-family: inherit;
    margin: 0;
}
/* Προσωπικό πρόγραμμα = μαύρη γραμμή/ετικέτα, Γενικό πρόγραμμα = χρυσή γραμμή/ετικέτα. */
.day-card.personal { border-top: 3px solid var(--ink); }
.day-card.global { border-top: 3px solid var(--accent); }
.day-card.none { opacity: 0.55; }
/* Διπλή κλάση (.day-card.day-card-hidden) επίτηδες, όχι μόνο .day-card-hidden:
   ίδια ειδικότητα (specificity) με το .day-card από πάνω θα σήμαινε ότι το
   "display: flex" εκεί κερδίζει απλώς επειδή είναι γραμμένο πιο κάτω στο
   αρχείο — ό,τι κι αν αλλάξει η σειρά μελλοντικά, αυτό το κανόνα πρέπει να
   κερδίζει πάντα. */
.day-card.day-card-hidden { display: none; }

.day-card .exercise-rows,
.day-card .exercise-list {
    flex: 1;
    min-width: 0;
}
.day-card .empty {
    margin: auto 0;
    width: 100%;
    text-align: center;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.9rem;
}
.day-card .tag { margin-top: auto; align-self: flex-start; }
.day-card .add-exercise { margin-top: auto; }
/* Το ίδιο σχόλιο σε προβολή μόνο-ανάγνωσης (dashboard αθλητή / WODs coach). */
.day-comment-note {
    margin: 0 0 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed var(--border);
    font-size: 0.85rem;
    font-style: italic;
    color: var(--muted);
    white-space: pre-line;
}
/* Στη σελίδα WODs του coach το σχόλιο πάει τέρμα κάτω στην κάρτα αντί για
   πάνω (βλ. coach_view_performance.html) — γραμμή διαχωρισμού από πάνω,
   όχι από κάτω, και σπρώχνεται στο τέλος της flex στήλης της κάρτας. */
.day-comment-note.at-bottom {
    margin: auto 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px dashed var(--border);
    border-bottom: none;
}

.tag {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.22rem 0.6rem;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    color: var(--ink);
}
.day-card.global .tag { background: var(--accent-soft); color: var(--accent-dark); }

.empty { color: #9a9a9d; font-style: italic; font-size: 0.9rem; }

.wod-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}
.wod-item {
    background: #fbfbfb;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    animation: fadeInUp 0.4s ease both;
    animation-delay: calc(var(--i, 0) * 60ms);
}
.wod-item h3 { margin: 0 0 0.65rem 0; color: var(--ink); }
.wod-item label { margin-bottom: 0.6rem; }
.wod-item textarea { resize: vertical; }
.wod-item p { margin: 0.3rem 0; font-size: 0.92rem; }

.exercise-list {
    list-style: none;
    margin: 0 0 0.5rem 0;
    padding-left: 0;
}
/* Κάθε άσκηση/λίστα: μικρό τετράγωνο "checkbox" bullet + έντονος/κεφαλαίος
   τίτλος στην πρώτη γραμμή (::first-line πιάνει ακριβώς την πρώτη \n-γραμμή
   χάρη στο white-space: pre-line), και οι υπόλοιπες γραμμές (sets/reps/σχόλια)
   πιο ήπιες από κάτω — όπως τα "DAY N" προγράμματα του γυμναστηρίου. */
.exercise-list li {
    position: relative;
    padding: 0 0 0 1.7rem;
    /* Αρνητικά margin-top/bottom, όπως τα ρύθμισε ο coach δοκιμαστικά για
       το dashboard του αθλητή. */
    margin-top: -1rem;
    margin-bottom: -1.5rem;
}
.exercise-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 0.9em;
    height: 0.9em;
    border: 2px solid var(--accent);
    border-radius: 3px;
}
/* Το κείμενο της άσκησης είναι είτε απευθείας μέσα στο <li> (coach, μόνο για
   ανάγνωση) είτε μέσα σε .exercise-click <button> (αθλητής, κλικάρεται) —
   και τα δύο παίρνουν το ίδιο white-space/::first-line ύφος. */
/* line-height:1.5 (γενικό στο body) αφήνει ορατό κενό κάτω από την
   τελευταία γραμμή κειμένου μιας άσκησης, πριν τη διαχωριστική γραμμή της
   επόμενης — πιο σφιχτό εδώ ειδικά, χωρίς να πειράξει το line-height αλλού. */
.exercise-list li, .exercise-list .exercise-click { white-space: pre-line; line-height: 1.3; }
.exercise-list li::first-line, .exercise-list .exercise-click::first-line {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
.exercise-list li + li { border-top: 1px solid var(--accent); padding-top: 0; margin-top: -1rem; }
/* Στη σελίδα WODs του coach (.coach-wods) οι ίδιες αρνητικές τιμές έκαναν
   ορατή επικάλυψη σε ασκήσεις πολλών γραμμών (π.χ. 6+ σειρές sets/reps σε
   πραγματικά δεδομένα) — εκεί μόνο, πιο ήπια τιμή, ίση με το μισό-leading
   του line-height (1.3) που θέλαμε απλά να "φάει". Το dashboard του αθλητή
   ΔΕΝ επηρεάζεται από αυτό το override. */
.coach-wods .exercise-list li {
    margin-top: -0.15rem;
    margin-bottom: -0.15rem;
}
.coach-wods .exercise-list li + li {
    margin-top: -0.15rem;
}
/* Το ίδιο -0.15rem όπως στα li από πάνω — αλλιώς το .exercise-list (γραμμή
   372) κρατάει το γενικό margin-bottom:0.5rem, κι ο χώρος πριν την επόμενη
   διαχωριστική γραμμή (π.χ. .day-comment-note.at-bottom) βγαίνει πιο
   φαρδύς απ' όσο ανάμεσα σε δύο ασκήσεις. */
.coach-wods .exercise-list {
    margin-bottom: -0.15rem;
}
/* Όταν μια άσκηση έχει καταγεγραμμένο σχόλιο (.comment-preview), το επόμενο
   li δεν πρέπει να τραβηχτεί πάνω από την αρνητική τιμή margin-top όπως τα
   κανονικά διαδοχικά li — αλλιώς η διαχωριστική του γραμμή κολλάει πάνω στο
   σχόλιο. Ισχύει σε όλα τα .exercise-list (dashboard αθλητή με -1rem pull,
   σελίδα WODs του coach με -0.15rem pull) χωρίς να χρειάζεται να ξέρουμε
   ποια ακριβώς αρνητική τιμή είχε πριν — απλά μηδενίζουμε το pull εδώ.
   Πρέπει να μείνει ΜΕΤΑ τα παραπάνω overrides στο αρχείο για να κερδίζει σε
   ισοπαλία specificity. */
.exercise-list li:has(.comment-preview) + li { margin-top: 0.25rem; }

/* Όταν το <li> περιέχει κλικαρίσμενο button (dashboard αθλητή), το τετράγωνο
   bullet και το padding πάνε στο ίδιο το button αντί για το li — έτσι το
   τετράγωνο είναι ΜΕΣΑ στην περιοχή που κλικάρεται (τίτλος Ή τετράγωνο,
   ίδιο αποτέλεσμα: ανοίγει το popup), όχι απλά διακοσμητικό δίπλα του. */
.exercise-list li:has(.exercise-click) { padding-left: 0; }
.exercise-list li:has(.exercise-click)::before { display: none; }
/* Στη σελίδα WODs του coach (μόνο ανάγνωση), η ίδια .exercise-click κλάση
   ντύνει το κείμενο ίδια με του αθλητή, χωρίς να είναι κλικαρίσμενο. */
.exercise-click.exercise-static { cursor: default; }
.exercise-click.exercise-static:hover { color: inherit; }

.exercise-click {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0 0 0 1.7rem;
    margin: 0;
    font: inherit;
    color: inherit;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    cursor: pointer;
}
.exercise-click::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 0.9em;
    height: 0.9em;
    border: 2px solid var(--accent);
    border-radius: 3px;
}
.exercise-click:hover {
    background: none;
    box-shadow: none;
    transform: none;
    color: var(--accent-dark);
}

.comment-preview {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.78rem;
    color: var(--muted);
    font-style: italic;
    white-space: normal;
}

.comment-dialog {
    border: none;
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-hover);
    max-width: 420px;
    width: calc(100% - 2rem);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}
.comment-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
/* Το read-only PR popup του coach δεν έχει φόρμα με labels/inputs σαν τα
   άλλα .comment-dialog — μόνο λίγες κοντές γραμμές κειμένου, οπότε το
   πλάτος κολλάει στο περιεχόμενο αντί να παίρνει το γενικό 420px (που
   άφηνε άδειο χώρο σαν "μπάρα" αριστερά/δεξιά για τόσο λίγο κείμενο). */
/* "width: auto" δεν κάνει shrink-to-fit αξιόπιστα σε dialog σε όλους τους
   browsers (καταλήγει να γεμίζει όσο επιτρέπει το max-width) — το "fit-content"
   είναι η σωστή τιμή γι' αυτό (είναι κι η προεπιλογή του ίδιου του <dialog>). */
.pr-view-dialog { width: fit-content; max-width: calc(100vw - 2rem); }
.pr-view-dialog h3 { white-space: nowrap; }
/* Λίστα PR του coach (read-only): 3 στήλες αντί για μία μακριά λίστα από
   κάτω-προς-κάτω — βλ. showPrDialog στο dashboard_coach.html. */
#coach-pr-dialog-body {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 0.6rem 1.75rem;
}
#coach-pr-dialog-body p {
    margin: 0;
    white-space: nowrap;
    text-align: center;
    border: 1px solid var(--ink);
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
}
/* Λίστα PR του αθλητή (επεξεργάσιμη): 3 ζευγάρια label+input δίπλα-δίπλα σε
   κάθε γραμμή αντί για μία στήλη από πάνω-προς-κάτω — 6 grid columns
   (label/input × 3), οπότε κάθε 3 διαδοχικά ζευγάρια γεμίζουν μία "γραμμή"
   (βλ. #pr-dialog στο dashboard_athlete.html). Πλατύτερο dialog (βλ.
   #pr-dialog παρακάτω) για να χωράνε άνετα και τα 3 ζευγάρια. */
.pr-grid {
    display: grid;
    grid-template-columns: repeat(3, auto 1fr);
    align-items: center;
    gap: 0.6rem 0.75rem;
    margin-bottom: 1rem;
}
.pr-grid label { margin-bottom: 0; font-size: 0.88rem; }
.pr-grid input[type=text] { width: 100%; min-width: 70px; margin-top: 0; }
#pr-dialog { max-width: 640px; }
.comment-dialog form { position: relative; }
.comment-dialog h3 { margin: 0 0 0.4rem; padding-right: 1.5rem; text-transform: uppercase; letter-spacing: 0.02em; overflow-wrap: anywhere; }
/* overflow-wrap: anywhere — χωρίς αυτό, μία άσκηση γραμμένη από τον coach
   χωρίς κενά σε κάποιο σημείο (π.χ. "5x5x5x5x5kg" ή κολλημένοι αριθμοί)
   θα ανάγκαζε το dialog να φαρδύνει πέρα από την οθόνη σε κινητό αντί να
   σπάσει σε νέα γραμμή — το dialog έχει ήδη σωστό πλάτος (calc(100%-2rem)),
   το πρόβλημα είναι μόνο το ίδιο το κείμενο μέσα του. */
.dialog-details { margin: 0 0 1rem; color: var(--muted); font-size: 0.88rem; white-space: pre-line; overflow-wrap: anywhere; }
.dialog-close {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    background: none;
    border: none;
    box-shadow: none;
    color: var(--muted);
    font-size: 1.3rem;
    line-height: 1;
    padding: 0.3rem;
    cursor: pointer;
    font-weight: 400;
}
.dialog-close:hover { color: var(--ink); background: none; box-shadow: none; }

.exercise-rows { margin-bottom: 0.6rem; }
.exercise-row { margin-bottom: 0.45rem; }
/* Ίδιο layout με το κουτί προσθήκης (.bulk-add): ένα πεδίο τίτλου (με
   datalist προτάσεων PR_LIFTS — βλ. pr_lift στο models.py/
   _annotate_percentages στο main.py, και syncExercisePrLift στο
   program_edit.html) και οι οδηγίες από κάτω (.exercise-details) — μια ήδη
   καταγεγραμμένη άσκηση δείχνει ακριβώς όπως όταν την πρωτογράφεις. Το
   κουμπί κλειδώματος/επεξεργασίας (.exercise-lock-toggle) + το 'x'
   αφαίρεσης (.exercise-row-actions) πάνε μαζί από κάτω, σε όλο το πλάτος. */
.exercise-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; margin-bottom: 0.4rem; }
.exercise-title-input { margin-top: 0; font-weight: 800; }
/* Πεδίο "Είδος προπόνησης" (ελεύθερο κείμενο, με datalist προτάσεων:
   FOR TIME / AMRAP / FOR LOAD / EMOM) + πεδίο "Χρόνος" (επίσης ελεύθερο) —
   δική τους γραμμή, δίπλα-δίπλα, κάτω από τον τίτλο + PR dropdown. Δεν
   αποθηκεύονται ξεχωριστά· απλώς εισάγουν την επιλογή (π.χ. "FOR TIME 12'")
   σαν πρώτη γραμμή μέσα στις οδηγίες από κάτω (βλ. insertFormatLine στο
   program_edit.html). */
.format-time-row { display: flex; gap: 0.4rem; min-width: 0; }
.format-time-row .format-select { flex: 1; min-width: 0; margin-top: 0; }
.format-time-row .time-input { flex: 0 0 auto; width: auto; min-width: 0; max-width: 6rem; margin-top: 0; }
.exercise-details { width: 100%; resize: vertical; font-size: 0.9rem; margin-top: 0; }
.exercise-row-actions { display: flex; gap: 0.4rem; }
.exercise-row-actions button { flex: 1; }
.exercise-row + .exercise-row { border-top: 1px dashed var(--border); padding-top: 0.5rem; }
/* Μια ήδη καταγεγραμμένη άσκηση ανοίγει κλειδωμένη (ίδιο μοτίβο με
   .day-comment-add.locked textarea) — greyed out, χωρίς να πειράζεται η
   πραγματική τιμή — βλ. toggleExerciseLock. */
.exercise-row.locked .exercise-title-input,
.exercise-row.locked .exercise-details,
.exercise-row.locked .format-select,
.exercise-row.locked .time-input {
    background: #ececec;
    color: var(--muted);
    cursor: default;
}
.exercise-row.locked .exercise-details { resize: none; }
.remove-exercise {
    background: #eeeeee;
    color: var(--muted);
    padding: 0 0.7rem;
    line-height: 1;
    box-shadow: none;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}
.remove-exercise:hover { background: #e2e2e2; color: var(--ink); box-shadow: none; }
.add-exercise {
    background: none;
    color: var(--accent-dark);
    border: 1px dashed var(--accent);
    padding: 0.35rem 0.7rem;
    box-shadow: none;
    font-size: 0.82rem;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
}
.add-exercise:hover { background: var(--accent-soft); box-shadow: none; }
/* "Σετ N: [κιλά]" γραμμές στο dialog σκορ του αθλητή, για ασκήσεις FOR LOAD
   (βλ. addExerciseSetRow στο dashboard_athlete.html). */
#exercise-dialog-sets-wrap { margin: 0.75rem 0 1rem; }
.set-rows { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
.set-row { display: flex; align-items: center; gap: 0.5rem; }
.set-row-label {
    min-width: 4rem;
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fbfbfb;
}
/* min-width: 0 είναι απαραίτητο εδώ — χωρίς αυτό, ένα <input> μέσα σε flex
   row δεν συρρικνώνεται ποτέ κάτω από το δικό του προεπιλεγμένο πλάτος
   (~170-200px ανάλογα browser), οπότε σε στενό κινητό το .set-row (και άρα
   ολόκληρο το #exercise-dialog pop-up όταν ανοίγει μια άσκηση) ξεχείλιζε
   πλατύτερο από την οθόνη αντί να χωράει. */
.set-row-input { flex: 1; min-width: 0; margin-top: 0; }
.day-card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.bulk-add { margin-bottom: 0.6rem; }
/* Τίτλος με datalist προτάσεων PR_LIFTS — γράψε ελεύθερα ή διάλεξε μία,
   ό,τι προτιμάς (βλ. addBulkExercises στο program_edit.html). */
.bulk-add .bulk-title {
    margin-bottom: 0.4rem;
    font-weight: 800;
}
.bulk-add .format-time-row { margin-bottom: 0.4rem; }
.bulk-add textarea { resize: vertical; margin-bottom: 0.4rem; font-size: 0.9rem; }

/* Κουτί "+ Σχόλια" ανά μέρα — ίδιο μοτίβο toggle με το .bulk-add, πάντα
   τέρμα κάτω στην κάρτα (μετά τα .day-card-actions). Μόλις πατηθεί
   "Προσθήκη σχολίου" με κείμενο μέσα, "κλειδώνει" (readonly + πιο σκούρο
   φόντο) αντί να κρύβεται, ώστε να φαίνεται καθαρά ότι αποθηκεύτηκε. */
.day-comment-add { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--border); }
/* Το 'x' αφαίρεσης δίπλα στο σχόλιο — ίδιο layout με .exercise-row (πεδίο +
   .remove-exercise δίπλα-δίπλα). */
.day-comment-row { display: flex; gap: 0.4rem; min-width: 0; margin-bottom: 0.4rem; }
.day-comment-row textarea {
    flex: 1;
    min-width: 0;
    resize: vertical;
    margin-bottom: 0;
    font-size: 0.9rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.day-comment-add.locked textarea {
    background: #ececec;
    color: var(--muted);
    resize: none;
    cursor: default;
}

.toast {
    position: fixed;
    bottom: 1.75rem;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: var(--ink);
    color: #fff;
    padding: 0.7rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Σελίδες σύνδεσης (coach login, magic link): ίδιο φωτό φόντου με το
   υπόλοιπο site (κανόνας στο body, παραπάνω), αλλά με την κάρτα φόρμας
   κεντραρισμένη κάθετα/οριζόντια αντί για την κανονική top-aligned διάταξη. */
body.auth-page .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 64px);
    text-align: center;
}
body.auth-page .container > p { max-width: 420px; }
body.auth-page .card {
    text-align: left;
    width: 100%;
    max-width: 380px;
}
/* Το γενικό ".container > p { color: ... }" παραπάνω (για να διαβάζεται το
   κείμενο πάνω στη φωτογραφία φόντου) νικούσε το σκούρο κόκκινο χρώμα του
   .error λόγω μεγαλύτερης ειδικότητας (ίδιο class + child combinator) —
   αποτέλεσμα, σχεδόν άσπρο κείμενο πάνω σε ανοιχτό ροζ φόντο, αόρατο. Εδώ
   το ξαναδηλώνουμε με μεγαλύτερη ειδικότητα (δύο classes) ώστε να νικάει. */
body.auth-page .error {
    text-align: left;
    color: var(--danger);
    background: #fdf0f0;
    border: 1px solid #f3caca;
}

/* ===========================================================================
   Responsive (κινητό / στενό παράθυρο browser)
   Μέχρι εδώ το μόνο breakpoint ήταν το .calendar στα 560px — όλα τα άλλα
   (topbar, week-picker row, PR dialogs) είχαν σταθερά μεγέθη φτιαγμένα για
   desktop, οπότε "έσπαγαν" σε κινητό ή σε μικρυμένο παράθυρο. Οι αθλητές
   βλέπουν το πρόγραμμά τους σχεδόν αποκλειστικά από κινητό, οπότε αυτές οι
   σελίδες (dashboard αθλητή, WODs/πρόγραμμα coach) είναι η προτεραιότητα.
   =========================================================================== */
@media (max-width: 720px) {
    .container { padding: 1.25rem 1rem 2.5rem; }
    h1 { font-size: 1.35rem; }

    /* Το "SAM PERFORMANCE PROJECT" (Bebas Neue, 2rem) δεν χωράει σε στενή
       οθόνη δίπλα στο μενού — μικραίνει, και η γραμμή τυλίγει αν χρειαστεί. */
    .topbar { flex-wrap: wrap; row-gap: 0.4rem; padding: 0.5rem 1rem; }
    .brand { font-size: 1.3rem; letter-spacing: 0.02em; }
    .topbar nav a { font-size: 0.78rem; }

    /* Η γραμμή week-picker (ημερολόγιο/"Εβδομάδα N"/κουτάκια ημέρας/κουμπιά)
       στοιβάζεται σε στήλη αντί να στριμώχνεται/κόβεται οριζόντια — κάθε
       στοιχείο παίρνει όλο το πλάτος, πιο εύκολο target για δάχτυλο.
       .week-picker δεν ήταν ποτέ flex container (τα παιδιά του απλώς
       κάθονταν inline, με φυσικό κενό από το whitespace του HTML) — εδώ
       γίνεται, μόνο σε αυτό το breakpoint. Το flexbox αγνοεί εκείνο το
       whitespace-κενό, γι' αυτό χρειάζεται ρητό gap — αλλιώς τα κουτιά
       κάθονται κολλητά το ένα πάνω στο άλλο μόλις στοιβαχτούν κάθετα. */
    .week-picker,
    .week-picker-left,
    .week-picker-spread {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }
    .week-picker > *,
    .week-picker-left > *,
    .week-picker-spread > * {
        width: 100%;
    }

    /* Τα δύο PR grids (3 ζευγάρια/στήλες δίπλα-δίπλα στο desktop) έπεφταν σε
       1 στήλη μόνο κάτω από 480px — αλλά το dialog τους έχει ήδη περιοριστεί
       σε calc(100% - 2rem) πλάτος από εδώ (720px) και κάτω, οπότε 3 στενές
       στήλες εκεί στριμώχνονταν/ξεχείλιζαν το pop-up πριν προλάβει να πέσει
       σε 1 στήλη. Ίδιο breakpoint με το στοίβαγμα του week-picker παραπάνω. */
    .pr-grid { grid-template-columns: auto 1fr; }
    #coach-pr-dialog-body { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    /* 2 στήλες (όχι 4) ήδη από τα 560px· κάτω από 420px ούτε 2 δεν χωράνε
       άνετα με πραγματικό περιεχόμενο (λίστα ασκήσεων), οπότε 1 στήλη. */
    .calendar { grid-template-columns: 1fr; }

    /* Τα 7 τετραγωνάκια ημέρας λίγο πιο σφιχτά, ώστε να χωράνε σε μία
       γραμμή ακόμα και σε πολύ στενό κινητό (~320px πλάτος οθόνης). */
    .day-number-btn { width: 2.1rem; height: 2.1rem; font-size: 0.85rem; }
    .day-number-picker { gap: 0.3rem; }
}