:root {
  /* "Paleta konstrukce" (2a) – jednotný barevný systém pro interní appky
     (nástroje, finance, péče), zavedený 2026-09-12. Hodnoty jsou stejné
     v denním i nočním režimu, mění se jen to, k čemu se který tón váže
     (viz sémantické proměnné níže). Games a pilar tenhle systém nepoužívají
     – tam zůstává původní oranžový akcent podle brand guidelines. */
  --tg-fog: #f2f2f0;
  --tg-cement: #dcdcd8;
  --tg-mist: #9aa3b0;
  --tg-slate: #2c3038;
  --tg-ink: #141619;
  --tg-accent: #3e6c9b;
  --tg-accent-light: #79a9db;

  --paper: var(--tg-fog);
  --surface: #ffffff;
  --border: var(--tg-cement);
  --text: var(--tg-slate);
  /* Mist má podle vlastní specifikace jen 2.3:1 kontrast a je určený "na
     tmavém" – jako muted text na světlém pozadí (Fog/bílá) byl špatně čitelný
     (ověřeno vizuálně 2026-09-12). Muted tón proto mícháme ze dvou barev
     palety (Slate + Fog), ne z Mist – zůstává to v rámci "palety konstrukce",
     jen odvozené, a dává to čitelnější, ale pořád znatelně tlumenější text
     než --text. Mist se v denním režimu používá jen pro ikony/rámečky
     (--border-strong), ne pro text. */
  --text-muted: color-mix(in srgb, var(--tg-slate) 65%, var(--tg-fog) 35%);
  --heading: var(--tg-ink);
  --accent: var(--tg-accent);
  --accent-ink: #ffffff;
  --pending: #b8720f;
  --pending-bg: #fbeed9;
  /* Samostatný tón pro příznak "Nedovoláno" – dřív sdílel barvu se
     "--pending" ("Čeká na obvolání"), což byly vizuálně nerozeznatelné
     odstíny stejné oranžové a operátorky si je pletly. */
  --unreached: #c1440e;
  --unreached-bg: #fbe3d4;
  --called: #6f6d68;
  --called-bg: #eeece7;
  --done: #2f7a4f;
  --done-bg: #e3f1e7;
  --danger: #b3261e;
  --callback: #e0722a; /* "Zapsat hovor" – zákazník volal zpět */
  --callback-ink: #ffffff;
  --shadow: 0 1px 2px rgba(20, 18, 12, 0.04), 0 6px 16px rgba(20, 18, 12, 0.04);
  --call: #1f8a4c;
  --call-ink: #ffffff;
  --radius: 3px;
  /* Silnější, viditelnější okraj pro interaktivní prvky (vstupy, tlačítka) –
     --border samotné je určené pro jemné oddělovače, na formuláře/tlačítka
     bylo příliš slabé a appka pak působila nekontrastně. */
  --border-strong: var(--tg-mist);
  /* Topbar a sidebar ("chrome" appky) mají vlastní, o něco tlumenější paletu
     než hlavní obsah – podle brandového vzoru tallguys.cz (světle šedé
     kategorie-boxy s tenkým okrajem, ne plná černá). V denním režimu jde
     o světlou šedou, v nočním o tmavou šedou (viz níže) – nikdy o čistou
     černou/bílou, aby to nebylo zbytečně kontrastní. */
  --chrome-bg: var(--tg-fog);
  --chrome-bg-soft: var(--tg-cement);
  --chrome-border: var(--tg-cement);
  --chrome-text: var(--tg-slate);
  --chrome-text-muted: color-mix(in srgb, var(--tg-slate) 65%, var(--tg-fog) 35%);
  --chrome-accent: var(--tg-accent);
  /* Tooltip bublina (viz .tooltip-bubble) je vždy tmavá, i v denním režimu –
     stejně jako u SupportBoxu, se kterým appku používáme dohromady. */
  --tooltip-bg: #21252f;
  --tooltip-text: #f3f4f8;
  /* Jednotná rychlost pro fade-in/out na hoverech a tlačítkách napříč appkou. */
  --fade: 0.12s ease;
  /* Kategoriální barvy grafů v Analytice (pevné pořadí, ověřené na
     rozlišitelnost i při barvosleposti – viz CHART_CAT v app.js). */
  --cat-1: #2a78d6;
  --cat-2: #eb6834;
  --cat-3: #1baf7a;
  --cat-4: #eda100;
  --cat-5: #e87ba4;
  --cat-6: #008300;
}

/* Noční paleta: aplikuje se buď automaticky přes prefers-color-scheme (než
   se stihne spustit JS), nebo explicitně přes [data-theme], který nastavuje
   setupThemeScheduler() v app.js podle stejného systémového nastavení
   (macOS/Windows/atd.) a živě reaguje na jeho přepnutí. Stejná "paleta
   konstrukce" jako v denním režimu, jen s obráceným použitím tónů (Ink jako
   podklad, Fog jako nadpisy, Blue Gray 400 jako akcent) – viz brand
   guidelines poznámka 2026-09-12. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: var(--tg-ink);
    --surface: var(--tg-slate);
    --border: var(--tg-slate);
    --text: var(--tg-mist);
    --text-muted: var(--tg-mist);
    --heading: var(--tg-fog);
    --accent: var(--tg-accent-light);
    --accent-ink: var(--tg-ink);
    --pending: #f0c15f;
    --pending-bg: #2a2312;
    --unreached: #ff9a5c;
    --unreached-bg: #3a2113;
    --called: #9195a8;
    --called-bg: #1f2330;
    --done: #62c98a;
    --done-bg: #142520;
    --danger: #e5675f;
    --callback: #f0913f;
    --callback-ink: #1b1209;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
    --call: #2fa863;
    --call-ink: #08150d;
    --border-strong: var(--tg-mist);
    --chrome-bg: var(--tg-ink);
    --chrome-bg-soft: var(--tg-slate);
    --chrome-border: var(--tg-slate);
    --chrome-text: var(--tg-fog);
    --chrome-text-muted: var(--tg-mist);
    --chrome-accent: var(--tg-accent-light);
    --tooltip-bg: #2a2f3d;
    --tooltip-text: #f3f4f8;
    --cat-1: #4f95e8;
    --cat-2: #e06a30;
    --cat-3: #1ba878;
    --cat-4: #bb8600;
    --cat-5: #d070a0;
    --cat-6: #2f9a2f;
  }
}

:root[data-theme="dark"] {
  --paper: var(--tg-ink);
  --surface: var(--tg-slate);
  --border: var(--tg-slate);
  --text: var(--tg-mist);
  --text-muted: var(--tg-mist);
  --heading: var(--tg-fog);
  --accent: var(--tg-accent-light);
  --accent-ink: var(--tg-ink);
  --pending: #f0c15f;
  --pending-bg: #2a2312;
  --unreached: #ff9a5c;
  --unreached-bg: #3a2113;
  --called: #9195a8;
  --called-bg: #1f2330;
  --done: #62c98a;
  --done-bg: #142520;
  --danger: #e5675f;
  --callback: #f0913f;
  --callback-ink: #1b1209;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
  --call: #2fa863;
  --call-ink: #08150d;
  --border-strong: var(--tg-mist);
  --chrome-bg: var(--tg-ink);
  --chrome-bg-soft: var(--tg-slate);
  --chrome-border: var(--tg-slate);
  --chrome-text: var(--tg-fog);
  --chrome-text-muted: var(--tg-mist);
  --chrome-accent: var(--tg-accent-light);
  --tooltip-bg: #2a2f3d;
  --tooltip-text: #f3f4f8;
  --cat-1: #4f95e8;
  --cat-2: #e06a30;
  --cat-3: #1ba878;
  --cat-4: #bb8600;
  --cat-5: #d070a0;
  --cat-6: #2f9a2f;
}

* { box-sizing: border-box; }

/* Bez tohoto pravidla by libovolné "display" v naší CSS (i na jiném prvku se
   stejnou třídou) mohlo přebít nativní [hidden] chování při stejné specificitě
   (viz dřívější bug s .back-link) – toto je obecná pojistka pro celou appku. */
[hidden] { display: none !important; }

/* Plynulé fade na všech hoverech/tlačítkách napříč appkou – konkrétní
   komponenty si mohou transition přepsat/rozšířit, tohle je jen výchozí
   základ, aby nic nepůsobilo "cvaknutím" beze změny. */
button, a, input, select, textarea, .nav-item, .card, .search-result-item,
.settings-dropdown-item, .log-undo-btn, .question-card, .script-node-card,
.role-badge, .status-pill {
  transition: background-color var(--fade), border-color var(--fade), color var(--fade),
    opacity var(--fade), box-shadow var(--fade), transform var(--fade);
}

/* Tooltip bublina pro data-tooltip="..." – místo nativního title (má OS
   delay ~1 s než se ukáže) se objeví prakticky okamžitě a plynule odfadeuje. */
[data-tooltip] { position: relative; }

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  padding: 6px 10px;
  border-radius: var(--radius);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  width: max-content;
  max-width: 240px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.08s ease, transform 0.08s ease;
  transition-delay: 0s;
  z-index: 60;
}

[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--tooltip-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.08s ease;
  z-index: 60;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Tablet a mobil: skrytá (průhledná) bublina u pravého okraje by jinak
   roztahovala .content do strany – stránka pak scrollovala vodorovně.
   Bublina se tu vykreslí, jen když je vidět (klepnutí = :hover/:focus). */
@media (max-width: 1024px) {
  [data-tooltip]::after,
  [data-tooltip]::before { display: none; }
  [data-tooltip]::after { max-width: min(240px, calc(100vw - 24px)); }
  [data-tooltip]:hover::after,
  [data-tooltip]:hover::before,
  [data-tooltip]:focus-visible::after,
  [data-tooltip]:focus-visible::before { display: block; }
}

/* V horní liště by bublina nad prvkem vyjela mimo viewport (prvek je hned
   pod horním okrajem) – tam ji proto vykreslíme pod prvkem. */
.topbar [data-tooltip]::after {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-3px);
}

.topbar [data-tooltip]::before {
  bottom: auto;
  top: calc(100% + 3px);
  border-top-color: transparent;
  border-bottom-color: var(--tooltip-bg);
}

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* #appRoot obaluje topbar+shell (kvůli přihlašovací obrazovce) – bez těchto
   pravidel není #appRoot skutečný flex kontejner, .shell uvnitř se pak
   nenatáhne na výšku okna a na stránkách s kratším obsahem (Uživatelé,
   Otázky) sidebar nedoléhá až dolů. */
