/* ══ Čistá — výchozí ══════════════════════════════════════════════
   DOSLOVNÝ PŘEPIS NÁVRHU 01. Hodnoty (stupně písma, prokládání, odsazení,
   barvy, tloušťky linek) nejsou odhadnuté — jsou opsané z návrhu, který
   byl vysázený na A4. Nesahej na ně po jednom „ať to trochu dýchá":
   drží spolu jako soustava a jednotlivá úprava ji rozladí.

   Vlastní barvy listu: akcent je o odstín tlumenější než firemní cyan
   appky (#1a94b8 vs #1fafd6) — na papíře je sytá cyan křiklavá a při
   tisku ve stupních šedi splyne s černou.

   Skladba: hlavička → strany → data → platba → text → položky → součty
   → patička. Kde je v návrhu barevná plocha, je právě jedna: částka. */
.s-cista {
  --ink: #141414;
  --muted: #68767c;
  --line: #d5dcdf;
  --cyan: #1a94b8;
  /* Vlasová linka mezi řádky tabulky je světlejší než obrys pole — jinak
     tabulka o deseti položkách překřičí všechno ostatní. */
  --radek: #e6ebed;
  font-size: 11px;
  line-height: 1.4;
  padding: 52px 54px 44px;
}

/* ── hlavička ───────────────────────────────────────────────────── */
.s-cista header {
  align-items: flex-start;
  margin-bottom: 0;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}
