/* DataDent – sdílená komponenta stavů webu v32 (schválená odchylka od podkladů, 31/10/2026)
   Stav = malý barevný čtvereček + text ve stavové barvě, bez pilulkové výplně a zaoblení:
   <span class="stav ok|warn|bad|v"><i></i>Text</span>. Nahrazuje stavové pilulky .chip chip-* / .sema.
   .hv2-stav (hero v2) je alias — stejná pravidla i tokeny, žádná druhá pravda.
   Tokeny ztmavené na kontrast >= 4,5:1 (12px/600) na #fff i pastelových podkladech --mint/--lav/--sand. */
:root{--stav-ok:#13804a;--stav-warn:#9e5c00;--stav-bad:#bf3a31;--stav-v:var(--peri-d);--stav-n:#5a6b6c}
.stav,.hv2-stav{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600}
.stav i,.hv2-stav i{width:7px;height:7px;border-radius:2px;background:currentColor;flex:none}
.stav.ok,.hv2-stav.ok{color:var(--stav-ok)}
.stav.warn,.hv2-stav.warn{color:var(--stav-warn)}
.stav.bad,.hv2-stav.bad{color:var(--stav-bad)}
.stav.v,.hv2-stav.v{color:var(--stav-v)}
/* neutrální stav (zubní kříž „Stávající“); --muted má jen 3,8:1, proto vlastní šedá 5,6:1 */
.stav.n{color:var(--stav-n)}

/* víc stavů vedle sebe: lícující sloupce jako v hero (místo volně tekoucích pilulek) */
.stavy{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 14px;align-items:center}
/* stav v kartovém řádku mock okna (ikona | text | stav): levý blok pod titulkem a popiskem, lícovaný
   s hranou textu — napříč řádky tvoří svislý sloupec (pokyn majitele 31/10/2026, místo zarovnání k pravé hraně).
   Pages.css má 3. sloupec auto pro stav; tady jen 2 sloupce, ikona nahoře u titulku. */
.mv-row,.mk-row{grid-template-columns:34px minmax(0,1fr)}
.mv-row:has(>.stav),.mk-row:has(>.stav){align-items:start}
.mv-row>.stav,.mk-row>.stav{grid-column:2;justify-self:start;margin-top:2px}
/* dvojice text + stav mimo řádky (style.css/pages.css je odtlačují k pravé hraně space-between / 3. sloupcem auto):
   stav jako levý blok pod textem (formulářové pole, přihlášení, karta pacienta), resp. hned za popiskem (stav formuláře) */
.rc-field:has(>.stav){flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px}
.form-status:has(>.stav){justify-content:flex-start;gap:6px 12px}
.mv-login:has(>.stav),.mv-patient:has(>.stav){grid-template-columns:auto minmax(0,1fr);row-gap:4px}
.mv-login:has(>.stav)>:first-child,.mv-patient:has(>.stav)>:first-child{grid-row:span 2}
.mv-login>.stav,.mv-patient>.stav{grid-column:2;justify-self:start}
/* víc stavů v mock okně: levý blok, stavy za sebou s mezerou, zalamování povoleno (ne roztažené sloupce .stavy) */
.mv-pills.stavy{display:flex;flex-wrap:wrap;gap:4px 14px}

/* telefon: stav pod textem se do řádku vejde → zůstává viditelný (dřív skrytý jako pilulka vpravo);
   šířka ikony jako v pages.css (stavy.css se načítá až po pages.css, přebil by ji) */
@media(max-width:640px){.mv-row,.mk-row{grid-template-columns:30px minmax(0,1fr)}}