@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ==========================================================================
   MyManagement — designový systém
   Zdroj pravdy: design/*.dc.html (Main, Nemovitost, Doklady, Spotreby, Vyuctovani).
   Všechny třídy mají prefix `mm-` a NEZÁVISÍ na Bootstrapu (ten zůstává
   nalinkovaný jen kvůli starým stránkám).
   Výjimka: `.num` = tabulkový číselný řez (stejný název jako v návrhu).
   ========================================================================== */

/* --- 1. Tokeny ----------------------------------------------------------- */
:root {
    /* papír a povrchy */
    --mm-paper: #f6f4f0;          /* pozadí aplikace */
    --mm-surface: #fffefb;        /* karty, tabulky, topbar */
    --mm-surface-sunken: #faf8f4; /* hlavičky tabulek, patičky karet */
    --mm-surface-muted: #f2efe9;  /* aktivní dlaždice, placeholder plochy */

    /* inkoust */
    --mm-ink: #1b1917;            /* hlavní text, tmavá tlačítka, sidebar */
    --mm-ink-2: #514b45;          /* sekundární text */
    --mm-ink-3: #857d74;          /* popisky, muted */
    --mm-ink-4: #a09890;          /* nejslabší text, pomlčky */

    /* linky */
    --mm-line: #e4dfd7;           /* obrys karet, oddělovače sekcí */
    --mm-hairline: #efebe4;       /* vlásové linky uvnitř karet a tabulek */
    --mm-line-strong: #d4cec5;    /* interpunkce, neutrální praporky */

    /* akce (modrá) */
    --mm-action: #2b5d92;
    --mm-action-hover: #1f4570;
    --mm-action-bg: #eef3f9;
    --mm-action-line: #cbd9e8;

    /* pozornost (rezavá) */
    --mm-attention: #96552b;
    --mm-attention-soft: #b5763f;
    --mm-attention-bg: #fbf1e8;
    --mm-attention-bg-weak: #fdf8f3;
    --mm-attention-line: #e6d3c2;

    /* v pořádku (zelená) */
    --mm-ok: #2c6b4d;
    --mm-ok-bg: #f1f7f3;
    --mm-ok-line: #cfe0d5;

    /* sidebar */
    --mm-side-bg: #1b1917;
    --mm-side-fg: #cfc9c1;
    --mm-side-fg-strong: #f6f4f0;
    --mm-side-fg-muted: #7a726a;
    --mm-side-fg-num: #a09890;
    --mm-side-line: #2e2a26;
    --mm-side-hover: #262220;
    --mm-side-active: #2e2a26;
    --mm-brass: #d8b26a;          /* značka + aktivní proužek */

    /* ostatní */
    --mm-avatar-bg: #eee9e1;

    /* rozměry */
    --mm-sidebar-w: 232px;
    --mm-topbar-h: 56px;
    --mm-gutter: 28px;
    --mm-radius: 7px;
    --mm-radius-sm: 5px;
    --mm-radius-xs: 4px;
    --mm-control-h: 31px;

    /* písma */
    --mm-font-sans: 'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --mm-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

/* --- 2. Základ ----------------------------------------------------------- */
html, body {
    margin: 0;
    height: 100%;
    font-family: var(--mm-font-sans);
    font-size: 13.5px;
    color: var(--mm-ink);
    background: var(--mm-paper);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--mm-action);
    text-decoration: none;
}

a:hover {
    color: var(--mm-action-hover);
    text-decoration: underline;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.01em;
}

h1 { font-size: 23px; }
h2 { font-size: 16px; }
h3 { font-size: 13.5px; }
h1:focus { outline: none; }

:focus-visible {
    outline: 2px solid var(--mm-action);
    outline-offset: 2px;
}

/* Čísla v tabulkovém řezu — `.num` (název z návrhu), `.mm-num` alias. */
.num, .mm-num {
    font-family: var(--mm-font-mono);
    font-variant-numeric: tabular-nums;
}

/* --- 3. Skořápka aplikace ------------------------------------------------ */
.mm-app {
    display: flex;
    min-height: 100vh;
    background: var(--mm-paper);
}

.mm-main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

