/* Copyright (c) 2026 Bc. Jan Krejčí. All rights reserved.                   */
/* Proprietary and confidential. See LICENSE in the project root.             */

/* ==========================================================================
 *  PŘEHLED HEJNA — deska dashboardu
 *
 *  Rozvržení (mřížka karet, poměry, velikosti ilustrací) je odečtené
 *  z `_refs/application_design_dark.png` — viz tools/images/measure-app-design.py.
 *  BARVY ale jdou ze značkových tokenů `--kp-*`, ne z toho renderu: klientův
 *  obrázek byl studená břidlice, kdežto aplikace má vlastní popsanou paletu
 *  (docs/design-bible/02_Color_System.md) a Přehled je jedna obrazovka
 *  s Moje hejno. Vrstva `--fov-*` zůstává jako pojmenování rolí uvnitř desky.
 * ========================================================================== */

/* Barva desky žije na `:root`, protože ji potřebuje i jednoduchá verze:
   v předloze je deska celá plocha vpravo od railu, a `/lite` tuhle roli hraje
   svou stránkou (panel tam běží bez vlastního podkladu). Kdyby token seděl na
   `.kp-fov`, `.kp-lite` by se k němu nedostala a musela by si hodnoty opsat —
   a ty dvě kopie by se rozešly při první úpravě. */
