/* Condosoft — štýly. Paleta a idiómy prevzaté z PKS Notes a PKS Pošty, aby
   všetky tri appky pôsobili ako jedna rodina. Rozloženie je dvojpanelové:
   vľavo zoznam, vpravo detail; na telefóne sa panely striedajú. */

:root {
  color-scheme: light dark;
  --akcent: #1c56a4;
  --akcent-hover: #16457f;
  --akcent-text: #1c56a4;
  --na-akcente: #ffffff;
  --pozadie: #f1f4f8;
  --plocha: #ffffff;
  --plocha-2: #f5f7fb;
  --text: #1b232e;
  --text-2: #5c6773;
  --okraj: #d6deea;
  --dobre: #15803d;
  --pozor: #d97706;
  --zle: #b91c1c;
  --chyba-bg: #fdf1f1;
  --toast-bg: #1e2a3a;
  --toast-text: #ffffff;
  --tien: 0 1px 2px rgba(15, 26, 45, .06), 0 2px 8px rgba(15, 26, 45, .08);
  --radius: 12px;
  /* Lišta nad zoznamom vľavo: podfarbená akcentom, aby sa nemiešala s domami. */
  --lista-zoznamu: color-mix(in srgb, var(--akcent) 7%, var(--plocha));
  --lista-zoznamu-okraj: color-mix(in srgb, var(--akcent) 24%, var(--okraj));
  --tien-pod: rgba(15, 26, 45, .16);
  /* Tri oblasti správy domu — farba v lište, nie klik. Fialová pre právo je
     zaužívaná; jantárová by sa plietla s výstrahou. */
  --oblast-ekonomika: #2f6fc0;
  --oblast-technika:  #1f9d55;
  --oblast-pravo:     #8b5cf6;
}

/* Téma sa dá zvoliť aj ručne. Preto je média dopyt obmedzený na „používateľ si
   výslovne nevybral svetlú" — inak by voľba „svetlá" na telefóne s tmavým
   režimom nezabrala. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="svetla"]) {
    --akcent: #2f6fc0; --akcent-hover: #3f7fce; --akcent-text: #77ade8;
    --pozadie: #0e131a; --plocha: #182029; --plocha-2: #1f2934;
    --text: #e6ecf3; --text-2: #9aa6b4; --okraj: #2c3744;
    --dobre: #22c55e; --pozor: #f59e0b; --zle: #f87171;
    --chyba-bg: #402a33; --toast-bg: #e6ecf3; --toast-text: #172029;
    --tien: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .35);
    --tien-pod: rgba(0, 0, 0, .5);
  }
}
:root[data-tema="tmava"] {
  --akcent: #2f6fc0; --akcent-hover: #3f7fce; --akcent-text: #77ade8;
  --pozadie: #0e131a; --plocha: #182029; --plocha-2: #1f2934;
  --text: #e6ecf3; --text-2: #9aa6b4; --okraj: #2c3744;
  --dobre: #22c55e; --pozor: #f59e0b; --zle: #f87171;
  --chyba-bg: #402a33; --toast-bg: #e6ecf3; --toast-text: #172029;
  --tien: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .35);
  --tien-pod: rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--pozadie); color: var(--text);
  font: 15px/1.45 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.skryte { display: none !important; }
.tiche { color: var(--text-2); }
.mensie { font-size: 13px; }
a { color: var(--akcent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ prihlásenie */
.prihlasenie {
  min-height: 100%; display: grid; place-items: center; padding: 24px 16px;
}
.prihlas-karta { width: min(380px, 100%); display: grid; gap: 12px; }
.prihlas-karta h1 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.prihlas-karta > p:first-of-type { margin: -8px 0 6px; }
.prihlas-karta label { display: grid; gap: 4px; font-size: 13px; color: var(--text-2); }
.verzia { text-align: center; margin: 4px 0 0; opacity: .75; }

input, select, textarea {
  font: inherit; color: var(--text); background: var(--plocha);
  border: 1px solid var(--okraj); border-radius: 8px; padding: 9px 11px; width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--akcent); outline-offset: -1px; }

.tlacidlo {
  font: inherit; cursor: pointer; border: 1px solid var(--okraj); border-radius: 8px;
  background: var(--plocha); color: var(--text); padding: 9px 14px;
}
.tlacidlo:hover { background: var(--plocha-2); }
.tlacidlo.hlavne { background: var(--akcent); border-color: var(--akcent); color: var(--na-akcente); }
.tlacidlo.hlavne:hover { background: var(--akcent-hover); }
.tlacidlo[disabled] { opacity: .6; cursor: default; }

