/* RuKa JUDO admin — washi paper × sumi ink × glassmorphism. Vanilla CSS, BEM-like. */

:root {
  /* Color — washi paper warm + sumi ink */
  --color-bg: #f6f1e7;
  --color-surface: #fbf7ef;
  --color-surface-2: #efe7d6;
  --color-line: rgba(60,40,20,0.12);
  --color-line-strong: rgba(60,40,20,0.24);
  --color-ink: #2c2520;
  --color-ink-muted: #6e5e4a;
  --color-ink-faint: #8a7a65;
  --color-accent: #7d2b1f;          /* sumi-aka */
  --color-accent-hover: #5e1d14;
  --color-success: #4d7741;
  --color-success-hover: #3d6133;
  --color-warning: #b97a1a;
  --color-warning-bg: rgba(185,122,26,0.16);
  --color-warning-text: #7d530b;
  --color-danger: #a23426;
  --color-danger-hover: #80281c;
  --color-danger-bg: rgba(162,52,38,0.16);
  --color-danger-text: #6e2218;
  --color-success-bg: rgba(77,119,65,0.16);
  --color-success-text: #2e4928;
  --color-on-accent: #ffffff;
  --color-ring: rgba(125,43,31,0.42);

  /* Typography */
  --font-display: "Cormorant Garamond", "Shippori Mincho", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --text-xs: 0.78rem;
  --text-sm: 0.88rem;
  --text-base: 1rem;
  --text-lg: 1.18rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.6rem;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(60,40,20,0.06);
  --shadow-2: 0 8px 24px -8px rgba(60,40,20,0.16), 0 2px 4px rgba(60,40,20,0.06);
  --shadow-glass: 0 1px 0 rgba(255,255,255,0.6) inset, 0 16px 40px -16px rgba(60,40,20,0.22);

  /* Motion */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);            /* RuKa default — Apple-like ease-out, no overshoot */
  --ease-spring-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1); /* Modal entrance — small bounce (port z richtodo Fáze A) */
  --ease-fade: cubic-bezier(0.34, 1.2, 0.64, 1);            /* Backdrop fade-in */
  --dur-fast: 160ms;
  --dur-mid: 280ms;
  --dur-slow: 460ms;

  /* Aliases — odstraňují undefined token bug ve filter-bar/drawer/period-block.
     SSOT: jediný zdroj zůstává --color-surface-2 a --color-line; aliasy jsou jen
     pojmenování pro consistency s public global.css. */
  --color-bg-elev: var(--color-surface-2);
  --color-border: var(--color-line);

  /* V9.10 — aliases for tokens used across admin SPA without prior :root definition
   * (mobile audit 2026-05-11 → undefined token bug, Browser silently resolved to
   * currentColor / empty). SSOT remains the canonical names; aliases preserved for
   * legacy callsite stability. Audit memory `feedback_css_token_audit` enforces
   * grep `var(--undefined)` pre-commit going forward. */
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink-muted);
  --color-surface-muted: var(--color-surface-2);
  --color-brand-wine: var(--color-accent);
  --text-md: var(--text-base);
  --ease-out: var(--ease-spring);

  /* Z-index hierarchie (port z richtodo Fáze A — sjednoceno cross-component) */
  --z-sticky:           1000;   /* sticky table headers, action bars */
  --z-popover:          6000;   /* dropdowns, context menus (future) */
  --z-modal-backdrop:   7000;   /* drawer + modal backdrop */
  --z-modal:            7001;   /* drawer + modal panel */
  --z-loading:          7100;   /* loading veil overlay — nad drawer/modal */
  --z-tooltip:          8000;   /* nad modaly — kontextové info k modal field */
  --z-confirm:          8500;   /* alertdialog (delete confirm) — nad drawer/modal/tooltip */
  --z-toast:            9000;   /* nejvíš — akce hotová feedback nesmí být zaslepen */

  /* Modal entrance (port Fáze A) */
  --modal-backdrop-bg:   rgba(60, 40, 20, 0.45);
  --modal-backdrop-blur: 8px;
}

/* Modal entrance keyframes (port Fáze A — viz Documentation/PLAN_RICHTODO_PORT_20260510.md) */
@keyframes kf-modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes kf-modal-slide-in {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-mid: 0ms; --dur-slow: 0ms; }
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(125,43,31,0.06), transparent 60%),
    radial-gradient(900px 600px at 110% 110%, rgba(60,40,20,0.06), transparent 60%),
    var(--color-bg);
  min-height: 100vh;
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ===== Layout ===== */
.app { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.app[data-state="login"] .topbar { display: none; }

.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-6);
  background: rgba(251, 247, 239, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--color-line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar__brand { display: flex; align-items: center; gap: var(--space-3); }
.brand__mark {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--color-accent);
  line-height: 1;
}
.brand__text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
}
.topbar__nav { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }
.topbar__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.topbar__nav a:hover { color: var(--color-ink); background: rgba(60,40,20,0.05); text-decoration: none; }
.topbar__nav a.is-active { color: var(--color-accent); background: rgba(125,43,31,0.08); }
.topbar__user { display: flex; gap: var(--space-3); align-items: center; font-size: var(--text-sm); color: var(--color-ink-muted); }

.main { padding: var(--space-6); max-width: 1280px; width: 100%; margin: 0 auto; }

/* ===== Buttons ===== */
.btn {
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  /* WCAG 2.5.5 + Apple HIG: touch target floor 44×44 — kaskáduje na všechny variants. */
  min-height: 44px;
  min-width: 44px;
  background: var(--color-accent); color: var(--color-on-accent);
  box-shadow: var(--shadow-1);
}
.btn:hover { background: var(--color-accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--color-ink-muted); border-color: var(--color-line-strong); }
.btn--ghost:hover { background: rgba(60,40,20,0.05); color: var(--color-ink); border-color: var(--color-ink-muted); }
.btn--sm { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
.btn--block { width: 100%; }

/* Utility modifiers — eliminuje inline style="" v admin.js (CLAUDE.md sekce 14). */
.empty--in-card { padding: var(--space-5); }
.table-wrap--scroll { max-height: 480px; overflow: auto; }
.textarea--tall { min-height: 240px; }
.textarea--medium { min-height: 160px; }
.btn--success { background: var(--color-success); }
.btn--success:hover { background: var(--color-success-hover); }
.btn--danger { background: var(--color-danger); }
.btn--danger:hover { background: var(--color-danger-hover); }

/* ===== Cards / Glass ===== */
.card {
  background: rgba(251, 247, 239, 0.86);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.card + .card { margin-top: var(--space-5); }
.card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-4) 0;
}

/* ===== Forms ===== */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label { font-size: var(--text-sm); color: var(--color-ink-muted); }
.input, .select, .textarea {
  font: inherit;
  color: var(--color-ink);
  background: rgba(255,255,255,0.65);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  /* WCAG 2.5.5: input touch floor (textarea overrides s vlastním min-height). */
  min-height: 44px;
  width: 100%;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-ring); background: var(--color-on-accent); }
/* Form validation feedback (Fáze C 2026-05-10 — port pattern z richtodo + RuKa-vlastní CZ messages) */
.field--error .input,
.field--error .select,
.field--error .textarea {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(162, 52, 38, 0.15);
}
.field--error label,
.field--error span,
.field--error strong { color: var(--color-danger); }
.field input[aria-invalid='true']:focus,
.field select[aria-invalid='true']:focus,
.field textarea[aria-invalid='true']:focus {
  outline-color: var(--color-danger);
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-bg);
}

/* Drawer shake na invalid submit (CLAUDE.md GUI rule 6 — frustrace point prevention) */
@keyframes kf-ruka-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}
.drawer.is-shake { animation: kf-ruka-shake 400ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }

/* Save flash (positivně-feedback po úspěchu — CLAUDE.md GUI rule 5 návykovost). Matcha green tinted. */
@keyframes kf-save-flash {
  0%   { background: rgba(77, 119, 65, 0.22); box-shadow: inset 3px 0 0 rgba(77, 119, 65, 0.7); }
  50%  { background: rgba(77, 119, 65, 0.12); }
  100% { background: transparent; box-shadow: none; }
}
.is-save-flash { animation: kf-save-flash 600ms cubic-bezier(0.4, 0, 0.2, 1); }

/* ===== InlineTextEdit (Fáze D 2026-05-10 — port z richtodo `inline-text-edit.js`) ===== */
.ite-view {
  display: inline-block;
  cursor: text;
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  margin: -2px -6px;       /* compensate padding (in-table cells) */
  border-left: 2px solid transparent;
  transition: background var(--dur-fast), border-color var(--dur-fast);
  outline: none;
  min-height: 1.4em;
  position: relative;
}
.ite-view:hover,
.ite-view:focus-visible {
  background: rgba(125, 43, 31, 0.06);
  border-left-color: var(--color-accent);
}
.ite-view:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: -2px;
}
.ite-view.ite-multiline { display: block; white-space: pre-wrap; line-height: 1.5; }
.ite-empty .ite-placeholder {
  color: var(--color-ink-faint);
  font-style: italic;
  font-size: 0.92em;
}
.ite-editing {
  cursor: text;
  background: var(--color-on-accent);
  border-left-color: var(--color-accent);
  padding: 2px 6px;
  margin: -2px -6px;
}
.ite-input,
.ite-textarea {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  padding: 0;
  margin: 0;
  resize: vertical;
  font-family: inherit;
  letter-spacing: inherit;
}
.ite-saving { opacity: 0.7; pointer-events: none; }
.ite-saved {
  animation: kf-save-flash 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ite-error {
  animation: kf-ruka-shake 400ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
  background: color-mix(in srgb, var(--color-danger) 10%, transparent) !important;  /* override hover bg — explicit error precedence */
  border-left-color: var(--color-danger) !important; /* override hover border — paired s background výše */
}
.ite-cell--bold { font-weight: 600; }

/* ===== Empty / Loading states (Fáze E 2026-05-10 — port z richtodo task-empty-state) =====
   BEM SSOT pro empty/loading/error/celebration. Replace 9 callsites <div class="empty">.
*/
.ruka-empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--color-ink-muted);
  gap: var(--space-1);
}
.ruka-empty-state__icon {
  font-size: 48px;
  opacity: 0.85;
  margin-bottom: var(--space-3);
  line-height: 1;
}
.ruka-empty-state__title {
  margin: 0 0 4px 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink);
}
.ruka-empty-state__hint {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  max-width: 420px;
  line-height: 1.5;
}
.ruka-empty-state__action {
  margin-top: var(--space-2);
}
.ruka-empty-state--loading .ruka-empty-state__icon { animation: kf-ruka-spin 1.2s linear infinite; }
.ruka-empty-state--celebration .ruka-empty-state__icon {
  font-size: 64px;
  animation: kf-ruka-celebration 2s ease-in-out infinite;
}
.ruka-empty-state--celebration .ruka-empty-state__title { color: var(--color-success); font-size: var(--text-xl); }
.ruka-empty-state--error .ruka-empty-state__title { color: var(--color-danger); }
.ruka-empty-state--error .ruka-empty-state__icon { opacity: 0.7; }
.ruka-empty-cell { /* table-row wrapper td */
  padding: 0 !important; /* override generic td padding — empty-state má vlastní padding */
  background: transparent;
  border: none;
}
@keyframes kf-ruka-celebration {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06) rotate(-2deg); }
}

