/* Vzhled aplikace.
   Psane pro telefon; siroka obrazovka dostane v zavecnych @media blocich
   postranni panel a vicesloupcove rozvrzeni.

   Barvy se ridi nastavenim systemu, dokud si uzivatel nevybere jinak -
   vecerni kontrola v posteli nema svitit do oci, ale kdo ma systemove
   tmu a chce aplikaci svetlou, musi ji prebit. */

:root {
    /* Obe palety pohromade, aby se hodnoty psaly jednou. Prirazeni je
       pak trikrat: vychozi, podle systemu a podle volby uzivatele. */
    --sv-pozadi:     #f6f6f4;
    --sv-plocha:     #ffffff;
    --sv-text:       #1b1b19;
    --sv-text-slaby: #6b6b63;
    --sv-linka:      #e2e2dc;
    --sv-akce:       #1f6f4a;
    --sv-akce-text:  #ffffff;
    --sv-chyba:      #8c2f2f;
    --sv-chyba-pole: #fbeaea;
    /* Prijem a vydaj. Vlastni dvojice, ne --akce a --chyba: zelena akce
       je tlacitko, cervena chyba je porucha - castka neni ani jedno
       a menit odstin tlacitek kvuli vypisu by rozhodilo celou aplikaci. */
    --sv-plus:       #1a6b45;
    --sv-minus:      #a3372f;

    --tm-pozadi:     #16171a;
    --tm-plocha:     #1f2126;
    --tm-text:       #ececea;
    --tm-text-slaby: #9a9a95;
    --tm-linka:      #2e3138;
    --tm-akce:       #4fae7f;
    --tm-akce-text:  #10241a;
    --tm-chyba:      #f0a3a3;
    --tm-chyba-pole: #3a2020;
    --tm-plus:       #5cbb8a;
    --tm-minus:      #ea8a80;

    --pozadi:     var(--sv-pozadi);
    --plocha:     var(--sv-plocha);
    --text:       var(--sv-text);
    --text-slaby: var(--sv-text-slaby);
    --linka:      var(--sv-linka);
    --akce:       var(--sv-akce);
    --akce-text:  var(--sv-akce-text);
    --chyba:      var(--sv-chyba);
    --chyba-pole: var(--sv-chyba-pole);
    --plus:       var(--sv-plus);
    --minus:      var(--sv-minus);
}

/* Systemove nastaveni plati, dokud si uzivatel nevybral svetlo natvrdo. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="svetle"]) {
        --pozadi:     var(--tm-pozadi);
        --plocha:     var(--tm-plocha);
        --text:       var(--tm-text);
        --text-slaby: var(--tm-text-slaby);
        --linka:      var(--tm-linka);
        --akce:       var(--tm-akce);
        --akce-text:  var(--tm-akce-text);
        --chyba:      var(--tm-chyba);
        --chyba-pole: var(--tm-chyba-pole);
        --plus:       var(--tm-plus);
        --minus:      var(--tm-minus);
    }
}

/* Vlastni volba tmy prebiji systemove svetlo. MUSI zustat az za media
   dotazem vyse - specificita je stejna, takze rozhoduje poradi. */
:root[data-tema="tmave"] {
    --pozadi:     var(--tm-pozadi);
    --plocha:     var(--tm-plocha);
    --text:       var(--tm-text);
    --text-slaby: var(--tm-text-slaby);
    --linka:      var(--tm-linka);
    --akce:       var(--tm-akce);
    --akce-text:  var(--tm-akce-text);
    --chyba:      var(--tm-chyba);
    --chyba-pole: var(--tm-chyba-pole);
    --plus:       var(--tm-plus);
    --minus:      var(--tm-minus);
}

* { box-sizing: border-box; }

/* Vlastni display u tlacitek a odkazu prebiji atribut hidden z prohlizece,
   takze skryty prvek zustane videt. Tohle to vraci zpatky. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--pozadi);
    color: var(--text);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
}

.page {
    max-width: 26rem;
    margin: 0 auto;
    padding: 2rem 1rem calc(2rem + env(safe-area-inset-bottom));
}

/* ------------------------------------------- rozklikavaci vyber kategorie */

