/* Hospodárenie mesta (/hospodarenie/) — štýly navyše k podstranka.css
   a spolocne.css. Rozloženie sekcií (.sekcia--dvojica, .sekcia-hlava,
   .karty, .hero-cisla, .pribeh) je prevzaté zo /spolocne/ a tu sa
   neprepisuje; tento súbor pridáva len grafy a pár drobností.

   Paleta ostáva jedna: oranžový akcent pre Senicu a pre „teraz", čierna
   a tóny papiera pre ostatné. Nie dúha — ako v /prevadzky/. */

/* ---- podmenu: druhá úroveň navigácie, ukotvená ----
   Pôvodne skopírované z granty.css (ten sa sem nenačítava). Od 1. 10. 2026
   sú na /granty/ z podmenu záložky s počtami; základ lišty je rovnaký
   a pri jeho zmene treba upraviť obe stránky. Pod hlavnou lištou,
   na papieri s tenkou linkou; `position: sticky` ju pri rolovaní pridrží pod
   horným okrajom. Aktívnu časť označuje hospodarenie.js atribútom
   aria-current. Do 760 px sa odkazy rolujú do boku, nelámu sa. */
.podmenu {
  position: sticky; top: 0; z-index: 120;
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.podmenu-vnutro {
  display: flex; align-items: center; gap: clamp(4px, 1vw, 12px);
  padding: 0 var(--pad); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.podmenu-vnutro::-webkit-scrollbar { display: none; }
.podmenu-nazov {
  flex: none; margin-right: clamp(10px, 2vw, 28px); font-size: 14px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--akcent); white-space: nowrap;
}
.podmenu a {
  flex: none; display: inline-block; padding: 17px 10px 15px; border-bottom: 2px solid transparent;
  font-size: clamp(15px, 1.05vw, 17px); font-weight: 600; color: var(--body-soft); text-decoration: none;
  white-space: nowrap; transition: color .15s ease, border-color .15s ease;
}
.podmenu a:hover { color: var(--ink); }
.podmenu a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--akcent); }
.podmenu a:focus-visible { outline: 2px solid var(--akcent); outline-offset: -2px; border-radius: 4px; }
@media (max-width: 760px) {
  .podmenu-nazov { display: none; }
  .podmenu a { padding: 14px 8px 12px; }
}
@media print { .podmenu { display: none !important; } }

/* ---- hero bez fotografie ---- */
.hlavicka--hosp h1 { max-width: 12ch; }
.hlavicka--hosp .hero-cisla { max-width: 980px; }
.hlavicka--hosp .hero-cislo .popis { max-width: 24ch; }

/* ---- sekcia s grafom ----
   .sekcia--dvojica zo /spolocne/ je `auto-fit` a ráta s dvoma prvkami.
   Tu je tretí — zistenie cez celú šírku — a s ním by `auto-fit` na širokej
   obrazovke nechal štyri stĺpce a graf by sa stiahol na štvrtinu. Preto
   pevné dva stĺpce, pod 900 px jeden. Ostatné sekcie dvojicu používajú. */