/* Topbar (56 px, papírově bílý, spodní linka). */
.mm-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--mm-topbar-h);
    flex-shrink: 0;
    padding: 0 var(--mm-gutter);
    background: var(--mm-surface);
    border-bottom: 1px solid var(--mm-line);
    position: sticky;
    top: 0;
    z-index: 5;
}

.mm-topbar__lead {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
    min-width: 0;
}

.mm-topbar__search {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--mm-ink-3);
}

/* Když stránka vloží do topbaru vlastní obsah (drobečky), nápověda hledání zmizí. */
.mm-topbar__lead > :not(.mm-topbar__search) ~ .mm-topbar__search { display: none; }

.mm-topbar__user {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    color: var(--mm-ink-2);
}

.mm-topbar__divider {
    width: 1px;
    height: 22px;
    background: var(--mm-line);
}

.mm-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--mm-avatar-bg);
    font-size: 11px;
    font-weight: 600;
    color: var(--mm-ink-2);
}

.mm-avatar--lg {
    width: 34px;
    height: 34px;
    font-size: 12px;
}

/* Obsah stránky: gutter 28 px, bloky pod sebou s odstupem 18 px. */
.mm-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px var(--mm-gutter) 28px;
    flex-grow: 1;
    min-width: 0;
}

/* Blok, který má přetéct přes gutter až k okrajům (např. pás záložek). */
.mm-bleed {
    margin-left: calc(-1 * var(--mm-gutter));
    margin-right: calc(-1 * var(--mm-gutter));
    padding-left: var(--mm-gutter);
    padding-right: var(--mm-gutter);
}

/* --- 4. Hlavička stránky a drobečky ------------------------------------- */
.mm-page-head {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}

.mm-page-head__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.mm-page-head__title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.mm-page-head__subtitle {
    font-size: 12.5px;
    color: var(--mm-ink-3);
}

.mm-page-head__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--mm-ink-2);
}

.mm-page-head__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.mm-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--mm-ink-3);
    min-width: 0;
}

.mm-breadcrumb__current {
    color: var(--mm-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Interpunkční tečka mezi údaji. */
.mm-sep { color: var(--mm-line-strong); }

.mm-muted { color: var(--mm-ink-3); }
.mm-faint { color: var(--mm-ink-4); }
.mm-strong { font-weight: 500; }
.mm-right { text-align: right; }
.mm-push { margin-left: auto; }

.mm-text-ok { color: var(--mm-ok); }
.mm-text-attention { color: var(--mm-attention); }
.mm-text-action { color: var(--mm-action); }

/* --- 5. Karty ------------------------------------------------------------ */
.mm-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    background: var(--mm-surface);
    overflow: hidden;
}

.mm-card--attention {
    border-color: var(--mm-attention-line);
}

.mm-card--muted {
    background: var(--mm-surface-sunken);
}

.mm-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mm-line);
    font-size: 13.5px;
    font-weight: 600;
}

/* Odkaz/akce vpravo v hlavičce karty. */
.mm-card__action {
    margin-left: auto;
    font-size: 12px;
    font-weight: 400;
    color: var(--mm-action);
}

.mm-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
}

.mm-card__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--mm-hairline);
    background: var(--mm-surface-sunken);
    font-size: 12px;
    color: var(--mm-ink-2);
}

.mm-card__foot--attention {
    background: var(--mm-attention-bg-weak);
    color: var(--mm-attention);
}

/* Dvě/tři svislé „nožičky" karty oddělené vlásovými linkami. */
.mm-card__split {
    display: flex;
    border-top: 1px solid var(--mm-hairline);
}

.mm-card__split > * {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 16px;
    border-right: 1px solid var(--mm-hairline);
}

.mm-card__split > *:last-child { border-right: none; }

/* --- 6. Mřížky ----------------------------------------------------------- */
.mm-grid {
    display: grid;
    gap: 16px;
}

.mm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

/* Hlavní sloupec + pravý panel (návrh: 400 px, resp. 372–380 px). */
.mm-grid--aside {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 20px;
    align-items: start;
}

.mm-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* --- 7. Čísla: pás a dlaždice ------------------------------------------- */
/* Vodorovný pás souhrnu (jedna karta rozdělená svislými vlásovkami). */
.mm-stat-strip {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    background: var(--mm-surface);
    overflow: hidden;
}

