/* ΠΑΡΑΓΟΜΕΝΟ ΑΡΧΕΙΟ — μην το επεξεργαστείς στο χέρι.
 * scripts/build_dashboard_runtime.py, από το
 * data/ui-contracts/dashboard-pentagon-design.v1.json
 *
 * Η όψη που ενέκρινε ο ιδιοκτήτης στις 2026-09-16, δεκαπέντε φορές.
 * Κάθε χρώμα, πάχος και κενό ΜΕΤΡΗΘΗΚΕ από τη δική του εικόνα. */

.cpms-dashboard-pentagon[data-cpms-dp-on] {
  position: relative;
  /* Η σκηνή βγαίνει από το ΥΨΟΣ του κάδρου. Σταθερό μέγεθος σήμαινε ότι στα
   * 1280x720 το πεντάγωνο κρεμόταν 359px κάτω από το κάδρο και ο πιλότος
   * κυλούσε για να δει τις μισές του επιλογές.
   *
   * Ο τρίτος όρος είναι το ΧΡΩΜΙΟ ΠΑΝΩ ΑΠΟ ΤΗ ΣΚΗΝΗ, μετρημένο σε πραγματικό
   * browser: 227px στα 1920x1080 και 319px στα 1280x720 — μεγαλώνει όταν η
   * κεφαλίδα τυλίγεται. Με 345px το πεντάγωνο χωράει ΟΛΟΚΛΗΡΟ και στα δύο
   * υποχρεωτικά μεγέθη, χωρίς καμία κύλιση. */
  /* ΚΑΜΒΑΣ: ποτέ vh — η τιμή είναι ποσοστό ΤΟΥ ΚΑΜΒΑ, όχι του παραθύρου. */
  height: min(calc(var(--cpms-canvas-h) * 0.92), 900px, calc(var(--cpms-canvas-h) - 345px));
  width: auto;
  aspect-ratio: 1000 / 920;
  /* ΚΕΝΤΡΑΡΙΣΜΕΝΟ. Μέσα σε grid το `margin: 0 auto` δεν φτάνει: χωρίς
   * justify-self το πεντάγωνο κολλούσε δεξιά και μισό έβγαινε εκτός κάδρου. */
  margin: 0 auto;
  justify-self: center;
  align-self: center;
  /* Πιάνει ΟΛΟ το πλάτος του grid πριν κεντραριστεί· αλλιώς κεντράρεται μέσα
   * σε μία στήλη και κάθεται στο δεξί μισό της οθόνης. */
  grid-column: 1 / -1;
  padding: 0;
  background: none;
  list-style: none;
}

.cpms-dashboard-pentagon[data-cpms-dp-on] .dashboard-sector {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  clip-path: none;
  /* ΤΟ ΚΛΙΚ ΜΕΤΡΑΕΙ ΜΟΝΟ ΜΕΣΑ ΣΤΟ ΠΟΛΥΓΩΝΟ — CMD-20260919-SETTINGSLEAVES.
   *
   * Τα ορθογώνια κουτιά των σφηνών ΑΛΛΗΛΟΚΑΛΥΠΤΟΝΤΑΙ: μετρημένο στο
   * ΠΡΟΕΠΙΛΟΓΕΣ ΑΠΟΣΤΟΛΗΣ, το κέντρο του κουτιού της ΔΙΑΡΚΕΙΑΣ έπεφτε μέσα
   * στο κουτί της ΔΥΣΚΟΛΙΑΣ και το κλικ πήγαινε στη λάθος επιλογή. Το κουμπί
   * δεν πιάνει δείκτη· τον πιάνει το γέμισμα, που φέρει το clip-path, οπότε
   * η επιλογή είναι ακριβώς το σχήμα που βλέπει ο πιλότος. Το hover και το
   * κλικ ανεβαίνουν στο κουμπί, όπου ζουν οι χειριστές και το focus. */
  pointer-events: none;
}

.cpms-dashboard-pentagon[data-cpms-dp-on] .dashboard-sector .cpms-dp-fill {
  pointer-events: auto;
}

/* ΟΙ ΣΦΗΝΕΣ ΤΟΥ ΠΑΛΙΟΥ ΠΕΝΤΑΓΩΝΟΥ ΠΑΥΟΥΝ ΝΑ ΕΙΝΑΙ ΚΟΥΤΙΑ.
 *
 * Στη ρίζα της εφαρμογής το app.js τυλίγει κάθε κουμπί σε ένα `.pentagon-wedge`
 * που είναι τοποθετημένο, οπότε τα ποσοστά της γεωμετρίας μετρούσαν πάνω στο
 * ΤΥΛΙΓΜΑ και όχι στο πεντάγωνο: μετρημένο στο ADMIN MENU, σφήνες 42x71px
 * αντί για ~180x174. Με `display: contents` το τύλιγμα δεν παράγει κουτί, άρα
 * δεν μπορεί να είναι containing block, και ο τομέας ξαναβρίσκει το σχήμα του.
 * Το ίδιο το κουμπί και οι χειριστές του δεν αγγίζονται. */
