/* ===== PC/desktop slupka NAD mobilní SPA. Načítá se jen když . Nemění mobilní verzi – jen na širokém okně přeskládá stejné bloky do desktopového rozvržení s fixním levým menu. ===== */ body.pc { background: #F2F3F5; } /* --- široké okno = desktopová slupka --- */ @media (min-width: 1180px) { /* skryj plovoucí bloby z mobilu */ body.pc::before, body.pc::after { display: none !important; } /* levé fixní menu z draweru (vždy otevřené) */ body.pc .hamburger { display: none; } body.pc #menuBack, body.pc #menuBack[hidden] { display: block !important; position: fixed; top: 0; left: 0; bottom: 0; right: auto; width: 244px; background: none; z-index: 45; } body.pc #menuBack .menu { position: static; width: 244px; max-width: none; height: 100vh; transform: none !important; animation: none; box-shadow: none; border-right: 1px solid var(--line); border-radius: 0; padding: 20px 14px; } body.pc .menu-brand { cursor: default; } body.pc .menu-item { font-size: 14.5px; padding: 11px 12px; border-radius: 11px; } body.pc .menu-item .icn svg { width: 20px; height: 20px; } /* horní lišta jen brand + účet, posunutá za menu */ body.pc .topbar { position: fixed; top: 0; left: 244px; right: 0; z-index: 30; padding: 11px 30px; } body.pc .brand { font-size: 16px; } /* obsah vpravo od menu; z-index:auto ať fixní přepínač není uvězněný pod topbarem */ body.pc .view { margin: 0 0 0 244px; max-width: none; padding: 70px 40px 6px; z-index: auto; } body.pc .dash { max-width: 1240px; margin-left: auto; margin-right: auto; } /* uživatelské menu kotvené k avataru vpravo nahoře */ body.pc .usermenu { top: 60px; right: 30px; } /* ---- HLAVNÍ STRANA: 10sloupcový grid, dvě řady banerů pevné výšky (~675px celkem). Stránka scrolluje normálně, když se okno nevejde. ---- */ body.pc .dash { display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: 340px 340px; gap: 10px; align-items: stretch; } body.pc .dash > * { margin-bottom: 0 !important; min-width: 0; } /* obsah bilance vycentrovaný na výšku: nadpis nahoře, prsten+legenda uprostřed */ body.pc .dash > .nd-hero { display: flex; flex-direction: column; } /* hero prstenec je stejně velký jako koláče Příjem/Výdej (pevná velikost) */ body.pc .nd-hero .nd-ring { flex: 0 0 auto; width: 168px; height: 168px; align-self: center; margin: auto auto 0; } body.pc .nd-hero .nd-iv { margin: 12px 0 auto; } /* responzivní nadpisy karet – ať nepřetékají při užší šířce */ body.pc .dash .nd-card-h { font-size: clamp(13px, 1.15vw, 16px); flex-wrap: wrap; } body.pc .dash .nd-cap { font-size: clamp(9.5px, 0.8vw, 12px); letter-spacing: .07em; } /* přepínač období nahoře v liště (mimo grid) – větší a čitelný */ body.pc .dash > .nd-seg { position: fixed; top: 8px; left: 244px; right: 0; margin: 0 auto; width: max-content; z-index: 40; } body.pc .dash > .nd-seg .nd-sg { font-size: 15px; font-weight: 700; padding: 10px 24px; } body.pc .dash > .nd-seg .nd-sg.on { color: var(--ink); } body.pc .dash > .nd-seg .nd-sg:not(.on) { color: #9aa1ac; } /* rychlé akce jsou v levém menu → v obsahu skryté */ body.pc .dash > .nd-qa { display: none; } /* řádek 1: Energetická bilance | Příjem vs. výdej | Makroživiny */ body.pc .dash > .nd-hero { grid-column: 1 / 4; grid-row: 1; } body.pc .dash > .nd-c-trend { grid-column: 4 / 8; grid-row: 1; } body.pc .dash > .nd-c-macro { grid-column: 8 / 11; grid-row: 1; } /* řádek 2: Vývoj (kompozice) 70% | Rozpad výdeje 30% */ body.pc .dash > .nd-c-comp { grid-column: 1 / 8; grid-row: 2; } body.pc .dash > .nd-c-burn { grid-column: 8 / 11; grid-row: 2; } /* karty vyplní řadu; pohodlný padding, obsah se vycentruje */ body.pc .dash > .nd-card { padding: 12px 18px; } /* Příjem vs. výdej: graf vyplní výšku bloku */ body.pc .dash > .nd-c-trend { display: flex; flex-direction: column; position: relative; min-height: 0; } body.pc .dash > .nd-c-trend .nd-trend { flex: 1; min-height: 0; } /* detail vybraného dne = plovoucí popup přes graf, nehýbe okolím */ body.pc .dash > .nd-c-trend .nd-tdwrap { position: absolute; left: 14px; right: 14px; bottom: 48px; z-index: 6; display: flex; justify-content: center; pointer-events: none; } body.pc .dash > .nd-c-trend .nd-tdwrap:empty { display: none; } body.pc .dash > .nd-c-trend .nd-tdetail { margin: 0; width: 100%; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(16,24,40,.20); pointer-events: auto; } /* Makroživiny a Rozpad výdeje (úzké sloupce): koláč nahoře, data pod ním, vycentrované */ body.pc .dash > .nd-c-macro, body.pc .dash > .nd-c-burn { display: flex; flex-direction: column; } body.pc .dash > .nd-c-macro > #nd-maccard, body.pc .dash > .nd-c-burn > #nd-burncard { flex: 1; display: flex; min-height: 0; } body.pc .nd-c-macro .nd-macrow, body.pc .nd-c-burn .nd-macrow { flex: 1; flex-direction: column; justify-content: center; align-items: stretch; gap: 12px; min-height: 0; } /* koláč se roztahuje do volné výšky; řádky pod ním zůstávají kompaktní */ body.pc .nd-c-macro .nd-kcal, body.pc .nd-c-burn .nd-kcal { flex: 0 0 auto; align-self: center; width: 168px; height: 168px; } body.pc .nd-c-macro .nd-macros, body.pc .nd-c-burn .nd-macros { flex: 0 0 auto; width: 100%; } /* řádek makra/rozpadu = popisek | pruh | hodnota; grid je na KONTEJNERU, aby sloupce (a tím i začátky pruhů) lícovaly napříč všemi řádky */ body.pc .nd-macros { display: grid; grid-template-columns: auto minmax(28px, 1fr) auto; column-gap: clamp(7px, 0.7vw, 13px); row-gap: 13px; align-items: center; min-width: 0; } body.pc .nd-macros .nd-mac { display: contents; } body.pc .nd-macros .nd-mac-h { display: contents; } /* popisek i hodnota se zmenšují s šířkou, ať se pruh nikdy nesmáčkne ani nepřeteče */ body.pc .nd-macros .nd-mac-h > span:first-child { grid-column: 1; white-space: nowrap; font-size: clamp(11px, 0.92vw, 14px); } body.pc .nd-macros .nd-mac-tr { grid-column: 2; margin: 0; } body.pc .nd-macros .nd-mac-v { grid-column: 3; white-space: nowrap; text-align: right; font-size: clamp(10.5px, 0.88vw, 13px); } /* pevné přiřazení řádků, ať se buňky nerozházejí auto-umístěním */ body.pc .nd-macros .nd-mac:nth-child(1) .nd-mac-h > span:first-child, body.pc .nd-macros .nd-mac:nth-child(1) .nd-mac-v, body.pc .nd-macros .nd-mac:nth-child(1) .nd-mac-tr { grid-row: 1; } body.pc .nd-macros .nd-mac:nth-child(2) .nd-mac-h > span:first-child, body.pc .nd-macros .nd-mac:nth-child(2) .nd-mac-v, body.pc .nd-macros .nd-mac:nth-child(2) .nd-mac-tr { grid-row: 2; } body.pc .nd-macros .nd-mac:nth-child(3) .nd-mac-h > span:first-child, body.pc .nd-macros .nd-mac:nth-child(3) .nd-mac-v, body.pc .nd-macros .nd-mac:nth-child(3) .nd-mac-tr { grid-row: 3; } /* interaktivní kompozice na hlavní straně: 4 přepínače vlevo, graf vpravo */ body.pc .dash > .nd-c-comp { display: flex; flex-direction: column; min-height: 0; } body.pc .dash > .nd-c-comp .hc-wrap { flex: 1; min-height: 0; } body.pc .hc-wrap { display: flex; gap: 16px; align-items: stretch; min-height: 0; } body.pc .hc-strip { flex: 0 0 168px; display: flex; flex-direction: column; gap: 10px; } body.pc .hc-strip .hc-tile { flex: 1 1 0; } body.pc .hc-chart { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; } body.pc .hc-chart .nd-card { border: none; box-shadow: none; padding: 0; margin: 0; background: none; } /* strop výšky grafu podle okna, ať druhý řádek nikdy nevynutí scrollování */ body.pc .hc-chart .kc-svg { max-height: 205px; } /* graf kompozice + řádek „kolik ještě sníst" se musí vejít do karty (340px) */ body.pc .dash > .nd-c-comp { overflow: hidden; } body.pc .dash > .nd-c-comp .nd-eatline { flex: 0 0 auto; } /* ---- STRÁNKA TĚLESNÁ KOMPOZICE: dashboard po vzoru hlavní strany ---- */ body.pc .kdash { max-width: 1240px; margin: 0 auto; } body.pc .kdash .nd-card, body.pc .kdash .kw-hero, body.pc .kdash .kw-cta { margin-bottom: 0; } /* nadpis skrytý (aktivní sekci značí levé menu), přepínač období nahoře v liště jako na přehledu */ body.pc .kdash > .kw-title { display: none; } body.pc .kdash > .nd-seg { position: fixed; top: 8px; left: 244px; right: 0; margin: 0 auto; width: max-content; z-index: 40; } body.pc .kdash > .nd-seg .nd-sg { font-size: 15px; font-weight: 700; padding: 10px 24px; } body.pc .kdash > .nd-seg .nd-sg.on { color: var(--ink); } body.pc .kdash > .nd-seg .nd-sg:not(.on) { color: #9aa1ac; } /* řádek 1: souhrn (černý banner) | Vývoj váhy – stejná výška */ body.pc .kd-top { display: flex; gap: 14px; align-items: stretch; margin-bottom: 14px; } body.pc .kd-top .kd-hero { flex: 0 0 34%; display: flex; flex-direction: column; } body.pc .kd-top .kd-hero .kw-hero-spark { flex: 1; height: auto; min-height: 64px; margin: 18px 0 10px; } body.pc .kd-top .kd-hero .kw-split { margin-top: auto; } body.pc .kd-top .kd-chart { flex: 1; min-width: 0; } /* pod tím: dva 50% sloupce – vlevo cíl + rozpad + tempo + trenér, vpravo plán + záznamy */ body.pc .kd-cols { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; } body.pc .kd-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; } /* ---- OSTATNÍ STRÁNKY (Jídelníček, Pohyb, Trénink) na širokém okně ---- */ body.pc .pgwrap { max-width: 1080px; margin: 0 auto; } body.pc .pgwrap.pg-narrow { max-width: 680px; } /* kde to dává smysl, obsah do dvou sloupců (vlevo souhrn/akce, vpravo seznam) */ body.pc .food-cols, body.pc .act-cols { display: flex; gap: 16px; align-items: flex-start; } body.pc .food-cols > .fcol-l, body.pc .act-cols > .acol-l { flex: 0 0 40%; } body.pc .food-cols > .fcol-r, body.pc .act-cols > .acol-r { flex: 1; min-width: 0; } /* levý sloupec dostane odsazení shora jako pravý (nadpisy sekcí mají margin) */ body.pc .act-cols > .acol-l > .mg-card { margin-top: 4px; } /* Jídelníček i Pohyb: kalendář je běžná karta v obsahu, den v jednom řádku (posuvný) */ body.pc .fc-strip-wrap { margin: 6px 0 14px; padding: 8px 12px 10px; } body.pc .fc-strip-wrap .fc-strip { gap: 6px; flex-wrap: nowrap; overflow-x: auto; } body.pc .fc-strip-wrap .fc-d { width: 40px; height: 50px; } body.pc .food-suggest.pick-sug { max-height: 60vh; } /* ---- AI TRENÉR: dva sloupce – vlevo konverzace, vpravo chat ---- */ body.pc .coach-wrap { flex-direction: row; gap: 16px; height: calc(100vh - 96px); max-width: 1080px; margin: 0 auto; } body.pc .coach-side { position: static; display: flex; flex: 0 0 268px; height: 100%; max-height: none; box-shadow: none; } body.pc .coach-side-scroll { flex: 1 1 auto; } body.pc .coach-side-back { display: none !important; } body.pc .coach-main { flex: 1 1 auto; min-width: 0; } body.pc .coach-menu-btn { display: none; } body.pc .coach-main .coach-title { text-align: left; padding-left: 4px; } /* ---- NASTAVENÍ: na PC všechny sekce otevřené, rozložené do dvou sloupců (bez proklikávání) ---- */ body.pc .set-wrap { max-width: 1080px; margin: 0 auto; } body.pc .set-grid { column-count: 2; column-gap: 18px; } body.pc .set-grid > .set-sec { break-inside: avoid; display: inline-block; width: 100%; } body.pc .set-grid > .set-sec > summary { cursor: default; } /* ---- TRÉNINK: vše na jedné stránce – vlevo přehled + historie, vpravo statistiky ---- */ body.pc .train-all { max-width: 1180px; margin: 0 auto; } body.pc .train-cols { display: flex; gap: 24px; align-items: flex-start; } body.pc .train-cols > .tcol { min-width: 0; } body.pc .train-cols > .tcol-main { flex: 1.15 1 0; } body.pc .train-cols > .tcol-side { flex: .85 1 0; position: sticky; top: 74px; align-self: flex-start; max-height: calc(100vh - 92px); overflow-y: auto; } body.pc .train-cols > .tcol-side::-webkit-scrollbar { width: 0; } body.pc .train-cols .cal-month { margin-top: 8px; } body.pc .train-cols .dash-stats { margin-top: 0; } /* ---- POHYB: měřáky přes celou šířku, pod nimi týden vlevo + záznamy vpravo ---- */ body.pc .act-page { max-width: 1080px; margin: 0 auto; } body.pc .act-gauges { padding: 20px 22px; } body.pc .act-gauges .mg-row4 { grid-template-columns: repeat(4, 1fr); gap: 10px 18px; } body.pc .act-gauges .mg-row4 .mg-svg { max-width: 190px; } body.pc .act-grid { display: flex; gap: 18px; align-items: flex-start; margin-top: 4px; } body.pc .act-grid > .act-gcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; } body.pc .act-grid > .act-gcol > .section-title { margin-top: 0; } body.pc .act-grid .ac-week { min-height: 190px; padding: 20px 16px 16px; } body.pc .act-grid .ac-actions { margin-top: 16px; } body.pc .ac-reccard { padding: 6px 4px; max-height: 62vh; overflow-y: auto; } body.pc .ac-reccard .row-item { padding: 10px 12px; } } /* mini sparkline váhy v černém banneru kompozice */ .kw-hero-spark { margin: 14px -2px 6px; height: 58px; } .kw-hero-spark svg { width: 100%; height: 100%; display: block; } /* --- sbalitelné „Poslední záznamy" (klik rozbalí) --- */ .kd-rec > summary { cursor: pointer; list-style: none; margin-bottom: 0; align-items: center; } .kd-rec > summary::-webkit-details-marker { display: none; } .kd-rec[open] > summary { margin-bottom: 12px; } .kd-chev { display: inline-block; font-style: normal; font-weight: 800; transition: transform .2s ease; } .kd-rec[open] .kd-chev { transform: rotate(90deg); } /* --- plynulé animace: přepnutí metriky i proklik dne působí souvisle --- */ #kw-chartcard { animation: kcSwap .28s ease; } .kc-area { animation: kcFade .45s ease; } .kc-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: kcDraw .55s cubic-bezier(.4, 0, .2, 1) forwards; } .nd-tdetail { animation: ndTdPop .2s cubic-bezier(.22, 1, .36, 1); } @keyframes kcSwap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes kcFade { from { opacity: 0; } to { opacity: 1; } } @keyframes kcDraw { to { stroke-dashoffset: 0; } } @keyframes ndTdPop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #kw-chartcard, .kc-area, .kc-line, .nd-tdetail { animation: none; } .kc-line { stroke-dashoffset: 0; } } /* dlaždice přepínačů kompozice (PC) */ .hc-tile { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--line); background: #fff; border-radius: 13px; cursor: pointer; text-align: left; width: 100%; transition: border-color .2s ease, background .2s ease; } .hc-tile.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, #fff); } .hc-tile[disabled] { opacity: .5; cursor: default; } .hc-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; } .hc-ic svg { width: 18px; height: 18px; } .hc-tx { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.15; } .hc-tx b { font-size: 16px; font-weight: 800; color: var(--ink); } .hc-tx b i { font-size: 11px; font-weight: 600; color: var(--muted); font-style: normal; margin-left: 2px; } .hc-tx > span { font-size: 11px; font-weight: 600; color: var(--muted); } .hc-d { font-size: 11.5px; font-weight: 800; flex: 0 0 auto; } /* rychlý zápis v levém menu (PC) */ .menu-add { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; } .menu-add-b:not(.primary) .icn { color: var(--accent); } .menu-add-t { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; padding: 2px 10px 12px; } .menu-add-b { display: flex; align-items: center; gap: 12px; padding: 10px 11px; border: none; background: none; border-radius: 11px; font-size: 14px; font-weight: 700; color: var(--ink); text-align: left; width: 100%; cursor: pointer; } .menu-add-b .icn { width: 24px; height: 24px; display: grid; place-items: center; color: var(--muted); flex: 0 0 auto; } .menu-add-b .icn svg { width: 19px; height: 19px; } .menu-add-b:hover { background: #F4F5F7; } .menu-add-b.primary { background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(255,91,46,.26); } .menu-add-b.primary .icn { color: #fff; } .menu-add-b.primary:hover { background: var(--accent2); } /* velmi široké obrazovky – širší obsah */ @media (min-width: 1560px) { body.pc .view { max-width: 1460px; } } /* úzké okno (mobil / tablet) → drawer + kompozice jako řádek ikon + graf pod nimi */ @media (max-width: 1179px) { /* Tělesná kompozice: přepínače metrik v jednom řádku, graf pod nimi */ body.pc .hc-wrap { display: flex; flex-direction: column; gap: 12px; } body.pc .hc-strip { display: flex; flex-direction: row; gap: 8px; } body.pc .hc-strip .hc-tile { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 11px 5px; } body.pc .hc-strip .hc-ic { width: 36px; height: 36px; } body.pc .hc-strip .hc-ic svg { width: 20px; height: 20px; } body.pc .hc-strip .hc-tx { flex: 0 0 auto; align-items: center; width: 100%; } body.pc .hc-strip .hc-tx b { font-size: 15px; display: flex; align-items: baseline; gap: 2px; } body.pc .hc-strip .hc-tx > span { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* stejná indikace jako na širokém okně: šipka + číslo pod popiskem */ body.pc .hc-strip .hc-d { font-size: 11.5px; margin-top: 1px; } }