/* Shared design tokens for every page -- the Organic design system (Claude Design handoff "Medical Air Mobile"),
   the same one the phone app uses: public/m/organic.css is the source of truth for the palette, ramps, radii and
   fonts. This file maps those onto the token names the desktop pages already use (--bg, --panel, --text, --muted,
   --border, --accent ...) so the whole platform re-themes at once instead of page by page.

   Loaded via <link rel="stylesheet" href="/theme.css"> placed AFTER each page's own inline <style> block in
   <head> -- CSS custom properties on the same selector (:root) resolve by source order at equal specificity, so
   this file's tokens win over each page's old hardcoded ones without deleting a line of page-specific layout CSS.
   The structural rules below (radius, shadow, pill buttons/inputs, table polish) are additive polish, same
   reasoning: tokens and component polish only, layouts stay.

   Light is the base palette; dark only redefines colour tokens (device / light / dark, see any page's own <head>
   script). Contrast: the plain accent on cream is only ~3:1, so --accent here is the 600 step (#b2622d) and
   small accent-coloured TEXT uses --accent-strong (the 700 step).

   Fonts are vendored under /m/fonts (OFL, Greek + Latin subsets) -- no CDN.

   Two colours, one rule (2026-10-14, «Πετρόλ + Χαλκός», shared with the medicalair.gr site): --brand* (teal) is
   WHO WE ARE -- the logo, the page you are on, links, section labels, the focus ring; --accent* (copper) is WHAT YOU
   PRESS -- primary buttons, the "+" button, segmented controls. States (ok/warn/bad) keep their own colours.
   Contrast (light): teal #0b6e6b on the cream ground 5.1:1, on --brand-bg 5.0:1. The person can go back to the
   all-copper look ("Κλασικά χρώματα" in the menu): nav.js sets <html data-look="classic">, which points the
   --brand* tokens at the copper ones. */

