/* /Components/Layout/EmptyLayout.razor.rz.scp.css */
.page[b-dymt97hadb] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    color: #1e293b;
    min-height: 100vh;
    overflow: hidden;
}

main[b-dymt97hadb] {
    --embed-zoom: 0.8;
    flex: 1;
    zoom: var(--embed-zoom);
}

.content[b-dymt97hadb] {
    padding: 2rem !important;
    max-width: 1400px;
    margin: 0 auto;
}

/* Dark mode theme for page background */
.page:has(.theme-darkmode)[b-dymt97hadb] {
    background: #0a0f1e;
    color: #e5e7eb;
}

/* Wooden theme for page background */
.page:has(.theme-wooden)[b-dymt97hadb] {
    background: linear-gradient(180deg, #fefce8 0%, #fef3c7 100%);
    color: #6d4c3d;
}

/* Nature theme for page background */
.page:has(.theme-nature)[b-dymt97hadb] {
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    color: #065f46;
}

#blazor-error-ui[b-dymt97hadb] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-dymt97hadb] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

@media (max-width: 800px) {
    main[b-dymt97hadb] {
        --embed-zoom: 0.7;
    }
}

@media (max-width: 450px) {
    main[b-dymt97hadb] {
        --embed-zoom: 0.65;
    }

    .content[b-dymt97hadb] {
        padding: 1rem !important;
    }
}
/* /Components/Pages/AdminSmtpSettings.razor.rz.scp.css */
.smtp-form-grid[b-3qlq4kd8a5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1.5rem;
    margin-bottom: 1rem;
}

.smtp-form-grid-full[b-3qlq4kd8a5] {
    grid-column: 1 / -1;
}

.smtp-password-input[b-3qlq4kd8a5] {
    position: relative;
    display: flex;
}

.smtp-password-input .input[b-3qlq4kd8a5] {
    flex: 1;
    padding-right: 4.25rem;
    font-family: inherit;
    letter-spacing: 0.02em;
}

.smtp-password-toggle[b-3qlq4kd8a5] {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    appearance: none;
    border: none;
    background: transparent;
    color: var(--bc-text-muted, #9aa0a6);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.smtp-password-toggle:hover[b-3qlq4kd8a5] {
    color: var(--bc-text);
    background: rgba(255, 255, 255, 0.06);
}

.smtp-security-chips[b-3qlq4kd8a5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.smtp-security-chip[b-3qlq4kd8a5] {
    appearance: none;
    border: 1px solid var(--bc-panel-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--bc-text);
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.smtp-security-chip:hover[b-3qlq4kd8a5] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}

.smtp-security-chip.active[b-3qlq4kd8a5] {
    background: rgba(79, 70, 229, 0.25);
    border-color: rgba(99, 102, 241, 0.7);
    color: #fff;
}

.smtp-checks[b-3qlq4kd8a5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.5rem;
}

.smtp-actions[b-3qlq4kd8a5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.smtp-test-action[b-3qlq4kd8a5] {
    align-self: end;
    display: flex;
}

@media (max-width: 700px) {
    .smtp-form-grid[b-3qlq4kd8a5] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/ClientSetup.razor.rz.scp.css */
/* Layout-theme swatch strip, same visual language as GuestHouseDesignCard's copy —
   duplicated because CSS isolation scopes each component's styles to its own markup. */
.layout-swatch-strip[b-5vuejwk7a3] {
    display: flex;
    height: 14px;
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.layout-swatch-strip > span[b-5vuejwk7a3] {
    flex: 1;
}
/* /Components/Pages/Guest/GuestBookingRequests.razor.rz.scp.css */
.booking-row[b-mwcgdiiab4] {
    cursor: pointer;
}

.booking-row:hover[b-mwcgdiiab4] {
    background: rgba(96, 165, 250, 0.08) !important;
}

.guest-request-detail-body[b-mwcgdiiab4] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.guest-request-status-row[b-mwcgdiiab4],
.guest-request-house-row[b-mwcgdiiab4],
.guest-request-price-line[b-mwcgdiiab4],
.guest-request-price-total[b-mwcgdiiab4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.guest-request-house-row[b-mwcgdiiab4],
.guest-request-date-grid[b-mwcgdiiab4],
.guest-request-price-box[b-mwcgdiiab4] {
    border: 1px solid var(--bc-panel-border);
    border-radius: 10px;
    padding: 0.9rem 1rem;
}

.guest-request-house-name[b-mwcgdiiab4] {
    font-size: 1.05rem;
    font-weight: 700;
}

.guest-request-chat-button[b-mwcgdiiab4] {
    color: var(--bc-muted);
}

.guest-request-chat-button:hover[b-mwcgdiiab4] {
    color: var(--bc-accent);
}

.guest-request-date-grid[b-mwcgdiiab4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.guest-request-notes[b-mwcgdiiab4] {
    margin: 0.25rem 0 0;
    white-space: pre-wrap;
}

.guest-request-price-line[b-mwcgdiiab4] {
    padding: 0.15rem 0;
    font-size: 0.88rem;
}

.guest-request-price-line.optional[b-mwcgdiiab4] {
    opacity: 0.78;
}

.guest-request-price-calc[b-mwcgdiiab4] {
    color: var(--bc-muted);
    font-size: 0.82rem;
}

.guest-request-price-total[b-mwcgdiiab4] {
    border-top: 1px solid var(--bc-panel-border);
    margin-top: 0.45rem;
    padding-top: 0.55rem;
    font-weight: 700;
}

@media (max-width: 560px) {
    .guest-request-date-grid[b-mwcgdiiab4] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Public/CalendarEmbed.razor.rz.scp.css */
/* Public calendar embed - fixed light theme, no theme switching */
.calendar-hero[b-pysbamlpjc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 8px;
    flex-wrap: wrap;
}

/* The only real call to action on a visiting guest's screen, so it gets to look like one:
   a solid high-contrast fill rather than the green-on-green gradient with gold text this
   used to be — that read as decoration and lost its edges against the nature/wooden heroes.
   Per-theme fills below keep the contrast on the dark and warm heroes. */
.request-booking-btn[b-pysbamlpjc] {
    margin-top: 1rem;
    min-height: 44px;
    padding: 0 1.25rem;
    border: none;
    border-radius: 10px;
    background: #0a8f5b;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(10, 143, 91, 0.3);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.request-booking-btn:hover[b-pysbamlpjc],
.request-booking-btn:focus-visible[b-pysbamlpjc] {
    background: #077a4b;
    box-shadow: 0 10px 24px rgba(10, 143, 91, 0.38);
}

.calendar-hero.theme-darkmode .request-booking-btn[b-pysbamlpjc] {
    background: #a78bfa;
    color: #14092e;
    box-shadow: 0 6px 16px rgba(167, 139, 250, 0.35);
}

.calendar-hero.theme-darkmode .request-booking-btn:hover[b-pysbamlpjc],
.calendar-hero.theme-darkmode .request-booking-btn:focus-visible[b-pysbamlpjc] {
    background: #c4b5fd;
}

.calendar-hero.theme-wooden .request-booking-btn[b-pysbamlpjc] {
    background: #8b5a3c;
    color: #fef3c7;
    box-shadow: 0 6px 16px rgba(139, 90, 60, 0.35);
}

.calendar-hero.theme-wooden .request-booking-btn:hover[b-pysbamlpjc],
.calendar-hero.theme-wooden .request-booking-btn:focus-visible[b-pysbamlpjc] {
    background: #6d4c3d;
}

.calendar-hero.theme-nature .request-booking-btn[b-pysbamlpjc] {
    background: #047857;
    color: #ffffff;
}

.calendar-hero.theme-nature .request-booking-btn:hover[b-pysbamlpjc],
.calendar-hero.theme-nature .request-booking-btn:focus-visible[b-pysbamlpjc] {
    background: #065f46;
}

.hero-success-banner[b-pysbamlpjc] {
    flex-basis: 100%;
    order: 1;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.06));
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #15803d;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
}

.hero-success-banner > span[b-pysbamlpjc] {
    font-weight: 700;
    margin-right: 0.25rem;
}

.calendar-hero > :first-child[b-pysbamlpjc] { order: 0; }
.calendar-hero > .legend-container[b-pysbamlpjc] { order: 0; }

.calendar-hero h1[b-pysbamlpjc] {
    color: #1e293b;
    margin: 0;
}

.calendar-hero p[b-pysbamlpjc] {
    color: #64748b;
    margin: 0.5rem 0;
}

.calendar-hero .badge[b-pysbamlpjc] {
    font-size: 0.85rem;
}

.legend-container[b-pysbamlpjc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
}

.legend[b-pysbamlpjc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.legend-swatch[b-pysbamlpjc] {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
}

.legend .small[b-pysbamlpjc] {
    color: #64748b;
    font-weight: 500;
}

/* Available swatch - green */
.legend-swatch.available-swatch[b-pysbamlpjc] {
    background: #22c55e;
    border-color: #16a34a;
}

/* The swatch now also carries its layout class (so ConnectedPills can tint it), and the
   .legend-swatch.layout-* booked rules further down would otherwise match it too and paint
   it booked-red. These three-class selectors re-assert the available fill over them. */
.legend-swatch.available-swatch.layout-greenred[b-pysbamlpjc],
.legend-swatch.available-swatch.layout-greenredpattern[b-pysbamlpjc] {
    background: #22c55e;
    border-color: #16a34a;
}

.legend-swatch.available-swatch.layout-connectedpills[b-pysbamlpjc] {
    background: #effaf4;
    border-color: #d9efe4;
}

/* Half-day swatch - diagonal split */
.legend-swatch.half-day-swatch.layout-greenred[b-pysbamlpjc] {
    background: linear-gradient(135deg, #22c55e 50%, #ef4444 50%);
    border-color: #16a34a;
}

.legend-swatch.half-day-swatch.layout-greenredpattern[b-pysbamlpjc] {
    background:
        linear-gradient(135deg, #22c55e 50%, transparent 50%),
        repeating-linear-gradient(135deg, #ef4444, #ef4444 6px, #b91c1c 6px, #b91c1c 12px);
    border-color: #16a34a;
}

.legend-swatch.half-day-swatch.layout-bluestripes[b-pysbamlpjc] {
    background: linear-gradient(135deg, #ffffff 50%, #4ca3dd 50%);
    border-color: #4ca3dd;
}

.legend-swatch.half-day-swatch.layout-darkmode[b-pysbamlpjc] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 50%, #334155 50%);
    border-color: #7c3aed;
}

.legend-swatch.half-day-swatch.layout-woodenpattern[b-pysbamlpjc] {
    background: linear-gradient(135deg, #fefce8 50%, #8b5a3c 50%);
    border-color: #6d4c3d;
}

.legend-swatch.half-day-swatch.layout-naturegreen[b-pysbamlpjc] {
    background: linear-gradient(135deg, #ecfdf5 50%, #059669 50%);
    border-color: #047857;
}

/* ConnectedPills marks the changeover with the pill's rounded light cap rather than a
   diagonal split, so its swatch shows the cap shape instead. */
.legend-swatch.half-day-swatch.layout-connectedpills[b-pysbamlpjc] {
    background: linear-gradient(to right, #9fe3c6 50%, #0a8f5b 50%);
    border-color: #d9efe4;
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

/* Layout 1: GreenRed - Solid red */
.legend-swatch.layout-greenred[b-pysbamlpjc] {
    background: #ef4444;
    border-color: #dc2626;
}

/* GreenRedPattern - striped red (colorblind-safe greenred variant) */
.legend-swatch.layout-greenredpattern[b-pysbamlpjc] {
    background: repeating-linear-gradient(135deg, #ef4444, #ef4444 6px, #b91c1c 6px, #b91c1c 12px);
    border-color: #dc2626;
}

/* Layout 2: BlueStripes - Blue diagonal stripes */
.legend-swatch.layout-bluestripes[b-pysbamlpjc] {
    background: repeating-linear-gradient(
        135deg,
        #4ca3dd,
        #4ca3dd 8px,
        #e3f0ff 8px,
        #e3f0ff 16px
    );
    border-color: #4ca3dd;
}

/* Layout 3: DarkMode - Dark gradient with purple */
.legend-swatch.layout-darkmode[b-pysbamlpjc] {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-color: #7c3aed;
    box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.3);
}

/* Layout 4: WoodenPattern - Wood grain pattern */
.legend-swatch.layout-woodenpattern[b-pysbamlpjc] {
    background: repeating-linear-gradient(
        90deg,
        #8b5a3c,
        #8b5a3c 4px,
        #a0684d 4px,
        #a0684d 8px,
        #6d4c3d 8px,
        #6d4c3d 12px
    );
    border-color: #6d4c3d;
}

/* Layout 5: NatureGreen - Leaves pattern */
/* ConnectedPills - solid green core of the pill */
.legend-swatch.layout-connectedpills[b-pysbamlpjc] {
    background: #0a8f5b;
    border-color: #0a8f5b;
}

.legend-swatch.layout-naturegreen[b-pysbamlpjc] {
    background: repeating-linear-gradient(
        -45deg,
        #059669,
        #059669 6px,
        #10b981 6px,
        #10b981 12px,
        #047857 12px,
        #047857 18px
    );
    border-color: #047857;
}

.calendar-container[b-pysbamlpjc] {
    position: relative;
}

.month-grid[b-pysbamlpjc] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Navigation arrows */
.nav-arrow[b-pysbamlpjc] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.nav-arrow:hover[b-pysbamlpjc] {
    background: #f8fafc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-50%) scale(1.05);
}

.nav-arrow:active[b-pysbamlpjc] {
    transform: translateY(-50%) scale(0.95);
}

.nav-arrow-left[b-pysbamlpjc] {
    left: -24px;
}

.nav-arrow-right[b-pysbamlpjc] {
    right: -24px;
}

.arrow-icon[b-pysbamlpjc] {
    font-size: 1.75rem;
    font-weight: 300;
    color: #64748b;
    line-height: 1;
}

.nav-arrow:hover .arrow-icon[b-pysbamlpjc] {
    color: #3b82f6;
}

/* Dark theme navigation arrows */
.nav-arrow.nav-arrow-dark[b-pysbamlpjc] {
    background: #1e293b;
    border-color: rgba(124, 58, 237, 0.3);
}

.nav-arrow.nav-arrow-dark:hover[b-pysbamlpjc] {
    background: #334155;
    border-color: #7c3aed;
}

.nav-arrow.nav-arrow-dark .arrow-icon[b-pysbamlpjc] {
    color: #9ca3af;
}

.nav-arrow.nav-arrow-dark:hover .arrow-icon[b-pysbamlpjc] {
    color: #7c3aed;
}

/* Wooden theme navigation arrows */
.nav-arrow.nav-arrow-wooden[b-pysbamlpjc] {
    background: #fef3c7;
    border-color: #a0684d;
}

.nav-arrow.nav-arrow-wooden:hover[b-pysbamlpjc] {
    background: #fefce8;
}

.nav-arrow.nav-arrow-wooden .arrow-icon[b-pysbamlpjc] {
    color: #8b5a3c;
}

.nav-arrow.nav-arrow-wooden:hover .arrow-icon[b-pysbamlpjc] {
    color: #6d4c3d;
}

/* Nature theme navigation arrows */
.nav-arrow.nav-arrow-nature[b-pysbamlpjc] {
    background: #f0fdf4;
    border-color: #10b981;
}

.nav-arrow.nav-arrow-nature:hover[b-pysbamlpjc] {
    background: #ecfdf5;
}

.nav-arrow.nav-arrow-nature .arrow-icon[b-pysbamlpjc] {
    color: #059669;
}

.nav-arrow.nav-arrow-nature:hover .arrow-icon[b-pysbamlpjc] {
    color: #047857;
}

.nav-arrow.nav-arrow-connectedpills[b-pysbamlpjc] {
    background: #ffffff;
    border-color: #d9efe4;
}

.nav-arrow.nav-arrow-connectedpills:hover[b-pysbamlpjc] {
    background: #f2faf6;
}

.nav-arrow.nav-arrow-connectedpills .arrow-icon[b-pysbamlpjc] {
    color: #3f6b57;
}

.nav-arrow.nav-arrow-connectedpills:hover .arrow-icon[b-pysbamlpjc] {
    color: #0b5138;
}

/* Theme-specific hero backgrounds */
.calendar-hero.theme-darkmode[b-pysbamlpjc] {
    background: #0f172a;
    border: 1px solid rgba(124, 58, 237, 0.3);
}

.calendar-hero.theme-darkmode h1[b-pysbamlpjc] {
    color: #e5e7eb;
}

.calendar-hero.theme-darkmode p[b-pysbamlpjc],
.calendar-hero.theme-darkmode .small[b-pysbamlpjc] {
    color: #9ca3af;
}

.calendar-hero.theme-wooden[b-pysbamlpjc] {
    background: linear-gradient(135deg, #fef3c7 0%, #fefce8 100%);
    border: 1px solid #a0684d;
}

.calendar-hero.theme-wooden h1[b-pysbamlpjc] {
    color: #6d4c3d;
}

.calendar-hero.theme-wooden p[b-pysbamlpjc],
.calendar-hero.theme-wooden .small[b-pysbamlpjc] {
    color: #8b5a3c;
}

.calendar-hero.theme-nature[b-pysbamlpjc] {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #10b981;
}

.calendar-hero.theme-nature h1[b-pysbamlpjc] {
    color: #065f46;
}

.calendar-hero.theme-nature p[b-pysbamlpjc],
.calendar-hero.theme-nature .small[b-pysbamlpjc] {
    color: #059669;
}

.calendar-hero.theme-connectedpills[b-pysbamlpjc] {
    background: #f2faf6;
    border: 1px solid #d9efe4;
}

.calendar-hero.theme-connectedpills h1[b-pysbamlpjc] {
    color: #0b5138;
}

.calendar-hero.theme-connectedpills p[b-pysbamlpjc],
.calendar-hero.theme-connectedpills .small[b-pysbamlpjc] {
    color: #3f6b57;
}

@media (max-width: 800px) {
    .month-grid[b-pysbamlpjc] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .calendar-hero[b-pysbamlpjc] {
        align-items: stretch;
    }

    .legend-container[b-pysbamlpjc],
    .request-booking-btn[b-pysbamlpjc] {
        width: 100%;
    }

    .request-booking-btn[b-pysbamlpjc] {
        text-align: center;
    }

    .month-grid[b-pysbamlpjc] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* No right margin to anchor against once the widget is full-bleed — centred reads as
       deliberate placement there, bottom-right would just look nudged. */
    .powered-by-row[b-pysbamlpjc] {
        justify-content: center;
    }
}

@media (max-width: 450px) {
    .legend-container[b-pysbamlpjc] {
        margin-top: 1rem;
    }
    
    .calendar-container[b-pysbamlpjc] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    
    .month-grid[b-pysbamlpjc] {
        grid-template-columns: 1fr;
        order: 2;
    }
    
    .nav-arrow[b-pysbamlpjc] {
        position: static;
        transform: none;
        width: 100%;
        height: 44px;
        border-radius: 10px;
    }
    
    .nav-arrow:hover[b-pysbamlpjc] {
        transform: none;
    }
    
    .nav-arrow:active[b-pysbamlpjc] {
        transform: scale(0.98);
    }
    
    .nav-arrow-left[b-pysbamlpjc] {
        left: auto;
        order: 1;
        margin-bottom: 1rem;
    }
    
    .nav-arrow-right[b-pysbamlpjc] {
        right: auto;
        order: 3;
    }
    
    .arrow-icon[b-pysbamlpjc] {
        font-size: 1.5rem;
    }
}

/* booking request form */
:root[data-theme="dark"] .dialog-panel[b-pysbamlpjc] {
    color: whitesmoke;
}

.optional-prices[b-pysbamlpjc] {
    opacity: 0.8;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(255,255,255,0.08);
}

/* Center text for date, number and time inputs in the booking request form */
input[type="date"].form-control[b-pysbamlpjc],
input[type="number"].form-control[b-pysbamlpjc],
input[type="time"].form-control[b-pysbamlpjc] {
    text-align: center;
}

/* ── Guest house not found ── */
.gh-not-found[b-pysbamlpjc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    min-height: 50vh;
    text-align: center;
    cursor: default;
}

.gh-not-found-image-wrap[b-pysbamlpjc] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.gh-not-found-image[b-pysbamlpjc] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: opacity 0.6s ease;
    border-radius: 230px;
}

.gh-not-found-text[b-pysbamlpjc] {
    font-size: 1.15rem;
    color: #555;
    min-height: 2rem;
    transition: opacity 0.4s ease;
}

.gh-not-found-text p[b-pysbamlpjc] {
    margin: 0;
}

.gh-not-found-link[b-pysbamlpjc] {
    font-size: 1.15rem;
    color: #2563eb;
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.2s;
}

.gh-not-found-link:hover[b-pysbamlpjc] {
    color: #1d4ed8;
}

/* ── Embed auth button in dialog header ── */
.embed-auth-btn[b-pysbamlpjc] {
    margin-left: auto;
    margin-right: 0.5rem;
    font-size: 0.8rem;
    padding: 0.2rem 0.65rem;
}

/* The embed login dialog's styles lived here. There is no such dialog any more: credentials are
   entered in a first-party popup where the address bar names who is asking, so the widget has no
   password form to stack above the booking request dialog. */

/* ── Growth-loop powered-by badge (additive, all 5 layout themes) ── */
/* Bottom-right, so it reads as a maker's mark on the widget rather than a notice bar
   centred under it. Falls back to centred on narrow screens (see the media query below). */
.powered-by-row[b-pysbamlpjc] {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.powered-by-badge[b-pysbamlpjc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.875rem 0.4375rem 0.5rem;
    border: 1px solid #e7e9f0;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* The lift is the whole hover affordance — no underline, which on a two-tone label
   (regular "Powered by" + bold brand) only ever looked like a broken link. */
.powered-by-badge:hover[b-pysbamlpjc],
.powered-by-badge:focus-visible[b-pysbamlpjc] {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
}

.powered-by-mark[b-pysbamlpjc] {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    flex-shrink: 0;
}

.powered-by-text strong[b-pysbamlpjc] {
    font-weight: 700;
    color: #1a202c;
}

.powered-by-arrow[b-pysbamlpjc] {
    font-size: 0.6875rem;
    color: #94a3b8;
}

/* Theme-aware: the pill borrows the host theme's border and text tones so it never fights
   the surface it sits on. The logo mark is an <img> and stays brand-coloured throughout. */
.powered-by-row.theme-darkmode .powered-by-badge[b-pysbamlpjc] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: #9aa4b5;
    box-shadow: none;
}

.powered-by-row.theme-darkmode .powered-by-text strong[b-pysbamlpjc] {
    color: #e5e7eb;
}

.powered-by-row.theme-darkmode .powered-by-arrow[b-pysbamlpjc] {
    color: #6b7280;
}

.powered-by-row.theme-wooden .powered-by-badge[b-pysbamlpjc] {
    border-color: #d4a574;
    color: #8b5a3c;
    box-shadow: 0 2px 8px rgba(109, 76, 61, 0.1);
}

.powered-by-row.theme-wooden .powered-by-text strong[b-pysbamlpjc] {
    color: #6d4c3d;
}

.powered-by-row.theme-wooden .powered-by-arrow[b-pysbamlpjc] {
    color: #a0684d;
}

.powered-by-row.theme-nature .powered-by-badge[b-pysbamlpjc],
.powered-by-row.theme-connectedpills .powered-by-badge[b-pysbamlpjc] {
    border-color: #d9efe4;
    color: #3f6b57;
    box-shadow: 0 2px 8px rgba(11, 81, 56, 0.08);
}

.powered-by-row.theme-nature .powered-by-badge:hover[b-pysbamlpjc],
.powered-by-row.theme-connectedpills .powered-by-badge:hover[b-pysbamlpjc] {
    box-shadow: 0 4px 14px rgba(11, 81, 56, 0.14);
}

.powered-by-row.theme-nature .powered-by-text strong[b-pysbamlpjc],
.powered-by-row.theme-connectedpills .powered-by-text strong[b-pysbamlpjc] {
    color: #0b5138;
}

.powered-by-row.theme-nature .powered-by-arrow[b-pysbamlpjc],
.powered-by-row.theme-connectedpills .powered-by-arrow[b-pysbamlpjc] {
    color: #7ba893;
}

/* ── Guest-account-benefits line under the post-request confirmation ── */
.guest-account-benefits[b-pysbamlpjc] {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.85;
}

/* ── Minimum-stay hint under the departure date ── */
.form-hint[b-pysbamlpjc] {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Shown under a time field when the guest names an hour the house does not usually keep. Borrows
   the amber of .embed-confirm-failed rather than anything red: the request still goes through, and
   a guest who reads this as a rejection would change a true answer into a convenient one — which is
   exactly the information the host needed. */
.embed-time-warning[b-pysbamlpjc] {
    margin-top: 0.35rem;
    padding: 0.35rem 0.5rem;
    border-left: 3px solid #d97706;
    border-radius: 0.3rem;
    background: rgba(217, 119, 6, 0.14);
    opacity: 1;
}

/* ── The guest's own history at this house (embed plan step 6) ─────────────────────────────
   Secondary to "Request booking": a returning guest is the minority of visitors, and the
   primary action stays the one that turns a stranger into a request. Outlined rather than
   filled, and it inherits the hero's own text colour so it reads on every theme without a
   per-theme rule of its own. */
.history-btn[b-pysbamlpjc] {
    margin-top: 1rem;
    margin-left: 0.6rem;
    min-height: 44px;
    padding: 0 1.1rem;
    border: 1px solid currentColor;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.85;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.history-btn:hover[b-pysbamlpjc],
.history-btn:focus-visible[b-pysbamlpjc] {
    opacity: 1;
    background: rgba(127, 127, 127, 0.12);
}

.history-list[b-pysbamlpjc] {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.history-item[b-pysbamlpjc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 10px;
}

.history-dates[b-pysbamlpjc] {
    font-weight: 600;
}

/* Status carries its own colour because the label alone is easy to skim past, and a returning
   guest usually opened this panel to find exactly one thing: was I accepted? */
.history-status[b-pysbamlpjc] {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.history-status--pending[b-pysbamlpjc] {
    background: rgba(234, 179, 8, 0.18);
    color: #a16207;
}

.history-status--accepted[b-pysbamlpjc] {
    background: rgba(10, 143, 91, 0.18);
    color: #067a4b;
}

.history-status--declined[b-pysbamlpjc] {
    background: rgba(220, 38, 38, 0.15);
    color: #b91c1c;
}

.history-hint[b-pysbamlpjc] {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    opacity: 0.75;
}

.history-scope-note[b-pysbamlpjc] {
    margin-top: -0.4rem;
}

/* The pending-deletion notice above the submit button. Warning-toned rather than danger-toned:
   nothing is being destroyed by pressing the button — the opposite — but the guest is about to
   reverse a decision they made deliberately, so it must not read as decoration. */
.embed-erasure-notice[b-pysbamlpjc] {
    margin: 0.9rem 0 0;
    padding: 0.6rem 0.75rem;
    border-left: 3px solid #d97706;
    border-radius: 0.35rem;
    background: rgba(217, 119, 6, 0.12);
    font-size: 0.85rem;
    line-height: 1.35;
}

/* The mistyped-domain hint. Sits directly under the email field, quiet enough to ignore — it is a
   guess, and a guess that shouts is worse than none. Both controls are styled from scratch because
   this app disables Tailwind's Preflight, so a bare <button> would otherwise paint system grey. */
.embed-email-suggestion[b-pysbamlpjc] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    line-height: 1.3;
    opacity: 0.9;
}

.embed-email-suggestion__accept[b-pysbamlpjc],
.embed-email-suggestion__dismiss[b-pysbamlpjc] {
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

/* The correction is the primary action, so it carries the accent and reads as the thing to press. */
.embed-email-suggestion__accept[b-pysbamlpjc] {
    color: var(--bc-accent, #60A5FA);
    font-weight: 600;
    text-decoration: underline;
}

.embed-email-suggestion__dismiss[b-pysbamlpjc] {
    opacity: 0.65;
    text-decoration: underline;
}

.embed-email-suggestion__dismiss:hover[b-pysbamlpjc] {
    opacity: 0.9;
}

/* The confirm-your-address nudge inside the success callout. Deliberately plain text rather than a
   second banner: the request already succeeded, and this must not read as a problem. */
.embed-confirm-nudge[b-pysbamlpjc] {
    margin: 0.5rem 0 0;
    font-size: 0.84rem;
    line-height: 1.4;
    opacity: 0.85;
}

/* Shown in place of the nudge when the confirmation could not be delivered. Sits inside the success
   callout on purpose: the request did reach the host, and only the e-mail failed. */
.embed-confirm-failed[b-pysbamlpjc] {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.6rem;
    border-left: 3px solid #d97706;
    border-radius: 0.3rem;
    background: rgba(217, 119, 6, 0.14);
    font-size: 0.84rem;
    line-height: 1.4;
}
/* /Components/Public/CalendarMonth.razor.rz.scp.css */
/* Calendar month component - fixed light theme */
.calendar-month[b-9ma7ww8shh] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.month-header[b-9ma7ww8shh] {
    margin-bottom: 0.75rem;
    color: #1e293b;
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
}

.weekday-row[b-9ma7ww8shh] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 0.5rem;
    gap: 2px;
}

.weekday[b-9ma7ww8shh] {
    padding: 0.4rem 0;
    color: #64748b;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.days-grid[b-9ma7ww8shh] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.day-cell[b-9ma7ww8shh] {
    aspect-ratio: 1 / 1;
    /* A grid item's automatic minimum size (min-*: auto) applies only while overflow is
       visible. The :hover rules below flip overflow to visible (to un-clip tooltips), which
       re-arms that content-based minimum — on narrower grids a cell's own text can exceed its
       aspect-ratio height, so the hovered cell snaps taller than its neighbours and stretches
       the whole grid row. Pinning min-height/min-width to 0 keeps geometry stable across the
       overflow flip without touching it. */
    min-height: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #1e293b;
    font-size: 1.2rem;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    cursor: default;
    user-select: none;
}

.day-cell.placeholder[b-9ma7ww8shh] {
    background: transparent;
    border: none;
}

/* ===== PAST DAYS - White/Neutral ===== */
.day-cell.past[b-9ma7ww8shh] {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #94a3b8;
}

/* ===== TODAY - Highlighted ===== */
.day-cell.today[b-9ma7ww8shh] {
    border-color: #3b82f6;
    border-width: 2px;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* ===== AVAILABLE DAYS - Green for GreenRed layout ===== */
.day-cell.available.layout-greenred[b-9ma7ww8shh] {
    background: #22c55e;
    border-color: #16a34a;
    color: #ffffff;
    font-weight: 600;
}

/* ===== BOOKED DAYS ===== */

/* Layout 1: GreenRed - Solid red for booked */
.day-cell.booked.layout-greenred[b-9ma7ww8shh] {
    background: #ef4444;
    border-color: #dc2626;
    color: #ffffff;
    font-weight: 600;
}

.day-cell.booked.layout-greenred.past[b-9ma7ww8shh] {
    color: #94a3b8;
}

/* Layout 2: BlueStripes - Blue diagonal stripes for booked */
.day-cell.booked.layout-bluestripes[b-9ma7ww8shh] {
    background: repeating-linear-gradient(
        135deg,
        #4ca3dd,
        #4ca3dd 8px,
        #e3f0ff 8px,
        #e3f0ff 16px
    );
    border-color: #4ca3dd;
    color: #1e293b;
    font-weight: 600;
}

/* Layout 3: DarkMode - Dark theme with purple accent */
.day-cell.booked.layout-darkmode[b-9ma7ww8shh] {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-color: #7c3aed;
    color: #e0e7ff;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.3);
}

/* Layout 4: WoodenPattern - Natural wood/brown pattern */
.day-cell.booked.layout-woodenpattern[b-9ma7ww8shh] {
    background: repeating-linear-gradient(
        90deg,
        #8b5a3c,
        #8b5a3c 4px,
        #a0684d 4px,
        #a0684d 8px,
        #6d4c3d 8px,
        #6d4c3d 12px
    );
    border-color: #6d4c3d;
    color: #fef3c7;
    font-weight: 600;
}

/* Layout 5: NatureGreen - Plants/leaves green theme */
.day-cell.booked.layout-naturegreen[b-9ma7ww8shh] {
    background: repeating-linear-gradient(
        -45deg,
        #059669,
        #059669 6px,
        #10b981 6px,
        #10b981 12px,
        #047857 12px,
        #047857 18px
    );
    border-color: #047857;
    color: #ecfdf5;
    font-weight: 600;
}

/* ===== HALF-DAY ARRIVAL (Diagonal split: green top-left, red bottom-right) ===== */

/* GreenRed layout - half arrival */
.day-cell.half-arrival.layout-greenred[b-9ma7ww8shh] {
    background: linear-gradient(135deg, #22c55e 50%, #ef4444 50%);
    border: 0 none;
    color: #ffffff;
    font-weight: 600;
}

/* GreenRed layout - half departure (red top-left, green bottom-right) */
.day-cell.half-departure.layout-greenred[b-9ma7ww8shh] {
    background: linear-gradient(135deg, #ef4444 50%, #22c55e 50%);
    border: 0 none;
    color: #ffffff;
    font-weight: 600;
}

/* BlueStripes layout - half arrival */
.day-cell.half-arrival.layout-bluestripes[b-9ma7ww8shh] {
    background: linear-gradient(135deg, #ffffff 50%, #4ca3dd 50%);
    border-color: #4ca3dd;
    color: #1e293b;
    font-weight: 600;
}

/* BlueStripes layout - half departure */
.day-cell.half-departure.layout-bluestripes[b-9ma7ww8shh] {
    background: linear-gradient(135deg, #4ca3dd 50%, #ffffff 50%);
    border-color: #4ca3dd;
    color: #1e293b;
    font-weight: 600;
}

/* DarkMode layout - half arrival */
.day-cell.half-arrival.layout-darkmode[b-9ma7ww8shh] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 50%, #334155 50%);
    border-color: #7c3aed;
    color: #e0e7ff;
    font-weight: 600;
}

/* DarkMode layout - half departure */
.day-cell.half-departure.layout-darkmode[b-9ma7ww8shh] {
    background: linear-gradient(135deg, #334155 50%, rgba(255, 255, 255, 0.1) 50%);
    border-color: #7c3aed;
    color: #e0e7ff;
    font-weight: 600;
}

/* WoodenPattern layout - half arrival */
.day-cell.half-arrival.layout-woodenpattern[b-9ma7ww8shh] {
    background: linear-gradient(135deg, #fefce8 50%, #8b5a3c 50%);
    border-color: #6d4c3d;
    color: #6d4c3d;
    font-weight: 600;
}

/* WoodenPattern layout - half departure */
.day-cell.half-departure.layout-woodenpattern[b-9ma7ww8shh] {
    background: linear-gradient(135deg, #8b5a3c 50%, #fefce8 50%);
    border-color: #6d4c3d;
    color: #fef3c7;
    font-weight: 600;
}

/* NatureGreen layout - half arrival */
.day-cell.half-arrival.layout-naturegreen[b-9ma7ww8shh] {
    background: linear-gradient(135deg, #ecfdf5 50%, #059669 50%);
    border-color: #047857;
    color: #065f46;
    font-weight: 600;
}

/* NatureGreen layout - half departure */
.day-cell.half-departure.layout-naturegreen[b-9ma7ww8shh] {
    background: linear-gradient(135deg, #059669 50%, #ecfdf5 50%);
    border-color: #047857;
    color: #ecfdf5;
    font-weight: 600;
}

/* ===== TRANSITION DAY (departure + arrival on same day) ===== */
.day-cell.half-transition.layout-greenred[b-9ma7ww8shh] {
    background: linear-gradient(135deg, #ef4444 calc(50% - 2px), #22c55e calc(50% - 2px), #22c55e calc(50% + 2px), #ef4444 calc(50% + 2px));
    border-color: #dc2626;
    color: #ffffff;
    font-weight: 600;
}

.day-cell.half-transition.layout-bluestripes[b-9ma7ww8shh] {
    background: linear-gradient(135deg, #4ca3dd calc(50% - 2px), #ffffff calc(50% - 2px), #ffffff calc(50% + 2px), #4ca3dd calc(50% + 2px));
    border-color: #4ca3dd;
    color: #1e293b;
    font-weight: 600;
}

.day-cell.half-transition.layout-darkmode[b-9ma7ww8shh] {
    background: linear-gradient(135deg, #334155 calc(50% - 2px), rgba(255,255,255,0.15) calc(50% - 2px), rgba(255,255,255,0.15) calc(50% + 2px), #334155 calc(50% + 2px));
    border-color: #7c3aed;
    color: #e0e7ff;
    font-weight: 600;
}

.day-cell.half-transition.layout-woodenpattern[b-9ma7ww8shh] {
    background: linear-gradient(135deg, #8b5a3c calc(50% - 2px), #fefce8 calc(50% - 2px), #fefce8 calc(50% + 2px), #8b5a3c calc(50% + 2px));
    border-color: #6d4c3d;
    color: #fef3c7;
    font-weight: 600;
}

.day-cell.half-transition.layout-naturegreen[b-9ma7ww8shh] {
    background: linear-gradient(135deg, #059669 calc(50% - 2px), #ecfdf5 calc(50% - 2px), #ecfdf5 calc(50% + 2px), #059669 calc(50% + 2px));
    border-color: #047857;
    color: #ecfdf5;
    font-weight: 600;
}

/* ===== HALF-DAY FOR PAST DAYS ===== */
.day-cell.past.half-transition.layout-greenred[b-9ma7ww8shh] {
    background: linear-gradient(135deg, #ef4444 calc(50% - 2px), #ffffff calc(50% - 2px), #ffffff calc(50% + 2px), #ef4444 calc(50% + 2px));
    border-color: #dc2626;
    color: #94a3b8;
}

.day-cell.past.half-arrival.layout-greenred[b-9ma7ww8shh] {
    background: linear-gradient(135deg, #ffffff 50%, #ef4444 50%);
    border: 0 none;
    color: #94a3b8;
}

.day-cell.past.half-departure.layout-greenred[b-9ma7ww8shh] {
    background: linear-gradient(135deg, #ef4444 50%, #ffffff 50%);
    border: 0 none;
    color: #94a3b8;
}

/* ===== GreenRedPattern: greenred with diagonal stripes on booked days =====
   Deliberately its own class set (values copied from greenred, not shared selectors),
   so existing greenred installs stay pixel-identical while hosts compare/opt in.
   Half-day cells layer the 50% hard-stop gradient (transparent on the booked half)
   over the full-bleed stripe, so the stripe only shows through the booked half. */
.day-cell.available.layout-greenredpattern[b-9ma7ww8shh] {
    background: #22c55e;
    border-color: #16a34a;
    color: #ffffff;
    font-weight: 600;
}

.day-cell.booked.layout-greenredpattern[b-9ma7ww8shh] {
    background: repeating-linear-gradient(135deg, #ef4444, #ef4444 6px, #b91c1c 6px, #b91c1c 12px);
    border-color: #dc2626;
    color: #ffffff;
    font-weight: 600;
}

.day-cell.booked.layout-greenredpattern.past[b-9ma7ww8shh] {
    color: #94a3b8;
}

.day-cell.half-arrival.layout-greenredpattern[b-9ma7ww8shh] {
    background:
        linear-gradient(135deg, #22c55e 50%, transparent 50%),
        repeating-linear-gradient(135deg, #ef4444, #ef4444 6px, #b91c1c 6px, #b91c1c 12px);
    border: 0 none;
    color: #ffffff;
    font-weight: 600;
}

.day-cell.half-departure.layout-greenredpattern[b-9ma7ww8shh] {
    background:
        linear-gradient(135deg, transparent 50%, #22c55e 50%),
        repeating-linear-gradient(135deg, #ef4444, #ef4444 6px, #b91c1c 6px, #b91c1c 12px);
    border: 0 none;
    color: #ffffff;
    font-weight: 600;
}

.day-cell.half-transition.layout-greenredpattern[b-9ma7ww8shh] {
    background:
        linear-gradient(135deg, transparent calc(50% - 2px), #22c55e calc(50% - 2px), #22c55e calc(50% + 2px), transparent calc(50% + 2px)),
        repeating-linear-gradient(135deg, #ef4444, #ef4444 6px, #b91c1c 6px, #b91c1c 12px);
    border-color: #dc2626;
    color: #ffffff;
    font-weight: 600;
}

.day-cell.past.half-transition.layout-greenredpattern[b-9ma7ww8shh] {
    background:
        linear-gradient(135deg, transparent calc(50% - 2px), #ffffff calc(50% - 2px), #ffffff calc(50% + 2px), transparent calc(50% + 2px)),
        repeating-linear-gradient(135deg, #ef4444, #ef4444 6px, #b91c1c 6px, #b91c1c 12px);
    border-color: #dc2626;
    color: #94a3b8;
}

.day-cell.past.half-arrival.layout-greenredpattern[b-9ma7ww8shh] {
    background:
        linear-gradient(135deg, #ffffff 50%, transparent 50%),
        repeating-linear-gradient(135deg, #ef4444, #ef4444 6px, #b91c1c 6px, #b91c1c 12px);
    border: 0 none;
    color: #94a3b8;
}

.day-cell.past.half-departure.layout-greenredpattern[b-9ma7ww8shh] {
    background:
        linear-gradient(135deg, transparent 50%, #ffffff 50%),
        repeating-linear-gradient(135deg, #ef4444, #ef4444 6px, #b91c1c 6px, #b91c1c 12px);
    border: 0 none;
    color: #94a3b8;
}

.day-cell span[b-9ma7ww8shh] {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Text shadow for better readability on diagonal backgrounds */
.day-cell.half-arrival span[b-9ma7ww8shh],
.day-cell.half-departure span[b-9ma7ww8shh],
.day-cell.half-transition span[b-9ma7ww8shh] {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Hover effects */
.day-cell:not(.placeholder):hover[b-9ma7ww8shh] {
    transform: scale(1.2);
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

@media (hover: none), (pointer: coarse) {
    .day-cell:not(.placeholder):hover[b-9ma7ww8shh] {
        transform: none;
        z-index: auto;
    }
}

/* ===== DARK MODE THEME ===== */
.calendar-month.theme-darkmode[b-9ma7ww8shh] {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.1);
}

.calendar-month.theme-darkmode .month-header[b-9ma7ww8shh] {
    color: #e5e7eb;
}

.calendar-month.theme-darkmode .weekday[b-9ma7ww8shh] {
    color: #9ca3af;
}

.calendar-month.theme-darkmode .day-cell.past[b-9ma7ww8shh] {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    color: #6b7280;
}

.calendar-month.theme-darkmode .day-cell.available[b-9ma7ww8shh] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e5e7eb;
}

.calendar-month.theme-darkmode .day-cell.today[b-9ma7ww8shh] {
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.3);
}

.calendar-month.theme-darkmode .day-cell:not(.placeholder):not(.booked):not(.half-arrival):not(.half-departure):not(.half-transition):not(.past):hover[b-9ma7ww8shh] {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(124, 58, 237, 0.5);
}

/* ===== WOODEN THEME ===== */
.calendar-month.theme-wooden[b-9ma7ww8shh] {
    background: #fef3c7;
    border-color: #a0684d;
}

.calendar-month.theme-wooden .month-header[b-9ma7ww8shh] {
    color: #6d4c3d;
}

.calendar-month.theme-wooden .weekday[b-9ma7ww8shh] {
    color: #8b5a3c;
}

.calendar-month.theme-wooden .day-cell.past[b-9ma7ww8shh] {
    background: #fefce8;
    border-color: #d4a574;
    color: #a0684d;
}

.calendar-month.theme-wooden .day-cell.available[b-9ma7ww8shh] {
    background: #fefce8;
    border-color: #d4a574;
    color: #6d4c3d;
}

.calendar-month.theme-wooden .day-cell.today[b-9ma7ww8shh] {
    border-color: #8b5a3c;
    box-shadow: 0 0 0 2px rgba(139, 90, 60, 0.3);
}

/* ===== NATURE GREEN THEME ===== */
.calendar-month.theme-nature[b-9ma7ww8shh] {
    background: #f0fdf4;
    border-color: #10b981;
}

.calendar-month.theme-nature .month-header[b-9ma7ww8shh] {
    color: #065f46;
}

.calendar-month.theme-nature .weekday[b-9ma7ww8shh] {
    color: #059669;
}

.calendar-month.theme-nature .day-cell.past[b-9ma7ww8shh] {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #047857;
}

.calendar-month.theme-nature .day-cell.available[b-9ma7ww8shh] {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #065f46;
}

.calendar-month.theme-nature .day-cell.today[b-9ma7ww8shh] {
    border-color: #059669;
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.3);
}

/* ===== AVAILABLE DAYS FOR OTHER LAYOUTS ===== */
.day-cell.available.layout-bluestripes[b-9ma7ww8shh] {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #1e293b;
}

.day-cell.available.layout-darkmode[b-9ma7ww8shh] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e5e7eb;
}

.day-cell.available.layout-woodenpattern[b-9ma7ww8shh] {
    background: #fefce8;
    border-color: #d4a574;
    color: #6d4c3d;
}

.day-cell.available.layout-naturegreen[b-9ma7ww8shh] {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #065f46;
}

/* ===== CONNECTED PILLS THEME ===== */
.calendar-month.theme-connectedpills[b-9ma7ww8shh] {
    border-color: #d9efe4;
}

/* Wider-than-tall cells — the design's connected-pill calendar is noticeably shorter than a
   square grid. Scoped to this theme so the other layouts keep their square cells.
   (min-height/min-width: 0 already come from the base .day-cell rule above.) */
.calendar-month.theme-connectedpills .day-cell[b-9ma7ww8shh] {
    aspect-ratio: 3 / 2;
    font-size: 1.05rem;
}

.calendar-month.theme-connectedpills .month-header[b-9ma7ww8shh] {
    color: #0b5138;
}

.calendar-month.theme-connectedpills .weekday[b-9ma7ww8shh] {
    color: #7ba893;
}

/* Free past days only — a past *booked* day keeps its muted grey-green .pill.past fill, which
   this rule would otherwise outrank on specificity and wash out to near-white. */
.calendar-month.theme-connectedpills .day-cell.past:not(.pill)[b-9ma7ww8shh] {
    background: #f8faf9;
    border-color: #eef2f0;
    color: #94a3b8;
}

.calendar-month.theme-connectedpills .day-cell.today[b-9ma7ww8shh] {
    border-color: #0a8f5b;
    box-shadow: 0 0 0 2px rgba(10, 143, 91, 0.25);
}

/* ===== ConnectedPills =====
   A booked stay reads as one pill spanning its nights: solid green core, light rounded caps
   on the arrival and departure days. The cells are NOT bridged across the grid gutter — the
   design keeps the 3px gaps between days and rounds only the run's outer ends (~9px), so
   the run reads as connected by adjacency and shared colour rather than by filling the gaps.
   Rounding is driven by the geometric run ends (pill-runstart/-runend), the light cap colour
   by the booking's own arrival/departure days — the two coincide except on the public
   calendar, where a stay that started in the past is clipped to today: today then becomes the
   rounded run start but stays solid (it is not the arrival). */
.calendar-month.theme-connectedpills .day-cell.available.layout-connectedpills[b-9ma7ww8shh] {
    background: #effaf4;
    border-color: #d9efe4;
    color: #0b5138;
    font-weight: 500;
}

.day-cell.pill[b-9ma7ww8shh] {
    background: #0a8f5b;
    border-color: transparent;
    border-radius: 0;
    color: #ffffff;
    font-weight: 600;
}

/* Geometric run ends — round the outer edge only. Split radii combine on a one-night stay
   (both runstart and runend) into an all-corners rounded pill. */
.day-cell.pill.pill-runstart[b-9ma7ww8shh] {
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
}

.day-cell.pill.pill-runend[b-9ma7ww8shh] {
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
}

/* Light arrival/departure caps. */
.day-cell.pill.pill-arr[b-9ma7ww8shh],
.day-cell.pill.pill-dep[b-9ma7ww8shh] {
    background: #9fe3c6;
    color: #065f46;
}

/* Same-day changeover: one party departs the morning another arrives, so the day belongs to
   neither night. Both halves are the light cap colour, split by a thin white diagonal. */
.day-cell.pill.pill-arr.pill-dep[b-9ma7ww8shh] {
    background: linear-gradient(135deg,
        #9fe3c6 0 calc(50% - 1px),
        #ffffff calc(50% - 1px) calc(50% + 1px),
        #9fe3c6 calc(50% + 1px) 100%);
    color: #065f46;
    font-weight: 700;
}

/* Muted grey-green for a past night (host-side surfaces that keep history; the public
   calendar clips the past so it rarely renders here). */
.day-cell.pill.past[b-9ma7ww8shh] {
    background: #b7c7bf;
    border-color: transparent;
    color: #4a5a52;
}

.day-cell.pill.past.pill-arr[b-9ma7ww8shh],
.day-cell.pill.past.pill-dep[b-9ma7ww8shh] {
    background: #cbd8d1;
    color: #5b6b63;
}

/* The shared hover pops a cell to 1.2× — on a continuous run that tears the pill apart at
   the seams, so this theme trades the pop for no transform. */
.calendar-month.theme-connectedpills .day-cell:not(.placeholder):hover[b-9ma7ww8shh] {
    transform: none;
    box-shadow: none;
}

.day-cell.pill span[b-9ma7ww8shh] {
    text-shadow: none;
}

@media (max-width: 450px) {
    .calendar-month[b-9ma7ww8shh] {
        padding: 0.75rem;
    }

    .weekday-row[b-9ma7ww8shh],
    .days-grid[b-9ma7ww8shh] {
        gap: 2px;
    }

    .weekday[b-9ma7ww8shh] {
        font-size: 0.65rem;
        padding: 0.25rem 0;
    }

    .day-cell[b-9ma7ww8shh] {
        font-size: 0.95rem;
        border-radius: 5px;
    }

    .month-header[b-9ma7ww8shh] {
        font-size: 1rem;
    }
}
/* /Components/Public/SelectableCalendarMonth.razor.rz.scp.css */
/* Inherit all styles from CalendarMonth */
.calendar-month[b-2osixlq9ho] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.month-header[b-2osixlq9ho] {
    margin-bottom: 0.75rem;
    color: #1e293b;
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
}

.weekday-row[b-2osixlq9ho] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 0.5rem;
    gap: 2px;
}

.weekday[b-2osixlq9ho] {
    padding: 0.4rem 0;
    color: #64748b;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.days-grid[b-2osixlq9ho] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.day-cell[b-2osixlq9ho] {
    aspect-ratio: 1 / 1;
    /* A grid item's automatic minimum size (min-*: auto) applies only while overflow is
       visible. .day-cell.clickable:hover and :has(.mc-tooltip):hover flip overflow to visible
       (to un-clip tooltips), which re-arms that content-based minimum — on the narrower host
       calendar (3 months side by side) a cell's own text can exceed its aspect-ratio height, so
       the hovered cell snapped taller than its neighbours and stretched the whole grid row.
       Pinning min-height/min-width to 0 keeps geometry stable across the overflow flip without
       touching it (theme-connectedpills sets its own aspect-ratio further down but inherits
       this pin from here). */
    min-height: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #1e293b;
    font-size: 1.2rem;
    font-weight: 500;
    transition: all 0.15s ease;
    position: relative;
    overflow: hidden;
    user-select: none;
}

.day-cell.placeholder[b-2osixlq9ho] {
    background: transparent;
    border: none;
}

.day-cell.past[b-2osixlq9ho] {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #94a3b8;
}

.day-cell.today[b-2osixlq9ho] {
    border-color: #3b82f6;
    border-width: 2px;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    outline: 2px solid rgba(250, 204, 21, 0.75);
    outline-offset: -4px;
    /* Below the hover/tooltip layer (z-index 2-4) so a neighbouring cell's hover pop or
       tooltip isn't clipped underneath today's own border/outline. Still above idle
       cells (default z-index: auto). */
    z-index: 1;
}

/* Available days */
.day-cell.available.layout-greenred[b-2osixlq9ho] { background: #22c55e; border-color: #16a34a; color: #ffffff; font-weight: 600; }
.day-cell.available.layout-bluestripes[b-2osixlq9ho] { background: #ffffff; border-color: #e2e8f0; color: #1e293b; }
.day-cell.available.layout-darkmode[b-2osixlq9ho] { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: #e5e7eb; }
.day-cell.available.layout-woodenpattern[b-2osixlq9ho] { background: #fefce8; border-color: #d4a574; color: #6d4c3d; }
.day-cell.available.layout-naturegreen[b-2osixlq9ho] { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }

/* Booked days */
.day-cell.booked.layout-greenred[b-2osixlq9ho] { background: #ef4444; border-color: #dc2626; color: #ffffff; font-weight: 600; }
.day-cell.booked.layout-bluestripes[b-2osixlq9ho] { background: repeating-linear-gradient(135deg,#4ca3dd,#4ca3dd 8px,#e3f0ff 8px,#e3f0ff 16px); border-color: #4ca3dd; color: #1e293b; font-weight: 600; }
.day-cell.booked.layout-darkmode[b-2osixlq9ho] { background: linear-gradient(135deg,#1e293b,#334155); border-color: #7c3aed; color: #e0e7ff; font-weight: 600; }
.day-cell.booked.layout-woodenpattern[b-2osixlq9ho] { background: repeating-linear-gradient(90deg,#8b5a3c,#8b5a3c 4px,#a0684d 4px,#a0684d 8px,#6d4c3d 8px,#6d4c3d 12px); border-color: #6d4c3d; color: #fef3c7; font-weight: 600; }
.day-cell.booked.layout-naturegreen[b-2osixlq9ho] { background: repeating-linear-gradient(-45deg,#059669,#059669 6px,#10b981 6px,#10b981 12px,#047857 12px,#047857 18px); border-color: #047857; color: #ecfdf5; font-weight: 600; }

/* Half-day arrival/departure */
.day-cell.half-arrival.layout-greenred[b-2osixlq9ho] { background: linear-gradient(135deg,#22c55e 50%,#ef4444 50%); border-color: #16a34a; color: #ffffff; font-weight: 600; }
.day-cell.half-departure.layout-greenred[b-2osixlq9ho] { background: linear-gradient(135deg,#ef4444 50%,#22c55e 50%); border-color: #dc2626; color: #ffffff; font-weight: 600; }
.day-cell.half-arrival.layout-bluestripes[b-2osixlq9ho] { background: linear-gradient(135deg,#ffffff 50%,#4ca3dd 50%); border-color: #4ca3dd; color: #1e293b; font-weight: 600; }
.day-cell.half-departure.layout-bluestripes[b-2osixlq9ho] { background: linear-gradient(135deg,#4ca3dd 50%,#ffffff 50%); border-color: #4ca3dd; color: #1e293b; font-weight: 600; }
.day-cell.half-arrival.layout-darkmode[b-2osixlq9ho] { background: linear-gradient(135deg,rgba(255,255,255,0.1) 50%,#334155 50%); border-color: #7c3aed; color: #e0e7ff; font-weight: 600; }
.day-cell.half-departure.layout-darkmode[b-2osixlq9ho] { background: linear-gradient(135deg,#334155 50%,rgba(255,255,255,0.1) 50%); border-color: #7c3aed; color: #e0e7ff; font-weight: 600; }
.day-cell.half-arrival.layout-woodenpattern[b-2osixlq9ho] { background: linear-gradient(135deg,#fefce8 50%,#8b5a3c 50%); border-color: #6d4c3d; color: #6d4c3d; font-weight: 600; }
.day-cell.half-departure.layout-woodenpattern[b-2osixlq9ho] { background: linear-gradient(135deg,#8b5a3c 50%,#fefce8 50%); border-color: #6d4c3d; color: #fef3c7; font-weight: 600; }
.day-cell.half-arrival.layout-naturegreen[b-2osixlq9ho] { background: linear-gradient(135deg,#ecfdf5 50%,#059669 50%); border-color: #047857; color: #065f46; font-weight: 600; }
.day-cell.half-departure.layout-naturegreen[b-2osixlq9ho] { background: linear-gradient(135deg,#059669 50%,#ecfdf5 50%); border-color: #047857; color: #ecfdf5; font-weight: 600; }

/* Transition day (departure + arrival on same day) */
.day-cell.half-transition.layout-greenred[b-2osixlq9ho] { background: linear-gradient(135deg, #ef4444 calc(50% - 2px), #22c55e calc(50% - 2px), #22c55e calc(50% + 2px), #ef4444 calc(50% + 2px)); border-color: #dc2626; color: #ffffff; font-weight: 600; }
.day-cell.half-transition.layout-bluestripes[b-2osixlq9ho] { background: linear-gradient(135deg, #4ca3dd calc(50% - 2px), #ffffff calc(50% - 2px), #ffffff calc(50% + 2px), #4ca3dd calc(50% + 2px)); border-color: #4ca3dd; color: #1e293b; font-weight: 600; }
.day-cell.half-transition.layout-darkmode[b-2osixlq9ho] { background: linear-gradient(135deg, #334155 calc(50% - 2px), rgba(255,255,255,0.15) calc(50% - 2px), rgba(255,255,255,0.15) calc(50% + 2px), #334155 calc(50% + 2px)); border-color: #7c3aed; color: #e0e7ff; font-weight: 600; }
.day-cell.half-transition.layout-woodenpattern[b-2osixlq9ho] { background: linear-gradient(135deg, #8b5a3c calc(50% - 2px), #fefce8 calc(50% - 2px), #fefce8 calc(50% + 2px), #8b5a3c calc(50% + 2px)); border-color: #6d4c3d; color: #fef3c7; font-weight: 600; }
.day-cell.half-transition.layout-naturegreen[b-2osixlq9ho] { background: linear-gradient(135deg, #059669 calc(50% - 2px), #ecfdf5 calc(50% - 2px), #ecfdf5 calc(50% + 2px), #059669 calc(50% + 2px)); border-color: #047857; color: #ecfdf5; font-weight: 600; }

/* Past half-day */
.day-cell.past.half-transition.layout-greenred[b-2osixlq9ho] { background: linear-gradient(135deg, #ef4444 calc(50% - 2px), #ffffff calc(50% - 2px), #ffffff calc(50% + 2px), #ef4444 calc(50% + 2px)); border-color: #e2e8f0; color: #94a3b8; }
.day-cell.past.half-arrival.layout-greenred[b-2osixlq9ho] { background: linear-gradient(135deg,#ffffff 50%,#ef4444 50%); border-color: #e2e8f0; color: #94a3b8; }
.day-cell.past.half-departure.layout-greenred[b-2osixlq9ho] { background: linear-gradient(135deg,#ef4444 50%,#ffffff 50%); border-color: #e2e8f0; color: #94a3b8; }

/* GreenRedPattern: greenred with diagonal stripes on booked days (colorblind-safe variant).
   Own class set — greenred stays pixel-identical. Half-day cells layer the 50% hard-stop
   gradient (transparent on the booked half) over the full-bleed stripe. */
.day-cell.available.layout-greenredpattern[b-2osixlq9ho] { background: #22c55e; border-color: #16a34a; color: #ffffff; font-weight: 600; }
.day-cell.booked.layout-greenredpattern[b-2osixlq9ho] { background: repeating-linear-gradient(135deg,#ef4444,#ef4444 6px,#b91c1c 6px,#b91c1c 12px); border-color: #dc2626; color: #ffffff; font-weight: 600; }
.day-cell.half-arrival.layout-greenredpattern[b-2osixlq9ho] { background: linear-gradient(135deg,#22c55e 50%,transparent 50%), repeating-linear-gradient(135deg,#ef4444,#ef4444 6px,#b91c1c 6px,#b91c1c 12px); border-color: #16a34a; color: #ffffff; font-weight: 600; }
.day-cell.half-departure.layout-greenredpattern[b-2osixlq9ho] { background: linear-gradient(135deg,transparent 50%,#22c55e 50%), repeating-linear-gradient(135deg,#ef4444,#ef4444 6px,#b91c1c 6px,#b91c1c 12px); border-color: #dc2626; color: #ffffff; font-weight: 600; }
.day-cell.half-transition.layout-greenredpattern[b-2osixlq9ho] { background: linear-gradient(135deg, transparent calc(50% - 2px), #22c55e calc(50% - 2px), #22c55e calc(50% + 2px), transparent calc(50% + 2px)), repeating-linear-gradient(135deg,#ef4444,#ef4444 6px,#b91c1c 6px,#b91c1c 12px); border-color: #dc2626; color: #ffffff; font-weight: 600; }
.day-cell.past.half-transition.layout-greenredpattern[b-2osixlq9ho] { background: linear-gradient(135deg, transparent calc(50% - 2px), #ffffff calc(50% - 2px), #ffffff calc(50% + 2px), transparent calc(50% + 2px)), repeating-linear-gradient(135deg,#ef4444,#ef4444 6px,#b91c1c 6px,#b91c1c 12px); border-color: #e2e8f0; color: #94a3b8; }
.day-cell.past.half-arrival.layout-greenredpattern[b-2osixlq9ho] { background: linear-gradient(135deg,#ffffff 50%,transparent 50%), repeating-linear-gradient(135deg,#ef4444,#ef4444 6px,#b91c1c 6px,#b91c1c 12px); border-color: #e2e8f0; color: #94a3b8; }
.day-cell.past.half-departure.layout-greenredpattern[b-2osixlq9ho] { background: linear-gradient(135deg,transparent 50%,#ffffff 50%), repeating-linear-gradient(135deg,#ef4444,#ef4444 6px,#b91c1c 6px,#b91c1c 12px); border-color: #e2e8f0; color: #94a3b8; }

/* ConnectedPills: a booked stay reads as one pill — solid green core, light rounded caps on
   arrival/departure. No gutter bridging: the 3px grid gaps stay, only the geometric run ends
   round (~9px). Mirrors CalendarMonth.razor.css — see the longer note there. */
.day-cell.available.layout-connectedpills[b-2osixlq9ho] { background: #effaf4; border-color: #d9efe4; color: #0b5138; font-weight: 500; }
.day-cell.pill[b-2osixlq9ho] { background: #0a8f5b; border-color: transparent; border-radius: 0; color: #ffffff; font-weight: 600; }
.day-cell.pill.pill-runstart[b-2osixlq9ho] { border-top-left-radius: 9px; border-bottom-left-radius: 9px; }
.day-cell.pill.pill-runend[b-2osixlq9ho] { border-top-right-radius: 9px; border-bottom-right-radius: 9px; }
.day-cell.pill.pill-arr[b-2osixlq9ho],
.day-cell.pill.pill-dep[b-2osixlq9ho] { background: #9fe3c6; color: #065f46; }
.day-cell.pill.pill-arr.pill-dep[b-2osixlq9ho] { background: linear-gradient(135deg,#9fe3c6 0 calc(50% - 1px),#ffffff calc(50% - 1px) calc(50% + 1px),#9fe3c6 calc(50% + 1px) 100%); color: #065f46; font-weight: 700; }
.day-cell.pill.past[b-2osixlq9ho] { background: #b7c7bf; border-color: transparent; color: #4a5a52; }
.day-cell.pill.past.pill-arr[b-2osixlq9ho],
.day-cell.pill.past.pill-dep[b-2osixlq9ho] { background: #cbd8d1; color: #5b6b63; }
.day-cell.pill span[b-2osixlq9ho] { text-shadow: none; }

.day-cell span[b-2osixlq9ho] {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.day-cell.half-arrival span[b-2osixlq9ho],
.day-cell.half-departure span[b-2osixlq9ho],
.day-cell.half-transition span[b-2osixlq9ho] {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Theme variants */
.calendar-month.theme-darkmode[b-2osixlq9ho] { background: #0f172a; border-color: rgba(255,255,255,0.1); }
.calendar-month.theme-darkmode .month-header[b-2osixlq9ho] { color: #e5e7eb; }
.calendar-month.theme-darkmode .weekday[b-2osixlq9ho] { color: #9ca3af; }
.calendar-month.theme-darkmode .day-cell.past[b-2osixlq9ho] { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.1); color: #6b7280; }
.calendar-month.theme-darkmode .day-cell.available[b-2osixlq9ho] { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: #e5e7eb; }
.calendar-month.theme-darkmode .day-cell.today[b-2osixlq9ho] { border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,0.3); }

.calendar-month.theme-wooden[b-2osixlq9ho] { background: #fef3c7; border-color: #a0684d; }
.calendar-month.theme-wooden .month-header[b-2osixlq9ho] { color: #6d4c3d; }
.calendar-month.theme-wooden .weekday[b-2osixlq9ho] { color: #8b5a3c; }
.calendar-month.theme-wooden .day-cell.past[b-2osixlq9ho] { background: #fefce8; border-color: #d4a574; color: #a0684d; }
.calendar-month.theme-wooden .day-cell.available[b-2osixlq9ho] { background: #fefce8; border-color: #d4a574; color: #6d4c3d; }
.calendar-month.theme-wooden .day-cell.today[b-2osixlq9ho] { border-color: #8b5a3c; box-shadow: 0 0 0 2px rgba(139,90,60,0.3); }

.calendar-month.theme-nature[b-2osixlq9ho] { background: #f0fdf4; border-color: #10b981; }
.calendar-month.theme-nature .month-header[b-2osixlq9ho] { color: #065f46; }
.calendar-month.theme-nature .weekday[b-2osixlq9ho] { color: #059669; }
.calendar-month.theme-nature .day-cell.past[b-2osixlq9ho] { background: #ecfdf5; border-color: #6ee7b7; color: #047857; }
.calendar-month.theme-nature .day-cell.available[b-2osixlq9ho] { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.calendar-month.theme-nature .day-cell.today[b-2osixlq9ho] { border-color: #059669; box-shadow: 0 0 0 2px rgba(5,150,105,0.3); }

.calendar-month.theme-connectedpills[b-2osixlq9ho] { border-color: #d9efe4; }
.calendar-month.theme-connectedpills .month-header[b-2osixlq9ho] { color: #0b5138; }
.calendar-month.theme-connectedpills .weekday[b-2osixlq9ho] { color: #7ba893; }
/* Wider-than-tall cells for this theme only — the other layouts keep their square cells.
   (min-height/min-width: 0 already come from the base .day-cell rule above.) */
.calendar-month.theme-connectedpills .day-cell[b-2osixlq9ho] { aspect-ratio: 3 / 2; font-size: 1.05rem; }
/* Free past days only — a past booked day keeps its muted grey-green .pill.past fill. */
.calendar-month.theme-connectedpills .day-cell.past:not(.pill)[b-2osixlq9ho] { background: #f8faf9; border-color: #eef2f0; color: #94a3b8; }
.calendar-month.theme-connectedpills .day-cell.today[b-2osixlq9ho] { border-color: #0a8f5b; box-shadow: 0 0 0 2px rgba(10, 143, 91, 0.25); }
/* No hover pop in this theme: scaling any cell (a pill run OR a clickable free day on the host
   Tiles view) breaks the connected-pill grid by pushing its neighbours out of line. Overrides
   the generic .day-cell.clickable:hover scale below via higher specificity. */
.calendar-month.theme-connectedpills .day-cell:not(.placeholder):hover[b-2osixlq9ho] { transform: none; box-shadow: none; }

/* ===== SELECTION STYLES ===== */
.day-cell.clickable:hover[b-2osixlq9ho] {
    transform: scale(1.08);
    box-shadow: 0 2px 10px rgba(34, 197, 94, 0.3);
    z-index: 2;
    overflow: visible;
}

@media (hover: none), (pointer: coarse) {
    .day-cell.clickable:hover[b-2osixlq9ho] {
        transform: none;
        box-shadow: none;
        z-index: auto;
        overflow: hidden;
    }
}

/* A tooltip is bigger than its cell, and .day-cell sets overflow: hidden. Un-clip any cell
   that hosts one while it is hovered. This used to ride along on .day-cell.clickable:hover,
   which silently tied the tooltip to the click affordance — the read-only dashboard months
   have no clickable cells, so their tooltips were rendered but clipped to nothing. */
.day-cell:has(.mc-tooltip):hover[b-2osixlq9ho] {
    overflow: visible;
    z-index: 2;
}

.day-cell:hover .mc-tooltip:not(.mc-tooltip-departing, .mc-tooltip-arriving)[b-2osixlq9ho] {
    display: flex;
}

/* Test-only mirror of the :hover reveal above, driven by PinnedTooltipDate so the
   visual-regression suite can baseline the tooltip (a real hover cannot be captured). */
.day-cell.mc-tooltip-pinned[b-2osixlq9ho] {
    overflow: visible;
    z-index: 2;
}

.day-cell.mc-tooltip-pinned .mc-tooltip:not(.mc-tooltip-departing, .mc-tooltip-arriving)[b-2osixlq9ho] {
    display: flex;
}

/* Per-half click targets for single-guest changeover days. The clip-paths mirror the
   135deg half-day gradient, so the browser hit-tests the triangles for us and a click
   lands on whichever half was actually drawn under the cursor. Kept below .mc-hover-zone
   (z-index 4) so two-guest tooltip hovering is unaffected. */
.mc-click-zone[b-2osixlq9ho] {
    position: absolute;
    inset: 0;
    z-index: 3;
}

.mc-click-departing[b-2osixlq9ho] {
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.mc-click-arriving[b-2osixlq9ho] {
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.mc-hover-zone[b-2osixlq9ho] {
    position: absolute;
    inset: 0;
    z-index: 4;
}

.mc-hover-departing[b-2osixlq9ho] {
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.mc-hover-arriving[b-2osixlq9ho] {
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.mc-tooltip-departing[b-2osixlq9ho],
.mc-tooltip-arriving[b-2osixlq9ho] {
    display: none;
}

.mc-hover-departing:hover ~ .mc-tooltip-departing[b-2osixlq9ho] {
    display: flex;
}

.mc-hover-arriving:hover ~ .mc-tooltip-arriving[b-2osixlq9ho] {
    display: flex;
}

.day-cell:has(.mc-hover-zone) > .mc-tooltip:not(.mc-tooltip-departing):not(.mc-tooltip-arriving)[b-2osixlq9ho] {
    display: none !important;
}

.day-cell.selection-start[b-2osixlq9ho] {
    outline: 3px solid #22c55e;
    outline-offset: -2px;
    z-index: 3;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}

.day-cell.selection-range[b-2osixlq9ho] {
    background: rgba(34, 197, 94, 0.2) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
}

.day-cell.selection-range-start[b-2osixlq9ho] {
    background: rgba(34, 197, 94, 0.35) !important;
    border-color: #22c55e !important;
    border-radius: 6px 2px 2px 6px;
}

.day-cell.selection-range-end[b-2osixlq9ho] {
    background: rgba(34, 197, 94, 0.35) !important;
    border-color: #22c55e !important;
    border-radius: 2px 6px 6px 2px;
}

.day-cell.selection-range-start.selection-range-end[b-2osixlq9ho] {
    border-radius: 6px;
}

@media (max-width: 450px) {
    .calendar-month[b-2osixlq9ho] {
        padding: 0.75rem;
    }

    .weekday-row[b-2osixlq9ho],
    .days-grid[b-2osixlq9ho] {
        gap: 2px;
    }

    .weekday[b-2osixlq9ho] {
        font-size: 0.65rem;
        padding: 0.25rem 0;
    }

    .day-cell[b-2osixlq9ho] {
        font-size: 0.95rem;
        border-radius: 5px;
    }

    .month-header[b-2osixlq9ho] {
        font-size: 1rem;
    }
}
/* /Components/Shared/BookingRequestDetailDialog.razor.rz.scp.css */
/* ===== BookingRequestDetailDialog scoped styles ===== */

/* Body */
.brd-body[b-agsxw0w2yo] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Status banner */
.brd-status-banner[b-agsxw0w2yo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.brd-status-pill[b-agsxw0w2yo] {
    cursor: default;
    font-size: 0.85rem;
}

.brd-created-at[b-agsxw0w2yo] {
    margin-left: auto;
}

/* Section card (reusable panel) */
.brd-section-card[b-agsxw0w2yo] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 1rem;
}

:root[data-theme="light"] .brd-section-card[b-agsxw0w2yo] {
    background: #f8f9fa;
    border-color: rgba(15, 23, 42, 0.1);
}

/* Times the guest named that sit outside the house's own window. Amber, matching the note the
   widget showed the guest: the request is legitimate and the host may well say yes — this only has
   to be impossible to miss while accept and decline are still on screen. */
.brd-time-warning[b-agsxw0w2yo] {
    border-color: rgba(217, 119, 6, 0.5);
    background: rgba(217, 119, 6, 0.12);
}

:root[data-theme="light"] .brd-time-warning[b-agsxw0w2yo] {
    border-color: rgba(217, 119, 6, 0.45);
    background: rgba(217, 119, 6, 0.1);
}

.brd-time-warning-line[b-agsxw0w2yo] {
    margin-top: 0.35rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Guest card */
.brd-guest-row[b-agsxw0w2yo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.brd-guest-avatar[b-agsxw0w2yo] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.brd-guest-info[b-agsxw0w2yo] {
    min-width: 0;
    flex: 1;
}

.brd-chat-button[b-agsxw0w2yo] {
    color: var(--bc-muted);
}

.brd-chat-button:hover[b-agsxw0w2yo] {
    color: var(--bc-accent);
}

.brd-guest-name[b-agsxw0w2yo] {
    font-weight: 600;
    font-size: 0.95rem;
}

.brd-guest-email[b-agsxw0w2yo] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Shown only when the address was never confirmed. Amber, not red: an unconfirmed address is very
   often a perfectly good one, and this is a "worth knowing", not a "something is wrong". */
.brd-email-unconfirmed[b-agsxw0w2yo] {
    display: inline-block;
    margin-top: 0.2rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgba(217, 119, 6, 0.14);
    color: #b45309;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: help;
}

:global(.dark) .brd-email-unconfirmed[b-agsxw0w2yo] {
    color: #fbbf24;
}

.brd-locale-panel[b-agsxw0w2yo] {
    margin-left: 48px;
}

.brd-locale-label[b-agsxw0w2yo] {
    margin-bottom: 0.35rem;
}

.brd-locale-list[b-agsxw0w2yo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.brd-locale-pill[b-agsxw0w2yo] {
    max-width: 100%;
    font-size: 0.7rem;
    flex-shrink: 0;
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.25);
    color: #93c5fd;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.brd-flag-icon[b-agsxw0w2yo] {
    display: inline-flex;
    width: 1rem;
    justify-content: center;
    font-size: 0.85rem;
    line-height: 1;
}

.brd-locale-name[b-agsxw0w2yo] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brd-locale-code[b-agsxw0w2yo] {
    opacity: 0.65;
    font-size: 0.65rem;
}

@media (max-width: 480px) {
    .brd-locale-panel[b-agsxw0w2yo] {
        margin-left: 0;
    }
}

/* Date range */
.brd-date-range[b-agsxw0w2yo] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.brd-date-col[b-agsxw0w2yo] {
    flex: 1;
    text-align: center;
}

.brd-date-label[b-agsxw0w2yo] {
    margin-bottom: 0.15rem;
}

.brd-date-value[b-agsxw0w2yo] {
    font-weight: 600;
}

.brd-date-arrow[b-agsxw0w2yo] {
    font-size: 1.2rem;
    opacity: 0.4;
}

.brd-date-summary[b-agsxw0w2yo] {
    text-align: center;
    margin-top: 0.5rem;
}

.brd-days-pill[b-agsxw0w2yo] {
    font-size: 0.8rem;
}

/* Mini calendar */
.brd-calendar-label[b-agsxw0w2yo] {
    margin-bottom: 0.75rem;
}

.brd-months-wrap[b-agsxw0w2yo] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.brd-month-col[b-agsxw0w2yo] {
    flex: 1;
    min-width: 220px;
    max-width: 260px;
}

.brd-month-header[b-agsxw0w2yo] {
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
    color: var(--bc-text);
}

.brd-weekday-row[b-agsxw0w2yo] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    text-align: center;
    margin-bottom: 0.25rem;
}

.brd-weekday[b-agsxw0w2yo] {
    font-size: 0.6rem;
    color: var(--bc-muted);
    font-weight: 600;
}

.brd-days-grid[b-agsxw0w2yo] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.brd-legend[b-agsxw0w2yo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
    justify-content: center;
}

/* Notes / custom fields */
.brd-notes-text[b-agsxw0w2yo] {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.9rem;
    line-height: 1.5;
}

.brd-custom-fields-text[b-agsxw0w2yo] {
    white-space: pre-wrap;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* Price breakdown */
.brd-price-label[b-agsxw0w2yo] {
    margin-bottom: 0.5rem;
}

.brd-price-line[b-agsxw0w2yo] {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 0.15rem 0;
}

.brd-price-calc[b-agsxw0w2yo] {
    opacity: 0.55;
    font-size: 0.8rem;
}

.brd-price-amount[b-agsxw0w2yo] {
    font-weight: 500;
}

.brd-price-total[b-agsxw0w2yo] {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 0.95rem;
    padding-top: 0.4rem;
    margin-top: 0.3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

:root[data-theme="light"] .brd-price-total[b-agsxw0w2yo] {
    border-top-color: rgba(15, 23, 42, 0.1);
}

/* Responded at */
.brd-responded-at[b-agsxw0w2yo] {
    font-size: 0.8rem;
}

/* Actions footer */
.brd-spacer[b-agsxw0w2yo] {
    flex: 1;
}

.brd-decline-btn[b-agsxw0w2yo] {
    color: #fca5a5;
}

.brd-accept-btn[b-agsxw0w2yo] {
    color: #86efac;
}
/* /Components/Shared/BookingRequestFormBuilder.razor.rz.scp.css */
.form-builder-area[b-sw9djhu8e6] {
    min-height: 80px;
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: border-color 0.2s;
}

.form-builder-area:empty[b-sw9djhu8e6]::after {
    content: "Drag fields here";
    color: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

/* Deliberately NOT linearized on narrow screens: the builder is a WYSIWYG of the form's
   column layout, so the grid keeps its real columns everywhere and the cards themselves
   slim down to fit (see FormBuilderCard.razor.css's mobile block). */

.removed-fields-section[b-sw9djhu8e6] {
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 0.5rem;
}

.removed-fields-row[b-sw9djhu8e6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.removed-field-card[b-sw9djhu8e6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: rgba(250, 204, 21, 0.06);
    border: 1px dashed rgba(250, 204, 21, 0.3);
    border-radius: 8px;
    cursor: grab;
    font-size: 0.85rem;
}

.removed-field-card:hover[b-sw9djhu8e6] {
    background: rgba(250, 204, 21, 0.1);
}

.removed-field-card .drag-handle[b-sw9djhu8e6] {
    user-select: none;
    cursor: grab;
}

.removed-field-card .card-label[b-sw9djhu8e6] {
    font-weight: 500;
}

.preview-form[b-sw9djhu8e6] {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.empty-cell[b-sw9djhu8e6] {
    min-height: 44px;
    border: 2px dashed rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.empty-cell:hover[b-sw9djhu8e6],
.empty-cell.drag-over[b-sw9djhu8e6] {
    border-color: rgba(96, 165, 250, 0.4);
    background: rgba(96, 165, 250, 0.05);
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15);
}

/* Light theme overrides */
:global(:root[data-theme="light"]) .form-builder-area[b-sw9djhu8e6] {
    border-color: rgba(0, 0, 0, 0.12);
}

:global(:root[data-theme="light"]) .form-builder-area:empty[b-sw9djhu8e6]::after {
    color: rgba(0, 0, 0, 0.35);
}

:global(:root[data-theme="light"]) .removed-fields-section[b-sw9djhu8e6] {
    border-top-color: rgba(0, 0, 0, 0.1);
}

:global(:root[data-theme="light"]) .removed-field-card[b-sw9djhu8e6] {
    background: rgba(234, 179, 8, 0.06);
    border-color: rgba(234, 179, 8, 0.3);
}

:global(:root[data-theme="light"]) .removed-field-card:hover[b-sw9djhu8e6] {
    background: rgba(234, 179, 8, 0.12);
}

:global(:root[data-theme="light"]) .removed-field-card .drag-handle[b-sw9djhu8e6] {
    color: rgba(0, 0, 0, 0.35);
}

:global(:root[data-theme="light"]) .preview-form[b-sw9djhu8e6] {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.1);
}

:global(:root[data-theme="light"]) .empty-cell[b-sw9djhu8e6] {
    border-color: rgba(0, 0, 0, 0.1);
}
/* /Components/Shared/Bookings/BookingsCalendarView.razor.rz.scp.css */
/* Calendar grid / nav.
   These rules previously lived in ClientGuestHouseBookings.razor.css, but the
   markup moved into this component when the bookings page was split into tabs.
   Blazor scopes .razor.css to its own component's elements only, so they stopped
   matching and the month grid collapsed to display:block (one full-width month
   per row, blowing up the aspect-ratio:1 day cells). */

/* ===== Calendar grid ===== */
.select-calendar-grid[b-fmzzqpc8m8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* The guest-bars view labels each stay with a name, so it needs a wider month than the
   tiles view to avoid truncating to "Schn…". Two across instead of three. */
.select-calendar-grid.guest-bars[b-fmzzqpc8m8] {
    grid-template-columns: repeat(2, 1fr);
}

.calendar-nav[b-fmzzqpc8m8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.calendar-nav button[b-fmzzqpc8m8] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--bc-text);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s ease;
}

.calendar-nav button:hover:not(:disabled)[b-fmzzqpc8m8] {
    background: rgba(255, 255, 255, 0.1);
    color: #f8fafc;
}

.calendar-nav button:disabled[b-fmzzqpc8m8] {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ===== Light theme overrides ===== */
:root[data-theme="light"] .calendar-nav button[b-fmzzqpc8m8] {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.15);
    color: #1e293b;
}

/* ===== Responsive ===== */
@media (max-width: 800px) {
    .select-calendar-grid[b-fmzzqpc8m8] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .select-calendar-grid[b-fmzzqpc8m8],
    .select-calendar-grid.guest-bars[b-fmzzqpc8m8] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .calendar-nav[b-fmzzqpc8m8] {
        gap: 0.6rem;
    }
}
/* /Components/Shared/Bookings/BookingsListView.razor.rz.scp.css */
/* Bookings table styling. Same story as BookingsCalendarView.razor.css: these rules
   lived in ClientGuestHouseBookings.razor.css until the tab split moved the markup
   into this component, at which point Blazor's per-component scoping stopped them
   from matching (row hover, year separators and numeric alignment silently died).
   The base .table-modern / .table-wrap / .cell-* styles stay global in legacy.css. */

/* ===== Clickable booking rows ===== */
.booking-row[b-jp0l29111g] {
    cursor: pointer;
    transition: background 0.15s ease;
}

.booking-row:hover[b-jp0l29111g] {
    background: rgba(96, 165, 250, 0.08) !important;
}

.booking-row.expired[b-jp0l29111g] {
    opacity: 0.55;
}

.booking-row.cancelled[b-jp0l29111g] {
    opacity: 0.72;
}

.booking-row.cancelled .cell-title[b-jp0l29111g] {
    color: var(--bc-muted);
}

.numeric-cell[b-jp0l29111g] {
    text-align: right;
}

.numeric-cell .cell-title[b-jp0l29111g],
.numeric-cell .cell-sub[b-jp0l29111g] {
    text-align: right;
}

/* ===== Year separator ===== */
.year-separator-row[b-jp0l29111g] {
    cursor: default;
}

.year-separator-row:hover[b-jp0l29111g] {
    background: transparent !important;
}

.year-separator[b-jp0l29111g] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.25rem 0;
}

.year-separator[b-jp0l29111g]::before,
.year-separator[b-jp0l29111g]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bc-panel-border);
}

.year-separator-label[b-jp0l29111g] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--bc-muted);
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* ===== Light theme overrides ===== */
:root[data-theme="light"] .booking-row:hover[b-jp0l29111g] {
    background: rgba(59, 130, 246, 0.06) !important;
}

.table-modern th[b-jp0l29111g] {
    text-align: left;
}

@media (max-width: 576px) {
    .table-modern[b-jp0l29111g] {
        min-width: 480px;
    }

    /* Right-edge fade as a swipe affordance (loop2 C3): the table scrolls horizontally on
       mobile and clips the trailing columns; the fade signals there is more to the right.
       Lives on the non-scrolling shell so it stays put while the table scrolls beneath it. */
    .table-scroll-shell[b-jp0l29111g] {
        position: relative;
    }

    .table-scroll-shell[b-jp0l29111g]::after {
        content: '';
        position: absolute;
        top: 1px;
        bottom: 1px;
        right: 1px;
        width: 28px;
        pointer-events: none;
        border-radius: 0 12px 12px 0;
        background: linear-gradient(to left, var(--bc-bg), transparent);
        opacity: 0.85;
    }
}

.requestIconCell[b-jp0l29111g] {
    padding-right: 0;
    padding-left: 0.5rem;
}
/* /Components/Shared/Bookings/CalendarSelectionHint.razor.rz.scp.css */
.calendar-select-hint[b-518f5mnsfm] {
    text-align: center;
    padding: 0.75rem;
    color: var(--bc-muted);
    font-size: 0.9rem;
    border: 1px dashed var(--bc-panel-border);
    border-radius: 10px;
    margin-bottom: 1rem;
}
/* /Components/Shared/Bookings/HostOccupancyMonth.razor.rz.scp.css */
/* Host occupancy calendar — semantic design tokens (--primary/--panel/--border/...), not the
   public embed's --bc-* tokens. Booked ≠ danger for a host: bookings are brand-tinted bars with
   guest-name labels; red is reserved for cancellations and double-booking conflicts. */
.host-occupancy-month[b-026n36g7ej] {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.75rem;
    background: var(--panel);
}

.host-occupancy-header[b-026n36g7ej] {
    text-align: center;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.host-occupancy-weekday-row[b-026n36g7ej],
.host-occupancy-day-row[b-026n36g7ej] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.host-occupancy-weekday[b-026n36g7ej] {
    text-align: center;
    font-size: 0.7rem;
    color: var(--muted-foreground);
    padding-bottom: 0.25rem;
}

.host-occupancy-week[b-026n36g7ej] {
    margin-bottom: 0.15rem;
}

.host-occupancy-day[b-026n36g7ej] {
    text-align: center;
    font-size: 0.75rem;
    color: var(--foreground);
    padding: 0.15rem 0;
    border-radius: 0.25rem;
}

.host-occupancy-day.placeholder[b-026n36g7ej] {
    visibility: hidden;
}

.host-occupancy-day.past[b-026n36g7ej] {
    color: var(--muted-foreground);
    opacity: 0.5;
}

.host-occupancy-day.today[b-026n36g7ej] {
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--primary);
}

.host-occupancy-day.clickable[b-026n36g7ej] {
    cursor: pointer;
}

.host-occupancy-day.clickable:hover[b-026n36g7ej] {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
}

/* Two columns per day, so a changeover bar can start or stop on a day's midpoint and still
   line up with the 7-column day row above (which has no column gap, so 14 halves align
   exactly). Column gap stays 0: back-to-back stays should meet flush at the changeover
   midpoint, the way the tiles view's diagonal split does. */
.host-occupancy-bar-row[b-026n36g7ej] {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-auto-rows: 1.25rem;
    row-gap: 2px;
    min-height: 1.25rem;
}

.host-occupancy-bar[b-026n36g7ej] {
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 4px;
    /* A flat var(--primary) fill read weak against the new glass card background — a subtle
       gradient (same brand color, just not perfectly flat) keeps it legible without touching
       the --destructive reserved for conflicts/cancelled below. */
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 78%, transparent));
    color: var(--primary-foreground);
    font-size: 0.65rem;
    font-weight: 500;
    padding: 0 4px;
    cursor: pointer;
    white-space: nowrap;
}

.host-occupancy-bar.conflict[b-026n36g7ej] {
    background: var(--destructive);
    color: #fff;
}

/* The half-day inset is grid placement now (see OccupancyBarSegment.StartHalfColumn); these
   only square off the edge that lands mid-day, so it reads as a changeover rather than an end. */
.host-occupancy-bar.starts-mid[b-026n36g7ej] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.host-occupancy-bar.ends-mid[b-026n36g7ej] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.host-occupancy-bar-label[b-026n36g7ej] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Shared/CancellationTierEditDialog.razor.rz.scp.css */
.cancellation-slider-card[b-3lajlmb2af] {
    border: 1px solid var(--bc-panel-border);
    border-radius: 12px;
    padding: 0.9rem;
    background: rgba(96, 165, 250, 0.08);
}

.cancellation-slider-head[b-3lajlmb2af] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--bc-muted);
    font-size: 0.86rem;
    margin-bottom: 0.75rem;
}

.cancellation-slider-head strong[b-3lajlmb2af] {
    color: var(--bc-text);
    font-size: 1rem;
}

.cancellation-slider[b-3lajlmb2af] {
    width: 100%;
    accent-color: var(--bc-accent);
}

.cancellation-slider-scale[b-3lajlmb2af] {
    display: flex;
    justify-content: space-between;
    color: var(--bc-muted);
    font-size: 0.72rem;
    margin-top: 0.35rem;
}

@media (max-width: 576px) {
    .cancellation-slider-card[b-3lajlmb2af] {
        padding: 0.85rem;
    }
}
/* /Components/Shared/EmailTemplateEditorDialog.razor.rz.scp.css */
.template-lang-tabs[b-7h4319g9kl] {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--bc-panel-border);
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
}

.template-lang-tab[b-7h4319g9kl] {
    position: relative;
    padding: 0.45rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--bc-muted);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Narrow screens: slim the tabs down so three fit per row (en/de/fr, then es/nl),
   and center the rows so the shorter second row doesn't hang off to the left. */
@media (max-width: 480px) {
    .template-lang-tabs[b-7h4319g9kl] {
        justify-content: center;
    }

    .template-lang-tab[b-7h4319g9kl] {
        padding: 0.4rem 0.5rem;
        font-size: 0.8rem;
        gap: 0.25rem;
    }
}

.template-tab-flag[b-7h4319g9kl] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

[b-7h4319g9kl] .template-flag-svg {
    width: 1.15rem;
    height: auto;
    border-radius: 2px;
    display: block;
}

.template-lang-tab:hover[b-7h4319g9kl] {
    background: rgba(255, 255, 255, 0.05);
    color: var(--bc-text);
}

.template-lang-tab.active[b-7h4319g9kl] {
    background: rgba(96, 165, 250, 0.12);
    color: var(--bc-accent);
    border-color: var(--bc-panel-border);
    border-bottom-color: transparent;
}

.template-tab-dot[b-7h4319g9kl] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bc-accent);
    margin-left: 0.35rem;
    vertical-align: middle;
}

.template-editor-pane[b-7h4319g9kl] {
    padding: 0.25rem 0;
}

.email-placeholder-hint[b-7h4319g9kl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    color: var(--bc-muted);
}

.email-placeholder-tag[b-7h4319g9kl] {
    background: rgba(96, 165, 250, 0.15);
    color: #93c5fd;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: monospace;
}

.email-placeholder-clickable[b-7h4319g9kl] {
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.email-placeholder-clickable:hover[b-7h4319g9kl] {
    background: rgba(96, 165, 250, 0.35);
    transform: scale(1.05);
}

.email-template-textarea[b-7h4319g9kl] {
    font-family: monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 150px;
}

.email-preview-frame[b-7h4319g9kl] {
    border: 1px solid var(--bc-panel-border);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    min-height: 200px;
}

.email-preview-iframe[b-7h4319g9kl] {
    width: 100%;
    min-height: 250px;
    border: none;
    background: #fff;
}
/* /Components/Shared/FormBuilderCard.razor.rz.scp.css */
.form-builder-card[b-muqk4caaq5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Grid items refuse to shrink below their content without this, which pushed the
       whole builder grid out of the dialog on narrow screens. */
    min-width: 0;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: grab;
    transition: all 0.15s ease;
    min-height: 44px;
}

.form-builder-card:hover[b-muqk4caaq5] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(96, 165, 250, 0.3);
}

.form-builder-card.drag-over[b-muqk4caaq5] {
    border-color: rgba(96, 165, 250, 0.6);
    background: rgba(96, 165, 250, 0.1);
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15);
}

.form-builder-card:active[b-muqk4caaq5] {
    cursor: grabbing;
    opacity: 0.7;
}

.drag-handle[b-muqk4caaq5] {
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.1rem;
    user-select: none;
    cursor: grab;
    flex-shrink: 0;
}

.card-label[b-muqk4caaq5] {
    flex: 1;
    font-weight: 500;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge-tag[b-muqk4caaq5] {
    font-size: 0.65rem;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.default-tag[b-muqk4caaq5] {
    background: rgba(96, 165, 250, 0.15);
    color: #93c5fd;
}

.optional-tag[b-muqk4caaq5] {
    background: rgba(250, 204, 21, 0.15);
    color: #fcd34d;
}

.required-star[b-muqk4caaq5] {
    color: #f87171;
    font-weight: bold;
}

.card-actions[b-muqk4caaq5] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* Drag-and-drop's touch fallback: hidden wherever a mouse is available, shown on
   coarse-pointer devices and narrow screens (where dragging is also fiddly). */
.card-move[b-muqk4caaq5] {
    display: none;
    gap: 0.25rem;
}

@media (hover: none), (max-width: 640px) {
    .card-move[b-muqk4caaq5] {
        display: flex;
    }
}

/* Narrow screens keep the builder's real column layout (it's a WYSIWYG of the form), so
   the card compacts to make a ~150px cell workable: the drag handle goes (touch can't
   drag anyway — the ◀/▶ buttons reorder), the label takes its own full-width line, and
   the actions wrap onto a second line, right-aligned, in smaller type. */
@media (max-width: 640px) {
    .form-builder-card[b-muqk4caaq5] {
        flex-wrap: wrap;
        gap: 0.15rem 0.3rem;
        padding: 0.35rem 0.45rem;
        min-height: 0;
    }

    .form-builder-card > .drag-handle[b-muqk4caaq5] {
        display: none;
    }

    .card-label[b-muqk4caaq5] {
        flex: 1 1 100%;
        font-size: 0.78rem;
        gap: 0.25rem;
    }

    .badge-tag[b-muqk4caaq5] {
        font-size: 0.55rem;
        padding: 0.1rem 0.25rem;
    }

    .card-actions[b-muqk4caaq5] {
        margin-left: auto;
    }

    .card-actions .btn-icon[b-muqk4caaq5] {
        font-size: 0.75rem;
        padding: 0.1rem 0.2rem;
    }
}

.card-actions .btn-icon[b-muqk4caaq5] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.15rem 0.3rem;
    border-radius: 4px;
    font-size: 0.85rem;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.card-actions .btn-icon:hover[b-muqk4caaq5] {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

/* Light theme overrides */
:root[data-theme="light"] .form-builder-card[b-muqk4caaq5] {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

:root[data-theme="light"] .form-builder-card:hover[b-muqk4caaq5] {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(59, 130, 246, 0.4);
}

:root[data-theme="light"] .form-builder-card.drag-over[b-muqk4caaq5] {
    background: rgba(96, 165, 250, 0.08);
}

:root[data-theme="light"] .drag-handle[b-muqk4caaq5] {
    color: rgba(0, 0, 0, 0.35);
}

:root[data-theme="light"] .default-tag[b-muqk4caaq5] {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

:root[data-theme="light"] .optional-tag[b-muqk4caaq5] {
    background: rgba(234, 179, 8, 0.12);
    color: #a16207;
}

:root[data-theme="light"] .card-actions .btn-icon:hover[b-muqk4caaq5] {
    background: rgba(0, 0, 0, 0.08);
}
/* /Components/Shared/GuestHouseDesignCard.razor.rz.scp.css */
/* Layout-theme swatch strip: 3 representative colors per theme, shown inside its radio card. */
.layout-swatch-strip[b-d5x12ofb4w] {
    display: flex;
    height: 14px;
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.layout-swatch-strip > span[b-d5x12ofb4w] {
    flex: 1;
}

/* Changeover-day mini preview: two small cells — the first always "available", the
   second showing either a diagonal half-split or a solid full-day block. Component-local
   only; the frozen public embed keeps its own copy of this visual language in legacy.css. */
.changeover-preview[b-d5x12ofb4w] {
    display: flex;
    gap: 4px;
}

.changeover-cell[b-d5x12ofb4w] {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.changeover-cell-available[b-d5x12ofb4w] {
    background: #22c55e;
}

.changeover-cell-diagonal[b-d5x12ofb4w] {
    background: linear-gradient(135deg, #22c55e 50%, #ef4444 50%);
}

.changeover-cell-full[b-d5x12ofb4w] {
    background: #ef4444;
}
/* /Components/Shared/PriceProfileCard.razor.rz.scp.css */
/* Price-profile card — docs/preise-redesign-spec.md.

   Scoped rather than global because none of this is reusable vocabulary: it is one component's
   internal structure, which is what .razor.css is for in this project (see FormBuilderCard,
   HostOccupancyMonth). Two consequences worth knowing before editing:

   1. No @apply and no Tailwind utilities here — .razor.css files are processed by Blazor's CSS
      isolation, not by the Tailwind pipeline. Colours come from the global tokens in tailwind.css.
   2. Blazor appends the scope attribute to the LAST element of each selector, so descendant and
      sibling selectors work fine as long as every element involved is part of THIS component's
      markup. That is why density lives on .pp-card (our own root) instead of on the page's grid:
      it keeps every rule below inside the scope and needs no ::deep.

   <Button> and <Icon> children carry their own scope ids and are unreachable from here; their
   styling goes through the Class parameter at the call site. */

.pp-card[b-lvc6t41nfb] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

/* Violet marks the Standard profile's structural role, green the temporal fact that a profile
   applies today. They do not mean the same thing and may both be on screen at once. */
.pp-card--standard[b-lvc6t41nfb] {
    border-color: color-mix(in srgb, var(--primary) 50%, transparent);
}

.pp-card--live[b-lvc6t41nfb] {
    border-color: color-mix(in srgb, var(--success) 50%, transparent);
}

/* Enabled but unable to ever apply — the error state. */
.pp-card--stuck[b-lvc6t41nfb] {
    border-color: color-mix(in srgb, var(--warning) 45%, transparent);
}

/* Expired and paused: finished, not broken. Dimmed rather than coloured. */
.pp-card--archived[b-lvc6t41nfb] {
    opacity: 0.72;
}

/* ── Flag row ───────────────────────────────────────────────────────────────────────────────── */

.pp-flag[b-lvc6t41nfb] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 14px;
    font-size: 11px;
    background: var(--pp-inset);
    color: var(--muted-foreground);
}

.pp-flag__main[b-lvc6t41nfb] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.pp-flag__detail[b-lvc6t41nfb] {
    flex: none;
    opacity: 0.8;
}


.pp-card--standard .pp-flag[b-lvc6t41nfb] {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
}

.pp-card--live .pp-flag[b-lvc6t41nfb] {
    background: color-mix(in srgb, var(--success) 9%, transparent);
    color: var(--success);
}

.pp-card--stuck .pp-flag[b-lvc6t41nfb] {
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    color: var(--warning);
}

/* The "currently running" indicator. A CSS dot rather than a glyph: it is a status light, and at
   6px an SVG would carry an 18px box that needs re-aligning inside an 11px row. */
.pp-dot[b-lvc6t41nfb] {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
}

/* ── Head ───────────────────────────────────────────────────────────────────────────────────── */

.pp-body[b-lvc6t41nfb] {
    padding: 14px;
}

.pp-head[b-lvc6t41nfb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.pp-head__text[b-lvc6t41nfb] {
    min-width: 0;
}

.pp-name[b-lvc6t41nfb] {
    font-weight: 500;
    color: var(--foreground);
    overflow-wrap: anywhere;
}

.pp-meta[b-lvc6t41nfb] {
    margin-top: 3px;
    font-size: 12px;
    color: var(--muted-foreground);
}

/* ── Period list ────────────────────────────────────────────────────────────────────────────── */

.pp-periods[b-lvc6t41nfb] {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--muted-foreground);
}

.pp-periods ul[b-lvc6t41nfb] {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.pp-periods li[b-lvc6t41nfb] {
    display: flex;
    align-items: center;
    gap: 5px;
    list-style: none;
}


.pp-periods:not(.is-periods-open) .pp-period--overflow[b-lvc6t41nfb],
.pp-periods.is-periods-open .pp-periods__more[b-lvc6t41nfb],
.pp-periods:not(.is-periods-open) .pp-periods__less[b-lvc6t41nfb] {
    display: none;
}

/* ── Price block ────────────────────────────────────────────────────────────────────────────── */

.pp-prices[b-lvc6t41nfb] {
    margin: 12px 0;
    padding: 11px 12px;
    background: var(--pp-inset);
    border-radius: 8px;
}

.pp-prices__empty[b-lvc6t41nfb] {
    margin: 0;
    font-size: 12px;
    color: var(--warning);
}

.pp-rates[b-lvc6t41nfb] {
    display: grid;
    gap: 9px;
}

.pp-rate + .pp-rate[b-lvc6t41nfb] {
    padding-top: 9px;
    border-top: 1px solid var(--pp-hairline);
}

.pp-rate__label[b-lvc6t41nfb] {
    font-size: 11px;
    color: var(--muted-foreground);
}

.pp-rate__value[b-lvc6t41nfb] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 1px;
}

.pp-rate__amount[b-lvc6t41nfb] {
    font-size: 21px;
    color: var(--foreground);
}

.pp-rate--solo .pp-rate__amount[b-lvc6t41nfb] {
    font-size: 23px;
}

.pp-rate__unit[b-lvc6t41nfb] {
    font-size: 12px;
    color: var(--muted-foreground);
}

.pp-group[b-lvc6t41nfb] {
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid var(--pp-hairline);
}

.pp-group__label[b-lvc6t41nfb] {
    margin-bottom: 6px;
    font-size: 11px;
    color: var(--muted-foreground);
    opacity: 0.8;
}

.pp-group__rows[b-lvc6t41nfb] {
    display: grid;
    gap: 6px;
    font-size: 12px;
}

.pp-row__main[b-lvc6t41nfb] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.pp-row__name[b-lvc6t41nfb] {
    color: var(--foreground);
    opacity: 0.9;
    overflow-wrap: anywhere;
}

.pp-row__amount[b-lvc6t41nfb] {
    flex: none;
    color: var(--foreground);
}

.pp-row__unit[b-lvc6t41nfb] {
    font-size: 11px;
    color: var(--muted-foreground);
    opacity: 0.85;
}

.pp-row__more[b-lvc6t41nfb],
.pp-summary[b-lvc6t41nfb] {
    font-size: 12px;
    color: var(--muted-foreground);
    opacity: 0.85;
}

.pp-row--optional[b-lvc6t41nfb] {
    opacity: 0.75;
}

.pp-tag[b-lvc6t41nfb] {
    margin-left: 4px;
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 10px;
    color: var(--muted-foreground);
    white-space: nowrap;
}

/* ── Compact vs. Details ────────────────────────────────────────────────────────────────────── */
/* One control, two effects: it reveals the withheld positions AND turns on the frequency per row. */

.pp-card:not(.is-open) .pp-row__unit[b-lvc6t41nfb],
.pp-card:not(.is-open) .pp-group__label[b-lvc6t41nfb],
.pp-card:not(.is-open) .pp-row--overflow[b-lvc6t41nfb],
.pp-card:not(.is-open) .pp-group--optional .pp-group__rows[b-lvc6t41nfb],
.pp-card:not(.is-open) .pp-tag[b-lvc6t41nfb] {
    display: none;
}

/* Rates sit side by side while compact, stacked with a hairline once opened. */
.pp-card:not(.is-open) .pp-rates[b-lvc6t41nfb] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.pp-card:not(.is-open) .pp-rate + .pp-rate[b-lvc6t41nfb] {
    padding-top: 0;
    border-top: none;
}

.pp-card:not(.is-open) .pp-rate__amount[b-lvc6t41nfb] {
    font-size: 19px;
}

.pp-card:not(.is-open) .pp-rate__unit[b-lvc6t41nfb] {
    font-size: 11px;
}

.pp-card:not(.is-open) .pp-group__rows[b-lvc6t41nfb] {
    gap: 3px;
}

.pp-card:not(.is-open) .pp-group[b-lvc6t41nfb] {
    margin-top: 10px;
    padding-top: 9px;
}

/* Collapsed optionals are one summary line, so the group needs no rule above it. */
.pp-card:not(.is-open) .pp-group--optional[b-lvc6t41nfb] {
    margin-top: 3px;
    padding-top: 0;
    border-top: none;
}

.pp-summary[b-lvc6t41nfb] {
    display: none;
}

.pp-card:not(.is-open) .pp-group--optional .pp-summary[b-lvc6t41nfb] {
    display: block;
}

.pp-card.is-open .pp-row__more[b-lvc6t41nfb],
.pp-card.is-open .pp-link__more[b-lvc6t41nfb],
.pp-card:not(.is-open) .pp-link__less[b-lvc6t41nfb] {
    display: none;
}

/* ── Link-style buttons ─────────────────────────────────────────────────────────────────────── */

.pp-link[b-lvc6t41nfb] {
    display: block;
    margin: 0;
    padding: 9px 0 0;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 12px;
    color: var(--primary);
    text-align: left;
}

.pp-link:hover[b-lvc6t41nfb] {
    text-decoration: underline;
}

.pp-periods .pp-link[b-lvc6t41nfb] {
    padding-top: 2px;
}

.pp-link__more[b-lvc6t41nfb],
.pp-link__less[b-lvc6t41nfb],
.pp-periods__more[b-lvc6t41nfb],
.pp-periods__less[b-lvc6t41nfb] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}


/* ── Notice, constraints, actions ───────────────────────────────────────────────────────────── */

.pp-notice[b-lvc6t41nfb] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    font-size: 12px;
    color: var(--warning);
}


.pp-constraints[b-lvc6t41nfb] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--muted-foreground);
}

.pp-constraints span[b-lvc6t41nfb] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}


.pp-actions[b-lvc6t41nfb] {
    display: flex;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}