/* Πάνελ τιμών: κοινό λεξιλόγιο κλάσεων (spec §7). Κάθε ενότητα στήνει μόνο τη δική της σελίδα, στο δικό της CSS. */

/* ——— Γραμματοσειρές από τον δικό μας server, με εφεδρικές στις ίδιες διαστάσεις (frontend/src/styles/fonts.css) ——— */
@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/commissioner-greek.7f4d3852ea46.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/commissioner-latin.5639dfe67576.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Sans Extra Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fira-600-greek.41b191a15e6a.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Fira Sans Extra Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fira-600-latin.e234dcad9478.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Sans Extra Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/fira-700-greek.eeb337d46bae.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Fira Sans Extra Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/fira-700-latin.97b5e57065b4.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Sans Extra Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/fira-800-greek.8a68ea5f3a37.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Fira Sans Extra Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/fira-800-latin.03342f5f0362.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Commissioner fallback";
  src: local("Arial"), local("ArialMT"), local("Roboto");
  size-adjust: 99.96%;
  ascent-override: 101.74%;
  descent-override: 20.61%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fira fallback";
  font-weight: 600 800;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold");
  size-adjust: 77.16%;
  ascent-override: 121.18%;
  descent-override: 34.35%;
  line-gap-override: 0%;
}

/* ——— Tokens (spec §7.1) ——— */
:root {
  color-scheme: light;
  /* ink and paper */
  --navy: #032f3c;      --navy-2: #0b4252;    --navy-deep: #022530;
  --ink: #0a2630;       --muted: #4a6570;     --placeholder: #5b7680;
  --paper: #ffffff;     --ice: #edf3f5;       --well: #e6eef1;     --hover: #f5f8f9;
  --rule: #d3dfe3;      --edge: #6f8a93;      /* --edge = input borders, 3:1 on white */
  /* steel rail (from the catalogue tokens) */
  --steel-hi: #f7fafb;  --steel: #c5d2d6;     --steel-lo: #93a7ad;  --steel-dk: #6d848b;
  --rail: linear-gradient(to bottom, var(--steel-hi) 0 1px, var(--steel) 1px 3px, var(--steel-lo) 3px 5px,
          rgb(3 47 60 / 0.16) 5px, rgb(3 47 60 / 0) 11px);
  --twine: repeating-linear-gradient(160deg, var(--horn) 0 2px, #ffffff 2px 3.6px);
  --twine-steel: repeating-linear-gradient(160deg, var(--steel-lo) 0 2px, #dce6ea 2px 3.6px);
  /* brand red: fills only (twine, tab underline). Never text. */
  --horn: #f4313f;
  --horn-text: #b8182a;                        /* red text on paper/ice: errors, «Έπεσε», ▼ */
  /* states: text on tint + a stronger edge for left bars */
  --ok-ink: #1d6b47;    --ok-bg: #e6f2ec;     --ok-edge: #2e8a5e;
  --warn-ink: #7a4a00;  --warn-bg: #fbf1dc;   --warn-edge: #d99a1e;
  --err-ink: #b8182a;   --err-bg: #fbe9eb;    --err-edge: #b8182a;
  --info-bg: #e6eef1;   --info-edge: #032f3c;
  /* type */
  --display: "Fira Sans Extra Condensed", "Fira fallback", "Arial Narrow", sans-serif;
  --text: "Commissioner", "Commissioner fallback", system-ui, -apple-system, sans-serif;
  --num: "Fira Sans Extra Condensed", "Fira fallback", "Arial Narrow", sans-serif;   /* every number column */
  /* spacing (4px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --gutter: 24px;       --max: 1200px;
  /* sizes */
  --header-h: 44px;     --weekbar-h: 48px;    --actionbar-h: 56px;
  --row-h: 40px;        --control-h: 40px;    --radius: 4px;       --radius-pill: 3px;
  /* shadows */
  --shadow-tag: 0 10px 14px -9px rgb(3 47 60 / 0.35), 0 2px 3px -1px rgb(3 47 60 / 0.12);
  --shadow-bar: 0 -6px 12px -8px rgb(3 47 60 / 0.25);
  --shadow-slip: 0 6px 12px -8px rgb(3 47 60 / 0.35);
  /* focus */
  --focus: 3px solid var(--navy);  --focus-offset: 2px;
  --focus-on-navy: 3px solid #ffffff;
}
@media (max-width: 599px) {
  :root { --gutter: 16px; --header-h: 48px; --row-h: 48px; --control-h: 48px; --actionbar-h: 64px; }
}

/* ——— Βάση ——— */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Η μπάρα ενεργειών κολλά στο κάτω μέρος: ό,τι παίρνει εστίαση (Tab, σύνδεσμος #πεδίο) σταματά πάνω από αυτήν.
   Το --actionbar-live το γράφει το panel.js με το πραγματικό ύψος της μπάρας, που μεγαλώνει όταν αναδιπλώνεται. */
html:has(.p-actionbar) { scroll-padding-bottom: calc(var(--actionbar-live, var(--actionbar-h)) + 8px); }
a, button, input, select, textarea, summary, [tabindex] { scroll-margin-block: 8px; }
/* Σε μικρές σελίδες η μπάρα ενεργειών και το υποσέλιδο πάνε στο κάτω μέρος· η σελίδα κυλά κανονικά. */
body {
  display: flex; flex-direction: column; min-height: 100%;
  margin: 0;
  background: var(--ice);
  color: var(--ink);
  font: 400 15px/22px var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
@media (max-width: 599px) { body { font-size: 16px; line-height: 24px; } }
img, svg { display: block; max-width: 100%; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 12px; }
h1, h2, h3 { font-family: var(--display); color: var(--navy); margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
[hidden] { display: none !important; }
strong, b { font-weight: 600; }

/* ——— Κέλυφος ——— */
.skip {
  position: absolute; left: 8px; top: -100px; z-index: 100;
  padding: 8px 14px; background: var(--paper); color: var(--navy); font-weight: 600;
  border: 2px solid var(--navy); border-radius: var(--radius); text-decoration: none;
}
.skip:focus { top: 8px; }

.p-header { position: relative; z-index: 30; background: var(--navy); color: #fff; }
.p-header__inner {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
  height: var(--header-h); display: flex; align-items: center; gap: 12px;
}
.p-header :focus-visible { outline: var(--focus-on-navy); outline-offset: -3px; }
.p-header__logo { display: flex; align-items: center; flex: none; height: 100%; margin-right: 8px; }
.p-header__logo img { height: 28px; width: auto; }
.p-header__here {
  display: none; min-width: 0; font: 600 15px/20px var(--text); color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-nav { display: flex; align-self: stretch; min-width: 0; }
.p-nav__tab {
  position: relative; display: flex; align-items: center; padding: 0 12px;
  font: 600 14px/20px var(--text); color: rgb(255 255 255 / 0.78); text-decoration: none; white-space: nowrap;
}
.p-nav__tab:hover { color: #fff; background: rgb(255 255 255 / 0.06); }
.p-nav__tab[aria-current="page"] { color: #fff; }
.p-nav__tab[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; background: var(--horn);
}
.p-user { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: none; }
.p-user__name { margin-right: 6px; font-size: 14px; line-height: 20px; color: rgb(255 255 255 / 0.78); white-space: nowrap; }
.p-user__logout { margin: 0; }
.p-user__btn {
  height: var(--header-h); padding: 0 10px; border: 0; background: none; cursor: pointer;
  font: 600 14px/20px var(--text); color: rgb(255 255 255 / 0.78);
}
.p-user__btn:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.p-user__newtab {
  display: flex; align-items: center; justify-content: center; width: 44px; height: var(--header-h);
  color: rgb(255 255 255 / 0.78);
}
.p-user__newtab:hover { color: #fff; }
.p-menu { display: none; margin-left: auto; }
.p-menu__toggle {
  display: flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px; margin-right: -12px;
  list-style: none; cursor: pointer; font: 600 15px/20px var(--text); color: #fff; user-select: none;
}
.p-menu__toggle::-webkit-details-marker { display: none; }
.p-menu__toggle svg { transform: rotate(90deg); transition: transform 140ms ease; }
.p-menu[open] .p-menu__toggle svg { transform: rotate(-90deg); }
.p-menu__panel {
  position: absolute; left: 0; right: 0; top: 100%; padding: 4px 0 8px;
  background: var(--navy-2); box-shadow: 0 14px 20px -12px rgb(0 0 0 / 0.5);
}
.p-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 0;
  padding: 0 var(--gutter); border: 0; border-top: 1px solid rgb(255 255 255 / 0.08); background: none;
  font: 600 16px/22px var(--text); color: #fff; text-align: left; text-decoration: none; cursor: pointer;
}
.p-menu__item:hover { background: rgb(255 255 255 / 0.06); }
.p-menu__item[aria-current="page"] { box-shadow: inset 4px 0 0 var(--horn); }
.p-menu__item--quiet { font-weight: 400; color: rgb(255 255 255 / 0.85); }
.p-menu form { margin: 0; }
@media (max-width: 1099px) {
  .p-nav__tab { padding: 0 8px; }
  .p-nav__tab[aria-current="page"]::after { left: 8px; right: 8px; }
}
@media (max-width: 1039px) { .p-user__name { display: none; } }
@media (max-width: 899px) {
  .p-nav, .p-user { display: none; }
  .p-header__here { display: block; }
  .p-menu { display: block; }
}
@media (max-width: 599px) { .p-header__logo img { height: 24px; } }

/* Γραμμή εβδομάδας */
.p-weekbar { background: var(--paper); border-bottom: 1px solid var(--rule); }
.p-weekbar__inner {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
  min-height: calc(var(--weekbar-h) - 1px); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
}
.p-weekbar__id { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.p-weekbar__title { font: 700 20px/24px var(--display); color: var(--navy); white-space: nowrap; margin: 0; }
.p-weekbar__short { display: none; }
.p-weekbar__other { font-size: 14px; line-height: 20px; white-space: nowrap; }
.p-weekbar__steps { display: flex; align-items: center; gap: 8px 12px; margin-left: auto; }
.p-weekbar__where { display: none; margin: 0; font-size: 13px; line-height: 18px; color: var(--muted); }
.p-weekbar .steps--dots { display: none; }
@media (max-width: 1239px) {
  .p-weekbar__long { display: none; }
  .p-weekbar__short { display: inline; }
}
@media (max-width: 899px) {
  .p-weekbar__inner { flex-direction: column; align-items: stretch; gap: 2px; padding-top: 8px; padding-bottom: 4px; }
  .p-weekbar__title { font-size: 18px; line-height: 22px; }
  .p-weekbar__steps { margin-left: 0; justify-content: space-between; }
  .p-weekbar__where { display: block; }
  .p-weekbar .steps--small { display: none; }
  .p-weekbar .steps--dots { display: flex; }
}
@media (max-width: 599px) { .p-weekbar__other { display: none; } }

.p-main { display: block; flex: 1 0 auto; width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 8px var(--gutter) 48px; }
.p-main > :first-child { margin-top: 16px; }
.p-main > .p-messages:first-child + * { margin-top: 16px; }

.p-footer { font-size: 13px; line-height: 18px; color: var(--muted); }
.p-footer__inner { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 24px var(--gutter); }
.p-footer a { color: var(--muted); }
.p-footer a:hover { color: var(--navy); }
/* Στο κινητό κάθε γραμμή του υποσέλιδου έχει ύψος 44px και οι σύνδεσμοι το ίδιο: όταν ένας σύνδεσμος πάει στη
   δεύτερη γραμμή («Διαχείριση για προγραμματιστές»), τα σημεία που πατιούνται δεν πέφτουν το ένα πάνω στο άλλο. */
@media (max-width: 599px) {
  .p-footer__inner { padding-top: 12px; padding-bottom: 12px; line-height: 44px; }
  .p-footer a { display: inline-block; line-height: 44px; }
}

.p-actionbar {
  position: sticky; bottom: 0; z-index: 20; background: var(--paper);
  border-top: 1px solid var(--rule); box-shadow: var(--shadow-bar); padding-bottom: env(safe-area-inset-bottom);
}
/* Η κατάσταση διαβάζεται πάντα ολόκληρη, ποτέ «…». Αν δεν χωρά δίπλα στα κουμπιά, παίρνει μόνη της τη γραμμή
   (έως δύο γραμμές κείμενο) και τα κουμπιά πάνε από κάτω. */
.p-actionbar__inner {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 6px var(--gutter);
  min-height: calc(var(--actionbar-h) - 1px); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
}
.p-actionbar__status { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14px; line-height: 20px; }
.p-actionbar__status.is-warn { color: var(--warn-ink); font-weight: 600; }
.p-actionbar__status.is-error { color: var(--err-ink); font-weight: 600; }
.p-actionbar__actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex: 0 1 auto; min-width: 0; margin-left: auto; }
@media (max-width: 899px) {   /* δύο μεγάλα κουμπιά σε στενή μπάρα: το κείμενό τους αναδιπλώνεται, δεν πάνε το ένα κάτω από το άλλο */
  .p-actionbar__actions .btn { min-width: 0; white-space: normal; text-align: center; line-height: 18px; }
}
@media (max-width: 599px) {
  .p-actionbar__inner { column-gap: 12px; }
  .p-actionbar__status { font-size: 13px; line-height: 16px; }
  .p-actionbar__actions { flex: 1 1 auto; }
  .p-actionbar__actions .btn--primary { flex: 1 1 auto; }
  .p-actionbar__actions .btn--quiet { display: none; }
}

/* ——— Τυπογραφία ——— */
.p-h1 { font: 700 28px/32px var(--display); color: var(--navy); margin: 24px 0 8px; letter-spacing: 0.005em; }
.p-h2 { font: 700 20px/24px var(--display); color: var(--navy); margin: 32px 0 12px; }
.p-h3 { font: 600 18px/22px var(--display); color: var(--navy); margin: 24px 0 8px; }
.p-lead { font-size: 15px; line-height: 22px; max-width: 72ch; }
.p-help { font-size: 14px; line-height: 20px; color: var(--muted); }
.p-meta { font-size: 13px; line-height: 18px; color: var(--muted); }
@media (max-width: 599px) {
  .p-h1 { font-size: 24px; line-height: 28px; }
  .p-lead { font-size: 16px; line-height: 24px; }
}
.num { font-family: var(--num); font-weight: 600; font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html:not(.js) .js-only { display: none !important; }
html.js .no-js-only { display: none !important; }
@media (max-width: 599px) { .hide-phone { display: none !important; } }
@media (min-width: 600px) { .show-phone { display: none !important; } }

/* ——— Κουμπιά ——— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-h); padding: 0 16px; margin: 0;
  border: 1px solid transparent; border-radius: var(--radius); background: none;
  font: 600 15px/20px var(--text); color: var(--navy); text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { flex: none; }
.btn--primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-2); border-color: var(--navy-2); }
.btn--secondary { background: var(--paper); border-color: var(--navy); color: var(--navy); }
.btn--secondary:hover { background: var(--hover); }
.btn--quiet { min-height: 32px; padding: 0 6px; border-color: transparent; color: var(--navy); font-weight: 600; }
.btn--quiet:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn--danger { background: var(--paper); border-color: var(--err-edge); color: var(--err-ink); }
.btn--danger:hover { background: var(--err-bg); }
.btn--quiet.btn--danger { background: none; border-color: transparent; }
.btn--small { min-height: 32px; padding: 0 12px; font-size: 14px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:hover { text-decoration: none; }
.btn--primary[disabled]:hover { background: var(--navy); }
.btn-reason { font-size: 14px; line-height: 20px; color: var(--muted); }
@media (max-width: 599px) {
  .btn--quiet, .btn--small { min-height: 44px; }
  .btn { font-size: 15px; }
}

/* ——— Φόρμες ——— */
.field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 16px; min-width: 0; }
.field__label { font: 600 14px/20px var(--text); color: var(--ink); }
.field__set { min-width: 0; margin: 0; padding: 0; border: 0; }
.field__set > .field__label { padding: 0; margin-bottom: 4px; }
.input, .select, .textarea {
  display: block; width: 100%; max-width: 100%; min-height: var(--control-h); padding: 0 12px;
  border: 1px solid var(--edge); border-radius: var(--radius); background: var(--paper);
  font: 400 15px/22px var(--text); color: var(--ink);
}
.textarea { min-height: 120px; padding: 8px 12px; resize: vertical; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23032f3c' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.input:focus, .select:focus, .textarea:focus { outline: var(--focus); outline-offset: var(--focus-offset); }
.input::placeholder, .textarea::placeholder { color: var(--placeholder); opacity: 1; }
.input[readonly] { background: var(--hover); }
.field__help { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.field__error { margin: 0; font-size: 14px; line-height: 20px; color: var(--err-ink); }
.field--error .input, .field--error .select, .field--error .textarea { border: 2px solid var(--err-edge); padding-left: 11px; }
.radio-row, .check-row {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0; cursor: pointer; line-height: 20px;
}
.radio-row input, .check-row input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--navy); cursor: pointer; }
.radio-row:has(input:checked), .check-row:has(input:checked) { font-weight: 600; }
.radio-row__help { display: block; margin: -6px 0 6px 30px; font-size: 14px; line-height: 20px; color: var(--muted); font-weight: 400; }
.form-errors { margin: 16px 0; }
.form-errors ul { margin: 4px 0 0; padding-left: 20px; }
.form-errors a { color: var(--err-ink); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.form-narrow { max-width: 560px; }
@media (max-width: 599px) {
  .input, .select, .textarea { font-size: 16px; line-height: 24px; }
  .field__label { font-size: 15px; }
}

/* ——— Μηνύματα και ζώνες ——— */
.p-messages { display: grid; gap: 8px; margin: 16px 0; }
.msg, .band {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 12px 16px; border-left: 4px solid var(--info-edge); border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--info-bg); color: var(--ink); font-size: 15px; line-height: 22px;
}
.band { margin: 16px 0; }
.msg > p, .band > p { margin: 0; }
.msg__text { flex: 1 1 260px; margin: 0; }
.msg__action { flex: none; margin: 0; }
.msg__close {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: -6px -8px -6px auto;
  border: 0; border-radius: var(--radius); background: none; color: var(--muted); cursor: pointer;
}
.msg__close:hover { background: rgb(3 47 60 / 0.06); color: var(--ink); }
.msg--success, .band--success { background: var(--ok-bg); border-left-color: var(--ok-edge); }
.msg--warn, .band--warn { background: var(--warn-bg); border-left-color: var(--warn-edge); }
.msg--error, .band--error { background: var(--err-bg); border-left-color: var(--err-edge); }
.msg--info, .band--info { background: var(--info-bg); border-left-color: var(--info-edge); }
.msg a:not(.btn), .band a:not(.btn) { font-weight: 600; }
@media (max-width: 599px) {
  .msg__close { width: 44px; height: 44px; }
  /* 44px ύψος για το δάχτυλο: το padding μεγαλώνει το σημείο που πατιέται, το ίσο αρνητικό margin κρατά τη διάταξη. */
  .msg a:not(.btn), .band a:not(.btn) { display: inline-block; padding: 11px 0; margin: -11px 0; }
  /* Σε λίστα οι σύνδεσμοι είναι ο ένας κάτω από τον άλλο: εκεί τα 44px πιάνουν πραγματικό χώρο (χωρίς αρνητικό
     margin), για να μην πέφτει το κουτί του ενός πάνω στο διπλανό. */
  .msg li a:not(.btn), .band li a:not(.btn) { margin-block: 0; }
}

/* ——— Πίνακες ——— */
.table { width: 100%; border-collapse: collapse; background: var(--paper); font-size: 15px; line-height: 22px; }
.table th {
  position: sticky; top: 0; z-index: 1; padding: 8px 12px; border-bottom: 1px solid var(--rule);
  background: var(--paper); font: 600 13px/18px var(--text); color: var(--muted); text-align: left; vertical-align: bottom;
}
.table td { height: var(--row-h); padding: 8px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.table tbody tr:hover > td { background: var(--hover); }
.table .num, .table__num { text-align: right; }
.table__num { font-family: var(--num); font-weight: 600; font-variant-numeric: tabular-nums; }
.table th.table__num, .table th.num { font: 600 13px/18px var(--text); text-align: right; }
.table tr.table__group > td, .table tr.table__group > th {
  padding-top: 16px; background: var(--paper); font: 600 18px/22px var(--display); color: var(--navy);
}
.table tbody tr.table__group:hover > td { background: var(--paper); }
.table tr:has(.row-link) { position: relative; }
.row-link { font-weight: 600; text-decoration: none; }
.row-link:hover { text-decoration: underline; }
.row-link::after { content: ""; position: absolute; inset: 0; }
.table-wrap { overflow-x: visible; }
.table-wrap.is-wide { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap.is-wide .table th { position: static; }
.table-wrap.is-wide .sticky-col { position: sticky; left: 0; z-index: 2; background: var(--paper); }
@media (max-width: 599px) {
  .table { font-size: 16px; line-height: 24px; }
  .table--stack, .table--stack tbody, .table--stack tr { display: block; width: 100%; }
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--stack tr { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .table--stack td {
    display: inline; height: auto; padding: 0; border: 0; background: none;
    font-size: 14px; line-height: 22px; color: var(--muted); text-align: left;
  }
  .table--stack .num, .table--stack .table__num { text-align: left; font-size: 15px; color: var(--ink); }
  .table--stack td:first-child { display: block; margin-bottom: 2px; font-size: 16px; line-height: 24px; color: var(--ink); }
  .table--stack td::before { font: 400 14px/22px var(--text); color: var(--muted); }
  .table--stack td[data-label]:nth-child(2)::before { content: attr(data-label) ": "; }
  .table--stack td:nth-child(n+3)::before { content: " · "; }
  .table--stack td[data-label]:nth-child(n+3)::before { content: " · " attr(data-label) ": "; }
  .table--stack td:empty { display: none; }
  .table--stack tr.table__group { padding: 20px 0 4px; }
  .table--stack tr.table__group > td { display: block; font-size: 18px; color: var(--navy); }
  .table--stack tbody tr:hover > td { background: none; }
}

/* ——— Σημάνσεις ——— */
.pill {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid transparent;
  border-radius: var(--radius-pill); font: 600 13px/18px var(--text); white-space: nowrap; vertical-align: middle;
}
.pill--neutral { background: var(--ice); border-color: var(--edge); color: var(--ink); }
.pill--live { background: var(--navy); border-color: var(--navy); color: #fff; }
.pill--scheduled { background: var(--paper); border-color: var(--navy); color: var(--navy); }
.pill--ok { background: var(--ok-bg); color: var(--ok-ink); }
.pill--warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill--muted { background: var(--well); border-color: var(--rule); color: var(--muted); }
.pill--danger { background: var(--err-bg); color: var(--err-ink); }
.badge {
  display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 5px; border-radius: 3px;
  background: var(--paper); font: 600 12px/16px var(--text); white-space: nowrap; vertical-align: middle;
}
.badge--drop { border: 1.5px solid var(--horn); color: var(--horn-text); }
.badge--new { border: 1.5px solid var(--navy); color: var(--navy); }

/* ——— Βήματα: οι ετικέτες στη ράγα ——— */
.steps { list-style: none; margin: 0; padding: 0; }
.steps a.step { text-decoration: none; }

/* Μεγάλες, στην αρχική */
.steps--large {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  margin: 16px 0 12px; padding: 0 0 8px; background: var(--rail) 0 0 / 100% 11px no-repeat;
}
.steps--large > li { position: relative; padding-top: 22px; }
.steps--large > li::before {   /* η σκιά, πίσω από την ετικέτα όπως στον κατάλογο */
  content: ""; position: absolute; z-index: 0; top: 30px; left: 6px; right: 6px; bottom: 0; box-shadow: var(--shadow-tag);
}
.steps--large > li::after {    /* ο σπάγκος, από τη ράγα ως την τρύπα */
  content: ""; position: absolute; z-index: 2; top: 2px; left: calc(50% - 1.25px); width: 2.5px; height: 32px;
  border-radius: 1px; background: var(--twine); box-shadow: 1px 0 0 rgb(3 47 60 / 0.15);
}
.steps--large > li.steps__item--current::after { height: 36px; }
.steps--large > li.steps__item--todo::after { background: var(--twine-steel); }
.steps--large .step {
  position: relative; z-index: 1; display: block; height: 100%; min-height: 104px; padding: 26px 12px 12px;
  color: var(--ink); background: var(--rule);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%, 0 12px);
  transition: transform 140ms cubic-bezier(0.3, 1.3, 0.5, 1);
}
.steps--large .step::before {  /* το χαρτί, με την τρύπα */
  content: ""; position: absolute; z-index: -1; inset: 1px;
  background: radial-gradient(circle at 50% 11px, var(--ice) 0 4px, rgb(3 47 60 / 0.35) 4.5px 5px, transparent 5.5px), var(--paper);
  clip-path: polygon(11.6px 0, calc(100% - 11.6px) 0, 100% 11.6px, 100% 100%, 0 100%, 0 11.6px);
}
.steps--large .step__num { margin-right: 2px; font: 700 17px/20px var(--display); color: var(--navy); }
.steps--large .step__label { font: 600 17px/20px var(--display); color: var(--navy); }
.steps--large .step__status { display: block; margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--muted); }
.steps--large .step--done { padding-right: 54px; }

.steps--large .step__stamp {
  position: absolute; top: 20px; right: 9px; display: grid; place-items: center; width: 40px; height: 40px;
  border: 2px solid var(--navy); border-radius: 50%; font: 700 11px/1 var(--text); color: var(--navy);
  transform: rotate(-8deg);
}
@media (max-width: 899px) {   /* στενές ετικέτες: η σφραγίδα πάει κάτω δεξιά για να μένει χώρος στο όνομα */
  .steps--large .step--done { padding-right: 12px; padding-bottom: 50px; }
  .steps--large .step__stamp { top: auto; bottom: 10px; right: 8px; width: 36px; height: 36px; font-size: 10px; }
}
.steps--large .step--current { background: var(--navy); transform: translateY(4px); }
.steps--large .step--current::before {
  inset: 2px; clip-path: polygon(11.2px 0, calc(100% - 11.2px) 0, 100% 11.2px, 100% 100%, 0 100%, 0 11.2px);
}
.steps--large .step--current .step__label { font-weight: 700; }
.steps--large .step--todo::before {
  background: radial-gradient(circle at 50% 11px, var(--paper) 0 4px, rgb(3 47 60 / 0.35) 4.5px 5px, transparent 5.5px), var(--ice);
}
.steps--large .step--todo .step__num, .steps--large .step--todo .step__label { color: var(--muted); }
.steps--large a.step:hover { transform: translateY(-2px); }
.steps--large a.step--current:hover { transform: translateY(2px); }
.steps--large a.step:focus-visible { outline: none; }
.steps--large > li:has(a.step:focus-visible) { outline: var(--focus); outline-offset: 4px; }

/* Μικρές, στη γραμμή εβδομάδας */
.steps--small { display: flex; gap: 6px; }
.steps--small .step {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--paper);
  font: 600 13px/18px var(--text); color: var(--muted); white-space: nowrap;
}
.steps--small .step::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ice); box-shadow: inset 0 0 0 1px rgb(3 47 60 / 0.35);
}
.steps--small .step__num { font-weight: 700; }
.steps--small .step__tick { margin-right: 3px; }
.steps--small .step--done { color: var(--navy); }
.steps--small a.step:hover { border-color: var(--edge); color: var(--navy); }
.steps--small .step--current, .steps--small a.step--current:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.steps--small .step--current::before { background: var(--navy-2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.55); }
@media (max-height: 699px) and (min-width: 900px) { .steps--small .step__label { display: none; } }
@media (min-width: 900px) and (max-width: 1019px) {   /* στενό: μόνο αριθμοί, εκτός από το βήμα της σελίδας */
  .p-weekbar .steps--small .step:not(.step--current) .step__label { display: none; }
}

/* Κάθετες, στην αρχική στο κινητό */
.steps--vertical { position: relative; margin: 16px 0; }
.steps--vertical::before {
  content: ""; position: absolute; left: 11px; top: 16px; bottom: 16px; width: 3px; border-radius: 2px; background: var(--steel);
}
.steps--vertical .step { position: relative; display: block; min-height: 48px; padding: 10px 0 10px 36px; color: var(--ink); }
.steps--vertical .step::before {
  content: ""; position: absolute; left: 5.5px; top: 13px; display: grid; place-items: center; width: 14px; height: 14px;
  border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 3px var(--steel-lo);
  font: 700 10px/1 var(--text); color: #fff;
}
.steps--vertical .step--done::before { content: "✓"; background: var(--navy); box-shadow: none; }
.steps--vertical .step--current::before { box-shadow: inset 0 0 0 3px var(--navy); }
.steps--vertical .step__num, .steps--vertical .step__label { font: 600 15px/20px var(--text); color: var(--navy); }
.steps--vertical .step--todo .step__num, .steps--vertical .step--todo .step__label { color: var(--muted); }
.steps--vertical .step__status { display: block; font-size: 14px; line-height: 20px; color: var(--muted); }

/* Τελείες, στη γραμμή εβδομάδας κάτω από 900px */
.steps--dots { display: flex; flex: none; }
.steps--dots .step { position: relative; display: grid; place-items: center; width: 44px; height: 44px; }
.steps--dots .step::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2.5px var(--steel-lo);
}
.steps--dots .step--done::before { background: var(--navy); box-shadow: none; }
.steps--dots .step--current::before { box-shadow: inset 0 0 0 3px var(--navy); background: var(--paper); }
.steps--dots .step:not(.step--current).step--done::after { content: none; }

/* ——— Άλλα κομμάτια ——— */
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 12px 0 24px; }
.way { min-width: 0; padding: 4px 24px 8px; }
.way:first-child { padding-left: 0; }
.way + .way { border-left: 1px solid var(--rule); }
.way h3, .way .p-h3 { margin: 0 0 6px; font: 600 18px/22px var(--display); color: var(--navy); }
.way p { font-size: 14px; line-height: 20px; color: var(--muted); }
.way .form-actions, .way__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
@media (max-width: 599px) {
  .ways { grid-template-columns: minmax(0, 1fr); }
  .way { padding: 12px 0; }
  .way + .way { border-left: 0; border-top: 1px solid var(--rule); }
}

.tabs { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 16px 0; border-bottom: 1px solid var(--rule); }
.tabs__tab {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; margin-bottom: -1px;
  border-bottom: 3px solid transparent; font: 600 14px/20px var(--text); color: var(--muted); text-decoration: none;
}
.tabs__tab:hover { color: var(--navy); }
.tabs__tab[aria-current="page"] { color: var(--navy); border-bottom-color: var(--navy); }
.tabs__count {
  padding: 0 6px; border-radius: 3px; background: var(--well);
  font: 600 14px/20px var(--num); font-variant-numeric: tabular-nums; color: inherit;
}

.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 16px 0; }
.filters .field { margin: 0; min-width: 160px; }
.filters .field--grow { flex: 1 1 260px; }
.filters .fold { flex-basis: 100%; }

.fold { margin: 8px 0; }
.fold__summary {
  display: flex; align-items: center; gap: 10px; min-height: 44px; list-style: none; cursor: pointer;
  font: 600 15px/20px var(--text); color: var(--navy);
}
.fold__summary::-webkit-details-marker { display: none; }
.fold__summary::before {
  content: ""; flex: none; width: 7px; height: 7px; margin: 0 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
  transition: transform 140ms ease;
}
.fold[open] > .fold__summary::before { transform: rotate(45deg); }
.fold__summary .num { color: var(--muted); }
.fold__body { padding: 4px 0 8px 21px; }

.copy { margin: 0 0 16px; }
.copy__row { display: flex; gap: 8px; }
.copy__input { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--ink); }
.copy__btn { flex: none; }
.copy__input--wrap {  /* ολόκληρος ο σύνδεσμος, σε όσες γραμμές χρειάζεται */
  padding: 8px 12px; resize: none; overflow-wrap: anywhere; word-break: break-all; field-sizing: content;
}
.copy__input--wrap + .copy__btn { align-self: flex-start; }
.copy__hint { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--muted); }
@media (max-width: 599px) {
  .copy__row { flex-direction: column; }
  .copy__btn { width: 100%; }
}

.receipt {
  max-width: 420px; padding: 16px; background: var(--paper);
  border: 1px solid var(--rule); box-shadow: var(--shadow-slip);
}
.receipt__title { margin: 0 0 12px; font: 600 14px/20px var(--text); }
.receipt__line { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 8px; padding: 5px 0; }
.receipt__sign { font: 600 15px/22px var(--num); color: var(--muted); }
.receipt__amount { text-align: right; white-space: nowrap; }
.receipt__note { grid-column: 2 / -1; font-size: 13px; line-height: 18px; color: var(--muted); }
.receipt__total { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--edge); font-weight: 600; }
.receipt__total .receipt__note { font-weight: 400; }
.receipt__text { margin: 0; }
.receipt__skipped { margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--muted); }
.receipt__skipped p { margin: 0; }
.receipt__skipped ul { margin: 4px 0 0; padding-left: 18px; }
.receipt__after { margin-top: 8px; }

.back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px;
  font-size: 14px; line-height: 20px; color: var(--navy); text-decoration: none;
}
.back::before {
  content: ""; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.back:hover { text-decoration: underline; }
@media (max-width: 599px) { .back { min-height: 44px; } }

.empty { padding: 16px 0; font-size: 15px; line-height: 22px; color: var(--muted); }
.empty p { margin: 0 0 12px; }

.person {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start;
  padding: 12px 0; border-bottom: 1px solid var(--rule);
}
.person__name { grid-column: 1; font: 600 16px/22px var(--text); color: var(--navy); }
@media (max-width: 599px) { .person__name { padding: 11px 0; margin: -11px 0; } }   /* 22 + 22 = 44px, ίδια διάταξη */
.person__meta { grid-column: 1; font-size: 13px; line-height: 18px; color: var(--muted); }
.person__reasons { grid-column: 1; margin: 4px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 22px; }
.person__when { grid-column: 2; grid-row: 1; font-size: 13px; line-height: 22px; color: var(--muted); text-align: right; white-space: nowrap; }
.person__tel { grid-column: 2; grid-row: 2 / span 3; align-self: end; justify-self: end; }
.person { container-type: inline-size; }
@container (max-width: 480px) {   /* σε στενή στήλη το τηλέφωνο πάει από κάτω, για να μη στριμώχνει το όνομα */
  .person__tel { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-left: -6px; }
}
@media (max-width: 599px) {
  .person__tel {
    grid-column: 1 / -1; grid-row: auto; justify-self: stretch; margin-top: 8px; min-height: 44px;
    border: 1px solid var(--navy); background: var(--paper);
  }
}

.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 900px) { .cols { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); } }

