/* ==================================================================
   iRX Portál – dizajnový systém (spoločný s kanceláriou)
   © iRX-Solutions, spol. s r.o.
   ================================================================== */

/* ---------- 1. Tokeny ---------- */
/*
 * Firemná paleta (Brand identity redesign):
 *   Midnight Navy   #07121D   hsl(210 61% 7%)    – nosná tmavá
 *   Steel Blue      #4A5A6A   hsl(210 18% 35%)   – druhá farba, línie a odznaky
 *   Champagne Gold  #AC8D67   hsl(33 29% 54%)    – akcent
 *   Soft Ivory      #D9CFC0   hsl(36 25% 80%)    – svetlá neutrálna
 *   Charcoal        #262625   hsl(60 2% 15%)     – teplá tmavá
 *
 * Stavba: chladné modré tóny (odtieň 210) držia štruktúru, teplé zlato
 * a slonovina (33–36) nesú pozornosť. Preto sa nikde nemieša modrofialová
 * z pôvodného návrhu – tá do tejto identity nepatrí.
 */
:root {
    /* akcent – prepisuje sa v nastaveniach; predvolene champagne gold */
    --a-h: 33; --a-s: 29%; --a-l: 54%;

    --accent:        hsl(var(--a-h) var(--a-s) var(--a-l));
    --accent-soft:   hsl(var(--a-h) var(--a-s) var(--a-l) / .16);
    --accent-softer: hsl(var(--a-h) var(--a-s) var(--a-l) / .08);
    --accent-line:   hsl(var(--a-h) var(--a-s) var(--a-l) / .36);
    --accent-strong: hsl(var(--a-h) var(--a-s) calc(var(--a-l) + 8%));
    /* na zlate je čitateľná tmavá, nie biela – biely text má na ňom kontrast 2,9:1 */
    --accent-fg:     hsl(210 61% 8%);

    /* firemné odtiene dostupné aj priamo */
    --navy:   #07121D;
    --steel:  #4A5A6A;
    --gold:   #AC8D67;
    --ivory:  #D9CFC0;
    --coal:   #262625;

    --ok:    hsl(162 46% 44%);
    --warn:  hsl(28 78% 56%);
    --dang:  hsl(4 62% 56%);
    --info:  hsl(205 42% 58%);

    --r-xs: .5rem; --r-sm: .6875rem; --r-md: .875rem; --r-lg: 1.25rem; --r-xl: 1.75rem; --r-full: 999px;

    --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.375rem; --sp-6: 1.875rem; --sp-7: 2.75rem;

    --ease: cubic-bezier(.22, 1, .36, 1);
    --dur: .22s;

    --sidebar-w: 16.75rem;
    --topbar-h: 4.25rem;

    /* Bezpečné zóny telefónu (výrez hore, domovský indikátor dole). V režime
       samostatnej aplikácie je obsah pod nimi – preto sa musia rezervovať.
       Cez premennú, nie priamo env(), aby sa dali overiť aj v prehliadači. */
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);

    --font: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ---------- tmavá téma (predvolená) ---------- */
/* Postavená na Midnight Navy. Plochy sú o pár stupňov svetlejšie, aby vznikla
   hĺbka ako na firemnej vizualizácii; text ťahá do slonoviny, nie do bielej. */
:root,
[data-theme="dark"] {
    --bg-0: #040A11;
    --bg-1: #07121D;
    --bg-2: #0B1A28;
    --surface:      hsl(210 42% 12% / .74);
    --surface-solid:#0D1B29;
    --surface-2:    hsl(210 34% 17% / .62);
    --surface-hover: hsl(210 30% 24% / .58);
    --line:      hsl(210 24% 66% / .14);
    --line-soft: hsl(210 24% 66% / .07);
    --line-strong: hsl(210 22% 72% / .24);
    --tx-1: hsl(36 28% 94%);
    --tx-2: hsl(210 14% 74%);
    --tx-3: hsl(210 12% 55%);
    --shadow-sm: 0 1px 2px hsl(210 60% 2% / .55);
    --shadow-md: 0 10px 30px -12px hsl(210 70% 2% / .78);
    --shadow-lg: 0 30px 70px -25px hsl(210 70% 1% / .92);
    --glow: 0 0 0 1px hsl(36 40% 92% / .045) inset;
    color-scheme: dark;
}

/* ---------- svetlá téma ---------- */
/* Postavená na Soft Ivory – teplý papier namiesto studenej modrobielej.
   Text je Midnight Navy, takže obe témy hovoria tou istou rečou. */
[data-theme="light"] {
    --bg-0: #E8E2D8;
    --bg-1: #F2EDE5;
    --bg-2: #FBF9F5;
    --surface:      hsl(40 44% 99% / .88);
    --surface-solid:#FFFDFA;
    --surface-2:    hsl(38 32% 95% / .92);
    --surface-hover: hsl(36 30% 92% / .92);
    --line:      hsl(210 30% 22% / .14);
    --line-soft: hsl(210 30% 22% / .07);
    --line-strong: hsl(210 30% 22% / .26);
    --tx-1: hsl(210 55% 11%);
    --tx-2: hsl(210 16% 34%);
    --tx-3: hsl(210 10% 48%);
    --shadow-sm: 0 1px 2px hsl(210 30% 25% / .09);
    --shadow-md: 0 12px 30px -14px hsl(210 35% 20% / .26);
    --shadow-lg: 0 30px 60px -24px hsl(210 35% 20% / .3);
    --glow: 0 0 0 1px hsl(40 60% 100% / .85) inset;
    color-scheme: light;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* Hustota rozhrania – všetky rozmery vychádzajú z tejto hodnoty.
   Mení sa v Nastavenia → Vzhľad. Pôvodný návrh zodpovedá 16px. */
html {
    font-size: var(--ui-base, 13.75px);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--tx-1);
    background: var(--bg-0);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 0.375rem; }
::selection { background: var(--accent-soft); color: var(--tx-1); }

::-webkit-scrollbar { width: 0.625rem; height: 0.625rem; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6.1875rem; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--tx-3); background-clip: content-box; }

.icon { width: 1.25rem; height: 1.25rem; flex: none; }
.icon-sm { width: 1rem; height: 1rem; }
.icon-lg { width: 1.625rem; height: 1.625rem; }

/* ---------- 3. Aurora pozadie ---------- */
.aurora {
    position: fixed; inset: 0; z-index: -1; overflow: hidden;
    background:
        radial-gradient(1100px 700px at 12% -10%, hsl(var(--a-h) 34% 42% / .18), transparent 62%),
        radial-gradient(900px 620px at 92% 6%, hsl(calc(var(--a-h) + 55) 80% 45% / .16), transparent 60%),
        radial-gradient(1000px 800px at 55% 110%, hsl(calc(var(--a-h) - 40) 75% 42% / .14), transparent 62%),
        var(--bg-0);
}
.aurora::after {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
    opacity: .035; mix-blend-mode: overlay; pointer-events: none;
}

/* ---------- 4. Layout ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
/* zbalené menu: stav drží <html>, takže platí hneď a stránka pri načítaní nepreskočí */
:root[data-rail="1"] .app { --sidebar-w: 5.25rem; }

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

/* zatemnenie pre mobilné menu – na väčších obrazovkách nesmie zaberať stĺpec mriežky */
.sidebar-scrim { display: none; }
.page { padding: var(--sp-5) var(--sp-6) var(--sp-7); flex: 1; max-width: 1680px; width: 100%; }

/* ---------- 5. Sidebar ---------- */
.sidebar {
    position: sticky; top: 0;
    height: 100vh;
    /* dvh berie do úvahy vysúvaciu lištu prehliadača; vh ostáva ako záloha */
    height: 100dvh;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, hsl(210 46% 10% / .8), hsl(210 52% 7% / .88));
    border-right: 1px solid var(--line);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    z-index: 40;
    transition: width var(--dur) var(--ease);
}
[data-theme="light"] .sidebar { background: linear-gradient(180deg, hsl(40 50% 99% / .9), hsl(38 34% 96% / .92)); }

.brand {
    display: flex; align-items: center; gap: 0.75rem;
    height: var(--topbar-h); padding: 0 var(--sp-4);
    border-bottom: 1px solid var(--line-soft); flex: none;
}
.brand img { width: 2.125rem; height: 2.125rem; border-radius: 0.625rem; object-fit: contain; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; overflow: hidden; }
.brand-name { font-weight: 800; letter-spacing: -.3px; font-size: 1rem; white-space: nowrap; }
.brand-sub { font-size: 0.6562rem; color: var(--tx-3); text-transform: uppercase; letter-spacing: 1.1px; white-space: nowrap; }

.nav { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; gap: 2px; }
.nav-item {
    position: relative; display: flex; align-items: center; gap: 0.75rem;
    padding: 0.625rem 0.75rem; border-radius: var(--r-sm);
    color: var(--tx-2); font-weight: 550; font-size: 0.9062rem;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform .12s var(--ease);
    white-space: nowrap;
}
.nav-item .icon { color: var(--tx-3); transition: color var(--dur) var(--ease); }
.nav-item:hover { background: var(--surface-hover); color: var(--tx-1); }
.nav-item:hover .icon { color: var(--tx-1); }
.nav-item:active { transform: scale(.985); }
.nav-item.is-active {
    background: linear-gradient(90deg, var(--accent-soft), var(--accent-softer));
    color: var(--tx-1); box-shadow: inset 0 0 0 1px var(--accent-line);
}
.nav-item.is-active .icon { color: var(--accent); }
.nav-item.is-active::before {
    content: ''; position: absolute; left: -0.75rem; top: 50%; translate: 0 -50%;
    width: 3px; height: 1.25rem; border-radius: 0 3px 3px 0; background: var(--accent);
    box-shadow: 0 0 14px 1px var(--accent);
}
.nav-badge {
    margin-left: auto; font-size: 0.6875rem; font-weight: 700; padding: 1px 0.4375rem;
    border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent);
    flex: none;
}

/* ---------- 5b. Skupiny v ponuke ---------- */
/* Nadpis oddielu ponuky. Deväť skupín za sebou sa nedá prehľadnúť; štyri
   slovesá nad nimi áno. Držané potichu – má viesť oko, nie ho ťahať. */
.nav-cap {
    display: flex; align-items: center; gap: 0.5rem;
    margin: var(--sp-4) 0 0.1875rem; padding: 0 0.75rem;
    font-size: 0.6rem; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--tx-3); white-space: nowrap;
    user-select: none;
}
.nav-cap:first-child { margin-top: 0; }
.nav-cap::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }

.nav-group { display: flex; flex-direction: column; }
.nav-parent { width: 100%; cursor: pointer; text-align: left; }
.nav-caret {
    width: 0.9375rem; height: 0.9375rem; margin-left: auto; flex: none;
    color: var(--tx-3); transition: transform .22s var(--ease);
}
.nav-parent .nav-badge + .nav-caret { margin-left: 0.375rem; }
.nav-group.is-open > .nav-parent .nav-caret { transform: rotate(180deg); }
/* súčet na skupine má zmysel len keď je zbalená – inak sa opakuje pri podstránke */
.nav-group.is-open > .nav-parent .nav-badge-sum { display: none; }
/* skupina, v ktorej je práve otvorená stránka */
.nav-group.has-active > .nav-parent { color: var(--tx-1); }
.nav-group.has-active > .nav-parent .icon { color: var(--accent); }

.nav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s var(--ease); }
.nav-sub > div { overflow: hidden; position: relative; }
.nav-group.is-open > .nav-sub { grid-template-rows: 1fr; }
/* zvislá vodiaca čiara spája podstránky so skupinou */
.nav-sub > div::before {
    content: ''; position: absolute; left: 1.625rem; top: 0.1875rem; bottom: 0.1875rem;
    width: 1px; background: var(--line-soft);
}
.nav-sub-item {
    position: relative; display: flex; align-items: center; gap: 0.5rem;
    padding: 0.375rem 0.625rem 0.375rem 2.25rem; border-radius: var(--r-sm);
    color: var(--tx-3); font-size: 0.8125rem; font-weight: 520; white-space: nowrap;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-dot {
    position: absolute; left: 1.4375rem; top: 50%; translate: 0 -50%;
    width: 0.375rem; height: 0.375rem; border-radius: 50%;
    background: var(--tx-3); opacity: .45; transition: all var(--dur) var(--ease);
}
.nav-sub-item:hover { background: var(--surface-hover); color: var(--tx-1); }
.nav-sub-item:hover .nav-dot { opacity: .9; }
.nav-sub-item.is-active { color: var(--accent); font-weight: 650; background: var(--accent-softer); }
.nav-sub-item.is-active .nav-dot { background: var(--accent); opacity: 1; box-shadow: 0 0 0.5rem var(--accent); }

/* ---------- 5c. Bublina pri zbalenej ponuke ---------- */
.nav-flyout {
    position: fixed; z-index: 60; min-width: 8rem; max-width: 18rem;
    background: var(--surface-solid); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 0.3125rem;
    opacity: 0; visibility: hidden; translate: -0.375rem 0;
    transition: opacity .14s var(--ease), translate .14s var(--ease), visibility .14s;
}
.nav-flyout.open { opacity: 1; visibility: visible; translate: 0 0; }
.nav-flyout-head {
    padding: 0.375rem 0.5rem 0.3125rem; font-size: 0.78rem; font-weight: 750;
    color: var(--tx-1); white-space: nowrap;
}
.nav-flyout-head + .nav-flyout-list { border-top: 1px solid var(--line-soft); padding-top: 0.25rem; margin-top: 0.1875rem; }
.nav-flyout a {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem;
    border-radius: var(--r-xs); color: var(--tx-2); font-size: 0.82rem; font-weight: 520;
    white-space: nowrap;
}
.nav-flyout a:hover { background: var(--surface-hover); color: var(--tx-1); }
.nav-flyout a.is-active { background: var(--accent-softer); color: var(--accent); font-weight: 650; }
.nav-flyout .nav-badge { margin-left: auto; }
/* Päta s kontom musí zostať nad domovským indikátorom – nielen viditeľná,
   ale aj mimo pásma, kde systém preberá dotyk na gesto. */
.sidebar-foot {
    padding: var(--sp-3);
    padding-bottom: calc(var(--sp-3) + var(--safe-b));
    border-top: 1px solid var(--line-soft); flex: none;
}
/* poistka: zoznam ponuky sa musí vedieť zmenšiť, inak by pätu vytlačil von */
.nav { min-height: 0; }

@media (min-width: 861px) {
    :root[data-rail="1"] .brand-txt,
    :root[data-rail="1"] .nav-item span,
    :root[data-rail="1"] .sidebar .nav-badge,
    :root[data-rail="1"] .nav-caret,
    :root[data-rail="1"] .nav-sub,
    :root[data-rail="1"] .user-chip-txt { display: none; }
    :root[data-rail="1"] .nav-item { justify-content: center; padding: 0.6875rem; }
    /* v zbalenej ponuke nie je miesto na slovo – z nadpisu zostane len čiara,
       aby členenie nezmizlo úplne */
    :root[data-rail="1"] .nav-cap {
        display: block; height: 1px; padding: 0; overflow: hidden;
        margin: var(--sp-3) 0.5rem; background: var(--line);
    }
    :root[data-rail="1"] .nav-cap span, :root[data-rail="1"] .nav-cap::after { display: none; }
    :root[data-rail="1"] .brand { justify-content: center; padding: 0; }
    :root[data-rail="1"] .nav { padding-left: var(--sp-2); padding-right: var(--sp-2); }
    /* skupina s otvorenou stránkou musí byť rozoznateľná aj podľa samotnej ikony */
    :root[data-rail="1"] .nav-group.has-active > .nav-parent {
        background: linear-gradient(90deg, var(--accent-soft), var(--accent-softer));
        box-shadow: inset 0 0 0 1px var(--accent-line);
    }
    /* neprečítané a nevybavené sa v zbalenom menu ukážu ako bodka na ikone */
    :root[data-rail="1"] .nav-item.has-badge::after {
        content: ''; position: absolute; top: 0.4375rem; right: 0.75rem;
        width: 0.4375rem; height: 0.4375rem; border-radius: 50%;
        background: var(--accent); box-shadow: 0 0 0 2px var(--surface-solid);
    }
}
/* bublina má zmysel len pri zbalenej ponuke na väčších obrazovkách */
@media (max-width: 860px) { .nav-flyout { display: none; } }

/* Rechenweg: die Regel links, dieselbe Rechnung mit eigenen Zahlen rechts.
   Eine Zahl allein ist nicht nachprüfbar; nebeneinander ist sie es. */
.rechenweg {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5); padding: var(--sp-4);
}
.rechenweg > div { min-width: 0; }
.rechenweg h3 { font-size: 0.9375rem; font-weight: 700; letter-spacing: -.01em; }
.rw-schritt { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); }
.rw-schritt > div { min-width: 0; }
.rw-nr {
    flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%;
    display: grid; place-items: center; margin-top: .0625rem;
    background: var(--accent-softer); border: 1px solid var(--accent-line);
    color: var(--accent); font-size: 0.7rem; font-weight: 800;
}
.rw-titel {
    display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--tx-3);
}
.rw-formel, .rw-rechnung { margin: 0.1875rem 0 0; font-size: 0.875rem; }
.rw-formel { font-weight: 620; color: var(--tx-1); }
.rw-rechnung { font-family: var(--mono, ui-monospace, monospace); color: var(--tx-1); }
.rw-rechnung strong { color: var(--accent); }
@media (max-width: 900px) { .rechenweg { grid-template-columns: 1fr; gap: var(--sp-4); } }

