/* appbase — design system (mobile-first, tokeny, light+dark z jedné sady proměnných) */

/* self-hosted fonty — žádná CDN, swap proti FOIT */
@font-face {
    font-family: 'Inter';
    src: url('fonts/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/jetbrains-mono-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* =========================================================================
   THEME LAYER — JEDINÉ místo pro re-skin / převzetí HTML šablony.
   Komponenty níž používají VÝHRADNĚ tyhle proměnné (žádné natvrdo barvy),
   takže adopce šablony = přemapování těchto tokenů (nic v komponentách).
   Postup: 1) barvy → --primary + --bg/--surface/--text/--border/--sidenav-*
           2) tvary → --radius*   3) písmo → --font/--mono (+ swap woff2)
   Dark režim jen přepisuje TÉŽE tokeny níž (light+dark z jedné sady).
   ========================================================================= */
:root {
    /* -- brand / akční barva (nejčastější změna při re-skinu) -- */
    --primary: #2563eb;
    --primary-dark: #1d4ed8;      /* hover / aktivní text */
    --primary-tint: #dbeafe;      /* světlé pozadí (aktivní nav, badge) */
    --on-accent: #fff;            /* text na plné barvě (btn/toast) — u světlého accentu přepiš na tmavý */
    /* -- sémantické stavy -- */
    --success: #15803d;
    --success-tint: #e7f4ec;
    --danger: #dc2626;
    --danger-tint: #fdeceb;
    --warn: #d97706;
    --warn-tint: #fdf1e3;
    /* -- plochy a text -- */
    --bg: #f8fafc;                /* pozadí stránky */
    --surface: #ffffff;           /* karty, modály, topbar */
    --field-bg: #f3f6fa;          /* inputy — jemně odlišené od bílé plochy karty */
    --field-border: #cbd5e1;
    --text: #0f172a;              /* nikdy čistá #000 */
    --muted: #64748b;             /* sekundární text */
    --border: #e2e8f0;
    /* -- boční navigace (samostatné tokeny → snese i tmavý sidenav v light režimu) -- */
    --sidenav-bg: #f1f5f9;
    --sidenav-text: var(--text);
    --sidenav-icon: var(--muted);
    --sidenav-hover-bg: var(--surface);
    --sidenav-active-bg: var(--primary-tint);
    --sidenav-active-text: var(--primary-dark);
    /* -- typografie -- */
    --font: 'Inter', Roboto, 'Segoe UI', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    /* -- stíny / tvary / rozměry -- */
    --elev1: 0 1px 2px rgba(16, 24, 40, .05);
    --elev2: 0 2px 6px rgba(16, 24, 40, .07);
    --elev3: 0 12px 32px rgba(16, 24, 40, .14);
    --radius: 6px;
    --radius-sm: 3px;
    --radius-lg: 8px;
    --topbar-h: 56px;
    --sidenav-w: 248px;

    /* -- pohyb (kuchařka animací) -----------------------------------------
       Animace není ozdoba, je to vysvětlení změny. Jediné pravidlo, ze
       kterého se odvodí zbytek: animuj jen to, co změnilo stav, a vždy tak,
       aby bylo poznat ODKUD kam. Poměr palce: odchod ≈ 60 % doby příchodu —
       kdo přijde pomalu a odejde rychle, působí svižně. */
    --mo-instant: 120ms;   /* zpětná vazba na dotek: press, hover, checkbox */
    --mo-fast:    180ms;   /* mizení, dropdowny, tooltipy, toast out */
    --mo-base:    240ms;   /* standardní příchod: dropdown, popover, toast in */
    --mo-slow:    320ms;   /* velké plochy: modal, drawer, bottom sheet */
    --mo-page:    400ms;   /* přechod celé stránky/sekce — výjimečně */
    /* Příchod: ostrý rozjezd, dlouhý doměk (posledních ~40 % dráhy dojíždí
       pomalu — přesně ten pocit, kdy se okno „usadí"). Tohle je default. */
    --mo-enter:    cubic-bezier(0.32, 0.72, 0, 1);
    /* Pružina s mírným přetažením (y1 = 1.3 > 1 → jde kousek ZA cíl a vrátí
       se; to dělá „pop" místo „fade"). Nad 1.5 už to vypadá jako guma. */
    --mo-pop:      cubic-bezier(0.34, 1.30, 0.50, 1);
    /* Odchod: zrychluje pryč, bez doměku — nikdo nekouká na to, co mizí. */
    --mo-exit:     cubic-bezier(0.40, 0.00, 1, 1);
    --mo-standard: cubic-bezier(0.40, 0.00, 0.20, 1);
    /* Závoj: slate-900. Čistě černá je na barevném UI díra a v tmavém režimu
       splyne s pozadím; sytě barevný závoj čte mozek jako stavovou informaci
       a kolidují s ním barvy uvnitř okna. */
    --mo-scrim: rgba(15, 23, 42, 0.55);
    --mo-scrim-blur: 3px;

    /* -- jemné gradienty (velmi lehké — akcent, ne dekorace) -- */
    --grad-from: var(--primary);
    --grad-to: #7c3aed;
    --grad-accent: linear-gradient(135deg, var(--grad-from), var(--grad-to));
    /* Plocha pod obsahem: sotva znatelný nádech značky, ne barevná stránka. */
    --grad-surface: radial-gradient(1200px 420px at 12% -8%, color-mix(in srgb, var(--grad-from) 7%, transparent), transparent 62%);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary: #3b82f6;
        --primary-dark: #2563eb;
        --primary-tint: #1e3a5f;
        --success: #22c55e;
        --success-tint: #113123;
        --danger: #ef4444;
        --danger-tint: #3b1518;
        --warn: #f59e0b;
        --warn-tint: #3a2a10;
        --bg: #0f1117;
        --surface: #161a23;
        --field-bg: #11141c;
        --field-border: #2e3542;
        --text: #e2e8f0;
        --muted: #8b96a7;
        --border: #242b38;
        --sidenav-bg: #12151d;
        --elev1: 0 1px 2px rgba(0, 0, 0, .4);
        --elev2: 0 2px 6px rgba(0, 0, 0, .45);
        --elev3: 0 12px 32px rgba(0, 0, 0, .6);
        /* Závoj se v tmavém režimu ZTMAVUJE, nezesvětluje — a okno se odděluje
           světlejším povrchem a rámečkem, ne stínem (stín je na tmavém pozadí
           neviditelný). */
        --mo-scrim: rgba(2, 6, 23, 0.68);
        --grad-to: #8b5cf6;
        --grad-surface: radial-gradient(1200px 420px at 12% -8%, color-mix(in srgb, var(--grad-from) 13%, transparent), transparent 62%);
    }
}
:root[data-theme="dark"] {
    --primary: #3b82f6; --primary-dark: #2563eb; --primary-tint: #1e3a5f;
    --success: #22c55e; --success-tint: #113123;
    --danger: #ef4444;  --danger-tint: #3b1518;
    --warn: #f59e0b;    --warn-tint: #3a2a10;
    --bg: #0f1117; --surface: #161a23; --field-bg: #11141c; --field-border: #2e3542;
    --text: #e2e8f0; --muted: #8b96a7; --border: #242b38; --sidenav-bg: #12151d;
    --elev1: 0 1px 2px rgba(0,0,0,.4); --elev2: 0 2px 6px rgba(0,0,0,.45); --elev3: 0 12px 32px rgba(0,0,0,.6);
    --mo-scrim: rgba(2, 6, 23, 0.68);
    --grad-to: #8b5cf6;
    --grad-surface: radial-gradient(1200px 420px at 12% -8%, color-mix(in srgb, var(--grad-from) 13%, transparent), transparent 62%);
}

