@import '_content/Havit.Blazor.Components.Web.Bootstrap/Havit.Blazor.Components.Web.Bootstrap.0hqt4twfv7.bundle.scp.css';

/* /Components/Bookings/ReservationDocumentList.razor.rz.scp.css */
/* Brand accent comes from the shared theme tokens (--theme-color / -strong) activated by
   data-theme on the host page. The neutral colours are defined here, so the list looks the same
   on the status page and in the account. */
.docs[b-gcwoknaly8] {
    --doc-ink: #2b2b28;
    --doc-ink-soft: #5f6460;
    --doc-hairline: #e6e6df;
    --doc-grey-tint: #eef0ee;
    --doc-amber: #c9821f;
}

.doc-list[b-gcwoknaly8] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .7rem;
}

.doc[b-gcwoknaly8] {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: .9rem;
    align-items: center;
    padding: .9rem 1rem;
    border: 1px solid var(--doc-hairline);
    border-radius: 14px;
    background: #fff;
}

.doc-ico[b-gcwoknaly8] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--doc-grey-tint);
}

.doc-ico svg[b-gcwoknaly8] {
    width: 21px;
    height: 21px;
    stroke: var(--doc-ink-soft);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.doc-body[b-gcwoknaly8] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.doc-title[b-gcwoknaly8] {
    font-size: .96rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--doc-ink);
    overflow-wrap: anywhere;
}

.doc-meta[b-gcwoknaly8] {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .8rem;
    font-size: .84rem;
    line-height: 1.45;
    color: var(--doc-ink-soft);
}

.doc-state[b-gcwoknaly8] {
    font-weight: 700;
}

.doc-state.is-paid[b-gcwoknaly8] {
    color: var(--theme-strong);
}

.doc-state.is-due[b-gcwoknaly8] {
    color: var(--doc-amber);
}

/* Vedlejší tlačítko — stažení není hlavní akce stránky. */
.doc-btn[b-gcwoknaly8] {
    padding: .5rem .95rem;
    border: 1px solid var(--theme-color);
    border-radius: 10px;
    background: #fff;
    color: var(--theme-strong);
    font-size: .86rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.doc-btn:hover[b-gcwoknaly8] {
    background: var(--theme-color);
    color: #fff;
}

.doc-note[b-gcwoknaly8] {
    margin: 1rem 0 0;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--doc-ink-soft);
}

.docs > .doc-note:first-child[b-gcwoknaly8] {
    margin-top: 0;
}

/* Stejný drobný nadpis jako „Dokumenty ke stažení" nad seznamem na stránce stavu. */
.doc-heading[b-gcwoknaly8] {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--doc-ink-soft);
    margin: 1.9rem 0 1rem;
    font-weight: 700;
}

.doc-links[b-gcwoknaly8] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.6rem;
}

.doc-links a[b-gcwoknaly8] {
    color: var(--theme-strong);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
}

.doc-links a:hover[b-gcwoknaly8] {
    text-decoration: underline;
}

/* Na úzkém displeji jde tlačítko pod text přes celou šířku řádku — vedle názvu by ho
   zmáčklo na dvě slova na řádek. */
@media (max-width: 480px) {
    .doc[b-gcwoknaly8] {
        grid-template-columns: 34px 1fr;
        gap: .75rem;
    }

    .doc-ico[b-gcwoknaly8] {
        width: 34px;
        height: 34px;
    }

    .doc-btn[b-gcwoknaly8] {
        grid-column: 1 / -1;
        text-align: center;
    }
}
/* /Components/Bookings/ReservationOfferPanel.razor.rz.scp.css */
/* Brand accent comes from the shared theme tokens (--theme-color / -strong) activated by
   data-theme on the host page. The semantic colours stay fixed on both brands and are defined
   here, so the offer looks the same on the status page and in the account. */
.offer-panel[b-02cedyd6ap] {
    --offer-ink: #2b2b28;
    --offer-ink-soft: #5f6460;
    --offer-hairline: #e6e6df;
    --offer-amber: #c9821f;
    --offer-amber-tint: #fbf1e0;

    text-align: left;
    color: var(--offer-ink);
}

.offer-lines[b-02cedyd6ap] {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
    color: var(--offer-ink);
}

.offer-lines td[b-02cedyd6ap] {
    padding: .35rem 0;
    vertical-align: top;
}

/* Částky pod sebou a nikdy zalomené — sloupec s cenou se čte odshora dolů. */
.offer-amount[b-02cedyd6ap] {
    text-align: right;
    white-space: nowrap;
    padding-left: 1rem;
}

.offer-total td[b-02cedyd6ap] {
    border-top: 1px solid var(--offer-hairline);
    padding-top: .6rem;
    font-weight: 700;
}

/* Odstavec „do kdy termín držíme". Bílé pozadí s rámečkem, aby se neztratil mezi ostatními
   větami ani v tónovaném pruhu stavové stránky — je to jediná informace, kterou si host musí
   odnést. */
.offer-note[b-02cedyd6ap] {
    margin: 1rem 0 0;
    padding: .8rem .9rem;
    background: #fff;
    border: 1px solid var(--offer-hairline);
    border-radius: 10px;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--offer-ink);
}

.offer-note.is-ok[b-02cedyd6ap] {
    border-color: var(--theme-color);
}

.offer-note.is-expired[b-02cedyd6ap] {
    background: var(--offer-amber-tint);
    border-color: var(--offer-amber);
    color: var(--offer-amber);
}

.offer-validity[b-02cedyd6ap] {
    margin: .8rem 0 0;
    font-size: .9rem;
    color: var(--offer-ink-soft);
}

.offer-error[b-02cedyd6ap] {
    margin: .8rem 0 0;
    font-size: .9rem;
    color: #b03a3a;
}

.offer-terms[b-02cedyd6ap] {
    margin: 1rem 0 0;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--offer-ink-soft);
}

.offer-terms a[b-02cedyd6ap] {
    color: var(--theme-strong);
    font-weight: 600;
}

/* Vzhled je společný .page-btn (stejné tlačítko jako „Odeslat" ve zprávách pod panelem).
   Popisek je ale dlouhý (§ 1826a OZ: „… s povinností platby") a na telefonu se do řádku
   nevejde — .page-btn má nowrap, tady se smí zalomit. */
.offer-accept[b-02cedyd6ap] {
    margin-top: 1rem;
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

.offer-accept:disabled[b-02cedyd6ap] {
    opacity: .6;
    cursor: progress;
}
/* /Components/Bookings/ReservationStatusSteps.razor.rz.scp.css */
/* Brand accent comes from the shared theme tokens (--theme-color) activated by data-theme on
   the host page. The semantic colours stay fixed on both brands and are defined here, so the
   timeline looks the same on the status page and in the account. */
.steps[b-xbggh8qqn4] {
    --step-ink: #2b2b28;
    --step-ink-soft: #5f6460;
    --step-hairline: #e6e6df;
    --step-grey-tint: #eef0ee;
    --step-amber: #c9821f;
    --step-amber-tint: #fbf1e0;
    --step-gap: 1.2rem;

    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--step-gap);
}

.steps li[b-xbggh8qqn4] {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: .95rem;
    align-items: start;
    position: relative;
    color: var(--step-ink);
}

/* Spojnice mezi kolečky. Kreslí ji položka, ne kolečko: délku tak určuje výška kroku
   i s mezerou, a čára dosáhne k dalšímu kolečku i u kroku s tlačítkem nebo delším popiskem. */
.steps li:not(:last-child)[b-xbggh8qqn4]::after {
    content: "";
    position: absolute;
    top: 34px;
    bottom: calc(2px - var(--step-gap));
    left: 15px;
    width: 2px;
    background: var(--step-hairline);
}

.step-ico[b-xbggh8qqn4] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .9rem;
    font-weight: 700;
    /* Neutrální šedá, ne brandový tón: na zeleném tématu se světle zelené kolečko čte
       jako „hotovo“, i když je to krok, na který teprve dojde. Barvu smí nést jen
       dokončený (brand) a právě probíhající (amber) krok. */
    background: var(--step-grey-tint);
    color: var(--step-ink-soft);
    position: relative;
}

.steps li.done .step-ico[b-xbggh8qqn4] {
    background: var(--theme-color);
    color: #fff;
}

.steps li.current .step-ico[b-xbggh8qqn4] {
    background: var(--step-amber);
    color: #fff;
    box-shadow: 0 0 0 5px var(--step-amber-tint);
}

.step-txt strong[b-xbggh8qqn4] {
    display: block;
    font-size: 1rem;
    margin-bottom: .12rem;
    color: var(--step-ink);
}

/* Blok, ne inline: jinak tlačítko kroku doběhne za poslední řádek popisku
   („…kteří přijedou. [Vyplnit check-in]“) a nafoukne řádkování odstavce. */
.step-txt span[b-xbggh8qqn4] {
    display: block;
    font-size: .92rem;
    color: var(--step-ink-soft);
    line-height: 1.5;
}

/* Akce uvnitř kroku — dnes jen online check-in. Plná barva: je to jediná věc, kterou má
   host na stránce udělat. */
.step-btn[b-xbggh8qqn4] {
    display: inline-flex;
    align-items: center;
    margin-top: .75rem;
    padding: .5rem 1.05rem;
    border-radius: 999px;
    background: var(--theme-color);
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}

.step-btn:hover[b-xbggh8qqn4],
.step-btn:focus-visible[b-xbggh8qqn4] {
    background: var(--theme-strong);
    color: #fff;
    transform: translateY(-1px);
}
/* /Components/Bookings/ReservationStaySummary.razor.rz.scp.css */
/* Příjezd vlevo, odjezd vpravo, noci na spojnici mezi nimi — čte se jako letenka. Termín je to,
   kvůli čemu host stránku otevřel, proto nese největší písmo; noci a hosté jsou doplněk.

   Barvu značky bere z tokenů tématu (--theme-color / -strong / -tint) přes data-theme hostitelské
   stránky. Vodorovné odsazení obou pruhů určuje hostitel proměnnou --stay-inset (dědí se do
   komponenty i bez ::deep) — na stránce stavu jde souhrn přes celou šířku karty, v účtu
   v kartě bez vlastního paddingu. */
.stay[b-6mfpsfogy2] {
    --stay-ink: #2b2b28;
    --stay-ink-soft: #5f6460;
    --stay-hairline: #e6e6df;
    /* Čárkovaná spojnice — zesvětlená barva značky, ať sedí na obou tématech. */
    --stay-rail: color-mix(in srgb, var(--theme-color) 40%, #fff);
}

/* Data berou šířku podle obsahu a spojnice s nocemi zbytek — při 1fr auto 1fr by prostřední
   sloupec dostal jen minimum a z čárkování by zbyly dva pahýly. */
.stay-dates[b-6mfpsfogy2] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem var(--stay-inset, 0px);
}

.stay-out[b-6mfpsfogy2] {
    text-align: right;
}

.k[b-6mfpsfogy2] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--stay-ink-soft);
}

.stay-day[b-6mfpsfogy2] {
    margin-top: .2rem;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--stay-ink);
}

.stay-sub[b-6mfpsfogy2] {
    margin-top: .15rem;
    font-size: .84rem;
    color: var(--stay-ink-soft);
}

/* Čárkovaná spojnice po obou stranách pilulky; roste se šířkou karty. */
.stay-nights[b-6mfpsfogy2] {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 7.5rem;
}

.stay-nights[b-6mfpsfogy2]::before,
.stay-nights[b-6mfpsfogy2]::after {
    content: "";
    flex: 1;
    min-width: .9rem;
    border-top: 1.5px dashed var(--stay-rail);
}

.stay-nights-pill[b-6mfpsfogy2] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: var(--theme-tint);
    color: var(--theme-strong);
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}

.stay-nights-pill svg[b-6mfpsfogy2] {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
}

.stay-guests[b-6mfpsfogy2] {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem var(--stay-inset, 0px);
    border-top: 1px solid var(--stay-hairline);
    background: #fafaf7;
    font-size: .92rem;
    color: var(--stay-ink);
}

.stay-guests svg[b-6mfpsfogy2] {
    flex: none;
    width: 18px;
    height: 18px;
    stroke: var(--theme-strong);
    stroke-width: 1.7;
    stroke-linecap: round;
}

/* Na telefonu se vedle sebe nevejdou dlouhé měsíce („ne 15. listopadu“, „Sa., 10. Dezember“) —
   souhrn se přeskládá do svislé osy: plný puntík příjezd, spojnice s nocemi, prázdný puntík
   odjezd. Spojnici skládají tři úseky (pod puntíkem příjezdu, přes noci, nad puntíkem
   odjezdu), proto mezi položkami nesmí být mezera — odstup dělá padding. */
@media (max-width: 600px) {
    .stay-dates[b-6mfpsfogy2] {
        display: block;
        padding: 1.2rem var(--stay-inset, 0px) 1.1rem calc(var(--stay-inset, 0px) + 24px);
    }

    .stay-out[b-6mfpsfogy2] {
        text-align: left;
    }

    .stay-end[b-6mfpsfogy2] {
        position: relative;
    }

    .stay-in[b-6mfpsfogy2] {
        padding-bottom: .55rem;
    }

    .stay-end[b-6mfpsfogy2]::before {
        content: "";
        position: absolute;
        left: -24px;
        top: .15rem;
        width: 12px;
        height: 12px;
        box-sizing: border-box;
        border-radius: 50%;
        border: 2px solid var(--theme-color);
        background: var(--theme-color);
    }

    .stay-out[b-6mfpsfogy2]::before {
        background: #fff;
    }

    .stay-in[b-6mfpsfogy2]::after,
    .stay-out[b-6mfpsfogy2]::after,
    .stay-nights[b-6mfpsfogy2]::before {
        content: "";
        position: absolute;
        left: -19px;
        border-left: 1.5px dashed var(--stay-rail);
    }

    .stay-in[b-6mfpsfogy2]::after {
        top: calc(.15rem + 15px);
        bottom: 0;
    }

    .stay-out[b-6mfpsfogy2]::after {
        top: 0;
        height: calc(.15rem - 3px);
    }

    .stay-nights[b-6mfpsfogy2] {
        position: relative;
        display: block;
        min-width: 0;
        padding: .15rem 0 .7rem;
    }

    .stay-nights[b-6mfpsfogy2]::before {
        top: 0;
        bottom: 0;
        width: 0;
        min-width: 0;
        border-top: 0;
    }

    .stay-nights[b-6mfpsfogy2]::after {
        content: none;
    }

    .stay-day[b-6mfpsfogy2] {
        font-size: 1.08rem;
    }
}
/* /Components/Boxes/TextBox.razor.rz.scp.css */
/* /Components/Buttons/SubmitButton.razor.rz.scp.css */
div[b-r9bhaxtxi4] {
    margin: 1rem auto;
    position: relative;
    width: 90%;
    max-width: 30rem;
}

button[b-r9bhaxtxi4] {
    width: 100%;
    height: 100%;
    padding: 1rem 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    background: var(--grey);
    font-size: 1.5rem;
    border: none;
    border-radius: 30px;
    color: var(--form-background-text-area);
    cursor: pointer;
    transition: all .5s;
}

    button:disabled[b-r9bhaxtxi4] {
        cursor: progress;
        opacity: .75;
    }

.submit-spinner[b-r9bhaxtxi4] {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    border: 3px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: submit-spin-b-r9bhaxtxi4 .75s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .submit-spinner[b-r9bhaxtxi4] {
        animation-duration: 2s;
    }
}

@media only screen and (min-width: 992px) {

    .submit-button[b-r9bhaxtxi4] {
        cursor: pointer;
        transition: .3s;
    }

        .submit-button:hover:not(:disabled)[b-r9bhaxtxi4] {
            cursor: pointer;
            background: var(--grey-box-hover-color);
            transition: .5s;
        }
}
/* /Components/Crm/GuestStayList.razor.rz.scp.css */
/* A person's stays. Shared by the guest profile page and the reservation's history card, so the
   rules live with the component rather than with either page. */

.gs-list[b-uenq92lnps] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.gs-row[b-uenq92lnps] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .75rem .9rem;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: .5rem;
}

/* A stay that went wrong. Tinted and edged rather than shouted at — the pill in the header already
   names it, and the point of the colour is to be findable when scanning a list. */
.gs-row.is-problem[b-uenq92lnps] {
    background: #fdf6f5;
    border-color: #edcdc8;
}

.gs-row-head[b-uenq92lnps] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .6rem;
}

.gs-dates[b-uenq92lnps] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    white-space: nowrap;
}

/* The house, said in colour rather than in words repeated on every row. */
.gs-dot[b-uenq92lnps] {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--theme-color, #8a8a8a);
}

.gs-house[b-uenq92lnps] {
    font-size: .88rem;
    color: #666;
}

.gs-pill[b-uenq92lnps] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .5rem;
    font-size: .78rem;
    white-space: nowrap;
    background: #f3f3f3;
    border-radius: 999px;
}

.gs-pill.is-warning[b-uenq92lnps] {
    background: #fbe9e7;
    color: #a13b2d;
}

.gs-pill.is-ok[b-uenq92lnps] {
    background: #eaf3e8;
    color: #3d6b38;
}

.gs-open[b-uenq92lnps] {
    margin-left: auto;
    color: #6a6a6a;
    text-decoration: none;
}

.gs-open:hover[b-uenq92lnps] {
    color: var(--theme-strong, var(--theme-color, #333));
}

.gs-note[b-uenq92lnps],
.gs-cleaning[b-uenq92lnps] {
    margin: 0;
    font-size: .9rem;
    line-height: 1.45;
    white-space: pre-line;
}

.gs-note-label[b-uenq92lnps] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-right: .4rem;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #8a8a8a;
}

.gs-cleaning[b-uenq92lnps] {
    padding-top: .35rem;
    border-top: 1px dashed #e6e6e6;
}

.gs-sub[b-uenq92lnps] {
    display: block;
    font-size: .82rem;
    color: #777;
}
/* /Components/GoogleMaps/Map.razor.rz.scp.css */
/* The frame the pages size and round off (.map-wrap ::deep .map-container); Google draws into
   .map-canvas filling it, and the directions button floats over its top left corner, a corner
   the map keeps free of its own controls (initializeMap.js).

   The pin and the bubble are created by the script inside the canvas, where no scope attribute
   reaches them — hence ::deep. The brand colours arrive through the [data-theme] tokens,
   inherited from the page. */

.map-container[b-59a3zzihdr] {
    z-index: 1;
    width: 80%;
    max-width: 30rem;
    height: 15rem;
    position: relative;
    margin: 0 auto;
    border-radius: 50px;
    overflow: hidden;
    /* What shows until Google has drawn — the map loads only as it nears the viewport. */
    background: var(--theme-tint);
}

/* Its own stacking context: the map's layers carry z-indexes in the hundreds, which would
   otherwise rise above the button. */
.map-canvas[b-59a3zzihdr] {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* 10 px from the edge, level with Google's map type control in the opposite corner. */
.map-navigate[b-59a3zzihdr] {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1.05rem;
    background: var(--theme-color);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .2s ease;
}

    .map-navigate:hover[b-59a3zzihdr] {
        background: var(--theme-strong);
        color: #fff;
    }

    .map-navigate:focus-visible[b-59a3zzihdr] {
        outline: 3px solid #fff;
        outline-offset: 2px;
    }

/* ── Drawn by the script: the pin ─────────────────────────────────────────── */

.map-container[b-59a3zzihdr]  .hm-pin {
    --pin-color: var(--theme-color);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .35));
    transform-origin: bottom center;
    transition: transform .15s ease;
    cursor: pointer;
}

    .map-container[b-59a3zzihdr]  .hm-pin::after {
        content: "";
        width: 0;
        height: 0;
        margin-top: -3px;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-top: 12px solid var(--pin-color);
    }

    .map-container[b-59a3zzihdr]  .hm-pin:hover {
        transform: scale(1.08);
    }

.map-container[b-59a3zzihdr]  .hm-pin-head {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    background: var(--pin-color);
    border: 3px solid #fff;
    border-radius: 50%;
    box-sizing: border-box;
    color: #fff;
}

    .map-container[b-59a3zzihdr]  .hm-pin-head svg {
        display: block;
        width: 32px;
        height: 32px;
        fill: currentColor;
    }

    .map-container[b-59a3zzihdr]  .hm-pin-head .hm-cut {
        fill: var(--pin-color);
    }

/* The name — a white tag starting under the head, so the two read as one sign. */
.map-container[b-59a3zzihdr]  .hm-pin-label {
    position: absolute;
    top: 13px;
    left: 50%;
    padding: .3rem .8rem .3rem calc(27px + .55rem);
    background: #fff;
    border-radius: 999px;
    color: var(--theme-strong);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

/* ── Drawn by the script: the bubble ──────────────────────────────────────── */

.map-container[b-59a3zzihdr]  .hm-info-title {
    color: #2f2f2f;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.map-container[b-59a3zzihdr]  .hm-info {
    max-width: 240px;
    color: #2f2f2f;
    font-size: .85rem;
}

.map-container[b-59a3zzihdr]  .hm-info-address {
    margin: 0 0 .7rem;
    color: #5f5e5a;
    line-height: 1.5;
}

.map-container[b-59a3zzihdr]  .hm-info-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    background: var(--theme-color);
    border-radius: 999px;
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
}

    .map-container[b-59a3zzihdr]  .hm-info-link:hover {
        background: var(--theme-strong);
        color: #fff;
    }

    .map-container[b-59a3zzihdr]  .hm-info-link:focus-visible {
        outline: 3px solid var(--theme-strong);
        outline-offset: 2px;
    }

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .map-navigate[b-59a3zzihdr],
    .map-container[b-59a3zzihdr]  .hm-pin {
        transition: none;
    }
}

@media (min-width: 992px) {

    .map-container[b-59a3zzihdr] {
        max-width: 1200px;
        height: 30rem;
        border-radius: 100px;
        overflow: hidden;
    }
}
/* /Components/Inputs/InputTimeBox.razor.rz.scp.css */
/* The field anchors the pop-up panel, so it has to establish a positioning context. */
.time-box[b-o9kqkq8x4x] {
    position: relative;
}

/* --- Field: bordered shell around a borderless input plus the clock button --- */
.time-field[b-o9kqkq8x4x] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 6px 4px 12px;
    border: 1px solid #d3d1c7;
    border-radius: 10px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

    .time-field:hover[b-o9kqkq8x4x] {
        border-color: var(--theme-strong, var(--theme-color));
    }

    .time-field:focus-within[b-o9kqkq8x4x],
    .time-field.is-open[b-o9kqkq8x4x] {
        border-color: var(--theme-strong, var(--theme-color));
        box-shadow: 0 0 0 2px var(--theme-tint, #eef6ec);
    }

    .time-field.is-invalid[b-o9kqkq8x4x] {
        border-color: #c9483c;
        box-shadow: none;
    }

/* Wins over the page-level ".acc-grid input" rules, which would otherwise draw a second border
   inside the shell. */
.time-field .time-field-input[b-o9kqkq8x4x] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 5px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    color: #2c2c2a;
}

    /* The focus ring belongs to the shell around the input, so the input itself must stay flat
       even against page rules like ".acc-page input:focus". */
    .time-field .time-field-input:focus[b-o9kqkq8x4x] {
        border: none;
        box-shadow: none;
        outline: none;
    }

    .time-field .time-field-input[b-o9kqkq8x4x]::placeholder {
        font-family: inherit;
        color: #c3c2bb;
    }

.time-field-toggle[b-o9kqkq8x4x] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: var(--theme-tint, #eef6ec);
    color: var(--theme-strong, var(--theme-color));
    font-size: .95rem;
    cursor: pointer;
    transition: filter .15s;
}

    .time-field-toggle:hover[b-o9kqkq8x4x] {
        filter: brightness(.95);
    }

.time-error[b-o9kqkq8x4x] {
    display: block;
    margin-top: 4px;
    font-size: .75rem;
    color: #c9483c;
}

/* --- Pop-up panel --- */
.time-backdrop[b-o9kqkq8x4x] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.time-panel[b-o9kqkq8x4x] {
    position: absolute;
    z-index: 1041;
    top: calc(100% + 6px);
    left: 0;
    width: max-content;
    /* Fits both columns at their natural width; the field itself can be narrower. */
    max-width: min(380px, 92vw);
    padding: 12px;
    border: 1px solid #e3e3e0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
}

.time-panel-head[b-o9kqkq8x4x] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f0efeb;
    color: var(--theme-strong, var(--theme-color));
}

.time-panel-value[b-o9kqkq8x4x] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .05em;
    color: #2c2c2a;
}

.time-panel-cols[b-o9kqkq8x4x] {
    display: flex;
    gap: 14px;
}

.time-col[b-o9kqkq8x4x] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .time-col + .time-col[b-o9kqkq8x4x] {
        padding-left: 14px;
        border-left: 1px solid #f0efeb;
    }

.time-col-label[b-o9kqkq8x4x] {
    font-size: .72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #a3a29b;
}

.time-grid[b-o9kqkq8x4x] {
    display: grid;
    gap: 4px;
}

/* Four rows of six keeps the 24-hour block roughly square next to the minutes. */
.time-grid-hours[b-o9kqkq8x4x] {
    grid-template-columns: repeat(6, 1fr);
}

.time-grid-minutes[b-o9kqkq8x4x] {
    grid-template-columns: repeat(3, 1fr);
}

.time-cell[b-o9kqkq8x4x] {
    min-width: 34px;
    padding: 5px 0;
    border: 1px solid transparent;
    border-radius: 7px;
    background: #faf9f6;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    color: #3c3b38;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

    .time-cell:hover[b-o9kqkq8x4x] {
        border-color: var(--theme-strong, var(--theme-color));
        background: var(--theme-tint, #eef6ec);
        color: var(--theme-strong, var(--theme-color));
    }

    .time-cell:focus-visible[b-o9kqkq8x4x] {
        outline: 2px solid var(--theme-strong, var(--theme-color));
        outline-offset: 1px;
    }

    .time-cell.is-selected[b-o9kqkq8x4x] {
        border-color: transparent;
        background: var(--theme-color);
        color: #fff;
        font-weight: 600;
    }
/* /Components/Inputs/InputToggleBox.razor.rz.scp.css */
.input-toggle-container[b-pl8ptul1zb] {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    text-align: left;
    cursor: pointer;
    user-select: none;
}

.input-toggle-label[b-pl8ptul1zb] {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}

    /* Odkaz uvnitř popisku vykresluje ChildContent volajícího, proto ::deep.
       Bez toho zdědí globální bílou barvu odkazů a na bílé kartě zmizí. */
    .input-toggle-label[b-pl8ptul1zb]  a {
        color: var(--theme-strong);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

        .input-toggle-label[b-pl8ptul1zb]  a:hover {
            text-decoration-thickness: 2px;
        }

.input-toggle-track[b-pl8ptul1zb] {
    position: relative;
    display: block;
    width: 3rem;
    height: 1.6rem;
    flex-shrink: 0;
    /* Zarovná přepínač na optickou osu prvního řádku textu. */
    margin-top: .1rem;
}

    .input-toggle-track[b-pl8ptul1zb]  input {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

/* Stav zapnuto řídí třída .is-on odvozená z Value, ne :checked — vazba na
   pseudotřídu cizího elementu by závisela na ::deep i na pořadí sourozenců. */
.input-toggle-thumb[b-pl8ptul1zb] {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 12px;
    transition: background .2s;
}

    .input-toggle-thumb.is-on[b-pl8ptul1zb] {
        background: var(--theme-color);
    }

    .input-toggle-thumb[b-pl8ptul1zb]::after {
        content: '';
        position: absolute;
        width: 1.2rem;
        height: 1.2rem;
        background: white;
        border-radius: 50%;
        top: 0.2rem;
        left: 0.2rem;
        transition: left .2s;
    }

    .input-toggle-thumb.is-on[b-pl8ptul1zb]::after {
        left: calc(100% - 1.4rem);
    }

/* Přepínač je vizuálně skrytý input, focus musí být vidět na dráze. */
.input-toggle-track[b-pl8ptul1zb]  input:focus-visible ~ .input-toggle-thumb {
    outline: 2px solid var(--theme-strong);
    outline-offset: 2px;
}
/* /Components/Inputs/PlaceholderTextEditor.razor.rz.scp.css */
/* The text in one box with the insert menu on top. The box draws the border and lights up in the
   house's colour while the caret is anywhere inside; the field has none of its own. The tags inside
   the field are created by the script, so their rules go through ::deep. */

.pte[b-fzlfw743om] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pte-box[b-fzlfw743om] {
    border: 1px solid #e3e3e0;
    border-radius: 10px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

    .pte-box:focus-within[b-fzlfw743om] {
        border-color: var(--theme-color);
        box-shadow: 0 0 0 3px var(--theme-tint, #f1f5ee);
    }

/* ── Toolbar and menu ── */
.pte-toolbar[b-fzlfw743om] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid #eeede8;
    border-radius: 10px 10px 0 0;
    background: #faf9f6;
}

.pte-insert[b-fzlfw743om] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 8px;
    border: 1px solid #e3e3e0;
    border-radius: 99px;
    background: #fff;
    font-family: inherit;
    font-size: .78rem;
    line-height: 1.4;
    color: #2c2c2a;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s;
}

    .pte-insert .bi[b-fzlfw743om] {
        font-size: .72rem;
        color: #8f8e87;
    }

    .pte-insert .pte-chevron[b-fzlfw743om] {
        font-size: .62rem;
        transition: transform .15s;
    }

    .pte-insert:hover[b-fzlfw743om],
    .pte-insert.is-open[b-fzlfw743om] {
        border-color: var(--theme-strong, var(--theme-color));
        color: var(--theme-strong, #2c2c2a);
    }

        .pte-insert:hover .bi[b-fzlfw743om],
        .pte-insert.is-open .bi[b-fzlfw743om] {
            color: inherit;
        }

    .pte-insert.is-open[b-fzlfw743om] {
        background: var(--theme-tint, #f1f5ee);
    }

        .pte-insert.is-open .pte-chevron[b-fzlfw743om] {
            transform: rotate(180deg);
        }

    .pte-insert:focus-visible[b-fzlfw743om] {
        outline: 2px solid var(--theme-strong, var(--theme-color));
        outline-offset: 1px;
    }

/* Catches the click anywhere else while the menu is open, which closes it. */
.pte-backdrop[b-fzlfw743om] {
    position: fixed;
    inset: 0;
    z-index: 19;
}

.pte-menu[b-fzlfw743om] {
    position: absolute;
    top: calc(100% + 4px);
    left: 8px;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, auto));
    gap: 10px 18px;
    max-width: calc(100vw - 32px);
    padding: 12px 12px 10px;
    border: 1px solid #e3e3e0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .06);
}

.pte-menu-group[b-fzlfw743om] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.pte-menu-heading[b-fzlfw743om] {
    padding: 0 8px 4px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--theme-strong, var(--theme-color));
}

.pte-menu-item[b-fzlfw743om] {
    display: block;
    width: 100%;
    padding: 5px 8px;
    border: none;
    border-radius: 7px;
    background: transparent;
    font-family: inherit;
    font-size: .84rem;
    line-height: 1.4;
    text-align: left;
    white-space: nowrap;
    color: #2c2c2a;
    cursor: pointer;
}

    .pte-menu-item:hover[b-fzlfw743om],
    .pte-menu-item:focus-visible[b-fzlfw743om] {
        background: var(--theme-tint, #f1f5ee);
        color: var(--theme-strong, #2c2c2a);
        outline: none;
    }

@media (max-width: 640px) {
    .pte-menu[b-fzlfw743om] {
        right: 8px;
        grid-template-columns: 1fr;
    }

    .pte-menu-item[b-fzlfw743om] {
        white-space: normal;
    }
}

/* ── The field ── */
.pte-input[b-fzlfw743om] {
    position: relative;
    min-height: 150px;
    padding: 10px 12px;
    border-radius: 0 0 10px 10px;
    outline: none;
    font-family: inherit;
    font-size: .9rem;
    line-height: 1.75;
    color: #2c2c2a;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

    .pte-input.is-empty[b-fzlfw743om]::before {
        content: attr(data-placeholder);
        position: absolute;
        color: #a5a49e;
        pointer-events: none;
    }

    /* A value filled in at print time: one piece the caret steps over, never text to edit. */
    .pte-input[b-fzlfw743om]  .pte-tag {
        display: inline-block;
        margin: 0 1px;
        padding: 0 7px;
        border-radius: 6px;
        background: var(--theme-tint, #f1f5ee);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-strong, #4a6b3a) 22%, transparent);
        font-size: .85em;
        font-weight: 600;
        line-height: 1.6;
        white-space: nowrap;
        color: var(--theme-strong, var(--theme-color));
        cursor: default;
    }

    /* A block of a message template — a box or a button the application draws whole. Dashed and
       with a mark in front, so it does not read as a value that lands inside the sentence. */
    .pte-input[b-fzlfw743om]  .pte-tag.is-block {
        padding: 0 9px 0 7px;
        background: #fff;
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-strong, #4a6b3a) 45%, transparent);
        border: 1px dashed transparent;
        font-weight: 600;
    }

        .pte-input[b-fzlfw743om]  .pte-tag.is-block::before {
            content: "▦";
            margin-right: 5px;
            font-weight: 400;
            opacity: .7;
        }

.pte-menu-item.is-block[b-fzlfw743om]::before {
    content: "▦";
    margin-right: 6px;
    opacity: .55;
}

/* One line — an e-mail subject. */
.pte.is-single .pte-input[b-fzlfw743om] {
    min-height: 0;
    padding: 7px 12px;
    line-height: 1.6;
}

.pte-warning[b-fzlfw743om] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: .75rem;
    line-height: 1.45;
    color: #8a5a00;
}
/* /Components/Inputs/ToggleSwitch.razor.rz.scp.css */
.toggle-switch-container[b-d32tegvtxl] {
    background: white;
    border-radius: 15px;
    padding: 1rem 1.25rem;
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.toggle-switch-label[b-d32tegvtxl] {
    font-size: 14px;
    color: #333;
}

.toggle-switch-track[b-d32tegvtxl] {
    position: relative;
    width: 3rem;
    height: 1.6rem;
    flex-shrink: 0;
}

    .toggle-switch-track input[b-d32tegvtxl] {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

.toggle-switch-thumb[b-d32tegvtxl] {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 12px;
    transition: background .2s;
}

    .toggle-switch-thumb[b-d32tegvtxl]::after {
        content: '';
        position: absolute;
        width: 1.2rem;
        height: 1.2rem;
        background: white;
        border-radius: 50%;
        top: 0.2rem;
        left: 0.2rem;
        transition: left .2s;
    }

.toggle-switch-track input:checked ~ .toggle-switch-thumb[b-d32tegvtxl] {
    background: var(--theme-color);
}

    .toggle-switch-track input:checked ~ .toggle-switch-thumb[b-d32tegvtxl]::after {
        left: calc(100% - 1.4rem);
    }
/* /Components/Pickers/IconPickerBox.razor.rz.scp.css */
/* The field anchors the pop-up panel, so it has to establish a positioning context. */
.icon-picker[b-po78s3o5kg] {
    position: relative;
}

/* --- Trigger --- */
.icon-picker-trigger[b-po78s3o5kg] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddddda;
    border-radius: 10px;
    background: #fff;
    font-size: .88rem;
    text-align: left;
    cursor: pointer;
}

    .icon-picker-trigger:hover[b-po78s3o5kg] {
        border-color: var(--theme-strong, var(--theme-color));
    }

    .icon-picker-trigger:focus-visible[b-po78s3o5kg] {
        outline: none;
        border-color: var(--theme-strong, var(--theme-color));
        box-shadow: 0 0 0 2px var(--theme-tint, #eef6ec);
    }

.icon-picker-preview[b-po78s3o5kg] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--theme-tint, #eef6ec);
    color: var(--theme-strong, var(--theme-color));
    font-size: 1rem;
}

.icon-picker-name[b-po78s3o5kg] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
    color: #3c3b38;
}

    .icon-picker-name.is-empty[b-po78s3o5kg] {
        font-family: inherit;
        color: #a3a29b;
    }

.icon-picker-caret[b-po78s3o5kg] {
    flex: none;
    font-size: .75rem;
    color: #a3a29b;
}

/* --- Pop-up panel --- */
.icon-picker-backdrop[b-po78s3o5kg] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.icon-picker-panel[b-po78s3o5kg] {
    position: absolute;
    z-index: 1041;
    top: calc(100% + 6px);
    left: 0;
    width: min(380px, 90vw);
    padding: 12px;
    border: 1px solid #e3e3e0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.icon-picker-search[b-po78s3o5kg] {
    position: relative;
}

    .icon-picker-search .bi[b-po78s3o5kg] {
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
        font-size: .85rem;
        color: #a3a29b;
        pointer-events: none;
    }

    .icon-picker-search input[b-po78s3o5kg] {
        width: 100%;
        padding: 7px 12px 7px 30px;
        border: 1px solid #ddddda;
        border-radius: 8px;
        font-size: .85rem;
    }

        .icon-picker-search input:focus[b-po78s3o5kg] {
            outline: none;
            border-color: var(--theme-strong, var(--theme-color));
            box-shadow: 0 0 0 2px var(--theme-tint, #eef6ec);
        }

/* Scroll container of the virtualised rows; its height bounds how many rows exist at once. */
.icon-picker-grid[b-po78s3o5kg] {
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* One row = one Virtualize item. The column count mirrors IconPickerBox.Columns and the
   bottom padding stands in for the grid gap, keeping every row the same height. */
.icon-picker-row[b-po78s3o5kg] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    padding-bottom: 6px;
}

.icon-picker-item[b-po78s3o5kg] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #faf9f6;
    color: #3c3b38;
    font-size: 1.05rem;
    cursor: pointer;
}

    .icon-picker-item:hover[b-po78s3o5kg] {
        border-color: var(--theme-strong, var(--theme-color));
        background: var(--theme-tint, #eef6ec);
        color: var(--theme-strong, var(--theme-color));
    }

    .icon-picker-item:focus-visible[b-po78s3o5kg] {
        outline: 2px solid var(--theme-strong, var(--theme-color));
        outline-offset: 1px;
    }

    .icon-picker-item.is-selected[b-po78s3o5kg] {
        border-color: var(--theme-strong, var(--theme-color));
        background: var(--theme-tint, #eef6ec);
        color: var(--theme-strong, var(--theme-color));
    }

.icon-picker-empty[b-po78s3o5kg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 14px 4px;
    font-size: .82rem;
    color: #6f6e6a;
}

.icon-picker-foot[b-po78s3o5kg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: .75rem;
    color: #a3a29b;
}

.icon-picker-clear[b-po78s3o5kg] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid #ddddda;
    border-radius: 8px;
    background: #fff;
    font-size: .75rem;
    color: #6f6e6a;
    cursor: pointer;
}

    .icon-picker-clear:hover[b-po78s3o5kg] {
        border-color: #c9483c;
        color: #c9483c;
    }
/* /Components/UI/AccommodationScopePicker.razor.rz.scp.css */
/* Telefon a tablet: jeden řádek, který se posouvá do strany — stejně jako záložky statistik
   (.st-subnav). Řádek vybíhá přes boční odsazení stránky až k okrajům obrazovky a vpravo se
   ztrácí, aby čip useknutý v půlce četl jako „tudy je toho víc“; koncové odsazení nechá poslední
   čip vyjet zpod přechodu. Svislé odsazení drží rámečky čipů, které by overflow jinak ořízl.
   Od 992 px se čipy vejdou a lámou jako dřív. */
.scope[b-jr57gdh0uz] {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    margin: 0 -1rem;
    padding: 2px 2.5rem 2px 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}

    .scope[b-jr57gdh0uz]::-webkit-scrollbar {
        display: none;
    }

@media only screen and (min-width: 992px) {

    .scope[b-jr57gdh0uz] {
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

.scope-chip[b-jr57gdh0uz] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    white-space: nowrap;
    gap: .4rem;
    padding: .45rem .9rem;
    font-size: .9rem;
    color: #4a4a48;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 2rem;
    cursor: pointer;
    transition: border-color .15s, color .15s, background-color .15s;
}

.scope-chip:hover:not(:disabled)[b-jr57gdh0uz] {
    border-color: var(--theme-color, #6a6a6a);
}

.scope-chip.is-active[b-jr57gdh0uz] {
    color: #fff;
    background: var(--theme-color, #4a4a48);
    border-color: var(--theme-color, #4a4a48);
}

.scope-chip:disabled[b-jr57gdh0uz] {
    opacity: .55;
    cursor: default;
}
/* /Components/UI/Spinner.razor.rz.scp.css */
.centered-spinner[b-alrsvb57f1] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
}
/* /Layout/Footer.razor.rz.scp.css */
/* Site footer — three columns (brand, navigation, contact) over an off-white canvas,
   closed by a quiet bottom bar with the copyright, the operator's identification and
   the legal links (terms and conditions, privacy policy).

   The only brand-coloured elements are the hairline accent at the very top, the
   social pills (Facebook, Instagram) and the icon tiles; all of them read the theme tokens the [data-theme]
   attribute on <footer> supplies (tokens only, no background fill — see variables.css).

   Every colour is stated explicitly: the global `body, a, li` rule in
   bootstrap-overrides.css paints text WHITE for the old dark layout, so a light
   surface has to override it on each element. */

.site-footer[b-444gajfx2g] {
    position: relative;
    margin-top: var(--element-spacing-mobile);
    background: #faf9f6;
    border-top: 1px solid rgba(0, 0, 0, .07);
}

    /* The one decorative element — the same brand gradient the section headings use. */
    .site-footer[b-444gajfx2g]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--theme-color), var(--theme-strong));
    }

.footer-inner[b-444gajfx2g] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1150px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 2rem;
    text-align: left;
    box-sizing: border-box;
}

/* ── Brand column ─────────────────────────────────────────────────────────── */

.footer-name[b-444gajfx2g] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    color: #2f2f2f;
}

.footer-address[b-444gajfx2g] {
    margin: .85rem 0 0;
    font-style: normal;
    font-size: .95rem;
    line-height: 1.6;
    color: #5f5e5a;
}

.footer-socials[b-444gajfx2g] {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.footer-social[b-444gajfx2g] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.1rem;
    background: var(--theme-tint);
    border-radius: 999px;
    color: var(--theme-strong);
    font-size: .9rem;
    font-weight: 600;
    transition: background-color .25s ease, color .25s ease;
}

    .footer-social:hover[b-444gajfx2g] {
        background: var(--theme-color);
        color: #fff;
    }

/* ── Navigation + contact columns ─────────────────────────────────────────── */

.footer-col-title[b-444gajfx2g] {
    margin: 0 0 1rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #8a8a85;
}

.footer-links[b-444gajfx2g],
.footer-contact[b-444gajfx2g] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.footer-links[b-444gajfx2g] {
    gap: .6rem;
}

    .footer-links a[b-444gajfx2g] {
        font-size: .95rem;
        line-height: 1.4;
        color: #5f5e5a;
        transition: color .25s ease;
    }

        .footer-links a:hover[b-444gajfx2g] {
            color: var(--theme-strong);
        }

.footer-contact[b-444gajfx2g] {
    gap: .85rem;
}

    .footer-contact li[b-444gajfx2g] {
        display: flex;
        align-items: center;
        gap: .7rem;
        min-width: 0;
    }

    .footer-contact a[b-444gajfx2g] {
        font-size: .95rem;
        color: #2f2f2f;
        overflow-wrap: anywhere;
        transition: color .25s ease;
    }

        .footer-contact a:hover[b-444gajfx2g] {
            color: var(--theme-strong);
            text-decoration: underline;
        }

.footer-contact-icon[b-444gajfx2g] {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-tint);
    border-radius: 11px;
    color: var(--theme-strong);
    font-size: .9rem;
}

/* ── Bottom bar ───────────────────────────────────────────────────────────── */

.footer-bottom[b-444gajfx2g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.25rem;
    max-width: 1150px;
    margin: 0 auto;
    padding: 1.1rem 1.25rem 1.6rem;
    border-top: 1px solid rgba(0, 0, 0, .06);
    box-sizing: border-box;
}

.footer-copy[b-444gajfx2g] {
    margin: 0;
    font-size: .85rem;
    color: #8a8a85;
}

.footer-operator[b-444gajfx2g] {
    margin: .2rem 0 0;
    font-size: .78rem;
    line-height: 1.5;
    color: #8a8a85;
}

.footer-legal-links[b-444gajfx2g] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
}

.footer-legal[b-444gajfx2g] {
    font-size: .85rem;
    color: #8a8a85;
    transition: color .25s ease;
}

    .footer-legal:hover[b-444gajfx2g] {
        color: var(--theme-strong);
        text-decoration: underline;
    }

/* ── Accessibility ────────────────────────────────────────────────────────── */

.site-footer a:focus-visible[b-444gajfx2g] {
    outline: 2px solid var(--theme-strong);
    outline-offset: 3px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {

    .site-footer a[b-444gajfx2g] {
        transition: none;
    }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media only screen and (min-width: 400px) and (max-width: 992px) {

    .site-footer[b-444gajfx2g] {
        margin-top: var(--element-spacing-tablet);
    }
}

/* The brand block keeps the full width until there is room for three columns. */
@media only screen and (min-width: 576px) {

    .footer-inner[b-444gajfx2g] {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-brand[b-444gajfx2g] {
        grid-column: 1 / -1;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

    .site-footer[b-444gajfx2g] {
        margin-top: var(--element-spacing-notebook);
    }
}

@media only screen and (min-width: 992px) {

    .footer-inner[b-444gajfx2g] {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 3rem;
        padding: 3rem 1.5rem 2.25rem;
    }

    .footer-brand[b-444gajfx2g] {
        grid-column: auto;
    }

    .footer-bottom[b-444gajfx2g] {
        padding: 1.25rem 1.5rem 1.75rem;
    }
}

@media only screen and (min-width: 1200px) {

    .site-footer[b-444gajfx2g] {
        margin-top: var(--element-spacing-computer);
    }
}
/* /Pages/Accommodation/Components/AccommodationSwitchSection.razor.rz.scp.css */
/* "Our other houses" cards. Same visual family as the homepage quick links: white card,
   hairline border, lift on hover — the difference is the photo and the fact that each
   card is themed with ITS OWN brand tokens (data-theme on the <a>), not the page's.

   Colours are stated explicitly because `body, a, li` in bootstrap-overrides.css paints
   text white for the old dark layout. */

.others-grid[b-8yznlt6bmo] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: var(--element-spacing-mobile);
}

.other-card[b-8yznlt6bmo] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 20px;
    text-decoration: none;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

    .other-card:hover[b-8yznlt6bmo] {
        border-color: var(--theme-color);
        transform: translateY(-4px);
        box-shadow: 0 22px 40px -28px rgba(0, 0, 0, .7);
    }

    .other-card:focus-visible[b-8yznlt6bmo] {
        outline: 3px solid var(--theme-strong);
        outline-offset: 3px;
    }

/* ── Photo ────────────────────────────────────────────────────────────────────── */

.other-media[b-8yznlt6bmo] {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--theme-tint);
    overflow: hidden;
}

    .other-media img[b-8yznlt6bmo] {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform .4s ease;
    }

.other-card:hover .other-media img[b-8yznlt6bmo] {
    transform: scale(1.04);
}

/* An object without a title photo still needs a coloured block, not a hole. */
.other-media-fallback[b-8yznlt6bmo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--theme-strong);
    font-size: 2.4rem;
    opacity: .55;
}

/* ── Copy ─────────────────────────────────────────────────────────────────────── */

.other-body[b-8yznlt6bmo] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    padding: 1.1rem 1.25rem 1.25rem;
}

.other-name[b-8yznlt6bmo] {
    color: #2f2f2f;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.25;
}

.other-cta[b-8yznlt6bmo] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .2rem;
    color: var(--theme-strong);
    font-size: .9rem;
    font-weight: 600;
}

    .other-cta i[b-8yznlt6bmo] {
        transition: transform .25s ease;
    }

.other-card:hover .other-cta i[b-8yznlt6bmo] {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {

    .other-card[b-8yznlt6bmo],
    .other-media img[b-8yznlt6bmo],
    .other-cta i[b-8yznlt6bmo] {
        transition: none;
    }

        .other-card:hover[b-8yznlt6bmo] {
            transform: none;
        }
}

@media only screen and (min-width: 576px) {

    /* auto-FILL, not auto-fit: with two objects there is only ever one card here, and
       auto-fit would collapse the empty tracks and stretch that single card across the
       whole page. Empty tracks keep it card-sized, and four objects still fill the row. */
    .others-grid[b-8yznlt6bmo] {
        grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
        gap: 1.25rem;
    }
}

@media only screen and (min-width: 992px) {

    .others-grid[b-8yznlt6bmo] {
        margin-top: var(--element-spacing-tablet);
    }
}
/* /Pages/Accommodation/Components/GalleryCarousel.razor.rz.scp.css */
/* Gallery carousel — light chrome around Bootstrap's slide mechanics, matching the
   rest of the public pages: white surfaces, soft shadows, generous radii and brand
   accents drawn only from the theme tokens (--theme-color / -strong / -tint) of the
   nearest [data-theme] ancestor (the gallery page).

   Most rules here have a second job: undoing Bootstrap's own carousel chrome (the
   dash indicators, the 15 %-wide translucent control columns). Those properties are
   reset explicitly rather than left to load order, so the component keeps its shape
   even if the stylesheet order changes. */

.gc[b-g1163algl9] {
    width: 100%;
}

/* Wraps the photo and the arrows only — the thumbnail strip stays outside, so the
   arrows centre on the picture and not on the picture plus the strip. */
.gc-frame[b-g1163algl9] {
    position: relative;
}

.gc-stage[b-g1163algl9] {
    border-radius: 20px;
    background: #f1f0ed;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 26px 50px -30px rgba(0, 0, 0, .75);
}

/* A <figure> brings a UA margin that has to go, but the right one MUST stay
   Bootstrap's `margin-right: -100%` — that negative margin is what pulls the
   floated slides on top of each other. Nulling it with a `margin: 0` shorthand
   lets them line up one after another instead, and the stage grows to two
   slides during every transition. */
.gc-slide[b-g1163algl9] {
    margin: 0 -100% 0 0;
}

    .gc-slide img[b-g1163algl9] {
        width: 100%;
        display: block;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

/* The photo is a button (it opens the fullscreen view), so all of the UA button
   chrome has to go and it has to fill the slide the way the bare <img> used to. */
.gc-open[b-g1163algl9] {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: zoom-in;
}

    .gc-open:focus-visible[b-g1163algl9] {
        outline: 3px solid var(--theme-strong);
        outline-offset: -3px;
    }

/* Hint that the photo opens. Always visible on touch, where there is no hover to
   discover it with; on a pointer device it fades in over the picture. */
.gc-open-hint[b-g1163algl9] {
    position: absolute;
    top: .7rem;
    left: .7rem;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    background: rgba(255, 255, 255, .92);
    border-radius: 50%;
    color: #2f2f2f;
    font-size: .85rem;
    transition: opacity .25s ease, background-color .25s ease, color .25s ease;
}

@media (hover: hover) {

    .gc-open-hint[b-g1163algl9] {
        opacity: 0;
    }

    .gc-open:hover .gc-open-hint[b-g1163algl9],
    .gc-open:focus-visible .gc-open-hint[b-g1163algl9] {
        opacity: 1;
        background: var(--theme-color);
        color: #fff;
    }
}

/* Position within the photo, not within the whole carousel — Bootstrap already
   makes .carousel-item relative, so the badge travels with its slide. */
.gc-counter[b-g1163algl9] {
    position: absolute;
    top: .7rem;
    right: .7rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .7rem;
    background: rgba(255, 255, 255, .92);
    border-radius: 999px;
    color: #2f2f2f;
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.gc-counter-sep[b-g1163algl9] {
    color: #b6b5ae;
    font-weight: 600;
}

/* ── Arrows ───────────────────────────────────────────────────────────────── */

/* Bootstrap's controls are full-height 15 % columns at half opacity; these are
   round buttons pinned to the middle of the photo instead. */
.gc-nav[b-g1163algl9] {
    position: absolute;
    top: 50%;
    bottom: auto;
    z-index: 2;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .94);
    border: none;
    border-radius: 50%;
    color: #2f2f2f;
    font-size: 1.15rem;
    opacity: 1;
    transform: translateY(-50%);
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .55);
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.gc-nav-prev[b-g1163algl9] {
    left: .6rem;
}

.gc-nav-next[b-g1163algl9] {
    right: .6rem;
}

.gc-nav:hover[b-g1163algl9] {
    background: var(--theme-color);
    color: #fff;
    opacity: 1;
}

.gc-nav:focus-visible[b-g1163algl9] {
    outline: 3px solid var(--theme-strong);
    outline-offset: 3px;
}

.gc-nav .bi[b-g1163algl9] {
    line-height: 1;
}

/* ── Thumbnails ───────────────────────────────────────────────────────────── */

/* Still `.carousel-indicators` so Bootstrap keeps toggling `.active` here, but
   lifted out of its absolute strip at the bottom of the photo. */
.gc-thumbs[b-g1163algl9] {
    position: static;
    z-index: auto;
    margin: .6rem 0 0;
    padding: .15rem;
    display: flex;
    justify-content: flex-start;
    gap: .5rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Thin, unobtrusive scrollbar — the strip is a secondary control. */
    scrollbar-width: thin;
}

.gc-thumb[b-g1163algl9] {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 4.2rem;
    height: 3.2rem;
    margin: 0;
    padding: 0;
    background: #f1f0ed;
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    opacity: .55;
    text-indent: 0;
    scroll-snap-align: start;
    transition: opacity .25s ease, border-color .25s ease, transform .25s ease;
}

    .gc-thumb img[b-g1163algl9] {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .gc-thumb:hover[b-g1163algl9] {
        opacity: 1;
        transform: translateY(-2px);
    }

    .gc-thumb.active[b-g1163algl9] {
        opacity: 1;
        border-color: var(--theme-color);
    }

    .gc-thumb:focus-visible[b-g1163algl9] {
        outline: 3px solid var(--theme-strong);
        outline-offset: 2px;
    }

/* ── Fullscreen view ──────────────────────────────────────────────────────── */

/* Covers the whole viewport, above the sticky header and its mobile drawer
   (z-index 90 / 210 in styles/Layout/header.css). The page behind is frozen from
   the component (setBodyScrollLock), not from here — `overflow: hidden` on the
   overlay alone would not stop iOS from scrolling the body underneath. */
.gc-lightbox[b-g1163algl9] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5rem .75rem 1rem;
    background: rgba(18, 17, 15, .92);
    /* The overlay itself takes focus so it can serve Escape and the arrow keys; the
       ring around the whole screen would only be noise. */
    outline: none;
    /* Clicking anywhere but the picture closes — say so with the cursor. */
    cursor: zoom-out;
    animation: gc-lb-in-b-g1163algl9 .2s ease;
}

@keyframes gc-lb-in-b-g1163algl9 {
    from {
        opacity: 0;
    }
}

.gc-lb-figure[b-g1163algl9] {
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    cursor: default;
}

    /* `contain`, not `cover` — fullscreen is where the visitor gets to see the whole
       photo, uncropped, whatever its aspect ratio. */
    .gc-lb-figure img[b-g1163algl9] {
        max-width: 100%;
        /* Leaves room for the caption bar under the picture. */
        max-height: calc(100vh - 9rem);
        display: block;
        object-fit: contain;
        border-radius: 10px;
        box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
    }

/* Counter and description on one line under the photo, the way the slide carries
   them in the corner of the picture. */
.gc-lb-bar[b-g1163algl9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .55rem .8rem;
    color: #f3f1ec;
    font-size: .88rem;
    line-height: 1.45;
    text-align: center;
}

.gc-lb-counter[b-g1163algl9] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .7rem;
    background: rgba(255, 255, 255, .14);
    border-radius: 999px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

    .gc-lb-counter .gc-counter-sep[b-g1163algl9] {
        color: #b6b5ae;
    }

.gc-lb-caption[b-g1163algl9] {
    max-width: 60ch;
}

/* Same round buttons as on the carousel, but drawn for a dark surround. */
.gc-lb-close[b-g1163algl9],
.gc-lb-nav[b-g1163algl9] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    padding: 0;
    background: rgba(255, 255, 255, .16);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color .25s ease;
}

    .gc-lb-close:hover[b-g1163algl9],
    .gc-lb-nav:hover[b-g1163algl9] {
        background: var(--theme-color);
    }

    .gc-lb-close:focus-visible[b-g1163algl9],
    .gc-lb-nav:focus-visible[b-g1163algl9] {
        outline: 3px solid #fff;
        outline-offset: 3px;
    }

.gc-lb-close[b-g1163algl9] {
    top: .75rem;
    right: .75rem;
}

.gc-lb-nav[b-g1163algl9] {
    top: 50%;
    transform: translateY(-50%);
}

.gc-lb-nav-prev[b-g1163algl9] {
    left: .75rem;
}

.gc-lb-nav-next[b-g1163algl9] {
    right: .75rem;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .gc-nav[b-g1163algl9],
    .gc-thumb[b-g1163algl9],
    .gc-open-hint[b-g1163algl9],
    .gc-lb-close[b-g1163algl9],
    .gc-lb-nav[b-g1163algl9] {
        transition: none;
    }

        .gc-thumb:hover[b-g1163algl9] {
            transform: none;
        }

    .gc-lightbox[b-g1163algl9] {
        animation: none;
    }
}

@media only screen and (min-width: 768px) {

    .gc-stage[b-g1163algl9] {
        border-radius: 26px;
    }

    .gc-slide img[b-g1163algl9] {
        aspect-ratio: 3 / 2;
    }

    .gc-nav[b-g1163algl9] {
        width: 3.1rem;
        height: 3.1rem;
        font-size: 1.35rem;
    }

    .gc-nav-prev[b-g1163algl9] {
        left: 1rem;
    }

    .gc-nav-next[b-g1163algl9] {
        right: 1rem;
    }

    .gc-thumbs[b-g1163algl9] {
        margin-top: .85rem;
        gap: .65rem;
    }

    .gc-thumb[b-g1163algl9] {
        width: 5.5rem;
        height: 4rem;
        border-radius: 14px;
    }

    .gc-lightbox[b-g1163algl9] {
        padding: 4.5rem 4.5rem 1.5rem;
    }

    .gc-lb-close[b-g1163algl9],
    .gc-lb-nav[b-g1163algl9] {
        width: 3.1rem;
        height: 3.1rem;
        font-size: 1.3rem;
    }

    .gc-lb-close[b-g1163algl9] {
        top: 1.25rem;
        right: 1.25rem;
    }

    .gc-lb-nav-prev[b-g1163algl9] {
        left: 1.25rem;
    }

    .gc-lb-nav-next[b-g1163algl9] {
        right: 1.25rem;
    }

    .gc-lb-figure img[b-g1163algl9] {
        max-height: calc(100vh - 11rem);
        border-radius: 14px;
    }

    .gc-lb-bar[b-g1163algl9] {
        font-size: .95rem;
    }
}

@media only screen and (min-width: 1200px) {

    .gc-stage[b-g1163algl9] {
        border-radius: 30px;
    }

    .gc-slide img[b-g1163algl9] {
        aspect-ratio: 16 / 9;
    }

    /* Centred when the strip fits, through auto margins on its ends rather than
       `justify-content: center` — that one centres an overflowing strip too, so
       its head spills out to the left, past where the scrollbar can reach, and
       the first photos can no longer be scrolled to. Auto margins fall back to
       zero as soon as the thumbnails overflow. */
    .gc-thumb:first-child[b-g1163algl9] {
        margin-left: auto;
    }

    .gc-thumb:last-child[b-g1163algl9] {
        margin-right: auto;
    }
}
/* /Pages/Accommodation/Components/GalleryPreview.razor.rz.scp.css */
/* Homepage gallery teaser — the shared .section-head (global, sectionHead.css) and under
   it one photo block instead of a grid of thumbnails.

   All the copy sits in the head above, so the photo carries only the photo count, the strip
   of further photos and the CTA. A bottom-heavy dark wash keeps those legible on any picture,
   bright winter shots included, and lets the top of the photo stay untouched.

   Nothing here hard-codes the green or the brown accommodation: the only brand surface is
   the shared .page-btn CTA, which resolves --theme-color/-strong/-tint from the [data-theme]
   the homepage carries. Everything else is white-on-photo and reads the same for both. */

.showcase[b-qxtrf7hlul] {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 22rem;
    border-radius: 26px;
    overflow: hidden;
    /* Shows while the photo is still loading, so the block never flashes white. */
    background: #2f2f2f;
}

.showcase-bg[b-qxtrf7hlul] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* ::after is the element's last child, so it paints over the photo; the badge and the body
   then lift themselves above the wash with z-index instead of the photo needing a negative
   one. Weighted to the bottom, where the content is. */
.showcase[b-qxtrf7hlul]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .75) 100%);
}

/* ── Photo count ──────────────────────────────────────────────────────────── */

/* Pinned to the corner the wash leaves alone, so it carries its own dark background
   rather than relying on the gradient to make it readable. */
.showcase-badge[b-qxtrf7hlul] {
    position: absolute;
    z-index: 1;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .85rem;
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

    .showcase-badge .bi[b-qxtrf7hlul] {
        font-size: .85rem;
    }

/* ── Photo strip + CTA ────────────────────────────────────────────────────── */

.showcase-body[b-qxtrf7hlul] {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    box-sizing: border-box;
}

.showcase-thumbs[b-qxtrf7hlul] {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.showcase-thumb[b-qxtrf7hlul] {
    flex: 0 0 auto;
    width: 3.75rem;
    height: 3.75rem;
    display: block;
    border: 2px solid rgba(255, 255, 255, .4);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease;
}

    .showcase-thumb img[b-qxtrf7hlul] {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .showcase-thumb:hover[b-qxtrf7hlul] {
        transform: translateY(-4px);
        border-color: #fff;
    }

    /* White, not the brand outline the rest of the page uses — over a photo the brand
       shade is the one colour that cannot be relied on to show. */
    .showcase-thumb:focus-visible[b-qxtrf7hlul] {
        outline: 3px solid #fff;
        outline-offset: 3px;
    }

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .showcase-thumb[b-qxtrf7hlul] {
        transition: none;
    }

        .showcase-thumb:hover[b-qxtrf7hlul] {
            transform: none;
        }
}

@media only screen and (min-width: 768px) {

    .showcase[b-qxtrf7hlul] {
        min-height: 26rem;
        border-radius: 30px;
    }

    .showcase-badge[b-qxtrf7hlul] {
        top: 1.5rem;
        right: 1.5rem;
    }

    .showcase-body[b-qxtrf7hlul] {
        padding: 2.5rem;
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
    }

    .showcase-thumb[b-qxtrf7hlul] {
        width: 4.5rem;
        height: 4.5rem;
    }

    /* CTA to the opposite edge — it leads somewhere, the photos next to it only tease. */
    .showcase-body .page-btn[b-qxtrf7hlul] {
        margin-left: auto;
    }
}

@media only screen and (min-width: 1200px) {

    .showcase[b-qxtrf7hlul] {
        min-height: 30rem;
    }
}
/* /Pages/Accommodation/Components/TripMap.razor.rz.scp.css */
/* The map section of the trips page — one white card holding the category chips, the map and
   the list of places. The chips themselves are global (styles/Components/tripChip.css).

   Everything on the map — the pins, the bubble, the card, the "show all" control — is created by
   wwwroot/js/tripMap.js inside .trip-map-canvas, where no scope attribute reaches it; hence the
   ::deep rules below. Brand colours still arrive through the [data-theme] tokens, inherited from
   the page. */

.trips-map-section[b-a5lk6nf9gw] {
    margin-top: var(--element-spacing-tablet);
}

/* Phone: chips, map, list — one column. */
.trip-map-layout[b-a5lk6nf9gw] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "controls"
        "map"
        "places";
    gap: 1rem;
    padding: .75rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 18px 36px -30px rgba(0, 0, 0, .55);
    box-sizing: border-box;
}

    .trip-map-layout.is-unfiltered[b-a5lk6nf9gw] {
        grid-template-areas:
            "map"
            "places";
    }

.trip-map-controls[b-a5lk6nf9gw] {
    grid-area: controls;
    padding: .25rem .25rem 0;
}

/* Phone and tablet: one row that scrolls sideways (.trip-chip-scroller, global), running out to
   the card's edges — wrapped, a dozen categories took ten rows and pushed the map off the screen.
   The end padding lets the last chip scroll clear of the row's fade; above and below it gives a
   lifted chip and the focus ring room inside the scrolling box, which clips — without it a tapped
   chip (hover sticks on touch) lost its top edge. The negative margin takes that back out. */
.trip-map-filter[b-a5lk6nf9gw] {
    gap: .4rem;
    margin: -.4rem -1rem -.1rem;
    padding: .4rem 2.5rem .4rem 1rem;
}

    .trip-map-filter .trip-chip[b-a5lk6nf9gw] {
        padding: .4rem .8rem;
        font-size: .85rem;
    }

.trip-map-hint[b-a5lk6nf9gw] {
    margin: .6rem 0 0;
    color: #8a8880;
    font-size: .8rem;
}

.trip-map-canvas[b-a5lk6nf9gw] {
    grid-area: map;
    min-height: 20rem;
    height: 62vh;
    max-height: 28rem;
    border-radius: 16px;
    overflow: hidden;
    /* What shows until Google has drawn — the map loads only as it nears the viewport. */
    background: var(--theme-tint);
}

.trip-map-places[b-a5lk6nf9gw] {
    grid-area: places;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.trip-map-list-head[b-a5lk6nf9gw] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: 0 .35rem .5rem;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.trip-map-list-title[b-a5lk6nf9gw] {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: #2f2f2f;
}

.trip-map-list-sort[b-a5lk6nf9gw] {
    color: #8a8880;
    font-size: .78rem;
}

.trip-map-list[b-a5lk6nf9gw] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    max-height: 22rem;
    margin: 0;
    padding: .4rem 0 0;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.trip-map-item[b-a5lk6nf9gw] {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .5rem .6rem;
    background: none;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #2f2f2f;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

    .trip-map-item:hover[b-a5lk6nf9gw] {
        background: #f7f6f2;
    }

    .trip-map-item:focus-visible[b-a5lk6nf9gw] {
        outline: 3px solid var(--theme-strong);
        outline-offset: -3px;
    }

    .trip-map-item.is-active[b-a5lk6nf9gw] {
        background: var(--theme-tint);
        border-color: color-mix(in srgb, var(--theme-color) 35%, transparent);
    }

.trip-map-item-icon[b-a5lk6nf9gw] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--theme-color);
    border-radius: 50%;
    color: #fff;
    font-size: .85rem;
}

.trip-map-item-main[b-a5lk6nf9gw] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.trip-map-item-title[b-a5lk6nf9gw] {
    overflow: hidden;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trip-map-item-meta[b-a5lk6nf9gw] {
    color: #8a8880;
    font-size: .76rem;
}

.trip-map-item-distance[b-a5lk6nf9gw] {
    flex-shrink: 0;
    color: var(--theme-strong);
    font-size: .8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.trip-map-credit[b-a5lk6nf9gw] {
    margin: .5rem .35rem 0;
    color: #8a8880;
    font-size: .72rem;
}

    .trip-map-credit a[b-a5lk6nf9gw] {
        color: inherit;
    }

/* ── Drawn by the script: pins ────────────────────────────────────────────── */

.trip-map-canvas[b-a5lk6nf9gw]  .tm-pin {
    --pin-color: var(--theme-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .35));
    transform-origin: bottom center;
    transition: transform .15s ease;
    cursor: pointer;
}

    .trip-map-canvas[b-a5lk6nf9gw]  .tm-pin::after {
        content: "";
        width: 0;
        height: 0;
        margin-top: -2px;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 9px solid var(--pin-color);
    }

    .trip-map-canvas[b-a5lk6nf9gw]  .tm-pin:hover,
    .trip-map-canvas[b-a5lk6nf9gw]  .tm-pin.is-active {
        transform: scale(1.18);
    }

    .trip-map-canvas[b-a5lk6nf9gw]  .tm-pin.is-active {
        --pin-color: var(--theme-strong);
    }

    /* The accommodation — larger and dark, so it never reads as one more tip. */
    .trip-map-canvas[b-a5lk6nf9gw]  .tm-pin.is-home {
        --pin-color: #2f2f2f;
    }

.trip-map-canvas[b-a5lk6nf9gw]  .tm-pin-head {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: var(--pin-color);
    border: 2px solid #fff;
    border-radius: 50%;
    box-sizing: border-box;
    color: #fff;
    font-size: .95rem;
}

.trip-map-canvas[b-a5lk6nf9gw]  .tm-pin.is-home .tm-pin-head {
    width: 42px;
    height: 42px;
    font-size: 1.15rem;
}

/* Where a highlighted route comes nearest to the house — smaller than a place's pin: the route
   itself is the tip, this only marks where to join it. */
.trip-map-canvas[b-a5lk6nf9gw]  .tm-pin.is-access .tm-pin-head {
    width: 28px;
    height: 28px;
    font-size: .8rem;
}

/* A tip at the accommodation (a delivery to the door) — the marker stands on the house, the pin
   is moved to its shoulder so the two sit side by side; a second one lines up next to it.
   `translate` rather than `transform`, which the hover scale already uses. */
.trip-map-canvas[b-a5lk6nf9gw]  .tm-pin.is-at-home {
    translate: calc(38px + var(--at-home-index, 0) * 32px) -12px;
}

    .trip-map-canvas[b-a5lk6nf9gw]  .tm-pin.is-at-home .tm-pin-head {
        width: 30px;
        height: 30px;
        font-size: .85rem;
    }

/* ── Drawn by the script: the "show all" control ──────────────────────────── */

/* Phone and tablet: the icon alone, a round button the size of Google's — with its label it ran
   into the map type switch on a narrow map. The label is back from 992px. */
.trip-map-canvas[b-a5lk6nf9gw]  .tm-fit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 40px;
    height: 40px;
    margin: 10px;
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    color: #2f2f2f;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

    .trip-map-canvas[b-a5lk6nf9gw]  .tm-fit:hover {
        background: var(--theme-tint);
        color: var(--theme-strong);
    }

    .trip-map-canvas[b-a5lk6nf9gw]  .tm-fit .bi {
        color: var(--theme-color);
    }

.trip-map-canvas[b-a5lk6nf9gw]  .tm-fit-label {
    display: none;
}

/* ── Drawn by the script: the card (phone and tablet) ─────────────────────── */

/* Where a tip opens below 992px instead of the bubble — laid over the bottom of the map, above
   Google's logo and terms, which have to stay visible. */
.trip-map-canvas[b-a5lk6nf9gw]  .tm-card {
    position: absolute;
    right: 10px;
    bottom: 30px;
    left: 10px;
    z-index: 1;
    padding: .75rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18), 0 10px 28px -12px rgba(0, 0, 0, .45);
    box-sizing: border-box;
    color: #2f2f2f;
}

    .trip-map-canvas[b-a5lk6nf9gw]  .tm-card[hidden] {
        display: none;
    }

.trip-map-canvas[b-a5lk6nf9gw]  .tm-card-close {
    position: absolute;
    top: .4rem;
    right: .4rem;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: #f3f2ee;
    border: 0;
    border-radius: 50%;
    color: #2f2f2f;
    font-size: .85rem;
    cursor: pointer;
}

    .trip-map-canvas[b-a5lk6nf9gw]  .tm-card-close:hover {
        background: var(--theme-tint);
        color: var(--theme-strong);
    }

    .trip-map-canvas[b-a5lk6nf9gw]  .tm-card-close:focus-visible {
        outline: 3px solid var(--theme-strong);
        outline-offset: 2px;
    }

.trip-map-canvas[b-a5lk6nf9gw]  .tm-card-main {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.trip-map-canvas[b-a5lk6nf9gw]  .tm-card-image,
.trip-map-canvas[b-a5lk6nf9gw]  .tm-card-icon {
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    border-radius: 10px;
}

.trip-map-canvas[b-a5lk6nf9gw]  .tm-card-image {
    display: block;
    object-fit: cover;
}

.trip-map-canvas[b-a5lk6nf9gw]  .tm-card-icon {
    display: grid;
    place-items: center;
    background: var(--theme-tint);
    color: var(--theme-strong);
    font-size: 1.5rem;
}

.trip-map-canvas[b-a5lk6nf9gw]  .tm-card-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.trip-map-canvas[b-a5lk6nf9gw]  .tm-card-title {
    display: -webkit-box;
    overflow: hidden;
    color: #2f2f2f;
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* The category and the name sit beside the close button and keep clear of it; the distance under
   them has the full width, so it fits on a line (a route's longer one wraps rather than lose its
   number). The category stays on one line — wrapped, "Zábava a adrenalin" made the card half the
   map's height. */
.trip-map-canvas[b-a5lk6nf9gw]  .tm-card .tm-info-category,
.trip-map-canvas[b-a5lk6nf9gw]  .tm-card-title,
.trip-map-canvas[b-a5lk6nf9gw]  .tm-card .tm-info-home {
    padding-right: 2.1rem;
}

.trip-map-canvas[b-a5lk6nf9gw]  .tm-card .tm-info-category {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .trip-map-canvas[b-a5lk6nf9gw]  .tm-card .tm-info-category .bi {
        margin-right: .3rem;
    }

.trip-map-canvas[b-a5lk6nf9gw]  .tm-card .tm-info-distance {
    margin-top: .1rem;
}

.trip-map-canvas[b-a5lk6nf9gw]  .tm-card .tm-info-home {
    font-size: .85rem;
    line-height: 1.45;
}

.trip-map-canvas[b-a5lk6nf9gw]  .tm-card .tm-info-actions {
    margin-top: .65rem;
}

/* ── Drawn by the script: the bubble ──────────────────────────────────────── */

.trip-map-canvas[b-a5lk6nf9gw]  .tm-info-title {
    color: #2f2f2f;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.trip-map-canvas[b-a5lk6nf9gw]  .tm-info {
    max-width: 260px;
    color: #2f2f2f;
    font-size: .85rem;
}

.trip-map-canvas[b-a5lk6nf9gw]  .tm-info-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: .6rem;
    object-fit: cover;
    border-radius: 10px;
}

.trip-map-canvas[b-a5lk6nf9gw]  .tm-info-category {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--theme-strong);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.trip-map-canvas[b-a5lk6nf9gw]  .tm-info-text {
    display: -webkit-box;
    margin: .35rem 0 .5rem;
    overflow: hidden;
    color: #5f5e5a;
    font-size: .85rem;
    line-height: 1.55;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
}

.trip-map-canvas[b-a5lk6nf9gw]  .tm-info-distance {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: .35rem;
    color: #5f5e5a;
    font-size: .8rem;
}

    .trip-map-canvas[b-a5lk6nf9gw]  .tm-info-distance .bi {
        color: var(--theme-color);
    }

.trip-map-canvas[b-a5lk6nf9gw]  .tm-info-home {
    margin: 0;
    color: #5f5e5a;
}

.trip-map-canvas[b-a5lk6nf9gw]  .tm-info-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .7rem;
}

.trip-map-canvas[b-a5lk6nf9gw]  .tm-info-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    background: var(--theme-tint);
    border-radius: 999px;
    color: var(--theme-strong);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
}

    .trip-map-canvas[b-a5lk6nf9gw]  .tm-info-link:hover {
        background: color-mix(in srgb, var(--theme-color) 22%, #fff);
    }

    .trip-map-canvas[b-a5lk6nf9gw]  .tm-info-link:focus-visible {
        outline: 3px solid var(--theme-strong);
        outline-offset: 2px;
    }

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .trip-map-item[b-a5lk6nf9gw],
    .trip-map-canvas[b-a5lk6nf9gw]  .tm-pin {
        transition: none;
    }
}

/* Desktop: the chips in a row across the whole card, the list in a column left of the map and
   scrolling inside it. The chips used to sit in that column too, but with a dozen categories they
   wrapped into nine rows and left the list a strip of two places; across the full width they take
   two rows, and the list gets the map's whole height. */
@media only screen and (min-width: 992px) {

    .trips-map-section[b-a5lk6nf9gw] {
        margin-top: var(--element-spacing-computer);
    }

    .trip-map-layout[b-a5lk6nf9gw] {
        grid-template-columns: 20rem minmax(0, 1fr);
        grid-template-rows: auto 36rem;
        grid-template-areas:
            "controls controls"
            "places map";
        padding: 1rem;
        border-radius: 30px;
    }

        .trip-map-layout.is-unfiltered[b-a5lk6nf9gw] {
            grid-template-rows: 36rem;
            grid-template-areas: "places map";
        }

    .trip-map-controls[b-a5lk6nf9gw] {
        padding: 0 .25rem;
    }

    .trip-map-filter[b-a5lk6nf9gw] {
        margin: 0;
        padding: 0;
    }

    .trip-map-canvas[b-a5lk6nf9gw]  .tm-fit {
        width: auto;
        height: auto;
        padding: .5rem .85rem;
    }

    .trip-map-canvas[b-a5lk6nf9gw]  .tm-fit-label {
        display: inline;
    }

    .trip-map-canvas[b-a5lk6nf9gw] {
        height: auto;
        min-height: 0;
        max-height: none;
        border-radius: 20px;
    }

    .trip-map-list[b-a5lk6nf9gw] {
        flex: 1;
        max-height: none;
        min-height: 0;
    }
}
/* /Pages/Accommodation/Gallery.razor.rz.scp.css */
/* Gallery — the homepage layout language (HomePage.razor.css, Contact.razor.css,
   Availability.razor.css) applied to a page that is mostly photographs: no hero or
   page heading, just one block per photo category and the closing CTA.

   Everything is white/near-white; the accommodation's brand shows only through the
   tokens (--theme-color / -strong / -tint) that `.gallery-page` carries via its
   [data-theme] attribute. The CTA pills come from the shared .page-btn
   (styles/Components/pageButton.css) and the headings from the shared .section-head
   (styles/Components/sectionHead.css); the carousels bring their own scoped styles
   (Components/GalleryCarousel.razor.css). */

.gallery-page[b-kye85oww4o] {
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* Vertical rhythm between the top-level blocks — same steps as the homepage. */
.gallery-section[b-kye85oww4o] {
    margin-top: var(--element-spacing-tablet);
    /* Breathing room only — clearing the sticky header is html's scroll-padding-top. */
    scroll-margin-top: 1.5rem;
}

/* No page heading — the first block (photos, or the empty note) opens the page and
   the layout's own top padding is the gap. first-of-type rather than first-child:
   the visually hidden h1 comes before it. */
.gallery-section:first-of-type[b-kye85oww4o],
.gallery-empty:first-of-type[b-kye85oww4o] {
    margin-top: 0;
}

/* ── Empty state and closing call to action ───────────────────────────────── */

/* One card, two jobs: the invitation to book under a gallery that has photos, and
   the "nothing here yet" note for an accommodation that has not uploaded any. */
.gallery-empty[b-kye85oww4o],
.gallery-cta[b-kye85oww4o] {
    margin-top: var(--element-spacing-tablet);
    padding: 2.2rem 1.5rem;
    text-align: center;
    background: var(--theme-tint);
    border: 1px solid color-mix(in srgb, var(--theme-strong) 20%, transparent);
    border-radius: 22px;
    box-sizing: border-box;
}

.cta-icon[b-kye85oww4o] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--theme-color);
    color: #fff;
    font-size: 1.35rem;
}

.cta-title[b-kye85oww4o] {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #2f2f2f;
}

.cta-text[b-kye85oww4o] {
    max-width: 52ch;
    margin: 0 auto 1.3rem;
    font-size: .93rem;
    line-height: 1.65;
    color: #5f5e5a;
}

.cta-actions[b-kye85oww4o] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media only screen and (min-width: 992px) {

    .gallery-page[b-kye85oww4o] {
        padding: 0 1.5rem;
    }

    .gallery-section[b-kye85oww4o],
    .gallery-empty[b-kye85oww4o],
    .gallery-cta[b-kye85oww4o] {
        margin-top: var(--element-spacing-computer);
    }

    .gallery-empty[b-kye85oww4o],
    .gallery-cta[b-kye85oww4o] {
        padding: 2.75rem 2.5rem;
        border-radius: 30px;
    }
}

@media only screen and (min-width: 1200px) {

    .gallery-page[b-kye85oww4o] {
        padding: 0;
    }
}
/* /Pages/Accommodation/HomePage.razor.rz.scp.css */
/* Homepage — light, airy layout built from four blocks: hero, quick links, news
   (child component), gallery mosaic and contact + map.

   Everything is white/near-white; the accommodation's brand shows only through the
   tokens (--theme-color / -strong / -tint) that the `.home` element carries via its
   [data-theme] attribute, so the green and the brown accommodation read as the same
   page rather than two differently coloured ones.

   Child components (contact form, map) are styled through ::deep — their markup is
   rendered outside this component's CSS scope. */

.home[b-5hqo0ldfhn] {
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* Vertical rhythm between the top-level blocks. */
.home-section[b-5hqo0ldfhn] {
    margin-top: var(--element-spacing-tablet);
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero[b-5hqo0ldfhn] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding: 2rem 1.5rem;
    background: linear-gradient(155deg, var(--theme-tint) 0%, #fff 65%);
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 26px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 20px 40px -30px rgba(0, 0, 0, .5);
    box-sizing: border-box;
}

.hero-eyebrow[b-5hqo0ldfhn] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .85rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 999px;
    color: var(--theme-strong);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.hero-title[b-5hqo0ldfhn] {
    margin: 1.1rem 0 0;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.2;
    color: #2f2f2f;
    overflow-wrap: break-word;
}

.hero-lead[b-5hqo0ldfhn] {
    margin: 1rem 0 0;
    font-size: 1.02rem;
    line-height: 1.7;
    color: #5f5e5a;
}

.hero-actions[b-5hqo0ldfhn] {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.hero-media[b-5hqo0ldfhn] {
    margin: 0;
}

    .hero-media img[b-5hqo0ldfhn] {
        width: 100%;
        aspect-ratio: 4 / 3;
        display: block;
        object-fit: cover;
        border-radius: 22px;
        box-shadow: 0 24px 45px -28px rgba(0, 0, 0, .75);
    }

/* The hero/gallery CTAs use the shared pill button (styles/Components/pageButton.css)
   so every public page renders the exact same control. */

/* ── Quick links ──────────────────────────────────────────────────────────── */

.quicklinks[b-5hqo0ldfhn] {
    margin-top: var(--element-spacing-mobile);
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
}

.quicklink[b-5hqo0ldfhn] {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.1rem 1.25rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 18px;
    text-decoration: none;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

    .quicklink:hover[b-5hqo0ldfhn] {
        border-color: var(--theme-color);
        transform: translateY(-3px);
        box-shadow: 0 18px 32px -24px rgba(0, 0, 0, .6);
    }

    .quicklink:focus-visible[b-5hqo0ldfhn] {
        outline: 3px solid var(--theme-strong);
        outline-offset: 3px;
    }

.quicklink-icon[b-5hqo0ldfhn] {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-tint);
    border-radius: 14px;
    color: var(--theme-strong);
    font-size: 1.2rem;
}

.quicklink-text[b-5hqo0ldfhn] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.quicklink-title[b-5hqo0ldfhn] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #2f2f2f;
}

.quicklink-desc[b-5hqo0ldfhn] {
    font-size: .85rem;
    line-height: 1.4;
    color: #8a8a85;
}

.quicklink-arrow[b-5hqo0ldfhn] {
    margin-left: auto;
    color: var(--theme-color);
    transition: transform .25s ease;
}

.quicklink:hover .quicklink-arrow[b-5hqo0ldfhn] {
    transform: translateX(3px);
}

/* The gallery teaser is a self-contained block — heading, photos and CTA all live in
   GalleryPreview.razor.css. Nothing for it here. */

/* ── Contact ──────────────────────────────────────────────────────────────── */

.contact-grid[b-5hqo0ldfhn] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}

.contact-card[b-5hqo0ldfhn] {
    padding: 1.75rem 1.5rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 16px 32px -26px rgba(0, 0, 0, .55);
    box-sizing: border-box;
}

.contact-card-title[b-5hqo0ldfhn] {
    margin: 0 0 1.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #2f2f2f;
}

.contact-row[b-5hqo0ldfhn] {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .75rem 0;
    border-top: 1px solid rgba(0, 0, 0, .06);
}

    .contact-row:first-of-type[b-5hqo0ldfhn] {
        border-top: none;
        padding-top: 0;
    }

.contact-row-icon[b-5hqo0ldfhn] {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-tint);
    border-radius: 12px;
    color: var(--theme-strong);
}

.contact-row-text[b-5hqo0ldfhn] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.contact-row-label[b-5hqo0ldfhn] {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a8a85;
}

.contact-row-value[b-5hqo0ldfhn] {
    margin: 0;
    font-size: .98rem;
    font-style: normal;
    line-height: 1.5;
    color: #2f2f2f;
    overflow-wrap: anywhere;
}

a.contact-row-value[b-5hqo0ldfhn] {
    text-decoration: none;
}

    a.contact-row-value:hover[b-5hqo0ldfhn] {
        color: var(--theme-strong);
        text-decoration: underline;
    }

.contact-social[b-5hqo0ldfhn] {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.contact-social-link[b-5hqo0ldfhn] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.1rem;
    background: var(--theme-tint);
    border-radius: 999px;
    color: var(--theme-strong);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
}

    .contact-social-link:hover[b-5hqo0ldfhn] {
        background: var(--theme-color);
        color: #fff;
    }

/* The contact form brings its own bubble (.pf-shell, publicForm.css). Here it only
   has to give up the centred standalone page width and fill the grid column next to
   the details card. */
.contact-form[b-5hqo0ldfhn]  .pf-page {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* ── Map ──────────────────────────────────────────────────────────────────── */

.map-wrap[b-5hqo0ldfhn]  .map-container {
    width: 100%;
    max-width: none;
    height: 18rem;
    border-radius: 22px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .quicklink[b-5hqo0ldfhn],
    .quicklink-arrow[b-5hqo0ldfhn] {
        transition: none;
    }

        .quicklink:hover[b-5hqo0ldfhn] {
            transform: none;
        }

        .quicklink:hover .quicklink-arrow[b-5hqo0ldfhn] {
            transform: none;
        }
}

@media only screen and (min-width: 576px) {

    .quicklinks[b-5hqo0ldfhn] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (min-width: 768px) {

    .hero[b-5hqo0ldfhn] {
        padding: 2.75rem 2.5rem;
    }

    .hero-title[b-5hqo0ldfhn] {
        font-size: 2.5rem;
    }

    .hero-lead[b-5hqo0ldfhn] {
        font-size: 1.08rem;
    }
}

@media only screen and (min-width: 992px) {

    .home[b-5hqo0ldfhn] {
        padding: 0 1.5rem;
    }

    .home-section[b-5hqo0ldfhn] {
        margin-top: var(--element-spacing-computer);
    }

    .hero[b-5hqo0ldfhn] {
        grid-template-columns: 1.05fr 1fr;
        align-items: center;
        gap: 3rem;
        padding: 3.25rem 3rem;
        border-radius: 34px;
    }

        .hero.is-textonly[b-5hqo0ldfhn] {
            grid-template-columns: 1fr;
            text-align: center;
        }

            .hero.is-textonly .hero-actions[b-5hqo0ldfhn] {
                justify-content: center;
            }

    .hero-media img[b-5hqo0ldfhn] {
        aspect-ratio: 5 / 4;
        border-radius: 26px;
    }

    .quicklinks[b-5hqo0ldfhn] {
        margin-top: var(--element-spacing-notebook);
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }

    .quicklink[b-5hqo0ldfhn] {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
        padding: 1.5rem 1.35rem;
    }

    .quicklink-arrow[b-5hqo0ldfhn] {
        margin-left: 0;
    }

    .contact-grid[b-5hqo0ldfhn] {
        grid-template-columns: 1fr 1.15fr;
        gap: 2rem;
    }

    .contact-card[b-5hqo0ldfhn] {
        padding: 2.25rem 2rem;
    }

    .map-wrap[b-5hqo0ldfhn]  .map-container {
        height: 26rem;
        border-radius: 30px;
    }
}

@media only screen and (min-width: 1200px) {

    .home[b-5hqo0ldfhn] {
        padding: 0;
    }

    .hero-title[b-5hqo0ldfhn] {
        font-size: 2.9rem;
    }
}
/* /Pages/Accommodation/Trips.razor.rz.scp.css */
/* Trips and surroundings — the gallery's layout language (Gallery.razor.css) applied to a page
   of cards instead of carousels: the page heading with filter chips under it, one grid with a
   "load more" under it, the map section (TripMap.razor.css) and the closing CTA. No hero card,
   the same as the price list and the gallery.

   Everything is white/near-white; the accommodation's brand shows only through the tokens
   (--theme-color / -strong / -tint) that `.trips-page` carries via its [data-theme] attribute.
   The CTA pills come from the shared .page-btn (styles/Components/pageButton.css) and the
   heading from the shared .section-head (styles/Components/sectionHead.css). */

.trips-page[b-92swrrlrha] {
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* The only section, and the one that opens the page — the layout's own top padding is
   the gap above it. The .section-head inside brings its own bottom margin. */
.trips-section[b-92swrrlrha] {
    margin-top: 0;
}

/* ── Filter chips ─────────────────────────────────────────────────────────── */

/* Phone and tablet: one row scrolling sideways (.trip-chip-scroller), out to the screen's edges
   past the page's 1rem gutter. The padding brings the first chip back in line, leaves the last one
   room to scroll clear of the fade, and above and below gives a lifted chip and the focus ring
   room inside the scrolling box, which clips; the negative margin takes that back out. Left-aligned
   here — centred, the chips overflowing on the left could not be scrolled to. */
.trips-filter[b-92swrrlrha] {
    margin: -.4rem -1rem 1.1rem;
    padding: .4rem 2.5rem .4rem 1rem;
    gap: .5rem;
}

/* The chips themselves (.trip-chip) and the scrolling row are global —
   styles/Components/tripChip.css — because the map section renders the same ones. */

/* Description of the active category — plain text under the chips rather than a second
   heading, since the highlighted chip already says which category it is. */
.trips-category-note[b-92swrrlrha] {
    max-width: 42rem;
    margin: -.25rem auto 1.5rem;
    text-align: center;
    font-size: .95rem;
    line-height: 1.65;
    color: #5f5e5a;
}

/* ── Card grid ────────────────────────────────────────────────────────────── */

/* At most four columns: the lower bound of a track never drops under a quarter of the row, so a
   wide screen gets wider cards rather than a fifth one. With 1–4 columns the page size (twelve,
   Trips.razor.cs) always fills whole rows, and "load more" never sits under a stray card. */
.trip-grid[b-92swrrlrha] {
    --trip-grid-gap: 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(260px, calc((100% - 3 * var(--trip-grid-gap)) / 4)), 1fr));
    gap: var(--trip-grid-gap);
}

.trip-card[b-92swrrlrha] {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 18px 36px -30px rgba(0, 0, 0, .55);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .trip-card:hover[b-92swrrlrha] {
        transform: translateY(-3px);
        box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 22px 40px -26px rgba(0, 0, 0, .55);
    }

.trip-media[b-92swrrlrha] {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--theme-tint);
}

    .trip-media img[b-92swrrlrha] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.trip-media-placeholder[b-92swrrlrha] {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--theme-strong);
    font-size: 2rem;
    opacity: .45;
}

.trip-badge[b-92swrrlrha] {
    position: absolute;
    left: .75rem;
    top: .75rem;
    padding: .2rem .6rem;
    background: rgba(255, 255, 255, .92);
    border-radius: 999px;
    color: var(--theme-strong);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.trip-body[b-92swrrlrha] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1rem 1.15rem 1.15rem;
}

.trip-title[b-92swrrlrha] {
    margin: 0 0 .45rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: #2f2f2f;
}

.trip-text[b-92swrrlrha] {
    margin: 0 0 1rem;
    font-size: .9rem;
    line-height: 1.6;
    color: #5f5e5a;
    /* Three lines keep the cards in a row the same height without cutting mid-word. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Distance from the accommodation, opposite the category badge. */
.trip-distance[b-92swrrlrha] {
    position: absolute;
    right: .75rem;
    top: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .6rem;
    background: rgba(255, 255, 255, .92);
    border-radius: 999px;
    color: #2f2f2f;
    font-size: .74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

    .trip-distance .bi[b-92swrrlrha] {
        color: var(--theme-color);
    }

/* Website link on the left, "on the map" on the right — pushed to the bottom so they line up
   across cards of unequal text length. */
.trip-actions[b-92swrrlrha] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-top: auto;
}

.trip-link[b-92swrrlrha],
.trip-map-link[b-92swrrlrha] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--theme-strong);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
}

    .trip-link:hover[b-92swrrlrha] {
        text-decoration: underline;
    }

    .trip-link:focus-visible[b-92swrrlrha],
    .trip-map-link:focus-visible[b-92swrrlrha] {
        outline: 3px solid var(--theme-strong);
        outline-offset: 3px;
    }

/* A button (it scrolls to the map rather than navigating) dressed as a small tinted pill. */
.trip-map-link[b-92swrrlrha] {
    padding: .3rem .75rem;
    background: var(--theme-tint);
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .2s ease;
}

    .trip-map-link:hover[b-92swrrlrha] {
        background: color-mix(in srgb, var(--theme-color) 22%, #fff);
    }

    /* Alone in the row (no website) it still sits on the right. */
    .trip-map-link:only-child[b-92swrrlrha] {
        margin-left: auto;
    }

/* ── Load more ────────────────────────────────────────────────────────────── */

.trips-more[b-92swrrlrha] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    margin-top: 1.75rem;
}

.trips-more-count[b-92swrrlrha] {
    color: #8a8880;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */

.trips-empty[b-92swrrlrha] {
    padding: 2.2rem 1.5rem;
    text-align: center;
    background: var(--theme-tint);
    border: 1px solid color-mix(in srgb, var(--theme-strong) 20%, transparent);
    border-radius: 22px;
    box-sizing: border-box;
}

.cta-icon[b-92swrrlrha] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--theme-color);
    color: #fff;
    font-size: 1.35rem;
}

.cta-title[b-92swrrlrha] {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #2f2f2f;
}

.cta-text[b-92swrrlrha] {
    max-width: 52ch;
    margin: 0 auto 1.3rem;
    font-size: .93rem;
    line-height: 1.65;
    color: #5f5e5a;
}

.cta-actions[b-92swrrlrha] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .trip-card[b-92swrrlrha],
    .trip-map-link[b-92swrrlrha] {
        transition: none;
    }

        .trip-card:hover[b-92swrrlrha] {
            transform: none;
        }
}

@media only screen and (max-width: 480px) {

    .trip-grid[b-92swrrlrha] {
        grid-template-columns: 1fr;
    }
}

@media only screen and (min-width: 992px) {

    .trips-page[b-92swrrlrha] {
        padding: 0 1.5rem;
    }

    /* Wrapped again, two rows centred under the heading. */
    .trips-filter[b-92swrrlrha] {
        margin: 0 0 2rem;
        padding: 0;
        justify-content: center;
    }

    .trips-empty[b-92swrrlrha] {
        padding: 2.75rem 2.5rem;
        border-radius: 30px;
    }
}

@media only screen and (min-width: 1200px) {

    .trips-page[b-92swrrlrha] {
        padding: 0;
    }
}
/* /Pages/Account/Cleanings/MyCleanings.razor.rz.scp.css */
/* My cleanings — a work list read on a phone. Three layers, from the one thing to everything:
   the next cleaning as a card of its own, the next two weeks as a strip drawn like the office's
   calendar, and the rest as an agenda by month. Every card carries its accommodation's data-theme,
   so which house it is reads as a colour before it reads as a name. People are drawn in the colours
   the calendar gives them (--clc-person-*, global in cleanings.css). */

.mc-page[b-6oj5um16tv] {
    /* Late work — the same amber the calendar and the dashboard use for "somebody has to act". */
    --mc-owed: #e0ad24;
    --mc-owed-tint: #fff8e6;
    --mc-owed-ink: #6b4f0c;
    /* A turnover on the day: not an error, but the tightest window there is. */
    --mc-rush-tint: #fdf0ed;
    --mc-rush-ink: #a33a2a;

    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
    box-sizing: border-box;
    text-align: left;
    color: #2c2c2a;
}

/* ── Header ── */
/* .section-head is centred, as on every public page. */
.mc-top[b-6oj5um16tv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2rem 0 1.5rem;
}

.mc-top .section-head[b-6oj5um16tv] {
    margin: 0;
}

/* ── Shared bits ── */
.mc-house[b-6oj5um16tv] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 700;
}

.mc-house-dot[b-6oj5um16tv] {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--theme-color, #3d6b33);
}

.mc-people[b-6oj5um16tv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    margin-top: .6rem;
    font-size: .84rem;
    color: #5f5e5a;
}

.mc-people-label[b-6oj5um16tv] {
    color: #8a8880;
}

.mc-person[b-6oj5um16tv] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
}

.mc-avatar[b-6oj5um16tv] {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
}

.mc-note-line[b-6oj5um16tv] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: .6rem 0 0;
    padding: .5rem .75rem;
    background: var(--theme-tint, #f1f5ee);
    border-radius: 10px;
    font-size: .87rem;
    color: #3c4a37;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.mc-note-line .bi[b-6oj5um16tv] {
    margin-top: .18rem;
    opacity: .7;
}

.mc-note-edit[b-6oj5um16tv] {
    margin-top: .6rem;
}

.mc-note-edit textarea[b-6oj5um16tv] {
    width: 100%;
    box-sizing: border-box;
    padding: .55rem .75rem;
    border: 1px solid #d8d4cc;
    border-radius: 10px;
    font: inherit;
    font-size: .9rem;
    background: #fff;
    color: inherit;
    resize: vertical;
}

.mc-note-edit textarea:focus[b-6oj5um16tv] {
    outline: none;
    border-color: var(--theme-strong, #3d6b33);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-strong, #3d6b33) 16%, transparent);
}

.mc-note-edit textarea:disabled[b-6oj5um16tv] {
    opacity: .6;
}

.mc-link[b-6oj5um16tv] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .1rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: .86rem;
    color: #6b6a66;
    cursor: pointer;
}

.mc-link:hover:not(:disabled)[b-6oj5um16tv] {
    color: var(--theme-strong, #3d6b33);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mc-link.is-small[b-6oj5um16tv] {
    margin-top: .3rem;
    padding: .2rem 0;
    font-size: .78rem;
    color: #8a8880;
}

.mc-link:disabled[b-6oj5um16tv] {
    opacity: .55;
    cursor: default;
}

/* ── The next cleaning ── */
.mc-next[b-6oj5um16tv] {
    position: relative;
    margin-bottom: 1.25rem;
    padding: 1.35rem 1.4rem 1.1rem;
    background:
        radial-gradient(120% 90% at 100% 0%, var(--theme-tint, #f1f5ee) 0%, rgba(255, 255, 255, 0) 60%),
        #fff;
    border: 1px solid color-mix(in srgb, var(--theme-color, #3d6b33) 22%, #e6e3dd);
    border-radius: 20px;
    box-shadow: 0 10px 28px -18px color-mix(in srgb, var(--theme-strong, #3d6b33) 55%, transparent);
    overflow: hidden;
}

.mc-next-head[b-6oj5um16tv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.mc-next-label[b-6oj5um16tv] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--theme-strong, #3d6b33);
}

.mc-next-when[b-6oj5um16tv] {
    margin: .15rem 0 .25rem;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.1;
    color: #2c2c2a;
}

.mc-next-where[b-6oj5um16tv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .2rem .6rem;
    margin: 0;
    font-size: .95rem;
}

/* How many cleanings the day holds — the same bubble the month headers below count with, in the
   card's colour because here it is the headline. */
.mc-next-count[b-6oj5um16tv] {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .35rem;
    background: var(--theme-color);
    border-radius: 999px;
    font-size: .72rem;
    letter-spacing: 0;
    color: #fff;
    box-sizing: border-box;
}

.mc-next-date[b-6oj5um16tv] {
    color: #6b6a66;
}

.mc-next-date[b-6oj5um16tv]::before {
    content: "·";
    margin-right: .6rem;
    color: #b6b2a8;
}

/* With more than one house the list wraps on a phone and would leave the dot orphaned at the start
   of a line — the date gets a line of its own instead. */
.mc-next.is-shared .mc-next-date[b-6oj5um16tv] {
    flex-basis: 100%;
}

.mc-next.is-shared .mc-next-date[b-6oj5um16tv]::before {
    content: none;
}

/* The calendar leaf: the day as the one big number, in the house's colour. */
.mc-next-tile[b-6oj5um16tv] {
    position: relative;
    overflow: hidden;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 4.2rem;
    height: 4.4rem;
    background: var(--theme-color);
    border-radius: 16px;
    color: #fff;
    line-height: 1;
    box-shadow: 0 6px 16px -8px var(--theme-strong, #3d6b33);
}

/* Two houses on the day: the leaf cut diagonally between their colours, the way the calendar
   stripes a cell that more than one person shares. The bands are skewed and overhang the leaf so
   the cut runs corner to corner without gaps at the edges. */
.mc-next-tile-fill[b-6oj5um16tv] {
    position: absolute;
    inset: 0 -30%;
    display: flex;
    transform: skewX(-20deg);
}

.mc-next-tile-fill > span[b-6oj5um16tv] {
    flex: 1;
    background: var(--theme-color);
}

.mc-next-tile-day[b-6oj5um16tv] {
    position: relative;
    font-size: 1.75rem;
    font-weight: 700;
}

.mc-next-tile-month[b-6oj5um16tv] {
    position: relative;
    margin-top: .3rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .85;
}

/* The window as a bar between the two guests. */
.mc-track[b-6oj5um16tv] {
    display: grid;
    grid-template-columns: auto minmax(5rem, 1fr) auto;
    align-items: center;
    gap: .9rem;
    margin-top: 1.2rem;
    padding: .85rem 1rem;
    background: rgba(255, 255, 255, .75);
    border: 1px solid #efece6;
    border-radius: 14px;
}

.mc-track-end[b-6oj5um16tv] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.mc-track-end.is-end[b-6oj5um16tv] {
    align-items: flex-end;
    text-align: right;
}

.mc-track-label[b-6oj5um16tv] {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8a8880;
}

/* Wraps only between the date and the hour (the date holds together with non-breaking spaces) —
   on the narrowest phones the two ends do not fit side by side on one line each. */
.mc-track-end time[b-6oj5um16tv] {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.mc-track-bar[b-6oj5um16tv] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    padding: 0 .9rem;
    background:
        repeating-linear-gradient(-45deg,
            color-mix(in srgb, var(--theme-color, #3d6b33) 16%, transparent) 0 6px,
            color-mix(in srgb, var(--theme-color, #3d6b33) 9%, transparent) 6px 12px);
    border-radius: 999px;
}

/* The two ends of the bar, where the guests leave and arrive. */
.mc-track-bar[b-6oj5um16tv]::before,
.mc-track-bar[b-6oj5um16tv]::after {
    content: "";
    position: absolute;
    top: 50%;
    width: .7rem;
    height: .7rem;
    margin-top: -.35rem;
    border-radius: 50%;
    background: var(--theme-color);
    box-shadow: 0 0 0 3px #fff;
}

.mc-track-bar[b-6oj5um16tv]::before {
    left: -.35rem;
}

.mc-track-bar[b-6oj5um16tv]::after {
    right: -.35rem;
}

.mc-track-bar span[b-6oj5um16tv] {
    font-size: .8rem;
    font-weight: 700;
    color: var(--theme-strong, #3d6b33);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-track.is-open .mc-track-bar[b-6oj5um16tv] {
    background: none;
    border: 2px dashed color-mix(in srgb, var(--theme-color, #3d6b33) 35%, transparent);
}

.mc-track.is-open .mc-track-bar[b-6oj5um16tv]::after {
    display: none;
}

.mc-track.is-open .mc-track-end.is-end time[b-6oj5um16tv] {
    font-weight: 400;
    color: #8a8880;
}

.mc-next.is-sameday .mc-track-bar[b-6oj5um16tv],
.mc-next-item.is-sameday .mc-track-bar[b-6oj5um16tv] {
    background:
        repeating-linear-gradient(-45deg,
            color-mix(in srgb, var(--mc-rush-ink) 16%, transparent) 0 6px,
            color-mix(in srgb, var(--mc-rush-ink) 8%, transparent) 6px 12px);
}

.mc-next.is-sameday .mc-track-bar span[b-6oj5um16tv],
.mc-next-item.is-sameday .mc-track-bar span[b-6oj5um16tv] {
    color: var(--mc-rush-ink);
}

.mc-next.is-sameday .mc-track-bar[b-6oj5um16tv]::before,
.mc-next.is-sameday .mc-track-bar[b-6oj5um16tv]::after,
.mc-next-item.is-sameday .mc-track-bar[b-6oj5um16tv]::before,
.mc-next-item.is-sameday .mc-track-bar[b-6oj5um16tv]::after {
    background: var(--mc-rush-ink);
}

/* One house of a shared day: its own section under a rule, named, in its own colour (the section
   carries its data-theme), ticked off on its own. */
.mc-next-item[b-6oj5um16tv] {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid #efece6;
}

.mc-next-item-head[b-6oj5um16tv] {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c2c2a;
}

.mc-next-item-head .mc-house-dot[b-6oj5um16tv] {
    width: 11px;
    height: 11px;
}

.mc-next-item .mc-track[b-6oj5um16tv] {
    margin-top: .75rem;
}

/* The rule above the section already closes off the house before it. */
.mc-next-item .mc-next-actions[b-6oj5um16tv] {
    margin-top: .8rem;
    padding-top: 0;
    border-top: 0;
}

.mc-next-tags[b-6oj5um16tv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .85rem;
}

/* The arriving guests — how many beds to make up. In the house's colour, because it belongs to the
   stay rather than to the urgency. Allowed to wrap: the text itself only breaks after the plus. */
.mc-guests[b-6oj5um16tv] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .25rem .7rem;
    background: var(--theme-tint, #f1f5ee);
    border: 1px solid color-mix(in srgb, var(--theme-color, #3d6b33) 22%, transparent);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--theme-strong, #3d6b33);
}

/* A reservation nobody filled the guests in on: a thing to ask about, not a number of beds. */
.mc-guests.is-missing[b-6oj5um16tv] {
    background: #f6f5f2;
    border: 1px dashed #d6d2c8;
    font-weight: 600;
    color: #6b6a66;
}

.mc-next-tags .mc-guests[b-6oj5um16tv] {
    padding: .4rem .9rem;
    font-size: .92rem;
}

.mc-row-guests[b-6oj5um16tv] {
    margin: .45rem 0 0;
}

.mc-flag[b-6oj5um16tv] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .7rem;
    background: var(--mc-rush-tint);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--mc-rush-ink);
}

.mc-next-actions[b-6oj5um16tv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid #efece6;
}

/* Plné, ale jen tak široké jako jeho text, vpravo vedle poznámky — i na telefonu (varianta A,
   2026-10-02). Pruh přes celou šířku karty byl nejtěžší věc na stránce a přebíjel všechno, co se
   z karty čte; k zásahu palcem stačí tohle. */
.mc-btn[b-6oj5um16tv] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .5rem 1.1rem;
    background: var(--theme-color);
    border: 1px solid var(--theme-color);
    border-radius: 999px;
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, transform .15s;
}

.mc-btn:hover:not(:disabled)[b-6oj5um16tv] {
    background: var(--theme-strong);
    border-color: var(--theme-strong);
}

.mc-btn:active:not(:disabled)[b-6oj5um16tv] {
    transform: translateY(1px);
}

.mc-btn:disabled[b-6oj5um16tv] {
    opacity: .55;
    cursor: default;
}

/* ── Two-week strip ── */
.mc-strip[b-6oj5um16tv] {
    margin-bottom: 1.75rem;
    padding: 1rem 1.1rem 1.05rem;
    background: #fff;
    border: 1px solid #e6e3dd;
    border-radius: 18px;
}

.mc-strip-title[b-6oj5um16tv],
.mc-month-title[b-6oj5um16tv] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .75rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8a8880;
}

.mc-strip-grid[b-6oj5um16tv] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .4rem;
}

.mc-weekday[b-6oj5um16tv] {
    padding-bottom: .1rem;
    font-size: .68rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    color: #b0aca2;
}

.mc-day[b-6oj5um16tv] {
    position: relative;
    display: grid;
    place-items: center;
    height: 2.7rem;
    background: #f6f5f2;
    border-radius: 11px;
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
    color: #6b6a66;
}

/* A day with a cleaning is a button that leads to its card below. */
button.mc-day[b-6oj5um16tv] {
    width: 100%;
    padding: 0;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    transition: transform .15s, filter .15s;
}

button.mc-day:hover[b-6oj5um16tv] {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

button.mc-day:focus-visible[b-6oj5um16tv] {
    outline: 2px solid var(--theme-strong, #3d6b33);
    outline-offset: 2px;
}

.mc-day.is-past[b-6oj5um16tv] {
    background: none;
    color: #c4c0b7;
}

.mc-day.has-cleaning[b-6oj5um16tv] {
    background: var(--theme-color, #3d6b33);
    font-weight: 700;
    color: #fff;
    box-shadow: 0 4px 10px -6px var(--theme-strong, #3d6b33);
}

.mc-day.has-cleaning.is-done[b-6oj5um16tv] {
    background: var(--theme-tint, #f1f5ee);
    color: var(--theme-strong, #3d6b33);
    box-shadow: none;
}

.mc-day.is-owed[b-6oj5um16tv] {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mc-owed);
}

.mc-day.is-today[b-6oj5um16tv] {
    outline: 2px solid #2c2c2a;
    outline-offset: 2px;
}

.mc-day-mark[b-6oj5um16tv] {
    position: absolute;
    top: .2rem;
    right: .28rem;
    font-size: .62rem;
    line-height: 1;
}

.mc-day-more[b-6oj5um16tv] {
    position: absolute;
    bottom: .18rem;
    right: .28rem;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1;
    opacity: .85;
}

.mc-strip-legend[b-6oj5um16tv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    margin-top: .85rem;
    font-size: .8rem;
    color: #5f5e5a;
}

.mc-strip-legend .mc-house[b-6oj5um16tv] {
    font-weight: 600;
}

.mc-strip-key[b-6oj5um16tv] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #8a8880;
}

.mc-strip-empty[b-6oj5um16tv] {
    margin: .8rem 0 0;
    font-size: .84rem;
    color: #8a8880;
}

/* ── Agenda by month ── */
.mc-month[b-6oj5um16tv] {
    margin-top: 1.5rem;
}

.mc-month-count[b-6oj5um16tv] {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .35rem;
    background: #efece6;
    border-radius: 999px;
    font-size: .7rem;
    letter-spacing: 0;
    color: #6b6a66;
    box-sizing: border-box;
}

.mc-agenda[b-6oj5um16tv] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.mc-row[b-6oj5um16tv] {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr);
    align-items: start;
    gap: 0 .9rem;
    padding: .85rem 1rem .75rem .9rem;
    background: #fff;
    border: 1px solid #e6e3dd;
    border-radius: 14px;
    /* The house as a stripe down the left edge. */
    box-shadow: inset 4px 0 0 var(--theme-color, #3d6b33);
    transition: border-color .15s, box-shadow .15s;
}

.mc-row:hover[b-6oj5um16tv] {
    border-color: color-mix(in srgb, var(--theme-color, #3d6b33) 35%, #e6e3dd);
}

/* Where a click on a day of the strip lands. Only ever focused by that jump (site.js
   scrollToAndFocus), so the ring means "this one" and goes away with the next click elsewhere. */
.mc-row:focus[b-6oj5um16tv],
.mc-next:focus[b-6oj5um16tv],
.mc-next-item:focus[b-6oj5um16tv] {
    outline: 3px solid color-mix(in srgb, var(--theme-color, #3d6b33) 55%, transparent);
    outline-offset: 3px;
    animation: mc-landed-b-6oj5um16tv .7s ease-out;
}

@keyframes mc-landed-b-6oj5um16tv {
    from {
        outline-color: transparent;
        outline-offset: 12px;
    }
}

.mc-row-date[b-6oj5um16tv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: .1rem;
    line-height: 1;
}

.mc-row-day[b-6oj5um16tv] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-strong, #3d6b33);
}

.mc-row-weekday[b-6oj5um16tv] {
    margin-top: .3rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a8880;
}

.mc-row-top[b-6oj5um16tv] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .98rem;
}

.mc-bolt[b-6oj5um16tv] {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    background: var(--mc-rush-tint);
    border-radius: 50%;
    font-size: .7rem;
    color: var(--mc-rush-ink);
}

.mc-row-rel[b-6oj5um16tv] {
    margin-left: auto;
    font-size: .78rem;
    color: #8a8880;
    white-space: nowrap;
}

.mc-row-time[b-6oj5um16tv] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .2rem .45rem;
    margin: .3rem 0 0;
    font-size: .9rem;
}

.mc-row-time time[b-6oj5um16tv] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mc-row-time time.is-muted[b-6oj5um16tv] {
    font-weight: 400;
    color: #8a8880;
}

.mc-arrow[b-6oj5um16tv] {
    color: #b6b2a8;
}

.mc-row-span[b-6oj5um16tv] {
    font-size: .8rem;
    color: #8a8880;
}

.mc-row-span[b-6oj5um16tv]::before {
    content: "·";
    margin-right: .45rem;
    color: #b6b2a8;
}

.mc-row.is-sameday .mc-row-span[b-6oj5um16tv] {
    font-weight: 700;
    color: var(--mc-rush-ink);
}

.mc-row-hint[b-6oj5um16tv],
.mc-row-stamp[b-6oj5um16tv] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .35rem 0 0;
    font-size: .82rem;
    color: #6b6a66;
}

.mc-row-stamp[b-6oj5um16tv] {
    color: var(--theme-strong, #3d6b33);
    font-weight: 600;
}

/* The foot of a row: the note on the left, the tick on the right. When the two do not fit side by
   side (the narrower rows inside "Zbývá odškrtnout"), the tick drops under and stays right. */
.mc-row-foot[b-6oj5um16tv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem .75rem;
    margin-top: .35rem;
}

.mc-row-foot .mc-link.is-small[b-6oj5um16tv] {
    margin-top: 0;
    white-space: nowrap;
}

.mc-row-foot > :last-child[b-6oj5um16tv] {
    margin-left: auto;
    white-space: nowrap;
}

/* The tick: light, in the house's colour, the shape of the button on the card above. A list holds
   many of them, so only the hover/press fills it — a column of solid buttons would shout. */
.mc-row-done[b-6oj5um16tv] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .85rem;
    background: var(--theme-tint, #f1f5ee);
    border: 1px solid color-mix(in srgb, var(--theme-color, #3d6b33) 35%, transparent);
    border-radius: 999px;
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    color: var(--theme-strong, #3d6b33);
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}

.mc-row-done:hover:not(:disabled)[b-6oj5um16tv] {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: #fff;
}

.mc-row-done:active:not(:disabled)[b-6oj5um16tv] {
    transform: translateY(1px);
}

/* Taking a tick back: grey and outlined, so it does not compete with what is still to be done. */
.mc-row-done.is-undo[b-6oj5um16tv] {
    background: #fff;
    border-color: #dcd8cf;
    font-weight: 600;
    color: #6b6a66;
}

.mc-row-done.is-undo:hover:not(:disabled)[b-6oj5um16tv] {
    background: #f6f5f2;
    border-color: #cfcac0;
    color: #2c2c2a;
}

.mc-row-done:disabled[b-6oj5um16tv] {
    opacity: .55;
    cursor: default;
}

/* A cleaning that is over: the planner closes it, so in place of the tick a quiet lock. */
.mc-row-locked[b-6oj5um16tv] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 600;
    color: #8a8880;
}

/* ── Late: over and not ticked off ── */
.mc-owed[b-6oj5um16tv] {
    margin-bottom: 1.25rem;
    padding: 1rem 1rem 1rem;
    background: var(--mc-owed-tint);
    border: 1px solid color-mix(in srgb, var(--mc-owed) 45%, #fff);
    border-radius: 18px;
}

.mc-owed-head[b-6oj5um16tv] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .85rem;
}

.mc-owed-icon[b-6oj5um16tv] {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    background: var(--mc-owed);
    border-radius: 50%;
    color: #fff;
}

.mc-owed-head h2[b-6oj5um16tv] {
    margin: .1rem 0 .15rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--mc-owed-ink);
}

.mc-owed-head p[b-6oj5um16tv] {
    margin: 0;
    font-size: .84rem;
    color: var(--mc-owed-ink);
    opacity: .85;
}

.mc-row.is-owed[b-6oj5um16tv] {
    border-color: color-mix(in srgb, var(--mc-owed) 35%, #fff);
    box-shadow: inset 4px 0 0 var(--mc-owed);
}

.mc-row.is-owed .mc-row-rel[b-6oj5um16tv] {
    font-weight: 700;
    color: var(--mc-owed-ink);
}

/* ── Done ── */
.mc-month.is-done .mc-month-title .bi[b-6oj5um16tv] {
    font-size: .9rem;
}

.mc-row.is-done[b-6oj5um16tv] {
    background: #fbfbf9;
    border-color: #ebe9e3;
    box-shadow: inset 4px 0 0 #dcd8cf;
}

.mc-row.is-done .mc-row-day[b-6oj5um16tv],
.mc-row.is-done .mc-house[b-6oj5um16tv] {
    color: #8a8880;
}

.mc-row.is-done .mc-house-dot[b-6oj5um16tv] {
    opacity: .5;
}

/* ── States ── */
.mc-state[b-6oj5um16tv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem 1rem;
    color: #6b6a66;
    font-size: .9rem;
}

.mc-state.is-error[b-6oj5um16tv] {
    color: #8c2f26;
}

/* Sdílený Spinner si nese výšku celé stránky, aby se vycentroval sám. Tady sedí pod nadpisem
   v bloku, který si střed drží sám — jinak by odtlačil patičku o celou obrazovku. */
.mc-state[b-6oj5um16tv]  .centered-spinner {
    min-height: 0;
}

.mc-empty[b-6oj5um16tv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1.5rem;
    background:
        radial-gradient(80% 70% at 50% 0%, var(--theme-tint, #f1f5ee) 0%, rgba(255, 255, 255, 0) 70%),
        #fff;
    border: 1px solid #e6e3dd;
    border-radius: 20px;
    text-align: center;
}

.mc-empty-icon[b-6oj5um16tv] {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: .9rem;
    background: var(--theme-color);
    border-radius: 50%;
    font-size: 1.5rem;
    color: #fff;
}

.mc-empty-title[b-6oj5um16tv] {
    margin: 0 0 .3rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.mc-empty-hint[b-6oj5um16tv] {
    margin: 0;
    font-size: .88rem;
    color: #6b6a66;
}

.mc-result[b-6oj5um16tv] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: .88rem;
}

.mc-result.is-ok[b-6oj5um16tv] {
    background: #edf6ec;
    color: #2f5d29;
}

.mc-result.is-error[b-6oj5um16tv] {
    background: #fbeceb;
    color: #8c2f26;
}

/* ── Phone ── */
@media (max-width: 520px) {

    .mc-next[b-6oj5um16tv] {
        padding: 1.1rem 1rem 1rem;
    }

    .mc-next-when[b-6oj5um16tv] {
        font-size: 1.75rem;
    }

    .mc-next-tile[b-6oj5um16tv] {
        width: 3.5rem;
        height: 3.7rem;
    }

    .mc-next-tile-day[b-6oj5um16tv] {
        font-size: 1.45rem;
    }

    /* Beside the leaf there is no room for house and date on one line: the date would wrap and
       leave its dot at the start of the next one. It gets that line to itself straight away. */
    .mc-next-date[b-6oj5um16tv] {
        flex-basis: 100%;
    }

    .mc-next-date[b-6oj5um16tv]::before {
        content: none;
    }

    /* The two ends side by side, the bar under them across the whole card. Equal halves that may
       shrink below their content — the time then drops under the date. */
    .mc-track[b-6oj5um16tv] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "start end"
            "bar bar";
        gap: .7rem .5rem;
        padding: .75rem .85rem .9rem;
    }

    .mc-track-end[b-6oj5um16tv] {
        grid-area: start;
    }

    .mc-track-end.is-end[b-6oj5um16tv] {
        grid-area: end;
    }

    /* Small enough for "so 17. 10. 14:00" to keep to one line on a 360px phone. */
    .mc-track-end time[b-6oj5um16tv] {
        font-size: 1.05rem;
    }

    .mc-track-bar[b-6oj5um16tv] {
        grid-area: bar;
        margin: 0 .35rem;
    }

    .mc-strip[b-6oj5um16tv] {
        padding: .85rem .75rem .9rem;
    }

    .mc-strip-grid[b-6oj5um16tv] {
        gap: .3rem;
    }

    .mc-day[b-6oj5um16tv] {
        height: 2.4rem;
    }

    .mc-day-mark[b-6oj5um16tv] {
        top: .12rem;
        right: .16rem;
        font-size: .55rem;
    }

    .mc-row[b-6oj5um16tv] {
        grid-template-columns: 2.6rem minmax(0, 1fr);
        gap: 0 .65rem;
        padding: .8rem .75rem .7rem .75rem;
    }

    .mc-row-rel[b-6oj5um16tv] {
        display: none;
    }

    /* The window rarely fits on one line here, and the span would start the next one with its dot. */
    .mc-row-span[b-6oj5um16tv] {
        flex-basis: 100%;
    }

    .mc-row-span[b-6oj5um16tv]::before {
        content: none;
    }
}
/* /Pages/Account/Pages/AccountDeleted.razor.rz.scp.css */
/* Co se smazalo a co zůstává — pod textem výsledkové karty. Zarovnané doleva,
   protože jde o věty, ne o pilulky jako .rc-perks u dokončené registrace.
   Barvy jen z brand tokenů nastavených atributem data-theme na .result-page. */

/* Krátký úvod se jinak láme až na „e-|mailem" na posledním řádku. */
.result-lead[b-leo9tni0v7] {
    text-wrap: balance;
}

.ad-facts[b-leo9tni0v7] {
    display: grid;
    gap: .5rem;
    /* .result-lead pod sebou nechává 2.2rem — seznam patří blíž k textu. */
    margin: -1.2rem 0 2rem;
    padding: 0;
    list-style: none;
    text-align: left;
}

    .ad-facts li[b-leo9tni0v7] {
        display: flex;
        align-items: flex-start;
        gap: .65rem;
        padding: .7rem .85rem;
        border: 1px solid rgba(0, 0, 0, .06);
        border-radius: 12px;
        background: #fff;
        font-size: .9rem;
        line-height: 1.5;
        color: #4a4945;
    }

    .ad-facts .bi[b-leo9tni0v7] {
        flex-shrink: 0;
        margin-top: .1rem;
        color: var(--theme-strong);
        font-size: .95rem;
    }
/* /Pages/Account/Pages/RegistrationCompleted.razor.rz.scp.css */
/* Pilulky „co teď účet umí" pod textem výsledkové karty. Vizuálně stejné jako
   .auth-perks na registraci (styles/Pages/auth.css), jen scoped — mimo tuhle
   stránku je nikde nepotřebujeme. Barvy jen z brand tokenů, aby seděly s tématem
   nastaveným atributem data-theme na .result-page. */
.rc-perks[b-ahqtczj3ew] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    /* .result-lead pod sebou nechává 2.2rem — pilulky patří blíž k textu. */
    margin: -1.4rem 0 1.9rem;
    padding: 0;
    list-style: none;
}

    .rc-perks li[b-ahqtczj3ew] {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .3rem .6rem;
        border: 1px solid rgba(0, 0, 0, .06);
        border-radius: 999px;
        background: #fff;
        font-size: .75rem;
        font-weight: 600;
        color: #5f5e5a;
    }

    .rc-perks .bi[b-ahqtczj3ew] {
        color: var(--theme-strong);
        font-size: .85rem;
    }
/* /Pages/Account/Shared/StatusMessage.razor.rz.scp.css */
.textBox[b-xdivqf4yn4] {
    margin-bottom: var(--element-spacing-mobile);
}

@media only screen and (min-width: 400px) and (max-width: 992px) {

    .textBox[b-xdivqf4yn4] {
        margin-bottom: var(--element-spacing-tablet);
    }

}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

    .textBox[b-xdivqf4yn4] {
        margin-bottom: var(--element-spacing-notebook);
    }
}

@media only screen and (min-width: 1200px) {

    .textBox[b-xdivqf4yn4] {
        margin-bottom: var(--element-spacing-computer);
    }
}
/* /Pages/Account/Shared/ValidationMessageBox.razor.rz.scp.css */
.validation-message-box[b-jq9lbtr1gs] {
    width: 90%;
    margin: 0 auto;
    padding: 1rem 1rem;
    border-radius: 20px;
    background-color: white;
    color: var(--theme-strong);
}
/* /Pages/Administration/Appearance/GalleryManagement.razor.rz.scp.css */
/* Brand accent comes from the shared theme tokens (--theme-color / -strong / -tint),
   set per accommodation in variables.css and the runtime brand stylesheet.
   Variant A "minimal canvas": no coloured panel — a plain, left-aligned page. */

.gallery-page[b-s8s93o1ftu] {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

/* Toolbar: photo count on the left, accommodation picker on the right */
.gallery-toolbar[b-s8s93o1ftu] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}

.gallery-summary[b-s8s93o1ftu] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.gallery-summary-count[b-s8s93o1ftu] {
    font-size: 1.6rem;
    font-weight: 600;
    color: #2c2c2a;
    line-height: 1;
}

.gallery-summary-label[b-s8s93o1ftu] {
    font-size: 0.85rem;
    color: #6f6e6a;
}

.gallery-accommodation[b-s8s93o1ftu] {
    min-width: 240px;
}

.gallery-accommodation label[b-s8s93o1ftu] {
    display: block;
    text-align: left;
    font-size: 0.8rem;
    color: #6f6e6a;
    margin-bottom: 4px;
}

.gallery-accommodation[b-s8s93o1ftu]  .form-select {
    border-radius: 8px;
    border-color: #d3d1c7;
}

/* Focus in the accommodation's brand colour (green/brown) instead of bootstrap blue */
.gallery-page[b-s8s93o1ftu]  .form-control:focus,
.gallery-page[b-s8s93o1ftu]  .form-select:focus {
    border-color: var(--theme-strong, var(--theme-color));
    box-shadow: 0 0 0 2px var(--theme-tint, #eef6ec);
    outline: none;
}

/* Category tabs — underlined strip (no coloured pills) */
/* One scrolling row that fades out on the right; the end padding lets the last tab scroll clear
   of the fade. The baseline is an inset shadow (not a border + negative tab margin), so the
   scroller never grows a vertical scrollbar. */
.gallery-tabs[b-s8s93o1ftu] {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 1.25rem 0 1.5rem;
    padding-right: 2.5rem;
    box-shadow: inset 0 -1px 0 #e3e3e0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}

.gallery-tabs[b-s8s93o1ftu]::-webkit-scrollbar {
    display: none;
}

.gallery-tab[b-s8s93o1ftu] {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: #6f6e6a;
    font-size: 0.92rem;
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}

.gallery-tab:hover[b-s8s93o1ftu] {
    color: #2c2c2a;
}

.gallery-tab.active[b-s8s93o1ftu] {
    color: var(--theme-strong, var(--theme-color));
    font-weight: 600;
    border-bottom-color: var(--theme-color);
}

.gallery-tab-count[b-s8s93o1ftu] {
    font-size: 0.75rem;
    color: #a3a29b;
}

.gallery-tab.active .gallery-tab-count[b-s8s93o1ftu] {
    color: var(--theme-color);
}

/* Drag & drop upload zone — slim, horizontal */
.gallery-dropzone[b-s8s93o1ftu] {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 16px 20px;
    border: 1.5px dashed #d3d1c7;
    border-radius: 10px;
    background: #faf9f5;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.gallery-dropzone:hover[b-s8s93o1ftu] {
    border-color: var(--theme-color);
    background: var(--theme-color-tint, #f1f5ee);
}

.gallery-dropzone.is-uploading[b-s8s93o1ftu] {
    opacity: .6;
    pointer-events: none;
}

.gallery-dropzone-text[b-s8s93o1ftu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* The <input type=file> from InputFile is overlaid transparently so the whole
   zone accepts clicks and native file drops. */
.gallery-dropzone[b-s8s93o1ftu]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.gallery-dropzone .bi[b-s8s93o1ftu] {
    font-size: 1.7rem;
    color: var(--theme-color);
    flex-shrink: 0;
}

.gallery-dropzone-title[b-s8s93o1ftu] {
    font-weight: 500;
    color: #2c2c2a;
}

.gallery-dropzone-hint[b-s8s93o1ftu] {
    font-size: 0.8rem;
    color: #6f6e6a;
}

/* Card grid */
.gallery-grid[b-s8s93o1ftu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.gallery-card[b-s8s93o1ftu] {
    display: flex;
    flex-direction: column;
    border: 1px solid #e3e3e0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.gallery-card.is-main[b-s8s93o1ftu] {
    border: 2px solid var(--theme-color);
}

.gallery-thumb[b-s8s93o1ftu] {
    position: relative;
    height: 140px;
    background: #f1efe8;
}

.gallery-thumb img[b-s8s93o1ftu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}

/* Lightbox — click a thumbnail to enlarge, X to close */
.gallery-lightbox[b-s8s93o1ftu] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
    background: rgba(0, 0, 0, .8);
    cursor: zoom-out;
    outline: none;
}

.gallery-lightbox img[b-s8s93o1ftu] {
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .45);
    cursor: default;
}

.gallery-lightbox-close[b-s8s93o1ftu] {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background-color .15s;
}

.gallery-lightbox-close:hover[b-s8s93o1ftu] {
    background: rgba(255, 255, 255, .32);
}

/* Prev / next arrows */
.gallery-lightbox-nav[b-s8s93o1ftu] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background-color .15s;
}

.gallery-lightbox-nav.prev[b-s8s93o1ftu] {
    left: 24px;
}

.gallery-lightbox-nav.next[b-s8s93o1ftu] {
    right: 24px;
}

.gallery-lightbox-nav:hover:not(:disabled)[b-s8s93o1ftu] {
    background: rgba(255, 255, 255, .32);
}

.gallery-lightbox-nav:disabled[b-s8s93o1ftu] {
    opacity: .3;
    cursor: default;
}

.gallery-main-badge[b-s8s93o1ftu],
.gallery-main-set[b-s8s93o1ftu] {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    padding: 3px 9px;
    border-radius: 999px;
    line-height: 1.4;
}

.gallery-main-badge[b-s8s93o1ftu] {
    background: var(--theme-color);
    color: #fff;
}

.gallery-main-set[b-s8s93o1ftu] {
    background: rgba(255, 255, 255, .92);
    color: #444441;
    border: 1px solid #d3d1c7;
    cursor: pointer;
}

.gallery-main-set:hover[b-s8s93o1ftu] {
    color: var(--theme-color);
    border-color: var(--theme-color);
}

.gallery-card-body[b-s8s93o1ftu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
}

.gallery-card-row[b-s8s93o1ftu] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}

.gallery-card-category[b-s8s93o1ftu] {
    flex: 1 1 auto;
    min-width: 0;
}

.gallery-card-actions[b-s8s93o1ftu] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
/* /Pages/Administration/Bookings/Blockouts.razor.rz.scp.css */
/* Blockouts — the look of the new-reservation form: white cards (.res-card.is-plain), title in the
   first card with a back arrow, house tiles (.rc-houses), the range frame (.rv-range), the error
   summary (.rc-errors) and the buttons (.rc-actions) all come from reservationEdit.css, so the two
   screens stay identical without a second copy of those rules.

   What is left here is what only this page has: the edit flag, the count and the guest impact of the
   closed days, the result of saving and the list under the form. */

/* ── Head ── */
.bl-title-row[b-gd4znc6uu2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

/* "Úprava blokace" — the form is the same one for new and existing, so the head has to say which.
   Amber like the row being edited in the list below. */
.bl-edit-flag[b-gd4znc6uu2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #fdf3dd;
    color: #7a5a16;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ── Closed days ── */
/* How many days the range closes, where the reservation form shows its nights. Slovo za číslem je
   ve tvaru podle počtu („1 den“, „3 dny“, „7 dní“, viz DaysWord). */
.bl-days[b-gd4znc6uu2] {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--theme-color);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

/* What the dates mean for the guests: the last departure and the first arrival, or the rule while
   the range is not complete yet. */
.bl-impact-line[b-gd4znc6uu2] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px dashed #e4e2db;
    font-size: .8rem;
    line-height: 1.45;
    color: #6f6e6a;
}

.bl-impact-line span[b-gd4znc6uu2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bl-impact-line b[b-gd4znc6uu2] {
    color: #2c2c2a;
}

.bl-impact-line .bi[b-gd4znc6uu2] {
    color: var(--theme-strong, var(--theme-color));
}

/* ── Result of saving ── */
/* Above the buttons, where the operator just clicked — the same place as the error summary. */
.bl-feedback[b-gd4znc6uu2] {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.bl-alert[b-gd4znc6uu2],
.bl-result[b-gd4znc6uu2] {
    padding: 12px 14px;
    border-radius: 12px;
    font-size: .88rem;
}

.bl-alert p[b-gd4znc6uu2] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .5rem;
    font-weight: 600;
}

/* Rezervace pod nadpisem upozornění. Jedna mřížka přes celý seznam a řádky v ní jako subgrid, aby
   termíny, hosté, stavy i VS ležely pod sebou bez ohledu na délku jména. Text řádku začíná tam,
   kde text nadpisu (ikona 1em + mezera .5rem); řádek-odkaz má vlastní vnitřní okraj .5rem kvůli
   podbarvení při najetí, proto o něj menší odsazení seznamu. */
.bl-conflicts[b-gd4znc6uu2] {
    display: grid;
    grid-template-columns: repeat(4, auto) 1fr;
    column-gap: 1.25rem;
    margin: -.15rem 0 -.3rem 1em;
    padding: 0;
    list-style: none;
}

.bl-conflicts li[b-gd4znc6uu2] {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
}

.bl-conflicts a[b-gd4znc6uu2] {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    padding: .3rem .5rem;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
}

.bl-conflicts a:hover[b-gd4znc6uu2] {
    background: color-mix(in srgb, currentColor 9%, transparent);
}

.bl-conflicts a:focus-visible[b-gd4znc6uu2] {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

/* Když místo dojde, zalomí se jen jméno — termín rozdělený za pomlčkou se špatně čte. */
.bl-cf-stay[b-gd4znc6uu2],
.bl-cf-status[b-gd4znc6uu2],
.bl-cf-vs[b-gd4znc6uu2] {
    white-space: nowrap;
}

.bl-cf-stay[b-gd4znc6uu2],
.bl-cf-vs[b-gd4znc6uu2] {
    font-variant-numeric: tabular-nums;
}

.bl-cf-guest[b-gd4znc6uu2] {
    font-weight: 600;
}

.bl-cf-vs[b-gd4znc6uu2] {
    opacity: .7;
}

.bl-conflicts .bi-chevron-right[b-gd4znc6uu2] {
    justify-self: end;
    font-size: .8em;
    opacity: .45;
}

.bl-conflicts a:hover .bi-chevron-right[b-gd4znc6uu2] {
    opacity: 1;
}

/* Reservations that can no longer be confirmed are not a failure — the blockout was saved. Amber. */
.bl-alert.is-warning[b-gd4znc6uu2] {
    background: #fdf3dd;
    color: #7a5a16;
}

.bl-result[b-gd4znc6uu2] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.bl-result.is-ok[b-gd4znc6uu2] {
    background: #edf6ec;
    color: #2f5d29;
}

.bl-result.is-error[b-gd4znc6uu2] {
    background: #fbeceb;
    color: #8c2f26;
}

/* Rezervace v souhrnu chyb jsou odkazy do editoru, ne tlačítka — bez podtržení jako ostatní položky. */
.rc-errors a.rc-errors-link[b-gd4znc6uu2] {
    text-decoration: none;
}

/* ── List ── */
/* A separate card under the buttons, so the page reads as "what I am closing" and "what is closed". */
.bl-list[b-gd4znc6uu2] {
    margin-top: 1.5rem;
}

.bl-count[b-gd4znc6uu2] {
    flex: none;
    margin-left: auto;
    padding: 2px 9px;
    border: 1px solid #e4e2db;
    border-radius: 999px;
    background: #fff;
    color: #5f5e5a;
    font-size: .75rem;
    font-weight: 600;
}

.bl-table-container[b-gd4znc6uu2] {
    overflow-x: auto;
}

.bl-table[b-gd4znc6uu2] {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.bl-table th[b-gd4znc6uu2] {
    padding: .5rem .6rem;
    border-bottom: 1px solid #e6e3dd;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #8a8880;
    text-align: left;
}

.bl-table td[b-gd4znc6uu2] {
    padding: .6rem;
    border-bottom: 1px solid #f0eee9;
    vertical-align: top;
}

/* The card draws the edge, so the table starts and ends where the card heading does. */
.bl-table th:first-child[b-gd4znc6uu2],
.bl-table td:first-child[b-gd4znc6uu2] {
    padding-left: 0;
}

.bl-table th:last-child[b-gd4znc6uu2],
.bl-table td:last-child[b-gd4znc6uu2] {
    padding-right: 0;
}

.bl-table tr:last-child td[b-gd4znc6uu2] {
    border-bottom: none;
}

/* The blockout that is in the form above right now — amber like the "Úprava blokace" flag. */
.bl-table tr.is-editing[b-gd4znc6uu2] {
    background: #fdf8ec;
}

.bl-table tr.is-editing td:first-child[b-gd4znc6uu2] {
    box-shadow: inset 3px 0 0 #e0b45a;
}

/* The object the row belongs to — the same dot as the house tiles above, so the two read as one
   colour code. Its data-theme sits on the span, so the dot is coloured by that accommodation. */
.bl-row-object[b-gd4znc6uu2] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
}

.bl-object-dot[b-gd4znc6uu2] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--theme-color, #3d6b33);
}

.bl-period[b-gd4znc6uu2] {
    display: block;
    font-weight: 600;
    white-space: nowrap;
}

/* The dates the guests actually feel, one line under the closed range they belong to. */
.bl-impact[b-gd4znc6uu2] {
    display: block;
    margin-top: .15rem;
    font-size: .78rem;
    color: #8a8880;
}

/* Flex na divu uvnitř buňky, ne na buňce samotné — td s display: flex přestane být buňkou tabulky
   a podbarvení upravovaného řádku i čára pod řádkem pod tlačítky chyběly. */
.bl-row-actions[b-gd4znc6uu2] {
    display: flex;
    gap: .35rem;
    justify-content: flex-end;
}

/* Jednotka za počtem dní je jen pro kartu na telefonu; v tabulce ji nese záhlaví sloupce. */
.bl-days-unit[b-gd4znc6uu2] {
    display: none;
}

/* Edit and delete in a row. */
.bl-btn[b-gd4znc6uu2] {
    display: inline-flex;
    align-items: center;
    padding: .35rem .55rem;
    background: #fff;
    border: 1px solid #d3d1c7;
    border-radius: 8px;
    font: inherit;
    font-size: .9rem;
    color: #2c2c2a;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.bl-btn:hover:not(:disabled)[b-gd4znc6uu2] {
    border-color: var(--theme-strong, #3d6b33);
    background: var(--theme-tint, #f1f5ee);
}

.bl-btn:disabled[b-gd4znc6uu2] {
    opacity: .55;
    cursor: default;
}

.bl-btn.is-danger:hover:not(:disabled)[b-gd4znc6uu2] {
    border-color: #b1483c;
    background: #fbeceb;
    color: #8c2f26;
}

/* ── States ── */
.bl-state[b-gd4znc6uu2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem 1rem;
    color: #6b6a66;
    font-size: .9rem;
}

.bl-state.is-error[b-gd4znc6uu2] {
    color: #8c2f26;
}

.bl-empty[b-gd4znc6uu2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px dashed #d8d6cd;
    border-radius: 12px;
    background: #faf9f6;
    color: #6f6e6a;
    font-size: .88rem;
}

.bl-empty .bi[b-gd4znc6uu2] {
    color: #a3a29b;
}

/* ── Narrow screens ── */
@media (max-width: 640px) {
    /* Čtyři sloupce se na telefon nevejdou: termín na vlastním řádku, pod ním host · stav · VS,
       šipka vpravo u okraje. */
    .bl-conflicts[b-gd4znc6uu2],
    .bl-conflicts li[b-gd4znc6uu2] {
        display: block;
    }

    .bl-conflicts a[b-gd4znc6uu2] {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        column-gap: .6rem;
        padding-right: 1.6rem;
    }

    .bl-cf-stay[b-gd4znc6uu2] {
        flex-basis: 100%;
    }

    .bl-conflicts .bi-chevron-right[b-gd4znc6uu2] {
        position: absolute;
        top: 50%;
        right: .5rem;
        transform: translateY(-50%);
    }

    /* --- Seznam jako karty ---
       Tabulka se posouvala do strany, důvod i tlačítka ležely mimo obrazovku. Pod 640 px (zlom, který
       má i reservationEdit.css) přestane být tabulkou a každá blokace je karta jako u rezervací:

         ● Chalupa · 7 dní                     [✎] [🗑]
         12. 10. 2026 – 18. 10. 2026
         Malování pokojů v podkroví
         ───────────────────────────────────────────
         Poslední odjezd 11. 10. 2026, nejbližší příjezd 19. 10. 2026.

       Popisky sloupců na kartě nic neřeknou — co je co, je vidět z obsahu. */
    .bl-table-container[b-gd4znc6uu2] {
        overflow: visible;
    }

    .bl-table[b-gd4znc6uu2],
    .bl-table tbody[b-gd4znc6uu2] {
        display: block;
    }

    .bl-table thead[b-gd4znc6uu2] {
        display: none;
    }

    .bl-table tbody[b-gd4znc6uu2] {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .bl-table tr[b-gd4znc6uu2] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 6px;
        row-gap: 3px;
        padding: 12px 8px 12px 16px;
        background: #fff;
        border: 1px solid #e6e4dc;
        border-radius: 14px;
    }

    /* Upravovaná blokace — ta, která je teď ve formuláři nahoře. */
    .bl-table tr.is-editing[b-gd4znc6uu2] {
        background: #fdf8ec;
        border-color: #e0b45a;
        box-shadow: inset 0 0 0 1px #e0b45a;
    }

    .bl-table td[b-gd4znc6uu2],
    .bl-table td:first-child[b-gd4znc6uu2],
    .bl-table td:last-child[b-gd4znc6uu2] {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
    }

    .bl-table tr.is-editing td:first-child[b-gd4znc6uu2] {
        box-shadow: none;
    }

    /* Buňka s termínem se „rozpustí“, aby důvod mohl ležet mezi termínem a dopadem na hosty. */
    .bl-table td.bl-c-period[b-gd4znc6uu2] {
        display: contents;
    }

    .bl-c-acc[b-gd4znc6uu2] {
        order: 1;
        font-size: .8rem;
        font-weight: 600;
    }

    .bl-c-days[b-gd4znc6uu2] {
        order: 2;
        font-size: .8rem;
        color: #6f6e6a;
    }

    .bl-c-days[b-gd4znc6uu2]::before {
        content: "·";
        margin-right: 6px;
        color: #c9c7bf;
    }

    .bl-days-unit[b-gd4znc6uu2] {
        display: inline;
        margin-left: .25em;
    }

    /* Tlačítka v pravém horním rohu; záporný okraj, ať větší cíl pro prst nenatahuje řádek. */
    .bl-c-actions[b-gd4znc6uu2] {
        order: 3;
        margin: -6px 0 -4px auto;
    }

    .bl-row-actions[b-gd4znc6uu2] {
        gap: 6px;
    }

    .bl-row-actions .bl-btn[b-gd4znc6uu2] {
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
    }

    /* Na nejužších telefonech se rozsah zalomí za pomlčkou (pevné mezery v datech, viz FormatDate). */
    .bl-period[b-gd4znc6uu2] {
        order: 4;
        flex-basis: 100%;
        font-size: 1.05rem;
        line-height: 1.3;
        white-space: normal;
    }

    .bl-c-reason[b-gd4znc6uu2] {
        order: 5;
        flex-basis: 100%;
        margin-right: 8px;
        font-size: .9rem;
        line-height: 1.4;
        color: #3a3a38;
    }

    .bl-impact[b-gd4znc6uu2] {
        order: 6;
        flex-basis: 100%;
        margin: 6px 8px 0 0;
        padding-top: 8px;
        border-top: 1px solid #f1efe9;
        font-size: .76rem;
        line-height: 1.4;
    }

    .bl-table tr.is-editing .bl-impact[b-gd4znc6uu2] {
        border-top-color: rgba(0, 0, 0, .07);
    }
}
/* /Pages/Administration/Bookings/Components/ChannelCompletionForm.razor.rz.scp.css */
/* Formulář doplnění kanálové rezervace. Scoped: kreslí se uvnitř karty fronty úkolů
   (ChannelTaskQueue) nebo karty doplnění v editoru rezervace (ReservationCompletionCard), které
   si drží vlastní rámeček — tady jsou jen pole. */
.ccf-loading[b-uodl2m9pb2] {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

.ccf-head[b-uodl2m9pb2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: 20px;
}

.ccf-head-text[b-uodl2m9pb2] {
    flex: 1 1 auto;
    min-width: 0;
}

.ccf-head h3[b-uodl2m9pb2] {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
}

.ccf-head p[b-uodl2m9pb2] {
    margin: 6px 0 0;
    font-size: .82rem;
    color: #6f6e6a;
}

/* Kód už nesedí v odkazu, takže by dostal bootstrapí růžovou (--bs-code-color). Šedý jako
   zbytek řádku, stejně jako kód ve frontě úkolů (.ctq-meta code). */
.ccf-head code[b-uodl2m9pb2] {
    color: inherit;
    letter-spacing: .03em;
}

/* Cesta do extranetu kanálu. Stejný obrys v barvě objektu jako akce ostatních karet přehledu
   (.cft-action), jen o stupeň větší — je to první krok opisu, ne vedlejší odkaz. */
.ccf-open[b-uodl2m9pb2] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--theme-strong, var(--theme-color));
    border-radius: 8px;
    background: #fff;
    color: var(--theme-strong, var(--theme-color));
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ccf-open:hover[b-uodl2m9pb2] {
    background: var(--theme-tint, #f1f5ee);
    color: var(--theme-strong, var(--theme-color));
}

/* Pevné čtyři sloupce, ne auto-fit: obě mřížky (osobní údaje a peníze) pak stojí ve stejném
   rastru pod sebou. S auto-fit si počet sloupců volila každá zvlášť podle počtu polí, takže
   řada se třemi poli se rozešla s řadou nad sebou a formulář vypadal rozsypaně. */
.ccf-grid[b-uodl2m9pb2] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 16px;
}

.ccf-field[b-uodl2m9pb2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ccf-field > span[b-uodl2m9pb2] {
    font-size: .8rem;
    font-weight: 600;
    color: #4a4944;
}

.ccf-field.is-wide[b-uodl2m9pb2] {
    grid-column: 1 / -1;
}

/* Půl řádku: drží dvojici jmen nahoře pohromadě, aby počty hostů začínaly na vlastním řádku. */
.ccf-field.is-half[b-uodl2m9pb2] {
    grid-column: span 2;
}

/* Media queries až za pravidly, která přepisují — při stejné specificitě rozhoduje pořadí,
   a výš v souboru by span 2 nahoře vyhrál i na telefonu. */
@media (max-width: 1100px) {
    .ccf-grid[b-uodl2m9pb2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .ccf-grid[b-uodl2m9pb2] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* V jednom sloupci by span 2 vyrobil implicitní druhý sloupec a mřížka by přetekla. */
    .ccf-field.is-half[b-uodl2m9pb2] {
        grid-column: auto;
    }
}

/* Globální forms.css obaluje .input-container bílým boxem s vlastním rámečkem; tenhle
   formulář žádný nepoužívá, aby pole nesedělo v rámečku uvnitř rámečku karty. */
.ccf-field .form-control[b-uodl2m9pb2] {
    width: 100%;
}

/* Fokus ve značkových barvách objektu, stejně jako reservationEdit.css a seznamy —
   modrý prstenec je bootstrapí default a byl tu jediné místo, které nedrží barvu objektu. */
.ccf-field .form-control:focus[b-uodl2m9pb2] {
    border-color: var(--theme-strong, var(--theme-color));
    box-shadow: 0 0 0 2px var(--theme-tint, #eef6ec);
    outline: none;
}

/* Dopočtená částka: buňka mřížky, ne pole. Popisek sedí na stejné lince jako popisky polí
   vedle, hodnota na stejné lince jako jejich text — jen bez rámečku, protože se nevyplňuje. */
.ccf-readout strong[b-uodl2m9pb2] {
    display: flex;
    align-items: center;
    min-height: 38px;
    font-size: .95rem;
}

.ccf-hint[b-uodl2m9pb2] {
    font-size: .76rem;
    color: #8a6d1f;
}

.ccf-money[b-uodl2m9pb2] {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #efe6cd;
}

/* Komu fakturujeme: dvě tlačítka v jednom rámečku jako přepínač měny v kalkulaci (.pq-modes),
   jen s druhým řádkem, který říká, v čem faktura vyjde. Aktivní v barvě objektu jako tlačítko
   do extranetu nahoře. */
.ccf-modes[b-uodl2m9pb2] {
    display: flex;
    max-width: 560px;
    border: 1px solid #d3d1c7;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.ccf-mode[b-uodl2m9pb2] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 14px;
    border: none;
    background: #fff;
    color: #6f6e6a;
    text-align: left;
}

.ccf-mode + .ccf-mode[b-uodl2m9pb2] {
    border-left: 1px solid #e6e3d9;
}

.ccf-mode strong[b-uodl2m9pb2] {
    font-size: .88rem;
    font-weight: 600;
    color: #2c2c2a;
}

.ccf-mode small[b-uodl2m9pb2] {
    font-size: .76rem;
}

.ccf-mode:hover:not(.is-active):not(:disabled)[b-uodl2m9pb2] {
    background: #f7f6f2;
}

.ccf-mode.is-active[b-uodl2m9pb2] {
    background: var(--theme-color);
    color: #fff;
}

.ccf-mode.is-active strong[b-uodl2m9pb2] {
    color: #fff;
}

@media (max-width: 560px) {
    .ccf-modes[b-uodl2m9pb2] {
        flex-direction: column;
    }

    .ccf-mode + .ccf-mode[b-uodl2m9pb2] {
        border-left: none;
        border-top: 1px solid #e6e3d9;
    }
}

.ccf-outcome[b-uodl2m9pb2] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 16px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f2f4f7;
    font-size: .83rem;
    color: #444;
}

.ccf-outcome i[b-uodl2m9pb2] {
    color: #5a6b80;
}

.ccf-errors[b-uodl2m9pb2] {
    margin: 12px 0 0;
    padding: 10px 12px 10px 28px;
    border-radius: 10px;
    background: #f7e3e3;
    color: #7d2b2b;
    font-size: .84rem;
}

.ccf-actions[b-uodl2m9pb2] {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
/* /Pages/Administration/Bookings/Components/ChannelTaskQueue.razor.rz.scp.css */
/* Fronta ručních kroků nad seznamem nadcházejících rezervací. Scoped: mimo tuhle kartu
   se .ctq-* nikde nepoužívá a globální reservationEdit.css o ní nemá vědět. */
.ctq-card[b-xqhdtx8mli] {
    /* Stejný odstup shora, jaký má .rl-panel seznamu pod kartou (reservationList.css):
       .section-head má uvnitř .rl-toolbar margin-bottom: 0, takže mezeru pod nadpisem
       drží až to, co následuje — bez ní se karta lepí na podtitul. */
    margin: 2rem 0 22px;
    padding: 18px 20px;
    border: 1px solid #e6d9a8;
    border-left: 4px solid #d9c06a;
    border-radius: 14px;
    background: #fdfaf0;
}

.ctq-head[b-xqhdtx8mli] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.ctq-head i[b-xqhdtx8mli] {
    font-size: 1.3rem;
    color: #a3892c;
    line-height: 1.2;
}

.ctq-head h2[b-xqhdtx8mli] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.ctq-head p[b-xqhdtx8mli] {
    margin: 2px 0 0;
    font-size: .84rem;
    color: #6f6e6a;
}

/* Štítek „Úkol" vpravo, těsně před počtem. Stejné slovo a stejná role jako .dash-task-flag na
   přehledu: co ho nese, počítá si číslo u PŘEHLED v hlavičce. Obrys místo výplně, aby vedle
   plného počtu vedle sebe nestály dvě stejně křiklavé bubliny. */
.ctq-flag[b-xqhdtx8mli] {
    margin-left: auto;
    padding: 2px 9px;
    border: 1px solid #c9ad57;
    border-radius: 999px;
    color: #6b5713;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Počet vpravo: fronta se čte odshora, ale její délka je to první, co člověk chce vědět. */
.ctq-count[b-xqhdtx8mli] {
    padding: 2px 10px;
    border-radius: 999px;
    background: #d9c06a;
    color: #3d3410;
    font-size: .82rem;
    font-weight: 700;
}

.ctq-list[b-xqhdtx8mli] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ctq-item[b-xqhdtx8mli] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 8px 0;
    border-top: 1px solid #efe6cd;
}

.ctq-item:first-child[b-xqhdtx8mli] {
    border-top: none;
}

.ctq-badge[b-xqhdtx8mli] {
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}

.ctq-badge.is-money[b-xqhdtx8mli] {
    background: #e7f0e2;
    color: #3c5c30;
}

.ctq-badge.is-contact[b-xqhdtx8mli] {
    background: #e5edf5;
    color: #2f4d66;
}

.ctq-badge.is-checkin[b-xqhdtx8mli] {
    background: #f3e6ef;
    color: #6a3358;
}

.ctq-badge.is-voucher[b-xqhdtx8mli] {
    background: #f5ecdc;
    color: #6b4a1c;
}

.ctq-badge.is-arrival[b-xqhdtx8mli] {
    background: #e2f0ee;
    color: #24584f;
}

.ctq-link[b-xqhdtx8mli] {
    flex: 1 1 260px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.ctq-link:hover .ctq-guest[b-xqhdtx8mli] {
    text-decoration: underline;
}

.ctq-guest[b-xqhdtx8mli] {
    font-weight: 600;
    font-size: .93rem;
}

.ctq-meta[b-xqhdtx8mli] {
    font-size: .78rem;
    color: #6f6e6a;
}

.ctq-meta code[b-xqhdtx8mli] {
    font-size: .76rem;
    letter-spacing: .03em;
}

.ctq-when[b-xqhdtx8mli] {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: .8rem;
    color: #6f6e6a;
    white-space: nowrap;
}

/* Host, který přijíždí do dvou dnů (nebo už je tady), je jiná naléhavost než ten za měsíc. */
.ctq-when.is-urgent[b-xqhdtx8mli] {
    color: #a32d2d;
    font-weight: 600;
}

/* Tlačítko úkolu: práce se dělá tady, ne až na stránce rezervace, takže akce patří do řádku
   vedle termínu — ne do odkazu, který odnaviguje pryč. */
.ctq-action[b-xqhdtx8mli] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid #d9c06a;
    border-radius: 999px;
    background: #fff;
    color: #5c4d14;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.ctq-action:hover:not(:disabled)[b-xqhdtx8mli] {
    background: #f6efd7;
}

.ctq-action:disabled[b-xqhdtx8mli] {
    opacity: .55;
    cursor: default;
}

/* Výsledek poslední akce. Zůstává nad seznamem, protože seznam se pod ním právě změnil. */
.ctq-result[b-xqhdtx8mli] {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: .85rem;
}

.ctq-result.is-ok[b-xqhdtx8mli] {
    background: #e7f0e2;
    color: #33512a;
}

.ctq-result.is-error[b-xqhdtx8mli] {
    background: #f7e3e3;
    color: #7d2b2b;
}

/* ── Telefon ──────────────────────────────────────────────────────────────────────────
   Řádek počítače se na úzké šířce rozpadl do pěti řádků na hosta a štítek úkolu stál u každého
   znovu. Telefon proto dostane vlastní seznam (.ctq-groups, viz markup): úkol jednou jako štítek
   s počtem, pod ním hosté na dva řádky a celý řádek klikací. Na počítači zůstává .ctq-list. */

.ctq-title-short[b-xqhdtx8mli],
.ctq-groups[b-xqhdtx8mli] {
    display: none;
}

@media (max-width: 640px) {
    .ctq-card[b-xqhdtx8mli] {
        padding: 14px 14px 8px;
        border-radius: 12px;
    }

    .ctq-head[b-xqhdtx8mli] {
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;
    }

    .ctq-head h2[b-xqhdtx8mli] {
        font-size: 1rem;
    }

    /* Ikona a vysvětlující věta by vedle štítku a počtu zalomily nadpis do tří řádků a větu do
       šesti; kdo přehled otvírá denně, ví, co karta znamená. */
    .ctq-head > i[b-xqhdtx8mli],
    .ctq-head p[b-xqhdtx8mli],
    .ctq-title-long[b-xqhdtx8mli],
    .ctq-list[b-xqhdtx8mli] {
        display: none;
    }

    .ctq-title-short[b-xqhdtx8mli] {
        display: inline;
    }

    .ctq-groups[b-xqhdtx8mli] {
        display: block;
    }
}

.ctq-group[b-xqhdtx8mli] {
    margin-top: 8px;
}

/* Štítek druhu jako nadpis skupiny — barvy nese .ctq-badge.is-*. Dlouhý druh („Poslat
   informace k příjezdu chatem") se na 320 px nevejde na řádek, proto smí zalomit. */
.ctq-group-head[b-xqhdtx8mli] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 2px;
    padding: 3px 10px;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: normal;
}

.ctq-group-head b[b-xqhdtx8mli] {
    padding-left: 6px;
    border-left: 1px solid currentColor;
    opacity: .85;
}

.ctq-rows[b-xqhdtx8mli] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ctq-rows li + li[b-xqhdtx8mli] {
    border-top: 1px solid #efe6cd;
}

/* Odkaz i tlačítko formuláře vypadají stejně: řádek, ne tlačítko. */
.ctq-row[b-xqhdtx8mli] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
}

.ctq-row-main[b-xqhdtx8mli] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ctq-row-top[b-xqhdtx8mli] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

/* Jméno ustoupí času příjezdu, ne naopak: „už přijeli" je to, co se z řádku čte první. */
.ctq-row-top .ctq-guest[b-xqhdtx8mli] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ctq-row .ctq-when[b-xqhdtx8mli],
.ctq-row .ctq-meta[b-xqhdtx8mli] {
    font-size: .78rem;
}

.ctq-row .ctq-meta[b-xqhdtx8mli] {
    line-height: 1.35;
}

.ctq-go[b-xqhdtx8mli] {
    flex: none;
    color: #b39a45;
    font-size: .9rem;
}

/* Doplnění rezervace neodchází pryč, otevře formulář tady — proto tužka místo šipky. */
.ctq-go.is-edit[b-xqhdtx8mli] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e5edf5;
    color: #2f4d66;
}
/* /Pages/Administration/Bookings/Components/ReservationCompletionCard.razor.rz.scp.css */
/* Karta doplnění kanálové rezervace v editoru. Rám (.ov-card) a patička (.rt-foot) jsou globální
   z reservationEdit.css, stejné jako u rozhodovací karty; tady jen pruh s vysvětlením a odsazení
   formuláře. Jantarový pruh stejnými barvami jako fronta úkolů na přehledu (.ctq-card) — je to
   tatáž práce, jen otevřená odjinud. */
.rcc-intro[b-m3ukgkl7dh] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 28px;
    border-bottom: 1px solid #efe6cd;
    background: #fdfaf0;
}

.rcc-intro i[b-m3ukgkl7dh] {
    font-size: 1.3rem;
    line-height: 1.2;
    color: #a3892c;
}

.rcc-intro h1[b-m3ukgkl7dh] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.rcc-intro p[b-m3ukgkl7dh] {
    margin: 4px 0 0;
    font-size: .86rem;
    color: #6f6e6a;
}

.rcc-body[b-m3ukgkl7dh] {
    padding: 22px 28px 20px;
    border-bottom: 1px solid #efeee9;
}

@media (max-width: 560px) {
    .rcc-intro[b-m3ukgkl7dh],
    .rcc-body[b-m3ukgkl7dh] {
        padding-left: 16px;
        padding-right: 16px;
    }
}
/* /Pages/Administration/Bookings/Components/ReservationConflictAlert.razor.rz.scp.css */
/* The date conflicts under the reservation header. Same frame as the guest warning next to it
   (ReservationGuestAlert.razor.css) and for the same reason — it has to look different from the
   brand-tinted .res-card sections — with the same pair of colours: red for an overbooking, amber for
   a stay in closed days. */

.rca[b-7ydaj8haxs] {
    margin-bottom: 1.25rem;
    padding: 14px 18px 16px;
    border: 1px solid transparent;
    border-left-width: 5px;
    border-radius: 14px;
}

.rca.is-problem[b-7ydaj8haxs] {
    background: #fceaea;
    border-color: #eecccc;
    border-left-color: #a32d2d;
}

.rca.is-note[b-7ydaj8haxs] {
    background: #fdf6e6;
    border-color: #f0e0bb;
    border-left-color: #c9962b;
}

.rca-head[b-7ydaj8haxs] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
}

.rca-head > .bi[b-7ydaj8haxs] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 1.05rem;
    color: #fff;
}

.rca.is-problem .rca-head > .bi[b-7ydaj8haxs] {
    background: #a32d2d;
}

.rca.is-note .rca-head > .bi[b-7ydaj8haxs] {
    background: #c9962b;
}

.rca-title[b-7ydaj8haxs] {
    flex: 1 1 220px;
    min-width: 0;
}

.rca-title h2[b-7ydaj8haxs] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.rca.is-problem .rca-title h2[b-7ydaj8haxs] {
    color: #a32d2d;
}

.rca.is-note .rca-title h2[b-7ydaj8haxs] {
    color: #8a6416;
}

.rca-title p[b-7ydaj8haxs] {
    margin: 2px 0 0;
    font-size: .85rem;
    line-height: 1.5;
    color: #5f5e5a;
}

.rca-link[b-7ydaj8haxs] {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    white-space: nowrap;
    color: #5f5e5a;
    text-decoration: none;
}

.rca-link:hover[b-7ydaj8haxs] {
    color: #2c2c2a;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rca-items[b-7ydaj8haxs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.rca-items li[b-7ydaj8haxs] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .72);
    border-radius: 10px;
    font-size: .88rem;
    color: #2c2c2a;
}

.rca-items a[b-7ydaj8haxs] {
    font-weight: 600;
    color: #2c2c2a;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rca-text[b-7ydaj8haxs] {
    color: #4a4a48;
}

.rca-text.is-missing[b-7ydaj8haxs] {
    font-style: italic;
    color: #8a8a8a;
}
/* /Pages/Administration/Bookings/Components/ReservationEditGuestHistorySection.razor.rz.scp.css */
/* The guest history card's own bits. The status box (.ci-status) and the action bar (.ci-actions)
   are the Check-in tab's, from reservationEdit.css; the stay rows are styled by GuestStayList,
   which the profile page shares — so the two surfaces cannot drift apart. */

/* Trvalá poznámka o hostovi: proužek uvnitř stavového boxu, jantarový jako poznámka v hlavičce. */
.gh-note[b-1j8ngbsf2e] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    padding: 8px 12px;
    border: 1px solid #ecd9b4;
    border-radius: 9px;
    background: #fff;
    font-size: .82rem;
    line-height: 1.45;
    color: #5c4210;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.gh-note .bi[b-1j8ngbsf2e] {
    flex: none;
    margin-top: 2px;
    color: #8a5a17;
}

.gh-stays[b-1j8ngbsf2e] {
    margin-top: 16px;
}
/* /Pages/Administration/Bookings/Components/ReservationEditNotesSection.razor.rz.scp.css */
/* How the stay went. Sits above the internal note in the same card, because the note is the reason
   behind whatever is picked here. The box around it (.rv-rating) is in reservationEdit.css. */

.rating-choices[b-53ef63n3cl] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.rating-choice[b-53ef63n3cl] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    font-size: .9rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: .45rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.rating-choice:hover[b-53ef63n3cl] {
    border-color: #b8b8b8;
}

.rating-choice.is-active[b-53ef63n3cl] {
    font-weight: 600;
    box-shadow: inset 0 0 0 1px currentColor;
}

.rating-choice.is-none.is-active[b-53ef63n3cl] {
    color: #555;
    background: #f2f2f2;
}

.rating-choice.is-good.is-active[b-53ef63n3cl] {
    color: #3d6b38;
    background: #eaf3e8;
    border-color: #b9d3b4;
}

.rating-choice.is-problem.is-active[b-53ef63n3cl] {
    color: #a13b2d;
    background: #fbe9e7;
    border-color: #edc4bd;
}

/* Telefon: tři volby pod sebou přes celou šířku, ať se netlačí do dvou nerovných řádků. */
@media (max-width: 640px) {
    .rating-choices[b-53ef63n3cl] {
        display: grid;
        grid-template-columns: 1fr;
    }

    .rating-choice[b-53ef63n3cl] {
        justify-content: center;
    }
}
/* /Pages/Administration/Bookings/Components/ReservationGuestAlert.razor.rz.scp.css */
/* The guest warning under the reservation header: one line that links to the guest's profile.
   Deliberately NOT tinted with the accommodation's brand colour like the .res-card sections around
   it: it has to look different from everything else on the page. Red for a stay that went wrong,
   amber for a standing note — the same pair the decision card uses for a blocking conflict and a
   pending duplicate. */

.rga[b-ex8qlbbdud] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.25rem;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    text-decoration: none;
    transition: filter .15s;
}

.rga:hover[b-ex8qlbbdud] {
    filter: brightness(.97);
}

.rga.is-problem[b-ex8qlbbdud] {
    background: #fceaea;
    border-color: #eecccc;
    color: #a32d2d;
}

.rga.is-note[b-ex8qlbbdud] {
    background: #fdf6e6;
    border-color: #f0e0bb;
    color: #8a6416;
}

.rga-icon[b-ex8qlbbdud] {
    flex-shrink: 0;
    font-size: 1.25rem;
}

.rga-text[b-ex8qlbbdud] {
    flex: 1;
    min-width: 0;
}

.rga-text strong[b-ex8qlbbdud] {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.35;
}

.rga-text small[b-ex8qlbbdud] {
    display: block;
    font-size: .8rem;
    line-height: 1.4;
}

.rga.is-problem .rga-text small[b-ex8qlbbdud] {
    color: #6b3a3a;
}

.rga.is-note .rga-text small[b-ex8qlbbdud] {
    color: #6d5a33;
}

.rga-go[b-ex8qlbbdud] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
}

.rga:hover .rga-go[b-ex8qlbbdud] {
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* /Pages/Administration/Bookings/GuestBook.razor.rz.scp.css */
/* Guest book — the same "minimal canvas" as the export hub and the price-list editors: white
   cards on the plain page, brand accent only through the [data-theme] tokens of variables.css.
   ::deep is needed wherever the rule has to reach HxGrid's own markup, which carries the
   component's scope attribute of the grid, not of this page. */

/* Every page in this design language states its base colour on the page root and lets it
   inherit — including into HxGrid's markup, which inherits regardless of the CSS scope
   attribute. */
.gb-page[b-odcuq04mbo] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    /* Boční odsazení nese stránka sama — .content žádné nemá. */
    padding: 0 1rem 3rem;
    color: #2c2c2a;
}

/* ── Register picker ──────────────────────────────────────────────────────────────── */

.gb-registers[b-odcuq04mbo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: .75rem;
}

.gb-register[b-odcuq04mbo] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .9rem 1.1rem;
    text-align: left;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: .6rem;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.gb-register:hover[b-odcuq04mbo] {
    border-color: var(--theme-color, #999);
}

.gb-register.is-active[b-odcuq04mbo] {
    border-color: var(--theme-color, #444);
    box-shadow: inset 0 0 0 1px var(--theme-color, #444);
    background: var(--theme-tint, #fafafa);
}

.gb-register-name[b-odcuq04mbo] {
    font-weight: 600;
    font-size: 1.02rem;
}

.gb-register-scope[b-odcuq04mbo] {
    font-size: .86rem;
    color: #555;
}

.gb-register-legal[b-odcuq04mbo] {
    font-size: .78rem;
    color: #888;
}

/* ── Filters ──────────────────────────────────────────────────────────────────────── */

.gb-filters[b-odcuq04mbo] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: .6rem;
}

.gb-toggles[b-odcuq04mbo] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

/* Havit's Bootstrap build accents form controls in its own cyan — #009de0 for a checked
   switch, #80cef0 for the focus ring — which was the only blue left on the page. The
   controls are rendered by the Hx* components, so their markup carries Havit's scope
   attribute and not this page's; ::deep is what reaches it. */
.gb-page[b-odcuq04mbo]  .form-control:focus,
.gb-page[b-odcuq04mbo]  .form-select:focus {
    border-color: var(--theme-strong, var(--theme-color));
    box-shadow: 0 0 0 2px var(--theme-tint, #eef6ec);
    outline: none;
}

.gb-page[b-odcuq04mbo]  .form-check-input:focus {
    border-color: var(--theme-strong, var(--theme-color));
    box-shadow: 0 0 0 2px var(--theme-tint, #eef6ec);
    outline: none;
}

.gb-page[b-odcuq04mbo]  .form-check-input:checked {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
}

/* The switch knob is a background image Bootstrap swaps through --bs-form-switch-bg, and
   its focus variant is blue too. Restore the neutral knob on focus — and, because this
   bundle is linked after Bootstrap's, restate the white one for a switch that is both
   checked and focused, which the rule above would otherwise darken. */
.gb-page[b-odcuq04mbo]  .form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}

.gb-page[b-odcuq04mbo]  .form-switch .form-check-input:checked:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* ── The book ─────────────────────────────────────────────────────────────────────── */

.gb-book[b-odcuq04mbo] {
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: .6rem;
    overflow: hidden;
}

[b-odcuq04mbo] .gb-table-container {
    overflow-x: auto;
}

[b-odcuq04mbo] .gb-table {
    margin-bottom: 0;
    font-size: .9rem;
}

/* Headers wrap. "Doklad totožnosti" or "Cizinecká policie" held on one line reserves more width
   than the values under them ever need, and with ten columns of the domovní kniha that alone is
   what pushed the table into a horizontal scroll. */
[b-odcuq04mbo] .gb-table th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #666;
    white-space: normal;
}

[b-odcuq04mbo] .gb-num {
    font-variant-numeric: tabular-nums;
    color: #888;
    white-space: nowrap;
}

[b-odcuq04mbo] .gb-muted {
    color: #666;
    white-space: nowrap;
}

[b-odcuq04mbo] .gb-address {
    min-width: 14rem;
}

/* Icon-only cell: let the column shrink to the pill. */
[b-odcuq04mbo] .gb-police {
    width: 1%;
    text-align: center;
    white-space: nowrap;
}

.gb-name[b-odcuq04mbo],
[b-odcuq04mbo] .gb-name {
    display: block;
    font-weight: 500;
}

.gb-sub[b-odcuq04mbo],
[b-odcuq04mbo] .gb-sub {
    display: block;
    font-size: .78rem;
    color: #888;
}

/* A corrected entry is struck through rather than hidden — the same thing a pen does to a paper
   register, and the reason the row is still in the book at all. */
[b-odcuq04mbo] tr.gb-corrected {
    color: #999;
    text-decoration: line-through;
    text-decoration-color: #bbb;
}

[b-odcuq04mbo] tr.gb-corrected .gb-pill,
[b-odcuq04mbo] tr.gb-corrected .gb-tag {
    text-decoration: none;
}

.gb-tag[b-odcuq04mbo] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.gb-dot[b-odcuq04mbo] {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--theme-color, #999);
}

.gb-pill[b-odcuq04mbo] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .5rem;
    font-size: .78rem;
    border-radius: 1rem;
    white-space: nowrap;
}

.gb-pill.is-icon[b-odcuq04mbo] {
    padding: .25rem;
    border-radius: 50%;
}

.gb-pill.is-icon i[b-odcuq04mbo] {
    font-size: .95rem;
    line-height: 1;
}

.gb-pill.is-ok[b-odcuq04mbo] {
    background: #e7f4ea;
    color: #1e6b33;
}

.gb-pill.is-warning[b-odcuq04mbo] {
    background: #fff4d6;
    color: #7a5a00;
}

.gb-empty[b-odcuq04mbo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 3rem 1rem;
    color: #888;
}

.gb-empty i[b-odcuq04mbo] {
    font-size: 1.8rem;
}

.gb-empty p[b-odcuq04mbo] {
    margin: 0;
}

/* ── Legal footer ─────────────────────────────────────────────────────────────────── */

.gb-legal[b-odcuq04mbo] {
    padding: .9rem 1.1rem;
    border-top: 1px solid #eee;
    background: #fafafa;
}

.gb-legal p[b-odcuq04mbo] {
    margin: 0;
    font-size: .82rem;
    color: #666;
}

.gb-legal-basis[b-odcuq04mbo] {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.gb-legal-retention[b-odcuq04mbo] {
    margin-top: .25rem !important;
    color: #888 !important;
}

/* ── Telefon: zápisy jako karty ───────────────────────────────────────────────────
   Tabulka se sedmi až osmi sloupci se na telefonu posouvala do strany a nad ní ležel výběr
   knihy, šest polí filtru a pět dlaždic souhrnu — k prvnímu zápisu se odjíždělo přes celou
   obrazovku. Pod 700 px proto (stejně jako seznam rezervací, viz .rl-cards) tatáž mřížka
   přestane být tabulkou: každý zápis je karta, kterou si buňky poskládají podle svých tříd
   gb-c-*. Stránkování, data i kontextové menu jsou pořád HxGrid, mění se jen vzhled.

   Karta: ● objekt · termín ⋮ / jméno * narození / pole s popisky (adresa a doklad, u domovní
   knihy občanství, doklad a nahlášení policii) / poř. č. · datum zápisu.

   Na desktopu z toho není vidět nic: popisky polí, objekt u termínu a štítek Opraveno jsou
   schované, obal polí filtru je display: contents a text u ikony policie čte jen čtečka. */

/* Jen nad 700 px: na telefonu o zobrazení obalu rozhoduje spodní panel (rl-sheet-panel)
   v reservationList.css a stejně silné pravidlo odsud by s ním soupeřilo pořadím balíků. */
@media (min-width: 701px) {
    .gb-filter-fields[b-odcuq04mbo] {
        display: contents;
    }
}

.gb-label[b-odcuq04mbo],
.gb-stay-house[b-odcuq04mbo],
.gb-corrected-pill[b-odcuq04mbo] {
    display: none;
}

/* Na desktopu jako .visually-hidden — barva ikony stačí, text je pro čtečku a pro kartu. */
.gb-pill-text[b-odcuq04mbo] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 700px) {

    .gb-page[b-odcuq04mbo] {
        gap: 1rem;
    }

    /* Výběr knihy: obě dlaždice vedle sebe. Zákonný odkaz nese i patička knihy. */
    .gb-registers[b-odcuq04mbo] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .gb-register[b-odcuq04mbo] {
        gap: 0;
        padding: .55rem .75rem;
        border-radius: 12px;
    }

    .gb-register-name[b-odcuq04mbo] {
        font-size: .92rem;
    }

    .gb-register-scope[b-odcuq04mbo] {
        font-size: .74rem;
    }

    .gb-register-legal[b-odcuq04mbo] {
        display: none;
    }

    /* Filtry: tlačítko Filtry a stažení v jedné řadě, pole ve spodním panelu. Tlačítko je
       sdílený ListFilterToggle; jeho otevřený vzhled stránka nastavuje sama. */
    .gb-filters[b-odcuq04mbo] {
        align-items: center;
        gap: 8px;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
    }

    .gb-filters[b-odcuq04mbo]  .rl-phone-tools {
        margin: 0;
    }

    .gb-filters.is-filters-open[b-odcuq04mbo]  .rl-filter-toggle {
        border-color: var(--theme-strong, var(--theme-color));
        background: var(--theme-tint, #eef6ec);
        color: var(--theme-strong, var(--theme-color));
    }

    .gb-filters.is-filters-open[b-odcuq04mbo]  .rl-filter-caret {
        transform: rotate(180deg);
    }

    /* Pole jsou ve spodním panelu (rl-sheet-panel; schování, vysunutí, hlavička i pata jsou
       v sekci „Telefon: filtry ve spodním panelu“ v reservationList.css). Tady jen rozložení:
       objekt a hledání přes celou šířku, rok a měsíc vedle sebe. */
    .gb-filter-fields[b-odcuq04mbo]  .gb-filter-wide,
    .gb-toggles[b-odcuq04mbo] {
        grid-column: 1 / -1;
    }

    .gb-filter-fields[b-odcuq04mbo]  .form-label {
        margin-bottom: 4px;
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #6f6e6a;
    }

    /* 16 px: s menším písmem iOS Safari při fokusu pole přiblíží celou stránku. */
    .gb-filter-fields[b-odcuq04mbo]  .form-control,
    .gb-filter-fields[b-odcuq04mbo]  .form-select {
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 1rem;
    }

    .gb-toggles[b-odcuq04mbo] {
        gap: .35rem;
    }

    /* Karty mají každá svůj rámeček — bílý box knihy by je orámoval podruhé. Patička dostane
       vlastní; overflow: visible, aby kontextové menu neuřízl okraj. */
    .gb-book[b-odcuq04mbo] {
        overflow: visible;
        background: none;
        border: 0;
        border-radius: 0;
    }

    .gb-legal[b-odcuq04mbo] {
        margin-top: 14px;
        border: 1px solid #eceae3;
        border-radius: 12px;
    }

    .gb-page[b-odcuq04mbo]  .gb-table-container {
        overflow: visible;
    }

    .gb-page[b-odcuq04mbo]  .pagination {
        justify-content: center;
        margin: 14px 0 0;
    }

    /* Kniha má pevné pořadí (zákon), řadit není co — hlavička se nepotřebuje. */
    .gb-page[b-odcuq04mbo]  .gb-table,
    .gb-page[b-odcuq04mbo]  .gb-table > tbody {
        display: block;
    }

    .gb-page[b-odcuq04mbo]  .gb-table > thead {
        display: none;
    }

    .gb-page[b-odcuq04mbo]  .gb-table > tbody {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .gb-page[b-odcuq04mbo]  .gb-table > tbody > tr {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px 12px;
        padding: 12px 6px 12px 16px;
        background: #fff;
        border: 1px solid #e6e4dc;
        border-radius: 14px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    }

    /* :where — buňku pak karta přestaví obyčejným .gb-c-* a pořád to přebije Bootstrap. */
    .gb-page[b-odcuq04mbo]  .gb-table :where(td) {
        display: block;
        width: auto;
        min-width: 0;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        text-align: left;
        white-space: normal;
    }

    /* Prázdná kniha a zástupné řádky při načítání mají jinou stavbu než zápis. */
    .gb-page[b-odcuq04mbo]  .gb-table > tbody > tr > td:only-child {
        flex-basis: 100%;
    }

    .gb-page[b-odcuq04mbo]  .hx-context-menu-btn {
        width: 36px;
        height: 36px;
        font-size: 1.05rem;
        color: #6f6e6a;
    }

    /* Opravený zápis je pořád přeškrtnutý (pravidlo výš), karta navíc šedne a nese štítek. */
    .gb-page[b-odcuq04mbo]  .gb-table > tbody > tr.gb-corrected {
        background: #faf9f6;
    }

    .gb-corrected-pill[b-odcuq04mbo] {
        display: inline-flex;
        align-self: center;
    }

    .gb-pill.is-muted[b-odcuq04mbo] {
        background: #efeeea;
        color: #6f6e6a;
    }

    /* Nahoře: ● objekt · termín, vpravo kontextové menu. */
    .gb-page[b-odcuq04mbo]  .gb-c-stay {
        order: 1;
        flex: 1;
        align-self: center;
        font-size: .82rem;
    }

    .gb-tag[b-odcuq04mbo] {
        flex-wrap: wrap;
        row-gap: 0;
        white-space: normal;
    }

    .gb-stay-house[b-odcuq04mbo] {
        display: inline;
        order: 1;
        font-weight: 600;
    }

    .gb-stay-dates[b-odcuq04mbo] {
        order: 2;
    }

    .gb-stay-dates[b-odcuq04mbo]::before {
        content: "·";
        margin-right: .4rem;
        color: #c9c7bf;
    }

    .gb-page[b-odcuq04mbo]  .gb-table > tbody > tr > td.hx-context-menu-grid-column {
        order: 2;
        margin: -8px 0 -8px auto;
    }

    /* Host: velké jméno, za ním datum narození s hvězdičkou. */
    .gb-page[b-odcuq04mbo]  .gb-c-guest {
        order: 3;
        flex-basis: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 8px;
        margin-top: -4px;
    }

    .gb-page[b-odcuq04mbo]  .gb-c-guest .gb-name {
        font-size: 1.05rem;
        font-weight: 600;
    }

    .gb-born[b-odcuq04mbo] {
        font-size: .8rem;
    }

    .gb-born[b-odcuq04mbo]::before {
        content: "* ";
    }

    /* Pole s popiskem nad hodnotou. */
    .gb-label[b-odcuq04mbo] {
        display: block;
        margin-bottom: 1px;
        font-size: .66rem;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #8a8983;
    }

    .gb-page[b-odcuq04mbo]  :is(.gb-c-addr, .gb-c-nat, .gb-c-doc) {
        font-size: .88rem;
        line-height: 1.35;
    }

    .gb-page[b-odcuq04mbo]  .gb-c-addr {
        order: 4;
        flex-basis: 100%;
        padding-right: 10px;
    }

    .gb-page[b-odcuq04mbo]  .gb-c-nat {
        order: 4;
        flex: 1 1 40%;
    }

    .gb-page[b-odcuq04mbo]  .gb-c-doc {
        order: 5;
        flex: 1 1 100%;
    }

    /* Vedle občanství je doklad v půlce šířky. */
    .gb-page[b-odcuq04mbo]  .gb-c-nat + .gb-c-doc {
        flex-basis: 40%;
    }

    /* Číslo a druh dokladu na jednom řádku (203456789 · Občanský průkaz) — jen když je na to
       místo, tedy v evidenční knize; vedle občanství zůstává druh pod číslem. */
    .gb-page[b-odcuq04mbo]  .gb-c-addr ~ .gb-c-doc :is(.gb-name, .gb-doc-type) {
        display: inline;
    }

    .gb-page[b-odcuq04mbo]  .gb-c-addr ~ .gb-c-doc .gb-name:not(:empty) + .gb-doc-type::before {
        content: "·";
        margin: 0 6px 0 4px;
        color: #c9c7bf;
    }

    /* Nahlášení policii: ikona s textem, na dotyku není tooltip. */
    .gb-page[b-odcuq04mbo]  .gb-c-police {
        order: 6;
        flex-basis: 100%;
    }

    .gb-pill-text[b-odcuq04mbo] {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
    }

    .gb-pill.is-icon[b-odcuq04mbo] {
        padding: .2rem .6rem .2rem .45rem;
        border-radius: 999px;
    }

    .gb-pill.is-icon i[b-odcuq04mbo] {
        font-size: .85rem;
    }

    /* Dole drobně: Poř. č. 1412 · Datum zápisu 04.09.2026. Objekt pod datem zápisu už je nahoře. */
    .gb-page[b-odcuq04mbo]  :is(.gb-c-num, .gb-c-recorded) {
        display: flex;
        align-items: baseline;
        gap: 5px;
        font-size: .74rem;
        color: #8a8983;
    }

    .gb-page[b-odcuq04mbo]  .gb-c-num {
        order: 8;
    }

    .gb-page[b-odcuq04mbo]  .gb-c-recorded {
        order: 9;
    }

    .gb-page[b-odcuq04mbo]  .gb-c-recorded::before {
        content: "·";
        color: #c9c7bf;
    }

    .gb-page[b-odcuq04mbo]  :is(.gb-c-num, .gb-c-recorded) .gb-label {
        display: inline;
        margin: 0;
        font-size: inherit;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        color: inherit;
    }

    .gb-page[b-odcuq04mbo]  .gb-c-recorded .gb-sub {
        display: none;
    }
}
/* /Pages/Administration/Bookings/ReservationExport.razor.rz.scp.css */
/* Export hub of the administration.

   Same "minimal canvas" language as the accommodation-settings editor and the price-list
   administration: white cards with hairline borders on the plain page, the brand accent
   only through the [data-theme] tokens (--theme-color / -strong / -tint) that the page
   root activates. The one coloured surface is the hero, which fades the brand tint out
   into white — the same gradient the public pages use for their hero card.

   Everything on this page is plain HTML, so the scoped-CSS attribute lands on every
   element and no ::deep is needed. */

.ex-page[b-617htt01fe] {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
    text-align: left;
    color: #2c2c2a;
}

/* ── Hero ───────────────────────────────────────────────────────────────────── */
.ex-hero[b-617htt01fe] {
    margin: .5rem 0 1.5rem;
    padding: 26px 28px 28px;
    border: 1px solid #e6e4dc;
    border-radius: 20px;
    background: linear-gradient(155deg, var(--theme-tint, #f1f5ee) 0%, #fff 65%);
}

.ex-eyebrow[b-617htt01fe] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .85rem;
    border-radius: 999px;
    background: var(--theme-tint, #f1f5ee);
    color: var(--theme-strong, var(--theme-color));
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ex-hero h1[b-617htt01fe] {
    margin: .85rem 0 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    color: #2f2f2f;
}

.ex-hero p[b-617htt01fe] {
    max-width: 46rem;
    margin: .6rem 0 0;
    font-size: .95rem;
    line-height: 1.6;
    color: #5f5e5a;
}

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.ex-card[b-617htt01fe] {
    background: #fff;
    border: 1px solid #e3e3e0;
    border-radius: 16px;
    padding: 20px 22px 22px;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.ex-card-head[b-617htt01fe] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid #f0efeb;
}

.ex-card-head > .bi[b-617htt01fe] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--theme-tint, #f1f5ee);
    color: var(--theme-strong, var(--theme-color));
    font-size: 1.1rem;
}

.ex-card-title[b-617htt01fe] {
    flex: 1 1 auto;
    min-width: 0;
}

.ex-card-title h2[b-617htt01fe] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.4;
}

/* File-format badge — tells you what you are about to download at a glance. */
.ex-format[b-617htt01fe] {
    flex-shrink: 0;
    padding: 4px 10px;
    border: 1px solid #e6e4dc;
    border-radius: 999px;
    background: #faf9f6;
    color: #6f6e6a;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
}

/* ── Year picker ────────────────────────────────────────────────────────────── */
.ex-picker[b-617htt01fe] {
    padding: 16px 18px;
    border: 1px solid #eceae3;
    border-radius: 12px;
    background: #fdfdfb;
}

.ex-picker-label[b-617htt01fe] {
    display: block;
    margin-bottom: 10px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6f6e6a;
}

/* Rozbalovací seznam ve tvaru pilulky, stejný jako výběr roku ve statistikách (.st-select).
   Osmnáct roků jako tlačítka se zalamovalo do několika řádků. Vybraný rok je vždy jeden, takže
   pole má rovnou rámeček v barvě objektu. */
.ex-select[b-617htt01fe] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.ex-select select[b-617htt01fe] {
    appearance: none;
    min-width: 11.5rem;
    padding: .45rem 2.3rem;
    border: 1px solid var(--theme-color, #7a9a6e);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #2c2c2a;
    cursor: pointer;
    transition: background-color .15s;
}

.ex-select select:hover[b-617htt01fe] {
    background: var(--theme-tint, #f1f5ee);
}

.ex-select select:focus-visible[b-617htt01fe] {
    outline: 2px solid var(--theme-strong, var(--theme-color));
    outline-offset: 2px;
}

.ex-select select option[b-617htt01fe] {
    font-weight: 400;
}

.ex-select-icon[b-617htt01fe],
.ex-select-chevron[b-617htt01fe] {
    position: absolute;
    pointer-events: none;
    color: var(--theme-strong, var(--theme-color));
}

.ex-select-icon[b-617htt01fe] {
    left: .9rem;
    font-size: .85rem;
}

.ex-select-chevron[b-617htt01fe] {
    right: .9rem;
    font-size: .75rem;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.ex-btn[b-617htt01fe] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 22px;
    border: 1px solid #d3d1c7;
    border-radius: 10px;
    background: #fff;
    color: #2c2c2a;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .15s, border-color .15s, color .15s;
}

.ex-btn .bi[b-617htt01fe] {
    font-size: .95rem;
}

/* Stažení ročních exportů — pilulka hned za výběrem roku, stejný tvar i výška jako .ex-select. */
.ex-btn.is-download[b-617htt01fe] {
    min-height: 38px;
    padding: .45rem 1.3rem .45rem 1rem;
    border-color: transparent;
    border-radius: 999px;
    background: var(--theme-color);
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
}

.ex-btn.is-download:hover:not(:disabled)[b-617htt01fe] {
    filter: brightness(.9);
}

.ex-btn.is-ghost:hover:not(:disabled)[b-617htt01fe] {
    border-color: var(--theme-strong, #a3a29b);
    color: var(--theme-strong, #2c2c2a);
}

.ex-btn:disabled[b-617htt01fe] {
    opacity: .6;
    cursor: default;
}

.ex-btn:focus-visible[b-617htt01fe] {
    outline: 2px solid var(--theme-strong, var(--theme-color));
    outline-offset: 2px;
}

/* ── Year + download row ────────────────────────────────────────────────────── */
.ex-picker-row[b-617htt01fe] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ex-result[b-617htt01fe] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 14px 0 0;
    padding: 7px 13px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: .83rem;
}

.ex-result.is-error[b-617htt01fe] {
    background: #fceaea;
    border-color: #eecccc;
    color: #a32d2d;
}

/* ── ICS feeds ──────────────────────────────────────────────────────────────── */
.ex-feeds[b-617htt01fe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 14px;
}

/* The accent bar takes the accommodation's own brand colour through the data-theme
   the article carries, so the two feeds are told apart without reading the name. */
.ex-feed[b-617htt01fe] {
    position: relative;
    padding: 16px 18px 18px 20px;
    border: 1px solid #eceae3;
    border-radius: 12px;
    background: #fdfdfb;
    overflow: hidden;
}

.ex-feed[b-617htt01fe]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--theme-color, #c9c7bf);
}

.ex-feed-name[b-617htt01fe] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    font-size: .95rem;
    font-weight: 600;
}

.ex-dot[b-617htt01fe] {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--theme-color, #a3a29b);
}

.ex-feed-url[b-617htt01fe] {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.ex-feed-url input[b-617htt01fe] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 11px;
    border: 1px solid #e0ddd3;
    border-radius: 8px;
    background: #fff;
    color: #6f6e6a;
    font-family: inherit;
    font-size: .8rem;
    text-overflow: ellipsis;
    outline: none;
}

.ex-feed-url input:focus[b-617htt01fe] {
    border-color: var(--theme-strong, var(--theme-color));
    box-shadow: 0 0 0 2px var(--theme-tint, #eef6ec);
}

.ex-icon-btn[b-617htt01fe] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    padding: 0;
    border: 1px solid #e0ddd3;
    border-radius: 8px;
    background: #fff;
    color: #6f6e6a;
    font-size: .9rem;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.ex-icon-btn:hover[b-617htt01fe] {
    border-color: var(--theme-strong, #a3a29b);
    color: var(--theme-strong, #2c2c2a);
}

.ex-icon-btn:focus-visible[b-617htt01fe] {
    outline: 2px solid var(--theme-strong, var(--theme-color));
    outline-offset: 2px;
}

.ex-feed-actions[b-617htt01fe] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.ex-feed-actions .ex-btn[b-617htt01fe] {
    padding: 8px 16px;
    font-size: .85rem;
}

.ex-copied[b-617htt01fe] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    color: var(--theme-strong, #3d6b33);
}

@media (max-width: 640px) {

    .ex-hero[b-617htt01fe] {
        padding: 20px;
    }

    .ex-hero h1[b-617htt01fe] {
        font-size: 1.45rem;
    }

    .ex-card[b-617htt01fe] {
        padding: 16px 16px 18px;
    }

    .ex-card-head[b-617htt01fe] {
        flex-wrap: wrap;
    }

    /* Na telefonu rok i tlačítko pod sebou přes celou šířku — větší plocha na klepnutí. */
    .ex-picker-row > *[b-617htt01fe] {
        width: 100%;
    }

    .ex-btn.is-download[b-617htt01fe] {
        justify-content: center;
        min-height: 44px;
    }

    .ex-select[b-617htt01fe] {
        display: flex;
    }

    .ex-select select[b-617htt01fe] {
        width: 100%;
        min-height: 44px;
    }
}
/* /Pages/Administration/Crm/CallerLookup.razor.rz.scp.css */
/* Who is calling, in the guest profile page's language: white cards (.res-card.is-plain), the
   status box (.ci-status), the action bar (.ci-actions), folding cards (.res-fold) and the steps
   (.ci-steps) all come from reservationEdit.css, which is global. Only what is specific to the
   search and to a caller lives here. A narrow column even on a computer: this is read on a phone,
   with the call still going on. */

.cl-page[b-shgi8ber10] {
    max-width: 760px;
}

.cl-title[b-shgi8ber10] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: #2c2c2a;
}

.cl-placeholder[b-shgi8ber10] {
    padding: 2.5rem 1rem;
    text-align: center;
    color: #8a8a8a;
}

/* ── The number ───────────────────────────────────────────────────────────────────── */

.cl-search[b-shgi8ber10] {
    display: flex;
    gap: 8px;
}

.cl-search .form-control[b-shgi8ber10] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.05rem;
    letter-spacing: .02em;
}

/* Havit's Bootstrap build accents form controls in its own cyan. */
.cl-search .form-control:focus[b-shgi8ber10] {
    border-color: var(--theme-strong, var(--theme-color));
    box-shadow: 0 0 0 2px var(--theme-tint, #eef6ec);
    outline: none;
}

.cl-search .res-btn[b-shgi8ber10] {
    flex: none;
}

/* ── A caller ─────────────────────────────────────────────────────────────────────── */

.cl-name[b-shgi8ber10] {
    overflow-wrap: anywhere;
}

/* The warning sits between the name and the stays, with room on both sides. */
.cl-alert[b-shgi8ber10] {
    margin-bottom: 14px;
}

/* A note is written in lines; keep them. */
.cl-note[b-shgi8ber10] {
    white-space: pre-line;
}

/* ── The setup ────────────────────────────────────────────────────────────────────── */

.cl-url[b-shgi8ber10] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 4px;
}

.cl-url code[b-shgi8ber10] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #ebe9e2;
    border-radius: 8px;
    background: #f7f6f2;
    color: #2c2c2a;
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.cl-url .res-btn[b-shgi8ber10] {
    flex: none;
}
/* /Pages/Administration/Crm/GuestProfileDetail.razor.rz.scp.css */
/* One guest, in the Check-in tab's language: white cards (.res-card.is-plain), the status box
   (.ci-status), the action bar (.ci-actions) and folding cards (.res-fold) all come from
   reservationEdit.css, which is global — this page is read alongside a reservation and the two must
   not look like two different applications. Only what is specific to a person lives here. */

.gp-placeholder[b-e1lzmh85yk] {
    padding: 2.5rem 1rem;
    text-align: center;
    color: #8a8a8a;
}

/* ── Columns: the person on the left, the stays on the right (from 992 px) ─────────────── */

@media (min-width: 992px) {
    .gp-cols[b-e1lzmh85yk] {
        display: grid;
        grid-template-columns: 340px minmax(0, 1fr);
        gap: 0 1.25rem;
        align-items: start;
    }

    /* Rides along while a long list of stays scrolls. Taller than the window (the note open,
       a low screen) it scrolls on its own, so the Save button is never out of reach. */
    .gp-side[b-e1lzmh85yk] {
        position: sticky;
        top: calc(var(--site-header-height, 0px) + 1rem);
        max-height: calc(100vh - var(--site-header-height, 0px) - 2rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}

/* ── Who it is ────────────────────────────────────────────────────────────────────── */

.gp-crumb[b-e1lzmh85yk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--theme-strong, var(--theme-color));
    text-decoration: none;
}

.gp-crumb:hover[b-e1lzmh85yk] {
    text-decoration: underline;
}

.gp-name[b-e1lzmh85yk] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: #2c2c2a;
    overflow-wrap: anywhere;
}

/* Contacts as rows: a small icon tile, the label small above the value. */
.gp-facts[b-e1lzmh85yk] {
    display: grid;
    gap: 12px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.gp-fact[b-e1lzmh85yk] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.gp-fact > .bi[b-e1lzmh85yk] {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f4f3ef;
    color: #6f6e6a;
    font-size: .9rem;
}

.gp-fact > span[b-e1lzmh85yk] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gp-fact small[b-e1lzmh85yk] {
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a8983;
}

.gp-fact b[b-e1lzmh85yk] {
    font-size: .9rem;
    font-weight: 600;
    color: #2c2c2a;
    overflow-wrap: anywhere;
}

.gp-fact b.is-muted[b-e1lzmh85yk] {
    font-weight: 500;
    color: #8a8983;
}

/* ── Note, stays, merge ───────────────────────────────────────────────────────────── */

/* Count in the card head, like the receipts on the Check-in tab. */
.gp-count[b-e1lzmh85yk] {
    flex: none;
    min-width: 22px;
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f1f0ec;
    color: #5f5e5a;
    font-size: .72rem;
    font-weight: 600;
    text-align: center;
}

.gp-hint[b-e1lzmh85yk] {
    margin: 8px 0 0;
    font-size: .8rem;
    line-height: 1.45;
    color: #7a7974;
}

.gp-merge-hint[b-e1lzmh85yk] {
    margin: 0 0 14px;
}

.gp-flash[b-e1lzmh85yk] {
    margin-top: 12px;
}

/* Candidates as rows, like the receipt files on the Check-in tab. */
.gp-candidates[b-e1lzmh85yk] {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid #ebe9e2;
    border-radius: 12px;
}

.gp-candidate[b-e1lzmh85yk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 12px;
    border-top: 1px solid #f0efea;
}

.gp-candidate:first-child[b-e1lzmh85yk] {
    border-top: 0;
}

.gp-candidate > .bi[b-e1lzmh85yk] {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #f4f3ef;
    color: #6f6e6a;
}

.gp-candidate-text[b-e1lzmh85yk] {
    display: flex;
    flex: 1 1 10rem;
    flex-direction: column;
    min-width: 0;
}

.gp-candidate-text b[b-e1lzmh85yk] {
    font-size: .88rem;
    font-weight: 600;
}

.gp-candidate-text span[b-e1lzmh85yk] {
    font-size: .76rem;
    color: #7a7974;
    overflow-wrap: anywhere;
}

.gp-candidates-empty[b-e1lzmh85yk] {
    margin-top: 14px;
}

@media (max-width: 640px) {
    .gp-candidate .res-btn[b-e1lzmh85yk] {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* Havit's Bootstrap build accents form controls in its own cyan. */
.gp-page[b-e1lzmh85yk]  .form-control:focus {
    border-color: var(--theme-strong, var(--theme-color));
    box-shadow: 0 0 0 2px var(--theme-tint, #eef6ec);
    outline: none;
}
/* /Pages/Administration/Crm/GuestProfiles.razor.rz.scp.css */
/* The guest list — same "minimal canvas" as the guest book it sits next to: white cards on the
   plain page, brand accent only through the [data-theme] tokens of variables.css. ::deep is needed
   wherever a rule has to reach HxGrid's own markup, which carries the grid's scope attribute and
   not this page's. */

.gp-page[b-z4gqp175ay] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    /* Boční odsazení nese stránka sama — .content žádné nemá. */
    padding: 0 1rem 3rem;
    color: #2c2c2a;
}

/* ── Filters ──────────────────────────────────────────────────────────────────────── */

.gp-filters[b-z4gqp175ay] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: .6rem;
}

.gp-toggles[b-z4gqp175ay] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.gp-backfill[b-z4gqp175ay] {
    margin-left: auto;
}

/* Jen nad 700 px: na telefonu o zobrazení obalu rozhoduje spodní panel (rl-sheet-panel)
   v reservationList.css a stejně silné pravidlo odsud by s ním soupeřilo pořadím balíků. */
@media (min-width: 701px) {
    .gp-filter-fields[b-z4gqp175ay] {
        display: contents;
    }
}

/* Havit's Bootstrap build accents form controls in its own cyan; the controls are rendered by the
   Hx* components, so ::deep is what reaches them. Same set of rules as the guest book next door. */
.gp-page[b-z4gqp175ay]  .form-control:focus,
.gp-page[b-z4gqp175ay]  .form-select:focus {
    border-color: var(--theme-strong, var(--theme-color));
    box-shadow: 0 0 0 2px var(--theme-tint, #eef6ec);
    outline: none;
}

.gp-page[b-z4gqp175ay]  .form-check-input:focus {
    border-color: var(--theme-strong, var(--theme-color));
    box-shadow: 0 0 0 2px var(--theme-tint, #eef6ec);
    outline: none;
}

.gp-page[b-z4gqp175ay]  .form-check-input:checked {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
}

/* The switch knob is a background image Bootstrap swaps through --bs-form-switch-bg, and its focus
   variant is blue too. Restore the neutral knob on focus — and, because this bundle is linked after
   Bootstrap's, restate the white one for a switch that is both checked and focused, which the rule
   above would otherwise darken. */
.gp-page[b-z4gqp175ay]  .form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}

.gp-page[b-z4gqp175ay]  .form-switch .form-check-input:checked:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.gp-result[b-z4gqp175ay] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .7rem 1rem;
    font-size: .92rem;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-left: 3px solid var(--theme-color, #6a6a6a);
    border-radius: .5rem;
}

.gp-result.is-error[b-z4gqp175ay] {
    border-left-color: #b3261e;
    color: #b3261e;
}

/* ── The list ─────────────────────────────────────────────────────────────────────── */

.gp-list[b-z4gqp175ay] {
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: .6rem;
    overflow: hidden;
}

.gp-page[b-z4gqp175ay]  .gp-table-container {
    overflow-x: auto;
}

.gp-page[b-z4gqp175ay]  .gp-table {
    margin: 0;
    font-size: .92rem;
}

.gp-page[b-z4gqp175ay]  .gp-table th {
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6a6a6a;
    background: #fafafa;
}

.gp-page[b-z4gqp175ay]  .gp-guest,
.gp-page[b-z4gqp175ay]  .gp-contact {
    line-height: 1.35;
}

.gp-page[b-z4gqp175ay]  .gp-name {
    display: block;
    font-weight: 600;
}

.gp-page[b-z4gqp175ay]  .gp-line {
    display: block;
}

.gp-page[b-z4gqp175ay]  .gp-sub {
    display: block;
    font-size: .82rem;
    color: #777;
}

.gp-page[b-z4gqp175ay]  .gp-count {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.gp-page[b-z4gqp175ay]  .gp-muted {
    color: #666;
    white-space: nowrap;
}

/* A row about somebody a stay went wrong with. Tinted rather than shouted at: the pill in the
   flags column already says what it is, and a whole table of red would stop meaning anything. */
.gp-page[b-z4gqp175ay]  .gp-flagged td {
    background: #fdf6f5;
}

/* The cell stays a table cell — the flex box is the div inside it. Laying the td out as flex takes
   it out of the row model, which is what left the column's rules floating over the rows. */
.gp-page[b-z4gqp175ay]  .gp-flags {
    width: 1%;
    white-space: nowrap;
}

.gp-page[b-z4gqp175ay]  .gp-flag-row {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    align-items: center;
}

.gp-page[b-z4gqp175ay]  .gp-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .12rem .5rem;
    font-size: .78rem;
    white-space: nowrap;
    background: #f3f3f3;
    border-radius: 999px;
}

.gp-page[b-z4gqp175ay]  .gp-pill.is-warning {
    background: #fbe9e7;
    color: #a13b2d;
}

.gp-page[b-z4gqp175ay]  .gp-pill.is-ok {
    background: #eaf3e8;
    color: #3d6b38;
}

.gp-empty[b-z4gqp175ay] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 2.5rem 1rem;
    color: #8a8a8a;
}

.gp-empty i[b-z4gqp175ay] {
    font-size: 1.6rem;
}

.gp-empty p[b-z4gqp175ay] {
    margin: 0;
}

/* Řádek je klikací — otevírá profil (OnRowSelected). */
.gp-page[b-z4gqp175ay]  .gp-table > tbody > tr {
    cursor: pointer;
}

/* Popisky hodnot na kartě; na desktopu nad nimi stojí název sloupce. */
.gp-page[b-z4gqp175ay]  .gp-k {
    display: none;
}

/* ── Telefon: karty ────────────────────────────────────────────────────────────────────
   Stejný vzor jako seznam rezervací a faktur: pod 700 px je z mřížky seznam karet. Společný
   základ (tbody jako sloupec karet s mezerou, řádek jako flex karta, ⋮ tlačítko) je sekce
   „Telefon“ v reservationList.css pod třídou rl-cards. Reset buněk je tu znovu, protože scoped
   pravidla téhle stránky pro desktop (zarovnání počtu, podklad problémového řádku, kontejner)
   mají vyšší specificitu než základ.

     Kateřina Nováková-Dvořáková                 ⋮
     [Trvalá poznámka] [Má účet]
     ☎ +420 731 456 789   ✉ katerina.novakova…
     ───────────────────────────────────────────
     POBYTŮ               POSLEDNÍ POBYT
     4                    28.09.2026                                                      */
@media (max-width: 700px) {

    /* Horní blok: tlačítko Filtry a vedle něj dopočet jako tichý odkaz; pole ve spodním panelu.
       Tlačítko je sdílený ListFilterToggle, jeho otevřený vzhled stránka nastavuje sama. */
    .gp-filters[b-z4gqp175ay] {
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
    }

    .gp-filters[b-z4gqp175ay]  .rl-phone-tools {
        margin: 0;
    }

    .gp-filters.is-filters-open[b-z4gqp175ay]  .rl-filter-toggle {
        border-color: var(--theme-strong, var(--theme-color));
        background: var(--theme-tint, #eef6ec);
        color: var(--theme-strong, var(--theme-color));
    }

    .gp-filters.is-filters-open[b-z4gqp175ay]  .rl-filter-caret {
        transform: rotate(180deg);
    }

    /* Pole jsou ve spodním panelu (rl-sheet-panel; schování, vysunutí, hlavička i pata jsou
       v sekci „Telefon: filtry ve spodním panelu“ v reservationList.css). Tady jen rozložení:
       hledání i přepínače přes celou šířku. */
    .gp-filter-fields[b-z4gqp175ay]  .gp-search,
    .gp-toggles[b-z4gqp175ay] {
        grid-column: 1 / -1;
        margin: 0;
    }

    .gp-filter-fields[b-z4gqp175ay]  .form-label {
        margin-bottom: 4px;
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #6f6e6a;
    }

    /* 16 px: s menším písmem iOS Safari při fokusu pole přiblíží celou stránku. */
    .gp-filter-fields[b-z4gqp175ay]  .form-control {
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 1rem;
    }

    .gp-toggles[b-z4gqp175ay] {
        gap: .35rem;
    }

    /* Dopočet je údržba (odpověď na „seznam je prázdný“), ne práce se seznamem. */
    .gp-backfill[b-z4gqp175ay] {
        justify-content: flex-end;
        gap: 6px;
        width: auto;
        min-width: 0;
        margin: 0 0 0 auto;
        padding: 4px 2px;
        text-align: right;
        border: 0;
        background: none;
        box-shadow: none;
        font-size: .82rem;
        color: var(--theme-strong, var(--theme-color));
    }

    /* Karty mají každá svůj rámeček, bílá karta kolem tabulky by je jen orámovala podruhé.
       overflow: visible, aby kontextové menu neuřízl okraj. */
    .gp-list[b-z4gqp175ay] {
        overflow: visible;
        background: none;
        border: 0;
        border-radius: 0;
    }

    .gp-page[b-z4gqp175ay]  .gp-table-container {
        overflow: visible;
    }

    .gp-page[b-z4gqp175ay]  .gp-table.rl-cards {
        display: block;
        min-width: 0;
    }

    /* Řaditelný sloupec seznam nemá — z řádku popisků by zbyl prázdný pruh. */
    .gp-page[b-z4gqp175ay]  .gp-table.rl-cards > thead {
        display: none;
    }

    .gp-page[b-z4gqp175ay]  .gp-table.rl-cards > tbody > tr {
        column-gap: 10px;
    }

    .gp-page[b-z4gqp175ay]  .gp-table.rl-cards > tbody > tr > td {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        text-align: left;
        white-space: normal;
    }

    /* Bez kontaktu / bez příznaku by buňka založila prázdný řádek (Razor nechá mezery, :empty
       nestačí). */
    .gp-page[b-z4gqp175ay]  .gp-table.rl-cards > tbody > tr > td.gp-contact:not(:has(a, span)),
    .gp-page[b-z4gqp175ay]  .gp-table.rl-cards > tbody > tr > td.gp-flags:not(:has(.gp-pill)) {
        display: none;
    }

    /* Problémový host: proužek na hraně karty a jemný podklad jako na desktopu. */
    .gp-page[b-z4gqp175ay]  .gp-table.rl-cards > tbody > tr.gp-flagged {
        --bs-table-bg: #fdf6f5;
    }

    /* Šířku a zaoblení podle rohů karty dává základ karet (reservationList.css). */
    .gp-page[b-z4gqp175ay]  .gp-table.rl-cards > tbody > tr.gp-flagged > td:first-child::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        background: #c05b5b;
    }

    /* Čára nad pobyty. */
    .gp-page[b-z4gqp175ay]  .gp-table.rl-cards > tbody > tr::after {
        content: "";
        order: 5;
        flex-basis: 100%;
        height: 1px;
        margin: 2px 10px 0 0;
        background: #f1efe9;
    }

    .gp-page[b-z4gqp175ay]  .gp-table.rl-cards > tbody > tr > td.gp-guest {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
    }

    .gp-page[b-z4gqp175ay]  .gp-name {
        font-size: 1.05rem;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .gp-page[b-z4gqp175ay]  .gp-table.rl-cards > tbody > tr > td.hx-context-menu-grid-column {
        order: 2;
        position: static;
        width: auto;
        margin: -8px 0 -8px auto;
    }

    .gp-page[b-z4gqp175ay]  .gp-table.rl-cards > tbody > tr > td.gp-flags {
        order: 3;
        flex-basis: 100%;
    }

    /* Ikonové pilulky (poznámka, účet) dostanou na kartě i slovo — z title, markup se nemění. */
    .gp-page[b-z4gqp175ay]  .gp-pill {
        padding: 3px 9px;
        font-size: .76rem;
    }

    .gp-page[b-z4gqp175ay]  .gp-pill:not(.is-warning)::after {
        content: attr(title);
    }

    /* Kontakt: telefon, vedle e-mail, oba ťuknutím volat/psát. */
    .gp-page[b-z4gqp175ay]  .gp-table.rl-cards > tbody > tr > td.gp-contact {
        order: 4;
        display: flex;
        flex-basis: 100%;
        min-width: 0;
        gap: 4px 14px;
        margin-top: 2px;
        padding-right: 10px;
        font-size: .84rem;
    }

    .gp-page[b-z4gqp175ay]  .gp-contact .gp-sub {
        order: 1;
        flex: none;
        font-size: inherit;
    }

    .gp-page[b-z4gqp175ay]  .gp-contact .gp-line {
        order: 2;
        min-width: 0;
    }

    .gp-page[b-z4gqp175ay]  .gp-table.rl-cards .rl-contact {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        max-width: 100%;
        color: var(--theme-strong, var(--theme-color));
        pointer-events: auto;
    }

    .gp-page[b-z4gqp175ay]  .gp-table.rl-cards .rl-contact .bi {
        display: inline;
        flex: none;
    }

    .gp-page[b-z4gqp175ay]  .gp-table.rl-cards .rl-contact span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .gp-page[b-z4gqp175ay]  .gp-table.rl-cards > tbody > tr > td:is(.gp-count, .gp-last) {
        order: 6;
        flex: 1 1 0;
        margin-top: 1px;
        font-size: .88rem;
        font-weight: 600;
        color: #2c2c2a;
        font-variant-numeric: tabular-nums;
    }

    .gp-page[b-z4gqp175ay]  .gp-k {
        display: block;
        margin-bottom: 1px;
        font-size: .62rem;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #a3a29b;
    }

    /* Stránkování — stejné jako pod rezervacemi (.rl-panel .pagination). */
    .gp-page[b-z4gqp175ay]  .pagination {
        justify-content: center;
        gap: 4px;
        margin: 1rem 0 0;
    }

    .gp-page[b-z4gqp175ay]  .page-link {
        min-width: 2rem;
        padding: 5px 10px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: #6f6e6a;
        font-size: .85rem;
        text-align: center;
        box-shadow: none;
    }

    .gp-page[b-z4gqp175ay]  .page-item.active .page-link {
        background: var(--theme-color);
        color: #fff;
    }

    .gp-page[b-z4gqp175ay]  .page-item.disabled .page-link {
        color: #c9c7bf;
    }
}
/* /Pages/Administration/Dashboard.razor.rz.scp.css */
/* The operator's landing page: white cards on the plain admin canvas, brand accent only through
   the [data-theme] tokens of variables.css — the same restraint the guest list and the guest book
   keep. One flag breaks it on purpose: is-task, which is one of the six kinds of work the header
   badge counts — the contract at the top of Dashboard.razor says which six and why nothing else
   may carry it. Everything else is a fact or a suggestion, and a page where every card shouts
   says nothing. */

/* Jedna mezera pro celý sloupec karet: nové rezervace, fronta kanálů i řádky mřížky pod nimi
   stojí od sebe stejně daleko, jako by to byla jedna mřížka. Boční odsazení nese stránka sama
   jako ostatní admin stránky — .content ho nemá, a na telefonu by karty ležely na okrajích. */
.dash-page[b-nemj68y810] {
    --dash-gap: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: var(--dash-gap);
    padding: 0 1rem 3rem;
    color: #2c2c2a;
}

/* Fronta kanálů si nese okraje pro stránku nadcházejících rezervací, kde sedí pod nadpisem.
   Tady mezeru drží gap sloupce — s jejími okraji navíc by nad frontou a pod ní zela díra. */
.dash-page[b-nemj68y810]  .ctq-card {
    margin: 0;
}

/* Přepínač objektu je sdílená komponenta AccommodationScopePicker se scoped stylem. */

/* ── States ───────────────────────────────────────────────────────────────────────── */

.dash-loading[b-nemj68y810] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 4rem 1rem;
    text-align: center;
    color: #6a6a6a;
}

/* Sdílený Spinner si nese výšku celé stránky, aby se vycentroval sám. Tady je uvnitř
   načítacího bloku, který si střed drží sám — jinak by text visel vedle prázdného sloupce. */
.dash-loading[b-nemj68y810]  .centered-spinner {
    min-height: 0;
}

.dash-warning[b-nemj68y810],
.dash-empty-page[b-nemj68y810] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .8rem 1rem;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-left: 3px solid #b3261e;
    border-radius: .5rem;
    color: #b3261e;
}

.dash-empty-page[b-nemj68y810] {
    border-left-color: #6a6a6a;
    color: #4a4a48;
}

/* ── The grid of cards ────────────────────────────────────────────────────────────── */

.dash-grid[b-nemj68y810] {
    display: grid;
    /* min(): na telefonu užším než 320px + odsazení by jediný sloupec přetekl přes pravý okraj. */
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: var(--dash-gap);
    /* Cards stretch to the tallest in their row, so the footer links at their feet line up
       across the page. Every card is a flex column ending in a .dash-cardlink pinned to the
       bottom by its own auto margin, so the height a short card gains is empty space above
       that link, not stretched content. */
    align-items: stretch;
}

.dash-card[b-nemj68y810] {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.1rem 1.2rem;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: .6rem;
}

/* A job somebody has to do, and one of the kinds the header badge counts — see the contract
   at the top of Dashboard.razor before putting this on another card. Amber rather than red:
   none of it is broken, all of it is waiting.

   Stejný krémový vzhled jako fronta kanálů (ChannelTaskQueue), aby na stránce platilo jedno
   pravidlo: žlutá karta = úkol, bílá = jen přehled. */
.dash-card.is-task[b-nemj68y810] {
    background: #fdfaf0;
    border: 1px solid #e6d9a8;
    border-left: 4px solid #d9c06a;
    border-radius: 14px;
}

.dash-card.is-task .dash-card-head > i[b-nemj68y810] {
    color: #a3892c;
}

.dash-card.is-task .dash-card-head h2[b-nemj68y810] {
    font-weight: 700;
}

.dash-card.is-task .dash-list[b-nemj68y810],
.dash-card.is-task .dash-list li[b-nemj68y810],
.dash-card.is-task .dash-issues li[b-nemj68y810] {
    border-color: #efe6cd;
}

.dash-card.is-task .dash-list li > a:hover[b-nemj68y810] {
    background: #f8f1dc;
}

.dash-card.is-task .dash-pill:not(.is-missing)[b-nemj68y810] {
    background: #f4ecd4;
}

/* Tlačítka storen stejná jako „Otevřít“ ve frontě kanálů. Komponenta má vlastní scoped styl. */
.dash-card.is-task[b-nemj68y810]  .cxt-item {
    border-color: #efe6cd;
}

.dash-card.is-task[b-nemj68y810]  .cxt-action {
    padding: 5px 12px;
    border-color: #d9c06a;
    border-radius: 999px;
    color: #5c4d14;
    font-weight: 600;
}

.dash-card.is-task[b-nemj68y810]  .cxt-action:hover {
    background: #f6efd7;
}

/* Předbíhá jen uvnitř mřížky. Karta nových rezervací s čekající rezervací stojí mimo ni přímo
   ve sloupci stránky (.dash-page je flex), a tam by ji order: -2 vytáhl nad nadpis a výběr objektu.

   A dostane celý řádek, stejně jako nové rezervace a fronta kanálů nad mřížkou: úkol jako úzká
   dlaždice vedle prázdného místa vypadal jako jedna z klidných karet, a doklady kanálů se navíc
   odpracovávají formulářem, jehož pole by se ve třetině šířky skládala pod sebe. */
.dash-grid > .dash-card.is-task[b-nemj68y810] {
    order: -2;
    grid-column: 1 / -1;
}

/* Počítaný seznam (Ubyport) přes celou šířku by počet odtrhl od popisku o celou obrazovku. */
.dash-grid > .dash-card.is-task .dash-issues[b-nemj68y810] {
    max-width: 32rem;
}

/* ── Why a task carries an order ──────────────────────────────────────────────────────
   The document order of the grid is the reading order of a quiet day: where the houses
   stand, then what is coming, then the rest. It only holds while nothing is outstanding.
   A card that has flagged itself is not a fact but a job, and a job nobody sees is a job
   nobody does, so it is lifted to the head of the grid while everything unflagged stays
   exactly where it always was. */

.dash-card-head[b-nemj68y810] {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}

.dash-card-head > i[b-nemj68y810] {
    flex: none;
    margin-top: .1rem;
    font-size: 1.15rem;
    color: var(--theme-color, #6a6a6a);
}

.dash-card-head h2[b-nemj68y810] {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
}

.dash-card-head p[b-nemj68y810] {
    margin: .15rem 0 0;
    font-size: .82rem;
    color: #6a6a6a;
}

.dash-badge[b-nemj68y810] {
    flex: none;
    margin-left: auto;
    min-width: 1.7rem;
    padding: .1rem .5rem;
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background: var(--theme-color, #4a4a48);
    border-radius: 1rem;
}

.dash-card.is-task .dash-badge[b-nemj68y810] {
    color: #3d3410;
    background: #d9c06a;
}

/* The word the amber stripe means, spelled out. The stripe alone says "this one matters" and
   leaves the reader to guess at what; the badge in the header counts these labels, so the label
   is what closes the loop between a 2 up there and two cards down here. It takes the auto margin
   off the badge so the pair sits together at the right end of the head, label then count.

   Outlined rather than filled: it stands next to a solid amber badge, and two solid amber pills
   side by side read as one smudge instead of as a name and a number. */
.dash-task-flag[b-nemj68y810] {
    flex: none;
    margin-left: auto;
    padding: .1rem .55rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #6b5713;
    border: 1px solid #c9ad57;
    border-radius: 1rem;
}

/* With a label present the badge follows it rather than claiming the free space itself. */
.dash-task-flag + .dash-badge[b-nemj68y810] {
    margin-left: .35rem;
}

/* ── The house cards ──────────────────────────────────────────────────────────────────
   Only under the all-objects view, and the only cards on the page that carry a colour of
   their own: with two houses side by side the accent is what tells the reader which one
   they are looking at before they have read the name. */

.dash-card.is-house[b-nemj68y810] {
    box-shadow: inset 4px 0 0 var(--theme-color, #cfcfcd);
}

.dash-card.is-house .dash-card-head h2[b-nemj68y810] {
    font-size: 1.08rem;
}

/* Read from across the room: is anybody in this house tonight. */
.dash-state[b-nemj68y810] {
    flex: none;
    margin-left: auto;
    padding: .15rem .6rem;
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
    border-radius: 1rem;
}

.dash-state.is-occupied[b-nemj68y810] {
    color: #fff;
    background: var(--theme-color, #4a4a48);
}

.dash-state.is-arriving[b-nemj68y810] {
    color: #2f6b35;
    background: #e8f1e8;
}

.dash-state.is-leaving[b-nemj68y810] {
    color: #8a5a1f;
    background: #f7efe2;
}

.dash-state.is-free[b-nemj68y810] {
    color: #6a6a6a;
    background: #f2f2f0;
}

/* Domy mají vlastní řádek mřížky přes celou šířku a uvnitř něj stejné sloupce jako mřížka.
   Každá karta domu zabírá pět řádků a sdílí je se sousedy (subgrid): pruh „V domě", program na
   dnešek, program dalších dnů a patička tak stojí ve všech kartách na stejné výšce, ať je kterýkoli
   z nich v jednom domě delší. Řádek, který karta nekreslí (bez oprávnění), drží svou pozici
   prázdný — proto mají části napevno grid-row. Pozor: container-type na kartě by subgrid vypnul
   (zapíná layout containment). */
.dash-houses[b-nemj68y810] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: var(--dash-gap);
}

.dash-houses > .dash-card.is-house[b-nemj68y810] {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: .85rem;
}

.dash-card.is-house > .dash-card-head[b-nemj68y810] { grid-row: 1; }
.dash-card.is-house > .dash-now[b-nemj68y810] { grid-row: 2; }
.dash-card.is-house > .dash-day.is-today[b-nemj68y810] { grid-row: 3; }
.dash-card.is-house > .dash-day.is-later[b-nemj68y810] { grid-row: 4; }
.dash-card.is-house > .dash-house-foot[b-nemj68y810] { grid-row: 5; }

/* Název domu se nikdy nezkracuje ani nezalamuje kvůli stavu vedle něj: když se na telefonu
   nevejdou oba, stav spadne pod název. Media query, ne container query — viz výše. */
.dash-card.is-house .dash-card-head[b-nemj68y810] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: .7rem;
    row-gap: .3rem;
}

.dash-card.is-house .dash-card-head > i[b-nemj68y810] {
    margin-top: 0;
}

@media (max-width: 359px) {
    .dash-card.is-house .dash-card-head .dash-state[b-nemj68y810] {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
        margin-left: 0;
    }
}

/* Kdo v domě dnes spí — podbarvený pruh v barvě domu. Výšku mu dává sdílený řádek, takže obsah
   stojí uprostřed: prázdný pruh je stejně vysoký jako plný vedle. */
.dash-now[b-nemj68y810] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .5rem;
    margin: 0;
    padding: .55rem .7rem;
    background: var(--theme-tint, #f2f2f0);
    border-radius: .45rem;
}

.dash-now.is-empty[b-nemj68y810] {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: .85rem;
    color: #8a8a88;
    background: #f4f4f2;
}

.dash-now-stay[b-nemj68y810] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: .55rem;
    align-items: baseline;
    color: inherit;
    text-decoration: none;
}

.dash-now-stay > i[b-nemj68y810] {
    grid-row: 1 / span 3;
    align-self: start;
    color: var(--theme-strong, var(--theme-color, #4a4a48));
}

.dash-now-label[b-nemj68y810] {
    grid-column: 2 / -1;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--theme-strong, var(--theme-color, #4a4a48));
}

.dash-now-until[b-nemj68y810] {
    font-size: .8rem;
    white-space: nowrap;
    color: #4a4a48;
}

.dash-now-stay .dash-ev-meta[b-nemj68y810] {
    grid-column: 2 / -1;
    color: #4a4a48;
}

.dash-now-stay:hover .dash-ev-name[b-nemj68y810] {
    text-decoration: underline;
}

/* Program domu po dnech: nadpis dne, pod ním čas vlevo (pod sebou ve sloupci), ikona druhu a
   jméno. Jméno je vždy na jednom řádku — dlouhé se na konci rozplyne, krátkého se přechod
   nedotkne, protože buňka jména sahá přes celé volné místo. */
.dash-day[b-nemj68y810] {
    display: flex;
    flex-direction: column;
}

.dash-day.is-later[b-nemj68y810] {
    padding-top: .55rem;
    border-top: 1px solid #f0f0f0;
}

.dash-day-head[b-nemj68y810] {
    margin: 0;
    padding-bottom: .25rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6a6a6a;
}

/* Další den v témže řádku (úklid jindy než příjezd) od předchozího odsadit. */
.dash-ev + .dash-day-head[b-nemj68y810] {
    padding-top: .5rem;
}

.dash-day-head b[b-nemj68y810] {
    font-weight: 700;
    color: #2c2c2a;
}

.dash-day-quiet[b-nemj68y810] {
    margin: 0;
    padding: .3rem .1rem;
    font-size: .85rem;
    color: #8a8a88;
}

.dash-ev[b-nemj68y810] {
    display: grid;
    grid-template-columns: 3rem 1.1rem minmax(0, 1fr);
    column-gap: .45rem;
    align-items: baseline;
    padding: .3rem .1rem;
    color: inherit;
    text-decoration: none;
}

.dash-ev:hover .dash-ev-name[b-nemj68y810] {
    text-decoration: underline;
}

.dash-ev-time[b-nemj68y810] {
    font-size: .82rem;
    color: #4a4a48;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dash-ev-icon[b-nemj68y810] {
    font-size: .9rem;
}

.dash-ev-icon.is-in[b-nemj68y810] { color: #2f6b35; }
.dash-ev-icon.is-out[b-nemj68y810] { color: #8a5a1f; }
.dash-ev-icon.is-clean[b-nemj68y810] { color: var(--theme-strong, var(--theme-color, #4a4a48)); }

.dash-ev-name[b-nemj68y810] {
    overflow: hidden;
    font-size: .92rem;
    font-weight: 600;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.6rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 1.6rem), transparent);
}

/* Úklid, na kterém nikdo není — jantarová úkolů. */
.dash-ev-name.is-missing[b-nemj68y810] {
    color: #c77700;
}

/* Druh a počty hostů: zalomí se jen mezi částmi, nikdy uprostřed „2 Děti". */
.dash-ev-meta[b-nemj68y810] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 .35rem;
    font-size: .78rem;
    color: #6a6a6a;
}

.dash-ev .dash-ev-meta[b-nemj68y810] {
    grid-column: 3;
}

.dash-ev-meta > span[b-nemj68y810] {
    white-space: nowrap;
}

.dash-ev-meta > span + span[b-nemj68y810]::before {
    content: "·";
    margin-right: .35rem;
}

/* Patička karty domu: co je potřeba dořešit, a pod tím odkaz na objekt — na dně sdíleného řádku,
   takže odkazy domů vedle sebe stojí v jedné linii. */
.dash-house-foot[b-nemj68y810] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .85rem;
}

.dash-house-todo[b-nemj68y810] {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: .5rem .7rem;
    font-size: .85rem;
    font-weight: 600;
    color: #8a5400;
    background: #fbefdc;
    border-radius: .45rem;
    text-decoration: none;
}

.dash-house-todo-go[b-nemj68y810] {
    margin-left: auto;
}

a.dash-house-todo:hover[b-nemj68y810] {
    text-decoration: underline;
}

/* ── Whose row is this ────────────────────────────────────────────────────────────────
   The all-objects lists mix the houses, so every row has to say which one it belongs to.
   In the house's own colour, because that is the shorthand the cards above it teach. */

.dash-house-tag[b-nemj68y810] {
    flex: none;
    padding: .05rem .45rem;
    font-size: .72rem;
    white-space: nowrap;
    color: var(--theme-strong, var(--theme-color, #4a4a48));
    background: var(--theme-tint, #f2f2f0);
    border-radius: 1rem;
}

/* ── Number tiles ─────────────────────────────────────────────────────────────────── */

.dash-tiles[b-nemj68y810] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: .6rem;
}

.dash-tile[b-nemj68y810] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .7rem .8rem;
    background: var(--theme-tint, #f6f6f4);
    border-radius: .45rem;
}

.dash-tile-label[b-nemj68y810] {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6a6a6a;
}

.dash-tile-value[b-nemj68y810] {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
}

.dash-tile-hint[b-nemj68y810] {
    font-size: .76rem;
    color: #6a6a6a;
}

/* Karta Finance: částky v korunách jsou delší než procenta obsazenosti. Příjmy dostanou celý
   řádek, DPH kanálů se dělí o ten pod ním, a hodnota se nezalomí uprostřed čísla. */
.dash-tiles.is-money[b-nemj68y810] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dash-tiles.is-money .dash-tile.is-lead[b-nemj68y810] {
    grid-column: 1 / -1;
}

.dash-tiles.is-money .dash-tile-value[b-nemj68y810] {
    font-size: 1.3rem;
    white-space: nowrap;
}

.dash-tile-hint.is-owed[b-nemj68y810] {
    color: #c77700;
}

/* Z čeho se očekávané příjmy skládají: popisek vlevo, částka vpravo, čísla pod sebou. */
.dash-tile-rows[b-nemj68y810] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin: .35rem 0 .3rem;
    padding: 0;
    list-style: none;
    font-size: .84rem;
}

.dash-tile-rows li[b-nemj68y810] {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
}

.dash-tile-rows strong[b-nemj68y810] {
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dash-tile-rows li.is-sub[b-nemj68y810] {
    padding-left: .9rem;
    font-size: .78rem;
}

.dash-tile-rows li.is-owed[b-nemj68y810] {
    color: #c77700;
}

.dash-cardlink a + a[b-nemj68y810] {
    margin-left: 1rem;
}

/* A tile that is not a fact but a piece of work nobody has picked up. */
.dash-tile.is-owed .dash-tile-value[b-nemj68y810] {
    color: #c77700;
}

/* ── Lists of rows ────────────────────────────────────────────────────────────────── */

.dash-list[b-nemj68y810] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #f0f0f0;
}

.dash-list li[b-nemj68y810] {
    border-bottom: 1px solid #f0f0f0;
}

.dash-list li > a[b-nemj68y810],
.dash-list li > span:first-child[b-nemj68y810] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem .7rem;
    padding: .5rem .1rem;
    color: inherit;
    text-decoration: none;
}

.dash-list li > a:hover[b-nemj68y810] {
    background: #fafaf8;
}

.dash-list-kind[b-nemj68y810] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6a6a6a;
}

/* The house's own state rather than an event on it, so it takes the accommodation's colour
   instead of the green/amber pair the arrivals and departures use. */
.dash-list-kind.is-stay[b-nemj68y810] {
    color: var(--theme-strong, var(--theme-color, #4a4a48));
}

.dash-list-kind.is-in[b-nemj68y810] {
    color: #2f6b35;
}

.dash-list-kind.is-out[b-nemj68y810] {
    color: #8a5a1f;
}

.dash-list-name[b-nemj68y810] {
    font-weight: 600;
    font-size: .92rem;
}

.dash-list-meta[b-nemj68y810] {
    font-size: .82rem;
    color: #6a6a6a;
}

/* Who the guest is, on a line that is otherwise only a name and dates. Filled, not outlined, so
   it reads at a glance down a list — red for a stay that went wrong, amber for a standing note. */
.dash-guest-flag[b-nemj68y810] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .08rem .5rem;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 1rem;
}

.dash-guest-flag.is-problem[b-nemj68y810] {
    color: #fff;
    background: #a32d2d;
}

.dash-guest-flag.is-note[b-nemj68y810] {
    color: #6b4c0e;
    background: #f6e3b4;
}

.dash-pill[b-nemj68y810] {
    margin-left: auto;
    padding: .1rem .5rem;
    font-size: .74rem;
    border-radius: 1rem;
    background: #f2f2f0;
    color: #4a4a48;
}

.dash-pill > i[b-nemj68y810] {
    margin-right: .15rem;
}

/* A cleaning nobody is on — the amber the page owes things in, filled so it reads down a list
   as the one pill somebody has to act on. */
.dash-pill.is-missing[b-nemj68y810] {
    font-weight: 600;
    color: #8a5400;
    background: #fbefdc;
}

/* U úklidů jméno uklízeče zarovnané doleva — když se nevejde vedle data, spadne pod štítek domu, ne na pravý okraj. */
.dash-cleanings .dash-pill[b-nemj68y810] {
    margin-left: 0;
}

.dash-turnover[b-nemj68y810] {
    margin-left: .2rem;
    color: #c77700;
}

/* Úklidy jako úkol jdou přes celou šířku, a tam se řádek čte ve sloupcích jako nové rezervace:
   dům, datum, kdy, a vpravo kdo na něm je — nebo jantarové Přiřadit. Klidná karta úklidů zůstává
   úzkou dlaždicí a s ní zalamovaný řádek nahoře; stejně tak telefon. */
@media (min-width: 641px) {
    .dash-card.is-task .dash-list.dash-cleanings[b-nemj68y810] {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr) max-content;
        column-gap: 1.25rem;
    }

    .dash-card.is-task .dash-list.dash-cleanings.has-house[b-nemj68y810] {
        grid-template-columns: max-content max-content minmax(0, 1fr) max-content;
    }

    .dash-card.is-task .dash-cleanings li[b-nemj68y810],
    .dash-card.is-task .dash-cleanings li > a[b-nemj68y810] {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        align-items: center;
    }

    .dash-card.is-task .dash-cleanings .dash-house-tag[b-nemj68y810] {
        justify-self: start;
    }

    .dash-card.is-task .dash-cleanings .dash-pill[b-nemj68y810] {
        justify-self: end;
    }
}

/* ── Chybí v nastavení ────────────────────────────────────────────────────────────────
   Ikona vlevo, vedle ní věta o tom, co chybí, a pod větou čí dům a ve které sekci se to doplní.
   Věta je delší než jméno hosta, proto dva řádky místo štítků vedle sebe. Červená ikona u toho,
   co neodejde vůbec (SettingsGapSeverity.Critical), jinak jantarová úkolů. */

.dash-list.dash-gaps li > a[b-nemj68y810] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: .2rem .6rem;
}

.dash-gap-icon[b-nemj68y810] {
    font-size: .9rem;
    color: #c77700;
}

.dash-gap-icon.is-critical[b-nemj68y810] {
    color: #b3261e;
}

.dash-gap-body[b-nemj68y810] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.dash-gap-text[b-nemj68y810] {
    font-size: .88rem;
    line-height: 1.4;
}

.dash-gaps .dash-list-meta[b-nemj68y810] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

/* ── Nové rezervace ───────────────────────────────────────────────────────────────────
   Dům, host, termín, co se po obsluze chce — sloupce drží jedna mřížka přes celý seznam
   (subgrid), takže termíny i druh úkolu stojí pod sebou, ať je jméno hosta jakkoli dlouhé.
   Sloupec jména je široký jako to nejdelší, ale když není místo, zužuje se první — druh úkolu
   si drží 10rem, jinak by mu jméno sebralo všechno a text by vytekl z karty. Seznam se kreslí
   jen nad mřížkou karet, tedy přes celou šířku stránky; pod 640px se řádek vrací k obecnému
   zalamování .dash-list. */

.dash-list.dash-pending[b-nemj68y810] {
    display: grid;
    grid-template-columns: minmax(6rem, max-content) max-content minmax(10rem, 1fr);
    column-gap: .7rem;
}

.dash-list.dash-pending.has-house[b-nemj68y810] {
    grid-template-columns: max-content minmax(6rem, max-content) max-content minmax(10rem, 1fr);
}

.dash-list.dash-pending li[b-nemj68y810],
.dash-list.dash-pending li > a[b-nemj68y810] {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: baseline;
}

.dash-pending .dash-house-tag[b-nemj68y810] {
    justify-self: start;
}

.dash-pending-who[b-nemj68y810] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .5rem;
    min-width: 0;
}

.dash-pending-who .dash-list-name[b-nemj68y810] {
    overflow-wrap: anywhere;
}

.dash-pending-when[b-nemj68y810] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .dash-list.dash-pending[b-nemj68y810],
    .dash-list.dash-pending li[b-nemj68y810] {
        display: block;
    }

    .dash-list.dash-pending li > a[b-nemj68y810] {
        display: flex;
    }

    /* Věta pod nadpisem jen opakuje nadpis; na telefonu ji skrýváme stejně jako fronta kanálů. */
    .dash-pending-sub[b-nemj68y810] {
        display: none;
    }
}

/* ── Nejbližší příjezdy ───────────────────────────────────────────────────────────────
   Kam, kdo, za kolik dní — sloupce drží jedna mřížka přes celý seznam (subgrid), takže jména
   i odpočet stojí pod sebou, ať je název domu jakkoli dlouhý. Dům jen v pohledu na všechny
   objekty; pod jedním objektem by v každém řádku stálo totéž. */

.dash-list.dash-arrivals[b-nemj68y810] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: .7rem;
}

.dash-list.dash-arrivals.has-house[b-nemj68y810] {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
}

.dash-list.dash-arrivals li[b-nemj68y810],
.dash-list.dash-arrivals li > a[b-nemj68y810] {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
}

.dash-arrivals .dash-house-tag[b-nemj68y810] {
    justify-self: start;
}

.dash-arrivals .dash-list-name[b-nemj68y810] {
    overflow-wrap: anywhere;
}

.dash-arrivals .dash-pill[b-nemj68y810] {
    justify-self: end;
    white-space: nowrap;
}

/* Kdo přijíždí ještě dnes — zelená příjezdů z karet domů, vyplněná, aby se v odpočtu nedala přehlédnout. */
.dash-pill.is-today[b-nemj68y810] {
    font-weight: 600;
    color: #2f6b35;
    background: #e8f1e8;
}

/* ── Volné termíny k nabídnutí ────────────────────────────────────────────────────────
   Termín a akce. Termín má dva řádky — data tučně, dny v týdnu před nimi tence, pod nimi noci
   a za kolik dní to začíná. Kulaté plus na konci je jediné tlačítko řádku; klikatelný je řádek
   celý. Pod všemi objekty stojí štítek domu jednou nad jeho skupinou řádků, ne v každém řádku. */

.dash-list.dash-offers[b-nemj68y810] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: .8rem;
}

/* Skupinu otevírá štítek, čára nad prvním z nich by jen zdvojila okraj karty. */
.dash-list.dash-offers.has-house[b-nemj68y810] {
    border-top: none;
}

.dash-list.dash-offers li[b-nemj68y810],
.dash-list.dash-offers li > a[b-nemj68y810] {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
}

.dash-list.dash-offers li > a[b-nemj68y810] {
    padding: .55rem .1rem;
}

.dash-list.dash-offers li.dash-offer-house[b-nemj68y810] {
    display: flex;
    padding: .2rem 0 .5rem;
}

.dash-list.dash-offers li.dash-offer-house:not(:first-child)[b-nemj68y810] {
    padding-top: 1rem;
}

/* Obecné .dash-list li > span:first-child dělá z první buňky řádek s odsazením — štítek tu
   řádkem není a nafoukl by se. */
.dash-list.dash-offers li.dash-offer-house > .dash-house-tag[b-nemj68y810] {
    display: inline-block;
    padding: .05rem .45rem;
}

.dash-offer-when[b-nemj68y810] {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    min-width: 0;
}

/* Láme se jen mezi příjezdem a odjezdem, nikdy uvnitř dne. */
.dash-offer-day[b-nemj68y810] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dash-offer-wd[b-nemj68y810] {
    font-weight: 400;
    color: #6a6a6a;
}

.dash-offer-add[b-nemj68y810] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    font-size: .95rem;
    color: var(--theme-strong, var(--theme-color, #4a4a48));
    background: var(--theme-tint, #f2f2f0);
    border-radius: 50%;
    transition: color .15s, background-color .15s;
}

.dash-offers li > a:hover .dash-offer-add[b-nemj68y810],
.dash-offers li > a:focus-visible .dash-offer-add[b-nemj68y810] {
    color: #fff;
    background: var(--theme-color, #4a4a48);
}

/* ── Counted issues ───────────────────────────────────────────────────────────────── */

.dash-issues[b-nemj68y810] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dash-issues li[b-nemj68y810] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .8rem;
    padding: .35rem 0;
    font-size: .9rem;
    border-bottom: 1px solid #f0f0f0;
}

.dash-issues li:last-child[b-nemj68y810] {
    border-bottom: none;
}

/* ── Small print ──────────────────────────────────────────────────────────────────── */

.dash-quiet[b-nemj68y810] {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-size: .88rem;
    color: #6a6a6a;
}

.dash-more[b-nemj68y810] {
    margin: 0;
    font-size: .8rem;
    color: #6a6a6a;
}

.dash-cardlink[b-nemj68y810] {
    margin: auto 0 0;
    padding-top: .2rem;
    font-size: .86rem;
}

.dash-cardlink a[b-nemj68y810] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--theme-strong, var(--theme-color, #4a4a48));
    text-decoration: none;
}

.dash-cardlink a:hover[b-nemj68y810] {
    text-decoration: underline;
}
/* /Pages/Administration/Finance/BankAccountsEdit.razor.rz.scp.css */
/* Bank account catalogue — sibling of the currency catalogue (.cc-*) and styled to match it:
   minimal canvas, hairline white cards, brand accent only through the shared theme tokens.
   One card per account, one inline editor. */

.ba-page[b-c80b2mgzkg] {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
    box-sizing: border-box;
    text-align: left;
    color: #2c2c2a;
}

/* ── Toolbar ── */
.ba-toolbar[b-c80b2mgzkg] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 1rem;
    margin: 2rem 0 1.25rem;
}

.ba-toolbar .section-head[b-c80b2mgzkg] {
    grid-column: 2;
    margin-bottom: 0;
}

/* ── Explanation strip ── */
.ba-info[b-c80b2mgzkg] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 1.5rem;
    background: var(--theme-tint, #f1f5ee);
    border: 1px solid color-mix(in srgb, var(--theme-strong, #3d6b33) 18%, transparent);
    border-radius: 12px;
}

    .ba-info .bi[b-c80b2mgzkg] {
        flex: none;
        margin-top: 1px;
        font-size: 1.05rem;
        color: var(--theme-strong, var(--theme-color));
    }

    .ba-info p[b-c80b2mgzkg] {
        margin: 0;
        font-size: .87rem;
        line-height: 1.6;
        color: #4b4a46;
    }

/* ── Cards ── */
.ba-grid[b-c80b2mgzkg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 1.5rem;
}

.ba-card[b-c80b2mgzkg] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px 16px;
    background: #fff;
    border: 1px solid #e3e3e0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

    /* Deactivated account — dimmed, but still legible: old invoices still point at it. */
    .ba-card.is-off[b-c80b2mgzkg] {
        background: #fbfbfa;
        border-style: dashed;
        color: #6f6e6a;
    }

.ba-card-head[b-c80b2mgzkg] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ba-icon[b-c80b2mgzkg] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--theme-tint, #f1f5ee);
    color: var(--theme-strong, var(--theme-color));
    font-size: 1.2rem;
    line-height: 1;
}

.ba-ident[b-c80b2mgzkg] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ba-name[b-c80b2mgzkg] {
    font-size: 1.02rem;
    font-weight: 600;
}

.ba-number[b-c80b2mgzkg] {
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    color: #6f6e6a;
}

.ba-flag[b-c80b2mgzkg] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
    background: #eceae3;
    color: #6f6e6a;
}

    .ba-flag.is-watched[b-c80b2mgzkg] {
        background: var(--theme-tint, #eef6ec);
        color: var(--theme-strong, #3d6b33);
    }

    .ba-flag .bi[b-c80b2mgzkg] {
        font-size: .7rem;
    }

/* ── Card metadata ── */
.ba-meta[b-c80b2mgzkg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    background: #faf9f6;
    border-radius: 10px;
}

    .ba-meta dt[b-c80b2mgzkg] {
        margin: 0 0 2px;
        font-size: .7rem;
        font-weight: 500;
        color: #a3a29b;
    }

    .ba-meta dd[b-c80b2mgzkg] {
        margin: 0;
        font-size: .85rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: #2c2c2a;
        overflow-wrap: anywhere;
    }

.ba-error[b-c80b2mgzkg] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 7px 12px;
    background: #fceaea;
    border-radius: 10px;
    font-size: .8rem;
    color: #a32d2d;
}

.ba-card-foot[b-c80b2mgzkg] {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f0efeb;
}

/* ── Buttons ── */
.ba-btn[b-c80b2mgzkg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #e3e3e0;
    border-radius: 8px;
    background: #fff;
    color: #6f6e6a;
    font-family: inherit;
    font-size: .82rem;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

    .ba-btn:hover:not(:disabled)[b-c80b2mgzkg] {
        border-color: #c9c7bf;
        color: #2c2c2a;
    }

    .ba-btn.is-danger:hover:not(:disabled)[b-c80b2mgzkg] {
        border-color: #d98b8b;
        color: #a32d2d;
    }

    .ba-btn:disabled[b-c80b2mgzkg] {
        opacity: .45;
        cursor: default;
    }

.ba-submit[b-c80b2mgzkg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    border: none;
    border-radius: 8px;
    background: var(--theme-color);
    color: #fff;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    transition: filter .15s;
}

    .ba-submit:hover:not(:disabled)[b-c80b2mgzkg] {
        filter: brightness(0.9);
    }

    .ba-submit:disabled[b-c80b2mgzkg] {
        opacity: .55;
        cursor: default;
    }

.ba-cancel[b-c80b2mgzkg] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid #e3e3e0;
    border-radius: 8px;
    background: #fff;
    color: #6f6e6a;
    font-family: inherit;
    font-size: .85rem;
    cursor: pointer;
}

    .ba-cancel:hover:not(:disabled)[b-c80b2mgzkg] {
        border-color: #c9c7bf;
        color: #2c2c2a;
    }

/* ── Inline editor ── */
.ba-editor[b-c80b2mgzkg] {
    scroll-margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #e3e3e0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.ba-editor-head[b-c80b2mgzkg] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

    .ba-editor-head .bi[b-c80b2mgzkg] {
        margin-top: 3px;
        font-size: 1.15rem;
        color: var(--theme-strong, var(--theme-color));
    }

    .ba-editor-head h2[b-c80b2mgzkg] {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 600;
    }

    .ba-editor-head p[b-c80b2mgzkg] {
        margin: 2px 0 0;
        font-size: .84rem;
        color: #6f6e6a;
    }

.ba-form-grid[b-c80b2mgzkg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 16px;
}

/* ── Fio section of the editor ── */
.ba-fio h3[b-c80b2mgzkg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-size: .95rem;
    font-weight: 600;
}

    .ba-fio h3 .bi[b-c80b2mgzkg] {
        color: var(--theme-strong, var(--theme-color));
    }

.ba-fio-hint[b-c80b2mgzkg] {
    margin: 0 0 12px;
    font-size: .82rem;
    color: #6f6e6a;
}

.ba-fio .ba-form-grid[b-c80b2mgzkg] {
    margin-bottom: 12px;
}

.ba-check[b-c80b2mgzkg] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    font-size: .88rem;
    cursor: pointer;
}

    .ba-check input[b-c80b2mgzkg] {
        margin-top: 3px;
    }

    .ba-check small[b-c80b2mgzkg] {
        display: block;
        font-size: .78rem;
        color: #6f6e6a;
    }

.ba-errors[b-c80b2mgzkg] {
    margin: 0;
    padding: 10px 14px;
    list-style: none;
    background: #fceaea;
    border-radius: 10px;
    font-size: .82rem;
    color: #a32d2d;
}

    .ba-errors li[b-c80b2mgzkg] {
        display: flex;
        align-items: center;
        gap: 7px;
    }

/* ── Action row and result messages ── */
.ba-actions[b-c80b2mgzkg] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ba-result[b-c80b2mgzkg] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: .83rem;
}

    .ba-result.is-ok[b-c80b2mgzkg] {
        background: var(--theme-tint, #eef6ec);
        color: var(--theme-strong, #3d6b33);
        border-color: color-mix(in srgb, var(--theme-strong, #3d6b33) 25%, transparent);
    }

    .ba-result.is-error[b-c80b2mgzkg] {
        background: #fceaea;
        color: #a32d2d;
        border-color: #eecccc;
    }

/* ── Loading / empty state ── */
.ba-empty[b-c80b2mgzkg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 3rem 1.5rem;
    margin-bottom: 1.5rem;
    background: #fff;
    border: 1px solid #e3e3e0;
    border-radius: 14px;
    color: #6f6e6a;
    text-align: center;
}

    .ba-empty p[b-c80b2mgzkg] {
        margin: 0;
        font-size: .9rem;
    }

    .ba-empty > .bi[b-c80b2mgzkg] {
        font-size: 1.6rem;
        color: #a3a29b;
    }

@media (max-width: 576px) {

    .ba-toolbar[b-c80b2mgzkg] {
        grid-template-columns: 1fr;
    }

    .ba-toolbar .section-head[b-c80b2mgzkg] {
        grid-column: 1;
        justify-self: center;
    }
}
/* /Pages/Administration/Finance/Components/CancellationTaskList.razor.rz.scp.css */
/* Storna k vyúčtování a vratky — řádek a pod ním rozbalená vratka. Rámeček dodává karta přehledu.
   Řádek se čte jako „Nové rezervace“ na přehledu: [dům] [host] [co se chce] … [akce] — sloupce
   drží jedna mřížka přes celý seznam (subgrid), takže termíny stojí pod sebou. Pod 640px se řádek
   zalomí: dům a host nahoře, pod nimi detail, tlačítko pořád vpravo. */
.cxt-list[b-1lsfx6wjf8] {
    display: grid;
    grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr) auto;
    column-gap: .7rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

    .cxt-list.has-house[b-1lsfx6wjf8] {
        grid-template-columns: max-content minmax(6rem, max-content) minmax(0, 1fr) auto;
    }

.cxt-item[b-1lsfx6wjf8] {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    border-bottom: 1px solid #f0efeb;
}

    .cxt-item:last-child[b-1lsfx6wjf8] {
        border-bottom: none;
    }

.cxt-row[b-1lsfx6wjf8] {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    padding: 10px 0;
}

/* Na šířku jen obal pro telefon — dům a host jsou vlastní sloupce mřížky. */
.cxt-who[b-1lsfx6wjf8] {
    display: contents;
}

.cxt-title[b-1lsfx6wjf8] {
    font-size: .92rem;
    font-weight: 600;
    color: #2c2c2a;
    overflow-wrap: anywhere;
}

.cxt-detail[b-1lsfx6wjf8] {
    font-size: .82rem;
    color: #6a6a6a;
    font-variant-numeric: tabular-nums;
}

    /* Vratka po termínu, který slibují obchodní podmínky. */
    .cxt-detail.is-overdue[b-1lsfx6wjf8] {
        color: #b4412f;
        font-weight: 600;
    }

.cxt-house[b-1lsfx6wjf8] {
    justify-self: start;
    padding: .05rem .45rem;
    font-size: .72rem;
    font-weight: 400;
    white-space: nowrap;
    color: var(--theme-strong, var(--theme-color, #4a4a48));
    background: var(--theme-tint, #f2f2f0);
    border-radius: 1rem;
}

.cxt-action[b-1lsfx6wjf8] {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--theme-strong, var(--theme-color));
    border-radius: 8px;
    background: #fff;
    color: var(--theme-strong, var(--theme-color));
    font-family: inherit;
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

    .cxt-action:hover[b-1lsfx6wjf8] {
        background: var(--theme-tint, #f1f5ee);
    }

@media (max-width: 640px) {
    .cxt-list[b-1lsfx6wjf8],
    .cxt-list.has-house[b-1lsfx6wjf8] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    /* Dům a host za sebou na prvním řádku (dlouhé jméno se zalomí pod štítek), detail pod nimi;
       tlačítko přes oba řádky vpravo. */
    .cxt-row[b-1lsfx6wjf8] {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px .75rem;
    }

    .cxt-who[b-1lsfx6wjf8] {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: .2rem .5rem;
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .cxt-detail[b-1lsfx6wjf8] {
        grid-column: 1;
        grid-row: 2;
    }

    .cxt-action[b-1lsfx6wjf8] {
        grid-column: 2;
        grid-row: 1 / 3;
    }
}

/* ── Rozbalená vratka ─────────────────────────────────────────────────────────── */

.cxt-panel[b-1lsfx6wjf8] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 14px;
    padding: 16px 18px;
    border: 1px solid #e3e3e0;
    border-radius: 12px;
    background: #fff;
}

/* QR vlevo, údaje převodu vedle něj; na úzkém telefonu pod sebou. */
.cxt-transfer[b-1lsfx6wjf8] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
}

.cxt-qr[b-1lsfx6wjf8] {
    flex: none;
    width: 148px;
    height: 148px;
    padding: 6px;
    border: 1px solid #e3e3e0;
    border-radius: 10px;
    background: #fff;
    image-rendering: pixelated;
}

/* Karta storen jde na přehledu přes celou šířku, takže údaje převodu stojí vedle sebe; na telefonu
   se srovnají pod sebe samy. */
.cxt-fields[b-1lsfx6wjf8] {
    flex: 1 1 200px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, max-content));
    align-content: start;
    gap: 8px 2.5rem;
    margin: 0;
    min-width: 0;
}

    .cxt-fields > div[b-1lsfx6wjf8] {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .cxt-fields dt[b-1lsfx6wjf8] {
        font-size: .72rem;
        font-weight: 500;
        letter-spacing: .02em;
        color: #8a8983;
    }

    .cxt-fields dd[b-1lsfx6wjf8] {
        margin: 0;
        font-size: .92rem;
        color: #2c2c2a;
        overflow-wrap: anywhere;
    }

        /* Údaje, které se opisují do banky, se vyberou jedním klikem. */
        .cxt-fields dd.is-copy[b-1lsfx6wjf8] {
            user-select: all;
            font-variant-numeric: tabular-nums;
        }

        .cxt-fields dd.is-amount[b-1lsfx6wjf8] {
            font-size: 1.05rem;
            font-weight: 700;
        }

.cxt-note[b-1lsfx6wjf8] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: .8rem;
    line-height: 1.4;
    color: #6f6e6a;
}

    .cxt-note i[b-1lsfx6wjf8] {
        margin-top: 1px;
    }

.cxt-result[b-1lsfx6wjf8] {
    margin: 0;
    font-size: .8rem;
}

    .cxt-result.is-error[b-1lsfx6wjf8] {
        color: #b4412f;
    }

.cxt-actions[b-1lsfx6wjf8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cxt-link[b-1lsfx6wjf8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: var(--theme-strong, var(--theme-color));
    text-decoration: none;
}

    .cxt-link:hover[b-1lsfx6wjf8] {
        text-decoration: underline;
    }

.cxt-primary[b-1lsfx6wjf8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    background: var(--theme-color);
    color: #fff;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

    .cxt-primary:hover[b-1lsfx6wjf8] {
        background: var(--theme-strong, var(--theme-color));
    }

    .cxt-primary:disabled[b-1lsfx6wjf8] {
        opacity: .6;
        cursor: default;
    }

.cxt-more[b-1lsfx6wjf8] {
    margin: 8px 0 0;
    font-size: .8rem;
    color: #6f6e6a;
}
/* /Pages/Administration/Finance/Components/ChannelFeeInvoiceForm.razor.rz.scp.css */
/* Formulář dokladu o provizi kanálu. Scoped: kreslí se uvnitř cizí karty (fronta na přehledu,
   karta rezervace, stránka DPH), která si drží vlastní rámeček — tady jsou jen pole. */
.cff-loading[b-ukq90hlwju] {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

.cff[b-ukq90hlwju] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}

.cff-head h3[b-ukq90hlwju] {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
}

.cff-head p[b-ukq90hlwju] {
    margin: 2px 0 0;
    font-size: .82rem;
    color: #6f6e6a;
}

/* ── Soubor ── */
.cff-upload[b-ukq90hlwju] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 12px 14px;
    border: 1px dashed #d6d4cc;
    border-radius: 12px;
    background: #faf9f6;
}

.cff-upload-btn[b-ukq90hlwju] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--theme-color);
    color: #fff;
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
    overflow: hidden;
}

    .cff-upload-btn:hover:not(.is-disabled)[b-ukq90hlwju] {
        background: var(--theme-strong);
    }

    .cff-upload-btn.is-disabled[b-ukq90hlwju] {
        opacity: .55;
        cursor: default;
    }

    /* InputFile přes celé tlačítko, neviditelně — klik kamkoli na tlačítko otevře výběr souboru. */
    .cff-upload-btn[b-ukq90hlwju]  input[type="file"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

.cff-file[b-ukq90hlwju] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .86rem;
    color: #2c2c2a;
    word-break: break-all;
}

a.cff-file[b-ukq90hlwju] {
    color: var(--theme-strong, var(--theme-color));
}

.cff-link[b-ukq90hlwju] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: none;
    color: var(--theme-strong, var(--theme-color));
    font-family: inherit;
    font-size: .86rem;
    cursor: pointer;
}

.cff-hint[b-ukq90hlwju] {
    font-size: .76rem;
    color: #8a8983;
}

.cff-upload .cff-hint[b-ukq90hlwju] {
    flex-basis: 100%;
}

/* ── Pole ──
   auto-fill, ne pevné sloupce: formulář se kreslí do karty na přehledu (třetina šířky), do
   karty rezervace i přes celou stránku DPH, a počet sloupců se má řídit místem, které dostal. */
.cff-grid[b-ukq90hlwju] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px 16px;
    margin: 0;
    padding: 0;
    border: none;
    min-width: 0;
}

.cff-field[b-ukq90hlwju] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    margin: 0;
}

    .cff-field > span[b-ukq90hlwju] {
        font-size: .8rem;
        font-weight: 600;
        color: #4a4944;
    }

    .cff-field.is-wide[b-ukq90hlwju] {
        grid-column: 1 / -1;
    }

/* ── Hlášky ── */
.cff-warnings[b-ukq90hlwju],
.cff-errors[b-ukq90hlwju] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 10px 14px;
    list-style: none;
    border-radius: 10px;
    font-size: .86rem;
}

.cff-warnings[b-ukq90hlwju] {
    background: #fdf5e6;
    color: #8a5a12;
}

.cff-errors[b-ukq90hlwju] {
    background: #fceaea;
    color: #a32d2d;
}

    .cff-warnings li[b-ukq90hlwju],
    .cff-errors li[b-ukq90hlwju] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

.cff-note[b-ukq90hlwju] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: .86rem;
    color: #4a4944;
}

    .cff-note.is-locked[b-ukq90hlwju] {
        padding: 9px 14px;
        border-radius: 10px;
        background: #f1f0ec;
    }

/* ── Akce ── */
.cff-actions[b-ukq90hlwju] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.cff-submit[b-ukq90hlwju] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    border: none;
    border-radius: 8px;
    background: var(--theme-color);
    color: #fff;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
}

    .cff-submit:hover:not(:disabled)[b-ukq90hlwju] {
        background: var(--theme-strong);
    }

    .cff-submit:disabled[b-ukq90hlwju] {
        opacity: .55;
        cursor: default;
    }

.cff-cancel[b-ukq90hlwju] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid #e3e3e0;
    border-radius: 8px;
    background: #fff;
    color: #6f6e6a;
    font-family: inherit;
    font-size: .85rem;
    cursor: pointer;
}
/* /Pages/Administration/Finance/Components/ChannelFeeReservationPanel.razor.rz.scp.css */
/* Karta dokladů o provizi na rezervaci. Rámeček a sbalování (.res-card.res-fold) i proužek
   s výsledkem (.ci-flash) jsou globální z reservationEdit.css, tady je jen obsah. */
.cfr-loading[b-qu11i66p7v] {
    display: flex;
    justify-content: center;
    padding: 12px 0;
}

.cfr-empty[b-qu11i66p7v] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fdf5e6;
    color: #8a5a12;
    font-size: .88rem;
}

.cfr-list[b-qu11i66p7v] {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.cfr-item[b-qu11i66p7v] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px 0;
    border-bottom: 1px solid #efece2;
}

    .cfr-item.is-settled[b-qu11i66p7v] {
        color: #8a8983;
    }

.cfr-main[b-qu11i66p7v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 260px;
}

.cfr-number[b-qu11i66p7v] {
    font-weight: 600;
    font-size: .92rem;
    word-break: break-all;
}

.cfr-meta[b-qu11i66p7v] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: .82rem;
    color: #6f6e6a;
    font-variant-numeric: tabular-nums;
}

    .cfr-meta strong[b-qu11i66p7v] {
        color: #2c2c2a;
    }

.cfr-item.is-settled .cfr-meta strong[b-qu11i66p7v] {
    color: inherit;
}

.cfr-pill[b-qu11i66p7v] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}

    .cfr-pill.is-ok[b-qu11i66p7v] {
        background: var(--theme-tint, #eef6ec);
        color: var(--theme-strong, #3d6b33);
    }

    .cfr-pill.is-warn[b-qu11i66p7v] {
        background: #fdf0d9;
        color: #8a5a12;
    }

    .cfr-pill.is-wait[b-qu11i66p7v] {
        background: #eef1f6;
        color: #4a5a78;
    }

    .cfr-pill.is-settled[b-qu11i66p7v] {
        background: #f1f0ec;
        color: #6f6e6a;
    }

.cfr-actions[b-qu11i66p7v] {
    display: flex;
    gap: 4px;
}

.cfr-icon[b-qu11i66p7v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #4a4944;
    cursor: pointer;
    text-decoration: none;
}

    .cfr-icon:hover:not(:disabled)[b-qu11i66p7v] {
        background: #f1f0ec;
    }

    .cfr-icon.is-danger[b-qu11i66p7v] {
        color: #a32d2d;
    }

    .cfr-icon:disabled[b-qu11i66p7v] {
        opacity: .45;
        cursor: default;
    }

.cfr-form[b-qu11i66p7v] {
    padding: 16px 18px;
    border: 1px solid #e3e3e0;
    border-radius: 12px;
    background: #fff;
}

.cfr-add[b-qu11i66p7v] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.cfr-add-btn[b-qu11i66p7v] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--theme-strong, var(--theme-color));
    border-radius: 8px;
    background: #fff;
    color: var(--theme-strong, var(--theme-color));
    font-family: inherit;
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
}

.cfr-hint[b-qu11i66p7v] {
    font-size: .78rem;
    color: #6f6e6a;
}
/* /Pages/Administration/Finance/Components/ChannelFeeTaskList.razor.rz.scp.css */
/* Úkoly za chybějící doklady kanálů — řádek a pod ním rozbalený formulář. Rámeček dodává karta,
   která seznam kreslí (přehled, stránka DPH). */
/* Řádek je mřížka [texty] [akce] a sloupce sdílí celý seznam (subgrid): tlačítka všech řádků stojí
   v jednom sloupci vpravo, i na telefonu — texty jsou krátké (kód, host · datum), vedle se vejdou. */
.cft-list[b-qvu704jglo] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.cft-item[b-qvu704jglo] {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    border-bottom: 1px solid #f0efeb;
}

    .cft-item:last-child[b-qvu704jglo] {
        border-bottom: none;
    }

.cft-row[b-qvu704jglo] {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    padding: 10px 0;
}

.cft-text[b-qvu704jglo] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
}

.cft-title[b-qvu704jglo] {
    font-size: .95rem;
    font-weight: 700;
    color: #2c2c2a;
    overflow-wrap: anywhere;
}

    /* Kód rezervace jako odkaz do kanálu — vcelku, nikdy zalomený uprostřed. */
    .cft-title.is-link[b-qvu704jglo] {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        letter-spacing: .02em;
        white-space: nowrap;
        color: var(--theme-strong, var(--theme-color));
        text-decoration: none;
    }

        .cft-title.is-link:hover[b-qvu704jglo] {
            text-decoration: underline;
        }

        .cft-title.is-link i[b-qvu704jglo] {
            font-size: .7rem;
            opacity: .8;
        }

.cft-detail[b-qvu704jglo] {
    font-size: .78rem;
    color: #8a8983;
    overflow-wrap: anywhere;
}

.cft-action[b-qvu704jglo] {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--theme-strong, var(--theme-color));
    border-radius: 8px;
    background: #fff;
    color: var(--theme-strong, var(--theme-color));
    font-family: inherit;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

    .cft-action:hover[b-qvu704jglo] {
        background: var(--theme-tint, #f1f5ee);
    }

.cft-form[b-qvu704jglo] {
    grid-column: 1 / -1;
    margin: 0 0 14px;
    padding: 16px 18px;
    border: 1px solid #e3e3e0;
    border-radius: 12px;
    background: #fff;
}

.cft-more[b-qvu704jglo] {
    margin: 8px 0 0;
    font-size: .8rem;
    color: #6f6e6a;
}
/* /Pages/Administration/Finance/Components/PaymentMatchCandidateGrid.razor.rz.scp.css */
/* The invoice picker of the manual-match dialog — cell content only. The table, the header
   filters and the pager are global (reservationList.css), the column widths and the selected row
   too (paymentList.css): HxGrid renders its own markup, which this scope never reaches. The cells
   come from this component's templates, so the scope does reach them. */

/* ── Fit column: the radio mark, then why the row ranks where it does ── */
.pmc-fit[b-7kczou6u39] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.pmc-radio[b-7kczou6u39] {
    flex: none;
    font-size: 1rem;
    line-height: 1.2;
    color: #c9c7bf;
    transition: color .15s;
}

    .pmc-radio.bi-record-circle-fill[b-7kczou6u39] {
        color: var(--theme-strong, var(--theme-color));
    }

.pmc-flags[b-7kczou6u39] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.pmc-flag[b-7kczou6u39] {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--theme-tint, #eef6ec);
    color: var(--theme-strong, #3d6b33);
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

    /* The robot's own pick: the strongest reason there is, so the solid variant. */
    .pmc-flag.is-paired[b-7kczou6u39] {
        background: var(--theme-color);
        color: #fff;
    }

/* ── Number column: the number, then the type and an older document's own symbol ── */
.pmc-number[b-7kczou6u39] {
    display: block;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pmc-sub[b-7kczou6u39] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .74rem;
    color: #a3a29b;
}

/* The customer is the one unbounded value in the row; the fixed column width caps it. */
.pmc-ellipsis[b-7kczou6u39] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Pages/Administration/Finance/Components/StayChangeTaskList.razor.rz.scp.css */
/* Pobyty změněné po nacenění — řádek jako „Storna a vratky“ (CancellationTaskList.razor.css):
   [dům] [host] [co se změnilo] … [akce], sloupce drží jedna mřížka přes celý seznam (subgrid).
   Pod 640px se řádek zalomí: dům a host nahoře, pod nimi detail, tlačítko pořád vpravo. */
.stt-list[b-wragalfff3] {
    display: grid;
    grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr) auto;
    column-gap: .7rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

    .stt-list.has-house[b-wragalfff3] {
        grid-template-columns: max-content minmax(6rem, max-content) minmax(0, 1fr) auto;
    }

.stt-item[b-wragalfff3] {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0efeb;
}

    .stt-item:last-child[b-wragalfff3] {
        border-bottom: none;
    }

/* Na šířku jen obal pro telefon — dům a host jsou vlastní sloupce mřížky. */
.stt-who[b-wragalfff3] {
    display: contents;
}

.stt-title[b-wragalfff3] {
    font-size: .92rem;
    font-weight: 600;
    color: #2c2c2a;
    overflow-wrap: anywhere;
}

.stt-detail[b-wragalfff3] {
    font-size: .82rem;
    color: #6a6a6a;
    font-variant-numeric: tabular-nums;
}

.stt-house[b-wragalfff3] {
    justify-self: start;
    padding: .05rem .45rem;
    font-size: .72rem;
    font-weight: 400;
    white-space: nowrap;
    color: var(--theme-strong, var(--theme-color, #4a4a48));
    background: var(--theme-tint, #f2f2f0);
    border-radius: 1rem;
}

.stt-action[b-wragalfff3] {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--theme-strong, var(--theme-color));
    border-radius: 8px;
    background: #fff;
    color: var(--theme-strong, var(--theme-color));
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

    .stt-action:hover[b-wragalfff3] {
        background: var(--theme-tint, #f1f5ee);
    }

.stt-more[b-wragalfff3] {
    margin: 8px 0 0;
    font-size: .8rem;
    color: #6f6e6a;
}

@media (max-width: 640px) {
    .stt-list[b-wragalfff3],
    .stt-list.has-house[b-wragalfff3] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .stt-item[b-wragalfff3] {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px .75rem;
    }

    .stt-who[b-wragalfff3] {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: .2rem .5rem;
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .stt-detail[b-wragalfff3] {
        grid-column: 1;
        grid-row: 2;
    }

    .stt-action[b-wragalfff3] {
        grid-column: 2;
        grid-row: 1 / 3;
    }
}
/* /Pages/Administration/Finance/CurrencyCatalogEdit.razor.rz.scp.css */
/* Currency catalogue — the sibling of the exchange-rate page (.cr-*) and styled to match it:
   the "minimal canvas" treatment, hairline white cards, brand accent only through the shared
   theme tokens (--theme-color / -strong / -tint). One card per currency, one inline editor. */

.cc-page[b-3e2xlsfmpd] {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
    box-sizing: border-box;
    text-align: left;
    color: #2c2c2a;
}

/* ── Toolbar: heading centred against the page, link to the rates on the right ── */
.cc-toolbar[b-3e2xlsfmpd] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 1rem;
    margin: 2rem 0 1.25rem;
}

.cc-toolbar .section-head[b-3e2xlsfmpd] {
    grid-column: 2;
    margin-bottom: 0;
}

.cc-toolbar .cc-back[b-3e2xlsfmpd] {
    grid-column: 3;
    justify-self: end;
    padding: .6rem 1.15rem;
    font-size: .9rem;
}

/* ── Explanation strip ── */
.cc-info[b-3e2xlsfmpd] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 1.5rem;
    background: var(--theme-tint, #f1f5ee);
    border: 1px solid color-mix(in srgb, var(--theme-strong, #3d6b33) 18%, transparent);
    border-radius: 12px;
}

    .cc-info .bi[b-3e2xlsfmpd] {
        flex: none;
        margin-top: 1px;
        font-size: 1.05rem;
        color: var(--theme-strong, var(--theme-color));
    }

    .cc-info p[b-3e2xlsfmpd] {
        margin: 0;
        font-size: .87rem;
        line-height: 1.6;
        color: #4b4a46;
    }

/* ── Cards ── */
.cc-grid[b-3e2xlsfmpd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 1.5rem;
}

.cc-card[b-3e2xlsfmpd] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px 16px;
    background: #fff;
    border: 1px solid #e3e3e0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

    .cc-card.is-base[b-3e2xlsfmpd] {
        background: #faf9f6;
    }

    /* Retired currency — dimmed, but still legible: old invoices are still issued in it. */
    .cc-card.is-off[b-3e2xlsfmpd] {
        background: #fbfbfa;
        border-style: dashed;
        color: #6f6e6a;
    }

.cc-card-head[b-3e2xlsfmpd] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cc-symbol[b-3e2xlsfmpd] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--theme-tint, #f1f5ee);
    color: var(--theme-strong, var(--theme-color));
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
}

.cc-ident[b-3e2xlsfmpd] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.cc-code[b-3e2xlsfmpd] {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.cc-name[b-3e2xlsfmpd] {
    font-size: .78rem;
    color: #6f6e6a;
}

.cc-flag[b-3e2xlsfmpd] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
    background: #eceae3;
    color: #6f6e6a;
}

    .cc-flag .bi[b-3e2xlsfmpd] {
        font-size: .7rem;
    }

/* ── Card metadata ── */
.cc-meta[b-3e2xlsfmpd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    background: #faf9f6;
    border-radius: 10px;
}

    .cc-meta dt[b-3e2xlsfmpd] {
        margin: 0 0 2px;
        font-size: .7rem;
        font-weight: 500;
        color: #a3a29b;
    }

    .cc-meta dd[b-3e2xlsfmpd] {
        margin: 0;
        font-size: .85rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: #2c2c2a;
    }

.cc-card-foot[b-3e2xlsfmpd] {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f0efeb;
}

/* ── Buttons ── */
.cc-btn[b-3e2xlsfmpd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #e3e3e0;
    border-radius: 8px;
    background: #fff;
    color: #6f6e6a;
    font-family: inherit;
    font-size: .82rem;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

    .cc-btn:hover:not(:disabled)[b-3e2xlsfmpd] {
        border-color: #c9c7bf;
        color: #2c2c2a;
    }

    .cc-btn.is-danger:hover:not(:disabled)[b-3e2xlsfmpd] {
        border-color: #d98b8b;
        color: #a32d2d;
    }

    .cc-btn:disabled[b-3e2xlsfmpd] {
        opacity: .45;
        cursor: default;
    }

.cc-submit[b-3e2xlsfmpd] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    border: none;
    border-radius: 8px;
    background: var(--theme-color);
    color: #fff;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    transition: filter .15s;
}

    .cc-submit:hover:not(:disabled)[b-3e2xlsfmpd] {
        filter: brightness(0.9);
    }

    .cc-submit:disabled[b-3e2xlsfmpd] {
        opacity: .55;
        cursor: default;
    }

.cc-cancel[b-3e2xlsfmpd] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid #e3e3e0;
    border-radius: 8px;
    background: #fff;
    color: #6f6e6a;
    font-family: inherit;
    font-size: .85rem;
    cursor: pointer;
}

    .cc-cancel:hover:not(:disabled)[b-3e2xlsfmpd] {
        border-color: #c9c7bf;
        color: #2c2c2a;
    }

/* ── Inline editor ── */
.cc-editor[b-3e2xlsfmpd] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #e3e3e0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.cc-editor-head[b-3e2xlsfmpd] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

    .cc-editor-head .bi[b-3e2xlsfmpd] {
        margin-top: 3px;
        font-size: 1.15rem;
        color: var(--theme-strong, var(--theme-color));
    }

    .cc-editor-head h2[b-3e2xlsfmpd] {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 600;
    }

    .cc-editor-head p[b-3e2xlsfmpd] {
        margin: 2px 0 0;
        font-size: .84rem;
        color: #6f6e6a;
    }

.cc-form-grid[b-3e2xlsfmpd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 16px;
}

.cc-langs h3[b-3e2xlsfmpd] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: .95rem;
    font-weight: 600;
}

    .cc-langs h3 .bi[b-3e2xlsfmpd] {
        color: var(--theme-strong, var(--theme-color));
    }

.cc-langs .cc-form-grid[b-3e2xlsfmpd] {
    margin-bottom: 12px;
}

.cc-check[b-3e2xlsfmpd] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .88rem;
    cursor: pointer;
}

    .cc-check input[b-3e2xlsfmpd] {
        margin-top: 3px;
    }

    .cc-check small[b-3e2xlsfmpd] {
        display: block;
        font-size: .78rem;
        color: #6f6e6a;
    }

.cc-errors[b-3e2xlsfmpd] {
    margin: 0;
    padding: 10px 14px;
    list-style: none;
    background: #fceaea;
    border-radius: 10px;
    font-size: .82rem;
    color: #a32d2d;
}

    .cc-errors li[b-3e2xlsfmpd] {
        display: flex;
        align-items: center;
        gap: 7px;
    }

/* ── Action row and result messages ── */
.cc-actions[b-3e2xlsfmpd] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cc-result[b-3e2xlsfmpd] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: .83rem;
}

    .cc-result.is-ok[b-3e2xlsfmpd] {
        background: var(--theme-tint, #eef6ec);
        color: var(--theme-strong, #3d6b33);
        border-color: color-mix(in srgb, var(--theme-strong, #3d6b33) 25%, transparent);
    }

    .cc-result.is-error[b-3e2xlsfmpd] {
        background: #fceaea;
        color: #a32d2d;
        border-color: #eecccc;
    }

/* ── Loading state ── */
.cc-empty[b-3e2xlsfmpd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 3rem 1.5rem;
    background: #fff;
    border: 1px solid #e3e3e0;
    border-radius: 14px;
    color: #6f6e6a;
    text-align: center;
}

    .cc-empty p[b-3e2xlsfmpd] {
        margin: 0;
        font-size: .9rem;
    }

/* Too narrow for a heading with a button beside it — stack them, both centred. */
@media (max-width: 576px) {

    .cc-toolbar[b-3e2xlsfmpd] {
        grid-template-columns: 1fr;
    }

    .cc-toolbar .section-head[b-3e2xlsfmpd],
    .cc-toolbar .cc-back[b-3e2xlsfmpd] {
        grid-column: 1;
        justify-self: center;
    }
}
/* /Pages/Administration/Finance/CurrencyRateEdit.razor.rz.scp.css */
/* Currency-rate administration — the same "minimal canvas" treatment as the brand-theme,
   gallery and accommodation-settings pages: no coloured panel, hairline white cards, and the
   brand accent supplied only by the shared theme tokens (--theme-color / -strong / -tint).

   One card per currency. The base currency (CZK) is locked: its rate is 1 by definition, so it
   renders as a read-only tile instead of an input. */

.cr-page[b-oifvhkjem1] {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
    box-sizing: border-box;
    text-align: left;
    color: #2c2c2a;
}

/* ── Toolbar: page heading centred, "back to price lists" on the right ──
   Three columns with equal 1fr flanks: the (centre-aligned) heading sits in the middle
   one, so it is centred against the page itself rather than against the space left over
   by the back button — a plain space-between row pushed it visibly off-centre. */
.cr-toolbar[b-oifvhkjem1] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 1rem;
    margin: 2rem 0 1.25rem;
}

.cr-toolbar .section-head[b-oifvhkjem1] {
    grid-column: 2;
    margin-bottom: 0;
}

.cr-toolbar .cr-back[b-oifvhkjem1] {
    grid-column: 3;
    justify-self: end;
}

.cr-back[b-oifvhkjem1] {
    padding: .6rem 1.15rem;
    font-size: .9rem;
}

/* ── Explanation strip ── */
.cr-info[b-oifvhkjem1] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 1.5rem;
    background: var(--theme-tint, #f1f5ee);
    border: 1px solid color-mix(in srgb, var(--theme-strong, #3d6b33) 18%, transparent);
    border-radius: 12px;
}

    .cr-info .bi[b-oifvhkjem1] {
        flex: none;
        margin-top: 1px;
        font-size: 1.05rem;
        color: var(--theme-strong, var(--theme-color));
    }

    .cr-info p[b-oifvhkjem1] {
        margin: 0;
        font-size: .87rem;
        line-height: 1.6;
        color: #4b4a46;
    }

/* ── Cards ── */
.cr-grid[b-oifvhkjem1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 16px;
    margin-bottom: 1.5rem;
}

.cr-card[b-oifvhkjem1] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px 16px;
    background: #fff;
    border: 1px solid #e3e3e0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: border-color .15s, box-shadow .15s;
}

    /* Unsaved edit — a brand-coloured ring, so a changed card is obvious before saving. */
    .cr-card.is-dirty[b-oifvhkjem1] {
        border-color: var(--theme-color, #c9c7bf);
        box-shadow: 0 0 0 2px var(--theme-tint, #eef6ec);
    }

    .cr-card.is-invalid[b-oifvhkjem1] {
        border-color: #d98b8b;
        box-shadow: 0 0 0 2px #fceaea;
    }

    .cr-card.is-base[b-oifvhkjem1] {
        background: #faf9f6;
    }

/* ── Card header: symbol medallion + ISO code + name ── */
.cr-card-head[b-oifvhkjem1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cr-symbol[b-oifvhkjem1] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--theme-tint, #f1f5ee);
    color: var(--theme-strong, var(--theme-color));
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
}

.cr-ident[b-oifvhkjem1] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.cr-code[b-oifvhkjem1] {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.cr-name[b-oifvhkjem1] {
    font-size: .78rem;
    color: #6f6e6a;
}

.cr-flag[b-oifvhkjem1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

    .cr-flag.is-base[b-oifvhkjem1] {
        background: #eceae3;
        color: #6f6e6a;
    }

    .cr-flag.is-dirty[b-oifvhkjem1] {
        background: var(--theme-tint, #eef6ec);
        color: var(--theme-strong, var(--theme-color));
    }

    .cr-flag .bi[b-oifvhkjem1] {
        font-size: .7rem;
    }

/* ── Rate field ── */
.cr-field[b-oifvhkjem1] {
    display: block;
}

.cr-field-label[b-oifvhkjem1] {
    display: block;
    margin-bottom: 5px;
    font-size: .8rem;
    color: #6f6e6a;
}

.cr-input[b-oifvhkjem1] {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #d3d1c7;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

    /* ::deep is required — InputNumber is a child component, so the scope attribute never
       lands on the <input> it renders. */
    .cr-input[b-oifvhkjem1]  input {
        flex: 1;
        min-width: 0;
        padding: 10px 12px;
        border: none;
        outline: none;
        background: transparent;
        font-family: inherit;
        font-size: 1.15rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: #2c2c2a;
    }

    /* The stepper arrows fight the tabular alignment and are useless for an fx rate. */
    .cr-input[b-oifvhkjem1]  input::-webkit-outer-spin-button,
    .cr-input[b-oifvhkjem1]  input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .cr-input[b-oifvhkjem1]  input[type=number] {
        -moz-appearance: textfield;
        appearance: textfield;
    }

    .cr-input:focus-within[b-oifvhkjem1] {
        border-color: var(--theme-strong, var(--theme-color));
        box-shadow: 0 0 0 2px var(--theme-tint, #eef6ec);
    }

.cr-suffix[b-oifvhkjem1] {
    display: flex;
    align-items: center;
    padding: 0 13px;
    background: #f6f5f1;
    border-left: 1px solid #eceae3;
    font-size: .88rem;
    font-weight: 600;
    color: #6f6e6a;
}

/* ── Live conversion preview ── */
.cr-equation[b-oifvhkjem1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: #faf9f6;
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
}

    .cr-equation.is-base[b-oifvhkjem1] {
        flex-direction: row;
        align-items: baseline;
        gap: 7px;
    }

.cr-eq-line[b-oifvhkjem1] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
}

.cr-eq-amount[b-oifvhkjem1] {
    font-size: .87rem;
    color: #6f6e6a;
}

    .cr-eq-amount.is-strong[b-oifvhkjem1] {
        font-weight: 600;
        color: #2c2c2a;
    }

.cr-eq-sign[b-oifvhkjem1] {
    font-size: .87rem;
    color: #a3a29b;
}

.cr-base-hint[b-oifvhkjem1] {
    margin: 0;
    font-size: .82rem;
    line-height: 1.55;
    color: #6f6e6a;
}

.cr-error[b-oifvhkjem1] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 9px 12px;
    background: #fceaea;
    border-radius: 10px;
    font-size: .8rem;
    color: #a32d2d;
}

/* ── Card footer ── */
.cr-card-foot[b-oifvhkjem1] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f0efeb;
    font-size: .74rem;
    color: #a3a29b;
}

    .cr-card-foot .bi[b-oifvhkjem1] {
        font-size: .78rem;
    }

/* ── Save row ── */
.cr-actions[b-oifvhkjem1] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cr-submit[b-oifvhkjem1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    border: none;
    border-radius: 8px;
    background: var(--theme-color);
    color: #fff;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    transition: filter .15s;
}

    .cr-submit:hover:not(:disabled)[b-oifvhkjem1] {
        filter: brightness(0.9);
    }

    .cr-submit:disabled[b-oifvhkjem1] {
        opacity: .55;
        cursor: default;
    }

.cr-revert[b-oifvhkjem1] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid #e3e3e0;
    border-radius: 8px;
    background: #fff;
    color: #6f6e6a;
    font-family: inherit;
    font-size: .85rem;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

    .cr-revert:hover:not(:disabled)[b-oifvhkjem1] {
        border-color: #c9c7bf;
        color: #2c2c2a;
    }

    .cr-revert:disabled[b-oifvhkjem1] {
        opacity: .5;
        cursor: default;
    }

/* ── Inline result messages — quieter than a full-width bootstrap alert ── */
.cr-result[b-oifvhkjem1] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: .83rem;
}

    .cr-result.is-pending[b-oifvhkjem1] {
        background: #faf9f6;
        border-color: #e3e3e0;
        color: #6f6e6a;
    }

    .cr-result.is-ok[b-oifvhkjem1] {
        background: var(--theme-tint, #eef6ec);
        color: var(--theme-strong, #3d6b33);
        border-color: color-mix(in srgb, var(--theme-strong, #3d6b33) 25%, transparent);
    }

    .cr-result.is-error[b-oifvhkjem1] {
        background: #fceaea;
        color: #a32d2d;
        border-color: #eecccc;
    }

/* ── Loading / empty state ── */
.cr-empty[b-oifvhkjem1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 3rem 1.5rem;
    background: #fff;
    border: 1px solid #e3e3e0;
    border-radius: 14px;
    color: #6f6e6a;
    text-align: center;
}

    .cr-empty .bi[b-oifvhkjem1] {
        font-size: 1.6rem;
        color: #c9c7bf;
    }

    .cr-empty p[b-oifvhkjem1] {
        margin: 0;
        font-size: .9rem;
    }

/* Too narrow for a heading with a button beside it — stack them, both centred. */
@media (max-width: 576px) {

    .cr-toolbar[b-oifvhkjem1] {
        grid-template-columns: 1fr;
    }

    .cr-toolbar .section-head[b-oifvhkjem1],
    .cr-toolbar .cr-back[b-oifvhkjem1] {
        grid-column: 1;
        justify-self: center;
    }
}
/* /Pages/Administration/Finance/PaymentList.razor.rz.scp.css */
/* Incoming payments — the page around the grid: heading row, result line, cell content and the
   inline match dialog. The grid itself (table, header filters, row tints, column widths) is
   global — HxGrid renders its own markup, which this scope never reaches; see
   Styles/Pages/Components/reservationList.css and paymentList.css. */

/* ── Toolbar ── */
.pl-toolbar[b-pyucom68xy] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 1rem;
    margin-top: 2rem;
}

.pl-toolbar .section-head[b-pyucom68xy] {
    grid-column: 2;
    margin-bottom: 0;
}

/* ── Cell content ──
   The cells come from this component's templates, so the scope does reach them. The table is
   laid out with fixed widths, so a long name or message ellipsizes instead of widening its
   column. */
.pl-main[b-pyucom68xy],
.pl-sub[b-pyucom68xy] {
    display: block;
    /* Inside the status cell's flex stack a nowrap line would otherwise size to its whole text. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-sub[b-pyucom68xy] {
    font-size: .74rem;
    color: #a3a29b;
}

/* ── Result line ── */
.pl-result[b-pyucom68xy] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 1.25rem 0 0;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: .87rem;
    text-align: left;
}

    .pl-result.is-ok[b-pyucom68xy] {
        background: var(--theme-tint, #eef6ec);
        color: var(--theme-strong, #3d6b33);
    }

    .pl-result.is-error[b-pyucom68xy] {
        background: #fceaea;
        color: #a32d2d;
    }

/* ── Manual-match dialog ── */
.pl-dialog[b-pyucom68xy] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 0 3rem;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #e3e3e0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    text-align: left;
    color: #2c2c2a;
    scroll-margin-top: 1rem;
}

.pl-dialog-head[b-pyucom68xy] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

    .pl-dialog-head .bi[b-pyucom68xy] {
        margin-top: 3px;
        font-size: 1.2rem;
        color: var(--theme-strong, var(--theme-color));
    }

    .pl-dialog-head h2[b-pyucom68xy] {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 600;
    }

    .pl-dialog-head p[b-pyucom68xy] {
        margin: 2px 0 0;
        font-size: .86rem;
        color: #6f6e6a;
    }

    .pl-dialog-head > div[b-pyucom68xy] {
        min-width: 0;
    }

/* The payer's own words — one line, the rest in the tooltip. */
.pl-dialog-head .pl-dialog-message[b-pyucom68xy] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
    color: #8a8983;
}

.pl-dialog-actions[b-pyucom68xy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* What the button is about to settle, beside it. */
.pl-selection[b-pyucom68xy] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 0 auto;
    font-size: .86rem;
    color: #2c2c2a;
}

    .pl-selection .pl-sub[b-pyucom68xy] {
        display: inline;
        font-size: .86rem;
    }

.pl-selection-label[b-pyucom68xy] {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6f6e6a;
}

.pl-selection-hint[b-pyucom68xy] {
    color: #a3a29b;
}

.pl-submit[b-pyucom68xy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    border: none;
    border-radius: 8px;
    background: var(--theme-color);
    color: #fff;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    transition: filter .15s;
}

    .pl-submit:hover:not(:disabled)[b-pyucom68xy] {
        filter: brightness(0.9);
    }

    .pl-submit:disabled[b-pyucom68xy] {
        opacity: .55;
        cursor: default;
    }

.pl-cancel[b-pyucom68xy] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid #e3e3e0;
    border-radius: 8px;
    background: #fff;
    color: #6f6e6a;
    font-family: inherit;
    font-size: .85rem;
    cursor: pointer;
}

    .pl-cancel:hover:not(:disabled)[b-pyucom68xy] {
        border-color: #c9c7bf;
        color: #2c2c2a;
    }

/* ── Narrow screens: the heading gets the full width ── */
@media (max-width: 960px) {

    .pl-toolbar[b-pyucom68xy] {
        grid-template-columns: 1fr;
    }

    .pl-toolbar .section-head[b-pyucom68xy] {
        grid-column: 1;
        justify-self: center;
    }
}

/* ── Telefon: dialog párování ──
   Kandidáti jsou na telefonu samostatné karty (paymentList.css), takže bílá karta dialogu kolem nich
   by je jen orámovala podruhé a ubrala šířku — dialog zůstane bez rámečku a souhrn platby dostane
   vlastní tónovaný box. Karty se s platbou porovnávají (co sedí, svítí zeleně), proto se souhrn
   při posouvání drží pod hlavičkou webu, utažený: nadpis jako malý štítek, platba a zpráva každá
   na jeden řádek. Potvrzení bylo pod osmi kartami a stránkováním mimo obrazovku; lišta s výběrem
   a tlačítky se proto drží dole na obrazovce, dokud je dialog vidět. */
@media (max-width: 700px) {

    .pl-dialog[b-pyucom68xy] {
        gap: 12px;
        margin: 0 0 2rem;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* --site-header-height publikuje site.js podle skutečné výšky lepivé hlavičky. */
    .pl-dialog-head[b-pyucom68xy] {
        position: sticky;
        top: var(--site-header-height, 0px);
        z-index: 6;
        padding: 10px 14px 10px 12px;
        background: var(--theme-tint, #eef6ec);
        border-radius: 14px;
        box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .18);
    }

        .pl-dialog-head h2[b-pyucom68xy] {
            font-size: .68rem;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: var(--theme-strong, var(--theme-color));
        }

        .pl-dialog-head p[b-pyucom68xy] {
            margin-top: 1px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: .84rem;
            color: #2c2c2a;
        }

            .pl-dialog-head p strong[b-pyucom68xy] {
                font-size: .95rem;
            }

    .pl-dialog-head .pl-dialog-message[b-pyucom68xy] {
        font-size: .78rem;
        color: #8a8983;
    }

    /* Záporný okraj = boční odsazení .rl-page: lišta jde přes celou šířku displeje. */
    .pl-dialog-actions[b-pyucom68xy] {
        position: sticky;
        bottom: 0;
        z-index: 5;
        gap: 8px;
        margin: 0 -1rem;
        padding: 10px 1rem 12px;
        background: #fff;
        border-top: 1px solid #e6e4dc;
        box-shadow: 0 -6px 16px rgba(0, 0, 0, .06);
    }

    /* Výběr nad tlačítky na jeden řádek; co se nevejde, je zákazník — ten se zkrátí. U výplaty je
       tučně jméno hosta (u faktury číslo), tak se zkracuje i to; termín zůstane celý. */
    .pl-selection[b-pyucom68xy] {
        order: -1;
        flex-basis: 100%;
        flex-wrap: nowrap;
        gap: 5px;
        min-width: 0;
        margin: 0;
        font-size: .84rem;
        white-space: nowrap;
    }

        .pl-selection strong[b-pyucom68xy],
        .pl-selection .pl-sub[b-pyucom68xy] {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: .84rem;
        }

        /* Šedý doplněk (zákazník, objekt) ustoupí první, tučné až po něm. */
        .pl-selection .pl-sub[b-pyucom68xy] {
            flex-shrink: 100;
        }

    .pl-submit[b-pyucom68xy] {
        flex: 1;
        justify-content: center;
        padding: 11px 12px;
    }

    .pl-cancel[b-pyucom68xy] {
        padding: 10px 16px;
    }
}
/* /Pages/Administration/Finance/PriceCalendar.razor.rz.scp.css */
/* Price calendar — the same "minimal canvas" treatment as the rest of the price administration:
   hairline white cards, brand accent only from the shared theme tokens
   (--theme-color / -strong / -tint).

   The grid carries two independent readings at once. The colour of a cell says what kind of night
   it is — a plain weekday, a weekend night, or a holiday — because those are the three groups the
   admin prices differently. The hatching says the day has no price yet. Selection sits on top of
   both in blue. */

.pc-page[b-33ewpmmvnn] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
    box-sizing: border-box;
    text-align: left;
    color: #2c2c2a;

    /* Holidays get a hue of their own rather than a brand one: both accommodations' themes are
       warm earth tones, and the weekend cells already use them. Plum is far enough from both,
       from the blue of a selection and from the amber of the warning strip. */
    --pc-holiday-bg: #f4eef9;
    --pc-holiday-border: #cdb8dd;
    --pc-holiday-ink: #5c3d76;
}

/* ── Header ── */
.pc-toolbar[b-33ewpmmvnn] {
    margin: 2rem 0 1.25rem;
}

.pc-toolbar .section-head[b-33ewpmmvnn] {
    margin-bottom: 0;
}

/* ── Accommodation picker ── */
/* Each button carries its own data-theme, so the dot and the active pill are coloured by the
   accommodation they switch to — the picker itself is the legend for the calendar's colour. */
.pc-objects[b-33ewpmmvnn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.pc-objects-label[b-33ewpmmvnn] {
    font-size: .85rem;
    color: #6b6a66;
    margin-right: .25rem;
}

.pc-object[b-33ewpmmvnn] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem 1rem;
    background: #fff;
    border: 1px solid #d8d4cc;
    border-radius: 999px;
    font: inherit;
    font-size: .9rem;
    color: #2c2c2a;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}

.pc-object:hover:not(:disabled)[b-33ewpmmvnn] {
    border-color: var(--theme-strong, #3d6b33);
}

.pc-object:disabled[b-33ewpmmvnn] {
    opacity: .55;
    cursor: default;
}

.pc-object-dot[b-33ewpmmvnn] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--theme-color, #3d6b33);
}

.pc-object.is-current[b-33ewpmmvnn] {
    background: var(--theme-tint, #f4f2ee);
    border-color: var(--theme-strong, #3d6b33);
    box-shadow: inset 0 0 0 1px var(--theme-strong, #3d6b33);
    font-weight: 600;
}

/* ── Action bars ── */
.pc-bar[b-33ewpmmvnn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #e6e3dd;
    border-radius: 14px;
    margin-bottom: .75rem;
}

/* The selection and the price that goes onto it. A tinted bar under the year here; pinned to the
   bottom of the screen on a phone (the phone block at the end of the file). */
.pc-dock[b-33ewpmmvnn] {
    padding: 12px 18px;
    background: var(--theme-tint, #f4f2ee);
    border: 1px solid color-mix(in srgb, var(--theme-strong, #3d6b33) 16%, transparent);
    border-radius: 14px;
    margin-bottom: .75rem;
}

.pc-dock-row[b-33ewpmmvnn] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1.5rem;
}

.pc-dock-row .pc-selection[b-33ewpmmvnn] {
    align-self: center;
}

/* On the tint of the dock the green "saved" strip would vanish into it. */
.pc-dock .pc-result[b-33ewpmmvnn] {
    margin-bottom: .6rem;
    background: #fff;
}

.pc-years[b-33ewpmmvnn] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.pc-year[b-33ewpmmvnn] {
    min-width: 4ch;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 600;
}

.pc-quick[b-33ewpmmvnn],
.pc-apply[b-33ewpmmvnn] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: .5rem;
}

.pc-quick-label[b-33ewpmmvnn] {
    align-self: center;
    font-size: .85rem;
    color: #6b6a66;
}

.pc-price[b-33ewpmmvnn] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.pc-price label[b-33ewpmmvnn] {
    font-size: .8rem;
    color: #6b6a66;
}

/* The <input> comes from InputNumber, and elements produced by a child component never get this
   component's scope attribute — so it has to be reached through ::deep. */
.pc-price[b-33ewpmmvnn]  input {
    width: 7.5rem;
    padding: .42rem .6rem;
    border: 1px solid #d8d4cc;
    border-radius: 8px;
    font-size: .9rem;
    font-family: inherit;
    background: #fff;
    color: inherit;
}

.pc-price[b-33ewpmmvnn]  input:focus {
    outline: none;
    border-color: var(--theme-strong, #3d6b33);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-strong, #3d6b33) 16%, transparent);
}

.pc-selection[b-33ewpmmvnn] {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .9rem;
}

.pc-count[b-33ewpmmvnn] {
    font-weight: 600;
}

.pc-hint[b-33ewpmmvnn] {
    color: #6b6a66;
}

/* ── Buttons ── */
.pc-btn[b-33ewpmmvnn] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    background: #fff;
    border: 1px solid #d8d4cc;
    border-radius: 8px;
    font-size: .9rem;
    color: #2c2c2a;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.pc-btn:hover:not(:disabled)[b-33ewpmmvnn] {
    border-color: var(--theme-strong, #3d6b33);
    background: var(--theme-tint, #f1f5ee);
}

.pc-btn:disabled[b-33ewpmmvnn] {
    opacity: .55;
    cursor: default;
}

.pc-btn.is-primary[b-33ewpmmvnn] {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: #fff;
}

.pc-btn.is-primary:hover:not(:disabled)[b-33ewpmmvnn] {
    background: var(--theme-strong);
    border-color: var(--theme-strong);
}

.pc-btn.is-icon[b-33ewpmmvnn] {
    padding: .4rem .6rem;
}

.pc-link[b-33ewpmmvnn] {
    padding: 0;
    background: none;
    border: 0;
    color: var(--theme-strong, #3d6b33);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Result, summary + legend ── */
.pc-result[b-33ewpmmvnn],
.pc-summary[b-33ewpmmvnn] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: .75rem;
    font-size: .9rem;
}

.pc-result.is-ok[b-33ewpmmvnn] {
    background: #edf6ec;
    color: #2f5d29;
}

.pc-result.is-error[b-33ewpmmvnn] {
    background: #fbeceb;
    color: #8c2f26;
}

/* Unpriced nights are not an error — they are work left to do, and the calculation says the same
   thing on the reservation. Amber, not red. */
.pc-summary.is-warning[b-33ewpmmvnn] {
    background: #fdf3dd;
    color: #7a5a16;
}

.pc-legend[b-33ewpmmvnn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.25rem;
    font-size: .82rem;
}

.pc-legend-label[b-33ewpmmvnn] {
    color: #6b6a66;
}

.pc-chip[b-33ewpmmvnn] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border: 1px solid #e6e3dd;
    border-radius: 999px;
}

.pc-chip[b-33ewpmmvnn]::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 3px;
    border: 1px solid #d8d4cc;
}

.pc-chip.is-weekday[b-33ewpmmvnn]::before {
    background: #fff;
}

.pc-chip.is-weekend[b-33ewpmmvnn]::before {
    background: var(--theme-tint, #f4f2ee);
    border-color: color-mix(in srgb, var(--theme-strong, #3d6b33) 45%, transparent);
}

.pc-chip.is-holiday[b-33ewpmmvnn]::before {
    background: var(--pc-holiday-bg);
    border-color: var(--pc-holiday-border);
}

/* ── Months ── */
/* 310px is the narrowest a month can be before a five-digit price ("12 000") stops fitting
   into a day cell — the cells are a seventh of this minus the gaps. */
.pc-months[b-33ewpmmvnn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1rem;
}

.pc-month[b-33ewpmmvnn] {
    background: #fff;
    border: 1px solid #e6e3dd;
    border-radius: 14px;
    padding: 12px;
}

.pc-month > header[b-33ewpmmvnn] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
    font-size: .95rem;
    font-weight: 600;
    text-transform: capitalize;
}

/* Phone only — see the phone block. */
.pc-month-gap[b-33ewpmmvnn] {
    display: none;
    align-items: center;
    gap: .3rem;
    margin-left: auto;
    font-size: .75rem;
    font-weight: 400;
    color: #7a5a16;
    text-transform: none;
}

.pc-weekdays[b-33ewpmmvnn],
.pc-grid[b-33ewpmmvnn] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.pc-weekdays[b-33ewpmmvnn] {
    margin-bottom: 3px;
    font-size: .7rem;
    color: #8a8880;
    text-align: center;
    text-transform: uppercase;
}

/* ── Days ── */
/* No aspect-ratio: the cell has to be free to be wider than tall, otherwise the price is
   squeezed out of a square that the month width dictates. */
.pc-day[b-33ewpmmvnn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 42px;
    padding: 3px 1px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e6e3dd;
    border-radius: 7px;
    font: inherit;
    color: #2c2c2a;
    cursor: pointer;
    transition: transform .1s, box-shadow .1s;
}

.pc-day:hover[b-33ewpmmvnn] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgb(0 0 0 / 12%);
}

.pc-day.is-blank[b-33ewpmmvnn] {
    background: none;
    border: 0;
    cursor: default;
}

.pc-day.is-blank:hover[b-33ewpmmvnn] {
    transform: none;
    box-shadow: none;
}

.pc-day-number[b-33ewpmmvnn] {
    font-size: .75rem;
    line-height: 1;
    color: #8a8880;
}

.pc-day-price[b-33ewpmmvnn] {
    max-width: 100%;
    font-size: .66rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -.02em;
    white-space: nowrap;
    /* A price too long for the cell is clipped rather than wrapped — the grid has to keep
       its rows aligned, and the exact figure is in the tooltip and the editor anyway. */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── The three kinds of night ── */
/* Washes, not solid blocks: a whole year of saturated cells was heavier than everything around
   it. An ordinary weekday stays white, so the two groups worth a different rate are what the eye
   picks up. */
.pc-day.is-weekend[b-33ewpmmvnn] {
    background: var(--theme-tint, #f4f2ee);
    border-color: color-mix(in srgb, var(--theme-strong, #3d6b33) 28%, transparent);
}

.pc-day.is-weekend .pc-day-price[b-33ewpmmvnn] {
    color: var(--theme-strong, #3d6b33);
}

.pc-day.is-holiday[b-33ewpmmvnn] {
    background: var(--pc-holiday-bg);
    border-color: var(--pc-holiday-border);
}

.pc-day.is-holiday .pc-day-price[b-33ewpmmvnn] {
    color: var(--pc-holiday-ink);
}

/* A day nobody priced. Only the fill is replaced by the hatch — the border keeps the colour of
   the kind, so a cell still says both "weekend" and "no price yet" at once. */
.pc-day.is-none[b-33ewpmmvnn] {
    background: repeating-linear-gradient(45deg, #f4f3f0, #f4f3f0 4px, #fff 4px, #fff 8px);
}

.pc-day.is-none .pc-day-price[b-33ewpmmvnn] {
    color: #a9a7a1;
}

/* Selection is a wash too, in a hue neither day state uses — a hard dark frame on a grid of 365
   small cells read as noise. Last in the file on purpose: it has to win over the background of
   the day underneath it. */
.pc-day.is-selected[b-33ewpmmvnn] {
    background: #e3edfa;
    border-color: #9dbbe4;
    color: #24446f;
}

.pc-day.is-selected .pc-day-number[b-33ewpmmvnn],
.pc-day.is-selected .pc-day-price[b-33ewpmmvnn] {
    color: #24446f;
}

/* ── States ── */
.pc-state[b-33ewpmmvnn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 3rem 1rem;
    color: #6b6a66;
}

.pc-state.is-error[b-33ewpmmvnn] {
    color: #8c2f26;
}

/* ── Phone ──
   The months run one under another at full width (the 310px floor above is wider than a phone
   once the page gutter is taken off — that was the sideways scroll). The year and the quick
   picks share one row without a card, and the dock with the selection and the price is pinned
   to the bottom of the screen: the page is a dozen screens long, and walking back up to the
   price after ticking days in November was most of the work.

   The pinning is sticky, not fixed: the page becomes a column and the dock is ordered last, so
   at the end of the year it settles under December instead of covering the page footer. */
@media (max-width: 640px) {
    .pc-page[b-33ewpmmvnn] {
        display: flex;
        flex-direction: column;
        padding: 0 .75rem 3rem;
    }

    .pc-toolbar[b-33ewpmmvnn] {
        margin: 1.25rem 0 1rem;
    }

    .pc-toolbar .section-title[b-33ewpmmvnn] {
        margin-top: .6rem;
        font-size: 1.5rem;
    }

    .pc-toolbar .section-title[b-33ewpmmvnn]::after {
        margin-top: .55rem;
    }

    .pc-toolbar .section-sub[b-33ewpmmvnn] {
        margin-top: .6rem;
        font-size: .9rem;
        line-height: 1.5;
    }

    /* Two equal tiles; the "Objekt" label says nothing the tiles do not. */
    .pc-objects[b-33ewpmmvnn] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .pc-objects-label[b-33ewpmmvnn] {
        display: none;
    }

    .pc-object[b-33ewpmmvnn] {
        justify-content: center;
        padding: .55rem .5rem;
    }

    .pc-btn[b-33ewpmmvnn] {
        min-height: 42px;
        justify-content: center;
    }

    .pc-bar[b-33ewpmmvnn] {
        gap: .5rem;
        margin-bottom: 1rem;
        padding: 0;
        background: none;
        border: 0;
    }

    .pc-years[b-33ewpmmvnn] {
        gap: .25rem;
    }

    .pc-year[b-33ewpmmvnn] {
        min-width: 3.4ch;
        font-size: 1.2rem;
    }

    .pc-years .pc-btn[b-33ewpmmvnn] {
        width: 38px;
        min-height: 38px;
        padding: 0;
    }

    .pc-quick[b-33ewpmmvnn] {
        flex-wrap: nowrap;
        gap: .35rem;
    }

    .pc-quick-label[b-33ewpmmvnn] {
        display: none;
    }

    .pc-quick .pc-btn[b-33ewpmmvnn] {
        min-height: 38px;
        padding: .3rem .7rem;
        border-radius: 999px;
        font-size: .85rem;
    }

    .pc-dock[b-33ewpmmvnn] {
        position: sticky;
        bottom: 0;
        z-index: 5;
        order: 1;
        margin: 0 -.75rem;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: #fff;
        border: 0;
        border-top: 1px solid #e6e3dd;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -6px 20px rgb(0 0 0 / 10%);
    }

    .pc-dock .pc-result[b-33ewpmmvnn] {
        margin-bottom: .5rem;
        background: #edf6ec;
    }

    .pc-dock .pc-result.is-error[b-33ewpmmvnn] {
        background: #fbeceb;
    }

    .pc-dock-row[b-33ewpmmvnn] {
        display: grid;
        gap: .5rem;
    }

    .pc-selection[b-33ewpmmvnn] {
        justify-content: space-between;
        font-size: .88rem;
    }

    .pc-hint[b-33ewpmmvnn] {
        width: 100%;
        font-size: .84rem;
        text-align: center;
    }

    /* Without a selection the dock is just the hint — nothing to price yet. */
    .pc-dock:not(.has-selection) .pc-apply[b-33ewpmmvnn] {
        display: none;
    }

    .pc-apply[b-33ewpmmvnn] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
    }

    /* The label stays for screen readers; the "Kč" inside the field says the same on screen. */
    .pc-price[b-33ewpmmvnn] {
        position: relative;
    }

    .pc-price label[b-33ewpmmvnn] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .pc-price[b-33ewpmmvnn]::after {
        content: "Kč";
        position: absolute;
        top: 50%;
        right: .7rem;
        transform: translateY(-50%);
        font-size: .85rem;
        color: #8a8880;
        pointer-events: none;
    }

    .pc-price[b-33ewpmmvnn]  input {
        width: 100%;
        min-width: 5.5rem;
        min-height: 44px;
        box-sizing: border-box;
        padding-right: 2rem;
        font-size: 1rem;
    }

    .pc-btn.is-primary[b-33ewpmmvnn] {
        min-height: 44px;
    }

    .pc-btn.is-clear[b-33ewpmmvnn] {
        width: 44px;
        min-height: 44px;
        padding: 0;
    }

    .pc-btn.is-clear .pc-btn-text[b-33ewpmmvnn] {
        display: none;
    }

    .pc-summary[b-33ewpmmvnn] {
        align-items: flex-start;
        font-size: .85rem;
        line-height: 1.4;
    }

    .pc-summary .bi[b-33ewpmmvnn] {
        margin-top: .1rem;
    }

    /* One line of three equal chips, as wide as the year bar above — with the label in front it
       broke onto a second row. The chips are self-explanatory; the label stays for screen readers. */
    .pc-legend[b-33ewpmmvnn] {
        flex-wrap: nowrap;
        gap: .35rem;
        margin-bottom: .9rem;
    }

    .pc-legend-label[b-33ewpmmvnn] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .pc-chip[b-33ewpmmvnn] {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        white-space: nowrap;
    }

    .pc-months[b-33ewpmmvnn] {
        grid-template-columns: minmax(0, 1fr);
        gap: .75rem;
        margin-bottom: 1rem;
    }

    .pc-month[b-33ewpmmvnn] {
        padding: 10px;
    }

    .pc-month-gap[b-33ewpmmvnn] {
        display: inline-flex;
    }

    .pc-day[b-33ewpmmvnn] {
        min-height: 46px;
    }

    .pc-day:hover[b-33ewpmmvnn] {
        transform: none;
        box-shadow: none;
    }

    .pc-day-number[b-33ewpmmvnn] {
        font-size: .78rem;
    }

    .pc-day-price[b-33ewpmmvnn] {
        font-size: .68rem;
    }
}
/* /Pages/Administration/Finance/VatOverview.razor.rz.scp.css */
/* DPH z provizí kanálů — minimální plátno finančních stránek (.pl-*, .ba-*): bílé plochy
   s vlasovou linkou, akcent přes tokeny značky. Souhrn roku jako tabulka, vybraný měsíc pod ní. */

.vat-page[b-2k5de3p6i1] {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
    box-sizing: border-box;
    text-align: left;
    color: #2c2c2a;
}

.vat-toolbar[b-2k5de3p6i1] {
    display: flex;
    justify-content: center;
    margin: 2rem 0 1.25rem;
}

    .vat-toolbar .section-head[b-2k5de3p6i1] {
        margin-bottom: 0;
    }

/* ── Nahrání ── */
.vat-upload[b-2k5de3p6i1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 1.25rem;
    padding: 14px 18px;
    background: #fff;
    border: 1px dashed #d6d4cc;
    border-radius: 14px;
}

.vat-upload-btn[b-2k5de3p6i1] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 18px;
    border-radius: 8px;
    background: var(--theme-color);
    color: #fff;
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    overflow: hidden;
}

    .vat-upload-btn:hover:not(.is-disabled)[b-2k5de3p6i1] {
        background: var(--theme-strong);
    }

    .vat-upload-btn.is-disabled[b-2k5de3p6i1] {
        opacity: .55;
        cursor: default;
    }

    .vat-upload-btn[b-2k5de3p6i1]  input[type="file"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

.vat-hint[b-2k5de3p6i1] {
    flex-basis: 100%;
    font-size: .78rem;
    color: #8a8983;
}

.vat-ghost-btn[b-2k5de3p6i1],
.vat-primary-btn[b-2k5de3p6i1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    font-family: inherit;
    font-size: .88rem;
    cursor: pointer;
}

.vat-ghost-btn[b-2k5de3p6i1] {
    border: 1px solid #e3e3e0;
    background: #fff;
    color: #4a4944;
}

    .vat-ghost-btn:hover:not(:disabled)[b-2k5de3p6i1] {
        border-color: #c9c7bf;
        color: #2c2c2a;
    }

.vat-primary-btn[b-2k5de3p6i1] {
    border: none;
    background: var(--theme-color);
    color: #fff;
    font-weight: 500;
}

    .vat-primary-btn:hover:not(:disabled)[b-2k5de3p6i1] {
        background: var(--theme-strong);
    }

    .vat-ghost-btn:disabled[b-2k5de3p6i1],
    .vat-primary-btn:disabled[b-2k5de3p6i1] {
        opacity: .5;
        cursor: default;
    }

.vat-panel[b-2k5de3p6i1] {
    margin-bottom: 1.25rem;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #e3e3e0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

/* ── Hlášky ── */
.vat-result[b-2k5de3p6i1],
.vat-notice[b-2k5de3p6i1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 1.25rem;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: .87rem;
}

    .vat-result.is-ok[b-2k5de3p6i1] {
        background: var(--theme-tint, #eef6ec);
        color: var(--theme-strong, #3d6b33);
    }

    .vat-result.is-error[b-2k5de3p6i1] {
        background: #fceaea;
        color: #a32d2d;
    }

.vat-notice[b-2k5de3p6i1] {
    background: #eef1f6;
    color: #3d4a63;
}

.vat-empty[b-2k5de3p6i1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 3rem 1.5rem;
    background: #fff;
    border: 1px solid #e3e3e0;
    border-radius: 14px;
    color: #6f6e6a;
}

    .vat-empty p[b-2k5de3p6i1] {
        margin: 0;
    }

/* ── Karty ── */
.vat-card[b-2k5de3p6i1] {
    margin-bottom: 1.5rem;
    background: #fff;
    border: 1px solid #e3e3e0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
}

.vat-card-head[b-2k5de3p6i1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding: 14px 18px;
    border-bottom: 1px solid #f0efeb;
}

    .vat-card-head h2[b-2k5de3p6i1] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 700;
    }

    .vat-card-head p[b-2k5de3p6i1] {
        margin: 0;
        font-size: .82rem;
        color: #6f6e6a;
    }

    .vat-card-head.is-month[b-2k5de3p6i1] {
        justify-content: space-between;
    }

.vat-year[b-2k5de3p6i1] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vat-year-btn[b-2k5de3p6i1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #e3e3e0;
    border-radius: 8px;
    background: #fff;
    color: #4a4944;
    cursor: pointer;
}

    .vat-year-btn:hover[b-2k5de3p6i1] {
        border-color: #c9c7bf;
    }

.vat-figures[b-2k5de3p6i1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 0;
}

    .vat-figures div[b-2k5de3p6i1] {
        display: flex;
        flex-direction: column;
    }

    .vat-figures dt[b-2k5de3p6i1] {
        font-size: .7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #a3a29b;
    }

    .vat-figures dd[b-2k5de3p6i1] {
        margin: 0;
        font-size: 1.02rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

    .vat-figures .is-due dd[b-2k5de3p6i1] {
        color: #b3552f;
    }

/* ── Tabulky ── */
.vat-table-wrap[b-2k5de3p6i1] {
    overflow-x: auto;
}

.vat-table[b-2k5de3p6i1] {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

    .vat-table th[b-2k5de3p6i1] {
        padding: 10px 14px;
        background: #faf9f6;
        border-bottom: 1px solid #f0efeb;
        font-size: .7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #a3a29b;
        text-align: left;
        white-space: nowrap;
    }

    .vat-table td[b-2k5de3p6i1] {
        padding: 10px 14px;
        border-bottom: 1px solid #f6f5f1;
        vertical-align: middle;
    }

    .vat-table .is-num[b-2k5de3p6i1] {
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .vat-table .is-strong[b-2k5de3p6i1] {
        font-weight: 600;
    }

    .vat-table tfoot td[b-2k5de3p6i1] {
        border-top: 2px solid #2c2c2a;
        border-bottom: none;
        font-weight: 700;
        background: #faf9f6;
    }

.vat-row[b-2k5de3p6i1] {
    cursor: pointer;
    transition: background .12s;
}

    .vat-row:hover[b-2k5de3p6i1] {
        background: #faf9f6;
    }

    .vat-row.is-quiet[b-2k5de3p6i1] {
        color: #a3a29b;
    }

    .vat-row.is-selected[b-2k5de3p6i1] {
        background: var(--theme-tint, #f1f5ee);
        box-shadow: inset 3px 0 0 var(--theme-strong, var(--theme-color));
        color: #2c2c2a;
    }

.vat-month[b-2k5de3p6i1] {
    font-weight: 600;
}

.vat-foot-note[b-2k5de3p6i1] {
    font-size: .78rem;
    font-weight: 600;
    color: #b3552f;
}

.vat-pill[b-2k5de3p6i1] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}

    .vat-pill.is-ok[b-2k5de3p6i1] {
        background: var(--theme-tint, #eef6ec);
        color: var(--theme-strong, #3d6b33);
    }

    .vat-pill.is-open[b-2k5de3p6i1] {
        background: #eef1f6;
        color: #3d4a63;
    }

    .vat-pill.is-warn[b-2k5de3p6i1] {
        background: #fdf0d9;
        color: #8a5a12;
    }

    .vat-pill.is-wait[b-2k5de3p6i1] {
        background: #eef1f6;
        color: #4a5a78;
    }

    .vat-pill.is-settled[b-2k5de3p6i1] {
        background: #f1f0ec;
        color: #8a8983;
    }

    .vat-pill.is-empty[b-2k5de3p6i1] {
        background: transparent;
        color: #c9c7bf;
    }

/* Detail měsíce */
.vat-table.is-detail .is-check[b-2k5de3p6i1] {
    width: 36px;
    text-align: center;
}

.vat-doc.is-settled td[b-2k5de3p6i1] {
    color: #a3a29b;
    background: #fbfbf9;
}

.vat-doc.is-checked td[b-2k5de3p6i1] {
    background: var(--theme-tint, #f1f5ee);
}

.vat-doc a[b-2k5de3p6i1] {
    color: var(--theme-strong, var(--theme-color));
}

.vat-doc.is-settled a[b-2k5de3p6i1] {
    color: inherit;
}

.vat-sub[b-2k5de3p6i1] {
    display: block;
    font-size: .74rem;
    color: #a3a29b;
}

.vat-number a[b-2k5de3p6i1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    word-break: break-all;
}

.vat-missing[b-2k5de3p6i1],
.vat-wait[b-2k5de3p6i1] {
    font-size: .78rem;
    font-weight: 600;
}

.vat-missing[b-2k5de3p6i1] {
    color: #8a5a12;
}

.vat-wait[b-2k5de3p6i1] {
    color: #4a5a78;
}

.vat-actions[b-2k5de3p6i1] {
    white-space: nowrap;
    text-align: right;
}

.vat-icon[b-2k5de3p6i1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #4a4944;
    cursor: pointer;
}

    .vat-icon:hover:not(:disabled)[b-2k5de3p6i1] {
        background: #f1f0ec;
    }

    .vat-icon.is-danger[b-2k5de3p6i1] {
        color: #a32d2d;
    }

.vat-edit-row td[b-2k5de3p6i1] {
    padding: 16px 18px;
    background: #faf9f6;
}

.vat-quiet[b-2k5de3p6i1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 18px;
    font-size: .88rem;
    color: #6f6e6a;
}

/* Chybějící doklady */
.vat-tasks[b-2k5de3p6i1] {
    padding: 14px 18px;
    border-bottom: 1px solid #f0efeb;
    background: #fffaf0;
}

    .vat-tasks h3[b-2k5de3p6i1] {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 2px;
        font-size: .9rem;
        font-weight: 700;
        color: #8a5a12;
    }

/* Odvod */
.vat-settle[b-2k5de3p6i1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 14px 18px;
    border-top: 1px solid #f0efeb;
    background: #faf9f6;
}

.vat-settle-sum[b-2k5de3p6i1] {
    font-size: .88rem;
    color: #4a4944;
}

.vat-settle-form[b-2k5de3p6i1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border-top: 1px solid #f0efeb;
}

    .vat-settle-form p[b-2k5de3p6i1] {
        margin: 0;
        font-size: .9rem;
    }

.vat-settle-warn[b-2k5de3p6i1] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8a5a12;
}

.vat-settle-fields[b-2k5de3p6i1] {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 12px 16px;
}

    .vat-settle-fields label[b-2k5de3p6i1] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin: 0;
    }

        .vat-settle-fields label > span[b-2k5de3p6i1] {
            font-size: .8rem;
            font-weight: 600;
            color: #4a4944;
        }

.vat-settle-actions[b-2k5de3p6i1] {
    display: flex;
    gap: 12px;
}

.vat-settlements[b-2k5de3p6i1] {
    padding: 14px 18px;
    border-top: 1px solid #f0efeb;
}

    .vat-settlements h3[b-2k5de3p6i1] {
        margin: 0 0 8px;
        font-size: .8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #a3a29b;
    }

    .vat-settlements ul[b-2k5de3p6i1] {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .vat-settlements li[b-2k5de3p6i1] {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 6px 0;
        font-size: .88rem;
    }

        .vat-settlements li > .bi[b-2k5de3p6i1] {
            color: var(--theme-strong, var(--theme-color));
            margin-top: 2px;
        }

        .vat-settlements li > span[b-2k5de3p6i1] {
            flex: 1 1 auto;
        }

.vat-link-btn[b-2k5de3p6i1] {
    padding: 0;
    border: none;
    background: none;
    color: #a32d2d;
    font-family: inherit;
    font-size: .8rem;
    cursor: pointer;
    white-space: nowrap;
}

    .vat-link-btn:disabled[b-2k5de3p6i1] {
        opacity: .5;
    }

@media (max-width: 720px) {
    .vat-settle-fields[b-2k5de3p6i1] {
        grid-template-columns: minmax(0, 1fr);
    }

    .vat-card-head.is-month[b-2k5de3p6i1] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Telefon ── */
/* Kousky markupu jen pro telefon: šipka a rozpad vybraného měsíce, popisky buněk dokladu, „Kč“,
   provize místo chybějící částky v Kč, krátký součet výběru, texty tlačítek a šipka dokladu.
   Desktop je nevidí. */
.vat-row-caret[b-2k5de3p6i1],
.vat-check-label[b-2k5de3p6i1],
.vat-cell-label[b-2k5de3p6i1],
.vat-cur[b-2k5de3p6i1],
.vat-fee-alt[b-2k5de3p6i1],
.vat-sum-short[b-2k5de3p6i1],
.vat-icon-text[b-2k5de3p6i1],
.vat-table .vat-row-more[b-2k5de3p6i1],
.vat-table .vat-doc-toggle[b-2k5de3p6i1] {
    display: none;
}

/* Na desktopu obyčejný inline obal zaškrtávátka, ať se sloupec nehne; popisek vedle má jen telefon. */
.vat-check-all[b-2k5de3p6i1] {
    display: inline;
    margin: 0;
    cursor: pointer;
}

/* Pod 700 px: souhrn roku zúžený na Měsíc · DPH · Stav (vybraný měsíc se rozbalí o kanály,
   základ a odvedeno), doklady jako dva řádky se šipkou a tlačítko odvodu přilepené u spodního
   okraje, dokud je karta měsíce vidět. */
@media (max-width: 700px) {
    /* clip místo hidden: hidden dělá z karty posuvný kontejner a sticky odvod by se nelepil. */
    .vat-card[b-2k5de3p6i1] {
        overflow: clip;
    }

    .vat-card-head[b-2k5de3p6i1],
    .vat-tasks[b-2k5de3p6i1] {
        padding: 12px 16px;
    }

    /* Tři čísla měsíce v jedné řadě; pod ~350 px mřížka sama přejde na dva sloupce. */
    .vat-figures[b-2k5de3p6i1] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
        gap: 8px 12px;
        width: 100%;
    }

        .vat-figures dt[b-2k5de3p6i1] {
            font-size: .62rem;
            white-space: nowrap;
        }

        .vat-figures dd[b-2k5de3p6i1] {
            font-size: .95rem;
            white-space: nowrap;
        }

    /* Souhrn roku */
    .vat-table-year .vat-col-channel[b-2k5de3p6i1],
    .vat-table-year .vat-col-base[b-2k5de3p6i1],
    .vat-table-year .vat-col-settled[b-2k5de3p6i1] {
        display: none;
    }

    .vat-table-year th[b-2k5de3p6i1],
    .vat-table-year td[b-2k5de3p6i1] {
        padding: 11px 8px;
    }

        .vat-table-year th:first-child[b-2k5de3p6i1],
        .vat-table-year td:first-child[b-2k5de3p6i1] {
            padding-left: 14px;
        }

    .vat-table-year .vat-col-state[b-2k5de3p6i1] {
        padding-right: 12px;
        text-align: right;
        white-space: nowrap;
    }

    .vat-table-year tfoot .vat-col-state[b-2k5de3p6i1] {
        white-space: normal;
    }

    .vat-table-year .vat-pill[b-2k5de3p6i1] {
        padding: 1px 8px;
        font-size: .68rem;
    }

    .vat-row-caret[b-2k5de3p6i1] {
        display: inline-block;
        margin-left: 6px;
        font-size: .72rem;
        color: #a3a29b;
        vertical-align: middle;
    }

    .vat-row.is-selected .vat-row-caret[b-2k5de3p6i1] {
        color: var(--theme-strong, var(--theme-color));
    }

    .vat-row.is-quiet .vat-row-caret[b-2k5de3p6i1] {
        visibility: hidden;
    }

    .vat-row.is-selected td[b-2k5de3p6i1] {
        border-bottom: 0;
    }

    .vat-table .vat-row-more[b-2k5de3p6i1] {
        display: table-row;
        background: var(--theme-tint, #f1f5ee);
        box-shadow: inset 3px 0 0 var(--theme-strong, var(--theme-color));
    }

        .vat-row-more > td[b-2k5de3p6i1] {
            padding: 0 12px 12px 14px;
            border-bottom: 1px solid #e3ecdf;
        }

    .vat-more[b-2k5de3p6i1] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 14px;
        margin: 0;
        padding: 10px 12px;
        background: #fff;
        border-radius: 10px;
    }

        .vat-more dt[b-2k5de3p6i1] {
            font-size: .62rem;
            font-weight: 600;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: #a3a29b;
        }

        .vat-more dd[b-2k5de3p6i1] {
            margin: 0;
            font-size: .92rem;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }

    /* Doklady: tabulka přestane být tabulkou, řádek je mřížka
       [☐] host ……………………………… 1 175,87 Kč [⌄]
           2. 9. 2026 · Airbnb · Chalupa  [štítek]
       a rozbalený doklad pod tím přidá číslo, provizi, kurz a akce. */
    .vat-table-wrap:has(.is-detail)[b-2k5de3p6i1] {
        overflow: visible;
    }

    .vat-table.is-detail[b-2k5de3p6i1],
    .vat-table.is-detail > thead[b-2k5de3p6i1],
    .vat-table.is-detail > tbody[b-2k5de3p6i1] {
        display: block;
    }

        .vat-table.is-detail > thead > tr[b-2k5de3p6i1] {
            display: flex;
        }

        .vat-table.is-detail > thead th[b-2k5de3p6i1] {
            display: none;
        }

            .vat-table.is-detail > thead th.is-check[b-2k5de3p6i1] {
                display: block;
                width: 100%;
                padding: 10px 16px;
                text-align: left;
            }

        /* Nic k zaškrtnutí → ani řádek „Vybrat vše“. */
        .vat-table.is-detail.is-none-selectable > thead[b-2k5de3p6i1] {
            display: none;
        }

    .vat-check-all[b-2k5de3p6i1] {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .vat-check-label[b-2k5de3p6i1] {
        display: inline;
    }

    .vat-doc[b-2k5de3p6i1] {
        display: grid;
        grid-template-columns: 22px max-content minmax(0, 1fr) auto 32px;
        column-gap: 8px;
        row-gap: 3px;
        align-items: center;
        padding: 10px 6px 10px 16px;
        border-bottom: 1px solid #f0efeb;
    }

        .vat-doc.is-checked[b-2k5de3p6i1] {
            background: var(--theme-tint, #f1f5ee);
        }

        .vat-doc.is-settled[b-2k5de3p6i1] {
            background: #fbfbf9;
        }

        /* Nízká specificita schválně: buňky, které karta ukazuje, si display vrací třídou. */
        .vat-doc > td[b-2k5de3p6i1] {
            display: none;
            min-width: 0;
            padding: 0;
            border: 0;
        }

        /* Barvu výběru a odvedení nese celý řádek, ne buňky. */
        .vat-doc.is-checked td[b-2k5de3p6i1],
        .vat-doc.is-settled td[b-2k5de3p6i1] {
            background: none;
        }

        .vat-doc .vat-sub[b-2k5de3p6i1] {
            display: inline;
            font-size: inherit;
            color: inherit;
        }

        .vat-table.is-detail .vat-doc td.is-check[b-2k5de3p6i1] {
            display: block;
            grid-column: 1;
            grid-row: 1 / 3;
            width: auto;
            text-align: left;
        }

        .vat-doc .vat-c-stay[b-2k5de3p6i1] {
            display: block;
            grid-column: 2 / 4;
            grid-row: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: .94rem;
            font-weight: 600;
        }

            .vat-doc .vat-c-stay a[b-2k5de3p6i1] {
                color: #2c2c2a;
                text-decoration: none;
            }

            .vat-doc .vat-c-stay .vat-sub[b-2k5de3p6i1] {
                display: none;
            }

        .vat-doc .vat-c-czk[b-2k5de3p6i1] {
            display: block;
            grid-column: 4;
            grid-row: 1;
            justify-self: end;
            font-size: .94rem;
        }

    .vat-cur[b-2k5de3p6i1] {
        display: inline;
    }

    /* Doklad čeká na kurz: místo „—“ provize v původní měně, slabší než korunová částka. */
    .vat-czk-none[b-2k5de3p6i1] {
        display: none;
    }

    .vat-fee-alt[b-2k5de3p6i1] {
        display: inline;
        font-weight: 500;
        color: #8a8983;
    }

    .vat-doc .vat-c-date[b-2k5de3p6i1],
    .vat-doc .vat-c-channel[b-2k5de3p6i1] {
        display: block;
        grid-row: 2;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: .76rem;
        color: #8a8983;
    }

    .vat-doc .vat-c-date[b-2k5de3p6i1] {
        grid-column: 2;
    }

    .vat-doc .vat-c-channel[b-2k5de3p6i1] {
        grid-column: 3;
    }

        .vat-doc .vat-c-channel[b-2k5de3p6i1]::before,
        .vat-doc .vat-c-channel .vat-sub[b-2k5de3p6i1]::before {
            content: "·";
            margin-right: 5px;
            color: #c9c7bf;
        }

        .vat-doc .vat-c-channel .vat-sub[b-2k5de3p6i1] {
            margin-left: 5px;
        }

    .vat-doc .vat-c-state[b-2k5de3p6i1] {
        display: block;
        grid-column: 4;
        grid-row: 2;
        justify-self: end;
    }

        .vat-doc .vat-c-state .vat-pill[b-2k5de3p6i1] {
            padding: 1px 8px;
            font-size: .68rem;
        }

    /* „K odvodu“ říká už zaškrtávátko — štítek zůstane jen výjimkám a kanál s objektem dostane
       jeho místo. */
    .vat-doc.is-ready .vat-c-state[b-2k5de3p6i1] {
        display: none;
    }

    .vat-doc.is-ready .vat-c-channel[b-2k5de3p6i1] {
        grid-column: 3 / 5;
    }

    .vat-table .vat-doc .vat-doc-toggle[b-2k5de3p6i1] {
        display: block;
        grid-column: 5;
        grid-row: 1 / 3;
        align-self: stretch;
    }

    .vat-doc-toggle-btn[b-2k5de3p6i1] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 100%;
        min-height: 36px;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: none;
        color: #a3a29b;
        font-size: .8rem;
    }

    .vat-doc.is-open .vat-doc-toggle-btn[b-2k5de3p6i1] {
        color: var(--theme-strong, var(--theme-color));
    }

    /* Rozbalený doklad */
    .vat-doc.is-open .vat-number[b-2k5de3p6i1],
    .vat-doc.is-open .vat-c-fee[b-2k5de3p6i1],
    .vat-doc.is-open .vat-c-rate[b-2k5de3p6i1],
    .vat-doc.is-open .vat-actions[b-2k5de3p6i1] {
        display: block;
        grid-column: 2 / 5;
        text-align: left;
        font-size: .82rem;
    }

    .vat-doc.is-open .vat-number[b-2k5de3p6i1] {
        grid-row: 3;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #e3ecdf;
    }

    .vat-doc.is-open .vat-c-fee[b-2k5de3p6i1] {
        grid-row: 4;
    }

    .vat-doc.is-open .vat-c-rate[b-2k5de3p6i1] {
        grid-row: 5;
    }

        .vat-doc.is-open .vat-c-rate .vat-sub[b-2k5de3p6i1] {
            margin-left: 6px;
            color: #a3a29b;
        }

    .vat-doc.is-open .vat-cell-label[b-2k5de3p6i1] {
        display: inline-block;
        width: 4.2rem;
        color: #8a8983;
    }

    .vat-doc.is-open .vat-actions[b-2k5de3p6i1] {
        grid-row: 6;
        margin-top: 6px;
    }

    .vat-doc.is-open .vat-icon[b-2k5de3p6i1] {
        width: auto;
        height: auto;
        gap: 6px;
        margin-right: 6px;
        padding: 6px 12px;
        border: 1px solid #e3e3e0;
        background: #fff;
        font-size: .8rem;
    }

        .vat-doc.is-open .vat-icon.is-danger[b-2k5de3p6i1] {
            border-color: #efd3d3;
        }

    .vat-doc.is-open .vat-icon-text[b-2k5de3p6i1] {
        display: inline;
    }

    /* Formulář úpravy pod dokladem */
    .vat-edit-row[b-2k5de3p6i1],
    .vat-edit-row td[b-2k5de3p6i1] {
        display: block;
    }

        .vat-edit-row td[b-2k5de3p6i1] {
            padding: 14px 16px;
        }

    /* Odvod přilepený u spodního okraje, dokud je karta měsíce vidět. */
    .vat-settle[b-2k5de3p6i1] {
        position: sticky;
        bottom: 0;
        z-index: 5;
        padding: 12px 16px;
        box-shadow: 0 -6px 14px rgba(0, 0, 0, .06);
    }

    .vat-settle-sum[b-2k5de3p6i1] {
        font-size: .82rem;
    }

    /* Nápověda a dlouhý součet jen na desktopu; bez výběru zbude jen tlačítko. */
    .vat-settle-hint[b-2k5de3p6i1],
    .vat-sum-long[b-2k5de3p6i1],
    .vat-settle-sum:not(:has(.vat-sum-short))[b-2k5de3p6i1] {
        display: none;
    }

    .vat-sum-short[b-2k5de3p6i1] {
        display: inline;
        font-weight: 600;
        color: #2c2c2a;
    }

    .vat-settle .vat-primary-btn[b-2k5de3p6i1] {
        width: 100%;
        justify-content: center;
        padding: 11px 16px;
    }
}
/* /Pages/Administration/Marketing/Components/SocialPostPreview.razor.rz.scp.css */
/* The post as it would go out: the 4:5 picture, then the text of the network picked in the tabs. */

.spp[b-hgndrgjg7v] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.spp-frame[b-hgndrgjg7v] {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid #e3e3e0;
    border-radius: 12px;
    background: #f5f4f0;
}

.spp-image[b-hgndrgjg7v] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .2s ease;
}

    /* A redraw is on its way; the old picture stays so the frame does not flash empty. */
    .spp-image.is-stale[b-hgndrgjg7v] {
        opacity: .55;
    }

.spp-busy[b-hgndrgjg7v] {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #fff;
}

.spp-placeholder[b-hgndrgjg7v] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 1rem;
    color: #8f8e87;
    font-size: .85rem;
    text-align: center;
}

    .spp-placeholder.is-error[b-hgndrgjg7v] {
        color: #a32d2d;
    }

.spp-texts[b-hgndrgjg7v] {
    border: 1px solid #e3e3e0;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.spp-tabs[b-hgndrgjg7v] {
    display: flex;
    border-bottom: 1px solid #f0efeb;
}

.spp-tab[b-hgndrgjg7v] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: .82rem;
    color: #6f6e6a;
    cursor: pointer;
}

    .spp-tab.is-active[b-hgndrgjg7v] {
        color: var(--theme-strong, var(--theme-color, #2c2c2a));
        box-shadow: inset 0 -2px 0 var(--theme-strong, var(--theme-color, #2c2c2a));
        font-weight: 600;
    }

/* The post keeps its line breaks, as Facebook and Instagram show them. */
.spp-text[b-hgndrgjg7v] {
    margin: 0;
    padding: 12px 14px;
    font-size: .85rem;
    line-height: 1.55;
    color: #2c2c2a;
    white-space: pre-line;
    overflow-wrap: anywhere;
    max-height: 18rem;
    overflow-y: auto;
}

.spp.is-compact .spp-text[b-hgndrgjg7v] {
    max-height: 12rem;
}
/* /Pages/Administration/Marketing/Components/SocialPostSetup.razor.rz.scp.css */
/* The template and photo pickers on the left, the post they make on the right; stacked on a
   narrow screen. */

.sps[b-bf6qune1ev] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.25rem;
    align-items: start;
}

.sps-choice[b-bf6qune1ev] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sps-field[b-bf6qune1ev] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .sps-field label[b-bf6qune1ev],
    .sps-label[b-bf6qune1ev] {
        font-size: .8rem;
        color: #6f6e6a;
    }

    .sps-field .input-hint a[b-bf6qune1ev] {
        margin-left: 4px;
        color: var(--theme-strong, var(--theme-color));
    }

.sps-note[b-bf6qune1ev],
.sps-error[b-bf6qune1ev] {
    display: flex;
    gap: 6px;
    margin: 0;
    font-size: .8rem;
    color: #5f5e5a;
}

.sps-error[b-bf6qune1ev] {
    color: #a32d2d;
}

.sps-photo-picker[b-bf6qune1ev] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    /* A news item's illustration wins; the choice stays visible but reads as not in play. */
    .sps-photo-picker.is-overridden[b-bf6qune1ev] {
        opacity: .5;
    }

/* The gallery scrolls under the two fixed tiles, so a big one does not stretch the form. */
.sps-gallery[b-bf6qune1ev] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    padding: 2px 6px 2px 2px;
    overflow-y: auto;
}

.sps-group-label[b-bf6qune1ev] {
    margin-top: 4px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a8880;
}

    .sps-group-label:first-child[b-bf6qune1ev] {
        margin-top: 0;
    }

/* Landscape tiles like the gallery photos themselves — the post shows the whole photo. */
.sps-photos[b-bf6qune1ev] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 8px;
}

.sps-photo[b-bf6qune1ev] {
    position: relative;
    aspect-ratio: 4 / 3;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e3e3e0;
    border-radius: 8px;
    background: #f5f4f0;
    cursor: pointer;
}

    .sps-photo img[b-bf6qune1ev] {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sps-photo.is-auto[b-bf6qune1ev],
    .sps-photo.is-upload[b-bf6qune1ev] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 6px;
        font-family: inherit;
        font-size: .72rem;
        line-height: 1.2;
        text-align: center;
        color: #5f5e5a;
    }

        .sps-photo.is-auto .bi[b-bf6qune1ev],
        .sps-photo.is-upload .bi[b-bf6qune1ev] {
            font-size: 1.2rem;
        }

    /* A label like the field captions around it, but drawn as a tile. */
    .sps-photo.is-upload[b-bf6qune1ev] {
        border-style: dashed;
        background: rgba(255, 255, 255, .75);
    }

        .sps-photo.is-upload:hover[b-bf6qune1ev] {
            border-color: var(--theme-strong, var(--theme-color, #2c2c2a));
            background: #fff;
        }

        .sps-photo.is-upload.is-uploading[b-bf6qune1ev] {
            opacity: .6;
            cursor: default;
        }

        .sps-photo.is-upload[b-bf6qune1ev]  input[type="file"] {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            border: 0;
            opacity: 0;
            overflow: hidden;
            clip: rect(0 0 0 0);
        }

    .sps-photo.is-own[b-bf6qune1ev] {
        cursor: default;
    }

.sps-own-badge[b-bf6qune1ev] {
    position: absolute;
    left: 4px;
    bottom: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(44, 44, 42, .72);
    font-size: .65rem;
    color: #fff;
}

.sps-own-remove[b-bf6qune1ev] {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(44, 44, 42, .72);
    font-size: .65rem;
    color: #fff;
    cursor: pointer;
}

    .sps-own-remove:hover[b-bf6qune1ev] {
        background: #a32d2d;
    }

.sps-photo.is-active[b-bf6qune1ev] {
    border-color: var(--theme-color, #2c2c2a);
    box-shadow: 0 0 0 2px var(--theme-color, #2c2c2a);
}

.sps-preview[b-bf6qune1ev] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@media (max-width: 760px) {
    .sps[b-bf6qune1ev] {
        grid-template-columns: minmax(0, 1fr);
    }

    .sps-preview[b-bf6qune1ev] {
        max-width: 340px;
    }
}
/* /Pages/Administration/Marketing/Components/SocialPostTextEditor.razor.rz.scp.css */
/* The text in one box with its tools on top — the placeholder buttons, the emoji palette when open,
   then the field without a border of its own. The box draws the border and lights up in the house's
   colour while the caret is anywhere inside. */

.spte[b-8v6wlgb8vo] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

    .spte + .spte[b-8v6wlgb8vo] {
        margin-top: 18px;
    }

.spte-head[b-8v6wlgb8vo] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

    .spte-head label[b-8v6wlgb8vo] {
        margin: 0;
        font-size: .8rem;
        color: #6f6e6a;
    }

.spte-count[b-8v6wlgb8vo] {
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    color: #8f8e87;
    white-space: nowrap;
}

    .spte-count.is-over[b-8v6wlgb8vo] {
        font-weight: 600;
        color: #a32d2d;
    }

.spte-box[b-8v6wlgb8vo] {
    overflow: hidden;
    border: 1px solid #d3d1c7;
    border-radius: 8px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

    .spte-box:focus-within[b-8v6wlgb8vo] {
        border-color: var(--theme-strong, var(--theme-color));
        box-shadow: 0 0 0 2px var(--theme-tint, #eef6ec);
    }

.spte-toolbar[b-8v6wlgb8vo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid #eeede8;
    background: #faf9f6;
}

.spte-caption[b-8v6wlgb8vo] {
    margin-right: 2px;
    font-size: .72rem;
    color: #8f8e87;
}

.spte-chip[b-8v6wlgb8vo] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px 3px 8px;
    border: 1px solid #e3e3e0;
    border-radius: 99px;
    background: #fff;
    font-family: inherit;
    font-size: .76rem;
    line-height: 1.4;
    color: #2c2c2a;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s;
}

    .spte-chip .bi[b-8v6wlgb8vo] {
        font-size: .72rem;
        color: #8f8e87;
    }

    .spte-chip:hover[b-8v6wlgb8vo] {
        border-color: var(--theme-strong, var(--theme-color));
        color: var(--theme-strong, #2c2c2a);
    }

        .spte-chip:hover .bi[b-8v6wlgb8vo] {
            color: inherit;
        }

    .spte-chip:focus-visible[b-8v6wlgb8vo] {
        outline: 2px solid var(--theme-strong, var(--theme-color));
        outline-offset: 1px;
    }

    /* In the text already. Still a button — a price may well go in twice — but marked, so the one
       that is missing stands out. */
    .spte-chip.is-used[b-8v6wlgb8vo] {
        border-color: transparent;
        background: var(--theme-tint, #eef6ec);
        color: var(--theme-strong, #2c2c2a);
    }

        .spte-chip.is-used .bi[b-8v6wlgb8vo] {
            color: inherit;
        }

    .spte-chip.is-emoji[b-8v6wlgb8vo] {
        margin-left: auto;
        padding: 3px 9px;
    }

        .spte-chip.is-emoji .bi[b-8v6wlgb8vo] {
            font-size: .9rem;
        }

    .spte-chip.is-open[b-8v6wlgb8vo] {
        border-color: var(--theme-strong, var(--theme-color));
        background: var(--theme-tint, #eef6ec);
    }

.spte-emojis[b-8v6wlgb8vo] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 6px 8px;
    border-bottom: 1px solid #eeede8;
}

.spte-emoji[b-8v6wlgb8vo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

    .spte-emoji:hover[b-8v6wlgb8vo],
    .spte-emoji:focus-visible[b-8v6wlgb8vo] {
        background: #f5f4f0;
        outline: none;
    }

/* Beats the page's own focus ring for text fields — here the box carries it. */
.spte-input[b-8v6wlgb8vo],
.spte-input:focus[b-8v6wlgb8vo] {
    display: block;
    width: 100%;
    min-height: 150px;
    padding: 10px 12px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: inherit;
    font-size: .9rem;
    line-height: 1.6;
    color: #2c2c2a;
    resize: vertical;
}

.spte-hint[b-8v6wlgb8vo] {
    display: block;
    font-size: .75rem;
    line-height: 1.45;
    color: #8f8e87;
}

.spte[b-8v6wlgb8vo]  .validation-message {
    font-size: .75rem;
    color: #a32d2d;
}
/* /Pages/Administration/Property/AccommodationsOverview.razor.rz.scp.css */
/* Same "minimal canvas" treatment as the accommodation settings page it belongs next to:
   no coloured panel, brand accent only through the shared theme tokens
   (--theme-color / -strong / -tint), which each card re-scopes via its own data-theme. */

.ao-page[b-uef38whj0w] {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

/* ── States ── */
.ao-state[b-uef38whj0w] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2.5rem 1rem;
    color: #6f6e6a;
    font-size: .95rem;
}

.ao-state.is-error[b-uef38whj0w] {
    color: #a3322b;
}

/* ── Summary tiles ── */
.ao-summary[b-uef38whj0w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .9rem;
    margin: 1.25rem 0 1.75rem;
}

.ao-tile[b-uef38whj0w] {
    background: #fff;
    border: 1px solid #e3e3e0;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ao-tile.is-primary[b-uef38whj0w] {
    border-color: var(--theme-color);
    background: var(--theme-tint);
}

.ao-tile.is-warning[b-uef38whj0w] {
    border-color: #e0b04a;
    background: #fdf7e8;
}

.ao-tile-label[b-uef38whj0w] {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #6f6e6a;
}

.ao-tile-value[b-uef38whj0w] {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: #2c2c2a;
}

.ao-tile-hint[b-uef38whj0w] {
    font-size: .82rem;
    color: #6f6e6a;
}

/* ── One card per house ── */
.ao-cards[b-uef38whj0w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.1rem;
}

.ao-card[b-uef38whj0w] {
    background: #fff;
    border: 1px solid #e3e3e0;
    border-radius: 14px;
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ao-card-head[b-uef38whj0w] {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    min-width: 0;
}

.ao-card-head.is-plain[b-uef38whj0w] {
    align-items: center;
}

.ao-card-head.is-plain i[b-uef38whj0w] {
    font-size: 1.2rem;
    color: var(--theme-strong);
}

.ao-card-head.is-plain h2[b-uef38whj0w] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: #2c2c2a;
}

.ao-card-head.is-plain p[b-uef38whj0w] {
    font-size: .85rem;
    color: #6f6e6a;
    margin: .15rem 0 0;
}

.ao-thumb[b-uef38whj0w] {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--theme-tint);
    display: grid;
    place-items: center;
}

.ao-thumb img[b-uef38whj0w] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ao-thumb-empty[b-uef38whj0w] {
    color: var(--theme-strong);
    font-size: 1.4rem;
    opacity: .55;
}

.ao-head-text[b-uef38whj0w] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ao-name[b-uef38whj0w] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: #2c2c2a;
}

.ao-dot[b-uef38whj0w] {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: var(--theme-color);
}

.ao-internal[b-uef38whj0w] {
    font-size: .82rem;
    color: #8a8983;
}

.ao-url[b-uef38whj0w] {
    font-size: .85rem;
    color: var(--theme-strong);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    overflow-wrap: anywhere;
}

.ao-url:hover[b-uef38whj0w] {
    text-decoration: underline;
}

/* ── What the house is still missing ── */
.ao-warnings[b-uef38whj0w] {
    list-style: none;
    margin: 0;
    padding: .6rem .8rem;
    border-radius: 10px;
    border: 1px solid #e8d5a3;
    background: #fdf7e8;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.ao-warnings li[b-uef38whj0w] {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    font-size: .85rem;
    color: #7a5a12;
}

/* Each gap leads into the section that fixes it — the same rule as the dashboard card. */
.ao-warnings a[b-uef38whj0w] {
    color: inherit;
    text-decoration: none;
}

.ao-warnings a:hover[b-uef38whj0w] {
    text-decoration: underline;
}

/* What stops something going out at all (SettingsGapSeverity.Critical). */
.ao-warnings li.is-critical[b-uef38whj0w] {
    font-weight: 600;
    color: #a32d2d;
}

/* ── Facts ── */
.ao-facts[b-uef38whj0w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .85rem 1rem;
    margin: 0;
}

.ao-facts > div[b-uef38whj0w] {
    min-width: 0;
}

.ao-facts dt[b-uef38whj0w] {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #8a8983;
    font-weight: 600;
    margin-bottom: .15rem;
}

.ao-facts dd[b-uef38whj0w] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ao-facts dd strong[b-uef38whj0w] {
    font-size: .98rem;
    font-weight: 700;
    color: #2c2c2a;
}

.ao-facts dd strong.is-warning[b-uef38whj0w] {
    color: #a3322b;
}

.ao-fact-hint[b-uef38whj0w] {
    font-size: .78rem;
    color: #8a8983;
}

/* ── Contact ── */
.ao-contact[b-uef38whj0w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .9rem;
    padding-top: .8rem;
    border-top: 1px solid #eeeeec;
    font-size: .85rem;
    color: #6f6e6a;
}

.ao-contact-label[b-uef38whj0w] {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #8a8983;
    font-weight: 600;
    width: 100%;
}

.ao-contact a[b-uef38whj0w],
.ao-contact span:not(.ao-contact-label)[b-uef38whj0w] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #6f6e6a;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.ao-contact a:hover[b-uef38whj0w] {
    color: var(--theme-strong);
    text-decoration: underline;
}

/* ── Footer action ── */
.ao-card-foot[b-uef38whj0w] {
    margin-top: auto;
    padding-top: .3rem;
}

.ao-btn[b-uef38whj0w] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: var(--theme-color);
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}

.ao-btn:hover[b-uef38whj0w],
.ao-btn:focus-visible[b-uef38whj0w] {
    background: var(--theme-strong);
    color: #fff;
    transform: translateY(-1px);
}

/* ── Where the houses disagree ── */
.ao-card.is-diff[b-uef38whj0w] {
    margin-top: 1.5rem;
    gap: 1rem;
}

.ao-table-container[b-uef38whj0w] {
    overflow-x: auto;
}

.ao-table[b-uef38whj0w] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.ao-table th[b-uef38whj0w],
.ao-table td[b-uef38whj0w] {
    text-align: left;
    padding: .55rem .7rem;
    border-bottom: 1px solid #eeeeec;
    white-space: nowrap;
}

.ao-table thead th[b-uef38whj0w] {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #8a8983;
}

.ao-table thead th .ao-dot[b-uef38whj0w] {
    display: inline-block;
    margin-right: .35rem;
    vertical-align: middle;
}

.ao-table tbody th[b-uef38whj0w] {
    font-weight: 600;
    color: #6f6e6a;
    white-space: normal;
}

.ao-table tbody td[b-uef38whj0w] {
    font-weight: 700;
    color: #2c2c2a;
}

@media (max-width: 640px) {
    .ao-cards[b-uef38whj0w] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Administration/Property/BrandThemeEdit.razor.rz.scp.css */
/* Same "minimal canvas" treatment as the gallery administration and the Ubyport
   biometric countries page: no coloured panel, brand accent only via the shared
   theme tokens (--theme-color / -strong / -tint).
   The preview card is deliberately driven by its own --preview-* variables so it
   shows the colours being edited, not the ones currently applied to the site. */

/* Sits inside the settings frame (PropertySettingsShell), which draws the page width, the house
   picker and the heading — so the page itself is only the editor. */
.brand-page[b-zpysm1zzj6] {
    width: 100%;
}

/* Focus in the accommodation's brand colour instead of bootstrap blue */
.brand-page input:focus[b-zpysm1zzj6] {
    border-color: var(--theme-strong, var(--theme-color));
    box-shadow: 0 0 0 2px var(--theme-tint, #eef6ec);
    outline: none;
}

/* Ready-made schemes — one click sets all three colours */
.brand-palettes[b-zpysm1zzj6] {
    margin-bottom: 1.5rem;
}

.brand-palettes-label[b-zpysm1zzj6] {
    display: block;
    font-size: 0.8rem;
    color: #6f6e6a;
    margin-bottom: 6px;
}

.brand-palettes-row[b-zpysm1zzj6] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.brand-palette[b-zpysm1zzj6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 8px;
    border: 1px solid #e3e3e0;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.brand-palette:hover[b-zpysm1zzj6] {
    border-color: #d3d1c7;
}

.brand-palette.active[b-zpysm1zzj6] {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 2px var(--theme-tint, #eef6ec);
}

.brand-palette-stops[b-zpysm1zzj6] {
    display: inline-flex;
}

.brand-palette-stops span[b-zpysm1zzj6] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
    margin-left: -5px;
}

.brand-palette-stops span:first-child[b-zpysm1zzj6] {
    margin-left: 0;
}

.brand-palette-name[b-zpysm1zzj6] {
    font-size: 0.82rem;
    color: #444441;
}

/* Phone and narrow tablet: one row scrolling sideways, like the template's variants
   (.mt-variants). Wrapped, the five schemes took two rows. The row runs out past the page's 1rem
   gutter to the screen's edges and fades on the right; the 3px above and below keep the picked
   scheme's ring from being clipped. The page scrolls the picked scheme into view
   (revealActiveInRow). */
@media (max-width: 900px) {
    .brand-palettes-row[b-zpysm1zzj6] {
        flex-wrap: nowrap;
        margin: -3px -1rem;
        padding: 3px 2.5rem 3px 1rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    }

        .brand-palettes-row[b-zpysm1zzj6]::-webkit-scrollbar {
            display: none;
        }

    .brand-palette[b-zpysm1zzj6] {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

/* Editor on the left, live preview on the right */
.brand-layout[b-zpysm1zzj6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 820px) {
    .brand-layout[b-zpysm1zzj6] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.brand-fields[b-zpysm1zzj6] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.brand-color-card[b-zpysm1zzj6] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid #e3e3e0;
    border-radius: 12px;
    background: #fff;
    transition: border-color .15s;
}

.brand-color-card:hover[b-zpysm1zzj6] {
    border-color: #d3d1c7;
}

.brand-color-card.is-invalid[b-zpysm1zzj6] {
    border-color: #d99a9a;
    background: #fdf6f6;
}

/* The swatch IS the colour picker: the native input is overlaid transparently
   so the whole tile opens the OS colour dialog. */
.brand-color-swatch[b-zpysm1zzj6] {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .15);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
    cursor: pointer;
    overflow: hidden;
}

.brand-color-swatch input[type="color"][b-zpysm1zzj6] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    opacity: 0;
    cursor: pointer;
}

.brand-color-swatch .bi[b-zpysm1zzj6] {
    position: absolute;
    right: 5px;
    bottom: 4px;
    font-size: 0.75rem;
    color: #fff;
    opacity: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    transition: opacity .15s;
    pointer-events: none;
}

.brand-color-swatch:hover .bi[b-zpysm1zzj6] {
    opacity: .95;
}

.brand-color-body[b-zpysm1zzj6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.brand-color-title[b-zpysm1zzj6] {
    font-size: 0.92rem;
    font-weight: 500;
    color: #2c2c2a;
}

.brand-color-hint[b-zpysm1zzj6] {
    font-size: 0.78rem;
    color: #6f6e6a;
}

/* Manual entry stays available for exact #rrggbb / rgb() values */
.brand-color-value[b-zpysm1zzj6] {
    margin-top: 6px;
    width: 190px;
    max-width: 100%;
    padding: 4px 9px;
    border: 1px solid #d3d1c7;
    border-radius: 8px;
    background: #fff;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.8rem;
    color: #2c2c2a;
}

.brand-format[b-zpysm1zzj6] {
    font-size: 0.78rem;
    color: #a3a29b;
    margin-top: 2px;
}

/* Live preview */
.brand-preview[b-zpysm1zzj6] {
    position: sticky;
    top: 1rem;
}

.brand-preview-label[b-zpysm1zzj6] {
    display: block;
    font-size: 0.8rem;
    color: #6f6e6a;
    margin-bottom: 6px;
}

.brand-preview-card[b-zpysm1zzj6] {
    border: 1px solid #e3e3e0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.brand-preview-header[b-zpysm1zzj6] {
    padding: 12px 14px;
    background: var(--preview-main);
    color: #fff;
    font-weight: 500;
}

.brand-preview-body[b-zpysm1zzj6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
}

.brand-preview-pill[b-zpysm1zzj6] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--preview-tint);
    color: var(--preview-strong);
    font-size: 0.75rem;
}

.brand-preview-text[b-zpysm1zzj6] {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: #6f6e6a;
}

.brand-preview-buttons[b-zpysm1zzj6] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.brand-preview-btn[b-zpysm1zzj6] {
    padding: 6px 14px;
    border: 1px solid var(--preview-main);
    border-radius: 8px;
    background: var(--preview-main);
    color: #fff;
    font-size: 0.82rem;
    cursor: default;
    transition: background-color .15s;
}

.brand-preview-btn:hover[b-zpysm1zzj6] {
    background: var(--preview-strong);
    border-color: var(--preview-strong);
}

.brand-preview-btn.ghost[b-zpysm1zzj6] {
    background: transparent;
    color: var(--preview-strong);
}

.brand-preview-btn.ghost:hover[b-zpysm1zzj6] {
    background: var(--preview-tint);
}

/* Actions */
.brand-actions[b-zpysm1zzj6] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.brand-revert[b-zpysm1zzj6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #e3e3e0;
    border-radius: 8px;
    background: #fff;
    color: #6f6e6a;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.brand-revert:hover:not(:disabled)[b-zpysm1zzj6] {
    border-color: #d3d1c7;
    color: #2c2c2a;
}

.brand-revert:disabled[b-zpysm1zzj6] {
    opacity: .45;
    cursor: default;
}

.brand-dirty[b-zpysm1zzj6] {
    font-size: 0.8rem;
    color: #a3a29b;
}
/* /Pages/Administration/Property/VoucherSectionsEdit.razor.rz.scp.css */
/* Same "minimal canvas" treatment as the accommodation settings and the gallery
   administration: no coloured panel, brand accent only through the shared theme
   tokens (--theme-color / -strong / -tint).
   Nothing here goes through the shared form components, so the global rounded
   white .input-container never wraps these fields — the title input is a plain
   element styled below, the text is PlaceholderTextEditor with styles of its own. */

/* Sits inside the settings frame (PropertySettingsShell), which draws the page width, the house
   picker and the heading — so the page itself is only the editor. */
.vs-page[b-345kbehz35] {
    width: 100%;
    max-width: 900px;
}

/* ── Intro of the selected document ── */
.vs-toolbar[b-345kbehz35] {
    margin-top: .25rem;
}

.vs-intro[b-345kbehz35] {
    margin: 0;
    max-width: 70ch;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #6f6e6a;
}

/* ── Language tabs, with the sample of the tab on screen on the right ── */
.vs-lang-row[b-345kbehz35] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 4px;
    margin: 1rem 0;
}

.vs-lang-row .vs-lang-tabs[b-345kbehz35] {
    margin: 0;
}

.vs-sample[b-345kbehz35] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    font-size: 0.85rem;
}

.vs-sample-label[b-345kbehz35] {
    color: #8a8a85;
}

.vs-sample-link[b-345kbehz35] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid #e3e3e0;
    border-radius: 8px;
    background: #fff;
    color: var(--theme-strong, var(--theme-color));
    text-decoration: none;
    line-height: 1.4;
    transition: background .15s, border-color .15s;
}

.vs-sample-link:hover[b-345kbehz35] {
    border-color: var(--theme-color);
    background: var(--theme-tint, #f1f5ee);
}

.vs-sample-note[b-345kbehz35] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: -.25rem 0 1rem;
    font-size: 0.8rem;
    color: #8a6d1f;
}

.vs-lang-tabs[b-345kbehz35] {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin: 1rem 0 1rem;
    background: #f5f4f0;
    border: 1px solid #e3e3e0;
    border-radius: 10px;
}

.vs-lang-tab[b-345kbehz35] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #6f6e6a;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.vs-lang-tab:hover:not(.is-active)[b-345kbehz35] {
    color: #2c2c2a;
}

.vs-lang-tab.is-active[b-345kbehz35] {
    background: #fff;
    color: var(--theme-strong, var(--theme-color));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.vs-lang-count[b-345kbehz35] {
    min-width: 20px;
    padding: 0 5px;
    border-radius: 20px;
    background: #e8e7e2;
    color: #6f6e6a;
    font-size: 0.72rem;
    line-height: 18px;
    text-align: center;
}

.vs-lang-tab.is-active .vs-lang-count[b-345kbehz35] {
    background: var(--theme-tint, #f1f5ee);
    color: var(--theme-strong, var(--theme-color));
}

/* Phone: the track scrolls sideways instead of squeezing its tabs — "Informace k příjezdu" broke
   onto two lines inside its tab, and the German names ran past the screen. Narrower tabs keep
   both Czech documents whole on a 375px screen; a tab cut at the track's edge, on a narrower one
   or in German, reads as "there is more". */
@media (max-width: 560px) {
    .vs-lang-tabs[b-345kbehz35] {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

        .vs-lang-tabs[b-345kbehz35]::-webkit-scrollbar {
            display: none;
        }

    .vs-lang-tab[b-345kbehz35] {
        flex-shrink: 0;
        gap: 6px;
        padding: 6px 12px;
        white-space: nowrap;
    }
}

/* ── Hints ── */
.vs-hints[b-345kbehz35] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 1.25rem;
}

.vs-hint[b-345kbehz35] {
    padding: 12px 14px;
    background: #fafaf7;
    border: 1px solid #ecebe6;
    border-radius: 12px;
}

.vs-hint-title[b-345kbehz35] {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--theme-strong, var(--theme-color));
    margin-bottom: 6px;
}

.vs-hint p[b-345kbehz35] {
    margin: 0 0 6px;
    font-size: 0.8rem;
    line-height: 1.55;
    color: #6f6e6a;
}

.vs-hint a[b-345kbehz35] {
    font-size: 0.8rem;
    color: var(--theme-strong, var(--theme-color));
}

/* ── One section ── */
.vs-card[b-345kbehz35] {
    background: #fff;
    border: 1px solid #ecebe6;
    border-radius: 14px;
    padding: 14px 16px 16px;
    margin-bottom: 1rem;
}

.vs-card-head[b-345kbehz35] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* The number the section will actually carry on the printed page — or a pilcrow
   when it has no heading and therefore no number. */
.vs-card-number[b-345kbehz35] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--theme-tint, #f1f5ee);
    color: var(--theme-strong, var(--theme-color));
    font-size: 0.85rem;
    font-weight: 600;
}

.vs-card-title[b-345kbehz35] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid #e3e3e0;
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: #2c2c2a;
}

.vs-card-title:focus[b-345kbehz35] {
    outline: none;
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px var(--theme-tint, #f1f5ee);
}

.vs-card-actions[b-345kbehz35] {
    display: inline-flex;
    gap: 4px;
}

.vs-card-actions button[b-345kbehz35] {
    width: 30px;
    height: 30px;
    border: 1px solid #e3e3e0;
    border-radius: 8px;
    background: #fff;
    color: #6f6e6a;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.vs-card-actions button:hover:not(:disabled)[b-345kbehz35] {
    background: #f5f4f0;
    color: #2c2c2a;
}

.vs-card-actions button:disabled[b-345kbehz35] {
    opacity: .4;
    cursor: default;
}

.vs-card-actions .vs-remove:hover[b-345kbehz35] {
    border-color: #e0b4b4;
    background: #fdf3f3;
    color: #a33;
}

.vs-card-hint[b-345kbehz35] {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #8a8a85;
}

/* ── Empty state and actions ── */
.vs-empty[b-345kbehz35] {
    padding: 1.5rem;
    margin-bottom: 1rem;
    background: #fafaf7;
    border: 1px dashed #dedcd5;
    border-radius: 12px;
    text-align: center;
    font-size: 0.85rem;
    color: #6f6e6a;
}

.vs-actions[b-345kbehz35] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.vs-add[b-345kbehz35] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px dashed #d6d4cd;
    border-radius: 9px;
    background: transparent;
    color: #6f6e6a;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.vs-add:hover[b-345kbehz35] {
    border-color: var(--theme-color);
    color: var(--theme-strong, var(--theme-color));
}
/* /Pages/Administration/Security/Roles.razor.rz.scp.css */
/* Roles — the same shared form "bubble" as the users page (.pf-* in
   styles/Pages/Components/publicForm.css): the shell, its tinted head, the cards, the field chrome
   and the submit bar all come from there.

   What is left here is what only this page has: the list of roles that opens one row at a time, the
   permission matrix inside the open one, the "apply to the accounts in it" line under it, and the
   quiet buttons of a row.

   Deliberately the users page's twin in look — the two are read one after the other ("what does
   personál mean" / "who is personál"), and a second visual language between them would only make
   the pair harder to hold. */

/* ── Widths ── */
/* One column at the form's width: a role is a list of ten ticks, and stretching that to the 1150px
   canvas would put the checkbox and its label at opposite ends of the screen. */
.ro-page[b-ji7p5j3133] {
    max-width: 860px;
}

.ro-list[b-ji7p5j3133] {
    margin-top: 1.25rem;
}

/* ── The list ── */
.ro-items[b-ji7p5j3133] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.ro-item[b-ji7p5j3133] {
    border: 1px solid #e6e3dd;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

.ro-item.is-open[b-ji7p5j3133] {
    border-color: var(--theme-strong, #3d6b33);
    box-shadow: 0 2px 10px rgba(44, 44, 42, .06);
}

/* ── The row that opens a role ── */
/* The whole line is the target — a chevron alone would be a 16px hit area on the far side of the
   text it belongs to. */
.ro-page .ro-row[b-ji7p5j3133] {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    margin: 0;
    padding: .8rem .9rem;
    background: none;
    border: none;
    border-radius: 0;
    font: inherit;
    text-align: left;
    color: #2c2c2a;
    cursor: pointer;
    transition: background .15s;
}

.ro-row:hover[b-ji7p5j3133] {
    background: color-mix(in srgb, var(--theme-tint, #f4f2ee) 55%, #fff);
}

.ro-item.is-open .ro-row[b-ji7p5j3133] {
    background: var(--theme-tint, #f4f2ee);
}

.ro-row-icon[b-ji7p5j3133] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--theme-tint, #f1f5ee);
    color: var(--theme-strong, var(--theme-color, #3d6b33));
    font-size: 1rem;
}

.ro-item.is-open .ro-row-icon[b-ji7p5j3133] {
    background: #fff;
}

.ro-row-text[b-ji7p5j3133] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.ro-row-name[b-ji7p5j3133] {
    font-size: .95rem;
    font-weight: 600;
    color: #2c2c2a;
}

/* What the role means, without opening it. Clipped rather than wrapped: ten areas spelled out would
   otherwise make one row taller than the three next to it. */
.ro-row-perms[b-ji7p5j3133] {
    overflow: hidden;
    font-size: .8rem;
    color: #6f6e6a;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ro-row-chevron[b-ji7p5j3133] {
    flex: none;
    color: #a3a29b;
    font-size: .9rem;
    transition: transform .18s, color .15s;
}

.ro-item.is-open .ro-row-chevron[b-ji7p5j3133] {
    color: var(--theme-strong, #3d6b33);
    transform: rotate(180deg);
}

/* ── The open role ── */
.ro-body[b-ji7p5j3133] {
    padding: 1rem .9rem 1rem;
    border-top: 1px solid #ece9e3;
}

/* ── Tags on the row ── */
/* "Vestavěná" next to the name: the roles that ship with the application can be re-ticked but not
   renamed or deleted, and that is worth saying before the buttons are missing. */
.ro-tag[b-ji7p5j3133] {
    margin-left: .5rem;
    padding: .12rem .5rem;
    border-radius: 999px;
    background: #f2f0ec;
    color: #6b6a66;
    font-size: .7rem;
    font-weight: 600;
    vertical-align: middle;
}

/* Ticks changed and not saved. It has to be visible on the closed row too — that is the state the
   warning is for. */
.ro-tag.is-dirty[b-ji7p5j3133] {
    background: #fdf1dd;
    color: #8a5a10;
}

.ro-count[b-ji7p5j3133] {
    display: block;
    font-size: .78rem;
    color: #8a8880;
}

/* ── Matrix ── */
/* The same tiles as the per-account matrix on the users page: the whole tile is the target, ten
   small checkboxes in a column would be a worse place to aim at. */
.ro-perms[b-ji7p5j3133] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .5rem;
}

/* Written from .ro-page: the tile is a <label> holding an <input>, and publicForm.css dresses every
   label and input inside .pf-page as a form field. One class more is what it takes to out-specify
   those two rules. */
.ro-page .ro-perm[b-ji7p5j3133] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0;
    padding: .6rem .75rem;
    background: #fff;
    border: 1px solid #e6e3dd;
    border-radius: 10px;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.ro-perm:hover[b-ji7p5j3133] {
    border-color: color-mix(in srgb, var(--theme-strong, #3d6b33) 45%, #d8d4cc);
}

.ro-perm.is-on[b-ji7p5j3133] {
    border-color: var(--theme-strong, #3d6b33);
    background: color-mix(in srgb, var(--theme-tint, #f4f2ee) 60%, #fff);
}

/* The administrator's row: ticked, greyed, and not a target — its access is implicit. */
.ro-perm.is-locked[b-ji7p5j3133] {
    cursor: default;
    opacity: .7;
}

.ro-perm.is-locked:hover[b-ji7p5j3133] {
    border-color: #e6e3dd;
}

.ro-page .ro-perm input[b-ji7p5j3133] {
    flex: none;
    margin-top: .15rem;
    width: 17px;
    height: 17px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    accent-color: var(--theme-color);
    cursor: pointer;
}

.ro-perm-body[b-ji7p5j3133] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.ro-perm-name[b-ji7p5j3133] {
    font-size: .9rem;
    font-weight: 600;
}

.ro-perm-hint[b-ji7p5j3133] {
    font-size: .78rem;
    color: #8a8880;
}

/* ── Apply to the accounts in the role ── */
/* The question the page exists to ask, so it sits between the matrix and the save button rather
   than in a corner. */
.ro-page .ro-apply[b-ji7p5j3133] {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 1rem 0 0;
    padding: .6rem .75rem;
    background: var(--theme-tint, #f4f2ee);
    border: 1px solid #e6e3dd;
    border-radius: 10px;
    font-size: .85rem;
    color: #2c2c2a;
    cursor: pointer;
}

.ro-page .ro-apply input[b-ji7p5j3133] {
    flex: none;
    margin: 0;
    width: 17px;
    height: 17px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    accent-color: var(--theme-color);
    cursor: pointer;
}

/* ── Buttons ── */
.ro-actions[b-ji7p5j3133] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
}

.ro-btn[b-ji7p5j3133] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    background: #fff;
    border: 1px solid #d3d1c7;
    border-radius: 8px;
    font: inherit;
    font-size: .9rem;
    color: #2c2c2a;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.ro-btn:hover:not(:disabled)[b-ji7p5j3133] {
    border-color: var(--theme-strong, #3d6b33);
    background: var(--theme-tint, #f1f5ee);
}

.ro-btn:disabled[b-ji7p5j3133] {
    opacity: .55;
    cursor: default;
}

.ro-btn.is-primary[b-ji7p5j3133] {
    background: var(--theme-color, #3d6b33);
    border-color: transparent;
    color: #fff;
    font-weight: 500;
}

.ro-btn.is-primary:hover:not(:disabled)[b-ji7p5j3133] {
    background: var(--theme-strong, #3d6b33);
    border-color: transparent;
    color: #fff;
}

.ro-btn.is-danger:hover:not(:disabled)[b-ji7p5j3133] {
    border-color: #b1483c;
    background: #fbeceb;
    color: #8c2f26;
}

/* ── Renaming ── */
/* The box opens in place of the button, so the card does not jump. */
.ro-rename[b-ji7p5j3133] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.ro-page .ro-rename-input[b-ji7p5j3133] {
    width: 14rem;
    margin: 0;
    padding: .4rem .7rem;
    border: 1px solid #d3d1c7;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: .9rem;
}

/* ── Result and states ── */
.ro-result[b-ji7p5j3133] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: .88rem;
}

.ro-result.is-ok[b-ji7p5j3133] {
    background: #edf6ec;
    color: #2f5d29;
}

.ro-result.is-error[b-ji7p5j3133] {
    background: #fbeceb;
    color: #8c2f26;
}

.ro-state[b-ji7p5j3133] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem 1rem;
    color: #6b6a66;
    font-size: .9rem;
}

.ro-state.is-error[b-ji7p5j3133] {
    color: #8c2f26;
}

/* ── Narrow screens ── */
@media (max-width: 640px) {
    .ro-btn[b-ji7p5j3133] {
        justify-content: center;
    }

    .ro-page .ro-rename-input[b-ji7p5j3133] {
        width: 100%;
    }

    /* There is no room for the areas on one line next to the name, and clipping them to three
       characters would say nothing — the row drops to the name and the head count. */
    .ro-row-perms[b-ji7p5j3133] {
        display: none;
    }
}
/* /Pages/Administration/Security/UserAccess.razor.rz.scp.css */
/* User access — the page rides on the shared form "bubble" (.pf-* in
   styles/Pages/Components/publicForm.css), the same one the invitation page uses: a 760px column,
   the shell, its tinted head and the sections all from there. The chrome shared with the other two
   account screens — the role pills, the alerts, the quiet buttons, the loading and error strips —
   is in Styles/Pages/users.css.

   What is left here is the matrix itself, which only this page draws. It moved with the panel when
   the access left the account list. */

/* ── The matrix ── */
.us-perms[b-m9lieol34g] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .5rem;
}

/* The whole tile is the target — a dozen small checkboxes in a column would be a worse place to aim
   at than a dozen labelled cards.

   Both rules below are written from .us-page on purpose: the tile is a <label> holding an <input>,
   and publicForm.css dresses every label and every input inside .pf-page as a form field. One class
   more is what it takes to out-specify those two rules. */
.us-page .us-perm[b-m9lieol34g] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0;
    padding: .6rem .75rem;
    background: #fff;
    border: 1px solid #e6e3dd;
    border-radius: 10px;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.us-perm:hover[b-m9lieol34g] {
    border-color: color-mix(in srgb, var(--theme-strong, #3d6b33) 45%, #d8d4cc);
}

.us-perm.is-on[b-m9lieol34g] {
    border-color: var(--theme-strong, #3d6b33);
    background: color-mix(in srgb, var(--theme-tint, #f4f2ee) 60%, #fff);
}

.us-page .us-perm input[b-m9lieol34g] {
    flex: none;
    margin-top: .15rem;
    width: 17px;
    height: 17px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    accent-color: var(--theme-color);
    cursor: pointer;
}

.us-perm-body[b-m9lieol34g] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.us-perm-name[b-m9lieol34g] {
    font-size: .9rem;
    font-weight: 600;
}

.us-perm-hint[b-m9lieol34g] {
    font-size: .78rem;
    color: #8a8880;
}
/* /Pages/Administration/Security/UserProfile.razor.rz.scp.css */
/* User profile — the page rides on the shared form "bubble" (.pf-* in
   styles/Pages/Components/publicForm.css), the same one the invitation and access pages use; the
   alerts, the quiet buttons and the loading and error strips are the account screens' shared chrome
   in Styles/Pages/users.css.

   What is left here is the locked field. publicForm.css dresses every input inside .pf-page white
   and has nothing for a disabled one, so the locked address would look editable and simply not
   react. ::deep, because the input is rendered by InputTextBox, not by this component. */
.pf-page[b-o4skg714pf]  input:disabled {
    background: #f4f3ef;
    color: #8a8983;
    cursor: not-allowed;
}
/* /Pages/Administration/Security/UserReservations.razor.rz.scp.css */
/* Account reservations — the page rides on the shared form bubble (.pf-* in
   styles/Pages/Components/publicForm.css) like the access page, and on the account screens' chrome
   (.us-btn, .us-result, .us-state) in Styles/Pages/users.css.

   What is left here are the reservation rows, which only this page draws. They follow the guest's
   stay list (Components/Crm/GuestStayList.razor.css) — a dot in the house's colour, the dates, the
   house, the status pill — so a stay reads the same wherever the operator meets it. */

.urs-list[b-60yjhp78io] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.urs-row[b-60yjhp78io] {
    display: flex;
    align-items: center;
    gap: .75rem 1rem;
    padding: .75rem .9rem;
    background: #fff;
    border: 1px solid #e9e7e1;
    border-radius: 10px;
}

/* A candidate somebody else already holds. Tinted rather than disabled: it can still be moved here,
   but the operator should see at a glance that it is a move and not a gift. */
.urs-row.is-owned[b-60yjhp78io] {
    background: #fcfaf5;
    border-color: #ebe2cf;
}

.urs-body[b-60yjhp78io] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.urs-line[b-60yjhp78io] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .65rem;
}

.urs-dates[b-60yjhp78io] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    white-space: nowrap;
}

/* The house, said in colour — the row's data-theme activates its tokens. */
.urs-dot[b-60yjhp78io] {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--theme-color, #8a8a8a);
}

.urs-house[b-60yjhp78io] {
    font-size: .88rem;
    color: #6f6e6a;
}

.urs-pill[b-60yjhp78io] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .55rem;
    font-size: .78rem;
    white-space: nowrap;
    background: #f3f2ee;
    border-radius: 999px;
}

.urs-pill.is-owner[b-60yjhp78io] {
    background: #f6ecd6;
    color: #7a5a17;
}

.urs-sub[b-60yjhp78io] {
    font-size: .85rem;
    color: #6f6e6a;
}

.urs-sub > span[b-60yjhp78io] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.urs-guest[b-60yjhp78io] {
    color: #2c2c2a;
    font-weight: 500;
}

.urs-actions[b-60yjhp78io] {
    flex: none;
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* ── Search ── */
.urs-search[b-60yjhp78io] {
    position: relative;
    margin-bottom: .9rem;
}

.urs-search input[b-60yjhp78io] {
    padding-right: 2.2rem;
}

.urs-search-spinner[b-60yjhp78io] {
    position: absolute;
    top: 50%;
    right: .75rem;
    margin-top: -.5rem;
    color: #a3a29b;
}

@media (max-width: 640px) {
    .urs-row[b-60yjhp78io] {
        flex-direction: column;
        align-items: stretch;
    }

    .urs-actions[b-60yjhp78io] {
        justify-content: flex-end;
    }
}
/* /Pages/Administration/Security/Users.razor.rz.scp.css */
/* Users — the page rides on the shared form "bubble" (.pf-* in
   styles/Pages/Components/publicForm.css), the same one the blockout and reservation forms use: the
   shell, its tinted head and the sections all come from there, so the screens stay identical
   without another copy of those rules. The chrome this page shares with the invitation page — the
   role pills, the alerts, the quiet buttons, the loading and error strips — is in
   Styles/Pages/users.css next to the grid.

   What is left here is what only this page draws: the list's header row and the row templates. The
   access matrix went to UserAccess.razor.css when it became a page of its own.

   The page opens up to the 1150px canvas rather than the 760px of .pf-page, so the list gets the
   same room as the reservation list. Six columns squeezed into 760px were what put a horizontal
   scrollbar under the accounts. */

/* ── Widths ── */
.us-page[b-xi4h8yze26] {
    max-width: 1150px;
}

/* ── List ── */
/* The invitation sits at the right-hand end of the card's header, opposite its title — the header
   is a flex row already, so an auto left margin is all it takes. */
.us-list-head[b-xi4h8yze26] {
    align-items: center;
}

.us-list-head > .us-btn[b-xi4h8yze26] {
    margin-left: auto;
}

/* The result of a write on a row, between the header and the grid. */
.us-result[b-xi4h8yze26] {
    margin-bottom: 1rem;
}

/* The table itself is dressed in Styles/Pages/users.css (.ua-*): HxGrid renders that markup, and
   scoped CSS cannot reach it. What follows is only what the ItemTemplates draw themselves. */
.us-name[b-xi4h8yze26] {
    display: block;
    font-weight: 600;
}

.us-sub[b-xi4h8yze26] {
    display: block;
    margin-top: .15rem;
    font-size: .78rem;
    color: #8a8880;
}

.us-chip[b-xi4h8yze26] {
    display: inline-block;
    padding: .18rem .6rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}

.us-chip.is-active[b-xi4h8yze26] {
    background: #edf6ec;
    color: #2f5d29;
}

/* An invited account that has not set a password yet — the only state the operator has to chase. */
.us-chip.is-pending[b-xi4h8yze26] {
    background: #fdf3dd;
    color: #7a5a16;
}

.us-chip.is-off[b-xi4h8yze26] {
    background: #f2f0ec;
    color: #6b6a66;
}

.us-chip.is-role[b-xi4h8yze26] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--theme-tint, #f4f2ee);
    color: var(--theme-strong, #3d6b33);
}

/* ── Narrow screens ── */
/* The invitation drops under the card's title rather than being squeezed next to it. */
@media (max-width: 640px) {
    .us-list-head[b-xi4h8yze26] {
        flex-wrap: wrap;
    }

    .us-list-head > .us-btn[b-xi4h8yze26] {
        margin-left: 0;
        width: 100%;
    }
}
/* /Pages/Administration/Settings/DataSeeds.razor.rz.scp.css */
/* Same "minimal canvas" treatment as the other Settings administration pages
   (the settings frames, styles/Pages/propertySettings.css): white cards, brand accent only via the
   shared theme tokens (--theme-color / -strong / -tint). */

.ds-page[b-qiymyr191o] {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

/* ── Card ── */
.ds-card[b-qiymyr191o] {
    background: #fff;
    border: 1px solid #e3e3e0;
    border-radius: 14px;
    padding: 18px 20px 20px;
    margin-bottom: 1.25rem;
    margin-top: .5rem;
}

.ds-card-head[b-qiymyr191o] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid #f0efeb;
}

.ds-card-head > .bi[b-qiymyr191o] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--theme-tint, #f1f5ee);
    color: var(--theme-strong, var(--theme-color));
    font-size: 1rem;
}

.ds-card-head h2[b-qiymyr191o] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #2c2c2a;
    line-height: 1.4;
}

.ds-card-head p[b-qiymyr191o] {
    margin: 2px 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #6f6e6a;
}

.ds-loading[b-qiymyr191o] {
    display: flex;
    justify-content: center;
    padding: 24px 0;
    color: #a3a29b;
}

/* ── Profile picker — radio-style cards ── */
.ds-profiles[b-qiymyr191o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.ds-profile[b-qiymyr191o] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 40px 14px 14px;
    text-align: left;
    background: #fbfbfa;
    border: 1px solid #e3e3e0;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.ds-profile:hover[b-qiymyr191o] {
    border-color: color-mix(in srgb, var(--theme-strong, var(--theme-color)) 45%, #e3e3e0);
    background: #fff;
}

.ds-profile.is-selected[b-qiymyr191o] {
    background: var(--theme-tint, #f1f5ee);
    border-color: var(--theme-strong, var(--theme-color));
    box-shadow: 0 0 0 1px var(--theme-strong, var(--theme-color));
}

.ds-profile-icon[b-qiymyr191o] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #f0efeb;
    color: #6f6e6a;
    font-size: 1rem;
    transition: background .15s, color .15s;
}

.ds-profile.is-selected .ds-profile-icon[b-qiymyr191o] {
    background: var(--theme-color);
    color: #fff;
}

.ds-profile-body[b-qiymyr191o] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ds-profile-name[b-qiymyr191o] {
    font-size: 0.92rem;
    font-weight: 600;
    color: #2c2c2a;
    line-height: 1.35;
}

.ds-profile-desc[b-qiymyr191o] {
    font-size: 0.8rem;
    line-height: 1.5;
    color: #6f6e6a;
}

.ds-profile-id[b-qiymyr191o] {
    margin-top: 4px;
    font-size: 0.7rem;
    font-family: var(--bs-font-monospace, monospace);
    color: #a3a29b;
}

.ds-profile-check[b-qiymyr191o] {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 1rem;
    color: var(--theme-strong, var(--theme-color));
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s, transform .15s;
}

.ds-profile.is-selected .ds-profile-check[b-qiymyr191o] {
    opacity: 1;
    transform: scale(1);
}

/* ── Warning note ── */
.ds-note[b-qiymyr191o] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 10px 13px;
    border-radius: 9px;
    background: #fdf6e7;
    border: 1px solid #f0e2bd;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #7a5c1e;
}

.ds-note .bi[b-qiymyr191o] {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Run row ── */
.ds-actions[b-qiymyr191o] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.ds-run[b-qiymyr191o] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    border: none;
    border-radius: 8px;
    background: var(--theme-color);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: filter .15s;
}

.ds-run .bi[b-qiymyr191o] {
    font-size: 1.05rem;
    line-height: 1;
}

.ds-run:hover:not(:disabled)[b-qiymyr191o] {
    filter: brightness(0.9);
}

.ds-run:disabled[b-qiymyr191o] {
    opacity: .6;
    cursor: default;
}

/* ── Inline result messages ── */
.ds-result[b-qiymyr191o] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 8px;
    font-size: 0.83rem;
    border: 1px solid transparent;
}

.ds-result.is-ok[b-qiymyr191o] {
    background: var(--theme-tint, #eef6ec);
    color: var(--theme-strong, #3d6b33);
    border-color: color-mix(in srgb, var(--theme-strong, #3d6b33) 25%, transparent);
}

.ds-result.is-error[b-qiymyr191o] {
    background: #fceaea;
    color: #a32d2d;
    border-color: #eecccc;
}
/* /Pages/Administration/Ubyport/PropertyUbyportSettings.razor.rz.scp.css */
/* The Ubyport section inside the house settings frame. The cards, the field grid
   and the save row come from the frame (styles/Pages/propertySettings.css); what
   is here belongs to this section alone — the status pills and the tools under
   the form. Brand accent only through the theme tokens the shell switches with
   data-theme (--theme-color / -strong / -tint). */

/* ── Status of the device, above the form ── */
.uby-status[b-45bjjttm27] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.uby-pill[b-45bjjttm27] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    border: 1px solid transparent;
}

    .uby-pill .bi[b-45bjjttm27] {
        font-size: 0.8rem;
    }

    .uby-pill.is-ok[b-45bjjttm27] {
        background: var(--theme-tint, #eef6ec);
        color: var(--theme-strong, #3d6b33);
        border-color: color-mix(in srgb, var(--theme-strong, #3d6b33) 25%, transparent);
    }

    .uby-pill.is-warn[b-45bjjttm27] {
        background: #fdf3e3;
        color: #8a5a17;
        border-color: #ecd9b4;
    }

    .uby-pill.is-test[b-45bjjttm27] {
        background: #f1efe8;
        color: #6f6e6a;
        border-color: #ddd9cd;
    }

    .uby-pill.is-prod[b-45bjjttm27] {
        background: #fff;
        color: #2c2c2a;
        border-color: #d3d1c7;
    }

/* The tools are steps of their own, not more of the form above — without the gap
   the first card sits right on the save button. */
.uby-tools[b-45bjjttm27] {
    margin-top: 2rem;
}

/* ── Inline result messages — quieter than a full-width bootstrap alert ── */
.uby-result[b-45bjjttm27] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    margin-right: 8px;
    padding: 7px 13px;
    border-radius: 8px;
    font-size: 0.83rem;
    border: 1px solid transparent;
}

    .uby-result.is-ok[b-45bjjttm27] {
        background: var(--theme-tint, #eef6ec);
        color: var(--theme-strong, #3d6b33);
        border-color: color-mix(in srgb, var(--theme-strong, #3d6b33) 25%, transparent);
    }

    .uby-result.is-error[b-45bjjttm27] {
        background: #fceaea;
        color: #a32d2d;
        border-color: #eecccc;
    }

    .uby-result.is-warn[b-45bjjttm27] {
        background: #fdf3e3;
        color: #8a5a17;
        border-color: #ecd9b4;
    }

    .uby-result.is-info[b-45bjjttm27] {
        background: #f1efe8;
        color: #5f5e5a;
        border-color: #ddd9cd;
    }

/* Technical line under a refused login — what the server actually sent. */
.uby-result-detail[b-45bjjttm27] {
    margin: 6px 0 0;
    font-size: 0.78rem;
    color: #5f5e5a;
    overflow-wrap: anywhere;
}

/* ── Button rows / inline forms ── */
.uby-button-row[b-45bjjttm27] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.uby-inline-form[b-45bjjttm27] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Utility buttons (Havit HxButton) ──
   Bootstrap compiles `.btn-primary` / `.btn-secondary` with its own blue and grey
   baked into the `--bs-btn-*` variables, so the `--bs-primary` remap in
   bootstrap-overrides.css never reaches them. The tokens go back through the
   brand theme here, so they follow the house picked in the frame.

   Light on purpose: these are utility actions inside their cards, not the
   section's commitment — that one is the solid save button of the frame.

   `::deep` because the markup is rendered by HxButton, so it carries no scope
   attribute of this page — `.uby-tools` does. */
.uby-tools[b-45bjjttm27]  .uby-btn {
    --bs-btn-color: var(--theme-strong, #3d6b33);
    --bs-btn-bg: var(--theme-tint, #eef6ec);
    --bs-btn-border-color: color-mix(in srgb, var(--theme-strong, #3d6b33) 28%, transparent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--theme-color);
    --bs-btn-hover-border-color: var(--theme-color);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--theme-strong, var(--theme-color));
    --bs-btn-active-border-color: var(--theme-strong, var(--theme-color));
    --bs-btn-disabled-color: #a3a29b;
    --bs-btn-disabled-bg: #f4f2ec;
    --bs-btn-disabled-border-color: #e6e3d9;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* The second, lesser action of a card (max list length, CSV export): the same
   shape without the fill, so the pair reads as primary + follow-up. */
.uby-tools[b-45bjjttm27]  .uby-btn.is-quiet {
    --bs-btn-bg: #fff;
    --bs-btn-color: #5f5e5a;
    --bs-btn-border-color: #ddd9cd;
    --bs-btn-hover-color: var(--theme-strong, #3d6b33);
    --bs-btn-hover-bg: var(--theme-tint, #eef6ec);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--theme-strong, #3d6b33) 28%, transparent);
}

/* Bootstrap's focus ring is an rgb triplet it mixes itself and the brand tokens
   are plain colours, so the ring is stated outright. */
.uby-tools[b-45bjjttm27]  .uby-btn:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--theme-tint, #eef6ec);
}

.uby-inline-field label[b-45bjjttm27] {
    display: block;
    text-align: left;
    font-size: 0.8rem;
    color: #6f6e6a;
    margin-bottom: 4px;
}

.uby-inline-field[b-45bjjttm27]  input {
    width: 160px;
    padding: 8px 11px;
    font-size: 0.9rem;
    color: #2c2c2a;
    background: #fff;
    border: 1px solid #d3d1c7;
    border-radius: 8px;
    outline: none;
}

/* ── XML preview ── */
.uby-code[b-45bjjttm27] {
    margin: 14px 0 0;
    padding: 12px 14px;
    max-height: 500px;
    overflow: auto;
    border: 1px solid #e3e3e0;
    border-radius: 10px;
    background: #fbfaf7;
    color: #3c3c39;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.76rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ── Code-list tabs ── */
.uby-tabs[b-45bjjttm27] {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border-radius: 10px;
    background: #f4f2ec;
    flex-wrap: wrap;
}

.uby-tab[b-45bjjttm27] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6f6e6a;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

    .uby-tab:hover:not(:disabled):not(.is-active)[b-45bjjttm27] {
        color: #2c2c2a;
    }

    .uby-tab.is-active[b-45bjjttm27] {
        background: #fff;
        color: var(--theme-strong, #2c2c2a);
        font-weight: 500;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    }

    .uby-tab:disabled[b-45bjjttm27] {
        cursor: default;
    }

/* Phone: the track scrolls sideways instead of breaking into two rows — the English and German
   names do not fit beside each other. A tab cut at the track's edge reads as "there is more". */
@media (max-width: 560px) {
    .uby-tabs[b-45bjjttm27] {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

        .uby-tabs[b-45bjjttm27]::-webkit-scrollbar {
            display: none;
        }

    .uby-tab[b-45bjjttm27] {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

.uby-empty[b-45bjjttm27] {
    margin: 16px 0 0;
    font-size: 0.85rem;
    color: #a3a29b;
}

/* ── Code-list table ── */
.uby-table-scroll[b-45bjjttm27] {
    margin-top: 16px;
    max-height: 500px;
    overflow: auto;
    border: 1px solid #e3e3e0;
    border-radius: 10px;
}

.uby-table[b-45bjjttm27] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}

    .uby-table thead th[b-45bjjttm27] {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 9px 12px;
        text-align: left;
        font-weight: 500;
        font-size: 0.75rem;
        letter-spacing: .3px;
        text-transform: uppercase;
        color: #6f6e6a;
        background: #faf9f6;
        border-bottom: 1px solid #e3e3e0;
        white-space: nowrap;
    }

    .uby-table tbody td[b-45bjjttm27] {
        padding: 8px 12px;
        color: #2c2c2a;
        border-bottom: 1px solid #f2f1ed;
        vertical-align: middle;
    }

    .uby-table tbody tr:last-child td[b-45bjjttm27] {
        border-bottom: none;
    }

    .uby-table tbody tr:hover td[b-45bjjttm27] {
        background: #fbfaf7;
    }

.uby-code-chip[b-45bjjttm27] {
    display: inline-block;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.75rem;
    letter-spacing: .5px;
    padding: 2px 7px;
    border-radius: 6px;
    background: #f1efe8;
    color: #5f5e5a;
}

/* ── Biometric visa-free countries ── */
.uby-bio-info[b-45bjjttm27] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 1.25rem;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--theme-tint, #f1f5ee);
}

    .uby-bio-info .bi-info-circle[b-45bjjttm27] {
        flex-shrink: 0;
        margin-top: 2px;
        font-size: 1.05rem;
        color: var(--theme-strong, var(--theme-color));
    }

    .uby-bio-info p[b-45bjjttm27] {
        margin: 0;
        font-size: 0.85rem;
        line-height: 1.6;
        color: #444441;
    }

/* "Číslo víza → BIOMETRIKA" stays on one line even when the sentence wraps */
.uby-bio-flow[b-45bjjttm27] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

    .uby-bio-flow .bi[b-45bjjttm27] {
        font-size: 0.75rem;
        color: #6f6e6a;
    }

.uby-bio-toolbar[b-45bjjttm27] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.uby-bio-select[b-45bjjttm27] {
    flex: 1 1 260px;
    min-width: 0;
    max-width: 360px;
}

    .uby-bio-select label[b-45bjjttm27] {
        display: block;
        text-align: left;
        font-size: 0.8rem;
        color: #6f6e6a;
        margin-bottom: 4px;
    }

    .uby-bio-select[b-45bjjttm27]  .form-select {
        border-radius: 8px;
        border-color: #d3d1c7;
    }

.uby-bio-search[b-45bjjttm27] {
    position: relative;
    margin-left: auto;
    min-width: 220px;
}

    .uby-bio-search .bi[b-45bjjttm27] {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #a3a29b;
        pointer-events: none;
    }

    .uby-bio-search input[b-45bjjttm27] {
        padding-left: 32px;
        border-radius: 8px;
        border-color: #d3d1c7;
    }

.uby-bio-summary[b-45bjjttm27] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 1.25rem;
}

.uby-bio-summary-count[b-45bjjttm27] {
    font-size: 1.35rem;
    font-weight: 600;
    color: #2c2c2a;
    line-height: 1;
}

.uby-bio-summary-label[b-45bjjttm27] {
    font-size: 0.85rem;
    color: #6f6e6a;
}

/* Country tiles — a three-column table was far too heavy for a flat list */
.uby-bio-grid[b-45bjjttm27] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.uby-bio-card[b-45bjjttm27] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e3e3e0;
    border-radius: 12px;
    background: #fff;
    transition: border-color .15s;
}

    .uby-bio-card:hover[b-45bjjttm27] {
        border-color: #d3d1c7;
    }

.uby-bio-name[b-45bjjttm27] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9rem;
    color: #2c2c2a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Quiet by default, red only on hover — a full "Odebrat" button per row was too loud */
.uby-bio-remove[b-45bjjttm27] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #a3a29b;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

    .uby-bio-remove:hover[b-45bjjttm27] {
        background: #fceaea;
        color: #a32d2d;
    }

@media (max-width: 560px) {
    .uby-bio-search[b-45bjjttm27] {
        margin-left: 0;
        min-width: 0;
        flex: 1 1 100%;
    }
}
/* /Pages/Bookings/Availability.razor.rz.scp.css */
/* Availability ("obsazenost") — the homepage layout language (HomePage.razor.css,
   Contact.razor.css) applied to the occupancy calendar: no hero card — the page opens
   on the calendar in a white frame, then three steps and the closing CTA.

   Everything is white/near-white; the accommodation's brand shows only through the
   tokens (--theme-color / -strong / -tint) that `.availability-page` carries via its
   [data-theme] attribute. The CTA pills come from the shared .page-btn
   (styles/Components/pageButton.css) and the headings from the shared .section-head
   (styles/Components/sectionHead.css). */

.availability-page[b-ng78dbp7ap] {
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* Vertical rhythm between the top-level blocks — same steps as the homepage. */
.availability-section[b-ng78dbp7ap] {
    margin-top: var(--element-spacing-tablet);
}

    /* The page opens on the calendar — the layout's own top padding is the gap. */
    .availability-section:first-child[b-ng78dbp7ap] {
        margin-top: 0;
    }

/* ── Calendar ─────────────────────────────────────────────────────────────── */

/* The card only frames the calendar; the grid, the legend and the day colours
   live in the component's own stylesheet (OccupancyCalendar.razor.css). */
.calendar-card[b-ng78dbp7ap] {
    padding: 1.25rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 16px 32px -26px rgba(0, 0, 0, .55);
    box-sizing: border-box;
}

/* ── Steps ────────────────────────────────────────────────────────────────── */

.steps[b-ng78dbp7ap] {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.step[b-ng78dbp7ap] {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.1rem 1.25rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 18px;
    box-sizing: border-box;
}

.step-num[b-ng78dbp7ap] {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-tint);
    border-radius: 14px;
    color: var(--theme-strong);
    font-size: 1.15rem;
    font-weight: 700;
}

.step-text[b-ng78dbp7ap] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.step-title[b-ng78dbp7ap] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #2f2f2f;
}

.step-desc[b-ng78dbp7ap] {
    font-size: .85rem;
    line-height: 1.5;
    color: #8a8a85;
}

/* ── Closing call to action ───────────────────────────────────────────────── */

.availability-cta[b-ng78dbp7ap] {
    margin-top: var(--element-spacing-tablet);
    padding: 2.2rem 1.5rem;
    text-align: center;
    background: var(--theme-tint);
    border: 1px solid color-mix(in srgb, var(--theme-strong) 20%, transparent);
    border-radius: 22px;
    box-sizing: border-box;
}

.cta-icon[b-ng78dbp7ap] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--theme-color);
    color: #fff;
    font-size: 1.35rem;
}

.cta-title[b-ng78dbp7ap] {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #2f2f2f;
}

.cta-text[b-ng78dbp7ap] {
    max-width: 52ch;
    margin: 0 auto 1.3rem;
    font-size: .93rem;
    line-height: 1.65;
    color: #5f5e5a;
}

.cta-actions[b-ng78dbp7ap] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media only screen and (min-width: 768px) {

    .steps[b-ng78dbp7ap] {
        grid-template-columns: repeat(3, 1fr);
    }

    .step[b-ng78dbp7ap] {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
        padding: 1.5rem 1.35rem;
    }
}

@media only screen and (min-width: 992px) {

    .availability-page[b-ng78dbp7ap] {
        padding: 0 1.5rem;
    }

    .availability-section[b-ng78dbp7ap],
    .availability-cta[b-ng78dbp7ap] {
        margin-top: var(--element-spacing-computer);
    }

    .calendar-card[b-ng78dbp7ap] {
        padding: 2rem;
        border-radius: 30px;
    }

    .steps[b-ng78dbp7ap] {
        gap: 1rem;
    }
}

@media only screen and (min-width: 1200px) {

    .availability-page[b-ng78dbp7ap] {
        padding: 0;
    }
}
/* /Pages/Bookings/CheckInCreate.razor.rz.scp.css */
/* The check-in form (page canvas, guest cards, privacy notice, submit) is styled
   by the shared styles/Pages/Components/checkIn.css, matching the reservation edit
   "minimal canvas" design and shared with CheckInEdit. */
/* /Pages/Bookings/Components/GuestFormCard.razor.rz.scp.css */
/* Guest card styling now lives in the shared styles/Pages/Components/checkIn.css
   (.checkin-card and friends), so it is consistent with the reservation edit
   "minimal canvas" design and reusable by both CheckInCreate and CheckInEdit. */
/* /Pages/Bookings/Components/OccupancyCalendar.razor.rz.scp.css */
/* Kalendář obsazenosti — stejná řeč jako zbytek veřejných stránek: bílá plocha,
   tlumené odstíny, akcent jen přes --theme-color (dnešek). Obsazenost je ale
   informace, ne dekorace, takže „obsazeno" má vlastní stálou barvu nezávislou na
   tématu objektu — jinak by u hnědého a zeleného objektu znamenala jiná barva totéž. */

/* Barvy stavů jsou globální tokeny (variables.css) — tytéž kreslí kalendáře v rezervačních
   formulářích (calendarOccupancy.css), aby host viděl obsazenost všude stejně. */
.oc[b-vufoqu3ldb] {
    --oc-free-bg: var(--occupancy-free-bg);
    --oc-free-line: var(--occupancy-free-line);
    --oc-free-fg: var(--occupancy-free-fg);
    --oc-taken-bg: var(--occupancy-taken-bg);
    --oc-taken-fg: var(--occupancy-taken-fg);
    --oc-line: #ece9e3;
    --oc-muted: var(--occupancy-muted);
}

/* ── Legenda ──────────────────────────────────────────────────────────────── */

.oc-legend[b-vufoqu3ldb] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    margin-bottom: .5rem;
}

.oc-legend-item[b-vufoqu3ldb] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    color: #5f5e5a;
}

.oc-swatch[b-vufoqu3ldb] {
    width: 14px;
    height: 14px;
    border: 1px solid var(--oc-line);
    border-radius: 4px;
}

.oc-note[b-vufoqu3ldb] {
    margin: 0 0 1.25rem;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--oc-muted);
}

/* ── Měsíce ───────────────────────────────────────────────────────────────── */

.oc-months[b-vufoqu3ldb] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.oc-month-title[b-vufoqu3ldb] {
    margin: 0 0 .6rem;
    font-size: .95rem;
    font-weight: 700;
    color: #2f2f2f;
    text-align: center;
}

.oc-grid[b-vufoqu3ldb] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.oc-weekday[b-vufoqu3ldb] {
    padding-bottom: .3rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
    color: var(--oc-muted);
}

/* ── Dny ──────────────────────────────────────────────────────────────────── */

.oc-day[b-vufoqu3ldb] {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 1px solid var(--oc-line);
    border-radius: 8px;
    font-size: .8rem;
    color: var(--oc-free-fg);
}

    /* Dny sousedních měsíců nekreslíme vůbec — mřížku drží jen prázdné místo. */
    .oc-day.is-blank[b-vufoqu3ldb] {
        border-color: transparent;
    }

/* Stav dne nesou i čtverečky legendy — nejsou to .oc-day, takže je každé pravidlo
   musí obsloužit spolu s dnem, jinak zůstanou prázdné. */
.oc-day.is-free[b-vufoqu3ldb],
.oc-swatch.is-free[b-vufoqu3ldb] {
    background: var(--oc-free-bg);
    border-color: var(--oc-free-line);
}

.oc-day.is-taken[b-vufoqu3ldb],
.oc-swatch.is-taken[b-vufoqu3ldb] {
    background: var(--oc-taken-bg);
    border-color: transparent;
}

.oc-day.is-taken[b-vufoqu3ldb] {
    color: var(--oc-taken-fg);
}

/* Půlden: den příjezdu je volný do odpoledne, den odjezdu od rána. Úhlopříčka
   drží stejný sklon u obou, mění se jen strana, na které leží obsazená půlka. */
.oc-day.is-arrival[b-vufoqu3ldb],
.oc-swatch.is-arrival[b-vufoqu3ldb] {
    background: linear-gradient(135deg, var(--oc-free-bg) 0 50%, var(--oc-taken-bg) 50% 100%);
    border-color: var(--oc-free-line);
}

.oc-day.is-departure[b-vufoqu3ldb],
.oc-swatch.is-departure[b-vufoqu3ldb] {
    background: linear-gradient(135deg, var(--oc-taken-bg) 0 50%, var(--oc-free-bg) 50% 100%);
    border-color: var(--oc-free-line);
}

.oc-day.is-past[b-vufoqu3ldb] {
    background: #faf9f7;
    border-color: transparent;
    color: var(--oc-muted);
}

/* Dnešek nese jediný barevný akcent v mřížce, aby se v ní dalo zorientovat. */
.oc-day.is-today[b-vufoqu3ldb] {
    box-shadow: inset 0 0 0 1.5px var(--theme-color);
    font-weight: 700;
}

/* ── Načtení dalšího roku ─────────────────────────────────────────────────── */

.oc-more[b-vufoqu3ldb] {
    display: flex;
    justify-content: center;
    margin-top: 1.75rem;
}

/* ── Responzivně ──────────────────────────────────────────────────────────── */

@media only screen and (min-width: 607px) {

    .oc-months[b-vufoqu3ldb] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (min-width: 903px) {

    .oc-months[b-vufoqu3ldb] {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.75rem;
    }
}

@media only screen and (min-width: 1200px) {

    .oc-months[b-vufoqu3ldb] {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* /Pages/Bookings/ReservationStatusScreen.razor.rz.scp.css */
.status-page[b-jk4z3x7qse] {
    --card-bg: #ffffff;
    --ink: #2b2b28;
    --ink-soft: #5f6460;
    --hairline: #e6e6df;

    /* Brand accent comes from the shared theme tokens (--theme-color / -strong /
       -tint), activated by the data-theme attribute on this element and defined
       once in variables.css. Semantic status colors (amber/grey/red) stay fixed
       on both brands. */
    --amber: #c9821f;
    --amber-tint: #fbf1e0;
    --red-tint: #fbecec;
    --grey-tint: #eef0ee;

    /* Vertical distance from the header is governed globally by .content (per-breakpoint
       margin-top in layout.css); we only add horizontal + bottom padding here so the gap
       stays consistent with the rest of the site instead of scaling with the viewport. */
    padding: 0 1rem 4rem;
}

.status-card[b-jk4z3x7qse] {
    max-width: 620px;
    margin: 0 auto;
    background: var(--card-bg);
    border: 1px solid var(--hairline);
    border-radius: 28px;
    box-shadow: 0 18px 50px -24px rgba(20, 60, 20, .45);
    overflow: hidden;
    font-family: var(--font);
    color: var(--ink);
}

.card-top[b-jk4z3x7qse] {
    padding: 2.6rem 2.4rem 1.8rem;
    text-align: center;
    background: linear-gradient(180deg, var(--theme-tint) 0%, #fff 100%);
    border-bottom: 1px solid var(--hairline);
}

.variant-cancelled .card-top[b-jk4z3x7qse] {
    background: linear-gradient(180deg, var(--red-tint) 0%, #fff 100%);
}

.badge[b-jk4z3x7qse] {
    width: 84px;
    height: 84px;
    margin: 0 auto 1.3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--theme-color);
    box-shadow: 0 0 0 8px var(--theme-tint);
}

.variant-completed .badge[b-jk4z3x7qse] {
    background: var(--grey);
    box-shadow: 0 0 0 8px var(--grey-tint);
}

.variant-cancelled .badge[b-jk4z3x7qse] {
    background: var(--red);
    box-shadow: 0 0 0 8px var(--red-tint);
}

.badge svg[b-jk4z3x7qse] {
    width: 44px;
    height: 44px;
}

.badge .draw[b-jk4z3x7qse] {
    stroke: #fff;
    stroke-width: 5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    animation: draw-b-jk4z3x7qse .6s .15s ease forwards;
}

@keyframes draw-b-jk4z3x7qse {
    to {
        stroke-dashoffset: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .badge .draw[b-jk4z3x7qse] {
        animation: none;
        stroke-dashoffset: 0;
    }
}

.card-top h1[b-jk4z3x7qse] {
    margin: 0 0 .6rem;
    font-size: clamp(1.4rem, 4vw, 1.8rem);
    /* 700, ne 800: web nenačítá žádný webfont, takže `--font` (Open Sans) padne na
       `sans-serif` = Arial. Ten má jen Regular a Bold — při 800 skočí Windows na
       Arial Black, což je samostatná rodina s jinými tvary písmen, takže nadpis
       vypadá jako jiné písmo než zbytek webu (`.section-title` je 700). */
    font-weight: 700;
    color: var(--ink);
    text-wrap: balance;
    line-height: 1.2;
}

/* `card-lead`, ne `lead`: bootstrap má vlastní `.lead` (font-weight: 300) a scoped
   CSS ho nepřebije — vlastní pravidlo váhu nenastavuje, takže úvodní odstavec
   karty vycházel v Open Sans Light, zatímco stejný text jinde na webu je 400. */
.card-top .card-lead[b-jk4z3x7qse] {
    margin: 0 auto;
    max-width: 44ch;
    color: var(--ink-soft);
    font-size: 1.02rem;
    line-height: 1.55;
}

.meta[b-jk4z3x7qse] {
    margin-top: 1.1rem;
    display: flex;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
}

.pill[b-jk4z3x7qse] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .9rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .3px;
}

.pill .dot[b-jk4z3x7qse] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.pill-amber[b-jk4z3x7qse] {
    background: var(--amber-tint);
    color: var(--amber);
}

.pill-green[b-jk4z3x7qse] {
    background: var(--theme-tint);
    color: var(--theme-strong);
}

.pill-grey[b-jk4z3x7qse] {
    background: var(--grey-tint);
    color: var(--grey);
}

.pill-red[b-jk4z3x7qse] {
    background: var(--red-tint);
    color: var(--red);
}

/* ── Souhrn pobytu ───────────────────────────────────────────────────────────
   Sdílená komponenta ReservationStaySummary (styly jsou tam); tady jen přes celou šířku karty
   s odsazením jako zbytek karty a oddělený od záložek pod ním. */
.summary[b-jk4z3x7qse] {
    --stay-inset: 2.4rem;
    border-bottom: 1px solid var(--hairline);
}

/* ── Záložky ─────────────────────────────────────────────────────────────────
   Podtržené záložky přes šířku karty, ne segmentová tlačítka: karta už má hlavní tlačítko
   a pilulky v hlavičce, další „tlačítka" by s nimi soupeřila. Vybraná nese barvu značky,
   ostatní jsou neutrální — stejné pravidlo jako u kroků osy. */
.tabs[b-jk4z3x7qse] {
    display: flex;
    gap: 1.6rem;
    padding: 0 2.4rem;
    border-bottom: 1px solid var(--hairline);
}

.tab[b-jk4z3x7qse] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    /* Podtržení vybrané záložky leží přes linku pod lištou, ne nad ní. */
    margin: 0 0 -1px;
    padding: 1rem 0 .85rem;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    font: inherit;
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink-soft);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.tab:hover[b-jk4z3x7qse] {
    color: var(--ink);
}

.tab[aria-selected="true"][b-jk4z3x7qse] {
    color: var(--theme-strong);
    border-bottom-color: var(--theme-color);
}

.tab:focus-visible[b-jk4z3x7qse] {
    outline: 2px solid var(--theme-color);
    outline-offset: 2px;
    border-radius: 4px;
}

.tab-count[b-jk4z3x7qse] {
    min-width: 1.35rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--grey-tint);
    color: var(--ink-soft);
    font-size: .75rem;
    line-height: 1.35;
    text-align: center;
}

.tab[aria-selected="true"] .tab-count[b-jk4z3x7qse] {
    background: var(--theme-tint);
    color: var(--theme-strong);
}

/* ── Dokumenty ───────────────────────────────────────────────────────────────
   Odsazení i nadpisy jako u .next, aby obě záložky začínaly na stejném místě. */
.documents[b-jk4z3x7qse] {
    padding: 1.9rem 2.4rem .6rem;
}

.documents h2[b-jk4z3x7qse] {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink-soft);
    margin: 0 0 1rem;
    font-weight: 700;
}

/* Seznam samotný i podmínky pod ním jsou sdílená komponenta ReservationDocumentList,
   stylovaná tam. */

/* ── Cenová nabídka ──────────────────────────────────────────────────────────
   Vlastní blok nad časovou osou, ne krok v ní: dokud je nabídka otevřená, je to jediná věc na
   stránce, se kterou má host něco udělat, a osa jen popisuje, co bude potom. Levý pruh v barvě
   značky jako u .account — obojí jsou vsuvky mimo hlavní tok karty. */
.offer[b-jk4z3x7qse] {
    margin: 1.6rem 2.4rem 0;
    padding: 1.2rem 1.3rem;
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--theme-color);
    border-radius: 4px 14px 14px 4px;
    background: var(--theme-tint);
    text-align: left;
}

.offer h2[b-jk4z3x7qse] {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink-soft);
    margin: 0 0 .9rem;
    font-weight: 700;
}

/* Obsah pruhu (rozpis, termín, tlačítko) je komponenta ReservationOfferPanel se svými styly —
   sdílí ji detail rezervace v účtu. */

@media (max-width: 560px) {
    .offer[b-jk4z3x7qse] {
        margin: 1.2rem 1.2rem 0;
    }
}

.next[b-jk4z3x7qse] {
    padding: 1.9rem 2.4rem 0.6rem;
}

.next h2[b-jk4z3x7qse] {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink-soft);
    margin: 0 0 1.2rem;
    font-weight: 700;
}

/* Samotná osa kroků je komponenta ReservationStatusSteps se svými styly. */

/* Nabídka účtu. Je to poznámka na okraj, ne další krok pobytu: proto vlevo zarovnaný
   blok s ikonou a barevným proužkem místo velké rámované karty — vedle časové osy nad
   ní působí jako součást textu a nesoupeří s hlavní akcí pod sebou. */
.account[b-jk4z3x7qse] {
    margin: 1.6rem 2.4rem 0;
    padding: 1.2rem 1.3rem;
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--theme-color);
    border-radius: 4px 14px 14px 4px;
    background: var(--theme-tint);
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: .9rem;
    align-items: start;
    text-align: left;
}

.account-ico[b-jk4z3x7qse] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--hairline);
}

.account-ico svg[b-jk4z3x7qse] {
    width: 19px;
    height: 19px;
    stroke: var(--theme-strong);
    stroke-width: 1.7;
    stroke-linecap: round;
}

.account-title[b-jk4z3x7qse] {
    margin: 0 0 .35rem;
    font-size: .98rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}

.account-text[b-jk4z3x7qse] {
    margin: 0;
    max-width: 46ch;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* Vlastní tlačítko, ne .btn — to má min-width 220px kvůli hlavní akci a v tomhle
   pruhu by vypadalo jako druhá primární volba. Stejně vypadá odkaz i <button>
   (připojení k účtu), proto font a kurzor výslovně. */
/* inline-flex kvůli spinneru vedle popisku, když se rezervace připojuje k účtu. */
.account-btn[b-jk4z3x7qse] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: .9rem;
    padding: .5rem 1.05rem;
    border: 1px solid var(--theme-color);
    border-radius: 10px;
    background: #fff;
    color: var(--theme-strong);
    font-family: inherit;
    font-size: .88rem;
    font-weight: 700;
    line-height: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.account-btn:hover:not(:disabled)[b-jk4z3x7qse] {
    background: var(--theme-color);
    color: #fff;
}

.account-btn:disabled[b-jk4z3x7qse] {
    opacity: .6;
    cursor: progress;
}

.account-hint[b-jk4z3x7qse] {
    margin: .8rem 0 0;
    max-width: 46ch;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* Sémantická červená, ne barva značky — stejně jako u stornované karty. */
.account-hint.is-error[b-jk4z3x7qse] {
    color: #a8322c;
}

.account-foot[b-jk4z3x7qse] {
    margin: .6rem 0 0;
    font-size: .86rem;
    color: var(--ink-soft);
}

.account-foot a[b-jk4z3x7qse] {
    color: var(--theme-strong);
    font-weight: 600;
    text-decoration: none;
}

/* Vlákno zpráv je sdílená komponenta stylovaná globálně (messaging.css) a žádné
   vlastní boční odsazení nemá — vnitřek karty mu dává tenhle obal. */
.messages[b-jk4z3x7qse] {
    padding: 0 2.4rem;
}

.actions[b-jk4z3x7qse] {
    padding: 1.9rem 2.4rem 2rem;
    display: flex;
    justify-content: center;
}

.btn[b-jk4z3x7qse] {
    min-width: 220px;
    text-align: center;
    padding: .95rem 1.6rem;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid var(--theme-color);
    transition: transform .12s, background .15s;
}

.btn:active[b-jk4z3x7qse] {
    transform: translateY(1px);
}

.btn-primary[b-jk4z3x7qse] {
    background: var(--theme-color);
    color: #fff;
}

/* Světlá varianta pro nabídku účtu — stojí na tónovaném pozadí, kde by plná barva
   přebila „Zpět na úvod". */
.btn-ghost[b-jk4z3x7qse] {
    background: #fff;
    color: var(--theme-strong);
}

.btn-ghost:hover[b-jk4z3x7qse] {
    background: var(--theme-color);
    color: #fff;
}

.btn-primary:hover[b-jk4z3x7qse] {
    background: var(--theme-strong);
    border-color: var(--theme-strong);
}

.variant-cancelled .btn-primary[b-jk4z3x7qse] {
    border-color: var(--red);
    background: var(--red);
}

.variant-cancelled .btn-primary:hover[b-jk4z3x7qse] {
    background: #b52a3a;
    border-color: #b52a3a;
}

.card-foot[b-jk4z3x7qse] {
    padding: 1.1rem 2.4rem 1.6rem;
    border-top: 1px solid var(--hairline);
    text-align: center;
    font-size: .88rem;
    color: var(--ink-soft);
}

.card-foot a[b-jk4z3x7qse] {
    color: var(--theme-strong);
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 480px) {
    /* Na úzkém displeji je ikona zbytečná daň z šířky textu — pruh se srovná
       do jednoho sloupce a odsazení se stáhne. */
    .account[b-jk4z3x7qse] {
        margin-left: 1.2rem;
        margin-right: 1.2rem;
        padding-left: 1rem;
        padding-right: 1rem;
        grid-template-columns: 1fr;
        gap: .7rem;
    }

    .account-ico[b-jk4z3x7qse] {
        display: none;
    }
}
/* /Pages/Crm/Contact.razor.rz.scp.css */
/* Contact page — the homepage layout language (HomePage.razor.css) applied to a
   single topic: the page heading over a grid of contact cards, the public contact
   form and the map. No hero card, the same as the price list and the gallery.

   Everything is white/near-white; the accommodation's brand shows only through the
   tokens (--theme-color / -strong / -tint) that `.contact-page` carries via its
   [data-theme] attribute. The CTA pills come from the shared .page-btn
   (styles/Components/pageButton.css) and the headings from the shared .section-head
   (styles/Components/sectionHead.css).

   Child components (contact form, map) are styled through ::deep — their markup is
   rendered outside this component's CSS scope. */

.contact-page[b-p0id7661ul] {
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* Vertical rhythm between the top-level blocks — same steps as the homepage. */
.contact-section[b-p0id7661ul] {
    margin-top: var(--element-spacing-tablet);
}

    /* No hero card — the contact details open the page, and the layout's own top
       padding is the gap. */
    .contact-section:first-child[b-p0id7661ul] {
        margin-top: 0;
    }

/* ── Contact details ──────────────────────────────────────────────────────── */

/* auto-fit, not a fixed column count: an accommodation without a Facebook page (or
   without a phone) fills the row with the cards it does have. */
.detail-grid[b-p0id7661ul] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .75rem;
}

.detail-card[b-p0id7661ul] {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.1rem 1.25rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 18px;
    text-decoration: none;
    box-sizing: border-box;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

    .detail-card:hover[b-p0id7661ul] {
        border-color: var(--theme-color);
        transform: translateY(-3px);
        box-shadow: 0 18px 32px -24px rgba(0, 0, 0, .6);
    }

    .detail-card:focus-visible[b-p0id7661ul] {
        outline: 3px solid var(--theme-strong);
        outline-offset: 3px;
    }

.detail-icon[b-p0id7661ul] {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-tint);
    border-radius: 14px;
    color: var(--theme-strong);
    font-size: 1.2rem;
}

.detail-text[b-p0id7661ul] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.detail-label[b-p0id7661ul] {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a8a85;
}

.detail-value[b-p0id7661ul] {
    margin: 0;
    font-size: 1.02rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.45;
    color: #2f2f2f;
    overflow-wrap: anywhere;
}

.detail-action[b-p0id7661ul] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .35rem;
    color: var(--theme-strong);
    font-size: .85rem;
    font-weight: 600;
}

    .detail-action .bi[b-p0id7661ul] {
        transition: transform .25s ease;
    }

.detail-card:hover .detail-action .bi[b-p0id7661ul] {
    transform: translateX(3px);
}

/* The reply time — the one thing the old hero said that the cards do not. Quiet,
   centred under the grid, so it reads as a footnote to the ways of getting in touch.
   Plain centred text with the icon inline — as a flex row the wrapped text block
   stretched to full width and left the icon stranded at the left edge on phones. */
.contact-note[b-p0id7661ul] {
    margin: 1.25rem 0 0;
    text-align: center;
    text-wrap: balance;
    font-size: .88rem;
    line-height: 1.5;
    color: #8a8a85;
}

    .contact-note .bi[b-p0id7661ul] {
        margin-right: .4rem;
        color: var(--theme-color);
    }

/* ── Form ─────────────────────────────────────────────────────────────────── */

/* The form is a standalone public form (publicForm.css) and brings its own bottom
   padding — the section rhythm above already provides that gap. */
.contact-form[b-p0id7661ul]  .pf-page {
    padding-bottom: 0;
}

/* ── Map ──────────────────────────────────────────────────────────────────── */

.map-wrap[b-p0id7661ul]  .map-container {
    width: 100%;
    max-width: none;
    height: 18rem;
    border-radius: 22px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .detail-card[b-p0id7661ul],
    .detail-action .bi[b-p0id7661ul] {
        transition: none;
    }

        .detail-card:hover[b-p0id7661ul] {
            transform: none;
        }

        .detail-card:hover .detail-action .bi[b-p0id7661ul] {
            transform: none;
        }
}

@media only screen and (min-width: 992px) {

    .contact-page[b-p0id7661ul] {
        padding: 0 1.5rem;
    }

    .contact-section[b-p0id7661ul] {
        margin-top: var(--element-spacing-computer);
    }

        .contact-section:first-child[b-p0id7661ul] {
            margin-top: 0;
        }

    /* Icon above the text, like the homepage quick links. */
    .detail-grid[b-p0id7661ul] {
        gap: 1rem;
    }

    .detail-card[b-p0id7661ul] {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
        padding: 1.5rem 1.35rem;
    }

    .map-wrap[b-p0id7661ul]  .map-container {
        height: 26rem;
        border-radius: 30px;
    }
}

@media only screen and (min-width: 1200px) {

    .contact-page[b-p0id7661ul] {
        padding: 0;
    }

    /* At full width the 15rem minimum fits only four columns, so the fifth card
       (address, phone, e-mail, Facebook, Instagram) would sit alone on a second
       row. 12rem fits all five in one row and still keeps the e-mail on one line. */
    .detail-grid[b-p0id7661ul] {
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    }
}
/* /Pages/Marketing/Components/NewsMessageList.razor.rz.scp.css */
/* News block — public homepage.
   One vertical stack on one axis: the last-minute offers first, the announcement strips under
   them.

   Three shapes live here:
     .news-panel — last minute on a computer (992px up, where the header switches to its desktop
                   row too): a framed table of rows (dates · discount · price · button), so three
                   or ten offers read like a timetable and the prices line up in one column.
     .news-offer — last minute on a phone or tablet: a card per free window, centred like a price
                   list — the dates on a chip, the price per night large in the middle, the button
                   across the bottom. One column on a phone, a centred row of cards from 560px up.
     .news-note  — a message: a full-width strip in the look of its social post, the photo on
                   the right.
   The component renders the offers both ways; `.news-last-minute` holds the two and the media
   query at the end shows one.

   `.is-sale` is a state of a row or a card, not another shape: an offer the price calendar proves
   cheaper. Everything that carries the claim — sticker or ribbon, price, strike-through — turns
   sale red. That is the one place on the public pages where a colour outside the accommodation's
   palette is deliberate, because a discount that reads in the house colours reads as decoration.

   The cards stay at font-weight 700: no webfont is loaded, so 800 falls through to Arial Black —
   another typeface than the rest of the page. The panel keeps its 800 as it always had it.

   Colours come from the [data-theme] tokens on `.news` (--theme-color / -strong / -tint),
   never from a hard-coded --green/--brown. The other exception is a message's --note-accent:
   the colour of its post's template, set on the strip itself when the template has one. */

.news[b-uvflzpcrra] {
    /* Sale red, kept local to this component — it is a price signal, not part of the brand
       palette, so it must not leak into --theme-* the rest of the page is built on. */
    --news-sale: #d92b2b;
    --news-sale-strong: #a81919;
    --news-sale-tint: #fdeceb;

    width: 100%;
    display: flex;
    flex-direction: column;
    /* Not the --element-spacing-* scale: those separate whole sections of the homepage, and
       between two items of one block they would read as two blocks. */
    gap: 1rem;
    box-sizing: border-box;
}

/* ── Last minute ────────────────────────────────────────────────────────────── */

/* The seam between the offers and the announcements is wider than the one between two
   announcements — it is where the block changes subject. */
.news-last-minute:not(:last-child)[b-uvflzpcrra] {
    margin-bottom: .75rem;
}

/* ── Last minute on a computer: the panel ───────────────────────────────────── */

.news-panel[b-uvflzpcrra] {
    /* White, not washed: the rows inside carry the tint on hover, and a gradient underneath
       them would make that hover invisible. */
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 20px;
    /* The rows' own hairlines end at the rounded corners instead of cutting across them. */
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 14px 30px -22px rgba(0, 0, 0, .45);
    box-sizing: border-box;
}

.news-panel-head[b-uvflzpcrra] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1.35rem;
    background: linear-gradient(100deg, var(--theme-tint), #fff);
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--theme-strong);
}

/* One offer per row, four columns; because every row uses the same template the dates, prices
   and buttons of the whole panel line up under each other. */
.news-row[b-uvflzpcrra] {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: .75rem 1.25rem;
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    transition: background-color .2s ease;
}

    .news-row:last-child[b-uvflzpcrra] {
        border-bottom: 0;
    }

    .news-row:hover[b-uvflzpcrra] {
        background: color-mix(in srgb, var(--theme-tint) 55%, #fff);
    }

.news-when[b-uvflzpcrra] {
    min-width: 0;
}

.news-dates[b-uvflzpcrra] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .3rem;
    font-size: 1.08rem;
    font-weight: 700;
    color: #2f2f2f;
}

    .news-dates .bi[b-uvflzpcrra] {
        font-size: .8rem;
        color: var(--theme-strong);
        opacity: .55;
    }

.news-date[b-uvflzpcrra] {
    white-space: nowrap;
}

.news-nights[b-uvflzpcrra] {
    margin-top: .2rem;
    font-size: .85rem;
    color: #7a7975;
}

/* Always rendered, empty when the offer has no discount — it holds the grid column open so a
   plain row keeps its price and button in line with a discounted one above it. */
.news-off-cell[b-uvflzpcrra] {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* The discount sticker carries the whole claim in three characters, so it is the loudest thing
   in the row on purpose — everything else stays in the calm public-page typography. */
.news-off[b-uvflzpcrra] {
    display: inline-flex;
    align-items: center;
    padding: .32rem .7rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--news-sale), var(--news-sale-strong));
    color: #fff;
    font-size: .85rem;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    box-shadow: 0 6px 14px -6px rgba(168, 25, 25, .85);
}

/* The three amounts sit on one baseline: struck-through price, new price, unit. In a row there
   is width to spare, so they read left to right as "was that, is this, per night". */
.news-price[b-uvflzpcrra] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    min-width: 0;
}

/* The price the offer replaces. Small and grey so it reads as history, but struck in the sale
   red — the line is the argument, and a grey line on grey text disappears. `<s>` carries the
   strike itself; the wrapper only holds the screen-reader label that names what the number is. */
.news-was[b-uvflzpcrra] {
    font-size: 1rem;
    font-weight: 600;
    color: #9a9a95;
}

    .news-was s[b-uvflzpcrra] {
        text-decoration: line-through;
        text-decoration-color: var(--news-sale);
        text-decoration-thickness: 2px;
    }

.news-amount[b-uvflzpcrra] {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--theme-strong);
    /* The amount never breaks: "800,- Kč" split over two lines stops being a price. */
    white-space: nowrap;
}

.news-row.is-sale .news-amount[b-uvflzpcrra] {
    color: var(--news-sale);
}

.news-per[b-uvflzpcrra] {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a8a85;
    white-space: nowrap;
}

/* The pill itself is the shared `.page-btn` (styles/Components/pageButton.css); it is only
   scaled down here so a column of buttons does not outweigh the prices beside them. */
.news-cta[b-uvflzpcrra] {
    padding: .5rem 1.05rem;
    font-size: .85rem;
}

    .news-cta .bi[b-uvflzpcrra] {
        font-size: .9rem;
    }

/* ── Last minute on a phone or tablet: the cards ────────────────────────────── */

.news-offers[b-uvflzpcrra] {
    display: grid;
    gap: .9rem;
}

.news-offers-head[b-uvflzpcrra] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 0 .15rem .1rem;
}

/* The bolt wears the sale tint, not the house's: "last minute" is the same price signal the
   ribbons on the cards below carry. */
.news-offers-bolt[b-uvflzpcrra] {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--news-sale-tint);
    color: var(--news-sale);
    font-size: 1.05rem;
}

.news-offers-title[b-uvflzpcrra] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    color: #2f2f2f;
}

.news-offers-sub[b-uvflzpcrra] {
    display: block;
    font-size: .82rem;
    color: #7a7975;
}

/* One column on a phone; from 560px up the cards sit side by side, centred and capped at 22rem,
   so a single offer does not stretch into a banner with its price lost in the middle. The 20.5rem
   floor is what keeps the date chip clear of the corner ribbon. */
.news-offer-list[b-uvflzpcrra] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .9rem;
}

/* A column, not a grid: in a row of cards the button sits on the bottom edge of each, however
   many lines the card above it has (an offer without a discount has one fewer). */
.news-offer[b-uvflzpcrra] {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 1.35rem 1.1rem 1.1rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 16px 30px -22px rgba(0, 0, 0, .5);
    text-align: center;
    box-sizing: border-box;
}

    /* Room for the ribbon: without it the corner would cut into the end of the date chip. */
    .news-offer.is-sale[b-uvflzpcrra] {
        padding-top: 2.4rem;
    }

.news-offer-body[b-uvflzpcrra] {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
}

.news-offer-dates[b-uvflzpcrra] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .85rem;
    border-radius: 999px;
    background: var(--theme-tint);
    color: var(--theme-strong);
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
}

.news-offer-nights[b-uvflzpcrra] {
    font-size: .8rem;
    color: #8a8a85;
}

/* The price per night is the loudest thing on the card — the dates are on it to be checked, the
   price to be decided on. */
.news-offer-price[b-uvflzpcrra] {
    margin-top: .4rem;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .35rem;
}

.news-offer-amount[b-uvflzpcrra] {
    font-size: 2.15rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.01em;
    color: var(--theme-strong);
    /* The amount never breaks: "800,- Kč" split over two lines stops being a price. */
    white-space: nowrap;
}

.news-offer.is-sale .news-offer-amount[b-uvflzpcrra] {
    color: var(--news-sale);
}

.news-offer-per[b-uvflzpcrra] {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a8a85;
    white-space: nowrap;
}

/* The price the offer replaces. Small and grey so it reads as history, but struck in the sale
   red — the line is the argument, and a grey line on grey text disappears. */
.news-offer-was[b-uvflzpcrra] {
    font-size: .82rem;
    color: #8a8a85;
}

    .news-offer-was s[b-uvflzpcrra] {
        font-weight: 600;
        text-decoration: line-through;
        text-decoration-color: var(--news-sale);
        text-decoration-thickness: 2px;
        white-space: nowrap;
    }

/* The discount across the top right corner. The card's overflow cuts its ends off, so it reads as
   a sash wrapped round the card rather than a label stuck on it. */
.news-offer-ribbon[b-uvflzpcrra] {
    position: absolute;
    top: 1.15rem;
    right: -2.45rem;
    width: 9rem;
    padding: .28rem 0;
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--news-sale), var(--news-sale-strong));
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 4px 10px -4px rgba(168, 25, 25, .8);
}

/* The pill itself is the shared `.page-btn` (styles/Components/pageButton.css), here across the
   whole card: it is the one thing on the card to do. */
.news-offer-cta[b-uvflzpcrra] {
    width: 100%;
    margin-top: .75rem;
    padding: .85rem 1rem;
    font-size: 1.02rem;
}

/* ── Message: the note ──────────────────────────────────────────────────────── */

/* The strip wears the look of the message's social post: its template's colour as the left edge,
   a wash under the text and the badge, and the season's drawings hung on the photo the way the
   post hangs them on its own. --note-accent is the template's colour, set inline on the strip;
   without one it is the house's.

   The colour is the left border itself rather than a bar laid inside it: a border follows the
   rounded corners and thins out into the top and bottom edges, where a separate bar with its own
   rounding curved the other way than the card. */
.news-note[b-uvflzpcrra] {
    --note-accent: var(--theme-color);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
    padding: 1.1rem;
    background: linear-gradient(100deg, color-mix(in srgb, var(--note-accent) 11%, #fff) 0%, #fff 62%);
    border: 1px solid rgba(0, 0, 0, .06);
    border-left: 4px solid var(--note-accent);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 14px 30px -22px rgba(0, 0, 0, .45);
    box-sizing: border-box;
}

    /* Room above the photo for the drawing on its corner, which reaches over the top edge. */
    .news-note.is-dressed[b-uvflzpcrra] {
        padding-top: 1.9rem;
    }

.news-note-body[b-uvflzpcrra] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 0 .35rem .3rem .5rem;
    min-width: 0;
}

.news-note-meta[b-uvflzpcrra] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .7rem;
}

.news-note-badge[b-uvflzpcrra] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .7rem;
    border-radius: 999px;
    background: var(--note-accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.2;
}

.news-note-date[b-uvflzpcrra] {
    font-size: .8rem;
    font-weight: 600;
    color: #8a8a85;
}

.news-note-title[b-uvflzpcrra] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    color: #2f2f2f;
    overflow-wrap: break-word;
}

/* Keeps the line breaks the admin typed in; the measure stops a short text from running the
   whole width of the page in one line. */
.news-note-content[b-uvflzpcrra] {
    margin: 0;
    max-width: 62ch;
    font-size: .97rem;
    line-height: 1.65;
    color: #5f5e5a;
    white-space: pre-line;
    overflow-wrap: break-word;
}

/* Above the text on a phone, a 15rem column on the right from 760px up. */
.news-note-media[b-uvflzpcrra] {
    position: relative;
    margin: 0;
    order: -1;
}

.news-note-photo[b-uvflzpcrra] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 14px;
    background: var(--theme-tint);
    box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .55);
}

/* The season's bunch (340 × 300 in the post, anchored at 280, 80): the translate puts that point
   on the photo's top right corner, the rest hangs over the edges as it does in the post. */
.news-note-corner[b-uvflzpcrra] {
    position: absolute;
    top: 0;
    right: 0;
    width: 116px;
    height: auto;
    transform: translate(17.65%, -26.67%);
    pointer-events: none;
}

/* The snow lies on the photo's top edge: its base line (34 of 64) on the edge. */
.news-note-edge[b-uvflzpcrra] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 28px;
    transform: translateY(-53%);
    pointer-events: none;
}

@media only screen and (min-width: 760px) {

    .news-note[b-uvflzpcrra] {
        grid-template-columns: minmax(0, 1fr) 15rem;
        align-items: center;
        gap: 2rem;
        padding: 1.35rem 1.35rem 1.35rem 1.65rem;
    }

        .news-note.no-photo[b-uvflzpcrra] {
            grid-template-columns: minmax(0, 1fr);
        }

    .news-note-body[b-uvflzpcrra] {
        padding: 0;
    }

    .news-note-media[b-uvflzpcrra] {
        order: 0;
    }

    .news-note-photo[b-uvflzpcrra] {
        aspect-ratio: 4 / 3;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */

/* Phones and tablets get the cards, a computer the panel. */
.news-panel[b-uvflzpcrra] {
    display: none;
}

/* The narrowest phones: the card is under 300px wide and the ribbon would touch the date chip. */
@media only screen and (max-width: 340px) {

    .news-offer.is-sale[b-uvflzpcrra] {
        padding-top: 2.9rem;
    }
}

/* Side by side. Every card gets the ribbon's head room, so the chips of a row line up whether
   or not the card next to them has a discount. The heading is centred with the cards it names. */
@media only screen and (min-width: 560px) {

    .news-offers-head[b-uvflzpcrra] {
        justify-content: center;
    }

    .news-offer-list[b-uvflzpcrra] {
        grid-template-columns: repeat(auto-fit, minmax(20.5rem, 22rem));
        justify-content: center;
        gap: 1rem;
    }

    .news-offer[b-uvflzpcrra] {
        padding-top: 2.4rem;
    }
}

/* A computer: the panel instead of the cards, from the width the header switches to its desktop
   row at. */
@media only screen and (min-width: 992px) {

    .news[b-uvflzpcrra] {
        gap: 1.25rem;
    }

    .news-panel[b-uvflzpcrra] {
        display: block;
    }

    .news-offers[b-uvflzpcrra] {
        display: none;
    }
}

@media only screen and (min-width: 1200px) {

    .news-row[b-uvflzpcrra] {
        padding: 1.25rem 1.6rem;
    }

    .news-panel-head[b-uvflzpcrra] {
        padding: 1rem 1.6rem;
    }
}