:root {
  /* Základní paleta – moderní světlý vzhled: chladně neutrální pozadí,
     čisté bílé plochy karet a jeden sytý brand modrý tón pro odkazy a
     primární tlačítka. */
  --color-bg: #f5f7fb;
  --color-surface: #ffffff;
  --color-border: #e6e9f2;
  --color-text: #1f2430;
  --color-muted: #6b7280;
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-primary-tint: #eaf2fe;
  /* Modrá z loga DASAL (#17A4DD). Samotná je na bílý text moc světlá, proto
     k ní patří tmavší odstín na text a světlý na podklad. */
  --brand-blue: #17a4dd;
  --brand-blue-ink: #0a6b93;
  --brand-blue-tint: #e7f6fd;
  --color-danger: #dc2626;
  --color-success: #16a34a;
  --color-warning: #d97706;

  /* Pastelová paleta pro rozlišování kategorií (grafy, štítky, legenda) –
     8 tónů ve fixním pořadí, ověřeno nástrojem pro kontrolu přístupnosti
     barev (CVD/kontrast) ze skillu pro datovou vizualizaci. Pořadí se dál
     nemění, aby barva vždy odpovídala stejné kategorii napříč aplikací. */
  --pastel-blue: #2563eb;
  --pastel-orange: #fb923c;
  --pastel-teal: #14b8a6;
  --pastel-yellow: #ca8a04;
  --pastel-pink: #f472b6;
  --pastel-green: #22c55e;
  --pastel-violet: #a78bfa;
  --pastel-red: #f87171;

  /* Světlé "chip" pozadí + sytější text stejného odstínu – vzor použitý už
     dřív u badge-done/badge-lost, teď zobecněný na celou paletu výše. */
  --chip-blue-bg: #eaf2fe; --chip-blue-text: #1d4ed8;
  --chip-orange-bg: #fff1e4; --chip-orange-text: #c2410c;
  /* Sytější jantarová dvojice jen pro semafor stavů nabídky – světle oranžová
     výše je od pastelově červené na první pohled skoro k nerozeznání. */
  --chip-amber-bg: #ffedd5; --chip-amber-text: #9a4a0a;
  --chip-teal-bg: #e6fbf7; --chip-teal-text: #0f766e;
  /* Text o odstín tmavší, než byl původně (#a16207): na svém světlém podkladu
     měl kontrast 4,45:1, tedy těsně pod hranicí WCAG AA pro drobné písmo. */
  --chip-yellow-bg: #fdf3d6; --chip-yellow-text: #946009;
  --chip-pink-bg: #fdeef6; --chip-pink-text: #be185d;
  --chip-green-bg: #e8fbee; --chip-green-text: #15803d;
  --chip-violet-bg: #f1ecfe; --chip-violet-text: #6d28d9;
  --chip-red-bg: #fdeaea; --chip-red-text: #b91c1c;

  --radius: 12px;
  --radius-pill: 999px;
  --shadow: 0 1px 3px rgba(20, 25, 35, 0.04), 0 8px 24px rgba(31, 41, 60, 0.07);

  /* Levý panel navigace. Ve světlém režimu je tmavě modrý ve firemních
     barvách (na bílé stránce působí jako pevná "kotva" a nese identitu),
     v tmavém režimu splyne s ostatními plochami – tmavý pruh na tmavém
     pozadí by jinak vypadal jako dvě různě tmavé skvrny vedle sebe. */
  --sidebar-bg: linear-gradient(170deg, #0b4f6c 0%, #0a3d55 55%, #08304a 100%);
  --sidebar-border: transparent;
  --sidebar-text: #bcd8e6;
  --sidebar-text-hover: #ffffff;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.10);
  --sidebar-active-bg: var(--brand-blue);
  --sidebar-active-text: #ffffff;
  --sidebar-sep: rgba(255, 255, 255, 0.14);
  --sidebar-width: 224px;
  /* Text na plné barvě tlačítka. Ve světlém režimu bílá; v tmavém je plná
     barva světle modrá, takže na ní musí být text naopak tmavý. */
  --color-on-primary: #ffffff;
  /* Říká prohlížeči, v jakém motivu má kreslit VLASTNÍ prvky – posuvníky,
     kalendář v poli data, rozbalený seznam <select>. Bez toho zůstanou bílé
     i v tmavém režimu, protože je nekreslí naše CSS. */
  color-scheme: light;

  /* Plochy, které se v tmavém režimu musí převléknout taky. Dřív byly
     zapsané natvrdo (#fff, světlé pastely) a v tmavém motivu by zůstaly
     svítit jako světlé skvrny. */
  --row-hover-bg: #fafbfd;
  --note-bg: #f7f8fb;
  --flash-success-bg: #e7f6ed; --flash-success-border: #bfe6cd;
  --flash-error-bg: #fdecec; --flash-error-border: #f3c6c6;
  --diff-add-bg: #f0fbf3;
  --diff-del-bg: #fdf1f1;
  --diff-chg-bg: #fffaf0;
  --revbar-border: #bfe6f7;
  --tooltip-bg: #1f2430;
  font-size: 15px;
}

/* === Tmavý režim ===
   Jen jiné hodnoty týchž proměnných – žádné druhé sady pravidel a žádný
   JavaScript. Motiv se volí v Nastavení a propisuje se do atributu
   data-theme na <html> (viz views/layout.js):
     data-theme="auto"  → řídí se nastavením počítače (media query níže)
     data-theme="light" → vždy světlý
     data-theme="dark"  → vždy tmavý
   Pořadí bloků je důležité: explicitní volba musí přebít media query. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --color-bg: #11151d;
    --color-surface: #181d27;
    --color-border: #262d3a;
    --color-text: #e8ecf4;
    --color-muted: #9aa4b6;
    --color-primary: #38bdf8;
    --color-primary-dark: #0ea5e9;
    --color-primary-tint: #16283a;
    --brand-blue-tint: #102a38;
    --color-danger: #f87171;
    --color-success: #4ade80;
    --color-warning: #fbbf24;
    --chip-blue-bg: #16283a; --chip-blue-text: #7dd3fc;
    --chip-orange-bg: #33240d; --chip-orange-text: #fdba74;
    --chip-amber-bg: #33240d; --chip-amber-text: #fcd34d;
    --chip-teal-bg: #10302c; --chip-teal-text: #5eead4;
    --chip-yellow-bg: #332a0d; --chip-yellow-text: #fcd34d;
    --chip-pink-bg: #34162a; --chip-pink-text: #f9a8d4;
    --chip-green-bg: #12301f; --chip-green-text: #6ee7b7;
    --chip-violet-bg: #241d3d; --chip-violet-text: #c4b5fd;
    --chip-red-bg: #3a1a1a; --chip-red-text: #fca5a5;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    --sidebar-bg: #141922;
    --sidebar-border: #262d3a;
    --sidebar-text: #b6c0d2;
    --sidebar-text-hover: #e8ecf4;
    --sidebar-hover-bg: #1f2634;
    --sidebar-active-bg: #0e7490;
    --sidebar-active-text: #ffffff;
    --sidebar-sep: #262d3a;
  --color-on-primary: #0b1220;
  color-scheme: dark;
  --row-hover-bg: #1c2230;
  --note-bg: #1c2230;
  --flash-success-bg: #123123; --flash-success-border: #1d5c3c;
  --flash-error-bg: #341a1a; --flash-error-border: #6b2b2b;
  --diff-add-bg: #12301f;
  --diff-del-bg: #331a1a;
  --diff-chg-bg: #322616;
  --revbar-border: #1f5570;
  --tooltip-bg: #0b0f16;
  }
}
:root[data-theme="dark"] {
  --color-bg: #11151d;
  --color-surface: #181d27;
  --color-border: #262d3a;
  --color-text: #e8ecf4;
  --color-muted: #9aa4b6;
  --color-primary: #38bdf8;
  --color-primary-dark: #0ea5e9;
  --color-primary-tint: #16283a;
  --brand-blue-tint: #102a38;
  --color-danger: #f87171;
  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --chip-blue-bg: #16283a; --chip-blue-text: #7dd3fc;
  --chip-orange-bg: #33240d; --chip-orange-text: #fdba74;
  --chip-amber-bg: #33240d; --chip-amber-text: #fcd34d;
  --chip-teal-bg: #10302c; --chip-teal-text: #5eead4;
  --chip-yellow-bg: #332a0d; --chip-yellow-text: #fcd34d;
  --chip-pink-bg: #34162a; --chip-pink-text: #f9a8d4;
  --chip-green-bg: #12301f; --chip-green-text: #6ee7b7;
  --chip-violet-bg: #241d3d; --chip-violet-text: #c4b5fd;
  --chip-red-bg: #3a1a1a; --chip-red-text: #fca5a5;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  --sidebar-bg: #141922;
  --sidebar-border: #262d3a;
  --sidebar-text: #b6c0d2;
  --sidebar-text-hover: #e8ecf4;
  --sidebar-hover-bg: #1f2634;
  --sidebar-active-bg: #0e7490;
  --sidebar-active-text: #ffffff;
  --sidebar-sep: #262d3a;
  --color-on-primary: #0b1220;
  color-scheme: dark;
  --row-hover-bg: #1c2230;
  --note-bg: #1c2230;
  --flash-success-bg: #123123; --flash-success-border: #1d5c3c;
  --flash-error-bg: #341a1a; --flash-error-border: #6b2b2b;
  --diff-add-bg: #12301f;
  --diff-del-bg: #331a1a;
  --diff-chg-bg: #322616;
  --revbar-border: #1f5570;
  --tooltip-bg: #0b0f16;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
/* Obsah vedle levého panelu. Panel má pevnou šířku, obsah zabere zbytek –
   proto minmax(0, 1fr): bez toho by široká tabulka roztáhla celý sloupec. */
.app-body { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); flex: 1; }
.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  padding: 14px 10px;
  position: sticky;
  top: 60px;
  align-self: start;
  height: calc(100vh - 60px);
  overflow-y: auto;
}
.nav-sep { display: block; height: 1px; background: var(--sidebar-sep); margin: 10px 6px; }

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 10px 24px;
  /* min-height (ne pevná height) – .nav se i nad breakpointem hamburgeru
     může na užším desktopu/tabletu zalomit na víc řádků (flex-wrap výše),
     pevná výška by pak spodní řádek odkazů vizuálně "ustřihla". */
  min-height: 60px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; color: var(--color-text); white-space: nowrap; }
