/* ── Vendorované fonty (woff2, latin + latin-ext pro češtinu; žádný CDN).
   Variabilní řezy → font-weight range. Verze v názvu souboru (url() nemá Jinja ?v=). ── */
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/fonts/InstrumentSans-latinext.v1.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/fonts/InstrumentSans-latin.v1.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/static/fonts/JetBrainsMono-latinext.v1.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/static/fonts/JetBrainsMono-latin.v1.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  /* ── Font tokens ── */
  --font-sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Palette layer (raw values) — TEPLÁ paleta „DealStudio Final".
     Retint na místě: sémantická vrstva i komponenty zdědí teplo bez migrace.
     Smysluplný muted TEXT držen na AA (viz komentáře); dekorace smí být světlejší. ── */
  --white: #fff;                    /* karty, inputy (design --card) */
  --color-canvas: #f7f6f2;          /* stránka / main-content (design --bg, „warm paper") */
  --slate-50: #efede8;              /* inset povrchy (activity-row, discovery, metric-card, table hover) */
  --slate-100: #e8e4db;            /* kanban sloupec, quicklog bg, hover */
  --slate-200: #ddd8cc;            /* border-soft, secondary btn, dividery, terminal sloupec */
  --slate-300: #cdc7b8;            /* --color-border, tag-slate border */
  --slate-400: #b5b0a3;            /* DEKORACE/ikony (design --faint; ~2:1, NE na text) */
  --slate-500: #6f6a5e;            /* muted TEXT — AA 5.0:1 na papíru */
  --slate-600: #57534a;            /* tmavší muted: col-header, table th, secondary text */
  --slate-700: #45403a;            /* btn text; sidebar hover bg (bílý text OK) */
  --slate-900: #1c1a17;            /* ink: nadpisy, sidebar bg, silný text (design --ink) */
  --slate-950: #161310;            /* near-black: ta-item-main, login bg */
  --slate-body: #1c1a17;           /* body text = ink */
  --slate-id: #6f6a5e;             /* deal-id / card-zdroj muted (AA) */

  --blue-50: #eef1fb;              /* indigo tint: ghost hover, banner, chip bg */
  --blue-100: #dde4f7;            /* chip active, tag-blue bg */
  --blue-200: #c6d1f0;            /* chip border, confirmed border */
  --blue-300: #9fb2e8;            /* ghost hover border */
  --blue-500: #3a5fc8;            /* primary, linky, akcent (design --accent) */
  --blue-600: #2c4aa3;            /* primary-strong, focus ring (design --btn-hover) */
  --blue-700: #24408c;            /* tag-blue text, rec-export */
  --blue-900: #1e2f63;            /* chip label text */

  --sky-50: #eef2f7;              /* vp-pull bg, is-auto row (odlišený „stroj" tón) */
  --sky-100: #dfe7f1;            /* info badge bg, state-count bg, profil-chip bg */
  --sky-700: #3a5a86;            /* info text, state-name, contact-link hover (AA ~5.6:1) */
  --email-bg: #eef2f7;            /* email card background (subtilní „stroj" tint) */
  --email-from: #2c3f5c;          /* email „from" name */

  --red-50: #fbeee9;
  --red-100: #f6ddd4;
  --red-200: #eec4b6;
  --red-300: #e3a591;
  --red-500: #c2452d;            /* triage-badge bg (bílá ~4.6:1) */
  --red-600: #c2452d;            /* danger/lost TEXT — AA 5.0:1 (design --lost) */
  --red-700: #a5371f;            /* tag-red/rec-remove/timeline-error text (tmavší AA) */

  --green-50: #eaf3ec;
  --green-100: #d6e9dc;
  --green-300: #9bc9a9;
  --green-600: #2c7248;          /* won/success TEXT — AA 4.6:1 na green-100 tintu, 5.8:1 na bílé */

  --orange-50: #fdf2e9;
  --orange-500: #a3540f;         /* no-next-label bg (bílá 5.5:1); transition-warning border */
  --orange-700: #a3540f;         /* .badge--attention bg — bílá na #a3540f = 5.5:1 (AA, salientní teplá) */

  --yellow-100: #f6ecd0;         /* warn badge / approval / ai_draft / birthday bg */
  --yellow-800: #8a5a12;         /* warn badge text (AA ~5.5:1 na yellow-100) */
  --amber-800: #8a5a12;          /* approval/ai_draft/birthday text */

  --gray-700: #3f3a32;           /* body text v aktivitách/e-mailu (warm dark) */

  /* ── Semantic layer (aliases) ── */
  --color-text: var(--slate-body);
  --color-text-strong: var(--slate-900);
  --color-text-muted: var(--slate-500);   /* WCAG AA: #6f6a5e (~5.0:1 na papíru) — jen pro smysluplný muted TEXT; dekorace/bordery/ikony drží --slate-400 (#b5b0a3, ~2:1) */
  --color-text-subtle: var(--slate-500);
  --color-heading-inv: var(--white);
  --color-border: var(--slate-300);
  --color-border-soft: var(--slate-200);
  --color-border-hair: var(--slate-100);
  --color-surface: var(--white);
  --color-surface-muted: var(--slate-50);
  --color-primary: var(--blue-500);
  --color-primary-strong: var(--blue-600);
  --color-danger: var(--red-600);
  --color-success: var(--green-600);
  --color-sidebar-bg: var(--slate-900);
  --focus-ring-color: var(--blue-600);
  --color-warn-text: #a35a15;   /* warm amber pro významový warn text (AA 5,2:1 na papíru) */

  /* ── Spacing / radius / font-size tokens (common recurring) ── */
  --radius-sm: 3px;
  --radius: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 10px;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;

  /* ── Spacing scale (odpojeno od --radius / --fs-*; hodnoty = původní resolved px, zero-visual) ── */
  --space-1: 4px;    /* == staré var(--radius) použité jako spacing */
  --space-2: 8px;
  --space-3: 12px;   /* == staré var(--fs-12) použité jako spacing */
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  --touch-target: 44px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-sans); display: flex; flex-direction: column; min-height: 100dvh; font-size: var(--fs-14); color: var(--color-text); }

/* ── Horní lišta (desktop shell; ≤768px skrytá, viz @media) ── */
.topbar { display: flex; align-items: center; gap: 16px; flex: none; height: 58px; padding: 0 24px; background: var(--white); border-bottom: 1px solid var(--slate-200); }
.topbar-logo { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; color: var(--slate-900); text-decoration: none; }
.topbar-logo__mark { width: 24px; height: 24px; border-radius: var(--radius-md); background: var(--slate-900); color: var(--white); font-family: var(--font-mono); font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.topbar-tabs { display: flex; align-items: center; gap: 2px; margin-left: 12px; }
.topbar-tabs > a, .topbar-more__toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-md); font-size: var(--fs-13); font-weight: 500; color: var(--slate-500); text-decoration: none; background: none; border: none; cursor: pointer; }
.topbar-tabs > a:hover, .topbar-more__toggle:hover { color: var(--slate-900); }
.topbar-tabs > a[aria-current="page"], .topbar-more__toggle[data-active="true"] { background: var(--blue-50); color: var(--blue-500); }
.topbar-tabs > a:focus-visible, .topbar-more__toggle:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.topbar-more { position: relative; }
.topbar-more__panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; min-width: 180px; list-style: none; background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 4px; }
.topbar-more__panel a { display: block; padding: 8px 12px; border-radius: var(--radius); color: var(--slate-700); text-decoration: none; font-size: var(--fs-13); }
.topbar-more__panel a:hover { background: var(--slate-100); }
.topbar-more__panel a[aria-current="page"] { color: var(--blue-500); font-weight: 600; }
.topbar-search { margin-left: auto; }
.topbar-search input { width: 210px; height: 34px; padding: 0 12px; border: 1px solid var(--slate-300); border-radius: var(--radius-lg); background: var(--white); font-size: var(--fs-13); }
.topbar-search input:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 1px; }
.topbar-cta { height: 34px; white-space: nowrap; }

/* ── Přepínač tématu (F1b) ── */
.theme-toggle { height: 34px; min-width: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 9px; border: 1px solid var(--slate-300); border-radius: var(--radius-lg); background: var(--white); color: var(--slate-600); cursor: pointer; font-size: 15px; }
.theme-toggle:hover { color: var(--slate-900); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.theme-toggle__icon { line-height: 1; }
/* Mobilní varianta v „Více" sheetu — plná šířka, textový label */
.nav-sheet__theme { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--slate-200); }
.theme-toggle--wide { width: 100%; min-height: var(--touch-target); justify-content: flex-start; gap: 10px; padding: 11px 10px; border: none; border-radius: var(--radius); background: none; color: var(--slate-700); font-size: var(--fs-14); font-weight: 500; }
.theme-toggle--wide:hover { background: var(--slate-100); color: var(--slate-900); }

/* Spodní tab bar + „Více" sheet — jen mobil (desktop skryté) */
.bottom-bar { display: none; }
.nav-sheet { display: none; }