.cpms-dashboard-pentagon[data-cpms-dp-on] .pentagon-wedge {
  display: contents;
}

.cpms-dashboard-pentagon[data-cpms-dp-on] .dashboard-sector::after,
.cpms-dashboard-pentagon[data-cpms-dp-on] .dashboard-sector::before {
  content: none;
}

.cpms-dashboard-pentagon[data-cpms-dp-on] .cpms-dp-fill {
  position: absolute;
  inset: 0;
  clip-path: var(--cpms-dp-poly);
  background: linear-gradient(168deg, #10252f, #0b1b24);
}

.cpms-dashboard-pentagon[data-cpms-dp-on] .dashboard-sector:hover .cpms-dp-fill,
.cpms-dashboard-pentagon[data-cpms-dp-on] .dashboard-sector:focus-visible .cpms-dp-fill {
  background: linear-gradient(168deg, #16374a, #0f2a38);
}

.cpms-dashboard-pentagon[data-cpms-dp-on] .cpms-dp-centre .cpms-dp-fill {
  background: linear-gradient(168deg, #164b61, #0c2c3c);
}

.cpms-dashboard-pentagon[data-cpms-dp-on] .cpms-dp-rim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* ΚΑΘΕ ΕΠΙΛΟΓΗ ΤΟ ΔΙΚΟ ΤΗΣ ΚΛΕΙΣΤΟ ΠΕΡΙΓΡΑΜΜΑ. Η διπλή γραμμή στις τομές
 * ΓΕΝΝΙΕΤΑΙ από το κενό 1.25% ανάμεσα στους τομείς· δεν ζωγραφίζεται δεύτερη. */
.cpms-dashboard-pentagon[data-cpms-dp-on] .cpms-dp-rim polygon {
  fill: none;
  stroke: #8fe0ee;
  stroke-width: 6.2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px #3fb6d4);
}

.cpms-dashboard-pentagon[data-cpms-dp-on] .dashboard-sector:hover .cpms-dp-rim polygon,
.cpms-dashboard-pentagon[data-cpms-dp-on] .dashboard-sector:focus-visible .cpms-dp-rim polygon {
  stroke: #d9f6fb;
  filter: drop-shadow(0 0 11px #8fe0ee);
}

.cpms-dashboard-pentagon[data-cpms-dp-on] .cpms-dp-centre { z-index: 3; }
.cpms-dashboard-pentagon[data-cpms-dp-on] .cpms-dp-centre .cpms-dp-rim polygon { filter: drop-shadow(0 0 10px #3fb6d4); }

.cpms-dashboard-pentagon[data-cpms-dp-on] .cpms-dp-box {
  position: absolute;
  /* Η ΙΔΙΑ γραμματοσειρά με την εγκεκριμένη αναφορά. Το κουμπί της οθόνης
   * κληρονομεί monospace, που είναι πολύ πλατύτερη: οι ίδιοι ακριβώς αριθμοί
   * γεωμετρίας έδιναν καθαρή αναφορά και ΞΕΧΕΙΛΙΣΜΑ στην εφαρμογή. Τα όρια
   * κλίμακας είναι βαθμονομημένα σε Roboto Condensed. */
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 400;
  display: grid;
  transform: translate(calc(-50% + var(--cpms-dp-dx, 0px)), -50%);
  justify-items: center;
  gap: calc(var(--u) * .0171 * var(--cpms-dp-s, 1));
  text-align: center;
  pointer-events: none;
}

.cpms-dashboard-pentagon[data-cpms-dp-on] .cpms-dp-ico {
  display: grid;
  place-items: center;
  width: calc(var(--u) * .095 * var(--cpms-dp-s, 1));
  aspect-ratio: 1;
}

.cpms-dashboard-pentagon[data-cpms-dp-on] .cpms-dp-ico img { width: 100%; height: 100%; object-fit: contain; }

/* ΤΟ ΜΕΓΕΘΟΣ ΤΟ ΟΡΙΖΕΙ ΤΟ ΣΥΣΤΗΜΑ ΕΜΦΑΝΙΣΗΣ, ΟΧΙ Η ΓΕΩΜΕΤΡΙΑ.
 * Το cpms-display.css επιβάλλει `font-size: var(--cpms-text-body) !important`
 * σε κάθε span, div και button — είναι το σύστημα πρεσβυωπίας του ιδιοκτήτη
 * και κερδίζει παντού. Δεν το πολεμάμε: η αναγνωσιμότητα προηγείται του
 * σχήματος. Η γεωμετρία προσαρμόζεται, και όποιος τίτλος δεν χωράει είναι
 * ΜΑΚΡΥΣ, όχι μεγάλος — ο ιδιοκτήτης το έλυσε ήδη έτσι με «σύντομο το
 * LOGISTICS». */
.cpms-dashboard-pentagon[data-cpms-dp-on] .cpms-dp-title {
  letter-spacing: .12em;
  line-height: 1.1;
  color: #8fe0ee;
  font-weight: 700;
  text-shadow: 0 0 16px #3fb6d499;
}

.cpms-dashboard-pentagon[data-cpms-dp-on] .cpms-dp-sub {
  line-height: 1.35;
  color: #68b3c9;
  letter-spacing: .03em;
  font-weight: 400;
}

/* Η ΠΕΡΙΓΡΑΦΗ ΔΕΝ ΖΩΓΡΑΦΙΖΕΤΑΙ ΜΕΣΑ ΣΤΗ ΣΦΗΝΑ — ΔΗΛΩΜΕΝΗ ΑΠΟΚΛΙΣΗ.
 *
 * Στην αναφορά που ενέκρινε ο ιδιοκτήτης η περιγραφή είναι δύο μικρές γραμμές
 * κάτω από τον τίτλο. Μέσα στην εφαρμογή το cpms-display.css επιβάλλει
 * `font-size: var(--cpms-text-body) !important` σε ΚΑΘΕ span — το σύστημα
 * πρεσβυωπίας του ιδιοκτήτη — οπότε η περιγραφή παίρνει το ΙΔΙΟ μέγεθος με τον
 * τίτλο και δύο γραμμές δεν χωρούν σε καμία σφήνα. Μετρημένο: 22 ευρήματα
 * κειμένου έξω από το πολύγωνό του.
 *
 * Η αναγνωσιμότητα προηγείται του σχήματος, και το σχήμα προηγείται της
 * περιγραφής. Το κείμενο ΔΕΝ χάνεται: ζει στο `aria-label` του κουμπιού.
 * ΟΧΙ σε `title`: το native tooltip σκέπαζε τον διπλανό τομέα
 * (CMD-20260919-SETTINGSLEAVES). */
.cpms-dashboard-pentagon[data-cpms-dp-on] .cpms-dp-sub { display: none; }

/* ΣΕ ΚΟΝΤΗ ΟΘΟΝΗ ΤΟ ΧΡΩΜΙΟ ΜΑΖΕΥΕΤΑΙ, ΟΧΙ ΤΟ ΜΕΝΟΥ.
 * Μετρημένο στα 1280x720: 300px κεφαλίδας πάνω από τη σκηνή άφηναν 420px για
 * το πεντάγωνο, και με το σώμα κειμένου στα 16px οι τίτλοι δεν χωρούσαν. Η
 * εσωτερική κεφαλίδα «DASHBOARD PENTAGON / SETTINGS / SETTINGS» επαναλαμβάνει
 * ό,τι λέει ήδη η κεφαλίδα της σελίδας. */
@media (max-width: 0px) { /* ΚΑΜΒΑΣ 1920x1080: (max-height: 900px) -> ΑΔΡΑΝΕΣ */
  .settings-dashboard { gap: 4px; padding: 8px; }
  .settings-dashboard__header { display: none; }
  .settings-shell > .settings-header { padding-block: 6px; }
  .settings-intro { display: none; }
  /* Η επεξηγηματική γραμμή της κεφαλίδας λέει τι κάνει η οθόνη που ο πιλότος
   * μόλις άνοιξε. Σε κοντή οθόνη κοστίζει ύψος που το χρειάζεται το μενού· ο
   * τίτλος και η διαδρομή μένουν. */
  .settings-shell > .settings-header #pageLead { display: none; }
  /* Με μαζεμένο χρώμιο περισσεύει ύψος: μετρημένο στα 1280x720, 204px πάνω
   * από τη σκηνή και 141px κάτω της. Η σκηνή το παίρνει, γιατί κάθε pixel
   * ύψους είναι πλάτος σφήνας — και το πλάτος της σφήνας είναι ο μόνος
   * τρόπος να χωρέσει ο τίτλος στα 16px που επιβάλλει το σύστημα εμφάνισης. */
  .cpms-dashboard-pentagon[data-cpms-dp-on] {
    height: min(calc(var(--cpms-canvas-h) * 0.92), 900px, calc(var(--cpms-canvas-h) - 230px));
  }
}

/* ΤΟ DASHBOARD ΤΗΣ ΡΙΖΑΣ ΧΩΡΑΕΙ ΣΤΟ ΚΑΔΡΟ.
 *
 * Μετρημένο στα 1280x720 στο `#/menu/admin-root`: το `.pentagon-stage` είναι
 * `position: fixed`, αγκυρωμένο στο ΚΑΤΩ άκρο, και το πλάτος του βγαίνει από
 * το `--root-pentagon-size`. Με τον λόγο 1000/920 του dashboard αυτό έδινε
 * ύψος 1067px σε κάδρο 720: η κορυφή της σκηνής καθόταν στο -391 και το
 * dashboard, που ζωγραφίζεται στην ΚΟΡΥΦΗ της, έβγαινε ΟΛΟΚΛΗΡΟ εκτός οθόνης
 * — από -391 έως -16. Στα 1920x1080 έχανε τα πρώτα 146px του.
 *
 * Δεν αλλάζουμε την αγκύρωση ούτε το οριζόντιο κεντράρισμα: είναι η
 * εγκεκριμένη σύνθεση του §3.4.1 και δουλεύει. Αλλάζει ΜΟΝΟ το ύψος, ώστε η
 * σκηνή να είναι όσο το πεντάγωνό της. Το `!important` είναι απαραίτητο
 * επειδή ο κανόνας που δίνει `width: var(--root-pentagon-size)` φέρει `id`
 * στον επιλογέα του και κερδίζει χωρίς αυτό.
 *
 * Τα 190px είναι ο χώρος πάνω και κάτω: 62px μπάρα διαχείρισης του
 * `screen-family-layout.v1.json`, 44px υποσέλιδο, και το υπόλοιπο αέρας. */
.pentagon-stage:has(.cpms-dashboard-pentagon[data-cpms-dp-on]) {
  height: min(calc(var(--cpms-canvas-h) * 0.92), 900px, calc(var(--cpms-canvas-h) - 190px)) !important;
  width: auto !important;
  max-width: none !important;
}

#pentagonSectorLayer.cpms-dashboard-pentagon[data-cpms-dp-on] {
  /* Η λεζάντα «Select A Sector» κάθεται στο κάτω άκρο της σκηνής. Με το
   * πεντάγωνο να γεμίζει ολόκληρη τη σκηνή, η λεζάντα έπεφτε ΠΑΝΩ στη βάση
   * του και έκοβε την τρίτη γραμμή του TASKINGS AND BRANCHES. Της αφήνουμε
   * τη λωρίδα της· το σχήμα σταματά από πάνω. */
  height: calc(100% - 34px);
  margin: 0;
}

/* Το κεντρικό κουμπί ΜΕΤΑΚΟΜΙΖΕΙ μέσα στο nav (βλ. collectButtons), οπότε το
 * παλιό στρώμα μένει άδειο. Κρύβεται ώστε να μην κρατά χώρο ούτε να πιάνει
 * κλικ πάνω από το σχήμα. */
.pentagon-stage:has(.cpms-dashboard-pentagon[data-cpms-dp-on]) > .pentagon-center-layer {
  display: none;
}

/* ΕΝΑΣ ΜΑΚΡΥΣ ΤΙΤΛΟΣ ΜΙΚΡΑΙΝΕΙ, ΔΕΝ ΒΓΑΙΝΕΙ ΕΞΩ — CMD-20260917-LONGTITLE.
 *
 * Εντολή ιδιοκτήτη, 2026-09-17: «αν ο τιτλος ειναι αρκετα μακρης κάπου, τα
 * γραμματα να μικρίνουν κατα 0,5 ή 1 ptx». Δύο βήματα, και ΜΟΝΟ όταν ο
 * browser μετρήσει ότι ο τίτλος δεν χωράει στο πολύγωνό του.
 *
 * Το δάπεδο των 13px δεν παραβιάζεται ΠΟΤΕ: με `max(13px, ...)` η σμίκρυνση
 * σταματά εκεί ακόμη κι αν ο ιδιοκτήτης κατεβάσει το σώμα κειμένου στο
 * δάπεδό του. Το `!important` είναι απαραίτητο επειδή το simpit-override.css
 * επιβάλλει το μέγεθος σώματος με `*` και `!important`· η κλάση κερδίζει τον
 * καθολικό επιλογέα με την ίδια σημασία. */
.cpms-dashboard-pentagon [data-cpms-dp-fit="1"] .cpms-dp-title {
  font-size: max(13px, calc(var(--cpms-text-body, 16px) - 0.5px)) !important;
}

.cpms-dashboard-pentagon [data-cpms-dp-fit="2"] .cpms-dp-title {
  font-size: max(13px, calc(var(--cpms-text-body, 16px) - 1px)) !important;
}