/* fw-web.css – doplňky webové aplikace k fw.css (P1.4). fw.css je beze změny kopie
   z docs/web/design/system/, aby šel přebírat celý; co potřebuje jen Razor kostra, je tady.
   Pravidla jsou ve stejných vrstvách jako v fw.css, takže pořadí kaskády zůstává. */
@layer fw.layout {
  /* Spodní lišta: „Více“ otevírá menu přes popovertarget, a ten má jen <button>, ne <a>. */
  @media (width < 45rem) {
    .fw-bottombar button {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
      min-block-size: 3.25rem; color: var(--fw-text-3); background: none; border: 0; font: inherit;
      font-size: .6875rem; font-weight: 500; border-radius: var(--fw-r-2); cursor: pointer;
    }
    .fw-bottombar button:hover { color: var(--fw-text); }
  }
}

@layer fw.components {
  /* Odhlášení je formulář (POST); v menu má vypadat jako ostatní položky. */
  .fw-menu form { display: contents; }

  /* htmx: indikátory bez vložených stylů (includeIndicatorStyles: false kvůli CSP). */
  .htmx-indicator { opacity: 0; transition: opacity var(--fw-dur-2) var(--fw-ease-out); }
  .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
}

@layer fw.pages {
  /* Karta účtu bez levého příběhu (chybové stránky, jednoduché kroky). */
  .fw-auth--single { grid-template-columns: minmax(0, 1fr); background: var(--fw-bg); }
  .fw-auth--single .fw-auth__form { align-items: center; }
  .fw-auth--single .fw-auth__top { align-self: stretch; justify-content: space-between; }
  .fw-auth--single .fw-auth__mobile-brand { display: flex; }

  /* Kroky po přihlášení (2FA, výběr firmy) na širokém displeji: karta uprostřed
     (wireframe 01, krok 2) – tichý rámeček a stín karty jako .fw-panel. Opravuje
     „obsah přilepený vlevo bez karty“ (majitel 29. 10.). */
  @media (width >= 56rem) {
    .fw-auth--single .fw-auth__box {
      inline-size: min(27rem, 100%); margin-block: auto; padding: var(--fw-s-8);
      background: var(--fw-surface); border: 1px solid var(--fw-line); border-radius: var(--fw-r-4);
      box-shadow: var(--fw-shadow-card);
    }
  }
  /* Na úzkém displeji formulář uprostřed, ne přilepený k levému okraji. */
  @media (width < 56rem) {
    .fw-auth__form { align-items: center; }
    .fw-auth__top { align-self: stretch; }
  }

  /* Formulář uvnitř karty (obnova hesla, pozvánka, nastavení 2FA) má stejné
     rozestupy jako karta sama – jinak se pole a tlačítko slepí. */
  .fw-auth__box > form { display: flex; flex-direction: column; gap: var(--fw-s-4); }
  .fw-auth__box > form > p { color: var(--fw-text-3); font-size: .9375rem; }

  /* Vzhled pole kódu 2FA je v fw.css (.fw-otp, vrstva fw.components – tahle vrstva
     fw.layout ho přebít nemůže). */
  .fw-otp::placeholder { color: var(--fw-text-3); opacity: 1; }

  /* Postup v krocích (nastavení 2FA). */
  .fw-steps { margin: 0; padding-inline-start: 1.25rem; color: var(--fw-text-2); display: grid; gap: var(--fw-s-1); }

  /* Klíč k opsání (ruční zadání 2FA): kód, ne pole formuláře – celý se označí jedním
     klepnutím, tabulkové číslice, zalomí se po skupinách. */
  .fw-secret {
    display: block; padding: var(--fw-s-3) var(--fw-s-4);
    background: var(--fw-fill); border-radius: var(--fw-r-2); color: var(--fw-text);
    font-size: var(--fw-fs-md); font-variant-numeric: tabular-nums slashed-zero; letter-spacing: .06em;
    text-align: center; word-spacing: .25em; overflow-wrap: anywhere; user-select: all; cursor: text;
  }

  /* Nastavení 2FA (P1.5): QR kód na bílém podkladu i v tmavém režimu – čtečky v telefonech
     inverzní kód často nepřečtou. Tichý rámeček místo stínu, jako karta („Klid“). */
  .fw-qr {
    display: grid; place-items: center; inline-size: min(100%, 13rem); aspect-ratio: 1;
    margin: var(--fw-s-4) auto; padding: var(--fw-s-3);
    background: #FFFFFF; border: 1px solid var(--fw-line); border-radius: var(--fw-r-3);
  }
  .fw-qr svg { inline-size: 100%; block-size: auto; display: block; }

  /* Záložní kódy: dva sloupce, tabulkové číslice, šedý podklad jako u readonly pole. */
  .fw-codes {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fw-s-2);
    margin: var(--fw-s-4) 0 var(--fw-s-6); padding: var(--fw-s-3); list-style: none;
    background: var(--fw-fill); border-radius: var(--fw-r-2);
  }
  .fw-codes code {
    display: block; padding: var(--fw-s-1) var(--fw-s-2); background: none; text-align: center;
    font-size: var(--fw-fs-sm); font-variant-numeric: tabular-nums slashed-zero; letter-spacing: .04em;
    color: var(--fw-text); user-select: all;
  }

  /* Stav firmy ve výběru (zkušební, po splatnosti, jen pro čtení) – tónovaný štítek jako fw-tag--warn. */
  .fw-badge {
    display: inline-flex; align-items: center; margin-inline-start: var(--fw-s-2);
    padding: 0 .5em; min-block-size: 1.25rem; border-radius: var(--fw-r-1);
    font-size: var(--fw-fs-xs); font-weight: 500; white-space: nowrap; vertical-align: middle;
    color: var(--fw-warn); background: var(--fw-warn-soft);
  }
}