.mm-stat-strip > .mm-stat {
    flex: 1 1 0;
    min-width: 0;
    border-right: 1px solid var(--mm-hairline);
}

.mm-stat-strip > .mm-stat:last-child { border-right: none; }

.mm-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 18px;
}

.mm-stat__label {
    font-size: 11.5px;
    color: var(--mm-ink-3);
}

.mm-stat__value {
    font-family: var(--mm-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 19px;
    font-weight: 500;
}

.mm-stat__note {
    font-size: 11.5px;
    color: var(--mm-ink-3);
}

.mm-stat--attention {
    background: var(--mm-attention-bg-weak);
}

.mm-stat--attention .mm-stat__label,
.mm-stat--attention .mm-stat__value,
.mm-stat--attention .mm-stat__note { color: var(--mm-attention); }

/* Vybraná položka pásu (např. zvolený rok). */
.mm-stat--selected {
    background: var(--mm-surface-muted);
    box-shadow: inset 0 -2px 0 var(--mm-action);
}

/* Samostatná dlaždice s číslem (mřížka 4 sloupců na detailu). */
.mm-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    background: var(--mm-surface);
}

.mm-tile__label { font-size: 11.5px; color: var(--mm-ink-3); }

.mm-tile__value {
    font-family: var(--mm-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 21px;
    font-weight: 500;
}

.mm-tile__note { font-size: 11.5px; color: var(--mm-ink-3); }

.mm-tile--attention {
    border-color: var(--mm-attention-line);
    background: var(--mm-attention-bg);
}

.mm-tile--attention .mm-tile__label,
.mm-tile--attention .mm-tile__value,
.mm-tile--attention .mm-tile__note { color: var(--mm-attention); }

.mm-tile--ok {
    border-color: var(--mm-ok-line);
    background: var(--mm-ok-bg);
}

/* --- 8. Tabulky ---------------------------------------------------------- */
/* Použití: <div class="mm-table-wrap"><table class="mm-table">…  */
.mm-table-wrap {
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    background: var(--mm-surface);
    overflow-x: auto;
}

.mm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--mm-surface);
}

.mm-table thead th {
    height: 36px;
    padding: 0 10px;
    background: var(--mm-surface-sunken);
    border-bottom: 1px solid var(--mm-line);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mm-ink-3);
    text-align: left;
    white-space: nowrap;
}

.mm-table tbody td {
    height: 48px;
    padding: 0 10px;
    border-bottom: 1px solid var(--mm-hairline);
    vertical-align: middle;
}

.mm-table tbody tr:last-child td { border-bottom: none; }

.mm-table th:first-child, .mm-table td:first-child { padding-left: 16px; }
.mm-table th:last-child, .mm-table td:last-child { padding-right: 16px; }

/* Číselné sloupce: mono + zarovnání vpravo. */
.mm-table .mm-col-num, .mm-table th.mm-col-num {
    text-align: right;
    font-family: var(--mm-font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mm-table th.mm-col-num { font-family: var(--mm-font-sans); }

/* Hustší varianta (náhledy uvnitř karet: řádek 42 px). */
.mm-table--compact tbody td { height: 42px; }

/* Zvýrazněné a tlumené řádky. */
.mm-table tbody tr.is-attention { background: #fdfaf4; }
.mm-table tbody tr.is-muted td { color: var(--mm-ink-3); }
.mm-table tbody tr.is-clickable:hover { background: var(--mm-surface-sunken); cursor: pointer; }

/* Součtový řádek. */
.mm-table tfoot td {
    height: 52px;
    padding: 0 10px;
    background: var(--mm-surface-sunken);
    border-top: 1px solid var(--mm-line);
    font-size: 13.5px;
    font-weight: 600;
}

/* Tabulka uvnitř karty — obrys má už karta. */
.mm-card > .mm-table,
.mm-card > .mm-table-wrap { border: none; border-radius: 0; }

/* Prázdný stav. */
.mm-empty {
    padding: 28px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--mm-ink-3);
}

/* --- 9. Řádky s popiskem a hodnotou ------------------------------------- */
.mm-rows {
    display: flex;
    flex-direction: column;
}

.mm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--mm-hairline);
    font-size: 12.5px;
}