.main-content { flex: 1; padding: 24px; overflow: auto; background: var(--color-canvas); }
/* Sjednocená šířka obsahu: přímé děti .main-content vycentrované na 1100px (jako detail).
   `:not(dialog)` — <dialog> modaly (inline-create na deal formu, štítky) jsou přímé děti;
   třídový selektor by přebil jejich `dialog{max-width:420px}` a nafoukl je. Kanban výjimka
   přes .main-content--wide (board potřebuje full-width vodorovný scroll). .form-card (560) a
   .deal-detail (1100) mají vlastní max-width (stejná specificita, pozdější pořadí → vyhrají). */
.main-content > *:not(dialog) { max-width: 1100px; margin-inline: auto; }
.main-content--wide > *:not(dialog) { max-width: none; margin-inline: 0; }
.page-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: 16px; }
.page-header h1 { font-size: 22px; }
/* Podnadpis stránky (agenda/emails ho používaly, ale nebyl definován → nestylovaný <p>). */
.page-subtitle { color: var(--color-text-muted); font-size: var(--fs-13); margin: -8px 0 16px; }
/* Utilita pro inline formy (nahrazuje ad-hoc style="display:inline" u malých POST forem). */
.inline-form { display: inline; }
.inline-form + .inline-form { margin-left: 8px; }
/* Tlumenější text (nahrazuje ad-hoc style="color:#475569" v náhledu příští aktivity). */
.text-subtle { color: var(--slate-600); }
/* Wrapper pro dvě akce v triage řádku (nahrazuje style="display:inline" na stacked formech). */
.triage-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Mřížka metrik na dashboardu (aby druhá metrika neplavala). */
.metric-grid { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.kanban-board { display: flex; gap: var(--space-3); overflow-x: auto; align-items: flex-start; min-height: 70dvh; }
.kanban-col { min-width: 220px; max-width: 240px; background: var(--slate-100); border-radius: var(--radius-lg); padding: 8px; }
.kanban-col.terminal { opacity: 0.65; background: var(--slate-200); }
.col-header { display: flex; align-items: baseline; gap: 6px; padding: 4px 4px 8px; font-weight: 600; font-size: var(--fs-12); text-transform: uppercase; color: var(--slate-600); }
.col-count { background: var(--slate-600); color: var(--white); border-radius: var(--radius-pill); padding: 1px 7px; font-size: var(--fs-11); }
.col-sum { margin-left: auto; font-weight: 500; font-size: var(--fs-11); color: var(--slate-500); text-transform: none; }
.card-list { min-height: 40px; }

.deal-card { background: var(--white); border-radius: var(--radius-md); padding: 12px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.08); cursor: grab; transition: box-shadow .12s ease, transform .12s ease; }
.deal-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.deal-card:active { cursor: grabbing; }
/* Karta: název prominentní (velký), firma+kontakt menší muted podřádek; badge vpravo nahoře. */
.card-head { display: flex; align-items: flex-start; gap: 6px; margin-bottom: var(--space-1); }
.card-title { flex: 1; min-width: 0; font-weight: 600; font-size: var(--fs-14); line-height: 1.3; color: var(--slate-900); text-decoration: none; overflow-wrap: anywhere; word-break: break-word; }
.card-title:hover { color: var(--blue-500); }
.card-badges { flex: none; display: flex; align-items: center; gap: 4px; }
.badge-voice { margin-left: auto; font-size: var(--fs-11); font-weight: 500; color: var(--blue-500); background: var(--blue-50); padding: 1px 6px; border-radius: var(--radius-sm); }
/* V badge skupině karty seskupit VOICE k ostatním (ne odtlačit auto-marginem jako ve feedu). */
.card-badges .badge-voice { margin-left: 0; }
.card-sub { font-size: var(--fs-12); color: var(--slate-500); margin-top: 2px; overflow-wrap: anywhere; word-break: break-word; }
.card-firma-link { color: inherit; text-decoration: none; }
.card-firma-link:hover { color: var(--blue-500); }
.card-value-row { display: flex; align-items: baseline; margin-top: 6px; }
.card-value { font-size: var(--fs-12); color: var(--slate-900); }
.card-age { margin-left: auto; font-size: var(--fs-11); color: var(--slate-400); }
.add-card { display: block; text-align: center; padding: 9px; border: 1px dashed var(--color-border); border-radius: var(--radius-md); color: var(--slate-500); font-size: var(--fs-12); text-decoration: none; }
.add-card:hover { color: var(--slate-900); border-color: var(--slate-400); }
/* Frozen countdown vždy viditelný (design) → base muted; --urgent (blízko deadline dle
   frozen_countdown_warning_days) červený. Tím config klíč zůstává živý. */
.countdown-warning { color: var(--slate-500); font-weight: 500; font-size: var(--fs-12); margin-top: var(--space-1); }
.countdown-warning--urgent { color: var(--red-600); font-weight: 600; }
.deal-card.no-next-activity { border-left: 4px solid var(--orange-500); background: var(--orange-50); }
.no-next-label { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: 6px; font-size: var(--fs-11); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--white); background: var(--orange-500); border-radius: var(--radius); padding: 2px 8px; }
.no-next-icon { font-size: var(--fs-12); line-height: 1; }

.filter-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filter-form input, .filter-form select { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius); }

form label { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); font-weight: 500; }
form label input, form label select, form label textarea { padding: 7px 10px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: var(--fs-14); }
form label textarea { min-height: 80px; resize: vertical; }
form button[type=submit] { padding: 8px 18px; background: var(--blue-500); color: var(--white); border: none; border-radius: var(--radius); cursor: pointer; font-weight: 600; }
form button[type=submit][disabled] { opacity: .6; cursor: default; }
form a { color: var(--slate-500); text-decoration: none; margin-left: 8px; }

/* ────────────────────────────────────────────────────────────────────────
   Kanonické komponenty (F1b styleguide). Živá reference: /styleguide.
   Base .btn je PŘED stateful pravidly, aby equal-specificity stavy
   (.btn-quicklog--active níže) při kombinaci vyhrály.
   ──────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius); font-size: var(--fs-14); font-weight: 600;
  line-height: 1.2; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; background: var(--slate-100); color: var(--slate-700);
  white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--primary { background: var(--color-primary); color: var(--white); border-color: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-strong); border-color: var(--color-primary-strong); }
.btn--secondary { background: var(--slate-200); color: var(--slate-600); border-color: var(--slate-200); }
.btn--secondary:hover { background: var(--slate-300); }
.btn--ghost { background: var(--white); color: var(--color-primary); border-color: var(--color-border); }
.btn--ghost:hover { background: var(--blue-50); border-color: var(--blue-300); }
.btn--danger { background: var(--red-50); color: var(--red-600); border-color: var(--red-300); }
.btn--danger:hover { background: var(--red-100); }
.btn--success { background: var(--green-50); color: var(--green-600); border-color: var(--green-300); }
.btn--success:hover { background: var(--green-100); }
.btn--sm { padding: 4px 10px; font-size: var(--fs-12); gap: var(--space-1); }
/* Ikonové tlačítko (✕ smazat / ✎ upravit v timeline) — transparent, bez rámečku.
   Interaktivní ovládací prvek → --slate-500 (#6f6a5e, ~3.7:1 na řádku; NE dekorativní --slate-400 #b5b0a3 ~1.7:1). Hover ještě tmavší. */
.btn--icon { background: none; border-color: transparent; color: var(--slate-500); padding: 2px 6px; font-size: var(--fs-16); font-weight: 400; line-height: 1; }
.btn--icon:hover { color: var(--slate-600); background: none; }

/* Badge systém — sémantické varianty. */
.badge { display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill); font-size: var(--fs-11); font-weight: 700; line-height: 1.5; }
.badge--danger { background: var(--red-100); color: var(--red-600); }
.badge--warn { background: var(--yellow-100); color: var(--yellow-800); }
.badge--ok { background: var(--green-100); color: var(--green-600); }
.badge--info { background: var(--sky-100); color: var(--sky-700); }
.badge--neutral { background: var(--slate-200); color: var(--slate-600); }
/* Sytá "křičící" varianta (kanban "!" needs-review, /emails Triage) — bílý text na --orange-700 (5.16:1, AA). */
.badge--attention { background: var(--orange-700); color: var(--white); }
/* Dekorativní štítky dealů — NE sémantické (žádná stavová sémantika v názvu).
   Jen existující palette tokeny; slate má border, aby nesplynul se --slate-100 sloupcem. */
.badge--tag-blue  { background: var(--blue-100);   color: var(--blue-700); }
.badge--tag-green { background: var(--green-100);  color: var(--green-600); }
.badge--tag-amber { background: var(--yellow-100); color: var(--yellow-800); }
.badge--tag-red   { background: var(--red-100);    color: var(--red-700); }
.badge--tag-sky   { background: var(--sky-100);    color: var(--sky-700); }
.badge--tag-slate { background: var(--slate-200);  color: var(--slate-600); border: 1px solid var(--slate-300); }
.card-stitek { margin-top: 4px; }
/* Čítač (sidebar triage/agenda, col-count) — SAMOSTATNÁ komponenta (htmx swap target). */
.count-pill { display: inline-block; min-width: 18px; text-align: center; padding: 1px 7px; border-radius: var(--radius-pill); font-size: var(--fs-11); font-weight: 700; background: var(--slate-600); color: var(--white); }
/* Sytá „křičící" varianta čítače (Triage needs-review) — bílá na --orange-700 (5.5:1 AA). */
.count-pill--attention { background: var(--orange-700); }