/* ===== base + typografie (rendering standard) ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern', 'liga', 'calt';
    font-optical-sizing: auto;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}
h1 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 14px; }
h2 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 10px; }
a { color: var(--primary); text-decoration: none; }
code, .mono { font-family: var(--mono); font-size: .92em; }
.num, td.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }

/* ===== layout shell ===== */
.topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 90;
    height: var(--topbar-h);
    display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
    padding: 0 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    max-width: 100vw;
}
.topbar-brand { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 800; letter-spacing: -.02em; color: var(--text); font-size: 15px; }
.topbar-brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-brand .dot { width: 10px; height: 10px; border-radius: 3px; background: var(--primary); }
.topbar-brand .brand-logo { height: 28px; width: auto; max-width: 120px; object-fit: contain; display: block; }
.topbar-spacer { flex: 1 1 auto; min-width: 0; }
.topbar-user { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* jméno v hlavičce vede na vlastní profil */
.topbar-user-name { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px;
    border-radius: var(--radius); color: inherit; text-decoration: none; white-space: nowrap; }
.topbar-user-name:hover, .topbar-user-name:focus-visible { background: var(--bg); color: var(--text); }
.topbar-user form { display: flex !important; margin: 0; }
.topbar-action { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.nav-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none; background: none; color: var(--text); font-size: 18px; cursor: pointer; border-radius: var(--radius); }
.nav-toggle:hover { background: var(--bg); }

.shell { padding: calc(var(--topbar-h) + 8px) 8px 24px; max-width: 1200px; margin: 0 auto; }

/* sidenav (desktop) / drawer (mobil) */
.sidenav {
    position: fixed; top: var(--topbar-h); bottom: 0; left: 0; z-index: 80;
    width: min(82vw, 300px);
    background: var(--sidenav-bg);
    border-right: 1px solid var(--border);
    padding: 10px 8px;
    transform: translateX(-102%);
    transition: transform .2s ease;
    overflow-y: auto;
}
.sidenav.open { transform: none; }
.sidenav a {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 0 12px;
    border-radius: var(--radius);
    color: var(--sidenav-text); font-weight: 600; font-size: 14px;
}
.sidenav a i { width: 18px; text-align: center; color: var(--sidenav-icon); }
.sidenav a:hover { background: var(--sidenav-hover-bg); }
.sidenav a.active { background: var(--sidenav-active-bg); color: var(--sidenav-active-text); }
.sidenav a.active i { color: var(--sidenav-active-text); }
.sidenav-off-sep { margin: 10px 12px 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); opacity: .7; }
.sidenav a.nav-off { opacity: .5; }
.sidenav a.nav-off span:first-of-type { text-decoration: line-through; }
.sidenav a.nav-off:hover { opacity: .8; }
.nav-off-badge { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: .05em; padding: 1px 6px; border-radius: 999px; background: var(--danger-tint); color: var(--danger); }

