/*
  THEIKOS CRM – jediné ručně psané CSS (design/ZADANI-DESIGN.md).
  Rozvržení podle administrace Shoptetu (horní lišta, levé menu, bílá karta obsahu), barvy,
  písma a záměrné rozdíly THEIKOS: zelená #036400, zelený proužek pod lištou, Exo 2 v nadpisech.
  Mřížka 8 px. Body zlomu: 1 024 px (menu schované, karty pod sebou), 640 px (tabulky jako
  karty, tlačítka na plnou šířku); navíc 1 280 px (editor nabídky v jednom sloupci, náhled na
  požádání – vedle formuláře 480 px by strana A4 byla nečitelná), 1 200 px (karty detailu dvě
  a jedna, seznamy bez méně důležitých sloupců .tablet-skryt), 800 px (hledání v liště jako ikona) a cíle dotyku 40 px
  pod 640 px i na každém dotykovém zařízení. Stín jen u karty obsahu, přechod jen barvy (120 ms).
*/

@font-face { font-family: "Exo 2"; src: url("/pisma/Exo2-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: block; }
@font-face { font-family: "Exo 2"; src: url("/pisma/Exo2-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: "Roboto"; src: url("/pisma/Roboto-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Roboto"; src: url("/pisma/Roboto-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: block; }
@font-face { font-family: "Roboto"; src: url("/pisma/Roboto-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: block; }

:root {
  /* barvy (kap. 4) */
  --zelena: #036400; --zelena-tmava: #0b3d12; --zelena-svetla: #eef5ea; --zelena-hover: #04780a; --zluta: #ffd400;
  --pozadi: #f4f5f7; --karta: #ffffff; --linka: #e5e7eb; --hlavicka-tabulky: #f0f2f4;
  --text: #1c1c1c; --text-2: #6b7280; --text-3: #9ca3af;
  /* stavové dvojice pozadí / text */
  --stav-seda: #e5e7eb;    --stav-seda-text: #374151;
  --stav-zluta: #fff1a8;   --stav-zluta-text: #5b4a00;
  --stav-modra: #dbeafe;   --stav-modra-text: #1e3a8a;
  --stav-zelena: #dcfce7;  --stav-zelena-text: #14532d;
  --stav-cervena: #fee2e2; --stav-cervena-text: #7f1d1d;
  --cervena: #b91c1c; /* text chyby a nebezpečná tlačítka (kontrast 6,4 : 1 na bílé) */
  --ramecek: #d1d5db; /* šedý rámeček sekundárního tlačítka */
  --ramecek-pole: #cfd4da; /* rámeček polí formuláře (--linka zůstává linkám tabulek a karet) */
  --text-2-sede: #5f6672; /* --text-2 na šedém podkladu (--pozadi 5,3 : 1, --hlavicka-tabulky 5,2 : 1, --linka 4,7 : 1) */
  --vystraha: #a16207; /* rámeček pole s výstrahou a neuloženého pole (4,9 : 1 na bílé); --zluta jen štítkům */
  /* grafy */
  --graf-1: #036400; --graf-1-vypln: rgba(3, 100, 0, .12); --graf-2: #9ca3af; --graf-3: #ffd400; --graf-mrizka: var(--linka);
  /* písma */
  --pismo-nadpisy: "Exo 2", "Roboto", system-ui, sans-serif;
  --pismo: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* rozměry (mřížka 8 px) */
  --lista: 56px; --prouzek: 3px; --menu: 208px; --polozka-menu: 40px; --sirka-karty: 1280px; --okraj-karty: 24px;
  --radek: 44px; --pole: 36px; --tlacitko: 36px; --tlacitko-male: 30px;
  /* rádiusy */
  --r-karta: 12px; --r-detail: 10px; --r-prvek: 6px; --r-oval: 999px;
  /* stín jen karty obsahu, přechod jen barvy */
  --stin-karty: 0 1px 2px rgba(0, 0, 0, .05);
  --prechod: color 120ms, background-color 120ms, border-color 120ms;
}

/* ---------- základ ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--lista) + var(--prouzek) + 16px); } /* kotvy a zaostření pod přilepenou lištou */
html:has(.editor-lista) { scroll-padding-bottom: var(--vyska-listy, 96px); } /* zaostřené pole nezajede pod spodní lištu editoru (výšku měří editor) */
body { margin: 0; background: var(--pozadi); color: var(--text); font: 400 14px/1.45 var(--pismo); }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
h1, .titul-stranky { font: 600 24px/1.25 var(--pismo-nadpisy); color: var(--zelena-tmava); text-transform: none; letter-spacing: 0; }
.titul-stranky { margin: 8px 0 0; }
h2 { font: 600 14px/1.3 var(--pismo-nadpisy); text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin: 32px 0 12px; }
h3 { font: 600 16px/1.3 var(--pismo-nadpisy); color: var(--zelena-tmava); margin: 24px 0 8px; }
h4 { font-size: 14px; font-weight: 500; margin: 16px 0 8px; }
p { margin: 0 0 16px; }
ul, ol { margin: 0 0 16px; padding-left: 20px; }
a { color: var(--zelena); transition: var(--prechod); }
a:hover { color: var(--zelena-hover); }
:focus-visible { outline: 2px solid var(--zelena); outline-offset: 2px; }
code, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
pre { white-space: pre-wrap; word-break: break-word; margin: 0; }
strong, b { font-weight: 500; }
[hidden] { display: none !important; }
.ikona { flex: none; vertical-align: -3px; }
.jen-ctecka { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.preskocit { position: absolute; left: -9999px; top: 0; z-index: 50; }
.preskocit:focus { left: 16px; top: 16px; background: var(--karta); padding: 8px 16px; border: 2px solid var(--zelena); border-radius: var(--r-prvek); }

/* ---------- horní lišta a proužek ---------- */
.hlavicka { position: sticky; top: 0; z-index: 30; }
.lista { height: var(--lista); background: var(--karta); display: flex; align-items: center; gap: 16px; padding: 0 16px; }
.prouzek { height: var(--prouzek); background: var(--zelena); }
.lista-znacka { display: flex; align-items: center; align-self: stretch; gap: 10px; text-decoration: none; flex: none; width: calc(var(--menu) - 16px); }
.lista-znacka img { height: 28px; width: auto; display: block; }
.znacka-crm { font: 400 18px/1 var(--pismo); letter-spacing: .14em; color: var(--text-2); padding-left: 10px; border-left: 1px solid var(--linka); }
.lista-hledani { position: relative; width: 360px; min-width: 0; margin: 0; }
.lista-hledani .ikona { position: absolute; left: 12px; top: 10px; color: var(--text-2); pointer-events: none; }
.lista-hledani input[type="search"] { padding-left: 36px; max-width: none; background: var(--pozadi); }
.lista-hledani input[type="search"]::placeholder { color: var(--text-2-sede); }
.lista-vpravo { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lista-tlacitko { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--r-prvek); background: none; color: var(--text); cursor: pointer; transition: var(--prechod); }
.lista-tlacitko:hover { background: var(--pozadi); color: var(--text); }
.lista-zvonek .pocet { position: absolute; top: 2px; right: 0; }
.lista-menu, .lista-hledat-ikona { display: none; }
.lista-uzivatel { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; padding: 0 8px; }
.lista-jmeno { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-role { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.menu-odhlaseni { margin: 0; }

/* ---------- levé menu ---------- */
.rozvrzeni { display: grid; grid-template-columns: var(--menu) minmax(0, 1fr); min-height: calc(100vh - var(--lista) - var(--prouzek)); }
.menu { background: var(--karta); border-right: 1px solid var(--linka); padding: 16px 8px; }
.menu-seznam, .menu-podmenu { list-style: none; margin: 0; padding: 0; }
.menu-odkaz { display: flex; align-items: center; gap: 12px; height: var(--polozka-menu); padding: 0 12px; border-radius: var(--r-prvek); color: var(--text); text-decoration: none; font-size: 14px; transition: var(--prechod); }
.menu-odkaz:hover { background: var(--pozadi); color: var(--text); }
.menu-odkaz .ikona { color: var(--text-2); } .menu-odkaz[aria-current="page"] { background: var(--zelena-svetla); color: var(--zelena-tmava); font-weight: 500; }
.menu-odkaz[aria-current="page"] .ikona { color: var(--zelena); }
.menu-rozbalena > .menu-odkaz[aria-current="page"] { background: none; }
.menu-odkaz .pocet { margin-left: auto; }
/* část pozdějšího milníku: šedě, pod názvem „od milníku N“; ani na své zástupné stránce nevypadá jako hotová část */
.menu-texty { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.menu-pozdeji-text { font-size: 12px; font-weight: 400; } .menu-odkaz.menu-pozdeji { color: var(--text-2); font-weight: 400; }
.menu-odkaz.menu-pozdeji .ikona { color: var(--text-3); }
.menu-odkaz.menu-pozdeji:hover, .menu-odkaz.menu-pozdeji[aria-current="page"] { background: var(--pozadi); color: var(--text-2-sede); font-weight: 400; } /* na šedém podkladu 5,3 : 1 */
.menu-podmenu { margin: 2px 0 8px; }
.menu-podpolozka { display: flex; align-items: center; min-height: 32px; padding: 4px 12px 4px 42px; border-radius: var(--r-prvek); color: var(--text); text-decoration: none; font-size: 13.5px; line-height: 1.3; transition: var(--prechod); }
.menu-podpolozka:hover { background: var(--pozadi); color: var(--text); }
.menu-podpolozka[aria-current="true"] { background: var(--zelena-svetla); color: var(--zelena-tmava); font-weight: 500; }
.menu-mobil { display: none; }

/* ---------- obsah a karta obsahu ---------- */
.obsah { min-width: 0; padding: 12px var(--okraj-karty) 48px; }
.obsah-vnitrek { max-width: var(--sirka-karty); margin: 0 auto; }
.karta-obsahu { position: relative; background: var(--karta); border-radius: var(--r-karta); box-shadow: var(--stin-karty); padding: var(--okraj-karty); margin-bottom: 24px; }
.karta-akce { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-height: var(--tlacitko); }
.karta-akce .stav-ukladani { margin-right: 8px; }
.karta-akce:not(:has(.tlacitko)) { min-height: 0; }  /* bez tlačítek: název hned nahoře, indikátor v rohu */
.karta-akce:not(:has(.tlacitko)) .stav-ukladani { position: absolute; top: var(--okraj-karty); right: var(--okraj-karty); margin: 0; }
.karta-obsahu > h1, .detail-titul { margin-top: 8px; }
.ucel { margin: 4px 0 24px; color: var(--text-2); max-width: 72ch; }
.karta-obsahu > :last-child { margin-bottom: 0; }
.akce { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0; }
.akce-vpravo { justify-content: flex-end; }
.akce-plna .tlacitko { flex: 1 1 100%; }
.sloupce { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.sekce { margin-bottom: 32px; }
.blok { background: var(--pozadi); border-radius: var(--r-detail); padding: 16px; margin-bottom: 16px; }
.blok > :last-child { margin-bottom: 0; }
.blok .pole > label, .blok .popisek-pole, .blok .udaje dt, .blok .napoveda { color: var(--text-2-sede); } /* 5,3 : 1 na šedém podkladu */
.pod, .popis { display: block; color: var(--text-2); font-size: 12px; }
.cislo-hodnota, .cislo { font-variant-numeric: tabular-nums; }

/* drobečková navigace */
.drobecky ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 4px 0 12px; font-size: 13px; color: var(--text-2-sede); }
.drobecky li { display: flex; align-items: center; gap: 8px; }
.drobecky li + li::before { content: "›"; color: var(--text-3); }
.drobecky a { color: var(--text); font-weight: 500; text-decoration: none; }
.drobecky a:hover { color: var(--zelena); } .drobecky a .ikona { vertical-align: -3px; }

/* samostatná stránka (přihlášení, aktivace) */
.samostatna { display: flex; flex-direction: column; align-items: center; padding: 56px 16px; }
.samostatna-znacka { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; text-decoration: none; }
.samostatna-znacka img { height: 40px; width: auto; }
.samostatna-znacka .znacka-crm { color: var(--text-2-sede); }
.samostatna .karta-obsahu { width: 100%; max-width: 400px; padding: 32px; }
.samostatna .karta-obsahu > h1 { margin-top: 0; } .samostatna .ucel { margin-bottom: 24px; }

/* ---------- tlačítka ---------- */
.tlacitko { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--tlacitko); padding: 0 16px; border: 1px solid var(--ramecek); border-radius: var(--r-prvek); background: var(--karta); color: var(--text); font: 500 14px/1 var(--pismo); text-decoration: none; white-space: nowrap; cursor: pointer; transition: var(--prechod); }
.tlacitko:hover { background: var(--pozadi); color: var(--text); }
.tlacitko-primarni { background: var(--zelena); border-color: var(--zelena); color: #fff; }
.tlacitko-primarni:hover { background: var(--zelena-hover); border-color: var(--zelena-hover); color: #fff; }
.tlacitko-nebezpecne { color: var(--cervena); border-color: var(--cervena); }
.tlacitko-nebezpecne:hover { background: var(--stav-cervena); color: var(--stav-cervena-text); }
.tlacitko-textove { border-color: transparent; background: transparent; color: var(--zelena); padding: 0 8px; }
.tlacitko-textove:hover { background: var(--zelena-svetla); color: var(--zelena-tmava); }
.tlacitko-male { height: var(--tlacitko-male); padding: 0 12px; font-size: 13px; }
.tlacitko-textove.tlacitko-male { padding: 0 8px; }
.tlacitko[disabled], .tlacitko[aria-disabled="true"] { background: var(--pozadi); border-color: var(--linka); color: var(--text-3); cursor: not-allowed; }
.tlacitko-nacitani { display: none; }
.htmx-request .tlacitko-nacitani, .htmx-request.tlacitko .tlacitko-nacitani, .tlacitko.odesila .tlacitko-nacitani { display: inline; }
.htmx-request .tlacitko-text, .htmx-request.tlacitko .tlacitko-text, .tlacitko.odesila .tlacitko-text { display: none; }
.tlacitko.odesila, .tlacitko.htmx-request { cursor: progress; }
.tlacitko-primarni.odesila[disabled], .tlacitko-primarni.htmx-request[disabled] { background: var(--zelena-hover); border-color: var(--zelena-hover); color: #fff; }
.tlacitko-ikona { width: var(--tlacitko); padding: 0; }
.tlacitko-ikona.tlacitko-male { width: var(--tlacitko-male); padding: 0; }
.tlacitko-odkaz { background: none; border: 0; padding: 0; font: inherit; color: var(--zelena); text-decoration: underline; cursor: pointer; }
summary.tlacitko { list-style: none; } summary.tlacitko::-webkit-details-marker { display: none; }

/* ---------- chip stavu, štítek počtu ---------- */
.stitek { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: var(--r-oval); font: 500 12px/1 var(--pismo); white-space: nowrap; vertical-align: middle; }
a:has(> .stitek) { text-decoration: none; } /* štítek jako odkaz (karta Po dodání) bez podtržení */ .stitek-seda { background: var(--stav-seda); color: var(--stav-seda-text); }
.stitek-zluta { background: var(--stav-zluta); color: var(--stav-zluta-text); }
.stitek-modra { background: var(--stav-modra); color: var(--stav-modra-text); }
.stitek-zelena { background: var(--stav-zelena); color: var(--stav-zelena-text); }
.stitek-cervena { background: var(--stav-cervena); color: var(--stav-cervena-text); }
.pocet { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-oval); background: var(--zluta); color: var(--zelena-tmava); font: 700 12px/1 var(--pismo); }

/* ---------- záložky (pills) ---------- */
.pilulky { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--hlavicka-tabulky); border-radius: 20px; max-width: 100%; } /* jedna řada = ovál, zalomená = zaoblený obdélník */
.pilulka { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-oval); background: transparent; color: var(--text); font: 400 13.5px/1 var(--pismo); text-decoration: none; white-space: nowrap; cursor: pointer; transition: var(--prechod); }
.pilulka:hover { background: var(--linka); color: var(--text); }
.pilulka-pocet { color: var(--text-2-sede); }
.pilulka[aria-current="page"], .pilulka[aria-selected="true"], .pilulka[aria-pressed="true"] { background: var(--zelena); color: #fff; }
.pilulka[aria-current="page"] .pilulka-pocet, .pilulka[aria-selected="true"] .pilulka-pocet { color: #fff; }
.nastroje { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px; }
.nastroje-vlevo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---------- karty a dlaždice ---------- */
.karta { background: var(--karta); border: 1px solid var(--linka); border-radius: var(--r-detail); overflow: hidden; margin-bottom: 16px; }
.karta-zahlavi { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 8px 0 16px; background: var(--hlavicka-tabulky); }
.karta-zahlavi .karta-nazev, .karta-nazev { font: 600 16px/1.2 var(--pismo-nadpisy); color: var(--zelena-tmava); margin: 0; text-transform: none; letter-spacing: 0; }
.karta-telo { padding: 16px; } .karta-telo > :last-child { margin-bottom: 0; }
.karta-telo > .tabulka-obal:first-child { margin-top: -8px; }
.dlazdice-rada { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 0 0 24px; }
.dlazdice { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; background: var(--hlavicka-tabulky); border-radius: var(--r-detail); color: var(--text); text-align: center; text-decoration: none; transition: var(--prechod); }
a.dlazdice:hover { background: var(--linka); color: var(--text); }
.dlazdice-popisek, .dlazdice-pomocny, .dlazdice-zmena { font-size: 12px; color: var(--stav-seda-text); }
.dlazdice-cislo { font: 600 22px/1.2 var(--pismo-nadpisy); font-variant-numeric: tabular-nums; }
.dlazdice-zmena { display: inline-flex; align-items: center; gap: 2px; }
.dlazdice-zmena-vystraha { color: var(--cervena); font-weight: 500; }
.dlazdice-aktivni, a.dlazdice-aktivni:hover { background: var(--zelena); color: #fff; }
.dlazdice-aktivni .dlazdice-popisek, .dlazdice-aktivni .dlazdice-pomocny, .dlazdice-aktivni .dlazdice-zmena { color: #fff; }

/* ---------- tabulka ---------- */
.tabulka-obal { position: relative; width: 100%; overflow-x: auto; } /* relative: texty .jen-ctecka zůstanou uvnitř posuvného obalu */
.tabulka { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tabulka th { height: 36px; padding: 8px 12px; background: var(--hlavicka-tabulky); text-align: left; font-weight: 500; font-size: 13px; white-space: nowrap; }
.tabulka th:first-child { border-radius: var(--r-prvek) 0 0 var(--r-prvek); }
.tabulka th:last-child { border-radius: 0 var(--r-prvek) var(--r-prvek) 0; }
.tabulka td { height: var(--radek); padding: 6px 12px; line-height: 1.35; border-bottom: 1px solid var(--linka); vertical-align: middle; }
.tabulka .pod { line-height: 1.3; } .tabulka tbody tr:hover { background: #fafafa; }
.tabulka .cislo { text-align: right; white-space: nowrap; } .tabulka .cislo input { text-align: right; }
/* tabulka s poli (ceník) se vejde do 1 440 px: užší okraje a pole, záhlaví se smí zalomit */
.tabulka-popisky th, .tabulka-popisky td { padding-left: 8px; padding-right: 8px; }
.tabulka-popisky th, .tabulka-popisky th.cislo { white-space: normal; }
.tabulka-popisky .pole input[type="text"] { min-width: 4rem; }
.tabulka .bez-zalomeni, .tabulka .bunka-stav { white-space: nowrap; } /* chip stavu a chip „v2 koncept“ vedle sebe (pokyn 2.1) */
.tabulka .zlom { overflow-wrap: anywhere; min-width: 14rem; }
.tabulka .zlom code { white-space: normal; overflow-wrap: anywhere; } /* dlouhá cesta se zalomí, neuteče z tabulky */
/* tabulka údajů (Nastavení → Systém): první sloupec je záhlaví řádku (th scope="row") a vypadá jako buňka */
.tabulka tbody th[scope="row"] { height: var(--radek); padding: 6px 12px; background: none; border-radius: 0; border-bottom: 1px solid var(--linka); font-size: inherit; font-weight: 400; line-height: 1.35; white-space: normal; vertical-align: middle; }
/* dlouhý text na jeden řádek s výpustkou (celý v title); sloupec bere volné místo, nejméně 5rem */
.tabulka td.zkratit { max-width: 0; min-width: 5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabulka td.zkratit > * { overflow: hidden; text-overflow: ellipsis; }
.tabulka th.zkratit { width: 20%; white-space: normal; } /* volné místo tabulky dostanou zkracované sloupce */ .tabulka td.bunka-shoptet { min-width: 7.5rem; white-space: normal; } /* stav ve Shoptetu: zalomit, neořezávat */
.tabulka .prazdne { padding: 32px 12px; text-align: center; color: var(--text-2); }
/* přístup do částí (R95): část × Vidí / Upravuje; label kolem zaškrtávátka = dotyková plocha 40 × 40 px */
.tabulka-pristupy .bunka-pristup { width: 1%; padding-left: 4px; padding-right: 4px; text-align: center; }
.tabulka-pristupy tbody tr:hover { background: none; }
.tabulka-pristupy .zaskrtnuti { justify-content: center; min-width: 40px; min-height: 40px; }
.tabulka-pristupy .zaskrtnuti:has(input:disabled) { cursor: default; }
.tabulka tbody tr:hover:has(.prazdne) { background: none; }
.prazdne-akce { display: flex; justify-content: center; margin-top: 12px; }
.tabulka pre { max-height: 16rem; overflow: auto; } .tabulka code { white-space: nowrap; }
.tabulka .pole { margin: 0; }
.tabulka input[type="text"], .tabulka select { min-width: 5.5rem; }
.tabulka select.volba-platce { width: 100%; max-width: 24rem; } /* Velkoobchod z plateb: volba u plátce s dlouhými názvy firem */
.nakupy-nadpis:first-child, .napoveda + .nakupy-nadpis { margin-top: 8px; } /* záložka Nákupy: E-shop a Velkoobchod pod záložkami */
.bunka-obsah { overflow-wrap: anywhere; } /* dlouhý účet (IBAN) se v buňce zalomí */
.tabulka th.zahlavi-zalomit { white-space: normal; } .tabulka th.zahlavi-zalomit .razeni { display: inline; } /* seznam firem: hlavička na dva řádky */
@media (min-width: 1200px) and (max-width: 1279px) { .tabulka:has(#firmy-radky) :is(th, td) { padding-left: 8px; padding-right: 8px; } } /* deset sloupců seznamu firem těsně nad 1 200 px */
.tabulka td.bunka-web { max-width: 0; min-width: 5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tabulka th.bunka-web { width: 14%; } .tlumene { color: var(--text-2); } /* seznam firem: web jako doména na jeden řádek s výpustkou (celá v title), „hledá se“ / „nenalezen“ tlumeně (R130) */
@media (min-width: 1200px) and (max-width: 1365px) { .tabulka .firmy-uroven { display: none; } } /* R130: jedenáct sloupců seznamu firem se do 1 365 px nevejde i s velkými částkami – Úroveň (většinou „–“, je v profilu) až od 1 366 px */
.bunka-id a { font-weight: 500; text-decoration: none; } .bunka-id a:hover { text-decoration: underline; }
.bunka-vyber { width: 40px; } .radek-odkaz { cursor: pointer; }
.razeni { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.razeni .ikona { color: var(--text-2); } th[aria-sort] .razeni .ikona { color: var(--zelena); }
.akce-radku { width: 1%; text-align: right; white-space: nowrap; }
.akce-najeti { display: inline-flex; gap: 4px; visibility: hidden; }
tr:hover .akce-najeti, tr:focus-within .akce-najeti { visibility: visible; }
.nacist-dalsi { display: flex; justify-content: center; padding-top: 16px; }
.typ-zaznamu { display: inline-flex; align-items: flex-start; gap: 8px; }
.typ-zaznamu .ikona { color: var(--text-2); margin-top: 1px; }
@media (hover: none) { .akce-najeti { visibility: visible; } }

/* ---------- formuláře ---------- */
.pole { margin: 0 0 16px; min-width: 0; }
.pole > label, .popisek-pole, .pole legend { display: block; margin-bottom: 4px; font-size: 12px; color: var(--text-2); }
.povinne { color: var(--text-2); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"],
input[type="password"], input[type="search"], input[type="url"], input:not([type]), select, textarea {
  display: block; width: 100%; max-width: 34rem; height: var(--pole); padding: 0 10px;
  border: 1px solid var(--ramecek-pole); border-radius: var(--r-prvek); background: var(--karta);
  color: var(--text); font: inherit; transition: var(--prechod);
}
textarea { height: auto; min-height: 72px; padding: 8px 10px; max-width: 48rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-2); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--zelena); outline-offset: -1px; border-color: var(--zelena); }
input[readonly], textarea[readonly], select[disabled], input[disabled], textarea[disabled] { background: var(--pozadi); color: var(--text-2-sede); }
.pole-chyba input, .pole-chyba select, .pole-chyba textarea,
.pole-chyba-kontrola input, .pole-chyba-kontrola select, .pole-chyba-kontrola textarea { border-color: var(--cervena); }
.pole-vystraha input, .pole-vystraha select, .pole-vystraha textarea { border-color: var(--vystraha); }
.napoveda, .chyba, .vystraha { margin: 0 0 12px; font-size: 12px; }
.pole .napoveda, .pole .chyba, .pole .vystraha { margin: 4px 0 0; }
.napoveda { color: var(--text-2); } .chyba { color: var(--cervena); }
.chyba.doplnit { color: var(--text-2); } /* údaj teprve chybí: nápověda, dokud se nestiskne Ke schválení nebo Odeslat */
[data-ukazat-chyby] .chyba.doplnit { color: var(--cervena); }
.chyba-radku > .chyba { margin: 4px 0 0; white-space: normal; }
.vystraha { color: var(--stav-zluta-text); }
.pole-s-jednotkou { position: relative; max-width: 34rem; }
.pole-s-jednotkou input { padding-right: 44px; text-align: right; }
.jednotka { position: absolute; right: 10px; top: 0; bottom: 0; display: flex; align-items: center; color: var(--text-2); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--zelena); flex: none; }
input[type="file"] { display: block; width: 100%; max-width: 34rem; font: inherit; color: var(--text-2); }
input[type="file"]::file-selector-button { height: var(--pole); margin-right: 12px; padding: 0 16px; border: 1px solid var(--linka); border-radius: var(--r-prvek); background: var(--karta); color: var(--text); font: inherit; cursor: pointer; transition: var(--prechod); }
input[type="file"]::file-selector-button:hover { background: var(--pozadi); }
.zaskrtnuti, .pole > .zaskrtnuti, .pole-prepinac .zaskrtnuti { display: flex; align-items: center; gap: 8px; min-height: 32px; margin: 0; font-size: 14px; color: var(--text); cursor: pointer; }
fieldset.pole { border: 0; padding: 0; }
.pole-prepinac.vodorovne .zaskrtnuti { display: inline-flex; margin-right: 16px; }
input.vypinac { appearance: none; position: relative; width: 36px; height: 20px; border-radius: var(--r-oval); background: var(--ramecek); cursor: pointer; transition: var(--prechod); }
input.vypinac::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
input.vypinac:checked { background: var(--zelena); } input.vypinac:checked::before { left: 18px; }
.mrizka { display: grid; gap: 0 16px; } .mrizka-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mrizka-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mrizka-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mrizka input, .mrizka select, .mrizka textarea { max-width: none; }
.hodnota-jen-cteni { margin: 0; white-space: pre-wrap; } .souhrn-pole { display: block; }
.nahled-stitku { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 32px; margin: 0 0 16px; } .nahled-stitku .popisek-pole { margin: 0; } .zastupne-hodnota { display: block; } /* Zástupná pole: hodnoty pod sebou */ .stitek-sklizne { display: inline-block; padding: 5px 12px; border-radius: 4px; background: var(--zluta); color: var(--zelena-tmava); font: 700 13px/1.2 var(--pismo-nadpisy); } /* Texty nabídky: náhled žlutého štítku sklizně jako v PDF */

/* filtr pod tlačítkem Filtr */
.filtr { margin: 0 0 16px; text-align: right; }
.filtr-telo { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 16px; margin-top: 8px; padding: 16px; border: 1px solid var(--linka); border-radius: var(--r-detail); text-align: left; }
.filtr-telo input, .filtr-telo select { max-width: none; }
.filtr-akce { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- hlášky, indikátor ukládání ---------- */
.zprava { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; padding: 12px 16px; border-left: 4px solid var(--zelena); border-radius: 0 var(--r-prvek) var(--r-prvek) 0; background: var(--pozadi); color: var(--text); }
.zprava-vystraha { border-left-color: var(--zluta); }
.zprava-chyba { border-left-color: var(--cervena); }
.zprava-ikona { margin-top: 2px; color: var(--zelena); }
.zprava-vystraha .zprava-ikona { color: var(--stav-zluta-text); }
.zprava-chyba .zprava-ikona { color: var(--cervena); }
.zprava-text { flex: 1; } .zprava-akce { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } /* tlačítko v hlášce (Zapsáno → Nový úkol) */
.zprava-zavrit { display: inline-flex; margin: -4px -8px -4px 0; padding: 4px; border: 0; border-radius: var(--r-prvek); background: none; color: var(--text-2); cursor: pointer; }
.zprava-zavrit:hover { background: var(--linka); color: var(--text); }
.zprava .tlacitko-odkaz, .zprava a { margin-left: 4px; }
.stav-ukladani { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.stav-ukladani:empty { display: none; }
.stav-ukladani.neulozeno, .stav-ukladani[data-stav="neulozeno"] { color: var(--cervena); font-weight: 500; }
.stav-ukladani[data-stav="zamek"] { padding: 2px 10px; border-radius: var(--r-oval); background: var(--stav-zluta); color: var(--stav-zluta-text); }
/* mimo editor (ten má indikátor v přilepené spodní liště): „Neuloženo – bez připojení“ a „Upravuje …“ v rohu
   obrazovky pod horní lištou, ať je vidět i při úpravě pole dole na dlouhé stránce (ZADANI 13.2) */
.karta-akce .stav-ukladani[data-stav="neulozeno"], .karta-akce .stav-ukladani[data-stav="zamek"] { position: fixed; top: calc(var(--lista) + var(--prouzek) + 8px); right: 16px; z-index: 35; width: auto; margin: 0; padding: 6px 12px; border: 1px solid currentColor; border-radius: var(--r-oval); background: var(--karta); }
.karta-akce .stav-ukladani[data-stav="zamek"] { background: var(--stav-zluta); }
.zprava-text > ul { margin: 8px 0 0; }
.chyby-seznam { color: var(--cervena); }
.strankovani { display: flex; gap: 16px; margin-top: 16px; }

/* htmx: ukazatel průběhu jen skrýt a ukázat */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* ---------- detail záznamu ---------- */
.detail-titul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.detail-titul h1, .detail-titul h2 { font: 600 24px/1.25 var(--pismo-nadpisy); color: var(--zelena-tmava); text-transform: none; letter-spacing: 0; margin: 0; }
.detail-cislo { font-variant-numeric: tabular-nums; }
.detail-datum { color: var(--text-2); font-size: 13px; }
.detail-karty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 8px; }
.detail-karty .karta { margin-bottom: 0; }
.detail-karty > .karta-cela { grid-column: 1 / -1; } /* čtvrtá karta (položky a cena) na celou šířku pod třemi */
.karta-telo > :first-child, .karta-telo > .mrizka > * > :first-child { margin-top: 0; }
.udaje { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; align-items: baseline; margin: 0; font-size: 13.5px; }
.udaje dd > .stitek { vertical-align: baseline; } /* chip (vztah firmy) na řádku s popiskem, i vedle tlačítka Zpět */
.udaje dt { color: var(--text-2); }
.udaje dd { margin: 0; overflow-wrap: anywhere; } .dodaci-odkud { margin: 0 0 12px; font-size: 13.5px; } .dodaci-odkud-popisek { color: var(--text-2); } /* Dodací adresa zakázky (R75) */
.zalozky-detailu { margin: 24px 0 16px; }
[role="tabpanel"] { outline: none; }

/* Nastavení: záložky jen v podmenu levého menu, obsah na celou šířku karty (design kap. 6) */
.nastaveni-obsah > h2:first-child, .nastaveni-sekce:first-child > h2:first-child { margin-top: 0; }
.nastaveni-sekce { margin-bottom: 32px; }
.historie-zmeny { margin: 0; padding-left: 18px; }
.historie-zmeny li { margin-bottom: 4px; }
.historie-hodnota { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Verze a nasazení (R150): nenápadná patička s verzí pod kartou, hash verze, rozbalovací seznam změn */ .paticka { margin: -8px 4px 0; color: var(--text-2); font-size: 12px; text-align: right; } .paticka a { color: inherit; text-decoration: none; } .paticka a:hover { color: var(--zelena); text-decoration: underline; } .verze-hash { font-variant-numeric: tabular-nums; letter-spacing: .02em; } .verze-zmeny { display: block; } .verze-zmeny .historie-zmeny { margin-top: 6px; overflow-wrap: anywhere; } .verze-chybi { display: block; margin-top: 6px; } .verze-napoveda { margin-top: 12px; }
.zalozni-kody { columns: 2; padding: 12px 16px; margin-bottom: 16px; background: var(--pozadi); border-radius: var(--r-prvek); font-size: 15px; line-height: 1.8; }
/* Texty nabídky po stranách PDF: karty s poli ve dvou sloupcích, vpravo náhled strany; pod 1 200 px náhled pod poli */
.texty-strana { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.texty-nahled { position: sticky; top: calc(var(--lista) + var(--prouzek) + 16px); max-height: calc(100vh - var(--lista) - var(--prouzek) - 32px); overflow-y: auto; overscroll-behavior: contain; }
.texty-mrizka > h3, .texty-mrizka > .texty-cela { grid-column: 1 / -1; }
.texty-mrizka > h3 { margin: 8px 0; font-size: 14px; }
.qr-kod svg { display: block; width: 200px; height: auto; margin: 0 auto 16px; }

/* náhled PDF */
.nahled-pdf { padding: 16px; background: var(--hlavicka-tabulky); border-radius: var(--r-detail); }
.nahled-strany img { display: block; max-width: min(100%, 640px); height: auto; margin: 0 auto; background: #fff; border: 1px solid var(--linka); }
.nahled-obnovuje .nahled-strany, .htmx-request .nahled-strany, .htmx-request.nahled-pdf .nahled-strany { opacity: .5; }
.nahled-ovladani { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.nahled-prepinac { display: flex; align-items: center; gap: 4px; }
.nahled-prepinac .pilulka { width: 32px; padding: 0; justify-content: center; }
.nahled-cekani { padding: 48px 16px; text-align: center; color: var(--text-2-sede); }

/* dvousloupcový editor */
.editor { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 24px; align-items: start; }
.editor-nahled { position: sticky; top: calc(var(--lista) + var(--prouzek) + 16px); max-height: calc(100vh - var(--lista) - var(--prouzek) - 24px - var(--pod-nahledem, 160px)); overflow-y: auto; overscroll-behavior: contain; } /* celý nad spodní lištou (i na konci stránky); delší náhled se posouvá uvnitř; --pod-nahledem = lišta a okraj pod ní (měří editor) */
.editor-prepnout { display: none; }
.editor-lista { grid-column: 1 / -1; position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 0; background: var(--karta); border-top: 1px solid var(--linka); }
.editor-lista .stav-ukladani { margin-right: auto; } .lista-akce { display: contents; } /* tlačítka lišty obnovuje průběžné ukládání */
.editor-akce-dole { display: none; } /* telefon: akce lišty kromě primární na konci formuláře (design kap. 7) */
.editor input, .editor select, .editor textarea { max-width: none; }
/* editor: sekce v kartách; výběr produktu v řádku položek na celý název („500 ml – dárková edice“), kusy úzké */
.editor-formular .karta-telo { padding-bottom: 4px; } /* pole a řádky tlačítek končí vlastním okrajem 16 px */
.editor-formular #nabidka-polozky > .sekce:last-of-type { margin-bottom: 0; }
#firma-hlavicka > .ares-hledani { margin: 0 0 16px; }
.tabulka .bunka-produkt select { min-width: 12rem; }
.tabulka th.sloupec-ks { width: 5rem; }
.chyba-radku > .napoveda { margin: 4px 0 0; white-space: normal; }
/* časová osa: e-mail jako předmět a první řádek, celý text po „Zobrazit celý“ (details, bez načítání) */
.osa-cely > summary { display: inline-flex; align-items: center; margin-top: 2px; color: var(--zelena); font-size: 13px; font-weight: 500; cursor: pointer; list-style: none; }
.osa-cely > summary::-webkit-details-marker { display: none; }
.osa-cely > summary:hover { color: var(--zelena-hover); text-decoration: underline; }
.osa-cely[open] .osa-zobrazit, .osa-cely:not([open]) .osa-skryt { display: none; }
.osa-text { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.osa-email:has(> .osa-cely[open]) > :is(.osa-prvni, .osa-oddelovac) { display: none; }
.ares-hledani > h3:first-child { margin-top: 0; }

/* vedení nabídky (NAVRH-KAP2 4.2–4.4): cesta (5 kroků, „Co teď“ a tlačítko), rozbalovací menu akcí, rámeček odeslání, verze */
.cesta { margin: 0 0 16px; padding: 16px; border: 1px solid var(--linka); border-radius: var(--r-detail); }
.cesta-kroky { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 4px; margin: 0 0 12px; padding: 0; list-style: none; }
.krok { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; font-size: 13px; line-height: 1.25; color: var(--text-2); }
.krok + .krok::before { content: ""; position: absolute; top: 13px; left: calc(-50% + 20px); right: calc(50% + 20px); height: 2px; background: var(--linka); }
.krok-hotovy + .krok::before { background: var(--zelena-tmava); }
.krok-znak { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 2px solid var(--ramecek); border-radius: 50%; background: var(--karta); font: 600 13px/1 var(--pismo); }
.krok-hotovy { color: var(--zelena-tmava); } .krok-hotovy .krok-znak { background: var(--zelena-tmava); border-color: var(--zelena-tmava); color: #fff; }
.krok-aktualni { color: var(--zelena); font-weight: 500; } .krok-aktualni .krok-znak { background: var(--zelena); border-color: var(--zelena); color: #fff; }
.krok-vysledek { color: var(--stav-seda-text); font-weight: 500; } .krok-vysledek .krok-znak { background: var(--stav-seda); border-color: var(--stav-seda); color: var(--stav-seda-text); }
.cesta-co-ted { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--linka); }
.cesta-veta { flex: 1 1 320px; margin: 0; } .cesta-veta a { white-space: nowrap; }
.cesta-akce { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.rozbalovaci { position: relative; display: inline-block; }
.rozbalovaci > summary { list-style: none; } .rozbalovaci > summary::-webkit-details-marker { display: none; }
.rozbalovaci[open] .rozbalovaci-sipka { transform: rotate(180deg); }
.rozbalovaci-volby { position: absolute; top: calc(100% + 4px); right: 0; z-index: 15; min-width: 100%; padding: 4px; border: 1px solid var(--ramecek); border-radius: var(--r-prvek); background: var(--karta); }
.cesta-akce .rozbalovaci-volby { right: auto; left: 0; } /* průběh zakázky až do dodání (milník 3, krok 3): svislé kroky se stavem, datem a podrobností */ .prubeh { margin: 0; padding: 0; list-style: none; } .prubeh-krok { position: relative; display: flex; gap: 12px; padding: 0 0 12px; } .prubeh-krok:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; background: var(--linka); } .prubeh-hotovy:not(:last-child)::before { background: var(--zelena-tmava); } .prubeh-znak { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 2px solid var(--ramecek); border-radius: 50%; background: var(--karta); color: var(--text-2); font: 600 12px/1 var(--pismo); } .prubeh-hotovy .prubeh-znak { background: var(--zelena-tmava); border-color: var(--zelena-tmava); color: #fff; } .prubeh-aktualni .prubeh-znak { background: var(--zelena); border-color: var(--zelena); } .prubeh-problem .prubeh-znak { background: var(--stav-cervena); border-color: var(--cervena); color: var(--cervena); } .prubeh-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; padding-top: 2px; } .prubeh-detail { flex-basis: 100%; color: var(--text-2); font-size: 13px; overflow-wrap: anywhere; } .prubeh-ceka .prubeh-text > strong, .prubeh-preskoceno .prubeh-text > strong { color: var(--text-2); font-weight: 500; } .prubeh-problem .prubeh-text > strong { color: var(--cervena); }
.rozbalovaci-volba { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-prvek); background: none; color: var(--text); font: 400 14px/1.2 var(--pismo); text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.rozbalovaci-volba:hover, .rozbalovaci-volba:focus-visible { background: var(--pozadi); color: var(--text); } .rozbalovaci-volba .ikona { color: var(--text-2); }
/* našeptávač (telefonická poptávka R91): volby pod polem v toku stránky, dvouřádkové (název, pod ním IČ · město), „Založit …“ zeleně */ .naseptavac { position: static; margin: 4px 0 12px; } .naseptavac .rozbalovaci-volba { min-height: 44px; padding: 6px 12px; line-height: 1.3; white-space: normal; } .naseptavac-nova, .naseptavac-nova .ikona { color: var(--zelena); font-weight: 500; }
#tel-kontakt:has(input[name="kontakt"]:checked:not([value="novy"])) .tel-novy { display: none; } /* vybraný existující kontakt: pole nového kontaktu pryč */ .mrizka-3.tel-radek { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); gap: 0 8px; } /* řádek velikost · druh · kusů i na telefonu vedle sebe */
.ramecek { margin: 0 0 16px; padding: 16px; border: 2px solid var(--zelena); border-radius: var(--r-detail); } .ramecek-nebezpecne { border-color: var(--cervena); } /* potvrzení nebezpečné akce (Stornovat, Zrušit smlouvu) */
.ramecek:focus, .ramecek:focus-visible { outline: none; } /* fokus dostane jen kvůli čtečce a klávesnici; rámeček je vidět sám */
.ramecek-otazka { margin: 0 0 8px; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.ramecek .akce { margin-bottom: 0; } .ramecek-udaje { margin: 0 0 12px; color: var(--text-2); } .ramecek-nadpis { margin: 16px 0 8px; font-size: 14px; } .bunka-akce { display: inline-flex; margin: 4px 0 0 8px; vertical-align: middle; } /* rámeček Poslat vzorek, Odesláno ručně v seznamu vzorků */
.radek-verzi { margin: -8px 0 16px; font-size: 13px; color: var(--text-2); } .radek-verzi-popisek { color: var(--text-2); } .radek-verzi strong { color: var(--text); }
.chip-verze { text-decoration: none; } a.chip-verze:hover { text-decoration: underline; }
.zprava-verze .zprava-text a { white-space: nowrap; }
.s-napovedou { position: relative; display: inline-flex; }
.napoveda-tlacitka { position: absolute; top: calc(100% + 6px); right: 0; z-index: 16; width: 300px; padding: 8px 10px; border: 1px solid var(--ramecek); border-radius: var(--r-prvek); background: var(--karta); color: var(--text); font-size: 12px; line-height: 1.4; white-space: normal; visibility: hidden; }
.s-napovedou:hover .napoveda-tlacitka, .s-napovedou:focus-within .napoveda-tlacitka { visibility: visible; }
.karta-akce .skupina-akci { margin-left: 8px; } /* tři skupiny akcí: doplňková · Nová verze · Zaznamenat výsledek, nebezpečné vpravo */

/* graf */
.graf { margin: 0; }
.graf-platno { position: relative; }

/* titulní strana Dnes a seznamy v kartách */
.seznam-polozek { list-style: none; margin: 0; padding: 0; }
.seznam-polozek > li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--linka); }
.seznam-polozek > li:first-child { padding-top: 0; }
.seznam-polozek > li:last-child { border-bottom: 0; padding-bottom: 0; }
.seznam-polozek .hlavni { flex: 1 1 240px; min-width: 0; }
.seznam-polozek .castka { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.semafor { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }

/* úkoly: zaškrtnutí = hotovo v tabulce a týden po dnech (7 sloupců, pod 1 024 px pod sebou) */
.tabulka .bunka-hotovo { width: 64px; }
.seznam-polozek > li > .zaskrtnuti { flex: none; }
.seznam-polozek .hlavni > a { font-weight: 500; text-decoration: none; }
.seznam-polozek .hlavni > a:hover { text-decoration: underline; }
.tyden { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.tyden-den { min-width: 0; border: 1px solid var(--linka); border-radius: var(--r-detail); overflow: hidden; }
.tyden-nazev { display: flex; justify-content: space-between; gap: 4px; margin: 0; padding: 8px 10px; background: var(--hlavicka-tabulky); font: 600 13px/1.3 var(--pismo-nadpisy); color: var(--zelena-tmava); text-transform: none; letter-spacing: 0; }
.tyden-nazev abbr { text-decoration: none; }
.tyden-dnes .tyden-nazev { background: var(--zelena-svetla); }
.tyden-dnes-text { font: 500 12px/1.3 var(--pismo); color: var(--zelena-tmava); }
.tyden-obsah { padding: 8px 10px; font-size: 13px; }
.tyden-obsah .seznam-polozek > li { flex-wrap: nowrap; align-items: flex-start; gap: 4px 8px; padding: 8px 0; }
.tyden-obsah .seznam-polozek .hlavni { flex: 1 1 0; overflow-wrap: anywhere; }
@media (min-width: 640px) and (pointer: fine) { .tyden-obsah .zaskrtnuti { min-height: 20px; } } /* dotyk dál 40 px */
.tyden-obsah .hlavni .stitek { margin-top: 4px; }
.tyden-prazdny { margin: 0; color: var(--text-2); }
@media (max-width: 1023px) { .tyden { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) { .tabulka-karty td.bunka-hotovo { grid-column: 2; } }

/* poptávky (ZADANI 8.5): vlevo e-mail a vlákno, vpravo vytěžená pole (nejistá podtržená) a „chybí“ */
.poptavka-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.vlakno { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.email { border: 1px solid var(--linka); border-radius: var(--r-detail); background: var(--karta); overflow: hidden; }
.email-hlavicka { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 10px 12px; cursor: pointer; list-style: none; } .email-hlavicka::-webkit-details-marker { display: none; }
.email-hlavicka .ikona { align-self: center; color: var(--text-2); } .email-od { font-weight: 500; overflow-wrap: anywhere; } .email-datum { color: var(--text-2); font-size: 12px; } .email-predmet { flex-basis: 100%; overflow-wrap: anywhere; }
.email-odchozi .email-hlavicka { background: var(--zelena-svetla); }
.email-telo { padding: 8px 12px 12px; border-top: 1px solid var(--linka); } .email-komu { margin: 0 0 8px; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.email-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; max-height: 32em; overflow-y: auto; }
.email-prilohy { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 12px 0 0; padding: 0; } .email-prilohy a, .email-priloha-bez { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.pole-nejiste input, .pole-nejiste select, .pole-nejiste textarea { border-bottom: 2px dashed var(--vystraha); }
.nejiste-znacka { margin-left: 4px; color: var(--stav-zluta-text); text-decoration: underline dashed var(--vystraha); text-underline-offset: 3px; }
.skupina-poli { min-width: 0; margin: 0 0 16px; padding: 12px 0 0; border: 0; border-top: 1px solid var(--linka); } .skupina-poli > legend { padding: 0 8px 0 0; font: 600 13px/1.3 var(--pismo-nadpisy); color: var(--zelena-tmava); }
.chybi { margin: 0 0 16px; padding: 12px 16px; border-left: 4px solid var(--zluta); background: var(--pozadi); border-radius: 0 var(--r-prvek) var(--r-prvek) 0; }
.chybi-nadpis { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-weight: 500; } .chybi-nadpis .ikona { color: var(--stav-zluta-text); } .chybi ul { margin: 0; padding-left: 22px; } .chybi-ok { border-left-color: var(--zelena); } .chybi-ok .chybi-nadpis .ikona { color: var(--zelena); } .ramecek-pokyn { margin: 8px 0 12px; } .ramecek-pokyn summary { cursor: pointer; font-weight: 500; margin-bottom: 8px; }
.ukazatel { max-width: 480px; height: 8px; margin: 8px 0 16px; background: var(--linka); border-radius: var(--r-oval); overflow: hidden; } .ukazatel-hodnota { display: block; height: 100%; background: var(--zelena); } .ukazatel-zluta { background: var(--zluta); } .ukazatel-cervena { background: var(--cervena); }
/* ruční úpravy PDF (R87): texty po stranách v rozbalovacích skupinách, řádek textu se stavem, obrázek varianty */
.rucni-skupina { border-top: 1px solid var(--linka); } .rucni-skupina > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 500; cursor: pointer; } .rucni-pocet { color: var(--text-2); font-size: 12px; font-weight: 400; } .rucni-radek { margin: 4px 0 12px; } .rucni-radek .pole { margin-bottom: 4px; }
.rucni-obrazek { margin: 8px 0 16px; } .nahled-obrazku { display: block; max-width: 160px; max-height: 200px; margin: 4px 0 8px; border: 1px solid var(--linka); border-radius: var(--r-prvek); background: var(--pozadi); } .rucni-ukazka { max-width: 480px; }
/* „Upravit ručně“ v náhledu (R90): lišta nad náhledem, pole přilepené nad rámečkem s HTML nabídky; pravidla .ru-* přenese editor do rámečku */
.rucne-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; } .rucne-lista .napoveda { flex: 1 1 240px; margin: 0; } .rucne-lista [aria-pressed="true"] { background: var(--zelena-svetla); border-color: var(--zelena); color: var(--zelena); } .rucne-zapnuto #nabidka-nahled { display: none; }
.rucne-ram { padding: 8px; background: var(--hlavicka-tabulky); border-radius: var(--r-detail); } .rucne-ram iframe { display: block; width: 100%; height: 600px; border: 0; }
.rucne-pole { position: sticky; top: 0; z-index: 3; margin-bottom: 8px; padding: 12px 16px; background: var(--karta); border: 1px solid var(--ramecek-pole); border-radius: var(--r-detail); box-shadow: var(--stin-karty); } .rucne-pole .pole { margin-bottom: 4px; }
.rucne-pole-hlavicka { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ru-nahled { margin: 0; background: var(--hlavicka-tabulky); } .ru-nahled .page { margin-bottom: 12px; } .ru-misto { cursor: pointer; border-radius: 2px; }
.ru-misto:hover, .ru-misto:focus-visible { outline: 1px dashed var(--zelena); outline-offset: 1px; background: rgba(3, 100, 0, .07); } .ru-rucne { background: rgba(255, 212, 0, .3); } .ru-vybrano, .ru-vybrano:hover { outline: 2px solid var(--zelena); outline-offset: 1px; }
/* etiketa na míru (ZADANI-ETIKETY.md kap. 3.5): nálepka, fotka, logo na světlém podkladu, kandidáti z e-mailů, kroky zakázky */
.etiketa-ukazka { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin: 8px 0; } .etiketa-ukazka figure { margin: 0; } .etiketa-nalepka { display: block; width: 248px; max-width: 100%; height: auto; } .etiketa-foto { display: block; width: 200px; max-width: 100%; height: auto; border: 1px solid var(--linka); border-radius: var(--r-prvek); }
.etiketa-logo-radek { display: flex; gap: 12px; align-items: center; } .etiketa-logo-radek p { min-width: 0; overflow-wrap: anywhere; } .etiketa-logo-nahled { display: block; max-width: 160px; max-height: 64px; padding: 6px; background: var(--pozadi); border: 1px solid var(--linka); border-radius: var(--r-prvek); } .etiketa-udaje { margin: 4px 0 12px; padding-left: 18px; color: var(--text-2); }
.etiketa-kandidati, .etiketa-kroky { list-style: none; margin: 4px 0 12px; padding: 0; } .etiketa-kandidati li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; min-height: 40px; border-top: 1px solid var(--linka); overflow-wrap: anywhere; } .etiketa-krok { margin: 0 0 8px; }
/* příloha F: plechovka s nálepkou, kontrast po částech (vzorky barev), výběr náhrady barevného loga, tisk po rozměrech */ .etiketa-plechovka { display: block; width: auto; height: 220px; max-width: 100%; object-fit: contain; } .etiketa-casti { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; } .etiketa-cast { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .etiketa-cast i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--ramecek-pole); } .etiketa-cast-nizky { color: var(--stav-cervena-text); font-weight: 500; } .etiketa-nahrady-seznam { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .etiketa-nahrada { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--linka); border-radius: var(--r-prvek); } .etiketa-nahrada img { display: block; width: 100%; height: auto; background: var(--pozadi); border-radius: var(--r-prvek); } .etiketa-nahrada p { margin: 0; overflow-wrap: anywhere; } .etiketa-nahrada-zvolena { border: 2px solid var(--zelena); background: var(--zelena-svetla); } .etiketa-krok-rozmery ul { margin: 0 0 0 4px; padding-left: 18px; color: var(--text-2); }

/* oslovení (fáze 2): přilepená lišta hromadných akcí pod tabulkou s výběrem, věta „proč vy“ s doložením a návrhem e-mailu po rozbalení */
.hromadna-lista { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 12px 0; background: var(--karta); border-top: 1px solid var(--linka); } .hromadna-lista .pole { margin: 0; min-width: 180px; }
/* dávka oslovení: karta e-mailu s výběrem, věta „proč vy“, rámeček s plánem odeslání */
.email-davky-vyber { width: 20px; height: 20px; margin: 0; accent-color: var(--zelena); } .email-davky-proc { margin: 6px 0 0; overflow-wrap: anywhere; } .email-davky-proc .duvod-osloveni { display: inline; } .email-davky-proc .duvod-osloveni > summary { display: inline; }
/* karta hovoru (oslovení, R111): číslo jako velké tlačítko tel:, scénář jako citace, fakta a historie po rozbalení */
.karta-hovoru-cislo { margin: 10px 0 0; } .tlacitko-telefon { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.karta-hovoru-scenar { margin: 10px 0 0; padding: 10px 14px; border-left: 3px solid var(--zelena); background: var(--pozadi); border-radius: 0 var(--r-prvek) var(--r-prvek) 0; overflow-wrap: anywhere; }
.karta-hovoru-fakta, .karta-hovoru-historie { margin: 6px 0 0; padding-left: 18px; } .karta-hovoru-historie li { overflow-wrap: anywhere; }
.karta-hovoru-vysledek { margin: 12px 0 0; } .karta-hovoru-vysledek .pole { margin-bottom: 8px; }
.odpoved-osloveni-shrnuti { margin: 6px 0 0; font-weight: 600; overflow-wrap: anywhere; } .odpoved-osloveni-tlacitka { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.davka-pripravit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 16px; } .davka-pripravit .napoveda { margin: 0; }
.import-v-crm { margin: 12px 0 16px; } .import-v-crm > summary { cursor: pointer; } .import-v-crm .napoveda { margin: 6px 0 8px; } .davka-chyby { margin: 4px 0 0; padding-left: 18px; } .davka-plan { margin: 8px 0; } .davka-plan > summary { cursor: pointer; } .davka-plan-seznam { margin: 6px 0 0; padding-left: 22px; } .davka-plan-seznam li { overflow-wrap: anywhere; } .davka-plan-cas { font-variant-numeric: tabular-nums; font-weight: 600; }
.fronta-firma { min-width: 11em; } .duvod-osloveni > summary { cursor: pointer; overflow-wrap: anywhere; } .duvod-doklad { margin-top: 6px; } .duvod-doklad .napoveda { overflow-wrap: anywhere; } .nahled-osloveni .email-text { white-space: pre-wrap; padding: 8px 12px; border: 1px solid var(--linka); border-radius: var(--r-prvek); }
/* odchozí akce ke schválení (R50): karta s e-mailem, nálezy a tlačítky; panel akce (<details>) s rámečkem pod tlačítkem */
.akce-karty { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }
.akce-karta { padding: 12px 16px; border: 1px solid var(--linka); border-left: 4px solid var(--zluta); border-radius: 0 var(--r-detail) var(--r-detail) 0; background: var(--karta); }
.akce-karta-vystraha { border-left-color: var(--vystraha); } .akce-karta-chyba { border-left-color: var(--cervena); } .akce-karta-ok { border-left-color: var(--zelena); }
.akce-karta-hlavicka { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .akce-karta-hlavicka > .ikona { color: var(--text-2); }
.akce-karta-nazev a { color: inherit; } .akce-karta-stitky { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.akce-karta-shrnuti { margin: 6px 0 0; color: var(--text-2); overflow-wrap: anywhere; }
.akce-karta > .vystraha, .akce-karta > .chyba { margin: 6px 0 0; }
.akce-karta-email { margin: 8px 0 0; } .akce-karta-email > summary { cursor: pointer; overflow-wrap: anywhere; } .akce-karta-popisek { color: var(--text-2); } .akce-karta-email .email-text { margin-top: 6px; padding: 8px 12px; border: 1px solid var(--linka); border-radius: var(--r-prvek); }
.akce-karta-akce { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: 12px 0 0; } .akce-karta-akce > form { margin: 0; }
.panel-akce > summary { list-style: none; } .panel-akce > summary::-webkit-details-marker { display: none; }
.panel-akce[open] { flex-basis: 100%; } .panel-akce-obsah { margin-top: 8px; } .panel-akce-obsah .ramecek { margin: 0; } .panel-akce:not([open]) > .panel-akce-obsah { display: none; } /* zavřený panel nezabírá místo ani mimo okno */

.design-sekce > h2 { margin: 0; font: 600 20px/1.25 var(--pismo-nadpisy); color: var(--zelena-tmava); text-transform: none; letter-spacing: 0; } /* stránka /design */
.design-sekce > .ucel { margin-bottom: 16px; }
.design-sekce > h3 { margin-top: 24px; } .design-sekce > .hromadna-lista { position: static; } .design-sekce > .paticka { margin: 0; } /* ukázka lišty na místě, ne přilepená k oknu; patička bez posunu pod kartu */
.design-ukazka .detail-primarni { position: static !important; }
.design-h1 { font: 600 24px/1.25 var(--pismo-nadpisy); color: var(--zelena-tmava); margin: 0 0 8px; }
.design-menu { width: var(--menu); }
.design-obsah { columns: 3 220px; column-gap: 24px; margin: 0; padding-left: 20px; }
.design-vzorky { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.design-vzorek { width: 132px; font-size: 12px; }
.design-vzorek span { display: block; height: 40px; margin-bottom: 4px; border: 1px solid var(--linka); border-radius: var(--r-prvek); }
.design-radek { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.design-stitek { margin: 32px 0 8px; font-size: 12px; color: var(--text-2); }
.design-ukazka { padding: 24px; background: var(--pozadi); border-radius: var(--r-karta); }
.design-ukazka .karta-obsahu { margin-bottom: 0; }

/* ---------- návod pro obchodnice (/navod, milník 4, krok 12): text do 860 px, obrázky obrazovek s linkou, telefon užší ---------- */
.navod { max-width: 860px; } .navod h3 { margin: 20px 0 8px; font: 600 15px/1.3 var(--pismo-nadpisy); color: var(--zelena-tmava); } .navod li { margin-bottom: 4px; } .tl { font-weight: 500; color: var(--zelena-tmava); } .navod-obsah ol { columns: 2 260px; column-gap: 32px; margin: 0; }
.navod-obrazek { margin: 12px 0 24px; } .navod-obrazek img { display: block; max-width: 100%; height: auto; border: 1px solid var(--linka); border-radius: var(--r-prvek); } .navod-obrazek figcaption { margin-top: 6px; font-size: 12px; color: var(--text-2); } .navod-telefon img { max-width: min(100%, 320px); }

/* ---------- pod 1 280 px: editor nabídky v jednom sloupci, náhled PDF a e-mail na požádání (vedle
   formuláře 480 px by strana A4 měla pod 440 px a ceny by nešly přečíst) ---------- */

@media (max-width: 1279px) {
  .editor { grid-template-columns: minmax(0, 1fr); }
  .editor-nahled { display: none; position: static; max-height: none; overflow: visible; }
  .editor-prepnout { display: block; order: -2; } /* tlačítko a náhled nad formulářem, ne až za ním */
  .editor-nahled { order: -1; }
  .nahled-otevreny .editor-nahled { display: block; }
}

/* ---------- pod 1 200 px: karty detailu dvě a jedna, pole ve dvou sloupcích (úzké karty lámaly text);
   seznamy bez méně důležitých sloupců, aby se vešly bez posouvání a částka vpravo zůstala vidět ---------- */

@media (max-width: 1199px) {
  .tabulka th.tablet-skryt, .tabulka td.tablet-skryt { display: none; }
  .detail-karty, .mrizka-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-karty > :nth-child(3):last-child, .detail-karty > :nth-child(3):has(+ .karta-cela) { grid-column: 1 / -1; }
  .texty-strana { grid-template-columns: minmax(0, 1fr); } .texty-nahled { position: static; max-height: none; } /* Texty nabídky: náhled pod poli */
  .poptavka-detail { grid-template-columns: minmax(0, 1fr); } /* poptávka: pole pod e-mailem */
}

/* ---------- pod 1 024 px: menu schované, karty pod sebou ---------- */
@media (max-width: 1023px) {
  .rucne-lista, .rucne-nahled { display: none; } .rucne-zapnuto #nabidka-nahled { display: block; } /* úprava v náhledu jen na počítači (R90), na telefonu karta */
  .lista-menu { display: inline-flex; }
  .lista-znacka { width: auto; }
  .rozvrzeni { display: block; }
  .menu { display: none; position: fixed; z-index: 25; top: calc(var(--lista) + var(--prouzek)); left: 0; bottom: 0; width: 280px; max-width: 85vw; overflow-y: auto; }
  .menu-otevrene .menu { display: block; }
  .menu-mobil { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; padding: 16px 12px 0; border-top: 1px solid var(--linka); }
  .menu-mobil a { display: flex; align-items: center; min-height: 40px; }
  .detail-karty, .sloupce, .mrizka-3 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .mrizka-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* horní lišta: jen jméno (role a Můj účet jsou v menu), Odhlásit jen ikonou, hledání 200–360 px */
  .lista-role, .lista-odhlasit-text { display: none; }
  .lista-uzivatel { max-width: 160px; }
  .lista-tlacitko { flex: none; }
  .lista-hledani { flex: 1 1 auto; min-width: 200px; max-width: 360px; }
}

/* ---------- pod 800 px: hledání v liště jako ikona (pole by bylo příliš úzké) ---------- */
@media (max-width: 799px) {
  .lista-hledani { display: none; }
  .lista-hledat-ikona { display: inline-flex; }
}

/* ---------- pod 640 px: tabulky jako karty, tlačítka na plnou šířku ---------- */

@media (max-width: 639px) {
  body { font-size: 15px; }
  .lista { gap: 4px; padding: 0 8px; }
  .lista-znacka img { height: 22px; }
  .znacka-crm { font-size: 15px; padding-left: 8px; }
  .lista-hledani, .lista-uzivatel, .lista-odhlasit-text { display: none; }
  .lista-hledat-ikona { display: inline-flex; }
  .obsah { padding: 8px 8px 96px; }
  .karta-obsahu { padding: 16px; border-radius: var(--r-detail); }
  .samostatna { padding: 32px 16px; }
  .samostatna .karta-obsahu { padding: 24px 16px; }
  h1, .titul-stranky, .detail-titul h1, .detail-titul h2 { font-size: 21px; }
  .karta-akce { justify-content: stretch; min-height: 0; }
  .karta-zahlavi { flex-wrap: wrap; padding-top: 4px; padding-bottom: 4px; } .karta-zahlavi-akce { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; margin-left: auto; } /* štítky a Upravit kontaktu se zalomí pod jméno, tlačítko neleží na hraně karty */
  .karta-akce .stav-ukladani { width: 100%; margin: 0; text-align: right; }
  .skryt-na-mobilu { display: none; }
  .karta-akce .tlacitko, .akce .tlacitko, .filtr-akce .tlacitko, .prazdne-akce .tlacitko, .nacist-dalsi .tlacitko { flex: 1 1 100%; }
  .editor-prepnout .tlacitko, .filtr summary.tlacitko { width: 100%; }
  /* spodní lišta editoru co nejnižší: indikátor, stav a Vrátit (jen ikona, popis v title) v jednom řádku,
     primární akce přes celou šířku; ostatní akce lišty jsou v řadě na konci formuláře */
  .editor-lista { gap: 6px 8px; padding: 8px 0; }
  .editor-lista .stav-ukladani { flex: 0 1 auto; margin: 0; }
  .editor-lista #lista-stav { flex: 1 1 0; min-width: 0; }
  .editor-lista .tlacitko { flex: 1 1 0; }
  .editor-lista [data-ukladani-vratit] { flex: none; min-width: 40px; } .editor-lista [data-ukladani-vratit] > span { display: none; }
  .editor-lista .tlacitko-primarni { flex-basis: 100%; }
  .editor-lista .lista-sirsi { display: none; } /* přilepené jen primární; Odeslat, Zrušit a Smazat jsou na konci formuláře */
  .editor-akce-dole { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; } .editor-akce-dole .tlacitko { flex: 1 1 100%; }
  .detail-primarni { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 20; width: auto; } form.detail-primarni > .tlacitko { width: 100%; } /* i obrysové, rozbalovací a formulář (tlačítko přes celou šířku) */
  html:has(.detail-primarni) { scroll-padding-bottom: 88px; } html:has(.detail-primarni) .paticka { padding-bottom: 56px; } .karta-akce:has(> .panel-akce[open] > summary:not(.detail-primarni)) > .detail-primarni { display: none; } .karta-obsahu:has(#ramecek-zakazky) a.detail-primarni { display: none; } /* zaostřené pole nezajede pod přilepené tlačítko; otevřený panel akce (Zapsat oslovení, Poslat e-mail) má vlastní tlačítko – přilepené zmizí, stejně u otevřeného rámečku potvrzení zakázky */
  .krok { font-size: 11.5px; gap: 4px; } .krok-znak { width: 24px; height: 24px; font-size: 12px; } .krok + .krok::before { top: 11px; left: calc(-50% + 16px); right: calc(50% + 16px); }
  .cesta { padding: 12px; } .cesta-akce, .cesta-akce > :not(.detail-primarni) { width: 100%; } .cesta-akce .tlacitko { flex: 1 1 100%; } .ramecek .akce > form, .ramecek .akce .tlacitko, .chybi .akce > form, .chybi .akce .tlacitko { flex: 1 1 100%; width: 100%; }
  .akce-karta-akce > .panel-akce, .akce-karta-akce > form, .karta-akce > .panel-akce:not(:has(> .detail-primarni)), .karta-akce > form { flex: 1 1 100%; } .panel-akce > summary.tlacitko, .akce-karta-akce > form > .tlacitko, .karta-akce > form > .tlacitko { width: 100%; } .panel-akce > summary.detail-primarni { width: auto; } /* karta odchozí akce: všechna tlačítka pod sebou přes celou šířku; přilepené dole mezi okraji 16 px */
  .karta-akce .skupina-akci { margin-left: 0; } .karta-akce .rozbalovaci, .karta-akce .s-napovedou, .rozbalovaci > summary { flex: 1 1 100%; width: 100%; }
  .rozbalovaci-volby { position: static; margin-top: 4px; } .rozbalovaci.detail-primarni .rozbalovaci-volby { position: absolute; top: auto; bottom: calc(100% + 4px); left: 0; right: 0; }
  .s-napovedou { flex-direction: column; } .s-napovedou > .tlacitko { flex: none; width: 100%; } .napoveda-tlacitka { position: static; width: auto; padding: 4px 0 0; border: 0; color: var(--text-2); visibility: visible; }
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"],
  input[type="password"], input[type="search"], input:not([type]), select, textarea { height: 40px; max-width: none; font-size: 16px; }
  textarea { height: auto; }
  .mrizka-4, .mrizka-2 { grid-template-columns: minmax(0, 1fr); }
  .pilulky { display: flex; } /* zalomené do řádků: všechny záložky vidět, nic se neposouvá do strany */
  /* 4 a víc akcí (detail nabídky, poptávky): ve dvou sloupcích, primární je přilepená dole. Jen přímé položky řady –
     tlačítko uvnitř obalu s nápovědou (sloupcový flex) by jinak dostalo výšku 50 % místo šířky (splácnuté na 18 px) */
  .karta-akce:has(> :is(.tlacitko, .s-napovedou, .rozbalovaci) ~ :is(.tlacitko, .s-napovedou, .rozbalovaci) ~ :is(.tlacitko, .s-napovedou, .rozbalovaci) ~ :is(.tlacitko, .s-napovedou, .rozbalovaci)) > :is(.tlacitko, .s-napovedou, .rozbalovaci) { flex: 1 1 calc(50% - 4px); }
  .s-napovedou:has(> .detail-primarni) { display: contents; } .s-napovedou:has(> .detail-primarni) > .napoveda-tlacitka { display: none; } /* primární přilepená dole: nápověda jen pro čtečky (aria-describedby) */
  .s-napovedou > .tlacitko.detail-primarni { width: auto; } /* přilepená dole mezi okraji 16 px, ne 100 % šířky okna */
  .tabulka-popisky td.akce-radku { display: flex; width: auto; justify-content: flex-end; }
  .tabulka-popisky td.akce-radku .tlacitko { flex: none; }
  .dlazdice-rada { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabulka-karty thead { display: none; }
  .tabulka-karty, .tabulka-karty tbody { display: block; }
  .tabulka-karty tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: dense; gap: 4px 12px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--linka); border-radius: var(--r-detail); }
  .tabulka-karty td { display: block; height: auto; padding: 0; border: 0; grid-column: 1; }
  .tabulka-karty td.cislo, .tabulka-karty td.bunka-stav { grid-column: 2; text-align: right; }
  .tabulka-karty td.mobil-skryt, .tabulka-karty td.bunka-vyber, .tabulka-popisky .mobil-bez, .hromadna-lista { display: none; } /* přehledy: prázdné buňky a vysvětlivky na telefonu ne; hromadné akce oslovení bez výběru řádků ne (jednotlivě v profilu firmy) */
  .hromadna-lista.davka-lista { display: flex; }
  .karta-hovoru .tlacitko-telefon { width: 100%; justify-content: center; } /* hovor z telefonu: číslo přes celou šířku */ /* dávka oslovení: výběr je v kartách, schválit jde i z telefonu */
  .tabulka-karty td.prazdne { grid-column: 1 / -1; }
  .tabulka-karty td.akce-radku { display: none; }
  .tabulka-karty td.akce-radku.ares-akce { display: block; grid-column: 1 / -1; text-align: left; } /* Použít výsledek ARES i na telefonu */
  .tabulka-karty td.zkratit { max-width: none; min-width: 0; }
  /* tabulka s poli (Nastavení → Ceník): karta na řádek, u každé hodnoty popisek z data-popisek */
  .tabulka-popisky thead { display: none; }
  .tabulka-popisky, .tabulka-popisky tbody, .tabulka-popisky tr { display: block; }
  .tabulka-popisky tr { padding: 4px 12px; margin-bottom: 8px; border: 1px solid var(--linka); border-radius: var(--r-detail); }
  .tabulka-popisky td { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: auto; min-height: 48px; padding: 4px 0; }
  .tabulka-popisky tr > td:last-child { border-bottom: 0; }
  .tabulka-popisky td[data-popisek]::before { content: attr(data-popisek); flex: 1 1 auto; font-size: 12px; color: var(--text-2); text-align: left; white-space: normal; }
  .tabulka-popisky td > .pole, .tabulka-popisky td > .hodnota-jen-cteni { flex: 0 1 12rem; min-width: 0; text-align: right; }
  .tabulka-popisky td > .bunka-obsah { flex: 0 1 15rem; min-width: 0; text-align: right; } /* buňka s textem a řádky pod ním jako jeden celek (import ze Shoptetu) */
  .tabulka-popisky td.bunka-produkt > .pole { flex-basis: 14rem; } /* celý název produktu i písmem 16 px */
  .tabulka-popisky td.bunka-verze { display: block; } .tabulka-popisky td.bunka-verze::before { display: block; margin-bottom: 4px; } .tabulka-popisky td.bunka-verze > .verze-obsah { text-align: left; } /* verze se seznamem změn přes celou kartu */
  .tabulka-popisky td.bunka-id { font-weight: 500; } .tabulka-popisky th[scope="row"] { display: flex; align-items: center; height: auto; min-height: 40px; padding: 4px 0; background: none; border-radius: 0; border-bottom: 1px solid var(--linka); white-space: normal; } .tabulka-popisky th[scope="row"] a { display: inline-flex; align-items: center; min-height: 40px; } /* záhlaví řádku přes celou kartu */
  [role="tabpanel"]:has(> #karta-zapis):not([hidden]) { display: flex; flex-direction: column; } #karta-zapis { order: -1; } /* profil firmy: Zapsat poznámku / hovor hned pod záložkami */
  .ramecek .udaje { grid-template-columns: minmax(0, 1fr); gap: 0; } .ramecek .udaje dd { margin-bottom: 6px; } /* rámeček potvrzení (Schválit zakázku, Poslat vzorek): popisek nad hodnotou */
  .tabulka-popisky .zaskrtnuti-bunka { justify-content: flex-end; } .tabulka-popisky td.bunka-stitek::before { flex: none; white-space: nowrap; } .tabulka-popisky td.bunka-stitek .stitek { height: auto; min-height: 22px; padding: 4px 10px; border-radius: 12px; line-height: 1.3; white-space: normal; text-align: right; } /* Po dodání: popisek celý, štítek se zalomí */
  .tabulka-popisky td.prazdne { display: block; } .tabulka-popisky td.bunka-panel { flex-wrap: wrap; } .tabulka-popisky td.bunka-panel > .akce { flex: 1 1 100%; justify-content: flex-end; margin: 0 0 4px; } /* platby: panel Přiřadit / Odpárovat pod textem buňky */
  .texty-mrizka .tabulka-popisky td { flex-direction: column; align-items: stretch; gap: 4px; } .texty-mrizka .tabulka-popisky td > .pole { flex: none; text-align: left; } /* texty: popisek nad polem */
  .editor-lista { position: sticky; bottom: 0; }
}

/* ---------- cíle dotyku nejméně 40 px (kap. 7): telefon a každé dotykové zařízení ---------- */

@media (max-width: 639px), (pointer: coarse) {
  .tlacitko, .pilulka { height: 40px; } .rozbalovaci-volba { min-height: 40px; } /* i volby rozbalovacího menu (Zaznamenat výsledek ▾) */
  .tlacitko-ikona, .tlacitko-ikona.tlacitko-male, .nahled-prepinac .pilulka { width: 40px; }
  .pilulky { border-radius: 24px; }
  .zaskrtnuti, .pole > .zaskrtnuti, .pole-prepinac .zaskrtnuti { min-height: 40px; }
  input[type="file"]::file-selector-button { height: 40px; }
  .zprava-zavrit { padding: 12px; margin: -12px -12px -12px 0; }
  .menu-odhlaseni .tlacitko { min-width: 40px; }
  .menu-podpolozka { min-height: 40px; }
  .zaskrtnuti-hotovo { min-width: 40px; justify-content: center; } /* Hotovo u úkolu: celá buňka 40 × 40 px */
  .odkaz-dotyk, .osa-cely > summary, .navod-obsah a, .paticka a { display: inline-flex; align-items: center; min-height: 40px; } .akce-karta-email > summary, .ramecek-pokyn > summary { padding-block: 9px; } /* + souhrn karty akce a „Co robot v Shoptetu udělá“ v rámečku zakázky 40 px */
  .drobecky ol { padding: 0 0 4px; }
  .drobecky a { display: inline-flex; align-items: center; min-height: 40px; }
  .drobecky li:first-child a { justify-content: center; min-width: 40px; margin-left: -8px; } /* domeček celý v okně (obsah má na telefonu okraj 8 px) */
}

/* ---------- tisk ---------- */

@media print {
  .hlavicka, .menu, .drobecky, .karta-akce { display: none; }
  .rozvrzeni { display: block; }
  body, .karta-obsahu { background: #fff; box-shadow: none; } .obsah { padding: 0; } .karta-obsahu { padding: 0; }
  .navod-obrazek { break-inside: avoid; } .navod h2, .navod h3 { break-after: avoid; } .navod-obrazek img { max-height: 100mm; width: auto; } /* návod jako PDF (make navod) */
}