/* ==========================================================================
   Cimpel / Alfréd — design systém (app shell)
   Zdroj pravdy: docs/design/design-system-a-shell.md
   Brand tokeny z manuálu „Jednotný vizuální styl". Čistě prezentační vrstva.
   ========================================================================== */

/* --- Písma (kompletně self-host, žádné CDN — CSP + soukromí) ------------
   Utile Display SemiBold = JEN wordmark/brand (licencovaný jediný řez).
   Inter 400/500/600/700 = běžná sazba (subset latin+latin-ext,
   extrahováno z brand podkladů — stejné soubory jako Pavlův mockup).
   Inter Tight (variable 100–900) = ČÍSLA (tabulky, KPI) — užší, klidnější.

   ÚKLID 10. 8. 2026: Plus Jakarta Sans (2 soubory, 108 kB) SMAZÁNA. Měla tu @font-face
   z návrhu D1 (7. 8.), jenže mockup se k ní nevrátil a od té doby ji nečetl ANI JEDEN
   token — ani `--font-*`, ani `--mjt-font-*`; prohlížeč ji tedy nikdy nestáhl a v repu jen
   ležela. Zároveň zmizel .otf fallback za Utile Display: druhý `src` se použije jen tehdy,
   když prohlížeč neumí woff2, a takový prohlížeč Blazor Server stejně neobslouží. */
@font-face {
    font-family: "Utile Display";
    src: url("/fonts/UtileDisplay-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("/fonts/Inter-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("/fonts/Inter-medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("/fonts/Inter-semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("/fonts/Inter-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter Tight";
    src: url("/fonts/InterTight-var-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter Tight";
    src: url("/fonts/InterTight-var-latinext.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    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;
}

/* --- Brand tokeny -------------------------------------------------------
   PŘESTĚHOVÁNY do `tokeny.css` (14. 8. 2026), který se načítá dřív než tenhle soubor.
   Důvod: z osmi ručně volených barev je odstupňovaná škála a k ní patří i odstupy,
   velikosti písma, rádiusy a stíny — to všechno je JEDNA věc a má být na jednom místě.
   Původní názvy (`--c-*`, `--barva-*`, `--radius`, `--stin-*`, `--prechod`) platí dál;
   jsou tam přemapované na škálu, takže žádné pravidlo v repu se kvůli tomu nepřepisuje. */

/* --- Reset / základ ----------------------------------------------------- */
html, body {
    margin: 0;
    padding: 0;
    background-color: var(--barva-pozadi);
    color: var(--barva-text);
    font-family: var(--font-text);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* --- Typografie --------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--font-nadpis);
    font-weight: 600;
    color: var(--c-hneda-tmava);
    letter-spacing: -0.01em;
    line-height: 1.18;
    margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1rem; }

a {
    color: var(--barva-akcent-text);
    text-decoration: none;
    transition: color var(--prechod);
}

a:hover { color: var(--c-hneda); }

.text-tlumeny { color: var(--barva-text-tlumeny); }

/* --- Fokus (C15): jednotný, dobře viditelný indikátor pro klávesnici -------
   Globální základ pro VŠECHNY interaktivní prvky (odkazy, tlačítka, pole) — tam, kde
   komponenta nemá vlastní laděný :focus-visible (ten má vyšší specificitu a přebije tenhle).
   Tmavá hnědá má dostatečný kontrast na krému, bílé i zelené ploše. Jen pro klávesnici
   (:focus-visible), aby se prstenec neukazoval po kliku myší. */
:focus-visible {
    outline: 3px solid var(--c-hneda-tmava);
    outline-offset: 2px;
}

/* Výjimka: Blazor po každé navigaci zaostří <h1> (FocusOnNavigate, kvůli čtečkám obrazovky).
   Prohlížeč to bere jako fokus z klávesnice a kolem nadpisu se objevil rámeček — vypadalo to,
   jako by šlo o tlačítko nebo omylem označený text (2. 8. 2026). Cíl navigace prstenec
   nepotřebuje; čtečce oznámení zůstává, protože fokus se nemění. */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible { outline: none; }

/* Decentní úvodní řádek (kicker) nad nadpisem */
.kicker {
    display: inline-block;
    font-family: var(--font-text);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--barva-akcent-text);
    margin-bottom: 0.75rem;
}

/* Odkaz „Zpět na přehled" — vždy na vlastním řádku nad kickerem/nadpisem.
   Globální (ne scoped), ať platí na všech stránkách stejně. */
.odkaz-zpet {
    display: block;
    width: fit-content;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.odkaz-zpet::before {
    content: "\2190 "; /* šipka ← */
}

/* --- Tlačítka ----------------------------------------------------------- */
.tlacitko {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-text);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--prechod), color var(--prechod),
                border-color var(--prechod), transform var(--prechod),
                box-shadow var(--prechod);
}

/* Neaktivní tlačítko musí VYPADAT neaktivně (a nesmí lákat hover efektem) —
   hover stavy variant proto platí jen přes :hover:not(:disabled). */
.tlacitko:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.tlacitko-primarni {
    background-color: var(--c-zelena-tmava);
    color: var(--c-bila);
}

.tlacitko-primarni:hover:not(:disabled) {
    background-color: var(--c-zelena);
    color: var(--c-hneda-tmava);
    transform: translateY(-1px);
    box-shadow: var(--stin-jemny);
}

.tlacitko-tichy {
    background-color: transparent;
    color: var(--barva-text);
    border-color: var(--barva-linka);
}

.tlacitko-tichy:hover:not(:disabled) {
    border-color: var(--c-zelena-tmava);
    color: var(--c-hneda-tmava);
}

/* Nebezpečná varianta (nevratné akce — smazat). Cihlová/terakota, ladí sépiové paletě. */
.tlacitko-nebezpeci {
    background-color: var(--c-cihlova);
    color: var(--c-bila);
    border-color: transparent;
}

.tlacitko-nebezpeci:hover:not(:disabled) {
    background-color: #8F3A25;
    color: var(--c-bila);
    transform: translateY(-1px);
    box-shadow: var(--stin-jemny);
}

/* Tichá nebezpečná varianta — „Smazat" v seznamech (briefingy, konverzace, podpora):
   klidná, ale na první pohled odlišená terakotou od neškodných akcí (#A6462E = 5,9:1 na bílé). */
.tlacitko-nebezpeci-tichy {
    background-color: transparent;
    color: var(--c-cihlova);
    border-color: rgba(166, 70, 46, 0.35);
}

.tlacitko-nebezpeci-tichy:hover:not(:disabled) {
    background-color: rgba(166, 70, 46, 0.08);
    border-color: var(--c-cihlova);
    color: #8F3A25;
}

/* --- Karta -------------------------------------------------------------- */
.karta {
    background-color: var(--barva-povrch);
    border: 1px solid var(--barva-linka);
    border-radius: var(--radius-velky);
    box-shadow: var(--stin-jemny);
    overflow: hidden;
}

/* --- Formulářové prvky (GLOBÁLNÍ, jednotný vzhled napříč appkou) --------- */
/* Sjednocený vstup/výběr. Scoped .spis-vstup (formulář člena) je vzor; tohle je jeho globální
   dvojče, aby stejně vypadaly i prvky v jiných komponentách (výběr rodiny, model, podpora) —
   scoped CSS se totiž mezi komponentami nepřenáší. */
.pole {
    min-width: 0;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--barva-linka);
    border-radius: var(--radius);
    background-color: var(--c-bila);
    font-family: var(--font-text);
    font-size: 0.92rem;
    color: var(--barva-text);
    transition: border-color var(--prechod);
}
.pole:focus { outline: none; border-color: var(--c-zelena-tmava); }
.pole::placeholder { color: var(--barva-text-tlumeny); }
/* Brand šipka (chevron) nativního <select>. POZOR: scoped dvojčata (.spis-vstup
   v RodinnySpis, .podpora-vstup v Podpora) mají vyšší specificitu na padding —
   chevron je tam proto zopakovaný ve scoped CSS (select.spis-vstup / select.podpora-vstup). */
select.pole {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23594334' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
}

/* Zaškrtávátka a přepínače v brand zelené (default modrá do sépiové palety nepatří). */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--c-zelena-tmava);
}

