/* Nežer — jeden soubor, žádný build. Světlý i tmavý režim.
   Cíl: na mobilu čitelná tabulka a fotka dost velká, aby šlo poznat, co je na talíři. */

:root {
    color-scheme: light dark;
    --bg: #f7f7f5;
    --panel: #ffffff;
    --fg: #1c1f22;
    --mut: #6a7075;
    --line: #e3e5e7;
    --acc: #0b7285;
    --ok-bg: #e6f4ea;      --ok-fg: #1b5e332e;
    --pod-bg: #fff4e0;
    --nad-bg: #fdeaea;
    --malo-bg: #f1f2f3;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #15181a;
        --panel: #1d2124;
        --fg: #e9edf0;
        --mut: #9aa2a8;
        --line: #2c3236;
        --acc: #4dd0e1;
        --ok-bg: #1c3627;
        --pod-bg: #3a3020;
        --nad-bg: #3c2325;
        --malo-bg: #24282b;
    }
}

* { box-sizing: border-box }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 60px }

h1 { font-size: 1.5rem; margin: 8px 0 4px }
h2 { font-size: 1.15rem; margin: 32px 0 6px }
a { color: var(--acc) }

/* ---------- hlava ---------- */

.hlava {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 16px;
    background: var(--panel); border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 5;
}
.hlava .logo { font-weight: 700; text-decoration: none; font-size: 1.05rem }
.hlava nav { display: flex; align-items: center; gap: 14px; font-size: .9rem }
.kdo { color: var(--mut) }

.pata {
    max-width: 1100px; margin: 0 auto; padding: 20px 16px 40px;
    color: var(--mut); font-size: .82rem;
}
.pata p { margin: 0 0 4px }
.pata .odkazy a { color: var(--mut) }

.popis { color: var(--mut); margin: 6px 0 16px }
.popis.mensi { font-size: .85rem }
.prazdno { color: var(--mut); padding: 24px 0 }

.znacka {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 7px; border-radius: 99px; border: 1px solid var(--line);
    color: var(--mut); white-space: nowrap;
}
.znacka.dobre { border-color: var(--acc); color: var(--acc) }

.hlaska { padding: 10px 14px; border-radius: 8px; margin: 12px 0 }
.hlaska.ok { background: var(--ok-bg) }
.hlaska.chyba { background: var(--nad-bg) }

/* ---------- přepínač období a členů ---------- */

