:root {
    --barva-text: #1f2b25;
    --barva-tlumena: #5d6b64;
    --barva-podklad: #f4f6f4;
    --barva-panel: #ffffff;
    --barva-ram: #dfe5e0;
    --barva-hlavni: #2f6d4f;
    --barva-hlavni-svetla: #e8f2ec;
    --barva-ok: #2f7d4f;
    --barva-ok-podklad: #e6f4ea;
    --barva-varovani: #a2660a;
    --barva-varovani-podklad: #fdf3e0;
    --barva-chyba: #a52d2d;
    --barva-chyba-podklad: #fbeaea;
    --barva-tip: #2c5d86;
    --barva-tip-podklad: #e9f1f8;
    --radius: 10px;
    --stin: 0 1px 2px rgba(20, 40, 30, .06), 0 4px 14px rgba(20, 40, 30, .05);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--barva-text);
    background: var(--barva-podklad);
}

a { color: var(--barva-hlavni); }

.obal { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* --- hlavička --- */
.hlavicka { background: var(--barva-panel); border-bottom: 1px solid var(--barva-ram); }
.hlavicka-obsah { display: flex; align-items: center; gap: 20px; min-height: 60px; flex-wrap: wrap; }
.znacka { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--barva-text); font-size: 16px; }
.znacka-ikona { font-size: 22px; }
.menu { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
.menu a {
    padding: 7px 11px; border-radius: 7px; text-decoration: none;
    color: var(--barva-tlumena); font-size: 14px; white-space: nowrap;
}
.menu a:hover { background: var(--barva-podklad); color: var(--barva-text); }
.menu a.je-aktivni { background: var(--barva-hlavni-svetla); color: var(--barva-hlavni); font-weight: 600; }
.hlavicka-uzivatel { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.uzivatel-jmeno { font-size: 13px; color: var(--barva-tlumena); }
.vlozeny-formular { display: inline; }

.obsah { padding: 24px 20px 60px; }
.paticka { padding: 18px 0 30px; color: var(--barva-tlumena); font-size: 13px; }

/* --- typografie --- */
h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 26px 0 10px; }
h3 { font-size: 15px; margin: 16px 0 6px; }
.podnadpis { color: var(--barva-tlumena); margin: 0 0 20px; font-size: 14px; }

/* --- panely --- */
.panel {
    background: var(--barva-panel); border: 1px solid var(--barva-ram);
    border-radius: var(--radius); padding: 16px; box-shadow: var(--stin); margin-bottom: 16px;
}
.panel-hlavicka { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.panel-hlavicka h2, .panel-hlavicka h3 { margin: 0; }

.mrizka { display: grid; gap: 16px; }
.mrizka-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.mrizka-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* --- semafor --- */
.semafor { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.karta-normy {
    border: 1px solid var(--barva-ram); border-radius: var(--radius);
    padding: 12px; background: var(--barva-panel);
}
.karta-normy.stav-splneno { border-left: 4px solid var(--barva-ok); }
.karta-normy.stav-varovani { border-left: 4px solid var(--barva-varovani); background: var(--barva-varovani-podklad); }
.karta-normy.stav-blokace { border-left: 4px solid var(--barva-chyba); background: var(--barva-chyba-podklad); }
.karta-normy.stav-tip { border-left: 4px solid var(--barva-tip); }
.karta-nadpis { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.karta-nadpis strong { font-size: 14px; }
.karta-pocet { font-variant-numeric: tabular-nums; font-size: 14px; white-space: nowrap; }
.karta-detail { font-size: 12.5px; color: var(--barva-tlumena); margin-top: 4px; }
.karta-rada { font-size: 12.5px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--barva-ram); }
.karta-zdroj { font-size: 11px; color: var(--barva-tlumena); margin-top: 6px; }

.pruh { height: 6px; background: var(--barva-ram); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.pruh span { display: block; height: 100%; background: var(--barva-ok); }
.pruh.je-varovani span { background: var(--barva-varovani); }
.pruh.je-chyba span { background: var(--barva-chyba); }

/* --- štítky --- */
.stitek {
    display: inline-block; padding: 1px 7px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.stitek-ok { background: var(--barva-ok-podklad); color: var(--barva-ok); }
.stitek-varovani { background: var(--barva-varovani-podklad); color: var(--barva-varovani); }
.stitek-chyba { background: var(--barva-chyba-podklad); color: var(--barva-chyba); }
.stitek-tip { background: var(--barva-tip-podklad); color: var(--barva-tip); }
.stitek-tichy { background: var(--barva-podklad); color: var(--barva-tlumena); }

/* --- tlačítka --- */
.tlacitko {
    display: inline-block; padding: 7px 13px; border-radius: 7px; border: 1px solid var(--barva-hlavni);
    background: var(--barva-hlavni); color: #fff; font-size: 14px; text-decoration: none;
    cursor: pointer; font-family: inherit;
}
.tlacitko:hover { filter: brightness(1.08); }
.tlacitko-tiche { background: transparent; color: var(--barva-hlavni); }
.tlacitko-tiche:hover { background: var(--barva-hlavni-svetla); filter: none; }
.tlacitko-male { padding: 4px 9px; font-size: 13px; }
.tlacitko-nebezpecne { border-color: var(--barva-chyba); background: var(--barva-chyba); }
.tlacitko:disabled { opacity: .5; cursor: not-allowed; }

/* --- formuláře --- */
label { display: block; font-size: 13px; color: var(--barva-tlumena); margin-bottom: 3px; }
input[type=text], input[type=password], input[type=date], input[type=number],
input[type=email], input[type=time], input[type=file], select, textarea {
    width: 100%; padding: 7px 9px; border: 1px solid var(--barva-ram);
    border-radius: 7px; font-family: inherit; font-size: 14px; background: #fff; color: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--barva-hlavni-svetla); border-color: var(--barva-hlavni); }
.pole { margin-bottom: 12px; }
.radek-poli { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.radek-poli > * { flex: 1 1 150px; }
.zaskrtavaci { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--barva-text); margin-bottom: 6px; }
.zaskrtavaci input { width: auto; }

/* --- tabulky --- */
.tabulka-obal { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em;
     color: var(--barva-tlumena); padding: 7px 8px; border-bottom: 1px solid var(--barva-ram); }
td { padding: 7px 8px; border-bottom: 1px solid var(--barva-ram); vertical-align: top; }
tr:last-child td { border-bottom: none; }
.cislo { text-align: right; font-variant-numeric: tabular-nums; }

/* --- hlášky --- */
.hlaska { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px; }
.hlaska-uspech { background: var(--barva-ok-podklad); color: var(--barva-ok); }
.hlaska-chyba { background: var(--barva-chyba-podklad); color: var(--barva-chyba); }
.hlaska-info { background: var(--barva-tip-podklad); color: var(--barva-tip); }
.hlaska-varovani { background: var(--barva-varovani-podklad); color: var(--barva-varovani); }

/* --- rady rádce --- */
.rada { display: flex; gap: 9px; padding: 9px 11px; border-radius: 8px; margin-bottom: 7px; font-size: 14px; }
.rada-blokace { background: var(--barva-chyba-podklad); color: var(--barva-chyba); }
.rada-varovani { background: var(--barva-varovani-podklad); color: var(--barva-varovani); }
.rada-tip { background: var(--barva-tip-podklad); color: var(--barva-tip); }
.rada-zdroj { font-size: 11.5px; opacity: .8; display: block; margin-top: 2px; }

/* --- návrhy pokrmů --- */
.navrh {
    display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
    padding: 9px 11px; border: 1px solid var(--barva-ram); border-radius: 8px; margin-bottom: 7px;
    background: var(--barva-panel);
}
.navrh:hover { border-color: var(--barva-hlavni); }
.navrh-nazev { font-weight: 600; font-size: 14px; }
.navrh-duvody { font-size: 12.5px; color: var(--barva-ok); margin-top: 2px; }
.navrh-varovani { font-size: 12.5px; color: var(--barva-varovani); margin-top: 2px; }

/* --- jídelníček --- */
.den { border: 1px solid var(--barva-ram); border-radius: var(--radius); background: var(--barva-panel); margin-bottom: 12px; }
.den-hlavicka { display: flex; justify-content: space-between; align-items: center; gap: 10px;
                padding: 10px 14px; border-bottom: 1px solid var(--barva-ram); flex-wrap: wrap; }
.den-datum { font-weight: 600; }
.den-telo { padding: 10px 14px; }
.jidlo { padding: 6px 0; border-bottom: 1px dashed var(--barva-ram); }
.jidlo:last-child { border-bottom: none; }
.jidlo-nazev { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--barva-tlumena); }
.pokrm { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 2px 0; }
.neprovozni { opacity: .55; }

/* --- kalendář rodiče --- */
.kalendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kalendar-den {
    border: 1px solid var(--barva-ram); border-radius: 7px; padding: 6px; min-height: 62px;
    font-size: 12px; background: var(--barva-panel);
}
.kalendar-den.mimo { opacity: .35; }
.kalendar-den.odebrano { background: var(--barva-ok-podklad); }
.kalendar-den.odhlaseno { background: var(--barva-podklad); }
.kalendar-den.uctovano-pozde { background: var(--barva-varovani-podklad); }
.kalendar-cislo { font-weight: 600; }
.kalendar-popis { font-size: 10.5px; color: var(--barva-tlumena); }
.kalendar-zahlavi { font-size: 11px; text-transform: uppercase; color: var(--barva-tlumena); text-align: center; }

/* --- karta dítěte --- */
.karta-ditete { border: 1px solid var(--barva-ram); border-radius: var(--radius);
                background: var(--barva-panel); padding: 16px; box-shadow: var(--stin); margin-bottom: 16px; }
.souhrn { display: flex; gap: 22px; flex-wrap: wrap; margin: 10px 0; }
.souhrn div span { display: block; font-size: 12px; color: var(--barva-tlumena); }
.souhrn div strong { font-size: 19px; }

.prazdno { color: var(--barva-tlumena); font-size: 14px; padding: 12px 0; }
.male { font-size: 12.5px; color: var(--barva-tlumena); }

/* --- rozbalovací sekce Správa v menu --- */
.menu-sprava { position: relative; }
.menu-sprava summary {
    list-style: none; cursor: pointer; padding: 7px 11px; border-radius: 7px;
    color: var(--barva-tlumena); font-size: 14px; white-space: nowrap; user-select: none;
}
.menu-sprava summary::-webkit-details-marker { display: none; }
.menu-sprava summary:hover { background: var(--barva-podklad); color: var(--barva-text); }
.menu-sprava summary.je-aktivni { background: var(--barva-hlavni-svetla); color: var(--barva-hlavni); font-weight: 600; }
.menu-sprava-obsah {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
    min-width: 220px; background: var(--barva-panel); border: 1px solid var(--barva-ram);
    border-radius: var(--radius); box-shadow: var(--stin); padding: 6px;
    display: flex; flex-direction: column;
}
.menu-sprava-obsah a {
    padding: 8px 11px; border-radius: 7px; text-decoration: none;
    color: var(--barva-text); font-size: 14px; white-space: nowrap;
}
.menu-sprava-obsah a:hover { background: var(--barva-podklad); }
.menu-sprava-obsah a.je-aktivni { background: var(--barva-hlavni-svetla); color: var(--barva-hlavni); font-weight: 600; }

/* --- Dnes v kuchyni --- */
.denni-hlavicka { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.denni-navigace { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.panel-pocty { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.souhrn-velky div strong { font-size: 26px; }
.panel-alergie { border-left: 4px solid var(--barva-varovani); background: var(--barva-varovani-podklad); }
.panel-alergie h2 { color: var(--barva-varovani); font-size: 16px; }
.seznam-alergii { margin: 0; padding-left: 18px; }
.seznam-alergii li { margin-bottom: 5px; }
.seznam-nakupu { margin: 0; padding-left: 18px; }
.seznam-nakupu li { margin-bottom: 4px; font-size: 14px; }
.recept-detail { margin: 2px 0 8px 12px; }
.mala-tabulka { font-size: 13px; margin-top: 6px; }
.mala-tabulka th, .mala-tabulka td { padding: 4px 6px; }

.ukol { border: 1px solid var(--barva-ram); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; }
.ukol.je-hotovo { background: var(--barva-ok-podklad); border-color: transparent; }
.ukol-hlavicka { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ukol-cislo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; align-self: center;
    background: var(--barva-hlavni-svetla); color: var(--barva-hlavni); font-size: 13px; font-weight: 700;
}
.ukol.je-hotovo .ukol-cislo { background: var(--barva-ok); color: #fff; }
.ukol-vysledek { display: flex; gap: 6px; flex-wrap: wrap; }
.ukol form { margin: 0; }

/* --- týdenní plánovací tabule --- */
.nastroje-tydne { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tabule-obal { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.tabule { overflow-x: auto; }
.tabule-tabulka { border-collapse: separate; border-spacing: 0; min-width: 760px; background: var(--barva-panel);
                  border: 1px solid var(--barva-ram); border-radius: var(--radius); overflow: hidden; }
.tabule-tabulka th, .tabule-tabulka td { border-bottom: 1px solid var(--barva-ram); border-right: 1px solid var(--barva-ram); }
.tabule-tabulka tr:last-child td, .tabule-tabulka tr:last-child th { border-bottom: none; }
.tabule-tabulka th:last-child, .tabule-tabulka td:last-child { border-right: none; }
.tabule-den { text-align: center; padding: 8px 6px 6px; text-transform: capitalize; font-size: 13.5px;
              letter-spacing: 0; color: var(--barva-text); }
.tabule-den.je-dnes { background: var(--barva-hlavni-svetla); }
.tabule-den.neprovozni { background: var(--barva-podklad); color: var(--barva-tlumena); }
.tabule-den-akce { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 4px; }
.tabule-den-akce a { font-weight: 400; }
.tabule-slot-nazev { text-align: left; padding: 8px 10px; font-size: 12px; text-transform: uppercase;
                     letter-spacing: .03em; color: var(--barva-tlumena); white-space: nowrap; width: 1%;
                     background: var(--barva-podklad); vertical-align: top; }
.tabule-bunka { padding: 6px; vertical-align: top; min-width: 128px; }
.tabule-bunka.neprovozni { background: var(--barva-podklad); text-align: center; }
.tabule-pokrm { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px;
                background: var(--barva-hlavni-svetla); border-radius: 7px; padding: 5px 7px; margin-bottom: 4px; }
.tabule-pokrm-nazev { font-size: 13px; line-height: 1.35; }
.tabule-odebrat { border: none; background: none; cursor: pointer; color: var(--barva-tlumena);
                  font-size: 15px; line-height: 1; padding: 1px 3px; border-radius: 4px; }
.tabule-odebrat:hover { color: var(--barva-chyba); background: rgba(0,0,0,.05); }
.tabule-pridat { display: block; text-align: center; font-size: 12.5px; color: var(--barva-tlumena);
                 border: 1px dashed var(--barva-ram); border-radius: 7px; padding: 4px; text-decoration: none; }
.tabule-pridat:hover { color: var(--barva-hlavni); border-color: var(--barva-hlavni); background: var(--barva-hlavni-svetla); }
.odkaz-tichy { border: none; background: none; cursor: pointer; color: var(--barva-tlumena);
               font-size: 11.5px; text-decoration: underline; padding: 0; font-family: inherit; }
.odkaz-tichy:hover { color: var(--barva-text); }

/* --- pravý panel tabule --- */
.tabule-panel { min-width: 0; }
.panel-tesny { padding: 12px; }
.panel-tesny h3 { margin: 0; }
.semafor-nadpis { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
                  color: var(--barva-tlumena); margin: 10px 0 4px; }
.semafor-radek { display: flex; align-items: baseline; gap: 7px; padding: 3px 0; font-size: 13px; }
.semafor-tecka { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; align-self: center; }
.semafor-radek.je-splneno .semafor-tecka { background: var(--barva-ok); }
.semafor-radek.je-varovani .semafor-tecka { background: var(--barva-varovani); }
.semafor-radek.je-blokace .semafor-tecka { background: var(--barva-chyba); }
.semafor-radek.je-tip .semafor-tecka { background: var(--barva-tip); }
.semafor-nazev { flex: 1; min-width: 0; }
.semafor-radek.je-blokace .semafor-nazev { color: var(--barva-chyba); font-weight: 600; }
.semafor-radek.je-varovani .semafor-nazev { color: var(--barva-varovani); }
.semafor-stav { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--barva-tlumena); }
.semafor-rada { font-size: 12px; color: var(--barva-tlumena); margin: 0 0 4px 16px; }
.rada-mala { font-size: 12.5px; padding: 7px 9px; }

/* --- panel výběru pokrmu --- */
.vyber-pozadi { position: fixed; inset: 0; z-index: 100; background: rgba(20, 35, 27, .45); }
.vyber-zavrit-plocha { position: absolute; inset: 0; }
.vyber-okno {
    position: relative; max-width: 640px; margin: 5vh auto; max-height: 88vh; overflow-y: auto;
    background: var(--barva-panel); border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.25);
    padding: 18px 20px;
}
.vyber-hlavicka { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.vyber-hlavicka h2 { margin: 0; font-size: 17px; }
.vyber-hledani { margin-bottom: 12px; }

@media (max-width: 1080px) {
    .tabule-obal { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .menu { order: 3; width: 100%; }
    .kalendar-den { min-height: 52px; }
    .vyber-okno { margin: 0; max-height: 100vh; border-radius: 0; }
}