/* --- Zápisová pole, která si zápis překládají (DatumPole, CisloPole) -------
   Datum i číslo se čtou shovívavě, přepisují do české podoby a u dvojznačného zápisu
   se ptají místo hádání (ADR-0062 §4, ADR-0063). Vypadat u toho musí obojí stejně —
   proto je slovník GLOBÁLNÍ, ne scoped: scoped styl jedné komponenty na druhou nedosáhne
   a dvě kopie téhož by se rozešly. Vlastní vzhled vstupu si nese pole samo (třída .pole,
   .spis-vstup…); tady je jen obal, chybová hláška a doptání. */
.zpole {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    flex: 0 1 auto;
    min-width: 0;
}

.zpole.je-chyba input { border-color: var(--c-cihlova, #A6462E); }

.zpole-chyba {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--c-cihlova, #A6462E);
}

/* Doptání u nejednoznačného zápisu („3/4/2026", „1,234"). Není to chyba, proto ne červená —
   je to otázka, na kterou aplikace nezná odpověď a hádat ji nesmí. */
.zpole.je-dotaz input { border-color: var(--barva-akcent, #7A8B5A); }

.zpole-volba {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--barva-text-tlumeny);
}

.zpole-otazka,
.zpole-nebo { white-space: nowrap; }

.zpole-btn {
    font: inherit;
    font-weight: 600;
    color: var(--barva-text);
    background: var(--barva-pozadi);
    border: 1px solid var(--barva-linka);
    border-radius: 6px;
    padding: 1px 7px;
    cursor: pointer;
    white-space: nowrap;
}

.zpole-btn:hover,
.zpole-btn:focus-visible {
    border-color: var(--barva-akcent, #7A8B5A);
    background: var(--barva-povrch);
}

/* --- Layout pomůcky ----------------------------------------------------- */

/* Popisek jen pro odečítač obrazovky: zůstává ve stromu přístupnosti, ale nezabírá místo.
   PATŘÍ SEM, NE DO SCOPED CSS (9. 8. 2026). Bydlelo v RodinnySpis.razor.css a používá ho
   pět komponent — u těch čtyř ostatních tedy nesedlo ani jedno pravidlo a popisek se
   vykresloval jako běžný text: v Administraci stálo vedle výběru „Řádků na stránku" 98×17 px
   viditelných písmen. Sdílenou třídu musí nést globální list, který značku scope nemá;
   `SeznamStrankovac` navíc visí i v klientské tváři. Hlídá `ScopedCssDosahTests`. */
.vizualne-skryto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.obsah-stred {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    box-sizing: border-box;
}

/* --- Back-office zhuštění (ADR-0033) -------------------------------------
   Uvnitř back-office článku (.bo-clanek, MainLayout) je obsah IS: střídmý a hustý.
   Globálně (ne scoped CSS — musí dosáhnout do stránek): menší nadpisy, panely
   s tenkou linkou místo velkých rádiusů a stínů, širší využití plochy. */
.bo-clanek .obsah-stred {
    max-width: none;
    padding-inline: 0.4rem;
}

.bo-clanek h1 {
    font-size: 1.2rem;
    margin-bottom: 0.35rem;
}

.bo-clanek h2 { font-size: 1.05rem; }
.bo-clanek h3 { font-size: 0.95rem; }
.bo-clanek .kicker { font-size: 0.62rem; margin-bottom: 0.4rem; }

/* Sekce, která je v menu podle mockupu, ale stránku dostane až v E3. Karta nahoře stránky,
   ne vystředěná hláška v prázdnu — ta se četla jako chyba aplikace (2. 8. 2026). */
/* Tvar z návrhu (`soonbox`): ČÁRKOVANÝ rámeček na krémovém podkladu — „tady něco bude",
   ne hotová karta; plný rámeček s bílou vypadal jako obsah, který se nenačetl. */
.bo-priprava {
    max-width: 650px;
    margin: 0.5rem 0 0;
    padding: 32px 30px;
    border: 1px dashed var(--border-hairline);
    border-radius: var(--radius-lg);
    background: var(--cream-50);
}

.bo-priprava-hl { display: flex; align-items: center; gap: 0.55rem; }
.bo-priprava-hl svg { width: 20px; height: 20px; opacity: 0.5; flex: none; }
.bo-priprava-hl h1 { margin: 0; font-size: 1.15rem; }

.bo-priprava-stitek {
    margin-left: 0.15rem;
    font-size: 0.6rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    opacity: 0.55;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 1px 7px;
}

.bo-priprava-co { margin: 0.75rem 0 0; }

.bo-priprava-tiket {
    display: inline-flex; align-items: center; margin-top: 1rem;
    height: 39px; padding: 0 16px;
    border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
    background: var(--white); color: var(--brown-500);
    font-weight: 600; font-size: var(--text-sm); text-decoration: none;
}
.bo-priprava-tiket:hover { border-color: var(--brown-300); text-decoration: none; }
.bo-priprava-kdy { margin: 0.55rem 0 0; font-size: 0.85rem; color: var(--barva-text-tlumeny); }
.bo-priprava-ted { margin: 0.85rem 0 0; font-size: 0.85rem; color: var(--barva-text-tlumeny); }

.bo-clanek .karta {
    border-radius: 10px;
    border: 1px solid var(--barva-linka);
    box-shadow: none;
}

/* --- Back-office UI prvky: barevné pilulky, štítky, husté tabulky ---------
   Sdílené třídy pro hustý informační systém (Nástěnka, Podpora, Backlog…).
   Sémantika z tokenů C16 (--c-ok/-varovani/-chyba) + neutrál a brand-akcent;
   pozadí tlumená, ať v hustém IS nekřičí. Dřív existovala jen jednobarevná
   scoped .nastenka-pill a vlastní .pristupy-tabulka (Admin) — tohle je sjednocuje. */
.pilulka {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}
.pilulka::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.pilulka.bez-tecky::before { display: none; }
.pilulka-ok       { background: rgba(110, 139, 42, 0.14); color: #4E6A18; }
.pilulka-info     { background: rgba(95, 110, 0, 0.12);   color: var(--barva-akcent-text); }
.pilulka-varovani { background: rgba(224, 165, 0, 0.16);  color: #8A6300; }
.pilulka-chyba    { background: rgba(192, 57, 43, 0.12);  color: var(--c-chyba); }
.pilulka-neutral  { background: rgba(89, 67, 52, 0.08);   color: var(--barva-tlumeny-text); }

/* Barevný štítek (label/tag) — bez tečky, hranatější, brand zelená. */
.stitek {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.07rem 0.45rem;
    border-radius: 5px;
    background: var(--c-zelena-svetla);
    color: var(--barva-akcent-text);
}

/* Husté tabulky IS — sdílená třída (sjednocuje dosavadní .pristupy-tabulka). */
.tabulka { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.tabulka th {
    text-align: left;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--barva-tlumeny-text);
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--barva-linka);
    background: #FBFAF7;
    white-space: nowrap;
}
.tabulka td {
    padding: 0 0.7rem;
    height: 2rem;
    border-bottom: 1px solid var(--barva-linka);
    vertical-align: middle;
}
.tabulka tbody tr:hover { background: rgba(89, 67, 52, 0.03); }
.tabulka-husta td { height: 1.7rem; font-size: 0.82rem; }
.cislo, .tabulka .cislo { font-variant-numeric: tabular-nums; }
.vpravo, .tabulka th.vpravo, .tabulka td.vpravo { text-align: right; }

/* --- Chybové / prázdné stránky (sdílené Error + NotFound) --------------- */
.chyba-stranka {
    max-width: 620px;
    padding-block: clamp(3rem, 8vw, 6rem);
}

.chyba-stranka p { font-size: 1.1rem; line-height: 1.7; }

.chyba-stranka .tlacitko { margin-top: 1rem; }

.chyba-stranka code {
    font-size: 0.85rem;
    background-color: var(--c-bila);
    border: 1px solid var(--barva-linka);
    border-radius: 6px;
    padding: 0.1rem 0.4rem;
}

/* --- Jemné animace ------------------------------------------------------ */
@keyframes alfred-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ================= Rodokmen (Členové) — „Živý strom" (brand Cimpel) ================= */
/* Velký ručně kreslený strom (nano banana) jako scéna: KOŘENY DOLE → KORUNA NAHOŘE. Členové =
   ilustrované postavy podle věkového pásma + pohlaví + pózy (zakladatelé u kořenů, mladší
   generace výš, děti v koruně). Pozice počítá RodokmenLayout (v % scény), postavu vykresluje
   RodokmenClen. Scéna má poměr stran stromu; velikosti přes container-query jednotky (cqh/cqw),
   takže vše škáluje responsivně bez JS. Krevní linie = zelený list, přivdaní do rodu = krémový. */
/* Název rodiny vystředěný nad stromem (nahrazuje duplicitní nadpis „Členové rodiny"). */
.rodokmen-nazev {
    text-align: center;
    font-family: var(--font-nadpis);
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem);
    color: var(--c-hneda-tmava);
    margin: 0.25rem 0 0.25rem;
}

.rodokmen-obal {
    padding: 0.75rem 0 0.25rem;
    overflow: visible;                 /* popovery nad postavami se nesmí oříznout */
}

.rodokmen-scena {
    position: relative;
    width: 100%;
    max-width: 660px;
    margin: 0 auto;
    aspect-ratio: 896 / 1200;          /* poměr stromového obrázku */
    container-type: size;              /* umožní cqh/cqw uvnitř (velikosti postav) */
}

.rodokmen-strom {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* Decentní genealogické spojnice potomek→rodič (v % scény). */
.rodokmen-spojnice {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
/* Vazby = KŘIVKY, kreslené DVĚMA tahy: krémové POUZDRO (podklad) + tmavé JÁDRO nahoře — tím jsou
   dobře vidět na zelené koruně I na hnědé kůře (jako cesta na mapě). Skryté; po najetí na osobu JS
   přidá .je-videt (na oba tahy). */
.rodokmen-spoj-podklad {
    fill: none;
    stroke: #FFFFFF;                /* bílé pouzdro — max. kontrast pro jádro na zeleni i kůře */
    stroke-width: 8;
    stroke-linecap: round;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.rodokmen-spoj {
    fill: none;
    stroke: #241a12;                /* tmavé (skoro černohnědé) jádro — výrazné na jakémkoli pozadí */
    stroke-width: 4.6;
    stroke-linecap: round;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.rodokmen-spoj.je-partner {
    stroke: var(--c-cihlova);       /* partnerská linka odlišena (terakota, čárkovaná) */
    stroke-width: 4.2;
    stroke-dasharray: 4 3;
}
.rodokmen-spoj-podklad.je-videt { opacity: 0.92; }
.rodokmen-spoj.je-videt { opacity: 1; }

/* Jeden člen = STŘED kolečka na (X,Y). z-index dle polohy (--z): níž na scéně = v popředí. */
.rodokmen-clen {
    --d: 9.6cqh;                   /* průměr kolečka — stejný pro všechny (musí se vejít jméno+příjmení) */
    position: absolute;
    width: var(--d);
    height: var(--d);
    transform: translate(-50%, -50%);
    z-index: var(--z, 2);
}
.rodokmen-clen:hover,
.rodokmen-clen:focus-within {
    z-index: 200;
}

/* Kolečko se jménem (nahoře) a příjmením (dole); barva orámování dle GENERACE. Klik = úprava. */
.rodokmen-uzel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 4px;
    margin: 0;
    cursor: pointer;
    text-align: center;
    background: var(--gt, var(--c-bila));
    border: 2.5px solid var(--gc, var(--c-zelena-tmava));
    box-shadow: 0 1px 2px rgba(63, 47, 36, 0.08), 0 5px 12px rgba(63, 47, 36, 0.16);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Barvy generací (0 = zakladatelé u kořenů → nahoru). --gc = orámování+jméno, --gt = jemný tón výplně. */
.rodokmen-uzel.gen-0 { --gc: #8A5A2B; --gt: #FBF6EF; }
.rodokmen-uzel.gen-1 { --gc: #A6462E; --gt: #FBF1EE; }
.rodokmen-uzel.gen-2 { --gc: #AF7A1C; --gt: #FBF5E7; }
.rodokmen-uzel.gen-3 { --gc: #6E8B2A; --gt: #F5F9EB; }
.rodokmen-uzel.gen-4 { --gc: #2F7E7A; --gt: #ECF6F5; }
.rodokmen-uzel.gen-5 { --gc: #7A5EA6; --gt: #F5F2FA; }
.rodokmen-clen:hover .rodokmen-uzel,
.rodokmen-uzel:focus-visible {
    transform: scale(1.06);
    box-shadow: 0 2px 5px rgba(63, 47, 36, 0.16), 0 11px 24px rgba(63, 47, 36, 0.26);
}
.rodokmen-uzel:focus-visible {
    outline: 3px solid var(--gc, var(--c-zelena-tmava));
    outline-offset: 2px;
}
.rodokmen-jmeno-in {
    font-family: var(--font-nadpis);
    font-weight: 600;
    font-size: clamp(9px, 2.5cqh, 13px);
    line-height: 1.05;
    color: var(--gc, var(--c-hneda-tmava));
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rodokmen-prijmeni-in {
    font-family: var(--font-text);
    font-size: clamp(7.5px, 1.95cqh, 10.5px);
    line-height: 1.05;
    color: var(--c-hneda);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Popover se základními informacemi o členovi — po najetí / fokusu. */
.rodokmen-popover {
    position: absolute;
    bottom: calc(var(--fh) + 0.4rem);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    z-index: 60;
    width: max-content;
    max-width: 230px;
    background: var(--c-bila);
    border: 1px solid var(--barva-linka);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(63, 47, 36, 0.22);
    padding: 0.7rem 0.85rem;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
}
.rodokmen-clen:hover .rodokmen-popover,
.rodokmen-clen:focus-within .rodokmen-popover {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.rodokmen-popover-jmeno {
    display: block;
    font-family: var(--font-nadpis);
    font-weight: 600;
    color: var(--c-hneda-tmava);
    font-size: 0.95rem;
}
.rodokmen-popover-role {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--barva-akcent-text);
    margin-top: 0.1rem;
}
.rodokmen-popover-radek {
    display: block;
    font-size: 0.8rem;
    color: var(--c-hneda);
    margin-top: 0.35rem;
}
.rodokmen-popover-pozn {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--c-hneda);
}
.rodokmen-popover-akce {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: var(--barva-tlumeny-text);
}

/* Legenda pod stromem (co znamená barva listu). */
.rodokmen-legenda {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(12px, 3vw, 28px);
    margin-top: 0.75rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--barva-linka);
}
.rodokmen-legenda-i {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--c-hneda);
}
.rodokmen-legenda .rodokmen-list {
    width: 20px;
    height: 20px;
}

/* Nenápadná nápověda pod stromem (jak zobrazit vazby). */
.rodokmen-napoveda {
    margin: 0.6rem 0 0;
    text-align: center;
    font-size: 0.82rem;
    color: var(--barva-text-tlumeny);
}

/* ===== Asistent — pole dotazu na mobilu (C11) =====
   Na úzkém displeji ať se pole dotazu roztáhne přes celou šířku (jinak zůstávalo jednořádkové
   ~300 px a tlačítko ho tísnilo). Selektor je záměrně tříúrovňový, aby přebil scoped pravidlo
   .chat-vstup (flex-basis 12rem) z AlfredChat.razor.css. */
@media (max-width: 560px) {
    .chat-formular .chat-radek .chat-vstup { flex: 1 1 100%; }
}

/* ===== Čekárna (přihlášený bez přidělené role) ===== */
.cekarna { max-width: 46ch; margin: clamp(2rem, 8vh, 6rem) auto; text-align: center; }
.cekarna h1 { font-family: var(--font-nadpis); color: var(--c-hneda-tmava); }
.cekarna .tlacitko { margin-top: 1.25rem; display: inline-block; }

/* ===== Admin: tabulka přístupů ===== */
/* Admin tabulka přístupů — hustá, ve stylu mockupu (jen v back-office administraci). */
.pristupy-tabulka { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pristupy-tabulka th { text-align: left; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; color: var(--text-mute, var(--barva-text-tlumeny)); padding: 8px 11px; border-bottom: 1px solid var(--border, var(--barva-linka)); background: var(--surface-2); white-space: nowrap; }
.pristupy-tabulka td { text-align: left; padding: 7px 11px; border-bottom: 1px solid var(--border, var(--barva-linka)); vertical-align: top; }
.pristupy-tabulka tbody tr:hover td { background: var(--surface-2); }
.pristupy-admin { font-weight: 600; color: var(--accent-strong, var(--barva-akcent-text)); }
.pristupy-rodiny { display: flex; flex-direction: column; gap: 0.2rem; max-height: 8rem; overflow-y: auto; }
.pristupy-rodina { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; white-space: nowrap; }

/* Admin odznak u tlačítka „Administrace" — počet nových přihlášení/odhlášení sledovaných (ADR-0029). */
.shell-akce-odznak {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; margin-left: 0.35rem;
    font-size: 0.7rem; font-weight: 700; line-height: 1;
    color: #fff; background: #C0392B; border-radius: 999px;
}

/* ===== Tisk (D6: výpis majetku) — na papír jde jen obsah stránky ==========
   Chrome aplikace (hlavička, dev pruh, vodoznak, Alfréd, patička) se skryje;
   co přesně se tiskne a jak, řídí @media print dané stránky (scoped CSS). */
@media print {
    .stav-odznak,
    .shell-hlavicka,
    .shell-vodoznak,
    .alfred,
    .verze-paticka,
    #blazor-error-ui {
        display: none !important;
    }

    html, body {
        background: #fff;
    }

    /* Plná šíře papíru bez obrazovkových okrajů. */
    .obsah-stred {
        max-width: none;
        padding-inline: 0;
    }
}

/* ==========================================================================================
   HINTY (back-office) — bublinová nápověda přes atribut data-hint. Použití: data-hint="text"
   na prvku, kde nápověda dává smysl (přepínače, ikony panelů, hlavičky sloupců) — ne plošně.
   Čistě CSS (::after/::before), žádný JS; klávesnice: funguje i na :focus-visible.
   ========================================================================================== */
.mck [data-hint] { position: relative; cursor: help; }
.mck [data-hint]:hover::after,
.mck [data-hint]:focus-visible::after {
    content: attr(data-hint);
    position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
    background: #211d17; color: #f4f1ea;
    padding: 6px 10px; border-radius: 6px;
    font-size: 11.5px; font-weight: 500; line-height: 1.45; text-align: left;
    width: max-content; max-width: 280px; white-space: normal;
    box-shadow: 0 8px 28px rgba(30, 26, 20, .25);
    z-index: 80; pointer-events: none;
}
.mck [data-hint]:hover::before,
.mck [data-hint]:focus-visible::before {
    content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #211d17;
    z-index: 80; pointer-events: none;
}
/* Varianta pro prvky u horního okraje — bublina dolů. */
.mck [data-hint][data-hint-dolu]:hover::after,
.mck [data-hint][data-hint-dolu]:focus-visible::after { bottom: auto; top: calc(100% + 7px); }
.mck [data-hint][data-hint-dolu]:hover::before,
.mck [data-hint][data-hint-dolu]:focus-visible::before {
    bottom: auto; top: 100%; border-top-color: transparent; border-bottom-color: #211d17;
}

/* ==========================================================================================
   NÁSTĚNKA PORADCE (spec 2026-07-21) — sdílené styly (globální záměrně: markup panelů žije
   ve víc komponentách + MarkupString briefingu, CSS izolace by styly roztrhala). 1:1 podle
   schváleného mockupu (nastenka-mockup.html), tokeny z backoffice-mock.css (:root).
   ========================================================================================== */
/* Nástěnka jede na plnou šířku plochy jako zbytek back office (zadání 2. 8. 2026).
   Strop 1420 px na širokém displeji vystředil obsah a nechal po stranách prázdno,
   zatímco Ticketing vedle toho začínal hned u kraje. */
.mck .ns { max-width: none; }

/* --- hlavička dne --- */
.mck .ns-tlc { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border-strong); background: var(--surface); border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text); font-family: inherit; }
.mck .ns-tlc:hover { border-color: var(--accent); }
.mck .ns-tlc.primarni { background: var(--accent); border-color: var(--accent); color: #fff; }
.mck .ns-tlc.primarni:hover { background: var(--accent-strong); }
.mck .ns-tlc.zap { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }

/* --- briefing --- */
.mck .ns-briefing { background: linear-gradient(180deg, var(--accent-weak), var(--surface) 85%); border: 1px solid #dfe4c4; border-radius: var(--r); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 12px; }
.mck .ns-briefing-h { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; flex-wrap: wrap; }
.mck .ns-briefing-h .ns-alogo { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--sidebar-brand), #5a6a10); display: grid; place-items: center; color: #1a1a12; font-weight: 800; font-size: 13px; }
.mck .ns-briefing-h b { font-size: 13px; }
.mck .ns-briefing-h .ns-meta { margin-left: auto; font-size: 11px; color: var(--text-mute); }
.mck .ns-briefing p { margin: 4px 0; font-size: 13px; line-height: 1.6; max-width: 110ch; }
.mck .ns-citace { display: inline-block; font-size: 10px; font-weight: 600; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 0 6px; color: var(--text-dim); vertical-align: 1px; white-space: nowrap; }

/* --- zóny --- */
.mck .ns-zona { display: flex; align-items: baseline; gap: 10px; margin: 18px 2px 8px; }
.mck .ns-zona h3 { font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-mute); margin: 0; font-weight: 700; }
.mck .ns-zona span { font-size: 11px; color: var(--text-mute); }
.mck .ns-akcni { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mck .ns-prehledy { display: grid; grid-template-columns: repeat(auto-fill, minmax(332px, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .mck .ns-akcni { grid-template-columns: 1fr; } }

/* --- panel (shell) --- */
.mck .np { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0; position: relative; }
.mck .np-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; }
.mck .np-h h2 { font-size: 13px; margin: 0; font-weight: 650; flex: 1; min-width: 0; }
.mck .np-ico { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: 0 0 auto; }
.mck .np-badge { font-size: 10.5px; font-weight: 700; background: var(--crit); color: #fff; border-radius: 9px; padding: 1px 7px; }
.mck .np-badge.tich { background: var(--surface-3); color: var(--text-dim); }
.mck .np-x { border: none; background: none; color: var(--text-mute); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: 4px; font-family: inherit; }
.mck .np-x:hover { color: var(--crit); background: var(--crit-bg); }
.mck .np-b { padding: 2px 12px 12px; flex: 1; min-width: 0; }
.mck .np-f { padding: 6px 12px 9px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-mute); display: flex; gap: 10px; align-items: center; }
.mck .np-f a { margin-left: auto; white-space: nowrap; }

/* --- ikony panelů (barevné čtverečky) --- */
.mck .np-ico.i-akcent { background: var(--accent-weak); color: var(--accent-strong); }
.mck .np-ico.i-crit { background: var(--crit-bg); color: var(--crit); }
.mck .np-ico.i-warn { background: var(--warn-bg); color: var(--warn); }
.mck .np-ico.i-good { background: var(--good-bg); color: var(--good); }
.mck .np-ico.i-tich { background: var(--surface-3); color: var(--text-dim); }
.mck .np-ico.i-fialova { background: #f3e8f8; color: #8e44ad; }
.mck .np-ico.i-modra { background: #e8eef8; color: #3563a8; }

/* --- řádky a čipy --- */
.mck .ns-radek { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--surface-3); font-size: 12.5px; min-width: 0; }
.mck .ns-radek:last-child { border-bottom: none; }
.mck .ns-radek .ns-rust { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mck .ns-cas { font-variant-numeric: tabular-nums; color: var(--text-dim); font-weight: 600; font-size: 12px; width: 40px; flex: 0 0 auto; }
.mck .ns-cas.siroky { width: 52px; }
.mck .ns-chip { display: inline-block; font-size: 10.5px; font-weight: 600; border-radius: 9px; padding: 1px 8px; background: var(--surface-3); color: var(--text-dim); white-space: nowrap; }
.mck .ns-chip.rodina { background: var(--accent-weak); color: var(--accent-strong); }
.mck .ns-chip.crit { background: var(--crit-bg); color: var(--crit); }
.mck .ns-chip.warn { background: var(--warn-bg); color: var(--warn); }
.mck .ns-chip.good { background: var(--good-bg); color: var(--good); }
.mck .ns-chip.ukazka { background: #f3e8f8; color: #8e44ad; }
.mck .ns-tecka { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.mck .ns-tecka.t-crit { background: var(--crit); }
.mck .ns-tecka.t-warn { background: var(--warn); }
.mck .ns-tecka.t-good { background: var(--good); }
.mck .ns-tecka.t-mute { background: var(--border-strong); }
.mck .ns-sekce { font-size: 10.5px; letter-spacing: .9px; text-transform: uppercase; color: var(--text-mute); font-weight: 700; padding: 8px 0 3px; }
.mck .ns-sekce.crit { color: var(--crit); }
.mck .ns-oddelovac { text-align: center; font-size: 10px; color: var(--text-mute); letter-spacing: .8px; text-transform: uppercase; padding: 4px 0 2px; }
.mck .ns-prazdno { font-size: 12px; color: var(--text-mute); padding: 8px 0; }
.mck .ns-meta-radek { color: var(--text-mute); font-size: 11.5px; }
.mck .ns input[type=checkbox] { accent-color: var(--accent); }

/* --- karty rodin --- */
/* JEDNA karta na řádek. Panel „Moje rodiny" je jeden ze čtyř vedle sebe, tedy úzký (~370 px);
   dva sloupce karet se do něj nevešly a název s odznaky přetékal ven (nahlášeno 2. 8. 2026).
   Až budou rodin desítky, je svislý seznam stejně čitelnější než mřížka dvou sloupců. */
.mck .ns-rodiny-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.mck .ns-rkarta { border: 1px solid var(--border); border-radius: 6px; padding: 9px 11px; background: var(--surface); min-width: 0; }
.mck .ns-rkarta-h { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; flex-wrap: wrap; }
/* Dlouhé příjmení se zkrátí třemi tečkami, ať netlačí odznaky mimo kartu. */
.mck .ns-rkarta-h b { font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mck .ns-rkarta-h .ns-chip { margin-left: auto; flex: none; }
.mck .ns-rkarta-h .ns-chip + .ns-chip { margin-left: 0; }
.mck .ns-rkarta-m { display: flex; gap: 12px; font-size: 11.5px; color: var(--text-dim); flex-wrap: wrap; }
.mck .ns-rkarta-m b { color: var(--text); }

/* --- majetek --- */
.mck .ns-majetek-celkem { display: flex; align-items: baseline; gap: 10px; padding: 2px 0 8px; }
.mck .ns-majetek-cislo { font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.mck .ns-majetek-pozn { font-size: 11px; color: var(--text-mute); }
.mck .ns-majetek-vynechano { margin: 8px 0 0; font-size: 11px; color: var(--warn); cursor: help; }
.mck .ns-mbar { display: flex; align-items: center; gap: 8px; font-size: 11.5px; padding: 2.5px 0; }
.mck .ns-mbar .nm { width: 86px; color: var(--text-dim); flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mck .ns-mbar .br { height: 7px; border-radius: 4px; background: var(--accent); opacity: .85; }
.mck .ns-mbar .vl { font-variant-numeric: tabular-nums; color: var(--text-dim); white-space: nowrap; }
.mck .ns-statistiky { display: flex; gap: 14px; font-size: 12px; color: var(--text-dim); padding: 4px 0 6px; flex-wrap: wrap; }
.mck .ns-statistiky strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* --- dialog Přizpůsobit --- */
.mck .ns-overlay { position: fixed; inset: 0; background: rgba(25, 22, 18, .45); z-index: 50; display: grid; place-items: center; padding: 30px; }
.mck .ns-dialog { background: var(--surface); border-radius: 10px; box-shadow: var(--shadow-pop); width: min(860px, 100%); max-height: 86vh; display: flex; flex-direction: column; }
.mck .ns-dlg-h { padding: 18px 22px 0; }
.mck .ns-dlg-h h2 { margin: 0 0 4px; font-size: 18px; }
.mck .ns-dlg-h p { margin: 0 0 12px; color: var(--text-dim); font-size: 12.5px; }
.mck .ns-dlg-hledat { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border-strong); border-radius: 6px; padding: 7px 11px; margin-bottom: 10px; }
.mck .ns-dlg-hledat input { border: none; outline: none; flex: 1; font-size: 13px; font-family: inherit; background: none; color: var(--text); }
.mck .ns-dlg-taby { display: flex; gap: 2px; border-bottom: 1px solid var(--border); padding: 0 22px; flex-wrap: wrap; }
.mck .ns-dlg-tab { border: none; background: none; padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; }
.mck .ns-dlg-tab.akt { color: var(--accent-strong); border-bottom-color: var(--accent); }
.mck .ns-dlg-telo { overflow-y: auto; padding: 14px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mck .ns-pkarta { border: 1px solid var(--border); border-radius: 8px; padding: 11px 12px; display: flex; gap: 10px; align-items: flex-start; transition: box-shadow .15s; }
.mck .ns-pkarta:hover { box-shadow: var(--shadow-pop); border-color: var(--border-strong); }
.mck .ns-pkarta .np-ico { width: 30px; height: 30px; border-radius: 8px; font-size: 13px; }
.mck .ns-pkarta-t { flex: 1; min-width: 0; }
.mck .ns-pkarta-t b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.mck .ns-pkarta-t small { color: var(--text-dim); font-size: 11.5px; line-height: 1.45; display: block; }
.mck .ns-pkarta-t .ns-nahled { display: none; margin-top: 8px; border: 1px dashed var(--border-strong); border-radius: 6px; padding: 7px 9px; font-size: 10.5px; color: var(--text-mute); background: var(--surface-2); }
.mck .ns-pkarta:hover .ns-nahled { display: block; }
.mck .ns-btn-pridat { border: 1px solid var(--accent); color: var(--accent-strong); background: var(--surface); border-radius: 6px; padding: 4px 11px; font-size: 11.5px; font-weight: 650; cursor: pointer; font-family: inherit; white-space: nowrap; }
.mck .ns-btn-pridat:hover { background: var(--accent-weak); }
.mck .ns-btn-mam { border: none; background: none; color: var(--good); font-size: 11.5px; font-weight: 700; cursor: pointer; padding: 4px 8px; font-family: inherit; white-space: nowrap; }
.mck .ns-pkarta:hover .ns-btn-mam { color: var(--crit); }
.mck .ns-pkarta:hover .ns-btn-mam::after { content: " — odebrat"; }
.mck .ns-zamek { font-size: 10.5px; color: var(--text-mute); padding: 4px 0; white-space: nowrap; }
.mck .ns-dlg-f { border-top: 1px solid var(--border); padding: 12px 22px; display: flex; align-items: center; }
.mck .ns-dlg-f .ns-tlc { margin-left: auto; }
.mck .ns-dialog mark { background: #f4ea9e; border-radius: 2px; padding: 0 1px; }

/* ── STAVOVÉ ODZNAKY (náhled klienta, přepnutý režim) ─────────────────────────
   Do 26. 8. 2026 to byly PRUHY PŘES CELOU ŠÍŘKU nad aplikací — dva řádky, které braly
   výšku všem obrazovkám. Teď je z nich pilulka ve stylu DEV odznaku, kterou hostí už
   existující horní pruh (back office i klientská tvář), takže rozvržení nepřidává ani
   pixel výšky.

   GLOBÁLNÍ LIST, ne scoped: týž odznak visí ve TŘECH shellech (.mck, .shell, .mjt) a scoped
   pravidlo jednoho rozvržení na komponentu v druhém nedosáhne.

   PLNÁ VÝPLŇ SCHVÁLNĚ: odznak sedí jednou na tmavé sépii (back office) a jednou na krému
   (klientská tvář) — průhledné pozadí by na jednom z nich zmizelo. */

.stav-odznak {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    text-decoration: none;
    flex: 0 0 auto;
    transition: filter 120ms ease;
}

.stav-odznak svg { width: 13px; height: 13px; flex: 0 0 auto; }
.stav-odznak:hover { filter: brightness(1.08); }
.stav-odznak:focus-visible { outline: 2px solid #afca0b; outline-offset: 2px; }

/* NÁHLED KLIENTA JE JANTAROVÝ. Je to stav, na který se nesmí zapomenout — poradce se v něm
   dívá cizíma očima a zápis z něj neprojde. */
.stav-odznak-nahled { background: #f0c04a; color: #2e231a; }

/* Přepnutý režim je tišší: mění rozsah, ale ne to, čí data vidíte. */
.stav-odznak-rezim { background: #8a7563; color: #f4efe4; }