/* ---------------------------------------------------------------------------
   Detail majetku — podoba 1:1 s návrhem Pavla Müllera (obrazovka „Detail
   majetku", `isMjItem`). Zdroj: podklady/claude-design/mockup-backoffice-2026-09-02,
   náhledy `nahledy/30-detail-majetku.png` … `34-detail-aktivita.png`.

   PROČ GLOBÁLNÍ LIST: stránka skládá CIZÍ komponenty (panel pozic, údaje
   položky, čísla, protistrany, historie ocenění, upravitelná hodnota) a scoped
   CSS na ně nedosáhne — týž důvod jako `dialog.css`, `karta-sekce.css`
   a `karta-klienta.css`.

   Prefix `dm-`. U každého bloku je jméno třídy z návrhu, ať jde dohledat,
   odkud které číslo je.
   --------------------------------------------------------------------------- */

/* Návrh `.dtlwrap` + `.c`: karta má pevné minimum (v návrhu 966 px pro tělo,
   1060 pro tabulku pozic). Posouvá se OBAL, ne tělo — jinak by drobeček
   a záložky odjely z dohledu. */
.dm-obal { overflow-x: auto; padding-bottom: 7px; }

.dm-karta {
    background: var(--white);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    min-width: 966px;
}

/* ── Drobeček uvnitř karty (návrh `.dnav`) ─────────────────────────────────── */
.dm-dnav {
    display: flex; align-items: center; gap: 9.5px;
    font-size: 14px; color: var(--brown-400);
    padding: 15px 21px 0;
    white-space: nowrap; overflow: hidden;
}
.dm-dnav .sq { width: 14px; height: 14px; border-radius: 3.5px; flex: 0 0 auto; }
.dm-dnav a { color: var(--green-700); font-weight: 600; text-decoration: none; }
.dm-dnav a:hover { text-decoration: underline; }
.dm-dnav .cur { color: var(--brown-700); font-weight: 600; }
.dm-dnav .sep { color: var(--brown-300); }

/* ── Hlavička (návrh `.dtop` + `.dtoph`) ───────────────────────────────────── */
.dm-top { padding: 9.5px 21px 16px; border-bottom: 1px solid var(--border-hairline); }
.dm-toph {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 21px; margin-bottom: 16px;
}
.dm-toph-texty { flex: 1 1 auto; min-width: 0; }
/* Nadpis je v návrhu `.dt` (TĚLOVÉ písmo 700, řádkování 1,28, prostrkání −.015em) zvětšený
   inline na 24 px — ne titulkový řez Utile Display. Poznalo se to až z CSS návrhu, ze snímku
   vypadaly oba řezy „tučně". */
/* `.mck h1` v základu back office je specifičtější než samotná třída, takže bez přidaného
   `h1` v selektoru se nadpis kreslil 19,2 px (změřeno 5. 9. 2026 — okem to vypadalo „velké"). */
.mck h1.dm-nazev,
.dm-nazev {
    font: 700 24px/1.28 var(--font-body);
    color: var(--brown-700); letter-spacing: -0.015em; margin: 0;
    text-wrap: pretty;
}
.dm-podtitul { font-size: 13.5px; color: var(--brown-400); margin: 7px 0 0; line-height: 1.5; }
.dm-toph-akce { display: flex; align-items: center; gap: 10.5px; padding-top: 4.5px; flex: 0 0 auto; }