/* Skutečné logo (viz layout.js brandLogoHtml()) má vlastní poměr stran (není
   čtvercové jako dřívější monogram) – pevná je proto jen výška, šířka se
   dopočítá automaticky, ať se obrázek nezkreslí. */
.brand-logo { height: 32px; width: auto; flex-shrink: 0; display: block; }
.brand-name-crm { color: var(--color-muted); font-weight: 600; }

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

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius);
  color: var(--sidebar-text);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}
.nav-link:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text-hover); text-decoration: none; }
.nav-link.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-text); }
.nav-icon { width: 18px; height: 18px; flex: none; }

/* === Kompaktní menu (volba v Nastavení) ===
   Zůstane jen ikona; popisek se ukáže jako bublina po najetí myší. Bublina
   je čistě CSS (::after nad data-label), aby fungovala i bez JavaScriptu. */
:root[data-nav="compact"] { --sidebar-width: 64px; }
:root[data-nav="compact"] .nav-link { justify-content: center; padding: 10px 0; position: relative; }
:root[data-nav="compact"] .nav-label { display: none; }
:root[data-nav="compact"] .nav-link::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  background: var(--tooltip-bg);
  color: #fff;
  font-size: 0.78rem;
  padding: 4px 9px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 20;
}
:root[data-nav="compact"] .nav-link:hover::after,
:root[data-nav="compact"] .nav-link:focus-visible::after { opacity: 1; }

.user-bar { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--color-muted); margin-left: auto; }
.user-name { font-weight: 600; color: var(--color-text); }

/* Tlačítko-hamburger – na širokých obrazovkách skryté (menu je vidět celé
   rovnou v .nav), zobrazí se jen pod breakpointem níže. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--color-bg); }
.nav-toggle svg { width: 20px; height: 20px; }

.content { padding: 24px; max-width: 1320px; margin: 0 auto; width: 100%; }

.auth-content {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  padding: 32px;
  width: 100%;
  max-width: 380px;
}
.auth-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; margin-bottom: 20px; }
.auth-brand .brand-logo { height: 38px; }
.auth-box h1 { margin-top: 0; }
.auth-box form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
/* Vedlejší odkaz pod formulářem (zapomenuté heslo / zpět na přihlášení). */
.auth-alt { margin: 16px 0 0; font-size: 0.9rem; text-align: center; }

.muted { color: var(--color-muted); font-size: 0.9rem; }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.page-header h1 { margin: 0; font-size: 1.4rem; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.section-title { font-size: 1.1rem; margin: 28px 0 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn:hover { background: var(--color-bg); text-decoration: none; }
.btn-small { padding: 6px 13px; font-size: 0.82rem; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-on-primary); }
.btn-danger { background: var(--color-surface); color: var(--color-danger); border-color: var(--color-danger); }
.btn-danger:hover { background: var(--color-danger); color: #fff; }

.link-button {
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: underline;
  padding: 0;
}

.inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.inline-add-form { display: flex; gap: 8px; margin-top: 14px; }
.inline-add-form input { flex: 1; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; }

/* Základní vzhled VŠECH formulářových polí – dřív se barvy nastavovaly jen
   uvnitř .entity-form a .filter-form, takže pole ve vyhledávání, ve filtrech
   nebo v tabulkách zůstala v tmavém režimu bílá s černým textem. Tohle je
   jedno místo pro celou aplikaci; konkrétní bloky si dál řeší jen rozměry
   a rozvržení. */
input, select, textarea {
  font-family: inherit;
  color: var(--color-text);
  background-color: var(--color-surface);
  border-color: var(--color-border);
}
input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: 1; }
input:disabled, select:disabled, textarea:disabled { color: var(--color-muted); background-color: var(--color-bg); }

.search-form { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.search-form input, .search-form select {
  flex: 1; min-width: 160px; max-width: 360px; padding: 8px 10px;
  border: 1px solid var(--color-border); border-radius: var(--radius);
}
.search-form input[type="hidden"] { flex: 0; max-width: 0; padding: 0; border: none; }

/* Řádek tlačítek pro rychlý výběr firem podle počátečního písmene (A-Ž).
   flex: 1 1 0 na každém tlačítku zajišťuje, že se celá abeceda vždy vejde
   na šířku jednoho řádku bez zalamování, ať je písmen jakkoli mnoho. */
.az-filter {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.az-btn {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 6px 0;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--color-text);
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
}
.az-btn:last-child { border-right: none; }
.az-btn:hover { background: var(--color-bg); text-decoration: none; }
.az-btn.active { background: var(--color-primary); color: #fff; }
.az-clear { margin: -6px 0 12px; font-size: 0.85rem; }
@media (max-width: 700px) {
  .az-filter { overflow-x: auto; }
  .az-btn { flex: 0 0 auto; padding: 6px 10px; }
}

/* Sbalitelné menu (hamburger) – na užších obrazovkách je rovnou vidět jen
   hlavička (logo, tlačítko menu, uživatel); celá navigace se zobrazí jako
   plnošířkový sloupec pod hlavičkou až po kliknutí (public/js/mobileNav.js
   přepíná třídu .is-open). Breakpoint 880px je zvolen tak, aby se pod něj
   dostaly i běžné tablety na šířku – deset položek menu + odkaz Tým by se
   tam do jednoho řádku stejně nevešlo. */
@media (max-width: 880px) {
  .topbar { flex-wrap: wrap; row-gap: 10px; column-gap: 12px; padding: 10px 16px; }
  .brand { order: 1; }
  .nav-toggle { display: inline-flex; order: 2; margin-left: auto; }
  .user-bar { order: 3; }
  /* Na úzkém displeji nemá svislý pruh smysl – panel se roztáhne přes celou
     šířku pod hlavičku a schová se pod hamburger. Kompaktní režim se tady
     ignoruje: na dotykovém displeji nejsou bubliny po najetí myší k ničemu. */
  .app-body { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: static;
    height: auto;
    padding: 0;
    border-right: 0;
  }
  /* Zavřené menu nesmí zabírat ani proužek – proto se skrývá samotný <nav>
     a odsazení nese taky on, ne panel okolo. (Bez :has(), ať to funguje
     i ve starších prohlížečích.) */
  .nav { display: none; padding: 10px 12px; border-bottom: 1px solid var(--sidebar-border); }
  .nav.is-open { display: flex; }
  .nav-link { width: 100%; padding: 11px 14px; }
  :root[data-nav="compact"] .nav-link { justify-content: flex-start; padding: 11px 14px; }
  :root[data-nav="compact"] .nav-label { display: inline; }
  :root[data-nav="compact"] .nav-link::after { display: none; }
}

/* Větší dotykové plochy tlačítek na dotykových/úzkých obrazovkách (viz
   doporučené min. ~44px pro dotykové cíle) a méně obsahového paddingu
   stránky, ať zbyde na úzkém displeji víc místa na skutečný obsah. */
@media (max-width: 700px) {
  .content { padding: 16px; }
  .btn { padding: 11px 16px; }
  .btn-small { padding: 9px 14px; }
  .checkbox-btn { padding: 6px; font-size: 1.25rem; line-height: 1; }
  .items-editor .row-remove-btn { width: 36px; height: 36px; font-size: 1.15rem; }
}

.data-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.data-table th, .data-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--color-border); font-size: 0.92rem; }
.data-table th { background: var(--color-bg); font-weight: 600; color: var(--color-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--row-hover-bg); }
.table-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.password-reset-form input { padding: 5px 8px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.82rem; width: 190px; }

/* Responzivní tabulky na úzkých obrazovkách – místo vodorovného scrollování
   (nepohodlné na mobilu) se každý řádek "poskládá" pod sebe jako karta a
   obsah každé buňky se zarovná pod svůj popisek (spíš "pod sebe" než vedle
   sebe – i u víceslovných/formulářových buněk to zůstane čitelné). Popisek
   se bere z atributu data-label, který má nastavený každá <td> stejně jako
   název sloupce v <thead> – viz jednotlivé views/*.js. */
@media (max-width: 700px) {
  .data-table { display: block; background: none; border: none; border-radius: 0; overflow: visible; }
  .data-table thead { display: none; }
  .data-table tbody { display: block; }
  .data-table tr {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 10px;
    padding: 4px 0;
  }
  .data-table tbody tr:last-child { margin-bottom: 0; }
  .data-table tbody tr:hover { background: var(--color-surface); }
  .data-table td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
  }
  .data-table td:last-child { border-bottom: none; }
  .data-table td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
}