/* ── Mono číslice: utilita .num + číselné UI prvky (design: JetBrains Mono na čísla) ── */
.num,
.count-pill, .col-count, .col-sum, .card-value, .card-age, .deal-id-badge, .metric-value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}

/* .data-table modifikátory. */
.data-table--compact th, .data-table--compact td { padding: 5px 8px; }
.data-table tr.is-overdue td { background: var(--red-50); }
.data-table tr.is-overdue:hover td { background: var(--red-100); }

/* ── Deal form layout (grouped fieldsets, centered card) ── */
.form-card { width: 100%; max-width: 560px; margin-inline: auto; }
.form-card h1 { margin-bottom: var(--space-1); }
.form-subtitle { color: var(--slate-500); font-size: var(--fs-14); margin: 0 0 14px; }
.muted { color: var(--color-text-muted); font-weight: 400; }
.req { color: var(--red-600); font-weight: 700; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-card fieldset + fieldset { margin-top: 26px; }
.form-card legend { padding: 0; margin-bottom: var(--space-3); font-size: var(--fs-12); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-500); }
/* Samostatný label typeaheadu (Firma/Osoby/E-shopy) — sjednotit mezeru label→pole na 4px
   jako u polí obalených labelem (Název/Zdroj/Očekávaná hodnota); jinak by měl 12px. */
.form-card label[for] { margin-bottom: var(--space-1); }
/* Zdroj zůstává <select>, ale native OS vzhled (macOS) ignoruje box-model → jiná výška/rámeček
   než textová pole. appearance: none sjednotí výšku+rámeček; vlastní šipka (inline SVG, žádný CDN). */
.form-card select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--white);
  /* SVG data-URI: stroke barva %236f6a5e (slate-500 warm) je LITERÁL — var() nefunguje uvnitř data-URI stringu */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%236f6a5e' stroke-width='1.4' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
.field-error { color: var(--red-600); font-size: var(--fs-13); margin-top: var(--space-1); }
.form-actions { display: flex; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--slate-200); }
.form-actions button[type=submit] { padding: 10px 22px; font-size: 15px; }
.form-actions a { margin-left: auto; padding: 8px 10px; }

.data-table { width: 100%; border-collapse: collapse; margin-top: var(--space-3); }
.data-table th, .data-table td { padding: 8px 12px; border-bottom: 1px solid var(--slate-200); text-align: left; }
.data-table th { font-weight: 600; color: var(--slate-600); font-size: var(--fs-12); text-transform: uppercase; }
.data-table tr:hover { background: var(--slate-50); }
.data-table a { color: var(--blue-500); text-decoration: none; }
/* Horizontální scroll kontejner pro širokou tabulku (mobile-first, viz styleguide). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Legenda definic metrik pod týdenním přehledem. */
.weekly-legend { margin-top: var(--space-3); padding-left: 1.2em; list-style: disc; }
.weekly-legend li { margin: 2px 0; }

.empty-state { color: var(--color-text-muted); font-style: italic; padding: 16px 0; }
.alert-error { background: var(--red-50); color: var(--red-600); padding: 10px 14px; border-radius: var(--radius-md); margin-bottom: 14px; border: 1px solid var(--red-300); }
.alert-success { background: var(--green-50); color: var(--green-600); padding: 10px 14px; border-radius: var(--radius-md); margin-bottom: 14px; }

.deal-detail { max-width: 1100px; margin-inline: auto; }
/* Vizuálně skrytý nadpis pro čtečky/klávesnici (orientace nezávislá na vizuálním pořadí). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Detail dealu (P2) — breadcrumb, hlavička, stepper, dvousloupec ── */
.deal-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: var(--fs-13); margin-bottom: 10px; }
.deal-breadcrumb a { color: var(--slate-500); text-decoration: none; }
.deal-breadcrumb a:hover { color: var(--slate-900); }
.crumb-sep { color: var(--slate-400); }

.deal-header { display: flex; align-items: flex-start; gap: var(--space-5); margin-bottom: 18px; }
.deal-header__main { flex: 1; min-width: 0; }
.deal-header h1 { font-size: 24px; letter-spacing: -.015em; }
.deal-id-badge { font-size: var(--fs-13); color: var(--color-text-muted); font-weight: 400; }
.deal-contactline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: var(--fs-13); color: var(--slate-500); }
.deal-contactline a { color: var(--slate-500); text-decoration: none; }
.deal-contactline a:hover { color: var(--color-primary); }
.deal-header__value { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.deal-value { font-size: 22px; font-weight: 600; color: var(--slate-900); }
.deal-value__label { font-size: var(--fs-11); color: var(--slate-500); }
.deal-header__actions { display: flex; align-items: center; gap: var(--space-2); }
.btn--won { background: var(--green-600); color: var(--white); border-color: var(--green-600); }
.btn--won:hover { background: var(--green-600); filter: brightness(.94); }

/* ⋯ menu (details popover) */
.deal-menu { position: relative; }
.deal-menu > summary { list-style: none; cursor: pointer; }
.deal-menu > summary::-webkit-details-marker { display: none; }
.deal-menu__pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; min-width: 160px; background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.deal-menu__pop a, .deal-menu__pop button { text-align: left; }
.deal-menu__pop a { padding: 8px 10px; border-radius: var(--radius); color: var(--slate-700); text-decoration: none; font-size: var(--fs-13); }
.deal-menu__pop a:hover { background: var(--slate-100); }

/* Přesun-select form (samostatný řádek) */
.detail-move--select { margin-bottom: 14px; }

/* Stepper */
.deal-stepper { display: flex; align-items: flex-end; gap: var(--space-1); margin-bottom: 22px; }
.step { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.step__bar { height: 5px; border-radius: var(--radius-sm); background: var(--slate-200); }
.step--done .step__bar, .step--current .step__bar { background: var(--blue-500); }
.step__label { font-size: var(--fs-11); color: var(--slate-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step--current .step__label { color: var(--slate-900); font-weight: 600; }
.step--done .step__label { color: var(--slate-500); }
.outcome-chip { align-self: center; margin-left: 8px; padding: 3px 10px; border-radius: var(--radius-md); font-size: var(--fs-12); font-weight: 600; white-space: nowrap; }
.outcome-chip--won { background: var(--green-100); color: var(--green-600); }
.outcome-chip--lost { background: var(--red-100); color: var(--red-600); }
.outcome-chip--frozen { background: var(--sky-100); color: var(--sky-700); }

/* Dvousloupcový layout + karty */
.deal-grid { display: grid; grid-template-columns: 340px 1fr; gap: var(--space-5); align-items: start; }
.deal-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.detail-card { background: var(--white); border: 1px solid var(--color-border-soft); border-radius: var(--radius-xl); padding: 16px 18px; }
.card-eyebrow { display: block; font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: .08em; text-transform: uppercase; color: var(--slate-400); margin-bottom: 12px; }
.detail-kv { display: grid; grid-template-columns: 92px 1fr; gap: 10px 12px; font-size: var(--fs-13); }
.detail-kv dt { color: var(--slate-500); }
.detail-kv dd { margin: 0; }
.next-step { color: var(--color-warn-text); }

.contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-13); }
.contact-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Další kontakty osoby — dlouhá URL nesmí rozstřelit ~340px levý sloupec
   (precedent .act-obsah a / .act-ref). Barvy nenese → dark override netřeba. */
.kontakt-value { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

.contact-link { color: var(--slate-500); text-decoration: none; }
.contact-link:hover { color: var(--sky-700); text-decoration: underline; }

.discovery-section p { font-size: var(--fs-13); margin-bottom: 8px; }
.discovery-section > a { font-size: var(--fs-13); }

/* Změna stavu v timeline */
.activity-row.stage-change { align-items: center; }

/* ── Historie změn osoby v timeline kontaktu (read-only audit řádek) ──
   Muted varianta .activity-row — vizuálně ustoupí aktivitám (ty jsou to hlavní),
   ale zůstane čitelná. Žádné akce (✎/✕) uvnitř: historie je čtecí. */
.zmena-row { background: transparent; border: 1px dashed var(--slate-200); }
.zmena-body { flex: 1; min-width: 0; }
.zmena-title { font-size: var(--fs-13); color: var(--color-text-muted); }
.zmena-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.zmena-list li { font-size: var(--fs-12); color: var(--color-text-muted); overflow-wrap: anywhere; }
.zmena-pole { font-weight: 600; }
.zmena-val { color: var(--color-text); }
.zmena-val--old { text-decoration: line-through; color: var(--slate-500); }
.zmena-arrow { color: var(--slate-400); margin: 0 2px; }
/* Patka „Starší změny se nezobrazují." — limit historie je vidět, ne tichý. */
.timeline-footnote { font-size: var(--fs-12); color: var(--color-text-muted); font-style: italic; text-align: center; padding: 8px 0; }

/* Rychlé akce detailu (Volat/E-mail/Posunout) — jen mobil, nahoře pod hlavičkou (viz @media). */
.deal-quick-actions { display: none; }

.timeline-section h2 { font-size: var(--fs-16); margin-bottom: var(--space-3); display: flex; align-items: center; gap: 8px; }
.approval-banner { padding: 8px 14px; border-radius: var(--radius-md); margin-bottom: 14px; background: var(--yellow-100); color: var(--amber-800); }
.approval-banner.approved { background: var(--green-50); color: var(--green-600); }
.discovery-field { margin-bottom: 16px; padding: 12px; background: var(--slate-50); border-radius: var(--radius-md); }
.field-status { font-size: var(--fs-11); padding: 1px 7px; border-radius: var(--radius-pill); margin-left: 8px; }
.field-status.approved { background: var(--green-100); color: var(--green-600); }
.field-status.ai_draft { background: var(--yellow-100); color: var(--amber-800); }
.field-status.pending_review { background: var(--slate-100); color: var(--slate-500); }
.bant-section { margin-top: 20px; padding: 14px; background: var(--slate-50); border-radius: var(--radius-md); }
.bant-section h3 { margin-bottom: var(--space-3); display: flex; align-items: center; gap: 8px; }
.vp-pull-section { margin-top: 20px; padding: 14px; background: var(--sky-50); border-radius: var(--radius-md); }

.timeline { display: flex; flex-direction: column; gap: 8px; }
.activity-row { display: flex; align-items: flex-start; gap: 8px; padding: 10px; background: var(--slate-50); border-radius: var(--radius-md); }
.activity-row.is-auto { background: var(--sky-50); }
.act-icon { font-size: var(--fs-16); min-width: 24px; }
.act-datum { font-size: var(--fs-12); color: var(--color-text-muted); white-space: nowrap; }
.act-smer { font-size: var(--fs-11); background: var(--slate-200); border-radius: var(--radius); padding: 1px 6px; }
.act-obsah { flex: 1; font-size: var(--fs-13); color: var(--gray-700); overflow-wrap: anywhere; word-break: break-word; }
/* Odkazy v obsahu aktivity (autolink i [text](url)) — accent barva (theme-aware, AA
   ve světlém i tmavém), dlouhé URL se zalamují (jinak by je overflow-x:hidden ořízl). */
.act-obsah a, .act-ref { overflow-wrap: anywhere; word-break: break-word; }
.act-obsah a { color: var(--color-primary); text-decoration: underline; }
.act-obsah a:hover { color: var(--color-primary-strong); }
.act-obsah > p { margin: 0 0 0.25rem 0; }
.act-obsah > p:last-child { margin-bottom: 0; }
.act-obsah > ul,
.act-obsah > ol { margin: 0; padding-left: 1.25rem; }
.form-hint { font-size: var(--fs-11); color: var(--color-text-muted); margin-top: 2px; }
.form-hint kbd { font-size: 10px; background: var(--slate-100); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 3px; font-family: inherit; }
.act-ref { font-size: var(--fs-11); color: var(--blue-500); }
.activity-form { margin-top: var(--space-3); display: flex; flex-direction: column; gap: 8px; }
.activity-form select, .activity-form input, .activity-form textarea { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius); }
/* Účastníci aktivity — checkbox-group ve formuláři aktivity (vodorovný wrap,
   aby 5 osob nevyrobilo 260px svislý sloupec nad textareou) + chipy „s kým“
   v řádku timeline. */
.act-ucastnici-fs { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 6px 10px 8px; margin: 0; min-width: 0; }
.act-ucastnici-fs legend { font-size: var(--fs-12); color: var(--color-text-muted); padding: 0 4px; }
.act-ucastnici { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.act-ucastnik-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); cursor: pointer; }
.activity-form .act-ucastnici input[type=checkbox] { min-height: 0; width: 18px; height: 18px; padding: 0; margin: 0; flex: none; }
.act-ucastnici-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }

