/* ==========================================================================
   VZHĽAD APPKY -- všetky štýly na jednom mieste.

   Do 13. 10. 2026 bolo toto vnorené v index.html ako <style>. Kvôli tomu
   musela bezpečnostná politika (CSP) povoliť vnorené štýly ('unsafe-inline')
   a Internet.nl to hlásil ako slabinu: kto by dokázal do stránky podstrčiť
   kúsok HTML, mohol by ním meniť vzhľad. Teraz prehliadač prijme štýly LEN
   zo súborov z našej domény.

   NEPÍSAŤ do appky <style> ani style="..." v HTML reťazcoch (Leaflet
   divIcon, bindTooltip) -- prehliadač ich zablokuje a prvok zostane bez
   vzhľadu. Štýl patrí sem ako trieda. React style={{...}} je v poriadku,
   ten prehliadač nastavuje inak a politika ho nezastaví. Stráži test 42.
   ========================================================================== */

/* TMAVÁ TÉMA je zároveň predvolený vzhľad stránky (:root). Selektor
   [data-theme="dark"] tu MUSÍ byť tiež: náhľad témy vo výbere tém
   (VyberTemy.jsx) nesie data-theme na svojom obale vnútri stránky, ktorá
   má zapnutú inú tému. Bez neho si náhľad "Tmavej" zobral farby práve
   zapnutej témy a vyzeral svetlo (Michal, 11. 10. 2026). */
:root, [data-theme="dark"] {
  --bg: #0b0a14;
  --sidebar: #100e1c;
  --panel: #161425;
  --field-bg: #1c1930;
  --border: #262238;
  --border-soft: #1e1b2e;
  --text: #ecebf2;
  --text2: #8e8aa6;
  /* Popisky, časy a jednotky -- text, ktorý sa naozaj číta. Pôvodné
     #5b5773 malo na vstupnom poli 2,48:1, čo je nečitateľné. Odtieň
     zostal ten istý, len svetlejší: teraz 4,5:1 aj na najtmavšom podklade. */
  --text-muted: #84809f;
  /* Text, ktorý leží priamo na pozadí stránky, nie na bielej karte.
     --text-muted je na to príliš stlmená, preto má vlastnú farbu.
     V tmavej téme musí byť SVETLÁ -- tmavý odtieň by tu mal 1,7:1. */
  --text-on-bg: #8e8aa6;
  --violet: #7c5cff;
  --accent: #7c5cff;
  --accent-text: #ffffff;
  /* Podsvietenie vybraného riadku, skupiny a menu. Odvodené od --amber,
     lebo zvýrazňovacia farba tejto témy je jantárová (--nav-zvyraznenie).
     Bola tu fialová -- pozostatok z čias, keď bola fialová všade -- takže
     vybraný riadok svietidla bol jantárový, ale vybraná skupina fialová. */
  --accent-soft: rgba(255,183,77,.16);
  --violet-dim: #2e2560;
  --amber: #ffb74d;
  --amber-dim: #6b4e28;
  --amber-glow: rgba(255,183,77,.5);
  --green: #3ecf6a;
  --red: #ff5c5c;
  --red-glow: rgba(255,92,92,.5);
  --map-bg: #131024;

  /* Premenné efektov témy DARX. V jantárových témach sa prvky, ktoré ich
     používajú, vôbec nevykresľujú -- Pozadie.jsx vracia null a .darx-sklo je
     viazané na [data-theme="darx"]. Napriek tomu tu musia byť: prvý spoločný
     komponent, ktorý po nich siahne, by inak v týchto dvoch témach zmizol
     a hľadalo by sa to podľa prázdneho miesta na obrazovke. Kde efekt do
     jantárovej témy nepatrí, je hodnota zámerne vypnutá. */
  --bg-2: #131024;                /* druhý odtieň pozadia pod prechodom */
  --grid: transparent;          /* mriežka na pozadí patrí téme DARX */
  --cursor-glow: transparent;   /* žiara za kurzorom tiež */
  --glow-panel: none;           /* panely v jantárových témach nežiaria */
  --panel-glass: var(--panel);  /* bez skla -- plný panel */
  --dot: var(--amber);          /* guľôčka kurzora v zvýrazňovacej farbe témy */
  --particle: 124,92,255;       /* rgb --accent; Pozadie.jsx to číta ako trojicu */
}