#appRoot {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Nad 1500px necháváme appku v čitelné šířce a nenatahujeme ji přes celý
   ultra-široký monitor – zbytek plochy zůstává prázdný po stranách. */
@media (min-width: 2000px) {
  #appRoot {
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
  }
}

h1, h2, h3, button, input {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Paleta konstrukce: nadpisy mají vlastní (nejtmavší/nejsvětlejší) tón,
   odlišný od běžného textu (--text) – Ink v denním režimu, Fog v nočním. */
h1, h2, h3 {
  color: var(--heading);
}

/* Top bar */

.topbar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 24px;
  background: var(--chrome-bg);
  border-bottom: 1px solid var(--chrome-border);
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* #brandLink je <a> (odkaz zpět na dashboard Nástroje) – login obrazovka
   používá stejnou .brand třídu na obyčejném <div>, ten zůstává neklikatelný. */
#brandLink {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  /* Logo-značka je vždy tmavý čtverec s bílým "TG" bez ohledu na denní/noční
     režim chromu – stejně jako skutečné brandové logo TallGuys. */
  background: #18181b;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.brand-text strong {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--chrome-text);
}

.brand-text span {
  font-size: 11.5px;
  color: var(--chrome-text-muted);
}

.global-search {
  position: relative;
  flex: 1;
  max-width: 480px;
}

.global-search input {
  width: 100%;
  padding: 10px 38px 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
}

.global-search input::placeholder { color: var(--text-muted); }
.global-search input:focus { outline: none; border-color: var(--chrome-accent); }

.search-btn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
}

.search-btn:hover { color: var(--chrome-accent); }

/* Zavírací × rozbaleného hledání – jen na mobilu (viz níž a setupSearch()). */
.search-close { display: none; }

/* Mobil (2026-11-02): lišta musí zůstat na 1 řádku – hledání je sbalené do
   lupy a po klepnutí se rozbalí přes celou lištu (třída .is-open, setupSearch()). */
@media (max-width: 640px) {
  .global-search { flex: 0 0 auto; max-width: none; }
  .global-search input { display: none; font-size: 16px; }
  .search-btn {
    position: static;
    width: 40px;
    height: 40px;
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius);
    color: var(--chrome-text);
  }
  .global-search.is-open {
    position: absolute;
    top: 8px;
    left: 10px;
    right: 10px;
    z-index: 460;
  }
  .global-search.is-open input { display: block; height: 40px; padding-right: 84px; }
  .global-search.is-open .search-btn { position: absolute; top: 0; right: 40px; border: none; }
  .global-search.is-open .search-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
}

.refresh-btn {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid var(--chrome-border);
  color: var(--chrome-text);
  padding: 9px 14px;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.refresh-btn:hover { background: var(--chrome-bg-soft); border-color: var(--chrome-text-muted); }
.refresh-btn:disabled { opacity: 0.6; cursor: default; }

/* Tablet a mobil: „Aktualizovat data“ jen jako ikona – řeší sdílený tg-topbar.css (fáze 3, 2026-11-02). */

.icon-toggle-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--chrome-border);
  color: var(--chrome-text);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.icon-toggle-btn:hover { background: var(--chrome-bg-soft); border-color: var(--chrome-text-muted); }

.settings-menu { position: relative; flex-shrink: 0; }
.settings-menu #settingsMenuBtn { margin-left: 0; }

.settings-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 200px;
  overflow: hidden;
  z-index: 30;
}

.settings-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.settings-dropdown-item:last-child { border-bottom: none; }
.settings-dropdown-item:hover { background: var(--paper); }
.settings-dropdown-item.active { color: var(--accent); font-weight: 700; }

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-height: 360px;
  overflow-y: auto;
  z-index: 20;
}

.search-result-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
}

.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--paper); }
.search-result-item span { color: var(--text-muted); font-size: 12px; }

/* Shell layout */

.shell {
  display: flex;
  flex: 1;
  min-height: 0; /* nutné, aby potomci s overflow-y mohli scrollovat nezávisle na sobě */
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
  overflow-y: auto;
  background: var(--chrome-bg);
  border-right: 1px solid var(--chrome-border);
  color: var(--chrome-text);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
}

/* Přepínač menu (fronty + sekce) – jen na mobilu, kde se sidebar sbalí do
   jednoho řádku s názvem otevřené fronty/sekce (viz setupSidebarToggle()). */
.sidebar-toggle { display: none; }

@media (max-width: 640px) {
  .sidebar {
    width: 100%;
    max-height: 70dvh;
    padding: 8px 12px;
    border-right: none;
    border-bottom: 1px solid var(--chrome-border);
  }
  .sidebar:not(.is-open) > :not(.sidebar-toggle) { display: none; }
  .sidebar.is-open { gap: 10px; }
  .sidebar-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    flex-shrink: 0;
    background: var(--chrome-bg-soft);
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius);
    color: var(--chrome-text);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .sidebar.is-open .sidebar-toggle { position: sticky; top: 0; z-index: 1; }
  .sidebar-toggle-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-toggle .count { font-size: 11.5px; color: var(--accent-ink); background: var(--chrome-accent); border-radius: var(--radius); padding: 1px 8px; white-space: nowrap; }
  .sidebar-toggle-caret { font-size: 12px; color: var(--chrome-text-muted); transition: transform var(--fade); }
  .sidebar.is-open .sidebar-toggle-caret { transform: rotate(180deg); }
}

.segment-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  border: none;
  border-left: 3px solid transparent;
  background: none;
  color: var(--chrome-text-muted);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.nav-item:hover { background: var(--chrome-bg-soft); color: var(--chrome-text); }

/* Dotyk: položky menu aspoň 40 px na výšku (MOBILE_STANDARDS 7). */
@media (pointer: coarse) {
  .nav-item { min-height: 40px; }
}

.nav-item.active {
  background: var(--chrome-bg-soft);
  border-left-color: var(--chrome-accent);
  color: var(--chrome-text);
  font-weight: 600;
}

.nav-item .count {
  font-size: 11.5px;
  color: var(--chrome-text-muted);
  background: color-mix(in srgb, var(--chrome-text) 8%, transparent);
  border-radius: var(--radius);
  padding: 1px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-item.active .count { color: var(--accent-ink); background: var(--chrome-accent); }

/* Sbalitelná skupina front v sidebaru (viz Nastavení → Rozložení) – jen
   vizuální složka, každá fronta uvnitř zůstává vlastní samostatnou položkou.
   Název skupiny je záměrně menší a barevně odlišený od front samotných (ne
   plnohodnotné tlačítko jako .nav-item), ať je hned vidět, že jde jen o
   organizační nadpis, ne o další frontu. */
.nav-item.nav-group-header {
  width: 100%;
  padding: 5px 10px;
  border-left: none;
  border-radius: var(--radius);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--chrome-accent);
  color: #fff;
}
.nav-item.nav-group-header:hover { background: var(--chrome-accent); color: #fff; opacity: 0.9; }
.nav-item.nav-group-header .count {
  font-size: 10px;
  font-weight: 700;
  background: none;
  color: #fff;
  padding: 0;
}
.nav-group-members {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 4px;
}

/* Přepínač "Fronta" / "Nedovoláno" nad seznamem zákazníků (viz
   renderSegmentSubTabs() v app.js) – zobrazí se jen u front, které mají
   párovanou "Nedovoláno" variantu (SEGMENT_UNREACHED_CHILD), menu samotné má
   za každou takovou dvojici jen JEDNO tlačítko (viz buildSegmentNavButton()). */
.segment-subtabs {
  display: flex;
  gap: 6px;
  margin: 12px 0 4px;
}
@media (max-width: 640px) {
  .segment-subtabs { flex-wrap: wrap; }
}

.segment-subtab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--chrome-border);
  background: var(--chrome-bg);
  color: var(--chrome-text-muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.segment-subtab:hover { color: var(--chrome-text); }

.segment-subtab.active {
  background: var(--chrome-accent);
  border-color: var(--chrome-accent);
  color: var(--accent-ink);
}

.segment-subtab .count {
  font-size: 11px;
  color: inherit;
  opacity: 0.75;
}

.sidebar-footer {
  border-top: 1px solid var(--chrome-border);
  padding-top: 14px;
  margin-top: auto;
}

.sidebar-footer-heading {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--chrome-text-muted);
  margin: 0 0 10px;
  padding: 0 4px;
}

.badges {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.badge {
  font-size: 11px;
  padding: 6px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--chrome-border);
  color: var(--chrome-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.badge.live { color: var(--done); border-color: color-mix(in srgb, var(--done) 35%, transparent); }
.badge.live::before { background: var(--done); }
.badge.stub::before { background: var(--pending); }

/* Content */

.content {
  /* Horní odsazení – potřebuje ho i plovoucí lišta (.returns-sticky), ať se lepí úplně nahoru. */
  --content-pad-top: 28px;
  flex: 1;
  padding: var(--content-pad-top) 32px 60px;
  min-width: 0;
  overflow-y: auto;
}

.content-header { margin-bottom: 20px; }

.back-link {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 0 8px;
  display: block;
}

.content-header h1 {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.segment-description {
  color: var(--text-muted);
  font-size: 13.5px;
  margin: 0;
}

.scheduled-heading {
  font-size: 15px;
  font-weight: 700;
  margin: 28px 0 12px;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
  padding: 10px 0;
}

.pagination-info { font-size: 12.5px; color: var(--text-muted); }
.pagination button:disabled { opacity: 0.4; cursor: default; }

/* Cards */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  transition: border-color 0.15s ease;
}

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

/* Mobil: jméno a údaje přes celou šířku karty, stav + Otevřít/Volat na
   vlastním řádku pod nimi (jinak se jméno smrsklo na pár písmen). */
@media (max-width: 640px) {
  .card { padding: 12px; gap: 10px; }
  .card-left { flex: 1 1 100%; }
  .card-actions { width: 100%; flex-wrap: wrap; justify-content: space-between; }
}

.card-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-info { min-width: 0; }
.card-info h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; }

.registration-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: var(--radius);
  vertical-align: middle;
}

.registration-badge.registered { color: var(--done); background: var(--done-bg); }
.registration-badge.guest { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 12%, transparent); }