.metrics-section, .state-counts-section, .source-quality-section, .lost-reasons-section { margin-bottom: 28px; }
.metrics-section h2, .state-counts-section h2, .source-quality-section h2, .lost-reasons-section h2 { font-size: var(--fs-16); margin-bottom: var(--space-3); }
.metric-card { display: inline-block; padding: 16px 24px; background: var(--slate-50); border-radius: var(--radius-lg); border: 1px solid var(--slate-200); }
.metric-label { font-size: var(--fs-12); color: var(--slate-500); text-transform: uppercase; margin-bottom: var(--space-1); }
.metric-value { font-size: 36px; font-weight: 700; color: var(--slate-900); }
.metric-value.empty { color: var(--color-text-muted); }
.metric-sub { font-size: var(--fs-12); color: var(--color-text-muted); margin-top: var(--space-1); }
.metric-empty-note { font-size: var(--fs-12); color: var(--color-text-muted); margin-top: 8px; }
.state-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.state-count-item { padding: 6px 14px; background: var(--sky-100); border-radius: 20px; font-size: var(--fs-13); }
.state-count-item.terminal { background: var(--slate-100); }
.state-name { color: var(--sky-700); }
.state-n { font-weight: 700; color: var(--sky-700); margin-left: 6px; }
.state-n.zero { color: var(--color-text-muted); }
.period-filter { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; }
.period-filter input { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius); }

.triage-item { padding: 12px; background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-md); margin-bottom: 10px; }
.triage-meta { font-size: var(--fs-12); color: var(--color-text-muted); margin-bottom: var(--space-1); }
.triage-content { font-size: var(--fs-13); color: var(--gray-700); margin-bottom: 8px; }
.triage-assign { display: flex; gap: 8px; align-items: center; }
.triage-assign select { padding: 5px 8px; border: 1px solid var(--color-border); border-radius: var(--radius); }
.tracker-disconnected { color: var(--color-text-muted); font-style: italic; }
.transition-warning, .won-prompt, .lost-prompt { border: 2px solid var(--orange-500); }
/* Lost-prompt — stack VŽDY (i na desktopu): .kanban-col je max-width:240px a .btn má
   white-space:nowrap → řada 6–7 tlačítek je v kartě fyzicky nemožná. */
.lost-prompt-form { display: flex; flex-direction: column; gap: 6px; }
.lost-prompt-form .btn { width: 100%; white-space: normal; text-align: left; justify-content: flex-start; }
.lost-prompt__other > summary { list-style: none; cursor: pointer; width: 100%; }
.lost-prompt__other > summary::-webkit-details-marker { display: none; }

/* ── Inline-create dialogs ── */
/* margin:auto obnovuje UA centrování :modal dialogu — globální reset *{margin:0} (výše)
   ho jinak přebíjí a dialog skončí v levém horním rohu. */
dialog { border: none; border-radius: var(--radius-lg); padding: 0; box-shadow: 0 8px 32px rgba(0,0,0,.18); max-width: min(420px, calc(100vw - 24px)); width: 100%; margin: auto; background: var(--white); color: var(--color-text); }
dialog::backdrop { background: rgba(0,0,0,.45); }
.dialog-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 10px; border-bottom: 1px solid var(--slate-200); font-weight: 600; }
.dialog-body { padding: 16px 18px 18px; }
.btn-inline-add { display: inline-flex; align-items: center; justify-content: center; gap: 2px; background: var(--white); border: 1px solid var(--color-border); color: var(--blue-500); font-size: var(--fs-13); cursor: pointer; padding: 7px 12px; font-weight: 600; border-radius: var(--radius-md); white-space: nowrap; }
.btn-inline-add:hover { background: var(--blue-50); border-color: var(--blue-300); }
.btn-inline-add .bia-icon { font-weight: 700; }
.select-row { display: flex; align-items: center; gap: var(--space-1); }

/* ── Typeahead (deal form: firma + osoby) ── */
.typeahead { position: relative; margin-bottom: var(--space-3); }
.typeahead-control { display: flex; align-items: center; gap: var(--space-1); }
/* Stejná výška/vzhled jako form label input (typeahead input NENÍ uvnitř <label>, tak nedědí ř. 54) */
.typeahead-input { flex: 1; padding: 7px 10px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: var(--fs-14); }
.typeahead-results { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 6px 20px rgba(0,0,0,.12); max-height: 260px; overflow-y: auto; }
.typeahead-results:empty { display: none; }
.ta-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--slate-100); padding: 8px 12px; cursor: pointer; font-size: var(--fs-14); }
.ta-item:last-child { border-bottom: none; }
.ta-item:hover, .ta-item:focus { background: var(--blue-50); }
/* Keyboard-active highlight — stronger than hover so the two don't visually fight */
.ta-item--active { background: var(--blue-100); }
.ta-item-main { color: var(--slate-950); }
.ta-item-sub { color: var(--slate-500); font-size: var(--fs-12); }
.ta-empty { padding: 8px 12px; color: var(--color-text-muted); font-size: var(--fs-13); }
/* "+ Vytvořit „q"" empty-state create row */
.ta-create { color: var(--blue-600); font-weight: 500; }
.ta-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ta-chips:empty { display: none; }
.ta-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; background: var(--blue-50); color: var(--blue-900); border: 1px solid var(--blue-200); border-radius: 14px; padding: 2px 6px 2px 10px; font-size: var(--fs-13); }
.ta-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Neinteraktivní varianta chipu (bez ✕) — symetrický padding. Používají chipy
   „s kým“ u aktivity (templates/deals/_participant_chips.html). */