/* ---------- 6. Topbar ---------- */
.topbar {
    position: sticky; top: 0; z-index: 35;
    height: var(--topbar-h); flex: none;
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 0 var(--sp-6);
    /* Die Leiste bleibt beim Blättern stehen; bei .58 schimmerten Diagramme
       und Tabellen sichtbar hindurch. Fast deckend, die Milchglasunschärfe
       bleibt für die Kante. */
    background: hsl(210 44% 8% / .94);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid var(--line);
}
[data-theme="light"] .topbar { background: hsl(40 40% 99% / .96); }

.topbar-title { display: flex; flex-direction: column; min-width: 0; }
.topbar-title h1 { font-size: 1.1875rem; font-weight: 750; letter-spacing: -.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-title p { font-size: 0.7812rem; color: var(--tx-3); }
.topbar-spacer { flex: 1; }

.icon-btn {
    display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
    border-radius: var(--r-sm); color: var(--tx-2);
    border: 1px solid transparent;
    transition: all var(--dur) var(--ease); position: relative;
}
.icon-btn:hover { background: var(--surface-hover); color: var(--tx-1); border-color: var(--line); }
.icon-btn.has-dot::after {
    content: ''; position: absolute; top: 0.5rem; right: 0.5625rem; width: 0.4375rem; height: 0.4375rem;
    border-radius: 50%; background: var(--dang); box-shadow: 0 0 0 2px var(--bg-1);
}

.searchbar {
    display: flex; align-items: center; gap: 0.625rem;
    height: 2.5rem; padding: 0 0.75rem; min-width: 16.25rem;
    border-radius: var(--r-sm); border: 1px solid var(--line);
    background: var(--surface-2); color: var(--tx-3);
    transition: all var(--dur) var(--ease); cursor: text;
}
.searchbar:hover { border-color: var(--line-strong); color: var(--tx-2); }
.searchbar kbd {
    margin-left: auto; font-family: var(--font); font-size: 0.6875rem; font-weight: 700;
    padding: 2px 0.4375rem; border-radius: 0.375rem; background: var(--surface-hover);
    border: 1px solid var(--line); color: var(--tx-3);
}

.user-chip {
    display: flex; align-items: center; gap: 0.625rem; padding: 0.3125rem 0.625rem 0.3125rem 0.3125rem;
    border-radius: var(--r-full); border: 1px solid var(--line);
    background: var(--surface-2); transition: all var(--dur) var(--ease);
    max-width: 100%; overflow: hidden;
}
.user-chip:hover { border-color: var(--line-strong); background: var(--surface-hover); }
/* ohne min-width: 0 kann der Text im Flexkasten nicht schrumpfen und der
   Klinikname läuft aus der Leiste heraus */
.user-chip-txt { display: flex; flex-direction: column; line-height: 1.2; text-align: left;
                 min-width: 0; flex: 1 1 auto; }
.user-chip-txt strong { font-size: 0.8125rem; font-weight: 650; }
.user-chip-txt span { font-size: 0.6875rem; color: var(--tx-3); }

/* ---------- 7. Avatar ---------- */
.avatar {
    display: grid; place-items: center; flex: none;
    width: 2.125rem; height: 2.125rem; border-radius: var(--r-full);
    font-size: 0.7812rem; font-weight: 750; letter-spacing: .3px; color: #fff;
    background: linear-gradient(135deg, hsl(var(--av-h, 210) 30% 52%), hsl(calc(var(--av-h, 210) + 30) 32% 40%));
    box-shadow: 0 2px 8px hsl(var(--av-h, 245) 60% 20% / .5), inset 0 1px 0 hsl(0 0% 100% / .25);
    overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 1.625rem; height: 1.625rem; font-size: 0.6562rem; }
.avatar-lg { width: 3.5rem; height: 3.5rem; font-size: 1.1875rem; }
.avatar-xl { width: 5.25rem; height: 5.25rem; font-size: 1.75rem; }
.avatar-stack { display: flex; }
.avatar-stack .avatar { margin-left: -0.5625rem; box-shadow: 0 0 0 2px var(--surface-solid); }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* ---------- 8. Karty ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md), var(--glow);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    position: relative; overflow: hidden;
}
.card-head {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line-soft);
    /* lieber umbrechen als Merkmale abschneiden – „ohne Versorgungsverpflichtung"
       ist eine Aussage, kein Schmuck */
    flex-wrap: wrap; row-gap: var(--sp-2);
}
.card-head h2, .card-head h3 { font-size: 0.9688rem; font-weight: 700; letter-spacing: -.2px; }
.card-head p { font-size: 0.7812rem; color: var(--tx-3); }
.card-head .spacer { flex: 1; }
.card-body { padding: var(--sp-5); }
.card-body.tight { padding: var(--sp-4); }
.card-foot { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line-soft); background: var(--surface-2); }

/* ---------- 9. Mriežky ---------- */
.grid { display: grid; gap: var(--sp-4); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.g-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

/* ---------- 10. Stat tiles ---------- */
.stat {
    position: relative; padding: var(--sp-5); border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line);
    box-shadow: var(--shadow-md), var(--glow);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    overflow: hidden; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.stat:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.stat::before {
    content: ''; position: absolute; top: -40%; right: -20%;
    width: 11.25rem; height: 11.25rem; border-radius: 50%;
    background: radial-gradient(circle, hsl(var(--st-h, var(--a-h)) 34% 52% / .2), transparent 70%);
}
.stat-top { display: flex; align-items: center; gap: 0.625rem; margin-bottom: var(--sp-4); }
.stat-ico {
    display: grid; place-items: center; width: 2.375rem; height: 2.375rem; border-radius: var(--r-sm);
    background: hsl(var(--st-h, var(--a-h)) 32% 55% / .16);
    color: hsl(var(--st-h, var(--a-h)) 38% 68%);
    box-shadow: inset 0 0 0 1px hsl(var(--st-h, var(--a-h)) 32% 58% / .28);
}
[data-theme="light"] .stat-ico { color: hsl(var(--st-h, var(--a-h)) 34% 38%); }
.stat-label { font-size: 0.7812rem; color: var(--tx-3); font-weight: 600; letter-spacing: .2px; }
.stat-value { font-size: 1.875rem; font-weight: 800; letter-spacing: -1.2px; line-height: 1.1; }
.stat-value small { font-size: 0.9375rem; font-weight: 600; color: var(--tx-3); letter-spacing: 0; }
.stat-foot { margin-top: 0.625rem; display: flex; align-items: center; gap: 0.375rem; font-size: 0.7812rem; color: var(--tx-3); }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--dang); }

/* ---------- 11. Tlačidlá ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    height: 2.5rem; padding: 0 1rem; border-radius: var(--r-sm);
    font-size: 0.875rem; font-weight: 650; letter-spacing: -.1px; white-space: nowrap;
    border: 1px solid var(--line); background: var(--surface-2); color: var(--tx-1);
    transition: all var(--dur) var(--ease); cursor: pointer;
}
.btn:hover { background: var(--surface-hover); border-color: var(--line-strong); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:disabled, .btn.is-disabled { opacity: .5; pointer-events: none; }
.btn .icon { width: 1.0625rem; height: 1.0625rem; }

/* Varianty majú zámerne vyššiu špecificitu (.btn.btn-*) než .btn:hover,
   inak by stav :hover prepísal ich pozadie a text by ostal nečitateľný. */
.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus-visible {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: var(--accent-fg);
    border-color: transparent;
}
.btn.btn-primary { box-shadow: 0 6px 20px -8px var(--accent), inset 0 1px 0 hsl(0 0% 100% / .22); }
.btn.btn-primary:hover { box-shadow: 0 10px 26px -8px var(--accent), inset 0 1px 0 hsl(0 0% 100% / .3); filter: brightness(1.08); }

.btn.btn-ghost { background: transparent; border-color: transparent; color: var(--tx-2); }
.btn.btn-ghost:hover { background: var(--surface-hover); border-color: var(--line); color: var(--tx-1); }

.btn.btn-danger { background: hsl(4 62% 56% / .13); border-color: hsl(4 62% 56% / .32); color: var(--dang); }
.btn.btn-danger:hover { background: hsl(4 62% 56% / .24); border-color: hsl(4 62% 56% / .52); color: var(--dang); }
.btn-sm { height: 2.0625rem; padding: 0 0.75rem; font-size: 0.8125rem; border-radius: var(--r-xs); }
.btn-lg { height: 2.875rem; padding: 0 1.375rem; font-size: 0.9375rem; }
.btn-block { width: 100%; }
/* Ikonové tlačidlo je štvorec. Pevná šírka by však pri tlačidle, ktoré má aj
   popis, nechala text pretiecť na susedný prvok – preto min-width, nie width.
   Pri samotnej ikone je výsledok rovnaký ako predtým. */
.btn-icon { width: auto; min-width: 2.5rem; padding: 0 0.375rem; }
.btn-sm.btn-icon { min-width: 2.0625rem; }

/* ---------- 12. Odznaky ---------- */
.badge {
    display: inline-flex; align-items: center; gap: 0.3125rem;
    padding: 3px 0.5625rem; border-radius: var(--r-full);
    font-size: 0.7188rem; font-weight: 700; letter-spacing: .1px;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--tx-2);
    white-space: nowrap;
}
.badge::before { content: ''; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; }
.badge.no-dot::before { display: none; }
.badge-ok    { background: hsl(162 46% 44% / .14); border-color: hsl(162 46% 44% / .3); color: hsl(162 46% 54%); }
.badge-warn  { background: hsl(28 78% 56% / .14);  border-color: hsl(28 78% 56% / .3);  color: hsl(28 78% 62%); }
.badge-dang  { background: hsl(4 62% 56% / .14); border-color: hsl(4 62% 56% / .3); color: hsl(4 66% 64%); }
.badge-info  { background: hsl(205 42% 58% / .14); border-color: hsl(205 42% 58% / .3); color: hsl(205 46% 66%); }
.badge-accent{ background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.badge-mute  { color: var(--tx-3); }
[data-theme="light"] .badge-ok { color: hsl(162 46% 30%); }
[data-theme="light"] .badge-warn { color: hsl(26 74% 38%); }
[data-theme="light"] .badge-dang { color: hsl(4 58% 44%); }
[data-theme="light"] .badge-info { color: hsl(205 44% 36%); }

.chip {
    display: inline-flex; align-items: center; gap: 0.375rem; max-width: 100%; min-width: 0;
    padding: 0.25rem 0.625rem; border-radius: var(--r-full); font-size: 0.7812rem; font-weight: 600;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--tx-2);
    transition: all var(--dur) var(--ease);
    /* ein Chip ist eine Zeile: sonst rutscht ein langer Klinikname unter das Zeichen */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto;
}
.chip > .icon { flex: none; }
.chip > .chip-txt { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
a.chip:hover { border-color: var(--accent-line); color: var(--tx-1); }

/* ---------- 13. Formuláre ---------- */
.field { display: flex; flex-direction: column; gap: 0.4375rem; }
.field > label, .label {
    font-size: 0.7812rem; font-weight: 650; color: var(--tx-2); letter-spacing: .1px;
}
.field .hint { font-size: 0.75rem; color: var(--tx-3); }
.req { color: var(--dang); }

.input, .select, .textarea {
    /* zhodná výška s .btn, aby ovládacie prvky v riadku lícovali */
    width: 100%; min-height: 2.5rem; padding: 0.5625rem 0.8125rem;
    border-radius: var(--r-sm); border: 1px solid var(--line);
    background: var(--surface-2); color: var(--tx-1);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
    font-size: 0.9062rem;
}
.input::placeholder, .textarea::placeholder { color: var(--tx-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft); background: var(--surface-solid);
}
.textarea { resize: vertical; min-height: 6.875rem; line-height: 1.6; }
.select {
    -webkit-appearance: none; appearance: none; padding-right: 2.375rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888ea8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 1rem;
}
.input-group { position: relative; }
.input-group .icon { position: absolute; left: 0.8125rem; top: 50%; translate: 0 -50%; color: var(--tx-3); pointer-events: none; }
.input-group .input { padding-left: 2.625rem; }

.switch { display: inline-flex; align-items: center; gap: 0.625rem; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track {
    width: 2.625rem; height: 1.5rem; border-radius: var(--r-full); flex: none;
    background: var(--surface-hover); border: 1px solid var(--line);
    position: relative; transition: all var(--dur) var(--ease);
}
.switch-track::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 1.125rem; height: 1.125rem;
    border-radius: 50%; background: var(--tx-3); transition: all var(--dur) var(--ease);
}
.switch input:checked + .switch-track { background: var(--accent); border-color: transparent; }
.switch input:checked + .switch-track::after { left: 1.3125rem; background: #fff; }

.check { display: inline-flex; align-items: center; gap: 0.5625rem; cursor: pointer; user-select: none; font-size: 0.875rem; }
.check input { width: 1.125rem; height: 1.125rem; accent-color: var(--accent); cursor: pointer; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: var(--sp-3); align-items: center; padding-top: var(--sp-2); }

/* ---------- 14. Tabuľky ---------- */
.table-wrap { overflow-x: auto; }
.table { font-size: 0.875rem; }
.table th {
    text-align: left; font-size: 0.7188rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .9px; color: var(--tx-3); padding: 0.75rem var(--sp-4);
    border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2);
}
.table td { padding: 0.8125rem var(--sp-4); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tbody tr { transition: background var(--dur) var(--ease); }
.table tbody tr:hover { background: var(--surface-hover); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* hustejšia tabuľka do kariet a bočných panelov */
/* kompaktné čísla v karte (napríklad prehľad dovolenky) */
.mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
/* Vier Kennzahlen nebeneinander – sonst steht die letzte allein in einer Zeile. */
.mini-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mini-stats > div {
    padding: 0.625rem 0.75rem; border-radius: var(--r-sm);
    background: var(--surface-2); border: 1px solid var(--line-soft);
}
.mini-stats span { display: block; font-size: 0.72rem; color: var(--tx-3); font-weight: 600; }
.mini-stats strong { font-size: 1.25rem; font-weight: 800; letter-spacing: -.5px; }
.mini-stats .is-accent { background: var(--accent-softer); border-color: var(--accent-line); }
.mini-stats .is-accent strong { color: var(--accent); }

.table-tight th { padding: 0.4375rem var(--sp-3); }
.table-tight td { padding: 0.4375rem var(--sp-3); font-size: 0.8125rem; }
.table-tight .input, .table-tight .select { height: 1.875rem; min-height: 1.875rem; font-size: 0.8125rem; }
.table .actions { text-align: right; white-space: nowrap; }
.table a.link { color: var(--tx-1); font-weight: 620; }
.table a.link:hover { color: var(--accent); }
.t-mute { color: var(--tx-3); }
.t-mono { font-family: var(--mono); font-size: 0.8125rem; }
.t-num { font-variant-numeric: tabular-nums; }

/* ---------- 15. Prázdny stav ---------- */
.empty { display: grid; place-items: center; gap: 0.875rem; padding: var(--sp-7) var(--sp-4); text-align: center; }
.empty-ico {
    display: grid; place-items: center; width: 4.125rem; height: 4.125rem; border-radius: var(--r-lg);
    background: var(--accent-softer); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line);
}
.empty h3 { font-size: 1rem; font-weight: 700; }
.empty p { color: var(--tx-3); font-size: 0.875rem; max-width: 23.75rem; }

/* ---------- 16. Progress ---------- */
.progress { height: 0.4375rem; border-radius: var(--r-full); background: var(--surface-hover); overflow: hidden; }
.progress > span {
    display: block; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), hsl(calc(var(--a-h) + 45) 80% 62%));
    transition: width .6s var(--ease);
}
.progress.sm { height: 0.3125rem; }
.progress.is-over > span { background: linear-gradient(90deg, var(--dang), hsl(18 62% 56%)); }

/* ---------- 33b. Projektové riadenie ---------- */
.is-late { color: var(--dang); font-weight: 600; }
.dotc { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none;
        background: hsl(var(--st-h, 210) 34% 56%); box-shadow: 0 0 0.5rem hsl(var(--st-h, 210) 34% 56% / .55); }

/* časová os projektu */
.gantt { display: flex; flex-direction: column; gap: 2px; overflow-x: auto; }
.gantt-row, .gantt-head { display: flex; align-items: center; gap: var(--sp-3); min-width: 34rem; }
.gantt-head { padding-bottom: 0.375rem; border-bottom: 1px solid var(--line-soft); margin-bottom: 0.25rem; }
.gantt-label {
    flex: none; width: 15rem; display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.8125rem; color: var(--tx-2); min-width: 0;
}
.gantt-label .icon { color: var(--tx-3); flex: none; }
.gantt-track { position: relative; flex: 1; height: 1.5rem; min-width: 0;
               background: var(--surface-2); border-radius: var(--r-xs); }