/* podsekce navigace (Nastavení → …) — rozbalí se jen na aktivní větvi */
.subnav { margin: 2px 0 6px; padding-left: 10px; border-left: 2px solid var(--border); }
.sidenav .subnav a.subnav-item { font-size: 13px; font-weight: 600; min-height: 40px; padding: 8px 10px; color: var(--muted); }
.sidenav .subnav a.subnav-item i { font-size: 12px; }
.sidenav .subnav a.subnav-item:hover { color: var(--sidenav-text); }
.sidenav .subnav a.subnav-item.active { background: var(--sidenav-active-bg); color: var(--sidenav-active-text); font-weight: 700; }
.sidenav .subnav a.subnav-item.active i { color: var(--sidenav-active-text); }
/* přepínač sekcí uvnitř stránky — jen tam, kde není vidět sidenav (mobil/tablet) */
.settings-switch { margin-bottom: 12px; }
.settings-switch select { width: 100%; }
@media (min-width: 1024px) { .settings-switch { display: none; } }
.module-off-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 14px; border-radius: var(--radius); background: var(--warn-tint); border: 1px solid var(--warn); color: var(--text); font-size: 13px; font-weight: 600; }
.module-off-banner i { color: var(--warn); }
.module-off-banner span { flex: 1; min-width: 160px; }
.nav-backdrop { position: fixed; inset: 0; z-index: 75; background: rgba(15, 23, 42, .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
.nav-backdrop.open { opacity: 1; pointer-events: auto; }

@media (min-width: 1024px) {
    .sidenav { transform: none; width: var(--sidenav-w); }
    .nav-backdrop { display: none; }
    .nav-toggle { display: none; }
    .shell { margin-left: var(--sidenav-w); max-width: none; padding-left: 20px; padding-right: 20px; }
}

.breadcrumbs { font-size: 12px; color: var(--muted); margin: 2px 2px 12px; white-space: nowrap; overflow-x: auto; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--primary); }

/* ===== karty ===== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev1);
    padding: 14px;
    margin-bottom: 10px;
}
.card h2 { display: flex; align-items: center; gap: 8px; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
@media (min-width: 720px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px; box-shadow: var(--elev1); }
.stat .v { font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 12px; color: var(--muted); margin-top: 2px; }
.stat.warn .v { color: var(--warn); }
.stat.danger .v { color: var(--danger); }

/* ===== formuláře ===== */
.field { margin-bottom: 14px; }
.flabel { display: block; font-size: 13px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; }
.flabel .req { color: var(--danger); margin-left: 3px; }
.fhint { font-size: 12px; color: var(--muted); margin-top: 5px; }
.field-err { display: none; font-size: 12.5px; color: var(--danger); margin-top: 5px; }
.field.invalid .field-err { display: block; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger); }
input[type=text], input[type=password], input[type=email], input[type=url], input[type=search],
input[type=number], input[type=date], select, textarea {
    width: 100%;
    min-height: 48px;
    font-size: 16px; /* iOS zoom prevence */
    font-family: var(--font);
    color: var(--text);
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    padding: 10px 12px;
}
input[type=file] {
    width: 100%; min-height: 48px; padding: 12px;
    font-size: 14px; color: var(--text);
    background: var(--field-bg);
    border: 1px dashed var(--field-border); border-radius: var(--radius);
    cursor: pointer;
}
input[type=file]::file-selector-button {
    min-height: 40px; margin-right: 12px; padding: 8px 14px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text); font-weight: 700; cursor: pointer;
}
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--muted); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { padding-right: 44px; }
.pw-eye { position: absolute; right: 2px; top: 0; bottom: 0; width: 40px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.pw-eye:hover { color: var(--primary); }

/* ===== tlačítka ===== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font); font-size: 14.5px; font-weight: 700; letter-spacing: -.01em;
    cursor: pointer;
    background: var(--surface); color: var(--text); border-color: var(--field-border);
}
.btn:hover { border-color: var(--primary); }
.btn:disabled, .btn.is-loading { opacity: .6; cursor: not-allowed; }
.btn-green { background: var(--success); border-color: var(--success); color: var(--on-accent); }
.btn-green:hover { filter: brightness(1.06); border-color: var(--success); }
.btn-blue { background: var(--primary); border-color: var(--primary); color: var(--on-accent); }
.btn-blue:hover { filter: brightness(1.06); border-color: var(--primary); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-accent); }
.btn-gray { background: var(--bg); color: var(--text); border-color: var(--border); }
.btn-block { width: 100%; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* desktop = kompaktnější (myš, ne prst) */
@media (min-width: 1024px) {
    input[type=text], input[type=password], input[type=email], input[type=url], input[type=search],
    input[type=number], input[type=date], select, textarea { min-height: 38px; font-size: 14px; padding: 7px 11px; }
    .btn { min-height: 38px; padding: 7px 14px; font-size: 13.5px; }
}

/* mobil/tablet = prst: touch targety min 44px (přebije i inline min-height:36px) */
@media (max-width: 1023px) {
    .btn { min-height: 44px !important; }
    .kebab > button { min-width: 44px; min-height: 44px; }
    /* akční tlačítka v obsahu na plnou šířku (topbar/patička/kebab zůstávají inline) */
    .shell .btn { width: 100%; }
    .shell .kebab > button, .shell .kebab-menu .btn, .shell .pager .btn, .shell .btn-inline { width: auto; }
}

/* ===== technická patička — audit / úložiště / přenos / api docs / god / workspaces ===== */
/* utlumené odkazy (DESIGN §12): malý font, bez podtržení, max pár řádků, na střed */
.app-footer {
    margin-top: 34px;
    padding: 16px 8px calc(env(safe-area-inset-bottom) + 14px);
    border-top: 1px solid var(--border);
    display: flex; flex-wrap: wrap; gap: 2px 18px; justify-content: center;
}
.app-footer a {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 0 4px;
    font-size: 12px; color: var(--muted); text-decoration: none;
}
.app-footer a:hover { color: var(--text); }
.app-footer a.active { color: var(--primary); font-weight: 700; }
.app-footer a i { font-size: 12px; opacity: .85; }

/* ===== badge / pill ===== */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.badge-ok { background: var(--success-tint); color: var(--success); }
.badge-warn { background: var(--warn-tint); color: var(--warn); }
.badge-danger { background: var(--danger-tint); color: var(--danger); }
.badge-info { background: var(--primary-tint); color: var(--primary-dark); }

/* ===== toast ===== */
.toast-wrap {
    position: fixed; top: calc(var(--topbar-h) + 10px); left: 50%; transform: translateX(-50%);
    z-index: 130; display: flex; flex-direction: column; gap: 8px;
    width: max-content; max-width: calc(100vw - 24px); pointer-events: none;
}
.toast {
    display: flex; align-items: center; gap: 9px;
    background: var(--text); color: var(--bg);
    padding: 11px 16px; border-radius: var(--radius-lg);
    font-size: 13.5px; font-weight: 600; box-shadow: var(--elev3);
    animation: toastIn .2s ease; pointer-events: auto; cursor: pointer;
}
.toast-err { background: var(--danger); color: var(--on-accent); }
.toast-ok { background: var(--success); color: var(--on-accent); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ===== modal =====
   Závoj a okno jsou DVA prvky se dvěma nezávislými animacemi. Sloučené do
   jednoho se buď zvětšuje závoj (blbě), nebo okno nemůže mít vlastní křivku.
   Na desktopu okno doskočí ze středu, na mobilu vyjede zespodu — je to rozdíl
   mezi macOS dialogem a iOS sheetem a lidi ho podvědomě čekají. */
.modal-bg {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 110;
    background: var(--mo-scrim);
    backdrop-filter: blur(var(--mo-scrim-blur)) saturate(.85);
    -webkit-backdrop-filter: blur(var(--mo-scrim-blur)) saturate(.85);
}
.modal-bg.open { display: block; animation: moScrimIn var(--mo-base) linear both; }
.modal-bg.is-closing { animation: moScrimIn var(--mo-fast) var(--mo-exit) reverse both; }

.modal {
    display: none; position: fixed; z-index: 120;
    inset: 0;                     /* mobil: full-screen */
    background: var(--surface);
    padding: 16px;
    overflow-y: auto;
    /* dvh, ne vh — jinak okno leze pod lištu mobilního prohlížeče */
    height: 100dvh;
    max-height: 100dvh;
}
/* Výchozí je blokové rolování — starší okna nemají .modal-body/.modal-foot
   a flex kontejner by jim přeskládal obsah (tlačítko Uložit se pak na mobilu
   ocitne pod ohybem). Sloupcový layout s přišpendlenou patičkou se zapíná JEN
   tam, kde okno novou strukturu opravdu má. */
.modal.open { display: block; animation: moSheetIn var(--mo-slow) var(--mo-enter) both; }
.modal.open:has(.modal-body) { display: flex; flex-direction: column; }
.modal.is-closing { animation: moSheetIn var(--mo-fast) var(--mo-exit) reverse both; }

@keyframes moScrimIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes moSheetIn  { from { transform: translateY(100%) } to { transform: translateY(0) } }
@keyframes moDialogIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex: 0 0 auto; }
.modal-head h2, .modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
/* Tělo roluje samo, hlavička a patička drží — jinak se na mobilu odroluje
   tlačítko Uložit mimo obrazovku a vypadá to, že tam není. */
.modal-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; margin: 0 -2px; padding: 0 2px; }
.modal-foot {
    flex: 0 0 auto; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
    padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--border);
}
.modal-x { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--muted); font-size: 18px; cursor: pointer; border-radius: var(--radius); transition: background var(--mo-instant) var(--mo-standard), color var(--mo-instant) var(--mo-standard); }
.modal-x:hover { background: var(--bg); color: var(--danger); }

