/* Formuláře, hlášky a prvky členské sekce: nahoře sdílené, pak po stránkách. */

:root {
    --success: #2e7d32;
    --error: #c62828;
    --warning: #ef6c00;

    /* Jen dva stupně tlumeného textu. */
    --tlumene: color-mix(in srgb, var(--text) 68%, var(--base));
    --tlumene-vic: color-mix(in srgb, var(--text) 48%, var(--base));

    --focus-slaby: rgba(from var(--focus) r g b / 0.1);
}

/* Skok na kotvu (řádek po zapsané změně) nesmí skončit pod pevnou lištou
 * a ulpívající hlavičkou tabulky. */
html {
    scroll-padding-top: calc(var(--topbar, 15rem) + 3rem);
}

/* --- hlášky ---------------------------------------------------------------- */

.flashes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5em;
}

.flash {
    --barva: var(--focus);
    padding: 0.75em 1em;
    border-radius: 0.5em;
    border-left: 4px solid var(--barva);
    background-color: rgba(from var(--barva) r g b / 0.1);
    text-align: left;
}

.flash.success { --barva: var(--success); }
.flash.error { --barva: var(--error); }
.flash.warning { --barva: var(--warning); }

/* --- formuláře a tlačítka -------------------------------------------------- */

form {
    max-width: 600px;
}

.field {
    display: grid;
    gap: 0.25em;
    margin: 0 0 1.25em;
    text-align: left;

    :is(label, legend) {
        font-family: var(--pismo-ui);
        font-weight: 600;
    }

    small {
        color: var(--tlumene);
    }

    small.error {
        color: var(--error);
    }

    /* Zaškrtávátko vedle popisku, vysvětlivka pod ním. Výslovné buňky, jinak
     * by vysvětlivka předběhla popisek. */
    &:has(> input[type="checkbox"]) {
        grid-template-columns: auto 1fr;
        align-items: center;
        column-gap: 0.6em;

        input[type="checkbox"] {
            grid-column: 1;
            grid-row: 1;
        }

        label {
            grid-column: 2;
            grid-row: 1;
        }

        small {
            grid-column: 2;
        }
    }
}

/* Skupina zaškrtávátek (`fieldset` z makra `field`). */
fieldset.field {
    border: 0;
    padding: 0;
    min-width: 0;

    legend {
        padding: 0;
        margin-bottom: 0.25em;
    }
}

/* Každá volba je celý řádek, aby se na ni trefil i palec. */
.field .zaskrtavatka {
    display: grid;

    label {
        display: flex;
        align-items: center;
        gap: 0.6em;
        min-height: 2.5em;
        font-family: inherit;
        font-weight: normal;
        cursor: pointer;
    }

    input[type="checkbox"] {
        width: 1.2em;
        height: 1.2em;
        margin: 0;
    }
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="date"],
select,
textarea {
    font: inherit;
    padding: 0.6em;
    /* 16px, jinak iOS při zaostření pole zvětší celou stránku. */
    font-size: max(1em, 16px);
    /* Hranice ovládacího prvku potřebuje kontrast aspoň 3:1. */
    border: 1px solid var(--tlumene-vic);
    border-radius: 0.4em;
    background-color: var(--base);
    color: var(--text);
    width: 100%;
    box-sizing: border-box;

    &:focus {
        outline: 2px solid var(--focus);
        border-color: var(--focus);
    }
}

textarea {
    min-height: 5em;
    resize: vertical;
}

input[readonly] {
    background-color: var(--mantle);
    color: var(--tlumene);
    cursor: default;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
    border-color: var(--error);
}

/* Primární tlačítko; `a.button` (main.css) jen dodá umístění. */
button,
input[type="submit"],
a.button {
    font-family: var(--pismo-ui);
    font-size: 1rem;
    padding: 0.7em 1.4em;
    border: none;
    border-radius: 0.5em;
    color: var(--base);
    background-color: var(--blue);
    cursor: pointer;
    transition: 0.2s all;

    /* Cíl pro palec: hlasovat se bude z mobilu. */
    min-height: 2.75em;

    &:hover {
        background-color: var(--focus);
    }

    &.danger {
        background-color: var(--error);
    }
}