.mm-row:last-child { border-bottom: none; }
.mm-row__label { color: var(--mm-ink-3); }
.mm-row__value { margin-left: auto; text-align: right; }

/* Položka seznamu se svislým praporkem (lhůty, revize). */
.mm-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--mm-hairline);
}

.mm-item:last-child { border-bottom: none; }

.mm-item__flag {
    width: 3px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 2px;
    background: var(--mm-line-strong);
}

.mm-item__flag--attention { background: var(--mm-attention); }
.mm-item__flag--ok { background: var(--mm-ok); }

.mm-item__text { display: flex; flex-direction: column; min-width: 0; }
.mm-item__title { font-size: 13px; }
.mm-item__note { font-size: 11.5px; color: var(--mm-ink-3); }
.mm-item__value { margin-left: auto; font-size: 12.5px; color: var(--mm-ink-2); }

/* --- 10. Stavové odznaky a tečky ---------------------------------------- */
.mm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border: 1px solid var(--mm-line);
    border-radius: 20px;
    font-size: 11px;
    line-height: 17px;
    color: var(--mm-ink-3);
    white-space: nowrap;
}

.mm-badge--ok {
    color: var(--mm-ok);
    border-color: var(--mm-ok-line);
    background: var(--mm-ok-bg);
}

/* „Ke kontrole" */
.mm-badge--attention {
    color: var(--mm-attention);
    border-color: var(--mm-attention-line);
    background: var(--mm-attention-bg);
}

/* „Po splatnosti" — plný rezavý obrys, bez výplně */
.mm-badge--overdue {
    color: var(--mm-attention);
    border-color: var(--mm-attention);
    background: transparent;
}

.mm-badge--action {
    color: var(--mm-action);
    border-color: var(--mm-action-line);
    background: var(--mm-action-bg);
}

/* Stav jen textem (v tabulce dokladů: „Ověřeno"). */
.mm-status {
    font-size: 11.5px;
    color: var(--mm-ink-3);
    white-space: nowrap;
}

.mm-status--ok { color: var(--mm-ok); }
.mm-status--attention { color: var(--mm-attention); }

.mm-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #c6bfb6;
    display: inline-block;
}

.mm-dot--ok { background: var(--mm-ok); }
.mm-dot--attention { background: var(--mm-attention-soft); }

/* Upozorňovací pruh („Vyžaduje pozornost"). */
.mm-notice {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 18px;
    border: 1px solid var(--mm-attention-line);
    border-radius: var(--mm-radius);
    background: var(--mm-attention-bg-weak);
    font-size: 12.5px;
    color: var(--mm-attention);
}

.mm-notice__title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
}

.mm-notice--ok {
    border-color: var(--mm-ok-line);
    background: var(--mm-ok-bg);
    color: var(--mm-ok);
}

/* --- 11. Tlačítka -------------------------------------------------------- */
.mm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--mm-control-h);
    padding: 0 12px;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    background: var(--mm-surface);
    font-family: inherit;
    font-size: 12.5px;
    color: var(--mm-ink-2);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

.mm-btn:hover {
    background: var(--mm-surface-sunken);
    color: var(--mm-ink);
    text-decoration: none;
}

.mm-btn--primary {
    border-color: var(--mm-ink);
    background: var(--mm-ink);
    color: var(--mm-side-fg-strong);
    font-weight: 500;
}

.mm-btn--primary:hover {
    background: #2e2a26;
    color: var(--mm-side-fg-strong);
}

.mm-btn--quiet {
    border-color: transparent;
    background: transparent;
    color: var(--mm-action);
}

.mm-btn--quiet:hover { background: var(--mm-surface-muted); color: var(--mm-action-hover); }

.mm-btn--sm { height: 27px; padding: 0 9px; font-size: 12px; }

.mm-btn[disabled], .mm-btn.is-disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* --- 12. Filtry, segmentovaný přepínač, záložky ------------------------- */
.mm-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Filtrační čip: popisek + hodnota + šipka/křížek. */
.mm-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: var(--mm-control-h);
    padding: 0 11px;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    background: var(--mm-surface);
    font-family: inherit;
    font-size: 12.5px;
    color: var(--mm-ink-3);
    cursor: pointer;
    white-space: nowrap;
}

