/* ====================================================================
   mobil.css — PODOBA DOKLADU NA TELEFONU.

   Vlastní soubor, ne další oddíl ve `style.css`. Na displeji se doklad
   nevyplňuje jako list, ale jako formulář — je to jiné rozvržení téhož
   dokumentu a má být na jednom místě, ne rozseté mezi pravidla pro papír.

   NA PAPÍR ANI NA POČÍTAČ TENHLE SOUBOR NEDOSÁHNE. Všechno je uvnitř
   `@media screen and (max-width: 820px)`: `screen` proto, že A4 je v CSS
   794 px široká a podmínka jen na šířku by platila i pro tisk (přesně
   tahle chyba tu jednou byla — doklad vyjel z tiskárny v mobilním
   rozvržení). Kdo ladí telefon, nemůže odsud rozbít list.

   NAČÍTÁ SE JAKO POSLEDNÍ, až za šablonami. Skládání pro telefon musí
   přebít i to, co si podoba faktury nastavila pro list — rámečky buněk
   v Mřížce, sloupce v Pruhu. Kdyby stál před nimi, přepsaly by ho.

   Starší drobnosti (hlavička, platební blok, lišta) zůstaly v oddílu
   `max-width: 820px` ve `style.css`. Co se týká VYPLŇOVÁNÍ dokladu na
   telefonu, patří sem.
==================================================================== */
@media screen and (max-width: 820px) {
  /* ── okraj listu ──────────────────────────────────────────────────
     Široké okraje jsou vlastnost PAPÍRU: na A4 dělají list vzdušný a Čistá
     na nich stojí (54 px). Na 360px displeji ale ukrojily z obsahu dvě
     třetiny — zbylo 228 px na položky a cena za MJ se vešla do 25 px
     (naměřeno v prohlížeči). Na telefonu proto všem podobám týž úzký okraj.

     Bydlí to tady, a ne ve `style.css`: tam ta hodnota prohrávala, protože
     šablony se načítají až za ním. Tenhle soubor je až za nimi. */
  #faktura {
    --pad-x: 16px;
    --pad-y: 20px;
    /* Odsazení se přepisuje i samo, nejen proměnnou: „Čistá" si ho nastavuje
       napřímo (`padding: 52px 54px 44px`), takže by jí přepsaná proměnná byla
       k ničemu. Hodnota je táž jako v základním stylu, jen z proměnných výš —
       ostatní podoby na nich stavějí a rozejít se nesmí. */
    padding: var(--pad-y) var(--pad-x) 30px;
  }
  /* „Dopis" o kousek víc — jeho vzhled na okrajích stojí, jen ne na 74px. */
  #faktura.s-dopis {
    --pad-x: 20px;
    --pad-y: 24px;
  }

  /* ── položka jako karta ───────────────────────────────────────────
     Sedm sloupců se do 412 px nevejde. Rozpad na sedm řádků „popisek —
     hodnota" pod sebou se sice vešel, ale z jedné položky udělal půl
     obrazovky a psalo se do něj špatně: pole nebyla vidět jako pole,
     jen jako čísla u popisků.

     Karta místo toho drží položku pohromadě a odděluje TŘI VĚCI:
       1. co se dodalo (text přes celou šířku, tam se píše nejvíc),
       2. čtyři údaje, které se vyplňují (počet, MJ, cena, sazba),
       3. dva, které appka počítá (základ a celkem s DPH).
     Co se vyplňuje, vypadá jako pole — orámované, s popiskem nad sebou
     a dost vysoké na prst. Co se počítá, je řádka pod čarou bez rámečku,
     aby do ní nikdo nezkoušel psát. */
  #rows tr {
    display: grid;
    /* Počet a MJ jsou krátké, cena potřebuje zbytek, sazba je nabídka
       o pevné šířce. Na 360px displeji zbude na cenu ~110 px, což je
       „1 250 000,00" bez zalomení. */
    grid-template-columns: 3.4rem 3.2rem minmax(0, 1fr) 4.6rem;
    grid-template-areas:
      "desc desc  desc  desc"
      "qty  unit  price dph"
      "base base  sum   sum";
    gap: 10px 8px;
    padding: 14px 0 16px;
  }
  /* Linky a podbarvení buněk jsou z TABULKY — na listu dělají řádky a sloupce,
     v kartě z nich zbyly čárky pod poli, které nic neoddělují. Podoby faktury
     si je nastavují po svém (Mřížka orámuje každou buňku, Čistá podtrhne
     řádek), takže se to musí smazat tady, za nimi. Kartu od karty dělí jedna
     linka na `tr` ze základního stylu. */
  #rows td {
    border: 0;
    background: none;
  }
  #rows tr:hover td {
    background: none;
  }

  #rows td.desc {
    grid-area: desc;
  }
  #rows td.qty {
    grid-area: qty;
  }
  #rows td.unit {
    grid-area: unit;
  }
  #rows td.price {
    grid-area: price;
  }
  #rows td.dph {
    grid-area: dph;
  }
  #rows td.base {
    grid-area: base;
  }
  #rows td.sum {
    grid-area: sum;
  }

  /* Popisek NAD polem, ne před ním. Vedle hodnoty ukusoval z místa,
     které potřebuje číslo, a u MJ se dokonce slepil s hodnotou („MJks“). */
  #rows td.qty::before,
  #rows td.unit::before,
  #rows td.price::before,
  #rows td.dph::before {
    content: attr(data-l);
    display: block;
    float: none;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 10.5px;
    letter-spacing: 0.02em;
    /* Popisek se nesmí zalomit na dva řádky — pole pod ním by pak stálo
       níž než sousední a řádka by se rozjela. */
    white-space: nowrap;
  }

  /* Pole. Orámované a vysoké na prst; `44 px` je nejmenší dotyková plocha,
     kterou se dá trefit bez míření (a i s ní se vejdou čtyři vedle sebe). */
  #rows td.qty [contenteditable],
  #rows td.unit [contenteditable],
  #rows td.price [contenteditable],
  #rows td.dph select.rate {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    /* 16 px schválně, ze stejného důvodu jako u polí v nastavení: pod tuhle
       hranici Safari na iPhonu při ťuknutí do pole přizoomuje celou stránku
       a doklad uskočí. */
    font-size: 16px;
  }
  #rows td.qty [contenteditable],
  #rows td.price [contenteditable] {
    justify-content: flex-end;
    text-align: right;
  }
  #rows td.dph select.rate {
    padding-right: 2px;
  }
  /* Počet a MJ zůstávají i prázdné bílé v rámečku. Modré podbarvení ze
     `style.css` („prázdné pole se hlásí samo") je pro pole, která na listu
     žádný rámeček nemají a prázdná by po sobě nechala jen popisek — tady je
     rámeček vidět tak jako tak a modrá by z formuláře udělala pruhovaný
     vzorník. Přebít se to musí i rozměrem: pravidlo ve `style.css` má vyšší
     váhu (`:not(.filled)`) a srazilo prázdné pole na 28 px, tedy pod
     dotykovou mez, kterou má vedle něj vyplněné. */
  #rows td.qty [contenteditable]:not(.filled),
  #rows td.unit [contenteditable]:not(.filled) {
    display: flex;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    background: #fff;
  }
  #rows td.qty [contenteditable]:focus,
  #rows td.unit [contenteditable]:focus,
  #rows td.price [contenteditable]:focus {
    border-color: var(--cyan);
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 175, 214, 0.18);
  }

  /* Text dodávky. Píše se do něj nejvíc, takže dostane celou šířku a výšku
     na dvě řádky; křížek na mazání stojí v pravém horním rohu karty
     (`style.css`), proto to odsazení vpravo. */
  /* Popis a mazací křížek vedle sebe, křížek svisle na střed pole. Ve
     `style.css` je přibitý do pravého horního rohu řádku (`position:
     absolute`), což na listu sedí — v kartě ale pole s popisem přeroste na
     dvě řádky a křížek pak visel u jeho horní hrany. */
  #rows td.desc {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
  }
  #rows td.desc span[contenteditable] {
    flex: 1;
    min-width: 0;
  }
  #rows td.desc .del {
    position: static;
    flex: none;
    margin: 0;
    padding: 4px 2px;
    font-size: 19px;
  }
  #rows td.desc span[contenteditable] {
    display: block;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    font-size: 16px;
  }
  #rows td.desc span[contenteditable]:focus {
    border-color: var(--cyan);
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 175, 214, 0.18);
  }

  /* Počítané hodnoty. Bez rámečku a menší — kdyby vypadaly jako pole,
     lidé by do nich psali a divili se, proč se to přepíše. */
  #rows td.base,
  #rows td.sum {
    display: flex;
    /* Linka nad počítanými hodnotami má jít vcelku. Buňky jsou dvě a mezi
       sloupci je mezera, takže se přes ni přemostí zápornými okraji — jinak
       se linka uprostřed přetrhne. */
    margin: 0 -4px;
    padding-left: 4px;
    padding-right: 4px;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    border: none;
    border-top: 1px solid var(--line);
    font-size: 13px;
  }
  #rows td.base::before,
  #rows td.sum::before {
    float: none;
    color: var(--muted);
  }
  #rows td.sum {
    font-weight: 700;
  }

  /* ── razítko až pod součty ────────────────────────────────────────
     Na listu stojí podpisové místo VEDLE rekapitulace, protože se čtou
     najednou. Na telefonu jsou pod sebou a pořadí z listu dávalo prázdné
     místo na podpis dřív než částku, kvůli které si doklad člověk otevřel.
     Přesouvá se to pořadím v mřížce, ne v dokumentu — do QR kódu ani do
     tisku to tedy nesahá. */
  .summary .sign {
    order: 2;
    margin-top: 6px;
  }

  /* ── QR kód ───────────────────────────────────────────────────────
     „Čistá" odděluje kód od platebních údajů svislou linkou — na listu
     stojí vedle sebe. Na telefonu jsou pod sebou, kód jde doprostřed
     (`.qrwrap { margin: 0 auto }` v základním stylu) a z linky zbyla svislá
     čárka, která nic neodděluje a kód ještě srážela z osy o svou tloušťku
     i o odsazení, které k ní patřilo. */
  .s-cista .qrwrap {
    padding: 0;
    border-left: 0;
  }

  /* ── hlavička: čárový kód jen do náhledu, logo zůstává ─────────────
     Na displeji je doklad FORMULÁŘ — píše se do něj. Čárový kód se do něj
     psát nedá (kreslí se z čísla faktury) a na telefonu jen ukusoval
     z výšky nad údaji, kvůli kterým je faktura otevřená. Nezmizel, jen se
     přesunul tam, kde dává smysl: do náhledu a na papír. Náhled staví listy
     v rámu širokém 830 px, takže se tenhle oddíl v něm neuplatní.

     Logo bylo schované taky, ale to byla chyba: bez destičky „Logo firmy"
     se člověk na telefonu nedozvěděl, že logo nahrát může a že na něj na
     dokladu je místo. Destička (i nahrané logo) tedy zůstává — je to
     jediné místo, kde se o logu dozví. */
  header .carkod {
    display: none;
  }
  /* Typ dokladu vedle loga, ne pod ním. Blok si drží šířku svého obsahu
     (`<select>` se nezalomí), logo se přizpůsobí (`style.css`). `.page`
     v selektoru přebíjí pravidla podoby (na telefonu je to vždy „Čistá",
     viz `nasadSablonu()`). Proklad písmen v názvu typu je na telefonu
     menší: „FAKTURA — DAŇOVÝ DOKLAD" s 0,19 em měřil 226 px a vedle
     destičky loga se na 360px displej nevešel. */
  .page .doctype {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
  }
  .page select.t {
    letter-spacing: 0.06em;
  }
  /* Místo pod přepínačem podoby faktury. Ten stojí vytažený z toku uprostřed
     horního okraje listu (`select.sablona { position: absolute; top: 6px }`),
     takže o něm mřížka neví — a bez odsazení na něj dosedal typ dokladu
     (naměřeno: přepínač končí 22 px od horní hrany listu, typ dokladu
     začínal na 20). Odsazení je proto na hlavičce, ne na listu: přidat ho
     k `--pad-y` by odsadilo i patičku dole, kde chybět nemá. */
  header {
    padding-top: 28px;
  }

  /* ── platební blok: úhrada a účet každý na vlastním řádku ──────────
     Ve dvou sloupcích stály „Úhrada" a „Bankovní účet" vedle sebe a účet
     měl na sebe ~150 px — číslo s předčíslím se lámalo uprostřed. Úhrada
     je volba z nabídky, účet se PÍŠE; každý dostane celý řádek a účet
     formulářové pole jako popis položky (`#rows td.desc`): rámeček, 40 px,
     16px písmo — na telefonu je to jediný tvar, který říká „sem se píše". */
  .page #pay .cell.p-zpusob,
  .page #pay .cell.p-ucet:has(> .val > #acc) {
    grid-column: 1 / -1;
    /* `style.css` prázdný účet zarovnává na začátek (`justify-self: start`),
       aby modrý pruh nebyl přes půl listu — tady je pole rámeček a má být
       přes celou šířku. `:has(> .val > #acc)` je tu jen kvůli váze: pravidlo
       ve `style.css` má v `:has()` také `#acc` a bez něj by vyhrálo. */
    justify-self: stretch;
  }
  .page #acc {
    display: block;
    min-height: 40px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    font-size: 16px;
    line-height: 1.4;
  }
  .page #acc:focus {
    border-color: var(--cyan);
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 175, 214, 0.18);
  }

  /* ── popisek platebního bloku ─────────────────────────────────────
     „Platební údaje" na listu uvozuje SLOUPEC: pás vlevo od dokladu drží
     popisky oddílů a bez nich by v něm zůstala prázdná plocha. Na telefonu
     je doklad jeden sloupec, popisek stojí nad orámovaným blokem, ve kterém
     je „Bankovní účet", „Var. symbol" a QR kód — a ten se sám představí líp
     než modrý nadpis nad ním. Ubíral výšku a barvou přitahoval oko k tomu,
     co ho nepotřebuje. */
  .seclabel.platba {
    display: none;
  }

  /* „+ Přidat položku" o pětinu větší než na listu: na telefonu je to jediné
     tlačítko uvnitř dokladu a mačká se prstem, ne myší. */
  .addrow button {
    padding: 10px 17px;
    font-size: 15.5px;
  }
}