/* =====================================================================
   Rozvrhy SPU -- vzhľad podľa Univerzitného informačného systému SPU.

   Odčítané z predlohy:
   - biela stránka, pod hlavičkou plný svetlozelený pás
   - drobkový pruh a panely na svetlosivom podklade so zaoblenými rohmi
   - nadpisy čiernym tučným písmom s tenkou linkou pod nimi
   - odkazy zelené, dôležité tučné
   - tabuľky: záhlavie modrosivé s bielymi medzerami medzi bunkami,
     riadky striedavo biele a svetlosivé, bez zvislých liniek
   - tlačidlá svetlosivé so zaoblením, polia so žltkastým podkladom
   - rozvrhová mriežka: sivé záhlavie časov, modrosivý stĺpec dní,
     pastelové bloky hodín s modrým textom a učiteľom kurzívou
   ===================================================================== */

:root {
    --zelena:        #a3c261;   /* pás pod hlavičkou */
    --zelena-tmava:  #8ab048;
    --odkaz:         #45913a;   /* zelené odkazy */
    --odkaz-tmavy:   #2f6b28;

    --papier:        #ffffff;
    --panel:         #ffffff;
    --panel-sivy:    #f2f3f4;   /* drobkový pruh a panely */
    --tlacidlo:      #edeff3;   /* podklad tlačidiel */
    --tlacidlo-tmave:#e3e6eb;
    --tlacidlo-linka:#d7dade;
    --atrament:      #1a1a1a;
    --tichy:         #666e76;
    --linka:         #d3d7db;
    --linka-jemna:   #e3e6e9;

    --zahlavie:      #dbe4e9;   /* záhlavie tabuliek a stĺpec dní */
    --riadok-parny:  #eaedf0;
    --pole-zvyraz:   #fdf8dd;   /* žltkasté vstupné pole */

    --modra-text:    #1c3f9c;   /* texty v rozvrhovej mriežke */
    --info:          #dceeff;
    --info-linka:    #a9c9e8;
    --info-text:     #1f5c9e;
    --uspech:        #e7f4de;
    --uspech-linka:  #93c47d;
    --uspech-text:   #3d8b2e;
    --pozor:         #fdf4e0;
    --pozor-linka:   #e2c07a;
    --pozor-text:    #8a5a12;
    --vystraha:      #fbeae7;
    --vystraha-linka:#e0a99f;
    --vystraha-text: #a5301c;
    --blok:          #6b3f96;

    --vyska-pola:    35px;   /* jednotná výška vstupných polí a výberov */
    --sirka-popisu:  104px;
    --sirka-slotu:   46px;
    --vyska-drahy:   56px;

    --pismo: "Open Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --pismo-cisla: "Segoe UI", system-ui, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--papier);
    color: var(--atrament);
    font-family: var(--pismo);
    font-size: 14px;
    line-height: 1.55;
}

a { color: var(--odkaz); text-decoration: none; }
a:hover { color: var(--odkaz-tmavy); text-decoration: underline; }

/* --- hlavička: značka, zelený pás, drobkový pruh ---------------------- */

.hlavicka { position: sticky; top: 0; z-index: 30; background: var(--panel); }

/* 1. biely pás so značkou */
.hlavicka-vrch {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; padding: 10px 20px 12px;
}
/* Kým v adresári assets nie je logo, stojí tu iba textová značka.
   Nekreslím k nej žiadny náhradný obrazec -- pôsobil by ako nedokončená
   výplň namiesto loga. */
