/* ── Layout ── */
/* Obsah smí využít monitor (5.10.3). 1200 px nechávalo na 2K a širších
   displejích polovinu plochy ležet ladem; strop zůstává, aby řádky
   textu nebyly nekonečné. */
.page-wrap { max-width: min(1600px, 100%); margin: 0 auto; padding: 20px 16px; }

/* ── Hustota seznamu (5.10.3) ──────────────────────────────────────
   Kompaktní režim zmenší odsazení řádků; na obrazovku se vejde skoro
   dvakrát tolik zakázek. Volbu si appka pamatuje (localStorage). */
body.hustota-kompakt .zakazka-row {
  padding:5px 12px 5px 14px; margin-bottom:4px; column-gap:10px;
  border-radius:var(--r-sm); box-shadow:none;
}
/* Prostřední blok se srovná do JEDNÉ řádky (místo/adresa/zákazník/ČEZ)
   — tím padne celý jeden řádek textu, což je na výšce znát nejvíc.
   Sloupce zůstávají pevné, takže zarovnání platí i v kompaktu. */
/* Sloupec ČEZ musí uvézt CELÉ číslo stavby („IV-12-8021845" = 110 px
   i s pilulkou); při 96 px se ořezávalo na „IV-12-802…" a údaj, kvůli
   kterému pilulka existuje, nebyl k přečtení. Místo se bere adrese —
   ta se zkrátí třemi tečkami a celá je vidět v bublině. */
body.hustota-kompakt .zak-stred {
  grid-template-columns:118px minmax(0,1fr) 132px 124px; row-gap:0; column-gap:10px;
}
body.hustota-kompakt .zak-misto  { font-size:var(--fs-vedlejsi); }
body.hustota-kompakt .zak-adresa,
body.hustota-kompakt .zak-zakaznik { font-size:var(--fs-vedlejsi); }
body.hustota-kompakt .zak-cislo  { font-size:var(--fs-vedlejsi); }
body.hustota-kompakt .badge      { padding:1px 7px; font-size:var(--fs-drobne); }
body.hustota-kompakt .zak-typ    { padding:1px 7px; }
body.hustota-kompakt .zak-typy   { gap:4px; }
body.hustota-kompakt .table-card tbody td { padding:6px 12px; }
body.hustota-kompakt .settings-table td { padding:6px 10px; }
.subnav {
  background: var(--bg-card); border-bottom: 1px solid var(--border-color);
  padding: 8px 20px; display: flex; align-items: center; gap: 8px;
  font-size:var(--fs-vedlejsi); color: var(--text-muted);
}
.subnav .back-btn { color: var(--pg-blue); text-decoration: none; font-weight: 500; }
.subnav .bc { color: var(--text-muted); }
.subnav .bcsep { color: var(--text-muted); }
.subnav .bccur { color: var(--text-primary); font-weight: 500; }

/* ── Stránkové záhlaví ── */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 16px 20px 0;
}
.page-title { font-size:var(--fs-sekce); font-weight: 700; font-family: var(--font-heading); }
.page-sub { font-size:var(--fs-vedlejsi); color: var(--text-muted); margin-top: 2px; }

/* ══ JEDNOTNÁ HLAVIČKA STRÁNKY (5.36.0) ════════════════════════════
   Kánon je hlavička CRM: bílý pruh přes celou šířku obsahu se spodní
   linkou, vlevo drobečky → název → podtitul, vpravo hledání a tlačítka.
   Strukturu skládá makro `frontend/templates/_hlavicka.html` — tady je
   JEN vzhled, ať se stránky nemůžou rozejít.

   Výška je ZÁMĚRNĚ pevná (min-height, ne obsah): 72 px na jeden řádek
   textu, 92 px na dva (drobečky NEBO podtitul). Bez toho každá stránka
   „skáče" jinak vysoko a lišta pod topbarem nikdy nesedí — přesně to
   dělalo z appky pět různých aplikací. Hlídá to test
   `frontend/test/test_hlavicky.py`.

   Barvy jen tokeny: pruh --bg-card, text --text-primary, podtitul
   --text-secondary. Žádná pevná barva pod překlápěcím tokenem. */
.pg-hlavicka {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 18px 24px; min-height: 72px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--stin-2);
  position: relative; z-index: 1;
}
.pg-hlavicka--dvouradkova { min-height: 92px; }
/* Text se zúží, akce si drží svou velikost — jinak by celý blok
   tlačítek spadl na druhý řádek a hlavička by povyrostla. */
.pg-hl-text { flex: 1 1 0; min-width: 220px; }
.pg-hl-cesta { font-size:var(--fs-vedlejsi); color: var(--text-muted); margin-bottom: 2px; }
.pg-hl-cesta a { color: var(--text-muted); text-decoration: none; }
.pg-hl-cesta a:hover { color: var(--text-primary); text-decoration: underline; }
.pg-hl-cesta b { color: var(--text-primary); font-weight: 700; }
.pg-hl-sep { margin: 0 6px; color: var(--text-muted); }
/* `.crm h1` (níž v souboru) je specifičtější než holá třída a přebilo by
   písmo — název v CRM by pak měl JINÝ computed font-family než na
   ostatních stránkách. Proto je CRM v selektoru výslovně. */
.pg-hl-nazev, .crm .pg-hl-nazev {
  font-family: var(--font-heading); font-size:var(--fs-sekce);
  font-weight: 800; letter-spacing: .2px; line-height: var(--lh-tesne);
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Podtitul drží JEDEN řádek — jinak by dlouhá věta rozbila pevnou
   výšku 92 px a hlavička by na každé stránce seděla jinde. Celý text
   nese `title`, takže se nic neztrácí; na telefonu se zalomit smí
   (tam min-height stejně neplatí). */
.pg-hl-podtitul {
  font-size:var(--fs-vedlejsi); color: var(--text-secondary);
  margin-top: 3px; max-width: 78ch;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-hl-akce { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  flex: 0 1 auto; margin-left: auto; }
/* Pole hledání v hlavičce — jediný recept pro celou appku */
.pg-hl-hledani {
  background: var(--bg-input); border: 1px solid var(--border-input);
  border-radius:var(--r-sm); padding: 8px 13px; font-size:var(--fs-vedlejsi);
  width: 300px; max-width: 100%; color: var(--text-primary);
  font-family: var(--font-body);
}
.pg-hl-hledani::placeholder { color: var(--text-muted); }

/* Menší varianta = hlavička SEKCE uvnitř dvousloupcové stránky
   (Nastavení, Nastavení pošty). Stejná písma i tlačítka, jen H2,
   menší pruh a karta v rámci pravého sloupce. */
.pg-hlavicka--sekce {
  min-height: 0; padding: 14px 18px; margin-bottom: 16px;
  border: 1px solid var(--border-color); border-radius:var(--r-md);
  box-shadow: var(--stin-1);
}
.pg-hlavicka--sekce .pg-hl-nazev { font-size:var(--fs-karta); }

/* Řádek filtrů/přepínačů POD hlavičkou (do hlavičky nepatří, kánon).
   Lícuje s ní bočním odsazením, ať sloupec drží svislici. */
.pg-filtry {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 24px 0;
}
/* Jednotný chip filtru. Vzor přebírá z docházky (5.21.0) — pilulka
   s obrysem a stínem, aktivní plná modrá. `.tab-btn` je alias pro
   Podatelnu a Hlídač VŘ, kde JS třídu vyhledává jménem a přejmenovat
   ji nejde bez zásahu do skriptů. */
.pg-chip, .pg-filtry .tab-btn {
  padding: 7px 16px; border-radius:var(--r-pilulka);
  font-family: inherit; font-size:var(--fs-vedlejsi); font-weight: 700;
  line-height: var(--lh-ui);
  background: var(--bg-card); color: var(--text-secondary);
  border: 1px solid var(--border-color); box-shadow: var(--stin-1);
  cursor: pointer;
}
.pg-filtry select {
  padding: 6px 11px; border-radius:var(--r-pilulka); border: 1px solid var(--border-input);
  background: var(--bg-input); color: var(--text-primary);
  font-family: inherit; font-size:var(--fs-vedlejsi); cursor: pointer;
}
.pg-chip:hover, .pg-filtry .tab-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
/* --pg-blue se mezi motivy NEpřeklápí, takže bílý text pod ním je
   bezpečný v obou (6,6:1). Kdyby se překlápět začal, musí se překlopit
   i text — zrádný vzor „pevná barva pod překlápěcím tokenem". */
.pg-chip.active, .pg-chip.aktivni, .pg-filtry .tab-btn.active {
  background: var(--pg-blue); color: #fff; border-color: var(--pg-blue);
}

@media (max-width: 480px) {
  /* Telefonní vrstva: text přes celou šířku, akce a hledání pod ním. */
  .pg-hlavicka, .pg-hlavicka--dvouradkova { padding: 12px 14px; min-height: 0; gap: 10px; }
  .pg-hl-text { flex: 1 1 100%; }
  .pg-hl-akce { margin-left: 0; width: 100%; }
  .pg-hl-hledani { flex: 1 1 100%; width: 100%; font-size:var(--fs-pole); }
  .pg-filtry { padding: 10px 14px 0; }
  .pg-hlavicka--sekce { padding: 12px 14px; }
  .pg-hl-nazev, .pg-hl-podtitul { white-space: normal; overflow: visible; }
}

/* ── Tlačítka ── */
/* ── Tlačítka: JEDEN základ pro celou appku (5.11.3) ───────────────
   Do teď měl každý druh vlastní rozměry a nebezpečné tlačítko
   nastavovalo jen barvu — v potvrzovacím dialogu tak stálo zaoblené
   Zrusit vedle hranateho Smazat. Tvar, velikost i chování jsou nově
   společné, jednotlivé třídy říkají UŽ JEN BARVU.
   `.crm .btn` je v seznamu schválně: má vyšší specificitu, takže by si
   jinak drželo vlastní rozměry. */
.btn-primary, .btn-secondary, .btn-nebezpecne, .crm .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 16px; border-radius: var(--r-sm);
  font-family: inherit; font-size: var(--fs-vedlejsi); font-weight: 600;
  line-height: var(--lh-ui); cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, filter .15s, transform .06s;
}
/* Stisk je vidět u všech, ne jen v CRM. */
.btn-primary:active, .btn-secondary:active,
.btn-nebezpecne:active, .crm .btn:active { transform: translateY(1px); }
.btn-primary:disabled, .btn-secondary:disabled,
.btn-nebezpecne:disabled, .crm .btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--pg-dark); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--pg-blue); }
.btn-secondary {
  background: var(--bg-card); color: var(--text-secondary);
  border-color: var(--border-color);
}
.btn-secondary:hover:not(:disabled) { background: var(--bg-hover); }
.icon-btn {
  background: transparent; border: 1px solid var(--border-color);
  border-radius:var(--r-sm); padding: 4px 8px; cursor: pointer;
  font-size:var(--fs-vedlejsi); color: var(--text-muted); transition: background .15s;
}
.icon-btn:hover { background: var(--bg-hover); }
.icon-btn.danger:hover { background: var(--pg-red-light); color: var(--pg-red); border-color: var(--pg-red-border); }