/* ===== Skeleton screens (Fáze E 2026-05-10 — port z richtodo cal-skel-*) =====
   Layout-preserving — drží výšku rows/cards aby content swap nezpůsobil CLS.
   prefers-reduced-motion: kf-ruka-skel-pulse je pokrytý globálním guardem
   v src/styles/global.css, plus per-feature override níže (defense in depth).
*/
@keyframes kf-ruka-skel-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.85; }
}
@keyframes kf-ruka-spin {
  to { transform: rotate(360deg); }
}
.ruka-skel-line,
.ruka-skel-block,
.ruka-skel-avatar,
.ruka-skel-badge,
.ruka-skel-btn {
  display: inline-block;
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  animation: kf-ruka-skel-pulse 1.4s ease-in-out infinite;
  vertical-align: middle;
}
.ruka-skel-line { height: 12px; width: 100%; }
.ruka-skel-line--sm   { width: 40%; }
.ruka-skel-line--md   { width: 70%; }
.ruka-skel-line--lg   { width: 90%; }
.ruka-skel-line--bold { width: 60%; height: 14px; }
.ruka-skel-avatar     { width: 32px; height: 32px; border-radius: 50%; }
.ruka-skel-badge      { width: 56px; height: 22px; border-radius: 999px; }
.ruka-skel-btn        { width: 72px; height: 30px; border-radius: var(--radius-md); }
.ruka-skel-block      { width: 100%; height: 60px; }
.ruka-skel-row td     { padding: var(--space-3); }
.ruka-skel-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}
@media (prefers-reduced-motion: reduce) {
  /* defense-in-depth — globální guard v global.css * { animation-duration: 0.01ms !important } pokrývá také */
  .ruka-skel-line, .ruka-skel-block, .ruka-skel-avatar, .ruka-skel-badge, .ruka-skel-btn {
    animation: none;
    opacity: 0.65;
  }
  .ruka-empty-state--loading .ruka-empty-state__icon,
  .ruka-empty-state--celebration .ruka-empty-state__icon {
    animation: none;
  }
}

/* ===== Tooltip (Fáze F 2026-05-10 — port z richtodo tab-tooltips, light theme washi) ===== */
.ruka-tooltip {
  position: fixed;
  z-index: var(--z-tooltip);
  pointer-events: none;
  max-width: min(360px, calc(100vw - var(--space-5) * 2));
  padding: 10px 14px;
  background: rgba(255, 253, 247, 0.96);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(60, 40, 20, 0.18), var(--shadow-1);
  font-size: var(--text-sm);
  color: var(--color-ink);
  line-height: 1.45;
  white-space: pre-line;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
  word-break: break-word;
}
.ruka-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.ruka-tooltip--flipped { transform: translateY(4px); }
.ruka-tooltip--flipped.is-visible { transform: translateY(0); }
.ruka-tooltip__arrow {
  position: absolute;
  top: -5px;
  width: 10px; height: 10px;
  background: rgba(255, 253, 247, 0.96);
  border-left: 1px solid var(--color-line);
  border-top: 1px solid var(--color-line);
  transform: rotate(45deg);
}
.ruka-tooltip--flipped .ruka-tooltip__arrow {
  top: auto; bottom: -5px;
  transform: rotate(225deg);
}
/* Rich mode — three-tier typography (port z richtodo .ttip-title/desc/meta) */
.ruka-tooltip--rich {
  padding: 12px 16px;
  white-space: normal;
}
.ruka-tooltip__text .ttip-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  color: var(--color-ink);
}
.ruka-tooltip__text .ttip-desc {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  font-weight: 400;
  margin-top: 2px;
}
.ruka-tooltip__text .ttip-desc + .ttip-desc { margin-top: 6px; }
.ruka-tooltip__text .ttip-meta {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  border-top: 1px solid var(--color-line);
  padding-top: 8px;
  margin-top: 8px;
}
.ruka-tooltip__text em {
  color: var(--color-ink);
  font-weight: 500;
  font-style: normal;
}
@media (prefers-reduced-motion: reduce) {
  .ruka-tooltip {
    transition: opacity 100ms linear;
    transform: none !important; /* a11y override — WCAG 2.3.3 (no nausea-inducing animations) */
  }
}

/* ===== Status pill BEM (Fáze G 2026-05-10 — port z richtodo `status-pill`) =====
   Klikatelný filter chip s integer count + active state. Doplňuje (NE nahrazuje)
   existující read-only `.status` badge — pill je INTERAKTIVNÍ filter UI.
*/
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-on-accent);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-fast), border-color var(--dur-fast),
              color var(--dur-fast), box-shadow var(--dur-fast);
  min-height: 32px;        /* kompakt — UI control, ne primary action */
}
.status-pill:hover {
  background: rgba(125, 43, 31, 0.06);
  border-color: var(--color-accent);
}
.status-pill:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}
.status-pill--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.status-pill--active:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}
.status-pill__count {
  opacity: 0.75;
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.status-pill-row {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* ===== Status dot s pulse (Fáze G 2026-05-10 — port z richtodo hub-status-dot) ===== */
.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-ink-faint);
  vertical-align: middle;
  flex-shrink: 0;
}
.status-dot--active {
  background: var(--color-success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-success) 18%, transparent);
  animation: kf-status-dot-pulse 2.4s ease-in-out infinite;
}
.status-dot--alert {
  background: var(--color-danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-danger) 18%, transparent);
}
.status-dot--warn { background: var(--color-warning); }
@keyframes kf-status-dot-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

/* ===== Trend ▲▼ tokens (Fáze G 2026-05-10 — port z richtodo SFP) ===== */
.trend-up   { color: var(--color-success); font-weight: 600; }
.trend-down { color: var(--color-danger);  font-weight: 600; }
.trend-up::before   { content: "▲ "; font-size: 0.8em; }
.trend-down::before { content: "▼ "; font-size: 0.8em; }
.trend-flat { color: var(--color-ink-muted); font-weight: 600; }
.trend-flat::before { content: "→ "; }

/* ===== Bottom sheet drawer @media (Fáze G 2026-05-10 — Karel mobile-first) =====
   Drawer slide-from-right na 360px viewportu = nepřehledný formulář.
   Native iOS bottom sheet pattern: slide from bottom, drag handle, full width.
   ZERO JS change — čistě CSS @media override.
*/
@media (max-width: 720px) {
  .drawer {
    /* Reset desktop right-slide */
    right: 0; top: auto; bottom: 0; left: 0;
    width: 100%; max-width: 100%;
    border-left: none;
    border-top: 1px solid var(--color-line);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
    /* V9.10 — dynamic viewport units respect iOS URL bar + virtual keyboard.
       svh = small viewport (URL bar visible); dvh = dynamic (collapses with scroll). */
    max-height: 92dvh;
    max-height: 92svh;
    overflow: hidden;
  }
  .drawer.is-open { transform: translateY(0); }
  .drawer__head {
    padding-top: 28px;       /* prostor pro drag handle */
    position: relative;
  }
  /* Drag handle visual cue (decorative — close button stále funguje) */
  .drawer__head::before {
    content: "";
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 4px;
    border-radius: 2px;
    background: var(--color-ink-faint);
    opacity: 0.45;
  }
  /* V9.10 — release max-height so flex chain (drawer → body) fills available space
     above virtual keyboard instead of being clamped to 60vh. */
  .drawer__body { max-height: none; flex: 1; min-height: 0; overflow-y: auto; }
}

/* === V9.10 — Admin SPA mobile patch (sub-agent audit 2026-05-11) === */

/* B3 — iOS auto-zoom fix: inputs need 16px font on mobile to prevent focus-zoom */
@media (max-width: 768px) {
  .input,
  .select,
  .textarea,
  .ite-input,
  .ite-textarea,
  .fio-split-row__input,
  .fio-ledger-search {
    font-size: 16px;
  }
}

/* T1-6 — Tables card-view fallback <720px (V9.11 — Agent #4 P1-05).
 * Pattern: thead hidden; each <tr> becomes a card with stacked label/value pairs
 * via data-label attribute (added in admin.js renderers). Karel-first mobile.
 */
@media (max-width: 720px) {
  .table-wrap--cards table,
  .table-wrap--cards thead,
  .table-wrap--cards tbody,
  .table-wrap--cards tr,
  .table-wrap--cards td { display: block; }
  .table-wrap--cards thead { position: absolute; left: -9999px; top: -9999px; }
  .table-wrap--cards { overflow-x: hidden; }
  .table-wrap--cards tr {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-3);
  }
  .table-wrap--cards td {
    padding: 0;
    border: 0;
    min-height: 0;
  }
  .table-wrap--cards td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
  }
  .table-wrap--cards td[data-label=""]::before { display: none; }
  /* Avatar + actions on same row aligned right; other rows span 2 cols */
  .table-wrap--cards td:not([data-label=""]) { grid-column: 1 / -1; }
  .table-wrap--cards td[data-label=""] { display: inline-flex; align-items: center; }
  .table-wrap--cards td.table__actions {
    grid-column: 1 / -1;
    margin-top: var(--space-2);
  }
  .table-wrap--cards td.table__actions .btn { width: 100%; }
}

