/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* Scoped styles for the auth layout shell. Hero pane = animated
   gradient mesh + brand pitch; form pane = clean card slot. Card
   internals live in wwwroot/css/auth.css so slotted pages share them.

   Design intent — restrained, editorial, premium. No illustration,
   no fabricated metrics, no decoration that doesn't earn its place.
   Motion is slow and quiet so the page feels considered, not busy. */

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

.auth-hero[b-lujpavguyl] {
    position: relative;
    overflow: hidden;
    color: #F0F4F1;
    isolation: isolate;
    /* Deep editorial forest — emerald zenith to near-black, no horizon
       line. Reads as "premium dark" before the mesh blobs layer over.
       Pure black avoided (causes OLED smearing and high eye strain). */
    background:
        radial-gradient(at 22% 0%, #1F4D3F 0%, transparent 55%),
        radial-gradient(at 78% 100%, #0F3D22 0%, transparent 50%),
        linear-gradient(180deg, #0D130F 0%, #14201B 60%, #08110C 100%);
}

@media (max-width: 540px) {
    /* On phones the hero is more visual noise than help — collapse it
       entirely and let the form-pane top bar carry the brand. */
    .auth-hero[b-lujpavguyl] { display: none; }
    .auth-shell[b-lujpavguyl] { grid-template-rows: auto; grid-template-columns: 1fr; }
}

/* ─── Mesh background ───────────────────────────────────────── */

.auth-hero-mesh[b-lujpavguyl] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.auth-hero-blob[b-lujpavguyl] {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.55;
    will-change: transform;
}

.auth-hero-blob-a[b-lujpavguyl] {
    width: 540px;
    height: 540px;
    top: -140px;
    left: -120px;
    /* Deep emerald — the brand's anchor blob */
    background: radial-gradient(circle, #16A34A 0%, transparent 70%);
    animation: blob-drift-a-b-lujpavguyl 28s ease-in-out infinite;
}
.auth-hero-blob-b[b-lujpavguyl] {
    width: 460px;
    height: 460px;
    bottom: -140px;
    right: -120px;
    /* Mint highlight — adds dimension without breaking the palette */
    background: radial-gradient(circle, #4ADE80 0%, transparent 70%);
    animation: blob-drift-b-b-lujpavguyl 34s ease-in-out infinite;
}
.auth-hero-blob-c[b-lujpavguyl] {
    width: 360px;
    height: 360px;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Subtle gold accent — the prestige hint, kept low opacity so it
       reads as warm light rather than a colour shift. */
    background: radial-gradient(circle, #D4A647 0%, transparent 70%);
    opacity: 0.18;
    animation: blob-drift-c-b-lujpavguyl 40s ease-in-out infinite;
}

@keyframes blob-drift-a-b-lujpavguyl {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, 30px) scale(1.05); }
    66%      { transform: translate(-20px, 60px) scale(0.95); }
}
@keyframes blob-drift-b-b-lujpavguyl {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-60px, -50px) scale(1.08); }
}
@keyframes blob-drift-c-b-lujpavguyl {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-46%, -54%) scale(1.12); }
}

/* Faint grid overlay — disappears towards the edges via a radial
   mask so it doesn't fight with the brand at the corners. */
.auth-hero-grid[b-lujpavguyl] {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.7) 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.7) 0%, transparent 75%);
}

.auth-hero-grain[b-lujpavguyl] {
    position: absolute;
    inset: 0;
    opacity: 0.10;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── Hero content (text + pills + footer) ──────────────────── */

.auth-hero-content[b-lujpavguyl] {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 3rem 4rem 2.5rem;
    gap: 2rem;
}

@media (max-width: 1200px) { .auth-hero-content[b-lujpavguyl] { padding: 2.5rem 3rem 2rem; } }
@media (max-width: 960px)  { .auth-hero-content[b-lujpavguyl] { padding: 1.5rem 2rem; gap: 1.25rem; } }

.auth-brand[b-lujpavguyl] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    align-self: flex-start;
}

.auth-hero-copy[b-lujpavguyl] {
    max-width: 540px;
    margin-top: auto;
    margin-bottom: 0;
}

@media (max-width: 960px) { .auth-hero-copy[b-lujpavguyl] { margin-top: 0; } }

.auth-hero-eyebrow[b-lujpavguyl] {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(248, 250, 252, 0.82);
    margin-bottom: 1.5rem;
}

.auth-hero-title[b-lujpavguyl] {
    font-family: "Outfit", "Inter", system-ui, sans-serif;
    font-size: clamp(2rem, 3.2vw, 3.25rem);
    font-weight: 700;
    margin: 0 0 1.1rem 0;
    letter-spacing: -0.03em;
    line-height: 1.04;
    color: #F0F4F1;
}

.auth-hero-title-accent[b-lujpavguyl] {
    background: linear-gradient(110deg, #BBF7D0 0%, #4ADE80 45%, #F0C75F 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}

.auth-hero-lede[b-lujpavguyl] {
    color: rgba(240, 244, 241, 0.72);
    line-height: 1.6;
    margin: 0;
    font-size: 1.05rem;
    max-width: 440px;
    font-weight: 400;
}

@media (max-width: 960px) {
    .auth-hero-title[b-lujpavguyl] { font-size: 1.6rem; }
    .auth-hero-lede[b-lujpavguyl]  { font-size: 0.95rem; }
    .auth-hero-eyebrow[b-lujpavguyl] { display: none; }
}

/* ─── Feature pills ───────────────────────────────────────── */

.auth-feature-pills[b-lujpavguyl] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    max-width: 540px;
}

@media (max-width: 960px) { .auth-feature-pills[b-lujpavguyl] { display: none; } }

.auth-feature-pill[b-lujpavguyl] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem 0.5rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(248, 250, 252, 0.88);
    letter-spacing: -0.005em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
                background 220ms ease,
                border-color 220ms ease;
    animation: pill-rise-b-lujpavguyl 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--pill-delay, 0ms);
    cursor: default;
}

.auth-feature-pill:hover[b-lujpavguyl] {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

@keyframes pill-rise-b-lujpavguyl {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.auth-feature-pill-dot[b-lujpavguyl] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4ADE80 0%, #16A34A 100%);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18);
    flex: 0 0 auto;
}

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

.auth-hero-footer[b-lujpavguyl] {
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 960px) { .auth-hero-footer[b-lujpavguyl] { display: none; } }

.auth-hero-trust[b-lujpavguyl] {
    font-size: 0.78rem;
    color: rgba(248, 250, 252, 0.5);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 500;
}

/* ─── Form pane ────────────────────────────────────────────── */

.auth-pane[b-lujpavguyl] {
    display: flex;
    flex-direction: column;
    /* Warm cream rather than pure white — much easier on the eyes
       during a long session, and reads as luxury real-estate
       (Sotheby's / Pam Golding territory) rather than tech. */
    background: #FAFAF7;
    color: var(--auth-card-fg, #14191A);
    min-height: 100vh;
    position: relative;
    isolation: isolate;
}

/* Subtle radial backdrop on the form pane — emerald + warm gold
   wash that lifts the card without competing for attention. */
.auth-pane[b-lujpavguyl]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse at 70% -10%, rgba(22, 163, 74, 0.07), transparent 55%),
        radial-gradient(ellipse at -10% 80%, rgba(212, 166, 71, 0.06), transparent 60%);
}

[data-theme="dark"] .auth-pane[b-lujpavguyl] {
    /* Forest near-black — never pure black (#000 raises eye strain
       and causes OLED ghosting during long sessions). */
    background: #0D130F;
}
[data-theme="dark"] .auth-pane[b-lujpavguyl]::before {
    background:
        radial-gradient(ellipse at 70% -10%, rgba(22, 163, 74, 0.18), transparent 55%),
        radial-gradient(ellipse at -10% 80%, rgba(212, 166, 71, 0.10), transparent 60%);
}

.auth-pane > *[b-lujpavguyl] { position: relative; z-index: 1; }
.auth-pane:focus[b-lujpavguyl] { outline: none; }

@media (max-width: 960px) { .auth-pane[b-lujpavguyl] { min-height: auto; flex: 1; } }

/* ─── Top bar ──────────────────────────────────────────────── */

.auth-pane-top[b-lujpavguyl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem 0.5rem;
}

@media (max-width: 960px) { .auth-pane-top[b-lujpavguyl] { padding: 1rem 1.25rem 0.75rem; } }

/* On phones the form pane is the whole screen — give the top bar a
   sticky, app-like presence. */