.s-cista .logo img {
  max-height: 34px;
}
.s-cista .doctype {
  min-width: 0;
  padding: 0;
  border: none;
  text-align: right;
}
.s-cista select.t {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: #5c6a70;
  text-align: right;
  text-align-last: right;
}
.s-cista .doctype .n {
  margin-top: 2px;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* ── strany ─────────────────────────────────────────────────────── */
/* `.parties` je `display: contents`, takže vlastní odsazení nemá kam nakreslit
   — mezeru pod linkou hlavičky si drží samotné bloky stran. */
.s-cista #blokDodavatel,
.s-cista .odberatel {
  margin: 18px 0 16px;
}
/* Popisky stran verzálkami a tlumeně, ne v barvě: barevné braly pozornost
   jménu firmy pod sebou, a to je na dokladu to podstatné. */
.s-cista h4 {
  margin: 0 0 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.s-cista .strong {
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}
.s-cista .ids {
  margin-top: 7px;
  gap: 1px 10px;
  font-size: 10.5px;
}

/* ── data ───────────────────────────────────────────────────────── */
.s-cista .dates {
  gap: 16px;
  margin: 0 0 16px;
  padding: 10px 14px;
  background: #f2f5f6;
}
.s-cista .dates .lbl {
  font-size: 9px;
  letter-spacing: 0.12em;
}
.s-cista .dates .val {
  font-size: 12px;
  font-weight: 600;
}

/* ── platba ─────────────────────────────────────────────────────── */
.s-cista .pay {
  align-items: stretch;
  gap: 0;
  margin: 0 0 18px;
  padding: 0;
  border: 1px solid var(--line);
}
.s-cista .pay .cols {
  align-items: start;
  gap: 10px 16px;
  padding: 12px 14px;
}
.s-cista .pay .lbl {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.s-cista .pay .val {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Částka je na listu JEDNOU, dole na zvýrazněné ploše. V platebním poli
   byla podruhé a dělala z něj čtyři sloupce místo tří — oko pak nevědělo,
   které z těch dvou čísel je závazné. `recalc()` do buňky píše dál. */
.s-cista .pay .cell.r {
  display: none;
}
.s-cista .pay .cell.wide {
  margin-top: 0;
  padding-top: 8px;
  border-top: 1px solid var(--radek);
}
.s-cista .pay .cell.wide .val {
  font-size: 12px;
}
.s-cista .qrwrap {
  justify-content: center;
  gap: 4px;
  padding: 10px 12px;
  border: none;
  border-left: 1px solid var(--line);
  border-radius: 0;
}
.s-cista .qrbox {
  width: 98px;
  height: 98px;
}
.s-cista .qrcap {
  margin-top: 0;
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── text a položky ─────────────────────────────────────────────── */
/* Jen svislé okraje! Postranní `margin: 0 -6px` ze základního stylu ruší
   vnitřní odsazení pole (`padding: 3px 6px`), které je tam kvůli podbarvení
   při psaní. Kdo přepíše celý `margin`, posune text o 6 px doprava a věta
   přestane lícovat s tabulkou pod sebou. */
.s-cista .beforeitems {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 10.5px;
  color: #3d484d;
}
.s-cista .afteritems {
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 10.5px;
  color: #3d484d;
}
.s-cista table.items th {
  padding: 0 8px 6px 0;
  border-bottom: 1.5px solid var(--ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.s-cista table.items td {
  padding: 8px 8px 8px 0;
  border-bottom: 1px solid var(--radek);
  font-size: 11px;
}
.s-cista table.items td.desc {
  font-weight: 600;
}
.s-cista table.items tr:hover td {
  background: #f7fcfe;
}

/* ── součty ─────────────────────────────────────────────────────── */
.s-cista .summary {
  margin-top: 20px;
}
.s-cista .sign {
  font-size: 9.5px;
}
.s-cista .discount {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0 0 7px;
  font-size: 11px;
  color: #3d484d;
}
.s-cista table.vat th {
  padding: 0 0 5px 10px;
  border-bottom: 1px solid #cfd7da;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.s-cista table.vat th:first-child {
  padding-left: 0;
}
.s-cista table.vat td {
  padding: 5px 0 5px 10px;
  border-bottom: 1px solid #eceff1;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.s-cista table.vat td:first-child {
  padding-left: 0;
}
/* Částka v rámečku, bez podbarvení. Popisek a číslo na dvou koncích — mezi
   nimi je prázdno, takže se nedají splést. Rámeček místo plochy schválně:
   plocha se na inkoustové tiskárně vlní a ve stupních šedi zešedne, kdežto
   linka vyjde stejně z každé tiskárny. */
.s-cista .total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.s-cista .total b {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ── patička ────────────────────────────────────────────────────── */
.s-cista footer {
  margin-top: 40px;
}
.s-cista footer {
  padding-top: 8px;
  border-top: 1px solid #dfe5e7;
  font-size: 8.5px;
  color: #7b878c;
}
.s-cista footer .note {
  font-size: 8.5px;
}
.s-cista footer .issuer {
  margin-top: 5px;
  font-size: 8.5px;
}

/* 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) {
  /* Strany vedle sebe. Vlastní mapa oblastí, ne zděděná: každá šablona si
     rozvržení určuje sama a nesmí spoléhat na to, co nastavila jiná. */
  .s-cista {
    grid-template-columns: 1fr 1fr;
    column-gap: 34px;
    grid-template-areas:
      "hlav hlav"
      "dod odb"
      "data data"
      "lplat lplat"
      "plat plat"
      "text text"
      "pol pol"
      "pridat pridat"
      "zatext zatext"
      "souhrn souhrn"
      "pata pata";
  }
  /* Data na čtyři stejné díly přes celou plochu. Na telefonu zůstává pružné
     zalomení ze základního stylu — čtyři sloupce by tam byly proužky. */
  .s-cista .dates {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  /* Nadpisy oddílů „Platební údaje" a „Fakturujeme vám" na širokém listu
     mizí: ohraničené pole a tabulka se představí samy a v návrhu je doklad
     bez nich. Na telefonu zůstávají — „Fakturujeme vám" je tam zároveň
     ovladač, kterým se text před položkami skládá. */
  .s-cista .seclabel {
    display: none;
  }
  /* Čtyři buňky: účet, oba symboly a úhrada. Pátá („K úhradě") je v Čisté
     schovaná — částka je na listu jednou, dole na zvýrazněné ploše. */
  .s-cista .pay .cols {
    grid-template-columns: repeat(4, 1fr);
  }
  /* Součty vpravo v pevné šířce, razítko vlevo u spodní hrany. Na telefonu
     zůstává jeden sloupec ze základního stylu — 340 px pevně by tam vystrčilo
     rekapitulaci mimo obrazovku (naměřeno: viewport 360, obsah 476). */
  .s-cista .summary {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
  }
  .s-cista .summary > :last-child {
    flex: none;
    width: 340px;
  }
}