.unreached-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: var(--radius);
  color: var(--unreached);
  background: var(--unreached-bg);
  vertical-align: middle;
  margin-left: 4px;
}

.card-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.card-reason { font-size: 12.5px; color: var(--text-muted); margin-top: 5px; }
.card-reason::before { content: "· "; }

.link-button {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0 0;
  display: block;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  position: relative;
}

.call-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.call-in-progress-note {
  font-size: 11px;
  color: var(--text-muted);
}

.card-skip-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-muted);
  font-size: 11.5px;
  cursor: pointer;
}
.card-skip-link:hover { color: var(--text); text-decoration: underline; }

/* Hovor se zákazníkem mimo tlačítko Volat (volal zpět, zmeškaný příchozí). */
.phone-contact-banner {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--done);
  background: var(--done-bg);
  border-radius: 3px;
  padding: 5px 9px;
  margin-bottom: 6px;
  display: inline-block;
}
.phone-contact-banner.missed {
  color: var(--unreached);
  background: var(--unreached-bg);
}

.card-opened-by-note {
  font-size: 11.5px;
  color: var(--pending);
  font-weight: 600;
}

/* "Naplánované hovory" v menu lehce oddělené od front podle objednávek. */
.nav-item-followup {
  margin-top: 10px;
  position: relative;
}
.nav-item-followup::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: -6px;
  border-top: 1px dashed var(--border);
}

/* Sbalená karta ve frontě (viz "Otevřít" v renderCard()) – záložky a panel
   hovoru se ukážou až po otevření, spolu s tlačítkem Volat + telefon. */
.card-collapsed .detail-tabs-wrap,
.card-collapsed .call-panel { display: none; }
.card-open-btn { min-width: 110px; justify-content: center; text-align: center; }

.linked-emails-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  cursor: help;
  white-space: nowrap;
}
.order-email { color: var(--text-muted); font-size: 12px; }

.card-cancel-in-progress-link { color: var(--danger); }
.card-cancel-in-progress-link:hover { color: var(--danger); text-decoration: underline; }

.status-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: var(--radius);
  white-space: nowrap;
}

/* "Čeká na obvolání" má vlastní modrou (ne sdílenou "--pending" oranžovou) –
   ta je vyhrazená pro "Nedovoláno"/"nezvedl(a)" odznaky, ať se od "čeká na
   obvolání" barevně jasně odliší (byly zaměnitelné, nahlášeno 2026-09-22). */
.status-pill.pending { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.status-pill.called { color: var(--called); background: var(--called-bg); }
.status-pill.done { color: var(--done); background: var(--done-bg); }

button.primary {
  background: var(--call);
  color: var(--call-ink);
  border: none;
  padding: 9px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: transform 0.1s ease, opacity 0.15s ease;
}

button.primary:hover { opacity: 0.92; }
button.primary:active { transform: scale(0.97); }
button.primary:disabled { opacity: 0.6; cursor: default; transform: none; }

/* Sdílené "rozpracováno" napříč operátorkami – viz applyCallButtonState()
   a mark_call_in_progress() na backendu. */
button.primary.call-btn-in-progress:disabled {
  background: var(--accent);
  color: var(--accent-ink);
  opacity: 0.85;
}

.btn-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

button.secondary {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 7px 13px;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

button.secondary:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* "Zapsat hovor" (zákazník volal zpět) – výrazně oranžové, ať se nepřehlédne. */
button.secondary.call-log-only-btn {
  background: var(--callback);
  border-color: var(--callback);
  color: var(--callback-ink);
}
button.secondary.call-log-only-btn:hover {
  background: color-mix(in srgb, var(--callback) 85%, black);
  border-color: color-mix(in srgb, var(--callback) 85%, black);
}

/* Order history */

.order-history {
  width: 100%;
  margin-top: 12px;
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.order-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.order-block-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  flex-wrap: wrap;
}

.order-code { font-weight: 700; }
.order-date,
.order-status { color: var(--text-muted); }
.order-flag { font-size: 14px; }
.order-total { margin-left: auto; font-weight: 700; }

.order-highlights {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}

.order-highlight {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius);
  font-size: 12.5px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.order-highlight strong { font-weight: 700; }
.order-highlight span { font-weight: 600; color: var(--text); }

.highlight-height { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent); }
.highlight-gift { border-color: color-mix(in srgb, var(--pending) 50%, var(--border)); color: var(--pending); }
.highlight-referral { border-color: color-mix(in srgb, var(--done) 45%, var(--border)); color: var(--done); }

.order-items { display: flex; flex-direction: column; }

.order-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.order-item-row:last-child { border-bottom: none; }

.order-item-thumb {
  width: 44px;
  height: 44px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--paper);
}

.order-item-thumb-empty { background: color-mix(in srgb, var(--text-muted) 12%, var(--paper)); }

.order-item-thumb-logo {
  object-fit: contain;
  padding: 7px;
  background: #ffffff;
}

.order-item-info { flex: 1; min-width: 0; }
.order-item-name { font-size: 12.5px; font-weight: 600; }
.order-item-variant { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.order-item-qty { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.order-item-price { font-size: 12.5px; font-weight: 600; flex-shrink: 0; width: 70px; text-align: right; }

/* Call panel */

.call-panel {
  width: 100%;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.survey {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.survey label {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.survey input,
.survey select,
.survey textarea {
  padding: 7px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  font-size: 13px;
  color: var(--text);
  /* --paper (ne --surface, kterou má rodičovská .card) – ať se vstup vizuálně
     odliší od karty i beze spoléhání jen na tenký okraj. */
  background: var(--paper);
  font-family: inherit;
}

.survey input:focus,
.survey select:focus,
.survey textarea:focus { outline: none; border-color: var(--accent); }

/* iOS při fokusu zoomuje pole s písmem pod 16 px – na mobilu proto 16 px. */
@media (max-width: 640px) {
  .survey input,
  .survey select,
  .survey textarea { font-size: 16px; }
}

/* Volná poznámka nad "Dovolal(a) jsem se – uložit" (viz renderCallPanel() v
   app.js) – ukládá se ke KAŽDÉMU výsledku hovoru, i Nezvedl(a)/Přeskočit,
   ne jen k dovolanému hovoru jako dotazník výš. */
.call-note-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.call-note-label { font-size: 12px; color: var(--text-muted); }
.call-note-input {
  padding: 7px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  font-size: 13px;
  color: var(--text);
  background: var(--paper);
  font-family: inherit;
  resize: vertical;
}
.call-note-input:focus { outline: none; border-color: var(--accent); }
@media (max-width: 640px) {
  .call-note-input { font-size: 16px; }
}

/* Trvalé zobrazení uložené poznámky na kartě zákazníka (viz status.note) –
   nad záložkami Objednávky/Retino/…, aby byla vidět i bez otevřeného
   panelu hovoru. */
.customer-note-display {
  font-size: 12.5px;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-top: 8px;
  white-space: pre-wrap;
}

.multiselect-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
}

.multiselect-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

/* Nadpis skupiny front v "Sledovaných frontách" (Analytika) – stejné
   podbarvení jako skupina v sidebaru/Rozložení (viz .nav-item.nav-group-header),
   ať je hned vidět, že jde o stejné seskupení front napříč appkou. */
.multiselect-group-header {
  padding: 4px 10px;
  margin-top: 4px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.multiselect-group-header:first-child { margin-top: 0; }
.multiselect-group-members {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 6px;
}

button.secondary.active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.user-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.outcome-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.call-cancel-btn { margin-left: auto; }

.call-warning-popup {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--pending-bg);
  color: var(--pending);
  font-size: 13px;
  font-weight: 600;
  white-space: normal;
  max-width: 280px;
  box-shadow: var(--shadow);
  z-index: 5;
  pointer-events: none;
  animation: callWarningFade 2s ease forwards;
}

@keyframes callWarningFade {
  0% { opacity: 0; transform: translateY(4px); }
  12% { opacity: 1; transform: translateY(0); }
  82% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}

.snooze-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--pending-bg);
  border-radius: var(--radius);
}

.snooze-error { font-size: 12px; color: var(--danger, #c0392b); margin-top: 6px; }
.snooze-label { font-size: 12px; color: var(--text); font-weight: 600; }

/* Popisek je na vlastním řádku (viz výše) právě proto, že jeho délka se liší
   podle výsledku hovoru ("Nezvedl(a)" vs. "Hlasová schránka" vs. "Odmítl(a)
   hovor") – kdyby byl ve stejné řadě jako tlačítka, posouval by je to vždy
   jinam a tlačítka by neměla stálou pozici. */
.snooze-options {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.snooze-custom {
  width: 110px;
  padding: 6px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  font-size: 12.5px;
}

.call-log {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 8px;
  width: 100%;
  display: block;
}

a.call-log-link { color: var(--accent); font-weight: 600; text-decoration: none; }
a.call-log-link:hover { text-decoration: underline; }

.empty-state {
  color: var(--text-muted);
  font-size: 14px;
  padding: 40px 0;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.empty-state.small { padding: 16px 8px; font-size: 12.5px; border: none; text-align: left; }

/* Right log panel */

.log-panel {
  width: 280px;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: 20px 16px;
  overflow-y: auto;
}

.log-panel h2 { font-size: 14px; font-weight: 800; margin: 0 0 14px; }

.call-log-list { display: flex; flex-direction: column; gap: 10px; }

.log-entry {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 12px;
}

.log-entry-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.log-entry-top strong { font-size: 12.5px; }
.log-time { color: var(--text-muted); flex-shrink: 0; }

.log-entry-queue {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: var(--radius);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  margin-bottom: 5px;
}

.log-outcome {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius);
}

.log-outcome.reached { color: var(--done); background: var(--done-bg); }
.log-outcome.no-answer,
.log-outcome.voicemail,
.log-outcome.declined { color: var(--pending); background: var(--pending-bg); }

.log-entry.undone { opacity: 0.55; }

.log-undo-btn {
  margin-top: 6px;
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: var(--radius);
  cursor: pointer;
}

.log-undo-btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

.log-undone-label { font-size: 11px; color: var(--text-muted); margin-top: 6px; display: block; }
.log-undone-meta { font-style: italic; }

.call-history-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.call-history-note a { color: var(--accent); font-weight: 600; text-decoration: none; }
.call-history-note a:hover { text-decoration: underline; }

.log-note { color: var(--text-muted); margin-top: 4px; }

/* Strukturované odpovědi z dotazníku (viz formatCallAnswersHtml()) – každá
   otázka/odpověď jako vlastní blok místo jednoho splácaného řetězce, ať se
   to dá v klidu přečíst jak ve Výpisu hovorů, tak v postranní Historii
   volání a v detailu zákazníka. */
.call-answers { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.call-answer-row dt { margin: 0; font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.call-answer-row dd { margin: 2px 0 0; }
.call-answers-plain { color: var(--text-muted); display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 1080px) {
  .log-panel { display: none; }
}

/* Mobil: sidebar nad obsahem (sbalený do přepínače, viz .sidebar-toggle),
   obsah scrolluje pod ním. Lišta zůstává v jednom řádku (hledání = lupa). */
@media (max-width: 640px) {
  .shell { flex-direction: column; }
  .content { --content-pad-top: 16px; padding: var(--content-pad-top) 12px 40px; }
}

/* Login */

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--chrome-bg);
}

.login-card {
  width: 320px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow);
}

.login-card label {
  font-size: 12.5px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.login-card input {
  padding: 9px 11px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
}

.login-card input:focus { outline: none; border-color: var(--accent); }
.login-card button.primary { margin-top: 6px; justify-content: center; }

.login-error {
  color: var(--danger);
  font-size: 12.5px;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  padding: 8px 10px;
  border-radius: var(--radius);
}

/* User menu */

.user-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.user-name { font-size: 12.5px; color: var(--chrome-text-muted); }

/* Admin nav */

.admin-nav {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 10px;
  margin-top: 10px;
}

/* Drag-and-drop question builder */

.builder-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.builder-segment-select {
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}

.question-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
}

.question-card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: grab;
}

.question-card:active { cursor: grabbing; }
.question-card.dragging { opacity: 0.35; }

/* Čárka nad/pod prvkem podle polohy kurzoru – jasně ukazuje, kam položka
   po puštění spadne (místo pouhého zvýraznění celé karty). */
.question-card.drag-over-top,
.option-row.drag-over-top { box-shadow: inset 0 2px 0 var(--accent); }
.question-card.drag-over-bottom,
.option-row.drag-over-bottom { box-shadow: inset 0 -2px 0 var(--accent); }

.drag-handle {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  padding-top: 8px;
  user-select: none;
  flex-shrink: 0;
  cursor: grab;
}

/* Dotyková náhrada tažení (HTML5 drag&drop na dotyku nefunguje): šipky
   ↑ ↓ u otázek a možností, „⋯“ menu u Rozložení – jen na zařízeních bez myši. */
.reorder-btns, .layout-row-menu-btn { display: none; }
@media (hover: none) {
  .reorder-btns { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
  .reorder-btns button,
  .layout-row-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 16px;
    cursor: pointer;
  }
  .reorder-btns button:disabled { opacity: 0.35; }
  .option-row .reorder-btns { flex-direction: row; }
  .layout-row-menu-btn { flex-shrink: 0; margin-left: auto; }
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: var(--radius);
  cursor: grab;
}

.option-row:active { cursor: grabbing; }
.option-row.dragging { opacity: 0.35; }
.option-row .drag-handle { padding-top: 0; font-size: 14px; }

.option-row input {
  flex: 1;
  padding: 6px 9px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  font-size: 12.5px;
  background: var(--paper);
  color: var(--text);
}

.option-add-btn { margin-top: 2px; align-self: flex-start; font-size: 12px; }

.question-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.question-fields input[type="text"],
.question-fields select,
.question-fields textarea {
  padding: 7px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  font-size: 13px;
  color: var(--text);
  background: var(--paper);
  width: 100%;
}

.question-row { display: flex; gap: 8px; }
.question-row > * { flex: 1; }

.question-meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--text-muted);
}

.icon-btn-remove {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 13px;
  padding: 6px;
  flex-shrink: 0;
}

.delete-confirm-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-danger-solid {
  background: var(--danger);
  border: 1px solid var(--danger);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.btn-danger-solid:hover { background: color-mix(in srgb, var(--danger) 85%, black); }
.btn-danger-solid:disabled { opacity: 0.6; cursor: default; }

/* Script (branching) builder */

.script-node-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
}

.script-node-card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 14px;
}

