/* Design tokeny podle zadání (docs/01, kap. 2 – vizuální jazyk) a ui/README.md.
   Písma IBM Plex Sans / Source Serif 4 / IBM Plex Mono se doplní
   při implementaci obrazovek (self-hosted ve wwwroot/pisma); do té doby
   platí systémové náhradní fonty z tokenů --pismo-*.
   Kontrast textu vůči podkladu je u všech dvojic tokenů min. 4,5 : 1. */
:root {
    color-scheme: light;

    /* postranní panel */
    --barva-panel: #1c2a3a;        /* tmavě modrý postranní panel */
    --barva-panel-aktivni: #2d4460; /* aktivní položka menu */
    --barva-panel-okraj: #2f4258;
    --barva-panel-prvek: #3d5570;   /* okraj tlačítka, avatar */
    --barva-panel-text: #e8ecf1;
    --barva-panel-polozka: #c9d2dc; /* neaktivní položka menu (9,4 : 1) */
    --barva-panel-tlumeny: #aab6c4; /* doplňkový text (7,1 : 1) */
    --barva-panel-focus: #9ec5f8;   /* obrys zaměření na tmavém panelu */

    /* plochy */
    --barva-pozadi: #f4f2ed;       /* teplé papírové pozadí */
    --barva-lista: #faf9f6;        /* horní lišta */
    --barva-karta: #ffffff;
    --barva-okraj: #dedad2;
    --barva-okraj-pole: #cfc9bd;

    /* akce a stavy */
    --barva-primarni: #1f4e8c;     /* primární akce */
    --barva-primarni-hover: #163a6a;
    --barva-primarni-svetla: #e8eef6;
    --barva-primarni-text: #1f3f6b; /* text na světle modré / bílé */
    --barva-vystraha: #c2410c;     /* lhůta ≤ 3 dny (bílý text 5,2 : 1) */
    --barva-vystraha-svetla: #fbe6d1; /* lhůta ≤ 7 dní */
    --barva-vystraha-text: #8a3d05; /* text na světle oranžové (6,3 : 1) */
    --barva-uspech-svetla: #e3f0e6;
    --barva-uspech-text: #235a33;
    --barva-podpis-svetla: #efe7f6; /* fialová – podpis, důvěrné */
    --barva-podpis-text: #4d2f73;
    --barva-neutralni-svetla: #ecebe7;
    --barva-neutralni-text: #3b4452;

    /* text */
    --barva-text: #1f2933;
    --barva-text-tlumeny: #5a6472;
    --barva-chyba: #b91c1c;

    /* tvary a rozměry */
    --polomer-karta: 10px;
    --polomer-tlacitko: 8px;
    --polomer-stitek: 13px;
    --sirka-panelu: 240px;
    --sirka-panelu-sbaleneho: 72px;

    --pismo-ui: "IBM Plex Sans", system-ui, sans-serif;
    --pismo-dokument: "Source Serif 4", Georgia, serif;
    --pismo-mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: var(--pismo-ui);
    background: var(--barva-pozadi);
    color: var(--barva-text);
}

button, input, select, textarea { font: inherit; }

h1:focus { outline: none; }

a { color: var(--barva-primarni); }
a:hover { color: var(--barva-primarni-hover); }

code { font-family: var(--pismo-mono); font-size: 0.9em; }