[data-theme="light"] {
  --bg: #f7f6fb;
  --sidebar: #fbf9ff;
  --panel: #ffffff;
  --field-bg: #f3f2f9;
  --border: #dedbe9;
  --border-soft: #eae8f2;
  --text: #191627;
  --text2: #5d5878;
  /* Rovnaká oprava ako v tmavej téme: odtieň zostal, len tmavší.
     Pôvodné #8e8aa6 malo na vstupnom poli 2,98:1. */
  --text-muted: #6f6b8c;
  --text-on-bg: #3f3161;
  --violet: #5b34e0;
  --accent: #5b34e0;
  --accent-text: #ffffff;
  --accent-soft: rgba(168,106,8,.12);   /* jantárová podľa --amber tejto témy */
  --violet-dim: #d9d0ff;
  --amber: #a86a08;
  --amber-dim: #e8c68a;
  --amber-glow: rgba(255,183,77,.45);
  /* Zelená znamená "svieti" a číta sa najčastejšie. Na bielom paneli
     mala 3,47:1; stmavená na 4,88:1 (a 4,54:1 na pozadí stránky). */
  --green: #19823d;
  --red: #cf3a3a;
  --red-glow: rgba(207,58,58,.35);
  --map-bg: #eceaf5;

  /* Premenné efektov témy DARX. V jantárových témach sa prvky, ktoré ich
     používajú, vôbec nevykresľujú -- Pozadie.jsx vracia null a .darx-sklo je
     viazané na [data-theme="darx"]. Napriek tomu tu musia byť: prvý spoločný
     komponent, ktorý po nich siahne, by inak v týchto dvoch témach zmizol
     a hľadalo by sa to podľa prázdneho miesta na obrazovke. Kde efekt do
     jantárovej témy nepatrí, je hodnota zámerne vypnutá. */
  --bg-2: #eceaf5;                /* druhý odtieň pozadia pod prechodom */
  --grid: transparent;          /* mriežka na pozadí patrí téme DARX */
  --cursor-glow: transparent;   /* žiara za kurzorom tiež */
  --glow-panel: none;           /* panely v jantárových témach nežiaria */
  --panel-glass: var(--panel);  /* bez skla -- plný panel */
  --dot: var(--amber);          /* guľôčka kurzora v zvýrazňovacej farbe témy */
  --particle: 91,52,224;       /* rgb --accent; Pozadie.jsx to číta ako trojicu */
}

/* ================== TÉMY DARX ==================
   DARX je dvojica: svetlá a tmavá. Svetlá a Tmavá téma vyššie zostávajú
   jantárové -- fialová patrí len sem.

   NÁZVY PREMENNÝCH: appka mala svoje názvy skôr, než vznikla predloha,
   takže hodnoty z predlohy sú premenované na ne. Druhá súbežná sada
   farieb sa zámerne nezaviedla -- bola by to najkratšia cesta k tomu,
   že sa niekde ukáže stará farba. Preklad názvov:
      --pozadie -> --bg          --text-3   -> --text-muted
      --pozadie-2 -> --bg-2      --akcent   -> --accent, --violet
      --panel-plny -> --panel
      --panel   -> --panel-glass --zelena   -> --green
      --okraj   -> --border-soft --jantar   -> --amber
      --okraj-silny -> --border  --cervena  -> --red
      --text-2  -> --text2       --mriezka  -> --grid
      --ziara -> --glow-panel    --castica  -> --particle
      --gulicka -> --dot         --kurzor-ziara -> --cursor-glow

   --particle je zámerne bez rgb() -- je to len trojica čísel, lebo sa
   v plátne skladá do rgba(...) s premenlivou priehľadnosťou. */

/* --- DARX svetlá --- */
[data-theme="darx"] {
  --bg: #dfd4f6;
  --bg-2: #c6b2ec;
  --sidebar: rgba(255,255,255,.82);
  --panel: #ffffff;
  --panel-glass: rgba(255,255,255,.82);
  --field-bg: #ece3ff;
  --border: rgba(90,20,200,.42);
  --border-soft: rgba(90,20,200,.22);
  --text: #180f2e;
  --text2: #4e3d78;
  --text-muted: #65568c;   /* na --panel 6,4:1, na pozadí 4,6:1 */
  --text-on-bg: #3f3161;
  --violet: #6e19f8;
  --accent: #6e19f8;
  --accent-text: #ffffff;
  --accent-soft: rgba(110,25,248,.13);
  --violet-dim: #c8b0f8;
  --amber: #a86200;
  --amber-dim: #e6c48d;
  --amber-glow: rgba(255,183,77,.45);
  --green: #0a7f45;
  --red: #c22a2a;
  --red-glow: rgba(194,42,42,.32);
  --map-bg: #ddd0f4;
  --grid: rgba(90,20,200,.075);
  --particle: 110,25,248;
  --dot: #6e19f8;
  --cursor-glow: rgba(110,25,248,.17);
  --glow-panel: 0 4px 16px rgba(90,20,200,.10);
}

/* --- DARX tmavá --- */
[data-theme="darx-dark"] {
  --bg: #0a0613;
  --bg-2: #150d28;
  --sidebar: rgba(23,15,42,.62);
  --panel: #1a1130;
  --panel-glass: rgba(23,15,42,.62);
  --field-bg: rgba(255,255,255,.05);
  --border: rgba(168,108,255,.42);
  --border-soft: rgba(168,108,255,.20);
  --text: #efe9ff;
  --text2: #b8a6e0;
  --text-muted: #8878ab;   /* na --panel 4,6:1 */
  --text-on-bg: #b8a6e0;
  --violet: #a855f7;
  --accent: #a855f7;
  /* Tu jedinej téme NIE JE nápis na tlačidle biely. Biela mala na fialovej
     #a855f7 kontrast 3,96:1. Stmaviť samotnú --accent nešlo -- je to zároveň
     farba textu a rámikov na paneli, tam by sa kontrast naopak zhoršil.
     Tmavý nápis dáva 5,06:1 a --accent zostáva nedotknutá. */
  --accent-text: #0a0613;
  --accent-soft: rgba(168,108,255,.14);
  --violet-dim: #3b2168;
  --amber: #ffb547;
  --amber-dim: #6b4e28;
  --amber-glow: rgba(255,181,71,.5);
  --green: #3ddc97;
  --red: #ff6b6b;
  --red-glow: rgba(255,107,107,.5);
  --map-bg: #150d28;
  --grid: rgba(168,108,255,.06);
  --particle: 168,108,255;
  --dot: #b57cff;
  --cursor-glow: rgba(140,60,255,.22);
  --glow-panel: 0 0 24px rgba(140,60,255,.30);
}

