/* /Components/Help/HelpBar.razor.rz.scp.css */
/* ── HelpBar Backdrop ─────────────────────────────────────────────────────── */
.helpbar-backdrop[b-tgyo0k6m5k] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1040;
    cursor: pointer;
}

/* ── HelpBar Slide-over Panel ────────────────────────────────────────────── */
.helpbar-panel[b-tgyo0k6m5k] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    background: var(--color-card-bg);
    color: var(--color-text);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    animation: helpbar-slide-in-b-tgyo0k6m5k 0.2s ease-out;
}

@keyframes helpbar-slide-in-b-tgyo0k6m5k {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.helpbar-header[b-tgyo0k6m5k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.helpbar-header-icon[b-tgyo0k6m5k] {
    color: var(--color-primary);
    font-size: 1.25rem;
}

.helpbar-header-title[b-tgyo0k6m5k] {
    flex: 1;
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text);
}

.helpbar-close[b-tgyo0k6m5k] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    /* Tap target ≥44px */
    min-width: 44px;
    min-height: 44px;
    transition: background 0.15s, color 0.15s;
}

.helpbar-close:hover[b-tgyo0k6m5k],
.helpbar-close:focus-visible[b-tgyo0k6m5k] {
    background: var(--color-border);
    color: var(--color-text);
}

