/* xara-reviry — základné štýly (bez externých knižníc)
   Zdroj pravdy pre farby/typografiu: .figma/design-tokens.json — meniť oboje naraz */
:root {
    /* Paleta „Clearwater" (plán 73, prototyp .figma/v9). Názvy premenných ostali slovenské —
       premenovať 161 výskytov by bola zmena bez úžitku. */
    --farba-primarna: #126b8a;
    --farba-primarna-tmava: #0f5a75;
    --farba-pozadie: #f5f9fb;
    --farba-povrch: #ffffff;
    --farba-text: #153047;
    --farba-text-tlmeny: #6b7e8d;
    --farba-okraj: #d8e5ea;
    --farba-uspech: #188161;
    --farba-varovanie: #a66b20;
    --farba-chyba: #aa4941;

    /* Svetlé zvýraznenie: aktívna položka navigácie, vybraný riadok, aktívny filter. */
    --farba-zvyraznenie: #dff3f8;

    /* Akcent na vybranom zázname — jediná teplá farba v palete, preto sa používa striedmo. */
    --farba-akcent: #ff805d;

    --polomer-maly: 4px;
    --polomer-stredny: 10px;
    --polomer-velky: 18px;

    /* Tlačidlá a štítky sú v Clearwater plne zaoblené. */
    --polomer-pill: 999px;

    --tien-panel: 0 10px 35px rgba(35, 75, 94, 0.05);
    --tien-vyvyseny: 0 12px 38px rgba(36, 73, 92, 0.09);

    /* Bočný panel administrácie. Obsah sa oň delí cez grid, nie cez margin. */
    --sirka-bocneho-panela: 250px;

    /* Šírka obsahu administrácie. Bola pevných 1100 px, takže na 1912 px monitore ostávalo
       vyše 800 px prázdnych a akcie v tabuľkách sa lámali pod seba (plán 68).
       Široké majú byť TABUĽKY a formuláre; text si čitateľnú šírku drží sám (--sirka-textu).

       `min(92vw, 2400px)` = rastie s oknom, ale nie donekonečna. Pevný strop 1560 px riešil
       Full HD (82 % využitia) a nie väčšie monitory — pri 3832 px využíval 41 % a po stranách
       ostávalo 2 272 px. Poistka 2 400 px je tam preto, že aj tabuľka má hranicu, za ktorou sa
       oko nevráti na začiatok riadku. */
    --sirka-obsahu: min(92vw, 2400px);

    /* ~80 znakov na riadok. Dlhší riadok sa zle číta — oko stráca návrat na začiatok. */
    --sirka-textu: 80ch;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--farba-pozadie);
    color: var(--farba-text);
    line-height: 1.5;
}

.container {
    max-width: var(--sirka-obsahu);
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

a { color: var(--farba-primarna); }

h1 { margin-top: 0; }

/* --------------------------------------------------------------------------------------
   Chybové stránky (plán 73)

   ⚠️ Žiadna závislosť na layoute ani skriptoch — 500 sa musí vykresliť aj vtedy, keď je
   rozbité všetko ostatné.
   -------------------------------------------------------------------------------------- */
.chybova-stranka {
    max-width: 34rem;
    margin: 12vh auto 0;
    text-align: center;
}

.chybovy-kod {
    margin: 0;
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    color: var(--farba-zvyraznenie);
}

.chybova-stranka h1 { margin: 0.5rem 0 0.75rem; }

.chybova-stranka .popis { color: var(--farba-text-tlmeny); margin: 0 auto 0.75rem; }

.chybova-sprava {
    font-size: 13px;
    color: var(--farba-text-tlmeny);
    background: var(--farba-povrch);
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-stredny);
    padding: 0.7rem 1rem;
    margin: 0 0 1.5rem;
}

/* Auth formuláre (login, setup) */
.auth-logo { margin: 0 auto 1rem; }

/* Šírka ostáva 420 px — prihlásenie je formulár, nie tabuľka (plán 68 ho vyníma zo širokého
   rozloženia). Mení sa len vzhľad. */
.auth-box {
    max-width: 420px;
    margin: 8vh auto 0;
    background: var(--farba-povrch);
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-velky);
    box-shadow: var(--tien-vyvyseny);
    padding: 2rem;
    text-align: center;
}

.auth-box form { text-align: left; }

.auth-box h2 {
    font-size: 18px;
    color: var(--farba-text-tlmeny);
    font-weight: 500;
}

.auth-box label {
    display: block;
    margin: 1rem 0 0.25rem;
    font-weight: 500;
}

.auth-box input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-stredny);
    background: #f7fafb;
    font-size: 15px;
}

/* Pole hesla s prepínačom zobrazenia (plán 63). Tlačidlo leží v poli, aby sa
   nemiešalo s odosielacím tlačidlom formulára. */
.pole-heslo {
    position: relative;
    display: flex;
    align-items: center;
}

.pole-heslo input {
    padding-right: 5rem;
}

.auth-box .heslo-prepinac {
    position: absolute;
    right: 0.35rem;
    width: auto;
    margin: 0;
    padding: 0.3rem 0.6rem;
    background: transparent;
    color: var(--farba-text-tlmeny);
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-maly);
    font-size: 13px;
    cursor: pointer;
}

.auth-box .heslo-prepinac:hover {
    /* `background` tu MUSÍ byť: `.auth-box button:hover` je tmavomodré a bez tohto
       riadku by sa uplatnilo — tlačidlo po kliku sčernelo, lebo pod kurzorom ostáva. */
    background: var(--farba-pozadie);
    color: var(--farba-text);
    border-color: var(--farba-text-tlmeny);
}

/* Tlačidlo je pill ako všade inde v Clearwater. */
.auth-box button {
    margin-top: 1.5rem;
    width: 100%;
    padding: 0.65rem;
    background: var(--farba-primarna);
    color: #fff;
    border: 0;
    border-radius: var(--polomer-pill);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.auth-box button:hover { background: var(--farba-primarna-tmava); }

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--polomer-stredny);
    margin: 1rem 0;
    /* Farbu nesie ľavý pruh, nie rám dokola — pokojnejšie a čitateľnejšie na svetlom podklade. */
    border: 1px solid var(--farba-okraj);
    border-left: 3px solid var(--farba-okraj);
}

.alert-chyba {
    background: #fbeeec;
    color: var(--farba-chyba);
    border-color: #f0d5d1;
    border-left-color: var(--farba-chyba);
}

/* ⚠️ `.alert-ok` šablóny používali (`instancie.php`), ale v CSS nebolo — úspešná hláška sa
   zobrazovala ako holý odstavec bez podfarbenia, teda nerozoznateľne od bežného textu. */
.alert-ok {
    background: #e6f5ef;
    color: #14664e;
    border-color: #c3e5d8;
    border-left-color: var(--farba-uspech);
}

ul.alert-chyba { padding-left: 2rem; }

/* --------------------------------------------------------------------------------------
   Rozloženie administrácie — bočný panel + horná lišta (plán 73, prototyp .figma/v9)

   Predtým bola navigácia vodorovná lišta nad obsahom. Bočný panel unesie viac položiek,
   drží ich zoskupené a nechá hornú lištu na to, kde som a čo hľadám.
   -------------------------------------------------------------------------------------- */
.admin-shell {
    display: grid;
    grid-template-columns: var(--sirka-bocneho-panela) minmax(0, 1fr);
    min-height: 100vh;
}

.admin-bocny {
    background: var(--farba-povrch);
    border-right: 1px solid var(--farba-okraj);
    padding: 1.4rem 0.9rem 1.1rem;
    display: flex;
    flex-direction: column;
    /* Panel stojí, obsah sa posúva — pri dlhom zozname revírov musí byť navigácia po ruke. */
    position: sticky;
    top: 0;
    height: 100vh;
}