/* ---------- Odběratelé (P2.4): adresář, karta, ARES, sloučení ---------- */
@layer fw.pages {
  /* Hledání v adresáři je hlavní nástroj stránky – širší než u seznamu dokladů. */
  .fw-odb-hledani { inline-size: min(100%, 28rem); }

  /* Karta i nový odběratel: formulář nemá růst do šířky celého monitoru. */
  .fw-odb-karta { max-inline-size: 46rem; }

  /* Výsledek ARES pod IČO: tichý podklad jako „readonly“, ne další karta v kartě. */
  .fw-odb-ares:empty { display: none; }
  .fw-odb-ares__panel {
    display: flex; flex-direction: column; gap: var(--fw-s-3);
    padding: var(--fw-s-4); border-radius: var(--fw-r-2); background: var(--fw-fill);
  }
  .fw-odb-ares__title { display: flex; align-items: center; gap: var(--fw-s-2); font-size: var(--fw-fs-md); font-weight: 600; color: var(--fw-text); }
  .fw-odb-ares__rows { display: grid; gap: var(--fw-s-2); margin: 0; padding: 0; list-style: none; }
  .fw-odb-ares__rows .fw-check { align-items: flex-start; }
  .fw-odb-ares__rows .fw-check input { margin-block-start: .2rem; }
  .fw-odb-ares__val { display: block; color: var(--fw-text-2); font-size: var(--fw-fs-sm); overflow-wrap: anywhere; }

  /* Dialog sloučení: našeptávač se rozbalí přes patičku dialogu, ne do posuvníku těla. */
  .fw-odb-dlg-sloucit, .fw-odb-dlg-sloucit form, .fw-odb-dlg-sloucit .fw-dialog__body { overflow: visible; }
  /* Pole s příponou (IČO + ARES) jen ke čtení: stejný šedý podklad jako samotné readonly pole
     a neaktivní tlačítko – role bez zápisu nemá vidět „klikací“ modrou. */
  .fw-affix:has(.fw-input[readonly]) { background: var(--fw-fill); border-color: transparent; }
  .fw-affix:has(.fw-input[readonly]) .fw-input { color: var(--fw-text-2); }
  .fw-affix__btn[aria-disabled="true"] { color: var(--fw-text-3); background: transparent; cursor: not-allowed; }

  .fw-odb-dopad { display: grid; gap: var(--fw-s-1); margin: 0; padding-inline-start: 1.25rem; font-size: var(--fw-fs-sm); }
}
@layer fw.pages {
  /* Připomínka (P2.F): pole se snímkem obrazovky. Nativní výběr souboru dostane
     tichý rámeček pole a tlačítko ve stylu fw-btn, aby nevyčníval z formuláře. */
  .fw-file {
    inline-size: 100%; padding: var(--fw-s-1); font-size: var(--fw-fs-sm); color: var(--fw-text-2);
    background: var(--fw-surface); border: 1px dashed var(--fw-line-strong); border-radius: var(--fw-r-2);
  }
  .fw-file:hover { border-color: var(--fw-text-3); }
  .fw-file:focus-visible { outline: none; border-color: var(--fw-accent); box-shadow: var(--fw-ring); }
  .fw-file[aria-invalid="true"] { border-color: var(--fw-danger); }
  .fw-file::file-selector-button {
    margin-inline-end: var(--fw-s-3); padding: var(--fw-s-1) var(--fw-s-3); font: inherit; font-weight: 500;
    color: var(--fw-text); background: var(--fw-fill); border: 0; border-radius: var(--fw-r-1); cursor: pointer;
  }
  .fw-file::file-selector-button:hover { background: var(--fw-fill-strong); }
  /* Formulář je sloupec hlavička – tělo – patička; na nízkém displeji se posouvá jen tělo. */
  .fw-pripominka { display: flex; flex-direction: column; max-block-size: inherit; min-block-size: 0; }
  .fw-pripominka > .fw-dialog__body { overflow-y: auto; }
  .fw-pripominka__text { min-block-size: 7.5rem; max-block-size: 40dvh; }
  /* Formulář je v dialogu i na samostatné stránce; na stránce sedí v kartě. */
  .fw-pripominka-panel { max-inline-size: 44rem; }
  .fw-pripominka-panel .fw-dialog__body { padding-block-start: var(--fw-s-5); }

  /* Konzole – připomínky (P2.F, prostá stránka do restylu W4). */
  .fw-konzole { inline-size: 100%; box-sizing: border-box; max-inline-size: 72rem; margin-inline: auto; padding: var(--fw-s-6) var(--fw-s-4); display: flex; flex-direction: column; gap: var(--fw-s-4); }
  .fw-konzole__text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fw-text); }
  .fw-konzole__snimek { display: block; max-inline-size: 100%; block-size: auto; border: 1px solid var(--fw-line); border-radius: var(--fw-r-2); }
  .fw-konzole__vyrez { max-inline-size: 28rem; overflow: hidden; text-overflow: ellipsis; }
  .fw-konzole fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
}