.row-overdue td { color: var(--color-danger); }
.row-done td { color: var(--color-muted); text-decoration: line-through; }
.checkbox-btn { background: none; border: none; cursor: pointer; font-size: 1.1rem; padding: 0; }

.pagination { display: flex; gap: 6px; margin-top: 16px; }
.pagination a, .pagination span { padding: 6px 10px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); font-size: 0.85rem; }
.pagination .page-current { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }

.empty-state { padding: 24px; text-align: center; color: var(--color-muted); background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius); }

.entity-form { --form-pad: 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--form-pad); max-width: 640px; display: flex; flex-direction: column; gap: 14px; }
.entity-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--color-muted); font-weight: 600; flex: 1; }
.entity-form input, .entity-form select, .entity-form textarea {
  font: inherit;
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  background: var(--color-surface);
}
.entity-form input:focus, .entity-form select:focus, .entity-form textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.form-row > label { min-width: 180px; }
/* Krátká pole (titul před jménem) – ať nezabírají stejné místo jako jméno
   a příjmení. Selektor je stejně specifický jako pravidlo výše, proto musí
   stát až za ním. */
.form-row > label.field-narrow { flex: 0 1 150px; min-width: 120px; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
/* Uložit je na formuláři to hlavní, co uživatel hledá – ať je větší
   a výraznější než Zrušit a Smazat vedle něj. Platí to pro všechny
   formuláře v aplikaci, aby se tlačítko hledalo vždycky na stejném místě
   a stejně vypadalo. Tlačítka v hlavičkách stránek se tím nemění. */
.form-actions .btn-primary { padding: 12px 26px; font-size: 0.95rem; font-weight: 700; box-shadow: 0 2px 6px rgba(31, 36, 48, 0.16); }
.form-actions .btn-primary.btn-small { padding: 9px 18px; font-size: 0.85rem; }

/* Dlouhý formulář (nabídka s položkami, předávací protokol, plánování
   servisu) se na obrazovku nevejde a tlačítko Uložit by zůstalo kdesi dole.
   `position: sticky` ho drží u spodního okraje okna, dokud se formulář
   neodroluje na konec – pak si lišta sedne na své místo. U krátkého
   formuláře, který se celý vejde na obrazovku, se nic nemění. Je to čistě
   CSS, žádný skript – není to tedy v rozporu s přísnou CSP hlavičkou.
   Záporné okraje vyruší vnitřní odsazení formuláře, aby lišta sahala od
   kraje ke kraji; odsazení se vrátí uvnitř jako padding. */
.form-actions-sticky {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 6px calc(-1 * var(--form-pad)) calc(-1 * var(--form-pad));
  padding: 14px var(--form-pad);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 -4px 10px rgba(31, 36, 48, 0.05);
}
.field-error { color: var(--color-danger); font-weight: 500; font-size: 0.8rem; }
.field-hint { display: block; color: var(--color-muted); font-size: 0.8rem; margin-top: 2px; }
.field-hint-success { color: var(--color-success); }
.field-hint-error { color: var(--color-danger); }
.form-error { background: var(--flash-error-bg); color: var(--color-danger); border: 1px solid var(--flash-error-border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; font-size: 0.9rem; }

.flash { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 0.9rem; }
.flash-success { background: var(--flash-success-bg); color: var(--color-success); border: 1px solid var(--flash-success-border); }
.flash-error { background: var(--flash-error-bg); color: var(--color-danger); border: 1px solid var(--flash-error-border); }

.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }
/* min-width: 0 přepisuje výchozí "auto" u grid položek (jinak by se sloupec
   nikdy nesmrskl pod minimální obsahovou šířku svého obsahu – typicky kvůli
   nezalomitelnému prvku jako <input type="file">) a způsoboval by tak na
   úzkých obrazovkách vodorovné přetečení celé stránky. */
.detail-main, .detail-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (max-width: 800px) { .detail-grid { grid-template-columns: 1fr; } }

.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.card h2 { margin-top: 0; font-size: 1rem; }

.def-list { display: grid; grid-template-columns: 130px 1fr; row-gap: 8px; column-gap: 10px; margin: 0; }
.def-list dt { color: var(--color-muted); font-size: 0.85rem; }
.def-list dd { margin: 0; }

.mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; }

.badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-bg); border: 1px solid var(--color-border); font-size: 0.75rem; font-weight: 600; color: var(--color-muted); }
.badge-done { background: var(--chip-green-bg); color: var(--chip-green-text); border-color: transparent; }
.badge-lost { background: var(--chip-red-bg); color: var(--chip-red-text); border-color: transparent; }
.badge-warn { background: var(--chip-yellow-bg); color: var(--chip-yellow-text); border-color: transparent; }
/* Obecné tónové modifikátory badge (kalendář) – v souladu s tone-good/tone-bad
   už používanými u .stat-tile, aby se zbytečně nezaváděl další paralelní
   pojmenovací systém jen pro badge-done/badge-lost. */
.badge.tone-good { background: var(--chip-green-bg); color: var(--chip-green-text); border-color: transparent; }
.badge.tone-bad { background: var(--chip-red-bg); color: var(--chip-red-text); border-color: transparent; }
.badge.tone-warn { background: var(--chip-yellow-bg); color: var(--chip-yellow-text); border-color: transparent; }
/* Stavy nabídky čtou uživatelé jako semafor: rozpracovaný koncept oranžově,
   odeslaná nabídka (čeká se na zákazníka) modře, schváleno zeleně, zamítnuto
   červeně. Oranžová je schválně jiný odstín než tone-warn (žlutá), aby se
   koncept a odeslaná nabídka nedaly splést. */
.badge.tone-progress { background: var(--chip-amber-bg); color: var(--chip-amber-text); border-color: transparent; }
.badge.tone-info { background: var(--chip-blue-bg); color: var(--chip-blue-text); border-color: transparent; }

/* Uzavřené fáze obchodu (vyhráno/prohráno) plnou barvou s bílým textem.
   Odlišuje je od otevřených fází SYTOST, ne odstín – pastelová paleta nemá
   dost odstínů, které by se zároveň nepletly se zelenou ani červenou.
   Použité tóny jsou tmavší varianty (ne --color-success/--color-danger):
   bílý text na #16a34a má kontrast jen 3,3:1, tedy pod hranicí WCAG AA. */