/* T3-1 — member row tap-anywhere (V9.11 — touch device pattern) */
@media (max-width: 720px) and (pointer: coarse) {
  .table-wrap--cards[data-table="members"] tr { cursor: pointer; }
  .table-wrap--cards[data-table="members"] tr:active { background: var(--color-surface-2); }
}

/* B10 — Toast stack mobile: centered-bottom + safe-area-inset (iPhone X+ home indicator) */
@media (max-width: 540px) {
  .toast-stack {
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    max-width: none;
  }
}

/* Hover guard — sticky-hover anti-pattern on touch devices */
@media (hover: none) {
  .radio-row:hover,
  .group-card:hover { background: initial; border-color: initial; }
}

/* === V9.11 — Admin polish (audit Agent #4 P1-11/13/15/17, P2-21/24/25) === */

/* T2-18 — FIO chips edge fade indicator (visual hint that scroll is available) */
.fio-chips {
  mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
}

/* T2-19 — inline-edit (ITE) — permanent visual cue on touch devices */
@media (pointer: coarse) {
  .ite-view {
    border-left: 2px solid var(--color-line);
    padding-left: 8px;
  }
  .ite-view::after {
    content: " ✎";
    font-size: 0.8em;
    opacity: 0.4;
    margin-left: 4px;
  }
}

/* T2-20 — <details>/<summary> 44px touch target */
@media (pointer: coarse) {
  details summary,
  .period-block summary,
  .fio-loner__more summary,
  .fio-tools > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* T2-21 — FIO tab __hint hide on mobile (default skrýt detaily per CLAUDE.md §6) */
@media (max-width: 720px) {
  .fio-tab__hint { display: none; }
}

/* T3-2 — Filter-bar stack on small mobile */
@media (max-width: 540px) {
  .filter-bar { flex-direction: column; align-items: stretch; }
  .field--inline { width: 100%; min-width: 0; flex: 1 1 auto; }
}

/* T3-3 — KPI value tabular-nums (CLS prevention during animation) */
.kpi__value { font-variant-numeric: tabular-nums; }

/* T3-4 — Drawer footer mobile: stack column-reverse + safe-area + full-width buttons */
@media (max-width: 720px) {
  .drawer__foot {
    flex-direction: column-reverse;
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  }
  .drawer__foot .btn { width: 100%; }
}

/* withGuard btn-loading state — pointer-events disabled, opacity, optional spinner */
.btn-loading,
.btn.is-loading {
  opacity: 0.7;
  cursor: wait !important;       /* override .btn cursor — explicit critical UX cue */
  position: relative;
  pointer-events: none;
}
.field__hint { font-size: var(--text-xs); color: var(--color-ink-faint); }
.field__error { font-size: var(--text-xs); color: var(--color-danger); }
.checkbox-row { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-ink-muted); }
.checkbox-row input { margin-top: 3px; }

/* ===== Login ===== */
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background:
    radial-gradient(800px 500px at 30% 10%, rgba(125,43,31,0.10), transparent 60%),
    radial-gradient(600px 400px at 70% 90%, rgba(60,40,20,0.10), transparent 60%);
}
.login__card { width: min(420px, 100%); }
.login__brand { text-align: center; margin-bottom: var(--space-5); }
.login__brand .brand__mark { font-size: 40px; }
.login__brand h1 { font-family: var(--font-display); margin: var(--space-2) 0 var(--space-1); font-size: var(--text-2xl); }
.login__brand p { margin: 0; color: var(--color-ink-faint); font-size: var(--text-sm); letter-spacing: 0.06em; text-transform: uppercase; }

/* ===== Dashboard KPIs ===== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.kpi {
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(251,247,239,0.5));
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120px 80px at 100% 0%, rgba(125,43,31,0.08), transparent 70%);
  pointer-events: none;
}
.kpi__label { font-size: var(--text-xs); color: var(--color-ink-faint); letter-spacing: 0.06em; text-transform: uppercase; }
.kpi__value { font-family: var(--font-display); font-size: var(--text-3xl); margin-top: var(--space-2); line-height: 1.1; color: var(--color-ink); }
.kpi__hint { font-size: var(--text-xs); color: var(--color-ink-faint); margin-top: var(--space-2); }

/* ===== Tables ===== */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-line); background: rgba(255,255,255,0.5); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-line); vertical-align: top; }
.table th { font-weight: 500; color: var(--color-ink-muted); background: rgba(60,40,20,0.04); position: sticky; top: 0; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: rgba(60,40,20,0.03); }
.table__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.empty {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--color-ink-faint);
  font-style: italic;
}

/* ===== Kanban ===== */
.kanban {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.kanban__col {
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  min-height: 200px;
}
.kanban__head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: var(--space-3); margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-display);
  font-size: var(--text-lg);
}
.kanban__count { font-size: var(--text-xs); color: var(--color-ink-faint); }
.kanban__list { display: flex; flex-direction: column; gap: var(--space-3); }
.kanban-card {
  background: var(--color-on-accent);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.kanban-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.kanban-card__name { font-weight: 600; }
.kanban-card__meta { font-size: var(--text-xs); color: var(--color-ink-faint); margin-top: 2px; }
.kanban-card__actions { margin-top: var(--space-3); display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ===== Drawer ===== */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(20,14,8,0.36);
  backdrop-filter: blur(2px);
  z-index: var(--z-modal-backdrop);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease-spring);
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  /* Na mobile zachovat 16px peek pro backdrop click-outside dismiss. */
  width: min(560px, calc(100% - var(--space-4)));
  background: var(--color-surface);
  border-left: 1px solid var(--color-line);
  box-shadow: var(--shadow-2);
  z-index: var(--z-modal);
  transform: translateX(100%);
  transition: transform var(--dur-mid) var(--ease-spring);
  display: flex; flex-direction: column;
}
.drawer.is-open { transform: translateX(0); }
/* V9.16/H — wide drawer mode pro side-by-side PDF transcription.
   Form + scanned PDF iframe vedle sebe; degradace na stacked < 1100px. */
.drawer--wide {
  width: min(1200px, calc(100% - var(--space-4)));
}
.drawer__head { padding: var(--space-5); border-bottom: 1px solid var(--color-line); display: flex; justify-content: space-between; align-items: center; }
.drawer__title { font-family: var(--font-display); font-size: var(--text-xl); margin: 0; }
.drawer__body { padding: var(--space-5); overflow-y: auto; flex: 1; }
.drawer__foot { padding: var(--space-5); border-top: 1px solid var(--color-line); display: flex; gap: var(--space-3); justify-content: flex-end; }

/* ─────────────────────────────────────────────────────────────────
   V9.16/H — drawer split: form left, PDF iframe right.
   Per CLAUDE.md §6: focus zones — Karel se soustředí na transkripci.
   ───────────────────────────────────────────────────────────────── */
.drawer-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--space-5);
  align-items: stretch;
  height: 100%;
}
.drawer-split__form {
  min-width: 0;
  overflow-y: auto;
  padding-right: var(--space-2);
}
.drawer-split__pdf {
  min-width: 0;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-soft, #fafafa);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  height: calc(100vh - 220px);  /* fit between header + footer */
  min-height: 480px;
}
.drawer-split__pdf-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  flex: 0 0 auto;
}
.drawer-split__pdf-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text, #1e293b);
}
.drawer-split__pdf-frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #fff;
}

@media (max-width: 1100px) {
  .drawer-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .drawer-split__pdf {
    height: 60vh;
    position: relative;
  }
}

/* ===== Toast (Fáze B 2026-05-10 — port z richtodo + Karel-fit adaptace) =====
   ToastService class řeší: types (info/success/warning/error/undo), per-type ttl,
   hover-pause, ESC-close-topmost, close button (×) 44×44 mobile, MAX_VISIBLE=3,
   action button + secondary action. Glass background washi paper light theme.
*/
.toast-stack {
  position: fixed; right: var(--space-5); bottom: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
  z-index: var(--z-toast);
  pointer-events: none; /* prozření přes prázdné mezery */
  max-width: min(420px, calc(100% - var(--space-5) * 2));
}
.toast {
  pointer-events: auto;
  position: relative;
  background: rgba(255,253,247, 0.96);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-7) var(--space-3) var(--space-4);
  box-shadow: 0 8px 24px rgba(125, 43, 31, 0.12), var(--shadow-1);
  font-size: var(--text-sm);
  color: var(--color-ink);
  min-width: 240px;
  display: flex; flex-direction: column; gap: var(--space-2);
  animation: kf-toast-slide-in var(--dur-mid) var(--ease-spring) both;
}
.toast.is-leaving { animation: kf-toast-slide-out 220ms cubic-bezier(0.4, 0, 0.6, 1) both; }
.toast--success { border-left-color: var(--color-success); }
.toast--error   { border-left-color: var(--color-danger); }
.toast--warning { border-left-color: var(--color-warning); }
.toast--info    { border-left-color: var(--color-accent); }
.toast--undo    { border-left-color: var(--color-warning); }
.toast__msg     { line-height: 1.45; word-break: break-word; }
.toast__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.toast__action {
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.toast__action:hover  { background: rgba(125,43,31,0.08); border-color: var(--color-accent); }
.toast__action:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 1px; }
.toast__close {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--color-ink-faint);
  font-size: 18px; line-height: 1;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast), color var(--dur-fast);
  font-family: inherit;
}
.toast__close:hover { background: rgba(60,40,20,0.08); color: var(--color-ink); }
.toast__close:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 1px; }
@media (max-width: 768px) {
  /* WCAG touch target ≥ 44×44 (CLAUDE.md sekce 11 a11y) */
  .toast__close { width: 44px; height: 44px; top: 0; right: 0; font-size: 22px; }
  .toast { padding-right: var(--space-8); }
}
@keyframes kf-toast-slide-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes kf-toast-slide-out {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateX(8px); opacity: 0; }
}