.gantt-head .gantt-track { display: flex; background: none; height: auto; }
.gantt-month { border-left: 1px solid var(--line-soft); padding-left: 0.35rem; overflow: hidden; }
.gantt-month span { font-size: 0.6875rem; color: var(--tx-3); text-transform: uppercase;
                    letter-spacing: .4px; white-space: nowrap; }
.gantt-bar {
    position: absolute; top: 0.28rem; height: 0.95rem; border-radius: var(--r-full);
    background: hsl(var(--a-h) var(--a-s) var(--a-l) / .55); overflow: hidden;
    box-shadow: inset 0 0 0 1px hsl(var(--a-h) var(--a-s) var(--a-l) / .5);
}
.gantt-bar > i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-full); }
.gantt-bar.is-phase { top: 0.18rem; height: 1.15rem; background: hsl(210 24% 52% / .42);
                      box-shadow: inset 0 0 0 1px hsl(210 26% 58% / .6); }
.gantt-bar.is-done { background: hsl(162 46% 44% / .5); box-shadow: inset 0 0 0 1px hsl(162 46% 44% / .55); }
.gantt-bar.is-late { background: hsl(4 62% 56% / .48); box-shadow: inset 0 0 0 1px hsl(4 62% 56% / .58); }
.gantt-diamond {
    position: absolute; top: 0.4rem; width: 0.7rem; height: 0.7rem; margin-left: -0.35rem;
    rotate: 45deg; background: var(--accent); box-shadow: 0 0 0.5rem var(--accent);
}
.gantt-diamond.is-done { background: var(--ok); box-shadow: 0 0 0.5rem var(--ok); }
.gantt-diamond.is-late { background: var(--dang); box-shadow: 0 0 0.5rem var(--dang); }
.gantt-today { position: absolute; top: -0.15rem; bottom: -0.15rem; width: 1px;
               background: var(--dang); opacity: .55; }
.gantt-key { display: inline-block; width: 1.5rem; height: 0.5rem; border-radius: var(--r-full);
             background: hsl(var(--a-h) var(--a-s) var(--a-l) / .55); vertical-align: middle; }
.gantt-key.is-phase { background: hsl(210 24% 55% / .6); }
.gantt-key.is-done  { background: hsl(162 46% 44% / .55); }
.gantt-key.is-late  { background: hsl(4 62% 56% / .55); }
.gantt-key.is-today { width: 2px; height: 0.85rem; background: var(--dang); }

/* firma a osoba pod názvom udalosti v bočnom paneli */
.ev-meta { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; margin-top: 0.15rem; min-width: 0; }
.ev-meta .icon { color: var(--tx-3); }

.cal-ev-sub { display: block; font-size: 0.62rem; opacity: .75; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }

/* ručne zadaná kontaktná osoba pri udalosti alebo úlohe */
.pp-custom {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3);
    padding: var(--sp-3); border-radius: var(--r-sm);
    background: var(--surface-2); border: 1px solid var(--line-soft);
}
.pp-custom .check { grid-column: 1 / -1; }
@media (max-width: 620px) { .pp-custom { grid-template-columns: minmax(0, 1fr); } }

/* záložné kódy a QR pri dvojfázovom overení */
.backup-codes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.75rem; }
.backup-codes span {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; font-weight: 650;
    padding: 0.4rem 0.5rem; text-align: center; border-radius: var(--r-xs);
    background: var(--surface-solid); border: 1px solid var(--line); color: var(--tx-1);
}
.qr-box { background: #fff; padding: 0.75rem; border-radius: var(--r-md); width: fit-content; }
.qr-box svg { display: block; max-width: 100%; height: auto; }
@media (max-width: 620px) { .backup-codes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* dlaždica elektronického výkazu */
.report-tile {
    display: flex; flex-direction: column; gap: 0.5rem; padding: var(--sp-4);
    border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2);
}
.report-tile p { margin: 0; }
.report-tile strong { font-size: 0.9375rem; }

.tab .cnt { margin-left: 0.35rem; font-size: 0.65rem; font-weight: 800; padding: 0 0.3rem;
            border-radius: var(--r-full); background: var(--dang); color: #fff; }

@media (max-width: 860px) { .gantt-label { width: 9rem; } }

/* ---------- 17. Dropdown ---------- */
.dropdown { position: relative; }
.menu {
    position: absolute; top: calc(100% + 0.625rem); right: 0; min-width: 14.375rem; z-index: 60;
    background: var(--surface-solid); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--shadow-lg);
    padding: 0.375rem; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98);
    transition: all .18s var(--ease); transform-origin: top right;
}
.menu.open { opacity: 1; visibility: visible; transform: none; }
.menu.left { right: auto; left: 0; transform-origin: top left; }
.menu-item {
    display: flex; align-items: center; gap: 0.625rem; width: 100%;
    padding: 0.5625rem 0.6875rem; border-radius: var(--r-xs); font-size: 0.875rem; font-weight: 550;
    color: var(--tx-2); transition: all .14s var(--ease); text-align: left;
}
.menu-item:hover { background: var(--surface-hover); color: var(--tx-1); }
.menu-item .icon { width: 1.0625rem; height: 1.0625rem; color: var(--tx-3); }
.menu-item:hover .icon { color: var(--accent); }
.menu-item.danger { color: var(--dang); }
.btn.danger, .btn-ghost.danger { color: var(--dang); }
.btn.danger:hover, .btn-ghost.danger:hover { background: hsl(4 62% 56% / .13); color: var(--dang); }
.menu-item.danger:hover { background: hsl(4 62% 56% / .13); }
.menu-item.danger .icon, .menu-item.danger:hover .icon { color: var(--dang); }
.menu-sep { height: 1px; background: var(--line-soft); margin: 0.3125rem 0.25rem; }
.menu-head { padding: 0.5625rem 0.6875rem 0.3125rem; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 1px; color: var(--tx-3); font-weight: 700; }

/* ---------- 18. Modálne okno ---------- */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 200;
    background: hsl(210 58% 3% / .66);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: grid; place-items: center; padding: var(--sp-4);
    opacity: 0; visibility: hidden; transition: all .22s var(--ease);
}
.modal-backdrop.open { opacity: 1; visibility: visible; }
.modal {
    width: min(42.5rem, 100%); max-height: 88vh; overflow: hidden;
    display: flex; flex-direction: column;
    background: var(--surface-solid); border: 1px solid var(--line);
    border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
    transform: translateY(14px) scale(.97); transition: transform .26s var(--ease);
}
.modal-backdrop.open .modal { transform: none; }
.modal.wide { width: min(57.5rem, 100%); }
/* Obsah okna je takmer vždy zabalený vo formulári, takže formulár je jediným
   pružným prvkom okna. Musí preto prebrať stĺpcové rozloženie – inak sa telo
   nemá o čo oprieť, `overflow-y: auto` sa nikdy nespustí a dlhý obsah sa len
   oreže o `overflow: hidden` na .modal. Bez `min-height: 0` sa pružný prvok
   navyše odmieta zmenšiť pod veľkosť svojho obsahu. */
.modal > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.modal-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--line-soft); flex: none; }
.modal-head h3 { font-size: 1.0625rem; font-weight: 750; letter-spacing: -.3px; }
.modal-head p { font-size: 0.8125rem; color: var(--tx-3); }
.modal-body { padding: var(--sp-5); overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.modal-foot { display: flex; gap: var(--sp-3); justify-content: flex-end; padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line-soft); background: var(--surface-2); flex: none; }

/* Na nízkych oknách a na mobile má okno k dispozícii viac výšky, inak by sa
   z formulára ukázali dva riadky. */
@media (max-height: 760px), (max-width: 760px) {
    .modal { max-height: calc(100vh - 2 * var(--sp-4)); }
}

/* ---------- 19. Toasty ---------- */
.toasts { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 300; display: flex; flex-direction: column; gap: 0.625rem; max-width: 23.75rem; }
.toast {
    display: flex; align-items: flex-start; gap: 0.6875rem; padding: 0.8125rem 0.9375rem;
    border-radius: var(--r-md); background: var(--surface-solid);
    border: 1px solid var(--line); box-shadow: var(--shadow-lg);
    animation: toast-in .34s var(--ease) both; font-size: 0.875rem;
}
.toast .icon { flex: none; margin-top: 1px; }
.toast.success .icon { color: var(--ok); }
.toast.error .icon { color: var(--dang); }
.toast.info .icon { color: var(--info); }
.toast.warning .icon { color: var(--warn); }
.toast strong { display: block; font-weight: 680; }
.toast.hide { animation: toast-out .28s var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translateX(28px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(28px) scale(.96); } }

/* ---------- 20. Command palette ---------- */
.cmdk-backdrop {
    position: fixed; inset: 0; z-index: 250; background: hsl(210 58% 3% / .64);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; justify-content: center; padding-top: 12vh;
    opacity: 0; visibility: hidden; transition: all .2s var(--ease);
}
.cmdk-backdrop.open { opacity: 1; visibility: visible; }
.cmdk {
    width: min(40rem, 92vw); height: fit-content; max-height: 70vh; overflow: hidden;
    display: flex; flex-direction: column;
    background: var(--surface-solid); border: 1px solid var(--line-strong);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    transform: translateY(-12px) scale(.98); transition: transform .24s var(--ease);
}
.cmdk-backdrop.open .cmdk { transform: none; }
.cmdk-input { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.125rem; border-bottom: 1px solid var(--line-soft); }
.cmdk-input input { flex: 1; border: 0; background: none; outline: none; font-size: 1.0312rem; }
.cmdk-input input::placeholder { color: var(--tx-3); }
.cmdk-list { overflow-y: auto; padding: 0.5rem; }
.cmdk-group { font-size: 0.6562rem; text-transform: uppercase; letter-spacing: 1.1px; color: var(--tx-3); font-weight: 750; padding: 0.625rem 0.625rem 0.3125rem; }
.cmdk-item {
    display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.625rem 0.75rem;
    border-radius: var(--r-xs); color: var(--tx-2); font-size: 0.9062rem; text-align: left;
}
.cmdk-item .icon { color: var(--tx-3); }
.cmdk-item small { margin-left: auto; font-size: 0.7188rem; color: var(--tx-3); }
.cmdk-item.sel, .cmdk-item:hover { background: var(--accent-soft); color: var(--tx-1); }
.cmdk-item.sel .icon, .cmdk-item:hover .icon { color: var(--accent); }
.cmdk-foot { padding: 0.5625rem 1rem; border-top: 1px solid var(--line-soft); display: flex; gap: 1rem; font-size: 0.7188rem; color: var(--tx-3); background: var(--surface-2); }
.cmdk-foot kbd { padding: 1px 0.375rem; border-radius: 0.3125rem; background: var(--surface-hover); border: 1px solid var(--line); font-family: var(--font); font-weight: 700; }

/* ---------- 21. Kanban ---------- */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(258px, 1fr)); gap: var(--sp-4); align-items: start; overflow-x: auto; padding-bottom: 0.625rem; }
.kcol {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    display: flex; flex-direction: column; min-height: 11.25rem;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.kcol.drag-over { border-color: var(--accent); background: var(--accent-softer); }
.kcol-head { display: flex; align-items: center; gap: 0.5625rem; padding: 0.875rem var(--sp-4) 0.625rem; }
.kcol-head h3 { font-size: 0.8438rem; font-weight: 750; letter-spacing: .1px; }
.kcol-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: hsl(var(--k-h) 34% 56%); box-shadow: 0 0 10px hsl(var(--k-h) 75% 58% / .8); }
.kcol-count { margin-left: auto; font-size: 0.7188rem; font-weight: 700; color: var(--tx-3); background: var(--surface-2); border: 1px solid var(--line); padding: 1px 0.5rem; border-radius: var(--r-full); }
.kcol-body { padding: 0 0.625rem 0.625rem; display: flex; flex-direction: column; gap: 0.5625rem; min-height: 3.75rem; }

.kcard {
    padding: 0.8125rem; border-radius: var(--r-md); background: var(--surface-solid);
    border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    cursor: grab; transition: all var(--dur) var(--ease); position: relative;
}
.kcard:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kcard.dragging { opacity: .45; cursor: grabbing; transform: rotate(1.5deg) scale(.98); }
.kcard-pri { position: absolute; left: 0; top: 0.75rem; bottom: 0.75rem; width: 3px; border-radius: 0 3px 3px 0; }
.kcard h4 { font-size: 0.875rem; font-weight: 650; line-height: 1.4; margin-bottom: 0.5rem; padding-left: 0.5rem; }
.kcard-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding-left: 0.5rem; }
.kcard-meta .t-mute { font-size: 0.75rem; display: inline-flex; align-items: center; gap: 0.25rem; }

/* ---------- 22. Kalendár ---------- */
.cal { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface-2); }
.cal-head div { padding: 0.6875rem 0.625rem; font-size: 0.7188rem; font-weight: 750; text-transform: uppercase; letter-spacing: 1px; color: var(--tx-3); text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--line-soft); gap: 1px; }
.cal-day { background: var(--surface-solid); min-height: 7.625rem; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.3125rem; transition: background var(--dur) var(--ease); position: relative; }
.cal-day:hover { background: var(--surface-hover); }
.cal-day.out { background: var(--bg-1); }
.cal-day.out .cal-num { color: var(--tx-3); opacity: .5; }
.cal-num { font-size: 0.7812rem; font-weight: 650; color: var(--tx-2); width: 1.5625rem; height: 1.5625rem; display: grid; place-items: center; border-radius: 50%; }
.cal-day.today .cal-num { background: var(--accent); color: #fff; box-shadow: 0 3px 12px -3px var(--accent); }
.cal-ev {
    font-size: 0.7188rem; font-weight: 600; padding: 3px 0.4375rem; border-radius: 0.375rem;
    background: hsl(var(--ev-h, var(--a-h)) var(--ev-s, var(--a-s)) var(--ev-l, var(--a-l)) / .18);
    color: hsl(var(--ev-h, var(--a-h)) var(--ev-s, var(--a-s)) calc(var(--ev-l, var(--a-l)) + 16%));
    border-left: 2px solid hsl(var(--ev-h, var(--a-h)) var(--ev-s, var(--a-s)) var(--ev-l, var(--a-l)));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
    transition: all .16s var(--ease);
}
.cal-ev:hover { background: hsl(var(--ev-h, var(--a-h)) var(--ev-s, var(--a-s)) var(--ev-l, var(--a-l)) / .32); }
[data-theme="light"] .cal-ev { color: hsl(var(--ev-h, var(--a-h)) var(--ev-s, var(--a-s)) calc(var(--ev-l, var(--a-l)) - 22%)); }
.cal-add { position: absolute; top: 0.375rem; right: 0.375rem; opacity: 0; transition: opacity var(--dur) var(--ease); }
.cal-day:hover .cal-add { opacity: 1; }

/* ---------- 23. Timeline / aktivita ---------- */
.timeline { display: flex; flex-direction: column; }
.tl-item { display: flex; gap: 0.875rem; padding-bottom: 1.25rem; position: relative; }
.tl-item::before { content: ''; position: absolute; left: 1rem; top: 2.25rem; bottom: 0; width: 1px; background: var(--line); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item:last-child::before { display: none; }
.tl-ico {
    width: 2.0625rem; height: 2.0625rem; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--tx-3); z-index: 1;
}
.tl-ico.accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.tl-body { min-width: 0; padding-top: 0.25rem; }
.tl-body p { font-size: 0.875rem; line-height: 1.45; }
.tl-body time { font-size: 0.75rem; color: var(--tx-3); }

/* ---------- 24. Taby ---------- */
.tabs { display: flex; gap: 3px; padding: 0.25rem; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); width: fit-content; }
.tab {
    padding: 0.4375rem 0.875rem; border-radius: var(--r-xs); font-size: 0.8438rem; font-weight: 620; color: var(--tx-3);
    transition: all var(--dur) var(--ease); display: inline-flex; align-items: center; gap: 0.4375rem;
}
.tab:hover { color: var(--tx-1); }
.tab.is-active { background: var(--surface-solid); color: var(--tx-1); box-shadow: var(--shadow-sm); }

/* ---------- 25. Stránkovanie ---------- */
.pager { display: flex; align-items: center; gap: 0.3125rem; }
.pager a, .pager span {
    min-width: 2.125rem; height: 2.125rem; padding: 0 0.5625rem; display: grid; place-items: center;
    border-radius: var(--r-xs); font-size: 0.8438rem; font-weight: 620; color: var(--tx-2);
    border: 1px solid transparent; transition: all var(--dur) var(--ease);
}
.pager a:hover { background: var(--surface-hover); border-color: var(--line); color: var(--tx-1); }
.pager .is-active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.pager .disabled { opacity: .35; pointer-events: none; }