.ta-chip--static { padding: 2px 10px; }
.ta-chip-x { flex: none; background: none; border: none; color: var(--blue-500); cursor: pointer; font-size: var(--fs-12); line-height: 1; padding: 2px 4px; border-radius: var(--radius-pill); }
.ta-chip-x:hover { background: var(--blue-100); color: var(--blue-700); }

/* ── Loading spinner (hx-indicator target = .typeahead-control) ── */
.ta-spinner { display: none; flex: none; width: 14px; height: 14px; border: 2px solid var(--color-border); border-top-color: var(--blue-600); border-radius: 50%; animation: ta-spin .6s linear infinite; }
.typeahead-control.htmx-request .ta-spinner { display: inline-block; }
@keyframes ta-spin { to { transform: rotate(360deg); } }

/* ── Confirmed firma state (blue chip language + "✕ změnit") ── */
.ta-confirmed { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--blue-50); border: 1px solid var(--blue-200); border-radius: var(--radius); padding: 7px 10px; }
.ta-confirmed[hidden] { display: none; }
.ta-confirmed-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--blue-900); font-size: var(--fs-14); font-weight: 500; }
.ta-confirmed-x { flex: none; background: none; border: none; color: var(--blue-600); cursor: pointer; font-size: var(--fs-13); padding: 2px 6px; border-radius: var(--radius); }
.ta-confirmed-x:hover { background: var(--blue-100); color: var(--blue-700); }

/* ── Keyboard focus visibility for typeahead controls ── */
.ta-item:focus-visible, .ta-chip-x:focus-visible, .btn-inline-add:focus-visible, .ta-confirmed-x:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }

/* ── Activity status / planned timeline ── */
.next-activity-banner { padding: 10px 14px; background: var(--blue-50); border: 1px solid var(--blue-200); border-radius: var(--radius-md); margin-bottom: var(--space-3); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.next-activity-banner.overdue { background: var(--red-50); border-color: var(--red-300); }
.timeline-group-header { font-size: var(--fs-11); font-weight: 600; text-transform: uppercase; color: var(--slate-500); margin-bottom: 6px; letter-spacing: 0.05em; }
.timeline-divider { text-align: center; color: var(--color-text-muted); font-size: var(--fs-12); margin: 12px 0; border-top: 1px solid var(--slate-200); padding-top: 8px; }
.activity-row.overdue { background: var(--red-50); border-left: 3px solid var(--red-600); }
.select-row select { flex: 1; }

/* ── Agenda page ── */
.agenda-datum { white-space: nowrap; }
.agenda-obsah { color: var(--slate-500); max-width: 260px; }

/* ── Activity form status hint ── */
.status-hint { font-size: var(--fs-12); font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); margin-left: var(--space-1); }
.hint-done { background: var(--green-50); color: var(--green-600); }
.hint-planned { background: var(--blue-50); color: var(--blue-600); }

/* ── Quick-log buttons ── */
.quicklog-buttons { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; margin-bottom: var(--space-1); }
.quicklog-label { font-size: var(--fs-11); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.btn-quicklog { background: var(--slate-100); color: var(--slate-600); border: 1px solid var(--color-border); border-radius: 14px; padding: 3px 10px; font-size: var(--fs-12); cursor: pointer; }
.btn-quicklog:hover { background: var(--slate-200); color: var(--slate-900); }
.activity-form select[hidden] { display: none; }
.btn-quicklog--active { background: var(--slate-700); color: var(--slate-50); border-color: var(--slate-700); font-weight: 600; }

/* ── Relative time in planned timeline ── */
.act-relative { font-size: var(--fs-11); color: var(--color-text-muted); margin-left: var(--space-1); }
.act-relative.overdue-hint { color: var(--red-600); }

/* ── Email card in timeline ── */
.email-card { background: var(--email-bg); border-left: 3px solid var(--blue-500); border-radius: var(--radius); padding: 10px 12px; margin: 4px 0; width: 100%; box-sizing: border-box; }
.email-header { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 6px; font-size: var(--fs-13); }
.email-from { font-weight: 600; color: var(--email-from); }
.email-subject { color: var(--gray-700); flex: 1; }
.email-body, .email-body-preview { white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; font-size: var(--fs-12); color: var(--gray-700); background: transparent; border: none; padding: 0; margin: 4px 0 0; font-family: inherit; }
.email-toggle { font-size: var(--fs-11); color: var(--blue-500); text-decoration: none; display: inline-block; margin-top: var(--space-1); }
.email-toggle:hover { text-decoration: underline; }

/* ── Pagination ── */
.pagination { display: flex; gap: var(--space-3); align-items: center; margin-top: 16px; font-size: var(--fs-13); color: var(--slate-500); }
.pagination a { color: var(--blue-500); text-decoration: none; }
.pagination a:hover { text-decoration: underline; }

/* ── Inline activity edit ── */
.activity-edit-form-row { flex-wrap: wrap; }
.edit-form-buttons { display: flex; gap: 8px; margin-top: var(--space-1); }

/* Profil kontaktu */
.profil-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--slate-200); }
.profil-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.profil-dl { display: grid; grid-template-columns: 150px 1fr; gap: 5px 12px; font-size: var(--fs-13); }
.profil-dl dt { color: var(--slate-500); font-weight: 500; }
.profil-dl dd { margin: 0; }
.birthday-inputs { display: flex; gap: var(--space-3); }
.profil-chip { display: inline-block; font-size: var(--fs-11); padding: 1px 7px; border-radius: var(--radius-pill);
               background: var(--sky-100); color: var(--sky-700); margin-left: var(--space-1); vertical-align: middle; }
.profil-chip--birthday { background: var(--yellow-100); color: var(--amber-800); }
.form-error { color: var(--red-600); font-size: var(--fs-12); flex-basis: 100%; }

/* ── Login page (standalone, bez sidebaru) ── */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100dvh; background: var(--slate-950);
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.login-card { background: var(--white); border-radius: var(--radius-xl); padding: 32px 28px; max-width: 360px; width: 100%; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.login-logo { font-size: 22px; font-weight: 700; color: var(--slate-900); margin-bottom: 8px; }
.login-hint { color: var(--slate-500); font-size: var(--fs-13); margin-bottom: 20px; }
.btn-github { display: inline-block; width: 100%; padding: 12px 16px; min-height: var(--touch-target); background: var(--slate-900); color: var(--white); text-decoration: none; border-radius: var(--radius-md); font-weight: 600; }
.btn-github:hover { background: var(--slate-700); }

/* ── Skip-link (WCAG 2.4.1) — off-screen, viditelný na focus ── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1003;
  background: var(--slate-900); color: var(--white); padding: 10px 16px; border-radius: 0 0 var(--radius-md) 0;
  text-decoration: none; font-weight: 600;
}
.skip-link:focus {
  left: 0; top: max(0px, env(safe-area-inset-top, 0px));
  outline: 2px solid var(--focus-ring-color); outline-offset: 2px;
}

/* ── Mobile nav toggle / off-canvas (desktop: hidden) ── */
.nav-backdrop { display: none; }
/* "Přesunout do stavu" dropdown — skrytý na desktopu (DnD místo něj) */
.card-move { display: none; }
/* Mobilní rychlá akce „Zavolat" (tel:) na kartě — skrytá na desktopu (viz @media). */
.card-call { display: none; }
/* Taby stavů — jen na mobilu (zobrazí je kanban-mobile.js) */
.kanban-tabs { display: none; }

/* .detail-move — JEDINÝ move control na detailu (žádný DnD), viditelný i na desktopu */
.detail-move { display: inline-block; }
/* Zkratka „→ další stage" v hlavičce — jen desktop (mobil má Posunout v .deal-quick-actions). */
.detail-next-stage { display: inline-block; }
.detail-move select {
  min-height: 36px; font-size: var(--fs-14); padding: 6px 10px;
  border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--white); cursor: pointer;
}
.detail-move select:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 1px; }