/* ── Dlaždice (návrh `.mikpi`) ─────────────────────────────────────────────── */
.dm-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 16px; }
.dm-kpi .b {
    background: var(--white); border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md); padding: 12px 14px; min-width: 0;
}
/* První dlaždice nese hlavní číslo — v návrhu má krémové pozadí a větší písmo. */
.dm-kpi .b.je-hlavni { background: var(--cream-50); }
.dm-kpi .l {
    display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--brown-400);
}
.dm-kpi .v {
    display: block; font: 700 20px var(--font-cisla); color: var(--brown-700);
    margin-top: 6px; letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-kpi .b.je-hlavni .v { font-size: 23px; }
.dm-kpi .s { display: block; font-size: 12.5px; color: var(--brown-400); margin-top: 4px; line-height: 1.45; }

/* ── Pruh pilulek s údaji (návrh `.mimeta`) ────────────────────────────────── */
.dm-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px;
    margin: 0; padding-top: 14px; border-top: 1px solid var(--border-hairline);
}
.dm-meta .mm {
    display: inline-flex; align-items: baseline; gap: 7px;
    background: var(--cream-50); border: 1px solid var(--border-hairline);
    border-radius: var(--radius-pill); padding: 5px 13px;
}
.dm-meta .mmk {
    white-space: nowrap; font-size: 11.5px; font-weight: 600; letter-spacing: .09em;
    text-transform: uppercase; color: var(--brown-400);
}
.dm-meta .mmv {
    font-size: 13.5px; font-weight: 600; color: var(--brown-700);
    max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-meta .dm-mezera { flex: 1 1 auto; }

/* ── Tělo: levý sloupec + rail (návrh `.djira` / `.djl` / `.djr`) ──────────── */
.dm-telo { display: flex; align-items: flex-start; }
.dm-l { flex: 1 1 auto; padding: 19px 21px 26px; min-width: 0; }
.dm-r {
    flex: 0 0 425px; box-sizing: border-box; padding: 19px;
    background: var(--cream-50); border-left: 1px solid var(--border-hairline);
    display: flex; flex-direction: column; gap: 14px; align-self: stretch;
}
/* Odstavce se lámou po 86 znacích (návrh `.djl .abod`) — širší řádek se špatně čte. */
.dm-l .dm-veta { max-width: 86ch; }

/* ── Záložky (návrh `.seg.sm`) ─────────────────────────────────────────────── */
.dm-zalozky {
    display: inline-flex; background: var(--surface-sunken, var(--cream-100));
    border: 1px solid var(--border-hairline); border-radius: var(--radius-pill);
    padding: 2.5px; margin-bottom: 16px; max-width: 100%; flex-wrap: wrap;
}
.dm-zalozky a, .dm-zalozky span {
    border: 0; background: transparent; font: 600 13px var(--font-body);
    color: var(--brown-400); padding: 4px 11px; border-radius: var(--radius-pill);
    cursor: pointer; white-space: nowrap; text-decoration: none;
}
.dm-zalozky a:hover { color: var(--brown-700); }
.dm-zalozky a.je-aktivni {
    background: var(--white); color: var(--brown-700); box-shadow: var(--shadow-xs, var(--shadow-sm));
}
.dm-zalozky .n { font-family: var(--font-cisla); font-size: 11px; opacity: .55; margin-left: 5px; }

/* ── Skupina údajů (návrh `.jsec` + `.jlab` + `.mifg`) ─────────────────────── */
.dm-sekce { margin-bottom: 23px; }
.dm-sekce:last-child { margin-bottom: 0; }
.dm-sekce-hlava {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; color: var(--brown-400);
    letter-spacing: .02em; margin-bottom: 8px;
}
.dm-sekce-hlava svg {
    width: 15px; height: 15px; stroke: var(--brown-300); fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto;
}
.dm-pole { display: grid; grid-template-columns: 232px 1fr; gap: 9px 14px; font-size: 14px; align-items: center; }
.dm-pole .k { font-size: 13px; color: var(--brown-400); }
.dm-pole .v { font-size: 14px; font-weight: 600; color: var(--brown-700); min-width: 0; }
.dm-pole .v.je-cislo { font-family: var(--font-cisla); }
/* Rail má popisky NAD hodnotou (návrh `.mifg { grid-template-columns: 1fr }`). */
.dm-r .dm-pole { grid-template-columns: 1fr; gap: 4px; }
.dm-r .dm-pole .k { margin-top: 8px; }

/* ── Pruh složení (návrh `.mibar`) ─────────────────────────────────────────── */
.dm-slozeni-radek {
    display: grid; grid-template-columns: 1fr 220px 96px; gap: 14px;
    align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border-hairline);
}
.dm-slozeni-radek:last-of-type { border-bottom: 0; }
.dm-bar { height: 7px; border-radius: 4px; background: var(--cream-200); overflow: hidden; }
.dm-bar span { display: block; height: 100%; border-radius: 4px; }
.dm-pct { text-align: right; font-family: var(--font-cisla); font-weight: 600; color: var(--brown-700); }

/* ── Karta v railu (návrh `.jcard` + `.jch`) ───────────────────────────────── */
.dm-karta-rail { background: var(--white); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); }
.dm-karta-rail-hlava {
    display: flex; align-items: center; gap: 9.5px; padding: 10.5px 15px;
    border-bottom: 1px solid var(--border-hairline);
    font-size: 14px; font-weight: 700; color: var(--brown-700);
}
.dm-karta-rail-hlava svg { width: 16px; height: 16px; stroke: var(--brown-300); fill: none; stroke-width: 1.7; flex: 0 0 auto; }
.dm-karta-rail-telo { padding: 12px 15px 15px; }
.dm-rail-veta { font-size: 13.5px; line-height: 1.6; color: var(--brown-400); margin: 0 0 11px; }
.dm-rail-akce { display: flex; gap: 9px; flex-wrap: wrap; }
.dm-stopka { font-size: 13px; line-height: 1.7; color: var(--brown-400); }