.script-node-card.is-start { border-color: var(--accent); border-width: 2px; }
.script-node-card.is-orphan { border-color: var(--danger); border-style: dashed; opacity: 0.85; }

.script-node-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.script-node-header label { display: flex; align-items: center; gap: 5px; }

.script-step-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: var(--radius);
  background: var(--called-bg);
  color: var(--called);
}

.script-step-badge.is-start { background: var(--accent); color: var(--accent-ink); }
.script-step-badge.is-orphan { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }

.script-set-start { margin-left: auto; }

.script-incoming {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding: 4px 8px;
  background: var(--paper);
  border-radius: var(--radius);
}

.script-branches-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 10px;
  margin-bottom: 4px;
}

.script-branch-arrow { color: var(--text-muted); font-size: 13px; flex-shrink: 0; }

.script-orphan-heading { color: var(--danger); }

.script-node-card textarea,
.script-node-title {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  font-size: 13px;
  color: var(--text);
  background: var(--paper);
  font-family: inherit;
}

.script-node-card textarea {
  min-height: 52px;
  resize: vertical;
}

.script-node-title {
  margin-bottom: 8px;
  font-weight: 600;
}

.script-option-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.script-option-row input,
.script-option-row select {
  padding: 6px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  font-size: 12.5px;
  background: var(--paper);
  color: var(--text);
}

.script-option-row input { flex: 1; }
.script-option-row select { width: 180px; }

/* Users admin */

.user-table {
  width: 100%;
  max-width: 640px;
  border-collapse: collapse;
  font-size: 13px;
}

.user-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  padding: 6px 10px 8px 0;
  border-bottom: 1px solid var(--border);
}

.user-table td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border); }

/* Analytika má 8 sloupců – na rozdíl od jednoduchých tabulek (Uživatelé) ať
   využije celou šířku stránky, ne jen 640px z .user-table. */
.analytics-table {
  max-width: none;
}

.analytics-table th,
.analytics-table td {
  padding: 10px 16px 10px 0;
}

.analytics-table th:first-child,
.analytics-table td:first-child {
  padding-left: 2px;
}

.analytics-total-row { font-weight: 700; }

/* Souhrnné dlaždice nahoře Analytiky (viz renderKpiTiles() v app.js) –
   velké číslo + popisek namísto nutnosti číst to z tabulek pod tím. */
.kpi-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
}
.kpi-tile {
  flex: 1 1 150px;
  min-width: 150px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.kpi-tile-value { font-size: 26px; font-weight: 800; color: var(--heading); line-height: 1.15; white-space: nowrap; overflow: hidden; }
.kpi-tile-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-top: 4px; }
.kpi-tile-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
/* Stav stahování e-mailů ze SupportBoxu v Analytice – poslední pokus selhal */
.email-stats-status-error { color: var(--danger); }

.performance-weights-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.performance-weights-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.performance-weights-row input[type="number"] {
  width: 70px;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}

.hint { color: var(--text-muted); font-size: 11px; }

/* Sedm sloupečků (Po–Ne) v buňce "Aktivita v týdnu" – výška pruhu relativní
   k vlastnímu maximu dané operátorky, viz renderWeekdayBars() v app.js. */
.weekday-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
}
.weekday-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 14px;
  height: 100%;
}
.weekday-bar {
  width: 8px;
  min-height: 2px;
  background: var(--accent);
  border-radius: 1px;
  opacity: 0.75;
}
.weekday-bar-label {
  font-size: 8.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* "Výkon v průběhu dne" – sloupcový graf po hodinách (7–17 h, viz
   renderHourlyBars() v app.js). Světlý sloupec = pokusy, tmavší přeložený
   sloupec uvnitř = dovoláno (jedna osa, žádná druhá barva navíc potřeba).
   Pracovní doba (8–14) má jemně zvýrazněný podklad sloupce. */
.hourly-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 14px 10px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  max-width: 640px;
}
.hourly-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  border-radius: var(--radius);
  padding: 4px 2px 6px;
}
.hourly-bar-col.work-hour { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.hourly-bar-stack {
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 26px;
  height: 100px;
}
.hourly-bar-attempts {
  position: relative;
  width: 100%;
  min-height: 0;
  background: color-mix(in srgb, var(--accent) 25%, var(--surface));
  border-radius: 3px 3px 1px 1px;
}
.hourly-bar-reached {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--accent);
  border-radius: 3px 3px 1px 1px;
}
.hourly-bar-stats { font-size: 10.5px; font-weight: 700; color: var(--text); margin-top: 6px; white-space: nowrap; }
.hourly-bar-label { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

/* "Výkon podle dní" / "Výkon v průběhu dne" – přepnutí týdne/dne/měsíce
   nechává starý obsah vidět (jen ztlumený), dokud není nový fetch hotový,
   místo mazání celé stránky a skákání scrollem (viz renderDailyPerformanceSection()
   v app.js, nahlášeno 2026-10-02 videem s viditelným bliknutím). */
.is-loading { opacity: 0.45; pointer-events: none; transition: opacity 0.12s ease; }

/* Analytika: "Sledované fronty" a "Fronty a odpovědnost" vedle sebe. */
.analytics-settings-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.analytics-settings-row > div { flex: 0 1 480px; min-width: 0; }

/* "Výkon podle dní" – kalendářní mřížka místo tabulky (viz
   renderDailyCalendar() v app.js). Sytost pozadí dne odpovídá počtu pokusů
   relativně k nejvytíženějšímu dni ve zvoleném rozsahu (heatmapa), přesný
   rozpis po operátorkách je v title tooltipu buňky. */
.daily-calendar-month-heading {
  font-size: 13px;
  font-weight: 700;
  margin: 16px 0 6px;
  color: var(--text);
}
.daily-calendar-block { margin-bottom: 4px; }
.daily-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 4px;
}
.daily-calendar-weekdays span {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.daily-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.daily-calendar-cell {
  position: relative;
  min-height: 60px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 6px 8px;
  background: var(--surface);
}
.daily-calendar-cell.empty { border-color: transparent; background: transparent; }
.daily-calendar-day-num { font-size: 11.5px; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.daily-calendar-stats { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.daily-calendar-rate { font-size: 11px; color: var(--text-muted); }

/* Státní svátek v "Výkonu podle dní" – appka ten den stejně nevolá (viz
   is_czech_public_holiday() na backendu). */
.daily-calendar-cell-holiday { background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.daily-calendar-holiday-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border-radius: var(--radius);
  padding: 1px 4px;
}

/* Víkend (So/Ne) – diagonální čára zleva dole doprava nahoře, appka ten den
   taky nevolá (stejný důvod jako svátek výš, jen jiná vizuální konvence). */
.daily-calendar-cell-weekend::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 0.75px),
    var(--border-strong) calc(50% - 0.75px),
    var(--border-strong) calc(50% + 0.75px),
    transparent calc(50% + 0.75px)
  );
  pointer-events: none;
}

