/* ==========================================================================
   Klientský portál (/majetek) — SDÍLENÝ komponentový slovník v2
   Port design systému z mockupu produktového vlastníka (podklady/Alfred -
   klientsky portal.html). Scope `.mjt` — mimo klientskou tvář nic neovlivní.

   Proč globální soubor a ne scoped CSS: Blazor izolace neumí sdílet selektory
   mezi stránkami (vedlo to k 339řádkovým kopiím mezi oblastmi). Tokeny žijí
   v MajetekLayout.razor.css (dědí se), TVAROSLOVÍ žije tady — jednou.
   ========================================================================== */

/* ── Hlavička stránky ─────────────────────────────────────────────────────
   Podpis mockupu: zelený prapor 34×3, eyebrow verzálkami, H1 Inter 700
   s těsným trackingem.

   UTILE DISPLAY NENÍ JEN WORDMARK (oprava 9. 8. 2026 proti srpnovému mockupu). Poznámka „patří
   JEN wordmarku v sidebaru" tu stála od července; mockup ji ale sází i v hero Alfréda, ve jméně
   Alfréda v tmavé kartě, v názvu měsíce v kalendáři, v kartách hodnot rodiny, v číslech kapitol
   a v celém dokumentu reportu. Je to záměr: Inter nese STRUKTURU, Utile Display OBŘADNÍ MOMENTY
   (Alfrédův hlas, rodinná ústava, report). Sahat po ní jinde než tam pořád nemá smysl. */

.mjt .mjt-hlava {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--mjt-hairline);
    position: relative;
}

.mjt .mjt-hlava::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: var(--mjt-green-500);
}

.mjt .mjt-hlava-texty { padding-top: 14px; min-width: 0; }

/* Hlavička na JEDEN řádek: nadpis, filtr a akce vedle sebe (revize 1. 8. 2026 — původní
   sloupec drobečky/filtr/titulek/podtitul zabíral skoro třetinu první obrazovky).
   Identita rodiny visí vpravo nahoře (.mjt-topbar), proto vpravo rezerva. */
.mjt .mjt-hlava-radek {
    align-items: center;
    flex-wrap: wrap;
    padding-top: 13px;              /* místo pro zelený praporek nad nadpisem */
    padding-bottom: 12px;
    margin-bottom: 16px;
    padding-right: 250px;
    row-gap: 8px;
}

.mjt .mjt-hlava-radek .mjt-h1 { font-size: 26px; margin: 0; }
.mjt .mjt-hlava-radek .mjt-hlava-mezera { flex: 1 1 12px; }

@media (max-width: 1180px) {
    /* Užší okno: identita rodiny se vrací do toku nad hlavičku, rezerva je zbytečná. */
    .mjt .mjt-hlava-radek { padding-right: 0; }
}

/* Výhrada ke kurzu — u čísel, kterých se týká, ne v hlavičce stránky. */
.mjt .mjt-pozn-kurz {
    margin: -6px 0 18px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--mjt-brown-400);
}

.mjt .mjt-eyebrow {
    font-family: var(--mjt-font-nadpis);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mjt-brown-400);
}

.mjt .mjt-h1 {
    /* Mockup: .h1 je font-body (Inter) 31px, ŘEZ 700, tracking -.025em. Jakarta se nevrací —
       v celém srpnovém mockupu není ani jednou (viz tokeny v MajetekLayout.razor.css).

       ŘEZ 700 (pokyn uživatele 29. 8. 2026: „fonty 1:1 co se velikosti a tučnosti týče všude"
       — ruší dřívější volbu 600 z 28. 8.). */
    font-family: var(--mjt-font-nadpis);
    font-weight: 700;
    font-size: 31px;
    letter-spacing: -.025em;
    word-spacing: var(--mjt-ws-nadpis);
    color: var(--mjt-brown-700);
    margin: 6px 0 0;
    line-height: 1.08;
}

.mjt .mjt-podtitul {
    font-size: 13.5px;
    /* Totéž co u drobečku — a navíc SPODNÍ MARGIN NULA: 16 px zdola dodával globální předpis
       pro <p>, návrh ho nemá. */
    line-height: normal;
    color: var(--mjt-brown-400);
    margin: 8px 0 0;
    max-width: 100%;
    /* Návrh větu NEZALAMUJE — přeteklou uřízne třemi tečkami. Plné znění drží `title`,
       takže se čtenář k němu dostane i tak. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* BEZ ODSAZENÍ SHORA. Návrh drží akce u horní hrany hlavičky (`.hd-r`), zatímco titulek si
   odsazení nese sám — naše 14 px shora tlačila Export a Nahlásit chybu o 14 px níž než v návrhu. */
/* NAD HORNÍM PRUHEM. Pruh „kdo jsem" je absolutní a u PORADCE V NÁHLEDU (pilulka účtu +
   tlačítka hlavičky) zasahoval do řádku akcí — „Nahlásit chybu" nešlo kliknout ani uprostřed
   (změřeno `elementFromPoint`). Tlačítka jsou obsah, pruh je chrome, takže vyhrávají ona. */
.mjt .mjt-hlava-akce { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; position: relative; z-index: 3; }

.mjt .mjt-akce-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    border-radius: var(--mjt-radius-md);
    border: 1px solid var(--mjt-hairline);
    background: var(--mjt-white);
    color: var(--mjt-brown-500);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--mjt-font-nadpis);
    word-spacing: var(--mjt-ws-nadpis);
    text-decoration: none;
    transition: border-color var(--mjt-dur-fast) var(--mjt-ease-out), color var(--mjt-dur-fast) var(--mjt-ease-out);
}

.mjt .mjt-akce-btn:hover { border-color: var(--mjt-brown-300); color: var(--mjt-brown-700); }
.mjt .mjt-akce-btn svg { width: 15px; height: 15px; }

/* ── Drobečky ────────────────────────────────────────────────────────────── */

.mjt .mjt-drobecky {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    /* NÁVRH TU ŘÁDKOVÁNÍ NEMÁ (počítá se `normal`). Naše zděděné 1,6 dělalo z řádku 20 px
       místo 15 a celá hlavička se tím posouvala níž — na filtračním pruhu to dělalo 27 px
       (změřeno 26. 8. 2026). Jednořádkový drobeček řádkování nepotřebuje. */
    line-height: normal;
    color: var(--mjt-brown-400);
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.mjt .mjt-drobecky a { color: var(--mjt-green-700); font-weight: 600; text-decoration: none; }
.mjt .mjt-drobecky a:hover { text-decoration: underline; }
.mjt .mjt-drobecky .sep { opacity: .5; }
.mjt .mjt-drobecky .cur { color: var(--mjt-brown-600); font-weight: 600; }

/* Karta s křivkou vývoje. Sdílená (OblastGraf) — proto tady, ne ve scoped CSS jedné stránky:
   scoped CSS nedosáhne na cizí komponentu a pravidlo by tiše nikde neplatilo. */
.mjt .mjt-graf-blok { margin-top: 2px; margin-bottom: 20px; }
.mjt .mjt-graf-pozn { display: block; margin-top: 12px; line-height: 1.55; }

/* ── Filtrační pás ───────────────────────────────────────────────────────── */

.mjt .mjt-filtry {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 0 18px;
    border-bottom: 1px solid var(--mjt-hairline);
    margin-bottom: 20px;
}

.mjt .mjt-filtry .fsep { flex: 1; }

/* POZOR: návrh má `.fchip` DVAKRÁT a druhé pravidlo to první přepisuje — my jsme do 26. 8. 2026
   portovali to první (500 · 12,5 px · brown-500), takže pilulky byly větší a tmavší než v návrhu.
   Platí to druhé: 600 · 11,5 px · brown-400, odsazení 6/12. Změřeno na běžícím návrhu. */
.mjt .mjt-fchip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 6px 12px;
    border-radius: var(--mjt-radius-pill);
    background: var(--mjt-white);
    border: 1px solid var(--mjt-hairline);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mjt-brown-400);
    cursor: pointer;
    font-family: var(--mjt-font-nadpis);
    word-spacing: var(--mjt-ws-nadpis);
    text-decoration: none;
    transition: background var(--mjt-dur-fast) var(--mjt-ease-out), border-color var(--mjt-dur-fast) var(--mjt-ease-out);
}

.mjt .mjt-fchip b { color: var(--mjt-brown-700); font-weight: 600; }
.mjt .mjt-fchip svg { width: 13px; height: 13px; opacity: .5; }
.mjt .mjt-fchip:hover { border-color: var(--mjt-brown-300); }

.mjt .mjt-fchip.sel {
    background: var(--mjt-green-100);
    border-color: var(--mjt-green-300);
    color: var(--mjt-green-700);
}

.mjt .mjt-fchip.sel b { color: var(--mjt-green-700); }

/* Rozbalovací filtr (details/summary stylovaný jako pilulka z mockupu). */
.mjt .mjt-fdrop { position: relative; }
.mjt .mjt-fdrop > summary { list-style: none; cursor: pointer; }
.mjt .mjt-fdrop > summary::-webkit-details-marker { display: none; }
.mjt .mjt-fdrop[open] > summary { border-color: var(--mjt-green-300); }
.mjt .mjt-fdrop > summary svg { width: 13px; height: 13px; opacity: .5; }
.mjt .mjt-fdrop[open] > summary svg { transform: rotate(180deg); }

.mjt .mjt-fdrop-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    min-width: 240px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--mjt-white);
    border: 1px solid var(--mjt-hairline);
    border-radius: var(--mjt-radius-md);
    box-shadow: var(--mjt-shadow-md);
    padding: 5px;
    display: flex;
    flex-direction: column;
}

.mjt .mjt-fdrop-volba {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 10px;
    border-radius: var(--mjt-radius-sm);
    font-size: 13px;
    color: var(--mjt-brown-600);
    text-decoration: none;
    white-space: nowrap;
}

.mjt .mjt-fdrop-volba:hover { background: var(--mjt-cream-50); }
.mjt .mjt-fdrop-volba.je-aktivni { background: var(--mjt-green-100); color: var(--mjt-green-700); font-weight: 600; }
.mjt .mjt-fdrop-popis { font-size: 11.5px; color: var(--mjt-brown-400); font-variant-numeric: tabular-nums; }
.mjt .mjt-fdrop-volba.je-aktivni .mjt-fdrop-popis { color: var(--mjt-green-700); }

/* Segmentový přepínač (rozsah grafu, kontextové pohledy). */
.mjt .mjt-seg {
    display: inline-flex;
    background: var(--mjt-cream-200);
    border: 1px solid var(--mjt-hairline);
    border-radius: var(--mjt-radius-pill);
    padding: 3px;
}

.mjt .mjt-seg a,
.mjt .mjt-seg button {
    border: 0;
    background: transparent;
    font-family: var(--mjt-font-text);
    font-size: 12px;
    font-weight: 600;
    color: var(--mjt-brown-400);
    padding: 6px 13px;
    border-radius: var(--mjt-radius-pill);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--mjt-dur-fast) var(--mjt-ease-out), color var(--mjt-dur-fast) var(--mjt-ease-out);
}

.mjt .mjt-seg .on {
    background: var(--mjt-white);
    color: var(--mjt-brown-700);
    box-shadow: var(--mjt-shadow-xs);
}

/* Malá chip-řada (rozsahy přímo v hlavičce grafu). */
.mjt .mjt-chipy { display: flex; gap: 5px; }

.mjt .mjt-chipy a,
.mjt .mjt-chipy button {
    border: 0;
    background: transparent;
    font: 600 11.5px var(--mjt-font-nadpis);
    word-spacing: var(--mjt-ws-nadpis);
    color: var(--mjt-brown-400);
    padding: 4px 9px;
    border-radius: var(--mjt-radius-sm);
    cursor: pointer;
    text-decoration: none;
}

.mjt .mjt-chipy .on { background: var(--mjt-cream-200); color: var(--mjt-brown-700); }


/* ── SANKEY „Cesta majetku ke čistému jmění" ──────────────────────────────────
   Rozměry i odstupy jsou změřené z návrhu (viewBox 1240 × 952). Barvy NESE TŘÍDA
   KATEGORIE (mjt-kat-*), ne paleta návrhu — táž barva jako v koláči a v tabulce spisu
   (rozhodnutí uživatele 25. 8. 2026). */

/* Široký graf roluje VE SVÉM OBALU, ne celou stránkou. */
.mjt .mjt-snk-obal { overflow-x: auto; margin: 6px -22px 0; padding: 0 22px; }
.mjt .mjt-snk-plocha { min-width: 1240px; }
/* SANKEY SE ROZTAHUJE NA ŠÍŘKU KARTY (oprava 29. 8. 2026). Atribut width=1240 nechává
   na 1920px oknu čtvrtinu karty prázdnou; viewBox škáluje celou kresbu proporčně
   (i písmo — na 1604 px vyjde ~13,5 px, pořád čitelné). min-width nahoře drží
   vodorovné rolování na úzkém okně beze změny. */
.mjt .mjt-snk-obal svg { display: block; max-width: none; width: 100%; height: auto; }

.mjt .mjt-snk-zahlavi {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    fill: var(--mjt-brown-400);
    opacity: .82;
}

/* Popisek jednotlivé držby (vpravo zarovnaný, vlevo od uzlu). */
.mjt .mjt-snk-drzba { font-size: 13.5px; font-weight: 500; fill: var(--mjt-brown-700); }

/* Název třídy aktiv — nad bílou pilulkou, aby ho stužky pod ním nerozmazaly. */
/* Popisek třídy leží PŘÍMO na stužce (bílá pilulka pod ním odešla 27. 8. 2026 — v návrhu
   se kreslí pod stužkou, takže vidět není).

   ODSTÍN JE Z NÁVRHU (brown-700) a je to zároveň NEJTLUMENĚJŠÍ ČITELNÝ. V návrhu popisek
   působí ještě měkčeji, ale to je optický klam z toho, že tam leží POD průsvitnou stužkou —
   naměřeno (150,123,101), tedy 1,8–2,2:1 na stužkách. Doslova to napodobit by znamenalo text,
   který se na obrazovce ztrácí, a publikum portálu je 45+. Změřená tabulka odstínů: brown-700
   dává 5,0–6,2:1, brown-600 už jen 4,1:1 na modré stužce (pod hranicí 4,5:1). */
.mjt .mjt-snk-nazev { font-size: 14.5px; font-weight: 600; fill: var(--mjt-brown-700); letter-spacing: -.01em; }

/* „Aktiva" nad souhrnným uzlem. */
.mjt .mjt-snk-souhrn { font-size: 15px; font-weight: 600; fill: var(--mjt-brown-700); }