.badge.stage-won { background: #15803d; color: #fff; border-color: transparent; }
.badge.stage-lost { background: #b91c1c; color: #fff; border-color: transparent; }

/* Obecné pastelové "chip" štítky ze stejné palety jako grafy (viz níže) –
   k dispozici pro libovolné další kategorie napříč aplikací. */
.chip-blue { background: var(--chip-blue-bg); color: var(--chip-blue-text); border-color: transparent; }
.chip-orange { background: var(--chip-orange-bg); color: var(--chip-orange-text); border-color: transparent; }
.chip-teal { background: var(--chip-teal-bg); color: var(--chip-teal-text); border-color: transparent; }
.chip-yellow { background: var(--chip-yellow-bg); color: var(--chip-yellow-text); border-color: transparent; }
.chip-pink { background: var(--chip-pink-bg); color: var(--chip-pink-text); border-color: transparent; }
.chip-green { background: var(--chip-green-bg); color: var(--chip-green-text); border-color: transparent; }
.chip-violet { background: var(--chip-violet-bg); color: var(--chip-violet-text); border-color: transparent; }
.chip-red { background: var(--chip-red-bg); color: var(--chip-red-text); border-color: transparent; }

/* Priorita obchodů a projektů (nízká → normální → střední → vysoká). */
.priority-low { background: var(--color-bg); color: var(--color-muted); border-color: var(--color-border); }
.priority-normal { background: var(--chip-blue-bg); color: var(--chip-blue-text); border-color: transparent; }
.priority-medium { background: var(--chip-orange-bg); color: var(--chip-orange-text); border-color: transparent; }
.priority-high { background: var(--chip-red-bg); color: var(--chip-red-text); border-color: transparent; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat-grid-compact { margin-bottom: 0; }
.stat-tile { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.stat-value { font-size: 1.7rem; font-weight: 700; }
.stat-label { color: var(--color-muted); font-size: 0.82rem; margin-top: 4px; }
.stat-tile.tone-good { border-left-color: var(--pastel-green); }
.stat-tile.tone-good .stat-value { color: var(--color-success); }
.stat-tile.tone-bad { border-left-color: var(--pastel-red); }
.stat-tile.tone-bad .stat-value { color: var(--color-danger); }
/* Pastelové akcentní varianty pro dlaždice bez jasného "dobře/špatně" tónu
   (např. souhrnné statistiky na Přehledu) – jen barevné odlišení, žádný
   sémantický význam jako u tone-good/tone-bad. */
.stat-tile.accent-blue { border-left-color: var(--pastel-blue); }
.stat-tile.accent-violet { border-left-color: var(--pastel-violet); }
.stat-tile.accent-teal { border-left-color: var(--pastel-teal); }
.stat-tile.accent-orange { border-left-color: var(--pastel-orange); }

/* Dlaždice, která odkazuje na seznam, ze kterého je číslo spočítané (viz
   partials.js statTile). Musí být na první pohled klikatelná, ale nesmí
   vypadat jako odkaz v textu – proto beze změny barvy a bez podtržení, jen
   nadzvednutí a výraznější stín při najetí. */
a.stat-tile-link { display: block; color: inherit; transition: box-shadow 0.12s ease, transform 0.12s ease, border-color 0.12s ease; }
a.stat-tile-link:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(20, 25, 35, 0.06), 0 8px 20px rgba(31, 41, 60, 0.10);
  border-color: var(--color-primary);
}
a.stat-tile-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Uživatelé s vypnutými animacemi nemají důvod vidět posun dlaždice. */
@media (prefers-reduced-motion: reduce) {
  a.stat-tile-link { transition: none; }
  a.stat-tile-link:hover { transform: none; }
}

/* Štítek s filtrem, který nepřišel z formuláře (např. "jen tento měsíc"
   z dlaždice na Přehledu) – aby bylo vidět, proč je seznam zúžený. */
.filter-chip {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--color-primary-tint); color: var(--color-primary-dark);
  font-size: 0.85rem; font-weight: 500;
}

.tabs { display: flex; gap: 2px; margin-bottom: 16px; background: var(--color-bg); padding: 4px; border-radius: var(--radius-pill); width: fit-content; max-width: 100%; flex-wrap: wrap; }
.tab { padding: 7px 16px; color: var(--color-muted); font-size: 0.88rem; border-radius: var(--radius-pill); }
.tab.active { color: var(--color-on-primary); background: var(--color-primary); font-weight: 600; }
.tab:hover { text-decoration: none; color: var(--color-primary-dark); }
.tab.active:hover { color: var(--color-on-primary); }

.kanban-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.kanban-column { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); min-width: 240px; flex: 1; display: flex; flex-direction: column; max-height: calc(100vh - 220px); }
.kanban-column-header { padding: 12px 14px; border-bottom: 1px solid var(--color-border); }
.kanban-column-header h3 { margin: 0 0 2px; font-size: 0.92rem; }
.kanban-column-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; min-height: 80px; }
.kanban-column-body.drag-over { background: var(--color-primary-tint); }
.kanban-empty { color: var(--color-muted); font-size: 0.8rem; text-align: center; padding: 10px 0; }

.deal-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 10px 12px; cursor: grab; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow); }
.deal-card.dragging { opacity: 0.4; }
.deal-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.deal-title { font-weight: 600; font-size: 0.88rem; }
.deal-amount { font-size: 0.85rem; color: var(--color-primary-dark); font-weight: 600; }
.deal-who, .deal-date { font-size: 0.78rem; color: var(--color-muted); }

.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.report-grid > * { min-width: 0; }
@media (max-width: 800px) { .report-grid { grid-template-columns: 1fr; } }
/* Karta přes celou šířku mřížky – pro grafy, které čtou lépe širší
   (trend čára, conversion funnel), než ve dvousloupcovém rastru. */
.card-wide { grid-column: 1 / -1; }

.chart-intro { margin: -6px 0 14px; font-size: 0.82rem; }

/* Inline SVG grafy v Reportech (trend pipeline, conversion funnel) – žádná
   externí grafová knihovna, hodnoty jsou přímo prezentační atributy SVG
   (fill/stroke/points/…), které CSP (style-src 'self') neomezuje; tady jen
   zajišťujeme, aby se SVG responzivně přizpůsobilo šířce karty. */
.report-chart { display: block; width: 100%; height: auto; max-width: 100%; }
.chart-value-label { font-size: 11px; font-weight: 600; fill: var(--color-text); }
.chart-axis-label { font-size: 10px; fill: var(--color-muted); }

/* Přetahovatelné karty/dlaždice v Reportech (viz reportsLayout.js) – atribut
   [draggable="true"] se nastavuje jen tady, takže tohle nijak neovlivní
   karty/dlaždice na jiných stránkách, které draggable nemají. */
[data-reports-reorder] > [draggable="true"] { cursor: grab; }
[data-reports-reorder] > [draggable="true"]:active { cursor: grabbing; }
[data-reports-reorder] > [draggable="true"].dragging { opacity: 0.4; }

.bar-row { display: grid; grid-template-columns: 160px 1fr 110px; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 0.85rem; }
.bar-label { color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: var(--color-bg); border-radius: 999px; height: 10px; overflow: hidden; }
.bar-fill { background: var(--color-primary); height: 100%; border-radius: 999px; }
/* Pastelové varianty pro odlišení jednotlivých grafů/karet v Reportech –
   uvnitř jednoho grafu (jedna karta) má každý řádek pořád stejnou barvu,
   protože všechny řádky tam kódují stejnou veličinu (částku/počet), ne
   různé kategorie – barva se mění jen mezi kartami, aby šly opticky
   odlišit od sebe. */
.bar-fill-teal { background: var(--pastel-teal); }
.bar-fill-violet { background: var(--pastel-violet); }
.bar-fill-orange { background: var(--pastel-orange); }
.bar-value { text-align: right; font-weight: 600; }

/* Na malých telefonech (viz iPhone SE, ~320px) se pevné sloupce popisku a
   hodnoty (160px + 110px) spolu s mřížkovou mezerou už nevejdou vedle
   pruhu grafu – zúžíme je, ať se řádek grafu nevejde jen na šířku, na
   kterou se dřív musela vodorovně posouvat celá stránka. */
@media (max-width: 480px) {
  .bar-row { grid-template-columns: 82px 1fr 62px; gap: 6px; font-size: 0.78rem; }
}

.error-page { text-align: center; padding: 80px 20px; }
.error-page h1 { font-size: 3rem; margin-bottom: 0; color: var(--color-muted); }

/* === Servisní modul === */

.service-tabs, .settings-tabs { margin-bottom: 22px; }

/* Rozcestník na nastavení, která žijí jinde v aplikaci (záložka Data
   a správa). Popisek patří pod odkaz, ne za něj – na jednom řádku splývá
   název s vysvětlením v jednu dlouhou větu. */
.link-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.link-list li { display: flex; flex-direction: column; gap: 2px; }
.link-list a { font-weight: 600; }

.row-soon td { color: var(--color-warning); }

.filter-form { flex-wrap: wrap; }
.filter-form select { padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); font: inherit; }

.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--color-text); font-weight: 500; }
/* Uvnitř .entity-form platí pro <label> obecně "flex-direction: column"
   (popisek nad polem). U zaškrtávacího políčka je ale potřeba řádek –
   selektor musí být stejně specifický jako `.entity-form label`, jinak by
   ho obecné pravidlo přebilo a checkbox by skončil nad textem. */
.entity-form label.checkbox-label { flex-direction: row; align-items: center; gap: 8px; color: var(--color-text); }
.checkbox-label input { width: auto; }

/* Výběr účastníků aktivity/servisního výjezdu (checkbox mřížka ve fieldsetu)
   a filtr "Kdo" ve výpisech – viz Aktivity, Servisní výjezdy a Kalendář. */
.participants-picker { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 12px 14px; margin: 0; }
.participants-picker legend { padding: 0 6px; font-size: 0.85rem; font-weight: 600; color: var(--color-muted); }
.participants-picker .field-hint { margin: 0 0 8px; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 14px; }
.who-filter-form { align-items: center; }

.device-photo { max-width: 100%; border-radius: var(--radius); border: 1px solid var(--color-border); display: block; margin-bottom: 10px; }
.photo-upload-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.photo-upload-form input[type="file"] { font-size: 0.82rem; }

/* Podpisové pole zákazníka na servisním protokolu (viz js/signaturePad.js).
   `touch-action: none` je tu to podstatné: bez něj by tah prstem po plátně
   místo kreslení roloval stránkou a podepsat se na telefonu by nešlo.
   Plátno je vždy světlé s tmavým inkoustem i v tmavém režimu – podpis se
   tiskne do PDF, které je světlé, takže by bílá čára byla neviditelná. */
.signature-pad { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.signature-pad-label { font-weight: 600; font-size: 0.9rem; }
.signature-pad-canvas {
  touch-action: none;
  width: 100%;
  height: 180px;
  max-width: 520px;
  background: #ffffff;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  cursor: crosshair;
}
.signature-pad.has-signature .signature-pad-canvas { border-style: solid; border-color: var(--color-primary); }
.signature-pad-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 520px; }
.signature-pad-actions .field-hint { margin: 0; }

/* Přílohy nabídky – nahrávací formulář a jejich výpis v úzkém sloupci
   detailu. Dlouhý název souboru se musí zalomit, ne roztáhnout kartu. */
