/*
  Vzhled domácího asistenta.

  STRUKTURA SOUBORU:
    1) barevné proměnné - světlý režim
    2) barevné proměnné - tmavý režim
    3) základní prvky (stránka, hlavička, navigace, karty)
    4) jednotlivé části (grafy, tabulka, přihlášení, nákup)
    5) mobil (@media)

  PROČ PROMĚNNÉ: barva se zapíše JEDNOU nahoře a všude jinde se na ni jen
  odkazuje přes var(--nazev). Díky tomu stačí pro tmavý režim předefinovat
  těch pár hodnot nahoře - a celý web se přebarví. Bez proměnných by se
  musela hledat každá barva zvlášť na desítkách míst.
*/


/* ==================== 1) Světlý režim ==================== */

:root {
    color-scheme: light;

    --pozadi:       #eef2f5;
    --karta:        #ffffff;
    --karta-2:      #f6f8fa;   /* jemně odlišený podklad uvnitř karet */
    --text:         #1f2933;
    --text-slaby:   #6b7684;
    --okraj:        #dfe5ea;
    --okraj-jemny:  #f0f3f6;

    --zelena:       #16a34a;
    --zelena-tmava: #12833b;
    --zelena-svet:  #dcfce7;
    /* Barva textu NA zelené ploše. Ve světlém režimu bílá; v tmavém je
       zelená světlejší, takže by na ní bílá zanikla - proto tam tmavá.
       Ověřeno výpočtem kontrastu, ne odhadem. */
    --na-zelene:    #ffffff;
    --cervena:      #dc2626;
    --cervena-pozadi: #fef2f2;

    /* Barvy grafů. Pro tmavý režim mají VLASTNÍ odstíny (níž) - tmavý
       režim není převrácení světlého. Obě sady prošly kontrolou na
       rozlišitelnost při barvosleposti i na kontrast vůči pozadí. */
    --serie-vykon:   #eb6834;
    --serie-baterie: #2a78d6;
    --mrizka:        #e1e0d9;
    --osa:           #898781;

    --stin:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --stin-2: 0 2px 6px rgba(0,0,0,.10);
    --radius: 14px;
}


/* ==================== 2) Tmavý režim ==================== */

/*
  @media (prefers-color-scheme: dark) = "když má uživatel v systému
  nastavený tmavý režim". Nic se nepřepíná ručně, web se přizpůsobí sám.

  Zápis :root:not([data-theme="light"]) navíc počítá s budoucím
  přepínačem: až ho přidáme, nastaví atribut data-theme a přebije
  systémové nastavení. Zatím se ten atribut nikde nenastavuje.
*/
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --pozadi:       #15181c;
        --karta:        #1e2228;
        --karta-2:      #262b32;
        --text:         #e6e9ed;
        --text-slaby:   #98a2ad;
        --okraj:        #2f353d;
        --okraj-jemny:  #272c33;

        --zelena:       #22c55e;
        --zelena-tmava: #16a34a;
        --zelena-svet:  rgba(34,197,94,.20);
        --na-zelene:    #0b1f13;
        --cervena:      #f87171;
        --cervena-pozadi: rgba(248,113,113,.12);

        --serie-vykon:   #d95926;
        --serie-baterie: #3987e5;
        --mrizka:        #2f353d;
        --osa:           #98a2ad;

        --stin:   0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
        --stin-2: 0 2px 8px rgba(0,0,0,.45);
    }
}

/* Ruční přepnutí na tmavý (pro budoucí přepínač - přebije systém). */
:root[data-theme="dark"] {
    color-scheme: dark;

    --pozadi:       #15181c;
    --karta:        #1e2228;
    --karta-2:      #262b32;
    --text:         #e6e9ed;
    --text-slaby:   #98a2ad;
    --okraj:        #2f353d;
    --okraj-jemny:  #272c33;

    --zelena:       #22c55e;
    --zelena-tmava: #16a34a;
    --zelena-svet:  rgba(34,197,94,.20);
    --na-zelene:    #0b1f13;
    --cervena:      #f87171;
    --cervena-pozadi: rgba(248,113,113,.12);

    --serie-vykon:   #d95926;
    --serie-baterie: #3987e5;
    --mrizka:        #2f353d;
    --osa:           #98a2ad;

    --stin:   0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --stin-2: 0 2px 8px rgba(0,0,0,.45);
}