/* --- Moderná: čierny bočný panel, biela plocha (10. 10. 2026) ---
   Michal: "Chcem jednu temu taku modernu, ze ten panel vlavo bude cierny
   a ostatok bude biele". Zvýraznenie zostáva fialové -- je to farba
   značky DARX. Kontrast odmeraný (zhluk-farby.js, kontrast): text 18,1:1,
   --text2 7,0:1, --text-muted 4,8:1, zelená, jantárová aj červená nad 4,5:1
   na pozadí stránky aj na bielom paneli. */
[data-theme="moderna"] {
  --bg: #f4f4f5;
  --bg-2: #f4f4f5;
  --sidebar: #0a0a0b;
  --panel: #ffffff;
  --panel-glass: var(--panel);
  --field-bg: #f4f4f5;
  --border: #dcdce0;
  --border-soft: #e9e9ec;
  --text: #09090b;
  --text2: #52525b;
  --text-muted: #6b6b73;
  --text-on-bg: #3f3f46;
  --violet: #6d28d9;
  --accent: #6d28d9;
  --accent-text: #ffffff;
  --accent-soft: rgba(109,40,217,.10);
  --violet-dim: #ede9fe;
  --amber: #b45309;
  --amber-dim: #f3d9b1;
  --amber-glow: rgba(217,119,6,.40);
  --green: #15803d;
  --red: #c42020;
  --red-glow: rgba(196,32,32,.32);
  --map-bg: #ececee;
  --grid: transparent;
  --cursor-glow: transparent;
  --glow-panel: none;
  --dot: var(--accent);
  --particle: 109,40,217;
}
/* ČIERNY PANEL. Premenné sa prepíšu len v ňom -- menu, nadpisy skupín aj
   počty si ich zdedia, takže v kóde appky sa kvôli tomu nič nemení.
   Odmerané na #0a0a0b: text 19:1, --text2 9,6:1, --text-muted 6,0:1;
   na zvýraznenej položke (#1f1f23) najmenej 5,0:1. */
[data-theme="moderna"] .darx-bocny-panel {
  --text: #fafafa;
  --text2: #b4b4bd;
  --text-muted: #8d8d97;
  --border: #1f1f23;
  --border-soft: #18181b;
  --violet: #a78bfa;
  --violet-dim: #1f1f23;
  --accent-soft: rgba(255,255,255,.07);
  --nav-zvyraznenie: #a78bfa;
  --znacka-text: #fff;
  color-scheme: dark;
}

/* ================= PRIHLASOVACIA OBRAZOVKA =================
   Neónové tmavé pozadie so svetelnými bodmi na plátne. Platí LEN tu --
   ostatné obrazovky appky sa riadia témou a týchto pravidiel sa netýkajú.

   Vrstvy nad sebou:
     0  plátno s bodmi (canvas)
     1  vodoznak -- opakujúce sa logo DARX
     2  mäkká žiara, ktorá sa ťahá za kurzorom
     3  karta s formulárom
   Vrstvy 0-2 majú pointer-events: none, aby sa nedali kliknúť.

   Sú position: fixed, takže pokryjú celé okno bez ohľadu na rolovanie.
   Po prihlásení komponent zmizne a s ním aj ony -- nič po nich nezostane. */
.darx-login {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;          /* na telefóne bez pruhu prehliadača */
  background: #0a0613;
  font-family: 'Archivo', system-ui, sans-serif;
}
.darx-login-platno   { position: fixed; inset: 0; z-index: 0; display: block; }
.darx-login-vodoznak {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("/vodoznak-vzor-logo.svg");
  background-repeat: repeat;
  /* Pomer 7:4 (dlaždica je 560x320). Iný pomer by logo roztiahol. */
  background-size: 420px 240px;
  opacity: .05;
}
.darx-login-zaria {
  position: fixed; z-index: 2; pointer-events: none;
  left: 0; top: 0; width: 900px; height: 900px;
  margin-left: -450px; margin-top: -450px;
  background: radial-gradient(circle, rgba(140,60,255,.30) 0%, rgba(140,60,255,.10) 35%, rgba(140,60,255,0) 68%);
  opacity: 0;
  transition: opacity .5s ease;
}
.darx-login-obal {
  position: relative; z-index: 3;
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}