/* Drobné tlačítko; barvu pod kurzorem určuje `--barva`. */
.drobne {
    --barva: var(--focus);
    border-radius: 0.5em;
    transition: 0.2s all;
    min-height: 0;
    padding: 0.3em 0.8em;
    font-size: 0.9em;
    color: var(--text);
    background-color: transparent;
    border: 1px solid var(--mantle);

    &:is(.add, .remove) {
        color: var(--barva);
        border-color: rgba(from var(--barva) r g b / 0.5);
    }

    /* Až za barvou `.add`/`.remove`: při stejné specificitě vyhrává pozdější pravidlo. */
    &:hover {
        color: var(--base);
        background-color: var(--barva);
        border-color: var(--barva);
    }

    &.add { --barva: var(--blue); }
    &.remove { --barva: var(--error); }
}

/* Potvrzovací okno s dalšími poli (`data-dialog` v main.js). */
dialog.potvrzeni {
    max-width: min(32rem, calc(100vw - 2rem));
    padding: 1.2em 1.5em;
    border: 1px solid var(--mantle);
    border-radius: 0.5em;
    box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.25);

    &::backdrop {
        background: rgba(0, 0, 0, 0.35);
    }

    > p:first-child {
        margin-top: 0;
        font-weight: bold;
    }

    .button-row {
        justify-content: flex-end;
    }
}

form.inline {
    display: inline;
    max-width: none;
}

details.danger[open],
.na-tobe,
.muj-hlas,
.vyrizeni {
    border: 1px solid var(--mantle);
    border-radius: 0.5em;
    padding: 0.75em 1em;
}

details.danger {
    margin-top: 1em;
    font-size: 0.9em;

    &[open] {
        border-color: rgba(from var(--error) r g b / 0.4);
        font-size: 1em;
    }

    summary {
        font-family: var(--pismo-ui);
        color: var(--error);
        cursor: pointer;
    }
}

/* Past na roboty: mimo obrazovku, ne `display: none`, skryté pole by robot
 * přeskočil. */
.past {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- sdílené prvky členské sekce ------------------------------------------- */

main.wide {
    justify-content: stretch;
    box-sizing: border-box;
    width: 100%;
    max-width: 70rem;
    margin-inline: auto;

    /* Jinak široká tabulka roztáhne sloupec rozvržení nad šířku displeje. */
    grid-template-columns: minmax(0, 1fr);

    section {
        min-width: 0;
    }

    h1 {
        text-align: left;
        margin: 0 0 0.75em;
    }
}

/* Drobečky v nadpisu. */
.drobecek {
    font-size: 0.72em;
    font-weight: normal;
    color: var(--tlumene-vic);

    a {
        color: inherit;
    }

    a:hover {
        color: var(--focus);
    }

    .sipka {
        padding: 0 0.4em;
    }
}

/* Pilulka: odznak a počet u nadpisu; barvu nese `--barva`. */
.odznak,
.count {
    display: inline-block;
    padding: 0.15em 0.7em;
    border-radius: 2em;
    font-family: var(--pismo-ui);
    font-size: 0.85em;
    white-space: nowrap;
    color: var(--base);
    background-color: var(--barva, var(--mantle));
}

/* Na výchozí šedé tmavý text. */
.odznak-zadny,
.odznak-neucast {
    color: var(--text);
}

.count {
    color: var(--text);
    font-size: 0.75em;
}

/* Bez obalu by odznaky v tabulce s pevnou šířkou přetekly. (`.badges`
 * v main.css jsou zkratky u jmen na veřejném seznamu.) */
.odznaky {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    margin: 0.4em 0;
}

/* Období se smí zalomit mezi daty, ne uvnitř data. */
.nobr {
    white-space: nowrap;
}

/* Flex i bez akcí, aby byl rozestup za drobečkem všude stejný. Ne `gap`:
 * šipka drobečku má vlastní odsazení. */
:is(h1, h2):has(.action, .count, .drobecek) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;

    /* První akce za textem nadpisu dál, další těsně. */
    > :is(.action, .count, form.inline) {
        margin-left: 0.4em;
    }

    > :is(.action, .count, form.inline):is(:first-child, .drobecek + *) {
        margin-left: 1.25em;
    }
}