/* ===== Glass Confirm (Fáze B 2026-05-10 — port z richtodo cal-confirm, washi light theme) ===== */
.glass-confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(60, 40, 20, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-confirm);
  opacity: 0;
  transition: opacity 180ms var(--ease-fade);
  padding: var(--space-4);
}
.glass-confirm-overlay--visible { opacity: 1; }
.glass-confirm {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 72px rgba(60, 40, 20, 0.32), var(--shadow-glass);
  padding: var(--space-5) var(--space-6);
  min-width: min(360px, 100%);
  max-width: min(440px, 100%);
  text-align: center;
  transform: scale(0.92);
  transition: transform 200ms var(--ease-spring-overshoot);
}
.glass-confirm-overlay--visible .glass-confirm { transform: scale(1); }
.glass-confirm__icon {
  width: 48px; height: 48px;
  margin: 0 auto var(--space-3);
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(185,122,26,0.15), rgba(185,122,26,0.05));
  border: 1px solid rgba(185,122,26,0.3);
  border-radius: 50%;
  color: var(--color-warning);
  font-size: 22px; font-weight: 700;
}
.glass-confirm__title {
  margin: 0 0 6px 0;
  font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: 700;
  color: var(--color-ink);
}
.glass-confirm__message {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: 1.5;
}
.glass-confirm__actions {
  display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap;
}
.glass-confirm__btn {
  padding: 10px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  background: var(--color-on-accent);
  color: var(--color-ink);
  cursor: pointer;
  font-size: var(--text-sm); font-weight: 600;
  font-family: inherit;
  min-width: 100px;
  min-height: 44px;  /* WCAG touch target */
  transition: background var(--dur-fast), border-color var(--dur-fast),
              color var(--dur-fast), box-shadow var(--dur-fast),
              transform var(--dur-fast);
}
.glass-confirm__btn--cancel:hover {
  background: rgba(60,40,20,0.05);
  border-color: var(--color-line-strong);
}
.glass-confirm__btn--primary {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  color: var(--color-on-accent);
  border-color: transparent;
}
.glass-confirm__btn--primary:hover {
  box-shadow: 0 4px 12px rgba(125, 43, 31, 0.45);
  transform: translateY(-1px);
}
.glass-confirm__btn--danger {
  background: linear-gradient(135deg, var(--color-danger), var(--color-danger-hover));
  color: var(--color-on-accent);
  border-color: transparent;
}
.glass-confirm__btn--danger:hover {
  box-shadow: 0 4px 12px rgba(162, 52, 38, 0.45);
  transform: translateY(-1px);
}
.glass-confirm__btn:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* ===== Glass Prompt (V9.11 — port glass-confirm pattern + textarea input) ===== */
.glass-prompt { max-width: min(520px, 100%); text-align: left; }
.glass-prompt .glass-confirm__title { text-align: left; }
.glass-prompt .glass-confirm__actions { justify-content: flex-end; margin-top: var(--space-3); }
.glass-prompt__input-wrap {
  margin: 0 0 var(--space-3);
}
.glass-prompt__input {
  width: 100%;
  font: inherit;
  font-size: 16px; /* iOS no-zoom floor per V9.10 B3 */
  color: var(--color-ink);
  background: var(--color-on-accent);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  min-height: 96px;
  resize: vertical;
  transition: border-color 160ms var(--ease-spring), box-shadow 160ms var(--ease-spring);
  box-sizing: border-box;
}
.glass-prompt__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-ring);
}
.glass-prompt__input[aria-invalid="true"] {
  border-color: var(--color-danger);
}
.visually-hidden {
  position: absolute !important;
  clip: rect(0 0 0 0);
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  border: 0;
}

/* ===== Loading veil ===== */
.loading-veil {
  position: fixed; inset: 0;
  background: rgba(246, 241, 231, 0.6);
  backdrop-filter: blur(2px);
  display: grid; place-items: center;
  z-index: var(--z-loading);
}
/* HTML `hidden` attribute musí přebít explicit `display: grid` výše. */
.loading-veil[hidden] { display: none; }
.spinner {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(60,40,20,0.18);
  border-top-color: var(--color-accent);
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Badges ===== */
.badge {
  display: inline-block;
  font-size: 11px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 4px;
  font-weight: 500;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.status {
  display: inline-block;
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(60,40,20,0.08);
  color: var(--color-ink-muted);
  text-transform: lowercase;
}
.status--draft { background: rgba(60,40,20,0.06); }
.status--submitted { background: var(--color-warning-bg); color: var(--color-warning-text); }
.status--approved { background: var(--color-success-bg); color: var(--color-success-text); }
.status--rejected { background: var(--color-danger-bg); color: var(--color-danger-text); }
.status--paid { background: var(--color-success-bg); color: var(--color-success-text); }
.status--pending { background: var(--color-warning-bg); color: var(--color-warning-text); }
.status--failed, .status--cancelled, .status--refunded { background: var(--color-danger-bg); color: var(--color-danger-text); }

/* ===== Page header ===== */
.page-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: var(--space-5);
  gap: var(--space-4); flex-wrap: wrap;
}
.page-head__title { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); }
.page-head__sub { color: var(--color-ink-faint); font-size: var(--text-sm); margin-top: 4px; }
.page-head__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ===== Hamburger button (V9.11 — admin mobile nav, audit Agent #4 P0-4) ===== */
.topbar__hamburger {
  display: none; /* hidden on desktop */
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  width: 44px;
  height: 44px;
  padding: 10px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  align-items: stretch;
}
.topbar__hamburger:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.topbar__hamburger > span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-ink);
  border-radius: 1px;
  transition: transform var(--dur-fast) var(--ease-spring), opacity var(--dur-fast);
}
.topbar__hamburger[aria-expanded="true"] > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topbar__hamburger[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
.topbar__hamburger[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.topbar__nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(60, 40, 20, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: calc(var(--z-modal-backdrop) - 1);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .topbar { grid-template-columns: 1fr auto; padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  .topbar__hamburger { display: inline-flex; }
  /* Mobile: nav becomes drawer overlay sliding from right (Apple HIG navigation pattern). */
  .topbar__nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: var(--color-surface);
    border-left: 1px solid var(--color-line);
    box-shadow: -16px 0 40px -8px rgba(60, 40, 20, 0.24);
    flex-direction: column;
    gap: var(--space-2);
    justify-content: flex-start;
    padding: var(--space-6) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    transform: translateX(100%);
    transition: transform var(--dur-mid) var(--ease-spring);
    z-index: var(--z-modal);
    overflow-y: auto;
  }
  .topbar__nav.is-open { transform: translateX(0); }
  .topbar__nav a {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    min-height: 44px;
    font-size: var(--text-base);
    border-radius: var(--radius-md);
  }
  .main { padding: var(--space-4); }
  .kpi__value { font-size: var(--text-2xl); }
}
@media (min-width: 769px) {
  .topbar__nav-backdrop { display: none !important; /* desktop never shows backdrop */ }
}

/* ===== Members admin extensions (autonomous run 2026-05-09) ===== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: end;
  background: var(--color-bg-elev);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

/* ===== V9.14 — Members rich filter bar ===== */
.members-filters {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-accent) 4%, var(--color-surface)) 0%,
    var(--color-surface) 100%);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.members-filters__primary,
.members-filters__advanced {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: end;
}

.members-filters__advanced {
  padding-top: var(--space-3);
  margin-top: var(--space-1);
  border-top: 1px dashed var(--color-line);
  animation: kf-modal-fade-in var(--dur-fast) var(--ease-fade);
}

.members-filters__primary .field--grow {
  flex: 2 1 220px;
}

.members-filters__toggle {
  margin-bottom: 2px;  /* align with field bottom edges */
}

.members-filters__sort {
  margin-left: auto;   /* push right on desktop */
}

@media (max-width: 720px) {
  .members-filters__sort {
    margin-left: 0;
  }
}

.members-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-2);
  align-items: center;
}

/* Filter chip — Apple-like pill with subtle glass + brand-wine accent */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, var(--color-line));
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-spring),
    border-color var(--dur-fast) var(--ease-spring),
    transform var(--dur-fast) var(--ease-spring);
  min-height: 28px;
}

.chip:hover {
  background: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface));
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

.chip:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

.chip__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 24%, transparent);
  color: var(--color-accent);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}

.members-filters__reset {
  margin-left: auto;
}

.page-head__count {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-ink-muted);
  margin-left: var(--space-2);
  font-variant-numeric: tabular-nums;
}

/* V9.14 — payment row „bez evidované částky" marker (Martina xlsx historicals) */
.payment-row__amount--marker {
  color: var(--color-ink-faint);
  font-style: italic;
  font-size: var(--text-xs);
}

