h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---- Admin UI (docs/architecture.md bod 6: admin dostáva vlastný, nový vizuál) ---- */

:root {
    --color-bg: #f4f5f7;
    --color-surface: #ffffff;
    --color-border: #e2e4e9;
    /* Okraj polí je tmavší než okraj kariet/tabuliek - na bielej karte by pole s --color-border
       (kontrast ~1.3:1) splývalo. Kompromis: zreteľný, ale ešte nie ťažký (plných 3:1 by bolo ~#8d94a1). */
    --color-input-border: #b8bec9;
    --color-text: #1f2430;
    --color-text-muted: #6b7280;
    --color-primary: #2f6fed;
    --color-primary-hover: #2559c4;
    --color-danger: #d92d20;
    --color-danger-hover: #b42318;
    --color-danger-soft: #fef3f2;
    --color-success: #15803d;
    --color-success-hover: #166534;
    --radius: 8px;
    /* Šírka obsahu adminu - zdieľa ju lišta (.app-nav-inner) aj obsah (.app-main), aby lícovali. */
    --app-rail: 1440px;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Tmavá lišta musí ísť od kraja po kraj - predvolený 8px okraj <body> by okolo nej nechal
   svetlý rám. Cez :has() len v admine, aby sa nepohli stránky v PublicLayout. */
body:has(.app-shell) {
    margin: 0;
}

.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Horná lišta nesie tmavý vizuál značky z marketingovej stránky (logo, farby, sticky pás),
   zvyšok adminu ostáva svetlý (docs/backlog.md, Fáza 9). Farby berie z palety značky
   v brand.css (--mk-*), rovnako ako marketing.css. */
.app-nav {
    background: var(--mk-bg-2);
    border-bottom: 1px solid var(--mk-line);
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Rovnaká šírka a bočný padding ako .app-main, aby logo lícovalo s obsahom stránky. */
.app-nav-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.6rem;
    max-width: calc(var(--app-rail) + 4rem);
    margin: 0 auto;
    padding: 0.85rem 2rem;
    box-sizing: border-box;
}

.app-nav-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 0.5rem;
}

    .app-nav-brand img {
        display: block;
        height: 30px;
        width: auto;
    }

.app-nav-link {
    position: relative;
    color: var(--mk-muted);
    text-decoration: none;
    font-size: 0.95rem;
    padding: 0.35rem 0;
}

    .app-nav-link:hover {
        color: var(--mk-text);
    }

.app-nav-link-active {
    color: var(--mk-text);
    font-weight: 600;
}

    /* Gradient značky ako podčiarknutie aktívnej položky - rovnaký prechod ako hlavné CTA. */
    .app-nav-link-active::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        border-radius: 2px;
        background: var(--mk-accent-gradient);
    }

/* Štítok časti aplikácie vedľa loga - v správe platformy (PlatformAdminLayout), aby bolo na prvý
   pohľad jasné, že toto nie je admin požičovne. */
.app-nav-section {
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--mk-border-2);
    border-radius: 999px;
    color: var(--mk-muted);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.app-nav-spacer {
    flex: 1;
}

.app-nav-user {
    color: var(--mk-muted);
    font-size: 0.9rem;
}

.app-nav-logout {
    color: var(--mk-text);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--mk-border-2);
    border-radius: 9px;
    background: rgba(19, 26, 43, 0.6);
    white-space: nowrap;
}

    .app-nav-logout:hover {
        color: var(--mk-text);
        background: var(--mk-surface-2);
    }

/* border-box + padding pripočítaný k max-width: obsah má stále šírku --app-rail, ale na okne
   užšom než rail sa stránka zmestí - s content-box by width: 100% + padding pretiekli o 4rem
   a vznikol by vodorovný posuvník. */