.action,
.pager a {
    border: 1px solid var(--mantle);
    text-decoration: none;

    &:hover {
        color: var(--focus);
        border-color: var(--focus);
        background-color: var(--focus-slaby);
        text-decoration: none;
    }
}

.action {
    font-family: var(--pismo-ui);
    font-size: 0.95rem;
    font-weight: 400;
    padding: 0.2em 0.8em;
    border-radius: 2em;
    color: var(--tlumene);
    white-space: nowrap;
}

/* Akce ve formuláři (zrušení) vypadá jako odkaz vedle. */
button.action {
    background: none;
    min-height: 0;
    line-height: inherit;
    cursor: pointer;

    &.nebezpecna:hover {
        color: var(--error);
        border-color: var(--error);
        background-color: rgba(from var(--error) r g b / 0.08);
    }
}

.action.nelze {
    border-color: transparent;
    color: var(--tlumene-vic);
    font-size: 0.85rem;
    white-space: normal;
}

/* Posouvá obal, ne tabulka: `display: block` by vyřadilo `table-layout: fixed`. */
.table-scroll {
    overflow-x: auto;
    margin-bottom: 1em;
}

/* Posouvající obal by byl kontejnerem pro `sticky` a hlavička by neulpěla. */
@media (width >= 45rem) {
    .table-scroll {
        overflow-x: visible;
    }

    /* Výšku hlavičky stránky hlásí `main.js` do `--topbar`. Rámeček přes
     * `box-shadow`: okraje ulpívající buňky se při `border-collapse` odrolují. */
    .admin-table thead tr:first-child th {
        position: sticky;
        top: var(--topbar, 0);
        z-index: 2;
        background-color: var(--base);
        box-shadow: inset 0 -1px var(--mantle);
    }
}

.admin-table {
    width: 100%;
    min-width: 40rem;
    table-layout: fixed;
    border-collapse: collapse;

    th, td {
        text-align: left;
        padding: 0.5em 0.75em;
        border-bottom: 1px solid var(--mantle);
        vertical-align: top;
        /* Dlouhý e-mail by jinak vytekl přes sousední sloupec. */
        overflow-wrap: anywhere;
    }

    th {
        font-family: var(--pismo-ui);
        white-space: nowrap;
    }

    th.wrap {
        white-space: normal;
    }

    tr.ended {
        color: var(--tlumene);
    }

    /* Tlačítko v úzkém sloupci se nesmí zlomit uprostřed slova. */
    button {
        overflow-wrap: normal;
        white-space: nowrap;
    }

    /* Dlouhý stav přihlášky by jinak vytekl z buňky. */
    .odznak {
        white-space: normal;
    }

    /* Řádek, na který se stránka vrátila po zapsané změně. */
    tr:target td {
        background-color: var(--focus-slaby);
    }

    td.note, .kdo.note {
        white-space: pre-line;
    }

    td.spanned {
        border-right: 1px solid var(--mantle);
    }

    /* Tlumené čárky mezi odkazy na skupiny. */
    td.groups {
        color: var(--tlumene);
    }

    td code {
        font-size: 0.95em;
    }

    th select {
        font-weight: normal;
        font-size: 0.9em;
    }

    &.narrow {
        min-width: 0;
        max-width: 34rem;
    }
}

/* Šířky sloupců pro všechny tabulky. Jsou to váhy: `table-layout: fixed`
 * je rozpočítá, takže nemusejí dát sto. */
.c-veta { width: 40%; }

.c-jmeno { width: 28%; }
.c-udaj { width: 20%; }
.c-kratky { width: 13%; }
.c-cislo { width: 8%; }

dl.detail {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: 0.4em 1.5em;
    margin: 0 0 1.5em;

    dt {
        font-family: var(--pismo-ui);
        font-weight: 600;
    }

    dd {
        margin: 0;
    }

    /* Jen u vybraných hodnot (adresa): plošně by lámalo řádky šablony. */
    dd.pre {
        white-space: pre-line;
    }

    dd small {
        display: block;
        color: var(--tlumene);
    }

    dd small.v-radku {
        display: inline;
    }

    @media (max-width: 40rem) {
        grid-template-columns: 1fr;
        gap: 0 0;

        dd {
            margin-bottom: 0.8em;
        }
    }
}