@media (max-width: 767px) {
    /* U full-screen okna na mobilu není pozadí vidět — rozostření by jen
       stálo snímky na slabších telefonech. */
    .modal-bg { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (min-width: 768px) {
    .modal {
        inset: auto;
        top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: min(92vw, 520px); height: auto; max-height: 86vh;
        border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--elev3);
    }
    .modal.open { animation: moDialogIn var(--mo-slow) var(--mo-enter) both; }
    .modal.is-closing { animation: moDialogIn var(--mo-fast) var(--mo-exit) reverse both; }
    .modal-lg { width: min(94vw, 760px); }
}
/* Na tmavém pozadí je stín neviditelný — okno se odděluje rámečkem. */
:root[data-theme="dark"] .modal { border-color: rgba(255, 255, 255, .09); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .modal { border-color: rgba(255, 255, 255, .09); }
}
body.modal-open { overflow: hidden; }

/* ===== skeleton ===== */
.ab-skel-row {
    /* width/flex je nutnost, ne kosmetika: v buňce tabulky se na mobilu
       skeleton ocitne jako flex položka a bez šířky se smrskne na nulu —
       tedy neviditelné „načítání", což je horší než žádné */
    width: 100%;
    flex: 1 1 auto;
    height: 56px; border-radius: 12px; margin-bottom: 8px;
    background: linear-gradient(90deg, var(--border) 25%, var(--bg) 37%, var(--border) 63%);
    background-size: 400% 100%;
    animation: abShimmer 1.2s ease-in-out infinite;
}
.ab-skel-row.sm { height: 40px; }
@keyframes abShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ===== empty state ===== */
.ab-empty { text-align: center; color: var(--muted); padding: 28px 16px; font-size: 13px; }
.ab-empty i { font-size: 28px; display: block; margin-bottom: 10px; opacity: .45; }

/* ===== tabulky (desktop) → data řádky ===== */
.ab-tablewrap { overflow-x: auto; }
table.ab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.ab th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
table.ab td { padding: 10px; border-bottom: 1px solid var(--border); }
/* mobil: tabulka → karty přes data-label */
@media (max-width: 767px) {
    .ab-tablewrap { max-width: 100%; overflow-x: visible; }
    table.ab thead { display: none; }
    table.ab, table.ab tbody, table.ab tr, table.ab td {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    table.ab tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 8px; padding: 6px 4px; }
    table.ab td {
        border: none;
        padding: 6px 10px;
        display: flex;
        gap: 10px;
        align-items: baseline;
        overflow-wrap: anywhere;
    }
    table.ab td > * { min-width: 0; max-width: 100%; }
    table.ab code { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
    table.ab td[data-label]::before { content: attr(data-label); flex: 0 0 38%; font-size: 11.5px; color: var(--muted); font-weight: 700; }
    table.ab td[data-label=""]::before { display: none; }
}

/* ===== pager ===== */
.pager { display: flex; justify-content: center; align-items: center; gap: 4px; flex-wrap: wrap; margin: 16px 0 4px; }
.pager-btn, .pager-num {
    min-height: 40px; min-width: 40px; padding: 0 12px;
    border: 1px solid var(--field-border); background: var(--surface); border-radius: var(--radius-lg);
    font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.pager-btn:hover:not([disabled]), .pager-num:hover { border-color: var(--primary); }
.pager-btn[disabled] { opacity: .4; cursor: default; }
.pager-num.active { background: var(--primary); color: var(--on-accent); border-color: var(--primary); }
.pager-gap { color: var(--muted); padding: 0 2px; }
@media (hover: none), (max-width: 768px) { .pager-btn, .pager-num { min-height: 48px; min-width: 48px; } }

/* ===== kebab ===== */
.kebab { position: relative; display: inline-block; }
.kebab > button { width: 44px; height: 44px; border: none; background: none; color: var(--muted); font-size: 16px; cursor: pointer; border-radius: var(--radius); }
.kebab > button:hover { background: var(--bg); color: var(--text); }
.kebab-menu { display: none; z-index: 100; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev3); padding: 5px; min-width: 200px; }
.kebab.open .kebab-menu { display: block; }
.kebab-menu a, .kebab-menu button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 0 12px; border: none; background: none; border-radius: var(--radius); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left; }
.kebab-menu a:hover, .kebab-menu button:hover { background: var(--bg); }
.kebab-menu .danger { color: var(--danger); }

/* ===== login / setup (samostatné stránky) ===== */
.auth-page { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--bg); }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--elev2); padding: 26px 22px; }
.auth-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; letter-spacing: -.02em; margin-bottom: 18px; }
.auth-brand .dot { width: 12px; height: 12px; border-radius: 4px; background: var(--primary); }
.auth-err { background: var(--danger-tint); color: var(--danger); border-radius: var(--radius); padding: 10px 12px; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
/* auth links (forgot / back / request-new) — comfortable tap target ≥44px on touch */
.auth-card p > a { display: inline-block; padding: 14px 10px; line-height: 1.25; text-decoration: none; }
.auth-card p > a:hover { text-decoration: underline; }

.msg-ok { background: var(--success-tint); color: var(--success); border-radius: var(--radius); padding: 10px 12px; font-size: 13px; font-weight: 600; margin-bottom: 14px; }

/* ===== workspace switcher (topbar) ===== */
.ws-switch { position: relative; min-width: 0; flex: 0 1 auto; }
.ws-switch-btn { min-height: 36px; padding: 5px 10px; font-size: 12.5px; max-width: 180px; }
.ws-switch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }
.ws-switch-menu {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 100;
    min-width: 220px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--elev3); padding: 5px;
}
.ws-switch-menu[hidden] { display: none; }
.ws-switch-item {
    display: flex; align-items: center; gap: 9px; width: 100%;
    min-height: 44px; padding: 0 12px; border: none; background: none;
    border-radius: var(--radius); color: var(--text); font-size: 13.5px; font-weight: 600;
    cursor: pointer; text-align: left;
}
.ws-switch-item:hover:not([disabled]) { background: var(--bg); }
.ws-switch-item i { width: 16px; text-align: center; color: var(--muted); }
.ws-switch-item.on { color: var(--primary-dark); }
.ws-switch-item.on i { color: var(--primary-dark); }
.ws-switch-item[disabled] { cursor: default; }
@media (max-width: 767px) { .ws-switch-name { max-width: 70px; } }