.admin-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    padding: 0 0.75rem 1.6rem;
    color: var(--farba-text);
}

/* Značka ekosystému. `flex: 0 0 auto`, aby ju dlhý názov aplikácie nestlačil. */
.xandra-logo {
    width: 58px;
    height: auto;
    flex: 0 0 auto;
    display: block;
}

.admin-logo-nazov {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
}

.admin-logo b {
    font-size: 15px;
    letter-spacing: 0.16em;
    font-weight: 700;
}

.admin-logo small {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--farba-primarna);
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
    /* Pri nízkom okne sa roluje navigácia, nie blok používateľa pod ňou. */
    overflow-y: auto;
}

.admin-nav-skupina {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9aabb5;
    margin: 1.2rem 0.8rem 0.4rem;
}

.admin-nav-skupina:first-child { margin-top: 0; }

.admin-nav a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: #607484;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    font-size: 14px;
}

.admin-nav a:hover { background: #eef7fa; }

.admin-nav a.aktivna {
    background: var(--farba-zvyraznenie);
    color: var(--farba-primarna);
    font-weight: 700;
}

/* Ikona je textový znak, nie obrázok — žiadne externé knižnice, žiadny sprite na údržbu. */
.admin-nav-ikona {
    width: 21px;
    text-align: center;
    font-size: 17px;
    flex-shrink: 0;
}

/* Počítadlo pri položke. Zobrazuje sa LEN keď má číslo — prázdny odznak nič nehovorí. */
.admin-nav-pocet {
    margin-left: auto;
    font-style: normal;
    font-size: 11px;
    background: #edf3f5;
    color: #607484;
    border-radius: var(--polomer-pill);
    padding: 2px 8px;
}

.admin-nav a.aktivna .admin-nav-pocet {
    background: var(--farba-povrch);
    color: var(--farba-primarna);
}

/* Počítadlo, ktoré volá po práci (prompty na kontrolu), je teplé. */
.admin-nav-pocet.caka {
    background: #fbefdc;
    color: var(--farba-varovanie);
}

.admin-user {
    margin-top: auto;
    background: #f3f8fa;
    border-radius: 14px;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /* Dlhý e-mail nesmie roztiahnuť panel. */
    min-width: 0;
}

.admin-user-iniciala {
    width: 31px;
    height: 31px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--farba-zvyraznenie);
    color: var(--farba-primarna);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.admin-user-kto {
    min-width: 0;
    flex: 1;
}

.admin-user-email {
    display: block;
    font-size: 12px;
    color: var(--farba-text);
    /* Skratenie je lepšie než pretečenie — celý e-mail je v `title`. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-user-rola {
    display: block;
    font-size: 10px;
    color: var(--farba-text-tlmeny);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.admin-logout { margin: 0; }

.admin-logout button {
    background: none;
    border: 0;
    padding: 0.3rem;
    cursor: pointer;
    color: var(--farba-text-tlmeny);
    font-size: 13px;
    border-radius: var(--polomer-maly);
}

.admin-logout button:hover {
    color: var(--farba-primarna);
    background: var(--farba-povrch);
}

/* Horná lišta — kde som (drobečky) a rýchly prístup k obsahu. */
.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 15;
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 2rem;
    background: rgba(245, 249, 251, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--farba-okraj);
}

.admin-drobecky {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 12px;
    color: var(--farba-text-tlmeny);
}

.admin-drobecky strong {
    color: var(--farba-text);
    font-weight: 600;
}

.admin-drobecky-oddelovac { color: #bdcdd4; }

/* Zatvorenie vysunutého panela. Na širokom okne nemá čo robiť — panel je tam stále. */
.admin-bocny-zavri {
    display: none;
    position: absolute;
    top: 0.9rem;
    right: 0.7rem;
    width: 32px;
    height: 32px;
    border: 0;
    background: none;
    font-size: 20px;
    line-height: 1;
    color: var(--farba-text-tlmeny);
    text-decoration: none;
    text-align: center;
    border-radius: var(--polomer-maly);
}

.admin-bocny-zavri:hover { background: var(--farba-zvyraznenie); }

/* Tlačidlo navigácie sa objaví až na úzkom okne (viď mediálny dopyt nižšie). */
.admin-nav-prepinac {
    display: none;
    background: var(--farba-povrch);
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-stredny);
    width: 38px;
    height: 38px;
    font-size: 17px;
    cursor: pointer;
    color: var(--farba-text);
}

/* Nadpis sekcie vnútri stránky — menší než h1, ale výraznejší než popiska panela. */
.sekcia-nadpis {
    font-size: 20px;
    font-weight: 700;
    margin: 1.75rem 0 0.75rem;
}

/* --------------------------------------------------------------------------------------
   Dashboard (plán 73)
   -------------------------------------------------------------------------------------- */
.stranka-hlava {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}

.stranka-hlava h1 { margin: 0 0 0.35rem; }

.stranka-hlava p:not(.nadnadpis) {
    margin: 0;
    color: var(--farba-text-tlmeny);
    font-size: 14px;
}

/* Nadpis nad nadpisom — orientácia „v akej časti systému som". */
.nadnadpis {
    margin: 0 0 0.45rem;
    font-size: 10px;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--farba-primarna);
}

.metriky {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.metrika {
    background: var(--farba-povrch);
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-velky);
    box-shadow: var(--tien-panel);
    padding: 1.35rem;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 0.8rem;
}

