/* ═══════════════════════════════════════════════════════════════════════════════
   DNA.css — JEDINÝ zdroj designu Developer Tools (kalkulačka, rozcestník, login, správa).
   Pravidla a proč: /DNA.md v kořeni repa. Před přidáním třídy nebo barvy si ho přečti.
   Načítá se všude jako první stylesheet; kalkulačka ho má inlinovaný v bundlu (tools/build-calculator.mjs).
   Verze tokenů: 2026-09-25.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Tokeny ─────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  /* Grafit / ink — neutrální paleta, barva jen pro STAV (zelená/oranžová/červená). */
  --accent-h: 255;
  --accent: oklch(38% 0.028 var(--accent-h));
  --accent-soft: oklch(96.5% 0.006 var(--accent-h));
  --accent-line: oklch(88% 0.01 var(--accent-h));
  --bg: oklch(98.6% 0.0015 var(--accent-h));
  --surface: #ffffff;
  --surface-2: oklch(97.6% 0.003 var(--accent-h));
  --border: oklch(91.5% 0.004 var(--accent-h));
  --border-soft: oklch(94.5% 0.003 var(--accent-h));
  --text: oklch(24% 0.012 var(--accent-h));
  --muted: oklch(54% 0.01 var(--accent-h));
  --placeholder: oklch(72% 0.008 var(--accent-h));
  --green: #15803d;  --green-soft: #f3faf5;  --green-line: oklch(88% 0.06 150);
  --red: #c0322b;    --red-soft: #fcf4f3;    --red-line: oklch(85% 0.06 25);
  --orange: #b45309; --orange-soft: #fdf8f1; --orange-line: oklch(88% 0.06 70);
  --blue: #2563eb;
  --ink-dark: oklch(20% 0.02 var(--accent-h));   /* tooltip, toast */
  /* Stíny jen pro překryvy (okna, toast); karty stojí na vlasových linkách. */
  --shadow-sm: none;
  --shadow: 0 4px 12px rgba(17, 20, 26, 0.06), 0 2px 4px rgba(17, 20, 26, 0.04);
  --shadow-lg: 0 16px 40px rgba(17, 20, 26, 0.14);
  --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-pill: 999px;
  /* Mřížka 4 px — všechny mezery, paddingy a výšky jsou násobky 4. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  /* Jedna výška pro ovladače v lištách: tlačítka, přepínače, selecty; malá pro štítky a mini tlačítka. */
  --ctl-h: 32px; --ctl-h-sm: 26px; --ctl-h-lg: 40px;
  --hdr-h: 60px;
  --sidebar-w: 360px;
  --page-w: 1040px;
  /* Typografická škála (px): 10 · 11 · 12 · 13 · 14 · 15 · 16 · 19 · 22 · 44. Menší než 10 se nepoužívá (výjimka SVG grafů). */
  --fs-xs: 10px; --fs-sm: 11px; --fs: 12px; --fs-md: 13px; --fs-lg: 14px; --fs-h4: 15px; --fs-xl: 16px; --fs-kpi: 19px; --fs-h: 22px; --fs-grade: 44px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Helvetica, sans-serif;
  --density: 1;
}

/* ─── 2. Základ ──────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-lg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;   /* finanční čísla pod sebou lícují */
}
input, button, select, textarea { font-family: inherit; }
a { color: inherit; }
.icon { display: inline-block; vertical-align: -2px; flex-shrink: 0; }
/* Fokus z klávesnice je vždy vidět, stejně u všech ovladačů. */
:is(button, [role="button"], a.btn-ghost, a.btn-primary, select, input[type="search"], .seg-btn):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ─── 3. Tlačítka ─────────────────────────────────────────────────────────────
   Kanonické: .btn-primary (max. 1 na pohled) · .btn-ghost · .btn-ghost.danger · velikost .sm (26 px) · .wide.
   Legacy aliasy (nepoužívat v novém kódu): .btn = .btn-primary, .btn-ghost-sm = .btn-ghost.sm, .btn-danger-sm = .btn-ghost.danger.sm */