.znacka { display: flex; align-items: flex-start; gap: 12px; }
.znacka-nazov {
    font-size: 27px; font-weight: 700; color: #5c5f63;
    line-height: 1; letter-spacing: -0.01em; align-self: flex-start;
}
.znacka-podnazov { font-size: 12px; color: #85898e; line-height: 1.35; }

.hlavicka-meta {
    display: flex; align-items: center; gap: 14px;
    font-size: 13px; color: #55595e; padding-top: 2px;
}
.meta-datum, .meta-cas { font-variant-numeric: tabular-nums; }
.meta-nazov { font-weight: 600; color: #3f4347; }

/* 2. zelený pás s prihláseným používateľom */
.hlavicka-pas {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: var(--zelena); color: #fff;
    padding: 6px 20px; font-size: 13.5px;
}
.hlavicka-pas a { color: #fff; text-decoration: underline; }
.hlavicka-pas a:hover { color: #fff; text-decoration: none; }
.prihlaseny strong { font-weight: 700; }
.rola {
    display: inline-block; margin-left: 6px; padding: 0 6px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 3px;
}
.pas-stred { flex: 1; display: flex; justify-content: center; gap: 18px; align-items: center; }
.pas-vpravo { display: flex; gap: 16px; align-items: center; }
.pas-odhlasit { font-weight: 600; }

.vyber-obdobia { display: flex; align-items: center; gap: 8px; }
.vyber-obdobia label { margin: 0; font-weight: 600; font-size: 13.5px; }
.vyber-obdobia select {
    width: auto; height: 26px; padding: 0 6px; font-size: 13px;
    border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 4px;
    background: rgba(255, 255, 255, 0.92);
}
.obdobie-nazov { font-weight: 600; }

/* 3. sivý drobkový pruh s navigáciou */
.navigacia {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 2px;
    background: var(--panel-sivy); padding: 0 20px;
    border-bottom: 1px solid var(--linka);
}
.navigacia a {
    display: flex; align-items: center; padding: 9px 13px;
    color: var(--odkaz); font-size: 13.5px; text-decoration: none;
}
.navigacia a:hover { background: #e7e9eb; color: var(--odkaz-tmavy); text-decoration: none; }
.navigacia a.aktivna { color: var(--atrament); font-weight: 700; background: var(--panel); }
.navigacia .domov { color: #3f4347; padding: 9px 8px 9px 0; }
.navigacia .domov:hover { background: none; color: var(--odkaz); }
.navigacia-sipka { display: flex; align-items: center; color: #9aa0a6; padding-right: 6px; }

.odkaz-tichy { color: var(--odkaz); }
.odkaz-nebezpecny {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; color: var(--vystraha-text); text-decoration: underline;
}

/* --- obsah ------------------------------------------------------------ */

.obsah { max-width: 1600px; margin: 0 auto; padding: 18px 20px 40px; }

.zahlavie-stranky {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    border-bottom: 1px solid var(--linka); padding-bottom: 8px; margin-bottom: 18px;
}
h1 { font-size: 20px; margin: 0; font-weight: 700; }
h2 { font-size: 15px; margin: 0 0 10px; font-weight: 700; }

.poznamka { color: var(--tichy); font-size: 13px; margin: 6px 0; }
.tichy { color: var(--tichy); }
.napoveda { color: var(--tichy); font-weight: 400; font-size: 12px; }
.zvyraznene { color: var(--blok); font-weight: 700; }
.cisla { font-variant-numeric: tabular-nums; }
code {
    font-family: Consolas, "Courier New", monospace; font-size: 12.5px;
    background: var(--panel-sivy); border: 1px solid var(--linka-jemna);
    border-radius: 3px; padding: 0 4px;
}

/* --- hlásky ----------------------------------------------------------- */

.hlaska {
    padding: 10px 14px; margin-bottom: 8px; font-size: 13.5px; font-weight: 600;
    border: 1px solid var(--linka); border-radius: 5px;
    background: var(--panel-sivy);
}
.hlaska-info      { background: var(--info);      border-color: var(--info-linka);      color: var(--info-text); }
.hlaska-uspech    { background: var(--uspech);    border-color: var(--uspech-linka);    color: var(--uspech-text); }
.hlaska-varovanie { background: var(--pozor);     border-color: var(--pozor-linka);     color: var(--pozor-text); }
.hlaska-chyba     { background: var(--vystraha);  border-color: var(--vystraha-linka);  color: var(--vystraha-text); }

/* --- panely ----------------------------------------------------------- */

.karta {
    background: var(--panel); border: 1px solid var(--linka);
    border-radius: 6px; padding: 14px 16px; margin-bottom: 16px;
}
.karta > h2:first-child {
    margin: -14px -16px 14px; padding: 8px 16px;
    background: var(--panel-sivy); border-bottom: 1px solid var(--linka);
    border-radius: 6px 6px 0 0;
}
.karta-uzka { max-width: 720px; }
.karta-periodicita { border-left: 3px solid var(--blok); }
.karta-kopirovanie { max-width: 880px; border-left: 3px solid var(--zelena-tmava); }
.karta-kopirovanie .formular-v-riadku { align-items: center; }
.karta-kopirovanie label { margin: 0; }

.dvojstlpec { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.formular { max-width: 900px; }
.formular-uzky { max-width: 460px; }
.formular-mazania { margin-top: 18px; }
.formular-v-riadku { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; }
.formular-v-riadku input, .formular-v-riadku select { width: auto; }

/* --- formulárové prvky ------------------------------------------------ */

.pole { margin-bottom: 13px; }
.pole-dvojica { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pole-trojica { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.pole-zaskrtavatka { display: flex; flex-direction: column; justify-content: flex-end; }

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=search], input[type=file], select, textarea {
    width: 100%; padding: 6px 9px;
    border: 1px solid var(--linka); border-radius: 4px;
    font-family: var(--pismo); font-size: 13.5px;
    background: var(--panel); color: var(--atrament);
}

/* Výšku určujem pevne, aby polia, výbery a combobox sedeli na rovnakej
   linke. Dopočítaná výška sa medzi prehliadačmi líši o pár pixelov a v
   paneli filtrov by sa to prejavilo rozhodenými popismi. */
input[type=text], input[type=password], input[type=number], input[type=date],
input[type=search], select:not([multiple]) {
    height: var(--vyska-pola);
}

/* Vyhľadávacie pole si v prehliadačoch na WebKite drží vlastný natívny
   vzhľad a zadanú výšku aj výplň ignoruje -- v paneli filtrov potom
   vytŕčalo nad ostatné polia. Natívny vzhľad preto vypínam. */
input[type=search] {
    -webkit-appearance: none;
    appearance: none;
}
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}
select[multiple] { padding: 3px; height: auto; }
textarea { height: auto; }
textarea { font-family: Consolas, "Courier New", monospace; font-size: 12.5px; resize: vertical; }

input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
    outline: 2px solid var(--zelena-tmava); outline-offset: 1px;
}

fieldset { border: 1px solid var(--linka); border-radius: 5px; padding: 12px; }
legend { font-size: 13px; font-weight: 600; padding: 0 6px; }

.zaskrtavatko {
    display: flex; align-items: flex-start; gap: 8px;
    font-weight: 400; font-size: 13.5px; margin-bottom: 7px; cursor: pointer;
}
.zaskrtavatko input { margin-top: 3px; }
.zaskrtavatko-vystrazne { color: var(--vystraha-text); }

.volba { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-bottom: 6px; cursor: pointer; }
.volba-navyse span { color: var(--blok); font-weight: 700; }

/* --- tlačidlá --------------------------------------------------------- */

.tlacidlo {
    display: inline-block; padding: 9px 17px;
    border: 1px solid var(--tlacidlo-linka); border-radius: 7px;
    background: var(--tlacidlo); color: var(--atrament);
    font-family: var(--pismo); font-size: 14px; font-weight: 400;
    line-height: 1.3; text-decoration: none; cursor: pointer;
}
.tlacidlo:hover {
    background: var(--tlacidlo-tmave); border-color: #c8ccd2;
    color: var(--atrament); text-decoration: none;
}
.tlacidlo:active { background: #dfe2e7; }
/* Predloha nepozná farebné tlačidlá -- všetky sú rovnako svetlosivé.
   Hlavná akcia sa odlišuje len tučnejším rezom, nebezpečná farbou písma. */
.tlacidlo-hlavne { font-weight: 700; }
.tlacidlo-nebezpecne { color: var(--vystraha-text); }
.tlacidlo-nebezpecne:hover { background: var(--vystraha); border-color: var(--vystraha-linka); }
.tlacidlo-drobne { padding: 4px 10px; font-size: 13px; border-radius: 5px; }

.lista-akcii { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.oddelovac { flex: 1; }

/* --- panel filtrov ---------------------------------------------------- */

.panel-filtrov {
    display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
    background: var(--panel-sivy); border: 1px solid var(--linka);
    border-radius: 6px; padding: 12px 14px; margin-bottom: 16px;
}
.panel-filtrov label { margin-bottom: 0; }
.panel-filtrov select, .panel-filtrov input { min-width: 160px; background: var(--panel); }

/* Všetko v paneli má rovnakú výšku, vrátane tlačidiel -- inak sa popisy
   nad poľami rozídu, lebo panel zarovnáva prvky k spodnej hrane. */
.panel-filtrov input, .panel-filtrov select:not([multiple]) { height: var(--vyska-pola); }
.panel-filtrov .tlacidlo {
    display: inline-flex; align-items: center;
    height: var(--vyska-pola); padding: 0 16px;
}
.panel-filtrov .siroky select, .panel-filtrov .siroky input { min-width: 300px; }
.panel-filtrov .vyber { min-width: 340px; }
.panel-filtrov .vyber-pole input.vyber-vstup { min-width: 60px; }

/* --- tabuľky ---------------------------------------------------------- */

.tabulka { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.tabulka th {
    text-align: left; font-size: 13px; font-weight: 700; color: var(--atrament);
    background: var(--zahlavie); padding: 7px 11px;
    border-right: 2px solid var(--panel); border-bottom: 2px solid var(--panel);
}
.tabulka th:last-child { border-right: 0; }
.tabulka td { padding: 7px 11px; vertical-align: top; }
.tabulka tbody tr:nth-child(even) { background: var(--riadok-parny); }
.tabulka tbody tr:hover { background: #dfe8ef; }
.tabulka-drobna td, .tabulka-drobna th { padding: 4px 8px; font-size: 12.5px; }
.tabulka td .tichy { display: block; font-size: 12px; }

.odznak {
    display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 10px;
    border: 1px solid var(--farba, var(--linka));
    background: color-mix(in srgb, var(--farba, #888) 16%, white);
}
.znacka-akcie {
    font-size: 12px; padding: 1px 8px; border-radius: 3px;
    background: var(--zahlavie); color: #2c4a5c;
}
.znacka-zmazanie { background: var(--vystraha); color: var(--vystraha-text); }
.znacka-import, .znacka-export, .znacka-kopirovanie { background: #ece4f5; color: var(--blok); }

.stupen {
    display: inline-block; padding: 2px 9px; border-radius: 3px;
    font-size: 12px; font-weight: 700; white-space: nowrap;
    border: 1px solid transparent;
}
.stupen-neriesitelne { background: #c0392b; color: #fff; }
.stupen-bez_kapacity { background: var(--pozor); color: var(--pozor-text); border-color: var(--pozor-linka); }
.stupen-zuzene       { background: var(--info); color: var(--info-text); border-color: var(--info-linka); }
.stupen-v_poriadku   { background: var(--uspech); color: var(--uspech-text); border-color: var(--uspech-linka); }

.pocet-studentov {
    display: inline-block; min-width: 30px; padding: 1px 8px; border-radius: 10px;
    background: var(--vystraha); color: var(--vystraha-text);
}

/* --- prázdne stavy ---------------------------------------------------- */

.prazdno {
    border: 1px solid var(--linka); border-radius: 6px; background: var(--panel-sivy);
    padding: 34px 22px; text-align: center; color: var(--tichy);
}
.prazdno-dobre { border-color: var(--uspech-linka); background: var(--uspech); color: var(--uspech-text); }

/* --- rozvrhová mriežka ------------------------------------------------ */

.mriezka-obal {
    overflow-x: auto; border: 1px solid var(--linka);
    border-radius: 6px; background: var(--panel);
}

.mriezka {
    display: grid;
    grid-template-columns: var(--sirka-popisu) repeat(var(--pocet-slotov), var(--sirka-slotu));
    grid-auto-rows: var(--vyska-drahy);
    min-width: min-content;
}
.mriezka > * { min-width: 0; }
.mriezka-miestnosti { --vyska-drahy: 44px; }

.bunka-roh {
    position: sticky; left: 0; z-index: 12;
    background: var(--zahlavie); border-bottom: 2px solid var(--panel);
    border-right: 2px solid var(--panel);
}
.zahlavie-cas {
    display: flex; align-items: center; height: 28px;
    padding-left: 4px; font-size: 12px; font-weight: 700; color: var(--atrament);
    background: var(--panel-sivy);
    border-bottom: 2px solid var(--panel);
    border-left: 2px solid transparent;
}
.zahlavie-cas.cela-hodina { border-left-color: var(--panel); }

.popis-dna {
    position: sticky; left: 0; z-index: 10;
    display: flex; flex-direction: column; justify-content: center; gap: 1px;
    padding: 0 10px; background: var(--zahlavie);
    border-top: 2px solid var(--panel);
    border-right: 2px solid var(--panel);
}
.popis-hlavny { font-weight: 700; font-size: 13px; }
.popis-vedlajsi { font-size: 11px; color: #4d5b66; }
.mriezka-miestnosti .popis-hlavny { font-size: 12.5px; }

.bunka {
    border-left: 1px solid var(--linka-jemna);
    border-top: 1px solid var(--linka-jemna);
    text-decoration: none;
}
.bunka.cela-hodina { border-left-color: var(--linka); }
a.bunka:hover { background: #f4f8f0; }
a.bunka.cielova { background: #eaf3e2; box-shadow: inset 0 0 0 2px var(--zelena-tmava); }

.hodina {
    position: relative; z-index: 5; margin: 3px 2px; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    border: 1px solid color-mix(in srgb, var(--farba, #888) 55%, white);
    background: color-mix(in srgb, var(--farba, #888) 20%, white);
}
.hodina.cudzia { border-style: dashed; opacity: 0.75; }
.hodina.moja { cursor: grab; }
.hodina.moja:active { cursor: grabbing; }
.hodina.blok { border-left: 3px solid var(--blok); }
.hodina.tahana { opacity: 0.4; }

.hodina-odkaz { display: block; padding: 3px 6px 1px; text-decoration: none; color: var(--modra-text); }
.hodina-odkaz:hover { text-decoration: none; }
.hodina-predmet {
    display: block; font-weight: 700; font-size: 12.5px; color: var(--modra-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hodina-detail {
    display: block; font-size: 11px; font-style: italic; color: #3a4a6b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* pásik týždňov -- jediný prvok navyše oproti predlohe */
.tyzdne { display: flex; gap: 1px; padding: 0 5px 4px; }
.tyzden { flex: 1; height: 4px; min-width: 2px; background: rgba(0, 0, 0, 0.14); border-radius: 1px; }
.tyzden.aktivny { background: color-mix(in srgb, var(--farba, #888) 85%, black 12%); }
.hodina.blok .tyzden.aktivny { background: var(--blok); }

.legenda {
    display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
    margin-top: 10px; font-size: 12.5px; color: var(--tichy);
}
.vzorka {
    display: inline-block; width: 22px; height: 11px; vertical-align: -1px;
    border: 1px solid #8fc47a; background: #ddf0d2; margin-right: 5px;
}
.vzorka.cudzia { border-style: dashed; opacity: 0.75; }
.vzorka.blok { border-left: 3px solid var(--blok); background: #ece4f5; border-color: #c3aede; }

/* --- výber týždňov ---------------------------------------------------- */

.periodicita-volby { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.vyber-tyzdnov { border-top: 1px solid var(--linka-jemna); padding-top: 12px; }
.vyber-tyzdnov.skryte { display: none; }

.tyzdne-mriezka { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; }
.tyzden-volba {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    width: 40px; padding: 5px 0; margin: 0;
    border: 1px solid var(--linka); border-radius: 4px; background: var(--panel);
    font-size: 12.5px; cursor: pointer;
}
.tyzden-volba:hover { border-color: var(--blok); }
.tyzden-volba:has(input:checked) { background: #ece4f5; border-color: var(--blok); font-weight: 700; }
.tyzdne-skratky { display: flex; gap: 6px; flex-wrap: wrap; }

/* --- výberové pole s hľadaním (combobox) ------------------------------ */

.vyber { position: relative; }
.vyber-skryty { display: none; }

/* Rovnaká výška ako bežný <select> -- inak sa v paneli filtrov rozíde
   zarovnanie polí aj popisov nad nimi. */
.vyber-pole {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    padding: 5px 26px 5px 7px; min-height: var(--vyska-pola);
    border: 1px solid var(--linka); border-radius: 4px;
    background: var(--panel); cursor: text;
}
.vyber.otvoreny .vyber-pole { border-color: var(--zelena-tmava); border-radius: 4px 4px 0 0; }
.vyber-pole:focus-within { border-color: var(--zelena-tmava); }

/* Zápis `.vyber-pole input.vyber-vstup` je nutný: samotná trieda by mala
   nižšiu váhu než pravidlo `input[type=text]` vyššie a vnútorné pole by si
   ponechalo vlastný rámik aj výplň. */
.vyber-pole input.vyber-vstup {
    flex: 1; min-width: 80px; width: auto; height: auto;
    border: 0; border-radius: 0; padding: 0 2px; margin: 0;
    font-family: var(--pismo); font-size: 13.5px; line-height: 1.55;
    background: transparent; color: var(--atrament);
}
.vyber-pole input.vyber-vstup:focus { outline: none; }
.vyber-pole input.vyber-vstup::placeholder { color: var(--tichy); }

.vyber-sipka {
    position: absolute; right: 9px; top: 50%; margin-top: -2px;
    width: 0; height: 0; pointer-events: none;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid var(--tichy);
}
.vyber.otvoreny .vyber-sipka { transform: rotate(180deg); }

.vyber-stitky { display: contents; }
.vyber-stitok {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 1px 4px 1px 8px; max-width: 100%;
    background: #eaf3e2; border: 1px solid #b9d9a4; border-radius: 3px;
    font-size: 12.5px;
}
.vyber-stitok-zrus {
    border: 0; background: none; cursor: pointer; padding: 0 3px;
    font: inherit; font-size: 14px; line-height: 1; color: var(--tichy); border-radius: 2px;
}
.vyber-stitok-zrus:hover { background: #c0392b; color: #fff; }

.vyber-zoznam {
    position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
    margin: 0; padding: 0; list-style: none;
    max-height: 280px; overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--zelena-tmava); border-top: 0; border-radius: 0 0 4px 4px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}
.vyber-polozka {
    padding: 5px 10px; font-size: 13.5px; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vyber-polozka.aktivna { background: #eaf3e2; }
.vyber-polozka.vybrana { font-weight: 700; }
.vyber-polozka.vybrana::after { content: ' ✓'; color: var(--odkaz); }
.vyber-skupina {
    padding: 6px 10px 3px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--tichy);
    background: var(--panel-sivy); border-bottom: 1px solid var(--linka-jemna);
}
.vyber-prazdne { padding: 10px; font-size: 13px; color: var(--tichy); }

/* --- prihlásenie ------------------------------------------------------ */

.prihlasenie {
    width: 380px; max-width: 100%; margin: 34px auto;
    background: var(--panel-sivy);
    border: 1px solid var(--linka); border-radius: 8px; padding: 24px 28px 28px;
}
.prihlasenie-nadpis { font-size: 17px; margin: 0 0 4px; }
.prihlasenie .poznamka { margin-bottom: 16px; }
.prihlasenie input[type=text], .prihlasenie input[type=password] {
    background: var(--pole-zvyraz);
}
.prihlasenie button { width: 100%; margin-top: 8px; justify-content: center; }

/* --- pätička ---------------------------------------------------------- */

.pata {
    max-width: 1600px; margin: 0 auto;
    display: flex; justify-content: space-between; gap: 16px;
    padding: 12px 20px; margin-top: 26px;
    border-top: 1px solid var(--linka);
    font-size: 12.5px; color: var(--tichy);
}

/* --- menšie obrazovky ------------------------------------------------- */

@media (max-width: 900px) {
    .dvojstlpec, .pole-dvojica, .pole-trojica { grid-template-columns: 1fr; }
    .hlavicka { padding: 0 12px; }
    .navigacia { margin: 0 -12px; padding: 0 12px; }
    .obsah { padding: 12px; }
    .panel-filtrov .vyber, .panel-filtrov .siroky select { min-width: 200px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* akcie v riadku zoznamu -- odkazy vedľa seba, nie pod sebou */
.akcie-riadku { white-space: nowrap; }
.akcie-riadku form { display: inline; margin-left: 10px; }

/* na prihlasovacej obrazovke stojí značka pod sebou a bez listu */

/* --- logo, ak je v adresári assets ------------------------------------ */

.znacka-logo { display: block; height: 62px; width: auto; max-width: 340px; }

@media (max-width: 900px) {
    .znacka-logo { height: 46px; max-width: 240px; }
}