/* Plocha nabidka se stovkou polozek se prochazi spatne. Rozklikavani po
   vetvich kopiruje to, jak si strom clovek pamatuje - nejdriv Podnikani
   nebo Osobni, teprve pak konkretni ucel. Stejna znacka `<details>` jako
   na obrazovce Kategorie, takze se to ovlada porad stejne. */
.vyber {
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.vyber__strom {
    list-style: none;
    margin: .25rem 0 0;
    padding: 0;
    max-height: 18rem;
    overflow-y: auto;
    border: 1px solid var(--linka);
    border-radius: .5rem;
    background: var(--pozadi);
}

/* Vnorene uz maji ramecek i posuvnik od korene. */
.vyber__strom--deti {
    max-height: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    margin: 0 0 0 .375rem;
    padding-left: .375rem;
    border-left: 1px solid var(--linka);
}

.vyber__radek,
.vyber__list {
    display: flex;
    align-items: center;
    gap: .5rem;
    /* Palec na telefonu potrebuje aspon 44 px. */
    min-height: 2.75rem;
    padding: .25rem .625rem;
    cursor: pointer;
}

/* Vlastni sipka: nativni znacka se lisi prohlizec od prohlizece a u konce
   vetve, ktery zadne deti nema, by slibovala podvetev. */
.vyber__radek { list-style: none; }
.vyber__radek::-webkit-details-marker { display: none; }

.vyber__radek::before {
    content: "";
    flex: none;
    width: 0;
    height: 0;
    border-left: .3rem solid var(--text-slaby);
    border-top: .3rem solid transparent;
    border-bottom: .3rem solid transparent;
}

.vyber__vetev[open] > .vyber__radek::before { transform: rotate(90deg); }

/* Vetev, ve ktere neco vybraneho lezi, zustane poznat i po sbaleni. */
.vyber__vetev:has(:checked) > .vyber__radek { font-weight: 600; }

.vyber__list input { flex: none; }

.vyber__list:has(:checked) {
    background: color-mix(in srgb, var(--akce) 12%, transparent);
    border-radius: .375rem;
    font-weight: 600;
}


/* ------------------------------------------------------------- horni lista */
.bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: .75rem 1rem;
    padding-top: calc(.75rem + env(safe-area-inset-top));
    background: var(--plocha);
    border-bottom: 1px solid var(--linka);
}

.bar__name { font-weight: 600; }

/* Prepinac vzhledu. Tri tlacitka misto zaskrtavatka, protoze "podle
   systemu" je treti stav, ne vypnuty druhy. */
.tema {
    display: flex;
    gap: .25rem;
}

.tema__volba {
    /* Palec na telefonu potrebuje aspon 44 px. */
    min-height: 2.75rem;
    padding: 0 .625rem;
    background: none;
    color: var(--text-slaby);
    border: 1px solid var(--linka);
    border-radius: .5rem;
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
}

.tema__volba--aktivni {
    background: var(--akce);
    color: var(--akce-text);
    border-color: var(--akce);
}

.tema__volba:focus-visible {
    outline: 2px solid var(--akce);
    outline-offset: 2px;
}