.upload-form { display: flex; flex-direction: column; gap: 8px; }
.upload-form input[type="file"] { font-size: 0.82rem; max-width: 100%; }
.upload-form button { align-self: flex-start; }
.attachment-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.attachment-list li { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
.attachment-list li:last-child { border-bottom: none; padding-bottom: 0; }
.attachment-list a { font-weight: 600; overflow-wrap: anywhere; }
.attachment-list .muted { font-size: 0.78rem; }
.attachment-list .inline-form { align-self: flex-start; }
/* Lišta revizí nad detailem nabídky + zámek uzavřené revize. Aktivní revize
   není odkaz, ale zvýrazněné pole – stejný vzor jako přepínač v Kalendáři. */
.revbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
  padding: 10px 12px; background: var(--brand-blue-tint); border: 1px solid var(--revbar-border); border-radius: var(--radius); }
.revbar-label { font-size: .8rem; font-weight: 700; color: var(--brand-blue-ink); }
.revbar-spacer { flex: 1 1 auto; }
.revchip { display: inline-block; border: 1px solid var(--revbar-border); background: var(--color-surface); color: var(--brand-blue-ink);
  border-radius: var(--radius-pill); padding: 5px 13px; font-size: .82rem; font-weight: 600; text-decoration: none; }
.revchip:hover { background: var(--color-surface); border-color: var(--brand-blue); text-decoration: none; }
.revchip.is-active { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.lock-note { background: var(--note-bg); border: 1px solid var(--color-border); border-left: 3px solid var(--color-muted);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; font-size: .87rem; color: var(--color-muted); }
.lock-note strong { color: var(--color-text); }

/* Porovnání revizí – barevné podbarvení řádků podle druhu změny. */
.diff-add td { background: var(--diff-add-bg); }
.diff-del td { background: var(--diff-del-bg); color: var(--color-muted); }
.diff-chg td { background: var(--diff-chg-bg); }
.diff-tag { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.diff-tag.t-add { color: var(--color-success); }
.diff-tag.t-del { color: var(--color-danger); }
.diff-tag.t-chg { color: #b45309; }
.diff-old { color: var(--color-muted); text-decoration: line-through; margin-right: 6px; }
.diff-up { color: var(--color-success); }
.diff-down { color: var(--color-danger); }
.inline-label { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem;
  font-weight: 600; color: var(--color-muted); }

/* Sponka s počtem příloh v seznamu nabídek – drobná značka vedle čísla,
   která nesmí přetáhnout pozornost z odkazu na nabídku. */
.attachment-flag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 1px 7px 1px 5px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
}
.attachment-flag:hover { color: var(--color-text); border-color: var(--color-muted); }

.inline-select-group { display: flex; gap: 6px; }
.inline-select-group input { flex: 1; min-width: 130px; }
.inline-select-group select { flex: 1 1 auto; min-width: 130px; }
.input-with-button { display: flex; gap: 6px; flex-wrap: wrap; }
.input-with-button input { flex: 1; min-width: 120px; }
.input-with-button .btn { white-space: nowrap; }

.signature-preview { max-height: 48px; max-width: 140px; display: block; margin-bottom: 6px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.signature-actions { display: flex; flex-direction: column; gap: 4px; }
.signature-actions input[type="file"] { font-size: 0.78rem; max-width: 160px; }

.protocol-form { max-width: 900px; }
.protocol-form .checklist-table input[type="text"] { width: 100%; }
.checklist-radio-group { display: flex; gap: 12px; flex-wrap: wrap; white-space: nowrap; }
.checklist-radio-group label { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; font-weight: 400; color: var(--color-text); }
.checklist-radio-group input { width: auto; }

.device-photo-gallery { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.device-photo-item { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 160px; }
.device-photo-item .device-photo { width: 160px; height: 160px; object-fit: cover; margin-bottom: 0; }

.note-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.note-form textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius); resize: vertical; }
.notes-list { display: flex; flex-direction: column; gap: 12px; }
.note-item { border-top: 1px solid var(--color-border); padding-top: 10px; }
.note-item:first-child { border-top: none; padding-top: 0; }
.note-meta { font-size: 0.78rem; margin-bottom: 4px; }
.note-text { white-space: pre-wrap; font-size: 0.9rem; }

/* Víceřádkový text zadaný uživatelem (poznámky, úvodní text nabídky,
   doplňující informace). Bez pre-wrap by prohlížeč konce řádků sbalil do
   mezer a odstavce zadané v CRM by na obrazovce splynuly v jednu dlouhou
   větu, zatímco v PDF by se správně zalomily. overflow-wrap řeší dlouhý
   nepřerušený řetězec (odkaz, číslo objednávky), který by jinak přetekl
   z karty ven. */
.text-block { white-space: pre-wrap; overflow-wrap: anywhere; }

.planning-grid { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }
.planning-grid > * { min-width: 0; }
@media (max-width: 900px) { .planning-grid { grid-template-columns: 1fr; } }
.candidate-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.candidate-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.candidate-row input[type="checkbox"] { margin-top: 3px; }
.candidate-info { flex: 1; font-size: 0.85rem; }
.candidate-info .cand-name { font-weight: 600; }
.price-input { width: 90px; padding: 5px 8px; border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; }
/* Odvozená cenová hladina z poslední nabídky kola – drobný řádek pod polem. */
.price-from-quote { display: block; margin-top: 4px; font-size: 0.8rem; }
/* Nadpis skupiny nabídek (jedno kolo poptávky) v kartě Nabídky. */
.quote-group { margin: 14px 0 6px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); }
.quote-group:first-child { margin-top: 0; }

/* Číselné pole s výběrem jednotky vedle sebe (např. provize v % nebo Kč). */
.unit-input-group { display: flex; gap: 6px; }
.unit-input-group input { flex: 1; min-width: 0; }
.unit-input-group select { flex: 0 0 auto; }

/* Vstupní pole přímo v řádcích tabulky (např. kola poptávky u projektů,
   položky servisního výjezdu) – menší padding, aby se vešla do buňky. */
.data-table input, .data-table select { font: inherit; padding: 5px 8px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.round-label-input { width: 100%; min-width: 160px; }

.stat-tile.tone-warn .stat-value { color: var(--color-warning); }

/* ===== Kalendář ===== */
.card-header-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.card-header-row h2 { margin-bottom: 0; }

/* Přepínač Den / Týden / Měsíc v hlavičce Kalendáře. Aktivní pohled je
   <span>, ostatní odkazy – proto se styl váže na společnou třídu, ne na <a>. */
.view-switch { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-pill); overflow: hidden; background: var(--color-surface); }
.view-switch-btn { padding: 7px 16px; font-size: 0.85rem; font-weight: 600; line-height: 1; color: var(--color-muted); text-decoration: none; border-right: 1px solid var(--color-border); white-space: nowrap; }
.view-switch-btn:last-child { border-right: none; }
.view-switch-btn:hover { background: var(--color-bg); color: var(--color-text); text-decoration: none; }
.view-switch-btn.is-active { background: var(--color-primary); color: var(--color-on-primary); cursor: default; }
@media (max-width: 640px) {
  /* Na dotykovém displeji potřebuje přepínač větší plochu na prst. */
  .view-switch-btn { padding: 10px 18px; font-size: 0.88rem; }
}

.calendar-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.calendar-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.calendar-month-label { font-weight: 600; min-width: 130px; text-align: center; text-transform: capitalize; }

.calendar-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; font-size: 0.82rem; color: var(--color-muted); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
/* Barva podle druhu události – viz ACTIVITY_TYPE_HUE ve views/helpers.js. */
.legend-dot.dot-blue { background: var(--pastel-blue); }
.legend-dot.dot-teal { background: var(--pastel-teal); }
.legend-dot.dot-violet { background: var(--pastel-violet); }
.legend-dot.dot-pink { background: var(--pastel-pink); }
.legend-dot.dot-orange { background: var(--pastel-orange); }

.calendar-grid-scroll { overflow-x: auto; }
.calendar-grid { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--color-surface); min-width: 700px; }
.calendar-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar-week + .calendar-week { border-top: 1px solid var(--color-border); }
.calendar-weekday-header { background: var(--color-bg); font-size: 0.78rem; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.calendar-weekday-header > div { padding: 8px 10px; }
/* Buňka dne má PEVNOU výšku. S min-height rostl den podle počtu událostí
   a protože týden je mřížka, natáhl s sebou celý řádek – měsíc pak měl
   každý týden jinak vysoký a při procházení „poskakoval". Co se nevejde,
   se uvnitř buňky odroluje (viz .calendar-day-events), takže se nic
   neztratí a mřížka drží tvar. */
.calendar-day {
  height: var(--calendar-day-height, 132px);
  padding: 6px; border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
}
.calendar-week > .calendar-day:last-child { border-right: none; }
.calendar-day.is-other-month { background: var(--color-bg); }
.calendar-day.is-other-month .calendar-day-number a { color: var(--color-muted); }
.calendar-day.is-today { background: var(--color-primary-tint); box-shadow: inset 0 0 0 2px var(--color-primary); z-index: 1; position: relative; }
.calendar-day.is-today .calendar-day-number a { color: var(--color-primary-dark); }
.calendar-day-number { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.calendar-day-number a { font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
/* Tlačítko „+“ pro založení aktivity v daných dni. Klidně se schovává,
   dokud není buňka pod ukazatelem – jinak by v mřížce bylo 42 plusíček
   a přebila by samotné události. Na dotykovém zobrazení a při procházení
   klávesnicí je vidět vždy (není kam najet, viz :focus-visible a @media
   hover: none níže). */
.calendar-day-add {
  flex: 0 0 auto; width: 18px; height: 18px; line-height: 16px; text-align: center;
  border-radius: 5px; font-size: 0.9rem; font-weight: 700; text-decoration: none;
  color: var(--color-muted); background: transparent; opacity: 0;
  transition: opacity 0.12s ease, background-color 0.12s ease;
}
.calendar-day:hover .calendar-day-add,
.calendar-day-add:focus-visible { opacity: 1; }
.calendar-day-add:hover { background: var(--color-primary-tint); color: var(--color-primary-dark); text-decoration: none; }
@media (hover: none) {
  .calendar-day-add { opacity: 1; }
}
/* min-height: 0 je u flexové položky nutné, jinak by se nezmenšila pod
   výšku svého obsahu a přetekla by z buňky ven místo odrolování. */
.calendar-day-events {
  display: flex; flex-direction: column; gap: 3px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin;
}
/* Text události se zalomí na šířku buňky (dřív se ořezával třemi tečkami
   na jeden řádek). Dvě řádky jsou strop – delší předmět by jinak zabral
   celou buňku a ostatní události dne by nebyly vidět. Celý text zůstává
   v title, takže se ukáže po najetí myší. */
.calendar-event {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 0.72rem;
  line-height: 1.3;
  padding: 2px 5px;
  border-radius: 4px;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  border-left: 3px solid transparent;
  flex: 0 0 auto;
}
.calendar-event:hover { text-decoration: none; filter: brightness(0.97); }
/* Pozadí i akcentní linka podle druhu události (Raynet-styl rozlišení barvou
   – viz ACTIVITY_TYPE_HUE ve views/helpers.js); .tone-good/.tone-bad níže
   mají přednost, protože jde o kombinovaný selektor se stejnou specificitou,
   ale definovaný později v souboru. */
.calendar-event.chip-blue { background: var(--chip-blue-bg); color: var(--chip-blue-text); border-left-color: var(--pastel-blue); }
.calendar-event.chip-teal { background: var(--chip-teal-bg); color: var(--chip-teal-text); border-left-color: var(--pastel-teal); }
.calendar-event.chip-violet { background: var(--chip-violet-bg); color: var(--chip-violet-text); border-left-color: var(--pastel-violet); }
.calendar-event.chip-pink { background: var(--chip-pink-bg); color: var(--chip-pink-text); border-left-color: var(--pastel-pink); }
.calendar-event.chip-orange { background: var(--chip-orange-bg); color: var(--chip-orange-text); border-left-color: var(--pastel-orange); }
.calendar-event.tone-good { border-left-color: var(--color-success); }
.calendar-event.tone-bad { border-left-color: var(--color-danger); }
.calendar-event-time { font-weight: 600; margin-right: 3px; }
/* Odkaz „+N další" je mimo rolovací část, aby zůstal vidět vždy. */
.calendar-event-more { display: block; font-size: 0.72rem; color: var(--color-muted); padding: 2px 5px; flex: 0 0 auto; }
.calendar-event-more:hover { text-decoration: underline; }

.calendar-agenda-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.calendar-agenda-item {
  display: flex;
  gap: 14px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border-left: 3px solid transparent;
  background: var(--color-bg);
  font-size: 0.9rem;
}
/* Stejná paleta jako .calendar-event výše – jedna barva na druh aktivity,
   napříč měsíčním kalendářem, denní agendou i widgetem na Přehledu. */
.calendar-agenda-item.chip-blue { background: var(--chip-blue-bg); border-left-color: var(--pastel-blue); }
.calendar-agenda-item.chip-teal { background: var(--chip-teal-bg); border-left-color: var(--pastel-teal); }
.calendar-agenda-item.chip-violet { background: var(--chip-violet-bg); border-left-color: var(--pastel-violet); }
.calendar-agenda-item.chip-pink { background: var(--chip-pink-bg); border-left-color: var(--pastel-pink); }
.calendar-agenda-item.chip-orange { background: var(--chip-orange-bg); border-left-color: var(--pastel-orange); }
.calendar-agenda-when { min-width: 90px; color: var(--color-muted); font-size: 0.85rem; flex-shrink: 0; }
.calendar-agenda-time { font-weight: 600; color: var(--color-text); }
.calendar-agenda-date { font-weight: 600; color: var(--color-text); display: block; }
.calendar-agenda-company { margin-top: 2px; }
.calendar-agenda-participants { margin-top: 2px; }
.calendar-agenda-list-compact .calendar-agenda-item { padding: 7px 10px; font-size: 0.85rem; }
.calendar-agenda-list-compact .calendar-agenda-when { min-width: 76px; }

/* ===== Drobné rozestupové utility třídy ===== */
/* Nahrazují dřívější inline style="…" atributy. Přísná CSP hlavička této
   aplikace (style-src 'self', bez 'unsafe-inline') totiž inline styly stejně
   potichu blokuje – prohlížeč je jen ignoruje, takže se nic nerozbije, ale
   taky se nic z nich neprojeví. Místo rozvolňování CSP je čistší tahle
   drobná sada tříd přímo ve staticky servírovaném CSS souboru. */
.m-0 { margin: 0; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.w-full { width: 100%; }
.w-80 { width: 80px; }
.form-flush { padding: 0; border: none; box-shadow: none; }
.form-wide { max-width: none; }
.overflow-x-auto { overflow-x: auto; }
.text-danger { color: var(--color-danger); }

/* Procentuální šířky pruhových grafů (Reporty, přehled servisu podle typu
   zařízení) – ze stejného důvodu jako výše tříděné do pevné sady tříd po
   5 %, místo dynamického inline style="width:…%" (viz barRow() v
   partials.js). Krok 5 % je pro orientační srovnávací graf dostatečně jemný
   a zároveň drží počet tříd v rozumné míře. */
.pct-5 { width: 5%; }
.pct-10 { width: 10%; }
.pct-15 { width: 15%; }
.pct-20 { width: 20%; }
.pct-25 { width: 25%; }
.pct-30 { width: 30%; }
.pct-35 { width: 35%; }
.pct-40 { width: 40%; }
.pct-45 { width: 45%; }
.pct-50 { width: 50%; }
.pct-55 { width: 55%; }
.pct-60 { width: 60%; }
.pct-65 { width: 65%; }
.pct-70 { width: 70%; }
.pct-75 { width: 75%; }
.pct-80 { width: 80%; }
.pct-85 { width: 85%; }
.pct-90 { width: 90%; }
.pct-95 { width: 95%; }
.pct-100 { width: 100%; }

/* ===== Týdenní kalendářový widget na Přehledu (views/weekWidget.js) ===== */
/* Skutečná mřížka dny × hodiny (inspirace Raynet CRM), na rozdíl od
   měsíčního kalendáře výše, který je jen výpis. Barva bloku podle druhu
   aktivity – stejné .chip-* třídy jako .calendar-event a
   .calendar-agenda-item, aby byl systém barev napříč aplikací jednotný. */
/* Týdenní kalendář (dny × hodiny). Hlavička dnů, řádek "celý den" i hodinová
   mřížka sdílejí JEDNU definici sloupců (--week-cal-columns) a leží ve stejné
   posuvné oblasti – jinak se rozejdou o šířku svislého posuvníku, který ubere
   místo jen posuvné části. Svislé čáry kreslí vždy jen levý okraj buňky, ať
   se šířky sloupců neliší o pixel podle toho, kolik má která buňka rámečků. */
.week-cal { --week-cal-time-col: 44px;
  --week-cal-columns: var(--week-cal-time-col) repeat(7, minmax(0, 1fr));
  border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--color-surface); }
.week-cal-header { display: grid; grid-template-columns: var(--week-cal-columns);
  border-bottom: 1px solid var(--color-border); background: var(--color-bg);
  position: sticky; top: 0; z-index: 2; }
.week-cal-corner { min-width: 0; }
.week-cal-headcell { min-width: 0; text-align: center; padding: 8px 4px; font-size: 0.78rem; font-weight: 600; color: var(--color-muted); text-transform: capitalize; border-left: 1px solid var(--color-border); }
.week-cal-headcell.is-today { color: var(--color-primary-dark); background: var(--color-primary-tint); }
.week-cal-daynum { color: var(--color-text); font-weight: 700; }
.week-cal-headcell.is-today .week-cal-daynum { color: var(--color-primary-dark); }

.week-cal-allday-row { display: grid; grid-template-columns: var(--week-cal-columns);
  border-bottom: 1px solid var(--color-border); background: var(--color-surface);
  position: sticky; top: 33px; z-index: 1; }
.week-cal-allday-label { min-width: 0; font-size: 0.66rem; color: var(--color-muted); padding: 4px; }
/* min-width: 0 přepisuje výchozí min-width: auto flex položky – bez něj by
   dlouhý text celodenní události (viz .week-cal-chip, který ho teď zalamuje
   místo ořezávání) natáhl tento konkrétní sloupec širší než jeho spravedlivý
   1/7 podíl a posunul tak celý týdenní řádek vůči hodinové mřížce pod ním. */
.week-cal-allday-cell { min-width: 0; padding: 3px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--color-border); }
.week-cal-allday-cell.is-today { background: var(--color-primary-tint); }
.week-cal-chip { display: block; font-size: 0.72rem; padding: 2px 6px; border-radius: 6px; text-decoration: none; white-space: normal; overflow-wrap: break-word; line-height: 1.2; }
.week-cal-chip:hover { filter: brightness(0.97); text-decoration: none; }

.week-cal-body-scroll { max-height: 420px; overflow-y: auto; }
/* Na samostatné stránce týdenního pohledu je na mřížku víc místa než ve
   widgetu na Přehledu, ať uživatel nemusí scrolovat uvnitř kalendáře. */
.calendar-week-page .week-cal-body-scroll { max-height: min(70vh, 720px); }
.week-cal-grid { display: grid; grid-template-columns: var(--week-cal-columns); position: relative; }
.week-cal-hourcol { min-width: 0; position: relative; }
.week-cal-hourlabel { position: absolute; left: 0; right: 4px; text-align: right; font-size: 0.66rem; color: var(--color-muted); transform: translateY(-6px); }
.week-cal-daycol {
  min-width: 0;
  position: relative;
  border-left: 1px solid var(--color-border);
  background-image: repeating-linear-gradient(to bottom, var(--color-border) 0, var(--color-border) 1px, transparent 1px, transparent 32px);
}
/* Posuvník se počítá do šířky vždy, ne jen když se zrovna objeví – bez toho
   by mřížka po přetečení obsahu poskočila o jeho šířku do strany. */
.week-cal-body-scroll { scrollbar-gutter: stable; }
.week-cal-daycol.is-today { background-color: var(--color-primary-tint); }

.week-cal-event {
  position: absolute;
  height: 26px;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 0.72rem;
  line-height: 1.15;
  overflow: hidden;
  text-decoration: none;
  display: block;
  box-shadow: 0 1px 2px rgba(31, 36, 48, 0.08);
}
.week-cal-event:hover { filter: brightness(0.97); text-decoration: none; }

/* „+“ v hlavičce dne týdenního pohledu – jediná cesta k založení aktivity
   dostupná z klávesnice (hodinové plochy v mřížce jsou z pořadí vynechané). */
.week-cal-add {
  display: inline-block; margin-left: 4px; width: 16px; height: 16px; line-height: 14px;
  text-align: center; border-radius: 5px; font-size: 0.85rem; font-weight: 700;
  color: var(--color-muted); text-decoration: none; opacity: 0; transition: opacity 0.12s ease;
}
.week-cal-headcell:hover .week-cal-add,
.week-cal-add:focus-visible { opacity: 1; }
.week-cal-add:hover { background: var(--color-primary-tint); color: var(--color-primary-dark); text-decoration: none; }
@media (hover: none) {
  .week-cal-add { opacity: 1; }
}

/* Prázdná hodina v mřížce jako plocha pro založení aktivity. Leží POD bloky
   událostí (ty žádný z-index nemají a jsou v pořadí za ní), aby kliknutí na
   událost vedšlo na její detail, ne na nový zápis. */
.week-cal-slot {
  position: absolute; left: 0; right: 0; height: 32px;
  text-decoration: none; border-radius: 4px;
}
.week-cal-slot:hover { background: var(--color-primary-tint); }
.week-cal-event-time { font-weight: 700; }

/* Výška mřížky podle rozsahu hodin v okně (vždy 10–15 h, viz computeWindow()
   ve weekWidget.js) – 32 px na hodinu. */
.wc-hours-10 { height: 320px; }
.wc-hours-11 { height: 352px; }
.wc-hours-12 { height: 384px; }
.wc-hours-13 { height: 416px; }
.wc-hours-14 { height: 448px; }
.wc-hours-15 { height: 480px; }

/* Vodorovné rozřazení souběžných událostí téhož dne do max. 4 sloupců. */
.wc-left-0 { left: 2px; }
.wc-left-25 { left: 25%; }
.wc-left-33 { left: 33%; }
.wc-left-50 { left: 50%; }
.wc-left-67 { left: 67%; }
.wc-left-75 { left: 75%; }
.wc-w-25 { width: calc(25% - 3px); }
.wc-w-33 { width: calc(33% - 3px); }
.wc-w-50 { width: calc(50% - 3px); }
.wc-w-100 { width: calc(100% - 4px); }

/* Svislá pozice bloku v mřížce, zaokrouhlená na 16 px (~30 minut) – stejný
   důvod jako u .pct-N výše: přísná CSP (style-src 'self') by inline
   style="top:…px" tiše zablokovala, takže se použije předgenerovaná třída. */
.wc-top-0 { top: 0px; }
.wc-top-16 { top: 16px; }
.wc-top-32 { top: 32px; }
.wc-top-48 { top: 48px; }
.wc-top-64 { top: 64px; }
.wc-top-80 { top: 80px; }
.wc-top-96 { top: 96px; }
.wc-top-112 { top: 112px; }
.wc-top-128 { top: 128px; }
.wc-top-144 { top: 144px; }
.wc-top-160 { top: 160px; }
.wc-top-176 { top: 176px; }
.wc-top-192 { top: 192px; }
.wc-top-208 { top: 208px; }
.wc-top-224 { top: 224px; }
.wc-top-240 { top: 240px; }
.wc-top-256 { top: 256px; }
.wc-top-272 { top: 272px; }
.wc-top-288 { top: 288px; }
.wc-top-304 { top: 304px; }
.wc-top-320 { top: 320px; }
.wc-top-336 { top: 336px; }
.wc-top-352 { top: 352px; }
.wc-top-368 { top: 368px; }
.wc-top-384 { top: 384px; }
.wc-top-400 { top: 400px; }
.wc-top-416 { top: 416px; }
.wc-top-432 { top: 432px; }
.wc-top-448 { top: 448px; }
.wc-top-464 { top: 464px; }
.wc-top-480 { top: 480px; }

/* ===== Nabídky (řádkové položky) ===== */
/* Formulář nabídky je širší než běžný .entity-form (640px) kvůli tabulce
   položek o sedmi sloupcích – viz views/quotes.js quoteFormView. */
.entity-form-wide { max-width: 900px; }

.mono { font-variant-numeric: tabular-nums; }

.items-editor .quote-items-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.items-editor .quote-items-table th {
  text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--color-muted); padding: 0 8px 8px; font-weight: 600;
}
.items-editor .quote-items-table td { padding: 5px 8px; vertical-align: middle; }
.items-editor .quote-items-table input {
  width: 100%; padding: 7px 8px; border: 1px solid var(--color-border); border-radius: var(--radius);
  font: inherit; font-size: 0.88rem; background: var(--color-surface); color: var(--color-text);
}
.items-editor .quote-items-table input[type="number"] { text-align: right; }
.items-editor .col-desc { min-width: 200px; }
.items-editor .col-qty, .items-editor .col-unit { width: 80px; }
.items-editor .col-price, .items-editor .col-vat, .items-editor .col-discount { width: 92px; }
.items-editor .col-total { width: 100px; text-align: right; white-space: nowrap; }
.items-editor .col-remove { width: 36px; text-align: center; }

.items-editor .row-remove-btn {
  width: 26px; height: 26px; border-radius: var(--radius); border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-danger); font-size: 0.95rem; line-height: 1; cursor: pointer;
}
.items-editor .row-remove-btn:hover { background: var(--color-danger); color: #fff; }
.items-editor .row-remove-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Dynamický formulář položek nabídky na úzkých obrazovkách – stejný princip
   jako u .data-table (viz výše): řádek se poskládá jako karta a políčka
   pod sebe se svým popiskem (data-label), místo aby se tabulka vodorovně
   posouvala do stran. */
@media (max-width: 700px) {
  .items-editor .quote-items-table { min-width: 0; }
  .items-editor .quote-items-table thead { display: none; }
  .items-editor .quote-items-table, .items-editor .quote-items-table tbody { display: block; width: 100%; }
  .items-editor .quote-items-table tr {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px 10px 4px;
    margin-bottom: 10px;
  }
  .items-editor .quote-items-table td,
  .items-editor .col-desc,
  .items-editor .col-qty,
  .items-editor .col-unit,
  .items-editor .col-price,
  .items-editor .col-discount,
  .items-editor .col-vat,
  .items-editor .col-total,
  .items-editor .col-remove {
    display: block;
    width: auto;
    min-width: 0;
    text-align: left;
    white-space: normal;
    padding: 0 0 10px;
  }
  .items-editor .quote-items-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    color: var(--color-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
  }
  .items-editor .col-remove { text-align: right; padding-bottom: 0; }
}

.items-editor .add-row-btn {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: var(--radius); border: 1px dashed var(--color-border); background: transparent;
  color: var(--color-primary); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.items-editor .add-row-btn:hover { background: var(--color-primary-tint); border-style: solid; border-color: var(--color-primary); }

.totals-box {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border);
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.totals-box .row { display: flex; gap: 28px; font-size: 0.92rem; color: var(--color-muted); min-width: 220px; justify-content: space-between; }
.totals-box .row.grand {
  font-size: 1.08rem; font-weight: 700; color: var(--color-text);
  padding-top: 6px; border-top: 1px solid var(--color-border); margin-top: 4px;
}

/* --- Stránka Nastavení -------------------------------------------------- */

/* Nastavení je konfigurace, ne další modul CRM – v navigaci proto stojí
   trochu stranou od agend (Firmy, Obchody, …). */
/* Ve svislém panelu se „Nastavení“ jen oddělí odshora – margin-left: auto
   dávalo smysl jen ve staré vodorovné liště, kde odkaz odtlačilo doprava. */
.nav-link-secondary { margin-top: 2px; }

.settings-page .card { margin-bottom: 20px; }
.settings-page .entity-form { max-width: none; border: 0; box-shadow: none; padding: 0; background: transparent; }

/* Dvousloupcové rozložení krátkých polí (IČO, DIČ, telefon…); na úzké
   obrazovce se samo složí pod sebe. */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }

.branches-table input { width: 100%; }
.branches-table .col-remove { width: 36px; text-align: center; }
.branches-table .row-remove-btn {
  width: 26px; height: 26px; border-radius: var(--radius); border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-danger); font-size: 0.95rem; line-height: 1; cursor: pointer;
}
.branches-table .row-remove-btn:hover { background: var(--color-danger); color: #fff; }
.branches-table .row-remove-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 12px; }
.logo-card {
  border: 1px solid var(--color-border); border-radius: var(--radius); padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.logo-card h4 { margin: 0; font-size: 0.95rem; }
.logo-card .muted { margin: 0; }
/* Šachovnice pod logem, aby byla vidět průhlednost PNG. */
.logo-preview {
  display: flex; align-items: center; justify-content: center; min-height: 84px; padding: 8px;
  border-radius: var(--radius);
  background-color: var(--color-surface);
  background-image:
    linear-gradient(45deg, #eef1f5 25%, transparent 25%, transparent 75%, #eef1f5 75%),
    linear-gradient(45deg, #eef1f5 25%, transparent 25%, transparent 75%, #eef1f5 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
}
.logo-preview img { max-width: 100%; max-height: 72px; }

/* --- Filtrační panel seznamů (Obchody, Nabídky, Aktivity) --------------- */

/* Ve výchozím stavu je vidět jen tlačítko „Filtry a řazení“; celá dlaždice
   s poli se ukáže až po jeho rozkliknutí, aby seznam začínal hned pod
   hlavičkou stránky (na mobilu je to zhruba jedna obrazovka navíc). */
.filter-shell { margin-bottom: 16px; }
.filter-summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  cursor: pointer; list-style: none; padding: 0;
}
.filter-summary::-webkit-details-marker { display: none; }
.filter-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface); box-shadow: var(--shadow);
  font-size: 0.88rem; font-weight: 600; color: var(--color-primary-dark); white-space: nowrap;
}
.filter-summary:hover .filter-toggle { border-color: var(--color-primary); color: var(--color-primary); }
.filter-summary:focus-visible { outline: none; }
.filter-summary:focus-visible .filter-toggle {
  outline: 2px solid var(--color-primary); outline-offset: 2px; border-color: var(--color-primary);
}
.filter-toggle-icon { display: inline-block; transition: transform 0.12s ease; }
.filter-shell[open] .filter-toggle-icon { transform: rotate(180deg); }