.analytics-orders-toggle {
  padding: 0;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.analytics-orders-detail td { padding-top: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }

.analytics-orders-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border-radius: var(--radius);
}

.analytics-order-link { color: var(--accent); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.analytics-order-link:hover { text-decoration: underline; }

.analytics-row-delete {
  padding: 0;
  color: var(--danger);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.analytics-row-delete:hover { text-decoration: underline; }

.excluded-row-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.excluded-row-item:last-child { border-bottom: none; }

.new-user-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
  max-width: 640px;
}

.new-user-form input,
.new-user-form select {
  padding: 7px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
}

.role-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius);
}

.role-badge-admin, .role-badge-super_admin { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.role-badge-operator { color: var(--called); background: var(--called-bg); }

.permission-matrix th:nth-child(2),
.permission-matrix th:nth-child(3),
.permission-matrix td:nth-child(2),
.permission-matrix td:nth-child(3) {
  text-align: center;
  width: 100px;
}

.permission-matrix input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
  cursor: help;
  vertical-align: middle;
}

/* Script walker in call panel */

.script-walker {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
}

.script-walker-text { font-size: 13.5px; margin-bottom: 10px; }
.script-walker-options { display: flex; flex-wrap: wrap; gap: 6px; }
.script-walker-path { font-size: 11.5px; color: var(--text-muted); margin-top: 8px; }

/* ---- Potvrzovací modál (stejný vzor jako v Marketingovém plánu) ---- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 16, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 16px;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 420px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal h2 { margin: 0; font-size: 16px; }
.modal p { margin: 0; font-size: 13px; color: var(--text-muted); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* ---- Hovory / Výpis hovorů / Kontakty ---- */

.app-section-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--chrome-border);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}

.panel + .panel { margin-top: 16px; }
@media (max-width: 640px) {
  .panel { padding: 12px; }
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.panel-header h2 { font-size: 15px; font-weight: 700; margin: 0; }
.panel-count { font-size: 13px; font-weight: 700; color: var(--text-muted); }

.panel-search { margin-bottom: 12px; }

.panel-search input {
  width: 100%;
  max-width: 320px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}

.panel-search input:focus { outline: none; border-color: var(--accent); }
@media (max-width: 640px) {
  .panel-search input { max-width: none; font-size: 16px; }
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table tbody tr:last-child td { border-bottom: none; }

/* Tablet a mobil: široká tabulka (Hovory, Výpis hovorů, Kontakty) scrolluje
   do strany jen sama v sobě, ne celá stránka. */
@media (max-width: 1024px) {
  .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

.data-table .table-empty td {
  text-align: center;
  color: var(--text-muted);
  padding: 28px 0;
  white-space: normal;
}

.table-row-clickable { cursor: pointer; }
.table-row-clickable:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }

.call-log-table .call-log-note-cell {
  white-space: normal;
  max-width: 420px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.call-log-table td.table-row-clickable {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  background: none;
}
.call-log-table td.table-row-clickable:hover { text-decoration: underline; }
.call-log-row-undone { opacity: 0.55; }

.calls-dashboard {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.calls-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.calls-stats {
  width: 260px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}

.calls-stats h2 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }

.calls-stat {
  text-align: center;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border);
}

.calls-stat:last-child { border-bottom: none; }

/* Tablet a mobil: Statistika operátora pod tabulkami (vedle nich se nevejde). */
@media (max-width: 1024px) {
  .calls-dashboard { flex-direction: column; align-items: stretch; }
  .calls-stats { width: auto; }
}
.calls-stat-value { display: block; font-size: 22px; font-weight: 800; color: var(--heading); }
.calls-stat-label { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 18px;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.filter-field select,
.filter-field input[type="text"] {
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}

.filter-radio-group { display: flex; gap: 14px; align-items: center; }

.filter-radio-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.filter-actions { display: flex; gap: 10px; margin-left: auto; }

.stub-note {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
}

/* ---- Detail zákazníka: záložky Objednávky / Retino / E-mailová komunikace
   / Historie volání (viz renderDetailTabs()) ---- */

.detail-tabs-wrap {
  width: 100%;
  margin-top: 14px;
  border-top: 1px dashed var(--border);
  padding-top: 14px;
}

.detail-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.detail-tabs .card-skip-link { margin-left: auto; }

.detail-tab-btn.active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.retino-ticket-list,
.email-message-list,
.call-history-tab-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.retino-ticket-row {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.retino-ticket-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  cursor: pointer;
}

.retino-ticket-expand {
  color: var(--text-muted);
  font-size: 11px;
  width: 10px;
  flex-shrink: 0;
}

.retino-ticket-type { font-weight: 700; font-size: 13.5px; }
.retino-ticket-code { color: var(--text-muted); font-size: 12.5px; }
.retino-ticket-meta { margin-top: 6px; font-size: 12px; color: var(--text-muted); padding-left: 20px; }

.retino-ticket-detail {
  margin-top: 10px;
  padding: 10px 0 0 20px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.retino-detail-heading {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 10px 0 2px;
}

.retino-detail-heading:first-child { margin-top: 0; }
.retino-detail-row { font-size: 13px; }

/* Barevné odlišení zdroje zprávy v e-mailové komunikaci (Retino / SupportBox
   e-mail / SupportBox chat) – levý pruh + malý štítek se zdrojem. */
.email-message {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: 10px 12px;
}

.email-message.source-retino_email { border-left-color: var(--accent); }
.email-message.source-supportbox_email { border-left-color: var(--pending); }
.email-message.source-supportbox_chat { border-left-color: var(--done); }

.email-message-source {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: var(--radius);
}

.source-retino_email .email-message-source { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.source-supportbox_email .email-message-source { color: var(--pending); background: var(--pending-bg); }
.source-supportbox_chat .email-message-source { color: var(--done); background: var(--done-bg); }

.email-message-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.email-message-subject { font-size: 13px; font-weight: 700; margin-bottom: 4px; }

.email-message-text { font-size: 13px; line-height: 1.5; overflow-wrap: break-word; }
.email-message-text p { margin: 0 0 10px; }
.email-message-text p:last-child { margin-bottom: 0; }
.email-message-text a { color: var(--accent); }
.email-message-text ul,
.email-message-text ol { margin: 0 0 10px; padding-left: 20px; }
.email-message-text img { max-width: 100%; border-radius: var(--radius); }

.call-history-tab-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.call-history-tab-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
}

.call-history-tab-top a { color: var(--accent); font-weight: 600; }
.call-history-tab-memo { margin-top: 6px; font-size: 13px; color: var(--text-muted); }
.call-history-tab-subheading { margin: 18px 0 8px; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.call-history-tab-subheading:first-child { margin-top: 0; }
.call-history-tab-dup-note { margin: -4px 0 10px; font-size: 12px; color: var(--text-muted); font-style: italic; }

.update-notice {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 340px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 13px;
  color: var(--text);
  animation: updateNoticeIn 0.2s ease;
}

.update-notice button { flex-shrink: 0; }

@keyframes updateNoticeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Prompt modál (přejmenování fronty/skupiny) – stejný vzor jako .modal ---- */

.modal-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
}
@media (max-width: 640px) {
  .modal-input { font-size: 16px; }
}

/* ---- Nastavení: Rozložení front (pořadí, skupiny, přejmenování) ---- */

.layout-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 480px;
}

.layout-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: grab;
  user-select: none;
  position: relative;
}
.layout-row:active { cursor: grabbing; }
.layout-row.dragging, .layout-member-row.dragging { opacity: 0.4; }
.layout-row.drop-before::before,
.layout-member-row.drop-before::before,
.layout-row.drop-after::after,
.layout-member-row.drop-after::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.layout-row.drop-before::before, .layout-member-row.drop-before::before { top: -4px; }
.layout-row.drop-after::after, .layout-member-row.drop-after::after { bottom: -4px; }
.layout-row.drop-merge { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }

.layout-row-handle { color: var(--text-muted); font-size: 13px; line-height: 1; }
.layout-row-label { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--text); }
.layout-row-hint { font-size: 11.5px; color: var(--text-muted); font-weight: 400; }

.layout-group {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 6px;
  background: color-mix(in srgb, var(--tg-cement) 30%, var(--surface));
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.layout-group-header { cursor: grab; padding: 4px 6px; }
.layout-group-header .layout-row-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.layout-group-members { display: flex; flex-direction: column; gap: 4px; padding-left: 18px; }
.layout-member-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  cursor: grab;
  position: relative;
  user-select: none;
}
.layout-member-row:active { cursor: grabbing; }

/* ---- Vlastní kontextové menu (pravé tlačítko na frontu/skupinu) ---- */

.context-menu {
  position: fixed;
  z-index: 60;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.context-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: none;
  background: none;
  font-size: 13px;
  color: var(--text);
  border-radius: var(--radius);
  cursor: pointer;
}
.context-menu button:hover { background: var(--chrome-bg-soft); }
.context-menu button.danger { color: var(--danger); }

/* ===== Analytika: plnění cílů, metriky operátorek, grafy (viz insights v app.js) ===== */
/* Jen pár sloupců (operátorky + Tým) – přes celou šířku by čísla utekla daleko od názvů metrik. */
.operator-metrics-table { width: auto; min-width: 420px; }
.operator-metrics-table td:not(:first-child), .operator-metrics-table th:not(:first-child) { text-align: right; white-space: nowrap; }
.operator-metrics-table .metric-team { color: var(--text-muted); }
.metric-hint { color: var(--text-muted); font-size: 11px; cursor: help; }
.metric-label { cursor: help; }
/* Tooltip u názvu metriky je v prvním sloupci – ukotvit vlevo, ať nevyjede z karty. */
.metric-label[data-tooltip]::after { left: 0; transform: translateY(3px); }
.metric-label[data-tooltip]:hover::after { transform: translateY(0); }
.metric-label[data-tooltip]::before { left: 16px; }
.metric-arrow { margin-left: 5px; font-size: 10px; cursor: help; }
.metric-arrow.is-better { color: var(--done); }
.metric-arrow.is-worse { color: var(--danger); }

.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.chart-card { display: block; min-width: 0; }
.chart-card.is-wide { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .chart-grid { grid-template-columns: minmax(0, 1fr); }
}
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-svg .chart-axis { fill: var(--text-muted); font-size: 10px; }
.chart-svg .chart-value { fill: var(--text); font-size: 10.5px; font-weight: 700; }
.chart-svg .chart-gridline { stroke: var(--border); stroke-width: 1; }
.chart-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) {
  .chart-pair { grid-template-columns: minmax(0, 1fr); }
}
.chart-subtitle { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; margin: 6px 0 8px; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.chart-swatch { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; display: inline-block; }
.chart-select { max-width: 100%; margin-bottom: 8px; }

/* Bez overflow – jinak by se tooltip nad horním řádkem ořízl. Na mobilu
   (kde se mřížka nevejde) se scrolluje celá mřížka do strany. */
.heatmap-grid { display: grid; gap: 3px; }
@media (max-width: 600px) {
  .heatmap-grid { overflow-x: auto; padding-top: 4px; }
}
.heatmap-hour { font-size: 10.5px; color: var(--text-muted); text-align: center; }
.heatmap-day { font-size: 11.5px; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; }
.heatmap-cell { height: 40px; border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text); cursor: default; line-height: 1.15; }
.heatmap-cell span { font-size: 11.5px; font-weight: 700; }
.heatmap-cell small { font-size: 9.5px; opacity: 0.8; }
.heatmap-cell.is-dark { color: var(--accent-ink); }
.heatmap-cell.is-empty { background: var(--paper); border: 1px dashed var(--border); }