@media (max-width: 540px) {
    .auth-pane-top[b-lujpavguyl] {
        position: sticky;
        top: 0;
        z-index: 5;
        padding: 0.85rem 1rem;
        background: color-mix(in srgb, var(--bg, #F8FAFC) 92%, transparent);
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        border-bottom: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.08));
    }
    .auth-pane-top[b-lujpavguyl] {
        background: color-mix(in srgb, #FAFAF7 92%, transparent);
        border-bottom-color: rgba(20, 83, 45, 0.10);
    }
    [data-theme="dark"] .auth-pane-top[b-lujpavguyl] {
        background: color-mix(in srgb, #0D130F 90%, transparent);
        border-bottom-color: rgba(74, 222, 128, 0.10);
    }
}

.auth-pane-brand[b-lujpavguyl] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

@media (min-width: 961px) {
    /* On desktop the hero already carries the brand. */
    .auth-pane-brand[b-lujpavguyl] { display: none; }
}

.auth-pane-body[b-lujpavguyl] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: pane-rise-b-lujpavguyl 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (max-width: 540px) { .auth-pane-body[b-lujpavguyl] { padding: 1.25rem 1rem 2rem; } }

@keyframes pane-rise-b-lujpavguyl {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.auth-pane-footer[b-lujpavguyl] {
    padding: 1rem 2rem 1.5rem;
    text-align: center;
    color: var(--text-secondary, #475569);
    font-size: 0.83rem;
}

.auth-pane-footer p[b-lujpavguyl] { margin: 0.2rem 0; }

[b-lujpavguyl] .auth-support-link {
    color: var(--asetrix-brand, #14532D);
    text-decoration: none;
    font-weight: 600;
}

[data-theme="dark"][b-lujpavguyl]  .auth-support-link {
    color: var(--asetrix-brand-on-dark, #4ADE80);
}

[b-lujpavguyl] .auth-support-link:hover { text-decoration: underline; }

.auth-pane-foot-meta[b-lujpavguyl] {
    color: var(--text-tertiary, #94A3B8);
    font-size: 0.76rem;
}

.auth-pane-foot-meta a[b-lujpavguyl] { color: inherit; text-decoration: none; }
.auth-pane-foot-meta a:hover[b-lujpavguyl] { color: var(--text, #0F172A); text-decoration: underline; }

/* Reduced-motion users get a static surface. */
@media (prefers-reduced-motion: reduce) {
    .auth-hero-blob[b-lujpavguyl],
    .auth-pane-body[b-lujpavguyl],
    .auth-feature-pill[b-lujpavguyl] { animation: none; transform: none; }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* MainLayout — auth + marketing shell.
   Elements authored in this layout get the scope marker
   automatically — DO NOT use ::deep for them. */

.app-shell[b-7bbdncu4hb] {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr;
    background: var(--surface);
    color: var(--text);
}

.app-header[b-7bbdncu4hb] {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: var(--space-4) var(--space-6);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--border-subtle);
}

.brand-mark[b-7bbdncu4hb] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.brand-mark .glyph[b-7bbdncu4hb] {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    background: var(--brand-primary);
    color: var(--text-on-accent);
    font-weight: 700;
    font-size: var(--text-md);
    line-height: 1;
}

.brand-mark .sub[b-7bbdncu4hb] {
    color: var(--text-tertiary);
    font-weight: 500;
    font-size: var(--text-sm);
    letter-spacing: 0;
}

.app-main[b-7bbdncu4hb] {
    display: grid;
    place-items: start center;
    padding: var(--space-12) var(--space-6);
}

.app-main > *[b-7bbdncu4hb] {
    width: min(100%, 720px);
}

.skip-link[b-7bbdncu4hb] {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: var(--space-2) var(--space-4);
    background: var(--brand-primary);
    color: var(--text-on-accent);
    border-radius: var(--radius-md);
    font-weight: 600;
}

.skip-link:focus[b-7bbdncu4hb] {
    left: var(--space-4);
    top: var(--space-4);
    z-index: 100;
}

#blazor-error-ui[b-7bbdncu4hb] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-3) var(--space-6);
    background: #dc2626;
    color: white;
    display: none;
    align-items: center;
    gap: var(--space-3);
    z-index: 1000;
    font-size: var(--text-sm);
}

#blazor-error-ui[style*="block"][b-7bbdncu4hb] {
    display: flex;
}

#blazor-error-ui .reload[b-7bbdncu4hb] {
    color: white;
    text-decoration: underline;
}

#blazor-error-ui .dismiss[b-7bbdncu4hb] {
    margin-left: auto;
    cursor: pointer;
    font-size: var(--text-lg);
    line-height: 1;
}

@media (max-width: 600px) {
    .app-main[b-7bbdncu4hb] {
        padding: var(--space-6) var(--space-4);
    }
    .app-header[b-7bbdncu4hb] {
        padding: var(--space-3) var(--space-4);
    }
}
/* /Components/Layout/PortalLayout.razor.rz.scp.css */
/* PortalLayout — sidebar + topbar + content grid.
   Visual language matches the auth pages (Forest emerald palette).
   No pure black/white anywhere; warm surfaces and emerald accents.

   Scope note: elements authored in this layout get the scope marker
   automatically — DO NOT use ::deep for them. ::deep is only for
   selectors that target elements rendered by child components
   (NavLink, PortalIcon, etc.). */

/* ─── Portal palette (overrides shared tokens for this scope) ─── */

.portal-shell[b-s0avrilodp] {
    /* Asetrix Forest — matches auth.css for visual continuity. */
    --portal-brand:         #14532D;   /* deep emerald (trust)            */
    --portal-brand-bright:  #16A34A;   /* bright emerald (action)         */
    --portal-brand-glow:    rgba(22, 163, 74, 0.12);
    --portal-brand-soft:    rgba(20, 83, 45, 0.08);
    --portal-gold:          #D4A647;   /* prestige accent (sparingly)     */

    /* Nav text size — accessibility-driven. Cycled by the footer
       "Aa" button between small / medium / large. Each level scales
       both the font and the touch target so users with low vision
       don't have to fight the chrome. */
    --portal-nav-size:      13.5px;
    --portal-nav-pad-y:     0.5rem;

    /* Surfaces — warm cream for light, deep forest for dark. */
    --portal-bg:            #FAFAF7;
    --portal-surface:       #FFFFFF;
    --portal-surface-2:     #F5F5F0;
    --portal-hover:         rgba(20, 83, 45, 0.04);
    --portal-border:        rgba(20, 83, 45, 0.08);
    --portal-border-strong: rgba(20, 83, 45, 0.14);

    --portal-text:          #14191A;
    --portal-text-muted:    #4A554E;
    --portal-text-soft:     #8B968E;

    --portal-shadow-soft:   0 1px 2px rgba(20, 50, 30, 0.04);
    --portal-shadow-card:   0 1px 2px rgba(20, 50, 30, 0.04),
                            0 8px 24px -12px rgba(20, 50, 30, 0.10);

    min-height: 100dvh;
    display: grid;
    grid-template-columns: 248px 1fr;
    grid-template-rows: 64px 40px 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar breadcrumb"
        "sidebar main";
    background: var(--portal-bg);
    color: var(--portal-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

[data-theme="dark"] .portal-shell[b-s0avrilodp] {
    --portal-bg:            #08110C;
    --portal-surface:       #0D130F;
    --portal-surface-2:     #131A14;
    --portal-hover:         rgba(74, 222, 128, 0.06);
    --portal-border:        rgba(74, 222, 128, 0.10);
    --portal-border-strong: rgba(74, 222, 128, 0.18);

    --portal-brand:         #16A34A;
    --portal-brand-bright:  #4ADE80;
    --portal-brand-glow:    rgba(74, 222, 128, 0.14);
    --portal-brand-soft:    rgba(74, 222, 128, 0.06);

    --portal-text:          #F0F4F1;
    --portal-text-muted:    #BBD9C9;
    --portal-text-soft:     #6B8B7F;

    --portal-shadow-soft:   0 1px 2px rgba(0, 0, 0, 0.30);
    --portal-shadow-card:   0 1px 2px rgba(0, 0, 0, 0.30),
                            0 8px 24px -12px rgba(0, 0, 0, 0.55);
}

/* ─── Sidebar ────────────────────────────────────────────── */

.portal-sidebar[b-s0avrilodp] {
    grid-area: sidebar;
    /* Subtle vertical gradient — adds depth without being obvious. */
    background:
        linear-gradient(180deg,
            var(--portal-surface) 0%,
            color-mix(in srgb, var(--portal-surface) 96%, var(--portal-brand-soft)) 100%);
    border-right: 1px solid var(--portal-border);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0.75rem 1rem;
    gap: 1rem;
    position: sticky;
    top: 0;
    height: 100dvh;
    /* Higher than the topbar (z-index: 20) and breadcrumb (z-index:
       19) so flyouts/tooltips that escape rightward sit ABOVE those
       bars when they overlap the screen. */
    z-index: 25;
    /* Sidebar normally clips overflow so the nav scrolls inside
       without pushing brand/footer. When a group is hovered (in
       collapsed mode), we conditionally allow overflow so the
       flyout panel can escape to the right of the sidebar. */
    overflow: hidden;

    box-shadow: inset -1px 0 0 var(--portal-border);
}

/* The actual overflow cage release for flyouts lives in
   wwwroot/css/portal-pages.css — must be global (not scoped) so the
   :has() selector can reach across to .nav-group inside the child
   component. */

.portal-sidebar-brand[b-s0avrilodp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem 0.5rem 0.75rem;
}

.portal-brand-link[b-s0avrilodp] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--portal-text);
    font-weight: 600;
    letter-spacing: -0.01em;
    min-width: 0;
    overflow: hidden;
}

/* The old top-of-sidebar toggle was replaced by the footer
   collapse button — see .portal-footer-collapse below. */

.portal-sidebar-nav[b-s0avrilodp] {
    flex: 1;
    /* flex item must allow shrinking below content size for the
       overflow-y to kick in instead of expanding the parent. */
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Slight right padding so the scrollbar (when shown) doesn't sit
       flush against the panel edge. */
    padding-right: 4px;
    margin-right: -4px;
}

/* Slim scrollbar only on the nav — barely visible at rest, tints
   on hover. Hidden track. */
.portal-sidebar-nav[b-s0avrilodp]::-webkit-scrollbar {
    width: 6px;
}
.portal-sidebar-nav[b-s0avrilodp]::-webkit-scrollbar-track {
    background: transparent;
}
.portal-sidebar-nav[b-s0avrilodp]::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
    transition: background 140ms ease;
}
.portal-sidebar-nav:hover[b-s0avrilodp]::-webkit-scrollbar-thumb {
    background: var(--portal-border-strong);
}
.portal-sidebar-nav[b-s0avrilodp]::-webkit-scrollbar-thumb:hover {
    background: var(--portal-text-soft);
}

/* Firefox */
.portal-sidebar-nav[b-s0avrilodp] {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.portal-sidebar-nav:hover[b-s0avrilodp] {
    scrollbar-color: var(--portal-border-strong) transparent;
}

.portal-sidebar-nav ul[b-s0avrilodp] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.portal-sidebar-nav li[b-s0avrilodp] {
    padding: 0;
}

.portal-nav-section[b-s0avrilodp] {
    margin: 1.5rem 0.75rem 0.25rem;
    padding: 0;
    color: var(--portal-text-soft);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* ─── NavGroup (collapsible section) ────────────────────────
   Targets the <details>/<summary> rendered by NavGroup.razor.
   Use ::deep because NavGroup is a child component. */

[b-s0avrilodp] .nav-group {
    /* Reset native details disclosure marker (we render our own caret). */
    margin: 2px 0;
}

[b-s0avrilodp] .nav-group > summary {
    list-style: none;
}

[b-s0avrilodp] .nav-group > summary::-webkit-details-marker {
    display: none;
}

[b-s0avrilodp] .nav-group-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: var(--portal-nav-pad-y) 0.75rem;
    border-radius: 8px;
    color: var(--portal-text-muted);
    font-size: var(--portal-nav-size);
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    user-select: none;
    transition: background 140ms cubic-bezier(0.16, 1, 0.3, 1),
                color 140ms ease;
}

[b-s0avrilodp] .nav-group-summary:hover {
    background: var(--portal-hover);
    color: var(--portal-text);
}

[b-s0avrilodp] .nav-group-summary:focus-visible {
    outline: 2px solid var(--portal-brand-bright);
    outline-offset: 1px;
}

[b-s0avrilodp] .nav-group-title {
    flex: 1;
}

/* Active-section indicator dot — visible even when the group is
   collapsed, tells the user "your current page is inside here". */
[b-s0avrilodp] .nav-group-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--portal-brand-bright);
    box-shadow: 0 0 6px var(--portal-brand-glow);
}

/* The chevron is the second PortalIcon inside the summary. Rotate it
   when the parent <details> is open. nth-child targets the SVG which
   ends up rendered as the last child of the summary. */
[b-s0avrilodp] .nav-group-summary > svg.portal-icon:last-child {
    width: 14px;
    height: 14px;
    color: var(--portal-text-soft);
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
    transform: rotate(-90deg);
    opacity: 0.7;
}

[b-s0avrilodp] .nav-group[open] > summary > svg.portal-icon:last-child {
    transform: rotate(0deg);
}

[b-s0avrilodp] .nav-group-items {
    list-style: none;
    margin: 4px 0 4px 1.25rem;
    padding: 0 0 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
    /* Vertical guide line — dashed neutral by default, becomes solid
       emerald when the group contains the active page. */
    border-left: 1px dashed var(--portal-border);
    position: relative;
}

[b-s0avrilodp] .nav-group:has(a.portal-nav-link.active) > .nav-group-items {
    border-left-color: var(--portal-brand-bright);
    border-left-style: solid;
}

/* Tree connector — each child gets a tiny horizontal stub that
   joins it to the parent vertical line, like ├ in ASCII trees. */
[b-s0avrilodp] .nav-group-items > li {
    position: relative;
}

[b-s0avrilodp] .nav-group-items > li::before {
    content: "";
    position: absolute;
    left: -0.5rem;
    top: 50%;
    width: 0.5rem;
    height: 1px;
    background: var(--portal-border);
    pointer-events: none;
}

[b-s0avrilodp] .nav-group:has(a.portal-nav-link.active) .nav-group-items > li::before {
    background: var(--portal-brand-bright);
}

/* Child nav links inside a group still respect the text-size
   variable so accessibility cycling affects every link in the
   nav, including children. Padding tightens slightly so the
   grouped items feel like children, not peers. */
[b-s0avrilodp] .nav-group-items a.portal-nav-link {
    font-size: var(--portal-nav-size);
    padding-top: calc(var(--portal-nav-pad-y) - 0.1rem);
    padding-bottom: calc(var(--portal-nav-pad-y) - 0.1rem);
}

[b-s0avrilodp] .nav-group-items a.portal-nav-link.active::before {
    /* Override the global top-level rule — group children don't
       need the gradient accent bar (would overlap the tree line). */
    display: none;
}

/* When the group itself contains the active child, give the summary
   a subtle accent so the user can see it even when scrolled away. */
[b-s0avrilodp] .nav-group:has(a.portal-nav-link.active) > summary {
    color: var(--portal-text);
}

[b-s0avrilodp] .nav-group:has(a.portal-nav-link.active) > summary .portal-icon {
    opacity: 1;
}

/* NavLink renders an <a>, so deep-target it. The icon also lives
   inside a child component (PortalIcon), so use ::deep there too. */
[b-s0avrilodp] a.portal-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: var(--portal-nav-pad-y) 0.75rem;
    border-radius: 8px;
    color: var(--portal-text-muted);
    text-decoration: none;
    font-size: var(--portal-nav-size);
    font-weight: 500;
    line-height: 1.3;
    transition: background 140ms cubic-bezier(0.16, 1, 0.3, 1),
                color 140ms ease;
}

[b-s0avrilodp] a.portal-nav-link:hover {
    background: var(--portal-hover);
    color: var(--portal-text);
}

[b-s0avrilodp] a.portal-nav-link:focus-visible {
    outline: 2px solid var(--portal-brand-bright);
    outline-offset: 1px;
}

/* Active state — emerald glow background, emerald-bright text + icon,
   plus a small accent bar on the left for clear hierarchy. */
[b-s0avrilodp] a.portal-nav-link.active {
    background: var(--portal-brand-soft);
    color: var(--portal-brand);
    font-weight: 600;
}

[data-theme="dark"][b-s0avrilodp]  a.portal-nav-link.active {
    color: var(--portal-brand-bright);
}

[b-s0avrilodp] a.portal-nav-link.active::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(180deg, var(--portal-brand-bright), var(--portal-brand));
}

[b-s0avrilodp] .portal-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
    /* Slight desaturation on idle to keep the icon set quiet; the
       text colour drives the visual weight in idle/hover states. */
    opacity: 0.85;
    transition: opacity 140ms ease;
}

[b-s0avrilodp] a.portal-nav-link:hover .portal-icon,
[b-s0avrilodp] a.portal-nav-link.active .portal-icon {
    opacity: 1;
}

/* ─── Sidebar footer — profile + global controls ────────────── */

.portal-sidebar-footer[b-s0avrilodp] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.75rem;
    border-top: 1px solid var(--portal-border);
    flex-shrink: 0;
}

/* User card — avatar + name + role. Acts like a compact business
   card pinned to the bottom of the sidebar. */
.portal-footer-user[b-s0avrilodp] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.5rem;
    border-radius: 10px;
    cursor: default;
    min-width: 0;
    transition: background 140ms ease;
}

.portal-footer-user:hover[b-s0avrilodp] {
    background: var(--portal-hover);
}

.portal-footer-avatar[b-s0avrilodp] {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--portal-brand-bright) 0%, var(--portal-brand) 100%);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(20, 50, 30, 0.20),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
    letter-spacing: 0.02em;
}

.portal-footer-user-meta[b-s0avrilodp] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.portal-footer-user-name[b-s0avrilodp] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--portal-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-footer-user-role[b-s0avrilodp] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--portal-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Action row — 4 small icon buttons (theme, text size, sign-out,
   collapse). Distributed evenly so the cluster feels intentional. */
.portal-footer-actions[b-s0avrilodp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 10px;
    background: var(--portal-surface-2);
    border: 1px solid var(--portal-border);
}

.portal-footer-actions[b-s0avrilodp]  .theme-toggle {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    border: none;
    flex-shrink: 0;
}

.portal-footer-actions[b-s0avrilodp]  .theme-toggle:hover {
    background: var(--portal-hover);
}

[b-s0avrilodp] .portal-footer-btn {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--portal-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 140ms ease, color 140ms ease;
}

[b-s0avrilodp] .portal-footer-btn:hover {
    background: var(--portal-hover);
    color: var(--portal-text);
}

[b-s0avrilodp] .portal-footer-btn:focus-visible {
    outline: 2px solid var(--portal-brand-bright);
    outline-offset: 1px;
}

[b-s0avrilodp] .portal-footer-btn .portal-icon {
    width: 16px;
    height: 16px;
    opacity: 1;
}

[b-s0avrilodp] .portal-footer-btn svg {
    width: 16px;
    height: 16px;
}

/* "Aa" glyph for the text-size cycle button — uses an Outfit-ish
   weight to read as deliberate typography UI. */
[b-s0avrilodp] .portal-footer-aa {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.02em;
    line-height: 1;
    color: inherit;
}

[b-s0avrilodp] .portal-footer-logout {
    margin: 0;
    display: inline-flex;
}

/* The collapse chevron rotates 180° in collapsed mode so it always
   "points the way out" — left when expanded, right when collapsed. */
[b-s0avrilodp] .portal-footer-collapse svg {
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .portal-footer-collapse svg {
    transform: rotate(180deg);
}

/* ─── Topbar — header strip (64px) ──────────────────────────
   The main page header. Tall enough to feel like a real page
   header, with the page title rendered as a proper h1. The
   breadcrumb strip below is its companion. */

.portal-topbar[b-s0avrilodp] {
    grid-area: topbar;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.75rem;
    background: var(--portal-surface);
    border-bottom: 1px solid var(--portal-border);
    position: sticky;
    top: 0;
    z-index: 20;
    height: 64px;
}

/* Page title slot — pages opt in via:
       <SectionContent SectionName="portal-page-title">
           <h1 class="portal-page-title">Listings</h1>
       </SectionContent>
   When no page fills it, this container collapses silently. */
.portal-topbar-context[b-s0avrilodp] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
}

/* Auto-derived page title from the URL (PortalRouteLabels). Every
   page gets one for free. Pages can render additional SectionContent
   alongside (e.g. a subtitle, a status pill) — this stays put. */
.portal-page-title-auto[b-s0avrilodp] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--portal-text);
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
    font-family: 'Outfit', 'Inter', sans-serif;
}

[b-s0avrilodp] .portal-page-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--portal-text);
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
}

[b-s0avrilodp] .portal-page-subtitle {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--portal-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portal-topbar-actions[b-s0avrilodp] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Icon-only topbar button — squared 36×36 to match the slightly
   bigger header tier. Same visual weight as the notifications
   bell next to it so the cluster reads as a unit. */
[b-s0avrilodp] .portal-topbar-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--portal-text-muted);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

[b-s0avrilodp] .portal-topbar-icon-btn:hover {
    background: var(--portal-hover);
    color: var(--portal-text);
    border-color: var(--portal-border);
}

[b-s0avrilodp] .portal-topbar-icon-btn:focus-visible {
    outline: 2px solid var(--portal-brand-bright);
    outline-offset: 1px;
}

[b-s0avrilodp] .portal-topbar-icon-btn .portal-icon {
    width: 18px;
    height: 18px;
    opacity: 1;
}

/* Notification bell — render its button with the same look as the
   other topbar icon buttons so the cluster reads cohesively. The
   NotificationBell component uses class .portal-topbar-bell — we
   ::deep into it to apply matching styles. */
[b-s0avrilodp] .portal-topbar-bell {
    display: inline-grid;
    place-items: center;
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--portal-text-muted);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

[b-s0avrilodp] .portal-topbar-bell:hover {
    background: var(--portal-hover);
    color: var(--portal-text);
    border-color: var(--portal-border);
}

[b-s0avrilodp] .portal-topbar-bell:focus-visible {
    outline: 2px solid var(--portal-brand-bright);
    outline-offset: 1px;
}

[b-s0avrilodp] .portal-bell-icon {
    width: 18px;
    height: 18px;
}

/* Unread count badge — pinned to the top-right of the bell.
   Emerald background, white text, slight glow for emphasis. */
[b-s0avrilodp] .portal-bell-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--portal-brand-bright);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    box-shadow: 0 0 0 2px var(--portal-surface);
}

/* ─── Breadcrumb strip — 40px secondary bar below the header ───
   Collapses to 0 height when there's no trail (top-level pages
   where the breadcrumb would just duplicate the page title). */

.portal-crumb[b-s0avrilodp] {
    grid-area: breadcrumb;
    display: flex;
    align-items: center;
    padding: 0 1.75rem;
    background: var(--portal-surface-2);
    border-bottom: 1px solid var(--portal-border);
    position: sticky;
    top: 64px;
    z-index: 19;
    height: 40px;
    overflow: hidden;
}

/* Hide when empty — the breadcrumb component renders nothing on
   single-page (root) routes, so :has() can detect there's no
   element content and collapse the strip. */