/* V9.14 — Audit IP cell with geolocation (artep visitors pattern adaptation) */
.audit-ip__addr {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.audit-ip__loc {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .members-filters__advanced { animation: none; }
  .chip { transition: none; }
}

.field--inline {
  margin-bottom: 0;
  min-width: 160px;
  flex: 1;
}
.field--inline span {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.fieldset legend {
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
}

.badge--success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge--neutral {
  background: var(--color-line);
  color: var(--color-ink-muted);
}

.drawer__section {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.drawer__section--meta {
  background: var(--color-bg-elev);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border-top: none;
  margin-top: var(--space-3);
}
.drawer__section--meta p {
  margin: 0 0 4px;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.period-block {
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
}
.period-block summary {
  cursor: pointer;
  font-weight: 500;
  padding: var(--space-1) 0;
}
.payment-list {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
}
.payment-row {
  display: grid;
  grid-template-columns: 1fr 80px 90px 90px auto;
  gap: var(--space-2);
  padding: 6px 0;
  font-size: var(--text-sm);
  align-items: center;
  border-bottom: 1px dashed var(--color-border);
}
.payment-row:last-child { border-bottom: none; }
.payment-row__kind { color: var(--color-ink-muted); text-transform: uppercase; font-size: var(--text-xs); letter-spacing: 0.06em; }
.payment-row__amount { font-weight: 500; font-variant-numeric: tabular-nums; }
.payment-row__source { color: var(--color-ink-faint); font-size: var(--text-xs); }
.payment-row__date { color: var(--color-ink-faint); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

.warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border: 1px solid var(--color-warning-text);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  margin: var(--space-3) 0;
  font-size: var(--text-sm);
}
.muted { color: var(--color-ink-muted); font-size: var(--text-sm); }

/* ===== Audit diff chip (Fáze I 2026-05-10) =====
   Compact summary chip s tooltip pro full diff payload.
*/
.audit-diff {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: rgba(125, 43, 31, 0.08);
  color: var(--color-ink);
  font-size: var(--text-xs);
  cursor: help;
  font-family: inherit;
  transition: background var(--dur-fast);
}
.audit-diff:hover,
.audit-diff:focus-visible {
  background: rgba(125, 43, 31, 0.16);
}
.audit-diff:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.audit-diff strong {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--color-accent);
}

/* ===== RichTextEditor (Fáze J 2026-05-10 — port z richtodo + DOMPurify allowlist) ===== */
.rte-container {
  display: flex; flex-direction: column;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-on-accent);
  overflow: hidden;
}
.rte-toolbar {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 6px;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-line);
}
.rte-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-family: inherit;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.rte-btn:hover {
  background: rgba(125, 43, 31, 0.08);
  border-color: var(--color-line);
}
.rte-btn:active,
.rte-btn[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
}
.rte-btn:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}
.rte-editor {
  padding: 12px 14px;
  min-height: 160px;
  outline: none;
  font: inherit;
  color: var(--color-ink);
  line-height: 1.6;
}
.rte-editor:focus { background: var(--color-on-accent); }
.rte-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--color-ink-faint);
  font-style: italic;
  pointer-events: none;
}
.rte-editor h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin: var(--space-4) 0 var(--space-2);
  color: var(--color-ink);
}
.rte-editor h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: var(--space-3) 0 var(--space-2);
  color: var(--color-ink);
}
.rte-editor p { margin: 0 0 var(--space-3); }
.rte-editor a {
  color: var(--color-accent);
  text-decoration: underline;
}
.rte-editor a:hover { color: var(--color-accent-hover); }
.rte-editor ul,
.rte-editor ol { margin: 0 0 var(--space-3) var(--space-5); }
.rte-editor blockquote {
  border-left: 3px solid var(--color-line);
  padding-left: var(--space-3);
  margin: var(--space-3) 0;
  color: var(--color-ink-muted);
  font-style: italic;
}
.rte-editor code {
  background: var(--color-surface-2);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}
@media (max-width: 768px) {
  /* WCAG touch target ≥ 44×44 */
  .rte-btn { min-width: 44px; min-height: 44px; }
  .rte-toolbar { gap: 6px; padding: 8px; }
}

/* Skrytý textarea pro form sync (RichTextEditor.syncTextarea) */
.rte-sync-target {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.empty { color: var(--color-ink-faint); padding: var(--space-4); text-align: center; }

.form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
  justify-content: flex-end;
}

.table--compact th, .table--compact td { padding: 6px 8px; font-size: var(--text-xs); }

/* Cell s číselným údajem + badge — vertical center align, gap mezi textem a badge. */
.cell-with-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

/* Apple-like věkový badge — glassmorphism pill, brand-soft tint, tabular nums.
   „Sexy moderní" feel: subtle warm wash, ostrý accent na číslo, tlumenou jednotku. */
.badge-age {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  padding: 2px 8px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-accent) 12%, transparent) 0%,
    color-mix(in srgb, var(--color-accent) 6%, transparent) 100%
  );
  color: var(--color-accent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 18%, transparent);
  border-radius: 999px;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: baseline;
  /* Subtle inner highlight pro glassmorphism feel. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform var(--dur-fast) var(--ease-spring),
              border-color var(--dur-fast) var(--ease-spring);
}
.badge-age:hover { transform: translateY(-0.5px); border-color: color-mix(in srgb, var(--color-accent) 32%, transparent); }
.badge-age strong {
  font-weight: 600;
  font-feature-settings: "tnum", "ss01";
}
.badge-age__unit {
  opacity: 0.62;
  font-size: 0.92em;
  font-weight: 500;
}
/* xs varianta — visuálně menší, ale dědí min-height: 44px z .btn pro touch target.
   Na mobile dále polstrujeme aby vizuální mass odpovídal hit area. */
.btn--xs { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); }
@media (max-width: 768px) {
  .btn--xs { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .period-block summary { transition: none; }
}

/* ============================================================================
   Avatars (port z richtodo-web KI-R181) — kruhový container s iniciálami
   fallback, optional <img> overlay, hover zoom system (1s preparing → scale).
   ============================================================================ */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-on-accent);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  user-select: none;
  background: var(--color-accent);
  letter-spacing: 0.02em;
}
.avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.avatar-xs  { width: 24px; height: 24px; font-size: 9px; }
.avatar-sm  { width: 36px; height: 36px; font-size: 12px; }
.avatar-md  { width: 48px; height: 48px; font-size: 16px; }
.avatar-lg  { width: 64px; height: 64px; font-size: 22px; }
.avatar-xl  { width: 120px; height: 120px; font-size: 36px; }

/* Hover zoom — 1-sekundová pre-fáze (vibrace + soft blur), pak full scale.
   Apple-Cupertino feel. JS kontroluje obě fáze (richtodo-web port). */
.avatar-zoomable {
  --avatar-zoom: 3;
  cursor: zoom-in;
  transition:
    transform 220ms cubic-bezier(0.32, 0.72, 0.34, 1),
    box-shadow 220ms cubic-bezier(0.32, 0.72, 0.34, 1),
    filter 200ms ease;
  transform-origin: center center;
  overflow: visible;
}
.avatar-xs.avatar-zoomable  { --avatar-zoom: 5; }
.avatar-sm.avatar-zoomable  { --avatar-zoom: 3.5; }
.avatar-md.avatar-zoomable  { --avatar-zoom: 2.5; }
.avatar-lg.avatar-zoomable  { --avatar-zoom: 2; }
.avatar-xl.avatar-zoomable  { --avatar-zoom: 1.3; }

@keyframes avatar-preparing {
  0%   { transform: translate(0, 0) rotate(0); }
  15%  { transform: translate(-0.4px, 0.2px) rotate(-0.3deg); }
  30%  { transform: translate(0.3px, -0.4px) rotate(0.2deg); }
  45%  { transform: translate(-0.2px, 0.3px) rotate(-0.2deg); }
  60%  { transform: translate(0.4px, -0.2px) rotate(0.3deg); }
  75%  { transform: translate(-0.3px, 0.4px) rotate(-0.3deg); }
  90%  { transform: translate(0.2px, -0.3px) rotate(0.2deg); }
  100% { transform: translate(0, 0) rotate(0); }
}
.avatar-zoomable.avatar-preparing {
  animation: avatar-preparing 800ms ease-in-out infinite;
  filter: blur(0.4px);
  z-index: 100;
}
.avatar-zoomable.avatar-zoom-active {
  animation: none;
  filter: none;
  transform: scale(var(--avatar-zoom));
  box-shadow:
    0 8px 32px rgba(60, 40, 20, 0.32),
    0 0 0 2px var(--color-accent);
  z-index: 100;
  border-radius: 50%;
  transition:
    transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 280ms cubic-bezier(0.32, 0.72, 0.34, 1);
}

/* Clone-to-body: avatar uvnitř overflow:hidden parent (table cell, drawer).
   JS ho zkopíruje do body s position:fixed, takže zoom se nořezává. */
.avatar-zoom-clone {
  --avatar-zoom: 3;
  transition:
    transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 280ms cubic-bezier(0.32, 0.72, 0.34, 1);
  transform-origin: center center;
  border-radius: 50%;
  overflow: visible !important;  /* override `.avatar { overflow: hidden }` — zoom clone musí mít visible aby box-shadow halo NEBYL clip */
}
.avatar-zoom-clone.avatar-xs  { --avatar-zoom: 5; }
.avatar-zoom-clone.avatar-sm  { --avatar-zoom: 3.5; }
.avatar-zoom-clone.avatar-md  { --avatar-zoom: 2.5; }
.avatar-zoom-clone.avatar-lg  { --avatar-zoom: 2; }
.avatar-zoom-clone.avatar-xl  { --avatar-zoom: 1.3; }
.avatar-zoom-clone.avatar-zoom-active {
  transform: scale(var(--avatar-zoom));
  box-shadow:
    0 8px 32px rgba(60, 40, 20, 0.32),
    0 0 0 2px var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .avatar-zoomable, .avatar-zoom-clone { transition-duration: 0ms; }
  .avatar-zoomable.avatar-preparing { animation: none; filter: none; }
}

/* Avatar wrapper s edit click (drawer header) — overlays kamera ikonu na hover. */
.avatar-edit {
  position: relative;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
}
.avatar-edit::after {
  content: "📷";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 14, 8, 0.55);
  border-radius: 50%;
  opacity: 0;
  font-size: 1.2em;
  transition: opacity var(--dur-fast) var(--ease-spring);
}
.avatar-edit:hover::after,
.avatar-edit:focus-within::after { opacity: 1; }

/* ============================================================================
   Photo upload dialog (port z richtodo-web KI-R204)
   Apple-Cupertino glass overlay, kruhový crop preview, smooth zoom + rotate.
   ============================================================================ */
.photo-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 14, 8, 0.55);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  animation: photoDialogFadeIn 200ms ease-out;
}
@keyframes photoDialogFadeIn { from { opacity: 0; } to { opacity: 1; } }