.funnel { display: flex; flex-direction: column; gap: 8px; }
.funnel-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 12.5px; }
.funnel-track { height: 22px; }
.funnel-bar { height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; }
.funnel-value { white-space: nowrap; color: var(--text-muted); }
.funnel-value strong { color: var(--text); margin-right: 3px; }
@media (max-width: 600px) {
  .funnel-row { grid-template-columns: minmax(0, 1fr) auto; }
  .funnel-track { grid-column: 1 / -1; grid-row: 2; }
}

.stack-list { display: flex; flex-direction: column; gap: 10px; }
.stack-label { font-size: 12.5px; font-weight: 700; margin-bottom: 3px; }
.stack-label small { font-weight: 400; color: var(--text-muted); margin-left: 4px; }
.stack-bar { display: flex; gap: 2px; height: 24px; }
/* Text v segmentech je vždy tmavý – všechny barvy palety jsou dost světlé (i žlutá), bílá by na nich byla nečitelná. */
.stack-seg { display: flex; align-items: center; justify-content: center; min-width: 3px; color: #141619; font-size: 11px; font-weight: 700; }
.stack-seg:first-child { border-radius: 4px 0 0 4px; }
.stack-seg:last-child { border-radius: 0 4px 4px 0; }
.stack-seg:only-child { border-radius: 4px; }

.donut-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.donut-svg { width: 150px; height: 150px; flex: 0 0 auto; }
.donut-svg .donut-total { fill: var(--heading); font-size: 18px; font-weight: 800; }
.donut-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.donut-legend li { display: flex; align-items: center; gap: 7px; }
.donut-legend-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-legend-value { color: var(--text-muted); white-space: nowrap; }

/* ---- Příznaky z Retina u jména zákazníka (viz retinoBadgesHtml() v app.js) ---- */
:root {
  --returns-return: var(--accent);
  --returns-exchange: var(--pending);
  --returns-claim: var(--danger);
}
.retino-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  margin-left: 4px;
  border-radius: var(--radius);
  vertical-align: middle;
  cursor: help;
}
.retino-badge.is-return { color: var(--returns-return); background: color-mix(in srgb, var(--returns-return) 13%, transparent); }
.retino-badge.is-exchange { color: var(--returns-exchange); background: color-mix(in srgb, var(--returns-exchange) 15%, transparent); }
.retino-badge.is-claim { color: var(--returns-claim); background: color-mix(in srgb, var(--returns-claim) 13%, transparent); }
.retino-badge.is-tag { color: var(--text); background: color-mix(in srgb, var(--text-muted) 16%, transparent); }
.retino-badge.is-open { color: var(--surface); background: var(--returns-claim); }

/* ---- Vratky a reklamace (viz renderVratky() v app.js) ---- */
.returns-area { transition: opacity 0.15s; }
.returns-area.is-loading { opacity: 0.45; pointer-events: none; }
.returns-note { margin: 10px 0 16px; max-width: none; }
.returns-card { display: block; margin-bottom: 16px; }
.returns-card h3 { margin: 0 0 12px; font-size: 15px; }
.returns-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  color: var(--text-muted);
  cursor: help;
  vertical-align: middle;
}
.returns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: 16px;
  align-items: start;
}
.returns-grid .returns-card { margin-bottom: 0; min-width: 0; overflow-x: auto; }
.returns-grid { margin-bottom: 16px; }
.returns-grid.is-wide { grid-template-columns: repeat(auto-fit, minmax(min(540px, 100%), 1fr)); }

.returns-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--text); margin-bottom: 10px; }
.returns-legend-note { color: var(--text-muted); }
.returns-swatch { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; }
.returns-swatch.is-return, .returns-month-seg.is-return, .returns-barlist-fill.is-return { background: var(--returns-return); }
.returns-swatch.is-exchange, .returns-month-seg.is-exchange, .returns-barlist-fill.is-exchange { background: var(--returns-exchange); }
.returns-swatch.is-claim, .returns-month-seg.is-claim { background: var(--returns-claim); }

.returns-months { display: flex; align-items: flex-end; gap: 4px; overflow-x: auto; padding-top: 4px; }
.returns-month-col { flex: 1 1 0; min-width: 30px; display: flex; flex-direction: column; align-items: center; cursor: default; }
.returns-month-stack {
  width: 100%;
  max-width: 44px;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1px;
}
.returns-month-seg { width: 100%; min-height: 2px; }
.returns-month-seg:first-of-type { border-radius: 2px 2px 0 0; }
.returns-month-total { font-size: 10px; font-weight: 700; color: var(--heading); text-align: center; margin-bottom: 2px; }
.returns-month-label { font-size: 10px; color: var(--text-muted); margin-top: 5px; white-space: nowrap; }
.returns-month-rate { font-size: 11px; font-weight: 700; color: var(--heading); white-space: nowrap; }
.returns-month-col:hover .returns-month-seg { filter: brightness(1.12); }

