/* /Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-page[b-egowenryml] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--spacing-md);
}

.auth-page[b-egowenryml]  .language-switcher .form-select {
    background-color: var(--color-primary);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.auth-page[b-egowenryml]  .language-switcher .form-select:focus {
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.15);
}

.auth-page[b-egowenryml]  .language-switcher .form-select option {
    background-color: var(--color-primary);
    color: #fff;
}

/*
   `.auth-container` + `.auth-card` were previously duplicated into each
   page's *.razor.css (Login, Register, etc.). Phase 2 S8 deleted the
   Login/Register pages but the AccountPending + AccessDenied pages still
   reference these class names. Without a layout-level definition, the
   markup renders as plain divs and the heading/body text inherit
   `--color-text` (dark navy), which is invisible against this layout's
   navy-gradient backdrop. Defining the classes here once (via `::deep`)
   covers every Blazor page that uses AuthLayout.
*/
.auth-page[b-egowenryml]  .auth-container {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

.auth-page[b-egowenryml]  .auth-card {
    background: var(--color-background);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem 2rem;
}

.auth-page[b-egowenryml]  .auth-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.auth-page[b-egowenryml]  .auth-header h1 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
}

.auth-page[b-egowenryml]  .auth-subtitle {
    color: var(--color-text-muted);
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .auth-page[b-egowenryml]  .auth-card {
        padding: var(--spacing-lg);
    }
}

/*
   Dark mode: match the approved /roadmap dark treatment instead of the
   navy-gradient backdrop. In dark mode `--color-primary` lifts to a light
   blue (#5BA0E8), so the light-mode gradient would render as a bright-blue
   backdrop — backwards from the rest of the dark UI. Roadmap uses a flat
   `--color-background` page with `--color-surface` cards; mirror that here
   so the AccountPending + AccessDenied pages sit on the same dark canvas.
   Light mode is unaffected (approved).
*/
[data-theme="dark"] .auth-page[b-egowenryml] {
    background: var(--color-background);
}

[data-theme="dark"] .auth-page[b-egowenryml]  .auth-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
}

/* The light-mode switcher is styled white-on-primary for the navy gradient.
   On the dark flat canvas that becomes a bright light-blue pill — let the
   global dark .form-select chrome (bootstrap-dark.css) take over instead. */
[data-theme="dark"] .auth-page[b-egowenryml]  .language-switcher .form-select {
    background-color: var(--color-surface-alt);
    color: var(--color-text);
    border-color: var(--color-border);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239AA5B5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

[data-theme="dark"] .auth-page[b-egowenryml]  .language-switcher .form-select option {
    background-color: var(--color-surface-alt);
    color: var(--color-text);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* App shell — ds-v1.1.0 fixed-sidebar grid pattern (spec:
   docs/design-system/archive/ds-v1.1.0-update.md §3). Neither body nor html
   scrolls; sidebar and main scroll INDEPENDENTLY. 100dvh (not 100vh)
   survives iOS Safari's chrome appearing / disappearing.
   Both layout boundaries sit on --bp-md (900px): the grid applies ≥900px and
   the MobileNavDrawer + BottomNav chrome applies below — no 768–900 dead zone. */
.page[b-ofo5ssal9t] {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    height: 100vh;  /* fallback for browsers without dvh */
    height: 100dvh;
    overflow: hidden;
}

.sidebar[b-ofo5ssal9t] {
    height: 100vh;  /* fallback for browsers without dvh */
    height: 100dvh;
    background: var(--sidebar-bg);   /* fills full viewport height, always */
    color: var(--sidebar-text);
    overflow-y: auto;
    overscroll-behavior: contain;    /* scroll stays inside sidebar */
}

/* Scrollbar fully hidden — no thumb, no track, no line (founder decision
   2026-08-13; the brief's sidebar-nav exception to the "clearly visible scroll
   affordance" rule already covers this surface). In practice this element never
   overflows: its children are NavMenu's 3.5rem .top-row brand row plus
   .nav-scrollable at calc(100dvh - 3.5rem), which sums to exactly the 100dvh
   height above. The overflow-y: auto and these rules are kept as a safety net so
   that if that height arithmetic ever breaks the sidebar SCROLLS rather than
   silently clipping (§6.3 forbids silent clipping) — and does so without showing
   a scrollbar. The real desktop scroller is .nav-scrollable in NavMenu.razor.css,
   which already hides its own scrollbar; its bottom-fade cue arrives separately
   via claude/nav-scrollbars-and-visual-gate. */
.sidebar[b-ofo5ssal9t] { scrollbar-width: none; }
.sidebar[b-ofo5ssal9t]::-webkit-scrollbar { display: none; }

main[b-ofo5ssal9t] {
    min-width: 0;
    height: 100vh;  /* fallback for browsers without dvh */
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--color-background);
}

/* Inner-app content width cap. Per the brief §4.2: on screens wider than
   var(--container-app) (1600px), the extra space is gutter, never stretched
   chrome. Only the content article caps — the topbar stays full-width so
   its background extends to the viewport edge and right-edge actions sit
   at the visible right edge (Stripe Dashboard pattern). */
main > article[b-ofo5ssal9t] {
    max-width: var(--container-app);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Horizontal padding lives here (not Bootstrap px-* utilities, whose
   !important would force !important here too — audit 3.5). */
.top-row[b-ofo5ssal9t], article[b-ofo5ssal9t] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* The toggle + sign-out pair. Its own flex row so the two stay adjacent at every width,
   and so the space-between rule below --bp-md splits the row between the language switcher
   and this group rather than between all three controls. */
.top-row-actions[b-ofo5ssal9t] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-left: auto;
}

.top-row[b-ofo5ssal9t] {
    background-color: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-ofo5ssal9t]  a, .top-row[b-ofo5ssal9t]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
        /* -dark, not -secondary: this is TEXT on --topbar-bg (= --color-surface-alt), where
           plain --color-secondary measures 2.97:1 — below the 4.5:1 AA threshold. */
        color: var(--color-secondary-dark);
        transition: color var(--transition-fast);
    }

    .top-row[b-ofo5ssal9t]  a:hover, .top-row[b-ofo5ssal9t]  .btn-link:hover {
        text-decoration: underline;
        color: var(--color-primary);
    }

    .top-row[b-ofo5ssal9t]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Sign-out button, identical in AL.Web and Invoicing.Web MainLayout.razor.css. Light theme
   swaps Bootstrap's solid grey hover/press fill for a pale tint with dark text, which suits
   the light topbar. The tint is --color-border, not --color-surface-alt: the topbar already
   IS --color-surface-alt, so that fill would not show. Dark theme keeps Bootstrap's hover. */
html:not([data-theme="dark"]) .btn-signout[b-ofo5ssal9t] {
    --bs-btn-hover-bg: var(--color-border);
    --bs-btn-hover-color: var(--color-text);
    --bs-btn-active-bg: var(--color-border);
    --bs-btn-active-color: var(--color-text);
}

/* Phones + small tablets (< --bp-md = 900px): grid collapses to a single
   column; sidebar is replaced by MobileNavDrawer + BottomNav (already
   wired — both switch at 900px too). The document scrolls normally again.
   Reserve bottom padding on <main> so the fixed BottomNav doesn't cover
   the last row of content. */
@media (max-width: 899.98px) {
    .page[b-ofo5ssal9t] {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }

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

    main[b-ofo5ssal9t] {
        height: auto;
        overflow: visible;
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0));
    }

    .top-row[b-ofo5ssal9t] {
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.25rem 0.75rem;
        height: auto;
        min-height: 3.5rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .top-row[b-ofo5ssal9t]  a, .top-row[b-ofo5ssal9t]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 900px) {  /* --bp-md */
    /* Sticky within <main>'s scrollport (main is the scroller under the
       grid shell) — preserves the shipped always-visible topbar. */
    .top-row[b-ofo5ssal9t] {
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .top-row.auth[b-ofo5ssal9t]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-ofo5ssal9t], article[b-ofo5ssal9t] {
        padding-left: 2rem;
        padding-right: 1.5rem;
    }
}

/* Ultrawide (≥1600px / --bp-xl): only reserve room for the ContextPanel when
   a page has actually rendered one. Uses :has() (modern browsers ≥2023). */
@media (min-width: 1600px) {
    main:has(.context-panel)[b-ofo5ssal9t] {
        padding-right: calc(320px + var(--space-2xl)) !important;
    }
}

/* /Components/Layout/MarketingLayout.razor.rz.scp.css */
.marketing-page[b-kqxgdjlc8e] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-background);
    color: var(--color-text);
}

.marketing-container[b-kqxgdjlc8e] {
    max-width: var(--container-default);
    margin: 0 auto;
    padding: 0 var(--space-lg);
    width: 100%;
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.marketing-nav[b-kqxgdjlc8e] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border-light);
    height: 4rem;
}

.marketing-nav-inner[b-kqxgdjlc8e] {
    display: flex;
    align-items: center;
    height: 100%;
    gap: var(--space-lg);
}

.marketing-brand[b-kqxgdjlc8e] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    font-weight: var(--font-bold);
    font-size: var(--text-lg);
    color: var(--color-primary);
    flex-shrink: 0;
}

.marketing-brand:hover[b-kqxgdjlc8e] {
    color: var(--color-primary);
}

.marketing-brand-logo[b-kqxgdjlc8e] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
}

.marketing-nav-links[b-kqxgdjlc8e] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-left: auto;
}

.marketing-nav-link[b-kqxgdjlc8e] {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: color var(--duration-fast) var(--ease-out);
}

.marketing-nav-link:hover[b-kqxgdjlc8e] {
    color: var(--color-primary);
}

.marketing-nav-actions[b-kqxgdjlc8e] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.marketing-btn[b-kqxgdjlc8e] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2xs) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
    line-height: 1.6;
}

.marketing-btn-ghost[b-kqxgdjlc8e] {
    color: var(--color-primary);
    background: transparent;
}

.marketing-btn-ghost:hover[b-kqxgdjlc8e] {
    color: var(--color-primary-light);
    background: var(--color-surface);
}

.marketing-btn-primary[b-kqxgdjlc8e] {
    color: var(--color-text-on-primary);
    background: var(--color-primary);
}

.marketing-btn-primary:hover[b-kqxgdjlc8e] {
    background: var(--color-primary-light);
    color: var(--color-text-on-primary);
}

/* Dark-mode adjustment for the translucent nav backdrop. */
[data-theme="dark"] .marketing-nav[b-kqxgdjlc8e] {
    background: rgba(14, 22, 32, 0.92);
}

/* ── Main ────────────────────────────────────────────────────────────────── */
.marketing-main[b-kqxgdjlc8e] {
    flex: 1;
    width: 100%;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.marketing-footer[b-kqxgdjlc8e] {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-light);
    padding: var(--space-lg) 0;
    margin-top: var(--space-2xl);
}

.marketing-footer-inner[b-kqxgdjlc8e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    flex-wrap: wrap;
}

.marketing-footer-link[b-kqxgdjlc8e] {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

.marketing-footer-link:hover[b-kqxgdjlc8e] {
    color: var(--color-primary);
}

/* Phone: stack nav actions */
@media (max-width: 599px) {  /* --bp-sm */
    .marketing-nav-actions[b-kqxgdjlc8e] {
        gap: var(--space-xs);
    }

    .marketing-btn[b-kqxgdjlc8e] {
        padding: var(--space-2xs) var(--space-sm);
        font-size: var(--text-xs);
    }
}

/* ── Circuit-free culture + theme controls (F1 static marketing chrome) ──
   Two mini POST forms styled as text links, and a plain theme button wired
   by theme.js's [data-theme-toggle] delegated listener. No Blazor circuit. */
.culture-toggle[b-kqxgdjlc8e] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.culture-toggle-form[b-kqxgdjlc8e] {
    display: inline-flex;
}

.culture-toggle-btn[b-kqxgdjlc8e] {
    background: none;
    border: 0;
    padding: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out);
}

.culture-toggle-btn:hover[b-kqxgdjlc8e] {
    color: var(--color-primary);
}

.culture-toggle-btn.is-active[b-kqxgdjlc8e] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
}

.culture-toggle-sep[b-kqxgdjlc8e] {
    color: var(--color-border);
}

.theme-toggle-static[b-kqxgdjlc8e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: none;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.theme-toggle-static:hover[b-kqxgdjlc8e] {
    color: var(--color-primary);
    border-color: var(--color-border);
}

/* ==========================================================================
   CINEMATIC LANDING NAV — dark glass over the hero photo (Founder-3: the
   marketing nav absorbed the deleted .landing-nav treatment from
   Home.razor.css). Gated on the landing wrapper via :has() (modern
   browsers ≥2023 — repo precedent: main:has(.context-panel) in
   MainLayout.razor.css); .landing-page.cinematic is rendered by
   LandingContent inside @Body.

   The hero photo is always dark behind the nav, so the dark-glass
   treatment applies in BOTH themes (the :has() chain out-specifies the
   [data-theme="dark"] .marketing-nav rule above). The .is-scrolled class
   is toggled by heroParallax.js when window.scrollY > 64 (F2: the landing
   scrolls the document — no overlay scroll container).
   ========================================================================== */
.marketing-page:has(.landing-page.cinematic) .marketing-nav[b-kqxgdjlc8e] {
    /* Fixed, not sticky: the nav must float OVER the hero photo, which
       starts at the top of the document; sticky would push it down 4rem. */
    position: fixed;
    left: 0;
    right: 0;
    background: rgba(14, 22, 32, 0.45);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.marketing-page:has(.landing-page.cinematic) .marketing-nav.is-scrolled[b-kqxgdjlc8e] {
    background: rgba(14, 22, 32, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.marketing-page:has(.landing-page.cinematic) .marketing-brand[b-kqxgdjlc8e] {
    color: #FFFFFF;
}

.marketing-page:has(.landing-page.cinematic) .marketing-nav-link[b-kqxgdjlc8e] {
    color: rgba(255, 255, 255, 0.78);
}

.marketing-page:has(.landing-page.cinematic) .marketing-nav-link:hover[b-kqxgdjlc8e] {
    color: #FFFFFF;
}

.marketing-page:has(.landing-page.cinematic) .marketing-btn-ghost[b-kqxgdjlc8e] {
    color: #FFFFFF;
}

.marketing-page:has(.landing-page.cinematic) .marketing-btn-ghost:hover[b-kqxgdjlc8e] {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

.marketing-page:has(.landing-page.cinematic) .marketing-btn-primary[b-kqxgdjlc8e] {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.20);
}

.marketing-page:has(.landing-page.cinematic) .marketing-btn-primary:hover[b-kqxgdjlc8e] {
    background: rgba(255, 255, 255, 0.22);
}

/* Culture + theme controls over the dark glass — white treatment so they
   stay legible on the hero photo (the base rules use muted text colors). */
.marketing-page:has(.landing-page.cinematic) .culture-toggle-btn[b-kqxgdjlc8e] {
    color: rgba(255, 255, 255, 0.78);
}

.marketing-page:has(.landing-page.cinematic) .culture-toggle-btn:hover[b-kqxgdjlc8e],
.marketing-page:has(.landing-page.cinematic) .culture-toggle-btn.is-active[b-kqxgdjlc8e] {
    color: #FFFFFF;
}

.marketing-page:has(.landing-page.cinematic) .culture-toggle-sep[b-kqxgdjlc8e] {
    color: rgba(255, 255, 255, 0.35);
}

.marketing-page:has(.landing-page.cinematic) .theme-toggle-static[b-kqxgdjlc8e] {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.20);
}

.marketing-page:has(.landing-page.cinematic) .theme-toggle-static:hover[b-kqxgdjlc8e] {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.45);
}

/* The landing keeps its own cinematic footer (sign-in/roadmap/privacy/
   contact links + tagline); stacking the generic marketing footer under
   it would duplicate the copyright line. */
.marketing-page:has(.landing-page.cinematic) .marketing-footer[b-kqxgdjlc8e] {
    display: none;
}

/* ── Nav responsive rules ported from the deleted .landing-nav ──────────
   Un-gated: the crowding comes from the four nav links (Home, Features,
   How it works, Roadmap) plus the Sign-in + CTA actions, and is worst in
   pt-PT where the labels are longest — "Funcionalidades", "Como Funciona"
   for the links, "Começar" for the CTA button. The unified nav now carries
   all of them on every marketing page. */

/* --bp-sm .. --bp-md: links are visible (d-md-flex ≥768px) while the brand
   text + Sign in still show — tighten gaps + shrink the action buttons so
   the bar stays contained in both languages across this band. */
@media (min-width: 600px) and (max-width: 899.98px) {
    .marketing-nav-inner[b-kqxgdjlc8e] {
        gap: var(--space-sm);
    }

    .marketing-nav-links[b-kqxgdjlc8e] {
        gap: var(--space-md);
    }

    .marketing-nav-actions[b-kqxgdjlc8e] {
        gap: var(--space-xs);
    }

    .marketing-btn[b-kqxgdjlc8e] {
        padding-inline: var(--space-sm);
        font-size: var(--text-xs);
    }
}

/* Below Bootstrap's md: .marketing-nav-links is d-none, and it is the element whose
   margin-left: auto pushes everything to the right edge - a display:none element
   contributes no margin, so the actions were left-packed against the logo. Give the
   group its own auto margin at exactly the widths where the links are gone. */
@media (max-width: 767.98px) {
    .marketing-nav-actions[b-kqxgdjlc8e] {
        margin-left: auto;
    }
}

/* Mobile — below --bp-sm: hide the wordmark, keep the round logo. */
@media (max-width: 599.98px) {
    .marketing-brand-text[b-kqxgdjlc8e] {
        display: none;
    }

    .marketing-nav-inner[b-kqxgdjlc8e] {
        gap: var(--space-sm);
    }
}

/* Below 480px: drop "Sign in" — Get started is the primary action. */
@media (max-width: 479.98px) {
    .marketing-nav-actions .marketing-btn-ghost[b-kqxgdjlc8e] {
        display: none;
    }
}

/* Smallest phones: tighten nav gap + CTA padding so "Get started" stays
   fully inside the visible nav width. */
@media (max-width: 399.98px) {
    .marketing-nav-inner[b-kqxgdjlc8e] {
        gap: var(--space-2xs);
    }

    .marketing-btn-primary[b-kqxgdjlc8e] {
        padding-inline: var(--space-sm);
        font-size: var(--text-xs);
    }
}

/* Theme-toggle glyph is chosen declaratively from <html data-theme> — correct
   in static SSR and in-circuit alike (no HttpContext read, no JS sync). Light
   theme offers the moon (switch to dark); dark theme offers the sun. */
.theme-toggle-static .theme-icon-when-dark[b-kqxgdjlc8e] { display: none; }

[data-theme="dark"] .theme-toggle-static .theme-icon-when-light[b-kqxgdjlc8e] { display: none; }
[data-theme="dark"] .theme-toggle-static .theme-icon-when-dark[b-kqxgdjlc8e] { display: inline-block; }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-b36obsxnyn] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-b36obsxnyn] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-b36obsxnyn] {
    height: 3.5rem;
    background-color: var(--color-primary-dark);
    overflow: hidden;
}

.navbar-brand[b-b36obsxnyn] {
    font-size: 1.1rem;
    gap: 0.3rem;
}

.brand-text[b-b36obsxnyn] {
    color: white;
    font-weight: 600;
}

.brand-icon[b-b36obsxnyn] {
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.bi[b-b36obsxnyn] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-bell-fill-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-bell-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z'/%3E%3C/svg%3E");
}

/* Unread-count bubble next to the Notifications nav link (Plan D). */
.notif-badge[b-b36obsxnyn] {
    display: inline-block;
    min-width: 1.1rem;
    padding: 0 0.35rem;
    margin-left: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
    color: var(--color-text-on-primary);
    background-color: var(--color-danger);
    border-radius: 0.6rem;
    vertical-align: middle;
}

.bi-plus-square-fill-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-send-fill-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-send-fill' viewBox='0 0 16 16'%3E%3Cpath d='M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083l6-15Zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471-.47 1.178Z'/%3E%3C/svg%3E");
}

.bi-clock-fill-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-clock-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V8a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 7.71V3.5z'/%3E%3C/svg%3E");
}

/* Submissions icon (check-circle-fill) */
.bi-check-circle-fill-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-check-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E");
}

.bi-link-45deg-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-link-45deg' viewBox='0 0 16 16'%3E%3Cpath d='M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z'/%3E%3Cpath d='M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z'/%3E%3C/svg%3E");
}

.bi-person-lines-fill-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a .5 .5 0 0 1 .5 -.5h4a .5 .5 0 0 1 0 1h-4a .5 .5 0 0 1 -.5 -.5zm .5 2.5a .5 .5 0 0 0 0 1h4a .5 .5 0 0 0 0 -1h-4zm2 3a .5 .5 0 0 0 0 1h2a .5 .5 0 0 0 0 -1h-2zm-1 3a .5 .5 0 0 0 0 1h3a .5 .5 0 0 0 0 -1h-3z'/%3E%3C/svg%3E");
}

.bi-gear-fill-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-gear-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E");
}

.bi-people-fill-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-people-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7Zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-5.784 6A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216ZM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z'/%3E%3C/svg%3E");
}

/* Create Test User icon (person-plus-fill) */
.bi-person-plus-fill-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-plus-fill' viewBox='0 0 16 16'%3E%3Cpath d='M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6'/%3E%3Cpath fill-rule='evenodd' d='M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
}

/* Payment Codes icon (qr-code) */
.bi-phone-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-qr-code' viewBox='0 0 16 16'%3E%3Cpath d='M2 2h2v2H2V2Z'/%3E%3Cpath d='M6 0v6H0V0h6ZM5 1H1v4h4V1ZM4 12H2v2h2v-2Z'/%3E%3Cpath d='M6 10v6H0v-6h6Zm-5 1v4h4v-4H1Zm11-9h2v2h-2V2Z'/%3E%3Cpath d='M10 0v6h6V0h-6Zm5 1v4h-4V1h4ZM8 1V0h1v2H8v2H7V1h1Zm0 5V4h1v2H8ZM6 8V7h1V6h1v2h1V7h5v1h-4v1H7V8H6Zm0 0v1H2V8H1v1H0V7h3v1h3Zm10 1h-1V7h1v2Zm-1 0h-1v2h2v-1h-1V9Zm-4 0h2v1h-1v1h-1V9Zm2 3v-1h-1v1h-1v1H9v1h3v-2h1Zm0 0h3v1h-2v1h-1v-2Zm-4-1v1h1v-2H7v1h2Zm1 1v2h-2v-2h2Zm-2 3v-1h2v1h-2Zm3 0h-1v1h1v-1Z'/%3E%3Cpath d='M14 11v2h-2v-2h2Z'/%3E%3C/svg%3E");
}

/* ID Documents icon (person-badge) */
.bi-camera-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-3.25-1.544h-3.5A4.198 4.198 0 0 0 3 13.295V2.5z'/%3E%3C/svg%3E");
}

/* Bookings icon (calendar-check) */
.bi-bookings-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-calendar-check' viewBox='0 0 16 16'%3E%3Cpath d='M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z'/%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E");
}

/* Invoices icon (receipt) */
.bi-invoices-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-receipt' viewBox='0 0 16 16'%3E%3Cpath d='M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.742.44l-1-1a.5.5 0 0 0-.557.07l-.646.647a.5.5 0 0 1-.708 0L11 13.707l-.646.647a.5.5 0 0 1-.708 0L9 13.707l-.646.647a.5.5 0 0 1-.708 0L7 13.707l-.646.647a.5.5 0 0 1-.708 0L5 13.707l-.646.647a.5.5 0 0 1-.708 0L3 13.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 13V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zm.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51z'/%3E%3Cpath d='M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

/* API Key icon (key-fill) */
.bi-key-fill-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-key-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2zM2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E");
}

/* Templates icon (file-earmark-text) */
.bi-templates-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-file-earmark-text' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z'/%3E%3Cpath d='M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z'/%3E%3C/svg%3E");
}

/* Subscription icon (credit-card) */
.bi-subscription-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-credit-card' viewBox='0 0 16 16'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v1h14V4a1 1 0 0 0-1-1H2zm13 4H1v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V7z'/%3E%3Cpath d='M2 10a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-1z'/%3E%3C/svg%3E");
}

/* AL Properties icon (building) */
.bi-building-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-building' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1ZM4 5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM7.5 5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM4.5 8a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Z'/%3E%3Cpath d='M2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V1Zm11 0H3v14h3v-2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V15h3V1Z'/%3E%3C/svg%3E");
}

/* Email Settings icon (envelope-fill) */
.bi-envelope-fill-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-envelope-fill' viewBox='0 0 16 16'%3E%3Cpath d='M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757ZM16 11.801V4.697l-5.803 3.546L16 11.801Z'/%3E%3C/svg%3E");
}

/* Cleaning Schedules icon (calendar-week) */
.bi-calendar-week-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-calendar-week' viewBox='0 0 16 16'%3E%3Cpath d='M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z'/%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E");
}

/* Task Lists icon (list-check) */
.bi-list-check-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-check' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

/* Newsletter Dashboard icon (speedometer2) */
.bi-speedometer2-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-speedometer2' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.5.5 0 0 0-.708 0l-.914.914a.5.5 0 0 0 .708.708l.914-.914a.5.5 0 0 0 0-.708zM0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z'/%3E%3Cpath d='M12.5 10a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0zm-1.983-1.496a.5.5 0 0 0-.274.93l.13.065a.5.5 0 1 0 .45-.89l-.129-.065a.5.5 0 0 0-.177-.04z'/%3E%3C/svg%3E");
}

/* Newsletter Subscribers icon (people) */
.bi-people-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-people' viewBox='0 0 16 16'%3E%3Cpath d='M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z'/%3E%3C/svg%3E");
}

/* Newsletter Lists icon (list-ul) */
.bi-list-ul-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-ul' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E");
}

/* Financial Overview icon (graph-up) */
.bi-graph-up-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07 .704l-4.5 5.5a.5.5 0 0 1-.74 .037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z'/%3E%3C/svg%3E");
}

/* API Calls icon (robot) */
.bi-robot-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-robot' viewBox='0 0 16 16'%3E%3Cpath d='M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5ZM3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.58 26.58 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.933.933 0 0 1-.765.935c-.845.147-2.34.346-4.235.346-1.895 0-3.39-.2-4.235-.346A.933.933 0 0 1 3 9.219V8.062Zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25.14 25.14 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25.286 25.286 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135Z'/%3E%3Cpath d='M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2V1.866ZM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5Z'/%3E%3C/svg%3E");
}

/* API Calls Debug icon (bug) */
.bi-bug-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-bug' viewBox='0 0 16 16'%3E%3Cpath d='M4.355.522a.5.5 0 0 1 .623.333l.291.956A4.979 4.979 0 0 1 8 1c1.007 0 1.946.298 2.731.811l.29-.956a.5.5 0 1 1 .957.29l-.41 1.352A4.985 4.985 0 0 1 13 6h.5a.5.5 0 0 1 .5.5V7h-.001a.5.5 0 0 1-.5.5H13v1h.5a.5.5 0 0 1 .5.5V10h-.001a.5.5 0 0 1-.5.5H13a5 5 0 0 1-1.525 3.598l.41 1.353a.5.5 0 0 1-.956.29l-.291-.956A4.978 4.978 0 0 1 8 15a4.978 4.978 0 0 1-2.638-.715l-.29.956a.5.5 0 0 1-.957-.29l.41-1.353A5 5 0 0 1 3 10.5h-.5a.5.5 0 0 1-.5-.5v-.5h.001a.5.5 0 0 1 .5-.5H3V8h-.5a.5.5 0 0 1-.5-.5V7h.001a.5.5 0 0 1 .5-.5H3a4.985 4.985 0 0 1 1.432-3.503l-.41-1.352a.5.5 0 0 1 .333-.623zM4 7v2h3.5V7H4zm4.5 0v2H12V7H8.5zm0 3v2.418A3.985 3.985 0 0 0 12 10.5h-.5V10H8.5zm-1 0H4v.5A3.985 3.985 0 0 0 7.5 12.418V10zm-3.5-4A3.985 3.985 0 0 0 4 7.5V7h3.5V6H4.085zM8.5 6v1H12v-.5A3.985 3.985 0 0 0 11.915 6H8.5z'/%3E%3C/svg%3E");
}

/* Data Retention icon (shield-shaded — privacy / GDPR compliance) */
.bi-shield-shaded-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-shield-shaded' viewBox='0 0 16 16'%3E%3Cpath d='M8 14.933a1.979 1.979 0 0 1-.879-.207C5.014 13.662 1.5 10.65 1.5 6V2.86a1 1 0 0 1 .62-.924C3.422 1.434 5.633.5 8 .5c2.184 0 4.474.934 5.88 1.436a1 1 0 0 1 .62.924V6c0 4.65-3.514 7.662-5.621 8.726A1.979 1.979 0 0 1 8 14.933ZM8 1.5c-2.044 0-4.07.819-5.382 1.31a.5.5 0 0 0-.32.466V6c0 4.067 3.149 6.79 5.07 7.748A.979.979 0 0 0 8 13.933V1.5Z'/%3E%3C/svg%3E");
}

/* Email Processing Log icon (envelope-open) */
.bi-envelope-open-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-envelope-open' viewBox='0 0 16 16'%3E%3Cpath d='M8.47 1.318a1 1 0 0 0-.94 0l-6 3.2A1 1 0 0 0 1 5.4v.817l5.75 3.45L8 8.917l1.25.75L15 6.217V5.4a1 1 0 0 0-.53-.882l-6-3.2ZM15 7.383l-4.778 2.867L15 13.117V7.383Zm-.035 6.88L8 10.082l-6.965 4.18A1 1 0 0 0 2 15h12a1 1 0 0 0 .965-.738ZM1 13.116l4.778-2.867L1 7.383v5.734ZM7.059.435a2 2 0 0 1 1.882 0l6 3.2A2 2 0 0 1 16 5.4V14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5.4a2 2 0 0 1 1.059-1.765l6-3.2Z'/%3E%3C/svg%3E");
}

/* Newsletter Campaigns icon (megaphone) */
.bi-megaphone-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-megaphone' viewBox='0 0 16 16'%3E%3Cpath d='M13 2.5a1.5 1.5 0 0 1 3 0v11a1.5 1.5 0 0 1-3 0v-.214c-2.162-1.241-4.49-1.843-6.912-2.083l.405 2.712A1 1 0 0 1 5.51 15.1h-.548a1 1 0 0 1-.916-.599l-1.85-3.49a68.14 68.14 0 0 0-.202-.003A2.014 2.014 0 0 1 0 9V7a2.02 2.02 0 0 1 1.992-2.013 74.663 74.663 0 0 0 2.483-.075c3.043-.154 6.148-.849 8.525-2.199V2.5zm1 0v11a.5.5 0 0 0 1 0v-11a.5.5 0 0 0-1 0zm-1 1.35c-2.344 1.205-5.209 1.842-8 2.033v4.233c2.791.192 5.656.829 8 2.033V3.85zM1.998 7.002A1.007 1.007 0 0 0 1 7.999V9c0 .556.449 1.002 1.002 1.002a61.181 61.181 0 0 1 2.993.07l.005.001L5 10.07V5.928l-.003.001A72.26 72.26 0 0 1 1.998 7zm2.087 7.062-.025.028-.02.045L5.91 14.5h.548l-.59-3.39a69.36 69.36 0 0 0-1.782-.048l-.001.006z'/%3E%3C/svg%3E");
}

/* Section header style for nav categories */
.nav-section-header[b-b36obsxnyn] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-top: 0.75rem;
    padding-bottom: 0.25rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: color var(--transition-fast, 0.15s);
}

.nav-section-header:hover[b-b36obsxnyn] {
    color: rgba(255, 255, 255, 0.7);
}

.nav-section-header:first-of-type[b-b36obsxnyn] {
    border-top: none;
    margin-top: 0;
}

.nav-section-toggle[b-b36obsxnyn] {
    display: inline-block;
    font-size: 0.6rem;
    transition: transform 0.2s ease;
}

.nav-section-toggle.collapsed[b-b36obsxnyn] {
    transform: rotate(-90deg);
}

.nav-item[b-b36obsxnyn] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-b36obsxnyn] {
        padding-top: 1rem;
    }

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

.bi-cash-coin-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-cash-coin' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8m5-4a5 5 0 1 1-10 0 5 5 0 0 1 10 0'/%3E%3Cpath d='M9.438 11.944c.047.596.518 1.06 1.363 1.116v.44h.375v-.443c.875-.061 1.386-.529 1.386-1.207 0-.618-.39-.936-1.09-1.1l-.296-.07v-1.2c.376.043.614.248.671.532h.658c-.047-.575-.54-1.024-1.329-1.073V8.5h-.375v.45c-.747.073-1.255.522-1.255 1.158 0 .562.378.92 1.007 1.066l.248.061v1.272c-.384-.058-.639-.27-.696-.563zm1.36-1.354c-.369-.085-.569-.26-.569-.522 0-.294.216-.514.572-.578v1.1zm.432.746c.449.104.655.272.655.569 0 .339-.257.571-.709.614v-1.195z'/%3E%3Cpath d='M1 0a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4.083q .033 -.517 .183 -1H1V2a2 2 0 0 0-2-2zm7.99 0a1 1 0 0 0-.994.89L9 1.101V1a1 1 0 0 0-.01 .001'/%3E%3Cpath d='M3 3.5a.5.5 0 0 1 .5-.5H11v1H3.5a.5.5 0 0 1-.5-.5M4.5 6a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3.5a5 5 0 0 1 .78-1q-.075-.034-.16-.057A1.5 1.5 0 0 0 8 6.5H4.5zM1 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1H1z'/%3E%3C/svg%3E");
}

.bi-envelope-paper-nav-menu[b-b36obsxnyn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-envelope-paper' viewBox='0 0 16 16'%3E%3Cpath d='M4 0a2 2 0 0 0-2 2v1.133l-.941.502A2 2 0 0 0 0 5.4V14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5.4a2 2 0 0 0-1.059-1.765L14 3.133V2a2 2 0 0 0-2-2zm10 4.267.47.25A1 1 0 0 1 15 5.4v.817l-1 .6zm-1 3.15-3.75 2.25L8 8.917l-1.25.75L3 7.417V2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1zm-11-.6-1-.6V5.4a1 1 0 0 1 .53-.882L2 4.267zm13 .566v5.734l-4.778-2.867zm-.035 6.88A1 1 0 0 1 14 15H2a1 1 0 0 1-.965-.738L8 10.083zM1 13.116V7.383l4.778 2.867L1 13.117Z'/%3E%3C/svg%3E");
}

    .nav-item[b-b36obsxnyn]  .nav-link {
        color: var(--sidebar-text);
        background: none;
        border: none;
        border-radius: var(--radius-sm);
        min-height: 2.5rem;
        display: flex;
        align-items: center;
        line-height: 1.3;
        width: 100%;
        font-size: 0.85rem;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
        white-space: normal;
        transition: background-color var(--transition-fast), color var(--transition-fast);
    }

.nav-item[b-b36obsxnyn]  a.active {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-brand-color);
}

.nav-item[b-b36obsxnyn]  .nav-link:hover {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-brand-color);
}

.nav-scrollable[b-b36obsxnyn] {
    display: none;
    user-select: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-b36obsxnyn] {
    display: block;
}

@media (min-width: 900px) {  /* --bp-md — same boundary as the app-shell grid */
    .navbar-toggler[b-b36obsxnyn] {
        display: none;
    }

    .nav-scrollable[b-b36obsxnyn] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus (3.5rem = brand .top-row) */
        height: calc(100vh - 3.5rem);  /* fallback for browsers without dvh */
        height: calc(100dvh - 3.5rem);
        overflow-y: auto;
        /* Wheel over the sidebar scrolls only the sidebar — never the page */
        overscroll-behavior-y: contain;
        /* Sidebar scrolls, but its scrollbar stays invisible (cross-browser:
           Firefox + spec via scrollbar-width, WebKit/Blink via the
           pseudo-element below). */
        scrollbar-width: none;

        /* Bottom fade cue — the ONLY signal that more nav exists below, since
           the scrollbar above is fully hidden (founder decision; the brief's
           §6.2 exception, scoped to nav surfaces).

           mask-image, not the usual background-attachment:local scroll-shadow:
           that technique needs the container's own background to paint the
           "cover" layer, and this element is transparent over .sidebar's
           VERTICAL GRADIENT (--sidebar-bg) — a flat cover colour cannot match
           a gradient at an arbitrary scroll offset. Masking content alpha
           sidesteps the backdrop entirely.

           Self-hiding without any overflow detection: the fade zone is the
           last 1rem of the CONTAINER. When the nav fits, that band is empty
           space below the last item, so nothing visibly fades. It only reads
           as a fade once content actually reaches the bottom edge — which is
           exactly when scrolling is possible. Cost: scrolled fully to the
           bottom, the final item carries a slight fade. */
        /* 1rem, not 1.5rem: `.nav-item:last-of-type` carries `padding-bottom: 1rem`, so a
           1rem band covers exactly that padding and stops at the last item's content box.
           At 1.5rem the band reached ~8px into the 40px .nav-link box, dimming the ACTIVE
           item's highlight pill (and a focus ring) to ~0.67 alpha at its bottom edge when
           scrolled fully down — a WCAG 2.4.11 Focus Appearance risk. Both apps' one
           captured long-nav route (AL.Web Extension-ApiKeys, Invoicing saft-export) render
           their LAST item active, so that was the common case, not the corner one. */
        --nav-fade-height: 1rem;
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--nav-fade-height)), transparent 100%);
        mask-image: linear-gradient(to bottom, #000 calc(100% - var(--nav-fade-height)), transparent 100%);
    }

    .nav-scrollable[b-b36obsxnyn]::-webkit-scrollbar {
        display: none;
    }
}
/* /Components/Pages/Account/AccessDenied.razor.rz.scp.css */
/* All shared .auth-* styles live in wwwroot/css/primitives/auth-card.css.
   Page-specific overrides only. */
/* /Components/Pages/Account/AccountPending.razor.rz.scp.css */
/* ==========================================================================
   AccountPending page — Lisbon Modern v1.1.5
   Layout chrome comes from wwwroot/css/primitives/auth-card.css. Only
   page-specific chrome lives here.
   ========================================================================== */

.pending-icon[b-9lfig5b323] {
    font-size: 3rem;
}
/* /Components/Pages/Admin/AdminSettings.razor.rz.scp.css */
/* ==========================================================================
   AdminSettings page — Lisbon Modern v1.1.5
   Clean-slate port. The page has 9 admin-warning cards (intentional
   yellow-tinted header treatment for risk-sensitive admin actions); each
   card shares the same shape (header + form body + result alert + action
   row), so the CSS abstracts that into:
     .admin-warning-card  (extends .card with --color-warning border)
     .admin-warning-header (extends .card-header with warning tint)
     .admin-warning-actions (button row)
     .admin-warning-badges (status-badge row)
   Form bodies use the shared .admin-form-grid / .admin-form-field /
   .admin-form-field-full / .admin-form-toggle conventions to replace the
   .row.g-3 .col-md-3/6/12 patchwork scattered across all 9 cards.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-09djstxeon] {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-09djstxeon] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-09djstxeon] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Admin-warning card chrome ──────────────────────────────────────────── */
.admin-warning-card[b-09djstxeon] {
    border: 1px solid var(--color-warning);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.admin-warning-card:hover[b-09djstxeon] {
    box-shadow: var(--elevation-2);
}

.admin-warning-header[b-09djstxeon] {
    background-color: color-mix(in srgb, var(--color-warning) 18%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
    padding: var(--spacing-md) var(--spacing-lg);
}

.admin-warning-header h5[b-09djstxeon] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    margin-bottom: 0;
}

.admin-warning-card .card-body[b-09djstxeon] {
    padding: var(--spacing-lg);
}

/* ── Form grid + fields (shared by all 9 cards) ─────────────────────────── */
.admin-form-grid[b-09djstxeon] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--spacing-md);
    align-items: start;
}

.admin-form-field[b-09djstxeon] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.admin-form-field .form-label[b-09djstxeon] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    margin-bottom: 0;
}

.admin-form-field .form-control[b-09djstxeon],
.admin-form-field .form-select[b-09djstxeon] {
    width: 100%;
}

.admin-form-field .form-text[b-09djstxeon] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin-top: var(--space-2xs);
}

.admin-form-field-full[b-09djstxeon] {
    grid-column: 1 / -1;
}

/* Form-switch wrapper (single-toggle cards). */
.admin-form-toggle[b-09djstxeon] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.admin-form-toggle .form-text[b-09djstxeon] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* Conditional grid revealed after a toggle (e.g. Direct MB Way enable
   → phone input shows). */
.admin-form-toggle + .admin-form-grid[b-09djstxeon] {
    margin-top: var(--spacing-md);
}

/* ── Action / badge rows ────────────────────────────────────────────────── */
.admin-warning-actions[b-09djstxeon] {
    margin-top: var(--spacing-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}

.admin-warning-badges[b-09djstxeon] {
    margin-top: var(--spacing-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    align-items: center;
}

/* Result-message alert spacing inside a card-body. */
.admin-warning-result[b-09djstxeon] {
    margin-top: var(--spacing-md);
    margin-bottom: 0;
    padding: var(--spacing-sm) var(--spacing-md);
}

/* ── Loading row (matches the inline pattern used in 2 of the 9 cards) ─── */
.loading-row[b-09djstxeon] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-muted);
}

/* ── Card-to-card spacing (page-level rhythm) ──────────────────────────── */
.admin-warning-card + .admin-warning-card[b-09djstxeon] {
    margin-top: var(--spacing-lg);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header h1[b-09djstxeon] {
        font-size: 1.3rem;
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-09djstxeon] {
        font-size: 1.15rem;
    }

    .admin-warning-header[b-09djstxeon] {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .admin-warning-card .card-body[b-09djstxeon] {
        padding: var(--spacing-md);
    }

    .admin-warning-actions[b-09djstxeon],
    .admin-warning-badges[b-09djstxeon] {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-warning-actions .btn[b-09djstxeon] {
        width: 100%;
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════
   The admin-warning treatment uses color-mix in both themes, so the tint
   stays readable on either side. Only the header h5 / page-header h1
   need explicit dark-mode anchoring.
   ══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-09djstxeon],
[data-theme="dark"] .admin-warning-header h5[b-09djstxeon] {
    color: var(--color-primary);
}

[data-theme="dark"] .admin-warning-card[b-09djstxeon] {
    border-color: var(--color-warning);
    background: var(--color-surface);
}

[data-theme="dark"] .admin-warning-header[b-09djstxeon] {
    background-color: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface));
    border-bottom-color: color-mix(in srgb, var(--color-warning) 30%, var(--color-border));
}
/* /Components/Pages/Admin/ApiCalls.razor.rz.scp.css */
/* ==========================================================================
   ApiCalls (Admin) page — Lisbon Modern v1.1.5
   Clean-slate port. Tabbed admin observability page (Plans / Users /
   Failure Logs). .nav-tabs dark-mode handled by the global per brief §6.3.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-zc44w19gjm] {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-zc44w19gjm] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-zc44w19gjm] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Tab nav (extends Bootstrap .nav-tabs; dark-mode in global) ────────── */
[b-zc44w19gjm] .nav-tabs .nav-link {
    color: var(--color-text);
    font-weight: var(--font-medium);
}

[b-zc44w19gjm] .nav-tabs .nav-link.active {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
}

/* ── Cards (KPI strip + filter card) ────────────────────────────────────── */
.kpi-grid[b-zc44w19gjm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.kpi-card[b-zc44w19gjm] {
    text-align: center;
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: var(--spacing-md);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.kpi-card:hover[b-zc44w19gjm] {
    box-shadow: var(--elevation-2);
}

.kpi-label[b-zc44w19gjm] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--font-medium);
    margin-bottom: var(--space-2xs);
}

.kpi-value[b-zc44w19gjm] {
    font-size: 1.6rem;
    font-weight: var(--font-bold);
    line-height: 1.1;
    color: var(--color-primary);
}

.kpi-value-info[b-zc44w19gjm] { color: var(--color-secondary); }
.kpi-value-success[b-zc44w19gjm] { color: var(--color-success-dark); }
.kpi-value-warning[b-zc44w19gjm] { color: var(--color-warning); }
.kpi-value-danger[b-zc44w19gjm]  { color: var(--color-danger); }

/* ── Filter card + bar ─────────────────────────────────────────────────── */
.filter-card[b-zc44w19gjm] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.filter-bar[b-zc44w19gjm] {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.filter-field[b-zc44w19gjm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.filter-field .form-label[b-zc44w19gjm] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0;
}

.filter-field .form-select[b-zc44w19gjm] {
    min-width: 11rem;
}

.filter-actions[b-zc44w19gjm] {
    margin-left: auto;
    display: flex;
    gap: var(--spacing-sm);
}

.filter-actions-leading[b-zc44w19gjm] {
    display: flex;
    align-items: flex-end;
}

/* ── Tab-action row (Failure Logs delete-all button) ───────────────────── */
.tab-action-row[b-zc44w19gjm] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--spacing-sm);
}

/* ── Inline messages / empty states ────────────────────────────────────── */
.loading-row[b-zc44w19gjm] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-muted);
    margin: var(--spacing-lg) 0;
}

.inline-empty[b-zc44w19gjm] {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--color-text-muted);
}

.inline-message[b-zc44w19gjm] {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

/* ── Table chrome (shared across all 3 tabs) ────────────────────────────── */
[b-zc44w19gjm] .table {
    font-size: var(--text-sm);
    margin-bottom: 0;
}

[b-zc44w19gjm] .table th {
    color: var(--color-text-muted);
    font-weight: var(--font-semibold);
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}

[b-zc44w19gjm] .table td {
    vertical-align: middle;
}

[b-zc44w19gjm] .table tfoot tr {
    border-top: 2px solid var(--color-border);
}

/* Status-rate text colour scale (shared logic for rate + score columns). */
.rate-good[b-zc44w19gjm]   { color: var(--color-success); }
.rate-warn[b-zc44w19gjm]   { color: var(--color-warning); }
.rate-bad[b-zc44w19gjm]    { color: var(--color-danger); }

[data-theme="dark"] .rate-good[b-zc44w19gjm] { color: var(--color-success); }
[data-theme="dark"] .rate-warn[b-zc44w19gjm] { color: var(--color-warning); }
[data-theme="dark"] .rate-bad[b-zc44w19gjm]  { color: var(--color-danger); }

/* Truncate cells (model name, error text). */
.truncate-md[b-zc44w19gjm] { max-width: 140px; }
.truncate-lg[b-zc44w19gjm] { max-width: 200px; }
.truncate-xl[b-zc44w19gjm] { max-width: 300px; }
[b-zc44w19gjm] .table .truncate-md,
[b-zc44w19gjm] .table .truncate-lg,
[b-zc44w19gjm] .table .truncate-xl {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Column priority hiding (Plans table — 13 cols, most aggressive) ────
   Platform + Rank + Rate + Actions always show (priority 1).
   Type + Score drop <600px (priority 2).
   Success + Fail + LastUsed drop <900px (priority 3).
   Language + Classification + Model + Created drop <1100px (priority 4).
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 599.98px) {
    [b-zc44w19gjm] th[data-priority="2"],
    [b-zc44w19gjm] td[data-priority="2"],
    [b-zc44w19gjm] th[data-priority="3"],
    [b-zc44w19gjm] td[data-priority="3"],
    [b-zc44w19gjm] th[data-priority="4"],
    [b-zc44w19gjm] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 600px) and (max-width: 899.98px) {
    [b-zc44w19gjm] th[data-priority="3"],
    [b-zc44w19gjm] td[data-priority="3"],
    [b-zc44w19gjm] th[data-priority="4"],
    [b-zc44w19gjm] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 900px) and (max-width: 1199.98px) {
    [b-zc44w19gjm] th[data-priority="4"],
    [b-zc44w19gjm] td[data-priority="4"] {
        display: none;
    }
}

/* ── JSON modal body chrome ─────────────────────────────────────────────── */
.json-modal-meta[b-zc44w19gjm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    font-size: var(--text-sm);
    color: var(--color-text);
}

.json-modal-meta strong[b-zc44w19gjm] {
    color: var(--color-text-muted);
    margin-right: var(--space-2xs);
}

.code-block[b-zc44w19gjm] {
    background-color: var(--color-surface-alt);
    color: var(--color-text);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--text-sm);
    max-height: 500px;
    overflow: auto;
    margin: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header h1[b-zc44w19gjm] {
        font-size: 1.3rem;
    }

    [b-zc44w19gjm] .table {
        font-size: var(--text-xs);
    }

    .filter-actions[b-zc44w19gjm] {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-zc44w19gjm] {
        font-size: 1.15rem;
    }

    .filter-bar[b-zc44w19gjm] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-field .form-select[b-zc44w19gjm] {
        min-width: 0;
        width: 100%;
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-zc44w19gjm] {
    color: var(--color-primary);
}

[data-theme="dark"] .code-block[b-zc44w19gjm] {
    background-color: var(--color-background);
    border-color: var(--color-border-light);
    color: var(--color-text);
}
/* /Components/Pages/Admin/ApiCallsDebug.razor.rz.scp.css */
/* ==========================================================================
   ApiCallsDebug (Admin) page — Lisbon Modern v1.1.5
   Clean-slate port. Diagnostic page for replaying inbound .eml files
   through the parsing pipeline. Heavy use of <pre> code blocks for
   identification / extraction / API-response JSON.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-xy3my6ktpe] {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-xy3my6ktpe] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-xy3my6ktpe] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card[b-xy3my6ktpe] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.card:hover[b-xy3my6ktpe] {
    box-shadow: var(--elevation-2);
}

.card-header[b-xy3my6ktpe] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
}

.card-header strong[b-xy3my6ktpe] {
    color: var(--color-primary);
}

.card-body[b-xy3my6ktpe] {
    padding: var(--spacing-lg);
}

.card-title[b-xy3my6ktpe] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    font-size: 1.05rem;
    margin-bottom: var(--spacing-md);
}

/* ── Upload row (InputFile + processing state) ──────────────────────────── */
.upload-row[b-xy3my6ktpe] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.upload-progress[b-xy3my6ktpe] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--color-text-muted);
}

/* ── Latest-result email-info grid (From / Subject / OTA / EmailDate) ──── */
.email-info-grid[b-xy3my6ktpe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

.email-info-grid strong[b-xy3my6ktpe] {
    color: var(--color-text-muted);
    margin-right: var(--space-2xs);
}

/* ── Identification + Extraction parallel result panels ────────────────── */
.pipeline-grid[b-xy3my6ktpe] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

@media (max-width: 991.98px) {
    .pipeline-grid[b-xy3my6ktpe] {
        grid-template-columns: 1fr;
    }
}

.pipeline-panel h6[b-xy3my6ktpe] {
    color: var(--color-text);
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-sm);
}

/* ── Code blocks (shared) ───────────────────────────────────────────────── */
.code-block[b-xy3my6ktpe] {
    background-color: var(--color-surface-alt);
    color: var(--color-text);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.825rem;
    overflow: auto;
    margin: 0;
}

.code-block-md[b-xy3my6ktpe] { max-height: 300px; }
.code-block-lg[b-xy3my6ktpe] { max-height: 400px; }

/* Inverse terminal-style code block (used for raw API responses). Uses
   a dark neutral background in both themes so the terminal feel reads
   even in light mode. */
.code-block-inverse[b-xy3my6ktpe] {
    background-color: #1A202C;
    color: #E2E8F0;
    border: 1px solid #2D3748;
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.825rem;
    max-height: 400px;
    overflow: auto;
    margin-top: var(--space-2xs);
}

[data-theme="dark"] .code-block-inverse[b-xy3my6ktpe] {
    background-color: var(--color-background);
    border-color: var(--color-border-light);
    color: var(--color-text);
}

/* ── Collapsible-section button + chevron ───────────────────────────────── */
.collapsible-btn[b-xy3my6ktpe] {
    margin-top: var(--space-2xs);
}

/* ── Token usage row ────────────────────────────────────────────────────── */
.token-usage[b-xy3my6ktpe] {
    margin-top: var(--spacing-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    align-items: center;
    color: var(--color-text);
}

.token-usage strong[b-xy3my6ktpe] {
    color: var(--color-text-muted);
    margin-right: var(--space-2xs);
}

/* Prepared-body code block sits as the sibling immediately after the
   .token-usage toggle row; nudge it down so it doesn't tail the button. */
.token-usage + .code-block[b-xy3my6ktpe] {
    margin-top: var(--space-2xs);
}

/* ── Section header (Previous Records row) ──────────────────────────────── */
.records-header[b-xy3my6ktpe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--spacing-xl) 0 var(--spacing-md);
}

.records-header h5[b-xy3my6ktpe] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    margin: 0;
}

/* ── Inline messages / empty states ────────────────────────────────────── */
.loading-row[b-xy3my6ktpe] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-muted);
    margin: var(--spacing-lg) 0;
}

.inline-empty[b-xy3my6ktpe] {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--color-text-muted);
}

.inline-message[b-xy3my6ktpe] {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-top: var(--spacing-sm);
}

/* ── Table chrome ───────────────────────────────────────────────────────── */
[b-xy3my6ktpe] .table {
    font-size: var(--text-sm);
    margin-bottom: 0;
}

[b-xy3my6ktpe] .table th {
    color: var(--color-text-muted);
    font-weight: var(--font-semibold);
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}

[b-xy3my6ktpe] .table td {
    vertical-align: middle;
}

/* Truncate-cell helpers used in the records table. */
.truncate-md[b-xy3my6ktpe] { max-width: 150px; }
.truncate-lg[b-xy3my6ktpe] { max-width: 220px; }
[b-xy3my6ktpe] .table .truncate-md,
[b-xy3my6ktpe] .table .truncate-lg {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Column priority hiding (10-col records table) ──────────────────────
   Date + File + OTA + Actions always show (priority 1).
   From + Identification drop <600px (priority 2).
   Extraction + Tokens drop <900px (priority 3).
   Language + RejectionReason drop <1100px (priority 4).
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 599.98px) {
    [b-xy3my6ktpe] th[data-priority="2"],
    [b-xy3my6ktpe] td[data-priority="2"],
    [b-xy3my6ktpe] th[data-priority="3"],
    [b-xy3my6ktpe] td[data-priority="3"],
    [b-xy3my6ktpe] th[data-priority="4"],
    [b-xy3my6ktpe] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 600px) and (max-width: 899.98px) {
    [b-xy3my6ktpe] th[data-priority="3"],
    [b-xy3my6ktpe] td[data-priority="3"],
    [b-xy3my6ktpe] th[data-priority="4"],
    [b-xy3my6ktpe] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 900px) and (max-width: 1099.98px) {
    [b-xy3my6ktpe] th[data-priority="4"],
    [b-xy3my6ktpe] td[data-priority="4"] {
        display: none;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header h1[b-xy3my6ktpe] {
        font-size: 1.3rem;
    }

    [b-xy3my6ktpe] .table {
        font-size: var(--text-xs);
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-xy3my6ktpe] {
        font-size: 1.15rem;
    }

    .card-header[b-xy3my6ktpe] {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .card-body[b-xy3my6ktpe] {
        padding: var(--spacing-md);
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-xy3my6ktpe],
[data-theme="dark"] .records-header h5[b-xy3my6ktpe],
[data-theme="dark"] .card-title[b-xy3my6ktpe],
[data-theme="dark"] .card-header strong[b-xy3my6ktpe] {
    color: var(--color-primary);
}

[data-theme="dark"] .code-block[b-xy3my6ktpe] {
    background-color: var(--color-background);
    border-color: var(--color-border-light);
    color: var(--color-text);
}
/* /Components/Pages/Admin/DataRetention.razor.rz.scp.css */
/* ==========================================================================
   DataRetention (Admin) page — Lisbon Modern v1.1.5
   Clean-slate port. Each erasure section follows the same Preview → count
   → Erase shape, so the markup uses a shared `.retention-action-row`
   layout; the inline style="width:8rem" on each days input is replaced
   by a `.days-input` scoped class.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-9hvjhtvc9p] {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-9hvjhtvc9p] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-9hvjhtvc9p] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card[b-9hvjhtvc9p] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.card:hover[b-9hvjhtvc9p] {
    box-shadow: var(--elevation-2);
}

.card-header[b-9hvjhtvc9p] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-header h2[b-9hvjhtvc9p] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    margin-bottom: 0;
}

.card-body[b-9hvjhtvc9p] {
    padding: var(--spacing-lg);
}

/* ── Section description ────────────────────────────────────────────────── */
.retention-description[b-9hvjhtvc9p] {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
}

/* ── Erasure-action row (Preview button + count + Erase button) ─────────── */
.retention-action-row[b-9hvjhtvc9p] {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.days-input-field[b-9hvjhtvc9p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.days-input-field .form-label[b-9hvjhtvc9p] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.days-input[b-9hvjhtvc9p] {
    width: 8rem;
}

.retention-status[b-9hvjhtvc9p] {
    display: inline-flex;
    align-items: center;
    color: var(--color-text);
}

.retention-status-ok[b-9hvjhtvc9p] {
    color: var(--color-success);
}

.retention-cascade-note[b-9hvjhtvc9p] {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin-top: var(--space-2xs);
}

/* ── Cascade warning callout (Section D) ───────────────────────────────── */
.cascade-warning[b-9hvjhtvc9p] {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
}

/* ── In-card loading / empty ────────────────────────────────────────────── */
.inline-empty[b-9hvjhtvc9p] {
    padding: var(--spacing-md);
    color: var(--color-text-muted);
}

/* ── Audit table chrome ─────────────────────────────────────────────────── */
[b-9hvjhtvc9p] .table {
    font-size: var(--text-sm);
    margin-bottom: 0;
}

[b-9hvjhtvc9p] .table td {
    vertical-align: middle;
}

[b-9hvjhtvc9p] .table code {
    font-size: 0.8rem;
    color: var(--color-secondary);
    background: transparent;
}

/* ── Column priority hiding ──────────────────────────────────────────────
   ExecutedAt + RowsDeleted always show (priority 1).
   Section drops <600px (priority 2).
   Operator drops <900px (priority 3).
   Details drops <1100px (priority 4).
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 599.98px) {
    [b-9hvjhtvc9p] th[data-priority="2"],
    [b-9hvjhtvc9p] td[data-priority="2"],
    [b-9hvjhtvc9p] th[data-priority="3"],
    [b-9hvjhtvc9p] td[data-priority="3"],
    [b-9hvjhtvc9p] th[data-priority="4"],
    [b-9hvjhtvc9p] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 600px) and (max-width: 899.98px) {
    [b-9hvjhtvc9p] th[data-priority="3"],
    [b-9hvjhtvc9p] td[data-priority="3"],
    [b-9hvjhtvc9p] th[data-priority="4"],
    [b-9hvjhtvc9p] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 900px) and (max-width: 1099.98px) {
    [b-9hvjhtvc9p] th[data-priority="4"],
    [b-9hvjhtvc9p] td[data-priority="4"] {
        display: none;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header h1[b-9hvjhtvc9p] {
        font-size: 1.3rem;
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-9hvjhtvc9p] {
        font-size: 1.15rem;
    }

    .card-header[b-9hvjhtvc9p] {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .card-body[b-9hvjhtvc9p] {
        padding: var(--spacing-md);
    }

    .retention-action-row[b-9hvjhtvc9p] {
        flex-direction: column;
        align-items: stretch;
    }

    .retention-action-row .btn[b-9hvjhtvc9p] {
        width: 100%;
    }

    .days-input[b-9hvjhtvc9p] {
        width: 100%;
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-9hvjhtvc9p] {
    color: var(--color-primary);
}

[data-theme="dark"] .retention-status-ok[b-9hvjhtvc9p] {
    color: var(--color-success);
}
/* /Components/Pages/Admin/EmailProcessingLog.razor.rz.scp.css */
/* ==========================================================================
   EmailProcessingLog (Admin) page — Lisbon Modern v1.1.5
   Clean-slate port. Heavy admin observability page: filter card (6 fields),
   bulk-delete card (danger variant), main 7-col table with expandable
   detail row (~16 metadata fields + admin-review subpanel + 4 collapsible
   code blocks), and Bootstrap pagination chrome. .nav-tabs, .modal-*,
   pre.bg-light dark-mode all handled by the global per brief §6.3.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-5xx7s9ao25] {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-5xx7s9ao25] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-5xx7s9ao25] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card[b-5xx7s9ao25] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.card:hover[b-5xx7s9ao25] {
    box-shadow: var(--elevation-2);
}

.card-header[b-5xx7s9ao25] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-body[b-5xx7s9ao25] {
    padding: var(--spacing-lg);
}

/* ── Bulk-delete card (border-danger variant) ──────────────────────────── */
.bulk-delete-card[b-5xx7s9ao25] {
    border: 1px solid var(--color-danger);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
}

.bulk-delete-card .card-title[b-5xx7s9ao25] {
    color: var(--color-danger-dark);
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-sm);
}

.bulk-delete-card .card-help[b-5xx7s9ao25] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--spacing-md);
}

/* ── Filter / form auto-fit grid ────────────────────────────────────────── */
.filter-grid[b-5xx7s9ao25] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: var(--spacing-md);
    align-items: end;
}

.filter-field[b-5xx7s9ao25] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.filter-field .form-label[b-5xx7s9ao25] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.filter-field .form-control[b-5xx7s9ao25],
.filter-field .form-select[b-5xx7s9ao25] {
    width: 100%;
}

.filter-action[b-5xx7s9ao25] {
    display: flex;
    align-items: flex-end;
}

.filter-action .btn[b-5xx7s9ao25] {
    width: 100%;
    height: 2.375rem;
}

/* ── Inline messages / empty states ────────────────────────────────────── */
.loading-row[b-5xx7s9ao25] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-muted);
    margin: var(--spacing-lg) 0;
}

/* ── Table chrome ───────────────────────────────────────────────────────── */
[b-5xx7s9ao25] .table {
    font-size: var(--text-sm);
}

[b-5xx7s9ao25] .table th {
    color: var(--color-text-muted);
    font-weight: var(--font-semibold);
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}

[b-5xx7s9ao25] .table td {
    vertical-align: middle;
}

[b-5xx7s9ao25] .table tr.expandable-row {
    cursor: pointer;
}

/* Truncate-cell helpers (replace inline style="max-width:Xpx"). */
.truncate-md[b-5xx7s9ao25] { max-width: 200px; }
.truncate-lg[b-5xx7s9ao25] { max-width: 300px; }
[b-5xx7s9ao25] .table .truncate-md,
[b-5xx7s9ao25] .table .truncate-lg {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Column priority hiding (main 7-col table) ──────────────────────────
   From + Subject + Status + Actions always show (priority 1).
   Received drops <600px (priority 2).
   Classification drops <900px (priority 3).
   MappingStatus drops <1100px (priority 4).
   The colspan="7" on the expandable detail row is correct: hidden cells
   collapse to zero width but still occupy a column slot.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 599.98px) {
    [b-5xx7s9ao25] th[data-priority="2"],
    [b-5xx7s9ao25] td[data-priority="2"],
    [b-5xx7s9ao25] th[data-priority="3"],
    [b-5xx7s9ao25] td[data-priority="3"],
    [b-5xx7s9ao25] th[data-priority="4"],
    [b-5xx7s9ao25] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 600px) and (max-width: 899.98px) {
    [b-5xx7s9ao25] th[data-priority="3"],
    [b-5xx7s9ao25] td[data-priority="3"],
    [b-5xx7s9ao25] th[data-priority="4"],
    [b-5xx7s9ao25] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 900px) and (max-width: 1099.98px) {
    [b-5xx7s9ao25] th[data-priority="4"],
    [b-5xx7s9ao25] td[data-priority="4"] {
        display: none;
    }
}

/* ── Detail row (expandable td colspan="7" pane) ───────────────────────── */
[b-5xx7s9ao25] .detail-row td {
    padding: 0 !important;
    border-top: none;
}

.detail-pane[b-5xx7s9ao25] {
    padding: var(--spacing-md);
    background-color: var(--color-surface-alt);
    border-top: 2px solid var(--color-primary);
}

.detail-meta-grid[b-5xx7s9ao25] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--spacing-sm);
    color: var(--color-text);
    font-size: var(--text-sm);
}

.detail-meta-grid strong[b-5xx7s9ao25] {
    color: var(--color-text-muted);
    font-weight: var(--font-semibold);
    margin-right: var(--space-2xs);
}

/* Span the entire grid (subject row, full-width inputs). */
.detail-meta-grid-full[b-5xx7s9ao25] {
    grid-column: 1 / -1;
}

/* Compact id / code display in detail meta. */
.detail-id-text[b-5xx7s9ao25] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* Unmapped-owner hint alert spans the grid. */
.detail-owner-hint[b-5xx7s9ao25] {
    grid-column: 1 / -1;
    margin-top: var(--space-2xs);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Admin Review subpanel ──────────────────────────────────────────────── */
.admin-review-panel[b-5xx7s9ao25] {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    background: var(--color-background);
}

.admin-review-panel > strong[b-5xx7s9ao25] {
    color: var(--color-text);
}

.admin-review-confirmed-grid[b-5xx7s9ao25] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: var(--spacing-md);
    margin-top: var(--space-2xs);
}

.admin-review-confirmed-grid small[b-5xx7s9ao25] {
    color: var(--color-text-muted);
}

.admin-review-actions[b-5xx7s9ao25] {
    margin-top: var(--space-2xs);
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.mark-misclassified-form[b-5xx7s9ao25] {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.mark-misclassified-grid[b-5xx7s9ao25] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--spacing-sm);
}

.mark-misclassified-field[b-5xx7s9ao25] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.mark-misclassified-field .form-label[b-5xx7s9ao25] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.mark-misclassified-actions[b-5xx7s9ao25] {
    margin-top: var(--spacing-sm);
    display: flex;
    gap: var(--spacing-sm);
}

/* ── Code blocks (parsed-booking JSON, parse-error, html-body, text-body,
   raw-headers) ──────────────────────────────────────────────────────────
   Replaces the 4 inline-styled `<pre class="mt-1 p-2 bg-white border
   rounded" style="...max-height:Xpx; overflow-y:auto; white-space:pre-
   wrap; word-break:break-word; font-size:0.85rem;">` instances. */
.code-block-section[b-5xx7s9ao25] {
    margin-top: var(--spacing-md);
}

.code-block-section > strong[b-5xx7s9ao25] {
    color: var(--color-text);
    display: block;
    margin-bottom: var(--space-2xs);
}

.code-block-section > strong.text-danger[b-5xx7s9ao25] {
    color: var(--color-danger);
}

.code-block[b-5xx7s9ao25] {
    background-color: var(--color-background);
    color: var(--color-text);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: auto;
    margin: 0;
}

.code-block-md[b-5xx7s9ao25] { max-height: 200px; }
.code-block-lg[b-5xx7s9ao25] { max-height: 300px; }
.code-block-error[b-5xx7s9ao25] {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

/* ── Pagination footer ──────────────────────────────────────────────────── */
.pagination-row[b-5xx7s9ao25] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-md);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.page-size-control[b-5xx7s9ao25] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.page-size-control .form-label[b-5xx7s9ao25] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: 0;
}

.page-size-control .form-select[b-5xx7s9ao25] {
    width: auto;
}

.pagination-summary[b-5xx7s9ao25] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header h1[b-5xx7s9ao25] {
        font-size: 1.3rem;
    }

    [b-5xx7s9ao25] .table {
        font-size: var(--text-xs);
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-5xx7s9ao25] {
        font-size: 1.15rem;
    }

    .card-header[b-5xx7s9ao25] {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .card-body[b-5xx7s9ao25] {
        padding: var(--spacing-md);
    }

    .pagination-row[b-5xx7s9ao25] {
        justify-content: center;
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-5xx7s9ao25] {
    color: var(--color-primary);
}

[data-theme="dark"] .bulk-delete-card[b-5xx7s9ao25] {
    border-color: var(--color-danger);
}

[data-theme="dark"] .bulk-delete-card .card-title[b-5xx7s9ao25] {
    color: var(--color-danger-dark);
}

[data-theme="dark"] .detail-pane[b-5xx7s9ao25] {
    background-color: var(--color-background);
    border-top-color: var(--color-secondary);
}

[data-theme="dark"] .admin-review-panel[b-5xx7s9ao25] {
    background-color: var(--color-surface);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .mark-misclassified-form[b-5xx7s9ao25] {
    background-color: var(--color-background);
}

[data-theme="dark"] .code-block[b-5xx7s9ao25] {
    background-color: var(--color-surface);
    border-color: var(--color-border-light);
    color: var(--color-text);
}
/* /Components/Pages/Admin/IdDocuments.razor.rz.scp.css */
/* ==========================================================================
   IdDocuments (Admin) page — Lisbon Modern v1.1.5
   Port pass: replace legacy --shadow-* / --transition-* / hardcoded hex
   with v1.1.5 elevation / motion tokens. Add column priority hiding on
   the photos table; page-specific dark mode for the detail-row tint
   and photo close button.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-j4500aejn4] {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-j4500aejn4] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-j4500aejn4] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Card chrome ────────────────────────────────────────────────────────── */
.card[b-j4500aejn4] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.card:hover[b-j4500aejn4] {
    box-shadow: var(--elevation-2);
}

.card-header[b-j4500aejn4] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-header h2[b-j4500aejn4] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    font-size: 1.05rem;
    margin-bottom: 0;
}

/* ── Loading row ────────────────────────────────────────────────────────── */
.loading-row[b-j4500aejn4] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-muted);
    margin: var(--spacing-lg) 0;
}

/* ── Table chrome ───────────────────────────────────────────────────────── */
[b-j4500aejn4] .table td {
    padding: var(--spacing-md);
    vertical-align: middle;
}

.photo-row[b-j4500aejn4] {
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.photo-row:hover[b-j4500aejn4] {
    background-color: var(--color-surface-alt);
}

/* ── Column priority hiding ──────────────────────────────────────────────
   Name + Actions always visible (priority 1).
   Document drops <600px (priority 2).
   Property drops <900px (priority 3).
   Date drops <1100px (priority 4).
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 599.98px) {
    [b-j4500aejn4] th[data-priority="2"],
    [b-j4500aejn4] td[data-priority="2"],
    [b-j4500aejn4] th[data-priority="3"],
    [b-j4500aejn4] td[data-priority="3"],
    [b-j4500aejn4] th[data-priority="4"],
    [b-j4500aejn4] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 600px) and (max-width: 899.98px) {
    [b-j4500aejn4] th[data-priority="3"],
    [b-j4500aejn4] td[data-priority="3"],
    [b-j4500aejn4] th[data-priority="4"],
    [b-j4500aejn4] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 900px) and (max-width: 1099.98px) {
    [b-j4500aejn4] th[data-priority="4"],
    [b-j4500aejn4] td[data-priority="4"] {
        display: none;
    }
}

/* ── Detail row (photos + meta) ─────────────────────────────────────────── */
.photo-detail-row td[b-j4500aejn4] {
    background-color: var(--color-surface-alt);
}

.photo-detail-pane[b-j4500aejn4] {
    padding: var(--spacing-md);
}

.photo-detail-meta[b-j4500aejn4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--spacing-md);
    color: var(--color-text);
}

.photo-detail-meta strong[b-j4500aejn4] {
    color: var(--color-text-muted);
    font-weight: var(--font-semibold);
    margin-right: var(--space-2xs);
}

/* ── Document photo thumbnail ──────────────────────────────────────────── */
.doc-photo-thumbnail[b-j4500aejn4] {
    max-width: 14rem;
    max-height: 10rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    object-fit: contain;
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.doc-photo-thumbnail:hover[b-j4500aejn4] {
    opacity: 0.85;
    box-shadow: var(--elevation-2);
}

/* ── Dual document photos container ────────────────────────────────────── */
.doc-photos-container[b-j4500aejn4] {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    margin-top: var(--spacing-sm);
}

.doc-photo-item[b-j4500aejn4] {
    flex: 1 1 12rem;
    max-width: 18rem;
    text-align: center;
}

.doc-photo-label-sm[b-j4500aejn4] {
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2xs);
}

/* ── Fullscreen photo overlay ───────────────────────────────────────────── */
.doc-photo-overlay[b-j4500aejn4] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.doc-photo-modal[b-j4500aejn4] {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
}

.doc-photo-fullsize[b-j4500aejn4] {
    max-width: 95vw;
    max-height: 90vh;
    border-radius: var(--radius-md);
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.5);
    object-fit: contain;
}

.doc-photo-close[b-j4500aejn4] {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: none;
    background-color: var(--color-background);
    color: var(--color-text);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--elevation-2);
    z-index: 1;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.doc-photo-close:hover[b-j4500aejn4] {
    background-color: var(--color-surface-alt);
}

/* ── Action button border (no longer hardcoded #343a40) ─────────────────── */
[b-j4500aejn4] .btn-group .btn {
    border-color: var(--color-border);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .table-responsive[b-j4500aejn4] {
        font-size: var(--text-sm);
    }

    .btn-group-sm .btn[b-j4500aejn4] {
        padding: 0.25rem 0.4rem;
        font-size: var(--text-xs);
    }

    .page-header h1[b-j4500aejn4] {
        font-size: 1.3rem;
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-j4500aejn4] {
        font-size: 1.15rem;
    }

    [b-j4500aejn4] .table td {
        padding: var(--spacing-sm);
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-j4500aejn4] {
    color: var(--color-primary);
}

[data-theme="dark"] .photo-detail-row td[b-j4500aejn4] {
    background-color: var(--color-background);
}

[data-theme="dark"] .doc-photo-close[b-j4500aejn4] {
    background-color: var(--color-surface);
    color: var(--color-text);
}

[data-theme="dark"] .doc-photo-close:hover[b-j4500aejn4] {
    background-color: var(--color-surface-alt);
}
/* /Components/Pages/Admin/Newsletter/Campaigns.razor.rz.scp.css */
/* ==========================================================================
   Newsletter Campaigns (Admin) — Lisbon Modern v1.1.5
   Clean-slate port: tokens, collapsible card-header, filter-grid for the
   create-form, scrollable target-list picker, column priority on the
   campaigns table, pagination footer, dark-mode for custom classes.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-tr17q2z1bm] {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-tr17q2z1bm] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-tr17q2z1bm] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card[b-tr17q2z1bm] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.card:hover[b-tr17q2z1bm] {
    box-shadow: var(--elevation-2);
}

.card-header[b-tr17q2z1bm] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-header h2[b-tr17q2z1bm] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    margin-bottom: 0;
}

.card-body[b-tr17q2z1bm] {
    padding: var(--spacing-lg);
}

.card-footer[b-tr17q2z1bm] {
    background-color: var(--color-surface-alt);
    border-top: 1px solid var(--color-border-light);
    padding: var(--spacing-sm) var(--spacing-lg);
}

/* ── Collapsible card header (Create Campaign) ──────────────────────────── */
.collapse-toggle[b-tr17q2z1bm] {
    background: none;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.collapse-toggle:hover[b-tr17q2z1bm] {
    background-color: var(--color-background);
    color: var(--color-text);
}

/* ── Filter / form auto-fit grid (create campaign) ──────────────────────── */
.filter-grid[b-tr17q2z1bm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--spacing-md);
    align-items: start;
}

.filter-field[b-tr17q2z1bm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.filter-field .form-label[b-tr17q2z1bm] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.filter-field .form-control[b-tr17q2z1bm],
.filter-field .form-select[b-tr17q2z1bm] {
    width: 100%;
}

/* Full-width row inside the same grid (Body textarea). */
.filter-field-full[b-tr17q2z1bm] {
    grid-column: 1 / -1;
}

/* ── Target-list checkbox picker ────────────────────────────────────────── */
.target-lists-picker[b-tr17q2z1bm] {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    max-height: 7.5rem;
    overflow-y: auto;
    background: var(--color-background);
}

.target-lists-picker .form-check[b-tr17q2z1bm] {
    margin-bottom: var(--space-2xs);
}

.target-lists-picker .form-check:last-child[b-tr17q2z1bm] {
    margin-bottom: 0;
}

/* ── Campaign body textarea ────────────────────────────────────────────── */
.campaign-body[b-tr17q2z1bm] {
    min-height: 12rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
}

.body-hint[b-tr17q2z1bm] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin-top: var(--space-2xs);
}

/* ── Form action row ─────────────────────────────────────────────────────── */
.form-actions[b-tr17q2z1bm] {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* ── In-card loading / empty ────────────────────────────────────────────── */
.inline-loading[b-tr17q2z1bm],
.inline-empty[b-tr17q2z1bm] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    color: var(--color-text-muted);
}

/* ── Table chrome ───────────────────────────────────────────────────────── */
[b-tr17q2z1bm] .table {
    font-size: var(--text-sm);
    margin-bottom: 0;
}

[b-tr17q2z1bm] .table th {
    color: var(--color-text-muted);
    font-weight: var(--font-semibold);
    border-bottom: 2px solid var(--color-border);
}

[b-tr17q2z1bm] .table td {
    vertical-align: middle;
}

.progress-placeholder[b-tr17q2z1bm] {
    color: var(--color-text-muted);
}

/* ── Column priority hiding ──────────────────────────────────────────────
   Name + Status + Actions always show (priority 1).
   Subject drops <600px (priority 2).
   Progress drops <900px (priority 3).
   Created drops <1100px (priority 4).
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 599.98px) {
    [b-tr17q2z1bm] th[data-priority="2"],
    [b-tr17q2z1bm] td[data-priority="2"],
    [b-tr17q2z1bm] th[data-priority="3"],
    [b-tr17q2z1bm] td[data-priority="3"],
    [b-tr17q2z1bm] th[data-priority="4"],
    [b-tr17q2z1bm] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 600px) and (max-width: 899.98px) {
    [b-tr17q2z1bm] th[data-priority="3"],
    [b-tr17q2z1bm] td[data-priority="3"],
    [b-tr17q2z1bm] th[data-priority="4"],
    [b-tr17q2z1bm] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 900px) and (max-width: 1099.98px) {
    [b-tr17q2z1bm] th[data-priority="4"],
    [b-tr17q2z1bm] td[data-priority="4"] {
        display: none;
    }
}

/* ── Pagination footer ──────────────────────────────────────────────────── */
.pagination-footer[b-tr17q2z1bm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
}

.pagination-info[b-tr17q2z1bm] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header h1[b-tr17q2z1bm] {
        font-size: 1.3rem;
    }

    [b-tr17q2z1bm] .table {
        font-size: var(--text-xs);
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-tr17q2z1bm] {
        font-size: 1.15rem;
    }

    .card-header[b-tr17q2z1bm] {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .card-body[b-tr17q2z1bm] {
        padding: var(--spacing-md);
    }

    .form-actions[b-tr17q2z1bm] {
        flex-direction: column;
    }

    .form-actions .btn[b-tr17q2z1bm] {
        width: 100%;
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-tr17q2z1bm] {
    color: var(--color-primary);
}

[data-theme="dark"] .target-lists-picker[b-tr17q2z1bm] {
    background: var(--color-background);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .collapse-toggle[b-tr17q2z1bm] {
    border-color: var(--color-border-light);
    color: var(--color-text-muted);
}

[data-theme="dark"] .collapse-toggle:hover[b-tr17q2z1bm] {
    background-color: var(--color-background);
    color: var(--color-text);
}
/* /Components/Pages/Admin/Newsletter/Dashboard.razor.rz.scp.css */
/* ==========================================================================
   Newsletter Dashboard (Admin) — Lisbon Modern v1.1.5
   Clean-slate port: tokens, auto-fit KPI grid, page-specific dark-mode.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-haombwysog] {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-haombwysog] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-haombwysog] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card[b-haombwysog] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.card:hover[b-haombwysog] {
    box-shadow: var(--elevation-2);
}

.card-header[b-haombwysog] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-header h2[b-haombwysog] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    margin-bottom: 0;
}

.card-body[b-haombwysog] {
    padding: var(--spacing-lg);
}

/* ── KPI grid ───────────────────────────────────────────────────────────── */
.kpi-grid[b-haombwysog] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: var(--spacing-md);
}

.kpi-card[b-haombwysog] {
    text-align: center;
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: var(--spacing-md);
    transition: box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

.kpi-card:hover[b-haombwysog] {
    box-shadow: var(--elevation-3);
    transform: translateY(-1px);
}

.kpi-value[b-haombwysog] {
    font-size: 1.8rem;
    font-weight: var(--font-bold);
    line-height: 1.1;
    color: var(--color-primary);
}

.kpi-value.kpi-value-success[b-haombwysog] { color: var(--color-success-dark); }
.kpi-value.kpi-value-info[b-haombwysog]    { color: var(--color-secondary); }
.kpi-value.kpi-value-muted[b-haombwysog]   { color: var(--color-text-muted); }

.kpi-label[b-haombwysog] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-top: var(--space-2xs);
}

/* ── Breakdown row ──────────────────────────────────────────────────────── */
.breakdown-grid[b-haombwysog] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--spacing-md);
    color: var(--color-text);
}

.breakdown-grid strong[b-haombwysog] {
    color: var(--color-text-muted);
    font-weight: var(--font-semibold);
    margin-right: var(--space-2xs);
}

.breakdown-grid .value-success[b-haombwysog] { color: var(--color-success); font-weight: var(--font-semibold); }
.breakdown-grid .value-warning[b-haombwysog] { color: var(--color-warning); font-weight: var(--font-semibold); }
.breakdown-grid .value-danger[b-haombwysog]  { color: var(--color-danger);  font-weight: var(--font-semibold); }

.breakdown-totals[b-haombwysog] {
    margin-top: var(--spacing-md);
    color: var(--color-text);
}

.breakdown-totals strong[b-haombwysog] {
    color: var(--color-text-muted);
    font-weight: var(--font-semibold);
    margin-right: var(--space-2xs);
}

/* ── Quick links button row ─────────────────────────────────────────────── */
.quick-links[b-haombwysog] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* ── Loading row ────────────────────────────────────────────────────────── */
.loading-row[b-haombwysog] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-muted);
    margin: var(--spacing-lg) 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header h1[b-haombwysog] {
        font-size: 1.3rem;
    }

    .kpi-value[b-haombwysog] {
        font-size: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-haombwysog] {
        font-size: 1.15rem;
    }

    .card-header[b-haombwysog] {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .card-body[b-haombwysog] {
        padding: var(--spacing-md);
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-haombwysog] {
    color: var(--color-primary);
}

[data-theme="dark"] .kpi-value.kpi-value-success[b-haombwysog] { color: var(--color-success-dark); }
[data-theme="dark"] .kpi-value.kpi-value-info[b-haombwysog]    { color: var(--color-secondary); }
/* /Components/Pages/Admin/Newsletter/Lists.razor.rz.scp.css */
/* ==========================================================================
   Newsletter Lists (Admin) — Lisbon Modern v1.1.5
   Clean-slate port: tokens, filter-grid for the create-form, column
   priority on the lists table, page-specific dark-mode.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-zjq4b9wy92] {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-zjq4b9wy92] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-zjq4b9wy92] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card[b-zjq4b9wy92] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.card:hover[b-zjq4b9wy92] {
    box-shadow: var(--elevation-2);
}

.card-header[b-zjq4b9wy92] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-header h2[b-zjq4b9wy92] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    margin-bottom: 0;
}

.card-body[b-zjq4b9wy92] {
    padding: var(--spacing-lg);
}

/* ── Filter / form auto-fit grid (create-list form) ─────────────────────── */
.filter-grid[b-zjq4b9wy92] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--spacing-md);
    align-items: end;
}

.filter-field[b-zjq4b9wy92] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.filter-field .form-label[b-zjq4b9wy92] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.filter-field .form-control[b-zjq4b9wy92],
.filter-field .form-select[b-zjq4b9wy92] {
    width: 100%;
}

.filter-action[b-zjq4b9wy92] {
    display: flex;
    align-items: flex-end;
}

.filter-action .btn[b-zjq4b9wy92] {
    height: 2.375rem;
}

/* ── Loading / empty row inside a .card-body p-0 ──────────────────────── */
.inline-loading[b-zjq4b9wy92],
.inline-empty[b-zjq4b9wy92] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    color: var(--color-text-muted);
}

/* ── Table chrome ───────────────────────────────────────────────────────── */
[b-zjq4b9wy92] .table {
    font-size: var(--text-sm);
    margin-bottom: 0;
}

[b-zjq4b9wy92] .table th {
    color: var(--color-text-muted);
    font-weight: var(--font-semibold);
    border-bottom: 2px solid var(--color-border);
}

[b-zjq4b9wy92] .table td {
    vertical-align: middle;
}

/* ── Column priority hiding ──────────────────────────────────────────────
   Name + Actions always show (priority 1).
   Type drops <600px (priority 2).
   Subscribers drops <900px (priority 3).
   ID + Created drop <1100px (priority 4) — least important.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 599.98px) {
    [b-zjq4b9wy92] th[data-priority="2"],
    [b-zjq4b9wy92] td[data-priority="2"],
    [b-zjq4b9wy92] th[data-priority="3"],
    [b-zjq4b9wy92] td[data-priority="3"],
    [b-zjq4b9wy92] th[data-priority="4"],
    [b-zjq4b9wy92] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 600px) and (max-width: 899.98px) {
    [b-zjq4b9wy92] th[data-priority="3"],
    [b-zjq4b9wy92] td[data-priority="3"],
    [b-zjq4b9wy92] th[data-priority="4"],
    [b-zjq4b9wy92] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 900px) and (max-width: 1099.98px) {
    [b-zjq4b9wy92] th[data-priority="4"],
    [b-zjq4b9wy92] td[data-priority="4"] {
        display: none;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header h1[b-zjq4b9wy92] {
        font-size: 1.3rem;
    }

    [b-zjq4b9wy92] .table {
        font-size: var(--text-xs);
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-zjq4b9wy92] {
        font-size: 1.15rem;
    }

    .card-header[b-zjq4b9wy92] {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .card-body[b-zjq4b9wy92] {
        padding: var(--spacing-md);
    }

    .filter-action .btn[b-zjq4b9wy92] {
        width: 100%;
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-zjq4b9wy92] {
    color: var(--color-primary);
}
/* /Components/Pages/Admin/Newsletter/Subscribers.razor.rz.scp.css */
/* ==========================================================================
   Newsletter Subscribers (Admin) — Lisbon Modern v1.1.5
   Clean-slate port: tokens, search-bar flex layout (search input + search
   button + right-anchored Add toggle), inline add-form panel, badge-cluster
   for the Lists column, column priority on the table, dark-mode for
   page-specific custom classes.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-hx0qiylm6e] {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-hx0qiylm6e] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-hx0qiylm6e] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card[b-hx0qiylm6e] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.card:hover[b-hx0qiylm6e] {
    box-shadow: var(--elevation-2);
}

.card-header[b-hx0qiylm6e] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-header h2[b-hx0qiylm6e] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    margin-bottom: 0;
}

.card-body[b-hx0qiylm6e] {
    padding: var(--spacing-lg);
}

.card-footer[b-hx0qiylm6e] {
    background-color: var(--color-surface-alt);
    border-top: 1px solid var(--color-border-light);
    padding: var(--spacing-sm) var(--spacing-lg);
}

/* ── Search bar (input + button on left, Add button on right) ─────────── */
.search-bar[b-hx0qiylm6e] {
    display: flex;
    gap: var(--spacing-md);
    align-items: end;
    flex-wrap: wrap;
}

.search-field[b-hx0qiylm6e] {
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.search-field .form-label[b-hx0qiylm6e] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.search-bar .btn[b-hx0qiylm6e] {
    height: 2.375rem;
}

/* Push the Add button to the right edge of the row at md+ widths. */
.search-bar .add-toggle[b-hx0qiylm6e] {
    margin-left: auto;
}

/* ── Inline add-form panel (revealed when "Add subscriber" toggled) ────── */
.add-form-panel[b-hx0qiylm6e] {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-background);
}

.add-form-grid[b-hx0qiylm6e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--spacing-md);
    align-items: end;
}

.add-form-field[b-hx0qiylm6e] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.add-form-field .form-label[b-hx0qiylm6e] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.add-form-actions[b-hx0qiylm6e] {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-end;
}

/* ── In-card loading / empty ────────────────────────────────────────────── */
.inline-loading[b-hx0qiylm6e],
.inline-empty[b-hx0qiylm6e] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    color: var(--color-text-muted);
}

/* ── Table chrome ───────────────────────────────────────────────────────── */
[b-hx0qiylm6e] .table {
    font-size: var(--text-sm);
    margin-bottom: 0;
}

[b-hx0qiylm6e] .table th {
    color: var(--color-text-muted);
    font-weight: var(--font-semibold);
    border-bottom: 2px solid var(--color-border);
}

[b-hx0qiylm6e] .table td {
    vertical-align: middle;
}

/* ── Lists-column badge cluster (multiple list memberships) ────────────── */
.list-badges[b-hx0qiylm6e] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
}

/* ── Column priority hiding ──────────────────────────────────────────────
   Email + Status + Actions always show (priority 1).
   Name drops <600px (priority 2).
   Lists drops <900px (priority 3).
   Created drops <1100px (priority 4).
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 599.98px) {
    [b-hx0qiylm6e] th[data-priority="2"],
    [b-hx0qiylm6e] td[data-priority="2"],
    [b-hx0qiylm6e] th[data-priority="3"],
    [b-hx0qiylm6e] td[data-priority="3"],
    [b-hx0qiylm6e] th[data-priority="4"],
    [b-hx0qiylm6e] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 600px) and (max-width: 899.98px) {
    [b-hx0qiylm6e] th[data-priority="3"],
    [b-hx0qiylm6e] td[data-priority="3"],
    [b-hx0qiylm6e] th[data-priority="4"],
    [b-hx0qiylm6e] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 900px) and (max-width: 1099.98px) {
    [b-hx0qiylm6e] th[data-priority="4"],
    [b-hx0qiylm6e] td[data-priority="4"] {
        display: none;
    }
}

/* ── Pagination footer ──────────────────────────────────────────────────── */
.pagination-footer[b-hx0qiylm6e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
}

.pagination-info[b-hx0qiylm6e] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header h1[b-hx0qiylm6e] {
        font-size: 1.3rem;
    }

    [b-hx0qiylm6e] .table {
        font-size: var(--text-xs);
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-hx0qiylm6e] {
        font-size: 1.15rem;
    }

    .card-header[b-hx0qiylm6e] {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .card-body[b-hx0qiylm6e] {
        padding: var(--spacing-md);
    }

    .search-bar[b-hx0qiylm6e] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-bar .btn[b-hx0qiylm6e],
    .search-bar .add-toggle[b-hx0qiylm6e] {
        margin-left: 0;
        width: 100%;
    }

    .add-form-actions[b-hx0qiylm6e] {
        flex-direction: column;
    }

    .add-form-actions .btn[b-hx0qiylm6e] {
        width: 100%;
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-hx0qiylm6e] {
    color: var(--color-primary);
}

[data-theme="dark"] .add-form-panel[b-hx0qiylm6e] {
    background: var(--color-background);
    border-color: var(--color-border-light);
}
/* /Components/Pages/Admin/OtaEmailTemplates.razor.rz.scp.css */
/* ==========================================================================
   OtaEmailTemplates (Admin) page — Lisbon Modern v1.1.5
   Clean-slate port: tokens, filter-grid for the platform/search/add row,
   column priority on the 7-col mappings table, dark-mode for page-specific
   classes. Edit modal uses Bootstrap .modal-* which the global handles.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-acpmbzjs7s] {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-acpmbzjs7s] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-acpmbzjs7s] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card[b-acpmbzjs7s] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.card:hover[b-acpmbzjs7s] {
    box-shadow: var(--elevation-2);
}

.card-header[b-acpmbzjs7s] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-header h2[b-acpmbzjs7s] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    margin-bottom: 0;
}

.card-body[b-acpmbzjs7s] {
    padding: var(--spacing-lg);
}

/* ── Filter / form auto-fit grid ────────────────────────────────────────── */
.filter-grid[b-acpmbzjs7s] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--spacing-md);
    align-items: end;
}

.filter-field[b-acpmbzjs7s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.filter-field .form-label[b-acpmbzjs7s] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.filter-field .form-control[b-acpmbzjs7s],
.filter-field .form-select[b-acpmbzjs7s] {
    width: 100%;
}

.filter-action[b-acpmbzjs7s] {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.filter-action .btn[b-acpmbzjs7s] {
    height: 2.375rem;
}

/* ── Loading row ────────────────────────────────────────────────────────── */
.loading-row[b-acpmbzjs7s] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-muted);
    margin: var(--spacing-lg) 0;
}

/* ── Table chrome ───────────────────────────────────────────────────────── */
[b-acpmbzjs7s] .table {
    font-size: var(--text-sm);
    margin-bottom: 0;
}

[b-acpmbzjs7s] .table td {
    vertical-align: middle;
}

/* ── Modal form grid (Edit / Add) ───────────────────────────────────────── */
.modal-form-grid[b-acpmbzjs7s] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--spacing-md);
    align-items: end;
}

.modal-form-field[b-acpmbzjs7s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.modal-form-field .form-label[b-acpmbzjs7s] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.modal-form-field-full[b-acpmbzjs7s] {
    grid-column: 1 / -1;
}

.modal-form-check[b-acpmbzjs7s] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    margin: 0;
}

/* ── Column priority hiding ──────────────────────────────────────────────
   Platform + X-Template + Actions always show (priority 1).
   Classification + IsHost drop <600px (priority 2).
   Notes drops <900px (priority 3).
   Updated drops <1100px (priority 4).
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 599.98px) {
    [b-acpmbzjs7s] th[data-priority="2"],
    [b-acpmbzjs7s] td[data-priority="2"],
    [b-acpmbzjs7s] th[data-priority="3"],
    [b-acpmbzjs7s] td[data-priority="3"],
    [b-acpmbzjs7s] th[data-priority="4"],
    [b-acpmbzjs7s] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 600px) and (max-width: 899.98px) {
    [b-acpmbzjs7s] th[data-priority="3"],
    [b-acpmbzjs7s] td[data-priority="3"],
    [b-acpmbzjs7s] th[data-priority="4"],
    [b-acpmbzjs7s] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 900px) and (max-width: 1099.98px) {
    [b-acpmbzjs7s] th[data-priority="4"],
    [b-acpmbzjs7s] td[data-priority="4"] {
        display: none;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header h1[b-acpmbzjs7s] {
        font-size: 1.3rem;
    }

    [b-acpmbzjs7s] .table {
        font-size: var(--text-xs);
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-acpmbzjs7s] {
        font-size: 1.15rem;
    }

    .card-header[b-acpmbzjs7s] {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .card-body[b-acpmbzjs7s] {
        padding: var(--spacing-md);
    }

    .filter-action[b-acpmbzjs7s] {
        justify-content: stretch;
    }

    .filter-action .btn[b-acpmbzjs7s] {
        width: 100%;
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-acpmbzjs7s] {
    color: var(--color-primary);
}
/* /Components/Pages/Admin/PaymentCodes.razor.rz.scp.css */
/* ==========================================================================
   PaymentCodes (Admin) page — Lisbon Modern v1.1.5
   Clean-slate port: tokens, column priority on the wide 9-col table,
   page-specific dark mode. Cross-cutting Bootstrap chrome handled by
   wwwroot/css/bootstrap-dark.css.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-eo69kj7d0w] {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-eo69kj7d0w] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-eo69kj7d0w] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card[b-eo69kj7d0w] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.card:hover[b-eo69kj7d0w] {
    box-shadow: var(--elevation-2);
}

.card-header[b-eo69kj7d0w] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-header h2[b-eo69kj7d0w] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    margin-bottom: 0;
}

/* ── Loading row ────────────────────────────────────────────────────────── */
.loading-row[b-eo69kj7d0w] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-muted);
    margin: var(--spacing-lg) 0;
}

/* ── Table chrome ───────────────────────────────────────────────────────── */
[b-eo69kj7d0w] .table {
    font-size: var(--text-sm);
}

[b-eo69kj7d0w] .table td {
    vertical-align: middle;
}

/* Code column: monospace, slightly tighter. */
[b-eo69kj7d0w] .font-monospace {
    font-size: 0.85rem;
}

/* ── Column priority hiding ──────────────────────────────────────────────
   Code + Status + Actions always visible (priority 1).
   User + Amount drop <600px (priority 2).
   Email + Plan drop <900px (priority 3).
   Created + Expires drop <1200px (priority 4).
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 599.98px) {
    [b-eo69kj7d0w] th[data-priority="2"],
    [b-eo69kj7d0w] td[data-priority="2"],
    [b-eo69kj7d0w] th[data-priority="3"],
    [b-eo69kj7d0w] td[data-priority="3"],
    [b-eo69kj7d0w] th[data-priority="4"],
    [b-eo69kj7d0w] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 600px) and (max-width: 899.98px) {
    [b-eo69kj7d0w] th[data-priority="3"],
    [b-eo69kj7d0w] td[data-priority="3"],
    [b-eo69kj7d0w] th[data-priority="4"],
    [b-eo69kj7d0w] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 900px) and (max-width: 1199.98px) {
    [b-eo69kj7d0w] th[data-priority="4"],
    [b-eo69kj7d0w] td[data-priority="4"] {
        display: none;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header h1[b-eo69kj7d0w] {
        font-size: 1.3rem;
    }

    [b-eo69kj7d0w] .table {
        font-size: var(--text-xs);
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-eo69kj7d0w] {
        font-size: 1.15rem;
    }

    .card-header[b-eo69kj7d0w] {
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-eo69kj7d0w] {
    color: var(--color-primary);
}
/* /Components/Pages/Admin/Roadmap/AdminRoadmap.razor.rz.scp.css */
/* ==========================================================================
   AdminRoadmap page — Lisbon Modern v1.1.5
   Port pass: standardize page-header h1 weight/size, convert BottomSheet
   form's .row.g-3 .col-md-* into .roadmap-form-grid auto-fit, add dark-mode
   override for the page-header h1.
   The .page-header keeps its bespoke flex layout (button on the right) —
   this is intentionally different from the standardized .page-header
   used by other ports because this page has an inline primary action.
   ResponsiveTable + BottomSheet primitives handle the table chrome and
   editor sheet; their styles live in their own primitive stylesheets.
   ========================================================================== */

/* ── Page header (flex with action on the right) ────────────────────────── */
.page-header[b-dce5522h01] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

.page-header h1[b-dce5522h01] {
    margin: 0 0 var(--space-2xs);
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
}

.page-subtitle[b-dce5522h01] {
    color: var(--color-text-muted);
    margin: 0;
    font-size: var(--text-sm);
}

/* ── Admin filter row (status select + category select + published toggle) */
.admin-filter-row[b-dce5522h01] {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

.admin-filter-row .form-select[b-dce5522h01] {
    max-width: 220px;
}

.admin-filter-toggle[b-dce5522h01] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    cursor: pointer;
}

/* ── BottomSheet editor form ────────────────────────────────────────────── */
.roadmap-form[b-dce5522h01] {
    color: var(--color-text);
}

.roadmap-form .form-label[b-dce5522h01] {
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
    margin-bottom: var(--space-2xs);
}

.roadmap-form h5[b-dce5522h01] {
    color: var(--color-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

/* Replaces the .row.g-3 .col-md-3/6/12 patchwork with a single auto-fit
   grid. Each child .roadmap-form-field stacks label over control. */
.roadmap-form-grid[b-dce5522h01] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: var(--space-md);
    align-items: end;
}

.roadmap-form-field[b-dce5522h01] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.roadmap-form-field .form-control[b-dce5522h01],
.roadmap-form-field .form-select[b-dce5522h01] {
    width: 100%;
}

/* Span the entire grid (summary, description, full-width inputs). */
.roadmap-form-field-full[b-dce5522h01] {
    grid-column: 1 / -1;
}

/* Published checkbox sits on its own bottom-aligned line inside the grid. */
.roadmap-form-check[b-dce5522h01] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    margin: 0;
    color: var(--color-text);
}

.roadmap-form-actions[b-dce5522h01] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .page-header h1[b-dce5522h01] {
        font-size: 1.3rem;
    }

    .roadmap-form-actions[b-dce5522h01] {
        flex-direction: column-reverse;
    }

    .roadmap-form-actions .btn[b-dce5522h01] {
        width: 100%;
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-dce5522h01],
[data-theme="dark"] .roadmap-form h5[b-dce5522h01] {
    color: var(--color-primary);
}
/* /Components/Pages/Admin/Users.razor.rz.scp.css */
/* ==========================================================================
   Users (Admin) page — Lisbon Modern v1.1.5
   Existing scoped CSS replaced. Heavy admin page with 8-col users table
   (view-mode + edit-mode row branches), background-purges card, and a
   subscription-management modal. Column priority on the table; scoped
   chrome for the edit-row roles toggle + co-worker cap field; .modal-*
   dark-mode handled by the global per brief §6.3.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-vm5vckqb7u] {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-vm5vckqb7u] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-vm5vckqb7u] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card[b-vm5vckqb7u] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.card:hover[b-vm5vckqb7u] {
    box-shadow: var(--elevation-2);
}

.card-header[b-vm5vckqb7u] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h2[b-vm5vckqb7u],
.card-header h3[b-vm5vckqb7u] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    margin-bottom: 0;
}

.card-body[b-vm5vckqb7u] {
    padding: var(--spacing-lg);
}

/* ── Centred page-spinner ───────────────────────────────────────────────── */
.page-spinner[b-vm5vckqb7u] {
    display: flex;
    justify-content: center;
    padding: var(--spacing-2xl) 0;
}

/* ── Table chrome ───────────────────────────────────────────────────────── */
[b-vm5vckqb7u] .table {
    margin-bottom: 0;
}

[b-vm5vckqb7u] .table th {
    color: var(--color-text-muted);
    font-weight: var(--font-semibold);
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}

[b-vm5vckqb7u] .table td {
    vertical-align: middle;
}

[b-vm5vckqb7u] code {
    /* No colour here: the global bootstrap-contrast.css `code` rule is (0,1,2) and this
       scoped selector compiles to (0,1,1), so a colour declared here would never apply.
       The WCAG-AA colour lives in that file. */
    font-size: 0.8rem;
    background: transparent;
}

/* ── Roles edit-row chrome (Admin / User toggles + Max-Coworker field) ─── */
.roles-toggle-row[b-vm5vckqb7u] {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.coworker-cap-field[b-vm5vckqb7u] {
    margin-top: var(--space-2xs);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.coworker-cap-field .form-label[b-vm5vckqb7u] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.coworker-cap-field .form-control[b-vm5vckqb7u] {
    max-width: 5rem;
}

/* ── Subscription cell (view-mode badge + open-modal button cluster) ──── */
.sub-cell[b-vm5vckqb7u] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    flex-wrap: wrap;
}

.sub-cell small[b-vm5vckqb7u] {
    color: var(--color-text-muted);
}

/* ── Purge-in-progress inline label (per row) ──────────────────────────── */
.purge-in-progress[b-vm5vckqb7u] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--color-text-muted);
}

/* ── Background-purges card (the standalone alert-styled card below) ──── */
.purges-card[b-vm5vckqb7u] {
    border: 1px solid var(--color-warning);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    margin-top: var(--spacing-lg);
}

.purges-card .card-header[b-vm5vckqb7u] {
    background-color: color-mix(in srgb, var(--color-warning) 14%, transparent);
    border-bottom-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
}

/* ── Subscription modal body chrome ─────────────────────────────────────── */
.sub-modal-header[b-vm5vckqb7u] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.sub-modal-meta-grid[b-vm5vckqb7u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    gap: var(--spacing-md);
    color: var(--color-text);
}

.sub-modal-meta-grid small[b-vm5vckqb7u] {
    color: var(--color-text-muted);
}

.sub-modal-section[b-vm5vckqb7u] {
    margin-top: var(--spacing-md);
}

.sub-modal-section h3[b-vm5vckqb7u] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-sm);
}

.sub-modal-actions[b-vm5vckqb7u] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}

.sub-activate-row[b-vm5vckqb7u] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.sub-activate-row .form-select[b-vm5vckqb7u] {
    width: 9rem;
}

/* ── Column priority hiding ──────────────────────────────────────────────
   DisplayName + Email + Actions always show (priority 1).
   Roles + Status drop <600px (priority 2).
   EmailConfirmed + Subscription drop <900px (priority 3).
   UserId drops <1100px (priority 4) — admin-only debug aid.
   Push devices drops <1600px (priority 5) — admin-only diagnostic.

   Push devices has its OWN priority rather than joining priority 4, and that is the
   whole point. Eight columns fit at 1440 with about 10px to spare (see the committed
   baseline Admin-Users/1440x900-light-en-US.png): a ninth column of ~110px overflows
   the CARD — not the viewport — clipping the Actions buttons mid-word on every row.
   Widening the priority-4 rule instead would have fixed the overflow by also hiding
   User ID at 1440, trading one regression for another. Keeping priorities separate
   leaves the pre-existing table untouched at every width it already supported, and
   shows the new column only from 1600 up, where there is genuinely room.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 599.98px) {
    [b-vm5vckqb7u] th[data-priority="2"],
    [b-vm5vckqb7u] td[data-priority="2"],
    [b-vm5vckqb7u] th[data-priority="3"],
    [b-vm5vckqb7u] td[data-priority="3"],
    [b-vm5vckqb7u] th[data-priority="4"],
    [b-vm5vckqb7u] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 600px) and (max-width: 899.98px) {
    [b-vm5vckqb7u] th[data-priority="3"],
    [b-vm5vckqb7u] td[data-priority="3"],
    [b-vm5vckqb7u] th[data-priority="4"],
    [b-vm5vckqb7u] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 900px) and (max-width: 1099.98px) {
    [b-vm5vckqb7u] th[data-priority="4"],
    [b-vm5vckqb7u] td[data-priority="4"] {
        display: none;
    }
}

/* Priority 5 hides everywhere below 1600px, including the narrow ranges above where
   priority 2-4 already drop — so it needs no lower bound. */
@media (max-width: 1599.98px) {
    [b-vm5vckqb7u] th[data-priority="5"],
    [b-vm5vckqb7u] td[data-priority="5"] {
        display: none;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    [b-vm5vckqb7u] .table {
        font-size: var(--text-sm);
    }

    .page-header h1[b-vm5vckqb7u] {
        font-size: 1.3rem;
    }
}

@media (max-width: 575.98px) {
    [b-vm5vckqb7u] .table {
        font-size: var(--text-xs);
    }

    .page-header h1[b-vm5vckqb7u] {
        font-size: 1.15rem;
    }

    .card-header[b-vm5vckqb7u] {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .sub-activate-row .form-select[b-vm5vckqb7u] {
        width: 100%;
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-vm5vckqb7u],
[data-theme="dark"] .card-header h2[b-vm5vckqb7u],
[data-theme="dark"] .card-header h3[b-vm5vckqb7u],
[data-theme="dark"] .sub-modal-section h3[b-vm5vckqb7u] {
    color: var(--color-primary);
}

[data-theme="dark"] .purges-card[b-vm5vckqb7u] {
    border-color: var(--color-warning);
}

[data-theme="dark"] .purges-card .card-header[b-vm5vckqb7u] {
    background-color: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface));
    border-bottom-color: color-mix(in srgb, var(--color-warning) 30%, var(--color-border));
}
/* /Components/Pages/Cleaning/Calendar.razor.rz.scp.css */
/* ==========================================================================
   Calendar (Cleaning) page — Lisbon Modern v1.1.5
   Three-month calendar grid (7-col day grid per month) with a property
   selector and month-navigation chevrons. Each day lists its scheduled
   cleanings as single-day status-coloured chips (queued / in-progress /
   done / skipped); clicking a chip opens the .cln-modal management dialog.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-w4mzq1q95r] {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-w4mzq1q95r] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-w4mzq1q95r] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Page spinner ───────────────────────────────────────────────────────── */
.page-spinner[b-w4mzq1q95r] {
    display: flex;
    justify-content: center;
    padding: var(--spacing-2xl) 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card[b-w4mzq1q95r] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.card:hover[b-w4mzq1q95r] {
    box-shadow: var(--elevation-2);
}

.card-body[b-w4mzq1q95r] {
    padding: var(--spacing-lg);
}

/* ── Calendar controls (property select + month nav + Today button) ────── */
.calendar-controls[b-w4mzq1q95r] {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.calendar-property-field[b-w4mzq1q95r] {
    flex: 1 1 14rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.calendar-property-field .form-label[b-w4mzq1q95r] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    margin-bottom: 0;
}

.calendar-month-nav[b-w4mzq1q95r] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.calendar-nav-btn[b-w4mzq1q95r] {
    height: 2.375rem;
    padding: 0 0.5rem;
}

.calendar-month-label[b-w4mzq1q95r] {
    font-weight: var(--font-semibold);
    line-height: 2.375rem;
    color: var(--color-text);
    min-width: 9rem;
    text-align: center;
}

.calendar-today-btn[b-w4mzq1q95r] {
    margin-left: auto;
}

/* ── Calendar grid ──────────────────────────────────────────────────────── */
.cal-month[b-w4mzq1q95r] {
    margin-bottom: var(--space-2xl);
}

.cal-month-title[b-w4mzq1q95r] {
    font-size: 1.5rem;
    font-weight: var(--font-bold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

.cal-grid[b-w4mzq1q95r] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.cal-hdr[b-w4mzq1q95r] {
    padding: 0.6rem 0.25rem;
    text-align: center;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-on-primary);
    background: var(--color-primary-dark);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid var(--color-border);
}

.cal-day[b-w4mzq1q95r] {
    min-height: 5.5rem;
    padding: 0.4rem;
    background: var(--color-background);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    position: relative;
}

.cal-day-empty[b-w4mzq1q95r] { background: var(--color-surface-alt); }
.cal-day-past[b-w4mzq1q95r]  { background: var(--color-surface); }
.cal-day-today[b-w4mzq1q95r] { background: color-mix(in srgb, var(--color-secondary) 6%, transparent); }

/* ── Day number chip ────────────────────────────────────────────────────── */
.cal-num[b-w4mzq1q95r] {
    /* Fixed 1.6rem box (the today-circle size) for every day so the today
       highlight doesn't change the header height and shove that cell's bars
       down out of line with neighbouring days. */
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-size: 0.8rem;
    font-weight: var(--font-medium);
    color: var(--color-text);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.cal-num-today[b-w4mzq1q95r] {
    /* Shares the 1.6rem-tall box from .cal-num; only adds the circle + width. */
    width: 1.6rem;
    justify-content: center;
    background-color: var(--color-accent);
    color: var(--color-text-on-accent);
    border-radius: 50%;
    font-weight: var(--font-bold);
}

/* ── Status legend ──────────────────────────────────────────────────────── */
.cln-legend[b-w4mzq1q95r] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.cln-legend-item[b-w4mzq1q95r] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
}

.cln-legend-dot[b-w4mzq1q95r] {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--cln-status, var(--color-secondary));
}

/* ── Cleaning chips (one single-day chip per scheduled cleaning) ─────────── */
/* Each status class sets --cln-status as the single source of truth for that
   status colour; the chip (tint + left border) and the legend dot both read it. */
.cln-chip-queued[b-w4mzq1q95r]     { --cln-status: var(--color-secondary); }
.cln-chip-inprogress[b-w4mzq1q95r] { --cln-status: var(--color-warning); }
.cln-chip-done[b-w4mzq1q95r]       { --cln-status: var(--color-success); }
.cln-chip-skipped[b-w4mzq1q95r]    { --cln-status: var(--color-text-muted); }

.cln-chip[b-w4mzq1q95r] {
    width: 100%;
    margin-top: 2px;
    padding: 0.1rem 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    text-align: left;
    border: none;
    border-left: 3px solid var(--cln-status, var(--color-secondary));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--cln-status, var(--color-secondary)) 14%, var(--color-surface));
    color: var(--color-text);
    font-size: 0.68rem;
    line-height: 1.25;
    cursor: pointer;
    overflow: hidden;
    transition: filter var(--duration-base) var(--ease-out);
}

.cln-chip:hover[b-w4mzq1q95r] { filter: brightness(0.96); }

.cln-chip-skipped[b-w4mzq1q95r] { color: var(--color-text-muted); }

.cln-chip-time[b-w4mzq1q95r] {
    font-weight: var(--font-semibold);
    flex-shrink: 0;
}

.cln-chip-label[b-w4mzq1q95r] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header h1[b-w4mzq1q95r] {
        font-size: 1.3rem;
    }

    .cal-day[b-w4mzq1q95r] {
        min-height: 3.5rem;
        padding: 0.25rem;
    }

    .cal-num[b-w4mzq1q95r] {
        font-size: 0.7rem;
    }

    .cln-chip[b-w4mzq1q95r] {
        font-size: 0.6rem;
        padding: 0.1rem 0.25rem;
    }

    .cal-month-title[b-w4mzq1q95r] {
        font-size: 1.2rem;
    }

    .cal-hdr[b-w4mzq1q95r] {
        font-size: 0.65rem;
        padding: 0.4rem 0.1rem;
    }

    .calendar-today-btn[b-w4mzq1q95r] {
        margin-left: 0;
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-w4mzq1q95r] {
        font-size: 1.15rem;
    }

    .cal-day[b-w4mzq1q95r] {
        min-height: 2.8rem;
        padding: 0.15rem;
    }

    /* Drop the status word on very small screens; the colour + left border
       still convey status and the chip stays tappable to open the modal. */
    .cln-chip-label[b-w4mzq1q95r] {
        display: none;
    }

    .cal-hdr[b-w4mzq1q95r] {
        font-size: 0.55rem;
    }

    .calendar-month-label[b-w4mzq1q95r] {
        min-width: 0;
        flex: 1 1 auto;
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════
   The grid lives on --color-background which already swaps to navy in
   dark; the empty/past/today variants all use token-anchored colours so
   they follow. The header strip uses --color-primary-dark which stays
   dark navy in both themes — no override needed. The today-num chip
   stays on --color-accent (warm yellow) which reads on both themes.
   The only thing that needs explicit dark anchoring is the inner column
   separator inside .cal-hdr, which uses a fixed white-translucent rgba
   that works against the dark navy in both themes — keep as-is.
   ══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-w4mzq1q95r],
[data-theme="dark"] .cal-month-title[b-w4mzq1q95r] {
    color: var(--color-primary);
}

/* ── Management modal ───────────────────────────────────────────────────── */
.cln-modal-overlay[b-w4mzq1q95r] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.cln-modal-backdrop[b-w4mzq1q95r] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.cln-modal[b-w4mzq1q95r] {
    position: relative;
    width: 100%;
    max-width: 32rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-2);
}

.cln-modal-header[b-w4mzq1q95r] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-light);
}

.cln-modal-title[b-w4mzq1q95r] {
    margin: 0;
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.15rem;
}

.cln-modal-subtitle[b-w4mzq1q95r] {
    margin: 0.15rem 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.cln-modal-body[b-w4mzq1q95r] {
    padding: var(--spacing-lg);
    overflow-y: auto;
}

.cln-field[b-w4mzq1q95r] {
    margin-bottom: var(--spacing-md);
}

.cln-field:last-child[b-w4mzq1q95r] {
    margin-bottom: 0;
}

.cln-field .form-label[b-w4mzq1q95r] {
    margin-bottom: var(--space-2xs);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

.cln-modal-footer[b-w4mzq1q95r] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--color-border-light);
    background: var(--color-surface-alt);
}

.cln-confirm-text[b-w4mzq1q95r] {
    margin-right: auto;
    color: var(--color-text);
    font-size: var(--text-sm);
}
/* /Components/Pages/Cleaning/TaskLists.razor.rz.scp.css */
/* ==========================================================================
   TaskLists (Cleaning) page — Lisbon Modern v1.1.5
   Clean-slate port: tokens, auto-fit filter grids, list-item hover, dark
   mode for page-specific custom classes. Cross-cutting Bootstrap chrome
   (.card, .alert-*, .badge.bg-*, .form-control, .form-select,
   .list-group / .list-group-item) handled by the global
   wwwroot/css/bootstrap-dark.css per brief §6.3.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-hd3v16xadd] {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-hd3v16xadd] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-hd3v16xadd] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card[b-hd3v16xadd] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.card:hover[b-hd3v16xadd] {
    box-shadow: var(--elevation-2);
}

.card-header[b-hd3v16xadd] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-header h2[b-hd3v16xadd],
.card-header h3[b-hd3v16xadd] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    margin-bottom: 0;
    letter-spacing: 0.01em;
}

.card-header small[b-hd3v16xadd] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.card-body[b-hd3v16xadd] {
    padding: var(--spacing-lg);
}

/* ── Filter / form auto-fit grid ────────────────────────────────────────── */
.filter-grid[b-hd3v16xadd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--spacing-md);
    align-items: end;
}

.filter-field[b-hd3v16xadd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.filter-field .form-label[b-hd3v16xadd] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.filter-field .form-control[b-hd3v16xadd],
.filter-field .form-select[b-hd3v16xadd] {
    width: 100%;
}

.filter-action[b-hd3v16xadd] {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.filter-action .btn[b-hd3v16xadd] {
    height: 2.375rem;
}

/* Aux text slot inside the filter row (e.g. "N task lists" count). */
.filter-aux[b-hd3v16xadd] {
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    min-width: 0;
}

/* ── Task-list item rows ────────────────────────────────────────────────── */
.tl-item[b-hd3v16xadd] {
    padding-left: var(--spacing-lg);
    transition: background-color var(--duration-fast) var(--ease-out);
}

.tl-item:hover[b-hd3v16xadd] {
    background-color: color-mix(in srgb, var(--color-secondary) 6%, transparent);
}

.tl-item-bullet[b-hd3v16xadd] {
    color: var(--color-text-muted);
    margin-right: var(--spacing-sm);
}

/* ── Editable items in the editor (list-group form rows) ──────────────── */
.tl-edit-item[b-hd3v16xadd] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.tl-edit-index[b-hd3v16xadd] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.tl-edit-remove[b-hd3v16xadd] {
    flex-shrink: 0;
}

/* ── Add-task row (input + button) ─────────────────────────────────────── */
.add-task-row[b-hd3v16xadd] {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.add-task-row .form-control[b-hd3v16xadd] {
    flex: 1;
    min-width: 0;
}

.add-task-row .btn[b-hd3v16xadd] {
    flex-shrink: 0;
}

/* ── Editor actions footer ──────────────────────────────────────────────── */
.editor-actions[b-hd3v16xadd] {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

/* ── Per-tasklist action buttons (Edit / Delete) ───────────────────────── */
.tl-actions[b-hd3v16xadd] {
    display: flex;
    gap: var(--space-2xs);
}

@media (max-width: 575.98px) {
    .tl-actions[b-hd3v16xadd] {
        flex-direction: column;
    }

    .tl-actions .btn[b-hd3v16xadd] {
        width: 100%;
    }
}

/* ── Loading row ────────────────────────────────────────────────────────── */
.loading-row[b-hd3v16xadd] {
    display: flex;
    justify-content: center;
    padding: var(--spacing-xl) 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header h1[b-hd3v16xadd] {
        font-size: 1.3rem;
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-hd3v16xadd] {
        font-size: 1.15rem;
    }

    .card-header[b-hd3v16xadd] {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .card-body[b-hd3v16xadd] {
        padding: var(--spacing-md);
    }

    .filter-action[b-hd3v16xadd] {
        justify-content: stretch;
    }

    .filter-action .btn[b-hd3v16xadd] {
        width: 100%;
    }

    .editor-actions[b-hd3v16xadd] {
        flex-direction: column-reverse;
    }

    .editor-actions .btn[b-hd3v16xadd] {
        width: 100%;
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════
   Cross-cutting Bootstrap chrome handled by global bootstrap-dark.css.
   ══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-hd3v16xadd] {
    color: var(--color-primary);
}

[data-theme="dark"] .tl-item:hover[b-hd3v16xadd] {
    background-color: color-mix(in srgb, var(--color-secondary) 14%, var(--color-surface));
}
/* /Components/Pages/Design/Tokens.razor.rz.scp.css */
/* ==========================================================================
   Design system token preview page
   Scoped to the /design/tokens preview page. Uses only design-system tokens.
   ========================================================================== */

.tokens-page[b-nztuo4q3cu] {
    background: var(--color-background);
    color: var(--color-text);
    min-height: 100vh;
    padding: var(--space-2xl) var(--space-xl);
    max-width: var(--container-default);
    margin: 0 auto;
    font-family: var(--font-family-base);
}

.tokens-header[b-nztuo4q3cu] {
    margin-bottom: var(--space-3xl);
}

.tokens-header h1[b-nztuo4q3cu] {
    font-size: var(--text-3xl);
    color: var(--color-primary);
    margin: 0 0 var(--space-sm);
}

.tokens-lead[b-nztuo4q3cu] {
    color: var(--color-text-muted);
    max-width: 70ch;
    margin: 0 0 var(--space-lg);
}

.tokens-theme-toggle[b-nztuo4q3cu] {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
}

.tokens-theme-toggle button[b-nztuo4q3cu] {
    background: transparent;
    border: 0;
    padding: var(--space-sm) var(--space-md);
    color: var(--color-text-muted);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.tokens-theme-toggle button:hover[b-nztuo4q3cu] {
    color: var(--color-text);
}

.tokens-theme-toggle button.is-active[b-nztuo4q3cu] {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}

.tokens-section[b-nztuo4q3cu] {
    margin-bottom: var(--space-3xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border-light);
}

.tokens-section h2[b-nztuo4q3cu] {
    font-size: var(--text-2xl);
    color: var(--color-primary);
    margin: 0 0 var(--space-sm);
}

.tokens-section h3[b-nztuo4q3cu] {
    font-size: var(--text-lg);
    color: var(--color-text);
    margin: var(--space-xl) 0 var(--space-md);
    font-weight: var(--font-semibold);
}

.tokens-section-lead[b-nztuo4q3cu] {
    color: var(--color-text-muted);
    margin: 0 0 var(--space-md);
    max-width: 70ch;
}

.tokens-section[b-nztuo4q3cu]  code,
.tokens-page[b-nztuo4q3cu]  code {
    font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Code', Consolas, monospace;
    font-size: var(--text-xs);
    background: var(--color-surface-alt);
    color: var(--color-text);
    padding: 0 var(--space-2xs);
    border-radius: var(--radius-sm);
}

/* Swatches ------------------------------------------------------------------ */
.swatch-grid[b-nztuo4q3cu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-md);
}

.swatch[b-nztuo4q3cu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    align-items: flex-start;
}

.swatch-chip[b-nztuo4q3cu] {
    width: 100%;
    height: 64px;
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-1);
}

.swatch-chip-bordered[b-nztuo4q3cu] {
    border: 1px solid var(--color-border);
    box-shadow: none;
}

/* Typography ---------------------------------------------------------------- */
.type-stack[b-nztuo4q3cu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.type-row[b-nztuo4q3cu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding-bottom: var(--space-md);
    border-bottom: 1px dashed var(--color-border-light);
}

.type-sample[b-nztuo4q3cu] {
    color: var(--color-text);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
}

.type-leading-grid[b-nztuo4q3cu],
.type-weight-grid[b-nztuo4q3cu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-md);
}

.type-leading-cell[b-nztuo4q3cu],
.type-weight-cell[b-nztuo4q3cu] {
    padding: var(--space-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
}

.type-leading-cell p[b-nztuo4q3cu] {
    margin: 0;
    color: var(--color-text);
}

.type-weight-cell span[b-nztuo4q3cu] {
    font-size: var(--text-lg);
    color: var(--color-text);
}

/* Spacing ------------------------------------------------------------------- */
.space-stack[b-nztuo4q3cu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.space-row[b-nztuo4q3cu] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.space-bar[b-nztuo4q3cu] {
    height: 16px;
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    flex: 0 0 auto;
}

.space-bar-legacy[b-nztuo4q3cu] {
    background: var(--color-secondary);
}

/* Radius -------------------------------------------------------------------- */
.radius-grid[b-nztuo4q3cu] {
    display: flex;
    gap: var(--space-xl);
    flex-wrap: wrap;
}

.radius-cell[b-nztuo4q3cu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    align-items: flex-start;
}

.radius-box[b-nztuo4q3cu] {
    width: 96px;
    height: 64px;
    background: var(--color-primary);
}

/* Elevation ----------------------------------------------------------------- */
.elevation-grid[b-nztuo4q3cu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-xl);
    padding: var(--space-xl) 0;
}

.elevation-cell[b-nztuo4q3cu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
}

.elevation-box[b-nztuo4q3cu] {
    width: 96px;
    height: 64px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
}

/* Motion -------------------------------------------------------------------- */
.motion-toggle[b-nztuo4q3cu] {
    margin-bottom: var(--space-md);
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border: 0;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: var(--font-medium);
    transition: background var(--duration-fast) var(--ease-out);
}

.motion-toggle:hover[b-nztuo4q3cu] {
    background: var(--color-primary-light);
}

.motion-track-stack[b-nztuo4q3cu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.motion-row[b-nztuo4q3cu] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.motion-track[b-nztuo4q3cu] {
    flex: 1 1 auto;
    max-width: 400px;
    height: 32px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}

.motion-swatch[b-nztuo4q3cu] {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: 24px;
    background: var(--color-secondary);
    border-radius: var(--radius-sm);
    transform: translateX(0);
}

.motion-swatch.is-running[b-nztuo4q3cu] {
    transform: translateX(calc(400px - 32px));
}

/* State badges -------------------------------------------------------------- */
.state-grid[b-nztuo4q3cu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.state-cell[b-nztuo4q3cu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    align-items: flex-start;
}

.state-badge[b-nztuo4q3cu] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    width: max-content;
}

.state-dot[b-nztuo4q3cu] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Breakpoint table ---------------------------------------------------------- */
.bp-table[b-nztuo4q3cu] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    color: var(--color-text);
}

.bp-table th[b-nztuo4q3cu],
.bp-table td[b-nztuo4q3cu] {
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border-light);
}

.bp-table th[b-nztuo4q3cu] {
    background: var(--color-surface-alt);
    color: var(--color-primary);
    font-weight: var(--font-semibold);
}

/* Footer -------------------------------------------------------------------- */
.tokens-footer[b-nztuo4q3cu] {
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border-light);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* ==========================================================================
   Error page — Lisbon Modern v1.1.5
   Scoped to .error-page wrapper instead of bare h1/h2/h3/p/code selectors
   so the rules are explicit about which markup they target (bare-tag
   selectors auto-attach to the b-XXX scope so they only matched this
   page's elements anyway, but reading the markup intent is easier this
   way).
   ========================================================================== */

.error-page h1[b-ns1ii34ol2] {
    color: var(--color-danger);
    font-weight: var(--font-semibold);
}

.error-page h2[b-ns1ii34ol2] {
    color: var(--color-danger);
    font-size: 1.25rem;
    margin-bottom: var(--spacing-lg);
}

.error-page p[b-ns1ii34ol2] {
    color: var(--color-text-muted);
    line-height: var(--line-height-base);
}

.error-page code[b-ns1ii34ol2] {
    color: var(--color-secondary);
    background-color: var(--color-surface-alt);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
}
/* /Components/Pages/Extension/ApiKeys.razor.rz.scp.css */
/* ==========================================================================
   ApiKeys page — Lisbon Modern v1.1.5
   Port pass: tokens, filter-grid auto-fit on the create form, column
   priority hiding on the keys table, dark mode for page-specific chrome.
   Cross-cutting Bootstrap chrome (.card, .alert-*, .badge.bg-*,
   .form-control, .table) handled by wwwroot/css/bootstrap-dark.css.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-k3rwimf8fr] {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-k3rwimf8fr] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-k3rwimf8fr] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card[b-k3rwimf8fr] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--duration-base) var(--ease-out);
    background: var(--color-surface);
}

.card:hover[b-k3rwimf8fr] {
    box-shadow: var(--elevation-3);
}

.card-header[b-k3rwimf8fr] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-header h2[b-k3rwimf8fr] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    font-size: 1.05rem;
    margin-bottom: 0;
    letter-spacing: 0.01em;
}

.card-body[b-k3rwimf8fr] {
    padding: var(--spacing-lg);
}

/* ── Filter / form auto-fit grid (create-key form) ──────────────────────── */
.filter-grid[b-k3rwimf8fr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--spacing-md);
    align-items: end;
}

.filter-field[b-k3rwimf8fr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.filter-field .form-label[b-k3rwimf8fr] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.filter-field .form-control[b-k3rwimf8fr] {
    width: 100%;
}

.filter-action[b-k3rwimf8fr] {
    display: flex;
    align-items: flex-end;
}

.filter-action .btn[b-k3rwimf8fr] {
    height: 2.375rem; /* matches Bootstrap form-control default height */
}

/* ── Setup instructions ordered list ────────────────────────────────────── */
.setup-list[b-k3rwimf8fr] {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

.setup-list li[b-k3rwimf8fr] {
    color: var(--color-text);
    line-height: 1.6;
}

.setup-list code[b-k3rwimf8fr] {
    background-color: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.4rem;
    font-size: 0.85rem;
    color: var(--color-text);
}

/* ── Newly-created key prominent display ────────────────────────────────── */
.api-key-input[b-k3rwimf8fr] {
    font-size: 0.9rem;
}

.api-key-endpoint[b-k3rwimf8fr] {
    background-color: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.4rem;
    font-size: 0.85rem;
}

/* ── Table chrome ───────────────────────────────────────────────────────── */
[b-k3rwimf8fr] .table {
    font-size: var(--text-sm);
}

[b-k3rwimf8fr] .table th {
    color: var(--color-text-muted);
    font-weight: var(--font-semibold);
    border-bottom: 2px solid var(--color-border);
}

[b-k3rwimf8fr] .table td {
    vertical-align: middle;
}

/* ── Column priority hiding ──────────────────────────────────────────────
   Name + Status + Actions stay visible at every width (priority 1).
   Key Prefix drops below 600px (priority 2).
   Created drops below 900px (priority 3).
   Last Used drops below 1100px (priority 4).
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 599.98px) {
    [b-k3rwimf8fr] th[data-priority="2"],
    [b-k3rwimf8fr] td[data-priority="2"],
    [b-k3rwimf8fr] th[data-priority="3"],
    [b-k3rwimf8fr] td[data-priority="3"],
    [b-k3rwimf8fr] th[data-priority="4"],
    [b-k3rwimf8fr] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 600px) and (max-width: 899.98px) {
    [b-k3rwimf8fr] th[data-priority="3"],
    [b-k3rwimf8fr] td[data-priority="3"],
    [b-k3rwimf8fr] th[data-priority="4"],
    [b-k3rwimf8fr] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 900px) and (max-width: 1099.98px) {
    [b-k3rwimf8fr] th[data-priority="4"],
    [b-k3rwimf8fr] td[data-priority="4"] {
        display: none;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    [b-k3rwimf8fr] .table {
        font-size: var(--text-xs);
    }

    .api-key-input[b-k3rwimf8fr] {
        font-size: 0.8rem;
    }

    .page-header h1[b-k3rwimf8fr] {
        font-size: 1.3rem;
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-k3rwimf8fr] {
        font-size: 1.15rem;
    }

    .card-header[b-k3rwimf8fr] {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .card-body[b-k3rwimf8fr] {
        padding: var(--spacing-md);
    }

    .filter-action .btn[b-k3rwimf8fr] {
        width: 100%;
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════
   Cross-cutting Bootstrap chrome (.card, .alert-*, .badge.bg-*,
   .form-control, .table) handled by the global wwwroot/css/bootstrap-dark.css
   per brief §6.3 convention. Only page-specific custom classes here.
   ══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-k3rwimf8fr] {
    color: var(--color-primary);
}

[data-theme="dark"] .setup-list code[b-k3rwimf8fr],
[data-theme="dark"] .api-key-endpoint[b-k3rwimf8fr] {
    background-color: var(--color-background);
    border-color: var(--color-border-light);
    color: var(--color-text);
}
/* /Components/Pages/Extension/Templates.razor.rz.scp.css */
/* ==========================================================================
   Templates (Extension) page — Lisbon Modern v1.1.5
   Port pass: tokens, filter-grid for the create/edit form, auto-fit grid
   for the per-template cards, dark mode for page-specific custom classes.
   Cross-cutting Bootstrap chrome handled by wwwroot/css/bootstrap-dark.css.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-s7jltvp3v1] {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-s7jltvp3v1] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-s7jltvp3v1] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card[b-s7jltvp3v1] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.card:hover[b-s7jltvp3v1] {
    box-shadow: var(--elevation-2);
}

.card-header[b-s7jltvp3v1] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-header h2[b-s7jltvp3v1],
.card-header h3[b-s7jltvp3v1] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    margin-bottom: 0;
    letter-spacing: 0.01em;
}

.card-body[b-s7jltvp3v1] {
    padding: var(--spacing-lg);
}

.card-footer[b-s7jltvp3v1] {
    background-color: var(--color-surface-alt);
    border-top: 1px solid var(--color-border-light);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
}

/* ── Filter / form auto-fit grid (create/edit form) ──────────────────────── */
.filter-grid[b-s7jltvp3v1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--spacing-md);
    align-items: start;
}

.filter-field[b-s7jltvp3v1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.filter-field .form-label[b-s7jltvp3v1] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.filter-field .form-control[b-s7jltvp3v1],
.filter-field .form-select[b-s7jltvp3v1] {
    width: 100%;
}

/* Full-width row for the content textarea (spans the grid). */
.filter-field-full[b-s7jltvp3v1] {
    grid-column: 1 / -1;
}

/* ── Template content textarea ──────────────────────────────────────────── */
.template-content[b-s7jltvp3v1] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
    min-height: 8rem;
}

.placeholder-hint[b-s7jltvp3v1] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin-top: var(--space-2xs);
}

.placeholder-hint code[b-s7jltvp3v1] {
    background-color: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: 0.05rem 0.35rem;
    font-size: 0.8rem;
    color: var(--color-text);
}

/* ── Form action row ─────────────────────────────────────────────────────── */
.form-actions[b-s7jltvp3v1] {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* ── Per-template card grid ─────────────────────────────────────────────── */
.template-grid[b-s7jltvp3v1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--spacing-md);
}

.template-card[b-s7jltvp3v1] {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-background);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

.template-card:hover[b-s7jltvp3v1] {
    box-shadow: var(--elevation-2);
    transform: translateY(-1px);
}

.template-card-body[b-s7jltvp3v1] {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex: 1;
}

.template-card-head[b-s7jltvp3v1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.template-card-name[b-s7jltvp3v1] {
    color: var(--color-text);
    font-weight: var(--font-semibold);
    font-size: 1rem;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.template-card-preview[b-s7jltvp3v1] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: 0;
    max-height: 5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
    word-break: break-word;
}

.template-card-actions[b-s7jltvp3v1] {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: auto;
}

.template-card-foot[b-s7jltvp3v1] {
    background-color: var(--color-surface-alt);
    border-top: 1px solid var(--color-border-light);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    padding: var(--spacing-sm) var(--spacing-md);
}

/* ── Loading row ────────────────────────────────────────────────────────── */
.loading-row[b-s7jltvp3v1] {
    display: flex;
    justify-content: center;
    padding: var(--spacing-xl) 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header h1[b-s7jltvp3v1] {
        font-size: 1.3rem;
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-s7jltvp3v1] {
        font-size: 1.15rem;
    }

    .card-header[b-s7jltvp3v1] {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .card-body[b-s7jltvp3v1] {
        padding: var(--spacing-md);
    }

    .form-actions[b-s7jltvp3v1] {
        flex-direction: column;
    }

    .form-actions .btn[b-s7jltvp3v1] {
        width: 100%;
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-s7jltvp3v1] {
    color: var(--color-primary);
}

[data-theme="dark"] .template-card[b-s7jltvp3v1] {
    background: var(--color-background);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .placeholder-hint code[b-s7jltvp3v1] {
    background-color: var(--color-surface);
    border-color: var(--color-border-light);
    color: var(--color-text);
}
/* /Components/Pages/GuestForm.razor.rz.scp.css */
/* GuestForm page � Lisbon Modern scoped styles */
/* Uses AuthLayout (minimal full-page layout with dark navy background) */

.guest-form-container[b-rg4g2yfucx] {
    max-width: 48rem;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
}

.guest-title[b-rg4g2yfucx] {
    color: var(--color-text-on-primary);
    font-weight: 700;
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.guest-subtitle[b-rg4g2yfucx] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
}

.guest-subtitle strong[b-rg4g2yfucx] {
    color: var(--color-accent);
}

/* Header area layout */
.guest-header-area[b-rg4g2yfucx] {
    display: flex;
    flex-direction: column;
}

.guest-header-top-row[b-rg4g2yfucx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.guest-header-spacer[b-rg4g2yfucx] {
    flex: 1;
}

/* Guest progress badge */
.guest-progress-badge[b-rg4g2yfucx] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.85rem;
    background-color: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-lg);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
}

.guest-progress-badge strong[b-rg4g2yfucx] {
    color: var(--color-accent);
}

.guest-submitted-list[b-rg4g2yfucx] {
    margin: 0.5rem auto 0.75rem;
    padding: 0.45rem 1rem;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    max-width: 90%;
}

/* ?? Success / confirmation state ?? */
.guest-success-icon[b-rg4g2yfucx] {
    font-size: 3.5rem;
    color: var(--color-accent);
}

.guest-success-title[b-rg4g2yfucx] {
    color: var(--color-text-on-primary);
    font-weight: 700;
    font-size: 1.6rem;
}

.guest-success-text[b-rg4g2yfucx] {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    line-height: 1.6;
}

.guest-success-text strong[b-rg4g2yfucx] {
    color: var(--color-accent);
}

.guest-success-hint[b-rg4g2yfucx] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
}

/* Next guest registration area */
.guest-next-area[b-rg4g2yfucx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.guest-next-divider[b-rg4g2yfucx] {
    width: 4rem;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 1px;
    margin-bottom: var(--spacing-xs);
}

.guest-next-info[b-rg4g2yfucx] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
    margin-bottom: 0;
}

.guest-next-info strong[b-rg4g2yfucx] {
    color: var(--color-accent);
}

.btn-accent[b-rg4g2yfucx] {
    background-color: var(--color-accent, #D69E2E);
    border-color: var(--color-accent, #D69E2E);
    color: #1a202c;
    border-radius: var(--radius-sm);
    padding: 0.6rem 2rem;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background-color var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
}

.btn-accent:hover[b-rg4g2yfucx] {
    background-color: #c08b1f;
    border-color: #c08b1f;
    color: #1a202c;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ?? Error / unavailable state ?? */
.guest-error-title[b-rg4g2yfucx] {
    color: var(--color-accent);
    font-weight: 700;
}

.guest-error-text[b-rg4g2yfucx] {
    color: rgba(255, 255, 255, 0.7);
}

.card[b-rg4g2yfucx] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
}

.card-header[b-rg4g2yfucx] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card-header h2[b-rg4g2yfucx] {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0;
}

.card-body[b-rg4g2yfucx] {
    padding: var(--spacing-lg);
}

.form-label[b-rg4g2yfucx] {
    color: var(--color-text);
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: var(--spacing-xs);
}

[b-rg4g2yfucx] .form-control,
[b-rg4g2yfucx] .form-select {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.925rem;
    color: var(--color-text);
}

[b-rg4g2yfucx] .form-control:focus,
[b-rg4g2yfucx] .form-select:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 0.2rem rgba(74, 144, 217, 0.2);
}

.btn-submit[b-rg4g2yfucx] {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    border-radius: var(--radius-sm);
    padding: 0.6rem 2rem;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background-color var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
}

.btn-submit:hover[b-rg4g2yfucx] {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

@media (max-width: 575.98px) {
    .guest-form-container[b-rg4g2yfucx] {
        padding: var(--spacing-md) var(--spacing-sm);
    }

    .guest-title[b-rg4g2yfucx] {
        font-size: 1.3rem;
    }

    .guest-success-title[b-rg4g2yfucx] {
        font-size: 1.3rem;
    }
}

/* Document Capture Step */
.doc-capture-area[b-rg4g2yfucx] {
    min-height: 16rem;
}

.doc-icon-area[b-rg4g2yfucx] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.doc-placeholder-icon[b-rg4g2yfucx] {
    font-size: 5rem;
    color: var(--color-secondary);
    opacity: 0.5;
}

.doc-video-wrapper[b-rg4g2yfucx] {
    text-align: center;
}

.doc-video-preview[b-rg4g2yfucx] {
    width: 100%;
    max-width: 36rem;
    border-radius: var(--radius-lg);
    border: 2px solid var(--color-border-light);
    background-color: #000;
}

.doc-preview-area[b-rg4g2yfucx] {
    padding: var(--spacing-md) 0;
}

.doc-preview-image[b-rg4g2yfucx] {
    max-width: 100%;
    max-height: 24rem;
    border-radius: var(--radius-lg);
    border: 2px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
    object-fit: contain;
}

@media (max-width: 575.98px) {
    .doc-placeholder-icon[b-rg4g2yfucx] {
        font-size: 3.5rem;
    }

    .doc-preview-image[b-rg4g2yfucx] {
        max-height: 16rem;
    }
}

/* Privacy disclaimer */
.doc-privacy-notice[b-rg4g2yfucx] {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
    line-height: 1.55;
    text-align: center;
}

/* Document photo sections (front / back) */
.doc-photo-section[b-rg4g2yfucx] {
    padding: var(--spacing-md);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background-color: rgba(255, 255, 255, 0.03);
}

/* Upload progress overlay */
.upload-overlay[b-rg4g2yfucx] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: overlayFadeIn-b-rg4g2yfucx 0.25s ease-out;
}

@keyframes overlayFadeIn-b-rg4g2yfucx {
    from { opacity: 0; }
    to { opacity: 1; }
}

.upload-overlay-card[b-rg4g2yfucx] {
    background: var(--color-surface, #fff);
    border-radius: var(--radius-lg, 0.75rem);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    padding: 2.5rem 2rem 2rem;
    text-align: center;
    width: 22rem;
    max-width: 90vw;
    animation: cardSlideUp-b-rg4g2yfucx 0.3s ease-out;
}

@keyframes cardSlideUp-b-rg4g2yfucx {
    from { opacity: 0; transform: translateY(1.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

.upload-overlay-icon-area[b-rg4g2yfucx] {
    margin-bottom: 1rem;
}

.upload-overlay-icon[b-rg4g2yfucx] {
    font-size: 2.8rem;
    color: var(--color-primary, #0D3B66);
    animation: iconPulse-b-rg4g2yfucx 1.8s ease-in-out infinite;
}

@keyframes iconPulse-b-rg4g2yfucx {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.08); }
}

.upload-overlay-title[b-rg4g2yfucx] {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-text, #1a202c);
    margin-bottom: 0.25rem;
}

.upload-overlay-filename[b-rg4g2yfucx] {
    font-size: 0.82rem;
    color: var(--color-text-muted, #6c757d);
    margin-bottom: 1.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.upload-overlay-progress-track[b-rg4g2yfucx] {
    width: 100%;
    height: 0.5rem;
    background-color: var(--color-border-light, #e2e8f0);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.upload-overlay-progress-bar[b-rg4g2yfucx] {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary, #0D3B66), var(--color-secondary, #4A90D9));
    border-radius: 999px;
    transition: width 0.2s ease;
}

.upload-overlay-percent[b-rg4g2yfucx] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text, #1a202c);
    margin-bottom: 1.25rem;
}

.upload-overlay-cancel[b-rg4g2yfucx] {
    border-radius: var(--radius-sm, 0.375rem);
    font-size: 0.85rem;
    padding: 0.35rem 1.25rem;
}

.doc-photo-label[b-rg4g2yfucx] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
}

.doc-back-capture-area[b-rg4g2yfucx] {
    border: 2px dashed var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ==========================================================================
   Home — AUTHENTICATED DASHBOARD
   Lisbon Modern v1.1.5 token system. Scoped to <Home>.

   Six-column responsive grid with 8 widget cards. Phase 1 ships fixture
   data; visual layout is final. Mobile/tablet stacks to a single column.

   The anonymous landing skin moved to LandingContent.razor.css and the
   marketing-nav rules to MarketingLayout.razor.css in the F1 Home split
   (this file used to hold all three).
   ========================================================================== */

.dash-header[b-m7djp986qh] {
    margin-bottom: var(--space-xl);
}

.dash-greeting[b-m7djp986qh] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin: 0 0 var(--space-2xs);
    letter-spacing: -0.015em;
}

.dash-subtitle[b-m7djp986qh] {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    margin: 0;
}

/* ── Grid ── */
.dashboard[b-m7djp986qh] {
    display: grid;
    grid-template-columns: 1fr;       /* mobile default — stack everything */
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .dashboard[b-m7djp986qh] {
        grid-template-columns: repeat(6, 1fr);
    }
    /* Full-width rows */
    .dash-today[b-m7djp986qh],
    .dash-revenue[b-m7djp986qh],
    .dash-properties[b-m7djp986qh],
    .dash-quick[b-m7djp986qh] { grid-column: 1 / -1; }
    /* Row: alerts (1/3) + arrivals (2/3) */
    .dash-alerts[b-m7djp986qh]   { grid-column: 1 / 3; }
    .dash-arrivals[b-m7djp986qh] { grid-column: 3 / 7; }
    /* Row: SIBA queue (1/2) + cleaning (1/2) */
    .dash-siba[b-m7djp986qh]     { grid-column: 1 / 4; }
    .dash-cleaning[b-m7djp986qh] { grid-column: 4 / 7; }
}

/* ── Card chrome (shared) ── */
.dash-card[b-m7djp986qh] {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--elevation-1);
}

.dash-card-head[b-m7djp986qh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.dash-card-eyebrow[b-m7djp986qh] {
    color: var(--color-secondary-dark);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dash-card-meta[b-m7djp986qh] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

/* No dark-mode override on .dash-card-eyebrow: --color-secondary already
   swaps to the bright sky-blue (#6BA3E0) under [data-theme="dark"], which
   matches the section-name colour treatment used elsewhere in the app.
   The old override used --color-accent (yellow) — looked too eyebrow-y
   against the dashboard widgets and out of sync with other pages. */

/* Empty state */
.dash-empty[b-m7djp986qh] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: 0;
    padding: var(--space-md) 0;
    text-align: center;
}

.dash-empty-placeholder[b-m7djp986qh] {
    font-style: italic;
}

/* ── Status pills (shared) ── */
.dash-pill[b-m7djp986qh] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: var(--font-semibold);
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.dash-pill-accepted[b-m7djp986qh] { background: var(--state-live-bg);     color: var(--state-live-fg); }
.dash-pill-pending[b-m7djp986qh]  { background: var(--state-planned-bg);  color: var(--state-planned-fg); }
.dash-pill-failed[b-m7djp986qh]   { background: #FEE2E2;                  color: #991B1B; }
.dash-pill-none[b-m7djp986qh]     { background: var(--color-background);  color: var(--color-text-muted); border: 1px solid var(--color-border-light); }
[data-theme="dark"] .dash-pill-failed[b-m7djp986qh] { background: #3A1414; color: #FCA5A5; }

/* ==========================================================================
   WIDGET 1: Today at a glance — 3-column KPI strip
   ========================================================================== */
.dash-today-grid[b-m7djp986qh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--space-md);
}

.dash-kpi[b-m7djp986qh] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-background);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.dash-kpi-icon[b-m7djp986qh] {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-md);
    font-size: 1.1rem;
}

.dash-kpi-body[b-m7djp986qh] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.dash-kpi-value[b-m7djp986qh] {
    color: var(--color-primary);
    font-size: 1.75rem;
    font-weight: var(--font-bold);
    line-height: 1;
    letter-spacing: -0.02em;
}

.dash-kpi-label[b-m7djp986qh] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

.dash-kpi-sub[b-m7djp986qh] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin-top: 0.2rem;
}

/* ==========================================================================
   WIDGET 2: Alerts (1/3 col) — vertical list
   ========================================================================== */
.dash-alert-list[b-m7djp986qh] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.dash-alert[b-m7djp986qh] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--color-background);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.dash-alert-warn  .bi[b-m7djp986qh] { color: var(--state-failed, #DC2626); }
.dash-alert-info  .bi[b-m7djp986qh] { color: var(--color-secondary); }
.dash-alert .bi[b-m7djp986qh] {
    font-size: 1rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.dash-alert-text[b-m7djp986qh] {
    color: var(--color-text);
}

/* ==========================================================================
   WIDGET 3: Upcoming arrivals (2/3 col) — table-like row list
   ========================================================================== */
/* container-type: inline-size lets the arrival rows reflow based on the
   card's own width (not the viewport) — important because the card sits
   in a 2/3 grid column that can be narrower than the viewport at tablet. */
.dash-arrivals[b-m7djp986qh] { container-type: inline-size; }

.dash-arrival-list[b-m7djp986qh] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.dash-arrival[b-m7djp986qh] {
    display: grid;
    grid-template-columns: 1fr 1fr auto auto;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border-light);
    font-size: var(--text-sm);
}

.dash-arrival:last-child[b-m7djp986qh] { border-bottom: 0; }

.dash-arrival-guest[b-m7djp986qh]    { color: var(--color-text); font-weight: var(--font-semibold); }
.dash-arrival-property[b-m7djp986qh] { color: var(--color-text-muted); }
.dash-arrival-date[b-m7djp986qh]     { color: var(--color-text); font-weight: var(--font-medium); }

/* On narrow card widths (alerts column shrinks first), stack the row */
@container (max-width: 480px) {
    .dash-arrival[b-m7djp986qh] {
        grid-template-columns: 1fr auto;
        row-gap: 0.25rem;
    }
    .dash-arrival-property[b-m7djp986qh],
    .dash-arrival-date[b-m7djp986qh] {
        grid-column: 1 / 2;
        font-size: var(--text-xs);
    }
    .dash-arrival-pill[b-m7djp986qh] {
        grid-column: 2 / 3;
        grid-row: 1 / span 3;
    }
}

/* ==========================================================================
   WIDGET 4: SIBA queue (1/2 col)
   ========================================================================== */
.dash-siba-counts[b-m7djp986qh] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding: var(--space-md);
    background: var(--color-background);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.dash-siba-count[b-m7djp986qh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    text-align: center;
}

.dash-siba-count-value[b-m7djp986qh] {
    color: var(--color-primary);
    font-size: 1.5rem;
    font-weight: var(--font-bold);
    line-height: 1;
}

.dash-siba-count-value.dash-siba-count-success[b-m7djp986qh] { color: var(--color-success); }
.dash-siba-count-value.dash-siba-count-danger[b-m7djp986qh]  { color: #DC2626; }
[data-theme="dark"] .dash-siba-count-value.dash-siba-count-danger[b-m7djp986qh] { color: #FCA5A5; }

.dash-siba-count-label[b-m7djp986qh] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dash-siba-rows[b-m7djp986qh] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dash-siba-row[b-m7djp986qh] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.4rem 0.6rem;
    background: var(--color-background);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.dash-siba-row-name[b-m7djp986qh] {
    color: var(--color-text);
    font-weight: var(--font-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-siba-row-file[b-m7djp986qh] {
    color: var(--color-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
}

/* ==========================================================================
   WIDGET 5: Cleanings today (1/2 col)
   Mirrors the SIBA rows pattern; cleaning-status pills have their own
   color treatment because the SIBA accepted/pending/failed palette doesn't
   translate cleanly to Queued/InProgress/Done/Skipped semantics.
   ========================================================================== */
.dash-card-meta-danger[b-m7djp986qh] {
    color: #DC2626;
    font-weight: var(--font-semibold);
}
[data-theme="dark"] .dash-card-meta-danger[b-m7djp986qh] { color: #FCA5A5; }

.dash-cleaning-rows[b-m7djp986qh] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dash-cleaning-row[b-m7djp986qh] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.4rem 0.6rem;
    background: var(--color-background);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.dash-cleaning-property[b-m7djp986qh] {
    color: var(--color-text);
    font-weight: var(--font-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-cleaning-time[b-m7djp986qh] {
    color: var(--color-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
}

/* Cleaning status pills — distinct palette from SIBA pills */
.dash-pill-cleaning-queued[b-m7djp986qh]     { background: var(--color-surface);       color: var(--color-text-muted); border: 1px solid var(--color-border-light); }
.dash-pill-cleaning-inprogress[b-m7djp986qh] { background: #FEF3C7;                    color: #92400E; }
.dash-pill-cleaning-done[b-m7djp986qh]       { background: var(--state-live-bg);       color: var(--state-live-fg); }
.dash-pill-cleaning-skipped[b-m7djp986qh]    { background: var(--color-background);    color: var(--color-text-muted); border: 1px solid var(--color-border-light); }
[data-theme="dark"] .dash-pill-cleaning-inprogress[b-m7djp986qh] { background: #3A2A0A; color: #FCD34D; }

/* Property strip cleaning column — tint icon + text by status. */
.dash-property-cleaning-inprogress[b-m7djp986qh] { color: #92400E; }
.dash-property-cleaning-queued[b-m7djp986qh]     { color: var(--color-text-muted); }
.dash-property-cleaning-done[b-m7djp986qh]       { color: var(--color-success); }
.dash-property-cleaning-none[b-m7djp986qh]       { color: var(--color-text-muted); }
[data-theme="dark"] .dash-property-cleaning-inprogress[b-m7djp986qh] { color: #FCD34D; }

/* ==========================================================================
   WIDGET 6: Revenue snapshot placeholder (full width)
   ========================================================================== */
.dash-revenue-body[b-m7djp986qh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.dash-revenue-figure[b-m7djp986qh] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.dash-revenue-value[b-m7djp986qh] {
    color: var(--color-primary);
    font-size: 2rem;
    font-weight: var(--font-bold);
    line-height: 1;
    letter-spacing: -0.02em;
}

.dash-revenue-currency[b-m7djp986qh] {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
}

.dash-revenue-sub[b-m7djp986qh] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: 0;
}

/* ==========================================================================
   WIDGET 7: Property occupancy strip (full width)
   ========================================================================== */
.dash-property-list[b-m7djp986qh] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.dash-property[b-m7djp986qh] {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(220px, 2fr) minmax(140px, 1fr);
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border-light);
    font-size: var(--text-sm);
}

.dash-property:last-child[b-m7djp986qh] { border-bottom: 0; }

.dash-property-name[b-m7djp986qh] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
}

.dash-property-status[b-m7djp986qh] {
    color: var(--color-text);
}

.dash-property-cleaning[b-m7djp986qh] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.dash-property-cleaning-placeholder[b-m7djp986qh] {
    font-style: italic;
    opacity: 0.7;
}

/* Phone: stack the 3 columns vertically */
@media (max-width: 599.98px) {
    .dash-property[b-m7djp986qh] {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        padding: var(--space-md) 0;
    }
    .dash-property-status[b-m7djp986qh],
    .dash-property-cleaning[b-m7djp986qh] {
        font-size: var(--text-xs);
    }
}

/* ==========================================================================
   WIDGET 8: Quick actions (full width)
   ========================================================================== */
.dash-quick-grid[b-m7djp986qh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--space-sm);
}

.dash-quick-btn[b-m7djp986qh] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-background);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.dash-quick-btn:hover[b-m7djp986qh] {
    background: var(--color-surface);
    border-color: var(--color-secondary);
    color: var(--color-primary);
    transform: translateY(-1px);
}

.dash-quick-btn .bi[b-m7djp986qh] {
    font-size: 1.1rem;
    color: var(--color-secondary);
    flex-shrink: 0;
}
/* /Components/Pages/Invoicing/Bookings.razor.rz.scp.css */
/* ==========================================================================
   Bookings (Invoicing) page — Lisbon Modern v1.1.5
   Port pass on the existing scoped CSS. Two scope concerns coexist:
     1. Most elements (calendar header, day cells, modal) are rendered
        directly in Bookings.razor → they carry the page's b-XXX scope.
     2. Booking bars (.bk-bar* and inner .bk-bar-prop/name/amount/guests)
        are rendered by BookingBarButton.razor → they carry the child
        component's scope. Rules targeting them MUST use ::deep so the
        scope-attribute compiles correctly (leading ::deep → [b-XXX]
        ancestor with descendant match).
   The original file used ::deep on EVERY rule for consistency; that's
   redundant-but-harmless for the direct-markup elements, so kept here
   to avoid drift between this port and the previous behaviour.
   Removed: defensive `var(--token, #hex)` fallbacks (24+ instances —
   the token files supply guaranteed values; the fallbacks were stale
   safety nets from before the token consolidation).
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-z8mm0mewpo] {
    margin-bottom: var(--spacing-lg);
}

.page-header h1[b-z8mm0mewpo] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-z8mm0mewpo] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Page spinner ───────────────────────────────────────────────────────── */
.page-spinner[b-z8mm0mewpo] {
    display: flex;
    justify-content: center;
    padding: var(--spacing-2xl) 0;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.bk-layout[b-z8mm0mewpo] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 7rem);
    min-height: 0;
}

/* ── Filter card ────────────────────────────────────────────────────────── */
.filter-grid[b-z8mm0mewpo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--spacing-md);
    align-items: end;
}

.filter-field[b-z8mm0mewpo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.filter-field .form-label[b-z8mm0mewpo] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.filter-field .form-select[b-z8mm0mewpo] {
    width: 100%;
}

.filter-aux[b-z8mm0mewpo] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* ── Calendar header (year nav + view toggle) ──────────────────────────── */
[b-z8mm0mewpo] .bk-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
    position: relative;
    flex-shrink: 0;
}

[b-z8mm0mewpo] .bk-year-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

[b-z8mm0mewpo] .bk-year-btn {
    background: none;
    border: none;
    border-radius: 50%;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: var(--font-semibold);
    color: var(--color-text-muted);
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

[b-z8mm0mewpo] .bk-year-btn:hover {
    background-color: color-mix(in srgb, var(--color-primary-dark) 8%, transparent);
    color: var(--color-primary-dark);
}

[b-z8mm0mewpo] .bk-year-title {
    font-size: 1.75rem;
    font-weight: var(--font-bold);
    cursor: pointer;
    color: var(--color-text);
    background: none;
    border: none;
    padding: 0.15rem 0.6rem;
    line-height: 1.2;
    border-radius: var(--radius-md);
    transition: background-color var(--duration-fast) var(--ease-out);
}

[b-z8mm0mewpo] .bk-year-title:hover {
    background-color: color-mix(in srgb, var(--color-primary-dark) 6%, transparent);
    text-decoration: none;
}

[b-z8mm0mewpo] .bk-view-toggle {
    display: flex;
    gap: 0;
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    padding: 0.2rem;
}

[b-z8mm0mewpo] .bk-view-btn {
    padding: 0.4rem 1.1rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

[b-z8mm0mewpo] .bk-view-btn:hover:not(.active) {
    color: var(--color-text);
    background-color: color-mix(in srgb, var(--color-background) 60%, transparent);
}

[b-z8mm0mewpo] .bk-view-btn.active {
    background: var(--color-primary-dark);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* ── Year picker popup ──────────────────────────────────────────────────── */
[b-z8mm0mewpo] .bk-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

[b-z8mm0mewpo] .bk-year-picker {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background: var(--color-background);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-3);
    padding: var(--spacing-md);
    min-width: 240px;
    margin-top: var(--space-2xs);
}

[b-z8mm0mewpo] .bk-yp-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

[b-z8mm0mewpo] .bk-yp-arrow {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 50%;
    color: var(--color-text);
    transition: background-color var(--duration-fast) var(--ease-out);
}

[b-z8mm0mewpo] .bk-yp-arrow:hover {
    background: var(--color-surface);
}

[b-z8mm0mewpo] .bk-yp-range {
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

[b-z8mm0mewpo] .bk-yp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
}

[b-z8mm0mewpo] .bk-yp-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 0.45rem 0.25rem;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text);
    text-align: center;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

[b-z8mm0mewpo] .bk-yp-btn:hover {
    background: var(--color-surface-alt);
}

[b-z8mm0mewpo] .bk-yp-selected {
    background: var(--color-primary-dark);
    color: #fff;
    font-weight: var(--font-bold);
}

[b-z8mm0mewpo] .bk-yp-selected:hover {
    background: var(--color-primary-dark);
}

[b-z8mm0mewpo] .bk-yp-today:not(.bk-yp-selected) {
    border-color: var(--color-accent);
    font-weight: var(--font-bold);
}

/* ── Scroll area ────────────────────────────────────────────────────────── */
[b-z8mm0mewpo] .bk-scroll-area {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

/* ── Month view ─────────────────────────────────────────────────────────── */
[b-z8mm0mewpo] .bk-weekday-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-background);
    border-bottom: 2px solid var(--color-border);
    padding: 0.5rem 0;
}

[b-z8mm0mewpo] .bk-weekday {
    text-align: center;
    font-size: 0.8rem;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

[b-z8mm0mewpo] .bk-month-section {
    margin-top: var(--spacing-lg);
}

[b-z8mm0mewpo] .bk-month-title {
    font-size: 1.3rem;
    font-weight: var(--font-bold);
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
    padding-left: var(--space-2xs);
}

[b-z8mm0mewpo] .bk-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
}

[b-z8mm0mewpo] .bk-day {
    min-height: 6rem;
    padding: 0.5rem;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--color-background);
}

[b-z8mm0mewpo] .bk-day-empty {
    background: var(--color-surface);
    min-height: 6rem;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

[b-z8mm0mewpo] .bk-day-today {
    background: color-mix(in srgb, var(--color-secondary) 6%, transparent);
}

[b-z8mm0mewpo] .bk-num {
    /* Fixed 1.6rem box (the today-circle size) for EVERY day so the today
       highlight never changes the header height and pushes that cell's bars
       down out of line with neighbouring days. */
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-size: 0.85rem;
    font-weight: var(--font-medium);
    color: var(--color-text);
    line-height: 1;
    margin-bottom: 0.25rem;
}

[b-z8mm0mewpo] .bk-num-today {
    /* Shares the 1.6rem-tall box from .bk-num; only adds the circle + width. */
    width: 1.6rem;
    justify-content: center;
    background-color: var(--color-accent);
    color: var(--color-text-on-accent);
    border-radius: 50%;
    font-weight: var(--font-bold);
}

/* ── Initial circles (modal header + day-cell decoration) ──────────────── */
[b-z8mm0mewpo] .bk-initial {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: var(--font-bold);
    color: #fff;
    flex-shrink: 0;
}

[b-z8mm0mewpo] .bk-initial-lg {
    width: 2rem;
    height: 2rem;
    font-size: 0.85rem;
}

/* Platform colours for initial circles — intentional brand colours, no
   tokens. Each platform owns these hex values regardless of theme. */
[b-z8mm0mewpo] .bk-init-airbnb      { background-color: #FF5A5F; }
[b-z8mm0mewpo] .bk-init-bookingcom  { background-color: #003580; }
[b-z8mm0mewpo] .bk-init-vrbo        { background-color: #0E7C86; }
[b-z8mm0mewpo] .bk-init-expedia     { background-color: #FBAF17; color: #1a1a2e; }
[b-z8mm0mewpo] .bk-init-tripadvisor { background-color: #34E0A1; color: #1a1a2e; }
[b-z8mm0mewpo] .bk-init-other       { background-color: #616161; }

/* ── Year view (mini-grid per month) ───────────────────────────────────── */
[b-z8mm0mewpo] .bk-year-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

[b-z8mm0mewpo] .bk-mini-title {
    font-size: 1rem;
    font-weight: var(--font-bold);
    color: var(--color-text);
    margin-bottom: 0.4rem;
}

[b-z8mm0mewpo] .bk-mini-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

[b-z8mm0mewpo] .bk-mini-hdr {
    padding: 0.3rem 0.1rem;
    text-align: center;
    font-size: 0.65rem;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    color: #fff;
    background: var(--color-primary-dark);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid var(--color-border);
}

[b-z8mm0mewpo] .bk-mini-day {
    min-height: 3.5rem;
    padding: 0.2rem;
    background: var(--color-background);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    position: relative;
}

[b-z8mm0mewpo] .bk-mini-day-empty {
    background: var(--color-surface-alt);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

[b-z8mm0mewpo] .bk-mini-day-today {
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

[b-z8mm0mewpo] .bk-mini-num {
    /* Fixed 1.3rem box (the mini today-circle size) so the today highlight
       doesn't shift this cell's bars relative to its neighbours. */
    height: 1.3rem;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: var(--font-medium);
    color: var(--color-text);
    line-height: 1;
    margin-bottom: 0.15rem;
}

[b-z8mm0mewpo] .bk-mini-num-today {
    width: 1.3rem;
    justify-content: center;
    background-color: var(--color-accent);
    color: var(--color-text-on-accent);
    border-radius: 50%;
    font-weight: var(--font-bold);
    font-size: 0.65rem;
}

/* ── Booking bars (shared by year + month views; rendered by
   BookingBarButton — ::deep is REQUIRED here, not redundant) ──────────── */
[b-z8mm0mewpo] .bk-bar {
    height: 1.2rem;
    margin: 1px -0.2rem 0;
    padding: 0 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    /* button reset */
    background: none;
    border: none;
    font-family: inherit;
    text-align: left;
}

[b-z8mm0mewpo] .bk-bar:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55);
}

[b-z8mm0mewpo] .bk-bar-start {
    margin-left: 0;
    border-top-left-radius: 0.6rem;
    border-bottom-left-radius: 0.6rem;
    padding-left: 0.35rem;
}

[b-z8mm0mewpo] .bk-bar-end {
    margin-right: 0;
    border-top-right-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
}

/* Property name — shrinks aggressively before guest name */
[b-z8mm0mewpo] .bk-bar-prop {
    flex: 0 999 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.88;
}

/* Guest name — shrinks (with ellipsis) only after prop is gone */
[b-z8mm0mewpo] .bk-bar-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--font-semibold);
}

[b-z8mm0mewpo] .bk-bar-amount {
    flex: 0 0 auto;
    opacity: 0.9;
}

[b-z8mm0mewpo] .bk-bar-guests {
    flex: 0 0 auto;
    opacity: 0.85;
}

/* Month view bars — taller and bled to the full cell width */
[b-z8mm0mewpo] .bk-month-bar {
    height: 1.6rem;
    margin: 2px -0.5rem 0;
    font-size: 0.72rem;
}

/* Restore cap alignment after .bk-month-bar's margin shorthand
   overrides .bk-bar-start / .bk-bar-end */
[b-z8mm0mewpo] .bk-month-bar.bk-bar-start {
    margin-left: 0;
}

[b-z8mm0mewpo] .bk-month-bar.bk-bar-end {
    margin-right: 0;
}

/* Lane spacers — invisible blocks that reserve a bar's exact height so a booking
   below an ended booking keeps its row instead of collapsing upward. One per
   vacant lane; heights mirror .bk-month-bar (month) and .bk-bar (mini) across
   the responsive breakpoints below. */
[b-z8mm0mewpo] .bk-month-placeholder {
    height: 1.6rem;
    margin-top: 2px;
}

[b-z8mm0mewpo] .bk-mini-placeholder {
    height: 1.2rem;
    margin-top: 1px;
}

/* Platform bar colours — intentional brand colours, no tokens. */
[b-z8mm0mewpo] .bk-bar-airbnb      { background-color: #FF5A5F; color: #fff; }
[b-z8mm0mewpo] .bk-bar-bookingcom  { background-color: #003580; color: #fff; }
[b-z8mm0mewpo] .bk-bar-vrbo        { background-color: #0E7C86; color: #fff; }
[b-z8mm0mewpo] .bk-bar-expedia     { background-color: #FBAF17; color: #1a1a2e; }
[b-z8mm0mewpo] .bk-bar-tripadvisor { background-color: #34E0A1; color: #1a1a2e; }
[b-z8mm0mewpo] .bk-bar-other       { background-color: #616161; color: #fff; }

/* Cancelled bar override — !important needed to beat the platform
   colour classes which sit at the same specificity. */
[b-z8mm0mewpo] .bk-bar-cancelled {
    background-color: #f8a4b8 !important;
    color: #721c24 !important;
}

[b-z8mm0mewpo] .bk-bar-cancelled .bk-bar-name {
    text-decoration: line-through;
}

/* ── Detail modal ───────────────────────────────────────────────────────── */
.bk-modal-overlay[b-z8mm0mewpo] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    animation: bk-fade-in-b-z8mm0mewpo 0.15s ease-out;
}

@keyframes bk-fade-in-b-z8mm0mewpo {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes bk-slide-up-b-z8mm0mewpo {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

[b-z8mm0mewpo] .bk-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

[b-z8mm0mewpo] .bk-modal {
    position: relative;
    background: var(--color-background);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-4);
    width: 100%;
    max-width: 540px;
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: bk-slide-up-b-z8mm0mewpo 0.2s ease-out;
}

[b-z8mm0mewpo] .bk-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: var(--color-primary-dark);
    color: #fff;
    flex-shrink: 0;
}

[b-z8mm0mewpo] .bk-modal-title-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}

[b-z8mm0mewpo] .bk-modal-title-row h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: var(--font-semibold);
    color: #fff;
    line-height: 1.3;
}

[b-z8mm0mewpo] .bk-modal-title-row .badge {
    font-size: 0.7rem;
    font-weight: var(--font-medium);
    padding: 0.2em 0.55em;
}

[b-z8mm0mewpo] .bk-modal-header .btn-close-white {
    filter: brightness(0) invert(1);
    opacity: 0.7;
    transition: opacity var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
}

[b-z8mm0mewpo] .bk-modal-header .btn-close-white:hover {
    opacity: 1;
}

[b-z8mm0mewpo] .bk-modal-body {
    padding: 1.25rem 1.5rem 1.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
}

[b-z8mm0mewpo] .bk-modal-section {
    margin-bottom: var(--spacing-lg);
}

[b-z8mm0mewpo] .bk-modal-section:last-child {
    margin-bottom: 0;
}

[b-z8mm0mewpo] .bk-modal-section h3 {
    font-size: 0.72rem;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2xs);
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
}

[b-z8mm0mewpo] .bk-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.3rem 0;
    font-size: 0.85rem;
}

[b-z8mm0mewpo] .bk-detail-row + .bk-detail-row {
    border-top: 1px solid var(--color-border-light);
}

[b-z8mm0mewpo] .bk-detail-highlight {
    background: color-mix(in srgb, var(--color-primary-dark) 4%, transparent);
    margin: 0.15rem -0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-sm);
}

[b-z8mm0mewpo] .bk-detail-label {
    color: var(--color-text-muted);
    flex-shrink: 0;
    margin-right: var(--spacing-sm);
}

[b-z8mm0mewpo] .bk-detail-value {
    font-weight: var(--font-medium);
    text-align: right;
    word-break: break-word;
    min-width: 0;
    color: var(--color-text);
}

[b-z8mm0mewpo] .bk-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    [b-z8mm0mewpo] .bk-year-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    [b-z8mm0mewpo] .bk-day {
        min-height: 4.5rem;
        padding: 0.3rem;
    }

    [b-z8mm0mewpo] .bk-day-empty {
        min-height: 4.5rem;
    }

    /* Month bar: cell padding shrinks to 0.3rem */
    [b-z8mm0mewpo] .bk-month-bar {
        height: 1.4rem;
        margin-left: -0.3rem;
        margin-right: -0.3rem;
    }

    [b-z8mm0mewpo] .bk-month-placeholder {
        height: 1.4rem;
    }

    [b-z8mm0mewpo] .bk-year-grid {
        grid-template-columns: 1fr;
    }

    [b-z8mm0mewpo] .bk-cal-header {
        flex-wrap: wrap;
        gap: var(--space-2xs);
    }

    [b-z8mm0mewpo] .bk-year-title {
        font-size: 1.3rem;
    }

    [b-z8mm0mewpo] .bk-modal {
        max-width: 100%;
        max-height: calc(100vh - 2rem);
    }

    .bk-modal-overlay[b-z8mm0mewpo] {
        padding: var(--spacing-md);
    }

    [b-z8mm0mewpo] .bk-modal-body {
        padding: 1rem 1rem 1.25rem;
    }

    [b-z8mm0mewpo] .bk-modal-header {
        padding: 1rem 1.15rem;
    }
}

@media (max-width: 575.98px) {
    [b-z8mm0mewpo] .bk-day {
        min-height: 3rem;
        padding: 0.2rem;
    }

    [b-z8mm0mewpo] .bk-day-empty {
        min-height: 3rem;
    }

    /* Month bar: cell padding shrinks to 0.2rem */
    [b-z8mm0mewpo] .bk-month-bar {
        height: 0.9rem;
        margin-left: -0.2rem;
        margin-right: -0.2rem;
        font-size: 0.5rem;
    }

    [b-z8mm0mewpo] .bk-month-placeholder,
    [b-z8mm0mewpo] .bk-mini-placeholder {
        height: 0.9rem;
    }

    [b-z8mm0mewpo] .bk-num {
        font-size: 0.7rem;
    }

    [b-z8mm0mewpo] .bk-weekday {
        font-size: 0.65rem;
    }

    [b-z8mm0mewpo] .bk-month-title {
        font-size: 1rem;
    }

    [b-z8mm0mewpo] .bk-mini-day {
        min-height: 2.5rem;
    }

    [b-z8mm0mewpo] .bk-bar {
        height: 0.9rem;
        font-size: 0.5rem;
    }

    /* Very small screens: show coloured strip only, hide all text */
    [b-z8mm0mewpo] .bk-bar-prop,
    [b-z8mm0mewpo] .bk-bar-name,
    [b-z8mm0mewpo] .bk-bar-amount,
    [b-z8mm0mewpo] .bk-bar-guests {
        display: none;
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════
   The hardcoded `#eee` / `#f8f8f8` borders + small-opacity rgba tints
   replaced with token variants above; in dark mode the tokens swap to
   --color-border-light (a darker grey) and color-mix() picks up the dark
   surface base. The platform brand colours stay fixed in both themes
   (intentional anchors). What still needs explicit dark anchoring:
     - .bk-day-empty uses --color-surface (mid-grey-light, dark in dark)
       which can be too close to --color-background — lift to surface-alt
       so empty cells stay distinct on dark.
     - .bk-detail-highlight color-mix base reads thin on dark
       background — re-anchor to --color-surface-alt for a visible tint.
   ══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-z8mm0mewpo],
[data-theme="dark"] .bk-year-title[b-z8mm0mewpo],
[data-theme="dark"] .bk-month-title[b-z8mm0mewpo],
[data-theme="dark"] .bk-mini-title[b-z8mm0mewpo] {
    color: var(--color-primary);
}

[data-theme="dark"] .bk-day-empty[b-z8mm0mewpo] {
    background: var(--color-surface-alt);
}

[data-theme="dark"] .bk-mini-day-empty[b-z8mm0mewpo] {
    background: var(--color-surface);
}

[data-theme="dark"] .bk-day-today[b-z8mm0mewpo] {
    background: color-mix(in srgb, var(--color-secondary) 14%, var(--color-background));
}

[data-theme="dark"] .bk-mini-day-today[b-z8mm0mewpo] {
    background: color-mix(in srgb, var(--color-accent) 14%, var(--color-background));
}

[data-theme="dark"] .bk-detail-highlight[b-z8mm0mewpo] {
    background: var(--color-surface-alt);
}

[data-theme="dark"] .bk-year-btn:hover[b-z8mm0mewpo] {
    background-color: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
}

[data-theme="dark"] .bk-year-title:hover[b-z8mm0mewpo] {
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

[data-theme="dark"] .bk-view-btn:hover:not(.active)[b-z8mm0mewpo] {
    background-color: color-mix(in srgb, var(--color-surface) 60%, transparent);
}
/* /Components/Pages/Invoicing/Invoices.razor.rz.scp.css */
/* ==========================================================================
   Invoices page — Lisbon Modern v1.1.5
   Single-pass port: tokens, auto-fit KPI grid, column priority hiding,
   dark mode. No filter controls, no Blazor InputXxx components, so the
   (a) pattern (no wrapper, no ::deep) is sufficient for every dark-mode
   rule. See brief §6.3.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-7zq39xq20o] {
    margin-bottom: var(--spacing-lg);
}

.page-header h1[b-7zq39xq20o] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-7zq39xq20o] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Summary KPI grid ───────────────────────────────────────────────────── */
.kpi-grid[b-7zq39xq20o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--spacing-md);
}

.summary-card[b-7zq39xq20o] {
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    background-color: var(--color-surface);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.summary-card:hover[b-7zq39xq20o] {
    box-shadow: var(--elevation-3);
}

.summary-card .h3[b-7zq39xq20o] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
}

/* ── Table chrome ───────────────────────────────────────────────────────── */
[b-7zq39xq20o] .table {
    font-size: var(--text-sm);
}

[b-7zq39xq20o] .table th {
    color: var(--color-text-muted);
    font-weight: var(--font-semibold);
    border-bottom: 2px solid var(--color-border);
}

/* ── Scroll containment ──────────────────────────────────────────────────
   Bootstrap's .table-responsive is `overflow-x:auto` only; without a width cap
   the wrapper grows to the table's intrinsic width and bleeds past the page at
   390px (founder round-2). Cap it to the container and let the inner table take
   its content width so the scroll engages INSIDE the card instead of pushing the
   page wider. Matches the design-system invariant (tokens CHANGELOG ds-v1.1.5:
   "min-width:0; max-width:100% on the wrapper is mandatory"). */
[b-7zq39xq20o] .table-responsive {
    min-width: 0;
    max-width: 100%;
}

/* ── Column priority hiding ──────────────────────────────────────────────
   Mirrors the GuestRegistrations + StatusSiba pattern. Hidden cells
   collapse to zero width but still occupy a column slot, so any
   colspan-style detail rows remain correct. (No detail rows on this
   page, but the principle holds.)
   ──────────────────────────────────────────────────────────────────────── */

/* Phone (≤599px): show only priority-1 columns. */
@media (max-width: 599.98px) {
    [b-7zq39xq20o] th[data-priority="2"],
    [b-7zq39xq20o] td[data-priority="2"],
    [b-7zq39xq20o] th[data-priority="3"],
    [b-7zq39xq20o] td[data-priority="3"],
    [b-7zq39xq20o] th[data-priority="4"],
    [b-7zq39xq20o] td[data-priority="4"] {
        display: none;
    }
}

/* Tablet (600–899px): show priority 1+2, drop 3+4. */
@media (min-width: 600px) and (max-width: 899.98px) {
    [b-7zq39xq20o] th[data-priority="3"],
    [b-7zq39xq20o] td[data-priority="3"],
    [b-7zq39xq20o] th[data-priority="4"],
    [b-7zq39xq20o] td[data-priority="4"] {
        display: none;
    }
}

/* Small laptop (900–1099px): show priority 1+2+3, drop 4. */
@media (min-width: 900px) and (max-width: 1099.98px) {
    [b-7zq39xq20o] th[data-priority="4"],
    [b-7zq39xq20o] td[data-priority="4"] {
        display: none;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    [b-7zq39xq20o] .table {
        font-size: var(--text-xs);
    }

    .summary-card .h3[b-7zq39xq20o] {
        font-size: 1.2rem;
    }
}

/* Phone fit (≤599px): with priority 2/3/4 hidden the remaining columns are
   Invoice # / Client / Total / Status / Actions. Round-2 only capped the
   .table-responsive wrapper, so the row content still ran off the right at
   390px because Bootstrap's default cell padding (≈0.5rem each side ×5 cols)
   plus the nowrap currency/Client text forced the table wider than the card.
   Fit it WITHOUT horizontal scroll: condense cell padding, let the Client cell
   (the only free-text column left) wrap instead of widening the row, and
   compact the action buttons. 768/1440 are above this query and stay approved. */
@media (max-width: 599.98px) {            /* matches --bp-sm phone band */
    [b-7zq39xq20o] .table th,
    [b-7zq39xq20o] .table td {
        padding: var(--space-2xs) var(--space-xs);
    }

    /* Client column (3rd visible, priority-1): allow the name + NIF subline to
       wrap so it yields width rather than pushing the actions column off. */
    [b-7zq39xq20o] .table td[data-priority="1"]:nth-child(3) {
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
    }

    /* Keep the action buttons tight so the last column doesn't widen the row. */
    [b-7zq39xq20o] .table td:last-child .btn {
        padding: 0.2rem 0.35rem;
    }

    /* The NIF subline is a fixed-shape 9-digit string: wrapping it costs a line and yields no useful width, and the
       name above it still wraps. Localizing the status badge (pt-PT "Emitido" is wider than "Issued") had pushed both
       it and the invoice number onto extra lines. Measured page height at 390px, over four variants:
       baseline 4714 en / 4709 pt; localized badge with no rule 4714 / 5847; this rule 4502 / 4709; pinning the
       invoice number instead 6046 / 6291; pinning both 4811 / 4805 — pinning the first column widens it, so the name
       wraps more and both cultures grow. This rule is the only one that helps both. */
    [b-7zq39xq20o] .table td[data-priority="1"]:nth-child(3) small {
        white-space: nowrap;
    }

}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════
   Cross-cutting Bootstrap chrome (.alert-*, .badge.bg-*, .table) moved
   to the global wwwroot/css/bootstrap-dark.css per brief §6.3 convention.
   Only the .summary-card overrides stay here (custom class for this page).
   ══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .summary-card .h3[b-7zq39xq20o] {
    color: var(--color-primary);
}

[data-theme="dark"] .summary-card h6[b-7zq39xq20o] {
    color: var(--color-text-muted);
}
/* /Components/Pages/Invoicing/Overview.razor.rz.scp.css */
/* ==========================================================================
   Overview (Invoicing) page — Lisbon Modern v1.1.5
   Clean-slate port: tokens, auto-fit filter grid + KPI grid, column-priority
   hiding on the overdue table, dark mode for page-specific chrome only.
   Cross-cutting Bootstrap chrome (.card, .alert-*, .badge.bg-*,
   .form-control, .form-select, .table, .pagination) handled by the global
   wwwroot/css/bootstrap-dark.css per brief §6.3.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-f2zi9w4nhi] {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-f2zi9w4nhi] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-f2zi9w4nhi] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Cards (filter / KPI / charts / overdue) ───────────────────────────── */
.card[b-f2zi9w4nhi] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.card:hover[b-f2zi9w4nhi] {
    box-shadow: var(--elevation-2);
}

.card-header[b-f2zi9w4nhi] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-header h2[b-f2zi9w4nhi] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    font-size: 1rem;
    letter-spacing: 0.01em;
}

.card-body[b-f2zi9w4nhi] {
    padding: var(--spacing-lg);
}

/* ── Filter / form auto-fit grid ────────────────────────────────────────── */
.filter-grid[b-f2zi9w4nhi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--spacing-md);
    align-items: end;
}

.filter-field[b-f2zi9w4nhi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.filter-field .form-label[b-f2zi9w4nhi] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.filter-field .form-control[b-f2zi9w4nhi],
.filter-field .form-select[b-f2zi9w4nhi] {
    width: 100%;
}

.filter-action[b-f2zi9w4nhi] {
    display: flex;
    align-items: flex-end;
}

.filter-action .btn[b-f2zi9w4nhi] {
    height: 2.375rem;
}

/* Wherever the filter grid fits all four cells on one row, this page's controls are the -sm
   variants (31px) while 2.375rem is Bootstrap's DEFAULT control height (38px) — so the button
   overhung its neighbours by 7px, all of it upward because .filter-action bottom-aligns.
   Dropping the override lets .btn-sm compute the same box the -sm controls do (21px line + 8px
   padding + 2px border = 31px); no font change was needed, both were already 14px. The
   override stays below that width, where the grid wraps the button onto a row of its own and
   38px is the more comfortable target with nothing beside it to match.

   1194px is MEASURED, not a design breakpoint: the grid needs 848px for four columns
   (4 × 200px minmax + 3 × 16px gap) and reaches it at a 1194px viewport, the rest being the
   240px sidebar and the page's padding. It therefore drifts if any of those change, which is
   why OverviewLayoutTests.ClearButton_MatchesTheControlsBesideIt pins it from BOTH sides —
   1200 fails if the wrap width rises above the query, 1190 fails if it falls below. Re-measure
   and move both together; do not "tidy" this to --bp-lg (1280), which leaves 1194-1279
   overhanging. */
@media (min-width: 1194px) {
    .filter-action .btn[b-f2zi9w4nhi] {
        height: auto;
    }
}

/* ── KPI grid ───────────────────────────────────────────────────────────── */
.kpi-grid[b-f2zi9w4nhi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--spacing-md);
}

.kpi-card[b-f2zi9w4nhi] {
    text-align: center;
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: var(--spacing-md);
    transition: box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

/* Figures on one line across a row of cards: label / value / hint sit in the GRID's rows
   rather than each card's own flow, so a label that wraps to two lines — pt-PT does it on
   KpiHostPayout, KpiExtraChargeRevenue and KpiOverdue at the widths where cards share a row;
   at 390 every card is full-width and nothing wraps — pushes every figure in that row of
   cards down together instead of only its own. Measured on the page at 1440, value tops
   within the card: pt-PT 43/43/66/66/66 -> 66 x5; en-US does not move (its 1440 light cell
   re-captures byte-identical).
   `span 3` is the child count of the tallest card (ExtraChargeRevenue, the only one with a
   .kpi-hint), and it must move with the markup: a subgridded axis creates no implicit tracks,
   so a fourth child is clamped into the last shared row and PAINTS OVER the hint instead of
   making the card taller (measured — a 4-child card comes out the same height as its 2-child
   neighbours, so the symptom is overlapping text, not overflow).
   `row-gap: 0` is load-bearing: a subgrid inherits the parent's gutters (CSS Grid 2), so
   .kpi-grid's 16px gap would otherwise land inside every card as two internal gaps, +32px per
   card (measured). It reclaims 24 of those 32; the last 8px stays as dead space under the
   figure on every card whose ROW OF CARDS holds no .kpi-hint. So the block grows 8px per such
   row — nothing at 1440 (all five share the hint card's row), +8px at 768 (3+2), +32px at 390
   (one card per row) — and only `row-gap: 0` on .kpi-grid removes it, taking the gap BETWEEN
   wrapped rows of cards with it.
   Gated on @supports because the other three declarations still apply without subgrid and
   lay the row out differently than it is today; subgrid itself is Baseline widely-available
   (2026-03) and the repo already ships :has() (MainLayout.razor.css) from the same cohort.
   Flex + margin-top:auto — the Invoicing.Web .stat-card fix, 22945955 — does not port: it
   bottom-anchors the LAST child, which on the ExtraChargeRevenue card is the hint, and
   measured it regresses the already-correct en-US row to 92/92/92/43/92. */
@supports (grid-template-rows: subgrid) {
    .kpi-card[b-f2zi9w4nhi] {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        row-gap: 0;
    }
}

.kpi-card:hover[b-f2zi9w4nhi] {
    box-shadow: var(--elevation-3);
    transform: translateY(-1px);
}

.kpi-card.is-alert[b-f2zi9w4nhi] {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 1px var(--color-danger), var(--elevation-1);
}

.kpi-label[b-f2zi9w4nhi] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--spacing-xs);
}

.kpi-value[b-f2zi9w4nhi] {
    font-size: 1.6rem;
    font-weight: var(--font-bold);
    line-height: 1.1;
    color: var(--color-primary);
}

.kpi-value.kpi-value-success[b-f2zi9w4nhi] { color: var(--color-success-dark); }
.kpi-value.kpi-value-info[b-f2zi9w4nhi]    { color: var(--color-secondary); }
.kpi-value.kpi-value-danger[b-f2zi9w4nhi]  { color: var(--color-danger); }
.kpi-value.kpi-value-muted[b-f2zi9w4nhi]   { color: var(--color-text-muted); }

.kpi-hint[b-f2zi9w4nhi] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin-top: var(--spacing-xs);
}

/* ── Charts grid (revenue + status side-by-side on lg, stacked on md) ──── */
.charts-grid[b-f2zi9w4nhi] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-md);
}

@media (max-width: 991.98px) {
    .charts-grid[b-f2zi9w4nhi] {
        grid-template-columns: 1fr;
    }
}

.chart-canvas-wrap[b-f2zi9w4nhi] {
    min-height: 300px;
    position: relative;
}

/* ── Overdue card ───────────────────────────────────────────────────────── */
.overdue-card[b-f2zi9w4nhi] {
    border-color: var(--color-danger);
}

.overdue-header[b-f2zi9w4nhi] {
    background-color: color-mix(in srgb, var(--color-danger) 8%, transparent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    transition: background-color var(--duration-fast) var(--ease-out);
}

.overdue-header:hover[b-f2zi9w4nhi] {
    background-color: color-mix(in srgb, var(--color-danger) 14%, transparent);
}

.overdue-title[b-f2zi9w4nhi] {
    color: var(--color-danger);
    font-weight: var(--font-semibold);
    font-size: 1rem;
    margin: 0;
}

.overdue-chevron[b-f2zi9w4nhi] {
    transition: transform var(--duration-fast) var(--ease-out);
    color: var(--color-danger);
}

.overdue-chevron.is-open[b-f2zi9w4nhi] {
    transform: rotate(180deg);
}

.overdue-body[b-f2zi9w4nhi] {
    padding: 0;
}

[b-f2zi9w4nhi] .table-overdue {
    margin-bottom: 0;
}

[b-f2zi9w4nhi] .table-overdue th {
    color: var(--color-text-muted);
    font-weight: var(--font-semibold);
    border-bottom: 2px solid var(--color-border);
    font-size: var(--text-sm);
}

[b-f2zi9w4nhi] .table-overdue td {
    vertical-align: middle;
}

.overdue-days[b-f2zi9w4nhi] {
    color: var(--color-danger);
    font-weight: var(--font-bold);
}

/* ── Column priority hiding (overdue table) ──────────────────────────────
   Guest + Amount stay visible at every width (priority 1).
   Days Late drops below 600px (priority 2).
   Check-Out drops below 900px (priority 3).
   Property drops below 1100px (priority 4).
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 599.98px) {
    [b-f2zi9w4nhi] th[data-priority="2"],
    [b-f2zi9w4nhi] td[data-priority="2"],
    [b-f2zi9w4nhi] th[data-priority="3"],
    [b-f2zi9w4nhi] td[data-priority="3"],
    [b-f2zi9w4nhi] th[data-priority="4"],
    [b-f2zi9w4nhi] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 600px) and (max-width: 899.98px) {
    [b-f2zi9w4nhi] th[data-priority="3"],
    [b-f2zi9w4nhi] td[data-priority="3"],
    [b-f2zi9w4nhi] th[data-priority="4"],
    [b-f2zi9w4nhi] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 900px) and (max-width: 1099.98px) {
    [b-f2zi9w4nhi] th[data-priority="4"],
    [b-f2zi9w4nhi] td[data-priority="4"] {
        display: none;
    }
}

/* ── Loading row ────────────────────────────────────────────────────────── */
.loading-row[b-f2zi9w4nhi] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-muted);
    margin: var(--spacing-lg) 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header h1[b-f2zi9w4nhi] {
        font-size: 1.3rem;
    }

    .kpi-value[b-f2zi9w4nhi] {
        font-size: 1.35rem;
    }

    [b-f2zi9w4nhi] .table-overdue {
        font-size: var(--text-xs);
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-f2zi9w4nhi] {
        font-size: 1.15rem;
    }

    .card-header[b-f2zi9w4nhi] {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .card-body[b-f2zi9w4nhi] {
        padding: var(--spacing-md);
    }

    .filter-action .btn[b-f2zi9w4nhi] {
        width: 100%;
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════
   Cross-cutting Bootstrap chrome handled by global. Only page-specific
   custom classes here.
   ══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-f2zi9w4nhi] {
    color: var(--color-primary);
}

[data-theme="dark"] .kpi-card.is-alert[b-f2zi9w4nhi] {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 1px var(--color-danger), var(--elevation-1);
}

[data-theme="dark"] .kpi-value.kpi-value-success[b-f2zi9w4nhi] { color: var(--color-success-dark); }
[data-theme="dark"] .kpi-value.kpi-value-info[b-f2zi9w4nhi]    { color: var(--color-secondary); }
[data-theme="dark"] .kpi-value.kpi-value-danger[b-f2zi9w4nhi]  { color: var(--color-danger); }

[data-theme="dark"] .overdue-card[b-f2zi9w4nhi] {
    border-color: var(--color-danger);
}

[data-theme="dark"] .overdue-header[b-f2zi9w4nhi] {
    background-color: color-mix(in srgb, var(--color-danger) 14%, var(--color-surface));
}

[data-theme="dark"] .overdue-header:hover[b-f2zi9w4nhi] {
    background-color: color-mix(in srgb, var(--color-danger) 22%, var(--color-surface));
}
/* /Components/Pages/Privacy.razor.rz.scp.css */
/* ==========================================================================
   Privacy Policy
   Long-form readable layout — narrow column, comfortable line-height,
   sectioned with clear hierarchy.
   ========================================================================== */

.privacy-page[b-txze957pr8] {
    background: var(--color-background);
    color: var(--color-text);
    padding: var(--space-2xl) 0 var(--space-3xl);
}

.privacy-container[b-txze957pr8] {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.privacy-header[b-txze957pr8] {
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border-light);
}

.privacy-title[b-txze957pr8] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    margin: 0 0 var(--space-sm);
    letter-spacing: -0.015em;
}

.privacy-meta[b-txze957pr8] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: 0;
}

.privacy-content section[b-txze957pr8] {
    margin-bottom: var(--space-2xl);
}

.privacy-content h2[b-txze957pr8] {
    color: var(--color-primary);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin: 0 0 var(--space-md);
    letter-spacing: -0.005em;
}

.privacy-content p[b-txze957pr8] {
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: 1.7;
    margin: 0 0 var(--space-md);
}

.privacy-content p:last-child[b-txze957pr8] { margin-bottom: 0; }

.privacy-content ul[b-txze957pr8] {
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: 1.7;
    margin: 0 0 var(--space-md);
    padding-left: 1.5rem;
}

.privacy-content li[b-txze957pr8] {
    margin-bottom: var(--space-2xs);
}

.privacy-content li:last-child[b-txze957pr8] { margin-bottom: 0; }

.privacy-content strong[b-txze957pr8] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
}

.privacy-content a[b-txze957pr8] {
    color: var(--color-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.privacy-content a:hover[b-txze957pr8] {
    color: var(--color-primary);
}

[data-theme="dark"] .privacy-content a[b-txze957pr8] {
    color: var(--color-accent);
}

[data-theme="dark"] .privacy-content a:hover[b-txze957pr8] {
    color: #FFFFFF;
}
/* /Components/Pages/Roadmap.razor.rz.scp.css */
.roadmap-page[b-vmnnllcd8s] {
    max-width: var(--container-default);
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-lg);
    color: var(--color-text);
}

.roadmap-page-header[b-vmnnllcd8s] {
    margin-bottom: var(--space-2xl);
    text-align: center;
}

.roadmap-page-title[b-vmnnllcd8s] {
    color: var(--color-primary);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 var(--space-sm);
}

.roadmap-page-subtitle[b-vmnnllcd8s] {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    max-width: 65ch;
    margin: 0 auto;
}

.roadmap-filter-bar[b-vmnnllcd8s] {
    display: flex;
    gap: var(--space-md);
    align-items: flex-end;
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.roadmap-filter[b-vmnnllcd8s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 180px;
}

.roadmap-filter-label[b-vmnnllcd8s] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: var(--font-medium);
}

.roadmap-counts[b-vmnnllcd8s] {
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

.roadmap-empty[b-vmnnllcd8s] {
    padding: var(--space-2xl);
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
}

.roadmap-legend[b-vmnnllcd8s] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.roadmap-group-icon[b-vmnnllcd8s] {
    color: var(--color-secondary);
    font-size: var(--text-2xl);
    margin-right: var(--space-sm);
    vertical-align: -3px;
}

.roadmap-group[b-vmnnllcd8s] {
    margin-bottom: var(--space-2xl);
}

.roadmap-group-title[b-vmnnllcd8s] {
    color: var(--color-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    margin: 0 0 var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-light);
}

.roadmap-grid[b-vmnnllcd8s] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.roadmap-card[b-vmnnllcd8s] {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--elevation-1);
    transition: box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.roadmap-card:hover[b-vmnnllcd8s] {
    box-shadow: var(--elevation-3);
    transform: translateY(-2px);
}

.roadmap-card-head[b-vmnnllcd8s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.roadmap-card-icon[b-vmnnllcd8s] {
    font-size: var(--text-2xl);
    color: var(--color-primary);
}

.roadmap-card-title[b-vmnnllcd8s] {
    font-size: var(--text-lg);
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    margin: 0;
}

.roadmap-card-summary[b-vmnnllcd8s] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    margin: 0;
    flex: 1;
}

.roadmap-card-details[b-vmnnllcd8s] {
    font-size: var(--text-sm);
    color: var(--color-text);
}

.roadmap-card-details summary[b-vmnnllcd8s] {
    cursor: pointer;
    color: var(--color-secondary);
    font-weight: var(--font-medium);
    list-style: none;
}

.roadmap-card-details summary[b-vmnnllcd8s]::-webkit-details-marker {
    display: none;
}

.roadmap-card-details summary[b-vmnnllcd8s]::before {
    content: "▸ ";
    transition: transform var(--duration-fast) var(--ease-out);
    display: inline-block;
}

.roadmap-card-details[open] summary[b-vmnnllcd8s]::before {
    transform: rotate(90deg);
}

.roadmap-card-description[b-vmnnllcd8s] {
    margin-top: var(--space-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    white-space: pre-wrap;
}

.roadmap-card-foot[b-vmnnllcd8s] {
    border-top: 1px dashed var(--color-border-light);
    padding-top: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.roadmap-card-foot strong[b-vmnnllcd8s] {
    color: var(--color-text);
}

/* Phone: stack the filter bar */
@media (max-width: 599px) {  /* --bp-sm */
    .roadmap-filter-bar[b-vmnnllcd8s] {
        flex-direction: column;
        align-items: stretch;
        position: static;
    }

    .roadmap-filter[b-vmnnllcd8s] {
        min-width: 0;
        width: 100%;
    }

    .roadmap-counts[b-vmnnllcd8s] {
        margin-left: 0;
        text-align: center;
    }
}

/* F1: GET-form filter submit (the @bind selects needed a circuit; anonymous
   visitors no longer open one). Sits on the filter baseline next to the selects. */
.roadmap-filter-apply[b-vmnnllcd8s] {
    align-self: flex-end;
}
/* /Components/Pages/Siba/GuestRegistrations.razor.rz.scp.css */
/* ==========================================================================
   GuestRegistrations page — Lisbon Modern v1.1.5
   Phase A port (round 1): token sweep + dark mode + filter chrome modernization.
   Phase B (deferred): ResponsiveTable wrap, column priority hiding, mobile
   cards for the links table, detail pane animation polish, photo overlay
   visual refinement, StatusBadge primitive migration.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-dqvnczji2u] {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-dqvnczji2u] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-dqvnczji2u] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card[b-dqvnczji2u] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--duration-base) var(--ease-out);
    background: var(--color-surface);
}

.card:hover[b-dqvnczji2u] {
    box-shadow: var(--elevation-3);
}

.card-header[b-dqvnczji2u] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-header h2[b-dqvnczji2u] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    font-size: 1.05rem;
    margin-bottom: 0;
}

.card-body[b-dqvnczji2u] {
    padding: var(--spacing-lg);
}

/* ── Filter / form auto-fit grid ────────────────────────────────────────────
   Replaces the Bootstrap `.row.g-3 .col-md-3` pattern with a token-driven
   grid that adapts smoothly to any container width without breakpoint cliffs.
   Each child is a vertical stack: label on top, control below.
   ────────────────────────────────────────────────────────────────────────── */
.filter-grid[b-dqvnczji2u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--spacing-md);
    align-items: end;
}

.filter-field[b-dqvnczji2u] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.filter-field .form-label[b-dqvnczji2u] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.filter-field .form-control[b-dqvnczji2u],
.filter-field .form-select[b-dqvnczji2u] {
    width: 100%;
}

/* Action button slot that aligns to the bottom of the grid (matches the
   field height since fields stack label-over-control). */
.filter-action[b-dqvnczji2u] {
    display: flex;
    align-items: flex-end;
}

.filter-action .btn[b-dqvnczji2u] {
    height: 2.375rem; /* matches Bootstrap form-control default height */
}

/* Bootstrap's default .btn-outline-secondary foreground (#6c757d) is 4.44:1 on the
   --color-surface backdrop — just under the 4.5:1 AA threshold, and it reads as disabled
   next to the filled buttons. --color-text-muted is an existing token at 5.83:1. */
.filter-action .btn-outline-secondary[b-dqvnczji2u] {
    color: var(--color-text-muted);
}

/* ── Status pill helpers ────────────────────────────────────────────────── */
[b-dqvnczji2u] .badge {
    font-size: 0.8rem;
    padding: 0.35em 0.65em;
    font-weight: var(--font-medium);
}

/* ── Action-button outline variants ─────────────────────────────────────────
   Tokenized replacements for the previous hardcoded hex (#343a40, #dc3545,
   #2B6CB0). All three button styles now read on both light and dark
   surfaces because the underlying tokens swap with theme.
   ────────────────────────────────────────────────────────────────────────── */
[b-dqvnczji2u] .btn-action-outline {
    border: 1px solid var(--color-text);
    color: var(--color-text);
    background-color: transparent;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

[b-dqvnczji2u] .btn-action-outline:hover {
    background-color: var(--color-text);
    color: var(--color-background);
}

[b-dqvnczji2u] .btn-action-danger {
    color: #DC2626;
    border-color: #DC2626;
}

[b-dqvnczji2u] .btn-action-danger:hover {
    background-color: #DC2626;
    border-color: #DC2626;
    color: #FFFFFF;
}

[data-theme="dark"] .btn-action-danger[b-dqvnczji2u] {
    color: #FCA5A5;
    border-color: #FCA5A5;
}

[data-theme="dark"] .btn-action-danger:hover[b-dqvnczji2u] {
    background-color: #DC2626;
    border-color: #DC2626;
    color: #FFFFFF;
}

[b-dqvnczji2u] .btn-action-link {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

[b-dqvnczji2u] .btn-action-link:hover {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

/* ── Existing-links table row chrome ────────────────────────────────────── */
[b-dqvnczji2u] .guest-link-row {
    cursor: pointer;
}

[b-dqvnczji2u] .guest-link-row:hover {
    background-color: var(--color-surface-alt);
}

/* ── Status bar (per-guest segment chips on each link row) ──────────────── */
[b-dqvnczji2u] .status-bar {
    display: flex;
    height: 1.3rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    min-width: 2rem;
    max-width: 3.5rem;
    margin: 0 auto;
}

[b-dqvnczji2u] .status-bar-segment {
    height: 100%;
    transition: background-color var(--duration-fast) var(--ease-out);
}

[b-dqvnczji2u] .status-bar-segment + .status-bar-segment {
    border-left: 1px solid rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .status-bar-segment + .status-bar-segment[b-dqvnczji2u] {
    border-left-color: rgba(0, 0, 0, 0.35);
}

[b-dqvnczji2u] .status-bar-empty {
    background-color: var(--color-surface-alt);
}

/* ── Detail row + pane ──────────────────────────────────────────────────── */
[b-dqvnczji2u] .guest-link-detail-row td {
    padding: 0 !important;
    border-top: none;
}

.guest-link-detail-pane[b-dqvnczji2u] {
    padding: var(--spacing-lg);
    background-color: var(--color-surface-alt);
    border-top: 2px solid var(--color-primary);
}

.detail-pane-title[b-dqvnczji2u] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    font-size: 0.95rem;
    margin-bottom: var(--spacing-md);
}

.detail-pair[b-dqvnczji2u] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    flex-wrap: wrap;
}

.detail-pair-label[b-dqvnczji2u] {
    font-weight: var(--font-semibold);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    flex-shrink: 0;
    white-space: nowrap;
}

.detail-pair-value[b-dqvnczji2u] {
    color: var(--color-text);
    word-break: break-word;
    min-width: 0;
}

.guest-detail-list[b-dqvnczji2u] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.guest-detail-item[b-dqvnczji2u] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--spacing-md);
    padding: 0.6rem 0.85rem;
    background-color: var(--color-background);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
}

.guest-detail-indicator[b-dqvnczji2u] {
    width: 4px;
    min-height: 2rem;
    border-radius: 2px;
    flex-shrink: 0;
}

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

.guest-detail-name[b-dqvnczji2u] {
    font-size: 0.9rem;
    color: var(--color-text);
}

.guest-detail-meta[b-dqvnczji2u] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 0.15rem;
}

.guest-detail-status[b-dqvnczji2u] {
    flex-shrink: 0;
}

.guest-detail-remaining[b-dqvnczji2u] {
    margin-top: var(--spacing-sm);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ── Copied-to-clipboard tooltip ────────────────────────────────────────── */
[b-dqvnczji2u] .copied-tooltip {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 6px;
    padding: 4px 10px;
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--elevation-2);
    animation: tooltipFadeIn-b-dqvnczji2u 0.15s ease-out;
    z-index: 10;
}

[b-dqvnczji2u] .copied-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 1rem;
    border: 5px solid transparent;
    border-top-color: var(--color-primary);
}

@keyframes tooltipFadeIn-b-dqvnczji2u {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Clickable guest rows in the link detail pane ───────────────────────── */
.guest-detail-clickable[b-dqvnczji2u] {
    cursor: pointer;
    transition: transform 0.15s ease,
                box-shadow 0.15s ease,
                background-color 0.15s ease;
}

.guest-detail-clickable:hover[b-dqvnczji2u] {
    transform: translateY(-1px);
    box-shadow: var(--elevation-2);
    background-color: var(--color-surface);
}

/* ══ Registration Queue section ════════════════════════════════════════════ */

.queue-section-header[b-dqvnczji2u] {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 2px solid var(--color-surface-alt);
}

.queue-section-header h2[b-dqvnczji2u] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.4rem;
    margin-bottom: var(--spacing-xs);
}

/* Allow SearchableSelect dropdowns to overflow the table container while editing. */
.table-responsive.editing-active[b-dqvnczji2u] {
    overflow: visible;
}

[b-dqvnczji2u] .table td {
    padding: var(--spacing-md);
    vertical-align: middle;
}

.queue-entry-row[b-dqvnczji2u] {
    cursor: pointer;
    scroll-margin-top: 5rem;
}

.queue-entry-row:hover[b-dqvnczji2u] {
    background-color: var(--color-surface-alt);
}

/* ── Document photo inline (inside detail pane) ─────────────────────────── */
.doc-photo-inline[b-dqvnczji2u] {
    display: flex;
    justify-content: center;
}

.doc-photo-button[b-dqvnczji2u] {
    background: none;
    padding: 0;
    display: block;
    cursor: pointer;
    width: 100%;
    max-width: 40rem;
    aspect-ratio: 1;
    box-sizing: border-box;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    transition: opacity var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.doc-photo-button:hover[b-dqvnczji2u] {
    opacity: 0.85;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.doc-photo-button:focus-visible[b-dqvnczji2u] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.doc-photo-full[b-dqvnczji2u] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
    display: block;
    transition: transform 0.3s ease;
}

.doc-photos-container[b-dqvnczji2u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    justify-items: center;
}

.doc-photo-item[b-dqvnczji2u] {
    max-width: 40rem;
    text-align: center;
    width: 100%;
}

.doc-photo-label-sm[b-dqvnczji2u] {
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

.doc-photo-wrapper[b-dqvnczji2u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.doc-photo-toolbar[b-dqvnczji2u] {
    display: flex;
    gap: 0.5rem;
}

.doc-rotate-btn[b-dqvnczji2u] {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: var(--text-sm);
}

/* ── Fullscreen photo overlay ───────────────────────────────────────────── */
.photo-overlay[b-dqvnczji2u] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation: overlayFadeIn-b-dqvnczji2u 0.2s ease-out;
}

.photo-overlay-toolbar[b-dqvnczji2u] {
    position: absolute;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem;
    cursor: default;
}

.photo-overlay-toolbar .btn[b-dqvnczji2u] {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
    opacity: 0.9;
}

.photo-overlay-toolbar .btn:hover[b-dqvnczji2u] {
    opacity: 1;
}

.photo-overlay-img[b-dqvnczji2u] {
    /* The min() of these two caps becomes the side of the square envelope.
       The 12rem subtracted from the height cap reserves space for the toolbar
       so on short viewports (e.g. mobile landscape <640px tall) the centered
       square's top edge doesn't overlap the toolbar. */
    max-width: 90vw;
    max-height: calc(100vh - 12rem);
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
    cursor: default;
}

@keyframes overlayFadeIn-b-dqvnczji2u {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Highlighted-entry deep-link flash ──────────────────────────────────── */
.highlight-entry[b-dqvnczji2u] {
    animation: highlightFade-b-dqvnczji2u 3s ease-out;
}

@keyframes highlightFade-b-dqvnczji2u {
    0%   { background-color: color-mix(in srgb, var(--color-primary) 15%, transparent); }
    70%  { background-color: color-mix(in srgb, var(--color-primary) 8%,  transparent); }
    100% { background-color: transparent; }
}

/* ── Detail-pane sliding close animation ────────────────────────────────────
   Duration is driven by --detail-close-duration set inline from
   DetailPaneCloseMs in the code-behind so the CSS timing stays in sync
   with the Task.Delay without manual coordination.
   ────────────────────────────────────────────────────────────────────────── */
.detail-pane-closing[b-dqvnczji2u] {
    animation: detailPaneClose-b-dqvnczji2u var(--detail-close-duration, 500ms) ease-in forwards;
    overflow: hidden;
    /* Mouse-only safety net for legacy browsers that pre-date the `inert`
       HTML attribute. Keyboard tabbing protection comes from `inert` on the
       Razor element — `pointer-events` does not block focus / Tab navigation. */
    pointer-events: none;
}

/* `--detail-pane-height` is set inline by the Razor element from a JS-measured
   offsetHeight so the animation interpolates from the actual rendered content
   size — no clipping for tall panes, no shrink-from-huge lag for short ones.
   5000px fallback is only used if JS interop fails on the measure call. */
@keyframes detailPaneClose-b-dqvnczji2u {
    from { max-height: var(--detail-pane-height, 5000px); opacity: 1; }
    to   { max-height: 0;                                 opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .detail-pane-closing[b-dqvnczji2u] {
        animation: none;
        max-height: 0;
        opacity: 0;
    }
}

/* ── Column priority hiding ──────────────────────────────────────────────
   Both tables tag <th> and <td> with data-priority="1..4" where 1 is the
   most important (always shown) and 4 is the least (drops first). The
   media queries below progressively hide columns to keep the table
   readable on narrow widths without forcing a full mobile-card refactor.
   colspan="7" on detail-pane rows remains correct because hidden cells
   collapse to zero width but still occupy a column slot.
   ──────────────────────────────────────────────────────────────────────── */

/* Shown only at phone width (the rule inside the media query below wins by order). */
[b-dqvnczji2u] .link-row-meta {
    display: none;
}

/* Phone (≤599px): show only priority-1 columns. */
@media (max-width: 599.98px) {
    [b-dqvnczji2u] th[data-priority="2"],
    [b-dqvnczji2u] td[data-priority="2"],
    [b-dqvnczji2u] th[data-priority="3"],
    [b-dqvnczji2u] td[data-priority="3"],
    [b-dqvnczji2u] th[data-priority="4"],
    [b-dqvnczji2u] td[data-priority="4"] {
        display: none;
    }

    /* The hidden check-in and guests columns reappear as a line under the location,
       so link rows stay distinguishable (shown only here). */
    [b-dqvnczji2u] .link-row-meta {
        display: block;
    }

    /* Queue actions: up to four icon buttons no longer fit beside the guest and status
       cells at 390px, so the group wraps into two rows instead of overflowing the
       viewport (the last, destructive, button was clipped). */
    [b-dqvnczji2u] .queue-entry-row .btn-group {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: var(--space-2xs); /* the clamp's 4px floor up to ~426px, so the approved 390px baselines hold */
        max-width: 4.5rem;
    }

    /* Status badges in both tables may wrap: "A aguardar hóspedes" / "A Aguardar Aprovação"
       on one line pushed the actions column past the viewport in pt-PT. */
    [b-dqvnczji2u] .table .badge {
        white-space: normal;
    }
}

/* Tablet (600–899px): show priority 1+2, drop 3+4. */
@media (min-width: 600px) and (max-width: 899.98px) {
    [b-dqvnczji2u] th[data-priority="3"],
    [b-dqvnczji2u] td[data-priority="3"],
    [b-dqvnczji2u] th[data-priority="4"],
    [b-dqvnczji2u] td[data-priority="4"] {
        display: none;
    }
}

/* Small laptop (900–1099px): show priority 1+2+3, drop 4. */
@media (min-width: 900px) and (max-width: 1099.98px) {
    [b-dqvnczji2u] th[data-priority="4"],
    [b-dqvnczji2u] td[data-priority="4"] {
        display: none;
    }
}

/* ── Existing responsive overrides ───────────────────────────────────────── */
@media (max-width: 767.98px) {
    .table-responsive[b-dqvnczji2u] {
        font-size: var(--text-sm);
    }

    .btn-group-sm .btn[b-dqvnczji2u] {
        padding: 0.25rem 0.4rem;
        font-size: var(--text-xs);
    }

    .page-header h1[b-dqvnczji2u] {
        font-size: 1.3rem;
    }

    .guest-detail-item[b-dqvnczji2u] {
        flex-wrap: wrap;
    }

    .doc-photos-container[b-dqvnczji2u] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-dqvnczji2u] {
        font-size: 1.15rem;
    }

    [b-dqvnczji2u] .table td {
        padding: var(--spacing-sm);
    }
}

/* ── Photo overlay button polish ─────────────────────────────────────────
   Replace Bootstrap's .btn-outline-light defaults (which read poorly
   against the photo-overlay's near-black backdrop) with a token-driven
   glass-style chrome.
   ──────────────────────────────────────────────────────────────────────── */
.photo-overlay-toolbar[b-dqvnczji2u]  .btn {
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.30);
    color: #FFFFFF;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.photo-overlay-toolbar[b-dqvnczji2u]  .btn:hover {
    background-color: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.50);
    color: #FFFFFF;
}

.photo-overlay-toolbar[b-dqvnczji2u]  .btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════
   Cross-cutting Bootstrap chrome (.card, .alert-*, .badge.bg-*,
   .form-control, .form-select, .table, .pagination) moved to the global
   wwwroot/css/bootstrap-dark.css per brief §6.3 convention. What stays
   here is only what's unique to this page's custom classes.
   ══════════════════════════════════════════════════════════════════════════ */

/* Detail pane lifts a touch more in dark to stay distinct from the row. */
[data-theme="dark"] .guest-link-detail-pane[b-dqvnczji2u] {
    background-color: var(--color-background);
    border-top-color: var(--color-secondary);
}

[data-theme="dark"] .guest-detail-item[b-dqvnczji2u] {
    background-color: var(--color-surface);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .guest-detail-clickable:hover[b-dqvnczji2u] {
    background-color: var(--color-background);
}

[data-theme="dark"] .queue-section-header h2[b-dqvnczji2u],
[data-theme="dark"] .page-header h1[b-dqvnczji2u] {
    color: var(--color-primary);
}
/* /Components/Pages/Siba/ManualSibaRegistration.razor.rz.scp.css */
/* ==========================================================================
   ManualSibaRegistration page — Lisbon Modern v1.1.5
   Port pass: tokens, dark mode, filter-grid auto-fit. Single phase since
   there are no tables (just a 3-section form + location selector).

   Dark-mode pattern: rules use `.manual-siba-page` (a wrapper around the
   page content that has the b-XXX scope attribute) to safely reach
   child-component-rendered form controls. Per brief §6.3 anti-pattern,
   `[data-theme="dark"] ::deep <X>` compiles to a broken compound selector
   and silently no-ops.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-kd8p8kfgpw] {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-kd8p8kfgpw] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-kd8p8kfgpw] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card[b-kd8p8kfgpw] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--duration-base) var(--ease-out);
    background: var(--color-surface);
}

.card:hover[b-kd8p8kfgpw] {
    box-shadow: var(--elevation-3);
}

.card-header[b-kd8p8kfgpw] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-header h2[b-kd8p8kfgpw] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    font-size: 1.05rem;
    margin-bottom: 0;
    letter-spacing: 0.01em;
}

.card-body[b-kd8p8kfgpw] {
    padding: var(--spacing-lg);
}

/* ── Filter / form auto-fit grid ──────────────────────────────────────────
   Mirrors the GuestRegistrations filter-grid pattern. Each child stacks
   label-over-control with token-based gap.
   ──────────────────────────────────────────────────────────────────────── */
.filter-grid[b-kd8p8kfgpw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--spacing-md);
    align-items: start;
}

.filter-field[b-kd8p8kfgpw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.filter-field .form-label[b-kd8p8kfgpw] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.filter-field .form-control[b-kd8p8kfgpw],
.filter-field .form-select[b-kd8p8kfgpw] {
    width: 100%;
}

/* ── Form labels (outside .filter-field, e.g. location selector) ───────── */
.form-label[b-kd8p8kfgpw] {
    color: var(--color-text);
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
    margin-bottom: var(--spacing-xs);
}

/* ── Form controls (Bootstrap defaults overridden via ::deep) ────────────
   Targets <input>/<select> rendered by Blazor child components (InputText,
   InputDate, InputSelect) which don't inherit this component's scope by
   default. The leading `::deep` compiles to `[b-XXX] .form-control`
   which is the correct match shape per Microsoft's CSS isolation docs.
   ──────────────────────────────────────────────────────────────────────── */
[b-kd8p8kfgpw] .form-control,
[b-kd8p8kfgpw] .form-select {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.925rem;
    color: var(--color-text);
    background-color: var(--color-background);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

[b-kd8p8kfgpw] .form-control::placeholder {
    color: var(--color-text-muted);
    opacity: 0.6;
}

[b-kd8p8kfgpw] .form-control:focus,
[b-kd8p8kfgpw] .form-select:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-secondary) 25%, transparent);
}

[b-kd8p8kfgpw] .form-control.invalid,
[b-kd8p8kfgpw] .form-select.invalid {
    border-color: var(--color-danger);
}

[b-kd8p8kfgpw] .form-control.valid.modified,
[b-kd8p8kfgpw] .form-select.valid.modified {
    border-color: var(--color-success);
}

/* ── Submit button ──────────────────────────────────────────────────────── */
.btn-submit[b-kd8p8kfgpw] {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    border-radius: var(--radius-sm);
    padding: 0.6rem 2rem;
    font-weight: var(--font-semibold);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.btn-submit:hover[b-kd8p8kfgpw] {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-light);
    transform: translateY(-1px);
    box-shadow: var(--elevation-3);
}

.btn-submit:active[b-kd8p8kfgpw] {
    transform: translateY(0);
}

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert[b-kd8p8kfgpw] {
    border-radius: var(--radius-sm);
    font-size: 0.925rem;
}

/* ── Validation summary ─────────────────────────────────────────────────── */
[b-kd8p8kfgpw] .validation-errors {
    background-color: color-mix(in srgb, var(--color-danger) 8%, var(--color-background));
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    color: var(--color-danger);
    font-size: 0.875rem;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header h1[b-kd8p8kfgpw] {
        font-size: 1.3rem;
    }

    .card-body[b-kd8p8kfgpw] {
        padding: var(--spacing-md);
    }

    .btn-submit[b-kd8p8kfgpw] {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-kd8p8kfgpw] {
        font-size: 1.15rem;
    }

    .card-header[b-kd8p8kfgpw] {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .card-body[b-kd8p8kfgpw] {
        padding: var(--spacing-sm);
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════
   Cross-cutting Bootstrap chrome (.card, .alert-*, .form-control,
   .form-select, .form-label, .validation-errors) moved to the global
   wwwroot/css/bootstrap-dark.css per brief §6.3 convention. The
   .manual-siba-page wrapper class is kept (harmless one-line div) in
   case future page-specific scoped rules need the scope-attribute
   penetration pattern.
   ══════════════════════════════════════════════════════════════════════════ */
/* /Components/Pages/Siba/StatusSiba.razor.rz.scp.css */
/* =============================================================================
   Status SIBA page — Lisbon Modern v1.1 scoped styles
   Adapted from the design-tool exports under
   .claude/scratch/AL.Web — Status SIBA/{filter-row,records-table}.css.

   Inherits global primitives from wwwroot/css/primitives/responsive-table.css
   (.responsive-table / .responsive-table-table / .responsive-table-cards
   container-query toggle + the .responsive-table-card-* card surface).
   The .detail-pane / .detail-cell / .records-action-btn / .filter-* classes
   are SCOPED to this page for now — they should be promoted to a global
   primitives file when GuestRegistrations and other dense-list pages are
   ported (Phase 3 shared-kernel work, Task #6).

   Carry-over: --font-family-mono is referenced but the system has no such
   token; using `ui-monospace, Menlo, Consolas, monospace` literal as a
   stack here. If we standardise a --font-family-mono token in a future
   ds-v1.2.x patch, replace.
   ============================================================================= */

/* ── Page header (kept from previous styling) ────────────────────────── */
.page-header[b-wy93jo2zzw] {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-wy93jo2zzw] {
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2xs);
}

.page-subtitle[b-wy93jo2zzw] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* =============================================================================
   FILTER ROW (ds-v1.1.0 auto-fit grid pattern)
   ============================================================================= */
.filter-card[b-wy93jo2zzw] {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
    min-width: 0;
    box-shadow: var(--elevation-1);
}

.filter-card-eyebrow[b-wy93jo2zzw] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin: 0 0 var(--space-md);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
}
.filter-card-eyebrow i[b-wy93jo2zzw] { font-size: 13px; color: var(--color-secondary); }

/* Auto-fit grid. `min(180px, 100%)` keeps a 180-px floor on regular widths
   but collapses to 100 % inside very narrow containers — single-column
   fallback, never overflows.  Cap the GRID itself at "6 full-size cells"
   so at very wide widths leftover space sits as right-side gutter, never
   as wider tracks. */
.filter-row[b-wy93jo2zzw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: var(--space-sm);
    align-items: end;
    min-width: 0;
    max-inline-size: calc(6 * 240px + 5 * var(--space-sm));
}

.filter-field[b-wy93jo2zzw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.filter-field-label[b-wy93jo2zzw] {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    line-height: var(--leading-snug);
}

.filter-field-control[b-wy93jo2zzw] {
    /* font-size: max(16px, var(--text-base)) prevents iOS focus-zoom. */
    font: var(--font-medium) max(16px, var(--text-base))/1.4 var(--font-family-base);
    padding: 8px 12px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    outline: none;
    min-width: 0;
    width: 100%;
    min-height: var(--touch-target-min);
    transition:
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
    appearance: none;
    -webkit-appearance: none;
}
.filter-field-control:focus-visible[b-wy93jo2zzw] {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.22);
}
.filter-field-control:hover[b-wy93jo2zzw] { border-color: var(--color-secondary-light); }

/* Select chevron (platform default disappears under appearance:none). */
.filter-field-control[data-control="select"][b-wy93jo2zzw] {
    padding-right: 36px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%235A6270' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

.filter-field-control[type="date"][b-wy93jo2zzw] {
    cursor: pointer;
    color-scheme: light;
}

/* Refresh button — fills its grid cell. */
.filter-refresh[b-wy93jo2zzw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    width: 100%;
    min-height: var(--touch-target-min);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font: var(--font-semibold) var(--text-sm)/1.4 var(--font-family-base);
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}
.filter-refresh:hover[b-wy93jo2zzw] {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
}
.filter-refresh:active[b-wy93jo2zzw] {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}
.filter-refresh:disabled[b-wy93jo2zzw] {
    opacity: 0.6;
    cursor: not-allowed;
}
.filter-refresh:focus-visible[b-wy93jo2zzw] {
    box-shadow:
        0 0 0 2px var(--color-background),
        0 0 0 4px var(--color-secondary);
}
.filter-refresh i[b-wy93jo2zzw] { font-size: 15px; }

.filter-refresh.is-busy i[b-wy93jo2zzw] {
    animation: status-siba-refresh-spin-b-wy93jo2zzw 0.9s linear infinite;
}
@keyframes status-siba-refresh-spin-b-wy93jo2zzw {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .filter-refresh.is-busy i[b-wy93jo2zzw] { animation: none; }
}

/* =============================================================================
   RECORDS PANEL — section card containing the table + detail pane
   ============================================================================= */
.records-panel[b-wy93jo2zzw] {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-1);
    /* PORT NOTE — overflow:visible (not hidden) so the .table-responsive
       wrapper's horizontal scroll affordance (the emergency fallback) is
       not clipped at the panel's bottom-right corner. The .panel-body
       below clips its own contents and re-establishes the rounded
       bottom corners. */
    overflow: visible;
}

.records-panel .panel-head[b-wy93jo2zzw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-surface-alt);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.records-panel .panel-head h2[b-wy93jo2zzw] {
    margin: 0;
    color: var(--color-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
}
.records-panel .panel-head h2 i[b-wy93jo2zzw] {
    color: var(--color-secondary);
}
.records-panel .panel-head-meta[b-wy93jo2zzw] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    letter-spacing: var(--tracking-wide);
}
.records-panel .panel-head-meta strong[b-wy93jo2zzw] {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    color: var(--color-primary);
    font-weight: var(--font-semibold);
}

.records-panel .panel-body[b-wy93jo2zzw] {
    overflow: hidden;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 0;
}

/* Defensive — the intermediates between .panel-body and .table-responsive
   must not clip horizontally either. */
.records-panel .responsive-table[b-wy93jo2zzw],
.records-panel .responsive-table-table[b-wy93jo2zzw] {
    overflow: visible;
    min-width: 0;
    width: 100%;
}

/* =============================================================================
   RECORDS TABLE (desktop, ≥600 px container)
   ============================================================================= */
.records-table[b-wy93jo2zzw] {
    width: 100%;
    border-collapse: collapse;
    color: var(--color-text);
}

.records-table thead th[b-wy93jo2zzw] {
    text-align: left;
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-surface-alt);
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    border-bottom: 2px solid var(--color-primary);
    white-space: nowrap;
}

.records-table tbody td[b-wy93jo2zzw] {
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--color-border-light);
    font-size: var(--text-sm);
    vertical-align: middle;
}

.records-table tbody tr:hover[b-wy93jo2zzw] {
    background: var(--color-surface);
}
.records-table tbody tr.expanded > td[b-wy93jo2zzw] {
    border-bottom-color: transparent;
    background: var(--color-surface);
}

/* Expand chevron column — narrow, centered. */
.records-table th.col-expand[b-wy93jo2zzw],
.records-table td.col-expand[b-wy93jo2zzw] {
    width: 40px;
    padding: var(--space-xs) var(--space-2xs);
    text-align: center;
}

.row-expand[b-wy93jo2zzw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition:
        background var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
}
.row-expand:hover[b-wy93jo2zzw] {
    background: var(--color-surface-alt);
    color: var(--color-text);
}
.row-expand.is-open i[b-wy93jo2zzw] {
    transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
    /* Suppress the ANIMATION, keep the END STATE. `transform: none` here also cancelled the
       rotate(90deg) above, so reduced-motion users saw an identical chevron whether the row
       was open or closed — losing the only visual open/closed affordance. Reduced motion
       means "don't animate the change", not "don't show the state". */
    .row-expand[b-wy93jo2zzw],
    .row-expand.is-open i[b-wy93jo2zzw] { transition: none; }
}

/* Guest column carries the visual weight of the row. */
.records-table td.col-guest[b-wy93jo2zzw] {
    font-weight: var(--font-semibold);
    color: var(--color-text);
}

/* File # + Submitted columns use a monospace stack — crisp tabular reading. */
.records-table td.col-file[b-wy93jo2zzw],
.records-table td.col-submitted[b-wy93jo2zzw] {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: var(--text-xs);
    color: var(--color-text);
}
.records-table td.col-submitted[b-wy93jo2zzw] { color: var(--color-text-muted); }

/* Actions column — sized to content, tight padding. */
.records-table th.col-actions[b-wy93jo2zzw],
.records-table td.col-actions[b-wy93jo2zzw] {
    white-space: nowrap;
    padding: var(--space-2xs) var(--space-xs);
}

/* =============================================================================
   COLUMN-PRIORITY HIDING (CSS @container — visible NOW, Razor refines later)
   Task #1 — see lisbon-modern-v1.1-brief.md §6.2 / §9.
   data-priority numbering matches the brief's agreed order for Status SIBA
   (rightmost drops first):
     1 Guest (always)  2 Status  3 Check-in  4 Submitted  5 Check-out
     6 File #          7 Environment         8 Location (drops first)
   ============================================================================= */
.responsive-table[b-wy93jo2zzw] {
    container-type: inline-size;
}

@container (max-width: 1099px) {
    .records-table th[data-priority="8"][b-wy93jo2zzw],
    .records-table td[data-priority="8"][b-wy93jo2zzw] { display: none; }
}
@container (max-width: 899px) {
    .records-table th[data-priority="7"][b-wy93jo2zzw],
    .records-table td[data-priority="7"][b-wy93jo2zzw] { display: none; }
    /* Drop the "HH:mm" tail at narrow widths — date stays visible. */
    .records-table .submitted-time[b-wy93jo2zzw] { display: none; }
}
@container (max-width: 759px) {
    .records-table th[data-priority="6"][b-wy93jo2zzw],
    .records-table td[data-priority="6"][b-wy93jo2zzw] { display: none; }
}

/* =============================================================================
   ACTION BUTTONS — borderless 24 px icons, always View / Download / Delete
   ============================================================================= */
.records-actions[b-wy93jo2zzw] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    justify-content: flex-end;
}

.records-action-btn[b-wy93jo2zzw] {
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out);
}
.records-action-btn i[b-wy93jo2zzw] {
    font-size: 14px;
    line-height: 1;
}
.records-action-btn:hover[b-wy93jo2zzw] {
    background: var(--color-surface-alt);
    color: var(--color-text);
}
.records-action-btn:focus-visible[b-wy93jo2zzw] {
    outline: 2px solid var(--color-secondary);
    outline-offset: 1px;
}
.records-action-btn--delete:hover[b-wy93jo2zzw] {
    background: color-mix(in srgb, var(--color-danger) 14%, transparent);
    color: var(--color-danger);
}

/* Mobile-card footer actions — same button styling. */
.responsive-table-card-footer-actions[b-wy93jo2zzw] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
}

/* =============================================================================
   DETAIL PANE (ds-v1.1.0 — auto-fit grid + 3 px azulejo left accent)
   Desktop: rendered as a colspan'd row INSIDE the table, directly under its
   entry (parity with GuestRegistrations). Its .detail-sticky wrapper is pinned
   to the visible card width (position: sticky; width: 100cqw) so it stays
   bounded to the card even when the table scrolls horizontally — never widened
   by the table's `min-width: max-content`.
   Mobile: rendered inline right after the expanded card.
   ============================================================================= */
.detail-pane[b-wy93jo2zzw] {
    display: grid;
    /* min(100%, 200px) + 1fr — guarantees graceful compaction. See brief §6.2. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--space-md) var(--space-lg);
    padding: var(--detail-pane-padding, var(--space-lg));
    background: var(--detail-pane-bg, var(--color-surface));
    border-left: 3px solid var(--detail-pane-accent, var(--color-secondary));
}

.detail-cell[b-wy93jo2zzw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    min-width: 0;
}
.detail-cell-label[b-wy93jo2zzw] {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}
.detail-cell-value[b-wy93jo2zzw] {
    font-size: var(--text-sm);
    color: var(--color-text);
    overflow-wrap: anywhere;
}

/* Auxiliary panel (SIBA Response / Error) — spans the full pane width. */
.detail-pane-aux[b-wy93jo2zzw] {
    grid-column: 1 / -1;
    background: var(--color-background);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}
.detail-pane-aux-head[b-wy93jo2zzw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-2xs);
}
.detail-pane-aux-label[b-wy93jo2zzw] {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}
.detail-pane-aux-body[b-wy93jo2zzw] {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: var(--text-xs);
    color: var(--color-text);
    white-space: pre-wrap;
    word-break: break-word;
}
.detail-pane-aux--error[b-wy93jo2zzw] {
    border-color: color-mix(in srgb, var(--color-danger) 40%, var(--color-border));
}
.detail-pane-aux--error .detail-pane-aux-label[b-wy93jo2zzw],
.detail-pane-aux--error .detail-pane-aux-body[b-wy93jo2zzw] {
    color: var(--color-danger);
}

/* Mobile-card expanded detail-pane spacing — lift slightly so the 3 px
   azulejo accent reads as a continuation of the card edge. */
.responsive-table-cards .detail-pane[b-wy93jo2zzw] {
    margin-top: calc(-1 * var(--space-2xs));
    margin-bottom: var(--space-sm);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Desktop detail row — the colspan'd <tr> carrying the pane under its entry.
   The <td> drops its own padding/chrome; the .detail-pane inside provides it. */
.records-table tr.detail-row > td[b-wy93jo2zzw] {
    padding: 0;
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-surface);
}

/* Pin the pane to the visible card width. The <td> spans the table's (possibly
   max-content) width; `width: 100cqw` resolves against the .responsive-table
   inline-size container (the card), and `position: sticky; left: 0` keeps the
   pane in view when the table scrolls horizontally. */
.detail-sticky[b-wy93jo2zzw] {
    position: sticky;
    left: 0;
    width: 100cqw;
}

/* ── Detail-pane sliding close animation (parity with GuestRegistrations) ──
   Duration comes from --detail-close-duration set inline from DetailPaneCloseMs
   so the CSS timing stays in sync with the code-behind Task.Delay.
   --detail-pane-height is the JS-measured offsetHeight so the collapse
   interpolates from real content size; the 5000px fallback is used only if the
   measure interop failed. Keyframes name is page-unique to avoid colliding with
   GuestRegistrations' global @keyframes. */
.detail-pane-closing[b-wy93jo2zzw] {
    animation: statusSibaDetailPaneClose-b-wy93jo2zzw var(--detail-close-duration, 500ms) ease-in forwards;
    overflow: hidden;
    pointer-events: none;
}
@keyframes statusSibaDetailPaneClose-b-wy93jo2zzw {
    from { max-height: var(--detail-pane-height, 5000px); opacity: 1; }
    to   { max-height: 0;                                 opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .detail-pane-closing[b-wy93jo2zzw] {
        animation: none;
        max-height: 0;
        opacity: 0;
    }
}

/* =============================================================================
   MOBILE CARD COSMETIC (when a card is expanded)
   ============================================================================= */
.responsive-table-card.is-expanded[b-wy93jo2zzw] {
    border-color: var(--color-secondary);
    box-shadow:
        0 0 0 1px var(--color-secondary),
        var(--elevation-1);
}

.responsive-table-card-title-block[b-wy93jo2zzw] {
    min-width: 0;
}

.records-card-mono[b-wy93jo2zzw] {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: var(--text-xs);
}

/* =============================================================================
   SCROLLBAR SAFETY NET on .table-responsive (emergency fallback per §6.2)
   ============================================================================= */
.records-table-wrapper[b-wy93jo2zzw],
.records-panel .table-responsive[b-wy93jo2zzw] {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.records-panel .table-responsive[b-wy93jo2zzw]::-webkit-scrollbar       { height: 10px; }
.records-panel .table-responsive[b-wy93jo2zzw]::-webkit-scrollbar-track { background: transparent; }
.records-panel .table-responsive[b-wy93jo2zzw]::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 999px;
}
.records-panel .table-responsive[b-wy93jo2zzw]::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary);
}

.records-table-wrapper > table[b-wy93jo2zzw],
.records-panel .table-responsive > table[b-wy93jo2zzw] {
    width: 100%;
    min-width: max-content;
}

/* =============================================================================
   PAGINATION ROW
   ============================================================================= */
.pagination-row[b-wy93jo2zzw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}
.pagination-page-size[b-wy93jo2zzw] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
}
.pagination-page-size select[b-wy93jo2zzw] {
    width: auto;
}

/* Dark-mode pagination + .form-select chrome moved to the global
   wwwroot/css/bootstrap-dark.css per brief §6.3 convention. */

/* =============================================================================
   DOCUMENT-PHOTO OVERLAY (pre-existing — kept in case future flows need it)
   ============================================================================= */
.doc-photo-thumbnail[b-wy93jo2zzw] {
    max-width: 14rem;
    max-height: 10rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    object-fit: contain;
    cursor: pointer;
    transition:
        opacity var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}

.doc-photo-thumbnail:hover[b-wy93jo2zzw] {
    opacity: 0.85;
    box-shadow: var(--shadow-md);
}

.doc-photo-overlay[b-wy93jo2zzw] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.doc-photo-modal[b-wy93jo2zzw] {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
}

.doc-photo-fullsize[b-wy93jo2zzw] {
    max-width: 95vw;
    max-height: 90vh;
    border-radius: var(--radius-md);
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.5);
    object-fit: contain;
}

.doc-photo-close[b-wy93jo2zzw] {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: none;
    background-color: var(--color-background);
    color: var(--color-text);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    z-index: 1;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.doc-photo-close:hover[b-wy93jo2zzw] {
    background-color: var(--color-surface-alt);
}
/* /Components/Pages/TodoLists/TodoLists.razor.rz.scp.css */
/* ==========================================================================
   Shared To-Do Lists page (E16) — Lisbon Modern tokens.
   Cross-cutting Bootstrap chrome (.card, .alert-*, .form-control, .form-select,
   .list-group / .list-group-item, .btn) handled by the global theme; this file
   only owns page-specific layout. No hardcoded colors — design tokens only.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-6r3nhyqltu] {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-6r3nhyqltu] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-6r3nhyqltu] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Owner selector (co-workers spanning multiple hosts) ────────────────── */
.td-owner-field[b-6r3nhyqltu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    max-width: 24rem;
}

.td-readonly-note[b-6r3nhyqltu] {
    margin-top: var(--spacing-sm);
    font-size: var(--text-sm);
}

/* ── New-list creator (input + button) ─────────────────────────────────── */
.td-add-list[b-6r3nhyqltu],
.td-add-item[b-6r3nhyqltu] {
    display: flex;
    gap: var(--spacing-sm);
}

.td-add-list .form-control[b-6r3nhyqltu],
.td-add-item .form-control[b-6r3nhyqltu] {
    flex: 1;
    min-width: 0;
}

.td-add-list .btn[b-6r3nhyqltu],
.td-add-item .btn[b-6r3nhyqltu] {
    flex-shrink: 0;
}

/* ── Per-list header actions + inline rename ───────────────────────────── */
.td-list-actions[b-6r3nhyqltu],
.td-rename[b-6r3nhyqltu] {
    display: flex;
    gap: var(--space-2xs);
    align-items: center;
}

.td-rename .form-control[b-6r3nhyqltu] {
    min-width: 0;
}

/* ── Item rows ─────────────────────────────────────────────────────────── */
.td-item[b-6r3nhyqltu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.td-item-check[b-6r3nhyqltu] {
    flex-shrink: 0;
    margin: 0;
}

.td-item-text[b-6r3nhyqltu] {
    flex: 1;
    min-width: 0;
}

.td-item-edit[b-6r3nhyqltu] {
    flex: 1;
    min-width: 0;
}

.td-item-meta[b-6r3nhyqltu] {
    font-size: var(--text-xs);
    white-space: nowrap;
}

.td-item-btn[b-6r3nhyqltu] {
    flex-shrink: 0;
}

/* Completed items: muted + struck through (no color literal — token only). */
.td-item-done .td-item-text[b-6r3nhyqltu] {
    text-decoration: line-through;
    color: var(--color-text-muted);
}

/* ── Loading row ───────────────────────────────────────────────────────── */
.loading-row[b-6r3nhyqltu] {
    display: flex;
    justify-content: center;
    padding: var(--spacing-xl) 0;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .page-header h1[b-6r3nhyqltu] {
        font-size: 1.15rem;
    }

    .td-item[b-6r3nhyqltu] {
        flex-wrap: wrap;
    }

    .td-item-meta[b-6r3nhyqltu] {
        white-space: normal;
    }

    .td-list-actions .btn[b-6r3nhyqltu],
    .td-add-list .btn[b-6r3nhyqltu],
    .td-add-item .btn[b-6r3nhyqltu] {
        flex-shrink: 1;
    }
}
/* /Components/Pages/User/ALProperties.razor.rz.scp.css */
/* ==========================================================================
   ALProperties (User) page — Lisbon Modern v1.1.5
   Existing scoped CSS replaced (was only .import-log-container). Heavy
   form-driven page with 3 EditForm sections (~24 fields total), a
   bulk-import card, conditional setup-required alert, unmapped-listings
   alert with collapsible list, locations selector card with inline
   create-form panel. EditForm uses Blazor InputText/InputSelect/etc.
   components — Bootstrap chrome on those is handled by global per §6.3;
   ValidationMessage / ValidationSummary likewise.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-q85ixwuxla] {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-q85ixwuxla] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-q85ixwuxla] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card[b-q85ixwuxla] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.card:hover[b-q85ixwuxla] {
    box-shadow: var(--elevation-2);
}

.card-header[b-q85ixwuxla] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-header h2[b-q85ixwuxla] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    margin-bottom: 0;
}

.card-body[b-q85ixwuxla] {
    padding: var(--spacing-lg);
}

/* ── Unmapped-listings alert (custom layout inside .alert-info) ────────── */
.unmapped-alert[b-q85ixwuxla] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.unmapped-alert-icon[b-q85ixwuxla] {
    font-size: 1.3rem;
    color: var(--color-secondary);
    flex-shrink: 0;
}

.unmapped-alert-body[b-q85ixwuxla] {
    flex-grow: 1;
    min-width: 0;
}

.unmapped-alert-subtitle[b-q85ixwuxla] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--spacing-sm);
}

.unmapped-list[b-q85ixwuxla] {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-2xs);
}

.unmapped-list-item[b-q85ixwuxla] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--space-2xs) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.unmapped-list-item:last-child[b-q85ixwuxla] {
    border-bottom: 0;
}

.unmapped-listing-meta[b-q85ixwuxla] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.unmapped-listing-actions[b-q85ixwuxla] {
    margin-left: auto;
    display: flex;
    gap: var(--space-2xs);
}

.unmapped-action-message[b-q85ixwuxla] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-2xs);
}

/* ── Locations card (selector + Add button + create-panel) ─────────────── */
.locations-row[b-q85ixwuxla] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--spacing-md);
}

.location-select-field[b-q85ixwuxla] {
    flex-grow: 1;
    max-width: 20rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.location-select-field .form-label[b-q85ixwuxla] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.create-location-panel[b-q85ixwuxla] {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-background);
    max-width: 30rem;
}

.create-location-panel .form-label[b-q85ixwuxla] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-2xs);
}

.create-location-row[b-q85ixwuxla] {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.create-location-row .form-control[b-q85ixwuxla] {
    flex: 1 1 auto;
    min-width: 0;
}

.create-location-error[b-q85ixwuxla] {
    color: var(--color-danger);
    margin-top: var(--space-2xs);
    font-size: var(--text-sm);
}

.location-action-message[b-q85ixwuxla] {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
}

/* ── Loading row (inline inside cards) ─────────────────────────────────── */
.inline-loading[b-q85ixwuxla] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-muted);
}

/* ── EditForm property-form grid ────────────────────────────────────────── */
.props-form-grid[b-q85ixwuxla] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--spacing-md);
    align-items: start;
}

.props-form-field[b-q85ixwuxla] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.props-form-field .form-label[b-q85ixwuxla] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.props-form-field .form-text[b-q85ixwuxla] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin-top: var(--space-2xs);
}

/* Input + its hint + its validation message: one block so the field has a fixed
   two children (label, control) whatever ValidationMessage renders at runtime. */
.props-form-control[b-q85ixwuxla] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

/* Inputs on one line across a grid row: label / control sit in the GRID's rows rather
   than each field's own flow, so a label that wraps to two lines ("Unit Code (Código
   Unidade Hoteleira)") pushes every input in that row down together instead of only its
   own. Labels bottom-align so a one-line label sits on its input. Same subgrid shape as
   Overview.razor.css .kpi-card — `span 2` is the field's child count, hence the
   .props-form-control wrapper: a subgridded axis creates no implicit tracks, so a third
   child would be clamped into the last row and paint over the second. A subgrid inherits
   the parent's 16px row gap; `row-gap` here restores the label-to-input spacing. */
@supports (grid-template-rows: subgrid) {
    .props-form-grid > .props-form-field[b-q85ixwuxla],
    .props-form-grid > .props-form-field-toggle[b-q85ixwuxla] {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
        row-gap: var(--space-2xs);
    }

    .props-form-grid > .props-form-field > .form-label[b-q85ixwuxla] {
        align-self: end;
    }
}

/* Self-check-in toggle column — the switch sits in the input row (row 2 of the
   subgrid above), vertically centred on a box as tall as Bootstrap's .form-control.
   `align-self: start` keeps that box from stretching to the row, which a neighbour's
   hint (Tax Region) makes taller than the input. `column-gap` restores the switch-to-label
   spacing that Bootstrap's float layout gave and flex drops. */
.props-form-field-toggle .form-check[b-q85ixwuxla] {
    grid-row: 2;
    align-self: start;
    display: flex;
    align-items: center;
    column-gap: 0.5em;
    min-height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));
    margin-bottom: 0;
}

/* Form-text hint that follows the whole grid (mt-2 utility removed). */
.props-form-hint[b-q85ixwuxla] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin-top: var(--spacing-sm);
}

/* Narrow input wrapper (Registration Number) — replaces inline
   `style="max-width: 12rem;"`. */
.props-narrow-input[b-q85ixwuxla] {
    max-width: 12rem;
}

/* ── EditForm bottom action row (Save / Delete) ─────────────────────────── */
.props-form-actions[b-q85ixwuxla] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* ── Bulk XML import section ────────────────────────────────────────────── */
.bulk-import-ready[b-q85ixwuxla] {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.import-results-section[b-q85ixwuxla] {
    margin-top: var(--spacing-md);
}

.import-results-section h3[b-q85ixwuxla] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-sm);
}

.import-log-container[b-q85ixwuxla] {
    max-height: 20rem;
    overflow-y: auto;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    background: var(--color-background);
}

.import-log-container .alert[b-q85ixwuxla] {
    font-size: var(--text-sm);
    margin-bottom: var(--space-2xs);
}

.import-log-container .alert:last-child[b-q85ixwuxla] {
    margin-bottom: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header h1[b-q85ixwuxla] {
        font-size: 1.3rem;
    }

    .props-form-actions[b-q85ixwuxla] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .props-form-actions .btn[b-q85ixwuxla] {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-q85ixwuxla] {
        font-size: 1.15rem;
    }

    .card-header[b-q85ixwuxla] {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .card-body[b-q85ixwuxla] {
        padding: var(--spacing-md);
    }

    .location-select-field[b-q85ixwuxla] {
        max-width: none;
        width: 100%;
    }

    .create-location-panel[b-q85ixwuxla] {
        max-width: none;
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-q85ixwuxla],
[data-theme="dark"] .card-header h2[b-q85ixwuxla],
[data-theme="dark"] .import-results-section h3[b-q85ixwuxla] {
    color: var(--color-primary);
}

[data-theme="dark"] .create-location-panel[b-q85ixwuxla],
[data-theme="dark"] .import-log-container[b-q85ixwuxla] {
    background: var(--color-background);
    border-color: var(--color-border-light);
}

/* ── Inline validation affordance (audit 5.1 / mockup 1d) ─────────────────
   Blazor's EditContext adds .invalid to inputs after interaction or a
   failed submit; <ValidationMessage> renders .validation-message. */
.props-form-field[b-q85ixwuxla]  .form-control.invalid,
.props-form-field[b-q85ixwuxla]  .form-select.invalid {
    border: 2px solid var(--color-danger);
}

.props-form-field[b-q85ixwuxla]  .validation-message {
    color: var(--color-danger);
    font-size: 0.78rem;             /* ≈12.5px */
    font-weight: var(--font-semibold);
    margin-top: 0.25rem;
}

/* bi-exclamation-circle glyph before each error line (codepoint from
   bootstrap-icons.min.css — keep in sync if the icon set is regenerated).
   The full-font fallback family mirrors css/icon-font-subset.css so an
   out-of-subset codepoint lazy-loads the full font instead of a blank box. */
.props-form-field[b-q85ixwuxla]  .validation-message::before {
    font-family: bootstrap-icons, "bootstrap-icons-full";
    content: "\f333";
    margin-right: 0.3rem;
    vertical-align: -0.08em;
}

/* Missing-fields anchor list inside the setup-required banner (mockup 1d ①). */
.setup-missing-fields[b-q85ixwuxla] {
    margin-top: 0.25rem;
}
/* /Components/Pages/User/CoWorkers.razor.rz.scp.css */
/* ==========================================================================
   CoWorkers (User) page — Lisbon Modern v1.1.5
   Clean-slate port. Two main branches:
     1. Self-management view (CoWorker logged in) — one card per owner with
        an Access table per owner.
     2. Owner view — invite form, pending-invitations table, grouped active
        co-workers section.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-9m8mccdiw9] {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-9m8mccdiw9] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-9m8mccdiw9] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card[b-9m8mccdiw9] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.card:hover[b-9m8mccdiw9] {
    box-shadow: var(--elevation-2);
}

.card-header[b-9m8mccdiw9] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
}

.card-header h2[b-9m8mccdiw9],
.card-header h6[b-9m8mccdiw9] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    margin-bottom: 0;
}

.card-header h2 .text-muted[b-9m8mccdiw9] {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: var(--font-medium);
}

.card-body[b-9m8mccdiw9] {
    padding: var(--spacing-lg);
}

/* ── Page spinner ───────────────────────────────────────────────────────── */
.page-spinner[b-9m8mccdiw9] {
    display: flex;
    justify-content: center;
    padding: var(--spacing-2xl) 0;
}

/* ── Invite form ────────────────────────────────────────────────────────── */
.invite-form-grid[b-9m8mccdiw9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.invite-form-field[b-9m8mccdiw9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.invite-form-field .form-label[b-9m8mccdiw9] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.invite-form-field .form-control[b-9m8mccdiw9],
.invite-form-field .form-select[b-9m8mccdiw9] {
    width: 100%;
}

.invite-existing-hint[b-9m8mccdiw9] {
    color: var(--color-secondary);
    font-size: var(--text-xs);
    margin-top: var(--space-2xs);
}

/* ── Properties-selection helper buttons (Select All / Deselect All) ──── */
.properties-pick-actions[b-9m8mccdiw9] {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

/* ── Table chrome ───────────────────────────────────────────────────────── */
[b-9m8mccdiw9] .table {
    margin-bottom: 0;
}

[b-9m8mccdiw9] .table th {
    color: var(--color-text-muted);
    font-weight: var(--font-semibold);
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}

[b-9m8mccdiw9] .table td {
    vertical-align: middle;
}

/* Replace inline style="width:40px/120px/180px" on <th> selectors. */
.col-checkbox[b-9m8mccdiw9] { width: 2.5rem; }
.col-access-level[b-9m8mccdiw9] { width: 11rem; }
.col-status-tag[b-9m8mccdiw9] { width: 7.5rem; }
.col-action-icon[b-9m8mccdiw9] { width: 5rem; }

/* ── Column priority hiding (multiple tables share these) ───────────────
   Each table has its own column count but the priorities target the
   weakest-signal columns consistently:
   - 1 = primary identifier / action — never hide
   - 2 = secondary info — drop <600px
   - 3 = derived/computed — drop <900px
   - 4 = admin debug aid — drop <1100px
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 599.98px) {
    [b-9m8mccdiw9] th[data-priority="2"],
    [b-9m8mccdiw9] td[data-priority="2"],
    [b-9m8mccdiw9] th[data-priority="3"],
    [b-9m8mccdiw9] td[data-priority="3"],
    [b-9m8mccdiw9] th[data-priority="4"],
    [b-9m8mccdiw9] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 600px) and (max-width: 899.98px) {
    [b-9m8mccdiw9] th[data-priority="3"],
    [b-9m8mccdiw9] td[data-priority="3"],
    [b-9m8mccdiw9] th[data-priority="4"],
    [b-9m8mccdiw9] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 900px) and (max-width: 1099.98px) {
    [b-9m8mccdiw9] th[data-priority="4"],
    [b-9m8mccdiw9] td[data-priority="4"] {
        display: none;
    }
}

/* ── Property-badge cluster (pending-invitations row's "Properties" cell) */
.property-badges[b-9m8mccdiw9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
}

/* ── Active co-workers grouped section (one block per co-worker) ───────── */
.coworker-group[b-9m8mccdiw9] {
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md);
}

.coworker-group:last-child[b-9m8mccdiw9] {
    border-bottom: 0;
}

.coworker-group-head[b-9m8mccdiw9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2xs);
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.coworker-group-head strong[b-9m8mccdiw9] {
    color: var(--color-text);
}

.coworker-group-head .text-muted[b-9m8mccdiw9] {
    color: var(--color-text-muted);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    [b-9m8mccdiw9] .table {
        font-size: var(--text-sm);
    }

    .page-header h1[b-9m8mccdiw9] {
        font-size: 1.3rem;
    }
}

@media (max-width: 575.98px) {
    [b-9m8mccdiw9] .table {
        font-size: var(--text-xs);
    }

    .page-header h1[b-9m8mccdiw9] {
        font-size: 1.15rem;
    }

    .card-header[b-9m8mccdiw9] {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .card-body[b-9m8mccdiw9] {
        padding: var(--spacing-md);
    }

    .properties-pick-actions[b-9m8mccdiw9] {
        flex-wrap: wrap;
    }

    .properties-pick-actions .btn[b-9m8mccdiw9] {
        flex: 1 1 auto;
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-9m8mccdiw9],
[data-theme="dark"] .card-header h2[b-9m8mccdiw9],
[data-theme="dark"] .card-header h6[b-9m8mccdiw9] {
    color: var(--color-primary);
}

[data-theme="dark"] .invite-existing-hint[b-9m8mccdiw9] {
    color: var(--color-secondary);
}
/* /Components/Pages/User/Notifications.razor.rz.scp.css */
.notifications-page[b-avliwrwgo6] {
    max-width: 800px;
}

.page-header[b-avliwrwgo6] {
    margin-bottom: 1.25rem;
}

.page-subtitle[b-avliwrwgo6] {
    color: var(--color-text-muted);
    margin: 0.25rem 0 0;
}

.notif-empty[b-avliwrwgo6] {
    text-align: center;
    color: var(--color-text-muted);
    padding: 3rem 1rem;
}

.notif-empty .bi[b-avliwrwgo6] {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.6;
}

/* Use the app's themed design tokens (defined in tokens/_base.css, overridden in _dark.css), NOT
   --bs-* variables with light-mode hex fallbacks: the app themes via [data-theme="dark"], so the
   --bs-* fallbacks leaked light colours into dark mode — low-contrast text and a light hover patch. */
.notif-list[b-avliwrwgo6] {
    margin: 0;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

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

/* The whole row is a button so the entire surface is clickable + keyboard-focusable. */
.notif-link[b-avliwrwgo6] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.85rem 1rem;
    cursor: pointer;
    /* themed text colour (not `inherit`) so the title stays readable in both themes and on the hover
       surface — previously the inherited light text vanished on the light --bs-tertiary-bg patch. */
    color: var(--color-text);
}

/* Unread tint first; the hover/focus rule below has equal specificity but comes later in source
   order, so it overrides the tint — without this, the unread rule (a descendant selector) outranked
   the old single-class hover rule and unread rows showed no hover change. */
.notif-item.unread .notif-link[b-avliwrwgo6] {
    background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.notif-item .notif-link:hover[b-avliwrwgo6],
.notif-item .notif-link:focus-visible[b-avliwrwgo6] {
    background-color: var(--color-surface-alt);
    outline: none;
}

.notif-dot[b-avliwrwgo6] {
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    margin-top: 0.4rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    visibility: hidden;
}

.notif-item.unread .notif-dot[b-avliwrwgo6] {
    visibility: visible;
}

.notif-content[b-avliwrwgo6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.notif-title[b-avliwrwgo6] {
    font-weight: 600;
}

.notif-item.unread .notif-title[b-avliwrwgo6] {
    font-weight: 700;
}

.notif-text[b-avliwrwgo6] {
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.notif-time[b-avliwrwgo6] {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    margin-top: 0.2rem;
}
/* /Components/Pages/User/Payments.razor.rz.scp.css */
/* ==========================================================================
   Payments (User) page — Lisbon Modern v1.1.5
   Clean-slate port. 2-tab observability page (Payouts / Extra Charges).
   Filter card, tabs (.nav-tabs dark-mode global), per-tab tables with
   column priority, revenue-rules collapsible panel, action messages.
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-mxkpdhhpss] {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-mxkpdhhpss] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-mxkpdhhpss] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card[b-mxkpdhhpss] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.card:hover[b-mxkpdhhpss] {
    box-shadow: var(--elevation-2);
}

.card-header[b-mxkpdhhpss] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-body[b-mxkpdhhpss] {
    padding: var(--spacing-lg);
}

/* ── Filter grid (top filter card) ──────────────────────────────────────── */
.filter-grid[b-mxkpdhhpss] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--spacing-md);
    align-items: end;
}

.filter-field[b-mxkpdhhpss] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.filter-field .form-label[b-mxkpdhhpss] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.filter-field .form-control[b-mxkpdhhpss],
.filter-field .form-select[b-mxkpdhhpss] {
    width: 100%;
}

.filter-action[b-mxkpdhhpss] {
    display: flex;
    align-items: flex-end;
}

.filter-action .btn[b-mxkpdhhpss] {
    width: 100%;
    height: 2.375rem;
}

/* ── Tab nav (.nav-tabs dark-mode handled by global) ───────────────────── */
[b-mxkpdhhpss] .nav-tabs .nav-link {
    color: var(--color-text);
    font-weight: var(--font-medium);
}

[b-mxkpdhhpss] .nav-tabs .nav-link.active {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
}

/* ── Inline messages ────────────────────────────────────────────────────── */
.loading-row[b-mxkpdhhpss] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-muted);
    margin: var(--spacing-lg) 0;
}

.inline-message[b-mxkpdhhpss] {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.inline-empty[b-mxkpdhhpss] {
    padding: var(--spacing-md);
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
}

/* ── Revenue Rules collapsible card ─────────────────────────────────────── */
.revenue-rules-card[b-mxkpdhhpss] {
    margin-bottom: var(--spacing-md);
}

.revenue-rules-header[b-mxkpdhhpss] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    gap: var(--spacing-sm);
}

.revenue-rules-header strong[b-mxkpdhhpss] {
    color: var(--color-primary);
}

.revenue-rules-header-meta[b-mxkpdhhpss] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.revenue-rules-chevron[b-mxkpdhhpss] {
    color: var(--color-text-muted);
    transition: transform var(--duration-fast) var(--ease-out);
}

.revenue-rules-grid[b-mxkpdhhpss] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--space-2xs);
}

.revenue-rules-grid .form-check[b-mxkpdhhpss] {
    margin: 0;
}

.revenue-rules-readonly-list[b-mxkpdhhpss] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.revenue-rules-readonly-list li[b-mxkpdhhpss] {
    padding: var(--space-2xs) 0;
}

/* ── Include-cancelled toggle row (Extra Charges tab) ──────────────────── */
.include-cancelled-row[b-mxkpdhhpss] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

/* ── Table chrome ───────────────────────────────────────────────────────── */
[b-mxkpdhhpss] .table {
    font-size: var(--text-sm);
    margin-bottom: 0;
}

[b-mxkpdhhpss] .table th {
    color: var(--color-text-muted);
    font-weight: var(--font-semibold);
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}

[b-mxkpdhhpss] .table td {
    vertical-align: middle;
}

[b-mxkpdhhpss] .table code {
    font-size: 0.8rem;
    color: var(--color-secondary);
    background: transparent;
}

.reason-display[b-mxkpdhhpss] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin-left: var(--space-2xs);
}

/* Revenue-included switch sits inside the table cell with zero margin. */
.revenue-cell-switch[b-mxkpdhhpss] {
    margin: 0;
}

/* ── Column priority hiding ──────────────────────────────────────────────
   Payouts (8 cols): PayoutSent + Property + Amount always show (1).
     Platform + Guest drop <600px (2). Confirmation + Stay drop <900px (3).
     ExpectedArrival drops <1100px (4).
   Extra Charges (10 cols): Property + Reason + Amount + Status + Actions
     always show (1). RequestedAt + Platform drop <600px (2).
     Guest + Confirmation drop <900px (3). Revenue drops <1100px (4).
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 599.98px) {
    [b-mxkpdhhpss] th[data-priority="2"],
    [b-mxkpdhhpss] td[data-priority="2"],
    [b-mxkpdhhpss] th[data-priority="3"],
    [b-mxkpdhhpss] td[data-priority="3"],
    [b-mxkpdhhpss] th[data-priority="4"],
    [b-mxkpdhhpss] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 600px) and (max-width: 899.98px) {
    [b-mxkpdhhpss] th[data-priority="3"],
    [b-mxkpdhhpss] td[data-priority="3"],
    [b-mxkpdhhpss] th[data-priority="4"],
    [b-mxkpdhhpss] td[data-priority="4"] {
        display: none;
    }
}

@media (min-width: 900px) and (max-width: 1099.98px) {
    [b-mxkpdhhpss] th[data-priority="4"],
    [b-mxkpdhhpss] td[data-priority="4"] {
        display: none;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header h1[b-mxkpdhhpss] {
        font-size: 1.3rem;
    }

    [b-mxkpdhhpss] .table {
        font-size: var(--text-xs);
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-mxkpdhhpss] {
        font-size: 1.15rem;
    }

    .card-header[b-mxkpdhhpss],
    .revenue-rules-header[b-mxkpdhhpss] {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .card-body[b-mxkpdhhpss] {
        padding: var(--spacing-md);
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-mxkpdhhpss],
[data-theme="dark"] .revenue-rules-header strong[b-mxkpdhhpss] {
    color: var(--color-primary);
}

[data-theme="dark"] .inline-empty[b-mxkpdhhpss] {
    background: var(--color-background);
}

/* ── Manage dropdown (Blazor-native, no bootstrap.bundle.min.js) ─────────── */

/* Invisible click-catcher behind the open menu: any outside click closes it.
   Sits below the menu (Bootstrap .dropdown-menu z-index is 1000). */
.charge-menu-backdrop[b-mxkpdhhpss] {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
}
/* /Components/Pages/User/Settings.razor.rz.scp.css */
/* ==========================================================================
   Settings (User) page — Lisbon Modern v1.1.5
   Existing scoped CSS replaced. Heavy multi-card settings page covering:
     - Install-as-App (PWA install prompt) card
     - SW-update toast
     - Document Verification (Azure AI quota) card
     - OTA Property Mappings card with collapsible per-property nested
       cards (each with sender filter + per-platform input rows + help
       toggle + save action + result message)
     - Email Settings card with multiple sub-renderings:
         * Connection-Status section (dl/dt/dd metadata grid)
         * Forwarding-address display + Gmail/Outlook setup guides
           (Bootstrap accordion pattern with nested ordered lists +
           collapsible "Advanced" sections)
         * Choose-Connection-Method 2-card picker
         * Initial-Sync setup row
         * Disconnect section
     - Newsletter Subscription card (single switch)
     - Verification Confirmation modal
     - Sync Progress modal (non-dismissible while syncing)
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-7aj3dhseeb] {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-7aj3dhseeb] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-7aj3dhseeb] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card[b-7aj3dhseeb] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.card:hover[b-7aj3dhseeb] {
    box-shadow: var(--elevation-2);
}

.card-header[b-7aj3dhseeb] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-header h2[b-7aj3dhseeb] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    margin-bottom: 0;
}

.card-body[b-7aj3dhseeb] {
    padding: var(--spacing-lg);
}

/* ── Form chrome (scoped — Bootstrap defaults are also handled globally) ── */
.form-label[b-7aj3dhseeb] {
    color: var(--color-text);
    font-weight: var(--font-medium);
}

.form-text[b-7aj3dhseeb] {
    color: var(--color-text-muted);
}

.form-check-label[b-7aj3dhseeb] {
    color: var(--color-text);
    font-weight: var(--font-medium);
}

/* ── Inline messages / loading ──────────────────────────────────────────── */
.loading-row[b-7aj3dhseeb] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-muted);
}

.page-spinner[b-7aj3dhseeb] {
    display: flex;
    justify-content: center;
    padding: var(--spacing-xl) 0;
}

.inline-message[b-7aj3dhseeb] {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-top: var(--spacing-md);
    margin-bottom: 0;
}

/* ── PWA install button + hints ─────────────────────────────────────────── */
.install-app-button[b-7aj3dhseeb] {
    margin-bottom: var(--spacing-md);
}

/* ── Definition list (Email Connection metadata) ───────────────────────── */
[b-7aj3dhseeb] dl {
    margin-bottom: 0;
}

[b-7aj3dhseeb] dt {
    font-weight: var(--font-semibold);
    color: var(--color-text);
    font-size: var(--text-sm);
    margin-top: var(--spacing-sm);
}

[b-7aj3dhseeb] dt:first-child {
    margin-top: 0;
}

[b-7aj3dhseeb] dd {
    margin-bottom: 0;
    margin-left: 0;
    color: var(--color-text);
}

/* ── Doc verification (Azure AI) ────────────────────────────────────────── */
.verification-mode-field[b-7aj3dhseeb] {
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-bottom: var(--spacing-md);
}

.remaining-calls-line[b-7aj3dhseeb] {
    margin-bottom: var(--spacing-md);
}

.remaining-calls-value-low[b-7aj3dhseeb] {
    color: var(--color-danger);
    font-weight: var(--font-bold);
}

.remaining-calls-value-ok[b-7aj3dhseeb] {
    color: var(--color-success);
}

/* ── OTA Property Mappings card ─────────────────────────────────────────── */
.ota-property-card[b-7aj3dhseeb] {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
    margin-bottom: var(--spacing-md);
    transition: border-color var(--duration-fast) var(--ease-out);
}

.ota-property-card-active[b-7aj3dhseeb] {
    border-color: var(--color-primary);
}

.ota-property-card-header[b-7aj3dhseeb] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    gap: var(--spacing-sm);
}

.ota-property-card-header h3[b-7aj3dhseeb] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    margin-bottom: 0;
}

.ota-property-card-body[b-7aj3dhseeb] {
    padding: var(--spacing-md);
}

.ota-senders-row[b-7aj3dhseeb] {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
}

.ota-senders-row .form-label[b-7aj3dhseeb] {
    color: var(--color-text);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-2xs);
}

/* Per-platform input row: 3 columns (label, input-with-clear, help-toggle). */
.ota-platform-row[b-7aj3dhseeb] {
    display: grid;
    grid-template-columns: minmax(min(100%, 140px), 1fr) minmax(min(100%, 220px), 2fr) auto;
    gap: var(--spacing-sm);
    align-items: center;
    margin-bottom: var(--space-2xs);
}

.ota-platform-label[b-7aj3dhseeb] {
    color: var(--color-text);
    font-weight: var(--font-semibold);
    margin: 0;
}

.ota-platform-help-row[b-7aj3dhseeb] {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

.ota-platform-help[b-7aj3dhseeb] {
    background-color: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.ota-platform-help small[b-7aj3dhseeb] {
    color: var(--color-text-muted);
}

.ota-save-row[b-7aj3dhseeb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border-light);
    flex-wrap: wrap;
}

.ota-result-message[b-7aj3dhseeb] {
    font-size: var(--text-sm);
}

.ota-result-success[b-7aj3dhseeb] {
    color: var(--color-success);
}

.ota-result-error[b-7aj3dhseeb] {
    color: var(--color-danger);
}

/* ── Email Settings ────────────────────────────────────────────────────── */
.email-status-grid[b-7aj3dhseeb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.email-forwarding-callout[b-7aj3dhseeb] {
    background-color: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.email-forwarding-callout strong[b-7aj3dhseeb] {
    color: var(--color-text);
}

.email-forwarding-address[b-7aj3dhseeb] {
    margin-top: var(--spacing-sm);
    font-size: 1.1rem;
}

.email-forwarding-address code[b-7aj3dhseeb] {
    color: var(--color-secondary);
    background: var(--color-background);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem;
}

.email-forwarding-hint[b-7aj3dhseeb] {
    color: var(--color-text-muted);
    margin-top: var(--space-2xs);
    font-size: var(--text-sm);
}

/* Accordion chrome (Gmail / Outlook setup guides). */
[b-7aj3dhseeb] .accordion-item {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2xs);
    overflow: hidden;
}

[b-7aj3dhseeb] .accordion-button {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    background-color: var(--color-surface-alt);
    color: var(--color-text);
    box-shadow: none;
}

[b-7aj3dhseeb] .accordion-button:not(.collapsed) {
    background-color: var(--color-surface-alt);
    color: var(--color-primary);
}

[b-7aj3dhseeb] .accordion-body {
    padding: var(--spacing-md);
    font-size: var(--text-sm);
}

[b-7aj3dhseeb] .accordion-body ol li {
    line-height: 1.6;
}

[b-7aj3dhseeb] .accordion-body code {
    color: var(--color-secondary);
}

.email-advanced-toggle[b-7aj3dhseeb] {
    margin-top: var(--spacing-md);
}

.email-advanced-panel[b-7aj3dhseeb] {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
}

.email-advanced-panel p[b-7aj3dhseeb] {
    color: var(--color-text-muted);
    margin-bottom: var(--space-2xs);
}

/* Connection-method 2-card picker (Auto-Forward / Microsoft OAuth). */
.connection-method-grid[b-7aj3dhseeb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.connection-method-card[b-7aj3dhseeb] {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: var(--spacing-lg);
    text-align: center;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

/* Selected state — applied only when the card's connection method is the
   active one. The icon colour stays under Bootstrap's text-primary /
   text-info utility on the inline span (different cards keep their own
   identity colour regardless of which one is selected). */
.connection-method-card-primary[b-7aj3dhseeb] { border-color: var(--color-primary); }
.connection-method-card-info[b-7aj3dhseeb]    { border-color: var(--color-secondary); }

.connection-method-card-title[b-7aj3dhseeb] {
    margin-top: var(--spacing-sm);
    color: var(--color-primary);
    font-weight: var(--font-semibold);
}

.connection-method-card-desc[b-7aj3dhseeb] {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
    font-size: var(--text-sm);
}

/* Initial Sync row. */
.initial-sync-section[b-7aj3dhseeb] {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border-light);
}

.initial-sync-section h3[b-7aj3dhseeb] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-2xs);
}

.initial-sync-row[b-7aj3dhseeb] {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.sync-from-field[b-7aj3dhseeb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.sync-from-field .form-label[b-7aj3dhseeb] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    margin-bottom: 0;
}

.sync-from-field .form-control[b-7aj3dhseeb] {
    max-width: 12rem;
}

/* Disconnect section. */
.disconnect-section[b-7aj3dhseeb] {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-warning) 6%, var(--color-surface));
}

.disconnect-section h3[b-7aj3dhseeb] {
    color: var(--color-warning);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-2xs);
}

.disconnect-section p[b-7aj3dhseeb] {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
}

/* ── Modal overlay (shared by Verification + Sync Progress modals) ─────
   Both modals use the manual Bootstrap "modal fade show d-block" pattern
   with a hand-rolled rgba backdrop. Consolidated here. */
.modal-overlay-backdrop[b-7aj3dhseeb] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.sync-progress-bar[b-7aj3dhseeb] {
    height: 1.25rem;
}

.sync-state-row[b-7aj3dhseeb] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.sync-bookings-hint[b-7aj3dhseeb] {
    margin-top: var(--spacing-sm);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header h1[b-7aj3dhseeb] {
        font-size: 1.3rem;
    }

    .card-body[b-7aj3dhseeb] {
        padding: var(--spacing-md);
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-7aj3dhseeb] {
        font-size: 1.15rem;
    }

    .card-header[b-7aj3dhseeb] {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .verification-mode-field[b-7aj3dhseeb],
    .sync-from-field .form-control[b-7aj3dhseeb] {
        max-width: 100%;
    }

    .ota-platform-row[b-7aj3dhseeb] {
        grid-template-columns: 1fr;
    }

    .ota-save-row[b-7aj3dhseeb] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-7aj3dhseeb],
[data-theme="dark"] .card-header h2[b-7aj3dhseeb],
[data-theme="dark"] .ota-property-card-header h3[b-7aj3dhseeb],
[data-theme="dark"] .connection-method-card-title[b-7aj3dhseeb],
[data-theme="dark"] .initial-sync-section h3[b-7aj3dhseeb] {
    color: var(--color-primary);
}

[data-theme="dark"] .ota-property-card[b-7aj3dhseeb] {
    background: var(--color-surface);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .ota-property-card-active[b-7aj3dhseeb] {
    border-color: var(--color-primary);
}

[data-theme="dark"] .ota-platform-help[b-7aj3dhseeb],
[data-theme="dark"] .email-forwarding-callout[b-7aj3dhseeb],
[data-theme="dark"] .email-advanced-panel[b-7aj3dhseeb] {
    background: var(--color-background);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .email-forwarding-address code[b-7aj3dhseeb] {
    background: var(--color-surface);
    border-color: var(--color-border-light);
    color: var(--color-text);
}

[data-theme="dark"] .disconnect-section[b-7aj3dhseeb] {
    background: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface));
    border-color: var(--color-warning);
}

[data-theme="dark"] .remaining-calls-value-ok[b-7aj3dhseeb] { color: var(--color-success); }
[data-theme="dark"] .remaining-calls-value-low[b-7aj3dhseeb] { color: var(--color-danger); }

[data-theme="dark"] .ota-result-success[b-7aj3dhseeb] { color: var(--color-success); }
[data-theme="dark"] .ota-result-error[b-7aj3dhseeb] { color: var(--color-danger); }
/* /Components/Pages/User/Subscription.razor.rz.scp.css */
/* ==========================================================================
   Subscription (User) page — Lisbon Modern v1.1.5
   Heavy billing-flow page with many sub-renderings:
     - 4 query-string feedback alerts (success / reactivated / cancelled /
       error)
     - Conditional expiry warning
     - Active-subscription / Past-Due / Pending-Payment / No-subscription
       state branches
     - 2-column plan selection grid (Monthly / Yearly) with brand-anchored
       yellow Yearly header
     - 3-column payment-method radio-card grid (Multibanco / MbWay /
       Credit Card)
     - Multibanco reference display (3-cell Entity/Ref/Amount)
     - "What's included" 2-column feature list with check icons
     - Payment history table
     - Cancel-confirmation manual modal (uses Bootstrap .modal-* chrome
       which the global handles)
     - Direct MB Way alternate flow (RenderDirectMbWayPayment)
   ========================================================================== */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-02rdtj4c3e] {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-surface-alt);
}

.page-header h1[b-02rdtj4c3e] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle[b-02rdtj4c3e] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ── Page spinner ───────────────────────────────────────────────────────── */
.page-spinner[b-02rdtj4c3e] {
    display: flex;
    justify-content: center;
    padding: var(--spacing-2xl) 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card[b-02rdtj4c3e] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.card:hover[b-02rdtj4c3e] {
    box-shadow: var(--elevation-2);
}

.card-header[b-02rdtj4c3e] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-header h2[b-02rdtj4c3e] {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    margin-bottom: 0;
}

.card-body[b-02rdtj4c3e] {
    padding: var(--spacing-lg);
}

/* ── Purchase-type top picker ───────────────────────────────────────────── */
.purchase-type-field[b-02rdtj4c3e] {
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.purchase-type-field .form-label[b-02rdtj4c3e] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    margin-bottom: 0;
}

/* ── Active-subscription summary row ──────────────────────────────────── */
.sub-summary-grid[b-02rdtj4c3e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: var(--spacing-md);
    color: var(--color-text);
}

.sub-summary-grid strong[b-02rdtj4c3e] {
    color: var(--color-text-muted);
    font-weight: var(--font-semibold);
    display: block;
    margin-bottom: var(--space-2xs);
}

.sub-summary-grid p[b-02rdtj4c3e] {
    margin: 0;
    color: var(--color-text);
}

.sub-meta-actions[b-02rdtj4c3e] {
    margin-top: var(--spacing-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.sub-renewal-status[b-02rdtj4c3e] {
    margin-top: var(--spacing-md);
    margin-bottom: 0;
}

.sub-autorenew-row[b-02rdtj4c3e] {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border-light);
}

/* ── Plan selection (Monthly / Yearly) ──────────────────────────────────── */
.plan-grid[b-02rdtj4c3e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.plan-card[b-02rdtj4c3e] {
    border: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.plan-card:hover[b-02rdtj4c3e] {
    box-shadow: var(--elevation-3);
    transform: translateY(-2px);
}

.plan-card-selected-monthly[b-02rdtj4c3e] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary), var(--elevation-2);
}

.plan-card-selected-yearly[b-02rdtj4c3e] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent), var(--elevation-2);
}

.plan-card-header[b-02rdtj4c3e] {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: center;
    background: var(--color-primary);
    color: #fff;
}

/* Yearly-plan header uses the brand-accent (warm yellow) treatment. */
.plan-card-header-yearly[b-02rdtj4c3e] {
    background-color: var(--color-accent);
    color: var(--color-text-on-accent);
}

.plan-card-header h2[b-02rdtj4c3e] {
    margin: 0;
    font-weight: var(--font-semibold);
}

.plan-card-body[b-02rdtj4c3e] {
    padding: var(--spacing-lg);
    text-align: center;
}

.plan-price[b-02rdtj4c3e] {
    color: var(--color-primary);
    font-size: 2.5rem;
    font-weight: var(--font-bold);
    line-height: 1.1;
    margin-bottom: var(--space-2xs);
}

.plan-period[b-02rdtj4c3e] {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
}

.plan-divider[b-02rdtj4c3e] {
    border: 0;
    border-top: 1px solid var(--color-border-light);
    margin: var(--spacing-md) 0;
}

/* ── Feature lists (used in plan cards + "What's included") ───────────── */
.feature-list[b-02rdtj4c3e] {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.feature-item[b-02rdtj4c3e] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.feature-item:last-child[b-02rdtj4c3e] {
    margin-bottom: 0;
}

.feature-check[b-02rdtj4c3e] {
    color: var(--color-success);
    font-weight: var(--font-bold);
    flex-shrink: 0;
    line-height: 1.4;
}

.feature-list-grid[b-02rdtj4c3e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--spacing-md);
}

/* ── Payment method radio cards ────────────────────────────────────────── */
.payment-method-grid[b-02rdtj4c3e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.payment-method-card[b-02rdtj4c3e] {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    cursor: pointer;
    background: var(--color-surface);
    text-align: center;
    transition: border-color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}

.payment-method-card:hover[b-02rdtj4c3e] {
    border-color: var(--color-primary);
    background-color: var(--color-surface-alt);
}

.payment-method-card-selected[b-02rdtj4c3e] {
    border-color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}

.payment-method-card .form-check-input[b-02rdtj4c3e] {
    display: none;
}

.payment-method-label[b-02rdtj4c3e] {
    display: block;
    color: var(--color-text);
    cursor: pointer;
    margin: 0;
}

.payment-method-name[b-02rdtj4c3e] {
    font-weight: var(--font-bold);
    margin-bottom: var(--space-2xs);
}

.payment-method-hint[b-02rdtj4c3e] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* Trailing single-field row inside the form (MB Way phone, etc.). */
.payment-form-field[b-02rdtj4c3e] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-bottom: var(--spacing-md);
}

.payment-form-field .form-label[b-02rdtj4c3e] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 0;
}

.payment-form-hint[b-02rdtj4c3e] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin-top: var(--spacing-sm);
    margin-bottom: 0;
}

/* ── Multibanco reference display (3-cell Entity / Ref / Amount) ───────── */
.mb-ref-grid[b-02rdtj4c3e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.mb-ref-cell[b-02rdtj4c3e] {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-background);
    padding: var(--spacing-md);
    text-align: center;
}

.mb-ref-label[b-02rdtj4c3e] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2xs);
    display: block;
}

.mb-ref-value[b-02rdtj4c3e] {
    font-size: 1.35rem;
    font-weight: var(--font-bold);
    color: var(--color-text);
}

/* ── Inline payment-pending row (Multibanco entity/ref/amount inline) ── */
.mb-pending-inline[b-02rdtj4c3e] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.mb-pending-inline > div strong[b-02rdtj4c3e] {
    color: var(--color-text-muted);
    margin-right: var(--space-2xs);
}

/* ── Renewal-payment alert variant (within active subscription card) ──── */
.renewal-pay-details[b-02rdtj4c3e] {
    margin-top: var(--spacing-sm);
}

/* ── Generated MB Way code box ──────────────────────────────────────────── */
.mbway-code[b-02rdtj4c3e] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 2rem;
    font-weight: var(--font-bold);
    margin-bottom: var(--space-2xs);
}

/* ── Cancel-confirmation modal (manual overlay with rgba bg) ───────────── */
.cancel-modal-overlay[b-02rdtj4c3e] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

/* ── Payment history table ──────────────────────────────────────────────── */
[b-02rdtj4c3e] .table {
    margin-bottom: 0;
    font-size: var(--text-sm);
}

[b-02rdtj4c3e] .table th {
    color: var(--color-text-muted);
    font-weight: var(--font-semibold);
    border-bottom: 2px solid var(--color-border);
}

[b-02rdtj4c3e] .table td {
    vertical-align: middle;
}

@media (max-width: 599.98px) {
    [b-02rdtj4c3e] th[data-priority="2"],
    [b-02rdtj4c3e] td[data-priority="2"],
    [b-02rdtj4c3e] th[data-priority="3"],
    [b-02rdtj4c3e] td[data-priority="3"] {
        display: none;
    }
}

@media (min-width: 600px) and (max-width: 899.98px) {
    [b-02rdtj4c3e] th[data-priority="3"],
    [b-02rdtj4c3e] td[data-priority="3"] {
        display: none;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header h1[b-02rdtj4c3e] {
        font-size: 1.3rem;
    }

    .plan-price[b-02rdtj4c3e] {
        font-size: 2rem;
    }
}

@media (max-width: 575.98px) {
    .page-header h1[b-02rdtj4c3e] {
        font-size: 1.15rem;
    }

    .card-header[b-02rdtj4c3e] {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .card-body[b-02rdtj4c3e] {
        padding: var(--spacing-md);
    }

    .sub-meta-actions[b-02rdtj4c3e] {
        flex-direction: column;
    }

    .sub-meta-actions .btn[b-02rdtj4c3e] {
        width: 100%;
    }
}

/* ══ Page-specific dark-mode overrides ════════════════════════════════════ */

[data-theme="dark"] .page-header h1[b-02rdtj4c3e],
[data-theme="dark"] .card-header h2[b-02rdtj4c3e] {
    color: var(--color-primary);
}

[data-theme="dark"] .plan-price[b-02rdtj4c3e] {
    color: var(--color-primary);
}

[data-theme="dark"] .plan-card-selected-monthly[b-02rdtj4c3e] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary), var(--elevation-2);
}

[data-theme="dark"] .plan-card-selected-yearly[b-02rdtj4c3e] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent), var(--elevation-2);
}

[data-theme="dark"] .payment-method-card-selected[b-02rdtj4c3e] {
    border-color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
}

[data-theme="dark"] .mb-ref-cell[b-02rdtj4c3e] {
    background: var(--color-background);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .feature-check[b-02rdtj4c3e] {
    color: var(--color-success);
}
/* /Components/Shared/LandingContent.razor.rz.scp.css */
/* ==========================================================================
   LandingContent — Restrained Cinematic landing skin
   Lisbon Modern v1.1.5 token system. Moved out of Home.razor.css in the
   F1 Home split; the nav rules moved to MarketingLayout.razor.css
   (Founder-3: one nav) and the under-construction modal block was deleted.

   F2: the landing is normal document flow — the old
   `position: fixed; inset: 0; z-index: 1100; overflow-y: auto` overlay is
   gone; the page scrolls the document under MarketingLayout's chrome
   (heroParallax.js reads window.scrollY accordingly).

   Scoped to <LandingContent>. The .cinematic modifier on .landing-page
   activates the Restrained Cinematic overrides — full-bleed photo hero,
   floating product cards, rectangular CTAs. Without .cinematic the base
   landing styles still apply (kept for backward compatibility if a future
   variant ever needs the older look).

   Hero photo URL is wired via the --hero-image-url custom property so the
   markup stays image-source-agnostic. Phase 2 follow-up (task #5) will swap
   the static Unsplash placeholder for a responsive srcset pipeline.

   Inter Display: the prototype calls for Inter Display 800 on the headline.
   We keep the system font stack here to avoid a 3rd-party network fetch
   (privacy + CSP). The weight 800 + tight letter-spacing still ship the
   "heavy headline" character. Swap-in is a one-liner if/when self-hosted
   Inter lands.

   IMPORTANT (Blazor scoped CSS):
   - Custom properties live on .landing-page.cinematic, NOT :root —
     :root never gets the b-XXX scope attribute, so :root rules would be
     dead code in a scoped file.
   - `::deep` must FOLLOW another selector; leading `::deep` is silently
     invalid (see brief §6.3 anti-pattern).
   ========================================================================== */

/* ── Landing wrapper — normal flow (F2); MarketingLayout's nav keys its
   over-hero treatment off this element via :has(.landing-page.cinematic). ── */
.landing-page[b-st19q8ao6g] {
    background: var(--color-background);
}

/* ── Shared container — bumped to --container-app on the cinematic landing
   so the floating-cards row can breathe at ultrawide. ── */
.landing-container[b-st19q8ao6g] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.landing-page.cinematic .landing-container[b-st19q8ao6g] {
    max-width: var(--container-app);
}

/* ──────────────────────────────────────────────────────────────────────────
   CINEMATIC CUSTOM PROPERTIES
   Scoped to .landing-page.cinematic — the rules under here cascade into
   every descendant. Not on :root because Blazor scoping never attaches the
   b-XXX attribute to <html>.
   ────────────────────────────────────────────────────────────────────────── */
.landing-page.cinematic[b-st19q8ao6g] {
    /* Hero photo — local Lisbon rooftops photo (Nick Karvounis on Unsplash,
       resized to 2400w WebP at q72 ≈ 630 KB). Viewports ≤1280px get the
       1600w variant (~297 KB) via the media query below. The preload tags
       in App.razor head must stay keyed to the same breakpoint + paths. */
    --hero-image-url: url("img/hero-lisbon.webp");

    /* Bottom-heavy gradient overlay so the headline reads against the photo. */
    --hero-overlay-from: rgba(8, 12, 18, 0.88);
    --hero-overlay-mid:  rgba(8, 12, 18, 0.55);
    --hero-overlay-to:   rgba(8, 12, 18, 0.00);

    /* Glass cards. Border colors are intentional light/dark hairlines. */
    --glass-card-bg-light:     rgba(255, 255, 255, 0.92);
    --glass-card-bg-dark:      rgba(20, 28, 40, 0.78);
    --glass-card-border-light: rgba(255, 255, 255, 0.55);
    --glass-card-border-dark:  rgba(255, 255, 255, 0.10);

    /* Display font — system stack today; swap to a self-hosted Inter
       Display when typography work lands. */
    --font-display: var(--font-family-base);
}

/* Phones/tablets fetch the 1600w hero (~297 KB) instead of the 2400w
   (~630 KB). Keep this breakpoint in sync with the preload media
   attributes in App.razor. Partial step toward brief Task #5 (full
   480w-3440w srcset ladder, ≤60 KB at 360px) — that task stays open. */
@media (max-width: 1280px) {
    .landing-page.cinematic[b-st19q8ao6g] {
        --hero-image-url: url("img/hero-lisbon-1600.webp");
    }
}

/* ==========================================================================
   HERO — fixed-height stage, photo backdrop, bottom-up overlay,
   Inter-Display headline, one accent word, rectangular CTAs.
   ========================================================================== */
.hero-cinematic[b-st19q8ao6g] {
    position: relative;
    /* min-height (not fixed height) so a long localized headline extends
       the hero vertically rather than colliding with the floating cards'
       negative-margin overlap below. Short headlines (e.g. PT "...sem ruído")
       still get the 80vh cinematic stage. */
    min-height: clamp(560px, 80vh, 720px);
    background: #0b1018;            /* fallback under the photo */
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;        /* headline vertically centred */
}

/* Photo layer — background image set via --hero-image-url custom property.
   scale(1.08) baked in as a parallax buffer so vertical travel never
   exposes the cropped edges; heroParallax.js preserves this in its
   transform string. */
.hero-cinematic .hero-photo[b-st19q8ao6g] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: var(--hero-image-url);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    will-change: transform;
    transform: scale(1.08) translate3d(0, 0, 0);
    transform-origin: center 30%;
}

.hero-overlay[b-st19q8ao6g] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        var(--hero-overlay-from) 0%,
        var(--hero-overlay-mid) 35%,
        var(--hero-overlay-to) 70%
    );
    z-index: 1;
    pointer-events: none;
}

/* Subtle top vignette so the nav reads against bright skies in the photo. */
.hero-overlay[b-st19q8ao6g]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30%;
    background: linear-gradient(to bottom, rgba(8, 12, 18, 0.55), transparent);
    pointer-events: none;
}

.hero-cinematic-inner[b-st19q8ao6g] {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container-app);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.hero-cinematic-eyebrow[b-st19q8ao6g] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    width: max-content;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-sm);    /* rectangular, not pill */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--space-lg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hero-cinematic-eyebrow .bi[b-st19q8ao6g] {
    color: var(--color-accent);
    font-size: 0.9rem;
}

.hero-cinematic-title[b-st19q8ao6g] {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: #FFFFFF;
    /* Two-layer dark shadow so the white headline reads against both
       the dark sky and bright rooftops in the cinematic hero photo.
       The 12px sharp blur defines edges; the 28px soft blur is a
       broader halo that mutes the photo behind the text. */
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55),
                 0 0 28px rgba(0, 0, 0, 0.35);
    margin: 0 0 var(--space-lg);
    max-width: 16ch;
    text-wrap: balance;
}

.hero-cinematic-title[b-st19q8ao6g]  .hero-accent-word {
    color: var(--color-accent);
    /* Yellow glow PLUS a subtle dark companion so the accent word also
       holds against bright rooftops (the yellow-on-orange contrast is
       the weakest pairing in the photo). */
    text-shadow: 0 2px 24px rgba(244, 211, 94, 0.25),
                 0 2px 14px rgba(0, 0, 0, 0.45);
    font-style: normal;
}

.hero-cinematic-sub[b-st19q8ao6g] {
    font-size: var(--text-lg);
    font-weight: 400;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.80);
    margin: 0 0 var(--space-xl);
    max-width: 60ch;
    text-wrap: pretty;
}

.hero-cinematic-actions[b-st19q8ao6g] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* Rectangular CTAs — radius-sm (4px), NOT pill. */
.btn-cine-primary[b-st19q8ao6g],
.btn-cine-secondary[b-st19q8ao6g] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: var(--font-semibold);
    letter-spacing: 0.005em;
    padding: 0.95rem 1.7rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                color var(--duration-base) var(--ease-out);
    white-space: nowrap;
}

.btn-cine-primary[b-st19q8ao6g] {
    background: var(--color-primary);
    color: #FFFFFF;
    box-shadow: 0 10px 32px -8px rgba(13, 59, 102, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.btn-cine-primary:hover[b-st19q8ao6g] {
    background: var(--color-primary-light);
    color: #FFFFFF;
    transform: translateY(-1px);
}

.btn-cine-secondary[b-st19q8ao6g] {
    background: transparent;
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.btn-cine-secondary:hover[b-st19q8ao6g] {
    background: rgba(255, 255, 255, 0.10);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.60);
}

/* ── Hero anim cascade — fade-up with staggered delays ─────────────── */
.hero-anim[b-st19q8ao6g] {
    opacity: 0;
    transform: translateY(16px);
    animation: hero-fade-up-b-st19q8ao6g var(--duration-reveal) var(--ease-out) forwards;
    animation-delay: var(--hero-anim-delay, 0ms);
}

.hero-anim-delay-0[b-st19q8ao6g] { --hero-anim-delay: 100ms; }
.hero-anim-delay-1[b-st19q8ao6g] { --hero-anim-delay: 220ms; }
.hero-anim-delay-2[b-st19q8ao6g] { --hero-anim-delay: 340ms; }
.hero-anim-delay-3[b-st19q8ao6g] { --hero-anim-delay: 460ms; }
.hero-anim-delay-4[b-st19q8ao6g] { --hero-anim-delay: 580ms; }

@keyframes hero-fade-up-b-st19q8ao6g {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-anim[b-st19q8ao6g] {
        opacity: 1;
        transform: none;
        animation: none;
    }
    /* Static parallax — heroParallax.js already bails out, but if any
       transform sneaks through we kill it here too. */
    .hero-cinematic .hero-photo[b-st19q8ao6g] {
        transform: scale(1.08) translate3d(0, 0, 0) !important;
    }
}

/* ==========================================================================
   FLOATING PRODUCT CARDS
   Sibling of .hero-cinematic, pulled up via negative margin so the cards
   overlap the hero's bottom edge and the FEATURES section's top edge.
   pointer-events:none on the wrapper keeps the transparent gaps from
   blocking clicks through to the page chrome below.
   ========================================================================== */
.floating-cards-wrap[b-st19q8ao6g] {
    position: relative;
    z-index: 5;
    margin: -5rem auto 0;
    max-width: var(--container-app);
    padding: 0 var(--spacing-xl);
    pointer-events: none;
}

.floating-cards[b-st19q8ao6g] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
    align-items: end;
    pointer-events: none;
}

.floating-card[b-st19q8ao6g] {
    pointer-events: auto;
    position: relative;
    background: var(--glass-card-bg-light);
    border: 1px solid var(--glass-card-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 24px 60px -20px rgba(6, 14, 28, 0.45),
                0 4px 12px -4px rgba(6, 14, 28, 0.25);
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.floating-card.tilt-left[b-st19q8ao6g]  { transform: rotate(-2deg); }
.floating-card.tilt-mid[b-st19q8ao6g]   { transform: rotate(0deg); transform-origin: center bottom; z-index: 2; }
.floating-card.tilt-right[b-st19q8ao6g] { transform: rotate(2deg); }

/* On hover, un-rotate + lift so the user can read clearly. */
.floating-card:hover[b-st19q8ao6g] {
    transform: rotate(0deg) translateY(-6px);
    z-index: 3;
}

/* Card header */
.fc-eyebrow[b-st19q8ao6g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.fc-eyebrow-label[b-st19q8ao6g] {
    font-size: 0.68rem;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--color-text-muted);
}

.fc-eyebrow-icon[b-st19q8ao6g] {
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    font-size: 0.85rem;
}

/* ── Card 1: SIBA Queue ────────────────────────────────────────────── */
.fc-siba-rows[b-st19q8ao6g] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fc-siba-row[b-st19q8ao6g] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.6rem 0.75rem;
    background: var(--color-background);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
}

.fc-siba-name[b-st19q8ao6g] {
    font-size: 0.78rem;
    font-weight: var(--font-semibold);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-siba-file[b-st19q8ao6g] {
    /* Monospace via system stack — the project doesn't define a mono token. */
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.fc-pill[b-st19q8ao6g] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: var(--font-semibold);
    letter-spacing: 0.02em;
}

.fc-pill .dot[b-st19q8ao6g] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.fc-pill.accepted[b-st19q8ao6g] {
    background: var(--state-live-bg);
    color: var(--state-live-fg);
}

.fc-pill.accepted .dot[b-st19q8ao6g] {
    background: var(--state-live);
}

.fc-pill.pending[b-st19q8ao6g] {
    background: var(--state-planned-bg);
    color: var(--state-planned-fg);
}

.fc-pill.pending .dot[b-st19q8ao6g] {
    background: var(--state-planned);
}

/* ── Card 2: Financial KPI ────────────────────────────────────────── */
.fc-kpi-value[b-st19q8ao6g] {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: var(--font-bold);
    letter-spacing: -0.022em;
    color: var(--color-primary);
    line-height: 1.05;
    margin: 0;
}

.fc-kpi-currency[b-st19q8ao6g] {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-left: 0.35rem;
    font-weight: var(--font-medium);
}

.fc-kpi-delta[b-st19q8ao6g] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    font-weight: var(--font-semibold);
    color: var(--color-success);
    margin-left: 0.55rem;
    vertical-align: middle;
}

.fc-kpi-sub[b-st19q8ao6g] {
    margin: 0.25rem 0 var(--space-md);
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.fc-spark[b-st19q8ao6g] {
    width: 100%;
    height: 56px;
    display: block;
}

/* ── Card 3: Guest Link Shared ────────────────────────────────────── */
.fc-link-row[b-st19q8ao6g] {
    display: flex;
    align-items: stretch;
    gap: var(--space-sm);
}

.fc-link-info[b-st19q8ao6g] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.fc-link-url[b-st19q8ao6g] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.74rem;
    color: var(--color-primary);
    padding: 0.45rem 0.55rem;
    background: var(--color-background);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-link-meta[b-st19q8ao6g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.fc-link-meta-secondary[b-st19q8ao6g] {
    margin-top: 0.25rem;
}

.fc-link-recipient[b-st19q8ao6g] {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-link-recipient-sub[b-st19q8ao6g] {
    font-size: 0.68rem;
}

.fc-link-recipient-sub .bi[b-st19q8ao6g] {
    margin-right: 4px;
}

.fc-qr[b-st19q8ao6g] {
    width: 64px;
    height: 64px;
    background: #FFFFFF;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: 5px;
    flex: 0 0 auto;
}

.fc-qr svg[b-st19q8ao6g] {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Dark-mode adjustments for the floating cards ────────────────── */
/* Blazor-scoped: [data-theme="dark"] is on <html>; descendant scoping
   rewrites .floating-card → .floating-card[b-xxx] which still matches. */
[data-theme="dark"] .floating-card[b-st19q8ao6g] {
    background: var(--glass-card-bg-dark);
    border-color: var(--glass-card-border-dark);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.65),
                0 4px 12px -4px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .fc-siba-row[b-st19q8ao6g],
[data-theme="dark"] .fc-link-url[b-st19q8ao6g] {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .fc-link-url[b-st19q8ao6g] {
    color: #C9DDF5;
}

/* Eyebrow lifts to tram yellow in dark mode (azulejo blue in light theme).
   Note: H2 titles, feature/step/roadmap titles, step icons etc. inherit
   --color-primary which _dark.css already lifts to #5BA0E8 (bright sky
   blue), so no per-page dark overrides are needed for readability. */
[data-theme="dark"] .section-label[b-st19q8ao6g] {
    color: var(--color-accent);
}

/* ==========================================================================
   FEATURES SECTION — extra top padding so the floating cards overlap cleanly.
   ========================================================================== */
.landing-page.cinematic .features-section[b-st19q8ao6g] {
    padding-top: 9rem;
}

.features-section[b-st19q8ao6g] {
    padding: 5rem 0;
    background: var(--color-background);
}

.section-header[b-st19q8ao6g] {
    text-align: center;
    margin-bottom: 3.5rem;
}

.section-label[b-st19q8ao6g] {
    display: inline-block;
    /* Eyebrow colour is theme-gated: azulejo blue over light surfaces
       (restrained, brand-consistent), tram-yellow over dark surfaces
       (lifts the section start against the navy background). The dark
       override lives near the bottom of this file with the other
       [data-theme="dark"] rules. */
    color: var(--color-secondary);
    font-size: 0.8rem;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--spacing-sm);
}

.section-title[b-st19q8ao6g] {
    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: var(--font-bold);
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.01em;
}

.section-subtitle[b-st19q8ao6g] {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: var(--leading-normal);
}

.features-grid[b-st19q8ao6g] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
}

.feature-card[b-st19q8ao6g] {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.feature-card:hover[b-st19q8ao6g] {
    transform: translateY(-4px);
    box-shadow: var(--elevation-4);
    border-color: var(--color-secondary);
}

.feature-icon-wrap[b-st19q8ao6g] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-md);
    font-size: 1.3rem;
    margin-bottom: var(--spacing-lg);
}

.feature-card:hover .feature-icon-wrap[b-st19q8ao6g] {
    background: var(--color-secondary);
}

.feature-title[b-st19q8ao6g] {
    color: var(--color-primary);
    font-size: 1.1rem;
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-sm);
}

.feature-desc[b-st19q8ao6g] {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   HOW IT WORKS SECTION
   ========================================================================== */
.steps-section[b-st19q8ao6g] {
    padding: 5rem 0;
    background: var(--color-surface);
}

/* Grid with a horizontal connector line behind the cards. The line spans
   the full grid width at the icon row's vertical centre; the cards have
   solid backgrounds so the line only shows in the gaps between them. */
.steps-grid[b-st19q8ao6g] {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
    position: relative;
}

.steps-grid[b-st19q8ao6g]::before {
    content: '';
    position: absolute;
    /* Number circle Y (~1.5rem padding + ~1rem to centre of 2rem number) */
    top: calc(var(--space-lg) + 1rem);
    left: 10%;
    right: 10%;
    height: 1px;
    background: var(--color-border-light);
    z-index: 0;
}

.step-card[b-st19q8ao6g] {
    text-align: center;
    flex: 1;
    max-width: 240px;
    min-width: 200px;
    position: relative;
    z-index: 1;                                 /* hide the connector line */
    background: var(--color-background);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.step-card:hover[b-st19q8ao6g] {
    box-shadow: var(--elevation-3);
    transform: translateY(-2px);
    border-color: var(--color-secondary);
}

.step-number[b-st19q8ao6g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: var(--font-bold);
    margin-bottom: var(--spacing-md);
    position: relative;
    z-index: 2;                                 /* sits over the connector line */
}

.step-icon[b-st19q8ao6g] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 2px solid var(--color-border-light);
    border-radius: 50%;
    font-size: 1.4rem;
    color: var(--color-primary);
    margin: 0 auto var(--spacing-md);
    transition: border-color var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out);
}

.step-card:hover .step-icon[b-st19q8ao6g] {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

/* Connector line hidden when the steps wrap (the line spans a single row
   only; wrapping into multiple rows would otherwise leave a stray line
   above the second row). */
@media (max-width: 1279.98px) {
    .steps-grid[b-st19q8ao6g]::before {
        display: none;
    }
}

.step-title[b-st19q8ao6g] {
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-xs);
}

.step-desc[b-st19q8ao6g] {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================================
   ROADMAP SUMMARY SECTION
   ========================================================================== */
.roadmap-summary-section[b-st19q8ao6g] {
    padding: 5rem 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-light);
}

.roadmap-summary-grid[b-st19q8ao6g] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.roadmap-summary-card[b-st19q8ao6g] {
    background: var(--color-background);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--elevation-1);
    transition: box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

.roadmap-summary-card:hover[b-st19q8ao6g] {
    box-shadow: var(--elevation-3);
    transform: translateY(-2px);
}

.roadmap-summary-card-head[b-st19q8ao6g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.roadmap-summary-card-icon[b-st19q8ao6g] {
    font-size: var(--text-2xl);
    color: var(--color-primary);
}

.roadmap-summary-card-title[b-st19q8ao6g] {
    color: var(--color-primary);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin: 0 0 var(--space-2xs);
}

.roadmap-summary-card-summary[b-st19q8ao6g] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    margin: 0;
}

.roadmap-summary-cta[b-st19q8ao6g] {
    text-align: center;
}

.btn-roadmap-link[b-st19q8ao6g] {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-primary);
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.btn-roadmap-link:hover[b-st19q8ao6g] {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}

/* ==========================================================================
   CTA SECTION
   ========================================================================== */
.cta-section[b-st19q8ao6g] {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    position: relative;
    overflow: hidden;
}

.cta-section[b-st19q8ao6g]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(74, 144, 217, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.cta-inner[b-st19q8ao6g] {
    position: relative;
    text-align: center;
    max-width: 700px;
}

.cta-title[b-st19q8ao6g] {
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: var(--font-bold);
    margin-bottom: var(--spacing-md);
}

.cta-subtitle[b-st19q8ao6g] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-xl);
}

.cta-actions[b-st19q8ao6g] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.btn-cta-primary[b-st19q8ao6g] {
    display: inline-flex;
    align-items: center;
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    font-weight: var(--font-semibold);
    font-size: 1rem;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: background var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
    box-shadow: 0 4px 16px rgba(244, 211, 94, 0.3);
}

.btn-cta-primary:hover[b-st19q8ao6g] {
    background: var(--color-accent-dark);
    color: var(--color-text-on-accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(244, 211, 94, 0.4);
}

.btn-cta-secondary[b-st19q8ao6g] {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
    font-weight: var(--font-medium);
    font-size: 1rem;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.25);
    text-decoration: none;
    transition: background var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.btn-cta-secondary:hover[b-st19q8ao6g] {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   FOOTER — cinematic single-line
   ========================================================================== */
.cinematic-footer[b-st19q8ao6g] {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-light);
    padding: var(--space-2xl) var(--spacing-xl);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-align: center;
}

.cinematic-footer-links[b-st19q8ao6g] {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

.cinematic-footer-links a[b-st19q8ao6g] {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: color var(--duration-fast) var(--ease-out);
}

.cinematic-footer-links a:hover[b-st19q8ao6g] {
    color: var(--color-primary);
}

.cinematic-footer-tagline[b-st19q8ao6g] {
    color: var(--color-text-muted);
}

.cinematic-footer strong[b-st19q8ao6g] {
    color: var(--color-primary);
    font-weight: var(--font-bold);
}

/* Phone: tighten the link row gap so 4 links fit cleanly. */
@media (max-width: 599.98px) {
    .cinematic-footer-links[b-st19q8ao6g] {
        gap: var(--space-md);
    }
}

/* ==========================================================================
   RESPONSIVE
   (Nav slices moved to MarketingLayout.razor.css with the nav — Founder-3.)
   ========================================================================== */

/* Tablet — below --bp-lg (1280px) */
@media (max-width: 1279.98px) {
    .features-grid[b-st19q8ao6g],
    .roadmap-summary-grid[b-st19q8ao6g] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Below --bp-md (900px): hero anchors to bottom, cards stack flat */
@media (max-width: 899.98px) {
    .hero-cinematic[b-st19q8ao6g] {
        justify-content: flex-end;
    }

    .hero-cinematic-inner[b-st19q8ao6g] {
        padding-bottom: var(--space-3xl);
    }

    .hero-cinematic-actions[b-st19q8ao6g] {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-cine-primary[b-st19q8ao6g],
    .btn-cine-secondary[b-st19q8ao6g] {
        width: 100%;
        justify-content: center;
    }

    /* Cards stack vertically beneath the hero, no overlap, no tilt. */
    .floating-cards-wrap[b-st19q8ao6g] {
        margin-top: var(--space-xl);
        margin-bottom: var(--space-xl);
    }

    .floating-cards[b-st19q8ao6g] {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .floating-card.tilt-left[b-st19q8ao6g],
    .floating-card.tilt-mid[b-st19q8ao6g],
    .floating-card.tilt-right[b-st19q8ao6g] {
        transform: rotate(0deg);
    }

    .floating-card:hover[b-st19q8ao6g] {
        transform: translateY(-2px);
    }

    .landing-page.cinematic .features-section[b-st19q8ao6g] {
        padding-top: var(--space-2xl);
    }
}

/* Mobile — below --bp-sm (600px) */
@media (max-width: 599.98px) {
    .landing-container[b-st19q8ao6g] {
        padding: 0 var(--spacing-lg);
    }

    .hero-cinematic-inner[b-st19q8ao6g] {
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }

    .floating-cards-wrap[b-st19q8ao6g] {
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }

    .features-section[b-st19q8ao6g],
    .steps-section[b-st19q8ao6g],
    .cta-section[b-st19q8ao6g],
    .roadmap-summary-section[b-st19q8ao6g] {
        padding: 3.5rem 0;
    }

    .features-grid[b-st19q8ao6g],
    .roadmap-summary-grid[b-st19q8ao6g] {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .cta-actions[b-st19q8ao6g] {
        flex-direction: column;
    }

    .btn-cta-primary[b-st19q8ao6g],
    .btn-cta-secondary[b-st19q8ao6g] {
        width: 100%;
        justify-content: center;
    }
}

/* Below 480px: headline + section titles tighten. */
@media (max-width: 479.98px) {
    .hero-cinematic-title[b-st19q8ao6g] {
        font-size: clamp(2.1rem, 9vw, 3.2rem);
    }

    .section-title[b-st19q8ao6g] {
        font-size: 1.35rem;
    }
}
/* /Components/Shared/Primitives/BottomNav.razor.rz.scp.css */
.bottom-nav[b-ii820n3aod] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    display: flex;
    background: var(--color-background);
    border-top: 1px solid var(--color-border-light);
    box-shadow: var(--elevation-3);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

[b-ii820n3aod] .bottom-nav-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xs);
    min-height: var(--touch-target-min);
    padding: var(--space-xs) var(--space-2xs);
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}

[b-ii820n3aod] .bottom-nav-item:hover {
    color: var(--color-text);
}

[b-ii820n3aod] .bottom-nav-item.active {
    color: var(--color-primary);
}

[b-ii820n3aod] .bottom-nav-item-icon {
    font-size: var(--text-xl);
    line-height: 1;
}

[b-ii820n3aod] .bottom-nav-item-label {
    line-height: 1.2;
}

/* Hide bottom nav on tablet+ — the persistent sidebar takes over */
@media (min-width: 900px) {  /* --bp-md */
    .bottom-nav[b-ii820n3aod] {
        display: none;
    }
}
/* /Components/Shared/Primitives/ContextPanel.razor.rz.scp.css */
.context-panel[b-oi6q3z6x5m] {
    display: none;
}

/* Ultrawide-only: show as a floating right-rail panel. Phase 6 MainLayout
   reserves padding-right so it does not overlap content. */
@media (min-width: 1600px) {  /* --bp-xl */
    .context-panel[b-oi6q3z6x5m] {
        display: block;
        position: fixed;
        top: calc(64px + var(--space-lg));
        right: var(--space-xl);
        width: 320px;
        max-height: calc(100vh - 64px - 2 * var(--space-xl));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--color-surface);
        border: 1px solid var(--color-border-light);
        border-radius: var(--radius-lg);
        padding: var(--space-lg);
        box-shadow: var(--elevation-1);
        z-index: 50;
    }

    .context-panel-title[b-oi6q3z6x5m] {
        font-size: var(--text-base);
        color: var(--color-primary);
        margin: 0 0 var(--space-sm);
        font-weight: var(--font-semibold);
    }

    .context-panel-body[b-oi6q3z6x5m] {
        font-size: var(--text-sm);
        color: var(--color-text);
    }
}
/* /Components/Shared/Primitives/MobileNavDrawer.razor.rz.scp.css */
.mobile-drawer[b-ko6ngu3g6n] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    pointer-events: none;
    visibility: hidden;
}

.mobile-drawer.is-open[b-ko6ngu3g6n] {
    pointer-events: auto;
    visibility: visible;
}

.mobile-drawer-backdrop[b-ko6ngu3g6n] {
    position: absolute;
    inset: 0;
    background: rgba(13, 22, 32, 0.5);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
}

.mobile-drawer.is-open .mobile-drawer-backdrop[b-ko6ngu3g6n] {
    opacity: 1;
}

.mobile-drawer-panel[b-ko6ngu3g6n] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(85vw, 320px);
    background: var(--color-background);
    box-shadow: var(--elevation-4);
    transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease-out);
}

/* Inner scroller. The panel keeps the chrome (background, elevation shadow,
   slide transform); THIS element does the scrolling and carries the fade mask.
   They are deliberately separate: mask-image masks everything the element
   paints, so masking the panel would fade its own background and box-shadow
   into the backdrop at the bottom edge. NavMenu's .nav-scrollable can be masked
   directly only because it is transparent over .sidebar's gradient. */
.mobile-drawer-scroll[b-ko6ngu3g6n] {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    /* Scrollbar fully hidden — no thumb, no track, no line. This drawer is the
       phone-sized equivalent of the desktop sidebar nav (opened from BottomNav
       to pick a page) and carries the same founder decision, so it gets the
       same treatment as .nav-scrollable in NavMenu.razor.css. The brief's §6.2
       "clearly visible scrollbar" exception is scoped to nav surfaces — these
       two and nothing else. */
    scrollbar-width: none;

    /* Bottom fade cue — see the full rationale on .nav-scrollable in NavMenu.razor.css.
       Self-hiding: the band is the last 1rem of the scrollport, so it only reads as a fade
       once the nav actually fills it — which is exactly when scrolling is possible.
       1rem, not 1.5rem: it clears the last item's 1rem bottom padding without dimming its
       highlight pill. Keep in sync with --nav-fade-height. */
    --drawer-fade-height: 1rem;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--drawer-fade-height)), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--drawer-fade-height)), transparent 100%);
}

.mobile-drawer-scroll[b-ko6ngu3g6n]::-webkit-scrollbar {
    display: none;
}

.mobile-drawer.is-open .mobile-drawer-panel[b-ko6ngu3g6n] {
    transform: translateX(0);
}

/* Drawer is a mobile-only pattern — collapse on tablet+ */
@media (min-width: 900px) {  /* --bp-md */
    .mobile-drawer[b-ko6ngu3g6n] {
        display: none;
    }
}

/* ── NavMenu integration ────────────────────────────────────────────────
   NavMenu (used as the desktop sidebar) has a Bootstrap-style mobile
   collapse pattern: <input class="navbar-toggler"> + .nav-scrollable
   which is `display: none` by default and only shown via
   `.navbar-toggler:checked ~ .nav-scrollable` OR `@media (min-width: 900px)`.

   That works for the inline-sidebar context but breaks when NavMenu is
   rendered INSIDE this drawer at viewport < 900px: the toggler appears
   as a redundant burger icon inside the drawer panel, and the nav items
   stay hidden until the user clicks it. The drawer is already the
   "expanded" state — there should be nothing to toggle.

   Hide the toggler and force the nav-scrollable visible whenever NavMenu
   is a descendant of .mobile-drawer-panel. Uses ::deep so the rule
   crosses the scope boundary into NavMenu's own elements. */
.mobile-drawer-panel[b-ko6ngu3g6n]  .navbar-toggler {
    display: none;
}

.mobile-drawer-panel[b-ko6ngu3g6n]  .nav-scrollable {
    display: block;
    /* .mobile-drawer-scroll is the scroller here; don't double-scroll. */
    height: auto;
    overflow: visible;

    /* NavMenu's bottom-fade mask must be neutralised, not just its scrolling. Its rule lives in
       `@media (min-width: 768px)` while this drawer is only hidden at >=900px, so in the
       768-899.98px band NavMenu renders INSIDE the drawer and inherits the mask. Combined with the
       `height: auto` above the mask box becomes the CONTENT box, so `calc(100% - 1rem)` lands on
       the last nav item and fades it permanently — at every scroll position, and even when the nav
       fits and there is nothing to scroll. That inverts the fade's self-hiding property and stacks
       a second fade under .mobile-drawer-scroll's own. */
    -webkit-mask-image: none;
    mask-image: none;
}

/* ── Nav-link colours inside the drawer ──────────────────────────────────
   NavMenu's default colours are tuned for the desktop sidebar context
   (a dark navy surface) — `--sidebar-text` is `#D7D7D7` in light theme
   and `#C8D0DC` in dark, both LIGHT-on-DARK. Inside this drawer the
   panel uses `--color-background` (white in light theme, dark in dark
   theme), so light-on-light becomes invisible.

   Override here to use the body-text token + brand hover/active states,
   which lift correctly across both themes. ::deep is required because
   .nav-link is rendered by NavMenu (a child component) and doesn't
   carry this drawer's scope. */
.mobile-drawer-panel[b-ko6ngu3g6n]  .nav-link {
    color: var(--color-text);
}

.mobile-drawer-panel[b-ko6ngu3g6n]  .nav-link:hover {
    background-color: var(--color-surface-alt);
    color: var(--color-primary);
}

.mobile-drawer-panel[b-ko6ngu3g6n]  a.active {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

/* ── Section headers inside the drawer ──────────────────────────────────
   NavMenu's `.nav-section-header` is tuned for the navy sidebar:
   `color: rgba(255,255,255,0.45)` and `border-top: rgba(255,255,255,0.08)`.
   On the drawer panel (white in light, dark in dark) both shapes vanish in
   light theme. Lift to body-muted + border tokens so the labels and the
   separators render across themes. */
.mobile-drawer-panel[b-ko6ngu3g6n]  .nav-section-header {
    color: var(--color-text-muted);
    border-top-color: var(--color-border-light);
}

.mobile-drawer-panel[b-ko6ngu3g6n]  .nav-section-header:hover {
    color: var(--color-text);
}

/* ── Nav icons inside the drawer ────────────────────────────────────────
   NavMenu's `.bi-*-nav-menu` icons are background-image inline SVGs with
   `fill='white'` baked into the data URL — CSS `color` cannot affect them.
   On the white light-theme drawer panel they vanish (white on white).
   `brightness(0)` flattens any non-transparent pixel to black, which is
   what we want on a light surface. In dark theme the panel is dark and
   the original white icons read correctly, so revert.
   Active items use a dark primary background even in light theme, so
   the icon there should stay white — drop the filter for `a.active .bi`. */
.mobile-drawer-panel[b-ko6ngu3g6n]  .bi {
    filter: brightness(0);
}

.mobile-drawer-panel[b-ko6ngu3g6n]  a.active .bi {
    filter: none;
}

[data-theme="dark"] .mobile-drawer-panel[b-ko6ngu3g6n]  .bi {
    filter: none;
}
/* /Components/Shared/Primitives/StatusBadge.razor.rz.scp.css */
.status-badge[b-8xrfom35zi] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    line-height: 1.4;
    white-space: nowrap;
    width: max-content;
}

.status-badge-dot[b-8xrfom35zi] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.status-badge--live[b-8xrfom35zi] {
    background: var(--state-live-bg);
    color: var(--state-live-fg);
}

.status-badge--live .status-badge-dot[b-8xrfom35zi] {
    background: var(--state-live);
}

.status-badge--beta[b-8xrfom35zi] {
    background: var(--state-beta-bg);
    color: var(--state-beta-fg);
}

.status-badge--beta .status-badge-dot[b-8xrfom35zi] {
    background: var(--state-beta);
}

.status-badge--planned[b-8xrfom35zi] {
    background: var(--state-planned-bg);
    color: var(--state-planned-fg);
}

.status-badge--planned .status-badge-dot[b-8xrfom35zi] {
    background: var(--state-planned);
}

.status-badge--deprecated[b-8xrfom35zi] {
    background: var(--state-deprecated-bg);
    color: var(--state-deprecated-fg);
}

.status-badge--deprecated .status-badge-dot[b-8xrfom35zi] {
    background: var(--state-deprecated);
}

.status-badge--neutral[b-8xrfom35zi] {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
}

.status-badge--neutral .status-badge-dot[b-8xrfom35zi] {
    background: var(--color-text-muted);
}

/* Failed — derived from --color-danger via color-mix because the system
   has no --state-failed-bg / --state-failed-fg pair. Mirrors the shape of
   the other --state-* pairs: tinted bg against the page surface, darker fg
   against the body text. */
.status-badge--failed[b-8xrfom35zi] {
    background: color-mix(in srgb, var(--color-danger) 14%, var(--color-background));
    color:      color-mix(in srgb, var(--color-danger) 72%, var(--color-text));
}

.status-badge--failed .status-badge-dot[b-8xrfom35zi] {
    background: var(--color-danger);
}
/* /Components/Shared/Primitives/ThemeToggle.razor.rz.scp.css */
/* One button, no group. The theme-toggle-btn class is this file's own hook - nothing
   outside the component styles it - and the 2.25rem box matches MarketingLayout's
   .theme-toggle-static, which is a separate hand-rolled button, not this component. */
.theme-toggle-btn[b-w2ry1xg9m9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.theme-toggle-btn:hover[b-w2ry1xg9m9] {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-surface-alt) 70%, transparent);
}

.theme-toggle-btn:focus-visible[b-w2ry1xg9m9] {
    outline: 2px solid var(--color-secondary);
    outline-offset: 1px;
}

.theme-toggle-btn i[b-w2ry1xg9m9] {
    font-size: var(--text-base);
    line-height: 1;
}

/* Phone widths: the 36px box is below the repo's 44px touch target (SOP
   docs/design-system/SOP-claude-design-to-blazor.md). The group this replaced raised
   only its WIDTH to the token at this breakpoint (height stayed 30px); one button in
   the topbar has room for a full 44px square. AL.Web's .theme-toggle-static stays
   36px - it is a different control in a nav row, unchanged by this branch. */
@media (max-width: 599px) {  /* below --bp-sm */
    .theme-toggle-btn[b-w2ry1xg9m9] {
        width: var(--touch-target-min);
        height: var(--touch-target-min);
    }
}

/* Icon swap driven by <html data-theme>, which App.razor renders from the
   cookie and theme.js keeps current - correct in static SSR and in-circuit
   alike, with no JS sync and no state on this component. */
.theme-icon-when-dark[b-w2ry1xg9m9] { display: none; }

[data-theme="dark"] .theme-icon-when-light[b-w2ry1xg9m9] { display: none; }
[data-theme="dark"] .theme-icon-when-dark[b-w2ry1xg9m9] { display: inline-block; }
/* /Components/Shared/SearchableSelect.razor.rz.scp.css */
.searchable-select[b-84rpbj7eiu] {
    position: relative;
}

.searchable-select-input[b-84rpbj7eiu] {
    width: 100%;
    cursor: text;
}

.searchable-select.no-match .searchable-select-input[b-84rpbj7eiu] {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-danger) 20%, transparent);
}

.searchable-select-dropdown[b-84rpbj7eiu] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    /* Themed tokens, NOT --bs-* with light fallbacks: the app themes via [data-theme="dark"] and never
       sets Bootstrap's data-bs-theme, so --bs-body-bg fell back to #fff — a white dropdown in dark mode.
       `color` is set so the items are readable on the themed surface in both light and dark. */
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 250px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.searchable-select-list[b-84rpbj7eiu] {
    overflow-y: auto;
    max-height: 250px;
}

.searchable-select-item[b-84rpbj7eiu] {
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .searchable-select-item:hover[b-84rpbj7eiu],
    .searchable-select-item.highlighted[b-84rpbj7eiu] {
        background-color: var(--color-primary);
        color: var(--color-text-on-primary);
    }

    .searchable-select-item.selected[b-84rpbj7eiu] {
        font-weight: 600;
    }

.searchable-select-no-results[b-84rpbj7eiu] {
    padding: 0.5rem 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    text-align: center;
}

/* Last flex child of .searchable-select-dropdown (column, max-height 250px, overflow hidden).
   flex-shrink: 0 keeps the message at full height and lets .searchable-select-list absorb the
   space instead — the list sets overflow-y: auto, so its automatic minimum size is 0 and it can
   shrink and scroll. Horizontal padding matches .searchable-select-item so the text lines up with
   the option rows above it. */
.searchable-select-feedback[b-84rpbj7eiu] {
    flex-shrink: 0;
    margin-top: 0.25rem;
    padding: 0 0.75rem 0.4rem;
    color: var(--color-danger);
    font-size: 0.8rem;
}