.portal-crumb:not(:has(*))[b-s0avrilodp] {
    display: none;
}

/* Re-claim the row in the grid when the breadcrumb is hidden so
   the main content moves up. Using grid-template-rows: auto for
   the breadcrumb row would collapse to 0 height when empty. */
.portal-shell:not(:has(.portal-crumb-nav)):not(:has([data-breadcrumb-content]))[b-s0avrilodp] {
    grid-template-rows: 64px 0 1fr;
}

[b-s0avrilodp] .portal-crumb-nav {
    flex: 1;
    min-width: 0;
}

[b-s0avrilodp] .portal-crumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    overflow-x: auto;
    scrollbar-width: none;
}

[b-s0avrilodp] .portal-crumb-list::-webkit-scrollbar {
    display: none;
}

[b-s0avrilodp] .portal-crumb-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    font-size: 12.5px;
    line-height: 1;
}

[b-s0avrilodp] .portal-crumb-link {
    color: var(--portal-text-soft);
    text-decoration: none;
    font-weight: 500;
    padding: 0.25rem 0.4rem;
    border-radius: 5px;
    transition: background 140ms ease, color 140ms ease;
}

[b-s0avrilodp] .portal-crumb-link:hover {
    background: var(--portal-hover);
    color: var(--portal-text);
}

[b-s0avrilodp] .portal-crumb-current {
    color: var(--portal-text);
    font-weight: 600;
    padding: 0.25rem 0.4rem;
}

[b-s0avrilodp] .portal-crumb-sep {
    width: 14px;
    height: 14px;
    color: var(--portal-text-soft);
    opacity: 0.6;
    flex-shrink: 0;
}

/* Branch selector — feels like a button, behaves like a select. */
.portal-branch-form[b-s0avrilodp] {
    margin: 0;
}

.portal-branch-select[b-s0avrilodp] {
    height: 30px;
    padding: 0 1.75rem 0 0.625rem;
    background: var(--portal-bg);
    border: 1px solid var(--portal-border);
    border-radius: 7px;
    color: var(--portal-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    min-width: 130px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B968E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    transition: border-color 140ms ease, background-color 140ms ease;
}

.portal-branch-select:hover[b-s0avrilodp] {
    border-color: var(--portal-border-strong);
    background-color: var(--portal-surface);
}

.portal-branch-select:focus-visible[b-s0avrilodp] {
    outline: none;
    border-color: var(--portal-brand-bright);
    box-shadow: 0 0 0 3px var(--portal-brand-glow);
}

/* The topbar no longer hosts the user menu — profile, sign-out,
   theme toggle, and collapse toggle all live in the sidebar footer
   (see .portal-sidebar-footer rules further down). */

/* ─── Main content area ──────────────────────────────────── */

.portal-main[b-s0avrilodp] {
    grid-area: main;
    padding: 2rem 2.5rem;
    width: 100%;
    overflow-x: hidden;
}

/* ─── Blazor error banner (sticky at bottom on circuit failure) ── */

#blazor-error-ui[b-s0avrilodp] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem 1.5rem;
    background: #B91C1C;
    color: white;
    display: none;
    align-items: center;
    gap: 0.75rem;
    z-index: 1000;
    font-size: 13px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.18);
}

#blazor-error-ui[style*="block"][b-s0avrilodp] {
    display: flex;
}

#blazor-error-ui .reload[b-s0avrilodp] {
    color: white;
    text-decoration: underline;
}

#blazor-error-ui .dismiss[b-s0avrilodp] {
    margin-left: auto;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

/* ──────────────────────────────────────────────────────────────
   Text-size scales — driven by [data-text-size] on the shell.
   The footer "Aa" button cycles between small / medium / large.
   ────────────────────────────────────────────────────────────── */

.portal-shell[data-text-size="small"][b-s0avrilodp] {
    --portal-nav-size:  12.5px;
    --portal-nav-pad-y: 0.4rem;
}

.portal-shell[data-text-size="large"][b-s0avrilodp] {
    --portal-nav-size:  15.5px;
    --portal-nav-pad-y: 0.625rem;
}

/* ──────────────────────────────────────────────────────────────
   Collapsed-sidebar state — set via [data-sidebar-collapsed] on
   the shell. Cookie + localStorage persisted by sidebar-toggle.js;
   the cookie is read in PortalLayout's OnInitialized so the SSR
   HTML already has the attribute (no flash on enhanced navigation).
   ────────────────────────────────────────────────────────────── */

.portal-shell[data-sidebar-collapsed][b-s0avrilodp] {
    grid-template-columns: 68px 1fr;
}

.portal-shell[data-sidebar-collapsed] .portal-sidebar[b-s0avrilodp] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Hide the brand text but keep the logo mark. The AsetrixLogo
   component renders a mark + text lockup; we hide everything past
   the first child to collapse to just the icon. */
.portal-shell[data-sidebar-collapsed] .portal-sidebar-brand[b-s0avrilodp] {
    justify-content: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.portal-shell[data-sidebar-collapsed] .portal-brand-link[b-s0avrilodp] {
    gap: 0;
}

/* Collapsed-mode footer — stacked vertically, only avatar/icons. */
.portal-shell[data-sidebar-collapsed] .portal-sidebar-footer[b-s0avrilodp] {
    padding: 0.5rem 0.25rem;
    gap: 0.5rem;
    align-items: center;
}

.portal-shell[data-sidebar-collapsed] .portal-footer-user[b-s0avrilodp] {
    padding: 0;
    gap: 0;
    width: 100%;
    justify-content: center;
}

.portal-shell[data-sidebar-collapsed] .portal-footer-user-meta[b-s0avrilodp] {
    display: none;
}

.portal-shell[data-sidebar-collapsed] .portal-footer-actions[b-s0avrilodp] {
    flex-direction: column;
    background: transparent;
    border: none;
    padding: 0;
    gap: 0.25rem;
    width: 100%;
    align-items: center;
}

/* Footer button hover-tooltips when collapsed — same pattern as the
   nav-link tooltips. The button has no <span> child, so we use the
   `title` attribute via ::before. */
.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .portal-footer-btn {
    position: relative;
}

.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .portal-footer-btn::after {
    content: attr(title);
    position: absolute;
    left: 100%;
    margin-left: 0.5rem;
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--portal-text);
    color: var(--portal-surface);
    padding: 0.3rem 0.625rem;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transition: opacity 140ms ease, transform 140ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
}

.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .portal-footer-btn:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Hide the "Asetrix" wordmark inside the AsetrixLogo when the
   sidebar is collapsed — only the mark survives. */
.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .asetrix-wordmark {
    display: none;
}

/* In collapsed mode the brand area becomes: small logo mark, then
   the toggle button to its right. The toggle stays clickable so the
   user can always re-expand. The mark sits below the toggle if both
   don't fit — flex-wrap handles that gracefully. */
.portal-shell[data-sidebar-collapsed] .portal-sidebar-brand[b-s0avrilodp] {
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

/* Nav items — collapse to icon-only and center them. */
.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  a.portal-nav-link {
    justify-content: center;
    padding: 0.625rem 0.5rem;
    gap: 0;
}

.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  a.portal-nav-link > span {
    /* Pop-out tooltip: the existing <span>Label</span> floats out
       to the right on hover. No extra markup needed. */
    position: absolute;
    left: 100%;
    margin-left: 0.5rem;
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--portal-text);
    color: var(--portal-surface);
    padding: 0.3rem 0.625rem;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transition: opacity 140ms ease, transform 140ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 30;
}

.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  a.portal-nav-link:hover > span {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ─── Collapsed-mode group flyout (macOS-dock style) ──────────
   When the sidebar is collapsed, hovering a group icon pops out a
   floating panel to the right containing the child links. The
   panel is anchored to the group, has its own background, and
   stays open while the mouse is anywhere inside it. */

.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .nav-group {
    position: relative;
}

.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .nav-group-summary {
    justify-content: center;
    padding: 0.625rem 0.5rem;
    /* The chevron and title are not useful in collapsed mode — the
       hover-flyout reveals everything. */
}

.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .nav-group-summary > .nav-group-title,
.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .nav-group-summary > svg.portal-icon:last-child {
    display: none;
}

/* Active-section indicator in collapsed mode — pin a small emerald
   dot to the top-right corner of the group icon. */
.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .nav-group-dot {
    position: absolute;
    top: 4px;
    right: 4px;
}

/* Default: items hidden in collapsed mode (regardless of the
   native <details open> attribute — clicking the summary toggles
   that, but our CSS ignores it). */
.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .nav-group > .nav-group-items {
    display: none;
}

/* On hover: items become a floating panel to the right. The
   transparent left padding bridges the gap between icon and
   visible panel so the mouse can move across without losing
   hover state. */
.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .nav-group:hover > .nav-group-items,
.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .nav-group:focus-within > .nav-group-items {
    display: flex;
    flex-direction: column;
    gap: 1px;

    position: absolute;
    left: 100%;
    top: -4px;
    margin: 0;

    /* Left padding = hover bridge (transparent area between icon
       and visible panel). Top/bottom padding gives the panel a
       small breathing margin from the icon's vertical edges. */
    padding: 4px 0 4px 8px;

    /* No tree connector lines in flyout mode. */
    border: none;

    z-index: 100;

    /* Subtle entry animation. */
    animation: nav-flyout-in-b-s0avrilodp 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* The actual styled panel — rendered via ::before so we don't
   need to add wrapper markup. Sits behind the items, offset by
   the bridge padding so it visually starts AFTER the gap. */
.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .nav-group:hover > .nav-group-items::before,
.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .nav-group:focus-within > .nav-group-items::before {
    content: "";
    position: absolute;
    inset: 0 0 0 8px;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    box-shadow: 0 12px 32px -8px rgba(20, 50, 30, 0.18),
                0 2px 6px -2px rgba(20, 50, 30, 0.08);
    z-index: -1;
}

[data-theme="dark"] .portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .nav-group:hover > .nav-group-items::before,
[data-theme="dark"] .portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .nav-group:focus-within > .nav-group-items::before {
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.55),
                0 2px 6px -2px rgba(0, 0, 0, 0.35);
}

/* Inside the flyout, items show as normal full-width links with
   their labels — NOT as popout tooltips. */
.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .nav-group:hover > .nav-group-items > li,
.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .nav-group:focus-within > .nav-group-items > li {
    margin-left: 0;
    padding-left: 8px; /* offset matches the bridge so content
                          aligns with the visible panel */
}

/* Hide the tree-connector ::before stubs inside the flyout — they
   were designed for the inline-expanded variant. */
.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .nav-group:hover > .nav-group-items > li::before,
.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .nav-group:focus-within > .nav-group-items > li::before {
    display: none;
}

.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .nav-group:hover > .nav-group-items a.portal-nav-link,
.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .nav-group:focus-within > .nav-group-items a.portal-nav-link {
    justify-content: flex-start;
    padding: var(--portal-nav-pad-y) 0.75rem;
    gap: 0.625rem;
    min-width: 180px;
}

/* In the flyout, the label span shows normally (override the
   absolute-positioned tooltip styling from above). */
.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .nav-group:hover > .nav-group-items a.portal-nav-link > span,
.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  .nav-group:focus-within > .nav-group-items a.portal-nav-link > span {
    position: static;
    opacity: 1;
    transform: none;
    background: transparent;
    color: inherit;
    padding: 0;
    margin: 0;
    box-shadow: none;
    pointer-events: auto;
    transition: none;
}

@keyframes nav-flyout-in-b-s0avrilodp {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Section headings hide in collapsed mode (they're text-only). */
.portal-shell[data-sidebar-collapsed] .portal-nav-section[b-s0avrilodp] {
    display: none;
}

/* Hide the active accent bar in collapsed mode — the icon already
   takes on the emerald colour and bg, so the bar adds visual noise
   without adding information. (It was also being read as "the
   first item is highlighted" because it always lives at the very
   left edge of the sidebar.) */
.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  a.portal-nav-link.active::before {
    display: none;
}

/* In collapsed mode, the active item gets a slightly stronger
   background tint to compensate for the missing accent bar. */
.portal-shell[data-sidebar-collapsed][b-s0avrilodp]  a.portal-nav-link.active {
    background: color-mix(in srgb, var(--portal-brand-soft) 100%, var(--portal-brand-glow));
}

/* Push main content over to account for the narrower sidebar. */
.portal-shell[data-sidebar-collapsed] .portal-topbar[b-s0avrilodp],
.portal-shell[data-sidebar-collapsed] .portal-main[b-s0avrilodp] {
    /* Grid handles the offset automatically; nothing extra needed.
       This rule reserved for any host-specific overrides. */
}

/* Smooth width transition when toggling. */
.portal-shell[b-s0avrilodp] {
    transition: grid-template-columns 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ──────────────────────────────────────────────────────────────
   Responsive — at narrow widths the sidebar auto-collapses.
   sidebar-toggle.js watches the (max-width: 900px) media query
   and adds [data-sidebar-collapsed] to the shell when it matches,
   so the SAME collapsed-state CSS above kicks in (including the
   hover flyouts and tooltips). The @media rules here only tweak
   things that aren't sidebar-state — topbar padding, main content
   padding, etc.
   ────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .portal-topbar[b-s0avrilodp] {
        padding: 0 1rem;
    }

    .portal-main[b-s0avrilodp] {
        padding: 1.5rem 1rem;
    }

    .portal-crumb[b-s0avrilodp] {
        padding: 0 1rem;
    }
}
/* /Components/Pages/Admin/Team/TeamListPage.razor.rz.scp.css */
/* Team list page — rich cards showing each member's role + perms. */

.team-page[b-12lejdcil1] {
    --t-brand:          #14532D;
    --t-brand-bright:   #16A34A;
    --t-brand-soft:     rgba(20, 83, 45, 0.06);
    --t-brand-glow:     rgba(22, 163, 74, 0.12);
    --t-bg:             #FAFAF7;
    --t-surface:        #FFFFFF;
    --t-border:         rgba(20, 83, 45, 0.10);
    --t-border-strong:  rgba(20, 83, 45, 0.18);
    --t-text:           #14191A;
    --t-text-muted:     #4A554E;
    --t-text-soft:      #8B968E;

    max-width: 1100px;
    margin: 0 auto;
    font-family: 'Inter', sans-serif;
    color: var(--t-text);
}

[data-theme="dark"] .team-page[b-12lejdcil1] {
    --t-surface:        #131A14;
    --t-bg:             #08110C;
    --t-border:         rgba(74, 222, 128, 0.12);
    --t-border-strong:  rgba(74, 222, 128, 0.22);
    --t-text:           #F0F4F1;
    --t-text-muted:     #BBD9C9;
    --t-text-soft:      #6B8B7F;
    --t-brand:          #16A34A;
    --t-brand-bright:   #4ADE80;
    --t-brand-soft:     rgba(74, 222, 128, 0.06);
    --t-brand-glow:     rgba(74, 222, 128, 0.16);
}

/* ─── Page header ──────────────────────────────────────── */

.team-page-header[b-12lejdcil1] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.team-page-header > div[b-12lejdcil1] {
    flex: 1;
    min-width: 0;
}

.team-page-title[b-12lejdcil1] {
    margin: 0 0 0.375rem;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--t-text);
}

.team-page-sub[b-12lejdcil1] {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--t-text-muted);
    max-width: 60ch;
}

.team-cta[b-12lejdcil1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--t-brand-bright), var(--t-brand));
    color: #FFFFFF;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(20, 50, 30, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.team-cta:hover[b-12lejdcil1] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px var(--t-brand-glow),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

[b-12lejdcil1] .team-cta .portal-icon {
    width: 16px;
    height: 16px;
    opacity: 1;
}

/* ─── Member cards ─────────────────────────────────────── */

.team-list[b-12lejdcil1] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.team-card[b-12lejdcil1] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.125rem;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.team-card:hover[b-12lejdcil1] {
    border-color: var(--t-brand-bright);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -8px var(--t-brand-glow);
}