/* Provozní log (zápisy do LDAPu): dlouhé řádky lámat, ať stránka nejezdí do strany. */
pre.log {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.85em;
    max-height: 30em;
    overflow-y: auto;
}

button.linkish {
    background: none;
    border: none;
    padding: 0;
    min-height: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;

    &:hover {
        background: none;
    }
}

/* --- seznam osob ----------------------------------------------------------- */

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.25em;
    border-bottom: 2px solid var(--mantle);
    margin-bottom: 1.5em;

    a {
        padding: 0.6em 1em;
        margin-bottom: -2px;
        border-bottom: 2px solid transparent;
        border-radius: 0.4em 0.4em 0 0;
        font-family: var(--pismo-ui);
        color: var(--text);
        text-decoration: none;

        &:hover {
            background-color: var(--focus-slaby);
            text-decoration: none;
        }

        &.active {
            border-bottom-color: var(--focus);
            color: var(--focus);
            font-weight: 600;
        }
    }
}

.legend h2 {
    font-size: 1.2em;
}

.summary {
    text-align: left;
    margin: 0 0 0.75em;
    color: var(--tlumene);

    a {
        margin-left: 0.5em;
    }
}

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em 1em;
    margin-bottom: 2em;

    .range {
        color: var(--tlumene);
    }

    .links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35em;
    }

    a, .current, .gap {
        min-width: 2.25em;
        min-height: 2.25em;
        padding: 0 0.5em;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.4em;
        font-family: var(--pismo-ui);
    }

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

    .current {
        border: 1px solid var(--blue);
        background-color: var(--blue);
        color: var(--base);
    }

    .gap {
        min-width: 1em;
        color: var(--tlumene-vic);
    }
}

/* Rozbalovátko s filtry, které do něj stěhuje `main.js`; bez nich se neukazuje. */
.filtry {
    display: none;
}

@media (width < 45rem) {
    .filtry:has(.filtr) {
        display: block;
        border: 1px solid var(--mantle);
        border-radius: 0.5em;
        margin-bottom: 1em;

        summary {
            padding: 0.7em 1em;
            font-family: var(--pismo-ui);
            font-weight: 600;
            cursor: pointer;
        }
    }

    #filtry-mobil {
        display: grid;
        gap: 0.9em;
        padding: 0 1em 1em;

        /* Místo názvu sloupce, který tu nad prvkem chybí. */
        .filtr::before {
            content: attr(data-nazev);
            display: block;
            margin-bottom: 0.25em;
            font-family: var(--pismo-ui);
            font-weight: 600;
        }

        .search {
            &::before {
                flex: 1 0 100%;
            }

            input[type="search"] {
                flex-basis: 10rem;
            }
        }
    }

    /* Po přestěhování by z řádku zbyly jen prázdné buňky. */
    .admin-table tr.filters:not(:has(.filtr)) {
        display: none;
    }
}

/* Vstup má jinak `width: 100%` a vytlačil by tlačítko z buňky. */
.search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    font-weight: normal;

    input[type="search"] {
        flex: 1 1 8rem;
        width: auto;
        min-width: 0;
    }

    button {
        flex: 0 0 auto;
    }
}

/* --- hlasování ------------------------------------------------------------- */

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

/* Tlačítko volby a odznak téhož významu sdílí barvu přes `--barva`; hover ji
 * vypisuje znovu, jinak by ji obecné `button:hover` přebilo. */
.volba {
    background-color: var(--barva);

    &:hover {
        background-color: var(--barva);
        filter: brightness(1.12);
    }
}

/* Cíl pro palec, který `.drobne` jinak ruší. */
.volby .drobne {
    min-height: 2.75em;
}

.volba-ano, .odznak-ano { --barva: var(--success); }
.volba-ne, .odznak-ne { --barva: var(--error); }
.odznak-varovny { --barva: var(--warning); }
.odznak-ceka { --barva: var(--focus); }