.chyba {
  background: var(--chyba-bg); border: 1px solid var(--zle); color: var(--zle);
  border-radius: 8px; padding: 8px 10px; margin: 0; font-size: 14px;
}

.karta {
  background: var(--plocha); border: 1px solid var(--okraj);
  border-radius: var(--radius); box-shadow: var(--tien); padding: 16px;
}

/* ---------------------------------------------------------------- hlavička */
/* Hlavička je v akcentovej farbe s bielym textom — rovnako ako PKS Notes
   (`.hlavicka { background: var(--akcent); color: #fff }`), aby sa obe appky
   spoznali ako súrodenci. Ovládanie na nej je priesvitne biele. */
.hlavicka {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--akcent); color: #fff; box-shadow: var(--tien);
}
/* Hlavička + lišta sekcií = jeden prilepený blok (index.php .vrch). */
.vrch { position: sticky; top: 0; z-index: 20; }
/* Podmenu sekcie je mimo bloku: na PC sa lepí pod neho ako druhá vrstva
   (výšku bloku dodáva app.js do --vrch-vyska), na telefóne ostáva v toku
   stránky a odíde s obsahom (pripomienka 22. 9.). */
.podmenu-obal:empty { display: none; }
.podmenu-obal .lista-podmenu { border-top: 0; border-bottom: 1px solid var(--okraj); }
@media (min-width: 761px) {
  .podmenu-obal { position: sticky; top: var(--vrch-vyska, 86px); z-index: 19; }
}
.znacka { font-weight: 700; font-size: 17px; color: #fff; letter-spacing: -.01em; }
.znacka:hover { text-decoration: none; color: #fff; }
.hladanie { flex: 1; min-width: 0; max-width: 520px; position: relative; }
.hladanie input { padding-right: 38px; }
.hladanie input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hladaj-zrus {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border: 0; border-radius: 6px; cursor: pointer;
  background: rgba(255, 255, 255, .26); color: #fff; font: inherit; font-size: 17px; line-height: 1;
  display: grid; place-items: center; padding: 0;
}
.hladaj-zrus:hover { background: rgba(255, 255, 255, .4); }
.hladanie input {
  border-radius: 8px; background: rgba(255, 255, 255, .14); color: #fff;
  border-color: rgba(255, 255, 255, .4);
}
.hladanie input::placeholder { color: rgba(255, 255, 255, .78); }
.hladanie input:focus { outline-color: #fff; background: rgba(255, 255, 255, .22); }
.hlavicka .ikona { color: rgba(255, 255, 255, .9); }
.hlavicka .ikona:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.hlavicka .tlacidlo.tichy {
  background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .4);
}
.hlavicka .tlacidlo.tichy:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.hlavicka .tlacidlo.tichy[aria-expanded="true"] { background: rgba(255, 255, 255, .28); border-color: #fff; color: #fff; }
.hlavicka .ja .rola { color: rgba(255, 255, 255, .82); }
.hlavicka .ja-tl .sipka { opacity: .9; }
/* Admin a prihlásený užívateľ: DVE ROVNAKO VEĽKÉ tlačidlá (pripomienka 22. 9.).
   Ikona vľavo, text, šípka pri pravom okraji; dlhé meno sa skráti bodkami,
   tlačidlo nerastie. */
.hlavicka .menu-tl {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; width: 176px;
  padding: 0 10px 0 12px; justify-content: flex-start; text-align: left; border-radius: 8px;
}
.hlavicka .menu-tl .sipka { margin-left: auto; font-size: 10px; opacity: .9; }
.hlavicka .menu-tl .ja-ikona { font-size: 15px; line-height: 1; flex: none; }
.hlavicka .ja { min-width: 0; }
.hlavicka .ja > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ikona {
  font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 8px;
  color: var(--text-2); padding: 7px 9px;
}
.ikona:hover { background: var(--plocha-2); color: var(--text); }
/* Zapnutý prepínač (zobrazenie zrušených záznamov) má byť vidieť na prvý pohľad. */
.ikona.zapnute { background: var(--plocha-2); color: var(--zle); border-color: var(--zle); }
.ja { display: grid; line-height: 1.15; text-align: left; font-size: 13px; }
.ja .rola { color: var(--text-2); font-size: 11px; }
.ja-tl { display: inline-flex; align-items: center; gap: 8px; }
.ja-tl .sipka { font-size: 10px; opacity: .7; }
.tlacidlo.tichy { background: none; border-color: transparent; color: var(--text-2); }
.tlacidlo.tichy:hover { background: var(--plocha-2); color: var(--text); }
.tlacidlo.tichy[aria-expanded="true"] { background: var(--plocha-2); color: var(--text); border-color: var(--okraj); }
/* Rozbaľovacie menu pod tlačidlom v hlavičke. */
.menu-kotva { position: relative; }
.rozbal {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 280px; z-index: 30;
  background: var(--plocha); border: 1px solid var(--okraj); border-radius: 10px;
  box-shadow: var(--tien); padding: 6px; display: grid; gap: 2px;
}
.rozbal [role="menuitem"] {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 8px; background: none;
  color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-decoration: none;
}
.rozbal [role="menuitem"]:hover { background: var(--plocha-2); text-decoration: none; }
.rozbal [role="menuitem"][aria-pressed="true"] { color: var(--zle); }
.rozbal [role="menuitem"][aria-pressed="true"]::after { content: '✓'; margin-left: auto; }
.rozbal .odznak { margin-left: auto; }

.pas {
  padding: 6px 14px; font-size: 13px; text-align: center;
  background: #fff7e8; color: #8a5200; border-bottom: 1px solid #f0d9ae;
}
:root[data-tema="tmava"] .pas { background: #3a2e17; color: #f0c987; border-bottom-color: #5a4520; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="svetla"]) .pas { background: #3a2e17; color: #f0c987; border-bottom-color: #5a4520; }
}
.pas.tichy { background: var(--plocha-2); color: var(--text-2); border-bottom-color: var(--okraj); }

/* Testovacia verzia (condosoft-test.prvakosicka.sk): iná farba hlavičky,
   odznak TEST a pruhovaný pás. Farby sú rovnaké vo svetlej aj tmavej téme,
   je to výstraha. */
html[data-prostredie="test"] .hlavicka { background: #9a3412; }
.test-odznak {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; vertical-align: 2px;
  background: #fde047; color: #422006;
}
.test-znak {
  padding: 4px 8px; border-radius: 6px; text-align: center;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: #fde047; color: #422006;
}
html[data-prostredie="test"] .pas.test {
  background: repeating-linear-gradient(-45deg, #fde68a 0 14px, #fcd34d 14px 28px);
  color: #422006; border-bottom-color: #d97706;
}
.pas.test .tlacidlo { margin-left: 8px; padding: 2px 10px; font-size: 12px; }

/* ----------------------------------------------------------------- plocha */
.plocha {
  display: grid; grid-template-columns: minmax(320px, 400px) 1fr;
  gap: 14px; padding: 14px; align-items: start;
}
.panel { min-width: 0; }
.zoznam { display: grid; gap: 8px; }
/* Ľavý panel má VLASTNÉ posúvanie a drží sa pod lištou (pripomienka 22. 9.):
   klik na dom dole v zozname už neodroluje stránku tak, že dom zmizne z dohľadu.
   Výšku prilepeného bloku hore dodáva app.js do --vrch-vyska. */
@media (min-width: 861px) {
  .zoznam {
    position: sticky; top: calc(var(--vrch-vyska, 100px) + var(--podmenu-vyska, 0px) + 14px);
    max-height: calc(100vh - var(--vrch-vyska, 100px) - var(--podmenu-vyska, 0px) - 28px);
    overflow-y: auto; scrollbar-width: thin; scrollbar-gutter: stable; padding-right: 18px;
    align-content: start;
  }
  /* Prilepená lišta: pás pozadia okolo nej schová rolované domy skôr, než sa
     jej dotknú, a tieň pod ňou ukáže, že zoznam ide popod ňu. */
  .zoznam-hlavicka {
    position: sticky; top: 0; z-index: 2; margin-bottom: 10px;
    box-shadow: 0 0 0 8px var(--pozadie), 0 14px 12px -8px var(--tien-pod);
  }
}

.polozka {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--plocha); border: 1px solid var(--okraj); border-radius: var(--radius);
  padding: 10px 12px; color: var(--text); font: inherit;
}
.polozka:hover { border-color: var(--akcent); text-decoration: none; }
.polozka.vybrana { border-color: var(--akcent); box-shadow: inset 3px 0 0 var(--akcent); }
.polozka .nadpis { font-weight: 600; }
/* Evidenčné číslo domu — to, čím sa dom volá v rozhovore, nie technické id. */
.evc { color: var(--text-2); font-variant-numeric: tabular-nums; font-weight: 400; }
.polozka .popis { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.polozka .cisla { color: var(--text-2); font-size: 12px; margin-top: 4px; }

/* Dom v ľavom paneli sa vie rozbaliť na vchody. Šípka je mimo odkazu (tlačidlo
   v odkaze je neplatné HTML), preto obal; klik na vchod filtruje obrazovku
   vpravo — priestory alebo užívateľov toho vchodu. */
.polozka-obal { position: relative; }
.polozka-obal.ma-vchody > .polozka { padding-right: 38px; }
.rozbal-vchody {
  position: absolute; right: 6px; top: 7px; border: 0; background: none; cursor: pointer;
  color: var(--text-2); font: inherit; font-size: 12px; padding: 5px 8px; border-radius: 6px;
  transition: transform .12s;
}
.rozbal-vchody:hover { background: var(--plocha-2); color: var(--text); }
.rozbal-vchody[aria-expanded="true"] { transform: rotate(90deg); }
.vchody {
  display: grid; gap: 3px; margin: 4px 0 2px 14px; padding-left: 10px;
  border-left: 2px solid var(--okraj);
}
.vchod {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  padding: 5px 10px; border-radius: 8px; color: var(--text); font-size: 13px;
}
.vchod:hover { background: var(--plocha-2); text-decoration: none; }
.vchod.aktivny {
  background: color-mix(in srgb, var(--akcent) 12%, transparent);
  color: var(--akcent-text); font-weight: 600;
}
.vchod .pocet { color: var(--text-2); font-size: 12px; font-weight: 400; }

/* Filtre v detaile (vchody domu): vybraný svieti ako položka podmenu. */
.filtre { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; align-items: center; }
.filtre .tlacidlo[aria-current="true"] {
  border-color: var(--akcent); color: var(--akcent-text); font-weight: 600;
  background: color-mix(in srgb, var(--akcent) 10%, var(--plocha));
}

.detail > .karta { margin-bottom: 14px; }
.detail h2 { margin: 0 0 2px; font-size: 20px; letter-spacing: -.01em; }
.detail h3 { margin: 0 0 10px; font-size: 15px; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.drobky { font-size: 13px; color: var(--text-2); margin: 0 0 10px; }

/* Cesta späť. Drobky boli len text s odkazmi a nikto ich nepovažoval za
   ovládanie — návrat o úroveň vyššie je teraz tlačidlo, na ktoré sa dá trafiť
   aj palcom. */
.cesta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.cesta .tlacidlo { padding: 4px 10px; font-size: 13px; }
.spat-krok { font-weight: 600; }
.tlacidlo.tichy {
  background: transparent; border-color: transparent; color: var(--text-2);
}
.tlacidlo.tichy:hover { background: var(--plocha-2); color: var(--text); }
.drobky a::after { content: " ›"; color: var(--okraj); }

/* Dvojstĺpcový výpis údajov. Na telefóne sa zloží pod seba. */
.udaje { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 14px; }
.udaje dt { color: var(--text-2); }
.udaje dd { margin: 0; }

table.tab { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tab th {
  text-align: left; font-weight: 600; color: var(--text-2); font-size: 12px;
  text-transform: uppercase; letter-spacing: .03em; padding: 4px 8px; border-bottom: 1px solid var(--okraj);
}
table.tab td { padding: 6px 8px; border-bottom: 1px solid var(--okraj); vertical-align: top; }
table.tab tr:last-child td { border-bottom: none; }
table.tab td.cislo, table.tab th.cislo { text-align: right; font-variant-numeric: tabular-nums; }
table.tab tr.klik { cursor: pointer; }
table.tab tr.klik:hover td { background: var(--plocha-2); }
/* Ukončené záznamy (užívateľ, právny titul, účet, predseda SVB…) sa od platných
   odlíšia na prvý pohľad: tlmené, kurzívou, s jemným podkladom a šedým pásom
   vľavo. Platné ostávajú plné — kontrast robí rozdiel, nie ozdoba. */
table.tab tr.ukoncena { background: var(--plocha-2); }
table.tab tr.ukoncena td { color: var(--text-2); opacity: .8; }
table.tab tr.ukoncena td:first-child { box-shadow: inset 3px 0 0 var(--okraj); }
table.tab tr.ukoncena td.akcie { opacity: 1; }
.podkarta.ukoncena { opacity: .72; border-style: dashed; }
.podkarta.ukoncena .odznak { opacity: 1; }

table.tab th.akcie, table.tab td.akcie { white-space: nowrap; text-align: right; }

.odznak {
  display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--okraj); color: var(--text-2); background: var(--plocha-2);
  white-space: nowrap;
}
.odznak.dobry { color: var(--dobre); border-color: var(--dobre); background: transparent; }
.odznak.pozor { color: var(--pozor); border-color: var(--pozor); background: transparent; }
.odznak.zly   { color: var(--zle);   border-color: var(--zle);   background: transparent; }

.prazdne { color: var(--text-2); font-style: italic; padding: 6px 0; }
/* Voľba, čo sa má s bytom pri importe urobiť. Úzka, nech nerozhodí tabuľku. */
select.lv-akcia { margin-top: 4px; font-size: 12px; padding: 2px 4px; max-width: 26em; }
.sekcia-nadpis { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sekcia-nadpis .pocet { color: var(--text-2); font-size: 13px; }

/* Lišta nad zoznamom domov a nad výsledkami hľadania: vyššia, s odstupom od
   kraja a podfarbená, aby sa nemiešala s domami pod ňou (pripomienka 23. 9.). */
.zoznam-hlavicka {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 8px 10px; min-height: 50px; padding: 10px 12px;
  background: var(--lista-zoznamu); border: 1px solid var(--lista-zoznamu-okraj);
  border-radius: var(--radius);
}
.zoznam-hlavicka h3 { margin: 0; font-size: 13px; color: var(--akcent-text); text-transform: uppercase; letter-spacing: .04em; }
.zoznam-hlavicka h3 .pocet { color: var(--text-2); font-weight: 600; margin-left: 2px; }

.prepinac { display: flex; gap: 6px; font-size: 12px; color: var(--text-2); align-items: center; }
.prepinac input { width: auto; }

.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  background: var(--toast-bg); color: var(--toast-text); padding: 10px 16px;
  border-radius: 10px; font-size: 14px; z-index: 50; box-shadow: var(--tien);
}

/* ------------------------------------------------------------------ mobil */
@media (max-width: 860px) {
  .plocha { grid-template-columns: 1fr; padding: 10px; gap: 10px; }
  /* Na úzkej obrazovke je vidieť práve jeden panel — ten, ktorý si otvoril. */
  body[data-panel="detail"] .zoznam { display: none; }
  body[data-panel="zoznam"] .detail { display: none; }
  .hlavicka { gap: 6px; padding: 6px 8px; flex-wrap: wrap; }
  .znacka { font-size: 16px; }
  .ja, .ja-text { display: none; }
  .hlavicka .menu-tl { width: auto; height: 36px; padding: 0 10px; }
  .rozbal { min-width: 240px; }
  .hladanie { order: 10; flex-basis: 100%; max-width: none; }
  .udaje { grid-template-columns: 1fr; gap: 0 0; }
  .udaje dt { margin-top: 8px; font-size: 12px; }
  table.tab { font-size: 13px; }
  table.tab th, table.tab td { padding: 5px 6px; }
  /* Nadpis objektu a jeho tlačidlá vedľa seba sa na telefóne nezmestia. */
  .sekcia-nadpis { flex-wrap: wrap; align-items: center; }
  .sekcia-nadpis > span { width: 100%; }
  .tlacidla.vlavo .tlacidlo { flex: 1 1 auto; }

  /* Široká tabuľka sa na telefóne posúva do strany a „Upraviť" končilo mimo
     obrazovky — pri účtoch domu a SIPO sa k nemu nedalo dostať vôbec. Stĺpec
     s tlačidlami je preto prilepený k pravému okraju a tabuľka sa posúva pod
     ním. Na monitore nič z toho netreba: tam sa tabuľka zmestí. */
  table.tab { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.tab > thead, table.tab > tbody { display: table; width: 100%; }
  table.tab th.akcie, table.tab td.akcie {
    position: sticky; right: 0; z-index: 1;
    background: var(--plocha);
    box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .28);
  }
  .podkarta table.tab th.akcie, .podkarta table.tab td.akcie { background: var(--plocha-2); }
}
@media (min-width: 861px) { .spat { display: none !important; } }

/* ------------------------------------------------------------- formuláre */
.prekryv {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(10, 16, 24, .55); padding: 16px; overflow: auto;
}
/* Všetky dialógy sú široké ako vzorový „Nový merač priestoru" (pripomienka
   23. 9.) — pri 560 px boli polia krátke a rámčeky sa nezmestili. */
.dialog {
  width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  display: grid; gap: 12px;
}
.dialog h3 { margin: 0; font-size: 18px; color: var(--text); text-transform: none; letter-spacing: 0; }
/* Mriežka o šiestich stĺpcoch na monitore, jeden stĺpec na telefóne. Pole
   zaberá štandardne polovicu, krátke číslo tretinu alebo šestinu, dlhý text
   celú šírku (`sirka` v app.js). `minmax(0, …)`: dlhá voľba vo výbere nesmie
   rozšíriť svoj stĺpec. `start`: pole s nápovedou je vyššie a pri roztiahnutí
   by susedovi posunulo okienko pod úroveň ostatných (pripomienka 23. 9.). */
.polia, .polia-vnutri {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: start;
}
.polia > *, .polia-vnutri > * { grid-column: span 3; }
.polia > .pole-siroke, .polia-vnutri > .pole-siroke, .polia > .skupina-poli { grid-column: 1 / -1; }
.polia > .pole-dvetretiny, .polia-vnutri > .pole-dvetretiny { grid-column: span 4; }
.polia > .pole-tretina, .polia-vnutri > .pole-tretina { grid-column: span 2; }
.polia > .pole-sestina, .polia-vnutri > .pole-sestina { grid-column: span 1; }
.pole { display: grid; gap: 3px; font-size: 13px; color: var(--text-2); }
.pole-siroke { grid-column: 1 / -1; }
/* Zoznam domov v dialógu o rozsahu. Nie je ich veľa, ale ani málo — preto
   vlastný posuvník a nie rozbaľovacie pole, v ktorom nevidno, čo je vybrané. */
.zoznam-volieb {
  max-height: 180px; overflow: auto; border: 1px solid var(--okraj);
  border-radius: 8px; padding: 6px 8px; background: var(--plocha);
  display: grid; gap: 2px;
}
.zoznam-volieb label { display: flex; gap: 8px; align-items: center; color: var(--text); }
.zoznam-volieb input { width: auto; }
/* Zaškrtávacie pole: políčko, vedľa neho text, pod textom nápoveda. */
.pole-check { grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; row-gap: 3px; }
/* Zaškrtávacie pole je mriežková položka: bez `justify-self` by ho
   `width: auto` roztiahlo cez celý stĺpec a vyzeralo by ako dlhý pruh. */
.pole-check input { width: auto; justify-self: start; }
.pole textarea { resize: vertical; line-height: 1.45; }
.pole-check > .napoveda { grid-column: 2; }
/* Vedľa bežného poľa sedí políčko v úrovni jeho okienka, nie popisu: odsadí sa
   o riadok popisu a prvý riadok má výšku okienka (13 px × 1,45 + 2 × 9 + 2 × 1). */
.polia > .pole-check:not(.pole-siroke),
.polia-vnutri > .pole-check:not(.pole-siroke) {
  margin-top: calc(1.45em + 3px); grid-template-rows: minmax(calc(1.45em + 20px), auto);
}
.napoveda { font-style: normal; font-size: 12px; color: var(--text-2); opacity: .85; }
.tlacidla { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.tlacidla.vlavo { justify-content: flex-start; margin-top: 12px; }
/* Rámček skupiny polí. Každá položka predpisu má vlastný rámček a v ňom vždy
   to isté: bázu, úpravu a vypínač — aj tam, kde sa báza nezadáva. Rovnaký tvar
   sa číta; striedavý tvar sa lúšti. */
.skupina-poli {
  grid-column: 1 / -1; margin: 0; padding: 2px 12px 12px;
  border: 1px solid var(--okraj); border-radius: 10px; background: var(--plocha-2);
  display: grid; gap: 8px;
}
.skupina-poli > legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.skupina-hlava { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.skupina-popis { font-size: 12px; color: var(--text-2); }
.skupina-suma {
  font-size: 13px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.skupina-poli.vypnuta { opacity: .5; }
/* `trojica` je pre rámčeky, kde tretie pole je vypínač a nemá zaberať tretinu
   šírky — tam vlastné tri stĺpce a polia bez rozpätia. */
.polia-vnutri.trojica { grid-template-columns: 1fr 1fr auto; align-items: end; }
.polia-vnutri.trojica > * { grid-column: auto; }
.pole-hodnota { font-size: 13px; color: var(--text-2); padding: 9px 0; }
/* Súčet drží hore aj pri rolovaní — inak by človek pri desiatej položke
   nevidel, čo tým robí s celkovou sumou. */
.suhrn {
  position: sticky; top: 0; z-index: 1; margin: 0; padding: 8px 0;
  background: var(--plocha); border-bottom: 1px solid var(--okraj);
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 14px; color: var(--text-2);
}
.suhrn strong { font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .polia, .polia-vnutri, .polia-vnutri.trojica { grid-template-columns: 1fr; }
  .polia > .pole, .polia-vnutri > .pole { grid-column: 1 / -1; }
  .polia > .pole-check:not(.pole-siroke),
  .polia-vnutri > .pole-check:not(.pole-siroke) { margin-top: 0; grid-template-rows: none; }
}

/* Zrolovateľná šablóna. Domov s piatimi šablónami je dosť na to, aby sa
   nezmestili na obrazovku naraz; zbalená je z nej jeden riadok a vidieť, čo
   je kedy platilo. Natívne <details> preto, že vie klávesnicu aj hľadanie
   v stránke bez toho, aby sme to museli písať. */
.podkarta > summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  cursor: pointer; list-style: none; padding: 2px 0;
}
.podkarta > summary::-webkit-details-marker { display: none; }
.podkarta > summary:hover { color: var(--akcent-text); }
.podkarta > summary .sipka-roz {
  display: inline-block; width: .9em; color: var(--text-2); transition: transform .12s;
}
.podkarta[open] > summary .sipka-roz { transform: rotate(90deg); }
@media (max-width: 620px) {
  .podkarta > summary { flex-wrap: wrap; }
  .podkarta > summary > span { width: 100%; }
}

/* Malé tlačidlo v hlavičke objektu — nesmie prevýšiť nadpis. */
.tlacidlo.maly { padding: 4px 9px; font-size: 13px; }
.sekcia-nadpis > span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zoznam-akcie { display: flex; align-items: center; gap: 8px; }
/* Jeden list vlastníctva vnútri karty „Listy vlastníctva". */
.podkarta {
  border: 1px solid var(--okraj); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
  background: var(--plocha-2);
}
.podkarta:last-child { margin-bottom: 0; }

/* Prehliadač priečinkov v Nextcloude. Výška je zastropovaná, aby dialóg
   nevyrástol nad obrazovku pri priečinku s deväťdesiatimi domami. */
.nc-zoznam { display: grid; gap: 6px; max-height: min(52vh, 420px); overflow: auto; }
.nc-zoznam .polozka { display: flex; justify-content: space-between; gap: 10px; }
.nc-zoznam .polozka .tiche { font-size: 12px; }

/* Lišta sekcií pod hlavičkou. Na úzkej obrazovke sa posúva do strany —
   skladať ju do „hamburgera" by znamenalo klik navyše pri každom prepnutí. */
.lista { background: var(--plocha); border-bottom: 1px solid var(--okraj); }
.lista:empty { display: none; }
.lista-riadok {
  display: flex; gap: 2px; padding: 0 8px; overflow-x: auto; scrollbar-width: thin;
}
/* Podmenu: SKUPINY POD SEBOU (pripomienka 22. 9.). Dva stĺpce — názov skupiny
   vľavo, jej tlačidlá vpravo — takže názvy stoja v jednej zvislici a riadky sa
   čítajú ako obsah. Rôzne kategórie v jednom riadku sa čítali ako jedna.
   Sekcia bez skupín má jediný riadok bez názvu. */
.lista-podmenu {
  display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px; padding: 7px 12px;
  align-items: center; background: var(--plocha-2); border-top: 1px solid var(--okraj);
}
.lista-podmenu.bez-skupin { grid-template-columns: 1fr; }
.podmenu-riadok { display: contents; }
.podmenu-tlacidla { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; min-width: 0; }
.lista-podmenu button[aria-current="page"] {
  border-color: var(--akcent); color: var(--akcent-text); font-weight: 600;
  background: color-mix(in srgb, var(--akcent) 10%, var(--plocha));
}
.lista-podmenu button {
  border: 1px solid var(--okraj); background: var(--plocha); cursor: pointer;
  color: var(--text); font: inherit; font-size: 13px; padding: 4px 10px;
  border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.lista-podmenu button:hover { border-color: var(--akcent); }
/* Nehotová položka: prerušovaný okraj, tlmená farba, malý znak s tooltipom. */
.lista-podmenu button.pripravuje { border-style: dashed; color: var(--text-2); }
.lista-podmenu .znak-pripravuje { font-size: 11px; opacity: .75; letter-spacing: -.05em; }
.lista-podmenu .odznak { font-size: 10px; }
.lista-podmenu .skupina {
  font-size: 11px; color: var(--text-2); text-transform: uppercase;
  letter-spacing: .04em; white-space: nowrap; line-height: 1.2;
}
@media (max-width: 760px) {
  /* Na telefóne názov skupiny NAD tlačidlami — dva stĺpce by vzali polovicu šírky. */
  .lista-podmenu { grid-template-columns: 1fr; gap: 3px; }
  .lista-podmenu .skupina { margin-top: 4px; }
}
/* Tlačidlá sekcií: ROVNAKÁ ŠÍRKA bez ohľadu na dĺžku názvu, s ikonou (pripomienka
   22. 9.). `flex: 1 1 0` delí riadok rovnomerne; `min-width: max-content` nedovolí
   „BANKA A PLATBY" zlomiť — keď sa nezmestia, riadok sa posúva do strany. */
.lista .sekcia {
  border: 0; background: none; cursor: pointer; color: var(--text-2);
  font: inherit; font-size: 12px; padding: 8px 6px; white-space: nowrap;
  border-bottom: 2px solid transparent; border-top: 2px solid transparent;
  text-transform: uppercase; letter-spacing: .03em;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  /* Rovnaká pevná šírka, nie roztiahnutie cez celú obrazovku (pripomienka 22. 9.).
     142 px × 8 + oddeľovače ≈ 1 225 px — zmestí sa aj do okna 1 240 px;
     najdlhšie „Banka a platby" má prirodzene 132 px. */
  flex: 0 0 auto; width: 142px; min-width: max-content;
}
.lista .sekcia .ik { width: 17px; height: 17px; flex: none; opacity: .85; }
.lista .sekcia:hover { color: var(--text); background: var(--plocha-2); }
/* Vybraná sekcia ostáva vybraná, kým z nej človek neodíde — je to režim,
   v ktorom pracuje, nie odkaz, na ktorý práve klikol. */
.lista .sekcia.aktivna {
  color: var(--akcent-text); border-bottom-color: var(--akcent); font-weight: 600;
  background: color-mix(in srgb, var(--akcent) 12%, transparent);
}
.lista .sekcia.aktivna .ik { opacity: 1; }
/* Oblasť správy: tenký pásik nad tlačidlom. Spoločný základ a výstupy ho
   nemajú — sú pre všetkých. */
.lista .sekcia[data-oblast="ekonomika"] { border-top-color: var(--oblast-ekonomika); }
.lista .sekcia[data-oblast="technika"]  { border-top-color: var(--oblast-technika); }
.lista .sekcia[data-oblast="pravo"]     { border-top-color: var(--oblast-pravo); }
.lista-oddelovac { flex: 0 0 1px; align-self: stretch; margin: 9px 6px; background: var(--okraj); }
@media (max-width: 760px) { .lista .sekcia { flex: 0 0 auto; } }

/* IBAN sa číta po štvoriciach, preto rovnako široké číslice. */
.iban { font-variant-numeric: tabular-nums; }
input.iban, input.rc { letter-spacing: .04em; }
.napoveda.dobra { color: var(--dobre); opacity: 1; }
.napoveda.zla   { color: var(--zle);   opacity: 1; }

/* Pripojené dokumenty. Sú to ODKAZY do cloudu, nie kópie — preto spinka
   a nie ikona súboru. Každý na vlastnom riadku: k jednej zmluve ich býva
   viac (dodatky) a vedľa seba by sa dlhé názvy nedali rozoznať. */
.dokumenty { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.dokument {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--okraj); border-radius: 8px; padding: 3px 4px 3px 10px;
  font-size: 12px; background: var(--plocha-2);
}
.dokument a { color: var(--text); flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
/* Dokumenty pod riadkom tabuľky — bez horného orámovania, aby bolo vidno,
   že patria k záznamu nad nimi, a nie že sú ďalší záznam. */
.riadok-dokumentov > td { border-top: 0; padding-top: 0; }
.dokument .tiche { flex: 0 0 auto; }
.dokument .nastroje { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.dokument .odpoj {
  border: 0; background: none; cursor: pointer; color: var(--text-2);
  font: inherit; font-size: 14px; line-height: 1; padding: 0 4px;
}
.dokument .odpoj:hover { color: var(--zle); }

/* Zaškrtnutý súbor v prehliadači cloudu. */
.nc-zoznam .polozka.vybrana { border-color: var(--akcent); background: var(--plocha-2); }
.podkarta table.tab { margin-top: 8px; }

/* Prehľad vydaných predpisov: vybraný dom v tabuli, malé akcie v bunke,
   sumy so zarovnanými číslicami. */
table.tab tr.vybrana td { background: color-mix(in srgb, var(--akcent) 8%, transparent); }
.mini-akcie { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cislo-mpp { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Výber obdobia v zostavách: úzky select v riadku filtrov, nie na celú šírku. */
.filtre select { width: auto; padding: 4px 8px; font-size: 13px; }
.filtre input { width: auto; padding: 4px 8px; font-size: 13px; }
input.pole-mesiaca { width: 6.5em; text-align: center; font-variant-numeric: tabular-nums; }
input[aria-invalid="true"] { border-color: var(--zle); background: var(--chyba-bg); }

/* Výpisy z účtu, krok 1: náhľad */
table.tab td.bv-plus { color: var(--dobre); }
table.tab tr.bv-rucne td { background: color-mix(in srgb, var(--pozor) 7%, transparent); }