/* Designový systém 88 Leads (E1-B1) — sdílené komponenty a prvky.
   E1-C (29. 9. 2026): vzhled prvků podle 07-UI-PRINCIPY §14 (dnešní značka, menší a sjednocená).
   Barvy jen z tokenů, pohyb ≤ 200 ms (výjimka smyčka .kostra), stín jen u plovoucích prvků. */

/* ── Klikatelnost (P22): jednotné najetí a zaměření ─────────── */
[data-entita],
[data-akce] {
  cursor: pointer;
  transition: background var(--rychle) var(--krivka), color var(--rychle) var(--krivka);
}
a[data-entita] {
  color: inherit;
  text-decoration: none;
  border-radius: var(--r-sm);
}
a[data-entita]:hover {
  color: var(--znacka-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-akce]:hover {
  background: var(--plocha-2);
}
[data-entita]:focus-visible,
[data-akce]:focus-visible,
.tl:focus-visible,
.pole:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* ── Tlačítka (jen CSS třídy) ──────────────────────────────── */
.tl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--m-2);
  height: var(--vyska-tlacitka);
  padding: 0 var(--m-4);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--plocha);
  color: var(--text);
  font: 500 var(--fs-13)/1 var(--pismo-text), system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--rychle) var(--krivka), filter var(--rychle) var(--krivka), transform 100ms var(--krivka);
}
.tl:active { transform: scale(.96); }
.tl[disabled], .tl[aria-disabled="true"] { color: var(--text-vypnuty); cursor: not-allowed; }
.tl--hlavni { background: var(--znacka-jasna); color: var(--text); }
.tl--hlavni:hover { filter: brightness(.94); } /* o odstín tmavší, bez nové barvy */
.tl--obrys { border-color: var(--linka-silna); }
.tl--obrys:hover { background: var(--plocha-2); }
.tl--text { background: transparent; }
.tl--text:hover { background: var(--plocha-3); }
.tl--nebezpecne { background: transparent; color: var(--chyba); }
.tl--nebezpecne:hover { background: var(--stav-nekontaktovat-bg); }
.tl--plus {
  width: var(--vyska-tlacitka);
  padding: 0;
  border-radius: 10px;
  background: var(--text);
  color: var(--plocha);
}
.tl--plus:hover { background: var(--text-2); }
/* „Přidat +": černý čtverec 32 px, rádius 10 px, bílé „+" (E1-C) */
.tl-pridat {
  display: inline-grid;
  place-items: center;
  width: var(--vyska-tlacitka);
  height: var(--vyska-tlacitka);
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--text);
  color: var(--plocha);
  font: 500 var(--fs-16)/1 var(--pismo-text), system-ui, sans-serif;
  cursor: pointer;
  transition: background var(--rychle) var(--krivka), transform 100ms var(--krivka);
}
.tl-pridat:hover { background: var(--text-2); }
.tl-pridat:active { transform: scale(.96); }
.tl-pridat:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* ── Pole ──────────────────────────────────────────────────── */
.pole {
  height: var(--vyska-tlacitka);
  padding: 0 var(--m-3);
  border: 1px solid var(--linka-silna);
  border-radius: var(--r-md);
  background: var(--plocha);
  color: var(--text);
  font: 400 var(--fs-13)/1.2 var(--pismo-text), system-ui, sans-serif;
  transition: border-color var(--rychle) var(--krivka);
}
.pole::placeholder { color: var(--text-3); }
.pole:hover { border-color: var(--text-3); }
.pole:focus { border-color: var(--text); }
textarea.pole { height: auto; padding: var(--m-2) var(--m-3); line-height: var(--lh-13); }

/* ── Panel (bez karty v kartě, stín jen u plovoucích prvků) ─── */
.panel {
  background: var(--plocha);
  border: 1px solid var(--linka);
  border-radius: var(--r-karta);
  padding: var(--m-4);
  box-shadow: none;
}
.panel__nadpis {
  display: flex;
  align-items: center;
  gap: var(--m-2);
  margin: 0 0 var(--m-3);
  font: 600 var(--fs-16)/var(--lh-16) var(--pismo-nadpis), var(--pismo-text), sans-serif;
}
.panel__nadpis icon-88 { width: 16px; height: 16px; color: var(--znacka); }
.panel__nadpis .panel__pocet { margin-left: auto; color: var(--text-2); font: 400 var(--fs-12)/1 var(--pismo-text), system-ui, sans-serif; }