.app-main {
    flex: 1;
    padding: 2rem;
    max-width: calc(var(--app-rail) + 4rem);
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.app-main-bare {
    max-width: calc(420px + 4rem);
    padding-top: 4rem;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

    .page-header h1 {
        font-size: 1.5rem;
        margin: 0;
    }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9rem;
    cursor: pointer;
}

    .btn:hover {
        background: var(--color-bg);
    }

/* Farba tlačidla označuje dôležitosť a riziko akcie, nie jej druh (docs/architecture.md, bod 6):
   - .btn-primary        hlavná akcia obrazovky (Uložiť, Pridať nový záznam) - najviac jedna na formulár
   - .btn-danger         nezvratné zmazanie/vypnutie celého záznamu
   - .btn-danger-outline odstránenie riadku vo formulári - platí až po Uložiť, preto tlmené
   - .btn-success        opak .btn-danger (Aktivovať)
   - .btn (bez variantu) všetko ostatné: Späť, Zrušiť, Upraviť, pridanie riadku */
/* Hlavné tlačidlo je plné modré s bielym textom - rovnaký štýl ako červené .btn-danger a tá istá
   modrá ako odkazy a zameranie polí, takže admin má jedinú akcentovú farbu (rozhodnutie Petra
   6.10.2026; zvažovaná bola aj zelená a tmavá). Pôvodný gradient značky s tmavým textom na bielom
   pozadí adminu nesedel; ostáva na tmavých stránkach (marketing, prihlásenie - .mk-btn-primary). */
.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    font-weight: 600;
}

    .btn-primary:hover {
        background: var(--color-primary-hover);
        border-color: var(--color-primary-hover);
    }

.btn-danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: white;
}

    .btn-danger:hover {
        background: var(--color-danger-hover);
        border-color: var(--color-danger-hover);
    }

.btn-danger-outline {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

    .btn-danger-outline:hover {
        background: var(--color-danger-soft);
    }

.btn-success {
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
}

    .btn-success:hover {
        background: var(--color-success-hover);
        border-color: var(--color-success-hover);
    }

.btn-link {
    border: none;
    background: none;
    color: var(--color-primary);
    padding: 0.25rem 0;
}

/* Tlačidlo len s ikonou (ceruzka v riadku tabuľky) - štvorcové, popis nesie title/aria-label. */
.btn-icon {
    padding: 0.4rem;
    line-height: 0;
}

/* "Otvoriť" je raz odkaz na stránku (<a>), raz tlačidlo otvárajúce modálne okno (<button>) -
   v tabuľke majú vyzerať rovnako. */
button.btn-link {
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

    .data-table th, .data-table td {
        text-align: left;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--color-border);
        font-size: 0.9rem;
    }

    .data-table th {
        color: var(--color-text-muted);
        font-weight: 600;
        background: var(--color-bg);
    }

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

    .data-table tbody tr:hover {
        background: var(--color-bg);
    }

/* ---- DataTable (Shared/Components/DataTable.razor): triedenie, filter v stĺpci, stránkovanie ---- */

/* Hlavička stĺpca je tlačidlo (klávesnica, čítačky), ale vyzerá ako pôvodný text hlavičky. */
.data-table-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
}

    .data-table-sort:hover {
        color: var(--color-text);
    }

/* Šípka je v každej hlavičke, aby sa pri zapnutí triedenia nepohla šírka stĺpca; viditeľná je
   naplno len pri stĺpci, podľa ktorého sa práve triedi. */
.data-table-sort-icon {
    font-size: 0.6rem;
    opacity: 0.25;
}

.data-table-sort-icon-active {
    opacity: 1;
    color: var(--color-primary);
}

/* Zarovnanie stĺpca (TableColumn.Align; bez nastavenia čísla doprava, ostatné doľava). Dve triedy
   v selektore, aby pravidlo prebilo všeobecné text-align: left na .data-table th/td.
   tabular-nums dáva každej číslici rovnakú šírku, aby sa rády dali porovnávať pod sebou. */
.data-table .data-table-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

    .data-table-right .data-table-head {
        justify-content: flex-end;
    }

/* Hodnota končí pod koncom NÁZVU stĺpca, nie pod ikonou filtra: v hlavičke sú za názvom ešte
   šípka triedenia a ikona filtra (spolu ~2.7rem), o toľko je bunka odsadená sprava navyše.
   Bez toho hodnoty pôsobia prilepené k pravému okraju stĺpca. */
.data-table td.data-table-right {
    padding-right: 3.7rem;
    /* Suma s menou drží pokope aj v tabuľke s veľa stĺpcami. */
    white-space: nowrap;
}

.data-table .data-table-center {
    text-align: center;
}

    .data-table-center .data-table-head {
        justify-content: center;
    }

/* Názov stĺpca (triedenie) vľavo, ikona filtra hneď za ním. */
.data-table-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.data-table-filter-button {
    display: inline-flex;
    padding: 0.2rem;
    border: none;
    border-radius: 4px;
    background: none;
    color: inherit;
    opacity: 0.45;
    cursor: pointer;
}

    .data-table-filter-button:hover {
        opacity: 1;
        background: var(--color-border);
    }

/* Stĺpec, podľa ktorého sa práve filtruje: plná ikona vo farbe odkazov. */
.data-table-filter-button-active {
    opacity: 1;
    color: var(--color-primary);
}