/* ===== Ctrl+K palette ===== */
.cmdk {
    display: none; position: fixed; z-index: 140;
    top: 12vh; left: 50%; transform: translateX(-50%);
    width: min(94vw, 560px);
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--elev3); overflow: hidden;
}
.cmdk.open { display: block; }
.cmdk input {
    width: 100%; border: none; border-bottom: 1px solid var(--border); border-radius: 0;
    min-height: 54px; font-size: 16px; padding: 14px 16px; background: var(--surface); color: var(--text);
}
.cmdk input:focus { box-shadow: none; border-color: var(--border); }
.cmdk-list { max-height: 320px; overflow-y: auto; padding: 6px; }
.cmdk-item {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 0 12px; border-radius: var(--radius);
    color: var(--text); font-size: 14px; font-weight: 600;
}
.cmdk-item i { width: 18px; text-align: center; color: var(--muted); }
.cmdk-item:hover, .cmdk-item.on { background: var(--primary-tint); color: var(--primary-dark); }
.cmdk-item:hover i, .cmdk-item.on i { color: var(--primary-dark); }
.cmdk-path { margin-left: auto; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.cmdk-tag-action { text-transform: uppercase; letter-spacing: .05em; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--primary-tint); color: var(--primary-dark); }
.cmdk-hint-kbd { margin-left: 6px; font-size: 10.5px; border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--muted); }
/* mobil: Ctrl+K je klávesová zkratka (bez klávesnice zbytečná) → skryj tlačítko,
   ať se topbar nepřeplní (DESIGN pravidlo 2 — minimální hlavička) */
