/* Fitness deník – vzhled pro mobil a tablet (návrh: kapitola 9 v BRAINSTORMING.md, ukázka NAVRH_DESIGNU_MOBIL_TABLET.html).
   Zapíná se jen třídou body.mt (nastavuje mobil.js): dotyková obrazovka nebo úzké okno.
   Vzhled na počítači s myší se tím nemění. Pravidlo: každá klikací plocha má alespoň 48 px (skutečných, po přepočtu zvětšení písma). */

/* ---------- písmo Inter uložené v aplikaci (funguje i bez internetu) ---------- */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/static/fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/static/fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- prvky mobilní vrstvy: na počítači skryté ---------- */
.mui{display:none}
:root{--mz:1;--tt:48px}

body.mt{--tt:calc(48px / var(--mz))}
/* zvětšení písma = zvětšení všeho obsahu (aplikace je psaná v px); prvky mobilní vrstvy se nezvětšují */
body.mt > *:not(.mui){zoom:var(--mz)}
body.mt{overflow-x:hidden;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
body.mt kbd,body.mt .htab{display:none!important}

/* ---------- rozvržení ---------- */
body.mt .side{display:none}
body.mt .app{grid-template-columns:minmax(0,1fr);min-height:0}
body.mt .content{padding:12px 12px calc(110px / var(--mz))}
body.mt .top{padding:8px 10px;gap:8px}
body.mt .top .sp{display:none}
body.mt.mt-tab .app{margin-left:calc(92px / var(--mz))}
body.mt.mt-tab .content{padding:16px 18px 40px}

/* ---------- velikosti prvků ---------- */
body.mt button,body.mt select,body.mt summary,body.mt .chip,body.mt .ub,body.mt .btn,body.mt .ib,body.mt .sw,body.mt .usr,body.mt .nv,body.mt .hlink,
body.mt .seg > *,body.mt [role=button]{min-height:var(--tt);min-width:var(--tt)}
body.mt .ib{width:var(--tt);height:var(--tt);flex:0 0 var(--tt);font-size:20px}
body.mt .btn.sm{padding:0 16px;font-size:14px}
body.mt .chip,body.mt .ub{padding:0 16px;font-size:14px;display:inline-flex;align-items:center;justify-content:center}
body.mt .ub{font-size:14px}
body.mt input:not([type=checkbox]):not([type=radio]):not([type=range]),body.mt select,body.mt textarea{min-height:var(--tt);font-size:16px}
body.mt input[type=checkbox],body.mt input[type=radio]{width:calc(28px / var(--mz));height:calc(28px / var(--mz));margin:calc(10px / var(--mz))}
body.mt label{min-height:var(--tt);display:inline-flex;align-items:center;gap:8px}
body.mt .dayt{min-width:0;flex:1 1 120px;min-height:var(--tt)}
body.mt .day{flex:1 1 auto;gap:6px;min-width:0}
body.mt .who{min-height:var(--tt);min-width:var(--tt);padding:0 6px;cursor:pointer;border-radius:12px;background:var(--s2);border:1px solid var(--line)}
body.mt .who .av{width:34px;height:34px;font-size:16px}
body.mt .modal{width:min(94%,560px)!important;max-height:calc(92vh / var(--mz,1));overflow-y:auto}
body.mt .modal .big-in{font-size:30px}
body.mt .tipbox{width:min(94vw,420px)}
body.mt .toast{bottom:calc(96px / var(--mz))}
body.mt.mt-tab .toast{bottom:24px}

/* dlouhé tabulky se na úzké obrazovce posouvají prstem do stran */
body.mt table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
body.mt .osapas,body.mt .snav{touch-action:pan-x pan-y}
/* graf: jeden prst posouvá, dva přibližují (obsluhuje mobil.js) */
body.mt svg.rada,body.mt #gSvg{touch-action:none}

/* ---------- dolní lišta (telefon) ---------- */
body.mt .mui-bar,body.mt .mui-fab{display:flex}
.mui-bar{position:fixed;left:0;right:0;bottom:0;z-index:12;background:var(--s1);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));justify-content:space-around;gap:4px}
.mui-nv{flex:1 1 0;min-width:48px;min-height:56px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--text3);font-size:12px;font-weight:600;background:none;border:0;cursor:pointer;font-family:inherit}
.mui-nv i{font-style:normal;font-size:22px;line-height:1}
.mui-nv.on{color:var(--accent);background:rgba(184,242,92,.10)}
.mui-fab{position:fixed;right:16px;bottom:calc(86px + env(safe-area-inset-bottom));width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--accentInk);border:0;z-index:13;align-items:center;justify-content:center;font-size:34px;font-weight:700;line-height:1;box-shadow:0 8px 20px rgba(0,0,0,.5);cursor:pointer;font-family:inherit}