.helpbar-close:focus-visible[b-tgyo0k6m5k] {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* ── Search Box ──────────────────────────────────────────────────────────── */
.helpbar-search-wrap[b-tgyo0k6m5k] {
    position: relative;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.helpbar-search-icon[b-tgyo0k6m5k] {
    position: absolute;
    top: 50%;
    left: 1.625rem;
    transform: translateY(-50%);
    color: var(--color-muted);
    pointer-events: none;
    font-size: 1.125rem;
}

.helpbar-search-input[b-tgyo0k6m5k] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.625rem 0.75rem 0.625rem 2.5rem;
    /* Tap-target height ≥44px */
    min-height: 44px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-family: var(--font-sans);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.helpbar-search-input:focus[b-tgyo0k6m5k] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* Clear button in search input (browser default) */
.helpbar-search-input[b-tgyo0k6m5k]::-webkit-search-cancel-button {
    cursor: pointer;
}

/* ── Body / Scrollable Area ──────────────────────────────────────────────── */
.helpbar-body[b-tgyo0k6m5k] {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    -webkit-overflow-scrolling: touch;
}

/* ── Section label ───────────────────────────────────────────────────────── */
.helpbar-section-label[b-tgyo0k6m5k] {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    margin: 0 0 0.5rem;
}

/* ── Results List ────────────────────────────────────────────────────────── */
.helpbar-results[b-tgyo0k6m5k] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.helpbar-result-item[b-tgyo0k6m5k] {
    display: block;
}

.helpbar-result-btn[b-tgyo0k6m5k] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    /* Tap target ≥44px */
    min-height: 44px;
    padding: 0.6rem 0.75rem;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, border-color 0.12s;
}

.helpbar-result-btn:hover[b-tgyo0k6m5k],
.helpbar-result-btn:focus-visible[b-tgyo0k6m5k] {
    background: var(--color-bg);
    border-color: var(--color-border);
}

.helpbar-result-btn:focus-visible[b-tgyo0k6m5k] {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* Active / pressed state — no hover-only interaction (WKWebView-safe) */
.helpbar-result-btn:active[b-tgyo0k6m5k] {
    background: var(--color-border);
}

.helpbar-result-category[b-tgyo0k6m5k] {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    line-height: 1.2;
}

.helpbar-result-title[b-tgyo0k6m5k] {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.35;
}

.helpbar-result-excerpt[b-tgyo0k6m5k] {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-muted);
    line-height: 1.4;
    /* Clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Article view ────────────────────────────────────────────────────────── */
.helpbar-article-title[b-tgyo0k6m5k] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
    line-height: 1.3;
}

.helpbar-article-body[b-tgyo0k6m5k] {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.65;
    /* Ensure rendered HTML doesn't break mobile layout */
    overflow-wrap: break-word;
    word-break: break-word;
}

.helpbar-article-body h1[b-tgyo0k6m5k],
.helpbar-article-body h2[b-tgyo0k6m5k],
.helpbar-article-body h3[b-tgyo0k6m5k] {
    font-weight: 700;
    margin: 1.25rem 0 0.5rem;
    color: var(--color-text);
}

.helpbar-article-body p[b-tgyo0k6m5k] {
    margin: 0 0 0.85rem;
}

.helpbar-article-body ul[b-tgyo0k6m5k],
.helpbar-article-body ol[b-tgyo0k6m5k] {
    margin: 0 0 0.85rem;
    padding-left: 1.4rem;
}

.helpbar-article-body a[b-tgyo0k6m5k] {
    color: var(--color-link);
}

.helpbar-article-body code[b-tgyo0k6m5k] {
    font-size: 0.85em;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 0.1em 0.3em;
}

/* Screenshots are authored at 1440-wide; the panel is only min(420px, 100vw).
   Constrain them to the panel width so they scale down instead of spilling off
   the right edge. Mirrors PublicSite's `.help-article__body img` rule in site.css.

   `::deep` is required: the article HTML is injected via MarkupString
   (@((MarkupString)_article.Html)), so the <img> never receives this component's
   CSS-isolation scope attribute. ::deep moves the scope onto the .helpbar-article-body
   ancestor and matches the un-scoped descendant img. */
.helpbar-article-body[b-tgyo0k6m5k]  img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0.85rem 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.helpbar-article-footer[b-tgyo0k6m5k] {
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.helpbar-external-link[b-tgyo0k6m5k] {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    /* Tap target */
    min-height: 44px;
    align-items: center;
}

.helpbar-external-link:hover[b-tgyo0k6m5k],
.helpbar-external-link:focus-visible[b-tgyo0k6m5k] {
    text-decoration: underline;
}

.helpbar-external-link:focus-visible[b-tgyo0k6m5k] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Narrow viewport (375px) — no horizontal overflow ───────────────────── */
@media (max-width: 479px) {
    .helpbar-panel[b-tgyo0k6m5k] {
        width: 100vw;
        /* On very small screens, fill the viewport and stay within bounds */
        left: 0;
        right: 0;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-b4pe1slek6] {
    display: flex;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
}

.sidebar[b-b4pe1slek6] {
    width: 260px;
    background: var(--color-sidebar-bg);
    color: #f1f5f9;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: flex-start;
}

.sidebar-header[b-b4pe1slek6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand[b-b4pe1slek6] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.brand-logo[b-b4pe1slek6] {
    display: block;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.sidebar-close[b-b4pe1slek6] {
    display: none;
    border: 0;
    background: transparent;
    color: #f1f5f9;
    font-size: 1.5rem;
    cursor: pointer;
}

.shell-main[b-b4pe1slek6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar[b-b4pe1slek6] {
    min-height: 64px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-card-bg);
    color: inherit;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.menu-toggle[b-b4pe1slek6] {
    display: none;
    border: 0;
    background: transparent;
    font-size: 1.4rem;
    cursor: pointer;
}

.topbar-title[b-b4pe1slek6] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-muted);
    /* Grow to fill the gap and ellipsis-truncate instead of pushing the auth
       controls off-screen on narrow viewports. min-width:0 lets it shrink
       below its content width so the text (not its siblings) is what clips. */
    min-width: 0;
    flex: 1 1 auto;
}

.topbar-title .material-icons[b-b4pe1slek6] {
    flex-shrink: 0;
}

.topbar-title-text[b-b4pe1slek6] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Nested flex item: needs min-width:0 so it can shrink below its content
       width and let the ellipsis engage (the parent .topbar-title is a flex
       container). */
    min-width: 0;
}

.topbar-auth[b-b4pe1slek6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.topbar-username[b-b4pe1slek6] {
    white-space: nowrap;
}

/* The logout icon only appears in the compact (mobile) sign-out button. */
.btn-signout-icon[b-b4pe1slek6] {
    display: none;
}

.content-area[b-b4pe1slek6] {
    padding: 1.5rem;
}

.sidebar-overlay[b-b4pe1slek6] {
    display: none;
}

[b-b4pe1slek6] .nav-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

[b-b4pe1slek6] .nav-item-settings {
    margin-top: auto;
}

[b-b4pe1slek6] .nav-item {
    color: #cbd5e1;
    text-decoration: none;
    padding: 0.65rem 0.75rem;
    border-radius: 0.45rem;
    font-weight: 500;
    display: flex;
    align-items: center;
}

[b-b4pe1slek6] .nav-item.active {
    background: #2a3644;
    color: #ffffff;
}

[b-b4pe1slek6] .nav-item:hover {
    background: #213040;
    color: #ffffff;
}

[b-b4pe1slek6] .nav-tabs .nav-item {
    padding: 0rem;
}

[b-b4pe1slek6] .nav-tabs .nav-item:hover {
    background: transparent;
}

@media (max-width: 900px) {

    .menu-toggle[b-b4pe1slek6],
    .sidebar-close[b-b4pe1slek6] {
        display: inline-flex;
    }

    .sidebar[b-b4pe1slek6] {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 20;
        transform: translateX(-100%);
        transition: transform 0.2s ease-in-out;
    }

    .sidebar.open[b-b4pe1slek6] {
        transform: translateX(0);
    }

    .sidebar-overlay.show[b-b4pe1slek6] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 10;
    }
}

/* Phones: declutter the topbar so the business name has room to breathe. */
@media (max-width: 640px) {
    .topbar[b-b4pe1slek6] {
        padding: 0 0.5rem;
        gap: 0.25rem;
    }

    /* The user's name is available on the account page; drop it here to
       free up horizontal space rather than crowding the actions. */
    .topbar-username[b-b4pe1slek6] {
        display: none;
    }

    /* Collapse "Sign out" to an icon-only button matching the help button's
       44px tap target. */
    .btn-signout[b-b4pe1slek6] {
        padding: 0;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-signout-icon[b-b4pe1slek6] {
        display: inline-flex;
    }

    .btn-signout-label[b-b4pe1slek6] {
        /* Visually hidden but kept for assistive tech alongside aria-label. */
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

.sidebar-footer[b-b4pe1slek6] {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.78rem;
    text-align: center;
    color: #94a3b8;
    flex-shrink: 0;
}

.sidebar-footer-links[b-b4pe1slek6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}

.sidebar-footer-links a[b-b4pe1slek6] {
    color: #cbd5e1;
    text-decoration: none;
}

.sidebar-footer-links a:hover[b-b4pe1slek6] {
    color: #ffffff;
    text-decoration: underline;
}

.sidebar-footer-copy[b-b4pe1slek6] {
    color: #64748b;
}

/* ── Help toggle button ── */
.btn-help-toggle[b-b4pe1slek6] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Tap target ≥44×44px (WKWebView-friendly) */
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-sm);
    padding: 0.25rem;
    transition: background 0.15s, color 0.15s;
}

.btn-help-toggle:hover[b-b4pe1slek6],
.btn-help-toggle:focus-visible[b-b4pe1slek6] {
    background: var(--color-border);
    color: var(--color-text);
}

.btn-help-toggle:focus-visible[b-b4pe1slek6] {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* ── Dark Mode ──────────────────────────────────────────────────────────────
   Keyed on the [data-bs-theme="dark"] attribute index.html writes to <html> (a stored
   "theme" choice wins, else the OS preference), NOT on @media (prefers-color-scheme: dark).
   The media query only saw the OS branch, so choosing dark on an OS-light machine left this
   shell fully light — a white topbar and light sidebar around app.css's dark body text. */
[data-bs-theme="dark"] .app-shell[b-b4pe1slek6] {
    background: var(--bs-secondary-bg) !important;
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .topbar[b-b4pe1slek6] {
    background: var(--bs-body-bg) !important;
    border-bottom-color: var(--bs-border-color) !important;
    border-style: none;
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .topbar-title[b-b4pe1slek6] {
    color: var(--color-muted);
}

[data-bs-theme="dark"] .menu-toggle[b-b4pe1slek6] {
    color: #f1f5f9;
}

[data-bs-theme="dark"] .btn-help-toggle[b-b4pe1slek6] {
    color: var(--color-muted);
}

[data-bs-theme="dark"] .btn-help-toggle:hover[b-b4pe1slek6],
[data-bs-theme="dark"] .btn-help-toggle:focus-visible[b-b4pe1slek6] {
    background: var(--bs-tertiary-bg);
    color: #f1f5f9;
}

[data-bs-theme="dark"] .sidebar[b-b4pe1slek6] {
    background: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .content-area[b-b4pe1slek6] {
    background: var(--bs-secondary-bg) !important;
    color: #f1f5f9;
}

[data-bs-theme="dark"] .sidebar-footer[b-b4pe1slek6] {
    border-top-color: var(--bs-border-color) !important;
    color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .sidebar-footer-links a[b-b4pe1slek6] {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .sidebar-footer-links a:hover[b-b4pe1slek6] {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .sidebar-footer-copy[b-b4pe1slek6] {
    color: var(--bs-secondary-color) !important;
}

/* /Layout/NavMenu.razor.rz.scp.css */
.nav-icon[b-ogmbjbspdl] {
    font-size: 1.15rem;
    margin-right: 0.5rem;
    opacity: 0.85;
    flex-shrink: 0;
}

.nav-item-sub[b-ogmbjbspdl] {
    padding-left: 1.5rem !important;
    font-size: 0.85rem;
}

.nav-item-sub .nav-icon[b-ogmbjbspdl] {
    font-size: 1rem;
}

/* Unread guest messages. Pushed to the trailing edge with auto margin so it sits flush right
   regardless of the label length. Uses the Bootstrap danger token rather than a literal so it
   tracks both themes. */
.nav-badge[b-ogmbjbspdl] {
    margin-left: auto;
    background-color: var(--bs-danger);
    color: #fff;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.2rem 0.45rem;
    min-width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}


/* ── Dark Mode ──────────────────────────────────────────────────────────────
   These two rules used to live in MainLayout.razor.css as `::deep .nav-item…` inside an
   @media (prefers-color-scheme: dark) block. They can't simply be re-keyed there: Blazor's
   scope rewriter attaches the scope attribute to the compound selector immediately BEFORE
   `::deep`, so `[data-bs-theme="dark"] ::deep .nav-item` compiles to
   `[data-bs-theme="dark"][b-…] .nav-item` — the scope lands on <html>, which never carries
   it, and the rule silently never matches. NavMenu owns this markup, so the rules belong
   here, where no `::deep` (and therefore no rewrite hazard) is involved. */
[data-bs-theme="dark"] .nav-item.active[b-ogmbjbspdl],
[data-bs-theme="dark"] .nav-item:hover[b-ogmbjbspdl] {
    background: var(--bs-tertiary-bg) !important;
    color: #ffffff;
}
/* /Pages/Admin/AiUsage.razor.rz.scp.css */
/* Reload dim for the two grids. Deliberately opacity-only — no `pointer-events: none`, so a row
   click during a reload still opens what it was showing. Mirrors BookingsList.razor's
   .list-grid-wrap.is-loading and Pricing.razor.css's .pricing-grid-wrap.is-loading. */
.ai-usage-grid-wrap.is-loading[b-s3ygn7ykto] {
    opacity: 0.55;
    transition: opacity 0.1s ease-in;
}

/* Tap targets ≥44px for the filter bar's own controls (Bootstrap's default form-select-sm /
   form-control-sm run a little short of that). Applied unconditionally, not just under a mobile
   media query — a taller control is harmless at desktop widths too, unlike the .rtable-meta
   flex rule that must stay mobile-scoped because it changes desktop <td> layout. */
.ai-usage-filter-bar select[b-s3ygn7ykto],
.ai-usage-filter-bar input[type='date'][b-s3ygn7ykto] {
    min-height: 44px;
}

.ai-usage-top-tenants li[b-s3ygn7ykto] {
    padding-block: 1px;
}

.ai-usage-pre[b-s3ygn7ykto] {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
    overflow: auto;
}

/* Simple ARIA tabs, matching the role="tab" pattern already used on Pricing.razor's
   pricing-mode-tabs — kept local rather than promoted to a shared component (single caller). */
.ai-usage-tabs[b-s3ygn7ykto] {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 1rem;
    overflow-x: auto;
}

.ai-usage-tab[b-s3ygn7ykto] {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.75rem;
    min-height: 44px;
    font-weight: 500;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.ai-usage-tab.active[b-s3ygn7ykto] {
    color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
}

.ai-usage-tab:focus-visible[b-s3ygn7ykto] {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

@media (max-width: 575.98px) {
    .ai-usage-summary-row[b-s3ygn7ykto] {
        row-gap: 0.75rem;
    }
}
/* /Pages/Admin/ScheduledTasks.razor.rz.scp.css */
.task-run-row-expandable:hover[b-0k4zzal9qw] {
    background-color: rgba(0, 0, 0, 0.04);
}

.task-run-toggle-btn[b-0k4zzal9qw] {
    background: transparent;
    border: 0;
    padding: 0.15rem 0.25rem;
    line-height: 1;
    color: inherit;
    cursor: pointer;
    border-radius: 0.25rem;
    min-width: 28px;
    min-height: 28px;
}

.task-run-toggle-btn:focus-visible[b-0k4zzal9qw] {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 1px;
}

/* The detail row is rendered inside the DataGrid child component, so it does not
   carry this component's scope attribute — reach it with ::deep. */
[b-0k4zzal9qw] .task-run-details-row > td {
    background-color: var(--bs-tertiary-bg, #f6f6f6);
    border-top: 0;
}

.task-run-chevron-col[b-0k4zzal9qw] {
    width: 24px;
}

.task-run-details[b-0k4zzal9qw] {
    padding: 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.task-run-detail-section[b-0k4zzal9qw] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.task-run-detail-label[b-0k4zzal9qw] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 600;
}

.task-run-error-type[b-0k4zzal9qw] {
    font-size: 0.85rem;
    padding: 0.15rem 0.4rem;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.25rem;
    align-self: flex-start;
}

.task-run-code[b-0k4zzal9qw] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.25rem;
    font-size: 0.8rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
    overflow: auto;
}

.task-run-stack[b-0k4zzal9qw] {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
}

[data-bs-theme="dark"] .task-run-row-expandable:hover[b-0k4zzal9qw] {
    background-color: rgba(255, 255, 255, 0.05);
}
/* /Pages/Admin/StockImages.razor.rz.scp.css */
/* Guarantee a tap target ≥44px for touch / WKWebView on every interactive control here. */
.stock-min-tap[b-s2dusinawq] {
    min-height: 44px;
}

.stock-card[b-s2dusinawq] {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color, #dee2e6);
}

.stock-card-img[b-s2dusinawq] {
    width: 100%;
    height: 140px;
    object-fit: cover;
    background-color: var(--bs-tertiary-bg, #f6f6f6);
}

.stock-tag-badge[b-s2dusinawq] {
    background-color: var(--bs-tertiary-bg, #f6f6f6);
    color: var(--bs-secondary-color, #6c757d);
    border: 1px solid var(--bs-border-color, #dee2e6);
    font-weight: 400;
    font-size: 0.7rem;
}

@media (max-width: 575.98px) {
    .stock-card-img[b-s2dusinawq] {
        height: 110px;
    }
}
/* /Pages/Bookings/BookingCalendarRow.razor.rz.scp.css */
.cal-row[b-5xgfx3ho9e] {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-card-bg);
}

.cal-prop-name[b-5xgfx3ho9e] {
    color: var(--color-text);
}

.cal-grid[b-5xgfx3ho9e] {
    position: relative;
    /* Height is set inline per row: a lane with overlapping pills grows so the stacked
       pills all fit (see PillGeometry.LaneHeightPx / Layout). This is the fallback. */
    height: 46px;
    overflow: hidden;
    background: var(--color-card-bg);
}

.cal-grid-bg[b-5xgfx3ho9e] {
    position: absolute;
    inset: 0;
    display: flex;
}

/* Day cells are real <button>s (keyboard-operable click-to-create), so the browser's
   button chrome has to be reset back to a bare grid cell. */
.cal-grid-cell[b-5xgfx3ho9e] {
    height: 100%;
    flex-shrink: 0;
    display: block;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-right: 1px solid var(--color-border);
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: transparent;
    transition: background-color .12s;
}

.cal-grid-cell:hover[b-5xgfx3ho9e] {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.cal-grid-cell:focus-visible[b-5xgfx3ho9e] {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    z-index: 6;
}

.cal-grid-cell.is-weekend[b-5xgfx3ho9e] {
    background: color-mix(in srgb, var(--color-bg) 50%, transparent);
}

.cal-grid-cell.is-weekend:hover[b-5xgfx3ho9e] {
    background: color-mix(in srgb, var(--color-primary) 10%, color-mix(in srgb, var(--color-bg) 50%, transparent));
}

.cal-grid-cell.is-today[b-5xgfx3ho9e] {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    box-shadow: inset 1px 0 0 color-mix(in srgb, var(--color-primary) 35%, transparent),
                inset -1px 0 0 color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.cal-grid-cell.is-today:hover[b-5xgfx3ho9e] {
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* Aggregate header row of a multi-room property, and the "Unassigned" lane: cells are
   inert (no create-booking click), so kill the pointer affordance and hover highlight. */
.cal-grid-cell-static[b-5xgfx3ho9e] {
    cursor: default;
}

.cal-grid-cell-static:hover[b-5xgfx3ho9e] {
    background: transparent;
}

.cal-grid-cell-static.is-weekend:hover[b-5xgfx3ho9e] {
    background: color-mix(in srgb, var(--color-bg) 50%, transparent);
}

/* Grey the whole aggregate header row so it's visibly a passive grouping label,
   not a bookable lane. The muted fill spans the sticky label cell and the date grid;
   the property name is dimmed and the bottom border softened so the room sub-rows
   below read as the active rows. Works in both themes via color-mix. */
.cal-group-row[b-5xgfx3ho9e] {
    background: color-mix(in srgb, var(--color-muted) 10%, var(--color-card-bg));
    border-bottom-color: color-mix(in srgb, var(--color-border) 60%, transparent);
}

.cal-group-row .cal-prop-cell[b-5xgfx3ho9e],
.cal-group-row .cal-grid[b-5xgfx3ho9e] {
    background: color-mix(in srgb, var(--color-muted) 10%, var(--color-card-bg));
}

.cal-group-row .cal-prop-name[b-5xgfx3ho9e] {
    color: var(--color-muted);
}

/* Phase 5b: room sub-rows are visually indented + slightly muted to make the
   property/room hierarchy obvious without redesigning the calendar. */
.cal-room-row .cal-prop-cell[b-5xgfx3ho9e] {
    background: color-mix(in srgb, var(--color-bg) 30%, var(--color-card-bg));
    padding-left: 18px;
}

.cal-room-indent[b-5xgfx3ho9e] {
    display: inline-block;
    width: 12px;
    margin-right: 4px;
    color: var(--color-muted);
    font-family: monospace;
    font-size: .75rem;
    line-height: 1;
}

.cal-room-name[b-5xgfx3ho9e] {
    color: var(--color-text);
}

/* The "Unassigned" lane: bookings we can't attribute to a room. Tinted with the warning
   colour so it reads as "needs attention", not as a normal bookable room. */
.cal-unassigned-row .cal-prop-cell[b-5xgfx3ho9e] {
    background: color-mix(in srgb, var(--color-warning) 12%, var(--color-card-bg));
}

.cal-lane-warn[b-5xgfx3ho9e] {
    font-size: .95rem;
    line-height: 1;
    margin-right: 3px;
    color: color-mix(in srgb, var(--color-warning) 80%, var(--color-text));
    flex-shrink: 0;
}

/* Visible conflict marker for a lane whose pills had to be stacked because they overlap. */
.cal-conflict-badge[b-5xgfx3ho9e] {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    margin-left: auto;
    flex-shrink: 0;
    font-size: .66rem;
    font-weight: 700;
    color: var(--color-danger);
}

.cal-conflict-badge .material-icons[b-5xgfx3ho9e] {
    font-size: .9rem;
    line-height: 1;
}

/* ── Pills ──
   Base look lives in BookingCalendar.razor's style block (shared with the legend);
   position/height are inline per pill. These are the state variants. */

/* Draft bookings are only distinguishable from confirmed ones by a dashed edge —
   status used to live exclusively in title="…", i.e. invisible on a phone. */
.cal-pill-draft[b-5xgfx3ho9e] {
    outline: 2px dashed color-mix(in srgb, var(--pill-accent) 65%, transparent);
    outline-offset: -2px;
}

/* Genuinely overlapping stays: stacked vertically AND outlined, so a double booking
   cannot be invisible. */
.cal-pill-conflict[b-5xgfx3ho9e] {
    outline: 2px solid var(--color-danger);
    outline-offset: -2px;
}

/* Stacked pills are short — drop the avatar and shrink the label to fit. */
.cal-pill-compact[b-5xgfx3ho9e] {
    gap: 3px;
    padding: 0 6px;
    border-radius: 10px;
}

.cal-pill-compact .cal-pill-name[b-5xgfx3ho9e] {
    font-size: .64rem;
}

/* Continuation cue for a stay clipped by the visible window: square off the clipped
   edge and show a chevron, instead of looking like a short stay that ends here. */
.cal-pill-clip-start[b-5xgfx3ho9e] {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.cal-pill-clip-end[b-5xgfx3ho9e] {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

/* Unread-guest-message corner dot. Absolutely positioned against .cal-pill (itself
   position:absolute, so it's a valid containing block) so it survives a compact/narrow
   pill without needing extra width — unlike text or an inline icon, which would get
   clipped by .cal-pill-name's overflow:hidden on a short stay. Purely decorative: the
   fact reaches assistive tech via PillAriaLabel, matching every other pill fact here.
   Positioned INSIDE the pill's box (not overlapping its edge) — .cal-pill itself sets
   overflow:hidden (BookingCalendar.razor), so a negative offset here would push most of
   the dot outside that clipped box and render it invisible (confirmed in production: the
   dot never showed on any pill despite the CSS/markup both actually deploying correctly). */
.cal-pill-unread[b-5xgfx3ho9e] {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-danger);
    box-shadow: 0 0 0 1.5px var(--color-card-bg);
    pointer-events: none;
}

.cal-pill-cont[b-5xgfx3ho9e] {
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    opacity: .85;
}

/* ── Date-block bars ──
   The reason is now visible in the bar (as well as in the accessible name), because a
   title tooltip is unreachable on touch. */
.cal-block-bar[b-5xgfx3ho9e] {
    display: flex;
    align-items: center;
    padding: 0 4px;
    overflow: hidden;
}

.cal-block-label[b-5xgfx3ho9e] {
    font-size: .62rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px 5px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-card-bg) 85%, transparent);
    color: var(--color-muted);
}
/* /Pages/Bookings/BookingDetailPanel.razor.rz.scp.css */
/* Align table cell text with card-header text (both at 1rem from card edge).
   Bootstrap table-sm uses hardcoded 0.25rem cell padding which can't be
   overridden via CSS variables — override the physical padding here. */
[b-5yb8lbt3sa] .card-body.p-0 table.table > :not(caption) > * > *:first-child {
    padding-left: 1rem;
}

[b-5yb8lbt3sa] .card-body.p-0 table.table > :not(caption) > * > *:last-child {
    padding-right: 1rem;
}
/* /Pages/Bookings/RecordPaymentDialog.razor.rz.scp.css */
/* Schedule rows are <button>s so they are keyboard-reachable and announce a pressed state, which
   means they arrive with the browser's button chrome and have to be dressed back down to look like
   the rows in the Billing card.

   Every colour here is a Bootstrap theme variable rather than a literal: app.css redefines the
   --bs-* palette under [data-bs-theme="dark"], so the row picks up both themes without a second
   rule set. Hover is decoration only — selection is a click/tap/Enter, never a hover, because this
   has to work under the WKWebView wrapper. */
.rp-schedule-row[b-zgohylpzim] {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color);
    min-height: 44px;
}

.rp-schedule-row:hover[b-zgohylpzim] {
    background-color: var(--bs-tertiary-bg);
}

.rp-schedule-row.is-selected[b-zgohylpzim] {
    background-color: var(--bs-tertiary-bg);
    /* Inset ring rather than a thicker border: a border-width change would reflow the row and
       nudge every row below it on selection. */
    border-color: var(--bs-primary) !important;
    box-shadow: inset 0 0 0 1px var(--bs-primary);
}

.rp-schedule-row:focus-visible[b-zgohylpzim] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}
/* /Pages/Pricing.razor.rz.scp.css */
/* ── Date-window nav (button group inside grid toolbar) ── */
.date-nav .btn[b-k4w1fumgum] {
    border-color: var(--color-border);
    background: var(--color-card-bg);
    color: var(--color-text);
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    min-height: 36px;
    font-weight: 500;
}

.date-nav .btn:hover:not(:disabled)[b-k4w1fumgum] {
    background: color-mix(in srgb, var(--color-bg) 70%, var(--color-card-bg));
    color: var(--color-text);
    border-color: var(--color-border);
}

.date-nav .btn:focus-visible[b-k4w1fumgum] {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    z-index: 2;
}

.date-nav .material-icons[b-k4w1fumgum] {
    font-size: 1.1rem;
    line-height: 1;
}

.date-nav-today[b-k4w1fumgum] {
    font-weight: 600;
    min-width: 64px;
}

/* ── Page stack ── */
.pricing-stack[b-k4w1fumgum] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 1280px;
}

/* ── Section card ── */
.pricing-section[b-k4w1fumgum] {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    color: var(--color-text);
}

.pricing-section-header[b-k4w1fumgum] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: var(--color-bg);
    border: none;
    border-bottom: 1px solid transparent;
    text-align: left;
    cursor: pointer;
    color: var(--color-text);
    font-family: inherit;
    min-height: 44px;
}

.pricing-section-header:hover[b-k4w1fumgum] {
    background: color-mix(in srgb, var(--color-bg) 70%, var(--color-card-bg));
}

.pricing-section-header:focus-visible[b-k4w1fumgum] {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.section-chevron[b-k4w1fumgum] {
    transition: transform 0.15s ease;
    color: var(--color-muted);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.section-chevron.open[b-k4w1fumgum] {
    transform: rotate(90deg);
    color: var(--color-primary);
}

.pricing-section-title[b-k4w1fumgum] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
}

.pricing-section-meta[b-k4w1fumgum] {
    color: var(--color-muted);
    font-size: var(--font-size-xs);
    margin-left: auto;
    text-align: right;
}

@media (max-width: 575.98px) {
    .pricing-section-meta[b-k4w1fumgum] {
        display: none;
    }
}

.pricing-section-body[b-k4w1fumgum] {
    padding: 1rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text);
}

/* The grid section uses a tighter padding for its toolbar */
.pricing-section-grid .pricing-grid-toolbar[b-k4w1fumgum] {
    border-top: none;
}

/* ── Mode tabs (Set / Adjust % / Clear) ── */
.pricing-mode-tabs[b-k4w1fumgum] {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.pricing-mode-tab[b-k4w1fumgum] {
    appearance: none;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-muted);
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: var(--font-size-sm);
    font-family: inherit;
    cursor: pointer;
    min-height: 36px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.pricing-mode-tab:hover[b-k4w1fumgum] {
    color: var(--color-text);
    border-color: var(--color-border-input);
}

.pricing-mode-tab:focus-visible[b-k4w1fumgum] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.pricing-mode-tab.active[b-k4w1fumgum] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

/* ── Form labels inside sections ── */
.pricing-section-body[b-k4w1fumgum]  .form-label {
    margin-bottom: 0.25rem;
    font-size: var(--font-size-xs);
    color: var(--color-muted);
    font-weight: 500;
}

/* ── Form hints ── */
.pricing-section-body[b-k4w1fumgum]  .form-hint,
.pricing-section-body .form-hint[b-k4w1fumgum] {
    color: var(--color-muted);
    font-size: var(--font-size-xs);
}

/* ── Day-of-week toggle group ── */
.day-toggle-group[b-k4w1fumgum] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.day-toggle[b-k4w1fumgum] {
    appearance: none;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-muted);
    font-family: inherit;
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 0.3rem 0.55rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    min-width: 36px;
    min-height: 32px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.day-toggle:hover[b-k4w1fumgum] {
    border-color: var(--color-border-input);
    color: var(--color-text);
}

.day-toggle.active[b-k4w1fumgum] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.day-toggle:focus-visible[b-k4w1fumgum] {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* ── Rule form card ── */
.rule-form-card[b-k4w1fumgum] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    background: var(--color-bg);
    color: var(--color-text);
}

.rule-form-card-title[b-k4w1fumgum] {
    font-weight: 600;
    font-size: var(--font-size-sm);
    margin-bottom: 0.6rem;
    color: var(--color-text);
}

.property-checks[b-k4w1fumgum] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.property-check[b-k4w1fumgum] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    user-select: none;
}

.property-check input[type="checkbox"][b-k4w1fumgum] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* ── Rule selection bar ── */
.rule-selection-bar[b-k4w1fumgum] {
    background: color-mix(in srgb, var(--color-warning-bg) 60%, var(--color-card-bg));
    border: 1px solid color-mix(in srgb, var(--color-warning) 30%, var(--color-border));
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    color: var(--color-text);
}

/* ── Per-property rule block ── */
.rule-property-block[b-k4w1fumgum] {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text);
}

.rule-property-block:first-of-type[b-k4w1fumgum] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.rule-property-header[b-k4w1fumgum] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
    color: var(--color-text);
}

.rule-property-header > span[b-k4w1fumgum] {
    color: var(--color-text);
}

/* ── Rules table ── */
.rules-table[b-k4w1fumgum] {
    --bs-table-bg: transparent;
    margin-top: 0.5rem;
}

.rules-table thead th[b-k4w1fumgum] {
    background: var(--color-bg) !important;
    color: var(--color-muted) !important;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 600;
    border-bottom: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
    white-space: nowrap;
}

.rules-table tbody td[b-k4w1fumgum] {
    vertical-align: middle;
    border-color: var(--color-border);
    font-size: var(--font-size-sm);
}

.rules-table .rules-col-check[b-k4w1fumgum] {
    width: 32px;
}

.rules-table .rules-col-actions[b-k4w1fumgum] {
    width: 90px;
}

.rule-row-selected[b-k4w1fumgum] {
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-card-bg)) !important;
}

/* ── Status pills ── */
.status-pill[b-k4w1fumgum] {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.4;
}

.status-pill-active[b-k4w1fumgum] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.status-pill-inactive[b-k4w1fumgum] {
    background: color-mix(in srgb, var(--color-muted) 18%, var(--color-card-bg));
    color: var(--color-muted);
}

/* ── Icon-only buttons ── */
.icon-btn[b-k4w1fumgum] {
    padding: 0.3rem 0.45rem;
    min-height: 32px;
    min-width: 32px;
    line-height: 1;
}

.icon-btn[b-k4w1fumgum]  .material-icons,
.icon-btn .material-icons[b-k4w1fumgum] {
    font-size: 1rem;
}

.icon-btn-danger[b-k4w1fumgum] {
    color: var(--color-danger);
}

.icon-btn-danger:hover:not(:disabled)[b-k4w1fumgum] {
    background: color-mix(in srgb, var(--color-danger) 12%, transparent);
    border-color: var(--color-danger);
    color: var(--color-danger-hover);
}

/* ── Pricing grid toolbar ── */
.pricing-grid-toolbar[b-k4w1fumgum] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.pricing-grid-title-block[b-k4w1fumgum] {
    min-width: 0;
    flex: 1 1 auto;
}

.pricing-grid-controls[b-k4w1fumgum] {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.min-nights-toggle[b-k4w1fumgum] {
    white-space: nowrap;
}

.min-nights-toggle .form-check-label[b-k4w1fumgum] {
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.pricing-grid-title[b-k4w1fumgum] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
}

.pricing-grid-meta[b-k4w1fumgum] {
    color: var(--color-muted);
    font-size: var(--font-size-xs);
    margin-top: 0.15rem;
}

.pricing-grid-range[b-k4w1fumgum] {
    font-weight: 600;
    color: var(--color-subtle);
}

.pricing-grid-status[b-k4w1fumgum] {
    color: var(--color-muted);
    font-size: var(--font-size-xs);
    font-weight: 500;
    white-space: nowrap;
}

.pricing-grid-status.dirty[b-k4w1fumgum] {
    color: var(--color-warning);
    background: var(--color-warning-bg);
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm);
}

/* Grid sits flush — table is explicitly sized to (stickyW + days * cellW) so
   it fits the host width on every breakpoint. overflow:hidden as a safety net
   for the rare rounding overflow. */
.pricing-grid-wrap[b-k4w1fumgum] {
    overflow: hidden;
}

/* While a date-window slide is loading we keep the grid mounted (so the page
   height stays stable and the scroll position is preserved) and just dim it
   in place. The nav buttons are separately disabled, so pointer-events:none
   here only blocks stray clicks on the stale cells mid-refresh. */
.pricing-grid-wrap.is-loading[b-k4w1fumgum] {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.1s ease-in;
}

/* ── Pricing grid table ── */
.pricing-grid[b-k4w1fumgum] {
    --bs-table-bg: transparent;
    margin-bottom: 0;
    /* Without this, table-layout defaults to "auto" and the browser sizes each
       column to fit its widest cell content (the .form-control price/min-nights
       inputs are wider than a compact 50px day column) — completely overriding
       the inline width/min-width the C# resize handler computes to make the
       table fit the container. "fixed" makes the browser honour those widths
       exactly and let cell content wrap/shrink instead, which is what the JS
       sizing math in OnGridHostResized assumes. */
    table-layout: fixed;
}

.pricing-grid thead th[b-k4w1fumgum] {
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
    font-weight: 600;
    padding: 0.5rem 0.5rem;
    border-bottom: 1px solid var(--color-border) !important;
    border-top: none !important;
}

.pricing-grid tbody td[b-k4w1fumgum] {
    border-color: var(--color-border);
    padding: 0.35rem 0.4rem;
    vertical-align: middle;
    background: var(--color-card-bg);
}

.pricing-grid .grid-day[b-k4w1fumgum] {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
}

.pricing-grid .grid-date[b-k4w1fumgum] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
}

.sticky-col[b-k4w1fumgum] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--color-card-bg) !important;
    border-right: 1px solid var(--color-border);
    /* width / min-width set inline from _stickyColWidth */
}

.pricing-grid thead th.sticky-col[b-k4w1fumgum] {
    z-index: 2;
}

/* Property cell with defaults */
.property-cell[b-k4w1fumgum] {
    padding: 0.25rem 0;
}

.property-defaults[b-k4w1fumgum] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.defaults-edit[b-k4w1fumgum] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.defaults-input[b-k4w1fumgum] {
    width: 80px;
}

.fill-empty-btn[b-k4w1fumgum] {
    font-size: var(--font-size-xs);
    padding: 0.2rem 0.55rem;
    min-height: 28px;
}

@media (max-width: 767.98px) {
    .fill-empty-btn[b-k4w1fumgum] {
        display: none;
    }
}

/* Weekend / today / pending / blocked / rule */
.pricing-grid th.is-weekend[b-k4w1fumgum] {
    background: color-mix(in srgb, var(--color-bg) 80%, var(--color-card-bg)) !important;
}

.pricing-grid td.is-weekend[b-k4w1fumgum] {
    background: color-mix(in srgb, var(--color-bg) 45%, var(--color-card-bg)) !important;
}

.pricing-grid th.is-today[b-k4w1fumgum] {
    background: color-mix(in srgb, var(--color-primary) 14%, var(--color-card-bg)) !important;
    color: var(--color-primary) !important;
    box-shadow: inset 0 -2px 0 var(--color-primary);
}

.pricing-grid th.is-today .grid-day[b-k4w1fumgum],
.pricing-grid th.is-today .grid-date[b-k4w1fumgum] {
    color: var(--color-primary);
}

.pricing-grid td.is-today[b-k4w1fumgum] {
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-card-bg)) !important;
}

.pricing-grid td.is-pending[b-k4w1fumgum] {
    background: var(--color-warning-bg) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-warning) 35%, transparent);
}

.pricing-grid td.is-blocked[b-k4w1fumgum] {
    background:
        repeating-linear-gradient(45deg,
            color-mix(in srgb, var(--color-muted) 20%, transparent),
            color-mix(in srgb, var(--color-muted) 20%, transparent) 4px,
            transparent 4px,
            transparent 8px),
        var(--color-card-bg) !important;
}

.pricing-grid td.is-blocked input[b-k4w1fumgum] {
    background: transparent;
    color: var(--color-muted);
    cursor: not-allowed;
}

.pricing-grid td.is-rule-active[b-k4w1fumgum] {
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-card-bg)) !important;
}

.pricing-grid td.is-rule-active.is-weekend[b-k4w1fumgum] {
    background: color-mix(in srgb, var(--color-primary) 8%, color-mix(in srgb, var(--color-bg) 45%, var(--color-card-bg))) !important;
}

.pricing-td[b-k4w1fumgum] {
    position: relative;
}

.cell-wrap[b-k4w1fumgum] {
    position: relative;
    width: 100%;
}

.pricing-cell[b-k4w1fumgum] {
    width: 100%;
    text-align: end;
    background: color-mix(in srgb, var(--color-card-bg) 70%, var(--color-bg));
    border: 1px solid transparent;
}

.pricing-cell:hover[b-k4w1fumgum],
.pricing-cell:focus[b-k4w1fumgum] {
    border-color: var(--color-primary);
    background: var(--color-card-bg);
}

.rule-badge[b-k4w1fumgum] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    line-height: 1.2;
    margin-bottom: 2px;
    letter-spacing: 0.02em;
}