.photo-dialog {
  width: 440px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow:
    0 24px 80px rgba(60, 40, 20, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: photoDialogSlideIn 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes photoDialogSlideIn {
  from { transform: translateY(16px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.photo-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--color-line);
}
.photo-dialog-header span {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}
.photo-dialog-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--color-surface-2);
  border-radius: 50%;
  color: var(--color-ink-muted);
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.photo-dialog-close:hover {
  background: var(--color-line);
  color: var(--color-ink);
}

.photo-dialog-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  overflow-y: auto;
}

.photo-dialog-dropzone {
  width: 100%;
  padding: var(--space-7) var(--space-5);
  border: 2px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  background: rgba(255, 255, 255, 0.02);
}
.photo-dialog-dropzone:hover,
.photo-dialog-dropzone.drag-over {
  border-color: var(--color-accent);
  background: rgba(125, 43, 31, 0.06);
}
.photo-dialog-dropzone-icon { font-size: 40px; line-height: 1; opacity: 0.7; }
.photo-dialog-dropzone-text { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
.photo-dialog-dropzone-hint { font-size: var(--text-xs); color: var(--color-ink-muted); }
.photo-dialog-dropzone-btn {
  margin-top: 6px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 500;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
  min-height: 44px;
}
.photo-dialog-dropzone-btn:hover {
  background: var(--color-line);
  border-color: var(--color-accent);
}

.photo-dialog-hidden { display: none !important; }  /* override .photo-dialog flex display — hide stage during transition without re-layout flicker */

.photo-dialog-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
}
.photo-dialog-viewport {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-accent);
  box-shadow:
    0 0 0 1px rgba(125, 43, 31, 0.18),
    0 8px 32px rgba(60, 40, 20, 0.24);
  cursor: grab;
  touch-action: none;
  background: var(--color-bg);
}
.photo-dialog-viewport:active { cursor: grabbing; }
.photo-dialog-viewport canvas { display: block; width: 100%; height: 100%; }

.photo-dialog-viewport--transparent {
  background-image:
    linear-gradient(45deg, var(--color-surface-2) 25%, transparent 25%),
    linear-gradient(-45deg, var(--color-surface-2) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--color-surface-2) 75%),
    linear-gradient(-45deg, transparent 75%, var(--color-surface-2) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.photo-dialog-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 320px;
}
.photo-dialog-rotate {
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-ink-muted);
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  flex-shrink: 0;
}
.photo-dialog-rotate:hover {
  background: var(--color-line);
  border-color: var(--color-accent);
  color: var(--color-ink);
}

.photo-dialog-zoom {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--color-line-strong);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.photo-dialog-zoom::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-surface);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(60, 40, 20, 0.24);
  transition: transform 120ms ease;
}
.photo-dialog-zoom::-webkit-slider-thumb:hover { transform: scale(1.15); }
.photo-dialog-zoom::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-surface);
  cursor: pointer;
}

.photo-dialog-hint {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  text-align: center;
}

.photo-dialog-bg-segmented {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  margin-top: 8px;
  animation: photo-dialog-bg-fade-in 240ms cubic-bezier(0.32, 0.72, 0.34, 1);
}
@keyframes photo-dialog-bg-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.photo-dialog-bg-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.photo-dialog-bg-options {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(60, 40, 20, 0.12);
}
.photo-dialog-bg-options button {
  appearance: none;
  border: none;
  background: transparent;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-ink-muted);
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.photo-dialog-bg-options button:hover { color: var(--color-ink); }
.photo-dialog-bg-options button.active {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: 0 1px 3px rgba(125, 43, 31, 0.3);
}

.photo-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-line);
  background: var(--color-surface-2);
}

/* Member photo block v drawer header — avatar lg + edit/delete actions vedle. */
.drawer__section--photo {
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, var(--color-surface-2) 0%, var(--color-surface) 100%);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.member-photo-block {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.member-photo-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ===== V9.13 Member attachments (přihlášky PDF + dokumenty) ===== */
.drawer__section--attachments {
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.drawer__section--attachments h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-ink);
  margin: 0 0 var(--space-3) 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.attachments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.attachments-empty {
  grid-column: 1 / -1;
  padding: var(--space-4);
  text-align: center;
  color: var(--color-ink-faint);
  font-size: var(--text-sm);
  font-style: italic;
  background: color-mix(in srgb, var(--color-surface-2) 60%, transparent);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-md);
}

.attachment-card {
  position: relative;
  display: flex;
  align-items: stretch;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    border-color var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-fast) var(--ease-spring),
    transform var(--dur-fast) var(--ease-spring);
  min-height: 60px;
}

.attachment-card:hover {
  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-line));
  box-shadow: var(--shadow-2);
}

.attachment-card__open,
.attachment-card__noopen {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: transparent;
  border: 0;
  text-align: left;
  font: inherit;
  color: var(--color-ink);
  /* Min 44px touch target */
  min-height: 44px;
}

.attachment-card__open {
  cursor: pointer;
}

.attachment-card__open:hover {
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

.attachment-card__open:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: -2px;
}

.attachment-card__thumb {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-accent) 8%, var(--color-surface-2)),
    var(--color-surface-2));
  border-radius: var(--radius-sm);
  font-size: 22px;
  border: 1px solid var(--color-line);
}

.attachment-card__meta {
  flex: 1;
  min-width: 0;  /* prevent grid blow-out */
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.attachment-card__filename {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attachment-card__detail {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

.attachment-card__delete {
  flex-shrink: 0;
  width: 36px;
  min-width: 36px;
  border: 0;
  border-left: 1px solid var(--color-line);
  background: transparent;
  color: var(--color-ink-faint);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-spring),
    color var(--dur-fast) var(--ease-spring);
  /* Min 44×44 touch target via height fallback */
  min-height: 44px;
}

.attachment-card__delete:hover {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.attachment-card__delete:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: -2px;
}

/* Dropzone — drag area + click-to-pick. Native <label> wraps <input> hidden */
.attachment-dropzone {
  border: 2px dashed var(--color-line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface-2) 50%, transparent);
  transition:
    border-color var(--dur-fast) var(--ease-spring),
    background var(--dur-fast) var(--ease-spring),
    transform var(--dur-fast) var(--ease-spring);
}

.attachment-dropzone:hover,
.attachment-dropzone.is-drag-over {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface-2));
}

.attachment-dropzone.is-drag-over {
  transform: scale(1.01);
}

.attachment-dropzone__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  cursor: pointer;
  min-height: 64px;  /* touch target */
  user-select: none;
}

.attachment-dropzone__inner:focus-within {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

.attachment-dropzone__icon {
  font-size: 24px;
  line-height: 1;
  color: var(--color-accent);
}

.attachment-dropzone__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--color-ink);
  font-weight: 500;
}

.attachment-dropzone__hint {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
  .attachment-card,
  .attachment-dropzone {
    transition: none;
  }
}

/* ===== FIO daily pull UI (Fáze P2 2026-05-10 — admin SPA /admin#/fio) ===== */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.card details {
  margin-bottom: var(--space-3);
}
.card > summary,
.card details > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-3) 0;
  font-size: var(--text-md);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  user-select: none;
  min-height: 44px;
}
.card > summary::-webkit-details-marker,
.card details > summary::-webkit-details-marker { display: none; }
.card > summary::before,
.card details > summary::before {
  content: "▸";
  color: var(--color-text-muted);
  transition: transform var(--dur-fast) var(--ease-out);
  display: inline-block;
}
.card[open] > summary::before,
.card details[open] > summary::before { transform: rotate(90deg); }
.card details > summary:focus-visible,
.card > summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  .card > summary::before,
  .card details > summary::before { transition: none; }
}

/* ===== Dashboard chart card + donut (Fáze M 2026-05-10) ===== */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.card--chart {
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
.card--chart > h2 {
  margin: 0;
  font-size: var(--text-lg);
}
.dashboard-chart {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 240px;
}
.donut-chart {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: center;
  width: 100%;
}
.donut-chart__svg {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  grid-row: 1 / span 2;
}
.donut-chart__seg {
  transform-origin: center;
  /* transition assigned imperatively v JS, ne tady (zachovat počáteční dasharray=0) */
}
.donut-chart__center {
  position: absolute;
  top: 50%;
  left: calc(110px); /* polovina max-width svg = (220/2) */
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.donut-chart__center-label {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}
.donut-chart__center-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.donut-chart__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.donut-chart__legend-item {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--text-sm);
}
.donut-chart__legend-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.donut-chart__legend-label {
  color: var(--color-text);
}
.donut-chart__legend-value {
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.donut-chart__empty {
  width: 100%;
  text-align: center;
  padding: var(--space-5);
  color: var(--color-text-muted);
  font-style: italic;
}
@media (max-width: 540px) {
  .donut-chart {
    grid-template-columns: 1fr;
  }
  .donut-chart__svg { grid-row: auto; max-width: 180px; margin: 0 auto; }
  .donut-chart__center { left: 50%; }
}
/* prefers-reduced-motion: ošetřeno přímo v donut-chart.js (skip inline transition assignment) */

/* ===== File dropzone (Fáze L 2026-05-10 — drag-and-drop visual feedback) ===== */
.field.dropzone {
  position: relative;
  border: 2px dashed var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface-2);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.field.dropzone > span {
  font-weight: 600;
  color: var(--color-text);
}
.field.dropzone .input[type="file"] {
  margin-top: var(--space-2);
  background: transparent;
  border: 1px dashed var(--color-line-strong);
  cursor: pointer;
}
.dropzone__status {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
  word-break: break-word;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.field.dropzone--drag-over {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface-2));
  transform: scale(1.005);
}
.field.dropzone--drag-over .dropzone__status {
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
  border-color: var(--color-accent);
  color: var(--color-text);
}
.field.dropzone--has-files {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 6%, var(--color-surface-2));
}
.field.dropzone--has-files .dropzone__status {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
  font-weight: 500;
}
.field.dropzone--error {
  border-color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 6%, var(--color-surface-2));
}
.field.dropzone--error .dropzone__status {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .field.dropzone,
  .dropzone__status { transition: none; }
  .field.dropzone--drag-over { transform: none; }
}

/* ===== Autosave indicator (Fáze K 2026-05-10 — DraftAutosave 3-state status) ===== */
.autosave-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  min-height: 22px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.autosave-indicator:empty { opacity: 0; }
.autosave-indicator::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.autosave-indicator[data-autosave-state="idle"]:empty::before { display: none; }
.autosave-indicator[data-autosave-state="pending"] {
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-color: var(--color-line);
}
.autosave-indicator[data-autosave-state="success"] {
  color: var(--color-success-text);
  background: var(--color-success-bg);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}