/* ---------- boční lišta (tablet) ---------- */
body.mt.mt-tab .mui-bar{display:none}
body.mt.mt-tab .mui-fab{display:none}
.mui-rail{position:fixed;left:0;top:0;bottom:0;width:92px;z-index:12;background:var(--s1);border-right:1px solid var(--line);padding:10px 6px;flex-direction:column;gap:4px;overflow-y:auto;scrollbar-width:none}
.mui-rail::-webkit-scrollbar{display:none}
body.mt.mt-tab .mui-rail{display:flex}
.mui-rail .mui-nv{flex:0 0 auto;min-height:64px;width:100%}
.mui-rail .mui-plus{flex:0 0 auto;min-height:60px;border-radius:14px;background:var(--accent);color:var(--accentInk);border:0;font-weight:800;font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;font-family:inherit;margin-bottom:6px}
.mui-rail .mui-plus i{font-style:normal;font-size:26px;line-height:1}

/* ---------- spodní okno (rychlý zápis, uživatelé) ---------- */
.mui-back{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50}
.mui-back.on{display:block}
.mui-sheet{position:fixed;left:0;right:0;bottom:0;max-height:88vh;overflow-y:auto;background:var(--s1);border-top:1px solid var(--line);border-radius:24px 24px 0 0;padding:8px 16px calc(18px + env(safe-area-inset-bottom));z-index:51;font-size:16px}
.mui-sheet.on{display:block}
.mui-sheet .grab{width:48px;height:5px;border-radius:3px;background:var(--s3);margin:4px auto 12px}
.mui-sheet h2{margin:0 0 12px;font-size:22px}
body.mt.mt-tab .mui-sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:min(560px,92vw);border-radius:24px;border:1px solid var(--line)}
body.mt.mt-tab .mui-sheet .grab{display:none}
.mui-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
body.mt.mt-tab .mui-tiles{grid-template-columns:repeat(3,1fr)}
.mui-tile{min-height:96px;border-radius:18px;background:var(--s2);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--text);font-weight:700;font-size:15px;padding:10px;text-align:center;cursor:pointer;font-family:inherit}
.mui-tile i{font-style:normal;font-size:30px;line-height:1}
.mui-tile.on{border-color:var(--accent);background:rgba(184,242,92,.10)}
.mui-tile small{display:block;font-weight:500;color:var(--text2);font-size:12px}

/* ---------- sekce Více ---------- */
#v-vice .mui-tiles{grid-template-columns:1fr 1fr}
body.mt.mt-tab #v-vice .mui-tiles{grid-template-columns:repeat(4,1fr)}
#v-vice .fszr{display:flex;gap:8px;flex-wrap:wrap}
#v-vice .fszr .chip{flex:1 1 90px}

/* ---------- úzké okno / telefon: kompaktní rozložení karet ---------- */
body.mt.mt-tel .g,body.mt.mt-tel .g2,body.mt.mt-tel .g3,body.mt.mt-tel .g21,body.mt.mt-tel .g12{grid-template-columns:1fr}
body.mt.mt-tel .g4{grid-template-columns:1fr 1fr}
body.mt.mt-tel .vh{flex-wrap:wrap;gap:8px}
body.mt.mt-tel h1{font-size:22px}

/* ---------- nic nesmí přetékat do strany (jinak prohlížeč zmenší celou stránku) ---------- */
body.mt .content,body.mt .view{overflow-x:clip;max-width:100%}
body.mt .row,body.mt .days,body.mt .osaleg,body.mt .zvbar,body.mt .chips,body.mt .kv{flex-wrap:wrap}
body.mt .cvdet,body.mt #cvDetail{overflow-x:auto;max-width:100%}