.prepinac { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 18px }
.prepinac a {
    padding: 5px 12px; border-radius: 99px; text-decoration: none;
    border: 1px solid var(--line); background: var(--panel); font-size: .88rem;
}
.prepinac a.akt { background: var(--acc); border-color: var(--acc); color: #fff }

/* ---------- přehledová tabulka ---------- */

.obal { overflow-x: auto; background: var(--panel);
        border: 1px solid var(--line); border-radius: 12px }

table.prehled { border-collapse: collapse; width: 100%; min-width: 620px }
table.prehled th, table.prehled td {
    border-bottom: 1px solid var(--line); padding: 0; text-align: center;
}
table.prehled thead th {
    padding: 10px 8px; font-size: .85rem; font-weight: 600;
    background: var(--panel); position: sticky; top: 0;
}
table.prehled thead th .cil { color: var(--mut); font-weight: 400; font-size: .74rem }

th.den { text-align: left; padding: 0; width: 92px }
th.den a { display: block; padding: 10px 12px; text-decoration: none; color: var(--fg) }
th.den .dow { color: var(--mut); font-size: .8rem; margin-left: 4px }

table.prehled td a {
    display: block; padding: 9px 8px; text-decoration: none; color: inherit;
}
table.prehled td .kcal { display: block; font-weight: 700; font-variant-numeric: tabular-nums }
table.prehled td .pct { display: block; font-size: .8rem; opacity: .8 }
table.prehled td .makra { display: block; font-size: .72rem; color: var(--mut); margin-top: 2px }
table.prehled td .nejiste { display: inline-block; font-size: .68rem; color: var(--mut) }

td.ok { background: var(--ok-bg) }
td.pod { background: var(--pod-bg) }
td.nad { background: var(--nad-bg) }
td.malo { background: var(--malo-bg) }
td.nic { color: var(--mut) }

/* ---------- detail dne ---------- */

.jidlo {
    display: flex; gap: 16px; background: var(--panel);
    border: 1px solid var(--line); border-radius: 12px;
    padding: 12px; margin-bottom: 14px;
}
.jidlo .foto { flex: 0 0 190px }
.jidlo .foto img {
    width: 190px; height: 190px; object-fit: cover;
    border-radius: 8px; display: block; background: var(--malo-bg);
}
.jidlo .bezfoto {
    width: 190px; height: 190px; border-radius: 8px; background: var(--malo-bg);
    display: grid; place-items: center; color: var(--mut); font-size: .85rem;
}
/* Zápis větou: místo fotky je vidět to, co člověk napsal. Text je zarovnaný
   nahoru a smí se lámat — u delší věty je důležitější přečíst ji celou než
   dodržet čtverec. */
.bezfoto.napsano {
    background: var(--malo-bg); border-radius: 8px; padding: 12px;
    color: var(--fg); font-size: .85rem; line-height: 1.35;
    display: block; place-items: start; text-align: left; overflow: auto;
}
.jidlo .bezfoto.napsano { height: 190px }
.preskocene .bezfoto.napsano { width: 150px; min-height: 60px; box-sizing: border-box }
.jidlo .obsah { flex: 1 1 auto; min-width: 0 }

.zahlavi { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
           padding-bottom: 8px; border-bottom: 1px solid var(--line) }
.zahlavi .cas { color: var(--mut); font-variant-numeric: tabular-nums }
.zahlavi .chod { color: var(--mut); font-size: .85rem }
.zahlavi .soucet { margin-left: auto; font-weight: 700 }

table.polozky { width: 100%; border-collapse: collapse }
table.polozky td { padding: 8px 4px; border-bottom: 1px solid var(--line); vertical-align: top }
table.polozky tr:last-child td { border-bottom: 0 }
td.nazev { width: 40% }
/* Obrázek obalu u naskenované položky. Vedle názvu, ne nahoru místo fotky jídla:
   patří k potravině, a v jedné skupině jich bývá víc různých. Obtékáním, ne
   flexem — buňka se tím nemusí přestavět kvůli obrázku, který většinou není. */
td.nazev a.produkt { float: left; margin: 2px 10px 2px 0 }
td.nazev a.produkt img {
    width: 44px; height: 44px; object-fit: contain;
    border-radius: 6px; background: var(--malo-bg); display: block;
}
td.nazev .vyziva { color: var(--mut); font-size: .76rem; margin-top: 2px }
/* Co k jídlu někdo řekl — kurzívou, ať je poznat, že to není název potraviny. */
td.nazev .poznamka { color: var(--mut); font-size: .78rem; font-style: italic; margin-top: 2px }
td.mnozstvi, td.energie { text-align: right; white-space: nowrap;
                          font-variant-numeric: tabular-nums }
td.akce { text-align: right }
.cizi { color: var(--mut) }

form.radek { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap }
form.radek input[type=number] { width: 74px }
form.radek select { max-width: 190px }

input, select, button {
    font: inherit; padding: 6px 9px; border-radius: 7px;
    border: 1px solid var(--line); background: var(--bg); color: var(--fg);
}
button { background: var(--acc); border-color: var(--acc); color: #fff; cursor: pointer }
button.smazat { background: transparent; color: var(--mut); border-color: var(--line) }
button:hover { filter: brightness(1.08) }

/* ---------- nepočítané fotky ---------- */

.preskocene { display: flex; flex-wrap: wrap; gap: 12px }
.preskocene figure { margin: 0; width: 150px }
.preskocene img { width: 150px; height: 150px; object-fit: cover; border-radius: 8px }
.preskocene figcaption { font-size: .78rem; color: var(--mut); margin-top: 4px }
.preskocene figcaption .duvod { display: block; margin-top: 3px; font-style: italic }
.preskocene figcaption form { margin-top: 6px }
.preskocene figcaption button { font-size: .78rem; padding: 4px 10px }

/* ---------- přihlášení ---------- */

body.stred { display: grid; place-items: center; min-height: 100vh; padding: 20px }
.karta {
    background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
    padding: 28px; width: 100%; max-width: 360px;
}
.karta form { display: grid; gap: 14px; margin-top: 18px }
.karta label { display: grid; gap: 5px; font-size: .9rem; color: var(--mut) }
.karta input, .karta select { width: 100% }
/* Formulářová karta uvnitř běžné stránky (rodina, nastavení) — na rozdíl od
   přihlašovací obrazovky není vystředěná a nesmí se roztáhnout přes celou šířku. */
.karta.uzka { max-width: 360px; margin: 0 0 18px }
form.karta { display: grid; gap: 14px }
form.karta label { display: grid; gap: 5px; font-size: .9rem; color: var(--mut) }
.mensi { font-size: .85rem; color: var(--mut) }

/* ---------- správa rodiny ---------- */

table.rodina th, table.rodina td { text-align: left; vertical-align: middle }
table.rodina form.radek { justify-content: flex-start }
table.rodina select { max-width: 130px }

/* ---------- mobil ---------- */

@media (max-width: 640px) {
    .jidlo { flex-direction: column }
    .jidlo .foto, .jidlo .foto img, .jidlo .bezfoto { width: 100%; flex: none }
    .jidlo .foto img, .jidlo .bezfoto { height: 240px }

    /* Tabulka položek se na úzkém displeji rozpadá (dlouhý název jídla se láme po
       slovech a select přetéká z obrazovky), takže z každé položky udělej kartu. */
    table.polozky, table.polozky tbody, table.polozky tr, table.polozky td {
        display: block; width: auto;
    }
    table.polozky tr {
        padding: 10px 0; border-bottom: 1px solid var(--line);
    }
    table.polozky td { border: 0; padding: 0 }
    td.nazev { width: auto; font-weight: 600 }
    td.mnozstvi, td.energie {
        display: inline-block; text-align: left; color: var(--mut);
        font-size: .9rem; margin-top: 2px;
    }
    td.mnozstvi::after { content: ' ·'; }
    td.akce { margin-top: 8px }
    form.radek { justify-content: flex-start }
    /* `min-width: 0` je tu nutné: flex položka jinak roste podle nejdelší volby
       v selectu (názvy jídel z fotek jsou dlouhé) a vyleze z obrazovky. */
    form.radek select { flex: 1 1 100%; width: 100%; min-width: 0; max-width: none }
    form.radek input[type=number] { width: 90px }
}

/* Mazání celé fotky sedí v záhlaví jídla, ale nemá tam být nápadnější než součet. */
/* Bez `margin-left: auto` — to má součet, tohle se řadí hned za něj. */
.jidlo .zahlavi .smazfotku { display: inline }
.jidlo .zahlavi .smazfotku button { font-size: .74rem; padding: 2px 8px }

/* ---------- souvislý text (soukromí, podpora) ---------- */

/* Tyhle stránky čte člověk odshora dolů, ne po očku jako tabulku dne. Proto
   užší sloupec a větší řádkování — zbytek webu je naopak co nejhustší. */
.text-stranka { max-width: 760px }
.text-stranka h2 { margin-top: 34px }
.text-stranka h3 { font-size: 1rem; margin: 22px 0 4px }
.text-stranka p, .text-stranka li { line-height: 1.6 }
.text-stranka ul { padding-left: 20px }
.text-stranka li { margin-bottom: 6px }

table.text { border-collapse: collapse; width: 100%; min-width: 480px }
table.text th, table.text td {
    border-bottom: 1px solid var(--line); padding: 9px 12px;
    text-align: left; vertical-align: top; font-size: .9rem;
}
table.text thead th { font-weight: 600; background: var(--panel) }
table.text tbody tr:last-child td { border-bottom: 0 }