/* Nezvolené zesvětlí, ne `disabled`: volbu jde změnit a zakázané tlačítko
 * není ve fokusu. */
.volby:has(.zvoleno) button:not(.zvoleno) {
    opacity: 0.45;
}

.zvoleno {
    outline: 2px solid var(--text);
    outline-offset: 2px;
}

p.zadani {
    border-left: 3px solid var(--mantle);
    padding-left: 1em;
    margin-top: 0.3em;
}

/* Detail hlasování: těsnější svislý rytmus. */
.hlasovani-detail {
    h2 {
        margin: 0 0 0.3em;
    }

    section {
        margin-bottom: 1.25em;
    }

    p {
        margin: 0 0 0.6em;
    }

    .table-scroll {
        margin: 0;
    }

    /* Popisek nad zadáním a nad tabulkou hlasů. */
    p.popisek {
        font-family: var(--pismo-ui);
        font-weight: 600;
        margin: 0 0 0.2em;
    }

    dl + p.popisek {
        margin-top: 0.75em;
    }
}

/* Jednotlivé hlasy: šířka podle obsahu, aby odznak stál hned za jménem. */
.admin-table.hlasy {
    width: auto;
    min-width: 0;
    table-layout: auto;

    td {
        padding: 0.55em 2em 0.55em 0;
        vertical-align: middle;
    }

    td:last-child {
        padding-right: 0;
        white-space: nowrap;
    }

    .kdo {
        display: inline;
        margin-left: 0.6em;
    }
}

.hlasovani-detail .oddelovac {
    border: 0;
    border-top: 1px solid var(--mantle);
    margin: 1.25em 0;
}

.hlasovani-detail h2 .odznak {
    font-size: 0.72em;
    vertical-align: middle;
    font-weight: 500;
}

dl.detail.tesne {
    gap: 0.5em 1.25em;
    margin-bottom: 1em;

    dd small {
        margin-top: 0.15em;
    }
}

/* Hlas a účet z vyřízené přijaté přihlášky; poslední prvek bez spodního okraje. */
.muj-hlas,
.vyrizeni {
    max-width: 44rem;
    box-sizing: border-box;

    p:last-child,
    dl:last-child {
        margin-bottom: 0;
    }
}

.muj-hlas {
    margin: 1.25em 0;
}

.vyrizeni {
    margin: 0 0 1.25em;
    width: fit-content;
}

.na-tobe {
    border-color: rgba(from var(--success) r g b / 0.5);
}

/* Dvojice možností, z nichž jedna platí: neplatná zšedne. */
.stavy {
    margin-right: 0.5em;

    .stav {
        color: var(--tlumene-vic);
    }

    .stav.platny {
        color: var(--text);
        font-weight: 600;
    }
}

.patka {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5em;
    font-size: 0.9em;
    color: var(--tlumene);
    margin: 0;

    strong {
        color: var(--text);
    }

    > span + span::before {
        content: "·";
        margin-right: 0.5em;
    }
}

.tlumene {
    color: var(--tlumene);
}

/* Drobný tlumený řádek pod hodnotou (kdo, kdy, proč). */
.kdo {
    display: block;
    font-size: 0.85em;
    color: var(--tlumene);
}

.dobre {
    color: var(--success);
}

.spatne {
    color: var(--error);
}

/* Znak zaškrtávátka je v písmu drobný. */
.zaskrtnuto {
    font-size: 1.3em;
    line-height: 1;
}

/* Na fialové liště by fialová pilulka zanikla, proto světlá s fialovým číslem. */
.sections .count,
.sectionbar .count {
    --barva: #fff;
    color: var(--focus);
    font-weight: 700;
}

/* --- fotky ----------------------------------------------------------------- */

.fotka {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 1.5em;

    img,
    .photo-placeholder {
        /* `rem`: placeholder má vlastní `font-size: 2em`. */
        flex: 0 0 8rem;
        width: 8rem;
        border-radius: 10%;
    }

    >div,
    >dl {
        flex: 1 1 18rem;
    }
}

.photo-placeholder {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 10%;
    background: var(--background-inv);
    color: var(--base);
    font-family: var(--pismo-ui);
    font-size: 2em;
}