.mm-filter__value { color: var(--mm-ink); font-weight: 500; }

.mm-filter.is-active {
    border-color: var(--mm-action-line);
    background: var(--mm-action-bg);
    color: var(--mm-action);
}

.mm-filter.is-active .mm-filter__value { color: var(--mm-action-hover); }

/* Nativní <select> ve vzhledu filtračního čipu. */
select.mm-filter {
    appearance: none;
    padding-right: 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23857d74' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    color: var(--mm-ink);
    font-weight: 500;
}

/* Segmentovaný přepínač (Karty / Tabulka, Vše / Ke kontrole / Po splatnosti). */
.mm-segmented {
    display: inline-flex;
    align-items: stretch;
    height: var(--mm-control-h);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    background: var(--mm-surface);
    overflow: hidden;
}

.mm-segmented__item {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: none;
    border-left: 1px solid var(--mm-line);
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--mm-ink-2);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

.mm-segmented__item:first-child { border-left: none; }
.mm-segmented__item:hover { background: var(--mm-surface-sunken); text-decoration: none; }

.mm-segmented__item.is-active,
.mm-segmented__item[aria-pressed="true"] {
    background: var(--mm-ink);
    color: var(--mm-side-fg-strong);
    font-weight: 500;
}

/* Záložky uvnitř stránky (detail nemovitosti). */
.mm-tabs {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--mm-line);
}

.mm-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 9px;
    font-size: 13px;
    color: var(--mm-ink-2);
    text-decoration: none;
}

.mm-tab:hover { color: var(--mm-ink); text-decoration: none; }

.mm-tab.is-active, .mm-tab.active {
    color: var(--mm-ink);
    font-weight: 500;
    box-shadow: inset 0 -2px 0 var(--mm-ink);
}

.mm-tab__count {
    font-family: var(--mm-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--mm-ink-3);
}

.mm-tab__count--attention { color: var(--mm-attention); }

/* Stránkování. */
.mm-pager {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
}

.mm-pager__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 27px;
    height: 27px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: var(--mm-radius-xs);
    color: var(--mm-ink-2);
    text-decoration: none;
}

.mm-pager__item:hover { background: var(--mm-surface); border-color: var(--mm-line); text-decoration: none; }
.mm-pager__item.is-active { background: var(--mm-ink); border-color: var(--mm-ink); color: var(--mm-side-fg-strong); }

/* --- 13. Formuláře ------------------------------------------------------- */
.mm-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mm-label { font-size: 11.5px; color: var(--mm-ink-3); }

.mm-input, .mm-select, .mm-textarea {
    width: 100%;
    min-height: var(--mm-control-h);
    padding: 5px 10px;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    background: var(--mm-surface);
    font-family: inherit;
    font-size: 13px;
    color: var(--mm-ink);
}

.mm-input:focus, .mm-select:focus, .mm-textarea:focus {
    outline: none;
    border-color: var(--mm-action-line);
    box-shadow: 0 0 0 3px var(--mm-action-bg);
}

.mm-input::placeholder { color: var(--mm-ink-4); }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--mm-ok); }
.invalid { outline: 1px solid #b3261e; }
.validation-message { font-size: 12px; color: #b3261e; }

/* Vysvětlivka pod polem nebo v patičce karty. */
.mm-hint { font-size: 11.5px; color: var(--mm-ink-3); line-height: 1.45; }

/* Povinné pole. */
.mm-req { color: var(--mm-attention); }

/* Název sloupce v DB, potichu vedle popisku. Zůstává vidět schválně —
   adaptér EmailAgentu i chybové hlášky mluví názvem sloupce, ne popiskem,
   takže při dohledávání chyby musí jít z karty přečíst. */
.mm-colname {
    float: right;
    font-family: var(--mm-font-mono, ui-monospace), monospace;
    font-size: 10.5px;
    color: var(--mm-ink-4);
}

/* Konvence znaménka u pole, kde doklad tiskne opačné než jaké držíme my.
   Visí u pole pořád — smysl je v tom, aby se správná hodnota vůbec
   nezačala „opravovat". */
.mm-sign {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--mm-attention);
    background: var(--mm-attention-bg);
    border-left: 2px solid var(--mm-attention-line);
    padding: 4px 8px;
    border-radius: 0 var(--mm-radius-sm) var(--mm-radius-sm) 0;
}

.mm-list { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; }
.mm-list li { margin: 2px 0; }

/* --- 13b. Karta ke kontrole dokladu -------------------------------------- */
/* Zdroj vlevo, vytěžená pole vpravo. Čte se to jako porovnání dvou sloupců,
   takže obě půlky musí být čitelné — proto 50/50, ne úzký boční panel. */
.mm-review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
             gap: 20px; align-items: start; }

