/*
 * Modul 5a: záložka Trénink, kalendář a detail cviku. Od nového vzhledu podle náhledu A:
 * pás dnů a karta dne jsou plochy (.surface z app.css), vybraný den je plně růžová pilulka.
 * Tokeny, tlačítka, seznamy, přepínač (.tabs--segment), čipy, dialog a výběr z možností jsou
 * v app.css; tady jsou jen nové kousky.
 *
 * Vybraný den (v pásu i v měsíci) je plně růžový, dnešek má růžový obrys. Najetí na ikonové
 * tlačítko má stejné pozadí (--hover) jako .btn--ghost:hover; token je v :root v app.css.
 */

/* --- Týdenní pás: plocha se sedmi dny vedle sebe; vybraný den je plně růžový (padding přebíjí .surface, je až za ním).
   Mezi dny není mezera: nevybraný den nemá pozadí, mezera by jen ubírala šířku dotykové plochy (47 px na 390, pod 380 px viz níž). --- */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; padding: var(--gap-2); }
/* Na úzkém telefonu (360 px) menší boční okraj pásu, ať má den aspoň 44 px: (360 − 48 − 4) / 7 = 44 */
@media (max-width: 379px) {
    .week { padding-inline: 2px; }
}
.week__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    min-height: 66px;
    padding: var(--gap-2) 0;
    border: 0;
    border-radius: var(--r-m);
    background: none;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}
/* Najetí jen tam, kde je myš: na dotyku by zůstalo svítit i po ťuknutí na jiný den */
@media (hover: hover) {
    .week__day:hover { background: var(--surface-3); }
}
.week__day.is-selected { background: var(--pink); color: var(--on-pink); }
@media (hover: hover) {
    .week__day.is-selected:hover { background: var(--pink-hover); }
}
.month__day.is-selected { border-color: var(--pink); background: var(--pink); color: var(--on-pink); }
.month__day.is-selected .marks i { background: var(--on-pink); opacity: 0.4; }
.month__day.is-selected .marks i.is-done, .month__day.is-selected .marks i.is-today { opacity: 1; }
.month__day.is-selected .marks i.is-missed { background: none; opacity: 1; box-shadow: inset 0 0 0 1.5px var(--on-pink); }
.week__name { color: var(--muted); font-size: 12px; }
.week__num { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.1; }
.week__day.is-today .week__num, .month__day.is-today { color: var(--pink); }
/* Dnešek v měsíci má růžový obrys, i když vybraný je jiný den */
.month__day.is-today:not(.is-selected) { border-color: var(--pink); }
/* Na růžovém vybraném dni je všechno tmavé (i číslo dneška, které je jinak růžové) */
.week__day.is-selected .week__name { color: var(--on-pink); font-weight: 700; }
.week__day.is-selected .week__num { color: var(--on-pink); }

/*
 * Značky tréninků pod dnem: čárky jako ukazatel kroku. Zelená odcvičeno, růžová dnes,
 * šedá v plánu, obrys nezacvičeno. Víc tréninků = víc čárek (co se nevejde, ořízne se).
 */
.marks { display: flex; justify-content: center; gap: 3px; max-width: 100%; height: 6px; margin-top: 4px; overflow: hidden; }
.marks i { width: 12px; height: 6px; flex: none; border-radius: 3px; background: var(--outline); }
.marks i.is-done { background: var(--green); }
.marks i.is-today { background: var(--pink); }
.marks i.is-missed { background: none; box-shadow: inset 0 0 0 1.5px var(--outline); }
/* Čárky v pásu jsou nižší (5 px); na vybraném dni tmavé: odcvičeno a dnes plné, v plánu zeslabené, nezacvičeno obrysem */
.week__day .marks { height: 5px; margin-top: 0; }
.week__day .marks i { height: 5px; }
.week__day.is-selected .marks i { background: var(--on-pink); opacity: 0.4; }
.week__day.is-selected .marks i.is-done, .week__day.is-selected .marks i.is-today { opacity: 1; }
.week__day.is-selected .marks i.is-missed { background: none; opacity: 1; box-shadow: inset 0 0 0 1.5px var(--on-pink); }

/*
 * Karta vybraného dne (components/trainingDay.js): plocha s mezerou 14 px mezi částmi jako v náhledu.
 * Vnořený blok jednoho tréninku (.stack--loose) a hlavička s názvem (.stack--tight) mají stejnou mezeru.
 * Akce jsou rozložené do řady přes celou šířku karty: text 14 px a mezera 8 px, ať se tři („Přesunout“,
 * „Vynechat“, „Jiný trénink“) vejdou do jedné řady na 390 px; na užším telefonu se zalomí.
 */