.filter-panel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 14px 16px; margin-top: 10px; box-shadow: var(--shadow);
}
/* Pole se skládají do mřížky, která se sama zalomí – na mobilu vyjde jeden
   sloupec, na desktopu tři až čtyři, bez zvláštního pravidla pro každý
   breakpoint. */
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 14px; }
.filter-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.filter-field > span { font-size: 0.78rem; font-weight: 600; color: var(--color-muted); }
.filter-field input, .filter-field select {
  font: inherit; padding: 8px 10px; border: 1px solid var(--color-border);
  border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); min-width: 0;
}
.filter-field-wide { grid-column: span 2; }
@media (max-width: 640px) { .filter-field-wide { grid-column: span 1; } }

.filter-range-inputs { display: flex; align-items: center; gap: 8px; }
.filter-range-inputs input { flex: 1 1 0; min-width: 0; }
.filter-range-dash { color: var(--color-muted); }

.filter-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

@media (max-width: 640px) {
  .filter-panel { padding: 10px 12px; }
  .filter-actions { margin-top: 10px; }
  .filter-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Počet zapnutých filtrů a jejich stručný výpis vedle tlačítka – i se
   zavřeným panelem tak zůstane vidět, proč je seznam zúžený. */
.filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--color-primary); color: #fff; font-size: 0.75rem; font-weight: 700;
}
.filter-chips { display: inline-flex; flex-wrap: wrap; gap: 10px; }
/* Štítek zapnutého filtru: firemní modrá z loga jako podklad i rámeček,
   text v tmavším odstínu téže barvy (na světlém podkladu je čitelný, na
   plné modré by nebyl). Plný tvar pilulky, aby se štítky nepletly
   s tlačítky ani s odkazy v tabulce. */