.autosave-indicator[data-autosave-state="error"] {
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .autosave-indicator { transition: none; }
}

/* ======================================================================
   V9.3 2026-05-10 — FIO admin redesign per Rich* GUI Philosophy 7 pravidel.
   Hero counter + progress + filter chips + group cards + glassmorphism.
   ====================================================================== */

/* HERO ZONE — primary focus zone */
.fio-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr auto;
  gap: var(--space-6);
  align-items: center;
  margin: 0 0 var(--space-5);
  padding: var(--space-6);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.18)),
    var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
}

.fio-hero__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fio-hero__counter {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.fio-hero__big {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--color-accent);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  display: inline-block;
  transition: transform var(--dur-mid) var(--ease-spring-overshoot),
              color var(--dur-mid) var(--ease-spring);
}

.fio-hero__big.is-pulse {
  transform: scale(1.12);
  color: var(--color-success);
}

.fio-hero__unit {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-ink-muted);
  font-weight: 500;
}

.fio-hero__label {
  font-size: var(--text-base);
  color: var(--color-ink-muted);
  letter-spacing: 0.01em;
}

.fio-hero__progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.fio-progress {
  height: 10px;
  background: var(--color-surface-2);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  position: relative;
}

.fio-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-success), color-mix(in srgb, var(--color-success) 70%, var(--color-accent) 30%));
  border-radius: inherit;
  transition: width var(--dur-slow) var(--ease-spring);
  box-shadow: 0 0 12px rgba(77,119,65,0.35);
}

.fio-hero__hint {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.fio-hero__hint strong {
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.fio-hero__pct {
  margin-left: auto;
  font-weight: 600;
  color: var(--color-success-text);
}

.fio-hero__schedule {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: right;
  border-left: 1px solid var(--color-line);
  padding-left: var(--space-5);
}

.fio-hero__schedule-label {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fio-hero__schedule-value {
  font-size: var(--text-base);
  color: var(--color-ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .fio-hero {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-5);
  }
  .fio-hero__schedule {
    border-left: 0;
    border-top: 1px solid var(--color-line);
    padding-left: 0;
    padding-top: var(--space-3);
    text-align: left;
  }
}

/* ERROR BANNER above hero */
.fio-error-banner {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

/* FILTER CHIPS — sticky tabs */
.fio-chips {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: var(--space-3) 0;
  background: linear-gradient(to bottom, var(--color-bg) 70%, transparent);
  overflow-x: auto;
  scrollbar-width: thin;
}

.fio-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-line-strong);
  background: var(--color-surface);
  color: var(--color-ink-muted);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-spring),
              color var(--dur-fast) var(--ease-spring),
              border-color var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-spring);
}

.fio-chip:hover {
  background: var(--color-surface-2);
  color: var(--color-ink);
}

.fio-chip:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

.fio-chip.is-active {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
  box-shadow: 0 4px 12px -2px rgba(125,43,31,0.35);
}

.fio-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  background: rgba(255,255,255,0.18);
  color: inherit;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fio-chip:not(.is-active) .fio-chip__count {
  background: var(--color-surface-2);
  color: var(--color-ink-muted);
}

/* SECTION TITLES */
.fio-section-title {
  margin: var(--space-6) 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-ink);
  font-weight: 500;
}

.fio-section-title:first-of-type {
  margin-top: 0;
}

.fio-section-title__hint {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-ink-muted);
  margin-left: var(--space-3);
}

.fio-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* GROUP CARD — glassmorphism */
.fio-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 100%),
    var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-spring),
              opacity var(--dur-slow) var(--ease-spring);
}

.fio-group:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.fio-group.is-resolved {
  opacity: 0.35;
  transform: scale(0.98);
  pointer-events: none;
}

.fio-group.is-hidden,
.fio-loner.is-hidden {
  display: none;
}

.fio-group__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.fio-group__title-wrap {
  flex: 1;
  min-width: 0;
}

.fio-group__title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.fio-group__variants {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px 8px;
  background: var(--color-surface-2);
  color: var(--color-ink-faint);
  font-size: var(--text-xs);
  border-radius: 999px;
  cursor: help;
}

.fio-group__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.fio-group__meta strong {
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

/* CANDIDATE CHIP */
.fio-group__candidate-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}

.fio-candidate {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-success-bg);
  border: 1px solid color-mix(in srgb, var(--color-success) 28%, transparent);
  border-radius: var(--radius-md);
}

.fio-candidate--none {
  background: var(--color-surface-2);
  border-color: var(--color-line);
}

.fio-candidate__icon {
  font-size: 1.4em;
  line-height: 1;
}

.fio-candidate__name {
  flex: 1;
  font-weight: 600;
  color: var(--color-ink);
  font-size: var(--text-base);
}

.fio-candidate__meta {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fio-group__bulk {
  flex-shrink: 0;
  min-height: 44px;
}

/* DETAILS / EXPAND */
.fio-group__details {
  margin: 0;
}

.fio-group__details-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin: 0;
  background: transparent;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-sm);
  user-select: none;
}

.fio-group__details-summary::-webkit-details-marker {
  display: none;
}

.fio-group__details-summary:hover {
  background: var(--color-surface-2);
  color: var(--color-ink);
}

.fio-group__details-icon {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-spring);
}

.fio-group__details[open] .fio-group__details-icon {
  transform: rotate(180deg);
}

.fio-tx-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
}

.fio-tx {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}

.fio-tx__head {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  font-size: var(--text-sm);
}

.fio-tx__date {
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

.fio-tx__amount {
  margin-left: auto;
  font-size: var(--text-base);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.fio-tx__vs {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  font-variant-numeric: tabular-nums;
}

.fio-tx__msg {
  font-style: italic;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.fio-tx__cands {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.fio-cand-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 6px var(--space-3);
  background: var(--color-success-bg);
  color: var(--color-ink);
  border: 1px solid color-mix(in srgb, var(--color-success) 28%, transparent);
  border-radius: 999px;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-spring),
              transform var(--dur-fast) var(--ease-spring);
}

.fio-cand-btn:hover {
  background: color-mix(in srgb, var(--color-success) 25%, var(--color-surface));
  transform: translateY(-1px);
}

.fio-cand-btn--ghost {
  background: var(--color-surface);
  border-color: var(--color-line);
}

.fio-cand-btn__conf {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fio-cand-btn:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* LONER (1× sender) — kompaktnější karta */
.fio-loner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-spring);
}

.fio-loner:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}

.fio-loner__main {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: var(--space-2) var(--space-3);
  align-items: baseline;
  min-width: 0;
}

.fio-loner__date {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fio-loner__amount {
  font-size: var(--text-base);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fio-loner__sender {
  font-weight: 500;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fio-loner__msg {
  grid-column: 1 / -1;
  font-style: italic;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fio-loner__actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-shrink: 0;
}

.fio-loner__no-cand {
  font-size: var(--text-sm);
}

.fio-loner__more {
  position: relative;
}

.fio-loner__more summary {
  list-style: none;
  cursor: pointer;
  padding: 6px var(--space-3);
  min-height: 36px;
  background: var(--color-surface-2);
  border-radius: 999px;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  display: inline-flex;
  align-items: center;
}
.fio-loner__more summary::-webkit-details-marker { display: none; }

.fio-loner__more-list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: var(--z-popover);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  min-width: 220px;
}

/* V9.6 — Split-payment UI (1× FIO tx → N dětí) */
.fio-cand-btn--split {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-brand-wine) 8%, var(--color-surface)),
    color-mix(in srgb, var(--color-brand-wine) 4%, var(--color-surface)));
  border-color: color-mix(in srgb, var(--color-brand-wine) 40%, var(--color-line));
  color: var(--color-text);
  font-weight: 600;
}
.fio-cand-btn--split:hover {
  background: color-mix(in srgb, var(--color-brand-wine) 12%, var(--color-surface));
  border-color: var(--color-brand-wine);
}
.fio-cand-btn__icon {
  margin-right: var(--space-1);
  font-size: 1.05em;
}
.fio-loner__split-btn {
  font-weight: 600;
}

/* Split-payment modal (Apple-like glass) */
.modal-veil {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 1000);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  background: rgba(40, 28, 18, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fade-in 0.18s ease-out;
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-card {
  width: min(480px, 100%);
  max-height: calc(100vh - 2 * var(--space-3));
  overflow: auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 72px rgba(60, 40, 20, 0.32), var(--shadow-glass);
  display: flex;
  flex-direction: column;
  transform: scale(0.96);
  animation: modal-in 0.22s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}
@keyframes modal-in {
  to { transform: scale(1); }
}
.modal-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-line);
}
.modal-card__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}
.modal-card__close {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--text-md);
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  min-height: 44px;
  min-width: 44px;
}
.modal-card__close:hover {
  color: var(--color-text);
  background: var(--color-surface-muted);
}
.modal-card__body {
  padding: var(--space-4);
  flex: 1;
}
.modal-card__lead {
  margin: 0 0 var(--space-3) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.modal-card__lead strong {
  color: var(--color-text);
  font-size: var(--text-md);
}
.modal-card__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-line);
}

