@charset "utf-8";

/*
 * Rozhraní zadavatele. Vědomě střídmé — §0 zadání říká, že se do vzhledu
 * neinvestuje, jen do čitelnosti. Proto obyčejný CSS soubor a žádný build:
 * projekt tak nepotřebuje node ani vite k nasazení.
 *
 * Jediné dvě věci, na kterých tu záleží: text jde přečíst a tabulka se
 * na mobilu nerozpadne. Pod 640 px se řádky překlopí do kartiček, popisky
 * sloupců nese atribut data-popisek. Nikde není pevná šířka v pixelech,
 * takže stránka nemá jak scrollovat do stran.
 */

:root {
    --pozadi: #f4f6f8;
    --plocha: #ffffff;
    --text: #1b2430;
    --text-tlumeny: #5d6b7a;
    --linka: #dde3e9;
    --akcent: #2c5c8a;
    --akcent-tmavy: #21486d;
    --varovani: #8a2f2f;
    --varovani-pozadi: #fdf2f2;
    --zaobleni: 8px;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--pozadi);
    color: var(--text);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.55;
}

a {
    color: var(--akcent);
}

h1,
h2 {
    line-height: 1.25;
}

h1 {
    font-size: 1.5rem;
    margin: 0 0 0.25rem;
}

h2 {
    font-size: 1.15rem;
    margin: 0;
}

/* --- kostra stránky --- */

.hlavicka {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--plocha);
    border-bottom: 1px solid var(--linka);
}

.hlavicka__nazev {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}

.hlavicka__uzivatel {
    color: var(--text-tlumeny);
    font-size: 0.9rem;
    margin-right: 0.5rem;
}

.obsah {
    max-width: 68rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

.podtitulek {
    color: var(--text-tlumeny);
    margin: 0 0 1.25rem;
}

.hlaska {
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-left: 3px solid var(--akcent);
    border-radius: var(--zaobleni);
    padding: 0.75rem 1rem;
    margin: 0 0 1.25rem;
}

.chyby {
    background: var(--varovani-pozadi);
    border: 1px solid var(--varovani);
    border-radius: var(--zaobleni);
    color: var(--varovani);
    padding: 0.75rem 1rem;
    margin: 0 0 1rem;
}

.chyby ul {
    margin: 0;
    padding-left: 1.25rem;
}

/* --- filtry --- */

.filtry {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
}

.filtry__polozka {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--linka);
    border-radius: 999px;
    background: var(--plocha);
    color: var(--text-tlumeny);
    text-decoration: none;
    font-size: 0.9rem;
}

.filtry__polozka--aktivni {
    background: var(--akcent);
    border-color: var(--akcent);
    color: #fff;
}

/* --- skupina jednoho projektu --- */

.projekt {
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-radius: var(--zaobleni);
    padding: 1rem;
    margin: 0 0 1.5rem;
}

.projekt__hlavicka {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.projekt__pocet {
    color: var(--text-tlumeny);
    font-size: 0.9rem;
}

.projekt__repo {
    color: var(--text-tlumeny);
    font-size: 0.85rem;
}

/* --- tabulka --- */

.tabulka {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.tabulka th,
.tabulka td {
    text-align: left;
    vertical-align: top;
    padding: 0.6rem 0.75rem 0.6rem 0;
    border-bottom: 1px solid var(--linka);
    /* Adresy a dlouhá slova z podnětu nesmí roztáhnout stránku do stran. */
    overflow-wrap: anywhere;
}

.tabulka th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tlumeny);
    font-weight: 600;
}

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

/* Zaškrtávátko dávky. V rem, ne v procentech: sloupec je v některých
 * skupinách a v jiných ne, a procenta by se pak nesečetla do stovky. */
.sloupec-vyber {
    width: 2.5rem;
}

.sloupec-typ {
    width: 12%;
}

.sloupec-popis {
    width: 40%;
}

.sloupec-url {
    width: 22%;
}

.sloupec-kdy {
    width: 14%;
}

.sloupec-stav {
    width: 12%;
}

.bunka--tlumena {
    color: var(--text-tlumeny);
    font-size: 0.9rem;
}

/* --- drobnosti --- */

.znacka {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--linka);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--text-tlumeny);
    white-space: nowrap;
}

.znacka--chyba {
    border-color: #e3b9b9;
    background: var(--varovani-pozadi);
    color: var(--varovani);
}

/* Popisek, který patří čtečce, ne oku — třeba název sloupce se
 * zaškrtávátky, kde by nadpis jen ukrajoval místo. */