.returns-barlist { display: grid; gap: 7px; }
.returns-barlist-row { display: grid; grid-template-columns: minmax(150px, 46%) 1fr 104px; gap: 10px; align-items: center; font-size: 13px; }
.returns-barlist-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.returns-barlist-track { height: 12px; background: color-mix(in srgb, var(--text-muted) 12%, transparent); border-radius: 2px; overflow: hidden; }
.returns-barlist-fill { display: block; height: 100%; border-radius: 2px; }
.returns-barlist-value { font-size: 12px; color: var(--text-muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.returns-table { width: 100%; font-size: 13px; }
.returns-table th, .returns-table td { padding: 7px 10px 7px 0; }
.returns-table th:last-child, .returns-table td:last-child { padding-right: 2px; }
.returns-table th { vertical-align: bottom; line-height: 1.25; hyphens: manual; }
.returns-table th.sortable { cursor: pointer; user-select: none; }
.returns-table th.sortable:hover { color: var(--heading); }
.returns-table th[data-sort="asc"]::after { content: " ▲"; font-size: 9px; }
.returns-table th[data-sort="desc"]::after { content: " ▼"; font-size: 9px; }
.returns-table th.num, .returns-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.returns-table th.num { white-space: normal; }
.returns-table td { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.returns-table td:first-child { max-width: 380px; }
.returns-table td.wrap { white-space: normal; max-width: none; min-width: 260px; }
.returns-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
/* Tablet a mobil: tabulky Vratek a RFM scrollují do strany samy v sobě. */
@media (max-width: 1024px) {
  .returns-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.returns-table a { color: var(--accent); text-decoration: none; }
.returns-table a:hover { text-decoration: underline; }
.returns-filter { width: 100%; max-width: 320px; margin-bottom: 10px; }

/* Rychlá bublina pro všechno s title (viz setupFastTooltips() v app.js). */
.fast-tip {
  position: fixed;
  z-index: 1000;
  max-width: 320px;
  padding: 6px 10px;
  border-radius: var(--radius);
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  white-space: pre-line;
  box-shadow: var(--shadow);
  pointer-events: none;
}

/* ---- Vratky: plovoucí období + podmenu sekcí (viz renderVratky()/mountReturnsNav() v app.js) ---- */
.returns-sticky {
  position: sticky;
  /* Sticky se počítá od vnitřního okraje .content – bez tohohle by nad lištou
     zůstal pruh, kterým prosvítá scrollovaný obsah. */
  top: calc(-1 * var(--content-pad-top, 28px));
  z-index: 30;
  background: var(--paper);
  padding: 10px 0 0;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.returns-sticky .segment-subtabs { margin-bottom: 6px; }
.returns-nav { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.returns-nav a {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--fade), color var(--fade);
}
.returns-nav a:hover { color: var(--heading); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.returns-nav a.active { color: var(--accent-ink); background: var(--accent); }
/* Kotva odscrolluje pod plovoucí lištu, ne za ni. */
.returns-area [id^="vratky-"] { scroll-margin-top: 112px; }
.returns-section { margin-top: 4px; }

.returns-subtitle { font-size: 12.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
/* Velikost (9 řádků) vlevo přes celou výšku, délka a střih pod sebou vpravo –
   tři tabulky vedle sebe byly moc úzké a texty se překrývaly. */
.returns-direction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 36px; align-items: start; }
.returns-direction-grid > :first-child { grid-row: span 2; }
.returns-direction-grid > div { min-width: 0; overflow-x: auto; }
/* Podle šířky KARTY, ne okna – vedle sebe jen když má každá tabulka dost místa. */
#vratky-vymeny { container-type: inline-size; }
@container (max-width: 1100px) {
  .returns-direction-grid { grid-template-columns: minmax(0, 1fr); }
  .returns-direction-grid > :first-child { grid-row: auto; }
}
.returns-direction-grid .returns-table td:last-child { width: 130px; }
.returns-table-tools { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 8px; }
.dir-bar { display: flex; width: 120px; height: 12px; gap: 2px; }
.dir-half { flex: 1 1 0; display: flex; background: color-mix(in srgb, var(--text-muted) 10%, transparent); }
.dir-half.is-down { justify-content: flex-end; border-radius: 2px 0 0 2px; }
.dir-half.is-up { justify-content: flex-start; border-radius: 0 2px 2px 0; }
.dir-half > span { display: block; height: 100%; }
.dir-half.is-down > span { background: var(--cat-2); border-radius: 2px 0 0 2px; }
.dir-half.is-up > span { background: var(--cat-1); border-radius: 0 2px 2px 0; }

.returns-filter-row th { padding-top: 0; padding-bottom: 6px; }
.returns-col-filter { width: 100%; min-width: 52px; max-width: 160px; padding: 4px 6px; font-size: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.returns-filter-row th.num .returns-col-filter { text-align: right; max-width: 70px; }

/* ---- RFM segmenty (viz renderRfm() a rfmBadgeHtml() v app.js) ---- */
.rfm-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  margin-left: 4px;
  border-radius: var(--radius);
  vertical-align: middle;
  color: var(--text);
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
  cursor: help;
}
.rfm-badge i, .rfm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: none; }
.rfm-dot { margin-right: 8px; }
.rfm-segment-name small { color: var(--text-muted); font-size: 11px; margin-left: 4px; }
.rfm-bar { display: block; width: 100%; min-width: 120px; height: 10px; }
.rfm-bar span { display: block; height: 100%; min-width: 2px; border-radius: 2px; }
.returns-table tr.is-clickable { cursor: pointer; }
.returns-table tr.is-active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.returns-table td:last-child:has(.rfm-bar) { width: 22%; }
.rfm-customers { transition: opacity 0.15s; }
.rfm-customers.is-loading { opacity: 0.5; pointer-events: none; }
.rfm-pager { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--text-muted); }

.rfm-grid { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 13px; table-layout: fixed; }
.rfm-grid th { font-weight: 700; color: var(--heading); text-align: center; padding: 4px; }
.rfm-grid th span, .rfm-grid td span { display: block; font-size: 10px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.rfm-grid tbody th { text-align: left; width: 96px; }
.rfm-grid td { text-align: center; padding: 8px 4px; border-radius: var(--radius); color: var(--heading); font-variant-numeric: tabular-nums; }
.rfm-grid td span { color: var(--text); }
.rfm-grid td.is-empty { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 6%, transparent); }

.rfm-buckets { display: grid; gap: 16px; }
.rfm-bucket-title { font-size: 12px; font-weight: 700; color: var(--heading); margin-bottom: 6px; }

/* Tabulka "Zákazníci s případy": jméno a e-mail mají pevný strop (delší se
   useknou, celé jsou v nápovědě po najetí), zbylou šířku si rozdělí číselné
   sloupce, takže se jim hlavičky lámou co nejmíň a tabulka se vejde bez
   vodorovného posuvníku. */
.returns-customers-table th:nth-child(-n+2), .returns-customers-table td:nth-child(-n+2) { width: 1%; white-space: nowrap; padding-right: 14px; }
.returns-customers-table td:nth-child(1) { max-width: 170px; }
.returns-customers-table td:nth-child(2) { max-width: 210px; }
.returns-customers-table th.num, .returns-customers-table td.num { padding-left: 4px; padding-right: 8px; }
.returns-customers-table th:last-child, .returns-customers-table td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; }
.returns-customers-table .returns-col-filter { min-width: 40px; }
.returns-customers-table .returns-filter-row th.num .returns-col-filter { max-width: 84px; }

/* Podbarvené buňky ("heat", viz renderReturnsTable() v app.js) – nejvyšší hodnota ve sloupci tučně. */
.returns-table td.is-top { font-weight: 700; color: var(--heading); }
.returns-table td.is-heat { padding-left: 10px; }
.returns-table th:has(+ th:last-child), .returns-table td:has(+ td:last-child) { padding-right: 12px; }

/* Retino záložka na kartě zákazníka: viditelné tlačítko na rozbalení detailu + odkaz přímo do Retina. */
.retino-ticket-top { flex-wrap: wrap; }
.retino-ticket-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; }
.retino-ticket-toggle { padding: 4px 10px; font-size: 12px; }
.retino-ticket-link { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.retino-ticket-link:hover { text-decoration: underline; }
.shoptet-order-link { color: var(--accent); text-decoration: none; font-weight: inherit; white-space: nowrap; }
.shoptet-order-link:hover { text-decoration: underline; }

/* ---- Naplánované hovory + odložení na datum (viz includes/followups.php) ---- */
.followup-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex-basis: 100%; margin-top: 4px; font-size: 13px; }
.followup-label { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.followup-date, .snooze-date { padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.followup-note { flex: 1 1 260px; min-width: 200px; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
@media (max-width: 640px) {
  .followup-note { min-width: 0; font-size: 16px; }
}
.snooze-or { font-size: 12.5px; color: var(--text-muted); margin-left: 6px; }
.followup-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  margin-left: 4px;
  border-radius: var(--radius);
  vertical-align: middle;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  cursor: help;
}

/* Konverze: součet hodnoty + hover s objednávkami (2026-10-07) */
.analytics-orders-cell { position: relative; white-space: nowrap; }
.analytics-orders-sum { margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--done); }
.analytics-orders-hover { display: none; position: absolute; right: 0; top: 100%; z-index: 50; min-width: 320px; max-width: 420px; max-height: 340px; overflow-y: auto; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); white-space: normal; text-align: left; }
.analytics-orders-cell:hover .analytics-orders-hover,
.analytics-orders-cell:focus-within .analytics-orders-hover { display: block; }
.aoh-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .6; padding: 2px 6px 6px; }
.aoh-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px; border-radius: 6px; color: inherit; text-decoration: none; }
.aoh-row:hover { background: var(--accent-bg, rgba(0,0,0,.05)); }
.aoh-row b { color: var(--accent); }
.aoh-main small { display: block; font-size: 11.5px; opacity: .7; margin-top: 2px; }
.aoh-value { font-weight: 700; white-space: nowrap; }
.aoh-by { font-weight: 600; }
.aoh-by-email-phone { color: var(--done); }