/* ── Karty / sekce ── */
.form-section {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-left: 3px solid var(--pg-blue);
  border-radius:var(--r-md); padding: 16px; margin-bottom: 12px;
}
.section-title {
  display: flex; align-items: center; gap: 7px;
  font-size:var(--fs-popisek); font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted); margin-bottom: 12px;
}
.section-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pg-green); flex-shrink: 0;
}

/* ── Barevné akcenty karet (brand barvy) ── */
.card-accent        { border-top: 3px solid var(--pg-blue); }
.card-accent-blue   { border-top: 3px solid var(--pg-blue); }
.card-accent-green  { border-top: 3px solid var(--pg-green); }
.card-accent-orange { border-top: 3px solid var(--pg-orange); }
.card-accent-dark   { border-top: 3px solid var(--pg-dark); }
.form-section.accent-green { border-left-color: var(--pg-green); }
.form-section.accent-orange { border-left-color: var(--pg-orange); }
.form-section.accent-dark { border-left-color: var(--pg-dark); }

/* ── Info grid ── */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.info-item {}
.info-label { font-size:var(--fs-vedlejsi); color: var(--text-secondary); text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 3px; font-weight: 600; }
.info-value { font-size:var(--fs-telo); font-weight: 700; color: var(--text-primary); }

/* ── Formulářová pole ── */
.field { margin-bottom: 12px; }
.field label { display: block; font-size:var(--fs-popisek); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
  margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 13px;
  border: 2px solid var(--border-input); border-radius:var(--r-sm);
  background: #fff; color: var(--text-primary); font-size:var(--fs-telo);
  transition: border-color .15s;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.06);
}
/* Obrys přes TOKEN, ne natvrdo (5.33.1): #555550 mělo proti poli
   2,33:1 a hlavně obcházelo --border-input, takže oprava tokenu by
   se na těchhle polích vůbec neprojevila. */
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea {
  background: #1a1a18; border-color: var(--border-input);
}
/* Obrys při fokusu jde na --prstenec (5.33.1). Ve světlém motivu je
   to TÁŽ modrá jako dřív; v tmavém je --pg-blue proti poli jen
   2,47:1 — tedy MÉNĚ než klidový obrys (3,45:1) po zesílení
   --border-input, takže kliknutí do pole vypadalo jako ztráta
   obrysu. --prstenec má v Grafitu 7,89:1 a je to týž jantar, jaký
   appka kreslí kolem prvku při ovládání klávesnicí. */
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--prstenec);
  box-shadow: 0 0 0 3px rgba(47,92,168,.15);
}
.field .hint { font-size:var(--fs-vedlejsi); color: var(--text-muted); margin-top: 4px; }
.req { color: var(--pg-orange); }
.opt { color: var(--text-muted); font-weight: 400; text-transform: none; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* ── Folder box ── */
.folder-box {
  font-family: monospace; font-size:var(--fs-vedlejsi); background: var(--bg-secondary);
  border: 1px solid var(--border-color); border-radius:var(--r-sm);
  padding: 8px 12px; color: var(--text-secondary); word-break: break-all;
}

/* ── Čipy ── */
.sub-chip {
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  color: var(--text-secondary);
}
.sub-chip-orange { background: #fdf2e8; border-color: #f0c090; color: #a05a10; }
.sub-chip-blue   { background: var(--pg-blue-light); border-color: #b0c8f0; color: var(--pg-blue-text); }
.sub-chip-green  { background: var(--pg-green-light); border-color: #b0d888; color: var(--pg-green-dark); }
.sub-chip-dark   { background: #eceef4; border-color: #b0b8d0; color: var(--pg-dark); }
.sub-chip-red    { background: var(--pg-red-light); border-color: #f09090; color: var(--pg-red); }
.ext-tag {
  background: #FAEEDA; color: #854F0B;
}

/* ── Tabulky ── */
.table-card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-top: 3px solid var(--pg-dark);
  border-radius:var(--r-md); overflow: hidden;
}
.table-card table { width: 100%; border-collapse: collapse; font-size:var(--fs-vedlejsi); }
.table-card thead th {
  padding: 10px 14px; background: var(--bg-secondary);
  font-size:var(--fs-vedlejsi); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted);
  border-bottom: 1px solid var(--border-color); text-align: left;
}
.table-card tbody td {
  padding: 10px 14px; border-bottom: 1px solid var(--bg-secondary);
  vertical-align: middle;
}
.table-card tbody tr:last-child td { border-bottom: none; }
.table-card tbody tr:hover { background: var(--bg-hover); }

/* ── Detail layout ── */
/* minmax(0,1fr), ne holé 1fr: grid položka má min-width:auto, takže se
   levá kolona roztáhla podle nejširšího obsahu (časová osa / tabulky)
   a celý detail přetékal do strany — dřív se sideways rolovalo celé okno,
   v app-shellu by se místo toho objevil vodorovný posuvník obsahu.
   S minmax(0,…) se kolona smí zúžit a přetéká až konkrétní tabulka. */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px;
  padding: 0 20px 20px; }
.detail-main {}
.detail-side {}

/* ── Posun stavu ── */
.posun-btn {
  width: 100%; padding: 10px; background: var(--pg-dark); color: #fff;
  border: none; border-radius:var(--r-sm); cursor: pointer; font-size:var(--fs-vedlejsi);
  font-weight: 600; margin-bottom: 8px; transition: background .15s;
}
.posun-btn:hover:not(:disabled) { background: var(--pg-blue); }
.posun-btn:disabled { opacity: .4; cursor: not-allowed; }
.storno-btn {
  width: 100%; padding: 8px; background: transparent;
  border: 1px solid var(--pg-red); color: var(--pg-red); border-radius:var(--r-sm);
  cursor: pointer; font-size:var(--fs-vedlejsi); transition: background .15s;
}
.storno-btn:hover { background: var(--pg-red-light); }

/* ── Timeline ── */
.timeline { }
.tl-item {
  display: flex; gap: 10px; margin-bottom: 8px; position: relative;
}
.tl-dot {
  width: 9px; height: 9px; border-radius: 50%; margin-top: 4px;
  flex-shrink: 0;
}
.tl-dot.done    { background: var(--pg-green); }
.tl-dot.current { background: var(--pg-blue); box-shadow: 0 0 0 3px var(--pg-blue-light); }
.tl-dot.future  { background: var(--pg-gray); }
.tl-stav { font-size:var(--fs-vedlejsi); font-weight: 500; }
.tl-stav.current { color: var(--pg-blue); }
.tl-stav.future  { color: var(--text-muted); }
.tl-meta { font-size:var(--fs-drobne); color: var(--text-muted); margin-top: 1px; }

/* ── Zákazník inline-form ── */
.inline-form {
  display: none; background: var(--bg-secondary);
  border: 1px solid var(--border-color); border-radius:var(--r-sm);
  padding: 14px; margin-bottom: 12px;
}
.inline-form.open { display: block; }
.inline-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inline-form-grid .full { grid-column: 1 / -1; }

/* ── Nastavení layout ── */
/* min-height 100 % = výška rolovacího kontejneru (dřív 100vh − topbar;
   v app-shellu už okno není měřítko a stránka by přerostla o patičku). */
.settings-layout { display: grid; grid-template-columns: 200px 1fr; min-height: 100%; }
.settings-nav { background: var(--bg-card); border-right: 1px solid var(--border-color); padding: 16px 0; }
.settings-nav-item {
  padding: 10px 18px; cursor: pointer; font-size:var(--fs-vedlejsi);
  color: var(--text-secondary); display: flex; align-items: center; gap: 8px;
  transition: background .15s;
}
.settings-nav-item:hover { background: var(--bg-hover); }
/* Pozadí i text se překlápějí SPOLEČNĚ (5.33.1). Pevná --pg-blue na
   překlápěcím --pg-blue-light měla v Grafitu 2,58:1 — a tohle je
   navigace, kterou má appka na dvou místech (Nastavení i dialog
   Nastavení docházky). */
.settings-nav-item.active { background: var(--pg-blue-light); color: var(--pg-blue-text); font-weight: 500; }
.settings-content { padding: 20px 24px; }
.settings-section { display: none; }
.settings-section.active { display: block; }

/* `.filters-bar`, `.fchip` a `.search-input` (vlastní lišta filtrů
   seznamu zakázek) zanikly v 5.36.0 — hledání i tlačítka jsou
   v jednotné hlavičce, rozbalováky filtrů v `.pg-filtry` nad. */

/* ── Řádky zakázek ── */
.zakazky-table-wrap { padding: 16px 24px 20px; }
.zakazka-row {
  position: relative;
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);  /* fallback pro starší prohlížeče */
  background-color: color-mix(in srgb, var(--stav-c, var(--bg-card)) 8%, var(--bg-card));
  /* zelený „přejezd" navrch tónování — v klidu 0 % šířky (neviditelný),
     při hoveru se rozjede zleva doprava (viz :hover) */
  background-image: linear-gradient(90deg, rgba(146,195,93,.28), rgba(146,195,93,.03));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  border-radius:var(--r-md); padding: 11px 16px 11px 20px; margin-bottom: 8px;
  /* MŘÍŽKA (5.35.0): sloupce mají pevnou šířku, takže svislice sedí přes
     VŠECHNY řádky — kvůli tomu se řádek přeskládal. Roztahuje se jen
     prostřední blok (místo/adresa nad zákazníkem/ČEZ). */
  display: grid;
  grid-template-columns: 84px minmax(0,1fr) 150px 118px 92px;
  align-items: center; column-gap: 14px; cursor: pointer;
  box-shadow:var(--stin-1);
  transition: background-size .28s ease, box-shadow .15s, border-color .15s, transform .15s;
}
/* Režim výběru přidá vlevo sloupec se zaškrtávátkem. Mřížka se posune
   celá, takže sloupce zůstanou zarovnané i tady. */
.zakazka-row.s-vyberem { grid-template-columns: 22px 84px minmax(0,1fr) 150px 118px 92px; }
.zakazka-row:hover {
  background-size: 100% 100%;   /* rozjetí zeleného přejezdu */
  box-shadow:var(--stin-3); transform: translateY(-1px);
}
/* Barevný proužek podle stavu — seznam se dá „číst po barvě" (odvozeno z badge uvnitř řádku) */
.zakazka-row::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 4px;
  border-radius: 0 3px 3px 0; background: var(--stav-c, transparent);
}
/* „Přijato" = záměrně BEZ zabarvení (bílá karta). --stav-c zůstane nenastavené
   → pozadí = var(--bg-card), levý proužek = transparent. Ostatní stavy níže.
   (Proměnná --b-prijata-c existuje, ale používá ji jen tečka v časové ose
   detailu — řádek Přijato zůstává bílý.)

   Barvy proužků nejsou psané natvrdo: berou se z proměnných --b-…-c
   v theme.css, které má tmavý motiv vlastní (sytý tón by na tmavé kartě
   splynul). Proužek navíc podbarvuje celou kartu — color-mix výše. */
.zakazka-row:has(.b-plan)      { --stav-c: var(--b-plan-c); }
.zakazka-row:has(.b-vytyc)     { --stav-c: var(--b-vytyc-c); }
.zakazka-row:has(.b-zamer),
.zakazka-row:has(.b-mereni)    { --stav-c: var(--b-zamer-c); }   /* .b-mereni = legacy alias */
.zakazka-row:has(.b-zprac)     { --stav-c: var(--b-zprac-c); }
.zakazka-row:has(.b-zsp-zprac) { --stav-c: var(--b-zsp-zprac-c); }
.zakazka-row:has(.b-gp-zprac),
.zakazka-row:has(.b-gp)        { --stav-c: var(--b-gp-zprac-c); } /* .b-gp = legacy alias */
.zakazka-row:has(.b-gad-zprac) { --stav-c: var(--b-gad-zprac-c); }
.zakazka-row:has(.b-odvz)      { --stav-c: var(--b-odvz-c); }
.zakazka-row:has(.b-zsp-odvz)  { --stav-c: var(--b-zsp-odvz-c); }
.zakazka-row:has(.b-gp-odvz)   { --stav-c: var(--b-gp-odvz-c); }
.zakazka-row:has(.b-gad-odvz)  { --stav-c: var(--b-gad-odvz-c); }
.zakazka-row:has(.b-done)      { --stav-c: var(--b-done-c); }     /* Neon Lime dle přání uživatele */
.zakazka-row:has(.b-arch)      { --stav-c: var(--b-arch-c); }
.zakazka-row:has(.b-stor)      { --stav-c: var(--b-stor-c); }
/* Čísla v písmu appky + tabular-nums (5.14.12): monospace dosadil
   na Windows Courier New — strojové písmo cizí zbytku appky. */
.zak-cislo { font-variant-numeric:tabular-nums; font-weight: 700; font-size:var(--fs-telo);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zak-chk { display: flex; align-items: center; }

/* Prostřední blok = vnitřní mřížka 2×2 (5.35.0)
     místo    | adresa, parcela
     zákazník | číslo stavby ČEZ
   Levý sloupec je pevný, pravý dobírá zbytek. `min-width:0` na buňkách
   je povinné — bez něj grid text nezkrátí a řádek přeteče do strany. */
.zak-stred {
  display: grid; grid-template-columns: 170px minmax(0,1fr);
  column-gap: 14px; row-gap: 2px; min-width: 0;
  /* NE baseline: prázdná buňka (zakázka bez adresy) nemá účaří, řádek by
     pak byl o pixel nižší než ostatní a mřížka by „dýchala". */
  align-items: center;
}
.zak-stred > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* Pevná výška řádku uvnitř bloku: pilulka ČEZ je o 4 px vyšší než holý
     text a bez tohohle by řádky se stavbou ČEZ byly vyšší než ostatní. */
  line-height: 17px; }
/* Místo = hlavní údaj řádku (dřív modrá pilulka; ta z něj dělala štítek,
   ačkoli je to to první, co uživatel čte). */
.zak-misto    { font-size:var(--fs-telo); font-weight: 600; color: var(--text-primary); }
.zak-adresa   { font-size:var(--fs-vedlejsi); color: var(--text-secondary); }
.zak-zakaznik { font-size:var(--fs-vedlejsi); color: var(--text-secondary); }
/* Číslo stavby ČEZ — klíčový hledaný údaj, pilulka mu zůstává.
   Barvy jsou schválně PEVNÉ obě (pozadí i text): překlápěcí token pod
   pevnou barvou by v tmavém motivu text pohltil. */
.zak-cez { font-size:var(--fs-vedlejsi); }
.zak-cez-pill {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  vertical-align: bottom;
  color: #1a6b3a; background: #d4edda; border: 1px solid #a8d5b5;
  font-weight: 600; font-variant-numeric: tabular-nums;
  line-height: 15px; padding: 0 8px; border-radius:var(--r-xs);
}
/* Typy: jedno tlumené provedení pro všechny (dřív měl každý typ vlastní
   barvu a rámeček — vpravo pak soupeřily dvě barevné soustavy).
   Barevný smí být jen stav. */
.zak-typy { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; }
.zak-typ {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: var(--r-pilulka); font-size:var(--fs-popisek); font-weight: 600;
  line-height: var(--lh-ui); white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  color: var(--text-secondary);
}
.zak-typ-vic { flex: 0 0 auto; background: transparent; border-color: transparent;
  /* --text-muted tu NEPROŠEL: na řádku podbarveném Neon Lime měl v tmavém
     motivu 4,24:1. Tlumeně působí i bez pozadí a rámečku. */
  color: var(--text-secondary); padding: 2px 2px; }
.zak-stav { min-width: 0; display: flex; align-items: center; }
.zak-cena { font-size:var(--fs-vedlejsi); font-weight: 600; text-align: right; min-width: 0; color: var(--text-primary); }

/* ── ZSP součásti ── */
.zsp-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size:var(--fs-vedlejsi); font-weight: 400; color: var(--text-secondary);
  cursor: pointer; margin-right: 14px; text-transform: none; letter-spacing: 0;
}
.zsp-check input { width: auto; }