/* Prvá dlaždica je zvýraznená — je to hlavné číslo evidencie. */
.metrika:first-child {
    background: linear-gradient(135deg, var(--farba-primarna), #2499ac);
    border-color: transparent;
}

.metrika:first-child span,
.metrika:first-child strong,
.metrika:first-child small { color: #fff; }

.metrika:first-child .metrika-ikona {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.metrika:first-child span i {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.metrika-ikona {
    grid-row: 1 / 3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 18px;
}

.metrika-ikona.voda { background: #e4f4f2; color: var(--farba-primarna); }
.metrika-ikona.zelena { background: #e6f3ec; color: var(--farba-uspech); }
.metrika-ikona.piesok { background: #fbf0df; color: var(--farba-varovanie); }
.metrika-ikona.fialova { background: #eeecf8; color: #645e9c; }

.metrika span {
    font-size: 11px;
    color: var(--farba-text-tlmeny);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.metrika span i {
    font-style: normal;
    font-size: 9px;
    color: var(--farba-primarna);
    background: var(--farba-zvyraznenie);
    border-radius: var(--polomer-pill);
    padding: 2px 7px;
    white-space: nowrap;
}

/* Číslo, ktoré volá po práci, je teplé — nie modré ako bežný údaj. */
.metrika span i.caka {
    background: #fbefdc;
    color: var(--farba-varovanie);
}

.metrika strong {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--farba-text);
}

.metrika small {
    grid-column: 1 / 3;
    margin-top: 0.75rem;
    font-size: 11px;
    color: var(--farba-text-tlmeny);
}

.prehlad-mriezka {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr);
    gap: 1rem;
}

.panel {
    background: var(--farba-povrch);
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-velky);
    box-shadow: var(--tien-panel);
    padding: 1.2rem;
}

.panel-hlava {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.panel-hlava-vnutri {
    padding: 1.1rem 1.1rem 0;
    margin-bottom: 0;
}

.panel-hlava h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.odkaz-tlacidlo {
    border: 0;
    background: none;
    color: var(--farba-primarna);
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}

.odkaz-tlacidlo:hover { text-decoration: underline; }

.nahlad-mapy {
    display: block;
    border-radius: var(--polomer-stredny);
    overflow: hidden;
    /* Náhľad nie je ovládateľný, takže kurzor musí povedať, že vedie inam. */
    cursor: pointer;
}

#nahlad-mapa {
    height: 320px;
    background: #edf5f4;
    /* Bez toho by Leaflet chytal ťahanie a kliknutie by sa nedostalo k odkazu. */
    pointer-events: none;
}

.mapa-poznamka {
    margin: 0.8rem 0 0;
    font-size: 12px;
    color: var(--farba-text-tlmeny);
}

.panel-fronta { display: flex; flex-direction: column; }

/* Podiel prichádza z PHP ako `--podiel` — je to dátová hodnota, nie vzhľad. */
.prstenec {
    width: 168px;
    height: 168px;
    margin: 1.2rem auto 1rem;
    border-radius: 50%;
    background: conic-gradient(var(--farba-primarna) 0 var(--podiel, 0%), #e7f0f2 var(--podiel, 0%));
    display: grid;
    place-items: center;
    position: relative;
}

.prstenec::after {
    content: "";
    position: absolute;
    width: 126px;
    height: 126px;
    border-radius: 50%;
    background: var(--farba-povrch);
}

.prstenec div {
    position: relative;
    z-index: 1;
    text-align: center;
}

.prstenec strong {
    display: block;
    font-size: 26px;
    font-weight: 700;
}

.prstenec span {
    font-size: 10px;
    color: var(--farba-text-tlmeny);
}

.fronta-stavy {
    margin: 0 0 1.1rem;
    display: grid;
    gap: 0.5rem;
}

.fronta-stavy div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.fronta-stavy dt {
    color: var(--farba-text-tlmeny);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.fronta-stavy dd {
    margin: 0;
    font-weight: 600;
}

.stav-bodka {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.stav-bodka.overeny { background: var(--farba-primarna); }
.stav-bodka.manual { background: var(--farba-uspech); }
.stav-bodka.kontrola { background: var(--farba-varovanie); }
.stav-bodka.navrh { background: #ccd5d0; }

.tlacidlo-hlavne {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--farba-primarna);
    color: #fff;
    border: 0;
    border-radius: var(--polomer-pill);
    padding: 0.6rem 1.25rem;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.tlacidlo-hlavne:hover { background: var(--farba-primarna-tmava); }

.siroke {
    width: 100%;
    /* Tlačidlo na konci panela sa prilepí dole, nech panely končia rovnako. */
    margin-top: auto;
}

@media (max-width: 1200px) {
    .metriky { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .prehlad-mriezka { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .metriky { grid-template-columns: minmax(0, 1fr); }
}

.admin-info {
    background: var(--farba-povrch);
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-velky);
    padding: 1rem 1.25rem;
    color: var(--farba-text-tlmeny);
    box-shadow: var(--tien-panel);
}

/* --------------------------------------------------------------------------------------
   Zoznam revírov — filtre a panel s tabuľkou (plán 73)
   -------------------------------------------------------------------------------------- */
.hlava-akcie {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.tlacidlo-vedlajsie {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--farba-povrch);
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-pill);
    padding: 0.55rem 1.15rem;
    font-size: 13px;
    color: var(--farba-text);
    text-decoration: none;
    cursor: pointer;
}

.tlacidlo-vedlajsie:hover { border-color: var(--farba-primarna); color: var(--farba-primarna); }

/* Panel, ktorý drží filtre aj tabuľku — obsah ide od okraja k okraju. */
.panel-data { padding: 0; overflow: hidden; }

.filtre-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border-bottom: 1px solid var(--farba-okraj);
}

.filtre-hladanie {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-pill);
    padding: 0.45rem 0.9rem;
    color: var(--farba-text-tlmeny);
    width: 320px;
    max-width: 100%;
}

.filtre-hladanie input {
    border: 0;
    outline: 0;
    background: none;
    width: 100%;
    font-size: 13px;
    color: var(--farba-text);
}

/* Rýchly prepínač je odkaz — výsledok má mať vlastnú URL, ktorá sa dá poslať. */
.filter {
    background: var(--farba-povrch);
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-pill);
    padding: 0.45rem 0.9rem;
    font-size: 12px;
    color: var(--farba-text-tlmeny);
    text-decoration: none;
    white-space: nowrap;
}

.filter b { margin-left: 0.3rem; color: var(--farba-text); }

.filter.aktivny {
    background: var(--farba-zvyraznenie);
    border-color: #9ecfda;
    color: var(--farba-primarna);
}

.filter.aktivny b { color: var(--farba-primarna); }

/* Rozbalenie stojí na `<details>`, teda funguje aj bez JavaScriptu. */
.filtre-viac { margin-left: auto; }

.filtre-viac > summary {
    list-style: none;
    cursor: pointer;
    background: var(--farba-povrch);
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-pill);
    padding: 0.45rem 0.9rem;
    font-size: 12px;
    color: var(--farba-text-tlmeny);
    white-space: nowrap;
}

.filtre-viac > summary::-webkit-details-marker { display: none; }
.filtre-viac[open] > summary { background: var(--farba-zvyraznenie); color: var(--farba-primarna); }
.filtre-viac > summary b { margin-left: 0.3rem; color: var(--farba-primarna); }

.filtre-podrobne {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.9rem;
    width: 100%;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--farba-okraj);
}

.filtre-podrobne label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 11px;
    color: var(--farba-text-tlmeny);
}

.filtre-podrobne select {
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-stredny);
    background: #f7fafb;
    padding: 0.5rem;
    font-size: 13px;
    color: var(--farba-text);
}

.filtre-akcie {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.odkaz-zrusit { font-size: 12px; }

/* Kód revíru je identifikátor — nesmie sa lámať uprostred, inak sa zle číta aj kopíruje. */
.kod-reviru {
    text-decoration: none;
    white-space: nowrap;
}

.kod-reviru code {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 11px;
    background: var(--farba-zvyraznenie);
    color: var(--farba-primarna);
    border-radius: var(--polomer-maly);
    padding: 3px 6px;
}

.kod-reviru:hover code { background: #cbeaf2; }

/* Číselné stĺpce vpravo — čísla sa porovnávajú po rádoch. */
.tabulka th.cislo,
.tabulka td.cislo { text-align: right; }

/* Pätička tabuľky — rozsah zobrazených a stránkovanie. */
.tabulka-noha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.9rem 1rem;
    font-size: 12px;
    color: var(--farba-text-tlmeny);
}

.strankovanie {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.strankovanie a,
.strankovanie .aktivna {
    min-width: 30px;
    text-align: center;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-stredny);
    font-size: 12px;
    text-decoration: none;
    color: var(--farba-text);
}

.strankovanie a:hover { border-color: var(--farba-primarna); color: var(--farba-primarna); }

.strankovanie .aktivna {
    background: var(--farba-primarna);
    border-color: var(--farba-primarna);
    color: #fff;
}

.strankovanie .vypustenie { padding: 0 0.2rem; }

/* Tabuľka */
.tabulka {
    width: 100%;
    border-collapse: collapse;
    background: var(--farba-povrch);
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-stredny);
    overflow: hidden;
    font-size: 14px;
}

.tabulka th,
.tabulka td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--farba-okraj);
}

.tabulka th {
    background: var(--farba-pozadie);
    font-weight: 500;
    color: var(--farba-text-tlmeny);
}

.tabulka tbody tr:hover { background: var(--farba-pozadie); }
.tabulka tr.zruseny { color: var(--farba-text-tlmeny); text-decoration: line-through; }
.tabulka .prazdne { text-align: center; color: var(--farba-text-tlmeny); padding: 1.5rem; }

.strankovanie {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
    color: var(--farba-text-tlmeny);
}

/* --------------------------------------------------------------------------------------
   Detail revíru (plán 73)
   -------------------------------------------------------------------------------------- */
.detail-znacky {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

/* Stavový štítok — spoločný pre detail, tabuľky aj inštancie. */
.stav {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: var(--polomer-pill);
    padding: 0.25rem 0.65rem;
    font-size: 11px;
    white-space: nowrap;
}

.stav-ok { background: #e5f3ed; color: #14664e; }
.stav-varovanie { background: #fbefdc; color: var(--farba-varovanie); }
.stav-chyba { background: #f9e9e7; color: var(--farba-chyba); }
.stav-tlmeny { background: #eef2f4; color: var(--farba-text-tlmeny); }

/* Zrušený revír. Trieda je aj štítkom stavu — označenie musí byť vidieť VŽDY, nielen keď
   je vyplnená poznámka o zrušení. */
.stav-zruseny { background: #f9e9e7; color: var(--farba-chyba); }

.zrus-poznamka {
    margin: 0.7rem 0 0;
    color: var(--farba-chyba);
    font-size: 13px;
}

.detail-mriezka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 0 0 1rem;
}

.detail-blok {
    background: var(--farba-povrch);
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-velky);
    box-shadow: var(--tien-panel);
    padding: 1.1rem 1.25rem;
}

.detail-blok h2 {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--farba-primarna);
    margin: 0 0 0.85rem;
}

.detail-text h2,
.detail-geo h2 {
    font-size: 17px;
    margin: 0 0 0.75rem;
}

.detail-blok dl { margin: 0; display: grid; gap: 0.5rem; }

.detail-blok dl > dt {
    color: var(--farba-text-tlmeny);
    font-size: 12px;
}

/* Hodnota vpravo, popiska vľavo — v úzkom stĺpci sa zalomí pod seba. */
.detail-blok dd {
    margin: 0 0 0.35rem;
    font-size: 13px;
    font-weight: 500;
}

.detail-text,
.detail-geo { margin: 0 0 1rem; }

.detail-text p { margin: 0; }

/* --------------------------------------------------------------------------------------
   Mapa ako pracovná plocha (plán 73)

   Mapa zaberá výšku pod hornou lištou, ovládanie leží NA nej a vpravo je panel s obsahom
   výrezu. Predtým bola mapa obdĺžnik pod nadpisom a ovládanie nad ním.
   -------------------------------------------------------------------------------------- */
.mapa-plocha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1rem;
    /* Výška okna mínus horná lišta a odsadenie kontajnera. */
    height: calc(100vh - 68px - 4rem);
    min-height: 460px;
}

.mapa-platno { position: relative; }

.mapa-nastroje {
    position: absolute;
    z-index: 500;
    top: 0.9rem;
    left: 0.9rem;
    right: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    /* Lišta nesmie brať kliknutia mape — chytajú ich len jej vlastné prvky. */
    pointer-events: none;
}

.mapa-nastroje > * { pointer-events: auto; }

.mapa-hladanie {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--farba-povrch);
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-pill);
    box-shadow: var(--tien-panel);
    padding: 0.45rem 0.95rem;
    color: var(--farba-text-tlmeny);
    width: 340px;
    max-width: 100%;
}

.mapa-nastroje input[type="search"] {
    border: 0;
    outline: 0;
    background: none;
    font-size: 13px;
    width: 100%;
    color: var(--farba-text);
}

/* Panel s obsahom výrezu — plní ho `mapa.js` z tej istej odpovede, ktorou kreslí mapu. */
.mapa-panel {
    background: var(--farba-povrch);
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-velky);
    box-shadow: var(--tien-panel);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mapa-panel-hlava {
    padding: 1rem 1.1rem 0.8rem;
    border-bottom: 1px solid var(--farba-okraj);
}

.mapa-panel-hlava h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.mapa-panel-zoznam {
    margin: 0;
    padding: 0.5rem;
    list-style: none;
    overflow-y: auto;
    flex: 1;
}

.mapa-panel-zoznam li {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.mapa-polozka {
    flex: 1;
    min-width: 0;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--polomer-stredny);
    padding: 0.55rem 0.65rem;
    cursor: pointer;
}

.mapa-polozka:hover { background: var(--farba-zvyraznenie); }

.mapa-polozka b {
    display: block;
    font-size: 13px;
    font-weight: 600;
    /* Dlhý názov revíru nesmie panel roztiahnuť. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mapa-polozka small {
    display: block;
    font-size: 11px;
    color: var(--farba-text-tlmeny);
    margin-top: 2px;
}

.mapa-polozka-detail {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: var(--polomer-stredny);
    color: var(--farba-text-tlmeny);
    text-decoration: none;
}

.mapa-polozka-detail:hover { background: var(--farba-zvyraznenie); color: var(--farba-primarna); }

.mapa-hint {
    font-size: 12px;
    color: var(--farba-text-tlmeny);
    background: var(--farba-povrch);
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-pill);
    box-shadow: var(--tien-panel);
    padding: 0.4rem 0.85rem;
}

.mapa-zrusit-vyber {
    font-size: 12px;
    color: #fff;
    background: var(--farba-primarna);
    border: 1px solid var(--farba-primarna);
    border-radius: var(--polomer-pill);
    box-shadow: var(--tien-panel);
    padding: 0.45rem 0.95rem;
    cursor: pointer;
}
.mapa-zrusit-vyber:hover { background: var(--farba-primarna-tmava); }

/* Chipy chránených území (prienik revír ↔ CHÚ). Farby konzistentné s mapovými overlay vrstvami. */
.chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.chip-chranene { color: #2b6a2f; background: #e6f4ea; border-color: #b7e0c0; }
.chip-vchu { color: #2b6a2f; background: #e6f4ea; border-color: #b7e0c0; }
.chip-mchu { color: #b34700; background: #fdece0; border-color: #f5c6a0; }
.chip-uev  { color: #14508f; background: #e4f0fb; border-color: #b3d4f0; }

.chranene-zoznam { list-style: none; margin: 0.3rem 0 0; padding: 0; }
.chranene-zoznam li { padding: 0.3rem 0; border-bottom: 1px solid var(--farba-pozadie); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.chranene-zoznam li:last-child { border-bottom: none; }
.chranene-typ { color: var(--farba-text-tlmeny); font-size: 13px; }
.chranene-kod { color: var(--farba-text-tlmeny); font-size: 12px; font-family: monospace; }

/* Realtime vyhľadávanie revírov (názov aj kód) */
.mapa-hladanie { position: relative; }
.mapa-navrhy {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: var(--farba-povrch);
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-maly);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    z-index: 1100; /* nad Leaflet control (~1000) */
}
.mapa-navrhy li {
    padding: 0.4rem 0.7rem;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--farba-pozadie);
}
.mapa-navrhy li:last-child { border-bottom: none; }
.mapa-navrhy li:hover { background: var(--farba-pozadie); }
.mapa-navrh-kod { color: var(--farba-text-tlmeny); font-size: 13px; }
.mapa-hladaj-hlaska {
    font-size: 13px;
    color: var(--farba-varovanie);
    background: var(--farba-pozadie);
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-maly);
    padding: 0.25rem 0.6rem;
}

/* Vo workspace vypĺňa mapa celú plochu; na ostatných stránkach (lookup) si výšku určí sama. */
.mapa-kontajner {
    height: 100%;
    min-height: 420px;
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-velky);
}

/* Mapa na celú plochu potrebuje kontajner bez zvislých okrajov — inak sa výška nezmestí. */
.container:has(.mapa-plocha) { padding-block: 1.25rem; }

@media (max-width: 1100px) {
    /* Panel pod mapou, nie vedľa nej — pod 1100 px by z mapy ostal pruh. */
    .mapa-plocha {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }

    .mapa-platno { height: 62vh; min-height: 380px; }
    .mapa-panel { max-height: 45vh; }
}

/* Detail mapa (menšia) */
.revir-mapa-kontajner {
    height: 360px;
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-stredny);
}

/* --------------------------------------------------------------------------------------
   GPS lookup (plán 73)
   -------------------------------------------------------------------------------------- */
.lookup-ovladace {
    display: grid;
    grid-template-columns: repeat(3, minmax(140px, 1fr)) auto;
    align-items: end;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

/* Popiska nad poľom — spoločný vzor pre formuláre v novej palete. */
.pole {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 11px;
    color: var(--farba-text-tlmeny);
}

.pole input,
.pole select,
.lookup-ovladace input,
.lookup-ovladace select {
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-stredny);
    background: #f7fafb;
    padding: 0.55rem 0.7rem;
    font-size: 13px;
    color: var(--farba-text);
}

.lookup-akcie {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lookup-ovladace button:disabled { opacity: 0.5; cursor: not-allowed; }

.lookup-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 1rem;
}

@media (max-width: 900px) {
    .lookup-ovladace { grid-template-columns: minmax(0, 1fr); }
    .lookup-layout { grid-template-columns: minmax(0, 1fr); }
}

.lookup-vysledky {
    overflow-y: auto;
    max-height: 70vh;
}

.lookup-prazdne {
    margin: 0;
    color: var(--farba-text-tlmeny);
    font-size: 13px;
}

.lookup-vysledky h2 {
    font-size: 15px;
    color: var(--farba-primarna);
    margin: 1rem 0 0.5rem;
}

.lookup-vysledky h2:first-child { margin-top: 0; }
.lookup-zoznam { list-style: none; padding: 0; margin: 0; }
.lookup-zoznam li { padding: 0.35rem 0; border-bottom: 1px solid var(--farba-okraj); font-size: 14px; }
.lookup-kod { color: var(--farba-text-tlmeny); font-size: 13px; }
.lookup-dist { color: var(--farba-primarna); font-size: 13px; }

/* ===== Geo prompt editor (M4/04) ===== */
.geo-prompt-sekcia { margin-top: 1.5rem; }
.gp-stav {
    font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 12px;
    background: var(--farba-okraj); color: var(--farba-text-tlmeny); vertical-align: middle;
}
.gp-stav-auto_navrh { background: #e8eef5; color: #3a5a7a; }
.gp-stav-na_kontrolu { background: #fdf0d5; color: #8a5a00; }
.gp-stav-overeny { background: #d9f2e3; color: var(--farba-uspech); }
.gp-stav-manual { background: #e4e0f2; color: #5a4a9a; }

.gp-layout { display: grid; grid-template-columns: minmax(280px, 1.4fr) minmax(260px, 1fr); gap: 1rem; }
.gp-mapa { height: 420px; border: 1px solid var(--farba-okraj); border-radius: 8px; }
@media (max-width: 780px) { .gp-layout { grid-template-columns: 1fr; } .gp-mapa { height: 300px; } }

.gp-form { display: flex; flex-direction: column; gap: 0.6rem; position: relative; }
.gp-pole { display: flex; flex-direction: column; gap: 0.2rem; font-size: 13px; color: var(--farba-text-tlmeny); }
.gp-form input[type="text"], .gp-form select, .gp-form textarea {
    padding: 6px 8px; border: 1px solid var(--farba-okraj); border-radius: 6px; font-size: 14px;
    color: var(--farba-text); background: var(--farba-povrch); width: 100%; box-sizing: border-box;
}
.gp-bod { border: 1px solid var(--farba-okraj); border-radius: 6px; padding: 0.5rem 0.7rem; margin: 0; }
.gp-bod legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
.gp-bod label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 13px; color: var(--farba-text-tlmeny); }
.gp-bod-riadok { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.gp-suradnice { font-size: 12px; color: var(--farba-text-tlmeny); font-variant-numeric: tabular-nums; }

.gp-navrhy {
    list-style: none; margin: -0.4rem 0 0; padding: 0; border: 1px solid var(--farba-okraj);
    border-radius: 6px; background: var(--farba-povrch); max-height: 180px; overflow-y: auto;
    position: relative; z-index: 5; box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.gp-navrhy li { padding: 6px 10px; font-size: 14px; cursor: pointer; }
.gp-navrhy li:hover { background: var(--farba-pozadie); }

.gp-akcie { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.3rem; }
.btn {
    padding: 8px 14px; border: 1px solid var(--farba-okraj); border-radius: 6px; cursor: pointer;
    background: var(--farba-povrch); color: var(--farba-text); font-size: 14px;
}
.btn:hover { background: var(--farba-pozadie); }
.btn-primary { background: var(--farba-primarna); color: #fff; border-color: var(--farba-primarna); }
.btn-primary:hover { background: var(--farba-primarna-tmava); }
.gp-pin { padding: 5px 10px; border: 1px solid var(--farba-okraj); border-radius: 6px; background: var(--farba-povrch); cursor: pointer; font-size: 13px; }
.gp-pin.aktivny { background: var(--farba-primarna); color: #fff; border-color: var(--farba-primarna); }

.gp-hlaska { font-size: 13px; padding: 6px 10px; border-radius: 6px; margin: 0; }
.gp-hlaska-ok { background: #d9f2e3; color: var(--farba-uspech); }
.gp-hlaska-chyba { background: #fbe3e1; color: var(--farba-chyba); }

/* Leaflet divIcon značky začiatok/koniec */
.gp-marker { border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.3); }
.gp-marker-zaciatok { background: #2e7d32; }
.gp-marker-koniec { background: #c0392b; }

/* ===== Nastavenia (Nastavenia 01) ===== */
.nastavenia-sekcia { margin: 1.2rem 0 2rem; }
.nastavenia-flash { padding: 0.5rem 0.9rem; border-radius: var(--polomer-maly); margin: 0.5rem 0 1rem; font-size: 14px; }
.nastavenia-flash-ok { background: #d9f2e3; color: var(--farba-uspech); border: 1px solid var(--farba-uspech); }
.nastavenia-flash-chyba { background: #fbe3e1; color: var(--farba-chyba); border: 1px solid var(--farba-chyba); }
.nastavenia-pridaj { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.nastavenia-pridaj input, .nastavenia-pridaj select {
    padding: 0.4rem 0.6rem; border: 1px solid var(--farba-okraj); border-radius: var(--polomer-maly); font-size: 14px;
}
.nastavenia-tabulka td { vertical-align: middle; }
.nastavenia-tabulka tr.stav-neaktivny { opacity: 0.55; }
.nastavenia-tabulka .ja { color: var(--farba-primarna); font-size: 12px; }
.nastavenia-akcie { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.inline-form { display: inline-flex; gap: 0.3rem; align-items: center; margin: 0; }
.inline-form select, .inline-form input {
    padding: 0.3rem 0.5rem; border: 1px solid var(--farba-okraj); border-radius: var(--polomer-maly); font-size: 13px;
}

/* Správa API kľúčov (plán 11) */
.chip-dev  { color: #b34700; background: #fdece0; border-color: #f5c6a0; }
.chip-prod { color: #14508f; background: #e4f0fb; border-color: #b3d4f0; }
.kluc-expiruje { color: #8a6100; font-weight: 600; }        /* platnosť do 14 dní */
.kluc-expirovany { color: var(--farba-chyba); font-weight: 600; }
.uzke-pole { width: 5.5rem; }
.kluc-kontakt { color: var(--farba-text-tlmeny, #666); }

/* Účel revíru v lookupe (plán 12) — na chovnom sa loviť nesmie, nech to je vidieť */
.chip-lovny { color: #2b6a2f; background: #e6f4ea; border-color: #b7e0c0; }
.chip-nelovny { color: #b3261e; background: #fce8e6; border-color: #f5b5b0; }
.lookup-charakter { color: var(--farba-text-tlmeny, #666); font-size: 13px; }
.kluc-form input[type="number"] { width: 8rem; }
.nastavenia-tabulka .inline-form { margin-bottom: 0.25rem; }

/* Nový API kľúč — plaintext zobrazený raz */
.novy-kluc-box {
    background: #fff8e6; border: 1px solid var(--farba-varovanie); border-radius: var(--polomer-maly);
    padding: 0.8rem 1rem; margin: 0.5rem 0 1rem;
}
.novy-kluc { display: block; margin-top: 0.5rem; font-family: monospace; font-size: 14px;
    word-break: break-all; background: var(--farba-povrch); padding: 0.4rem 0.6rem; border-radius: var(--polomer-maly); }

/* UI štýly máp (Nastavenia 03) */
.ui-styly { display: flex; flex-direction: column; gap: 0.5rem; max-width: 420px; }
.ui-styl-riadok { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 14px; }
.ui-styl-popis { color: var(--farba-text); }
.ui-styl-riadok input[type="color"] { width: 48px; height: 30px; border: 1px solid var(--farba-okraj); border-radius: var(--polomer-maly); cursor: pointer; }
.ui-styl-riadok input[type="number"] { width: 80px; padding: 0.3rem 0.5rem; border: 1px solid var(--farba-okraj); border-radius: var(--polomer-maly); }

/* Report porovnania so zdrojom (plán 17) */
.beh-diff td { background: #f8f9fa; }
.diff-varovanie { color: #b3261e; }

/* Verejná mapa (plán 18) */
.auth-verejny-odkaz { margin-top: 1.25rem; font-size: 14px; color: var(--farba-text-tlmeny); text-align: center; }
/* --------------------------------------------------------------------------------------
   Verejná mapa (plán 73)
   -------------------------------------------------------------------------------------- */
/* Obsah lišty je vycentrovaný ako celok: značka, hľadanie a poloha tvoria jednu skupinu
   v strede, nie tri prvky roztiahnuté od okraja k okraju. */
.verejna-lista {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: var(--farba-povrch);
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-velky);
    box-shadow: var(--tien-panel);
    padding: 0.75rem 1.1rem;
    margin-bottom: 0.85rem;
}

.verejna-znacka {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--farba-text);
}

.verejna-znacka b { font-size: 15px; letter-spacing: 0.16em; }

.verejna-znacka small {
    display: block;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--farba-primarna);
}

.verejna-lista .mapa-hladanie {
    /* V lište je hľadanie súčasťou toku, nie plávajúci prvok nad mapou. */
    position: static;
    box-shadow: none;
}


.verejna-plocha {
    position: relative;
    height: calc(100vh - 13rem);
    min-height: 420px;
}

.verejna-plocha .mapa-nastroje {
    top: 0.9rem;
    left: 0.9rem;
    right: 0.9rem;
}

.verejna-noha {
    margin-top: 1rem;
    font-size: 12px;
    color: var(--farba-text-tlmeny);
}

.verejna-noha p { max-width: var(--sirka-textu); margin: 0 0 0.4rem; }

/* Značka ekosystému v pätičke. Odkaz vedie na xandraone.com, teda von z aplikácie. */
.powered-by {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.powered-by a {
    display: inline-flex;
    /* Bez tohto by odkaz okolo obrázka mal podčiarknutie pod celou jeho šírkou. */
    line-height: 0;
}

/* Značka v pätičke má byť poznámka, nie druhé logo stránky. */
.powered-by .xandra-logo { width: 28px; }

/* --------------------------------------------------------------------------------------
   Lišta mapy na telefóne — tri riadky pod sebou

   ⚠️ Do jedného riadku sa štyri prvky nezmestia. Keď v ňom stáli spolu, filter (139 px)
   a ikona polohy (42 px) stlačili pole hľadania pri 360 px okne na **73 px** a text v ňom
   pretiekol. Preto: značka, potom hľadanie s ikonou, a filter na vlastnom riadku.
   -------------------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .verejna-lista { gap: 0.55rem 0.5rem; padding: 0.7rem 0.8rem; }
    .verejna-znacka { width: 100%; justify-content: center; }

    .verejna-lista .mapa-hladanie {
        /* `flex: 1` a nie `width: 100%` — vedľa musí ostať miesto na ikonu polohy. */
        flex: 1;
        /* Pod túto hranicu sa pole stlačiť nesmie, inak je v ňom vidieť dve písmená. */
        min-width: 10rem;
        width: auto;
    }

    /* Filter na vlastný riadok cez celú šírku — je to prepínač obsahu mapy, nie ovládací
       prvok hľadania, takže vedľa neho nemá čo stáť. */
    .prepinac-srz {
        width: 100%;
        justify-content: center;
    }

    .verejna-plocha { height: 62vh; }
}

/* Filter „iba SRZ Rada" v lište mapy. */
.prepinac-srz {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
    background: var(--farba-povrch);
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-pill);
    padding: 0.45rem 0.9rem;
    font-size: 12px;
    color: var(--farba-text);
    cursor: pointer;
    white-space: nowrap;
}

.prepinac-srz input { accent-color: var(--farba-primarna); cursor: pointer; }

/* Zapnutý filter je vidieť aj bez čítania textu — je to obmedzenie toho, čo mapa ukazuje. */
.prepinac-srz:has(input:checked) {
    background: var(--farba-zvyraznenie);
    border-color: #9ecfda;
    color: var(--farba-primarna);
}

/* Okrúhle tlačidlo len s ikonou — text by na telefóne ukrojil zo šírky hľadania. */
.tlacidlo-ikona {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: var(--farba-povrch);
    border: 1px solid var(--farba-okraj);
    border-radius: 50%;
    font-size: 18px;
    color: var(--farba-text);
    cursor: pointer;
}

.tlacidlo-ikona:hover { border-color: var(--farba-primarna); color: var(--farba-primarna); }

/* Stavy geolokácie nesie farba a `title`, nie text — na ikone nie je miesto. */
.tlacidlo-ikona.pracuje { color: var(--farba-primarna); border-color: var(--farba-primarna); }
.tlacidlo-ikona.zlyhalo { color: var(--farba-chyba); border-color: var(--farba-chyba); }

/* Konfigurovateľné dlaždice (plán 23) — URL potrebuje viac miesta než farba */
.ui-styl-url { width: 26rem; max-width: 100%; padding: 0.35rem 0.5rem; border: 1px solid var(--farba-okraj); border-radius: var(--polomer-maly); }

/* --------------------------------------------------------------------------------------
   Bublina revíru na mape (plán 37) — spoločná pre verejnú aj administračnú mapu.
   -------------------------------------------------------------------------------------- */

/* Bublina je po pridaní podrobností vyššia než obrazovka na telefóne. Bez stropu sa
   Leaflet popup roztiahne a jeho spodok skončí mimo viewportu — vrátane tlačidla „Menej". */
.bublina { max-height: 60vh; overflow-y: auto; }

.bublina-detail { margin-top: 0.4rem; }

.bublina-stav { margin: 0.3rem 0 0; color: var(--farba-text-tlmeny); font-size: 0.85em; }

.bublina-miesto { margin: 0.3rem 0 0; color: var(--farba-text-tlmeny); font-size: 0.9em; }

.bublina-zrusene {
    margin: 0.3rem 0 0;
    padding: 0.2rem 0.4rem;
    border-left: 3px solid var(--farba-chyba);
    background: #fdecea;
    color: var(--farba-chyba);
    font-size: 0.85em;
}

.bublina-viac {
    margin-top: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--farba-primarna);
    font: inherit;
    font-size: 0.85em;
    cursor: pointer;
    text-decoration: underline;
}

.bublina-riadok { margin: 0.15rem 0 0; font-size: 0.85em; }
.bublina-popis { display: inline-block; min-width: 6.5rem; color: var(--farba-text-tlmeny); }

.bublina-nadpis {
    margin: 0.5rem 0 0.1rem;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--farba-text-tlmeny);
}

/* `popis` z registra nesie zalomenia. Rieši ich CSS, NIE nahrádzanie \n za <br> v JS —
   to by si vyžiadalo innerHTML nad voľným textom z importu, teda XSS. */
.bublina-text { margin: 0; font-size: 0.85em; white-space: pre-line; }

.bublina-chranene { margin: 0.1rem 0 0; padding-left: 1.1rem; font-size: 0.85em; }

.bublina-odkaz { display: inline-block; margin-top: 0.5rem; font-size: 0.85em; }

/* Rozsah API kľúča. `sync` je výrazný zámerne — je to kľúč, ktorý vidí celý register,
   takže v zozname nemá splynúť s bežnými čítacími (plán 65). */
.chip-citanie {
    background: var(--farba-pozadie);
    color: var(--farba-text-tlmeny);
    border: 1px solid var(--farba-okraj);
}

.chip-sync {
    background: #fdf0d5;
    color: #8a5a00;
    border: 1px solid #e6c88a;
    font-weight: 600;
}

/* Formulár s poliami a pomôckami: popiska + vstup + pomôcka pod ním (plán 67).
   Mriežka, nie rad — pomôcky potrebujú šírku a jeden riadok by ich zlepil.
   Používa ho formulár API kľúčov aj pridávanie spriatelenej inštancie (plán 71): dva
   vzhľadovo odlišné formuláre na tej istej stránke administrácie sú chyba samy o sebe. */
.kluc-form .polia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.kluc-form .pole {
    display: flex;
    flex-direction: column;
}

.kluc-form .pole label {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.kluc-form .pole label abbr {
    color: var(--farba-chyba, #b3261e);
    text-decoration: none;
    cursor: help;
}

.kluc-form .pole input {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-maly);
    font-size: 15px;
    width: 100%;
}

/* Pomôcka ostáva na obrazovke aj počas písania — v tom je celý rozdiel oproti placeholderu. */
.kluc-form .pomocka {
    margin-top: 0.3rem;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--farba-text-tlmeny);
}

.kluc-form .pomocka code {
    font-size: 12px;
}

/* Text ostáva úzky, aj keď je stránka široká (plán 68). Roztiahnutá veta cez 1560 px sa číta
   zle — a práve preto bol obsah pôvodne stlačený do 1100 px. Široké majú byť tabuľky. */
.container > p,
.admin-info,
.popis,
.nastavenia-sekcia > p {
    max-width: var(--sirka-textu);
}

/* Akcie v tabuľke držia riadok, kým je na ne miesto. Predtým sa lámali pod seba a riadok
   narástol do výšky — pri troch tlačidlách (Overiť / Porovnať / Odstrániť) trojnásobne. */
.tabulka td.akcie,
.nastavenia-tabulka td:last-child {
    white-space: nowrap;
}

.tabulka td.akcie {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

/* Pod týmto bodom už tlačidlá vedľa seba nedávajú zmysel — nech sa zalomia samy. */
@media (max-width: 1100px) {
    .tabulka td.akcie,
    .nastavenia-tabulka td:last-child {
        white-space: normal;
    }
}

/* ---------------------------------------------------------------------------
   Úzke okná: nič nesmie pretekať vodorovne (plán 68).

   Namerané PRED zmenou šírky, teda ide o starší stav, nie o jej následok:
   pri 1024 px presahovala stránka o 12 px, pri 800 px o 236 px a pri 480 px o 528 px.
   Vinníci boli dvaja — blok používateľa v hlavičke (e-mail + rola + Odhlásiť v jednom
   nezalomiteľnom riadku) a tabuľky, ktoré sú širšie než úzka obrazovka.
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    /* Na úzkej obrazovke je 92 % plytvanie — okraje už dáva padding kontajnera.
       Pri 792 px šlo o 63 px navyše, ktoré tabuľke chýbali. */
    :root {
        --sirka-obsahu: 100%;
    }

}

/* Tabuľka sa nezmestí a stlačiť sa nedá bez toho, aby sa stala nečitateľnou.
   Dostane teda vlastný vodorovný posuv — posúva sa ONA, nie celá stránka.

   ⚠️ Hranica bola 1024 px a s bočným panelom prestala stačiť: panel ubral 250 px, takže pri
   okne 1280 px ostalo obsahu 1030 px a tabuľka kľúčov (1127 px) pretekala o 94 px. Meria sa
   preto **obsahová plocha**, nie okno — 1400 px okna je zhruba 1150 px obsahu.

   Aj `.nastavenia-tabulka`: pretekala práve tá a pôvodné pravidlo sa jej netýkalo. */
@media (max-width: 1400px) {
    .tabulka,
    .nastavenia-tabulka {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tabulka thead,
    .tabulka tbody,
    .nastavenia-tabulka thead,
    .nastavenia-tabulka tbody {
        display: table;
        width: 100%;
        min-width: 46rem;
    }
}

/* --------------------------------------------------------------------------------------
   Bočný panel na úzkych oknách (plán 73)

   Tri stavy podľa prototypu: plný panel, úzky ikonový, skrytý. Prototyp však nerieši, ako sa
   k navigácii dostať, keď je skrytá — preto tlačidlo v hornej lište a `:target`, teda bez JS.
   -------------------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    :root {
        --sirka-bocneho-panela: 76px;
    }

    /* Ostanú ikony. Text sa needituje na `display:none`, lebo by zmizol aj pre čítačky
       obrazovky — schová sa vizuálne, prístupnosť ostáva. */
    .admin-nav a > span:not(.admin-nav-ikona),
    .admin-nav-skupina,
    .admin-nav-pocet,
    .admin-user-kto,
    .admin-logout button span:not(.admin-nav-ikona),
    .admin-logo small {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .admin-nav a { justify-content: center; }
    .admin-logo { justify-content: center; padding-inline: 0; }
    .xandra-logo { width: 48px; }
    .admin-user { flex-direction: column; gap: 0.4rem; padding: 0.6rem 0.3rem; }
    .admin-topbar { padding-inline: 1.1rem; }
}

@media (max-width: 767px) {
    .admin-shell { grid-template-columns: minmax(0, 1fr); }

    /* Panel sa vysunie sprava doľava až po kliknutí na tlačidlo v lište. */
    .admin-bocny {
        position: fixed;
        z-index: 30;
        inset: 0 auto 0 0;
        width: 250px;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: var(--tien-vyvyseny);
    }

    /* `:target` = otvorené. Bez JS, takže funguje aj keď sa skript nenačíta. */
    .admin-bocny:target { transform: none; }

    .admin-bocny:target ~ .admin-shell-obsah .admin-nav-prepinac { visibility: hidden; }

    /* V otvorenom paneli sa texty vrátia — je široký 250 px, je na ne miesto. */
    .admin-bocny:target .admin-nav a > span,
    .admin-bocny:target .admin-nav-skupina,
    .admin-bocny:target .admin-nav-pocet,
    .admin-bocny:target .admin-user-kto,
    .admin-bocny:target .admin-logout button span,
    .admin-bocny:target .admin-logo small {
        position: static;
        width: auto;
        height: auto;
        clip-path: none;
    }

    .admin-bocny:target .admin-nav a { justify-content: flex-start; }
    .admin-bocny:target .admin-logo { justify-content: flex-start; padding-inline: 0.75rem; }
    .admin-bocny:target .xandra-logo { width: 58px; }
    .admin-bocny:target .admin-user { flex-direction: row; padding: 0.75rem; }

    .admin-nav-prepinac { display: block; }
    .admin-bocny:target .admin-bocny-zavri { display: block; }
    .admin-topbar { padding-inline: 0.9rem; gap: 0.9rem; }

    /* Vysunutý panel prekrýva obsah — stmavenie hovorí, že zvyšok stránky teraz nie je
       na rade. `position: fixed` na pseudoprvku, takže nepotrebuje ďalší element. */
    .admin-bocny:target::after {
        content: "";
        position: fixed;
        inset: 0 0 0 250px;
        background: rgba(21, 48, 71, 0.35);
        z-index: -1;
    }

}

/* Odosielacie tlačidlo formulára. Bez tohto malo 52 × 21 px a vyzeralo ako nenápadný odkaz
   na konci riadku — používateľ ho prehliadol a hlásil, že „nemá možnosť uložiť" (plán 71). */
.kluc-form button[type="submit"] {
    margin-top: 0.25rem;
    padding: 0.55rem 1.1rem;
    background: var(--farba-primarna);
    color: #fff;
    border: 0;
    border-radius: var(--polomer-maly);
    font-size: 15px;
    cursor: pointer;
}

.kluc-form button[type="submit"]:hover {
    background: var(--farba-primarna-tmava);
}

/* Rozbaľovacie pole v formulári s pomôckami — rovnaký vzhľad ako textové vstupy (plán 72). */
.kluc-form .pole select {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-maly);
    font-size: 15px;
    width: 100%;
    background: #fff;
}

/* Ovládanie prenosu nad tabuľkou aj pod ňou (plán 72). Zoznam rozdielov máva stovky riadkov
   a s tlačidlami len na konci sa po výbere hore muselo skrolovať dole. */
.prenos-tlacidla {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0.75rem 0;
}

.prenos-tlacidla button {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-maly);
    background: var(--farba-povrch);
    cursor: pointer;
}

.prenos-tlacidla button:hover {
    border-color: var(--farba-primarna);
    color: var(--farba-primarna);
}

/* Prenesený riadok v zozname rozdielov — po dávke sa odznačí a stlmí, aby bolo na prvý pohľad
   vidno, čo je vybavené a čo ešte čaká (plán 72). */
#rozdiely-telo tr.prenesene {
    opacity: 0.55;
}

#rozdiely-telo tr.prenesene td:nth-child(3) {
    color: var(--farba-uspech);
    font-weight: 500;
}

/* Zjednotenie je akcia, ktorá zapisuje na oboch stranách — nesmie splynúť s „ukázať". */
button.zjednot {
    border-color: var(--farba-primarna);
    color: var(--farba-primarna);
}

/* Riadok priebehu zjednotenia — vsunie sa pod tabuľku, ktorej sa prenos týka.
   Predtým šiel stav len do blokov pri zozname rozdielov, a tie sú pri zjednotení skryté;
   celý prenos tak prebehol bez jediného slova na obrazovke (plán 72). */
#porovnanie-telo tr.prenos-riadok td {
    background: var(--farba-pozadie-jemne, rgba(0, 0, 0, 0.03));
    border-left: 3px solid var(--farba-primarna);
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
}

/* --------------------------------------------------------------------------------------
   Verejná úvodná stránka (plán 73, task 8)
   -------------------------------------------------------------------------------------- */
.uvod-nav {
    display: flex;
    gap: 1.25rem;
    margin-left: auto;
}

.uvod-nav a {
    font-size: 13px;
    color: var(--farba-text-tlmeny);
    text-decoration: none;
}

.uvod-nav a:hover { color: var(--farba-primarna); }

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 2.5rem;
    padding: 3rem 0 3.5rem;
}

.hero-nadnadpis {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-size: 10px;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--farba-primarna);
}

.hero-nadnadpis i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--farba-akcent);
}

.hero-text h1 {
    margin: 0 0 1rem;
    font-size: clamp(44px, 5.5vw, 84px);
    line-height: 0.95;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.hero-text h1 em {
    font-style: normal;
    color: var(--farba-primarna);
}

.hero-uvod {
    margin: 0 0 1.75rem;
    max-width: 34rem;
    font-size: 17px;
    color: #526b7b;
}

.hero-akcie {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 2.5rem;
}

.hero-cisla {
    display: flex;
    flex-wrap: wrap;
    gap: 2.25rem;
    margin: 0;
    padding: 1.1rem 1.35rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--polomer-velky);
    width: fit-content;
}

.hero-cisla dt {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
}

.hero-cisla dd {
    margin: 0.2rem 0 0;
    font-size: 12px;
    color: var(--farba-text-tlmeny);
}

.hero-mapa {
    position: relative;
    display: block;
    border-radius: var(--polomer-velky);
    overflow: hidden;
    box-shadow: var(--tien-vyvyseny);
    text-decoration: none;
}

.hero-mapa #nahlad-mapa { height: 460px; }

.hero-mapa-popis {
    position: absolute;
    z-index: 500;
    left: 1rem;
    bottom: 1rem;
    background: var(--farba-povrch);
    border-radius: var(--polomer-pill);
    padding: 0.5rem 1.1rem;
    font-size: 13px;
    font-weight: 600;
    color: var(--farba-primarna);
    box-shadow: var(--tien-panel);
}

.uvod-kroky {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    background: #e8f5f7;
    border-radius: var(--polomer-velky);
    padding: 2.25rem;
}

.uvod-kroky-uvod h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.15;
}

.uvod-kroky article span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--farba-primarna);
    margin-bottom: 0.5rem;
}

.uvod-kroky article b { display: block; margin-bottom: 0.35rem; }

.uvod-kroky article p {
    margin: 0;
    font-size: 13px;
    color: #4c6674;
}

.uvod-data {
    padding: 2.5rem 0 1rem;
    max-width: var(--sirka-textu);
}

.uvod-data h2 { margin: 0 0 0.9rem; }
.uvod-data p { margin: 0 0 0.85rem; }

/* Tá istá vec ako `.verejna-upozornenie` na mape — právne podstatné, teda viditeľné. */
.uvod-upozornenie {
    background: #fff6ec;
    border: 1px solid #f2dcc4;
    border-left: 3px solid var(--farba-varovanie);
    border-radius: var(--polomer-stredny);
    padding: 0.75rem 1rem;
    color: #7d5218;
    font-size: 14px;
}

@media (max-width: 980px) {
    .hero { grid-template-columns: minmax(0, 1fr); padding-top: 2rem; }
    .hero-mapa #nahlad-mapa { height: 300px; }
    .uvod-kroky { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .uvod-kroky { grid-template-columns: minmax(0, 1fr); padding: 1.5rem; }
    .hero-cisla { gap: 1.5rem; }
}

/* --------------------------------------------------------------------------------------
   Posuvník priblíženia na mape

   Leží NA mape vpravo dole — ovládanie zoomu je vľavo dole, takže si neprekážajú.
   -------------------------------------------------------------------------------------- */
.zoom-posuvnik {
    position: absolute;
    z-index: 500;
    right: 1rem;
    bottom: 1.6rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--farba-povrch);
    border: 1px solid var(--farba-okraj);
    border-radius: var(--polomer-pill);
    box-shadow: var(--tien-panel);
    padding: 0.45rem 0.9rem;
    font-size: 11px;
    color: var(--farba-text-tlmeny);
}

.zoom-posuvnik input[type="range"] {
    width: 150px;
    accent-color: var(--farba-primarna);
    cursor: pointer;
}

/* Pod zoomom 9 sa revíry nekreslia — posuvník to povie skôr, než sa človek začne diviť. */
.zoom-posuvnik input.pod-hranicou { accent-color: var(--farba-varovanie); }

.zoom-posuvnik output {
    min-width: 1.6rem;
    text-align: center;
    font-weight: 700;
    color: var(--farba-text);
    font-size: 13px;
}

/* Na telefóne sa posuvník zmenší a popiska vypadne — číslo zoomu ostáva, lebo hranica
   načítania revírov (9) je práve to, čo človek potrebuje vidieť. */
@media (max-width: 620px) {
    .zoom-posuvnik {
        left: 0.8rem;
        right: 0.8rem;
        /* NAD tlačidlami `+`/`−`, nie vedľa nich — na 390 px širokom displeji sa
           prekrývali. Hodnota je ich výška (72 px) plus odsadenie. */
        bottom: 5.6rem;
        justify-content: space-between;
        padding: 0.4rem 0.8rem;
    }

    .zoom-posuvnik label { display: none; }
    .zoom-posuvnik input[type="range"] { flex: 1; width: auto; }
}