/* ==================== 3) Základ ==================== */

* { box-sizing: border-box; }

body {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--pozadi);
    color: var(--text);
    margin: 0;
    padding: 1.5rem 1rem 3rem;
    line-height: 1.5;
}

.obal { max-width: 760px; margin: 0 auto; }
.obal-uzky { max-width: 380px; margin: 12vh auto 0; }

/* --- Hlavička --- */
header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.2rem;
}
header h1 { font-size: 1.5rem; margin: 0; }
header .cas { color: var(--text-slaby); font-size: .9rem; }
header .cas a { color: var(--text-slaby); }

main { min-height: 40vh; }

footer {
    text-align: center;
    color: var(--text-slaby);
    font-size: .8rem;
    margin-top: 1.5rem;
}


/* ==================== Navigace ==================== */

.taby {
    display: flex;
    align-items: stretch;
    gap: .15rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--okraj);
}

/* Běžný tab: jen text, žádná výplň - drží se v pozadí. */
.taby a {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem .9rem;
    text-decoration: none;
    color: var(--text-slaby);
    font-weight: 600;
    font-size: .95rem;
    border-radius: 8px 8px 0 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.taby a:hover { color: var(--text); }
.taby a.aktivni { color: var(--zelena); border-bottom-color: var(--zelena); }


/* --- Domácí tlačítko (Přehled) --- */
/*
  Přehled není "jeden z tabů", je to záchytný bod - odkud se dá vždy začít
  znovu. Proto vypadá jako TLAČÍTKO, kdežto ostatní jsou jen text: má výplň,
  rámeček, stín a je oddělený svislou čárkou.

  Odlišuje se tvarem, ne další barvou - zelená na liště už znamená
  "tady zrovna jsi" a dvojí význam jedné barvy by mátl.
*/
.taby a.domu {
    background: var(--karta);
    border: 1px solid var(--okraj);
    border-radius: 10px;
    box-shadow: var(--stin);
    color: var(--text);
    padding: .55rem 1rem;
    margin: 0 1rem .35rem 0;
    align-self: center;
    border-bottom-width: 1px;
}
.taby a.domu::after {
    content: "";
    position: absolute;
    right: -.55rem;
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: var(--okraj);
}
.taby a.domu { position: relative; }

.taby a.domu:hover {
    background: var(--karta-2);
    box-shadow: var(--stin-2);
}

/* Aktivní domeček: plná zelená - nejvýraznější stav na celé liště. */
.taby a.domu.aktivni {
    background: var(--zelena);
    border-color: var(--zelena);
    color: var(--na-zelene);
}
.taby a.domu.aktivni:hover { background: var(--zelena-tmava); }

.taby a.domu .tab-ikona { font-size: 1.1rem; }


/* ==================== Karty a hodnoty ==================== */

.karta {
    background: var(--karta);
    border-radius: var(--radius);
    box-shadow: var(--stin);
    padding: 1.3rem 1.5rem;
    margin-bottom: 1.2rem;
}
.karta h2 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-slaby);
    margin: 0 0 1rem;
}

/* Hlavní číslo (aktuální výkon) */
.hero { display: flex; align-items: baseline; gap: .4rem; margin-bottom: 1.2rem; }
.hero .cislo { font-size: 3rem; font-weight: 700; line-height: 1; color: var(--zelena); }
.hero .jednotka { font-size: 1.1rem; color: var(--text-slaby); }

/* Mřížka menších hodnot */
.dlazdice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}
.dlazdice .polozka .popisek { color: var(--text-slaby); font-size: .85rem; }
.dlazdice .polozka .hodnota { font-size: 1.4rem; font-weight: 600; }