@font-face { font-family: "Piazzolla"; font-weight: 800; font-display: swap; src: url(/m/fonts/piazzolla-greek-800-normal.woff2) format("woff2"); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF,U+1F00-1FFF; }
@font-face { font-family: "Piazzolla"; font-weight: 800; font-display: swap; src: url(/m/fonts/piazzolla-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Commissioner"; font-weight: 400; font-display: swap; src: url(/m/fonts/commissioner-greek-400-normal.woff2) format("woff2"); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF,U+1F00-1FFF; }
@font-face { font-family: "Commissioner"; font-weight: 400; font-display: swap; src: url(/m/fonts/commissioner-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Commissioner"; font-weight: 600; font-display: swap; src: url(/m/fonts/commissioner-greek-600-normal.woff2) format("woff2"); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF,U+1F00-1FFF; }
@font-face { font-family: "Commissioner"; font-weight: 600; font-display: swap; src: url(/m/fonts/commissioner-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Commissioner"; font-weight: 700; font-display: swap; src: url(/m/fonts/commissioner-greek-700-normal.woff2) format("woff2"); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF,U+1F00-1FFF; }
@font-face { font-family: "Commissioner"; font-weight: 700; font-display: swap; src: url(/m/fonts/commissioner-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --font-heading: "Piazzolla", Georgia, serif;
  --font-body: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;

  --bg: #f5ead8;
  --panel: #f9f4ed;
  --panel-2: #eee7db;            /* table headers, quiet fills */
  --text: #201e1d;
  --muted: #645c50;
  --border: color-mix(in srgb, #201e1d 16%, transparent);
  --accent: #b2622d;             /* accent ramp 600: fills AND text pass 4.5:1 on the cream panels */
  --accent-strong: #8c491a;      /* ramp 700: small accent text */
  --accent-ink: #f9f4ed;
  --accent-bg: #fff2eb;
  --danger: #a3342b;
  --warn: #8a5a00;
  --input-bg: #ebddc5;
  --row-hover: #f1e6d4;
  --shadow: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent), 0 3px 10px color-mix(in srgb, #2e2b25 12%, transparent);
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
  --radius: 28px;
  --radius-md: 16px;

  /* states: sage for ok/transmitted/added, amber for warnings, danger for errors */
  --ok: #56633f; --ok-bg: #e1eecc;
  --add: #56633f; --add-bg: #e1eecc;
  --warn-bg: #f7e6b8;
  --bad: var(--danger); --bad-bg: #f6ddd9;
  --del: var(--danger); --del-bg: #f6ddd9;
  --upd: #8a5a00; --upd-bg: #f7e6b8;
  --brand: #0b6e6b; --brand-strong: #0b6e6b; --brand-bg: #e2ece6;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1a17; --panel: #27241f; --panel-2: #2e2b25; --text: #f5ead8; --muted: #c0b6a5;
    --border: rgba(245, 234, 216, 0.18);
    --accent: #d67f48; --accent-strong: #f6a06b; --accent-ink: #1c1a17; --accent-bg: #402310;
    --danger: #f08b82; --warn: #e0b84d; --input-bg: #2e2b25; --row-hover: #322f28;
    --shadow: 0 0 0 1px rgba(245, 234, 216, 0.06), 0 4px 14px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 0 0 1px rgba(245, 234, 216, 0.06); --shadow-md: 0 0 0 1px rgba(245, 234, 216, 0.08), 0 6px 18px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
    --ok: #aebf92; --ok-bg: #3d472b; --add: #aebf92; --add-bg: #3d472b;
    --warn-bg: #4a3a12; --bad-bg: #4a2320; --del-bg: #4a2320; --upd: #e0b84d; --upd-bg: #4a3a12;
    --brand: #3fc1b6; --brand-strong: #5fd0c4; --brand-bg: #16302b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1c1a17; --panel: #27241f; --panel-2: #2e2b25; --text: #f5ead8; --muted: #c0b6a5;
  --border: rgba(245, 234, 216, 0.18);
  --accent: #d67f48; --accent-strong: #f6a06b; --accent-ink: #1c1a17; --accent-bg: #402310;
  --danger: #f08b82; --warn: #e0b84d; --input-bg: #2e2b25; --row-hover: #322f28;
  --shadow: 0 0 0 1px rgba(245, 234, 216, 0.06), 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 0 0 1px rgba(245, 234, 216, 0.06); --shadow-md: 0 0 0 1px rgba(245, 234, 216, 0.08), 0 6px 18px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  --ok: #aebf92; --ok-bg: #3d472b; --add: #aebf92; --add-bg: #3d472b;
  --warn-bg: #4a3a12; --bad-bg: #4a2320; --del-bg: #4a2320; --upd: #e0b84d; --upd-bg: #4a3a12;
  --brand: #3fc1b6; --brand-strong: #5fd0c4; --brand-bg: #16302b;
  color-scheme: dark;
}
/* "Κλασικά χρώματα": identity back to copper (after the dark blocks, so it wins in both themes) */
:root[data-look="classic"] { --brand: var(--accent); --brand-strong: var(--accent-strong); --brand-bg: var(--accent-bg); }

/* ---- type ---- */
html body { font-family: var(--font-body); background: var(--bg); color: var(--text); }
h1, h2, h3, .topbar h1, .hello, #gsidebar .brand {
  font-family: var(--font-heading); font-weight: 800; letter-spacing: 0;
}
th { font-family: var(--font-body); font-weight: 700; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

/* ---- links ---- */
a { text-underline-offset: 3px; }
td a, .meta a { color: var(--brand-strong); text-decoration: none; }
td a:hover, .meta a:hover { text-decoration: underline; }

/* ---- containers: over-rounded, soft shadow ---- */
.panel,
.card,
#modal .box,
#importModal .box,
#pickerModal .box,
#xmlOutput .box {
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}

/* ---- tables (the Organic .table look): themed header + hairline rules ---- */
table { box-shadow: var(--shadow-sm); border-radius: var(--radius-md); overflow: hidden; border-collapse: separate; border-spacing: 0; background: var(--panel); }
th { background: var(--panel-2); color: var(--muted); text-transform: none; }
th, td { border-bottom: 1px solid var(--border); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--row-hover); }
/* digits of equal width: amounts and serials line up down a column */
table, .num { font-variant-numeric: tabular-nums; }

/* ---- buttons: pills. Primary = accent fill; everything else a quiet pill ---- */
html button, html .btn, html a.btn { border-radius: 999px !important; font-family: var(--font-body); font-weight: 600; }
/* Fill = the 700 step (--accent-strong): cream text on the 600 step was only 4.1:1, under the 4.5:1 small text
   needs; on the 700 step it is 6.2:1. Dark theme: --accent-strong is the light orange with dark --accent-ink. */
html button.primary, html .add-line, html button.gen, html button.pay { background: var(--accent-strong); color: var(--accent-ink); border-color: var(--accent-strong); }
html button.primary:hover:not(:disabled) { filter: brightness(1.06); }
button.primary { box-shadow: var(--shadow-sm); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- inputs: pills (textareas keep a softer corner); heavy ring on keyboard focus ---- */
html input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
html select {
  border-radius: 999px; background: var(--input-bg); color: var(--text);
  border: 1px solid var(--border); padding-inline: 14px; font-family: var(--font-body);
}
html textarea { border-radius: var(--radius-md); background: var(--input-bg); color: var(--text); border: 1px solid var(--border); font-family: var(--font-body); }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--text) 45%, transparent); }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: color-mix(in srgb, var(--text) 45%, transparent); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* ---- segmented pill controls (tabs / toggles) ---- */
.tabs, .seg, .segmented { background: var(--panel-2); border-radius: 999px; padding: 3px; gap: 2px; }
.tabs button, .seg button, .segmented button { border: 0; background: transparent; color: var(--muted); }
.tabs button.active, .seg button.active, .segmented button.active { background: var(--accent); color: var(--accent-ink); }

/* ---- sidebar: cream ground, the active item an accent-tinted pill ---- */
#gsidebar { background: var(--bg); box-shadow: var(--shadow-md); }
#gsidebar .brand { font-size: 1.1rem; }
#gsidebar a.item { border-radius: 999px; padding: 9px 14px; }
#gsidebar a.item .ic { font-size: 1rem; }
#gsidebar a.item.active { background: var(--brand-bg); color: var(--brand-strong); }

/* ---- the breathing-line logo (same mark as the site) and the section label above a page title ---- */
.gwave { flex: none; color: var(--brand); }
html[data-look="classic"] .gwave, html[data-look="classic"] .geyebrow { display: none !important; }
html:not([data-look="classic"]) #gsidebar .brand .dot { display: none; }
.geyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 800 0.7rem/1.2 var(--font-body); letter-spacing: 0.14em; color: var(--brand-strong); }
.geyebrow::before { content: ""; width: 16px; height: 1.5px; background: currentColor; flex: none; }

@media print {
  :root { --bg: #fff; --panel: #fff; --panel-2: #fff; --text: #000; --muted: #333; --border: #999; --input-bg: #fff; --shadow: none; --shadow-sm: none; --shadow-md: none; }
  html body { background: #fff; color: #000; }
  .panel, .card, table { box-shadow: none; }
}

/* ---- tables that fit a phone: <table data-cards> + /ui-tables.js (which fills each cell's data-label).
   Child combinators only: a smaller table inside a cell keeps its normal layout. ---- */
@media (max-width: 640px) {
  html table[data-cards], html table[data-cards] > tbody { display: block; width: 100%; box-shadow: none; background: transparent; border-radius: 0; overflow: visible; }
  html table[data-cards] > thead { display: none; }
  html table[data-cards] > tbody > tr { display: block; margin: 0 0 10px; padding: 8px 14px; background: var(--panel); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
  html table[data-cards] > tbody > tr:hover > td { background: transparent; }
  html table[data-cards] > tbody > tr > td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; border: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
  html table[data-cards] > tbody > tr > td::before { content: attr(data-label); flex: none; max-width: 45%; text-align: left; color: var(--muted); font-weight: 600; font-size: 0.78rem; }
  html table[data-cards] > tbody > tr > td[data-label=""]::before { content: none; }
  html table[data-cards] > tbody > tr > td[data-label=""] { justify-content: flex-end; }
  html table[data-cards] > tbody > tr > td[colspan] { display: block; text-align: left; }
}