/* ---------- Nastavení firmy (P2.3): firma, účty, řady, vzhled, e-maily ---------- */
@layer fw.pages {
  /* Formuláře nastavení nemají růst do šířky celého monitoru (čtou se po řádcích). */
  .fw-nast-form { max-inline-size: 52rem; min-inline-size: 0; }
  .fw-nast-fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; display: grid; gap: var(--fw-s-2); }
  /* PSČ je krátké, město a země delší – na mobilu pod sebou. */
  .fw-nast-adresa { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) minmax(0, 1fr); }
  @container main (width < 40rem) { .fw-nast-adresa { grid-template-columns: minmax(0, 1fr); } }
  /* „Ceny včetně DPH“ má smysl jen u plátce – bez skriptu, podle zaškrtnutí. */
  .fw-nast-form:has([data-fw-nast-platce]:not(:checked)) .fw-nast-jen-platce { display: none; }

  /* ARES pod údaji firmy: tichý podklad jako readonly pole (stejně jako v adresáři). */
  .fw-nast-ares-cil:empty { display: none; }
  .fw-nast-ares {
    display: flex; flex-direction: column; gap: var(--fw-s-3);
    padding: var(--fw-s-4); border-radius: var(--fw-r-2); background: var(--fw-fill);
  }
  .fw-nast-ares__title { display: flex; align-items: center; gap: var(--fw-s-2); font-size: var(--fw-fs-md); font-weight: 600; color: var(--fw-text); }
  .fw-nast-ares__rows { display: grid; gap: var(--fw-s-2); margin: 0; padding: 0; list-style: none; }
  .fw-nast-ares__rows .fw-check { align-items: flex-start; }
  .fw-nast-ares__rows .fw-check input { margin-block-start: .2rem; }
  .fw-nast-ares__val { display: block; color: var(--fw-text-2); font-size: var(--fw-fs-sm); overflow-wrap: anywhere; }

  /* Logo a razítko: náhled na tichém podkladu s čárkovaným okrajem (průhledné PNG je poznat). */
  .fw-nast-obrazek {
    display: grid; place-items: center; block-size: 6rem; padding: var(--fw-s-3);
    background: var(--fw-fill); border-radius: var(--fw-r-2); border: 1px dashed var(--fw-line-strong);
  }
  .fw-nast-obrazek__img { max-inline-size: 100%; max-block-size: 4.5rem; inline-size: auto; block-size: auto; object-fit: contain; }

  /* Bankovní účty: seznam místo tabulky – na mobilu se řádek zalomí, nic se neposouvá do strany. */
  .fw-nast-ucty__list { margin: 0; padding: 0; list-style: none; }
  .fw-nast-ucet {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fw-s-2) var(--fw-s-4);
    padding: var(--fw-s-3) var(--fw-s-5); border-block-start: 1px solid var(--fw-line);
  }
  .fw-nast-ucet--novy:empty { display: none; }
  .fw-nast-ucet > .fw-alert, .fw-nast-ucet > form { flex-basis: 100%; }
  .fw-nast-ucet__udaje { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--fw-s-1) var(--fw-s-2); min-inline-size: 0; }
  .fw-nast-ucet__udaje .fw-cell-sub { flex-basis: 100%; overflow-wrap: anywhere; }
  .fw-nast-ucet__akce form { display: contents; }
  .fw-nast-ucet-pole { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--fw-s-3); }
  @container main (width < 30rem) { .fw-nast-ucet-pole { grid-template-columns: minmax(0, 1fr); } }
  .fw-nast-zahranicni summary { cursor: pointer; color: var(--fw-text-2); font-size: var(--fw-fs-sm); }
  .fw-nast-zahranicni[open] summary { margin-block-end: var(--fw-s-2); }

  /* Číselné řady: řádek = název, pole, ukázka, akce; na úzkém displeji pod sebou. */
  .fw-nast-rady { margin: 0; padding: 0; list-style: none; }
  .fw-nast-rada { padding: var(--fw-s-3) var(--fw-s-5); border-block-start: 1px solid var(--fw-line); }
  .fw-nast-rada__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--fw-s-3) var(--fw-s-4); }
  .fw-nast-rada__nazev { flex: 1 1 10rem; align-self: center; }
  .fw-nast-rada__pole { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 7rem) minmax(0, 9rem); gap: var(--fw-s-3); align-items: end; }
  .fw-nast-rada__pole--nova { grid-template-columns: minmax(0, 12rem) minmax(0, 12rem) minmax(0, 7rem) minmax(0, 9rem); }
  @container main (width < 40rem) {
    .fw-nast-rada__pole, .fw-nast-rada__pole--nova { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); inline-size: 100%; }
  }
  .fw-nast-rada__ukazka { display: flex; align-items: center; min-block-size: 2.5rem; overflow-wrap: anywhere; }
  .fw-nast-rada__akce { display: flex; align-items: center; min-block-size: 2.5rem; }
  .fw-nast-rada__chyba { flex-basis: 100%; }

  /* Vzhled dokladu: barvy z uzavřené nabídky (kontrast ověřený v Application). */
  .fw-nast-barvy { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--fw-s-2); }
  .fw-nast-barva-volba {
    display: flex; align-items: center; gap: var(--fw-s-2); padding: var(--fw-s-2);
    border: 1px solid var(--fw-line); border-radius: var(--fw-r-2); cursor: pointer; font-size: var(--fw-fs-sm);
  }
  .fw-nast-barva-volba:has(input:checked) { border-color: var(--fw-accent-solid); box-shadow: var(--fw-ring); }
  .fw-nast-barva-volba:has(input:disabled) { cursor: default; }
  .fw-nast-barva { inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; flex: none; background: var(--_akcent); }
  .fw-nast-akcent--blue { --_akcent: #2563EB; }
  .fw-nast-akcent--navy { --_akcent: #1E3A8A; }
  .fw-nast-akcent--green { --_akcent: #15803D; }
  .fw-nast-akcent--burgundy { --_akcent: #9F1239; }
  .fw-nast-akcent--graphite { --_akcent: #374151; }
  .fw-nast-akcent--black { --_akcent: #111827; }
  .fw-nast-prepinace { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--fw-s-2) var(--fw-s-4); }

  /* Schematický náhled dokladu: papír je bílý i v tmavém režimu (doklad se tiskne). */
  .fw-nast-nahled {
    display: flex; flex-direction: column; gap: var(--fw-s-2); padding: var(--fw-s-4);
    background: #FFFFFF; color: #111827; border: 1px solid var(--fw-line); border-radius: var(--fw-r-2);
    font-size: var(--fw-fs-xs); aspect-ratio: 1 / 1.3;
  }
  .fw-nast-nahled [hidden] { display: none; }
  .fw-nast-nahled .fw-faint { color: #6B7280; }
  .fw-nast-nahled__hlava { display: flex; justify-content: space-between; align-items: center; gap: var(--fw-s-2); padding-block-end: var(--fw-s-2); border-block-end: 2px solid var(--_akcent); }
  .fw-nast-nahled__logo { display: inline-grid; place-items: center; padding: 0 var(--fw-s-2); min-block-size: 1.5rem; border: 1px dashed #9CA3AF; border-radius: var(--fw-r-1); color: #6B7280; font-weight: 600; letter-spacing: .06em; }
  .fw-nast-nahled__titul { color: var(--_akcent); font-weight: 700; font-size: var(--fw-fs-sm); }
  .fw-nast-nahled__radek { overflow-wrap: anywhere; }
  .fw-nast-nahled__polozky { display: grid; gap: 2px; margin-block: var(--fw-s-2); }
  .fw-nast-nahled__polozky span { display: block; block-size: .75rem; background: #FFFFFF; border-block-end: 1px solid #E5E7EB; }
  .fw-nast-nahled__polozky[data-fw-nahled-pruhy="ano"] span:nth-child(even) { background: #F3F4F6; }
  .fw-nast-nahled__celkem { display: flex; justify-content: space-between; font-weight: 700; color: var(--_akcent); }
  .fw-nast-nahled__pata { display: flex; flex-wrap: wrap; gap: var(--fw-s-2); margin-block-start: auto; align-items: center; }
  .fw-nast-nahled__qr { display: inline-grid; place-items: center; inline-size: 2.25rem; aspect-ratio: 1; border: 2px solid #111827; font-weight: 700; }
  .fw-nast-nahled__podpis { margin-inline-start: auto; padding: var(--fw-s-1) var(--fw-s-3); border: 1px solid #D1D5DB; border-radius: var(--fw-r-1); }

  /* E-maily: server širší, port úzký; šablona v neproporcionálním písmu (je to HTML). */
  .fw-nast-smtp-server { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 7rem); gap: var(--fw-s-3); }
  .fw-nast-sablona { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: var(--fw-fs-sm); min-block-size: 12rem; }
  .fw-nast-tokeny { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fw-s-1); }
  .fw-nast-tokeny .fw-chip { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; cursor: pointer; }
  .fw-nast-sablona-nahled {
    padding: var(--fw-s-4); border: 1px solid var(--fw-line); border-radius: var(--fw-r-2);
    background: var(--fw-surface); overflow-wrap: anywhere;
  }
  .fw-nast-sablona-nahled p { margin: 0 0 var(--fw-s-2); }
  .fw-nast-sablona-nahled ul, .fw-nast-sablona-nahled ol { margin: 0 0 var(--fw-s-2); padding-inline-start: 1.25rem; }
}
/* ---------- konec: Nastavení firmy (P2.3) ---------- */
/* ===== P2.5 Seznamy dokladů – začátek (Pages/App/Doklady/Seznam, wireframe 04) ===== */
@layer fw.pages {
  /* Vlastní rozsah: pole od–do jen při volbě „Vlastní rozsah“ – bez JS přes :has(). */
  .fw-dok-toolbar { row-gap: var(--fw-s-2); }
  .fw-dok-obdobi { flex: none; }
  .fw-dok-rozsah { display: none; align-items: center; gap: var(--fw-s-2); }
  .fw-dok-toolbar:has(.fw-dok-obdobi option[value="vlastni"]:checked) .fw-dok-rozsah { display: flex; }
  .fw-dok-rozsah__pole { display: inline-flex; align-items: center; gap: var(--fw-s-1); font-size: var(--fw-fs-sm); color: var(--fw-text-2); }
  .fw-dok-rozsah__pole .fw-input { inline-size: 9.5rem; }
  .fw-dok-hledani { inline-size: min(100%, 22rem); }
  /* Tlačítko „Použít“ je pro běh bez JS; s htmx se formulář posílá sám (fw-web-seznam.js ho skryje). */
  .fw-dok-odeslat[hidden] { display: none; }
  .fw-dok-stavy { margin-bottom: var(--fw-s-3); }
  .fw-dok-chip-obdobi { background: var(--fw-fill); color: var(--fw-text-2); padding-inline-end: .625rem; }
  /* Křížek u filtru je odkaz (funguje bez JS), vypadá jako tlačítko z návrhu (.fw-chip button). */
  .fw-filterline .fw-chip a {
    display: grid; place-items: center; inline-size: 1.375rem; block-size: 1.375rem;
    border-radius: 50%; color: inherit; text-decoration: none;
  }
  .fw-filterline .fw-chip a:hover { background: color-mix(in oklab, var(--fw-accent), transparent 85%); }

  /* Seznam s výběrem: stejné chování lišty hromadných akcí jako .fw-list v návrhu, ale
     výběr obsluhuje fw-web-seznam.js (obsah se vyměňuje htmx, fw.js váže .fw-list jen při načtení). */
  .fw-dok-list { container: list / inline-size; }
  .fw-dok-list:has(.fw-rowcheck:checked) .fw-bulkbar {
    display: flex; opacity: 1; translate: 0 0;
    transition: opacity var(--fw-dur-2) var(--fw-ease-out), translate var(--fw-dur-3) var(--fw-ease-spring), display var(--fw-dur-2) allow-discrete;
  }
  @container list (width < 46rem) {
    .fw-dok-list .fw-bulkbar { display: none !important; } /* v kartovém režimu hromadné akce záměrně nejsou */
  }
  /* Karta řádku (wireframe 04, mobil): odběratel a částka nahoře, číslo a stav pod nimi. Zaškrtávátko
     v kartě není – hromadné akce na mobilu záměrně nejsou (td:first-child v fw.css by ho jinak ukázal). */
  @container tablelist (width < 46rem) {
    .fw-dok-list .fw-table td.fw-col-check { display: none; }
    .fw-dok-list .fw-table td[data-card="title"] { grid-row: 1; }
    .fw-dok-list .fw-table td[data-card="meta"] { grid-row: 2; }
  }
  .fw-dok-vyber { display: contents; }
  .fw-dok-list .fw-table thead th[aria-sort] .fw-icon { color: var(--fw-accent); }
  /* VS a základ bez DPH ustoupí dřív než ostatní volitelné sloupce – na běžném notebooku se jinak
     do karty nevejde stav a tabulka by se posouvala do strany. */
  @container table (width < 72rem) { .fw-dok-list .fw-dok-sire { display: none; } }

  /* Přeplacený doklad: je co vracet – upozornění, ne chyba. */
  .fw-status--preplaceno { --_c: var(--fw-warn); --_bg: var(--fw-warn-soft); }

  /* Mobil (FW-028): hledání přes celou šířku, filtry pod ním, nic nepřetéká do strany. */
  @media (width < 45rem) {
    .fw-dok-toolbar .fw-toolbar__grow { display: none; }
    .fw-dok-hledani { inline-size: 100%; }
    .fw-dok-rozsah { flex-wrap: wrap; }
    .fw-dok-rozsah__pole .fw-input { inline-size: auto; min-inline-size: 0; }
    .fw-dok-stavy ~ .fw-filterline .fw-filterline__sum { margin-left: 0; inline-size: 100%; }
  }
}
/* ===== P2.5 Seznamy dokladů – konec ===== */

/* ---------- Editor a detail dokladu (P2.6) – začátek bloku ---------- */
@layer fw.pages {
  /* Hláška nebo poznámka s více řádky (otázka na zásobu, poznámka o stornu) – zalomení z textu. */
  .fw-ed-viceradek { white-space: pre-line; overflow-wrap: anywhere; }

  /* Našeptávač produktů pod řádky: nabídka se rozbalí přes obsah, ne do posuvníku panelu. */
  .fw-ed-produkty { max-inline-size: 28rem; }

  /* Akce řádku (výš, níž, smazat) v jedné řadě; na mobilu v rohu karty. */
  .fw-ed-radek-akce { display: inline-flex; gap: 2px; }
  .fw-items__act { inline-size: auto; white-space: nowrap; }
  .fw-ed-otoc { transform: rotate(180deg); }

  /* Prázdný kontejner varování k sazbám DPH (cíl přepočtu) nesmí ve sloupci přidat mezeru. */
  .fw-ed-varovani:not(:has(*)) { display: none; }

  /* Smazání konceptu pod formulářem – tichá akce, ne vedle „Vystavit“. */
  .fw-ed-dalsi { margin-block-start: var(--fw-s-4); }

  /* Formulář s jedním tlačítkem v hlavičce detailu (konečná faktura, daňový doklad). */
  .fw-ed-inline { display: contents; }

  /* Položky v detailu: na úzkém displeji se tabulka posouvá uvnitř panelu, stránka ne (FW-028). */
  .fw-ed-tabulka { overflow-x: auto; }
}
/* ---------- Editor a detail dokladu (P2.6) – konec bloku ---------- */

/* ---------- Úhrady dokladu, hromadná úhrada, QR (P2.8) – začátek bloku ---------- */
@layer fw.pages {
  /* Tabulka plateb (stránka úhrad, panel detailu, plán hromadné úhrady): na úzkém displeji
     se posouvá uvnitř panelu, stránka ne (FW-028). */
  .fw-plat-tabulka { overflow-x: auto; }
  /* Způsob se smí zalomit (štítek „na místě“, VS pod ním) – úzký panel detailu se jinak nevejde. */
  .fw-plat-tabulka .fw-table td.fw-plat-zpusob { white-space: normal; }
  .fw-plat-poznamka { max-inline-size: 16rem; overflow-wrap: anywhere; color: var(--fw-text-2); }
  .fw-plat-popis { margin: 0; color: var(--fw-text-2); }

  /* „na místě“ = kontaktní platba (EET) – tichý štítek vedle způsobu, ne další sloupec. */
  .fw-plat-namiste { margin-inline-start: var(--fw-s-2); vertical-align: baseline; }

  /* QR platba: kód a údaje vedle sebe, na úzkém panelu pod sebou. QR zůstává na bílé
     i v tmavém režimu (bankovní aplikace čtou tmavé moduly na světlém podkladu). */
  .fw-plat-qr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fw-s-4); }
  .fw-plat-qr__kod { inline-size: 9.5rem; margin: 0; flex: none; }
  .fw-plat-qr__udaje { flex: 1 1 10rem; margin: 0; }

  /* Dialog úhrady: dvě pole vedle sebe jen tam, kde se vejdou (fw-grid-2 se na mobilu skládá). */
  .fw-plat-dialog { inline-size: min(34rem, calc(100vw - 2 * var(--fw-s-4))); }

  /* Hromadná úhrada: souhrn plánu a pole data. */
  .fw-hu-souhrn { color: var(--fw-text-2); }
  .fw-plat-tabulka .fw-table td.fw-hu-odberatel { white-space: normal; min-inline-size: 8rem; }
  .fw-hu-datum { max-inline-size: 14rem; }
  .fw-hu-akce { display: flex; justify-content: flex-end; gap: var(--fw-s-2); flex-wrap: wrap; }
}
/* ---------- Úhrady dokladu, hromadná úhrada, QR (P2.8) – konec bloku ---------- */
/* ---------- PDF a e-mail dokladu (P2.7) – začátek bloku ---------- */
@layer fw.pages {
  /* Náhled PDF v detailu (wireframe 06): list A4 v rámu, podklad jako u náhledu papíru. */
  .fw-pdf-ramec { padding: var(--fw-s-3); margin: 0 var(--fw-s-4) var(--fw-s-4); background: var(--fw-surface-sunken); border-radius: var(--fw-r-2); }
  .fw-pdf-nahled { display: block; inline-size: 100%; block-size: min(80vh, 62rem); border: 1px solid var(--fw-line); border-radius: var(--fw-r-1); background: #FFFFFF; }
  .fw-pdf-akce { flex-wrap: wrap; justify-content: flex-end; }
  /* Rada pro telefon je vidět jen tam, kde rám chybí. */
  .fw-pdf-mobil { display: none; }

  /* Formulář e-mailu: náhled textu ze šablony jako dopis – světlý papír i v tmavém režimu
     (příjemce ho uvidí ve své poště, ne v našem tématu). */
  .fw-mail-nahled {
    padding: var(--fw-s-4); background: #FFFFFF; color: #111827; border: 1px solid var(--fw-line);
    border-radius: var(--fw-r-2); font-size: var(--fw-fs-sm); overflow-wrap: anywhere;
    display: flex; flex-direction: column; gap: var(--fw-s-2);
  }
  .fw-mail-nahled a { color: #1D4ED8; }
  .fw-mail-priloha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fw-s-2); }
  .fw-mail-zaznam { display: flex; flex-direction: column; overflow-wrap: anywhere; }
  /* .fw-timeline nuluje odsazení – v panelu ho vracíme, ať čas nesedí na hraně karty. */
  .fw-mail-historie { padding: var(--fw-s-2) var(--fw-s-5) var(--fw-s-4); }
  .fw-mail-historie li { grid-template-columns: 7.5rem 1fr; }

  /* Mobil (FW-028): mobilní prohlížeče PDF v rámu nezobrazí – jen tlačítka a rada. */
  @media (width < 45rem) {
    .fw-pdf-ramec { display: none; }
    .fw-pdf-mobil { display: block; }
    .fw-pdf-akce { justify-content: flex-start; }
  }
}
/* ---------- PDF a e-mail dokladu (P2.7) – konec bloku ---------- */
/* ===== P2.9 Přehled a účetní roky – začátek (Pages/App/Index*, Pages/App/UcetniRoky, wireframe 03) ===== */
@layer fw.pages {
  /* Přepínač roku v hlavičce přehledu: výběr a tlačítko v jedné řadě (bez JS je tlačítko vidět). */
  .fw-prehled-rok { display: inline-flex; align-items: center; gap: var(--fw-s-2); }

  /* Tři dlaždice (jako desktop): na užší ploše dvě vedle sebe, třetí přes celou šířku –
     jinak by zůstala půlka řádku prázdná. */
  @container main (width < 54rem) {
    .fw-prehled-kpis .fw-kpi:nth-child(3):last-child { grid-column: 1 / -1; }
  }
  @container main (width < 30rem) {
    .fw-prehled-kpis { grid-template-columns: minmax(0, 1fr); }
    .fw-prehled-kpis .fw-kpi + .fw-kpi { box-shadow: inset 0 1px 0 var(--fw-line); }
    .fw-prehled-kpis .fw-kpi + .fw-kpi::before { display: none; }
  }

  /* Graf: SVG se zmenší s panelem, popisky osy proto v úzkém panelu zvětšíme (jednotky viewBoxu)
     a každý druhý měsíc schováme, ať se nepřekrývají. Číslo je i tak v titulku sloupce a v tabulce. */
  @container main (width < 40rem) {
    .fw-prehled-graf .fw-chart__axis { font-size: 20px; }
    .fw-prehled-graf .fw-prehled-graf__lichy { display: none; }
  }
  /* Tabulka v užším sloupci přehledu: kdyby se nevešla (dlouhé jméno, štítek „n dní po
     splatnosti“), posouvá se uvnitř panelu – nesmí přetéct do vedlejšího sloupce (FW-028). */
  .fw-prehled-tabulka { overflow-x: auto; }
  .fw-prehled-graf__cisla > summary { cursor: pointer; color: var(--fw-text-2); inline-size: fit-content; }
  .fw-prehled-graf__cisla[open] > summary { margin-block-end: var(--fw-s-2); }

  /* Účetní roky: akce v řádku vpravo; dialogy jsou v buňce, ale vykreslují se v top layer. */
  .fw-roky__akce { text-align: right; }
  .fw-roky__akce > .fw-row { justify-content: flex-end; }
  /* Dialog je v buňce zarovnané vpravo – jeho text se zarovnání nesmí dědit. */
  .fw-roky__akce > dialog { text-align: start; }
  .fw-roky__zvoleny { margin-inline-start: var(--fw-s-2); }
  .fw-roky__stav--uzavreny { color: var(--fw-text-2); background: var(--fw-fill); }
  .fw-roky__pravidla { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: var(--fw-s-2); color: var(--fw-text-2); }
  /* Karta roku (úzká tabulka): akce na vlastním řádku přes celou šířku karty. */
  @container table (width < 38rem) {
    .fw-roky td[data-card="actions"] { grid-column: 1 / -1; text-align: left; padding-block-start: var(--fw-s-2); }
    .fw-roky__akce > .fw-row { justify-content: flex-start; }
  }
}
/* ===== P2.9 Přehled a účetní roky – konec ===== */
/* ===== P4.2 Nájemníci a operátoři konzole – začátek (Pages/Sprava/Najemnici, Pages/Sprava/Uzivatele) ===== */
@layer fw.pages {
  /* Poznámky k nájemníkovi: čas a autor potřebují víc místa než 6,5rem časové osy; na mobilu pod sebou. */
  .fw-poznamky li { grid-template-columns: 9.5rem minmax(0, 1fr); }
  .fw-poznamky p { margin: 0; }
  @container main (width < 30rem) {
    .fw-poznamky li { grid-template-columns: minmax(0, 1fr); gap: var(--fw-s-1); }
  }

  /* Přidělení role: e-mail, role a tlačítko v jedné řadě, na úzkém displeji pod sebou. */
  .fw-operatori-pridat { display: flex; flex-wrap: wrap; align-items: end; gap: var(--fw-s-3); }
  .fw-operatori-pridat > .fw-field:first-child { flex: 1 1 16rem; }

  /* Role operátora jako štítky s křížkem (každý štítek je vlastní formulář odebrání). */
  .fw-operatori-role { display: flex; flex-wrap: wrap; gap: var(--fw-s-1); }
  .fw-operatori-role button:disabled { opacity: .35; cursor: not-allowed; }
}
/* ===== P4.2 Nájemníci a operátoři konzole – konec ===== */

/* ===== P3.1 Přijaté doklady – začátek (Pages/App/Prijate/**, panel příloh v detailu) ===== */
@layer fw.pages {
  /* Plocha nahrání: ikona, pole a tlačítko v řadě; na úzkém displeji pod sebou (FW-028). */
  .fw-pri-plocha {
    display: flex; align-items: center; gap: var(--fw-s-4); flex-wrap: wrap;
    border: 1px dashed var(--fw-line-strong); border-radius: var(--fw-r-3);
    margin: var(--fw-s-3); background: var(--fw-surface-sunken);
    transition: background-color var(--fw-dur-1), border-color var(--fw-dur-1);
  }
  .fw-pri-plocha__ikona { inline-size: 2rem; block-size: 2rem; color: var(--fw-text-3); flex: none; }
  .fw-pri-plocha__text { flex: 1 1 18rem; min-inline-size: 0; }
  .fw-pri-plocha--nad { border-color: var(--fw-accent); background: var(--fw-accent-soft); }
  .fw-pri-plocha--nahrava { opacity: .7; cursor: progress; }
  .fw-pri-nahrani .fw-file { max-inline-size: 100%; }
  @container main (width < 30rem) {
    .fw-pri-plocha__ikona { display: none; }
    .fw-pri-plocha > .fw-btn { inline-size: 100%; justify-content: center; }
  }

  /* Akce pod návrhem z nahraného souboru: zalomí se, nikdy nepřetečou. */
  .fw-pri-akce { flex-wrap: wrap; gap: var(--fw-s-2); }

  /* Seznam příloh v panelu: jméno se zalomí (dlouhá jména souborů), akce zůstane vpravo. */
  .fw-pri-seznam { list-style: none; margin: 0; padding: 0 var(--fw-s-4); }
  .fw-pri-polozka {
    display: flex; align-items: center; gap: var(--fw-s-2);
    padding-block: var(--fw-s-2); border-block-end: 1px solid var(--fw-line);
  }
  .fw-pri-polozka:last-child { border-block-end: 0; }
  .fw-pri-polozka > dialog { text-align: start; }
  .fw-pri-jmeno { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; }
}
/* ===== P3.1 Přijaté doklady – konec ===== */

/* ===== P4.4 Provoz konzole – začátek (Pages/Sprava/{Zdravi,Ulohy,SazbyDph,Audit}) ===== */
@layer fw.pages {
  /* Zdraví: štítek stavu a popis na jednom řádku, seznam čekajících migrací pod ním. */
  .fw-zdravi dd { overflow-wrap: anywhere; }
  .fw-zdravi__seznam { margin: var(--fw-s-2) 0 0; padding-inline-start: 1.25rem; display: grid; gap: var(--fw-s-1); }

  /* Filtr auditu: formulář je panel (bez okrajů formuláře); pole vedle sebe, na mobilu pod sebou (FW-028). */
  .fw-audit-filtr { margin: 0; }
  .fw-audit-filtr__pole { display: grid; gap: var(--fw-s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
  /* Záznam ze vstupu podpory (operátor za uživatele) – barevný proužek vlevo a teplé pozadí. */
  .fw-audit__podpora > td { background: var(--fw-warn-soft); }
  .fw-audit__podpora > td:first-child { box-shadow: inset 3px 0 0 var(--fw-warn); }

  /* Sazby DPH: ukončení platnosti v řádku tabulky, formulář nové sazby ve mřížce. */
  .fw-sazby__ukonceni fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; flex-wrap: wrap; gap: var(--fw-s-2); }
  .fw-sazby__ukonceni .fw-input { inline-size: auto; max-inline-size: 11rem; }
  .fw-sazby__pole { display: grid; gap: var(--fw-s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
}
/* ===== P4.4 Provoz konzole – konec ===== */


/* ===== P3.3 Pokladna a účty – začátek (Pages/App/Pokladna, wireframe 12) ===== */
@layer fw.pages {
  /* Seznam pokladen: akce vpravo, na úzké kartě na vlastním řádku. */
  .fw-pokl-seznam td[data-card="actions"] { text-align: right; }
  .fw-pokl-seznam td[data-card="actions"] > dialog { text-align: start; }
  .fw-pokl-akce { justify-content: flex-end; flex-wrap: wrap; }
  .fw-pokl-seznam .fw-tag { margin-inline-start: var(--fw-s-2); }
  .fw-pokl-inline { display: contents; }
  @container table (width < 38rem) {
    .fw-pokl-seznam td[data-card="actions"] { grid-column: 1 / -1; text-align: left; padding-block-start: var(--fw-s-2); }
    .fw-pokl-akce { justify-content: flex-start; }
  }

  /* Období knihy: rychlá volba a vlastní od–do; na mobilu pod sebou bez vodorovného posunu (FW-028). */
  .fw-pokl-obdobi { flex-wrap: wrap; gap: var(--fw-s-3); }
  .fw-pokl-od-do { flex-wrap: wrap; gap: var(--fw-s-2); align-items: center; }
  .fw-pokl-od-do .fw-input { inline-size: auto; min-inline-size: 0; max-inline-size: 11rem; }

  /* Kniha: částky nezalamovat, popis ano; tabulka se posouvá uvnitř panelu, stránka ne. */
  .fw-pokl-kniha td[data-card="title"] { overflow-wrap: anywhere; }
  .fw-pokl-kniha .fw-tag { margin-inline-start: var(--fw-s-2); }

  /* Směr pohybu: dvě volby vedle sebe, na úzkém displeji pod sebou. */
  .fw-pokl-smer { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--fw-s-2) var(--fw-s-5); }
  .fw-pokl-smer > legend { padding: 0; margin-block-end: var(--fw-s-2); }
}
/* ===== P3.3 Pokladna a účty – konec ===== */

/* ===== P3.4 Pravidelné doklady a upomínky ===== */
@layer fw.pages {
  /* Fronta: překážka (červeně) a upozornění (žlutě) pod názvem předlohy – jedno místo, kam se člověk dívá. */
  .fw-prav-problem { color: var(--fw-danger); }
  .fw-prav-varovani { color: var(--fw-warn); }
  .fw-prav-pole { align-items: start; }
  /* Akce v nabídce jsou formuláře (POST) – formulář nesmí rozbít sloupec položek nabídky. */
  .fw-prav-menu form { display: contents; }
  .fw-upom-stupen { align-items: end; }
  .fw-upom-historie-h { margin: var(--fw-s-4) 0 0; font-size: var(--fw-fs-sm); }
  .fw-upom-bez-emailu { color: var(--fw-warn); }
  .fw-upom-dni { color: var(--fw-danger); }
}
/* ===== P3.4 Pravidelné doklady a upomínky – konec ===== */
/* ===== P4.1 Přehled a kostra konzole – začátek (Pages/Sprava/_LayoutKonzole, Pages/Sprava/Index*) ===== */
@layer fw.pages {
  /* Prostředí v liště (VPN · Náhled / Provoz): vždy vidět, ať se okno náhledu nesplete s provozem.
     Mimo provoz varovná barva (fw-tag--warn), v provozu tichý štítek. */
  .fw-konzole-prostredi { flex: none; margin-inline-start: var(--fw-s-2); white-space: nowrap; }
  /* Titulek stránky na mobilu vedle štítku: radši zkrátit než vodorovně posunout lištu (FW-028). */
  .fw-konzole-titulek { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Operátor a jeho role vpravo v liště – dva řádky, malým písmem, nezalamuje se. */
  .fw-konzole-operator { display: inline-flex; flex-direction: column; align-items: flex-end; font-size: var(--fw-fs-sm); line-height: 1.2; max-inline-size: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Kdo je přihlášený – první řádek menu operátora (na mobilu jediné místo, kde je vidět role). */
  .fw-konzole-kdo { margin: 0; padding: var(--fw-s-2) var(--fw-s-3); display: flex; flex-direction: column; gap: .125rem; overflow-wrap: anywhere; }
  /* Tabulky v panelech přehledu: když se nevejdou (dlouhý název úlohy, akce auditu), posouvají se
     uvnitř panelu, stránka ne. */
  .fw-konzole-tabulka { overflow-x: auto; }
  /* Selhaný běh úlohy – tónovaný štítek jako fw-tag--warn, jen v barvě chyby (fw.css danger tag nemá). */
  .fw-konzole-chyba { color: var(--fw-danger); background: var(--fw-danger-soft); }
}
/* ===== P4.1 Přehled a kostra konzole – konec ===== */
/* ===== P4.6 Šablony e-mailů – začátek (Pages/Sprava/Sablony) ===== */
@layer fw.pages {
  /* Seznam chyb kontroly šablony v upozornění – odrážky, bez okraje navíc. */
  .fw-sablony-chyby { margin: var(--fw-s-1) 0 0; padding-inline-start: 1.25rem; display: grid; gap: var(--fw-s-1); }
  /* Text šablony je dlouhý prostý text: písmo se stejnou šířkou znaků usnadní hlídání {{zástupných}} znaků. */
  .fw-sablony-text { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; min-block-size: 16rem; }
  /* Náhled jako text (bez iframe a bez vložení HTML – CSP): zalamuje se, stránka se vodorovně neposouvá. */
  .fw-sablony-nahled { margin: 0; padding: var(--fw-s-3); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fw-fs-sm); background: var(--fw-fill); border-radius: var(--fw-r-2); }
}
/* ===== P4.6 Šablony e-mailů – konec ===== */

/* ===== P4.7 Právní dokumenty a souhlas – začátek (Pages/Podminky, Pages/Ucet/Podminky, Pages/Sprava/PravniDokumenty) ===== */
@layer fw.pages {
  /* Odsouhlasení v kartě účtu: každý dokument jako řádek se zaškrtávacím polem a odkazem na znění. */
  .fw-podminky { display: flex; flex-direction: column; gap: var(--fw-s-4); }
  .fw-podminky__polozka {
    display: flex; flex-direction: column; gap: var(--fw-s-1);
    padding-block-end: var(--fw-s-3); border-block-end: 1px solid var(--fw-line);
  }
  /* Text souhlasu se zalomí pod sebe, zaškrtávací pole zůstane nahoře u prvního řádku. */
  .fw-podminky__polozka .fw-check { align-items: flex-start; }
  .fw-podminky__polozka .fw-check input { margin-block-start: .2rem; }

  /* Veřejné znění: vlastní kostra s lištou a čitelným sloupcem textu (do 70 znaků na řádek). */
  .fw-pravni-kostra { min-block-size: 100dvh; background: var(--fw-bg); }
  .fw-pravni-kostra__lista {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--fw-s-3) var(--fw-s-6);
    padding: var(--fw-s-3) var(--fw-s-4); background: var(--fw-surface); border-block-end: 1px solid var(--fw-line);
  }
  .fw-pravni-kostra__menu { display: flex; flex-wrap: wrap; gap: var(--fw-s-2) var(--fw-s-4); flex: 1 1 auto; }
  .fw-pravni-kostra__menu a { color: var(--fw-text-2); text-decoration: none; }
  .fw-pravni-kostra__menu a[aria-current="page"] { color: var(--fw-text); font-weight: 600; }
  .fw-pravni-kostra__obsah { padding: var(--fw-s-6) var(--fw-s-4) var(--fw-s-12); }
  .fw-pravni {
    max-inline-size: 46rem; margin-inline: auto; padding: var(--fw-s-6);
    background: var(--fw-surface); border-radius: var(--fw-r-3); overflow-wrap: anywhere;
  }
  .fw-pravni__hlava { display: flex; flex-direction: column; gap: var(--fw-s-3); margin-block-end: var(--fw-s-6); }
  .fw-pravni__meta { color: var(--fw-text-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--fw-s-2); }
  .fw-pravni__text { line-height: 1.6; }
  .fw-pravni__text :is(p, ul, ol) { margin-block: 0 var(--fw-s-3); }
  .fw-pravni__text :is(ul, ol) { padding-inline-start: 1.25rem; }
  .fw-pravni__text h2 { margin-block: var(--fw-s-6) var(--fw-s-3); }
  .fw-pravni__text h3 { margin-block: var(--fw-s-4) var(--fw-s-2); }
  .fw-pravni__verze { margin-block-start: var(--fw-s-8); padding-block-start: var(--fw-s-4); border-block-start: 1px solid var(--fw-line); }
  .fw-pravni__verze ul { padding-inline-start: 1.25rem; display: grid; gap: var(--fw-s-2); }
  /* Otisk je dlouhý hex – v seznamu verzí i v konzoli se láme kdekoli, ať nepřeteče na mobilu. */
  .fw-pravni__otisk { display: block; font-size: var(--fw-fs-sm); color: var(--fw-text-3); overflow-wrap: anywhere; word-break: break-all; }
  @media (width < 30rem) {
    .fw-pravni { padding: var(--fw-s-4); }
    .fw-pravni-kostra__obsah { padding-inline: var(--fw-s-2); }
  }
}
/* ===== P4.7 Právní dokumenty a souhlas – konec ===== */

/* ===== P3.5 Exporty, podklady, reporty a stránka úlohy – začátek (Pages/App/{Exporty,Podklady,Reporty,Ulohy}) ===== */
@layer fw.pages {
  .fw-exporty__uvod { margin: 0 0 var(--fw-s-5); max-inline-size: 70ch; color: var(--fw-text-2); }
  /* Formulář exportu: pole pod sebou, na široké ploše nejvýš 40rem – nic se nenatahuje přes celý panel. */
  .fw-exporty__formular { display: grid; gap: var(--fw-s-4); max-inline-size: 40rem; }
  .fw-exporty__volba { display: grid; gap: var(--fw-s-2); margin: 0; padding: 0; border: 0; min-inline-size: 0; }
  .fw-exporty__obdobi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fw-s-3); }
  @container main (width < 30rem) {
    .fw-exporty__obdobi { grid-template-columns: minmax(0, 1fr); }
  }

  .fw-reporty__volba { margin-block-end: var(--fw-s-4); max-inline-size: 100%; overflow-x: auto; }
  .fw-reporty__obdobi { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--fw-s-3); margin-block-end: var(--fw-s-4); }
  .fw-reporty__obdobi .fw-field { inline-size: 11rem; max-inline-size: 100%; }
  .fw-reporty__pravidla { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: var(--fw-s-2); color: var(--fw-text-2); }
  .fw-podklady__po { margin-inline-start: var(--fw-s-2); }

  .fw-uloha__popis { margin: 0 0 var(--fw-s-4); color: var(--fw-text-2); }
  .fw-uloha__spinner { inline-size: .75rem; block-size: .75rem; }
  .fw-uloha__stav--chyba { color: var(--fw-danger); background: var(--fw-danger-soft); }
}
/* ===== P3.5 Exporty, podklady, reporty a stránka úlohy – konec ===== */

/* ===== P3.6 Import – začátek (Pages/App/Import) ===== */
@layer fw.pages {
  /* Volba PROFIT / tabulka: dva panely vedle sebe, na mobilu pod sebou (fw-grid-2). */
  .fw-imp-volby { align-items: start; }
  /* Mapování sloupců: ukázka hodnot je jen nápověda – tlumeně a zkrácená. */
  .fw-imp-mapovani .fw-select { min-inline-size: 14rem; max-inline-size: 100%; }
  .fw-imp-ukazka { color: var(--fw-text-2); font-size: var(--fw-fs-sm, 0.875rem); max-inline-size: 24rem; overflow-wrap: anywhere; }
  .fw-imp-pocty td:first-child { font-weight: 600; }
  .fw-imp-protokol > summary { cursor: pointer; color: var(--fw-text-2); inline-size: fit-content; }
  .fw-imp-protokol[open] > summary { margin-block-end: var(--fw-s-2); }
}
/* ===== P3.6 Import – konec ===== */
/* ===== P3.2 Sklad – začátek (Pages/App/Sklad: zásoby, pohyby, karta produktu) ===== */
@layer fw.pages {
  .fw-sklad-hledani { inline-size: min(100%, 22rem); }
  .fw-sklad-karta { min-inline-size: 0; }
  /* Formulář v hlavičce karty (Vrátit z archivu) se chová jako tlačítko vedle ostatních. */
  .fw-sklad-inline { display: inline-flex; margin: 0; }
  .fw-sklad-archiv { margin-inline-start: var(--fw-s-2); }
  /* Stav zásoby na kartě: velké číslo s jednotkou. */
  .fw-sklad-zasoba { margin: 0; font-variant-numeric: tabular-nums; }
  .fw-sklad-pohyby { align-items: start; }
  .fw-sklad-filtr { row-gap: var(--fw-s-2); flex-wrap: wrap; }
  .fw-sklad-obdobi { flex: none; }
  /* Od–do jen u vlastního rozsahu (bez JS: :has na zvolené volbě). */
  .fw-sklad-rozsah { display: none; align-items: center; gap: var(--fw-s-2); }
  .fw-sklad-filtr:has(.fw-sklad-obdobi option[value="vlastni"]:checked) .fw-sklad-rozsah { display: flex; }
  .fw-sklad-rozsah__pole { display: inline-flex; align-items: center; gap: var(--fw-s-1); font-size: var(--fw-fs-sm); color: var(--fw-text-2); }
  .fw-sklad-rozsah__pole .fw-input { inline-size: 9.5rem; }
  @media (width < 45rem) {
    .fw-sklad-hledani { inline-size: 100%; }
    .fw-sklad-rozsah { flex-wrap: wrap; }
    .fw-sklad-rozsah__pole .fw-input { inline-size: auto; min-inline-size: 0; }
  }
}
/* ===== P3.2 Sklad – konec ===== */
/* ===== P3.7 Uživatelé, export dat, přístup podpory – začátek (Pages/App/Nastaveni/{Uzivatele,ExportDat,Podpora}) ===== */
@layer fw.pages {
  .fw-uziv__ja { margin-inline-start: var(--fw-s-2); }
  /* Změna role v řádku: výběr a tlačítko vedle sebe, na úzké kartě pod sebou. */
  .fw-uziv__role { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fw-s-2); }
  .fw-uziv__role .fw-select { inline-size: auto; min-inline-size: 9rem; }
  .fw-uziv__pozvat { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) auto; gap: var(--fw-s-3); align-items: end; }
  @container main (width < 40rem) {
    .fw-uziv__pozvat { grid-template-columns: minmax(0, 1fr); }
  }
  .fw-uziv td[data-card="actions"] { text-align: right; }
  .fw-uziv td[data-card="actions"] > dialog { text-align: start; }
  @container table (width < 38rem) {
    .fw-uziv td[data-card="actions"] { grid-column: 1 / -1; text-align: left; }
  }
  .fw-podpora__delky { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--fw-s-2) var(--fw-s-4); }
  .fw-podpora__delky > legend { padding: 0; margin-block-end: var(--fw-s-2); }
  .fw-export-dat__obsah { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: var(--fw-s-1); }
}
/* ===== P3.7 Uživatelé, export dat, přístup podpory – konec ===== */