/* Baterie: proužek */
.baterie-pruh {
    background: var(--okraj);
    border-radius: 999px;
    height: 12px;
    overflow: hidden;
    margin-top: .4rem;
}
.baterie-pruh .naplneni {
    background: var(--zelena);
    height: 100%;
    border-radius: 999px;
    transition: width .4s ease;
}

/* Nanoleaf: stavová tečka */
.stav-radek { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.tecka { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.tecka.zapnuto { background: var(--zelena); box-shadow: 0 0 0 4px var(--zelena-svet); }
.tecka.vypnuto { background: var(--text-slaby); }

.radek {
    display: flex;
    justify-content: space-between;
    padding: .35rem 0;
    border-top: 1px solid var(--okraj-jemny);
}
.radek:first-of-type { border-top: none; }
.radek .popisek { color: var(--text-slaby); }
.radek .hodnota { font-weight: 600; }

.odkaz-detail { margin: 1rem 0 0; font-size: .9rem; }
.odkaz-detail a { color: var(--zelena); text-decoration: none; font-weight: 600; }
.odkaz-detail a:hover { text-decoration: underline; }

.chyba {
    color: var(--cervena);
    background: var(--cervena-pozadi);
    padding: .8rem 1rem;
    border-radius: 8px;
    font-size: .95rem;
}
.prazdno { color: var(--text-slaby); font-size: .95rem; }
.prazdno code {
    background: var(--karta-2);
    padding: .1rem .35rem;
    border-radius: 4px;
}


/* ==================== 4a) Grafy ==================== */

.graf-hlava {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}
.graf-aktualni { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.graf-popis { color: var(--text-slaby); font-size: .85rem; }

.graf { width: 100%; height: auto; display: block; }

/* Mřížka a popisky os musí být POTICHU - jsou to pomocné čáry, ne obsah. */
.mrizka { stroke: var(--mrizka); stroke-width: 1; }
.osa-popisek {
    fill: var(--osa);
    font-size: 11px;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.graf circle { cursor: crosshair; }


/* ==================== 4b) Tabulka dat ==================== */

details.karta summary {
    cursor: pointer;
    color: var(--text-slaby);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
details.karta[open] summary { margin-bottom: 1rem; }

.tabulka { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabulka th {
    text-align: left;
    color: var(--text-slaby);
    font-weight: 600;
    font-size: .8rem;
    padding: .4rem .5rem;
    border-bottom: 1px solid var(--okraj);
}
.tabulka td { padding: .35rem .5rem; border-bottom: 1px solid var(--okraj-jemny); }
.tabulka td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }


/* ==================== 4c) Přihlášení ==================== */

.karta-prihlaseni { padding: 2rem; }
.prihlaseni-nadpis { font-size: 1.3rem; margin: 0 0 1.5rem; text-align: center; }

.formular { display: flex; flex-direction: column; gap: 1rem; }
.formular label { display: flex; flex-direction: column; gap: .3rem; }
.formular label span { font-size: .85rem; color: var(--text-slaby); }

.formular input,
.pridat-form input {
    font: inherit;
    color: var(--text);
    padding: .65rem .75rem;
    border: 1px solid var(--okraj);
    border-radius: 8px;
    background: var(--karta-2);
}
.formular input:focus,
.pridat-form input:focus {
    outline: none;
    border-color: var(--zelena);
    box-shadow: 0 0 0 3px var(--zelena-svet);
}

.formular button,
.pridat-form button {
    font: inherit;
    font-weight: 600;
    padding: .65rem 1.2rem;
    border: none;
    border-radius: 8px;
    background: var(--zelena);
    color: var(--na-zelene);
    cursor: pointer;
}
.formular button { margin-top: .3rem; padding: .65rem; }
.formular button:hover,
.pridat-form button:hover { background: var(--zelena-tmava); }


/* ==================== 4d) Nákupní seznam ==================== */

.pocet {
    background: var(--zelena);
    color: var(--na-zelene);
    font-size: .75rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    margin-left: .4rem;
    vertical-align: middle;
}

.pridat-form { display: flex; gap: .5rem; }
.pridat-form input { flex: 1; min-width: 0; padding: .7rem .8rem; }

.seznam { list-style: none; margin: 0; padding: 0; }
.seznam li {
    display: flex;
    align-items: center;
    gap: .5rem;
    border-bottom: 1px solid var(--okraj-jemny);
    position: relative;
}
.seznam li:last-child { border-bottom: none; }

.polozka-form { margin: 0; display: flex; }
.seznam li > .polozka-form:first-child { flex: 1; min-width: 0; }

/* Tlačítko na odškrtnutí zabírá celou šířku - velký cíl pro palec. */
.odskrtnout {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    font: inherit;
    text-align: left;
    background: none;
    border: none;
    padding: .8rem .2rem;
    cursor: pointer;
    color: var(--text);
}

.ctverecek {
    flex: none;
    width: 24px; height: 24px;
    border: 2px solid var(--okraj);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; font-weight: 700;
    color: var(--na-zelene);
}
.polozka-text { word-break: break-word; }

.hotovo .ctverecek { background: var(--zelena); border-color: var(--zelena); }
.hotovo .polozka-text { text-decoration: line-through; color: var(--text-slaby); }

.polozka-kdo { flex: none; color: var(--text-slaby); font-size: .75rem; }

.smazat {
    flex: none;
    font-size: 1.3rem; line-height: 1;
    background: none; border: none;
    color: var(--text-slaby); opacity: .5;
    cursor: pointer;
    padding: .5rem .4rem;
}
.smazat:hover { color: var(--cervena); opacity: 1; }

.uklid-form { margin-top: 1rem; text-align: right; }
.uklidit {
    font: inherit; font-size: .85rem;
    background: none; border: 1px solid var(--okraj);
    border-radius: 8px; padding: .45rem .8rem;
    color: var(--text-slaby); cursor: pointer;
}
.uklidit:hover { border-color: var(--cervena); color: var(--cervena); }


/* ==================== 5) Mobil ==================== */

/*
  @media je "podmínka pro CSS": pravidla uvnitř platí jen na obrazovce
  užší než 640 px, tedy na telefonu.

  Navigace se přesune dolů k palci - nákupní seznam se používá v obchodě
  jednou rukou a nahoru přes celý displej se sahá blbě.
*/
@media (max-width: 640px) {

    .taby {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        margin: 0;
        background: var(--karta);
        border-top: 1px solid var(--okraj);
        border-bottom: none;
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-shadow: 0 -1px 6px rgba(0,0,0,.15);
        z-index: 10;
        gap: 0;
    }

    .taby a {
        flex: 1;
        flex-direction: column;
        gap: .15rem;
        padding: .55rem .2rem;
        border-radius: 0;
        border-bottom: none;
        border-top: 2px solid transparent;
        margin-bottom: 0;
        font-size: .7rem;
    }
    .taby a.aktivni { border-top-color: var(--zelena); }

    /* Na úzké liště by tlačítko s rámečkem přes celou výšku bylo
       těžkopádné - výplň dostane jen kolečko kolem ikony. */
    .taby a.domu {
        background: none;
        border: none;
        border-top: 2px solid transparent;
        box-shadow: none;
        margin: 0;
        padding: .4rem .2rem .55rem;
        border-radius: 0;
        color: var(--text-slaby);
        align-self: stretch;
    }
    .taby a.domu::after { display: none; }
    .taby a.domu:hover { background: none; box-shadow: none; }

    .taby a.domu .tab-ikona {
        background: var(--karta-2);
        border: 1px solid var(--okraj);
        border-radius: 999px;
        padding: .2rem .5rem;
        font-size: 1.1rem;
    }
    .taby a.domu.aktivni {
        background: none;
        color: var(--zelena);
        border-top-color: var(--zelena);
    }
    .taby a.domu.aktivni .tab-ikona {
        background: var(--zelena);
        border-color: var(--zelena);
    }

    /* Aby fixní lišta nezakrývala konec stránky. */
    body { padding-bottom: 5rem; }
    header h1 { font-size: 1.25rem; }
}

/* ==================== Přepínač motivu ==================== */

.prepinac-motivu {
    font-size: 1rem;
    line-height: 1;
    background: var(--karta);
    border: 1px solid var(--okraj);
    border-radius: 999px;
    padding: .3rem .5rem;
    cursor: pointer;
    /* Bez pevné šířky by tlačítko poskakovalo, protože emoji mají
       různou šířku. Takhle zůstane na místě při každém přepnutí. */
    min-width: 2.1rem;
    text-align: center;
    vertical-align: middle;
    margin-right: .4rem;
}
.prepinac-motivu:hover { background: var(--karta-2); border-color: var(--text-slaby); }
.prepinac-motivu:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--zelena-svet);
    border-color: var(--zelena);
}

/* ==================== Správa uživatelů ==================== */

.zprava {
    color: var(--zelena);
    background: var(--zelena-svet);
    padding: .8rem 1rem;
    border-radius: 8px;
    font-size: .95rem;
    margin: 0 0 1.2rem;
}
.chyba { margin: 0 0 1.2rem; }

.novy-ucet { display: flex; gap: .5rem; flex-wrap: wrap; }
.novy-ucet input {
    flex: 1; min-width: 140px;
    font: inherit; color: var(--text);
    padding: .6rem .75rem;
    border: 1px solid var(--okraj);
    border-radius: 8px;
    background: var(--karta-2);
}
.novy-ucet input:focus {
    outline: none;
    border-color: var(--zelena);
    box-shadow: 0 0 0 3px var(--zelena-svet);
}
.novy-ucet button, .heslo-form button, .ucet-akce button {
    font: inherit; font-weight: 600;
    padding: .6rem 1.1rem;
    border: none; border-radius: 8px;
    background: var(--zelena); color: var(--na-zelene);
    cursor: pointer;
}
.novy-ucet button:hover, .heslo-form button:hover,
.ucet-akce button:hover { background: var(--zelena-tmava); }
.novy-ucet + .prazdno { margin: .8rem 0 0; font-size: .85rem; }

.ucet-hlava {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.ucet-hlava h2 {
    margin: 0;
    font-size: 1.05rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
}
.ucet-hlava .ja {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-slaby);
    border: 1px solid var(--okraj);
    border-radius: 999px;
    padding: .1rem .5rem;
    margin-left: .4rem;
    vertical-align: middle;
}
.ucet-hlava form { margin: 0; }

.smazat-ucet {
    font: inherit; font-size: .8rem;
    background: none;
    border: 1px solid var(--okraj);
    border-radius: 8px;
    padding: .35rem .7rem;
    color: var(--text-slaby);
    cursor: pointer;
}
.smazat-ucet:hover { border-color: var(--cervena); color: var(--cervena); }

.prava-mrizka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .5rem;
    margin-bottom: 1rem;
}
.pravo {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .7rem;
    border: 1px solid var(--okraj);
    border-radius: 8px;
    background: var(--karta-2);
    cursor: pointer;
    font-size: .9rem;
}
.pravo:hover { border-color: var(--text-slaby); }
/* :has() = "štítek, uvnitř kterého je zaškrtnuté políčko" - tím se
   zvýrazní celá dlaždice, ne jen samotné políčko. */
.pravo:has(input:checked) {
    border-color: var(--zelena);
    background: var(--zelena-svet);
}
.pravo input { width: 16px; height: 16px; accent-color: var(--zelena); }

.ucet-akce {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.ucet-akce .prazdno { margin: 0; font-size: .8rem; }

.reset-heslo { margin-top: 1rem; border-top: 1px solid var(--okraj-jemny);
               padding-top: .8rem; }
.reset-heslo summary {
    cursor: pointer;
    color: var(--text-slaby);
    font-size: .85rem;
}
.heslo-form { display: flex; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; }
.heslo-form input {
    flex: 1; min-width: 160px;
    font: inherit; color: var(--text);
    padding: .6rem .75rem;
    border: 1px solid var(--okraj);
    border-radius: 8px;
    background: var(--karta-2);
}
.heslo-form input:focus {
    outline: none;
    border-color: var(--zelena);
    box-shadow: 0 0 0 3px var(--zelena-svet);
}