/* Hodnocení hovoru operátorem (2026-10-07) */
.call-feeling-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; }
.call-feeling-label { font-size: 13px; font-weight: 600; margin-right: 4px; }
.call-feeling-btn { width: auto; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border, #ddd); background: transparent; color: inherit; font-size: 13px; cursor: pointer; }
.call-feeling-btn.active.feeling-good { background: var(--done-bg); color: var(--done); border-color: currentColor; }
.call-feeling-btn.active.feeling-ok { background: var(--pending-bg); color: var(--pending); border-color: currentColor; }
.call-feeling-btn.active.feeling-bad { background: rgba(220,53,69,.12); color: #dc3545; border-color: currentColor; }
.log-feeling { display: inline-block; margin-left: 6px; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: rgba(127,127,127,.12); white-space: nowrap; }
.log-feeling.feeling-good { color: var(--done); background: var(--done-bg); }
.log-feeling.feeling-ok { color: var(--pending); background: var(--pending-bg); }
.log-feeling.feeling-bad { color: #dc3545; background: rgba(220,53,69,.12); }

/* Nezaplacená objednávka – pravděpodobný duplikát už zaplacené/doručené (2026-10-07) */
.duplicate-badge { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; vertical-align: middle; color: #b45309; background: rgba(245,158,11,.16); border: 1px solid rgba(245,158,11,.5); cursor: help; }

/* Čas a náklady na hovor – jen admin (2026-10-08) */
.table-scroll { overflow-x: auto; }
.worktime-table td:nth-child(n+3), .worktime-table th:nth-child(n+3) { text-align: right; white-space: nowrap; }
.worktime-costs { margin: 14px 0 8px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.worktime-costs-head { font-weight: 700; font-size: 13.5px; margin-bottom: 10px; }
.worktime-costs-head .hint { font-weight: 400; opacity: .65; }
.worktime-costs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; margin-bottom: 12px; }
.worktime-costs-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.worktime-costs-grid input { width: 100%; }
.worktime-costs-save { width: auto; }
.inline-error { margin-top: 8px; color: #dc3545; font-size: 13px; }

/* ---- Nastavení → Cíle Analytiky (/nastaveni/analytika/cile, Krok 4) ---- */
.goals-page { max-width: 1100px; }
.goals-page.is-loading { opacity: 0.45; pointer-events: none; }
/* Přepínač Výchozí cíle | Vlastní cíle pro měsíc (2026-11-02) */
.goals-mode { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.goals-mode-opt {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
  padding: 9px 14px; min-height: 58px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.goals-mode-opt:hover { border-color: var(--accent); }
.goals-mode-opt.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.goals-mode-title { font-size: 14px; font-weight: 700; color: var(--heading); }
.goals-mode-sub { font-size: 12px; color: var(--text-muted); }
.goals-month-picker { display: inline-flex; align-items: center; gap: 6px; }
.goals-month-picker .goals-month-step { padding: 4px 10px; }
.goals-month-input { width: 150px; margin: 0; padding: 4px 8px; }
.goals-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 12.5px; }
.goals-quick-label, .goals-quick-none, .goals-muted { color: var(--text-muted); }
.goals-chip { border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 3px 9px; font: inherit; font-size: 12.5px; cursor: pointer; }
.goals-chip.is-own { font-weight: 600; }
.goals-chip.is-active, .goals-chip:hover { border-color: var(--accent); color: var(--accent); }
.goals-table tr.is-inherited .goals-input { color: var(--text-muted); background: var(--paper); border-style: dashed; }
.goals-src-cell { white-space: nowrap; }
.goals-src { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: var(--radius); }
.goals-src.is-default { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 12%, transparent); }
.goals-src.is-own { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.goals-reset { display: inline; padding: 0; margin-left: 8px; font-size: 12px; }
.goals-history td.goals-cell-own { font-weight: 700; }
.goals-history td.goals-cell-default { color: var(--text-muted); }
.goals-history tr.is-current td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.goals-history tbody tr { cursor: pointer; }
.goals-log .goals-when { white-space: nowrap; color: var(--text-muted); }
@media (max-width: 640px) {
  .goals-mode-opt { flex: 1 1 100%; }
}
.goals-status { margin: 0 0 12px; }
.goals-card { display: block; margin-bottom: 8px; }
.goals-table td { vertical-align: middle; }
.goals-input { width: 110px; margin: 0; }
.goals-unit { margin-left: 6px; color: var(--text-muted); font-size: 12.5px; }
.goals-who { color: var(--text-muted); font-size: 12.5px; }
.goals-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.goals-msg { margin-top: 8px; font-size: 13px; min-height: 1em; }
.goals-msg.is-ok { color: var(--done); }
.goals-msg.is-error { color: var(--danger); }
.goals-history tbody tr:hover td { background: var(--paper); }
#segmentTitle .returns-info { font-size: 10px; }
.returns-info[data-tooltip]::after { font-style: normal; text-align: left; max-width: 320px; }

/* ===== Analytika – Krok 5 (2026-11-02): sticky lišta období, dlaždice s cíli,
   karty zaměstnanců, kompaktní tabulky. Lišta se lepí v .content (scroll
   kontejner), stejně jako .returns-sticky. ===== */
.an-sticky {
  position: sticky;
  top: calc(-1 * var(--content-pad-top, 28px));
  z-index: 30;
  background: var(--paper);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 0;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.an-bar-group { display: flex; align-items: center; gap: 4px; }
.an-preset, .an-arrow {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  padding: 5px 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.an-arrow { padding: 4px 9px; font-size: 15px; line-height: 1; }
.an-preset:hover, .an-arrow:hover:not(:disabled) { border-color: var(--accent); }
.an-preset.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.an-arrow:disabled { opacity: 0.4; cursor: default; }
.an-bar-label { min-width: 120px; text-align: center; font-size: 14px; color: var(--heading); white-space: nowrap; }
.an-date {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  padding: 4px 6px;
  font: inherit;
  font-size: 12.5px;
  color-scheme: light dark;
}
.an-bar-dash { color: var(--text-muted); }
.an-bar-compare { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.an-bar-operators { margin-left: auto; font-size: 12.5px; color: var(--text-muted, #9aa3ad); }
.an-bar-operators + .an-bar-settings { margin-left: 12px; }
/* Checkbox „operátoři“ u každé části Analytiky (jen admin). */
.an-op-toggle { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--border); width: 100%; font-size: 11.5px; color: var(--text-muted, #9aa3ad); cursor: pointer; align-self: flex-start; }
.an-tile-goals + .an-op-toggle { margin-top: 8px; }
.chart-card > .an-op-toggle, .an-table-block > .an-op-toggle { margin: 2px 0 6px; padding-top: 0; border-top: 0; width: auto; }
.an-op-toggle input { margin: 0; }
.is-op-visible > .an-op-toggle { color: var(--pending); font-weight: 600; }
/* Zaškrtnuté „operátoři“ = mírně žluté pozadí (Radek 2026-11-03). */
.an-tile.is-op-visible, .chart-card.is-op-visible, .an-table-block.is-op-visible {
  background: color-mix(in srgb, var(--pending) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--pending) 45%, var(--border));
}
.an-table-block.is-op-visible { border: 1px solid color-mix(in srgb, var(--pending) 45%, var(--border)); border-radius: var(--radius); padding: 0 12px 10px; margin-top: 12px; }
.an-op-toggle.is-error { color: var(--danger, #e5484d); }
.an-bar-settings { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.an-bar-settings:hover { text-decoration: underline; }
.an-body.is-loading { opacity: 0.45; pointer-events: none; }

.an-section { margin-bottom: 26px; }
.an-section-head { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; margin-bottom: 6px; }
.an-section-head h3 { margin: 0; font-size: 16px; color: var(--heading); }
.an-section-meta { font-size: 12px; color: var(--text-muted); }
.an-note { margin: 0 0 10px; font-size: 12px; color: var(--text-muted); }
.an-info { margin-left: 6px; vertical-align: 1px; }

.an-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 10px; }
.an-tiles.is-secondary { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.an-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.an-tile-label { font-size: 12px; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; }
.an-tile-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.an-tile-value { font-size: 28px; flex: 0 1 auto; min-width: 0; }
.an-tiles.is-secondary .an-tile-value { font-size: 20px; }
.an-tile-sub { font-size: 12px; line-height: 1.4; color: var(--text-muted); display: flex; flex-direction: column; gap: 1px; }
.an-trend { font-size: 11.5px; font-weight: 700; white-space: nowrap; color: var(--text-muted); cursor: help; }
.an-trend.is-good { color: var(--done); }
.an-trend.is-bad { color: var(--danger); }
.an-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
/* Cíle vždy dole – pruhy plnění jsou v řadě dlaždic ve stejné výšce. */
.an-tile-goals { margin-top: auto; padding-top: 8px; }
.an-tile-goals:empty { padding-top: 0; }
.an-tile-goals > .an-goal:first-child, .an-tile-goals > .an-goal-none:first-child { margin-top: 0; }
.an-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: help;
}
.an-badge.is-maturing { color: var(--pending); background: var(--pending-bg); }
.an-badge.is-approx { color: var(--unreached); background: var(--unreached-bg); }
.an-badge.is-lowdata { color: var(--called); background: var(--called-bg); }
.an-badge.is-info { color: var(--text-muted); border-color: var(--border); }
/* Krok 6: zmrazený měsíc (snímek analytics-monthly) */
.an-badge.is-frozen { color: var(--accent); background: var(--surface); border-color: var(--accent); }
.an-badge.is-final { color: var(--done); background: var(--surface); border-color: var(--done); }
.an-frozen { margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--surface); font-size: 12.5px; color: var(--text); }
.an-frozen.is-final { border-left-color: var(--done); }
.an-frozen.is-live { border-left-color: var(--pending); background: var(--pending-bg); }
.an-frozen-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.an-frozen-text { flex: 1 1 260px; min-width: 0; }
.an-frozen-btn { margin-left: auto; padding: 4px 10px; font-size: 12px; }
.an-frozen-note { margin-top: 4px; font-size: 11.5px; color: var(--text-muted); }
.an-goal { margin-top: 6px; }
.an-goal-bar { position: relative; height: 8px; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.an-goal-fill { height: 100%; background: var(--accent); }
.an-goal-fill.is-ok { background: var(--done); }
.an-goal-fill.is-behind { background: var(--pending); }
.an-goal-marker { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--heading); transform: translateX(-1px); }
.an-goal-text { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 11.5px; line-height: 1.35; color: var(--text-muted); margin-top: 3px; }
.an-goal-text + .an-goal-text { margin-top: 1px; }
.an-goal-text { flex-wrap: wrap; }
.an-goal-text > span { white-space: nowrap; }
.an-goal-text > .an-goal-status { margin-left: auto; }
.an-goal-text strong { color: var(--text); }
.an-goal-status { font-weight: 700; white-space: nowrap; }
.an-goal-status.is-ok { color: var(--done); }
.an-goal-status.is-behind { color: var(--pending); }
.an-goal-none { margin-top: 6px; font-size: 11.5px; color: var(--text-muted); font-style: italic; }
.an-goal.is-compact { margin-top: 3px; }
.an-goal-extra { margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.an-goal.is-compact .an-goal-bar { height: 6px; }

.an-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.an-card { display: block; padding: 12px 14px; }
.an-card-name { font-weight: 800; color: var(--heading); margin-bottom: 6px; }
.an-card-row { padding: 6px 0; border-top: 1px solid var(--border); }
.an-card-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; }
.an-card-label { color: var(--text-muted); font-weight: 600; }
.an-card-value { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.an-card-value strong { font-size: 15px; color: var(--heading); }
.an-card-extra { font-size: 11.5px; color: var(--text-muted); text-align: right; }

.an-compact th, .an-compact td { padding: 5px 8px; font-size: 12.5px; }
.an-compact th { white-space: normal; line-height: 1.2; vertical-align: bottom; }
.an-missed-table { margin-top: 10px; width: auto; min-width: 360px; }
.an-missed-table td:not(:first-child), .an-missed-table th:not(:first-child) { text-align: right; }
.an-missed-table tr.is-excluded td { color: var(--text-muted); }
.an-missed-table tr.an-missed-person td:first-child { padding-left: 18px; }
.an-weekday-row td { vertical-align: bottom; }
.an-table-block .table-scroll { overflow-x: auto; }

.goals-back { margin: 0 0 6px; font-size: 12.5px; }
.goals-back a { color: var(--accent); text-decoration: none; font-weight: 600; }
.an-settings { margin-top: 26px; max-width: 1400px; }
.an-settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.an-settings-card { display: block; }
.an-settings-card h3 { margin: 0 0 10px; font-size: 15px; display: flex; align-items: center; }
.an-settings-card > button { margin-top: 10px; }
.an-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.an-settings-row select { max-width: 60%; }
.an-switch { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }

@media (max-width: 700px) {
  .an-sticky { gap: 6px 8px; padding: 8px 0; }
  .an-bar-label { min-width: 0; flex: 1 1 auto; }
  .an-bar-nav { flex: 1 1 auto; }
  .an-bar-range { flex: 1 1 100%; }
  .an-bar-range .an-date { flex: 1 1 0; min-width: 0; }
  .an-bar-settings, .an-bar-operators { margin-left: 0; }
  .an-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .an-tiles.is-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-tile { padding: 10px; }
  .an-tile-value { font-size: 22px; }
  .an-tile-main { flex-wrap: wrap; gap: 2px 6px; }
  .an-cards { grid-template-columns: minmax(0, 1fr); }
  .an-settings-grid { grid-template-columns: minmax(0, 1fr); }
  .an-missed-table { min-width: 0; width: 100%; }
}
.operator-metrics-table th .analytics-row-delete { display: inline; margin: 0 0 0 4px; padding: 0; vertical-align: baseline; }
.an-missed-table td:not(:first-child) { white-space: nowrap; }

/* Cíle a nastavení → E-maily: automatičtí odesílatelé (2026-11-02) */
.an-auto-domains { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface, #fff); color: inherit; resize: vertical; margin-bottom: 8px; }
.an-settings-card details.hint summary { cursor: pointer; }
.an-settings-card details.hint p { margin: 6px 0 8px; word-break: break-word; }