/* Náhled zůstává na místě, když se rolují desítky polí — jinak by kontrolor
   u pole č. 40 doklad na obrazovce vůbec neměl. */
.mm-review__source { position: sticky; top: var(--mm-gutter, 20px); }
.mm-review__frame {
    width: 100%;
    height: min(78vh, 900px);
    border: none;
    display: block;
    background: var(--mm-surface-sunken);
}

.mm-review__img { width: 100%; height: auto; display: block; }

/* Na užším okně se sloupce složí pod sebe a náhled přestane být lepivý —
   jinak by zabral celou obrazovku a k polím by nešlo dorolovat. */
@media (max-width: 1200px) {
    .mm-review { grid-template-columns: minmax(0, 1fr); }
    .mm-review__source { position: static; }
    .mm-review__frame { height: 60vh; }
}

/* --- 14. Ikony ----------------------------------------------------------- */
/* Ikony se kreslí jako inline SVG (stroke, 17 px). Tahle třída jen sjednotí
   velikost a barvu podle textu okolo. */
.mm-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mm-icon--sm { width: 15px; height: 15px; stroke-width: 1.7; }
.mm-icon--xs { width: 13px; height: 13px; stroke-width: 2; }

/* --- 15. Chybový pruh Blazoru ------------------------------------------- */
.blazor-error-boundary {
    padding: 12px 18px;
    border: 1px solid var(--mm-attention-line);
    border-radius: var(--mm-radius);
    background: var(--mm-attention-bg);
    font-size: 12.5px;
    color: var(--mm-attention);
}

.blazor-error-boundary::after { content: "Došlo k chybě."; }

/* --- 16. Užší okna ------------------------------------------------------- */
@media (max-width: 1100px) {
    .mm-grid--aside { grid-template-columns: minmax(0, 1fr); }
    .mm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mm-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    :root { --mm-gutter: 16px; }
    .mm-grid--2, .mm-grid--3, .mm-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .mm-stat-strip { flex-wrap: wrap; }
    .mm-stat-strip > .mm-stat { flex-basis: 50%; }
}

/* --- Přepínač období na kartě ke kontrole ---------------------------------
   Kontrola dokladů je seriál: nad každým číslem se člověk ptá „kolik to bylo
   loni". Dlaždice řady stojí hned pod titulkem karty, aby se za srovnáním
   nemuselo zpátky do seznamu. Rezavá tečka = období ještě čeká na ověření,
   takže je z řady vidět, kolik jí zbývá. */
.mm-periods {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: -6px 0 18px;
}

.mm-periods__label {
    margin-right: 4px;
    color: var(--mm-ink-3);
    font-size: 13px;
}

.mm-period {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--mm-line);
    border-radius: 999px;
    background: var(--mm-surface);
    color: var(--mm-ink-2);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

a.mm-period:hover {
    border-color: var(--mm-action-line);
    background: var(--mm-action-bg);
    color: var(--mm-action);
}

/* Rozečtený doklad musí být poznat na první pohled, ne až po najetí myší. */
.mm-period.is-current {
    border-color: var(--mm-ink);
    background: var(--mm-ink);
    color: var(--mm-surface);
    font-weight: 600;
}

.mm-period.is-pending::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mm-attention-soft);
}

/* --- Popisový seznam (katastr) --------------------------------------------
   Dvojice popisek/hodnota. Grid místo plovoucích `dt`/`dd`, aby se hodnoty
   zarovnaly na sebe i když je popisek dvouřádkový — „Podíl na společných
   částech" se do jednoho řádku nevejde. */
