/* Dizajn podľa Elspol Brand Guidelines (fokus.studio):
   energy yellow #FFE100, tech blue #3C2DB4, midnight blue #191441,
   concrete gray #EAEAEA (web), biela; font Avenir Next.
   "Elspol line" = zaoblená línia s náklonom 30°, jeden koniec skrytý
   za okrajom - dekoratívny prvok v spodku menu. */
:root {
  --zlta: #FFE100;          /* energy yellow */
  --modra: #3C2DB4;         /* tech blue */
  --tmava: #191441;         /* midnight blue - running text, podnadpisy */
  --siva: #EAEAEA;          /* concrete gray - pozadie webu */
  --okraj: #d9d9d9;
  --cervena: #a33;
  --zelena: #2b7a2b;
  --menu-sirka: 236px;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--tmava); background: var(--siva);
       font-family: "Avenir Next", Avenir, -apple-system, "Segoe UI",
                    Roboto, sans-serif; }

/* ------------------------------------------------------------ ľavé menu */
aside.menu { position: fixed; inset: 0 auto 0 0; width: var(--menu-sirka);
       background: var(--tmava); color: #fff; display: flex;
       flex-direction: column; overflow: hidden; z-index: 10; }
.menu .logo { padding: 22px 20px 18px; }
.menu .logo b { font-size: 24px; font-weight: 800; letter-spacing: .01em; }
.menu .logo b span { color: var(--zlta); }
.menu .logo small { display: block; color: #b9b4d6; font-size: 12px;
       margin-top: 2px; }