/* ── Mzdy ── */
.mono { font-variant-numeric:tabular-nums; }

/* ── No results ── */
/* vzhled .no-results sjednocuje blok na KONCI souboru (recenze:
   tři kopie se rozjížděly) — tady zůstává jen ikona */
.no-results-icon { font-size:var(--fs-nadpis); margin-bottom: 12px; }

/* ── Auto badge ── */
.auto {
  background: var(--pg-green-light);
  border: 1px solid var(--pg-green-border); color: var(--pg-green-dark);
}

/* ── Mobilní karty ── */
@media (max-width: 700px) {
  .detail-layout { grid-template-columns: 1fr; }
  .settings-layout { grid-template-columns: 1fr;
    /* min-height 100vh z desktopu by grid rozdělil mezi řádky (align-content
       stretch) — nav pak zabíral půl obrazovky prázdným pásem */
    min-height: 0; align-content: start; }
  .settings-nav { display: flex; overflow-x: auto; border-right: none;
    border-bottom: 1px solid var(--border-color); padding: 0; }
  .settings-nav-item { white-space: nowrap; padding: 12px 16px; }
  /* grid dítě má min-width:auto — roztáhne sloupec podle tabulky a karta
     přeteče viewport; s min-width:0 tabulka scrolluje UVNITŘ karty */
  .settings-content { min-width: 0; padding: 14px 12px; }
  .row2, .row3 { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .inline-form-grid { grid-template-columns: 1fr; }
  .page-header { padding: 12px 14px 0; }
  .zakazky-table-wrap { padding: 0 10px 16px; }

  /* Detail zakázky — jeden sloupec pod sebou.
     Pořadí: záhlaví (číslo + zákazník) → boční panel (posun stavu,
     sdílení, průběh, poznámky) → zbytek hlavního obsahu.
     `order` řadí jen mezi SOUROZENCI, a záhlaví je zanořené uvnitř
     .detail-main — proto se obě kolony rozpustí přes display:contents.
     Bez toho šel nahoru celý boční panel i se stavem a poznámkami
     a název zakázky se objevil až pod nimi (do 4.24.0). */
  .detail-layout { display: flex; flex-direction: column; gap: 10px; padding: 0 10px 20px; }
  .detail-main, .detail-side { display: contents; }
  .detail-hero { order: -2; }
  .detail-side > .form-section { order: -1; }
  .posun-btn { padding: 12px; font-size:var(--fs-vedlejsi); }

  /* Plánované termíny: datum + čas + Uložit + Kalendář se na šířku
     telefonu nevejdou. Položka gridu má min-width:auto, takže se sloupec
     roztáhl na 438 px podle nejužšího možného obsahu a tlačítko Kalendář
     leželo za okrajem obrazovky (schované jen díky overflow-x:hidden).
     min-width:0 sloupec pustí a řádek se místo toho zalomí. */
  .row2 > .field, .row3 > .field { min-width: 0; }
  .termin-radek { flex-wrap: wrap; }

  /* Folder box — nezalomit div */
  .folder-box { font-size:var(--fs-popisek); word-break: break-all; }

  /* Zabránit horizontálnímu scrollu */
  body { overflow-x: hidden; }
  .page-wrap { padding: 12px 10px; }
  .form-section { padding: 12px; }
  /* rozestup karet řeší gap .detail-layout (obě kolony jsou display:contents,
     karty jsou tedy přímé flex položky) — margin by se s ním sčítal */
  .detail-main .form-section, .detail-side .form-section { margin-bottom: 0; }

  /* Užší sloupce, ať se mřížka vejde i mezi 481 a 700 px (pod 481 px
     se řádek přeskládá docela jinak — viz blok níž). */
  .zakazka-row { padding: 10px 12px 10px 18px; column-gap: 10px;
    grid-template-columns: 72px minmax(0,1fr) 112px 112px 76px; }
  .zakazka-row.s-vyberem {
    grid-template-columns: 20px 72px minmax(0,1fr) 112px 112px 76px; }
  .zak-stred { grid-template-columns: 128px minmax(0,1fr); column-gap: 10px; }
  body.hustota-kompakt .zak-stred {
    grid-template-columns: 100px minmax(0,1fr) 118px 88px; column-gap: 8px; }
  /* na mobilu ponecháme tónování podle stavu (žádné pevné zebra pozadí) */
}

/* ── Telefon (iPhone ~402 px): přeskládání, ne zmenšování ── */
@media (max-width: 480px) {
  /* Řádek zakázky se PŘESKLÁDÁ na kartu: číslo + cena nahoře,
     prostřední blok (místo/adresa/zákazník/ČEZ) přes celou šířku,
     typy a stav v řádku dole.
     Zmenšování sloupců vedle sebe na 380 px nefunguje — text se mačkal
     do svislých nudlí a badge se překrývaly (viz screenshot 3.8.2026). */
  .zakazka-row {
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "cislo cena" "stred stred" "typy stav";
    row-gap: 4px; column-gap: 8px;
  }
  .zakazka-row.s-vyberem {
    grid-template-columns: 20px minmax(0,1fr) auto;
    grid-template-areas: "chk cislo cena" "chk stred stred" "chk typy stav";
  }
  .zak-chk    { grid-area: chk; align-items: flex-start; padding-top: 3px; }
  .zak-cislo  { grid-area: cislo; font-size:var(--fs-vedlejsi); }
  .zak-cena   { grid-area: cena; }
  .zak-typy   { grid-area: typy; }
  .zak-stav   { grid-area: stav; justify-content: flex-end; }
  /* Prostřední blok na telefonu: místo a adresa přes celou šířku,
     zákazník a ČEZ ve dvojici pod nimi. Dva sloupce po 170 px se na
     402 px nevejdou. */
  .zak-stred  { grid-area: stred; grid-template-columns: minmax(0,1fr) auto;
    column-gap: 8px; row-gap: 1px; }
  .zak-misto, .zak-adresa { grid-column: 1 / -1; }
  .zak-adresa, .zak-zakaznik { font-size:var(--fs-vedlejsi); }
  /* kompaktní režim se na telefonu do jedné řádky stejně nevejde */
  body.hustota-kompakt .zak-stred { grid-template-columns: minmax(0,1fr) auto; }

  /* tabulky, které se nevejdou, scrollují do strany místo přetékání */
  .settings-table, .table-card table, .crm .panel table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  /* CRM seznam poptávek (5.19.42): sedm sloupců se na telefon nevejde
     a stránka se posouvala do boku. `display:block` na <table> je
     křehké — Safari se u tabulek k overflow chová jinak než Chrome —
     proto scrolluje OBALUJÍCÍ karta a tabulka zůstává tabulkou.
     Na telefonu navíc stačí Firma/poptávka, Částka a Stav; zbytek
     (dny, tři data kontaktů) je v draweru po klepnutí na řádek. */
  .crm .list-card { overflow-x: auto; -webkit-overflow-scrolling: touch }
  .crm .plist { white-space: nowrap }
  .crm .plist th:nth-child(n+4), .crm .plist td:nth-child(n+4) { display: none }

  /* CRM: drawer jako celoobrazovkový list (1120px okno nemá na telefonu smysl,
     tažení myší za hlavičku na dotyku stejně nefunguje) */
  .crm .drawer {
    width: 100vw !important; max-width: 100vw !important;
    /* Připnout k OBĚMA hranám průhledu místo počítání výšky — 100dvh
       na iPhonu v PWA hlásí míň, než displej skutečně má (tentýž důvod
       jako světlý pruh pod patičkou), a spodek draweru pak končil nad
       patičkou. top+bottom:0 žádnou výšku nepočítá, drží se hran. */
    height: auto; max-height: none !important;
    left: 0 !important; top: 0 !important; bottom: 0 !important;
    transform: none !important;
    border-radius: 0; border-width: 0 0 0 4px;
  }
  .crm .dr-grid { grid-template-columns: 1fr; }
  /* Výřez iPhonu (5.9.19): drawer je připnutý k horní hraně, takže
     hlavička musí uhnout hodinám — jinak „OSLOVENÍ" svítí pod časem
     a ✕ koliduje s baterií (zrádný vzor celoobrazovkových oken).
     ✕ je pozicované absolutně, padding hlavičky ho neposune — safe-top
     potřebuje samo. !important nutné: základní .dr-head pravidla jsou
     v souboru AŽ ZA tímhle mobilním blokem a přebila by ho. */
  .crm .dr-head { padding-top: calc(18px + var(--safe-top)) !important; }
  .crm .dr-close { top: calc(14px + var(--safe-top)) !important; }
  .crm .dr-foot { padding-bottom: calc(12px + var(--safe-bottom)) !important; }
  /* hledání firmy na telefonu zpřístupnit (≤720 px se skrývalo úplně) */
  /* hledání firmy na telefonu řeší .pg-hl-hledani (100 % šířky) */

  /* Mzdy: hlavička karty geodeta se přeskládá — jméno přes celou šířku,
     souhrn (fakturace/odměna/Excel) pod ním; jinak se jméno mačkalo do
     svislých nudlí a Excel přetékal za okraj */
  .mzdy-head { flex-wrap: wrap; gap: 6px 12px; }
  .mzdy-jmeno { flex: 1 1 100%; }
  .mzdy-sum { gap: 12px !important; margin-left: auto; flex-wrap: wrap; }
  .mzdy-sum > div { min-width: 0 !important; }
}

/* Obsah viditelný JEN na telefonu — např. zopakované číslo zakázky
   v pokračovacích řádcích Přehledu nebo popisky součtů ve stopce Mezd.
   Na desktopu tyhle prvky nesmí být vidět (rozbily by rowspan efekt). */
.jen-telefon{display:none}

/* Tabulka → karty na telefonu. Popisek nese každá buňka v data-label,
   hlavička se skryje. Vzor přebírá seznam zakázek z fáze 1. */
@media(max-width:480px){
  .jen-telefon{display:inline}
  .pg-tab-karty, .pg-tab-karty tbody, .pg-tab-karty tr, .pg-tab-karty td{display:block;width:100%}
  .pg-tab-karty thead{display:none}
  .pg-tab-karty tr{background:var(--bg-card);border-radius:var(--r-md);padding:10px 12px;margin-bottom:10px;
    box-shadow:var(--stin-1)}
  .pg-tab-karty td{display:flex;justify-content:space-between;gap:12px;padding:3px 0;
    border:0;text-align:right;font-size:var(--fs-vedlejsi)}
  .pg-tab-karty td::before{content:attr(data-label);color:var(--text-muted);font-size:var(--fs-popisek);
    font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-align:left;flex:none}
  .pg-tab-karty td:first-child{font-weight:700;font-size:var(--fs-telo);border-bottom:1px solid var(--bg-secondary);
    padding-bottom:6px;margin-bottom:4px}
  /* Prázdné buňky se v kartě nezobrazují vůbec. Na desktopu slouží jako
     spacer (rowspan efekt u víceřádkových zakázek v Přehledu, zarovnání
     ve stopce), ale v kartě by z nich byl řádek s popiskem a prázdnou
     hodnotou — hluchý šum, u první buňky dokonce prázdné tučné záhlaví. */
  .pg-tab-karty td:empty{display:none}

  /* Souhrnné řádky (tfoot „Celkem", tbody „Celkem za zakázku") mají popisek
     rovnou v textu (colspan), ne v data-label na buňce — bez téhle výjimky
     je obecné pravidlo výše rozseká na samostatné nepopsané řádky. */
  .pg-tab-karty tfoot tr, .pg-tab-karty tr.pg-tab-souhrn{
    display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
    background:transparent; box-shadow:none; border-radius:0; margin-bottom:4px}
  .pg-tab-karty tfoot tr td, .pg-tab-karty tr.pg-tab-souhrn td{display:block; width:auto; flex:none}
  .pg-tab-karty tfoot tr td::before, .pg-tab-karty tr.pg-tab-souhrn td::before{content:none}
  .pg-tab-karty tfoot tr td:first-child, .pg-tab-karty tr.pg-tab-souhrn td:first-child{
    font-weight:600; font-size:var(--fs-popisek); border-bottom:0; padding-bottom:0; margin-bottom:0}
}

/* ═══════════════════════════ CRM modul ═══════════════════════════
   Vše scopováno pod .crm, aby generické třídy (.btn, .topbar, table,
   .toast, .modal…) nekolidovaly se zbytkem appky. CRM stránka dědí
   header/footer/layout z base.html — vlastní sidebar/hlavička zahozeny. */
.crm {
  /* CRM mělo vlastní paletu, jejíž polovina byla jen jiným jménem
     firemních barev a druhá polovina se od nich mírně lišila (#F5F6F8
     vs. var(--bg-secondary), var(--border-color) vs. var(--border-color)). Teď bere hodnoty z appky, takže
     se barvy nemůžou rozejít (5.11.3). */
  --navy:var(--pg-dark); --navy2:#1a2b5e; --green:var(--pg-green); --green-d:#74a83f;
  --blue:var(--pg-blue); --orange:var(--pg-orange);
  --bg:var(--bg-secondary); --card:var(--bg-card);
  --border:var(--border-color); --text:var(--text-primary);
  --muted:var(--text-secondary); --muted2:var(--text-muted);
  --red:var(--pg-red); --red-bg:var(--pg-red-light); --red-border:var(--pg-red-border);
  font-family:'Mulish',sans-serif; color:var(--text);
}
.crm h1,.crm h2,.crm h3,.crm h4,.crm .disp{font-family:'Raleway',sans-serif;}

/* Hlavička CRM byla KÁNON pro celou appku (bílý pruh, drobečky, název,
   vpravo hledání + tlačítka). Od 5.36.0 ji kreslí sdílená komponenta
   `.pg-hlavicka` (components.css výše, makro _hlavicka.html) a CRM tu
   vlastní kopii pravidel už NEMÁ — jinak by se kánon a jeho kopie zase
   rozešly. Zbývá jen srovnat boční odsazení obsahu s hlavičkou. */

/* Rozměry a chování bere .crm .btn ze společného základu výše;
   tady zůstávají jen barvy variant. */
.crm .btn-primary{background:var(--blue);color:#fff;}
.crm .btn-primary:hover{filter:brightness(1.08);}
.crm .btn-green{background:var(--green);color:var(--navy);}
.crm .btn-green:hover{filter:brightness(1.05);}
.crm .btn-ghost{background:var(--card);border-color:var(--border);color:var(--text);}
.crm .btn-ghost:hover{background:var(--bg);}
.crm .btn-sm{padding:6px 11px;font-size:var(--fs-vedlejsi);border-radius:var(--r-sm);}

.crm .content-inner{padding:24px;}
.crm .demo-banner{background:#FDF4E8;border:1px solid #F2D9B8;color:#9A6520;font-size:var(--fs-vedlejsi);font-weight:600;padding:9px 14px;border-radius:var(--r-sm);margin-bottom:18px;display:none;align-items:center;gap:9px;}
.crm .demo-banner.show{display:flex;}

.crm .subtabs{display:flex;gap:4px;margin-bottom:22px;border-bottom:1px solid var(--border);}
.crm .subtab{padding:10px 16px;font-size:var(--fs-vedlejsi);font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:color .15s;display:flex;align-items:center;gap:8px;}
.crm .subtab:hover{color:var(--text);}
.crm .subtab.active{color:var(--blue);border-bottom-color:var(--blue);}
.crm .subtab .cnt{background:var(--orange);color:#fff;}
/* Pulzující tečka „něco nového od minulé návštěvy" — záložky CRM a karty
   pipeline. Animaci badge-pulz definuje theme.css (načtený všude). */
.tecka-nova{display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--orange);margin-left:6px;vertical-align:middle;
  animation:badge-pulz 1.3s ease-in-out infinite;}
.pcard .tecka-nova{position:absolute;top:10px;right:10px;margin:0;}
.crm .subtab .cnt.pulzuje{animation:badge-pulz 1.3s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){
  .tecka-nova,.crm .subtab .cnt.pulzuje{animation:none;}
}

.crm .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;}
.crm .stat{position:relative;overflow:hidden;border:none;border-radius:var(--r-lg);padding:16px 18px;
  background:linear-gradient(140deg,var(--c-main),var(--c-dark));
  box-shadow:0 10px 24px rgba(var(--c-rgb),.30);transition:transform .16s ease,box-shadow .16s ease;}
.crm .stat::before{content:"";position:absolute;top:-45%;left:-12%;width:72%;height:130%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.28),rgba(255,255,255,0));}
.crm .stat:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(var(--c-rgb),.44);}
.crm .stat .lab{font-size:var(--fs-vedlejsi);color:rgba(255,255,255,.82);font-weight:600;position:relative;}
.crm .stat .val{font-family:'Raleway';font-weight:800;font-size:var(--fs-sekce);margin-top:6px;letter-spacing:.3px;color:#fff;position:relative;text-shadow:0 1px 2px rgba(0,0,0,.14);}
.crm .stat .sub{font-size:var(--fs-vedlejsi);color:rgba(255,255,255,.72);margin-top:3px;position:relative;}
.crm .stat .bar{display:none;}
.crm .stat.b-blue{--c-main:var(--pg-blue);--c-dark:var(--pg-dark);--c-rgb:47,92,168;}
.crm .stat.b-green{--c-main:#6fae2f;--c-dark:#3B6D11;--c-rgb:146,195,93;}
.crm .stat.b-orange{--c-main:var(--pg-orange);--c-dark:#b5642a;--c-rgb:233,149,86;}
.crm .stat.b-navy{--c-main:#2b3a63;--c-dark:#141b30;--c-rgb:30,39,73;}

.crm .board{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;align-items:start;}
.crm .col.col-closed{background:rgba(0,0,0,.008);}

/* Ovládání fáze na kartě — jen telefonní vrstva (na počítači se táhne myší) */
.crm .pcard-mobil{display:none}
@media(max-width:480px){
  /* sloupce pod sebe — vedle sebe se na 402 px nevejdou */
  .crm .board{grid-template-columns:1fr;}
  .crm .pcard-mobil{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}
  /* min-height 44px — doporučené minimum dotykového cíle (dřív ~32/36 px) */
  .crm .pcard-dal{flex:1;min-width:120px;min-height:44px;padding:7px 10px;border-radius:var(--r-sm);border:1px solid var(--green);
    background:rgba(146,195,93,.14);color:var(--pg-green-dark);font-size:var(--fs-vedlejsi);font-weight:700;font-family:inherit}
  .crm .pcard-faze{min-height:44px;padding:7px 8px;border-radius:var(--r-sm);border:1px solid var(--border);
    background:var(--card);color:var(--text);font-size:var(--fs-pole);font-family:inherit}
}

/* Přepínač Kanban/Seznam + filtr „Zobrazit uzavřené" nad boardem */
.crm .pipe-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.crm .view-switch{display:flex;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:2px;gap:2px;}
.crm .view-switch button{display:flex;align-items:center;gap:6px;padding:5px 12px;border:none;border-radius:var(--r-sm);font-size:var(--fs-vedlejsi);font-weight:700;background:none;color:var(--muted2);cursor:pointer;font-family:'Mulish';}
.crm .view-switch button.active{background:var(--navy);color:#fff;}
.crm .closed-toggle{display:flex;align-items:center;gap:8px;margin-left:auto;cursor:pointer;user-select:none;}
.crm .closed-toggle span{font-size:var(--fs-vedlejsi);color:var(--muted);font-weight:600;}
.crm .toggle-track{width:34px;height:19px;background:#D3D1C7;border-radius:var(--r-pilulka);position:relative;transition:background .15s;flex-shrink:0;}
.crm .toggle-track.on{background:var(--green);}
.crm .toggle-dot{width:15px;height:15px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:left .15s;}
.crm .toggle-track.on .toggle-dot{left:17px;}

/* Seznam (tabulkový) pohled pipeline — bílá karta, ať se řádky nerozplývají
   do tečkovaného pozadí appky. */
.crm .list-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:6px 16px;box-shadow:var(--stin-2);}
.crm .plist{width:100%;border-collapse:collapse;font-size:var(--fs-vedlejsi);}
.crm .plist thead th{padding-top:14px;}
.crm .plist th{text-align:left;font-size:var(--fs-drobne);text-transform:uppercase;letter-spacing:.4px;color:var(--muted2);font-weight:700;padding-right:10px;padding-bottom:8px;cursor:pointer;white-space:nowrap;}
.crm .plist th:hover{color:var(--navy);}
.crm .plist th.num{text-align:right;}
.crm .plist td{padding:12px 10px 12px 0;border-top:1px solid var(--border);}
.crm .plist tr.prow{cursor:pointer;}
.crm .plist tr.prow:hover td{background:var(--bg);}
.crm .plist tr:last-child td{padding-bottom:14px;}
.crm .plist .pl-firma{font-weight:700;color:var(--navy);}
.crm .plist .pl-nazev{color:var(--muted);font-size:var(--fs-vedlejsi);}
.crm .plist td.num{text-align:right;font-weight:700;color:var(--navy);}
/* rozměry ze společné rodiny výše */
.crm .stav-osloveni{background:var(--bg);color:var(--muted2);}
.crm .stav-poptavka{background:var(--pg-blue-light);color:var(--pg-blue);}
.crm .stav-nabidka{background:#FAEEDA;color:#633806;}
.crm .stav-vyhrano{background:var(--pg-green-light);color:var(--pg-green-dark);}
.crm .stav-prohrano{background:var(--red-bg);color:var(--red);}
.crm .plist .faze-starsi{color:#854F0B;font-weight:700;}
.crm .plist .faze-stara{color:var(--red);font-weight:700;}
.crm .col-head{display:flex;align-items:center;gap:8px;padding:8px 11px;margin-bottom:9px;border-radius:var(--r-md);
  background:color-mix(in srgb, var(--cc,#8a90a0) 12%, var(--card));}
.crm .col-dot{width:9px;height:9px;border-radius:50%;}
.crm .col-title{font-family:'Raleway';font-weight:700;font-size:var(--fs-vedlejsi);letter-spacing:.3px;
  color:color-mix(in srgb, var(--cc,#8a90a0) 60%, var(--navy));}
.crm .col-count{color:var(--muted);background:var(--bg);border:1px solid var(--border);}
.crm .col-sum{margin-left:auto;font-size:var(--fs-vedlejsi);color:var(--muted);font-weight:700;}
.crm .col{background:rgba(0,0,0,.015);border-radius:var(--r-md);padding:6px;min-height:120px;transition:background .15s,box-shadow .15s;}
.crm .col.drag-over{background:var(--pg-blue-light);box-shadow:inset 0 0 0 2px var(--blue);}

.crm .pcard{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--cc,transparent);
  border-radius:var(--r-md);padding:13px 14px;margin-bottom:9px;cursor:pointer;
  box-shadow:var(--stin-2);transition:box-shadow .15s,border-color .15s,transform .08s;}
.crm .pcard:hover{box-shadow:var(--stin-3);transform:translateY(-2px);}

/* Prázdné stavy (.pg-empty) a kostry (.pg-skel*) se PŘESUNULY do
   theme.css (5.10.0). Důvod: components.css nelinkuje každá stránka —
   Podatelna, Nápověda, Statistiky, Hlídač VŘ ani sdílení ho nemají,
   ale tyhle třídy používají, takže kostra byla neviditelná a prázdný
   stav bez stylu. theme.css se načítá všude. Nepřidávat sem zpátky. */
.crm .pcard.dragging{opacity:.45;}
.crm .pcard .pname{font-weight:700;font-size:var(--fs-vedlejsi);line-height:1.35;margin-bottom:8px;}
.crm .pcard .pfirm{font-size:var(--fs-vedlejsi);color:var(--muted);display:flex;align-items:center;gap:6px;margin-bottom:11px;}
.crm .pcard .prow{display:flex;align-items:center;justify-content:space-between;}
.crm .pcard .pamt{font-family:'Raleway';font-weight:700;font-size:var(--fs-telo);color:var(--navy);}
/* .crm .pill — rozměry ze společné rodiny výše */
.crm .pill-reg{background:#EEF1F6;color:var(--muted);}
.crm .pill-zak{background:var(--pg-green-light);color:var(--green-d);}
.crm .badge-fu{background:#FDEEE0;color:#C06A28;margin-top:10px;}
.crm .badge-fu.today{background:var(--orange);color:#fff;}
/* .crm .tag-typ — rozměry ze společné rodiny výše */
.crm .t-proj{background:var(--pg-blue-light);color:var(--blue);}.crm .t-obec{background:var(--pg-green-light);color:var(--green-d);}
.crm .t-cez{background:#FBE9D9;color:#C06A28;}.crm .t-def{background:#EEF1F6;color:var(--muted);}

.crm .panel{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;}
.crm table{width:100%;border-collapse:collapse;}
.crm th{text-align:left;font-size:var(--fs-popisek);letter-spacing:.8px;text-transform:uppercase;color:var(--muted);font-weight:700;padding:13px 18px;border-bottom:1px solid var(--border);}
.crm td{padding:14px 18px;border-bottom:1px solid var(--border);font-size:var(--fs-vedlejsi);}
.crm tr:last-child td{border-bottom:none;}
.crm tr.frow{cursor:pointer;transition:background .12s;}
.crm tr.frow:hover{background:#FAFBFC;}
.crm .firm-cell{display:flex;align-items:center;gap:12px;}
.crm .firm-ic{width:36px;height:36px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-family:'Raleway';font-weight:800;font-size:var(--fs-telo);flex-shrink:0;}
.crm .fi-proj{background:var(--pg-blue-light);color:var(--blue);}.crm .fi-obec{background:var(--pg-green-light);color:var(--green-d);}
.crm .fi-cez{background:#FBE9D9;color:#C06A28;}.crm .fi-def{background:#EEF1F6;color:var(--muted);}
.crm .firm-name{font-weight:700;}
.crm .firm-sub{font-size:var(--fs-vedlejsi);color:var(--muted);margin-top:1px;}
.crm .mut{color:var(--muted);font-size:var(--fs-vedlejsi);}

/* fronta */
.crm .mailrow{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;margin-bottom:10px;}
.crm .mailrow .mhead{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.crm .mailrow .mfrom{font-weight:700;font-size:var(--fs-vedlejsi);}
.crm .mailrow .msubj{font-size:var(--fs-vedlejsi);color:var(--text);margin-bottom:4px;}
.crm .mailrow .mtext{font-size:var(--fs-vedlejsi);color:var(--muted);line-height:1.5;max-height:42px;overflow:hidden;cursor:pointer;white-space:pre-wrap;word-break:break-word;}
.crm .mailrow .mtext.expanded{max-height:none;}
.crm .mailrow .mfrom-addr{color:var(--muted);font-weight:400;}
.crm .mailrow .mto{font-size:var(--fs-vedlejsi);color:var(--muted);margin:2px 0 0;word-break:break-word;}
.crm .mailrow .mact{display:flex;gap:8px;margin-top:11px;align-items:center;flex-wrap:wrap;}
.crm .dir{letter-spacing:.5px;text-transform:uppercase;}
.crm .dir-in{background:var(--pg-blue-light);color:var(--blue);}.crm .dir-out{background:var(--pg-green-light);color:var(--green-d);}
.crm .assign-sel,.crm .assign-pop{font-family:'Mulish';font-size:var(--fs-vedlejsi);padding:6px 9px;border:1px solid var(--border-input);border-radius:var(--r-sm);background:#fff;flex:1 1 150px;min-width:0;max-width:220px;}

.crm .overlay{position:fixed;inset:0;background:rgba(30,39,73,.38);opacity:0;pointer-events:none;transition:opacity .25s;z-index:300;}
.crm .overlay.open{opacity:1;pointer-events:auto;}
/* Samostatné vystředěné okno s tmavě modrým (navy) ohraničením. */
.crm .drawer{position:fixed;top:50%;left:50%;width:1120px;max-width:95vw;max-height:90vh;background:#fff;border:4px solid var(--navy);border-radius:var(--r-lg);box-shadow:var(--stin-4);opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.96);transition:opacity .2s ease,transform .22s cubic-bezier(.4,0,.2,1);z-index:310;display:flex;flex-direction:column;overflow:hidden;}
.crm .drawer.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
.crm .drawer.dragging{transition:none;}
.crm .dr-head{cursor:move;}
.crm .dr-head button, .crm .dr-head select, .crm .dr-head input{cursor:auto;}
/* Dvousloupcový obsah okna poptávky (vlevo údaje, vpravo komunikace). */
.crm .dr-cols{display:grid;grid-template-columns:320px minmax(0,1fr);gap:36px;align-items:start;}
.crm .dr-col-l{min-width:0;}
.crm .dr-col-l>*{max-width:100%;box-sizing:border-box;}
.crm .dr-col-r{min-width:0;}
@media(max-width:780px){.crm .dr-cols{grid-template-columns:1fr;gap:18px;}}
.crm .dr-head{padding:22px 24px 18px;border-bottom:1px solid var(--border);position:relative;}
.crm .dr-close{position:absolute;top:18px;right:20px;cursor:pointer;color:var(--muted);font-size:var(--fs-sekce);line-height:1;background:none;border:none;}
.crm .dr-eyebrow{font-size:var(--fs-vedlejsi);letter-spacing:1.2px;text-transform:uppercase;color:var(--blue);font-weight:700;}
.crm .dr-title{font-family:'Raleway';font-weight:800;font-size:var(--fs-sekce);margin:7px 0 4px;line-height:1.25;}
.crm .dr-firm{font-size:var(--fs-vedlejsi);color:var(--muted);display:flex;align-items:center;gap:8px;}
.crm .dr-body{padding:20px 24px;overflow-y:auto;flex:1;}
.crm .dr-stav{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--border);}
.crm .dr-stav-lbl{font-size:var(--fs-vedlejsi);letter-spacing:.5px;text-transform:uppercase;color:var(--muted2);font-weight:700;white-space:nowrap;}
.crm .dr-stav select{flex:1;font-family:'Mulish';font-size:var(--fs-vedlejsi);font-weight:600;padding:8px 10px;border:1px solid var(--border-input);border-radius:var(--r-sm);background:#fff;color:var(--text);cursor:pointer;}
.crm .dr-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin-bottom:22px;}
.crm .dr-field .k{font-size:var(--fs-vedlejsi);letter-spacing:.5px;text-transform:uppercase;color:var(--muted2);font-weight:700;margin-bottom:3px;}
.crm .dr-field .v{font-size:var(--fs-telo);font-weight:600;}
.crm .dr-field .v.big{font-family:'Raleway';font-weight:800;font-size:var(--fs-karta);color:var(--navy);}
.crm .dr-date{font-family:'Mulish';font-size:var(--fs-vedlejsi);font-weight:600;color:var(--orange);border:1px solid var(--border-input);border-radius:var(--r-sm);padding:5px 8px;background:#fff;max-width:100%;min-width:0;box-sizing:border-box;cursor:pointer;}
.crm .sec-title{font-family:'Raleway';font-weight:700;font-size:var(--fs-vedlejsi);letter-spacing:.3px;margin:6px 0 14px;display:flex;align-items:center;gap:8px;}
.crm .sec-title::after{content:"";flex:1;height:1px;background:var(--border);}

.crm .timeline{position:relative;padding-left:22px;}
.crm .timeline::before{content:"";position:absolute;left:6px;top:5px;bottom:5px;width:2px;background:var(--border);}
.crm .tl-item{display:block;position:relative;padding-bottom:18px;}
.crm .tl-item::before{content:"";position:absolute;left:-21px;top:3px;width:11px;height:11px;border-radius:50%;background:#fff;border:2.5px solid var(--blue);}
.crm .tl-item.tel::before{border-color:var(--green);}.crm .tl-item.note::before{border-color:var(--muted2);}
.crm .tl-item.schuzka::before{border-color:var(--orange);}
.crm .tl-meta{font-size:var(--fs-vedlejsi);color:var(--muted2);font-weight:600;margin-bottom:3px;display:flex;gap:8px;align-items:center;}
/* Hlavička záznamu historie: druh komunikace + datum nahoře, text až pod ním. */
.crm .tl-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;}
.crm .tl-date{font-size:var(--fs-vedlejsi);color:var(--muted2);font-weight:600;}
.crm .tl-typ{letter-spacing:.5px;text-transform:uppercase;flex:none;}
.crm .ty-email{background:var(--pg-blue-light);color:var(--blue);}.crm .ty-tel{background:var(--pg-green-light);color:var(--green-d);}
.crm .ty-note{background:#EEF1F6;color:var(--muted);}.crm .ty-schuzka{background:#FBE9D9;color:#C06A28;}
.crm .tl-text{font-size:var(--fs-vedlejsi);line-height:1.55;overflow-wrap:break-word;word-break:break-word;}
/* Adresa v CIZÍM textu (tělo e-mailu ve frontě i v historii komunikace)
   je klikací — vkládá ji sdílené textSOdkazy z app2.js (5.34.2). Barva
   je z překlápěcího PÁRU --pg-blue-text/--pg-blue-light; výchozí modrá
   prohlížeče by v tmavém motivu spadla hluboko pod normu. */
.crm .mtext a,.crm .tl-text a{color:var(--pg-blue-text);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere;word-break:break-word;}

.crm .addact{background:#FAFBFC;border:1px solid var(--border);border-radius:var(--r-md);padding:12px;margin-bottom:20px;}
.crm .addact select,.crm .addact textarea,.crm .modal input,.crm .modal select,.crm .modal textarea{width:100%;font-family:'Mulish';font-size:var(--fs-vedlejsi);border:1px solid var(--border-input);border-radius:var(--r-sm);padding:8px 10px;margin-bottom:8px;color:var(--text);background:#fff;}
.crm .addact textarea{resize:vertical;min-height:54px;}
.crm .row2{display:flex;gap:8px;}

.crm .dr-foot{padding:16px 24px;border-top:1px solid var(--border);display:flex;gap:10px;background:#FAFBFC;}
.crm .dr-foot .btn{flex:1;justify-content:center;}
.crm .stage-track{display:flex;gap:5px;margin:18px 0 4px;}
.crm .stage-track .s{flex:1;height:5px;border-radius:var(--r-xs);background:var(--border);}
.crm .stage-track .s.on{background:var(--blue);}
.crm .stage-lbls{display:flex;justify-content:space-between;font-size:var(--fs-popisek);color:var(--muted2);font-weight:700;margin-top:4px;}

.crm .modal-wrap{position:fixed;inset:0;background:rgba(30,39,73,.4);display:none;align-items:center;justify-content:center;z-index:320;}
.crm .modal-wrap.open{display:flex;}
.crm .modal{background:#fff;border-radius:var(--r-md);width:440px;max-width:94vw;max-height:90vh;overflow-y:auto;padding:24px;box-shadow:var(--stin-4);}
.crm .modal h3{font-size:var(--fs-karta);font-weight:800;margin-bottom:16px;}
.crm .modal label{font-size:var(--fs-vedlejsi);letter-spacing:.4px;text-transform:uppercase;color:var(--muted2);font-weight:700;display:block;margin-bottom:4px;}
.crm .modal .mfoot{display:flex;gap:10px;margin-top:8px;}
.crm .modal .mfoot .btn{flex:1;justify-content:center;}

.crm .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:12px 20px;border-radius:var(--r-md);font-size:var(--fs-vedlejsi);font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:330;box-shadow:var(--stin-4);}
.crm .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media(max-width:1080px){.crm .stats{grid-template-columns:repeat(2,1fr);}.crm .board{grid-template-columns:repeat(2,1fr);}}
@media(max-width:720px){.crm .stats,.crm .board{grid-template-columns:1fr;}.crm .content-inner{padding-left:14px;padding-right:14px;}}


/* ════════════════ Zelené podsvícení seznamů (návazně na hover menu 4c) ════════════════
   Stejný efekt jako v bočním menu — pruh zeleného světla se rozjede zleva.
   Platí pro: řádky zakázek, tabulky, navigaci v Nastavení a CRM seznamy. */

/* Řádky zakázek: zelený „sweep" + tónování podle stavu řeší hlavní blok
   .zakazka-row výše (sweep jede navrch tónu; v klidu 0 % šířky). */

/* Tabulky (.table-card) */
.table-card tbody tr {
  background-image: linear-gradient(90deg, rgba(146,195,93,.18), rgba(146,195,93,0));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .28s ease;
}
.table-card tbody tr:hover {
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(146,195,93,.18), rgba(146,195,93,0));
  background-size: 100% 100%;
}

/* Tabulka v Nastavení */
.settings-table tbody tr {
  background-image: linear-gradient(90deg, rgba(146,195,93,.16), rgba(146,195,93,0));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .28s ease;
}
.settings-table tbody tr:hover { background-size: 100% 100%; }

/* Navigace v Nastavení */
.settings-nav-item {
  background-image: linear-gradient(90deg, rgba(146,195,93,.22), rgba(146,195,93,.03));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .28s ease;
}
.settings-nav-item:hover {
  background-color: transparent;
  background-size: 100% 100%;
}
.settings-nav-item.active { background-image: none; }

/* CRM — pipeline seznam */
.crm .plist tr.prow {
  background-image: linear-gradient(90deg, rgba(146,195,93,.18), rgba(146,195,93,0));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .28s ease;
}
.crm .plist tr.prow:hover { background-size: 100% 100%; }
.crm .plist tr.prow:hover td { background: transparent; }

/* CRM — seznam firem */
.crm tr.frow {
  background-image: linear-gradient(90deg, rgba(146,195,93,.16), rgba(146,195,93,0));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .28s ease;
}
.crm tr.frow:hover {
  background-color: transparent;
  background-size: 100% 100%;
}

/* Respektovat omezení pohybu v systému */
@media (prefers-reduced-motion: reduce) {
  .zakazka-row, .table-card tbody tr, .settings-table tbody tr,
  .settings-nav-item, .crm .plist tr.prow, .crm tr.frow { transition: none; }
}

/* ═══ CRM v tmavém motivu (5.10.0) ═══════════════════════════════════
   CRM má vlastní paletu (viz `.crm{...}` výše) a do teď pro ni
   neexistovalo JEDINÉ tmavé pravidlo — karty svítily bíle na tmavém
   pozadí zbytku appky. Přebarvují se hlavně proměnné; pak ta místa,
   kde je světlá barva napsaná natvrdo.
   `--navy` se schválně NEMĚNÍ: slouží zároveň jako pozadí (přepínač
   pohledu, toast, kde na něm leží bílý text) i jako barva textu na
   bílé kartě. Jedna hodnota by nikdy nesedla obojímu, takže texty
   řeší samostatná pravidla níž.
   Barevné štítky se překlápějí stejným pravidlem jako stavy zakázek
   v theme.css: tmavé pozadí téže rodiny + světlý text téže rodiny. */
[data-theme="dark"] .crm {
  /* Plochy, karty, linky a texty se od 5.11.3 dědí z appky (viz .crm
     výše), takže tady zbývá jen červená rodina, kterou appka nemá. */
  --red:#F0A9A4; --red-bg:#3a1e1e; --red-border:#7a3330;
}
/* texty, které byly navy (počítaly s bílou kartou) */
[data-theme="dark"] .crm .plist .pl-firma,
[data-theme="dark"] .crm .plist td.num,
[data-theme="dark"] .crm .plist th:hover,
[data-theme="dark"] .crm .pcard .pamt,
[data-theme="dark"] .crm .dr-field .v.big { color:var(--text); }
[data-theme="dark"] .crm .col-title {
  color:color-mix(in srgb, var(--cc,#8a90a0) 55%, #ffffff); }
/* plochy s natvrdo bílou */
[data-theme="dark"] .crm .btn-ghost,
[data-theme="dark"] .crm .assign-sel,
[data-theme="dark"] .crm .assign-pop,
[data-theme="dark"] .crm .dr-stav select,
[data-theme="dark"] .crm .dr-date,
[data-theme="dark"] .crm .addact select,
[data-theme="dark"] .crm .addact textarea,
[data-theme="dark"] .crm .modal input,
[data-theme="dark"] .crm .modal select,
[data-theme="dark"] .crm .modal textarea,
[data-theme="dark"] .crm .drawer,
[data-theme="dark"] .crm .modal { background:var(--card); color:var(--text); }
[data-theme="dark"] .crm .addact,
[data-theme="dark"] .crm .dr-foot,
[data-theme="dark"] .crm tr.frow:hover { background:var(--bg); }
[data-theme="dark"] .crm .tl-item::before { background:var(--card); }
[data-theme="dark"] .crm .toggle-track { background:#3a4560; }
[data-theme="dark"] .crm .toggle-dot { background:#e8ecf5; }
[data-theme="dark"] .crm .col { background:rgba(255,255,255,.03); }
[data-theme="dark"] .crm .col.drag-over { background:#22304d; }
[data-theme="dark"] .crm .demo-banner {
  background:#3a3320; border-color:#7a5b18; color:#f0d9a8; }
/* modrá rodina */
[data-theme="dark"] .crm .stav-poptavka,
[data-theme="dark"] .crm .t-proj, [data-theme="dark"] .crm .fi-proj,
[data-theme="dark"] .crm .dir-in, [data-theme="dark"] .crm .ty-email {
  background:#16264a; color:#9dc0ff; }
/* zelená rodina */
[data-theme="dark"] .crm .stav-vyhrano,
[data-theme="dark"] .crm .t-obec, [data-theme="dark"] .crm .fi-obec,
[data-theme="dark"] .crm .dir-out, [data-theme="dark"] .crm .ty-tel,
[data-theme="dark"] .crm .pill-zak {
  background:#1a2a0e; color:#b0d888; }
/* oranžová rodina */
[data-theme="dark"] .crm .stav-nabidka,
[data-theme="dark"] .crm .t-cez, [data-theme="dark"] .crm .fi-cez,
[data-theme="dark"] .crm .ty-schuzka, [data-theme="dark"] .crm .badge-fu {
  background:#402008; color:#ffc98a; }
/* neutrální */
[data-theme="dark"] .crm .t-def, [data-theme="dark"] .crm .fi-def,
[data-theme="dark"] .crm .ty-note, [data-theme="dark"] .crm .pill-reg {
  background:#252d40; color:var(--muted); }
/* Doplněno po recenzi (5.11.2) — tři místa, která v tmavém CRM
   zůstala světlá a text na nich prakticky splýval. */
[data-theme="dark"] .crm .plist .faze-starsi { color:#ffc98a; }
/* Hláška „zákazník už v CRM je" má natvrdo světlé pozadí v šabloně
   a dědila by světlý text tmavého motivu — byla neviditelná. */
[data-theme="dark"] #vzDuplicita {
  background:#3a3320 !important; border-color:#7a5b18 !important; color:#f0d9a8 !important; }
[data-theme="dark"] .crm .pcard-dal {
  background:rgba(146,195,93,.18); color:#b0d888; }

/* ── Čipy a štítky ──────────────────────────────────────────────
   Rozměry přebírají ze společné rodiny (.stitek v theme.css). Selektory
   z CRM jsou vyjmenované schválně: mají vyšší specificitu, takže by si
   jinak držely své vlastní hodnoty. Barvy zůstávají v pravidlech níž. */
.sub-chip, .ext-tag, .auto,
.crm .tag-typ, .crm .dir, .crm .tl-typ {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-xs);
  font-size: var(--fs-drobne); font-weight: 700;
  line-height: var(--lh-ui); white-space: nowrap; vertical-align: middle;
}
.crm .stav-pill, .crm .pill, .crm .badge-fu, .crm .col-count, .crm .subtab .cnt {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pilulka);
  font-size: var(--fs-popisek); font-weight: 700;
  line-height: var(--lh-ui); white-space: nowrap; vertical-align: middle;
}

/* ── TABULKY: jedno provedení (5.12.0) ─────────────────────────────
   Pět tabulek mělo pět různých záhlaví (10 až 13 px), jiné odsazení
   buněk a jen některé zvýrazňovaly řádek pod myší. Rozměry i chování
   jsou nově společné; kdo chce hustěji, zapne kompaktní režim. */
.settings-table, .fa-tab, .crm .plist { width: 100%; border-collapse: collapse; }
.settings-table th, .fa-tab th, .crm .plist th {
  padding: 10px 14px; background: var(--bg-secondary);
  font-size: var(--fs-popisek); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--ls-popisek); color: var(--text-muted);
  border-bottom: 1px solid var(--border-color); text-align: left;
}
.settings-table td, .fa-tab td, .crm .plist td {
  padding: 10px 14px; font-size: var(--fs-vedlejsi); vertical-align: middle;
}
/* CRM kreslí linku NAD řádkem, ostatní pod ním — společné pravidlo by
   udělalo dvojitou, proto se doplňuje jen tam, kde chybí. Bez toho
   tabulky v Nastavení a Fakturách přišly o dělicí linky a u faktury,
   která nese víc řádků položek, nešlo poznat, kde jedna končí. */
.settings-table td, .fa-tab td { border-bottom: 1px solid var(--bg-secondary); }
.settings-table tr:last-child td, .fa-tab tr:last-child td { border-bottom: none; }
.settings-table tbody tr:hover, .fa-tab tbody tr:hover { background: var(--bg-hover); }

/* ── Prázdné stavy: doraz (5.12.0) ─────────────────────────────────
   Základ je v theme.css, jenže components.css se načítá AŽ ZA ním,
   takže `.no-results` a `.crm .empty` definované tady by ho přebily.
   Proto totéž ještě jednou na konci. */
.no-results, .crm .empty {
  text-align: center; padding: 48px 20px;
  color: var(--text-secondary); font-size: var(--fs-vedlejsi);
  line-height: var(--lh-text);
}

/* ── PODPORA — hlášení problémů z appky (5.36.0) ───────────────────
   Formulář se vykresluje na DVĚ místa (modál z menu pod avatarem
   a Nastavení → Podpora) týmž kódem v app2.js, takže i styly jsou
   jedny. Barvy VÝHRADNĚ přes tokeny — a nikdy překlápěcí token pod
   pevnou barvou textu (past z CLAUDE.md). */

/* Menu pod avatarem */
.uziv-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--r-md); padding: 6px; z-index: 999;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}
.uziv-menu-polozka {
  display: block; width: 100%; text-align: left; border: 0;
  background: transparent; color: var(--text-primary); cursor: pointer;
  padding: 9px 12px; border-radius: var(--r-sm); font-family: inherit;
  font-size: var(--fs-vedlejsi); line-height: var(--lh-ui);
}
.uziv-menu-polozka:hover { background: var(--bg-hover); }
.uziv-menu-cara { height: 1px; background: var(--border-color); margin: 5px 8px; }

/* Okno hlášení: širší než výchozí modál (vejde se náhled snímku).
   Obsah (text, až 5 náhledů, rozbalený kontext) může snadno přerůst
   výšku okna — bez vlastního stropu a rolování by se ke tlačítku
   Odeslat nedalo dostat (recenze). Nejdřív vh (fallback pro starší
   prohlížeče), pak dvh — dvh se počítá se skutečnou výškou viewportu
   na mobilu (bez lišt), takže tam, kde ho prohlížeč zná, přebije vh. */
.pod-box {
  width: min(720px, 94vw);
  max-height: 100vh;
  max-height: 100dvh;
  overflow: auto;
}
.pod-box .modal-title { display: flex; align-items: center; justify-content: space-between; }
.pod-zavrit {
  border: 0; background: transparent; cursor: pointer; font-size: 16px;
  line-height: 1; color: var(--text-muted); padding: 2px 6px;
}
.pod-zavrit:hover { color: var(--text-primary); }

.pod-form { display: flex; flex-direction: column; gap: 12px; }
.pod-text {
  width: 100%; min-height: 110px; resize: vertical; font-family: inherit;
  font-size: var(--fs-vedlejsi); line-height: var(--lh-text);
  padding: 10px 12px; border: 1px solid var(--border-input);
  border-radius: var(--r-sm); background: var(--bg-input);
  color: var(--text-primary); box-sizing: border-box;
}
.pod-text:focus { outline: none; border-color: var(--pg-green);
  box-shadow: 0 0 0 3px rgba(146, 195, 93, .22); }

.pod-chyba {
  font-size: var(--fs-vedlejsi); line-height: var(--lh-text);
  color: var(--pg-red);
}
.pod-akce { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pod-tip { font-size: var(--fs-popisek); color: var(--text-muted); }

/* Přetažení souboru nad formulář */
.pod-nad .pod-text { border-color: var(--pg-green); }

.pod-nahledy { display: flex; flex-wrap: wrap; gap: 10px; }
.pod-nahled {
  position: relative; width: 132px; border: 1px solid var(--border-color);
  border-radius: var(--r-sm); overflow: hidden; background: var(--bg-secondary);
}
.pod-nahled img { display: block; width: 100%; height: 84px; object-fit: cover; }
.pod-nahled-pdf {
  display: flex; align-items: center; justify-content: center; height: 84px;
  font-weight: 700; font-size: var(--fs-vedlejsi); color: var(--text-muted);
}
.pod-nahled-popis {
  display: block; padding: 5px 7px; font-size: var(--fs-drobne);
  color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
/* Křížek na tmavé podložce — pevná barva na pevné podložce, ani jedna
   se nepřeklápí s motivem (jinak by v tmavém zmizel). */
.pod-nahled-zrus {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  border: 0; border-radius: 50%; cursor: pointer; line-height: 1;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px;
}
.pod-nahled-zrus:hover { background: rgba(0, 0, 0, .75); }

.pod-kontext { font-size: var(--fs-popisek); color: var(--text-muted); }
.pod-kontext summary { cursor: pointer; }
.pod-kontext-vypis {
  margin: 8px 0 0; padding: 9px 11px; max-height: 190px; overflow: auto;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: var(--r-sm); font-family: monospace;
  font-size: var(--fs-drobne); line-height: 1.55; color: var(--text-secondary);
  white-space: pre-wrap; word-break: break-word;
}
.pod-gdpr { margin: 8px 0 0; }
/* var(--pg-blue-text), NE var(--pg-blue): modál Nahlásit problém je MIMO
   .app-obsah, takže se na něj nevztahuje tmavý přepis odkazů níž v tomhle
   souboru (`[data-theme="dark"] .app-obsah a…`) — pevná --pg-blue by tu
   v tmavém motivu klesla na ~2,5:1 (stejná past jako u nadpisů na
   /ochrana-udaju, viz komentář tam). --pg-blue-text se překlápí sama. */
.pod-gdpr a { color: var(--pg-blue-text); font-weight: 600; text-decoration: none; }
.pod-gdpr a:hover { text-decoration: underline; }
.pod-paticka {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.pod-dodavatel { font-size: var(--fs-popisek); color: var(--text-muted); }

/* ── Telefon (≤480 px) ──
   Modál má rozměry v INLINE stylu jen u některých oken; tady je třída,
   takže !important netřeba — ale horní i spodní hrana MUSÍ počítat
   s výřezem, jinak ✕ podjede pod stavovou lištu iPhonu. */
@media (max-width: 480px) {
  .pod-box {
    width: 100vw; max-width: 100vw; border-radius: 0;
    padding-top: var(--safe-top);
    padding-bottom: calc(16px + var(--safe-bottom));
  }
  .pod-box .modal-title { margin-top: 0; }
  .pod-nahled { width: calc(50% - 5px); }
  .pod-akce .pod-tip { flex-basis: 100%; }
  .pod-paticka { flex-direction: column; align-items: stretch; }
  .pod-paticka .btn-primary { width: 100%; }
  .uziv-menu { min-width: 190px; }
}

/* ── Hlasový asistent (5.40.0) ────────────────────────────────────
   Panel má ZÁMĚRNĚ pevné barvy v obou motivech — je to „přístroj"
   s vlastním světem, ne obsahová karta. Právě proto se ho netýká past
   „překlápěcí token pod pevnou barvou": nic tu nepřeklápí. */
.pga-panel {
  position: fixed; right: 18px; bottom: 18px;
  /* POD modály (.modal-overlay má 500), nad běžným obsahem. Panel plovoucí
     NAD dialogem by si mohl vzít fokus a Enter by pak potvrdil nebezpečnou
     akci v dialogu pod ním — proto 450, ne 1200. */
  z-index: 250 /* pod VŠEMI dialogy (CRM .modal-wrap 300–330, .modal-overlay 500), nad obsahem */;
  width: min(380px, 92vw); max-height: min(70vh, 620px);
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: 14px;
  background: #0B1020; color: #E6ECFB;
  border: 1px solid #223055;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
  font-size: 13px; overflow: hidden;
}
.pga-panel[hidden] { display: none; }
.pga-hlava { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pga-nadpis { font-weight: 700; letter-spacing: .02em; flex: 1; }
.pga-kruh {
  width: 12px; height: 12px; border-radius: 50%;
  background: #4C7DFF; flex: 0 0 auto;
}
.pga-kruh[data-stav="posloucham"] { background: #C8FF3D; animation: pga-puls 1.1s infinite; }
.pga-kruh[data-stav="premyslim"]  { background: #4C7DFF; animation: pga-puls .7s infinite; }
.pga-kruh[data-stav="mluvim"]     { background: #C8FF3D; }
@keyframes pga-puls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.pga-prepinac {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: #9FB0D8; cursor: pointer;
}
.pga-zavrit {
  background: none; border: none; color: #9FB0D8; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 2px 4px;
}
.pga-zavrit:hover { color: #E6ECFB; }
.pga-prepis {
  color: #9FB0D8; font-style: italic;
  flex: 0 0 auto; min-height: 0; max-height: 4.5em; overflow-y: auto;
}
.pga-prepis:empty { display: none; }
/* Odpověď je jediná část, která smí růst — a když přeroste, roluje
   SAMA, ne panel. Bez `min-height:0` by flex položku nešlo smrsknout
   pod obsah a formulář by vypadl ven z panelu. */
.pga-odpoved {
  line-height: 1.45;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
.pga-odpoved:empty { display: none; }
.pga-karty {
  display: flex; flex-direction: column; gap: 6px;
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
}
.pga-karta {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 9px;
  background: #131C33; border: 1px solid #223055;
}
.pga-karta-text { flex: 1; min-width: 0; }
.pga-karta-titulek { font-weight: 600; }
.pga-karta-podtitul { color: #9FB0D8; font-size: 11px; }
.pga-karta-titulek, .pga-karta-podtitul {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pga-karta-otevrit {
  flex: 0 0 auto; padding: 5px 10px; border-radius: 7px;
  /* Tmavší odstín akcentu: bílý text na #4C7DFF má jen 3,69:1, tedy pod
     hranicí 4,5:1 pro text. #3560D8 má 5,50:1 a je pořád tentýž modrý
     rod. Akcent #4C7DFF zůstává tam, kde je to GRAFIKA (kruh stavu). */
  background: #3560D8; color: #FFFFFF; border: none;
  font-size: 11px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.pga-napoveda {
  color: #9FB0D8; font-size: 11px; line-height: 1.4;
  flex: 0 0 auto; min-height: 0;
}
.pga-napoveda[hidden] { display: none; }
.pga-chyba { color: #FFB4A8; }
.pga-radek { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.pga-mikrofon, .pga-odeslat {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid #223055; background: #131C33; color: #E6ECFB;
  cursor: pointer; font-size: 14px; line-height: 1;
}
.pga-mikrofon[hidden] { display: none; }
/* Držím a mluvím — potvrzovací lime s TMAVÝM textem (světlý by na něm
   měl 1,3:1). */
.pga-mikrofon.pga-drzim {
  background: #C8FF3D; color: #2D1B69; border-color: #C8FF3D;
}
.pga-odeslat { background: #3560D8; border-color: #3560D8; color: #FFFFFF; }
.pga-odeslat:disabled { opacity: .5; cursor: default; }
.pga-pole {
  flex: 1; min-width: 0; height: 34px; padding: 0 10px;
  border-radius: 9px; border: 1px solid #223055;
  background: #131C33; color: #E6ECFB; font-size: 13px;
}
.pga-pole::placeholder { color: #7A8DBD; }   /* 5,13:1 na #131C33 (#6C7FAE měl 4,26:1) */

/* ── Telefon (≤480 px) ──
   Spodní list přes celou šířku. Spodní hrana MUSÍ počítat s výřezem,
   jinak ➤ podjede pod domovský proužek iPhonu. Pole 16px, jinak iOS
   při zaostření zazoomuje celou stránku. */
@media (max-width: 480px) {
  .pga-panel {
    right: 0; bottom: 0; left: 0;
    width: 100vw; max-width: 100vw; max-height: 78vh;
    border-radius: 14px 14px 0 0;
    padding-bottom: calc(14px + var(--safe-bottom));
  }
  .pga-pole { font-size: 16px; height: 40px; }
  .pga-mikrofon, .pga-odeslat { width: 40px; height: 40px; }
}