/* ---------- 26. Prihlásenie ---------- */
/* Fotografia vypĺňa celú plochu okna, prihlásenie je kompaktná sklenená karta. */
.login-page {
    position: relative; min-height: 100vh; min-height: 100svh;
    display: grid; grid-template-rows: auto 1fr auto;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    overflow: hidden; color: #fff;
}
.login-bg {
    position: fixed; inset: 0; z-index: 0;
    background-image: var(--login-bg);
    background-size: cover; background-position: center; background-repeat: no-repeat;
    animation: kenburns 52s var(--ease) infinite alternate;
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.05); } }

.login-scrim {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(90deg,  hsl(210 60% 4% / .54) 0%, hsl(210 60% 4% / .10) 36%,
                                hsl(210 60% 4% / .26) 64%, hsl(210 64% 3% / .62) 100%),
        linear-gradient(0deg,   hsl(210 64% 3% / .66) 0%, transparent 38%),
        linear-gradient(180deg, hsl(210 64% 3% / .46) 0%, transparent 22%),
        radial-gradient(58rem 40rem at 88% 50%, hsl(var(--a-h) 36% 44% / .2), transparent 68%);
}
/* pozadie a tieňovanie sú mimo toku – nesmie ich zasiahnuť pravidlo nižšie */
.login-page > *:not(.login-bg):not(.login-scrim) { position: relative; z-index: 2; }

/* ---- záhlavie a päta ---- */
.login-head { display: flex; flex-direction: column; align-items: flex-start; gap: 1.35rem; }
/* značka sa zarovnáva k prvému riadku „iRX Portál“, nie k celému dvojriadku */
.login-brand { display: flex; align-items: flex-start; gap: .75rem; }
.login-brand img {
    width: 2.4rem; height: 2.4rem; object-fit: contain;
    margin-top: -.4rem;
    filter: drop-shadow(0 .25rem .9rem hsl(210 70% 4% / .78));
}
.login-brand-txt strong { display: block; font-size: 1rem; font-weight: 800; letter-spacing: -.025em; }
.login-brand-txt span { font-size: .66rem; text-transform: uppercase; letter-spacing: .14em;
    color: hsl(0 0% 100% / .58); }