.fio-split-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.fio-split-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-muted);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
}
.fio-split-row__label {
  font-weight: 500;
  color: var(--color-text);
}
.fio-split-row__input-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.fio-split-row__input {
  width: 100px;
  padding: var(--space-1) var(--space-2);
  font: inherit;
  font-weight: 600;
  text-align: right;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  min-height: 44px;
}
.fio-split-row__input:focus {
  outline: 2px solid var(--color-ring);
  outline-offset: 1px;
}
.fio-split-row__unit {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.fio-split-sum {
  margin: var(--space-3) 0 0 0;
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--color-success, #2e7d32) 8%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-success, #2e7d32) 30%, var(--color-line));
  border-radius: var(--radius-md);
  text-align: center;
  font-size: var(--text-sm);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.fio-split-sum strong {
  color: var(--color-success, #2e7d32);
  font-size: var(--text-md);
}
.fio-split-sum__hint {
  color: var(--color-text-muted);
  margin-left: var(--space-1);
}
.fio-split-sum.is-invalid {
  background: color-mix(in srgb, var(--color-danger, #c62828) 8%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-danger, #c62828) 40%, var(--color-line));
}
.fio-split-sum.is-invalid strong {
  color: var(--color-danger, #c62828);
}

@media (prefers-reduced-motion: reduce) {
  .modal-veil { animation: none; }
  .modal-card { animation: none; transform: none; }
  .fio-split-sum { transition: none; }
}

@media (max-width: 720px) {
  .fio-loner {
    grid-template-columns: 1fr;
  }
  .fio-loner__main {
    grid-template-columns: auto auto;
  }
  .fio-loner__sender {
    grid-column: 1 / -1;
  }
  .fio-loner__actions {
    width: 100%;
    justify-content: flex-start;
  }
  .fio-group__candidate-row {
    flex-direction: column;
    align-items: stretch;
  }
  .fio-group__bulk {
    width: 100%;
  }
}

/* TOOLS section (collapsed by default) */
.fio-tools {
  margin-top: var(--space-7);
  padding: 0;
  border: 0;
  background: transparent;
}

.fio-tools > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.fio-tools > summary::-webkit-details-marker { display: none; }

.fio-tools > summary::before {
  content: "▸";
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-spring);
}

.fio-tools[open] > summary::before {
  transform: rotate(90deg);
}

.fio-tools[open] > summary {
  margin-bottom: var(--space-3);
}

.fio-tools .card {
  margin: 0 0 var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
  .fio-hero__big,
  .fio-progress__bar,
  .fio-group,
  .fio-loner,
  .fio-cand-btn,
  .fio-chip,
  .fio-group__details-icon,
  .fio-tools > summary::before,
  .fio-tab,
  .fio-ledger-row {
    transition: none;
  }
  .fio-group:hover,
  .fio-loner:hover,
  .fio-cand-btn:hover,
  .fio-tab:hover,
  .fio-ledger-row:hover {
    transform: none;
  }
}

/* ======================================================================
   V9.4 2026-05-10 — FIO sub-taby (Přiřazování + Transakce) + ledger view
   ====================================================================== */

.fio-tabs {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: var(--space-1);
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}

.fio-tab {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  color: var(--color-ink-muted);
  text-decoration: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-spring),
              color var(--dur-fast) var(--ease-spring),
              transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-spring);
}

.fio-tab:hover {
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  color: var(--color-ink);
}

.fio-tab:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

.fio-tab.is-active {
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: 0 4px 12px -4px rgba(60,40,20,0.2);
}

.fio-tab__icon {
  font-size: 1.6em;
  line-height: 1;
  flex-shrink: 0;
}

.fio-tab__label {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
}

.fio-tab__hint {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: auto;
}

@media (max-width: 720px) {
  .fio-tab {
    flex-direction: column;
    align-items: flex-start;
    min-height: 56px;
    gap: var(--space-1);
  }
  .fio-tab__hint {
    margin-left: 0;
  }
}

/* LEDGER summary (Transakce tab top) */
.fio-ledger-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}

.fio-ledger-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}

.fio-ledger-stat__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

.fio-ledger-stat__label {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fio-ledger-stat--matched .fio-ledger-stat__value { color: var(--color-success); }
.fio-ledger-stat--sponsorship .fio-ledger-stat__value { color: var(--color-accent); }
.fio-ledger-stat--pending .fio-ledger-stat__value { color: var(--color-warning); }
.fio-ledger-stat--historical .fio-ledger-stat__value { color: var(--color-ink-muted); }
.fio-ledger-stat--anonymous .fio-ledger-stat__value { color: var(--color-ink-faint); }

/* LEDGER toolbar (search + filter chips) */
.fio-ledger-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) 0;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: linear-gradient(to bottom, var(--color-bg) 80%, transparent);
}

.fio-ledger-search {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  font-size: var(--text-base);
  color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-spring);
}

.fio-ledger-search:focus {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-ring);
  outline-offset: 1px;
}

.fio-ledger-toolbar .fio-chips {
  position: static;  /* override sticky inheritance */
  margin: 0;
  padding: 0;
  background: transparent;
}

/* LEDGER rows (bank-statement style) */
.fio-ledger {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.fio-ledger-row {
  display: grid;
  grid-template-columns: 100px 110px 200px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  border-left: 4px solid transparent;
  transition: background var(--dur-fast) var(--ease-spring),
              transform var(--dur-fast) var(--ease-spring);
}

.fio-ledger-row:hover {
  background: var(--color-surface-2);
}

.fio-ledger-row--matched      { border-left-color: var(--color-success); }
.fio-ledger-row--sponsorship  { border-left-color: var(--color-accent); }
.fio-ledger-row--pending      { border-left-color: var(--color-warning); }
.fio-ledger-row--historical   { border-left-color: var(--color-ink-faint); }
.fio-ledger-row--anonymous    { border-left-color: var(--color-line-strong); }

.fio-ledger-row__date {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fio-ledger-row__amount {
  font-size: var(--text-base);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.fio-ledger-row__sender {
  font-weight: 500;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fio-ledger-row__msg {
  font-style: italic;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.fio-ledger-row__status {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-end;
  flex-shrink: 0;
}

.fio-ledger-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
}

.fio-ledger-badge--matched      { background: var(--color-success-bg); color: var(--color-success-text); }
.fio-ledger-badge--sponsorship  { background: rgba(125,43,31,0.12); color: var(--color-accent); }
.fio-ledger-badge--pending      { background: var(--color-warning-bg); color: var(--color-warning-text); }
.fio-ledger-badge--historical   { background: var(--color-surface-2); color: var(--color-ink-muted); }
.fio-ledger-badge--anonymous    { background: var(--color-surface-2); color: var(--color-ink-faint); }

.fio-ledger-row__target {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fio-ledger-more {
  margin-top: var(--space-4);
  padding: var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
}

@media (max-width: 900px) {
  .fio-ledger-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }
  .fio-ledger-row__date { grid-column: 1; }
  .fio-ledger-row__amount { grid-column: 2; text-align: right; }
  .fio-ledger-row__sender { grid-column: 1 / -1; }
  .fio-ledger-row__msg { grid-column: 1 / -1; white-space: normal; }
  .fio-ledger-row__status { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
}

/* ─────────────────────────────────────────────────────────────────
   Dashboard insight cards (V9.15/E + V9.16/I — Karel focus zones)
   Per CLAUDE.md §6 pravidlo 4 (focus zones — co teď řešit) +
   pravidlo 5 (návykovost — pozitivní feedback po akci).
   ───────────────────────────────────────────────────────────────── */
.dashboard-insights {
  margin: var(--space-5) 0;
}
.dashboard-insights[hidden] { display: none; }
.dashboard-insights__head {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.dashboard-insights__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.insight-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg, 14px);
  text-decoration: none;
  color: var(--color-text);
  cursor: pointer;
  transition: transform var(--dur-fast, 150ms) var(--ease-out, ease),
              box-shadow var(--dur-fast, 150ms) var(--ease-out, ease),
              border-color var(--dur-fast, 150ms) var(--ease-out, ease);
}
.insight-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--color-brand, #8e1414);
}
.insight-card:focus-visible {
  outline: 2px solid var(--color-ring, #8e1414);
  outline-offset: 2px;
}
.insight-card__icon {
  grid-row: 1 / 3;
  font-size: 1.75rem;
  line-height: 1;
}
.insight-card__count {
  font-family: var(--font-display);
  font-size: var(--text-2xl, 1.75rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-brand, #8e1414);
}
.insight-card__label {
  grid-column: 2;
  font-size: 0.9rem;
  color: var(--color-text-muted, #475569);
  line-height: 1.3;
}
.insight-card__arrow {
  grid-row: 1 / 3;
  font-size: 1.25rem;
  color: var(--color-text-muted, #94a3b8);
  transition: transform var(--dur-fast, 150ms) var(--ease-out, ease),
              color var(--dur-fast, 150ms) var(--ease-out, ease);
}
.insight-card:hover .insight-card__arrow {
  transform: translateX(4px);
  color: var(--color-brand, #8e1414);
}
/* Urgency tinting — high = brand wine, mid = neutral, low = subdued */
.insight-card--high { border-left: 3px solid var(--color-brand, #8e1414); }
.insight-card--mid  { border-left: 3px solid var(--color-accent, #d97706); }
.insight-card--low  { border-left: 3px solid var(--color-line); opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .insight-card,
  .insight-card__arrow { transition: none; }
  .insight-card:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────
   Insurance logo display (V9.16/K — 2026-05-11)
   Per CLAUDE.md §6 pravidlo 1 (Apple-like sexy) + 4 (focus zones).
   Stejná výška, zachované poměry stran (height fixed, width auto).
   ───────────────────────────────────────────────────────────────── */
.field__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.field__row > .select { flex: 1 1 auto; min-width: 0; }
.field__row-preview {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 32px;
}

.insurance-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  vertical-align: middle;
  line-height: 1;
}
.insurance-logo__img {
  display: block;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
  border-radius: 4px;
  background: var(--color-surface-soft, #fafafa);
  padding: 2px 4px;
  border: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.05));
}
.insurance-logo--sm .insurance-logo__img { height: 16px; max-width: 60px; }
.insurance-logo--md .insurance-logo__img { height: 24px; max-width: 90px; }
.insurance-logo--lg .insurance-logo__img { height: 32px; max-width: 120px; }

.insurance-logo__label {
  font-size: 0.85em;
  color: var(--color-text-muted, #475569);
  white-space: nowrap;
}

/* Text fallback (kód bez logo souboru) — neutrální badge */
.insurance-logo--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-weight: 600;
  background: var(--color-surface-soft, #f1f5f9);
  color: var(--color-text, #1e293b);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  border-radius: 6px;
  padding: 0 var(--space-2);
  letter-spacing: 0.05em;
}
.insurance-logo--sm.insurance-logo--text { font-size: 0.7rem; height: 16px; min-width: 36px; }
.insurance-logo--md.insurance-logo--text { font-size: 0.85rem; height: 24px; min-width: 44px; }
.insurance-logo--lg.insurance-logo--text { font-size: 1rem; height: 32px; min-width: 52px; }