@media (max-width: 768px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  body { display: block; }

  /* Focus-Not-Obscured (WCAG 2.4.11): focusovaný/scrollnutý prvek nesmí zalézt
     pod sticky page-header (~56px) + sticky tab-strip (~52px). */
  html { scroll-padding-top: calc(56px + env(safe-area-inset-top, 0px) + 52px); }
  :target, .deal-card, input, select, textarea, a {
    scroll-margin-top: calc(56px + env(safe-area-inset-top, 0px) + 52px);
  }

  /* Desktop topbar pryč; mobilní shell = spodní bar + „Více" sheet */
  .topbar { display: none; }

  /* Obsah nesmí zmizet pod fixním spodním barem (~64px) */
  .main-content { padding: 16px 12px calc(64px + env(safe-area-inset-bottom, 0px)); overflow-x: hidden; }
  .main-content img, .main-content table, .main-content pre { max-width: 100%; }
  html { scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* ── Fixní spodní tab bar (chrome nad obsahem, pod dialogy) ── */
  .bottom-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 997;
    background: var(--white); border-top: 1px solid var(--slate-200);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bottom-bar a, .bottom-bar button {
    position: relative;
    flex: 1; min-height: var(--touch-target); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px; padding: 8px 4px;
    background: none; border: none; cursor: pointer;
    font-size: 10.5px; color: var(--slate-500); text-decoration: none;
  }
  .bottom-bar__icon { font-size: 17px; }
  /* Živý počet na spodním baru (Triage/Agenda) — vlastní polling id (-m), superskript na ikoně */
  .bottom-bar__badge { position: absolute; top: 3px; left: 50%; transform: translateX(3px); min-width: 16px; font-size: 10px; padding: 0 5px; }
  .bottom-bar__badge:empty { display: none; }
  .bottom-bar a[aria-current="page"] { color: var(--blue-500); font-weight: 600; }
  .bottom-bar__cta { color: var(--blue-500); font-weight: 600; }
  .bottom-bar__cta .bottom-bar__icon {
    background: var(--blue-500); color: var(--white); width: 32px; height: 32px;
    border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center;
  }
  .bottom-bar a:focus-visible, .bottom-bar button:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: -2px; }

  /* ── „Více" off-canvas bottom-sheet (reuse nav-open/backdrop vzoru) ── */
  .nav-sheet {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
    max-height: 70dvh; overflow-y: auto;
    background: var(--white); border-top-left-radius: 16px; border-top-right-radius: 16px;
    padding: 12px 12px calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%); transition: transform 0.22s ease;
  }
  body.nav-open .nav-sheet { transform: translateY(0); }
  .nav-sheet__title { font-size: var(--fs-12); font-weight: 700; text-transform: uppercase; color: var(--slate-600); padding: 8px 10px; }
  .nav-sheet ul { list-style: none; }
  .nav-sheet ul li a { display: block; padding: 11px 10px; min-height: var(--touch-target); color: var(--slate-700); text-decoration: none; border-radius: var(--radius); }
  .nav-sheet ul li a[aria-current="page"] { background: var(--slate-100); color: var(--slate-900); font-weight: 600; box-shadow: inset 3px 0 0 var(--blue-500); }

  .nav-backdrop {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.45);
  }
  body.nav-open .nav-backdrop { display: block; }

  /* ── Sticky page-header (bez hamburgeru — h1 + CTA/filtr) ── */
  .page-header {
    position: sticky; top: 0; z-index: 999;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--white);
    padding: calc(env(safe-area-inset-top, 0px) + 6px) 12px 6px 12px;
    min-height: calc(56px + env(safe-area-inset-top, 0px));
    margin: -16px -12px 12px; border-bottom: 1px solid var(--slate-200);
  }
  .page-header h1 { font-size: 18px; flex: 1; }
  .page-header__cta {
    white-space: nowrap; min-height: var(--touch-target); display: inline-flex; align-items: center;
  }
  /* Filtr jako samostatný řádek pod lištou */
  .page-header .filter-form { flex-basis: 100%; }

  /* ── Mobilní single-column kanban + přepínač stavů ── */
  .kanban-board { display: block; min-height: auto; overflow-x: visible; }
  .kanban-tabs {
    display: flex; position: sticky; top: calc(56px + env(safe-area-inset-top, 0px));
    z-index: 998; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    background: var(--white); margin: 0 -12px; padding: 8px 12px; scrollbar-width: none;
  }
  .kanban-tabs::-webkit-scrollbar { display: none; }
  .kanban-tab {
    flex: 0 0 auto; min-height: var(--touch-target); display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 22px; background: var(--slate-100); color: var(--slate-600);
    border: 1px solid var(--color-border); font-size: var(--fs-14); white-space: nowrap; cursor: pointer;
  }
  .kanban-tab[aria-selected="true"] { background: var(--slate-900); color: var(--white); border-color: var(--slate-900); font-weight: 600; }
  .kanban-tab:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
  .kanban-tab .kanban-tab__count { background: var(--slate-600); color: var(--white); border-radius: var(--radius-pill); padding: 0 7px; font-size: var(--fs-12); }
  .kanban-tab[aria-selected="true"] .kanban-tab__count { background: var(--slate-600); }
  .kanban-col { min-width: 0; width: 100%; max-width: 100%; margin-bottom: var(--space-3); }
  .kanban-col[hidden] { display: none; }
  .kanban-col .col-header { display: none; }
  .kanban-col.is-empty .card-list::after {
    content: "Žádné dealy v tomto stavu."; color: var(--slate-500); font-style: italic;
    display: block; padding: 16px 0;
  }

  /* Mobilní „Zavolat" na kartě (tel:) — plná šířka nad move-selectem. */
  .card-call { display: inline-flex; width: 100%; margin-top: 8px; }
  /* "Přesunout do stavu" dropdown viditelný na mobilu — NATIVNÍ select, jen sizing */
  .card-move { display: block; margin-top: 8px; }
  .card-move select, .detail-move select {
    width: 100%; min-height: var(--touch-target); padding: 8px 36px 8px 10px;
    border: 1px solid var(--color-border); border-radius: var(--radius); font-size: var(--fs-16);
    background-color: var(--white);
    /* SVG data-URI: fill barva %2357534a (slate-600 warm) je LITERÁL — var() nefunguje uvnitř data-URI stringu */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2357534a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    -webkit-appearance: none; appearance: none;
  }
  .card-move select:focus-visible, .detail-move select:focus-visible {
    outline: 2px solid var(--focus-ring-color); outline-offset: 1px;
  }
  .detail-move { display: block; }
  .deal-card { cursor: default; }

  /* Single-column formuláře a detail */
  .deal-detail { max-width: 100%; }
  .deal-header, .deal-meta { flex-wrap: wrap; }
  /* Detail P2 → single column */
  .deal-grid { grid-template-columns: 1fr; }
  .deal-header__value { align-items: flex-start; }
  .deal-stepper { flex-wrap: wrap; }
  /* Rychlé akce nahoře (mobil) — kompaktní řádek pod hlavičkou (dřív spodní sticky lišta). */
  .deal-quick-actions { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
  .deal-quick-actions .btn { flex: 1; min-width: max-content; }
  /* Next-stage zkratka je desktop-only — mobil má „Posunout →" v .deal-quick-actions. */
  .detail-next-stage { display: none; }
  .filter-form { flex-direction: column; align-items: stretch; }
  .filter-form input, .filter-form select, .filter-form button { width: 100%; min-height: var(--touch-target); }

  /* ── iOS zoom fix: ≥16px na formulářových controlech (NE na body) ── */
  .filter-form input, .filter-form select,
  form label input, form label select, form label textarea,
  .activity-form select, .activity-form input, .activity-form textarea,
  .triage-assign select, .typeahead-input { font-size: var(--fs-16); }

  form label input, form label select, form label textarea, .typeahead-input { min-height: var(--touch-target); }
  form button[type=submit] { min-height: var(--touch-target); width: 100%; }
  .activity-form select, .activity-form input, .activity-form textarea { min-height: var(--touch-target); }
  /* …ALE checkbox účastníka ne — pravidlo výše by z 5 osob udělalo ~260px svislý
     blok nad textareou. 44px terč nese <label>, samotný box zůstane 20px. */
  .activity-form .act-ucastnici input[type=checkbox] { min-height: 0; width: 20px; height: 20px; }
  .act-ucastnik-check { min-height: var(--touch-target); }

  /* ── Deal-form touch targets ── */
  .ta-item { min-height: var(--touch-target); justify-content: center; }
  .ta-chip-x { min-width: var(--touch-target); min-height: var(--touch-target); }
  .ta-confirmed { min-height: var(--touch-target); }
  .ta-confirmed-x { min-height: var(--touch-target); padding: 2px 12px; }
  .btn-inline-add { min-width: var(--touch-target); min-height: var(--touch-target); padding: 7px 10px; }
  /* Icon-only + na úzkém viewportu, aby nerozdrtil input (aria-label nese název) */
  .btn-inline-add .bia-text { display: none; }
  /* Akce: primární přes celou šířku, Zrušit pod ním */
  .form-actions { flex-direction: column-reverse; align-items: stretch; gap: var(--space-1); }
  .form-actions a { margin-left: 0; text-align: center; min-height: var(--touch-target); display: inline-flex; align-items: center; justify-content: center; }

  /* ── 44px touch targety ── */
  /* Ikonové .btn--icon potřebuje i min-WIDTH (kanonický .btn níže dává jen min-height). */
  .btn--icon { min-width: var(--touch-target); min-height: var(--touch-target); }
  .btn-quicklog { min-height: var(--touch-target); display: inline-flex; align-items: center; }
  .email-toggle, .contact-link, .pagination a, .clamp-toggle { display: inline-flex; align-items: center; min-height: var(--touch-target); }
  .triage-assign select { min-height: var(--touch-target); }
  .data-table a {
    display: inline-flex; align-items: center; min-height: var(--touch-target);
  }
  .contact-list li { flex-wrap: wrap; }

  /* ── Body text čitelnost ── */
  body { line-height: 1.45; }
  .act-obsah, .triage-content, .deal-meta, .deal-contacts { font-size: 15px; }

  /* ── Aktivita: obsah přes celou šířku řádku (meta zůstane nad ním) ──
     .activity-row je plochý flex; wrap + flex-basis:100% na content-level dětech
     položí obsah/přepis/akce pod meta (icon+datum+směr+badge). DOM pořadí (meta →
     obsah → přepis → akce) zůstává = fokus pořadí (žádné CSS `order`). */
  .activity-row { flex-wrap: wrap; }
  .activity-row > .act-obsah,
  .activity-row > .act-obsah-wrap,
  .activity-row > .rec-badge,
  .activity-row > .rec-transcript,
  .activity-row > .rec-transcript-wrap,
  .activity-row > .speaker-map,
  .activity-row > .rec-actions,
  .activity-row > .act-ref { flex-basis: 100%; }

  /* ── Clamp náhled — nižší strop na mobilu (zeď textu je tam horší) ── */
  .clamp-body { max-height: 180px; }

  /* ── Datové tabulky — horizontální scroll uvnitř kontejneru, ne body ── */
  .data-table { display: block; overflow-x: auto; }
  /* Skrytí nízkohodnotných sloupců na mobilu — aplikuj na th+td (tabulka je tu display:block). */
  .dt-hide-sm { display: none; }
  /* Kanonické .btn — mobilní 44px touch target (base komponenta viewport-agnosticky). */
  .btn { min-height: var(--touch-target); }

  /* ── Chybové stavy v úzkém dialogu ── */
  .dialog-body .alert-error, .dialog-body .form-error { width: 100%; }

  /* ── Inline edit aktivit — wrap proti overflow ── */
  .activity-edit-form-row { flex-wrap: wrap; }

  /* ── Transition-warning / won-prompt / lost-prompt partialy (mobile-safe, ne trap) ── */
  .transition-warning-form, .won-prompt-form, .lost-prompt-form { display: flex; flex-direction: column; gap: 8px; }
  .transition-warning-form input, .won-prompt-form input, .lost-prompt-form input {
    width: 100%; min-height: var(--touch-target); font-size: var(--fs-16); padding: 8px 10px;
    border: 1px solid var(--color-border); border-radius: var(--radius);
  }
  .transition-warning-form button, .won-prompt-form button, .lost-prompt-form button {
    width: 100%; min-height: var(--touch-target);
  }
}