/* ── Čip filtru: bílá pilulka 28 px; nastavený = černá s hodnotou v zelené a křížkem ── */
.cip {
  display: inline-flex;
  align-items: center;
  gap: var(--m-1);
  height: 28px;
  padding: 0 var(--m-3);
  border: 1px solid var(--linka-silna);
  border-radius: var(--r-pill);
  background: var(--plocha);
  color: var(--text);
  font: 500 var(--fs-13)/1 var(--pismo-text), system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--rychle) var(--krivka);
}
.cip:hover { background: var(--plocha-2); }
.cip:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.cip.je-nastaveny { border-color: var(--text); background: var(--text); color: var(--plocha); }
.cip.je-nastaveny:hover { background: var(--text); filter: brightness(1.2); }
.cip__hodnota { color: var(--znacka-jasna); } /* zelená jen na černém, nikdy na bílé */
.cip__krizek { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--plocha); }

/* ── Avatar a monogram ─────────────────────────────────────── */
.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--znacka-soft), var(--znacka-jasna));
  color: var(--text);
  font: 600 var(--fs-11)/1 var(--pismo-text), system-ui, sans-serif;
}
.avatar--menu { width: 32px; height: 32px; border-radius: 10px; }
.monogram {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--text);
  color: var(--znacka-jasna);
  font: 600 var(--fs-16)/1 var(--pismo-nadpis), var(--pismo-text), sans-serif;
}

/* ── Řádek tabulky: 36 px, bez zebry ───────────────────────── */
.radek {
  display: flex;
  align-items: center;
  gap: var(--m-3);
  height: var(--vyska-radku);
  padding: 0 var(--m-3);
  border-bottom: 1px solid var(--linka);
  background: var(--plocha);
  font-size: var(--fs-13);
  transition: background var(--rychle) var(--krivka);
}
.radek--hlavicka { color: var(--text-2); font-size: var(--fs-12); font-weight: 500; }
.radek:hover { background: var(--plocha-2); }
.radek--hlavicka:hover { background: var(--plocha); }
.radek.je-vybrany { background: var(--znacka-soft); box-shadow: inset 3px 0 0 var(--znacka); }

/* ── Nájezd panelu: 160 ms, posun 8 px + průhlednost, další o 40 ms později ── */
.najezd { animation: najezd-vstup 160ms var(--krivka) backwards; }
.najezd:nth-child(2) { animation-delay: 40ms; }
.najezd:nth-child(3) { animation-delay: 80ms; }
.najezd:nth-child(n+4) { animation-delay: 120ms; }
@keyframes najezd-vstup {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ── Štítky: fáze, segment, domluva ────────────────────────── */
.stitek-stavu {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* tečka 6 px + mezera 6 px */
  height: 20px;
  padding: 0 var(--m-2);
  border-radius: var(--r-pill);
  background: var(--plocha-3);
  color: var(--text-2);
  font: 500 var(--fs-12)/1 var(--pismo-text), system-ui, sans-serif;
  white-space: nowrap;
}
.stitek-stavu::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: currentColor;
}
.stitek-stavu--stav-novy-lead { background: var(--stav-novy-lead-bg); color: var(--stav-novy-lead); }
.stitek-stavu--stav-otevrel { background: var(--stav-otevrel-bg); color: var(--stav-otevrel); }
.stitek-stavu--stav-canvas { background: var(--stav-canvas-bg); color: var(--stav-canvas); }
.stitek-stavu--stav-google-meet { background: var(--stav-google-meet-bg); color: var(--stav-google-meet); }
.stitek-stavu--stav-schuzka-demo { background: var(--stav-schuzka-demo-bg); color: var(--stav-schuzka-demo); }
.stitek-stavu--stav-platba { background: var(--stav-platba-bg); color: var(--stav-platba); }
.stitek-stavu--stav-makame { background: var(--stav-makame-bg); color: var(--stav-makame); }
.stitek-stavu--stav-predavame { background: var(--stav-predavame-bg); color: var(--stav-predavame); }
.stitek-stavu--stav-nekontaktovat { background: var(--stav-nekontaktovat-bg); color: var(--stav-nekontaktovat); }
.stitek-segmentu--ztraceny { background: var(--segment-ztraceny-bg); color: var(--segment-ztraceny); }
.stitek-segmentu--klient { background: var(--segment-klient-bg); color: var(--segment-klient); }
.stitek-segmentu--otevreny { background: var(--plocha-3); color: var(--text-2); }
.stitek-domluva--pevna { background: var(--domluva-pevna-bg); color: var(--domluva-pevna); }
.stitek-domluva--navrzena { background: var(--domluva-navrzena-bg); color: var(--domluva-navrzena); }
.stitek-domluva--zrusena { background: var(--domluva-zrusena-bg); color: var(--domluva-zrusena); }