/* Panel filtra pláva pod hlavičkou tabuľky; wrap je jeho kotva. */
.data-table-wrap {
    position: relative;
}

.data-table-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
}

.data-table-filter-panel {
    position: absolute;
    top: 2.9rem;
    left: 1rem;
    z-index: 31;
    max-width: calc(100% - 2rem);
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(15, 18, 25, 0.18);
    box-sizing: border-box;
}

/* × | Stĺpec | Operátor | Hodnota - pevné šírky, aby polia vo viacerých riadkoch lícovali pod sebou. */
.data-table-filter-row {
    display: grid;
    grid-template-columns: auto 12rem 9rem 14rem;
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 0.75rem;
}

    .data-table-filter-row label {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        min-width: 0;
    }

    .data-table-filter-row label > span {
        font-size: 0.8rem;
        color: var(--color-text-muted);
    }

    /* Pevná výška: <input> a <select> majú v prehliadači rôznu vlastnú výšku, bez nej by pole
       a rozbaľovací zoznam v jednom riadku nesedeli. */
    .data-table-filter-row input, .data-table-filter-row select {
        font-family: inherit;
        height: 2.25rem;
        padding-top: 0;
        padding-bottom: 0;
    }

.data-table-filter-remove {
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: var(--radius);
    background: none;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

    .data-table-filter-remove:hover {
        background: var(--color-bg);
        color: var(--color-danger);
    }

.data-table-filter-actions {
    display: flex;
    gap: 1.5rem;
}

    .data-table-filter-actions .btn-link {
        font-size: 0.9rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }

@media (max-width: 720px) {
    .data-table-filter-row {
        grid-template-columns: auto 1fr;
    }
}

.data-table .data-table-empty td {
    color: var(--color-text-muted);
    text-align: center;
    padding: 2rem;
}

.data-table-actions {
    white-space: nowrap;
}

.data-table-pager {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

    .data-table-pager label {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .data-table-pager select {
        padding: 0.35rem 0.55rem;
        border: 1px solid var(--color-input-border);
        border-radius: var(--radius);
        background: var(--color-surface);
        color: var(--color-text);
        font-size: 0.85rem;
    }

    .data-table-pager .btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.data-table-pager-spacer {
    flex: 1;
}

.empty-state {
    color: var(--color-text-muted);
    padding: 2rem;
    text-align: center;
}

.form-field {
    margin-bottom: 1rem;
}

    .form-field label {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: 0.3rem;
    }

    /* Riadky opakovaných položiek (.variant-row/.blackout-row) a editácia priamo v bunke tabuľky
       (.data-table, napr. Pokročilé nastavenia) nemajú okolo polí .form-field, preto sú tu
       vymenované zvlášť - inak by ostali s predvoleným vzhľadom prehliadača. */
    .form-field input, .form-field textarea, .form-field select,
    .variant-row input, .variant-row select,
    .blackout-row input, .blackout-row select,
    .data-table input, .data-table select,
    .data-table-filter-row input, .data-table-filter-row select {
        width: 100%;
        padding: 0.5rem 0.65rem;
        border: 1px solid var(--color-input-border);
        border-radius: var(--radius);
        background: var(--color-surface);
        color: var(--color-text);
        font-size: 0.9rem;
        box-sizing: border-box;
    }

    /* Stavy polí (docs/architecture.md, bod 6): pole ostáva biele a odlišuje sa okrajom, sivé
       pozadie je vyhradené pre vypnuté/len na čítanie. Zameranie je rovnaké ako na auth
       stránkach (.mk-input:focus). Validačný obrys (.invalid/.valid.modified) má prednosť. */
    :is(.form-field, .variant-row, .blackout-row, .data-table, .data-table-filter-row) :is(input, textarea, select):focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.2);
    }

    :is(.form-field, .variant-row, .blackout-row, .data-table, .data-table-filter-row) :is(input, textarea, select):focus:not(.invalid, .valid.modified) {
        outline: none;
    }

    :is(.form-field, .variant-row, .blackout-row, .data-table, .data-table-filter-row) :is(input, textarea, select):is(:disabled, [readonly]) {
        background: var(--color-bg);
        color: var(--color-text-muted);
        cursor: not-allowed;
    }

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .form-check input {
        width: auto;
    }

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.totals {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.error-list {
    background: #fef3f2;
    border: 1px solid #fda29b;
    color: var(--color-danger);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

    .error-list ul {
        margin: 0;
        padding-left: 1.1rem;
    }

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 18, 25, 0.45);
    display: flex;
    /* Okno je v strede obrazovky zvislo aj vodorovne (rozhodnutie Petra 2.10.2026). */
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    z-index: 1000;
}

/* Rám okna vykresľuje Shared/Components/ModalDialog.razor: záhlavie + obsah. overflow: hidden,
   aby sivé záhlavie rešpektovalo zaoblené rohy okna. */
.modal-dialog {
    background: var(--color-surface);
    border-radius: var(--radius);
    width: 100%;
    max-width: 560px;
    /* Vyššie okno než obrazovka (rezervácia s veľa položkami): okno ostane vycentrované a celé
       viditeľné, posúva sa len jeho telo - záhlavie s krížikom je stále na očiach. */
    max-height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(15, 18, 25, 0.2);
    overflow: hidden;
}

/* Formuláre s viacerými stĺpcami alebo opakovanými riadkami (rezervácia, produkt). */
.modal-dialog-wide {
    max-width: 920px;
}

/* Jemne odlíšené záhlavie (rozhodnutie Petra 2.10.2026): rovnaké sivé pozadie a čiara ako
   hlavička tabuľky. Zámerne nie farba značky - jediný výrazný prvok okna má byť tlačidlo Uložiť. */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem 0.85rem 1.5rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

    .modal-header h2 {
        margin: 0;
        font-size: 1.1rem;
    }

.modal-close {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: var(--radius);
    background: none;
    color: var(--color-text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

    .modal-close:hover {
        background: var(--color-border);
        color: var(--color-text);
    }

.modal-header {
    flex-shrink: 0;
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
}

    /* Sekcie vo vnútri okna (Zákazník, Položky, Varianty): prvá sa nemá odsadzovať od záhlavia. */
    .modal-body h2 {
        font-size: 1.05rem;
        margin: 1.5rem 0 0.75rem;
    }

    .modal-body form > h2:first-child {
        margin-top: 0;
    }

/* Jednoriadkové zhrnutie nad formulárom v okne (rezervácia: zákazník, termín, stav). */
.modal-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* Odsunie deštruktívnu akciu (Zmazať) na ľavý okraj, Zrušiť/Uložiť ostanú vpravo. */
.form-actions-spacer {
    flex: 1;
}

.variant-row, .blackout-row {
    display: grid;
    grid-template-columns: 1fr 120px auto;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.blackout-row {
    grid-template-columns: 1fr 1fr auto;
}

.badge {
    display: inline-block;
    /* Štítok je jeden celok - "Čaká na schválenie" sa v úzkom stĺpci nesmie zalomiť. */
    white-space: nowrap;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}
/* Viac ikonových tlačidiel v jednom riadku tabuľky (ceruzka, kôš) - malá medzera medzi nimi. */
.data-table-actions .btn-icon + .btn-icon {
    margin-left: 0.35rem;
}

/* Ikona kategórie v tabuľke a vo výbere (CategoryIcon.razor, písmo je v icons.css). */
.data-table .category-icon {
    font-size: 1.25rem;
    color: var(--color-text-muted);
}

/* Mriežka na výber ikony v okne kategórie. Výška je obmedzená a mriežka sa posúva, aby 60+ ikon
   nenatiahlo okno cez celú obrazovku. */
.icon-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
    gap: 0.35rem;
    max-height: 11.5rem;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius);
}

.icon-picker-option {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: none;
    color: var(--color-text);
    font-size: 1.35rem;
    cursor: pointer;
}

    .icon-picker-option:hover {
        background: var(--color-bg);
    }

.icon-picker-option-selected {
    border-color: var(--color-primary);
    background: rgba(47, 111, 237, 0.1);
    color: var(--color-primary);
}

/* Šípky na ručné poradie riadkov (kategórie, spôsoby dopravy) - pred ceruzkou a košom. */
.data-table-move {
    display: inline-flex;
    gap: 0.2rem;
    margin-right: 0.6rem;
}

/* Pri zoradenej alebo filtrovanej tabuľke šípky nedávajú zmysel; ostávajú v rozložení, aby stĺpec
   akcií nemenil šírku. */
.data-table-move-hidden {
    visibility: hidden;
}

.btn-icon:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Nastavenia - logo tenanta: náhľad vľavo, akcie vedľa neho. */
.logo-settings {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 14rem;
    max-width: 22rem;
    min-height: 7rem;
    padding: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    font-size: 0.9rem;
    text-align: center;
}

    .logo-preview img {
        max-width: 100%;
        max-height: 9rem;
    }

.logo-actions {
    display: flex;
    gap: 0.5rem;
}

/* Vstup pre súbor je skrytý vo vnútri <label class="btn">, klik na tlačidlo otvorí výber súboru. */
.logo-file-input {
    display: none;
}

/* Nastavenia - farba rezervačnej stránky: výber vľavo, zmenšený náhľad vedľa. */
.theme-settings {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.theme-picker {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
}

.theme-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.theme-swatch {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 2px solid var(--color-surface);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--color-border);
    cursor: pointer;
}

.theme-swatch-selected {
    box-shadow: 0 0 0 2px var(--color-text);
}

.theme-custom {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
}

    .theme-custom input[type=color] {
        width: 2.6rem;
        height: 2rem;
        padding: 0;
        border: 1px solid var(--color-input-border);
        border-radius: var(--radius);
        background: var(--color-surface);
        cursor: pointer;
    }

    .theme-custom code {
        color: var(--color-text-muted);
    }

/* Farby náhľadu prichádzajú inline (--tp-ac, --tp-on), tie isté dve hodnoty ako na /reserve. */
.theme-preview {
    width: 15rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    font-size: 0.85rem;
}

.theme-preview-top {
    background: var(--tp-ac);
    color: var(--tp-on);
    padding: 0.7rem 0.9rem;
    font-weight: 700;
}

.theme-preview-body {
    padding: 0.8rem 0.9rem 0.9rem;
}

.theme-preview-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.7rem;
    border: 1px solid color-mix(in srgb, var(--tp-ac) 28%, #ffffff);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--tp-ac) 10%, #ffffff);
}

.theme-preview-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--tp-ac);
    color: var(--tp-on);
    font-size: 0.75rem;
    font-weight: 700;
}