.btn-primary, .btn-ghost, .btn, .btn-ghost-sm, .btn-danger-sm {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--ctl-h); padding: 0 var(--s-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--fs); font-weight: 500; line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: border-color .12s, color .12s, background .12s, filter .12s;
}
.btn-primary .icon, .btn-ghost .icon { opacity: 0.8; }
.btn-ghost:hover, .btn-ghost-sm:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn-primary, .btn { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.btn-primary:hover, .btn:hover { filter: brightness(0.92); }
.btn-ghost.danger, .btn-danger-sm { border-color: var(--red-line); color: var(--red); }
.btn-ghost.danger:hover { background: var(--red-soft); border-color: var(--red); }
.btn-danger-sm:hover { background: var(--red); color: #fff; border-color: var(--red); }
.btn-ghost.sm, .btn-primary.sm, .btn.sm, .btn-ghost-sm, .btn-danger-sm { height: var(--ctl-h-sm); padding: 0 var(--s-2); font-size: var(--fs-sm); gap: 4px; color: var(--muted); }
.btn-primary.sm, .btn.sm { color: #fff; }
.btn-danger-sm { color: var(--red); }
.btn-ghost.wide, .btn-primary.wide, .btn.wide { width: 100%; height: var(--ctl-h-lg); font-size: var(--fs-lg); }
.btn-ghost.lg, .btn-primary.lg, .btn.lg { height: var(--ctl-h-lg); font-size: var(--fs-lg); padding: 0 var(--s-4); }
/* Zapnutý přepínač (aria-pressed) = tichá výplň; text tlačítka se NEMĚNÍ, aby lišta neskákala. */
.btn-ghost.toggle[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.btn-ghost.toggle[aria-pressed="false"] .icon { opacity: 0.5; }
/* Neaktivní = zeslabené, NIKDY skryté (rozložení se nesmí měnit). */
:is(.btn-primary, .btn-ghost, .btn, .btn-ghost-sm, .btn-danger-sm):disabled { opacity: 0.4; cursor: default; filter: none; }
:is(.btn-ghost, .btn-ghost-sm):disabled:hover { color: var(--muted); border-color: var(--border); background: var(--surface); }

/* ─── 4. Štítky a tagy ───────────────────────────────────────────────────────
   .badge  = stavový štítek (pill 26 px, muted) + varianty .ok/.warn/.err (tečka .dot volitelně), .tag = plný accent (typ / role)
   .chip   = mini štítek 18 px (u názvů: „aktivní“, autor, „jen náhled“). Legacy alias: .badge-small = .chip */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--ctl-h-sm); padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--border-soft);
  font-size: var(--fs-sm); font-weight: 500; line-height: 1; white-space: nowrap;
}
.badge b { color: var(--text); font-weight: 600; }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.badge.ok,  .badge.badge-saved, .badge.badge-ok   { color: var(--green);  border-color: var(--green-line);  background: var(--green-soft); }
.badge.ok .dot, .badge.badge-saved .dot           { background: var(--green); }
.badge.warn, .badge.badge-draft, .badge.badge-sync-off { color: var(--orange); border-color: var(--orange-line); background: var(--orange-soft); }
.badge.warn .dot, .badge.badge-draft .dot, .badge.badge-sync-off .dot { background: var(--orange); }
.badge.err, .badge.badge-error                    { color: var(--red);    border-color: var(--red-line);    background: var(--red-soft); }
.badge.err .dot, .badge.badge-error .dot          { background: var(--red); }
.badge.tag, .badge.admin, .badge.super { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.badge.admin { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.badge .sync { font-weight: 400; opacity: .85; }
/* Stavový štítek s proměnným textem má min. šířku, aby lišta neskákala. */
.badge.badge-status { min-width: 172px; justify-content: center; }
.chip, .badge-small {
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  background: var(--accent); color: #fff;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; white-space: nowrap;
}
.chip.owner, .badge-small.owner { background: var(--surface-2); color: var(--muted); border-color: var(--border-soft); text-transform: none; letter-spacing: 0; font-weight: 600; }
.chip.owner.mine, .badge-small.owner.mine { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.chip.lock, .badge-small.lock { background: var(--orange-soft); color: var(--orange); border-color: var(--orange-line); text-transform: none; letter-spacing: 0; }
.chip.ok { background: var(--green-soft); color: var(--green); border-color: var(--green-line); text-transform: none; letter-spacing: 0; font-weight: 600; }
.chip.warn { background: var(--orange-soft); color: var(--orange); border-color: var(--orange-line); text-transform: none; letter-spacing: 0; font-weight: 600; }
.chip.count, .seg-count { height: 16px; padding: 0 6px; background: var(--surface-2); color: var(--muted); border-color: var(--border-soft); text-transform: none; letter-spacing: 0; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ─── 5. Segmentovaný přepínač (záložky / režimy) ──────────────────────────── */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 2px; gap: 2px; }
.seg-btn { font: inherit; font-size: var(--fs); font-weight: 500; color: var(--muted); background: transparent; border: 0; border-radius: 5px; height: var(--ctl-h-sm); padding: 0 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.seg-btn:hover { color: var(--text); }
.seg-btn.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(17,20,26,.08); }
.seg-btn.on .seg-count { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.seg.seg-sm { padding: 1px; }
.seg.seg-sm .seg-btn { height: 20px; font-size: var(--fs-xs); padding: 0 7px; }

/* ─── 6. Formulářové prvky (PHP stránky + okna). Sidebar kalkulačky má vlastní .field řádky. ── */
.label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--muted); letter-spacing: 0.01em; margin-bottom: 6px; }
.input, select.input, textarea.input {
  width: 100%; height: var(--ctl-h-lg); padding: 0 var(--s-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font: inherit; font-size: var(--fs-lg); outline: none;
  transition: border-color .12s, box-shadow .12s;
}
textarea.input { height: auto; padding: var(--s-2) var(--s-3); }
.input.sm { height: var(--ctl-h); font-size: var(--fs-md); padding: 0 10px; }
.input::placeholder { color: var(--placeholder); }
.input:hover { border-color: var(--accent-line); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input[readonly] { background: var(--surface-2); color: var(--muted); border-style: dashed; }
/* Zaškrtávátka a přepínače v barvě akcentu všude (ne systémová modrá). */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
/* Rozbalovací pole (select) – JEDEN vzhled všude: bez nativní šipky a systémového přechodu, vlastní chevron vpravo.
   Pravidlo má záměrně vyšší specificitu než místní třídy (které nastavují `background:` zkratkou), aby chevron
   nezmizel; barvu pozadí, rámeček, výšku a písmo určuje místní třída nebo `.input`. Místní pravidlo jen přidá
   `padding-right` ≥ 20 px, aby text nezajel pod chevron. Výjimka: `select.native` / [multiple] / [size]. */
select:not([multiple]):not([size]):not(.native) {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 13px) 55%, calc(100% - 8px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
select:not([multiple]):not([size]):not(.native):disabled { cursor: default; opacity: .6; }
select.input, select.print-mode, select.variant-switch { padding-right: 28px; }
/* Hledací pole (ikona vlevo, Esc/× vpravo) */
.search { flex: 1; display: flex; align-items: center; gap: var(--s-2); height: var(--ctl-h); padding: 0 var(--s-2) 0 var(--s-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color .12s, box-shadow .12s; }
.search .icon { color: var(--muted); flex: none; }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--fs-md); color: var(--text); -webkit-appearance: none; }
.search input::-webkit-search-cancel-button { display: none; }
.search input::placeholder { color: var(--placeholder); }
.search kbd { font: inherit; font-size: var(--fs-xs); color: var(--muted); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; height: 18px; display: inline-flex; align-items: center; }
.search-clear { border: 0; background: var(--surface-2); color: var(--muted); width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: var(--fs-lg); line-height: 1; display: grid; place-items: center; }
.search-clear:hover { background: var(--border); color: var(--text); }

/* ─── 7. Karty, texty, hlášky ───────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-4) var(--s-5); box-shadow: var(--shadow-sm); }
.card-title { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--s-3); display: flex; align-items: center; gap: var(--s-2); min-height: 16px; }
.hint { font-size: var(--fs-sm); color: var(--muted); }
.empty { padding: var(--s-8) var(--s-5); text-align: center; color: var(--muted); font-size: var(--fs-md); }
.flash { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-md); padding: 10px var(--s-3); border-radius: var(--radius-sm); border: 1px solid var(--border); margin-bottom: var(--s-4); background: var(--surface-2); color: var(--text); }
.flash.ok  { color: var(--green);  background: var(--green-soft);  border-color: var(--green-line); }
.flash.err { color: var(--red);    background: var(--red-soft);    border-color: var(--red-line); }
.flash.warn { color: var(--orange); background: var(--orange-soft); border-color: var(--orange-line); }

/* ─── 8. Tabulka (seznamy; číselné tabulky kalkulačky = .data-table v index.html se stejnou hlavičkou) ── */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.table th { text-align: left; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; padding: var(--s-2) 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.table td { padding: 10px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table td.dim, .table td.num.dim { color: var(--muted); }
.table td.actions { text-align: right; white-space: nowrap; }

/* ─── 9. Okna, toast, tooltip ───────────────────────────────────────────────── */
.modal-back { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.50); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 200; padding: var(--s-5); }
.modal-back-top { z-index: 220; }
.modal { background: var(--surface); border-radius: var(--radius-lg); width: min(560px, 100%); max-height: min(84vh, 900px); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); overflow: hidden; }
.modal-wide { width: min(860px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); min-height: var(--hdr-h); }
.modal-head h3 { font-size: var(--fs-h4); font-weight: 700; display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.modal-head h3 .icon { color: var(--muted); }
.modal-close { width: 28px; height: 28px; flex: none; border-radius: var(--radius-sm); border: none; background: var(--surface-2); cursor: pointer; font-size: 18px; line-height: 1; color: var(--muted); }
.modal-close:hover { background: var(--border); }
.modal-tools { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border-soft); background: var(--surface-2); }
.modal-tools .hint { margin-left: auto; white-space: nowrap; }
.modal-body { padding: var(--s-4) var(--s-5); overflow-y: auto; }
.modal-foot { padding: var(--s-2) var(--s-5); border-top: 1px solid var(--border-soft); font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
/* Toast: neblokuje, dole uprostřed, sám zmizí (2,2 s; chyba 5 s). */
.toast { position: fixed; bottom: var(--s-6); left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink-dark); color: #fff; padding: 10px 18px; border-radius: var(--radius-pill); font-size: var(--fs-md); box-shadow: var(--shadow-lg); opacity: 0; transition: opacity 0.2s, transform 0.2s; z-index: 300; pointer-events: none; max-width: min(720px, calc(100vw - 32px)); text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--red); }

/* ─── 10. Hlavička aplikace + stránka (PHP i kalkulačka) ────────────────────── */
.app-header, .top {
  background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border); min-height: var(--hdr-h); padding: 0 var(--s-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap;
  position: sticky; top: 0; z-index: 50;
}
.app-title, .brand { display: flex; align-items: center; gap: var(--s-3); color: inherit; text-decoration: none; min-width: 0; }
.app-title:hover h1, .brand:hover h1 { color: var(--accent); }
.app-title-mark, .mark { width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--accent); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: var(--fs-md); letter-spacing: 0.02em; }
.app-title h1, .brand h1 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; white-space: nowrap; }
.app-title .app-subtitle, .brand .sub { font-size: var(--fs-sm); color: var(--muted); font-weight: 500; white-space: nowrap; line-height: 1.3; }
.top .meta { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.top .badge { height: var(--ctl-h-sm); }
main.page { flex: 1; width: 100%; max-width: var(--page-w); margin: 0 auto; padding: var(--s-8) var(--s-6) 48px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); }
.page-head h2 { font-size: var(--fs-h); font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.page-head p { font-size: var(--fs-md); color: var(--muted); margin-top: 2px; }
.foot { display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-4) var(--s-6); border-top: 1px solid var(--border-soft); font-size: var(--fs-sm); color: var(--muted); }

/* ─── 11. Utility (mřížka 4 px) – jediný povolený způsob „inline“ odsazení; style="" v HTML/JSX nepoužívat ── */
.mt-1 { margin-top: var(--s-1) !important; } .mt-2 { margin-top: var(--s-2) !important; } .mt-3 { margin-top: var(--s-3) !important; } .mt-4 { margin-top: var(--s-4) !important; }
.mb-1 { margin-bottom: var(--s-1) !important; } .mb-2 { margin-bottom: var(--s-2) !important; } .mb-3 { margin-bottom: var(--s-3) !important; } .mb-4 { margin-bottom: var(--s-4) !important; }
.row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.stack { display: grid; gap: var(--s-2); }
.scroll-x { overflow-x: auto; }
.center { text-align: center; }
.muted { color: var(--muted); }
code.code-sm, .code-sm { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 560px) { main.page { padding: var(--s-5) var(--s-4) var(--s-10); } .app-header, .top { padding: var(--s-2) var(--s-4); } }