.frame-stage { margin: 12px 0; padding: 16px; background: var(--well); border-radius: var(--radius); }
.frame-stage iframe { display: block; border: 0; background: var(--paper); }
.frame-stage[data-frame="mobile"] iframe {
  width: 390px; max-width: 100%; height: 760px; margin: 0 auto; border: 1px solid var(--rule); box-shadow: var(--shadow-slip);
}
.frame-stage[data-frame="desktop"] { padding: 0; overflow-x: auto; }
.frame-stage[data-frame="desktop"] iframe { width: 1280px; height: 800px; transform-origin: 0 0; }
html.js .frame-stage[data-frame="desktop"] { overflow: hidden; }
@media (max-width: 599px) { .frame-stage[data-frame="mobile"] { padding: 8px; } }

/* ——— Κουτί τιμής (βήματα 1 και 2) ——— */
.cell { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pin {
  width: 88px; height: 36px; min-height: 36px; padding: 0 8px;
  font: 600 16px/20px var(--num); font-variant-numeric: tabular-nums; text-align: right;
}
.cell__note { flex-basis: 100%; font-size: 13px; line-height: 18px; color: var(--muted); }
.cell__saved { font-size: 13px; line-height: 18px; color: var(--ok-ink); }
.cell__chip {
  padding: 0 6px; border-radius: 3px; background: var(--well); font-size: 12px; line-height: 18px;
  color: var(--muted); white-space: nowrap;
}
.cell[data-state="saving"] .pin { border-bottom: 2px dotted var(--navy); }
.cell[data-state="warn"] .pin, .cell[data-state="conflict"] .pin { border: 2px solid var(--warn-edge); padding: 0 7px; }
.cell[data-state="warn"] .cell__note, .cell[data-state="conflict"] .cell__note { color: var(--warn-ink); }
.cell[data-state="conflict"] .pin { background: linear-gradient(225deg, var(--warn-edge) 0 7px, var(--paper) 7px); }
.cell[data-state="error"] .pin { border: 2px solid var(--err-edge); padding: 0 7px; }
.cell[data-state="error"] .cell__note { color: var(--err-ink); }
.cell[data-state="staged"] .pin {
  background: radial-gradient(circle at calc(100% - 7px) 7px, var(--warn-edge) 0 4px, transparent 4.5px), var(--paper);
}
.cell--chosen { background: var(--well); box-shadow: inset 3px 0 0 var(--navy); }
.table tbody tr:hover > td.cell--chosen { background: var(--well); }
.choice { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--navy); cursor: pointer; }
.choice-hit { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; margin: -10px; cursor: pointer; }
@media (max-width: 599px) {
  .cell { display: flex; }
  .pin { width: 100%; height: 48px; font-size: 17px; line-height: 22px; }
}

/* ——— Είσοδος και σελίδες χωρίς μενού ——— */
.p-auth__band { display: grid; place-items: center; height: 120px; background: var(--navy); }
.p-auth__band img { height: 48px; width: auto; }
.p-auth .p-main { max-width: calc(360px + 2 * var(--gutter)); padding-top: 16px; }
.p-auth .p-h1 { margin-top: 16px; }
.p-auth__submit { min-width: 140px; }
@media (max-width: 599px) {
  .p-auth__band { height: 96px; }
  .p-auth__band img { height: 40px; }
  .p-auth__submit { width: 100%; }
}

/* ——— Ιστορικό και σελιδοποίηση ——— */
.log { margin: 16px 0; padding: 0; list-style: none; background: var(--paper); border-top: 1px solid var(--rule); }
.log__item { padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.log__when { white-space: nowrap; }
.log__who { color: var(--muted); }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 16px 0; font-size: 14px; }
.pager a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .steps--large a.step:hover { transform: none; }
  .steps--large a.step--current:hover { transform: translateY(4px); }
}
.p-auth__help { margin-top: 24px; }
.p-auth .msg, .p-auth .band { margin: 0 0 16px; }