.cell-clear-btn[b-k4w1fumgum] {
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-danger);
    width: 18px;
    height: 18px;
    line-height: 1;
    padding: 0;
    font-size: 0.85rem;
    cursor: pointer;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
}

.cell-clear-btn:hover[b-k4w1fumgum],
.cell-clear-btn:focus-visible[b-k4w1fumgum] {
    background: var(--color-danger);
    color: #fff;
    border-color: var(--color-danger);
    outline: none;
}

.pricing-td:hover .cell-clear-btn[b-k4w1fumgum],
.pricing-td:focus-within .cell-clear-btn[b-k4w1fumgum] {
    display: flex;
}

/* Touch devices: always show the clear button */
@media (hover: none) {
    .cell-clear-btn[b-k4w1fumgum] {
        display: flex;
    }
}

/* ── Legend ── */
.pricing-grid-legend[b-k4w1fumgum] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.25rem;
    padding: 0.65rem 1rem;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    color: var(--color-muted);
}

.legend-item[b-k4w1fumgum] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.legend-swatch[b-k4w1fumgum] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.legend-pending[b-k4w1fumgum] {
    background: var(--color-warning-bg);
    border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
}

.legend-weekend[b-k4w1fumgum] {
    background: color-mix(in srgb, var(--color-bg) 45%, var(--color-card-bg));
}