.bar__out {
    background: none;
    border: 0;
    padding: .25rem;
    color: var(--text-slaby);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* ----------------------------------------------------------------- formular */
.login {
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-radius: .75rem;
    padding: 1.5rem;
}

.login__title {
    margin: 0 0 1.25rem;
    font-size: 1.5rem;
}

.field { display: block; margin-bottom: 1rem; }

.field__label {
    display: block;
    margin-bottom: .35rem;
    color: var(--text-slaby);
    font-size: .875rem;
}

.field__input {
    display: block;
    width: 100%;
    padding: .7rem .75rem;
    background: var(--pozadi);
    color: var(--text);
    border: 1px solid var(--linka);
    border-radius: .5rem;
    /* 16 px brani tomu, aby Safari pri kliknuti do pole stranku priblizil. */
    font: inherit;
}

/* Obrys jen pri ovladani klavesnici. Mys ho nedostane, takze se
   klikanim nic nezvyrazni, ale tabulator je porad videt. */
.field__input:focus-visible,
.bar__cesty a:focus-visible,
.prepinac__volba:focus-visible,
.bar__out:focus-visible,
.button:focus-visible {
    outline: 2px solid var(--akce);
    outline-offset: 2px;
}

.check {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
    color: var(--text-slaby);
}

.button {
    display: block;
    width: 100%;
    /* Palec na telefonu potrebuje aspon 44 px. */
    min-height: 2.75rem;
    background: var(--akce);
    color: var(--akce-text);
    border: 0;
    border-radius: .5rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.alert {
    margin: 0 0 1rem;
    padding: .7rem .75rem;
    background: var(--chyba-pole);
    color: var(--chyba);
    border-radius: .5rem;
    font-size: .9375rem;
}

.note { color: var(--text-slaby); }

/* -------------------------------------------------------------- Inbox */
.nadpis {
    margin: 0 0 1rem;
    font-size: 1.5rem;
}

.polozka {
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-radius: .75rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.polozka__hlava {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.polozka__kdo {
    font-weight: 600;
    /* Dlouhy nazev obchodnika nesmi rozhodit radek s castkou. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.polozka__castka {
    flex: none;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Barva nese jedinou informaci: prijem, nebo vydaj. Drzi se VYHRADNE
   u castky - obarvit i nazev obchodnika by z kazdeho radku udelalo
   varovani a rozdil by prestal byt videt. Znamenko u castky zustava,
   takze na barvu se nikdo nespoleha sam o sobe. */
.polozka__castka--plus  { color: var(--plus); }
.polozka__castka--minus { color: var(--minus); }

.polozka__kdy,
.polozka__popis {
    margin: .25rem 0 0;
    color: var(--text-slaby);
    font-size: .875rem;
}

.polozka__popis { overflow-wrap: anywhere; }

.polozka form { margin-top: 1rem; }

.polozka__navrh {
    margin: .75rem 0 0;
    padding: .7rem .75rem;
    background: var(--pozadi);
    border-radius: .5rem;
    font-size: .9375rem;
}

.polozka__akce {
    display: flex;
    gap: .5rem;
}

.button--vedlejsi {
    background: none;
    color: var(--text);
    border: 1px solid var(--linka);
}

.field__volitelne {
    font-weight: normal;
    opacity: .7;
}

.alert--ok {
    background: color-mix(in srgb, var(--akce) 12%, transparent);
    color: var(--akce);
}

/* ----------------------------------------------------------- hotovost */
.bar__cesty {
    display: flex;
    gap: 1rem;
    /* Vlastni radek pod jmenem: pet odkazu se vedle "Odhlasit" na
       telefon nevejde a poradi je pak stejne na uzke i siroke
       obrazovce. */
    order: 3;
    flex-basis: 100%;
    flex-wrap: wrap;
    row-gap: .25rem;
    margin-top: .5rem;
}

.bar__cesty a {
    color: var(--akce);
    text-decoration: none;
    white-space: nowrap;
}

.prepinac {
    display: flex;
    gap: .25rem;
    margin-bottom: 1rem;
    padding: .25rem;
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-radius: .5rem;
}

.prepinac__volba {
    flex: 1;
    /* Palec na telefonu potrebuje aspon 44 px. */
    min-height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .375rem;
    color: var(--text-slaby);
    text-decoration: none;
}

.prepinac__volba--aktivni {
    background: var(--akce);
    color: var(--akce-text);
    font-weight: 600;
}

.podnadpis {
    margin: 2rem 0 .75rem;
    font-size: 1.125rem;
}

.seznam {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-radius: .75rem;
}

.seznam__radek {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem .875rem;
    border-bottom: 1px solid var(--linka);
}

.seznam__radek:last-child { border-bottom: 0; }

.seznam__popis {
    min-width: 0;
    overflow-wrap: anywhere;
}

.seznam__kdy {
    margin-left: .375rem;
    color: var(--text-slaby);
    font-size: .875rem;
}

/* ---------------------------------------------------------- transakce */

/* Radek nese dva udaje pod sebou: co to bylo, a kdy/odkud/kam patri.
   Vedle sebe by se na telefonu zalomily na nahodnem miste. */
.transakce__kdo {
    display: block;
    font-weight: 600;
}

.transakce .seznam__kdy {
    display: block;
    margin-left: 0;
    margin-top: .125rem;
}

/* Radek: vlevo co to bylo a kdy, vpravo castka a uprava. Bez mrizky se
   ctyri prvky na telefonu zalomi do pul sta bodu vysky. */
.transakce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .25rem .75rem;
}

.transakce .seznam__popis {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.transakce .polozka__castka {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}

.transakce .button {
    grid-column: 2;
    grid-row: 2;
    width: auto;
    min-width: 0;
    /* Palec na telefonu potrebuje aspon 44 px. */
    min-height: 2.75rem;
    padding: 0 .75rem;
    font-size: .9375rem;
    justify-self: end;
}

/* Vlastni rozsah dat. Sbaleny, aby preddefinovana obdobi zustala vidno. */
.rozsah { flex-basis: 100%; }

.rozsah__radek {
    display: flex;
    align-items: center;
    /* Palec na telefonu potrebuje aspon 44 px. */
    min-height: 2.75rem;
    color: var(--akce);
    cursor: pointer;
    list-style: none;
}

.rozsah__radek::-webkit-details-marker { display: none; }

.rozsah .obdobi {
    border-top: 0;
    padding-top: 0;
}

/* Zustatek na karte uctu. Cislo velke, puvod maly - je to dopocet
   z nasich dat, ne udaj od banky, a to musi byt videt. */
.polozka__zustatek {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    margin: .5rem 0 0;
}

.polozka__zustatek .polozka__castka { font-size: 1.25rem; }

.polozka__zustatek .seznam__kdy { margin-left: 0; }

/* Castka a datum k ni. Pod sebou na telefonu, vedle sebe od 48em -
   dve uzka pole vedle sebe by na 360 px nedala precist ani jedno. */
.dvojpole > .field { margin-bottom: 1rem; }

/* Lista uctu. Uctu je pres deset, takze se musi zalomit - `.prepinac`
   sam je jeden radek s rovnym dilem na polozku. */
.prepinac--ucty {
    flex-wrap: wrap;
    gap: .25rem;
}

.prepinac--ucty .prepinac__volba {
    flex: none;
    padding: 0 .75rem;
}

.strany {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.strany .button {
    width: auto;
    min-width: 0;
    padding: 0 1rem;
}


/* ----------------------------------------------------------- pravidla */
.pravidlo {
    padding: .875rem;
    border-bottom: 1px solid var(--linka);
}

.pravidlo:last-child { border-bottom: 0; }

/* Vypnute pravidlo zustava videt, jen ustoupi - smazat ho je jina vec. */
.pravidlo--vypnute { opacity: .55; }

.pravidlo__poradi {
    flex: none;
    color: var(--text-slaby);
    font-variant-numeric: tabular-nums;
}

/* Odkaz stylovany jako tlacitko musi mit stejnou vysku jako tlacitka. */
a.button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.polozka__akce .button {
    /* Tri akce vedle sebe se na uzkem telefonu musi vejit. */
    padding: 0 .5rem;
    font-size: .9375rem;
}

.pusteni { margin: 1rem 0 0; }

.seznam__radek--navrh { align-items: center; }

.seznam__radek--navrh .button {
    width: auto;
    min-height: 2.25rem;
    padding: 0 .875rem;
    font-size: .9375rem;
}

/* ------------------------------------------------- prehled a reporty */
.dlazdice {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-radius: .75rem;
    color: inherit;
    text-decoration: none;
}

.dlazdice--vyzva { border-color: var(--akce); }

.dlazdice__cislo {
    flex: none;
    min-width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--akce);
    color: var(--akce-text);
    border-radius: .5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.seznam__radek--soucet {
    font-weight: 600;
    border-top: 1px solid var(--linka);
}

/* Pruh delky podle castky. Lezi pod textem, aby ho neprekryl. */
.seznam__radek--pruh { position: relative; }

.pruh {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: color-mix(in srgb, var(--akce) 12%, transparent);
    border-radius: .25rem;
    pointer-events: none;
}


/* Šířka po pěti procentech. Dvacet tříd místo jednoho `style` atributu,
   který by CSP zahodila — rozdíl pod 5 % stejně není v grafu vidět. */
.pruh--w005 { width: 5%; }
.pruh--w010 { width: 10%; }
.pruh--w015 { width: 15%; }
.pruh--w020 { width: 20%; }
.pruh--w025 { width: 25%; }
.pruh--w030 { width: 30%; }
.pruh--w035 { width: 35%; }
.pruh--w040 { width: 40%; }
.pruh--w045 { width: 45%; }
.pruh--w050 { width: 50%; }
.pruh--w055 { width: 55%; }
.pruh--w060 { width: 60%; }
.pruh--w065 { width: 65%; }
.pruh--w070 { width: 70%; }
.pruh--w075 { width: 75%; }
.pruh--w080 { width: 80%; }
.pruh--w085 { width: 85%; }
.pruh--w090 { width: 90%; }
.pruh--w095 { width: 95%; }
.pruh--w100 { width: 100%; }

.seznam__radek--pruh > .seznam__popis,
.seznam__radek--pruh > .polozka__castka { position: relative; }

.odkazy {
    display: flex;
    gap: .5rem;
    margin-top: 1.5rem;
}

.obdobi {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.obdobi .field__input { flex: 1 1 8rem; width: auto; }
.obdobi .button { width: auto; padding: 0 1rem; }

/* Vysvetlivka pod poli, ne vedle nich - jinak by ji flex postavil
   jako ctvrty sloupec a pole by se smrskla na par znaku. */
.obdobi .note {
    flex-basis: 100%;
    margin: 0;
    font-size: .875rem;
}

/* Sirokou tabulku posouvej uvnitr, ne celou strankou. */
.tabulka-obal {
    overflow-x: auto;
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-radius: .75rem;
}

.tabulka {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}

.tabulka th,
.tabulka td {
    padding: .6rem .75rem;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid var(--linka);
}

.tabulka thead th {
    color: var(--text-slaby);
    font-weight: normal;
}

.tabulka th[scope="row"] {
    text-align: left;
    font-weight: normal;
}

.tabulka td { font-variant-numeric: tabular-nums; }

.tabulka tbody tr:last-child th,
.tabulka tbody tr:last-child td { border-bottom: 0; }

.tabulka__soucet th,
.tabulka__soucet td {
    font-weight: 600;
    border-top: 1px solid var(--linka);
}


/* --------------------------------------------------------- kategorie */

/* Strom se vykresluje sbaleny - kategorii je pres sto v peti urovnich
   a rozbalene daly stranku pres dvacet obrazovek. Sbaluje `<details>`,
   protoze CSP zakazuje skripty a `open` musi umet vykreslit server. */
.strom {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Odsazeni dela zanoreni, ne trida podle hloubky. Na telefonu je krok
   maly zamerne: pet urovni po 1 rem by ze 360 px sebralo pet. */
.strom--deti {
    margin-left: .375rem;
    padding-left: .375rem;
    border-left: 1px solid var(--linka);
}

.kategorie { border-bottom: 1px solid var(--linka); }

.kategorie:last-child { border-bottom: 0; }

.kategorie__radek {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem .75rem;
    /* Palec na telefonu potrebuje aspon 44 px. */
    min-height: 2.75rem;
    padding: .5rem .5rem .5rem 1.5rem;
    cursor: pointer;
}

/* Vlastni znacka misto nativni: ta se lisi prohlizec od prohlizece
   a u listu, ktery zadne deti nema, by slibovala podvetev. */
.kategorie__radek { list-style: none; }
.kategorie__radek::-webkit-details-marker { display: none; }

.kategorie--vetev > .kategorie__radek::before {
    content: "";
    position: absolute;
    margin-left: -1rem;
    width: 0;
    height: 0;
    border-left: .3rem solid var(--text-slaby);
    border-top: .3rem solid transparent;
    border-bottom: .3rem solid transparent;
    transform: translateY(.45rem);
}

.kategorie--vetev[open] > .kategorie__radek::before { transform: translateY(.55rem) rotate(90deg); }

.kategorie__jmeno { font-weight: 600; }

.kategorie__popis {
    color: var(--text-slaby);
    font-size: .875rem;
}

.kategorie__telo { padding: 0 0 .5rem; }

/* Odsazeni popisu a tlacitek pod text nadpisu. Tohle se nescita -
   jsou to sourozenci vnoreneho seznamu, ne jeho obal. */
.kategorie__oblast,
.kategorie__telo > .polozka__akce { padding-left: 1.5rem; }

.kategorie__oblast {
    margin: 0 0 .5rem;
    color: var(--text-slaby);
    font-size: .875rem;
}

/* Nalez pri hledani. Podbarveni, ne ramecek - radky jsou vedle sebe
   a ramecek by mezi nimi delal falesne mezery. */
.kategorie--nalez > .kategorie__radek {
    background: color-mix(in srgb, var(--akce) 12%, transparent);
    border-radius: .5rem;
}

/* Kdyz strom rozbalil server (hledani nebo navrat po ulozeni), maji
   tlacitka jen radky, kvuli kterym se rozbalil. Predci jsou tam jako
   cesta, ne jako nabidka akci. */
.strom--vyber .kategorie:not(.kategorie--nalez):not(.kategorie--cil) > .kategorie__telo > .polozka__akce {
    display: none;
}

/* Napoveda podle obchodnika: text a tlacitko pod nim. Tlacitko musi
   byt vlastni formular - hlavni formular uz ma pole `kategorie`
   a druhe stejneho jmena by hodnotu zdvojilo. */
.polozka__tip .button {
    width: auto;
    min-width: 0;
    min-height: 2.25rem;
    padding: 0 .875rem;
    font-size: .9375rem;
    white-space: nowrap;
}

.hledani {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
}

.hledani .field__input {
    flex: 1;
    min-width: 0;
}

.hledani .button {
    flex: none;
    width: auto;
    min-width: 0;
    padding: 0 1rem;
}

/* Konec vetve - jen tyhle jde vybrat u transakce. */
.znacka {
    margin-left: .375rem;
    padding: .05rem .35rem;
    background: color-mix(in srgb, var(--akce) 15%, transparent);
    color: var(--akce);
    border-radius: .25rem;
    font-size: .75rem;
    font-weight: normal;
    vertical-align: .05rem;
}


/* ==================================================== velka obrazovka
   Vsechno nad timhle komentarem plati na telefonu a plati dal. Tady se
   jen pridava to, co ma smysl az kdyz je misto - zadne pravidlo se
   neprepisuje "zpatky", aby slo mobilni podobu cist bez ohledu na
   desktopovou. */

/* ---------------------------------------------- 48em: je misto na dech */
@media (min-width: 48em) {
    .page {
        max-width: 56rem;
        padding: 2.5rem 2rem;
    }

    /* Tlacitko pres celou sirku dava smysl pod palcem. Pod mysi je z nej
       jen velka plocha, ktera odtahuje popisek od okraje formulare. */
    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-width: 9rem;
        padding: 0 1.5rem;
    }

    /* Ve vypisech je tlacitko akce u radku, ne hlavni akce stranky -
       tam by minimalni sirka rozhazela radek. */
    .polozka__akce .button,
    .polozka form .button {
        min-width: 0;
    }
}


/* Odezva na mys. Jen tam, kde je ukazatel - na dotyku prohlizec drzi
   :hover az do dalsiho klepnuti a tlacitko by zustalo zvyraznene. */
@media (min-width: 48em) and (hover: hover) {
    .button,
    .tema__volba,
    .prepinac__volba,
    .bar__cesty a { transition: background-color .12s ease, border-color .12s ease; }

    .button:hover { background: color-mix(in srgb, var(--akce) 85%, black); }

    .button--vedlejsi:hover {
        background: color-mix(in srgb, var(--akce) 8%, transparent);
        border-color: var(--akce);
    }

    .tema__volba:not(.tema__volba--aktivni):hover { border-color: var(--akce); }

    .prepinac__volba:not(.prepinac__volba--aktivni):hover { color: var(--text); }
}

/* --------------------------------- 64em: z horni listy je bocni panel */
@media (min-width: 64em) {
    .obal {
        display: grid;
        /* Pevny sloupec vlevo: menu, ktere pri prechodu mezi strankami
           poskakuje do stran, se hure trefuje. */
        grid-template-columns: 15rem minmax(0, 1fr);
        min-height: 100vh;
    }

    /* Na prihlasovaci strance zadne menu neni, takze ani sloupec. */
    .obal--host { display: block; }

    .bar {
        position: sticky;
        top: 0;
        align-self: start;
        height: 100vh;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 1.5rem;
        padding: 1.5rem 1rem;
        border-bottom: 0;
        border-right: 1px solid var(--linka);
    }

    .obal--host .bar {
        position: static;
        height: auto;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-right: 0;
        border-bottom: 1px solid var(--linka);
    }

    .bar__name {
        order: 1;
        font-size: 1.125rem;
    }

    .bar__cesty {
        order: 2;
        flex-direction: column;
        flex-basis: auto;
        flex-wrap: nowrap;
        gap: .125rem;
        margin-top: 0;
    }

    .bar__cesty a {
        padding: .5rem .75rem;
        border-radius: .5rem;
        color: var(--text);
    }

    .bar__cesty a:hover { background: var(--pozadi); }

    /* Kde jsem. Na telefonu to rika nadpis stranky, ktery je hned pod
       listou; v panelu je nadpis daleko a bez zvyrazneni se menu cte
       jako osm stejnych odkazu. */
    .bar__cesty a[aria-current="page"] {
        background: var(--akce);
        color: var(--akce-text);
        font-weight: 600;
    }

    /* Vzhled a odhlaseni dolu - jsou to nastaveni, ne navigace. */
    .tema {
        order: 3;
        margin-top: auto;
        flex-wrap: wrap;
    }

    .obal--host .tema { margin-top: 0; }

    .tema__volba {
        flex: 1;
        min-height: 2.25rem;
        padding: 0 .5rem;
    }

    /* Poradi ridi polozka mrizky, cimz je obalovy formular - ne
       tlacitko uvnitr nej. */
    .bar__odhlasit { order: 4; }

    .obal--host .bar__odhlasit { order: 0; }

    .bar__out { text-align: left; }

    .page {
        /* Bez sirky by automaticke okraje z mobilniho pravidla polozku
           mrizky smrstily na obsah - uzka stranka by pak nesla do stredu
           misto aby vyplnila sloupec. */
        width: 100%;
        padding: 3rem 3rem calc(3rem + env(safe-area-inset-bottom));
    }
}

/* -------------------------------------- 64em: rozvrzeni jednotlivych stranek */
@media (min-width: 64em) {

    /* Inbox. Na telefonu je polozka karta pres celou sirku a na obrazovku
       se vejdou dve; tady je z ni radek, kde je popis vlevo a zarazeni
       vpravo, takze jich je videt sest. */
    .page--inbox .polozka {
        display: grid;
        grid-template-columns: minmax(11rem, .85fr) minmax(0, 2.15fr);
        align-items: center;
        gap: 1rem 1.5rem;
        padding: .875rem 1rem;
        margin-bottom: .5rem;
    }

    /* Umisteni je vyslovne, ne automaticke: napoveda pres celou sirku
       by jinak odsunula formular do uzkeho prvniho sloupce. V HTML
       stoji pred formularem, aby ji bylo na telefonu videt driv. */
    .page--inbox .polozka__info {
        grid-row: 1;
        grid-column: 1;
    }

    .page--inbox .polozka > form {
        grid-row: 1;
        grid-column: 2;
    }

    .page--inbox .polozka__tip {
        grid-row: 2;
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin: 0;
    }

    /* Tlacitko napovedy je jedno, sloupce hlavniho formulare se ho
       netykaji. */
    .page--inbox .polozka__tip form {
        display: block;
        margin: 0;
    }

    .page--inbox .polozka > form {
        display: grid;
        /* Spodni hranice u kazdeho pole: "podle kategorie" se musi vejit,
           jinak z nej zbyde "pod" a nabidka prestane byt citelna. */
        grid-template-columns: minmax(7.5rem, 2fr) minmax(9.5rem, 1.2fr) minmax(7rem, 1.6fr) auto;
        align-items: end;
        gap: .75rem;
        margin-top: 0;
    }

    .page--inbox .polozka form .field { margin-bottom: 0; }

    /* S rozklikavacim vyberem je rozvrzeni jine: strom potrebuje sirku
       a roste do vysky, takze dostane vlastni sloupec a zbytek se
       nasklada vedle nej. Ctyri pole v rade davala smysl u nabidky,
       ktera je jeden radek vysoka. */
    .page--inbox .polozka--strom > form {
        grid-template-columns: minmax(14rem, 1.5fr) minmax(11rem, 1fr);
        align-items: start;
    }

    .page--inbox .polozka--strom .vyber {
        grid-column: 1;
        grid-row: 1 / span 3;
    }

    .page--inbox .polozka--strom > form > .field:not(.vyber),
    .page--inbox .polozka--strom > form > .button { grid-column: 2; }

    /* Tlacitko na konci sloupce, ne roztazene pres celou vysku. */
    .page--inbox .polozka--strom > form > .button { justify-self: start; }


    /* Zalomeny popisek by radek zvysil o cely radek textu. */
    .page--inbox .polozka form .field__label { white-space: nowrap; }


    .dvojpole {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 1rem;
        align-items: start;
    }

    /* Pod mysi staci mensi cil, radek se tim zkrati. */
    .transakce .button { min-height: 2.25rem; }

    /* Sekce vedle sebe misto pod sebou. `auto-fit` znamena, ze sloupcu
       ubyde samo, kdyz je stranek uzsi - zadny dalsi breakpoint. */
    .mrizka {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
        gap: 0 2rem;
        align-items: start;
    }

    .blok > .podnadpis:first-child { margin-top: 1.5rem; }

    /* Filtry reportu na jeden radek - tri volby obdobi, tri oblasti
       a rozsah dat. Pod sebou by zabraly ctvrtinu obrazovky. */
    .filtr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .filtr .prepinac,
    .filtr .obdobi { margin-bottom: 0; }

    .filtr .obdobi { border-top: 0; }

    /* Prehled: mesic a dnesek vedle sebe. */
    .page--prehled .mrizka { gap: 0 2.5rem; }

    /* Seznam a formular vedle sebe. Na telefonu jsou to dva divy pod
       sebou bez vlastniho vzhledu - proto se nic nemusi vracet zpatky. */
    .dvojice {
        display: grid;
        grid-template-columns: minmax(0, 1.6fr) minmax(19rem, 1fr);
        gap: 2rem;
        align-items: start;
    }

    /* Kdyz vpravo neni co ukazat, nema smysl na nej drzet sloupec.
       Bok se pak vysype pod obsah jako bezny odstavec. */
    .dvojice--samotna { display: block; }

    /* Kde je hlavni vec formular a seznam je jen ohlednuti zpet. */
    .dvojice--obracene {
        grid-template-columns: minmax(19rem, 1fr) minmax(0, 1.4fr);
    }

    /* Formular zustane na ocich i pri dlouhem seznamu vlevo. */
    .dvojice__bok {
        position: sticky;
        top: 2rem;
    }

    .dvojice--obracene .dvojice__hlavni {
        position: sticky;
        top: 2rem;
    }

    .dvojice--obracene .dvojice__bok { position: static; }

    /* Prvni nadpis ve sloupci uz neni odsazeny od predchozi sekce. */
    .dvojice__bok > .podnadpis:first-child,
    .dvojice__hlavni > .podnadpis:first-child { margin-top: 0; }

    /* Navrzeny prevod ma misto poli dve tlacitka - ta se do sloupcu
       nemaji jak rozdelit a staci jim vlastni sirka. */
    .page--inbox .polozka__akce {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}