.team-card:focus-visible[b-12lejdcil1] {
    outline: 2px solid var(--t-brand-bright);
    outline-offset: 2px;
}

.team-card-avatar[b-12lejdcil1] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--t-brand-bright), var(--t-brand));
    color: #FFFFFF;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(20, 50, 30, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.team-card-avatar[data-status="invited"][b-12lejdcil1] {
    background: linear-gradient(135deg, #F0C75F, #D4A647);
    color: #14191A;
}

.team-card-avatar[data-status="suspended"][b-12lejdcil1] {
    background: linear-gradient(135deg, #DC2626, #991B1B);
}

.team-card-meta[b-12lejdcil1] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.team-card-line[b-12lejdcil1] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.team-card-name[b-12lejdcil1] {
    font-size: 15px;
    font-weight: 700;
    color: var(--t-text);
    font-family: 'Outfit', 'Inter', sans-serif;
    letter-spacing: -0.01em;
}

.team-card-handle[b-12lejdcil1] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--t-text-soft);
}

.team-card-status[b-12lejdcil1] {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--t-brand-soft);
    color: var(--t-brand);
}

.team-card-status[data-status="invited"][b-12lejdcil1] {
    background: rgba(212, 166, 71, 0.12);
    color: #946D1F;
}

.team-card-status[data-status="suspended"][b-12lejdcil1] {
    background: rgba(185, 28, 28, 0.10);
    color: #B91C1C;
}

.team-card-meta-row[b-12lejdcil1] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 13px;
    color: var(--t-text-muted);
}

.team-card-role[b-12lejdcil1] {
    font-weight: 600;
    color: var(--t-text);
}

.team-card-dot[b-12lejdcil1] {
    color: var(--t-text-soft);
}

.team-card-email[b-12lejdcil1] {
    color: var(--t-text-soft);
}

.team-card-stats[b-12lejdcil1] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.25rem;
    flex-wrap: wrap;
}

.team-card-stat[b-12lejdcil1] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 12px;
    color: var(--t-text-soft);
}

.team-card-stat strong[b-12lejdcil1] {
    color: var(--t-text);
    font-weight: 700;
}

[b-12lejdcil1] .team-card-stat .portal-icon {
    width: 13px;
    height: 13px;
    color: var(--t-brand);
    opacity: 0.85;
}

.team-card-stat-preset[b-12lejdcil1] {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--t-brand-soft);
    color: var(--t-brand);
    font-weight: 600;
}

[b-12lejdcil1] .team-card-stat-preset .portal-icon {
    color: var(--t-brand);
}

.team-card-edit[b-12lejdcil1] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--t-border);
    border-radius: 10px;
    background: var(--t-bg);
    color: var(--t-text-muted);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.team-card-edit:hover[b-12lejdcil1] {
    background: var(--t-brand-soft);
    color: var(--t-brand);
    border-color: var(--t-brand-bright);
}

.team-card-edit svg[b-12lejdcil1] {
    width: 16px;
    height: 16px;
}

/* ─── Header actions (view toggle + invite) ────────────── */

.team-page-actions[b-12lejdcil1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.team-view-toggle[b-12lejdcil1] {
    display: inline-flex;
    padding: 3px;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: 9px;
}

.team-view-btn[b-12lejdcil1] {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--t-text-soft);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.team-view-btn:hover[b-12lejdcil1] { color: var(--t-text); }

.team-view-btn.is-active[b-12lejdcil1] {
    background: linear-gradient(135deg, var(--t-brand-bright), var(--t-brand));
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(20, 50, 30, 0.18);
}

.team-view-btn svg[b-12lejdcil1] {
    width: 15px;
    height: 15px;
}

/* ─── List/table view ──────────────────────────────────── */

.team-table-wrap[b-12lejdcil1] {
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: 14px;
    overflow: hidden;
}

.team-table[b-12lejdcil1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.team-table thead th[b-12lejdcil1] {
    text-align: left;
    padding: 0.625rem 1rem;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--t-text-soft);
    border-bottom: 1px solid var(--t-border);
    background: color-mix(in srgb, var(--t-brand-soft) 60%, var(--t-surface));
}

.team-table tbody tr[b-12lejdcil1] {
    cursor: pointer;
    transition: background 140ms ease;
}

.team-table tbody tr:hover[b-12lejdcil1] {
    background: var(--t-brand-soft);
}

.team-table tbody tr + tr td[b-12lejdcil1] {
    border-top: 1px solid var(--t-border);
}

.team-table td[b-12lejdcil1] {
    padding: 0.75rem 1rem;
    color: var(--t-text-muted);
    vertical-align: middle;
}

.team-table-member[b-12lejdcil1] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.team-table-avatar[b-12lejdcil1] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--t-brand-bright), var(--t-brand));
    color: #FFFFFF;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(20, 50, 30, 0.18);
    flex-shrink: 0;
}

.team-table-avatar[data-status="invited"][b-12lejdcil1] { background: linear-gradient(135deg, #F0C75F, #D4A647); color: #14191A; }
.team-table-avatar[data-status="expired"][b-12lejdcil1],
.team-table-avatar[data-status="suspended"][b-12lejdcil1] { background: linear-gradient(135deg, #DC2626, #991B1B); }

.team-table-name[b-12lejdcil1] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--t-text);
    font-family: 'Outfit', sans-serif;
}

.team-table-email[b-12lejdcil1] {
    font-size: 12px;
    color: var(--t-text-soft);
}

.team-table-ffc[b-12lejdcil1] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(34, 197, 94, 0.10);
    color: #15803D;
}

.team-table-ffc-risk[b-12lejdcil1]    { background: rgba(212, 166, 71, 0.14); color: #946D1F; }
.team-table-ffc-expired[b-12lejdcil1] { background: rgba(185, 28, 28, 0.10);  color: #B91C1C; }
.team-table-ffc-missing[b-12lejdcil1] { background: var(--t-brand-soft);      color: var(--t-text-muted); }
.team-table-na[b-12lejdcil1] { color: var(--t-text-soft); }

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

.team-empty-state[b-12lejdcil1] {
    text-align: center;
    padding: 4rem 1.5rem;
    background: var(--t-surface);
    border: 1px dashed var(--t-border-strong);
    border-radius: 16px;
}

.team-empty-state h2[b-12lejdcil1] {
    margin: 0 0 0.5rem;
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--t-text);
}

.team-empty-state p[b-12lejdcil1] {
    margin: 0 auto 1.25rem;
    max-width: 40ch;
    color: var(--t-text-soft);
    font-size: 14px;
}

.team-empty-icon[b-12lejdcil1] {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at center, var(--t-brand-glow) 0%, transparent 70%);
    color: var(--t-brand);
}

[b-12lejdcil1] .team-empty-icon .portal-icon {
    width: 26px;
    height: 26px;
    opacity: 1;
}

/* ─── Load error ───────────────────────────────────────── */

.team-load-error[b-12lejdcil1] {
    padding: 0.875rem 1rem;
    background: rgba(185, 28, 28, 0.06);
    border: 1px solid rgba(185, 28, 28, 0.18);
    border-radius: 12px;
    color: #B91C1C;
    font-size: 13.5px;
}

.team-load-error code[b-12lejdcil1] {
    display: block;
    margin-top: 0.25rem;
    font-size: 12px;
    color: #7F1D1D;
}

/* ─── Skeleton (loading) ───────────────────────────────── */

.team-card-skeleton[b-12lejdcil1] {
    cursor: default;
}

.skeleton-block[b-12lejdcil1] {
    display: inline-block;
    background: linear-gradient(90deg,
        var(--t-brand-soft) 0%,
        color-mix(in srgb, var(--t-brand-soft) 50%, transparent) 50%,
        var(--t-brand-soft) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-12lejdcil1 1.4s ease-in-out infinite;
    border-radius: 6px;
}

.skeleton-stack[b-12lejdcil1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@keyframes skeleton-shimmer-b-12lejdcil1 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── Invite modal ─────────────────────────────────────── */

.invite-backdrop[b-12lejdcil1] {
    position: fixed;
    inset: 0;
    background: rgba(8, 17, 12, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9998;
    animation: invite-fade-b-12lejdcil1 180ms ease-out;
}

.invite-modal[b-12lejdcil1] {
    position: fixed;
    top: 8vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 2rem));
    max-height: 84vh;
    z-index: 9999;

    display: flex;
    flex-direction: column;

    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(20, 50, 30, 0.04),
        0 24px 56px -12px rgba(20, 50, 30, 0.30);

    animation: invite-rise-b-12lejdcil1 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes invite-fade-b-12lejdcil1 { from { opacity: 0; } to { opacity: 1; } }
@keyframes invite-rise-b-12lejdcil1 {
    from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0)   scale(1);     }
}

.invite-modal-head[b-12lejdcil1] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.875rem;
    align-items: center;
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid var(--t-border);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--t-brand-bright) 6%, var(--t-surface)) 0%,
        var(--t-surface) 80%);
}

.invite-modal-icon[b-12lejdcil1] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--t-brand-bright), var(--t-brand));
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(20, 50, 30, 0.18);
}

[b-12lejdcil1] .invite-modal-icon .portal-icon {
    width: 18px;
    height: 18px;
    opacity: 1;
}

.invite-modal-head h2[b-12lejdcil1] {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--t-text);
}

.invite-modal-head p[b-12lejdcil1] {
    margin: 0;
    font-size: 12.5px;
    color: var(--t-text-soft);
}

.invite-modal-close[b-12lejdcil1] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--t-border);
    border-radius: 8px;
    background: var(--t-bg);
    color: var(--t-text-soft);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 140ms ease, color 140ms ease;
}

.invite-modal-close:hover[b-12lejdcil1] {
    background: var(--t-surface);
    color: var(--t-text);
}

.invite-modal-close svg[b-12lejdcil1] { width: 14px; height: 14px; }

.invite-modal-body[b-12lejdcil1] {
    padding: 1.25rem;
    overflow-y: auto;
}

.invite-form-grid[b-12lejdcil1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem 1rem;
}

.invite-field[b-12lejdcil1] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.invite-field-wide[b-12lejdcil1] {
    grid-column: 1 / -1;
}

.invite-field span[b-12lejdcil1] {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--t-text-muted);
}

.invite-input[b-12lejdcil1] {
    height: 40px;
    padding: 0 0.75rem;
    background: var(--t-bg);
    border: 1px solid var(--t-border);
    border-radius: 10px;
    color: var(--t-text);
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.invite-input:focus[b-12lejdcil1] {
    border-color: var(--t-brand-bright);
    box-shadow: 0 0 0 3px var(--t-brand-glow);
    background: var(--t-surface);
}

.invite-error[b-12lejdcil1] {
    margin: 0.875rem 0 0;
    padding: 0.625rem 0.875rem;
    background: rgba(185, 28, 28, 0.06);
    border: 1px solid rgba(185, 28, 28, 0.18);
    border-radius: 10px;
    color: #B91C1C;
    font-size: 13px;
}

.invite-success[b-12lejdcil1] {
    margin: 0.875rem 0 0;
    padding: 0.625rem 0.875rem;
    background: rgba(22, 163, 74, 0.08);
    border: 1px solid rgba(22, 163, 74, 0.24);
    border-radius: 10px;
    color: #15803D;
    font-size: 13px;
}

.invite-modal-foot[b-12lejdcil1] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--t-border);
    background: var(--t-bg);
}

@media (max-width: 700px) {
    .team-page-header[b-12lejdcil1] {
        flex-direction: column;
        gap: 0.875rem;
    }
    .team-page-actions[b-12lejdcil1] {
        width: 100%;
        justify-content: space-between;
    }
    .team-cta[b-12lejdcil1] {
        flex: 1;
        justify-content: center;
    }
    .team-card-status[b-12lejdcil1] {
        margin-left: 0;
    }
    .invite-form-grid[b-12lejdcil1] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Admin/Team/TeamMemberEditorPage.razor.rz.scp.css */
/* Team member editor — full-page permissions editor matching the
   "majesty" layout style but in Asetrix Forest emerald. Two-column
   layout: presets on the left, custom permissions grid on the right. */

.member-editor[b-4flcnwnnaf] {
    --m-brand:          #14532D;
    --m-brand-bright:   #16A34A;
    --m-brand-soft:     rgba(20, 83, 45, 0.06);
    --m-brand-glow:     rgba(22, 163, 74, 0.12);
    --m-gold:           #D4A647;
    --m-bg:             #FAFAF7;
    --m-surface:        #FFFFFF;
    --m-surface-2:      #F5F5F0;
    --m-border:         rgba(20, 83, 45, 0.10);
    --m-border-strong:  rgba(20, 83, 45, 0.18);
    --m-text:           #14191A;
    --m-text-muted:     #4A554E;
    --m-text-soft:      #8B968E;
    --m-danger:         #B91C1C;
    --m-danger-soft:    rgba(185, 28, 28, 0.08);

    max-width: 1320px;
    margin: 0 auto;
    padding: 0 0.25rem 2rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--m-text);
}

[data-theme="dark"] .member-editor[b-4flcnwnnaf] {
    --m-bg:             #08110C;
    --m-surface:        #131A14;
    --m-surface-2:      #0D130F;
    --m-border:         rgba(74, 222, 128, 0.12);
    --m-border-strong:  rgba(74, 222, 128, 0.22);
    --m-text:           #F0F4F1;
    --m-text-muted:     #BBD9C9;
    --m-text-soft:      #6B8B7F;
    --m-brand:          #16A34A;
    --m-brand-bright:   #4ADE80;
    --m-brand-soft:     rgba(74, 222, 128, 0.06);
    --m-brand-glow:     rgba(74, 222, 128, 0.16);
}

/* ─── Header card ───────────────────────────────────────── */

.member-header[b-4flcnwnnaf] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--m-brand-bright) 5%, var(--m-surface)) 0%,
            var(--m-surface) 60%);
    border: 1px solid var(--m-border);
    border-radius: 16px;
    box-shadow:
        0 1px 2px rgba(20, 50, 30, 0.04),
        0 8px 24px -12px rgba(20, 50, 30, 0.12);
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.member-header[b-4flcnwnnaf]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--m-brand), var(--m-brand-bright), var(--m-brand));
}

.member-avatar[b-4flcnwnnaf] {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--m-brand-bright), var(--m-brand));
    color: #FFFFFF;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 2px rgba(20, 50, 30, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.member-identity[b-4flcnwnnaf] {
    flex: 1;
    min-width: 0;
}

.member-name[b-4flcnwnnaf] {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 0.125rem;
    color: var(--m-text);
}

.member-handle[b-4flcnwnnaf] {
    margin: 0;
    font-size: 14px;
    color: var(--m-text-soft);
    font-weight: 500;
}

.member-header-actions[b-4flcnwnnaf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.member-status-pill[b-4flcnwnnaf] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: var(--m-brand-soft);
    color: var(--m-brand);
    font-size: 12px;
    font-weight: 600;
}

.member-status-pill[data-status="invited"][b-4flcnwnnaf] {
    background: rgba(212, 166, 71, 0.12);
    color: #946D1F;
}

.member-status-pill[data-status="suspended"][b-4flcnwnnaf] {
    background: var(--m-danger-soft);
    color: var(--m-danger);
}

.member-status-dot[b-4flcnwnnaf] {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
}

/* ─── Tabs ──────────────────────────────────────────────── */

.member-tabs[b-4flcnwnnaf] {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: 12px;
    margin-bottom: 1rem;
}

.member-tab[b-4flcnwnnaf] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--m-text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

[b-4flcnwnnaf] .member-tab .portal-icon {
    width: 15px;
    height: 15px;
    opacity: 0.85;
}

.member-tab:hover[b-4flcnwnnaf] {
    background: var(--m-brand-soft);
    color: var(--m-text);
}

.member-tab.is-active[b-4flcnwnnaf] {
    background: linear-gradient(135deg, var(--m-brand-bright), var(--m-brand));
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(20, 50, 30, 0.18);
}