.legend-rule[b-k4w1fumgum] {
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-card-bg));
    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}

/* ── Mobile (<= 576px) ── */
@media (max-width: 575.98px) {
    .pricing-section-header[b-k4w1fumgum] {
        padding: 0.75rem 0.85rem;
    }

    .pricing-section-body[b-k4w1fumgum] {
        padding: 0.85rem;
    }

    .pricing-grid-toolbar[b-k4w1fumgum] {
        padding: 0.75rem 0.85rem;
    }

    .sticky-col[b-k4w1fumgum] {
        min-width: 150px;
    }

    .pricing-cell[b-k4w1fumgum] {
        min-width: 64px;
        max-width: 80px;
    }

    .pricing-grid-legend[b-k4w1fumgum] {
        gap: 0.5rem 1rem;
        padding: 0.6rem 0.85rem;
    }
}

/* ── Phase 5e: multi-room property treatment ─────────────────────────────
   The pricing grid is per-Room. For multi-room properties we inject a
   spanning group-header row above the room rows so the visual hierarchy
   reads property > room. Single-room properties keep the pre-Phase-5e
   look — no group header, no indent. */

.pricing-grid-group-header td[b-k4w1fumgum] {
    background: color-mix(in srgb, var(--color-bg) 70%, var(--color-card-bg)) !important;
    padding: 0.45rem 0.85rem;
    border-top: 2px solid var(--color-border);
}