/* sklenená karta */
.darx-login-karta {
  width: 100%; max-width: 400px;
  padding: 36px 34px 26px;
  border-radius: 20px;
  background: rgba(20, 12, 38, .58);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(168, 108, 255, .32);
  box-shadow: 0 0 0 1px rgba(140,60,255,.10), 0 24px 70px rgba(0,0,0,.6),
              inset 0 1px 0 rgba(255,255,255,.07);
}
.darx-login-logo {
  display: block; margin: 0 auto 28px; height: 46px; width: auto;
  filter: drop-shadow(0 0 18px rgba(160, 90, 255, .55));
}
.darx-login-karta label {
  display: block; font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(214, 198, 250, .92); margin-bottom: 8px;
}
.darx-login-karta input {
  width: 100%; height: 46px; padding: 0 14px; margin-bottom: 18px;
  border-radius: 11px; font-size: 15px; font-family: inherit;
  color: #fff; background: rgba(255,255,255,.05);
  border: 1px solid rgba(168, 108, 255, .26);
  outline: none; box-sizing: border-box;
  transition: border-color .25s, box-shadow .25s;
}
/* Odmerané na pozadí karty: biely text 15,8:1, výplňový text 5,1:1,
   popisky 11,4:1, chyba 5,4:1, text tlačidla 5,6:1 -- všetko nad 4,5:1.
   Žiara je pod kartou (z-index 2 vs 3), cez text nikdy neprejde. */
.darx-login-karta input::placeholder { color: rgba(206, 190, 240, .60); }
.darx-login-karta input:focus {
  border-color: rgba(178, 120, 255, .85);
  box-shadow: 0 0 0 3px rgba(140,60,255,.18), 0 0 22px rgba(150,70,255,.35);
}
.darx-login-chyba {
  color: #ff9ba6; font-size: 13px; margin: -8px 0 12px;
}
.darx-login-tlacidlo {
  width: 100%; height: 48px; margin-top: 6px;
  border: 0; border-radius: 11px; cursor: pointer;
  font-size: 15px; font-weight: 600; letter-spacing: .04em; color: #fff;
  font-family: inherit;
  /* Predloha mala prechod #7b23ff -> #a855f7. Na svetlejšom konci mal biely
     text len 2,92:1 (odmerané na skutočných bodoch obrazovky, najsvetlejší
     bod vyšiel #b87afa -- svetlejší než samotný prechod, lebo ho ešte
     nadvihuje biely lem inset). Svetlejší koniec je preto stmavený na
     #9333ea a lem stlmený. Fialová zostáva, čitateľnosť je nad 4,5:1. */
  background: linear-gradient(135deg, #6413d6 0%, #8b2bd9 100%);
  box-shadow: 0 0 26px rgba(140, 60, 255, .5), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .16s, box-shadow .25s, filter .2s;
}
.darx-login-tlacidlo:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 42px rgba(160, 80, 255, .75), inset 0 1px 0 rgba(255,255,255,.3);
}
.darx-login-tlacidlo:active:not(:disabled) { transform: translateY(0); }
.darx-login-tlacidlo:disabled { cursor: default; filter: saturate(.45) brightness(.8); }

.darx-login-jazyky {
  display: flex; justify-content: center; gap: 6px; margin-top: 20px;
}
.darx-login-jazyky button {
  background: none; border: 0; cursor: pointer; padding: 2px;
  line-height: 0; transition: opacity .2s;
}
.darx-login-spodok {
  margin: 10px 0 0; text-align: center; font-size: 11px;
  color: rgba(206, 190, 240, .72);
  font-family: 'JetBrains Mono', monospace;
}

/* Na telefóne sa pri 420 px zmestí na šírku len 0,93 dlaždice vodoznaku --
   logo je orezané z oboch strán a vyzerá ako náhodné tvary. */
@media (max-width: 480px) {
  .darx-login-vodoznak { background-size: 280px 160px; }
  .darx-login-karta { padding: 30px 22px 22px; }
}

/* Vypnuté animácie: žiara za kurzorom je pohyb, tak ju schováme.
   Body na plátne zastaví samotný komponent (kreslí jeden statický obrázok). */
@media (prefers-reduced-motion: reduce) {
  .darx-login-zaria { display: none; }
  .darx-login-tlacidlo { transition: none; }
  .darx-login-tlacidlo:hover:not(:disabled) { transform: none; }
}

/* ============ VRSTVY POZADIA (len témy DARX) ============
   Sú v hlavnom obale appky, nie v každej obrazovke zvlášť.
   Poradie: podklad (0) -> plátno s časticami (0) -> žiara (0) -> obsah (1).
   Všetky sú pointer-events: none, takže sa cez ne dá normálne klikať.

   V jantárovej svetlej a tmavej téme sa NEVYKRESĽUJÚ vôbec -- appka ich
   v tých témach ani nevloží do stránky. */
.darx-podklad, .darx-platno, .darx-kurzor-ziara {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
.darx-podklad {
  background:
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 58%),
    repeating-linear-gradient(0deg,  var(--grid) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 46px);
}
.darx-kurzor-ziara {
  inset: auto; left: 0; top: 0;
  width: 700px; height: 700px; margin: -350px 0 0 -350px;
  opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(circle, var(--cursor-glow) 0%, rgba(140,60,255,.04) 42%, rgba(140,60,255,0) 70%);
}

