/* ── Appearance system ────────────────────────────────────────────────────────
   Palettes live on [data-preset] (not :root) so that any element can wear one: the
   settings page paints each style's preview with its real colours. Dark variants are
   [data-preset][data-mode="dark"]; data-mode is set by the inline script in base.html
   (without JS everything falls back to light). */
:root { --font-scale:1; --ui-font:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[data-font="system"] { --ui-font:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[data-font="serif"]  { --ui-font:Georgia, "Times New Roman", serif; }
[data-font="narrow"] { --ui-font:"Arial Narrow", "Liberation Sans Narrow", Tahoma, sans-serif; }
[data-font="mono"]   { --ui-font:ui-monospace, Consolas, "DejaVu Sans Mono", monospace; }

/* Win-Win green (default), from the logo. */
:root, [data-preset="winwin"] {
  --bg:#eef2ef; --surface:#ffffff; --surface-2:#f4f7f5; --border:#cfdad3; --text:#1c2b24; --text-muted:#5a6d63;
  --accent-base:#3f7a62; --accent-hover:#30604c; --accent-contrast:#ffffff; --nav-bg:#23463a; --nav-text:#eaf2ee;
}
[data-preset="winwin"][data-mode="dark"] {
  --bg:#0e1411; --surface:#151e19; --surface-2:#1b2620; --border:#26342c; --text:#e1ebe5; --text-muted:#8ea398;
  --accent-base:#6fb293; --accent-hover:#86c2a6; --accent-contrast:#07120d; --nav-bg:#0a100d; --nav-text:#e1ebe5;
}
/* Blue (Peripoli «Υπηρεσιακό») */
[data-preset="blue"] {
  --bg:#eceff3; --surface:#ffffff; --surface-2:#f4f6f9; --border:#ccd5df; --text:#12283c; --text-muted:#5b6f82;
  --accent-base:#17456b; --accent-hover:#0f3252; --accent-contrast:#ffffff; --nav-bg:#12304a; --nav-text:#eaf1f7;
}
[data-preset="blue"][data-mode="dark"] {
  --bg:#0c151d; --surface:#131f2a; --surface-2:#182734; --border:#253746; --text:#dfe9f1; --text-muted:#8ba0b1;
  --accent-base:#4d9ad4; --accent-hover:#6aabdd; --accent-contrast:#06111b; --nav-bg:#0a121a; --nav-text:#dfe9f1;
}
/* Amber (Peripoli «Νυχτερινή περιπολία»): warm light, easy on the eyes at night. */
[data-preset="amber"] {
  --bg:#efe6d4; --surface:#faf4e8; --surface-2:#f3ead8; --border:#d8c7a4; --text:#3a2a0e; --text-muted:#7a6334;
  --accent-base:#a35d07; --accent-hover:#8a4e05; --accent-contrast:#fff8ec; --nav-bg:#3a2a0e; --nav-text:#f5e9d2;
}
[data-preset="amber"][data-mode="dark"] {
  --bg:#070604; --surface:#0f0d08; --surface-2:#17130c; --border:#2e2515; --text:#ffc978; --text-muted:#b08745;
  --accent-base:#ff9c1f; --accent-hover:#ffb057; --accent-contrast:#1a1207; --nav-bg:#050403; --nav-text:#ffc978;
}
/* High contrast (Peripoli «Υψηλή αντίθεση») */
[data-preset="contrast"] {
  --bg:#ffffff; --surface:#ffffff; --surface-2:#eeeeee; --border:#000000; --text:#000000; --text-muted:#2b2b2b;
  --accent-base:#0033cc; --accent-hover:#002499; --accent-contrast:#ffffff; --nav-bg:#000000; --nav-text:#ffffff;
}
[data-preset="contrast"][data-mode="dark"] {
  --bg:#000000; --surface:#0a0a0a; --surface-2:#171717; --border:#ffffff; --text:#ffffff; --text-muted:#d6d6d6;
  --accent-base:#ffd400; --accent-hover:#ffe34d; --accent-contrast:#000000; --nav-bg:#000000; --nav-text:#ffd400;
}
/* Paper (Peripoli «Χαρτί») */
[data-preset="paper"] {
  --bg:#e9e5d9; --surface:#f7f4ea; --surface-2:#f0ece0; --border:#cfc7b3; --text:#23241f; --text-muted:#605e53;
  --accent-base:#35573f; --accent-hover:#294331; --accent-contrast:#f4f7f2; --nav-bg:#2c3b30; --nav-text:#eef0e6;
}
[data-preset="paper"][data-mode="dark"] {
  --bg:#131614; --surface:#1b1f1c; --surface-2:#222724; --border:#2e3630; --text:#e6e8df; --text-muted:#98a094;
  --accent-base:#7fb08a; --accent-hover:#96c19f; --accent-contrast:#0f130f; --nav-bg:#0f120f; --nav-text:#e6e8df;
}
/* The user's own accent beats the style's when set (contrast computed on the server). */
:root, [data-preset] {
  --accent:var(--accent-user, var(--accent-base));
  --accent-hover-eff:var(--accent-user, var(--accent-hover));
  --accent-on:var(--accent-contrast-user, var(--accent-contrast));
  /* Fixed status colours, readable in both modes. */
  --bad:#b91c1c; --danger-bg:#b91c1c; --ok-bg:#e3f4ea; --bad-bg:#fbe9e9; --badge-bg:#e6edf8; --badge-text:#1e3a8a;
}
[data-preset][data-mode="dark"] {
  /* A user accent is lightened in dark mode and gets dark text; the custom properties
     below are invalid (so the var() fallbacks apply) when no user accent is set. */
  --dark-user: color-mix(in srgb, var(--accent-user) 60%, white);
  --dark-on: color-mix(in srgb, var(--accent-user) 0%, #12100c);
  --accent:var(--dark-user, var(--accent-base));
  --accent-hover-eff:var(--dark-user, var(--accent-hover));
  --accent-on:var(--dark-on, var(--accent-contrast));
  --bad:#f87171; --danger-bg:#b91c1c; --ok-bg:#12301f; --bad-bg:#3a1717; --badge-bg:#1f2a44; --badge-text:#bcd0ff;
}
[data-preset="contrast"] { --ok-bg:#ffffff; --bad-bg:#ffffff; }
[data-preset="contrast"][data-mode="dark"] { --ok-bg:#000000; --bad-bg:#000000; }

/* ── Base ─────────────────────────────────────────────────────────────────── */
* { box-sizing:border-box; }
html { font-size:calc(16px * var(--font-scale)); }
body { margin:0; font:1rem/1.45 var(--ui-font); color:var(--text); background:var(--bg); }
a { color:var(--accent); }
a:hover { color:var(--accent-hover-eff); }
header.top { display:flex; align-items:center; gap:.4rem; padding:.5rem .75rem;
  background:var(--nav-bg); color:var(--nav-text); border-bottom:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:.5rem; font-weight:700; color:var(--nav-text); text-decoration:none; min-width:0; }
.brand:hover { color:var(--nav-text); }
.brand span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand .logo { height:28px; width:auto; flex:none; background:#fff; border-radius:6px; padding:2px 3px; }
main { max-width:60rem; margin:0 auto; padding:1rem; }
h1 { font-size:1.4rem; }
.stack { display:flex; flex-direction:column; gap:.75rem; max-width:28rem; }
label { display:flex; flex-direction:column; gap:.25rem; font-weight:600; }
label.check { flex-direction:row; align-items:center; font-weight:400; gap:.5rem; }
input, select, textarea, button { font:inherit; padding:.6rem .7rem; border:1px solid var(--border); border-radius:.4rem;
  background:var(--surface); color:var(--text); }
input[type=radio], input[type=checkbox] { padding:0; }
input[type=color] { padding:.15rem; width:3rem; height:2.5rem; }
button { background:var(--accent); color:var(--accent-on); border:none; min-height:2.75rem; cursor:pointer; }
button:hover { background:var(--accent-hover-eff); }
button.secondary { background:var(--surface); color:var(--text); border:1px solid var(--border); }
button.secondary:hover { background:var(--surface-2); }
button.danger { background:var(--danger-bg); color:#fff; }
button.link { background:none; color:var(--text); padding:0; min-height:0; text-decoration:underline; }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
form.inline { display:inline; }
.error, .field-error { color:var(--bad); }
.field-error { font-weight:400; font-size:.9rem; }
.flash { padding:.6rem .8rem; border-radius:.4rem; background:var(--ok-bg); border:1px solid var(--border); }
.flash.error { background:var(--bad-bg); }
.hint, .muted { color:var(--text-muted); }
.cards { display:flex; flex-direction:column; gap:.75rem; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:.6rem; padding:.8rem 1rem; }
.card.past { opacity:.6; }
.card.cancelled .title { text-decoration:line-through; }
.badge { display:inline-block; padding:.05rem .45rem; border-radius:.3rem; background:var(--badge-bg); color:var(--badge-text); font-size:.85rem; }
.missing { color:var(--bad); font-size:.9rem; }
table { width:100%; border-collapse:collapse; background:var(--surface); }
th, td { text-align:left; padding:.5rem; border-bottom:1px solid var(--border); vertical-align:top; }
.thumb { width:3rem; height:3rem; object-fit:cover; border-radius:50%; }
.thumb.initials { display:inline-flex; align-items:center; justify-content:center; background:var(--accent); color:var(--accent-on);
  font-weight:600; font-size:.95rem; }
.row { display:flex; flex-wrap:wrap; gap:.75rem; }
.row > label { flex:1 1 9rem; }
fieldset { border:1px solid var(--border); border-radius:.6rem; padding:.8rem; background:var(--surface); margin:0 0 1rem; }
legend { font-weight:600; padding:0 .3rem; }
@media (min-width: 48rem) { .cards.wide { display:none; } }
@media (max-width: 47.99rem) { table.wide { display:none; } }
@media (max-width: 30rem) { #seminar-form .row > label { flex-basis:100%; } }

/* ── Home: next seminar ───────────────────────────────────────────────────── */
.card.next { padding:1rem 1.2rem; border-color:var(--accent); border-width:2px; margin-bottom:1rem; }
.card.next h2 { margin:0 0 .4rem; font-size:1.05rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.next-when { margin:.2rem 0; font-size:1.1rem; }
.next-title { margin:.2rem 0 .8rem; font-size:1.35rem; font-weight:700; }
.next-title a { text-decoration:none; }
.segment { padding:.5rem 0; border-top:1px solid var(--border); }
.speakers { display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin-top:.4rem; }
.speaker { display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--text); }
.next-zoom { overflow-wrap:anywhere; }

/* ── Login page: designer photos as background ────────────────────────────── */
body.login-page { min-height:100vh; background:#0f1d3a url("img/login-desktop.jpg") left center / cover no-repeat; }
body.login-page header.top { background:transparent; border-bottom:none; color:#fff; }
body.login-page .brand { color:#fff; }
body.login-page main { max-width:none; display:flex; justify-content:flex-end; padding:6vh 6vw; }
.login-card { width:100%; max-width:24rem; background:var(--surface); color:var(--text); border-radius:.8rem;
  padding:1.4rem 1.5rem; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.login-card h1 { margin-top:0; }
.login-logo { display:block; height:48px; width:auto; margin-bottom:.6rem; }
@media (max-width: 47.99rem), (orientation: portrait) {
  body.login-page { background-image:url("img/login-mobile.jpg"); background-position:center bottom; }
  body.login-page main { justify-content:center; padding:4vh 1rem; }
}

/* ── Dropdown menus (<details class="dropdown">): hamburger left, user circle right ── */
.dropdown { position:relative; }
.dropdown summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; color:var(--nav-text); }
.dropdown summary::-webkit-details-marker { display:none; }
.dropdown summary:hover, .dropdown[open] summary { background:rgba(255,255,255,.14); }
.dropdown summary .ico { width:24px; height:24px; }
.dropdown .menu { position:absolute; top:calc(100% + .3rem); min-width:14rem; z-index:20; background:var(--surface);
  color:var(--text); border:1px solid var(--border); border-radius:.6rem; box-shadow:0 10px 30px rgba(0,0,0,.25); padding:.3rem 0; }
.nav-menu .menu { left:0; }
.user-menu { margin-left:auto; }
.user-menu .menu { right:0; }
.user-menu .avatar { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:50%; background:var(--accent); color:var(--accent-on); font-size:.82rem; font-weight:600; letter-spacing:.02em;
  box-shadow:0 0 0 2px var(--nav-text); }
.dropdown .who { padding:.5rem 1rem .6rem; }
.dropdown .who b { display:block; font-weight:600; }
.dropdown .who small { display:block; color:var(--text-muted); font-size:.8rem; }
.dropdown hr { border:0; border-top:1px solid var(--border); margin:.3rem 0; }
.dropdown .menu a, .dropdown .menu button { display:flex; align-items:center; gap:.65rem; width:100%; min-height:44px;
  padding:0 1rem; background:none; border:0; border-radius:0; color:var(--text); text-decoration:none;
  font:inherit; font-weight:400; text-align:left; cursor:pointer; }
.dropdown .menu a:hover, .dropdown .menu button:hover { background:var(--surface-2); color:var(--text); }
.dropdown .menu a[aria-current="page"] { font-weight:700; color:var(--accent); box-shadow:inset 3px 0 0 var(--accent); }
.dropdown .menu .ico { flex:none; opacity:.85; }
.dropdown form { margin:0; }

/* ── Settings page ────────────────────────────────────────────────────────── */
.settings { max-width:46rem; }
.seg-group { display:flex; flex-wrap:wrap; gap:.4rem; }
.seg { flex:1 1 6rem; flex-direction:row; position:relative; font-weight:400; }
.seg input { position:absolute; opacity:0; pointer-events:none; }
.seg span { flex:1; text-align:center; padding:.6rem .7rem; min-height:2.75rem; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:.4rem; background:var(--surface); cursor:pointer; }
.seg input:checked + span { background:var(--accent); color:var(--accent-on); border-color:var(--accent); }
.seg input:focus-visible + span { outline:3px solid var(--accent); outline-offset:2px; }
.legend-like { font-weight:600; display:block; margin-bottom:.25rem; }
.field-group { flex:2 1 16rem; }
.sample { margin:.8rem 0 0; padding:.6rem .8rem; background:var(--surface-2); border-radius:.4rem; }
.preset-grid { display:grid; gap:.75rem; grid-template-columns:1fr; }
@media (min-width: 36rem) { .preset-grid { grid-template-columns:1fr 1fr; } }
.preset-option { display:block; cursor:pointer; margin:0; font-weight:400; }
.preset-option input { position:absolute; opacity:0; pointer-events:none; }
.preset-card, .preset-why, .preview, .preview-bar, .preview-body, .preview-line { display:block; }
.preset-card { border:2px solid var(--border); border-radius:.5rem; overflow:hidden; background:var(--surface); }
.preset-option input:focus-visible + .preset-card { outline:3px solid var(--accent); outline-offset:2px; }
.preset-option input:checked + .preset-card { border-color:var(--accent); }
.preset-name { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.5rem .7rem; font-weight:600; }
.preset-check { color:var(--accent); visibility:hidden; }
.preset-option input:checked + .preset-card .preset-check { visibility:visible; }
.preset-why { padding:0 .7rem .55rem; font-size:.8rem; color:var(--text-muted); line-height:1.35; }
.preview-pair { display:grid; grid-template-columns:1fr 1fr; }
.preview { background:var(--bg); padding:.5rem; border-top:1px solid var(--border); }
.preview + .preview { border-left:1px solid var(--border); }
.preview-bar { background:var(--nav-bg); color:var(--nav-text); font-size:.65rem; padding:.2rem .35rem; border-radius:3px 3px 0 0; }
.preview-bar .ico { width:.8em; height:.8em; vertical-align:-.1em; }
.preview-body { background:var(--surface); border:1px solid var(--border); border-top:0; border-radius:0 0 3px 3px; padding:.4rem .35rem; }
.preview-line { height:5px; border-radius:3px; background:var(--text); opacity:.8; }
.preview-line.short { width:55%; margin-top:4px; opacity:.4; }
.preview-btn { margin-top:6px; display:inline-block; background:var(--accent-base); color:var(--accent-contrast);
  font-size:.6rem; padding:.12rem .4rem; border-radius:3px; }
.swatch-row { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.swatch { width:2.75rem; height:2.75rem; min-height:0; padding:0; border-radius:50%; border:2px solid var(--border); }
.swatch:hover { filter:brightness(1.1); }
.swatch[aria-pressed="true"] { outline:3px solid var(--text); outline-offset:2px; }