@media (max-width: 767px) { .cmdk-hint-kbd { display: none; } .cmdk { top: 8vh; } .cmdk-hint { display: none; } }
/* Mobilní topbar: jeden kompaktní řádek, shodné akční ikony a žádný vodorovný
   přesah ani na 320px displeji. Plné názvy zůstávají v title/aria popiscích. */
@media (max-width: 767px) {
    /* 56px podle Material app baru — do nižší lišty se nevejde dotykový cíl 44px
       a hlavička byla jediné místo v appce, kde se na to rezignovalo */
    :root { --topbar-h: 56px; }
    .topbar {
        width: 100%;
        gap: 5px;
        padding: 0 max(6px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left));
        overflow: visible;
    }
    .nav-toggle,
    .topbar-action {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px !important;
        padding: 0 !important;
        flex: 0 0 44px;
        line-height: 1;
    }
    .nav-toggle { font-size: 16px; }
    .topbar-action i { width: 16px; text-align: center; }
    .topbar-user-login { display: none; }
    .topbar-user-name { min-width: 44px; justify-content: center; padding: 0; }
    .topbar-user { gap: 5px; }
    .topbar-brand {
        max-width: 80px;
        min-width: 10px;
        gap: 6px;
        overflow: hidden;
        white-space: nowrap;
        flex: 0 1 auto;
    }
    .topbar-brand .brand-logo { height: 24px; max-width: 72px; flex: 0 1 auto; }
    .topbar-brand .dot { flex: 0 0 10px; }
    .ws-switch { max-width: 104px; }
    .ws-switch-btn {
        width: auto;
        max-width: 104px;
        height: 44px;
        min-height: 44px !important;
        padding: 0 8px !important;
        gap: 6px;
        white-space: nowrap;
    }
    .ws-switch-btn > i { flex: 0 0 auto; }
    .ws-switch-name { max-width: 54px; }
    .ws-switch-menu {
        left: min(0px, calc(100vw - 292px));
        min-width: min(280px, calc(100vw - 12px));
        max-width: calc(100vw - 12px);
    }
}
@media (max-width: 420px) {
    .topbar-brand-name { display: none; }
    .topbar-brand { max-width: 72px; }
    .topbar-brand:has(.dot) { width: 10px; flex: 0 0 10px; }
    .topbar-brand .brand-logo { max-width: 64px; }
    .ws-switch { max-width: 100px; }
    .ws-switch-btn { max-width: 100px; }
    .ws-switch-name { max-width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .ab-skel-row, .toast, .sidenav, .nav-backdrop { animation: none !important; transition: none !important; }
}

/* ===== načítání stránky =====
   Klik na odkaz znamená, že server něco počítá. Bez zpětné vazby to vypadá,
   že se nic nestalo, a člověk klikne podruhé. Proto tenký pruh nahoře a lehké
   ztlumení obsahu — obsah se ale NEMAŽE, dokud nová stránka nedorazí. Prázdná
   bílá plocha je horší než chvíli stará data. */
#abNavBar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 300;
    background: var(--accent, #2563eb);
    box-shadow: 0 0 8px rgba(37, 99, 235, .5);
    transition: width .25s ease, opacity .3s ease;
    opacity: 0;
    pointer-events: none;
}

#abNavBar.on { opacity: 1; }

body.is-navigating .shell {
    opacity: .55;
    transition: opacity .18s ease;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    #abNavBar { transition: none; }
    body.is-navigating .shell { transition: none; }
}

/* Rozbalovací skupiny v levém menu.
   U instalace s dvěma desítkami sekcí je plochý seznam delší než obsah
   stránky a hledá se v něm očima. Skupina s aktuální stránkou je vždycky
   otevřená, ostatní si pamatují, jak si je člověk nechal. */
.sidenav .navgroup {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 44px; padding: 0 12px; margin: 2px 0 0;
    border: 0; background: none; cursor: pointer; text-align: left;
    border-radius: var(--radius);
    color: var(--muted); font-weight: 800; font-size: 12px;
    letter-spacing: .04em; text-transform: uppercase;
    font-family: inherit;
}
.sidenav .navgroup:hover { background: var(--sidenav-hover-bg); color: var(--sidenav-text); }
.sidenav .navgroup i { width: 18px; text-align: center; color: var(--sidenav-icon); font-size: 13px; }
.sidenav .navgroup span { flex: 1 1 auto; min-width: 0; }
.sidenav .navgroup .navgroup-caret {
    width: auto; font-size: 11px; opacity: .7;
    transition: transform .15s ease;
}
.sidenav .navgroup.open .navgroup-caret { transform: rotate(180deg); }
/* Zavřená skupina nesmí zabírat místo ani chytat kliknutí */
.sidenav .navgroup-items { display: none; padding-left: 10px; border-left: 2px solid var(--border); margin: 0 0 4px 12px; }
.sidenav .navgroup-items.open { display: block; }
.sidenav .navgroup-items a { font-size: 13px; min-height: 40px; }


/* logo z vygenerované identity (inline SVG, sanitizované při ukládání) */
.brand-logo-svg { width: 26px; height: 26px; display: block; flex: 0 0 26px; }
.brand-logo-svg svg { width: 100%; height: 100%; display: block; }

/* ===== odznak uživatele + jeho menu (vpravo nahoře) ===== */
.usermenu-wrap { position: relative; flex: 0 0 auto; }
.userbadge {
    display: flex; align-items: center; gap: 8px;
    min-height: 36px; padding: 3px 8px 3px 3px;
    background: none; border: 1px solid transparent; border-radius: 999px;
    color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background var(--mo-instant) var(--mo-standard), border-color var(--mo-instant) var(--mo-standard);
}
.userbadge:hover, .userbadge[aria-expanded="true"] { background: var(--bg); border-color: var(--border); }
.userbadge-av {
    width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
    background: var(--grad-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
.userbadge-av-lg { width: 40px; height: 40px; flex: 0 0 40px; font-size: 15px; }
.userbadge-caret { font-size: 10px; color: var(--muted); }
/* Na mobilu zbyde jen kolečko — jméno by ukrojilo šířku, kterou nemáme. */
@media (max-width: 640px) { .userbadge-name, .userbadge-caret { display: none; } }

.usermenu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 130;
    min-width: 268px; max-width: min(92vw, 320px);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--elev3);
    padding: 6px; overflow: hidden;
}
.usermenu[hidden] { display: none; }
.usermenu-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.usermenu-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.usermenu-who strong { font-size: 13.5px; }
.usermenu-who .muted { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu-who .badge { align-self: flex-start; margin-top: 3px; }
.usermenu-sec { padding: 2px 0; }
.usermenu-sec + .usermenu-sec { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; }
.usermenu-sec-label {
    font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); padding: 4px 12px 5px;
}
.usermenu-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 48px; padding: 6px 12px;
    border: none; background: none; border-radius: var(--radius);
    color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600;
    text-align: left; cursor: pointer;
    transition: background var(--mo-instant) var(--mo-standard);
}
.usermenu-item:hover { background: var(--bg); }
.usermenu-item.danger { color: var(--danger); }
.usermenu-item > i { width: 18px; flex: 0 0 18px; text-align: center; color: var(--muted); }
.usermenu-item.danger > i { color: var(--danger); }
.usermenu-item-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.usermenu-item-txt small { font-size: 11.5px; font-weight: 500; color: var(--muted); line-height: 1.35; }