/* guľôčka namiesto kurzora -- zapína sa v Nastaveniach */
.darx-gulicka, .darx-prstenec {
  position: fixed; left: 0; top: 0; pointer-events: none;
  border-radius: 50%; opacity: 0; transition: opacity .3s ease;
}
.darx-gulicka {
  z-index: 999; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  background: var(--dot);
  box-shadow: 0 0 10px var(--dot), 0 0 26px rgba(140,60,255,.75);
  transition: opacity .3s ease, width .15s, height .15s, margin .15s;
}
.darx-prstenec {
  z-index: 998; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid var(--dot);
}
body.darx-gulicka-zap { cursor: none; }
body.darx-gulicka-zap .darx-gulicka,
body.darx-gulicka-zap .darx-prstenec { opacity: 1; }
/* Stlačené tlačidlo myši -- bodka sa nafúkne. */
body.darx-gulicka-stlacene .darx-gulicka {
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
}
/* Kde guľôčka prekáža, vraciame normálny kurzor:
   - mapa (Leaflet) má vlastné kurzory na ťahanie
   - v textových poliach musí zostať I-beam, inak človek nevidí, kam píše */
body.darx-gulicka-zap .leaflet-container,
body.darx-gulicka-zap .leaflet-container * { cursor: inherit; }
body.darx-gulicka-zap input,
body.darx-gulicka-zap textarea { cursor: text; }
body.darx-gulicka-zap button,
body.darx-gulicka-zap select,
body.darx-gulicka-zap a { cursor: pointer; }
/* Na dotykových zariadeniach kurzor nie je -- guľôčka tam nesmie byť vôbec. */
@media (hover: none) {
  body.darx-gulicka-zap { cursor: auto; }
  .darx-gulicka, .darx-prstenec { display: none !important; }
}

/* sklenené panely -- LEN hlavička, dlaždice a karty.
   backdrop-filter je drahý: nikdy na riadky zoznamu svietidiel
   ani na čokoľvek nad mapou. */
[data-theme="darx"] .darx-sklo,
[data-theme="darx-dark"] .darx-sklo {
  background: var(--panel-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--glow-panel);
}

@media (prefers-reduced-motion: reduce) {
  .darx-kurzor-ziara { display: none; }
}


/* ============ BOD 3a: klikacie dlaždice na Prehľade ============
   Dostane ich len dlaždica, ktorá má kam viesť. Dlaždica bez odkazu
   túto triedu nemá a nesmie predstierať, že je klikacia. */
.darx-dlazdica {
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.darx-dlazdica:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}
.darx-dlazdica:active { transform: translateY(0); }
.darx-dlazdica:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============ BOD 5: položka bočného menu ============
   Pod kurzorom sa jemne zvýrazní a pri ľavom okraji pribudne farebný
   pásik. Farba ide z premennej --accent, takže v jantárových témach je
   jantárová a v témach DARX fialová -- nič natvrdo.
   Pseudotriedy sa cez vnútorné štýly v Reacte spraviť nedajú, preto sú tu. */
.darx-nav-btn {
  position: relative;
  transition: background-color .12s ease, color .12s ease;
}

/* PREPÍNAČ zapnuté/vypnuté (Nastavenia -> Údaje v detaile svietidla).
   Predtým tam boli zaškrtnuté pilulky naskladané vedľa seba do zalamovaných
   riadkov -- dvadsať položiek, v ktorých sa nedalo nič nájsť. Prepínač je
   na prvý pohľad jasný a dá sa trafiť prstom.

   Celý riadok je klikací, nie len samotný prepínač: na mobile je terč
   vysoký 44 px, čo je najmenšia veľkosť, ktorú sa dá spoľahlivo trafiť
   palcom. Pseudotriedy tu musia byť, vnútorné štýly v Reacte ich nevedia. */
.darx-prep-riadok, .darx-plan-riadok {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%; min-height: 44px; padding: 4px 8px;
  /* Zbalený riadok plánu má mať jednu výšku pre všetky plány, nech je čas
     akokoľvek dlhý -- preto sa jeho obsah nezalamuje. */
  background: none; border: 0; border-radius: 8px;
  color: var(--text); font: inherit; font-size: 13px; text-align: left;
  transition: background-color .12s ease;
}
.darx-prep-riadok:not([disabled]), .darx-plan-riadok { cursor: pointer; }
.darx-prep-riadok:not([disabled]):hover, .darx-plan-riadok:hover { background: var(--accent-soft); }
.darx-prep-riadok:focus-visible, .darx-plan-riadok:focus-visible {
  outline: 2px solid var(--nav-zvyraznenie); outline-offset: 2px;
}
.darx-prep-riadok[disabled] { opacity: .55; }

/* Dráha prepínača. Šírka 40 a výška 24 je najmenšie, čo ešte vyzerá ako
   prepínač a nie ako bodka; terč na prst zväčšuje celý riadok vyššie. */
.darx-prep-draha {
  position: relative; flex: none; width: 40px; height: 24px;
  border-radius: 12px; background: var(--field-bg);
  border: 1px solid var(--border);
  transition: background-color .15s ease, border-color .15s ease;
}
.darx-prep-riadok[aria-checked="true"] .darx-prep-draha {
  background: var(--green); border-color: var(--green);
}
/* Guľôčka. Posun je 16 px = šírka dráhy (40) - priemer (18) - 2x okraj (3). */
.darx-prep-draha::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--text-muted);
  transition: transform .15s ease, background-color .15s ease;
}
.darx-prep-riadok[aria-checked="true"] .darx-prep-draha::after {
  transform: translateX(16px); background: #fff;
}
/* Kto nechce animácie, nedostane ich. */
@media (prefers-reduced-motion: reduce) {
  .darx-prep-riadok, .darx-plan-riadok, .darx-prep-draha, .darx-prep-draha::after { transition: none; }
}
/* Farba zvýraznenia. Zadanie: v jantárových témach jantárová ako inde
   v appke, v témach DARX fialová. Jedna premenná, ktorá by to vedela,
   v appke nie je -- --accent je fialový aj v svetlej a tmavej téme --
   preto sa nastavuje tu, na jednom mieste. */
