:root {
    --les-tmava: #1f3d2b;
    --les: #2e6b3f;
    --list: #8bc34a;
    --drevo: #a9753f;
    --piesok: #f6f1e7;
    --text: #22302a;
}

html, body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    color: var(--text);
    background: var(--piesok);
}

.logo { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.6rem; letter-spacing: .12em; }
.logo svg { width: 2.6rem; height: 2.6rem; }
.logo.mensie { font-size: 1.1rem; color: #fff; letter-spacing: .06em; }
.logo.mensie svg { width: 2rem; height: 2rem; }

.prihlasenie-strana { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }
.prihlasenie-strana.jednostlpec { grid-template-columns: 1fr; }

.prihlasenie-znacka {
    color: #fff; padding: 3rem 4rem; display: flex; flex-direction: column; justify-content: center; gap: 1.2rem;
    background:
        radial-gradient(circle at 15% 85%, rgba(139,195,74,.35), transparent 45%),
        radial-gradient(circle at 90% 10%, rgba(169,117,63,.35), transparent 40%),
        linear-gradient(145deg, var(--les-tmava), var(--les));
}
.prihlasenie-znacka h1 { font-size: 2.4rem; line-height: 1.15; margin: .5rem 0 0; }
.prihlasenie-znacka p { font-size: 1.1rem; opacity: .9; max-width: 32rem; margin: 0; }
.znacka-body { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .7rem; }
.znacka-body li { display: flex; align-items: center; gap: .8rem; font-size: 1.05rem; }
.znacka-body .ikona { background: rgba(255,255,255,.14); border-radius: .6rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; }
.znacka-pata { margin-top: 2rem; font-size: .9rem; opacity: .8; border-left: 3px solid var(--list); padding-left: .8rem; }

.prihlasenie-formular { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; padding: 2rem; min-height: 100vh; }
.prihlasenie-logo .logo { color: var(--les-tmava); font-size: 2.2rem; }
.prihlasenie-logo .logo svg { width: 3.4rem; height: 3.4rem; }
.karta {
    width: 100%; max-width: 26rem; background: #fff; padding: 2.4rem 2.2rem; border-radius: 1.2rem;
    box-shadow: 0 20px 50px rgba(31,61,43,.15); display: flex; flex-direction: column; gap: .4rem;
}
.karta h2 { margin: 0; color: var(--les-tmava); font-size: 1.8rem; }
.podnadpis { color: #667; margin: 0 0 1rem; }
.karta label { font-weight: 600; font-size: .9rem; margin-top: .8rem; }
.karta input {
    padding: .75rem .9rem; border: 1.5px solid #d6d9d2; border-radius: .6rem; font-size: 1rem; background: #fafaf7;
}
.karta input:focus { outline: none; border-color: var(--les); box-shadow: 0 0 0 3px rgba(139,195,74,.35); }

.tlacidlo {
    margin-top: 1.4rem; padding: .85rem 1.2rem; border: 0; border-radius: .6rem; cursor: pointer; font-size: 1rem; font-weight: 700;
    color: #fff; background: linear-gradient(135deg, var(--les), var(--les-tmava)); transition: transform .1s, box-shadow .2s;
}
.tlacidlo:hover { box-shadow: 0 6px 16px rgba(46,107,63,.4); transform: translateY(-1px); }
font-size: .85rem; color: #fff; }

.chyba { background: #fdecea; color: #a12622; padding: .7rem .9rem; border-radius: .5rem; margin-bottom: .5rem; font-size: .92rem; }
.validation-message { color: #a12622; font-size: .82rem; }
.poznamka { text-align: center; color: #889; font-size: .8rem; margin: 1rem 0 0; }

.horna-lista {
    display: flex; justify-content: space-between; align-items: center; padding: .8rem 2rem;
    background: linear-gradient(135deg, var(--les-tmava), var(--les)); color: #fff;
}
.pouzivatel { display: flex; align-items: center; gap: 1rem; }
.pouzivatel a { color: #dff0c8; text-decoration: none; font-size: .9rem; }
.pouzivatel form { margin: 0; }

.uvod { max-width: 70rem; margin: 0 auto; padding: 3rem 2rem; }
.uvod h1 { color: var(--les-tmava); margin-bottom: .3rem; }
.dlazdice { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.dlazdica { background: #fff; border-radius: 1rem; padding: 1.5rem; border-top: 4px solid var(--list); box-shadow: 0 8px 24px rgba(31,61,43,.08); }
.dlazdica .ikona { font-size: 2rem; }
.dlazdica h3 { margin: .5rem 0 .2rem; color: var(--les-tmava); }
.dlazdica p { margin: 0; color: #778; }

.hlavicka-stranky { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.hlavicka-stranky .tlacidlo { margin-top: .5rem; }
.panel { background: #fff; border-radius: 1rem; padding: 1.5rem; margin-top: 1.5rem; box-shadow: 0 8px 24px rgba(31,61,43,.08); }
.panel h2 { margin-top: 0; color: var(--les-tmava); }
.panel label { display: block; font-weight: 600; font-size: .9rem; margin: .6rem 0 .3rem; }
.panel input { width: 100%; box-sizing: border-box; padding: .7rem .9rem; border: 1.5px solid #d6d9d2; border-radius: .6rem; font-size: 1rem; background: #fafaf7; }
.panel input:focus { outline: none; border-color: var(--les); box-shadow: 0 0 0 3px rgba(139,195,74,.35); }
.mriezka-poli { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1.2rem; }
.akcie { display: flex; gap: .7rem; margin-top: .5rem; }
.akcie .tlacidlo { margin-top: 1rem; }
.tlacidlo.sekundarne { background: #eef1e9; color: var(--les-tmava); }
.tlacidlo.sekundarne:hover { background: #e1e7d6; box-shadow: none; }
.tlacidlo.male.sekundarne { background: #eef1e9; color: var(--les-tmava); }
.tabulka { width: 100%; border-collapse: collapse; }
.tabulka th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #778; padding: .6rem .8rem; border-bottom: 2px solid #e6e9df; }
.tabulka td { padding: .75rem .8rem; border-bottom: 1px solid #eef0e8; }
.tabulka tr.neaktivny td { opacity: .55; }
.akcie-riadok { display: flex; gap: .4rem; justify-content: flex-end; }
.stitok { padding: .2rem .6rem; border-radius: 99px; font-size: .78rem; font-weight: 700; }
.stitok.ok { background: #e3f3d0; color: var(--les); }
.stitok.off { background: #eee; color: #777; }
.stitok.admin { background: #f3e6d3; color: var(--drevo); }
.poznamka-vlavo { color: #778; font-size: .85rem; margin: .6rem 0 0; }
.dalsie-udaje { margin-top: 1rem; border: 1px solid #dfe3d6; border-radius: .6rem; padding: .6rem .9rem; background: #fbfaf5; }
.dalsie-udaje > summary { cursor: pointer; font-weight: 700; color: var(--les-tmava); }
.dalsie-udaje textarea { width: 100%; font: inherit; padding: .5rem; border: 1px solid #cfd6c4; border-radius: .5rem; resize: vertical; }
.dalsi-udaj { font-size: .8rem; color: #444; margin-bottom: .2rem; }
.prazdne { color: #889; text-align: center; margin: 1rem 0; }

.panel select, .filter select { padding: .6rem .8rem; border: 1.5px solid #d6d9d2; border-radius: .6rem; font-size: 1rem; background: #fafaf7; }
.panel input[type=date] { font-family: inherit; }
.panel .spz-vstup { text-transform: uppercase; font-weight: 700; letter-spacing: .08em; }
.panel .kg-vstup { font-weight: 700; text-align: right; }
.siroke { grid-column: 1 / -1; }
.uspech { background: #e3f3d0; color: var(--les-tmava); padding: .7rem .9rem; border-radius: .5rem; margin-bottom: .5rem; font-size: .92rem; font-weight: 600; }
.tlacidlo.nebezpecne { background: #fdecea; color: #a12622; }
.tlacidlo[disabled] { opacity: .5; cursor: not-allowed; }
a.tlacidlo { text-decoration: none; display: inline-block; }

.filter { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.filter label { margin: 0 0 .3rem; }
.filter-akcia { margin-left: auto; }
.filter-akcia .tlacidlo { margin: 0; }
.filter-vpravo { margin: .5rem 0 0; }
.suhrn { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.suhrn div { background: var(--piesok); border-radius: .8rem; padding: .7rem 1.2rem; display: flex; flex-direction: column; border-left: 4px solid var(--list); }
.suhrn span { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: #778; }
.suhrn strong { font-size: 1.3rem; color: var(--les-tmava); }
.tabulka-obal { overflow-x: auto; }
.tabulka .cislo, .tabulka th.cislo { text-align: right; }
.spz { background: #fff; border: 2px solid var(--les-tmava); border-radius: .35rem; padding: .1rem .5rem; font-weight: 800; letter-spacing: .08em; font-size: .85rem; white-space: nowrap; }

.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.2rem; margin-top: 1.5rem; }
.kpi-karta { background: linear-gradient(135deg, var(--les), var(--les-tmava)); color: #fff; border-radius: 1rem; padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: .2rem; box-shadow: 0 8px 24px rgba(31,61,43,.18); }
.kpi-karta span { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.kpi-karta strong { font-size: 1.7rem; }
.kpi-karta small { color: #cfe5b8; }
.dva-grafy { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1.5rem; }

.stlpcovy-graf { display: flex; align-items: flex-end; gap: .3rem; height: 16rem; padding-top: 1.5rem; }
.stlpec { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .25rem; }
.stlpec .tyc { width: 100%; max-width: 2.2rem; border-radius: .4rem .4rem 0 0; background: linear-gradient(180deg, var(--list), var(--les)); transition: height .3s; }
.stlpec .hodnota { font-size: .65rem; color: #667; height: 1rem; white-space: nowrap; }
.stlpec .popis { font-size: .7rem; color: #778; }

.kolac-obal { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.kolac { width: 11rem; height: 11rem; border-radius: 50%; position: relative; flex-shrink: 0; }
.kolac::after { content: ""; position: absolute; inset: 28%; background: #fff; border-radius: 50%; }
.legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; flex: 1; min-width: 12rem; }
.legenda li { display: grid; grid-template-columns: .9rem 1fr auto auto; gap: .6rem; align-items: center; font-size: .9rem; }
.legenda .farba { width: .9rem; height: .9rem; border-radius: .25rem; }
.legenda .podiel { font-weight: 700; }
.legenda .t { color: #778; }

.vodorovny-graf { display: grid; gap: .9rem; }
.vodorovny-riadok .hlavicka { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: .25rem; }
.vodorovny-riadok .pas { background: #eef1e9; border-radius: 99px; height: .7rem; overflow: hidden; }
.vodorovny-riadok .vypln { height: 100%; border-radius: 99px; }

.uvod-banner {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; color: #fff;
    padding: 1.8rem 2rem; border-radius: 1.2rem;
    background: radial-gradient(circle at 90% 20%, rgba(139,195,74,.4), transparent 45%), linear-gradient(135deg, var(--les-tmava), var(--les));
    box-shadow: 0 12px 30px rgba(31,61,43,.2);
}
.uvod-banner h1 { color: #fff; margin: 0 0 .3rem; }
.uvod-banner p { margin: 0; opacity: .85; }
.banner-akcie { display: flex; gap: .7rem; flex-wrap: wrap; }
.banner-akcie .tlacidlo { margin: 0; background: var(--list); color: var(--les-tmava); }
.banner-akcie .tlacidlo.sekundarne { background: rgba(255,255,255,.18); color: #fff; }
.stlpec .tyc.dnes { background: linear-gradient(180deg, #d9a441, var(--drevo)); }
.odkaz-text { color: var(--les); font-weight: 600; text-decoration: none; }
.odkaz-text:hover { text-decoration: underline; }

.aplikacia { display: grid; grid-template-columns: 16rem 1fr; min-height: 100vh; }
.menu {
    position: sticky; top: 0; height: 100vh; box-sizing: border-box; padding: 1.2rem 1rem; color: #fff;
    display: flex; flex-direction: column; gap: 1.5rem;
    background: linear-gradient(180deg, var(--les-tmava), var(--les));
}
.menu nav { display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.menu-polozka {
    display: flex; align-items: center; gap: .6rem; padding: .65rem .9rem; border-radius: .6rem;
    color: #e6f2d8; text-decoration: none; font-weight: 600; transition: background .15s;
}
.menu-polozka:hover { background: rgba(255,255,255,.12); }
.menu-polozka.active { background: var(--list); color: var(--les-tmava); }
.podmenu { display: flex; flex-direction: column; gap: .2rem; margin-left: 1.4rem; padding-left: .6rem; border-left: 2px solid rgba(255,255,255,.2); }
.skupina-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.skupina-menu > summary::-webkit-details-marker { display: none; }
.skupina-menu .sipka { margin-left: auto; transition: transform .2s; }
.skupina-menu[open] .sipka { transform: rotate(180deg); }
.skupina-menu[open] > .podmenu { margin-top: .2rem; }
.podmenu .menu-polozka { font-weight: 500; font-size: .92rem; padding: .45rem .8rem; }
.menu-pata { display: flex; justify-content: space-between; align-items: center; gap: .5rem; border-top: 1px solid rgba(255,255,255,.2); padding-top: 1rem; }
.menu-pata form { margin: 0; }
.obsah { min-width: 0; }
.obsah .prihlasenie-strana { min-height: 100vh; }
a.dlazdica.odkaz { text-decoration: none; color: inherit; transition: transform .15s; }
a.dlazdica.odkaz:hover { transform: translateY(-3px); }

html { -webkit-text-size-adjust: 100%; }
img, svg { max-width: 100%; }
.panel { overflow-x: auto; }
.panel input, .panel select, .panel textarea { max-width: 100%; }

@media (max-width: 960px) {
    .aplikacia { grid-template-columns: 1fr; }
    .menu { position: static; height: auto; padding: .8rem 1rem; gap: .8rem; }
    .menu nav { flex-direction: row; flex-wrap: wrap; gap: .3rem; flex: none; }
    .menu nav > .menu-polozka { padding: .5rem .7rem; font-size: .88rem; }
    .skupina-menu { flex: 1 1 100%; }
    .podmenu { flex-direction: row; flex-wrap: wrap; margin-left: 0; border-left: 0; padding-left: 0; }
    .menu-pata { padding-top: .7rem; }
    .uvod { padding: 1.5rem 1rem; }
    .dva-grafy { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .uvod { padding: 1rem .75rem; }
    .uvod h1 { font-size: 1.5rem; }
    .panel { padding: 1rem; border-radius: .8rem; }
    .mriezka-poli { grid-template-columns: 1fr; }
    .filter { gap: .6rem; }
    .filter > div { flex: 1 1 8rem; }
    .filter select { width: 100%; }
    .filter-akcia { margin-left: 0; flex-basis: 100%; }
    .filter-akcia .tlacidlo { width: 100%; text-align: center; }
    .hlavicka-stranky { flex-direction: column; align-items: stretch; }
    .hlavicka-stranky > .tlacidlo, .akcie .tlacidlo { width: 100%; text-align: center; }
    .akcie { flex-direction: column; }
    .suhrn div { flex: 1 1 8rem; padding: .6rem .9rem; }
    .kpi { grid-template-columns: 1fr 1fr; gap: .7rem; }
    .kpi-karta { padding: .9rem; }
    .kpi-karta strong { font-size: 1.2rem; }
    .uvod-banner { padding: 1.2rem; }
    .stlpcovy-graf { height: 12rem; gap: .15rem; }
    .stlpec .popis { font-size: .55rem; }
    .stlpec .hodnota { display: none; }
    .kolac { width: 9rem; height: 9rem; margin: 0 auto; }
    .legenda li { grid-template-columns: .9rem 1fr auto; }
    .legenda .t { display: none; }
    .prihlasenie-formular { padding: 1rem; }
    .karta { padding: 1.6rem 1.2rem; }
    .tabulka th, .tabulka td { padding: .5rem; font-size: .85rem; }
    input, select, textarea { font-size: 16px !important; }
}