/* Uzly a stužky. Barvu dodává třída kategorie přes --kat; souhrnné uzly mají svou. */
.mjt .mjt-snk-uzel { fill: var(--kat, var(--mjt-brown-300)); }
.mjt .mjt-snk-tok { fill: var(--kat, var(--mjt-brown-300)); opacity: .55; transition: opacity var(--mjt-dur-fast) var(--mjt-ease-standard); }

/* Klikatelný tok se při přejetí zvýrazní; statický nemá co nabídnout, takže se nehýbe. */
.mjt .mjt-snk-obal a:hover .mjt-snk-tok { opacity: .85; }
.mjt .mjt-snk-obal a:hover .mjt-snk-uzel { filter: brightness(1.06); }
.mjt .mjt-snk-obal a { cursor: pointer; }

/* ŠIPKA NA KONCI KLIKACÍHO ŘÁDKU (návrh: 16 px, brown-300). Sloupec je úzký a zarovnaný
   doprava; barvu drží `currentColor`, takže se šipka na najetí zvýrazní spolu s řádkem. */
.mjt .mjt-sl-sip { width: 28px; text-align: right; color: var(--mjt-brown-300); }
.mjt tr:hover .mjt-sl-sip { color: var(--mjt-brown-500); }
.mjt .mjt-sl-sip svg { display: block; margin-left: auto; }
.mjt .mjt-snk-tok.mjt-snk-staticky, .mjt .mjt-snk-uzel.mjt-snk-staticky { cursor: default; }

/* Souhrnné uzly: aktiva hnědá, čisté jmění zelené, závazky tlumeně hnědé (jako v návrhu). */
.mjt .mjt-snk-aktiva { --kat: var(--mjt-brown-600); }
.mjt .mjt-snk-jmeni { --kat: var(--mjt-green-600); }
.mjt .mjt-snk-zavazky { --kat: var(--mjt-brown-400); }

.mjt .mjt-snk-pozn {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--mjt-hairline);
    font-size: 11px;
    color: var(--mjt-brown-400);
}

@media (prefers-reduced-motion: reduce) {
    .mjt .mjt-snk-tok { transition: none; }
}




/* Prvky horního pruhu klientské tváře zase kliky CHYTAJÍ (sám pruh je nechytá — viz
   MajetekLayout.razor.css). Musí to být tady, v globálním listu: odznaky stavu patří cizím
   komponentám a scoped pravidlo rozvržení na ně nedosáhne. */
.mjt .mjt-topbar > * { pointer-events: auto; }


/* ── Konec náhledu klienta v LIŠTĚ ───────────────────────────────────────────
   Pokyn uživatele 26. 8. 2026: odznak nahoře pryč, ukončení náhledu do menu dolů — v plné
   šířce pod kartu rodiny, v úzké kolejnici do kontextové nabídky té karty.

   TADY, V GLOBÁLNÍM LISTU, ZE STEJNÉHO DŮVODU JAKO pravidlo nad tím: odkaz kreslí cizí
   komponenta <NahledPruh>, na kterou scoped CSS rozvržení nedosáhne. Napsat to do
   MajetekLayout.razor.css znamená, že se pravidlo tiše neuplatní.

   Barva je táž jako u dřívějšího odznaku (#f0c04a): náhled klienta je stav, na který se
   nesmí zapomenout, a v tmavé liště je jantar to jediné, co z ní vystoupí. */

.mjt .mjt-nahled-konec {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border-radius: var(--mjt-radius-md);
    background: rgba(240, 192, 74, .14);
    border: 1px solid rgba(240, 192, 74, .4);
    color: #f0c04a;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--mjt-dur-fast) var(--mjt-ease-standard),
                color var(--mjt-dur-fast) var(--mjt-ease-standard);
}

.mjt .mjt-nahled-konec:hover { background: #f0c04a; color: #2e231a; }
.mjt .mjt-nahled-konec:focus-visible { outline: 3px solid rgba(175, 202, 11, .55); outline-offset: 2px; }
.mjt .mjt-nahled-konec svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* Položka v kontextové nabídce karty rodiny — v ŠIROKÉ liště se neukazuje (tam je řádek
   nad tím) a zapíná se až v kolejnici. */
.mjt .mjt-kdo-konec { display: none; }

@media (min-width: 901px) {
    html.lista-uzka .mjt .mjt-nahled-konec { display: none; }

    /* …ledaže karta rodiny nevznikla: pak není kam se schovat (viz komentář v rozvržení). */
    html.lista-uzka .mjt .mjt-nahled-konec.je-jedina {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 8px 4px;
        font-size: 10px;
        text-align: center;
    }

    /* Celý kabát položky, ne jen barva: `mjt-kdo-polozka` je ve SCOPED listu rozvržení
       a na odkaz kreslený <NahledPruh> nedosáhne (viz komentář v rozvržení). */
    html.lista-uzka .mjt .mjt-kdo-konec {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 9px;
        border-radius: var(--mjt-radius-sm);
        font-size: 12.5px;
        font-weight: 600;
        color: #f0c04a;
        text-decoration: none;
    }

    html.lista-uzka .mjt .mjt-kdo-konec:hover { background: rgba(240, 192, 74, .16); color: #f0c04a; }
    html.lista-uzka .mjt .mjt-kdo-konec:focus-visible { outline: 2px solid var(--mjt-green-500); outline-offset: -2px; }
    html.lista-uzka .mjt .mjt-kdo-konec svg { width: 15px; height: 15px; flex: 0 0 15px; }
}


/* ── Přepínač pohledu na majetek (návrh: .toggle) ─────────────────────────
   Investiční · Celkový · V mandátu. Odkazy, ne tlačítka — klientská tvář je statické SSR
   (ADR-0067) a volba se drží v adrese, takže se dá poslat i uložit do záložek. Rozměry jsou
   z návrhu: pilulka s vnitřním odsazením 3 px a aktivní položkou v tmavě hnědé. */

.mjt .mjt-prepinac {
    display: inline-flex;
    background: var(--mjt-cream-200);   /* zapuštěná plocha — v návrhu --surface-sunken */
    border: 1px solid var(--mjt-hairline);
    border-radius: var(--mjt-radius-pill);
    padding: 3px;
}

.mjt .mjt-prepinac a {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mjt-brown-400);
    padding: 6px 12px;
    border-radius: var(--mjt-radius-pill);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--mjt-dur-fast) var(--mjt-ease-standard),
                color var(--mjt-dur-fast) var(--mjt-ease-standard);
}

.mjt .mjt-prepinac a:hover { color: var(--mjt-brown-600); }
.mjt .mjt-prepinac a.on { background: var(--mjt-brown-700); color: var(--mjt-cream-100); }
.mjt .mjt-prepinac a:focus-visible { outline: 3px solid rgba(175, 202, 11, .55); outline-offset: 2px; }


/* Legenda grafu s benchmarkem — jednořádková, vzorky odpovídají čárám v grafu. */
.mjt .mjt-graf-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--mjt-ink-600);
}