/* ---------- horní lišta na telefonu: osoba + den v jednom řádku, Zpět / Vpřed pod nimi ---------- */
body.mt .ur .lbl{display:none}
body.mt .ur{display:flex;gap:8px;align-items:center}
body.mt .ur .ub{flex:1 1 0}
body.mt.mt-tel .top{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px}
body.mt.mt-tel .top .ur{grid-column:1/-1}
body.mt.mt-tel .who{font-size:0;gap:0;padding:0;justify-content:center;width:var(--tt)}
body.mt.mt-tel .who .av{font-size:18px}
body.mt.mt-tel .dnesbtn{flex:0 0 auto}
body.mt .vh .ur{flex:1 1 100%}

/* ---------- prvky mobilní vrstvy se nezvětšují, mají vždy 48 px a víc ---------- */
.mui,.mui *{--tt:48px}
body.mt .mui-nv{min-height:56px}
body.mt .mui-rail .mui-nv{min-height:64px}
body.mt .mui-tile{min-height:96px}

/* ---------- drobnosti nalezené měřením (klikací plochy pod 48 px) ---------- */
body.mt .hik{min-width:var(--tt);min-height:var(--tt);display:inline-grid;place-items:center}
body.mt .slovh{min-height:var(--tt);display:flex;align-items:center}
body.mt td.lxn,body.mt th.lxn{height:var(--tt)}
body.mt .lxodkaz{display:inline-flex;align-items:center;min-height:var(--tt)}
body.mt .dk{min-width:var(--tt)}
body.mt input[type=range]{height:var(--tt);min-height:var(--tt)}
body.mt .lxodkaz{min-width:var(--tt);justify-content:center}

/* ---------- tenká linka po obvodu všech tlačítek (aby bylo vidět, co jde stisknout) ---------- */
:root{--obv:rgba(190,198,212,.55)}
body.mt :where(button,[role=button],.chip,.ub,.btn,.ib,.nv,.usr,.sw,summary,select,.mui-nv,.mui-plus,.mui-tile,.dayt,.who,.hshow){border:1px solid var(--obv)}
body.mt :where(.btn:not(.gh),.mui-fab,.mui-plus){border-color:rgba(0,0,0,.5)}
body.mt .mui-fab{border:1px solid rgba(0,0,0,.5)}
body.mt .mui-nv.on{border-color:var(--accent)}
body.mt .hshow{border-radius:6px;padding:2px 6px}

/* ---------- kalendář tréninků (12 týdnů × 7 dnů) se posouvá do stran, tlačítka zůstanou velká ---------- */
body.mt .trkal{grid-template-columns:50px repeat(7,var(--tt));max-width:100%;overflow-x:auto;padding-bottom:6px;gap:4px}
body.mt .trden{height:var(--tt);min-width:var(--tt)}
body.mt table{width:100%}

/* ---------- oprava: cvičení v Posilovně – na telefonu pod sebou, ne vedle sebe ---------- */
body.mt.mt-tel .posil{grid-template-columns:minmax(0,1fr)}
body.mt.mt-tel .posil > div:last-child{grid-column:auto}
body.mt .posil > div{min-width:0}

/* ---------- skleněný vzhled prvků mobilní vrstvy ----------
   Zásady z rešerše (clay.global, Creative Bloq): tenký světlý obrys 1 px, jemný blur 8–16 px jen na 2 plochách
   (dolní / boční lišta), text vždy s kontrastem ≥ 4,5 : 1, bez rozmazání pod hlavními tlačítky (levné lesklé sklo jako na PC). */
