/* ==================================================================
   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 ---------- */
.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; }
    :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; } }

/* ---------- 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);
    background: hsl(210 44% 8% / .58);
    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(0 0% 100% / .7); }

.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);
}
.user-chip:hover { border-color: var(--line-strong); background: var(--surface-hover); }
.user-chip-txt { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.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);
}
.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 { 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);
}
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); }
.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); }

/* ---------- Portál: prepínač jazyka a pohľad kancelárie ---------- */
.jazyk-prepinac { display: inline-flex; gap: 1px; padding: 2px; border-radius: var(--r-sm);
    background: var(--surface-2); }
.jazyk-a { padding: 0.3rem 0.5rem; border: 0; background: none; cursor: pointer;
    border-radius: calc(var(--r-sm) - 3px); font-size: 0.6875rem; font-weight: 700;
    letter-spacing: .06em; color: var(--tx-3); transition: color .16s ease, background .16s ease; }
.jazyk-a:hover { color: var(--tx-1); }
.jazyk-a.is-on { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }

.pohlad-kancelarie {
    position: absolute; left: 0; right: 0; top: 100%;
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 0.45rem var(--sp-5);
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    font-size: 0.8125rem; z-index: 5;
}
.pohlad-kancelarie strong { display: block; }
.pohlad-kancelarie span { color: var(--tx-3); }
.topbar { position: relative; }
body:has(.pohlad-kancelarie) .page { padding-top: 3.5rem; }
@media (max-width: 720px) {
    .pohlad-kancelarie span { display: none; }
    body:has(.pohlad-kancelarie) .page { padding-top: 3rem; }
}

/* ---------- 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; }