.property-group-label[b-k4w1fumgum] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-text);
}

.pricing-grid .sticky-col.is-nested[b-k4w1fumgum] {
    padding-left: 1.5rem;
    background: color-mix(in srgb, var(--color-card-bg) 92%, var(--color-bg)) !important;
}

@media (max-width: 767.98px) {
    .pricing-grid .sticky-col.is-nested[b-k4w1fumgum] {
        padding-left: 1rem;
    }
}

/* ── Phase 5f-1: multi-rate-plan treatment ─────────────────────────────────
   When a Room has 2+ active rate plans, the room row itself becomes a small
   header and each plan gets its own sub-row below with rate cells. Keeps the
   visual hierarchy readable on 375px without piling on too many indent
   levels — the plan name uses a "↳↳" prefix instead of additional padding. */

.pricing-grid-room-header td[b-k4w1fumgum] {
    background: color-mix(in srgb, var(--color-bg) 85%, var(--color-card-bg)) !important;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.pricing-grid-room-header-spacer[b-k4w1fumgum] {
    border-left: none !important;
}

.pricing-grid .sticky-col.is-plan-nested[b-k4w1fumgum] {
    /* Already indented by .is-nested; the ↳↳ glyph carries the second level
       so we don't pile on more padding (375px-friendly). */
    background: color-mix(in srgb, var(--color-card-bg) 88%, var(--color-bg)) !important;
}

/* Per-date room-level min-nights sub-row, rendered immediately after each room's
   price row(s). Tinted slightly so the eye can group "this room's rates + min-nights"
   visually without an extra header. Works in light + dark via CSS custom properties. */
.pricing-grid .pricing-grid-minnights-row td[b-k4w1fumgum] {
    background: color-mix(in srgb, var(--color-card-bg) 92%, var(--color-fg)) !important;
}

.pricing-grid .pricing-grid-minnights-row .sticky-col[b-k4w1fumgum] {
    background: color-mix(in srgb, var(--color-card-bg) 88%, var(--color-fg)) !important;
}

.pricing-grid .pricing-grid-minnights-row .pricing-td.is-weekend[b-k4w1fumgum] {
    background: color-mix(in srgb, var(--color-card-bg) 88%, var(--color-accent)) !important;
}

/* Rules panel: same nested treatment for per-room rule blocks under a
   multi-room property header. */
.rule-property-header-only[b-k4w1fumgum] {
    margin-bottom: 0;
    padding-bottom: 0;
}

.rule-property-header-group[b-k4w1fumgum] {
    border-bottom: 1px dashed var(--color-border);
    padding-bottom: 0.55rem;
}

.rule-room-block-nested[b-k4w1fumgum] {
    margin-left: 1rem;
    padding-left: 0.65rem;
    border-left: 2px solid var(--color-border);
    border-top: none;
    margin-top: 0.6rem;
    padding-top: 0.45rem;
}

@media (max-width: 767.98px) {
    .rule-room-block-nested[b-k4w1fumgum] {
        margin-left: 0.4rem;
        padding-left: 0.5rem;
    }
}

/* Phase 1 Task 6: sub-header row separating rules by rate plan inside a multi-plan
   room's rule block. Hidden entirely for single-plan rooms (the element is never
   rendered). Works in light + dark via CSS custom properties. */
.rule-plan-subheader[b-k4w1fumgum] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0 0.25rem;
    margin-top: 0.5rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-subtle, var(--color-muted));
    border-top: 1px dashed var(--color-border);
}