.mjt .mjt-graf-legenda .pol {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.mjt .mjt-graf-legenda .pozn {
    color: var(--mjt-ink-500);
    font-style: italic;
}

.mjt .mjt-graf-legenda .vzorek {
    width: 18px;
    height: 0;
    border-top: 2px solid var(--mjt-green-600);
    border-radius: 2px;
}

/* Vzorek indexu kreslí TÝŽ rytmus čárek jako graf (5/4) — `border-top: dashed` si dělá
   vlastní a na 18 px vypadá skoro plný, takže by legenda ukazovala jinou čáru, než je v grafu. */
.mjt .mjt-graf-legenda .vz-index {
    border-top: 0;
    height: 2px;
    background: repeating-linear-gradient(
        to right, var(--mjt-brown-400) 0 5px, transparent 5px 9px);
}

/* Srovnávací index v grafu — tenčí a přerušovaný, aby se nepletl s křivkou portfolia.
   Graf je o portfoliu; index je měřítko, ne druhý hlavní údaj. */
.mjt .mjt-vchart svg polyline.srovnani {
    fill: none;
    stroke: var(--mjt-brown-400);
    stroke-width: 1.6;
    stroke-dasharray: 5 4;
    stroke-linejoin: round;
    stroke-linecap: round;
    opacity: .85;
    vector-effect: non-scaling-stroke;
}


/* ── KPI karty ───────────────────────────────────────────────────────────── */

.mjt .mjt-kpi-rada {
    display: grid;
    grid-template-columns: 1.45fr 1fr 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

.mjt .mjt-kpi-rada.tri { grid-template-columns: 1.45fr 1fr 1fr; }
/* Hlavní karta nese pod číslem ještě trojici z návrhu (YTD · Od začátku · Nákladovost),
   takže potřebuje dvojnásobnou šířku — jinak láme řádky a vedle ní stojí tři skoro prázdné
   karty. Poměr 2 : 1 : 1 je nejbližší mřížce, který návrhu odpovídá (tam je 1,25 : 1). */
.mjt .mjt-kpi-rada.ma-siroke-hero { grid-template-columns: 2fr 1fr 1fr 1fr; }

@media (max-width: 1200px) {
    .mjt .mjt-kpi-rada.ma-siroke-hero {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mjt .mjt-kpi-rada.ma-siroke-hero .mjt-kpi.hero { grid-column: span 2; }
}
/* TŘI DLAŽDICE PŘES CELOU ŠÍŘKU — pružně, ne mřížkou (návrh: `display:flex` a poměry
   `1.7 1 330px` : `1 1 235px` : `1 1 235px`, mezera 16 px).

   Proč ne `grid-template-columns`: pevný poměr `fr` sedne jen při jedné šířce okna. Návrh
   rozdává zbytek podle `flex-grow` NAD základní šířkou, takže se poměr s oknem mění (na 1124 px
   vychází 1,48 : 1 : 1, na 1600 px už 1,54 : 1 : 1). Opsat jedno číslo by znamenalo trefit se
   na jedné šířce a minout na všech ostatních.

   Výchozí `.mjt-kpi-rada` je mřížka na ČTYŘI sloupce, takže tři dlaždice v ní končily v 3/4
   šířky a čtvrtina zůstávala prázdná. */
.mjt .mjt-kpi-rada.tri-pruzna {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
}

.mjt .mjt-kpi-rada.tri-pruzna > .mjt-kpi { flex: 1 1 235px; }
.mjt .mjt-kpi-rada.tri-pruzna > .mjt-kpi.hero { flex: 1.7 1 330px; }

.mjt .mjt-kpi-rada.rovna { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Pět karet vedle sebe (přehled třídy s rozpady): první nese hlavní číslo, proto širší.
   Na pět karet zbývá na hlavní číslo míň místa než na čtyři, takže má vlastní, menší mez —
   jinak přeteče přes okraj karty (viz clamp výš). */
.mjt .mjt-kpi-rada.pet { grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr)); }
.mjt .mjt-kpi-rada.pet .mjt-kpi.hero .mjt-kpi-v { font-size: clamp(24px, 2.15vw, 34px); }

.mjt .mjt-kpi {
    background: var(--mjt-white);
    border: 1px solid var(--mjt-hairline);
    border-radius: var(--mjt-radius-md);
    padding: 15px 16px;
    min-width: 0;
}

/* TŘI ŘÁDKY DLAŽDICE S PEVNOU MINIMÁLNÍ VÝŠKOU (návrh: 20 / 46 / 28 px). Díky nim dlaždice
   v řadě lícují, i když jedna nemá pilulku nebo má kratší popisek — bez toho čísla „poskakují"
   podle délky textů. Je to min-height, ne height: dvouřádkový popisek se nesmí oříznout. */
.mjt .mjt-kpi-l {
    display: flex;
    align-items: center;
    min-height: 20px;
    font-size: 12.5px;
    color: var(--mjt-brown-400);
}

/* Popisek s odkazem na opačné straně (návrh má „Detail →" jen u Disponibilní likvidity).
   `white-space: nowrap` na obou koncích: popisek se nesmí zalomit tak, aby odkaz spadl pod
   něj — dlaždice by tím vyrostla a řádek čtyř dlaždic by přestal lícovat. */
.mjt .mjt-kpi-l-rada {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mjt .mjt-kpi-l-rada > span,
.mjt .mjt-kpi-l-rada > a { white-space: nowrap; }

.mjt .mjt-kpi-l.eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Číslo dlaždice = třída `.num` z návrhu: Inter Tight, prostrkání −.01em. Vedlejší dlaždice
   mají v návrhu clamp(18, 1.6vw, 24) a ŘEZ 600 — 700 nese jen hero (změřeno 29. 8.; do té
   doby byly všechny 22/700 a hero 30–44, takže dlaždice vypadaly „těžší" než návrh). */
.mjt .mjt-kpi-v {
    display: flex;
    align-items: center;
    min-height: 46px;
    font-family: var(--mjt-font-cisla);
    font-weight: 600;
    font-size: clamp(18px, 1.6vw, 24px);
    letter-spacing: -.01em;
    color: var(--mjt-brown-700);
    margin-top: 8px;
    line-height: 1.05;
    white-space: nowrap;
}

.mjt .mjt-kpi-s { display: flex; }

.mjt .mjt-kpi-v.zaporna { color: var(--sv-neaktualni); }

/* Hero číslo: clamp z návrhu (24 / 2.4vw / 36). Původní 30–44 px bylo naše — vzniklo 2. 8.,
   když „347 575 000 Kč" přeteklo kartu; s clampem z návrhu se totéž číslo vejde (Inter Tight
   700 na 36 px ≈ 300 px, hero dlaždice má přes 400). */
.mjt .mjt-kpi.hero .mjt-kpi-v {
    font-size: clamp(24px, 2.4vw, 36px);
    font-weight: 700;
    line-height: 1.05;
    margin-top: 8px;
}

.mjt .mjt-kpi-s {
    font-size: 12px;
    margin-top: 12px;
    min-height: 28px;
    color: var(--mjt-brown-400);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Delta pilulky — ▲/▼ + %, vedle absolutní změna. */
.mjt .mjt-pill-up,
.mjt .mjt-pill-dn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--mjt-radius-pill);
    font-weight: 700;
    font-size: 13px;   /* návrh .pillg: 13/700 */
    font-family: var(--mjt-font-cisla);
    white-space: nowrap;
}

.mjt .mjt-pill-up { background: var(--mjt-green-100); color: var(--mjt-green-700); }
.mjt .mjt-pill-dn { background: #f6e2dc; color: #c0472e; }

/* ── Karty ───────────────────────────────────────────────────────────────── */

.mjt .mjt-karta {
    background: var(--mjt-white);
    border: 1px solid var(--mjt-hairline);
    border-radius: var(--mjt-radius-lg);
    box-shadow: var(--mjt-shadow-sm);
}

.mjt .mjt-karta-pad { padding: 20px 22px; }

/* SVISLÝ RYTMUS SEKCÍ (oprava 7. 8. 2026). Obsah stránky je blokový tok a odstup si nese
   každý blok sám — jenže karta vložená do stránky přímo (ne přes .mjt-dvojice) žádný neměla,
   takže „Doložitelnost hodnot" a „Položky majetku" se dotýkaly, zatímco všude jinde bylo 16 px.
   Margin se v blokovém toku slévá se sousedy, takže se rozestupy nesčítají a tam, kde už
   soused svůj odstup má, se nic nemění. */
.mjt .mjt-obsah > .mjt-karta { margin-block: 16px; }

.mjt .mjt-karta-h {
    font-family: var(--mjt-font-nadpis);
    font-weight: 700;          /* návrh .c-h: 16/700 (změřeno 29. 8. — bylo 600) */
    font-size: 16px;
    letter-spacing: -.01em;
    word-spacing: var(--mjt-ws-nadpis);
    color: var(--mjt-brown-700);
    margin: 0;
}

.mjt .mjt-karta-hh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.mjt .mjt-karta-sub { font-size: 11.5px; color: var(--mjt-brown-400); margin: 2px 0 12px; }

.mjt .mjt-lnk {
    font-size: 12px;
    font-weight: 600;
    color: var(--mjt-green-700);
    cursor: pointer;
    border: 0;
    background: transparent;
    font-family: var(--mjt-font-text);
    text-decoration: none;
}

.mjt .mjt-lnk:hover { text-decoration: underline; }

.mjt .mjt-mrizka { display: grid; gap: 16px; }
.mjt .mjt-mrizka.pul { grid-template-columns: 1fr 1fr; }

/* Dvojice karet vedle sebe (přehled, karta položky…). */
/* minmax(0, …) je tu podstatné: bez něj má sloupec gridu automatické minimum podle obsahu,
   takže široká tabulka uvnitř (vlastnictví, ocenění) roztlačila celou stránku a dole naskočil
   vodorovný posuvník — na 10 z 23 karet položek (2. 8. 2026). */
/* DVOJICE KARET = PŮL NA PŮL (oprava 29. 8. 2026). Návrh sází KAŽDOU dvojici na
   grid 1fr/1fr — Rozpad × IPS, Diverzifikace × Poslední aktivita, Likvidní × Geografické.
   Poměr 1,35 : 1 byl náš (z červencového mockupu) a komentář u hero dvojice detailu už
   dávno tvrdil, že dvojice JE 1 : 1 — teď to platí. Jediná nerovná dvojice v návrhu je
   hero detailu (1,25 : 1) a tu nese vlastní třída mjt-hero-dvojice. */
.mjt .mjt-dvojice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    margin: 16px 0;
    align-items: stretch;
}

/* Historická varianta — od 29. 8. je rovná i základní dvojice; třída zůstává, ať staré
   markupy nespadnou na jeden sloupec. */
.mjt .mjt-dvojice-rovna { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

@media (max-width: 1180px) {
    .mjt .mjt-dvojice { grid-template-columns: 1fr; }
}

/* ── Čísla a text ────────────────────────────────────────────────────────── */

.mjt .mjt-num {
    font-family: var(--mjt-font-cisla);
    letter-spacing: -.01em;
    color: var(--mjt-brown-700);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mjt .mjt-up { color: var(--mjt-success); font-weight: 600; }
.mjt .mjt-dn { color: #c0472e; font-weight: 600; }
.mjt .mjt-tlum { color: var(--mjt-brown-400); }

/* ── Tabulky (anatomie mockupu) ──────────────────────────────────────────
   Vše zarovnané vpravo kromě prvního sloupce; dvouřádková první buňka
   (název + drobný kontext); hover řádku krémem; sumární řádek tučně. */

.mjt .mjt-tab-scroll { overflow-x: auto; }

/* Spodní mez šířky drží široké tabulky čitelné (radši posuvník než slepené sloupce).
   Úzké tabulky ve dvousloupcové kartě ji ale nechtějí — tři sloupce se do 514 px vejdou
   a posuvník tam působil jako chyba (2. 8. 2026). Proto modifikátor .mjt-tb-uzka. */
.mjt table.mjt-tb {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 720px;
}

.mjt table.mjt-tb.mjt-tb-uzka { min-width: 0; }

.mjt table.mjt-tb th {
    font-size: 11px;
    font-weight: 600;
    color: var(--mjt-brown-400);
    text-align: right;
    padding: 9px 10px;
    border-bottom: 1px solid var(--mjt-hairline);
    white-space: nowrap;
}

.mjt table.mjt-tb th:first-child { text-align: left; }

.mjt table.mjt-tb td {
    padding: 11px 10px;
    text-align: right;
    border-bottom: 1px solid var(--mjt-cream-200);
    color: var(--mjt-brown-600);
    font-variant-numeric: tabular-nums;
}

.mjt table.mjt-tb td:first-child { text-align: left; }
/* ČÍSELNÁ BUŇKA JE JEN ZAROVNÁNÍ (oprava 29. 8. — fonty 1:1). Návrh v tabulce nechává
   číslům základní Inter 400/brown-600 a zvýrazňuje JMENOVITĚ: hodnota `.hn` (600/brown-700),
   zisk/den `.up`/`.dn` (600 barevně), součtový řádek 700. Plošné Inter Tight 600 na každé
   číselné buňce dělalo tabulku znatelně těžší než návrh a rozdíl hodnot od okolí smazalo. */
.mjt table.mjt-tb td.cislo { }

.mjt table.mjt-tb tr.klik { cursor: pointer; }
.mjt table.mjt-tb tr.klik:hover td { background: var(--mjt-cream-50); }
.mjt table.mjt-tb tr:last-child td { border-bottom: 0; }

/* Součtový řádek. Čára je vnitřní stín, ne border: při border-collapse vyhrává okraj řádku
   NAD ním, takže z linky nad součtem zbývaly jen první dva sloupce a zbytek tabulky končil
   bez uzávěrky (2. 8. 2026). Stín se nesráží s ničím a jde přes celou šířku. */
.mjt table.mjt-tb tr.suma td {
    font-weight: 700;
    color: var(--mjt-brown-700);
    border-top: 0;
    border-bottom: 0;
    box-shadow: inset 0 1.5px 0 var(--mjt-brown-400);
}

.mjt .mjt-hn { font-weight: 600; color: var(--mjt-brown-700); }
/* Podřádek pod hlavní hodnotou — MUSÍ být blok. Jako inline span se slepil s hodnotou
   nad sebou: „4,99 % p. a.fixní" (nahlášeno 2. 8. 2026). */
.mjt .mjt-hsub { display: block; font-size: 11px; color: var(--mjt-brown-400); margin-top: 1px; }
.mjt .mjt-sipka-b { color: var(--mjt-brown-300); }
.mjt .mjt-sipka-b svg { width: 16px; height: 16px; vertical-align: middle; }

/* První buňka s ilustrovanou ikonou (sépiová řada AktivumIkona) — sdílí přehled,
   nemovitosti i oblasti. Prázdný stav a mimo-bilanční štítek patří k témuž slovníku. */
/* BUŇKA ZŮSTÁVÁ TABULKOVOU BUŇKOU (oprava 8. 8. 2026). Do té doby měla `display: flex`, čímž
   přestala být `table-cell`: prohlížeč ji obalil anonymní buňkou a spodní linka se kreslila
   kolem flex boxu, tedy jen tak vysoko, jak sahal obsah. U řádku s podřádkem („6 pozic ve
   složení", plný název pod aliasem) tak linka pod prvním sloupcem seděla o pár pixelů výš než
   ve zbytku řádku a tabulka vypadala rozbitá. Svislé vystředění dělá `vertical-align`. */
.mjt .mjt-bunka-polozka { min-width: 220px; }
.mjt .mjt-bunka-polozka > * { vertical-align: middle; }
.mjt .mjt-ikona { width: 30px; height: 30px; border-radius: 7px; }
.mjt .mjt-bunka-polozka .mjt-ikona { display: inline-block; margin-right: 10px; }
.mjt .mjt-polozka-texty { display: inline-flex; flex-direction: column; gap: 1px; min-width: 0; }

/* ZNAČKA PORTFOLIA (návrh, tabulka Finančních portfolií): čtvereček 22 px s kufříkem místo
   obrázkové ikony položky. Druhý řádek (vlastník) se odsazuje o šířku značky i mezeru
   (22 + 9 = 31 px), aby začínal pod názvem, ne pod obrázkem — doslova jako v návrhu. */
.mjt .mjt-znacka-pf {
    width: 22px; height: 22px; border-radius: 6px; margin-right: 9px;
    background: var(--mjt-green-100, #f2f6d8); color: var(--mjt-green-700, #7f930a);
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.mjt .mjt-bunka-polozka .mjt-znacka-pf + .mjt-polozka-texty .mjt-hsub { margin-left: 0; }
.mjt .mjt-polozka-odkaz { text-decoration: none; }
.mjt .mjt-polozka-odkaz:hover { text-decoration: underline; }

.mjt .mjt-stitek-nezapocteno {
    align-self: flex-start;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mjt-brown-400);
    border: 1px solid var(--mjt-hairline);
    border-radius: 999px;
    padding: 1px 7px;
    margin-top: 2px;
}

.mjt .mjt-radek-nezapocteny td { opacity: .62; }

/* Krátká věta místo prázdné karty. Bez ní vypadala karta rozdělaně: nadpis, legenda
   a pod tím nic (nová rodina bez majetku, 2. 8. 2026). */
.mjt .mjt-nic { margin: 4px 0 0; font-size: 13px; color: var(--mjt-brown-400); }
.mjt .mjt-tb .mjt-tr-nic td { padding: 18px 10px; color: var(--mjt-brown-400); font-size: 13px; }

.mjt .mjt-prazdno { max-width: 560px; }
.mjt .mjt-prazdno h1 { font-family: var(--mjt-font-text); font-weight: 700; letter-spacing: -.02em; color: var(--mjt-brown-700); }

/* Štítky pod názvem detailu (likvidita, zdroj dat, role, výstrahy). */
.mjt .mjt-stitky { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; }

.mjt .mjt-stitek {
    font-size: 11px;
    font-weight: 600;
    color: var(--mjt-brown-500);
    border: 1px solid var(--mjt-hairline);
    background: var(--mjt-white);
    border-radius: 999px;
    padding: 3px 10px;
}

.mjt .mjt-stitek.vystraha { color: var(--mjt-warning); border-color: rgba(200, 135, 31, .45); }

/* Prázdný stav tabulky/karty. */
.mjt .mjt-tabulka-prazdna { font-size: 13px; color: var(--mjt-brown-400); margin: 4px 0 0; }

/* ── Svěžest ocenění (tečka + legenda) ───────────────────────────────────── */

/* SAMOTNÁ TEČKA NENESE ŽÁDNOU MEZERU (oprava 7. 8. 2026). Do té doby měla natvrdo
   `margin-left: 7px`, což platí jen pro jedno ze tří jejích užití — když stojí ZA částkou.
   Jako odrážka na začátku řádku (legenda svěžesti, karta „Doložitelnost hodnot") se tím
   odsazovala od kraje a mezera k textu vznikala až ze zbytku gridu; puntík vypadal odtržený
   a hlásili jsme to dvakrát. Odstup patří tam, kde tečka NĚCO NÁSLEDUJE — viz pravidla níž. */
.mjt .mjt-frd {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    cursor: help;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* Tečka ZA hodnotou — v tabulce i v KPI. Jediné místo, kde má vlastní odstup zleva. */
.mjt td.cislo .mjt-frd,
.mjt .mjt-kpi-v .mjt-frd { margin-left: 7px; }

/* Třídy dle MajetekFormat.SvezestTrida (sv-*) — jedna konvence napříč tvářemi. */
.mjt .mjt-frd.sv-dnesni { background: var(--sv-dnesni); }
.mjt .mjt-frd.sv-aktualni { background: var(--sv-aktualni); }
.mjt .mjt-frd.sv-blizi { background: var(--sv-blizi); }
.mjt .mjt-frd.sv-starsi { background: var(--sv-starsi); }
.mjt .mjt-frd.sv-neaktualni { background: var(--sv-neaktualni); box-shadow: 0 0 0 3px rgba(192, 71, 46, .14); }
.mjt .mjt-frd.sv-chybi { background: var(--sv-chybi); }

.mjt .mjt-frleg {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 11px;
    color: var(--mjt-brown-400);
    flex-wrap: wrap;
}

.mjt .mjt-frleg span { display: inline-flex; align-items: center; gap: 5px; }
.mjt .mjt-frleg i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* „Neaktuální" nese 3px výstražný prstenec (box-shadow), který nezabírá místo v layoutu,
   ale opticky mezeru sežere — popisek by vypadal přilepený. Kompenzuje se jen tam, kde
   tečka stojí PŘED textem. */
.mjt .mjt-frleg .mjt-frd.sv-neaktualni { margin-inline: 3px; }

/* ── Stavové pilulky (soulad, LTV, obsazenost, dostupnost…) ─────────────── */

.mjt .mjt-bal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--mjt-radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.mjt .mjt-bal::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.mjt .mjt-bal.ok { background: var(--mjt-green-100); color: var(--mjt-green-700); }
.mjt .mjt-bal.warn { background: #f8edd8; color: #a8741a; }
.mjt .mjt-bal.alert { background: #f6e2dc; color: #c0472e; }
/* „Víme to jen přibližně" — třetí stav vedle v pořádku × pozor. Kdyby splynul s jedním z nich,
   orientační rozdíl by se četl buď jako zjištěná vada, nebo jako potvrzený souhlas. */
.mjt .mjt-bal.info { background: var(--mjt-cream-100); color: var(--mjt-brown-500); }

/* ── Průhledný výpočet (složení portfolia — ADR-0055) ─────────────────────
   Tabulka složení ukazuje ČÍSLA, tahle karta ukazuje CESTU k nim. Proto je rovnice
   sázená číslicovým řezem se stejnou šířkou číslic — pod sebou pak jde porovnat,
   kde se která hodnota vzala. */

/* Operátor v hlavičce tabulky: díky němu se řádek čte jako rovnice (kusy × cena = hodnota). */
.mjt table.mjt-tb th .mjt-op { color: var(--mjt-brown-300); font-weight: 400; margin-right: 1px; }

.mjt .mjt-vyp {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px 18px;
}

.mjt .mjt-vyp-p {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: var(--mjt-cream-50);
    border-radius: var(--mjt-radius-md);
}

.mjt .mjt-vyp-n { font-size: 12.5px; font-weight: 600; color: var(--mjt-brown-700); }

.mjt .mjt-vyp-r {
    font-family: var(--mjt-font-cisla);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: var(--mjt-brown-600);
}

/* Druhý krok (převod do korun) je odsazený — je to pokračování téže rovnice, ne nový údaj. */
.mjt .mjt-vyp-r2 { padding-left: 14px; color: var(--mjt-brown-400); }

.mjt .mjt-vyp-z { font-size: 11px; color: var(--mjt-brown-400); margin-top: 2px; }

.mjt .mjt-vyp-souhrn {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--mjt-hairline);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mjt .mjt-vyp-souhrn > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
}

.mjt .mjt-vyp-souhrn dt { color: var(--mjt-brown-400); }

.mjt .mjt-vyp-souhrn dd {
    margin: 0;
    text-align: right;
    font-family: var(--mjt-font-cisla);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--mjt-brown-700);
}

/* Rozdíl je pointa celé karty — dostane linku nad sebou jako součtový řádek tabulky. */
.mjt .mjt-vyp-rozdil {
    padding-top: 8px;
    border-top: 1px solid var(--mjt-cream-200);
}

.mjt .mjt-vyp-rozdil dt, .mjt .mjt-vyp-rozdil dd { color: var(--mjt-brown-700); font-weight: 600; }
/* Výhrada „jen orientačně" je poznámka, ne součást nadpisu — zvýraznění z řádku dědit nesmí. */
.mjt .mjt-vyp-rozdil dt .mjt-hsub { color: var(--mjt-brown-400); font-weight: 400; }

/* Podtitul karty, který má zůstat u nadpisu. Hlavička je flex se `space-between`, takže
   u karty se třemi a víc prvky (nadpis, stav, akce) skončí podtitul stranou uprostřed
   a čte se jako popisek toho, co stojí vedle. */
.mjt .mjt-karta-hh.tesna .mjt-karta-sub { margin-right: auto; }

.mjt .mjt-vyp-pozn { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: var(--mjt-brown-400); }

/* ── Area graf (interaktivní vrstva plní js/majetek-grafy.js) ────────────── */

/* Plátno grafu a vedle něj levý žlábek se svislou osou (dle návrhu, 25. 8. 2026).
   Odsazení shora nese OBAL, ne plátno — jinak by se osa o těch 6 px rozešla s mřížkou. */
.mjt .mjt-vchart-obal { display: flex; align-items: stretch; gap: 10px; margin-top: 6px; }
.mjt .mjt-vchart-obal > .mjt-vchart { flex: 1 1 auto; min-width: 0; }

.mjt .mjt-vosa-y {
    position: relative;
    flex: 0 0 auto;
    /* Šířka na „1 000 mil Kč"; užší žlábek by nejdelší popisek zalomil a rozhodil rozteč. */
    width: 66px;
    font-size: 10.5px;
    line-height: 1.2;
    color: var(--mjt-brown-400);
    font-variant-numeric: tabular-nums;
}

/* Popisek stojí NA své vodicí lince (svisle vystředěný), zarovnaný k plátnu. */
.mjt .mjt-vosa-y span {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    white-space: nowrap;
}

.mjt .mjt-vchart { position: relative; width: 100%; height: 288px; }
.mjt .mjt-vchart.nizky { height: 200px; }
.mjt .mjt-vchart > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Neviditelná hover mřížka — jeden div na datový bod (kreslí Razor). */
.mjt .mjt-vseg { position: absolute; inset: 0 0 24px 0; display: flex; }
.mjt .mjt-vseg > div { flex: 1; cursor: crosshair; }

.mjt .mjt-vguide {
    position: absolute;
    top: 8px;
    bottom: 32px;
    width: 1px;
    background: var(--mjt-brown-300);
    pointer-events: none;
}

.mjt .mjt-vdot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mjt-green-700);
    border: 2.5px solid #fff;
    transform: translate(-50%, -50%);
    box-shadow: var(--mjt-shadow-xs);
    pointer-events: none;
}

.mjt .mjt-vtip {
    position: absolute;
    transform: translate(-50%, -100%);
    margin-top: -12px;
    background: var(--mjt-brown-900);
    color: var(--mjt-cream-100);
    border-radius: 9px;
    padding: 9px 12px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--mjt-shadow-md);
    z-index: 2;
}

.mjt .mjt-vtip.pod { transform: translate(-50%, 0); margin-top: 12px; }
.mjt .mjt-vtip b { font-family: var(--mjt-font-cisla); font-weight: 700; font-size: 15px; display: block; margin: 1px 0; }
.mjt .mjt-vtip .dl { color: var(--mjt-text-ondark-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.mjt .mjt-vtip .dd { color: var(--mjt-green-400); font-size: 11px; }
.mjt .mjt-vtip .dd.dn { color: #e8a08e; }

.mjt .mjt-vlab {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 14px;
    font-size: 11px;
    color: var(--mjt-brown-400);
    pointer-events: none;
}

.mjt .mjt-vlab span { white-space: nowrap; }
.mjt .mjt-vlab span:last-child { transform: translateX(-100%) !important; }

/* Skryté prvky interakce — JS jim jen přepíná .zobraz. */
.mjt .mjt-vguide, .mjt .mjt-vdot, .mjt .mjt-vtip { opacity: 0; transition: opacity var(--mjt-dur-fast) var(--mjt-ease-out); }
.mjt .mjt-vguide.zobraz, .mjt .mjt-vdot.zobraz, .mjt .mjt-vtip.zobraz { opacity: 1; }

/* Vzhled SVG křivky — barvy VÝHRADNĚ přes třídy (žádné inline hexy; tokeny + budoucí CSP). */
.mjt .mjt-vchart svg .mrizka { stroke: var(--mjt-cream-200); stroke-width: 1; }
.mjt .mjt-vchart svg .krivka { fill: none; stroke: var(--mjt-green-600); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.mjt .mjt-vchart svg .konec { fill: var(--mjt-green-700); }
.mjt .mjt-vchart svg .grad-a { stop-color: var(--mjt-green-500); stop-opacity: .26; }
.mjt .mjt-vchart svg .grad-b { stop-color: var(--mjt-green-500); stop-opacity: 0; }

/* Nakreslení křivky při načtení řídí JS (majetek-grafy.js) přes stroke-dashoffset —
   respektuje prefers-reduced-motion; bez JS je křivka prostě viditelná (žádný FOUC). */
@keyframes mjt-vyplout { from { opacity: 0; } to { opacity: 1; } }
.mjt .mjt-vchart svg .vypln { animation: mjt-vyplout 700ms 350ms var(--mjt-ease-out) both; }

/* ── Paleta tříd aktiv — RODINA BAREV Z NÁVRHU (srpnový mockup, 29. 8. 2026) ──
   Návrh barví grafy jedinou teplou rodinou: oliva/limetka/hnědá/písková
   (Palette v mockupu; likvidita přesně liqRows: #afca0b × #6b5442). Do té doby tu
   byla sytá vícebarevná paleta (rez, švestka, modř) z MajetekPaleta.cs — v klientské
   tváři působila cize vedle návrhu a byla to první věc, které si Pavel všiml.
   Přiřazení kategorii je STÁLÉ (barva sleduje entitu, ne pořadí v grafu); odstíny
   jdou podle velikosti tříd ukázkové rodiny, jak je řadí návrh.
   Back office (MajetekPaleta.cs) se tímhle NEMĚNÍ — má vlastní kontrastní hlídky. */

.mjt .mjt-kat-portfolio   { --kat: #7f930a; }
.mjt .mjt-kat-nemovitosti { --kat: #afca0b; }
.mjt .mjt-kat-podily      { --kat: #6b5442; }
.mjt .mjt-kat-jine        { --kat: #b3a291; }
.mjt .mjt-kat-alternativy { --kat: #d6ec5a; }
.mjt .mjt-kat-neutral     { --kat: #d8ccbc; }
.mjt .mjt-kat-likvidni    { --kat: #afca0b; }
.mjt .mjt-kat-nelikvidni  { --kat: #6b5442; }
.mjt .mjt-kat-mena-czk    { --kat: #77921E; }
.mjt .mjt-kat-mena-eur    { --kat: #3E6FA8; }
.mjt .mjt-kat-mena-usd    { --kat: #B8860B; }
.mjt .mjt-kat-mena-jina   { --kat: #A59C97; }

/* Držitelé (beneficiární rozpad) — barva podle POŘADÍ, protože osoby nejsou číselník
   a jejich počet se mění; validované odstíny z brand palety, ne generovaný duhový přechod. */
.mjt .mjt-kat-osoba-0 { --kat: #77921E; }
.mjt .mjt-kat-osoba-1 { --kat: #9E5020; }
.mjt .mjt-kat-osoba-2 { --kat: #3E6FA8; }
.mjt .mjt-kat-osoba-3 { --kat: #9E3B57; }
.mjt .mjt-kat-osoba-4 { --kat: #B8860B; }
.mjt .mjt-kat-osoba-5 { --kat: #2F7E7A; }

/* HLAVNÍ ČÍSLO PORTFOLIA (návrh: velká karta vlevo). Vlastní vzor vedle `.mjt-kpi hero`:
   ta stojí v mřížce čtyř dlaždic, tahle je půlka dvojice a číslo v ní smí být větší. */
.mjt .mjt-hodnota {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.mjt .mjt-hodnota .mjt-eyebrow { display: flex; align-items: center; gap: 8px; }

.mjt .mjt-hodnota-v {
    display: block;
    font-family: var(--mjt-font-cisla);
    font-size: clamp(30px, 3.1vw, 46px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--mjt-brown-700);
    white-space: nowrap;
}

/* V téhle kartě nemá trojice oddělovací linku — návrh ji tu nemá a karta je na ni krátká. */
.mjt .mjt-hodnota .mjt-kpi-trio { margin-top: 0; padding-top: 0; border-top: 0; }

/* ── ALFRÉDOVY ZÁVĚRY (tmavá karta vedle hlavního čísla, návrh `.ai`) ────────── */

/* DVOJICE „hodnota + závěry" má poměr 1,25 : 1 jako v návrhu. Vlastní vzor vedle
   `.mjt-dvojice`: ta je 1 : 1 pro dvě rovnocenné karty, tady je jedna hlavní. */
.mjt .mjt-hero-dvojice {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 16px;
    align-items: stretch;
}

@media (max-width: 1100px) {
    .mjt .mjt-hero-dvojice { grid-template-columns: minmax(0, 1fr); }
}

.mjt .mjt-zavery {
    background: var(--mjt-brown-900);
    color: var(--mjt-cream-100);
    border-radius: var(--mjt-radius-lg);
    padding: 19px 22px 17px;
    box-shadow: var(--mjt-shadow-md);
    display: flex;
    flex-direction: column;
    gap: 13px;
    min-width: 0;
}

.mjt .mjt-zavery-h { display: flex; align-items: center; gap: 12px; }

/* KOLEČKO S ALFRÉDEM je TOTÉŽ jako v pravém dolním rohu — nese třídu `alfred-roh-kruh`
   a odsud se mu mění jen PRŮMĚR a rámeček. Výřez (zvětšení a posun) tedy existuje na jednom
   místě, v `alfred-roh.css`; druhá sada čísel pro touž tvář by se při první úpravě značky
   rozešla, a přesně to se 28. 8. 2026 dvakrát stalo, když měl tenhle avatar výřez vlastní. */
.mjt .mjt-zavery-av.alfred-roh-kruh {
    --alfred-kolecko: 46px;
    flex: 0 0 auto;
    background: rgba(175, 202, 11, .15);
    /* V rohu má kolečko bílý prstenec a stín, aby se neztratilo nad obsahem stránky.
       Tady sedí v tmavé kartě, kde by prstenec působil jako nálepka. */
    box-shadow: none;
}

.mjt .mjt-zavery-kdo { min-width: 0; }

.mjt .mjt-zavery-nm {
    font-family: var(--mjt-font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--mjt-cream-100);
    line-height: 1;
    margin: 0;
}

.mjt .mjt-zavery-eb {
    display: block;
    font-size: 9.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--mjt-green-400);
    font-weight: 700;
    margin-top: 5px;
}

.mjt .mjt-zavery-s {
    font-size: 12.5px;
    color: var(--mjt-text-ondark-muted);
    line-height: 1.55;
    margin: 0;
    text-wrap: pretty;
}

.mjt .mjt-zavery-foot {
    margin: auto 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(244, 239, 228, .1);
    font-size: 11px;
    color: rgba(244, 239, 228, .48);
    line-height: 1.55;
    text-wrap: pretty;
}

/* META ŘÁDEK V HLAVIČCE DETAILU (návrh `.hsub`): jedna věta o tom, k čemu se čísla vážou.
   VLASTNÍ TŘÍDA, ne `.mjt-hsub` — ta je podřádek v buňce tabulky (11 px) a v hlavičce by
   větu srazila na drobné písmo. */
.mjt .mjt-hlava-meta {
    font-size: 13.5px;
    color: var(--mjt-brown-400);
    margin: 8px 0 0;
    /* Návrh řádek ořezává třemi tečkami; celý text zůstává v `title` prohlížeče přes
       samotný obsah, takže se nic neztrácí a hlavička nikdy nenaroste na dva řádky. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Hlavička detailu portfolia je BEZ IKONY (návrh) — texty vlevo, akce vpravo. */
.mjt .mjt-hlava.mjt-hlava-detail { align-items: flex-start; }
.mjt .mjt-hlava.mjt-hlava-detail .mjt-hlava-texty { min-width: 0; }

/* ZÁLOŽKY DETAILU PORTFOLIA — týž segment jako jinde, jen se smí zalomit: pět položek
   se na užší ploše na jeden řádek nevejde a vodorovný posuv by je schoval. */
.mjt .mjt-seg.mjt-zalozky {
    flex-wrap: wrap;
    row-gap: 3px;
    margin-bottom: 18px;
}

/* Druh pohybu v portfoliu — pilulka, jejíž barva říká SMĚR peněz (dovnitř × ven).
   Druh je číselník, takže se pilulka nekreslí podle textu, ale podle příznaku z domény. */
.mjt .mjt-pohyb {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: var(--mjt-radius-pill);
    white-space: nowrap;
}

.mjt .mjt-pohyb.je-pritok { background: var(--mjt-green-100); color: var(--mjt-green-700); }
.mjt .mjt-pohyb.je-odtok { background: #f3e6e1; color: #a43c25; }

/* Datum pohybu se nezalamuje — „30. 6." a „2026" na dvou řádcích se čte jako dva údaje. */
.mjt .mjt-tb td.mjt-datum { white-space: nowrap; }

/* Klikací řádek tabulky — kurzor a podbarvení říkají, že se s ním dá něco dělat.
   Samotný klik obsluhuje js/majetek-grafy.js; odkaz uvnitř řádku funguje i bez něj. */
.mjt .mjt-tb tr.mjt-radek-klik { cursor: pointer; }
.mjt .mjt-tb tr.mjt-radek-klik:hover td { background: var(--mjt-cream-50); }

/* ── NADPIS SEKCE A FILTRAČNÍ PRUH NAD KARTOU (návrh `.hd` + `.fbar`) ────────── */

/* Nadpis sekce je TÝŽ blok jako hlavička stránky (`.mjt-hlava`): zelený praporek nad
   nadpisem a vlasová linka pod podnadpisem se tedy dědí a nekopírují se sem. Zbývá jen to,
   čím se v návrhu liší — menší nadpis a menší mezera pod blokem. */
.mjt .mjt-sekce-hlava { margin: 0 0 14px; }

.mjt .mjt-sekce-h {
    font-family: var(--mjt-font-nadpis);
    font-weight: 700;   /* jako .mjt-h1 — návrh má u nadpisu sekce týž řez */
    font-size: 24px;
    letter-spacing: -.02em;
    color: var(--mjt-brown-700);
    margin: 0;
    line-height: 1.15;
}

.mjt .mjt-sekce-sub {
    font-size: 13.5px;
    color: var(--mjt-brown-400);
    margin: 8px 0 0;
    text-wrap: pretty;
}

/* Pruh filtrů: pilulky s obrysem a linka pod nimi — odděluje volbu od toho, co vybrala. */
.mjt .mjt-fbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 0 18px;
    border-bottom: 1px solid var(--mjt-hairline);
    margin-bottom: 20px;
}

.mjt .mjt-fchip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: var(--mjt-radius-pill);
    border: 1px solid var(--mjt-hairline);
    background: var(--mjt-white);
    font: 600 11.5px var(--mjt-font-nadpis);
    word-spacing: var(--mjt-ws-nadpis);
    color: var(--mjt-brown-400);
    text-decoration: none;
}

.mjt .mjt-fchip:hover { border-color: var(--mjt-green-300); }

.mjt .mjt-fchip.on {
    color: var(--mjt-brown-700);
    background: var(--mjt-cream-50);
    border-color: var(--mjt-brown-300);
}

/* ── TABULKA POZIC: značka třídy u instrumentu a pilulka třídy ──────────────── */

.mjt .mjt-instrument { display: flex; align-items: center; gap: 9px; }

/* Čtvereček 24 px s ikonou třídy; barvu nese inline styl (mění se po řádcích). */
.mjt .mjt-instr-znacka {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* Podřádek začíná pod NÁZVEM, ne pod ikonou (24 + 9 = 33 px) — doslova jako v návrhu. */
.mjt .mjt-hsub.mjt-instr-sub { margin-left: 33px; }

.mjt .mjt-trida-pilulka {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    padding: 3px 10px;
    border-radius: var(--mjt-radius-pill);
    background: var(--mjt-cream-100);
    border: 1px solid var(--mjt-hairline);
    color: var(--mjt-brown-500);
    white-space: nowrap;
}

.mjt .mjt-trida-pilulka .tecka {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* Rozbalený detail pozice — rovnice pod řádkem, kterého se týká. */
.mjt .mjt-tb tr.mjt-pozice-detail td {
    background: var(--mjt-cream-50);
    padding-top: 10px;
    padding-bottom: 12px;
}

.mjt .mjt-tb tr.mjt-pozice-detail .mjt-vyp-r { display: block; }

/* ── MIMO PLÁNOVANOU ALOKACI: pruh s pásmem, cílem a aktuální pozicí ─────────── */

.mjt .mjt-alok-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 0 0 10px;
    font-size: 11px;
    color: var(--mjt-brown-400);
}

.mjt .mjt-alok-legenda .pol { display: inline-flex; align-items: center; gap: 7px; }
.mjt .mjt-alok-legenda .vz-pasmo {
    width: 14px; height: 10px; border-radius: 2px; background: var(--mjt-green-200);
}
.mjt .mjt-alok-legenda .vz-cil {
    width: 0; height: 12px; border-left: 2px dashed var(--mjt-green-700);
}
.mjt .mjt-alok-legenda .vz-ted {
    width: 3px; height: 12px; border-radius: 2px; background: var(--mjt-brown-700);
}

/* Pruh je OBRÁZEK: čte se z něj poloha, ne hodnota — čísla stojí ve sloupcích vedle.
   Celý údaj nese BUBLINA NAD PRUHEM (`.mjt-alok-tip`), ne `title` prohlížeče: ten se ukáže
   až po vteřině čekání, nedá se stylovat a na dotyku se neukáže vůbec.

   BUBLINA JE ČISTĚ CSS (`:hover` + `:focus-within`), žádný stav na serveru — klientská tvář
   je statická (ADR-0067) a interaktivní ostrůvek by na ni přitáhl SignalR okruh.

   Rozměry z návrhu: pruh 26 px (`.track.lg`), značka „teď" 3 px, cíl přerušovaná čárka. */
.mjt .mjt-alok-obal {
    position: relative;
    width: 100%;
    min-width: 0;
}

.mjt .mjt-alok-pruh {
    position: relative;
    display: block;
    height: 26px;
    min-width: 150px;
    border-radius: var(--mjt-radius-sm);
    background: var(--mjt-cream-200);
    overflow: hidden;
}

.mjt .mjt-alok-pruh .pasmo {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--mjt-green-200);
}

.mjt .mjt-alok-pruh .cil {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 2px dashed var(--mjt-green-700);
}

.mjt .mjt-alok-pruh .ted {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 3px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: var(--mjt-brown-700);
}

/* Mimo pásmo se značka odliší SYTOSTÍ, ne barvou významu — přebytek nad pásmem není
   „špatný" ve smyslu ztráty, je to odchylka od plánu (týž důvod jako u sloupce Odchylka). */
.mjt .mjt-alok-pruh .ted.je-mimo { background: #a43c25; }

.mjt .mjt-alok-tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 9px);
    transform: translateX(-50%);
    background: var(--mjt-brown-900);
    color: var(--mjt-cream-100);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 11.5px;
    line-height: 1.55;
    white-space: nowrap;
    box-shadow: var(--mjt-shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--mjt-dur-fast) var(--mjt-ease-out);
    z-index: 6;
}

.mjt .mjt-alok-obal:hover .mjt-alok-tip,
.mjt .mjt-alok-obal:focus-within .mjt-alok-tip { opacity: 1; }

.mjt .mjt-alok-tip .t1 {
    display: block;
    font-family: var(--mjt-font-cisla);
    font-weight: 700;
    font-size: 13px;
    color: var(--mjt-cream-100);
}

.mjt .mjt-alok-tip .t2 { display: block; color: var(--mjt-text-ondark-muted); }

/* POSLEDNÍ ŘÁDEK ZELENĚ (návrh `.tl3`): je to závěr bubliny — to, kvůli čemu na pruh
   člověk najel. Zbylé dva řádky jsou vstupy, tenhle je výsledek. */
.mjt .mjt-alok-tip .t3 {
    display: block;
    color: var(--mjt-green-400);
    font-weight: 600;
}

/* Pruh musí jít zaostřit klávesnicí, jinak se k bublině nedostane nikdo bez myši.
   `--mjt-focus` je BOX-SHADOW, ne outline — prstenec se proto kreslí stínem. */
.mjt .mjt-alok-obal:focus-visible { outline: none; }
.mjt .mjt-alok-obal:focus-visible .mjt-alok-pruh { box-shadow: var(--mjt-focus); }

/* MÍSTO NAD TABULKOU PRO BUBLINU. Obal tabulky má `overflow-x: auto`, což prohlížeč
   dopočítá i na svislou osu — bublina prvního řádku by se proto uřízla o horní okraj.
   Řeší se to jako v návrhu: záporný margin nahoru a stejná výplň zpátky. Layout se tím
   neposune, jen vznikne prostor, do kterého se smí kreslit.

   Vodorovně totéž o šířku výplně karty (22 px), ať se široká bublina neuřízne po stranách. */
.mjt .mjt-tab-scroll.ma-bubliny {
    margin: -44px -22px 0;
    padding: 44px 22px 0;
}

@media (prefers-reduced-motion: reduce) {
    .mjt .mjt-alok-tip { transition: none; }
}

.mjt table.mjt-alok td { vertical-align: middle; }

/* Odchylka od cílové váhy — NEUTRÁLNÍ, i když má znaménko. Přebytek nad cílem není zisk
   a schodek není ztráta; obojí je odchylka od plánu, jen na jinou stranu. Výrazná se odliší
   sytostí, ne barvou významu. */
.mjt .mjt-drift { font-weight: 600; color: var(--mjt-brown-500); }
.mjt .mjt-drift.je-vyrazna { color: var(--mjt-brown-700); }

/* TROJICE UVNITŘ VELKÉ KPI KARTY (návrh: YTD · Od začátku · Nákladovost pod hlavním číslem).
   Není to další dlaždice — jsou to tři pohledy na TOTÉŽ číslo nad nimi, proto sdílejí kartu. */
.mjt .mjt-kpi-trio {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--mjt-hairline);
}

.mjt .mjt-kpi-trio .u { min-width: 0; }

.mjt .mjt-kpi-trio .k {
    display: block;
    font-size: 12px;
    color: var(--mjt-brown-400);
}

.mjt .mjt-kpi-trio .h {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 5px;
}

.mjt .mjt-kpi-trio .h b {
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mjt .mjt-kpi-trio .h i { font-style: normal; font-size: 12.5px; }

/* ŠESTICE MALÝCH DLAŽDIC nad grafem na detailu portfolia (návrh `.mv6`/`.mst`) — tři
   sloupce, na užší ploše dva. Vlastní vzor vedle `.mjt-kpi-rada`: ta je hlavička obrazovky
   (velká čísla, jedno hero), tohle je řádek drobných údajů pod ní. */
.mjt .mjt-mv6 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

@media (max-width: 1100px) {
    .mjt .mjt-mv6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .mjt .mjt-mv6 { grid-template-columns: minmax(0, 1fr); }
}

.mjt .mjt-mst {
    background: var(--mjt-white);
    border: 1px solid var(--mjt-hairline);
    border-radius: var(--mjt-radius-md);
    padding: 15px 16px;
    min-width: 0;
}

.mjt .mjt-mst .l { display: block; font-size: 12px; color: var(--mjt-brown-400); }

.mjt .mjt-mst .v {
    display: block;
    font-family: var(--mjt-font-text);
    font-weight: 700;   /* návrh .mst .v: 22/700 (pokyn 29. 8. — fonty 1:1, ruší volbu 600) */
    font-size: 22px;
    letter-spacing: -.01em;
    color: var(--mjt-brown-700);
    margin-top: 6px;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.mjt .mjt-mst .s {
    display: block;
    font-size: 12px;
    margin-top: 6px;
    color: var(--mjt-brown-400);
    text-wrap: pretty;
}

/* Rozpad podle POŘADÍ (sektor, region, měna) — tyhle osy nejsou číselník a jejich hodnoty
   se liší portfolio od portfolia, takže barva nejde navázat na význam. Odstíny jsou tytéž
   validované z brand palety jako u držitelů, jen se točí dokola. */
.mjt .mjt-kat-poradi-0 { --kat: #77921E; }
.mjt .mjt-kat-poradi-1 { --kat: #3E6FA8; }
.mjt .mjt-kat-poradi-2 { --kat: #9E5020; }
.mjt .mjt-kat-poradi-3 { --kat: #B8860B; }
.mjt .mjt-kat-poradi-4 { --kat: #9E3B57; }
.mjt .mjt-kat-poradi-5 { --kat: #2F7E7A; }

/* Blíží se konec fixace — krátký seznam, ne tabulka: je to výzva k jednání, ne data. */
.mjt .mjt-refi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.mjt .mjt-refi li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--mjt-hairline);
}

.mjt .mjt-refi li:last-child { border-bottom: 0; }
.mjt .mjt-refi-nazev { flex: 1; min-width: 0; font-weight: 600; color: var(--mjt-brown-700); font-size: 13.5px; }
.mjt .mjt-refi-datum { color: var(--mjt-warning); font-weight: 600; font-size: 12.5px; }
.mjt .mjt-refi-jistina { color: var(--mjt-brown-600); font-weight: 600; }

/* Druhy alternativ — barvy odlišují VĚCI, takže pevné odstíny z brand palety (ne škála). */
.mjt .mjt-kat-podtrida-umeni    { --kat: #9E3B57; }
.mjt .mjt-kat-podtrida-kovy     { --kat: #B8860B; }
.mjt .mjt-kat-podtrida-hodinky  { --kat: #3E6FA8; }
.mjt .mjt-kat-podtrida-vina     { --kat: #7d2f3f; }
.mjt .mjt-kat-podtrida-vozidla  { --kat: #2F7E7A; }
.mjt .mjt-kat-podtrida-ostatni  { --kat: #8a7563; }

/* Prodejnost je ŠKÁLA (jak rychle se to zpeněží), ne sada rovnocenných kategorií — proto
   přechod od brand zelené k hnědé. Čtenář pozná pořadí i bez legendy. */
.mjt .mjt-kat-prodej-tyden      { --kat: #77921E; }
.mjt .mjt-kat-prodej-ctvrtleti  { --kat: #afca0b; }
.mjt .mjt-kat-prodej-rok        { --kat: #c8871f; }
.mjt .mjt-kat-prodej-dele       { --kat: #6b5442; }

/* Regiony (geografické rozložení) — pevné pořadí kbelíků (Geografie.cs), takže barva smí
   být přiřazená napevno; klient si ji tak spojí s regionem napříč rodinami i měsíci.
   Domovský region drží brand zelenou, vzdálenější regiony jdou do hnědé — čtená vzdálenost
   od domova, ne duha. */
.mjt .mjt-kat-geo-cesko     { --kat: #77921E; }
.mjt .mjt-kat-geo-eurozona  { --kat: #afca0b; }
.mjt .mjt-kat-geo-amerika   { --kat: #594334; }
.mjt .mjt-kat-geo-asie      { --kat: #9E5020; }
.mjt .mjt-kat-geo-ostatni   { --kat: #b3a291; }

/* Poznámka pod geografickým donutem (položky bez země) — tichá, ale ne neviditelná. */
.mjt .mjt-geo-pozn {
    margin: 10px 0 0;
    font-size: .74rem;
    line-height: 1.45;
    color: var(--mjt-brown-400);
}

/* Tečka svěžesti v legendě tabulky nemá odsazení (stojí před textem, ne za číslem). */
.mjt .mjt-frleg .mjt-frd { margin-left: 0; }

.mjt .mjt-donut .vysec { stroke: var(--kat, var(--mjt-brown-300)); }
.mjt .mjt-oleg .sw, .mjt .mjt-pruhy .sw, .mjt .mjt-legenda-radky .sw { background: var(--kat, var(--mjt-brown-300)); }
.mjt .mjt-barmini i { background: var(--kat, var(--mjt-green-500)); }

/* ── Donut (hover řeší JS přes třídy; barvy nesou CSS třídy kategorií) ───── */

.mjt .mjt-donut { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* KOLÁČ A LEGENDA VEDLE SEBE (návrh: Likvidní vs. nelikvidní a Geografické rozložení).
   Rozměry z návrhu: mezera 22, koláč `flex: 0 1 132px`, legenda `flex: 1 1 140px`.
   `flex-wrap` je tam taky — na úzké kartě legenda spadne pod koláč a nezmáčkne ho. */
.mjt .mjt-donut.je-vedle {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 22px;
    flex-wrap: wrap;
}

.mjt .mjt-donut.je-vedle > svg { flex: 0 1 132px; min-width: 0; }

/* POZOR NA JMÉNO: `.mjt-legenda` (bez přípony) UŽ EXISTUJE — je to vodorovná legenda se
   vzorky barev níž v tomhle listu. Kdyby se tahle jmenovala stejně, přebilo by ji to pozdější
   pravidlo (stejná specificita, vyhrává poslední) a řádky by se srazily doprostřed: procento
   by nedrželo pravý okraj a legenda by nevyplnila kartu. Stalo se to 25. 8. 2026. */
.mjt .mjt-legenda-radky {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 140px;
    min-width: 0;
}

.mjt .mjt-legenda-radky .lr {
    display: grid;
    grid-template-columns: 11px 1fr auto;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
}

.mjt .mjt-legenda-radky .sw { width: 11px; height: 11px; border-radius: 3px; }
.mjt .mjt-legenda-radky .ll { color: var(--mjt-brown-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mjt .mjt-legenda-radky .lv { color: var(--mjt-brown-700); font-weight: 600; text-align: right; white-space: nowrap; }
.mjt .mjt-donut svg { display: block; }

/* Pozor: SVG má viewBox 0 0 100 100 — fonty i tahy jsou v USER UNITS a škálují se
   s velikostí donutu (236 px → ×2,36). Střed (díra) má průměr ~52 units. */
.mjt .mjt-donut .vysec {
    fill: none;
    stroke-width: 19;
    stroke-linecap: butt;
    transition: stroke-width var(--mjt-dur-base) var(--mjt-ease-out), opacity var(--mjt-dur-base) var(--mjt-ease-out);
    cursor: pointer;
}

.mjt .mjt-donut .vysec.ted { stroke-width: 25; }
.mjt .mjt-donut .vysec.utlum { opacity: .4; }
.mjt .mjt-donut .vysec.staticka { cursor: default; }

.mjt .mjt-donut-stred { text-anchor: middle; }
.mjt .mjt-donut-stred .sv { font: 700 8px var(--mjt-font-cisla); fill: var(--mjt-brown-700); letter-spacing: -.02em; }
.mjt .mjt-donut-stred .sl { font: 500 4.6px var(--mjt-font-text); fill: var(--mjt-brown-400); }

/* Legenda-chipy pod donutem (klik = drill, utlumení ostatních na hover). */
.mjt .mjt-oleg { display: flex; flex-wrap: wrap; gap: 7px 8px; justify-content: center; }

.mjt .mjt-oleg .lc {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: var(--mjt-radius-pill);
    border: 1px solid var(--mjt-hairline);
    background: var(--mjt-white);
    font-size: 12.5px;
    color: var(--mjt-brown-600);
    font-family: var(--mjt-font-text);
    text-decoration: none;
    transition: opacity var(--mjt-dur-base) var(--mjt-ease-out), border-color var(--mjt-dur-fast) var(--mjt-ease-out);
}

.mjt .mjt-oleg a.lc:hover { background: var(--mjt-cream-50); border-color: var(--mjt-green-300); }
.mjt .mjt-oleg .lc.utlum { opacity: .4; }
.mjt .mjt-oleg .sw { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.mjt .mjt-oleg .lc b { color: var(--mjt-brown-700); }
.mjt .mjt-oleg .lc svg { width: 13px; height: 13px; color: var(--mjt-brown-300); }

/* Vodorovné pruhy (alternativa koláče). */
.mjt .mjt-pruhy { display: flex; flex-direction: column; gap: 10px; }
.mjt .mjt-pruhy .r { display: flex; flex-direction: column; gap: 5px; }
.mjt .mjt-pruhy .rt { display: flex; justify-content: space-between; font-size: 12.5px; gap: 10px; }
.mjt .mjt-pruhy .rt b { color: var(--mjt-brown-700); font-weight: 600; }
.mjt .mjt-pruhy .rt span { color: var(--mjt-brown-400); font-variant-numeric: tabular-nums; }
.mjt .mjt-barmini { height: 6px; border-radius: 999px; background: var(--mjt-cream-200); overflow: hidden; width: 100%; }
.mjt .mjt-barmini i { display: block; height: 100%; border-radius: 999px; }

@keyframes mjt-roztahni { from { width: 0; } }
.mjt .mjt-barmini i { animation: mjt-roztahni 700ms var(--mjt-ease-out) both; }

/* ── IPS — alokace vs. strategie (cílové pásmo + rysky) ──────────────────── */

.mjt .mjt-ips { display: flex; flex-direction: column; }

.mjt .mjt-ir {
    display: grid;
    grid-template-columns: minmax(64px, 110px) minmax(0, 1fr) minmax(56px, 84px);
    gap: 10px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--mjt-cream-200);
}

.mjt .mjt-ir:last-child { border-bottom: 0; }
.mjt .mjt-ir .in { font-size: 12.5px; color: var(--mjt-brown-700); font-weight: 600; }
.mjt .mjt-ir .icil {
    display: block;
    font-size: 10.5px;
    font-weight: 400;
    color: var(--mjt-brown-400);
    margin-top: 2px;
}

.mjt .mjt-track {
    position: relative;
    height: 22px;
    border-radius: var(--mjt-radius-sm);
    background: var(--mjt-cream-200);
    overflow: hidden;
}

.mjt .mjt-track .pasmo {
    position: absolute;
    top: 0; bottom: 0;
    min-width: 3px;                      /* úzké pásmo (1–3 %) musí zůstat vidět */
    background: var(--mjt-green-200);
    border-radius: 2px;
}

/* Kde rodina stojí dnes. Mimo pásmo se ryska obarví — ať je odchylka vidět i bez čtení textu. */
.mjt .mjt-track .ted {
    position: absolute;
    top: -3px; bottom: -3px;
    width: 3px;
    margin-left: -1px;
    background: var(--mjt-brown-700);
    border-radius: 2px;
}

.mjt .mjt-track .ted.mimo { background: var(--sv-neaktualni); }

.mjt .mjt-idrift { text-align: right; line-height: 1.2; }
.mjt .mjt-idrift b { font-size: 14px; font-weight: 700; font-family: var(--mjt-font-cisla); }
.mjt .mjt-idrift .ist { display: block; font-size: 10.5px; color: var(--mjt-brown-400); margin-top: 2px; }

/* Osa pod řádky — bez ní se procenta na pruhu odhadovala od oka. */
.mjt .mjt-ir-osa { padding: 2px 0 0; border-bottom: 0; }
.mjt .mjt-osa { position: relative; display: block; height: 14px; }

.mjt .mjt-osa span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--mjt-brown-400);
    white-space: nowrap;
}

/* Legenda se vzorky barev — dřív to byly znaky „╌" a „▍" vsazené do věty, což vypadalo jako
   nedodělek (2. 8. 2026). */
.mjt .mjt-legenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 0 0 10px;
    font-size: 11.5px;
    color: var(--mjt-brown-400);
}

.mjt .mjt-lg { display: inline-flex; align-items: center; gap: 6px; }
.mjt .mjt-lg i { display: inline-block; border-radius: 2px; }
.mjt .mjt-lg .sw-pasmo { width: 18px; height: 10px; background: var(--mjt-green-200); }
.mjt .mjt-lg .sw-ted { width: 3px; height: 14px; background: var(--mjt-brown-700); }
.mjt .mjt-legenda .mjt-lg-pozn { margin-left: auto; font-style: italic; }

/* ── Nemovitost — provozní údaje na kartě položky ────────────────────────── */

.mjt .mjt-nemo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 18px;
}

.mjt .mjt-nemo-u .k { display: block; font-size: 11.5px; color: var(--mjt-brown-400); }

.mjt .mjt-nemo-u .v {
    display: block;
    margin-top: 3px;
    font-size: 15px;
    font-weight: 600;
    color: var(--mjt-brown-700);
}

.mjt .mjt-nemo-u .p { display: block; margin-top: 2px; font-size: 11.5px; color: var(--mjt-brown-400); }
.mjt .mjt-nemo-pozn { margin: 14px 0 0; font-size: 12px; color: var(--mjt-brown-400); }

/* ── Klíč–hodnota ────────────────────────────────────────────────────────── */

/* Rozbalení delšího výpisu (historie ocenění). Nativní `details` — klientská tvář je
   statické SSR a nedrží okruh (ADR-0067). */
.mjt .mjt-vic { margin-top: 10px; }
.mjt .mjt-vic > summary {
    cursor: pointer; font-size: 12.5px; color: var(--mjt-brown-600);
    padding: 6px 0; list-style: none;
}
.mjt .mjt-vic > summary::-webkit-details-marker { display: none; }
.mjt .mjt-vic > summary::before { content: "▸ "; color: var(--mjt-brown-300); }
.mjt .mjt-vic[open] > summary::before { content: "▾ "; }
.mjt .mjt-vic > summary:hover { color: var(--mjt-brown-700); }

.mjt .mjt-kv { display: grid; grid-template-columns: 1fr auto; gap: 9px 14px; font-size: 13px; }
.mjt .mjt-kv .k { color: var(--mjt-brown-400); }
.mjt .mjt-kv .v { color: var(--mjt-brown-700); font-weight: 600; text-align: right; }

/* ── Ukázková data — poctivé označení ────────────────────────────────────── */

.mjt .mjt-ukazka {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mjt-warning);
    border: 1px solid rgba(200, 135, 31, .45);
    border-radius: var(--mjt-radius-xs);
    padding: 2px 7px;
    white-space: nowrap;
}

/* ── Přístupnost a klid ──────────────────────────────────────────────────── */

/* Programový fokus po navigaci (FocusOnNavigate na h1, tabindex="-1") prsten NEdostává —
   jinak by každá stránka startovala se zeleným rámem kolem titulku. */
.mjt :is(a, button, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: none;
    box-shadow: var(--mjt-focus);
    border-radius: var(--mjt-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    .mjt .mjt-vchart svg .krivka,
    .mjt .mjt-vchart svg .vypln,
    .mjt .mjt-barmini i { animation: none; }

    .mjt * { transition-duration: 0s !important; }
}

/* ── Tisk: čistý papír, žádné interaktivní zbytky ────────────────────────── */

@media print {
    .mjt .mjt-hlava-akce, .mjt .mjt-filtry, .mjt .mjt-vseg { display: none; }
    .mjt .mjt-karta { box-shadow: none; }
}

/* ── Soupis majetku (ADR-0065 / SPEC §7.5) ───────────────────────────────
   Pracovní seznam v klientské tváři. Vše je ODKAZ nebo <form method="get">:
   stránka je statické SSR a nesmí mít Blazor okruh (klientů jsou stovky). */

.mjt .mjt-hledani {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mjt .mjt-hledani input[type="search"] {
    height: 34px;
    min-width: 240px;
    padding: 0 12px;
    border: 1px solid var(--mjt-hairline);
    border-radius: var(--mjt-radius-md);
    background: var(--mjt-white);
    color: var(--mjt-brown-700);
    font: inherit;
    font-size: 13px;
}

.mjt .mjt-hledani input[type="search"]:focus-visible {
    outline: 2px solid var(--mjt-brown-300);
    outline-offset: 1px;
}

/* Řadicí hlavička v klientské tabulce. Sdílená komponenta vykreslí <a class="tabulka-radit">,
   ale třídy z back-office `tabulka.css` sem nesahají — klientský seznam má vlastní jazyk. */
.mjt table.mjt-tb th .tabulka-radit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.mjt table.mjt-tb th .tabulka-radit:hover { color: var(--mjt-brown-700); }
.mjt table.mjt-tb th .tabulka-sipka { opacity: 0; font-size: 9px; }
.mjt table.mjt-tb th.je-razeno .tabulka-radit { color: var(--mjt-brown-700); }
.mjt table.mjt-tb th.je-razeno .tabulka-sipka { opacity: 1; }
.mjt table.mjt-tb th .tabulka-radit:hover .tabulka-sipka { opacity: 0.5; }

/* Textové sloupce doleva. Klientská tabulka srovnává vše kromě prvního sloupce doprava
   (jsou to zpravidla čísla) — u třídy a dlouhého popisu to ale rozhodí levý okraj a text
   se čte po schodech. */
.mjt table.mjt-tb th.doleva,
.mjt table.mjt-tb td.doleva { text-align: left; }

/* Součtový řádek: platí přes CELÝ výběr, ne přes stranu — proto ho pruh pojmenovává slovy. */
.mjt table.mjt-tb tfoot td {
    border-top: 1px solid var(--mjt-brown-300);
    font-weight: 700;
    color: var(--mjt-brown-700);
}

.mjt .mjt-strankovani {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 14px;
}

.mjt .mjt-strankovani-rozsah,
.mjt .mjt-strankovani-stav {
    font-size: 12.5px;
    color: var(--mjt-brown-400);
}

.mjt .mjt-strankovani-rozsah { margin-right: auto; }

/* Krok na kraji NEZMIZÍ, jen zešedne: mizející odkaz posune zbytek lišty a další
   klepnutí trefí něco jiného, než na co člověk mířil. */
.mjt .mjt-akce-btn.je-vypnuty {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* Krátká odpověď akce (dnes: proč se stránkovaná tabulka neexportuje z obrazovky).
   Stojí u tlačítka, kterého se týká — modální okno prohlížeče (`alert`) tu bylo do
   8. 8. 2026 a je to zakázaný tvar: přehluší práci kvůli poznámce a nedá se stylovat.
   ŽÁDNÝ barevný pruh vlevo (zakázaný vzor) — odlišuje ji velikost a barva textu. */
.mjt .mjt-vzkaz {
    flex-basis: 100%;
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--mjt-brown-500);
    max-width: 46em;
}

/* ── Nejvýznamnější položky po třídách (klientský přehled) ───────────────────
   Přehled neukazuje celý majetek, jen pár největších věcí z každé třídy a proklik
   na plný soupis (ADR-0065 §8). Skupina proto potřebuje vlastní nadpis s počtem
   a mezisoučtem — bez nich by výběr vypadal jako úplný seznam.
   ŽÁDNÝ barevný pruh vlevo (zakázaný vzor): oddělení dělá mezera a linka nahoře. */

.mjt .mjt-skupina + .mjt-skupina {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--mjt-hairline);
}

.mjt .mjt-skupina-h {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--mjt-brown-700);
}

.mjt .mjt-skupina-pocet {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--mjt-brown-400);
}

.mjt .mjt-skupina-soucty {
    margin-left: auto;
    display: flex;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mjt-brown-700);
}

.mjt .mjt-skupina-vic {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--mjt-brown-400);
}

/* ── Mobil ───────────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
    .mjt .mjt-kpi-rada, .mjt .mjt-kpi-rada.tri { grid-template-columns: 1fr 1fr; }
    .mjt .mjt-kpi-rada.pet, .mjt .mjt-kpi-rada.rovna { grid-template-columns: 1fr 1fr; }
    /* velikost hlavního čísla řídí clamp() výš — jedno místo, ne dvě */
    .mjt .mjt-mrizka.pul { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .mjt .mjt-kpi-rada, .mjt .mjt-kpi-rada.tri, .mjt .mjt-kpi-rada.rovna,
    .mjt .mjt-kpi-rada.pet { grid-template-columns: 1fr; }
    .mjt .mjt-hlava { flex-direction: column; }
    .mjt .mjt-hlava-akce { padding-top: 0; }
    .mjt .mjt-h1 { font-size: 26px; }
    .mjt .mjt-vchart { height: 220px; }

    /* Soupis: hledání přes celou šířku a stránkování pod sebe — na 390 px se lišta
       jinak rozpadne a tlačítka se přeloží doprostřed věty (ADR-0033). */
    .mjt .mjt-hledani { width: 100%; }
    .mjt .mjt-hledani input[type="search"] { flex: 1; min-width: 0; }
    .mjt .mjt-strankovani { justify-content: center; }
    .mjt .mjt-strankovani-rozsah { margin-right: 0; width: 100%; text-align: center; }
}

/* ── Poctivé prázdno (komponenta ZatimNemame) ─────────────────────────────
   Karta v toku stránky, ne výkřik uprostřed prázdné plochy: sekce se plní, ne rozbila.
   Vzhled je záměrně TICHÝ — nemá soupeřit s obsahem, který kolem časem přibude. */

.mjt .mjt-nemame { max-width: var(--mjt-container-md); }
.mjt .mjt-nemame-co { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--mjt-brown-500); }

.mjt .mjt-nemame-l {
    margin: 16px 0 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--mjt-tracking-label);
    text-transform: uppercase;
    color: var(--mjt-brown-400);
}

.mjt .mjt-nemame-seznam {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--mjt-brown-500);
}

.mjt .mjt-nemame-seznam li::marker { color: var(--mjt-green-600); }

.mjt .mjt-nemame-ted {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--mjt-hairline);
    font-size: 13px;
    line-height: 1.6;
    color: var(--mjt-brown-500);
}

.mjt .mjt-nemame a { color: var(--mjt-green-700); font-weight: 600; text-decoration: none; }
.mjt .mjt-nemame a:hover { text-decoration: underline; }

/* Výhrada pod Alfrédem — převzatá doslova z mockupu. Tichá, ale ne schovaná. */
.mjt .mjt-alfred-vyhrada {
    max-width: var(--mjt-container-md);
    margin: 14px 0 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--mjt-brown-400);
}

/* ── Rodinný trezor ────────────────────────────────────────────────────────
   Dvanáct desek se štítkem (mockup `.fold` + `::before`). Štítek je pseudo-prvek,
   ne obrázek: musí se přebarvit spolu s kartou při najetí, jinak zůstane bílý
   jazýček na krémové kartě a vypadá jako chyba vykreslení. */

.mjt .trz-uvod {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mjt-space-8);
    flex-wrap: wrap;
    padding: 18px 22px;
    background: var(--mjt-green-100);
    border-color: var(--mjt-green-200);
}

.mjt .trz-uvod-t { max-width: 720px; }
.mjt .trz-uvod-t strong { font-size: var(--mjt-text-sm); color: var(--mjt-brown-700); }

.mjt .trz-uvod-t p {
    margin: 6px 0 0;
    font-size: var(--mjt-text-xs);
    line-height: 1.6;
    color: var(--mjt-brown-600);
}

.mjt .trz-uvod-c { display: flex; gap: var(--mjt-space-8); flex-wrap: wrap; }
.mjt .trz-uvod-c div { text-align: right; }

.mjt .trz-uvod-c b {
    display: block;
    font-size: var(--mjt-text-lg);
    font-weight: 700;
    color: var(--mjt-brown-700);
    white-space: nowrap;
}

.mjt .trz-uvod-c span {
    display: block;
    margin-top: 3px;
    font-size: var(--mjt-text-3xs);
    color: var(--mjt-brown-500);
}

.mjt .trz-mriz {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
    gap: 18px var(--mjt-space-4);
    margin-top: var(--mjt-space-6);
}

.mjt .trz-fold {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 196px;
    margin-top: 15px;
    padding: 17px 18px;
    background: #fff;
    border: 1px solid var(--mjt-hairline);
    border-radius: 0 var(--mjt-radius-lg) var(--mjt-radius-lg) var(--mjt-radius-lg);
    box-shadow: var(--mjt-shadow-xs);
    text-decoration: none;
}

.mjt .trz-fold::before {
    content: "";
    position: absolute;
    left: -1px;
    top: -15px;
    width: 46%;
    height: 16px;
    background: #fff;
    border: 1px solid var(--mjt-hairline);
    border-bottom: 0;
    border-radius: var(--mjt-radius-sm) var(--mjt-radius-sm) 0 0;
}

.mjt .trz-fold:hover,
.mjt .trz-fold:hover::before { border-color: var(--mjt-green-300); background: var(--mjt-cream-50); }

.mjt .trz-fi { color: var(--mjt-green-700); margin-bottom: 3px; }
.mjt .trz-fi svg { width: 23px; height: 23px; }

.mjt .trz-fn {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--mjt-brown-700);
}

.mjt .trz-fd {
    flex: 1;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--mjt-brown-400);
}

.mjt .trz-ff {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 11px;
    border-top: 1px solid var(--mjt-cream-200);
}

.mjt .trz-fc { font-size: 12.5px; font-weight: 700; color: var(--mjt-brown-700); }
.mjt .trz-fc.je-prazdna { font-weight: 500; color: var(--mjt-brown-400); }
.mjt .trz-fm { font-size: 11.5px; color: var(--mjt-brown-400); }

.mjt .trz-pozn { margin: var(--mjt-space-5) 0 0; }
.mjt .trz-pozn a { margin-left: 6px; }

.mjt .trz-proc {
    margin: 0 0 var(--mjt-space-5);
    max-width: var(--mjt-container-md);
    font-size: var(--mjt-text-xs);
    line-height: 1.6;
    color: var(--mjt-brown-500);
}

/* Doporučené doklady. V mockupu jsou to tlačítka „nahrát"; klient zápisovou cestu do spisu
   nemá (ADR-0069 — zapisuje poradce), takže je to VÝČET, ne nabídka akce. Čárkovaný rámeček
   z mockupu zůstává: je to podoba „prázdného místa", a to platí dál. */
.mjt .trz-sugg {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
    gap: var(--mjt-space-3);
    margin-top: var(--mjt-space-3);
}

.mjt .trz-sug {
    padding: 14px;
    text-align: center;
    font-size: var(--mjt-text-xs);
    font-weight: 600;
    line-height: 1.35;
    color: var(--mjt-green-700);
    border: 1px dashed var(--mjt-brown-300);
    border-radius: var(--mjt-radius-md);
}

/* ── Termíny a kalendář ────────────────────────────────────────────────────
   Mřížka měsíce (`.cgrid`/`.cday`/`.cev`) a panel vybraného dne (`.dayp`) z mockupu.
   Buňka dne je ODKAZ, ne tlačítko: výběr dne je stav adresy, ne stav komponenty —
   jinak by kalendář znamenal Blazor okruh za každého prohlížejícího klienta (ADR-0067). */

.mjt .mjt-kpi.je-alarm .mjt-kpi-v { color: var(--mjt-danger); }

.mjt .trm-listva {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mjt-space-4);
    flex-wrap: wrap;
}

.mjt .trm-zrus { margin-left: 10px; }

.mjt .trm-chipy {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mjt-space-2);
    margin-top: var(--mjt-space-4);
}

.mjt .trm-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border: 1px solid var(--mjt-hairline);
    border-radius: var(--mjt-radius-pill);
    background: var(--mjt-white);
    font-size: 12px;
    font-weight: 600;
    color: var(--mjt-brown-600);
    text-decoration: none;
}

.mjt .trm-chip:hover { border-color: var(--mjt-green-300); background: var(--mjt-cream-50); }
.mjt .trm-chip.je-vyb { border-color: var(--mjt-green-500); background: var(--mjt-green-100); }
.mjt .trm-chip b { font-weight: 700; color: var(--mjt-brown-400); }
.mjt .trm-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--mjt-brown-300); }

.mjt .kat-uvery i { background: var(--mjt-warning); }
.mjt .kat-rodina i { background: var(--mjt-green-500); }
.mjt .kat-jine i { background: var(--mjt-brown-300); }

/* Kalendář: mřížka + panel dne vedle sebe. */
.mjt .trm-kal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--mjt-space-5);
    margin-top: var(--mjt-space-4);
}

.mjt .trm-nav { display: flex; align-items: center; gap: var(--mjt-space-2); }

.mjt .trm-sip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--mjt-hairline);
    border-radius: var(--mjt-radius-sm);
    background: var(--mjt-white);
    color: var(--mjt-brown-600);
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
}

.mjt .trm-sip:hover { border-color: var(--mjt-green-300); background: var(--mjt-cream-50); }

.mjt .trm-mn {
    font-family: var(--mjt-font-display);
    font-size: var(--mjt-text-lg);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--mjt-brown-700);
    min-width: 168px;
}

.mjt .trm-mrizka { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }

.mjt .trm-dn {
    padding: 0 0 4px 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: var(--mjt-tracking-label);
    color: var(--mjt-brown-400);
}

.mjt .trm-den {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 92px;
    padding: 6px;
    border: 1px solid var(--mjt-hairline);
    border-radius: var(--mjt-radius-md);
    background: var(--mjt-white);
    overflow: hidden;
    text-decoration: none;
}

.mjt a.trm-den:hover { border-color: var(--mjt-green-300); background: var(--mjt-cream-50); }
.mjt .trm-den.je-jiny { background: transparent; border-color: transparent; }
.mjt .trm-den.je-jiny .trm-c { color: var(--mjt-brown-300); opacity: .5; }
.mjt .trm-den.je-vyb { border-color: var(--mjt-green-500); box-shadow: 0 0 0 2px rgba(175, 202, 11, .22); }

.mjt .trm-c { font-size: 11px; font-weight: 600; color: var(--mjt-brown-500); }

.mjt .trm-den.je-dnes .trm-c b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--mjt-brown-700);
    color: var(--mjt-cream-100);
    font-size: 11px;
}

.mjt .trm-ev {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 5px;
    border-radius: var(--mjt-radius-xs);
    background: var(--mjt-cream-200);
    font-size: 10.5px;
    line-height: 1.25;
    color: var(--mjt-brown-600);
    overflow: hidden;
}

.mjt .trm-ev i { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; }
.mjt .trm-ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mjt .trm-vic { font-size: 10px; color: var(--mjt-brown-400); padding-left: 5px; }

.mjt .trm-panel {
    align-self: start;
    padding: 16px 17px;
    border: 1px solid var(--mjt-hairline);
    border-radius: var(--mjt-radius-md);
    background: var(--mjt-cream-50);
}

.mjt .trm-ph {
    margin: 0 0 10px;
    font-family: var(--mjt-font-display);
    font-size: var(--mjt-text-md);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--mjt-brown-700);
}

.mjt .trm-pl { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mjt-space-3); }
.mjt .trm-pl li { display: grid; gap: 2px; }
.mjt .trm-pc { font-size: 11.5px; font-weight: 600; color: var(--mjt-brown-500); }

/* Seznam termínů — mockupový `.evrow`. */
.mjt .trm-seznam { list-style: none; margin: 0; padding: 0; }

.mjt .trm-radek {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 190px 130px 108px;
    gap: 14px;
    align-items: center;
    padding: 12px 8px;
    border-bottom: 1px solid var(--mjt-cream-200);
}

.mjt .trm-radek:last-child { border-bottom: 0; }
.mjt .trm-radek:hover { background: var(--mjt-cream-50); }
.mjt .trm-r-d b { display: block; font-size: var(--mjt-text-md); font-weight: 700; color: var(--mjt-brown-700); }
.mjt .trm-r-d i { font-style: normal; font-size: 10.5px; letter-spacing: var(--mjt-tracking-wide); color: var(--mjt-brown-400); }
.mjt .trm-r-t { display: grid; gap: 1px; min-width: 0; }
.mjt .trm-r-k { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: var(--mjt-brown-500); }
.mjt .trm-r-k i { width: 7px; height: 7px; border-radius: 50%; background: var(--mjt-brown-300); }
.mjt .trm-r-c { text-align: right; font-size: var(--mjt-text-xs); font-weight: 600; color: var(--mjt-brown-600); }
.mjt .trm-r-p { text-align: right; font-size: 11.5px; font-weight: 600; color: var(--mjt-brown-500); }
.mjt .trm-r-p.je-po { color: var(--mjt-danger); }

@media (max-width: 1180px) {
    .mjt .trm-kal { grid-template-columns: minmax(0, 1fr); }
    .mjt .trm-radek { grid-template-columns: 72px minmax(0, 1fr) 120px; }
    .mjt .trm-r-c, .mjt .trm-r-k { display: none; }
}

/* ── Vlastnická struktura ──────────────────────────────────────────────────
   Pásma se štítkem a uzly (mockupové `.etree` / `.eband` / `.enode`). Uzel je odkaz na
   kartu subjektu; spojnice je jednoduchá svislice, ne vykreslený graf — hrany kreslíme až
   tehdy, až bude co spojovat (dnes je pásmo jedno až dvě). */

.mjt .str-schema { max-width: var(--mjt-container-lg); margin: var(--mjt-space-2) auto 0; }

.mjt .str-pasmo {
    margin: var(--mjt-space-5) 0 var(--mjt-space-3);
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: var(--mjt-tracking-label);
    color: var(--mjt-brown-400);
}

.mjt .str-schema > .str-pasmo:first-child { margin-top: 0; }

.mjt .str-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
    gap: 14px;
}

.mjt .str-uzel {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 13px 15px;
    border: 1px solid var(--mjt-hairline);
    border-radius: var(--mjt-radius-md);
    background: var(--mjt-white);
    box-shadow: var(--mjt-shadow-xs);
    text-decoration: none;
}

.mjt a.str-uzel:hover { border-color: var(--mjt-green-300); background: var(--mjt-cream-50); }
.mjt .str-uzel.je-spolecenstvi { border-style: dashed; box-shadow: none; background: var(--mjt-cream-50); }

.mjt .str-typ {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mjt-brown-400);
}

.mjt .str-nazev { font-size: var(--mjt-text-sm); font-weight: 700; letter-spacing: -.01em; color: var(--mjt-brown-700); }
.mjt .str-podnadpis { font-size: 11px; line-height: 1.35; color: var(--mjt-brown-400); }

.mjt .str-radek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mjt-space-2);
    margin-top: 3px;
    flex-wrap: wrap;
}

.mjt .str-pill {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: var(--mjt-radius-pill);
    background: var(--mjt-green-100);
    color: var(--mjt-green-700);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.mjt .str-pill.je-nic { background: var(--mjt-cream-200); color: var(--mjt-brown-500); }

.mjt .str-cislo {
    font-family: var(--mjt-font-cisla);
    font-size: var(--mjt-text-xs);
    font-weight: 700;
    color: var(--mjt-brown-700);
    white-space: nowrap;
}

.mjt .str-spoj { height: 28px; }
.mjt .str-spoj svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mjt .str-spoj path { fill: none; stroke: var(--mjt-brown-300); stroke-width: 1.5; }
.mjt .str-spoj path.je-nedilne { stroke: var(--mjt-green-600); stroke-dasharray: 4 4; opacity: .75; }

.mjt .str-leg { display: inline-flex; align-items: center; gap: 7px; }
.mjt .str-l-plna { display: inline-block; width: 16px; height: 0; border-top: 1.5px solid var(--mjt-brown-300); }
.mjt .str-l-cara { display: inline-block; width: 16px; height: 0; border-top: 1.5px dashed var(--mjt-green-600); margin-left: 10px; }

.mjt .str-pozn { display: block; margin-top: var(--mjt-space-4); line-height: 1.6; }

/* ── Rodina a ústava ───────────────────────────────────────────────────────
   Zápisy z jednání: řádek s datem vlevo (mockupový `.mrow`). Kartu s rodokmenem
   a její legendu popisuje blok „Rodokmen" výš — tady jen doplňky. */

.mjt .rod-pozn { display: block; margin-top: var(--mjt-space-4); text-align: center; }

.mjt .rod-zapisy { list-style: none; margin: 0; padding: 0; }

.mjt .rod-zapisy li {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) 76px;
    gap: var(--mjt-space-4);
    align-items: center;
    padding: 11px 4px;
    border-bottom: 1px solid var(--mjt-cream-200);
}

.mjt .rod-zapisy li:last-child { border-bottom: 0; }
.mjt .rod-z-d { font-size: var(--mjt-text-xs); font-weight: 600; color: var(--mjt-brown-500); }
.mjt .rod-z-t { display: grid; gap: 1px; min-width: 0; }
.mjt .rod-z-v { text-align: right; font-size: 11.5px; color: var(--mjt-brown-400); }

/* ── Rodokmen (sdílená scéna) ──────────────────────────────────────────────
   Bylo ve scoped CSS stránky „Lidé a vazby"; po vytažení scény do sdílené komponenty
   tam pravidla přestala platit (Blazor izolace nedosáhne na cizí komponentu) a legenda
   spadla na odrážkový seznam. Vzhled samotného stromu a koleček je v cimpel.css — sdílí
   ho s editačním spisem. */

/* Strom je závěr stránky (revize 31. 7.) — o ~12 % menší než dřív, ať nedominuje obsahu.
   Karta NESMÍ řezat popover u kořenů (nejstarší generace sedí dole), proto místo pod scénou
   a povolené přetečení. */
.mjt .mjt-rodokmen-karta { margin-top: 16px; overflow: visible; }
.mjt .mjt-rodokmen { max-width: 860px; margin: 0 auto; padding-bottom: 92px; }

/* Vysvětlivky pod stromem, na střed a drobněji. */
.mjt .mjt-rk-jak {
    margin: 0 0 6px;
    text-align: center;
    font-size: 11px;
    color: var(--mjt-brown-400);
}

.mjt .mjt-rk-legenda {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    font-size: 10.5px;
    color: var(--mjt-brown-400);
}

.mjt .mjt-rk-legenda li { display: inline-flex; align-items: center; gap: 6px; }

/* Tečka legendy nese TÉŽ barvy generací jako kolečka na stromě (cimpel.css definuje --gc
   na .rodokmen-uzel.gen-N, což na legendu nedosáhne — proto tady vlastní mapa se stejnými
   hodnotami). Kdyby se rozešly, legenda by lhala. */
.mjt .mjt-rk-tecka { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--gc, var(--mjt-brown-300)); }
.mjt .mjt-rk-tecka.gen-0 { --gc: #8A5A2B; }
.mjt .mjt-rk-tecka.gen-1 { --gc: #A6462E; }
.mjt .mjt-rk-tecka.gen-2 { --gc: #AF7A1C; }
.mjt .mjt-rk-tecka.gen-3 { --gc: #6E8B2A; }
.mjt .mjt-rk-tecka.gen-4 { --gc: #2F7E7A; }
.mjt .mjt-rk-tecka.gen-5 { --gc: #7A5EA6; }

.mjt .mjt-rk-cara { width: 18px; height: 0; border-top: 2px solid var(--mjt-brown-500); display: inline-block; }
.mjt .mjt-rk-cara.partner { border-top-style: dashed; }

/* ── Reporty a zápisy ──────────────────────────────────────────────────────
   Řádek archivu: datum vlevo, název a druh uprostřed, velikost vpravo. */

.mjt .rep-seznam { list-style: none; margin: 0; padding: 0; }

.mjt .rep-seznam li {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) auto 76px;
    gap: var(--mjt-space-4);
    align-items: center;
    padding: 11px 4px;
    border-bottom: 1px solid var(--mjt-cream-200);
}

.mjt .rep-seznam li:last-child { border-bottom: 0; }
.mjt .rep-d { font-size: var(--mjt-text-xs); font-weight: 600; color: var(--mjt-brown-500); }
.mjt .rep-t { display: grid; gap: 1px; min-width: 0; }
.mjt .rep-v { text-align: right; font-size: 11.5px; color: var(--mjt-brown-400); }
.mjt .rep-vic { display: block; margin-top: var(--mjt-space-4); }

/* ── Investiční strategie ──────────────────────────────────────────────────
   Karta dokumentu (mockupová hlavička s ikonou PDF). Pruhy alokace používají sdílené
   `.mjt-ips`/`.mjt-ir`/`.mjt-track` výš — tady jen okolí. */

.mjt .stg-dok { display: flex; align-items: center; gap: var(--mjt-space-4); }

.mjt .stg-dok-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: var(--mjt-radius-md);
    background: var(--mjt-cream-100);
    color: var(--mjt-green-700);
}

.mjt .stg-dok-i svg { width: 21px; height: 21px; }
.mjt .stg-dok-t { display: grid; gap: 2px; min-width: 0; }
.mjt .stg-dok-t b { font-size: var(--mjt-text-sm); font-weight: 700; color: var(--mjt-brown-700); }
.mjt .stg-pozn { display: block; margin-top: var(--mjt-space-4); line-height: 1.6; }

/* Dlaždice, která drží místo pro číslo, jež ještě nemáme. Ztlumené číslo (pomlčka) říká
   „tady to bude", ne „je to nula" — týž princip, jaký používá i mockup. */
.mjt .mjt-kpi.je-nic .mjt-kpi-v { color: var(--mjt-brown-300); }

.mjt .cil-pozn { display: block; max-width: var(--mjt-container-md); margin-top: var(--mjt-space-4); line-height: 1.6; }

/* ── Zeptejte se Alfreda ───────────────────────────────────────────────────
   Úzký sloupec na střed (mockupové `.alfw` 880 px), hero v Utile Display a mřížka
   návrhových otázek. Pole na dotaz je interaktivní ostrůvek (PortalDotaz) — jediné místo
   klientské tváře, kde okruh legitimně vzniká (ADR-0067). */

.mjt .alf-sloupec { max-width: var(--mjt-container-md); margin: 0 auto; }
.mjt .alf-hero { text-align: center; padding: 26px 0 4px; }

.mjt .alf-h {
    margin: 0;
    font-family: var(--mjt-font-display);
    font-size: 31px;
    font-weight: 600;
    letter-spacing: var(--mjt-tracking-tight);
    line-height: 1.15;
    color: var(--mjt-brown-700);
}

.mjt .alf-s {
    margin: 10px auto 0;
    max-width: 640px;
    font-size: var(--mjt-text-sm);
    line-height: 1.6;
    color: var(--mjt-brown-400);
    text-wrap: pretty;
}

.mjt .alf-mrizka {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 10px;
    margin-top: 22px;
}

.mjt .alf-karta {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 15px;
    border: 1px solid var(--mjt-hairline);
    border-radius: var(--mjt-radius-md);
    background: var(--mjt-white);
    text-decoration: none;
}

.mjt .alf-karta:hover { border-color: var(--mjt-green-300); background: var(--mjt-cream-50); }
.mjt .alf-karta svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; color: var(--mjt-green-700); }
.mjt .alf-karta span { font-size: var(--mjt-text-xs); line-height: 1.45; color: var(--mjt-brown-600); }

.mjt .alf-pole { margin-top: 18px; }
.mjt .alf-nahled { margin-top: 18px; text-align: center; }

/* Omezení náhledu stojí NAD obsahem, ne pod ním — je to podmínka čtení, ne poznámka pod čarou.
   Barevně je to klidné upozornění, ne výstraha: nic se nepokazilo, jen se tu nedá psát. */
.mjt .alf-nahled-hlavni {
    margin: 0 0 4px;
    padding: 11px 14px;
    /* Táž dvojice barev, jakou nese odznak `.mjt-bal.warn` — upozornění má v aplikaci
       jednu podobu, ne dvě podobné. */
    border: 1px solid #e8d5ab;
    border-radius: var(--mjt-radius-md);
    background: #f8edd8;
    font-size: var(--mjt-text-sm);
    font-weight: 600;
    line-height: 1.5;
    color: #a8741a;
    text-align: center;
}

.mjt .alf-vyhrada {
    margin: 10px 0 0;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--mjt-brown-400);
}

/* Dlaždice s TEXTOVOU hodnotou (název dokumentu, název reportu) místo čísla. Základní
   `.mjt-kpi-v` má `white-space: nowrap` — u čísla správně, u názvu ne: „Čtvrtletní zpráva
   o výkonnosti — Q2 2026" se vysypala přes dvě sousední dlaždice (nález ze screenshotu
   9. 8. 2026). Zalomí se, ale nejvýš na dva řádky, ať řada dlaždic drží výšku. */
.mjt .mjt-kpi-v.mensi {
    font-size: 17px;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ZÚŽENÍ „VIDÍ JEN SVÉ" (ADR-0088 E5) — věta nad obsahem klientské tváře. Globální CSS, protože
   rozvržení je statické a věta se týká celé sekce; klidná, ne varovná: není to chyba, je to
   nastavení, o kterém má člověk vědět. */
.mjt-jen-sve {
    margin: 0 0 14px;
    padding: 9px 14px;
    border-left: 3px solid rgba(95, 110, 0, 0.55);
    border-radius: 4px;
    background: rgba(95, 110, 0, 0.06);
    color: var(--mjt-text-tlumeny, #6b6257);
    font-size: 13px;
    line-height: 1.5;
}

/* --- ROZPAD PORTFOLIA: ČTYŘI POHLEDY NA SLOŽENÍ (spec §10) ---------------------------------
   Barvy výsečí jsou podle POŘADÍ, ne podle názvu kategorie: sektor a region jsou volný text
   z výpisů bank, takže na ně nejde navázat pevnou barvu jako na třídy majetku. „Neuvedeno"
   je vždy šedé — je to zbytek, ne kategorie se stejným postavením. */
/* Pořadová paleta (osa „podle měny"/„podle držitele", složení portfolia) = Palette
   z návrhu, ve stejném pořadí; osmá barva je doplněná ze stejné rodiny (návrh má sedm). */
.mjt .mjt-rozpad-1 { --kat: #7f930a; }
.mjt .mjt-rozpad-2 { --kat: #afca0b; }
.mjt .mjt-rozpad-3 { --kat: #6b5442; }
.mjt .mjt-rozpad-4 { --kat: #b3a291; }
.mjt .mjt-rozpad-5 { --kat: #d6ec5a; }
.mjt .mjt-rozpad-6 { --kat: #5f7d98; }
.mjt .mjt-rozpad-7 { --kat: #d8ccbc; }
.mjt .mjt-rozpad-8 { --kat: #8a7563; }
.mjt .mjt-rozpad-neuvedeno { --kat: #A59C97; }

.mjt-rozpad { margin: 0 0 18px; }

.mjt-rozpad-taby {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}

.mjt-rozpad-tab {
    padding: 4px 11px;
    border: 1px solid rgba(89, 67, 52, 0.18);
    border-radius: 999px;
    color: var(--mjt-text-tlumeny, #6b6257);
    font-size: 12.5px;
    text-decoration: none;
}

.mjt-rozpad-tab:hover { background: rgba(89, 67, 52, 0.05); }

.mjt-rozpad-tab.on {
    border-color: transparent;
    background: #5F6E00;
    color: #fff;
}

.mjt-rozpad-telo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 28px;
}

.mjt-rozpad-pozn {
    margin: 10px 0 0;
    color: var(--mjt-text-tlumeny, #6b6257);
    font-size: 12px;
}

/* Odchylka od cílové alokace: nad pět procentních bodů se zvýrazní — je to hranice, u které
   se o portfoliu obvykle začne mluvit (rebalance), ne kosmetika. */
.mjt-drift-vyrazny { color: #8a4b10; font-weight: 600; }


/* CHYBĚJÍCÍ HISTORIE HODNOT — věta místo prázdna (14. 8. 2026). Tlumeně: je to vysvětlení,
   ne výtka; nic se nepokazilo, jen ještě není z čeho počítat. */
.mjt-bez-historie {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--barva-text-tlumeny);
    max-width: 62ch;
}

.mjt-kpi-nelze {
    font-size: 0.78rem;
    color: var(--barva-text-tlumeny);
}