.theme-preview-button {
    background: var(--tp-ac);
    color: var(--tp-on);
    border-radius: var(--radius);
    padding: 0.55rem;
    text-align: center;
    font-weight: 700;
}

/* Odkaz, ktorý vyzerá ako tlačidlo (napr. "Otvoriť rezervačnú stránku" v Nastaveniach). */
a.btn {
    text-decoration: none;
}

/* Fotky produktu v okne úpravy (ProductPhotosEditor): dlaždice s náhľadom, pod každou presun
   a zmazanie; posledná dlaždica pridáva ďalšie. */
.photo-hint {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-top: -0.25rem;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.photo-tile {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow: hidden;
}

    .photo-tile img {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

.photo-main {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
}

.photo-tile-actions {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.4rem;
}

.photo-add {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
    padding: 0.75rem;
    border: 2px dashed var(--color-input-border);
    border-radius: var(--radius);
    color: var(--color-primary);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

    .photo-add:hover {
        border-color: var(--color-primary);
    }

.photo-add-busy {
    color: var(--color-text-muted);
    cursor: progress;
}

/* Upozornenie, že rezervačný formulár je vypnutý (ReservationReadinessBanner) - na vrchu každej
   admin stránky, kým tenant nedoplní e-mail a bankový účet. */
.readiness-banner {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid #f0c36d;
    border-left-width: 4px;
    border-radius: var(--radius);
    background: #fff8e6;
    color: #5c4300;
}

    .readiness-banner strong {
        font-size: 1.05rem;
    }

    .readiness-banner p {
        margin: 0.35rem 0;
    }

    .readiness-banner ul {
        margin: 0 0 0.75rem;
        padding-left: 1.25rem;
    }

    .readiness-banner .btn {
        background: #ffffff;
    }

/* Pokročilé nastavenia: pevné šírky stĺpcov, aby hodnota (IBAN, adresa, e-mail) mala miesto
   a pri editácii sa tabuľka neprekresľovala na inú šírku. Dlhá hodnota sa zalomí. */
.config-table {
    table-layout: fixed;
}

    .config-table th:nth-child(1) {
        width: 17%;
    }

    .config-table th:nth-child(2) {
        width: 26%;
    }

    .config-table th:nth-child(4) {
        width: 11rem;
    }

    .config-table td {
        overflow-wrap: anywhere;
    }

/* Farby stavov rezervácie - jedna sada pre štítok v zozname a detaile (.badge-*) aj pre pruh
   v kalendári (.cal-bar-*), každý zo šiestich stavov má vlastnú (rozhodnutie Petra 6.10.2026):
   čaká žltá, rezervované modrá, aktívne zelená, dokončené sivá, zrušené červená, zamietnuté
   fialová. Vždy trojica svetlé pozadie / okraj / tmavý text toho istého odtieňa. */
.badge-pending, .cal-bar-pending {
    background: #fff4d6;
    border-color: #f0c36d;
    color: #7a5200;
}

.badge-reserved, .cal-bar-reserved {
    background: #e3ecfd;
    border-color: #b9cdf7;
    color: #1d4fb8;
}

/* .badge-positive / .badge-negative: tie isté farby pre áno-nie stavy mimo rezervácií (aktívna
   a pozastavená požičovňa v správe platformy). */
.badge-active, .cal-bar-active, .badge-positive {
    background: #dcf5e4;
    border-color: #a6d8b9;
    color: #17633a;
}

.badge-completed, .cal-bar-completed {
    background: #eceef2;
    border-color: #d3d7df;
    color: #4b5563;
}

.badge-cancelled, .cal-bar-cancelled, .badge-negative {
    background: #fdecea;
    border-color: #f1a9a0;
    color: #b42318;
}

.badge-rejected, .cal-bar-rejected {
    background: #f3ebfd;
    border-color: #cfb8f3;
    color: #6b2fb8;
}

/* Žiadosť čakajúca na schválenie má byť v zozname vidno na prvý pohľad. */
.badge-pending {
    font-weight: 600;
}

/* Detail rezervácie: rozhodnutie o žiadosti čakajúcej na schválenie (alebo dôvod, prečo bola
   zamietnutá) nad formulárom. */
.approval-panel {
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid #f0c36d;
    border-left-width: 4px;
    border-radius: var(--radius);
    background: #fff8e6;
}

    .approval-panel p {
        margin: 0 0 0.75rem;
    }

    .approval-panel small {
        color: var(--color-text-muted);
    }

.approval-panel-rejected {
    border-color: var(--color-border);
    background: var(--color-bg);
}

    .approval-panel-rejected p {
        margin: 0.35rem 0 0;
        white-space: pre-line;
    }

.approval-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Detail rezervácie: platobné údaje, ktoré dostal zákazník, a upozornenie na neodoslaný e-mail. */
.payment-info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1.5rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    font-size: 0.9rem;
}

    .payment-info strong {
        flex-basis: 100%;
    }

.approval-panel-warning {
    border-color: #f1a9a0;
    background: #fdf1ef;
}

.badge-email-failed {
    background: #fdf1ef;
    border-color: #f1a9a0;
    color: #b42318;
    font-weight: 700;
    cursor: help;
}

.success-message {
    margin-bottom: 1.25rem;
    padding: 0.6rem 1rem;
    border: 1px solid #a6d8b9;
    border-radius: var(--radius);
    background: #eefaf2;
    color: #17633a;
}

/* Záznam skrytý z rezervačnej stránky (tlačidlo oka): riadok ostáva v tabuľke, len stlmený;
   tlačidlá v ňom ostávajú plne viditeľné, aby sa dal vrátiť späť. */
.data-table-row-hidden td:not(.data-table-actions) {
    color: var(--color-text-muted);
    opacity: 0.6;
}

/* Oko v stave "skryté". */
.btn-icon-off {
    color: var(--color-text-muted);
    background: var(--color-bg);
}

/* ---- Kalendár rezervácií (Features/Calendar, docs/architecture.md bod 10) ----
   Mesiac aj týždeň sú týždňové riadky: pod sebou dve vrstvy s rovnakými siedmimi stĺpcami -
   .cal-days kreslí bunky dní, .cal-bars na nich drží pruhy rezervácií (stĺpec/riadok mriežky
   prichádza zo CalendarLayout). Riadok rastie s počtom pruhov, nič sa neskrýva za "+3 ďalšie". */
.cal-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.cal-nav, .cal-views {
    display: flex;
    gap: 0.35rem;
}

.cal-period {
    flex: 1;
    margin: 0;
    font-size: 1.15rem;
}

    .cal-period::first-letter {
        text-transform: uppercase;
    }

.cal-view-active, .cal-view-active:hover {
    background: var(--color-text);
    border-color: var(--color-text);
    color: var(--color-surface);
}

.cal {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.cal-weekdays, .cal-days, .cal-bars {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-weekdays {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

    .cal-weekdays > div {
        padding: 0.5rem 0.6rem;
    }

.cal-weekday-today {
    color: var(--color-primary);
}

.cal-week {
    position: relative;
    min-height: 6.5rem;
}

    .cal-week + .cal-week {
        border-top: 1px solid var(--color-border);
    }

.cal-detailed .cal-week {
    min-height: 22rem;
}

.cal-days {
    position: absolute;
    inset: 0;
}

.cal-day {
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
}

    .cal-day + .cal-day {
        border-left: 1px solid var(--color-border);
    }

.cal-day-outside {
    background: var(--color-bg);
    color: var(--color-text-muted);
}

.cal-day-today {
    background: #eef4ff;
}

    .cal-day-today .cal-day-number {
        display: inline-block;
        min-width: 1.5rem;
        padding: 0 0.3rem;
        border-radius: 999px;
        background: var(--color-primary);
        color: white;
        font-weight: 600;
        text-align: center;
    }

/* Nad vrstvou dní; miesto hore patrí číslu dňa (v týždni je dátum v záhlaví, stačí malý odstup). */
.cal-bars {
    position: relative;
    row-gap: 3px;
    padding: 2rem 0 0.5rem;
    pointer-events: none;
}

.cal-detailed .cal-bars {
    padding-top: 0.5rem;
    row-gap: 6px;
}

.cal-bar {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    margin: 0 4px;
    padding: 0.15rem 0.5rem;
    /* Farby (pozadie, okraj, text) dáva stav - .cal-bar-*, spoločné so štítkami. */
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    font: inherit;
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
    pointer-events: auto;
}

    .cal-bar:hover {
        filter: brightness(0.96);
    }

    .cal-bar:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 1px;
    }

    .cal-bar span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.cal-bar-title {
    font-weight: 600;
}

.cal-bar-detail {
    opacity: 0.85;
}

.cal-detailed .cal-bar {
    padding: 0.4rem 0.6rem;
}

/* Rezervácia pokračuje z predošlého / do ďalšieho týždňa: pruh ide až po okraj a nie je zaoblený. */
.cal-bar-cut-start {
    margin-left: 0;
    border-left-width: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.cal-bar-cut-end {
    margin-right: 0;
    border-right-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Farbu pruhu určuje stav - spoločné pravidlá so štítkami (.badge-*, vyššie). Čo sa neuskutoční
   (zrušené, zamietnuté), je navyše prečiarknuté a má prerušovaný okraj, aby to bolo poznať aj
   bez rozlišovania farieb. */
.cal-bar-cancelled, .cal-bar-rejected {
    border-style: dashed;
}

    .cal-bar-cancelled .cal-bar-title, .cal-bar-rejected .cal-bar-title {
        text-decoration: line-through;
    }

.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin-top: 0.85rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

    .cal-legend span {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }

    .cal-legend i {
        width: 1.1rem;
        height: 0.8rem;
        border-width: 1px;
        border-style: solid;
        border-radius: 3px;
    }

.cal-empty {
    margin-top: 1rem;
    color: var(--color-text-muted);
}

/* Okno synchronizácie s externým kalendárom. */
.cal-sync-intro, .cal-sync-note {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.cal-sync-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

    .cal-sync-actions a.btn {
        text-decoration: none;
    }

.cal-sync-heading {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.cal-sync-steps {
    margin: 0 0 1rem;
    padding-left: 1.1rem;
    font-size: 0.9rem;
}

    .cal-sync-steps li + li {
        margin-top: 0.4rem;
    }

@media (max-width: 720px) {
    .cal-period {
        order: -1;
        flex-basis: 100%;
    }

    .cal-weekdays > div, .cal-day {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .cal-bar {
        margin: 0 1px;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
}

/* Výber viditeľných stĺpcov nad tabuľkou (DataTable, docs/architecture.md bod 6): tlačidlo vpravo
   a pod ním panel so zaškrtávacími políčkami; klik mimo panela ho zatvorí (rovnaká priehľadná
   vrstva ako pri filtri). */
.data-table-toolbar {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.6rem;
}

.data-table-column-panel {
    position: absolute;
    top: 2.6rem;
    right: 0;
    z-index: 31;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 13rem;
    padding: 0.9rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(15, 18, 25, 0.18);
}

    .data-table-column-panel label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        cursor: pointer;
    }

    .data-table-column-panel .btn-link {
        align-self: flex-start;
        margin-top: 0.3rem;
    }

        .data-table-column-panel .btn-link:disabled {
            color: var(--color-text-muted);
            text-decoration: none;
            cursor: default;
        }

/* Rám tabuľky (DataTable): tabuľka širšia než stránka - veľa zapnutých stĺpcov - sa posúva
   vodorovne v ňom, takže okraje stránky a tlačidlo "Stĺpce" ostávajú zarovnané. Okraj a zaoblenie
   preto nesie rám, nie tabuľka, aby pri posúvaní nezmizli. */
.data-table-scroll {
    overflow-x: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

    /* overflow: visible - s pôvodným hidden by sa prilepený stĺpec nižšie nemal o čo oprieť. */
    .data-table-scroll > .data-table {
        border: none;
        border-radius: 0;
        overflow: visible;
    }

    /* Stĺpec s tlačidlami riadku (oko, ceruzka) ostáva pri posúvaní prilepený vpravo - riadok sa dá
       upraviť bez toho, aby bolo treba dôjsť na koniec tabuľky. Potrebuje vlastné pozadie, inak by
       cezeň presvitali bunky pod ním; tieň naznačuje, že pod ním tabuľka pokračuje. */
    .data-table-scroll .data-table-actions {
        position: sticky;
        right: 0;
        background: var(--color-surface);
        box-shadow: -8px 0 8px -8px rgba(15, 18, 25, 0.12);
    }

    .data-table-scroll th.data-table-actions,
    .data-table-scroll tbody tr:hover .data-table-actions {
        background: var(--color-bg);
    }

/* Detail rezervácie, riadok Stav / Zaplatená suma / Spôsob dopravy: suma dostane len toľko, koľko
   číslo potrebuje, zvyšok si delia stav a doprava (tá viac - v ponuke je názov aj s cenou). */
.form-row-order {
    grid-template-columns: minmax(0, 1fr) 11rem minmax(0, 2fr);
}

@media (max-width: 720px) {
    .form-row-order {
        grid-template-columns: 1fr;
    }
}

/* ---- Prijaté platby (Features/Payments) ---- */

/* "Nahrať výpis" vyzerá ako tlačidlo, ale je to <label> okolo skrytého poľa na súbor - klik naň
   otvorí výber súboru priamo, bez JavaScriptu. */
.payments-upload {
    position: relative;
    overflow: hidden;
}

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

.payments-upload-busy {
    opacity: 0.6;
    pointer-events: none;
}

/* Stav spojenia s Fio nad tabuľkou: zelená = sťahuje sa, žltá = posledný pokus zlyhal (skúsi sa
   znova), červená = token odmietnutý (treba zásah), sivá = účet nie je pripojený. */
.payments-sync {
    margin-bottom: 1.25rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.9rem;
}

.payments-sync-ok {
    background: #eefaf2;
    border-color: #a6d8b9;
    color: #17633a;
}

.payments-sync-warning {
    background: #fff4d6;
    border-color: #f0c36d;
    color: #7a5200;
}

.payments-sync-error {
    background: #fdecea;
    border-color: #f1a9a0;
    color: #b42318;
}

.payments-sync-off {
    background: var(--color-surface);
    color: var(--color-text-muted);
}

/* Riadok o stave úlohy na pozadí v správe platformy. */
.platform-job-status {
    margin: -0.5rem 0 1.25rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* Náhľad výpisu pred importom: dlhý výpis sa posúva v okne, tlačidlá ostávajú pod ním. */
.payments-preview {
    max-height: 22rem;
    overflow-y: auto;
    margin-bottom: 1rem;
}

/* Viac tlačidiel vpravo v záhlaví stránky (Platby: stiahnuť z Fio + nahrať výpis). */
.page-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Obal tlačidla "Stiahnuť z Fio" nesie nápoveď pre neaktívny stav: neaktívne tlačidlo myš
   neprijíma, aby nabehnutie dostal obal. */
.payments-fio-button {
    display: inline-flex;
}

    .payments-fio-button .btn:disabled {
        pointer-events: none;
        opacity: 0.55;
    }

    .payments-fio-button[title] {
        cursor: help;
    }

/* ---- Faktúra (Features/Invoices/InvoiceDialog.razor) ---- */

/* PDF v ráme modálneho okna - vysoké toľko, koľko obrazovka dovolí, aby bola faktúra čitateľná. */
.invoice-frame {
    display: block;
    width: 100%;
    /* Okraj sa počíta do šírky - inak je rám o 2px širší než telo okna a to dostane vodorovný posuvník. */
    box-sizing: border-box;
    height: min(70vh, 900px);
    margin-bottom: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
}

/* Stav rezervácie a tlačidlo Faktúra vpravo v súhrnnom riadku detailu rezervácie. */
.modal-summary-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

/* Odkaz v tvare tlačidla (Uložiť PDF) nemá byť podčiarknutý. */
.form-actions a.btn {
    text-decoration: none;
}