/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-ln6b6nx6u0] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Two-row header: a fixed-height brand strip on top (sticks to viewport) and a
   flexible section-nav strip below it. */
.app-header[b-ln6b6nx6u0] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.app-header-bar[b-ln6b6nx6u0] {
    display: flex;
    align-items: stretch;
    height: 3rem;
}

.app-brand[b-ln6b6nx6u0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.25rem;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    white-space: nowrap;
}

.app-brand:hover[b-ln6b6nx6u0] {
    color: #ffffff;
    text-decoration: none;
}

.app-brand-icon[b-ln6b6nx6u0] {
    font-size: 1.25rem;
    color: var(--color-primary, #60a5fa);
}

.app-brand-logo[b-ln6b6nx6u0] {
    height: 1.75rem;
    width: auto;
    max-width: 9rem;
    object-fit: contain;
    display: block;
}

.app-header-actions[b-ln6b6nx6u0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
    margin-left: auto;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.app-header-actions[b-ln6b6nx6u0]  a,
.app-header-actions[b-ln6b6nx6u0]  .btn-link {
    color: rgba(203, 213, 225, 0.85);
    text-decoration: none;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.app-header-actions[b-ln6b6nx6u0]  a:hover,
.app-header-actions[b-ln6b6nx6u0]  .btn-link:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}

.app-header-actions[b-ln6b6nx6u0]  .text-muted {
    color: rgba(203, 213, 225, 0.85) !important;
}

/* Body: the section icon rail (TopSectionNav) sits to the left of <main>; the
   horizontal section menu (NavMenu) + content stack vertically inside <main>. */
.app-body[b-ln6b6nx6u0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

main[b-ln6b6nx6u0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg);
    min-width: 0;
}

@media (max-width: 640.98px) {
    .app-brand[b-ln6b6nx6u0] {
        padding: 0 0.75rem;
    }

    .app-header-actions[b-ln6b6nx6u0] {
        padding: 0 0.5rem;
        gap: 0.25rem;
    }
}

@media (min-width: 641px) {
    .app-body[b-ln6b6nx6u0] {
        flex-direction: row;
    }

    article.content[b-ln6b6nx6u0] {
        padding-top: 1.5rem !important;
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

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

    #blazor-error-ui .dismiss[b-ln6b6nx6u0] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* layout-50 — single horizontal section menu bar (replaces the vertical
   sub-sidebar). One collapsible row of the active module's pages; the admin/
   config items live in the left rail under the module, not here.
   Theme-aware via the Pack-1 design tokens. */

.section-bar[b-egyi0gpqew] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    padding: .4rem .85rem;
    background: var(--color-card, #ffffff);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.section-toggle[b-egyi0gpqew] {
    flex-shrink: 0;
    width: 1.85rem;
    height: 1.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, .375rem);
    background: transparent;
    color: var(--color-muted, #6b7280);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.section-toggle:hover[b-egyi0gpqew] {
    background: var(--color-subtle, #f3f4f6);
    color: var(--color-text, #111827);
}

.section-label[b-egyi0gpqew] {
    flex-shrink: 0;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--color-muted, #6b7280);
    margin-right: .25rem;
    white-space: nowrap;
}

.section-items[b-egyi0gpqew] {
    display: flex;
    align-items: center;
    gap: .15rem;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}

/* The page tabs are rendered by <NavLink> (a child component), so their <a>
   does NOT carry this component's scoped-CSS attribute — target them through
   ::deep from the scoped .section-items wrapper, or they fall back to the global
   blue/underlined link style. */
.section-items[b-egyi0gpqew]  .section-tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border-radius: var(--radius-sm, .375rem);
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text, #111827);
    text-decoration: none;
    font-size: .85rem;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.section-items[b-egyi0gpqew]  .section-tab:hover {
    background: var(--color-subtle, #f3f4f6);
    color: var(--color-text, #111827);
    text-decoration: none;
}

.section-items[b-egyi0gpqew]  .section-tab.active {
    background: var(--color-primary, #2563eb);
    color: #ffffff;
}

.section-items[b-egyi0gpqew]  .section-tab.active .bi {
    color: #ffffff;
}

.section-items[b-egyi0gpqew]  .section-tab .bi {
    font-size: .95rem;
}

.section-collapsed-hint[b-egyi0gpqew] {
    font-size: .8rem;
    color: var(--color-muted, #6b7280);
}

@media (max-width: 640.98px) {
    .section-label[b-egyi0gpqew] {
        display: none;
    }
}
/* /Components/Layout/PortalLayout.razor.rz.scp.css */
/* Self-service portal layout. Linear/Vercel-inspired: deep neutral canvas,
   tenant-brand accent, slow ambient gradients, sharp typography. Scoped so
   nothing leaks into the admin shell. */

.portal-shell[b-2hk7lilw2e] {
    --portal-accent: #6366f1;
    /* --portal-canvas / --portal-line / --portal-shadow-* / --portal-radius-* stay
       their OWN values — the airy canvas tone + translucent hairlines + warmer
       shadow tint are a deliberate part of this layout's glass aesthetic, not
       oversight. --portal-ink / -ink-soft / --portal-surface below ARE anchored
       to the shared token scale (identical or same-role match), so the portal
       automatically tracks any future adjustment to those shared roles. */
    --portal-canvas: #f6f7fb;
    --portal-surface: var(--color-bg-card, #ffffff);
    --portal-surface-elevated: rgba(255, 255, 255, 0.78);
    --portal-ink: var(--color-text-dark, #0f172a);
    --portal-ink-soft: var(--color-text-muted, #475569);
    --portal-ink-faint: #94a3b8;
    --portal-line: rgba(15, 23, 42, 0.08);
    --portal-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.05);
    --portal-shadow-md: 0 8px 24px -8px rgba(15, 23, 42, 0.18);
    --portal-shadow-lg: 0 24px 56px -16px rgba(15, 23, 42, 0.22);
    --portal-radius: 16px;
    --portal-radius-sm: 10px;

    position: relative;
    min-height: 100vh;
    background: var(--portal-canvas);
    color: var(--portal-ink);
    font-feature-settings: "ss01", "cv11";
    overflow-x: hidden;
}

/* Bootstrap bridge — portal-design-finalization batch C. ~43 portal pages use
   plain Bootstrap .btn-primary (Submit / Save / Send request, etc.), which
   follows the ADMIN's --color-primary token — a fixed blue for every tenant,
   regardless of their configured brand colour. Rather than touch every page,
   one scoped override here (mirrors the operator theme's own Bootstrap bridge
   in app.css) redirects every primary button rendered inside the portal shell
   to the signed-in tenant's own --portal-accent. */
[b-2hk7lilw2e] .btn-primary {
    color: #fff;
    background-color: var(--portal-accent, #6366f1);
    border-color: var(--portal-accent, #6366f1);
}
[b-2hk7lilw2e] .btn-primary:hover {
    background-color: color-mix(in oklab, var(--portal-accent, #6366f1) 85%, black);
    border-color: color-mix(in oklab, var(--portal-accent, #6366f1) 85%, black);
    box-shadow: 0 4px 6px -1px color-mix(in oklab, var(--portal-accent, #6366f1) 25%, transparent);
}
[b-2hk7lilw2e] .btn-primary:disabled,
[b-2hk7lilw2e] .btn-primary.disabled {
    background-color: var(--portal-accent, #6366f1);
    border-color: var(--portal-accent, #6366f1);
    opacity: 0.6;
}
[b-2hk7lilw2e] .btn-check:checked + .btn-outline-primary,
[b-2hk7lilw2e] .btn-outline-primary:active {
    background-color: var(--portal-accent, #6366f1);
    border-color: var(--portal-accent, #6366f1);
}
[b-2hk7lilw2e] .btn-outline-primary {
    color: var(--portal-accent, #6366f1);
    border-color: var(--portal-accent, #6366f1);
}
[b-2hk7lilw2e] .btn-outline-primary:hover {
    background-color: var(--portal-accent, #6366f1);
    border-color: var(--portal-accent, #6366f1);
    color: #fff;
}

/* Slow-drifting aurora behind the content. Pure CSS, GPU-only props,
   muted opacity so it never fights the foreground. */
.portal-aurora[b-2hk7lilw2e] {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.portal-aurora-blob[b-2hk7lilw2e] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    will-change: transform;
}
.portal-aurora-blob-a[b-2hk7lilw2e] {
    width: 520px; height: 520px;
    top: -160px; left: -120px;
    background: radial-gradient(circle, var(--portal-accent), transparent 70%);
    animation: portal-drift-a-b-2hk7lilw2e 22s ease-in-out infinite alternate;
}
.portal-aurora-blob-b[b-2hk7lilw2e] {
    width: 460px; height: 460px;
    top: 30%; right: -120px;
    background: radial-gradient(circle, color-mix(in oklab, var(--portal-accent) 65%, #ec4899), transparent 70%);
    opacity: 0.35;
    animation: portal-drift-b-b-2hk7lilw2e 28s ease-in-out infinite alternate;
}
.portal-aurora-blob-c[b-2hk7lilw2e] {
    width: 380px; height: 380px;
    bottom: -120px; left: 30%;
    background: radial-gradient(circle, color-mix(in oklab, var(--portal-accent) 50%, #06b6d4), transparent 70%);
    opacity: 0.3;
    animation: portal-drift-c-b-2hk7lilw2e 34s ease-in-out infinite alternate;
}
@keyframes portal-drift-a-b-2hk7lilw2e {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(120px, 80px, 0) scale(1.08); }
}
@keyframes portal-drift-b-b-2hk7lilw2e {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-90px, 60px, 0) scale(1.05); }
}
@keyframes portal-drift-c-b-2hk7lilw2e {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(140px, -100px, 0) scale(1.1); }
}

/* Top bar: glassy, sticks to the top with a sharp 1px line. */
.portal-topbar[b-2hk7lilw2e] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 32px;
    background: rgba(255, 255, 255, 0.72);
    border-bottom: 1px solid var(--portal-line);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
}

.portal-brand[b-2hk7lilw2e] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--portal-ink);
    text-decoration: none;
    letter-spacing: -0.01em;
}
.portal-brand-mark[b-2hk7lilw2e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg,
        var(--portal-accent),
        color-mix(in oklab, var(--portal-accent) 60%, #1e1b4b));
    color: white;
    box-shadow: 0 6px 14px -4px color-mix(in oklab, var(--portal-accent) 65%, transparent);
}
.portal-brand-logo[b-2hk7lilw2e] {
    height: 32px;
    width: auto;
    border-radius: 8px;
    object-fit: contain;
}
.portal-brand-text[b-2hk7lilw2e] {
    font-size: 0.95rem;
}

.portal-nav[b-2hk7lilw2e] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 16px;
}
.portal-nav-link[b-2hk7lilw2e] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--portal-ink-soft);
    text-decoration: none;
    transition: color 160ms ease, background 160ms ease;
}
.portal-nav-link i[b-2hk7lilw2e] {
    font-size: 0.95rem;
    color: var(--portal-ink-faint);
    transition: color 160ms ease;
}
.portal-nav-link:hover[b-2hk7lilw2e] {
    color: var(--portal-ink);
    background: rgba(15, 23, 42, 0.04);
}
.portal-nav-link:hover i[b-2hk7lilw2e] { color: var(--portal-ink-soft); }
.portal-nav-link.is-active[b-2hk7lilw2e] {
    color: var(--portal-ink);
    background: color-mix(in oklab, var(--portal-accent) 10%, white);
}
.portal-nav-link.is-active i[b-2hk7lilw2e] { color: var(--portal-accent); }
.portal-nav-link.is-active[b-2hk7lilw2e]::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: -15px;
    height: 2px;
    border-radius: 2px;
    background: var(--portal-accent);
    box-shadow: 0 0 14px color-mix(in oklab, var(--portal-accent) 65%, transparent);
}

/* Logical inline-start so RTL languages flip correctly without per-rule overrides. */
[b-2hk7lilw2e] .lang-switcher { margin-inline-start: auto; }
.portal-userbox[b-2hk7lilw2e] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px 6px 6px 14px;
    border: 1px solid var(--portal-line);
    border-radius: 999px;
    background: var(--portal-surface);
    box-shadow: var(--portal-shadow-sm);
}
/* In RTL, the userbox sits at the visual right; using logical
   padding so the asymmetric 6px/14px flips automatically. */
.portal-userbox[b-2hk7lilw2e] { padding-inline: 14px 6px; }
.portal-userbox-name[b-2hk7lilw2e] {
    font-size: 0.85rem;
    color: var(--portal-ink);
    font-weight: 500;
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    transition: color 160ms ease;
}
.portal-userbox-name:hover[b-2hk7lilw2e] {
    color: var(--portal-accent, #6366f1);
}
.portal-userbox-signout[b-2hk7lilw2e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: var(--portal-ink-soft);
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease;
}
.portal-userbox-signout:hover[b-2hk7lilw2e] {
    background: color-mix(in oklab, var(--portal-accent) 14%, white);
    color: var(--portal-accent);
}

/* Page area. Generous vertical rhythm; the @key on the inner div forces
   Blazor to swap nodes on navigation, which lets the fade-in animation
   replay so each route entry feels intentional. */
.portal-main[b-2hk7lilw2e] {
    position: relative;
    z-index: 1;
    padding: 40px clamp(20px, 5vw, 80px) 80px;
    max-width: 1280px;
    margin: 0 auto;
}
.portal-content[b-2hk7lilw2e] {
    animation: portal-page-in-b-2hk7lilw2e 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes portal-page-in-b-2hk7lilw2e {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Mobile: collapse the topbar into a stack. Keeps the layout legible
   without wiring a hamburger menu. */
@media (max-width: 720px) {
    .portal-topbar[b-2hk7lilw2e] {
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px 16px;
    }
    .portal-nav[b-2hk7lilw2e] {
        order: 3;
        flex-basis: 100%;
        margin-left: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .portal-nav-link.is-active[b-2hk7lilw2e]::after { display: none; }
    .portal-userbox[b-2hk7lilw2e] { margin-left: auto; }
}

/* Honor users who've opted out of motion. */
@media (prefers-reduced-motion: reduce) {
    .portal-aurora-blob[b-2hk7lilw2e],
    .portal-content[b-2hk7lilw2e] {
        animation: none !important;
    }
}

/* ── Shared component styles for child portal pages ─────────────────────
   Blazor scoped CSS only applies to the layout's own DOM; using ::deep
   forwards selectors into descendant components (the routed page Body).
   Anything used across multiple portal pages lives here so each page
   can stay markup-only. */

[b-2hk7lilw2e] .portal-hero {
    margin-bottom: 32px;
    padding-bottom: 4px;
}
[b-2hk7lilw2e] .portal-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--portal-accent, #6366f1);
    font-weight: 600;
    margin-bottom: 10px;
}
[b-2hk7lilw2e] .portal-title {
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    color: var(--portal-ink);
    background: linear-gradient(135deg,
        var(--portal-ink) 0%,
        color-mix(in oklab, var(--portal-ink) 60%, var(--portal-accent, #6366f1)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
[b-2hk7lilw2e] .portal-subtitle {
    font-size: 1.025rem;
    color: var(--portal-ink-soft);
    max-width: 620px;
    line-height: 1.55;
    margin: 0;
}

[b-2hk7lilw2e] .portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 28px;
}

/* Cards. Slight glassmorphism, lift on hover, staggered enter via
   --stagger custom property set inline by the page. */
[b-2hk7lilw2e] .portal-card {
    --stagger: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 22px 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: var(--portal-shadow-sm);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: inherit;
    text-decoration: none;
    transition:
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 220ms ease,
        border-color 220ms ease,
        background 220ms ease;
    animation: portal-card-in-b-2hk7lilw2e 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--stagger) * 60ms);
}
[b-2hk7lilw2e] .portal-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.94);
    border-color: color-mix(in oklab, var(--portal-accent, #6366f1) 35%, transparent);
    box-shadow: var(--portal-shadow-lg);
}
[b-2hk7lilw2e] .portal-card:focus-visible {
    outline: 2px solid var(--portal-accent, #6366f1);
    outline-offset: 3px;
}
[b-2hk7lilw2e] .portal-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--portal-accent, #6366f1) 18%, white),
        color-mix(in oklab, var(--portal-accent, #6366f1) 30%, white));
    color: var(--portal-accent, #6366f1);
    font-size: 1.15rem;
}
[b-2hk7lilw2e] .portal-card-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--portal-ink-faint);
    font-weight: 600;
}
[b-2hk7lilw2e] .portal-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--portal-ink);
    margin: 0;
}
[b-2hk7lilw2e] .portal-card-meta {
    font-size: 0.875rem;
    color: var(--portal-ink-soft);
    line-height: 1.45;
    margin: 0;
}
[b-2hk7lilw2e] .portal-card-count {
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-feature-settings: "tnum";
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--portal-ink);
}
[b-2hk7lilw2e] .portal-card-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--portal-accent, #6366f1);
}
[b-2hk7lilw2e] .portal-card-cta i {
    transition: transform 200ms ease;
}
[b-2hk7lilw2e] .portal-card:hover .portal-card-cta i {
    transform: translateX(3px);
}
[b-2hk7lilw2e] .portal-card-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}
@keyframes portal-card-in-b-2hk7lilw2e {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Section frame. The opaque alternative to a card — used for lists where
   transparency would compete with row content. */
[b-2hk7lilw2e] .portal-section {
    margin-top: 36px;
    padding: 26px 28px;
    background: var(--portal-surface);
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: var(--portal-shadow-sm);
}
[b-2hk7lilw2e] .portal-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
[b-2hk7lilw2e] .portal-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--portal-ink);
    letter-spacing: -0.005em;
    margin: 0;
}
[b-2hk7lilw2e] .portal-section-meta {
    font-size: 0.8rem;
    color: var(--portal-ink-faint);
}

/* Item list. Repeat-pattern row used by Devices, Licenses, Tickets, etc. */
[b-2hk7lilw2e] .portal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
[b-2hk7lilw2e] .portal-list-row {
    --stagger: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    animation: portal-card-in-b-2hk7lilw2e 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--stagger) * 40ms);
}
[b-2hk7lilw2e] .portal-list-row:last-child { border-bottom: 0; }
[b-2hk7lilw2e] .portal-list-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: color-mix(in oklab, var(--portal-accent, #6366f1) 12%, white);
    color: var(--portal-accent, #6366f1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}
[b-2hk7lilw2e] .portal-list-main {
    min-width: 0;
    flex: 1;
}
[b-2hk7lilw2e] .portal-list-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--portal-ink);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[b-2hk7lilw2e] .portal-list-meta {
    font-size: 0.8rem;
    color: var(--portal-ink-soft);
    margin-top: 2px;
}
[b-2hk7lilw2e] .portal-list-aside {
    font-size: 0.78rem;
    color: var(--portal-ink-faint);
    text-align: right;
    flex-shrink: 0;
}

/* Empty state. Centered, soft, with a calm illustration glyph. */
[b-2hk7lilw2e] .portal-empty {
    text-align: center;
    padding: 56px 24px;
    color: var(--portal-ink-soft);
}
[b-2hk7lilw2e] .portal-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: color-mix(in oklab, var(--portal-accent, #6366f1) 10%, white);
    color: var(--portal-accent, #6366f1);
    font-size: 1.5rem;
    margin-bottom: 14px;
}
[b-2hk7lilw2e] .portal-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--portal-ink);
    margin: 0 0 4px;
}
[b-2hk7lilw2e] .portal-empty-meta {
    font-size: 0.875rem;
    margin: 0;
}

/* Status pill — was a bespoke ::deep class system (Color-coded by status);
   every portal page has been migrated to the shared <Pill> component
   (Components/Shared/Pill.razor) instead, so this whole block is gone. */

/* Buttons. Primary = brand gradient with shadow, secondary = soft outline. */
[b-2hk7lilw2e] .portal-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 200ms ease, background 200ms ease;
    text-decoration: none;
}
[b-2hk7lilw2e] .portal-btn:active { transform: translateY(1px); }
[b-2hk7lilw2e] .portal-btn-primary {
    color: white;
    background: linear-gradient(135deg,
        var(--portal-accent, #6366f1),
        color-mix(in oklab, var(--portal-accent, #6366f1) 60%, #1e1b4b));
    box-shadow: 0 8px 22px -8px color-mix(in oklab, var(--portal-accent, #6366f1) 65%, transparent);
}
[b-2hk7lilw2e] .portal-btn-primary:hover {
    box-shadow: 0 14px 28px -10px color-mix(in oklab, var(--portal-accent, #6366f1) 70%, transparent);
}
[b-2hk7lilw2e] .portal-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}
[b-2hk7lilw2e] .portal-btn-secondary {
    color: var(--portal-ink);
    background: var(--portal-surface);
    border-color: rgba(15, 23, 42, 0.1);
}
[b-2hk7lilw2e] .portal-btn-secondary:hover {
    border-color: rgba(15, 23, 42, 0.25);
    background: var(--color-bg-subtle);
}

/* Form controls — used by the ticket submission form. */
[b-2hk7lilw2e] .portal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}
[b-2hk7lilw2e] .portal-field-label {
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--portal-ink);
}
[b-2hk7lilw2e] .portal-field-hint {
    font-size: 0.75rem;
    color: var(--portal-ink-faint);
}
[b-2hk7lilw2e] .portal-input,
[b-2hk7lilw2e] .portal-textarea,
[b-2hk7lilw2e] .portal-select {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: var(--portal-surface);
    font-size: 0.925rem;
    color: var(--portal-ink);
    transition: border-color 160ms ease, box-shadow 160ms ease;
    font-family: inherit;
}
[b-2hk7lilw2e] .portal-textarea {
    min-height: 140px;
    line-height: 1.55;
    resize: vertical;
}
[b-2hk7lilw2e] .portal-input:focus,
[b-2hk7lilw2e] .portal-textarea:focus,
[b-2hk7lilw2e] .portal-select:focus {
    outline: none;
    border-color: var(--portal-accent, #6366f1);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--portal-accent, #6366f1) 18%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    [b-2hk7lilw2e] .portal-card,
    [b-2hk7lilw2e] .portal-list-row,
    [b-2hk7lilw2e] .portal-card-cta i {
        animation: none !important;
        transition: none !important;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-ma0jk3j6so],
.components-reconnect-repeated-attempt-visible[b-ma0jk3j6so],
.components-reconnect-failed-visible[b-ma0jk3j6so],
.components-pause-visible[b-ma0jk3j6so],
.components-resume-failed-visible[b-ma0jk3j6so],
.components-rejoining-animation[b-ma0jk3j6so] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-ma0jk3j6so],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-ma0jk3j6so],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-ma0jk3j6so],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-ma0jk3j6so],
#components-reconnect-modal.components-reconnect-retrying[b-ma0jk3j6so],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-ma0jk3j6so],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-ma0jk3j6so],
#components-reconnect-modal.components-reconnect-failed[b-ma0jk3j6so],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-ma0jk3j6so] {
    display: block;
}


#components-reconnect-modal[b-ma0jk3j6so] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-ma0jk3j6so 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-ma0jk3j6so 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-ma0jk3j6so 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-ma0jk3j6so]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-ma0jk3j6so 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-ma0jk3j6so {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-ma0jk3j6so {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-ma0jk3j6so {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-ma0jk3j6so] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-ma0jk3j6so] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-ma0jk3j6so] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-ma0jk3j6so] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-ma0jk3j6so] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-ma0jk3j6so] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-ma0jk3j6so] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-ma0jk3j6so 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-ma0jk3j6so] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-ma0jk3j6so {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/TopSectionNav.razor.rz.scp.css */
/* Vertical icon rail on the left. Two states:
   - default: 64px wide, icons only
   - hover anywhere on the rail: expands to 240px, labels fade in inline
   The rail is position:absolute inside a 64px-wide flex slot so the
   expansion overlays the sub-sidebar instead of pushing it right. */

.section-rail-host[b-z61fy8m6f8] {
    width: 64px;
    flex-shrink: 0;
    align-self: stretch;
    position: relative;
}

.section-nav[b-z61fy8m6f8] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 64px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem 0;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 50;
    transition:
        width 220ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 220ms ease;
    scrollbar-width: none;
}

.section-nav[b-z61fy8m6f8]::-webkit-scrollbar {
    display: none;
}

/* Hover anywhere on the rail → expands and reveals labels inline. */
.section-nav:hover[b-z61fy8m6f8] {
    width: 240px;
    box-shadow: 6px 0 24px -6px rgba(0, 0, 0, 0.45);
    overflow-y: auto;
}

.section-tab[b-z61fy8m6f8] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 0 14px;
    height: 44px;
    margin: 2px 8px;
    border-radius: 8px;
    color: rgba(203, 213, 225, 0.85);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 500;
}

.section-tab:hover[b-z61fy8m6f8] {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}

.section-tab:hover .section-tab-icon[b-z61fy8m6f8] {
    color: var(--color-primary, #60a5fa);
}

.section-tab.active[b-z61fy8m6f8] {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Active accent stripe on the leading edge of the active tab. */
.section-tab.active[b-z61fy8m6f8]::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--color-primary, #60a5fa);
    border-radius: 0 3px 3px 0;
}

.section-tab.active .section-tab-icon[b-z61fy8m6f8] {
    color: var(--color-primary, #60a5fa);
}

.section-tab-icon[b-z61fy8m6f8] {
    flex-shrink: 0;
    width: 24px;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1;
}

/* Label sits inline next to its icon but stays hidden at the rail's
   default 64px width (overflow:hidden on the rail clips it). Fades in
   when the rail expands. */
.section-tab-label[b-z61fy8m6f8] {
    opacity: 0;
    transition: opacity 180ms ease;
}

.section-nav:hover .section-tab-label[b-z61fy8m6f8] {
    opacity: 1;
    transition-delay: 80ms;
}

/* Active module's config/admin sub-items, nested under the active tab.
   Hidden while the rail is collapsed (icons-only); revealed inline when the
   rail expands. Indented + smaller so they read as children of the module.
   These are rendered by <NavLink> (a child component), so they don't carry this
   component's scoped-CSS attribute — reach them via ::deep from the scoped
   .section-nav, else they fall back to the global blue/underlined link style. */
.section-nav[b-z61fy8m6f8]  .section-subtab {
    display: none;
    align-items: center;
    gap: 10px;
    height: 34px;
    margin: 1px 8px;
    padding: 0 12px 0 30px;
    border-radius: 6px;
    color: rgba(203, 213, 225, 0.7);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    font-size: 0.82rem;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.section-nav:hover[b-z61fy8m6f8]  .section-subtab {
    display: flex;
}

.section-nav[b-z61fy8m6f8]  .section-subtab:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.06);
    text-decoration: none;
}

.section-nav[b-z61fy8m6f8]  .section-subtab.active {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
}

.section-nav[b-z61fy8m6f8]  .section-subtab-icon {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1;
    opacity: 0.9;
}

.section-nav[b-z61fy8m6f8]  .section-subtab.active .section-subtab-icon,
.section-nav[b-z61fy8m6f8]  .section-subtab:hover .section-subtab-icon {
    color: var(--color-primary, #60a5fa);
}

/* Collapsible "Additional modules" group header. Renders as a <button> so it
   needs the UA button chrome reset to match the <a> tabs around it. */
.section-tab-group-header[b-z61fy8m6f8] {
    appearance: none;
    background: transparent;
    border: none;
    font-family: inherit;
    width: auto;
    color: rgba(203, 213, 225, 0.7);
    margin-top: 6px;
}

.section-tab-group-header:hover[b-z61fy8m6f8] {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
}

.section-tab-chevron[b-z61fy8m6f8] {
    margin-left: auto;
    font-size: 0.7rem;
    opacity: 0;
    transition: opacity 180ms ease;
}

.section-nav:hover .section-tab-chevron[b-z61fy8m6f8] {
    opacity: 0.7;
    transition-delay: 80ms;
}

.section-tab-disabled[b-z61fy8m6f8] {
    opacity: 0.45;
    cursor: not-allowed;
}

.section-tab-disabled:hover[b-z61fy8m6f8] {
    color: rgba(203, 213, 225, 0.85);
    background-color: transparent;
}

.section-tab-disabled:hover .section-tab-icon[b-z61fy8m6f8] {
    color: rgba(203, 213, 225, 0.85);
}

.section-tab-lock[b-z61fy8m6f8] {
    margin-left: auto;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 180ms ease;
}

.section-nav:hover .section-tab-lock[b-z61fy8m6f8] {
    opacity: 0.85;
    transition-delay: 80ms;
}
/* /Components/Layout/VendorLayout.razor.rz.scp.css */
/* Portal-design-finalization batch A — give the vendor shell a visible tenant
   accent instead of a flat Bootstrap navbar-dark. Stays a serious, neutral
   dark bar (vendors are external, not portal users) but tints toward the
   tenant's own colour and puts it plainly on the brand icon. */
.vendor-topbar[b-4doyjmsto0] {
    background: linear-gradient(135deg,
        #1e293b,
        color-mix(in oklab, var(--portal-accent, #6366f1) 24%, #1e293b));
    border-bottom: 2px solid color-mix(in oklab, var(--portal-accent, #6366f1) 55%, transparent);
}

.vendor-brand-icon[b-4doyjmsto0] {
    color: var(--portal-accent, #6366f1);
}
/* /Components/Pages/Admin/BrandingPage.razor.rz.scp.css */
.branding-preview[b-ljuqfnxedw] {
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-bg-subtle) 0%, #f1f5f9 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.branding-preview img[b-ljuqfnxedw] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.branding-preview-logo[b-ljuqfnxedw] {
    height: 5rem;
    padding: 0.75rem;
}

.branding-preview-banner[b-ljuqfnxedw] {
    height: 9rem;
}

.branding-preview-banner img[b-ljuqfnxedw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.branding-preview-empty[b-ljuqfnxedw] {
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.branding-preview-empty i[b-ljuqfnxedw] {
    font-size: 1.5rem;
    opacity: 0.5;
}
/* /Components/Pages/Tickets/TicketsPage.razor.rz.scp.css */
/* layout-50 consistency — the Tickets action toolbar.
   Every tool renders as the SAME fixed-size icon-over-label chip, so the row
   reads as a uniform grid of blocks instead of buttons of varying width. */

.ticket-tools[b-9g669myrjd] {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    align-items: stretch;
}

.ticket-tools .btn[b-9g669myrjd] {
    flex: 0 0 5.5rem;
    width: 5.5rem;
    min-height: 3.5rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    padding: .3rem .25rem;
    font-size: .72rem;
    line-height: 1.05;
    text-align: center;
    white-space: normal;
    overflow: hidden;
}

.ticket-tools .btn .bi[b-9g669myrjd] {
    font-size: 1.05rem;
    line-height: 1;
}

/* active-count badges sit under the label without stretching the block */
.ticket-tools .btn .badge[b-9g669myrjd] {
    margin: 0 !important;
    font-size: .6rem;
    padding: .1rem .3rem;
}
/* /Components/Pages/Workflows/WorkflowFormBuilder.razor.rz.scp.css */
/* WF-200 B2 — form-mode builder: palette | live preview | inspector. */

.wfb-shell[b-xy13k5sjlk] {
    display: grid;
    grid-template-columns: 200px 1fr 260px;
    gap: 10px;
    align-items: start;
}

.wfb-palette[b-xy13k5sjlk],
.wfb-inspector[b-xy13k5sjlk] {
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, .5rem);
    background: var(--color-card, #fff);
    padding: 8px;
    position: sticky;
    top: 8px;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
}

.wfb-palette-title[b-xy13k5sjlk],
.wfb-inspector-title[b-xy13k5sjlk] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-muted, #6b7280);
    margin-bottom: 6px;
}

.wfb-inspector-title[b-xy13k5sjlk] {
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text, #111827);
}

.wfb-palette-group[b-xy13k5sjlk] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-muted, #9ca3af);
    margin: 8px 0 4px;
}

.wfb-palette-item[b-xy13k5sjlk] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 6px 8px;
    margin-bottom: 2px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, .375rem);
    background: transparent;
    color: var(--color-text, #111827);
    font-size: 13px;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.wfb-palette-item:hover[b-xy13k5sjlk] {
    background: var(--color-subtle, #f3f4f6);
    border-color: var(--color-primary, var(--color-primary));
}

.wfb-palette-note[b-xy13k5sjlk] {
    font-size: 11px;
    color: var(--color-muted, #9ca3af);
    margin-top: 10px;
    padding: 6px 8px;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

.wfb-canvas[b-xy13k5sjlk] {
    min-width: 0;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, .5rem);
    background: var(--color-bg, #f9fafb);
    padding: 12px;
    min-height: 24rem;
}

.wfb-empty[b-xy13k5sjlk] {
    text-align: center;
    color: var(--color-muted, #9ca3af);
    padding: 4rem 1rem;
}

.wfb-empty .bi[b-xy13k5sjlk] {
    font-size: 2rem;
    display: block;
    margin-bottom: .5rem;
    opacity: .6;
}

.wfb-control[b-xy13k5sjlk] {
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-sm, .375rem);
    background: var(--color-card, #fff);
    padding: 8px 10px;
    margin-bottom: 8px;
    cursor: pointer;
}

.wfb-control.selected[b-xy13k5sjlk] {
    border-color: var(--color-primary, var(--color-primary));
    box-shadow: 0 0 0 1px var(--color-primary, var(--color-primary));
}

.wfb-control-bar[b-xy13k5sjlk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.wfb-control-type[b-xy13k5sjlk] {
    font-size: 11px;
    color: var(--color-muted, #6b7280);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.wfb-control-tools button[b-xy13k5sjlk] {
    border: none;
    background: transparent;
    color: var(--color-muted, #6b7280);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 13px;
    border-radius: var(--radius-sm, .375rem);
}

.wfb-control-tools button:hover:not(:disabled)[b-xy13k5sjlk] {
    background: var(--color-subtle, #f3f4f6);
    color: var(--color-text, #111827);
}

.wfb-control-tools button:disabled[b-xy13k5sjlk] {
    opacity: .35;
    cursor: default;
}

.wfb-label[b-xy13k5sjlk] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-muted, #6b7280);
    margin: 8px 0 2px;
}
/* /Components/Shared/Avatar.razor.rz.scp.css */
.avatar[b-apr0fhef50] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    font-weight: 700;
    color: var(--color-text-on-primary);
    line-height: 1;
}
/* /Components/Shared/CommandPalette.razor.rz.scp.css */
/* Entrance animation, ported from the Operator Console design mock's own
   command-palette treatment: a fast backdrop fade, then a slightly slower
   panel fade + gentle scale-in. */
.palette-backdrop[b-b69xol80ut] {
    animation: palette-backdrop-in-b-b69xol80ut 0.18s ease both;
}
@keyframes palette-backdrop-in-b-b69xol80ut {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.palette-panel[b-b69xol80ut] {
    animation: palette-panel-in-b-b69xol80ut 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes palette-panel-in-b-b69xol80ut {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .palette-backdrop[b-b69xol80ut], .palette-panel[b-b69xol80ut] { animation: none; }
}
/* /Components/Shared/MetricCard.razor.rz.scp.css */
.metric[b-3wrn2ove2q] {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 0.95rem 1rem 1rem;
}

.metric-top[b-3wrn2ove2q] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 0.5rem;
}

.metric-icon[b-3wrn2ove2q] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.metric-spark[b-3wrn2ove2q] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 30px;
}

.metric-spark span[b-3wrn2ove2q] {
    width: 5px;
    border-radius: 2px;
    opacity: 0.65;
}

.metric-value[b-3wrn2ove2q] {
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-feature-settings: "tnum";
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: 1.8rem;
    color: var(--color-text-dark);
    line-height: 1;
}

.metric-label[b-3wrn2ove2q] {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-top: 0.45rem;
    font-weight: 500;
}

.metric-sub[b-3wrn2ove2q] {
    font-size: 0.74rem;
    color: var(--color-text-muted);
    margin-top: 0.15rem;
}
/* /Components/Shared/Pill.razor.rz.scp.css */
.pill[b-sw3etqwks4] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.5;
    padding: 0.18rem 0.62rem;
    border-radius: 999px;
    white-space: nowrap;
}

.pill-mono[b-sw3etqwks4] {
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-feature-settings: "tnum";
}

.pill .bi[b-sw3etqwks4] {
    font-size: 0.9em;
}