/* Μόνιμη αριστερή στήλη σε οθόνη υπολογιστή -- εκεί ζει η εφαρμογή. Κάτω από
   900px γίνεται πάνω μπάρα: ένα σχέδιο, δύο μορφές, όχι δύο σχέδια. */
:root { --nav-w: 240px; --content-max: 1100px; }

.app-shell { display: grid; grid-template-columns: var(--nav-w) 1fr; min-height: 100vh; }
.app-nav { display: flex; flex-direction: column; gap: 1rem; padding: 1rem;
           border-right: 1px solid #dee2e6; background: #f8f9fa; }
.app-brand { font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.app-nav-foot { margin-top: auto; display: flex; flex-direction: column; gap: .25rem; }
.app-who { display: flex; flex-direction: column; font-weight: 600; }
.app-who small { font-weight: 400; color: #6c757d; }
.app-quiet { background: none; border: 0; padding: 0; text-align: left;
             color: #6c757d; font-size: .9rem; text-decoration: none; }
/* Τα στοιχεία grid έχουν min-width: auto και ΔΕΝ συρρικνώνονται: χωρίς αυτό,
   ένας πλατύς πίνακας σπρώχνει ολόκληρη τη σελίδα πλατύτερη από την οθόνη. */
.app-main { min-width: 0; padding: 1.5rem; max-width: var(--content-max); }
.app-plain { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.login-card { width: min(380px, 100%); }
.login-sub { color: #6c757d; margin-top: -.5rem; }
.ico { vertical-align: -.2em; }

/* Κουμπί που είναι μόνο εικονίδιο: κύκλος, ποτέ τετράγωνο. */
.btn-ico { width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 50%;
           display: inline-grid; place-items: center; }
/* Η μικρή εκδοχή, για μέσα σε badge: στα 2.25rem το ✕ είναι ψηλότερο από τη
   λέξη που ακυρώνει και τραβά το μάτι πριν από αυτήν. */
.btn-ico-sm { width: 1.4rem; height: 1.4rem; font-size: .7rem; line-height: 1; }

/* Η γραμμή του άρθρου, η ίδια που δείχνεται σε δύο σημεία (λίστα και άρθρο,
   έμμεσα μέσω back-link): εδώ μόνο ο δείκτης του list-group-item. */
.law-row { text-decoration: none; }

/* Δύο γραμμές αποσπάσματος και όχι μία: μία λέξη-κλειδί με πέντε λέξεις γύρω
   της δεν λέει τίποτα. */
.law-snippet {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Το κείμενο του άρθρου κρατά τις αλλαγές γραμμής της πηγής («1. … 2. …»)
   χωρίς <br>: pre-line σέβεται τα κενά αλλά τυλίγει κανονικά τις μεγάλες
   γραμμές. */
.law-body { white-space: pre-line; line-height: 1.6; }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-nav { flex-direction: row; align-items: center; flex-wrap: wrap;
             border-right: 0; border-bottom: 1px solid #dee2e6; }
  .app-nav .nav { flex-direction: row !important; flex-wrap: wrap; }
  .app-nav-foot { margin-top: 0; flex-direction: row; gap: .75rem; align-items: center; }
}

/* ── ΚΟΚ ─────────────────────────────────────────────────────────────────── */

/* Οι κάρτες-δρόμοι της αρχικής σελίδας (Άρθρα / Πινακίδες / Κυρώσεις): απλοί
   προορισμοί, όχι φίλτρα -- γι' αυτό κάρτες και όχι chips. */
.kok-way { text-decoration: none; color: inherit; }
.kok-way:hover, .kok-way:focus-within { border-color: #86b7fe; }

/* Το badge της κατηγορίας παράβασης. Το χρώμα ανήκει στο ΕΠΙΠΕΔΟ (Ε1 ως Ε4,
   Σ) και όχι στην υποκατηγορία: το Α και το Β διαφέρουν στο αν υπάρχει
   διοικητικό μέτρο, όχι στη βαρύτητα, και δύο σχεδόν ίδια χρώματα δεν λένε
   τίποτα από μακριά. Οι τιμές cat-e1..cat-s έρχονται από το
   services/kok.py category_class. */
.kok-cat-badge { font-variant-numeric: tabular-nums; }
.kok-cat-badge.cat-e1 { background: #8a95a3; color: #fff; }
.kok-cat-badge.cat-e2 { background: #4a90e2; color: #fff; }
.kok-cat-badge.cat-e3 { background: #c99320; color: #1b1b1b; }
.kok-cat-badge.cat-e4 { background: #c9524a; color: #fff; }
.kok-cat-badge.cat-s  { background: #9a6fb0; color: #fff; }

/* Οι παραπομπές μέσα στο κείμενο του νόμου (βλ. db/seed.py, kok_html):
   διακριτές αλλά όχι θορυβώδεις -- μια παράγραφος με έξι παραπομπές δεν
   πρέπει να γίνει αδιάβαστη από έξι συμπαγείς υπογραμμίσεις. */
.kok-ref { text-decoration: underline dotted; }
.kok-ref:hover, .kok-ref:focus-visible { text-decoration: underline solid; }

/* Η παράγραφος του άρθρου: ο αριθμός έντονος και σιωπηλός, ώστε το μάτι να
   βρίσκει την παράγραφο 9 χωρίς να διαβάσει τις οκτώ προηγούμενες. Το
   :target δείχνει ΠΟΙΑ παράγραφο ή παράβαση έφερε εδώ ένας σύνδεσμος. */
.kok-par { margin-bottom: .75rem; line-height: 1.6; }
.kok-par-num { font-weight: 600; color: #6c757d; }
.kok-par, .kok-violation, .kok-recidivism { scroll-margin-top: 1rem; }
.kok-par:target, .kok-violation:target, .kok-recidivism:target {
  outline: 2px solid #0d6efd; outline-offset: 4px;
}

.kok-source {
  border-left: 3px solid #dee2e6; padding-left: .6rem; margin: 0;
  color: #6c757d; font-size: .9em; white-space: pre-line;
}

/* Το πλέγμα των πινακίδων: auto-fill ώστε να χωρούν τρεις στα 390px και
   περισσότερες σε τάμπλετ, χωρίς media query. Το min-width: 0 στα κελιά
   είναι εκεί επειδή τα στοιχεία grid έχουν min-width: auto και ΔΕΝ
   συρρικνώνονται -- χωρίς αυτό η σελίδα κυλά οριζόντια. */
.kok-sign-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.kok-sign-cell { min-width: 0; }
.kok-sign-cell > a {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  height: 100%; padding: .4rem;
  border: 1px solid #dee2e6; border-radius: .5rem;
  text-decoration: none; color: inherit;
}
.kok-sign-cell > a:hover, .kok-sign-cell > a:focus-visible { border-color: #86b7fe; }
.kok-sign-cell img { width: 72px; height: 72px; object-fit: contain; }
.kok-sign-cell b { font-size: .8rem; }

/* Δύο γραμμές τίτλου και μετά αποσιωπητικά: ο πλήρης τίτλος φτάνει τους 1.279
   χαρακτήρες. Ολόκληρος είναι ένα πάτημα μακριά, στη σελίδα της πινακίδας. */
.kok-sign-title {
  font-size: .72rem; line-height: 1.2; color: #6c757d; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.kok-sign-sheet { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.kok-sign-sheet img { width: 100%; max-width: 240px; height: auto; object-fit: contain; }
.kok-sign-sheet-title { white-space: pre-line; line-height: 1.6; }

/* Ο scroller του πίνακα γίνεται μπλοκ τοποθέτησης για ό,τι ζει μέσα του.
   Χωρίς αυτό, ένα absolute παιδί -- π.χ. το .visually-hidden της Bootstrap σε
   κεφαλίδα στήλης χωρίς ορατό τίτλο -- τοποθετείται ως προς τη ΣΕΛΙΔΑ, βγαίνει
   έξω από το κλιπ του scroller, και μεγαλώνει το έγγραφο: στα 390px η σελίδα
   των αποτελεσμάτων κυλούσε οριζόντια 200px, ενώ ο πίνακας φαινόταν μια χαρά.
   Το σφάλμα δεν έδειχνε πουθενά αλλού -- φαινόταν μόνο ως μπάρα κύλισης. */
.table-responsive { position: relative; }

/* Οι πίνακες των κυρώσεων: το table-responsive του Bootstrap δίνει το
   πλευρικό κύλισμα -- στα 390px τέσσερις στήλες δεν χωρούν, και ο πίνακας
   πρέπει να κυλά χωρίς να κυλά η σελίδα. */
.kok-table { margin: 0; font-size: .9rem; }
.kok-table th { white-space: nowrap; font-weight: 600; }
.kok-table-note td { color: #6c757d; font-size: .85em; padding-top: 0; border-top: 0; }
.kok-table tr[id^="cat-"] { scroll-margin-top: 1rem; }

/* ── Ο επεξεργαστής τεστ ──────────────────────────────────────────────────── */

/* Ο αριθμός της ερώτησης ως δείκτης και όχι ως μέρος του κειμένου: όταν μια
   ερώτηση μετακινηθεί, αυτό που αλλάζει είναι ο δείκτης -- και φαίνεται. */
.q-num {
  flex: 0 0 auto; width: 1.9rem; height: 1.9rem;
  display: inline-grid; place-items: center;
  border-radius: 50%; background: #e9ecef;
  font-weight: 600; font-size: .85rem;
}

/* min-width: 0 στη στήλη του κειμένου: χωρίς αυτό μια μεγάλη εκφώνηση χωρίς
   κενά σπρώχνει τα κουμπιά έξω από την κάρτα. */
.q-card .min-w-0 { min-width: 0; }
.q-prompt { white-space: pre-line; }

.q-choices { list-style: none; margin: .25rem 0 0; padding: 0; font-size: .92rem; }
.q-choices li { color: #6c757d; }
.q-choices .q-correct { color: #198754; font-weight: 600; }

/* Η λίστα αποτελεσμάτων της αναζήτησης άρθρου μέσα στο modal: ποτέ πάνω από
   τη μισή οθόνη, αλλιώς το κουμπί «Προσθήκη» φεύγει κάτω από το κάδρο. */
#articleResults { max-height: 40vh; overflow-y: auto; }
#articleResults:empty { display: none; }

/* ── Λίστες επιλογής μαθητών ──────────────────────────────────────────────── */

/* Η δεξαμενή μαθητών στα τμήματα και στην ανάθεση. Χωρίς κουκκίδες: κάθε
   γραμμή έχει ήδη το δικό της checkbox, και δύο δείκτες δίπλα-δίπλα είναι ένας
   παραπάνω. */
.groups-pool { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }

/* ── Η σελίδα εξέτασης ────────────────────────────────────────────────────── */

/* Η μπάρα μένει καρφωμένη: ο τίτλος, το χρονόμετρο και η παράδοση πρέπει να
   είναι ορατά και στη δωδέκατη ερώτηση, χωρίς κύλιση προς τα πάνω. */
.take-bar {
  position: sticky; top: 0; z-index: 3;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  background: #fff; padding: .75rem 0; margin-bottom: 1rem;
  border-bottom: 1px solid #dee2e6;
}
.take-bar .btn { margin-left: auto; }

/* Μονόχωρη γραμματοσειρά ώστε οι αριθμοί να μην χοροπηδούν κάθε δευτερόλεπτο. */
.take-timer {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.25rem; font-variant-numeric: tabular-nums;
}
.take-timer.is-urgent { color: #b02a37; font-weight: 700; }

.take-grid { display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; }
.take-main { min-width: 0; }

.take-nav {
  display: grid; grid-template-columns: repeat(5, 2.25rem); gap: .35rem;
  list-style: none; padding: 0; margin: 0;
  /* align-content: start, αλλιώς οι γραμμές του πλέγματος μοιράζονται όλο το
     ύψος της στήλης -- το στοιχείο grid τεντώνεται όσο η διπλανή ερώτηση, και
     οι δύο σειρές αριθμών χωρίζονται από ένα κενό μισής οθόνης. */
  align-content: start;
}
/* Το πλέγμα των αριθμών λέει τρία πράγματα με μια ματιά: πού είμαι, τι έχω
   απαντήσει, τι μου μένει. Το πράσινο είναι «απαντημένη», όχι «σωστή» -- ο
   μαθητής δεν μαθαίνει τίποτα για τη σωστή απάντηση πριν παραδώσει. */
.take-num {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid #dee2e6; text-decoration: none; color: inherit;
  font-size: .85rem;
}
.take-num.is-done { background: #d1e7dd; border-color: #a3cfbb; }
.take-num.is-current { border-color: #0d6efd; border-width: 2px; font-weight: 700; }

.take-prompt { font-size: 1.1rem; white-space: pre-line; }
.take-choice { padding: .35rem 0 .35rem 1.75rem; }
.take-text { min-height: 12rem; }
.take-foot {
  display: flex; justify-content: flex-end; gap: .75rem; align-items: center;
  margin-top: 1rem;
}
.take-saved { color: #6c757d; font-size: .85rem; margin-right: auto; }

/* Οι κάρτες της λίστας του μαθητή και η απάντησή του στην ανασκόπηση. */
.attempt-facts {
  list-style: none; margin: .5rem 0 0; padding: 0;
  color: #6c757d; font-size: .9rem;
}
.attempt-answer {
  background: #f8f9fa; border: 1px solid #dee2e6; border-radius: .375rem;
  padding: .75rem;
}
.q-choices .q-chosen-wrong { color: #b02a37; font-weight: 600; }

@media (max-width: 900px) {
  /* Στο κινητό οι αριθμοί γίνονται οριζόντια λωρίδα: μια στήλη 200px δίπλα στο
     κείμενο θα άφηνε στην ερώτηση λιγότερο πλάτος από όσο θέλει να διαβαστεί. */
  .take-grid { grid-template-columns: 1fr; }
  .take-nav { grid-auto-flow: column; grid-template-columns: none;
              overflow-x: auto; padding-bottom: .35rem; }
}

/* Σε οθόνη αφής το δάχτυλο δεν έχει την ακρίβεια του δείκτη: κάτω από 40px ο
   χρήστης αστοχεί και πατά τον γείτονα. Η μέτρηση στα 390px τα βρήκε 36 και 22.
   Στο τέλος του αρχείου και όχι δίπλα στους ορισμούς: ίδια ειδικότητα, οπότε
   αυτό που μετράει είναι η σειρά. */
@media (pointer: coarse) {
  .btn-ico { width: 2.5rem; height: 2.5rem; }
  /* Οι αριθμοί του τεστ είναι σύνδεσμοι, όχι σήμανση: με το δάχτυλο στα 36px
     ο μαθητής ανοίγει την 4η ενώ πάτησε την 3η. Η λωρίδα κυλά ήδη οριζόντια,
     οπότε ο χώρος υπάρχει. */
  .take-num { width: 2.5rem; height: 2.5rem; }
  /* Το μικρό μένει μικρό ΟΠΤΙΚΑ -- το ✕ μέσα σε badge δεν επιτρέπεται να
     σκεπάσει τη λέξη που ακυρώνει. Μεγαλώνει μόνο η περιοχή αφής, με
     ψευδοστοιχείο που δεν πιάνει χώρο στη ροή. */
  .btn-ico-sm { width: 1.4rem; height: 1.4rem; position: relative; }
  .btn-ico-sm::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 2.5rem; height: 2.5rem; transform: translate(-50%, -50%);
  }
}