.jen-pro-ctecku {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.prazdno {
    color: var(--text-tlumeny);
    background: var(--plocha);
    border: 1px dashed var(--linka);
    border-radius: var(--zaobleni);
    padding: 1.5rem;
    text-align: center;
}

.strop {
    color: var(--text-tlumeny);
    font-size: 0.9rem;
    margin: 0.75rem 0 0;
}

/* --- detail --- */

.zpet {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.panel {
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-radius: var(--zaobleni);
    padding: 1rem 1.25rem;
    margin: 0 0 1.5rem;
}

.panel__titulek {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tlumeny);
    margin: 0 0 0.75rem;
}

/* Původní text uživatele. Zobrazuje se, jak přišel — včetně odřádkování. */
.puvodni-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 1.05rem;
    margin: 0;
}

/* Původní text a přepis od AI vedle sebe. Sloupce se samy poskládají pod
 * sebe, jakmile se dva vedle sebe nevejdou — proto auto-fit a minmax, ne
 * media query a ne pevná šířka. */
.vedle-sebe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 0 1rem;
    align-items: start;
}

.udaje {
    display: grid;
    grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
    gap: 0.4rem 1rem;
    margin: 0;
}

/* V užším sloupci by popisek ukrojil půlku místa; tady patří nad hodnotu. */
.udaje--prepis {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 1rem;
}

.udaje--prepis dd {
    margin-bottom: 0.6rem;
}

.udaje dt {
    color: var(--text-tlumeny);
    font-size: 0.9rem;
}

.udaje dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* --- dávka (výběr podnětů a hotové zadání) --- */

.davka {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--linka);
}

.davka__druh {
    border: 0;
    margin: 0;
    padding: 0;
    /* Bez tohohle si fieldset drží vlastní minimální šířku podle obsahu
     * a dlouhý popisek by ve flexu roztáhl řádek do stran. */
    min-width: 0;
}

.davka__moznost {
    align-items: flex-start;
    margin-bottom: 0.35rem;
}

.davka__moznost .bunka--tlumena {
    display: block;
}

.davka__doporuceni {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
}

.davka__akce {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.davka__vse {
    font-size: 0.9rem;
    color: var(--text-tlumeny);
}

.davka__hlavicka {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Hotový dokument. Zobrazuje se jako text, ne vykreslený Markdown: zadavatel
 * si ho odnáší do repozitáře, takže má vidět přesně to, co zkopíruje. */
.md {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    background: var(--pozadi);
    border: 1px solid var(--linka);
    border-radius: var(--zaobleni);
    padding: 1rem;
    margin: 0 0 1rem;
}

/* --- formuláře --- */

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

.pole__popisek {
    display: block;
    font-size: 0.9rem;
    color: var(--text-tlumeny);
    margin-bottom: 0.25rem;
}

.pole input,
.pole textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--linka);
    border-radius: var(--zaobleni);
    /* 16 px schválně: menší písmo přiblíží iOS Safari celou stránku. */
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: var(--text);
}

.pole textarea {
    min-height: 6rem;
    resize: vertical;
}

.pole--volba {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pole--volba input {
    width: auto;
}

.tlacitko {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--akcent);
    border-radius: var(--zaobleni);
    background: var(--akcent);
    color: #fff;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
}

.tlacitko:hover {
    background: var(--akcent-tmavy);
}

.tlacitko--tise {
    background: transparent;
    border-color: var(--linka);
    color: var(--text-tlumeny);
}

.tlacitko--tise:hover {
    background: var(--pozadi);
}

.tlacitko--varovny {
    background: var(--varovani);
    border-color: var(--varovani);
}

.tlacitko--varovny:hover {
    background: #712626;
}

/* --- přihlášení --- */

.prihlaseni {
    max-width: 26rem;
    margin: 4rem auto;
    padding: 0 1rem;
}

.prihlaseni__karta {
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-radius: var(--zaobleni);
    padding: 1.5rem;
}

/* --- mobil ---
 * Tabulka se překlopí do kartiček: hlavička zmizí (popisek nese každá buňka
 * v data-popisek) a řádek se vypíše pod sebe. Sloupec s hodnotou je
 * minmax(0, 1fr), aby dlouhá adresa buňku roztáhla na výšku, ne do šířky.
 */

@media (max-width: 640px) {
    .tabulka,
    .tabulka tbody,
    .tabulka tr,
    .tabulka td {
        display: block;
        width: auto;
    }

    .tabulka thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .tabulka tr {
        border: 1px solid var(--linka);
        border-radius: var(--zaobleni);
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.75rem;
    }

    .tabulka tbody tr:last-child {
        margin-bottom: 0;
    }

    .tabulka td {
        display: grid;
        grid-template-columns: 5.5rem minmax(0, 1fr);
        gap: 0.75rem;
        border-bottom: 0;
        padding: 0.25rem 0;
    }

    .tabulka td::before {
        content: attr(data-popisek);
        color: var(--text-tlumeny);
        font-size: 0.85rem;
    }

    .udaje {
        grid-template-columns: minmax(0, 1fr);
        gap: 0 0;
    }

    .udaje dd {
        margin-bottom: 0.6rem;
    }

    .projekt,
    .panel {
        padding: 0.75rem;
    }
}