@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.olwso25aue.bundle.scp.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';

/* /Components/Account/Pages/Consent.razor.rz.scp.css */
.consent-intro[b-20n7e015h9] {
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.consent-scopes[b-20n7e015h9] {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.consent-scope[b-20n7e015h9] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
}

.consent-scope .bi[b-20n7e015h9] {
    color: var(--accent);
    flex-shrink: 0;
}

.consent-note[b-20n7e015h9] {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

.consent-error[b-20n7e015h9] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--danger);
}

.consent-actions[b-20n7e015h9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ══ Pohyb ═════════════════════════════════════════════════════════════════
   Obrazovka udelenia súhlasu. Rozsahy nabehnú postupne, aby bolo zjavné, že ide
   o zoznam samostatných položiek, s ktorými používateľ súhlasí. */
.consent-scope[b-20n7e015h9] {
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
    animation: bm-rise var(--motion-fast) var(--ease-out) backwards;
}

.consent-scopes > *:nth-child(1)[b-20n7e015h9] { animation-delay: 25ms; }
.consent-scopes > *:nth-child(2)[b-20n7e015h9] { animation-delay: 55ms; }
.consent-scopes > *:nth-child(3)[b-20n7e015h9] { animation-delay: 85ms; }
.consent-scopes > *:nth-child(n+4)[b-20n7e015h9] { animation-delay: 115ms; }

.consent-scope:hover[b-20n7e015h9] {
    transform: translateX(3px);
}

.consent-error[b-20n7e015h9] {
    animation: bm-unfold var(--motion-base) var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
    .consent-scope[b-20n7e015h9],
    .consent-error[b-20n7e015h9] {
        animation: none;
    }

    .consent-scope:hover[b-20n7e015h9] {
        transform: none;
    }
}
/* /Components/Account/Pages/Manage/Administration.razor.rz.scp.css */
/* ── Záložky správy ── */
/* Samotné záložky preberajú vzhľad z app.css (.settings-subnav--tabs) — sú to tie isté
   prepínače ako v ostatných sekciách nastavení, len ako tlačidlá, lebo táto stránka
   prepína obsah interaktívne. Tu zostáva len odznak s počtom, ktorý inde nie je. */

.admin-tab-count[b-7ji8ep2y22] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent);
    color: #ffffff;
    font-size: .72rem;
    font-weight: 700;
}

@media (max-width: 640px) {
    .settings-subnav--tabs button[b-7ji8ep2y22] {
        flex: 1 1 calc(50% - .4rem);
        justify-content: center;
    }
}

/* Sekcia správy aplikácie. Karty a ich hlavičky preberajú vzhľad z app.css
   (settings-card), tu je len to, čo má navyše — prehľad návštevnosti a zoznam účtov. */

.admin-status[b-7ji8ep2y22] {
    margin-bottom: 1rem;
    padding: .7rem .9rem;
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--info);
    border-radius: var(--radius-md);
    background: var(--info-subtle);
    color: var(--text-primary);
}

/* ── Návštevnosť ── */

.traffic-tiles[b-7ji8ep2y22] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.traffic-tile[b-7ji8ep2y22] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .85rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

.traffic-tile-value[b-7ji8ep2y22] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
}

.traffic-tile-label[b-7ji8ep2y22] {
    font-size: .82rem;
    color: var(--text-muted);
}

.traffic-days[b-7ji8ep2y22] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.traffic-day[b-7ji8ep2y22] {
    display: grid;
    grid-template-columns: 7.5rem 1fr auto;
    align-items: center;
    gap: .75rem;
}

.traffic-day-date[b-7ji8ep2y22] {
    font-size: .85rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.traffic-day-bar[b-7ji8ep2y22] {
    height: 10px;
    border-radius: 999px;
    background: var(--bg-surface);
    overflow: hidden;
}

.traffic-day-fill[b-7ji8ep2y22] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
}

.traffic-day-numbers[b-7ji8ep2y22] {
    font-size: .82rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Na telefóne sa stĺpec s číslami nezmestí vedľa grafu, preto ide pod neho. */
@media (max-width: 640px) {
    .traffic-day[b-7ji8ep2y22] {
        grid-template-columns: 1fr auto;
    }

    .traffic-day-bar[b-7ji8ep2y22] {
        grid-column: 1 / -1;
        order: 3;
    }
}

/* ── Zoznam účtov ── */

.admin-users[b-7ji8ep2y22] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.admin-user[b-7ji8ep2y22] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem 1rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

.admin-user.is-banned[b-7ji8ep2y22] {
    border-left: 3px solid var(--danger);
}

.admin-user-main[b-7ji8ep2y22] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}

.admin-user-identity[b-7ji8ep2y22] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    color: var(--text-primary);
}

.admin-chip[b-7ji8ep2y22] {
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
}

.chip-admin[b-7ji8ep2y22] {
    background: var(--purple-subtle);
    color: var(--purple);
}

.chip-active[b-7ji8ep2y22] {
    background: var(--success-subtle);
    color: var(--success);
}

.chip-banned[b-7ji8ep2y22] {
    background: var(--danger-subtle);
    color: var(--danger);
}

.admin-user-meta[b-7ji8ep2y22],
.admin-user-reason[b-7ji8ep2y22] {
    font-size: .84rem;
    color: var(--text-muted);
    word-break: break-word;
}

.admin-user-counts[b-7ji8ep2y22] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .84rem;
    color: var(--text-secondary);
}

.admin-user-actions[b-7ji8ep2y22] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

/* ── Zakladanie nových účtov ── */

.registration-state[b-7ji8ep2y22] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}

/* ── Formulár blokovania ── */

.ban-form[b-7ji8ep2y22] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: .6rem;
    padding-top: .8rem;
    border-top: 1px solid var(--border-subtle);
}

.ban-form-row[b-7ji8ep2y22] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    max-width: 28rem;
}

.ban-form-row label[b-7ji8ep2y22] {
    font-size: .82rem;
    color: var(--text-secondary);
}

.ban-form-hint[b-7ji8ep2y22] {
    margin: 0;
    font-size: .82rem;
    color: var(--text-muted);
}

.ban-form-actions[b-7ji8ep2y22] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

@media (max-width: 640px) {
    .admin-user[b-7ji8ep2y22] {
        grid-template-columns: 1fr;
    }
}

/* ── Spätná väzba od používateľov ── */
.feedback-list[b-7ji8ep2y22] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feedback-entry[b-7ji8ep2y22] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 8px);
    background: rgba(128, 128, 128, .05);
}

.feedback-entry.is-resolved[b-7ji8ep2y22] {
    opacity: .7;
}

.feedback-entry-head[b-7ji8ep2y22] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.feedback-entry-rating[b-7ji8ep2y22] {
    color: #f5b301;
    letter-spacing: 1px;
}

.feedback-entry-message[b-7ji8ep2y22] {
    margin: 0;
    color: var(--text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
}
/* /Components/Account/Pages/Manage/Currencies.razor.rz.scp.css */
/* ── Currencies management page ── */
.currencies-page[b-bllp6qrws6] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Karty prichádzajú z globálneho bloku „Karty nastavení“ v app.css. */

/* ── Currency list ── */
.currencies-list[b-bllp6qrws6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.currency-row[b-bllp6qrws6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: border-color .15s;
}

.currency-row:hover[b-bllp6qrws6] {
    border-color: var(--accent);
}

.currency-symbol[b-bllp6qrws6] {
    font-size: 1.2rem;
    font-weight: 700;
    min-width: 2rem;
    text-align: center;
    color: var(--accent);
}

.currency-code-label[b-bllp6qrws6] {
    font-weight: 600;
    font-family: monospace;
    font-size: 1rem;
    min-width: 3rem;
}

.currency-name[b-bllp6qrws6] {
    flex: 1;
    color: var(--text-secondary);
    font-size: .97rem;
}

.default-badge[b-bllp6qrws6] {
    font-size: .88rem;
    padding: .2rem .6rem;
    background: var(--accent-subtle);
    color: var(--accent);
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: .02em;
}

.btn-action[b-bllp6qrws6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: .92rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}

.btn-action.set-default:hover[b-bllp6qrws6] {
    background: var(--accent-subtle);
    color: var(--accent);
    border-color: var(--accent);
}

.btn-action.remove:hover[b-bllp6qrws6] {
    background: rgba(248, 81, 73, .08);
    color: #f85149;
    border-color: #f85149;
}

/* ── Add currency grid ── */
.add-currency-grid[b-bllp6qrws6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
}

.add-currency-btn[b-bllp6qrws6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 8px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all .15s;
}

.add-currency-btn:hover[b-bllp6qrws6] {
    background: var(--accent-subtle);
    color: var(--accent);
    border-color: var(--accent);
    transform: translateY(-1px);
}

.add-symbol[b-bllp6qrws6] {
    font-size: 1.1rem;
    font-weight: 700;
}

.add-code[b-bllp6qrws6] {
    font-size: .92rem;
    font-family: monospace;
    font-weight: 600;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .add-currency-grid[b-bllp6qrws6] {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }

    .currency-name[b-bllp6qrws6] {
        display: none;
    }
}

/* ══ Pohyb ═════════════════════════════════════════════════════════════════
   Krátky zoznam mien. Riadky nabehnú zhora nadol a pod kurzorom sa posunú —
   viac tu netreba, na stránke sa nič nepočíta ani nekreslí. */
.currency-row[b-bllp6qrws6] {
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}


.currency-row:hover[b-bllp6qrws6] {
    transform: translateX(3px);
}

.currency-symbol[b-bllp6qrws6] {
    transition: transform var(--motion-base) var(--ease-spring);
}

.currency-row:hover .currency-symbol[b-bllp6qrws6] {
    transform: scale(1.15);
}

.btn-action[b-bllp6qrws6],
.add-currency-btn[b-bllp6qrws6] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.btn-action:active[b-bllp6qrws6],
.add-currency-btn:active[b-bllp6qrws6] {
    transform: scale(.96);
    transition-duration: var(--motion-press);
}

@media (prefers-reduced-motion: reduce) {
    .currency-row:hover[b-bllp6qrws6],
    .currency-row:hover .currency-symbol[b-bllp6qrws6],
    .btn-action:active[b-bllp6qrws6],
    .add-currency-btn:active[b-bllp6qrws6] {
        transform: none;
    }
}
/* /Components/Account/Pages/Manage/DeletePersonalData.razor.rz.scp.css */
/* Karty a .quick-link prichádzajú z globálneho bloku „Karty nastavení" v app.css. */

.settings-card--danger[b-hrxfnhs8hv] {
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border-color));
}

.settings-card--danger .settings-card-header > .bi[b-hrxfnhs8hv] {
    color: var(--danger);
}

.delete-warning[b-hrxfnhs8hv] {
    display: flex;
    gap: .85rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
    border-radius: var(--radius-md);
    background: var(--danger-subtle);
    color: var(--text-secondary);
    font-size: .92rem;
    line-height: 1.6;
}

.delete-warning > .bi[b-hrxfnhs8hv] {
    flex-shrink: 0;
    margin-top: .15rem;
    font-size: 1.15rem;
    color: var(--danger);
}

.delete-warning strong[b-hrxfnhs8hv] {
    display: block;
    margin-bottom: .5rem;
    color: var(--text-primary);
}

.delete-warning p[b-hrxfnhs8hv] {
    margin: 0 0 .4rem;
}

.delete-warning ul[b-hrxfnhs8hv] {
    margin: 0 0 .6rem;
    padding-left: 1.25rem;
}

.delete-warning li[b-hrxfnhs8hv] {
    margin-bottom: .2rem;
}

.delete-form[b-hrxfnhs8hv] {
    margin-top: 1.25rem;
}

/* Potvrdzovacie polia stoja vo vlastnom ohraničenom bloku, aby bolo na prvý pohľad vidieť,
   že medzi „som na stránke" a „účet je preč" je ešte niekoľko vedomých krokov. */
.delete-confirm[b-hrxfnhs8hv] {
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

.delete-confirm-title[b-hrxfnhs8hv] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .35rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.delete-confirm-title > .bi[b-hrxfnhs8hv] {
    color: var(--danger);
}

.delete-confirm-hint[b-hrxfnhs8hv] {
    margin: 0 0 .9rem;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.delete-confirm-hint code[b-hrxfnhs8hv] {
    padding: .1rem .35rem;
    border-radius: var(--radius-sm);
    background: var(--danger-subtle);
    color: var(--danger);
    font-weight: 700;
}

.delete-acknowledge[b-hrxfnhs8hv] {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--text-secondary);
    cursor: pointer;
}

.delete-acknowledge input[type="checkbox"][b-hrxfnhs8hv] {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: .1rem;
    accent-color: var(--danger);
    cursor: pointer;
}
/* /Components/Account/Pages/Manage/EnableAuthenticator.razor.rz.scp.css */
/* Karty prichádzajú z globálneho bloku „Karty nastavení" v app.css. */

.authenticator-steps[b-nt69meor4s] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0;
    padding-left: 1.2rem;
    color: var(--text-secondary);
}

.authenticator-steps[b-nt69meor4s]::marker,
.authenticator-steps > li[b-nt69meor4s]::marker {
    color: var(--accent);
    font-weight: 700;
}

.authenticator-steps strong[b-nt69meor4s] {
    color: var(--text-primary);
    font-size: .95rem;
}

.authenticator-steps p[b-nt69meor4s] {
    margin: .3rem 0 0;
    font-size: .9rem;
    line-height: 1.55;
}

/* QR kód aj kľúč vedľa seba; na úzkom displeji pod sebou. */
.authenticator-qr[b-nt69meor4s] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: .75rem;
    padding: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

/* QR kód je čierny na bielom, takže potrebuje vlastné svetlé pozadie aj v tmavom režime. */
.authenticator-qr img[b-nt69meor4s] {
    padding: .5rem;
    border-radius: var(--radius-sm);
    background: #fff;
}

.authenticator-key[b-nt69meor4s] {
    flex: 1;
    min-width: 12rem;
    padding: .5rem .75rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .06em;
    word-break: break-all;
}
/* /Components/Account/Shared/ManageLayout.razor.rz.scp.css */
/* ── Admin page shell ──
   Nastavenia sú mriežka kariet, nie súvislý text — obmedzovať ich na šírku odstavca
   nemá zmysel. Stĺpce sú v app.css zastropované na dva, takže karty na širokom
   monitore len zmohutnejú a posledný riadok nezostáva poloprázdny. */
.admin-page[b-hh0h9zwxe9] {
    max-width: 1720px;
    margin: 0 auto;
    padding: 0 32px 3rem;
}

/* ── Header ── */
.admin-header[b-hh0h9zwxe9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 0 20px;
}

.admin-header-left[b-hh0h9zwxe9] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.admin-header-icon[b-hh0h9zwxe9] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--accent-subtle);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.admin-header h1[b-hh0h9zwxe9] {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -.02em;
}

.admin-header p[b-hh0h9zwxe9] {
    margin: 3px 0 0;
    font-size: .95rem;
    color: var(--text-secondary);
}

/* ── Rozloženie: bočné menu vľavo, obsah vpravo ──
   Štyri sekcie sa do bočného pruhu zmestia bez zalamovania, ktoré si vynucoval
   predchádzajúci rad dvanástich vodorovných tabov. */
.admin-body[b-hh0h9zwxe9] {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 2.25rem;
    align-items: start;
}

.admin-nav[b-hh0h9zwxe9] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    position: sticky;
    top: 72px;
}

[b-hh0h9zwxe9] .admin-nav-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem .9rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    transition: background-color .15s, border-color .15s, color .15s;
}

[b-hh0h9zwxe9] .admin-nav-item:hover {
    background: var(--bg-surface);
    color: var(--text-primary) !important;
}

[b-hh0h9zwxe9] .admin-nav-item.active {
    background: var(--accent-subtle);
    border-color: var(--brand-line);
    color: var(--text-primary) !important;
}

[b-hh0h9zwxe9] .admin-nav-item > .bi {
    flex-shrink: 0;
    font-size: 1.15rem;
    color: var(--text-muted);
}

[b-hh0h9zwxe9] .admin-nav-item.active > .bi {
    color: var(--accent);
}

[b-hh0h9zwxe9] .admin-nav-text {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

[b-hh0h9zwxe9] .admin-nav-text strong {
    font-size: .97rem;
    font-weight: 600;
}

[b-hh0h9zwxe9] .admin-nav-text small {
    font-size: .78rem;
    line-height: 1.35;
    color: var(--text-muted);
}

/* ── Content area ── */
.admin-content[b-hh0h9zwxe9] {
    min-width: 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .admin-page[b-hh0h9zwxe9] {
        padding: 0 14px 2rem;
    }

    .admin-header[b-hh0h9zwxe9] {
        padding: 18px 0 14px;
    }

    .admin-header h1[b-hh0h9zwxe9] {
        font-size: 1.35rem;
    }

    .admin-header-icon[b-hh0h9zwxe9] {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        font-size: 1.3rem;
    }

    /* Na užšom okne sa bočné menu zmení na vodorovný pruh nad obsahom. Popisky sekcií
       vypadnú — štyri ikony s názvom sa do riadku zmestia aj na telefóne. */
    .admin-body[b-hh0h9zwxe9] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .admin-nav[b-hh0h9zwxe9] {
        position: sticky;
        top: 48px;
        z-index: 1;
        flex-direction: row;
        gap: .4rem;
        overflow-x: auto;
        padding-bottom: .25rem;
        background: var(--bg-body, transparent);
        scrollbar-width: none;
    }

    .admin-nav[b-hh0h9zwxe9]::-webkit-scrollbar {
        display: none;
    }

    [b-hh0h9zwxe9] .admin-nav-item {
        flex: 1 0 auto;
        justify-content: center;
        padding: .6rem .8rem;
    }

    [b-hh0h9zwxe9] .admin-nav-text small {
        display: none;
    }

    [b-hh0h9zwxe9] .admin-nav-text strong {
        white-space: nowrap;
        font-size: .9rem;
    }
}

/* ══ Pohyb ═════════════════════════════════════════════════════════════════
   Rám nastavení. Ikona v hlavičke je jediné miesto, ktoré reaguje na kurzor —
   samotný obsah kariet si nábeh rieši v app.css. */
.admin-header-icon[b-hh0h9zwxe9] {
    transition: transform var(--motion-base) var(--ease-spring);
}

.admin-header:hover .admin-header-icon[b-hh0h9zwxe9] {
    transform: scale(1.08) rotate(-4deg);
}

@media (prefers-reduced-motion: reduce) {
    .admin-header:hover .admin-header-icon[b-hh0h9zwxe9] {
        transform: none;
    }
}
/* /Components/Account/Shared/ManageNavMenu.razor.rz.scp.css */
/* intentionally empty — nav is now in ManageLayout */
/* /Components/Account/Shared/Settings/BackupToolsCard.razor.rz.scp.css */
/* ── Backup manage page ── */

/* ── Alert ── */
.bk-alert[b-bkwt1q9dos] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-sm, 6px);
    margin-bottom: 16px;
    font-size: 1rem;
    font-weight: 500;
    position: relative;
}

.bk-alert-success[b-bkwt1q9dos] {
    background: rgba(63, 185, 80, .12);
    color: #3fb950;
    border: 1px solid rgba(63, 185, 80, .25);
}

.bk-alert-danger[b-bkwt1q9dos] {
    background: rgba(248, 81, 73, .12);
    color: #f85149;
    border: 1px solid rgba(248, 81, 73, .25);
}

.bk-alert-close[b-bkwt1q9dos] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: .6;
    transition: opacity .15s;
}

.bk-alert-close:hover[b-bkwt1q9dos] {
    opacity: 1;
}

/* ── Grid layout ── */
/* Karta stojí na stránke „Údaje a súkromie" medzi dvoma mriežkami nastavení, preto drží
   ich odstup aj rozostup stĺpcov — inak sa lepila na kartu nad sebou. */
.backup-grid[b-bkwt1q9dos] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

@media (max-width: 62rem) {
    .backup-grid[b-bkwt1q9dos] {
        grid-template-columns: 1fr;
    }
}

.full-width[b-bkwt1q9dos] {
    grid-column: 1 / -1;
}

/* ── Cards ── */
.backup-card[b-bkwt1q9dos] {
    background: var(--bg-surface, rgba(128, 128, 128, .04));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
}

.bk-card-header[b-bkwt1q9dos] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(128, 128, 128, .06);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 16px;
}

.bk-card-header h4[b-bkwt1q9dos] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.bk-card-header .bi[b-bkwt1q9dos] {
    font-size: 1.1rem;
    color: var(--accent);
}

.bk-card-body[b-bkwt1q9dos] {
    padding: 16px;
}

.bk-card-desc[b-bkwt1q9dos] {
    color: var(--text-secondary);
    font-size: .97rem;
    margin: 0 0 14px;
    line-height: 1.5;
}

/* ── Buttons ── */
.bk-btn[b-bkwt1q9dos] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-sm, 6px);
    font-weight: 600;
    font-size: .97rem;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}

.bk-btn:hover:not(:disabled)[b-bkwt1q9dos] {
    transform: translateY(-1px);
}

.bk-btn:disabled[b-bkwt1q9dos] {
    opacity: .6;
    cursor: not-allowed;
}

.bk-btn.primary[b-bkwt1q9dos] {
    background: var(--accent);
    color: #fff;
}

.bk-btn.primary:hover:not(:disabled)[b-bkwt1q9dos] {
    background: var(--accent-hover);
}

.bk-btn.secondary[b-bkwt1q9dos] {
    background: rgba(128, 128, 128, .15);
    color: var(--text-primary);
}

.bk-btn.secondary:hover:not(:disabled)[b-bkwt1q9dos] {
    background: rgba(128, 128, 128, .25);
}

/* ── File upload ── */
.file-upload-area[b-bkwt1q9dos] {
    position: relative;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-sm, 6px);
    padding: 28px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    margin-bottom: 14px;
}

.file-upload-area:hover[b-bkwt1q9dos],
.file-upload-area.drag-active[b-bkwt1q9dos] {
    border-color: var(--accent);
    background: rgba(88, 166, 255, .06);
}

.file-upload-area[b-bkwt1q9dos]  input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-content[b-bkwt1q9dos] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: .97rem;
    pointer-events: none;
}

.upload-content .bi[b-bkwt1q9dos] {
    font-size: 2rem;
    color: var(--accent);
}

/* ── Import preview ── */
.import-preview[b-bkwt1q9dos] {
    background: rgba(128, 128, 128, .06);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    padding: 14px;
}

.preview-header[b-bkwt1q9dos] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: .97rem;
    color: var(--accent);
}

.preview-stats[b-bkwt1q9dos] {
    display: flex;
    gap: 18px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.stat-item[b-bkwt1q9dos] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-label[b-bkwt1q9dos] {
    font-size: .95rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.stat-value[b-bkwt1q9dos] {
    font-size: 1rem;
    font-weight: 700;
}

.import-options[b-bkwt1q9dos] {
    margin-bottom: 14px;
}

.toggle-option[b-bkwt1q9dos] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: .97rem;
}

.toggle-option input[type="checkbox"][b-bkwt1q9dos] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
}

.toggle-label[b-bkwt1q9dos] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #f85149;
}

.import-actions[b-bkwt1q9dos] {
    display: flex;
    gap: 10px;
}

/* ── Backup list ── */
.backup-list[b-bkwt1q9dos] {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
}

.backup-list-header[b-bkwt1q9dos] {
    display: grid;
    grid-template-columns: 1fr 160px 100px 110px;
    gap: 12px;
    padding: 8px 14px;
    background: rgba(128, 128, 128, .08);
    border-bottom: 1px solid var(--border-color);
    font-size: .95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-secondary);
}

.backup-list-row[b-bkwt1q9dos] {
    display: grid;
    grid-template-columns: 1fr 160px 100px 110px;
    gap: 12px;
    padding: 10px 14px;
    align-items: center;
    border-bottom: 1px solid rgba(128, 128, 128, .08);
    font-size: .97rem;
    transition: background .12s;
}

.backup-list-row:last-child[b-bkwt1q9dos] {
    border-bottom: none;
}

.backup-list-row:hover[b-bkwt1q9dos] {
    background: rgba(128, 128, 128, .06);
}

.backup-list-row .col-name[b-bkwt1q9dos] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.backup-list-row .col-name .bi[b-bkwt1q9dos] {
    color: var(--accent);
    flex-shrink: 0;
}

.backup-list-row .col-date[b-bkwt1q9dos] {
    color: var(--text-secondary);
    font-size: .92rem;
}

.backup-list-row .col-size[b-bkwt1q9dos] {
    color: var(--text-secondary);
    font-size: .92rem;
}

.backup-list-row .col-actions[b-bkwt1q9dos] {
    display: flex;
    gap: 6px;
}

.bk-btn-icon[b-bkwt1q9dos] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .15s;
    font-size: .95rem;
}

.bk-btn-icon:hover[b-bkwt1q9dos] {
    background: rgba(88, 166, 255, .12);
    color: var(--accent);
    border-color: var(--accent);
}

.bk-btn-icon.restore:hover[b-bkwt1q9dos] {
    background: rgba(240, 173, 78, .12);
    color: #f0ad4e;
    border-color: #f0ad4e;
}

/* ── Restore dialog ── */
.restore-overlay[b-bkwt1q9dos] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.restore-dialog[b-bkwt1q9dos] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    padding: 20px 24px;
    max-width: 460px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
}

.restore-dialog-header[b-bkwt1q9dos] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 1rem;
}

.restore-dialog-text[b-bkwt1q9dos] {
    color: var(--text-secondary);
    font-size: .97rem;
    margin: 0 0 14px;
    line-height: 1.5;
}

/* ── Empty state ── */
.empty-state[b-bkwt1q9dos] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px;
    color: var(--text-secondary);
}

.empty-state .bi[b-bkwt1q9dos] {
    font-size: 2rem;
}

/* ── Spinner ── */
.bk-spinner[b-bkwt1q9dos] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bk-spin-b-bkwt1q9dos .6s linear infinite;
}

@keyframes bk-spin-b-bkwt1q9dos {
    to { transform: rotate(360deg); }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .backup-list-header[b-bkwt1q9dos],
    .backup-list-row[b-bkwt1q9dos] {
        grid-template-columns: 1fr 1fr;
    }

    .backup-list-header .col-date[b-bkwt1q9dos],
    .backup-list-row .col-date[b-bkwt1q9dos] {
        display: none;
    }
}

/* ══ Pohyb ═════════════════════════════════════════════════════════════════
   Táto karta robí nezvratné veci — obnovu zo zálohy a nahranie súboru. Pohyb tu
   preto potvrdzuje stav, nie akciu: plocha na pretiahnutie súboru reaguje na kurzor,
   hlásenie o výsledku sa vysunie zhora a dialóg obnovy vyskočí ako každý iný. */
.backup-card[b-bkwt1q9dos] {
    transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
    animation: bm-rise var(--motion-base) var(--ease-out) backwards;
}

.backup-grid > *:nth-child(1)[b-bkwt1q9dos] { animation-delay: 0ms; }
.backup-grid > *:nth-child(2)[b-bkwt1q9dos] { animation-delay: var(--stagger-step); }
.backup-grid > *:nth-child(n+3)[b-bkwt1q9dos] { animation-delay: calc(var(--stagger-step) * 2); }

.backup-card:hover[b-bkwt1q9dos] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Plocha na pretiahnutie súboru. Zvýraznenie je výraznejšie ako inde: používateľ
   v tej chvíli drží súbor nad oknom a potrebuje jednoznačnú odpoveď, či ho pustiť. */
.file-upload-area[b-bkwt1q9dos] {
    transition: background var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out);
}

.file-upload-area:hover[b-bkwt1q9dos],
.file-upload-area.drag-active[b-bkwt1q9dos] {
    transform: scale(1.01);
}

/* ── Zoznam existujúcich záloh ── */
.backup-list-row[b-bkwt1q9dos] {
    transition: background-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}


.backup-list-row:hover[b-bkwt1q9dos] {
    transform: translateX(3px);
}

/* ── Hlásenia o výsledku ── */
.bk-alert[b-bkwt1q9dos] {
    animation: bm-unfold var(--motion-base) var(--ease-out) both;
}

.bk-alert-close[b-bkwt1q9dos] {
    transition: color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.bk-alert-close:hover[b-bkwt1q9dos] {
    transform: rotate(90deg);
}

/* ── Dialóg obnovy ── */
.restore-overlay[b-bkwt1q9dos] {
    animation: bm-fade var(--motion-base) var(--ease-out) both;
}

.restore-dialog[b-bkwt1q9dos] {
    animation: bm-pop var(--motion-base) var(--ease-spring) both;
}

.bk-btn[b-bkwt1q9dos],
.bk-btn-icon[b-bkwt1q9dos],
.toggle-option[b-bkwt1q9dos] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.bk-btn:active[b-bkwt1q9dos],
.bk-btn-icon:active[b-bkwt1q9dos],
.toggle-option:active[b-bkwt1q9dos] {
    transform: scale(.96);
    transition-duration: var(--motion-press);
}

.stat-item[b-bkwt1q9dos] {
    transition: background-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.stat-item:hover[b-bkwt1q9dos] {
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .backup-card[b-bkwt1q9dos],
    .bk-alert[b-bkwt1q9dos],
    .restore-overlay[b-bkwt1q9dos],
    .restore-dialog[b-bkwt1q9dos] {
        animation: none;
    }

    .backup-card:hover[b-bkwt1q9dos],
    .file-upload-area:hover[b-bkwt1q9dos],
    .file-upload-area.drag-active[b-bkwt1q9dos],
    .backup-list-row:hover[b-bkwt1q9dos],
    .bk-alert-close:hover[b-bkwt1q9dos],
    .bk-btn:active[b-bkwt1q9dos],
    .bk-btn-icon:active[b-bkwt1q9dos],
    .toggle-option:active[b-bkwt1q9dos],
    .stat-item:hover[b-bkwt1q9dos] {
        transform: none;
    }
}
/* /Components/Layout/AccountLayout.razor.rz.scp.css */
/* ── Stránka ──
   Farby prichádzajú z premenných témy v app.css, takže prihlasovacie obrazovky
   sledujú svetlý aj tmavý režim a zvolenú farbu značky. */
.account-page[b-31oe5p8hyr] {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    overflow: hidden;
    background: var(--bg-body);
    color: var(--text-primary);
}

.account-content[b-31oe5p8hyr] {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 27rem;
}

/* ── Značka nad kartou ── */
.account-brand[b-31oe5p8hyr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-bottom: 1.5rem;
}

.account-brand-icon[b-31oe5p8hyr] {
    font-size: 1.6rem;
    color: var(--accent);
}

.account-brand-text[b-31oe5p8hyr] {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text-primary);
}

/* ── Karta ── */
[b-31oe5p8hyr] .auth-card {
    padding: 2rem 1.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
}

[b-31oe5p8hyr] .auth-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin: 0 0 .4rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
}

[b-31oe5p8hyr] .auth-title .bi {
    color: var(--accent);
}

[b-31oe5p8hyr] .auth-subtitle {
    margin: 0 0 1.5rem;
    text-align: center;
    font-size: .92rem;
    color: var(--text-muted);
}

/* ── Oznamovacia karta (potvrdenia, chyby) ── */
[b-31oe5p8hyr] .auth-message {
    text-align: center;
}

[b-31oe5p8hyr] .auth-message-icon {
    display: block;
    margin-bottom: .85rem;
    font-size: 2.4rem;
}

[b-31oe5p8hyr] .auth-message-icon.tone-info {
    color: var(--accent);
}

[b-31oe5p8hyr] .auth-message-icon.tone-success {
    color: var(--success);
}

[b-31oe5p8hyr] .auth-message-icon.tone-danger {
    color: var(--danger);
}

[b-31oe5p8hyr] .auth-message-title {
    margin-bottom: .6rem;
}

[b-31oe5p8hyr] .auth-message-body {
    color: var(--text-secondary);
    font-size: .95rem;
    line-height: 1.6;
}

[b-31oe5p8hyr] .auth-message-body p {
    margin: 0 0 .75rem;
}

[b-31oe5p8hyr] .auth-message-body p:last-child {
    margin-bottom: 0;
}

[b-31oe5p8hyr] .auth-message-body a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

[b-31oe5p8hyr] .auth-message-body a:hover {
    text-decoration: underline;
}

/* ── Polia formulára ── */
[b-31oe5p8hyr] .auth-field {
    position: relative;
    margin-bottom: .6rem;
}

[b-31oe5p8hyr] .auth-field-icon {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    font-size: .95rem;
    color: var(--text-muted);
}

[b-31oe5p8hyr] .auth-input {
    width: 100%;
    box-sizing: border-box;
    padding: .7rem .8rem .7rem 2.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: .97rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

[b-31oe5p8hyr] .auth-input::placeholder {
    color: var(--text-muted);
}

[b-31oe5p8hyr] .auth-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

/* ── Riadok s možnosťami ── */
[b-31oe5p8hyr] .auth-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin: .85rem 0 1.1rem;
    font-size: .9rem;
}

[b-31oe5p8hyr] .auth-remember {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--text-secondary);
    cursor: pointer;
}

[b-31oe5p8hyr] .auth-remember .form-check-input {
    margin: 0;
}

[b-31oe5p8hyr] .auth-forgot {
    color: var(--accent);
    text-decoration: none;
}

[b-31oe5p8hyr] .auth-forgot:hover {
    text-decoration: underline;
}

/* ── Súhlasy pri registrácii ── */
[b-31oe5p8hyr] .auth-consents {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin: 1.1rem 0 .35rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

[b-31oe5p8hyr] .auth-consent {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .88rem;
    line-height: 1.45;
    color: var(--text-secondary);
    cursor: pointer;
}

[b-31oe5p8hyr] .auth-consent input[type="checkbox"] {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin: .15rem 0 0;
    accent-color: var(--accent);
    cursor: pointer;
}

[b-31oe5p8hyr] .auth-consent a {
    color: var(--accent);
    text-decoration: none;
}

[b-31oe5p8hyr] .auth-consent a:hover {
    text-decoration: underline;
}

[b-31oe5p8hyr] .auth-consent-optional {
    color: var(--text-muted);
    font-size: .8rem;
}

/* Vysvetlenie pod súhlasmi — čo sa s údajmi deje. */
[b-31oe5p8hyr] .auth-privacy-note {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: .8rem 0 0;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--text-muted);
}

[b-31oe5p8hyr] .auth-privacy-note .bi {
    flex-shrink: 0;
    margin-top: .1rem;
    color: var(--success);
}

/* ── Tlačidlo ── */
[b-31oe5p8hyr] .auth-btn {
    width: 100%;
    margin-top: 1rem;
    padding: .75rem;
    border: none;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: #fff;
    font-size: .98rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .1s;
}

[b-31oe5p8hyr] .auth-btn:hover {
    background: var(--accent-hover);
}

[b-31oe5p8hyr] .auth-btn:active {
    transform: scale(.99);
}

/* ── Oddeľovač ── */
[b-31oe5p8hyr] .auth-divider {
    display: flex;
    align-items: center;
    margin: 1.25rem 0;
    color: var(--text-muted);
    font-size: .88rem;
}

[b-31oe5p8hyr] .auth-divider::before,
[b-31oe5p8hyr] .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

[b-31oe5p8hyr] .auth-divider span {
    padding: 0 .75rem;
}

/* ── Prihlásenie cez poskytovateľa ── */
[b-31oe5p8hyr] .auth-external-form {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

[b-31oe5p8hyr] .auth-external-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .65rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: .95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

[b-31oe5p8hyr] .auth-external-btn:hover {
    background: var(--nav-hover-bg);
    border-color: var(--accent);
}

[b-31oe5p8hyr] .auth-external-icon {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
}

/* ── Pätička karty ── */
[b-31oe5p8hyr] .auth-footer {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: .92rem;
    color: var(--text-muted);
}

[b-31oe5p8hyr] .auth-footer a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

[b-31oe5p8hyr] .auth-footer a:hover {
    text-decoration: underline;
}

/* Odhlásenie v pätičke je formulár (POST), ale pôsobiť má ako obyčajný odkaz. */
[b-31oe5p8hyr] .auth-link-button {
    padding: 0;
    border: none;
    background: none;
    color: var(--accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

[b-31oe5p8hyr] .auth-link-button:hover {
    text-decoration: underline;
}

/* ── Zoznam zmenených dokumentov pri opätovnom odsúhlasení ── */
[b-31oe5p8hyr] .review-documents {
    margin: .6rem 0 0;
    padding-left: 1.1rem;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

[b-31oe5p8hyr] .review-documents a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

[b-31oe5p8hyr] .review-documents a:hover {
    text-decoration: underline;
}

[b-31oe5p8hyr] .review-version {
    display: block;
    color: var(--text-muted);
    font-size: .8rem;
}

/* ── Právne odkazy pod kartou ── */
.account-legal[b-31oe5p8hyr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.5rem;
    font-size: .82rem;
    color: var(--text-muted);
}

.account-legal a[b-31oe5p8hyr] {
    color: var(--text-muted);
    text-decoration: none;
}

.account-legal a:hover[b-31oe5p8hyr] {
    color: var(--accent);
    text-decoration: underline;
}

/* ── Verzia aplikácie pod právnymi odkazmi ── */
.account-version[b-31oe5p8hyr] {
    margin-top: .5rem;
    text-align: center;
    font-size: .78rem;
    color: var(--text-muted);
}

.account-version a[b-31oe5p8hyr] {
    color: inherit;
    text-decoration: none;
}

.account-version a:hover[b-31oe5p8hyr] {
    color: var(--text-secondary);
    text-decoration: underline;
}

/* ── Validácia ── */
[b-31oe5p8hyr] .text-danger {
    display: block;
    margin-top: .1rem;
    color: var(--danger) !important;
    font-size: .85rem;
}

[b-31oe5p8hyr] .validation-message {
    margin-bottom: .25rem;
}

/* ── Stavová hláška ── */
[b-31oe5p8hyr] .alert {
    padding: .7rem .9rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: .92rem;
}

[b-31oe5p8hyr] .alert-danger {
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
    background: var(--danger-subtle);
}

/* ── Chybová lišta Blazoru ──
   Framework ju zobrazí tak, že prvku nastaví `display` priamo do atribútu `style`.
   Preto je vonkajší prvok obyčajný blok a rozloženie rieši až vnútorný `.error-ui-body`
   — inak by inline štýl prebil naše `display: flex`.
   Vzhľad ide výhradne cez tokeny témy, takže lišta sedí v tmavej aj svetlej. */
#blazor-error-ui[b-31oe5p8hyr] {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    width: min(34rem, calc(100% - 2rem));
    box-sizing: border-box;
    z-index: 1000;
}

    #blazor-error-ui .error-ui-body[b-31oe5p8hyr] {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .75rem 1rem;
        background: var(--bg-card);
        border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        animation: bm-rise var(--motion-base) var(--ease-out) backwards;
    }

    #blazor-error-ui .error-ui-icon[b-31oe5p8hyr] {
        flex: none;
        display: grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background: var(--danger-subtle);
        color: var(--danger);
        font-size: .95rem;
    }

    #blazor-error-ui .error-ui-text[b-31oe5p8hyr] {
        flex: 1 1 auto;
        min-width: 0;
        font-size: .9rem;
        line-height: 1.35;
        color: var(--text-primary);
    }

    #blazor-error-ui .reload[b-31oe5p8hyr] {
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .4rem .8rem;
        font-size: .85rem;
        font-weight: 500;
        text-decoration: none;
        color: var(--text-primary);
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
    }

        #blazor-error-ui .reload:hover[b-31oe5p8hyr] {
            background: var(--nav-hover-bg);
            border-color: var(--brand-line);
        }

    #blazor-error-ui .dismiss[b-31oe5p8hyr] {
        flex: none;
        display: grid;
        place-items: center;
        width: 1.75rem;
        height: 1.75rem;
        padding: 0;
        font-size: .8rem;
        color: var(--text-muted);
        background: transparent;
        border: 0;
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
    }

        #blazor-error-ui .dismiss:hover[b-31oe5p8hyr] {
            background: var(--nav-hover-bg);
            color: var(--text-primary);
        }

@media (max-width: 480px) {
    #blazor-error-ui .error-ui-body[b-31oe5p8hyr] {
        flex-wrap: wrap;
    }

    #blazor-error-ui .error-ui-text[b-31oe5p8hyr] {
        flex: 1 1 100%;
        order: 3;
    }
}

@media (max-width: 480px) {
    [b-31oe5p8hyr] .auth-card {
        padding: 1.5rem 1.15rem;
    }
}


/* ══ Pohyb ═════════════════════════════════════════════════════════════════
   Prihlasovacie obrazovky vidí človek pár sekúnd a málokedy, takže si tu môže
   aplikácia dovoliť výraznejší nábeh než vo vnútri. */
.account-content[b-31oe5p8hyr] {
    animation: bm-rise var(--motion-slow) var(--ease-out) backwards;
}

.account-brand-icon[b-31oe5p8hyr] {
    transition: transform var(--motion-slow) var(--ease-spring);
}

.account-brand:hover .account-brand-icon[b-31oe5p8hyr] {
    transform: rotate(-8deg) scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
    .account-content[b-31oe5p8hyr] {
        animation: none;
    }

    .account-brand:hover .account-brand-icon[b-31oe5p8hyr] {
        transform: none;
    }
}
/* /Components/Layout/CurrencySwitcher.razor.rz.scp.css */
/* ── Currency switcher ── */
.currency-switcher[b-rttme0g8ry] {
    position: relative;
}

.currency-toggle[b-rttme0g8ry] {
    background: var(--nav-hover-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    height: 36px;
    padding: 0 .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .5px;
    transition: all .2s ease;
    gap: .35rem;
}

.currency-toggle:hover[b-rttme0g8ry] {
    background: var(--accent-subtle);
    color: var(--accent);
    border-color: var(--accent);
}

.currency-code[b-rttme0g8ry] {
    font-family: monospace;
}

/* ── Dropdown ── */
.currency-dropdown[b-rttme0g8ry] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    padding: .35rem;
    z-index: 100;
}

.currency-option[b-rttme0g8ry] {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .75rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: .95rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
}

.currency-option:hover[b-rttme0g8ry] {
    background: var(--nav-hover-bg);
}

.currency-option.active[b-rttme0g8ry] {
    background: var(--accent-subtle);
    color: var(--accent);
    font-weight: 600;
}

.currency-symbol[b-rttme0g8ry] {
    font-weight: 700;
    min-width: 1.5rem;
    text-align: center;
}

.currency-divider[b-rttme0g8ry] {
    height: 1px;
    background: var(--border-color);
    margin: .25rem .5rem;
}

.manage-btn[b-rttme0g8ry] {
    color: var(--text-muted);
    font-size: .92rem;
}

/* ── Pohyb ──
   Ponuka sa vysúva zhora, jej položky nabiehajú postupne. Oneskorenie je krátke: pri troch
   až piatich menách nejde o efekt, ale o naznačenie smeru, ktorým sa ponuka otvorila. */
.currency-toggle[b-rttme0g8ry] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.currency-toggle:active[b-rttme0g8ry] {
    transform: scale(.95);
    transition-duration: var(--motion-press);
}

.currency-dropdown[b-rttme0g8ry] {
    animation: bm-unfold var(--motion-base) var(--ease-out) both;
    transform-origin: top right;
}

.currency-option[b-rttme0g8ry] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}


.currency-option:hover[b-rttme0g8ry] {
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    .currency-dropdown[b-rttme0g8ry] {
        animation: none;
    }

    .currency-toggle:active[b-rttme0g8ry],
    .currency-option:hover[b-rttme0g8ry] {
        transform: none;
    }
}
/* /Components/Layout/LanguageSwitcher.razor.rz.scp.css */
/* ── Language switcher (neprihlásený návštevník) ── */
.language-switcher[b-08hef93wvp] {
    position: relative;
}

.language-toggle[b-08hef93wvp] {
    background: var(--nav-hover-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    height: 36px;
    padding: 0 .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .5px;
    transition: all .2s ease;
}

.language-toggle:hover[b-08hef93wvp] {
    background: var(--accent-subtle);
    color: var(--accent);
    border-color: var(--accent);
}

.language-code[b-08hef93wvp] {
    font-family: monospace;
}

.language-flag[b-08hef93wvp] {
    font-size: 1.05rem;
    line-height: 1;
}

/* ── Dropdown ── */
.language-dropdown[b-08hef93wvp] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    min-width: 170px;
    padding: .35rem;
    z-index: 100;
}

.language-option[b-08hef93wvp] {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .75rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: .95rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
}

.language-option:hover[b-08hef93wvp] {
    background: var(--nav-hover-bg);
}

.language-option.active[b-08hef93wvp] {
    background: var(--accent-subtle);
    color: var(--accent);
    font-weight: 600;
}

.language-label[b-08hef93wvp] {
    white-space: nowrap;
}

/* ── Pohyb ──
   Ponuka sa vysúva zhora, jej položky nabiehajú postupne. Oneskorenie je krátke: pri troch
   až piatich menách nejde o efekt, ale o naznačenie smeru, ktorým sa ponuka otvorila. */
.language-toggle[b-08hef93wvp] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.language-toggle:active[b-08hef93wvp] {
    transform: scale(.95);
    transition-duration: var(--motion-press);
}

.language-dropdown[b-08hef93wvp] {
    animation: bm-unfold var(--motion-base) var(--ease-out) both;
    transform-origin: top right;
}

.language-option[b-08hef93wvp] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}


.language-option:hover[b-08hef93wvp] {
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    .language-dropdown[b-08hef93wvp] {
        animation: none;
    }

    .language-toggle:active[b-08hef93wvp],
    .language-option:hover[b-08hef93wvp] {
        transform: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ÔöÇÔöÇ Page shell ÔöÇÔöÇ */
.page[b-ftv5fa144r] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-body);
    color: var(--text-primary);
}

/* ÔöÇÔöÇ Sidebar ÔöÇÔöÇ */
.sidebar[b-ftv5fa144r] {
    background: var(--bg-sidebar);
    box-shadow: var(--shadow-md);
    z-index: 10;
    display: flex;
    flex-direction: column;
    transition: width .25s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
    position: relative;
    border-right: 1px solid var(--brand-line);
}

/* Mäkká žiara vo farbe témy pri hornom okraji menu — pokračovanie aurory na pozadí. */
.sidebar[b-ftv5fa144r]::before {
    content: "";
    position: absolute;
    top: -30%;
    left: -40%;
    width: 180%;
    height: 70%;
    background: radial-gradient(closest-side, var(--brand-glow), transparent 100%);
    opacity: .55;
    pointer-events: none;
    /* Sidebar má vlastný stacking context (z-index: 10), takže -1 znamená
       „nad pozadím sidebaru, ale pod položkami menu" — text zostáva ostrý. */
    z-index: -1;
}

/* ÔöÇÔöÇ Sidebar toggle button ÔöÇÔöÇ */
.sidebar-toggle[b-ftv5fa144r] {
    flex-shrink: 0;
    height: 42px;
    border: none;
    border-top: 1px solid var(--sidebar-border);
    background: transparent;
    color: var(--sidebar-text-muted);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: .97rem;
    transition: all .15s ease;
}

.sidebar-toggle:hover[b-ftv5fa144r] {
    background: var(--sidebar-hover-bg);
    color: var(--text-primary);
}

/* ÔöÇÔöÇ Main area (header + content) ÔöÇÔöÇ */
/* `position` + `z-index` držia obsah nad fixnou aurora vrstvou (.app-aurora, z-index: 0). */
.main-area[b-ftv5fa144r] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    z-index: 1;
}

/* ÔöÇÔöÇ Top bar ÔöÇÔöÇ */
.top-bar[b-ftv5fa144r] {
    background: color-mix(in srgb, var(--brand) 6%, var(--bg-surface));
    border-bottom: 1px solid var(--brand-line);
    padding: 0 1.5rem;
    height: 4.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    /* Musí prekryť aj stránkové sticky prvky (napr. bočné menu nastavení na úzkom okne,
       ktoré má vlastný z-index) — inak im vypadne zvonček s notifikáciami pod nimi. */
    z-index: 50;
    box-shadow: var(--shadow-sm);
}

.top-bar-left[b-ftv5fa144r] {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.top-bar-right[b-ftv5fa144r] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* Štýl prepínača témy sa presunul do ThemeToggle.razor.css spolu s tlačidlom. */

/* ÔöÇÔöÇ Content ÔöÇÔöÇ */
/* Žiadny `overflow` — inak by sa `main` stal najbližším scroll kontajnerom pre `position: sticky`
   prvky stránok, hoci sám nikdy nescrolluje (scrolluje dokument), a lepenie by prestalo fungovať. */
main[b-ftv5fa144r] {
    flex: 1;
    min-width: 0;
}

/* ÔöÇÔöÇ Responsive ÔöÇÔöÇ */
@media (max-width: 640.98px) {
    .top-bar[b-ftv5fa144r] {
        padding: 0 1rem;
    }
}

@media (min-width: 641px) {
    .page[b-ftv5fa144r] {
        flex-direction: row;
    }

    .sidebar[b-ftv5fa144r] {
        width: 260px;
        height: 100vh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
    }

    .sidebar-toggle[b-ftv5fa144r] {
        display: flex;
    }

    .top-bar[b-ftv5fa144r], article[b-ftv5fa144r] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    /* ÔöÇÔöÇ Collapsed sidebar ÔöÇÔöÇ */
    /* Stav zbalenia nesie atribút na <html>, nie trieda na `.page`. Blazor pri prechode
       z prerenderu na interaktivitu prepíše atribúty prvkov, ktoré vykresľuje, a triedu
       pridanú z JS by tým zmazal — koreňového elementu sa naopak nikdy nedotkne. */
    :root[data-sidebar="collapsed"] .page .sidebar[b-ftv5fa144r] {
        width: 64px;
    }

    :root[data-sidebar="collapsed"] .page[b-ftv5fa144r]  .brand-text,
    :root[data-sidebar="collapsed"] .page[b-ftv5fa144r]  .nav-section-text,
    :root[data-sidebar="collapsed"] .page[b-ftv5fa144r]  .nav-text {
        display: none;
    }

    /* Nadpis sekcie sa v úzkom pruhu nezmestí, preto ho nahradíme oddeľovacou čiarou —
       inak by všetky sekcie splynuli do jedného súvislého stĺpca ikon. */
    :root[data-sidebar="collapsed"] .page[b-ftv5fa144r]  .nav-section-label {
        padding: .5rem .9rem;
    }

    /* `currentColor` je farba nadpisu sekcie – čiara tak ostane čitateľná v svetlej aj tmavej téme
       (--sidebar-border je v tmavej téme príliš slabý na to, aby bol v úzkom pruhu vidieť). */
    :root[data-sidebar="collapsed"] .page[b-ftv5fa144r]  .nav-section-label::before {
        content: "";
        display: block;
        height: 1px;
        background: currentColor;
        opacity: .4;
    }

    /* Nad prvou sekciou je už čiara pod brandom, druhá by pôsobila ako dvojlinka. */
    :root[data-sidebar="collapsed"] .page[b-ftv5fa144r]  .nav-section-label--first {
        padding: .25rem 0 0;
    }

    :root[data-sidebar="collapsed"] .page[b-ftv5fa144r]  .nav-section-label--first::before {
        display: none;
    }

    :root[data-sidebar="collapsed"] .page[b-ftv5fa144r]  .sidebar-brand {
        justify-content: center;
        padding: 1.1rem .5rem;
    }

    :root[data-sidebar="collapsed"] .page[b-ftv5fa144r]  .nav-item {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }

    :root[data-sidebar="collapsed"] .page[b-ftv5fa144r]  .nav-link {
        justify-content: center;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    :root[data-sidebar="collapsed"] .page[b-ftv5fa144r]  .bi {
        margin-right: 0;
        font-size: 1.2rem;
    }

    :root[data-sidebar="collapsed"] .page[b-ftv5fa144r]  .nav-bottom {
        border-top-color: var(--sidebar-border);
    }

    /* V zbalenom menu sa celý text „Verzia 0.5 Alpha" nezmestí, ostáva len číslo verzie. */
    :root[data-sidebar="collapsed"] .page[b-ftv5fa144r]  .nav-version {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    :root[data-sidebar="collapsed"] .page[b-ftv5fa144r]  .nav-version-short {
        display: inline;
    }
}

/* ── Chybová lišta Blazoru ──
   Framework ju zobrazí tak, že prvku nastaví `display` priamo do atribútu `style`.
   Preto je vonkajší prvok obyčajný blok a rozloženie rieši až vnútorný `.error-ui-body`
   — inak by inline štýl prebil naše `display: flex`.
   Vzhľad ide výhradne cez tokeny témy, takže lišta sedí v tmavej aj svetlej. */
#blazor-error-ui[b-ftv5fa144r] {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    width: min(34rem, calc(100% - 2rem));
    box-sizing: border-box;
    z-index: 1000;
}

    #blazor-error-ui .error-ui-body[b-ftv5fa144r] {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .75rem 1rem;
        background: var(--bg-card);
        border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        animation: bm-rise var(--motion-base) var(--ease-out) backwards;
    }

    #blazor-error-ui .error-ui-icon[b-ftv5fa144r] {
        flex: none;
        display: grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background: var(--danger-subtle);
        color: var(--danger);
        font-size: .95rem;
    }

    #blazor-error-ui .error-ui-text[b-ftv5fa144r] {
        flex: 1 1 auto;
        min-width: 0;
        font-size: .9rem;
        line-height: 1.35;
        color: var(--text-primary);
    }

    #blazor-error-ui .reload[b-ftv5fa144r] {
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .4rem .8rem;
        font-size: .85rem;
        font-weight: 500;
        text-decoration: none;
        color: var(--text-primary);
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
    }

        #blazor-error-ui .reload:hover[b-ftv5fa144r] {
            background: var(--nav-hover-bg);
            border-color: var(--brand-line);
        }

    #blazor-error-ui .dismiss[b-ftv5fa144r] {
        flex: none;
        display: grid;
        place-items: center;
        width: 1.75rem;
        height: 1.75rem;
        padding: 0;
        font-size: .8rem;
        color: var(--text-muted);
        background: transparent;
        border: 0;
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
    }

        #blazor-error-ui .dismiss:hover[b-ftv5fa144r] {
            background: var(--nav-hover-bg);
            color: var(--text-primary);
        }

@media (max-width: 480px) {
    #blazor-error-ui .error-ui-body[b-ftv5fa144r] {
        flex-wrap: wrap;
    }

    #blazor-error-ui .error-ui-text[b-ftv5fa144r] {
        flex: 1 1 100%;
        order: 3;
    }
}

/* ── Pohyb v ráme aplikácie ──
   Šírka bočného panela sa už prelína vyššie; tu sa dopĺňa to, čo k zbaleniu patrí —
   šípka sa otočí na druhú stranu, aby ukazovala, čo tlačidlo urobí teraz. */
.sidebar-toggle[b-ftv5fa144r] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.sidebar-toggle .bi[b-ftv5fa144r] {
    display: inline-block;
    transition: transform var(--motion-base) var(--ease-out);
}

/* Šípka ukazuje opačný smer, keď je menu zbalené — otočením, nie výmenou znaku.
   Otočenie sa dá animovať, takže pri zbalení a rozbaľení šípka plynulo prejde do druhého
   smeru namiesto toho, aby preskočila. Z JS sa to robiť nedá — ikonu
   vykresľuje Blazor a triedu by pri prekreslení vrátil späť. */
:root[data-sidebar="collapsed"] .page .sidebar-toggle .bi[b-ftv5fa144r] {
    transform: rotate(180deg);
}

.sidebar-toggle:active .bi[b-ftv5fa144r] {
    transform: scale(.85);
    transition-duration: var(--motion-press);
}

:root[data-sidebar="collapsed"] .page .sidebar-toggle:active .bi[b-ftv5fa144r] {
    transform: rotate(180deg) scale(.85);
}

/* Obsah zbaleného menu sa nesmie prekresliť skokom skôr, než sa panel zúži. */
.sidebar[b-ftv5fa144r] {
    transition: width var(--motion-base) var(--ease-in-out);
}

@media (prefers-reduced-motion: reduce) {
    .sidebar[b-ftv5fa144r] {
        transition: none;
    }

    .sidebar-toggle:active .bi[b-ftv5fa144r] {
        transform: none;
    }

    :root[data-sidebar="collapsed"] .page .sidebar-toggle:active .bi[b-ftv5fa144r] {
        transform: rotate(180deg);
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ── Nav icon color variants ── */
.nav-icon[b-5o8369yy89] { transition: color .15s ease, filter .15s ease; }

.nav-icon--green[b-5o8369yy89]  { color: #3fb950; }
.nav-icon--blue[b-5o8369yy89]   { color: #4d9fff; }
.nav-icon--teal[b-5o8369yy89]   { color: #22d3ee; }
.nav-icon--orange[b-5o8369yy89] { color: #f5a623; }
.nav-icon--purple[b-5o8369yy89] { color: #c084fc; }
.nav-icon--yellow[b-5o8369yy89] { color: #facc15; }
.nav-icon--pink[b-5o8369yy89]   { color: #f472b6; }
.nav-icon--muted[b-5o8369yy89]  { color: var(--sidebar-text-muted); }

/* Active state — icon keeps its color, no glow */
.nav-item[b-5o8369yy89]  a.active .nav-icon--green  { color: #3fb950; }
.nav-item[b-5o8369yy89]  a.active .nav-icon--blue   { color: #4d9fff; }
.nav-item[b-5o8369yy89]  a.active .nav-icon--teal   { color: #22d3ee; }
.nav-item[b-5o8369yy89]  a.active .nav-icon--orange { color: #f5a623; }
.nav-item[b-5o8369yy89]  a.active .nav-icon--purple { color: #c084fc; }
.nav-item[b-5o8369yy89]  a.active .nav-icon--yellow { color: #facc15; }
.nav-item[b-5o8369yy89]  a.active .nav-icon--pink   { color: #f472b6; }

/* ── Mobile toggle ── */
.navbar-toggler[b-5o8369yy89] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: var(--text-primary);
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid var(--sidebar-border);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem var(--sidebar-hover-bg);
    border-radius: 6px;
}

.navbar-toggler:checked[b-5o8369yy89] {
    background-color: var(--sidebar-hover-bg);
}

/* ── Brand area ── */
.sidebar-brand[b-5o8369yy89] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--sidebar-border);
}

.brand-icon[b-5o8369yy89] {
    font-size: 1.5rem;
    color: var(--accent);
}

.brand-text[b-5o8369yy89] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: .5px;
}

/* ── Section labels ── */
.nav-section-label[b-5o8369yy89] {
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--sidebar-text-muted);
    padding: 1.2rem 1.5rem .4rem;
    text-transform: uppercase;
}

/* ── Icons ── */
.bi[b-5o8369yy89] {
    display: inline-block;
    position: relative;
    font-size: 1.1rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
    flex-shrink: 0;
}

/* ── Nav items ── */
.nav-item[b-5o8369yy89] {
    font-size: 1rem;
    padding-bottom: 2px;
}

    .nav-item:first-of-type[b-5o8369yy89] {
        padding-top: 0;
    }

    .nav-item:last-of-type[b-5o8369yy89] {
        padding-bottom: 1rem;
    }

    .nav-item[b-5o8369yy89]  .nav-link {
        color: var(--sidebar-text);
        background: none;
        border: none;
        border-radius: 8px;
        height: 2.75rem;
        display: flex;
        align-items: center;
        line-height: 1.2;
        width: 100%;
        transition: all .15s ease;
        font-weight: 500;
    }

/* Dlhší názov (napr. „Plánované nákupy") sa nesmie zalomiť – inak by sa text
   rozišiel s ikonou a riadky by prestali lícovať. */
.nav-item[b-5o8369yy89]  .nav-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.nav-item[b-5o8369yy89]  a.active {
    color: var(--text-primary);
}

/* Per-color active backgrounds — tinted from the icon color.
   Rámček tu zámerne nie je: aktívnu položku označuje prúžok pri ľavom okraji
   (viď sekciu o pohybe nižšie) a obe zvýraznenia naraz by boli priťažké. */
.nav-item[b-5o8369yy89]  a.active:has(.nav-icon--green)  { background: rgba(63,185,80,.15); }
.nav-item[b-5o8369yy89]  a.active:has(.nav-icon--blue)   { background: rgba(77,159,255,.15); }
.nav-item[b-5o8369yy89]  a.active:has(.nav-icon--teal)   { background: rgba(34,211,238,.12); }
.nav-item[b-5o8369yy89]  a.active:has(.nav-icon--orange) { background: rgba(245,166,35,.15); }
.nav-item[b-5o8369yy89]  a.active:has(.nav-icon--purple) { background: rgba(192,132,252,.15); }
.nav-item[b-5o8369yy89]  a.active:has(.nav-icon--yellow) { background: rgba(250,204,21,.12); }
.nav-item[b-5o8369yy89]  a.active:has(.nav-icon--pink)   { background: rgba(244,114,182,.15); }
.nav-item[b-5o8369yy89]  a.active:has(.nav-icon--muted)  { background: var(--nav-active-bg); }

/* Do NOT override icon colors on active — each icon keeps its own color */
.nav-item[b-5o8369yy89]  a.active .bi:not(.nav-icon) {
    color: var(--accent);
}

.nav-item[b-5o8369yy89]  .nav-link:hover {
    background: var(--sidebar-hover-bg);
    color: var(--text-primary);
}

/* ── Scrollable area ── */
.nav-scrollable[b-5o8369yy89] {
    display: none;
    overflow: hidden;
}

@media (max-width: 640px) {
    .navbar-toggler:checked ~ .nav-scrollable[b-5o8369yy89] {
        display: block;
    }
}

/* ── Verzia aplikácie pod účtom ── */
/* Odkaz na novinky. Zámerne nenápadný — pripomína popisku, nie tlačidlo; farbu a jemné
   pozadie dostane až pri prejdení myšou. */
.nav-version[b-5o8369yy89] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: fit-content;
    margin: .35rem auto .7rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    letter-spacing: .01em;
    color: var(--sidebar-text-muted);
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease;
}

.nav-version:hover[b-5o8369yy89],
.nav-version:focus-visible[b-5o8369yy89] {
    color: var(--sidebar-text);
    background: color-mix(in srgb, var(--sidebar-text) 10%, transparent);
    text-decoration: none;
}

.nav-version:focus-visible[b-5o8369yy89] {
    outline: 1px solid var(--sidebar-text-muted);
    outline-offset: 1px;
}

/* Krátka značka sa ukáže až vtedy, keď je menu zbalené — pozri MainLayout.razor.css. */
.nav-version-short[b-5o8369yy89] {
    display: none;
}

/* ── Bottom account section ── */
.nav-bottom[b-5o8369yy89] {
    border-top: 1px solid var(--sidebar-border);
    padding-top: .5rem;
}

@media (min-width: 641px) {
    .navbar-toggler[b-5o8369yy89] {
        display: none;
    }

    .nav-scrollable[b-5o8369yy89] {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .nav-main[b-5o8369yy89] {
        flex: 1;
    }

    .nav-bottom[b-5o8369yy89] {
        margin-top: auto;
    }
}

/* ── Pohyb v menu ──
   Pri prejdení myšou vyrastie pri ľavom okraji položky zvislý prúžok vo farbe jej ikony.
   To isté, len natrvalo a vyššie, označuje práve otvorenú stránku — hover a aktívny stav
   tak hovoria rovnakým jazykom a líšia sa iba mierou.

   Zámerne sa nemení veľkosť ani poloha ničoho. V úzkom stĺpci menu je zmena rozmerov
   nepokojná a text pod kurzorom uteká; prúžok naproti tomu rastie mimo textu, takže
   riadok zostane presne tam, kde bol.

   Nábeh položiek pri načítaní tu zámerne NIE JE. Bočný panel prežíva prechod medzi
   stránkami, takže by sa animácia opakovala pri každom kliknutí v menu. */
.nav-item[b-5o8369yy89]  .nav-link {
    position: relative;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

/* Prúžok kreslí pseudoprvok, aby si položka nemusela niesť ďalší prvok v značkovaní.
   Je ukotvený stredom a rastie na obe strany, takže pri zbalenom menu, kde je položka
   takmer štvorcová, vyzerá rovnako vycentrovane ako pri rozbalenom. */
.nav-item[b-5o8369yy89]  .nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 0 2px 2px 0;
    background: var(--accent);
    transform: translateY(-50%);
    transition: height var(--motion-base) var(--ease-out);
}

    .nav-item[b-5o8369yy89]  .nav-link:not(.active):hover::before {
        height: 1.25rem;
    }

    /* Otvorená stránka má prúžok stále a cez celú výšku ikony — na prvý pohľad ho odlíši
       od položky, nad ktorou len stojí kurzor. */
    .nav-item[b-5o8369yy89]  .nav-link.active::before {
        height: 1.75rem;
    }

/* Farbu si prúžok berie z ikony rovnako, ako to robí podfarbenie aktívnej položky. */
.nav-item[b-5o8369yy89]  .nav-link:has(.nav-icon--green)::before  { background: #3fb950; }
.nav-item[b-5o8369yy89]  .nav-link:has(.nav-icon--blue)::before   { background: #4d9fff; }
.nav-item[b-5o8369yy89]  .nav-link:has(.nav-icon--teal)::before   { background: #22d3ee; }
.nav-item[b-5o8369yy89]  .nav-link:has(.nav-icon--orange)::before { background: #f5a623; }
.nav-item[b-5o8369yy89]  .nav-link:has(.nav-icon--purple)::before { background: #c084fc; }
.nav-item[b-5o8369yy89]  .nav-link:has(.nav-icon--yellow)::before { background: #facc15; }
.nav-item[b-5o8369yy89]  .nav-link:has(.nav-icon--pink)::before   { background: #f472b6; }
.nav-item[b-5o8369yy89]  .nav-link:has(.nav-icon--muted)::before  { background: var(--sidebar-text-muted); }

/* Stlačenie je jediné miesto, kde sa položka na okamih zmenší — potvrdzuje dotyk,
   nie prejdenie myšou, a trvá kratšie než čokoľvek iné v menu. */
.nav-item[b-5o8369yy89]  .nav-link:active {
    transform: scale(.985);
    transition-duration: var(--motion-press);
}

/* Značka aplikácie — jediné miesto v menu, ktoré sa hýbe samo od seba, a to len pri dotyku. */
.brand-icon[b-5o8369yy89] {
    transition: transform var(--motion-slow) var(--ease-spring);
}

.sidebar-brand:hover .brand-icon[b-5o8369yy89] {
    transform: rotate(-8deg);
}

@media (prefers-reduced-motion: reduce) {
    /* Prúžok zostáva — nie je to pohyb, ale označenie. Len sa objaví naraz. */
    .nav-item[b-5o8369yy89]  .nav-link::before {
        transition: none;
    }

    .nav-item[b-5o8369yy89]  .nav-link:active,
    .sidebar-brand:hover .brand-icon[b-5o8369yy89] {
        transform: none;
    }
}
/* /Components/Layout/NotificationBell.razor.rz.scp.css */
/* ── Zvonček s notifikáciami ── */
.notification-bell[b-sx28rht9mv] {
    position: relative;
}

.bell-toggle[b-sx28rht9mv] {
    position: relative;
    background: var(--nav-hover-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    height: 36px;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 1rem;
    transition: all .2s ease;
}

.bell-toggle:hover[b-sx28rht9mv] {
    background: var(--accent-subtle);
    color: var(--accent);
    border-color: var(--accent);
}

.bell-badge[b-sx28rht9mv] {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #dc3545;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* ── Backdrop na zavretie kliknutím mimo ── */
.bell-backdrop[b-sx28rht9mv] {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: transparent;
}

/* ── Dropdown ── */
.bell-dropdown[b-sx28rht9mv] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    width: 360px;
    max-width: calc(100vw - 2rem);
    padding: .35rem;
    z-index: 100;
}

.bell-header[b-sx28rht9mv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--border-color);
}

.bell-title[b-sx28rht9mv] {
    font-weight: 600;
    color: var(--text-primary);
}

.bell-clear-all[b-sx28rht9mv] {
    display: flex;
    align-items: center;
    gap: .35rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: .85rem;
    cursor: pointer;
    border-radius: 6px;
    padding: .25rem .5rem;
    transition: all .15s;
}

.bell-clear-all:hover[b-sx28rht9mv] {
    background: var(--nav-hover-bg);
    color: var(--text-primary);
}

/* ── Prázdny stav ── */
.bell-empty[b-sx28rht9mv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.5rem 1rem;
    color: var(--text-muted);
    font-size: .92rem;
}

.bell-empty .bi[b-sx28rht9mv] {
    font-size: 1.5rem;
    opacity: .6;
}

/* ── Zoznam notifikácií ── */
.bell-list[b-sx28rht9mv] {
    max-height: 380px;
    overflow-y: auto;
}

.bell-item[b-sx28rht9mv] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .6rem .75rem;
    border-radius: 8px;
    transition: background .15s;
}

.bell-item:hover[b-sx28rht9mv] {
    background: var(--nav-hover-bg);
}

.bell-item + .bell-item[b-sx28rht9mv] {
    border-top: 1px solid var(--border-color);
}

.bell-item-icon[b-sx28rht9mv] {
    font-size: 1.05rem;
    margin-top: .1rem;
}

.bell-item-icon.warning[b-sx28rht9mv] { color: #ffc107; }
.bell-item-icon.danger[b-sx28rht9mv]  { color: #dc3545; }
.bell-item-icon.info[b-sx28rht9mv]    { color: var(--accent); }

.bell-item-body[b-sx28rht9mv] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    flex: 1;
    min-width: 0;
}

.bell-item-title[b-sx28rht9mv] {
    font-weight: 600;
    font-size: .92rem;
    color: var(--text-primary);
}

.bell-item-message[b-sx28rht9mv] {
    font-size: .85rem;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.bell-item-time[b-sx28rht9mv] {
    font-size: .75rem;
    color: var(--text-muted);
}

.bell-item-dismiss[b-sx28rht9mv] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    padding: .2rem .35rem;
    font-size: .8rem;
    transition: all .15s;
}

.bell-item-dismiss:hover[b-sx28rht9mv] {
    background: var(--accent-subtle);
    color: var(--accent);
}

/* ── Pohyb ──
   Zvonček je jediné miesto v hlavičke, ktoré sa hýbe samo od seba — a to len vtedy, keď má
   používateľ čo prečítať. Preto sa pohyb viaže na odznak s počtom, nie na tlačidlo. */

/* Kruh, ktorý sa z odznaku rozšíri a vytratí. Beží trikrát a stíchne; nepretržité blikanie
   by v aplikácii otvorenej celý deň otravovalo. */
@keyframes bell-ping-b-sx28rht9mv {
    0% {
        opacity: .55;
        transform: scale(1);
    }

    70%, 100% {
        opacity: 0;
        transform: scale(2.4);
    }
}

@keyframes bell-swing-b-sx28rht9mv {
    0%, 100% {
        transform: rotate(0);
    }

    20% {
        transform: rotate(12deg);
    }

    45% {
        transform: rotate(-9deg);
    }

    70% {
        transform: rotate(5deg);
    }
}

.bell-toggle[b-sx28rht9mv] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.bell-toggle:active[b-sx28rht9mv] {
    transform: scale(.92);
    transition-duration: var(--motion-press);
}

.bell-toggle .bi[b-sx28rht9mv] {
    display: inline-block;
    transform-origin: 50% 15%;
}

/* Zakývanie len pri neprečítaných — `:has` viaže pohyb na prítomnosť odznaku, takže tichý
   zvonček zostane naozaj tichý. Zakývanie sa zámerne neopakuje pri prejdení myšou: animácia
   by sa reštartovala pri každom odídení kurzora a zvonček by sa triasol takmer stále. */
.bell-toggle:has(.bell-badge) .bi[b-sx28rht9mv] {
    animation: bell-swing-b-sx28rht9mv 1s var(--ease-in-out) 2;
}

/* Vlna okolo odznaku. Je to prstenec, nie vyplnený kruh — číslo pod ním musí zostať čitateľné. */
.bell-badge[b-sx28rht9mv]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid #dc3545;
    animation: bell-ping-b-sx28rht9mv 1.8s var(--ease-out) 3;
    pointer-events: none;
}

/* ── Ponuka ── */
.bell-dropdown[b-sx28rht9mv] {
    animation: bm-unfold var(--motion-base) var(--ease-out) both;
}

/* Notifikácie nabiehajú zhora nadol. Prvé tri majú vlastný krok, zvyšok dobehne spolu —
   pri dlhom zozname by postupné oneskorenie znamenalo, že spodok viditeľnej časti mešká. */
.bell-item[b-sx28rht9mv] {
    transition: background-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}


.bell-item-dismiss[b-sx28rht9mv] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.bell-item-dismiss:hover[b-sx28rht9mv] {
    transform: rotate(90deg);
}

.bell-clear-all[b-sx28rht9mv] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.bell-clear-all:active[b-sx28rht9mv] {
    transform: scale(.95);
    transition-duration: var(--motion-press);
}

@media (prefers-reduced-motion: reduce) {
    .bell-toggle:has(.bell-badge) .bi[b-sx28rht9mv],
    .bell-badge[b-sx28rht9mv]::after,
    .bell-dropdown[b-sx28rht9mv] {
        animation: none;
    }

    .bell-badge[b-sx28rht9mv]::after {
        display: none;
    }

    .bell-toggle:active[b-sx28rht9mv],
    .bell-item-dismiss:hover[b-sx28rht9mv],
    .bell-clear-all:active[b-sx28rht9mv] {
        transform: none;
    }
}
/* /Components/Layout/ThemeToggle.razor.rz.scp.css */
/* Presunuté z MainLayout.razor.css spolu s tlačidlom — scoped CSS platí len v komponente,
   v ktorom je prvok vykreslený. */
.theme-toggle[b-a6ofk2h77v] {
    background: var(--nav-hover-bg);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 1.1rem;
    transition: all .2s ease;
}

.theme-toggle:hover[b-a6ofk2h77v] {
    background: var(--accent-subtle);
    color: var(--accent);
    border-color: var(--accent);
}

/* ── Pohyb ──
   Prepínač témy je tlačidlo s jedinou ikonou, takže celú spätnú väzbu nesie ona:
   pri prejdení myšou sa pootočí, pri stlačení sa tlačidlo stlačí dovnútra. */
.theme-toggle[b-a6ofk2h77v] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.theme-toggle:active[b-a6ofk2h77v] {
    transform: scale(.9);
    transition-duration: var(--motion-press);
}

.theme-toggle .bi[b-a6ofk2h77v] {
    display: inline-block;
    transition: transform var(--motion-slow) var(--ease-spring);
}

.theme-toggle:hover .bi[b-a6ofk2h77v] {
    transform: rotate(25deg) scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle:active[b-a6ofk2h77v],
    .theme-toggle:hover .bi[b-a6ofk2h77v] {
        transform: none;
    }
}
/* /Components/Layout/TopBarActions.razor.rz.scp.css */
.tba-root[b-rhzvrtmvgi] {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

/* ── Vyhľadávanie ── */
.tba-search[b-rhzvrtmvgi] {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 38px;
    width: clamp(180px, 24vw, 340px);
    padding: 0 .6rem 0 .75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.tba-search:focus-within[b-rhzvrtmvgi] {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

.tba-search-icon[b-rhzvrtmvgi] {
    font-size: .95rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.tba-search-input[b-rhzvrtmvgi] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: .92rem;
}

.tba-search-input[b-rhzvrtmvgi]::placeholder {
    color: var(--text-muted);
}

.tba-search-hint[b-rhzvrtmvgi] {
    flex-shrink: 0;
    padding: 2px 6px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--nav-hover-bg);
    color: var(--text-muted);
    font-size: .68rem;
    font-family: inherit;
    line-height: 1.4;
}

.tba-search-clear[b-rhzvrtmvgi] {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: .75rem;
    cursor: pointer;
    padding: 4px;
    border-radius: 5px;
}

.tba-search-clear:hover[b-rhzvrtmvgi] {
    background: var(--nav-hover-bg);
    color: var(--text-primary);
}

/* ── Panel s výsledkami ── */
.tba-backdrop[b-rhzvrtmvgi] {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: transparent;
}

.tba-results[b-rhzvrtmvgi] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    min-width: 340px;
    max-height: 420px;
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    padding: .3rem;
    z-index: 100;
    animation: tbaFadeInDown-b-rhzvrtmvgi .15s ease;
}

@keyframes tbaFadeInDown-b-rhzvrtmvgi {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tba-results-empty[b-rhzvrtmvgi] {
    padding: 1.1rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: .9rem;
}

.tba-result[b-rhzvrtmvgi] {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .5rem .6rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .15s;
}

.tba-result:hover[b-rhzvrtmvgi] {
    background: var(--nav-hover-bg);
}

.tba-result-icon[b-rhzvrtmvgi] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: .8rem;
    flex-shrink: 0;
}

.tba-result-icon.inflow[b-rhzvrtmvgi] { background: var(--success-subtle); color: var(--success); }
.tba-result-icon.outflow[b-rhzvrtmvgi] { background: var(--danger-subtle); color: var(--danger); }

.tba-result-body[b-rhzvrtmvgi] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1;
    min-width: 0;
}

.tba-result-name[b-rhzvrtmvgi] {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tba-result-meta[b-rhzvrtmvgi] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    color: var(--text-muted);
    min-width: 0;
}

.tba-result-budget[b-rhzvrtmvgi] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tba-budget-color, var(--accent)) 18%, transparent);
    color: var(--tba-budget-color, var(--accent));
    font-weight: 600;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tba-result-budget-icon[b-rhzvrtmvgi] {
    font-size: .8rem;
    line-height: 1;
}

.tba-result-pending[b-rhzvrtmvgi] {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--warning-subtle);
    color: var(--warning);
    font-weight: 600;
}

.tba-result-value[b-rhzvrtmvgi] {
    font-size: .92rem;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tba-result-value.inflow[b-rhzvrtmvgi] { color: var(--success); }
.tba-result-value.outflow[b-rhzvrtmvgi] { color: var(--danger); }

/* ── Tlačidlo Pridať ── */
.tba-add[b-rhzvrtmvgi] {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 38px;
    border-radius: 10px;
    background: var(--accent);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 30%, transparent);
}

.tba-add-btn[b-rhzvrtmvgi],
.tba-add-caret[b-rhzvrtmvgi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: none;
    background: transparent;
    color: #fff;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s;
}

.tba-add-btn[b-rhzvrtmvgi] {
    padding: 0 .9rem;
    border-radius: 10px 0 0 10px;
}

.tba-add-caret[b-rhzvrtmvgi] {
    padding: 0 .55rem;
    border-left: 1px solid rgba(255, 255, 255, .28);
    border-radius: 0 10px 10px 0;
    font-size: .72rem;
}

.tba-add-btn:hover[b-rhzvrtmvgi],
.tba-add-caret:hover[b-rhzvrtmvgi] {
    filter: brightness(1.12);
}

.tba-menu[b-rhzvrtmvgi] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 210px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    padding: .3rem;
    z-index: 100;
    animation: tbaFadeInDown-b-rhzvrtmvgi .15s ease;
}

.tba-menu-item[b-rhzvrtmvgi] {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .5rem .6rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font-size: .9rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s;
}

.tba-menu-item:hover[b-rhzvrtmvgi] {
    background: var(--nav-hover-bg);
    color: var(--text-primary);
}

.tba-menu-item .bi[b-rhzvrtmvgi] {
    color: var(--accent);
}

/* ── Užšie displeje ── */
@media (max-width: 1100px) {
    .tba-add-text[b-rhzvrtmvgi] { display: none; }

    .tba-add-btn[b-rhzvrtmvgi] { padding: 0 .7rem; }
}

@media (max-width: 900px) {
    .tba-search[b-rhzvrtmvgi] {
        width: 150px;
    }

    .tba-search-hint[b-rhzvrtmvgi] { display: none; }

    .tba-results[b-rhzvrtmvgi] {
        left: auto;
        right: 0;
        width: min(360px, calc(100vw - 2rem));
    }
}

/* ── Pohyb ──
   Vyhľadávanie je najčastejšia akcia v hlavičke, preto má aj najvýraznejšiu odozvu:
   pole sa pri zaostrení nepatrne roztiahne a výsledky pod ním postupne nabehnú. */
.tba-search[b-rhzvrtmvgi] {
    transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out);
}

.tba-search:focus-within[b-rhzvrtmvgi] {
    transform: scale(1.015);
}

.tba-search-icon[b-rhzvrtmvgi] {
    transition: color var(--motion-fast) var(--ease-out), transform var(--motion-base) var(--ease-spring);
}

.tba-search:focus-within .tba-search-icon[b-rhzvrtmvgi] {
    transform: scale(1.12);
}

.tba-search-clear[b-rhzvrtmvgi] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.tba-search-clear:hover[b-rhzvrtmvgi] {
    transform: rotate(90deg);
}

/* Zoznam výsledkov. Oneskorenie má len prvých päť riadkov — ďalšie sú aj tak pod hranicou
   viditeľnej časti a čakanie by len zdržalo prvý dojem z odpovede. */
.tba-results[b-rhzvrtmvgi] {
    animation: bm-unfold var(--motion-base) var(--ease-out) both;
}

.tba-result[b-rhzvrtmvgi] {
    transition: background-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}


.tba-result:hover[b-rhzvrtmvgi] {
    transform: translateX(3px);
}

.tba-result-icon[b-rhzvrtmvgi] {
    transition: transform var(--motion-base) var(--ease-spring);
}

.tba-result:hover .tba-result-icon[b-rhzvrtmvgi] {
    transform: scale(1.1);
}

/* ── Tlačidlo pridania ── */
.tba-add-btn[b-rhzvrtmvgi],
.tba-add-caret[b-rhzvrtmvgi] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.tba-add-btn:active[b-rhzvrtmvgi],
.tba-add-caret:active[b-rhzvrtmvgi] {
    transform: scale(.96);
    transition-duration: var(--motion-press);
}

.tba-menu[b-rhzvrtmvgi] {
    animation: bm-unfold var(--motion-base) var(--ease-out) both;
}

.tba-menu-item[b-rhzvrtmvgi] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.tba-menu-item:hover[b-rhzvrtmvgi] {
    transform: translateX(3px);
}

.tba-menu-item .bi[b-rhzvrtmvgi] {
    transition: transform var(--motion-base) var(--ease-spring);
}

.tba-menu-item:hover .bi[b-rhzvrtmvgi] {
    transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
    .tba-results[b-rhzvrtmvgi],
    .tba-menu[b-rhzvrtmvgi] {
        animation: none;
    }

    .tba-search:focus-within[b-rhzvrtmvgi],
    .tba-search:focus-within .tba-search-icon[b-rhzvrtmvgi],
    .tba-search-clear:hover[b-rhzvrtmvgi],
    .tba-result:hover[b-rhzvrtmvgi],
    .tba-result:hover .tba-result-icon[b-rhzvrtmvgi],
    .tba-add-btn:active[b-rhzvrtmvgi],
    .tba-add-caret:active[b-rhzvrtmvgi],
    .tba-menu-item:hover[b-rhzvrtmvgi],
    .tba-menu-item:hover .bi[b-rhzvrtmvgi] {
        transform: none;
    }
}
/* /Components/Layout/TopBarStats.razor.rz.scp.css */
/* ── Pás dlaždíc v hlavičke ── */
.tbs-strip[b-jmtf9234m2] {
    display: flex;
    align-items: stretch;
    gap: .35rem;
    min-width: 0;
}

.tbs-tile[b-jmtf9234m2] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .75rem;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    text-align: left;
    white-space: nowrap;
}

/* Dlaždice sú oddelené jemnou linkou namiesto rámčekov – lišta tak ostáva pokojná.
   Rozklikávacie dlaždice sú zabalené v .tbs-menu, preto sa linka rieši cez potomka. */
.tbs-strip > *:not(:first-child).tbs-tile[b-jmtf9234m2],
.tbs-strip > *:not(:first-child) .tbs-tile[b-jmtf9234m2] {
    border-left: 1px solid var(--border-color);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Dlaždica s minutým má za textom pruh, ktorý rastie s čerpaním – rovnako ako karty rozpočtov. */
.tbs-tile--filled[b-jmtf9234m2] {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.tbs-fill-bg[b-jmtf9234m2] {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--tbs-fill, 0%);
    background: color-mix(in srgb, var(--tbs-fill-color, var(--accent)) 26%, transparent);
    transition: width .6s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
    z-index: 0;
}

.tbs-tile--filled > .tbs-icon[b-jmtf9234m2],
.tbs-tile--filled > .tbs-body[b-jmtf9234m2] {
    position: relative;
    z-index: 1;
}

.tbs-tile--button[b-jmtf9234m2] {
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.tbs-tile--button:hover[b-jmtf9234m2] {
    background: var(--nav-hover-bg);
}

.tbs-icon[b-jmtf9234m2] {
    font-size: 1.15rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Dlaždice mimo statusu majú jednotnú farbu ikony; farebný ostáva len status. */
.tbs-icon--accent[b-jmtf9234m2] { color: var(--accent); }

.tbs-body[b-jmtf9234m2] {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    min-width: 0;
}

.tbs-label[b-jmtf9234m2] {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.2;
}

.tbs-value[b-jmtf9234m2] {
    font-size: .98rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.tbs-value--danger[b-jmtf9234m2] { color: var(--danger); }

.tbs-value--income[b-jmtf9234m2] { color: var(--success); }

.tbs-value--expense[b-jmtf9234m2] { color: var(--danger); }

.tbs-sub[b-jmtf9234m2] {
    font-size: .72rem;
    color: var(--text-muted);
    line-height: 1.2;
}

/* ── Rozklikávacia dlaždica s rozpisom pod ňou ── */
.tbs-menu[b-jmtf9234m2] {
    position: relative;
    display: flex;
}

/* Stav čerpania farbí ikonu, hodnotu aj pruh na pozadí dlaždice s minutým. */
.tbs-state-ok[b-jmtf9234m2] { --tbs-fill-color: var(--success); }
.tbs-state-warning[b-jmtf9234m2] { --tbs-fill-color: var(--warning); }
.tbs-state-over[b-jmtf9234m2] { --tbs-fill-color: var(--danger); }
.tbs-state-neutral[b-jmtf9234m2] { --tbs-fill-color: var(--text-muted); }

.tbs-state-ok .tbs-icon--status[b-jmtf9234m2],
.tbs-state-ok .tbs-value--status[b-jmtf9234m2] { color: var(--success); }

.tbs-state-warning .tbs-icon--status[b-jmtf9234m2],
.tbs-state-warning .tbs-value--status[b-jmtf9234m2] { color: var(--warning); }

.tbs-state-over .tbs-icon--status[b-jmtf9234m2],
.tbs-state-over .tbs-value--status[b-jmtf9234m2] { color: var(--danger); }

.tbs-state-neutral .tbs-icon--status[b-jmtf9234m2],
.tbs-state-neutral .tbs-value--status[b-jmtf9234m2] { color: var(--text-muted); }

.tbs-state-warning .tbs-value--spent[b-jmtf9234m2] { color: var(--warning); }
.tbs-state-over .tbs-value--spent[b-jmtf9234m2] { color: var(--danger); }

.tbs-caret[b-jmtf9234m2] {
    font-size: .7rem;
    color: var(--text-muted);
}

/* ── Backdrop na zavretie kliknutím mimo ── */
.bt-dropdown-backdrop[b-jmtf9234m2] {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: transparent;
}

/* ── Rozbalený zoznam rozpočtov ── */
.bt-dropdown[b-jmtf9234m2] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 380px;
    max-width: calc(100vw - 2rem);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    padding: .35rem;
    z-index: 100;
    animation: budgetFadeInDown-b-jmtf9234m2 .15s ease;
}

@keyframes budgetFadeInDown-b-jmtf9234m2 {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bt-dropdown-header[b-jmtf9234m2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--border-color);
}

.bt-dropdown-header .title[b-jmtf9234m2] {
    font-weight: 600;
    color: var(--text-primary);
}

.bt-dropdown-header .detail-link[b-jmtf9234m2] {
    font-size: .82rem;
    color: var(--accent);
    text-decoration: none;
}

.bt-dropdown-header .detail-link:hover[b-jmtf9234m2] {
    text-decoration: underline;
}

/* ── Rozpis peňazí: hlavička s mesiacom ── */
.bt-dropdown--money[b-jmtf9234m2] {
    width: 420px;
}

.bt-money-header[b-jmtf9234m2] {
    gap: .6rem;
}

.bt-money-header .header-icon[b-jmtf9234m2] {
    font-size: 1.05rem;
    color: var(--accent);
    line-height: 1;
}

.bt-money-header .header-text[b-jmtf9234m2] {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    margin-right: auto;
    min-width: 0;
}

.bt-money-header .title[b-jmtf9234m2] {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.2;
}

.bt-money-header .subtitle[b-jmtf9234m2] {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

/* ── Zložky mesiaca ako kartičky ──
   Dve v rade; posledná kartička v nepárnom počte sa roztiahne, nech v mriežke nezostane diera. */
.bt-money-grid[b-jmtf9234m2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
    padding: .5rem .5rem .35rem;
}

/* Kartička, ktorá by inak zostala sama v polovici riadku, zaberie celú šírku. */
.bt-money-card--full[b-jmtf9234m2] {
    grid-column: 1 / -1;
}

.bt-money-grid--where[b-jmtf9234m2] {
    padding-top: .35rem;
}

.bt-money-card[b-jmtf9234m2] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .6rem;
    border-radius: 10px;
    background: var(--nav-hover-bg);
    border: 1px solid var(--border-color);
    min-width: 0;
}

.bt-money-card .card-icon[b-jmtf9234m2] {
    font-size: 1rem;
    line-height: 1;
    color: var(--text-muted);
    flex-shrink: 0;
}

.bt-money-card .card-icon--income[b-jmtf9234m2] { color: var(--success); }
.bt-money-card .card-icon--spent[b-jmtf9234m2] { color: var(--danger); }
.bt-money-card .card-icon--reserved[b-jmtf9234m2] { color: var(--warning); }
.bt-money-card .card-icon--aside[b-jmtf9234m2],
.bt-money-card .card-icon--cash[b-jmtf9234m2] { color: var(--accent); }

.bt-money-card .card-body[b-jmtf9234m2] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    flex: 1;
}

.bt-money-card .card-label[b-jmtf9234m2] {
    font-size: .72rem;
    color: var(--text-muted);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bt-money-card .card-value[b-jmtf9234m2] {
    font-size: .92rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.bt-money-card .card-value--income[b-jmtf9234m2] { color: var(--success); }
.bt-money-card .card-value--spent[b-jmtf9234m2] { color: var(--danger); }
.bt-money-card .card-value--reserved[b-jmtf9234m2] { color: var(--warning); }

/* Kartičky „Na účte" a „Hotovosť" vedú na svoju stránku – šípka to naznačuje. */
.bt-money-card--link[b-jmtf9234m2] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.bt-money-card--link:hover[b-jmtf9234m2] {
    border-color: var(--accent);
}

.bt-money-card .card-caret[b-jmtf9234m2] {
    font-size: .7rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Nadpis sekcie rozpočtov v rozpise peňazí – rozpočty sú tu doplnok, nie hlavné číslo. */
.bt-section-label[b-jmtf9234m2] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .75rem .25rem;
    border-top: 1px solid var(--border-color);
    font-size: .78rem;
}

.bt-section-label .text[b-jmtf9234m2] {
    font-weight: 600;
    color: var(--text-secondary);
}

.bt-section-label .note[b-jmtf9234m2] {
    margin-left: auto;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.bt-dropdown-hint[b-jmtf9234m2] {
    padding-top: .25rem;
    font-size: .74rem;
    color: var(--text-muted);
    line-height: 1.35;
    white-space: normal;
}

/* ── Riadok jedného príjmu ── */
.bt-income-row[b-jmtf9234m2] {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    padding: .4rem .7rem;
    border-radius: 8px;
    font-size: .85rem;
}

.bt-income-row:nth-child(odd)[b-jmtf9234m2] {
    background: var(--nav-hover-bg);
}

.bt-income-date[b-jmtf9234m2] {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bt-income-name[b-jmtf9234m2] {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bt-income-tag[b-jmtf9234m2] {
    margin-left: .3rem;
    font-size: .75rem;
    color: var(--text-muted);
}

.bt-income-value[b-jmtf9234m2] {
    font-weight: 600;
    color: var(--success);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bt-income-value--spent[b-jmtf9234m2] {
    color: var(--danger);
}

/* Očakávaný pohyb sa ešte nestal – je preto tlmenejší. */
.bt-income-row.bt-expected .bt-income-name[b-jmtf9234m2],
.bt-income-row.bt-expected .bt-income-value[b-jmtf9234m2] {
    opacity: .6;
}

.bt-dropdown-empty[b-jmtf9234m2] {
    padding: 1.25rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: .9rem;
}

.bt-dropdown-list[b-jmtf9234m2] {
    max-height: 340px;
    overflow-y: auto;
    padding: .25rem 0;
}

/* ── Riadok jedného rozpočtu ── */
.bt-row[b-jmtf9234m2] {
    position: relative;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .7rem;
    border-radius: 8px;
    overflow: hidden;
    background: var(--nav-hover-bg);
    margin-bottom: .25rem;
}

.bt-row:last-child[b-jmtf9234m2] {
    margin-bottom: 0;
}

/* Plnenie rozpočtu je pozadím celého riadku – rovnaká reč ako karty na stránke Rozpočty. */
.bt-row-fill-bg[b-jmtf9234m2] {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--bt-row-fill, 0%);
    background: color-mix(in srgb, var(--bt-row-color, var(--accent)) 30%, transparent);
    transition: width .6s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
    z-index: 0;
}

.bt-row.bt-overspent .bt-row-fill-bg[b-jmtf9234m2] {
    background: color-mix(in srgb, var(--danger) 30%, transparent);
}

.bt-row-icon[b-jmtf9234m2],
.bt-row-body[b-jmtf9234m2],
.bt-row-pct[b-jmtf9234m2] {
    position: relative;
    z-index: 1;
}

.bt-row-icon[b-jmtf9234m2] {
    font-size: 1.05rem;
    line-height: 1;
}

.bt-row-body[b-jmtf9234m2] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    flex: 1;
    min-width: 0;
}

.bt-row-pct[b-jmtf9234m2] {
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bt-row.bt-overspent .bt-row-pct[b-jmtf9234m2] {
    color: var(--danger);
}

.bt-row-name[b-jmtf9234m2] {
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bt-row-amounts[b-jmtf9234m2] {
    display: flex;
    align-items: baseline;
    gap: .2rem;
    font-size: .8rem;
    white-space: nowrap;
}

.bt-row-amounts .spent[b-jmtf9234m2] {
    font-weight: 600;
    color: var(--text-primary);
}

.bt-row-amounts .separator[b-jmtf9234m2],
.bt-row-amounts .limit[b-jmtf9234m2] {
    color: var(--text-muted);
}

.bt-row-amounts .no-limit[b-jmtf9234m2] {
    color: var(--text-muted);
    font-style: italic;
}

.bt-row.bt-overspent .bt-row-amounts .spent[b-jmtf9234m2] {
    color: var(--danger);
}

/* ── Súčty pod zoznamom ── */
.bt-dropdown-totals[b-jmtf9234m2] {
    border-top: 1px solid var(--border-color);
    padding: .5rem .75rem .35rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.total-line[b-jmtf9234m2] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    font-size: .84rem;
}

.total-line .label[b-jmtf9234m2] {
    color: var(--text-secondary);
}

.total-line .value[b-jmtf9234m2] {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.total-line.strong[b-jmtf9234m2] {
    font-weight: 700;
    padding-top: .2rem;
    border-top: 1px dashed var(--border-color);
}

.total-line.success .value[b-jmtf9234m2] { color: var(--success); }
.total-line.danger .value[b-jmtf9234m2] { color: var(--danger); }

/* ── Postupné skrývanie na užších displejoch ── */
@media (max-width: 1500px) {
    .tbs-sub[b-jmtf9234m2] { display: none; }
}

@media (max-width: 1280px) {
    .tbs-strip > *:nth-child(3)[b-jmtf9234m2] { display: none; }
}

@media (max-width: 1100px) {
    .tbs-strip > *:nth-child(2)[b-jmtf9234m2] { display: none; }
}

@media (max-width: 900px) {
    .tbs-body[b-jmtf9234m2] { display: none; }

    .tbs-strip > *:not(:first-child).tbs-tile[b-jmtf9234m2],
    .tbs-strip > *:not(:first-child) .tbs-tile[b-jmtf9234m2] {
        border-left: none;
    }

    .bt-dropdown[b-jmtf9234m2] {
        left: auto;
        right: 0;
    }
}

/* ── Pohyb ──
   Dlaždice v hlavičke drží aplikácia otvorené stále, takže sa pri načítaní zámerne
   neanimujú — nábeh by sa opakoval pri každom prechode na inú stránku. Pohyb má len
   to, čoho sa dá dotknúť. */
.tbs-tile[b-jmtf9234m2] {
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.tbs-tile--button:hover[b-jmtf9234m2] {
    transform: translateY(-1px);
}

.tbs-tile--button:active[b-jmtf9234m2] {
    transform: translateY(0) scale(.98);
    transition-duration: var(--motion-press);
}

.tbs-icon[b-jmtf9234m2] {
    transition: transform var(--motion-base) var(--ease-spring), color var(--motion-fast) var(--ease-out);
}

.tbs-tile--button:hover .tbs-icon[b-jmtf9234m2] {
    transform: scale(1.12);
}

/* Pruh naplnenia rozpočtu. Plynulá zmena šírky je tu dôležitejšia než inde: dlaždica je
   na obrazovke stále, takže po zapísaní výdavku vidno priamo, o koľko ubudlo. */
.tbs-fill-bg[b-jmtf9234m2] {
    transition: width var(--motion-slow) var(--ease-out), background-color var(--motion-base) var(--ease-out);
}

.tbs-caret[b-jmtf9234m2] {
    transition: transform var(--motion-base) var(--ease-out);
}

.tbs-tile--button:hover .tbs-caret[b-jmtf9234m2] {
    transform: translateY(1px);
}

/* ── Rozbaľovacia ponuka dlaždice ── */
.bt-dropdown[b-jmtf9234m2] {
    animation: bm-unfold var(--motion-base) var(--ease-out) both;
}

.bt-income-row[b-jmtf9234m2] {
    transition: background-color var(--motion-fast) var(--ease-out);
}

.bt-dropdown-header .detail-link[b-jmtf9234m2] {
    transition: color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.bt-dropdown-header .detail-link:hover[b-jmtf9234m2] {
    transform: translateX(2px);
}

.bt-money-card--link[b-jmtf9234m2] {
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.bt-money-card--link:hover[b-jmtf9234m2] {
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .bt-dropdown[b-jmtf9234m2] {
        animation: none;
    }

    .bt-money-card--link:hover[b-jmtf9234m2],
    .tbs-tile--button:hover[b-jmtf9234m2],
    .tbs-tile--button:active[b-jmtf9234m2],
    .tbs-tile--button:hover .tbs-icon[b-jmtf9234m2],
    .tbs-tile--button:hover .tbs-caret[b-jmtf9234m2],
    .bt-dropdown-header .detail-link:hover[b-jmtf9234m2] {
        transform: none;
    }
}
/* /Components/Layout/UserChip.razor.rz.scp.css */
.user-chip[b-knzc1cgb9v] {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .3rem .7rem .3rem .3rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: .88rem;
    transition: border-color .15s, color .15s;
}

.user-chip:hover[b-knzc1cgb9v] {
    border-color: var(--accent);
    color: var(--text-primary);
}

.user-chip-avatar[b-knzc1cgb9v] {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}

.user-chip-initials[b-knzc1cgb9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-subtle);
    color: var(--accent);
    font-size: .72rem;
    font-weight: 700;
}

.user-chip-name[b-knzc1cgb9v] {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Na úzkych obrazovkách stačí fotka — meno by hlavičku pretlačilo. */
@media (max-width: 700px) {
    .user-chip-name[b-knzc1cgb9v] {
        display: none;
    }

    .user-chip[b-knzc1cgb9v] {
        padding: .3rem;
    }
}

/* ── Pohyb ──
   Karta účtu je odkaz, nie tlačidlo, takže sa pri dotyku len nadvihne. Fotka narastie
   o niečo viac ako karta — vďaka tomu pôsobí ako jej „živá" časť. */
.user-chip[b-knzc1cgb9v] {
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}

.user-chip:hover[b-knzc1cgb9v] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.user-chip:active[b-knzc1cgb9v] {
    transform: translateY(0) scale(.98);
    transition-duration: var(--motion-press);
}

.user-chip-avatar[b-knzc1cgb9v] {
    transition: transform var(--motion-base) var(--ease-spring);
}

.user-chip:hover .user-chip-avatar[b-knzc1cgb9v] {
    transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    .user-chip:hover[b-knzc1cgb9v],
    .user-chip:active[b-knzc1cgb9v],
    .user-chip:hover .user-chip-avatar[b-knzc1cgb9v] {
        transform: none;
    }
}
/* /Components/Pages/Backup.razor.rz.scp.css */
/* ── Backup page ── */
.backup-page[b-5ujjz8u4u9] {
    padding: 0 16px 2rem;
}

.page-header[b-5ujjz8u4u9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 12px;
}

.page-header h1[b-5ujjz8u4u9] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

/* ── Alert ── */
.alert[b-5ujjz8u4u9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-sm, 6px);
    margin-bottom: 16px;
    font-size: 1rem;
    font-weight: 500;
    position: relative;
}

.alert-success[b-5ujjz8u4u9] {
    background: rgba(63, 185, 80, .12);
    color: #3fb950;
    border: 1px solid rgba(63, 185, 80, .25);
}

.alert-danger[b-5ujjz8u4u9] {
    background: rgba(248, 81, 73, .12);
    color: #f85149;
    border: 1px solid rgba(248, 81, 73, .25);
}

.alert-close[b-5ujjz8u4u9] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: .6;
    transition: opacity .15s;
}

.alert-close:hover[b-5ujjz8u4u9] {
    opacity: 1;
}

/* ── Grid layout ── */
.backup-grid[b-5ujjz8u4u9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.full-width[b-5ujjz8u4u9] {
    grid-column: 1 / -1;
}

/* ── Cards ── */
.backup-card[b-5ujjz8u4u9] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .35));
}

.card-header[b-5ujjz8u4u9] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(128, 128, 128, .06);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 16px;
}

.card-header h2[b-5ujjz8u4u9] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.card-header .bi[b-5ujjz8u4u9] {
    font-size: 1.15rem;
    color: var(--accent);
}

.card-body[b-5ujjz8u4u9] {
    padding: 16px;
}

.card-desc[b-5ujjz8u4u9] {
    color: var(--text-secondary);
    font-size: .97rem;
    margin: 0 0 14px;
    line-height: 1.5;
}

/* ── Buttons ── */
.btn-action[b-5ujjz8u4u9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-sm, 6px);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}

.btn-action:hover:not(:disabled)[b-5ujjz8u4u9] {
    transform: translateY(-1px);
}

.btn-action:disabled[b-5ujjz8u4u9] {
    opacity: .6;
    cursor: not-allowed;
}

.btn-action.primary[b-5ujjz8u4u9] {
    background: var(--accent);
    color: #fff;
}

.btn-action.primary:hover:not(:disabled)[b-5ujjz8u4u9] {
    background: var(--accent-hover);
}

.btn-action.secondary[b-5ujjz8u4u9] {
    background: rgba(128, 128, 128, .15);
    color: var(--text-primary);
}

.btn-action.secondary:hover:not(:disabled)[b-5ujjz8u4u9] {
    background: rgba(128, 128, 128, .25);
}

/* ── File upload ── */
.file-upload-area[b-5ujjz8u4u9] {
    position: relative;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-sm, 6px);
    padding: 28px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    margin-bottom: 14px;
}

.file-upload-area:hover[b-5ujjz8u4u9],
.file-upload-area.drag-active[b-5ujjz8u4u9] {
    border-color: var(--accent);
    background: rgba(88, 166, 255, .06);
}

.file-upload-area[b-5ujjz8u4u9]  input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-content[b-5ujjz8u4u9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 1rem;
    pointer-events: none;
}

.upload-content .bi[b-5ujjz8u4u9] {
    font-size: 2rem;
    color: var(--accent);
}

/* ── Import preview ── */
.import-preview[b-5ujjz8u4u9] {
    background: rgba(128, 128, 128, .06);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    padding: 14px;
}

.preview-header[b-5ujjz8u4u9] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: .97rem;
    color: var(--accent);
}

.preview-stats[b-5ujjz8u4u9] {
    display: flex;
    gap: 18px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.stat-item[b-5ujjz8u4u9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-label[b-5ujjz8u4u9] {
    font-size: .95rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.stat-value[b-5ujjz8u4u9] {
    font-size: 1rem;
    font-weight: 700;
}

.import-options[b-5ujjz8u4u9] {
    margin-bottom: 14px;
}

.toggle-option[b-5ujjz8u4u9] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: .97rem;
}

.toggle-option input[type="checkbox"][b-5ujjz8u4u9] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
}

.toggle-label[b-5ujjz8u4u9] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #f85149;
}

.import-actions[b-5ujjz8u4u9] {
    display: flex;
    gap: 10px;
}

/* ── Backup list ── */
.backup-list[b-5ujjz8u4u9] {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
}

.backup-list-header[b-5ujjz8u4u9] {
    display: grid;
    grid-template-columns: 1fr 160px 100px 110px;
    gap: 12px;
    padding: 8px 14px;
    background: rgba(128, 128, 128, .08);
    border-bottom: 1px solid var(--border-color);
    font-size: .95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-secondary);
}

.backup-list-row[b-5ujjz8u4u9] {
    display: grid;
    grid-template-columns: 1fr 160px 100px 110px;
    gap: 12px;
    padding: 10px 14px;
    align-items: center;
    border-bottom: 1px solid rgba(128, 128, 128, .08);
    font-size: .97rem;
    transition: background .12s;
}

.backup-list-row:last-child[b-5ujjz8u4u9] {
    border-bottom: none;
}

.backup-list-row:hover[b-5ujjz8u4u9] {
    background: rgba(128, 128, 128, .06);
}

.backup-list-row .col-name[b-5ujjz8u4u9] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.backup-list-row .col-name .bi[b-5ujjz8u4u9] {
    color: var(--accent);
    flex-shrink: 0;
}

.backup-list-row .col-date[b-5ujjz8u4u9] {
    color: var(--text-secondary);
    font-size: .92rem;
}

.backup-list-row .col-size[b-5ujjz8u4u9] {
    color: var(--text-secondary);
    font-size: .92rem;
}

.backup-list-row .col-actions[b-5ujjz8u4u9] {
    display: flex;
    gap: 6px;
}

.btn-icon[b-5ujjz8u4u9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .15s;
    font-size: .95rem;
}

.btn-icon:hover[b-5ujjz8u4u9] {
    background: rgba(88, 166, 255, .12);
    color: var(--accent);
    border-color: var(--accent);
}

.btn-icon.restore:hover[b-5ujjz8u4u9] {
    background: rgba(240, 173, 78, .12);
    color: #f0ad4e;
    border-color: #f0ad4e;
}

/* ── Restore dialog ── */
.restore-overlay[b-5ujjz8u4u9] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.restore-dialog[b-5ujjz8u4u9] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    padding: 20px 24px;
    max-width: 460px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
}

.restore-dialog-header[b-5ujjz8u4u9] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 1rem;
}

.restore-dialog-text[b-5ujjz8u4u9] {
    color: var(--text-secondary);
    font-size: .97rem;
    margin: 0 0 14px;
    line-height: 1.5;
}

/* ── Empty state ── */
.empty-state[b-5ujjz8u4u9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px;
    color: var(--text-secondary);
}

.empty-state .bi[b-5ujjz8u4u9] {
    font-size: 2rem;
}

/* ── Spinner ── */
.spinner[b-5ujjz8u4u9] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-5ujjz8u4u9 .6s linear infinite;
}

@keyframes spin-b-5ujjz8u4u9 {
    to { transform: rotate(360deg); }
}

/* ── Responsive ── */
/* ── Settings form ── */
.settings-form[b-5ujjz8u4u9] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.toggle-label-info[b-5ujjz8u4u9] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
    font-weight: 500;
}

.interval-setting[b-5ujjz8u4u9] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .97rem;
}

.interval-setting label[b-5ujjz8u4u9] {
    color: var(--text-secondary);
    white-space: nowrap;
}

.interval-setting select[b-5ujjz8u4u9] {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: .95rem;
    cursor: pointer;
}

.interval-setting select:focus[b-5ujjz8u4u9] {
    outline: none;
    border-color: var(--accent);
}

.backup-info-row[b-5ujjz8u4u9] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem;
    color: var(--text-secondary);
}

.backup-info-row .info-icon[b-5ujjz8u4u9] {
    color: var(--accent);
    font-size: .97rem;
}

.backup-info-row .info-label[b-5ujjz8u4u9] {
    font-weight: 500;
}

.backup-info-row .info-value[b-5ujjz8u4u9] {
    color: var(--text-primary);
    font-weight: 600;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .backup-grid[b-5ujjz8u4u9] {
        grid-template-columns: 1fr;
    }

    .backup-list-header[b-5ujjz8u4u9],
    .backup-list-row[b-5ujjz8u4u9] {
        grid-template-columns: 1fr 1fr;
    }

    .backup-list-header .col-date[b-5ujjz8u4u9],
    .backup-list-row .col-date[b-5ujjz8u4u9] {
        display: none;
    }
}


/* ══ Pohyb ═════════════════════════════════════════════════════════════════
   Zálohy sú stránka, na ktorej používateľ robí nezvratné veci — obnovu a nahranie
   súboru. Pohyb tu preto potvrdzuje stav, nie akciu: plocha na pretiahnutie súboru
   reaguje na kurzor, hlásenia sa vysunú zhora a dialóg obnovy vyskočí ako každý iný. */
.backup-card[b-5ujjz8u4u9] {
    transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
    animation: bm-rise var(--motion-base) var(--ease-out) backwards;
}

.backup-grid > *:nth-child(1)[b-5ujjz8u4u9] { animation-delay: 0ms; }
.backup-grid > *:nth-child(2)[b-5ujjz8u4u9] { animation-delay: var(--stagger-step); }
.backup-grid > *:nth-child(n+3)[b-5ujjz8u4u9] { animation-delay: calc(var(--stagger-step) * 2); }

.backup-card:hover[b-5ujjz8u4u9] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Plocha na pretiahnutie súboru. Zvýraznenie je výraznejšie ako inde: používateľ
   v tej chvíli drží súbor nad oknom a potrebuje jednoznačnú odpoveď, či ho pustiť. */
.file-upload-area[b-5ujjz8u4u9] {
    transition: background-color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out);
}

.file-upload-area:hover[b-5ujjz8u4u9] {
    transform: scale(1.01);
}

/* ── Zoznam existujúcich záloh ── */
.backup-list-row[b-5ujjz8u4u9] {
    transition: background-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}


.backup-list-row:hover[b-5ujjz8u4u9] {
    transform: translateX(3px);
}

/* ── Hlásenia o výsledku ── */
.alert[b-5ujjz8u4u9] {
    animation: bm-unfold var(--motion-base) var(--ease-out) both;
}

.alert-close[b-5ujjz8u4u9] {
    transition: color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.alert-close:hover[b-5ujjz8u4u9] {
    transform: rotate(90deg);
}

/* ── Dialóg obnovy ── */
.restore-overlay[b-5ujjz8u4u9] {
    animation: bm-fade var(--motion-base) var(--ease-out) both;
}

.restore-dialog[b-5ujjz8u4u9] {
    animation: bm-pop var(--motion-base) var(--ease-spring) both;
}

.btn-action[b-5ujjz8u4u9],
.toggle-option[b-5ujjz8u4u9] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.btn-action:active[b-5ujjz8u4u9],
.toggle-option:active[b-5ujjz8u4u9] {
    transform: scale(.96);
    transition-duration: var(--motion-press);
}

@media (prefers-reduced-motion: reduce) {
    .backup-card[b-5ujjz8u4u9],
    .alert[b-5ujjz8u4u9],
    .restore-overlay[b-5ujjz8u4u9],
    .restore-dialog[b-5ujjz8u4u9] {
        animation: none;
    }

    .backup-card:hover[b-5ujjz8u4u9],
    .file-upload-area:hover[b-5ujjz8u4u9],
    .backup-list-row:hover[b-5ujjz8u4u9],
    .alert-close:hover[b-5ujjz8u4u9],
    .btn-action:active[b-5ujjz8u4u9],
    .toggle-option:active[b-5ujjz8u4u9] {
        transform: none;
    }
}
/* /Components/Pages/Budgets.razor.rz.scp.css */
/* �� Budgets page �� */
.budgets-page[b-2iws2jtdaq] {
    padding: 0 16px 2rem;
}

.page-header[b-2iws2jtdaq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 16px;
}

.page-header h1[b-2iws2jtdaq] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.header-actions[b-2iws2jtdaq] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Zámok poradia – kým je zamknuté, tlačidlo je nenápadné; po odomknutí svieti farbou akcentu. */
.btn-reorder-lock[b-2iws2jtdaq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.btn-reorder-lock:hover[b-2iws2jtdaq] {
    border-color: var(--accent);
    color: var(--text-primary);
}

.btn-reorder-lock.unlocked[b-2iws2jtdaq] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
}

.btn-add[b-2iws2jtdaq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: none;
    border-radius: var(--radius-sm, 6px);
    background: var(--accent);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}

.btn-add:hover[b-2iws2jtdaq] {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

/* �� Empty state �� */
.empty-state[b-2iws2jtdaq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

.empty-state p[b-2iws2jtdaq] {
    margin: 0;
    font-size: 1rem;
}

/* �� Sekcie (s limitom / bez limitu) �� */
.budget-section[b-2iws2jtdaq] {
    margin-bottom: 2rem;
}

.budget-section:last-child[b-2iws2jtdaq] {
    margin-bottom: 0;
}

.section-header[b-2iws2jtdaq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.section-icon[b-2iws2jtdaq] {
    font-size: 1rem;
    color: var(--text-muted);
}

.section-title[b-2iws2jtdaq] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-secondary);
}

.section-count[b-2iws2jtdaq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 20px;
    background: rgba(128,128,128,.18);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: .88rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.section-hint[b-2iws2jtdaq] {
    margin: 0 0 12px;
    font-size: .92rem;
    color: var(--text-muted);
}

.section-no-limit .budget-card[b-2iws2jtdaq] {
    min-height: 0;
    opacity: .92;
}

/* �� Porovnanie rozpočtov bez limitu �� */
.card-compare-row[b-2iws2jtdaq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .92rem;
    color: var(--text-muted);
}

.compare-delta[b-2iws2jtdaq] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: .1rem .45rem;
    border-radius: 20px;
    font-weight: 800;
    white-space: nowrap;
}

/* Viac ako minule je pri výdavkoch zlá správa, menej dobrá – rovnaké farby ako inde v appke. */
.compare-up[b-2iws2jtdaq]   { background: rgba(248, 81, 73, .18);  color: #f85149; }
.compare-down[b-2iws2jtdaq] { background: rgba(63, 185, 80, .18);  color: #3fb950; }
.compare-flat[b-2iws2jtdaq] { background: rgba(139, 148, 158, .18); color: var(--text-muted); }

.compare-baseline[b-2iws2jtdaq] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Prepínač porovnávacieho základu v hlavičke sekcie „Bez limitu“. */
.baseline-toggle[b-2iws2jtdaq] {
    display: flex;
    gap: 2px;
    margin-left: auto;
    padding: 2px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.baseline-toggle button[b-2iws2jtdaq] {
    padding: .2rem .6rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
}

.baseline-toggle button:hover[b-2iws2jtdaq] {
    color: var(--text);
}

.baseline-toggle button.active[b-2iws2jtdaq] {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
}

/* �� Card grid �� */
/* auto-fit (nie auto-fill) – prázdne stĺpce sa zrušia, takže karty vždy vyplnia celú šírku riadka. */
.budget-cards[b-2iws2jtdaq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

/* �� Budget card �� */
.budget-card[b-2iws2jtdaq] {
    /* Karty sú v mriežke a môžu byť úzke aj na veľkej obrazovke, preto sa ovládanie
       pod nimi prispôsobuje šírke karty, nie šírke okna. */
    container-type: inline-size;
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
    min-height: 160px;
}

.budget-card:hover[b-2iws2jtdaq] {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.budget-card.budget-exhausted[b-2iws2jtdaq] {
    border-color: rgba(248, 81, 73, .35);
    box-shadow: var(--shadow-sm);
}

/* �� Animated fill background �� */
.card-fill-bg[b-2iws2jtdaq] {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--fill-pct, 0%);
    background: color-mix(in srgb, var(--card-accent) 32%, transparent);
    transition: width .6s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
    z-index: 0;
}

/* Color bar on top edge */
.budget-card[b-2iws2jtdaq]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--card-accent);
    z-index: 2;
}

/* exhausted-overlay is defined globally in app.css */

/* ?? Card body ?? */
.card-body[b-2iws2jtdaq] {
    position: relative;
    z-index: 1;
    padding: 18px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* �� Top row �� */
.card-top[b-2iws2jtdaq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.card-icon-name[b-2iws2jtdaq] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Poradie (priorita) rozpočtu ── */
.card-priority[b-2iws2jtdaq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
}

.prio-btn[b-2iws2jtdaq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.prio-btn:hover:not(:disabled)[b-2iws2jtdaq] {
    background: rgba(255,255,255,.12);
    color: var(--text-primary);
}

.prio-btn:disabled[b-2iws2jtdaq] {
    opacity: .25;
    cursor: default;
}

/* Zamknuté poradie – ovládanie ostáva čitateľné, ale je zjavne neaktívne. */
.card-priority.locked[b-2iws2jtdaq] {
    opacity: .5;
}

.card-priority.locked .prio-number[b-2iws2jtdaq] {
    cursor: default;
}

.card-priority.locked .prio-number:hover[b-2iws2jtdaq] {
    border-color: transparent;
}

/* Priorita sa dá aj prepísať, preto je to input – vyzerá však ako obyčajné číslo. */
.prio-number[b-2iws2jtdaq] {
    width: 24px;
    padding: 1px 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font-size: .82rem;
    font-weight: 800;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
    cursor: text;
}

.prio-number:hover[b-2iws2jtdaq] {
    border-color: var(--border-color);
}

.prio-number:focus[b-2iws2jtdaq] {
    outline: none;
    border-color: var(--card-accent, var(--border-color));
    background: rgba(255,255,255,.08);
    color: var(--text-primary);
}

/* Šípky spinnera by v takom malom poli len prekážali. */
.prio-number[b-2iws2jtdaq]::-webkit-outer-spin-button,
.prio-number[b-2iws2jtdaq]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.prio-number[b-2iws2jtdaq] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.card-icon-wrap[b-2iws2jtdaq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.card-title[b-2iws2jtdaq] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.card-desc[b-2iws2jtdaq] {
    margin: 2px 0 0;
    font-size: .92rem;
    color: var(--text-muted);
}

.card-top-right[b-2iws2jtdaq] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.card-pct-badge[b-2iws2jtdaq] {
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: .92rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: .02em;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.15);
    /* Prečerpané rozpočty ukazujú aj trojciferné percento – nesmie sa zalomiť. */
    white-space: nowrap;
}

.card-pct-badge.pct-overspent[b-2iws2jtdaq] {
    background: rgba(248, 81, 73, .25);
    border-color: rgba(248, 81, 73, .5);
    color: #f88;
}

.override-pill[b-2iws2jtdaq] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .88rem;
    font-weight: 700;
    padding: .2rem .45rem;
    border-radius: 20px;
    white-space: nowrap;
}

.override-pill-up[b-2iws2jtdaq] {
    background: rgba(63,185,80,.18);
    color: #3fb950;
    border: 1px solid rgba(63,185,80,.35);
}

.override-pill-down[b-2iws2jtdaq] {
    background: rgba(248,81,73,.18);
    color: #f85149;
    border: 1px solid rgba(248,81,73,.35);
}

/* �� Amounts row �� */
.card-amounts-row[b-2iws2jtdaq] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.card-spent[b-2iws2jtdaq] {
    font-size: 1.55rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--card-accent, var(--accent));
    text-shadow: 0 1px 6px rgba(0,0,0,.4);
}

.card-spent.spent-over[b-2iws2jtdaq] {
    color: #f85149;
}

.card-limit-sep[b-2iws2jtdaq] {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 500;
}

.card-limit-val[b-2iws2jtdaq] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Rozpočet vynechaný zo štatistík – tlmený odznak vedľa typu rozpočtu. */
.card-muted-badge[b-2iws2jtdaq] {
    padding: 2px 9px;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-muted);
    background: rgba(128, 128, 128, .18);
}

/* �� Remaining row �� */
.card-remaining-row[b-2iws2jtdaq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.07);
}

.remaining-label[b-2iws2jtdaq] {
    font-size: .92rem;
    color: var(--text-muted);
    font-weight: 500;
}

.remaining-value[b-2iws2jtdaq] {
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--card-accent, var(--savings));
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* ── Rozpad na podrozpočty ──
   Sumy podrozpočtov sú už započítané v číslach karty, preto sa kreslia potichšie
   než hlavný pruh – ide o rozpad, nie o ďalšie položky. */
.card-subbudgets[b-2iws2jtdaq] {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.06);
}

.subbudget-header[b-2iws2jtdaq] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.subbudget-row[b-2iws2jtdaq] {
    display: grid;
    grid-template-columns: 20px minmax(60px, 1fr) minmax(40px, 1.2fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: .88rem;
}

.subbudget-icon[b-2iws2jtdaq] {
    text-align: center;
    line-height: 1;
}

.subbudget-name[b-2iws2jtdaq] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subbudget-bar[b-2iws2jtdaq] {
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,.10);
    overflow: hidden;
}

.subbudget-bar-fill[b-2iws2jtdaq] {
    display: block;
    height: 100%;
    border-radius: 3px;
}

.subbudget-amount[b-2iws2jtdaq] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-muted);
}

.subbudget-over .subbudget-amount[b-2iws2jtdaq] {
    color: var(--danger, #ef4444);
    font-weight: 700;
}

.subbudget-other .subbudget-name[b-2iws2jtdaq] {
    font-style: italic;
    color: var(--text-muted);
}

.subbudget-actions[b-2iws2jtdaq] {
    display: flex;
    gap: 4px;
}

/* Odomknuté poradie pridá riadku stĺpec so šípkami – preto vlastná mriežka. */
.subbudget-row-reorder[b-2iws2jtdaq] {
    grid-template-columns: auto 20px minmax(60px, 1fr) minmax(40px, 1.2fr) auto auto;
}

.subbudget-priority[b-2iws2jtdaq] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.subbudget-muted-icon[b-2iws2jtdaq] {
    margin-left: 4px;
    font-size: .75rem;
    color: var(--text-muted);
}

.subbudget-settings-hint[b-2iws2jtdaq] {
    margin: 6px 0 0;
    font-size: .75rem;
    color: var(--text-muted);
}

.subbudget-warning[b-2iws2jtdaq] {
    margin: 6px 0 0;
    font-size: .8rem;
    color: var(--danger, #ef4444);
}

/* �� Card actions �� */
/* Ovládanie karty je pravidelný blok. Prvý riadok nesie tri tlačidlá, druhý plán
   cez celú šírku a kôš v pravom rohu – tlačidlá tak držia spoločnú mriežku aj keď
   majú rôzne dlhé názvy. */
.card-actions[b-2iws2jtdaq] {
    display: grid;
    grid-template-columns: auto auto 1fr 42px;
    gap: 8px;
    margin-top: 12px;
}

/* Tretie tlačidlo dotiahne prvý riadok až po pravý okraj karty. */
.card-actions .action-month[b-2iws2jtdaq] {
    grid-column: 3 / -1;
}

/* Plán zaberie celý druhý riadok okrem miesta pre kôš. */
.card-actions .action-plan[b-2iws2jtdaq] {
    grid-column: 1 / 4;
}

/* Kôš je štvorcové tlačidlo v pravom dolnom rohu bloku. */
.card-actions .btn-card.delete[b-2iws2jtdaq] {
    grid-column: 4;
    grid-row: 2;
}

.btn-card[b-2iws2jtdaq] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-sm, 6px);
    background: rgba(0,0,0,.25);
    color: var(--text-secondary);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: all .12s ease;
}

/* Tlačidlá v bloku sú vyššie a vzdušnejšie než v modálnych oknách. */
.card-actions .btn-card[b-2iws2jtdaq] {
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 6px 14px;
    border-radius: var(--radius-md, 8px);
}

/* Kôš nesie len ikonu, takže mu bočné odsadenie netreba. */
.card-actions .btn-card.delete[b-2iws2jtdaq] {
    padding: 6px 0;
}

/* Užšia karta: dve rovnaké tlačidlá hore, mesiac a plán pod nimi cez celú šírku. */
@container (max-width: 400px) {
    .card-actions[b-2iws2jtdaq] {
        grid-template-columns: 1fr 1fr 42px;
    }

    .card-actions .action-month[b-2iws2jtdaq] {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    .card-actions .action-plan[b-2iws2jtdaq] {
        grid-column: 1 / 3;
        grid-row: 3;
    }

    /* Kôš stojí vedľa stĺpca tlačidiel a preklenie všetky riadky. */
    .card-actions .btn-card.delete[b-2iws2jtdaq] {
        grid-column: 3;
        grid-row: 1 / span 3;
        align-self: stretch;
    }
}

/* Najužšia karta: každé tlačidlo na vlastnom riadku, kôš po celej výške vedľa nich. */
@container (max-width: 260px) {
    .card-actions[b-2iws2jtdaq] {
        grid-template-columns: 1fr 36px;
        gap: 6px;
    }

    /* Na takejto šírke sa už ráta každý pixel, nech sa názvy zmestia celé –
       ikony preto zo štítkov zmiznú, kôš si tú svoju pochopiteľne necháva. */
    .card-actions .btn-card[b-2iws2jtdaq] {
        grid-column: 1;
        padding: 6px 8px;
        font-size: .88rem;
    }

    .card-actions .btn-card:not(.delete) .bi[b-2iws2jtdaq] {
        display: none;
    }

    .card-actions .action-month[b-2iws2jtdaq] {
        grid-column: 1;
        grid-row: 3;
    }

    .card-actions .action-plan[b-2iws2jtdaq] {
        grid-column: 1;
        grid-row: 4;
    }

    .card-actions .btn-card.delete[b-2iws2jtdaq] {
        grid-column: 2;
        grid-row: 1 / span 4;
        align-self: stretch;
    }
}

.btn-card:hover[b-2iws2jtdaq] {
    background: rgba(255,255,255,.1);
    color: var(--text-primary);
}

.btn-card.save[b-2iws2jtdaq] {
    background: rgba(46,160,67,.2);
    color: var(--success);
    border-color: rgba(46,160,67,.4);
}
.btn-card.save:hover[b-2iws2jtdaq] { background: var(--success); color: #fff; }

.btn-card.cancel[b-2iws2jtdaq] {
    color: var(--danger);
    border-color: rgba(248,81,73,.4);
    background: rgba(248,81,73,.1);
}
.btn-card.cancel:hover[b-2iws2jtdaq] { background: rgba(248,81,73,.25); }

.btn-card.edit:hover[b-2iws2jtdaq] {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.btn-card.delete:hover[b-2iws2jtdaq] {
    color: #f85149;
    border-color: rgba(248,81,73,.4);
    background: rgba(248,81,73,.12);
}

/* �� Edit mode �� */
.edit-field[b-2iws2jtdaq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.edit-field label[b-2iws2jtdaq] {
    font-size: .92rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    font-weight: 600;
}

.edit-field label.checkbox-field[b-2iws2jtdaq] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.edit-field label.checkbox-field input[type="checkbox"][b-2iws2jtdaq] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.edit-input[b-2iws2jtdaq] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: .97rem;
    width: 100%;
    box-sizing: border-box;
}

.edit-input:focus[b-2iws2jtdaq] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

.edit-row[b-2iws2jtdaq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.color-row[b-2iws2jtdaq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-row input[type="color"][b-2iws2jtdaq] {
    width: 36px;
    height: 36px;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
}

/* �� Icon picker �� */
.icon-picker[b-2iws2jtdaq] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 160px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-surface);
}

.icon-option[b-2iws2jtdaq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all .12s ease;
}

.icon-option:hover[b-2iws2jtdaq] {
    background: rgba(128,128,128,.1);
    color: var(--text-primary);
}

.icon-option.selected[b-2iws2jtdaq] {
    font-weight: 700;
}

/* �� Responsive �� */
@media (max-width: 700px) {
    .budget-cards[b-2iws2jtdaq] { grid-template-columns: 1fr; }
}

/* ── Modálne okná (úprava rozpočtu, história limitu) ── */
.modal-backdrop[b-2iws2jtdaq] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1000;
}

.modal-card[b-2iws2jtdaq] {
    display: flex;
    flex-direction: column;
    width: 480px;
    max-width: 100%;
    max-height: 90vh;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    overflow: hidden;
}

.modal-header[b-2iws2jtdaq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3[b-2iws2jtdaq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.modal-close[b-2iws2jtdaq] {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.modal-close:hover[b-2iws2jtdaq] {
    color: var(--text-primary);
}

.modal-body[b-2iws2jtdaq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    overflow-y: auto;
}

.modal-footer[b-2iws2jtdaq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--border-color);
}

.modal-spacer[b-2iws2jtdaq] {
    flex: 1;
}

/* V modálnom okne nie sú tlačidlá na farebnej karte – vlastný kôš vpravo netreba. */
.modal-footer .btn-card.delete[b-2iws2jtdaq] {
    margin-left: 0;
}

/* �� Amount history panel �� */
.history-empty[b-2iws2jtdaq] { font-size: .92rem; color: var(--text-muted); margin: 0; }
.history-table[b-2iws2jtdaq] { width: 100%; border-collapse: collapse; font-size: .92rem; }
.history-table th[b-2iws2jtdaq], .history-table td[b-2iws2jtdaq] { padding: 4px 8px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.06); }
.history-add-row[b-2iws2jtdaq] { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; flex-wrap: wrap; }
.btn-sm[b-2iws2jtdaq] { padding: 4px 10px !important; font-size: .92rem !important; }

/* Tlačidlo mesačného limitu dá farebne najavo, že mesiac má vlastnú výnimku. */
.btn-card.has-month-override[b-2iws2jtdaq] {
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Plán limitu po mesiacoch ── */
.plan-hint[b-2iws2jtdaq] { font-size: .92rem; color: var(--text-muted); margin: 0 0 0.75rem; }

.plan-grid[b-2iws2jtdaq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}

.plan-field[b-2iws2jtdaq] { display: flex; flex-direction: column; gap: 4px; }

.plan-field label[b-2iws2jtdaq] {
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.plan-preview-label[b-2iws2jtdaq] { font-size: .92rem; margin: 1rem 0 0.4rem; }

/* Dlhší plán sa roluje vo vlastnom rámčeku, aby okno nenarástlo cez celú obrazovku. */
.plan-preview[b-2iws2jtdaq] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 140px;
    overflow-y: auto;
}

.plan-month[b-2iws2jtdaq] {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .88rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
}

.plan-note[b-2iws2jtdaq] { font-size: .88rem; color: var(--text-muted); margin: 0.75rem 0 0; }
/* ══ Pohyb ═════════════════════════════════════════════════════════════════
   Rozpočty sú mriežka kariet, takže hlavný pohyb je nábeh mriežky a zdvihnutie
   karty pod kurzorom. Kartu tu netvorí len rámček — patrí k nej aj pruh minutého,
   ktorý sa musí meniť plynulo, inak by po zapísaní výdavku len preskočil. */
.budget-card[b-2iws2jtdaq] {
    transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
    animation: bm-rise var(--motion-base) var(--ease-out) backwards;
}

.budget-cards > *:nth-child(1)[b-2iws2jtdaq] { animation-delay: 0ms; }
.budget-cards > *:nth-child(2)[b-2iws2jtdaq] { animation-delay: var(--stagger-step); }
.budget-cards > *:nth-child(3)[b-2iws2jtdaq] { animation-delay: calc(var(--stagger-step) * 2); }
.budget-cards > *:nth-child(4)[b-2iws2jtdaq] { animation-delay: calc(var(--stagger-step) * 3); }
.budget-cards > *:nth-child(5)[b-2iws2jtdaq] { animation-delay: calc(var(--stagger-step) * 4); }
.budget-cards > *:nth-child(n+6)[b-2iws2jtdaq] { animation-delay: calc(var(--stagger-step) * 5); }

.budget-card:hover[b-2iws2jtdaq] {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.card-icon-wrap[b-2iws2jtdaq] {
    transition: transform var(--motion-base) var(--ease-spring);
}

.budget-card:hover .card-icon-wrap[b-2iws2jtdaq] {
    transform: scale(1.12) rotate(-4deg);
}

/* Pruh minutého. Trvanie je najdlhšie zo všetkých animácií na stránke zámerne —
   práve tento pohyb nesie odpoveď na otázku „koľko mi ešte ostáva". */
.card-fill-bg[b-2iws2jtdaq] {
    transition: width var(--motion-slow) var(--ease-out), background-color var(--motion-base) var(--ease-out);
}

.card-pct-badge[b-2iws2jtdaq],
.card-muted-badge[b-2iws2jtdaq],
.override-pill[b-2iws2jtdaq] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

/* ── Poradie a výber ikony ── */
.prio-btn[b-2iws2jtdaq],
.icon-option[b-2iws2jtdaq] {
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.icon-option:hover[b-2iws2jtdaq] {
    transform: scale(1.15);
}

.prio-btn:active[b-2iws2jtdaq],
.icon-option:active[b-2iws2jtdaq] {
    transform: scale(.9);
    transition-duration: var(--motion-press);
}

/* ── Hlavičky sekcií ── */
.section-icon[b-2iws2jtdaq] {
    transition: transform var(--motion-base) var(--ease-spring);
}

.section-header:hover .section-icon[b-2iws2jtdaq] {
    transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
    .budget-card[b-2iws2jtdaq] {
        animation: none;
    }

    .budget-card:hover[b-2iws2jtdaq],
    .budget-card:hover .card-icon-wrap[b-2iws2jtdaq],
    .icon-option:hover[b-2iws2jtdaq],
    .prio-btn:active[b-2iws2jtdaq],
    .icon-option:active[b-2iws2jtdaq],
    .section-header:hover .section-icon[b-2iws2jtdaq] {
        transform: none;
    }
}

/* ── Automatické vyvažovanie ── */
.autobalance-banner[b-2iws2jtdaq] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 16px;
    padding: .7rem 1rem;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: var(--radius-md, 12px);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--text);
    font-size: .92rem;
}

.autobalance-banner-paused[b-2iws2jtdaq] {
    border-color: color-mix(in srgb, var(--text-muted) 35%, transparent);
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    color: var(--text-muted);
}

.autobalance-pill[b-2iws2jtdaq] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.autobalance-pill-down[b-2iws2jtdaq] {
    background: color-mix(in srgb, var(--text-muted) 18%, transparent);
    color: var(--text-muted);
}

.autobalance-pill-up[b-2iws2jtdaq] {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
}

.autobalance-role[b-2iws2jtdaq] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .6rem;
}

.autobalance-role-label[b-2iws2jtdaq] {
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 600;
}

.autobalance-role-options[b-2iws2jtdaq] {
    display: flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.autobalance-role-options button[b-2iws2jtdaq] {
    padding: .15rem .5rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.autobalance-role-options button:hover[b-2iws2jtdaq] {
    color: var(--text);
}

.autobalance-role-options button.active[b-2iws2jtdaq] {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
}
/* /Components/Pages/BudgetStats.razor.rz.scp.css */
/* ===== Monthly budget statistics page ===== */
.stats-page[b-bruu5jr0uh] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 1.5rem 1rem 2.5rem;
}

/* ----- Header ----- */
.stats-header[b-bruu5jr0uh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stats-title[b-bruu5jr0uh] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stats-title .bi[b-bruu5jr0uh] {
    color: var(--accent);
    font-size: 1.35rem;
}

.stats-subtitle[b-bruu5jr0uh] {
    margin: .3rem 0 0;
    font-size: .97rem;
    color: var(--text-secondary);
}

.stats-controls[b-bruu5jr0uh] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
}

.month-nav[b-bruu5jr0uh] {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .3rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
}

.month-nav-btn[b-bruu5jr0uh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.month-nav-btn:hover:not(:disabled)[b-bruu5jr0uh] {
    background: var(--nav-hover-bg);
    color: var(--accent);
}

.month-nav-btn:disabled[b-bruu5jr0uh] {
    opacity: .35;
    cursor: default;
}

.month-nav-label[b-bruu5jr0uh] {
    min-width: 140px;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.month-today-btn[b-bruu5jr0uh] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.month-today-btn:hover[b-bruu5jr0uh] {
    border-color: var(--accent);
    color: var(--accent);
}

.range-toggle[b-bruu5jr0uh] {
    display: flex;
    gap: .2rem;
    padding: .2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
}

.range-toggle button[b-bruu5jr0uh] {
    padding: .35rem .75rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.range-toggle button:hover[b-bruu5jr0uh] {
    color: var(--text-primary);
}

.range-toggle button.active[b-bruu5jr0uh] {
    background: var(--accent-subtle);
    color: var(--accent);
}

/* ----- Loading / empty states ----- */
.stats-loading[b-bruu5jr0uh],
.stats-empty[b-bruu5jr0uh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 5rem 1rem;
    color: var(--text-muted);
}

.stats-loading .bi[b-bruu5jr0uh],
.stats-empty .bi[b-bruu5jr0uh] {
    font-size: 2rem;
}

.stats-loading p[b-bruu5jr0uh],
.stats-empty p[b-bruu5jr0uh] {
    margin: 0;
}

.stats-empty-link[b-bruu5jr0uh] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.spin[b-bruu5jr0uh] {
    animation: stats-spin-b-bruu5jr0uh 1.2s linear infinite;
}

@keyframes stats-spin-b-bruu5jr0uh {
    to { transform: rotate(360deg); }
}

/* ----- KPI row ----- */
.stats-kpi-row[b-bruu5jr0uh] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1200px) {
    .stats-kpi-row[b-bruu5jr0uh] { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}

.stats-kpi[b-bruu5jr0uh] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.kpi-head[b-bruu5jr0uh] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.kpi-icon[b-bruu5jr0uh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.kpi-spent   .kpi-icon[b-bruu5jr0uh] { background: var(--purple-subtle);  color: var(--purple); }
.kpi-limit   .kpi-icon[b-bruu5jr0uh] { background: var(--info-subtle);    color: var(--info); }
.kpi-over    .kpi-icon[b-bruu5jr0uh] { background: var(--danger-subtle);  color: var(--danger); }
.kpi-under   .kpi-icon[b-bruu5jr0uh] { background: var(--success-subtle); color: var(--success); }
.kpi-outside .kpi-icon[b-bruu5jr0uh] { background: var(--warning-subtle); color: var(--warning); }
.kpi-total   .kpi-icon[b-bruu5jr0uh] { background: var(--teal-subtle);    color: var(--teal); }

.kpi-label[b-bruu5jr0uh] {
    font-size: .92rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.2;
}

.kpi-value[b-bruu5jr0uh] {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.kpi-foot[b-bruu5jr0uh] {
    min-height: 20px;
    font-size: .88rem;
}

.kpi-foot-muted[b-bruu5jr0uh] {
    color: var(--text-muted);
}

.kpi-delta[b-bruu5jr0uh] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-weight: 700;
}

.delta-good[b-bruu5jr0uh] { color: var(--success); }
.delta-bad[b-bruu5jr0uh]  { color: var(--danger); }

.text-pos[b-bruu5jr0uh] { color: var(--success); }
.text-neg[b-bruu5jr0uh] { color: var(--danger); }

/* ----- Card shell ----- */
.stats-card[b-bruu5jr0uh] {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.stats-card-head[b-bruu5jr0uh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.1rem;
}

.stats-card-head h2[b-bruu5jr0uh] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

.stats-card-head h2 .bi[b-bruu5jr0uh] {
    color: var(--accent);
    font-size: 1rem;
}

.stats-card-hint[b-bruu5jr0uh] {
    font-size: .92rem;
    color: var(--text-muted);
}

/* ----- Month chart ----- */
.chart-legend[b-bruu5jr0uh] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.legend-item[b-bruu5jr0uh] {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .92rem;
    color: var(--text-secondary);
}

.legend-swatch[b-bruu5jr0uh] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.swatch-budget[b-bruu5jr0uh]  { background: var(--purple); }
.swatch-outside[b-bruu5jr0uh] { background: var(--text-muted); }
.swatch-limit[b-bruu5jr0uh]   { height: 0; border-top: 2px dashed var(--info); border-radius: 0; }

.month-chart[b-bruu5jr0uh] {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    padding-top: .5rem;
    overflow-x: auto;
}

.chart-col[b-bruu5jr0uh] {
    display: flex;
    flex: 1 1 0;
    min-width: 62px;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .4rem .25rem;
    border-radius: var(--radius-sm);
}

.chart-col-selected[b-bruu5jr0uh] {
    background: var(--accent-subtle);
}

/* Mesiac s najvyššími výdavkami obdobia. */
.chart-col-peak[b-bruu5jr0uh] {
    box-shadow: inset 0 0 0 1px var(--warning);
}

.chart-col-value[b-bruu5jr0uh] {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.chart-col-plot[b-bruu5jr0uh] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 190px;
    border-bottom: 1px solid var(--border-subtle);
}

.chart-stack[b-bruu5jr0uh] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 60%;
    max-width: 54px;
    height: 100%;
}

.chart-bar[b-bruu5jr0uh] {
    width: 100%;
    transition: height .4s ease;
}

.bar-budget[b-bruu5jr0uh] {
    background: var(--purple);
    border-radius: 0 0 3px 3px;
}

.bar-budget-over[b-bruu5jr0uh] {
    background: var(--danger);
    border-radius: 0 0 3px 3px;
}

.bar-outside[b-bruu5jr0uh] {
    background: var(--text-muted);
    border-radius: 3px 3px 0 0;
    opacity: .75;
}

.chart-limit-line[b-bruu5jr0uh] {
    position: absolute;
    left: 4px;
    right: 4px;
    border-top: 2px dashed var(--info);
    pointer-events: none;
}

.chart-col-label[b-bruu5jr0uh] {
    font-size: .92rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.chart-col-usage[b-bruu5jr0uh] {
    font-size: .88rem;
    font-weight: 700;
    padding: .05rem .4rem;
    border-radius: 20px;
}

/* ----- Usage colour bands (shared by chart, list and matrix) ----- */
.usage-ok[b-bruu5jr0uh]   { color: var(--success); background: var(--success-subtle); }
.usage-warn[b-bruu5jr0uh] { color: var(--warning); background: var(--warning-subtle); }
.usage-over[b-bruu5jr0uh] { color: var(--danger);  background: var(--danger-subtle); }

/* ----- Budget trend line chart ----- */
.trend-view-toggle[b-bruu5jr0uh] {
    display: flex;
    gap: .2rem;
    padding: .2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
}

.trend-view-toggle button[b-bruu5jr0uh] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.trend-view-toggle button:hover[b-bruu5jr0uh] {
    color: var(--text-primary);
}

.trend-view-toggle button.active[b-bruu5jr0uh] {
    background: var(--accent-subtle);
    color: var(--accent);
}

/* ----- Per-budget small charts -----
   Každý rozpočet má vlastnú kartu s vlastnou mierkou, takže sa čiary neprekrývajú
   a nad každým stĺpcom sa zmestí konkrétne číslo. Šírku karty určuje dĺžka obdobia
   cez premennú --chart-card-min nastavenú v markupe. */
.budget-chart-hint[b-bruu5jr0uh] {
    margin: -.4rem 0 1rem;
}

.budget-chart-grid[b-bruu5jr0uh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--chart-card-min, 420px)), 1fr));
    gap: 1rem;
}

.budget-chart-card[b-bruu5jr0uh] {
    padding: .85rem .9rem 1rem;
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--budget-color, var(--accent));
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
}

.budget-chart-head[b-bruu5jr0uh] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .8rem;
}

.budget-chart-icon[b-bruu5jr0uh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 1.1rem;
    color: var(--budget-color, var(--accent));
    background: color-mix(in srgb, var(--budget-color, var(--accent)) 18%, transparent);
    flex-shrink: 0;
}

.budget-chart-titles[b-bruu5jr0uh] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.budget-chart-name[b-bruu5jr0uh] {
    font-size: .97rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.budget-chart-sub[b-bruu5jr0uh] {
    font-size: .85rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.budget-chart-peak[b-bruu5jr0uh] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--warning);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.budget-chart-badge[b-bruu5jr0uh] {
    padding: .05rem .5rem;
    border-radius: 20px;
    background: var(--danger-subtle);
    color: var(--danger);
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.budget-chart-plot[b-bruu5jr0uh] {
    display: flex;
    align-items: flex-end;
    gap: .3rem;
    overflow-x: auto;
}

.mini-col[b-bruu5jr0uh] {
    display: flex;
    flex: 1 1 0;
    min-width: 52px;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .25rem .1rem;
    border-radius: var(--radius-sm);
}

.mini-col-selected[b-bruu5jr0uh] {
    background: var(--accent-subtle);
}

/* Mesiac, v ktorom sa v tomto rozpočte minulo najviac. */
.mini-col-peak[b-bruu5jr0uh] {
    box-shadow: inset 0 0 0 1px var(--warning);
}

.mini-col-value[b-bruu5jr0uh] {
    font-size: .76rem;
    font-weight: 700;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mini-col-plot[b-bruu5jr0uh] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 110px;
    border-bottom: 1px solid var(--border-subtle);
}

.mini-col-bar[b-bruu5jr0uh] {
    width: 66%;
    max-width: 46px;
    min-height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--budget-color, var(--accent));
    transition: height .35s ease;
}

.mini-col-bar-over[b-bruu5jr0uh] {
    background: var(--danger);
}

.mini-col-limit[b-bruu5jr0uh] {
    position: absolute;
    left: 2px;
    right: 2px;
    border-top: 2px dashed var(--info);
    pointer-events: none;
}

.mini-col-label[b-bruu5jr0uh] {
    font-size: .76rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.mini-col-pct[b-bruu5jr0uh] {
    font-size: .74rem;
    font-weight: 700;
    padding: .02rem .4rem;
    border-radius: 20px;
    white-space: nowrap;
}

.mini-col-pct-none[b-bruu5jr0uh] {
    color: var(--text-muted);
}

/* ----- Comparison matrix ----- */
.matrix-scroll[b-bruu5jr0uh] {
    overflow-x: auto;
}

.matrix-table[b-bruu5jr0uh] {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.matrix-table th[b-bruu5jr0uh],
.matrix-table td[b-bruu5jr0uh] {
    padding: .5rem .6rem;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-subtle);
}

.matrix-table th[b-bruu5jr0uh] {
    font-size: .88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.matrix-budget-col[b-bruu5jr0uh] {
    text-align: left !important;
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg-card);
}

.matrix-budget-cell[b-bruu5jr0uh] {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.matrix-budget-name[b-bruu5jr0uh] {
    font-weight: 600;
    color: var(--text-primary);
}

.matrix-over-badge[b-bruu5jr0uh] {
    padding: .05rem .35rem;
    border-radius: 20px;
    font-size: .88rem;
    font-weight: 700;
    background: var(--danger-subtle);
    color: var(--danger);
}

.matrix-cell[b-bruu5jr0uh] {
    font-variant-numeric: tabular-nums;
}

.matrix-cell-value[b-bruu5jr0uh] {
    display: block;
    font-weight: 600;
}

.matrix-cell-pct[b-bruu5jr0uh] {
    display: block;
    font-size: .88rem;
    opacity: .8;
}

.matrix-cell-empty[b-bruu5jr0uh] {
    color: var(--text-muted);
}

.matrix-cell-outside[b-bruu5jr0uh],
.matrix-cell-total[b-bruu5jr0uh] {
    color: var(--text-secondary);
    font-weight: 600;
}

.matrix-total-col[b-bruu5jr0uh] {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.matrix-cell-peak[b-bruu5jr0uh] {
    box-shadow: inset 0 0 0 1px var(--warning);
}

.matrix-peak-col[b-bruu5jr0uh] {
    white-space: nowrap;
}

.matrix-peak-month[b-bruu5jr0uh] {
    display: block;
    font-weight: 700;
    color: var(--text-primary);
}

.matrix-peak-amount[b-bruu5jr0uh] {
    display: block;
    font-size: .85rem;
    color: var(--text-muted);
}

.matrix-total-strong[b-bruu5jr0uh] {
    font-weight: 700;
    color: var(--text-primary);
}

.matrix-table tfoot td[b-bruu5jr0uh] {
    border-top: 2px solid var(--border-color);
    border-bottom: none;
}

.matrix-total-row td[b-bruu5jr0uh] {
    font-weight: 700;
    color: var(--text-primary);
}

/* ----- Month-over-month changes ----- */
.change-grid[b-bruu5jr0uh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .75rem;
}

.change-tile[b-bruu5jr0uh] {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .75rem .9rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
}

.change-up[b-bruu5jr0uh]   { border-left: 3px solid var(--danger); }
.change-down[b-bruu5jr0uh] { border-left: 3px solid var(--success); }

.change-emoji[b-bruu5jr0uh] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.change-body[b-bruu5jr0uh] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.change-name[b-bruu5jr0uh] {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.change-amount[b-bruu5jr0uh] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .97rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.change-up   .change-amount[b-bruu5jr0uh] { color: var(--danger); }
.change-down .change-amount[b-bruu5jr0uh] { color: var(--success); }

.change-pct[b-bruu5jr0uh] {
    font-size: .88rem;
    font-weight: 600;
    opacity: .8;
}

.change-detail[b-bruu5jr0uh] {
    font-size: .88rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}


/* ══ Pohyb ═════════════════════════════════════════════════════════════════
   Štatistiky sú stránka grafov, takže hlavný pohyb je rast stĺpcov. Ten sa spustí
   po každom prepočítaní — teda pri zmene mesiaca aj rozsahu — a je to zámer:
   nábeh oddelí novú sadu čísel od predchádzajúcej.

   Matica mesiacov naopak nábeh nemá. Má desiatky buniek a vlna cez ne by z tabuľky
   spravila blikajúcu plochu; ostáva pri nej len zvýraznenie riadku pod kurzorom. */
.stats-card[b-bruu5jr0uh] {
    animation: bm-rise var(--motion-base) var(--ease-out) backwards;
}

.stats-kpi-row > *:nth-child(n+2)[b-bruu5jr0uh] {
    animation-delay: var(--stagger-step);
}

/* ── Stĺpce grafu ──
   Bez rastu stĺpcov: graf sedí v karte štatistiky, ktorá sa už objavuje sama.
   Zostáva zosvetlenie stĺpca pod kurzorom. */
.chart-bar[b-bruu5jr0uh],
.mini-col-bar[b-bruu5jr0uh],
.bar-budget[b-bruu5jr0uh] {
    transition: filter var(--motion-fast) var(--ease-out);
}

.chart-col[b-bruu5jr0uh],
.mini-col[b-bruu5jr0uh] {
    transition: background-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.chart-col:hover .chart-bar[b-bruu5jr0uh],
.mini-col:hover .mini-col-bar[b-bruu5jr0uh] {
    filter: brightness(1.2);
}

/* ── Karty rozpočtov ── */
.budget-chart-card[b-bruu5jr0uh] {
    transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
}


.budget-chart-card:hover[b-bruu5jr0uh] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.budget-chart-icon[b-bruu5jr0uh] {
    transition: transform var(--motion-base) var(--ease-spring);
}

.budget-chart-card:hover .budget-chart-icon[b-bruu5jr0uh] {
    transform: scale(1.12);
}

/* ── Dlaždice zmien oproti minulému mesiacu ── */
.change-tile[b-bruu5jr0uh] {
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}


.change-tile:hover[b-bruu5jr0uh] {
    transform: translateY(-2px);
}

.change-emoji[b-bruu5jr0uh] {
    transition: transform var(--motion-base) var(--ease-spring);
}

.change-tile:hover .change-emoji[b-bruu5jr0uh] {
    transform: scale(1.15);
}

/* ── Matica mesiacov ── */
.matrix-cell[b-bruu5jr0uh],
.matrix-budget-cell[b-bruu5jr0uh] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

/* ── Ovládanie ── */
.month-nav-btn[b-bruu5jr0uh],
.month-today-btn[b-bruu5jr0uh],
.range-toggle[b-bruu5jr0uh],
.trend-view-toggle[b-bruu5jr0uh] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.month-nav-btn:active[b-bruu5jr0uh],
.month-today-btn:active[b-bruu5jr0uh] {
    transform: scale(.94);
    transition-duration: var(--motion-press);
}

@media (prefers-reduced-motion: reduce) {
    .stats-card[b-bruu5jr0uh] {
        animation: none;
    }

    .budget-chart-card:hover[b-bruu5jr0uh],
    .budget-chart-card:hover .budget-chart-icon[b-bruu5jr0uh],
    .change-tile:hover[b-bruu5jr0uh],
    .change-tile:hover .change-emoji[b-bruu5jr0uh],
    .month-nav-btn:active[b-bruu5jr0uh],
    .month-today-btn:active[b-bruu5jr0uh] {
        transform: none;
    }
}

/* ── Rozpad riadka na podrozpočty ──
   Riadok dieťaťa je odsadený a stlmený, aby bolo na prvý pohľad jasné, že jeho čísla
   sú už započítané v riadku nad ním. */
.matrix-expand[b-bruu5jr0uh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.matrix-expand:hover[b-bruu5jr0uh] {
    background: rgba(128, 128, 128, .18);
    color: var(--text);
}

.matrix-expand-placeholder[b-bruu5jr0uh] {
    display: inline-block;
    width: 18px;
}

.matrix-row-child .matrix-budget-cell[b-bruu5jr0uh] {
    padding-left: 18px;
}

.matrix-row-child .matrix-budget-name[b-bruu5jr0uh] {
    font-size: .9em;
    color: var(--text-muted);
}

.matrix-row-child .matrix-cell[b-bruu5jr0uh],
.matrix-row-child .matrix-total-col[b-bruu5jr0uh] {
    opacity: .82;
}
/* /Components/Pages/BudgetYear.razor.rz.scp.css */
/* ===== Yearly budget overview page ===== */
.year-page[b-wn5cqqkdyo] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 1.5rem 1rem 2.5rem;
}

/* ----- Header ----- */
.year-header[b-wn5cqqkdyo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.year-title[b-wn5cqqkdyo] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.year-title .bi[b-wn5cqqkdyo] {
    color: var(--accent);
    font-size: 1.35rem;
}

.year-subtitle[b-wn5cqqkdyo] {
    margin: .3rem 0 0;
    font-size: .97rem;
    color: var(--text-secondary);
}

.year-controls[b-wn5cqqkdyo] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
}

.year-nav[b-wn5cqqkdyo] {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .3rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
}

.year-nav-btn[b-wn5cqqkdyo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.year-nav-btn:hover:not(:disabled)[b-wn5cqqkdyo] {
    background: var(--nav-hover-bg);
    color: var(--accent);
}

.year-nav-btn:disabled[b-wn5cqqkdyo] {
    opacity: .35;
    cursor: default;
}

.year-nav-label[b-wn5cqqkdyo] {
    min-width: 80px;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.year-today-btn[b-wn5cqqkdyo] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.year-today-btn:hover[b-wn5cqqkdyo] {
    border-color: var(--accent);
    color: var(--accent);
}

/* ----- Loading / empty ----- */
.year-loading[b-wn5cqqkdyo],
.year-empty[b-wn5cqqkdyo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.year-loading .bi[b-wn5cqqkdyo],
.year-empty .bi[b-wn5cqqkdyo] {
    font-size: 2rem;
}

.year-loading p[b-wn5cqqkdyo],
.year-empty p[b-wn5cqqkdyo] {
    margin: 0;
}

.year-empty-link[b-wn5cqqkdyo] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.spin[b-wn5cqqkdyo] {
    animation: year-spin-b-wn5cqqkdyo 1.2s linear infinite;
}

@keyframes year-spin-b-wn5cqqkdyo {
    to { transform: rotate(360deg); }
}

/* ----- KPI row ----- */
.year-kpi-row[b-wn5cqqkdyo] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1200px) {
    .year-kpi-row[b-wn5cqqkdyo] { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}

.year-kpi[b-wn5cqqkdyo] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.kpi-head[b-wn5cqqkdyo] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.kpi-icon[b-wn5cqqkdyo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.kpi-total   .kpi-icon[b-wn5cqqkdyo] { background: var(--teal-subtle);    color: var(--teal); }
.kpi-spent   .kpi-icon[b-wn5cqqkdyo] { background: var(--purple-subtle);  color: var(--purple); }
.kpi-limit   .kpi-icon[b-wn5cqqkdyo] { background: var(--info-subtle);    color: var(--info); }
.kpi-outside .kpi-icon[b-wn5cqqkdyo] { background: var(--warning-subtle); color: var(--warning); }
.kpi-over    .kpi-icon[b-wn5cqqkdyo] { background: var(--danger-subtle);  color: var(--danger); }
.kpi-ok      .kpi-icon[b-wn5cqqkdyo] { background: var(--success-subtle); color: var(--success); }

.kpi-label[b-wn5cqqkdyo] {
    font-size: .92rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.2;
}

.kpi-value[b-wn5cqqkdyo] {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.kpi-foot[b-wn5cqqkdyo] {
    min-height: 20px;
    font-size: .88rem;
    color: var(--text-muted);
}

.kpi-usage[b-wn5cqqkdyo] {
    padding: .1rem .45rem;
    border-radius: 20px;
    font-weight: 700;
}

.text-pos[b-wn5cqqkdyo] { color: var(--success); }
.text-neg[b-wn5cqqkdyo] { color: var(--danger); }

/* ----- Usage colour bands ----- */
.usage-ok[b-wn5cqqkdyo]   { color: var(--success); background: var(--success-subtle); }
.usage-warn[b-wn5cqqkdyo] { color: var(--warning); background: var(--warning-subtle); }
.usage-over[b-wn5cqqkdyo] { color: var(--danger);  background: var(--danger-subtle); }

/* ----- Card shell ----- */
.year-card[b-wn5cqqkdyo] {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.year-card-head[b-wn5cqqkdyo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.1rem;
}

.year-card-head h2[b-wn5cqqkdyo] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

.year-card-head h2 .bi[b-wn5cqqkdyo] {
    color: var(--accent);
    font-size: 1rem;
}

.year-card-link[b-wn5cqqkdyo] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .95rem;
    color: var(--accent);
    text-decoration: none;
}

.year-card-link:hover[b-wn5cqqkdyo] { text-decoration: underline; }

.year-toggle-btn[b-wn5cqqkdyo] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
}

.year-toggle-btn:hover[b-wn5cqqkdyo] {
    border-color: var(--accent);
    color: var(--accent);
}

.year-hint[b-wn5cqqkdyo] {
    margin: 0;
    font-size: .92rem;
    color: var(--text-muted);
}

/* ----- Share list (na čo išlo najviac) ----- */
.share-list[b-wn5cqqkdyo] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.share-row[b-wn5cqqkdyo] {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem .9rem;
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--budget-color, var(--accent));
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    position: relative;
    overflow: hidden;
}

/* Pozadie riadka sa napĺňa podielom na celoročných výdavkoch – rovnako ako karty rozpočtov. */
.share-fill-bg[b-wn5cqqkdyo] {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--share-pct, 0%);
    background: color-mix(in srgb, var(--budget-color, var(--accent)) 32%, transparent);
    transition: width .6s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
    z-index: 0;
}

.share-icon[b-wn5cqqkdyo] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 1.15rem;
    background: color-mix(in srgb, var(--budget-color, var(--accent)) 18%, transparent);
    flex-shrink: 0;
}

.share-body[b-wn5cqqkdyo] {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.share-name-row[b-wn5cqqkdyo] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
}

.share-name[b-wn5cqqkdyo] {
    font-size: .97rem;
    font-weight: 600;
    color: var(--text-primary);
}

.share-chip[b-wn5cqqkdyo] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .05rem .45rem;
    border-radius: 20px;
    font-size: .88rem;
    font-weight: 700;
    white-space: nowrap;
}

.chip-over[b-wn5cqqkdyo]    { background: var(--danger-subtle); color: var(--danger); }
.chip-nolimit[b-wn5cqqkdyo] { background: var(--border-color);  color: var(--text-muted); }

.share-meta-row[b-wn5cqqkdyo] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: .92rem;
    color: var(--text-muted);
}

.share-total[b-wn5cqqkdyo] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .1rem;
    flex-shrink: 0;
}

.share-total-value[b-wn5cqqkdyo] {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.share-total-share[b-wn5cqqkdyo] {
    font-size: .88rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ----- Monthly breakdown table ----- */
.year-table-scroll[b-wn5cqqkdyo] {
    overflow-x: auto;
}

.year-table[b-wn5cqqkdyo] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
    font-size: .92rem;
}

.year-table th[b-wn5cqqkdyo] {
    padding: .35rem .5rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: right;
    white-space: nowrap;
}

.year-table .col-budget[b-wn5cqqkdyo] {
    text-align: left;
    min-width: 170px;
    color: var(--text-primary);
    font-weight: 600;
}

.year-table td[b-wn5cqqkdyo] {
    padding: .35rem .5rem;
    border-radius: var(--radius-sm);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.table-budget-cell[b-wn5cqqkdyo] {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

.table-budget-name[b-wn5cqqkdyo] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.year-table .cell-empty[b-wn5cqqkdyo]   { color: var(--text-muted); }
.year-table .cell-over[b-wn5cqqkdyo]    { background: var(--danger-subtle); color: var(--danger); font-weight: 700; }
.year-table .cell-outside[b-wn5cqqkdyo] { background: var(--warning-subtle); color: var(--warning); }
.year-table .cell-total[b-wn5cqqkdyo]   { background: var(--teal-subtle); color: var(--teal); font-weight: 700; }

/* Najsilnejší mesiac rozpočtu – orámovanie namiesto ďalšej farby, aby sa nebilo s pásmami. */
.year-table .cell-peak[b-wn5cqqkdyo] {
    border: 1px solid var(--accent);
}

.year-table .col-total-strong[b-wn5cqqkdyo] {
    font-weight: 800;
    color: var(--text-primary);
}

.year-table .row-total td[b-wn5cqqkdyo] {
    border-top: 1px solid var(--border-color);
}


/* ══ Pohyb ═════════════════════════════════════════════════════════════════
   Ročný prehľad je jedna veľká tabuľka a nad ňou karty s podielmi. Tabuľka pohyb
   nedostáva — pri dvanástich stĺpcoch a desiatkach riadkov by nábeh znamenal, že
   sa čísla ustaľujú ešte dlho po zobrazení. Pohyb má len to, čo je nad ňou. */
.year-card[b-wn5cqqkdyo] {
    animation: bm-rise var(--motion-base) var(--ease-out) backwards;
}

.year-kpi-row > *:nth-child(n+2)[b-wn5cqqkdyo] {
    animation-delay: var(--stagger-step);
}

/* ── Riadky s podielmi ── */
.share-row[b-wn5cqqkdyo] {
    transition: background-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}


.share-row:hover[b-wn5cqqkdyo] {
    transform: translateX(3px);
}

.share-icon[b-wn5cqqkdyo] {
    transition: transform var(--motion-base) var(--ease-spring);
}

.share-row:hover .share-icon[b-wn5cqqkdyo] {
    transform: scale(1.12);
}

.share-fill-bg[b-wn5cqqkdyo] {
    transition: width var(--motion-slow) var(--ease-out), background-color var(--motion-base) var(--ease-out);
}

/* ── Ovládanie ── */
.year-nav-btn[b-wn5cqqkdyo],
.year-today-btn[b-wn5cqqkdyo],
.year-toggle-btn[b-wn5cqqkdyo] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.year-nav-btn:active[b-wn5cqqkdyo],
.year-today-btn:active[b-wn5cqqkdyo],
.year-toggle-btn:active[b-wn5cqqkdyo] {
    transform: scale(.94);
    transition-duration: var(--motion-press);
}

.year-card-link[b-wn5cqqkdyo] {
    transition: color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.year-card-link:hover[b-wn5cqqkdyo] {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .year-card[b-wn5cqqkdyo] {
        animation: none;
    }

    .share-row:hover[b-wn5cqqkdyo],
    .share-row:hover .share-icon[b-wn5cqqkdyo],
    .year-nav-btn:active[b-wn5cqqkdyo],
    .year-today-btn:active[b-wn5cqqkdyo],
    .year-toggle-btn:active[b-wn5cqqkdyo],
    .year-card-link:hover[b-wn5cqqkdyo] {
        transform: none;
    }
}
/* /Components/Pages/Calendar.razor.rz.scp.css */
.calendar-container[b-ctdfkqvmtx] {
    color: var(--text-primary);
    /* base min size for columns; can be overridden by media queries */
    --cell-min: 120px;
}

.calendar-scroll[b-ctdfkqvmtx] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.calendar-header-row[b-ctdfkqvmtx] {
    display: grid;
    grid-template-columns: repeat(7, minmax(var(--cell-min), 1fr));
    gap: 10px;
    margin: 0 10px 10px;
    text-align: center;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    width: max-content; /* allow horizontal overflow */
}

.calendar-header-cell[b-ctdfkqvmtx] { padding: 8px 0; border-bottom: 1px solid var(--border-color); }

.calendar-grid[b-ctdfkqvmtx] {
    display: grid;
    grid-template-columns: repeat(7, minmax(var(--cell-min), 1fr));
    gap: 10px;
    padding: 0 10px 20px;
    width: max-content; /* allow horizontal overflow */
}

.day-cell[b-ctdfkqvmtx] { min-height: 180px; background-color: var(--bg-card); border-radius: 10px; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.day-cell:hover[b-ctdfkqvmtx] { border-color: var(--accent); box-shadow: var(--shadow-md, var(--shadow-sm)); }
.day-cell.weekend[b-ctdfkqvmtx] { background-color: var(--bg-surface) !important; }
.day-cell.today[b-ctdfkqvmtx] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 2px 10px rgba(37,99,235,.3); }
.day-cell.empty[b-ctdfkqvmtx] { background: transparent; border: none; box-shadow: none; cursor: default; }
.day-cell.empty:hover[b-ctdfkqvmtx] { border: none; box-shadow: none; }

.day-header[b-ctdfkqvmtx] { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 6px; padding: 8px 10px; background: rgba(128,128,128,0.04); border-bottom: 1px solid var(--border-color); }
.day-number[b-ctdfkqvmtx] { font-weight: 700; font-size: 1.02rem; color: var(--text-primary); }

/* Denny suhrn – prijem a vydaj su oddelene, aby sa neposcitavali do jedneho cisla */
.day-chips[b-ctdfkqvmtx] { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; margin-left: auto; }
.day-chip[b-ctdfkqvmtx] { font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.5; padding: 0 6px; border-radius: 999px; white-space: nowrap; }
.day-chip.chip-income[b-ctdfkqvmtx] { color: var(--success); background: var(--success-subtle); }
.day-chip.chip-expense[b-ctdfkqvmtx] { color: var(--danger); background: var(--danger-subtle); }

.day-body[b-ctdfkqvmtx] { padding: 6px; overflow-y: auto; max-height: 300px; flex: 1; display: flex; flex-direction: column; gap: 3px; }

/* Prázdny deň – zástupný obsah, celá plocha ostáva klikateľná na pridanie transakcie */
.day-empty[b-ctdfkqvmtx] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-muted); opacity: .55; padding: 10px 0; }
.day-empty .bi[b-ctdfkqvmtx] { font-size: 1.3rem; }
.day-empty-text[b-ctdfkqvmtx] { font-size: .82rem; }

/* Riadok transakcie – farebný pásik = rozpočet, emoji = kategória */
.transaction-row[b-ctdfkqvmtx] { display: grid; grid-template-columns: 3px auto auto minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 3px 6px 3px 0; border-radius: 4px; cursor: pointer; color: var(--text-primary); transition: background .15s; }
.transaction-row:hover[b-ctdfkqvmtx] { background: rgba(128,128,128,0.08); }
.row-bar[b-ctdfkqvmtx] { align-self: stretch; min-height: 18px; border-radius: 2px; }
.row-icon[b-ctdfkqvmtx] { font-size: .9rem; line-height: 1; }
.row-time[b-ctdfkqvmtx] { color: var(--text-secondary); font-variant-numeric: tabular-nums; font-size: .82rem; }
.row-name[b-ctdfkqvmtx] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-size: .88rem; }
.row-amount[b-ctdfkqvmtx] { font-weight: 600; font-variant-numeric: tabular-nums; font-size: .85rem; text-align: right; white-space: nowrap; }
.row-amount.amount-positive[b-ctdfkqvmtx] { color: var(--success); }
.row-amount.amount-negative[b-ctdfkqvmtx] { color: var(--danger); }

/* Virtuálne (opakované) transakcie sú tlmenejšie */
.transaction-row.virtual[b-ctdfkqvmtx] { opacity: .75; }
.transaction-row.virtual .row-bar[b-ctdfkqvmtx] { background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.5) 0 2px, transparent 2px 5px); }

/* Drag and drop */
.transaction-row[draggable="true"][b-ctdfkqvmtx] { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.transaction-row[draggable="true"]:active[b-ctdfkqvmtx] { cursor: grabbing; }
.transaction-row.dragging[b-ctdfkqvmtx] { opacity: .4; outline: 1px dashed var(--accent); }
.day-cell.drag-over[b-ctdfkqvmtx] { outline: 2px dashed var(--accent); outline-offset: -2px; background-color: var(--accent-subtle) !important; }
.virtual-badge[b-ctdfkqvmtx] { font-size: .72rem; font-weight: 700; text-transform: uppercase; padding: 0 4px; margin-left: 4px; border-radius: 3px; background: var(--teal-subtle); color: var(--teal); vertical-align: middle; letter-spacing: .04em; }

.budget-tag[b-ctdfkqvmtx] { font-size: .82rem; font-weight: 600; padding: 1px 5px; margin-left: 4px; border-radius: 3px; vertical-align: middle; }

/* ── Modal ── */
.modal-backdrop[b-ctdfkqvmtx] { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-card[b-ctdfkqvmtx] { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; width: 480px; max-width: 95vw; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: modalIn-b-ctdfkqvmtx .2s ease; }
@keyframes modalIn-b-ctdfkqvmtx { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.modal-header[b-ctdfkqvmtx] { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
.modal-header h3[b-ctdfkqvmtx] { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.modal-close[b-ctdfkqvmtx] { background: none; border: none; color: var(--text-secondary); font-size: 1.4rem; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background .15s; }
.modal-close:hover[b-ctdfkqvmtx] { background: rgba(128,128,128,.15); color: var(--text-primary); }

.modal-body[b-ctdfkqvmtx] { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.form-group[b-ctdfkqvmtx] { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.form-group label[b-ctdfkqvmtx] { font-size: .88rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.form-group input[b-ctdfkqvmtx], .form-group select[b-ctdfkqvmtx] { background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 6px; padding: 8px 12px; font-size: .97rem; transition: border-color .15s; }
.form-group input:focus[b-ctdfkqvmtx], .form-group select:focus[b-ctdfkqvmtx] { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-subtle); }
.form-row[b-ctdfkqvmtx] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.modal-footer[b-ctdfkqvmtx] { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border-color); }
.modal-spacer[b-ctdfkqvmtx] { flex: 1; }
.modal-footer .btn[b-ctdfkqvmtx] { padding: 8px 16px; border-radius: 6px; font-size: .95rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, filter .15s; }
.modal-footer .btn-primary[b-ctdfkqvmtx] { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.modal-footer .btn-primary:hover[b-ctdfkqvmtx] { filter: brightness(1.15); }
.modal-footer .btn-outline-secondary[b-ctdfkqvmtx] { background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); }
.modal-footer .btn-outline-secondary:hover[b-ctdfkqvmtx] { background: rgba(128,128,128,.1); }
.modal-footer .btn-outline-danger[b-ctdfkqvmtx] { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
.modal-footer .btn-outline-danger:hover[b-ctdfkqvmtx] { background: var(--danger-subtle); }
.modal-card.confirm-card[b-ctdfkqvmtx] { width: 420px; max-width: 92vw; }

/* Desktop: restore full-width equal columns */
@media (min-width: 992px) {
    .calendar-header-row[b-ctdfkqvmtx], .calendar-grid[b-ctdfkqvmtx] { width: 100%; grid-template-columns: repeat(7, 1fr); }
    .calendar-scroll[b-ctdfkqvmtx] { overflow-x: visible; }
}

/* Small devices: bigger min cell width and tighter paddings/fonts */
@media (max-width: 576px) {
    .calendar-container[b-ctdfkqvmtx] { --cell-min: 220px; }
    .day-cell[b-ctdfkqvmtx] { min-height: 160px; }
    .day-header[b-ctdfkqvmtx] { padding: 6px; gap: 4px; }
    .day-chip[b-ctdfkqvmtx] { font-size: .88rem; }
    .transaction-row[b-ctdfkqvmtx] { gap: 6px; padding: 4px 6px 4px 0; }
    .row-name[b-ctdfkqvmtx] { font-size: .95rem; }
    .row-amount[b-ctdfkqvmtx] { font-size: .95rem; }
    .row-time[b-ctdfkqvmtx] { font-size: .9rem; }
    .form-row[b-ctdfkqvmtx] { grid-template-columns: 1fr; }
    .date-switcher[b-ctdfkqvmtx] { flex-wrap: wrap; justify-content: center; }
}

/* ── Date switcher ── */
.date-switcher[b-ctdfkqvmtx] {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
}

.switcher-btn[b-ctdfkqvmtx] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.15rem;
    font-weight: 700;
    padding: 6px 14px;
    cursor: pointer;
    transition: background .15s, color .15s;
    line-height: 1;
}

.switcher-btn:hover[b-ctdfkqvmtx] {
    background: var(--accent-subtle);
    color: var(--accent);
}

.switcher-btn.year-btn[b-ctdfkqvmtx] {
    font-size: .95rem;
    padding: 6px 10px;
    color: var(--text-muted);
}

.switcher-label[b-ctdfkqvmtx] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    padding: 6px 10px;
    min-width: 140px;
    text-align: center;
    user-select: none;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.switcher-label.year-label[b-ctdfkqvmtx] {
    min-width: 60px;
    font-size: .95rem;
    color: var(--text-secondary);
}

/* ══ Pohyb ═════════════════════════════════════════════════════════════════
   Kalendár má 28 až 42 buniek naraz. Postupný nábeh po jednotlivých dňoch je tu
   preto zámerne vynechaný — vlna cez celú mriežku pri každom prelistovaní mesiaca
   pôsobí nepokojne. Nabehne celá mriežka naraz a pohyb ostane na tom, čoho sa dá
   dotknúť: bunka pod kurzorom sa zdvihne. */
.calendar-grid[b-ctdfkqvmtx] {
    animation: bm-rise var(--motion-base) var(--ease-out) backwards;
}

.day-cell[b-ctdfkqvmtx] {
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}

.day-cell:hover[b-ctdfkqvmtx] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    z-index: 1;
}

.day-number[b-ctdfkqvmtx] {
    transition: color var(--motion-fast) var(--ease-out), transform var(--motion-base) var(--ease-spring);
}

.day-cell:hover .day-number[b-ctdfkqvmtx] {
    transform: scale(1.12);
}

/* Štítky s príjmom a výdavkom v dni. Pri dotyku sa zosvetlia — v malej bunke je
   zmena jasu čitateľnejšia než posun. */
.day-chip[b-ctdfkqvmtx] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), filter var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.day-chip:hover[b-ctdfkqvmtx] {
    filter: brightness(1.15);
    transform: translateY(-1px);
}

/* ── Zoznam transakcií dňa ──
   Tento zoznam je krátky a otvára sa na vyžiadanie, takže postupný nábeh
   dáva zmysel — ukáže, že ide o obsah patriaci k práve otvorenému dňu. */
.transaction-row[b-ctdfkqvmtx] {
    transition: background-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}


.transaction-row:hover[b-ctdfkqvmtx] {
    transform: translateX(3px);
}

.row-icon[b-ctdfkqvmtx] {
    transition: transform var(--motion-base) var(--ease-spring);
}

.transaction-row:hover .row-icon[b-ctdfkqvmtx] {
    transform: scale(1.12);
}

.row-bar[b-ctdfkqvmtx] {
    transition: width var(--motion-slow) var(--ease-out);
}

/* ── Prepínanie mesiaca ── */
.switcher-btn[b-ctdfkqvmtx] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.switcher-btn:active[b-ctdfkqvmtx] {
    transform: scale(.94);
    transition-duration: var(--motion-press);
}

@media (prefers-reduced-motion: reduce) {
    .calendar-grid[b-ctdfkqvmtx] {
        animation: none;
    }

    .day-cell:hover[b-ctdfkqvmtx],
    .day-cell:hover .day-number[b-ctdfkqvmtx],
    .day-chip:hover[b-ctdfkqvmtx],
    .transaction-row:hover[b-ctdfkqvmtx],
    .transaction-row:hover .row-icon[b-ctdfkqvmtx],
    .switcher-btn:active[b-ctdfkqvmtx] {
        transform: none;
    }
}

/* Formulárové modálne okno je širšie a polia sú v dvoch stĺpcoch,
   aby sa využilo miesto do šírky a nemuselo sa scrollovať hore-dole. */
.modal-card.wide-card[b-ctdfkqvmtx] {
    width: min(760px, 95vw);
}

@media (min-width: 720px) {
    .wide-card .modal-body[b-ctdfkqvmtx] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 18px;
        align-items: start;
    }

    /* Riadok s dvoma poľami sa rozpustí do spoločnej mriežky. */
    .wide-card .modal-body .form-row[b-ctdfkqvmtx] {
        display: contents;
    }
}

/* ── Kontextové menu nad transakciou ──
   Menu sa zobrazuje na mieste kliknutia. Aby nevytŕčalo mimo okna pri bunkách
   pri pravom a dolnom okraji, poloha sa orezáva cez min() voči rozmerom okna. */
.context-menu-backdrop[b-ctdfkqvmtx] { position: fixed; inset: 0; z-index: 1090; }

.context-menu[b-ctdfkqvmtx] {
    position: fixed;
    left: min(var(--menu-x), 100vw - 210px);
    top: min(var(--menu-y), 100vh - 180px);
    z-index: 1100;
    width: 200px;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    animation: bm-rise var(--motion-fast) var(--ease-out) backwards;
}

.context-menu-title[b-ctdfkqvmtx] {
    padding: 6px 10px 8px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.context-menu-item[b-ctdfkqvmtx] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: .92rem;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.context-menu-item:hover[b-ctdfkqvmtx] { background: rgba(128,128,128,.12); }
.context-menu-item.danger[b-ctdfkqvmtx] { color: var(--danger); }
.context-menu-item.danger:hover[b-ctdfkqvmtx] { background: var(--danger-subtle); }

@media (prefers-reduced-motion: reduce) {
    .context-menu[b-ctdfkqvmtx] { animation: none; }
}

/* ── Interval opakovania (číslo + jednotka na jednom riadku) ── */
.recurrence-interval[b-ctdfkqvmtx] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.recurrence-interval input[b-ctdfkqvmtx] {
    width: 5rem;
}

.recurrence-unit[b-ctdfkqvmtx] {
    font-size: .92rem;
    color: var(--text-muted);
}
/* /Components/Pages/CashHoldings.razor.rz.scp.css */
/* ── Theme variables ── */
.cash-holdings[b-npydi3b6ql] {
    --panel: var(--bg-card);
    --border: var(--border-color);
    --text: var(--text-primary);
    --muted: var(--text-secondary);
}

.cash-holdings .btn-primary[b-npydi3b6ql],
.cash-holdings .btn-primary:hover[b-npydi3b6ql],
.cash-holdings .btn-primary:focus[b-npydi3b6ql] {
    color: #ffffff !important;
}

/* ── Empty state ── */
.empty-state[b-npydi3b6ql] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--muted);
    text-align: center;
}

/* ── Grid ── */
.holdings-grid[b-npydi3b6ql] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
}

/* ── Currency card ── */
.currency-card[b-npydi3b6ql] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .35));
}

.currency-header[b-npydi3b6ql] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(128, 128, 128, .06);
    border-bottom: 1px solid var(--border);
}

.currency-code[b-npydi3b6ql] {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
    letter-spacing: .5px;
}

.currency-total[b-npydi3b6ql] {
    font-weight: 600;
    font-size: 1rem;
    color: #58a6ff;
}

.currency-items[b-npydi3b6ql] {
    padding: 4px 0;
}

/* ── Holding row ── */
.holding-row[b-npydi3b6ql] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background .15s;
    border-bottom: 1px solid rgba(128, 128, 128, .08);
}

.holding-row:last-child[b-npydi3b6ql] {
    border-bottom: none;
}

.holding-row:hover[b-npydi3b6ql] {
    background: rgba(88, 166, 255, .06);
}

.holding-info[b-npydi3b6ql] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.holding-name[b-npydi3b6ql] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.holding-desc[b-npydi3b6ql] {
    font-size: .95rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.holding-amount[b-npydi3b6ql] {
    font-weight: 700;
    font-size: 1rem;
    color: #3fb950;
    white-space: nowrap;
}

/* ── Modal (matching MonthlyMap style) ── */
.modal-backdrop[b-npydi3b6ql] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-card[b-npydi3b6ql] {
    background: var(--panel, #161b22);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    width: min(560px, 95vw);
    max-width: 95vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
}

.modal-header[b-npydi3b6ql] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

    .modal-header h3[b-npydi3b6ql] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 700;
    }

.modal-close[b-npydi3b6ql] {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1.3rem;
    cursor: pointer;
    line-height: 1;
}

.modal-body[b-npydi3b6ql] {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-group[b-npydi3b6ql] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .form-group label[b-npydi3b6ql] {
        font-size: .95rem;
        font-weight: 600;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    .form-group input[b-npydi3b6ql],
    .form-group select[b-npydi3b6ql] {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 8px 10px;
        border-radius: 6px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, .04);
        color: var(--text);
        font-size: 1rem;
    }

.form-row[b-npydi3b6ql] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

    /* Bez min-width: 0 si input v mriežke vypýta svoju prirodzenú šírku a vylezie z karty. */
    .form-row .form-group[b-npydi3b6ql] {
        min-width: 0;
    }

@media (max-width: 560px) {
    .form-row[b-npydi3b6ql] {
        grid-template-columns: 1fr;
    }
}

.modal-footer[b-npydi3b6ql] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
}

.modal-spacer[b-npydi3b6ql] {
    flex: 1;
}

.confirm-card[b-npydi3b6ql] {
    width: 380px;
}

/* ══ Pohyb ═════════════════════════════════════════════════════════════════
   Hotovosť je krátka stránka — pár kariet po menách a v nich zopár riadkov.
   Stačí jej nábeh mriežky a zvýraznenie riadku pod kurzorom. */
.currency-card[b-npydi3b6ql] {
    transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
    animation: bm-rise var(--motion-base) var(--ease-out) backwards;
}

.holdings-grid > *:nth-child(1)[b-npydi3b6ql] { animation-delay: 0ms; }
.holdings-grid > *:nth-child(2)[b-npydi3b6ql] { animation-delay: var(--stagger-step); }
.holdings-grid > *:nth-child(3)[b-npydi3b6ql] { animation-delay: calc(var(--stagger-step) * 2); }
.holdings-grid > *:nth-child(n+4)[b-npydi3b6ql] { animation-delay: calc(var(--stagger-step) * 3); }

.currency-card:hover[b-npydi3b6ql] {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.currency-code[b-npydi3b6ql] {
    transition: transform var(--motion-base) var(--ease-spring);
}

.currency-card:hover .currency-code[b-npydi3b6ql] {
    transform: scale(1.08);
}

.holding-row[b-npydi3b6ql] {
    transition: background-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.holding-row:hover[b-npydi3b6ql] {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .currency-card[b-npydi3b6ql] {
        animation: none;
    }

    .currency-card:hover[b-npydi3b6ql],
    .currency-card:hover .currency-code[b-npydi3b6ql],
    .holding-row:hover[b-npydi3b6ql] {
        transform: none;
    }
}
/* /Components/Pages/Changelog.razor.rz.scp.css */
.changelog-page[b-hl28nlzkn1] {
    max-width: 52rem;
    margin: 0 auto;
    padding-bottom: 3rem;
}

/* ── Hlavička ── */
.changelog-header[b-hl28nlzkn1] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 0 1.25rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2rem;
}

.changelog-icon[b-hl28nlzkn1] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    background: var(--accent-subtle);
    color: var(--accent);
    font-size: 1.4rem;
}

.changelog-header h1[b-hl28nlzkn1] {
    margin: 0 0 .35rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text-primary);
}

.changelog-lead[b-hl28nlzkn1] {
    margin: 0;
    color: var(--text-secondary);
    font-size: .97rem;
    line-height: 1.5;
}

/* ── Vydanie ── */
.changelog-release[b-hl28nlzkn1] {
    margin-bottom: 2.25rem;
}

.changelog-release-header[b-hl28nlzkn1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: .9rem;
}

.changelog-release-header h2[b-hl28nlzkn1] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 650;
    color: var(--text-primary);
}

.changelog-current[b-hl28nlzkn1] {
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--accent-subtle);
    color: var(--accent);
    font-size: .78rem;
    font-weight: 600;
}

.changelog-date[b-hl28nlzkn1] {
    margin-left: auto;
    color: var(--text-muted);
    font-size: .85rem;
}

/* ── Zoznam zmien ── */
.changelog-list[b-hl28nlzkn1] {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    overflow: hidden;
}

.changelog-item[b-hl28nlzkn1] {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: .7rem .95rem;
    border-bottom: 1px solid var(--border-subtle);
}

.changelog-item:last-child[b-hl28nlzkn1] {
    border-bottom: none;
}

.changelog-text[b-hl28nlzkn1] {
    color: var(--text-secondary);
    line-height: 1.55;
}

/* Štítok druhu zmeny — šírka je pevná, aby texty začínali pod sebou. */
.changelog-tag[b-hl28nlzkn1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    flex-shrink: 0;
    min-width: 6.5rem;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
}

.changelog-tag .bi[b-hl28nlzkn1] {
    font-size: .8rem;
}

.changelog-tag--added[b-hl28nlzkn1] {
    background: color-mix(in srgb, var(--success) 14%, transparent);
    color: var(--success);
}

.changelog-tag--improved[b-hl28nlzkn1] {
    background: color-mix(in srgb, var(--info, var(--accent)) 14%, transparent);
    color: var(--info, var(--accent));
}

.changelog-tag--fixed[b-hl28nlzkn1] {
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    color: var(--warning);
}

/* ── Pätička a prázdny stav ── */
.changelog-empty[b-hl28nlzkn1] {
    color: var(--text-muted);
}

.changelog-footer[b-hl28nlzkn1] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: .88rem;
}

@media (max-width: 640px) {
    .changelog-header h1[b-hl28nlzkn1] {
        font-size: 1.35rem;
    }

    .changelog-icon[b-hl28nlzkn1] {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.15rem;
    }

    /* Na úzkej obrazovke je štítok nad textom, inak by ostal text v tenkom stĺpci. */
    .changelog-item[b-hl28nlzkn1] {
        flex-direction: column;
        align-items: flex-start;
        gap: .35rem;
    }

    .changelog-date[b-hl28nlzkn1] {
        margin-left: 0;
        width: 100%;
    }
}


/* ══ Pohyb ═════════════════════════════════════════════════════════════════
   Novinky sú stránka na čítanie zhora nadol, takže položky nabiehajú v tom istom
   poradí. Oneskorenie dostane prvých osem; nižšie je aj tak treba scrollovať
   a čakanie by len oddialilo prvý riadok. */
.changelog-release[b-hl28nlzkn1] {
    animation: bm-rise var(--motion-base) var(--ease-out) backwards;
}

.changelog-item[b-hl28nlzkn1] {
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}


.changelog-item:hover[b-hl28nlzkn1] {
    transform: translateX(3px);
}

.changelog-icon[b-hl28nlzkn1] {
    transition: transform var(--motion-base) var(--ease-spring);
}

.changelog-item:hover .changelog-icon[b-hl28nlzkn1] {
    transform: scale(1.15);
}

.changelog-tag[b-hl28nlzkn1] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
    .changelog-release[b-hl28nlzkn1] {
        animation: none;
    }

    .changelog-item:hover[b-hl28nlzkn1],
    .changelog-item:hover .changelog-icon[b-hl28nlzkn1] {
        transform: none;
    }
}
/* /Components/Pages/Feedback.razor.rz.scp.css */
/* ── Stránka ── */
.feedback-page[b-ezcgaommx3] {
    --panel: var(--bg-card);
    --border: var(--border-color);
    --text: var(--text-primary);
    --muted: var(--text-secondary);

    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 780px;
    margin: 0 auto;
    padding: 0 12px 32px;
}

/* ── Hlavička ── */
.feedback-header[b-ezcgaommx3] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 0 4px;
}

.feedback-icon[b-ezcgaommx3] {
    font-size: 2rem;
    color: var(--accent);
    line-height: 1;
}

.feedback-badge[b-ezcgaommx3] {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(128, 128, 128, .14);
    color: var(--muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.feedback-header h1[b-ezcgaommx3] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
}

.feedback-lead[b-ezcgaommx3] {
    margin: 6px 0 0;
    color: var(--muted);
    line-height: 1.5;
}

/* ── Karta formulára ── */
.feedback-card[b-ezcgaommx3] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 22px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .25));
}

.feedback-field[b-ezcgaommx3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.feedback-label[b-ezcgaommx3] {
    font-weight: 600;
    color: var(--text);
}

.feedback-hint[b-ezcgaommx3] {
    font-size: .85rem;
    color: var(--muted);
}

/* ── Hodnotenie hviezdičkami ── */
.feedback-stars[b-ezcgaommx3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.feedback-star[b-ezcgaommx3] {
    padding: 4px 6px;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    transition: transform .12s ease, color .12s ease;
}

.feedback-star:hover[b-ezcgaommx3] {
    transform: scale(1.12);
}

.feedback-star.is-picked[b-ezcgaommx3] {
    color: #f5b301;
}

.feedback-star-label[b-ezcgaommx3] {
    margin-left: 8px;
    color: var(--muted);
    font-size: .9rem;
}

/* ── Druh spätnej väzby ── */
.feedback-types[b-ezcgaommx3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.feedback-type[b-ezcgaommx3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: .92rem;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

.feedback-type:hover[b-ezcgaommx3] {
    background: rgba(128, 128, 128, .1);
}

.feedback-type.is-picked[b-ezcgaommx3] {
    border-color: var(--accent);
    background: rgba(128, 128, 128, .14);
    font-weight: 600;
}

/* ── Polia ── */
.feedback-input[b-ezcgaommx3] {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-input, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    color: var(--text);
    font-size: .95rem;
}

.feedback-input:focus[b-ezcgaommx3] {
    outline: none;
    border-color: var(--accent);
}

.feedback-textarea[b-ezcgaommx3] {
    min-height: 130px;
    resize: vertical;
    line-height: 1.5;
}

.feedback-counter[b-ezcgaommx3] {
    align-self: flex-end;
    font-size: .78rem;
    color: var(--muted);
}

/* ── Chyba, akcie, poznámka ── */
.feedback-error[b-ezcgaommx3] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(220, 53, 69, .5);
    border-radius: var(--radius-sm, 8px);
    background: rgba(220, 53, 69, .1);
    color: var(--text);
}

.feedback-actions[b-ezcgaommx3] {
    display: flex;
    justify-content: flex-end;
}

.feedback-btn[b-ezcgaommx3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: var(--text);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
}

.feedback-btn-solid[b-ezcgaommx3] {
    border-color: transparent;
    background: var(--accent);
    color: #ffffff;
}

.feedback-btn-solid:disabled[b-ezcgaommx3] {
    opacity: .65;
    cursor: default;
}

.feedback-note[b-ezcgaommx3] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.5;
}

/* ── Potvrdenie po odoslaní ── */
.feedback-done[b-ezcgaommx3] {
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 40px 22px;
}

.feedback-done-icon[b-ezcgaommx3] {
    font-size: 2.6rem;
    color: #2ea56b;
}

.feedback-done h2[b-ezcgaommx3] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
}

.feedback-done p[b-ezcgaommx3] {
    margin: 0;
    color: var(--muted);
}

/* ── Mobil ── */
@media (max-width: 640px) {
    .feedback-page[b-ezcgaommx3] {
        gap: 14px;
        padding: 0 8px 24px;
    }

    .feedback-header[b-ezcgaommx3] {
        gap: 12px;
        padding-top: 14px;
    }

    .feedback-header h1[b-ezcgaommx3] {
        font-size: 1.35rem;
    }

    .feedback-card[b-ezcgaommx3] {
        gap: 18px;
        padding: 16px;
    }

    .feedback-star[b-ezcgaommx3] {
        font-size: 1.9rem;
        padding: 4px 4px;
    }

    .feedback-type[b-ezcgaommx3] {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
    }

    .feedback-actions[b-ezcgaommx3] {
        justify-content: stretch;
    }

    .feedback-btn[b-ezcgaommx3] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/Guides.razor.rz.scp.css */
/* Vzhľad stránky návodov.

   Väčšina pravidiel je písaná cez `::deep`, pretože časť obsahu vykresľuje samostatný
   komponent (McpSetupCard) a scoped CSS by sa naň inak nedostalo. Karta AI asistenta tak
   vyzerá rovnako ako ostatné návody a farby sú na jednom mieste. */

.guides-page[b-y50oxw1sk0] {
    max-width: 60rem;
    margin: 0 auto;
    padding-bottom: 3rem;
}

/* ── Hlavička ── */
.guides-header[b-y50oxw1sk0] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 0 1.25rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.guides-icon[b-y50oxw1sk0] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    background: var(--accent-subtle);
    color: var(--accent);
    font-size: 1.4rem;
}

.guides-badge[b-y50oxw1sk0] {
    display: inline-block;
    margin-bottom: .4rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--accent-subtle);
    color: var(--accent);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.guides-header h1[b-y50oxw1sk0] {
    margin: 0 0 .35rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text-primary);
}

.guides-lead[b-y50oxw1sk0] {
    margin: 0;
    max-width: 46rem;
    color: var(--text-secondary);
    font-size: .97rem;
    line-height: 1.55;
}

/* ── Oznam pre neprihláseného návštevníka ── */
.guides-notice[b-y50oxw1sk0] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .9rem 1.1rem;
    margin-bottom: 1.75rem;
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--info);
    border-radius: var(--radius-md);
    background: var(--info-subtle);
}

.guides-notice > .bi[b-y50oxw1sk0] {
    color: var(--info);
    font-size: 1.05rem;
    line-height: 1.5;
}

.guides-notice p[b-y50oxw1sk0] {
    flex: 1 1 18rem;
    margin: 0;
    color: var(--text-secondary);
    font-size: .9rem;
    line-height: 1.55;
}

.guides-notice-actions[b-y50oxw1sk0] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* ── Tlačidlá a odkazy (zdieľané aj s kartou AI asistenta) ── */
.guides-page[b-y50oxw1sk0]  .guides-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .9rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: .87rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.guides-page[b-y50oxw1sk0]  .guides-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.guides-page[b-y50oxw1sk0]  .guides-btn-solid {
    border-color: transparent;
    background: var(--accent);
    color: #fff;
}

.guides-page[b-y50oxw1sk0]  .guides-btn-solid:hover {
    background: var(--accent-hover);
    border-color: transparent;
    color: #fff;
}

.guides-page[b-y50oxw1sk0]  .guides-locked {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--text-muted);
    font-size: .85rem;
}

/* ── Rozcestník ── */
.guides-toc[b-y50oxw1sk0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: .75rem;
    margin-bottom: 2.25rem;
}

.guides-toc-item[b-y50oxw1sk0] {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem .9rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}

.guides-toc-item:hover[b-y50oxw1sk0] {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.guides-toc-icon[b-y50oxw1sk0] {
    color: var(--accent);
    font-size: 1.1rem;
    line-height: 1.4;
}

.guides-toc-text[b-y50oxw1sk0] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.guides-toc-title[b-y50oxw1sk0] {
    color: var(--text-primary);
    font-size: .95rem;
    font-weight: 650;
}

.guides-toc-desc[b-y50oxw1sk0] {
    color: var(--text-muted);
    font-size: .82rem;
    line-height: 1.45;
}

/* ── Sekcie ── */
.guides-section[b-y50oxw1sk0] {
    margin-bottom: 2.5rem;
    scroll-margin-top: 5rem;
}

.guides-section-title[b-y50oxw1sk0] {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1rem;
    font-size: 1.2rem;
    font-weight: 650;
    color: var(--text-primary);
}

.guides-section-title .bi[b-y50oxw1sk0] {
    color: var(--accent);
}

.guides-grid[b-y50oxw1sk0] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* ── Karta návodu ──
   Rozbaľovanie je na <details>, aby stránka fungovala aj bez skriptu. */
.guides-page[b-y50oxw1sk0]  .guide-card {
    --gfc: var(--accent);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--gfc);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    overflow: hidden;
    scroll-margin-top: 5rem;
}

.guides-page[b-y50oxw1sk0]  .guide-card[open] {
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}

.guides-page[b-y50oxw1sk0]  .guide-card-head {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .95rem 1.1rem;
    cursor: pointer;
    list-style: none;
}

/* Predvolený trojuholník nahrádza vlastná menovka vpravo. */
.guides-page[b-y50oxw1sk0]  .guide-card-head::-webkit-details-marker {
    display: none;
}

.guides-page[b-y50oxw1sk0]  .guide-card-head:hover {
    background: var(--nav-hover-bg);
}

.guides-page[b-y50oxw1sk0]  .guide-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--gfc) 14%, transparent);
    color: var(--gfc);
    font-size: 1.1rem;
}

.guides-page[b-y50oxw1sk0]  .guide-card-heading {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex: 1 1 auto;
    min-width: 0;
}

.guides-page[b-y50oxw1sk0]  .guide-card-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 650;
}

.guides-page[b-y50oxw1sk0]  .guide-card-lead {
    color: var(--text-secondary);
    font-size: .87rem;
    line-height: 1.45;
}

.guides-page[b-y50oxw1sk0]  .guide-card-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

.guides-page[b-y50oxw1sk0]  .guide-card-minutes {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--text-muted);
    font-size: .8rem;
    white-space: nowrap;
}

.guides-page[b-y50oxw1sk0]  .guide-card-toggle {
    padding: .3rem .7rem;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.guides-page[b-y50oxw1sk0]  .guide-card[open] .guide-card-toggle {
    border-color: var(--gfc);
    color: var(--gfc);
}

.guides-page[b-y50oxw1sk0]  .guide-card-body {
    padding: 0 1.1rem 1.2rem 1.1rem;
    border-top: 1px solid var(--border-subtle);
}

/* ── Obrázok a video návodu ── */
.guides-page[b-y50oxw1sk0]  .guide-shot,
.guides-page[b-y50oxw1sk0]  .guide-video {
    margin: 1.1rem 0 0;
}

.guides-page[b-y50oxw1sk0]  .guide-shot img,
.guides-page[b-y50oxw1sk0]  .guide-video video {
    display: block;
    width: 100%;
    max-height: 22rem;
    object-fit: cover;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: #000;
}

.guides-page[b-y50oxw1sk0]  .guide-video figcaption {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .5rem;
    color: var(--text-secondary);
    font-size: .85rem;
    font-weight: 600;
}

.guides-page[b-y50oxw1sk0]  .guide-video-hint {
    margin: .4rem 0 0;
    color: var(--text-muted);
    font-size: .8rem;
}

/* ── Kroky ── */
.guides-page[b-y50oxw1sk0]  .guide-steps-label {
    margin: 1.3rem 0 .6rem;
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.guides-page[b-y50oxw1sk0]  .guide-steps {
    counter-reset: guide-step;
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
}

.guides-page[b-y50oxw1sk0]  .guide-step {
    counter-increment: guide-step;
    position: relative;
    padding: 0 0 1rem 2.4rem;
}

.guides-page[b-y50oxw1sk0]  .guide-step::before {
    content: counter(guide-step);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--gfc) 16%, transparent);
    color: var(--gfc);
    font-size: .8rem;
    font-weight: 700;
}

/* Spojnica medzi krokmi; posledný krok ju už nepotrebuje. */
.guides-page[b-y50oxw1sk0]  .guide-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.9rem;
    bottom: .35rem;
    left: .78rem;
    width: 1px;
    background: var(--border-subtle);
}

.guides-page[b-y50oxw1sk0]  .guide-step-title {
    display: block;
    margin-bottom: .2rem;
    color: var(--text-primary);
    font-size: .93rem;
    font-weight: 650;
}

.guides-page[b-y50oxw1sk0]  .guide-step-text {
    display: block;
    color: var(--text-secondary);
    font-size: .89rem;
    line-height: 1.6;
}

.guides-page[b-y50oxw1sk0]  .guide-step-tip {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin-top: .5rem;
    padding: .5rem .7rem;
    border-radius: var(--radius-sm);
    background: var(--warning-subtle);
    color: var(--text-secondary);
    font-size: .84rem;
    line-height: 1.5;
}

.guides-page[b-y50oxw1sk0]  .guide-step-tip .bi {
    color: var(--warning);
    line-height: 1.5;
}

.guides-page[b-y50oxw1sk0]  .guide-step-tip strong {
    color: var(--text-primary);
}

/* ── Farby kariet ── */
.guides-page[b-y50oxw1sk0]  .gfc-green { --gfc: var(--success); }
.guides-page[b-y50oxw1sk0]  .gfc-blue { --gfc: var(--info); }
.guides-page[b-y50oxw1sk0]  .gfc-purple { --gfc: var(--purple); }
.guides-page[b-y50oxw1sk0]  .gfc-teal { --gfc: var(--teal); }
.guides-page[b-y50oxw1sk0]  .gfc-pink { --gfc: var(--pink); }
.guides-page[b-y50oxw1sk0]  .gfc-orange { --gfc: var(--warning); }
.guides-page[b-y50oxw1sk0]  .gfc-yellow { --gfc: var(--warning); }
.guides-page[b-y50oxw1sk0]  .gfc-indigo { --gfc: var(--accent); }

/* ── Pätička ── */
.guides-footer[b-y50oxw1sk0] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: .85rem;
}

.guides-footer .bi[b-y50oxw1sk0] {
    color: var(--accent);
}

.guides-footer a[b-y50oxw1sk0] {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.guides-footer a:hover[b-y50oxw1sk0] {
    text-decoration: underline;
}

/* ═══════════ Karta napojenia AI asistenta ═══════════ */

.guides-page[b-y50oxw1sk0]  .mcp-badge {
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--purple-subtle);
    color: var(--purple);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.guides-page[b-y50oxw1sk0]  .mcp-block {
    margin-top: 1.4rem;
}

.guides-page[b-y50oxw1sk0]  .mcp-block h3 {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .5rem;
    color: var(--text-primary);
    font-size: .98rem;
    font-weight: 650;
}

.guides-page[b-y50oxw1sk0]  .mcp-block h3 .bi {
    color: var(--gfc);
}

.guides-page[b-y50oxw1sk0]  .mcp-block p {
    margin: 0 0 .6rem;
    color: var(--text-secondary);
    font-size: .89rem;
    line-height: 1.6;
}

.guides-page[b-y50oxw1sk0]  .mcp-examples {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: .5rem;
}

.guides-page[b-y50oxw1sk0]  .mcp-examples li {
    padding: .55rem .75rem;
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: .86rem;
    font-style: italic;
    line-height: 1.5;
}

/* Adresa servera a príkazy — text sa musí dať označiť a nesmie pretiecť na mobile. */
.guides-page[b-y50oxw1sk0]  .mcp-copy-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .5rem;
}

.guides-page[b-y50oxw1sk0]  .mcp-url,
.guides-page[b-y50oxw1sk0]  .mcp-command {
    flex: 1 1 18rem;
    min-width: 0;
    padding: .5rem .7rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .84rem;
    overflow-wrap: anywhere;
}

.guides-page[b-y50oxw1sk0]  .mcp-copy.is-copied {
    background: var(--success);
    border-color: transparent;
    color: #fff;
}

/* ── Prepínač klientov ──
   Menovky tvoria riadok, zvolený panel sa zalomí pod ne na celú šírku. Rádiá sú vybraté
   z toku, takže rozostupy medzi menovkami nenarúšajú. */
.guides-page[b-y50oxw1sk0]  .mcp-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .4rem;
    margin-top: .75rem;
}

.guides-page[b-y50oxw1sk0]  .mcp-tab-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.guides-page[b-y50oxw1sk0]  .mcp-tab-label {
    padding: .4rem .85rem;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.guides-page[b-y50oxw1sk0]  .mcp-tab-label:hover {
    border-color: var(--gfc);
    color: var(--gfc);
}

/* Zvýraznenie zvolenej menovky vešia `wwwroot/js/guides.js` ako triedu, nie CSS cez
   `:checked`. Dôvod je praktický: prehliadač zmenu stavu rádia na susednej menovke
   neprekreslil, hoci panel pod ňou prepol správne. Trieda na to citlivá nie je.
   Bez skriptu ostane menovka nezvýraznená, ale panely sa prepínajú ďalej. */
.guides-page[b-y50oxw1sk0]  .mcp-tab-label.is-active {
    border-color: transparent;
    background: var(--gfc);
    color: #fff;
}

.guides-page[b-y50oxw1sk0]  .mcp-panel {
    display: none;
    flex: 1 0 100%;
    margin-top: .8rem;
}

/* Panely stoja za všetkými rádiami, takže si zvolené rádio nájde ten svoj. */
.guides-page[b-y50oxw1sk0]  #mcp-tab-claude:checked ~ .mcp-panel[data-mcp-panel="claude"],
.guides-page[b-y50oxw1sk0]  #mcp-tab-claudecode:checked ~ .mcp-panel[data-mcp-panel="claudecode"],
.guides-page[b-y50oxw1sk0]  #mcp-tab-chatgpt:checked ~ .mcp-panel[data-mcp-panel="chatgpt"],
.guides-page[b-y50oxw1sk0]  #mcp-tab-cursor:checked ~ .mcp-panel[data-mcp-panel="cursor"],
.guides-page[b-y50oxw1sk0]  #mcp-tab-vscode:checked ~ .mcp-panel[data-mcp-panel="vscode"],
.guides-page[b-y50oxw1sk0]  #mcp-tab-other:checked ~ .mcp-panel[data-mcp-panel="other"] {
    display: block;
}

.guides-page[b-y50oxw1sk0]  .mcp-steps {
    counter-reset: mcp-step;
    list-style: none;
    margin: 0 0 .9rem;
    padding: 0;
}

.guides-page[b-y50oxw1sk0]  .mcp-steps li {
    counter-increment: mcp-step;
    position: relative;
    padding: 0 0 .65rem 2.1rem;
    color: var(--text-secondary);
    font-size: .89rem;
    line-height: 1.6;
}

.guides-page[b-y50oxw1sk0]  .mcp-steps li::before {
    content: counter(mcp-step);
    position: absolute;
    top: .05rem;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--gfc) 16%, transparent);
    color: var(--gfc);
    font-size: .75rem;
    font-weight: 700;
}

.guides-page[b-y50oxw1sk0]  .mcp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .6rem;
}

.guides-page[b-y50oxw1sk0]  .mcp-note {
    margin: .8rem 0 .4rem;
    padding-top: .8rem;
    border-top: 1px dashed var(--border-subtle);
    color: var(--text-muted);
    font-size: .84rem;
    line-height: 1.55;
}

.guides-page[b-y50oxw1sk0]  .mcp-scopes {
    margin: 0 0 .8rem;
    padding: 0;
    list-style: none;
}

.guides-page[b-y50oxw1sk0]  .mcp-scopes li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .3rem 0;
    color: var(--text-secondary);
    font-size: .89rem;
    line-height: 1.55;
}

.guides-page[b-y50oxw1sk0]  .mcp-scopes .bi {
    color: var(--gfc);
    line-height: 1.55;
}

.guides-page[b-y50oxw1sk0]  .mcp-highlight {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .7rem .9rem;
    margin-bottom: .9rem;
    border-left: 3px solid var(--success);
    border-radius: var(--radius-sm);
    background: var(--success-subtle);
    font-size: .87rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.guides-page[b-y50oxw1sk0]  .mcp-highlight strong {
    color: var(--text-primary);
}

.guides-page[b-y50oxw1sk0]  .mcp-trouble {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-secondary);
    font-size: .88rem;
    line-height: 1.6;
}

.guides-page[b-y50oxw1sk0]  .mcp-trouble li {
    margin-bottom: .4rem;
}

/* ── Mobil ── */
@media (max-width: 640px) {
    .guides-header[b-y50oxw1sk0] {
        gap: .75rem;
    }

    .guides-page[b-y50oxw1sk0]  .guide-card-head {
        flex-wrap: wrap;
        gap: .6rem;
    }

    .guides-page[b-y50oxw1sk0]  .guide-card-meta {
        width: 100%;
        justify-content: space-between;
    }

    .guides-page[b-y50oxw1sk0]  .guides-btn {
        justify-content: center;
        width: 100%;
    }

    .guides-page[b-y50oxw1sk0]  .mcp-copy-row .guides-btn {
        width: 100%;
    }
}
/* /Components/Pages/Legal/LegalPage.razor.rz.scp.css */
.legal-page[b-0n8kkhvby8] {
    max-width: 52rem;
    margin: 0 auto;
    padding-bottom: 3rem;
}

/* ── Hlavička ── */
.legal-header[b-0n8kkhvby8] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 0 1.25rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2rem;
}

.legal-icon[b-0n8kkhvby8] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    background: var(--accent-subtle);
    color: var(--accent);
    font-size: 1.4rem;
}

.legal-header h1[b-0n8kkhvby8] {
    margin: 0 0 .35rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text-primary);
}

.legal-lead[b-0n8kkhvby8] {
    margin: 0;
    color: var(--text-secondary);
    font-size: .97rem;
    line-height: 1.5;
}

/* ── Text dokumentu ──
   Štýlujeme cez ::deep, pretože obsah prichádza z rodičovskej stránky. */
.legal-body[b-0n8kkhvby8] {
    color: var(--text-secondary);
    line-height: 1.7;
}

[b-0n8kkhvby8] .legal-body h2,
.legal-body[b-0n8kkhvby8]  h2 {
    margin: 2rem 0 .75rem;
    font-size: 1.15rem;
    font-weight: 650;
    color: var(--text-primary);
}

.legal-body[b-0n8kkhvby8]  h3 {
    margin: 1.5rem 0 .5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.legal-body[b-0n8kkhvby8]  p {
    margin: 0 0 1rem;
}

.legal-body[b-0n8kkhvby8]  ul,
.legal-body[b-0n8kkhvby8]  ol {
    margin: 0 0 1rem;
    padding-left: 1.35rem;
}

.legal-body[b-0n8kkhvby8]  li {
    margin-bottom: .45rem;
}

.legal-body[b-0n8kkhvby8]  strong {
    color: var(--text-primary);
    font-weight: 600;
}

.legal-body[b-0n8kkhvby8]  a {
    color: var(--accent);
    text-decoration: none;
}

.legal-body[b-0n8kkhvby8]  a:hover {
    text-decoration: underline;
}

/* ── Tabuľka spracúvania údajov ── */
.legal-body[b-0n8kkhvby8]  .legal-table-wrap {
    overflow-x: auto;
    margin: 0 0 1.25rem;
}

.legal-body[b-0n8kkhvby8]  table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: .92rem;
}

.legal-body[b-0n8kkhvby8]  th,
.legal-body[b-0n8kkhvby8]  td {
    padding: .6rem .75rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-subtle);
}

.legal-body[b-0n8kkhvby8]  th {
    color: var(--text-primary);
    font-weight: 600;
    background: var(--bg-surface);
}

/* ── Zvýraznený blok (kontakt, upozornenie) ── */
.legal-body[b-0n8kkhvby8]  .legal-callout {
    display: flex;
    gap: .75rem;
    padding: 1rem 1.15rem;
    margin: 0 0 1.25rem;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.legal-body[b-0n8kkhvby8]  .legal-callout .bi {
    color: var(--accent);
    font-size: 1.05rem;
    line-height: 1.7;
}

.legal-body[b-0n8kkhvby8]  .legal-callout p:last-child {
    margin-bottom: 0;
}

/* ── Pätička a odkazy ── */
.legal-footer[b-0n8kkhvby8] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: .88rem;
}

.legal-links[b-0n8kkhvby8] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: .85rem;
    font-size: .9rem;
}

.legal-links a[b-0n8kkhvby8] {
    color: var(--text-secondary);
    text-decoration: none;
}

.legal-links a:hover[b-0n8kkhvby8] {
    color: var(--accent);
    text-decoration: underline;
}

@media (max-width: 640px) {
    .legal-header[b-0n8kkhvby8] {
        gap: .75rem;
    }

    .legal-header h1[b-0n8kkhvby8] {
        font-size: 1.35rem;
    }

    .legal-icon[b-0n8kkhvby8] {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.15rem;
    }
}

/* Poznámka o tom, že preklad dokumentu nie je právne overený. */
.legal-translation-note[b-0n8kkhvby8] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 1.25rem 0 0;
    padding: .6rem .85rem;
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm, 6px);
    background: color-mix(in srgb, var(--warning) 8%, transparent);
    color: var(--text-secondary);
    font-size: .9rem;
}

/* ══ Pohyb ═════════════════════════════════════════════════════════════════
   Právne stránky sú súvislý text na čítanie. Nábeh dostáva celý blok naraz —
   postupné objavovanie odstavcov by pri dlhom dokumente zdržiavalo čítanie. */
.legal-page[b-0n8kkhvby8] {
    animation: bm-rise var(--motion-slow) var(--ease-out) backwards;
}

.legal-icon[b-0n8kkhvby8] {
    transition: transform var(--motion-base) var(--ease-spring);
}

.legal-header:hover .legal-icon[b-0n8kkhvby8] {
    transform: scale(1.08) rotate(-4deg);
}

.legal-links a[b-0n8kkhvby8] {
    transition: color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.legal-links a:hover[b-0n8kkhvby8] {
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    .legal-page[b-0n8kkhvby8] {
        animation: none;
    }

    .legal-header:hover .legal-icon[b-0n8kkhvby8],
    .legal-links a:hover[b-0n8kkhvby8] {
        transform: none;
    }
}
/* /Components/Pages/MonthlyMap.razor.rz.scp.css */
/* ── Theme variables (scoped to component root) ── */
.monthly-map[b-15yg0jr2eq] {
    --panel: var(--bg-card);
    --border: var(--border-color);
    --text: var(--text-primary);
    --muted: var(--text-secondary);
    --income: #58a6ff;
    --outcome: #bc8cff;
    --savings: #3fb950;
    --backup: #f85149;
    --invest: #39d2c0;
    --remainder: #8b949e;
}

/* ── Collapse toggle button ── */
.collapse-toggle-btn[b-15yg0jr2eq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: .95rem;
    padding: 4px 10px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}

.collapse-toggle-btn:hover[b-15yg0jr2eq] {
    background: rgba(88, 166, 255, .08);
    color: var(--accent);
    border-color: var(--accent);
}

.collapse-toggle-btn .bi[b-15yg0jr2eq] {
    font-size: 1rem;
}

.collapse-toggle-label[b-15yg0jr2eq] {
    font-weight: 600;
}

/* ── Zámok úprav v uzavretých mesiacoch ── */
.past-lock-btn[b-15yg0jr2eq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: .95rem;
    padding: 4px 10px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}

.past-lock-btn:hover[b-15yg0jr2eq] {
    background: rgba(88, 166, 255, .08);
    color: var(--accent);
    border-color: var(--accent);
}

.past-lock-btn.unlocked[b-15yg0jr2eq] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
}

.past-lock-btn .bi[b-15yg0jr2eq] {
    font-size: 1rem;
}

.past-lock-label[b-15yg0jr2eq] {
    font-weight: 600;
}

.past-unlock-banner[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    font-size: .9rem;
    font-weight: 600;
}

/* ── Horná lišta stránky ── */
.map-toolbar[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 12px;
    margin-bottom: 14px;
}

.toolbar-icon[b-15yg0jr2eq] {
    font-size: 1.5rem;
    color: var(--accent);
}

.toolbar-title[b-15yg0jr2eq] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.toolbar-actions[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.past-unlock-banner[b-15yg0jr2eq] {
    margin: 0 12px 10px;
}

/* ── Date switcher ── */
.date-switcher[b-15yg0jr2eq] {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.switcher-btn[b-15yg0jr2eq] {
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 1.15rem;
    font-weight: 700;
    padding: 6px 14px;
    cursor: pointer;
    transition: background .15s, color .15s;
    line-height: 1;
}

.switcher-btn:hover[b-15yg0jr2eq] {
    background: rgba(88, 166, 255, .12);
    color: var(--income);
}

.switcher-label[b-15yg0jr2eq] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    padding: 6px 10px;
    min-width: 80px;
    text-align: center;
    user-select: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

/* ÔöÇÔöÇ Grid layout ÔöÇÔöÇ */
.map-container[b-15yg0jr2eq] {
    color: var(--text);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    padding: 0 12px;
}

/* ÔöÇÔöÇ Panels ÔöÇÔöÇ */
.panel[b-15yg0jr2eq] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .35));
}

.panel > header[b-15yg0jr2eq] {
    background: rgba(128, 128, 128, .06);
    border-bottom: 1px solid var(--border);
    padding: 11px 16px;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .02em;
    color: var(--text);
}

.panel .sum[b-15yg0jr2eq] {
    color: var(--text);
    padding: 9px 16px;
    border-bottom: 1px dashed var(--border);
    font-size: .97rem;
    font-weight: 600;
}

/* Hlavička panela mesiacov: ikona vľavo, názov s mesiacom a súčtom, príjem v odznaku vpravo. */
.panel > header.panel-head[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.panel-head-icon[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.panel-head-main[b-15yg0jr2eq] {
    flex: 1;
    min-width: 0;
}

.panel-head-title[b-15yg0jr2eq] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.panel-head-name[b-15yg0jr2eq] {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.panel-head-month[b-15yg0jr2eq] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.panel-head-sub[b-15yg0jr2eq] {
    margin-top: 2px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--muted);
}

.panel-head-pill[b-15yg0jr2eq] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    padding: 7px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(128, 128, 128, .08);
    flex-shrink: 0;
}

.panel-head-pill .pill-value[b-15yg0jr2eq] {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.panel-head-pill .pill-label[b-15yg0jr2eq] {
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: lowercase;
}

.planned .panel-head-icon[b-15yg0jr2eq]   { background: rgba(88, 166, 255, .14); color: var(--income); }
.planned .panel-head-name[b-15yg0jr2eq]   { color: var(--income); }
.planned .panel-head-pill[b-15yg0jr2eq]   { border-color: rgba(88, 166, 255, .35); }
.planned .pill-value[b-15yg0jr2eq]        { color: var(--income); }

.purchased .panel-head-icon[b-15yg0jr2eq] { background: rgba(188, 140, 255, .14); color: var(--outcome); }
.purchased .panel-head-name[b-15yg0jr2eq] { color: var(--outcome); }
.purchased .panel-head-pill[b-15yg0jr2eq] { border-color: rgba(188, 140, 255, .35); }
.purchased .pill-value[b-15yg0jr2eq]      { color: var(--outcome); }

/* Panel header accents */
.planned header[b-15yg0jr2eq]   { border-left: 3px solid var(--income); }
.purchased header[b-15yg0jr2eq] { border-left: 4px solid var(--outcome); font-size: 1.1rem; background: rgba(188,140,255,.06); }
.summary header[b-15yg0jr2eq]    { border-left: 3px solid var(--savings); }

/* ÔöÇÔöÇ Scrollable month list ÔöÇÔöÇ */
/* Panely v mriežke sú vždy rovnako vysoké ako ten najvyšší. Keď stredný panel narastie
   (napríklad pri viacerých sporeniach), zoznam mesiacov sa musí natiahnuť s ním, inak by
   pod ním ostala prázdna diera. Preto je panel flexbox a zoznam v ňom vypĺňa zvyšok výšky. */
.map-container > .panel[b-15yg0jr2eq] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Zoznam mesiacov vypĺňa zvyšok panela, ale sám do jeho výšky nehovorí nič nad rámec
   základných 100vh (flex-basis 0 + min-height). Výšku stĺpca tak určuje stredný panel:
   čím viac sporívaní, tým vyšší – a mesiace sa natiahnu s ním. */
.month-list[b-15yg0jr2eq] {
    flex: 1 1 0;
    min-height: 100vh;
    overflow-y: auto;
}

/* ÔöÇÔöÇ Month blocks ÔöÇÔöÇ */
.month-block[b-15yg0jr2eq] {
    padding: 14px 16px;
    border-bottom: 1px dashed var(--border);
}

.month-title[b-15yg0jr2eq] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    letter-spacing: .01em;
}

/* ── Čipy mesiaca: príjem, výdaj a (v prebiehajúcom mesiaci) reálne minuté ── */
.month-chips[b-15yg0jr2eq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 7px 0 10px;
}

.month-chip[b-15yg0jr2eq] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 8px;
    border: 1px solid transparent;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.month-chip .bi[b-15yg0jr2eq] {
    font-size: .95rem;
    line-height: 1;
}

.chip-label[b-15yg0jr2eq] {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .8;
}

.chip-value[b-15yg0jr2eq] {
    font-size: 1rem;
    font-weight: 800;
}

.chip-income[b-15yg0jr2eq] {
    background: rgba(63, 185, 80, .12);
    border-color: rgba(63, 185, 80, .35);
    color: #3fb950;
}

.chip-outcome[b-15yg0jr2eq] {
    background: rgba(248, 81, 73, .12);
    border-color: rgba(248, 81, 73, .35);
    color: #f85149;
}

/* Reálne minuté je tiež výdaj, len mäkšie podfarbený – väčšie číslo drží jeho dôležitosť. */
.chip-actual[b-15yg0jr2eq] {
    background: rgba(248, 81, 73, .06);
    border-color: rgba(248, 81, 73, .2);
    color: rgba(248, 81, 73, .72);
}

.chip-actual .chip-value[b-15yg0jr2eq] {
    font-size: 1.2rem;
}

.block-actions[b-15yg0jr2eq] {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

/* ÔöÇÔöÇ Transaction rows ÔöÇÔöÇ */
.row-item[b-15yg0jr2eq] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 4px;
    padding: 4px 6px;
    margin: 2px 0;
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-left-color: var(--income);
    border-radius: var(--radius-sm, 6px);
    background: rgba(128, 128, 128, .04);
    cursor: pointer;
    transition: background .15s ease;
}

.row-item .name[b-15yg0jr2eq] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: 1rem;
    color: var(--text);
}

.bg-amounts[b-15yg0jr2eq] {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    color: var(--text);
    white-space: nowrap;
}

.bg-amounts.overspent[b-15yg0jr2eq] {
    color: #f85149;
}

.row-item:hover[b-15yg0jr2eq] {
    background: rgba(128, 128, 128, .08);
}

.row-item .amount[b-15yg0jr2eq] {
    font-weight: 700;
    font-size: 1rem;
}

.row-item .amount.amount-positive[b-15yg0jr2eq] {
    color: var(--savings);
}

.row-item .amount.amount-negative[b-15yg0jr2eq] {
    color: var(--backup);
}



.rec-icon[b-15yg0jr2eq] {
    font-size: .92rem;
    color: var(--invest);
    margin-left: 4px;
    vertical-align: middle;
}

.empty-info[b-15yg0jr2eq] {
    text-align: center;
    color: var(--muted);
    padding: 1rem;
}

/* ÔöÇÔöÇ Virtual transaction row ÔöÇÔöÇ */
.row-item.virtual[b-15yg0jr2eq] {
    opacity: .7;
    border-left-color: var(--invest);
    border-left-style: dashed;
}

/* ÔöÇÔöÇ Drag and drop ÔöÇÔöÇ */
.row-item[draggable="true"][b-15yg0jr2eq] {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.row-item[draggable="true"]:active[b-15yg0jr2eq] {
    cursor: grabbing;
}

.row-item.dragging[b-15yg0jr2eq] {
    opacity: .4;
    border-style: dashed;
}

.month-block.drag-over[b-15yg0jr2eq] {
    background: rgba(88, 166, 255, .08);
    outline: 2px dashed var(--income);
    outline-offset: -2px;
    border-radius: var(--radius-sm, 6px);
}

.budget-group.drag-over[b-15yg0jr2eq] {
    background: rgba(88, 166, 255, .10);
    outline: 2px dashed var(--income);
    outline-offset: -2px;
    border-radius: var(--radius-sm, 6px);
}

.virtual-badge[b-15yg0jr2eq] {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 5px;
    margin-left: 4px;
    border-radius: 3px;
    background: rgba(57, 210, 192, .15);
    color: var(--invest);
    vertical-align: middle;
    letter-spacing: .04em;
}

.budget-tag[b-15yg0jr2eq] {
    font-size: .88rem;
    font-weight: 600;
    padding: 1px 5px;
    margin-left: 4px;
    border-radius: 3px;
    vertical-align: middle;
}

/* ÔöÇÔöÇ Budget overview in mid panel ÔöÇÔöÇ */
.budget-overview-header[b-15yg0jr2eq] {
    font-size: .92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    padding: 8px 0 4px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.budget-overview-header:hover[b-15yg0jr2eq] {
    color: var(--text);
}

.budget-overview-header .bg-toggle[b-15yg0jr2eq] {
    font-size: .92rem;
}

/* ── Budget groups in month blocks ── */
.budget-group[b-15yg0jr2eq] {
    padding: 0;
    margin: 6px 0;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    background: var(--bg-surface, rgba(128,128,128,.03));
    position: relative;
    transition: transform .12s ease;
}

.budget-group:hover[b-15yg0jr2eq] {
    transform: translateY(-1px);
}

.budget-group.budget-exhausted[b-15yg0jr2eq] {
    border-color: rgba(248, 81, 73, .35);
}

/* prečerpaná pätička (.budget-over-footer) je globálna (app.css) */

.budget-group.no-budget-group[b-15yg0jr2eq] {
    border-left: 3px solid var(--muted);
}

.budget-group-header[b-15yg0jr2eq] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
    padding: 11px 10px;
    min-height: 52px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--card-accent, transparent) 22%, transparent) var(--fill-pct, 0%),
        transparent var(--fill-pct, 0%)
    );
    transition: background .5s cubic-bezier(.4,0,.2,1);
}

.budget-group-header:hover[b-15yg0jr2eq] {
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--card-accent, transparent) 30%, transparent) var(--fill-pct, 0%),
        rgba(255,255,255,.03) var(--fill-pct, 0%)
    );
}


.bg-toggle[b-15yg0jr2eq] {
    font-size: .92rem;
    color: var(--muted);
    width: 10px;
    text-align: center;
    flex-shrink: 0;
}

.bg-icon-wrap[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.bg-main[b-15yg0jr2eq] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bg-name-row[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.bg-name[b-15yg0jr2eq] {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bg-amounts-row[b-15yg0jr2eq] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.bg-spent[b-15yg0jr2eq] {
    font-size: .95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.bg-spent.overspent[b-15yg0jr2eq] { color: #f85149; }

.bg-sep[b-15yg0jr2eq] {
    font-size: .92rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.bg-right[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.bg-pct-badge[b-15yg0jr2eq] {
    font-size: .88rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 20px;
    border: 1px solid transparent;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

.bg-pct-over[b-15yg0jr2eq] {
    background: rgba(248,81,73,.2) !important;
    color: #f88 !important;
    border-color: rgba(248,81,73,.4) !important;
}

.override-icon[b-15yg0jr2eq] {
    font-size: .95rem;
    flex-shrink: 0;
    line-height: 1;
}

.override-icon.icon-up[b-15yg0jr2eq] {
    color: #3fb950;
}

.override-icon.icon-down[b-15yg0jr2eq] {
    color: #f85149;
}

.budget-sub-items[b-15yg0jr2eq] {
    padding: 2px 6px 6px 12px;
    position: relative;
    z-index: 1;
}

.row-item.sub-item[b-15yg0jr2eq] {
    font-size: .95rem;
}

.empty-sub[b-15yg0jr2eq] {
    text-align: center;
    color: var(--muted);
    font-size: .92rem;
    padding: 4px 0;
    font-style: italic;
}

.budget-group.past-month[b-15yg0jr2eq] {
    opacity: .7;
}

.btn-add-budget[b-15yg0jr2eq] {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1;
    padding: 1px 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s;
}

.btn-add-budget:hover[b-15yg0jr2eq] {
    background: rgba(128,128,128,.12);
}

.btn-override-budget[b-15yg0jr2eq] {
    background: transparent;
    border: none;
    border-radius: 4px;
    font-size: .92rem;
    line-height: 1;
    padding: 1px 4px;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--text-muted, #888);
    transition: color .15s;
}

.btn-override-budget:hover[b-15yg0jr2eq] {
    color: var(--accent);
}

/* ── Pás ročných súhrnov nad sumárom ── */
.kpi-strip[b-15yg0jr2eq] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 12px 4px;
}

.kpi-card[b-15yg0jr2eq] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    transition: transform .15s ease;
}

.kpi-card:hover[b-15yg0jr2eq] {
    transform: translateY(-1px);
}

.kpi-card .kpi-icon[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    font-size: 1.15rem;
    flex-shrink: 0;
    background: rgba(128, 128, 128, .12);
}

.kpi-card .kpi-body[b-15yg0jr2eq] {
    min-width: 0;
}

.kpi-card .kpi-title[b-15yg0jr2eq] {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.kpi-card .kpi-value[b-15yg0jr2eq] {
    margin-top: 2px;
    font-size: 1.35rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.kpi-card .kpi-detail[b-15yg0jr2eq] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 4px;
    font-size: .82rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.kpi-card.primary[b-15yg0jr2eq] { background: var(--accent-subtle, rgba(88,166,255,.1)); }
.kpi-card.primary .kpi-icon[b-15yg0jr2eq]  { color: var(--accent, #58a6ff); }
.kpi-card.primary .kpi-value[b-15yg0jr2eq] { color: var(--accent, #58a6ff); }

.kpi-card.danger[b-15yg0jr2eq]  { background: var(--danger-subtle, rgba(248,81,73,.1)); }
.kpi-card.danger .kpi-icon[b-15yg0jr2eq]  { color: var(--danger, #f85149); }
.kpi-card.danger .kpi-value[b-15yg0jr2eq] { color: var(--danger, #f85149); }

.kpi-card.success[b-15yg0jr2eq] { background: var(--success-subtle, rgba(63,185,80,.1)); }
.kpi-card.success .kpi-icon[b-15yg0jr2eq]  { color: var(--success, #3fb950); }
.kpi-card.success .kpi-value[b-15yg0jr2eq] { color: var(--success, #3fb950); }

.kpi-card.accent[b-15yg0jr2eq]  { background: var(--pink-subtle, rgba(247,120,186,.1)); }
.kpi-card.accent .kpi-icon[b-15yg0jr2eq]  { color: var(--pink, #f778ba); }
.kpi-card.accent .kpi-value[b-15yg0jr2eq] { color: var(--pink, #f778ba); }

.kpi-card.neutral[b-15yg0jr2eq] { background: var(--teal-subtle, rgba(57,210,192,.1)); }
.kpi-card.neutral .kpi-icon[b-15yg0jr2eq]  { color: var(--teal, #39d2c0); }
.kpi-card.neutral .kpi-value[b-15yg0jr2eq] { color: var(--teal, #39d2c0); }

/* ── Days counter ── */
.days-counter[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-sm, 8px);
    background: rgba(139, 148, 158, .08);
    border: 1px solid var(--border);
    font-size: .92rem;
    font-weight: 600;
    color: var(--muted);
}

.days-counter .bi[b-15yg0jr2eq] {
    font-size: 1rem;
    color: var(--income);
}

/* ÔöÇÔöÇ Summary panel ÔöÇÔöÇ */
.summary[b-15yg0jr2eq] {
    padding: 0;
}

/* Sumár presunutý nad ročný graf - beží na celú šírku stránky namiesto úzkeho stĺpca v gride. */
.summary-wide[b-15yg0jr2eq] {
    margin: 18px 12px 0;
}

.summary-scroll[b-15yg0jr2eq] {
    overflow-x: auto;
    padding: 6px;
}

.summary-table[b-15yg0jr2eq] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    font-variant-numeric: tabular-nums;
}

.summary-table th[b-15yg0jr2eq] {
    font-size: .92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 6px 8px;
    text-align: right;
    color: var(--text);
    white-space: nowrap;
    opacity: .75;
}

.summary-table th:first-child[b-15yg0jr2eq] {
    text-align: left;
}

/* Na užšej obrazovke nesie tabuľka len tri hlavné stĺpce, zvyšok žije v rozbaliteľnom rozpise. */
.th-income[b-15yg0jr2eq]    { color: var(--income) !important; }
.th-outcome[b-15yg0jr2eq]   { color: var(--outcome) !important; }
.th-remainder[b-15yg0jr2eq] { color: var(--remainder) !important; }
.th-savings[b-15yg0jr2eq]   { color: var(--savings) !important; }
.th-backup[b-15yg0jr2eq]    { color: var(--backup) !important; }
.th-invest[b-15yg0jr2eq]    { color: var(--invest) !important; }

/* Doplnkové stĺpce sa zapínajú až na širokej obrazovke – dovtedy sú v rozpise pod riadkom. */
.summary-table .col-wide[b-15yg0jr2eq] {
    display: none;
}

.summary-table .mname[b-15yg0jr2eq] {
    text-align: left;
    color: var(--text);
    font-weight: 700;
    font-size: .97rem;
    padding: 6px 8px;
    white-space: nowrap;
}

.summary-table .cell[b-15yg0jr2eq] {
    text-align: right;
    padding: 6px 10px;
    border-radius: var(--radius-sm, 6px);
    font-size: .95rem;
    white-space: nowrap;
    min-width: 0;
    transition: background .15s ease;
    font-weight: 600;
}

.summary-table .cell:hover[b-15yg0jr2eq] {
    filter: brightness(1.3);
}

.summary-table .cell.income[b-15yg0jr2eq]  { background: rgba(88, 166, 255, .1); color: var(--income); }
.summary-table .cell.outcome[b-15yg0jr2eq] { background: rgba(188, 140, 255, .1); color: var(--outcome); }

/* ── Rozbaliteľný rozpis mesiaca ──
   Tabuľka nesie len tri hlavné čísla; zvyšok sa zobrazí až po kliknutí na riadok. */
.summary-hint[b-15yg0jr2eq] {
    margin: 0 0 6px;
    padding: 0 4px;
    font-size: .78rem;
    color: var(--text-muted);
}

.summary-row[b-15yg0jr2eq] {
    cursor: pointer;
}

.summary-row:hover .cell[b-15yg0jr2eq] {
    filter: brightness(1.25);
}

.summary-toggle[b-15yg0jr2eq] {
    display: inline-block;
    width: 12px;
    color: var(--text-muted);
    font-size: .8rem;
}

.summary-row.is-expanded .summary-toggle[b-15yg0jr2eq] {
    color: var(--accent);
}

.summary-detail-row td[b-15yg0jr2eq] {
    padding: 0 4px 8px;
}

.summary-detail[b-15yg0jr2eq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px);
    background: rgba(128, 128, 128, .06);
}

.detail-item[b-15yg0jr2eq] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.detail-label[b-15yg0jr2eq] {
    font-size: .74rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.detail-value[b-15yg0jr2eq] {
    font-size: .92rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.detail-value.remainder[b-15yg0jr2eq] { color: var(--remainder); }
.detail-value.outcome[b-15yg0jr2eq]   { color: var(--outcome); }
.detail-value.savings[b-15yg0jr2eq]   { color: var(--savings); }
.detail-value.backup[b-15yg0jr2eq]    { color: var(--backup); }
.detail-value.invest[b-15yg0jr2eq]    { color: var(--invest); }
.detail-value.rem-positive[b-15yg0jr2eq] { color: var(--savings); }
.detail-value.rem-negative[b-15yg0jr2eq] { color: var(--backup); }

/* ── Široká obrazovka: sumár sa nezbaľuje ──
   Miesta je dosť na celý rozpis, takže stĺpce nahradia rozbaľovanie riadku. */
@media (min-width: 900px) {
    .summary-table .col-wide[b-15yg0jr2eq] {
        display: table-cell;
    }

    /* Jedenásť stĺpcov sa musí zmestiť bez vodorovného posúvania. */
    .summary-table th[b-15yg0jr2eq],
    .summary-table .cell[b-15yg0jr2eq],
    .summary-table .mname[b-15yg0jr2eq] {
        padding: 5px 6px;
        font-size: .88rem;
    }

    .summary-table .cell.remainder[b-15yg0jr2eq]    { color: var(--remainder); }
    .summary-table .cell.rem-positive[b-15yg0jr2eq] { color: var(--savings); }
    .summary-table .cell.rem-negative[b-15yg0jr2eq] { color: var(--backup); }
    .summary-table .cell.savings[b-15yg0jr2eq]      { background: rgba(63, 185, 80, .1);  color: var(--savings); }
    .summary-table .cell.backup[b-15yg0jr2eq]       { background: rgba(248, 81, 73, .1);  color: var(--backup); }
    .summary-table .cell.invest[b-15yg0jr2eq]       { background: rgba(210, 168, 255, .1); color: var(--invest); }

    /* Rozbaľovanie by tu už nič nepridalo – riadok nie je klikací a rozpis sa nezobrazuje. */
    .summary-hint[b-15yg0jr2eq],
    .summary-toggle[b-15yg0jr2eq],
    .summary-detail-row[b-15yg0jr2eq] {
        display: none;
    }

    .summary-row[b-15yg0jr2eq] {
        cursor: default;
    }
}

.th-balance[b-15yg0jr2eq] { color: var(--income) !important; }
.th-balance-highlight[b-15yg0jr2eq] { font-size: .95rem; font-weight: 800; letter-spacing: .03em; border-bottom: 2px solid var(--savings); }
.summary-table .cell.balance[b-15yg0jr2eq] { background: rgba(88, 166, 255, .06); color: var(--income); font-weight: 700; }
.summary-table .cell.balance.bal-positive[b-15yg0jr2eq] { color: var(--savings); }
.summary-table .cell.balance.bal-negative[b-15yg0jr2eq] { color: var(--backup); }
.summary-table .cell.balance-highlight[b-15yg0jr2eq] { font-size: 1rem; font-weight: 800; border-left: 2px solid rgba(63, 185, 80, .35); border-right: 2px solid rgba(63, 185, 80, .35); background: rgba(63, 185, 80, .07); }
.summary-table .cell.balance-highlight.bal-negative[b-15yg0jr2eq] { border-left-color: rgba(248, 81, 73, .35); border-right-color: rgba(248, 81, 73, .35); background: rgba(248, 81, 73, .07); }

/* ÔöÇÔöÇ Chart ÔöÇÔöÇ */
.chart-wrap[b-15yg0jr2eq] {
    margin: 18px 12px 8px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    padding: 18px;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .35));
}

.chart-header[b-15yg0jr2eq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.chart-header h3[b-15yg0jr2eq] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.chart-legend[b-15yg0jr2eq] {
    display: flex;
    gap: 14px;
    font-size: .92rem;
    color: var(--muted);
    flex-wrap: wrap;
}

.legend-item[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.legend-dot[b-15yg0jr2eq] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.legend-dot.income[b-15yg0jr2eq]  { background: var(--income); }
.legend-dot.outcome[b-15yg0jr2eq] { background: var(--outcome); }
.legend-dot.savings[b-15yg0jr2eq] { background: var(--savings); }
.legend-dot.backup[b-15yg0jr2eq]  { background: var(--backup); }
.legend-dot.invest[b-15yg0jr2eq]  { background: var(--invest); }

.chart-body[b-15yg0jr2eq] {
    padding-top: 24px;
    width: 100%;
}

.year-chart[b-15yg0jr2eq] {
    display: block;
    width: 100%;
    height: auto;
}

.chart-grid[b-15yg0jr2eq] {
    stroke: var(--border);
    stroke-width: 1;
}

.chart-axis[b-15yg0jr2eq] {
    fill: var(--muted);
    font-size: 12px;
}

.chart-bar[b-15yg0jr2eq] {
    opacity: .9;
    transition: opacity .15s;
}

.chart-bar:hover[b-15yg0jr2eq] {
    opacity: 1;
}

.chart-bar.income[b-15yg0jr2eq]  { fill: var(--income); }
.chart-bar.savings[b-15yg0jr2eq] { fill: var(--savings); }
.chart-bar.backup[b-15yg0jr2eq]  { fill: var(--backup); }
.chart-bar.invest[b-15yg0jr2eq]  { fill: var(--invest); }

.chart-outcome-line[b-15yg0jr2eq] {
    fill: none;
    stroke: var(--outcome);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.chart-outcome-dot[b-15yg0jr2eq] {
    fill: var(--outcome);
}

.chart-month[b-15yg0jr2eq] {
    fill: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.chart-rem[b-15yg0jr2eq] {
    font-size: 12px;
    font-weight: 600;
}

.chart-rem.positive[b-15yg0jr2eq] { fill: var(--savings); }
.chart-rem.negative[b-15yg0jr2eq] { fill: var(--backup); }

/* ÔöÇÔöÇ Modal ÔöÇÔöÇ */
.modal-backdrop[b-15yg0jr2eq] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-card[b-15yg0jr2eq] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    width: 480px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
    animation: modalIn-b-15yg0jr2eq .2s ease;
}

@keyframes modalIn-b-15yg0jr2eq {
    from { opacity: 0; transform: scale(.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header[b-15yg0jr2eq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.modal-header h3[b-15yg0jr2eq] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.modal-close[b-15yg0jr2eq] {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background .15s;
}

.modal-close:hover[b-15yg0jr2eq] {
    background: rgba(128, 128, 128, .15);
    color: var(--text);
}

.modal-body[b-15yg0jr2eq] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ÔöÇÔöÇ Savings goal deadline rows ÔöÇÔöÇ */
.goal-deadline-row[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    margin: 2px 0;
    border-radius: 6px;
    background: rgba(248, 81, 73, 0.08);
    border-left: 3px solid #f85149;
    font-size: .92rem;
}

.goal-deadline-icon[b-15yg0jr2eq] {
    font-size: 1rem;
    flex-shrink: 0;
}

.goal-deadline-name[b-15yg0jr2eq] {
    flex: 1;
    font-weight: 500;
    color: var(--text);
}

.goal-deadline-date[b-15yg0jr2eq] {
    font-size: .88rem;
    color: var(--muted);
    flex-shrink: 0;
}

.goal-deadline-amount[b-15yg0jr2eq] {
    font-weight: 700;
    color: #f85149;
    flex-shrink: 0;
    white-space: nowrap;
}

.form-group[b-15yg0jr2eq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.form-group label[b-15yg0jr2eq] {
    font-size: .88rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.form-group input[b-15yg0jr2eq],
.form-group select[b-15yg0jr2eq] {
    background: var(--bg-surface, #161b22);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: .97rem;
    transition: border-color .15s;
}

.form-group input:focus[b-15yg0jr2eq],
.form-group select:focus[b-15yg0jr2eq] {
    outline: none;
    border-color: var(--accent, #58a6ff);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, .15);
}

.form-row[b-15yg0jr2eq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.modal-footer[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
}

.modal-spacer[b-15yg0jr2eq] {
    flex: 1;
}

.modal-footer .btn[b-15yg0jr2eq] {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, filter .15s;
}

.modal-footer .btn-primary[b-15yg0jr2eq] {
    background: var(--accent, #58a6ff);
    border: 1px solid var(--accent, #58a6ff);
    color: #fff;
}

.modal-footer .btn-primary:hover[b-15yg0jr2eq] {
    filter: brightness(1.15);
}

.modal-footer .btn-outline-secondary[b-15yg0jr2eq] {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.modal-footer .btn-outline-secondary:hover[b-15yg0jr2eq] {
    background: rgba(128, 128, 128, .1);
}

.modal-footer .btn-outline-danger[b-15yg0jr2eq] {
    background: transparent;
    border: 1px solid var(--backup);
    color: var(--backup);
}

.modal-footer .btn-outline-danger:hover[b-15yg0jr2eq] {
    background: rgba(248, 81, 73, .1);
}

.modal-card.confirm-card[b-15yg0jr2eq] {
    width: 420px;
    max-width: 92vw;
}

/* ÔöÇÔöÇ Responsive ÔöÇÔöÇ */
@media (max-width: 1500px) {
    .kpi-strip[b-15yg0jr2eq] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1200px) {
    .map-container[b-15yg0jr2eq] {
        grid-template-columns: 1fr;
    }

    /* V jednom stĺpci sú panely pod sebou – žiadnu spoločnú výšku nedorovnávajú,
       tak nech sa roluje celá stránka a nie každý zoznam zvlášť. */
    .month-list[b-15yg0jr2eq] {
        flex: none;
        min-height: 0;
        overflow-y: visible;
    }

    .purchased[b-15yg0jr2eq] { order: 2; }
}

@media (max-width: 768px) {
    .form-row[b-15yg0jr2eq] {
        grid-template-columns: 1fr;
    }

    .kpi-strip[b-15yg0jr2eq] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .panel > header.panel-head[b-15yg0jr2eq] {
        flex-wrap: wrap;
    }

    .panel-head-pill[b-15yg0jr2eq] {
        margin-left: auto;
    }
}

/* ÔöÇÔöÇ Past-month blocks (read-only) ÔöÇÔöÇ */
.past-month[b-15yg0jr2eq] {
    opacity: .7;
}

.past-month .month-title[b-15yg0jr2eq] {
    color: var(--muted);
}

.row-item.readonly[b-15yg0jr2eq] {
    cursor: default;
    opacity: .85;
}

/* ÔöÇÔöÇ Current-month block highlight ÔöÇÔöÇ */
.current-month[b-15yg0jr2eq] {
    border-left: 3px solid var(--accent, #58a6ff);
    border-radius: 6px;
    background: rgba(88, 166, 255, .05);
}

.current-month .month-title[b-15yg0jr2eq] {
    color: var(--accent, #58a6ff);
    font-weight: 700;
}

.current-month .month-title[b-15yg0jr2eq]::after {
    content: " ÔŚĆ";
    font-size: .82rem;
    vertical-align: middle;
    opacity: .8;
}


/* ══ Pohyb ═════════════════════════════════════════════════════════════════
   Mapa mesiaca je najhustejšia obrazovka aplikácie: bloky mesiacov, v nich skupiny
   rozpočtov, ciele, graf a súhrnná tabuľka. Nábeh preto dostávajú len bloky mesiacov
   ako celok — keby sa animovala každá podpoložka, stránka by sa po otvorení ustaľovala
   niekoľko sekúnd. Vnútri blokov zostáva pohyb len na tom, čoho sa dá dotknúť. */
.month-block[b-15yg0jr2eq] {
    animation: bm-rise var(--motion-base) var(--ease-out) backwards;
}

.month-list > *:nth-child(1)[b-15yg0jr2eq] { animation-delay: 0ms; }
.month-list > *:nth-child(2)[b-15yg0jr2eq] { animation-delay: var(--stagger-step); }
.month-list > *:nth-child(n+3)[b-15yg0jr2eq] { animation-delay: calc(var(--stagger-step) * 2); }

/* ── Skupiny rozpočtov ── */
.budget-group[b-15yg0jr2eq] {
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

.budget-group-header[b-15yg0jr2eq],
.bg-toggle[b-15yg0jr2eq] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.bg-icon-wrap[b-15yg0jr2eq] {
    transition: transform var(--motion-base) var(--ease-spring);
}

.budget-group-header:hover .bg-icon-wrap[b-15yg0jr2eq] {
    transform: scale(1.12);
}

/* Rozbalené podpoložky sa vysunú zhora — patria k riadku, ktorý ich otvoril. */
.budget-sub-items[b-15yg0jr2eq] {
    animation: bm-unfold var(--motion-base) var(--ease-out) both;
}

.row-item[b-15yg0jr2eq] {
    transition: background-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.row-item:hover[b-15yg0jr2eq] {
    transform: translateX(3px);
}

.bg-pct-badge[b-15yg0jr2eq],
.goal-mini-badge[b-15yg0jr2eq],
.virtual-badge[b-15yg0jr2eq],
.budget-tag[b-15yg0jr2eq],

/* ── Sporiace ciele v bloku ── */
.goal-mini-item[b-15yg0jr2eq] {
    transition: background-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.goal-mini-item:hover[b-15yg0jr2eq] {
    transform: translateX(3px);
}

.goal-mini-bar-fill[b-15yg0jr2eq] {
    transition: width var(--motion-slow) var(--ease-out), background-color var(--motion-base) var(--ease-out);
}

.goal-mini-icon[b-15yg0jr2eq] {
    transition: transform var(--motion-base) var(--ease-spring);
}

.goal-mini-item:hover .goal-mini-icon[b-15yg0jr2eq] {
    transform: scale(1.12);
}

/* ── Ročný graf ──
   Bez rastu stĺpcov: graf sedí v bloku mesiaca, ktorý sa už objavuje sám.
   Zostáva zosvetlenie stĺpca pod kurzorom. */
.chart-bar[b-15yg0jr2eq] {
    transition: filter var(--motion-fast) var(--ease-out);
}

.chart-month[b-15yg0jr2eq] {
    transition: background-color var(--motion-fast) var(--ease-out);
}

.chart-month:hover .chart-bar[b-15yg0jr2eq] {
    filter: brightness(1.2);
}

/* ── Ovládanie ── */
.switcher-btn[b-15yg0jr2eq],
.collapse-toggle-btn[b-15yg0jr2eq],
.summary-toggle[b-15yg0jr2eq],
.past-lock-btn[b-15yg0jr2eq],
.btn-add-budget[b-15yg0jr2eq],
.btn-override-budget[b-15yg0jr2eq] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.switcher-btn:active[b-15yg0jr2eq],
.collapse-toggle-btn:active[b-15yg0jr2eq],
.summary-toggle:active[b-15yg0jr2eq],
.past-lock-btn:active[b-15yg0jr2eq] {
    transform: scale(.94);
    transition-duration: var(--motion-press);
}

.summary-detail-row[b-15yg0jr2eq] {
    animation: bm-unfold var(--motion-fast) var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
    .month-block[b-15yg0jr2eq],
    .budget-sub-items[b-15yg0jr2eq],
    .summary-detail-row[b-15yg0jr2eq] {
        animation: none;
    }

    .budget-group-header:hover .bg-icon-wrap[b-15yg0jr2eq],
    .row-item:hover[b-15yg0jr2eq],
    .goal-mini-item:hover[b-15yg0jr2eq],
    .goal-mini-item:hover .goal-mini-icon[b-15yg0jr2eq],
    .switcher-btn:active[b-15yg0jr2eq],
    .collapse-toggle-btn:active[b-15yg0jr2eq],
    .summary-toggle:active[b-15yg0jr2eq],
    .past-lock-btn:active[b-15yg0jr2eq] {
        transform: none;
    }
}

/* Formulárové modálne okno je širšie a polia sú v dvoch stĺpcoch,
   aby sa využilo miesto do šírky a nemuselo sa scrollovať hore-dole. */
.modal-card.wide-card[b-15yg0jr2eq] {
    width: min(760px, 95vw);
}

@media (min-width: 720px) {
    .wide-card .modal-body[b-15yg0jr2eq] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 18px;
        align-items: start;
    }

    /* Riadok s dvoma poľami sa rozpustí do spoločnej mriežky. */
    .wide-card .modal-body .form-row[b-15yg0jr2eq] {
        display: contents;
    }
}

/* ── Interval opakovania (číslo + jednotka na jednom riadku) ── */
.recurrence-interval[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.recurrence-interval input[b-15yg0jr2eq] {
    width: 5rem;
}

.recurrence-unit[b-15yg0jr2eq] {
    font-size: .92rem;
    color: var(--text-muted);
}

/* Podrozpocet patri pod predchadzajucu skupinu, preto sa odsadi a stlmi. */
.budget-group-sub[b-15yg0jr2eq] {
    margin-left: 16px;
    border-left: 2px solid var(--card-accent, rgba(128,128,128,.4));
}

.budget-group-sub .bg-name[b-15yg0jr2eq] {
    font-size: .94em;
}
/* /Components/Pages/Projection.razor.rz.scp.css */
/* ===== Projekcia výdavkov do budúcich mesiacov ===== */
.projection-page[b-lpcytkpiky] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 1.5rem 1rem 2.5rem;
}

/* ----- Hlavička ----- */
.projection-header[b-lpcytkpiky] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.projection-title[b-lpcytkpiky] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.projection-title .bi[b-lpcytkpiky] {
    color: var(--accent);
    font-size: 1.35rem;
}

.projection-subtitle[b-lpcytkpiky] {
    margin: .35rem 0 0;
    color: var(--text-secondary);
    font-size: .92rem;
}

.projection-header-actions[b-lpcytkpiky] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
}

.projection-range[b-lpcytkpiky] {
    display: flex;
    gap: .4rem;
}

.range-button[b-lpcytkpiky] {
    padding: .45rem .9rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
}

.range-button:hover[b-lpcytkpiky] {
    border-color: var(--brand-line);
    color: var(--text-primary);
}

.range-button.is-active[b-lpcytkpiky] {
    background: var(--accent-subtle);
    border-color: var(--brand-line);
    color: var(--text-primary);
}

.projection-note[b-lpcytkpiky] {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

/* ----- Mriežka mesiacov ----- */
.month-grid[b-lpcytkpiky] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: 1rem;
    align-items: start;
}

.month-card[b-lpcytkpiky] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* Mesiac, na ktorý príjem nestačí, má byť vidieť už pri prelietnutí stránky. */
.month-card.is-underfunded[b-lpcytkpiky] {
    border-left: 3px solid var(--danger);
}

.month-card.is-covered[b-lpcytkpiky] {
    border-left: 3px solid var(--success);
}

.month-card-header[b-lpcytkpiky] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}

.month-name[b-lpcytkpiky] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: capitalize;
}

.month-state[b-lpcytkpiky] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .84rem;
    font-weight: 600;
}

.is-underfunded .month-state[b-lpcytkpiky] {
    color: var(--danger);
}

.is-covered .month-state[b-lpcytkpiky] {
    color: var(--success);
}

.month-prepare[b-lpcytkpiky] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.prepare-label[b-lpcytkpiky] {
    color: var(--text-secondary);
    font-size: .86rem;
}

.prepare-value[b-lpcytkpiky] {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--outcome);
    font-variant-numeric: tabular-nums;
}

.month-lines[b-lpcytkpiky] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.month-line[b-lpcytkpiky] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    font-size: .9rem;
}

.line-label[b-lpcytkpiky] {
    color: var(--text-secondary);
}

.line-value[b-lpcytkpiky] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.line-value--income[b-lpcytkpiky] {
    color: var(--income);
}

.line-value--missing[b-lpcytkpiky] {
    color: var(--danger);
}

.month-line--note .line-label[b-lpcytkpiky] {
    color: var(--text-muted);
    font-size: .82rem;
}

.month-line--difference[b-lpcytkpiky] {
    padding-top: .35rem;
    border-top: 1px dashed var(--border-subtle);
}

/* ----- Akcie ----- */
.month-actions[b-lpcytkpiky] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.action-button[b-lpcytkpiky] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

.action-button:hover:not(:disabled)[b-lpcytkpiky] {
    border-color: var(--brand-line);
}

.action-button:disabled[b-lpcytkpiky] {
    opacity: .55;
    cursor: default;
}

.action-button--primary[b-lpcytkpiky] {
    background: var(--accent-subtle);
    border-color: var(--brand-line);
}

.action-button--quiet[b-lpcytkpiky] {
    margin-left: auto;
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}

/* ----- Úprava príjmu ----- */
.income-editor[b-lpcytkpiky] {
    padding: .75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.income-label[b-lpcytkpiky] {
    display: block;
    margin-bottom: .35rem;
    color: var(--text-secondary);
    font-size: .84rem;
}

.income-row[b-lpcytkpiky] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.income-input[b-lpcytkpiky] {
    flex: 1 1 8rem;
    min-width: 0;
    padding: .4rem .6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.income-hint[b-lpcytkpiky] {
    margin: .5rem 0 0;
    color: var(--text-muted);
    font-size: .8rem;
}

/* ----- Rozpis výdavkov ----- */
.month-detail[b-lpcytkpiky] {
    padding-top: .5rem;
    border-top: 1px solid var(--border-subtle);
}

.detail-header[b-lpcytkpiky] {
    margin-bottom: .5rem;
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.detail-row[b-lpcytkpiky] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem 0;
    border-bottom: 1px dashed var(--border-subtle);
}

.detail-row:last-child[b-lpcytkpiky] {
    border-bottom: none;
}

.detail-icon[b-lpcytkpiky] {
    font-size: 1.05rem;
    line-height: 1;
}

.detail-body[b-lpcytkpiky] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.detail-name[b-lpcytkpiky] {
    color: var(--text-primary);
    font-size: .9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-note[b-lpcytkpiky] {
    color: var(--text-muted);
    font-size: .78rem;
}

.detail-flag[b-lpcytkpiky] {
    color: var(--warning);
}

.detail-value[b-lpcytkpiky] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

@media (max-width: 600px) {
    .month-grid[b-lpcytkpiky] {
        grid-template-columns: 1fr;
    }

    .action-button--quiet[b-lpcytkpiky] {
        margin-left: 0;
    }
}
/* /Components/Pages/SavingsGoals.razor.rz.scp.css */
/* ── Theme variables ── */
.savings-goals[b-2h2i0tapzx] {
    --panel: var(--bg-card);
    --border: var(--border-color);
    --text: var(--text-primary);
    --muted: var(--text-secondary);
}

.savings-goals .btn-primary[b-2h2i0tapzx],
.savings-goals .btn-primary:hover[b-2h2i0tapzx],
.savings-goals .btn-primary:focus[b-2h2i0tapzx] {
    color: #ffffff !important;
}

/* ── KPI row ── */
.savings-kpi[b-2h2i0tapzx] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.kpi-card[b-2h2i0tapzx] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 160px;
    flex: 1;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.35));
}

.kpi-label[b-2h2i0tapzx] {
    font-size: .92rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.kpi-value[b-2h2i0tapzx] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
}

.kpi-value.accent[b-2h2i0tapzx] {
    color: #3fb950;
}

.kpi-value.warning[b-2h2i0tapzx] {
    color: #d29922;
}

/* ── Empty state ── */
.empty-state[b-2h2i0tapzx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--muted);
    text-align: center;
}

/* ── Goals list ── */
.goals-list[b-2h2i0tapzx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Goal card ── */
.goal-card[b-2h2i0tapzx] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.35));
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

.goal-card.drag-over[b-2h2i0tapzx] {
    border-color: var(--goal-color, #58a6ff);
    box-shadow: 0 0 0 2px var(--goal-color, #58a6ff);
}

.goal-card.dragging[b-2h2i0tapzx] {
    opacity: .5;
    transform: scale(.97);
}

.goal-accent[b-2h2i0tapzx] {
    height: 3px;
}

.goal-body[b-2h2i0tapzx] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background .15s;
}

.goal-body:hover[b-2h2i0tapzx] {
    background: rgba(88, 166, 255, .04);
}

/* ── Priority ── */
.goal-priority[b-2h2i0tapzx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 30px;
}

.prio-btn[b-2h2i0tapzx] {
    background: none;
    border: none;
    color: var(--muted);
    font-size: .88rem;
    cursor: pointer;
    padding: 1px 4px;
    line-height: 1;
    border-radius: 4px;
    transition: color .15s, background .15s;
}

.prio-btn:hover:not(:disabled)[b-2h2i0tapzx] {
    color: var(--text);
    background: rgba(128,128,128,.15);
}

.prio-btn:disabled[b-2h2i0tapzx] {
    opacity: .25;
    cursor: default;
}

.prio-number[b-2h2i0tapzx] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--muted);
    line-height: 1;
}

/* ── Icon ── */
.goal-icon-wrap[b-2h2i0tapzx] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* ── Info ── */
.goal-info[b-2h2i0tapzx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.goal-name[b-2h2i0tapzx] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goal-desc[b-2h2i0tapzx] {
    font-size: .92rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goal-amounts[b-2h2i0tapzx] {
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.goal-amounts .saved[b-2h2i0tapzx] {
    font-weight: 700;
    color: #3fb950;
}

.goal-amounts .separator[b-2h2i0tapzx] {
    color: var(--muted);
}

.goal-amounts .target[b-2h2i0tapzx] {
    color: var(--muted);
    font-weight: 600;
}

/* ── Progress bar ── */
.goal-bar-track[b-2h2i0tapzx] {
    height: 6px;
    background: rgba(128,128,128,.15);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 2px;
}

.goal-bar-fill[b-2h2i0tapzx] {
    height: 100%;
    border-radius: 3px;
    transition: width .4s ease;
}

.goal-bar-fill.bar-complete[b-2h2i0tapzx] {
    filter: brightness(1.2);
}

.goal-bar-fill.bar-good[b-2h2i0tapzx] {
    filter: brightness(1.05);
}

/* ── Projection ── */
.goal-projection[b-2h2i0tapzx] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    min-width: 130px;
    flex-shrink: 0;
}

.proj-date[b-2h2i0tapzx] {
    font-weight: 700;
    font-size: .97rem;
    color: #58a6ff;
    text-transform: capitalize;
}

.proj-months[b-2h2i0tapzx] {
    font-size: .92rem;
    color: var(--muted);
}

.proj-deadline[b-2h2i0tapzx] {
    font-size: .88rem;
    color: var(--muted);
}

.proj-days[b-2h2i0tapzx] {
    font-size: .88rem;
    font-weight: 600;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.proj-days.urgent[b-2h2i0tapzx] {
    color: #d29922;
}

.proj-days.overdue[b-2h2i0tapzx] {
    color: #f85149;
}

.proj-days.done[b-2h2i0tapzx] {
    color: #3fb950;
}

.proj-postpone[b-2h2i0tapzx] {
    font-size: .88rem;
    font-weight: 700;
    color: #d29922;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.proj-badge[b-2h2i0tapzx] {
    font-size: .88rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.proj-badge.complete[b-2h2i0tapzx] {
    background: rgba(63, 185, 80, .15);
    color: #3fb950;
}

.proj-badge.ontime[b-2h2i0tapzx] {
    background: rgba(63, 185, 80, .12);
    color: #3fb950;
}

.proj-badge.late[b-2h2i0tapzx] {
    background: rgba(248, 81, 73, .12);
    color: #f85149;
}

.proj-badge.unknown[b-2h2i0tapzx] {
    background: rgba(210, 153, 34, .12);
    color: #d29922;
}

/* ── Delete button ── */
.goal-delete[b-2h2i0tapzx] {
    flex-shrink: 0;
    margin-left: 4px;
}

/* ── Modal (consistent with CashHoldings / MonthlyMap) ── */
.modal-backdrop[b-2h2i0tapzx] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-card[b-2h2i0tapzx] {
    background: var(--panel, #161b22);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    width: 480px;
    max-width: 95vw;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-2h2i0tapzx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.modal-header h3[b-2h2i0tapzx] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.modal-close[b-2h2i0tapzx] {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1.3rem;
    cursor: pointer;
    line-height: 1;
}

.modal-body[b-2h2i0tapzx] {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-group[b-2h2i0tapzx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label[b-2h2i0tapzx] {
    font-size: .95rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.form-group input[b-2h2i0tapzx],
.form-group select[b-2h2i0tapzx] {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.04);
    color: var(--text);
    font-size: 1rem;
}

.form-row[b-2h2i0tapzx] {
    display: flex;
    gap: 12px;
}

.form-row .form-group[b-2h2i0tapzx] {
    flex: 1;
}

.color-row[b-2h2i0tapzx] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-row input[type="color"][b-2h2i0tapzx] {
    width: 36px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

/* ── Icon picker ── */
.icon-picker[b-2h2i0tapzx] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.icon-option[b-2h2i0tapzx] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all .15s;
}

.icon-option:hover[b-2h2i0tapzx] {
    border-color: var(--text);
    color: var(--text);
}

.icon-option.selected[b-2h2i0tapzx] {
    border-width: 2px;
}

.modal-footer[b-2h2i0tapzx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
}

.modal-spacer[b-2h2i0tapzx] {
    flex: 1;
}

.confirm-card[b-2h2i0tapzx] {
    width: 380px;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .savings-kpi[b-2h2i0tapzx] {
        flex-direction: column;
    }

    .goal-body[b-2h2i0tapzx] {
        flex-wrap: wrap;
        gap: 10px;
    }

    .goal-projection[b-2h2i0tapzx] {
        align-items: flex-start;
        min-width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .form-row[b-2h2i0tapzx] {
        flex-direction: column;
    }
}

/* ══ Pohyb ═════════════════════════════════════════════════════════════════
   Sporiace ciele sú zoznam kariet s ukazovateľom naplnenia. Ten je tu dôležitejší
   než inde: je to jediné miesto, kde používateľ sleduje pomalý postup k cieľu,
   takže po vklade musí byť pohyb pruhu naozaj vidieť. */
.goal-card[b-2h2i0tapzx] {
    transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
    animation: bm-rise var(--motion-base) var(--ease-out) backwards;
}

.goals-list > *:nth-child(1)[b-2h2i0tapzx] { animation-delay: 0ms; }
.goals-list > *:nth-child(2)[b-2h2i0tapzx] { animation-delay: var(--stagger-step); }
.goals-list > *:nth-child(3)[b-2h2i0tapzx] { animation-delay: calc(var(--stagger-step) * 2); }
.goals-list > *:nth-child(4)[b-2h2i0tapzx] { animation-delay: calc(var(--stagger-step) * 3); }
.goals-list > *:nth-child(n+5)[b-2h2i0tapzx] { animation-delay: calc(var(--stagger-step) * 4); }

.goal-card:hover[b-2h2i0tapzx] {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.goal-icon-wrap[b-2h2i0tapzx] {
    transition: transform var(--motion-base) var(--ease-spring);
}

.goal-card:hover .goal-icon-wrap[b-2h2i0tapzx] {
    transform: scale(1.12) rotate(-4deg);
}

.goal-bar-fill[b-2h2i0tapzx] {
    transition: width var(--motion-slow) var(--ease-out), background-color var(--motion-base) var(--ease-out);
}

.proj-badge[b-2h2i0tapzx],
.goal-priority[b-2h2i0tapzx],
.proj-postpone[b-2h2i0tapzx] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.proj-badge:hover[b-2h2i0tapzx] {
    transform: translateY(-1px);
}

/* Mazanie sa ukáže až pri dotyku karty — trvalá krížikom posiata obrazovka
   zbytočne priťahuje pozornosť k tomu najnebezpečnejšiemu tlačidlu. */
.goal-delete[b-2h2i0tapzx] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.goal-delete:hover[b-2h2i0tapzx] {
    transform: scale(1.12);
}

.prio-btn[b-2h2i0tapzx],
.icon-option[b-2h2i0tapzx] {
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.icon-option:hover[b-2h2i0tapzx] {
    transform: scale(1.15);
}

.prio-btn:active[b-2h2i0tapzx],
.icon-option:active[b-2h2i0tapzx] {
    transform: scale(.9);
    transition-duration: var(--motion-press);
}

@media (prefers-reduced-motion: reduce) {
    .goal-card[b-2h2i0tapzx] {
        animation: none;
    }

    .goal-card:hover[b-2h2i0tapzx],
    .goal-card:hover .goal-icon-wrap[b-2h2i0tapzx],
    .proj-badge:hover[b-2h2i0tapzx],
    .goal-delete:hover[b-2h2i0tapzx],
    .icon-option:hover[b-2h2i0tapzx],
    .prio-btn:active[b-2h2i0tapzx],
    .icon-option:active[b-2h2i0tapzx] {
        transform: none;
    }
}
/* /Components/Pages/ShoppingList.razor.rz.scp.css */
.shopping-list[b-03wgbc0e3j] {
    padding: 0 0 24px 0;
}

.list-panel[b-03wgbc0e3j] {
    margin: 0 12px;
    background: var(--card-bg, #161b22);
    border: 1px solid var(--border, #30363d);
    border-radius: 12px;
    padding: 16px;
}

/* ── Rýchle pridávanie ── */

.quick-add[b-03wgbc0e3j] {
    display: flex;
    gap: 8px;
}

.quick-add-input[b-03wgbc0e3j] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    font-size: 1rem;
    color: var(--text-primary, #e6edf3);
    background: var(--input-bg, #0d1117);
    border: 1px solid var(--border, #30363d);
    border-radius: 8px;
}

.quick-add-input:focus[b-03wgbc0e3j] {
    outline: none;
    border-color: var(--accent, #58a6ff);
}

.list-error[b-03wgbc0e3j] {
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 0.875rem;
    color: var(--danger, #f85149);
    background: color-mix(in srgb, var(--danger, #f85149) 12%, transparent);
    border-radius: 8px;
}

/* ── Súhrn ── */

.list-summary[b-03wgbc0e3j] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.summary-chip[b-03wgbc0e3j] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px;
    font-size: 0.8125rem;
    background: var(--input-bg, #0d1117);
    border: 1px solid var(--border, #30363d);
    border-radius: 999px;
}

.chip-label[b-03wgbc0e3j] {
    color: var(--text-secondary, #8b949e);
}

.chip-value[b-03wgbc0e3j] {
    font-weight: 600;
    color: var(--text-primary, #e6edf3);
}

/* ── Hľadanie a prepínače ── */

.list-tools[b-03wgbc0e3j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border, #30363d);
}

.search-input[b-03wgbc0e3j] {
    flex: 1 1 200px;
    min-width: 0;
    padding: 6px 10px;
    font-size: 0.875rem;
    color: var(--text-primary, #e6edf3);
    background: var(--input-bg, #0d1117);
    border: 1px solid var(--border, #30363d);
    border-radius: 8px;
}

.tool-toggle[b-03wgbc0e3j] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--text-secondary, #8b949e);
    cursor: pointer;
}

/* ── Riadky zoznamu ── */

.item-rows[b-03wgbc0e3j] {
    display: flex;
    flex-direction: column;
}

.item-row[b-03wgbc0e3j] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border, #30363d);
}

.item-row:last-child[b-03wgbc0e3j] {
    border-bottom: none;
}

.item-row--purchased .item-name[b-03wgbc0e3j] {
    color: var(--text-secondary, #8b949e);
    text-decoration: line-through;
}

.item-check[b-03wgbc0e3j] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.item-main[b-03wgbc0e3j] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}

.item-name[b-03wgbc0e3j] {
    overflow: hidden;
    color: var(--text-primary, #e6edf3);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-quantity[b-03wgbc0e3j],
.item-badge[b-03wgbc0e3j] {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    color: var(--text-secondary, #8b949e);
}

.item-price[b-03wgbc0e3j] {
    flex: 0 0 auto;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary, #8b949e);
}

.item-action[b-03wgbc0e3j] {
    flex: 0 0 auto;
    padding: 4px 6px;
    color: var(--text-secondary, #8b949e);
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.item-action:hover:not(:disabled)[b-03wgbc0e3j] {
    color: var(--accent, #58a6ff);
    background: var(--input-bg, #0d1117);
}

.item-action:disabled[b-03wgbc0e3j] {
    opacity: 0.35;
    cursor: default;
}

.item-action--danger:hover:not(:disabled)[b-03wgbc0e3j] {
    color: var(--danger, #f85149);
}

.load-more[b-03wgbc0e3j] {
    width: 100%;
    margin-top: 12px;
}

.empty-state[b-03wgbc0e3j] {
    padding: 32px 12px;
    text-align: center;
}

.empty-state p[b-03wgbc0e3j] {
    margin: 12px 0 0 0;
    color: var(--text-secondary, #8b949e);
}

/* ── Modálne okná ── */

.modal-backdrop[b-03wgbc0e3j] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.6);
}

.modal-card[b-03wgbc0e3j] {
    width: 100%;
    max-width: 460px;
    background: var(--card-bg, #161b22);
    border: 1px solid var(--border, #30363d);
    border-radius: 12px;
}

.modal-header[b-03wgbc0e3j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border, #30363d);
}

.modal-header h3[b-03wgbc0e3j] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
}

.modal-close[b-03wgbc0e3j] {
    font-size: 1.25rem;
    line-height: 1;
    color: var(--text-secondary, #8b949e);
    background: none;
    border: none;
    cursor: pointer;
}

.modal-body[b-03wgbc0e3j] {
    padding: 16px;
}

.modal-footer[b-03wgbc0e3j] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border, #30363d);
}

.modal-spacer[b-03wgbc0e3j] {
    flex: 1 1 auto;
}

.promote-hint[b-03wgbc0e3j] {
    margin: 0 0 12px 0;
    font-size: 0.875rem;
    color: var(--text-secondary, #8b949e);
}

.form-group[b-03wgbc0e3j] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.form-group label[b-03wgbc0e3j] {
    font-size: 0.8125rem;
    color: var(--text-secondary, #8b949e);
}

.form-group input[b-03wgbc0e3j],
.form-group select[b-03wgbc0e3j] {
    padding: 8px 10px;
    color: var(--text-primary, #e6edf3);
    background: var(--input-bg, #0d1117);
    border: 1px solid var(--border, #30363d);
    border-radius: 8px;
}

.form-group input:disabled[b-03wgbc0e3j] {
    color: var(--text-secondary, #8b949e);
}

.form-row[b-03wgbc0e3j] {
    display: flex;
    gap: 12px;
}

@media (max-width: 480px) {
    .form-row[b-03wgbc0e3j] {
        flex-direction: column;
        gap: 0;
    }
}
/* /Components/Pages/Transactions.razor.rz.scp.css */
/* ── Transactions page ── */
.transactions-page[b-jvo3q62p2j] {
    padding: 0 16px 2rem;
}

/* ── Two-column layout: main + sidebar ── */
.tx-layout[b-jvo3q62p2j] {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 16px;
    align-items: start;
}

.tx-main[b-jvo3q62p2j] {
    min-width: 0;
}

.page-header[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 12px;
}

.page-header h1[b-jvo3q62p2j] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.btn-add[b-jvo3q62p2j] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: none;
    border-radius: var(--radius-sm, 6px);
    background: var(--accent);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}

.btn-add:hover[b-jvo3q62p2j] {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

/* ── Filter bar ── */
.filter-bar[b-jvo3q62p2j] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    box-shadow: var(--shadow-sm);
}

.filter-group[b-jvo3q62p2j] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-group label[b-jvo3q62p2j] {
    font-size: .92rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    font-weight: 600;
}

.filter-group select[b-jvo3q62p2j],
.filter-group input[type="text"][b-jvo3q62p2j] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--radius-sm, 6px);
    padding: 6px 10px;
    font-size: .97rem;
    min-width: 140px;
}

/* ── Period picker (rovnaký vzhľad ako v štatistikách rozpočtov) ── */
.period-picker[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.month-nav[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
}

.month-nav-btn[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.month-nav-btn:hover[b-jvo3q62p2j] {
    background: var(--nav-hover-bg);
    color: var(--accent);
}

/* Klik na názov obdobia skočí na aktuálny mesiac – nahrádza samostatné tlačidlo „Dnes“. */
.month-nav-label[b-jvo3q62p2j] {
    min-width: 140px;
    padding: 4px 8px;
    text-align: center;
    font-size: .97rem;
    font-weight: 700;
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.month-nav-label:hover[b-jvo3q62p2j] {
    background: var(--nav-hover-bg);
    color: var(--accent);
}

/* Vyčistené obdobie – text je stlmený, aby bolo vidieť, že filter neplatí. */
.month-nav-label-all[b-jvo3q62p2j] {
    color: var(--text-muted);
    font-style: italic;
}

.month-today-btn[b-jvo3q62p2j] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.month-today-btn:hover[b-jvo3q62p2j] {
    border-color: var(--accent);
    color: var(--accent);
}

.month-today-btn.active[b-jvo3q62p2j] {
    background: var(--accent-subtle);
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Filter rozpočtov (viacnásobný výber s farbami a ikonami) ── */
.budget-filter[b-jvo3q62p2j] {
    position: relative;
}

.budget-filter-toggle[b-jvo3q62p2j] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 170px;
    height: 34px;
    padding: 0 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    color: var(--text-primary);
    font-size: .97rem;
    cursor: pointer;
    transition: border-color .15s ease;
}

.budget-filter-toggle:hover[b-jvo3q62p2j] {
    border-color: var(--accent);
}

.budget-filter-toggle.active[b-jvo3q62p2j] {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.budget-filter-text[b-jvo3q62p2j] {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.budget-filter-caret[b-jvo3q62p2j] {
    font-size: .8rem;
    color: var(--text-muted);
}

.budget-filter-dot[b-jvo3q62p2j] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.budget-filter-emoji[b-jvo3q62p2j] {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Priehľadná vrstva pod ponukou – klik kdekoľvek mimo nej ponuku zavrie. */
.budget-filter-backdrop[b-jvo3q62p2j] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.budget-filter-menu[b-jvo3q62p2j] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 41;
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

.budget-filter-item[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm, 6px);
    color: var(--text-primary);
    font-size: .95rem;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease;
}

.budget-filter-item:hover[b-jvo3q62p2j] {
    background: var(--nav-hover-bg);
}

.budget-filter-item.checked[b-jvo3q62p2j] {
    background: var(--accent-subtle);
}

.budget-filter-check[b-jvo3q62p2j] {
    font-size: .95rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.budget-filter-item.checked .budget-filter-check[b-jvo3q62p2j] {
    color: var(--accent);
}

.budget-filter-name[b-jvo3q62p2j] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.budget-filter-separator[b-jvo3q62p2j] {
    height: 1px;
    margin: 4px 6px;
    background: var(--border-color);
}

/* ── Rozsah štatistík: do dnes / aj budúcnosť ── */
.scope-switch[b-jvo3q62p2j] {
    display: inline-flex;
    padding: 2px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
}

.scope-option[b-jvo3q62p2j] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm, 6px);
    color: var(--text-muted);
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.scope-option:hover[b-jvo3q62p2j] {
    color: var(--accent);
}

/* Zvýraznená je tá možnosť, ktorá práve platí – nie tá, na ktorú sa dá prepnúť. */
.scope-option.active[b-jvo3q62p2j] {
    background: var(--accent-subtle);
    color: var(--accent);
}

.sidebar-month[b-jvo3q62p2j] {
    margin-left: auto;
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-muted);
}

.filter-stats[b-jvo3q62p2j] {
    margin-left: auto;
    display: flex;
    gap: 16px;
}

.filter-stats .stat[b-jvo3q62p2j] {
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.income-stat[b-jvo3q62p2j] { color: var(--success); }
.outcome-stat[b-jvo3q62p2j] { color: var(--danger); }

/* ── Grid layout ── */
.tx-grid[b-jvo3q62p2j] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.tx-grid-header[b-jvo3q62p2j] {
    display: grid;
    grid-template-columns: 32px 28px 50px 0.7fr 0.8fr 100px 1.5fr 1fr 90px;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(128,128,128,.06);
    border-bottom: 1px solid var(--border-color);
    font-size: .92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}

.tx-row[b-jvo3q62p2j] {
    display: grid;
    grid-template-columns: 32px 28px 50px 0.7fr 0.8fr 100px 1.5fr 1fr 90px;
    gap: 8px;
    padding: 10px 16px;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle, var(--border-color));
    transition: background .12s ease;
}

/* Pending section uses fewer columns (no drag, recurrence, budget) */
.pending-section .tx-grid-header[b-jvo3q62p2j],
.pending-section .tx-row[b-jvo3q62p2j] {
    grid-template-columns: 50px 1.2fr 0.8fr 100px 120px;
}

.tx-row:last-child[b-jvo3q62p2j] {
    border-bottom: none;
}

.tx-row:hover[b-jvo3q62p2j] {
    background: rgba(128,128,128,.04);
}

/* ── Drag handle ── */
.col-drag[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.drag-handle[b-jvo3q62p2j] {
    font-size: 1rem;
    color: var(--text-muted, #8b949e);
    opacity: .35;
    transition: opacity .15s, color .15s;
    cursor: grab;
}

.tx-row:hover .drag-handle[b-jvo3q62p2j] {
    opacity: .7;
    color: var(--text-secondary, #c9d1d9);
}

.tx-row:active .drag-handle[b-jvo3q62p2j] {
    cursor: grabbing;
    opacity: 1;
}

/* ── Edit card (replaces cramped inline edit) ── */
.tx-edit-card[b-jvo3q62p2j] {
    border-bottom: 1px solid var(--border-subtle, var(--border-color));
    border-left: 3px solid var(--accent);
    background: var(--accent-subtle, rgba(88,166,255,.06));
    padding: 0;
    animation: editCardIn-b-jvo3q62p2j .2s ease;
}

@keyframes editCardIn-b-jvo3q62p2j {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.edit-card-header[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(128,128,128,.04);
}

.edit-card-title[b-jvo3q62p2j] {
    font-weight: 700;
    font-size: .97rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.edit-card-actions[b-jvo3q62p2j] {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.edit-card-body[b-jvo3q62p2j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    padding: 14px 16px;
}

.edit-card-body + .edit-card-body[b-jvo3q62p2j] {
    padding-top: 0;
}

.edit-card-footer[b-jvo3q62p2j] {
    display: flex;
    gap: 12px;
    padding: 12px 16px 14px;
    border-top: 1px solid var(--border-color);
}

.edit-card-footer .txm-btn-cancel[b-jvo3q62p2j] { flex: 1; }
.edit-card-footer .txm-btn-save[b-jvo3q62p2j]   { flex: 2; }

.edit-field[b-jvo3q62p2j] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.recurrence-interval[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.recurrence-interval .edit-input[b-jvo3q62p2j] {
    width: 5rem;
}

.recurrence-unit[b-jvo3q62p2j] {
    font-size: .92rem;
    color: var(--text-muted);
}

.edit-field label[b-jvo3q62p2j] {
    font-size: .92rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.tx-empty[b-jvo3q62p2j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 8px;
    color: var(--text-muted);
}

/* ── Type badge ── */
.type-badge[b-jvo3q62p2j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: .97rem;
}

.type-badge.t-income[b-jvo3q62p2j]  { background: var(--success-subtle); color: var(--success); }
.type-badge.t-outcome[b-jvo3q62p2j] { background: var(--danger-subtle); color: var(--danger); }
.type-badge.t-savings[b-jvo3q62p2j] { background: var(--accent-subtle); color: var(--accent); }
.type-badge.t-backup[b-jvo3q62p2j]  { background: var(--warning-subtle); color: var(--warning); }
.type-badge.t-invest[b-jvo3q62p2j]  { background: var(--teal-subtle); color: var(--teal); }

/* ── Cell content ── */
.tx-name[b-jvo3q62p2j] {
    font-weight: 600;
    color: var(--text-primary);
}

.tx-desc[b-jvo3q62p2j] {
    color: var(--text-secondary);
    font-size: .97rem;
}

.tx-amount[b-jvo3q62p2j] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tx-amount.amount-positive[b-jvo3q62p2j] { color: var(--success); }
.tx-amount.amount-negative[b-jvo3q62p2j] { color: var(--danger); }



.tx-date[b-jvo3q62p2j] {
    font-size: .97rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ── Recurrence badge ── */
.recurrence-badge[b-jvo3q62p2j] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--info-subtle);
    color: var(--info);
    font-size: .95rem;
    font-weight: 600;
}

.recurrence-badge .rec-end[b-jvo3q62p2j] {
    color: var(--text-muted);
    font-weight: 400;
    font-size: .92rem;
}

/* ── Budget tag ── */
.budget-tag[b-jvo3q62p2j] {
    display: inline-block;
    font-size: .92rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

/* ── Edit inputs ── */
.edit-input[b-jvo3q62p2j] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: .97rem;
    width: 100%;
    box-sizing: border-box;
}

.edit-input:focus[b-jvo3q62p2j] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

.amount-edit-group[b-jvo3q62p2j] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.edit-amount[b-jvo3q62p2j] {
    width: 100px !important;
    flex-shrink: 0;
}

.edit-currency[b-jvo3q62p2j] {
    width: 54px !important;
    flex-shrink: 0;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    font-size: .95rem !important;
}

.edit-original[b-jvo3q62p2j] {
    width: 90px !important;
    flex-shrink: 0;
}

/* ── Action buttons ── */
.action-btns[b-jvo3q62p2j] {
    display: flex;
    gap: 8px;
}

.btn-icon[b-jvo3q62p2j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(128,128,128,.3);
    border-radius: 6px;
    background: rgba(128,128,128,.08);
    color: var(--text-primary, #c9d1d9);
    cursor: pointer;
    transition: all .12s ease;
    font-size: .97rem;
}

.btn-icon:hover[b-jvo3q62p2j] {
    background: rgba(128,128,128,.18);
    color: #fff;
}

.btn-icon.save[b-jvo3q62p2j] { color: var(--success); border-color: var(--success); background: rgba(63,185,80,.1); }
.btn-icon.save:hover[b-jvo3q62p2j] { background: rgba(63,185,80,.25); }

.btn-icon.cancel[b-jvo3q62p2j] { color: var(--danger); border-color: var(--danger); background: rgba(248,81,73,.1); }
.btn-icon.cancel:hover[b-jvo3q62p2j] { background: rgba(248,81,73,.25); }

.tx-goal-lock[b-jvo3q62p2j] { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--text-muted); opacity: 0.6; font-size: .95rem; }

.btn-icon.edit[b-jvo3q62p2j] { color: var(--accent, #58a6ff); border-color: rgba(88,166,255,.3); background: rgba(88,166,255,.08); }
.btn-icon.edit:hover[b-jvo3q62p2j] { color: var(--accent); border-color: var(--accent); background: rgba(88,166,255,.2); }

.btn-icon.delete[b-jvo3q62p2j] { color: var(--danger, #f85149); border-color: rgba(248,81,73,.3); background: rgba(248,81,73,.08); }
.btn-icon.delete:hover[b-jvo3q62p2j] { color: var(--danger); border-color: var(--danger); background: rgba(248,81,73,.2); }

/* ── Drag state on rows ── */
.tx-row[b-jvo3q62p2j] {
    cursor: grab;
}

.tx-row:active[b-jvo3q62p2j] {
    cursor: grabbing;
}

.tx-row.dragging[b-jvo3q62p2j] {
    opacity: .4;
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
    background: var(--accent-subtle, rgba(88,166,255,.06));
}

/* ── Budget sidebar ── */
/* Lepí sa pod hornú lištu (4.25rem), aby boli drop zóny rozpočtov po ruke aj pri scrollovaní
   dlhým zoznamom transakcií. */
.budget-sidebar[b-jvo3q62p2j] {
    position: sticky;
    top: calc(4.25rem + 16px);
    max-height: calc(100vh - 4.25rem - 32px);
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    box-shadow: var(--shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.budget-sidebar.sidebar-active[b-jvo3q62p2j] {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle), var(--shadow-sm);
}

.sidebar-header[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    background: rgba(128,128,128,.06);
    border-bottom: 1px solid var(--border-color);
}

.sidebar-header .bi[b-jvo3q62p2j] {
    color: var(--accent);
}

.sidebar-empty[b-jvo3q62p2j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: .97rem;
}

.sidebar-empty .bi[b-jvo3q62p2j] {
    font-size: 1.5rem;
}

/* ── Drop zones ── */
.budget-drop-zone[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 10px;
    padding: 9px 12px;
    border: 1px solid var(--border-subtle, var(--border-color));
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-surface);
    transition: background .15s ease, transform .1s ease, border-color .15s ease;
    cursor: default;
    position: relative;
}

.budget-drop-zone:last-child[b-jvo3q62p2j] {
    margin-bottom: 10px;
}

.budget-drop-zone.drag-over[b-jvo3q62p2j] {
    background: rgba(99, 102, 241, .15);
    border-color: var(--accent);
    transform: scale(1.02);
}

.budget-drop-zone.zone-exhausted[b-jvo3q62p2j] {
    background: rgba(248, 81, 73, .07);
    border-color: rgba(248, 81, 73, .35);
}

/* Kompaktný indikátor prečerpania v drag-zóne (obdoba .budget-over-footer). */
.zone-over[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: .88rem;
    font-weight: 700;
    color: #f85149;
    pointer-events: none;
}

.budget-drop-zone.remove-zone[b-jvo3q62p2j] {
    color: var(--text-muted);
    font-size: .97rem;
    gap: 8px;
    border-style: dashed;
}

.budget-drop-zone.remove-zone .bi[b-jvo3q62p2j] {
    font-size: 1rem;
}

.budget-drop-zone.remove-zone.drag-over[b-jvo3q62p2j] {
    background: rgba(248, 81, 73, .1);
    color: var(--danger);
}

.zone-color-dot[b-jvo3q62p2j] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--zone-color, var(--accent)) 30%, transparent);
}

.zone-info[b-jvo3q62p2j] {
    flex: 1;
    min-width: 0;
}

.zone-name[b-jvo3q62p2j] {
    font-size: .97rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
}

.zone-amount[b-jvo3q62p2j] {
    font-size: .92rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.zone-spent[b-jvo3q62p2j] {
    font-weight: 700;
    color: var(--text-secondary);
}

.zone-spent-over[b-jvo3q62p2j] {
    color: #f85149;
}

.zone-limit[b-jvo3q62p2j] {
    color: var(--text-muted);
}

.zone-amount-override[b-jvo3q62p2j] {
    color: #d29922;
    font-weight: 700;
}

.zone-override-pill[b-jvo3q62p2j] {
    font-size: .92rem;
    flex-shrink: 0;
    line-height: 1;
}

.zone-pill-up[b-jvo3q62p2j] {
    color: #3fb950;
}

.zone-pill-down[b-jvo3q62p2j] {
    color: #f85149;
}

.zone-drop-hint[b-jvo3q62p2j] {
    color: var(--accent);
    font-size: .97rem;
    animation: hintPulse-b-jvo3q62p2j 1s ease infinite;
}

@keyframes hintPulse-b-jvo3q62p2j {
    0%, 100% { opacity: .4; }
    50% { opacity: 1; }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .tx-layout[b-jvo3q62p2j] {
        grid-template-columns: 1fr 200px;
    }
}

@media (max-width: 900px) {
    .tx-layout[b-jvo3q62p2j] {
        grid-template-columns: 1fr;
    }

    .budget-sidebar[b-jvo3q62p2j] {
        position: static;
        order: -1;
    }

    .tx-grid-header[b-jvo3q62p2j] { display: none; }

    .tx-row[b-jvo3q62p2j] {
        grid-template-columns: 20px 36px 1fr;
        grid-template-rows: auto auto;
        gap: 4px 10px;
        padding: 12px;
    }

    .col-drag[b-jvo3q62p2j] { grid-row: 1 / 3; }
    .col-type[b-jvo3q62p2j] { grid-row: 1 / 3; }
    .col-name[b-jvo3q62p2j] { font-size: 1rem; }
    .col-date[b-jvo3q62p2j],
    .col-recurrence[b-jvo3q62p2j] { font-size: .95rem; }
    .col-actions[b-jvo3q62p2j] { grid-column: 3; justify-self: end; }

    .edit-card-body[b-jvo3q62p2j] {
        grid-template-columns: 1fr;
    }

    .filter-bar[b-jvo3q62p2j] { flex-direction: column; align-items: stretch; }
    .filter-stats[b-jvo3q62p2j] { margin-left: 0; justify-content: space-between; }
}

/* ── Pending section ── */
.pending-section[b-jvo3q62p2j] {
    margin-bottom: 1.5rem;
    border: 2px dashed var(--accent, #6366f1);
    border-radius: var(--radius, 8px);
    padding: 12px;
    background: rgba(99, 102, 241, .04);
}

.pending-header[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.pending-header h2[b-jvo3q62p2j] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.pending-hint[b-jvo3q62p2j] {
    font-size: .92rem;
    color: var(--text-muted, #888);
    margin-left: auto;
}

.tx-row.pending[b-jvo3q62p2j] {
    border-left: 3px solid var(--accent, #6366f1);
}

/* ── Confirm-delete modal ── */
.modal-backdrop[b-jvo3q62p2j] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-card.confirm-card[b-jvo3q62p2j] {
    background: var(--panel, #161b22);
    border: 1px solid var(--border, #30363d);
    border-radius: var(--radius-md, 12px);
    width: 420px;
    max-width: 92vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
    animation: confirmIn-b-jvo3q62p2j .2s ease;
}

@keyframes confirmIn-b-jvo3q62p2j {
    from { opacity: 0; transform: scale(.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header[b-jvo3q62p2j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border, #30363d);
}

.modal-header h3[b-jvo3q62p2j] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-close[b-jvo3q62p2j] {
    background: none;
    border: none;
    color: var(--muted, #8b949e);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background .15s;
}

.modal-close:hover[b-jvo3q62p2j] {
    background: rgba(128, 128, 128, .15);
}

.modal-body[b-jvo3q62p2j] {
    padding: 20px;
}

.modal-body p[b-jvo3q62p2j] {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

.modal-footer[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--border, #30363d);
}

.modal-spacer[b-jvo3q62p2j] {
    flex: 1;
}

.modal-footer .btn[b-jvo3q62p2j] {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s;
}

.modal-footer .btn-cancel[b-jvo3q62p2j] {
    background: transparent;
    border-color: var(--border, #30363d);
    color: var(--text, #c9d1d9);
}

.modal-footer .btn-cancel:hover[b-jvo3q62p2j] {
    background: rgba(128, 128, 128, .1);
}

.modal-footer .btn-danger[b-jvo3q62p2j] {
    background: var(--danger, #f85149);
    color: #fff;
    border-color: var(--danger, #f85149);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.modal-footer .btn-danger:hover[b-jvo3q62p2j] {
    filter: brightness(1.1);
}

/* ── Trash toggle button ── */
.btn-trash-toggle[b-jvo3q62p2j] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: none;
    border-radius: var(--radius-sm, 6px);
    background: rgba(248, 81, 73, .15);
    color: var(--danger, #f85149);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
    position: relative;
}

.btn-trash-toggle:hover[b-jvo3q62p2j] {
    background: rgba(248, 81, 73, .28);
    transform: translateY(-1px);
}

.btn-trash-toggle.active[b-jvo3q62p2j] {
    background: var(--danger, #f85149);
    color: #fff;
}

.btn-trash-toggle.active:hover[b-jvo3q62p2j] {
    filter: brightness(1.1);
}

.trash-badge[b-jvo3q62p2j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--danger, #f85149);
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1;
}

.btn-trash-toggle.active .trash-badge[b-jvo3q62p2j] {
    background: rgba(255, 255, 255, .3);
}

/* ── Multi-select checkboxes ── */
.col-check[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tx-checkbox[b-jvo3q62p2j] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
}

.row-selected[b-jvo3q62p2j] {
    background: rgba(88,166,255,.07) !important;
    outline: 1px solid rgba(88,166,255,.25);
    outline-offset: -1px;
}

.btn-bulk-delete[b-jvo3q62p2j] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid var(--danger);
    background: rgba(248,81,73,.12);
    color: var(--danger);
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}

.btn-bulk-delete:hover[b-jvo3q62p2j] {
    background: rgba(248,81,73,.25);
}

/* ── Tlačidlá formulára transakcie (zdieľané s inline úpravou riadku) ── */
.txm-btn-cancel[b-jvo3q62p2j] {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: rgba(128,128,128,.08);
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

.txm-btn-cancel:hover[b-jvo3q62p2j] { background: rgba(128,128,128,.18); }

.txm-btn-save[b-jvo3q62p2j] {
    flex: 2;
    padding: 12px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: filter .15s, transform .1s;
}

.txm-btn-save:hover[b-jvo3q62p2j] { filter: brightness(1.1); transform: translateY(-1px); }

/* ── Trash modal ── */
.trash-modal[b-jvo3q62p2j] {
    background: var(--bg-card, #161b22);
    border: 1px solid var(--border-color, #30363d);
    border-radius: 16px;
    width: 820px;
    max-width: 96vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 48px rgba(0,0,0,.6);
    animation: confirmIn-b-jvo3q62p2j .2s ease;
}

.trash-modal .modal-header[b-jvo3q62p2j] {
    border-radius: 16px 16px 0 0;
}

.trash-modal-body[b-jvo3q62p2j] {
    overflow-y: auto;
    flex: 1;
    padding: 12px;
}

.trash-hint-text[b-jvo3q62p2j] {
    color: var(--text-muted);
    font-size: .95rem;
    margin: 0 0 8px 0;
    padding: 0 4px;
}

.trash-grid .tx-grid-header[b-jvo3q62p2j],
.trash-grid .tx-row[b-jvo3q62p2j] {
    grid-template-columns: 32px 50px 1fr 0.8fr 100px 70px 80px;
}

.btn.btn-sm[b-jvo3q62p2j] {
    padding: 6px 12px;
    font-size: .92rem;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn.btn-danger[b-jvo3q62p2j] { background: var(--danger); color: #fff; }
.btn.btn-danger:hover[b-jvo3q62p2j] { filter: brightness(1.12); }

/* ── Pending section uses fewer columns ── */
.pending-section .tx-grid-header[b-jvo3q62p2j],
.pending-section .tx-row[b-jvo3q62p2j] {
    grid-template-columns: 50px 1.2fr 0.8fr 100px 120px;
}

/* ══ Pohyb ═════════════════════════════════════════════════════════════════
   Transakcie sú najhustejšia obrazovka v aplikácii — mriežka riadkov, bočný panel
   rozpočtov a k tomu ťahanie myšou. Pohyb tu preto slúži na orientáciu, nie na efekt:
   ukazuje, ktorý riadok je pod kurzorom, kam sa dá pustiť pretiahnutá transakcia
   a že sa zoznam po zmene mesiaca naozaj prekreslil. */

/* ── Riadky ──
   Nábeh dostane len prvých osem riadkov. Zoznam môže mať stovky položiek a oneskorenie
   násobené poradím by znamenalo, že spodok tabuľky nabieha ešte niekoľko sekúnd. */
.tx-row[b-jvo3q62p2j] {
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
    animation: bm-rise var(--motion-fast) var(--ease-out) backwards;
}

.tx-grid > .tx-row:nth-child(2)[b-jvo3q62p2j] { animation-delay: 15ms; }
.tx-grid > .tx-row:nth-child(3)[b-jvo3q62p2j] { animation-delay: 30ms; }
.tx-grid > .tx-row:nth-child(4)[b-jvo3q62p2j] { animation-delay: 45ms; }
.tx-grid > .tx-row:nth-child(5)[b-jvo3q62p2j] { animation-delay: 60ms; }
.tx-grid > .tx-row:nth-child(6)[b-jvo3q62p2j] { animation-delay: 75ms; }
.tx-grid > .tx-row:nth-child(7)[b-jvo3q62p2j] { animation-delay: 90ms; }
.tx-grid > .tx-row:nth-child(n+8)[b-jvo3q62p2j] { animation-delay: 105ms; }

.tx-row:hover[b-jvo3q62p2j] {
    transform: translateX(2px);
}

/* Úchyt na ťahanie sa ukáže ako aktívny až vtedy, keď je nad ním kurzor. */
.drag-handle[b-jvo3q62p2j] {
    transition: color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out), opacity var(--motion-fast) var(--ease-out);
}

.tx-row:hover .drag-handle[b-jvo3q62p2j] {
    transform: scale(1.15);
}

.tx-checkbox[b-jvo3q62p2j],
.type-badge[b-jvo3q62p2j],
.budget-tag[b-jvo3q62p2j],
.recurrence-badge[b-jvo3q62p2j],

.budget-tag:hover[b-jvo3q62p2j] {
    transform: translateY(-1px);
}

/* ── Úprava riadku ──
   Formulár sa rozbalí zhora, takže je jasné, že patrí k riadku nad ním. */
.tx-edit-card[b-jvo3q62p2j] {
    animation: bm-unfold var(--motion-base) var(--ease-out) both;
}

/* ── Miesta na pustenie rozpočtu ──
   Pri ťahaní musí byť na prvý pohľad jasné, kam sa dá pustiť. Zväčšenie je preto
   výraznejšie ako inde v aplikácii — používateľ v tej chvíli drží tlačidlo myši
   a nemá čas hľadať jemný rozdiel. */
.budget-drop-zone[b-jvo3q62p2j] {
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}

.budget-drop-zone:hover[b-jvo3q62p2j] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.zone-drop-hint[b-jvo3q62p2j] {
    transition: opacity var(--motion-fast) var(--ease-out);
}

.zone-color-dot[b-jvo3q62p2j] {
    transition: transform var(--motion-base) var(--ease-spring);
}

.budget-drop-zone:hover .zone-color-dot[b-jvo3q62p2j] {
    transform: scale(1.2);
}

/* ── Prepínanie mesiaca ──
   Šípky sa pri prejdení myšou pohnú v smere, ktorým listujú. */
.month-nav-btn[b-jvo3q62p2j],
.month-today-btn[b-jvo3q62p2j],
.scope-option[b-jvo3q62p2j] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.month-nav-btn:active[b-jvo3q62p2j],
.month-today-btn:active[b-jvo3q62p2j],
.scope-option:active[b-jvo3q62p2j] {
    transform: scale(.94);
    transition-duration: var(--motion-press);
}

/* ── Filter podľa rozpočtu ── */
.budget-filter-menu[b-jvo3q62p2j] {
    animation: bm-unfold var(--motion-base) var(--ease-out) both;
}

.budget-filter-item[b-jvo3q62p2j] {
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.budget-filter-item:hover[b-jvo3q62p2j] {
    transform: translateX(3px);
}

.budget-filter-caret[b-jvo3q62p2j] {
    transition: transform var(--motion-base) var(--ease-out);
}

.budget-filter-toggle:hover .budget-filter-caret[b-jvo3q62p2j] {
    transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
    .tx-row[b-jvo3q62p2j],
    .tx-edit-card[b-jvo3q62p2j],
    .budget-filter-menu[b-jvo3q62p2j] {
        animation: none;
    }

    .tx-row:hover[b-jvo3q62p2j],
    .tx-row:hover .drag-handle[b-jvo3q62p2j],
    .budget-tag:hover[b-jvo3q62p2j],
    .budget-drop-zone:hover[b-jvo3q62p2j],
    .budget-drop-zone:hover .zone-color-dot[b-jvo3q62p2j],
    .month-nav-btn:active[b-jvo3q62p2j],
    .month-today-btn:active[b-jvo3q62p2j],
    .scope-option:active[b-jvo3q62p2j],
    .budget-filter-item:hover[b-jvo3q62p2j],
    .budget-filter-toggle:hover .budget-filter-caret[b-jvo3q62p2j] {
        transform: none;
    }
}

/* Podrozpocet vo filtri patri pod predchadzajuci riadok, preto sa odsadi. */
.budget-filter-sub[b-jvo3q62p2j] {
    padding-left: 26px;
}
/* /Components/Shared/BudgetEditModal.razor.rz.scp.css */
.btn-card[b-p1z8yj4f6k] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    white-space: nowrap;
    padding: 5px 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-sm, 6px);
    background: rgba(0,0,0,.25);
    color: var(--text-secondary);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: all .12s ease;
}

.btn-card:hover[b-p1z8yj4f6k] {
    background: rgba(255,255,255,.1);
    color: var(--text-primary);
}

.btn-card.save[b-p1z8yj4f6k] {
    background: rgba(46,160,67,.2);
    color: var(--success);
    border-color: rgba(46,160,67,.4);
}
.btn-card.save:hover[b-p1z8yj4f6k] { background: var(--success); color: #fff; }

.btn-card.cancel[b-p1z8yj4f6k] {
    color: var(--danger);
    border-color: rgba(248,81,73,.4);
    background: rgba(248,81,73,.1);
}
.btn-card.cancel:hover[b-p1z8yj4f6k] { background: rgba(248,81,73,.25); }

.btn-card.edit:hover[b-p1z8yj4f6k] {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.btn-card.delete:hover[b-p1z8yj4f6k] {
    color: #f85149;
    border-color: rgba(248,81,73,.4);
    background: rgba(248,81,73,.12);
}

/* �� Edit mode �� */
.edit-field[b-p1z8yj4f6k] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.edit-field label[b-p1z8yj4f6k] {
    font-size: .92rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    font-weight: 600;
}

.edit-field label.checkbox-field[b-p1z8yj4f6k] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.edit-field label.checkbox-field input[type="checkbox"][b-p1z8yj4f6k] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Vysvetlivka pod prepínačom – menšia a tlmená, aby neprekričala samotné pole. */
.edit-field .field-hint[b-p1z8yj4f6k] {
    font-size: .82rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.edit-input[b-p1z8yj4f6k] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: .97rem;
    width: 100%;
    box-sizing: border-box;
}

.edit-input:focus[b-p1z8yj4f6k] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

.edit-row[b-p1z8yj4f6k] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.color-row[b-p1z8yj4f6k] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-row input[type="color"][b-p1z8yj4f6k] {
    width: 36px;
    height: 36px;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
}

/* �� Icon picker �� */

/* ── Modálne okná (úprava rozpočtu, história limitu) ── */
.modal-backdrop[b-p1z8yj4f6k] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1000;
}

.modal-card[b-p1z8yj4f6k] {
    display: flex;
    flex-direction: column;
    width: min(880px, 100%);
    max-width: 100%;
    max-height: 90vh;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    overflow: hidden;
}

.modal-header[b-p1z8yj4f6k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3[b-p1z8yj4f6k] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.modal-close[b-p1z8yj4f6k] {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.modal-close:hover[b-p1z8yj4f6k] {
    color: var(--text-primary);
}

.modal-body[b-p1z8yj4f6k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    overflow-y: auto;
}

.modal-footer[b-p1z8yj4f6k] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--border-color);
}

.modal-spacer[b-p1z8yj4f6k] {
    flex: 1;
}

/* Na širšej obrazovke využijeme miesto do šírky: textové polia vľavo,
   výber ikony vpravo. Okno tak nie je zbytočne vysoké a nemusí sa scrollovať. */
@media (min-width: 760px) {
    .modal-body[b-p1z8yj4f6k] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 22px;
        align-items: start;
    }

    .modal-body > .edit-field[b-p1z8yj4f6k] {
        grid-column: 1;
    }

    .modal-body > .edit-field.icon-field[b-p1z8yj4f6k] {
        grid-column: 2;
        grid-row: 1 / span 6;
    }
}
/* /Components/Shared/IconPicker.razor.rz.scp.css */
/* ── Root container ── */
.ipk-root[b-8wzdimjvv7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Selected icon preview ── */
.ipk-preview[b-8wzdimjvv7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
    background: var(--bg-surface, #1c1c2e);
    width: fit-content;
}

.ipk-preview-icon[b-8wzdimjvv7] {
    font-size: 1.4rem;
    line-height: 1;
}

.ipk-preview-name[b-8wzdimjvv7] {
    font-size: .92rem;
    color: var(--text-secondary, #888);
}

/* ── Search row ── */
.ipk-search-row[b-8wzdimjvv7] {
    display: flex;
    gap: 8px;
}

.ipk-search-box[b-8wzdimjvv7] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-surface, #1c1c2e);
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
    padding: 6px 10px;
    transition: border-color .15s;
}

.ipk-search-box:focus-within[b-8wzdimjvv7] {
    border-color: var(--accent, #58a6ff);
}

.ipk-search-icon[b-8wzdimjvv7] {
    color: var(--text-secondary, #888);
    flex-shrink: 0;
    font-size: .97rem;
}

.ipk-search-input[b-8wzdimjvv7] {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    color: var(--text-primary, #e0e0e0);
    font-size: .97rem;
    min-width: 0;
}

.ipk-search-input[b-8wzdimjvv7]::placeholder {
    color: var(--text-secondary, #666);
}

.ipk-clear-btn[b-8wzdimjvv7] {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-secondary, #888);
    line-height: 1;
    display: flex;
    align-items: center;
}

.ipk-clear-btn:hover[b-8wzdimjvv7] { color: var(--danger, #f85149); }

/* ── Category pills ── */
.ipk-cats[b-8wzdimjvv7] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ipk-cat[b-8wzdimjvv7] {
    padding: 3px 10px;
    font-size: .92rem;
    border-radius: 20px;
    border: 1px solid var(--border-color, #333);
    background: transparent;
    color: var(--text-secondary, #888);
    cursor: pointer;
    transition: all .12s;
    white-space: nowrap;
}

.ipk-cat:hover[b-8wzdimjvv7] {
    background: rgba(88,166,255,.1);
    color: var(--accent, #58a6ff);
    border-color: var(--accent, #58a6ff);
}

.ipk-cat.active[b-8wzdimjvv7] {
    background: var(--accent, #58a6ff);
    color: #fff;
    border-color: var(--accent, #58a6ff);
}

/* ── Icon grid ── */
.ipk-grid[b-8wzdimjvv7] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
    background: var(--bg-surface, #1c1c2e);
    scrollbar-width: thin;
    scrollbar-color: var(--border-color, #444) transparent;
}

.ipk-btn[b-8wzdimjvv7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background .1s, border-color .1s, transform .1s;
    flex-shrink: 0;
}

.ipk-btn:hover[b-8wzdimjvv7] {
    background: rgba(128,128,128,.15);
    transform: scale(1.12);
}

/* Emoji ignore `color`, so selection is shown with a ring instead of a tint. */
.ipk-btn.sel[b-8wzdimjvv7] {
    border-color: var(--accent, #58a6ff);
    background: rgba(88,166,255,.12);
}

/* ── Empty / count hints ── */
.ipk-empty[b-8wzdimjvv7] {
    width: 100%;
    text-align: center;
    color: var(--text-secondary, #888);
    padding: 20px 0;
    font-size: .95rem;
    margin: 0;
}

/* /Components/Shared/SavingsGoalEditModal.razor.rz.scp.css */
.modal-backdrop[b-b80bfacuvg] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-card[b-b80bfacuvg] {
    background: var(--panel, #161b22);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    width: min(860px, 95vw);
    max-width: 95vw;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-b80bfacuvg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.modal-header h3[b-b80bfacuvg] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.modal-close[b-b80bfacuvg] {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1.3rem;
    cursor: pointer;
    line-height: 1;
}

.modal-body[b-b80bfacuvg] {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-group[b-b80bfacuvg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label[b-b80bfacuvg] {
    font-size: .95rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.form-group input[b-b80bfacuvg],
.form-group select[b-b80bfacuvg] {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.04);
    color: var(--text);
    font-size: 1rem;
}

.form-row[b-b80bfacuvg] {
    display: flex;
    gap: 12px;
}

.form-row .form-group[b-b80bfacuvg] {
    flex: 1;
}

.color-row[b-b80bfacuvg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-row input[type="color"][b-b80bfacuvg] {
    width: 36px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}
.modal-footer[b-b80bfacuvg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
}

.modal-spacer[b-b80bfacuvg] {
    flex: 1;
}

.confirm-card[b-b80bfacuvg] {
    width: 380px;
}

/* Na širšej obrazovke idú textové polia vľavo a výber ikony vpravo,
   aby okno nebolo úzke a vysoké. */
@media (min-width: 760px) {
    .modal-body[b-b80bfacuvg] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 22px;
        align-items: start;
    }

    .modal-body > .form-group[b-b80bfacuvg] {
        grid-column: 1;
    }

    .modal-body > .form-group.icon-field[b-b80bfacuvg] {
        grid-column: 2;
        grid-row: 1 / span 5;
    }
}
/* /Components/Shared/TransactionEditModal.razor.rz.scp.css */
/* ── Prekrytie stránky ── */
.modal-backdrop[b-tx14r639t7] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

@keyframes txmIn-b-tx14r639t7 {
    from { opacity: 0; transform: scale(.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Karta formulára ── */
.tx-form-modal[b-tx14r639t7] {
    background: var(--bg-card, #161b22);
    border: 1px solid var(--border-color, #30363d);
    border-radius: 16px;
    width: min(820px, 96vw);
    max-width: 96vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(0,0,0,.6);
    animation: txmIn-b-tx14r639t7 .2s ease;
    display: flex;
    flex-direction: column;
}

.txm-header[b-tx14r639t7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border-color);
}

.txm-header-icon[b-tx14r639t7] {
    font-size: 1.4rem;
    color: var(--accent);
}

.txm-title[b-tx14r639t7] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.txm-subtitle[b-tx14r639t7] {
    font-size: .92rem;
    color: var(--text-muted);
}

.modal-close[b-tx14r639t7] {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background .15s;
}

.modal-close:hover[b-tx14r639t7] {
    background: rgba(128, 128, 128, .15);
}

/* ── Typ transakcie ── */
.txm-top-row[b-tx14r639t7] {
    padding: 16px 24px 0;
}

.txm-type-toggles[b-tx14r639t7] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.txm-type-btn[b-tx14r639t7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 2px solid transparent;
    font-size: .97rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    background: rgba(128,128,128,.08);
    color: var(--text-secondary);
}

.txm-type-btn.t-income.active[b-tx14r639t7]  { background: rgba(63,185,80,.18); border-color: var(--success); color: var(--success); }
.txm-type-btn.t-outcome.active[b-tx14r639t7] { background: rgba(248,81,73,.18); border-color: var(--danger); color: var(--danger); }
.txm-type-btn.t-savings.active[b-tx14r639t7] { background: rgba(88,166,255,.18); border-color: var(--accent); color: var(--accent); }
.txm-type-btn.t-backup.active[b-tx14r639t7]  { background: rgba(210,153,34,.18); border-color: var(--warning); color: var(--warning); }
.txm-type-btn.t-invest.active[b-tx14r639t7]  { background: rgba(45,212,191,.18); border-color: var(--teal); color: var(--teal); }

.txm-type-btn:not(.active):hover[b-tx14r639t7] {
    background: rgba(128,128,128,.16);
    color: var(--text-primary);
}

/* ── Polia formulára ── */
/* Meno a dátum sú vedľa seba – na širokej obrazovke je zbytočné dávať ich pod seba. */
.txm-two-col[b-tx14r639t7] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: end;
    gap: 16px;
    padding: 14px 24px 0;
}

.txm-name-row[b-tx14r639t7],
.txm-date-row[b-tx14r639t7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
}

.txm-label[b-tx14r639t7] {
    font-size: .92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}

.txm-name-input[b-tx14r639t7] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    box-sizing: border-box;
}

.txm-name-input:focus[b-tx14r639t7] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

/* Suma a rozpočet patria k sebe – rozpočet je pri výdavku rovnako dôležitý ako suma. */
.txm-amount-row[b-tx14r639t7] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: end;
    gap: 16px;
    padding: 14px 24px 0;
}

.txm-amount-section[b-tx14r639t7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.txm-amount-input[b-tx14r639t7] {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--border-color);
    color: var(--text-primary);
    font-size: 2rem;
    font-weight: 800;
    width: 100%;
    box-sizing: border-box;
    padding: 4px 0;
    outline: none;
    transition: border-color .15s;
    font-variant-numeric: tabular-nums;
}

/* Šípky číselníka pri takto veľkom písme len rušia – suma sa píše z klávesnice. */
.txm-amount-input[b-tx14r639t7]::-webkit-outer-spin-button,
.txm-amount-input[b-tx14r639t7]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.txm-amount-input[b-tx14r639t7] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.txm-amount-input.amount-positive[b-tx14r639t7] { color: var(--success); border-bottom-color: var(--success); }
.txm-amount-input.amount-negative[b-tx14r639t7] { color: var(--danger); border-bottom-color: var(--danger); }
.txm-amount-input:focus[b-tx14r639t7] { border-bottom-color: var(--accent); }

.edit-field[b-tx14r639t7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.edit-input[b-tx14r639t7] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: .97rem;
    width: 100%;
    box-sizing: border-box;
}

.edit-input:focus[b-tx14r639t7] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

/* ── Rozšírené možnosti ── */
.txm-more-toggle[b-tx14r639t7] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 14px 24px 0;
    padding: 7px 12px;
    border-radius: 7px;
    border: 1px solid var(--border-color);
    background: rgba(128,128,128,.06);
    color: var(--text-muted);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    width: fit-content;
    transition: background .15s, color .15s;
}

.txm-more-toggle:hover[b-tx14r639t7] {
    background: rgba(128,128,128,.14);
    color: var(--text-primary);
}

.txm-more-grid[b-tx14r639t7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 24px 0;
}

/* ── Pätička ── */
.txm-footer[b-tx14r639t7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 24px;
    margin-top: 16px;
    border-top: 1px solid var(--border-color);
}

.txm-btn-cancel[b-tx14r639t7] {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: rgba(128,128,128,.08);
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

.txm-btn-cancel:hover[b-tx14r639t7] { background: rgba(128,128,128,.18); }

.txm-btn-save[b-tx14r639t7] {
    flex: 2;
    padding: 12px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: filter .15s, transform .1s;
}

.txm-btn-save:hover[b-tx14r639t7] { filter: brightness(1.1); transform: translateY(-1px); }

/* Na úzkej obrazovke (mobil) sa polia vrátia pod seba. */
@media (max-width: 640px) {
    .txm-two-col[b-tx14r639t7],
    .txm-amount-row[b-tx14r639t7],
    .txm-more-grid[b-tx14r639t7] {
        grid-template-columns: 1fr;
    }
}

/* ── Interval opakovania (číslo + jednotka na jednom riadku) ── */
.txm-interval[b-tx14r639t7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.txm-interval .edit-input[b-tx14r639t7] {
    width: 5rem;
}

.txm-interval-unit[b-tx14r639t7] {
    font-size: .92rem;
    color: var(--text-muted);
}