/* ── Karta s obsahem (návrh `.c` uvnitř záložky) ───────────────────────────── */
.dm-blok { background: var(--white); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; }
.dm-blok-pad { padding: 15px 17px; }
.dm-blok-hlava {
    display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.dm-blok-hlava .t { font-size: 15px; font-weight: 700; color: var(--brown-700); }
.dm-blok-hlava .sm { font-size: 13px; color: var(--brown-400); }
.dm-blok-hlava .dm-mezera { flex: 1 1 auto; }
.dm-pata {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 11px 17px; border-top: 1px solid var(--border-hairline);
    background: var(--cream-50); font-size: 14px;
}
.dm-pata .k { color: var(--brown-400); }
.dm-pata .v { font-family: var(--font-cisla); font-weight: 600; color: var(--brown-700); }

/* ── Výtka nad obsahem (návrh `.warnbox`) ─────────────────────────────────── */
.dm-vytka {
    background: var(--cream-50); border: 1px solid var(--border-hairline);
    border-left: 3px solid #c9a227; border-radius: var(--radius-md);
    padding: 11px 14px; font-size: 13.5px; line-height: 1.6; color: var(--brown-600);
    margin-bottom: 16px; max-width: 86ch;
}

/* ── Aktivita (návrh `.alog` + `.arow`) ───────────────────────────────────── */
.dm-log { display: flex; flex-direction: column; gap: 2px; }
.dm-log-radek {
    display: grid; grid-template-columns: 34px 1fr; gap: 12px;
    padding: 11px 0; border-bottom: 1px solid var(--border-hairline);
}
.dm-log-radek:last-child { border-bottom: 0; }
.dm-log-ava {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--cream-200); color: var(--brown-500);
    display: flex; align-items: center; justify-content: center;
    font: 600 11.5px var(--font-body); flex: 0 0 auto;
}
.dm-log-hlava { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dm-log-kdo { font-size: 14px; font-weight: 700; color: var(--brown-700); }
.dm-log-typ {
    font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--brown-400); background: var(--cream-100);
    border-radius: var(--radius-pill); padding: 2px 8px;
}
.dm-log-kdy { font-size: 12.5px; color: var(--brown-400); margin-left: auto; white-space: nowrap; }
.dm-log-telo { font-size: 14px; color: var(--brown-600); line-height: 1.55; margin-top: 3px; }
/* „dříve → nyní" (návrh `.adifs` / `.adif`) */
.dm-log-diff { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 9px; margin-top: 7px; font-size: 13px; }
.dm-log-diff .dk { color: var(--brown-400); }
.dm-log-diff .nw { font-weight: 600; color: var(--brown-700); font-family: var(--font-cisla); }
.dm-log-diff .was { color: var(--brown-300); font-size: 12px; }
.dm-log-diff .old { color: var(--brown-400); text-decoration: line-through; font-family: var(--font-cisla); }
.dm-log-prazdno { font-size: 13.5px; color: var(--brown-400); line-height: 1.6; padding: 6px 0; }

/* Prázdný a odepřený stav stránky. */
.dm-prazdno { font-size: 14px; color: var(--brown-500); line-height: 1.6; padding: 18px 0; max-width: 86ch; }

@media (max-width: 1180px) {
    /* Rail se pod tělo NESKLÁDÁ — je to pruh s podrobnostmi, ne obsah; na užší
       obrazovce se posouvá celá karta (`.dm-obal`), jako v návrhu. */
    .dm-kpi { grid-template-columns: repeat(2, 1fr); }
}

/* ── Barvy pruhů složení ────────────────────────────────────────────────────
   Barva podle POŘADÍ, ne podle názvu: sektor ani region nejsou číselník (volný
   text z výpisů), takže na ně nejde navázat pevnou barvu jako na třídy majetku.
   Odstíny jsou tytéž jako v klientské tváři (`--mjt-graf-*`) a v návrhu
   (`mi.comp` → `#afca0b`, `#8a7563`) — jeden majetek nesmí mít v back office
   jinou paletu než v portálu.
   „Neuvedeno" je vždy šedé: je to zbytek, ne třída se stejným postavením. */
.dm-bar-1 span { background: #7f930a; }
.dm-bar-2 span { background: #afca0b; }
.dm-bar-3 span { background: #6b5442; }
.dm-bar-4 span { background: #b3a291; }
.dm-bar-5 span { background: #d6ec5a; }
.dm-bar-6 span { background: #5f7d98; }
.dm-bar-7 span { background: #d8ccbc; }
.dm-bar-8 span { background: #8a7563; }
.dm-bar-neuvedeno span { background: var(--brown-300); }