/* Evidence majetku — pracovní rozhraní v identitě HYBLER GROUP.

   Fialová a žlutá vycházejí z firemního logo manuálu. Rozhraní používá
   doplňkové písmo Segoe UI, které manuál výslovně připouští tam, kde není
   k dispozici Nudica. Klidná plocha zůstává záměrně: aplikace se používá
   v dílně a při obchůzce, ne jako prezentační web. */

/* --- půdorysy ------------------------------------------------------------- */
.pd-nastroje { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; }
.pd-nastroje [aria-pressed="true"] { background:var(--modra); color:#fff; border-color:var(--modra); }
.pd-rozvrzeni { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:16px; align-items:start; }
.pd-platno { min-width:0; }
#pd-svg { width:100%; height: min(68vh, 760px); min-height:350px; display:block; background:#fff; border:1px solid var(--ram); border-radius:8px; touch-action:none; }
#pd-svg[data-rezim="posun"] { cursor:grab; }
#pd-svg[data-rezim="posun"]:active { cursor:grabbing; }
#pd-svg[data-rezim="mistnost"], #pd-svg[data-rezim="dvere"], #pd-svg[data-rezim="hrana"] { cursor:crosshair; }
.pd-mistnost { fill:rgba(88,52,139,.10); stroke:#58348b; stroke-width:1.5; vector-effect:non-scaling-stroke; cursor:pointer; }
.pd-mistnost:hover { fill:rgba(88,52,139,.22); }
.pd-mistnost.pd-vybrano { fill:rgba(0,135,48,.24); stroke:#008730; stroke-width:3; }
.pd-dvere { stroke:#008730; stroke-width:5; vector-effect:non-scaling-stroke; pointer-events:none; }
.pd-dvere.pd-neoverene { stroke:#ac4900; stroke-dasharray:5 3; }
.pd-dvere.pd-vybrane-dvere { stroke:#58348b; stroke-width:7; }
.pd-dvere-zasah { stroke:transparent; stroke-width:24; vector-effect:non-scaling-stroke; cursor:pointer; }
.pd-rozpracovano { fill:rgba(88,52,139,.17); stroke:#58348b; stroke-width:2; vector-effect:non-scaling-stroke; pointer-events:none; }
polyline.pd-rozpracovano { fill:none; }
.pd-bod { fill:#fff; stroke:#58348b; stroke-width:2; vector-effect:non-scaling-stroke; cursor:move; }
.pd-prichyceni { fill:none; stroke:#008730; stroke-width:2; vector-effect:non-scaling-stroke; pointer-events:none; }
.pd-osa { stroke:#008730; stroke-dasharray:5 5; stroke-width:1; vector-effect:non-scaling-stroke; pointer-events:none; }
.pd-panel { min-width:0; padding:16px; margin:0; }
.pd-panel h3 { margin:12px 0 8px; }
.pd-propojeni { display:grid; gap:8px; padding:10px 0; border-bottom:1px solid var(--ram); overflow-wrap:anywhere; }
.pd-seznam { display:grid; gap:4px; max-height:280px; overflow:auto; }
.pd-seznam button { text-align:left; background:var(--vnorene); border:1px solid var(--ram); border-radius:6px; padding:8px 10px; cursor:pointer; overflow-wrap:anywhere; }
.pd-seznam small { display:block; color:var(--tlumeny); }
.pd-prepinac { display:flex; align-items:center; gap:6px; }
.pd-pole { display:grid; gap:4px; margin:10px 0; }
.pd-pole input, .pd-pole select { width:100%; min-width:0; padding:8px; background:var(--karta); border:1px solid var(--ram); border-radius:6px; }
.pd-panel .akce { gap:6px; }
.pd-napoveda { color:var(--tlumeny); margin:10px 0; }
@media(max-width:1100px) { .pd-rozvrzeni { grid-template-columns:minmax(0,1fr); } .pd-panel { max-width:none; } }
@media(max-width:600px) { #pd-svg { height:52vh; min-height:300px; } .pd-pole input,.pd-pole select { font-size:16px; } }

:root {
    --povrch:       #f7f9fb;
    --karta:        #ffffff;
    --vnorene:      #f2f6f9;
    --text:         #1b2733;
    --tlumeny:      #5c6b7a;
    --ram:          #dde5ec;
    --modra:        #58348b;   /* nosná fialová HYBLER GROUP */
    --modra-tmava:  #4b287d;
    --zluta:        #fbba00;
    --zelena:       #008730;
    --cervena:      #E52635;   /* jen stav, nikdy řada */
    --oranzova:     #EC6602;
    --stin: 0 1px 3px rgba(27, 39, 51, .08);
    --lista: 260px;
    /* Výška hlavičky: 10px odsazení nahoře i dole + nejvyšší prvek (44px pole
       hledání) + 1px linka. Lišta pod ní se o tuhle hodnotu opírá, proto je
       tady jednou a ne třikrát natvrdo. */
    --hlavicka: 69px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --povrch:  #12181f;
        --karta:   #1a222c;
        --vnorene: #212b37;
        --text:    #e8eef4;
        --tlumeny: #9aa8b6;
        --ram:     #2a3441;
        --stin: 0 1px 3px rgba(0, 0, 0, .3);
    }
}

* { box-sizing: border-box; }
html { color-scheme: light dark; }
html, body { max-width: 100%; overflow-x: hidden; }
[hidden] { display: none !important; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background: var(--povrch);
    font: 400 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
}

h1, h2, h3 {
    margin: 0; font-family: "Segoe UI", system-ui, sans-serif; font-weight: 700;
    text-wrap: balance;
}

button, input, select, textarea { font: inherit; color: inherit; }
button, summary, label { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--modra); outline-offset: 2px; }
html { -webkit-tap-highlight-color: color-mix(in srgb, #58348b 22%, transparent); }

a { color: var(--modra-tmava); }
@media (prefers-color-scheme: dark) { a { color: #c9acef; } }

.skip-link {
    position: fixed; z-index: 100; left: 12px; top: 8px;
    padding: 8px 12px; border-radius: 6px;
    color: var(--text); background: var(--karta); box-shadow: var(--stin);
    transform: translateY(-160%); transition: transform .15s;
}
.skip-link:focus-visible { transform: none; }

/* --- hlavička ------------------------------------------------------------ */

.hlavicka {
    position: sticky; top: 0; z-index: 20;
    display: grid; align-items: center; gap: 12px;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
    background: var(--karta); border-top: 4px solid var(--zluta); border-bottom: 1px solid var(--ram);
}

.prepinac-listy {
    display: grid; place-items: center; width: 44px; height: 44px;
    background: none; border: 1px solid var(--ram); border-radius: 8px; cursor: pointer;
}
.prepinac-listy span { display: block; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -5px currentColor, 0 5px currentColor; }

/* PNG už obsahuje ochrannou zónu; další odsazení ani podklad nepotřebuje. */
.logo { display: block; border-radius: 6px; }
.logo img { display: block; height: 44px; width: auto; }

.hledani { position: relative; display: flex; gap: 10px; min-width: 0; }
.hledani input {
    flex: 1; min-width: 0; padding: 11px 12px; min-height: 44px;
    background: var(--vnorene); border: 1px solid var(--ram); border-radius: 8px;
}
.hledani-nabidka {
    position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 86px;
    max-height: 310px; overflow-y: auto; background: var(--karta);
    border: 1px solid var(--ram); border-radius: 8px; box-shadow: var(--stin);
}
.hledani-nabidka button {
    display: grid; width: 100%; gap: 2px; padding: 11px 12px; text-align: left;
    color: var(--text); background: none; border: 0; border-bottom: 1px solid var(--ram);
    cursor: pointer;
}
.hledani-nabidka button:last-child { border-bottom: 0; }
.hledani-nabidka button:hover, .hledani-nabidka button:focus-visible { background: var(--vnorene); }
.hledani-nabidka small { color: var(--tlumeny); }

.uzivatel { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
/* Jméno je odkaz na Můj majetek. Podtržení až na hover, ať hlavička
   nevypadá jako seznam odkazů. */
.uzivatel .jmeno { font-weight: 600; color: var(--text); text-decoration: none; }
.uzivatel .jmeno:hover, .uzivatel .jmeno:focus-visible { text-decoration: underline; }
.uzivatel .moje { display: none; font-weight: 600; color: var(--text); text-decoration: none; }
.odznak-role {
    padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
    color: #fff; background: var(--modra-tmava);
}
.odznak-role[data-role="spravce"] { background: var(--zelena); }
.odznak-role[data-role="uzivatel"] { background: var(--tlumeny); }

/* Sedí v hlavičce vedle odznaku role, takže je nižší než tlačítko ve formuláři.
   Na úzkém displeji mizí jméno, ale odhlášení zůstat musí — je to jediná cesta
   ven a hledá se na telefonu stejně jako na počítači. */
.uzivatel .odhlasit { padding: 6px 10px; min-height: 0; font-size: 13px; }

/* --- rozvržení ----------------------------------------------------------- */

.rozvrzeni { display: grid; grid-template-columns: var(--lista) minmax(0, 1fr); align-items: start; }
.rozvrzeni[data-lista="zavrena"] { grid-template-columns: minmax(0, 1fr); }

.lista {
    position: sticky; top: var(--hlavicka); overflow: hidden;
    height: calc(100vh - var(--hlavicka)); padding: 14px 10px;
    background: var(--karta); border-right: 1px solid var(--ram);
}
.rozvrzeni[data-lista="zavrena"] .lista { display: none; }

.lista h2 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tlumeny); margin: 14px 8px 6px; }
.lista a {
    display: block; padding: 11px 10px; margin-bottom: 2px; border-radius: 8px;
    color: inherit; text-decoration: none;
}
.lista a:hover { background: var(--vnorene); }
.lista a[aria-current="page"] { background: var(--vnorene); font-weight: 600; box-shadow: inset 3px 0 var(--modra); }

.obsah { padding: 18px max(14px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.obsah > * + * { margin-top: 18px; }

/* Bloky uvnitř stránky a uvnitř karty si odstup neudělají samy. Nadpis, panel
   akcí, formulář ani seznam žádný vlastní margin nemají, takže bez těchhle
   pravidel sedí tlačítko natěsno pod polem, do kterého se právě psalo. */
#stranka > * + * { margin-top: 20px; }
.karta > * + * { margin-top: 16px; }
.kl-sloupce { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.kl-pole { border: 0; padding: 0; margin: 0; min-width: 0; }
.kl-pole > * + * { margin-top: 16px; }
.kl-volby, .kl-seznam { display: grid; gap: 8px; max-height: 360px; overflow: auto; }
.kl-volba { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 8px 12px; background: var(--vnorene); border-radius: 8px; overflow-wrap: anywhere; }
.kl-volba input { flex: 0 0 auto; }
.kl-radek { display: grid; gap: 4px; width: 100%; text-align: left; font: inherit; color: var(--text); background: var(--vnorene); border: 1px solid var(--ram); border-radius: 8px; padding: 12px; cursor: pointer; overflow-wrap: anywhere; }
.kl-radek:hover, .kl-radek[aria-pressed="true"] { border-color: var(--modra); }
.kl-osazeni { display: grid; gap: 16px; }
.kl-osazeni-radek { min-width: 0; border: 1px solid var(--ram); border-radius: 8px; padding: 16px; }
.kl-osazeni-radek legend { padding: 0 6px; font-weight: 600; }
.kl-osazeni-radek > * + * { margin-top: 12px; }
#kl-detail > .karta, #kl-form > .karta { margin-top: 16px; }
@media (max-width: 900px) { .kl-sloupce { grid-template-columns: minmax(0, 1fr); } }
#formular:empty { display: none; }

@media (max-width: 800px) {
    :root { --hlavicka: 125px; }
    .rozvrzeni { grid-template-columns: minmax(0, 1fr); }
    .lista { position: fixed; z-index: 30; top: var(--hlavicka); left: 0; width: min(280px, 86vw); box-shadow: var(--stin); }
    .rozvrzeni[data-lista="zavrena"] .lista { display: none; }
    .hlavicka { grid-template-columns: auto auto minmax(0, 1fr); }
    .logo img { height: 31px; }
    .hledani { grid-column: 1 / -1; grid-row: 2; }
    .hledani input { font-size: 16px; }
    .hledani .tlacitko { flex: 0 0 auto; padding-inline: 12px; }
    .uzivatel { grid-column: 3; grid-row: 1; justify-self: end; }
    .uzivatel .jmeno { display: none; }
    .uzivatel .moje { display: inline; }
    .uzivatel .odznak-role { display: none; }
}

/* --- karty a dlaždice ---------------------------------------------------- */

.karta {
    padding: 16px; background: var(--karta);
    border: 1px solid var(--ram); border-radius: 12px; box-shadow: var(--stin);
}

.dlazdice { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.dlazdice a {
    display: block; padding: 22px 18px; text-decoration: none; color: inherit;
    background: var(--karta); border: 1px solid var(--ram); border-radius: 12px;
    box-shadow: var(--stin); transition: border-color .15s, transform .15s;
}
.dlazdice a:hover { border-color: var(--modra); transform: translateY(-2px); }
.dlazdice .zkratka { font-family: "Segoe UI", sans-serif; font-size: 24px; font-weight: 700; color: var(--modra-tmava); }
.dlazdice .popis { color: var(--tlumeny); font-size: 14px; margin-top: 4px; }

/* --- drobečky a souhrn --------------------------------------------------- */

.drobecky { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; }
.drobecky a { text-decoration: none; }
.drobecky a:hover { text-decoration: underline; }
.drobecky .oddelovac { color: var(--tlumeny); }

.souhrn { display: flex; flex-wrap: wrap; gap: 8px; }
.znacka {
    padding: 4px 10px; border-radius: 999px; font-size: 13px;
    background: var(--vnorene); border: 1px solid var(--ram);
}
.znacka b { font-variant-numeric: tabular-nums; }

/* --- seznamy ------------------------------------------------------------- */

.seznam { display: grid; gap: 10px; }
.seznam a, .seznam .radek {
    display: grid; gap: 2px 12px; align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 11px 14px; text-decoration: none; color: inherit;
    background: var(--karta); border: 1px solid var(--ram); border-radius: 10px;
}
.seznam a:hover { border-color: var(--modra); }
.seznam .kod { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; color: var(--tlumeny); }
.seznam .podrobnost { grid-column: 1 / -1; font-size: 13px; color: var(--tlumeny); }
.vyber-stitku { margin-top: 16px; }
.vyber-stitku .radek { grid-template-columns: minmax(0, 1fr); content-visibility: auto; contain-intrinsic-size: auto 110px; }
.vyber-stitku label { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.vyber-stitku a { display: block; overflow-wrap: anywhere; }
.seznam a.odkaz-v-textu {
    display: inline; padding: 0; color: var(--modra-tmava); background: none;
    border: 0; border-radius: 0; text-decoration: underline;
}
.seznam .revize-akce { grid-column: 1 / -1; }
.seznam .sprava-uzivatele { grid-column: 1 / -1; align-items: end; }
.sprava-uzivatele label { display: grid; gap: 5px; color: var(--tlumeny); font-size: 13px; }
.sprava-uzivatele select {
    min-height: 44px; padding: 9px 34px 9px 11px;
    color: var(--text); background: var(--vnorene); border: 1px solid var(--ram); border-radius: 8px;
}
.seznam a.uzivatel-odkaz { min-height: 44px; font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 700px) {
    .seznam .radek[data-osoba] { grid-template-columns: minmax(0, 1fr); }
    .seznam .radek[data-osoba] > .kod { overflow-wrap: anywhere; }
}
@media (prefers-color-scheme: dark) { .seznam a.odkaz-v-textu { color: #c9acef; } }

.prazdno { padding: 26px 16px; text-align: center; color: var(--tlumeny); background: var(--vnorene); border-radius: 12px; }

/* --- rolety --------------------------------------------------------------

   Skupina kategorií se zabalí do `details`. Nativní trojúhelníček se schovává
   a nahrazuje vlastní šipkou, aby se řádek dal na telefonu klepnout celý —
   `summary` má proto plných 44 px výšky. */

.rolety { display: grid; gap: 10px; }
.roleta { background: var(--karta); border: 1px solid var(--ram); border-radius: 10px; }
.roleta > summary {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; min-height: 44px; box-sizing: border-box;
    font-weight: 600; cursor: pointer; list-style: none;
}
.roleta > summary::-webkit-details-marker { display: none; }
.roleta > summary::before {
    content: "›"; flex: none; width: 12px; font-size: 18px; line-height: 1;
    color: var(--tlumeny); transition: transform .15s ease;
}
.roleta[open] > summary::before { transform: rotate(90deg); }
.roleta > summary:hover { color: var(--modra-tmava); }
.roleta > summary .nazev { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.roleta-telo { display: grid; gap: 12px; padding: 0 14px 14px; }

/* Formulář vyjede tam, kde se klepnulo. Prázdný kontejner nesmí dělat mezeru,
   jinak by stránka nadskočila při každém zrušení. */
.formular-zde:empty { display: none; }
.formular-zde { display: grid; }
.seznam .radek > .formular-zde { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) { .roleta > summary::before { transition: none; } }
@media (prefers-reduced-motion: reduce) {
    .skip-link, .dlazdice a { transition: none; }
}

/* --- historie a výběr místa ---------------------------------------------- */

/* Svislá linka vlevo drží záznamy pohromadě jako jednu časovou osu. Bez ní
   se tři různě dlouhé řádky čtou jako tři nesouvisející odstavce. */
.historie { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--ram); display: grid; gap: 14px; }
.historie li { display: grid; gap: 2px; }
.historie .udalost { font-weight: 600; }
.historie .smer { overflow-wrap: anywhere; }
.historie .podrobnost { font-size: 13px; color: var(--tlumeny); }

/* Krok stromem není odkaz na adresu, ale tlačítko — proto musí vypadat jako
   řádek seznamu, ne jako nativní tlačítko na střed. */
.seznam button.radek { width: 100%; text-align: left; cursor: pointer; }
.seznam button.radek:hover { border-color: var(--modra); }

.jako-odkaz {
    padding: 0; background: none; border: 0; cursor: pointer;
    color: var(--modra-tmava); text-decoration: underline;
}
@media (prefers-color-scheme: dark) { .jako-odkaz { color: #c9acef; } }

/* --- hledáček skenu ------------------------------------------------------ */

/* Pevný poměr stran drží místo dřív, než kamera naběhne — bez toho stránka
   po povolení kamery poskočí a tlačítko uteče zpod prstu. */
.hledacek {
    aspect-ratio: 4 / 3; max-height: 60vh; overflow: hidden;
    border-radius: 10px; background: var(--vnorene); border: 1px solid var(--ram);
}
.hledacek video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- fotky a dokumenty --------------------------------------------------- */

/* Pevný poměr stran drží mřížku v řádcích i u fotek na výšku a na šířku
   zároveň — telefon fotí obojí a bez toho by řádky poskakovaly. */
.fotky { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.fotky a { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--ram); }
.fotky a:hover { border-color: var(--modra); }
.fotky img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--vnorene); }

/* Výběr souboru se schovává jen vizuálně, ne z klávesnice a odečítače —
   `display: none` by ho vyřadil z pořadí tabulátoru a šlo by po něm sáhnout
   výhradně myší. Focus se proto vykreslí na popisku, který ho zastupuje. */
.skryty-vyber {
    position: absolute; width: 1px; height: 1px;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.akce:has(.skryty-vyber:focus-visible) label.tlacitko {
    outline: 2px solid var(--modra); outline-offset: 2px;
}

/* --- stavy --------------------------------------------------------------- */

.stav { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.stav[data-stav="v_provozu"]   { color: #0b5c1e; background: color-mix(in srgb, var(--zelena) 16%, transparent); }
.stav[data-stav="mimo_provoz"] { color: #8a3c02; background: color-mix(in srgb, var(--oranzova) 18%, transparent); }
.stav[data-stav="v_oprave"]    { color: #8a3c02; background: color-mix(in srgb, var(--oranzova) 18%, transparent); }
.stav[data-stav="vyrazeno"]    { color: #8f0d17; background: color-mix(in srgb, var(--cervena) 15%, transparent); }
.stav[data-stav-kola="otevreno"],
.stav[data-naskenovano="ano"],
.stav[data-konflikt="false"] { color: #0b5c1e; background: color-mix(in srgb, var(--zelena) 16%, transparent); }
.stav[data-stav-kola="uzavreno"] { color: var(--tlumeny); background: var(--vnorene); }
.stav[data-naskenovano="ne"],
.stav[data-rozdil="nenalezeno"],
.stav[data-konflikt="true"] { color: #8f0d17; background: color-mix(in srgb, var(--cervena) 15%, transparent); }
.stav[data-rozdil="prebytek"] { color: #8a3c02; background: color-mix(in srgb, var(--oranzova) 18%, transparent); }
.slepy-rezim { border-left: 4px solid var(--modra); }
.volba small { line-height: 1.35; }
.prepinac-vysledku { display: flex; flex-wrap: wrap; gap: 6px; }
.prepinac-vysledku .tlacitko { min-height: 36px; padding: 7px 10px; }
@media (prefers-color-scheme: dark) {
    .stav[data-stav="v_provozu"]   { color: #7fd694; }
    .stav[data-stav="mimo_provoz"],
    .stav[data-stav="v_oprave"]    { color: #ffb877; }
    .stav[data-stav="vyrazeno"]    { color: #ff9aa2; }
    .stav[data-stav-kola="otevreno"],
    .stav[data-naskenovano="ano"],
    .stav[data-konflikt="false"] { color: #7fd694; }
    .stav[data-naskenovano="ne"],
    .stav[data-rozdil="nenalezeno"],
    .stav[data-konflikt="true"] { color: #ff9aa2; }
    .stav[data-rozdil="prebytek"] { color: #ffb877; }
}

/* --- tlačítka ------------------------------------------------------------ */

.akce { display: flex; flex-wrap: wrap; gap: 12px; }

button.tlacitko, .tlacitko {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 16px; min-height: 44px; cursor: pointer; text-decoration: none;
    color: var(--text); background: var(--karta);
    border: 1px solid var(--ram); border-radius: 8px;
}
button.tlacitko:hover, .tlacitko:hover { border-color: var(--modra); }
.tlacitko.hlavni { color: #fff; background: var(--modra-tmava); border-color: var(--modra-tmava); }
.tlacitko.hlavni:hover { background: var(--modra); }
.tlacitko.nebezpecne { color: #fff; background: #a51d2a; border-color: #a51d2a; }
.tlacitko.nebezpecne:hover { background: #c32938; border-color: #c32938; }
.tlacitko:disabled { opacity: .5; cursor: not-allowed; }

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

/* Řádky mají větší mezeru než sloupce: pod polem je popisek dalšího pole,
   vedle něj jen vzduch. Stejná mezera v obou směrech vypadá natěsno. */
.pole { display: grid; gap: 20px 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pole > * { min-width: 0; }
.pole label { display: grid; gap: 6px; min-width: 0; font-size: 13px; color: var(--tlumeny); }
.pole input, .pole select, .pole textarea {
    box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%;
    padding: 11px 12px; min-height: 44px; color: var(--text); background: var(--vnorene);
    border: 1px solid var(--ram); border-radius: 8px;
}
.pole .pres-celou { grid-column: 1 / -1; }
.pole.vnorene { padding: 14px; background: var(--vnorene); border: 1px solid var(--ram); border-radius: 8px; }
.pole input[type="checkbox"] { justify-self: start; width: 20px; height: 20px; min-height: 0; margin: 2px 0; }

.naseptavac { position: relative; }
.naseptavac-nabidka {
    position: absolute; z-index: 40; top: 100%; left: 0; right: 0;
    max-height: 240px; overflow-y: auto; margin-top: 4px;
    background: var(--karta); border: 1px solid var(--ram); border-radius: 8px; box-shadow: var(--stin);
}
.naseptavac-nabidka button {
    display: block; width: 100%; padding: 12px; text-align: left;
    background: none; border: 0; border-bottom: 1px solid var(--ram); cursor: pointer;
}
.naseptavac-nabidka button:last-child { border-bottom: 0; }
.naseptavac-nabidka button:hover, .naseptavac-nabidka button:focus-visible { background: var(--vnorene); }

/* --- detail položky ------------------------------------------------------ */

.udaje { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.udaje div { padding: 10px 12px; background: var(--vnorene); border-radius: 8px; }
.udaje dt { font-size: 12px; color: var(--tlumeny); }
.udaje dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }

.kod-velky {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 20px; font-weight: 700; color: var(--modra-tmava);
}

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

.hlaska { padding: 11px 14px; border-radius: 10px; border: 1px solid var(--ram); background: var(--vnorene); }
.hlaska.chyba { color: #8f0d17; background: color-mix(in srgb, var(--cervena) 12%, transparent); border-color: color-mix(in srgb, var(--cervena) 40%, transparent); }
.hlaska.hotovo { color: #0b5c1e; background: color-mix(in srgb, var(--zelena) 12%, transparent); border-color: color-mix(in srgb, var(--zelena) 40%, transparent); }
@media (prefers-color-scheme: dark) {
    .hlaska.chyba { color: #ff9aa2; }
    .hlaska.hotovo { color: #7fd694; }
}

/* --- PIN, kiosk a párování --------------------------------------------- */

.kiosk-firma + .kiosk-firma { margin-top: 14px; }
.kiosk-lide { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.kiosk-jmeno { min-height: 52px; font-size: 16px; }
.kiosk-sso { display: inline-block; margin-top: 20px; }
.pin-karta, .parovani-karta { width: min(440px, 100%); margin-inline: auto; }
.pin-karta > * + *, .parovani-karta > * + * { margin-top: 14px; }
.pin-pole, .parovaci-kod, .pin-karta input {
    box-sizing: border-box; width: 100%; min-height: 52px; padding: 10px 12px;
    border: 1px solid var(--ram); border-radius: 8px; background: var(--karta);
    color: var(--text); font-size: 24px; letter-spacing: .18em; text-align: center;
}
.pin-klavesnice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pin-klavesnice .tlacitko { min-height: 54px; font-size: 19px; }
.kiosk-odpocet {
    position: fixed; z-index: 20; right: 16px; bottom: 16px; margin: 0;
    padding: 10px 14px; border-radius: 8px; color: #fff; background: #8f0d17;
    box-shadow: var(--stin);
}
.dialog-kod { max-width: min(560px, calc(100% - 28px)); border: 1px solid var(--ram); border-radius: 12px; background: var(--karta); color: var(--text); }
.dialog-kod::backdrop { background: rgb(0 0 0 / 45%); }
.dialog-kod code { display: block; overflow-wrap: anywhere; margin-block: 16px; padding: 14px; border-radius: 8px; background: var(--vnorene); font-size: 18px; }
.dialog-kod .parovaci-qr { display: block; max-width: 100%; height: auto; margin: 16px auto; border-radius: 8px; }

.nadpis-sekce { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; justify-content: space-between; }
.nadpis-sekce h2 { font-size: 19px; }
.hlavicka-uzivatele { justify-content: flex-start; align-items: center; }
.sprava-pinu-detail { margin-top: 16px; }
.pocet { color: var(--tlumeny); font-size: 14px; font-variant-numeric: tabular-nums; }