/* Viditelné zaměření z klávesnice (docs/01 kap. 2 bod 10). :where() drží
   nulovou specificitu, aby šla pravidla přepsat (tmavý panel, přihlášení). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--barva-primarni);
    outline-offset: 2px;
}

/* Text jen pro čtečky obrazovky */
.vizualne-skryte {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ================= aplikační shell (MainLayout) ================= */

.preskocit-na-obsah {
    position: absolute;
    left: 8px;
    top: -100px;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    background: var(--barva-karta);
    color: var(--barva-primarni);
    border-radius: var(--polomer-tlacitko);
    font-weight: 600;
}
.preskocit-na-obsah:focus { top: 8px; }

.aplikace {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

/* --- postranní panel --- */
.panel {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    width: var(--sirka-panelu);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 14px;
    background: var(--barva-panel);
    color: var(--barva-panel-text);
}
.panel :focus-visible {
    outline: 2px solid var(--barva-panel-focus);
    outline-offset: 2px;
}

.panel-znacka {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 10px 22px;
}
.panel-znacka-nazev {
    font-family: var(--pismo-dokument);
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
}
.panel-znacka-popis {
    font-size: 0.8125rem;
    color: var(--barva-panel-tlumeny);
}

.panel-menu {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Administrace je v prototypu oddělená dole nad Listinným podáním */
.panel-menu-dole { margin-top: auto; padding-top: 16px; }

.panel-polozka {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--polomer-tlacitko);
    color: var(--barva-panel-polozka);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
}
.panel-polozka:hover {
    background: rgb(255 255 255 / 0.06);
    color: #fff;
}
.panel-polozka.active {
    background: var(--barva-panel-aktivni);
    color: #fff;
    font-weight: 600;
}
.panel-polozka .ikona { flex-shrink: 0; }

.panel-listinne {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 8px;
    border: 1px solid var(--barva-panel-prvek);
    border-radius: var(--polomer-tlacitko);
    color: var(--barva-panel-text);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}
.panel-listinne:hover { background: rgb(255 255 255 / 0.06); color: #fff; }
.panel-listinne.active { background: var(--barva-panel-aktivni); color: #fff; }

.panel-uzivatel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 8px 4px;
    margin-top: 10px;
    border-top: 1px solid var(--barva-panel-okraj);
}
.panel-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--barva-panel-prvek);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.panel-uzivatel-texty {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.panel-uzivatel-jmeno {
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    overflow-wrap: anywhere;
}
.panel-uzivatel-role {
    font-size: 0.75rem;
    color: var(--barva-panel-tlumeny);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.panel-odhlasit { font-size: 0.875rem; }

/* --- hlavní sloupec a horní lišta --- */
.aplikace-hlavni {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.horni-lista {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 68px;
    padding: 12px 32px;
    background: var(--barva-lista);
    border-bottom: 1px solid var(--barva-okraj);
}
.horni-lista-nadpis {
    margin: 0 auto 0 0;
    min-width: 0;
    font-family: var(--pismo-dokument);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--barva-text);
}

.hledani { flex: 0 1 420px; min-width: 0; }
.hledani-pole {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    background: var(--barva-karta);
    border: 1px solid var(--barva-okraj-pole);
    border-radius: var(--polomer-tlacitko);
    color: var(--barva-text-tlumeny);
    cursor: text;
}
.hledani-pole:focus-within {
    outline: 2px solid var(--barva-primarni);
    outline-offset: 2px;
}
.hledani-pole input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 42px;
    border: 0;
    background: transparent;
    color: var(--barva-text);
    font-size: 0.875rem;
}
/* obrys kreslí rámeček pole (:focus-within) */
.hledani-pole input:focus-visible { outline: none; }
.hledani-pole input::placeholder { color: var(--barva-text-tlumeny); opacity: 1; }

.tlacitko-ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--barva-okraj);
    border-radius: var(--polomer-tlacitko);
    background: var(--barva-karta);
    color: var(--barva-text);
    cursor: pointer;
}
.tlacitko-ikona:hover { background: var(--barva-primarni-svetla); }

.obsah {
    flex-grow: 1;
    padding: 28px 32px 96px;
}
.obsah:focus { outline: none; }

/* --- responzivita: úzký displej sbalí panel na ikony --- */
@media (max-width: 900px) {
    .panel {
        width: var(--sirka-panelu-sbaleneho);
        padding: 16px 10px;
    }
    .panel-znacka { display: none; }
    .panel-polozka,
    .panel-listinne {
        justify-content: center;
        padding: 0;
    }
    /* popisky zůstávají pro čtečky obrazovky (přístupné jméno odkazu) */
    .panel-popisek,
    .panel-uzivatel-texty {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .panel-uzivatel {
        justify-content: center;
        padding: 12px 0 4px;
    }
    .horni-lista {
        gap: 10px;
        padding: 10px 16px;
    }
    .obsah { padding: 20px 16px 64px; }
}

@media (max-width: 560px) {
    .horni-lista { flex-wrap: wrap; }
    .horni-lista-nadpis {
        flex: 1 1 calc(100% - 60px);
        font-size: 1.25rem;
    }
    .hledani {
        order: 3;
        flex-basis: 100%;
    }
}

/* ================= obsah stránek ================= */

.karta {
    background: var(--barva-karta);
    border: 1px solid var(--barva-okraj);
    border-radius: var(--polomer-karta);
    padding: 20px;
}
.karta > :first-child { margin-top: 0; }
.karta > :last-child { margin-bottom: 0; }
.karta + .karta { margin-top: 24px; }

.text-tlumeny { color: var(--barva-text-tlumeny); }

.pripravovana-obrazovka { max-width: 48rem; }
.pripravovana-obrazovka-popis {
    font-size: 1rem;
    line-height: 1.5;
}
.pripravovana-obrazovka-zdroj {
    font-size: 0.875rem;
    color: var(--barva-text-tlumeny);
}

/* ================= štítky (docs/01 kap. 2 bod 7, kap. 4) =================
   Barva vždy doplňuje text, nikdy ho nenahrazuje. Průhledný okraj se
   v režimu vysokého kontrastu (forced-colors) zobrazí jako obrys. */

.stitek {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.625rem;
    padding: 0 0.625rem;
    border: 1px solid transparent;
    border-radius: var(--polomer-stitek);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
}

/* šedé: čeká na doplnění, vyřízeno, uzavřeno, připravuje se */
.stitek--sedy {
    background: var(--barva-neutralni-svetla);
    color: var(--barva-neutralni-text);
}
/* tlumené s okrajem: lhůta pozastavena, bez lhůty, vyřízeno */
.stitek--tlumeny {
    background: var(--barva-pozadi);
    color: var(--barva-neutralni-text);
    border-color: var(--barva-okraj);
}

/* lhůta */
.stitek-lhuta--nalehava {
    background: var(--barva-vystraha);
    color: #fff;
}
.stitek-lhuta--blizi {
    background: var(--barva-vystraha-svetla);
    color: var(--barva-vystraha-text);
}
.stitek-lhuta--neutralni {
    background: var(--barva-karta);
    color: var(--barva-primarni-text);
    border-color: #c6d3e6;
}

/* stav spisu */
.stitek-stav--vyrizuje {
    background: var(--barva-primarni-svetla);
    color: var(--barva-primarni-text);
}
.stitek-stav--podpis {
    background: var(--barva-podpis-svetla);
    color: var(--barva-podpis-text);
}
.stitek-stav--odeslano {
    background: var(--barva-uspech-svetla);
    color: var(--barva-uspech-text);
}

/* zdroj (kanál příjmu) – v prototypu hranatější a stejně široké kvůli zarovnání řádků */
.stitek-zdroj {
    min-width: 4.875rem;
    padding: 0 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
}
.stitek-zdroj--ds { background: var(--barva-primarni-text); color: #fff; }
.stitek-zdroj--email { background: var(--barva-neutralni-svetla); color: #2b313a; }
.stitek-zdroj--formular { background: #dcefeb; color: #1b5048; }
.stitek-zdroj--listinne { background: #f3e8d6; color: #6b4410; }

/* ================= přihlašovací obrazovky ================= */
.prihlaseni-pozadi {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    background: var(--barva-pozadi);
    padding: 1rem;
}
.prihlaseni-karta {
    background: #fff;
    border: 1px solid #e2ddd2;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgb(28 42 58 / 0.08);
    padding: 2rem;
    width: 100%;
    max-width: 26rem;
}
.prihlaseni-nazev {
    margin: 0 0 1.25rem;
    font-family: var(--pismo-dokument);
    font-size: 1.4rem;
    color: var(--barva-panel);
}
.prihlaseni-karta label {
    display: block;
    margin: 0.9rem 0 0.25rem;
    font-size: 0.9rem;
    font-weight: 600;
}
.prihlaseni-karta input {
    width: 100%;
    min-height: 44px;   /* přístupnost: ovládací prvky min. 40–44 px */
    padding: 0.4rem 0.6rem;
    border: 1px solid #cbd2d9;
    border-radius: 6px;
    font: inherit;
}
.prihlaseni-karta input:focus-visible {
    outline: 2px solid var(--barva-primarni);
    outline-offset: 1px;
}
.tlacitko-primarni {
    margin-top: 1.25rem;
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: 6px;
    background: var(--barva-primarni);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.tlacitko-primarni:hover { background: #17406f; }
.formular-chyba {
    background: var(--barva-vystraha-svetla);
    color: var(--barva-chyba);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin: 0 0 0.5rem;
}
.mfa-tajemstvi {
    font-family: var(--pismo-mono);
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    background: var(--barva-pozadi);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    user-select: all;
}
.odkaz-zpet { display: inline-block; margin-top: 0.75rem; }

/* QR kód pro zřízení druhého faktoru */
.mfa-qr {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0 1rem;
}
.mfa-qr svg {
    width: 200px;
    height: 200px;
    background: #fff;
    border: 1px solid var(--barva-okraj, #dedad2);
    border-radius: 8px;
}
.mfa-rucne summary {
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    color: var(--barva-primarni);
}

/* stavy validace formulářů (Blazor) */
.invalid.modified:not([type=checkbox]) { outline: 1px solid var(--barva-chyba); }
.validation-message { color: var(--barva-chyba); }