/* Doklady k platbám (bankovní výpisy) */
    #bankaList table { min-width: 0; table-layout: fixed; }
    /* užší odsazení, ať zbyde na Protistranu — nejdelší obchodník z Raiffeisenu
       („GOOGLE *ADS…; DUBLIN 4; IRL") potřebuje 283 px a musí se vejít bez posuvníku */
    #bankaList td, #bankaList th { padding-left: 6px; padding-right: 6px; }
    /* lišta sekce: nadpis se nesmí zalomit a roletka účtů nepotřebuje 230 px jako vozový park */
    #viewBanka .view-sticky h2, #viewBanka .view-sticky .btn { white-space: nowrap; }
    #bankaUcetSel { min-width: 152px; }
    /* krajní sloupce se nesmí lepit na okraj tabulky */
    #bankaList td:first-child, #bankaList th:first-child { padding-left: 14px; }
    #bankaList td:last-child, #bankaList th:last-child { padding-right: 22px; }
    #bankaImportTable table { min-width: 0; table-layout: fixed; }
    #bankaImportTable td, #bankaImportTable th { padding-left: 9px; padding-right: 9px; }
    #bankaImportTable tbody td { background: #fff; }
    #bankaList td.ba-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Kdy se naposled přepnul stav dokladu. Bez toho nešlo dohledat, co člověk zrovna
       překlikl — razítko v databázi bylo od začátku, jen ho nikde nebylo vidět. */
    #bankaList td.ba-zmeneno { white-space: nowrap; color: var(--muted); font-size: 12.5px;
                               font-variant-numeric: tabular-nums; }
    /* stav dokladu se zarovnává doprava jako částka vedle — pilulka je široká podle textu */
    #bankaList td:last-child, #bankaImportTable td:last-child { text-align: right; }
    /* i nadpis sloupce a jeho filtr — jinak text visí vlevo nad pilulkami zarovnanými doprava */
    #bankaList thead th:last-child { text-align: right; }
    #bankaList tr.filtr-radek th:last-child input { text-align: right; }
    /* všechny stavy stejně široké — jinak sloupec vypadá roztřepeně (nejdelší je „→ Do pokladny") */
    .ba-stav { border: 1px solid transparent; border-radius: 7px; padding: 3px 9px; font-size: 12px;
      font-weight: 700; cursor: pointer; white-space: nowrap; display: inline-block;
      min-width: 118px; text-align: center; }
    .ba-stav[data-s="chybi"] { background: #fdeceb; border-color: #f3c4c1; color: #b3352f; }
    .ba-stav[data-s="mam"] { background: #e6f6ed; border-color: #b8e3ca; color: #1c7d55; }
    .ba-stav[data-s="nevyzaduje"] { background: #eef0f5; border-color: var(--border); color: #6f7889; }
    .ba-stav:disabled { cursor: default; }
    .ba-pokladna { background: #e8effd; border-color: #b9cdf3; color: #2b56c4; }
    .ba-stav[data-s="navrh"] { background: #fbeed6; border-color: #f0d199; color: #96620a; }
    /* srovnání platby a nabídnutého dokladu vedle sebe */
    .ba-navrh-mrizka { display: grid; grid-template-columns: 92px 1fr 1fr; gap: 6px 14px;
      align-items: baseline; font-size: 14px; margin-bottom: 6px; }
    .ba-navrh-mrizka .h { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px;
      color: var(--muted); font-weight: 650; }
    .ba-navrh-mrizka .l { color: var(--muted); }
    .ba-navrh-mrizka b { font-weight: 700; }
    .ba-navrh-shoda { font-size: 13px; color: var(--muted); border-top: 1px solid var(--border);
      padding-top: 8px; margin-top: 4px; }
    .ba-stav-hotovo { cursor: default; }
    .ba-druh { font-size: 11px; color: var(--muted); }
    .ba-chyba { background: #fdeceb; border: 1px solid #f3c4c1; color: #8f2b26; border-radius: 8px;
      padding: 8px 11px; font-size: 13px; margin-bottom: 10px; }
  :root {
    --blue: #2f5bff;
    --blue-dark: #1e40cc;
    --bg: #e7e9f0;
    --card: #ffffff;
    --border: #e6e8ef;
    --text: #16192c;
    --muted: #7a7f95;
    /* barva textu ležícího přímo na podbarvení firmy (--bg); u tmavého podbarvení se přepne na bílou */
    --on-bg: #16192c;
    --on-bg-muted: #7a7f95;
    --red: #d92d20;
    --red-bg: #fef3f2;
    --orange: #b54708;
    --orange-bg: #fffaeb;
    --green: #067647;
    --green-bg: #ecfdf3;
    --purple: #6941c6;
    --purple-bg: #f9f5ff;
    --teal: #0e7490;
    --teal-bg: #ecfeff;
    --pink: #c11574;
    --pink-bg: #fdf2fa;
    --sel-bg: #eef2ff;
  }
  /* tmavé podbarvení firmy → texty ležící na něm zbělají, ať zůstanou čitelné (třídu bg-dark nasazuje setCompanyBodyClass) */
  body.bg-dark { --on-bg: #ffffff; --on-bg-muted: rgba(255,255,255,.82); }
  /* bílé povrchy (karty, sekce) mají vlastní světlé pozadí i na tmavé firmě → text uvnitř zůstává tmavý.
     Modaly ne — ty mají background:var(--bg), takže s firmou taky ztmavnou a bílý text je tam správně. */
  body.bg-dark .card, body.bg-dark #loansOverview > .section { --on-bg: #16192c; --on-bg-muted: #7a7f95; }
  /* nadpisy pohledů (titulek ve flex hlavičce + sekce Aktivní/Archiv) leží přímo na podbarvení;
     hlavičky bílých sekcí (.section .sec-head h2) jsou hlouběji, sem nespadají */
  .wrap > div > h2, .wrap > h2, .wrap > h3 { color: var(--on-bg); }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    background: var(--bg); color: var(--text); font-size: 14px;
    padding-bottom: 90px;
  }
  /* Rezerva 90 px je pro spodní lištu s výběrem plateb. Přijaté doklady ji nemají a tabulka
     tam vyplní okno až dolů — rezerva by stránku zbytečně rolovala (druhý posuvník). */
  @media (min-width: 761px) { body.bez-rezervy { padding-bottom: 0; } }
  /* Safari na Macu stránku na konci „pruží“ — celý obsah i s ukotvenými lištami odjede od
     horní lišty a pod nimi je vidět modrý podklad. Pružení se vypíná všude (telefon ho má
     vypnuté kvůli stažení prstem už dřív) a tělo tabulky, které roluje samo, rolování na
     stránku nepředává. */
  html, body { overscroll-behavior-y: none; }
  .fakt-tab-wrap.telo-roluje tbody { overscroll-behavior: contain; }
  /* podbarvení stránky podle aktivní firmy — nastavuje se dynamicky přes --bg v setCompanyBodyClass() (app.js) */
  .topbar {
    background: var(--card); border-bottom: 1px solid var(--border);
    padding: 9px 28px; display: flex; align-items: center; gap: 20px;
    position: sticky; top: 0; z-index: 20;
  }
  /* Logo sedí na stejném tmavém podkladu jako menu pod ním a má přesně jeho šířku,
     takže tmavý sloupec jde odshora dolů v jednom kuse. Záporné okraje ruší odsazení
     topbaru — podklad musí sahat až k okraji okna, jinak by nad menu zůstal bílý pruh. */
  .topbar h1 {
    font-size: 24px; font-weight: 800; white-space: nowrap;
    flex: 0 0 220px; width: 220px; box-sizing: border-box;
    /* dole o pixel víc: tmavý blok musí přejít i spodní linku topbaru, jinak by mezi
       ním a menu zůstala světlá škvíra. Vpravo -6 px srovná roletu firmy s obsahem. */
    margin: -9px -6px -10px -28px; padding: 0 0 0 28px;
    align-self: stretch; display: flex; align-items: center;
    background: #1d2136; color: #fff;
  }
  /* Text je v jednom obalu: jako přímí potomci flexu by se z „platby a" a „finance"
     staly dvě položky a mezera mezi nimi by se ořízla. */
  .topbar h1 .logo-txt { display: block; }
  /* Na tmavém podkladu má --blue kontrast jen 3,1 : 1 — světlejší odstín drží 5,2. */
  .topbar h1 .logo-akcent { color: #6e8cff; }
  /* výběr firmy jako rozbalovací roleta (víc firem se vodorovně nevejde) */
  .tabs { position: relative; display: inline-block; }
  .company-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 230px;
    background: var(--card); color: var(--text); border: 2px solid var(--blue); box-shadow: 0 2px 8px rgba(47,91,255,.18);
    padding: 8px 16px; border-radius: 12px; font-size: 16px; font-weight: 800; cursor: pointer;
    white-space: nowrap; font-family: inherit;
  }
  .company-trigger:hover { background: var(--sel-bg); }
  .company-caret { font-size: 13px; color: var(--blue); transition: transform .15s; }
  .tabs.open .company-caret { transform: rotate(180deg); }
  /* Výpisy — rozcestník sestav v liště Půjček (stejná roleta jako u přepínače firem) */
  .vypisy { position: relative; display: inline-block; }
  .vypisy-caret { font-size: 11px; color: var(--muted); transition: transform .15s; margin-left: 2px; }
  .vypisy.open .vypisy-caret { transform: rotate(180deg); }
  .vypisy-menu {
    display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 45; min-width: 180px;
    background: var(--card); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(20,30,60,.16); padding: 5px; text-align: left;
  }
  .vypisy.open .vypisy-menu { display: block; }
  .vypisy-menu .btn-plain {
    display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 8px 12px; border-radius: 7px; font: inherit; font-size: 14px; color: var(--text); white-space: nowrap;
  }
  .vypisy-menu .btn-plain:hover { background: var(--sel-bg); }
  /* výpis nesplacených úroků: odznak u půjčky, která je dnes už v archivu.
     Je na vlastním řádku — vedle názvu by u delších jmen zalomil a zvýšil řádek tabulky. */
  .nu-stav { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 10.5px;
             line-height: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
  .nu-stav.aktivni { background: #e3f4ea; color: #067647; }
  .nu-stav.ukoncena { background: #ececf3; color: #5a5f73; }
  .nu-nazev { color: var(--muted); font-size: 12.5px; }
  /* podřádek se zalamuje uvnitř svého sloupce — buňka .num má nowrap a text přetékal z tabulky */
  .nu-bezici { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted);
               white-space: normal; overflow-wrap: break-word; line-height: 1.3; }
  /* stavový řádek dohledání v ARES pod polem IČO */
  .ares-hint { min-height: 16px; margin: 2px 0 6px; font-size: 12px; color: var(--muted); }
  .ares-hint.ok { color: #1d7a3c; }
  .ares-hint.err { color: #b3261e; }
  /* ve výpisu nesplacených úroků chceme kolem dat víc místa než v měsíčním reportu */
  #nuPreview .mu-table th, #nuPreview .mu-table td { padding-left: 14px; padding-right: 14px; }
  #nuPreview .mu-table td { padding-top: 8px; padding-bottom: 8px; }
  #nuPreview .mu-table thead th { padding-top: 9px; padding-bottom: 9px; }
  /* Pevný layout — jinak si prohlížeč rozdělí sloupce sám a procenta ignoruje.
     Sloupec "půjčka" dostane nejvíc místa, ať se vejdou oba subjekty na jeden řádek. */
  #nuPreview .mu-table { table-layout: fixed; }
  #nuPreview .mu-table th:nth-child(1), #nuPreview .mu-table td:nth-child(1) { width: 14%; }
  #nuPreview .mu-table th:nth-child(2), #nuPreview .mu-table td:nth-child(2) { width: 24%; }
  #nuPreview .mu-table th:nth-child(3), #nuPreview .mu-table td:nth-child(3) { width: 8%; }
  #nuPreview .mu-table th:nth-child(4), #nuPreview .mu-table td:nth-child(4) { width: 12%; }
  #nuPreview .mu-table th:nth-child(5), #nuPreview .mu-table td:nth-child(5) { width: 7%; }
  #nuPreview .mu-table th:nth-child(6), #nuPreview .mu-table td:nth-child(6) { width: 11%; }
  #nuPreview .mu-table th:nth-child(7), #nuPreview .mu-table td:nth-child(7) { width: 24%; }
  /* prostřední sloupce (stav–nejstarší dluh) mají menší mezery — místo dostal podřádek
     „z toho … za neukončené", ať se vejde na dva řádky */
  #nuPreview .mu-table th:nth-child(n+3):nth-child(-n+6),
  #nuPreview .mu-table td:nth-child(n+3):nth-child(-n+6) { padding-left: 7px; padding-right: 7px; }
  /* poslední sloupec drží odstup od pravého okraje tabulky */
  #nuPreview .mu-table th:last-child, #nuPreview .mu-table td:last-child { padding-right: 20px; }
  /* Pevná výška řádku — jinak řádek s odznakem "ukončená" nebo s delším jménem povyskočí. */
  #nuPreview .mu-table tbody tr { height: 48px; }
  /* menší svislé odsazení, ať se dvouřádkový obsah (jméno + odznak) do pevné výšky vejde */
  #nuPreview .mu-table tbody td { overflow: hidden; padding-top: 6px; padding-bottom: 6px; }
  /* jméno na jeden řádek, delší se ořízne třemi tečkami (celý název je v bublině) */
  #nuPreview .nu-strany { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #nuPreview .nu-obdobi { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
  #nuPreview .nu-sip { color: var(--muted); }
  .company-menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 45; min-width: 100%;
    background: var(--card); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 8px 30px rgba(20,26,51,.18); padding: 4px; max-height: 70vh; overflow-y: auto;
  }
  .tabs.open .company-menu { display: block; }
  /* segmentový přepínač (např. „Po sekcích / Po dnech úhrad" v Uhrazených platbách) — dřív sdílel třídu .tabs
     s tabem firem, po přechodu firem na roletu má vlastní třídu */
  .seg-tabs { display: flex; gap: 6px; }
  /* stejná typografie i barvy jako ostatní přepínače: bílé vypnuto, modré zapnuto */
  .seg-tabs button {
    border: 1px solid var(--border); background: var(--card); border-radius: 9px;
    padding: 9px 16px; font-size: 13px; font-weight: 800; letter-spacing: .6px;
    text-transform: uppercase; min-height: 41px; cursor: pointer; color: var(--text);
    white-space: nowrap; font-family: inherit;
  }
  .seg-tabs button:hover:not(.active) { border-color: #c9cede; }
  .seg-tabs button.active { background: var(--blue); border-color: var(--blue); color: #fff; }
  .company-menu button {
    display: block; width: 100%; text-align: left; border: 0; background: transparent; white-space: nowrap;
    padding: 8px 14px; border-radius: 7px; font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; font-family: inherit;
  }
  .company-menu button:hover { background: var(--bg); color: var(--on-bg); }
  .company-menu button.active { background: var(--sel-bg); color: var(--blue); }
  .search { margin-left: auto; display: flex; align-items: center; gap: 16px; }
  .search input[type=text] {
    border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px;
    font-size: 13.5px; width: 240px; outline: none; background: var(--bg); color: var(--on-bg);
  }
  .search input[type=text]::placeholder { color: var(--on-bg-muted); }
  /* při focusu má pole bílé pozadí → text zpět na tmavý bez ohledu na podbarvení */
  .search input[type=text]:focus { border-color: var(--blue); background: #fff; color: var(--text); }
  .search input[type=text]:focus::placeholder { color: var(--muted); }
  .search-wrap { position: relative; display: inline-flex; align-items: center; }
  .search-wrap input[type=text] { padding-right: 30px; }
  .search-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; border-radius: 50%; border: none; padding: 0;
    background: var(--border); color: var(--muted); font-size: 11px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
  }
  .search-clear:hover { background: var(--muted); color: #fff; }
  .wflow-info-btn {
    width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); padding: 0;
    background: var(--bg); color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .wflow-info-btn:hover { border-color: var(--blue); color: var(--blue); }
  .kurz-stack { display: grid; grid-template-columns: auto auto; column-gap: 8px; row-gap: 2px; align-items: center; }
  .kurz-label { font-size: 12.5px; color: var(--muted); white-space: nowrap; justify-self: end; line-height: 1.2; }
  .kurz-label .src { color: var(--green); font-weight: 600; }
  .kurz-input { width: 80px; border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; font-size: 12.5px; text-align: right; line-height: 1.2; }

  .layout { display: flex; align-items: flex-start; }
  /* Menu je tmavé: položek je přes dvacet a bílý panel s rámečkem u každé z nich působil
     jako dvacet tlačítek vedle sebe. Na tmavém podkladu nese význam jen text a podbarvení
     toho, kde zrovna jsem. */
  .sidebar {
    position: fixed; top: var(--topbar-h, 65px); left: 0; bottom: 0; width: 220px; flex-shrink: 0;
    padding: 18px 12px; display: flex; flex-direction: column; gap: 4px;
    background: #1d2136; border-right: 0;
    overflow-y: auto; z-index: 15;
  }
  .sidebar button {
    border: 1px solid transparent; background: none; text-align: left;
    padding: 11px 14px; border-radius: 11px; font-size: 15px; font-weight: 650; letter-spacing: -.1px;
    color: #9aa2c4; cursor: pointer; font-family: inherit; line-height: 1.2;
    transition: border-color .15s, background .15s, color .15s;
  }
  .sidebar button:hover { border-color: transparent; color: #fff; background: #2a3050; }
  /* rozbalovací kategorie menu (Závazky / Pohledávky / Pokladna) */
  .nav-grp { margin-bottom: 10px; }
  .nav-grp-body { display: flex; flex-direction: column; gap: 4px; }
  /* hlavičky kategorií jsou plnohodnotná tlačítka — tmavá, ať se jasně liší od položek podmenu */
  /* Hlavní kategorie jsou výraznější než položky pod nimi — vyšší tlačítko (41 px). */
  .nav-grp-head, .sidebar button.nav-grp-head {
    background: #3d4460; border: 1px solid #3d4460; border-radius: 10px;
    padding: 0 16px; min-height: 41px; margin: 0 0 6px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
    color: #fff; display: flex; align-items: center; justify-content: space-between; width: 100%;
  }
  .sidebar button.nav-grp-head:hover { background: #4a527a; border-color: #4a527a; color: #fff; }
  /* položky podmenu: nižší než hlavní kategorie, ale stejná typografie — jen bez verzálek */
  .nav-grp-body { padding-left: 14px; }
  /* měna u pokladny v jiné než korunové měně — drobný přívěsek za názvem */
  /* nastavení automatického odhlášení (sekce Uživatelé) */
  .necinnost-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                   background: var(--card); border: 1px solid var(--border); border-radius: 12px;
                   padding: 12px 16px; margin-bottom: 14px; }
  .necinnost-lbl { font-size: 13.5px; font-weight: 650; }
  .necinnost-box input { border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px;
                         font-size: 16px; font-weight: 800; font-family: inherit;
                         font-variant-numeric: tabular-nums; outline: none; }
  .necinnost-box input:focus { border-color: var(--blue); }
  .necinnost-hint { font-size: 12.5px; color: var(--muted); flex: 1 1 260px; }
  .nav-mena { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; opacity: .7; margin-left: 4px; }
  .nav-grp-body button { padding: 9px 14px; font-size: 14px; font-weight: 620; letter-spacing: -.1px; }
  .nav-grp-chev { transition: transform .15s; font-size: 12px; }
  .nav-grp.collapsed .nav-grp-chev { transform: rotate(-90deg); }
  .nav-grp.collapsed .nav-grp-body { display: none; }
  /* co firma nevede, není v menu; třídou, ať se to nepere s `style.display` od práv */
  #sideNav button.mimo-menu { display: none !important; }
  /* sbalené menu (jen ikony): nadpisy skupin nedávají smysl, těla nechat viditelná */
  body.nav-collapsed .nav-grp-head { display: none; }
  body.nav-collapsed .nav-grp.collapsed .nav-grp-body { display: block; }
  .sidebar button .nav-ico { display: none; }                     /* v plném menu jen texty (jako dosud) */
  /* ---- sbalené menu (jen ikony) — šetří místo na 13" displeji ---- */
  body.nav-collapsed .sidebar { width: 56px; padding: 18px 6px; }
  body.nav-collapsed .content { margin-left: 56px; }
  body.nav-collapsed .sidebar button { padding: 9px 0; text-align: center; }
  body.nav-collapsed .sidebar button .nav-lbl { display: none; }
  body.nav-collapsed .sidebar button .nav-ico { display: block; line-height: 0; }
  body.nav-collapsed .sidebar button .nav-ico svg { width: 18px; height: 18px; margin: 0 auto; }
  #navToggle { margin-top: 14px; color: #6b7399; background: none;
    border: 1px dashed #3d4460; border-radius: 10px; }
  #navToggle:hover { background: #2a3050; border-color: #4a527a; color: #9aa2c4; }
  body.nav-collapsed #navToggle .nav-ico { display: inline-block; transform: rotate(180deg); }  /* ⮜ → ⮞ */
  .sidebar button.active {
    background: var(--blue); border-color: var(--blue); color: #fff;
  }
  /* Barva u Plateb k úhradě a Uhrazených zůstává nositelem významu — na tmavém podkladu
     ji nese samotný text, ne výplň, aby dvě položky nekřičely přes celé menu. */
  .sidebar button.nav-red { background: none; border-color: transparent; color: #f2938c; }
  .sidebar button.nav-red:hover { background: #3a2731; color: #ffb4ae; }
  .sidebar button.nav-red.active {
    background: var(--red); border-color: var(--red); color: #fff;
  }
  .sidebar button.nav-green { background: none; border-color: transparent; color: #63cf9b; }
  .sidebar button.nav-green:hover { background: #21382f; color: #8fe3ba; }
  .sidebar button.nav-green.active {
    background: var(--green); border-color: var(--green); color: #fff;
  }
  .btn-undo {
    border: 1px solid var(--border); background: #fff; border-radius: 7px;
    padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
    color: var(--muted); font-family: inherit; white-space: nowrap;
  }
  .btn-undo:hover { border-color: var(--red); color: var(--red); }
  /* větší klikací plocha ikon — bez mezer mezi sebou, ať se nemusí přesně mířit */
  .btn-del {
    border: 0; background: none; color: #c2c6d4; cursor: pointer; font-size: 19px;
    padding: 4px 6px; border-radius: 6px; font-family: inherit; margin-left: 0;
  }
  .who { margin-top: 0 !important; }
  .btn-del:hover { color: var(--red); background: var(--red-bg); }
  /* řádek v Uhrazených platbách je klikací (otevře úpravu) */
  tr.paid-row { cursor: pointer; }
  tr.paid-row:hover > td { background: #fafbfd; }
  /* úhrada jednotlivého řádku — hlavní akce asistenta CFO, proto zeleně a jako první v řadě */
  .btn-pay {
    border: 0; background: none; color: var(--green); cursor: pointer; font-size: 19px;
    padding: 4px 6px; border-radius: 6px; font-family: inherit; margin-left: 0; font-weight: 700;
  }
  .btn-pay:hover { background: var(--green-bg); }
  /* 🔥 přepínač urgentní platby — vypnutý šedý, zapnutý/hover barevný (nezabírá šířku navíc) */
  .fire-btn { border: 0; background: none; cursor: pointer; font-size: 12px; padding: 6px 4px;
    border-radius: 5px; margin: 0; line-height: 1; filter: grayscale(1) opacity(.45); transition: filter .1s, transform .1s; }
  .fire-btn:hover { filter: none; transform: scale(1.25); background: rgba(255,71,38,.12); }
  /* Na dotykovém displeji zůstane :hover viset i po zvednutí prstu — vypnutý plamínek
     tak zůstával barevný, jako by platba pořád hořela. Stejně tak podbarvení řádku. */
  @media (hover: none) {
    .fire-btn:hover { filter: grayscale(1) opacity(.45); transform: none; background: none; }
    .fire-btn.on:hover { filter: none; }
    tbody tr:hover { background: none; }
    tbody tr.sel:hover { background: var(--sel-bg); }
  }
  .fire-btn.on { filter: none; }
  .fire-ico { font-size: 13px; animation: fireFlick 1.5s ease-in-out infinite; }
  @keyframes fireFlick { 0%, 100% { opacity: 1; } 50% { opacity: .68; } }
  /* urgentní platba — řádek se rozsvítí do červena + červený proužek vlevo */
  tr.urgent > td { background: linear-gradient(90deg, rgba(255,71,38,.14), rgba(255,143,51,.05)); }
  tr.urgent > td:first-child { box-shadow: inset 4px 0 0 #ff3b1e; }
  tr.urgent:hover > td { background: linear-gradient(90deg, rgba(255,71,38,.20), rgba(255,143,51,.09)); }
  /* filtr „jen urgentní" — aktivní stav červený */
  .onlyUrgentBtn.urgent-on { background: #ff3b1e; border-color: #ff3b1e; color: #fff; }
  body.role-user .admin-only { display: none !important; }
  /* běžný uživatel nemá editaci — klik na řádek nic neotevře, ať to kurzor neslibuje */
  body.role-user tbody tr, body.role-user tr.paid-row { cursor: default; }
  .content { flex: 1; min-width: 0; margin-left: 220px; }
  .wrap { max-width: 1360px; margin: 24px auto; padding: 0 14px; }
  /* ukotvení horní části pohledu (dashboard + lišta / hlavička) hned pod topbarem */
  .view-sticky {
    position: sticky; top: var(--topbar-h, 65px); z-index: 10;
    background: var(--bg); padding-top: 8px; margin-top: -8px; padding-bottom: 18px;
    box-shadow: 0 6px 10px -8px rgba(0, 0, 0, 0.18);
  }
  .view-sticky > :last-child { margin-bottom: 0; }
  .quick-form {
    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    padding: 18px; margin-bottom: 18px; display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end;
  }
  .quick-form .field label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
  .quick-form input, .quick-form select {
    width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
    font-size: 13.5px; font-family: inherit; background: #fff;
  }
  .quick-form select, select.tall-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%237a7f95' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
  }
  .sekce-checks { display: flex; flex-wrap: wrap; gap: 8px; }
  .sekce-checks label {
    display: flex; align-items: center; gap: 17px; padding: 3px 2px; font-size: 12.5px; cursor: pointer; user-select: none;
  }
  .sekce-checks input[type=checkbox] { width: 16px; flex: 0 0 16px; margin: 0; }
  /* žádný vnitřní posuvník — dlouhý seznam roluje spolu s celým dialogem, jinak zůstanou
     pole pod ním (Cesťák, tlačítka) zaseknutá na místě a nejde se k nim dostat */
  .sekce-checks-vertical { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; }
  .sekce-checks-vertical label { width: 100%; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 1 / -1; }
  .chips button {
    border: 1px solid var(--border); background: var(--bg); border-radius: 20px;
    padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  }
  .chips button:hover { border-color: var(--blue); color: var(--blue); }

  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; margin-bottom: 12px; }
  .card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 10px 16px; }
  .card .lbl { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; line-height: 1.2; }
  .card .val { font-size: 22px; font-weight: 750; margin-top: 3px; font-variant-numeric: tabular-nums; line-height: 1.1; }
  /* víc měn v jedné kartě — každá na svém řádku, čísla pod sebou zarovnaná doprava */
  .mena-mrizka { display: inline-grid; grid-template-columns: max-content max-content;
                 column-gap: 7px; row-gap: 3px; align-items: baseline; }
  .mena-mrizka .mr-cislo { text-align: right; font-variant-numeric: tabular-nums; }
  .mena-mrizka .mr-mena { text-align: left; }
  .card .sub { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.2; }
  /* Vydané faktury: „Očekávané úhrady (do týdne)" se zalomí na dva řádky a shodilo by svoji částku
     o řádek níž než ostatní. Popiskům proto vyhradíme dva řádky, ať jsou částky v jedné rovině. */
  #receivablesCards .card .lbl { min-height: 2.4em; }
  /* dlaždice, která zároveň filtruje tabulku pod sebou (Doklady k platbám) */
  .card-filtr { cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
  .card-filtr:hover { border-color: #b9c1d8; box-shadow: 0 2px 8px rgba(22,25,44,.07); }
  .card-filtr:active { transform: translateY(1px); }
  .card-filtr:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  .card-filtr.aktivni { border-color: currentColor; box-shadow: 0 0 0 2px rgba(47,91,255,.10); }
  .card-filtr.aktivni .sub { font-weight: 600; }
  .card.red.card-filtr.aktivni { color: var(--red); }
  .card.green.card-filtr.aktivni { color: var(--green); }
  .card.blue.card-filtr.aktivni { color: var(--blue); }
  /* nastavitelné dlaždice: ozubené kolečko v rohu, nenápadné, zvýrazní se při najetí na dlaždici */
  .card.dl { position: relative; }
  .dl-kolo { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; padding: 3px; border: 0; border-radius: 7px;
    background: transparent; color: #c3c8d6; cursor: pointer; display: flex; }
  .dl-kolo svg { width: 18px; height: 18px; }
  .card.dl:hover .dl-kolo { color: var(--muted); background: #f1f3f8; }
  .dl-kolo:hover { color: var(--text) !important; }
  .card.dl .lbl { padding-right: 22px; }
  .card.dl-mala .val { font-size: 17px; }
  .dl-verdikt { font-weight: 700; } .dl-verdikt.cerv { color: var(--red); } .dl-verdikt.zel { color: var(--green); }
  .dl-detail { display: none; position: absolute; right: 0; top: calc(100% + 8px); width: 360px; z-index: 30; background: #fff;
    border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(20,30,60,.16); padding: 12px 14px;
    cursor: default; text-transform: none; letter-spacing: 0; }
  .dl-prostr:hover .dl-detail { display: block; }
  .dl-vlevo .dl-detail { right: auto; left: 0; }
  .dl-d-nad { font-size: 13px; font-weight: 750; margin-bottom: 8px; color: var(--text); }
  .dl-d-r { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 2px 0; color: var(--text);
    font-variant-numeric: tabular-nums; }
  .dl-d-r b { font-weight: 650; white-space: nowrap; } .dl-d-r.silne b, .dl-d-r.silne span { font-weight: 800; }
  .dl-d-r.mu { color: var(--muted); font-size: 12px; } .dl-d-r.cerv b { color: var(--red); } .dl-d-r.zel b { color: var(--green); }
  .dl-detail hr { border: 0; border-top: 1px solid var(--border); margin: 7px 0; }
  .dl-d-pozn { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.45; }
  .modal.dl-okno { width: 960px; max-width: calc(100vw - 40px); position: relative; }
  .dl-pod { font-size: 12.5px; color: var(--on-bg-muted); margin: -2px 0 12px; }
  .dl-sl { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; align-items: start; }
  .dl-nad { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin: 0 0 6px; }
  .dl-pocet { display: inline-block; font-size: 11.5px; background: #fff; border: 1px solid var(--border); border-radius: 8px;
    padding: 0 7px; margin-left: 4px; color: var(--text); }
  .dl-por { display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--border); border-radius: 10px;
    padding: 6px 8px; margin-bottom: 6px; cursor: pointer; }
  .dl-por.vybrana { border-color: var(--blue); box-shadow: 0 0 0 2px #dbe6fd; }
  .dl-por-c { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px; background: var(--bg); display: grid; place-items: center;
    font-size: 12px; font-weight: 700; color: var(--muted); }
  .dl-por-n { flex: 1; font-size: 13.5px; font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .modal .dl-sip, .modal .dl-pryc { width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid var(--border); border-radius: 8px;
    background: #fff; cursor: pointer; font-size: 11px; color: var(--text); padding: 0; margin: 0; min-width: 0; }
  .modal .dl-sip:disabled { color: #cbd0de; background: #f6f7fb; cursor: default; }
  .modal .dl-pryc { color: var(--muted); font-size: 13px; }
  .dl-prazdno { font-size: 13px; color: var(--muted); padding: 8px 2px; }
  .dl-nabidka { background: #fff; border: 1px solid var(--border); border-radius: 10px; max-height: 60vh; overflow-y: auto; }
  .dl-skup { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted);
    background: #f6f7fb; padding: 7px 12px; border-bottom: 1px solid var(--border); }
  .dl-volba { display: grid; grid-template-columns: 52px minmax(0, 1fr) 150px; gap: 8px; align-items: center; padding: 8px 12px;
    border-bottom: 1px solid #eef0f5; }
  .modal .dl-volba .prepinac { margin: 0; }
  .dl-v-txt b { display: block; font-size: 13.5px; font-weight: 700; }
  .dl-v-txt span { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; }
  .dl-v-uk { text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  /* nastavení dlaždice: popisek a roletka na řádku, roletky pod sebou na jedné svislé rovině */
  .dl-v-nast { margin-top: 7px; display: grid; grid-template-columns: 82px 220px; gap: 6px 8px; align-items: center; width: max-content; }
  .modal .dl-v-nast label { font-size: 12.5px; color: var(--muted); font-weight: 600; margin: 0; text-transform: none; letter-spacing: 0; }
  .modal .dl-v-nast select { height: 32px; font-size: 13px; padding: 0 30px 0 10px; width: 220px; margin: 0; }
  /* sloupec se zapnutým filtrem: nadpis výrazně červeně (zvyrazniAktivniFiltry v app.js) */
  /* jen barva — tučnější písmo by nadpis rozšířilo a text by při zapnutí filtru poskočil */
  /* křížek ve vyplněném poli filtru — smaže jen tenhle filtr (filtrKrizek v app.js) */
  tr.filtr-radek button.filtr-x { position: absolute; z-index: 3; width: 16px; height: 16px; min-width: 0; margin: 0; padding: 0;
    border: 0; border-radius: 50%; background: #c3c8d6; color: #fff; font-size: 9px; font-weight: 700; line-height: 1;
    display: grid; place-items: center; cursor: pointer; box-shadow: none; }
  tr.filtr-radek button.filtr-x:hover { background: #e0262b; }
  tr.filtr-radek button.filtr-x svg { width: 10px; height: 10px; display: block; fill: none; stroke: #fff;
    stroke-width: 1.8; stroke-linecap: round; }
  tr.filtr-radek input.ma-filtr-x { padding-right: 24px !important; }
  tr.filtr-radek input.ma-filtr-x-vlevo { padding-left: 24px !important; }
  /* jen tahle jedna buňka hlavičky: červený podklad a bílé písmo, zbytek lišty zůstává */
  thead th.filtr-aktivni { background-color: #e0262b !important; }
  thead th.filtr-aktivni, thead th.filtr-aktivni * { color: #fff !important; }
  .card.red .val { color: var(--red); }
  .card.orange .val { color: var(--orange); }
  .card.blue .val { color: var(--blue); }
  .card.green .val { color: var(--green); }   /* příjem — Vydané faktury (kolik nám dluží) */

  .section { background: var(--card); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 18px; overflow: hidden; }
  /* Ukotvení hlaviček v seznamech plateb: název sekce a pod ním hlavička sloupců zůstanou vidět při scrollu.
     „overflow: clip" (ne hidden) na .section a zrušený overflow na .tbl-wrap jsou nutné — jinak by tyto prvky
     vytvořily scroll kontejner a sticky by se lepilo k němu místo k oknu. --sec-top dopočítává app.js
     (topbar + ukotvený vršek pohledu), --sec-head-h je výška řádku s názvem sekce. */
  #sections .section, #paidList .section, #mzdyList .section, #fakturantiList .section,
  #externiList .section, #provozList .section, #ostatniList .section, #prostrObsah .section { overflow: clip; }
  #sections .tbl-wrap, #paidList .tbl-wrap, #mzdyList .tbl-wrap, #fakturantiList .tbl-wrap,
  #externiList .tbl-wrap, #provozList .tbl-wrap, #ostatniList .tbl-wrap, #prostrObsah .tbl-wrap { overflow: visible; }
  #sections .sec-head, #paidList .sec-head, #mzdyList .sec-head, #fakturantiList .sec-head,
  #externiList .sec-head, #provozList .sec-head, #ostatniList .sec-head, #prostrObsah .sec-head {
    position: sticky; top: var(--sec-top, 200px); z-index: 6; background: var(--card);
  }
  /* Rozbalená sekce: hlavička se odliší světlým pruhem, jinak splývá s tabulkou pod ní.
     Sbalená zůstává bílá — to je celá karta a odlišovat není co. */
  .section:not(.collapsed) > .sec-head,
  #sections .section:not(.collapsed) > .sec-head,
  #paidList .section:not(.collapsed) > .sec-head,
  #mzdyList .section:not(.collapsed) > .sec-head,
  #fakturantiList .section:not(.collapsed) > .sec-head,
  #externiList .section:not(.collapsed) > .sec-head,
  #provozList .section:not(.collapsed) > .sec-head,
  #ostatniList .section:not(.collapsed) > .sec-head {
    background: #eff2f9; border-bottom: 1px solid #dde3f0;
  }
  #sections thead th, #paidList thead th, #mzdyList thead th, #fakturantiList thead th,
  #externiList thead th, #provozList thead th, #ostatniList thead th, #prostrObsah thead th {
    position: sticky; top: calc(var(--sec-top, 200px) + var(--sec-head-h, 45px)); z-index: 5;
  }
  /* Krycí pásek NAD hlavičkou sloupců v barvě názvu sekce. Leží pod názvem sekce (z-index 6
     proti 5), takže je vidět jen v případné mezeře mezi nimi — Safari zaokrouhluje ukotvené
     pozice po svém a v té mezeře při rolování prosvítaly řádky (1. 10. 2026). */
  #sections thead tr:first-child th::before, #paidList thead tr:first-child th::before,
  #mzdyList thead tr:first-child th::before, #fakturantiList thead tr:first-child th::before,
  #externiList thead tr:first-child th::before, #provozList thead tr:first-child th::before,
  #ostatniList thead tr:first-child th::before, #prostrObsah thead tr:first-child th::before {
    content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
    background: #eff2f9; pointer-events: none;
  }
  /* řádek filtrů se lepí pod hlavičku sloupců (ta se lepí pod název sekce) */
  #sections thead tr.filtr-radek th, #paidList thead tr.filtr-radek th,
  #mzdyList thead tr.filtr-radek th, #fakturantiList thead tr.filtr-radek th,
  #externiList thead tr.filtr-radek th, #provozList thead tr.filtr-radek th,
  #ostatniList thead tr.filtr-radek th, #prostrObsah thead tr.filtr-radek th {
    top: calc(var(--sec-top, 200px) + var(--sec-head-h, 45px) + var(--sec-cols-h, 38px)); z-index: 4;
  }
  /* Půjčky — rozbalená karta: hlavička (název + čísla + tlačítka) a pás dlaždic zůstávají při scrollu.
     Rozbalená karta je jediný .section přímo v #loansOverview (seznam používá .loan-group/.loan-rows). */
  #loansOverview > .section:not(.collapsed) { overflow: clip; }
  #loansOverview > .section:not(.collapsed) > .tbl-wrap { overflow: visible; }
  #loansOverview > .section:not(.collapsed) > .sec-head {
    position: sticky; top: var(--sec-top, 130px); z-index: 6; background: var(--card);
  }
  #loansOverview > .section:not(.collapsed) > .tbl-wrap > .loan-terms {
    position: sticky; top: calc(var(--sec-top, 130px) + var(--loan-head-h, 72px)); z-index: 5;
    background: var(--card);
    box-shadow: 0 -14px 0 var(--card);          /* zakryje horní padding .tbl-wrap, ať tam neprosvítá tabulka */
    margin-bottom: 0; padding-bottom: 14px;     /* místo marginu padding — je pod pozadím, tabulka neprosvítá */
  }
  .sec-head { display: flex; align-items: center; gap: 12px; padding: 13px 18px; cursor: pointer; user-select: none; }
  .sec-head:hover { background: #fafbfd; }
  /* Úvěry, leasingy a pojištění: každá sbalená karta je jeden záznam, ne skupina desítek řádků —
     nemá být vyšší než řádek tabulky. */
  #splatkyList .sec-head, #pojList .sec-head { padding: 8px 18px; }
  .sec-head .chev { transition: transform .15s; color: var(--muted); font-size: 12px; }
  .section.collapsed .chev { transform: rotate(-90deg); }
  .sec-head h2 { font-size: 14.5px; font-weight: 700; letter-spacing: .2px; }
  /* sekce v tankování se jmenují normálně („Tankovací lístky"), ale mají vypadat stejně
     jako sekce plateb, které jsou velkými písmeny už v datech */
  #cestakTank .sec-head h2 { text-transform: uppercase; }
  .sec-head .count { background: var(--bg); color: var(--on-bg-muted); font-size: 12px; font-weight: 600; border-radius: 20px; padding: 2px 9px; }
  /* počet položek vedle nadpisu sekce (Dodavatelé) — vypadá jako počítadlo u sekcí */
  /* počet u nadpisu sekce („298 z 932") — prostý šedý text na jednom řádku, ne pilulka:
     v rámečku se v užší liště zalamoval na dva řádky */
  .pocet-badge { color: var(--on-bg-muted); font-size: 13.5px; font-weight: 700; white-space: nowrap;
                 flex: 0 0 auto; font-variant-numeric: tabular-nums; }
  .pocet-badge:empty { display: none; }
  /* hledání napříč měsíci v detailu účtu */
  .fin-hledani-info { font-size: 12.5px; color: var(--muted); font-weight: 600; }
  /* druhý řádek dlaždic: stav k dnešku — odlišený modrým podkladem, ať se nepletou */
  .fin-kachle-dnes { background: #eef2ff; border-color: #c7d2fe; }
  .fin-kachle-dnes .val { color: var(--blue); }
  .fin-zmena.plus { color: var(--red); }
  .fin-zmena.minus { color: var(--green); }
  /* tlačítka u uživatele: pevná místa, ať jsou sloupce pod sebou i když někomu
     chybí reset 2FA nebo PINu */
  td.u-akce { text-align: left; white-space: nowrap; font-size: 0; }
  .u-slot { display: inline-block; text-align: left; vertical-align: middle; }
  .u-slot .btn-undo { width: 100%; padding-left: 0; padding-right: 0; text-align: center; }
  .u-slot.w-upravit { width: 62px; }
  .u-slot.w-reset { width: 50px; }
  .u-slot.w-smazat { width: 62px; }
  .u-slot.w-stav { width: 92px; }
  /* obě tabulky v Uživatelích mají scroll, výšku dopočítá roztahniTabulky() a mění se dělítkem */
  #usersList .tbl-wrap, #kartyList .tbl-wrap { overflow-y: auto; }
  .sec-head .sec-sel { color: var(--blue); font-size: 12.5px; font-weight: 600; }
  .sec-head .sum { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
  .section.collapsed .tbl-wrap { display: none; }
  /* nadpis skupiny půjček vypadá stejně jako hlavička sekce v Platbách k úhradě
     (14,5px / 700 / velkými, tmavý text) — ať se názvy sekcí napříč appkou neliší */
  .loan-group {
    font-size: 14.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .2px; margin: 22px 0 8px; padding: 8px 19px; border-radius: 12px;
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 9px;
    /* bílá karta se stínem — poloprůhledné šedé splývalo s podbarvením firem */
    background: var(--card); border: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(20, 26, 51, .08); color: var(--text);
  }
  .loan-group { cursor: pointer; user-select: none; }
  .loan-group:hover { border-color: var(--blue); box-shadow: 0 2px 8px rgba(20, 26, 51, .12); }
  body.bg-dark .loan-group { background: var(--card); border-color: var(--border); }
  body.bg-dark .loan-group:hover { border-color: var(--blue); }
  .loan-group .lg-label { justify-self: start; display: flex; align-items: center; gap: 9px; }
  .loan-group .lg-caret { color: var(--on-bg-muted); font-size: 11px; width: 12px; display: inline-block; }
  .loan-group:first-child { margin-top: 4px; }
  #loansOverview { padding-bottom: 60px; }   /* víc místa dole, ať poslední půjčky nezůstanou natěsno u černé lišty */
  /* měsíční úroky — náhledová tabulka */
  .mu-sec-title { font-size: 13.5px; font-weight: 700; color: var(--text); margin: 16px 4px 6px; }
  .mu-table { width: 100%; border-collapse: collapse; }
  .mu-table thead th { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
  .mu-table thead th.num { text-align: right; } .mu-table thead th.mu-c { text-align: center; }
  .mu-table td { padding: 5px 8px; border-bottom: 1px solid #eef0f6; font-size: 13px; vertical-align: middle; }
  .mu-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mu-table td.mu-c { text-align: center; }
  .mu-table tr.mu-total td { border-top: 2px solid var(--border); border-bottom: 0; font-weight: 800; padding-top: 7px; background: transparent; }
  .mu-table .mu-empty { color: var(--muted); font-style: italic; }
  /* bílé pozadí pod vyplněnými řádky (jinak splývají s barevným modalem) */
  .mu-table thead th, .mu-table tbody td { background: #fff; }
  .mu-table tbody tr.mu-manual td { background: #eef1ff; }   /* ruční řádek jemně odlišený */
  .mu-table tbody tr:first-child td:first-child { border-top-left-radius: 8px; }
  .mu-table tbody tr:first-child td:last-child { border-top-right-radius: 8px; }
  .mu-manual td { background: rgba(47,91,255,.04); padding: 2px 4px; }
  /* pole ručního řádku splývají s běžnými buňkami (stejné proporce), rámeček až při najetí/editaci */
  .mu-inp { width: 100%; box-sizing: border-box; border: 1px solid transparent; border-radius: 5px; padding: 3px 6px; font-size: 13px; line-height: 1.3; font-family: inherit; background: transparent; outline: none; color: var(--text); }
  .mu-inp:hover { border-color: var(--border); }
  .mu-inp:focus { border-color: var(--blue); background: #fff; }
  .mu-inp.mu-date { font-variant-numeric: tabular-nums; cursor: pointer; }
  .mu-inp.num { text-align: right; } .mu-inp.mu-pct { text-align: center; }
  .mu-add { font-size: 12px; padding: 5px 10px; margin: 3px 0 6px; }
  .loan-group .count { background: var(--card); color: var(--text); border-radius: 20px; padding: 2px 9px; font-size: 12px; letter-spacing: 0; }
  /* součty za skupinu — vycentrované nad tabulkou, jednou (tmavou) barvou */
  .loan-group-sum { grid-column: 2; display: grid; grid-template-columns: 210px 175px; column-gap: 30px; text-transform: none; letter-spacing: 0; }
  .loan-group-sum .lgs-item { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.2; }
  .loan-group-sum .lgs-lbl { font-size: 10.5px; font-weight: 700; color: var(--on-bg-muted); text-transform: uppercase; letter-spacing: .4px; }
  .loan-group-sum .lgs-val { font-size: 16px; font-weight: 800; color: var(--on-bg); font-variant-numeric: tabular-nums; white-space: nowrap; }
  /* přehledová tabulka půjček (věřitel/dlužník/datumy/jistina/úroky) — bez posuvníku, kompaktní akce */
  .loan-table { min-width: 0; }
  #technikaList table, #lideList table, #tankList table { min-width: 0; }
  /* Fakturuje pod: pevná šířka, dlouhý název se zkrátí trojtečkou (celý v bublině) — řádek se nesmí zvýšit */
  #lideList .lide-zkr { display: block; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #lideList td[data-m="telefon"] { white-space: nowrap; }
  .lide-exp-info { font-size: 13px; color: var(--muted); line-height: 1.5; margin: -2px 0 14px; }
  #lideExportRazeni { margin-top: 6px; flex-wrap: wrap; }   /* zahraniční číslo „+41 766 524 974“ jinak zalomilo řádek */
  /* v řádku tankování přibylo zaškrtávátko — užší ovládání, ať se tabulka vejde */
  #tankList td.tank-akce .btn-del { font-size: 16px; padding: 3px 4px; }
  #tankList .chk-btn { margin: 0 auto; }
  /* Nejdřív se bere místo MEZI sloupci, teprve pak se zkracují sloupce s textem —
     globálních 12 px po stranách buňky je tu zbytečně velký prázdný pás. */
  /* Svorka u cesty „tam i zpět": obě jízdy otočky dostanou vlevo barevný pruh, a protože
     spolu sousedí, splyne v jednu svislou svorku. Dva odstíny se střídají, aby dvě otočky
     pod sebou nevypadaly jako jedna; když je tabulka seřazená jinak a jízdy páru spolu
     nesousedí, zůstane u každé jen pruh ve stejné barvě — pořád je poznat, že patří k sobě. */
  /* Pruh otočky není `border-left` (ten by se rámečkem mezery protáhl dál), ale podkladový
     proužek, který se o rámeček zarazí a drží se zaoblení rohu. */
  /* Kniha jízd vypadá i na počítači jako karty na telefonu: každá jízda je bílá dlaždice
     na barevném podkladu, otočka je dlaždice ze dvou řádků. Tři věci, bez kterých to
     nefunguje:
     1. Za buňkami musí být barva pozadí — nese ji `tbody`, buňky dostanou bílou.
     2. Mezera musí být kolem CELÉ dlaždice, i po stranách; dělá se rámečkem buňky, protože
        odsazení je uvnitř a jen by řádek natáhlo. Rámeček 4 px ze všech stran dá mezi
        dlaždicemi 8 px, tedy přesně tolik jako `margin-bottom` karet na telefonu.
     3. Rádius se počítá z VNĚJŠÍHO okraje buňky, takže se do něj mezera započítá; aby měl
        bílý roh skutečných 8 px, musí být rádius o mezeru větší (12 = 4 + 8). Kdyby
        rámeček nebyl na všech stranách stejný, vyjde roh jako elipsa. */
  /* `border-collapse: collapse` (globální pro všechny tabulky) slučuje sousední rámečky do
     jednoho a hlavně u něj prohlížeč ZAHAZUJE `border-radius` — proto se rohy nedaly
     zakulatit, ať byl rádius jakýkoli. Tahle jedna tabulka proto sčítá rámečky odděleně;
     rozestup je 0, mezery mezi dlaždicemi dělají rámečky buněk. */
  #jizdyList table { border-collapse: separate; border-spacing: 0; }
  /* Podklad musí nést i tabulka a rolovací plocha, nejen `tbody` — za zakulaceným rohem
     buňky by jinak prosvítala bílá karta pod tabulkou. */
  #jizdyList .jizdy-wrap, #jizdyList table, #jizdyList tbody { background: var(--bg); }
  #jizdyList tbody td { background-color: var(--card); border: 4px solid var(--bg); border-width: 4px 0; }
  #jizdyList tbody tr:hover td { background-color: #e5eaf6; }
  #jizdyList tbody td:first-child { border-left: 4px solid var(--bg);
                                    border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
  #jizdyList tbody td:last-child { border-right: 4px solid var(--bg);
                                   border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
  /* dvojice je JEDNA dlaždice: mezi jejími řádky se mezera i zaoblení ruší a zůstane jen
     jemné dělítko */
  #jizdyList tbody tr.otocka-prvni td { border-bottom: 1px dashed #e3e6f0; }
  #jizdyList tbody tr.otocka-prvni td:first-child { border-bottom-left-radius: 0; }
  #jizdyList tbody tr.otocka-prvni td:last-child { border-bottom-right-radius: 0; }
  /* prostřední jízda delší cesty (Znojmo → Praha → Brno → Znojmo): mezeru nemá ani
     nahoře, ani dole, jen dělítka — dlaždice tak drží přes všechny tři řádky */
  #jizdyList tbody tr.otocka-stred td { border-top-width: 0; border-bottom: 1px dashed #e3e6f0; }
  #jizdyList tbody tr.otocka-stred td:first-child,
  #jizdyList tbody tr.otocka-stred td:last-child { border-radius: 0; }
  #jizdyList tbody tr.otocka-druha td { border-top-width: 0; }
  #jizdyList tbody tr.otocka-druha td:first-child { border-top-left-radius: 0; }
  #jizdyList tbody tr.otocka-druha td:last-child { border-top-right-radius: 0; }
  /* Svorka nesmí mít mezery: podklad se kreslí jen uvnitř odsazení buňky, takže by ho
     čárkované dělítko mezi jízdami cesty přeťalo. Pruh proto přesahuje o pixel dolů
     (`100% + 1px`) do místa dělítka a dělítko samo je v první buňce průhledné — čára tak
     začíná až za svorkou a pruh běží celou cestou vcelku. */
  #jizdyList tbody tr.otocka td:first-child {
    padding-left: 12px;
    background-image: linear-gradient(var(--otocka-pruh), var(--otocka-pruh));
    background-size: 3px calc(100% + 1px); background-position: left top; background-repeat: no-repeat;
  }
  #jizdyList tbody tr.otocka-prvni td:first-child,
  #jizdyList tbody tr.otocka-stred td:first-child { border-bottom-color: transparent; }
  #jizdyList .jizda-chk { margin-right: 6px; vertical-align: middle; }
  #jizdyList tbody tr.otocka-0 td:first-child { --otocka-pruh: #BA7517; }
  #jizdyList tbody tr.otocka-1 td:first-child { --otocka-pruh: #EFB25C; }

  #tankList thead th, #tankList tbody td { padding-left: 6px; padding-right: 6px; }
  /* „Dodavatel", „Kde" a „Popis" se nelámou na dva řádky — dlouhá hodnota se radši
     ořízne třemi tečkami, řádky tabulky tak zůstanou stejně vysoké */
  #tankList tbody td:nth-child(3), #tankList tbody td:nth-child(4),
  #tankList tbody td:nth-child(5) {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* v deníku pokladny přibylo čtvrté tlačítko (duplikovat) — odsazení se ubere uvnitř
     ovládacího sloupce, ať se místo nebere Popisu víc, než je nutné */
  #pokladnaList td.pok-akce { padding-left: 4px; padding-right: 4px; }
  #pokladnaList td.pok-akce .btn-del { padding-left: 4px; padding-right: 4px; }
  /* posuvník na Macu je překryvný — nezabírá místo a kreslí se PŘES obsah, takže mazací
     křížek u pravého okraje nešel trefit; poslední sloupec mu proto nechává 16 px */
  #pokladnaList .pok-wrap tr > :last-child { padding-right: 16px; }
  /* deník pokladny stejným písmem jako Vydané doklady (Petr 5. 10. 2026 — popis byl 12,5 px,
     hlavička 11,5 px): řádky 14,5 px, popis a místo 14 px, hlavička 12 px; užší odsazení buněk
     jako tam, ať se větší písmo vejde bez vodorovného posuvníku. Jen počítač — karty na telefonu
     mají vlastní velikosti. */
  @media (min-width: 761px) {
    #pokladnaList .pok-wrap thead th { font-size: 12px; padding-left: 7px; padding-right: 7px; }
    #pokladnaList .pok-wrap tbody td { font-size: 14.5px; padding: 6px 7px; }
    #pokladnaList .pok-wrap tbody td.txt { font-size: 14px; }
    #pokladnaList .pok-wrap tr > :first-child { padding-left: 12px; }
    #pokladnaList .pok-wrap tr > :last-child { padding-right: 16px; }
  }
  /* přepínač S DPH / Bez DPH v Předplatném — stejný vzhled jako přepínače nad grafy */
  .sw-dph-prep { flex: 0 0 auto; }
  .swk-lista .sw-dph-prep { margin-left: 10px; }
  /* kdo není admin, stav jen vidí — zaškrtávátko by sváděl na tlačítko, které nefunguje */
  .vyuc-znak { color: var(--green); font-weight: 800; }
  /* v řádku je od zavedení odkazů o tlačítko víc — užší ovládání, ať se tabulka vejde
     do okna a nenaskočí vodorovný posuvník */
  #technikaList td.te-akce button, #lideList td button.btn-del {
    font-size: 16px; padding: 3px 4px;
  }
  #technikaList td.te-akce .ikona-odkaz, #lideList .ikona-odkaz { font-size: 14px; padding: 3px 3px; }
  .loan-table td.lt-firma { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* rozlišení dluh vs. pohledávka — jen buňky Věřitel/Dlužník, jemné podbarvení */
  .loan-table tr.loan-prijata td.lt-firma { background: #f8c9c4; }     /* přijatá = dluh → červená */
  .loan-table tr.loan-poskytnuta td.lt-firma { background: #c9eed7; }  /* poskytnutá → zelená */
  /* hover musí ztmavit i barevný pruh věřitel/dlužník — bez toho zůstal pruh světlý a řádek vypadal rozdělený */
  .loan-table tr.loan-prijata:hover td.lt-firma { background: #f3b3ac; }
  .loan-table tr.loan-poskytnuta:hover td.lt-firma { background: #b3e6c6; }
  .loan-table td.lt-akce { text-align: right; white-space: nowrap; }
  /* režim půjčky — ÚČTO (do účetnictví) / PLA (do Plateb k úhradě); zapnuté zeleně, vypnuté nevýrazně */
  .loan-table td.lt-rezim { text-align: center; white-space: nowrap; }
  .rezim-tag {
    display: inline-block; font-size: 9.5px; font-weight: 750; letter-spacing: .3px;
    border-radius: 5px; padding: 2px 4px; margin-right: 3px;
    background: #eceef4; color: #b0b5c6;
  }
  .rezim-tag:last-child { margin-right: 0; }
  .rezim-tag.on { background: var(--green-bg); color: var(--green); }
  /* v řádku je od zavedení odkazů o tlačítko víc — užší odsazení, ať se sloupec
     nerozšíří tak, že tabulka přeteče a naskočí vodorovný posuvník */
  .loan-table td.lt-akce .btn { font-size: 12px; padding: 5px 6px; }
  .loan-table td.lt-akce .ikona-odkaz { font-size: 14px; padding: 3px 3px; }
  /* volby v okně Dopočítat úroky — text vedle kolečka (scoped, ať přebije obecné .modal label/input) */
  #urokDoOverlay .modal label.urok-do-opt {
    display: flex; align-items: center; gap: 9px; margin: 0; padding: 6px 0;
    font-size: 14px; font-weight: 600; color: var(--text); text-transform: none; cursor: pointer;
  }
  #urokDoOverlay .urok-do-opt input[type=radio] {
    width: 17px; height: 17px; flex: 0 0 auto; margin: 0; padding: 0; accent-color: var(--blue); cursor: pointer;
  }
  #urokDoOverlay .urok-do-opt.disabled { opacity: .45; cursor: default; }
  #urokDoOverlay #urokDoDatum { width: 150px; margin: 2px 0 4px 26px; text-align: center; }
  /* číselné bloky v hlavičce půjčky (jistina, úroky) — zarovnané doprava, pevná šířka ať lícují mezi řádky */
  /* pevné body v hlavičce půjčky — čísla lícují mezi řádky, akce jsou nalepené vpravo */
  .loan-head-num { text-align: right; width: 132px; flex: 0 0 132px; font-variant-numeric: tabular-nums; line-height: 1.25; }
  .loan-head-num .lbl { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
  .loan-head-num .val { font-size: 15.5px; font-weight: 800; white-space: nowrap; }
  /* podtitulek má VŽDY rezervovanou výšku jednoho řádku — delší text se zalomí a druhý
     řádek se jen domaluje pod blok, aniž by vytlačil hlavní částku z linie ostatních čísel */
  .loan-head-num .sub { font-size: 11.5px; color: var(--muted); white-space: normal; overflow-wrap: break-word;
                        line-height: 1.25; height: 14.5px; overflow: visible; }
  /* prázdný podtitulek (jistina bez změn) rezervuje řádek, ať částky Jistina/Úroky lícují na stejné výšce */
  .loan-head-num .sub:empty::after { content: "\00a0"; }
  .loan-head-akce { display: flex; gap: 4px; flex: 0 0 auto; }
  .loan-head-akce .btn { font-size: 13px; padding: 6px 10px; }
  /* automaticky složená část názvu půjčky — needitovatelná, doplněk se píše do pole pod ní */
  .nazev-auto {
    border: 1px solid var(--border); border-radius: 8px 8px 0 0; border-bottom: 0;
    padding: 8px 12px; font-size: 13.5px; font-weight: 650; background: var(--bg); color: var(--muted);
  }
  .nazev-auto + input { border-top-left-radius: 0; border-top-right-radius: 0; }
  /* přepínače v okně půjčky — popisek vedle checkboxu, ne pod ním */
  /* přepínače vedle sebe — vysvětlení je v tooltipu, ať okno nenaroste do výšky */
  .prepinace { margin: 12px 0 2px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .modal .prepinac { display: flex; align-items: center; gap: 10px; margin: 0; padding-left: 0; cursor: pointer; }
  .modal .prepinac input[type=checkbox] { width: 16px; flex: 0 0 16px; margin: 0; }
  .prepinac b { font-size: 12.5px; color: var(--text); font-weight: 650; }
  /* přepínač „Je to faktura" v dialogu platby — lícuje s popisky polí (padding-left 13 px) */
  .modal .m-je-faktura { margin: 12px 0 2px; padding-left: 13px; }
  /* poznámka u řádku úrokového období — nenápadné pole, zvýrazní se až při psaní */
  .lp-pozn {
    width: 100%; border: 1px solid transparent; border-radius: 6px; padding: 3px 6px;
    background: transparent; font-size: 12.5px; font-family: inherit; color: var(--text);
  }
  .lp-pozn:hover { border-color: var(--border); }
  .lp-pozn:focus { border-color: var(--blue); background: #fff; outline: none; }
  /* splácený úvěr má o tři sloupce víc než běžná půjčka — dvouslovné popisky
     ("Splátka jistiny", "Datum úhrady") se v užších sloupcích musí zalomit */
  table.uver-kalendar th { white-space: normal; line-height: 1.2; }
  .lp-celkem { font-weight: 700; }
  /* tři pole vedle sebe se musí vejít do užších sloupců úvěru */
  input.lp-urok[data-lpole="splatka_jistiny"] { width: 72px; }
  input.lp-urok[data-lpole="poplatky"] { width: 56px; }
  /* splácený úvěr v2 — splátky jednotlivě v buňce, stav účtu tučně, plán šedě */
  .uver-splatky { min-width: 140px; }
  .uver-kalendar { table-layout: fixed; }
  .uver-kalendar td, .uver-kalendar th { padding-left: 6px; padding-right: 6px; }
  .uver-spl { display: inline-flex; align-items: center; gap: 4px; background: var(--card);
              border-radius: 6px; padding: 1px 6px; margin: 1px 4px 1px 0; white-space: nowrap; font-size: 12px; }
  .uver-spl b { font-weight: 700; }
  .uver-spl-pozn { color: var(--muted); font-style: italic; }
  .spl-del { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 11px; padding: 0 1px; }
  .spl-del:hover { color: var(--red); }
  .spl-add { border: 1px dashed var(--muted); background: none; border-radius: 6px; color: var(--muted);
             cursor: pointer; font-size: 12px; font-weight: 700; padding: 0 7px; line-height: 18px; }
  .spl-add:hover { color: var(--blue); border-color: var(--blue); }
  .uver-stav { font-weight: 800; font-variant-numeric: tabular-nums; }
  .uver-mesic-sub { font-size: 11.5px; font-weight: 400; color: var(--muted); white-space: nowrap; }
  .uver-plan { color: var(--muted); font-size: 12px; white-space: nowrap; }
  .uver-plan .uver-sip { color: var(--blue); }
  .uver-odchylka { font-weight: 700; font-variant-numeric: tabular-nums; }

  /* pokladna — příjem zeleně, výdej červeně, zůstatek tučně */
  .pok-prijem { color: var(--green); font-weight: 700; }
  .pok-vydej { color: var(--red); font-weight: 700; }
  .pok-zustatek { font-weight: 800; font-variant-numeric: tabular-nums; }
  .pok-karta { font-variant-numeric: tabular-nums; letter-spacing: .5px; }
  /* karta po platnosti — celý řádek zešedne, ať se z něj nedá omylem vybírat */
  #kartyList tr.karta-prosla td, #kartyList tr.karta-prosla td.firma { color: #9aa1b4; }
  #kartyList tr.karta-prosla { background: #f6f7fa; }
  .karta-ano { color: var(--green); font-weight: 700; }
  .karta-ne { color: var(--red); font-weight: 700; }

  /* tabulky změn v náhledu syncu (změněné částky / pravděpodobně uhrazené) */
  #wflowZmeny .wf-zmeny-blok { border: 1px solid var(--border); border-radius: 10px; background: #fff;
                               margin-bottom: 10px; max-height: 24vh; overflow-y: auto; }
  #wflowZmeny .wf-zmeny-nadpis { font-size: 12.5px; font-weight: 700; padding: 8px 12px 0; }

  /* náhled importu faktur (wflow/iDoklad): tabulka na bílém, barevný jen rámeček okna */
  .wflow-import-tbl tbody td { background: #fff; }
  .wflow-import-tbl thead th { white-space: nowrap; padding-left: 8px; padding-right: 8px; }

  /* kontokorent — ruční částka úroku v kalendáři (viditelně editovatelné pole) */
  /* číslo zarovnané přesně jako prostý text úroku (padding-right 0); rámeček přes box-shadow, ať neposune číslo */
  .lp-urok {
    width: 66px; text-align: right; border: 0; padding: 1px 0; border-radius: 5px;
    background: #fff; box-shadow: 0 0 0 1px var(--border);
    font-size: inherit; font-weight: inherit; font-family: inherit; color: var(--text); font-variant-numeric: tabular-nums;
  }
  .lp-urok::placeholder { color: var(--muted); }
  .lp-urok:focus { outline: none; box-shadow: 0 0 0 1.5px var(--blue); }
  /* splatnost úroku — kdy peníze musí odejít, proto tučně a s pevnou šířkou číslic */
  td.splatno { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
  #loansOverview .sec-head { transition: background .15s; }
  /* sbalený řádek půjčky = jen to podstatné na dva řádky; detaily (původní jistina,
     úrok celkem) mají smysl až v rozbalené kartě, kde je na ně místo */
  /* půjčky ve skupině tvoří souvislou tabulku — jeden rám kolem všech řádků,
     mezi nimi jen dělicí linka místo barevných mezer */
  .loan-rows { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; padding-bottom: 26px; }
  .loan-rows .section { margin-bottom: 0; border: 0; border-radius: 0; background: transparent; }
  .loan-rows .section + .section { border-top: 1px solid var(--border); }
  #loansOverview .section.collapsed .sec-head { padding: 7px 18px; }
  #loansOverview .section.collapsed .loan-head-num { line-height: 1.15; }
  #loansOverview .section.collapsed .loan-head-num .sub { display: none; }
  /* název i štítek na jeden řádek — jinak dlouhé názvy řádky rozhodí do různých výšek.
     Celý název zůstává dostupný v tooltipu a po rozbalení. */
  /* !important přebíjí inline styl z loanHtml() — ve sbaleném řádku chceme drobnější
     písmo jako v bočním menu, v rozbalené kartě zůstává název výrazný */
  #loansOverview .section.collapsed .sec-head h2 {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 14px !important; font-weight: 600 !important;
  }
  #loansOverview .section.collapsed .sec-head .badge { white-space: nowrap; }
  .loan-view-toggle { display: flex; gap: 6px; }
  .tbl-wrap { overflow-x: auto; }

  table { width: 100%; min-width: 1086px; border-collapse: collapse; table-layout: fixed; }
  /* v popup oknech se tabulka musí vejít do šířky okna — jinak z globálního min-width vznikne posuvník */
  .modal table { min-width: 0; }
  thead th {
    text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--muted); font-weight: 650; padding: 8px 12px; border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border); background: #fafbfd; white-space: nowrap;
  }
  thead th[data-sort], thead th[data-lsort] { cursor: pointer; user-select: none; }
  thead th[data-sort]:hover, thead th[data-lsort]:hover { color: var(--text); background: #f0f2f8; }
  thead th .arr { font-size: 14px; margin-left: 4px; color: #b6bccf; }
  /* hlavička řazení v tabulce půjček: popisek vlevo, šipka vpravo uvnitř buňky (nezasahuje do dalšího sloupce);
     th zůstává table-cell (jinak by se rozbily šířky sloupců), flex řeší až vnitřní obal */
  .loan-table thead th .th-in { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
  /* užší odsazení hlaviček — popisky typu NEUHRAZENÉ ÚROKY se musí vejít do svého sloupce */
  .loan-table thead th { padding-left: 8px; padding-right: 8px; }
  /* číselné sloupce (Jistina, Neuhrazené úroky, Období) — popisek i šipka vpravo, nad zarovnanými čísly */
  .loan-table thead th.num .th-in { justify-content: flex-end; }
  /* dlouhý popisek se zalomí (celý název zůstane), místo aby přetekl do dalšího sloupce nebo se ořízl */
  .loan-table thead th .th-in .th-lbl { white-space: normal; min-width: 0; line-height: 1.2; }
  .loan-table thead th .th-in .arr { margin-left: 0; flex: 0 0 auto; }   /* šipka se nezmenší ani nevytlačí ven z buňky */
  .loan-table thead th[data-lsort]:hover .arr { color: var(--muted); }
  thead th .sort-lvl { font-size: 9px; color: var(--blue); font-weight: 700; margin-left: 1px; }
  thead th.sorted { color: var(--blue); }
  thead th.sorted .arr { color: var(--blue); }
  tbody td { padding: 5px 12px; border-bottom: 1px solid #f0f1f6; vertical-align: middle; line-height: 1.3; }
  tbody tr:last-child td { border-bottom: 0; }
  tbody tr { cursor: pointer; transition: background .12s; }
  tbody tr:hover { background: #e5eaf6; }
  tbody tr.sel { background: var(--sel-bg); }
  tbody tr.sel:hover { background: #dde5ff; }
  /* platba, ke které už je stažený platební příkaz (štítek „příkaz 02.10.“) — jantarová jako
     oranžové zaškrtávátko „do příkazu“; má přednost i před modrým výběrem k úhradě, protože
     platby v příkazu bývají označené k úhradě všechny (Petr 2. 10. 2026) */
  tbody tr.v-prikazu, tbody tr.v-prikazu.sel { background: #fff4df; }
  tbody tr.v-prikazu:hover, tbody tr.v-prikazu.sel:hover { background: #ffecc7; }
  tbody tr.wflow-stale { background: var(--purple-bg); }
  tbody tr.wflow-stale:hover { background: #f1e6ff; }
  tfoot td { padding: 8px 12px; border-top: 2px solid var(--border); background: #fafbfd; }
  tbody tr.wflow-stale.sel { background: #ece0ff; }
  td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  td.amount { font-weight: 650; }
  /* klik na částku otevře volbu částečné úhrady (checkbox označuje rovnou celou fakturu) */
  td.amount-part { cursor: pointer; }
  td.amount-part:hover { text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 3px; }
  td.amount .part-of { display: block; font-size: 11px; font-weight: 650; color: var(--blue); white-space: nowrap; }
  .cur { color: var(--muted); font-weight: 500; font-size: 12px; margin-left: 3px; }
  .firma { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .txt { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; }

  /* poznámka u platby: prázdná = obrys, vyplněná = žlutý obdélníček s černým obrysem */
  .note-cell { text-align: center; position: relative; overflow: visible; }
  .note-btn { border: 0; background: none; cursor: pointer; padding: 3px 4px; line-height: 0; border-radius: 6px; }
  .note-btn svg rect { fill: none; stroke: #c2c6d4; stroke-width: 1.5; }
  .note-btn:hover { background: var(--bg); }
  .note-btn:hover svg rect { stroke: var(--muted); }
  .note-btn.has svg rect { fill: #f5c518; stroke: #16192c; }
  /* okamžitý tooltip s textem poznámky — fixní vůči oknu, ať ho neořízne přetečení tabulky */
  .note-tip {
    position: fixed; display: none; z-index: 9999; pointer-events: none;
    background: #1d2340; color: #fff; padding: 9px 13px; border-radius: 12px;
    font-size: 12.5px; line-height: 1.5; font-weight: 500; letter-spacing: .1px;
    max-width: 280px; white-space: normal; overflow-wrap: anywhere; text-align: left;
    box-shadow: 0 6px 20px rgba(20,26,51,.35);
  }
  .note-tip.show { display: block; }
  /* seznam uživatelů v tmavém okně — jména pod sebou, ne slepený odstavec */
  .note-tip { white-space: pre-line; }
  /* buňka „kdo používá": počet lidí, jména až po najetí myší (jinak řádek naroste přes celou obrazovku) */
  /* měsíčně u člověka: v buňce koruny, rozpis po měnách v bublině */
  .sw-mesicne { font-variant-numeric: tabular-nums; }
  .sw-mesicne[data-tip] { cursor: help; border-bottom: 1px dashed var(--border); }
  .sw-mesicne[data-tip]:hover { color: var(--blue); border-bottom-color: var(--blue); }
  .sw-uziv { font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: help;
             border-bottom: 1px dashed #c2c6d4; white-space: nowrap; }
  .sw-uziv:hover { color: var(--blue); border-bottom-color: var(--blue); }
  .dash { color: #c2c6d4; }
  input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }
  /* checkbox u platby jako <button> (ne nativní input) — Safari s nativním checkboxem míchal
     nativní přepnutí do našeho popupu a ten se hned zavíral; tlačítko se chová spolehlivě */
  .chk-btn { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; box-sizing: border-box;
    padding: 0; margin: 0; border: 1.5px solid #b6bccf; border-radius: 4px; background: #fff;
    cursor: pointer; position: relative; flex: 0 0 auto; vertical-align: middle; }
  .chk-btn:hover { border-color: var(--blue); }
  .chk-btn.checked { background: var(--blue); border-color: var(--blue); }
  .chk-btn.checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .spl-chk { width: 20px; height: 20px; }
  input[type=checkbox].lp-chk { accent-color: var(--green); width: 18px; height: 18px; }
  input[type=checkbox].lp-chk.partial { accent-color: #e8850c; }   /* částečně uhrazeno = oranžová fajfka */
  /* buňka „Uhrazeno": fajfka na střed, příznak částečné úhrady napevno u pravého okraje */
  td.lp-uhr { position: relative; text-align: center; }
  .lp-part {
    /* na střed mezery mezi checkboxem (uprostřed buňky) a datem (v další buňce): 0,75× šířka buňky + odsazení textu data */
    position: absolute; left: calc(75% + 11px); top: 50%; transform: translate(-50%, -50%);
    color: #e8850c; font-weight: 900; font-size: 18px; letter-spacing: 1px;
    line-height: 1; cursor: pointer; user-select: none;
  }
  .lp-part:hover { filter: brightness(1.12); }
  /* černé popup okno NAD bodem (dole by ho překryl checkbox dalšího řádku); roztáhne se doleva */
  .lp-part:hover::after {
    content: attr(data-tip); position: absolute; right: -4px; bottom: calc(100% + 9px);
    background: #16192c; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap;
    padding: 7px 11px; border-radius: 8px; box-shadow: 0 8px 24px rgba(20, 26, 51, .35); z-index: 100;
  }
  .lp-part:hover::before {
    content: ''; position: absolute; right: 3px; bottom: calc(100% + 4px);
    border: 5px solid transparent; border-top-color: #16192c; z-index: 100;
  }

  /* karta půjčky — přehledné bloky Jistina / Sazba / Trvání / Frekvence se změnou hned u hodnoty */
  .loan-terms { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
  .loan-term { flex: 1 1 210px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; background: var(--bg); display: flex; flex-direction: column; }
  /* popis dlaždice vlevo, tučná hodnota vpravo na stejné účaří — vzdušnější a oddělené od tlačítka */
  .loan-term-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
  .loan-term-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
  .loan-term-value { font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; text-align: right; }
  .loan-term-sub { font-size: 12px; color: var(--muted); margin-top: 2px; text-align: right; }
  .loan-term .btn { margin-top: auto; width: 100%; padding: 6px 10px; font-size: 12.5px; }
  .due { font-variant-numeric: tabular-nums; }
  .due > span:first-child { white-space: nowrap; }
  .badge { display: inline-block; font-size: 11px; font-weight: 650; border-radius: 6px; padding: 2px 5px; margin-left: 3px; }
  .badge.over { background: var(--red-bg); color: var(--red); }
  .date-over { color: var(--red); }
  .date-soon { color: var(--orange); }
  .badge.soon { background: var(--orange-bg); color: var(--orange); }
  .badge.stale { background: var(--purple-bg); color: var(--purple); margin-left: 6px; }
  .badge.zaloha { background: var(--purple-bg); color: var(--purple); margin-left: 0; }   /* zálohová faktura */
  /* zálohovou fakturu pozná řádek podle proužku vlevo — sloupec Druh říká, odkud přišla */
  #receivablesList tr.recv-zaloha td:first-child { box-shadow: inset 3px 0 0 var(--purple); }
  /* Vydané faktury — pevný layout sloupců, ať se splatnost nezalamuje a Odběratel je užší */
  /* min-width: 0 přebíjí globální minimum tabulek — jinak by se na 13" objevil vodorovný posuvník */
  .recv-table { table-layout: fixed; min-width: 0; }
  .recv-table th, .recv-table td { white-space: nowrap; }                          /* nezalamovat (splatnost celá na řádku) */
  /* užší odsazení buněk — na 13" displeji jde o každý pixel, ať je vidět i sloupec s iniciálami */
  .recv-table th, .recv-table td { padding-left: 8px; padding-right: 8px; }
  .recv-table td.recv-ellip { overflow: hidden; text-overflow: ellipsis; }         /* ořez jen dlouhé sloupce (Odběratel, Text) */
  #receivablesList tr.recv-ocek-on td { background: #eef9f1; }                      /* zaškrtnuté „očekávám úhradu" — světle zeleně */
  /* telefon a e-mail v Lidech jsou odkazy kvůli mobilu (volání, pošta); na počítači
     ale nemají vypadat jinak než ostatní text v tabulce */
  /* vztah člověka: interní tyrkysově, externí fialově — modrá je vyhrazená vybranému
     stavu a zelená/červená stavu záznamu, tak sem nepatří ani jedna */
  /* vysvětlivka v dialogu (proč je pole zamčené) — oranžová jako ostatní upozornění */
  .okno-info { margin-top: 14px; background: var(--orange-bg); border: 1px solid #f0d199;
    border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; color: #7a4d06; }
  .okno-info b { font-weight: 700; }
  #swLicenceTitle .sw-lic-stav { margin-left: 10px; vertical-align: 2px; font-size: 12px; }
  #swLicenceNeaktivni { margin-top: 0; }
  .vztah-znak { display: inline-block; font-size: 12px; font-weight: 650; border-radius: 7px;
    padding: 2px 8px; border: 1px solid transparent; white-space: nowrap; }
  .vztah-in { background: var(--teal-bg); border-color: #b6e3ee; color: var(--teal); }
  .vztah-ex { background: var(--purple-bg); border-color: #ddcdf7; color: var(--purple); }
  /* typ subjektu v Adresáři: dodavatel tyrkysově, odběratel fialově (modrá = vybraný stav) */
  /* filtry ve sloupcích jsou type="search" (kvůli AutoFill v Safari) — vzhled i křížek prohlížeče pryč */
  input.filtr-pole[type=search] { -webkit-appearance: none; appearance: none; }
  input.filtr-pole[type=search]::-webkit-search-cancel-button,
  input.filtr-pole[type=search]::-webkit-search-decoration { -webkit-appearance: none; display: none; }
  .typ-pily { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
  .typ-pil { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 20px;
    border: 1px solid; margin-right: 4px; white-space: nowrap; }
  .typ-pil.dod { background: var(--teal-bg); border-color: #b6e3ee; color: var(--teal); }
  .typ-pil.odb { background: var(--purple-bg); border-color: #ddcdf7; color: var(--purple); }
  .modal .de-typ { display: flex; gap: 8px; margin-bottom: 4px; }
  .modal .de-typ .btn { flex: 1; }
  .modal .de-pozn { font-weight: 400; color: var(--muted); margin-left: 6px; }
  .vztah-jiny { background: #eef0f5; border-color: var(--border); color: var(--muted); }
  a.mob-kontakt { color: inherit; text-decoration: none; }
  /* Tlacitko "Predat cloveku" v karte techniky je jen pro telefon - na pocitaci
     se predava zaskrtnutim vic kusu naraz a tlacitkem v liste */
  .te-predat { display: none; }
  /* dlazdice Pocet pohybu ma smysl jen na telefonu, kde ostatni dve nejsou videt */
  .card.pok-pocet { display: none; }
  /* prepinace stavu Techniky; margin-right: auto odsune tlacitka vpravo k okraji listy */
  .tech-filtr { display: flex; gap: 8px; margin-right: auto; }

  /* ---------- Tarify Vodafone ---------- */
  /* Přepínač Měsíc/Rok nemá odsávat místo doprava — tlačítka vpravo si ho berou sama. */
  #tarifyPohled { margin-right: 0; }
  #viewTarify .view-sticky .btn { white-space: nowrap; }
  #viewTarify .view-sticky h2 { white-space: nowrap; }
  /* Globální min-width tabulek je kvůli seznamům plateb; tahle se musí umět smrsknout,
     jinak by měla vodorovný posuvník. Čísla v buňce se místo toho zalomí na víc řádků. */
  #tarifyList table { min-width: 0; }
  #tarifyList table td, #tarifyList table th { padding-left: 8px; padding-right: 8px; }
  #tarifyList table td.ta-cisla { white-space: normal; }
  #tarifyList table td.ta-cisla { color: var(--muted); font-size: 12.5px; }
  #tarifyList table td.ta-cisla b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
  /* Ručně přepsaná částka se pozná na první pohled — jinak by se zdálo, že přišla z faktury. */
  .ta-rucne { border-bottom: 1px dashed var(--muted); cursor: pointer; }
  .ta-stav { display: inline-block; font-size: 13px; font-weight: 650; padding: 3px 10px;
             border-radius: 7px; border: 1px solid transparent; white-space: nowrap; }
  .ta-stav.ceka { background: #eef0f5; border-color: var(--border); color: #6f7889; }
  .ta-stav.odeslano { background: var(--orange-bg); border-color: #f0d199; color: #96620a; }
  .ta-stav.zaplaceno { background: var(--green-bg); border-color: #b8e3ca; color: #1c7d55; }

  /* Tlačítka v řádku. Tmavá = akce (posun stavu), obyčejná = otevřít výzvu.
     Modrá se tu záměrně nepoužívá — ta patří vybranému stavu, ne akci. */
  /* Tlačítka drží pevné pozice: každé má svůj sloupec, a když zrovna není vidět
     (u zaplaceného není co posouvat), zůstane po něm prázdné místo. Jinak by se
     „Výzva" i tužtička posouvaly řádek od řádku podle stavu. */
  /* celý řádek otevírá plátce; ovládací prvky uvnitř si nechávají vlastní kurzor */
  #tarifyList tbody tr { cursor: pointer; }
  /* Střídavý podklad kvůli orientaci — u řádku se čte přes celou šířku a oko sklouzává.
     Barva je stejná jako u sestav (.fmt-shot). Podklad sedí na <tr>, ne na <td>: v roční
     matici mají obarvené buňky (zaplaceno / výzva odeslána) vlastní pozadí a takhle
     přirozeně přebijí pruh, místo aby se s ním praly o specificitu. */
  #tarifyList tbody tr:nth-child(even), #tarifyRok tbody tr:nth-child(even) { background: #e8eef8; }
  #tarifyList tbody tr:hover { background: #d8e2f4; }
  /* Šířky sloupců jsou změřené z nejdelšího textu, který se v nich objeví
     („Poslat výzvu" 101 px, „Výzva" 59 px, „↩" 35 px), ne odhadnuté. */
  /* Ve kterém měsíci zrovna jsem — velkým písmem nad dlaždicemi, kam padne oko,
     a se šipkami na krok dopředu a zpět (roletky zůstávají na skok jinam). */
  /* Nadpis sedí v liště sekce, ne na vlastním řádku, a šipky jsou těsně u textu —
     pevná šířka nadpisu je odsouvala doprava a lišta pak vypadala roztaženě. */
  .ta-obdobi { display: inline-flex; align-items: center; gap: 6px; }
  /* Pevná šířka podle nejdelšího měsíce („Červenec 2026" = 155 px, změřeno), text
     na střed — jinak šipky poskakují podle toho, jak dlouhé jméno měsíc má.
     V ročním pohledu je v nadpisu jen rok, takže si vystačí s užším místem. */
  .ta-obdobi-nazev { font-size: 22px; font-weight: 750; letter-spacing: -.3px;
                     white-space: nowrap; width: 162px; text-align: center; }
  .ta-obdobi.jen-rok .ta-obdobi-nazev { width: 72px; }
  .ta-sipka { width: 34px; height: 34px; border: 1px solid var(--border); background: var(--card);
              border-radius: 9px; font-size: 20px; line-height: 1; color: var(--text);
              cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .ta-sipka:hover:not(:disabled) { border-color: #b9c1d8; background: #f4f6fc; }
  /* na kraji dat se dál listovat nedá — šipka to musí přiznat, ne tiše nereagovat */
  .ta-sipka:disabled { opacity: .35; cursor: default; }
  /* sloupec měsíce v roční matici je RRRR-MM, takže potřebuje víc místa */
  #tarifyRok td.ta-mesic { white-space: nowrap; }

  .ta-akce-mrizka { display: grid; grid-template-columns: 66px 106px 36px 108px 26px;
                    gap: 6px; justify-content: end; align-items: center; }
  .ta-akce-mrizka > .ta-vpokladne { font-size: 12px; font-weight: 650; color: var(--green);
                                    white-space: nowrap; text-align: center; }
  .ta-akce-mrizka > .ta-akce { width: 100%; }
  .ta-akce { border: 1px solid var(--border); background: var(--card); border-radius: 7px;
             padding: 4px 10px; font-size: 13px; font-weight: 650; color: var(--text); cursor: pointer; }
  .ta-akce:hover:not(:disabled) { border-color: #b9c1d8; }
  .ta-akce:disabled { opacity: .4; cursor: default; }
  .ta-akce.hlavni { background: #3d4460; border-color: #3d4460; color: #fff; }
  .ta-akce.hlavni:hover { background: #4a527a; border-color: #4a527a; }

  /* Čísla v dialogu plátce: bílé řádky jako seznam pokladen v dialogu firmy. */
  .ta-cislo-radek { display: flex; align-items: center; gap: 8px; background: #fff;
                    border: 1px solid var(--border); border-radius: 9px; padding: 6px 10px; margin-bottom: 6px; }
  .ta-cislo-radek input[type=text], .ta-cislo-radek input:not([type]) { margin: 0; }
  .ta-cislo-radek .ta-cislo-pole { width: 132px; flex: 0 0 132px; font-variant-numeric: tabular-nums; }
  .ta-cislo-radek input[data-tapopis] { flex: 1 1 0; min-width: 0; }
  .ta-cislo-radek .ta-castka-pole { width: 92px; flex: 0 0 92px; text-align: right;
                                    font-variant-numeric: tabular-nums; }
  /* popisky sloupců nad řádky čísel — sedí přesně nad svými poli */
  .ta-cisla-hlavicka { display: flex; align-items: center; gap: 8px; padding: 0 10px 4px;
                       font-size: 12px; font-weight: 600; color: var(--muted); }
  .ta-cisla-hlavicka > span:nth-child(1) { flex: 0 0 132px; margin-left: 24px; }
  .ta-cisla-hlavicka > span:nth-child(2) { flex: 1 1 0; min-width: 0; }
  .ta-cisla-hlavicka .ta-cisla-do { flex: 0 0 104px; }
  .ta-cisla-hlavicka .ta-cisla-castka { flex: 0 0 92px; text-align: right; margin-right: 34px; }
  /* datum, do kdy číslo běží — prázdné znamená „pořád" */
  .ta-cislo-radek .ta-do-pole { width: 104px; flex: 0 0 104px; cursor: pointer; }
  /* globální `input { width: 100% }` platí i na radio — bez pevné šířky roztlačí celý řádek */
  .ta-cislo-radek input[type=radio] { flex: 0 0 16px; width: 16px; height: 16px;
                                      margin: 0; accent-color: var(--blue); cursor: pointer; }

  /* Náhled importu: nahoře souhrn s kontrolním součtem, pod ním tři skupiny čísel. */
  .ti-shrnuti { background: #fff; border: 1px solid var(--border); border-radius: 10px;
                padding: 10px 12px; margin-bottom: 10px; font-size: 13px; line-height: 1.6; }
  .ti-shrnuti b { font-weight: 700; }
  .ti-ok { color: var(--green); font-weight: 700; }
  .ti-spatne { color: var(--red); font-weight: 700; }
  .ti-skupina { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
                color: var(--muted); margin: 12px 0 5px; }
  #tiObsah table { min-width: 0; }
  #tiObsah .tbl-wrap { overflow: visible; }
  #tiObsah tbody td { font-size: 13px; }
  .ti-zmena { color: var(--orange); font-weight: 650; }
  .ti-rucne { color: var(--muted); }

  /* Součet toho, co je v deníku vidět. Lepí se dolů, ať je vidět i při rolování dlouhého
     seznamu — kvůli tomu má tabulka <tfoot>, ne obyčejný poslední řádek. */
  #pokladnaList tfoot tr.pok-soucet td { position: sticky; bottom: 0; z-index: 2;
    background: #f4f6fc; border-top: 1px solid var(--border); font-weight: 700;
    font-size: 13px; padding-top: 9px; padding-bottom: 9px; }
  #pokladnaList tfoot tr.pok-soucet b { font-weight: 800; }

  /* Soukromé jízdy — rozpočet paliva. Sloupců je dvanáct, takže odsazení buněk jde dolů
     (viz pravidlo „nejdřív místo mezi sloupci"), ať tabulka nepotřebuje vodorovný posuvník. */
  .soukr-info { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 10px;
    padding: 9px 12px; background: #f7f9fd; border: 1px solid var(--border); border-radius: 8px; }
  .soukr-info b { color: var(--text); }
  table.soukr-tab { min-width: 0; }
  table.soukr-tab th, table.soukr-tab td { padding-left: 7px; padding-right: 7px; }
  /* Dvanáct sloupců se do šířky vejde jen s dvouřádkovými nadpisy — jednořádkové by
     tabulku roztáhly přes okraj a tabulka by dostala vodorovný posuvník. */
  table.soukr-tab thead th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
  table.soukr-tab th[data-sosort] { cursor: pointer; user-select: none; }
  table.soukr-tab td .soukr-spz { font-weight: 700; white-space: nowrap; }
  .soukr-znacka { display: block; color: var(--muted); font-weight: 400; font-size: 11.5px;
    line-height: 1.3; margin-top: 1px; }
  /* Soukromá část je to, kvůli čemu se sem chodí — proto jediná tučně a barevně. */
  table.soukr-tab td.soukr-du { font-weight: 800; color: #b4460f; }
  tr.soukr-nelze td { color: var(--muted); }
  td.soukr-chyba { font-style: italic; }
  .soukr-vykricnik { display: inline-block; margin-left: 6px; width: 15px; height: 15px;
    line-height: 15px; text-align: center; border-radius: 50%; font-size: 11px; font-weight: 800;
    background: #f6c344; color: #4a3a06; cursor: help; vertical-align: 1px; }
  /* Vyrovnání pod tabulkou — kvůli němu se přehled staví, takže smí být výraznější
     než tabulka nad ním: je to jediné číslo, které se pak fyzicky přeúčtuje. */
  .soukr-vyrovnani { margin-top: 16px; padding: 14px 16px 12px; border: 1px solid var(--border);
    border-radius: 10px; background: #fbfcfe; }
  .soukr-vyrovnani h4 { margin: 0 0 6px; font-size: 14px; font-weight: 800; }
  .soukr-vyr-uvod, .soukr-vyr-shoda { font-size: 12.5px; color: var(--muted); line-height: 1.5;
    margin-bottom: 10px; }
  .soukr-vyr-uvod b { color: var(--text); }
  .soukr-vyr-shoda { margin-bottom: 0; }
  table.soukr-vyr-tab { min-width: 0; width: auto; }
  table.soukr-vyr-tab td { border: 0; border-top: 1px solid var(--border); padding: 7px 16px 7px 0;
    font-size: 13px; vertical-align: middle; }
  table.soukr-vyr-tab tr:first-child td { border-top: 0; }
  .soukr-vyr-auta { color: var(--muted); font-size: 11.5px; margin-left: 8px; }
  td.soukr-vyr-kdobru { color: var(--muted); white-space: nowrap; padding-right: 0; }
  td.soukr-vyr-kdobru b { color: #1c7d55; font-size: 15px; font-weight: 800; margin-left: 2px; }
  .soukr-vyr-nic { font-style: italic; }
  tr.soukr-vyr-nej td { color: var(--muted); }

  #soukrList tfoot tr.soukr-soucet td { position: sticky; bottom: 0; z-index: 2;
    background: #f4f6fc; border-top: 1px solid var(--border); font-weight: 700;
    padding-top: 9px; padding-bottom: 9px; }

  .tv-mrizka { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; }
  .tv-qr { width: 190px; height: 190px; background: #fff; border: 1px solid var(--border);
           border-radius: 10px; padding: 8px; display: flex; align-items: center; justify-content: center; }
  .tv-qr svg { max-width: 100%; height: auto; }
  .tv-qr-popis { text-align: center; font-size: 13px; color: var(--muted); margin-top: 4px; }
  /* čtyři tlačítka v jedné řadě — s větším písmem se lámala na dva řádky */
  #tarifVyzvaOverlay .actions .btn { white-space: nowrap; }
  /* Textarea nedědí písmo stránky — bez tohohle je zpráva drobná a strojopisem.
     Musí se rozepsat: ve zkratce `font:` je `inherit` platné jen jako celá hodnota,
     ne jako rodina, takže `font: 400 15px/1.65 inherit` celé pravidlo zahodí. */
  #tvText { font-family: inherit; font-size: 15px; line-height: 1.65; font-weight: 400;
            color: var(--text); padding: 12px 14px; min-height: 200px; }
  #tvQr span { font-size: 13px; }

  /* Roční matice = Petrův Excel: měsíce dolů, čísla doprava, barva říká stav. */
  #tarifyRok table { min-width: 0; font-variant-numeric: tabular-nums; }
  #tarifyRok th, #tarifyRok td { text-align: center; white-space: nowrap; padding: 5px 8px; }
  #tarifyRok th.ta-mesic, #tarifyRok td.ta-mesic { text-align: left; font-weight: 700; }
  /* „Měsíc" a „Celkem" sahají přes obě patra hlavičky a buňka s rowspanem se sama
     vycentruje mezi ně — text pak nesedí ani na jméno plátce, ani na čísla.
     Patří k dolnímu patru, protože to jsou popisky sloupců stejně jako „…863". */
  #tarifyRok thead th.ta-mesic { vertical-align: bottom; }
  #tarifyRok th.ta-profil { background: #3d4460; color: #fff; text-transform: none;
                            letter-spacing: 0; font-size: 12px; }
  #tarifyRok td.ta-z { background: var(--green-bg); color: #1c7d55; font-weight: 600; }
  #tarifyRok td.ta-o { background: var(--orange-bg); color: #96620a; font-weight: 600; }
  /* souhrn na konci knihy jizd je jen pro telefon - na pocitaci jsou dlazdice nad tabulkou */
  tr.jizdy-soucet { display: none; }
  .ocek-ini { font-size: 11px; font-weight: 700; color: var(--blue); margin-left: 6px; vertical-align: middle; }  /* monogram, kdo zaškrtl — jen modrá písmena, jako v Platbách */
  /* Zkrácená tabulka (cca 10 řádků) s vlastním posuvníkem, ať jsou grafy pod ní hned vidět.
     Hlavička se lepí k hornímu okraji tohoto kontejneru (ne k oknu — ten scrolluje sám). */
  #receivablesList .tbl-wrap { max-height: 360px; overflow-y: auto; overflow-x: auto; }
  #receivablesList thead th { position: sticky; top: var(--hl-posun, 0px); z-index: 4; }
  /* Dělítko mezi tabulkou a grafy — tažením se mění poměr obou oken. Sedí v mezeře, kterou
     tabulka nechává pod sebou (margin sekce), takže nic neposouvá. */
  /* sekce ručně uhrazených vydaných faktur pod grafy */
  #receivablesUhrazene .recv-uhr { margin-top: 14px; }
  .recv-uhr-head { display: block; width: 100%; text-align: left; border: 0; background: none;
                   font: inherit; font-weight: 700; color: var(--text); padding: 4px 0 8px; cursor: pointer; }
  .recv-uhr-head .sipka { color: var(--muted); margin-right: 4px; }
  .recv-uhr-head:hover { color: var(--blue); }
  #receivablesSplitter, .tbl-splitter { height: 20px; margin: -18px 0 0; cursor: ns-resize; display: flex; align-items: center; justify-content: center; }
  .tbl-splitter { margin: 2px 0 0; }
  /* výrazná lištička — musí být vidět i bez najetí myší, jinak ji nikdo nenajde */
  #receivablesSplitter span, .tbl-splitter span { width: 92px; height: 7px; border-radius: 4px;
    background: #8a97b8; box-shadow: 0 1px 3px rgba(20,26,51,.25); transition: background .12s, width .12s; }
  #receivablesSplitter:hover span, .tbl-splitter:hover span { background: var(--blue); width: 120px; }
  #receivablesSplitter.tahnu span, .tbl-splitter.tahnu span { background: var(--blue); width: 120px; }
  body.recv-tahnu { user-select: none; cursor: ns-resize; }
  /* Grafy pod tabulkou */
  .charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
  .chart-box { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 10px; min-width: 0; }
  .chart-box.wide { grid-column: 1 / -1; }
  .chart-box h3 { font-size: 14px; font-weight: 650; margin: 0 0 2px; }
  /* hlavička grafu v Cesťáku: popis vlevo, přepínač období vpravo */
  /* SPZ v nadpisu grafu — je to údaj, podle kterého se graf čte („čí je to auto"),
     ne vysvětlivka, takže stojí za nadpisem a je větší než on. */
  .graf-spz { margin-left: 12px; font-size: 18px; font-weight: 800; letter-spacing: .3px;
    color: var(--text); vertical-align: -1px; white-space: nowrap; }

  .graf-hlava { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 10px; }
  .graf-prep { display: flex; gap: 6px; margin-left: auto; }
  .graf-prep button { border: 1px solid var(--border); background: var(--card); border-radius: 8px;
    padding: 6px 12px; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    color: var(--text); cursor: pointer; font-family: inherit; white-space: nowrap; }
  .graf-prep button:hover:not(:disabled):not(.zap) { border-color: #c9cede; }
  .graf-prep button.zap { background: var(--blue); border-color: var(--blue); color: #fff; }
  .graf-prep button:disabled { opacity: .4; cursor: default; }
  .chart-box .chart-sub { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
  .chart-box svg { display: block; max-width: 100%; }
  .chart-box svg text { font-family: inherit; }
  .chart-lbl { font-size: 10.5px; fill: var(--muted); }
  /* dnešek v ose grafu — tmavý štítek s bílým číslem (sloupec v den bez platby chybí) */
  .chart-lbl-dnes { fill: #fff; font-weight: 800; }
  .graf-dnes { color: var(--text); font-weight: 700; }
  .chart-val { font-size: 9.5px; font-weight: 500; fill: var(--muted); }
  .chart-grid { stroke: var(--border); stroke-width: 1; }
  .chart-bar { cursor: default; transition: opacity .12s; }
  .chart-bar:hover { opacity: .82; }
  .chart-bar.clickable { cursor: pointer; }
  .chart-bar.dim { opacity: .28; }                       /* při zapnutém filtru vyblednou ostatní sloupce */
  .chart-bar.dim:hover { opacity: .6; }
  /* štítek nad tabulkou: co je zrovna vyfiltrované klikem do grafu */
  /* Pruh drží stejnou výšku i bez filtru — jinak by se po kliknutí do grafu posunul obsah pod ním
     a druhý klik (vypnutí filtru) by minul sloupec. */
  .chart-filtr-stitek {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    min-height: 44px; box-sizing: border-box;
    background: var(--sel-bg); border: 1px solid #c9d6ff; border-radius: 12px;
    padding: 6px 12px; margin-bottom: 10px; font-size: 13.5px; color: var(--text);
  }
  .chart-filtr-stitek.prazdny { background: transparent; border-color: transparent; color: var(--muted); font-size: 13px; }
  .chart-filtr-stitek .pocet { color: var(--muted); }
  .chart-filtr-stitek .btn { margin-left: auto; padding: 4px 10px; font-size: 12.5px; }
  .chart-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; color: var(--muted); margin: 2px 0 8px; }
  .chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; font-style: normal; }
  .chart-empty { font-size: 13px; color: var(--muted); padding: 18px 0 22px; text-align: center; }
  /* náhled importu: bílé řádky, ať modrá je jen okolo (ne pod daty) — jako v seznamu */
  #receivablesImportTable tbody td { background: #fff; }
  #receivablesImportTable tbody tr:hover td { background: #fafbfd; }
  #receivablesImportTable tr.recv-new td { background: var(--green-bg); }          /* nová faktura */
  #receivablesImportTable tr.recv-changed td { background: var(--orange-bg); }     /* změněná částka */
  #receivablesImportTable tr.recv-removed td { background: var(--red-bg); color: #9a1c1c; }  /* zmizelo (uhrazeno) — tmavě červený text */
  /* ======================= FAKTURANT =======================
     Vzhled celého modulu je převzatý z mockupu, jen zapouzdřený: prototyp byl
     samostatná stránka a mohl si psát globální selektory (`table`, `.info`, `.btn`),
     které by tady přebily Platby i Půjčky. Každé pravidlo proto začíná `.fakt`
     (obal sekce), `.fplocha` je obsah sekce a `.fvzd` vzdušné okno modulu.
     Zbytek appky zůstává hranatý — překlopení Petr odmítl. */

  /* Seznam faktur má deset sloupců a s pěti ikonami v akcích potřebuje 1109 px; při
     max-width 1180 (mínus odsazení a rámeček karty) zbylo 1086 a tabulka přetékala. */
  /* Plocha modulu sedí uvnitř appkového `.wrap`, který si odsazení i šířku řídí sám —
     odsazení z prototypu (ten byl samostatná stránka) by se přičetlo podruhé. */
  .fakt .fplocha { padding: 0; max-width: none; }
  .fakt .view-sticky h1 { font-size: 23px; margin: 0; }
  .fakt .hlava { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; min-height: 41px; }
  .fakt .hlava h1 { font-size: 21px; margin: 0; }
  .fakt .hlava .roste { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
  /* přepínač původu CZ / EU / Svět vedle hledání — stejný ve všech seznamech dokladů */
  .fakt .fakt-puvod { display: inline-flex; background: #eef1f8; border: 1px solid #dfe3ee; border-radius: 10px; padding: 3px; flex: 0 0 auto; }
  .fakt .fakt-puvod button { border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 700; color: #3f465e;
    padding: 6px 12px; border-radius: 7px; cursor: pointer; }
  .fakt .fakt-puvod button:hover { color: var(--blue); }
  .fakt .fakt-puvod button.on { background: #fff; color: var(--blue); box-shadow: 0 1px 2px rgba(20,26,51,.14); }
  /* bez šedé linky pod celým řádkem (Petr 1. 10. 2026) — vybranou záložku značí jen její modré podtržení */
  .fakt .zal-radek { display: flex; align-items: center; gap: 16px;
    border-bottom: 2px solid transparent; margin-bottom: 14px; flex-wrap: wrap; }
  .fakt .zal-radek .zal { border-bottom: 0; margin-bottom: 0; flex: 1 1 auto; align-self: flex-end; }
  .fakt .zal-radek .hledat { margin: 0 0 0 auto; flex: 0 0 auto; }
  .fakt .zal-radek .hledat input { padding-top: 7px; padding-bottom: 7px; }
  /* číslo dokladu se nezalamuje — importované řady mají předponu s mezerou („FT 2026019") */
  .fakt table.fakt-seznam td.cislo { white-space: nowrap; }
  /* částky drží pravý okraj a číslice pod sebou — sloupec je široký i na desítky milionů (přetékaly do Vystaveno) */
  .fakt table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
  /* období faktury z pravidelného vzoru: popis zleva jako dřív, období šedě u pravého okraje buňky */
  .fakt td.popis-b .pop-flex { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
  .fakt td.popis-b .pop-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fakt td.popis-b .pop-obd { flex: 0 0 auto; color: #8a90a6; font-size: 12.5px; font-weight: 600;
    font-variant-numeric: tabular-nums; white-space: nowrap; cursor: help; }
  /* Nadpis se záložkami a hledáním je v seznamech Fakturantu ukotvený pod topbarem —
     jinak při rolování stránky odjel a mezi topbarem a ukotvenou hlavičkou tabulky
     prosvítaly dlaždice (Úhrady, Pravidelné faktury). Hlavičku tabulky pod něj posune
     `ukotviHlavickyTabulek` (hledá viditelné `.view-sticky`). */
  /* bez stínu: seznamy Fakturantu rolují jen tělem tabulky, stránka stojí — stín pod lištou
     by byl vidět pořád jako šedá čára mezi záložkami a tabulkou */
  .fakt .view-sticky.fakt-horni { padding-bottom: 12px; margin-bottom: 14px; box-shadow: none; }
  .fakt .view-sticky.fakt-horni .zal-radek { margin-bottom: 0; }
  .fakt .zal { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 14px; flex-wrap: wrap; }
  .fakt .zal button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px;
    padding: 9px 14px; font-weight: 700; font-size: 13.5px; line-height: 1; font-family: inherit; color: var(--muted); cursor: pointer; }
  .fakt .zal button.on { color: #2f6bd8; border-bottom-color: #2f6bd8; }
  .fakt .panel { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
  .fakt .panel > h2 { font-size: 15px; margin: 0 0 12px; }
  .fakt .panel > h2 .lehce { font-weight: 600; color: var(--muted); font-size: 12.5px; }
  /* `vertical-align: middle` musí být: inline-block sedí ve výchozím stavu na účaří
     a kolečko pak vyšlo o 2 px výš než číslo dokladu a odběratel vedle něj (změřeno). */
  /* Plné kolečko bez bílého lemu — velké jako dřívější tečka i s lemem (14 + 2 × 3 px). */
  .fakt .tecka { display: inline-block; vertical-align: middle; position: relative; top: -1px;
    width: 20px; height: 20px; border-radius: 50%; }
  /* Obálky jsou vektorové ikony, ne znak „✉“ — ten operační systém vykreslí jako emoji
     (na Macu zelený čtvereček) a nejde mu dát velikost ani barvu. */
  /* Tři pevná místa: odesláno, otevřeno klientem, přeneseno do wflow. Mřížka,
     ne inline-flex — když jedna značka chybí, ostatní se nesmějí posunout, jinak
     sloupec při rolování „poskakuje" a nejde v něm nic vyhledat očima. Chybějící
     značka je prázdné <i>, které si své místo drží. */
  .fakt .obalky { display: inline-grid; grid-template-columns: repeat(3, 19px);
    gap: 5px; align-items: center; justify-items: center; }
  .fakt .obalky svg { width: 17px; height: 17px; display: block; }
  .fakt .obalky > i { display: block; width: 19px; height: 19px; }
  /* Číslo dokladu není tučné — u delších čísel (Z920260011) se tučná verze dotýkala
     stavové tečky ve vedlejším sloupci. */
  .fakt .cislo a { font-weight: 600; font-variant-numeric: tabular-nums; color: #2f6bd8;
    text-decoration: none; cursor: pointer; }
  .fakt .cislo a:hover { text-decoration: underline; }
  /* v oknech se datum i částka zarovnávají doprava — čtou se od poslední číslice */
  /* v oknech se hodnoty zarovnávají doprava — u roletky se musí přidat odsazení,
     aby text nevlezl pod šipku */
  /* součet vyfiltrovaných úhrad pod tabulkou — po měnách, euro a koruny se nesčítají */
  .fuh-soucet { margin: 10px 4px 0; font-size: 13px; color: var(--muted); text-align: right; }
  .fuh-soucet b { color: var(--text); margin-left: 4px; }
  /* vypínač automatu v hlavičce Pravidelných faktur — popisek na dva řádky */
  .fakt .vzor-automat { display: flex; align-items: center; gap: 11px; margin-right: 16px; cursor: pointer; }
  .fakt .vzor-automat > span:last-child { display: flex; flex-direction: column; line-height: 1.3;
    font-size: 14px; font-weight: 700; }
  .fakt .vzor-automat small { font-size: 12.5px; color: var(--muted); font-weight: 500; }
  .fakt .cerv-text { color: var(--red, #c0392b); }
  /* Blok Odesílání v editoru vzoru: druhý řádek trojice pod Opakováním a platebními
     údaji — levý sloupec (odběratel, popis) je vyšší, takže se tam volné místo zaplní.
     Vlevo adresy, vpravo dva přepínače pod sebou. */
  /* Levý blok (název, odběratel, popis) sahá přes oba řádky a končí na stejné úrovni
     jako Odesílání; volné místo dostane pole Popis, ne prázdno pod ním. */
  .fakt .trojice.trojice-vzor > .blok:first-child { grid-row: span 2; align-self: stretch;
    display: flex; flex-direction: column; }
  .fakt .trojice.trojice-vzor > .blok:first-child > textarea[data-fv="popis"] { flex: 1 1 auto; min-height: 76px; }
  .fakt .trojice.trojice-vzor > .blok-odes { grid-column: 2 / span 2; }
  /* Opakování a Moje platební údaje končí na stejné úrovni (výška řádku = vyšší z nich) */
  .fakt .trojice.trojice-vzor > .blok-opak,
  .fakt .trojice.trojice-vzor > .blok-opak + .blok { align-self: stretch; }
  .fvzd .blok-odes h3 { display: flex; align-items: center; gap: 10px; }
  .fvzd .blok-odes h3 .pil { font-size: 11px; font-weight: 700; }
  .fvzd .blok-odes .odes-mriz { display: grid; grid-template-columns: 1fr 230px; gap: 12px 22px; align-items: start; }
  .fakt .fplocha .fvzd .blok-odes .mriz.uzka input { text-align: left; }   /* adresy se čtou zleva */
  .fvzd .blok-odes .odes-prep { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
  .fvzd .blok-odes .odes-prep label.prepinac { display: flex; align-items: flex-start; gap: 10px; }
  .fvzd .blok-odes .odes-prep label.prepinac > span:last-child { display: flex; flex-direction: column; font-size: 14px; font-weight: 700; line-height: 1.3; }
  .fvzd .blok-odes .odes-prep small { font-size: 11.5px; color: var(--muted); font-weight: 500; word-break: break-all; }
  /* „Důvěřovat tomuto zařízení" ve druhém kroku přihlášení */
  .login-box .duvera-prep { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 6px;
    font-size: 13.5px; font-weight: 700; text-align: left; cursor: pointer; color: var(--text); }
  /* přihlašovací okno roztahuje všechna pole na celou šířku — zaškrtávátko ne */
  .login-box .duvera-prep input[type=checkbox] { width: 18px; height: 18px; flex: 0 0 18px; margin: 1px 0 0;
    padding: 0; display: inline-block; }
  .login-box .duvera-prep small { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--muted); }
  /* Období na faktuře (editor vzoru): vlevo co se fakturuje, vpravo jak se to napíše —
     tlačítka stejně vysoká, pravá půlka řádku sedí s levou (popisek a tlačítka vedle sebe) */
  .fvo { display: grid; gap: 12px; }
  .fvo-nast { display: grid; grid-template-columns: 104px auto 1fr; gap: 12px; align-items: center;
    background: #eef1f8; border-radius: 12px; padding: 14px 16px; }
  .fvo-lbl { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
  .fvo-prava { display: grid; grid-template-columns: 94px 1fr; gap: 8px; align-items: center;
    padding-left: 12px; border-left: 1px solid #d7dced; min-height: 38px; }
  .fvo-seg { display: flex; flex-wrap: wrap; gap: 6px; }
  .fvo-seg button { height: 38px; padding: 0 13px; border-radius: 10px; border: 1px solid #d7dced; background: #fff;
    color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; display: inline-flex;
    align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .fvo-prava .fvo-seg button { padding: 0 9px; }
  .fvo-seg button:hover { border-color: var(--blue); }
  .fvo-seg button.on { background: var(--blue); border-color: var(--blue); color: #fff; }
  .fvo-seg button.bez { color: var(--muted); font-weight: 500; }
  .fvo-seg button.bez.on { color: #fff; }
  /* id v selektoru: obecné pravidlo pro pole ve Fakturantu (šířka, odsazení 10 × 15 px) by
     políčko pro den roztáhlo na 190 px a levý sloupec by vytlačil ukázky vpravo na dva řádky */
  #fvoPanel .fvo-seg button input { width: 38px; min-width: 0; height: 26px; padding: 0 4px; border-radius: 7px;
    text-align: center; font: inherit; font-weight: 700; border: 1px solid #d7dced; background: #fff; color: var(--text); }
  .fvo-vysl { grid-column: 1 / -1; background: #fff; border-radius: 10px; padding: 9px 14px; display: flex;
    flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-variant-numeric: tabular-nums; }
  .fvo-nast .fvo-vysl { margin-top: 2px; }
  .fvo-vysl .sep { color: var(--muted); }
  /* jak období jdou za sebou (čtvrtletí od 15.11.) — vpravo v řádku s výsledkem */
  .fvo-vysl .rada { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 600; }
  .fvo-vysl .rada b { color: var(--text); }
  .fvo-varovani { background: #fff3dc; color: #9a5a00; border-radius: 10px; padding: 9px 12px; font-size: 13.5px; font-weight: 600; }
  .fvo-nahled { border: 1.5px dashed #d7dced; border-radius: 12px; padding: 10px 14px 4px; }
  .fvo-titul { font-size: 11.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
  .fvo-titul .lehce { text-transform: none; letter-spacing: 0; font-weight: 600; }
  .fvo-nahled table { width: 100%; border-collapse: collapse; min-width: 0; font-variant-numeric: tabular-nums; }
  .fvo-nahled td { padding: 7px 4px; border-bottom: 1px solid #eceef4; background: none; }
  .fvo-nahled tr:last-child td { border-bottom: 0; }
  .fvo-nahled td.dat { width: 110px; white-space: nowrap; font-weight: 700; color: var(--muted); }
  .fvo-nahled tr.prvni td { font-weight: 700; color: var(--text); }
  .fvo-napoveda { margin: 8px 0 0; }
  .fvo-napoveda code { background: #e4ecff; border-radius: 5px; padding: 1px 5px; font-size: 12.5px; }
  @media screen and (max-width: 1180px) { .fvo-nast { grid-template-columns: 104px 1fr; } .fvo-prava { grid-column: 2; padding-left: 0; border-left: 0; } }
  /* dva přepínače pod blokem Opakování — pod sebou, přepínač a text na jedné ose */
  /* text před položkami — nad tabulkou položek, popisek vlevo jako u polí v blocích */
  /* sedí v řádku nadpisu „Položky" — nadpis nechá vlevo, zbytek řádku je pole */
  .fvzd h2 .text-pred { flex: 1; display: flex; align-items: center; gap: 12px; margin-left: 24px;
    font-size: 13px; font-weight: 400; letter-spacing: 0; }
  .fvzd h2 .text-pred label { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
  .fvzd h2 .text-pred textarea { flex: 1; resize: vertical; min-height: 38px; font-weight: 400; }
  .fvzd .fvz-prepinace { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
  .fvzd .fvz-prepinace label.prepinac { display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 700; }
  .fakt .fvzd input.cisl { text-align: right; font-variant-numeric: tabular-nums; }
  /* Hodnota v roletce se čte odzadu, takže je zarovnaná doprava — místo pro šipku se ale
     musí ubrat VPRAVO (tam je nakreslená), ne vlevo, jinak přes ni text přeteče. */
  .fakt .fvzd select.cisl, .fakt .fplocha select.cisl { text-align: right; direction: rtl; padding-right: 34px; padding-left: 15px; }
  .fakt .fvzd select.cisl option { direction: ltr; }
  .fakt .pruh-wrap { margin-bottom: 16px; }
  .fakt .pruh { height: 10px; background: #e7eaf2; border-radius: 6px; overflow: hidden; }
  .fakt .pruh span { display: block; height: 100%; background: #17a356; border-radius: 6px; }
  .fakt .pruh-popis { text-align: right; font-size: 13px; color: var(--muted); margin-top: 6px; }
  .fakt .popis-b { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--on-bg-muted); }
  .fakt .akce-b { text-align: right; white-space: nowrap; }
  .fakt .ikona-btn { background: none; border: 0; border-radius: 8px; padding: 4px; margin-left: 0;
    color: #8a90a6; cursor: pointer; line-height: 0; vertical-align: middle; }
  .fakt .ikona-btn svg { width: 18px; height: 18px; display: block; }
  .fakt .ikona-btn:hover { background: #eef1f8; color: #2f6bd8; }
  /* Mazání je v celém Fakturantovi popelnice, ne křížek — křížek zůstává jen tam,
     kde se něco ruší, ne maže (vymazání hledacího pole). */
  .fakt .ikona-btn.kos:hover { background: #fdeceb; color: #b3352f; }
  /* Celý řádek otevírá doklad — kurzor to musí říct, jinak nikoho nenapadne kliknout. */
  .fakt .fplocha tbody tr.klik { cursor: pointer; }
  .fakt .fplocha tbody tr.klik:hover { background: #f7f9fd; }
  .fakt .odb-odkaz { color: #2f6bd8; cursor: pointer; font-weight: 650; }
  .fakt .odb-odkaz:hover { text-decoration: underline; }
  /* Ikona úhrady byla o pět bodů větší než ostatní, aby vedle nich nezanikla —
     bankovka zabírala jen půlku svého rámečku. Po zúžení řádků se do tlačítka
     přestala vejít a ve sloupci Akce viditelně vyskočila. Všechny ikony mají
     teď 20 px a bankovka je vyšší kresbou, ne větším rámečkem. */
  .fakt .fplocha .ikona-btn svg { width: 20px; height: 20px; }
  .fakt .ikona-btn.pok { color: #17845c; }
  .fakt .ikona-btn.pok:hover { background: #e7f6ee; color: #0d6b48; }
  /* Vycpávka na místě chybějící ikony — popelnice musí zůstat ve svislici. */
  .fakt .modal.fvzd .cteni > b { text-align: right; padding-right: 16px; }
  .fakt .modal.fvzd .telo > .info { text-align: center; }
  /* V oknech jdou řádky k sobě těsněji než ve formuláři na celou stránku — dialog se
     čte shora dolů najednou, ne po částech, a roztažený zabírá zbytečně půl obrazovky. */
  .fakt .modal.fvzd .mriz { gap: 6px 16px; }
  /* Pole k vyplnění mají jemný podklad: bílé pole s tenkým rámečkem na bílém
     pozadí dialogu nebylo poznat od popisku nad ním — nebylo vidět, kam se vlastně
     píše. Zaměřené pole naopak zbělá, takže je hned jasné, kde stojí kurzor. */
  .fakt .modal.fvzd input, .fakt .modal.fvzd select, .fakt .modal.fvzd textarea {
    padding-top: 7px; padding-bottom: 7px; background: #f4f6fb; border-color: #dfe3ee; }
  /* Jen zbělení — modrý rámeček a stín zaměřeného pole má appka už svoje. */
  .fakt .modal.fvzd input:focus, .fakt .modal.fvzd textarea:focus,
  .fakt .modal.fvzd select:focus { background: #fff; }
  .fakt .modal.fvzd input[readonly] { cursor: pointer; }
  /* Pole uvnitř tabulky položek zůstávají bílá — tam je rámeček vidět proti
     řádku a podklad by z tabulky udělal šachovnici. */
  .fakt .modal.fvzd .fpol input, .fakt .modal.fvzd .fpol select { background: #fff; }
  /* Seznam dokladů patří k souhrnu nad ním, ale je to jiný druh obsahu — potřebuje mezeru. */
  /* Volba barvy pro každý druh dokladu */
  .fakt .barvy-mriz { display: grid; gap: 10px; }
  .fakt .barva-radek { display: grid; grid-template-columns: 240px 1fr 200px; gap: 16px; align-items: center; }
  .fakt .barva-nazev { font-size: 14px; font-weight: 650; }
  .fakt .barva-volby { display: flex; gap: 7px; flex-wrap: wrap; }
  .fakt .barva-tlac { width: 26px; height: 26px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; padding: 0; }
  .fakt .barva-tlac:hover { transform: scale(1.08); }
  .fakt .barva-tlac.on { box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px currentColor; border-color: #1d2136; }
  /* Vlastní barva: kolečko otevře systémovou škálu (tu kreslit vlastní nemá smysl),
     vedle je pole na kód pro případ, že barvu máš přesně danou z firemního manuálu. */
  /* tlačítko vpravo v nadpisu panelu (přidat účet, upravit odesílání) */
  /* Náhled e-mailu — jak zpráva vypadá v poštovním programu u klienta. */
  .fakt .mail { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
  .fakt .mail-hlava { padding: 12px 16px; border-bottom: 1px solid var(--border); background: #fafbfe; }
  .fakt .mail-od { display: flex; align-items: center; gap: 10px; }
  .fakt .mail-avatar { width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 800;
    display: flex; align-items: center; justify-content: center; font-size: 15px; flex: 0 0 34px; }
  .fakt .mail-od b { font-size: 14px; display: block; }
  .fakt .mail-od span:not(.mail-avatar) { font-size: 12.5px; color: var(--muted); }
  .fakt .mail-komu { font-size: 12.5px; color: var(--muted); margin: 8px 0 0 44px; }
  .fakt .mail-predmet { padding: 14px 16px 0; font-size: 16px; font-weight: 700; }
  .fakt .mail-telo { padding: 12px 16px; font-size: 14px; line-height: 1.55; }
  .fakt .mail-shrnuti { margin: 4px 16px 14px; padding: 10px 14px; background: #f5f6fa;
    border-left: 3px solid; border-radius: 0 8px 8px 0; display: grid; gap: 3px; font-size: 13px; }
  .fakt .mail-shrnuti > div { display: flex; justify-content: space-between; gap: 16px; }
  .fakt .mail-shrnuti span { color: var(--muted); }
  .fakt .mail-shrnuti b { font-variant-numeric: tabular-nums; }
  .fakt .mail-tlacitko { display: block; margin: 0 16px 14px; padding: 11px; border-radius: 9px; color: #fff;
    font-weight: 700; font-size: 14px; text-align: center; cursor: pointer; }
  .fakt .mail-priloha { display: flex; align-items: center; gap: 8px; margin: 0 16px 14px; padding: 9px 12px;
    border: 1px solid var(--border); border-radius: 9px; font-size: 13px; }
  .fakt .mail-priloha svg { width: 20px; height: 20px; color: #c8352c; }
  .fakt .mail-velikost { margin-left: auto; color: var(--muted); font-size: 12px; }
  .fakt .mail-paticka { padding: 10px 16px; border-top: 1px solid var(--border); background: #fafbfe;
    font-size: 11.5px; color: var(--muted); }
  /* Hlavička sekce má stejnou výšku všude — s tlačítkem vpravo i bez něj. Dřív měl
     min-height jen nadpis s tlačítkem (41 px) a ostatní jen výšku řádku (19 px),
     takže se hlavičky sekcí pod sebou nesrovnaly. Mezeru mezi nadpisem a popiskem
     ve flexu nese `margin-left` na `.lehce`, takže se neořízne. */
  .fakt .panel > h2 { display: flex; align-items: center; gap: 10px; min-height: 41px; }
  .fakt .panel > h2:has(.roste-btn) { justify-content: space-between; gap: 16px; }
  .fakt .panel > h2 .roste-btn { font-weight: 400; flex: 0 0 auto; }
  .fakt .btn.mini { padding: 3px 10px; font-size: 12px; border-radius: 7px; }
  /* Lišta nad seznamem se objeví, až když je něco označené — prázdný pruh nad
     tabulkou by jen bral místo. */
  .fakt .vyber-lista { display: flex; align-items: center; gap: 12px; margin: 0 0 12px;
    padding: 10px 14px; background: #eef2ff; border: 1.5px solid #c7d2fe; border-radius: 12px; }
  .fakt .vyber-pocet { font-size: 14px; font-weight: 750; color: #23306b; margin-right: auto; }
  /* Nastavení exportu: druh dokladu vlevo, typ ve wflow vpravo. */
  /* Logo: náhled vlevo v rámečku o poměru, jaký má místo na dokladu (46 × 16 mm),
     ať je hned vidět, jak se obrázek vejde. */
  .fakt .logo-blok { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .fakt .logo-nahled { width: 184px; height: 64px; border: 1.5px solid #e2e6f0; border-radius: 11px;
    background: #fff; display: flex; align-items: center; justify-content: center; padding: 6px;
    flex: 0 0 auto; }
  .fakt .logo-nahled img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
  .fakt .logo-nahled.prazdny { color: #9aa1b4; font-size: 12.5px; background: #f7f8fb; }
  .fakt .logo-popis { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
  .fakt .logo-popis span { font-size: 12.5px; color: var(--muted); }
  .fakt .logo-akce { display: flex; gap: 8px; margin-left: auto; }
  /* velikost loga: − 120 % + — celý řádek pod náhledem loga */
  .fakt .logo-velikost { flex: 0 0 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .fakt .logo-velikost .lv-popis { font-weight: 650; margin-right: 6px; }
  .fakt .logo-velikost .lv-krok { width: 36px; height: 34px; padding: 0; font-size: 19px; line-height: 1; }
  .fakt .logo-velikost .lv-hodnota { min-width: 58px; text-align: center; font-size: 16px;
    font-variant-numeric: tabular-nums; }
  .fakt .logo-velikost .lv-pozn { flex: 1 1 260px; color: var(--muted); font-size: 12.5px; margin-left: 10px; }
  .fakt .logo-pozn { flex: 0 0 100%; margin: 4px 0 0; font-size: 12.5px; color: var(--muted);
    line-height: 1.6; }
  .fakt .wflow-blok { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
  /* Popisky druhů jsou dlouhé, nejširší „Daňový doklad k přijaté platbě" potřebuje
     202 px (změřeno) — obvyklých 108 px z `.mriz.uzka` ho ořízne. Selektor musí mít
     v sobě i `.uzka`, jinak ho obecné pravidlo přebije: má stejnou specificitu
     a stojí v souboru níž. */
  .fakt .fplocha .mriz.uzka.wflow-mriz { width: 100%; max-width: 790px;
    grid-template-columns: 210px 1fr; }
  .fakt .wflow-mriz > label { white-space: nowrap; }
  .fakt .wflow-radek { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .fakt .wflow-pozn { font-size: 12.5px; color: var(--muted); }
  /* „w" u faktury = je ve wflow. Modré kolečko vedle obálek, ať se pozná na první
     pohled a nezabere vlastní sloupec — tabulka je na hraně šířky. */
  /* Značka „přeneseno do wflow" = jejich logo (IKONA_WFLOW v app.js), ne naše písmeno W. */
  .fakt .wflow-znacka { display: inline-flex; align-items: center; justify-content: center;
    width: 19px; height: 19px; flex: 0 0 19px; }
  .fakt .wflow-znacka .ik-wflow { width: 19px; height: 19px; display: block; }
  /* Typ a kód řady vedle sebe; řada je krátká zkratka, tak jí stačí úzké pole. */
  .fakt .wflow-dvojice { display: flex; gap: 8px; align-items: center; }
  .fakt .wflow-dvojice select { flex: 1 1 auto; min-width: 0; }
  .fakt .fplocha .wflow-dvojice input { flex: 0 0 90px; width: 90px; text-align: center; }
  /* Mazání ve wflow je nevratné, tak má tlačítko barvu, kterou appka používá
     pro mazání všude jinde — ne tmavou jako běžná akce. */
  .fakt .btn.cerv { background: #fdeceb; border-color: #f3b4b0; color: #b3261e; }
  .fakt .btn.cerv:hover { background: #fbdcda; border-color: #e79a95; }
  .fakt .wflow-tab td, .fakt .wflow-tab th { padding: 8px 10px; }
  /* Doklad v účetním programu je to, na co si dát pozor — červená pilulka, ne šedá. */
  .fakt .wflow-znak { display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800; white-space: nowrap; }
  .fakt .wflow-znak.erp { background: #fdeceb; color: #b3261e; }
  .fakt .wflow-znak.ok { background: #eef0f6; color: #5b6478; }
  .fakt .wflow-znak.uhr { background: #e7f6ee; color: #067647; }
  .fakt .wflow-chyba { font-size: 13px; color: #8f1d16; background: #fdeceb;
    border: 1.5px solid #f3b4b0; border-radius: 11px; padding: 10px 14px; }
  .fakt .barva-vlastni { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px;
    padding-left: 10px; border-left: 1px solid var(--border); }
  /* Oblíbené barvy stojí za pevnou paletou, oddělené čárou — ať je poznat, že si je
     firma uložila sama. Křížek se ukáže při najetí, aby v klidu nerušil. */
  .fakt .barva-oblibene { display: inline-flex; align-items: center; gap: 7px; }
  .fakt .barva-oblibene:not(:empty) { margin-left: 6px; padding-left: 10px;
    border-left: 1px dashed var(--border); }
  .fakt .ob-kus { position: relative; display: inline-flex; }
  .fakt .ob-zrus { position: absolute; top: -6px; right: -6px; width: 15px; height: 15px;
    border-radius: 50%; border: 1.5px solid #fff; background: #6b7284; color: #fff;
    font-size: 11px; line-height: 1; padding: 0; cursor: pointer; opacity: 0;
    transition: opacity .12s; }
  .fakt .ob-kus:hover .ob-zrus, .fakt .ob-zrus:focus { opacity: 1; }
  .fakt .ob-zrus:hover { background: #d1362f; }
  .fakt .barva-ulozit { border: 1.5px solid #e2e6f0; background: #fff; border-radius: 8px;
    width: 30px; height: 30px; flex: 0 0 30px; font-size: 15px; line-height: 1; color: #8a90a6;
    cursor: pointer; padding: 0; }
  .fakt .barva-ulozit:hover { border-color: #2f6bd8; color: #2f6bd8; }
  .fakt .barva-ulozit.mam { color: #e0a800; border-color: #f0d69a; }
  .fakt .fplocha input[type=color].barva-duha { width: 30px; height: 30px; padding: 0; flex: 0 0 30px;
    border: 1.5px solid #e2e6f0; border-radius: 8px; background: none; cursor: pointer; appearance: auto; }
  .fakt .barva-duha::-webkit-color-swatch-wrapper { padding: 2px; }
  .fakt .barva-duha::-webkit-color-swatch { border: 0; border-radius: 5px; }
  .fakt .fplocha input.barva-hex { width: 92px; flex: 0 0 92px; border: 1.5px solid #e2e6f0; border-radius: 8px; padding: 4px 8px;
    font-size: 12.5px; font-family: ui-monospace, monospace; text-transform: lowercase;
    background: #fff; color: var(--on-bg); }
  .fakt .barva-hex:focus { outline: 0; border-color: #2f6bd8; }
  .fakt .barva-nahled { border: 1px solid var(--border); border-top: 3px solid var(--bd); border-radius: 8px;
    padding: 7px 10px; display: grid; gap: 4px; background: #fff; }
  .fakt .barva-nahled .bn-hlava { font-size: 11.5px; font-weight: 700; color: var(--bd); }
  .fakt .barva-nahled .bn-cara { height: 2px; background: var(--bd); border-radius: 2px; }
  .fakt .barva-nahled .bn-suma { font-size: 12px; font-weight: 700; color: var(--bd); text-align: right; }
  .fakt .doklady-odb { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
    max-height: 210px; overflow: auto; }
  .fakt .tbl-wrap.uzka table { min-width: 0; width: 100%; table-layout: fixed; }
  .fakt .tbl-wrap.uzka th, .fakt .tbl-wrap.uzka td { padding-left: 6px; padding-right: 6px; }
  .fakt .tbl-wrap.uzka th:first-child, .fakt .tbl-wrap.uzka td:first-child { padding-left: 12px; }
  .fakt .tbl-wrap.uzka th:last-child, .fakt .tbl-wrap.uzka td:last-child { padding-right: 12px; }
  .fakt .akce-mezera { display: inline-block; width: 28px; }
  .fakt .ikona-btn[disabled] { opacity: .35; cursor: default; }
  .fakt .ikona-btn[disabled]:hover { background: none; color: #8a90a6; }
  .fakt .akce-b .btn-del { padding: 2px 3px; }
  .fakt .pz { color: #8a90a6; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
  .fakt .pz.ot { color: #17a356; font-weight: 600; }
  .fakt .pz svg { width: 16px; height: 16px; }
  .fakt .pil { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 7px; padding: 2px 8px; white-space: nowrap; }
  .fakt .pil.zel { color: #067647; background: #e7f6ee; } .fakt .pil.sed { color: #5b637d; background: #eef0f6; }
  .fakt .pil.oran { color: #96620a; background: var(--orange-bg); } .fakt .pil.cerv { color: #b3352f; background: var(--red-bg); }
  /* hotovostní úhrada — blok s pokladnou se v okně rozbalí až po volbě „Hotově“ */
  /* Údaje o odběrateli pod roletkou — popisek a hodnota ve svislici s textem v polích.
     Levé odsazení je stejné jako vnitřní odsazení pole, jinak text odskočí doleva. */
  /* Detail dokladu drží stejné rozvržení jako formulář — jen místo polí stojí hodnoty,
     aby se pohled po kliknutí na „Upravit" nikam nepřeskládal. */
  .fakt .cteni-mriz .hod { font-size: 14.5px; font-weight: 650; }
  /* Řádky odběratele jsou hustší než formulářová mřížka — je to čtení, ne vyplňování.
     IČ, DIČ a sídlo drží těsně u sebe jako jeden blok; název firmy nad ním je nadpis
     a popis pod ním samostatný údaj, proto oba odděluje větší mezera. */
  .fakt .fplocha .cteni-mriz { row-gap: 3px; align-items: baseline; }
  .fakt .fplocha .cteni-mriz > label, .fakt .fplocha .cteni-mriz > label.nahore { padding-top: 0; }
  .fakt .cteni-mriz .odb-jmeno { font-size: 15px; font-weight: 700; }
  .fakt .fplocha .cteni-mriz > .mezera-nad { padding-top: 16px; }
  .fakt .cteni-mriz .hod-veta { font-weight: 400; }
  .fakt .cteni-mriz .dic-radek { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  /* Pilulka nesmí řádek DIČ natáhnout — jinak mezera pod ním vypadá větší než ostatní
     a blok se opticky rozpadne. */
  .fakt .cteni-mriz .dic-radek .pil { margin-top: -2px; margin-bottom: -2px; }
  /* Hodnoty pod poli (číslo účtu, IBAN, SWIFT, VS/KS) musí začínat tam, kde text v polích
     nad nimi — tedy o rámeček a vnitřní odsazení pole dál, ne na hraně sloupce. */
  .fakt .blok .cteni > b, .fakt .blok .cteni > div { padding-left: 16px; }
  .fakt .blok .cteni .iban { font-variant-numeric: tabular-nums; letter-spacing: -.1px; }
  .fakt td.iban { font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
  /* Přepínač „Uhrazeno" stojí mimo mřížku, svislici si proto musí držet odsazením. */
  .fakt .uhr-hned { margin-left: calc(168px + 16px + 16px); }
  .fakt .zbyva-radek { margin: 14px -20px 0; padding: 13px 20px 0; border-top: 1px solid #c9d0e0; }
  /* V nadpisu je vidět, ve kterém druhu dokladů právě jsem — stejně velkým písmem
     jako název sekce, protože je to rovnocenná informace, ne podtitulek. */
  .fakt .hlava h1 .hl-sep { color: #b6bdd2; margin: 0 10px; font-weight: 400; }
  /* Přijaté doklady: hlavička je vždy jeden řádek — nadpis se zkrátí trojtečkou, tlačítka zůstávají na místě */
  @media (min-width: 761px) {
    .fakt .hlava.prij-hlava { flex-wrap: nowrap; }
    .fakt .hlava.prij-hlava h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fakt .hlava.prij-hlava .roste { flex: none; flex-wrap: nowrap; }
    .fakt .hlava.prij-hlava .roste > * { white-space: nowrap; }
  }
  /* Přepínač druhu dokladu — hlavní volba nad seznamem, proto pilulky, ne roletka. */
  /* Řazení a filtry v hlavičce seznamu */
  .fakt .fplocha thead th.radi { cursor: pointer; user-select: none; white-space: nowrap; }
  .fakt .fplocha thead th.radi:hover { color: #2f6bd8; }
  /* Šipka směru řazení: 8,5 px nebyla skoro vidět (ani v aktivním sloupci) — 13 px odpovídá
     výšce nadpisu sloupce a čte se na první pohled. */
  .fakt .fplocha thead th .sip { font-size: 13px; margin-left: 5px; opacity: 0; vertical-align: 0; line-height: 1; }
  .fakt .fplocha thead th.radi:hover .sip { opacity: .45; }
  .fakt .fplocha thead th .sip.on { opacity: 1; color: #2f6bd8; }
  /* sloupce s datem: nadpis + šipka se do úzkého sloupce musí vejít (dřív přetékaly do vedlejšího) */
  .fakt .fplocha table.fakt-seznam thead th.dat { padding-left: 4px; padding-right: 4px; letter-spacing: 0; }
  .fakt .fplocha table.fakt-seznam thead th.dat .sip { margin-left: 3px; }
  /* Řádek filtrů: 6 px nad poli, ať se nelepí na názvy sloupců s řazením. */
  .fakt .filtr-radek th { padding-top: 6px !important; padding-bottom: 8px !important; font-weight: 400; }
  /* Textové pole i tlačítko data mají STEJNOU výšku (30 px), písmo i zaoblení. Selektor
     musí být `.fakt .fplocha input.filtr-vstup`, ne jen `.fakt .filtr-vstup`: obecná
     vzdušná pole modulu (`.fakt .fplocha input`, 10 px odsazení a 15px písmo) mají vyšší
     specificitu a přebíjela ho — filtr pak byl 44 px vysoký, dvakrát víc než tlačítko data. */
  .fakt .filtr-vstup, .fakt .fplocha input.filtr-vstup, .fakt .filtr-datum { box-sizing: border-box;
    width: 100%; height: 30px; border: 1.5px solid #e2e6f0; border-radius: 8px; padding: 0 9px;
    font-size: 12.5px; line-height: 27px; font-family: inherit; background: #fff; color: var(--on-bg);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fakt .fplocha input.filtr-vstup:focus { outline: 0; border-color: #2f6bd8; box-shadow: none; }
  .fakt .filtr-vstup::placeholder { color: #b6bdd2; }
  .fakt .filtr-datum { color: #b6bdd2; cursor: pointer; text-align: left; }
  /* vyplněný rozsah se píše pod sebe — na jeden řádek se do úzkého sloupce nevejde */
  .fakt .filtr-datum:has(.fd-od) { display: flex; flex-direction: column; align-items: center;
    line-height: 1.2; font-size: 11px; padding: 2px 4px; }
  .fakt .filtr-datum .fd-od::after { content: ' ↓'; opacity: .55; }
  .fakt .filtr-datum:hover { border-color: #c8d0e4; }
  .fakt .filtr-datum.on { border-color: #2f6bd8; color: #2f6bd8; font-weight: 700; }
  /* vlastní kalendář — visí na <body>, proto fixed a vyšší vrstva než okno (95) */
  .fakt .kal { position: fixed; z-index: 300; background: #fff; border: 1px solid var(--border);
    border-radius: 14px; box-shadow: 0 16px 44px rgba(20,25,60,.22); padding: 12px; width: 268px; }
  .fakt .kal-hlava { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .fakt .kal-hlava span { font-weight: 700; font-size: 14.5px; }
  .fakt .kal-sip { background: none; border: 0; font-size: 20px; line-height: 1; color: #5b637d;
    cursor: pointer; padding: 2px 10px; border-radius: 8px; font-family: inherit; }
  .fakt .kal-sip:hover { background: #eef1f8; color: #2f6bd8; }
  .fakt .kal-dny, .fakt .kal-mriz { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .fakt .kal-dny span { text-align: center; font-size: 11px; font-weight: 700; color: #8a90a6;
    text-transform: uppercase; padding-bottom: 4px; }
  .fakt .kal-mriz button { background: none; border: 0; border-radius: 8px; padding: 7px 0; cursor: pointer;
    font-size: 13.5px; font-family: inherit; color: var(--on-bg); font-variant-numeric: tabular-nums; }
  .fakt .kal-mriz button:hover { background: #eef1f8; }
  .fakt .kal-mriz button.dnes { box-shadow: inset 0 0 0 1.5px #c9d0e0; font-weight: 700; }
  .fakt .kal-mriz button.vyb { background: var(--blue); color: #fff; font-weight: 700; }
  .fakt .kal-pata { display: flex; gap: 6px; margin-top: 10px; }
  .fakt .kal-pata .btn { flex: 1; justify-content: center; padding: 6px 10px; font-size: 13px; }
  .fakt .obdobi-volby { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
  .fakt .obdobi-volby .btn { width: 100%; justify-content: center; text-align: center; }
  .fakt .vzor-nazev { max-width: 0; }
  .fakt td.vzor-cislo { font-weight: 700; color: #5b637d; font-variant-numeric: tabular-nums; }
  /* vzor, ze kterého se člověk vrátil z editoru — krátce podbarvený, ať ho oko najde */
  .fakt .fplocha tbody tr.vzor-naposledy td { background: #eef3ff; transition: background .6s; }
  .fakt .vzor-nazev b, .fakt .vzor-nazev .info { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fakt .zal-pocet { font-size: 11.5px; font-weight: 800; background: #eef1f8; color: #5b637d;
    border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
  .fakt .zal button.on .zal-pocet { background: #dce6fb; color: #2f6bd8; }
  .fakt .adr-pocet { font-size: 13.5px; font-weight: 700; color: var(--muted); padding: 9px 2px; }
  .fakt select.filtr-vstup { padding-right: 22px; background-position: right 5px center; background-size: 9px; }
  .fakt .filtr-akce { text-align: right; }
  .fakt .smaz-filtry { background: none; border: 0; color: #b3352f; font-size: 15px; cursor: pointer;
    padding: 3px 7px; border-radius: 7px; line-height: 1; }
  .fakt .smaz-filtry:hover { background: #fdeceb; }
  .fakt .druh-prep { display: flex; gap: 6px; margin: 18px 0 14px; flex-wrap: wrap; }
  .fakt .druh-prep button { display: inline-flex; align-items: center; gap: 8px; background: #fff;
    border: 1.5px solid #e2e6f0; border-radius: 10px; padding: 9px 14px; cursor: pointer;
    font-weight: 700; font-size: 14px; line-height: 1; font-family: inherit; color: #5b637d; }
  .fakt .druh-prep button:hover { border-color: #c8d0e4; }
  .fakt .druh-prep button.on { background: var(--blue); border-color: var(--blue); color: #fff; }
  .fakt .druh-prep .pocet { font-weight: 700; font-size: 12px; background: #eef1f8; color: #5b637d;
    border-radius: 6px; padding: 2px 6px; min-width: 20px; text-align: center; }
  .fakt .druh-prep button.on .pocet { background: rgba(255,255,255,.22); color: #fff; }
  /* Tlačítko „+ Nová faktura" a šipka na jiný druh drží pohromadě jako jeden prvek. */
  .fakt .btn-pair { display: inline-flex; }
  .fakt .btn-pair .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .fakt .btn-pair .btn.sipka { border-top-left-radius: 0; border-bottom-left-radius: 0;
    padding-left: 10px; padding-right: 10px; margin-left: 1px; }
  /* Našeptávač odběratele */
  .fakt .nasep { position: relative; }
  .fakt .nasep-smaz { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: #9aa1b4; font-size: 15px; cursor: pointer; padding: 4px 6px;
    border-radius: 7px; line-height: 1; }
  .fakt .nasep-smaz:hover { background: #eef1f8; color: #b3352f; }
  .fakt .nasep input { padding-right: 36px; }
  .fakt .nasep-nabidka { display: none; position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
    background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 5px;
    box-shadow: 0 12px 34px rgba(20,25,60,.18); max-height: 290px; overflow: auto; }
  .fakt .nasep-nabidka.on { display: block; }
  .fakt .nasep-nabidka button { display: block; width: 100%; text-align: left; background: none; border: 0;
    border-radius: 8px; padding: 8px 11px; cursor: pointer; font-family: inherit; }
  .fakt .nasep-nabidka button.on { background: #eef3fd; }
  .fakt .nasep-nabidka button b { display: block; font-size: 14px; font-weight: 400; color: var(--on-bg); }
  .fakt .nasep-nabidka button span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fakt .nasep-nic { padding: 10px 11px; font-size: 13.5px; color: var(--muted); }
  .fakt .nasep-nic span { font-size: 12.5px; }
  .fakt .odb-prazdno { font-size: 13.5px; color: var(--muted); padding-left: var(--odb-odsaz);
    line-height: 1.45; }
  /* Šířka sloupce popisků (IČ: / DIČ: / Sídlo:) — počítá se z ní i odsazení názvu firmy
     v roletce, aby jméno stálo v jedné svislici s hodnotami pod ním. */
  :root { --odb-popisek: 38px; --odb-mezera: 7px; --odb-odsaz: 16px; }
  .fakt .odb-info { font-size: 13.5px; color: var(--muted); padding-left: var(--odb-odsaz); }
  .fakt .odb-r { display: flex; gap: var(--odb-mezera); align-items: baseline; min-height: 21px; flex-wrap: nowrap; }
  .fakt .odb-r:has(.pil) { align-items: center; }
  .fakt .odb-r > span:first-child { width: var(--odb-popisek); flex: 0 0 var(--odb-popisek); }
  .fakt .odb-r b { font-weight: 650; color: var(--on-bg); }
  /* DIČ a pilulka spolehlivosti jsou jedna hodnota o dvou kusech — zalomí se mezi sebou,
     ale ani jeden nikdy nespadne pod popisek. */
  .fakt .odb-hod { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--odb-mezera);
    min-width: 0; flex: 1 1 0; }
  .fakt .odb-sidlo { margin-top: 9px; }
  .fakt .fplocha .odb-select.vybrano, .fakt .fvzd .odb-select.vybrano { font-weight: 700; }
  /* Popisek u víceřádkového pole patří k PRVNÍMU řádku textu, ne doprostřed boxu. */
  .fakt .fvzd label.nahore, .fakt .fplocha label.nahore { align-self: start; padding-top: 12.8px; }
  .fakt .blok h3.dal { margin: 20px -20px 14px; padding: 18px 20px 0; border-top: 1px solid #c9d0e0; }
  .fakt .blok h3 .h3-pozn { font-weight: 600; font-size: 12px; color: var(--muted); margin-left: 8px; }
  .fakt .uhr-hned { display: flex; align-items: center; gap: 11px; margin-top: 16px;
    font-weight: 700; font-size: 14px; cursor: pointer; }
  /* Standardní přepínač Fakturantu (42 × 23, text 14 px tučně) — „Uhrazeno" v editoru
     faktury, vypínač automatu u pravidelných faktur i přepínače v editoru vzoru. */
  .fakt .uhr-hned .prep, .fakt .vzor-automat .prep,
  .fakt .fvzd .fvz-prepinace .prep, .fakt .fvzd .blok-odes .prep { width: 42px; height: 23px; }
  .fakt .uhr-hned .prep-drah::before, .fakt .vzor-automat .prep-drah::before,
  .fakt .fvzd .fvz-prepinace .prep-drah::before,
  .fakt .fvzd .blok-odes .prep-drah::before { top: 3px; left: 3px; width: 17px; height: 17px; }
  .fakt .uhr-hned .prep input:checked + .prep-drah::before,
  .fakt .vzor-automat .prep input:checked + .prep-drah::before,
  .fakt .fvzd .fvz-prepinace .prep input:checked + .prep-drah::before,
  .fakt .fvzd .blok-odes .prep input:checked + .prep-drah::before { left: 22px; }
  .fakt .uhr-hned-telo { margin-top: 12px; padding: 12px 14px; border: 1.5px solid #cfe4d8;
    background: #f3faf6; border-radius: 10px; }
  .fakt .uhr-hned-telo .info { color: #4c6b5e; }
  .fakt .pok-blok { margin-top: 16px; padding: 14px 15px; border: 1.5px solid #cfe4d8;
    background: #f3faf6; border-radius: 10px; }
  .fakt .pok-zap { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; cursor: pointer; }
  .fakt .pok-zap input { width: 17px; height: 17px; accent-color: #17845c; margin: 0; flex: 0 0 17px; }
  .fakt .pok-blok .info { color: #4c6b5e; }
  .fakt .okno-karta .dph-prep button, .fakt .uhr-hned-telo .dph-prep button { font-size: 15px; font-weight: 650;
    padding: 8px 16px; }
  /* Příjem / výdej jako dvě rovnocenné karty — vybraná modrá (modrá = vybraný stav). */
  .fakt .pok-typ { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .fakt .pok-typ button { display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto;
    align-items: center; gap: 0 9px; text-align: left; background: #fff; border: 1.5px solid #e2e6f0;
    border-radius: 10px; padding: 9px 12px; cursor: pointer; font-family: inherit; color: var(--on-bg); }
  .fakt .pok-typ button:hover { border-color: #c8d0e4; }
  .fakt .pok-typ button .zn { grid-row: 1 / 3; font-size: 19px; font-weight: 700; text-align: center;
    color: #8a90a6; line-height: 1; }
  .fakt .pok-typ button b { font-size: 15px; font-weight: 700; line-height: 1.25; }
  .fakt .pok-typ button span:last-child { font-size: 12px; color: var(--muted); line-height: 1.25; }
  .fakt .pok-typ button.on { background: var(--blue); border-color: var(--blue); color: #fff; }
  .fakt .pok-typ button.on .zn, .fakt .pok-typ button.on span:last-child { color: rgba(255,255,255,.82); }
  .fakt .cteni-hod { font-size: 15px; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums;
    align-self: center; }
  .fakt .pok-bunka { display: inline-flex; align-items: center; gap: 7px; }
  .fakt .pok-cis { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
  .fakt .dph-prep { display: inline-flex; background: #eef1f8; border-radius: 10px; padding: 3px; }
  .fakt .dph-prep button { background: none; border: 0; border-radius: 8px; padding: 6px 14px;
    font-weight: 700; font-size: 12.5px; line-height: 1; font-family: inherit; color: #5b637d; cursor: pointer; }
  .fakt .dph-prep button.on { background: #fff; color: #2f6bd8; box-shadow: 0 1px 3px rgba(20,25,60,.12); }
  /* Rozbalená nabídka se připojuje do <body>, aby ji neořízla rolovací plocha tabulky —
     proto NESMÍ viset na předkovi `.fakt`: mimo sekci by pravidlo neplatilo a z nabídky
     by byl neviditelný proužek u spodního okraje stránky. */
  .fakt-menu { position: fixed; z-index: 90; background: #fff; border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 10px 30px rgba(20,25,60,.18); padding: 6px; min-width: 250px; display: none; }
  .fakt-menu.on { display: block; }
  .fakt-menu .menu-nadpis { font-size: 12.5px; font-weight: 700; color: #8a90a6; text-align: center;
    padding: 8px 12px 10px; border-bottom: 1px solid var(--border); margin-bottom: 5px; }
  .fakt-menu .menu-ikona { width: 19px; height: 19px; flex: 0 0 19px; color: #6b7284; }
  .fakt-menu .menu-ikona svg { width: 19px; height: 19px; display: block; }
  .fakt-menu button:disabled .menu-ikona { opacity: .45; }
  .fakt-menu button.cerv .menu-ikona { color: #b3352f; }
  .fakt-menu button { display: flex; align-items: center; gap: 11px; width: 100%; background: none; border: 0; border-radius: 8px;
    padding: 9px 12px; font-weight: 600; font-size: 13.5px; line-height: 1; font-family: inherit; color: var(--on-bg); cursor: pointer; text-align: left; }
  .fakt-menu button:hover { background: #f2f4fa; }
  .fakt-menu button:disabled { color: #bcc1d0; cursor: not-allowed; background: none; }
  .fakt-menu .odd { border-top: 1px solid var(--border); margin: 5px 0; }
  .fakt-menu .cerv { color: #b3352f; }
  .fakt .okno { position: fixed; inset: 0; background: rgba(23,28,56,.45); z-index: 95;
    display: none; align-items: center; justify-content: center; padding: 20px; }
  .fakt .okno.on { display: flex; }
  .fakt .okno-karta { background: #fff; border-radius: 16px; width: 540px; max-height: 86vh; display: flex;
    flex-direction: column; box-shadow: 0 20px 60px rgba(20,25,60,.3); }
  /* nadpis okna na střed — dialog je úzký a název dokladu je jeho hlavní sdělení */
  .fakt .okno-karta h3 { margin: 0; padding: 18px 22px 12px; font-size: 17px; text-align: center;
    border-bottom: 1px solid var(--border); }
  .fakt .okno-karta .telo { overflow: auto; overscroll-behavior: contain; padding: 16px 22px 20px; }
  .fakt .okno-karta .pata { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 22px 18px;
    border-top: 1px solid var(--border); }
  .fakt .okno-karta .pata-vlevo { margin-right: auto; }
  /* Vzdušná pole platí pro CELÝ modul Fakturant. Zaoblení je mírné (10 px), ne pilulka —
     pilulkové rámečky u polí vedle sebe vypadaly rozteklé. — včetně hledání a roletek v liště.
     Kdyby se pravidlo psalo jen na obal formuláře (.vzd), zůstalo by ovládání nad
     tabulkou systémové a vedle zaoblených polí by bilo do očí. */
  .fakt .fplocha input, .fakt .fplocha select, .fakt .fplocha textarea, .fakt .fvzd input, .fakt .fvzd select, .fakt .fvzd textarea { width: 100%; background: #fff; border: 1.5px solid #e2e6f0;
    border-radius: 10px; padding: 10px 15px; font-weight: 400; font-size: 14px; line-height: 1.35; font-family: inherit; color: var(--on-bg);
    appearance: none; transition: border-color .12s, box-shadow .12s; }
  .fakt .fplocha textarea, .fakt .fvzd textarea { border-radius: 10px; resize: vertical; }
  .fakt .fplocha input:focus, .fakt .fplocha select:focus, .fakt .fplocha textarea:focus, .fakt .fvzd input:focus, .fakt .fvzd select:focus, .fakt .fvzd textarea:focus { outline: 0; border-color: #2f6bd8;
    box-shadow: 0 0 0 3px rgba(47,107,216,.14); }
  /* dlouhá volba se zkrátí třemi tečkami a nezajede pod šipku */
  .fakt .fplocha select, .fakt .fvzd select { padding-left: 15px; padding-right: 32px; cursor: pointer; text-overflow: ellipsis;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b637d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat; background-position: right 11px center; }
  .fakt .mriz { display: grid; grid-template-columns: 168px 1fr; gap: 11px 16px; align-items: center; }
  .fakt .mriz > label { font-size: 13.5px; font-weight: 600; color: #6b7284; text-align: right; margin: 0; padding: 0; }
  .fakt .pov::before { content: '*'; color: #d1362f; margin-right: 4px; font-weight: 700; }
  .fakt .dvojice { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .fakt .trojice { display: grid; grid-template-columns: 1.1fr 0.72fr 1.05fr; gap: 16px; align-items: start; }
  .fakt .trojice .blok { padding: 13px 15px; }
  .fakt .trojice .blok h3.dal { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .fakt .trojice .blok .zbyva-radek { margin-left: -16px; margin-right: -16px;
    padding-left: 16px; padding-right: 16px; }
  .fakt .trojice .blok h3 { margin-bottom: 10px; }
  /* V užších sloupcích se zkrátí sloupec popisků a stáhnou mezery mezi řádky. */
  .fakt .fplocha .mriz.uzka { grid-template-columns: 108px 1fr; gap: 9px 10px; }
  /* Editor vzoru: blok Opakování má delší popisky („Příští vystavení", „Vystavovat do")
     než platební údaje — dostane jejich místo, ať se popisky nezalamují. */
  .fakt .trojice.trojice-vzor { grid-template-columns: 1.1fr 0.98fr 0.82fr; }
  .fakt .fplocha .trojice-vzor .blok-opak .mriz.uzka { grid-template-columns: 118px 1fr; }
  /* platební údaje přijaté faktury: popisky na jeden řádek, krátká pole — dlouhé je jen číslo účtu */
  .fakt .fplocha .mriz.uzka.platebni { grid-template-columns: max-content max-content; }
  .fakt .fplocha .mriz.uzka.platebni > label { white-space: nowrap; }
  .fakt .fplocha .mriz.uzka.platebni > input, .fakt .fplocha .mriz.uzka.platebni > select { width: 220px; }
  .fakt .fplocha .mriz.uzka.platebni > b { font-size: 15px; align-self: center; text-align: right; padding-right: 16.5px; }   /* jako text v poli: odsazení 15 + rámeček 1,5 */

  .fakt .fplocha .trojice-vzor .blok-opak .mriz.uzka > label { white-space: nowrap; }
  .fakt .fplocha .cteni.uzka { grid-template-columns: 100px 1fr; gap: 4px 10px; font-size: 13px; }
  .fakt .fplocha .cteni.uzka > span { font-size: 12.5px; }
  .fakt .fplocha .cteni.uzka .iban { font-size: 12px; letter-spacing: -.2px; }
  .fakt .trojice .blok .cteni.uzka > b { padding-left: 0; }
  .fakt .trojice .uhr-hned { margin-left: calc(108px + 10px + 16px); margin-top: 14px; }
  .fakt .trojice .uhr-hned-telo { margin-top: 10px; padding: 10px 12px; }
  .fakt .trojice textarea { min-height: 76px; }
  /* Odběratel je teď stejný blok jako Datumy a platební údaje — povinnost se proto
     značí hvězdičkou u nadpisu, ne u popisku pole. */
  .fakt .blok h3 .pov-hvezda { color: #d1362f; font-weight: 700; margin-left: 2px; }
  .fakt .blok > .odb-prazdno { margin: 10px 0 0; padding-left: 0; }
  .fakt .blok > .hod-veta { font-size: 14px; line-height: 1.45; }
  .fakt .blok .odb-jmeno-radek .odb-jmeno { font-size: 15px; font-weight: 700; }
  .fakt .trojice .blok > textarea, .fakt .trojice .blok > .nasep input { width: 100%; }
  .fakt .blok > .nasep { margin-left: calc(100px + 10px - 16.5px); }
  /* V editoru vzoru i dokladu (vydaného, přijatého) začínají na stejné hraně jako pole odběratele
     i název vzoru, středisko, popis a nápověda pod ním — jedna svislá rovina (Petr 1. a 2. 10. 2026) */
  .fakt .fvzd .trojice > .blok:first-child > input[data-fv="nazev"],
  .fakt .fvzd .trojice > .blok:first-child > .stred-vyber,
  .fakt .fvzd .trojice > .blok:first-child > select,
  .fakt .fvzd .trojice > .blok:first-child > textarea,
  .fakt .fvzd .trojice > .blok:first-child > .fvo-napoveda {
    margin-left: calc(100px + 10px - 16.5px); width: calc(100% - (100px + 10px - 16.5px)); box-sizing: border-box; }
  .fakt .fvzd .trojice > .blok:first-child > .stred-vyber { display: flex; }
  /* nadpisy bloku zarovnané doprava, hvězdičky pod sebou — šířka podle nejdelšího
     („Název vzoru *“, 119 px); u .dal je v boxu navíc 16 px záporného okraje */
  .fakt .fvzd .trojice > .blok:first-child > h3 { text-align: right; white-space: nowrap; padding-right: calc(100% - 132px); }
  .fakt .fvzd .trojice > .blok:first-child > h3.dal { padding-right: calc(100% + 16px - 132px); }
  /* hlavička vzoru (Zpět · název · stav) zůstává při rolování pod horní lištou appky */
  /* Horní odsazení pohledu (24 px) je součástí lišty: v klidu tak lišta začíná hned pod horní
     lištou appky, tedy přesně tam, kde se při rolování přilepí — nepohne se ani o pixel. */
  .fakt .fvzd > .hlava { position: sticky; top: var(--topbar-h, 65px); z-index: 10; background: var(--bg);
    padding: 24px 0 14px; margin: -24px 0 4px; box-shadow: 0 6px 10px -8px rgba(0, 0, 0, 0.18); }
  .fakt .blok .odb-jmeno-radek { padding-left: calc(100px + 10px); }
  .fakt .fplocha .mriz > .odb-lab, .fakt .fplocha .mriz > .odb-val { margin-top: -3.5px; margin-bottom: -3.5px;
    align-self: baseline; }
  .fakt .fplocha .mriz > .odb-lab.prvni, .fakt .fplocha .mriz > .odb-val.prvni { margin-top: 1px; }
  .fakt .fplocha .mriz > .odb-val { font-size: 14px; font-weight: 650; }
  .fakt .fplocha .mriz > .odb-val.dic-radek { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  /* Tři bloky formuláře (Odběratel / Datumy / Platební údaje) musí jít od sebe poznat
     na první pohled. Mockup měl jen podklad #f5f6fa, jenže stál na šedém pozadí stránky —
     v appce leží panel na pastelu firmy a světlý blok na bílém panelu splynul. Podklad je
     proto o stupeň sytější a blok má jemný rámeček. */
  .fakt .blok { background: #eef1f8; border: 1px solid #dfe3ee; border-radius: 16px;
    padding: 18px 20px; }
  .fakt .blok h3 { font-size: 15px; font-weight: 800; margin: 0 0 14px; }
  .fakt .cteni { display: grid; grid-template-columns: 168px 1fr; gap: 6px 16px; font-size: 13.5px; align-items: center; }
  .fakt .cteni > span { text-align: right; color: #6b7284; font-weight: 600; }
  /* Spolehlivost plátce DPH — pilulky v seznamu subjektů i v jejich dialogu.
     Červená je tu varování před ručením za cizí daň, ne stav záznamu. */
  .dph-pil { display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .2px; white-space: nowrap; }
  .dph-ok    { background: #e7f6ee; color: #067647; }
  .dph-zle   { background: #fdeceb; color: #b3261e; }
  .dph-neutr { background: #eef0f6; color: #5b6478; }
  /* Varování u platby — ručení za cizí daň stojí peníze, takže se nešeptá. */
  .dph-varoj { margin: 0 0 14px; padding: 11px 14px; border-radius: 11px; font-size: 13px; line-height: 1.55; }
  .dph-varoj.zle { background: #fdeceb; border: 1.5px solid #f3b4b0; color: #8f1d16; }
  .dph-varoj.pozor { background: #fff6e6; border: 1.5px solid #f2d08a; color: #7a5407; }
  .dph-varoj b { font-weight: 800; }
  .dph-blok { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 2px 0 12px; min-height: 30px; }
  .dph-blok .dph-popis { font-size: 12.5px; color: #6b7284; }
  .dph-blok .dph-ucty { flex: 0 0 100%; font-size: 12px; color: #6b7284; line-height: 1.5; }
  .dph-blok button { background: none; border: 1.5px solid #e2e6f0; border-radius: 9px;
    padding: 5px 11px; font: inherit; font-size: 12.5px; color: #5b6478; cursor: pointer; }
  .dph-blok button:hover { border-color: var(--blue); color: var(--blue); }
  .dph-blok button:disabled { opacity: .5; cursor: default; }
  .fakt .soucty { margin-left: auto; width: 340px; font-size: 13.5px; }
  .fakt .soucty div { display: flex; justify-content: space-between; padding: 4px 0; }
  .fakt .soucty .soucet { border-top: 2px solid var(--border); margin-top: 6px; padding-top: 8px; font-size: 19px; font-weight: 800; }
  /* Přepočet na koruny pod součty — světlejší než vlastní součty dokladu: je to
     doprovodný údaj pro účetní, ne částka, kterou klient platí. */
  /* Obal musí být blok: obecné `.soucty div { display: flex }` by z něj udělalo
     jeden řádek a rozházelo řádky přepočtu vedle sebe. Vnitřní řádky flex zůstávají. */
  .fakt .soucty .fkurz-prepocet { display: block; margin-top: 12px; padding-top: 10px;
    border-top: 1px dashed var(--border); color: #6b7284; }
  .fakt .fkurz-prepocet .soucet { border-top: 1px solid var(--border); font-size: 15px; font-weight: 800; color: var(--text); }
  .fakt .fkurz-pozn { display: block !important; font-size: 11.5px; color: #8a90a6; padding-top: 6px !important; }
  /* Kurz, den lístku a tlačítko na jednom řádku — pole jen tak široké, aby se do něj
     vešel kurz na tři desetinná místa, zbytek řádku patří datu. */
  .fakt .fkurz-radek { display: flex; align-items: center; gap: 8px; }
  .fakt .fkurz-radek input { width: 96px; flex: 0 0 96px; text-align: right; font-variant-numeric: tabular-nums; }
  .fakt .fkurz-den { font-size: 12.5px; color: #8a90a6; white-space: nowrap; }
  .fakt .fkurz-btn { margin-left: auto; background: none; border: 1.5px solid #e2e6f0; border-radius: 10px;
    width: 34px; height: 34px; font-size: 15px; color: #6b7284; cursor: pointer; flex: 0 0 34px; }
  .fakt .fkurz-btn:hover { border-color: var(--blue); color: var(--blue); }
  /* Svislé odsazení buňky je mezera mezi řádky položek — 5 px nahoře i dole dávalo
     10 px a dlouhá faktura se tím roztahovala přes celou obrazovku. 1 px dává mezi
     poli 2,3 px: pořád se nedotýkají, ale řádky drží u sebe. */
  .fakt .fpol td { padding: 1px 4px; vertical-align: middle; border: 0; }
  .fakt .fpol thead th { background: none; border-bottom: 1px solid var(--border); font-size: 11px;
    font-weight: 800; letter-spacing: .5px; color: #8a90a6; text-transform: uppercase; padding: 6px 6px; }
  .fakt .fpol input, .fakt .fpol select { padding: 9px 13px; font-size: 13.5px; }
  .fakt .fpol select { padding-right: 28px; background-position: right 9px center; }
  .fakt .fpol input.num { text-align: right; font-variant-numeric: tabular-nums; }
  /* Tabulka položek lícuje s nadpisem panelu i s tlačítky pod ní — první a poslední
     sloupec proto nemají vnitřní odsazení buňky, které je jinak od okraje odsouvalo. */
  .fakt .fpol th:first-child, .fakt .fpol td:first-child { padding-left: 0; }
  /* „POLOŽKA“ lícuje s nadpisem Položky a s textem v poli pod ní (rámeček 1 + odsazení pole 13 px) */
  .fakt .fpol thead th:first-child { padding-left: 14px; }
  .fakt .fpol th:last-child, .fakt .fpol td:last-child { padding-right: 0; }
  .fakt .zrus { background: none; border: 0; color: #b6bccd; font-size: 17px; cursor: pointer; padding: 4px; }
  .fakt .zrus:hover { color: #d1362f; }
  .fakt .fvzd .btn { border-radius: 10px; padding: 10px 20px; }
  .fakt .hist div { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
  .fakt .hist div:last-child { border: 0; }
  .fakt .hist .kdy { color: var(--muted); white-space: nowrap; width: 132px; }
  .fakt .nahled-textu { background: #f2f6fe; border-left: 3px solid #2f6bd8; border-radius: 0 8px 8px 0;
    padding: 8px 12px; font-size: 13px; margin-top: 8px; }
  .fakt .zastupne { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
  .fakt .zastupne button { background: #eef1f8; border: 0; border-radius: 7px; padding: 5px 11px;
    font-weight: 700; font-size: 11.5px; line-height: 1; font-family: ui-monospace, monospace; color: #2f6bd8; cursor: pointer; }
  .fakt .zastupne button:hover { background: #e0e6f6; }
  /* hledání — lupa uvnitř pole, ať je poznat, k čemu je */
  .fakt .hledat { position: relative; }
  .fakt .hledat input { padding-left: 38px; }
  .fakt .hledat::before { content: ''; position: absolute; left: 13px; top: 50%; width: 15px; height: 15px;
    transform: translateY(-50%); pointer-events: none; background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238a90a6' stroke-width='2.4' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>"); }
  .fakt .hledat .smaz { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none;
    border: 0; color: #b6bccd; font-size: 15px; cursor: pointer; padding: 2px; }
  .fakt .hledat .smaz:hover { color: #d1362f; }
  .fakt .prazdno { text-align: center; color: var(--muted); padding: 30px; font-size: 14px; }
  .fakt .info { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
  .fakt .toast, #faktToast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: #1d2136;
    color: #fff; padding: 11px 20px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
    box-shadow: 0 8px 26px rgba(20,25,60,.3); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 200; }
  .fakt .toast.on, #faktToast.on { opacity: 1; }
  .fakt .toast, #faktToast { display: flex; align-items: center; gap: 10px; }
  .fakt .toast svg, #faktToast svg { width: 22px; height: 22px; flex: 0 0 22px; stroke-width: 2.1; }
  /* zelené potvrzení zapsané platby — větší než běžná hláška */
  .fakt .toast.ok, #faktToast.ok { background: #0e7a4f; font-size: 17px; font-weight: 700; padding: 15px 26px; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(14,122,79,.38); }
  .fakt .toast.chyba-toast, #faktToast.chyba-toast { background: #b3352f; font-size: 17px; font-weight: 700; padding: 15px 26px; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(179,53,47,.38); }
  /* Chybné pole — červený rámeček, červená záře a věta pod polem. */
  .fakt .fplocha input.chyba, .fakt .fplocha select.chyba, .fakt .fplocha textarea.chyba, .fakt .fvzd input.chyba, .fakt .fvzd select.chyba, .fakt .fvzd textarea.chyba {
    border-color: #d1362f; background: #fff7f6; }
  .fakt .fplocha input.chyba:focus, .fakt .fvzd input.chyba:focus, .fakt .fplocha textarea.chyba:focus, .fakt .fvzd textarea.chyba:focus {
    border-color: #d1362f; box-shadow: 0 0 0 3px rgba(209,54,47,.18); }
  .fakt .chyba-text { color: #b3352f; font-size: 12.5px; font-weight: 650; margin-top: 4px;
    display: flex; align-items: center; gap: 5px; }
  .fakt .chyba-text::before { content: '!'; display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; flex: 0 0 15px; border-radius: 50%; background: #d1362f; color: #fff;
    font-size: 11px; font-weight: 800; }
  /* U řádku položek svítí celý řádek, ne jen pole — chyba je v něm jako v celku. */
  .fakt .fpol tr.chyba-radek td { background: #fff7f6; }

  /* ---- velikost písma v celém Fakturantovi ----
     Modul se používá celý den a čte se z něj hodně čísel, tak je písmo o stupeň větší než
     ve zbytku appky. Drží se jeden žebříček, ať se to nerozjede: tabulka 14,5 px,
     hlavičky sloupců 12, pole 15, popisky 14, pilulky 12,5. */
  .fakt .fplocha { font-size: 14.5px; }
  .fakt .fplocha h1 { font-size: 23px; }
  /* Pevné rozvržení: bez něj si sloupec s popisem drží šířku podle nejdelšího textu
     a tabulka přeteče, i když má popis `max-width: 0` a ořezávání. Takhle dostanou
     sloupce přesně zadané šířky a popis si vezme, co zbude. */
  .fakt .fplocha table { font-size: 14.5px; table-layout: fixed; width: 100%; min-width: 0; }
  .fakt .fplocha thead th { font-size: 12px; letter-spacing: .3px; }
  /* Vzdušné řádky patří SEZNAMU dokladů, ne tabulce položek v editoru: ta má
     v buňkách pole s vlastním odsazením a 9 px navíc z ní dělalo rozházený
     sloupec. `:not(.fpol)` je tu proto, že `.fakt .fplocha tbody td` má vyšší
     specificitu než `.fakt .fpol td` a přebíjelo ho. */
  /* Řádek seznamu dokladů byl 52 px vysoký, kdežto iDoklad má 40 — na obrazovku se
     tím vešlo o třetinu míň faktur. Odsazení 4 px a menší ikonová tlačítka to srovnají.
     Dělicí linka je tmavší než globálních #f0f1f6 (těch si při hustších řádcích nikdo
     nevšimne); #e3e5ec odpovídá tomu, co má iDoklad. */
  .fakt .fplocha table:not(.fpol) tbody td { padding-top: 6px; padding-bottom: 6px;
    border-bottom-color: #e3e5ec; }
  .fakt .fplocha table.fakt-seznam .ikona-btn { width: 26px; height: 26px; }
  .fakt .fplocha input, .fakt .fplocha select, .fakt .fplocha textarea, .fakt .fvzd input, .fakt .fvzd select, .fakt .fvzd textarea { font-size: 15px; }
  .fakt .fvzd h3 { font-size: 18px; }
  /* Přehled už zapsaných úhrad v dialogu nové platby — jen na čtení, měnit se dají
     v samostatném okně Úhrady. Karta na podkladu, ať je poznat, že nepatří k polím
     formuláře nad ní: čtyři rovnocenné řádky drobného textu se slévaly. */
  .fakt .fuh-hotove { margin-top: 18px; background: var(--bg); border-radius: 12px; padding: 12px 14px; }
  .fakt .fuh-hlava { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .fakt .fuh-hlava h4 { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .5px;
    text-transform: uppercase; color: #6b7284; }
  .fakt .fuh-stav { margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: .3px;
    padding: 3px 9px; border-radius: 999px; }
  .fakt .fuh-stav.hotovo { background: var(--green-bg); color: var(--green); }
  .fakt .fuh-stav.castecne { background: #fdf0dd; color: #a9650a; }
  /* Řádek úhrady: datum vlevo, způsob doprostřed, částka vpravo na jedné svislici —
     v tabulce dialogu položek to funguje stejně, čísla pod sebou se čtou nejlíp. */
  .fakt .fuh-radek { display: flex; align-items: center; gap: 10px; background: #fff;
    border-radius: 8px; padding: 7px 10px; margin-bottom: 4px; font-size: 13px; }
  .fakt .fuh-radek:last-of-type { margin-bottom: 0; }
  .fakt .fuh-radek .fuh-datum { flex: 0 0 76px; color: #5b637d; font-variant-numeric: tabular-nums; }
  .fakt .fuh-radek .fuh-zpusob { color: var(--muted); font-size: 12px; }
  .fakt .fuh-radek .fuh-castka { margin-left: auto; font-weight: 800; font-size: 14px;
    font-variant-numeric: tabular-nums; }
  /* Popelnice se ukáže až při najetí na řádek, ať v klidu neruší — místo si drží
     pořád, jinak by se částky při najetí posouvaly. */
  .fakt .fuh-radek .ikona-btn { opacity: 0; transition: opacity .12s; flex: 0 0 auto;
    margin-left: 2px; padding: 2px; }
  .fakt .fuh-radek:hover .ikona-btn, .fakt .fuh-radek .ikona-btn:focus { opacity: 1; }
  .fakt .fuh-radek .ikona-btn svg { width: 16px; height: 16px; }
  .fakt .fuh-radek .ikona-btn:hover { background: #fdeceb; color: #d1362f; }
  /* --- okno Úhrada (varianta „tři dlaždice a přepínač") --- */
  .fakt .fuh-okno h3 { margin-bottom: 2px; }
  .fakt .fuh-pod { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
  .fakt .fuh-dlazdice { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 0 0 18px; }
  .fakt .fuh-dlazdice > div { background: #f4f6fb; border-radius: 12px; padding: 10px 12px; min-width: 0; }
  .fakt .fuh-dlazdice small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .5px;
    text-transform: uppercase; color: #8a90a6; margin-bottom: 3px; }
  .fakt .fuh-dlazdice b { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .fakt .fuh-dlazdice .hotovo { background: var(--green-bg); }  .fakt .fuh-dlazdice .hotovo b { color: var(--green); }
  .fakt .fuh-dlazdice .zbyva { background: #fdf0dd; }           .fakt .fuh-dlazdice .zbyva b { color: #a9650a; }
  .fakt .fuh-dlazdice .zbyva.nula { background: var(--green-bg); } .fakt .fuh-dlazdice .zbyva.nula b { color: var(--green); }
  /* popisky NAD poli, vlevo a malé — obecné popisky dialogů Fakturanta jsou zarovnané
     doprava k hodnotám, což u pole přes celou šířku vypadalo rozsypaně */
  .fakt .modal.fvzd label.fuh-lbl { display: block; text-align: left; padding: 0; margin: 0 0 5px;
    font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #5b637d; }
  /* forma úhrady v okně „Uhradit“ u Plateb k úhradě — stejný přepínač jako ve Fakturantu */
  #payOverlay .fuh-segment { display: flex; background: #f4f6fb; border: 1.5px solid #dfe3ee; border-radius: 10px;
    padding: 3px; margin-bottom: 6px; }
  #payOverlay .fuh-segment button { flex: 1; border: 0; background: transparent; border-radius: 8px; padding: 7px 4px;
    font: inherit; font-size: 13px; font-weight: 650; color: #3f465e; cursor: pointer; }
  #payOverlay .fuh-segment button:hover { background: #e8ecf7; }
  #payOverlay .fuh-segment button.on { background: var(--blue); color: #fff; }
  /* Z účtu / Hrazeno z prostředků — 1:1 podle mockupu (stejná síla selektoru jako tam, ať se
     uplatní i obecné `.modal select`) */
  .pay-blok { margin-top: 12px; padding: 4px 2px; }
  .pay-select { width: 100%; height: 40px; border: 1.5px solid #dfe3ee; border-radius: 10px; padding: 0 10px; font: inherit;
    font-size: 14px; background: #fff; margin-bottom: 4px; }
  .pay-select:disabled { background: var(--card); color: var(--on-bg); }
  .pay-chip { margin-left: 6px; text-transform: none; letter-spacing: 0; }
  .pay-chip[hidden] { display: none; }
  /* zápis hotovosti do pokladny — stejný zelený blok jako v okně úhrady Fakturantu */
  #payOverlay .pay-pok { margin: 10px 0 4px; padding: 12px 14px; border: 1.5px solid #cfe4d8;
    background: #f3faf6; border-radius: 10px; text-align: left; }
  #payOverlay .pay-pok[hidden] { display: none; }
  #payOverlay .pay-pok-zap { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px;
    cursor: pointer; margin: 0; padding: 0; }
  #payOverlay .pay-pok-zap input { width: 17px; height: 17px; accent-color: #17845c; margin: 0; flex: 0 0 17px; }
  #payOverlay .pay-pok-info { margin: 8px 0 0; font-size: 13px; color: #4c6b5e; line-height: 1.4; }
  /* stav zápisu úhrady do wflow u Plateb uhrazených (štítek WF) */
  button.src-tag { border: 0; font-family: inherit; line-height: inherit; }
  .src-tag.wflow.wf-ok { background: var(--green-bg); color: var(--green); }
  .src-tag.wflow.wf-chyba, .src-tag.wflow.wf-konflikt { background: var(--red-bg); color: var(--red); cursor: pointer; }
  /* Upomínky: stejná výbava tabulky jako ostatní seznamy, jen v okně */
  .fakt .fup .fup-hlava { display: flex; gap: 16px; align-items: flex-end; margin-bottom: 10px; }
  .fakt .fup .fup-hlava .info { margin: 0; flex: 1 1 auto; font-size: 13px; }
  .fakt .fup .fup-hlava .info svg { width: 15px; height: 15px; vertical-align: -3px; }
  .fakt .fup .fup-hlava .hledat { flex: 0 0 auto; position: relative; }
  .fakt .fup .fup-varovani { display: flex; gap: 10px; align-items: flex-start; background: var(--orange-bg);
    color: var(--orange); border: 1px solid #fedf89; border-radius: 10px; padding: 9px 12px; font-size: 13px; margin-bottom: 10px; }
  .fakt .fup .fup-varovani svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
  .fakt .fup .fup-souhrn { font-size: 12.5px; color: var(--muted); margin: 0 0 6px 2px; }
  /* Okno se vždy vejde na obrazovku a roluje JEN tabulka uvnitř — dřív rolovalo i okno samo,
     takže byly dva posuvníky a k tlačítku Zavřít se muselo dojíždět. Flexový sloupec:
     hlavička a tlačítka drží místo, tabulka se zmenší (min-height: 0 je nutné, jinak flexová
     položka pod výšku obsahu nesleze a okno přeteče). */
  .fakt .modal.fup { display: flex; flex-direction: column; overflow: hidden; position: relative; max-height: 92vh; }
  .fakt .modal.fup > h3 { padding-right: 40px; }
  .fakt .modal.fup > .actions { flex: 0 0 auto; }
  .fakt .fup #fupBody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .fakt .fup #fupBody > .section { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; }
  .fakt .fup .fakt-tab-wrap { max-height: 60vh; flex: 0 1 auto; min-height: 120px; }
  .fakt .fup .tbl-splitter, .fakt .fup .fakt-strankovani { flex: 0 0 auto; }
  /* zavírací křížek vpravo nahoře (vedle tlačítka Zavřít dole) */
  .modal .okno-krizek { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0;
    border-radius: 50%; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
  .modal .okno-krizek:hover { background: #eceef4; color: var(--text); }
  /* Hlavička v okně NEROLUJE vůbec: roluje jen `tbody` (display:block + overflow), každý
     řádek je vlastní `display: table` s pevným rozvržením a stejnými šířkami buněk jako
     hlavička. Ukotvené (sticky) řádky v okně prosvítaly — dva sticky řádky prohlížeč
     (hlavně Safari) zaokrouhlí každý jinak a mezerou byly vidět data. Tady data pod
     hlavičku vůbec nezajedou. `scrollbar-gutter: stable` na obou částech drží sloupce
     zarovnané i s klasickým (ne překryvným) posuvníkem. */
  #fupBody .fakt-tab-wrap { display: flex; flex-direction: column; overflow: hidden !important; }
  #fupBody .fakt-tab-wrap table { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; min-width: 0; }
  #fupBody .fakt-tab-wrap thead { display: block; flex: 0 0 auto; overflow-y: hidden; scrollbar-gutter: stable;
    border-bottom: 1px solid #d7dced; }
  #fupBody .fakt-tab-wrap tbody { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
  #fupBody .fakt-tab-wrap tr { display: table; width: 100%; table-layout: fixed; }
  #fupBody .fakt-tab-wrap thead th { position: static !important; }
  /* text filtru jako obsah sloupce: text zleva, čísla (Zbývá, Po splatnosti) zprava */
  .fakt #fupBody .filtr-radek th input { text-align: left; }
  .fakt #fupBody .filtr-radek th.num input { text-align: right; }
  /* text v poli filtru na stejné svislé rovině jako hlavička a řádky (12 px od kraje buňky):
     buňka filtru má 6 px (globální pravidlo s !important) + rámeček 1 px + odsazení pole 5 px */
  .fakt #fupBody .filtr-radek th input, .fakt #fupBody .filtr-radek th button.filtr-datum { padding-left: 5px; padding-right: 5px; }
  #fupBody .fakt-tab-wrap thead th::before, #fupBody .fakt-tab-wrap thead th::after { display: none !important; }
  /* Přijaté doklady: tabulka vyplňuje okno a stránka se neroluje — stejné řešení jako Upomínky.
     S ukotvenou (sticky) hlavičkou v Safari při rolování tabulky prosvítala data mezi hlavičkou
     a řádkem filtrů a problikávalo to; tady hlavička i filtry stojí a roluje jen tělo. Jen počítač,
     na telefonu jsou karty. */
  @media (min-width: 761px) {
    #prijateObsah .fakt-tab-wrap { display: flex; flex-direction: column; overflow: hidden !important; }
    #prijateObsah .fakt-tab-wrap table { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; min-width: 0; }
    #prijateObsah .fakt-tab-wrap thead { display: block; flex: 0 0 auto; overflow-y: hidden; scrollbar-gutter: stable;
      border-bottom: 1px solid #d7dced; }
    #prijateObsah .fakt-tab-wrap tbody { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
    #prijateObsah .fakt-tab-wrap tr { display: table; width: 100%; table-layout: fixed; }
    #prijateObsah .fakt-tab-wrap thead th { position: static !important; }
    #prijateObsah .fakt-tab-wrap thead th::before, #prijateObsah .fakt-tab-wrap thead th::after { display: none !important; }
  }
  /* Totéž obecně (`teloRoluje` v app.js): Vydané doklady, Pravidelné faktury, Úhrady, Historie
     e-mailů. Hlavička posouvaná dopočtem při rolování stránky v Safari visela níž, než měla. */
  @media (min-width: 761px) {
    .fakt-tab-wrap.telo-roluje { display: flex; flex-direction: column; overflow: hidden !important; }
    .fakt-tab-wrap.telo-roluje table { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; min-width: 0; }
    .fakt-tab-wrap.telo-roluje thead { display: block; flex: 0 0 auto; overflow-y: hidden; scrollbar-gutter: stable;
      border-bottom: 1px solid #d7dced; }
    .fakt-tab-wrap.telo-roluje tbody { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
    .fakt-tab-wrap.telo-roluje tr { display: table; width: 100%; table-layout: fixed; }
    /* `max-width: 0` (trik na trojtečku v běžné tabulce) by v řádku s pevnými šířkami buňku smrskl */
    .fakt-tab-wrap.telo-roluje td, .fakt-tab-wrap.telo-roluje th { max-width: none; }
    .fakt-tab-wrap.telo-roluje thead th { position: static !important; }
    .fakt-tab-wrap.telo-roluje thead th::before, .fakt-tab-wrap.telo-roluje thead th::after { display: none !important; }
  }
  .fakt .fup .fup-dni { font-variant-numeric: tabular-nums; }
  .fakt .fup .fup-dni.dlouho { color: var(--red); font-weight: 650; }
  .fakt .fuh-segment { display: flex; background: #f4f6fb; border: 1.5px solid #dfe3ee; border-radius: 10px;
    padding: 3px; margin-bottom: 14px; }
  .fakt .fuh-segment button { flex: 1; border: 0; background: transparent; border-radius: 8px; padding: 7px 4px;
    font: inherit; font-size: 13.5px; font-weight: 650; color: #3f465e; cursor: pointer; }
  .fakt .fuh-segment button:hover { background: #e8ecf7; }
  .fakt .fuh-segment button.on { background: var(--blue); color: #fff; }
  .fakt .fuh-okno .pok-blok { margin: -4px 0 14px; }
  /* podřízené volby pod sebou, přepínače na svislé rovině s textem hlavního přepínače (34 px přepínač + 10 px mezera) */
  .fakt .fuh-okno .fuh-ddp-co { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; margin: 11px 0 0 44px; }
  .fakt .fuh-okno .fuh-ddp-co .prepinac { margin: 0; }
  .fakt .fuh-okno .fuh-ddp-co .prepinac { font-size: 13.5px; font-weight: 600; }
  .fakt .fuh-radek2 { display: flex; gap: 12px; align-items: flex-end; }
  .fakt .fuh-radek2 .fuh-pole { flex: 1; min-width: 0; }
  .fakt .fuh-radek2 .fuh-pole.sirsi { flex: 1.4; }
  .fakt .fuh-mena { position: relative; }
  .fakt .fuh-mena i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    font-style: normal; font-weight: 700; color: var(--muted); font-size: 15px; pointer-events: none; }
  /* částka velká a tučná jako v ostatních dialozích s částkou; datum stejně vysoké, ať sedí v rovině */
  .fakt .modal.fvzd .fuh-radek2 input { height: 50px; box-sizing: border-box; }
  .fakt .modal.fvzd .fuh-mena input { font-size: 21px; font-weight: 800; text-align: right; padding-right: 46px;
    font-variant-numeric: tabular-nums; }
  .fakt .fuh-okno .fuh-hotove { margin-top: 16px; }
  .fakt .fuh-pruh { height: 6px; background: #dfe3ee; border-radius: 4px; overflow: hidden;
    margin: 10px 0 6px; }
  .fakt .fuh-pruh span { display: block; height: 100%; background: #17a356; border-radius: 4px; }
  .fakt .fuh-souhrn { display: flex; gap: 8px; font-size: 12.5px; color: #5b637d; }
  .fakt .fuh-souhrn .fuh-zbyva { margin-left: auto; }
  .fakt .fuh-souhrn b { color: var(--text); font-variant-numeric: tabular-nums; }
  /* Výsledné číslo je to, kvůli čemu se maska nastavuje — patří mu velké písmo,
     ne řádek drobného textu pod vysvětlivkou. Přepočítává se při psaní. */
  .fakt .fr-nahled { margin-top: 12px; padding: 10px 14px; border-radius: 10px;
    background: var(--sel-bg); text-align: center; }
  .fakt .fr-popis { display: block; font-size: 11px; font-weight: 800; letter-spacing: .5px;
    text-transform: uppercase; color: #5b637d; margin-bottom: 2px; }
  .fakt #frNahled { font-size: 27px; font-weight: 800; letter-spacing: .5px; color: #2f6bd8;
    font-variant-numeric: tabular-nums; line-height: 1.15; word-break: break-all; }
  /* Popisek stojí nad polem a hodnota v něm je zarovnaná doprava — popisek proto
     taky, ať spolu drží jednu svislici. Zarovnaný doleva se od hodnoty odtrhl a
     dvojice „popisek + pole" se rozpadla na dva nesouvisející kusy.
     Přepínače mají text vedle kolečka, ty se nezarovnávají. */
  .fakt .fvzd label:not(.prepinac) { font-size: 14px; text-align: right; padding-right: 13px;
    padding-left: 0; }
  .fakt .fvzd .prepinac { font-size: 14px; }
  /* Volba sloupců — dlaždice místo dvanácti přepínačů ON/OFF vedle sebe.
     Modrá = sloupec je v tabulce, jako všude v appce vybraný stav. */
  .fakt .sloupce-volby { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 4px; }
  .fakt .fsl-volba { display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 10px 13px; border: 1.5px solid #e2e6f0; border-radius: 10px; background: #fff;
    font-family: inherit; font-size: 14px; font-weight: 650; color: #5b6478;
    cursor: pointer; text-align: left; transition: border-color .12s, background .12s, color .12s; }
  .fakt .fsl-volba:hover { border-color: #c3cadb; }
  .fakt .fsl-volba .fsl-fajfka { display: flex; flex: 0 0 18px; color: #c3cadb; }
  .fakt .fsl-volba .fsl-fajfka svg { width: 18px; height: 18px; }
  .fakt .fsl-volba.on { border-color: var(--blue); background: #eef2ff; color: #23306b; }
  .fakt .fsl-volba.on .fsl-fajfka { color: var(--blue); }
  .fakt .fpv-volby { display: grid; gap: 8px; }
  .fakt .fpv-volby .btn.fpv-volba { width: 100%; text-align: center; }
  /* Hodnota jen ke čtení v okně — zarovnaná doprava jako ostatní hodnoty v oknech. */
  .fakt .modal.fvzd .cteni-hod { text-align: right; font-weight: 650; padding: 4px 15px 2px; }
  /* Počet po splatnosti u tlačítka Upomínky — červený, je to urgence. */
  .fakt .btn .pocet { background: #fdecea; color: #b3352f; border-radius: 6px;
    padding: 1px 6px; font-size: 11.5px; font-weight: 800; margin-left: 2px; }
  /* Seznam dokladů má až dvanáct sloupců a v akcích čtyři ikony. Místo se bere nejdřív
     z mezer mezi sloupci (12 → 7 px na stranu, tedy 130 px přes celou tabulku), teprve
     pak ze sloupců s textem — jinak by se Popis smrskl na pár znaků. */
  .fakt .fplocha table.fakt-seznam th, .fakt .fplocha table.fakt-seznam td { padding-left: 7px; padding-right: 7px; }
  .fakt .fplocha table.fakt-seznam th:first-child, .fakt .fplocha table.fakt-seznam td:first-child { padding-left: 12px; }
  .fakt .fplocha table.fakt-seznam th:last-child, .fakt .fplocha table.fakt-seznam td:last-child { padding-right: 12px; }
  /* V OKNECH se hodnoty zarovnávají doprava — čtou se od poslední číslice (číslo účtu,
     IBAN, pořadové číslo) a stejně to má mockup. Platí to jen pro okna (`.modal.fvzd`),
     ne pro formulář dokladu: tam je vpravo cena a množství, ale název položky se čte
     odpředu a doprava zarovnaný vypadal jako chyba. Roletce se musí místo pro šipku
     ubrat VPRAVO, kde je nakreslená, ne vlevo — jinak přes ni text přeteče; volby
     v rozbalené nabídce se vracejí doleva, aby se četly normálně. */
  /* Okna modulu jsou bílá jako v mockupu. Appkový `.modal` má podklad v barvě firmy,
     jenže v něm jsou bílá pole a bílé tabulky — celé modré okno pak vypadá jako omyl. */
  .fakt .modal.fvzd { background: #fff; }
  .fakt .modal.fvzd input { text-align: right; }
  /* Víceřádkový text (zpráva e-mailu, patička) je souvislý odstavec — čte se odpředu,
     doprava zarovnaný vypadá jako chyba. Doprava jdou hodnoty, ne text. */
  .fakt .modal.fvzd textarea { text-align: left; }
  /* Datum, které už mělo být vystavené, je červené — kvůli němu se do sekce chodí. */
  .fakt .vzor-ted { color: #b3352f; }
  /* Výběr šablony: miniatura rozvržení, název a popis. Vybraná má barevný rámeček. */
  .fakt .sablony { display: grid; grid-template-columns: repeat(auto-fit, minmax(164px, 1fr)); gap: 12px; }
  /* Karta je svislý flex, aby tlačítka všech karet držela jednu linku: popisy mají
     různý počet řádků (od dvou do čtyř) a bez toho tlačítka poskakovala podle délky
     textu. Popis se roztáhne přes zbylou výšku a akce se přilepí ke spodnímu okraji. */
  .fakt .sablona { border: 2px solid var(--border); border-radius: 12px; padding: 10px;
    cursor: pointer; background: #fff; transition: border-color .12s, box-shadow .12s;
    display: flex; flex-direction: column; }
  .fakt .sablona:hover { border-color: #b6bfd6; }
  .fakt .sablona.on { border-color: #2f6bd8; box-shadow: 0 0 0 3px rgba(47,107,216,.12); }
  /* Vybrat šablonu šlo jen klikem kamkoli do karty a nikde to nebylo napsané, takže
     to nikdo nenašel — klik do miniatury navíc otevírá PDF. Každá karta má proto
     vlastní tlačítko. Modrá = vybraný stav, tmavá = akce. */
  .fakt .sablona-akce { display: flex; flex-direction: column; gap: 6px; margin-top: auto;
    padding-top: 10px; }
  /* Tlačítka pod sebou, ne vedle sebe: ve sloupci 164 px se dvě vedle sebe zalomila
     a karty se pak lišily výškou i podle toho, jestli se text vešel na řádek. */
  .fakt .sablona-akce .btn { width: 100%; }
  .fakt button.btn.mini.sab-vybrana, .fakt button.btn.mini.sab-vybrana:disabled {
    background: #2f6bd8; border-color: #2f6bd8; color: #fff; opacity: 1; cursor: default; }
  /* Miniatura je obrázek první stránky dokladu, vyrenderovaný na serveru.
     PDF přímo v rámečku (iframe/embed) nešlo: Safari ho nevykreslí. Poměr stran
     je A4, takže se stránka vejde přesně a nezbývají prázdné pruhy. */
  .fakt .sablona-nahled { position: relative; border: 1px solid var(--border); border-radius: 7px;
    overflow: hidden; background: #fff; margin-bottom: 8px; aspect-ratio: 210 / 297; }
  /* Klik do miniatury otevře doklad ve velkém. Samotný kurzor lupy na to nestačí —
     je vidět, až když na kartu najedeš myší, a na telefonu vůbec. Rohová značka to
     řekne rovnou; tlačítko „Ukázat PDF" pod kartou bylo na totéž a jen zabíralo místo. */
  .fakt .sablona-nahled img { display: block; width: 100%; height: 100%; object-fit: contain;
    cursor: zoom-in; }
  .fakt .sablona-nahled::after { content: '⤢ zvětšit'; position: absolute; right: 5px; bottom: 5px;
    background: rgba(29, 33, 54, .74); color: #fff; font-size: 10px; font-weight: 700;
    letter-spacing: .3px; padding: 2px 7px; border-radius: 6px; pointer-events: none; }
  .fakt .sablona-nahled.bez-nahledu::after, .fakt .sablona-nahled.prekresluje::after { content: none; }
  /* Když se náhled nepovede vykreslit, zůstane prázdný rámeček s vysvětlením —
     vybrat šablonu jde i tak, náhled je pohodlí, ne nutnost. */
  .fakt .sablona-nahled.bez-nahledu::after { content: 'Náhled se nepodařilo vytvořit';
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 0 14px; text-align: center; font-size: 12px; color: #9aa1b4; }
  .fakt .sablona-nahled.bez-nahledu img { display: none; }
  /* Překreslení běží na serveru a u pěti šablon trvá vteřiny — ztlumený obrázek
     s tenkým pruhem nahoře říká, že se pracuje, místo aby to vypadalo zaseknutě. */
  .fakt .sablona-nahled.prekresluje img { opacity: .35; }
  .fakt .sablona-nahled.prekresluje::before { content: ''; position: absolute;
    top: 0; left: 0; height: 3px; width: 40%; background: var(--blue); border-radius: 2px;
    animation: nahled-pruh 1.1s ease-in-out infinite; z-index: 1; }
  @keyframes nahled-pruh { 0% { left: -40% } 100% { left: 100% } }
  @media (prefers-reduced-motion: reduce) {
    .fakt .sablona-nahled.prekresluje::before { animation: none; width: 100%; opacity: .5; }
  }
  .fakt .sablona-nazev { font-size: 14px; font-weight: 750; display: flex; align-items: center;
    gap: 8px; margin-bottom: 4px; }
  .fakt .sablona-popis { font-size: 12px; color: var(--muted); line-height: 1.45; }
  /* Nadpis sekce v Nastavení: tmavý, větší a s barevným pruhem vlevo — mezi bílými
     kartami jeden pod druhým se stejně velké nadpisy ztrácely. */
  /* Proužek u nadpisu má PEVNOU výšku, ne výšku řádku: nadpis s tlačítkem vpravo
     („+ Přidat účet") je vyšší než nadpis s popiskem, takže border-left dělal
     u každé sekce jinak dlouhý proužek. Text začíná na stejném místě jako dřív
     (11 px odsazení + 4 px rámeček = 15 px). */
  .fakt .fplocha .panel > h2 { font-size: 17px; font-weight: 800; letter-spacing: -.2px;
    position: relative; padding-left: 15px; line-height: 1.15; }
  .fakt .fplocha .panel > h2::before { content: ''; position: absolute; left: 0;
    top: 50%; transform: translateY(-50%); width: 4px; height: 26px;
    border-radius: 2px; background: #2f6bd8; }
  /* Nastavení fakturace: sekce se odlišují MODROU LINKOU PO CELÉ LEVÉ HRANĚ KARTY
     a větším modrým nadpisem oddělenou čarou — v dlouhé stránce plné popisků a tabulek
     nadpisy zanikaly. Zkoušel se podbarvený pruh přes šířku karty: světle šedý splýval
     s šedými hlavičkami tabulek, tmavý (#3d4460) byl na stránku moc těžký. */
  #faktNastaveniObsah .panel { margin-bottom: 20px; border-left: 6px solid #2f6bd8; padding-left: 20px; }
  #faktNastaveniObsah .panel > h2 { font-size: 19px; color: #1f3585; padding-left: 0;
    padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid #e3e8f4; }
  #faktNastaveniObsah .panel > h2::before { display: none; }
  /* Tlačítka pod součtem editoru dokladu: vpravo pod Celkem (dřív byla vlevo —
     `.actions` má flex jen uvnitř `.modal`, tady se inline `justify-content` neuplatnilo)
     a s větším odstupem, ať se pod součtem netlačí. */
  /* stránkování seznamu vydaných dokladů — počet vlevo, strany uprostřed, velikost vpravo
     (jako v iDokladu, na který jsou lidé zvyklí) */
  .fakt-strankovani { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: 14px; padding: 14px 16px; border-top: 1px solid #e3e5ec; font-size: 15px; color: #5b637d; }
  .fakt-strankovani .fs-tlacitka { display: flex; gap: 8px; align-items: center; }
  .fakt-strankovani .fs-tl { min-width: 42px; height: 42px; padding: 0 9px; border-radius: 21px;
    border: 1.5px solid #e2e6f0; background: #fff; color: #3f465e; font: inherit; font-size: 16px;
    font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; }
  .fakt-strankovani .fs-tl:hover:not(:disabled) { border-color: #2f6bd8; color: #2f6bd8; }
  .fakt-strankovani .fs-tl.on { background: #2f6bd8; border-color: #2f6bd8; color: #fff; cursor: default; }
  .fakt-strankovani .fs-tl:disabled:not(.on) { opacity: .4; cursor: default; }
  .fakt-strankovani .fs-mezera { color: #9aa1b4; padding: 0 2px; font-size: 17px; }
  .fakt-strankovani .fs-na { justify-self: end; display: flex; align-items: center; gap: 8px; }
  .fakt .fplocha .fakt-strankovani select { width: auto; padding: 8px 32px 8px 12px; font-size: 15px; }
  @media screen and (max-width: 760px) {
    .fakt-strankovani { grid-template-columns: 1fr; justify-items: center; }
    .fakt-strankovani .fs-na { justify-self: center; }
  }
  .fakt .fplocha .editor-akce { display: flex; justify-content: flex-end; gap: 10px; margin-top: 30px; }
  /* Hlavička tabulky musí být vidět i mezi bílými řádky. */
  .fakt .fplocha thead th { background: #eef1f8; color: #5b637d; }
  .fakt .fplocha thead tr.filtr-radek th { background: transparent; }
  /* Seznam vydaných dokladů má dělítko výšky, takže roluje uvnitř vlastní plochy —
     řádek filtrů se lepí pod hlavičku a průhledný by nechal prosvítat řádky. */
  .fakt .fplocha .fakt-tab-wrap thead tr.filtr-radek th { background: #fff; }
  /* Úhrady v okně: stejný obsah jako dřívější panel, jen bez jeho rámečku a odsazení. */
  .fakt .uhrady-akce { display: flex; justify-content: flex-end; margin-bottom: 12px; }
  /* náhled importu adresáře: nahoře počty, pod nimi rolovací seznam řádků */
  .adresar-shrnuti { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
  .adresar-shrnuti .ashr { border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 700; }
  .adresar-shrnuti .ashr b { font-size: 19px; display: block; }
  .adresar-shrnuti .ashr.novy { background: var(--green-bg); color: var(--green); }
  .adresar-shrnuti .ashr.doplni { background: var(--sel-bg); color: var(--blue); }
  .adresar-shrnuti .ashr.beze { background: var(--bg); color: var(--muted); }
  .adresar-nadpis { font-size: 14px; font-weight: 750; margin: 14px 0 6px; }
  .adresar-nadpis:first-child { margin-top: 0; }
  .adresar-telo { max-height: 34vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }
  .adresar-telo table { min-width: 0; }
  .adresar-telo .zmena { color: var(--muted); font-size: 12px; }
  .lehce-pozn { font-weight: 600; color: var(--muted); font-size: 11.5px; margin-left: 6px; }
  .fakt .modal.fvzd select { direction: rtl; text-align: right; padding-right: 34px; }
  .fakt .modal.fvzd select option { direction: ltr; }
  /* Zaškrtávátko přepínače je ovládání, ne hodnota — zůstává vlevo. */
  .fakt .modal.fvzd .prepinac input { text-align: left; }
  /* Ve formuláři dokladu jde doprava jen to, co je číslo, a hodnoty v mřížce popisků. */
  .fakt .fvzd input.num, .fakt .fvzd .mriz > input, .fakt .fvzd .mriz > select { text-align: right; }
  .fakt .fvzd .mriz > select { direction: rtl; padding-right: 34px; }
  .fakt .fvzd .mriz > select option { direction: ltr; }
  .fakt .fplocha .zal button { font-size: 15px; padding: 10px 15px; }
  .fakt .fplocha .dph-prep button { font-size: 13.5px; padding: 7px 15px; }
  /* Lišta seznamů (Vydané, Pravidelné, Úhrady, Přijaté): jedno písmo a jedna velikost pro všechno
     ovládání. Tlačítka `<button>` písmo nedědí — akce (Upomínky, Sloupce, + Nová…) byly v Arialu,
     přepínače a hledání v systémovém písmu, a velikosti 13,5 / 14 / 15 px vedle sebe. */
  .fakt button, .fakt select { font-family: inherit; }
  .fakt .fplocha .dph-prep button, .fakt .fakt-puvod button, .fakt .hledat input { font-size: 14px; }
  .fakt .fplocha .roleta-btn { font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; }
  /* roletka v řádku se záložkami: výška jako hledání a přepínač CZ/EU/Svět, šířka podle textu */
  .fakt .zal-radek .roleta .roleta-btn, .fakt .zal-radek .roleta.siroka .roleta-btn { min-width: 0; height: 35px; }
  /* zvolené středisko modře jako zvolená volba vedle (s DPH, Vše) — je vždycky něco vybrané */
  .fakt .roleta:has(select.stred-filtr) .roleta-btn, .fakt .roleta:has(select.stred-filtr) .roleta-sip { color: var(--blue); }
  .fakt .fplocha .pil { font-size: 12.5px; padding: 3px 9px; }
  /* v hlavičce dokladu má pilulka stavu i řádek „odesláno …" stejnou velikost */
  .fakt .hlava .pil, .fakt .hlava .pz { font-size: 13px; }
  .fakt .fplocha .info { font-size: 13.5px; }
  .fakt .fplocha .cteni { font-size: 14.5px; }
  .fakt .fplocha .cteni > span { font-size: 14px; }
  .fakt .fplocha .mriz > label { font-size: 14px; }
  .fakt .fplocha .soucty { font-size: 15px; }
  .fakt .fplocha .soucty .soucet { font-size: 20px; }
  .fakt .fplocha .hist div { font-size: 14px; }
  .fakt .fplocha .hist .kdy { width: 140px; }
  /* Dlaždice zarovnané doprava — čísla se čtou od poslední číslice, takže se tak dají
     porovnat mezi sebou; popisek je nad nimi zarovnaný stejně, ať to nedrhne. */
  .fakt .fplocha .card { text-align: right; }
  .fakt .fplocha .card .lbl { font-size: 12px; }
  .fakt .fplocha .card .val { font-size: 25px; }
  .fakt .fplocha .card .sub { font-size: 13px; }
  /* Počet dokladů stojí vlevo na řádku s nadpisem dlaždice, ne pod částkou — dlaždice je
     o řádek nižší a tabulka pod ní začíná výš (na 13–14" displeji byla až od půlky). */
  .fakt .fplocha .card { display: grid; grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "sub lbl" "val val"; align-items: baseline; column-gap: 10px; }
  .fakt .fplocha .card .lbl { grid-area: lbl; }
  .fakt .fplocha .card .sub { grid-area: sub; text-align: left; margin-top: 0; white-space: nowrap; }
  .fakt .fplocha .card .val { grid-area: val; }
  .fakt .fplocha button.btn, .fakt .fvzd button.btn, .fakt .fplocha button.btn.primary, .fakt .fvzd button.btn.primary {
    font-size: 14px; letter-spacing: .6px; }
  .fakt .fplocha button.btn.mini { font-size: 12px; }
  /* tlačítko s ikonou — svg místo znaku, ať vypadá stejně na Macu i ve Windows */
  .fakt .btn.s-ikonou { display: inline-flex; align-items: center; gap: 7px; }
  .fakt .btn.s-ikonou svg { width: 16px; height: 16px; }
  .fakt .btn.s-ikonou.kolo svg { width: 19px; height: 19px; stroke-width: 1.7; }
  .fakt .fplocha .btn-undo { font-size: 13.5px; }
  /* ---- Přijaté doklady: tabulka bez vodorovného posuvníku — dodavatel a popis si dělí
     zbylé místo a zkracují se třemi tečkami ---- */
  .fakt table.prij-seznam { table-layout: fixed; min-width: 0; }
  .fakt table.prij-seznam td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fakt table.prij-seznam td.stav-b { text-overflow: clip; }
  .fakt table.prij-seznam td.popis-b { max-width: none; }
  .fakt table.prij-seznam td.sekce-b { color: #3f465e; }
  .fakt table.prij-seznam td.firma { color: #2f6bd8; }
  .prij-legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 10px 2px 0; }
  .prij-legenda span { display: inline-flex; align-items: center; gap: 5px; }
  .prij-legenda .tecka { width: 11px; height: 11px; }
  /* detail dokladu */
  .fakt .modal.prij-detail { width: 760px; max-width: calc(100vw - 32px); }
  .fakt .modal.prij-detail { padding: 22px 26px; border-radius: 18px; }
  /* náhled PDF z wflow vpravo v detailu — okno se rozšíří jen u dokladu, který ve wflow je */
  .prij-dva { display: block; }
  .fakt .modal.prij-detail.s-nahledem { width: 1130px; }
  .prij-detail.s-nahledem .prij-dva { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
  .prij-nahled { padding: 12px; background: #f4f6fb; border-radius: 14px; }
  .prij-nahled-h { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 8px; }
  .prij-stranka { position: relative; display: block; width: 100%; height: 360px; padding: 0; border: 1px solid #dde2ee; border-radius: 6px;
    background: #fff; cursor: zoom-in; overflow: hidden; font: inherit; }
  .prij-stranka canvas { display: block; width: 100%; height: auto; }
  .prij-stranka-stav { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; padding: 12px; }
  /* `display: grid` výš by atribut hidden přebilo a „Načítám…“ by zůstalo přes hotový náhled */
  .prij-stranka-stav[hidden] { display: none; }
  .prij-lupa { position: absolute; right: 8px; bottom: 8px; background: rgba(29,33,54,.78); color: #fff; font-size: 12px; font-weight: 700;
    padding: 4px 9px; border-radius: 7px; }
  /* řádek s názvem souboru má místo vyhrazené předem — doplní se až po načtení a okno by povyrostlo a poskočilo */
  .prij-soubor { font-size: 12.5px; color: var(--muted); margin: 8px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-height: 15px; line-height: 15px; }
  .prij-nahled-akce { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .prij-nahled-akce .btn { justify-content: center; }
  .prij-nahled .jen-mob { display: none; }
  /* okno s PDF (PDF.js): stránky pod sebou na šedé ploše, přibližování − / + */
  #pdfOkno { z-index: 120; }
  .fakt .modal.pdf-prohlizec { width: 1000px; max-width: calc(100vw - 32px); max-height: 94vh; position: relative;
    display: flex; flex-direction: column; overflow: hidden; padding: 22px 26px; border-radius: 18px; }
  .fakt .modal.pdf-prohlizec h3 { font-size: 20px; margin: 0 44px 10px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pdf-podtitul { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 6px; }
  .pdf-lista { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; flex: 0 0 auto; }
  .pdf-prilohy { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
  .pdf-prilohy button { height: 32px; max-width: 260px; padding: 0 12px; border-radius: 9px; border: 1px solid #d7dced; background: #fff;
    font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pdf-prilohy button.on { background: var(--blue); border-color: var(--blue); color: #fff; }
  .pdf-prilohy small { opacity: .8; font-weight: 600; margin-left: 4px; }
  .pdf-pocet { margin-left: auto; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
  .pdf-zoom { display: flex; margin-left: 12px; flex: 0 0 auto; }
  .pdf-zoom button { height: 32px; min-width: 34px; padding: 0 10px; border: 1px solid #d7dced; background: #fff; font: inherit;
    font-size: 14px; font-weight: 700; cursor: pointer; margin-left: -1px; color: var(--text); }
  .pdf-zoom button:first-child { border-radius: 9px 0 0 9px; margin-left: 0; }
  .pdf-zoom button:last-child { border-radius: 0 9px 9px 0; font-size: 13px; font-weight: 600; }
  .pdf-zoom button:hover { background: #f4f6fb; }
  .pdf-zoom .pdf-zoom-hod { min-width: 64px; font-variant-numeric: tabular-nums; }
  .pdf-plocha { flex: 1 1 auto; min-height: 300px; height: 70vh; overflow: auto; background: #525659; border-radius: 10px; padding: 24px;
    display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .pdf-plocha canvas, .pdf-plocha img { display: block; background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.35); flex: 0 0 auto; }
  .pdf-plocha .pdf-strana { position: relative; flex: 0 0 auto; }
  /* textová vrstva PDF.js: průhledný text přes plátno, jde označit a zkopírovat (pravidla z pdf_viewer.css 3.11) */
  .textLayer { position: absolute; inset: 0; overflow: hidden; line-height: 1; text-align: initial; z-index: 3;
    -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0;
    user-select: text; -webkit-user-select: text; }
  .textLayer span, .textLayer br { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
  .textLayer span.markedContent { top: 0; height: 0; }
  .textLayer ::selection { background: rgba(0, 90, 255, .3); }
  .textLayer br::selection { background: transparent; }
  .fakt #vytezPlocha .rv-stranka .textLayer { user-select: text; -webkit-user-select: text; }
  .pdf-plocha .pdf-hlaska { margin: auto; color: #e8eaf0; font-size: 14px; text-align: center; max-width: 420px; line-height: 1.5; }
  .pdf-plocha .pdf-hlaska .btn { margin-top: 12px; }
  .fakt .modal.pdf-prohlizec .actions { flex: 0 0 auto; margin-top: 16px; }
  .pdf-prohlizec .actions .pdf-vlevo { margin-right: auto; }
  /* oko = náhled PDF v řádku; prázdné místo u dokladu bez PDF, ať ostatní ikony zůstanou pod sebou */
  .ik-oko { width: 1em; height: 1em; vertical-align: -0.14em; }
  .btn-del.btn-oko:hover { color: #2f6bd8; background: #eaf1fd; }
  .chk-cell .oko-misto { display: inline-block; width: 25px; flex: 0 0 auto; }
  /* Úhrady: řádek bez PDF drží místo po oku, ať tužka, Vrátit a koš stojí pod sebou */
  .paid-row .oko-misto { display: inline-block; vertical-align: middle; width: 31px; }
  /* Úhrady: úzké sloupce Účet a Prostř. — zkratka účtu (celé číslo v bublině) a prostředků */
  .ucet-zk { font-size: 12px; font-weight: 700; color: #5b637d; cursor: default; }
  #paidList thead th.th-uzky { padding-left: 6px; padding-right: 2px; white-space: nowrap; }
  #paidList thead th.th-uzky .arr { margin-left: 1px; }
  /* štítek prostředků ve sloupci Cena přijatých dokladů — vlevo, částka zůstává zarovnaná doprava */
  .pr-zk { float: left; display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .3px; line-height: 16px;
    padding: 0 6px; border-radius: 6px; margin-top: 1px; border: 1px solid transparent; cursor: default; }
  .pr-zk.in { background: #e8effd; color: #1d4fd8; border-color: #bccdf8; }
  .pr-zk.do { background: #e7f8ee; color: #067647; border-color: #b4e5c8; }
  .pr-zk.uv { background: #fff2e0; color: #b54708; border-color: #f5cf9b; }
  .pr-zk.ji { background: #f1f2f6; color: #3f465e; border-color: #d7dbe6; }
  .rv-pozn .pr-zk { float: none; margin: 0 2px; }
  .prostr-pil { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 12px; font-weight: 700;
    background: #e3f5ec; color: #17845c; white-space: nowrap; cursor: default; }
  .prostr-pil.investice { background: #efe7fd; color: #6b3fc4; }
  .prostr-pil.uver, .prostr-pil.jine { background: #eef1f8; color: #5b637d; }
  input.pay-filtr[data-payf="ucet"], input.pay-filtr[data-payf="prostr"] { min-width: 0 !important; width: 100% !important;
    padding-left: 5px !important; padding-right: 3px !important; }
  @media screen and (max-width: 760px) {
    .fakt .modal.prij-detail.s-nahledem { width: auto; }
    .prij-detail.s-nahledem .prij-dva { display: block; }
    .prij-nahled { background: none; padding: 0; margin-top: 14px; }
    .prij-nahled-h, .prij-stranka, .prij-soubor, .prij-nahled .jen-pc { display: none; }
    .prij-nahled .jen-mob { display: inline; }
    #pdfOkno { padding: 0; align-items: stretch; }
    .fakt .modal.pdf-prohlizec { width: 100vw !important; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; padding: 14px; margin: 0; }
    .pdf-lista { flex-wrap: wrap; } .pdf-pocet { display: none; } .pdf-zoom { margin-left: auto; }
    .pdf-zoom button:last-child { display: none; }
    .pdf-zoom button[data-pdfzoom="+"] { border-radius: 0 9px 9px 0; }
    .pdf-plocha { height: auto; padding: 10px; }
    .pdf-prohlizec .actions .pdf-vlevo { display: none; }
  }
  .fakt .modal.prij-detail h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 21px; margin: 0; }
  .prij-detail .stav-pil { font-size: 12px; font-weight: 750; padding: 3px 10px; border-radius: 20px; letter-spacing: 0; text-transform: none; }
  .prij-kachle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
  .prij-kachle > div { border-radius: 12px; padding: 10px 14px; }
  .prij-kachle > div > div { padding: 10px 14px; }      /* 1:1 s mockupem: odsazené jsou i popisek a částka */
  .prij-kachle .l { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; opacity: .75; }
  .prij-kachle .v { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .prij-kachle .k1 { background: #f4f6fb; }
  .prij-kachle .k2 { background: var(--green-bg); color: var(--green); }
  .prij-kachle .k3 { background: var(--orange-bg); color: var(--orange); }
  /* údaje ve třech barevných blocích podle účelu (varianta A z nastroje/mockupy/prijaty-detail-barvy.html):
     Dodavatel fialově, Termíny oranžově, Zařazení (roletky, které jde změnit) modře přes celou šířku, Popis šedě */
  .prij-bloky { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; font-size: 13.5px; }
  .prij-bloky .pb { border-radius: 12px; padding: 12px 14px; min-width: 0; }
  .prij-bloky .pb-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; }
  .prij-bloky .pb-h i { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .8; }
  .prij-bloky .pb-dod { background: #f3f0fb; } .prij-bloky .pb-dod .pb-h { color: #6b4fbb; }
  .prij-bloky .pb-ter { background: #fff6e9; } .prij-bloky .pb-ter .pb-h { color: #b26a00; }
  .prij-bloky .pb-zar { grid-column: 1 / -1; background: #eaf1fd; } .prij-bloky .pb-zar .pb-h { color: #2f6bd8; }
  .prij-bloky .pb-pop { grid-column: 1 / -1; background: #f4f6fb; display: flex; gap: 14px; align-items: baseline; }
  .prij-bloky .pb-pop .l + span { font-weight: 600; overflow-wrap: anywhere; }
  .prij-bloky .pb-jm { margin-bottom: 8px; }
  .prij-bloky .dod-v { font-size: 17px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
  .prij-bloky .pb-ud { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; align-items: baseline; }
  .prij-bloky .pb-ud .l + span { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
  .prij-bloky .l { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
  .prij-bloky .mu { color: var(--muted); font-weight: 500; }
  .prij-bloky .pb-trojice { display: grid; gap: 12px; }
  .prij-bloky .pb-trojice > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .fakt .modal.fvzd .prij-bloky select.prij-sekce-vyber { width: 100%; min-width: 0; margin-left: 0; }
  /* detail přijatého dokladu — varianta C (nastroje/mockupy/prijaty-detail-prehledne.html) */
  .prij-c { font-size: 13.5px; margin-top: 4px; }
  .prij-c .mu { color: var(--muted); font-weight: 500; }
  .prij-c .l { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
  .prij-c-hl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
  .prij-c-hl .dod-v { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
  .prij-c #prijDodavatel { position: relative; }
  .prij-c #prijDodavatel .ikona-btn { flex: 0 0 auto; padding: 2px; }
  .prij-c #prijDodavatel .ikona-btn svg { width: 16px; height: 16px; }
  .prij-c #prijDodSuggest { position: absolute; left: -11px; right: -11px; top: calc(100% + 4px); z-index: 5; font-size: 13.5px; }
  .prij-c-drobne { display: grid; grid-template-columns: 110px 1fr; gap: 14px; font-weight: 600; margin-bottom: 14px; }
  .prij-c-drobne .prij-popis { display: inline-flex; align-items: center; gap: 6px; }
  .prij-c-drobne .prij-popis .fakt-ikona-btn, .prij-c-drobne .prij-popis button { flex: none; }
  .prij-c-drobne small { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 2px; }
  .prij-c-retez { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
  .prij-c-retez.s-sipkami { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
  .prij-c-krok { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: 12px; border: 1.5px solid #e3e7f0;
    background: #fff; text-decoration: none; color: inherit; min-width: 0; }
  .prij-c-krok small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
  .prij-c-krok b { font-size: 16px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
  .prij-c-krok > span { font-weight: 600; font-variant-numeric: tabular-nums; }
  .prij-c-krok em { font-style: normal; font-size: 12.5px; color: var(--muted); }
  .prij-c-krok em .ok, .prij-c-krok.hotovo em { color: var(--green); font-weight: 700; }
  .prij-c-krok em .pozde, .prij-c-krok em.pozde, .prij-c-krok .pozde { color: var(--red); font-weight: 700; }
  .prij-c-krok.hotovo { background: var(--green-bg); border-color: #cfe9d9; }
  a.prij-c-krok { cursor: pointer; } a.prij-c-krok:hover { border-color: var(--blue); }
  .prij-c-krok.tento { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(47,107,216,.15); }
  .prij-c-krok.ceka { border-style: dashed; color: var(--muted); } .prij-c-krok.ceka b { color: var(--muted); }
  .prij-c-krok.dluh { background: var(--orange-bg); border-color: #f5dcc0; } .prij-c-krok.dluh b { color: var(--orange); }
  .prij-c-sipka { align-self: center; color: var(--muted); font-size: 20px; }
  .prij-c-zar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #f4f6fb; border-radius: 12px; }
  .prij-c-zar .l { margin-right: 6px; }
  .fakt .modal.fvzd .prij-c-zar select.prij-sekce-vyber, .fakt .modal.fvzd .prij-c-vazba select.prij-sekce-vyber {
    min-width: 0; width: auto; flex: 1 1 0; margin-left: 0; }
  .prij-c-vazba { display: flex; align-items: center; gap: 8px; padding: 6px 14px 0; }
  .prij-c-vazba .l { margin-right: 6px; }
  .fakt .modal.fvzd .prij-c-vazba select.prij-sekce-vyber { flex: 0 1 340px; }
  @media screen and (max-width: 760px) {
    .prij-c-retez, .prij-c-retez.s-sipkami { grid-template-columns: minmax(0, 1fr); }
    .prij-c-sipka { transform: rotate(90deg); justify-self: center; }
    .prij-c-zar { flex-wrap: wrap; } .fakt .modal.fvzd .prij-c-zar select.prij-sekce-vyber { flex: 1 1 100%; }
    .prij-c-drobne { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  }
  /* vazba záloha ↔ daňový doklad k přijaté platbě (blok přes celou šířku, šedý jako popis) */
  .prij-bloky .pb-vaz { grid-column: 1 / -1; background: #f4f6fb; padding: 7px 14px; }
  .prij-bloky .pb-vaz .pb-h { color: #4a5272; }
  .prij-bloky .pb-vaz-radek { display: flex; align-items: center; gap: 14px; min-height: 30px; }
  .prij-bloky .pb-vaz-radek > span { white-space: nowrap; }
  .prij-bloky .pb-vaz-radek > span:not(.l) { font-weight: 600; }
  /* roletka krátká, ať se blok vejde na jeden řádek — dlouhé volby (číslo · dodavatel · částka) jsou až v nabídce */
  .fakt .modal.fvzd .prij-bloky .pb-vaz-radek select.prij-sekce-vyber { margin-left: auto; width: 170px; min-width: 0; flex: 0 0 170px; padding-top: 3px; padding-bottom: 3px; }
  .prij-vazba-odkaz { color: var(--blue); cursor: pointer; font-weight: 700; }
  .prij-vazba-odkaz:hover { text-decoration: underline; }
  .prij-vazba-chybi { color: var(--orange); font-weight: 700; }
  .prij-vazba-ikona { display: inline-flex; margin-left: 5px; color: var(--blue); vertical-align: -2px; }
  .prij-vazba-ikona svg { width: 14px; height: 14px; }
  .prij-vazba-ikona.chybi { color: var(--orange); }
  .prij-term { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 10px; margin-left: 4px; }
  .prij-term.ok { color: var(--green); background: var(--green-bg); }
  .prij-term.pozde { color: var(--red); background: #fdecec; }
  /* dlaždice Bez DPH a se čtyřmi dlaždicemi (zbývá) menší částka, ať se vejde */
  .prij-kachle .kb { background: #eef1f8; color: #4a5272; }
  .prij-kachle.ctyri .v { font-size: 17px; }
  /* oprava dodavatele: tužka hned za jménem, pole se stejným písmem a textem na místě jména */
  .prij-bloky #prijDodavatel { position: relative; display: flex; align-items: center; gap: 4px; }
  .prij-bloky #prijDodavatel .ikona-btn { flex: 0 0 auto; padding: 2px; }
  .prij-bloky #prijDodavatel .ikona-btn svg { width: 16px; height: 16px; }
  .fakt .modal.fvzd input.prij-dod-pole { width: calc(100% + 11px); margin-left: -11px; padding: 4px 10px 4px 9.5px;
    font-size: 16px; font-weight: 600; color: var(--text); background: #fff; border: 1.5px solid var(--blue); border-radius: 9px; }
  .prij-bloky #prijDodSuggest { position: absolute; left: -11px; right: -11px; top: calc(100% + 4px); z-index: 5; font-size: 13.5px; }
  .prij-h4 { margin: 20px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: #3f465e; }
  table.prij-uhr { width: 100%; min-width: 0; border-collapse: collapse; }
  table.prij-uhr th { font-size: 11px; background: #f7f8fb; padding: 7px 8px; text-align: left; color: #3f465e; text-transform: uppercase; }
  table.prij-uhr th.num, table.prij-uhr td.num { text-align: right; }
  table.prij-uhr td { padding: 8px; border-bottom: 1px solid #f0f1f5; }
  /* úhrady v zeleném rámečku se zelenou hlavičkou (varianta A) */
  .prij-uhr-obal { border: 1px solid #dcefe3; border-radius: 12px; overflow: hidden; }
  .prij-uhr-obal table.prij-uhr th { background: var(--green-bg); color: var(--green); }
  .prij-uhr-obal table.prij-uhr tr:last-child td { border-bottom: 0; }
  .fakt .modal.prij-detail .actions { margin-top: 30px; }
  /* výsledek načtení z wflow */
  .fakt .modal.prij-vysl { width: 700px; max-width: calc(100vw - 32px); padding: 22px 26px; border-radius: 18px; }
  .fakt .modal.prij-vysl h3 { font-size: 21px; margin: 0; }
  .prij-vysl-kachle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 6px; }
  .prij-vysl-kachle > div { border-radius: 12px; padding: 10px 14px; }
  .prij-vysl-kachle .l { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; opacity: .75; }
  .prij-vysl-kachle .v { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .prij-vysl-kachle .k1 { background: #f4f6fb; }
  .prij-vysl-kachle .k2 { background: var(--green-bg); color: var(--green); }
  .prij-vysl-kachle .k3 { background: var(--orange-bg); color: var(--orange); }
  .prij-vysl-blok { margin-top: 16px; }
  .prij-vysl-blok h4 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: #3f465e; }
  /* pevné sloupce ve všech třech seznamech: Číslo · Dodavatel · Druh/Sekce · Vystaveno · Částka */
  .prij-vysl-radek { display: grid; grid-template-columns: 96px minmax(0, 1fr) 108px 84px 112px; gap: 10px;
    align-items: center; padding: 7px 0; border-bottom: 1px solid #f0f1f5; font-size: 14px; }
  .prij-vysl-seznam .prij-vysl-radek:last-child { border-bottom: 0; }
  .prij-vysl-radek.hl { padding: 0 0 5px; border-bottom: 1px solid #e3e6ee; font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
  .prij-vysl-radek .cis { font-weight: 700; color: #2f6bd8; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .prij-vysl-radek .jm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .prij-vysl-radek .tr { overflow: hidden; }
  .prij-vysl-radek .kc { font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .prij-vysl-radek.hl .kc { font-weight: 800; }
  .prij-vysl-radek .dat { color: var(--muted); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .prij-vysl-sekce { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 20px; background: #eef1f8; color: #3f465e; vertical-align: middle; }
  .prij-vysl-sekce.chybi { background: var(--orange-bg); color: var(--orange); }
  .prij-vysl-blok.ceka .jm { font-weight: 500; }
  /* seznam roluje — hlavička dostane stejné místo pro posuvník, jinak se sloupce rozjedou */
  .prij-vysl-seznam { max-height: 240px; overflow-y: auto; scrollbar-gutter: stable; }
  .prij-vysl-radek.hl { overflow-y: hidden; scrollbar-gutter: stable; }
  .prij-vysl-info { margin-top: 14px; font-size: 13px; color: var(--muted); }
  .prij-vysl-prazdno { color: var(--muted); font-size: 14px; padding: 6px 0; }
  .fwp-stav { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 13.5px; font-weight: 600;
    color: var(--muted); font-variant-numeric: tabular-nums; }
  .fwp-pruh { flex: 1 1 auto; height: 8px; border-radius: 4px; background: #eef1f8; overflow: hidden; }
  .fwp-pruh i { display: block; height: 100%; width: 0; background: var(--blue); border-radius: 4px; transition: width .25s; }
  .prij-vysl-radek.fwp-radek { grid-template-columns: 110px minmax(0, 1fr) 190px; }
  .fwp-radek .st { text-align: right; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fwp-radek .st.ceka { color: var(--muted); font-weight: 500; }
  .fwp-radek .st.bezi { color: var(--blue); }
  .fwp-radek .st.ok { color: var(--green); }
  .fwp-radek .st.uz { color: #5b6478; }
  .fwp-radek .st.chyba { color: var(--red); }
  .fwp-radek .st.pozor { color: #c47a0b; }
  .fwp-zakazky { margin-top: 12px; text-align: left; }
  .fwp-zakazky .zk { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 10px; align-items: center;
    margin-top: 6px; }
  .fwp-zakazky .zk b { font-variant-numeric: tabular-nums; }
  .fwp-zakazky .zk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fwp-zakazky .zk button { padding: 4px 10px; font-size: 12px; }
  .fwp-radek.hl span:last-child { text-align: right; }
  @media screen and (max-width: 760px) { .prij-vysl-radek.fwp-radek { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: none; } }
  /* Historie e-mailů: stav doručení */
  .fakt .fem-stav { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 7px; padding: 2px 8px; white-space: nowrap; }
  .fakt .fem-stav.odeslano { background: #eef1f8; color: #5b637d; }
  .fakt .fem-stav.odmitnuto { background: var(--red-bg); color: var(--red); }
  /* Okno odeslání e-mailem: řádky Od / Komu / Kopie / Předmět jako v poštovním programu —
     popisek vlevo, pole zarovnané vlevo (obecné pravidlo dialogů Fakturantu zarovnává doprava) */
  .fakt .modal.fvzd.fml h3 { margin: 0 40px 2px 0; }
  .fakt .fml-souhrn { color: var(--muted); font-size: 13.5px; font-weight: 600; margin-bottom: 14px; }
  .fakt .fml-souhrn b { color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .fakt .fml-pole { border: 1.5px solid #e2e6f0; border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
  .fakt .fml-radek { display: grid; grid-template-columns: 78px 1fr; align-items: center; margin: 0;
    border-bottom: 1px solid #eceef4; padding: 0 0 0 14px; }
  .fakt .fml-radek:last-child { border-bottom: 0; }
  .fakt .modal.fvzd.fml .fml-radek > span { font-size: 13px; font-weight: 700; color: var(--muted); text-align: left; padding: 0; margin: 0; }
  .fakt .modal.fvzd.fml .fml-radek input { text-align: left; border: 0; border-radius: 0; background: transparent;
    padding: 11px 14px 11px 0; box-shadow: none; }
  .fakt .modal.fvzd.fml .fml-radek input:focus { background: transparent; box-shadow: none; }
  .fakt .fml-radek:focus-within { background: #f7f9fd; }
  .fakt .fml-od { padding: 11px 14px 11px 0; font-weight: 650; }
  .fakt .fml-priloha { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 12px 7px 9px;
    border: 1px solid #e2e6f0; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--text); background: #f7f9fd; }
  .fakt .fml-priloha svg { width: 20px; height: 20px; color: #d92d20; flex: 0 0 20px; }
  .fakt .fml-priloha small { color: var(--muted); font-weight: 500; }
  .fakt .fml-prubeh { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 11px 14px;
    border-radius: 10px; background: #eef2ff; color: #1e40cc; font-weight: 650; font-size: 14px; }
  .fakt .fml-prubeh[hidden] { display: none; }
  .fakt .fml-prubeh.hotovo { background: var(--green-bg); color: var(--green); }
  .fakt .fml-kolecko { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor;
    border-right-color: transparent; animation: fmlToc .8s linear infinite; flex: 0 0 18px; }
  .fakt .fml-prubeh.hotovo .fml-kolecko { animation: none; border: 0; }
  .fakt .fml-prubeh.hotovo .fml-kolecko::before { content: "✓"; font-weight: 800; font-size: 17px; line-height: 18px; }
  @keyframes fmlToc { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .fakt .fml-kolecko { animation-duration: 2.5s; } }
  .fakt .fml.odesila input, .fakt .fml.odesila textarea { opacity: .6; pointer-events: none; }
  .fakt .modal.fvzd.fml { max-height: 94vh; overflow-y: auto; }
  /* e-mail v okně vypadá jako ten, který dorazí (fakt_mail.html_dokladu) — text se píše rovnou v něm */
  .fakt .fml-mail { --barva: #2f6bd8; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; background: #fff;
    box-shadow: 0 1px 3px rgba(20, 25, 60, .06); }
  .fakt .fml-mail-pruh { height: 5px; background: var(--barva); }
  .fakt .fml-mail-firma { padding: 18px 26px 4px; font-size: 16px; font-weight: 800; color: #111827; }
  .fakt .modal.fvzd.fml .fml-mail-text { display: block; width: calc(100% - 32px); margin: 10px 16px 0; padding: 8px 10px;
    border: 1.5px dashed transparent; border-radius: 10px; background: transparent; text-align: left; font-size: 15px;
    line-height: 1.5; color: #1f2937; resize: none; overflow: hidden; min-height: 0; box-shadow: none; }
  .fakt .modal.fvzd.fml .fml-mail-text:hover { border-color: #d7dced; }
  .fakt .modal.fvzd.fml .fml-mail-text:focus { border-color: var(--barva); background: #fbfcfe; }
  .fakt .fml-mail-karta { margin: 10px 14px 0; background: #f7f8fb; border-radius: 12px; display: flex; align-items: center;
    gap: 10px; padding: 10px 16px 10px 18px; }
  .fakt .fml-mail-karta table { flex: 1 1 auto; min-width: 0; border-collapse: collapse; }
  .fakt .fml-mail-karta td { padding: 4px 0; background: none; border: 0; font-size: 13px; color: #6b7280; }
  .fakt .fml-mail-karta td + td { text-align: right; white-space: nowrap; color: #111827; font-weight: 600; font-size: 14px; }
  .fakt .fml-mail-karta td.velka { font-size: 19px; font-weight: 800; }
  .fakt .fml-mail-karta .qr { flex: 0 0 auto; text-align: center; font-size: 11px; color: #6b7280; }
  .fakt .fml-mail-karta .qr img { width: 104px; height: 104px; display: block; margin: 0 auto 4px; }
  .fakt .fml-mail-tlac { padding: 14px 26px 2px; }
  .fakt .fml-mail-tlac span { display: inline-block; background: var(--barva); color: var(--na-tlacitku, #fff); font-weight: 700; font-size: 14px;
    padding: 11px 18px; border-radius: 10px; }
  .fakt .fml-mail-tlac p { margin: 10px 0 0; font-size: 12.5px; color: #6b7280; }
  .fakt .fml-mail-tlac u { color: var(--odkaz, var(--barva)); }
  .fakt .fml-mail-pata { margin-top: 14px; padding: 12px 26px 12px; font-size: 12px; color: #9ca3af; border-top: 1px solid #f0f1f4; }
  .fakt .fmn .fmn-hlava { display: grid; gap: 4px; font-size: 13px; margin-bottom: 10px; }
  .fakt .fmn .fmn-hlava div { display: grid; grid-template-columns: 70px 1fr; }
  .fakt .fmn .fmn-hlava span { color: var(--muted); font-weight: 700; }
  .fakt .fmn .fmn-ram { width: 100%; min-height: 420px; max-height: 64vh; border: 1px solid #e2e6f0; border-radius: 12px; background: #f3f5f9; display: block; }
  .fakt .fmn { max-height: 92vh; overflow-y: auto; }
  .fakt .fem-stav.doruceno { background: var(--green-bg); color: var(--green); }
  .fakt .fo-text { white-space: pre-line; font-weight: 500; color: var(--text); }
  .fakt .fem-stav.chyba { background: var(--orange-bg); color: var(--orange); }
  .fakt .fem-info { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
  .vzor-auto-uvod { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
  @media screen and (max-width: 760px) { .prij-vysl-kachle .v { font-size: 20px; } .prij-vysl-kachle .l { font-size: 10px; }
    /* telefon: dodavatel a částka nahoře, číslo, druh a datum pod nimi */
    .prij-vysl-radek { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "jm jm kc" "cis tr dat"; row-gap: 2px; }
    .prij-vysl-radek .jm { grid-area: jm; } .prij-vysl-radek .kc { grid-area: kc; } .prij-vysl-radek .cis { grid-area: cis; }
    .prij-vysl-radek .tr { grid-area: tr; } .prij-vysl-radek .dat { grid-area: dat; text-align: right; }
    .prij-vysl-radek.hl { display: none; } }
  .fakt .modal.prij-detail .actions .prij-vlevo { margin-right: auto; }
  /* sekce v detailu — roletka zarovnaná textem se sousedními hodnotami */
  /* text roletky svisle pod hodnotami nad a pod ní: obecné `.fakt .modal.fvzd select` píše zprava
     doleva (direction: rtl), tady musí být zleva, a o rámeček + odsazení (1,5 + 9,5 px) posunutá vlevo */
  .fakt .modal.fvzd select.prij-sekce-vyber { direction: ltr; text-align: left; text-align-last: left; }
  .fakt .modal.fvzd select.prij-sekce-vyber { width: auto; min-width: 200px; margin-left: -11px; padding: 5px 30px 5px 9.5px;
    font-weight: 600; font-size: 13.5px; color: var(--text); border: 1.5px solid #dfe3ee; border-radius: 9px; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235b637d' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center; }
  .fakt .modal.fvzd select.prij-sekce-vyber:hover, .fakt .modal.fvzd select.prij-sekce-vyber:focus { border-color: var(--blue); outline: none; }
  #prijSekceOverlay { z-index: 60; }
  .prij-otazka { color: #3f465e; margin: 6px 0 12px; }
  /* obecné `.fakt .fvzd label` zarovnává popisky doprava a `.modal input` roztahuje pole na šířku */
  .fakt .fvzd label.prij-volba { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 0 0 8px;
    border: 1.5px solid #dfe3ee; border-radius: 10px; cursor: pointer; text-align: left; font-size: 13.5px; color: var(--text); }
  .fakt .fvzd label.prij-volba:has(input:checked) { border-color: var(--blue); background: #f5f7ff; }
  .fakt .modal.fvzd .prij-volba input { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; padding: 0;
    border: 0; background: none; accent-color: var(--blue); appearance: auto; }
  .prij-volba small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; font-weight: 400; }
  @media screen and (max-width: 760px) {
    .prij-bloky { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .prij-bloky .pb-trojice { grid-template-columns: minmax(0, 1fr) !important; gap: 8px; }
    .fakt .modal.fvzd select.prij-sekce-vyber { min-width: 0; max-width: calc(100% + 11px); direction: ltr; text-align: left; }
    /* dlaždice: celkem přes celou šířku, uhrazeno a zbývá vedle sebe */
    .prij-kachle { grid-template-columns: 1fr 1fr !important; gap: 8px; margin: 12px 0; }
    .prij-kachle > :first-child:nth-last-child(2n+1) { grid-column: 1 / -1; }   /* lichý počet: celkem přes celou šířku */
    .prij-kachle > div { padding: 8px 12px; }
    .prij-kachle > div > div { padding: 0; }
    .prij-kachle .v { font-size: 17px; white-space: nowrap; }
    /* tlačítka: úhrada nahoře přes celou šířku, pod ní Zavřít a Upravit */
    .fakt .modal.prij-detail .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
    .fakt .modal.prij-detail .actions .btn { white-space: nowrap; }
    #prijDetailPridat { grid-column: 1 / -1; order: -1; }
    #prijDetailWflow { grid-column: 1 / -1; order: 5; margin-right: 0; }
    .fakt .modal.prij-detail .actions .btn:only-child,
    .fakt .modal.prij-detail .actions:not(:has(#prijDetailUpravit:not([hidden]))) .btn { grid-column: 1 / -1; }
  }
  .fakt .fplocha .akce-b .btn-del { font-size: 16px; }
  .fakt .fplocha .popis-b { font-size: 14px; }
  /* ---- vlastní vytěžování: kontrola rozložená jako Rossum (předloha nastroje/mockupy/vytezovani.html) ---- */
  .fakt .rv-obal { display: flex; height: calc(100vh - 96px); min-height: 520px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #fff; position: relative; }
  /* spojnice pole vlevo → místo na dokladu (jako v Rossumu) */
  .fakt .rv-spoj { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; opacity: 0; transition: opacity .12s; overflow: visible; }
  .fakt .rv-spoj.vidim { opacity: 1; }
  .fakt .rv-spoj path { fill: none; stroke: #2f5bff; stroke-width: 1.6; }
  .fakt .rv-spoj circle { fill: #fff; stroke: #2f5bff; stroke-width: 1.8; }
  .fakt .rv-spoj circle.konec { fill: #2f5bff; }
  .fakt .rv-levy { width: var(--rv-sirka, 460px); min-width: 340px; max-width: 70%; flex: 0 0 auto; display: flex; flex-direction: column; background: #f6f8fd; }
  .fakt .rv-hlava { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: #fff; }
  .fakt .rv-hlava > b { font-size: 17px; }
  .fakt .rv-cetl { flex: 0 0 100%; font-size: 12.5px; color: #5b637d; }
  .fakt .rv-pole { flex: 1 1 auto; min-height: 0; overflow: auto; overflow-x: hidden; padding-bottom: 240px; }   /* rezerva: poslední roletka (Sekce) jde vyjet výš, nabídka nenarazí na spodek obrazovky */
  .fakt .rv-sekce { padding: 4px 0 8px; border-bottom: 1px solid var(--border); }
  .fakt .rv-sekce > h3 { margin: 0; padding: 12px 14px 6px; font-size: 14.5px; display: flex; align-items: center; gap: 6px; }
  .fakt .rv-pocet { font-size: 11px; background: #e8eeff; color: #2f5bff; border-radius: 7px; padding: 1px 7px; }
  .fakt .rv-radek { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; align-items: start; padding: 2px 14px; }
  .fakt .rv-lbl { font-size: 13px; color: #5b637d; font-weight: 600; line-height: 1.2; padding-top: 9px; }
  .fakt .rv-zdroj { display: block; font-size: 10.5px; font-weight: 700; margin-top: 1px; line-height: 1.1; }
  .fakt .rv-cetl .rv-zdroj, .fakt .vytez-seznam .rv-zdroj { display: inline; }
  .fakt .rv-zdroj.isdoc, .fakt .rv-zdroj.ok { color: #067647; } .fakt .rv-zdroj.ai { color: #5b3fc0; }
  .fakt .rv-zdroj.nauceno { color: #96620a; } .fakt .rv-zdroj.sed { color: #8a90a6; } .fakt .rv-zdroj.pozor { color: #b35a00; }
  /* všechna pole levého sloupce stejně nízká (34 px) — hustší řádky jako v Rossumu */
  .fakt .fplocha .rv-hod input, .fakt .fplocha .rv-hod select { width: 100%; height: 34px !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 14px !important; }
  .fakt .rv-hod .roleta-btn { height: 34px; }
  .fakt .rv-radek.nejiste input, .fakt .rv-radek.nejiste select { background: #fff7d6; border-color: #e0b400; }
  .fakt .rv-celkem { font-weight: 800; text-align: right; }
  .fakt .fplocha .rv-hod input.rv-celkem { font-size: 21px !important; font-weight: 800; color: var(--text); }   /* velká částka jako v ostatních dialozích, box stejně vysoký (34 px) */
  .fakt .rv-pozn { margin: 4px 14px 6px 168px; font-size: 12px; line-height: 1.4; color: #5b637d; }
  .fakt .rv-pozn.ok { color: #067647; } .fakt .rv-pozn.pozor { color: #8a4b00; }
  /* stejný doklad už v appce — červený rámeček nahoře v kontrole */
  .fakt .rv-duplicita { margin: 4px 0 12px; padding: 10px 14px; border: 1.5px solid #f5b5b0; background: #fef3f2;
    border-radius: 10px; font-size: 13px; color: #912018; line-height: 1.45; }
  .fakt .rv-duplicita b { display: block; font-size: 13.5px; margin-bottom: 4px; }
  .fakt .rv-duplicita ul { margin: 0 0 6px; padding-left: 18px; }
  .fakt .rv-duplicita a { color: var(--blue); font-weight: 700; cursor: pointer; }
  .fakt .rv-duplicita .cerv { color: #d92d20; font-weight: 650; } .fakt .rv-duplicita .oran { color: #b54708; font-weight: 650; }
  .fakt .rv-duplicita > span { color: #6b4a46; font-size: 12px; }
  .fakt .fplocha table.rv-tab { width: calc(100% - 28px) !important; margin: 6px 14px; border-collapse: collapse; min-width: 0; font-size: 13px; background: #fff; border-radius: 8px; overflow: hidden; table-layout: fixed; }
  .fakt .rv-tab th { font-size: 11.5px; color: #5b637d; text-align: left; padding: 6px 8px; background: #eef1f8; }
  .fakt .rv-tab td { padding: 4px 6px; border-top: 1px solid var(--border); }
  .fakt .rv-tab .num { text-align: right; white-space: nowrap; }
  .fakt .rv-tab:not(.rv-pol) th:nth-child(1) { width: 72px; }
  .fakt .rv-pol th:nth-child(2) { width: 56px; } .fakt .rv-pol th:nth-child(3) { width: 96px; } .fakt .rv-pol th:nth-child(4) { width: 70px; } .fakt .rv-pol th:nth-child(5) { width: 34px; }
  .fakt .fplocha .rv-pol input, .fakt .fplocha .rv-pol select { width: 100%; height: 30px !important; min-height: 0 !important; padding: 0 6px !important; font-size: 13px !important; }
  .fakt .rv-pol input.num { text-align: right; }
  .fakt .rv-akce { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border); background: #fff; }
  .fakt .rv-akce .roste { flex: 1; } .fakt .rv-akce .btn { white-space: nowrap; }
  .fakt .rv-delitko { flex: 0 0 8px; cursor: col-resize; background: #e3e7f2; position: relative; }
  .fakt .rv-delitko:hover, .fakt .rv-delitko.tah { background: #b9c3e0; }
  .fakt .rv-delitko::after { content: ""; position: absolute; left: 3px; top: 50%; width: 2px; height: 36px; margin-top: -18px; border-radius: 2px; background: #8a90a6; }
  .fakt .rv-pravy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #3b4054; }
  .fakt .rv-pravy .vt-lista { display: flex; align-items: center; gap: 8px; color: #e8eaf3; padding: 8px 12px; font-size: 13px; }
  .fakt .rv-pravy .vt-lista .roste { flex: 1; }
  .fakt .rv-pravy .vt-lista > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .fakt .rv-pravy .vt-lista .btn { padding: 4px 9px; min-height: 0; height: 30px; white-space: nowrap; }
  .fakt .rv-svitek { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 16px 16px; }
  .fakt .rv-stranka { max-width: 1100px; margin: 0 auto 12px; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.35); width: fit-content; }
  .fakt .rv-stranka img, .fakt .rv-stranka canvas { display: block; max-width: 100%; }
  /* zvýraznění přečtených míst na dokladu: zeleně všechna, žlutě pole, ve kterém se stojí */
  .fakt .rv-stranka { position: relative; }
  .fakt #vytezPlocha .rv-stranka, .fakt #vytezPlocha .rv-stranka canvas { max-width: none; }   /* zmenšené plátno by obdélníky rozhodilo */
  .fakt #vytezPlocha .rv-stranka.vt-obrazek { max-width: 100%; }                                       /* fotka: obdélníky jsou v procentech, zmenšit se smí */
  .fakt #vytezPlocha .rv-stranka.vt-obrazek img { max-width: 100%; }
  .fakt .vt-zvyr { position: absolute; background: rgba(23, 163, 86, .2); border-radius: 3px; cursor: pointer;
    mix-blend-mode: multiply; transition: background .12s; }
  .fakt .vt-zvyr:hover { background: rgba(23, 163, 86, .32); }
  .fakt .vt-zvyr.aktivni { background: rgb(255, 214, 0); box-shadow: 0 0 0 2px rgb(235, 170, 0); z-index: 2; }   /* multiply: text zůstane čitelný */
  .fakt .vt-zvyr.pod-aktivnim { visibility: hidden; }
  .fakt .vt-zvyr.nahrada:not(.aktivni) { visibility: hidden; }
  .fakt .rv-pole select[data-vpole="mena"] { width: 110px; }   /* měna je krátký údaj — jen kód a šipka */
  /* datum v kontrole: píše se do pole, kalendář otevírá ikonka u pravého okraje */
  .fakt .rv-datum { position: relative; display: block; }
  .fakt .rv-datum input { width: 100%; padding-right: 40px; }
  .fakt .rv-datum .rv-kal-btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px;
    min-width: 0; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; padding: 0; border-radius: 6px; }
  .fakt .rv-datum .rv-kal-btn:hover { color: var(--blue); background: #eef2fd; }
  /* úprava rámečku v kontrole: přesun za plochu, roztažení za úchyty, kreslení tažením po stránce */
  .fakt .vt-zvyr.aktivni:has(.vt-uchyt) { cursor: move; }
  .fakt .vt-zvyr.tahnu { transition: none; }
  .fakt .vt-zvyr.cte { animation: vtCte 1s ease-in-out infinite; }
  @keyframes vtCte { 50% { opacity: .45; } }
  .fakt .vt-uchyt { position: absolute; width: 8px; height: 8px; background: #2f5bff; border-radius: 2px; }
  .fakt .vt-uchyt.u-n, .fakt .vt-uchyt.u-s { left: calc(50% - 4px); cursor: ns-resize; }
  .fakt .vt-uchyt.u-e, .fakt .vt-uchyt.u-w { top: calc(50% - 4px); cursor: ew-resize; }
  .fakt .vt-uchyt.u-n, .fakt .vt-uchyt.u-ne, .fakt .vt-uchyt.u-nw { top: -5px; }
  .fakt .vt-uchyt.u-s, .fakt .vt-uchyt.u-se, .fakt .vt-uchyt.u-sw { bottom: -5px; }
  .fakt .vt-uchyt.u-e, .fakt .vt-uchyt.u-ne, .fakt .vt-uchyt.u-se { right: -5px; }
  .fakt .vt-uchyt.u-w, .fakt .vt-uchyt.u-nw, .fakt .vt-uchyt.u-sw { left: -5px; }
  .fakt .vt-uchyt.u-ne, .fakt .vt-uchyt.u-sw { cursor: nesw-resize; }
  .fakt .vt-uchyt.u-nw, .fakt .vt-uchyt.u-se { cursor: nwse-resize; }
  .fakt #vytezPlocha .rv-stranka { user-select: none; }   /* náhradní místo popisu jen žlutě, zelené už má položka */
  .fakt .rv-svitek .pdf-hlaska { color: #e8eaf3; padding: 30px; text-align: center; }
  /* dialog nahrání dokladů (předloha vytezovani.html, obrazovka 2) */
  .fakt .modal.vt-nahr { width: 720px; max-width: calc(100vw - 32px); max-height: 92vh; display: flex; flex-direction: column; position: relative; }
  .fakt .vt-drop { border: 2px dashed #b9c1da; border-radius: 14px; background: #f7f9fe; padding: 26px; text-align: center;
    display: flex; flex-direction: column; gap: 6px; align-items: center; cursor: pointer; transition: background .15s, border-color .15s; }
  .fakt .vt-drop:hover, .fakt .vt-drop:focus-visible { border-color: #2f5bff; outline: none; }
  .fakt .vt-drop.nad { background: #e8eeff; border-color: #2f5bff; }
  .fakt .vt-drop-ikona { font-size: 28px; color: #2f5bff; line-height: 1; }
  .fakt .vt-drop a { color: #2f5bff; font-weight: 700; }
  .fakt .vt-drop .mu { color: var(--muted); font-size: 13px; }
  .fakt .vt-fronta-obal { overflow-y: auto; min-height: 0; margin-top: 14px; }
  .fakt .vt-fronta-obal:empty, .fakt .vt-fronta:empty { display: none; }
  .fakt .vt-fronta { width: 100%; border-collapse: collapse; min-width: 0; table-layout: fixed; }
  .fakt .vt-fronta td { padding: 8px 6px; border-bottom: 1px solid var(--border); font-size: 13.5px; background: #fff; vertical-align: middle; }
  .fakt .vt-fronta td:first-child { padding-left: 10px; }
  .fakt .vt-fronta .vt-soubor { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fakt .vt-fronta .vt-co { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fakt .vt-fronta .vt-co.chyba { color: #b3352f; white-space: normal; font-size: 12.5px; }
  .fakt .vt-fronta .vt-co.druh { color: #b86a00; font-size: 12.5px; font-weight: 600; }
  .fakt .vt-fronta .pil { font-size: 12.5px; padding: 3px 9px; }
  .fakt .zdroj { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 7px; white-space: nowrap; vertical-align: middle; }
  .fakt .zdroj.isdoc { background: #e7f6ee; color: #067647; } .fakt .zdroj.ai { background: #efeafd; color: #5b3fc0; }
  .fakt .zdroj.sed { background: #eef0f6; color: #5b637d; }
  .fakt .vt-tocka { display: inline-block; width: 16px; height: 16px; border: 2.5px solid #c9cfe2; border-top-color: #2f5bff;
    border-radius: 50%; animation: vytezTocka .9s linear infinite; vertical-align: middle; }
  /* seznam „Ke kontrole" a ikony stavu zpracování */
  .fakt .vytez-pocet { background: #e8eeff !important; color: #2f5bff !important; }
  .fakt .vytez-ke-kontrole.vytez-hotovo { color: #17a356; }
  .fakt .rv-nahled-pozn { font-size: 12.5px; color: var(--muted); line-height: 1.35; max-width: 300px; }
  .fakt .vytez-ke-kontrole { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: #2f5bff; }
  .fakt .vytez-cte { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #5b637d; }
  .fakt .vytez-cte i { width: 14px; height: 14px; border: 2.5px solid #c9cfe2; border-top-color: #2f5bff; border-radius: 50%; animation: vytezTocka .9s linear infinite; }
  @keyframes vytezTocka { to { transform: rotate(360deg); } }
  .fakt .vytez-soubor { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fakt .vytez-chyba { font-size: 12px; color: #b3352f; white-space: normal; }
  .fakt .vytez-btn { padding: 5px 12px; min-height: 0; height: 30px; margin-right: 6px; }
  .fakt td.zprac-b { text-align: center; line-height: 0; }

  /* seznamy dokladů (Vydané, Pravidelné, Úhrady, Přijaté, Historie e-mailů, Upomínky) mají celý řádek jedním
     písmem 13,5 px — popis dřív 14 px vedle 14,5 px zbytku vypadal menší a ušetřené místo dostal popis a firma
     (Petr 6. 10. 2026, předloha nastroje/mockupy/prijate-pismo.html) */
  .fakt table.fakt-seznam tbody td, .fakt table.fakt-seznam tbody td b, .fakt table.fakt-seznam tbody td a,
  .fakt .fplocha table.fakt-seznam td.popis-b { font-size: 13.5px; }
  .fakt .fplocha .panel > h2 { font-size: 16.5px; }
  .fakt .fplocha .panel > h2 .lehce { font-size: 13.5px; }
  .fakt .fplocha .prazdno { font-size: 15px; }
  .fakt-menu button { font-size: 14.5px; padding: 10px 13px; }
  .fakt .okno-karta h3 { font-size: 18px; }
  .fakt .okno-karta .telo { font-size: 14.5px; }
  .fakt .zastupne button { font-size: 12.5px; padding: 6px 12px; }
  .fakt .toast, #faktToast { font-size: 14.5px; }
  .src-tag { font-size: 10px; font-weight: 750; border-radius: 5px; padding: 1px 4px; letter-spacing: .3px; }
  .src-tag.manual { background: var(--green-bg); color: var(--green); }
  .src-tag.wflow { background: var(--sel-bg); color: var(--blue); }
  .src-tag.idoklad { background: #efe4f9; color: #7a3bbf; }   /* import z iDokladu */
  .src-tag.ai { background: #efeafd; color: #5b3fc0; }        /* doklad z vlastního vytěžování */
  .src-tag.fakt { background: #e3f4f2; color: #0f766e; }      /* pohledávka z Fakturantu */
  .src-tag.zal { background: #efe4f9; color: var(--purple); }  /* zálohová faktura z Fakturantu */
  #receivablesList tr.klik { cursor: pointer; }
  /* posuvník tabulky je na Macu překryvný — vlaštovka u pravého okraje by pod ním nešla trefit */
  #receivablesList tbody td:last-child, #receivablesList thead th:last-child { padding-right: 16px; }
  /* najetí na štítek zdroje: červená bublina s vysvětlením zkratky (otevírá se doprava,
     štítky sedí u levého okraje tabulky) */
  .src-tag[data-tip] { position: relative; cursor: help; }
  .src-tag[data-tip]:hover::after {
    content: attr(data-tip); position: absolute; left: -4px; bottom: calc(100% + 9px);
    background: var(--red); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap;
    padding: 7px 11px; border-radius: 8px; box-shadow: 0 8px 24px rgba(20, 26, 51, .35); z-index: 100;
    text-transform: none; letter-spacing: 0;
  }
  .src-tag[data-tip]:hover::before {
    content: ''; position: absolute; left: 6px; bottom: calc(100% + 4px);
    border: 5px solid transparent; border-top-color: var(--red); z-index: 100;
  }

  .toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
  /* v ukotvené liště Plateb šetříme výšku — nižší tlačítka (font má „normal" line-height ~2,3×) */
  .toolbar .btn { padding: 6px 12px; line-height: 1.2; }
  .toolbar .spacer { flex: 1; }
  /* Tlačítka mají typografii menu a VŽDY stejný rozměr i písmo — vypnuté a zapnuté se liší
     jen barvou, ne velikostí (jinak lišta poskakuje). Funkční tlačítka (Sbalit vše, Zobrazit
     jen označené…) jsou šedá, systémová (.primary — Přidat, Načíst) tmavá. */
  button.btn {
    border: 1px solid var(--border); background: var(--card); border-radius: 9px;
    padding: 9px 16px; font-size: 13px; font-weight: 800; letter-spacing: .6px;
    text-transform: uppercase; min-height: 41px;
    cursor: pointer; color: var(--text);
  }
  button.btn:hover { border-color: #c9cede; }
  /* Drobná tlačítka UVNITŘ tabulek a hlaviček skupin (XLS, PDF, ✎, ✕, „+ Rok dopředu")
     nesmí přebírat výšku samostatného tlačítka z lišty — nafoukla by řádky tabulky. */
  tbody .btn, .loan-rows .btn, .loan-group .btn, .sec-head .btn, .lg-akce .btn {
    min-height: 26px; padding: 3px 9px; font-size: 11.5px; letter-spacing: .3px;
  }
  /* Přepínače (jen označené, urgentní…): fajfka má vyhrazené místo i ve vypnutém stavu,
     aby tlačítko po zapnutí nezměnilo šířku. Zapnuto = modrá, tedy jinak než systémová tmavá. */
  .onlySelBtn::before, .onlyUrgentBtn::before, .recvOnlyOcekBtn::before,
  .bulkDelBtn::before, #wfJenOznaceneBtn::before {
    content: '✓'; margin-right: 6px; visibility: hidden;
  }
  .onlySelBtn.zap::before, .onlyUrgentBtn.urgent-on::before,
  .recvOnlyOcekBtn.zap::before, .bulkDelBtn.zap::before,
  #wfJenOznaceneBtn.zap::before { visibility: visible; }
  button.btn.zap {
    background: var(--blue); border-color: var(--blue); color: #fff;
  }
  button.btn.zap:hover { background: #2449d8; border-color: #2449d8; }
  /* Akční („systémová") tlačítka mají barvu i písmo hlaviček menu — modrá zůstává
     vyhrazená pro VYBRANÝ stav (aktivní položka menu, zvolená záložka, přepínač). */
  button.btn.primary {
    background: #3d4460; border-color: #3d4460; color: #fff;
    font-size: 11.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
    min-height: 41px;   /* stejně vysoké jako hlavní kategorie v menu */
  }
  button.btn.primary:hover { background: #4a527a; border-color: #4a527a; }
  /* zmenšené varianty uvnitř tabulek a proužků si výšku řídí samy */
  .loan-table td.lt-akce .btn.primary, .loan-head-akce .btn.primary,
  .chart-filtr-stitek .btn.primary, .loan-term .btn.primary { min-height: 0; }

  .footer {
    position: fixed; left: 220px; right: 0; bottom: 0; z-index: 30;   /* left = šířka sidebaru, ať lišta nepřekrývá levé menu (Firmy) */
    background: #141a33; color: #fff; padding: 14px 28px;
    display: flex; align-items: center; gap: 16px;
    box-shadow: 0 -4px 20px rgba(20,26,51,.25);
    transform: translateY(110%); transition: transform .2s ease;
  }
  .footer.show { transform: translateY(0); }
  .footer .n { font-size: 13.5px; color: #aab3d6; }
  .footer .n b { color: #fff; }
  /* podsoučty vybraných plateb po firmách (jen když je vybráno z víc firem) — barva firmy.
     nowrap = chipy se nikdy nezalomí pod sebe; při přetečení (hodně firem) raději vodorovný posuv */
  .footer .fco-list { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; max-width: 55%; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
  .fco-chip { flex: 0 0 auto; font-size: 15px; padding: 10px 14px; border-radius: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
  /* platební příkaz pro banku — oranžové zaškrtávátko „do příkazu“ vedle modrého „k úhradě“ */
  .prikaz-btn { width: 17px; height: 17px; border-radius: 5px; border: 2px solid #d18b12; background: #fff; padding: 0;
    margin: 0 5px 0 0; cursor: pointer; vertical-align: middle; flex: 0 0 auto; position: relative; }
  .prikaz-btn.checked { background: #f0a020; border-color: #d18b12; }
  .prikaz-btn.checked::after { content: ''; position: absolute; left: 4px; top: 0; width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
  .prikaz-btn.zakaz { border: 2px dashed #c9cdd8; background: #f4f5f8; cursor: not-allowed; }
  .prikaz-hl { display: inline-flex; align-items: center; gap: 0; margin-left: 10px; }
  .prikaz-hl input[type=checkbox] { margin: 0; }
  .prikaz-chip { flex: 0 0 auto; display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 6px;
    background: #eaf1fd; color: #2f6bd8; font-size: 11.5px; font-weight: 700; }
  .txt-flex { display: flex; align-items: baseline; min-width: 0; }
  .txt-flex .txt-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* štítek „příkaz 01.10.“ stojí u pravého okraje sloupce Text (kousek před poznámkou) a pole
     filtru textu končí na stejném místě — 3 px před hranicí sloupce */
  td.txt .txt-flex .txt-t { margin-right: 8px; }
  td.txt .txt-flex .prikaz-chip { margin-left: auto; margin-right: -9px; }
  tr.filtr-radek input.pay-filtr[data-payf="text"] { width: calc(100% + 3px); }
  /* velikost, písmo i odsazení přebírá od ostatních tlačítek lišty (.footer button) — jen barva je vlastní */
  /* oranžová jako zaškrtávátko „do příkazu“ — tlačítko je vidět jen s něčím zaškrtnutým, takže svítí vždy;
     text tmavý, bílý by na téhle oranžové nešel přečíst */
  .footer .fprikaz-btn { background: #f0a020; color: #1d2136; }
  .footer .fprikaz-btn:hover { background: #e3940f; }
  .modal.prikaz-okno { width: 1100px; max-width: calc(100vw - 32px); position: relative; }
  .prikaz-hlava { display: flex; gap: 18px; align-items: end; margin: 6px 0 14px; flex-wrap: wrap; }
  .modal .prikaz-hlava label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); margin: 0; padding-left: 0; }
  /* všechna pole v řadě mají stejnou výšku jako roletka a přepínače (36 px) */
  .modal .prikaz-hlava .prikaz-in { height: 36px; font-size: 14px; }
  .prikaz-hlava select { height: 36px; min-width: 300px; }
  .prikaz-seg { display: inline-flex; border: 1px solid #d7dced; border-radius: 8px; overflow: hidden; }
  .prikaz-seg button { height: 34px; padding: 0 12px; border: 0; background: #fff; font: inherit; font-weight: 600; cursor: pointer; }
  .prikaz-seg button.on { background: var(--blue); color: #fff; }
  .prikaz-tab { width: 100%; min-width: 0 !important; table-layout: fixed; background: #fff; }
  .prikaz-tab th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 8px 6px; background: #fff; }
  .prikaz-tab td { padding: 5px 6px; border-top: 1px solid #eef0f6; background: #fff; }
  .prikaz-tab .pr { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .prikaz-in { width: 100%; height: 30px; border: 1px solid #d7dced; border-radius: 6px; padding: 0 8px; font: inherit; font-size: 13px;
    box-sizing: border-box; font-variant-numeric: tabular-nums; background: #fff; }
  /* účet, symboly i částka vpravo; popisek nad polem lícuje s textem v poli (buňka 6 + rámeček 1 + odsazení pole 12 px) */
  .prikaz-tab th.num { text-align: right; }
  .prikaz-pozn { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
  /* Účelové prostředky — dlaždice (klik filtruje čerpání), dialog; 1:1 podle mockupu ucty-a-prostredky.html */
  .prostr-karty { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
  .prostr-karta { padding: 14px 16px; cursor: pointer; border: 1.5px solid var(--border); }
  .prostr-karta:hover { border-color: #c9d0e0; }
  .prostr-karta.vybrana { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(47,107,216,.18); background: #e8effc; }
  /* vybraná dlaždice je celá podbarvená (Petr 5. 10. 2026); pruh čerpání pak potřebuje bílý podklad, jinak by splynul */
  .prostr-karta.vybrana .pk-pruh { background: #fff; }
  .prostr-prirazka { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
  .prostr-prirazka label { margin: 0; white-space: nowrap; }
  .prostr-prirazka .mu { color: var(--muted); font-size: 12.5px; }
  /* text pro investora v tabulce čerpání: klik přepíše, vlastní text má štítek (původní text v bublině) */
  #prostrObsah td.pr-text-edit { cursor: text; }
  /* čerpání: vlastní rolovací plocha s ukotvenou hlavičkou, dělítko výšky a stránkování (jako Vydané doklady) */
  #prostrCerpaniBox .pr-cerp-wrap { overflow-y: auto; }
  #prostrCerpaniBox .pr-cerp-wrap thead tr:first-child th { position: sticky; top: 0; z-index: 4; }
  #prostrCerpaniBox .pr-cerp-wrap thead tr.filtr-radek th { position: sticky; z-index: 3; background: #fff; }
  #prostrCerpaniBox .fakt-strankovani select { width: auto; padding: 8px 32px 8px 12px; font-size: 15px; }
  #prostrObsah td.pr-text-edit:hover { background: #f4f7fe; }
  #prostrObsah .pr-text-znak { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px; font-size: 11px;
    font-weight: 700; color: var(--blue); background: #e8effc; vertical-align: 1px; }
  #prostrObsah input.pr-text-pole { width: 100%; box-sizing: border-box; font: inherit; padding: 3px 7px; margin: -4px 0;
    border: 1.5px solid var(--blue); border-radius: 7px; background: #fff; }
  .pk-hlava { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 15px; }
  .pk-hlava b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pk-hlava .pk-vpravo { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
  .pk-hlava .btn-del { padding: 0 4px; font-size: 14px; color: var(--muted); }
  .pk-pruh { height: 7px; background: #eef1f8; border-radius: 4px; margin-top: 8px; overflow: hidden; }
  .pk-pruh i { display: block; height: 100%; background: var(--blue); border-radius: 4px; }
  .pk-pruh.pres i { background: var(--red); }
  .pk-radky { display: grid; grid-template-columns: 74px 1fr; gap: 3px 10px; margin-top: 10px; font-size: 12.5px; }
  .pk-radky span { color: var(--muted); } .pk-radky b { font-weight: 600; }
  .prostr-seg, .prostr-sekce { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
  .prostr-seg { background: #f4f6fb; border: 1.5px solid #dfe3ee; border-radius: 10px; padding: 3px; flex-wrap: nowrap; }
  .prostr-seg button { flex: 1; border: 0; background: transparent; border-radius: 8px; padding: 7px 4px; font: inherit;
    font-size: 13px; font-weight: 650; color: #3f465e; cursor: pointer; }
  .prostr-seg button.on { background: var(--blue); color: #fff; }
  .prostr-sekce button { border: 1.5px solid #dfe3ee; background: #fff; border-radius: 999px; padding: 5px 12px; font: inherit;
    font-size: 12.5px; font-weight: 650; color: #3f465e; cursor: pointer; }
  .prostr-sekce button.on { background: var(--blue); border-color: var(--blue); color: #fff; }
  #prostrObsah input.pay-filtr[data-prf="prostr"] { min-width: 0 !important; width: 100% !important;
    padding-left: 5px !important; padding-right: 3px !important; }
  @media screen and (max-width: 760px) { .prostr-karty { grid-template-columns: minmax(0, 1fr); } }
  /* tranše: pruh na dlaždici má světlou přijatou část a tmavé čerpání (obojí z celkové částky) */
  .pk-pruh.dvoji { position: relative; }
  .pk-pruh.dvoji i { position: absolute; left: 0; top: 0; height: 100%; }
  .pk-pruh.dvoji i.pk-prijato { background: #aec6f2; }
  .pr-stav { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap;
    background: #e3f5ec; color: #17845c; }
  .pr-stav.ceka { background: #fdf0dc; color: #b26a00; }
  /* tranše v dialogu (1:1 podle mockupu) */
  .pr-transe { margin-top: 12px; padding: 4px 2px; }
  .pr-tr { display: grid; grid-template-columns: 22px 186px minmax(110px, 1fr) 176px 26px; gap: 8px; align-items: center; margin-top: 6px; }
  .pr-tr-hl { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }
  .pr-tr .pt-n { font-weight: 700; color: var(--muted); }
  .modal .pr-tr input.pt-castka { text-align: right; font-weight: 700; margin: 0; }
  .modal .pr-tr input.pt-pozn { grid-column: 2 / 5; margin: 0; height: 32px; font-size: 13px; }
  .modal .pr-tr .date-seg-wrap { margin: 0; gap: 4px; flex-wrap: nowrap; }
  .modal .pr-tr .date-seg { width: 36px; min-width: 0; padding-left: 0; padding-right: 0; }
  .modal .pr-tr .date-seg-year { width: 56px; }
  .modal .pr-tr .cal-btn { width: 34px; min-width: 34px; height: 37px; }
  /* celková částka zůstává velkým tučným písmem, ale stejně vysoká jako ostatní pole */
  .modal #prostrCastka { height: 37px; padding-top: 0; padding-bottom: 0; }
  /* přijato / očekává se: dvě samostatná tlačítka bez společného rámečku, vysoká jako pole vedle */
  .pr-seg2 { display: flex; gap: 4px; }
  .pr-seg2 button { white-space: nowrap; flex: 1; height: 37px; border: 1px solid var(--border); background: #fff; border-radius: 10px;
    padding: 0 6px; font: inherit; font-size: 12.5px; font-weight: 650; color: #3f465e; cursor: pointer; }
  .pr-seg2 button.on { background: var(--blue); border-color: var(--blue); color: #fff; }
  .pr-tr .btn-del { color: var(--muted); }
  .pr-tr-pata { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 13px; color: var(--muted); }
  .pr-tr-pata .btn, .pr-tr-pata .nz { white-space: nowrap; }
  #prostrOverlay .pr-tr-pata .btn { height: 30px; min-height: 0; padding: 0 12px; font-size: 12px; line-height: 1; }
  .pr-tr-pata .warn { color: var(--red); }
  #trEditOverlay .tr-ed-stav { max-width: 260px; }
  #trEditOverlay .row2 { align-items: start; }
  #prostrObsah tr.tr-klik { cursor: pointer; }
  /* roletka prostředků v řádku příkazu (mockup ucty-a-prostredky.html) */
  .prikaz-prostr { width: 100%; height: 36px; border: 1.5px solid #dfe3ee; border-radius: 8px; padding: 0 6px; font: inherit;
    font-size: 13px; background: #fff; }
  /* příjemce s víc účty: počet v rohu pole, nabídka po kliknutí */
  .prikaz-ucet-obal { position: relative; }
  .prikaz-ucty-pocet { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); min-width: 18px; height: 18px;
    padding: 0 4px; border-radius: 9px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700;
    line-height: 18px; text-align: center; pointer-events: none; }
  .prikaz-ucet-obal .nasept-menu { left: auto; right: 0; min-width: 260px; text-align: left; }
  /* řazení klikem na hlavičku — šipka jako v ostatních tabulkách */
  .prikaz-tab th[data-prsort] { cursor: pointer; user-select: none; white-space: nowrap; }
  .prikaz-tab th[data-prsort]:hover { color: var(--text); }
  .prikaz-tab th.num.pole { padding-right: 19px; }
  .prikaz-tab th.pole:not(.num) { padding-left: 19px; }
  .prikaz-in.num { text-align: right; }
  .prikaz-in.chybi { border-color: var(--red); background: #fff5f4; }
  .modal .prikaz-ulozit { display: flex !important; flex-direction: row; gap: 8px; align-items: center; margin: 26px 0 8px; padding-left: 0; font-size: 13px;
    text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 500; }
  /* obecné „.modal input { width: 100% }“ by zaškrtávátko roztáhlo přes půl okna a text vytlačilo ven */
  .modal .prikaz-ulozit input[type=checkbox] { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; }
  /* souhrn sedí vlevo v řádku tlačítek — velký, ve volném místě pod tabulkou */
  .modal.prikaz-okno .actions { align-items: center; margin-top: 22px; }
  .prikaz-souhrn { margin-right: auto; font-size: 15px; color: var(--muted); font-weight: 600; }
  .prikaz-souhrn b { display: block; font-size: 26px; font-weight: 800; color: var(--text, #1d2136); font-variant-numeric: tabular-nums; }
  .fco-chip b { font-weight: 750; }
  /* název firmy nad částkou — dlaždice je o polovinu užší a víc firem se vejde vedle sebe */
  .fco-txt { display: flex; flex-direction: column; line-height: 1.15; }
  .fco-txt .fco-firma { font-size: 12px; font-weight: 600; opacity: .85; }
  .footer .fco-chip { padding: 7px 10px 7px 12px; }
  /* stáhnout XLS jen za tuto firmu — nenápadné tlačítko uvnitř barevného chipu */
  .fco-dl { border: 0; background: rgba(0,0,0,.12); color: inherit; cursor: pointer; font-size: 14px;
            line-height: 1; padding: 3px 6px; border-radius: 6px; font-family: inherit; }
  .fco-dl:hover { background: rgba(0,0,0,.24); }
  .footer .total { margin-left: auto; text-align: right; }
  .footer .total .t-lbl { font-size: 11.5px; color: #aab3d6; text-transform: uppercase; letter-spacing: .5px; }
  .footer .total .t-val { font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; }
  .footer .eur { font-size: 12.5px; color: #aab3d6; text-align: right; }
  .footer button { border: 0; border-radius: 9px; padding: 10px 18px; font-size: 13.5px; font-weight: 650; cursor: pointer; font-family: inherit; }
  .footer .ghost { background: rgba(255,255,255,.12); color: #fff; }
  .footer .green { background: #12b76a; color: #fff; }
  .footer .red { background: var(--red); color: #fff; }
  .footer.danger { background: #55201e; }
  /* menší obrazovky (13" apod.): zmenšit celou lištu, ať se podsoučty firem vejdou vedle sebe */
  @media screen and (max-width: 1450px) {
    .footer { padding: 10px 16px; gap: 10px; }
    .footer .n { font-size: 12.5px; }
    .footer button { padding: 8px 12px; font-size: 12.5px; }
    .fco-list { max-width: 62%; }
    .fco-chip { font-size: 13px; padding: 7px 10px; gap: 6px; }
    .fco-dl { font-size: 12px; padding: 2px 5px; }
    .footer .total .t-val { font-size: 18px; }
    .footer .total .t-lbl, .footer .eur { font-size: 11px; }
  }
  @media screen and (max-width: 1200px) {
    .footer { padding: 8px 12px; gap: 8px; }
    .footer button { padding: 7px 9px; font-size: 11.5px; }
    .fco-chip { font-size: 12px; padding: 6px 8px; }
    .footer .total .t-val { font-size: 16px; }
  }
  .empty { padding: 40px; text-align: center; color: var(--on-bg-muted); }

  /* Subjekty */
  .subj { background: var(--card); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 18px; padding: 18px; }
  .subj h2 { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
  .subj .typ { font-size: 11px; font-weight: 650; background: var(--sel-bg); color: var(--blue); border-radius: 6px; padding: 2px 8px; text-transform: uppercase; }
  .subj .note { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
  .contract { border: 1px solid var(--border); border-radius: 10px; margin-top: 12px; padding: 12px 14px; }
  .contract .c-head { display: flex; align-items: center; gap: 10px; font-weight: 650; }
  .contract .c-meta { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
  .co-tag { font-size: 10.5px; font-weight: 700; border-radius: 5px; padding: 2px 7px; }
  .placeholder { border: 1.5px dashed var(--border); border-radius: 14px; padding: 26px; text-align: center; color: var(--muted); margin-bottom: 18px; }

  /* Uživatel */
  .user-menu { position: relative; }
  .user-btn {
    border: 1px solid var(--border); background: var(--sel-bg); color: var(--blue);
    font-weight: 700; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; font-size: 13px;
  }
  .user-drop {
    display: none; position: absolute; right: 0; top: 44px; background: var(--card);
    border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 30px rgba(20,26,51,.12);
    min-width: 200px; padding: 6px; z-index: 40;
  }
  .user-drop.show { display: block; }
  .user-drop .u-email { padding: 8px 12px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); margin-bottom: 4px; }
  .user-drop button {
    display: block; width: 100%; text-align: left; border: 0; background: none;
    padding: 9px 12px; font-size: 13.5px; cursor: pointer; border-radius: 8px; color: var(--text); font-family: inherit;
  }
  .user-drop button:hover { background: var(--bg); }
  /* místo pro iniciály (PF, VF…) rezervované VŽDY, i když je řádek nevybraný — ať se ikony nehýbou */
  .who { font-size: 10.5px; color: var(--blue); font-weight: 650; white-space: nowrap; display: inline-block; width: 22px; text-align: center; flex: 0 0 22px; }   /* na střed mezi checkbox a plamínek */
  .chk-cell { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; vertical-align: middle; }
  /* ikony v řádku plateb k sobě — s odsazením 6 px přetékal koš o 7 px za pravý okraj tabulky */
  .chk-cell .btn-pay, .chk-cell .btn-del { padding-left: 3px; padding-right: 3px; }
  .chk-cell .fire-btn { padding-left: 3px; padding-right: 3px; }

  /* Login */
  .login-screen {
    position: fixed; inset: 0; background: var(--bg); z-index: 100;
    display: none; align-items: center; justify-content: center;
  }
  .login-screen.show { display: flex; }
  .login-box {
    background: var(--card); border: 1px solid var(--border); border-radius: 18px;
    padding: 36px; width: 380px; max-width: 92vw;
  }
  .login-box h1 { font-size: 22px; font-weight: 700; text-align: center; }
  .login-box h1 span { color: var(--blue); }
  .login-box .sub { text-align: center; color: var(--muted); font-size: 13px; margin: 6px 0 22px; }
  .login-box label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 12px 0 4px; }
  .login-box input {
    width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px;
    font-size: 14px; outline: none; font-family: inherit;
  }
  .login-box input:focus { border-color: var(--blue); }
  .login-box .err { color: var(--red); font-size: 12.5px; margin-top: 10px; min-height: 16px; }
  .login-box button {
    width: 100%; margin-top: 14px; border: 0; background: var(--blue); color: #fff;
    border-radius: 9px; padding: 11px; font-size: 14.5px; font-weight: 650; cursor: pointer; font-family: inherit;
  }
  .login-box button:hover { background: var(--blue-dark); }
  .google-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    border: 1px solid var(--border); border-radius: 9px; padding: 11px;
    font-size: 14.5px; font-weight: 650; color: var(--text); text-decoration: none;
    background: #fff; transition: border-color .15s, box-shadow .15s;
  }
  .google-btn:hover { border-color: #c9cede; box-shadow: 0 2px 8px rgba(20,26,51,.08); }
  /* Face ID / Touch ID nad Googlem — je nejrychlejší, tak je první; barvu bere z tlačítek
     přihlašovací stránky (`.login-box button`), stejně jako „Přihlásit se" pod heslem */
  .login-box .passkey-btn { width: 100%; margin: 0 0 10px; font-family: inherit; }
  /* seznam zařízení v Můj účet */
  .uc-pk-seznam { display: flex; flex-direction: column; }
  .uc-pk-radek { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center;
    padding: 8px 0; border-bottom: 1px solid #f0f1f5; }
  .uc-pk-radek:last-child { border-bottom: 0; }
  .uc-pk-nazev { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .uc-pk-info { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
  .uc-pk-prazdno { font-size: 13px; color: var(--muted); padding: 4px 0; }
  @media screen and (max-width: 760px) { .uc-pk-radek { grid-template-columns: minmax(0, 1fr) auto auto; }
    .uc-pk-info { grid-column: 1 / -1; order: 5; white-space: normal; } }
  .google-off {
    font-size: 12.5px; color: var(--orange); background: var(--orange-bg);
    border-radius: 8px; padding: 10px 12px; margin-top: 10px;
  }
  .pw-fallback { margin-top: 18px; }
  .pw-fallback summary {
    font-size: 12.5px; color: var(--muted); cursor: pointer; user-select: none; text-align: center;
  }
  .pw-fallback summary:hover { color: var(--text); }

  /* Modal */
  /* padding-left = šířka levého menu (220px), ať se okno centruje nad obsahem, ne přes celé okno pod menu */
  .overlay { position: fixed; inset: 0; background: rgba(20,26,51,.45); z-index: 50; display: none; align-items: center; justify-content: center; padding-left: 220px; }
  /* potvrzení/upozornění je vždy NAD ostatními dialogy — jinak ho překryje okno, ze kterého vyskočilo */
  #confirmOverlay { z-index: 200; }
  /* Potvrzení / upozornění (askConfirm, askAlert, askPrompt) — bílá karta s ikonou podle druhu:
     smazání červeně (i tlačítko), upozornění oranžově, otázka modře. Varianta A z mockupu. */
  .modal.potvrz { background: #fff; color: #16192c; width: 440px; border-radius: 16px; padding: 22px;
    display: grid; grid-template-columns: 40px 1fr; gap: 6px 16px; align-items: start;
    box-shadow: 0 20px 50px -12px rgba(20, 26, 51, .45), 0 2px 6px rgba(20, 26, 51, .12); }
  .modal.potvrz.bez-ik { display: block; }
  .potvrz-ik { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  .potvrz-ik svg { width: 20px; height: 20px; }
  .potvrz-ik.cerv { background: #fdeceb; color: #c0392b; }
  .potvrz-ik.oran { background: #fff1dc; color: #c26a00; }
  .potvrz-ik.modr { background: #e6edfd; color: #2f6bd8; }
  .potvrz-obsah { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 1px; }
  .potvrz-tit { font-size: 16px; font-weight: 800; letter-spacing: -.1px; line-height: 1.35; color: #16192c; }
  .potvrz-txt { font-size: 14px; line-height: 1.55; color: #4b5168; white-space: pre-line; overflow-wrap: anywhere; }
  .potvrz-txt:empty { display: none; }
  .modal.potvrz .potvrz-akce { grid-column: 1 / -1; margin-top: 16px; }
  .modal.potvrz .btn.potvrz-cerv { background: #d1362f; color: #fff; border-color: #d1362f; }
  .modal.potvrz .btn.potvrz-cerv:hover { background: #b92d27; border-color: #b92d27; }
  .modal.potvrz input { background: #fff; }
  /* výsledek načtení z wflow — podstatné je číslo, kolik se spárovalo samo */
  .sync-vysledek { text-align: center; padding: 4px 2px 2px; white-space: normal; }
  .sync-cislo { font-size: 44px; font-weight: 800; line-height: 1.05; color: var(--muted); }
  .sync-cislo.je { color: #1c7d55; }
  .sync-popis { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase;
    letter-spacing: .04em; margin-top: 2px; }
  .sync-radky { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
    font-size: 14.5px; font-weight: 600; line-height: 1.6; }
  .sync-radky .sub { font-size: 13px; font-weight: 500; color: var(--muted); }
  /* dialog pokladny se otevírá z dialogu firmy — musí ležet nad ním (Escape pak zavírá správné okno) */
  #pokladnaEditOverlay { z-index: 100; }
  #strediskoEditOverlay { z-index: 100; }
  #ceMenuStrom .stred-pocet { color: var(--muted); font-size: 12.5px; margin-left: auto; white-space: nowrap; }
  #ceMenuStrom .stred-arch { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
    color: var(--muted); margin: 12px 2px 4px; }
  #ceMenuStrom .btn-undo:disabled { color: #b9bdcc !important; cursor: not-allowed; }
  /* přepínač střediska v editoru dokladu a vzoru — stejné tlačítka jako CZ / EU / Svět */
  .fakt .stred-vyber { display: inline-flex; }

  /* předání a vrácení techniky se otevírá i z karty člověka — stejný důvod */
  #predaniOverlay, #vraceniOverlay { z-index: 100; }
  /* přepínač Kniha jízd / Tankovací lístky — velké písmo jako nadpisy sekcí */
  /* mezera mezi záložkami stejná jako mezi kartami pod nimi (.cards gap) */
  /* Lišta Cesťáku se s třetí záložkou („Soukromé jízdy") přestala vejít na jeden řádek
     a přetékala přes okraj tabulky. `flex-wrap` je pojistka pro všechny tři záložky;
     roletky jsou tu užší než jinde, ať se zalomí co nejpozději. */
  #cestakJizdy .view-sticky, #cestakTank .view-sticky, #cestakSoukr .view-sticky { flex-wrap: wrap; }
  #viewCestak .auto-selektor { min-width: 178px; }
  #viewCestak .rok-selektor { min-width: 92px; }
  #viewCestak .rok-selektor + .rok-selektor { min-width: 108px; }   /* měsíc — „Celý rok"/„listopad" */
  #viewCestak .view-sticky .roleta.siroka .roleta-btn { min-width: 178px; }
  #viewCestak .view-sticky .roleta:not(.siroka) .roleta-btn { min-width: 92px; }

  /* Tankovací lístky mají o akci navíc (Výpis · Přidat · Načíst z wflow) a potřebují 1401 px,
     kdežto obsah appky má nejvýš 1332 — na jeden řádek se nevejdou ani na širokém monitoru.
     Zalomení je proto natvrdo a řízené: nahoře záložky a akce (tam, kde je oko zvyklé),
     dole roletky u tabulky, jejíž obsah filtrují. Bez toho by přirozený wrap shodil dolů
     akce a nechal nahoře prázdno po celé šířce. Kniha jízd i Soukromé jízdy se vejdou. */
  #cestakTank .view-sticky > .seg-tabs { order: 1; }
  #cestakTank .view-sticky > div:not(.seg-tabs):not(.cards) { order: 2; }
  #cestakTank .view-sticky::after { content: ""; flex: 0 0 100%; height: 0; order: 3; }
  #cestakTank .view-sticky > select, #cestakTank .view-sticky > .roleta { order: 4; }
  /* Výběr auta stojí první (před záložkami) — určuje, čí jízdy a lístky se ukazují.
     U tankování proto nahoru, dole zůstane jen období. Jen na počítači: mobilní blok
     řadí lištu vlastními `order` a vyšší specificita by mu je jinak přebila. */
  @media (min-width: 761px) {
    #cestakTank .view-sticky > #tankAutoSel, #cestakTank .view-sticky > .roleta.siroka { order: 0; }
  }
  .cestak-prep { gap: 12px; }
  .cestak-prep button { padding: 9px 18px; }   /* typografii dědí ze .seg-tabs — všechny přepínače stejné */
  /* tlačítka v liště Cesťáku se nesmí lámat na dva řádky — měnila by se jim výška */
  #cestakJizdy .view-sticky .btn, #cestakTank .view-sticky .btn { white-space: nowrap; }
  /* předplatná uvnitř dialogu produktu — jeden řádek = jedno předplatné (cena, měna, frekvence) */
  .sp-pp { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
  .sp-pp > label { display: block; margin-bottom: 12px; }
  /* u produktu s víc tarify (Claude AI jich má přes dvacet) roluje seznam, ať tlačítka zůstanou vidět */
  #spPredplatna { max-height: 38vh; overflow-y: auto; padding-right: 2px; }
  .sp-radek { display: grid; grid-template-columns: 1fr 170px 124px 118px 24px;
              gap: 8px; align-items: center; margin-bottom: 7px; }
  /* hromadný plán s různými cenami má u licence navíc typ a vlastní cenu */
  /* u hromadného plánu je sloupec „Platí se" prázdný (platí se naráz) — místo dostane jméno.
     Prvek zůstává (jen nulové šířky), display:none by posunul zbytek řádku o sloupec vedle. */
  #swProduktOverlay.sp-ruzne-ceny .sp-radek { grid-template-columns: 1fr 0 132px 92px 104px 96px 24px; }
  #swProduktOverlay.sp-ruzne-ceny .sp-radek > :nth-child(2) { visibility: hidden; overflow: hidden; }
  .sp-cena-lic { text-align: right; font-weight: 700; }
  .sp-soucet { font-size: 12.5px; font-weight: 700; color: var(--on-bg); margin: 2px 0 8px; }
  .sp-hlava span { font-size: 11.5px; font-weight: 800; letter-spacing: .6px;
                   text-transform: uppercase; color: var(--muted); }
  .sp-radek input, .sp-radek select { margin: 0; }
  /* osoba se vybírá našeptávačem — obal musí v mřížce řádku zabrat místo po původním selectu */
  .sp-radek .nasept { min-width: 0; }
  .sp-radek .sp-castka { font-size: 21px; font-weight: 700; text-align: right; }
  .sp-radek .sp-cislo { font-size: 12.5px; }
  /* údaje plánu vedle ceny v dialogu licence — vypadají jako pole, ale jen informují */
  /* pole s částkou je v dialozích vždy velké a tučné (platí i pro cenu plánu a licence) */
  #spCena, #swCastka, #ppStav, #fzCastka, #fnCastka, #foStav, #fcCastka { font-size: 21px; font-weight: 700; }
  /* nápověda v prázdném poli s velkou částkou má být normální, ne obří */
  #spCena::placeholder, #swCastka::placeholder, #fzCastka::placeholder, #fnCastka::placeholder,
  #foStav::placeholder, #fcCastka::placeholder { font-size: 13.5px; font-weight: 400; }
  /* velké písmo částky, ale STEJNÁ výška boxu jako ostatní pole v řádku */
  #fzCastka, #fnCastka, #foStav, #fcCastka { padding-top: 6px; padding-bottom: 6px; }
  /* Tabulka dovolených čte se zleva doprava jako výpočet: co se přičítá (Převod, Nárok),
     co se odečítá (dvanáct měsíců a jejich součet Čerpáno) a co z toho vyjde (Zůstatek).
     Skupiny proto mají vlastní podbarvení a mezi nimi je svislá linka. */
  #dovoleneList th.dov-plus, #dovoleneList td.dov-plus { background: #eef7f1; }
  #dovoleneList th.dov-cerp, #dovoleneList td.dov-cerp { background: #fdf0ee; }
  /* svislé dělítko na začátku každé skupiny — hranice musí být vidět i bez barev */
  #dovoleneList th.dov-plus-zac, #dovoleneList td.dov-plus-zac,
  #dovoleneList th.dov-cerp-zac, #dovoleneList td.dov-cerp-zac {
    box-shadow: inset 2px 0 0 #d3d9e6; }
  /* Čerpáno je součet dvanácti políček vlevo od něj — proto je z celé skupiny nejvýraznější */
  #dovoleneList th.dov-cerp-soucet, #dovoleneList td.dov-cerp-soucet {
    background: #fbdedb; box-shadow: inset 2px 0 0 #efc4bf; }
  #dovoleneList td.dov-cerp-soucet { font-weight: 800; font-size: 14px; color: #9e3412; }
  /* pole pro zápis čerpání leží na barevném podkladu — po najetí musí zůstat čitelné */
  #dovoleneList td.dov-cerp .dov-inp:hover { background: #fff; }

  /* zůstatek dovolené — zvýrazněný sloupec; přečerpáno červeně */
  #dovoleneList td.dov-zustatek { background: var(--green-bg); color: var(--green);
                                  font-weight: 800; font-size: 14px; }
  #dovoleneList td.dov-zustatek.minus { background: #fdecea; color: var(--red); }
  /* mřížka 12 měsíců v dialogu dovolené */
  .dov-mesice { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px 8px; margin-bottom: 6px; }
  .dov-mesice label { display: block; font-size: 10.5px; font-weight: 700; color: var(--muted);
                      text-transform: uppercase; margin: 0 0 2px; padding-left: 6px; }
  .dov-mesice input { width: 100%; box-sizing: border-box; text-align: center; margin: 0; }
  /* editovatelné čerpání přímo v tabulce */
  /* dovolené mají 12 měsíčních sloupců — užší odsazení, ať se v archivu vejde i sloupec Ukončeno */
  #dovoleneList thead th, #dovoleneList tbody td { padding-left: 8px; padding-right: 8px; }
  #dovoleneList th.dov-m, #dovoleneList td.dov-m { padding-left: 2px; padding-right: 2px; }
  .dov-inp { width: 100%; max-width: 34px; box-sizing: border-box; border: 1px solid transparent; border-radius: 6px; background: transparent;
             text-align: center; font: inherit; font-variant-numeric: tabular-nums; padding: 3px 2px; }
  .dov-inp:hover { border-color: var(--border); background: #fff; }
  .dov-inp:focus { border-color: var(--blue); background: #fff; outline: none; }
  .dov-inp.nula { color: #c2c6d4; }
  /* jména pod grafem — klik vybere osobu pro osobní graf */
  .dov-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
  .dov-chips button { border: 1px solid var(--border); background: var(--card); border-radius: 20px;
    padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; color: var(--text); }
  .dov-chips button:hover { border-color: var(--blue); color: var(--blue); }
  .dov-chips button.zap { background: var(--blue); border-color: var(--blue); color: #fff; }
  /* dlaždice, na kterou se dá kliknout (počáteční stav pokladny) */
  .card.karta-klik { cursor: pointer; }
  .card.karta-klik:hover { border-color: var(--blue); box-shadow: 0 2px 10px rgba(47,91,255,.12); }
  .sw-plan-info { border: 1px solid var(--border); border-radius: 10px; background: #f2f4fa;
                  padding: 11px 12px; font-size: 13.5px; color: var(--muted); min-height: 43px;
                  box-sizing: border-box; display: flex; align-items: center; }
  .sp-radek .sp-den { text-align: center; }
  .sp-radek .date-seg-wrap { gap: 2px; }
  .sp-radek .date-seg { width: 34px; font-size: 12.5px; padding: 8px 2px; }
  .sp-radek .date-seg-year { width: 46px; }
  .sp-radek .btn-del { color: var(--muted); }
  .sp-termin-plan { font-size: 12px; color: var(--muted); text-align: center; }
  .sw-lic-spolecny { font-size: 12px; color: var(--muted); text-align: center; }
  /* stojí ve spodní liště vlevo, vedle Zrušit/Uložit — proto stejná výška jako ona */
  .sp-pridat { margin-right: auto; }
  .sp-prazdno { font-size: 13px; color: var(--muted); padding: 2px 0 8px; }

  /* filtry jako řádek tabulky — mají přesně šířku svého sloupce; decentně odlišené pruhem,
     aby na bílém pozadí nezanikaly, a ukotvené hned pod hlavičkou (top dopočítá JS) */
  tr.filtr-radek th { padding: 5px 6px !important; background: #eff2f9;
                      border-bottom: 1px solid #d7dced; position: sticky; z-index: 3; }
  /* Krycí pásek NAD řádkem filtrů, v jeho barvě. Top řádku filtrů dopočítává JS z výšky
     hlavičky (`ukotviFiltrRadek`) a prohlížeč ho zaokrouhlí po svém — v Safari (a při
     zoomu) mezi hlavičkou a filtry zůstával pruh o pár pixelech, kterým při rolování
     prosvítaly řádky tabulky (Adresář, Vydané doklady). Pásek leží POD hlavičkou (ta má
     vyšší z-index), takže je vidět jen v té případné mezeře; na výpočtu tak nezáleží. */
  thead tr.filtr-radek th::before { content: ''; position: absolute; left: 0; right: 0;
    top: -10px; height: 10px; background: inherit; pointer-events: none; }
  /* Tyhle tabulky ukotvují celé `thead th` (i řádek filtrů) se z-index 4 jako hlavičku —
     filtry musí být o vrstvu níž, jinak by krycí pásek nad nimi přejel spodek hlavičky. */
  #receivablesList thead tr.filtr-radek th, #pokladnaList .pok-wrap thead tr.filtr-radek th,
  #jizdyList .jizdy-wrap thead tr.filtr-radek th, #tankList .tank-wrap thead tr.filtr-radek th { z-index: 3; }
  /* filtr datumu je tlačítko (otevírá rozsah od–do), ať vypadá jako ostatní filtrační pole */
  .pay-filtr-datum { width: 100%; box-sizing: border-box; border: 1px solid #c3cade; border-radius: 7px;
                     padding: 6px 8px; font-size: 12.5px; font-family: inherit; background: #fff;
                     color: var(--muted); cursor: pointer; text-align: left; white-space: nowrap;
                     overflow: hidden; text-overflow: ellipsis; }
  .pay-filtr-datum:hover { border-color: var(--blue); }
  .pay-filtr-datum.zap { border-color: var(--blue); color: var(--on-bg); font-weight: 650; }
  tr.filtr-radek input { width: 100%; box-sizing: border-box; border: 1px solid #c3cade;
                         border-radius: 7px; padding: 6px 8px; font-size: 12.5px; font-family: inherit;
                         background: #fff; outline: none; }
  /* Pole filtrů všude přesně jako ve Vydaných dokladech (Petr 7. 10. 2026): výška 30 px, svislé
     odsazení 0 a řádkování 27 px. Jinde měla jen odsazení 6 px a Safari je pak kreslil nižší —
     v Předplatném jako úzké proužky. Pozor: menší řádkování (napoprvé 16 px) zmenšilo v Safari
     i pole ve Fakturantu, která byla v pořádku. */
  tr.filtr-radek input:not([type=checkbox]):not([type=radio]), tr.filtr-radek select,
  tr.filtr-radek .pay-filtr-datum, tr.filtr-radek button.filtr-datum {
    height: 34px; padding-top: 0; padding-bottom: 0; line-height: 31px; font-size: 13px;
    border: 1.5px solid #aeb7cd; border-radius: 8px; background-color: #fff; color: var(--on-bg); }
  /* nápověda v prázdném poli musí jít přečíst — dřív skoro splývala s bílou (Petr 7. 10. 2026) */
  tr.filtr-radek input:not([type=checkbox]):not([type=radio])::placeholder { color: #737c95; opacity: 1; }   /* přebije i Fakturant */
  tr.filtr-radek .pay-filtr-datum:not(.zap), tr.filtr-radek button.filtr-datum:not(.on) { color: #737c95; }
  /* vyplněný nebo právě psaný filtr modře — po zesílení okraje výš to musí přebít */
  tr.filtr-radek input:not([type=checkbox]):not([type=radio]):not(:placeholder-shown),
  tr.filtr-radek input:not([type=checkbox]):not([type=radio]):focus,
  tr.filtr-radek .pay-filtr-datum.zap, tr.filtr-radek button.filtr-datum.on { border-color: var(--blue); }
  tr.filtr-radek input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(47,91,255,.12); }
  tr.filtr-radek input:not(:placeholder-shown) { border-color: var(--blue); font-weight: 650; }
  tr.filtr-radek input.kal-pole { cursor: pointer; }
  /* filtr číselného sloupce se zarovnává doprava — nadpis, filtr i čísla v jedné rovině */
  tr.filtr-radek input.num { text-align: right; }
  /* Oddělovač ukotvené části od těla tabulky: proužek v barvě pozadí firmy, do kterého
     řádky při rolování zajíždějí. Je pod poslední ukotvenou řádkou hlavičky (u tabulek
     s filtry pod filtry), na krajích zaoblený. */
  #receivablesList thead tr:last-child th::after,
  #swPrehledList .sw-wrap thead tr:last-child th::after,
  #swProdukty .sw-wrap thead tr:last-child th::after,
  #swLide .sw-wrap thead tr:last-child th::after,
  #pokladnaList .pok-wrap thead tr:last-child th::after,
  #tankList .tank-wrap thead tr:last-child th::after,
  #jizdyList .jizdy-wrap thead tr:last-child th::after,
  thead tr.filtr-radek th::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px;
    background: var(--bg); pointer-events: none;
  }
  /* Totéž NAD první ukotvenou řádkou: rolovací plocha tabulky začíná o kousek výš než
     hlavička (a při rolování stránky se hlavička drží pod lištou přes `--hl-posun`), takže
     do toho pásku zajížděly řádky a prosvítaly nad hlavičkou i mezi hlavičkou a filtry. */
  #receivablesList thead tr:first-child th::before,
  #swPrehledList .sw-wrap thead tr:first-child th::before,
  #swProdukty .sw-wrap thead tr:first-child th::before,
  #swLide .sw-wrap thead tr:first-child th::before,
  #pokladnaList .pok-wrap thead tr:first-child th::before,
  #tankList .tank-wrap thead tr:first-child th::before,
  #jizdyList .jizdy-wrap thead tr:first-child th::before,
  #usersList thead tr:first-child th::before, #kartyList thead tr:first-child th::before,
  #autaList thead tr:first-child th::before, #lideList thead tr:first-child th::before,
  #dovoleneList thead tr:first-child th::before, #technikaList thead tr:first-child th::before,
  #dodavateleList thead tr:first-child th::before, #bankaList thead tr:first-child th::before,
  #finDetailBlok thead tr:first-child th::before,
  #faktVydaneObsah .fakt-tab-wrap thead tr:first-child th::before,
  #faktVzoryObsah .fakt-tab-wrap thead tr:first-child th::before,
  #faktUhradyObsah .fakt-tab-wrap thead tr:first-child th::before,
  #prijateObsah .fakt-tab-wrap thead tr:first-child th::before {
    content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
    background: var(--bg); pointer-events: none;
  }
  #receivablesList thead tr:last-child th:first-child::after,
  #pokladnaList .pok-wrap thead tr:last-child th:first-child::after,
  #tankList .tank-wrap thead tr:last-child th:first-child::after,
  #jizdyList .jizdy-wrap thead tr:last-child th:first-child::after,
  thead tr.filtr-radek th:first-child::after { border-radius: 3px 0 0 3px; }
  #receivablesList thead tr:last-child th:last-child::after,
  #pokladnaList .pok-wrap thead tr:last-child th:last-child::after,
  #tankList .tank-wrap thead tr:last-child th:last-child::after,
  #jizdyList .jizdy-wrap thead tr:last-child th:last-child::after,
  thead tr.filtr-radek th:last-child::after { border-radius: 0 3px 3px 0; }
  tr.filtr-radek .filtr-vedle { display: flex; gap: 2px; align-items: center; }
  tr.filtr-radek .filtr-vedle input { flex: 1; min-width: 0; }
  tr.filtr-radek .filtr-zrus { border: 0; background: none; color: var(--muted); font-size: 17px;
                               cursor: pointer; font-family: inherit; padding: 2px 6px; border-radius: 6px; }
  tr.filtr-radek .filtr-zrus:hover { color: var(--blue); background: #eef1f8; }
  /* Křížek „zrušit filtry“ — výrazný a všude stejný (Petr 1. 10. 2026: šedý / tenký se
     přehlížel). Červené kolečko s tučným křížkem; při najetí plné. Platí pro obě třídy,
     které se v appce používají (.filtr-zrus mimo Fakturant, .smaz-filtry ve Fakturantu). */
  .filtr-zrus, tr.filtr-radek .filtr-zrus, .smaz-filtry, .fakt .smaz-filtry {
    position: relative; display: inline-block; width: 28px; height: 28px; padding: 0; margin: 0;
    border: 1.5px solid #f0b9b4; border-radius: 50%; background: #fdeceb;
    /* znak ✕ si každé písmo kreslí jinak a nikdy nesedí na střed — křížek kreslí dvě čárky níž */
    font-size: 0 !important; color: transparent; line-height: 0;
    cursor: pointer; vertical-align: middle; transition: background .12s, border-color .12s; }
  .filtr-zrus::before, .filtr-zrus::after, .smaz-filtry::before, .smaz-filtry::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.4px; border-radius: 2px;
    background: #c0392b; transform: translate(-50%, -50%) rotate(45deg); transition: background .12s; }
  .filtr-zrus::after, .smaz-filtry::after { transform: translate(-50%, -50%) rotate(-45deg); }
  .filtr-zrus:hover, tr.filtr-radek .filtr-zrus:hover, .smaz-filtry:hover, .fakt .smaz-filtry:hover {
    background: #c0392b; border-color: #c0392b; }
  .filtr-zrus:hover::before, .filtr-zrus:hover::after, .smaz-filtry:hover::before, .smaz-filtry:hover::after { background: #fff; }
  /* Ostatní křížky (Petr 9. 10. 2026: „oprav všude“) — znak ✕ ve tlačítku žádné písmo nedá na střed
     kolečka, takže se schová a křížek kreslí dvě čárky v barvě textu tlačítka (currentColor).
     Velikost tlačítek ani koleček se nemění; tlačítka bez pevné velikosti ji dostala, ať po schování
     znaku nesplasknou. Filtrový křížek v poli (.filtr-x) je SVG, „zrušit filtry“ výš. */
  .search-clear, .modal .okno-krizek, .fakt .nasep-smaz, .fakt .hledat .smaz, .modal .dl-pryc, .poradi-pryc {
    font-size: 0 !important; line-height: 0 !important; --x: 9px; --xt: 1.8px; }
  .modal .dl-pryc, .poradi-pryc { position: relative; }
  .poradi-pryc { --x: 13px; --xt: 2px; }
  .search-clear::before, .search-clear::after, .modal .okno-krizek::before, .modal .okno-krizek::after,
  .fakt .nasep-smaz::before, .fakt .nasep-smaz::after, .fakt .hledat .smaz::before, .fakt .hledat .smaz::after,
  .modal .dl-pryc::before, .modal .dl-pryc::after, .poradi-pryc::before, .poradi-pryc::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: var(--x); height: var(--xt); border-radius: 2px;
    background: currentColor; transform: translate(-50%, -50%) rotate(45deg); pointer-events: none; }
  .search-clear::after, .modal .okno-krizek::after, .fakt .nasep-smaz::after, .fakt .hledat .smaz::after,
  .modal .dl-pryc::after, .poradi-pryc::after { transform: translate(-50%, -50%) rotate(-45deg); }
  .search-clear { --x: 8px; --xt: 1.7px; }
  .modal .okno-krizek { --x: 15px; --xt: 2px; }
  .fakt .nasep-smaz { width: 26px; height: 26px; padding: 0; --x: 11px; }
  .fakt .hledat .smaz { width: 22px; height: 22px; padding: 0; right: 8px; --x: 10px; }
  .modal .dl-pryc { --x: 11px; }
  /* patička velkého kalendáře — tlačítko na vymazání data u filtru */
  .kal-pata { display: flex; justify-content: flex-end; margin-top: 8px; }
  .kal-pata button { border: 1px solid var(--border); background: #fff; border-radius: 8px;
                     padding: 6px 12px; font-size: 13px; font-family: inherit; cursor: pointer; color: var(--muted); }
  .kal-pata button:hover { border-color: var(--blue); color: var(--blue); }
  /* roletky vozového parku a roku vedle nadpisu — stejný styl i výška jako tlačítko ‹ Cesťák */
  /* roletky období a výběru: obyčejný rámeček jako ostatní ovládání, ne modrá linka se září */
  .auto-selektor { border: 1px solid var(--border); border-radius: 9px; background: var(--card);
                   min-width: 230px; max-width: 360px;
                   height: 37px; padding: 0 12px; font-size: 15px; font-weight: 700; color: var(--text);
                   font-family: inherit; outline: none; cursor: pointer; }
  .auto-selektor:hover { border-color: #c9cede; }
  .auto-selektor:focus { border-color: var(--blue); }
  /* ---- naše roletka místo systémového <select> ---- */
  /* Nativní <select> kreslí operační systém a nastylovat ho nejde. Zůstává v DOM
     (kód dál čte .value a poslouchá change), jen ho překryje naše tlačítko s nabídkou. */
  .roleta { position: relative; display: inline-flex; }
  .roleta > select.auto-selektor {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; pointer-events: none; border: 0; padding: 0; min-width: 0;
  }
  .roleta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--border); border-radius: 9px; background: var(--card);
    /* stejná výška jako `.btn` (min-height: 41px) — v liště stojí roletky a tlačítka
       vedle sebe a rozdíl čtyř pixelů byl vidět */
    height: 41px; padding: 0 12px 0 14px; color: var(--text);
    /* Popisek roletky má stejné písmo jako `button.btn` — v liště stojí vedle sebe
       („MĚSÍC", „ROK", „2026", „SRPEN") a mají vypadat jako jedna sada.
       POZOR: `font: 700 13px/1 inherit` by bylo NEPLATNÉ — `inherit` ve zkratce nesmí
       být rodina, prohlížeč by zahodil celé pravidlo a spadlo by to na výchozích
       13,3 px. Proto rozepsané. */
    font-family: inherit; font-size: 13px; font-weight: 800; line-height: 1;
    letter-spacing: .6px; text-transform: uppercase;
    cursor: pointer; min-width: 112px; max-width: 360px;
  }
  .roleta-btn:hover { border-color: #c9cede; }
  .roleta.otevreno .roleta-btn { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,91,255,.12); }
  .roleta.vypnuto .roleta-btn { color: var(--muted); background: #f4f5f9; cursor: default; }
  .roleta-text { flex: 1 1 auto; min-width: 0; text-align: left; overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }
  .roleta-sip { width: 16px; height: 16px; flex: 0 0 16px; color: var(--muted); transition: transform .15s; }
  .roleta.otevreno .roleta-sip { transform: rotate(180deg); }
  .roleta-menu { display: none; }
  .roleta.otevreno .roleta-menu {
    display: block; position: absolute; top: calc(100% + 6px); left: 0; z-index: 90;
    min-width: 100%; max-height: 360px; overflow-y: auto;
    background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 14px 34px rgba(20,26,51,.18); padding: 5px;
  }
  .roleta-volba {
    display: flex; align-items: center; gap: 8px; width: 100%;
    border: 0; background: none; border-radius: 8px; padding: 10px 12px;
    /* stejné písmo jako popisek roletky i ostatní tlačítka v liště */
    font-family: inherit; font-size: 13px; font-weight: 800; line-height: 1.2;
    letter-spacing: .6px; text-transform: uppercase;
    color: var(--text); text-align: left; cursor: pointer; white-space: nowrap;
  }
  .roleta-volba:hover { background: var(--bg); }
  .roleta-volba.zvoleno { background: var(--sel-bg); color: var(--blue); }
  .roleta-volba.zvoleno::before { content: "✓"; font-size: 15px; }
  /* fajfka zabírá místo i u nevybraných, ať položky nepodskakují */
  .roleta-volba:not(.zvoleno)::before { content: ""; width: 8px; }
  .roleta.siroka .roleta-btn { min-width: 200px; }
  .rok-selektor { min-width: 124px; }
  /* tankovací lístky i pracovní cesty: dlouhý seznam roluje uvnitř tabulky a hlavička drží nahoře */
  /* tabulky s ukotvenou hlavičkou — scrollují uvnitř sebe, hlavička (a řádek filtrů) drží nahoře */
  #tankList .tank-wrap, #jizdyList .jizdy-wrap, #pokladnaList .pok-wrap,
  #usersList .tbl-wrap, #kartyList .tbl-wrap, #autaList .tbl-wrap, #lideList .tbl-wrap, #dovoleneList .tbl-wrap,
  #companiesList .tbl-wrap, #companiesArchiveList .tbl-wrap, #pokladnyList .tbl-wrap,
  #dodavateleList .tbl-wrap, #phmDodavateleList .tbl-wrap, #phmMistaList .tbl-wrap,
  #swPrehledList .sw-wrap, #swProdukty .sw-wrap, #swLide .sw-wrap,
  #finDetailBlok .tbl-wrap, #bankaList .tbl-wrap { overflow-y: auto; }
  #tankList .tank-wrap thead th, #jizdyList .jizdy-wrap thead th,
  #pokladnaList .pok-wrap thead th, #usersList thead tr:first-child th,
  #kartyList thead tr:first-child th, #autaList thead tr:first-child th,
  #lideList thead tr:first-child th, #dovoleneList thead tr:first-child th,
  #companiesList thead tr:first-child th, #companiesArchiveList thead tr:first-child th,
  #pokladnyList thead tr:first-child th, #dodavateleList thead tr:first-child th,
  #phmDodavateleList thead tr:first-child th,
  #phmMistaList thead tr:first-child th, #technikaList thead tr:first-child th,
  #swPrehledList .sw-wrap thead th,
  #swProdukty .sw-wrap thead th, #swLide .sw-wrap thead th,
  #finDetailBlok thead tr:first-child th, #bankaList thead tr:first-child th,
  #faktVydaneObsah .fakt-tab-wrap thead tr:first-child th,
  #faktVzoryObsah .fakt-tab-wrap thead tr:first-child th,
  #faktUhradyObsah .fakt-tab-wrap thead tr:first-child th,
  #prijateObsah .fakt-tab-wrap thead tr:first-child th {
    /* `--hl-posun` dopočítává app.js (`ukotviHlavickyTabulek`): o kolik rolovací plocha
       tabulky zajela pod ukotvenou lištu pohledu. Bez toho hlavička zmizí za lištou
       a pod ní zůstanou viset holé řádky. Výchozí 0 = plocha je celá pod lištou. */
    position: sticky; top: var(--hl-posun, 0px); z-index: 4;
  }
  /* zrušené předplatné — řádek zešedne, ať je vidět, že se už neplatí */
  #swPrehledList tr.sw-zruseno td { color: #9aa1b4; }
  #swPrehledList tr.sw-zruseno { background: #f6f7fa; }
  /* částka bez DPH pod celkovou částkou lístku */
  .bez-dph { display: block; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
  .overlay.show { display: flex; }
  body:has(.overlay.show) { overflow: hidden; }
  /* max-height + rolování: na nízkém displeji (13") se delší formulář jinak ořízne a nejde k němu doscrollovat */
  .modal { background: var(--bg); border-radius: 16px; padding: 24px; width: 480px; max-width: 92vw;
           max-height: 92vh; overflow-y: auto; }
  .modal h3 { font-size: 16px; margin-bottom: 16px; color: var(--on-bg); }   /* modal má background:var(--bg) → na tmavé firmě bílý nadpis */
  /* align-items:end = pole v obou půlkách řádku lícují i když je jeden popisek na dva řádky */
  .modal .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
  /* padding-left = padding pole (12px) + jeho rámeček (1px) — popisek tak lícuje s textem uvnitř pole */
  .modal label { display: block; font-size: 12px; font-weight: 600; color: var(--on-bg-muted); margin: 7px 0 3px; padding-left: 13px; }
  .modal input, .modal select {
    width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
    font-size: 13.5px; outline: none; background: #fff; font-family: inherit;
  }
  /* Zaměřené pole v dialogu: jen tmavší rámeček, ne modrý. Modrá je v appce vyhrazená
     vybranému stavu (zvolená záložka, zapnutý přepínač) a na poli, do kterého se zrovna
     píše, mátla — hlavně u okna, které si první pole rovnou zaměří samo. */
  .modal input:focus, .modal select:focus, .modal textarea:focus { border-color: #9aa2ba; }
  /* Částka v okně platby je to hlavní číslo — výrazně větší a tučná, ať je vidět na první
     pohled (platí pro všechny sekce, okno je společné). Měna vedle ní roste s ní. */
  #overlay #mCastka { font-size: 21px; font-weight: 800; padding: 10px 14px;
                      font-variant-numeric: tabular-nums; letter-spacing: .2px; }
  #overlay #mMena { font-size: 15px; font-weight: 700; }
  #recOverlay #recCastka { font-size: 21px; font-weight: 800; padding: 10px 14px;
                           font-variant-numeric: tabular-nums; letter-spacing: .2px; }
  #recOverlay #recMena { font-size: 15px; font-weight: 700; }
  /* pokladna — částka je hlavní číslo záznamu, stejná velikost jako v okně platby.
     Barva se řídí typem pohybu už při psaní: příjem zeleně, výdej červeně (jako v deníku). */
  #pokOverlay #pokCastka { font-size: 21px; font-weight: 800; padding: 10px 14px;
                           font-variant-numeric: tabular-nums; letter-spacing: .2px; }
  #pokOverlay.pok-je-prijem #pokCastka, #pokOverlay.pok-je-prijem #pokTyp { color: var(--green); }
  #pokOverlay.pok-je-vydej #pokCastka, #pokOverlay.pok-je-vydej #pokTyp { color: var(--red); }
  /* Typ je krátké slovo — pole jen na jeho šířku, zbytek řádku patří částce.
     Nadpis okna lícuje s texty v polích (ta mají 12px padding + 1px rámeček). */
  #pokOverlay h3 { padding-left: 13px; }
  #pokOverlay .row-typ-castka { grid-template-columns: auto 1fr; }
  #pokOverlay #pokTyp { font-weight: 700; width: auto; padding-right: 34px; height: 47px; }
  /* číslo karty je vždy čtyřčíslí — pole na šířku obsahu, ať nezabírá půl okna */
  /* karta se zadává jako první a je stejně velká jako částka — podle ní se doplní držitel */
  #pokOverlay .row-karta { grid-template-columns: 150px 1fr; }
  #pokOverlay #pokKarta { font-size: 21px; font-weight: 800; letter-spacing: 2px; padding: 10px 12px;
                          text-align: center; font-variant-numeric: tabular-nums; }
  #pokOverlay .row-karta input { height: 47px; }
  #kartaOverlay .row-karta { grid-template-columns: 160px 1fr; }
  #autoOverlay .row-karta { grid-template-columns: 1fr 130px; }
  /* tankovací lístek: celková částka je hlavní číslo, základ daně vedle ní menší */
  #tankOverlay #tCastka { font-size: 21px; font-weight: 800; padding: 10px 14px;
                          font-variant-numeric: tabular-nums; letter-spacing: .2px; height: 47px; }
  #tankOverlay #tCastkaBez { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
                             color: var(--muted); height: 47px; }
  #tankOverlay #tCastkaBez.rucne { color: var(--text); border-color: var(--blue); }
  /* lístek z wflow s ručně opravenými údaji — import je nechá být */
  .src-tag.upraveno { background: #fff5e6; color: #8a5a00; border-color: #f0d9a8; margin-left: 3px; }
  /* dialog licencí osoby — zaškrtávací seznam předplatných */
  /* čtyři sloupce: přepínač | plán a dodavatel | cena a frekvence | termín — všechno na jedné lince.
     Selektor musí být silnější než obecné „.modal label { display:block }", jinak se řádek rozsype. */
  /* přepínač zapíná licenci, klik jinam do řádku otevře plán — ať se licence nepřipisují omylem */
  .sw-lic-radek .prep input { pointer-events: none; }
  .sw-lic-radek .prep { cursor: pointer; }
  .sw-lic-radek { cursor: pointer; }
  .modal .sw-lic-radek, .sw-lic-radek { display: grid; grid-template-columns: 44px 1fr auto 104px; align-items: center; gap: 16px;
                  padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
  .modal .sw-lic-radek { margin: 0; padding-left: 14px; }
  .sw-lic-radek:last-child { border-bottom: 0; }
  .sw-lic-radek:hover { background: var(--sel-bg); }
  /* výpis Cesťáku na obrazovce — široké okno, roluje se jen tabulka */
  .cv-nahled { width: 1180px; max-width: 96vw; display: flex; flex-direction: column; overflow: hidden; }
  .cv-nahled #cnObsah { flex: 1 1 auto; min-height: 0; overflow: auto; margin-top: 10px; }
  /* výpis Cesťáku má všechny sloupce zarovnané doprava, stejně jako PDF a Excel (Petr 6. 10. 2026) */
  .cv-nahled #cnObsah th, .cv-nahled #cnObsah td { text-align: right; }
  /* součtový řádek se drží dole pod tabulkou i při rolování dlouhého výpisu */
  .cv-nahled tfoot td {
    position: sticky; bottom: 0; background: #ebeef6; font-weight: 800;
    border-top: 2px solid var(--border);
  }
  .cv-nahled table { width: 100%; min-width: 0; border-collapse: collapse; background: #fff; }
  .cv-nahled thead th { position: sticky; top: 0; z-index: 2; background: #fafbfd; text-align: left;
                        font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
                        color: var(--muted); font-weight: 650; padding: 8px 10px;
                        border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .cv-nahled td { padding: 7px 10px; font-size: 13px; border-bottom: 1px solid var(--border); background: #fff; }
  .cv-nahled th.num, .cv-nahled td.num { text-align: right; font-variant-numeric: tabular-nums; }
  .cv-nahled tbody tr:hover td { background: var(--sel-bg); }
  .cv-celkem { margin-top: 12px; font-size: 15px; font-weight: 800; color: var(--on-bg); line-height: 1.5; }
  .cv-celkem .cv-celkem-dalsi { font-size: 13px; font-weight: 650; color: var(--on-bg-muted); }
  .cv-souhrn { margin-top: 8px; font-size: 12.5px; color: var(--on-bg-muted); }
  .cv-souhrn div { display: flex; gap: 12px; padding: 2px 0; }
  .cv-souhrn span:first-child { min-width: 220px; font-weight: 700; }
  /* rychlá volba období ve výpisu Cesťáku */
  .cv-rychle { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
  .cv-rychle button { border: 1px solid var(--border); background: #fff; border-radius: 999px;
                      padding: 5px 12px; font-size: 12px; font-weight: 650; color: var(--muted);
                      cursor: pointer; font-family: inherit; }
  .cv-rychle button:hover { border-color: var(--blue); color: var(--blue); }
  .forma-txt { font-size: 12px; font-weight: 650; color: var(--muted); margin-left: 3px; }
  /* odměna v kartě člověka — částky velkým písmem jako všude v dialozích */
  #swOsobaOverlay .so-kc { position: relative; }
  /* stejná výška jako ostatní pole formuláře (37 px) — částka má jen větší písmo, ne vyšší box */
  #swOsobaOverlay .so-kc input { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .2px;
                                 padding: 0 52px 0 12px; text-align: right; height: 37px; }
  #swOsobaOverlay .so-kc span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
                                font-size: 15px; font-weight: 700; color: var(--muted); pointer-events: none; }
  .cv-rychle button.on { background: var(--blue); border-color: var(--blue); color: #fff; }
  /* předěl mezi zapnutými licencemi a nabídkou zbytku */
  .sw-lic-cast { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px;
                 padding: 7px 14px; background: #f3f5fb; border-bottom: 1px solid var(--border);
                 font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
                 color: var(--muted); }
  .sw-lic-pocet { background: #fff; border: 1px solid var(--border); border-radius: 999px;
                  padding: 0 7px; font-size: 10.5px; letter-spacing: 0; }
  /* „Dodavatel — Plán" na jednom řádku; tučný je dodavatel, tarif za ním je decentnější */
  .sw-lic-nazev { font-size: 13.5px; font-weight: 500; color: var(--on-bg-muted); }
  .sw-lic-nazev .sw-lic-dod { font-weight: 800; color: var(--on-bg); }
  .sw-lic-dod { font-weight: 700; color: var(--muted); }   /* rozpis dne pod kalendářem */
  .sw-lic-tarif { font-weight: 500; color: var(--muted); }
  .sw-lic-cena { display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
                 font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .sw-lic-frek { font-size: 11px; }
  .sw-lic-radek .sw-lic-den { width: 100%; box-sizing: border-box; text-align: center; margin: 0; }

  /* kalendář plateb předplatného — mřížka měsíce, v každém dni částky po měnách */
  /* mezera od ukotvených přepínačů nad kalendářem — jinak lišta lepí na jejich hranu */
  #swKalendar { padding-top: 4px; }   /* zbytek mezery dělá padding ukotvené lišty s tlačítky */
  .swk-lista { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
  .swk-lista .btn { min-height: 36px; padding: 6px 14px; }
  .swk-lista .btn:disabled { opacity: .45; cursor: default; }
  .swk-lista .btn:disabled:hover { background: #e8ebf3; border-color: #d5dae8; }
  /* šipky na předchozí a příští měsíc — kolečka s výrazným znakem, ať nezanikají v pozadí */
  .swk-sip { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
             background: var(--card); color: var(--text); font-size: 20px; font-weight: 800;
             line-height: 1; cursor: pointer; font-family: inherit;
             display: flex; align-items: center; justify-content: center; padding: 0 0 3px; }
  .swk-sip:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); background: var(--sel-bg); }
  .swk-sip:disabled { opacity: .35; cursor: default; }
  .swk-nazev { font-size: 17px; font-weight: 800; min-width: 150px; text-align: center; text-transform: capitalize; }
  /* podstatný je součet v korunách — ten je velký a tučný, částky po měnách jsou jen rozpis */
  .swk-minuly { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-left: 6px; }
  .swk-soucet { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--on-bg-muted);
                font-variant-numeric: tabular-nums; }
  .swk-soucet .swk-kc { font-size: 17px; font-weight: 800; color: var(--on-bg); margin-left: 8px; }
  .swk-hlavicka { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
  .swk-hlavicka div { font-size: 11.5px; font-weight: 800; color: var(--on-bg-muted);
                      text-transform: uppercase; letter-spacing: .5px; padding-left: 4px; }
  /* plocha kalendáře je o odstín tmavší než pozadí firmy, ať bílé dny a okolí nesplývají */
  .swk-plocha { background: rgba(20, 26, 51, .07); border: 1px solid rgba(20, 26, 51, .06);
                border-radius: 14px; padding: 12px; }
  .swk-mrizka { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
  /* číslo dne vlevo nahoře, částky u pravého okraje s odsazením */
  .swk-den { background: var(--card); border: 1px solid var(--border); border-radius: 10px;
             min-height: 74px; padding: 6px 10px 8px; cursor: pointer; position: relative; }
  .swk-den.prazdny { background: transparent; border: 0; cursor: default; }
  .swk-den .swk-cislo { font-size: 12px; font-weight: 700; color: var(--muted); }
  .swk-den.ma-platbu { border-color: #c9d6ff; }
  .swk-den.ma-platbu:hover { border-color: var(--blue); }
  /* dnešek musí být vidět na první pohled — modrý rámeček, podbarvení a číslo dne v kolečku */
  .swk-den.dnes { box-shadow: inset 0 0 0 2px var(--blue), 0 2px 10px rgba(47, 91, 255, .22);
                  background: #f2f6ff; }
  .swk-den.dnes .swk-cislo { background: var(--blue); color: #fff; font-weight: 800;
                             border-radius: 999px; padding: 1px 7px; margin: -2px 0 0 -3px;
                             display: inline-block; }
  .swk-den.dnes.vybrany { box-shadow: inset 0 0 0 2px var(--blue), 0 2px 10px rgba(47, 91, 255, .3); }
  .swk-den.vybrany { background: var(--sel-bg); border-color: var(--blue); }
  /* čísla pod sebou zarovnaná doprava, kód měny vedle nich doleva — stejně jako v kartách nahoře.
     Jedna mřížka pro všechny řádky dne, jinak by měl každý řádek vlastní šířku sloupce. */
  .swk-castky { display: grid; grid-template-columns: max-content max-content; column-gap: 5px; row-gap: 2px;
                justify-content: end; margin-top: 2px; font-size: 12.5px; font-weight: 800;
                font-variant-numeric: tabular-nums; }
  .swk-castky .swk-c { text-align: right; }
  .swk-castky .swk-m { text-align: left; }
  .swk-pocet { font-size: 10.5px; color: var(--muted); font-weight: 700; margin-top: 2px; text-align: right; }
  /* dlaždice a detail sekce Finance */
  .fin-kachle { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px;
                cursor: pointer; min-width: 220px; }
  .fin-kachle:hover { border-color: var(--blue); box-shadow: 0 4px 14px rgba(47, 91, 255, .12); }
  .fin-kachle .lbl { font-size: 13px; font-weight: 800; color: var(--on-bg); }
  .fin-kachle .val { font-size: 24px; font-weight: 800; margin-top: 6px; font-variant-numeric: tabular-nums; }
  .fin-kachle .sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
  .fin-mesic-lista { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px;
                     background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
  #finDetailBlok table { min-width: 0; }   /* globální min-width tabulek by vytlačila akce za okraj */
  /* sevřenější řádky — na jednu obrazovku se vejde víc čerpání */
  #finDetailBlok tbody td { padding-top: 2px; padding-bottom: 2px; font-size: 13px; }
  #finDetailBlok tbody td.fin-narok-bunka { padding-right: 8px; }
  /* Krajní řádky se nemají lepit na okraj tabulky — nahoře i dole zbývá kousek místa.
     Řádky jsou tu schválně sevřené (2 px), takže první řádek jinak sedí natěsno pod
     řádkem filtrů; dole to místo bylo od začátku, nahoře chybělo. */
  #finDetailBlok tbody tr:first-child td { padding-top: 10px; }
  #finDetailBlok tbody tr:last-child td { padding-bottom: 10px; }
  #finDetailBlok .tbl-wrap { padding-bottom: 6px; }
  #finDetailBlok tbody .btn-del { padding: 1px 5px; }
  #finDetailBlok tbody td.amount { font-size: 13.5px; }
  /* neuhrazené čerpání je červené; jakmile dostane datum úhrady, zčerná */
  #finDetailBlok tbody tr.fin-neuhrazeno td { color: var(--red); }
  #finDetailBlok tbody tr.fin-neuhrazeno td.amount { color: var(--red); }
  #finDetailBlok tbody tr.fin-neuhrazeno td .dash { color: var(--red); opacity: .55; }
  /* klik na částku u čerpání = částečná úhrada (jako u plateb k úhradě) */
  #finDetailBlok tbody td.amount.fin-castka-klik { cursor: pointer; }
  #finDetailBlok tbody td.amount.fin-castka-klik:hover { text-decoration: underline; color: var(--blue); }
  /* mezi tabulkou a souhrnem má být jen úzký proužek pozadí, ne pruh přes půl obrazovky */
  #finDetailBlok .tbl-splitter { height: 12px; margin: 0; }
  #finDetailBlok .section:has(.tbl-wrap) { margin-bottom: 0; }
  /* detail účtu nemusí být přes celou obrazovku — čtyři sloupce tolik místa nepotřebují */
  #finDetailBlok { max-width: 1000px; }
  /* Finance nemají rolovat celou stránkou — výšku tabulky dopočítá JS podle zbylého místa,
     takže se vše vejde a posuvník je jen uvnitř tabulky. (overflow:hidden tu být nesmí:
     rozbil by ukotvení horní lišty — sticky by se vázalo na ořezaný kontejner.) */
  /* lišta v řádku nadpisu se nesmí lámat — kompaktnější tlačítka a nižší mezery */
  #finListaSlot { flex-wrap: nowrap; overflow: hidden; }
  #finListaSlot .btn { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
  /* pevná šířka — jinak by šipky poskakovaly podle délky názvu měsíce (únor × listopad) */
  #finListaSlot .fm-nazev { width: 118px; min-width: 118px; text-align: center;
                            white-space: nowrap; font-size: 15px; }
  #finListaSlot h3 { overflow: hidden; text-overflow: ellipsis; }
  .fin-mesic-lista .fm-nazev { font-size: 17px; font-weight: 800; min-width: 150px; text-align: center; }
  .fin-souhrn { display: grid; grid-template-columns: max-content max-content; gap: 4px 18px;
                justify-content: end; background: #fff; border: 1px solid var(--border); border-radius: 12px;
                padding: 14px 18px; margin-top: 2px; font-size: 14px; font-variant-numeric: tabular-nums; }
  .fin-souhrn .fs-lbl { color: var(--muted); }
  .fin-souhrn .fs-val { text-align: right; font-weight: 700; }
  .fin-souhrn .fs-velky { font-size: 17px; font-weight: 800; }
  /* nárokový řádek: zelený štítek s částkou a bílým písmem — pozná se na první pohled.
     Štítek (ne podbarvená buňka), aby měl vždy stejnou výšku i u prvního řádku pod hlavičkou. */
  td.fin-narok-bunka .fin-narok-chip { display: inline-block; background: var(--green); color: #fff;
    font-weight: 800; border-radius: 999px; padding: 3px 10px; line-height: 1.35;
    /* všechny štítky stejně široké, ať tvoří rovný sloupec — číslo se zarovná doprava */
    min-width: 108px; box-sizing: border-box; text-align: right; }
  td.fin-narok-bunka .cur { color: #fff; opacity: .8; }
  /* nad tabulkou musí být na první pohled jasné, který měsíc je otevřený */
  .fin-hlava-mesic { padding: 10px 16px; margin-bottom: 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
  .fin-mesic-velky { font-size: 22px; font-weight: 800; color: var(--on-bg); letter-spacing: -.2px;
                     text-transform: capitalize; white-space: nowrap; }
  .fin-zustatek-pred { font-size: 13.5px; color: var(--muted); margin-left: auto; }
  .fin-zustatek-pred b { font-size: 16px; margin-left: 4px; }
  .fn-radek { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border);
              border-radius: 8px; padding: 6px 10px; margin-bottom: 5px; font-size: 13px; }
  .fn-radek b { margin-left: auto; font-variant-numeric: tabular-nums; }
  /* Můj účet — karty pod sebou, každá jedna oblast nastavení */
  .ucet-mrizka { display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
  .ucet-karta { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; }
  .ucet-karta h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 800; color: var(--on-bg); }
  /* Technika (Lidé ve firmě → Technika) */
  .pr-seznam { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px;
               background: var(--soft); font-size: 13px; }
  .pr-seznam div + div { margin-top: 4px; }
  .pr-seznam { max-height: 220px; overflow-y: auto; }
  .pr-vyber { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; }
  .pr-seznam .vc { color: var(--muted); font-size: 12px; }
  .pr-seznam b { font-weight: 700; }
  .popis-radek { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
  .te-historie { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
  .te-historie h4 { margin: 0 0 6px; font-size: 12.5px; font-weight: 800; color: var(--muted);
                    text-transform: uppercase; letter-spacing: .4px; }
  .te-historie table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .te-historie td { padding: 3px 6px 3px 0; }
  .te-osoba { margin-top: 6px; }
  .te-osoba .radek { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px;
                     border-bottom: 1px solid var(--border); }
  .te-osoba .radek:last-child { border-bottom: 0; }
  /* karta člověka je na šířku: vlevo údaje, vpravo svěřená technika — ať se vejde bez rolování */
  .so-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
  .so-grid #soTechnika { border-left: 1px solid var(--border); padding-left: 20px; }
  .so-grid #soTechnika .nadpis { display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
                                 font-size: 15px; font-weight: 800; color: var(--on-bg); }
  .so-grid #soTechnika .nadpis .btn-undo { margin-left: auto; }
  .te-osoba .radek { align-items: flex-start; }
  .te-osoba .nazev { flex: 1; min-width: 0; font-weight: 600; line-height: 1.35; }
  .te-osoba .nazev .vc { display: block; font-weight: 400; }
  .te-osoba .vc { color: var(--muted); font-size: 12px; }
  /* tlačítka u řádku techniky: bez mezer mezi nimi, ať se pět ikon vejde do sloupce */
  td.te-akce { text-align: right; white-space: nowrap; font-size: 0; padding-right: 8px; }
  /* volitelné ikony mají pevné místo, ať jsou tlačítka pod sebou zarovnaná */
  .te-slot { display: inline-block; width: 28px; text-align: center; vertical-align: middle; }
  .te-slot .btn-del { padding-left: 0; padding-right: 0; width: 100%; }
  .vc-varovani { display: none; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--red); }
  .vc-varovani.show { display: block; }
  /* užší mezery mezi sloupci — ušetřené místo dostane název položky */
  #technikaList th, #technikaList td { padding-left: 8px; padding-right: 8px; }
  /* popisek i šipka se musí vejít do svého sloupce — jinak šipka přeteče k sousedovi */
  #technikaList thead th { overflow: hidden; text-overflow: ellipsis; }
  #technikaList thead th .arr { margin-left: 2px; }
  /* podepsaný sken protokolu */
  .podpis-ok { color: var(--green); text-decoration: none; font-weight: 700; font-size: 12.5px; }
  .podpis-ok:hover { text-decoration: underline; }
  .podpis-chybi { color: var(--muted); font-size: 12px; }
  .te-historie td.podpis { white-space: nowrap; }
  .te-historie .btn-undo { font-size: 11.5px; padding: 2px 7px; }
  td.te-akce .podpis-ok, .te-osoba .podpis-ok { font-size: 15px; padding: 4px 5px; }
  /* pořizovací cena je hlavní číslo dialogu — velké číslice zarovnané doprava */
  #technikaOverlay #teCena { font-size: 21px; font-weight: 800; padding: 10px 14px; text-align: right;
                             font-variant-numeric: tabular-nums; letter-spacing: .2px; }
  #technikaOverlay #teMena { font-size: 15px; font-weight: 700; }
  .btn-odkaz { border: 0; background: none; padding: 0; margin-left: auto; cursor: pointer;
               font: inherit; font-size: 11.5px; font-weight: 600; color: var(--blue); }
  .btn-odkaz:hover { text-decoration: underline; }
  .ucet-karta .popis { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
  /* jméno, e-mail i poznámka na jednom řádku — karta pak nezabírá zbytečně tři */
  .ucet-hlavicka { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .ucet-hlavicka h3 { margin: 0; }
  .ucet-hlavicka .popis { margin: 0; }
  .ucet-hlavicka .ucet-pozn { font-size: 12.5px; color: var(--muted); margin-left: auto; }
  .ucet-karta label { display: block; font-size: 12px; font-weight: 600; color: var(--on-bg-muted); margin: 8px 0 3px; }
  .ucet-karta input { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px;
                      padding: 9px 12px; font-size: 13.5px; font-family: inherit; background: #fff; outline: none; }
  .ucet-karta input:focus { border-color: var(--blue); }
  .ucet-karta .radek { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
  .ucet-karta .radek > div { flex: 1; min-width: 150px; }
  .ucet-karta .akce { margin-top: 14px; display: flex; gap: 8px; align-items: center; }
  .ucet-stav { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
  .ucet-stav.ano { background: #e7f6ed; color: #1f7a4b; }
  .ucet-stav.ne { background: #fdecec; color: #b93030; }
  .ucet-hlaska { font-size: 12.5px; font-weight: 600; margin-left: 4px; }
  .ucet-hlaska.ok { color: var(--green); }
  .ucet-hlaska.chyba { color: var(--red); }
  .totp-kody { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: #fff;
               border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
               font-family: ui-monospace, monospace; font-size: 15px; font-weight: 700;
               letter-spacing: 1px; color: var(--on-bg); }
  /* zámek sekce Finance */
  .fin-zamek { display: flex; justify-content: center; padding: 60px 20px; }
  .fin-zamek-box { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 30px 34px 26px;
                   width: 320px; text-align: center; box-shadow: 0 6px 24px rgba(22, 25, 44, .07); }
  .fin-zamek-ico { color: var(--blue); width: 40px; height: 40px; margin: 0 auto 10px; }
  .fin-zamek-ico svg { width: 100%; height: 100%; }
  .fin-zamek-box h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--on-bg); }
  .fin-zamek-popis { margin: 0 0 16px; font-size: 13px; color: var(--muted); }
  .fin-pin { width: 100%; text-align: center; font-size: 26px; font-weight: 800; letter-spacing: 10px;
             padding: 10px 12px; font-variant-numeric: tabular-nums; }
  .fin-chyba { min-height: 18px; margin: 8px 0 10px; font-size: 13px; font-weight: 700; color: #d94a4a; }
  .swk-napoveda { margin-top: 12px; font-size: 13px; color: var(--on-bg-muted); }
  /* ruční odškrtnutí faktury za předplatné */
  .sw-mam { border: 1px solid transparent; background: transparent; border-radius: 8px; cursor: pointer;
            font-family: inherit; font-size: 12.5px; font-weight: 800; padding: 4px 10px; white-space: nowrap; }
  .sw-mam.nemam { color: #d94a4a; border-color: #f3cfcf; background: #fdf3f3; }
  .sw-mam.nemam:hover { border-color: #d94a4a; background: #fbe9e9; }
  .sw-mam.mam { color: #1f7a4b; border-color: #bfe4cd; background: #eef8f2; }
  .sw-mam.mam:hover { border-color: #2e9e63; background: #e3f4ea; }
  .swk-den .swk-kolecko { position: absolute; left: 7px; bottom: 6px; width: 11px; height: 11px;
                          border-radius: 999px; box-shadow: 0 0 0 2px #fff; }
  .swk-kolecko.ok { background: #2e9e63; }
  .swk-kolecko.castecne { background: #e8912d; }
  .swk-kolecko.chybi { background: #d94a4a; }
  /* rozpis plateb vybraného dne — tabulka má vždy bílé pozadí, ne barvu pracovního prostředí */
  /* rozpis dne nemá být přes celou obrazovku — jen tak široký, aby se vešly čtyři údaje */
  .swk-detail { margin: 14px auto 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
                max-width: 940px; background: #fff; }   /* vycentrovaný pod kalendářem */
  .swk-detail td.sw-mam-bunka { width: 130px; text-align: right; padding-left: 0; }
  /* min-width: 0 přebíjí globální min-width tabulek — jinak poslední sloupec (částka)
     vyjede za okraj a schová se pod overflow:hidden */
  /* souhrn za dodavatele pod grafem — stejně úzká tabulka jako rozpis dne */
  /* .section sama nemá vnitřní odsazení — nadpis by se jinak lepil na rámeček */
  .swk-dod { max-width: 760px; margin-left: auto; margin-right: auto; padding: 14px 16px 10px; }
  .swk-dod h3 { font-size: 16px; font-weight: 800; color: var(--on-bg); margin: 0 0 12px; }
  .swk-dod table { width: 100%; min-width: 0; border-collapse: collapse; background: #fff; }
  .swk-dod td { padding: 7px 10px; font-size: 13px; border-bottom: 1px solid var(--border); }
  /* krajní sloupce lícují s nadpisem a s pravým okrajem boxu */
  .swk-dod td:first-child { padding-left: 0; }
  .swk-dod td:last-child { padding-right: 0; }
  .swk-dod tr:last-child td { border-bottom: none; }
  .swk-dod-pocet, .swk-dod-meny { color: var(--muted); font-size: 12px; }
  /* součet musí být na první pohled odlišný od částek nad ním */
  .swk-dod-celkem td { border-top: 2px solid var(--border); background: #fafbfd;
                       padding-top: 11px; padding-bottom: 11px; font-size: 14px; }
  .swk-dod-celkem td:last-child b { font-size: 17px; }
  /* nadpis souhrnu vlevo, přepínač pohledu vpravo */
  /* delší podnadpis („rozpočítané náklady") dřív odsunul přepínače na druhý řádek —
     titulek se proto smrskává a ovládání drží vpravo v jednom bloku */
  /* nadpis a ovládání v jednom řádku, popisek pod nimi přes celou šířku — vedle ovládání
     by se do zbylých ~200 px nevešel a lámal se na dva řádky */
  .swk-dod-hlava { display: flex; align-items: center; justify-content: space-between;
    flex-wrap: nowrap; gap: 16px; margin-bottom: 2px; }
  .swk-dod-popis { margin-bottom: 10px; }
  .swk-dod-ovladani { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
    flex: 0 0 auto; }
  .swk-dod-ovladani .graf-prep { margin-left: 0; }
  .swk-dod-hlava h3 { margin: 0 0 2px; }
  .swk-detail table { width: 100%; min-width: 0; border-collapse: collapse; background: #fff; }
  /* šířky musí nechat dost místa na částku vpravo — tabulka má table-layout: fixed,
     takže při součtu blízkém 100 % částka vyjede za okraj a schová se pod overflow:hidden */
  .swk-detail td:first-child { width: 32%; }
  .swk-detail td:nth-child(2) { width: 22%; }
  .swk-detail td:nth-child(3) { width: 14%; }
  .swk-detail td { background: #fff; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
  .swk-detail tr:last-child td { border-bottom: 0; }
  .swk-detail tbody tr:hover td { background: var(--sel-bg); }   /* řádek je proklik na plán */
  .swk-detail td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
  .swk-detail td:nth-child(2) { color: var(--muted); }
  .swk-detail td:nth-child(3) { color: var(--muted); font-size: 12.5px; }

  /* náhled importu tankování: rozpis co→co u změněného lístku */
  #tankImportTable .ti-zmena { font-size: 11.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; }
  #tankImportTable td, #tankImportTable th { padding: 7px 8px; }
  #tankImportTable td.due, #tankImportTable td.num, #tankImportTable tbody td:nth-child(5) { white-space: nowrap; }
  #tankImportTable .ti-zmena s { opacity: .7; }
  /* tělo tabulky je vždy bílé — i uvnitř dialogu, kde má okno barvu pozadí firmy */
  #tankImportTable table { width: 100%; border-collapse: collapse; background: #fff; }
  #tankImportTable tbody td { background: #fff; }
  /* hlavička i řádek filtrů drží nahoře — bez toho hlavička odscrollovala a filtry
     zůstaly viset mezi řádky, kde je překrývaly buňky (nebylo vidět, co se píše) */
  #tankImportTable thead tr:first-child th { background: #fff; position: sticky; top: 0; z-index: 5; }
  #tankImportPrep .btn { min-height: 34px; padding: 6px 14px; font-size: 10.5px; }
  #tankImportTable tr.filtr-radek th { z-index: 4; }
  /* vlastní našeptávač — nativní datalist neumí říct, co se má zobrazit a co vložit */
  .nasept { position: relative; }
  /* víc bankovních účtů subjektu (Adresář) — řádek: hlavní · účet · poznámka · koš */
  .de-ucty { display: flex; flex-direction: column; gap: 6px; }
  .de-ucet { display: grid; grid-template-columns: 74px minmax(0, 1fr) 150px 34px; gap: 6px; align-items: center; }
  .modal .de-ucet input { margin: 0; }
  .de-ucet .de-hl { height: 37px; padding: 0 6px; border: 1.5px solid #dfe3ee; border-radius: 8px; background: #fff;
    font: inherit; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; }
  .de-ucet .de-hl.zap { background: var(--blue); border-color: var(--blue); color: #fff; }
  .de-ucet .de-kos { height: 37px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; }
  .de-ucet .de-kos:hover { color: var(--red); }
  .modal .de-ucet-pridat { margin-top: 6px; align-self: flex-start; }
  .nasept-menu { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 40;
                 background: #fff; border: 1px solid var(--border); border-radius: 10px;
                 box-shadow: 0 8px 24px rgba(20,25,45,.14); max-height: 240px; overflow-y: auto; }
  .nasept-menu.show { display: block; }
  /* v dialogu je nabídka fixed (viz umistiNabidku) — musí přebít i sousední pole a lišty */
  .modal .nasept-menu { z-index: 210; }
  .nasept-polozka { padding: 8px 12px; font-size: 13.5px; cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
  .nasept-polozka:hover, .nasept-polozka.vybrana { background: var(--sel-bg); }
  .nasept-polozka .np-firma { font-weight: 700; white-space: nowrap; }
  .nasept-polozka .np-adresa { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tank-dph-hint { font-size: 12px; color: var(--muted); margin: 5px 0 0; padding-left: 13px; }
  #kartaOverlay #kCislo, #kartaOverlay #kPlatnost { text-align: center; font-variant-numeric: tabular-nums;
                                                    letter-spacing: 1.5px; font-weight: 700; }
  /* Jistina je hlavní číslo okna půjčky — velká a tučná, stejně jako částka v okně platby.
     Pevná výška všech tří polí drží popisky i spodní hrany v jedné rovině. */
  #loanOverlay #lJistina { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .2px; }
  /* sazba a dní v roce jsou krátká čísla — pole na šířku obsahu, ne přes půl okna */
  #loanOverlay #lUrok, #loanOverlay #lDnyVRoce { width: 120px; display: block; }
  #loanOverlay .row-castka input, #loanOverlay .row-castka select { height: 46px; }
  #loanOverlay #lMena, #loanOverlay #lSplatkaJistiny { font-size: 15px; font-weight: 700; }
  .modal .row3 { display: grid; gap: 10px; align-items: end; grid-template-columns: 1.2fr 92px 1.2fr; }
  /* frekvence · stav · platí od · termín — čtyři krátké hodnoty na jednom řádku */
  .modal .row4 { display: grid; gap: 10px; align-items: end;
                 grid-template-columns: 1fr 92px 1.5fr 1fr; }
  /* dialog platby: firma + IČO na jednom řádku, pod tím VS, účet a text faktury */
  #overlay .row-firma-ico { display: grid; grid-template-columns: 1fr 120px; gap: 10px; align-items: end; }
  #overlay .row-vs-ucet { display: grid; grid-template-columns: 118px 152px 1fr; gap: 10px; align-items: end; }
  @media screen and (max-width: 620px) {
    #overlay .row-firma-ico, #overlay .row-vs-ucet { grid-template-columns: 1fr; }
  }
  /* u plánu s hodně licencemi ujížděla tlačítka dolů — spodní lišta se drží u dna dialogu.
     bottom: -24px + spodní padding = lišta kryje i vnitřní okraj dialogu, nic pod ní neprosvítá */
  /* Tisk karty stojí vlevo u okraje, samotné akce dialogu (Zrušit/Uložit) zůstávají vpravo —
     je to jiný druh akce než uložení a nemá se s ním plést. */
  /* Zůstatek dovolené — jediné číslo, kvůli kterému se dialog otevírá, takže velké.
     Počítá se živě z polí nad ním, ne ze serveru: po přepsání čerpání musí sedět hned. */
  .dov-zustatek-box { display: flex; flex-direction: column; justify-content: center;
    background: #eef3fb; border: 1px solid var(--border); border-radius: 10px;
    padding: 8px 14px; min-height: 74px; }
  .dov-zustatek-lbl { font-size: 11px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--muted); }
  .dov-zustatek { font-size: 26px; font-weight: 800; line-height: 1.15; color: var(--text);
    font-variant-numeric: tabular-nums; }
  .dov-zustatek.zaporny { color: #b4460f; }
  .dov-zustatek-vzorec { font-size: 11.5px; color: var(--muted); margin-top: 1px; }

  .sw-export { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; }
  .sw-export-popis { font-size: 12px; color: var(--muted); font-weight: 650; }

  #swProduktOverlay .actions { position: sticky; bottom: -24px; z-index: 3; background: var(--bg);
                               padding: 12px 0 24px; margin-top: 10px;
                               box-shadow: 0 -10px 14px -10px rgba(20, 25, 45, .25); }
  /* nadpis a hlavička sloupců drží nahoře, samotný seznam lidí se roluje ve svém okně */
  #swProduktOverlay .sp-licence-hlavicka { position: sticky; top: -24px; z-index: 3;
                                           background: var(--bg); padding-top: 16px; }
  /* roluje celý dialog (jeden posuvník) — seznam licencí má vlastní výšku podle počtu řádků;
     nadpis se seznamem i spodní lišta zůstávají ukotvené, takže se v dlouhém seznamu neztratíš */
  #swProduktOverlay #spLicence { overflow: visible; }
  /* nadpis seznamu licencí je předěl mezi údaji plánu a lidmi — proto větší a na střed */
  #swProduktOverlay #spLicenceLabel { text-align: center; padding-left: 0; font-size: 16px;
                                      font-weight: 800; color: var(--on-bg); margin: 2px 0 2px; }
  #swProduktOverlay #spLicenceHint { text-align: center; margin-bottom: 6px; }
  /* na 13" displeji se dialog musí vejít i s několika řádky licencí — sevřenější formulář */
  @media (max-height: 900px) {
    #swProduktOverlay .modal label { margin: 4px 0 2px; }
    #swProduktOverlay .modal input, #swProduktOverlay .modal select { padding: 7px 12px; }
    #swProduktOverlay .sp-pp { padding-top: 6px; margin-top: 6px; }
    #swProduktOverlay .sp-licence-hlavicka { padding-top: 10px; }
    #swProduktOverlay .actions { padding-top: 8px; }
    #swProduktOverlay .sp-radek { margin-bottom: 5px; }
  }
  /* frekvence · stav · termín vedle sebe — samé krátké hodnoty, plná šířka by je zbytečně roztáhla */
  /* Pole Plati od je cele datum (kalendar + DD MM RRRR), tak potrebuje nejvic mista */
  #swProduktOverlay .row4.sp-radek-frekvence { grid-template-columns: 1.15fr 0.85fr 1.5fr 1.15fr; }
  /* cena, měna a DPH na jednom řádku — na roletku přes celou šířku je to málo textu */
  #swProduktOverlay .row-castka { grid-template-columns: 1fr 92px auto; }
  #swProduktOverlay .row3.sp-radek-zarazeni { grid-template-columns: 1fr 1fr 1fr; }
  /* v řádku plánu přibylo třetí tlačítko (kopie) — místo se bere nejdřív z mezer mezi
     sloupci, teprve pak ze šířky sloupců s textem */
  #swProdukty thead th, #swProdukty tbody td { padding-left: 6px; padding-right: 6px; }
  #swProdukty td.swp-akce .btn-del { padding-left: 4px; padding-right: 4px; }
  /* Předplatné software a Servery jsou dvě samostatné tabulky — nadpis musí být na první
     pohled vidět, jinak se obě splynou v jeden dlouhý seznam dodavatelů */
  .swk-dod h3.swk-dod-nadpis, .swk-dod-hlava h3.swk-dod-nadpis {
    font-size: 28px; font-weight: 900; letter-spacing: .4px; line-height: 1.15;
    text-transform: uppercase; margin: 0 0 4px; }
  .swk-dod-oboji { display: flex; align-items: baseline; justify-content: flex-end; gap: 12px;
    max-width: 760px; margin: -6px auto 0; padding: 0 16px 4px;
    font-size: 13px; color: var(--on-bg-muted); }
  .swk-dod-oboji b { font-size: 17px; font-weight: 800; color: var(--on-bg); }
  #swProduktOverlay .sp-dph-prep { margin-left: 0; height: 38px; align-items: stretch; }
  #swProduktOverlay .sp-dph-prep button { padding: 0 14px; }
  /* stejné odsazení zleva jako mají štítky polí, jinak text vyčnívá z řady */
  .sp-dph-popis { font-size: 12px; color: var(--muted); margin: 6px 0 10px; min-height: 16px;
    padding-left: 13px; }
  .modal select:disabled { background: var(--card); color: var(--muted); cursor: not-allowed; }
  .modal .sekce-checks label { margin: 0; padding-left: 0; display: flex; align-items: center; gap: 17px; }
  /* malý přepínač ON/OFF místo checkboxu (nastavení firmy a uživatele) */
  .prep { position: relative; display: inline-block; width: 34px; height: 18px; flex: 0 0 auto; }
  /* selektor s [type=checkbox] — obecná pravidla checkboxů (16px) mají vyšší specificitu
     a klikací plochu přepínače zmenšovala na půlku dráhy */
  .prep input[type=checkbox] { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
                               flex: none; opacity: 0; margin: 0; padding: 0; cursor: pointer; }
  /* klikací je JEN oblast přepínače (a křížek) — klik do textu nebo volného místa řádku nepřepíná */
  .modal .sekce-checks label, .pok-prava label { pointer-events: none; }
  .modal .sekce-checks label .prep, .pok-prava label .prep,
  .modal .sekce-checks label .sekce-del { pointer-events: auto; }
  /* přepínač „tam i zpět" v zápisu cesty — větší a zarovnaný na levou hranu polí */
  /* .modal label má padding-left: 13px — musí se přebít silnějším selektorem,
     jinak přepínač odskočí od levé hrany polí */
  .modal .j-obe, .j-obe { display: flex; align-items: center; gap: 12px; margin: 16px 0 2px;
                          padding-left: 0; cursor: pointer; }
  .j-obe .prep { width: 48px; height: 26px; }
  .j-obe .prep-drah::before { top: 3px; left: 3px; width: 20px; height: 20px; }
  .j-obe .prep input:checked + .prep-drah::before { left: 25px; }
  .j-obe .prep-drah::after { font-size: 8.5px; right: 6px; }
  .j-obe .prep input:checked + .prep-drah::after { left: 7px; right: auto; }
  .j-obe .j-obe-text { display: flex; flex-direction: column; gap: 1px; }
  .j-obe .j-obe-text > span:first-child { font-size: 13.5px; font-weight: 650; color: var(--on-bg); }
  .j-obe .tank-dph-hint { font-weight: 500; margin: 0; }
  .prep-drah { position: absolute; inset: 0; border-radius: 999px; background: #9aa0b4; transition: background .15s; pointer-events: none; }
  .prep-drah::before { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
                       border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
  .prep-drah::after { content: 'OFF'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
                      font-size: 7px; font-weight: 800; color: #fff; letter-spacing: .3px; }
  /* strom práv v dialogu uživatele — stejné skupiny jako v menu, dva sloupce přepínačů.
     MŘÍŽKA, ne pružný řádek: šířku sloupce nesmí dostat sám přepínač, roztáhla by se mu
     dráha a kulička (posun má napevno 18 px) by dojela jen doprostřed. */
  #ueCompanyChecks .up-firma-hlava { display: flex; align-items: center; gap: 10px; padding: 0; margin: 10px 0 0; }
  .up-firma-nazev { font-weight: 800; font-size: 14.5px; color: var(--on-bg); }
  .up-sloupce { margin-left: auto; display: flex; gap: 9px; padding-right: 10px;
                font-size: 10.5px; font-weight: 700; color: var(--muted);
                text-transform: uppercase; letter-spacing: .4px; }
  .up-sloupce span { width: 46px; text-align: center; }
  .up-strom { margin: 8px 0 12px; }
  /* Selektor musí začínat ID: řádky sekcí jsou <label> a obecné `.modal .sekce-checks label`
     (display:flex, gap 17px) má stejnou sílu jako `.modal .up-radek` — přepínače pak ujížděly
     podle délky názvu, zatímco řádky pokladen (<div>) mřížku držely. */
  #ueCompanyChecks .up-radek { display: grid; grid-template-columns: 17px 1fr 46px 46px;
              align-items: center; gap: 9px; padding: 5px 10px; margin: 0;
              border-radius: 8px; cursor: pointer; }
  #ueCompanyChecks .up-radek:hover { background: #f2f4fa; }
  .up-nazev { font-size: 13.5px; font-weight: 600; }
  .up-radek > .prep, .up-pomlcka, .up-vzdy { justify-self: center; }
  .up-pomlcka { color: var(--muted); }
  #ueCompanyChecks .up-pevny { cursor: default; opacity: .6; }
  #ueCompanyChecks .up-pevny:hover { background: none; }
  .up-vzdy { font-size: 11px; font-weight: 700; color: var(--muted); border: 1px solid var(--border);
             border-radius: 6px; padding: 1px 6px; }
  .up-znak { font-size: 10.5px; font-weight: 700; color: #96620a; background: var(--orange-bg);
             border-radius: 5px; padding: 1px 5px; margin-left: 7px; }
  .up-hlav { display: flex; gap: 9px; }
  .prep-maly { transform: scale(.78); }
  #ueCompanyChecks .up-pok { grid-template-columns: 1fr 46px 46px; }
  #ueCompanyChecks .up-pok .pok-nazev { font-size: 13.5px; font-weight: 600; }
  #ueCompanyChecks .up-pok .pok-zapis { display: contents; }
  #ueCompanyChecks .up-pok .pok-zapis .prep { justify-self: center; }
  /* Zápis je jiná barva než vidění: zelená = „vidí", jantarová = „smí měnit data".
     Dva stejně zelené přepínače vedle sebe se pletou; červená je vyhrazená mazání. */
  .up-radek > .prep:last-child input:checked + .prep-drah,
  .up-hlav .prep:last-child input:checked + .prep-drah,
  #ueCompanyChecks .up-pok .pok-zapis input:checked + .prep-drah { background: #d9840a; }
  /* strom „Menu a funkce firmy" v dialogu firmy — skupiny a položky přesně jako v menu */
  .cm-grp { margin-bottom: 8px; }
  .modal .cm-head { width: 100%; display: flex; align-items: center; gap: 8px; background: #3d4460;
              color: #fff; border: 0; border-radius: 9px; padding: 7px 9px 7px 12px;
              font: 700 12px/1.2 inherit; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; }
  .cm-pocet { margin-left: auto; font-weight: 600; font-size: 11.5px; opacity: .75;
              letter-spacing: 0; text-transform: none; }
  /* Šipka musí být vidět, že se jí kliká — malý znak v tmavé liště splyne a člověk
     netuší, že se skupina dá sbalit. Proto kolečko s podkladem, ne holý znak. */
  .cm-chev { font-size: 13px; line-height: 1; width: 22px; height: 22px; flex: 0 0 auto;
             display: flex; align-items: center; justify-content: center; border-radius: 50%;
             background: rgba(255,255,255,.16); transition: transform .15s, background .15s; }
  .modal .cm-head:hover .cm-chev { background: rgba(255,255,255,.3); }
  .cm-grp.zavreno .cm-chev { transform: rotate(-90deg); }
  .cm-grp.zavreno .cm-body { display: none; }
  /* Seznam sekcí stojí na bílém, ne na barvě firmy — pilulky přepínačů i ikony na pastelu
     splývaly a blok se hůř četl. */
  .cm-body { padding: 6px 8px 6px 10px; display: flex; flex-direction: column; gap: 1px;
             background: var(--card); border: 1px solid var(--border); border-top: 0;
             border-radius: 0 0 10px 10px; }
  .cm-grp .cm-head { border-radius: 9px 9px 0 0; }
  .cm-grp.zavreno .cm-head { border-radius: 9px; }
  .modal .cm-radek { display: grid; grid-template-columns: 17px 1fr 34px; align-items: center;
              gap: 9px; padding: 6px 10px; margin: 0; border-radius: 8px; cursor: pointer; }
  .modal .cm-radek:hover { background: #f2f4fa; }
  .cm-ico { width: 17px; height: 17px; color: var(--muted); }
  .cm-ico svg { width: 17px; height: 17px; display: block; }
  .cm-nazev { font-size: 14px; font-weight: 600; }
  .modal .cm-pevny { cursor: default; opacity: .6; }
  .modal .cm-pevny:hover { background: none; }
  .cm-vzdy { font-size: 11px; font-weight: 700; color: var(--muted); border: 1px solid var(--border);
             border-radius: 6px; padding: 1px 6px; justify-self: end; }
  .cm-znak { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 7px; }
  .cm-info { font-size: 12.5px; color: var(--muted); padding: 4px 10px 6px; line-height: 1.45; }
  .cm-pok { padding: 2px 10px 4px; }
  .cm-pok .ce-pok-radek { margin-bottom: 6px; }
  .cm-pridat { display: flex; gap: 8px; padding: 8px 10px 2px; }
  .cm-pridat input { flex: 1; }
  .prep input:checked + .prep-drah { background: #34c759; }
  .prep input:checked + .prep-drah::before { left: 18px; }
  .prep input:checked + .prep-drah::after { content: 'ON'; right: auto; left: 5px; }
  /* podřízená práva pokladen pod zapnutou firmou v dialogu uživatele */
  /* mřížka práv: název pokladny | přístup | smí zapisovat — sloupce lícují pod sebou */
  /* názvy firem v dialogu uživatele černě (práva pokladen pod nimi zůstávají šedě) */
  #ueCompanyChecks > label { color: var(--text); font-weight: 600; }

  /* mini tabulka s tenkým šedým rámečkem a linkou mezi řádky pokladen */
  .pok-prava { display: grid; grid-template-columns: 76px 44px auto; gap: 0 10px;
               align-items: center; margin: 4px 0 8px 51px;
               border: 1px solid #b9bfd1; border-radius: 8px; padding: 0 10px; }
  .pok-prava > * { padding: 7px 0; }
  /* jedna souvislá linka mezi řádky — vlastní prvek přes všechny sloupce
     (border po buňkách dělal kusy čar posunuté zmenšeným přepínačem a mezerami) */
  .pok-sep { grid-column: 1 / -1; height: 1px; background: #b9bfd1; padding: 0 !important; }
  /* Finance VF, TM — jen u ABLE, řádek přes celou šířku práv firmy */
  .pok-prava.fin-box { display: block; }
  .fin-prava { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .fin-prava > label { pointer-events: none; display: flex; align-items: center; gap: 8px;
                       font-size: 12px; color: var(--muted); font-weight: 600; margin: 0; padding: 0; }
  .fin-prava > label .prep { pointer-events: auto; transform: scale(.85); }
  .fin-prava .fin-pin-male { width: 118px; margin: 0; padding: 5px 8px; font-size: 13px;
                             letter-spacing: 2px; text-align: center; }
  .fin-prava .fin-hint { flex-basis: 100%; font-size: 11.5px; color: var(--muted); }
  /* komu smí uživatel ve Financích vidět do účtu — seznam přepínačů pod PINem */
  .fin-osoby-prava { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px;
                     margin-top: 6px; padding-left: 2px; }
  .fin-osoby-prava > label { pointer-events: none; display: flex; align-items: center; gap: 8px;
                             font-size: 12px; color: var(--muted); font-weight: 600; margin: 0; padding: 0; }
  .fin-osoby-prava > label .prep { pointer-events: auto; transform: scale(.85); }
  .pok-mriz-2 { grid-template-columns: 76px auto; margin-left: 0; }
  .pok-nazev { font-size: 12px; color: var(--muted); font-weight: 600; }
  /* nadpis nad seznamem přepínačů začíná na stejné hraně jako řádky pod ním */
  .modal label.label-seznam { padding-left: 0; }
  /* názvy sekcí černě, křížek pro odebrání trvale viditelný na konci řádku */
  .sekce-nazev { margin-right: auto; color: var(--text); font-weight: 600; }
  .sekce-del { font-size: 13px; color: var(--muted); }
  .sekce-del:hover { color: var(--red); }
  .pok-prava label { font-size: 12px; color: var(--muted); gap: 8px !important; white-space: nowrap; margin: 0; padding: 0; display: flex; align-items: center; }
  .pok-prava .prep { transform: scale(.85); }
  /* seznam pokladen v dialogu firmy */
  .ce-pok-radek { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border);
                  border-radius: 9px; padding: 7px 10px; margin-bottom: 6px; font-size: 13px; }
  .ce-pok-radek .badge { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ce-pok-radek .ce-pok-nazev { font-weight: 700; color: var(--on-bg); }
  .ce-pok-radek .nav-mena { font-size: 11px; color: var(--muted); font-weight: 700; }
  .ce-pok-radek .ce-pok-akce { margin-left: auto; white-space: nowrap; }
  /* zamčený přepínač (zápis bez přístupu) se nemá tvářit jako klikací */
  .pok-prava .prep:has(input:disabled) { opacity: .45; }
  .pok-prava .prep input:disabled { cursor: not-allowed; }
  .pok-prava label:has(input:disabled) { opacity: .6; }
  .prep input:disabled + .prep-drah { opacity: .4; }
  .prep input:disabled { cursor: not-allowed; }
  /* firemní strana externí půjčky — daná otevřeným prostředím, needitovatelná */
  .loan-fixed {
    border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
    font-size: 13.5px; font-weight: 650; background: var(--bg); color: var(--on-bg-muted);
  }
  .color-picker-field {
    display: flex; align-items: center; gap: 14px; margin: 4px 0 0;
    background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  }
  .modal input.color-swatch-input {
    width: 64px; height: 44px; flex: 0 0 64px; padding: 0; border: 2px solid var(--text);
    border-radius: 10px; cursor: pointer; background: none;
  }
  .color-swatch-input::-webkit-color-swatch-wrapper { padding: 0; border-radius: 8px; }
  .color-swatch-input::-webkit-color-swatch { border: none; border-radius: 8px; }
  .color-swatch-input::-moz-color-swatch { border: none; border-radius: 8px; }
  .color-picker-info { display: flex; flex-direction: column; gap: 3px; }
  .color-picker-info span#ceBarvaHex, .color-picker-info span:first-child {
    font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-transform: uppercase;
  }
  .color-picker-hint { font-size: 12px; color: var(--muted); }
  .modal select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%237a7f95' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
  }
  /* Tři boxy data drží těsně u sebe (bez teček mezi nimi) — čte se to jako jedno datum
     a okno pak nemusí být kvůli datu široké. Ikona kalendáře má vlastní odstup. */
  .date-seg-wrap { display: flex; align-items: center; justify-content: center; gap: 3px; }
  .date-seg-wrap .cal-btn { margin-right: 7px; }
  .modal .date-seg { width: 56px; flex: none; text-align: center; font-variant-numeric: tabular-nums; }
  .modal .date-seg-year { width: 76px; }
  /* datum v půlce dvousloupcového řádku — den a měsíc užší, rok musí zůstat celý */
  .modal .row2 .date-seg { width: 38px; padding-left: 4px; padding-right: 4px; }
  .modal .row2 .date-seg-year { width: 66px; }
  .modal .row2 .date-seg-wrap .cal-btn { margin-right: 4px; }
  /* ikona kalendáře vedle 3 boxů data — otevře nativní výběr, zvolené datum se propíše do boxů */
  .cal-btn { width: 40px; height: 40px; flex: none; border: 1px solid var(--border); background: #fff;
             border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center;
             color: var(--muted); padding: 0; position: relative; }
  .cal-btn:hover { color: var(--blue); border-color: var(--blue); }
  .cal-btn svg { width: 18px; height: 18px; }
  /* vlastní velký kalendář (nativní od prohlížeče je malý a nejde zvětšit) */
  .kal-panel { position: fixed; z-index: 300; width: 316px; background: #fff; border: 1px solid var(--border);
               border-radius: 12px; box-shadow: 0 10px 30px rgba(20,26,51,.22); padding: 12px; }
  .kal-hlava { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .kal-mesic { font-size: 15.5px; font-weight: 800; text-transform: capitalize; }
  .kal-sip { border: 0; background: none; cursor: pointer; font-size: 17px; color: var(--muted);
             padding: 6px 12px; border-radius: 8px; }
  .kal-sip:hover { background: #eef1f8; color: var(--blue); }
  .kal-mriz { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .kal-dnem { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 0 6px; }
  .kal-den { border: 0; background: none; cursor: pointer; text-align: center; padding: 9px 0;
             font-size: 14.5px; font-family: inherit; border-radius: 8px; color: var(--text);
             font-variant-numeric: tabular-nums; }
  .kal-den:hover { background: #e8edfb; }
  .kal-den.jiny-mesic { color: #c2c6d4; }
  .kal-den.dnesek { box-shadow: inset 0 0 0 1.5px var(--blue); font-weight: 700; }
  .kal-den.vybrany { background: var(--blue); color: #fff; font-weight: 700; }
  /* okno úhrady: přehled už uhrazených částí + editovatelná částka */
  .pay-label { display: block; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted);
               text-transform: uppercase; letter-spacing: .3px; margin: 12px 0 4px; }
  .pay-castka-wrap { display: flex; align-items: center; gap: 8px; }
  .pay-castka-wrap input { flex: 1; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .pay-mena { font-size: 14px; font-weight: 600; color: var(--muted); }
  .pay-hint { text-align: left; font-size: 12.5px; color: var(--muted); margin-top: 5px; min-height: 16px; }
  .pay-hint.warn { color: var(--red); font-weight: 600; }
  .pay-casti { text-align: left; background: var(--sel-bg); border: 1px solid #c9d6ff; border-radius: 10px;
               padding: 8px 10px; margin-top: 10px; font-size: 13px; }
  .pay-casti .nadpis { font-size: 11.5px; font-weight: 700; color: var(--muted);
                       text-transform: uppercase; letter-spacing: .3px; margin-bottom: 5px; }
  .pay-casti .radek { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0;
                      font-variant-numeric: tabular-nums; }
  .pay-casti .radek .kdy { color: var(--muted); }
  .pay-casti .soucet { display: flex; justify-content: space-between; gap: 10px; margin-top: 5px;
                       padding-top: 5px; border-top: 1px solid #c9d6ff; font-weight: 700; }
  /* v okně úhrady jsou tlačítka na střed pod vycentrovanými poli s datem (jinde v appce
     zůstávají vpravo, jak je zvykem) */
  #payOverlay .actions { justify-content: center; }
  /* okno platby jen ke čtení (uhrazená platba): pole vypadají jako vypsané údaje, ne jako formulář */
  #overlay.jen-cteni input, #overlay.jen-cteni select, #overlay.jen-cteni textarea {
    background: #f3f5f9; border-color: transparent; cursor: default;
    /* prohlížeč zamčená pole sám šedne — přebít, ať jsou údaje čitelné */
    color: var(--text); -webkit-text-fill-color: var(--text); opacity: 1;
  }
  #overlay.jen-cteni label { color: var(--muted); }
  #overlay.jen-cteni .actions { justify-content: center; }
  /* vlnovka u částky = úrok přepočtený předběžným kurzem (15. den měsíce ještě nenastal) */
  .kurz-pred { color: var(--muted); font-weight: 700; margin-left: 3px; cursor: help; }
  .pole-hint { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.35; }
  .jistina-mode-group { display: flex; gap: 6px; margin: 4px 0 12px; }
  .jistina-mode-group .btn { flex: 1; font-size: 12px; padding: 7px 4px; white-space: nowrap; }
  .modal .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
  .suggest-list {
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; z-index: 50;
    background: #fff; border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,.12); max-height: 220px; overflow-y: auto;
  }
  .suggest-list .suggest-item { padding: 8px 12px; font-size: 13.5px; cursor: pointer; }
  .suggest-list .suggest-item:hover, .suggest-list .suggest-item.hi { background: var(--sel-bg); }

  /* kruhové tlačítko pro zrušení filtrů — stejná výška jako filtrovací pole */
  .filter-clear {
    flex: 0 0 auto; align-self: stretch; aspect-ratio: 1; min-width: 36px;
    border: 1px solid var(--border); border-radius: 50%; background: #fff;
    color: var(--muted); font-size: 20px; line-height: 1; font-weight: 700;
    cursor: pointer; font-family: inherit;
  }
  .filter-clear:hover { border-color: var(--red); color: var(--red); background: var(--red-bg); }

  /* statická ukázka "jak má vypadat tabulka" — vizuálně jako screenshot z Excelu, mimo běžné stylování appky */
  .fmt-shot {
    border: 1px solid #c9c9c9; border-radius: 3px; box-shadow: 0 2px 8px rgba(0,0,0,.14);
    margin-bottom: 16px; overflow: hidden;
  }
  .fmt-shot table {
    width: 100%; min-width: 0; table-layout: auto; border-collapse: collapse;
    font-family: Calibri, Arial, sans-serif; font-size: 12px;
  }
  .fmt-shot th {
    background: #f0f0f0; border: 1px solid #d4d4d4; padding: 4px 9px;
    text-align: left; font-weight: 700; color: #333;
  }
  .fmt-shot td { border: 1px solid #d4d4d4; padding: 4px 9px; color: #222; }
  .fmt-shot tbody tr:nth-child(even) td { background: #f4f8fc; }

  /* ==========================================================================
     MOBIL (iPhone) — vše je uvnitř tohoto media query, takže na PC se NIC nemění.
     Pravidlo: existující desktopová pravidla se nepřepisují, jen se tady přebíjejí.
     Cíl fáze 1: najít platbu a označit ji k úhradě.
     ========================================================================== */
  #navBurger { display: none; }        /* na PC skryté, zobrazí se až na mobilu */
  .mob-only { display: none; }         /* prvky jen pro mobil */



  /* ---------- odkaz na konkrétní záznam ---------- */
  /* ikonka v řádku (Půjčky, Vydané faktury, Technika, Lidé) — v Platbách k úhradě je
     řádek nabitý, tam je tlačítko až v otevřené platbě */
  .ikona-odkaz {
    border: 0; background: none; color: #c2c6d4; cursor: pointer; font-size: 15px;
    padding: 4px 5px; border-radius: 6px; font-family: inherit; line-height: 1;
  }
  .ikona-odkaz:hover { color: var(--blue); background: var(--sel-bg); }
  /* vlaštovka se velikostí řídí písmem okolí, takže stačí měnit font-size sloupce */
  .ik-odkaz { width: 1em; height: 1em; vertical-align: -0.14em; }
  /* koš na mazání (IKONA_KOS) — velikost i barvu bere z tlačítka, stejně jako dřív křížek */
  .ik-kos { width: 1em; height: 1em; vertical-align: -0.14em; }
  .mob-akce-ico .ik-kos, .mob-akce-ico .ik-oko { width: .9em; height: .9em; }
  .mob-akce-ico .ik-odkaz { width: .9em; height: .9em; }
  .ikona-odkaz.odkaz-hotovo { color: var(--green); }
  /* tlačítko v hlavičce karty půjčky a v dialogu platby */
  .btn.btn-odkaz { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
  .btn.btn-odkaz:hover { border-color: var(--blue); color: var(--blue); }
  .btn.btn-odkaz.odkaz-hotovo { border-color: #a7dfbe; color: var(--green); background: #f2fbf5; }
  #overlay .modal > h3 { display: flex; align-items: center; gap: 12px; }
  #mOdkaz { margin-left: auto; min-height: 0; padding: 5px 11px; }

  /* ================= MOBILNÍ VZHLED (telefon) =================
     Všechno je schované za @media, takže vzhled na počítači zůstává beze změny.
     Barvu horní lišty (--firma) dopočítává mobil.js z pastelu firmy; tlačítka
     zůstávají modrá jako na počítači. */
  #mobTop, #mobNav, #mobPanel, #mobZaclona, #mobProfilOkno, #mobPull { display: none; }

  @media screen and (max-width: 760px) {
    :root { --firma: #20458a; --firma-pastel: #d4e3fe; --mob-top-h: 68px; --mob-nav-h: 74px; }

    /* stará horní lišta ustupuje nové; zůstane z ní jen hledání, když se vyvolá lupou */
    .topbar { display: none; }
    body.mob-hledani .topbar {
      display: flex; flex: 0 0 auto; z-index: 30;
      padding: 8px 12px; border-radius: 0 0 16px 16px;
    }
    body.mob-hledani .topbar > *:not(.search) { display: none; }
    body.mob-hledani .search { width: 100%; margin: 0; }
    body.mob-hledani .search .user-menu { display: none; }
    /* při hledání jde o výsledky: dlaždice s čísly a akční tlačítka zmizí,
       zůstanou jen přepínače Označené / Urgentní */
    body.mob-hledani .cards,
    body.mob-hledani .toolbar .btn.primary { display: none; }
    body.mob-hledani .view-sticky { padding-top: 0; }

    /* Hledací pole na telefonu: pořád bílé — po zavření klávesnice ztratí pole focus
       a jinak by zmodralo podbarvením firmy. Text větší a tučnější, ať je hledaný
       výraz vidět, a křížek na vymazání pořádně velký na palec. */
    body.mob-hledani .search input[type=text] {
      background: var(--card); color: var(--text);
      font-size: 18px; font-weight: 700; letter-spacing: -.2px;
      padding: 12px 46px 12px 14px; border-radius: 14px; border-width: 1.5px;
    }
    body.mob-hledani .search input[type=text]::placeholder { font-weight: 500; color: var(--muted); }
    body.mob-hledani .search-clear {
      right: 8px; width: 32px; height: 32px; font-size: 16px; font-weight: 700;
      background: #dde2ef; color: var(--text);
    }
    body.mob-hledani .search-clear:active { background: #c9d0e4; }
    body.mob-hledani .search-clear { --x: 13px; --xt: 2.2px; }
    #navBurger { display: none !important; }

    /* Telefon má pevnou kostru: lišta nahoře, lišta dole a mezi nimi JEDINÁ rolovací
       plocha. Dokud rolovalo celé tělo, iOS ho šlo „přetáhnout" a nad barevnou lištou
       vznikala mezera; a při otevřené klávesnici se spodní lišta odlepovala od spodku. */
    /* Přetažení musí být vypnuté i na KOŘENI, nejen na rolovací ploše: `contain` uvnitř
       zabrání jen řetězení, ale Safari pořád smí „stáhnout" celou stránku (své pull‑to‑refresh)
       — a protože tahle appka je jedna obrazovka bez rolování těla, zůstala po gestu viset
       mezera nad barevnou lištou. Stažení prstem si proto obsluhujeme sami (mobPullStart). */
    html, body { overscroll-behavior-y: none; }
    html { height: 100%; }
    body {
      height: 100dvh; overflow: hidden;
      display: flex; flex-direction: column;
      padding-bottom: 0;
    }
    .layout { flex: 1 1 auto; min-height: 0; display: block; position: relative; }
    .content {
      height: 100%; margin-left: 0;
      overflow-y: auto; -webkit-overflow-scrolling: touch;
      overscroll-behavior: none;         /* ani vlastní pružení — tažení řeší mobPullStart */
    }

    /* ---- stažení prstem = obnovit data ---- */
    /* Posouvá se obal rolovací plochy, ne ona sama: kdyby se hýbala ona, iOS by při
       transformu ztratil pozici rolování. Přechod je jen při návratu (třída .pull-zpet),
       ať prst táhne obsah přesně s sebou. */
    .layout.pull-zpet { transition: transform .22s ease-out; }
    /* sedí nad plochou a jede s ní dolů, takže se ukáže přesně v odhalené mezeře */
    #mobPull {
      position: absolute; top: -52px; left: 0; right: 0; height: 52px;
      display: none; align-items: flex-end; justify-content: center; padding-bottom: 10px;
      pointer-events: none;
    }
    body.mob-pull #mobPull { display: flex; }
    .mob-pull-kolo {
      width: 26px; height: 26px; border-radius: 50%;
      border: 2.5px solid var(--border); border-top-color: var(--blue);
      opacity: var(--pull-sila, 0);
      transform: rotate(calc(var(--pull-sila, 0) * 360deg));
    }
    body.mob-pull-bezi .mob-pull-kolo { opacity: 1; animation: mobPullToc .7s linear infinite; }
    @keyframes mobPullToc { to { transform: rotate(360deg); } }

    /* Podle schváleného návrhu: rovný spodní okraj (ne zaoblený dolů) a vlevo hamburger
       na sekce. Barva firmy, velikost nadpisu i tři kolečka vpravo zůstávají z fáze 1. */
    #mobTop {
      /* order: tělo je flexový sloupec a lišty patří na jeho kraje; bez toho stačí,
         aby se prvek v DOM ocitl jinde, a lišta se vykreslí uprostřed nebo až dole */
      display: block; flex: 0 0 auto; order: -1; z-index: 35;
      background: var(--firma); color: #fff;
      padding: 10px 14px 12px; border-radius: 0;
    }
    .mob-radek { display: flex; align-items: center; gap: 9px; }
    .mob-ham {
      width: 30px; height: 30px; flex: 0 0 30px; padding: 0; border: 0; background: none;
      color: #fff; cursor: pointer; display: grid; place-items: center;
    }
    .mob-ham svg { width: 26px; height: 26px; }
    #mobNadpis {
      margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.5px;
      flex: 1 1 auto; min-width: 0; color: #fff;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mob-kol {
      width: 42px; height: 42px; flex: 0 0 42px; padding: 0;
      border: 1.5px solid rgba(255,255,255,.45); background: rgba(255,255,255,.12);
      border-radius: 50%; display: grid; place-items: center; color: #fff; cursor: pointer;
    }
    .mob-kol svg { width: 23px; height: 23px; }
    .mob-kol:active { background: rgba(255,255,255,.26); }
    /* firma je poznat i na tmavé liště — kolečko nese její pastel a monogram */
    .mob-kol.firma {
      background: var(--firma-pastel); color: var(--firma);
      border-color: rgba(255,255,255,.7); font-size: 15.5px; font-weight: 800; letter-spacing: -.3px;
    }
    .mob-kol.svetle { background: #fff; color: var(--text); border-color: var(--border); }

    /* ---- spodní lišta ---- */
    #mobNav:empty { display: none; }         /* před přihlášením v ní nic není */
    body.mob-klavesnice #mobNav { display: none; }   /* při psaní lišta ustoupí klávesnici */
    /* tmavá jako v návrhu; velikost ikon i popisků zůstává z fáze 1, ať je to čitelné */
    #mobNav {
      display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px;
      flex: 0 0 auto; order: 99; z-index: 36;
      background: var(--firma); border-top: 0; border-radius: 0;
      padding: 6px 2px calc(8px + env(safe-area-inset-bottom, 0px));
    }
    #mobNav button {
      border: 0; background: none; font: inherit; color: rgba(255,255,255,.62); cursor: pointer;
      -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 3px; padding: 6px 0; border-radius: 13px; min-height: 58px; overflow: hidden;
    }
    #mobNav button span:last-child { font-size: 12.5px; font-weight: 600; letter-spacing: -.2px; }
    #mobNav .mob-ico { display: block; }
    #mobNav .mob-ico svg { width: 24px; height: 24px; opacity: .7; }
    /* aktivní sekce se pozná bílou barvou, ne podbarvením — v návrhu žádné není */
    #mobNav button.aktivni { color: #fff; background: none; }
    #mobNav button.aktivni .mob-ico svg { opacity: 1; }

    /* ---- panel zdola ---- */
    #mobZaclona { position: fixed; inset: 0; background: rgba(20,26,51,.5); z-index: 60; }
    #mobZaclona.zobraz { display: block; }
    #mobPanel {
      display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
      background: var(--card); border-radius: 24px 24px 0 0;
      padding: 8px 16px calc(22px + env(safe-area-inset-bottom, 0px));
      transform: translateY(101%); transition: transform .22s ease;
      max-height: 86dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    #mobPanel.zobraz { transform: translateY(0); }
    .mob-uchyt { width: 46px; height: 5px; border-radius: 5px; background: #d3d8e6; margin: 6px auto 14px; }
    #mobPanel h4 { margin: 0 0 3px; font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
    .mob-podnadpis { font-size: 14.5px; color: var(--muted); margin-bottom: 14px; }

    .mob-akce, .mob-volba, .mob-radek-odkaz {
      display: flex; align-items: center; gap: 13px; width: 100%; margin-bottom: 9px;
      border: 1px solid var(--border); background: var(--card); border-radius: 15px;
      padding: 14px 16px; font: inherit; font-size: 17px; font-weight: 600; color: var(--text);
      cursor: pointer; text-align: left; min-height: 56px;
    }
    .mob-akce.hlavni { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; justify-content: center; }
    .mob-akce-ico { width: 24px; flex: 0 0 24px; color: var(--blue); display: grid; place-items: center; }
    .mob-akce-ico svg { width: 23px; height: 23px; }
    .mob-akce .sip, .mob-radek-odkaz .sip { margin-left: auto; color: #b9bfd4; font-size: 20px; }
    .mob-volba.zap { border-color: var(--blue); background: var(--sel-bg); color: var(--blue); }
    /* otevřená pokladna v rychlém přepínači (dlouhý stisk v liště) */
    .mob-akce.zap { border-color: var(--blue); background: var(--sel-bg); color: var(--blue); font-weight: 700; }
    /* ---- hamburger: skupiny jako v postranním menu na počítači ---- */
    /* nastavení spodní lišty není sekce — odlišené barvou a nahoře nad seznamem */
    .mob-akce-nastav {
      background: #eef1fb; border-color: #ccd5f2; color: #2f3d6b; font-weight: 700;
      margin-bottom: 10px;
    }
    .mob-akce-nastav .mob-akce-ico { color: #2f3d6b; }
    .mob-akce-nastav .sip { color: #97a2c8; }
    /* dokud není nic vybrané, Uložit nemá co dělat */
    .mob-akce.hlavni.nelze { background: #b9c1d8; border-color: #b9c1d8; cursor: default; }
    .mob-skupina { margin: 6px 0; }
    /* ---- proužek s pořadím sekcí v liště (nahoře ve „Co má být ve spodní liště") ---- */
    .poradi-nadpis { font: 700 11.5px/1 system-ui, sans-serif; letter-spacing: .09em;
      text-transform: uppercase; color: var(--muted); margin: 2px 2px 8px; }
    .poradi-radek { display: flex; align-items: center; gap: 8px; background: var(--card);
      border: 1px solid var(--border); border-radius: 12px; padding: 8px 8px 8px 10px; margin-bottom: 6px; }
    .poradi-cislo { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px; background: var(--bg);
      color: var(--muted); font: 700 12px/22px system-ui, sans-serif; text-align: center; }
    .poradi-radek .mob-akce-ico { width: 22px; flex: 0 0 22px; }
    .poradi-radek .mob-akce-ico svg { width: 21px; height: 21px; }
    .poradi-nazev { flex: 1 1 auto; min-width: 0; font: 600 15px/1.2 system-ui, sans-serif;
      color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .poradi-sip { width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid var(--border);
      background: #fff; border-radius: 9px; color: var(--text); font-size: 12px; cursor: pointer; }
    .poradi-sip:disabled { color: #cbd0de; background: #f6f7fb; cursor: default; }
    .poradi-pryc { width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid #f3c4c1;
      background: var(--red-bg); border-radius: 9px; color: #b3352f; font-size: 15px; cursor: pointer; }
    .poradi-oddel { border: 0; border-top: 1px solid var(--border); margin: 14px 0 12px; }

    /* hlavička skupiny je tmavá jako v postranním menu na počítači */
    .mob-skupina-hlava {
      display: flex; align-items: center; gap: 10px; width: 100%;
      border: 1px solid #3d4460; background: #3d4460; border-radius: 12px;
      padding: 13px 14px; color: #fff; cursor: pointer;
      /* rozepsané, ne zkratkou — `inherit` ve `font:` není platná rodina a shodilo by
         celé pravidlo (hlavička skupiny v hamburgeru pak měla výchozích 13,3 px) */
      font-family: inherit; font-size: 15.5px; font-weight: 700; line-height: 1.2;
    }
    .mob-skupina-hlava .pocet {
      font-size: 12.5px; font-weight: 700; color: #fff;
      background: rgba(255,255,255,.18); border-radius: 999px; padding: 2px 9px;
    }
    .mob-skupina-hlava .chev { margin-left: auto; color: #c3cade; font-size: 13px;
      transition: transform .15s; }
    .mob-skupina.otevrena .mob-skupina-hlava { background: #4a527a; border-color: #4a527a; }
    .mob-skupina.otevrena .mob-skupina-hlava .chev { transform: rotate(180deg); }
    .mob-skupina-telo { display: none; padding: 6px 0 2px 14px; }
    .mob-skupina.otevrena .mob-skupina-telo { display: block; }
    .mob-akce.zap .mob-akce-ico { color: var(--blue); }
    .mob-volba .znak { margin-left: auto; font-size: 19px; color: var(--blue); opacity: 0; }
    .mob-volba.zap .znak { opacity: 1; }
    .mob-tecka { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 8px; border: 1px solid rgba(20,26,51,.12); }

    /* ---- profil ---- */
    #mobProfilOkno {
      position: fixed; inset: 0; z-index: 55; background: var(--bg);
      flex-direction: column; overflow: hidden;
    }
    #mobProfilOkno.zobraz { display: flex; }
    .mob-profil-top { flex: 0 0 auto; display: flex; align-items: center; padding: 12px 16px 4px; }
    .mob-odhlasit {
      margin-left: auto; border: 0; background: #fff; color: var(--text); border-radius: 999px;
      padding: 11px 22px; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
      box-shadow: 0 1px 3px rgba(20,26,51,.1);
    }
    .mob-profil-telo { flex: 1 1 auto; overflow-y: auto; padding: 0 0 26px; }
    .mob-profil-nadpis { margin: 6px 16px 12px; font-size: 32px; font-weight: 800; letter-spacing: -1px; }
    .mob-profil-karta {
      display: flex; align-items: center; gap: 14px; margin: 0 14px;
      background: var(--card); border-radius: 18px; padding: 15px 16px; box-shadow: 0 1px 3px rgba(20,26,51,.07);
    }
    .mob-profil-karta .jmeno { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
    .mob-profil-karta .mail { font-size: 14.5px; color: var(--muted); word-break: break-all; }
    .mob-profil-karta .avatar {
      margin-left: auto; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%;
      background: var(--sel-bg); color: var(--blue); display: grid; place-items: center;
      font-size: 19px; font-weight: 800;
    }
    .mob-skupina { margin: 18px 18px 8px; font-size: 16px; font-weight: 800; letter-spacing: -.2px; }
    .mob-odkazy { margin: 0 14px; }
    .mob-odkazy .mob-radek-odkaz { border-radius: 15px; }
    .mob-nazev { flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight: 600; }
    .mob-popis { display: block; font-size: 13.5px; font-weight: 400; color: var(--muted); }

    /* lišta nástrojů → řádek přepínačů jako v návrhu (Označené / Urgentní) */
    .toolbar { gap: 8px; }
    /* 1 1 40 % = dvě tlačítka na řádek; při čtyřech (Označené, Urgentní, + Platba, wflow)
       se přelomí na dva řádky místo aby se text ořízl */
    .toolbar .btn {
      flex: 1 1 40%; min-width: 0; padding: 10px 6px; font-size: 14px; text-transform: none;
      letter-spacing: 0; border-radius: 13px; white-space: nowrap;
    }
    /* velká čísla v kartách patří k tomu, co se při placení sleduje — ať jsou čitelná */
    .card .val { font-size: 23px; }
    .card .lbl { font-size: 13.5px; text-transform: none; letter-spacing: 0; }
  }

  @media screen and (max-width: 760px) {
    /* Pojistka proti přetečení do stran. Musí to být „clip", ne „hidden" — hidden udělá
       ze stránky posuvný kontejner a přestane fungovat ukotvení (sticky) horní lišty. */
    body { overflow-x: clip; }

    /* dělítko výšky tabulky se táhne myší — na mobilu nemá smysl */
    #receivablesSplitter, .tbl-splitter { display: none !important; }

    /* hlavičky sekcí: menší text a padding, ať se dlouhý název + počet + částka vejdou */
    .sec-head { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
    .sec-head h2 { font-size: 17px; min-width: 0; overflow-wrap: anywhere; }
    .sec-head .sum { font-size: 17px; margin-left: auto; }
    .sec-head .count { font-size: 13px; padding: 2px 9px; }

    /* --- hamburger + výsuvné menu --- */
    #navBurger {
      display: flex; align-items: center; justify-content: center;
      width: 38px; height: 38px; flex: 0 0 38px; padding: 0;
      border: 1px solid var(--border); border-radius: 10px; background: var(--card);
      color: var(--text); cursor: pointer;
    }
    #navBurger svg { width: 20px; height: 20px; }
    /* stav řídí třída přímo na menu (.nav-shown), ne potomkovský selektor přes body —
       spolehlivější a nezávislé na pořadí/specificitě ostatních pravidel pro .sidebar */
    .sidebar {
      transform: translateX(-100%); transition: transform .22s ease; z-index: 45;
      box-shadow: 6px 0 24px rgba(20,26,51,.18); width: 250px;
    }
    .sidebar.nav-shown { transform: translateX(0); }
    body.nav-open .nav-backdrop { display: block; }
    .nav-backdrop {
      display: none; position: fixed; inset: 0; background: rgba(20,26,51,.45); z-index: 44;
    }
    .content { margin-left: 0; }
    /* zajíždějící (ikonové) menu je desktopová věc — na mobilu vždy plné popisky */
    body.nav-collapsed .sidebar { width: 250px; }
    body.nav-collapsed .sidebar button .nav-lbl { display: inline; }
    body.nav-collapsed .sidebar button .nav-ico { display: none; }
    body.nav-collapsed .content { margin-left: 0; }
    #navToggle { display: none; }

    /* --- topbar: řádek 1 = menu + firma + účet, řádek 2 = hledání --- */
    .topbar { flex-wrap: wrap; padding: 8px 12px; gap: 10px; }
    .topbar h1 { display: none; }
    .kurz-stack { display: none; }                 /* kurzy jsou jen informativní */
    .tabs { flex: 1 1 auto; min-width: 0; }
    .company-trigger { width: 100%; min-width: 0; font-size: 15px; padding: 8px 12px; }
    .search { margin-left: 0; width: 100%; order: 3; gap: 10px; }
    .search-wrap { flex: 1 1 auto; }
    .search input[type=text] { width: 100%; }
    .user-menu { order: -1; }          /* účet vlevo, pod hamburgerem */
    .user-drop { left: 0; right: auto; }   /* nabídka se rozbalí doprava, ať nevyjede z displeje */

    /* iOS Safari sám přiblíží stránku, když má pole písmo menší než 16 px — proto mají
       na mobilu všechna vstupní pole aspoň 16 px. Vyjmenované selektory (.search, .modal,
       .quick-form, .login-box) mají vlastní menší velikost, takže je nutné je přebít. */
    .search input[type=text], .modal input, .modal select, .modal textarea,
    .quick-form input, .quick-form select, .login-box input,
    input[type=text], input[type=number], input[type=date], input[type=email],
    input[type=password], input[type=search], select, textarea { font-size: 16px; }

    /* --- obsah --- */
    .wrap { margin: 12px auto; padding: 0 10px; }
    /* Ukotvený vršek: karty + lišta tlačítek zůstanou při scrollu vidět (pod topbarem).
       Hlavičky jednotlivých sekcí se na mobilu naopak nekotví — ukrojily by zbytek displeje. */
    .view-sticky {
      position: sticky; top: 0; z-index: 12;
      background: var(--bg); padding: 6px 0; margin: 0 0 6px; box-shadow: 0 6px 10px -8px rgba(0,0,0,.18);
    }
    #sections .sec-head, #paidList .sec-head, #mzdyList .sec-head, #fakturantiList .sec-head,
    #externiList .sec-head, #provozList .sec-head, #ostatniList .sec-head { position: static; }

    /* dashboard: na mobilu jen dva údaje, které se při placení sledují —
       „Vybráno k platbě" (4.) a „Zbývá po označených" (5.); zbytek je na PC.
       minmax(0,1fr) je zásadní: samotné 1fr se nesmrští pod šířku obsahu a mřížka
       pak přeteče z displeje (dlouhé částky „2 740 084 Kč" apod.) */
    .cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-bottom: 10px; }
    .card > * { min-width: 0; overflow-wrap: anywhere; }
    /* dlaždice si každý skládá sám — na telefonu zůstává jen vybráno, zbývá a prostředky; kolečko je jen na PC */
    #cards .card:not([data-dl="vybrano"]):not([data-dl="zbyva"]):not([data-dl="prostredky"]) { display: none; }
    #cards .dl-kolo, #cards .dl-detail { display: none !important; }
    #cards .card.dl .lbl { padding-right: 0; }
    .card { padding: 8px 12px; }
    .card .val { font-size: 23px; }
    /* modrá čísla v dlaždicích berou barvu firmy — tu samou, co má podklad horní
       a spodní lišty, ať kostra a obsah drží pohromadě */
    .card.blue .val { color: var(--firma); }
    .card .lbl { font-size: 13.5px; }
    .card .sub { font-size: 13px; }

    /* lišta nástrojů: jen to, co se na mobilu opravdu používá (hledat a označit k úhradě) */
    .toolbar { flex-wrap: wrap; gap: 8px; }
    .toolbar .spacer { display: none; }
    .toolbar .btn { padding: 9px 12px; font-size: 13px; }
    .toolbar .bulkDelBtn { display: none; }   /* hromadné mazání je práce pro PC */
    .toolbar > .btn[onclick^="expandAll"], .toolbar > .btn[onclick^="collapseAll"] { display: none; }

    /* --- TABULKA → KARTY --- */
    /* .karty-platby = Platby k úhradě i všechny sekční pohledy (Mzdy, Fakturanti,
       Externí dodavatelé, Provozní náklady, Ostatní urgence). Mají stejný řádek,
       takže mají i stejnou kartu — logika appky se nikde nezdvojuje. */
    .karty-platby table, .karty-platby tbody, .karty-platby tr, .karty-platby td { display: block; }
    .karty-platby table { min-width: 0; width: 100%; }
    .karty-platby thead { display: none; }         /* hlavičky sloupců karta nepotřebuje */
    .karty-platby .tbl-wrap { overflow: visible; }
    .karty-platby tbody tr {
      display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas: "chk firma castka" "chk text text" "chk splat vs";
      gap: 2px 10px; align-items: center;
      padding: 10px 12px; border-bottom: 1px solid var(--border);
    }
    /* min-width: 0 — bez toho se buňka nesmrští pod šířku obsahu a karta přeteče z displeje */
    .karty-platby tbody tr > td { border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
    /* méně důležité sloupce se na kartu nevejdou (hledání funguje i tak) */
    .karty-platby tbody td:nth-child(1), .karty-platby tbody td:nth-child(2),
    .karty-platby tbody td:nth-child(6) { display: none; }
    /* velikosti podle schváleného návrhu — na telefonu se čte z ruky, ne z monitoru */
    .karty-platby tbody td:nth-child(4) { grid-area: firma; font-weight: 700; font-size: 19px; letter-spacing: -.2px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .karty-platby tbody td:nth-child(5) { grid-area: text; font-size: 16px; color: var(--muted); white-space: normal; }
    .karty-platby tbody td:nth-child(7) { grid-area: splat; font-size: 16px; }
    .karty-platby tbody td:nth-child(8) { grid-area: castka; text-align: right; font-size: 20px; font-weight: 800;
      letter-spacing: -.3px; white-space: nowrap; }
    /* variabilní symbol vpravo na řádku se splatností — je podle čeho platbu poznat v bance */
    .karty-platby tbody td:nth-child(3) { grid-area: vs; text-align: right; font-size: 14px;
      color: var(--muted); white-space: nowrap; }
    .karty-platby tbody td:nth-child(3)::before { content: "VS "; }
    /* prázdný symbol se nevypisuje vůbec — „VS —" by jen zabíralo místo */
    .karty-platby tbody td:nth-child(3):has(.dash) { visibility: hidden; }
    .karty-platby tbody .badge { font-size: 14px; padding: 3px 9px; border-radius: 999px; margin-left: 6px; }
    .karty-platby tbody .cur { font-size: 15px; }
    .karty-platby tbody td:nth-child(9) { grid-area: chk; text-align: left; }
    /* ovládání v kartě: jen velký checkbox (+ iniciály kdo označil) a urgentní.
       „Uhradit" (✓), úpravy a mazání se na mobilu skrývají — palcem se do nich snadno
       překlikne a jsou to nevratné akce; patří na PC. */
    .karty-platby .chk-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
    .karty-platby .chk-btn { width: 28px; height: 28px; }
    /* fajfka je kreslená s pevnými odsazeními pro 16px checkbox — na zvětšeném ji vycentrovat */
    .karty-platby .chk-btn.checked::after {
      left: 50%; top: 50%; width: 6px; height: 12px; border-width: 0 2.5px 2.5px 0;
      transform: translate(-50%, -60%) rotate(45deg);
    }
    .karty-platby .fire-btn { font-size: 15px; }
    .karty-platby .btn-pay, .karty-platby .btn-del { display: none; }
    .karty-platby .who { width: auto; flex: 0 0 auto; font-size: 10px; }
    /* Na počítači kreslí urgentní řádek přechod na každé buňce zvlášť; v kartě jsou
       buňky pod sebou, takže z toho byly tři pruhy a levý sloupec s plamínkem zůstal
       bílý. V kartě proto podbarvíme celý řádek najednou a vlevo dáme červený proužek. */
    .karty-platby tbody tr.sel { background: var(--sel-bg); }
    .karty-platby tbody tr.v-prikazu, .karty-platby tbody tr.v-prikazu.sel { background: #fff4df; }
    /* Urgentní má přednost i před výběrem — „hoří" je varování a to nesmí zmizet pod
       podbarvením označené platby. Že je platba označená, je vidět na zaškrtávátku. */
    .karty-platby tbody tr.urgent, .karty-platby tbody tr.urgent.sel { background: #ffe4de; box-shadow: inset 4px 0 0 #ff3b1e; }
    .karty-platby tbody tr.urgent > td { background: none; }
    /* plamínek stačí jeden — v kartě je vlevo u zaškrtávátka, u názvu firmy je navíc */
    .karty-platby tbody .fire-ico { display: none; }
    /* prázdný výsledek filtrování je jedna buňka přes celou kartu, ne mřížka */
    .karty-platby tbody tr:has(td.mu-empty) { display: block; padding: 14px 12px; }

    /* ---------- Platby uhrazené ---------- */
    /* Stejná kostra, jiné sloupce: 1 zdroj, 2 vystaveno, 3 VS, 4 firma, 5 text,
       6 poznámka, 7 uhrazeno dne, 8 iniciály, 9 částka, 10 vrátit/smazat. */
    #paidList table, #paidList tbody, #paidList tr, #paidList td { display: block; }
    #paidList table { min-width: 0; width: 100%; }
    #paidList thead { display: none; }
    #paidList .tbl-wrap { overflow: visible; }
    #paidList tbody tr {
      display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas: "firma firma castka" "text text text" "dne vs kdo";
      gap: 2px 10px; align-items: center;
      padding: 10px 12px; border-bottom: 1px solid var(--border);
    }
    #paidList tbody tr > td { border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
    /* zdroj záznamu, datum vystavení a čtvereček poznámky se na kartu nevejdou;
       vrácení platby a mazání jsou nevratné akce a zůstávají na PC */
    #paidList tbody td:nth-child(1), #paidList tbody td:nth-child(2),
    #paidList tbody td:nth-child(6), #paidList tbody td:nth-child(9), #paidList tbody td:nth-child(10),
    #paidList tbody td:nth-child(12) { display: none; }
    #paidList tbody td:nth-child(4) { grid-area: firma; font-weight: 700; font-size: 19px; letter-spacing: -.2px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #paidList tbody td:nth-child(5) { grid-area: text; font-size: 16px; color: var(--muted); white-space: normal; }
    #paidList tbody td:nth-child(7) { grid-area: dne; font-size: 15px; white-space: nowrap; }
    #paidList tbody td:nth-child(7)::before { content: "Uhrazeno "; color: var(--muted); }
    #paidList tbody td:nth-child(3) { grid-area: vs; font-size: 14px; color: var(--muted); white-space: nowrap; }
    #paidList tbody td:nth-child(3)::before { content: "VS "; }
    #paidList tbody td:nth-child(3):has(.dash) { visibility: hidden; }
    #paidList tbody td:nth-child(8) { grid-area: kdo; text-align: right; font-size: 14px; color: var(--muted); }
    #paidList tbody td:nth-child(11) { grid-area: castka; text-align: right; font-size: 20px; font-weight: 800;
      letter-spacing: -.3px; white-space: nowrap; }
    #paidList tbody .cur { font-size: 15px; }
    #paidList tbody tr:has(td.mu-empty) { display: block; padding: 14px 12px; }

    /* dolní lišta: na mobilu jen dva údaje — vybráno k platbě a kolik zbude */
    /* dolní černé lišty se na mobilu nezobrazují — ukrajovaly obsah a oba údaje
       (vybráno k platbě, zbývá po označených) jsou vidět nahoře v kartách */
    .footer { display: none !important; }

    /* dialogy přes (skoro) celou šířku; delší formulář (Upravit platbu) se musí dát
       posouvat, jinak nejdou vidět tlačítka Zrušit/Uložit dole — proto scroll na okně */
    /* 92vh na iOS počítá výšku BEZ lišt Safari, takže dialog přesahoval přes spodek displeje
       a nešlo se dostat na tlačítka. „dvh" počítá skutečně viditelnou plochu. */
    .modal {
      /* užší, ať okno nesahá až k hraně displeje */
      width: calc(100vw - 40px) !important; max-width: calc(100vw - 40px); padding: 18px;
      /* margin: auto vycentruje i okno VYŠŠÍ než plocha — jeho začátek pak přeteče nahoru
         a nejde k němu doscrollovat. Vodorovně tedy auto, svisle nula. */
      margin: 0 auto;
      /* okno si roluje obsah samo, aby tlačítka Zrušit/Uložit zůstala přilepená dole */
      max-height: calc(100vh - 40px); max-height: calc(var(--mob-vv, 100dvh) - 40px);
    }
    .overlay {
      padding: 16px 0 24px; align-items: flex-start; justify-content: center;
      height: var(--mob-vv, 100dvh);
      overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    /* horní lišta nesmí ukrojit začátek okna — po dobu dialogu ustoupí stejně jako spodní */
    body:has(.overlay.show) #mobTop { z-index: 1; }
    /* spodní lišta appky by dialogu ukrajovala místo — po dobu okna zmizí */
    body:has(.overlay.show) #mobNav { display: none; }
    .modal .row2, .modal .row3, .modal .row4 { grid-template-columns: 1fr; }
    /* tlačítka dialogu drží na spodku okna, ať jsou po ruce i u dlouhého formuláře */
    .modal .actions {
      position: sticky; bottom: -18px; margin: 16px -18px -18px; padding: 12px 18px;
      background: var(--bg); border-top: 1px solid var(--border);
    }


    /* ---------- Platby uhrazené: lišta ---------- */
    #viewUhrazene .view-sticky { flex-wrap: wrap; gap: 8px; }
    #viewUhrazene .view-sticky h2 { flex: 1 1 100%; font-size: 17px; }
    /* rozbalování skupin je práce pro myš; na telefonu se sekce rozklikávají prstem */
    #viewUhrazene .view-sticky .btn[onclick^="expandAllPaid"],
    #viewUhrazene .view-sticky .btn[onclick^="collapseAllPaid"] { display: none; }
    #paidRozsah { order: 3; flex: 1 1 100%; margin-left: 0 !important; }

    /* ---------- vydané faktury ---------- */
    /* Dlaždice s čísly tu odjíždějí nahoru — je jich pět a na telefonu by ukrojily
       skoro celý displej. V Platbách zůstávají ukotvené, tam se při placení sledují. */
    #viewReceivables .view-sticky { position: static; box-shadow: none; }
    /* Podle návrhu zůstávají jen dvě dlaždice: kolik nám dluží celkem a kolik je
       po splatnosti. Zbytek (očekávané úhrady, splatné do 7 dnů, zálohové) je rozpad,
       který se řeší na počítači. */
    #receivablesCards .card:nth-child(2), #receivablesCards .card:nth-child(4),
    #receivablesCards .card:nth-child(5) { display: none; }
    #receivablesCards .card .lbl { min-height: 0; }
    /* novou fakturu na telefonu nikdo nezakládá; místo patří přepínači „Označené" */
    #viewReceivables .toolbar .btn.primary[onclick^="openRecModal"] { display: none; }
    /* název sekce je vidět v horní liště a „naposledy staženo" je detail pro počítač */
    #viewReceivables .toolbar h2, #receivablesSynced { display: none; }
    #viewReceivables .toolbar { justify-content: center; }
    #viewReceivables .toolbar .btn { flex: 0 1 auto; }
    /* návod ke klikání do grafu — graf je až pod seznamem, na telefonu jen zabírá místo */
    #receivablesList .chart-filtr-stitek.prazdny { display: none; }
    /* výšku tabulky dopočítává skript kvůli grafům pod ní — na kartách nemá co dělat */
    #receivablesList .tbl-wrap { height: auto !important; max-height: none !important; overflow: visible; }
    /* sloupce: 1 druh, 2 vystaveno, 3 VS, 4 odběratel, 5 text, 6 splatnost, 7 částka,
       8 „do týdne", 9 akce */
    #receivablesList table, #receivablesList tbody, #receivablesList tr, #receivablesList td { display: block; }
    #receivablesList table { min-width: 0; width: 100%; }
    #receivablesList thead { display: none; }
    #receivablesList tbody tr {
      display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas: "part part castka" "text text text" "splat splat vs" "ocek ocek ocek";
      gap: 2px 10px; align-items: center;
      padding: 10px 12px; border-bottom: 1px solid var(--border);
    }
    #receivablesList tbody tr > td { border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
    /* původ faktury a datum vystavení se na kartu nevejdou; ruční úpravy a mazání patří na PC */
    #receivablesList tbody td:nth-child(1), #receivablesList tbody td:nth-child(2),
    #receivablesList tbody td:nth-child(9) { display: none; }
    #receivablesList tbody td:nth-child(4) { grid-area: part; font-weight: 700; font-size: 19px;
      letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #receivablesList tbody td:nth-child(5) { grid-area: text; font-size: 16px; color: var(--muted); white-space: normal; }
    #receivablesList tbody td:nth-child(6) { grid-area: splat; font-size: 16px; }
    #receivablesList tbody td:nth-child(3) { grid-area: vs; text-align: right; font-size: 14px;
      color: var(--muted); white-space: nowrap; }
    #receivablesList tbody td:nth-child(3)::before { content: "VS "; }
    #receivablesList tbody td:nth-child(3):has(.dash) { visibility: hidden; }
    #receivablesList tbody td:nth-child(7) { grid-area: castka; text-align: right; font-size: 20px;
      font-weight: 800; letter-spacing: -.3px; white-space: nowrap; }
    #receivablesList tbody .cur { font-size: 15px; }
    #receivablesList tbody .badge { font-size: 14px; padding: 3px 9px; border-radius: 999px; margin-left: 6px; }
    /* zálohovku pozná karta podle proužku vlevo (jako na PC) a podle značky u splatnosti */
    #receivablesList tr.recv-zaloha { box-shadow: inset 3px 0 0 var(--purple); }
    #receivablesList tr.recv-zaloha td:first-child { box-shadow: none; }
    #receivablesList tbody tr.recv-zaloha td:nth-child(6)::before {
      content: "zálohová"; font-size: 13px; font-weight: 600; color: var(--purple);
      background: var(--purple-bg); border-radius: 999px; padding: 3px 9px; margin-right: 6px;
    }
    /* „Očekávám úhradu do týdne" na vlastním řádku — palcem se do řádkového zaškrtávátka netrefíš */
    #receivablesList tbody td:nth-child(8) {
      grid-area: ocek; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border) !important;
      display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--muted);
    }
    #receivablesList tbody td:nth-child(8)::after { content: "Očekávám úhradu do týdne"; }
    #receivablesList tbody tr.recv-ocek-on td:nth-child(8)::after { color: var(--text); font-weight: 600; }
    #receivablesList tbody td:nth-child(8) .chk-btn { width: 26px; height: 26px; flex: 0 0 26px; }
    #receivablesList tbody td:nth-child(8) .chk-btn.checked::after {
      left: 50%; top: 50%; width: 6px; height: 11px; border-width: 0 2.5px 2.5px 0;
      transform: translate(-50%, -60%) rotate(45deg);
    }
    /* monogram patří za popisek, ne mezi zaškrtávátko a text */
    #receivablesList tbody td:nth-child(8) .ocek-ini { order: 3; margin-left: auto; font-size: 13px; }
    #receivablesList tbody tr.recv-ocek-on td { background: none; }
    #receivablesList tbody tr.recv-ocek-on { background: #eef9f1; }
    #receivablesList tbody tr:has(td.mu-empty) { display: block; padding: 14px 12px; }

    /* ---------- přijaté doklady ---------- */
    /* Nadpis sekce je v horní liště; sloupce a řazení jsou věc počítače. Z dlaždic zůstávají
       jen dvě jako u vydaných faktur — kolik dlužíme a kolik je po splatnosti. */
    #prijateObsah .view-sticky { position: static; box-shadow: none; }
    #prijateObsah .hlava h1, #prijateObsah .hlava .kolo { display: none; }
    #prijateObsah .hlava .roste { margin-left: 0; width: 100%; }
    /* novou fakturu na telefonu nikdo nezakládá (jako u vydaných faktur) */
    #prijateObsah .hlava .roste > .btn.primary:not(#prijSyncBtn) { display: none; }
    #prijateObsah .zal-radek { flex-wrap: wrap; gap: 8px; }
    #prijateObsah .zal { flex: 1 1 100%; justify-content: space-between; }
    #prijateObsah .fplocha .zal button, #prijateObsah .zal button { font-size: 14px; padding: 8px 6px; }
    /* původ a hledání na jednom řádku */
    #prijateObsah .zal-radek .fakt-puvod { flex: 0 0 auto; }
    #prijateObsah .zal-radek .hledat { flex: 1 1 0; min-width: 0; }
    #prijateObsah .zal-radek .hledat input { width: 100%; }
    #prijateObsah .cards { grid-template-columns: 1fr 1fr; }
    #prijateObsah .cards .card:nth-child(3), #prijateObsah .cards .card:nth-child(4) { display: none; }
    #prijateObsah .cards .card .val { font-size: 20px; white-space: nowrap; }
    /* tři druhy se vejdou na jeden řádek */
    #prijateObsah .druh-prep { flex-wrap: nowrap; gap: 6px; }
    #prijateObsah .druh-prep button { font-size: 13.5px; padding: 6px 10px; gap: 6px; }
    /* výšku plochy píše dělítko inline — kartám se musí zrušit i height, jinak přetečou */
    #prijateObsah .fakt-tab-wrap { height: auto !important; max-height: none !important; overflow: visible; }
    #prijateObsah .tbl-splitter { display: none; }
    #prijateObsah table, #prijateObsah tbody, #prijateObsah tr, #prijateObsah td { display: block; }
    #prijateObsah table { min-width: 0; width: 100%; }
    #prijateObsah thead { display: none; }
    /* karta: kulička stavu · dodavatel · cena / popis / číslo a sekce · splatnost (u účtenky karta) */
    #prijateObsah tbody tr {
      display: grid; grid-template-columns: 12px minmax(0, 1fr) auto;
      grid-template-areas: "stav dod cena" ". popis popis" ". cislo splat";
      gap: 2px 9px; align-items: center;
    }
    #prijateObsah tbody tr > td { border: 0; padding: 0; min-width: 0; background: none; }
    #prijateObsah tbody td[data-m="stav"] { grid-area: stav; line-height: 0; }
    #prijateObsah tbody td[data-m="stav"] .tecka { width: 11px; height: 11px; }
    #prijateObsah tbody td[data-m="dodavatel"] { grid-area: dod; font-weight: 700; font-size: 17px;
      letter-spacing: -.2px; color: var(--text); }
    #prijateObsah tbody td[data-m="cena"] { grid-area: cena; text-align: right; font-size: 17px; white-space: nowrap; }
    #prijateObsah tbody td[data-m="popis"] { grid-area: popis; font-size: 14.5px; color: var(--muted); }
    #prijateObsah tbody td[data-m="cislo"] { grid-area: cislo; font-size: 13.5px; }
    #prijateObsah tbody td[data-m="cislo"] a { font-weight: 650; }
    #prijateObsah tbody td[data-m="splatnost"] { grid-area: splat; text-align: right; font-size: 13.5px; color: var(--muted); }
    #prijateObsah tbody td[data-m="splatnost"]:has(.dash) { visibility: hidden; }
    /* u faktury splatnost, u účtenky čtyřčíslí karty — popisek podle toho, co je vidět */
    #prijateObsah .prij-seznam:not(.prij-uc) tbody td[data-m="splatnost"]::before { content: "spl. "; }
    #prijateObsah .prij-seznam.prij-uc tbody td[data-m="splatnost"]::before { content: "karta "; }
    /* sekce jde za číslo dokladu, VS, přijato, datum platby a akce jsou v detailu */
    #prijateObsah tbody td[data-m="sekce"], #prijateObsah tbody td[data-m="vs"], #prijateObsah tbody td[data-m="prijato"],
    #prijateObsah tbody td[data-m="platba"], #prijateObsah tbody td[data-m="akce"] { display: none; }
    #prijateObsah tbody tr:has(td.prazdno) { display: block; }
    #prijateObsah .prij-legenda { display: none; }

    /* ---------- pilulky stavu podle návrhu ---------- */
    /* Na počítači je .badge drobný štítek u data; na kartě nese stav záznamu,
       tak má rámeček a je o kousek větší. */
    .mob-karty .badge {
      font-size: 12.5px; font-weight: 650; border-radius: 8px; padding: 4px 11px;
      border: 1px solid transparent; margin-left: 0; white-space: nowrap;
    }
    .mob-karty .badge.over { background: var(--red-bg); border-color: #f3c4c1; color: #b3352f; }
    .mob-karty .badge.soon { background: var(--orange-bg); border-color: #f0d199; color: #96620a; }
    #technikaList .badge, #lideList .badge { border-color: var(--border); background: #eef0f5; color: #6f7889; }
    #technikaList .badge[style*="green"], #lideList .badge[style*="green"] { border-color: #b8e3ca; }

    /* ---------- karta je samostatná dlaždice ---------- */
    /* Na počítači je celá tabulka jeden bílý blok s linkami mezi řádky. Na telefonu to
       splývá — každý záznam proto stojí samostatně na šedém podkladu, jako v návrhu. */
    .mob-karty .section {
      background: none; border: 0; border-radius: 0; overflow: visible; margin-bottom: 12px;
    }
    .mob-karty .sec-head {
      background: var(--card); border: 1px solid var(--border); border-radius: 12px;
      margin-bottom: 8px; padding: 10px 14px;
    }
    /* Svislé odsazení je schválně menší než vodorovné — karta má být kompaktní na výšku,
       ať se jich na displej vejde víc; po stranách zůstává vzduch kvůli čitelnosti. */
    .mob-karty tbody tr {
      background: var(--card); border: 1px solid var(--border) !important; border-radius: 12px;
      margin-bottom: 8px; padding: 8px 13px !important;
    }
    /* podbarvené stavy (označeno, urgentní, očekávaná úhrada) si barvu drží i jako dlaždice */
    .mob-karty tbody tr:last-child { margin-bottom: 0; }
    .mob-karty .empty, .mob-karty .mu-empty { border-radius: 12px; }
    /* typografie karet — jedna sada velikostí pro všechny sekce */
    .mob-karty tbody tr { font-size: 15px; }

    /* ---------- ovládací prvky sekcí ---------- */
    /* Nadpis sekce zůstává na řádku s ovládáním a je menší; akční tlačítko je modré
       a kompaktní, ne dlouhý tmavý pruh přes celou šířku. */
    .view-sticky h2, .toolbar h2 { font-size: 16px !important; font-weight: 700; }
    .view-sticky, .toolbar { row-gap: 8px; }
    /* Barva je nositel významu i na telefonu: TMAVÁ = akce („+ Jízda", „Načíst z wflow",
       „Uložit"), MODRÁ = vybraný stav (zvolená záložka, zapnutý přepínač). Na mobilu se
       smí lišit velikost a psaní bez verzálek, barva ne. */
    button.btn.primary {
      font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none;
      min-height: 38px; padding: 8px 13px;
    }
    /* Na telefonu jsou tlačítka menší a bez verzálek — v návrhu jsou „Vše", „Předáno",
       „+ Přidat" psané normálně a na malém displeji se to čte líp. */
    button.btn { font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none;
      padding: 8px 13px; min-height: 38px; border-radius: 10px; }
    .pocet-badge { font-size: 12.5px; }

    /* ---------- Pokladna: na telefonu jen zůstatek a počet pohybů ---------- */
    #pokladnaCards .card:nth-child(1), #pokladnaCards .card:nth-child(2) { display: none; }
    #pokladnaCards .card.pok-pocet { display: block; }
    /* název pokladny je vidět v horní liště, v ovládacím řádku by ubral místo roletkám */
    #pokladnaTitle { display: none; }

    /* ---------- lišty sekcí: nadpis na svůj řádek, ovládání pod něj ---------- */
    /* Ve všech těchhle sekcích je v liště nadpis + roletky + tlačítka. Na šířku telefonu
       se to nevejde, tak nadpis zabere celý řádek a zbytek se pod ním zalomí. */
    #viewPokladna .toolbar { justify-content: flex-start; }
    /* Technika má místo nadpisu přepínače stavu — přesně jako v návrhu */
    #viewTechnika .view-sticky h2, #technikaPocet { display: none; }
    .tech-filtr { flex: 1 1 auto; }
    /* přepínače i „+ Přidat techniku" mají stejnou výšku i písmo, ať lišta nevypadá roztřepeně */
    #viewTechnika .view-sticky .tech-filtr { flex: 0 1 auto; }
    #viewPokladna .toolbar, #viewTechnika .view-sticky,
    #cestakJizdy .view-sticky, #cestakTank .view-sticky { flex-wrap: wrap; gap: 8px; }
    #viewPokladna .toolbar .btn, #viewTechnika .view-sticky .btn { flex: 0 0 auto; margin-left: auto; }
    /* výpis za období je PDF/XLSX — na telefonu se nestahuje */
    #cestakJizdy .view-sticky .btn[onclick^="openCestakVypis"],
    #cestakTank .view-sticky .btn[onclick^="openCestakVypis"] { display: none; }
    #cestakJizdy .view-sticky .seg-tabs, #cestakTank .view-sticky .seg-tabs { flex: 1 1 100%; }
    .auto-selektor { flex: 1 1 auto; min-width: 0; }
    .roleta { flex: 1 1 auto; min-width: 0; }
    /* na telefonu se do nabídky ťuká palcem — větší písmo i vyšší řádky */
    .roleta .roleta-btn, .roleta.siroka .roleta-btn {
      width: 100%; min-width: 0; height: 42px; font-size: 16px;
    }
    .roleta-sip { width: 18px; height: 18px; flex: 0 0 18px; }
    .roleta.otevreno .roleta-menu { max-height: 60vh; padding: 6px; border-radius: 14px; }
    .roleta-volba { font-size: 17px; padding: 13px 14px; gap: 10px; border-radius: 10px; }
    .roleta-volba.zvoleno::before { font-size: 14px; }
    .roleta-volba:not(.zvoleno)::before { width: 10px; }
    /* „Předat vybrané" se objeví, jakmile je něco zaškrtnuté v kartě — předání jde i z telefonu */
    #teProtokolBtn { margin-left: 0 !important; }
    #lideList + *, #viewLide .view-sticky { flex-wrap: wrap; gap: 8px; }

    /* ---------- Doklady k platbám ---------- */
    /* Řádek je tu pružný (flex), ne mřížka: datum, účet a držitel patří na jeden řádek
       a při mřížce by si každý vzal sloupec podle šířky prvního řádku. Zalomení dělá
       tr::before — pseudoprvek kontejneru je plnohodnotná flexová položka. */
    #bankaList .tbl-wrap { overflow: visible; max-height: none !important; }
    #bankaList table, #bankaList tbody, #bankaList tr, #bankaList td { display: block; }
    #bankaList table { min-width: 0; width: 100%; }
    #bankaList thead { display: none; }
    #bankaList tbody tr {
      display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 7px; row-gap: 2px;
      padding: 10px 12px; border-bottom: 1px solid var(--border);
    }
    #bankaList tbody tr::before { content: ""; flex: 0 0 100%; height: 0; order: 4; }
    #bankaList tbody tr > td { border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
    #bankaList tbody td:nth-child(4) { order: 1; flex: 1 1 0; font-weight: 700; font-size: 17px;
      letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #bankaList tbody td:nth-child(7) { order: 2; flex: 0 0 auto; font-size: 18px; font-weight: 800;
      letter-spacing: -.3px; white-space: nowrap; }
    /* čtvereček poznámky má pevné místo za částkou — nesmí poskakovat podle délky názvu */
    #bankaList tbody td:nth-child(5) { order: 3; flex: 0 0 auto; }
    #bankaList tbody td:nth-child(1) { order: 5; flex: 0 0 auto; font-size: 15px; font-weight: 600; }
    #bankaList tbody td:nth-child(2) { order: 6; flex: 0 0 auto; font-size: 15px; color: var(--muted); }
    #bankaList tbody td:nth-child(3) { order: 7; flex: 1 1 0; font-size: 15px; color: var(--muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* variabilní symbol jen tam, kde je vyplněný — u karetních plateb bývá prázdný */
    #bankaList tbody td:nth-child(6) { order: 8; flex: 0 0 auto; font-size: 14px; color: var(--muted); }
    #bankaList tbody td:nth-child(6)::before { content: "VS "; }
    #bankaList tbody td:nth-child(6):has(.dash) { display: none; }
    #bankaList tbody td:nth-child(2)::before, #bankaList tbody td:nth-child(3)::before { content: "· "; color: #c6cad8; }
    /* stav přes celou šířku karty — do řádkového tlačítka se palcem netrefíš */
    #bankaList tbody td:nth-child(8) { order: 9; flex: 0 0 100%; margin-top: 6px; text-align: left !important; }
    #bankaList tbody td:nth-child(8) .ba-stav { display: block; width: 100%; padding: 9px; font-size: 14px; }
    #bankaList tbody tr:has(td.mu-empty) { display: block; padding: 14px 12px; }
    #bankaList tbody tr:has(td.mu-empty)::before { content: none; }
    /* Tři dlaždice vedle sebe se na telefon nevejdou — „Nevyžaduje doklad" se lámalo na
       dva řádky. Nechávají se dvě v řadě a třetí se zalomí pod ně; jsou to zároveň filtry,
       tak žádnou neschovávám. */
    #viewBanka .cards .sub { display: none; }
    /* Nadpis sekce je vidět v horní liště a počet dokladů na červené dlaždici. */
    #viewBanka .view-sticky h2, #bankaPocet { display: none; }
    #viewBanka .view-sticky { flex-wrap: wrap; gap: 8px !important; }
    /* nahoře tlačítka, pod nimi roletky — pořadí řídí order, zalomení dělá ::after */
    #viewBanka .view-sticky .btn { order: 1; flex: 0 1 auto; margin-left: 0 !important; }
    #viewBanka .view-sticky::after { content: ""; flex: 0 0 100%; height: 0; order: 2; }
    #viewBanka .view-sticky .roleta { order: 3; flex: 0 1 auto; min-width: 0; }
    #viewBanka .view-sticky .roleta-btn { font-size: 15px; padding: 0 8px 0 10px; gap: 4px; }
    #viewBanka .view-sticky .roleta-sip { width: 15px; height: 15px; flex: 0 0 15px; }

    /* ---------- Pokladna ---------- */
    /* sloupce: 1 datum, 2 typ, 3 popis, 4 protistrana, 5 karta, 6 místo, 7 zapsal,
       8 částka, 9 zůstatek, 10 akce */
    #pokladnaList .pok-wrap { overflow: visible; max-height: none !important; height: auto !important; }
    #pokladnaList .tbl-splitter { display: none; }
    #pokladnaList table, #pokladnaList tbody, #pokladnaList tr, #pokladnaList td { display: block; }
    #pokladnaList table { min-width: 0; width: 100%; }
    #pokladnaList thead { display: none; }
    #pokladnaList tbody tr {
      display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 7px; row-gap: 2px;
      padding: 10px 12px 10px 15px; border-bottom: 1px solid var(--border);
    }
    #pokladnaList tbody tr::before { content: ""; flex: 0 0 100%; height: 0; order: 3; }
    #pokladnaList tbody tr::after { content: ""; flex: 0 0 100%; height: 0; order: 7; }
    #pokladnaList tbody tr > td { border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
    /* barevný proužek vlevo místo sloupce Typ: zelený příjem, červený výdej */
    #pokladnaList tbody tr:has(.pok-prijem) { box-shadow: inset 3px 0 0 var(--green); }
    #pokladnaList tbody tr:has(td:nth-child(2) .pok-vydej) { box-shadow: inset 3px 0 0 var(--red); }
    #pokladnaList tbody td:nth-child(2), #pokladnaList tbody td:nth-child(6),
    #pokladnaList tbody td:nth-child(7) { display: none; }
    #pokladnaList tbody td:nth-child(3) { order: 1; flex: 1 1 0; font-weight: 700; font-size: 17px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #pokladnaList tbody td:nth-child(8) { order: 2; flex: 0 0 auto; font-size: 19px; font-weight: 800;
      letter-spacing: -.3px; white-space: nowrap; text-align: right; }
    #pokladnaList tbody td:nth-child(1) { order: 4; flex: 0 0 auto; font-size: 15px; font-weight: 600; }
    #pokladnaList tbody td:nth-child(4) { order: 5; flex: 1 1 0; font-size: 15px; color: var(--muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #pokladnaList tbody td:nth-child(5) { order: 6; flex: 0 0 auto; font-size: 14px; color: var(--muted); }
    #pokladnaList tbody td:nth-child(5):has(.dash) { display: none; }
    #pokladnaList tbody td:nth-child(4)::before { content: "· "; color: #c6cad8; }
    /* průběžný zůstatek je smysl deníku — na kartě zůstává, jen s popiskem */
    #pokladnaList tbody td:nth-child(9) { order: 8; flex: 1 1 auto; font-size: 14px; color: var(--muted);
      text-align: left !important; }
    #pokladnaList tbody td:nth-child(9)::before { content: "zůstatek po pohybu "; }
    /* tisk dokladu i mazání jsou práce pro PC */
    #pokladnaList tbody td:nth-child(10) { display: none; }
    #pokladnaList tbody tr:has(td.mu-empty) { display: block; padding: 14px 12px; }
    #pokladnaList tbody tr:has(td.mu-empty)::before,
    #pokladnaList tbody tr:has(td.mu-empty)::after { content: none; }
    #pokladnaList .bez-dph { display: none; }        /* číslo dokladu se na kartu nevejde */

    /* ---------- Technika ---------- */
    /* Mřížka, ne pružný řádek: na kartě jsou čtyři pevné dvojice pod sebou a při
       pružném řádku se držitel smrskl na „Držitel…". Sloupce se značí přes data-m,
       protože adminovi přibývá buňka se zaškrtávátkem a nth-child by se posunul. */
    #technikaList .tbl-wrap { overflow: visible; max-height: none !important; }
    #technikaList table, #technikaList tbody, #technikaList tr, #technikaList td { display: block; }
    #technikaList table { min-width: 0; width: 100%; }
    #technikaList thead { display: none; }
    #technikaList tbody tr {
      display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas: "nazev nazev stav" "kat vyr vyr" "drz drz od" "cena cena pod" "predat predat predat";
      gap: 3px 8px; align-items: baseline;
    }
    #technikaList tbody tr > td { border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
    #technikaList tbody td[data-m="nazev"] { grid-area: nazev; font-weight: 700; font-size: 17px;
      letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #technikaList tbody td[data-m="stav"] { grid-area: stav; justify-self: end; }
    #technikaList tbody td[data-m="kategorie"] { grid-area: kat; font-size: 15px; color: var(--muted); }
    #technikaList tbody td[data-m="vyrobni"] { grid-area: vyr; font-size: 15px; color: var(--muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #technikaList tbody td[data-m="vyrobni"]::before { content: "· v. č. "; color: #c6cad8; }
    #technikaList tbody td[data-m="vyrobni"]:has(.dash) { visibility: hidden; }
    #technikaList tbody td[data-m="drzitel"] { grid-area: drz; font-size: 15px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #technikaList tbody td[data-m="drzitel"]::before { content: "Držitel "; color: var(--muted); }
    #technikaList tbody td[data-m="od"] { grid-area: od; justify-self: end; font-size: 15px;
      color: var(--muted); white-space: nowrap; }
    #technikaList tbody td[data-m="od"]::before { content: "od "; }
    #technikaList tbody td[data-m="od"]:has(.dash) { visibility: hidden; }
    #technikaList tbody td[data-m="cena"] { grid-area: cena; font-size: 15px; color: var(--muted);
      text-align: left !important; }
    #technikaList tbody td[data-m="cena"]::after { content: " bez DPH"; }
    #technikaList tbody td[data-m="cena"]:has(.dash)::after { content: ""; }
    /* z akcí zůstává jen fajfka „podepsaný protokol"; tisk, vrácení, úpravy a mazání jsou pro PC */
    #technikaList tbody td[data-m="akce"] { grid-area: pod; justify-self: end; font-size: 15px; }
    #technikaList tbody td[data-m="akce"] > *:not(.podpis-ok) { display: none; }
    #technikaList tbody td[data-m="akce"] .podpis-ok { color: var(--green); font-size: 15px; padding: 0; }
    #technikaList tbody td[data-m="akce"] .podpis-ok::after { content: " podepsaný protokol"; color: var(--muted); }
    /* volný kus se předává rovnou z karty — po jednom, okno i protokol jsou pak stejné jako z PC */
    #technikaList tbody td[data-m="chk"] { grid-area: predat; }
    #technikaList tbody td[data-m="chk"] .chk-btn { display: none; }
    #technikaList tbody td[data-m="chk"] .te-predat {
      display: block; width: 100%; margin-top: 6px; padding: 10px;
      border: 1px solid #b8e3ca; border-radius: 10px; background: var(--green-bg);
      color: #1c7d55; font: 700 14px/1 system-ui, sans-serif; cursor: pointer;
    }
    #technikaList tbody tr:has(td.mu-empty) { display: block; padding: 14px 12px; }

    /* ---------- Tarify Vodafone ---------- */
    /* Lišta: název sekce i počítadlo jsou na telefonu zbytečné (název je v horní liště),
       a tlačítka se zkrátí, ať se přepínač, obě roletky i obě akce vejdou. */
    #viewTarify .view-sticky h2, #viewTarify #tarifyPocet { display: none; }
    #viewTarify .view-sticky { gap: 8px !important; }
    #viewTarify .view-sticky .btn { padding: 9px 12px; }
    #viewTarify .view-sticky .roleta-btn { font-size: 13.5px; padding: 0 8px; }
    /* dlaždice po dvou vedle sebe — čtyři pod sebou by zabraly celou obrazovku */
    #tarifyKarty { grid-template-columns: 1fr 1fr; }

    #tarifyList .tbl-wrap { overflow: visible; max-height: none !important; }
    #tarifyList table, #tarifyList tbody, #tarifyList tr, #tarifyList td { display: block; }
    #tarifyList table { min-width: 0; width: 100%; }
    #tarifyList thead { display: none; }
    #tarifyList tbody tr {
      display: grid; grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "jmeno stav" "cisla cisla" "castka akce";
      gap: 4px 8px; align-items: baseline;
    }
    #tarifyList tbody tr > td { border: 0; padding: 0; min-width: 0; }
    #tarifyList tbody td[data-m="jmeno"] { grid-area: jmeno; font-size: 17px; letter-spacing: -.2px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #tarifyList tbody td[data-m="stav"] { grid-area: stav; justify-self: end; }
    #tarifyList tbody td[data-m="cisla"] { grid-area: cisla; font-size: 14px; line-height: 1.7; }
    #tarifyList tbody td[data-m="castka"] { grid-area: castka; align-self: center;
      text-align: left !important; font-size: 19px; }
    #tarifyList tbody td[data-m="castka"]::after { content: " Kč"; font-size: 14px; color: var(--muted); }
    #tarifyList tbody td[data-m="akce"] { grid-area: akce; justify-self: end; }
    /* výzvu i posun stavu chce Petr mít po ruce — právě z telefonu ji posílá do iMessage */
    #tarifyList tbody td[data-m="akce"] .ta-akce { padding: 7px 12px; font-size: 13px; }
    #tarifyList tbody td[data-m="akce"] .btn-del { display: none; }
    #tarifyList tbody tr:has(td.mu-empty) { display: block; padding: 14px 12px; }

    /* Roční matice se na telefon nevejde a smrsknout nejde — je to devět sloupců čísel.
       Vodorovné rolování je tu proto výjimka a platí jen pro ni. */
    #tarifyRok .tbl-wrap { overflow-x: auto; }

    /* Totéž u soukromých jízd: dvanáct sloupců čísel, ze kterých je porovnání aut složené,
       se na šířku telefonu nesmrskne a vynechat se nedá žádný. */
    #soukrList .tbl-wrap { overflow-x: auto; }
    #soukrList table.soukr-tab { min-width: 1005px; }
    .soukr-info { display: none; }

    /* Na telefon se nadpis grafu se SPZ na jeden řádek nevejde — trhal se uprostřed
       a vytlačoval přepínače období za okraj. SPZ proto jde pod nadpis. */
    .graf-spz { display: block; margin-left: 0; margin-top: 1px; }

    /* ---------- Cesťák: kompaktní lišta ---------- */
    /* Dva řádky: nahoře záložky a akční tlačítko, pod nimi roletky. Pořadí řídí `order`,
       zalomení mezi řádky dělá ::after — pseudoprvek flexového kontejneru je položka. */
    /* gap je v HTML inline (14px), přebít se musí důrazně — jinak se roletky nevejdou */
    #cestakJizdy .view-sticky, #cestakTank .view-sticky, #cestakSoukr .view-sticky { gap: 8px !important; }
    #cestakJizdy .view-sticky .seg-tabs, #cestakTank .view-sticky .seg-tabs,
    #cestakSoukr .view-sticky .seg-tabs {
      order: 1; flex: 0 0 auto; margin-left: 0 !important; margin-right: 0 !important;
    }
    /* POZOR: záložky jsou taky <div>, takže je z tohoto pravidla musí vyloučit `:not`.
       Jinak dostanou margin-left: auto a celá dvojice odskočí doprava. */
    #cestakJizdy .view-sticky > div:not(.seg-tabs):not(.cards),
    #cestakTank .view-sticky > div:not(.seg-tabs):not(.cards) {
      order: 2; flex: 0 0 auto; margin-left: auto !important;
    }
    #cestakJizdy .view-sticky::after, #cestakTank .view-sticky::after {
      content: ""; flex: 0 0 100%; height: 0; order: 3;
    }
    /* Auto, rok i měsíc se vejdou na jeden řádek: název auta je zkrácený na SPZ a značku
       (`data-kratky`) a roletky tu mají menší písmo i užší odsazení. */
    #cestakJizdy .view-sticky .roleta, #cestakTank .view-sticky .roleta,
    #cestakSoukr .view-sticky .roleta {
      order: 4; flex: 0 1 auto; min-width: 0;
    }
    #cestakJizdy .view-sticky .roleta-btn, #cestakTank .view-sticky .roleta-btn,
    #cestakSoukr .view-sticky .roleta-btn {
      font-size: 15px; padding: 0 8px 0 10px; gap: 4px;
    }
    #cestakJizdy .view-sticky .roleta-sip, #cestakTank .view-sticky .roleta-sip,
    #cestakSoukr .view-sticky .roleta-sip {
      width: 15px; height: 15px; flex: 0 0 15px;
    }
    #cestakJizdy .view-sticky .btn, #cestakTank .view-sticky .btn { flex: 0 0 auto; }
    #cestakSoukr .view-sticky { gap: 6px !important; }
    #cestakSoukr .view-sticky .roleta:not(.siroka) .roleta-btn {
      min-width: 0; padding: 0 5px 0 8px; font-size: 13.5px; gap: 2px;
    }
    .cestak-prep { gap: 6px; }
    /* Do jednoho řádku patří obě záložky i obě tlačítka — proto užší odsazení a zkrácené
       popisky („Tankování", „+ Lístek", „↻ wflow"; celý název drží mobil.js v data-pcText). */
    .cestak-prep button { padding: 8px 8px; font-size: 13px; letter-spacing: 0; text-transform: none; }
    #cestakJizdy .view-sticky .btn, #cestakTank .view-sticky .btn { padding: 8px 11px; }
    #cestakJizdy .view-sticky > div:not(.seg-tabs):not(.cards),
    #cestakTank .view-sticky > div:not(.seg-tabs):not(.cards) { gap: 6px !important; }
    /* dlaždice se souhrny na telefonu nejsou — číslo je na konci seznamu */
    #cestakJizdy .cards, #cestakTank .cards { display: none; }

    /* ---------- Kniha jízd ---------- */
    /* sloupce: 1 datum, 2 řidič, 3 trasa, 4 účel, 5 km, 6 akce */
    /* `height` se musí zrušit stejně jako `max-height`: dělítko výšky (`obnovVyskyTabulek`)
       píše obojí inline, a Kniha jízd i Tankovací lístky dělítko mají. Zůstala-li by inline
       výška, karty by z boxu vytekly ven (overflow je tu visible) a překryly graf i číselníky
       pod seznamem — u 53 lístků přetečou o víc než 5 000 px. */
    #jizdyList .jizdy-wrap { overflow: visible; max-height: none !important; height: auto !important; }
    #jizdyList table, #jizdyList tbody, #jizdyList tr, #jizdyList td { display: block; }
    #jizdyList table { min-width: 0; width: 100%; }
    #jizdyList thead { display: none; }
    #jizdyList tbody tr {
      display: grid; grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "trasa km" "meta meta" "ucel ucel";
      gap: 1px 10px; align-items: baseline;
      padding: 10px 12px; border-bottom: 1px solid var(--border);
    }
    #jizdyList tbody tr > td { border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
    #jizdyList tbody td:nth-child(3) { grid-area: trasa; font-weight: 700; font-size: 17px; }
    #jizdyList tbody td:nth-child(5) { grid-area: km; font-size: 19px; font-weight: 800;
      letter-spacing: -.3px; white-space: nowrap; text-align: right !important; }
    #jizdyList tbody td:nth-child(5)::after { content: " km"; font-size: 14px; font-weight: 600; color: var(--muted); }
    #jizdyList tbody td:nth-child(1) { grid-area: meta; font-size: 15px; font-weight: 600; }
    #jizdyList tbody td:nth-child(2) { grid-area: meta; font-size: 15px; color: var(--muted); justify-self: start;
      margin-left: 92px; }
    #jizdyList tbody td:nth-child(4) { grid-area: ucel; font-size: 15px; color: var(--muted); }
    #jizdyList tbody td:nth-child(6) { display: none; }
    /* prázdný účel se nevypisuje — pomlčka by zabrala celý řádek karty */
    #jizdyList tbody td:nth-child(4):has(.dash) { display: none; }
    /* Svorka otočky na telefonu: pruh nepatří buňce s datem (tam by trčel uprostřed karty),
       ale levému okraji CELÉ karty. Aby vznikla jedna svorka přes obě jízdy, karty páru se
       slepí k sobě — horní ztratí spodní odsazení i zaoblení, spodní horní zaoblení, a mezi
       nimi zůstane jen tenká linka. Základní pravidlo karet má `!important`, takže i tady. */
    /* Podklad, rámečky ani odsazení z počítačového zobrazení sem nepatří — karta má
       vlastní bílý podklad a mřížku, a cizí odsazení jí zbytečně natahovalo řádky. */
    #jizdyList tbody tr.otocka td,
    #jizdyList tbody tr.otocka:hover td,
    #jizdyList tbody tr.otocka-prvni td,
    #jizdyList tbody tr.otocka-druha td,
    #jizdyList tbody tr.otocka-stred td,
    #jizdyList tbody tr.otocka-stred td:first-child,
    #jizdyList tbody tr.otocka-stred td:last-child,
    #jizdyList tbody tr.otocka td:first-child,
    #jizdyList tbody tr.otocka-prvni td:first-child,
    #jizdyList tbody tr.otocka-prvni td:last-child,
    #jizdyList tbody tr.otocka-druha td:first-child,
    #jizdyList tbody tr.otocka-druha td:last-child,
    #jizdyList tbody tr.otocka-druha + tr td,
    #jizdyList tbody tr:has(+ tr.otocka-prvni) td {
      background: none; background-image: none; border: 0; padding: 0; border-radius: 0;
    }
    /* podklad pro zakulacené rohy je desktopová věc — karta má svůj vlastní */
    #jizdyList tbody { background: none; }
    #jizdyList tbody td { background-color: transparent; }
    #jizdyList tbody tr.otocka { border-left-width: 3px !important; }
    #jizdyList tbody tr.otocka-0 { border-left-color: #BA7517 !important; }
    #jizdyList tbody tr.otocka-1 { border-left-color: #EFB25C !important; }
    #jizdyList tbody tr.otocka-prvni {
      margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    }
    #jizdyList tbody tr.otocka-stred {
      margin-bottom: 0; border-radius: 0; border-top-style: dashed;
    }
    #jizdyList tbody tr.otocka-druha {
      border-top-left-radius: 0; border-top-right-radius: 0; border-top-style: dashed;
    }
    #jizdyList tbody tr:has(td.mu-empty) { display: block; padding: 14px 12px; }
    /* souhrn za vybrané období jako poslední, odlišená karta */
    #jizdyList tbody tr.jizdy-soucet { display: block; }
    #jizdyList tbody tr.jizdy-soucet td {
      display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
      border: 0; padding: 0; font-size: 17px; font-weight: 700;
    }
    #jizdyList tbody tr.jizdy-soucet b { white-space: nowrap; }

    /* ---------- Tankovací lístky ---------- */
    /* sloupce: 1 zdroj, 2 datum, 3 dodavatel, 4 místo, 5 popis, 6 bez DPH, 7 DPH,
       8 částka, 9 litry, 10 vyúčtováno, 11 akce.
       Rozpad bez DPH · DPH se na kartu nedává — je v detailu lístku. */
    #tankList .tank-wrap { overflow: visible; max-height: none !important; height: auto !important; }
    #tankList table, #tankList tbody, #tankList tr, #tankList td { display: block; }
    #tankList table { min-width: 0; width: 100%; }
    #tankList thead { display: none; }
    #tankList tbody tr {
      display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 7px; row-gap: 2px;
      padding: 10px 12px; border-bottom: 1px solid var(--border);
    }
    #tankList tbody tr::before { content: ""; flex: 0 0 100%; height: 0; order: 3; }
    #tankList tbody tr > td { border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
    #tankList tbody td:nth-child(1), #tankList tbody td:nth-child(4),
    #tankList tbody td:nth-child(6), #tankList tbody td:nth-child(7),
    #tankList tbody td:nth-child(11) { display: none; }
    #tankList tbody td:nth-child(3) { order: 1; flex: 1 1 0; font-weight: 700; font-size: 17px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #tankList tbody td:nth-child(8) { order: 2; flex: 0 0 auto; font-size: 19px; font-weight: 800;
      letter-spacing: -.3px; white-space: nowrap; }
    #tankList tbody td:nth-child(2) { order: 4; flex: 0 0 auto; font-size: 15px; font-weight: 600; }
    #tankList tbody td:nth-child(9) { order: 5; flex: 0 0 auto; font-size: 15px; color: var(--muted);
      text-align: left !important; }
    #tankList tbody td:nth-child(9)::after { content: " l"; }
    #tankList tbody td:nth-child(9)::before { content: "· "; color: #c6cad8; }
    #tankList tbody td:nth-child(5) { order: 6; flex: 1 1 0; font-size: 15px; color: var(--muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #tankList tbody td:nth-child(5)::before { content: "· "; color: #c6cad8; }
    #tankList tbody td:nth-child(5):has(.dash) { display: none; }
    /* „Vyúčtováno s řidičem" na vlastním řádku s popiskem — palcem se do zaškrtávátka v řádku netrefíš */
    #tankList tbody td:nth-child(10) {
      order: 7; flex: 0 0 100%; margin-top: 6px; padding-top: 8px;
      border-top: 1px solid var(--border) !important;
      display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--muted);
      text-align: left !important;
    }
    #tankList tbody td:nth-child(10)::after { content: "Vyúčtováno s řidičem"; }
    #tankList tbody td:nth-child(10) .chk-btn { width: 26px; height: 26px; }
    #tankList tbody td:nth-child(10) .chk-btn.checked::after {
      left: 50%; top: 50%; width: 6px; height: 11px; border-width: 0 2.5px 2.5px 0;
      transform: translate(-50%, -60%) rotate(45deg);
    }
    #tankList tbody tr:has(td.mu-empty) { display: block; padding: 14px 12px; }
    #tankList tbody tr:has(td.mu-empty)::before { content: none; }

    /* ---------- Lidé ve firmě ---------- */
    /* Narození a adresa se na telefonu neukazují nikomu, ani adminovi. */
    #lideList .tbl-wrap { overflow: visible; max-height: none !important; }
    #lideList table, #lideList tbody, #lideList tr, #lideList td { display: block; }
    #lideList table { min-width: 0; width: 100%; }
    #lideList thead { display: none; }
    #lideList tbody tr {
      display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 7px; row-gap: 2px;
      padding: 10px 12px; border-bottom: 1px solid var(--border);
    }
    #lideList tbody tr::before { content: ""; flex: 0 0 100%; height: 0; order: 3; }
    #lideList tbody tr::after { content: ""; flex: 0 0 100%; height: 0; order: 7; }
    #lideList tbody tr > td { border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
    #lideList tbody td[data-m="narozeni"], #lideList tbody td[data-m="adresa"],
    #lideList tbody td[data-m="akce"] { display: none; }
    #lideList tbody td[data-m="jmeno"] { order: 1; flex: 1 1 0; font-weight: 700; font-size: 17px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #lideList tbody td[data-m="stav"] { order: 2; flex: 0 0 auto; }
    #lideList tbody td[data-m="skupina"] { order: 4; flex: 0 0 auto; font-size: 15px; color: var(--muted); }
    #lideList tbody td[data-m="vztah"] { order: 5; flex: 0 0 auto; font-size: 15px; color: var(--muted); }
    #lideList tbody td[data-m="fakturuje"] { order: 6; flex: 1 1 0; font-size: 15px; color: var(--muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #lideList tbody td[data-m="fakturuje"]::before { content: "· fakturuje pod "; color: #c6cad8; }
    #lideList tbody td[data-m="fakturuje"]:has(.dash) { display: none; }
    #lideList .lide-zkr { display: inline; max-width: none; white-space: normal; }
    #lideList tbody td[data-m="vztah"]::before { content: ""; }
    #lideList tbody td[data-m="vztah"] .vztah-znak { font-size: 12.5px; padding: 3px 9px; }
    #lideList tbody td[data-m="telefon"] { order: 8; flex: 0 0 auto; font-size: 15px; }
    #lideList tbody td[data-m="email"] { order: 9; flex: 1 1 0; font-size: 15px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #lideList tbody td[data-m="email"]::before { content: "· "; color: #c6cad8; }
    /* telefon volá, e-mail otevře poštu — kvůli tomu se ten seznam na telefonu otevírá */
    #lideList tbody a.mob-kontakt { color: var(--blue); font-weight: 600; text-decoration: none; }
    #lideList tbody tr:has(td.mu-empty) { display: block; padding: 14px 12px; }
    #lideList tbody tr:has(td.mu-empty)::before,
    #lideList tbody tr:has(td.mu-empty)::after { content: none; }

    /* ---------- importy (platby, vydané faktury, tankovací lístky) ---------- */
    /* Okno je sloupec: nadpis, pak seznam jako JEDINÁ rolovací plocha, dole tlačítka.
       Bez min-height: 0 flexová položka nezmenší pod obsah — místo rolování přeteče
       a na tlačítka Zrušit/Uložit se pak nešlo dostat vůbec. */
    #wflowOverlay .modal, #receivablesImportOverlay .modal, #tankImportOverlay .modal {
      display: flex; flex-direction: column; overflow: hidden;
      /* stejná mezera nahoře i dole jako u ostatních oken — okno se nesmí lepit na hranu */
      max-height: calc(var(--mob-vv, 100dvh) - 40px); padding: 14px;
    }
    .mob-scroll {
      flex: 1 1 auto; min-height: 0; max-height: none !important;
      overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    #wflowOverlay .modal .actions, #receivablesImportOverlay .modal .actions,
    #tankImportOverlay .modal .actions {
      position: static; flex: 0 0 auto; margin: 12px 0 0; padding: 0; border-top: 0; background: none;
      justify-content: center;   /* na telefonu tlačítka doprostřed, ne k pravému okraji */
    }
    #mobImportInfo { flex: 0 0 auto; }
    #wflowOverlay .modal > h3 { font-size: 20px; }
    /* řádek nad seznamem: souhrn, přepínač a filtr pod sebou, ne vedle sebe */
    #wflowOverlay .modal > div:nth-of-type(1) { flex-wrap: wrap; gap: 8px; }
    #wflowSummary { flex: 1 1 100%; font-size: 14.5px; margin-right: 0; }
    #wfJenOznaceneBtn { flex: 1 1 0; }
    #wflowFiltr { flex: 1 1 100%; width: auto !important; }
    #wflowNoveWrap { flex: 1 1 auto; max-height: none !important; }

    #wflowOverlay table, #wflowOverlay tbody, #wflowOverlay tr, #wflowOverlay td { display: block; }
    #wflowOverlay thead { display: none; }
    #wflowOverlay table { width: 100%; min-width: 0; }
    #wflowRows tr {
      display: grid; grid-template-columns: 42px minmax(0, 1fr) auto;
      grid-template-areas: "chk firma castka" "chk splat vs" "chk sekce sekce";
      gap: 2px 10px; align-items: center;
      padding: 10px 12px 12px; border-bottom: 1px solid var(--border);
    }
    /* Podbarvení nese ŘÁDEK a buňky jsou průhledné — jinak z bílých buněk a podbarveného
       řádku vzniknou tři pruhy (a na dotyku navíc zůstane viset :hover). */
    #wflowRows tr, #wflowRows tr:hover { background: #fff; }
    #wflowRows td, #wflowRows tr:hover td { border: 0; padding: 0; min-width: 0; background: none; }
    /* zatříděná faktura = hotovo, zelenkavý podklad přes celý řádek */
    #wflowRows tr.ma-sekci, #wflowRows tr.ma-sekci:hover { background: #edfbf2; }
    #wflowRows tr.ma-sekci select.wf-sec { border-color: #a7dfbe; background: #fff; color: #067647; }
    #wflowRows tr.ma-sekci td:nth-child(3)::after { color: #6cb98d; }
    #wflowRows td:nth-child(1) { grid-area: chk; text-align: left; }
    #wflowRows td:nth-child(1) input { width: 30px; height: 30px; }
    /* u importu se sekce vybírá podle dodavatele, tak ať je vidět celý — až dva řádky */
    #wflowRows td:nth-child(2) { grid-area: firma; font-weight: 700; font-size: 19px; letter-spacing: -.2px;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    #wflowRows td:nth-child(3) { grid-area: sekce; margin-top: 7px; }
    #wflowRows td:nth-child(4) { grid-area: castka; text-align: right; font-weight: 800; font-size: 20px;
      letter-spacing: -.3px; white-space: nowrap; }
    #wflowRows td:nth-child(5) { display: none; }        /* datum vystavení se na kartu nevejde */
    #wflowRows td:nth-child(6) { grid-area: splat; font-size: 16px; color: var(--muted); }
    #wflowRows td:nth-child(6)::before { content: "splatnost "; }
    #wflowRows td:nth-child(7) { grid-area: vs; font-size: 16px; color: var(--muted); text-align: right;
      white-space: nowrap; }
    #wflowRows td:nth-child(7)::before { content: "VS "; }

    /* výběr sekce = tlačítko přes celou šířku; oranžové, dokud sekce chybí */
    #wflowRows td:nth-child(3) { position: relative; }
    #wflowRows td:nth-child(3)::after {
      content: "›"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
      color: #b9bfd4; font-size: 20px; pointer-events: none;
    }
    /* roleta zůstává v DOM (appka z ní čte hodnotu), ale klepnutí otevře náš panel zdola —
       systémové kolečko iOS je na tohle nepohodlné */
    #wflowRows select.wf-sec {
      width: 100%; border: 1.5px solid var(--border); border-radius: 13px;
      padding: 11px 34px 11px 13px; font-size: 16px; font-weight: 700; color: var(--text);
      background: var(--card); min-height: 48px;
      -webkit-appearance: none; appearance: none; pointer-events: none;
    }
    #wflowRows select.wf-sec.bez-sekce {
      border-color: #f0c88a; background: #fffaeb; color: #b54708;
    }
    #mobImportInfo {
      margin-top: 10px; border-radius: 13px; padding: 11px 13px;
      font-size: 14.5px; font-weight: 600;
      background: #fffaeb; color: #b54708; border: 1px solid #f0c88a;
    }

    /* grafy pod sebou přes celou šířku */
    .charts { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .chart-box { padding: 12px 12px 8px; }
  }