.filter-chip-mini {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--brand-blue);
  background: var(--brand-blue-tint); color: var(--brand-blue-ink);
  font-size: 0.78rem; font-weight: 600; line-height: 1.35;
  box-shadow: 0 1px 2px rgba(23, 164, 221, 0.18), 0 2px 6px rgba(23, 164, 221, 0.12);
}
/* Křížek u štítku = odkaz na tentýž seznam bez tohoto jednoho filtru. */
.filter-chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(23, 164, 221, 0.16);
  color: inherit; text-decoration: none;
  font-size: 0.95rem; font-weight: 700; line-height: 1;
}
.filter-chip-remove:hover { background: var(--brand-blue); color: #fff; }
.filter-chip-remove:focus-visible {
  background: var(--brand-blue); color: #fff;
  outline: 2px solid var(--brand-blue); outline-offset: 2px;
}
/* Na dotykovém displeji potřebuje křížek větší plochu, než stačí myši. */
@media (max-width: 640px) {
  .filter-chips { gap: 8px; }
  .filter-chip-mini { padding: 5px 5px 5px 12px; }
  .filter-chip-remove { width: 24px; height: 24px; font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .filter-toggle-icon { transition: none; }
}

/* Souhrn nad tabulkou: počet nalezených záznamů a jejich objem. */
.result-summary { margin: 0 0 12px; color: var(--color-muted); font-size: 0.88rem; }

/* Posuvník rozsahu ceny – dvě překryté dráhy <input type=range>. Vlastní
   dráha i výplň jsou samostatné prvky pod nimi, aby vypadaly stejně ve všech
   prohlížečích (nativní ::-webkit-slider-runnable-track a ::-moz-range-track
   se stylují nekompatibilně). */
.range-slider { position: relative; height: 34px; margin-top: 2px; }
.range-track { position: absolute; top: 15px; left: 0; right: 0; height: 4px; background: var(--color-border); border-radius: 2px; }
.range-fill { position: absolute; top: 15px; height: 4px; background: var(--color-primary); border-radius: 2px; }
.range-slider .range-input {
  position: absolute; top: 0; left: 0; width: 100%; height: 34px; margin: 0; padding: 0;
  background: none; border: none; -webkit-appearance: none; appearance: none;
  /* Dráha nesmí brát doteky, jinak by překryla úchyt pod sebou – klikat jde
     jen do samotného úchytu (viz pointer-events: auto níže). */
  pointer-events: none;
}
.range-slider .range-input:focus { outline: none; }
.range-slider .range-input::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-surface); border: 2px solid var(--color-primary);
  box-shadow: 0 1px 3px rgba(20, 25, 35, 0.25); cursor: pointer;
}
.range-slider .range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-surface); border: 2px solid var(--color-primary);
  box-shadow: 0 1px 3px rgba(20, 25, 35, 0.25); cursor: pointer;
}