/* ── Popover (plovoucí, ukotvený pod spouštěčem) ───────────── */
.popover {
  position: fixed;
  z-index: 1000;
  min-width: 200px;
  max-width: 360px;
  max-height: 70vh;
  overflow: auto;
  padding: var(--m-2);
  background: var(--plocha);
  border: 1px solid var(--linka);
  border-radius: var(--r-lg);
  box-shadow: var(--stin-2);
  font-size: var(--fs-13);
  animation: popover-vstup var(--rychle) var(--krivka);
}
@keyframes popover-vstup {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.popover__polozka {
  display: flex;
  align-items: center;
  gap: var(--m-2);
  width: 100%;
  min-height: var(--vyska-radku-husta);
  padding: 0 var(--m-3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font: 500 var(--fs-13)/1.2 var(--pismo-text), system-ui, sans-serif;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.popover__polozka:hover,
.popover__polozka:focus-visible { background: var(--plocha-3); }
.popover__polozka[aria-current="page"] { background: var(--plocha-3); font-weight: 600; }
.popover__oddelovac { height: 1px; margin: var(--m-1) 0; background: var(--linka); }
.popover__hlavicka { padding: var(--m-2) var(--m-3); color: var(--text-2); font-size: var(--fs-12); }

/* ── Toast ─────────────────────────────────────────────────── */
.toasty {
  position: fixed;
  left: 50%;
  bottom: var(--m-6);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: var(--m-2);
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--m-3);
  min-height: 40px;
  padding: var(--m-2) var(--m-4);
  border-radius: var(--r-lg);
  background: var(--text);
  color: var(--plocha);
  box-shadow: var(--stin-2);
  font-size: var(--fs-13);
  pointer-events: auto;
  animation: toast-vstup 160ms var(--krivka);
}
/* Starý toast z api.js (`body > .toast`, svítí jen s `.on`) je zhasnutý jen průhledný; `pointer-events: auto` výš by ho
   nechal chytat kliky vpravo dole — v celoobrazovkovém kompozeru přes Odeslat (e2e pády 8. 10., email-compose). */
body > .toast:not(.on) {
  pointer-events: none;
}
@keyframes toast-vstup {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.toast--uspech { border-left: 4px solid var(--znacka-jasna); }
.toast--chyba { border-left: 4px solid var(--chyba); }
.toast--info { border-left: 4px solid var(--info); }
.toast__vratit {
  padding: 0 var(--m-2);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--znacka-jasna);
  font: 600 var(--fs-13)/var(--vyska-tlacitka) var(--pismo-text), system-ui, sans-serif;
  cursor: pointer;
}
.toast__vratit:hover { text-decoration: underline; }
.toast__vratit:focus-visible { outline: 2px solid var(--plocha); outline-offset: 2px; }

/* ── Prázdný, načítací a chybový stav ──────────────────────── */
.prazdny-stav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--m-3);
  padding: var(--m-8) var(--m-4);
  color: var(--text-2);
  text-align: center;
}
.prazdny-stav__ikona {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  background: var(--plocha-3);
  color: var(--text-2);
}
.prazdny-stav__ikona icon-88 { width: 24px; height: 24px; }
.prazdny-stav__text { margin: 0; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); }
.prazdny-stav--chyba .prazdny-stav__ikona { background: var(--stav-nekontaktovat-bg); color: var(--chyba); }
.kostra { display: flex; flex-direction: column; gap: var(--m-2); padding: var(--m-4); }
.kostra__radek {
  height: var(--vyska-radku);
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--plocha-3) 0%, var(--plocha-2) 50%, var(--plocha-3) 100%);
  background-size: 200% 100%;
  animation: kostra-prelivani 1.2s linear infinite;
}
@keyframes kostra-prelivani {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ── Telefon: větší klikací cíle ───────────────────────────── */
@media (max-width: 767.98px) {
  .tl, .pole { height: 44px; }
  .tl--plus, .tl-pridat { width: 44px; height: 44px; }
  .popover__polozka { min-height: 44px; }
  .toasty { left: var(--m-4); right: var(--m-4); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .popover, .toast, .najezd { animation: none; }
  .kostra__radek { animation: none; }
  .tl:active { transform: none; }
}