.day-card, .day-card .stack--loose, .day-card .stack--tight { gap: 14px; }
.day-card .actions { justify-content: space-between; column-gap: var(--gap-2); font-size: 14px; }
.day-card .link .icon { width: 18px; height: 18px; }
.day-card .btn .icon { width: 20px; height: 20px; }
/* Víc tréninků v dni: mezi nimi tenká linka */
.day-card > .stack + .stack { padding-top: 14px; border-top: 1px solid var(--line); }
/* „Co tě dnes čeká“ pod akcemi, oddělené linkou */
.day-card__list { padding-top: var(--gap-4); border-top: 1px solid var(--line); }

/* --- Měsíční kalendář: mřížka po týdnech od pondělí, dny mimo měsíc šedé --- */
.month-box { display: flex; flex-direction: column; gap: 10px; padding: var(--gap-2) var(--gap-3) var(--gap-3); }
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
/* Na úzkém telefonu má den v měsíci taky 44 px: (360 − 48 − 4) / 7 = 44 */
@media (max-width: 379px) {
    .month-box { padding-inline: 2px; }
    .month { gap: 0; }
}
.month__wd { padding-bottom: 4px; color: var(--muted); font-size: 12px; font-weight: 600; text-align: center; }
.month__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    padding: 0;
    border: 1.5px solid transparent;
    border-radius: var(--r-s);
    background: none;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.month__day:hover { border-color: var(--outline); }
.month__day .marks { height: 5px; margin-top: 3px; }
.month__day .marks i { width: 12px; height: 5px; }
.month__day.is-out { color: var(--dim); }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; color: var(--muted); font-size: 12px; }
.month-box .legend { padding-top: 10px; border-top: 1px solid var(--line); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .marks { margin: 0; }

/* Přeškrtnutý (vynechaný nebo odsud přesunutý) trénink */
.skipped { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }

/* Ikonové tlačítko bez rámečku (šipky měsíce; jako křížek v hledání) */
.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: none;
    color: var(--muted);
    cursor: pointer;
}
.icon-btn:hover { color: var(--text); background: var(--hover); }
/* Kulaté tlačítko na podkladu (šipky měsíce v kalendáři) */
.icon-btn--round { background: var(--surface-2); color: var(--text); }
.icon-btn:disabled { opacity: 0.3; cursor: default; background: none; color: var(--muted); }

/* Možnost, kterou teď vybrat nejde (den, kde ten trénink už je) */
.option:disabled { opacity: 0.45; cursor: default; border-color: var(--line); }

/* Dialog přesunu: Dnes a Zítra nahoře, pod nimi ostatní dny; mezi skupinami o 6 px víc než v nich */
.option-groups { display: flex; flex-direction: column; gap: 14px; }

/* Tlačítko funkce, která teprve přijde (Nechat sestavit plán AI trenérem) */
.btn--soon { flex-wrap: wrap; column-gap: 8px; row-gap: 0; padding-top: 6px; padding-bottom: 6px; text-align: center; }
.btn--soon:disabled { opacity: 0.5; cursor: default; }
.btn--soon .muted { font-weight: 600; }

/*
 * Kostra panelu Plán, než přijde plán a kalendář: stejně vysoké jako hotový obsah, ať nic neposkočí.
 * Pás dnů 66 px + 2 × 8 px, karta dne (hlavička, nadpis, čipy, tlačítko, akce) asi 268 px, tři řádky po 60 px s linkami.
 */
.skeleton--week { width: 100%; height: 82px; border-radius: var(--r-l); }
.skeleton--card { width: 100%; height: 268px; border-radius: var(--r-l); }
.skeleton--list { width: 100%; height: 182px; border-radius: var(--r-l); }

/* Pruh přes celou šířku (cvik už není v katalogu) */
.notice {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin: 0 calc(-1 * var(--edge));
    padding: 14px var(--edge);
    background: var(--surface-2);
}
.notice .icon { color: var(--muted); margin-top: 1px; }

/* Rekord: dvě velké hodnoty vedle sebe, stejné písmo jako míry na Progressu */
.record { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.record > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.record--one { grid-template-columns: minmax(0, 1fr); }
.record .measures__value { font-weight: 700; }