/* ══ Pruh ═════════════════════════════════════════════════════════
   Splatnost, platební údaje, QR kód a částka k úhradě ve sloupci vlevo,
   dodávka vpravo. Sloupec je BÍLÝ a dělí ho jen šedá linka: barevná
   plocha přes celou výšku listu je na inkoustové tiskárně půl kazety
   a levné laserovky u ní nechávají bílý lem. */

/* Hlavička bez rámečku kolem typu dokladu: popisek nahoře, číslo jako nadpis.
   Vychází z „Čisté", ale stojí tady — každá podoba si svůj vzhled nese sama,
   ať zásah do jedné nesáhne na druhou. */
.s-pruh .doctype {
  min-width: 0;
  padding: 0;
  border: none;
}
.s-pruh select.t {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  text-align-last: right;
}
.s-pruh .doctype .n {
  font-size: 28px;
  letter-spacing: -0.01em;
}
.s-pruh h4 {
  margin-bottom: 6px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.s-pruh .strong {
  font-size: 14.5px;
  line-height: 1.25;
}
.s-pruh .pay {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: none;
}
.s-pruh .pay .cols {
  grid-template-columns: 1fr;
  gap: 9px;
}
.s-pruh .pay .val {
  font-size: 12.5px;
}
.s-pruh .pay .cell.r {
  margin-top: 4px;
  text-align: left;
}
.s-pruh .pay .cell.r .val {
  font-size: 22px;
}
/* V úzkém sloupci se IBAN a SWIFT vedle sebe nevejdou — jdou pod sebe. */
.s-pruh .pay .cell.wide {
  grid-column: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  margin-top: 6px;
}
.s-pruh .pay .cell.wide .val {
  font-size: 12px;
  /* Ve sloupci se IBAN se způsobem platby na jeden řádek nevejde — zákaz
     zalomení platí jen pro krátké hodnoty (účet, symboly), ne pro tenhle. */
  white-space: normal;
}
.s-pruh .qrwrap {
  align-items: flex-start;
  margin-top: 14px;
  padding: 0;
  border: none;
}
/* Kód se řídí šířkou sloupce, ne pevnými pixely — na papíře je sloupec
   o třetinu užší než na obrazovce a 120px kód by z něj vylezl. */
.s-pruh .qrbox {
  width: 100%;
  max-width: 150px;
  height: auto;
  aspect-ratio: 1;
}

/* Rozvržení do sloupců: široký displej A PAPÍR. `print` v podmínce není
   zbytečný — A4 je v CSS 794 px široká, takže podmínka jen na šířku by na
   papíře neplatila a doklad by se vytiskl v jednom sloupci. Na telefonu
   platí mobilní oddíl ve `style.css` a všechno se slévá do jednoho sloupce. */
@media print, (min-width: 821px) {
  /* Pás je SKUTEČNÝ box, jediná šablona, kde to tak je: linka mezi ním
     a dodávkou musí jít přes celou výšku listu a z řady samostatných bloků
     by se poskládat nedala. Proto tu `.rail` i `.obsah` z `display: contents`
     vystupují zpátky a mřížka je rozmístí jako celky.

     Tři sloupce: pás, číslo dokladu, logo. Číslo je vlevo a logo u pravého
     okraje — v pásu by logo zmizelo pod platebními údaji. */
  .s-pruh {
    grid-template-columns: 26% 1fr auto;
    column-gap: 0;
    /* Řádky se MUSÍ přibít. Pás jde přes všechny tři a mřížka by jeho výšku
       rozpustila do všech — hlavička by se nafoukla na třetinu pásu a mezi
       číslem dokladu a linkou by zůstalo prázdno (naměřeno: řádek 123 px
       na 57 px obsahu). `1fr` posílá přebytek do posledního řádku, kde je
       dodávka a kde na něm nezáleží. */
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "rail typ logo"
      "rail odb odb"
      "rail data data"
      "rail obsah obsah";
  }
  /* Hlavička se v Pruhu rozpadá na dva samostatné bloky (číslo vlevo, logo
     vpravo), takže musí z rozvržení ven — jinak zůstane jedním prvkem, pro
     který v mapě oblastí není místo, a mřížka ho odsune na konec dokladu. */
  .s-pruh header {
    display: contents;
  }
  .s-pruh .rail {
    display: block;
    grid-area: rail;
    padding-right: 22px;
    /* Jediná linka na listu. Přes celou výšku, protože pás je v mřížce jeden
       prvek přes všechny řádky — ne řada bloků s vlastními okraji. */
    border-right: 1px solid var(--line);
  }
  /* Platební údaje v pásu: popisek vlevo, hodnota vpravo, jeden řádek na
     údaj. Pod sebou zabraly dvakrát tolik výšky a pás pak přerostl dodávku.
     Popisky jsou zkrácené — „Bankovní účet" se do sloupce vedle hodnoty
     nevejde. Text nese `data-kratce` v dokumentu, vypisuje ho `content`,
     takže šablona zůstává jen stylem. */
  /* Mřížka buněk z rozvržení ven: údaje, QR kód i částka jsou pak přímo
     v pásu jako jeden sloupec a dá se jim určit pořadí — částka patří AŽ
     ZA kód, jak je v návrhu. */
  .s-pruh .pay .cols {
    display: contents;
  }
  .s-pruh .pay .cell,
  .s-pruh .pay .cell.wide .par {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 10px;
  }
  /* Nadpis pásu je kratší: „Platební údaje“ přes celou šířku sloupce
     překřičí údaje pod sebou. */
  /* Nadpis pásu je popiskem oddílu jako „Dodavatel“ — stejný stupeň, řez
     i barva. Firemní modrá z něj dělala nejnápadnější prvek pásu. */
  .s-pruh .seclabel.platba {
    margin: 18px 0 8px;
    font-size: 0;
    color: var(--muted);
  }
  .s-pruh .seclabel.platba::before {
    content: attr(data-kratce);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
  }
  /* Mezery dělí údaje do skupin: co se opisuje do tuzemského příkazu,
     co do zahraničního a čím se platí. Bez nich je z pásu jeden sloupec
     čísel, ve kterém oko nemá kde zastavit. */
  .s-pruh .p-iban,
  .s-pruh .p-zpusob {
    margin-top: 9px;
  }
  /* Půlky IBANu pod sebe. Vedle sebe by sloupec roztáhly natolik, že by se
     do něj nevešlo číslo účtu. */
  .s-pruh #iban .ib {
    display: block;
  }
  .s-pruh .pay .lbl {
    font-size: 0;
  }
  .s-pruh .pay .lbl::before {
    content: attr(data-kratce);
    font-size: 11px;
  }
  .s-pruh .pay .val {
    text-align: right;
  }
  /* Obal IBANu a SWIFTu z rozvržení ven, ať jsou to dva samostatné řádky
     jako ostatní údaje. */
  .s-pruh .pay .cell.wide {
    display: contents;
  }
  /* Pořadí podle návrhu: účet, symboly, IBAN, SWIFT, způsob, částka.
     V dokumentu zůstává pořadí čtené — způsob platby u účtu. */
  .s-pruh .p-ucet {
    order: 1;
  }
  .s-pruh .p-vs {
    order: 2;
  }
  .s-pruh .p-ks {
    order: 3;
  }
  .s-pruh .p-iban {
    order: 4;
  }
  .s-pruh .p-swift {
    order: 5;
  }
  .s-pruh .p-zpusob {
    order: 6;
  }
  /* QR kód mezi údaje a částku — pořadí z návrhu. */
  .s-pruh .qrwrap {
    order: 7;
  }
  /* Pod QR kódem už částka není: na listu je jednou, dole u rekapitulace.
     `recalc()` do buňky píše dál, jen se nekreslí. */
  .s-pruh .pay .cell.p-celkem {
    display: none;
  }

  /* Datum patří k dodávce, ne do pásu: čte se spolu s ní a v úzkém sloupci
     se navíc lámalo pod popisek. Pole se rozdělí na stejné díly přes celou
     šířku — nasypaná k levému okraji se čtou jako jeden odstavec. */
  .s-pruh .dates {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding-left: 26px;
  }
  .s-pruh .obsah {
    display: block;
    grid-area: obsah;
    min-width: 0;
    padding-left: 26px;
  }
  .s-pruh .logo img {
    max-height: 34px;
  }
  .s-pruh .logo {
    grid-area: logo;
    padding-left: 26px;
    text-align: right;
  }
  .s-pruh .doctype {
    grid-area: typ;
    padding-left: 26px;
    text-align: left;
    text-align-last: left;
  }
  .s-pruh select.t {
    text-align: left;
    text-align-last: left;
  }
  /* Linka pod hlavičkou patří sem: `header` je vyřazená z rozvržení, takže
     by ji neměla kam nakreslit, a přes dva sloupce oddělené mezerou by se
     přetrhla. Takhle je to jeden prvek a linka jde vcelku. */
  .s-pruh .odberatel {
    grid-area: odb;
    display: grid;
    align-content: start;
    grid-template-columns: 1fr auto;
    column-gap: 24px;
    /* Odsazení OKRAJEM, ne vnitřní výplní: linka se kreslí přes celý box
       včetně výplně, takže s `padding-left` začínala hned u svislé čáry pásu
       a obě se dotýkaly. */
    margin: 14px 0 0 26px;
    padding: 14px 0 0;
    border-top: 2px solid var(--ink);
  }
  .s-pruh .odberatel > * {
    grid-column: 1;
  }
  /* Daňová čísla u pravého okraje, ne pod adresou — na širokém sloupci by
     se pod ní ztratila. */
  .s-pruh .odberatel > .ids {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    justify-content: end;
    margin-top: 0;
    text-align: right;
  }
  .s-pruh .summary {
    grid-template-columns: 1fr 320px;
  }
  /* Rekapitulace se vejde do užšího sloupce jen zmenšená — a hlavičky se
     nesmí zalomit, „Bez / DPH" na dvou řádcích se čte jako dva sloupce. */
  .s-pruh table.vat {
    font-size: 12px;
  }
  .s-pruh table.vat th,
  .s-pruh table.vat td {
    padding: 5px 6px;
    white-space: nowrap;
  }
  .s-pruh .total {
    font-size: 18px;
  }
  .s-pruh .total b {
    font-size: 21px;
  }
  .s-pruh table.items th,
  .s-pruh table.items td {
    padding: 9px 5px;
  }
  /* Linka pod hlavičkou tabulky černě: tabulka tak začíná viditelně, i když
     nemá svislé linky. Šedá splývala s řádky pod ní. */
  .s-pruh table.items th {
    border-bottom: 1.5px solid var(--ink);
  }
  .s-pruh table.items td.desc {
    width: 36%;
  }
  /* Čísla se nesmí zalomit — „18 400,00" na dvou řádcích se čte jako dvě
     částky. Zalamuje se jen popis dodávky, který na to má šířku. */
  .s-pruh table.items td:not(.desc) {
    white-space: nowrap;
  }
}