.rule-plan-subheader:first-of-type[b-k4w1fumgum] {
    margin-top: 0;
    border-top: none;
}

/* /Pages/Settings/PaymentScheduleSettings.razor.rz.scp.css */
/* This status badge holds a full sentence (deposit % + balance timing), not a
   short fixed label — Bootstrap's .badge defaults to white-space:nowrap, which
   runs the text off the edge of a narrow viewport instead of wrapping. */
.schedule-status-badge[b-3ygb3yaptp] {
    white-space: normal;
    text-align: left;
}
/* /Pages/Settings/ScheduledMessagesSettings.razor.rz.scp.css */
/* The Name column's primary line can now hold up to three inline elements —
   the template name plus both the "Default" and (new, task B8) "Owner"
   badges. At desktop widths the DataGrid's table-layout:fixed Name column is
   narrow enough that the shared .rtable-primary-line flex row (no
   flex-shrink protection) squeezes all three, and app.css's global
   ".table td .badge { white-space: normal; overflow-wrap: anywhere }" rule
   (there to let genuinely long single-token badges wrap instead of overflow)
   then wraps the squeezed badges character-by-character ("Def/ault").
   Keep the badges at their natural size and let the row wrap onto a second
   line instead — the name text is left free to shrink/wrap as before. */
.rtable-primary-line[b-us7dbj1e8v] {
    flex-wrap: wrap;
}