/* Zvýrazňovacia farba témy. Priehľadnú podobu drží --accent-soft, ktorá je
   teraz v každej téme odvodená od tej istej farby -- takže vybraný riadok
   aj vybraná skupina majú v jednej téme rovnaký odtieň. */
:root, [data-theme="light"], [data-theme="dark"] {
  --nav-zvyraznenie: var(--amber);
}
[data-theme="darx"], [data-theme="darx-dark"], [data-theme="moderna"] {
  --nav-zvyraznenie: var(--accent);
}

.darx-nav-btn::before {
  content: "";
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--nav-zvyraznenie);
  opacity: 0;
  transition: opacity .12s ease;
}
/* Zvýraznenie pod kurzorom len tam, kde kurzor naozaj je. Na dotykovom
   displeji by inak zostalo "zaseknuté" po klepnutí. */
@media (hover: hover) {
  .darx-nav-btn:hover { background: var(--accent-soft) !important; color: var(--text) !important; }
  .darx-nav-btn:hover::before { opacity: .85; }
}
/* Na dotyk reaguje stlačením. */
.darx-nav-btn:active { background: var(--accent-soft) !important; }
/* Klávesnica musí byť vidieť rovnako dobre ako myš. */
.darx-nav-btn:focus-visible {
  outline: 2px solid var(--nav-zvyraznenie);
  outline-offset: -2px;
  background: var(--accent-soft) !important;
}
/* Položka, na ktorej práve som -- výraznejšie a trvalo, aby sa nedala
   zameniť so zvýraznením pod kurzorom. */
.darx-nav-aktivna::before { opacity: 1; width: 3px; }
.darx-nav-aktivna { font-weight: 500; }

/* ============ BOD 4: prepínač obce ============
   Rozbaľovací zoznam <select> kreslí sám prehliadač a bez tohto by ho
   v tmavej téme nakreslil bielo -- nevie totiž, že stránka je tmavá.
   color-scheme mu to povie; položky dostanú farby témy navyše. */
[data-theme="dark"], [data-theme="darx-dark"] { color-scheme: dark; }
[data-theme="light"], [data-theme="darx"], [data-theme="moderna"] { color-scheme: light; }
select option {
  background: var(--panel);
  color: var(--text);
}

/* pás hore -- fialová značky prechádza do jantárovej farby svetla */
.darx-topbar { height: 2px; background: linear-gradient(90deg, var(--violet), var(--amber)); opacity: .7; }
[data-theme="darx"] .darx-topbar { height: 3px; opacity: 1; }

/* Porucha pulzuje. Zámerne pomaly a mierne -- prvok, na ktorý sa
   človek pozerá hodiny, sa pri rýchlom blikaní prestane vnímať. */
/* pás značky navrchu obsahu */
.darx-strip {
  height: 2px;
  background: linear-gradient(90deg, var(--violet) 0%, var(--amber) 55%, transparent 100%);
  opacity: .85;
}

[data-theme="darx"] .darx-strip {
  height: 3px;
  background: linear-gradient(90deg, var(--violet) 0%, #7440e4 45%, #b491ff 75%, transparent 100%);
  opacity: 1;
}

@keyframes darx-fault-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255,92,92,.35)); }
  50%      { filter: drop-shadow(0 0 13px rgba(255,92,92,.9)); }
}
.darx-fault { animation: darx-fault-pulse 2.4s ease-in-out infinite; }

@keyframes darx-dot-pulse {
  0%, 100% { box-shadow: 0 0 4px 1px rgba(255,92,92,.3); }
  50%      { box-shadow: 0 0 11px 3px rgba(255,92,92,.8); }
}
.darx-dot-fault { animation: darx-dot-pulse 2.4s ease-in-out infinite; }

/* Gateway na mape -- ŽLTÁ kocka, ktorá pokojne pulzuje (Michal 11. 10.
   2026: "gateway ma byt zltej farby na mape"; dovtedy bola fialová).
   Tmavý okraj: žltá s bielym okrajom by sa na svetlej mape stratila,
   s tmavým je vidieť na svetlej, tmavej aj satelitnej mape rovnako.
   Bez popisu: názov sa ukáže po nabehnutí myšou. Pri výpadku
   sa kocka zmení na červenú a pulzuje výraznejšie a rýchlejšie.
   Farba je jedna pre všetky témy -- a tá istá je v legende pod mapou. */
:root { --gateway: #facc15; --gateway-okraj: rgba(28,22,0,.85); }
.darx-gw-icon { background: none; border: none; }
.darx-gw-box {
  display: block; width: 13px; height: 13px; border-radius: 2px;
  background: var(--gateway);
  border: 2px solid var(--gateway-okraj);
  animation: darx-gw-pulse 2.8s ease-out infinite;
}
@keyframes darx-gw-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(250,204,21,.6); }
  70%  { box-shadow: 0 0 0 13px rgba(250,204,21,0); }
  100% { box-shadow: 0 0 0 0   rgba(250,204,21,0); }
}
.darx-gw-box.darx-gw-fault {
  background: var(--red);
  animation: darx-gw-pulse-fault 1.4s ease-out infinite;
}
@keyframes darx-gw-pulse-fault {
  0%   { box-shadow: 0 0 0 0   rgba(255,92,92,.85); }
  70%  { box-shadow: 0 0 0 16px rgba(255,92,92,0); }
  100% { box-shadow: 0 0 0 0   rgba(255,92,92,0); }
}