.menu nav { flex: 1; overflow-y: auto; padding-bottom: 90px; }
.menu .skupina { margin: 14px 0 4px; padding: 0 20px; font-size: 10px;
       letter-spacing: .14em; text-transform: uppercase; color: #8f89b5; }
.menu button.polozka { display: flex; align-items: center; gap: 10px;
       width: 100%; text-align: left; background: none; color: #d9d6ea;
       border: 0; border-left: 4px solid transparent; border-radius: 0;
       padding: 11px 16px; font-size: 14px; font-weight: 500; cursor: pointer; }
.menu button.polozka:hover { background: rgba(255,255,255,.06); filter: none; }
.menu button.polozka.aktivna { border-left-color: var(--zlta); color: #fff;
       background: rgba(255,225,0,.10); font-weight: 700; }
.menu button.polozka .ikona { width: 18px; text-align: center; flex: none; }
.menu .limitka { padding: 2px 20px 10px; font-size: 11px; color: #8f89b5; }
/* elspol line: zaoblený koniec viditeľný, druhý za okrajom, náklon 30° */
.menu::after { content: ""; position: absolute; left: -60px; bottom: 34px;
       width: 200px; height: 14px; border-radius: 0 7px 7px 0;
       background: var(--zlta); transform: rotate(-30deg); }

main { margin-left: var(--menu-sirka); max-width: 1010px;
       padding: 24px 28px 60px; }

/* ---------------------------------------------------------------- karty */
.panel { display: none; }
.panel.aktivny { display: block; }
.karta { background: #fff; border: 1px solid var(--okraj); border-radius: 12px;
         padding: 18px 20px; margin-bottom: 16px; }
.karta h2 { margin: 0 0 12px; font-size: 15px; font-weight: 700;
            text-transform: uppercase; letter-spacing: .05em;
            border-left: 4px solid var(--zlta); padding-left: 10px; }
.karta h2 .cislo { color: #b9b4d6; margin-right: 6px; }
label { display: block; font-size: 12px; color: #55506f; margin-bottom: 3px; }
input[type=text], select, textarea { width: 100%; padding: 8px 10px;
         border: 1px solid var(--okraj); border-radius: 8px; font-size: 14px;
         background: #fff; font-family: inherit; color: var(--tmava); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--modra);
         outline-offset: 0; }
input.chyba { border-color: var(--cervena); background: #fff6f6; }
textarea#parcelyText { min-height: 92px; resize: vertical; line-height: 1.6;
         font-size: 15px; letter-spacing: .02em; }
.mriezka { display: grid; gap: 12px; }
.g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: 1fr 1fr 1fr; }
.parcela { border: 1px solid var(--okraj); border-radius: 8px; padding: 12px;
           margin-bottom: 10px; background: #fafafa; }
.parcela .riadok-hlava { display: grid; grid-template-columns: 1fr 1fr;
           gap: 10px; align-items: end; }
.parcela input[readonly] { background: #f0f0f0; color: #444; }
.ez-riadok { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px;
           margin-top: 8px; align-items: end; }

button { border: 0; border-radius: 999px; padding: 9px 16px; font-size: 14px;
         font-weight: 600; font-family: inherit; cursor: pointer;
         background: #e4e2ef; color: var(--tmava); }
button:hover { filter: brightness(.95); }
button.hlavne { background: var(--zlta); color: var(--tmava); font-weight: 700;
         padding: 12px 24px; font-size: 15px; }
button.modre { background: var(--modra); color: #fff; }
button.mala { padding: 6px 12px; font-size: 12px; }
button.zmazat { background: #fff; color: var(--cervena);
         border: 1px solid #e5c9c9; }
.listy { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px;
         align-items: center; }
.pozn { font-size: 12px; color: #6b6685; margin-top: 6px; }

details.podrobne, details.napoveda { margin-top: 14px;
         border-top: 1px dashed var(--okraj); padding-top: 12px; }
details.podrobne summary, details.napoveda summary { font-size: 13px;
         color: #55506f; cursor: pointer; }
details.podrobne[open] summary { margin-bottom: 10px; }
details.napoveda { border: 0; background: #fff; border-radius: 12px;
         padding: 14px 20px; margin-bottom: 10px; }

/* ------------------------------------------------------------- priebeh */
.stav { display: none; }
.stav.aktivny { display: block; }
.kroky { list-style: none; margin: 0 0 14px; padding: 0; display: grid;
         gap: 8px; }
.kroky li { display: flex; align-items: center; gap: 10px; font-size: 14px;
         color: #9b96b8; }
.kroky li .znak { width: 22px; height: 22px; border-radius: 50%; flex: none;
         border: 2px solid #d0cde0; display: flex; align-items: center;
         justify-content: center; font-size: 12px; font-weight: 700; }
.kroky li.bezi { color: var(--tmava); font-weight: 700; }
.kroky li.bezi .znak { border-color: var(--zlta); background: var(--zlta); }
.kroky li.hotovy { color: #55506f; }
.kroky li.hotovy .znak { border-color: var(--zelena); color: var(--zelena); }
.pruh { height: 6px; background: #dddaea; border-radius: 3px; overflow: hidden;
         margin: 10px 0 4px; }
.pruh div { height: 100%; background: var(--zlta); width: 0;
         transition: width .3s; }
.captcha-banner { display: none; background: var(--zlta); border-radius: 8px;
      padding: 14px 16px; font-weight: 700; margin-bottom: 12px; }
.captcha-banner.aktivny { display: block; animation: blik 1.2s infinite alternate; }
#captchaFrame { width: 100%; height: 560px; border: 0; border-radius: 8px;
       margin-top: 10px; background: #fff; }
@keyframes blik { from { outline: 3px solid transparent; }
                  to { outline: 3px solid var(--modra); } }
pre.log { background: var(--tmava); color: #cfe8cf; font-size: 12px;
          padding: 12px; border-radius: 8px; max-height: 260px;
          overflow: auto; white-space: pre-wrap; margin: 0; }

/* ------------------------------------------- súhrn, výsledok, hlásenia */
.suhrn { display: none; border: 2px solid var(--zlta); }
.suhrn.aktivny { display: block; }
.suhrn table { border-collapse: collapse; font-size: 14px; }
.suhrn td { padding: 3px 18px 3px 0; }
.suhrn td:first-child { color: #6b6685; }
.vysledok { display: none; background: #eaf7ea; border: 1px solid #bfe3bf;
            border-radius: 8px; padding: 14px 16px; }
.vysledok.aktivny { display: block; }
.chyba-box { display: none; background: #fdecec; border: 1px solid #eec3c3;
             border-radius: 8px; padding: 14px 16px; color: #8c1f1f; }
.chyba-box.aktivny { display: block; }
.hlaska { display: none; margin-top: 10px; padding: 10px 12px;
             border-radius: 8px; font-size: 13px; background: #fdecec;
             border: 1px solid #eec3c3; color: #8c1f1f; }
.hlaska.aktivny { display: block; }
pre.report { background: #fff; border: 1px dashed #bbb; padding: 10px;
             border-radius: 6px; font-size: 12px; white-space: pre-wrap; }
pre.varovanie { background: #fff8dc; border: 1px solid #c9a400; padding: 10px;
             border-radius: 6px; font-size: 12px; white-space: pre-wrap; }
a.stiahnut { display: inline-block; background: var(--tmava);
             color: var(--zlta); padding: 10px 18px; border-radius: 999px;
             text-decoration: none; font-weight: 700; }
a.stiahnut.vedlajsi { background: #fff; color: var(--tmava);
             border: 1px solid var(--okraj); font-weight: 500; }
.rezim { display: none; background: #fff8dc; border: 1px solid #c9a400;
             border-radius: 8px; padding: 10px 14px; font-size: 13px;
             margin-bottom: 16px; }
.rezim.aktivny { display: flex; gap: 12px; align-items: center;
             justify-content: space-between; }

/* ---------------------------------------------------- asistent + pripomienky */
.chat { display: grid; gap: 10px; margin-bottom: 14px; }
.chat .sprava { max-width: 85%; padding: 10px 14px; border-radius: 14px;
       font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
.chat .otazka { background: var(--modra); color: #fff; justify-self: end;
       border-bottom-right-radius: 4px; }
.chat .odpoved { background: #f1effa; color: var(--tmava);
       justify-self: start; border-bottom-left-radius: 4px; }
.chat .caka { color: #6b6685; font-style: italic; }
.chat-vstup { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.pripomienka-zaznam { border-left: 3px solid var(--zlta); background: #fafafa;
       border-radius: 0 8px 8px 0; padding: 8px 12px; margin-bottom: 8px;
       font-size: 13px; }
.pripomienka-zaznam .meta { color: #8f89b5; font-size: 11px; margin-bottom: 2px; }

/* ------------------------------------------------------ vstupná brána */
.brana { position: fixed; inset: 0; z-index: 100; display: none;
       align-items: center; justify-content: center;
       background: var(--tmava); overflow: hidden; }
.brana.aktivna { display: flex; }
/* elspol line aj na bráne - zaoblený koniec, náklon 30°, druhý za okrajom */
.brana::after { content: ""; position: absolute; left: -140px; bottom: 90px;
       width: 460px; height: 20px; border-radius: 0 10px 10px 0;
       background: var(--zlta); transform: rotate(-30deg); }
.brana-okno { background: #fff; border-radius: 16px; padding: 34px 38px;
       width: min(420px, 92vw); text-align: center;
       box-shadow: 0 18px 60px rgba(0,0,0,.4); position: relative; z-index: 1; }
.brana-logo { font-size: 34px; font-weight: 800; }
.brana-logo span { color: var(--zlta); }
.brana-by { font-size: 13px; color: #8f89b5; margin: 2px 0 16px;
       letter-spacing: .08em; }
.brana-okno h1 { margin: 4px 0 6px; font-size: 19px; }
.brana-okno p { margin: 0 0 18px; font-size: 13px; color: #6b6685; }
.brana-okno input { text-align: center; font-size: 16px; padding: 11px;
       margin-bottom: 12px; }
.brana-okno button { width: 100%; }
.brana-okno button.brana-prepni { background: none; color: var(--modra);
       font-size: 13px; margin-top: 8px; padding: 4px; }
.menu .cakajuci { margin-left: auto; background: var(--zlta);
       color: var(--tmava); border-radius: 999px; padding: 1px 8px;
       font-size: 11px; font-weight: 800; }

.menu .pouzivatel { display: flex; align-items: center; gap: 8px;
       margin: 0 14px 6px; padding: 7px 10px; border-radius: 8px;
       background: rgba(255,255,255,.07); font-size: 13px; }
.menu .pouzivatel span { flex: 1; overflow: hidden; text-overflow: ellipsis;
       white-space: nowrap; font-weight: 600; }
.menu .pouzivatel button { background: none; color: #b9b4d6;
       border: 1px solid #4a4470; padding: 3px 9px; }

/* -------------------------------------------------- správca a reporty */
.admin-roh { position: fixed; top: 14px; right: 18px; z-index: 20;
       text-align: right; }
.admin-roh > button { background: #fff; border: 1px solid var(--okraj);
       box-shadow: 0 1px 4px rgba(25,20,65,.08); }
.admin-roh > button.prihlaseny { background: var(--tmava); color: var(--zlta); }
.admin-okno { display: none; margin-top: 8px; background: #fff;
       border: 1px solid var(--okraj); border-radius: 12px; padding: 14px;
       width: 240px; text-align: left;
       box-shadow: 0 6px 24px rgba(25,20,65,.18); }
.admin-okno.aktivny { display: block; }

.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
       gap: 12px; margin-bottom: 16px; }
.kpi .box { background: #fff; border: 1px solid var(--okraj);
       border-radius: 12px; padding: 12px 14px; }
.kpi .box b { display: block; font-size: 22px; }
.kpi .box span { font-size: 12px; color: #6b6685; }
table.report { width: 100%; border-collapse: collapse; font-size: 13px; }
table.report th { text-align: left; color: #6b6685; font-weight: 600;
       font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
       padding: 6px 10px; border-bottom: 2px solid var(--siva); }
table.report td { padding: 6px 10px; border-bottom: 1px solid var(--siva);
       vertical-align: top; }
table.report tr:last-child td { border-bottom: 0; }
.stitok { display: inline-block; padding: 1px 8px; border-radius: 999px;
       font-size: 11px; font-weight: 700; }
.stitok.ok { background: #e2f3e2; color: var(--zelena); }
.stitok.chyba { background: #fdecec; color: #8c1f1f; }
.priklad-band { background: var(--zlta); border-radius: 8px; padding: 8px 12px;
       font-size: 13px; font-weight: 700; margin-bottom: 12px; }

/* ------------------------------------------------------------ responzív */
@media (max-width: 900px) {
  aside.menu { position: static; width: auto; }
  .menu::after { display: none; }
  .menu nav { display: flex; overflow-x: auto; padding-bottom: 6px; }
  .menu .skupina { display: none; }
  .menu button.polozka { width: auto; white-space: nowrap;
       border-left: 0; border-bottom: 3px solid transparent; }
  .menu button.polozka.aktivna { border-bottom-color: var(--zlta); }
  main { margin-left: 0; padding: 16px; }
  .g2, .g3 { grid-template-columns: 1fr; }
}