.rtable-primary-line .badge[b-us7dbj1e8v] {
    flex-shrink: 0;
    white-space: nowrap;
}
/* /Pages/Website/WebsiteAssistantPanel.razor.rz.scp.css */
/* Small pill summarising one change the assistant made this turn.
   Token-based so it inverts cleanly under [data-bs-theme="dark"]. */
.assistant-chip[b-tljpsmcoiy] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.55rem;
    font-size: 0.75rem;
    line-height: 1.2;
    border-radius: 999px;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    border: 1px solid var(--bs-border-color);
}

/* Guarantee a tap target ≥44px for touch / WKWebView, even on the small buttons. */
.assistant-min-tap[b-tljpsmcoiy] {
    min-height: 44px;
}

.assistant-icon-btn[b-tljpsmcoiy] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Web-access header toggle (inspiration). min-height gives the label + switch + text a ≥44px tall
   tap area even though the switch control itself renders smaller; the label's `for` wiring means
   tapping anywhere in the row (switch or "Web" text) toggles it. */
.assistant-toggle-wrap[b-tljpsmcoiy] {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-right: 0.25rem;
    cursor: pointer;
}

.assistant-toggle-wrap .form-check-label[b-tljpsmcoiy] {
    cursor: pointer;
}
/* /Shared/BulkUploadQueue.razor.rz.scp.css */
.bulk-queue[b-bfbtgi1lly] {
    overflow: hidden;
}