[b-4flcnwnnaf] .member-tab.is-active .portal-icon {
    opacity: 1;
}

.member-tab-count[b-4flcnwnnaf] {
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
}

.member-tab:not(.is-active) .member-tab-count[b-4flcnwnnaf] {
    background: var(--m-brand-soft);
    color: var(--m-brand);
}

/* ─── Panel base ───────────────────────────────────────── */

.member-panel[b-4flcnwnnaf] {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

/* ─── Basic info form ──────────────────────────────────── */

.member-form-grid[b-4flcnwnnaf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
}

.member-field[b-4flcnwnnaf] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.member-field-wide[b-4flcnwnnaf] {
    grid-column: 1 / -1;
}

.member-label[b-4flcnwnnaf] {
    font-size: 12px;
    font-weight: 600;
    color: var(--m-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.member-input[b-4flcnwnnaf] {
    height: 40px;
    padding: 0 0.875rem;
    background: var(--m-bg);
    border: 1px solid var(--m-border);
    border-radius: 10px;
    color: var(--m-text);
    font: inherit;
    font-size: 14px;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
    outline: none;
}

.member-input:focus[b-4flcnwnnaf] {
    border-color: var(--m-brand-bright);
    box-shadow: 0 0 0 3px var(--m-brand-glow);
    background: var(--m-surface);
}

.member-input-with-prefix[b-4flcnwnnaf] {
    display: flex;
    align-items: center;
    background: var(--m-bg);
    border: 1px solid var(--m-border);
    border-radius: 10px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.member-input-with-prefix:focus-within[b-4flcnwnnaf] {
    border-color: var(--m-brand-bright);
    box-shadow: 0 0 0 3px var(--m-brand-glow);
}

.member-input-with-prefix .member-input[b-4flcnwnnaf] {
    border: none;
    background: transparent;
    padding-left: 0;
    box-shadow: none;
}

.member-input-prefix[b-4flcnwnnaf] {
    padding-left: 0.875rem;
    padding-right: 0.25rem;
    color: var(--m-text-soft);
    font-weight: 600;
    font-size: 14px;
}

/* ─── Permissions panel — two columns ──────────────────── */

.member-panel-perms[b-4flcnwnnaf] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

/* Left rail — preset cards */
.preset-rail[b-4flcnwnnaf] {
    padding: 1.25rem 1rem;
    border-right: 1px solid var(--m-border);
    background: linear-gradient(180deg, var(--m-surface), var(--m-surface-2));
}

.preset-rail-head[b-4flcnwnnaf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.25rem 0.75rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--m-text-muted);
}

[b-4flcnwnnaf] .preset-rail-head .portal-icon {
    width: 14px;
    height: 14px;
    color: var(--m-brand);
    opacity: 1;
}

.preset-list[b-4flcnwnnaf] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.preset-card[b-4flcnwnnaf] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.625rem 0.625rem;
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.preset-card:hover[b-4flcnwnnaf] {
    border-color: var(--m-border-strong);
    transform: translateY(-1px);
}

.preset-card.is-active[b-4flcnwnnaf] {
    background: linear-gradient(135deg, var(--m-brand-soft), var(--m-surface));
    border-color: var(--m-brand-bright);
    box-shadow:
        0 0 0 1px var(--m-brand-bright),
        0 4px 12px -4px var(--m-brand-glow);
}

.preset-icon[b-4flcnwnnaf] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(20, 50, 30, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

[b-4flcnwnnaf] .preset-icon .portal-icon {
    width: 18px;
    height: 18px;
    opacity: 1;
}

.preset-icon.preset-emerald[b-4flcnwnnaf]  { background: linear-gradient(135deg, #16A34A, #14532D); }
.preset-icon.preset-forest[b-4flcnwnnaf]   { background: linear-gradient(135deg, #14532D, #0F3D22); }
.preset-icon.preset-sage[b-4flcnwnnaf]     { background: linear-gradient(135deg, #4ADE80, #16A34A); }
.preset-icon.preset-mint[b-4flcnwnnaf]     { background: linear-gradient(135deg, #2DD4BF, #0E7C72); }
.preset-icon.preset-amber[b-4flcnwnnaf]    { background: linear-gradient(135deg, #F0C75F, #D4A647); color: #14191A; }
.preset-icon.preset-neutral[b-4flcnwnnaf]  { background: linear-gradient(135deg, #8B968E, #4A554E); }

.preset-text[b-4flcnwnnaf] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.preset-name[b-4flcnwnnaf] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--m-text);
    line-height: 1.25;
}

.preset-desc[b-4flcnwnnaf] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--m-text-soft);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.preset-check[b-4flcnwnnaf] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--m-brand-bright), var(--m-brand));
    color: #FFFFFF;
}

.preset-check svg[b-4flcnwnnaf] { width: 12px; height: 12px; }

/* Right column — custom permissions grid */
.perm-column[b-4flcnwnnaf] {
    padding: 1.25rem 1.5rem;
    min-width: 0;
}

.perm-column-head[b-4flcnwnnaf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 13px;
    font-weight: 700;
    color: var(--m-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

[b-4flcnwnnaf] .perm-column-head .portal-icon {
    width: 16px;
    height: 16px;
    color: var(--m-brand);
    opacity: 1;
}

.perm-column-count[b-4flcnwnnaf] {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--m-brand-soft);
    color: var(--m-brand);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

/* Module filter tabs (the row of pills) */
.perm-group-tabs[b-4flcnwnnaf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--m-border);
}

.perm-group-tab[b-4flcnwnnaf] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.375rem 0.75rem;
    background: var(--m-bg);
    border: 1px solid var(--m-border);
    border-radius: 999px;
    color: var(--m-text-muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

[b-4flcnwnnaf] .perm-group-tab .portal-icon {
    width: 13px;
    height: 13px;
    opacity: 0.85;
}

.perm-group-tab:hover[b-4flcnwnnaf] {
    background: var(--m-surface);
    color: var(--m-text);
    border-color: var(--m-border-strong);
}

.perm-group-tab.has-some[b-4flcnwnnaf] {
    background: color-mix(in srgb, var(--m-brand-soft) 80%, var(--m-surface));
    color: var(--m-brand);
    border-color: color-mix(in srgb, var(--m-brand-bright) 30%, transparent);
}

.perm-group-tab.is-active[b-4flcnwnnaf] {
    background: linear-gradient(135deg, var(--m-brand-bright), var(--m-brand));
    color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(20, 50, 30, 0.18);
}

[b-4flcnwnnaf] .perm-group-tab.is-active .portal-icon {
    opacity: 1;
}

.perm-group-count[b-4flcnwnnaf] {
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
}

.perm-group-tab.is-active .perm-group-count[b-4flcnwnnaf] {
    background: rgba(255, 255, 255, 0.22);
}

.perm-group-desc[b-4flcnwnnaf] {
    margin-bottom: 1rem;
}

.perm-group-desc h3[b-4flcnwnnaf] {
    margin: 0 0 0.25rem;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--m-text);
}

.perm-group-desc p[b-4flcnwnnaf] {
    margin: 0;
    color: var(--m-text-soft);
    font-size: 13.5px;
    line-height: 1.5;
}

/* Permission cards grid */
.perm-grid[b-4flcnwnnaf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.perm-card[b-4flcnwnnaf] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--m-surface);
    border: 1.5px solid var(--m-border);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
    font-family: inherit;
}

.perm-card:hover[b-4flcnwnnaf] {
    border-color: var(--m-border-strong);
    transform: translateY(-1px);
}

.perm-card.is-on[b-4flcnwnnaf] {
    background: linear-gradient(135deg, var(--m-brand-soft), var(--m-surface) 70%);
    border-color: var(--m-brand-bright);
    box-shadow: 0 4px 12px -4px var(--m-brand-glow);
}

.perm-card-check[b-4flcnwnnaf] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid var(--m-border-strong);
    background: var(--m-surface);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background 140ms ease, border-color 140ms ease;
}

.perm-card.is-on .perm-card-check[b-4flcnwnnaf] {
    background: linear-gradient(135deg, var(--m-brand-bright), var(--m-brand));
    border-color: transparent;
    color: #FFFFFF;
}

.perm-card-check svg[b-4flcnwnnaf] {
    width: 14px;
    height: 14px;
}

.perm-card-body[b-4flcnwnnaf] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.perm-card-head[b-4flcnwnnaf] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.perm-card-action[b-4flcnwnnaf] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1.3;
}

.perm-card-action[data-action="view"][b-4flcnwnnaf] {
    background: rgba(56, 102, 65, 0.10);
    color: #14532D;
}

.perm-card-action[data-action="edit"][b-4flcnwnnaf] {
    background: rgba(212, 166, 71, 0.12);
    color: #946D1F;
}

[data-theme="dark"] .perm-card-action[data-action="view"][b-4flcnwnnaf] {
    background: rgba(74, 222, 128, 0.12);
    color: #4ADE80;
}

[data-theme="dark"] .perm-card-action[data-action="edit"][b-4flcnwnnaf] {
    background: rgba(212, 166, 71, 0.16);
    color: #F0C75F;
}

.perm-card-title[b-4flcnwnnaf] {
    font-size: 14px;
    font-weight: 600;
    color: var(--m-text);
}

.perm-card-desc[b-4flcnwnnaf] {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--m-text-soft);
}

/* ─── Footer actions ──────────────────────────────────── */

.member-footer[b-4flcnwnnaf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: 12px;
    position: sticky;
    bottom: 0.75rem;
    box-shadow: 0 1px 2px rgba(20, 50, 30, 0.04),
                0 -2px 12px -4px rgba(20, 50, 30, 0.08);
}

.member-footer-right[b-4flcnwnnaf] {
    display: flex;
    gap: 0.5rem;
}

.member-btn[b-4flcnwnnaf] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 38px;
    padding: 0 1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.member-btn svg[b-4flcnwnnaf], [b-4flcnwnnaf] .member-btn .portal-icon {
    width: 15px;
    height: 15px;
    opacity: 1;
}

.member-btn-ghost[b-4flcnwnnaf] {
    color: var(--m-text-muted);
    border-color: var(--m-border);
    background: var(--m-bg);
}

.member-btn-ghost:hover[b-4flcnwnnaf] {
    background: var(--m-surface);
    border-color: var(--m-border-strong);
}

.member-btn-primary[b-4flcnwnnaf] {
    background: linear-gradient(135deg, var(--m-brand-bright), var(--m-brand));
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(20, 50, 30, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.member-btn-primary:hover[b-4flcnwnnaf] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px var(--m-brand-glow),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.member-btn-danger[b-4flcnwnnaf] {
    color: var(--m-danger);
    border-color: var(--m-danger-soft);
    background: transparent;
}

.member-btn-danger:hover[b-4flcnwnnaf] {
    background: var(--m-danger-soft);
}

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

@media (max-width: 960px) {
    .member-panel-perms[b-4flcnwnnaf] {
        grid-template-columns: 1fr;
    }
    .preset-rail[b-4flcnwnnaf] {
        border-right: none;
        border-bottom: 1px solid var(--m-border);
    }
    .preset-list[b-4flcnwnnaf] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
    .member-form-grid[b-4flcnwnnaf] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .member-header[b-4flcnwnnaf] {
        flex-wrap: wrap;
    }
    .member-footer[b-4flcnwnnaf] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .member-footer-right[b-4flcnwnnaf] {
        flex-direction: column-reverse;
    }
}

.team-empty[b-4flcnwnnaf] {
    padding: 4rem 1rem;
    text-align: center;
    color: var(--m-text-soft);
}

/* ─── Save banners ─────────────────────────────────────── */

.member-banner[b-4flcnwnnaf] {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.45;
}

.member-banner-error[b-4flcnwnnaf] {
    background: rgba(185, 28, 28, 0.06);
    border: 1px solid rgba(185, 28, 28, 0.18);
    color: #B91C1C;
}

.member-banner-error strong[b-4flcnwnnaf] { color: #7F1D1D; }

.member-banner-ok[b-4flcnwnnaf] {
    background: rgba(22, 163, 74, 0.08);
    border: 1px solid rgba(22, 163, 74, 0.24);
    color: #15803D;
}

.team-back-link[b-4flcnwnnaf] {
    color: var(--m-brand);
    text-decoration: none;
    font-weight: 600;
}

.team-back-link:hover[b-4flcnwnnaf] {
    text-decoration: underline;
}
/* /Components/Pages/Auth/Signup.razor.rz.scp.css */
/* Signup wizard — 3-step stepper, plan picker, success card.
   Component-scoped: only applies inside Signup.razor. */

.signup-stepper[b-a9rzhigodg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-2);
    width: 100%;
}

.signup-step[b-a9rzhigodg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.signup-step.is-current[b-a9rzhigodg] {
    border-color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface-2));
    color: var(--text);
}

.signup-step.is-done[b-a9rzhigodg] {
    color: var(--text-secondary);
    background: var(--surface-2);
    border-color: var(--border);
}

.signup-step-number[b-a9rzhigodg] {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
}

.signup-step.is-current .signup-step-number[b-a9rzhigodg] {
    background: var(--brand-primary);
    color: var(--text-on-accent);
    border-color: var(--brand-primary);
}

.signup-step.is-done .signup-step-number[b-a9rzhigodg] {
    background: var(--brand-primary);
    color: var(--text-on-accent);
    border-color: var(--brand-primary);
}

.signup-step.is-done .signup-step-number[b-a9rzhigodg]::before {
    content: "✓";
}

.signup-step.is-done .signup-step-number[b-a9rzhigodg] {
    font-size: 0;
}

.signup-step.is-done .signup-step-number[b-a9rzhigodg]::before {
    font-size: var(--text-xs);
}

.signup-step-label[b-a9rzhigodg] {
    font-size: var(--text-sm);
    font-weight: 500;
}

[b-a9rzhigodg] .card-title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
}

.signup-plan-grid[b-a9rzhigodg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
}

.signup-plan[b-a9rzhigodg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-align: left;
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
    font-family: inherit;
    color: inherit;
}

.signup-plan:hover[b-a9rzhigodg] {
    border-color: var(--border-strong);
    background: var(--surface-hover);
}

.signup-plan.is-selected[b-a9rzhigodg] {
    border-color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface-2));
    box-shadow: 0 0 0 1px var(--brand-primary) inset;
}

.signup-plan-name[b-a9rzhigodg] {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text);
}

.signup-plan-price[b-a9rzhigodg] {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

.signup-plan-price small[b-a9rzhigodg] {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-tertiary);
    margin-left: 2px;
}

.signup-plan-features[b-a9rzhigodg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.signup-plan-features li[b-a9rzhigodg] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.signup-success[b-a9rzhigodg] {
    border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--border));
}

@media (max-width: 640px) {
    .signup-stepper[b-a9rzhigodg] { grid-template-columns: 1fr; }
    .signup-step-label[b-a9rzhigodg] { font-size: var(--text-xs); }
}
/* /Components/Pages/Listings/ListingVaultPage.razor.rz.scp.css */
/* Vault page — file server look + activity timeline. */

.vault-page[b-h9uivkzb2y] { max-width: 1100px; margin: 0 auto; }

/* ─── Stats strip ──────────────────────────────────────────── */
.vault-stats[b-h9uivkzb2y] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    padding: 0;
}

.vault-stat[b-h9uivkzb2y] {
    background: var(--bg-2, #FFFFFF);
    border: 1px solid var(--border, #E2E8F0);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.vault-stat-num[b-h9uivkzb2y] {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.1;
}

.vault-stat-label[b-h9uivkzb2y] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #64748B);
}

/* ─── Folder chips ─────────────────────────────────────────── */
.vault-folder-chips[b-h9uivkzb2y] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.vault-chip[b-h9uivkzb2y] {
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--border, #E2E8F0);
    background: var(--surface, #FFFFFF);
    color: var(--text-secondary, #64748B);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.vault-chip:hover[b-h9uivkzb2y] {
    border-color: var(--border-strong, #CBD5E1);
    color: var(--text);
}

.vault-chip.is-active[b-h9uivkzb2y] {
    background: linear-gradient(135deg, #6366F1, #4F46E5);
    color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 4px 12px -4px rgba(99, 102, 241, 0.45);
}

.vault-chip-count[b-h9uivkzb2y] {
    background: rgba(255, 255, 255, 0.25);
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
}

.vault-chip:not(.is-active) .vault-chip-count[b-h9uivkzb2y] {
    background: var(--surface-2, #F1F5F9);
    color: var(--text-secondary);
}

/* ─── File list ────────────────────────────────────────────── */
.vault-list[b-h9uivkzb2y] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.vault-row[b-h9uivkzb2y] {
    background: var(--bg-2, #FFFFFF);
    border: 1px solid var(--border, #E2E8F0);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.vault-row:hover[b-h9uivkzb2y] {
    border-color: var(--border-strong, #CBD5E1);
    box-shadow: 0 4px 16px -8px rgba(15, 23, 42, 0.10);
}

.vault-row[data-expanded="True"][b-h9uivkzb2y] {
    border-color: var(--accent, #6366F1);
    box-shadow: 0 4px 20px -8px rgba(99, 102, 241, 0.25);
}

.vault-row-main[b-h9uivkzb2y] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    padding: 1rem 1.25rem;
    align-items: flex-start;
}

.vault-row-icon[b-h9uivkzb2y] {
    font-size: 1.6rem;
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    display: grid;
    place-items: center;
    background: var(--surface-2, #F1F5F9);
    flex-shrink: 0;
}

.vault-row-body[b-h9uivkzb2y] { min-width: 0; }

.vault-row-title[b-h9uivkzb2y] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.vault-row-title strong[b-h9uivkzb2y] {
    font-size: 0.98rem;
    color: var(--text);
}

.vault-row-folder[b-h9uivkzb2y] {
    font-size: 0.78rem;
    color: var(--text-secondary, #64748B);
    background: var(--surface-2, #F1F5F9);
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
}

.vault-row-desc[b-h9uivkzb2y] {
    margin: 0.25rem 0;
    font-size: 0.85rem;
    color: var(--text-secondary, #64748B);
    line-height: 1.4;
}

.vault-row-meta[b-h9uivkzb2y] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-tertiary, #94A3B8);
}

.vault-row-activity[b-h9uivkzb2y] { color: var(--text-secondary, #64748B); }

.vault-row-counters[b-h9uivkzb2y] {
    display: flex;
    gap: 0.85rem;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-tertiary, #94A3B8);
}

.vault-row-actions[b-h9uivkzb2y] {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    flex-shrink: 0;
    max-width: 320px;
}

.vault-inline-edit[b-h9uivkzb2y] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.vault-inline-edit input[b-h9uivkzb2y] {
    flex: 1;
    min-width: 12rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.4rem;
    border: 1px solid var(--border-strong, #CBD5E1);
    background: var(--surface, #FFFFFF);
    color: var(--text);
    font-family: inherit;
    font-size: 0.92rem;
}

/* ─── Activity timeline (expanded) ─────────────────────────── */
.vault-activity[b-h9uivkzb2y] {
    border-top: 1px dashed var(--border, #E2E8F0);
    padding: 1rem 1.25rem 1.25rem 1.25rem;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.025), transparent);
    animation: vault-fade-in-b-h9uivkzb2y 240ms ease-out;
}

@keyframes vault-fade-in-b-h9uivkzb2y {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.vault-activity-title[b-h9uivkzb2y] {
    margin: 0 0 0.85rem 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary, #64748B);
}

.vault-timeline[b-h9uivkzb2y] {
    list-style: none;
    margin: 0;
    padding: 0 0 0 0.5rem;
    border-left: 2px solid var(--border, #E2E8F0);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.vault-timeline-item[b-h9uivkzb2y] {
    position: relative;
    padding-left: 1rem;
}

.vault-timeline-dot[b-h9uivkzb2y] {
    position: absolute;
    left: -7px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent, #6366F1);
    border: 2px solid var(--bg-2, #FFFFFF);
    box-shadow: 0 0 0 1px var(--border, #E2E8F0);
}

.vault-timeline-item[data-kind="madeavailable"] .vault-timeline-dot[b-h9uivkzb2y] { background: #22C55E; }
.vault-timeline-item[data-kind="viewed"] .vault-timeline-dot[b-h9uivkzb2y] { background: #38BDF8; }
.vault-timeline-item[data-kind="downloaded"] .vault-timeline-dot[b-h9uivkzb2y] { background: #6366F1; }
.vault-timeline-item[data-kind="shared"] .vault-timeline-dot[b-h9uivkzb2y] { background: #F59E0B; }
.vault-timeline-item[data-kind="deleted"] .vault-timeline-dot[b-h9uivkzb2y] { background: #EF4444; }
.vault-timeline-item[data-kind="renamed"] .vault-timeline-dot[b-h9uivkzb2y],
.vault-timeline-item[data-kind="movedtofolder"] .vault-timeline-dot[b-h9uivkzb2y],
.vault-timeline-item[data-kind="descriptionupdated"] .vault-timeline-dot[b-h9uivkzb2y] { background: #C084FC; }

.vault-timeline-body[b-h9uivkzb2y] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.vault-timeline-kind[b-h9uivkzb2y] {
    margin-left: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #64748B);
    text-transform: capitalize;
}

.vault-timeline-time[b-h9uivkzb2y] {
    font-size: 0.78rem;
    color: var(--text-tertiary, #94A3B8);
}

.vault-timeline-ua[b-h9uivkzb2y] {
    font-size: 0.75rem;
    color: var(--text-tertiary, #94A3B8);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

@media (prefers-reduced-motion: reduce) {
    .vault-activity[b-h9uivkzb2y] { animation: none; }
}
/* /Components/Pages/Rentals/MandateFormPage.razor.rz.scp.css */
/* Paper-style rental application form. */

.ra-page[b-0f13pqqxd1] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: linear-gradient(180deg, #F1F5F9 0%, #E2E8F0 100%);
    min-height: calc(100vh - 4rem);
    padding: 1.5rem 1rem 4rem 1rem;
    margin: -1.5rem -1rem -1.5rem -1rem;
}

.ra-toolbar[b-0f13pqqxd1] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(15, 23, 42, 0.94);
    color: #F8FAFC;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.4);
    margin: 0 auto;
    max-width: 920px;
    width: 100%;
}

.ra-toolbar-left[b-0f13pqqxd1],
.ra-toolbar-right[b-0f13pqqxd1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ra-toolbar a[b-0f13pqqxd1] {
    color: #CBD5E1;
    text-decoration: none;
}

.ra-toolbar a:hover[b-0f13pqqxd1] {
    color: #F8FAFC;
}

.ra-flash[b-0f13pqqxd1] {
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
}

.ra-flash-info[b-0f13pqqxd1] {
    background: #DBEAFE;
    color: #1E3A8A;
    border: 1px solid #BFDBFE;
}

.ra-flash-error[b-0f13pqqxd1] {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FCA5A5;
}

/* The paper — A4-ish, max 920px, centered, deep shadow. */
.ra-paper[b-0f13pqqxd1] {
    background: #FFFFFF;
    color: #0F172A;
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    padding: 3rem 3.5rem;
    border-radius: 0.5rem;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 4px 12px rgba(15, 23, 42, 0.08),
        0 20px 40px -10px rgba(15, 23, 42, 0.15);
    font-family: "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
}

.ra-paper-header[b-0f13pqqxd1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 1.5rem;
}

.ra-agency[b-0f13pqqxd1] {
    font-size: 1rem;
    font-weight: 700;
}

.ra-agency-slug[b-0f13pqqxd1] {
    font-size: 0.75rem;
    color: #64748B;
    margin-top: 0.15rem;
}

.ra-doc-meta[b-0f13pqqxd1] {
    font-size: 0.75rem;
    color: #64748B;
    text-align: right;
}

.ra-doc-meta > div + div[b-0f13pqqxd1] {
    margin-top: 0.2rem;
}

.ra-title[b-0f13pqqxd1] {
    font-size: 1.45rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #1E293B;
    color: #F8FAFC;
    padding: 0.75rem 1rem;
    margin: 0 0 1.5rem 0;
    border-radius: 0.25rem;
}

.ra-premises[b-0f13pqqxd1] {
    margin-bottom: 2rem;
}

.ra-label[b-0f13pqqxd1] {
    font-size: 0.7rem;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
}

.ra-premises-value[b-0f13pqqxd1] {
    font-size: 1rem;
    border-bottom: 1px solid #CBD5E1;
    padding-bottom: 0.4rem;
}

.ra-quote[b-0f13pqqxd1] {
    color: #64748B;
    font-style: italic;
    margin-left: 0.25rem;
}

/* Section header bars — mimic the original form's dark banners. */
.ra-section[b-0f13pqqxd1] {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
}

.ra-section-header[b-0f13pqqxd1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1E293B;
    color: #F8FAFC;
    padding: 0.55rem 0.85rem;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
}

.ra-section-header h2[b-0f13pqqxd1] {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.ra-remove-btn[b-0f13pqqxd1] {
    color: #FCA5A5 !important;
    font-size: 0.75rem;
}

.ra-subhead[b-0f13pqqxd1] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 1rem 0 0.6rem 0;
    border-bottom: 1px dashed #CBD5E1;
    padding-bottom: 0.3rem;
}

/* Grid layouts */
.ra-grid[b-0f13pqqxd1] {
    display: grid;
    gap: 0.85rem 1rem;
    margin-bottom: 0.5rem;
}

.ra-grid-2[b-0f13pqqxd1] { grid-template-columns: 1fr 1fr; }
.ra-grid-3[b-0f13pqqxd1] { grid-template-columns: 1fr 1fr 1fr; }
.ra-grid-4[b-0f13pqqxd1] { grid-template-columns: 1fr 1fr 1fr 1fr; }

@media (max-width: 720px) {
    .ra-grid-2[b-0f13pqqxd1], .ra-grid-3[b-0f13pqqxd1], .ra-grid-4[b-0f13pqqxd1] {
        grid-template-columns: 1fr;
    }
}

/* Form fields — underline-only "document" style. */
.ra-field[b-0f13pqqxd1] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.5rem;
}

.ra-field > span[b-0f13pqqxd1] {
    font-size: 0.7rem;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ra-field input[b-0f13pqqxd1],
.ra-field textarea[b-0f13pqqxd1],
.ra-field select[b-0f13pqqxd1] {
    border: none;
    border-bottom: 1px solid #94A3B8;
    border-radius: 0;
    padding: 0.4rem 0.1rem;
    background: transparent;
    color: #0F172A;
    font-family: inherit;
    font-size: 0.95rem;
    width: 100%;
    transition: border-color 120ms ease;
}

.ra-field input:focus[b-0f13pqqxd1],
.ra-field textarea:focus[b-0f13pqqxd1],
.ra-field select:focus[b-0f13pqqxd1] {
    outline: none;
    border-bottom-color: #0F172A;
    background: #FAFBFC;
}

.ra-field input:disabled[b-0f13pqqxd1],
.ra-field textarea:disabled[b-0f13pqqxd1],
.ra-field select:disabled[b-0f13pqqxd1] {
    color: #475569;
    border-bottom-style: dashed;
    background: transparent;
    cursor: not-allowed;
}

.ra-field input[type="checkbox"][b-0f13pqqxd1] {
    width: auto;
    border-bottom: none;
}

.ra-field textarea[b-0f13pqqxd1] {
    resize: vertical;
    border: 1px solid #CBD5E1;
    border-radius: 0.25rem;
    padding: 0.5rem;
}

/* Document checklist */
.ra-checks[b-0f13pqqxd1] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0.5rem 0 1rem 0;
    padding: 0.5rem 0.75rem;
    background: #F8FAFC;
    border-left: 3px solid #0F172A;
    border-radius: 0.25rem;
}

.ra-check[b-0f13pqqxd1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

/* Fees total bar */
.ra-fees-total[b-0f13pqqxd1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    background: #0F172A;
    color: #F8FAFC;
    border-radius: 0.25rem;
    font-size: 1rem;
}

.ra-fees-total strong[b-0f13pqqxd1] {
    font-size: 1.1rem;
}

/* Consent rows */
.ra-consent[b-0f13pqqxd1] {
    display: flex;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    border: 1px solid #E2E8F0;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    background: #FAFBFC;
    font-size: 0.9rem;
}

.ra-consent input[type="checkbox"][b-0f13pqqxd1] {
    margin-top: 0.2rem;
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: #0F172A;
}

.ra-section-actions[b-0f13pqqxd1] {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.ra-section-actions-split[b-0f13pqqxd1] {
    justify-content: space-between;
}

.ra-add-applicant[b-0f13pqqxd1] {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0;
}

.ra-decision[b-0f13pqqxd1] {
    background: #FEF3C7;
    padding: 1rem 1.25rem;
    border-radius: 0.25rem;
    border-left: 4px solid #F59E0B;
}

.ra-decision .ra-section-header[b-0f13pqqxd1] {
    background: #92400E;
}

/* Print — strip chrome, paper goes edge-to-edge. */
@media print {
    .ra-toolbar[b-0f13pqqxd1],
    .ra-flash[b-0f13pqqxd1],
    .ra-section-actions[b-0f13pqqxd1],
    .ra-add-applicant[b-0f13pqqxd1],
    .ra-remove-btn[b-0f13pqqxd1],
    .portal-sidebar[b-0f13pqqxd1],
    .portal-topbar[b-0f13pqqxd1] { display: none !important; }

    .ra-page[b-0f13pqqxd1] {
        background: none;
        padding: 0;
        margin: 0;
    }

    .ra-paper[b-0f13pqqxd1] {
        box-shadow: none;
        max-width: none;
        margin: 0;
        padding: 1cm 1.5cm;
    }

    .ra-field input[b-0f13pqqxd1],
    .ra-field textarea[b-0f13pqqxd1],
    .ra-field select[b-0f13pqqxd1] {
        color: #000;
        border-bottom-color: #000;
    }
}
/* /Components/Pages/Rentals/RentalApplicationFormPage.razor.rz.scp.css */
/* Paper-style rental application form. */

.ra-page[b-c6qtbway0t] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: linear-gradient(180deg, #F1F5F9 0%, #E2E8F0 100%);
    min-height: calc(100vh - 4rem);
    padding: 1.5rem 1rem 4rem 1rem;
    margin: -1.5rem -1rem -1.5rem -1rem;
}

.ra-toolbar[b-c6qtbway0t] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(15, 23, 42, 0.94);
    color: #F8FAFC;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.4);
    margin: 0 auto;
    max-width: 920px;
    width: 100%;
}

.ra-toolbar-left[b-c6qtbway0t],
.ra-toolbar-right[b-c6qtbway0t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ra-toolbar a[b-c6qtbway0t] {
    color: #CBD5E1;
    text-decoration: none;
}

.ra-toolbar a:hover[b-c6qtbway0t] {
    color: #F8FAFC;
}

.ra-flash[b-c6qtbway0t] {
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
}

.ra-flash-info[b-c6qtbway0t] {
    background: #DBEAFE;
    color: #1E3A8A;
    border: 1px solid #BFDBFE;
}

.ra-flash-error[b-c6qtbway0t] {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FCA5A5;
}

/* The paper — A4-ish, max 920px, centered, deep shadow. */
.ra-paper[b-c6qtbway0t] {
    background: #FFFFFF;
    color: #0F172A;
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    padding: 3rem 3.5rem;
    border-radius: 0.5rem;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 4px 12px rgba(15, 23, 42, 0.08),
        0 20px 40px -10px rgba(15, 23, 42, 0.15);
    font-family: "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
}

.ra-paper-header[b-c6qtbway0t] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 1.5rem;
}

.ra-agency[b-c6qtbway0t] {
    font-size: 1rem;
    font-weight: 700;
}

.ra-agency-slug[b-c6qtbway0t] {
    font-size: 0.75rem;
    color: #64748B;
    margin-top: 0.15rem;
}

.ra-doc-meta[b-c6qtbway0t] {
    font-size: 0.75rem;
    color: #64748B;
    text-align: right;
}

.ra-doc-meta > div + div[b-c6qtbway0t] {
    margin-top: 0.2rem;
}

.ra-title[b-c6qtbway0t] {
    font-size: 1.45rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #1E293B;
    color: #F8FAFC;
    padding: 0.75rem 1rem;
    margin: 0 0 1.5rem 0;
    border-radius: 0.25rem;
}

.ra-premises[b-c6qtbway0t] {
    margin-bottom: 2rem;
}

.ra-label[b-c6qtbway0t] {
    font-size: 0.7rem;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
}

.ra-premises-value[b-c6qtbway0t] {
    font-size: 1rem;
    border-bottom: 1px solid #CBD5E1;
    padding-bottom: 0.4rem;
}

.ra-quote[b-c6qtbway0t] {
    color: #64748B;
    font-style: italic;
    margin-left: 0.25rem;
}

/* Section header bars — mimic the original form's dark banners. */
.ra-section[b-c6qtbway0t] {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
}

.ra-section-header[b-c6qtbway0t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1E293B;
    color: #F8FAFC;
    padding: 0.55rem 0.85rem;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
}

.ra-section-header h2[b-c6qtbway0t] {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.ra-remove-btn[b-c6qtbway0t] {
    color: #FCA5A5 !important;
    font-size: 0.75rem;
}

.ra-subhead[b-c6qtbway0t] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 1rem 0 0.6rem 0;
    border-bottom: 1px dashed #CBD5E1;
    padding-bottom: 0.3rem;
}

/* Grid layouts */
.ra-grid[b-c6qtbway0t] {
    display: grid;
    gap: 0.85rem 1rem;
    margin-bottom: 0.5rem;
}

.ra-grid-2[b-c6qtbway0t] { grid-template-columns: 1fr 1fr; }
.ra-grid-3[b-c6qtbway0t] { grid-template-columns: 1fr 1fr 1fr; }
.ra-grid-4[b-c6qtbway0t] { grid-template-columns: 1fr 1fr 1fr 1fr; }

@media (max-width: 720px) {
    .ra-grid-2[b-c6qtbway0t], .ra-grid-3[b-c6qtbway0t], .ra-grid-4[b-c6qtbway0t] {
        grid-template-columns: 1fr;
    }
}

/* Form fields — underline-only "document" style. */
.ra-field[b-c6qtbway0t] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.5rem;
}

.ra-field > span[b-c6qtbway0t] {
    font-size: 0.7rem;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ra-field input[b-c6qtbway0t],
.ra-field textarea[b-c6qtbway0t],
.ra-field select[b-c6qtbway0t] {
    border: none;
    border-bottom: 1px solid #94A3B8;
    border-radius: 0;
    padding: 0.4rem 0.1rem;
    background: transparent;
    color: #0F172A;
    font-family: inherit;
    font-size: 0.95rem;
    width: 100%;
    transition: border-color 120ms ease;
}

.ra-field input:focus[b-c6qtbway0t],
.ra-field textarea:focus[b-c6qtbway0t],
.ra-field select:focus[b-c6qtbway0t] {
    outline: none;
    border-bottom-color: #0F172A;
    background: #FAFBFC;
}

.ra-field input:disabled[b-c6qtbway0t],
.ra-field textarea:disabled[b-c6qtbway0t],
.ra-field select:disabled[b-c6qtbway0t] {
    color: #475569;
    border-bottom-style: dashed;
    background: transparent;
    cursor: not-allowed;
}

.ra-field input[type="checkbox"][b-c6qtbway0t] {
    width: auto;
    border-bottom: none;
}

.ra-field textarea[b-c6qtbway0t] {
    resize: vertical;
    border: 1px solid #CBD5E1;
    border-radius: 0.25rem;
    padding: 0.5rem;
}

/* Document checklist */
.ra-checks[b-c6qtbway0t] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0.5rem 0 1rem 0;
    padding: 0.5rem 0.75rem;
    background: #F8FAFC;
    border-left: 3px solid #0F172A;
    border-radius: 0.25rem;
}

.ra-check[b-c6qtbway0t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

/* Fees total bar */
.ra-fees-total[b-c6qtbway0t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    background: #0F172A;
    color: #F8FAFC;
    border-radius: 0.25rem;
    font-size: 1rem;
}

.ra-fees-total strong[b-c6qtbway0t] {
    font-size: 1.1rem;
}

/* Consent rows */
.ra-consent[b-c6qtbway0t] {
    display: flex;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    border: 1px solid #E2E8F0;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    background: #FAFBFC;
    font-size: 0.9rem;
}

.ra-consent input[type="checkbox"][b-c6qtbway0t] {
    margin-top: 0.2rem;
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: #0F172A;
}

.ra-section-actions[b-c6qtbway0t] {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.ra-section-actions-split[b-c6qtbway0t] {
    justify-content: space-between;
}

.ra-add-applicant[b-c6qtbway0t] {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0;
}

.ra-decision[b-c6qtbway0t] {
    background: #FEF3C7;
    padding: 1rem 1.25rem;
    border-radius: 0.25rem;
    border-left: 4px solid #F59E0B;
}

.ra-decision .ra-section-header[b-c6qtbway0t] {
    background: #92400E;
}

/* Print — strip chrome, paper goes edge-to-edge. */
@media print {
    .ra-toolbar[b-c6qtbway0t],
    .ra-flash[b-c6qtbway0t],
    .ra-section-actions[b-c6qtbway0t],
    .ra-add-applicant[b-c6qtbway0t],
    .ra-remove-btn[b-c6qtbway0t],
    .portal-sidebar[b-c6qtbway0t],
    .portal-topbar[b-c6qtbway0t] { display: none !important; }

    .ra-page[b-c6qtbway0t] {
        background: none;
        padding: 0;
        margin: 0;
    }

    .ra-paper[b-c6qtbway0t] {
        box-shadow: none;
        max-width: none;
        margin: 0;
        padding: 1cm 1.5cm;
    }

    .ra-field input[b-c6qtbway0t],
    .ra-field textarea[b-c6qtbway0t],
    .ra-field select[b-c6qtbway0t] {
        color: #000;
        border-bottom-color: #000;
    }
}
/* /Components/Shared/AsetrixLogo.razor.rz.scp.css */
/* ============================================================
   Asetrix logo (Arch) — scoped styles.

   Mark uses stroke="currentColor"; this rule sets the colour
   on the parent .asetrix-logo so the SVG path inherits. On
   dark surfaces or with [data-on-dark] the lockup flips to
   cream for legibility.
   ============================================================ */

.asetrix-logo[b-30ejgm94w4] {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    color: var(--asetrix-brand, #14532D);
    line-height: 1;
    font-family: "Outfit", "Inter", system-ui, -apple-system, sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    --asetrix-logo-size: 2em;
}

.asetrix-mark[b-30ejgm94w4] {
    width: var(--asetrix-logo-size);
    height: var(--asetrix-logo-size);
    flex: 0 0 auto;
    display: block;
}

.asetrix-wordmark[b-30ejgm94w4] {
    font-size: 1.28em;
    color: inherit;
    /* Outfit's leading is comfortable; nudge baseline by 1px so
       the bottom of the wordmark optically aligns with the
       baseline of the arch's legs. */
    line-height: 0.95;
}

/* Dark surface flip — cream instead of forest green.
   The `data-on-dark` attribute is allowed on either the logo itself
   OR an ancestor (e.g. the auth-hero's brand <a> wraps the logo and
   carries the attribute on its own element). Without the ancestor
   selector the lockup would render in deep forest green on top of
   the deep forest hero, vanishing completely. */
[data-theme="dark"] .asetrix-logo[b-30ejgm94w4],
.asetrix-logo[data-on-dark][b-30ejgm94w4],
[data-on-dark] .asetrix-logo[b-30ejgm94w4] {
    color: #F0F4F1;
}

/* Hover lift — only inside a clickable element */
a:hover > .asetrix-logo .asetrix-mark[b-30ejgm94w4],
button:hover > .asetrix-logo .asetrix-mark[b-30ejgm94w4],
.asetrix-logo:hover .asetrix-mark[b-30ejgm94w4] {
    transform: translateY(-1px);
    transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
    a:hover > .asetrix-logo .asetrix-mark[b-30ejgm94w4],
    .asetrix-logo:hover .asetrix-mark[b-30ejgm94w4] {
        transform: none;
    }
}
/* /Components/Shared/CommandPalette.razor.rz.scp.css */
/* CommandPalette — scoped CSS.

   Uses the Asetrix Forest palette (matches the auth pages, sidebar,
   topbar) instead of the generic indigo it shipped with. Designed
   to feel like Linear / Raycast / GitHub palette — fast, focused,
   no chrome you don't need. */

/* ───── Backdrop ────────────────────────────────────────────── */

.cmdk-backdrop[b-6s45epg0q0] {
    position: fixed;
    inset: 0;
    background: rgba(8, 17, 12, 0.55);
    backdrop-filter: blur(6px) saturate(150%);
    -webkit-backdrop-filter: blur(6px) saturate(150%);
    z-index: 9998;
    animation: cmdk-fade-b-6s45epg0q0 180ms ease-out;
}

@keyframes cmdk-fade-b-6s45epg0q0 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ───── Shell ──────────────────────────────────────────────── */

.cmdk-shell[b-6s45epg0q0] {
    position: fixed;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(640px, calc(100vw - 2rem));
    max-height: 70vh;
    z-index: 9999;

    background: #FFFFFF;
    color: #14191A;
    border: 1px solid rgba(20, 83, 45, 0.10);
    border-radius: 14px;
    overflow: hidden;

    /* Layered shadows — soft inner highlight + deep drop. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(20, 50, 30, 0.04),
        0 24px 56px -12px rgba(20, 50, 30, 0.30),
        0 8px 20px -8px rgba(20, 50, 30, 0.18);

    display: flex;
    flex-direction: column;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    animation: cmdk-rise-b-6s45epg0q0 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .cmdk-shell[b-6s45epg0q0] {
    background: #131A14;
    color: #F0F4F1;
    border-color: rgba(74, 222, 128, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(74, 222, 128, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.30),
        0 24px 56px -12px rgba(0, 0, 0, 0.65),
        0 8px 20px -8px rgba(0, 0, 0, 0.40);
}

@keyframes cmdk-rise-b-6s45epg0q0 {
    from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0)   scale(1);     }
}

/* ───── Input row ─────────────────────────────────────────── */

.cmdk-input-row[b-6s45epg0q0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid rgba(20, 83, 45, 0.08);
    background: #FAFAF7;
}

[data-theme="dark"] .cmdk-input-row[b-6s45epg0q0] {
    background: #0D130F;
    border-bottom-color: rgba(74, 222, 128, 0.10);
}

/* Wrap the PortalIcon child so we can size + colour it consistently. */
[b-6s45epg0q0] .cmdk-search-icon {
    display: inline-flex;
    align-items: center;
    color: #8B968E;
    flex-shrink: 0;
}

[b-6s45epg0q0] .cmdk-search-icon .portal-icon {
    width: 18px;
    height: 18px;
    opacity: 1;
}

[data-theme="dark"][b-6s45epg0q0]  .cmdk-search-icon {
    color: #6B8B7F;
}

.cmdk-input[b-6s45epg0q0] {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    outline: none;
    padding: 0;
}

.cmdk-input[b-6s45epg0q0]::placeholder {
    color: #8B968E;
    font-weight: 400;
}

[data-theme="dark"] .cmdk-input[b-6s45epg0q0]::placeholder {
    color: #6B8B7F;
}

/* ───── Keyboard hint badges ──────────────────────────────── */

.cmdk-kbd[b-6s45epg0q0] {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 0.375rem;
    background: #FFFFFF;
    color: #4A554E;
    border: 1px solid rgba(20, 83, 45, 0.14);
    border-radius: 5px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 1px 0 rgba(20, 83, 45, 0.08);
}

.cmdk-kbd-mono[b-6s45epg0q0] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
}

.cmdk-kbd-esc[b-6s45epg0q0] {
    background: rgba(20, 83, 45, 0.04);
}

[data-theme="dark"] .cmdk-kbd[b-6s45epg0q0] {
    background: #1B221D;
    color: #BBD9C9;
    border-color: rgba(74, 222, 128, 0.16);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.30);
}

[data-theme="dark"] .cmdk-kbd-esc[b-6s45epg0q0] {
    background: rgba(74, 222, 128, 0.06);
}

/* ───── Item list ─────────────────────────────────────────── */

.cmdk-list[b-6s45epg0q0] {
    overflow-y: auto;
    padding: 0.375rem;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(20, 83, 45, 0.16) transparent;
}

.cmdk-list[b-6s45epg0q0]::-webkit-scrollbar {
    width: 6px;
}

.cmdk-list[b-6s45epg0q0]::-webkit-scrollbar-thumb {
    background: rgba(20, 83, 45, 0.16);
    border-radius: 3px;
}

.cmdk-list[b-6s45epg0q0]::-webkit-scrollbar-track {
    background: transparent;
}

/* Group heading — small caps, emerald-tinted. */
.cmdk-group[b-6s45epg0q0] {
    padding: 0.875rem 0.875rem 0.375rem;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #14532D;
    margin: 0;
}

.cmdk-group:first-child[b-6s45epg0q0] {
    padding-top: 0.625rem;
}

[data-theme="dark"] .cmdk-group[b-6s45epg0q0] {
    color: #4ADE80;
}

/* Row */
.cmdk-item[b-6s45epg0q0] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: none;
    background: transparent;
    color: #14191A;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    transition: background 100ms ease;
    position: relative;
}

[data-theme="dark"] .cmdk-item[b-6s45epg0q0] {
    color: #F0F4F1;
}

/* Subtle hover (for mouse users who haven't yet keyboard-selected). */
.cmdk-item:hover:not(.is-selected)[b-6s45epg0q0] {
    background: rgba(20, 83, 45, 0.04);
}

[data-theme="dark"] .cmdk-item:hover:not(.is-selected)[b-6s45epg0q0] {
    background: rgba(74, 222, 128, 0.06);
}

/* Selected (keyboard or mouse) — emerald glow + left accent bar. */
.cmdk-item.is-selected[b-6s45epg0q0] {
    background: rgba(22, 163, 74, 0.10);
}

[data-theme="dark"] .cmdk-item.is-selected[b-6s45epg0q0] {
    background: rgba(74, 222, 128, 0.12);
}

.cmdk-item.is-selected[b-6s45epg0q0]::before {
    content: "";
    position: absolute;
    left: -0.125rem;
    top: 25%;
    bottom: 25%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #16A34A, #14532D);
}

/* Icon container — soft emerald-tinted background. */
[b-6s45epg0q0] .cmdk-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(20, 83, 45, 0.06);
    color: #14532D;
    flex-shrink: 0;
    transition: background 100ms ease, color 100ms ease;
}

[data-theme="dark"][b-6s45epg0q0]  .cmdk-icon {
    background: rgba(74, 222, 128, 0.08);
    color: #4ADE80;
}

[b-6s45epg0q0] .cmdk-icon .portal-icon {
    width: 16px;
    height: 16px;
    opacity: 1;
}

/* Selected item — icon flips to filled emerald. */
.cmdk-item.is-selected[b-6s45epg0q0]  .cmdk-icon {
    background: linear-gradient(135deg, #16A34A, #14532D);
    color: #FFFFFF;
}

[data-theme="dark"] .cmdk-item.is-selected[b-6s45epg0q0]  .cmdk-icon {
    background: linear-gradient(135deg, #4ADE80, #16A34A);
    color: #0D130F;
}

.cmdk-title[b-6s45epg0q0] {
    font-weight: 500;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmdk-item.is-selected .cmdk-title[b-6s45epg0q0] {
    font-weight: 600;
}

/* The "press enter" indicator — small arrow icon shown on selected
   row, hidden on others. */
.cmdk-enter[b-6s45epg0q0] {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: #FFFFFF;
    background: #14532D;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 140ms ease, transform 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cmdk-item.is-selected .cmdk-enter[b-6s45epg0q0] {
    opacity: 1;
    transform: translateX(0);
}

[data-theme="dark"] .cmdk-enter[b-6s45epg0q0] {
    background: #16A34A;
    color: #0D130F;
}

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

.cmdk-empty[b-6s45epg0q0] {
    padding: 2.5rem 1rem 2.25rem;
    text-align: center;
}

[b-6s45epg0q0] .cmdk-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 0.875rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, rgba(22, 163, 74, 0.10) 0%, transparent 70%);
    color: #16A34A;
}

[b-6s45epg0q0] .cmdk-empty-icon .portal-icon {
    width: 24px;
    height: 24px;
    opacity: 1;
}

.cmdk-empty-title[b-6s45epg0q0] {
    margin: 0 0 0.25rem;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #14191A;
    letter-spacing: -0.01em;
}

.cmdk-empty-hint[b-6s45epg0q0] {
    margin: 0;
    font-size: 13px;
    color: #8B968E;
    font-weight: 500;
}

[data-theme="dark"] .cmdk-empty-title[b-6s45epg0q0] {
    color: #F0F4F1;
}

[data-theme="dark"] .cmdk-empty-hint[b-6s45epg0q0] {
    color: #6B8B7F;
}

/* ───── Footer hint strip ─────────────────────────────────── */

.cmdk-foot[b-6s45epg0q0] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.625rem 1.125rem;
    border-top: 1px solid rgba(20, 83, 45, 0.08);
    background: #FAFAF7;
    font-size: 12px;
}

[data-theme="dark"] .cmdk-foot[b-6s45epg0q0] {
    background: #0D130F;
    border-top-color: rgba(74, 222, 128, 0.10);
}

.cmdk-foot-group[b-6s45epg0q0] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.cmdk-foot-label[b-6s45epg0q0] {
    color: #4A554E;
    font-weight: 500;
}

[data-theme="dark"] .cmdk-foot-label[b-6s45epg0q0] {
    color: #BBD9C9;
}

/* ───── Motion respect ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .cmdk-backdrop[b-6s45epg0q0],
    .cmdk-shell[b-6s45epg0q0] {
        animation: none;
    }
    .cmdk-item[b-6s45epg0q0],
    .cmdk-enter[b-6s45epg0q0],
    [b-6s45epg0q0] .cmdk-icon {
        transition: none;
    }
}
/* /Components/Shared/ConfirmModal.razor.rz.scp.css */
.confirm-backdrop[b-mlbo8cmc75] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 9998;
    animation: confirm-fade-b-mlbo8cmc75 200ms ease-out;
}

.confirm-modal[b-mlbo8cmc75] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    outline: none;
}

.confirm-modal-body[b-mlbo8cmc75] {
    width: min(440px, 100%);
    background: var(--bg-2, #FFFFFF);
    color: var(--text, #0F172A);
    border-radius: 0.85rem;
    padding: 1.75rem 1.75rem 1.5rem;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.10),
        0 24px 60px -16px rgba(15, 23, 42, 0.40);
    animation: confirm-rise-b-mlbo8cmc75 240ms cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
}

@keyframes confirm-fade-b-mlbo8cmc75 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes confirm-rise-b-mlbo8cmc75 {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.confirm-modal-icon[b-mlbo8cmc75] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #FFFFFF;
    background: linear-gradient(135deg, #6366F1, #4F46E5);
    margin-bottom: 0.5rem;
}

.confirm-modal-body[data-destructive="true"] .confirm-modal-icon[b-mlbo8cmc75] {
    background: linear-gradient(135deg, #EF4444, #B91C1C);
}

.confirm-modal-title[b-mlbo8cmc75] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.confirm-modal-msg[b-mlbo8cmc75] {
    margin: 0;
    line-height: 1.5;
    color: var(--text-secondary, #475569);
}

.confirm-modal-actions[b-mlbo8cmc75] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    width: 100%;
    margin-top: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .confirm-backdrop[b-mlbo8cmc75], .confirm-modal-body[b-mlbo8cmc75] { animation: none; }
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
.empty-state[b-ysulrxrgz7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: 3rem 2rem;
    background: var(--bg-2, #FFFFFF);
    border: 1px dashed var(--border, #E2E8F0);
    border-radius: 0.75rem;
    color: var(--text-secondary, #475569);
}

.empty-state-icon[b-ysulrxrgz7] {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(34, 211, 238, 0.08));
    color: var(--accent, #6366F1);
    margin-bottom: 0.25rem;
    font-size: 1.8rem;
    animation: empty-pop-b-ysulrxrgz7 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes empty-pop-b-ysulrxrgz7 {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

[data-theme="dark"] .empty-state-icon[b-ysulrxrgz7] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(34, 211, 238, 0.14));
}

.empty-state-title[b-ysulrxrgz7] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text, #0F172A);
}

.empty-state-desc[b-ysulrxrgz7] {
    margin: 0;
    max-width: 44ch;
    line-height: 1.55;
    font-size: 0.94rem;
}

.empty-state-actions[b-ysulrxrgz7] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .empty-state-icon[b-ysulrxrgz7] { animation: none; }
}
/* /Components/Shared/NotificationBell.razor.rz.scp.css */
/* NotificationBell — scoped CSS for the dropdown popover.
   All elements with these classes are rendered directly by
   NotificationBell.razor, so plain class selectors work — no
   ::deep needed except for nested child-component renders. */

.portal-bell[b-i46r2u0vtl] {
    position: relative;
    display: inline-flex;
}

/* ───── Popover panel ──────────────────────────────────────── */

.portal-bell-dropdown[b-i46r2u0vtl] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 22rem;
    max-height: 28rem;

    display: flex;
    flex-direction: column;

    background: #FFFFFF;
    border: 1px solid rgba(20, 83, 45, 0.10);
    border-radius: 12px;
    box-shadow:
        0 1px 2px rgba(20, 50, 30, 0.04),
        0 12px 32px -8px rgba(20, 50, 30, 0.18),
        0 4px 12px -4px rgba(20, 50, 30, 0.10);

    overflow: hidden;
    z-index: 1000;
    padding: 0;
    animation: portal-bell-pop-b-i46r2u0vtl 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes portal-bell-pop-b-i46r2u0vtl {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)     scale(1);    }
}

/* Header strip — labels the popover + holds the "Mark all read" btn */
.portal-bell-header[b-i46r2u0vtl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid rgba(20, 83, 45, 0.08);
    background: #FAFAF7;
    flex-shrink: 0;
}

/* The .t-eyebrow span is rendered directly by NotificationBell.razor
   so it gets the scope attr automatically — no ::deep required. */
.portal-bell-header .t-eyebrow[b-i46r2u0vtl] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4A554E;
    margin: 0;
}

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

.portal-bell-empty[b-i46r2u0vtl] {
    padding: 2rem 1rem;
    text-align: center;
    color: #4A554E;
    font-size: 13.5px;
    font-weight: 500;
    margin: 0;
    background: #FFFFFF;
}

/* Decorative emerald checkmark above the "All caught up" message. */
.portal-bell-empty[b-i46r2u0vtl]::before {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 0.5rem;
    border-radius: 999px;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") no-repeat center,
        radial-gradient(circle at center, rgba(22, 163, 74, 0.12) 0%, transparent 70%);
    background-size: 24px 24px, contain;
}

/* ───── Item list ──────────────────────────────────────────── */

.portal-bell-list[b-i46r2u0vtl] {
    list-style: none;
    padding: 0.375rem;
    margin: 0;
    overflow-y: auto;
    flex: 1;
    background: #FFFFFF;
    scrollbar-width: thin;
}

.portal-bell-list[b-i46r2u0vtl]::-webkit-scrollbar {
    width: 6px;
}

.portal-bell-list[b-i46r2u0vtl]::-webkit-scrollbar-thumb {
    background: rgba(20, 83, 45, 0.16);
    border-radius: 3px;
}

.portal-bell-list[b-i46r2u0vtl]::-webkit-scrollbar-track {
    background: transparent;
}

.portal-bell-item[b-i46r2u0vtl] {
    padding: 0.625rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 140ms ease;
    position: relative;
}

.portal-bell-item:hover[b-i46r2u0vtl] {
    background: rgba(20, 83, 45, 0.04);
}

.portal-bell-item + .portal-bell-item[b-i46r2u0vtl] {
    margin-top: 1px;
}

/* Unread — emerald-tinted bg + a dot indicator on the left edge. */
.portal-bell-item[data-unread="true"][b-i46r2u0vtl] {
    background: rgba(22, 163, 74, 0.06);
    padding-left: 1.125rem;
}

.portal-bell-item[data-unread="true"][b-i46r2u0vtl]::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #16A34A;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
}

.portal-bell-link[b-i46r2u0vtl] {
    color: inherit;
    text-decoration: none;
    display: block;
}

/* Typography inside items — .t-body / .t-tiny are rendered inside
   the <Stack> component, so they need ::deep to escape the scope
   that Blazor applies. */
[b-i46r2u0vtl] .portal-bell-item .t-body {
    font-size: 13.5px;
    font-weight: 600;
    color: #14191A;
    line-height: 1.35;
    display: block;
}

[b-i46r2u0vtl] .portal-bell-item .t-tiny {
    font-size: 12px;
    line-height: 1.4;
    display: block;
}

[b-i46r2u0vtl] .portal-bell-item .t-tertiary {
    color: #8B968E;
}

/* ───── Dark theme — only override colours, not layout ────── */

[data-theme="dark"] .portal-bell-dropdown[b-i46r2u0vtl] {
    background: #131A14;
    border-color: rgba(74, 222, 128, 0.12);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.30),
        0 12px 32px -8px rgba(0, 0, 0, 0.55),
        0 4px 12px -4px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .portal-bell-header[b-i46r2u0vtl] {
    border-bottom-color: rgba(74, 222, 128, 0.10);
    background: #0D130F;
}

[data-theme="dark"] .portal-bell-header .t-eyebrow[b-i46r2u0vtl] {
    color: #BBD9C9;
}

[data-theme="dark"] .portal-bell-empty[b-i46r2u0vtl] {
    color: #BBD9C9;
    background: #131A14;
}

[data-theme="dark"] .portal-bell-list[b-i46r2u0vtl] {
    background: #131A14;
}

[data-theme="dark"] .portal-bell-item:hover[b-i46r2u0vtl] {
    background: rgba(74, 222, 128, 0.06);
}

[data-theme="dark"] .portal-bell-item[data-unread="true"][b-i46r2u0vtl] {
    background: rgba(74, 222, 128, 0.08);
}

[data-theme="dark"][b-i46r2u0vtl]  .portal-bell-item .t-body {
    color: #F0F4F1;
}

[data-theme="dark"][b-i46r2u0vtl]  .portal-bell-item .t-tertiary {
    color: #6B8B7F;
}
/* /Components/Shared/Skeleton.razor.rz.scp.css */
.skeleton-wrap[b-ip56p05lml] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.skeleton[b-ip56p05lml] {
    display: inline-block;
    background: linear-gradient(
        90deg,
        var(--surface-2, #F1F5F9) 0%,
        var(--surface-hover, rgba(15, 23, 42, 0.05)) 50%,
        var(--surface-2, #F1F5F9) 100%
    );
    background-size: 200% 100%;
    border-radius: 6px;
    animation: skeleton-shimmer-b-ip56p05lml 1.6s linear infinite;
}

[data-theme="dark"] .skeleton[b-ip56p05lml] {
    background: linear-gradient(
        90deg,
        rgba(248, 250, 252, 0.05) 0%,
        rgba(248, 250, 252, 0.10) 50%,
        rgba(248, 250, 252, 0.05) 100%
    );
    background-size: 200% 100%;
}

@keyframes skeleton-shimmer-b-ip56p05lml {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-line[b-ip56p05lml] {
    height: 12px;
    border-radius: 6px;
}

.skeleton-w-title[b-ip56p05lml] { width: 60%; }
.skeleton-w-sub[b-ip56p05lml]   { width: 35%; height: 10px; }
.skeleton-w-third[b-ip56p05lml] { width: 80%; }
.skeleton-w-stat-num[b-ip56p05lml]   { width: 50%; height: 24px; }
.skeleton-w-stat-label[b-ip56p05lml] { width: 30%; height: 10px; }

.skeleton-row[b-ip56p05lml] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 1.25rem;
    background: var(--bg-2, #FFFFFF);
    border: 1px solid var(--border, #E2E8F0);
    border-radius: 0.5rem;
}

.skeleton-card[b-ip56p05lml] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.5rem;
    background: var(--bg-2, #FFFFFF);
    border: 1px solid var(--border, #E2E8F0);
    border-radius: 0.75rem;
    min-height: 140px;
}

.skeleton-stat[b-ip56p05lml] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 1.25rem;
    background: var(--bg-2, #FFFFFF);
    border: 1px solid var(--border, #E2E8F0);
    border-radius: 0.75rem;
}

.skeleton-avatar[b-ip56p05lml] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

[b-ip56p05lml] .visually-hidden,
.visually-hidden[b-ip56p05lml] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .skeleton[b-ip56p05lml] { animation: none; }
}
/* /Components/Shared/ToastContainer.razor.rz.scp.css */
.toast-stack[b-4wvnt6byyc] {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    max-width: min(380px, calc(100vw - 2rem));
    pointer-events: none;
}

.toast[b-4wvnt6byyc] {
    pointer-events: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border-radius: 0.6rem;
    background: var(--surface, #FFFFFF);
    color: var(--text, #0F172A);
    border: 1px solid var(--border, #E2E8F0);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        0 10px 28px -8px rgba(15, 23, 42, 0.22);
    font-size: 0.9rem;
    line-height: 1.4;
    animation: toast-in-b-4wvnt6byyc 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes toast-in-b-4wvnt6byyc {
    from { opacity: 0; transform: translateX(20px) scale(0.96); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

.toast-icon[b-4wvnt6byyc] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.78rem;
    margin-top: 1px;
    flex-shrink: 0;
}

.toast-msg[b-4wvnt6byyc] {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.toast-close[b-4wvnt6byyc] {
    background: transparent;
    border: none;
    color: var(--text-secondary, #64748B);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 140ms ease, color 140ms ease;
    margin-top: -2px;
}

.toast-close:hover[b-4wvnt6byyc] {
    background: var(--surface-hover, rgba(15, 23, 42, 0.06));
    color: var(--text, #0F172A);
}

.toast.tone-success[b-4wvnt6byyc] { border-left: 3px solid #16A34A; }
.toast.tone-success .toast-icon[b-4wvnt6byyc] { background: #16A34A; }

.toast.tone-info[b-4wvnt6byyc] { border-left: 3px solid #2563EB; }
.toast.tone-info .toast-icon[b-4wvnt6byyc] { background: #2563EB; }

.toast.tone-warning[b-4wvnt6byyc] { border-left: 3px solid #F59E0B; }
.toast.tone-warning .toast-icon[b-4wvnt6byyc] { background: #F59E0B; }

.toast.tone-error[b-4wvnt6byyc] { border-left: 3px solid #DC2626; }
.toast.tone-error .toast-icon[b-4wvnt6byyc] { background: #DC2626; }

[data-theme="dark"] .toast[b-4wvnt6byyc] {
    background: #1E293B;
    color: #F8FAFC;
    border-color: rgba(248, 250, 252, 0.12);
}

[data-theme="dark"] .toast-close[b-4wvnt6byyc] {
    color: rgba(248, 250, 252, 0.65);
}

[data-theme="dark"] .toast-close:hover[b-4wvnt6byyc] {
    background: rgba(248, 250, 252, 0.06);
    color: #F8FAFC;
}

@media (prefers-reduced-motion: reduce) {
    .toast[b-4wvnt6byyc] { animation: none; }
}