/* Rozpínajúci sa krúžok okolo svietidla s poruchou. Leží nad mapou,
   preto je priehľadný a klikať sa cezeň dá na značku pod ním. */
.darx-pulse-icon { pointer-events: none; background: none; border: none; }
.darx-pulse-ring {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,92,92,.85);
  animation: darx-ring 2.4s ease-out infinite;
}
@keyframes darx-ring {
  0%   { transform: scale(.45); opacity: .95; }
  75%  { transform: scale(2.8);  opacity: 0; }
  100% { transform: scale(2.8);  opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .darx-fault, .darx-dot-fault, .darx-gw-box { animation: none; }
  .darx-pulse-ring { animation: none; opacity: .8; }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); font-family: 'Archivo', system-ui, sans-serif; }

.leaflet-container { background: var(--map-bg); }
.leaflet-tile { filter: var(--map-filter, none); }
.leaflet-control-attribution {
  background: var(--panel) !important;
  color: var(--text2) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--text2) !important; }
.leaflet-bar a {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ---------------- mobilné zobrazenie ----------------
   Vnútorné (inline) štýly v Reacte majú prednosť pred týmto súborom,
   preto sú pravidlá označené !important. Celá logika mobilu je tu --
   v .jsx súboroch pribudli len názvy tried (className).
   Hranica 860 px = telefón na výšku aj menší tablet.            */

/* ZNAČKA S POČTOM V MENU
   Kruh s číslom. min-width drží tvar aj pri jednej číslici, takže sa značka
   pri 1 a pri 99+ líši len šírkou, nie výškou -- riadok menu preto neposkočí.
   flex-shrink: 0, aby ju dlhý názov položky nezmáčkol. */
.darx-znacka {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 9px; background: var(--red, #ff5c5c); color: var(--znacka-text, #fff);
  font-size: 11px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
/* FARBA ČÍSLA NA ZNAČKE. Nameraný kontrast, nie dojem (zadanie 43).
   Značka je červená pilulka a --red je v každej téme iná:

     svetlá   #cf3a3a  biele číslo 4,86:1   -> biele zostáva
     darx     #c22a2a  biele číslo 5,74:1   -> biele zostáva
     tmavá    #ff5c5c  biele číslo 3,03:1   -> PREPADÁ (AA žiada 4,5)
     darx-dark #ff6b6b biele číslo 2,78:1   -> PREPADÁ aj pre veľký text

   V tmavých témach je červená zámerne SVETLÁ, aby pilulka na tmavom paneli
   vôbec bola vidieť (5,56:1 a 6,06:1 voči panelu). Stmaviť ju by kontrast
   číslice spravilo, ale pilulka by sa stratila v paneli (spadla by na
   ~3,0:1). Preto sa v tmavých témach mení ČÍSLO, nie pilulka:
   #1a1414 dáva 6,01:1 a 6,56:1 -- a pilulka zostáva rovnako viditeľná. */
:root { --znacka-text: #1a1414; }               /* :root = tmavá téma */

/* FARBA TEXTU VYFARBENEJ ČASTI PREPÍNAČA (web/src/Prepinac.jsx).
   Nameraný kontrast voči tomu, čo je NAOZAJ vidieť -- teda voči zmiešaniu
   --accent-soft s panelom pod ňou, nie voči panelu samotnému:

     svetlá    #5b34e0 na svetlom podklade   6,9:1  -> zostáva --accent
     darx      #6e19f8 na svetlom podklade   6,6:1  -> zostáva --accent
     tmavá     #7c5cff na rgb(59,46,43)      3,00:1 -> PREPADÁ
     darx-dark #a855f7 na rgb(46,30,77)      3,77:1 -> PREPADÁ

   V tmavých témach sa preto berie svetlejší odtieň TEJ ISTEJ farby:
   #a68fff dáva 4,96:1 a #c084fc 5,64:1. Platilo to aj pre prepínač
   podkladov mapy, ktorý tento vzhľad mal prvý -- a keďže obe miesta kreslí
   jeden komponent, opravou sa spravili obe. */
:root { --prepinac-aktivny: #a68fff; }          /* :root = tmavá téma */
[data-theme="light"], [data-theme="darx"], [data-theme="moderna"] { --prepinac-aktivny: var(--accent); }
[data-theme="dark"] { --prepinac-aktivny: #a68fff; }
[data-theme="darx-dark"] { --prepinac-aktivny: #c084fc; }
[data-theme="light"], [data-theme="darx"], [data-theme="moderna"] { --znacka-text: #fff; }
[data-theme="dark"], [data-theme="darx-dark"] { --znacka-text: #1a1414; }

/* Značka na tlačidle ☰ leží nad jeho rohom, preto malý obrys vo farbe
   pozadia -- inak by splynula s rámom tlačidla. */
.darx-znacka-rohova .darx-znacka { box-shadow: 0 0 0 2px var(--bg, #0e0c16); }

/* Pulz LEN krátko po zvýšení počtu. Trvalé blikanie oko po dvoch dňoch
   prestane vnímať a upozornenie prestane fungovať práve vtedy, keď je
   najviac treba -- preto to zastavuje JavaScript po 20 sekundách. */
@keyframes darx-pulz {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,92,92,.65); }
  70%  { transform: scale(1.12); box-shadow: 0 0 0 7px rgba(255,92,92,0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,92,92,0); }
}
.darx-znacka-pulz { animation: darx-pulz 1.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  /* Pri obmedzení pohybu sa nepulzuje vôbec. Značka zostáva červená --
     informácia sa nestráca, len sa nehýbe. */
  .darx-znacka-pulz { animation: none; }
}

.darx-burger, .darx-backdrop { display: none; }

@media (max-width: 860px) {

  /* bočný panel + obsah vedľa seba -> jeden stĺpec */
  .darx-shell { grid-template-columns: 1fr !important; }

  /* bočný panel sa skryje mimo obrazovky, vysunie sa až po klepnutí na ☰ */
  /* z-index NAD 1000: ovládanie mapy (Leaflet: +/-, popis podkladu) má
     z-index 1000 a leží v stránke za panelom, takže pri rovnakom čísle
     vyhrávalo -- tlačidlá mapy presvitali cez vysunuté menu (10. 10. 2026). */
  .darx-side {
    position: fixed !important;
    top: 0; left: 0; width: 264px; z-index: 1100;
    transform: translateX(-100%);
    transition: transform .22s ease;
  }
  .darx-side-open { transform: translateX(0); box-shadow: 0 0 42px rgba(0,0,0,.55); }
  .darx-backdrop  { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1050; }
  .darx-burger    { display: inline-flex !important; }

  .darx-main { padding: 12px 12px 60px !important; }

  /* dvojstĺpcové bloky (mapa + upozornenia) a formuláre pod seba */
  .darx-2col, .darx-form { grid-template-columns: 1fr !important; }
  .darx-form > * { min-width: 0; }

  /* zoznamy: hlavička preč, z riadku sa stane karta.
     Prvý údaj (kód svietidla, meno) ide na vlastný riadok,
     zvyšok sa poskladá pod neho.                                 */
  .darx-thead { display: none !important; }
  .darx-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: baseline;
    padding: 12px 14px !important;
  }
  .darx-row > * { min-width: 0; }
  .darx-row > *:first-child { flex-basis: 100%; font-size: 14px; }

  /* náhľad importu z Excelu je naozajstná tabuľka -- tá sa
     nerozkladá na karty, posúva sa prstom do strán */
  .darx-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .darx-scroll-x > * { min-width: 640px; }

  .darx-hide-sm { display: none !important; }

  /* nadpis dlaždice na mobile neorezávať -- "SVIETIDLÁ…", "SPOTRE…",
     "PRIEMERNÉ STMI…" nepovedali, čo to číslo vlastne je (7. 10. 2026) */
  .darx-stat-popis { white-space: normal !important; line-height: 1.25; }
  /* číslo pod nadpis -- inak jedno dlhé slovo (SPOTREBA) aj tak zostane orezané */
  .darx-stat { flex-direction: column; align-items: flex-start !important; gap: 2px !important; }

  /* prsty potrebujú väčší cieľ ako myš */
  input[type="range"] { height: 28px; }
}

input, select, button, textarea { font-family: inherit; color-scheme: light dark; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

/* --- TLAČ REPORTU (obrazovka Reporty) ------------------------------------
   Bolo to vnorené <style> priamo v Reports.jsx. Triedy používa len obrazovka
   Reporty, takže na ostatných obrazovkách sa nič nemení. */
.darx-printhead { display: none; }
@media print {
  body { background: #fff !important; }
  .darx-noprint { display: none !important; }
  .darx-report { break-inside: avoid; }
  .darx-printhead { display: flex !important; }
}

/* --- ŠPENDLÍK POLOHY na malej mape (Montáž na stĺpe, nová úloha) ----------
   Leaflet divIcon dostáva HTML ako reťazec. style="..." v ňom by prísna
   bezpečnostná politika zablokovala a špendlík by zmizol -- preto trieda.
   Vlastný špendlík, nie Leafletový: ten si ťahá obrázok z unpkg.com. */
.darx-spendlik {
  display: block; width: 22px; height: 22px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--accent); border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.darx-spendlik-maly { width: 20px; height: 20px; }

/* --- KANDIDÁT NA GATEWAY (Návrh umiestnenia gatewaya) ---------------------
   Krúžok s poradovým číslom. Vlastný bod je fialový, vybraný jantárový
   (vybraný má prednosť, preto je jeho pravidlo posledné). */
.darx-kandidat {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--panel); color: var(--text); border: 2px solid var(--border);
  font: 600 11px/1 'JetBrains Mono', monospace;
  box-shadow: 0 1px 5px rgba(0,0,0,.45);
}
.darx-kandidat-vlastny { background: var(--violet); border-color: var(--violet); }
.darx-kandidat-vybraty { background: var(--amber); border-color: var(--amber); color: var(--accent-text); }