.mm-deflist {
    display: grid;
    grid-template-columns: minmax(9rem, auto) 1fr;
    gap: 6px 14px;
    margin: 0 0 12px;
    font-size: 13px;
}

.mm-deflist dt {
    color: var(--mm-ink-3);
}

.mm-deflist dd {
    margin: 0;
    color: var(--mm-ink);
}

@media (max-width: 560px) {
    .mm-deflist { grid-template-columns: 1fr; gap: 2px 0; }
    .mm-deflist dd { margin-bottom: 8px; }
}

/* --- Přepínač roku u nákladů ----------------------------------------------
   Roky jako odkazy, ne select: stránka je static SSR, rok patří do adresy
   a takhle na něj jde poslat odkaz i se vrátit tlačítkem zpět. */
.mm-years { display: flex; flex-wrap: wrap; gap: 8px; }

.mm-year {
    color: var(--mm-ink-3);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

a.mm-year:hover { color: var(--mm-action); text-decoration: underline; }

.mm-year.is-active { color: var(--mm-ink); font-weight: 600; }

/* --- Formulář dodatku ------------------------------------------------------
   Tři pole na řádek; na úzké obrazovce pod sebe. */
.mm-amend__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.mm-amend .mm-field { margin-bottom: 10px; }

.mm-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
}

/* Volba mezi opravou a přestěhováním. Obě možnosti nesou vysvětlení, protože
   z názvu samotného se rozdíl poznat nedá — a zapisují se opačně. */
.mm-choice {
    display: grid;
    gap: 6px;
    margin: 4px 0 14px;
    padding: 12px;
    border: 1px solid var(--mm-line, #e3e0da);
    border-radius: 8px;
    background: var(--mm-paper, #faf9f7);
}

.mm-choice .mm-check {
    align-items: flex-start;
    margin-bottom: 0;
    line-height: 1.45;
}

.mm-choice .mm-check input { margin-top: 3px; }

@media (max-width: 700px) {
    .mm-amend__row { grid-template-columns: minmax(0, 1fr); }
}

/* --- Rozbalené měsíce v platbách po letech ---------------------------------
   Řádek roku je klikací; měsíce se vsunou pod něj jako odsazené podřádky.
   Vlastní tabulka by se s tou nadřazenou rozešla v šířkách sloupců. */
.mm-row-click { cursor: pointer; }

.mm-row-click:hover { background: var(--mm-surface-sunken); }

.mm-caret { display: inline-block; width: 1em; color: var(--mm-ink-4); }

.mm-submonth td { border-top: none; }

.mm-submonth .mm-month {
    padding-left: 2.2em;
    color: var(--mm-ink-3);
    font-size: 12.5px;
}

.mm-linkbtn {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--mm-action);
    cursor: pointer;
}

/* Součtový řádek vyúčtování — oddělený linkou, ne barvou. */
.mm-row-total td { border-top: 1px solid var(--mm-line-strong); }

/* --- 9. Tisk ---------------------------------------------------------------
   Roční report se tiskne do PDF prohlížečem — knihovna na generování PDF by
   do projektu přibyla kvůli jediné stránce a stejně by musela vzhled kreslit
   podruhé. Tiskne se obsah, ne aplikace: sidebar, topbar a ovládací prvky
   (`.mm-noprint`) jdou pryč, karty ztratí stín a rozdělí se na stránkách tak,
   aby se tabulka nezlomila uprostřed řádku. */
@media print {
    @page { margin: 14mm; }

    .mm-sidebar,
    .mm-topbar,
    .mm-noprint,
    #blazor-error-ui { display: none !important; }

    .mm-app { display: block; min-height: 0; }

    .mm-content { padding: 0; gap: 12px; }

    body, .mm-app { background: #fff; }

    /* Papír na papíru: rám a stín tiskárnu jen stojí, obsah drží nadpis. */
    .mm-card {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }

    .mm-table-wrap { overflow: visible; }

    .mm-table { font-size: 11px; }

    .mm-table tr { break-inside: avoid; }

    .mm-table thead { display: table-header-group; }

    /* Odkazy v tisku nejsou odkazy — modrá barva jen mate. */
    .mm-content a { color: inherit; text-decoration: none; }

    .mm-page-head { break-after: avoid; }
}