:root{--sklo-tvar:inset 0 1px 0 rgba(255,255,255,.40),inset 0 -2px 3px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.06),0 2px 0 rgba(0,0,0,.5),0 5px 9px rgba(0,0,0,.35)}
.mui-bar,.mui-rail{background:rgba(21,24,30,.97);border-color:rgba(255,255,255,.20)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mui-bar,.mui-rail{background:rgba(21,24,30,.74);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
}
.mui-nv,.mui-tile{background:var(--gl-odlesk),var(--gl-sklo);border:1px solid var(--obv);box-shadow:var(--sklo-tvar);color:var(--text2);transition:transform .08s,box-shadow .08s}
.mui-tile{color:var(--text)}
.mui-nv{margin:0 2px}
.mui-nv.on{background:var(--gl-odlesk),rgba(184,242,92,.30);border-color:rgba(214,255,140,.75);color:#E9FFC4;box-shadow:var(--sklo-tvar),0 0 12px rgba(184,242,92,.25)}
.mui-tile.on{background:var(--gl-odlesk),rgba(184,242,92,.22);border-color:rgba(214,255,140,.75)}
.mui-nv:active,.mui-tile:active,.mui-fab:active,.mui-plus:active{transform:translateY(2px);box-shadow:var(--gl-tlak)}
.mui-fab,.mui-plus{background:var(--gl-odlesk),var(--gl-zelena);color:#0D1204;border:1px solid rgba(214,255,140,.8);text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:var(--sklo-tvar),0 0 18px rgba(184,242,92,.40)}
body.mt .mui-fab,body.mt .mui-plus{border:1px solid rgba(214,255,140,.8)}
body.mt .mui-nv.on{border-color:rgba(214,255,140,.75)}
.mui-sheet{background:rgba(21,24,30,.97);border-color:rgba(255,255,255,.22)}

/* --- opravy přetékání textu (telefon) --- */
body.mt .tile > div{min-width:0;flex:1 1 0}
body.mt .tile .l,body.mt .tile .v,body.mt .tile .sub,body.mt .tile .v small{word-break:normal;white-space:normal;overflow-wrap:break-word}
body.mt.mt-tel .card.tile{flex-direction:column;align-items:flex-start;gap:8px}
body.mt.mt-tel .card.tile[data-st]::before{display:none}
body.mt.mt-tel .card.tile > div{width:100%}
body.mt .card,body.mt .zv,body.mt .row,body.mt button{overflow-wrap:break-word}
body.mt button{white-space:normal;line-height:1.2;text-align:center}

/* --- sklo na všech zbývajících ovládacích prvcích (dotyk) – bez hustých seznamů a textových odkazů --- */
body.mt :where(button:not(.mui-nv):not(.mui-tile):not(.mui-fab):not(.mui-plus),summary,select,.dayt,.who,.trden,.cvkarta,.jnth,.qh,.sw,.x){
  background-image:var(--gl-odlesk);box-shadow:var(--sklo-tvar);transition:transform .08s,box-shadow .08s}
body.mt :where(button:not(.mui-nv):not(.mui-tile):not(.mui-fab):not(.mui-plus),summary,select,.dayt,.who,.trden,.cvkarta,.jnth,.qh,.sw,.x):not(.on):not(.ano):not(.dnes):not(.btn:not(.gh)){background-color:var(--gl-sklo)}
body.mt :where(button,summary,.dayt,.who,.trden,.cvkarta,.jnth,.qh,.sw,.x):active{transform:translateY(2px);box-shadow:var(--gl-tlak)}
body.mt :where(button,select,summary):disabled{box-shadow:var(--gl-tlak);opacity:.45}
/* stavy „zapnuto / splněno / dnes“ = zelené sklo */
body.mt :where(.trden.ano,.cvkarta.on,.sw.on,button.on,.dayt.on){background-image:var(--gl-odlesk);background-color:rgba(184,242,92,.30);border-color:rgba(214,255,140,.75)}
body.mt .trden.dnes{box-shadow:var(--sklo-tvar),0 0 0 2px rgba(184,242,92,.55)}
/* výběr ze seznamu: sklo + vlastní šipka (nativní by sklo překryla) */
body.mt select{-webkit-appearance:none;appearance:none;padding-right:38px;color:var(--text);
  background-image:var(--gl-odlesk),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23C9D1DE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;background-position:0 0,right 12px center;background-size:100% 100%,16px 16px;border-radius:12px}
body.mt summary{border-radius:12px;list-style-position:inside;padding-left:12px;padding-right:12px}

/* --- jídelníček: tlačítka ☰ ↻ na kartě jídla nesmí ležet přes text; jsou v řádku pod textem --- */
body.mt .pcell{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 6px;padding:8px 9px 10px}
body.mt .pcell > *:not(.sw){flex:0 0 100%;min-width:0}
body.mt .pcell b{padding-right:0}
body.mt .pcell .sw,body.mt .pcell .sw.vb{position:static;right:auto;top:auto;order:9;margin-top:8px;min-width:var(--tt);min-height:var(--tt);flex:0 0 auto}
body.mt .pcell.odlozena{display:block}

/* --- Léky: tabulka (jeden tenký řádek) a okno s podrobnostmi na dotyk --- */
body.mt .lektab2 td{height:var(--tt);min-height:var(--tt)}
body.mt .lektab2 .lekbere{width:26px;height:26px}
body.mt .lektab2 .k-bere{width:56px}
body.mt.mt-tel .lektab2 .k-kolik,body.mt.mt-tel .lektab2 .k-davka,body.mt.mt-tel .lektab2 thead .k-kolik,body.mt.mt-tel .lektab2 thead .k-davka{display:none}
body.mt.mt-tel .lektab2 .k-nazev{width:auto}
body.mt .lektab2 tbody tr{-webkit-tap-highlight-color:rgba(184,242,92,.18)}
body.mt .lekdet .ldr{grid-template-columns:1fr;gap:2px}
body.mt .lekdet .ldbere{min-height:var(--tt)}
body.mt .lekdet .ldakce .btn{flex:1 1 0}
body.mt #lekPohled{flex-wrap:wrap}

/* --- lišta „Je nová verze“ --- */
#muiNova{position:fixed;left:8px;right:8px;top:max(8px,env(safe-area-inset-top));z-index:200;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:10px 12px;border-radius:16px;background:rgba(21,24,30,.97);border:1px solid rgba(96,165,250,.8);color:#F2F4F7;font:600 15px/1.3 Inter,system-ui,sans-serif;
  box-shadow:0 8px 24px rgba(0,0,0,.55),0 0 0 2px rgba(96,165,250,.25)}
#muiNova span{flex:1 1 180px}
#muiNova button{min-height:48px;min-width:96px;padding:0 16px;border-radius:14px;font:700 15px Inter,system-ui,sans-serif;color:#0D1204;cursor:pointer;
  border:1px solid rgba(214,255,140,.8);background:var(--gl-odlesk),var(--gl-zelena);box-shadow:var(--sklo-tvar)}
#muiNova button.gh{color:#F2F4F7;border-color:var(--obv);background:var(--gl-odlesk),var(--gl-sklo)}

/* --- ovladač, na který se automaticky doskroluje (klávesnice, zaostření), nezůstane pod dolní lištou ani pod tlačítkem ＋ --- */
html:has(body.mt),body.mt,body.mt .content,body.mt .view,body.mt .modal{scroll-padding-bottom:150px;scroll-padding-top:90px}

/* ---------- úvodní obrazovka při spouštění výpočtů v telefonu ---------- */
#offNacita{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;background:var(--bg,#0b1220);transition:opacity .35s}
#offNacita.hotovo{opacity:0;pointer-events:none}
#offNacita .offbox{width:min(88vw,380px);text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;color:var(--text,#e8eef8)}
#offNacita .offlogo{font-size:52px}
#offNacita b{font-size:1.3em}
#offNacita .offpas{width:100%;height:10px;border-radius:99px;border:1px solid var(--gl-hrana,rgba(255,255,255,.3));overflow:hidden}
#offNacita .offpas i{display:block;height:100%;width:0;background:var(--gl-zelena,#4ADE80);transition:width .3s}
#offNacita small{opacity:.7;overflow-wrap:break-word}
#offChyba{color:#FF3B3B;overflow-wrap:break-word}
#offChyba button{min-height:48px;padding:0 18px;margin:8px 4px 0;border-radius:14px;border:1px solid var(--gl-hrana,rgba(255,255,255,.4));background:var(--gl-sklo,rgba(255,255,255,.1));color:inherit;font:inherit}