.sekcia--graf {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr);
  gap: clamp(28px, 4vw, 64px) clamp(32px, 5vw, 76px); align-items: start;
}
@media (max-width: 900px) { .sekcia--graf { grid-template-columns: minmax(0, 1fr); } }
.karty--tri { margin-top: clamp(28px, 3vw, 44px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* ---- karta s grafom ---- */
.graf-karta {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-karta); padding: clamp(20px, 2vw, 30px); min-width: 0;
}
.sekcia--alt .graf-karta { border-color: transparent; }
.graf-titul {
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.graf-titul--dalsi { margin-top: 30px; }
.graf { margin-top: 14px; }
.graf svg { display: block; width: 100%; height: auto; overflow: visible; }
.graf text { font: 500 13px 'Sen', system-ui, sans-serif; fill: var(--body-soft); }
.graf text.hodnota { font-weight: 700; fill: var(--ink); }
.graf text.senica { font-weight: 700; fill: var(--ink); }
.graf .mriezka { stroke: var(--line); stroke-dasharray: 2 4; }
.graf .os { stroke: var(--line); }
.graf .podklad { fill: var(--paper-alt); }
.sekcia--alt .graf .podklad { fill: #EFEBE6; }

/* Farby — pomenované podľa toho, čo znamenajú, nie podľa odtieňa.
   Sivé = pred nástupom súčasného vedenia (dve obdobia, dva odtiene),
   oranžová = od roku 2019. V grafe zložiek je 2018 tmavosivá (patrí do
   obdobia 2015 – 2018), 2022 svetlooranžová a 2025 plný akcent. */
.f-obd-a, .graf .f-obd-a { background: #B8B2AB; fill: #B8B2AB; }
.f-obd-b, .graf .f-obd-b { background: #4C4741; fill: #4C4741; }
.f-2018, .graf .f-2018 { background: #4C4741; fill: #4C4741; }
.f-2022, .graf .f-2022 { background: #E9A57F; fill: #E9A57F; }
.f-2025, .graf .f-2025 { background: var(--akcent); fill: var(--akcent); }
.f-vnutorny, .graf .f-vnutorny { background: var(--ink); fill: var(--ink); }
/* Linky v časových radoch: zvislá = preberanie mesta (december 2018),
   vodorovná = priemer slovenských miest 2025. */
.graf .delic { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
.graf text.delic-text { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; fill: var(--ink); }
.graf .priemer { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 6 4; }
.graf text.hodnota--mala { font-size: 11px; }
/* Popisky hodnôt v časových radoch majú obrys vo farbe karty, aby cez ne
   neprechádzala linka priemeru ani mriežka. */
.graf text.hodnota--rad { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.graf text.rok--mala { font-size: 11px; }
.legenda i.f-delic { width: 0; border-left: 2px dashed var(--ink); border-radius: 0; }
.legenda i.f-priemer { width: 18px; height: 0; border-top: 2px dashed var(--ink); border-radius: 0; }
.f-cesty { background: var(--akcent); }
.f-projekty { background: var(--ink); }
.f-pozemky { background: #6B6660; }
.f-odpady { background: #B8B2AB; }
.f-pd { background: #E4DFDA; }
.graf .f-mesto { fill: #4C4741; }
.graf .f-senica { fill: var(--akcent); }

.legenda { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; font-size: 15px; color: var(--body-soft); }
.legenda li { display: flex; align-items: center; gap: 8px; }
.legenda i { display: block; width: 14px; height: 14px; border-radius: 4px; }

/* ---- pás rozdelenia úveru ---- */
.pas-uver { display: flex; gap: 2px; height: 40px; margin-top: 14px; border-radius: var(--r-dlazdica); overflow: hidden; }
.pas-uver span { display: block; height: 100%; }
.uver-zoznam { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.uver-zoznam li {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 40px; gap: 12px;
  align-items: center; font-size: clamp(15px, 1vw, 16.5px); line-height: 1.4; color: var(--body-soft);
}
.uver-zoznam i { display: block; width: 14px; height: 14px; border-radius: 4px; }
.uver-zoznam b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.uver-zoznam small { font-size: 14px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ---- dve čísla vedľa seba (preberanie 2018) ---- */
.dve-cisla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: clamp(18px, 2vw, 32px); }
.dve-cisla > div { border-top: 2px solid var(--ink); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.dve-cisla .rok { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dve-cisla .velke { font-size: clamp(34px, 3.4vw, 56px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.dve-cisla .popis { font-size: clamp(15.5px, 1.05vw, 17px); line-height: 1.5; color: var(--body-soft); }
.dve-cisla .popis b { color: var(--ink); font-weight: 700; }

/* ---- zistenie v rámčeku — rovnaký tvar ako v /prevadzky/ ----
   Tam žije v prevadzky.css, ktorý sa sem nenačítava (nesie mapu a filtre).
   Keď sa bude meniť tam, treba zmeniť aj tu. */
.zistenie {
  margin-top: 28px; border-left: 4px solid var(--akcent); border-radius: 0 18px 18px 0;
  background: var(--akcent-svetly); padding: 20px 26px; max-width: 80ch;
  font-size: clamp(17px, 1.15vw, 19.5px); line-height: 1.66; color: var(--body);
}
.zistenie strong { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 700; }
.zistenie b { color: var(--akcent-tmavy); font-weight: 700; }
.sekcia--alt .zistenie { background: #F8E4D8; }
/* V dvojici zistenie prechádza cez oba stĺpce. */
.zistenie--siroke { grid-column: 1 / -1; margin-top: 0; }

/* ---- tabuľky ---- */
.cisla-tabulka { margin-top: 22px; }
.cisla-tabulka .tabulka + .tabulka { margin-top: 14px; }
.cisla-tabulka .popisok { margin-top: 12px; }
.cisla-tabulka summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--muted); }
.cisla-tabulka summary:hover { color: var(--akcent); }
.tabulka--uzka table { min-width: 0; }
.tabulka--uzka { margin-top: 14px; }
.tabulka td { font-variant-numeric: tabular-nums; }
.tabulka tr.senica td { background: var(--akcent-svetly); }
.tabulka tr.senica td.tema { color: var(--akcent-tmavy); }
#susedia .tabulka { background: var(--paper); }
/* Sumy sa nesmú lámať — „837 492 €“ by v úzkom stĺpci skončil na troch riadkoch.
   Deväť stĺpcov sa do 1 040 px zmestí len s užšími bunkami. */
#susedia .tabulka td, #susedia .tabulka th { white-space: nowrap; padding-left: 13px; padding-right: 13px; }

.grafy-dva { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; margin-top: clamp(28px, 3vw, 44px); }

/* ---- tri čísla vedľa seba (mesačná splátka 2018 / 2022 / 2025) ----
   Rovnaký tvar ako .dve-cisla; posledné číslo (dnes) v akcente. */
.tri-cisla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: clamp(18px, 2vw, 28px); }
.tri-cisla > div { border-top: 2px solid var(--ink); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.tri-cisla .tri-cisla-teraz { border-color: var(--akcent); }
.tri-cisla .rok { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tri-cisla .velke { font-size: clamp(26px, 2.3vw, 38px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tri-cisla .tri-cisla-teraz .velke { color: var(--akcent); }
.tri-cisla .popis { font-size: clamp(15px, 1vw, 16.5px); line-height: 1.5; color: var(--body-soft); }
.tri-cisla .popis b { color: var(--ink); font-weight: 700; }
#splatka .tabulka--uzka { margin-top: 22px; background: var(--paper); }
#splatka .tabulka td { white-space: nowrap; }
#splatka .tabulka thead th { white-space: normal; }

/* ---- majetok: tabuľky ako pri mesačnej splátke ---- */
#majetok .tabulka--uzka { margin-top: 22px; }
#majetok .tabulka td { white-space: nowrap; }
#majetok .tabulka thead th { white-space: normal; }
#majetok .zistenie a { color: var(--akcent-tmavy); }

/* ---- otázky a zdroje ---- */
#otazky .cisla { margin-top: 0; }
.pribeh a, .zdroje a { color: var(--akcent); text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color .2s ease; }
.pribeh a:hover, .zdroje a:hover { border-color: var(--akcent); }
#preco .pribeh { margin-top: 0; }
.zdroje { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; max-width: 90ch; }
.zdroje li {
  position: relative; padding-left: 22px;
  font-size: clamp(16px, 1.05vw, 17.5px); line-height: 1.6; color: var(--body-soft);
}
.zdroje li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--akcent); }