/* ── Nahrávky: akce + chybový banner ── */
.timeline-error {
  margin: 0 0 12px; padding: 8px 12px;
  background: var(--red-50); border: 1px solid var(--red-200); border-radius: var(--radius-md);
  color: var(--red-700); font-size: var(--fs-14);
}
.rec-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px;
}

/* ── Generický clamp (zkrácený náhled dlouhého přepisu / poznámky) ── */
.clamp-body { position: relative; max-height: 240px; overflow: hidden; }
.clamp-body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px;
  /* rgba fade LITERÁL — transparentní→slate-50 (#efede8, warm paper); musí = .activity-row bg */
  background: linear-gradient(to bottom, rgba(239,237,232,0), #efede8); pointer-events: none;
}
/* Fade musí sedět s pozadím řádku i u barevných variant (jinak studený šev). */
.activity-row.is-auto .clamp-body::after { background: linear-gradient(to bottom, rgba(238,242,247,0), #eef2f7); }
.activity-row.overdue .clamp-body::after { background: linear-gradient(to bottom, rgba(251,238,233,0), #fbeee9); }
.clamp-cb:checked ~ .clamp-body { max-height: none; }
.clamp-cb:checked ~ .clamp-body::after { display: none; }
.clamp-toggle { display: inline-block; margin-top: 6px; font-size: var(--fs-12); color: var(--blue-500); cursor: pointer; }
.clamp-toggle::after { content: "Zobrazit více ▾"; }
.clamp-cb:checked ~ .clamp-toggle::after { content: "Sbalit ▴"; }
.speaker-map--named > summary { font-size: var(--fs-12); color: var(--slate-500); cursor: pointer; }
.act-obsah-wrap { flex: 1; }
.btn-rec-export, .btn-rec-remove {
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 4px 10px; font-size: var(--fs-13); cursor: pointer; background: var(--white);
}
.btn-rec-export { color: var(--blue-700); border-color: var(--blue-200); }
.btn-rec-remove { color: var(--red-700); border-color: var(--red-200); }
.btn-rec-export:hover { background: var(--blue-50); }
.btn-rec-remove:hover { background: var(--red-50); }

/* ── Aktivita feed (F4) — chipy + denní skupiny; řádky reusují .activity-row (theme-aware) ── */
.feed-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.feed-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 14px; border-radius: 22px; background: var(--slate-100); color: var(--slate-600); border: 1px solid var(--color-border); font-size: var(--fs-13); text-decoration: none; white-space: nowrap; }
.feed-chip:hover { color: var(--slate-900); }
.feed-chip--active { background: var(--slate-900); color: var(--white); border-color: var(--slate-900); font-weight: 600; }
.feed-chip:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.feed-day { margin-bottom: 22px; }
.feed-day__label { font-size: var(--fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-500); margin-bottom: 8px; }
.feed-row__body { flex: 1; min-width: 0; }
.feed-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 2px; }
.feed-ctx { font-size: var(--fs-12); color: var(--sky-700); text-decoration: none; font-weight: 500; overflow-wrap: anywhere; word-break: break-word; }
.feed-ctx:hover { text-decoration: underline; }
.feed-ctx--none { color: var(--color-text-muted); font-weight: 400; }
.feed-email { font-size: var(--fs-13); }
.feed-email .email-subject { color: var(--gray-700); margin-left: 6px; }
.feed-email__preview { white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; font-size: var(--fs-12); color: var(--gray-700); margin-top: 2px; }
.feed-more { margin-top: 8px; }

/* ── Nastavení (F5) — karty + segmented control „Vzhled" ── */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; max-width: 900px; }
.settings-card { display: flex; flex-direction: column; }
.settings-desc { font-size: var(--fs-13); color: var(--color-text-muted); margin: 0 0 12px; }
.settings-status { margin-bottom: 12px; }
.settings-card .detail-kv { margin-bottom: 12px; }
.settings-card .btn { align-self: flex-start; margin-top: auto; }
/* Segmented control — sdílí cookie ds_theme přes window.dsApplyTheme. */
.segmented { display: inline-flex; gap: 3px; padding: 3px; background: var(--slate-100); border-radius: var(--radius-lg); }
.segmented__opt { min-height: var(--touch-target); display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border: none; border-radius: var(--radius-md); background: none; color: var(--slate-600); font-size: var(--fs-13); font-weight: 600; cursor: pointer; }
.segmented__opt:hover { color: var(--slate-900); }
.segmented__opt[aria-checked="true"] { background: var(--slate-900); color: var(--white); }
.segmented__opt:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }

/* ── Networking (Fáze 1) — přehled kadence kontaktů (/networking) ── */
/* Útržek poslední aktivity pod datem („co mu vlastně napíšu" bez prokliku). */
.nw-snippet { font-size: var(--fs-12); color: var(--color-text-muted); margin-top: 2px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sub-řádek pod jménem kontaktu (firma) — dekorace, ne smysluplný text. */
.nw-sub { font-size: var(--fs-12); color: var(--color-text-muted); margin-top: 2px; }
/* Buňka rychlých akcí: dvě <details> mini-formy (Dotyk / Naplánovat), bez JS. */
.nw-actions details { display: inline-block; margin-right: 6px; }
.nw-actions summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.nw-actions summary::-webkit-details-marker { display: none; }
.nw-actions details[open] summary { margin-bottom: 6px; }
.nw-actions form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nw-actions form select,
.nw-actions form input {
  padding: 6px 8px; border: 1px solid var(--color-border); border-radius: var(--radius);
  font-size: var(--fs-13); background: var(--white); color: var(--color-text);
}
/* Cold-start sekce „Nezařazené kontakty" — one-click kategorizace chipy. */
.nw-unassigned { margin-top: 32px; }
.nw-unassigned h2 { font-size: var(--fs-16); margin: 0 0 4px; }
.nw-unassigned__hint { color: var(--color-text-muted); font-size: var(--fs-13); margin: 0 0 10px; }
.nw-unassigned ul { list-style: none; margin: 0; padding: 0; }
.nw-unassigned li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--color-border-soft); }
.nw-unassigned__name { min-width: 0; overflow-wrap: anywhere; }
.nw-unassigned li form { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

/* ── Networking (Fáze 2) — příležitosti (krok 5) + follow-up návrh (krok 6) ── */
/* Návrh dalšího dotyku po zalogování done aktivity — sdílený partial (osoba
   timeline i networking row). Nenápadný, ale viditelný „success" banner. */
.nw-followup {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 16px; padding: 10px 14px;
  background: var(--green-50); border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}
.nw-followup__msg { font-size: var(--fs-13); color: var(--color-text); }
.nw-followup form { margin: 0; margin-left: auto; }
/* Widget „Nadcházející příležitosti (14 dní)" — narozeniny + svátky. */
.nw-occasions { margin: 0 0 24px; padding: 14px 16px; background: var(--color-surface-muted); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); }
.nw-occasions h2 { font-size: var(--fs-16); margin: 0 0 10px; }
.nw-occasions ul { list-style: none; margin: 0; padding: 0; }
.nw-occasion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; border-bottom: 1px solid var(--color-border-hair); }
.nw-occasion:last-child { border-bottom: none; }
.nw-occasion__when { display: inline-flex; align-items: baseline; gap: 6px; min-width: 118px; }
.nw-occasion__date { font-weight: 600; color: var(--color-text); }
.nw-occasion__rel { font-size: var(--fs-12); color: var(--color-text-muted); }
.nw-occasion__what { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
/* Akce „Naplánovat přání" = <details> mini-form, stejná mechanika jako .nw-actions. */
.nw-occasion__action { margin-left: auto; }
.nw-occasion__action summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.nw-occasion__action summary::-webkit-details-marker { display: none; }
.nw-occasion__action details[open] summary,
.nw-occasion__action[open] summary { margin-bottom: 6px; }
.nw-occasion__action form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.nw-occasion__action form select,
.nw-occasion__action form input {
  padding: 6px 8px; border: 1px solid var(--color-border); border-radius: var(--radius);
  font-size: var(--fs-13); background: var(--white); color: var(--color-text);
}

/* Prázdný networking badge (count "" při 0) zmizí — topbar i „Více" sheet.
   Scoped na kontejnery (NE globální .count-pill:empty — col-count apod. nechat být). */
.topbar-tabs .count-pill:empty,
.nav-sheet .count-pill:empty { display: none; }

@media (max-width: 768px) {
  /* Mini-formy akcí pod sebe + 44px/16px inputy (iOS zoom); pravý sloupec bez nowrap. */
  .nw-actions form { flex-direction: column; align-items: stretch; }
  .nw-actions form select,
  .nw-actions form input { width: 100%; min-height: var(--touch-target); font-size: var(--fs-16); }
  .nw-unassigned li form { margin-left: 0; width: 100%; }
  /* Fáze 2: follow-up i příležitosti pod sebe + 44px/16px inputy (iOS zoom). */
  .nw-followup form { margin-left: 0; width: 100%; }
  .nw-occasion__action { margin-left: 0; width: 100%; }
  .nw-occasion__action form { flex-direction: column; align-items: stretch; }
  .nw-occasion__action form select,
  .nw-occasion__action form input { width: 100%; min-height: var(--touch-target); font-size: var(--fs-16); }
}

/* ── Pohyb (WCAG 2.3.3 / 2.4.11 reduced-motion) ── */
@media (prefers-reduced-motion: reduce) {
  .nav-sheet { transition: none; }
  html { scroll-behavior: auto; }
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE (F1b) — override raw palette tokenů IN PLACE.
   Custom properties se resolvují lazy podle kaskády na elementu, takže i sémantická
   vrstva (--color-*, definovaná v :root přes var(--slate-*)) i všechna komponentní
   pravidla zdědí tmavé hodnoty bez migrace. Musí být AFTER :root (equal specificity
   [data-theme=dark] vs :root → rozhoduje pořadí). `--white` slouží jako povrch karty
   I jako text-na-akcentu → v dark obojí tmavý tón, inverze badge/tlačítek vychází sama.
   Explicitní overrides níže jen tam, kde barva NENÍ tokenem (SVG data-URI, clamp fady).
   Hodnoty z docs/design/dealstudio-final.dc.html [data-theme=dark] + AA korekce z ticketu.
   ════════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  color-scheme: dark;

  /* Povrchy */
  --white: #26221c;                    /* karty, inputy, popovery (design --card) */
  --color-canvas: #191713;             /* stránka / main-content (design --bg) */
  --slate-50: #2e2921;                 /* inset povrchy (activity-row, discovery, metric-card, table hover) */
  --slate-100: #201c16;                /* kanban sloupec, quicklog bg, hover (recessed pod kartou) */
  --slate-200: #3a342c;                /* border-soft, secondary btn bg, dividery, terminal sloupec */
  --slate-300: #4a443a;                /* --color-border (viditelný na tmavém), tag-slate border */

  /* Text + dekorace */
  --slate-400: rgba(240,237,229,.35);  /* DEKORACE/ikony (design --faint; ne na text) */
  --slate-500: #a8a498;                /* muted TEXT — ~7:1 na canvas i kartě */
  --slate-600: #c2bdb0;                /* tmavší muted: col-header, table th, secondary text */
  --slate-700: #d8d3c7;                /* menu linky, btn text v kontextech se světlým pozadím */
  --slate-900: #f0ede5;                /* ink: nadpisy, silný text (design --ink) */
  --slate-950: #f0ede5;                /* ta-item-main text (login je standalone bez data-theme) */
  --slate-body: #f0ede5;               /* body text = ink */
  --slate-id: #a8a498;                 /* deal-id muted */

  /* Akcent (indigo) */
  --blue-50: rgba(122,151,232,.14);    /* ghost hover, banner, chip bg, voice badge bg */
  --blue-100: rgba(122,151,232,.24);   /* chip active, tag-blue bg */
  --blue-200: rgba(122,151,232,.40);   /* chip border, confirmed border */
  --blue-300: rgba(122,151,232,.55);   /* ghost hover border (design --hover-border) */
  --blue-500: #7a97e8;                 /* primary, linky, akcent (design dark --accent) */
  --blue-600: #aebef0;                 /* primary-strong / hover (design --accent-ink) */
  --blue-700: #aebef0;                 /* tag-blue text, rec-export (světlý na tmavém tintu) */
  --blue-900: #c9d4f6;                 /* chip label text */

  /* „Stroj" tón (sky) + e-mail */
  --sky-50: rgba(143,179,208,.12);     /* vp-pull bg, is-auto row */
  --sky-100: rgba(143,179,208,.20);    /* info badge bg, state-count bg, profil-chip bg */
  --sky-700: #8fb3d0;                  /* info text, state-name (design dark --frozen) */
  --email-bg: #21252e;                 /* email card bg (studený tmavý tint) */
  --email-from: #a9c3dc;               /* email „from" name */

  /* Danger / lost */
  --red-50: rgba(201,106,82,.14);
  --red-100: rgba(201,106,82,.24);
  --red-200: rgba(201,106,82,.40);
  --red-300: rgba(201,106,82,.50);
  --red-500: #c96a52;                  /* triage-badge/attention bg (design dark --lost) */
  --red-600: #e2a695;                  /* danger/lost TEXT — AA na tmavém (ticket) */
  --red-700: #e8b4a4;                  /* tag-red/timeline-error text */

  /* Won / success */
  --green-50: rgba(110,190,140,.12);
  --green-100: rgba(110,190,140,.20);
  --green-300: rgba(110,190,140,.45);
  --green-600: #6ebe8c;                /* won/success TEXT (design dark --won) */

  /* Warn / attention (amber) */
  --orange-50: rgba(224,158,80,.14);
  --orange-500: #e09e50;               /* no-next accent, transition-warning border (design dark --warn) */
  --orange-700: #e09e50;               /* .badge--attention bg — tmavý text (color:var(--white)) je salientní na tmavém */
  --yellow-100: rgba(224,158,80,.16);  /* warn badge / approval / ai_draft / birthday bg */
  --yellow-800: #e6ad63;               /* warn badge text (světlý amber na tintu) */
  --amber-800: #e6ad63;                /* approval/ai_draft/birthday text */

  --gray-700: #d8d3c7;                 /* body text v aktivitách/e-mailu */

  /* Sémantické literály (v :root pevné hexy — nutno přepsat) */
  --color-warn-text: #e09e50;          /* warm amber warn text (dark) */
  --focus-ring-color: #7a97e8;         /* dark focus ring (~6.3:1) */
}

/* SVG data-URI chevron (var() uvnitř nefunguje) — světlý stroke pro tmavé selecty. */
[data-theme="dark"] .form-card select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23a8a498' stroke-width='1.4' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
}

/* Clamp fade — musí = pozadí .activity-row per varianta (jinak světlý šev na tmavém). */
[data-theme="dark"] .clamp-body::after { background: linear-gradient(to bottom, rgba(46,41,33,0), #2e2921); }
/* is-auto řádek má translucentní --sky-50 bg → fade cílí na jeho composited tón nad tmavým povrchem (ne solid --email-bg, jinak studený šev). */
[data-theme="dark"] .activity-row.is-auto .clamp-body::after { background: linear-gradient(to bottom, rgba(40,43,49,0), #282b31); }
[data-theme="dark"] .activity-row.overdue .clamp-body::after { background: linear-gradient(to bottom, rgba(51,35,31,0), #33231f); }

/* Dark chevron pro mobilní move-selecty (data-URI je definován uvnitř @media 768px). */
@media (max-width: 768px) {
  [data-theme="dark"] .card-move select, [data-theme="dark"] .detail-move select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a8a498' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  }
}