/* ===== přihlášení tlačítkem (SSO) na login stránce ===== */
.login-sep { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--muted); font-size: 12px; }
.login-sep::before, .login-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.login-sso { width: 100%; justify-content: center; min-height: 48px; }
.login-sso-alt { display: block; text-align: center; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.login-sso-alt:hover { color: var(--primary); }

/* Dočasné zvýraznění pole, na které skočil odkaz z Ctrl+K. */
.st-jump {
    animation: stJump 2.2s var(--mo-standard) both;
    border-radius: var(--radius);
}
@keyframes stJump {
    0%, 70% { box-shadow: 0 0 0 3px var(--primary-tint); }
    100%    { box-shadow: 0 0 0 3px transparent; }
}

/* ===== výzva k nastavení 2FA (režim warn / enforce) ===== */
.totp-notice {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0 0 14px; padding: 12px 14px;
    background: var(--warn-tint); border: 1px solid var(--warn);
    border-radius: var(--radius-lg); font-size: 13.5px; line-height: 1.45;
}
.totp-notice.is-hard { background: var(--danger-tint); border-color: var(--danger); }
.totp-notice > i { color: var(--warn); font-size: 18px; flex: 0 0 auto; }
.totp-notice.is-hard > i { color: var(--danger); }
.totp-notice-txt { flex: 1 1 220px; min-width: 0; }
.totp-notice-txt strong { display: block; }

/* ===== Ctrl+K: řádek se sekcí a zdůvodněním od AI ===== */
.cmdk-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.cmdk-txt small { font-size: 11.5px; font-weight: 500; color: var(--muted); line-height: 1.35; }
.cmdk-item.on .cmdk-txt small { color: inherit; opacity: .8; }
.cmdk-ai-note {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 11px 13px; margin: 6px; border-radius: var(--radius);
    background: var(--primary-tint); color: var(--primary-dark);
    font-size: 12.5px; line-height: 1.5;
}
.cmdk-ai-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: calc(100% - 12px); margin: 0 6px 6px; min-height: 48px;
    border: 1px dashed var(--border); border-radius: var(--radius);
    background: none; color: var(--primary); font: inherit; font-size: 13.5px; font-weight: 700;
    cursor: pointer;
    transition: background var(--mo-instant) var(--mo-standard), border-color var(--mo-instant) var(--mo-standard);
}
.cmdk-ai-btn:hover { background: var(--primary-tint); border-color: var(--primary); }

/* =========================================================================
   POHYB — společná vrstva (kuchařka animací)
   Animuje se jen `transform` a `opacity`. Výjimky, které layout nespouštějí,
   jsou `grid-template-rows` (rozbalování) a `max-height` k nule (mizející
   řádek) — obojí vědomě, ne ze zvyku.
   ========================================================================= */