/* ===== Servisní plán v penězích (views/servicePlan.js) ===== */
/* Jednoproudový pruh: hotovo – naplánováno – nezařízeno. Podíly se berou
   z korun, ne z počtu zařízení – jeden velký výměník váží v plánu víc
   než pět malých. Šířky jsou třídy .pct-N (viz výše), takže po
   zaokrouhlení na 5 % může součet o pár procent přesáhnout – overflow
   přebytek ustřihne a pruh zůstane zarovnaný. */
.plan-bar {
  display: flex; height: 10px; min-width: 90px; overflow: hidden;
  border-radius: var(--radius-pill); background: var(--color-bg);
  border: 1px solid var(--color-border);
}
.plan-bar > span { display: block; height: 100%; }
.plan-hotovo { background: var(--chip-green-text); }
.plan-naplanovano { background: var(--chip-blue-text); }
.plan-nezarizeno { background: var(--color-border); }

/* Legenda pod tabulkou – tečky ve stejných barvách jako pruh. */
.plan-legenda { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 0; }
.plan-legenda .plan-tecka { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.plan-legenda .plan-tecka:not(:first-child) { margin-left: 8px; }

/* Měsíc, který je zrovna rozkliknutý v detailu pod tabulkou. */
.is-active-row > td { background: var(--color-bg); font-weight: 600; }