/* ===== Tokens ===== */
:root {
  --bg: oklch(0.985 0.004 250);
  --surface: oklch(0.995 0.002 250);
  --surface-sunk: oklch(0.965 0.006 250);
  --ink: oklch(0.25 0.02 250);
  --ink-2: oklch(0.45 0.02 250);
  --ink-3: oklch(0.52 0.015 250);
  --muted: var(--ink-3);
  --line: oklch(0.9 0.008 250);
  --line-strong: oklch(0.82 0.012 250);
  --accent: oklch(0.55 0.13 235);
  --accent-strong: oklch(0.48 0.13 235);
  --accent-ink: oklch(0.99 0.005 235);
  --accent-soft: oklch(0.95 0.02 235);
  --radius-panel: 8px;
  --radius-control: 4px;
  --shadow-pop: 0 1px 2px oklch(0.25 0.02 250 / 0.06);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 180ms;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ===== Header ===== */
.app-header { background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 20px; }
.app-header h1 { font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin: 0; color: var(--ink); }

main { max-width: 1100px; margin: 0 auto; padding: 16px; }

/* ===== Panels ===== */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 14px 16px; margin-bottom: 12px; }
.panel h2 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin: 0 0 12px; }

/* ===== Settings fields grid ===== */
#panel-settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 16px; align-items: end; }
#panel-settings h2 { grid-column: 1 / -1; margin-bottom: 0; }
#panel-settings .field { margin: 0; }
#panel-settings .field:last-child { grid-column: 1 / -1; }

.field { display: inline-flex; flex-direction: column; margin: 0 12px 10px 0; vertical-align: top; }
.field label { font-size: 11px; color: var(--ink-3); margin-bottom: 4px; font-weight: 500; letter-spacing: .02em; }

/* ===== Controls ===== */
input, select {
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
input:hover, select:hover { border-color: var(--ink-3); }
input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); box-shadow: none; }
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235b6470' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
input[type="checkbox"] { appearance: auto; -webkit-appearance: checkbox; width: 14px; height: 14px; padding: 0; accent-color: var(--accent); }
input[type="number"], input[type="date"] { font-variant-numeric: tabular-nums; }

.checks { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 3px 0; cursor: pointer; }

/* ===== Buttons ===== */
button {
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform 120ms var(--ease-out);
}
button:hover { background: var(--accent-strong); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
button.secondary:hover { background: var(--surface-sunk); border-color: var(--ink-3); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
#panel-actions button + button { margin-left: 6px; }

/* ===== Tabs ===== */
.tabs { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.tabs button { background: transparent; color: var(--ink-3); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 6px 10px; margin-bottom: -1px; font-weight: 500; }
.tabs button:hover { color: var(--ink); }
.tabs button.active { color: var(--ink); border-bottom-color: var(--accent); background: transparent; }
.tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.hint { font-size: 12px; color: var(--ink-3); }
.muted { color: var(--ink-3); }

/* ===== Εγγραφο — ΑΚΙΝΗΤΟ block (αντιγραφή verbatim από το παλιό αρχείο) ===== */
.doc { background:#fff; }
.doc.plan { page-break-inside: avoid; }
.doc-table { width:100%; border-collapse:collapse; margin:8px 0 14px; font-size:11px; }
.doc-table th, .doc-table td { border:1px solid #333; padding:4px 6px; vertical-align:top; }
.doc-table th { background:#e8edf5; text-align:left; }
.doc-table td.phase { font-weight:600; width:90px; }
.doc-title { font-size:16px; margin:0 0 4px; }
.doc-sub { font-size:12px; color:#333; margin:2px 0; }
.plan-title { font-size:14px; margin:18px 0 4px; }
.grade-block, .group-block { margin-bottom:18px; }
.doc-note { font-size:11px; color:#333; }
@media print {
  body { background:#fff; }
  .app-header, #panel-settings, #panel-units, #panel-assign, #panel-actions, #grade-tabs { display:none !important; }
  main { max-width:none; padding:0; }
  .panel { border:0; padding:0; margin:0; }
  .grade-results[hidden] { display:block !important; }
  .doc.plan { page-break-after: always; }
  #panel-results > .grade-results:last-child > .doc.plan:last-child { page-break-after: auto; }
  @page { size: A4; margin: 18mm 16mm; }
}

/* ===== Print restore — αποκαθιστά την παλιά απόδοση εκτύπωσης (screen rules δεν διαρρέουν) ===== */
@media print {
  body { font-size:16px; line-height:normal; color:#1a1a1a; font-family:"Segoe UI", Arial, sans-serif; }
  .panel h2 { font-size:15px; font-weight:bold; text-transform:none; letter-spacing:0; color:#1a1a1a; margin:0 0 10px; }
}

/* ===== Assign table (chrome) — μετά το doc block ώστε να υπερισχύει ===== */
.assign-table { font-size: 12px; }
.assign-table th { background: var(--surface-sunk); color: var(--ink-3); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; border: 1px solid var(--line); }
.assign-table td { border: 1px solid var(--line); }
.assign-table td select { width: 100%; }
.assign-table .assign-block-row td { background: var(--surface-sunk); color: var(--ink-2); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.assign-table .station-focus-row td { background: var(--surface-sunk); padding-top: 2px; }
.assign-table .station-focus-row select { margin-right: 6px; width: auto; min-width: 130px; }

/* ===== Results chrome (screen μόνο — το print μένει ίδιο) ===== */
@media screen {
  #panel-results .doc { border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 18px 20px; margin-bottom: 12px; box-shadow: var(--shadow-pop); }
  #panel-results .doc p { max-width: 90ch; }
}

/* ===== Responsive ===== */
@media (max-width: 760px) {
  main { padding: 10px; }
  #panel-results .doc { overflow-x: auto; }
  .assign-table thead { display: none; }
  .assign-table, .assign-table tbody { display: block; width: 100%; }
  .assign-table tr { display: block; border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 10px 12px; margin-bottom: 8px; background: var(--surface); }
  .assign-table td { display: block; border: 0; padding: 4px 0; }
  .assign-table td::before { content: attr(data-label); display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin-bottom: 2px; }
  .assign-table td:empty { display: none; }
  .assign-table .assign-block-row { border: 0; background: transparent; padding: 2px 0 4px; margin: 12px 0 6px; }
  .assign-table .assign-block-row td { padding: 0; }
  .assign-table .station-focus-row { background: var(--surface-sunk); }
  .assign-table .station-focus-row select { width: 100%; min-width: 0; margin: 2px 0; }
}