/* --- tlačítka: hmatová odezva. 0.97 je maximum; 0.9 vypadá jako hračka.
       Nikdy `transition: all` — zachytilo by to i width/height při přepnutí do
       loading stavu a tlačítko by se roztahovalo jako harmonika. --- */
.btn {
    transition: transform var(--mo-instant) var(--mo-standard),
                background-color var(--mo-instant) var(--mo-standard),
                border-color var(--mo-instant) var(--mo-standard),
                color var(--mo-instant) var(--mo-standard),
                box-shadow var(--mo-instant) var(--mo-standard);
}
.btn:active:not([disabled]) { transform: scale(.97); }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none !important; }
/* Šířka se nesmí měnit podle textu — „Uložit" → „Ukládám…" je jiný počet
   znaků a všechno napravo od tlačítka by poskočilo. Vypadá to jako chyba. */
.btn-green, .btn-blue, .btn-danger { min-width: 8.5rem; justify-content: center; }
@media (max-width: 480px) { .btn-green, .btn-blue, .btn-danger { min-width: 0; } }

/* --- dropdown / kontextové menu: musí vyrůst Z MÍSTA, kde se kliklo.
       Menu, které se rozvine ze špatného rohu, působí, jako by patřilo
       k něčemu jinému. --- */
@keyframes moMenuIn {
    from { opacity: 0; transform: scale(.96) translateY(-4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.kebab.open .kebab-menu,
.ws-switch-menu:not([hidden]),
.usermenu:not([hidden]) {
    transform-origin: top right;
    animation: moMenuIn var(--mo-fast) var(--mo-enter) both;
}

/* --- toast: přiletí a odejde RYCHLEJI, než přišel. Nikdy pružina na odchod. --- */
.toast { animation: moToastIn var(--mo-base) var(--mo-pop) both; }
.toast.is-hiding { animation: moToastIn var(--mo-fast) var(--mo-exit) reverse both; }
@keyframes moToastIn {
    from { opacity: 0; transform: translateY(16px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- rozbalování na „auto" výšku. `height: auto` se animovat nedá a
       `max-height` s odhadem je vždycky buď useknuté, nebo se zasekne.
       `0fr → 1fr` funguje pro libovolně vysoký obsah bez JS a bez měření. --- */
.collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--mo-base) var(--mo-standard);
}
.collapse.is-open { grid-template-rows: 1fr; }
.collapse > * { overflow: hidden; min-height: 0; }   /* obě jsou povinné */
/* Šipka se otáčí zvlášť, ať nečeká na obsah. */
.navgroup-caret, .collapse-arrow { transition: transform var(--mo-fast) var(--mo-standard); }
.navgroup.open .navgroup-caret { transform: rotate(180deg); }

/* --- nová položka v seznamu. Animovat SMÍ jen opravdu nová položka; historie
       a první naplnění ne, jinak celý seznam při každém odrolování „zabliká". --- */
.item-in {
    animation: moItemIn var(--mo-slow) var(--mo-pop) both;
    transform-origin: bottom left;
    will-change: transform, opacity;   /* jen po dobu animace — třída se sundá */
}
@keyframes moItemIn {
    from { opacity: 0; transform: translateY(12px) scale(.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- mizející řádek: nesmí jen zmizet, okolí by poskočilo. --- */
.row-out { animation: moRowOut var(--mo-fast) var(--mo-exit) both; overflow: hidden; }
@keyframes moRowOut {
    from { opacity: 1; transform: translateX(0);     max-height: 200px; }
    to   { opacity: 0; transform: translateX(-24px); max-height: 0; padding-block: 0; }
}

/* --- Ctrl+K paleta: doskočí jako dialog, ale kotví se NAHOŘE (`top: 12vh`),
       ne na střed. Sdílená moDialogIn končí na `translate(-50%, -50%)` a s
       `both` ten posun zůstane i po doběhnutí — paleta pak visela o půl své
       výšky nad viewportem a na velkém monitoru (dlouhý seznam = vyšší panel)
       jí uřízlo vstupní pole. Vlastní keyframe posouvá jen vodorovně. --- */
@keyframes moCmdkIn {
    from { opacity: 0; transform: translateX(-50%) scale(.96); }
    to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
.cmdk.open { animation: moCmdkIn var(--mo-base) var(--mo-enter) both; }

/* --- velmi lehký gradient na ploše stránky. Nádech značky, ne barevná
       stránka: v světlém režimu ~7 %, v tmavém ~13 % (na tmavém pozadí je
       stejná sytost méně vidět). Nepřipojuje se na body, ale na plochu pod
       obsahem, aby neinterferoval s fixní hlavičkou. --- */
body { background-image: var(--grad-surface); background-attachment: fixed; background-repeat: no-repeat; }
/* Akcentní gradient pro prvky, které ho mají nést vědomě (badge, hero, dot). */
.grad-accent { background: var(--grad-accent); color: #fff; }
.topbar-brand .dot { background: var(--grad-accent); }

/* =========================================================================
   prefers-reduced-motion — POVINNÉ, ne hezké-mít.
   Animaci nerušíme úplně (pak věci naskakují a je to zase nečitelné) —
   zahodíme POHYB a necháme prolnutí.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .modal, .modal-bg, .toast, .item-in, .cmdk,
    .kebab.open .kebab-menu, .ws-switch-menu:not([hidden]), .usermenu:not([hidden]) {
        animation: moFadeOnly 140ms ease-out both !important;
    }
    @keyframes moFadeOnly { from { opacity: 0 } to { opacity: 1 } }
    .modal-bg { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(15, 23, 42, .7); }
    body { background-image: none; }
}