.bulk-queue-icon[b-bfbtgi1lly] {
    font-size: 1.25rem;
    width: 1.5rem;
    text-align: center;
}

.bulk-queue-row .btn-link[b-bfbtgi1lly] {
    padding: 0;
    font-size: 0.85rem;
}
/* /Shared/ConfirmDialog.razor.rz.scp.css */
/* Confirm dialog — themed via app.css design tokens on .modal-content.
   Mobile-first: works at 375px (Bootstrap's modal-dialog already has side margins);
   tap targets are ≥44px and the action buttons stay easy to hit on small screens.

   Scope note: the modal shell (.modal / .modal-header / .modal-body / .modal-footer /
   .btn-close) is now rendered by TechWork.Components' Dialog, so those elements do NOT
   carry this file's b-* isolation attribute and cannot be targeted from here. Only markup
   authored in ConfirmDialog.razor does — which, verified in the generated component code,
   includes everything inside the <Body>/<Footer> render fragments. Every selector below
   therefore ends on .confirm-dialog-btn, one of those footer buttons.
   The former ".confirm-dialog .btn-close:focus-visible" rule was dropped for that reason
   (Bootstrap's own .btn-close:focus box-shadow still provides the focus cue), as was the
   ".confirm-dialog .modal-footer { flex-wrap: wrap }" rule — unreachable now, and already
   redundant with Bootstrap's own .modal-footer { flex-wrap: wrap }. */

.confirm-dialog-btn[b-8ncoosa3kj] {
    min-height: 44px;
    min-width: 88px;
}

/* Visible keyboard focus in both themes (don't rely on hover). */
.confirm-dialog .confirm-dialog-btn:focus-visible[b-8ncoosa3kj] {
    outline: 2px solid var(--color-primary, #0d6efd);
    outline-offset: 2px;
}

/* On the narrowest viewports let the buttons fill the row so they're easy to tap
   (Bootstrap's .modal-footer already wraps). */
@media (max-width: 400px) {
    .confirm-dialog-btn[b-8ncoosa3kj] {
        flex: 1 1 auto;
    }
}
/* /Shared/DropZone.razor.rz.scp.css */
.drop-zone[b-lucfjvz87b] {
    position: relative;
    display: block;
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    padding: 1.5rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
    background-color: var(--bs-tertiary-bg, transparent);
}

.drop-zone:hover[b-lucfjvz87b],
.drop-zone:focus-within[b-lucfjvz87b] {
    border-color: var(--bs-primary);
    background-color: var(--bs-secondary-bg, var(--bs-tertiary-bg));
}

.drop-zone.drag-over[b-lucfjvz87b] {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle, rgba(13, 110, 253, 0.08));
}

.drop-zone-inner[b-lucfjvz87b] {
    pointer-events: none; /* clicks pass through to the input */
}

.drop-zone-icon[b-lucfjvz87b] {
    font-size: 2rem;
    color: var(--bs-secondary-color);
    display: block;
    margin-bottom: 0.25rem;
}

.drop-zone-prompt[b-lucfjvz87b] {
    font-weight: 600;
}

.drop-zone-hint[b-lucfjvz87b] {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    margin-top: 0.25rem;
}

/* Spread the file input over the whole zone so click anywhere opens the picker. */
.drop-zone-input[b-lucfjvz87b] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}