.login-bottom {
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
    font-size: .71rem; color: hsl(0 0% 100% / .48);
}
.login-bottom .spacer { flex: 1; }
.login-bottom a { color: hsl(0 0% 100% / .62); transition: color var(--dur) var(--ease); }
.login-bottom a:hover { color: #fff; }

/* ---- stred: text vľavo, karta vpravo ---- */
/* nadpis pod značkou – rovnaké prevedenie ako predtým, iná poloha */
.login-headline {
    font-size: clamp(1.05rem, 1.55vw, 1.5rem); font-weight: 800;
    letter-spacing: -.028em; line-height: 1.2; white-space: nowrap;
    text-shadow: 0 .15rem 1.6rem hsl(210 70% 3% / .74);
}
.login-headline em {
    font-style: normal;
    background: linear-gradient(100deg, hsl(36 44% 88%), hsl(var(--a-h) 40% 72%));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Karta v strede voľnej plochy – tak ju používa prvé spustenie aj dvojfázové
   overenie. Samotné prihlásenie má vlastné, vodorovné rozloženie nižšie. */
.login-stage {
    display: grid; place-items: center;
    padding: clamp(1rem, 3vh, 2.5rem) 0;
}

/* ---- sklenená karta s formulárom ---- */
.login-card {
    flex: 0 0 auto; width: min(21.5rem, 100%);
    padding: clamp(1.4rem, 2.2vw, 1.9rem);
    border-radius: var(--r-xl);
    background: hsl(210 48% 9% / .78);
    border: 1px solid hsl(0 0% 100% / .11);
    box-shadow: 0 2rem 4.5rem -1rem hsl(210 70% 2% / .88),
                inset 0 1px 0 hsl(0 0% 100% / .08);
    backdrop-filter: blur(1.6rem) saturate(150%);
    -webkit-backdrop-filter: blur(1.6rem) saturate(150%);
}
.login-card h1 { font-size: 1.42rem; font-weight: 800; letter-spacing: -.03em; }
.login-card > p.sub { color: hsl(0 0% 100% / .58); margin-top: .3rem; margin-bottom: 1.25rem; font-size: .82rem; }
.login-card form { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ---- vodorovný panel prihlásenia ---- */
/* Panel je kompaktný a vycentrovaný – sadne pod logo na stene, ktoré je
   v hornej polovici fotografie. Spodné odsadenie ho drží preč od päty. */
.login-stage.is-row {
    align-items: end; justify-items: center;
    padding: clamp(1rem, 3vh, 2.5rem) 0 clamp(3rem, 11vh, 7.5rem);
}
.login-card.is-row {
    width: min(44rem, 100%);
    padding: clamp(1.1rem, 1.6vw, 1.4rem) clamp(1.25rem, 1.9vw, 1.6rem);
    display: grid; gap: .85rem;
    grid-template-columns: minmax(0, 1fr);
}
/* pozdrav nad poľami, na stred – panel tak drží pohromade ako jeden celok */
.login-card.is-row > .lc-intro { text-align: center; padding-right: 0; }
.login-card.is-row > .lc-intro::after { display: none; }
.login-card.is-row > .lc-intro > h1 { font-size: 1.15rem; }
.login-card.is-row > .lc-intro > p.sub {
    color: hsl(0 0% 100% / .58); margin-top: .15rem; margin-bottom: 0; font-size: .78rem;
}

/* zvislý predel medzi popisom a formulárom – jemný, len naznačený */
.lc-intro { position: relative; padding-right: clamp(.9rem, 1.6vw, 1.6rem); }
.lc-intro::after {
    content: ''; position: absolute; right: 0; top: -.2rem; bottom: -.2rem;
    width: 1px; background: linear-gradient(180deg, transparent, hsl(0 0% 100% / .16), transparent);
}

/* upozornenie ide cez celú šírku panela */
.lc-alert { grid-column: 1 / -1; margin: 0; }

/* polia vedľa seba: e-mail · heslo · tlačidlo, pod nimi doplnkové voľby */
.login-card.is-row .lc-form {
    display: grid; gap: .7rem clamp(.7rem, 1.2vw, 1.1rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(9.5rem, auto);
    grid-template-areas:
        "email pass submit"
        "meta  meta meta";
    align-items: start;
}
.lc-email  { grid-area: email; }
.lc-pass   { grid-area: pass; }
.lc-submit { grid-area: submit; align-self: start; padding-top: 1.42rem; }
.lc-meta   { grid-area: meta; display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.lc-meta .spacer { flex: 1; }
.login-card .field > label { color: hsl(0 0% 100% / .78); }
.login-card .input {
    background: hsl(210 50% 7% / .64);
    border-color: hsl(0 0% 100% / .13);
}
.login-card .input:focus { background: hsl(210 50% 7% / .88); }
.login-card .input::placeholder { color: hsl(0 0% 100% / .38); }
.login-card .check { color: hsl(0 0% 100% / .8); font-size: .8rem; }

.login-row { display: flex; align-items: center; gap: var(--sp-3); }
.login-row .spacer { flex: 1; }
.login-link { font-size: .77rem; color: hsl(0 0% 100% / .58); font-weight: 550;
    transition: color var(--dur) var(--ease); }
.login-link:hover { color: hsl(var(--a-h) 42% 72%); }

.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 2.8rem; }
.pw-toggle {
    position: absolute; right: .35rem; top: 50%; translate: 0 -50%;
    width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
    border-radius: var(--r-xs); color: hsl(0 0% 100% / .5);
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.pw-toggle .icon { width: 1rem; height: 1rem; }
.pw-toggle:hover { color: #fff; background: hsl(0 0% 100% / .08); }

.caps-hint { display: none; align-items: center; gap: .35rem; margin-top: .1rem;
    font-size: .73rem; color: var(--warn); }
.caps-hint.on { display: flex; }

.btn.is-loading { pointer-events: none; opacity: .85; }
.btn .spinner {
    width: 1rem; height: 1rem; border-radius: 50%; flex: none;
    border: 2px solid hsl(0 0% 100% / .3); border-top-color: #fff;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.login-secure {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .71rem; color: hsl(0 0% 100% / .45);
}
.login-secure .icon { width: .8rem; height: .8rem; }

.login-mobile-brand { display: none; }

.alert {
    display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.7rem 0.8rem;
    border-radius: var(--r-sm); font-size: 0.81rem; font-weight: 550; line-height: 1.5;
}
/* upozornenie nesmie byť zliate s obsahom pod ním; ak je posledné, medzeru nepridávame */
.alert:not(:last-child) { margin-bottom: var(--sp-4); }
.alert .icon { flex: none; margin-top: 0.0625rem; width: 1.05rem; height: 1.05rem; }
.alert-error { background: hsl(4 62% 56% / .16); border: 1px solid hsl(4 62% 56% / .36); color: hsl(4 68% 76%); }
.alert-ok    { background: hsl(162 46% 44% / .16); border: 1px solid hsl(162 46% 44% / .32); color: hsl(162 48% 62%); }
.alert-info  { background: hsl(205 42% 58% / .16); border: 1px solid hsl(205 42% 58% / .32); color: hsl(205 48% 74%); }
[data-theme="light"] .alert-error { color: hsl(4 58% 42%); }
[data-theme="light"] .alert-ok { color: hsl(162 46% 27%); }
[data-theme="light"] .alert-info { color: hsl(205 44% 34%); }

/* Užšie okná: najprv sa tlačidlo presunie pod polia, potom sa panel poskladá
   celý pod seba. Formulár tak nikdy nemá stiesnené stĺpce. */
@media (max-width: 1180px) {
    .login-card.is-row .lc-form {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "email pass"
            "submit submit"
            "meta  meta";
    }
    /* tlačidlo pod poliami nemá byť cez celú šírku – pôsobí to ako pás */
    .lc-submit { padding-top: 0; justify-self: end; width: min(18rem, 100%); }
}
@media (max-width: 880px) {
    .login-card.is-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        /* 28rem samo osebe presiahne úzku obrazovku aj s odsadením stránky */
        max-width: min(28rem, 100%); margin-inline: auto;
    }
    .lc-submit { justify-self: stretch; width: 100%; }
    .lc-intro { padding-right: 0; }
    .lc-intro::after { display: none; }
    .login-card.is-row .lc-form {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "email" "pass" "submit" "meta";
    }
    .login-stage.is-row { justify-items: center; }
}
@media (max-width: 760px) {
    .login-head { gap: .9rem; }
    .login-headline { font-size: 1.05rem; }
}
@media (max-width: 560px) {
    .login-bottom { justify-content: center; }
    .login-bottom .spacer { display: none; }
    .lc-meta { gap: var(--sp-3); }
}
@media (max-width: 420px) {
    .login-headline { white-space: normal; }
}

/* Pozvánka má iné polia než prihlásenie: komu je určená, dve heslá a potvrdenie.
   Bez vlastného rozvrhnutia by sa prvky do mriežky prihlásenia ukladali samé
   a rozsypali by sa. */
.login-card.is-row .lc-form.lc-pozvanka {
    grid-template-areas:
        "kto   kto   kto"
        "email pass  submit";
}
.lc-kto { grid-area: kto; margin-bottom: .1rem; }
@media (max-width: 1180px) {
    .login-card.is-row .lc-form.lc-pozvanka {
        grid-template-areas:
            "kto    kto"
            "email  pass"
            "submit submit";
    }
}
@media (max-width: 880px) {
    .login-card.is-row .lc-form.lc-pozvanka {
        grid-template-areas: "kto" "email" "pass" "submit";
    }
}

/* ---------- 27. Faktúra – tlač ---------- */
.invoice-sheet {
    background: #fff; color: #101C27; border-radius: var(--r-lg);
    padding: 46px 50px; box-shadow: var(--shadow-lg); max-width: 900px; margin: 0 auto;
}
.invoice-sheet h1 { font-size: 27px; letter-spacing: -.8px; }
.invoice-sheet .inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin: 32px 0; }
.invoice-sheet .inv-party h4 { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; color: #7E8B98; margin-bottom: 9px; }
.invoice-sheet .inv-party strong { font-size: 16px; display: block; margin-bottom: 4px; }
.invoice-sheet .inv-party p { font-size: 13.5px; color: #4A5A6A; line-height: 1.65; }
.invoice-sheet table { margin-top: 8px; }
.invoice-sheet table th { background: #F5F1EA; color: #68798A; font-size: 10.5px; padding: 10px 12px; border-bottom: 1px solid #E7E1D7; }
.invoice-sheet table td { padding: 12px; border-bottom: 1px solid #E7E1D7; font-size: 13.5px; }
.invoice-sheet .inv-total { margin-left: auto; width: 320px; margin-top: 22px; }
.invoice-sheet .inv-total div { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
.invoice-sheet .inv-total .grand { border-top: 2px solid #101C27; margin-top: 8px; padding-top: 13px; font-size: 19px; font-weight: 800; }

/* ---------- 28. Rôzne ---------- */
.divider { height: 1px; background: var(--line-soft); }
.kbd { font-family: var(--font); font-size: 0.6875rem; font-weight: 700; padding: 2px 0.375rem; border-radius: 0.3125rem; background: var(--surface-hover); border: 1px solid var(--line); color: var(--tx-3); }
.dl { display: grid; grid-template-columns: 132px 1fr; gap: 0.6875rem 1rem; font-size: 0.875rem; }
.dl dt { color: var(--tx-3); font-weight: 600; font-size: 0.8125rem; }
.dl dd { color: var(--tx-1); min-width: 0; word-break: break-word; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted { color: var(--tx-3); }
.small { font-size: 0.7812rem; }
.center { text-align: center; }
.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); }
.mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); }
.hidden { display: none !important; }

.page-head { display: flex; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.page-head h1 { font-size: 1.5625rem; font-weight: 800; letter-spacing: -.9px; }
.page-head p { color: var(--tx-3); font-size: 0.875rem; margin-top: 3px; }

/* Filtrovacia lišta – všetky ovládacie prvky majú zhodnú výšku, aby lícovali */
.toolbar {
    --control-h: 2.5rem;      /* zhodné s .btn – jedna výška v celej aplikácii */
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}
.toolbar form { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; width: 100%; }
.toolbar .input,
.toolbar .select,
.toolbar .btn,
.toolbar .icon-btn {
    height: var(--control-h); min-height: var(--control-h);
    padding-top: 0; padding-bottom: 0;
}
.toolbar .icon-btn { width: var(--control-h); }
/* v pružnom riadku sa polia nesmú rozťahovať na celú šírku */
.toolbar .input, .toolbar .select { width: auto; }
.toolbar .input-group { flex: 1 1 13rem; max-width: 22rem; min-width: 11rem; }
.toolbar .input-group .input { width: 100%; padding-left: 2.3rem; }
.toolbar .select { min-width: 9rem; max-width: 16rem; }
.toolbar input[type="date"] { width: 9.5rem; }
.toolbar .check { height: var(--control-h); padding: 0 .1rem; }
.toolbar-end { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; }

.sparkline { width: 100%; height: 2.875rem; overflow: visible; }
.donut-wrap { display: grid; place-items: center; position: relative; }
.donut-center { position: absolute; text-align: center; }
.donut-center strong { display: block; font-size: 1.4375rem; font-weight: 800; letter-spacing: -.7px; }
.donut-center span { font-size: 0.7188rem; color: var(--tx-3); }
.legend { display: flex; flex-direction: column; gap: 0.5625rem; }
.legend-item { display: flex; align-items: center; gap: 0.5625rem; font-size: 0.8438rem; }
.legend-dot { width: 0.5625rem; height: 0.5625rem; border-radius: 3px; flex: none; }
.legend-item .spacer { flex: 1; }
.legend-item b { font-variant-numeric: tabular-nums; }

.bars { display: flex; align-items: flex-end; gap: 0.5rem; height: 9.375rem; }
.bars .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; height: 100%; justify-content: flex-end; }
.bars .bar {
    width: 100%; max-width: 2.125rem; border-radius: 0.4375rem 0.4375rem 3px 3px;
    background: linear-gradient(180deg, var(--accent), hsl(var(--a-h) 34% 40%));
    transition: height .7s var(--ease); min-height: 3px;
    box-shadow: 0 -2px 14px -4px var(--accent);
}
.bars .bar-lbl { font-size: 0.6875rem; color: var(--tx-3); font-weight: 600; }

.fade-up { animation: fadeUp .45s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }
.fade-up:nth-child(2) { animation-delay: .05s; }
.fade-up:nth-child(3) { animation-delay: .1s; }
.fade-up:nth-child(4) { animation-delay: .15s; }

.mobile-only { display: none; }

/* ---------- 29. Responzívne ---------- */
@media (max-width: 1280px) {
    .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .g-main { grid-template-columns: minmax(0, 1fr); }
    .kanban { grid-template-columns: repeat(4, minmax(240px, 1fr)); }
}
@media (max-width: 1024px) {
    .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .app { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed; left: 0; top: 0; width: 17.625rem; --sidebar-w: 17.625rem;
        transform: translateX(-100%); transition: transform .3s var(--ease);
        box-shadow: var(--shadow-lg);
    }
    .sidebar.open { transform: none; }
    .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 39; background: hsl(210 58% 3% / .64); opacity: 0; visibility: hidden; transition: all .25s var(--ease); }
    .sidebar-scrim.open { opacity: 1; visibility: visible; }
    .mobile-only { display: inline-flex; }
    .page { padding: var(--sp-4); }
    .topbar { padding: 0 var(--sp-4); }
    .searchbar { min-width: 0; width: 2.5rem; padding: 0; justify-content: center; }
    .searchbar span, .searchbar kbd { display: none; }
    .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .user-chip-txt { display: none; }
    .invoice-sheet { padding: 26px 20px; }
    .invoice-sheet .inv-grid { grid-template-columns: 1fr; gap: 20px; }
    .dl { grid-template-columns: 1fr; gap: 3px 0; }
    .dl dd { margin-bottom: 0.625rem; }
}
@media (max-width: 520px) {
    .toasts { left: 0.875rem; right: 0.875rem; bottom: 0.875rem; max-width: none; }
    .page-head h1 { font-size: 1.3125rem; }
    .stat-value { font-size: 1.5625rem; }
}

/* ---------- 30. Tlač ---------- */
@media print {
    .sidebar, .topbar, .no-print, .toasts, .aurora { display: none !important; }
    .app { grid-template-columns: 1fr; }
    .page { padding: 0; }
    body { background: #fff; }
    .invoice-sheet { box-shadow: none; padding: 0; max-width: none; }
}

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

/* ---------- 31. Pomocné triedy viditeľnosti ---------- */
.hidden-mobile { display: grid; }
@media (max-width: 860px) { .hidden-mobile { display: none !important; } }

/* ---------- 32. Prepínač veľkosti rozhrania ---------- */
.btn.is-active {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent-line);
}
.btn.is-active:hover { background: var(--accent-soft); color: var(--accent); }

/* ---------- 33. Poštový klient ---------- */
.mail {
    display: grid;
    grid-template-columns: 12rem 22rem minmax(0, 1fr);
    gap: var(--sp-3);
    height: calc(100vh - var(--topbar-h) - var(--sp-5) - var(--sp-7) - 3.4rem);
    min-height: 26rem;
}
.mail-pane {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-md), var(--glow);
    backdrop-filter: blur(1.1rem); -webkit-backdrop-filter: blur(1.1rem);
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.mail-pane-head {
    display: flex; align-items: center; gap: .5rem; flex: none;
    padding: .6rem .75rem; border-bottom: 1px solid var(--line-soft);
}
.mail-pane-body { overflow-y: auto; flex: 1; min-height: 0; }

.mail-folder {
    display: flex; align-items: center; gap: .55rem;
    padding: .45rem .6rem .45rem calc(.6rem + var(--lvl, 0) * .85rem);
    border-radius: var(--r-xs); color: var(--tx-2); font-size: .82rem; font-weight: 550;
    text-align: left; width: 100%;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* priečinok, ktorý server vytvoril len ako medzičlánok – správy sa doň nedajú uložiť */
.mail-folder.is-group { color: var(--tx-3); cursor: default; }
.mail-folder.is-group:hover { background: none; color: var(--tx-3); }
.mail-folder[style*="--lvl:1"] .icon, .mail-folder[style*="--lvl:2"] .icon,
.mail-folder[style*="--lvl:3"] .icon { opacity: .8; }
.mail-folder:hover { background: var(--surface-hover); color: var(--tx-1); }
.mail-folder.is-active { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.mail-folder .icon { width: 1rem; height: 1rem; }
.mail-folder .cnt { margin-left: auto; font-size: .68rem; font-weight: 700; color: var(--tx-3); }
.mail-folder.is-active .cnt { color: var(--accent); }
.mail-folder .cnt.unread { background: var(--accent); color: #fff; padding: 0 .35rem; border-radius: var(--r-full); }

/* zoznam správ je jeden formulár, aby sa dali označené správy spracovať naraz */
.mail-list { display: flex; flex-direction: column; min-height: 0; flex: 1; }

.mail-item {
    display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
    padding: .5rem .7rem; border-bottom: 1px solid var(--line-soft);
    transition: background var(--dur) var(--ease); position: relative;
}
.mail-item:hover { background: var(--surface-hover); }
.mail-item.is-active { background: var(--accent-softer); box-shadow: inset .18rem 0 0 var(--accent); }
.mail-item.is-picked { background: var(--accent-soft); }
.mail-item.unread .mi-from, .mail-item.unread .mi-subj { font-weight: 750; color: var(--tx-1); }
.mail-item.unread::after {
    content: ''; position: absolute; right: .45rem; top: 50%; translate: 0 -50%;
    width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent);
}
.mail-item.unread .mi-link { padding-right: .7rem; }

.mi-pick { display: inline-flex; align-items: center; flex: none; padding: .1rem; cursor: pointer; }
.mi-pick input { width: 1rem; height: 1rem; accent-color: var(--accent); cursor: pointer; margin: 0; }
.mail-item .avatar { flex: none; }
.mi-link { flex: 1; min-width: 0; display: block; }
.mi-marks { display: inline-flex; gap: .25rem; align-items: center; flex: none; }

.mi-top { display: flex; align-items: baseline; gap: .4rem; }
.mi-from { font-size: .8rem; font-weight: 600; color: var(--tx-2); flex: 1; min-width: 0;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-date { font-size: .68rem; color: var(--tx-3); flex: none; }
.mi-subj { font-size: .78rem; color: var(--tx-2); margin-top: .1rem;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-tags { display: flex; gap: .3rem; margin-top: .2rem; align-items: center; }

/* lišta hromadných akcií – nad zoznamom, len keď je niečo vybrané */
/* dva riadky, aby sa všetky akcie zmestili aj do úzkeho stĺpca */
.mail-bulk {
    display: flex; flex-direction: column; gap: .3rem; flex: none;
    padding: .45rem .5rem .5rem .7rem;
    border-bottom: 1px solid var(--line-soft);
    background: var(--accent-softer);
}
.mail-bulk-top, .mail-bulk-ops { display: flex; align-items: center; gap: .3rem; }
.mail-bulk-ops { flex-wrap: wrap; }
.mail-bulk-n { font-size: .74rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
.mail-bulk-top .btn { font-size: .7rem; padding: 0 .4rem; height: 1.5rem; min-height: 1.5rem; }
.mail-bulk .select {
    flex: 1 1 6.5rem; min-width: 6rem; width: auto;
    height: 1.75rem; min-height: 1.75rem; font-size: .72rem;
    padding: 0 1.5rem 0 .5rem; background-position: right .4rem center;
}

.mail-read-head { padding: .9rem 1.1rem; border-bottom: 1px solid var(--line-soft); flex: none; }
/* akčný riadok: formuláre sa nesmú roztiahnuť na celú šírku */
.mail-read-head form { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }
.mail-read-head form .select { width: 9rem; height: 1.75rem; min-height: 1.75rem;
    font-size: .72rem; padding: 0 1.5rem 0 .5rem; background-position: right .4rem center; }
.mail-body-frame { width: 100%; border: 0; flex: 1; min-height: 18rem; background: #fff; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.mail-body-text { padding: 1.1rem; white-space: pre-wrap; font-size: .85rem; line-height: 1.65; overflow-y: auto; flex: 1; }
.mail-attach {
    display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .6rem;
    border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface-2);
    font-size: .75rem; color: var(--tx-2); transition: all var(--dur) var(--ease);
}
.mail-attach:hover { border-color: var(--accent-line); color: var(--tx-1); }

@media (max-width: 1200px) {
    .mail { grid-template-columns: 10rem 18rem minmax(0, 1fr); }
}
@media (max-width: 980px) {
    .mail { grid-template-columns: 1fr; height: auto; }
    .mail-pane { max-height: 30rem; }
    .mail-pane.mail-read { max-height: none; }
}


/* ---------- 34. Zjednotenie ovládacích prvkov ---------- */

/* menšie kruhové tlačidlá pre riadky tabuliek, karty a text */
.icon-btn-sm { width: 1.75rem; height: 1.75rem; }
.icon-btn-xs { width: 1.4rem; height: 1.4rem; display: inline-grid; vertical-align: middle; }
.icon-btn-sm .icon, .icon-btn-xs .icon { width: .9rem; height: .9rem; }

/* prepínacie tlačidlo (obľúbené, pripnuté) */
.icon-btn.is-on { color: var(--warn); }
.icon-btn.is-off { color: var(--tx-3); }

/* varianty veľkosti čísla v dlaždici */
.stat-value.sm { font-size: 1.5rem; }
.stat-value.xs { font-size: 1.25rem; }

/* rovnaké rozostupy akcií v hlavičke stránky aj v riadku tabuľky */
.page-head .row { gap: var(--sp-2); }
.page-head form { display: inline-flex; margin: 0; }
/* Tlačidlá v riadku tabuľky potrebujú viditeľnú medzeru – natesno sa ťažko
   trafia a pri tlačidle s popisom pôsobia zliato. */
.table .actions .btn + .btn,
.table .actions form + form,
.table .actions .btn + form,
.table .actions form + .btn { margin-left: .35rem; }
.table .actions form { display: inline-flex; }

/* karta so zoznamom: pätička s počtom a stránkovaním */
.list-foot { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.list-foot .count { font-size: .78rem; color: var(--tx-3); }

/* ikonka dlaždice v menšom prevedení (zoznamy, karty) */
.stat-ico-sm { width: 2rem; height: 2rem; }
.stat-ico-lg { width: 3rem; height: 3rem; }

/* farebný prúžok priority pred názvom úlohy */
.pri-bar { display: block; width: 3px; height: 1.6rem; border-radius: 3px; }

/* tlačidlo na pridanie udalosti v kalendári */
.cal-add.icon-btn { width: 1.5rem; height: 1.5rem; }
.cal-add .icon { width: .85rem; height: .85rem; }

.tl-ico-sm { width: 1.75rem; height: 1.75rem; }
.tl-ico-sm .icon { width: .85rem; height: .85rem; }

.chip .trunc { min-width: 0; }

/* ---------- 34. Priečinky dokumentov ---------- */
/* vľavo strom priečinkov, vpravo zoznam súborov; na úzkych obrazovkách pod sebou */
.g-side { display: grid; grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }

.tree { display: flex; flex-direction: column; gap: .1rem; padding: var(--sp-2); }
.tree-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem .55rem; border-radius: var(--r-sm);
    color: var(--tx-2); font-size: .82rem; text-decoration: none;
    border: 1px solid transparent; min-width: 0;
}
.tree-item:hover { background: var(--surface-2); color: var(--tx-1); }
.tree-item.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--tx-1); border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.tree-item .icon { width: .95rem; height: .95rem; flex: none; opacity: .75; }
.tree-item .tree-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-item .tree-count { font-size: .7rem; color: var(--tx-3); font-variant-numeric: tabular-nums; flex: none; }
.tree-item.sub { padding-left: 1.6rem; }
.tree-sep { height: 1px; background: var(--line-soft); margin: .35rem .3rem; }
.tree-head { display: flex; align-items: center; gap: .4rem; padding: .3rem .55rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tx-3); }
.tree-edit { opacity: 0; flex: none; }
.tree-item:hover .tree-edit, .tree-item.active .tree-edit { opacity: .7; }
.tree-edit:hover { opacity: 1; }

/* prílohy pri účtovnom doklade */
.attach { display: flex; flex-direction: column; gap: .35rem; }
.attach-row {
    display: flex; align-items: center; gap: .55rem;
    padding: .45rem .6rem; border: 1px solid var(--line-soft); border-radius: var(--r-sm);
    background: var(--surface-2); font-size: .8rem;
}
.attach-row .trunc { flex: 1 1 auto; min-width: 0; }

/* ---------- 35. Banka a pokladnica ---------- */
.acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--sp-4); }
.acct {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-md), var(--glow); padding: var(--sp-4);
    display: flex; flex-direction: column; gap: .6rem;
}
.acct.is-selected { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.acct-top { display: flex; align-items: flex-start; gap: .65rem; }
.acct-name { font-weight: 650; font-size: .92rem; line-height: 1.25; }
.acct-iban { font-size: .72rem; color: var(--tx-3); font-variant-numeric: tabular-nums; word-break: break-all; }
.acct-balance { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.acct-foot { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: auto; padding-top: .3rem; }
.amount-in  { color: var(--ok);   font-variant-numeric: tabular-nums; font-weight: 600; }
.amount-out { color: var(--tx-1); font-variant-numeric: tabular-nums; }

/* mapovanie CSV stĺpcov pri importe výpisu */
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--sp-3); }
.csv-preview { max-height: 15rem; overflow: auto; border: 1px solid var(--line-soft); border-radius: var(--r-sm); }
.csv-preview table { font-size: .72rem; white-space: nowrap; }

@media (max-width: 900px) {
    .g-side { grid-template-columns: minmax(0, 1fr); }
}

/* riadok stromu: odkaz plus tlačidlo úpravy (tlačidlo nesmie byť vnorené v odkaze) */
.tree-row { display: flex; align-items: center; gap: .1rem; }
.tree-row > .tree-item { flex: 1 1 auto; min-width: 0; }
.tree-row .tree-edit { width: 1.55rem; height: 1.55rem; flex: none; }
.tree-row .tree-edit .icon { width: .8rem; height: .8rem; }
.tree-row:hover .tree-edit { opacity: .7; }

/* kompaktné ovládacie prvky vnútri tabuliek */
.select-sm, .input-sm { height: 1.95rem; padding-top: 0; padding-bottom: 0; font-size: .76rem; }

/* širšie modálne okno pre nastavenia s viacerými sekciami */
.modal.modal-lg { width: min(52rem, 100%); }

/* upozornenie – menej naliehavé ako chyba, napr. neplatný IBAN */
.alert-warn { background: hsl(28 78% 54% / .16); border: 1px solid hsl(28 78% 54% / .34); color: hsl(28 80% 70%); }
[data-theme="light"] .alert-warn { color: hsl(26 74% 34%); }

/* ---------- 36. Profilová fotografia ---------- */
/* skryté pole pre výber súboru – ovláda sa značkou <label> */
.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.avatar-pick { position: relative; flex: none; }
.avatar-pick-btn {
    position: absolute; right: -.15rem; bottom: -.15rem;
    width: 1.7rem; height: 1.7rem; border-radius: var(--r-full);
    display: grid; place-items: center; cursor: pointer;
    background: var(--surface-solid); border: 1px solid var(--line);
    color: var(--tx-2); box-shadow: var(--shadow-sm);
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.avatar-pick-btn:hover { color: var(--tx-1); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.avatar-pick-btn .icon { width: .85rem; height: .85rem; }

/* tlačidlo v podobe značky <label> má lícovať s ostatnými tlačidlami */
label.btn { cursor: pointer; }

/* ---------- 37. Role a oprávnenia ---------- */
.role-box {
    background: var(--surface-2); border: 1px solid var(--line-soft);
    border-radius: var(--r-sm); padding: var(--sp-3);
}
.role-note { font-size: .81rem; color: var(--tx-2); margin-bottom: .6rem; }
.role-perms { display: flex; flex-wrap: wrap; gap: .3rem; }
.perm {
    display: inline-flex; align-items: center; gap: .28rem;
    font-size: .73rem; font-weight: 550; padding: .2rem .5rem;
    border-radius: var(--r-full); border: 1px solid transparent;
}
.perm-on  { background: hsl(162 46% 44% / .16); border-color: hsl(162 46% 44% / .32); color: hsl(158 70% 62%); }
.perm-off { background: var(--surface); border-color: var(--line-soft); color: var(--tx-3); text-decoration: line-through; }
[data-theme="light"] .perm-on { color: hsl(162 46% 27%); }

/* ---------- 38. Saldokonto ---------- */
/* pruh vekovej štruktúry pohľadávok a záväzkov */
.aging { display: flex; height: .55rem; border-radius: var(--r-full); overflow: hidden; background: var(--surface-2); }
.aging-seg { display: block; height: 100%; background: hsl(var(--ag-h) 34% 50%); }
.aging-seg + .aging-seg { border-left: 1px solid var(--surface-solid); }

/* ---------- 39. Výber otvorenej položky pri úhrade ---------- */
.open-items {
    margin-top: var(--sp-3); padding: var(--sp-3);
    background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-sm);
}
.open-items-head {
    display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tx-3);
}
.open-item {
    display: flex; align-items: center; gap: .75rem; width: 100%;
    padding: .5rem .65rem; margin-bottom: .25rem; text-align: left;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-sm);
    color: var(--tx-2); font-size: .8rem; cursor: pointer;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.open-item:last-child { margin-bottom: 0; }
.open-item:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--tx-1); }
.open-item.is-picked {
    border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--tx-1);
}
.open-item.is-late .oi-due { color: var(--dang); }
.oi-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.oi-vs { font-size: .7rem; color: var(--tx-3); }
.oi-note { font-size: .72rem; color: var(--tx-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oi-due { flex: none; font-size: .72rem; color: var(--tx-3); display: flex; align-items: center; gap: .35rem; }
.oi-amount { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }

/* atribút hidden musí prebiť triedy s vlastným display (napr. .btn alebo .field) */
[hidden] { display: none !important; }

/* ---------- 40. Zostavy ---------- */
.section-label {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--tx-3); font-weight: 700; margin: 0 0 var(--sp-3);
}
.report-card {
    display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-md), var(--glow); color: var(--tx-2); text-decoration: none;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.report-card:hover { border-color: color-mix(in srgb, var(--accent) 48%, transparent); transform: translateY(-1px); }
.report-card .report-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.report-card strong { color: var(--tx-1); font-size: .9rem; font-weight: 650; }
.report-card > .icon:last-child { flex: none; opacity: .5; }

/* ---------- 41. Kurzový lístok ---------- */
.fx-chart {
    display: flex; align-items: flex-end; gap: 2px;
    height: 8rem; padding: .4rem; background: var(--surface-2);
    border: 1px solid var(--line-soft); border-radius: var(--r-sm);
}
.fx-bar {
    flex: 1 1 auto; min-width: 2px; border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
}
.fx-bar:hover { background: var(--accent); }
.fx-result {
    font-size: 1.5rem; font-weight: 750; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; color: var(--tx-1);
}

/* ---------- 42. Záznam v otvorených dátach ---------- */
.data-item {
    padding: var(--sp-3); border: 1px solid var(--line-soft);
    border-radius: var(--r-sm); background: var(--surface-2);
}

/* zoznamy vo vysvetľujúcich textoch – reset im inak odoberie odrážky */
.md-list { list-style: revert; padding-left: 1.15rem; }
.md-list li { margin-bottom: .15rem; }

/* ---------- 43. Mobil a tablet ----------
   Pravidlá sú zámerne až na konci súboru, aby prepísali staršie responzívne bloky.
   Rozmery: telefón ≤ 620 px, veľký telefón ≤ 760 px, tablet ≤ 1024 px. */

/* --- 43a. Poistky proti vodorovnému pretečeniu ---
   Grid a flex položky majú predvolene min-width:auto, takže široký obsah
   (napríklad tabuľka v posuvnom rámci) roztlačí celý stĺpec nad šírku okna. */
.stack, .grid > *, .card, .card-body, .card-head, .card-foot,
.main, .page, .mail-pane, .kcol { min-width: 0; }
.table-wrap { max-width: 100%; }

/* rozdelenie hlavnej a bočnej časti (kalendár, faktúra) */
.g-cal { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; gap: var(--sp-4); }
@media (max-width: 1024px) { .g-cal { grid-template-columns: minmax(0, 1fr); } }

/* konto v hornej lište – dotykový cieľ ako ostatné ikonové tlačidlá */
.topbar-user {
    display: grid; place-items: center; flex: none;
    width: 2.5rem; height: 2.5rem; border-radius: var(--r-full);
    background: transparent; border: 1px solid transparent; cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.topbar-user:hover { background: var(--surface-hover); border-color: var(--line); }
/* ponuka konta sa otvára pod tlačidlom pri pravom okraji */
#menu-user-top { right: 0; }
/* meno a e-mail sú vlastné údaje, nie nadpis – veľké písmená sem nepatria */
#menu-user-top .menu-head { text-transform: none; letter-spacing: normal; line-height: 1.35; }
#menu-user-top .menu-head strong { font-size: 0.875rem; font-weight: 700; }

/* --- 43b. Bezpečná zóna (telefóny s výrezom) --- */
@media (max-width: 860px) {
    .page {
        padding-left: max(var(--sp-4), var(--safe-l));
        padding-right: max(var(--sp-4), var(--safe-r));
        padding-bottom: max(var(--sp-6), var(--safe-b));
    }
    /* horná lišta v samostatnej aplikácii siaha pod stavový riadok telefónu */
    .topbar {
        height: calc(var(--topbar-h) + var(--safe-t));
        padding-top: var(--safe-t);
        padding-left: max(var(--sp-3), var(--safe-l));
        padding-right: max(var(--sp-3), var(--safe-r));
    }
    .sidebar .brand {
        height: calc(var(--topbar-h) + var(--safe-t));
        padding-top: var(--safe-t);
        padding-left: max(var(--sp-4), var(--safe-l));
    }
    /* Konto je na telefóne v hornej lište. V päte bočnej ponuky by bolo druhýkrát
       a navyše na mieste, kde systém preberá dotyk na gesto – preto sa skryje.
       Zoznam ponuky tak dostane celú výšku. */
    .sidebar-foot { display: none; }
    .nav { padding-bottom: max(var(--sp-4), var(--safe-b)); }
    .toasts {
        left: max(0.875rem, var(--safe-l));
        right: max(0.875rem, var(--safe-r));
        bottom: max(0.875rem, var(--safe-b));
        max-width: none;
    }
}

/* --- 43c. Tablet --- */
@media (max-width: 1024px) {
    .g-auto { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
    .acct-grid { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
    .map-grid { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
    .modal { width: min(42.5rem, 100%); }
}

/* --- 43d. Hlavička stránky a lišty s akciami --- */
@media (max-width: 760px) {
    .page-head { gap: var(--sp-3); margin-bottom: var(--sp-4); }
    .page-head > .row { width: 100%; flex-wrap: wrap; }
    .page-head .spacer { display: none; }
    .card-head { flex-wrap: wrap; row-gap: var(--sp-2); }
    .card-head .spacer { flex-basis: 100%; height: 0; }
    .card-body { padding: var(--sp-4); }
    .card-foot { padding: var(--sp-3) var(--sp-4); }
    .form-actions { flex-wrap: wrap; }
    .form-actions .btn { flex: 1 1 auto; }
    .list-foot { row-gap: var(--sp-2); }
}

/* taby a filtre sa na úzkej obrazovke posúvajú vodorovne, nezalamujú sa */
@media (max-width: 760px) {
    .tabs {
        width: 100%; overflow-x: auto; scrollbar-width: none;
        -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab { flex: none; scroll-snap-align: start; }
}

/* --- 43e. Tabuľky ako karty ---
   JavaScript doplní každej bunke data-label z hlavičky a tabuľkám s rozumným
   počtom stĺpcov nastaví data-cards="1". Široké zostavy (predvaha, súvaha)
   ostávajú tabuľkou a posúvajú sa vodorovne. */
@media (max-width: 620px) {
    .table[data-cards="1"] thead { display: none; }
    .table[data-cards="1"], .table[data-cards="1"] tbody,
    .table[data-cards="1"] tr, .table[data-cards="1"] td { display: block; width: 100%; }
    .table[data-cards="1"] tr {
        border: 1px solid var(--line-soft); border-radius: var(--r-sm);
        background: var(--surface-2); margin-bottom: var(--sp-3); padding: 0.15rem 0;
    }
    .table[data-cards="1"] tbody tr:hover { background: var(--surface-2); }
    .table[data-cards="1"] td {
        display: flex; align-items: center; justify-content: space-between;
        gap: var(--sp-4); padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line-soft);
        text-align: right; min-height: 2.4rem;
    }
    .table[data-cards="1"] tr td:last-child { border-bottom: 0; }
    .table[data-cards="1"] td::before {
        content: attr(data-label); flex: none; text-align: left;
        font-size: 0.7188rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: .6px; color: var(--tx-3); max-width: 45%;
    }
    /* bunka bez názvu stĺpca (výber, akcie) zaberie celý riadok */
    .table[data-cards="1"] td[data-label=""] { justify-content: flex-end; }
    .table[data-cards="1"] td[data-label=""]::before { display: none; }
    .table[data-cards="1"] .actions { text-align: right; }
    .table[data-cards="1"] td > .row { justify-content: flex-end; }
    .table[data-cards="1"] .progress { min-width: 6rem; }
    .table[data-cards="1"] td.num, .table[data-cards="1"] td .t-num { text-align: right; }

    /* tabuľka, ktorá ostáva tabuľkou – naznačíme, že sa dá posúvať */
    .table-wrap:not(:has(.table[data-cards="1"])) {
        -webkit-overflow-scrolling: touch;
        background:
            linear-gradient(to right, var(--surface) 30%, transparent) left / 2.5rem 100% no-repeat local,
            linear-gradient(to left, var(--surface) 30%, transparent) right / 2.5rem 100% no-repeat local;
    }
    .table-hint { display: block; }
}
.table-hint { display: none; font-size: 0.7188rem; color: var(--tx-3); padding: 0 var(--sp-4) var(--sp-2); }

/* --- 43f. Formuláre a riadkové mriežky (faktúra, účtovný doklad) --- */
@media (max-width: 760px) {
    .inv-head, .acc-head { display: none !important; }
    .inv-row, .acc-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.45rem !important;
        padding: var(--sp-3); margin-bottom: var(--sp-3) !important;
        border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface-2);
    }
    .inv-row > input[name="description[]"], .acc-row > input[name="line_description[]"] { grid-column: 1 / -1; }
    .acc-row > select[name="vat_section[]"] { grid-column: 1 / -1; }
    .inv-row .inv-line { grid-column: 1 / -1; text-align: right !important; font-size: 0.9375rem; }
    .inv-row .inv-pick, .inv-row .inv-del, .acc-row .acc-del { justify-self: end; }
    .inv-row .inv-pick { justify-self: start; }
    .dl { grid-template-columns: minmax(0, 1fr); }
}

/* --- 43g. Modálne okno ako spodný panel --- */
@media (max-width: 620px) {
    .modal-backdrop { align-items: end; padding: 0; }
    .modal {
        width: 100%; max-width: none; max-height: 92vh;
        border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0;
        transform: translateY(100%); transition: transform .28s var(--ease);
    }
    .modal-backdrop.open .modal { transform: none; }
    .modal-head { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
    .modal-body { padding: var(--sp-4); }
    .modal-foot {
        flex-direction: column-reverse; align-items: stretch; gap: var(--sp-2);
        padding: var(--sp-3) var(--sp-4) max(var(--sp-4), env(safe-area-inset-bottom));
    }
    .modal-foot .btn { width: 100%; }
    .modal-foot .spacer { display: none; }

    .cmdk-backdrop { padding-top: 0; }
    .cmdk { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; }
    .dropdown .menu { position: fixed; left: 0.75rem; right: 0.75rem; min-width: 0 !important; width: auto; }
}

/* --- 43h. Kalendár na telefóne ---
   Mesačná mriežka ostáva, ale dni sú nižšie a udalosti sa zobrazia ako farebné
   prúžky bez textu; podrobnosti otvorí klepnutie. */
@media (max-width: 620px) {
    .cal-head div { padding: 0.4rem 0.2rem; font-size: 0.625rem; letter-spacing: .4px; }
    .cal-day { min-height: 3.9rem; padding: 0.25rem 0.2rem; gap: 0.15rem; }
    .cal-num { width: 1.35rem; height: 1.35rem; font-size: 0.6875rem; }
    .cal-add { display: none; }
    .cal-ev {
        font-size: 0; line-height: 0; padding: 0; height: 0.3125rem;
        border-radius: 3px; border-left: 0;
        background: hsl(var(--ev-h, var(--a-h)) var(--ev-s, var(--a-s)) var(--ev-l, var(--a-l)));
    }
    .cal-ev-sub { display: none; }
}

/* --- 43i. Kanban a posuvné pásy --- */
@media (max-width: 860px) {
    .kanban {
        grid-auto-flow: column; grid-auto-columns: minmax(82vw, 1fr);
        grid-template-columns: none; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .kcol { scroll-snap-align: start; }
    .gantt, .fx-chart { -webkit-overflow-scrolling: touch; }
}

/* --- 43j. Pošta na telefóne --- */
@media (max-width: 760px) {
    .mail { gap: var(--sp-3); }
    .mail-pane { max-height: 22rem; }
    .mail-pane.mail-read { max-height: none; }
    .mail-bulk-top .btn { height: 2rem; min-height: 2rem; font-size: 0.75rem; padding: 0 0.6rem; }
    .mail-bulk .select { height: 2.25rem; min-height: 2.25rem; font-size: 0.8rem; flex: 1 1 100%; }
    .mail-read-head form { display: flex; width: 100%; margin-top: 0.35rem; }
    .mail-read-head form .select { flex: 1; width: auto; height: 2.25rem; min-height: 2.25rem; }
    .mail-body-frame { min-height: 24rem; }
}

/* --- 43k. Drobnosti --- */
@media (max-width: 620px) {
    .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .backup-codes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat { padding: var(--sp-4); }
    .stat-value { font-size: 1.5rem; }
    .pager a, .pager span { min-width: 2.5rem; height: 2.5rem; }
    .empty { padding: var(--sp-5) var(--sp-3); }
    .timeline .tl-body p { font-size: 0.8438rem; }
    .invoice-sheet { padding: 18px 14px; }
    .report-tile, .report-card { width: 100%; }
}

/* --- 43l. Dotykové ovládanie ---
   Na dotykových zariadeniach musí mať každý ovládací prvok aspoň ~44 CSS px.
   Podmienku dopĺňa šírka okna: prehliadač na starších zariadeniach nemusí
   hlásiť „coarse“, ale úzka obrazovka takmer vždy znamená dotyk. */
/* Rozmery sú zámerne v px, nie v rem: rem sa odvíja od --ui-base (13.75 px),
   takže 2.75rem by bolo len 38 px – dotykový cieľ musí mať skutočných 44 px. */
@media (pointer: coarse), (max-width: 760px) {
    .btn { height: 44px; }
    .btn-sm { height: 38px; }
    .btn-icon { width: 44px; }
    .btn-sm.btn-icon { width: 38px; }
    .icon-btn { width: 44px; height: 44px; }
    .icon-btn-sm, .tree-row .tree-edit { width: 38px; height: 38px; }
    .icon-btn-xs { width: 32px; height: 32px; }
    .input, .select, .textarea { min-height: 44px; }
    .textarea { min-height: 110px; }
    .check input, .mi-pick input,
    input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
    .nav-link, .nav-sub-item, .menu-item, .mail-folder, .tree-item { min-height: 44px; }
    .tab { padding: 0.625rem 1rem; min-height: 40px; }
    .cmdk-input input { min-height: 40px; }
    /* na dotyku neexistuje „prejdenie myšou“ – skryté akcie musia byť vidieť hneď */
    .tree-edit, .tree-item .tree-edit, .tree-row .tree-edit { opacity: .7; }
    /* odkazy v tabuľkách a zoznamoch dostanú okolo seba priestor na klepnutie */
    .table td a.link, .table td button.link, .table td a.trunc {
        display: inline-block; padding: 0.5rem 0;
    }
    .ev-meta a, .cal-ev-sub a { display: inline-flex; align-items: center; padding: 0.35rem 0; }
    /* efekty pri prejdení myšou nemajú na dotyku zmysel a spôsobujú „zaseknutý“ stav */
    .btn:hover, .card:hover, .stat:hover, .kcard:hover, .report-card:hover { transform: none; }
    .cal-add { opacity: 1; }
}

/* iOS Safari zväčšuje stránku, keď má vstupné pole menšie písmo než 16 px */
@media (max-width: 760px) {
    .input, .select, .textarea, input, select, textarea { font-size: 16px; }
    .table-tight .input, .table-tight .select { font-size: 16px; }
}

/* --- 43m. Doladenie po meraní na telefóne a tablete --- */
/* obal obsahu bunky – na veľkej obrazovke je úplne priehľadný */
.td-val { display: contents; }

@media (max-width: 620px) {
    .table[data-cards="1"] td { flex-wrap: wrap; row-gap: 0.15rem; }
    .table[data-cards="1"] .td-val {
        display: block; flex: 1 1 55%; min-width: 0; text-align: right;
    }
    /* stĺpec s farebným prúžkom priority nemá na karte zmysel – stav je vo vlastnom riadku */
    .table[data-cards="1"] td:has(> .td-val > .pri-bar:only-child) { display: none; }
    /* titulok karty (prvý pomenovaný stĺpec) nech je čitateľný cez celú šírku */
    .table[data-cards="1"] td[data-head] .td-val { flex-basis: 100%; text-align: left; font-weight: 650; }
    /* riadky s ikonami a odznakmi zarovnáme doprava ako ostatné hodnoty */
    .table[data-cards="1"] .td-val > .row { justify-content: flex-end; }
    .table[data-cards="1"] td[data-head] .td-val > .row { justify-content: flex-start; }

    .topbar-title p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* na telefóne ide nadpis a akcie pod seba, nie vedľa seba */
    .page-head { flex-direction: column; align-items: stretch; }
    .page-head > .row, .page-head > form { width: 100%; }
    .page-head .tabs { width: 100%; }
    /* vyhľadávacie pole nech využije celú šírku riadka */
    .page-head form > .input, .page-head form > .input-group { flex: 1 1 auto; width: 100%; }
    .cal-ev { height: 0.55rem; }
    .cal-day { gap: 0.2rem; }
}

/* sumy a dátumy sa nesmú lámať do dvoch riadkov – tabuľka sa radšej posunie */
.table td.num, .table td .t-num, .table td.t-num { white-space: nowrap; }

/* zoznam priečinkov je na telefóne zbalený – rozbalí ho šípka v hlavičke */
.mail-folders-toggle { display: none; }
@media (max-width: 760px) {
    .mail-folders-toggle { display: inline-grid; transition: transform var(--dur) var(--ease); }
    .mail-folders:not(.is-open) .mail-pane-body { display: none; }
    .mail-folders.is-open .mail-folders-toggle { transform: rotate(180deg); }
    .mail-folders { max-height: none; }
}

/* pri otvorenom mobilnom menu ostáva stránka pod ním na mieste */
body.menu-open { overflow: hidden; }

/* Tabuľka sa v úzkom stĺpci nemá stláčať tak, že sa každá bunka zlomí do stĺpika –
   radšej si ponechá prirodzenú šírku a rámec sa posúva do strany. */
@media (max-width: 1180px) {
    .table-wrap > .table { width: max-content; min-width: 100%; }
    .table-wrap > .table td { max-width: 22rem; }
}
@media (max-width: 620px) {
    .table-wrap > .table[data-cards="1"] { width: 100%; }
    .table-wrap > .table[data-cards="1"] td { max-width: none; }
}

/* Na telefónoch sa výška okna mení podľa lišty prehliadača – dvh počíta so
   skutočne viditeľnou plochou, vh nie. Staršie prehliadače dostanú vh vyššie. */
@supports (height: 100dvh) {
    body { min-height: 100dvh; }
    @media (max-width: 620px) {
        .modal { max-height: 92dvh; }
        .cmdk { max-height: 100dvh; }
    }
    @media (max-width: 860px) { .sidebar { height: 100dvh; } }
}

/* ---------- 44. Napojenie na Microsoft 365 ---------- */
/* poznámka v dialógu udalosti, že sa uloží aj do kalendára Microsoftu */
.ms-block {
    display: flex; flex-direction: column; gap: .5rem;
    padding: var(--sp-3); border-radius: var(--r-sm);
    background: var(--surface-2); border: 1px solid var(--line-soft);
}
.ms-block p { display: flex; align-items: flex-start; gap: .4rem; margin: 0; }
.ms-block .icon { flex: none; margin-top: .1rem; color: var(--accent); }

/* riadok účtovného zápisu má na telefóne typ plnenia a základ dane cez celú šírku */
@media (max-width: 760px) {
    .acc-row > select[name="vat_code[]"] { grid-column: 1 / -1; }
    .acc-row > input[name="vat_base[]"]  { grid-column: 1 / -1; }
}

/* ---------- 46. Plán neprítomností ---------- */
/* Mesačná mriežka: meno vľavo, dni vpravo. Stĺpce sú úzke a pevné, aby sa
   mesiac zmestil na šírku aj pri dvanástich ľuďoch. */
.plan-tab { table-layout: fixed; }
.plan-tab .plan-meno { width: 12rem; white-space: nowrap; font-size: 0.8125rem; }
.plan-tab .plan-den { width: 1.6rem; padding: 0.3rem 0; text-align: center; font-size: 0.6875rem; }
.plan-tab th.plan-den { padding: 0.5rem 0; }
.plan-tab .is-weekend { background: var(--surface-2); }
.plan-tab .is-today { box-shadow: inset 0 0 0 1px var(--accent); }
.plan-tab tbody tr:hover { background: transparent; }

.plan-znak {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.35rem; height: 1.15rem; padding: 0 0.15rem;
    border-radius: var(--r-xs); font-size: 0.625rem; font-weight: 750;
    text-decoration: none; letter-spacing: -.2px;
}
.plan-znak.is-ok   { background: hsl(162 46% 44% / .24); color: hsl(162 48% 64%); }
.plan-znak.is-wait { background: hsl(28 78% 56% / .22);  color: hsl(28 80% 66%); }
[data-theme="light"] .plan-znak.is-ok   { color: hsl(162 46% 26%); }
[data-theme="light"] .plan-znak.is-wait { color: hsl(26 74% 34%); }

@media (max-width: 900px) {
    /* na mobile sa mriežka posúva vodorovne, meno ostáva viditeľné */
    .plan-tab .plan-meno { position: sticky; left: 0; z-index: 1; background: var(--surface);
                           width: 8.5rem; box-shadow: 1px 0 0 var(--line); }
}

/* ---------- 45. Pracovné cesty ---------- */
/* pole, ktoré v danom kontexte nemá zmysel, ostáva prístupné, len je potlačené */
.field.is-dim { opacity: .5; }

/* Vyúčtovanie sa číta ako doklad, nie ako hustý zoznam – riadky potrebujú vzduch
   a hlavičky sekcií odstup, aby sa časti nezliali do jedného bloku. */
.t-calc td { padding: 0.65rem var(--sp-4); font-size: 0.8438rem; }
.t-calc tr.sec td {
    background: var(--surface-2); font-weight: 750; font-size: 0.8125rem;
    padding-top: 0.7rem; padding-bottom: 0.7rem;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.t-calc tr.sec:first-child td { border-top: 0; }
.t-calc tr:hover { background: transparent; }
.t-calc tr.sec:hover td { background: var(--surface-2); }

/* pásma stravného a prehľad na refakturáciu – rovnaký odstup ako v bežnej tabuľke */
.t-rates td, .t-rates th { padding: 0.6rem var(--sp-4); }
.t-rates .input { height: 2.375rem; min-height: 2.375rem; }
.t-rebill td, .t-rebill th { padding: 0.65rem var(--sp-4); }

@media (max-width: 900px) {
    .exp-head { display: none !important; }
    .exp-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
               padding: var(--sp-3); border: 1px solid var(--line-soft);
               border-radius: var(--r-sm); background: var(--surface-2); }
    .exp-row > select[name="exp_kind[]"], .exp-row > input[name="exp_desc[]"] { grid-column: 1 / -1; }
    /* bez hlavičky tabuľky by bolo políčko „klientovi“ bez významu */
    .exp-row .check { grid-column: 1 / -1; }
    .exp-row .exp-del { grid-column: 1 / -1; justify-self: end; }
}

/* ---------- Naklikávacie zoznamy (kariéra) ----------
   Zaškrtávacie políčka vo výberovej mriežke: každá voľba je celý terčík,
   nie len malý štvorček vedľa textu. */
.vyber-mriezka { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.5rem; }
.vyber-mriezka--jazyky { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }

.vyber {
    display: flex; align-items: center; gap: 0.5625rem; cursor: pointer; user-select: none;
    padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface-2); font-size: 0.875rem; color: var(--tx-2);
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.vyber:hover { border-color: var(--line-strong); color: var(--tx-1); }
.vyber input { width: 1.0625rem; height: 1.0625rem; accent-color: var(--accent); cursor: pointer; flex: none; }
.vyber:has(input:checked) {
    border-color: var(--accent); color: var(--tx-1);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.jazyk { display: flex; align-items: center; gap: 0.5rem; }
.jazyk .vyber { flex: 1; min-width: 0; }
.select-sm { height: 2.25rem; padding-block: 0; font-size: 0.8125rem; flex: none; width: 9.5rem; }

.pod-nadpis {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: var(--tx-3); margin: var(--sp-5) 0 var(--sp-3);
    padding-top: var(--sp-4); border-top: 1px solid var(--line);
}
.card-body > .pod-nadpis:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- Komunikácia so zákazníkom ---------- */
.rozhovor { display: flex; flex-direction: column; gap: var(--sp-3); max-height: 32rem; overflow-y: auto; }
.sprava { max-width: 44rem; padding: 0.75rem 1rem; border-radius: var(--r-md); border: 1px solid var(--line); }
.sprava--my { align-self: flex-end; background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.sprava--klient { align-self: flex-start; background: var(--surface-2); }
.sprava-hlava { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: 0.25rem; }
.sprava-hlava strong { font-size: 0.8125rem; }
.sprava p { font-size: 0.875rem; line-height: 1.55; white-space: pre-wrap; }

/* ---------- Kroky na schválenie (portál) ---------- */
.krok { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.krok:last-child { border-bottom: 0; padding-bottom: 0; }
.krok:first-child { padding-top: 0; }
.krok--caka { border-left: 2px solid var(--accent); padding-left: var(--sp-4); }
.krok-hlava { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: 0.35rem; flex-wrap: wrap; }
.krok-hlava strong { font-size: 0.9375rem; }
.krok-form { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-top: var(--sp-3); }
.krok-form .input { flex: 1; min-width: 14rem; }

/* jednoduchý avatar z iniciál – portál nemá nahrané fotky */
.avatar { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none;
    border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
    font-size: 0.75rem; font-weight: 700; color: var(--tx-1); }

/* Der Sprachumschalter und der Streifen „Ansicht der Verwaltung" stammen aus
   dem Kundenportal und wurden beim Übernehmen des Stilblatts mitgeschleppt.
   Sie kommen in dieser Anwendung nirgends vor – mitgekommen war aber auch
   `.topbar { position: relative }`, und das hat die Kopfleiste auf jeder Seite
   am Kleben gehindert. Deshalb ist der ganze Block hier entfernt. */

/* ---------- Prehľad diania na projekte ---------- */
.dianie { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; }
.dianie li { display: grid; grid-template-columns: 8.5rem 11rem minmax(0, 1fr);
    gap: var(--sp-3); align-items: baseline; padding: 0.4rem 0;
    border-bottom: 1px solid var(--line); font-size: 0.8125rem; }
.dianie li:last-child { border-bottom: 0; }
.dianie-cas { color: var(--tx-3); font-variant-numeric: tabular-nums; }
.dianie-druh { color: var(--accent); font-weight: 600; }
.dianie-text { color: var(--tx-2); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 720px) {
    .dianie li { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
}
/* Prihlasovacia stránka je mriežka záhlavie–stred–päta. Prepínač jazyka preto
   nesmie stáť samostatne, inak si vyrobí vlastný riadok a nalepí sa na pätu.
   Býva v jednom riadku so značkou, pri pravom okraji. */
.login-head-riadok { display: flex; align-items: flex-start; gap: var(--sp-4); width: 100%; }
.login-jazyk { margin-left: auto; flex: none;
    background: color-mix(in srgb, #07121D 55%, transparent); backdrop-filter: blur(8px); }
.login-jazyk .jazyk-a { color: hsl(0 0% 100% / .62); }
.login-jazyk .jazyk-a:hover { color: #fff; }
.login-jazyk .jazyk-a.is-on { color: var(--accent); }

/* ---------- Dvojfázové overenie v portáli ---------- */
.dvojfaz-zapinanie { display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-5); align-items: start; }
.dvojfaz-qr p { margin-bottom: var(--sp-2); }
.dvojfaz-qr .qr-box { margin-bottom: var(--sp-3); }
.kluc { display: inline-block; margin-top: 2px; padding: 0.25rem 0.5rem; border-radius: var(--r-sm);
    background: var(--surface-2); font-family: var(--font-mono, ui-monospace, monospace);
    letter-spacing: .12em; font-size: 0.8125rem; color: var(--tx-1); }
.input.kod { font-family: var(--font-mono, ui-monospace, monospace); font-size: 1.25rem;
    letter-spacing: .35em; text-align: center; max-width: 11rem; }
.dvojfaz-akcie { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-4); }
.dvojfaz-forma { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.dvojfaz-forma .input { max-width: 12rem; }
.zalozne-kody { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--sp-2); margin-bottom: var(--sp-4); }
.zalozne-kody code { display: block; padding: 0.55rem 0.7rem; border-radius: var(--r-sm);
    background: var(--surface-2); border: 1px solid var(--line);
    font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: .1em;
    font-size: 0.875rem; text-align: center; color: var(--tx-1); }
@media (max-width: 720px) {
    .dvojfaz-zapinanie { grid-template-columns: minmax(0, 1fr); }
    .dvojfaz-akcie { flex-direction: column; gap: var(--sp-3); }
    .dvojfaz-forma { width: 100%; }
    .dvojfaz-forma .input { flex: 1 1 8rem; max-width: none; }
}

/* ---------- Druhý krok prihlásenia ---------- */
/* Základný panel je úzky (na dve polia). Tu je len jedno pole, zato dlhšie
   vysvetlenie, takže potrebuje trochu viac miesta a text na stred. */
.login-card--kod { width: min(27rem, 100%); text-align: center; }
.login-card--kod .lc-intro { text-align: center; padding-right: 0; }
.login-card--kod .lc-intro::after { display: none; }
.login-card--kod .field { text-align: left; }
.login-card--kod .input.kod { max-width: none; }
.login-card--kod .lc-form-2fa { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ---------- Zvonček a zoznam upozornení ---------- */
.zvoncek { position: relative; }
.zvoncek-pocet { position: absolute; top: -2px; right: -2px; min-width: 1.05rem; height: 1.05rem;
    padding: 0 0.22rem; display: grid; place-items: center; border-radius: 999px;
    background: var(--accent); color: var(--accent-fg); font-size: 0.625rem; font-weight: 800;
    line-height: 1; box-shadow: 0 0 0 2px var(--surface); }
.upoz { list-style: none; }
.upoz li { display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line-soft); }
.upoz li:last-child { border-bottom: 0; }
.upoz li.je-nove { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.upoz-druh { flex: none; width: 9.5rem; font-size: 0.6875rem; letter-spacing: .07em;
    text-transform: uppercase; color: var(--accent); font-weight: 700; }
.upoz-text { flex: 1 1 auto; min-width: 0; }
.upoz-cas { flex: none; color: var(--tx-3); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
    .upoz li { flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
    .upoz-druh { width: auto; }
    .upoz-text { flex: 1 1 100%; order: 3; }
    .upoz-cas { margin-left: auto; }
}

/* ---------- Podklady od zákazníka ---------- */
.nahrat-forma { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.nahrat-forma input[type=file] { flex: 1 1 16rem; min-width: 0; font-size: 0.875rem; color: var(--tx-2); }
.qr-platba { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; }
.qr-platba .qr-box { flex: none; }

/* ---------- Zadanie: otázky pre zákazníka ---------- */
.zad-otazka { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--surface-2); }
.zad-otazka--doplnit { border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); }
.zad-label { display: block; font-size: 0.9375rem; font-weight: 650; color: var(--tx-1);
    margin-bottom: 0.15rem; }
.zad-label .hviezda { color: var(--accent); }
.zad-hint { font-size: 0.8125rem; color: var(--tx-3); margin-bottom: 0.6rem; }
.zad-otazka .input, .zad-otazka .select { margin-top: 0.4rem; }
.zad-ziadost { display: flex; gap: var(--sp-2); align-items: flex-start; margin: 0.5rem 0 0.7rem;
    padding: 0.6rem 0.75rem; border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--accent) 14%, transparent); font-size: 0.875rem; }
.zad-volby { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); margin-top: 0.5rem; }
.zad-subory { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0.5rem 0; }
.zad-akcie { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.zad-akcie .spacer { flex: 1; }
@media (max-width: 560px) {
    .zad-akcie { flex-direction: column-reverse; }
    .zad-akcie .btn { width: 100%; }
}

/* ---------- Voľba upozornení a vedúci projektu ---------- */
.upoz-volby { display: flex; flex-direction: column; gap: var(--sp-3); }
.upoz-volby .check { font-size: 0.9375rem; }
.veduci { display: inline-flex; align-items: center; gap: var(--sp-3); flex: none;
    padding: 0.35rem 0.75rem 0.35rem 0.35rem; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--line); }
.veduci .avatar { width: 2rem; height: 2rem; font-size: 0.6875rem; }
.veduci-txt { display: flex; flex-direction: column; line-height: 1.25; }
.veduci-txt strong { font-size: 0.8125rem; font-weight: 650; color: var(--tx-1); }
.veduci-txt span { font-size: 0.6875rem; color: var(--tx-3); }
@media (max-width: 560px) { .veduci { display: none; } }

/* ---------- Dopyt zákazníka ---------- */
.dop-druh { display: flex; gap: var(--sp-5); flex-wrap: wrap; margin-top: 0.35rem; }
.dop-odpoved { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
    border-left: 2px solid var(--accent); background: var(--surface-2);
    border-radius: var(--r-sm); }
.dop-odpoved strong { display: block; font-size: 0.75rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 0.3rem; }

/* ---------- Priebežné ukladanie a koniec prihlásenia ---------- */
.zad-stav { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 60;
    padding: 0.6rem 1rem; border-radius: 999px; background: var(--surface-2);
    border: 1px solid var(--line); color: var(--tx-2); font-size: 0.8125rem;
    box-shadow: 0 1rem 2rem -1rem hsl(210 70% 3% / .7);
    opacity: 0; transform: translateY(0.5rem); pointer-events: none;
    transition: opacity .2s ease, transform .2s ease; }
.zad-stav.je-vidno { opacity: 1; transform: none; }
.relacia-vyzva { position: fixed; left: 50%; bottom: var(--sp-5); transform: translateX(-50%);
    z-index: 61; display: flex; align-items: center; gap: var(--sp-4);
    padding: 0.85rem 1.1rem; border-radius: var(--r-md);
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow: 0 1.25rem 2.5rem -1rem hsl(210 70% 3% / .8);
    max-width: min(34rem, calc(100% - 2rem)); }

/* ---------- Tím projektu ---------- */
.tim-mriezka { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    gap: var(--sp-3); }
.tim-clen { display: flex; align-items: center; gap: var(--sp-3);
    padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--surface-2); }
.tim-clen .avatar { width: 2.25rem; height: 2.25rem; font-size: 0.75rem; flex: none; }

/* ---------- Hľadanie a filtre ---------- */
.filtre { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap;
    padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line-soft); }
.filtre .input { max-width: 18rem; }
.filtre .spacer { flex: 1; }
.filtre-volby { display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; }
@media (max-width: 620px) {
    .filtre { flex-direction: column; align-items: stretch; }
    .filtre .input { max-width: none; }
    .relacia-vyzva { flex-direction: column; text-align: center; }
}

/* ---------- Úvod pri prvom prihlásení ---------- */
.uvod-body { list-style: none; display: flex; flex-direction: column; gap: var(--sp-4); }
.uvod-body li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: 0.9375rem;
    line-height: 1.5; color: var(--tx-2); }
.uvod-body li svg { flex: none; margin-top: 0.15rem; color: var(--accent); }

/* ---------- Oddeľovač tisícov ----------
   Sumy majú medzi tisíckami nezalomiteľnú medzeru, ale záporný letter-spacing
   na veľkých číslach jej ubere šírku. word-spacing sa uplatní len na medzery,
   takže im ju vráti bez rozťahovania číslic. */
.stat-value,
.mini-stats strong,
.t-num,
.table td.num,
.table th.num { word-spacing: .16em; }
.stat-value { word-spacing: .18em; }

/* ==================================================================
   PPP-RL – Ergänzungen zur gemeinsamen Oberfläche
   Nur, was diese Anwendung zusätzlich braucht; alles Übrige kommt aus
   demselben Stylesheet wie iRX Office und das Kundenportal.
   ================================================================== */

/* Aufzählung mit Abstand – für Hinweise und Fristen */
.liste { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.86rem; line-height: 1.55; }
.liste > li { padding-left: 1rem; position: relative; color: var(--tx-2); }
.liste > li::before {
    content: ''; position: absolute; left: 0; top: 0.55em;
    width: 0.3rem; height: 0.3rem; border-radius: 50%; background: var(--accent);
}
.liste strong { color: var(--tx-1); }

/* Quartalsumschalter über den Erfassungstabellen */
.quartale { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.quartale a {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.85rem; border-radius: var(--r-2);
    border: 1px solid var(--line); color: var(--tx-2);
    font-size: 0.8rem; font-weight: 600; transition: all var(--dur) var(--ease);
}
.quartale a:hover { border-color: var(--accent-line); color: var(--tx-1); }
.quartale a.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

/* Erfassungsraster: schmale Zahlenfelder, rechtsbündig wie im Nachweis */
.erfassung td .input { width: 100%; text-align: right; padding: 0.35rem 0.55rem; font-size: 0.82rem; }
.erfassung td.eng { width: 7.5rem; }
.erfassung tfoot td { font-weight: 700; border-top: 2px solid var(--line-2); }
.erfassung .bereich-code {
    font-family: var(--font-mono); font-size: .78rem; color: var(--accent);
    font-weight: 700; letter-spacing: .04em;
}

/* Fortschrittsbalken für den Umsetzungsgrad */
.grad { display: flex; align-items: center; gap: 0.55rem; min-width: 9rem; }
.grad-bar { flex: 1; height: 0.4rem; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.grad-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.grad.is-ok   .grad-bar > span { background: hsl(162 46% 44%); }
.grad.is-dang .grad-bar > span { background: hsl(4 62% 56%); }
.grad-wert { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.82rem; min-width: 4rem; text-align: right; }

/* Paragraphenhinweis unter Überschriften */
.paragraf {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.72rem; color: var(--tx-3); letter-spacing: .04em;
}

/* Fußzeile der Karte trägt Hinweis links und Schaltflächen rechts */
.card-foot { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.card-foot .spacer { flex: 1; }

/* Zahl, die aus dem Rahmen fällt */
.t-dang { color: hsl(4 66% 64%); font-weight: 700; }
[data-theme="light"] .t-dang { color: hsl(4 58% 44%); }

/* Der Bildausschnitt oben links ist hell – Marke und Schlagzeile brauchen dort
   etwas mehr Grund, sonst verlieren sie den Kontrast. */
.login-scrim-top {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(160deg, hsl(207 47% 7% / .82) 0%, hsl(207 47% 7% / .45) 26%,
                                        transparent 48%);
}

/* Abweichung vom Soll: Nulllinie in der Mitte, Ausschlag nach links (fehlt)
   oder rechts (Reserve). Ein Balken, der den Anteil am Soll zeigt, stünde bei
   allen Werten fast voll – die Abweichung ist das, worauf es ankommt. */
.abw { display: flex; align-items: center; gap: 0.6rem; min-width: 11rem; }
.abw-spur {
    position: relative; flex: 1; height: 0.5rem; border-radius: 999px;
    background: hsl(var(--a-h) 12% 50% / .14); border: 1px solid var(--line);
    overflow: hidden;
}
.abw-null {
    position: absolute; left: 50%; top: 0; bottom: 0;
    width: 1px; background: var(--tx-2); opacity: .7;
}
.abw-fuell { position: absolute; top: 0; bottom: 0; border-radius: 999px; min-width: .3rem; }
/* Von der Mitte aus wachsen: nach links bei Fehlbetrag, nach rechts bei Reserve.
   Die Mindestbreite macht auch winzige Abweichungen sichtbar, ohne die Nulllinie
   zu überschreiten. */
.abw-fuell.is-minus { right: 50%; background: hsl(4 62% 56%); }
.abw-fuell.is-plus  { left: 50%;  background: hsl(162 46% 44%); }
.abw-wert {
    font-variant-numeric: tabular-nums; font-weight: 700; font-size: .8rem;
    min-width: 4.6rem; text-align: right;
}
.abw-wert.is-minus { color: hsl(4 66% 64%); }
.abw-wert.is-plus  { color: hsl(162 46% 54%); }
[data-theme="light"] .abw-wert.is-minus { color: hsl(4 58% 44%); }
[data-theme="light"] .abw-wert.is-plus  { color: hsl(162 46% 30%); }

/* ---------- 47. Diagramme, Ansichtsumschalter und Reiter ---------- */
.dg { display: block; }
.dg-ring { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.dg-ring .donut-wrap { flex: none; }
.dg-ring .legend { flex: 1 1 9rem; min-width: 8.5rem; }

.dg-balken { display: flex; flex-direction: column; gap: 0.625rem; }
.dg-balken-zeile { display: grid; grid-template-columns: minmax(5rem, 11rem) 1fr minmax(5.5rem, auto);
                   gap: var(--sp-3); align-items: center; }
.dg-balken-lbl { font-size: 0.8125rem; color: var(--tx-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-balken-spur { position: relative; height: 0.75rem; border-radius: var(--r-full);
                  background: var(--surface-2); border: 1px solid var(--line-soft); }
.dg-balken-wert { position: absolute; top: 0; bottom: 0; left: 0; border-radius: var(--r-full);
                  transition: width .6s var(--ease); }
.dg-balken-soll { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; opacity: .9; }
.dg-balken-zahl { font-size: 0.8125rem; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.dg-balken-zusatz { font-weight: 500; color: var(--tx-3); font-size: 0.75rem; }

.dg-spur { display: block; height: 0.375rem; border-radius: var(--r-full);
           background: var(--surface-2); overflow: hidden; margin-top: 0.5rem; }
.dg-fuellung { display: block; height: 100%; border-radius: var(--r-full); transition: width .6s var(--ease); }

/* Umschalter Dashboard / Tabelle */
.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2);
             border: 1px solid var(--line); border-radius: var(--r-full); }
.segmented > * { padding: 0.3125rem 0.75rem; border-radius: var(--r-full); font-size: 0.8125rem;
                 font-weight: 620; color: var(--tx-3); border: 0; background: transparent;
                 cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; }
.segmented > *:hover { color: var(--tx-1); }
.segmented .is-active { background: var(--accent); color: var(--accent-fg); }
.segmented .icon { width: 0.9375rem; height: 0.9375rem; }

/* Reiter innerhalb einer Karte */
.reiter { display: flex; gap: 0.25rem; flex-wrap: wrap; border-bottom: 1px solid var(--line);
          padding: 0 var(--sp-5); overflow-x: auto; }
.reiter a { padding: 0.6875rem 0.875rem; font-size: 0.875rem; font-weight: 620; color: var(--tx-3);
            border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex;
            gap: 0.4rem; align-items: center; white-space: nowrap; }
.reiter a:hover { color: var(--tx-1); }
.reiter a.is-active { color: var(--tx-1); border-bottom-color: var(--accent); }
.reiter .zahl { font-size: 0.6875rem; color: var(--tx-3); background: var(--surface-2);
                border-radius: var(--r-full); padding: 1px 0.4375rem; font-weight: 700; }

/* Kacheln der Nástenka */
.kpi { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); }
.kpi-karte { padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md);
             background: var(--surface); backdrop-filter: blur(8px); }
.kpi-karte > span { display: block; font-size: 0.72rem; color: var(--tx-3); font-weight: 650;
                    text-transform: uppercase; letter-spacing: .06em; }
.kpi-karte strong { display: block; font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em;
                    margin-top: 0.25rem; line-height: 1.1; }
.kpi-karte .kpi-fuss { display: block; font-size: 0.75rem; color: var(--tx-3); margin-top: 0.3125rem; }
.kpi-karte.is-ok strong { color: var(--ok); }
.kpi-karte.is-warn strong { color: var(--warn); }
.kpi-karte.is-dang strong { color: var(--dang); }

/* Importvorschau */
.import-zeile-fehler { background: hsl(4 62% 56% / .1); }
.import-zeile-neu td:first-child { border-left: 2px solid var(--ok); }
.import-zeile-aendern td:first-child { border-left: 2px solid var(--warn); }
.ablage { border: 1.5px dashed var(--line-2); border-radius: var(--r-md); padding: var(--sp-6);
          text-align: center; background: var(--surface-2); }
.ablage.is-ueber { border-color: var(--accent); background: var(--accent-softer); }

@media (max-width: 720px) {
    .dg-balken-zeile { grid-template-columns: 1fr; gap: 0.25rem; }
    .dg-balken-zahl { text-align: left; }
    .reiter { padding: 0 var(--sp-4); }
}

/* Feld innerhalb einer Karte – trägt ein Diagramm mit Überschrift */
.panel { padding: var(--sp-4) var(--sp-5) var(--sp-5); border: 1px solid var(--line-soft);
         border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.panel-titel { font-size: 0.8125rem; font-weight: 700; color: var(--tx-2); margin: 0 0 var(--sp-4);
               letter-spacing: .01em; }
.panel-fuss { font-size: 0.75rem; color: var(--tx-3); margin: var(--sp-3) 0 0; }

/* Standort und Erfassungsjahr in der Kopfleiste: eine Zeile, nie umbrechend */
.topbar-kontext { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; flex: 0 1 auto; }
.topbar-kontext .kontext-standort { max-width: min(24rem, 32vw); }
.topbar-kontext select.kontext-standort { min-width: 10rem; }
.topbar-kontext .kontext-jahr { min-width: 7.5rem; flex: none; }
@media (max-width: 1180px) {
    .topbar-kontext .kontext-standort { max-width: 16rem; }
}

/* Auf schmalen Geräten zeigt der Bildausschnitt sonst nur Decke und Wand –
   der Stuhlkreis ist aber das, was das Bild erzählt */
@media (max-width: 720px) {
    .login-bg { background-position: 32% center; }
}

/* Verweis auf den Demo-Zugang unter dem Anmeldefeld */
.lc-link {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 620; color: hsl(0 0% 100% / .72);
    transition: color var(--dur) var(--ease);
}
.lc-link:hover { color: var(--accent-strong); }
.lc-link .icon { width: .95rem; height: .95rem; }

/* ---------- Testzugang: Streifen unter der Kopfleiste ----------
   Wer in Testdaten arbeitet, soll es an jeder Stelle sehen und nicht erst,
   wenn er sich über eine Zahl wundert. Der Streifen klebt an der Kopfleiste,
   damit die Zuordnung eindeutig bleibt. */
.testleiste {
    position: sticky; top: var(--topbar-h); z-index: 34; flex: none;
    display: flex; align-items: flex-start; gap: .55rem;
    padding: .5rem var(--sp-6);
    font-size: .78rem; line-height: 1.35;
    color: var(--accent);
    /* Der Streifen bleibt beim Blättern stehen, also muss er deckend sein:
       die Akzenttönung liegt als eigene Ebene über dem Seitengrund. Durch eine
       halbdurchsichtige Fläche liefe der Inhalt sichtbar hindurch. */
    background:
        linear-gradient(hsl(var(--a-h) var(--a-s) var(--a-l) / .17),
                        hsl(var(--a-h) var(--a-s) var(--a-l) / .17)),
        var(--bg-0);
    border-bottom: 1px solid var(--accent-line);
    box-shadow: 0 1px 0 hsl(0 0% 0% / .18);
}
.testleiste .icon { width: 1rem; height: 1rem; flex: none; margin-top: .12rem; }
.testleiste strong { font-weight: 750; }
.testleiste .testleiste-txt { min-width: 0; flex: 1; }
.testleiste a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.testleiste a:hover { color: var(--accent-strong); }
@media (max-width: 860px) {
    /* Die Kopfleiste reicht auf Geräten mit Aussparung unter die Statusleiste;
       der Streifen muss genau dort ansetzen, sonst rutscht er darunter. */
    .testleiste {
        top: calc(var(--topbar-h) + var(--safe-t));
        padding: .5rem max(var(--sp-4), var(--safe-l)) .5rem max(var(--sp-4), var(--safe-r));
        font-size: .74rem;
    }
}

/* ---------- Simulation und Planung ----------
   Die Zahl, um die es geht, muss groß sein; woher sie kommt, klein darunter.
   Ein Vergleich zweier Zustände lebt davon, dass das Auge die Veränderung
   findet, ohne zwei Spalten gegeneinander zu lesen. */
.sim-kopf {
    display: grid; gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.sim-kennzahl {
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line-soft); border-radius: var(--r-md);
    background: var(--surface-hover);
    display: flex; flex-direction: column; gap: .15rem; min-width: 0;
}
.sim-kennzahl > span:first-child {
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--tx-3); font-weight: 650;
}
.sim-kennzahl > strong {
    font-size: 1.4375rem; font-weight: 780; letter-spacing: -.6px;
    font-variant-numeric: tabular-nums;
}
.sim-delta { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Eingabefelder der Stellschrauben: schmal, rechtsbündig, ohne Spinner –
   sie stehen in einer Tabelle und sollen wie Zahlen aussehen, nicht wie Formulare */
.sim-zahl { width: 4.75rem; text-align: right; font-variant-numeric: tabular-nums; }
.table-eng th, .table-eng td { padding-left: var(--sp-2); padding-right: var(--sp-2); }
.table-eng th:first-child, .table-eng td:first-child { padding-left: var(--sp-4); }
.table-eng th:last-child, .table-eng td:last-child { padding-right: var(--sp-4); }

/* Einheit rechts im Feld (Prozent) – die Bildmarke links bleibt dem Suchfeld */
.input-group--suffix .input { padding-left: var(--sp-4); padding-right: 2.25rem; }
.input-suffix {
    position: absolute; right: .8125rem; top: 50%; translate: 0 -50%;
    color: var(--tx-3); font-size: .8125rem; pointer-events: none;
}

/* Zielrechner: die Lücke ist die Botschaft, alles andere Beiwerk */
.ziel-luecke { font-variant-numeric: tabular-nums; font-weight: 750; }
.ziel-balken {
    position: relative; height: .5rem; border-radius: var(--r-full);
    background: var(--surface-hover); overflow: hidden; min-width: 5rem;
}
.ziel-balken > span { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-full); }
.ziel-balken > span.ok   { background: hsl(162 46% 44% / .7); }
.ziel-balken > span.warn { background: hsl(28 78% 56% / .75); }
.ziel-balken > span.dang { background: hsl(4 62% 56% / .75); }

/* Stellschrauben: Name über der Zeile, vier Zahlen darunter. Eine Tabelle mit
   fünf Spalten passt in die schmale Spalte nicht – und die Bezeichnung einer
   Berufsgruppe ist länger als jedes Eingabefeld. */
.sim-raster { display: flex; flex-direction: column; gap: .55rem; }
.sim-raster-kopf, .sim-raster-felder {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem;
}
.sim-raster-kopf {
    font-size: .65rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--tx-3); font-weight: 650; text-align: right; padding-right: .15rem;
}
.sim-raster-zeile {
    display: flex; flex-direction: column; gap: .25rem;
    padding-bottom: .55rem; border-bottom: 1px solid var(--line-soft);
}
.sim-raster-zeile:last-child { border-bottom: 0; padding-bottom: 0; }
.sim-raster-name {
    font-size: .8125rem; font-weight: 650;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sim-raster .sim-zahl { width: 100%; }