:root {
    /* Deska bere značkové tokeny, ne opsané hexy z klientova renderu. Ten byl
       jen jeden obrázek; aplikace má vlastní popsanou paletu (design-bible 02)
       a Přehled i Moje hejno jsou jedna obrazovka téhož produktu. Custom
       property se vyhodnotí až na místě použití, takže se `--kp-cream*`
       přepne s motivem i s panelem Vzhled. */
    --fov-board-a: var(--kp-cream, #12211F);
    --fov-board-b: var(--kp-cream-3, #0D1714);
    /* Nádech zeleně shora a ztmavení k okrajům. Zeleň jde z akcentu, ať se
       deska přebarví panelem Vzhled jako zbytek aplikace. Drží se nízko (6 %):
       v předloze je to sotva znatelný závan v horním rohu, ne zelená plocha. */
    --fov-board-wash:
        radial-gradient(115% 78% at 46% -6%,
            color-mix(in oklab, var(--kp-green-2, #5FB23F) 6%, transparent), transparent 62%),
        radial-gradient(135% 118% at 50% 42%, transparent 28%, rgba(0, 0, 0, 0.46) 100%);
}

/* Světlá deska: krém bez vinětace a bez zeleného nádechu. */
:root[data-theme="light"] {
    --fov-board-wash: none, none;
}

.kp-fov {
    --fov-panel-a: var(--fov-board-a);
    --fov-panel-b: var(--fov-board-b);
    --fov-rail: var(--kp-cream-3, #0D1714);
    --fov-card: var(--kp-surface, #1B2E2A);
    --fov-card-2: var(--kp-cream-2, #1B2E2A);
    --fov-tile: rgba(255, 255, 255, 0.04);
    --fov-line: var(--kp-line, rgba(200, 220, 205, 0.13));
    --fov-line-2: rgba(255, 255, 255, 0.16);
    --fov-wash: var(--fov-board-wash);
    --fov-ink: var(--kp-ink, #F1E7D6);
    --fov-muted: color-mix(in oklab, var(--kp-ink, #F1E7D6) 58%, transparent);
    /* Zeleň a zlatá jdou z akcentu appky, ať panel Vzhled přebarví i tenhle
       panel; fallbacky jsou značkové hodnoty. */
    --fov-green: var(--kp-green-2, #54A046);
    --fov-green-bright: var(--kp-green-2, #5FB23F);
    --fov-green-deep: var(--kp-green-deep, #2C6E23);
    --fov-green-soft: rgba(95, 178, 63, 0.14);
    --fov-gold: var(--kp-gold, #E0B24C);
    --fov-gold-soft: rgba(224, 178, 76, 0.14);
    --fov-sky: #6FB6DE;
    --fov-sky-soft: rgba(94, 147, 184, 0.16);
    --fov-radius: 22px;
    --fov-radius-card: 14px;
    --fov-shadow: 0 24px 60px rgba(20, 30, 20, 0.30);

    display: block;
    color: var(--fov-ink);
    font-family: var(--kp-font-body, 'Outfit', system-ui, sans-serif);
}

/* Světlý režim: Přehled se překlopí na SVĚTLOU dlaždicovou paletu (bílé karty,
   tmavý text) — jako je Slepičky ve světlé předloze. Dřív karty držely natvrdo
   tmavé --fov-* hexy, takže ve světlém režimu zůstaly tmavé a působily rozbitě. */
[data-theme="light"] .kp-fov {
    --fov-panel-a: #FFFFFF;
    --fov-panel-b: #FBF5EA;
    --fov-rail: #F4ECDD;
    --fov-card: #FFFFFF;
    --fov-card-2: #FBF6EC;
    --fov-tile: rgba(40, 30, 20, 0.05);
    --fov-line: rgba(40, 30, 20, 0.10);
    --fov-line-2: rgba(40, 30, 20, 0.14);
    --fov-ink: #28221B;
    --fov-muted: #8B8173;
    /* Zlatá 600 (#E0B24C) je na krému sotva čitelná — na světlé kartě jde
       o dva stupně níž ve škále (design-bible 02, gold 700). */
    --fov-title: #B8822E;
    /* Karty světlé desky jsou plné, ne průsvitné — na krému by průsvit
       jen zašpinil. */
    --fov-shadow: 0 1px 2px rgba(60, 46, 24, 0.05), 0 10px 30px rgba(60, 46, 24, 0.08);
    /* Zelený nádech a vinětace patří tmavé desce; na krému by udělaly špínu. */
    --fov-wash: none, none;
}

.kp-fov__shell {
    display: flex;
    min-width: 0;
    background:
        var(--fov-wash),
        linear-gradient(165deg, var(--fov-panel-a), var(--fov-panel-b));
    border: 1px solid var(--fov-line);
    border-radius: var(--fov-radius);
    box-shadow: var(--fov-shadow);
    overflow: hidden;
}

/* ---- levý rail ---------------------------------------------------------- */

.kp-fov__rail {
    flex: 0 0 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 0;
    background: var(--fov-rail);
    border-right: 1px solid var(--fov-line);
}

.kp-fov__navbtn {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    /* Dlaždice je vidět i v klidu — v předloze rail nevypadá jako plovoucí
       ikony, ale jako řada tlačítek (#1A1E1E proti railu #141717). */
    background: var(--fov-tile);
    display: grid;
    place-items: center;
    color: var(--fov-muted);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.kp-fov__navbtn:hover { color: var(--fov-ink); background: rgba(255, 255, 255, 0.05); }
.kp-fov__navbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Aktivní dlaždice nese SKUTEČNÝ akcent appky (`--accent`, panel Vzhled) —
   dřív tu byl přes `--fov-green-bright` jen alias na natvrdo zadanou
   zeleň (`--kp-green-2`), který na volbu v panelu nereagoval, i když to
   komentář tvrdil. */
.kp-fov__navbtn.is-active {
    background: color-mix(in oklab, var(--accent) 20%, transparent);
    color: var(--accent);
}
.kp-fov__navbtn svg { width: 19px; height: 19px; }
.kp-fov__navbtn img { width: 21px; height: 21px; object-fit: contain; }

.kp-fov__navbtn--foot { margin-top: auto; }

/* ---- obsah -------------------------------------------------------------- */

.kp-fov__main { flex: 1; min-width: 0; padding: 18px 20px 20px; }

.kp-fov__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.kp-fov__title {
    margin: 0;
    font-family: var(--kp-font-display, 'Fredoka', sans-serif);
    font-weight: 600;
    font-size: 19px;
    letter-spacing: 0.2px;
    color: var(--fov-ink);
}

.kp-fov__time { font-size: 12px; color: var(--fov-muted); }

.kp-fov__grid {
    display: grid;
    /* První sloupec je v předloze o něco širší — nese košík s vejci a srdce,
       tedy jediné dvě karty s velkou ilustrací vedle textu. */
    grid-template-columns: 1.16fr minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

/* ---- karta -------------------------------------------------------------- */

.kp-fov__card {
    background: var(--fov-card);
    border: 1px solid var(--fov-line);
    border-radius: var(--fov-radius-card);
    padding: 13px 14px;
    min-width: 0;
}

.kp-fov__card--split { display: flex; justify-content: space-between; gap: 8px; }
.kp-fov__card--row { display: flex; align-items: center; gap: 12px; }
/* Zařízení: malovaná ikona je větší než malý monochromní odznak předtím,
   a s ní roste i odstup od textu, ať vedle sebe nepůsobí namačkaně. */
.kp-fov__card--row:has(.kp-fov__ico--art) { gap: 20px; }
.kp-fov__card--center { display: flex; flex-direction: column; justify-content: center; }

/* Anatomie karty je JEDNA pro celou aplikaci — ta z „Moje hejno":
   teplý titulek v display písmu, velké číslo, jednotka pod ním a doplněk
   v obrysové pilulce. Dřív měla aplikace tři idiomy (deska přehledu, dlaždice
   pod slepičkami, karta slepičky) a při přepnutí obrazovky to vypadalo jako
   tři různé produkty. */
.kp-fov__label {
    font-family: var(--kp-font-display, 'Fredoka', sans-serif);
    font-weight: 600;
    font-size: 15px;
    color: var(--fov-title, var(--kp-gold, #E0B24C));
    margin-bottom: 12px;
}

.kp-fov__value {
    font-family: var(--kp-font-display, 'Fredoka', sans-serif);
    font-weight: 600;
    font-size: 40px;
    line-height: 1;
    color: var(--fov-ink);
}

.kp-fov__value--sm { font-size: 24px; }

/* Jednotka za číslem („%", „°C") drží velikost a váhu čísla, jen menší —
   tak ji sází předloha „Moje hejno". */
.kp-fov__unit {
    font-size: 24px;
    font-weight: 600;
    color: var(--fov-ink);
    margin-left: 2px;
}

/* Jednotka POD číslem („vajec", „kg") je popisek, ne hodnota. */
.kp-fov__sub {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--fov-muted);
    margin-top: 5px;
}

/* Doplňkový údaj je pilulka s obrysem — poznámka pod číslem splývala
   s popiskem jednotky. */
.kp-fov__delta {
    display: inline-block;
    margin-top: 12px;
    padding: 5px 12px;
    border-radius: 9px;
    border: 1px solid var(--fov-line-2);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--fov-muted);
}

.kp-fov__delta--up {
    color: var(--fov-green-bright);
    border-color: color-mix(in oklab, var(--fov-green-bright) 34%, transparent);
}

/* Tlumená verze je POPISEK, ne odznak se změnou ("stejně jako včera",
   "uloží se rovnou", zavírací čas u zařízení) — pilulkový rámeček a jeho
   12px levý odsah ji táhly doprava oproti hodnotě a popisku nad ní. Bez
   rámečku/podkladu vypadá stejně jako `.kp-fov__note`, se kterou sdílí roli. */
.kp-fov__delta--muted {
    display: block;
    margin-top: 5px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--fov-muted);
}

/* Poznámka bez rámečku — tam, kde jde o popis, ne o změnu (např. „Průměrná
   aktivita" pod procenty). */
.kp-fov__note { font-size: 13.5px; font-weight: 500; color: var(--fov-muted); margin-top: 5px; }

/* Košík s vejci — render od klienta. Bez podkladové dlaždice: v předloze leží
   přímo na kartě a jeho vlastní záře dělá přechod do pozadí. */
.kp-fov__egg {
    flex: 0 0 auto;
    /* Košík zabírá v předloze 22 % šířky desky — byl na polovině. */
    width: clamp(104px, 12.5vw, 156px);
    height: clamp(104px, 12.5vw, 156px);
    align-self: center;
    object-fit: contain;
    /* Když se karta zúží, ustupuje obrázek, ne text. Dřív se lámala pilulka
       „+2 oproti včerejšku" na dva řádky, zatímco košík si držel šířku. */
    min-width: 0;
}

/* Ilustrace v pravé části karty (teploměr, kapka). */
.kp-fov__ill {
    flex: 0 0 auto;
    /* Kapka měří v předloze 53 px na desce 350 px, tedy 15 % šířky. */
    width: clamp(88px, 10vw, 124px);
    height: clamp(88px, 10vw, 124px);
    align-self: center;
    object-fit: contain;
}

/* Teploměr je na výšku — dostane víc místa svisle a míň vodorovně. */
.kp-fov__ill--tall {
    /* Teploměr 40 x 54 px na desce 350 px — je vyšší než široký. */
    width: clamp(66px, 7.2vw, 92px);
    height: clamp(96px, 10.4vw, 136px);
}

/* Sparkline aktivity — původní kompaktní výška (jako dřív). */
/* V předloze zabírá graf 28 z 72 px karty, tedy skoro 40 % — při 34 px to byl
   proužek u dna, ne druhá polovina karty. */
.kp-fov__spark { display: block; width: 100%; height: 56px; margin-top: 8px; }

/* Ikona v kartě (teplota, voda). */
.kp-fov__ico {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
}

.kp-fov__ico svg { width: 20px; height: 20px; }
.kp-fov__ico--gold { background: var(--fov-gold-soft); color: var(--fov-gold); }
.kp-fov__ico--water { background: var(--fov-sky-soft); color: var(--fov-sky); }

/* Malované ikony (Zařízení) mají vlastní barvy a odstup od plátna už v sobě —
   tónovaný odznak pod nimi by je jen zbytečně ořízl do kruhu. */
.kp-fov__ico--art {
    width: 60px;
    height: 60px;
    background: none;
    border-radius: 0;
}

.kp-fov__ico--art img { width: 100%; height: 100%; object-fit: contain; }

/* Odznaky sedí v předloze u pravého okraje karty, ne hned za popiskem. */
.kp-fov__health-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    margin-bottom: 4px;
}

/* V předloze jsou to holé zelené glyfy, ne kolečka s podkladem. */
.kp-fov__badge {
    width: 14px;
    height: 14px;
    display: grid;
    place-items: center;
    color: var(--fov-green-bright);
    flex: 0 0 auto;
}

.kp-fov__badge svg { width: 10px; height: 10px; }
.kp-fov__badges { display: inline-flex; gap: 6px; }

.kp-fov__health-val {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--kp-font-display, 'Fredoka', sans-serif);
    font-weight: 600;
    font-size: clamp(22px, 2.2vw, 30px);
    /* V předloze je „Výborný" BÍLÝ — zelené je jen srdce. Zelený text vedle
       zeleného srdce splynul v jednu skvrnu. */
    color: var(--fov-ink);
}

.kp-fov__health-val img { width: clamp(40px, 4vw, 54px); height: auto; flex: 0 0 auto; }

/* Poznámka pod stavem je v předloze světlejší než popisek karty — je to
   výsledek, ne nadpis. */
.kp-fov__health-note {
    font-size: 11.5px;
    color: color-mix(in oklab, var(--fov-ink) 76%, transparent);
    margin-top: 4px;
}
.kp-fov__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid color-mix(in oklab, var(--accent) 50%, transparent);
    /* Předloha měla plnou olivovou výplň natvrdo (60,93,28) — teď je to
       `--accent-dim` (appka: osobní akcent z panelu Vzhled, ne pevná
       zeleň), stejně tmavé ladění, ale barva jde s volbou uživatele. */
    background: var(--accent-dim);
    border-color: color-mix(in oklab, var(--accent) 42%, transparent);
    color: #EAF4E1;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    justify-content: center;
    min-width: 38%;
    padding: 12px 22px;
    border-radius: 11px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.kp-fov__cta:hover { background: var(--accent-hover); border-color: var(--accent); }
.kp-fov__cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kp-fov__cta svg { width: 15px; height: 15px; }

/* Olivová byla naměřená z TMAVÉ předlohy; na krému působila zabláceně,
   takže světlý režim bere plný `--accent` — pořád osobní barva, ne
   napevno zadaná zeleň. */
[data-theme="light"] .kp-fov__cta {
    background: var(--accent);
    border-color: color-mix(in oklab, var(--accent) 70%, transparent);
    color: #FFFFFF;
}

[data-theme="light"] .kp-fov__cta:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* ---- responzivita ------------------------------------------------------- */

@media (max-width: 640px) {
    .kp-fov__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kp-fov__rail { flex-basis: 46px; }
    .kp-fov__main { padding: 14px 14px 16px; }
    .kp-fov__value { font-size: 23px; }
}

@media (max-width: 420px) {
    .kp-fov__grid { grid-template-columns: minmax(0, 1fr); }
}