/* /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;
    /* Always-white text — the panel is fixed dark in both themes (see the
       --auth-hero-* tokens), so text must NOT follow --text (which would go
       dark in light mode and vanish against this dark field). */
    color: var(--white);
    isolation: isolate;
    /* Deep editorial teal — bright-cyan glow zenith to near-black, no
       horizon line. Reads as "premium dark" before the mesh blobs layer
       over. Uses the theme-independent --auth-hero-* tokens so the light
       theme keeps this exact dark treatment rather than inverting to white
       (which previously washed the white hero copy out to invisible). */
    background:
        radial-gradient(at 22% 0%, var(--auth-hero-glow-a) 0%, transparent 55%),
        radial-gradient(at 78% 100%, var(--auth-hero-glow-b) 0%, transparent 50%),
        linear-gradient(180deg, var(--auth-hero-base) 0%, var(--auth-hero-base) 60%, var(--auth-hero-base) 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, var(--accent-bright) 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, var(--accent) 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, var(--gold) 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(var(--glass-rgb),  0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--glass-rgb),  0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at center, rgba(var(--shadow-rgb),  0.7) 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at center, rgba(var(--shadow-rgb),  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(var(--glass-rgb),  0.06);
    border: 1px solid rgba(var(--glass-rgb),  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(var(--glass-rgb),  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: var(--text);
}

.auth-hero-title-accent[b-lujpavguyl] {
    /* Bright cyan shimmer — fixed (theme-independent) so it stays legible on
       the always-dark hero in both themes. Previously ended on gold, whose
       teal→gold interpolation muddied the middle letters to olive-GREEN —
       the exact "still seeing green" the brand switch was meant to kill. */
    background: linear-gradient(110deg, var(--auth-hero-glow-b) 0%, var(--auth-hero-glow-a) 50%, var(--accent-bright) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}

.auth-hero-lede[b-lujpavguyl] {
    color: rgba(var(--glass-rgb),  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(var(--glass-rgb),  0.05);
    border: 1px solid rgba(var(--glass-rgb),  0.1);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(var(--glass-rgb),  0.88);
    letter-spacing: -0.005em;
    box-shadow: inset 0 1px 0 rgba(var(--glass-rgb),  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(var(--glass-rgb),  0.08);
    border-color: rgba(var(--glass-rgb),  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, var(--accent) 0%, var(--accent-bright) 100%);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb),  0.18);
    flex: 0 0 auto;
}

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

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

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

.auth-hero-trust[b-lujpavguyl] {
    font-size: 0.78rem;
    color: rgba(var(--glass-rgb),  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: var(--surface-2);
    color: var(--auth-card-fg, var(--text));
    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(var(--accent-bright-rgb),  0.07), transparent 55%),
        radial-gradient(ellipse at -10% 80%, rgba(var(--gold-rgb),  0.06), transparent 60%);
}

[data-theme="dark"] .auth-pane[b-lujpavguyl] {
    /* Deep teal near-black — never pure black (var(--black) raises eye strain
       and causes OLED ghosting during long sessions). */
    background: var(--bg);
}
[data-theme="dark"] .auth-pane[b-lujpavguyl]::before {
    background:
        radial-gradient(ellipse at 70% -10%, rgba(var(--accent-bright-rgb),  0.18), transparent 55%),
        radial-gradient(ellipse at -10% 80%, rgba(var(--gold-rgb),  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, var(--surface-2)) 92%, transparent);
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        border-bottom: 1px solid var(--border-subtle, rgba(var(--shadow-rgb),  0.08));
    }
    .auth-pane-top[b-lujpavguyl] {
        background: color-mix(in srgb, var(--surface-2) 92%, transparent);
        border-bottom-color: rgba(var(--accent-rgb),  0.10);
    }
    [data-theme="dark"] .auth-pane-top[b-lujpavguyl] {
        background: color-mix(in srgb, var(--bg) 90%, transparent);
        border-bottom-color: rgba(var(--accent-rgb),  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, var(--text-secondary));
    font-size: 0.83rem;
}

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

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

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

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

.auth-pane-foot-meta[b-lujpavguyl] {
    color: var(--text-tertiary, var(--text-tertiary));
    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, var(--text)); 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: var(--danger-bright);
    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:         var(--accent);   /* deep emerald (trust)            */
    --portal-brand-bright:  var(--accent-bright);   /* bright emerald (action)         */
    --portal-brand-glow:    rgba(var(--accent-bright-rgb),  0.12);
    --portal-brand-soft:    rgba(var(--accent-rgb),  0.08);
    --portal-gold:          var(--gold);   /* 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:            var(--surface-2);
    --portal-surface:       var(--white);
    --portal-surface-2:     var(--surface-2);
    --portal-hover:         rgba(var(--accent-rgb),  0.04);
    --portal-border:        rgba(var(--accent-rgb),  0.08);
    --portal-border-strong: rgba(var(--accent-rgb),  0.14);

    --portal-text:          var(--text);
    --portal-text-muted:    var(--text-secondary);
    --portal-text-soft:     var(--text-tertiary);

    --portal-shadow-soft:   0 1px 2px rgba(var(--shadow-rgb),  0.04);
    --portal-shadow-card:   0 1px 2px rgba(var(--shadow-rgb),  0.04),
                            0 8px 24px -12px rgba(var(--shadow-rgb),  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:            var(--bg);
    --portal-surface:       var(--bg);
    --portal-surface-2:     var(--surface);
    --portal-hover:         rgba(var(--accent-rgb),  0.06);
    --portal-border:        rgba(var(--accent-rgb),  0.10);
    --portal-border-strong: rgba(var(--accent-rgb),  0.18);

    --portal-brand:         var(--accent-bright);
    --portal-brand-bright:  var(--accent);
    --portal-brand-glow:    rgba(var(--accent-rgb),  0.14);
    --portal-brand-soft:    rgba(var(--accent-rgb),  0.06);

    --portal-text:          var(--text);
    --portal-text-muted:    var(--text-secondary);
    --portal-text-soft:     var(--text-tertiary);

    --portal-shadow-soft:   0 1px 2px rgba(var(--shadow-rgb),  0.30);
    --portal-shadow-card:   0 1px 2px rgba(var(--shadow-rgb),  0.30),
                            0 8px 24px -12px rgba(var(--shadow-rgb),  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: var(--white);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.20),
                inset 0 1px 0 rgba(var(--glass-rgb),  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);
    /* Deliberately not sticky — the header scrolls away with the page
       content; only the breadcrumb strip below stays pinned. */
    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: var(--white);
    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);
    box-shadow: var(--portal-shadow-soft);
    /* Pinned to the top: the header above is not sticky, so once it
       scrolls off the breadcrumb becomes the page's top edge. */
    position: sticky;
    top: 0;
    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: var(--danger);
    color: white;
    display: none;
    align-items: center;
    gap: 0.75rem;
    z-index: 1000;
    font-size: 13px;
    box-shadow: 0 -4px 12px rgba(var(--shadow-rgb),  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[b-s0avrilodp] {
    /* Content-area scale token — read by pages (e.g. the listing wizard
       + editor) so their major text grows / shrinks with the sidebar's
       Aa cycle. Defaults to 1; data-text-size overrides per state. */
    --portal-content-scale: 1;
}

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

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

/* ──────────────────────────────────────────────────────────────
   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(var(--shadow-rgb),  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(var(--shadow-rgb),  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(var(--shadow-rgb),  0.18),
                0 2px 6px -2px rgba(var(--shadow-rgb),  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(var(--shadow-rgb),  0.55),
                0 2px 6px -2px rgba(var(--shadow-rgb),  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/CompanyDetailsPage.razor.rz.scp.css */
/* Company details / configuration — mirrors the listings editor's
   self-contained forest-green design system (header card, tab strip,
   panels, green form fields, sticky save footer). */

.cmp-shell[b-yni1wmyafs] {
    --cmp-brand:        var(--accent);
    --cmp-brand-bright: var(--accent-bright);
    --cmp-brand-deep:   var(--accent);
    --cmp-bg:           var(--surface-2);
    --cmp-surface:      var(--white);
    --cmp-surface-2:    var(--surface-2);
    --cmp-border:       rgba(var(--accent-bright-rgb),  0.12);
    --cmp-border-strong:rgba(var(--accent-bright-rgb),  0.22);
    --cmp-text:         var(--text);
    --cmp-text-muted:   var(--text-secondary);
    --cmp-text-soft:    var(--text-tertiary);
    --cmp-danger:       var(--danger);
    --cmp-ok:           var(--accent);

    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding-bottom: 1rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--cmp-text);
}

[data-theme="dark"] .cmp-shell[b-yni1wmyafs] {
    --cmp-brand:        var(--accent);
    --cmp-brand-bright: var(--accent-bright);
    --cmp-brand-deep:   var(--accent-border);
    --cmp-bg:           var(--surface-2);
    --cmp-surface:      var(--surface);
    --cmp-surface-2:    var(--surface-2);
    --cmp-border:       rgba(var(--accent-rgb),  0.18);
    --cmp-border-strong:rgba(var(--accent-rgb),  0.30);
    --cmp-text:         var(--text);
    --cmp-text-muted:   var(--text-secondary);
    --cmp-text-soft:    var(--text-tertiary);
    --cmp-danger:       var(--danger-border);
}

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

.cmp-head[b-yni1wmyafs] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--cmp-border);
    border-radius: 16px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--cmp-brand) 10%, var(--cmp-surface)),
            var(--cmp-surface) 60%);
}

.cmp-head-icon[b-yni1wmyafs] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: linear-gradient(150deg, var(--cmp-brand), var(--cmp-brand-deep));
    color: var(--white);
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--cmp-brand) 60%, transparent);
}

.cmp-head-icon svg[b-yni1wmyafs] { width: 26px; height: 26px; }

.cmp-head-text[b-yni1wmyafs] { min-width: 0; }

.cmp-eyebrow[b-yni1wmyafs] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--cmp-brand);
}

.cmp-title[b-yni1wmyafs] {
    margin: 0.1rem 0 0.2rem;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--cmp-text);
}

.cmp-head-meta[b-yni1wmyafs] {
    margin: 0;
    font-size: 12.5px;
    color: var(--cmp-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.cmp-head-meta strong[b-yni1wmyafs] { color: var(--cmp-text); font-weight: 700; }
.cmp-head-dot[b-yni1wmyafs] { color: var(--cmp-text-soft); }

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

.cmp-tabs[b-yni1wmyafs] {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.cmp-tab[b-yni1wmyafs] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--cmp-border);
    border-radius: 10px;
    background: var(--cmp-surface);
    color: var(--cmp-text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 130ms ease, color 130ms ease;
}

.cmp-tab:hover[b-yni1wmyafs] { color: var(--cmp-text); border-color: var(--cmp-border-strong); }

.cmp-tab.is-active[b-yni1wmyafs] {
    background: linear-gradient(150deg, var(--cmp-brand), var(--cmp-brand-deep));
    border-color: transparent;
    color: var(--white);
}

.cmp-tab svg[b-yni1wmyafs] { width: 15px; height: 15px; }

.cmp-tab-count[b-yni1wmyafs] {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 18%, transparent);
    font-size: 10.5px;
    font-weight: 800;
}

/* ─── Panels ──────────────────────────────────────────────── */

.cmp-panel[b-yni1wmyafs] {
    border: 1px solid var(--cmp-border);
    border-radius: 14px;
    background: var(--cmp-surface);
    padding: 1.25rem 1.3rem;
}

.cmp-panel-head[b-yni1wmyafs] { margin-bottom: 1rem; }

.cmp-panel-eyebrow[b-yni1wmyafs] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cmp-brand);
}

.cmp-panel-title[b-yni1wmyafs] {
    margin: 0.15rem 0 0.3rem;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cmp-text);
}

.cmp-panel-hint[b-yni1wmyafs] {
    margin: 0;
    max-width: 68ch;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--cmp-text-muted);
}

.cmp-panel-hint strong[b-yni1wmyafs] { color: var(--cmp-text); font-weight: 600; }

/* ─── Form grid + fields ──────────────────────────────────── */

.cmp-grid[b-yni1wmyafs] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem 1rem;
}

.cmp-field[b-yni1wmyafs] { display: flex; flex-direction: column; gap: 0.32rem; min-width: 0; }
.cmp-field-wide[b-yni1wmyafs] { grid-column: 1 / -1; }

.cmp-label[b-yni1wmyafs] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cmp-brand);
}

.cmp-help[b-yni1wmyafs] {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--cmp-text-soft);
}

.cmp-input[b-yni1wmyafs],
.cmp-textarea[b-yni1wmyafs] {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--cmp-border-strong);
    border-radius: 9px;
    background: var(--cmp-surface);
    color: var(--cmp-text);
    font-family: inherit;
    font-size: 13.5px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.cmp-textarea[b-yni1wmyafs] { resize: vertical; line-height: 1.5; }

.cmp-input:focus-visible[b-yni1wmyafs],
.cmp-textarea:focus-visible[b-yni1wmyafs] {
    outline: none;
    border-color: var(--cmp-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cmp-brand) 16%, transparent);
}

.cmp-input[b-yni1wmyafs]::placeholder,
.cmp-textarea[b-yni1wmyafs]::placeholder { color: var(--cmp-text-soft); }

.cmp-readonly[b-yni1wmyafs] {
    padding: 0.55rem 0.7rem;
    border: 1px dashed var(--cmp-border-strong);
    border-radius: 9px;
    background: var(--cmp-surface-2);
    color: var(--cmp-text-muted);
    font-size: 13.5px;
    font-weight: 600;
}

/* ─── Logo card ───────────────────────────────────────────── */

.cmp-logo[b-yni1wmyafs] {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
}

.cmp-logo-preview[b-yni1wmyafs] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 160px;
    height: 110px;
    border-radius: 12px;
    border: 1px solid var(--cmp-border);
    background: var(--cmp-surface-2);
    overflow: hidden;
}

.cmp-logo-preview img[b-yni1wmyafs] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cmp-logo-preview.is-empty[b-yni1wmyafs] {
    border-style: dashed;
    border-color: var(--cmp-border-strong);
    flex-direction: column;
    gap: 0.35rem;
    color: var(--cmp-text-soft);
}

.cmp-logo-preview.is-empty svg[b-yni1wmyafs] { width: 26px; height: 26px; }
.cmp-logo-preview.is-empty span[b-yni1wmyafs] { font-size: 11px; font-weight: 600; }

.cmp-logo-side[b-yni1wmyafs] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.cmp-logo-note[b-yni1wmyafs] {
    margin: 0;
    font-size: 11px;
    color: var(--cmp-text-soft);
}

/* ─── Buttons ─────────────────────────────────────────────── */

.cmp-btn[b-yni1wmyafs] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    border-radius: 9px;
    border: 1px solid var(--cmp-border-strong);
    background: var(--cmp-surface);
    color: var(--cmp-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 130ms ease, border-color 130ms ease, transform 80ms ease;
}

.cmp-btn:active[b-yni1wmyafs] { transform: translateY(1px); }
.cmp-btn svg[b-yni1wmyafs] { width: 15px; height: 15px; }
.cmp-btn:disabled[b-yni1wmyafs],
.cmp-btn.is-busy[b-yni1wmyafs] { opacity: 0.65; cursor: default; }

.cmp-btn.is-primary[b-yni1wmyafs] {
    background: linear-gradient(150deg, var(--cmp-brand), var(--cmp-brand-deep));
    border-color: transparent;
    color: var(--white);
}

.cmp-btn.is-primary:hover[b-yni1wmyafs] { filter: brightness(1.08); }

.cmp-btn.is-ghost[b-yni1wmyafs] {
    background: var(--cmp-surface-2);
}

.cmp-btn.is-danger[b-yni1wmyafs] {
    color: var(--cmp-danger);
    border-color: color-mix(in srgb, var(--cmp-danger) 40%, var(--cmp-border));
}

.cmp-btn.is-danger:hover[b-yni1wmyafs] {
    background: color-mix(in srgb, var(--cmp-danger) 10%, var(--cmp-surface));
}

/* The <InputFile> renders an <input type=file> inside the styled
   label — hide it; clicking the label still opens the picker. */
.cmp-btn[b-yni1wmyafs]  input[type="file"] { display: none; }

/* ─── Banners ─────────────────────────────────────────────── */

.cmp-banner[b-yni1wmyafs] {
    padding: 0.65rem 0.9rem;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid transparent;
}

.cmp-banner.is-ok[b-yni1wmyafs] {
    background: color-mix(in srgb, var(--cmp-ok) 12%, var(--cmp-surface));
    border-color: color-mix(in srgb, var(--cmp-ok) 35%, transparent);
    color: var(--cmp-ok);
}

.cmp-banner.is-error[b-yni1wmyafs] {
    background: color-mix(in srgb, var(--cmp-danger) 12%, var(--cmp-surface));
    border-color: color-mix(in srgb, var(--cmp-danger) 35%, transparent);
    color: var(--cmp-danger);
}

.cmp-banner strong[b-yni1wmyafs] { font-weight: 800; }

/* ─── Sticky footer ───────────────────────────────────────── */

.cmp-footer[b-yni1wmyafs] {
    position: sticky;
    bottom: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--cmp-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--cmp-surface) 92%, transparent);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px -18px rgba(var(--shadow-rgb),  0.5);
}

.cmp-footer-note[b-yni1wmyafs] { font-size: 11.5px; color: var(--cmp-text-soft); }

/* ─── Documents ───────────────────────────────────────────── */

.cmp-doc-upload[b-yni1wmyafs] {
    display: flex;
    align-items: flex-end;
    gap: 0.7rem;
    flex-wrap: wrap;
    padding: 0.9rem;
    margin-bottom: 1rem;
    border: 1px dashed var(--cmp-border-strong);
    border-radius: 12px;
    background: var(--cmp-surface-2);
}

.cmp-doc-upload .cmp-field[b-yni1wmyafs] { flex: 1 1 240px; }

.cmp-doc-list[b-yni1wmyafs] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cmp-doc[b-yni1wmyafs] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--cmp-border);
    border-radius: 11px;
    background: var(--cmp-surface);
    transition: border-color 120ms ease;
}

.cmp-doc:hover[b-yni1wmyafs] { border-color: var(--cmp-border-strong); }

.cmp-doc-icon[b-yni1wmyafs] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--cmp-brand) 12%, var(--cmp-surface));
    color: var(--cmp-brand);
}

.cmp-doc-icon svg[b-yni1wmyafs] { width: 18px; height: 18px; }

.cmp-doc-meta[b-yni1wmyafs] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.cmp-doc-kind[b-yni1wmyafs] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cmp-brand);
}

.cmp-doc-name[b-yni1wmyafs] {
    font-size: 13px;
    font-weight: 700;
    color: var(--cmp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmp-doc-sub[b-yni1wmyafs] { font-size: 11px; color: var(--cmp-text-soft); }

.cmp-doc-actions[b-yni1wmyafs] { display: flex; gap: 0.3rem; flex-shrink: 0; }

.cmp-icon-btn[b-yni1wmyafs] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--cmp-border);
    background: var(--cmp-surface);
    color: var(--cmp-text-muted);
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.cmp-icon-btn:hover[b-yni1wmyafs] { color: var(--cmp-brand); border-color: var(--cmp-border-strong); }
.cmp-icon-btn.is-danger:hover[b-yni1wmyafs] {
    color: var(--cmp-danger);
    border-color: color-mix(in srgb, var(--cmp-danger) 40%, var(--cmp-border));
    background: color-mix(in srgb, var(--cmp-danger) 8%, var(--cmp-surface));
}

.cmp-icon-btn svg[b-yni1wmyafs] { width: 16px; height: 16px; }

/* ─── Empty + loading states ──────────────────────────────── */

.cmp-empty[b-yni1wmyafs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--cmp-text-soft);
}

.cmp-empty svg[b-yni1wmyafs] { width: 30px; height: 30px; }
.cmp-empty p[b-yni1wmyafs] { margin: 0; font-size: 12.5px; max-width: 42ch; }

.cmp-loading[b-yni1wmyafs] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--cmp-text-soft);
    font-size: 13px;
}

.cmp-loading svg[b-yni1wmyafs],
.cmp-spin[b-yni1wmyafs] { width: 18px; height: 18px; }

.cmp-spin[b-yni1wmyafs] { animation: cmp-spin-b-yni1wmyafs 0.7s linear infinite; }

@keyframes cmp-spin-b-yni1wmyafs { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .cmp-spin[b-yni1wmyafs] { animation: none; }
}

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

@media (max-width: 760px) {
    .cmp-grid[b-yni1wmyafs] { grid-template-columns: 1fr; }
    .cmp-head[b-yni1wmyafs] { flex-direction: column; align-items: flex-start; }
}
/* /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:          var(--accent);
    --t-brand-bright:   var(--accent-bright);
    --t-brand-soft:     rgba(var(--accent-rgb),  0.06);
    --t-brand-glow:     rgba(var(--accent-bright-rgb),  0.12);
    --t-bg:             var(--surface-2);
    --t-surface:        var(--white);
    --t-border:         rgba(var(--accent-rgb),  0.10);
    --t-border-strong:  rgba(var(--accent-rgb),  0.18);
    --t-text:           var(--text);
    --t-text-muted:     var(--text-secondary);
    --t-text-soft:      var(--text-tertiary);

    font-family: 'Inter', sans-serif;
    color: var(--t-text);
}

[data-theme="dark"] .team-page[b-12lejdcil1] {
    --t-surface:        var(--surface);
    --t-bg:             var(--bg);
    --t-border:         rgba(var(--accent-rgb),  0.12);
    --t-border-strong:  rgba(var(--accent-rgb),  0.22);
    --t-text:           var(--text);
    --t-text-muted:     var(--text-secondary);
    --t-text-soft:      var(--text-tertiary);
    --t-brand:          var(--accent-bright);
    --t-brand-bright:   var(--accent);
    --t-brand-soft:     rgba(var(--accent-rgb),  0.06);
    --t-brand-glow:     rgba(var(--accent-rgb),  0.16);
}

/* ─── 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: var(--white);
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.18),
                inset 0 1px 0 rgba(var(--glass-rgb),  0.18);
}

.team-card-avatar[data-status="invited"][b-12lejdcil1] {
    background: linear-gradient(135deg, var(--gold-bright), var(--gold));
    color: var(--text);
}

.team-card-avatar[data-status="suspended"][b-12lejdcil1] {
    background: linear-gradient(135deg, var(--danger-bright), var(--danger-strong));
}

.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(var(--gold-rgb),  0.12);
    color: var(--warning-text);
}

.team-card-status[data-status="suspended"][b-12lejdcil1] {
    background: rgba(var(--danger-rgb),  0.10);
    color: var(--danger);
}

.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: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  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: var(--white);
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.18);
    flex-shrink: 0;
}

.team-table-avatar[data-status="invited"][b-12lejdcil1] { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: var(--text); }
.team-table-avatar[data-status="expired"][b-12lejdcil1],
.team-table-avatar[data-status="suspended"][b-12lejdcil1] { background: linear-gradient(135deg, var(--danger-bright), var(--danger-strong)); }

.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(var(--accent-rgb),  0.10);
    color: var(--accent);
}

.team-table-ffc-risk[b-12lejdcil1]    { background: rgba(var(--gold-rgb),  0.14); color: var(--warning-text); }
.team-table-ffc-expired[b-12lejdcil1] { background: rgba(var(--danger-rgb),  0.10);  color: var(--danger); }
.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(var(--danger-rgb),  0.06);
    border: 1px solid rgba(var(--danger-rgb),  0.18);
    border-radius: 12px;
    color: var(--danger);
    font-size: 13.5px;
}

.team-load-error code[b-12lejdcil1] {
    display: block;
    margin-top: 0.25rem;
    font-size: 12px;
    color: var(--danger-deep);
}

/* ─── 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; }
}

@media (max-width: 700px) {
    .team-card-status[b-12lejdcil1] {
        margin-left: 0;
    }
}
/* /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:          var(--accent);
    --m-brand-bright:   var(--accent-bright);
    --m-brand-soft:     rgba(var(--accent-rgb),  0.06);
    --m-brand-glow:     rgba(var(--accent-bright-rgb),  0.12);
    --m-gold:           var(--gold);
    --m-bg:             var(--surface-2);
    --m-surface:        var(--white);
    --m-surface-2:      var(--surface-2);
    --m-border:         rgba(var(--accent-rgb),  0.10);
    --m-border-strong:  rgba(var(--accent-rgb),  0.18);
    --m-text:           var(--text);
    --m-text-muted:     var(--text-secondary);
    --m-text-soft:      var(--text-tertiary);
    --m-danger:         var(--danger);
    --m-danger-soft:    rgba(var(--danger-rgb),  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:             var(--bg);
    --m-surface:        var(--surface);
    --m-surface-2:      var(--bg);
    --m-border:         rgba(var(--accent-rgb),  0.12);
    --m-border-strong:  rgba(var(--accent-rgb),  0.22);
    --m-text:           var(--text);
    --m-text-muted:     var(--text-secondary);
    --m-text-soft:      var(--text-tertiary);
    --m-brand:          var(--accent-bright);
    --m-brand-bright:   var(--accent);
    --m-brand-soft:     rgba(var(--accent-rgb),  0.06);
    --m-brand-glow:     rgba(var(--accent-rgb),  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(var(--shadow-rgb),  0.04),
        0 8px 24px -12px rgba(var(--shadow-rgb),  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: var(--white);
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.18),
                inset 0 1px 0 rgba(var(--glass-rgb),  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(var(--gold-rgb),  0.12);
    color: var(--warning-text);
}

.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: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  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(var(--glass-rgb),  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: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.18),
                inset 0 1px 0 rgba(var(--glass-rgb),  0.18);
}

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

.preset-icon.preset-emerald[b-4flcnwnnaf]  { background: linear-gradient(135deg, var(--accent-bright), var(--accent)); }
.preset-icon.preset-forest[b-4flcnwnnaf]   { background: linear-gradient(135deg, var(--accent), var(--accent-active)); }
.preset-icon.preset-sage[b-4flcnwnnaf]     { background: linear-gradient(135deg, var(--accent), var(--accent-bright)); }
.preset-icon.preset-mint[b-4flcnwnnaf]     { background: linear-gradient(135deg, var(--accent), var(--accent)); }
.preset-icon.preset-amber[b-4flcnwnnaf]    { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: var(--text); }
.preset-icon.preset-neutral[b-4flcnwnnaf]  { background: linear-gradient(135deg, var(--text-tertiary), var(--text-secondary)); }

.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: var(--white);
}

.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: var(--white);
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  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(var(--shadow-rgb),  0.08);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
}

.perm-group-tab.is-active .perm-group-count[b-4flcnwnnaf] {
    background: rgba(var(--glass-rgb),  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: var(--white);
}

.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(var(--accent-rgb),  0.10);
    color: var(--accent);
}

.perm-card-action[data-action="edit"][b-4flcnwnnaf] {
    background: rgba(var(--gold-rgb),  0.12);
    color: var(--warning-text);
}

[data-theme="dark"] .perm-card-action[data-action="view"][b-4flcnwnnaf] {
    background: rgba(var(--accent-rgb),  0.12);
    color: var(--accent);
}

[data-theme="dark"] .perm-card-action[data-action="edit"][b-4flcnwnnaf] {
    background: rgba(var(--gold-rgb),  0.16);
    color: var(--gold-bright);
}

.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(var(--shadow-rgb),  0.04),
                0 -2px 12px -4px rgba(var(--shadow-rgb),  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: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.18),
                inset 0 1px 0 rgba(var(--glass-rgb),  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(var(--glass-rgb),  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(var(--danger-rgb),  0.06);
    border: 1px solid rgba(var(--danger-rgb),  0.18);
    color: var(--danger);
}

.member-banner-error strong[b-4flcnwnnaf] { color: var(--danger-deep); }

.member-banner-ok[b-4flcnwnnaf] {
    background: rgba(var(--accent-bright-rgb),  0.08);
    border: 1px solid rgba(var(--accent-bright-rgb),  0.24);
    color: var(--accent);
}

.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/EditListingPage.razor.rz.scp.css */
/* Edit-listing page. Mirrors NewListingPage.razor.css visually (same teal
   brand, same tokens) but laid out as a team-editor-style header card +
   tabs instead of a wizard. Light + dark via [data-theme="dark"] on the
   .lst-editor root.

   Tabs: Basics / Specs / Features / Address / Mandate flags.

   Page-specific extras vs the wizard sidecar:
     - header card with status pill + reference + primary actions
     - tab strip
     - flag-toggle cards
*/

.lst-editor[b-3tg2lae6vl] {
    --l-brand:          var(--accent);
    --l-brand-bright:   var(--accent-bright);
    --l-brand-deep:     var(--accent);
    --l-brand-soft:     rgba(var(--accent-bright-rgb),  0.08);
    --l-brand-glow:     rgba(var(--accent-bright-rgb),  0.14);
    --l-bg:             var(--surface-2);
    --l-surface:        var(--white);
    --l-surface-2:      var(--surface-2);
    --l-border:         rgba(var(--accent-bright-rgb),  0.10);
    --l-border-strong:  rgba(var(--accent-bright-rgb),  0.20);
    --l-text:           var(--text);
    --l-text-muted:     var(--text-secondary);
    --l-text-soft:      var(--text-tertiary);
    --l-danger:         var(--danger);
    --l-danger-soft:    rgba(var(--danger-rgb),  0.08);
    --l-warn:           var(--warning-text);
    --l-warn-soft:      rgba(var(--gold-rgb),  0.14);
    --l-success:        var(--accent);
    --l-success-soft:   rgba(var(--accent-bright-rgb),  0.10);

    /* Local scale knob — same shape as the wizard. Multiplied by the
       layout-level --portal-content-scale (driven by the sidebar's
       Aa cycle) so major text grows / shrinks with the user's preferred
       reading size. */
    --l-scale: var(--portal-content-scale, 1);

    width: 100%;
    padding: 0 0.25rem 6rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--l-text);
    font-size: calc(15px * var(--l-scale));
}

[data-theme="dark"] .lst-editor[b-3tg2lae6vl] {
    --l-bg:             var(--bg);
    --l-surface:        var(--surface);
    --l-surface-2:      var(--surface);
    --l-border:         rgba(var(--accent-rgb),  0.14);
    --l-border-strong:  rgba(var(--accent-rgb),  0.26);
    --l-text:           var(--text);
    --l-text-muted:     var(--text-secondary);
    --l-text-soft:      var(--text-tertiary);
    --l-brand:          var(--accent-bright);
    --l-brand-bright:   var(--accent);
    --l-brand-deep:     var(--accent);
    --l-brand-soft:     rgba(var(--accent-rgb),  0.08);
    --l-brand-glow:     rgba(var(--accent-rgb),  0.18);
    --l-success:        var(--accent-bright);
    --l-success-soft:   rgba(var(--accent-rgb),  0.10);
}

/* ─── Footer back-link ────────────────────────────────────── */
/* Standalone rule — the link reused this class but it was never
   styled, so its icon rendered at the SVG's intrinsic size. */
.lst-back[b-3tg2lae6vl] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 13px;
    font-weight: 600;
    color: var(--l-text-muted);
    text-decoration: none;
    transition: color 120ms ease;
}

.lst-back:hover[b-3tg2lae6vl] { color: var(--l-brand); }

.lst-back svg[b-3tg2lae6vl] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

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

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

.lst-head[b-3tg2lae6vl]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--l-brand), var(--l-brand-bright), var(--l-brand));
}

.lst-head-icon[b-3tg2lae6vl] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--l-brand-bright), var(--l-brand));
    color: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.18),
                inset 0 1px 0 rgba(var(--glass-rgb),  0.18);
}

.lst-head-icon svg[b-3tg2lae6vl] { width: 26px; height: 26px; }

.lst-head-body[b-3tg2lae6vl] {
    flex: 1;
    min-width: 0;
}

.lst-head-title[b-3tg2lae6vl] {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: calc(22px * var(--l-scale));
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 0.25rem;
    color: var(--l-text);
    line-height: 1.25;
    word-wrap: break-word;
}

.lst-head-meta[b-3tg2lae6vl] {
    margin: 0;
    color: var(--l-text-soft);
    font-size: 12.5px;
    font-weight: 500;
}

.lst-head-meta strong[b-3tg2lae6vl] {
    color: var(--l-text-muted);
    font-weight: 600;
}

.lst-head-actions[b-3tg2lae6vl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.lst-status-pill[b-3tg2lae6vl] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: var(--l-brand-soft);
    color: var(--l-brand);
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 0.01em;
}

.lst-status-pill[data-status="draft"][b-3tg2lae6vl]      { background: rgba(var(--shadow-rgb),  0.18); color: var(--l-text-muted); }
.lst-status-pill[data-status="active"][b-3tg2lae6vl]     { background: var(--l-success-soft);     color: var(--l-success); }
.lst-status-pill[data-status="underoffer"][b-3tg2lae6vl] { background: rgba(var(--accent-bright-rgb),  0.14);  color: var(--l-brand); }
.lst-status-pill[data-status="withdrawn"][b-3tg2lae6vl]  { background: var(--l-warn-soft);        color: var(--l-warn); }
.lst-status-pill[data-status="sold"][b-3tg2lae6vl],
.lst-status-pill[data-status="let"][b-3tg2lae6vl]        { background: var(--l-brand-soft);       color: var(--l-brand); }

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

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

.lst-tabs[b-3tg2lae6vl] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: 12px;
    margin-bottom: 1rem;
}

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

.lst-tab:hover[b-3tg2lae6vl] {
    background: var(--l-brand-soft);
    color: var(--l-text);
}

.lst-tab.is-active[b-3tg2lae6vl] {
    background: linear-gradient(135deg, var(--l-brand-bright), var(--l-brand));
    color: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.18);
}

.lst-tab svg[b-3tg2lae6vl] { width: 15px; height: 15px; }

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

.lst-panel[b-3tg2lae6vl] {
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.lst-panel-head[b-3tg2lae6vl] { margin-bottom: 1.25rem; }
/* A mid-panel section divider — separates the owner/source block
   from the structured address above it on the Address tab. */
.lst-panel-head-sub[b-3tg2lae6vl] {
    margin-top: 2rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--l-border);
}
.lst-panel-eyebrow[b-3tg2lae6vl] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--l-brand);
}
.lst-panel-title[b-3tg2lae6vl] {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: calc(20px * var(--l-scale));
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0.25rem 0 0.3rem;
    color: var(--l-text);
}
.lst-panel-hint[b-3tg2lae6vl] {
    margin: 0;
    color: var(--l-text-muted);
    font-size: calc(13px * var(--l-scale));
    line-height: 1.5;
    max-width: 64ch;
}

/* ─── Form fields (copied from wizard for parity) ─────── */

.lst-field-grid[b-3tg2lae6vl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
}

.lst-field-grid-3[b-3tg2lae6vl] {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 1rem 1.25rem;
}

.lst-field[b-3tg2lae6vl] { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.lst-field-wide[b-3tg2lae6vl] { grid-column: 1 / -1; }

.lst-label[b-3tg2lae6vl] {
    font-size: 12px;
    font-weight: 700;
    color: var(--l-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lst-label-row[b-3tg2lae6vl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.lst-help[b-3tg2lae6vl] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--l-text-soft);
    text-transform: none;
    letter-spacing: 0;
}

.lst-input[b-3tg2lae6vl],
.lst-select[b-3tg2lae6vl],
.lst-textarea[b-3tg2lae6vl] {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.875rem;
    background: var(--l-bg);
    border: 1px solid var(--l-border);
    border-radius: 10px;
    color: var(--l-text);
    font: inherit;
    font-size: 14px;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
    outline: none;
}

.lst-input[b-3tg2lae6vl] { height: calc(40px * var(--l-scale)); font-size: calc(14px * var(--l-scale)); }
.lst-select[b-3tg2lae6vl] { height: calc(40px * var(--l-scale)); font-size: calc(14px * var(--l-scale)); padding-right: 2rem; appearance: none;
              background-image: linear-gradient(45deg, transparent 50%, var(--l-text-muted) 50%),
                                linear-gradient(135deg, var(--l-text-muted) 50%, transparent 50%);
              background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
              background-size: 6px 6px;
              background-repeat: no-repeat; }
.lst-textarea[b-3tg2lae6vl] { padding: 0.625rem 0.875rem; min-height: 110px; resize: vertical; }

.lst-input:focus[b-3tg2lae6vl],
.lst-select:focus[b-3tg2lae6vl],
.lst-textarea:focus[b-3tg2lae6vl] {
    border-color: var(--l-brand-bright);
    box-shadow: 0 0 0 3px var(--l-brand-glow);
    background: var(--l-surface);
}

.lst-input-prefix[b-3tg2lae6vl] {
    display: flex;
    align-items: center;
    background: var(--l-bg);
    border: 1px solid var(--l-border);
    border-radius: 10px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.lst-input-prefix:focus-within[b-3tg2lae6vl] {
    border-color: var(--l-brand-bright);
    box-shadow: 0 0 0 3px var(--l-brand-glow);
}

.lst-input-prefix .lst-input[b-3tg2lae6vl] {
    border: none;
    background: transparent;
    box-shadow: none;
    height: 38px;
}

.lst-input-prefix-text + .lst-input[b-3tg2lae6vl] { padding-left: 0; }
.lst-input:has(+ .lst-input-suffix-text)[b-3tg2lae6vl] { padding-right: 0; }

.lst-input-prefix-text[b-3tg2lae6vl] {
    padding-left: 0.875rem;
    padding-right: 0.25rem;
    color: var(--l-text-soft);
    font-weight: 700;
    font-size: 14px;
}

.lst-input-suffix-text[b-3tg2lae6vl] {
    padding-right: 0.875rem;
    padding-left: 0.25rem;
    color: var(--l-text-soft);
    font-weight: 600;
    font-size: 12.5px;
    /* Never wrap — "p/m" / "m²" mean nothing split across lines. */
    white-space: nowrap;
}

.lst-error[b-3tg2lae6vl] {
    color: var(--l-danger);
    font-size: 12px;
    font-weight: 600;
}

/* ─── Stepper grid (same as wizard) ───────────────────── */

.lst-stepper-grid[b-3tg2lae6vl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.875rem;
}

.lst-stepper-card[b-3tg2lae6vl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--l-bg);
    border: 1px solid var(--l-border);
    border-radius: 12px;
}

.lst-stepper-label[b-3tg2lae6vl] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.lst-stepper-name[b-3tg2lae6vl] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--l-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lst-stepper-hint[b-3tg2lae6vl] { font-size: 11px; color: var(--l-text-soft); }

.lst-stepper-ctl[b-3tg2lae6vl] { display: inline-flex; align-items: center; gap: 0.25rem; }

.lst-stepper-btn[b-3tg2lae6vl] {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    color: var(--l-text);
    font-size: 18px; line-height: 1;
    font-weight: 700;
    cursor: pointer;
    display: grid; place-items: center;
    transition: background 140ms ease, border-color 140ms ease;
}

.lst-stepper-btn:hover:not(:disabled)[b-3tg2lae6vl] {
    background: var(--l-brand-soft);
    border-color: var(--l-brand-bright);
    color: var(--l-brand);
}

.lst-stepper-btn:disabled[b-3tg2lae6vl] { opacity: 0.5; cursor: not-allowed; }

.lst-stepper-val[b-3tg2lae6vl] {
    min-width: 36px; height: 32px;
    display: grid; place-items: center;
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: 8px;
    font-size: 15px; font-weight: 700;
    color: var(--l-text);
    padding: 0 0.5rem;
}

/* ─── Other rooms (Specs tab) ─────────────────────────
   Counted rooms beyond the four core steppers — the same
   capability the create wizard's Step 3 has. Boxed in its
   own panel so it reads as a distinct Specs sub-section. */
.lst-rooms-section[b-3tg2lae6vl] {
    position: relative;
    margin-top: 1.5rem;
    padding: 1rem 1.125rem 1.125rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--l-brand-bright) 5%, var(--l-surface)),
        var(--l-surface) 70%);
    border: 1px solid var(--l-border);
    border-radius: 14px;
    overflow: hidden;
}

.lst-rooms-section[b-3tg2lae6vl]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--l-brand), var(--l-brand-bright), var(--l-brand));
}

.lst-rooms-head[b-3tg2lae6vl] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Fixed 4-up — the shared auto-fit grid packed 7 cards across and
   clipped the longer room names. Four columns always leaves room. */
.lst-rooms-section .lst-stepper-grid[b-3tg2lae6vl] {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
    .lst-rooms-section .lst-stepper-grid[b-3tg2lae6vl] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    .lst-rooms-head[b-3tg2lae6vl] { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
}

/* ─── Features-tab search bar ─────────────────────────
   Mirrors NewListingPage.razor.css (.lst-feature-search etc).
   See that file's comments for the design rationale. */

.lst-feature-search[b-3tg2lae6vl] {
    position: sticky;
    top: 0.5rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem 0.5rem 0.9rem;
    margin-bottom: 1rem;
    background: var(--l-surface);
    border: 1.5px solid var(--l-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.04),
                0 8px 20px -12px rgba(var(--shadow-rgb),  0.18);
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.lst-feature-search:focus-within[b-3tg2lae6vl] {
    border-color: var(--l-brand-bright);
    box-shadow: 0 0 0 3px var(--l-brand-glow),
                0 8px 20px -10px var(--l-brand-glow);
}

.lst-feature-search-icon[b-3tg2lae6vl] {
    width: 22px; height: 22px;
    display: grid; place-items: center;
    color: var(--l-brand);
    flex-shrink: 0;
}
.lst-feature-search-icon svg[b-3tg2lae6vl] { width: 18px; height: 18px; }

.lst-feature-search-input[b-3tg2lae6vl] {
    flex: 1; min-width: 0;
    height: calc(40px * var(--l-scale, 1));
    border: none;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: calc(15px * var(--l-scale, 1));
    font-weight: 500;
    color: var(--l-text);
    padding: 0 0.25rem;
}
.lst-feature-search-input[b-3tg2lae6vl]::placeholder { color: var(--l-text-soft); font-weight: 500; }
.lst-feature-search-input[b-3tg2lae6vl]::-webkit-search-cancel-button,
.lst-feature-search-input[b-3tg2lae6vl]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.lst-feature-search-clear[b-3tg2lae6vl] {
    width: 28px; height: 28px;
    border-radius: 999px;
    border: none;
    background: var(--l-brand-soft);
    color: var(--l-brand);
    cursor: pointer;
    display: grid; place-items: center;
    flex-shrink: 0;
    padding: 0;
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.lst-feature-search-clear:hover[b-3tg2lae6vl] {
    background: linear-gradient(135deg, var(--l-brand-bright), var(--l-brand));
    color: var(--white);
    transform: scale(1.05);
}
.lst-feature-search-clear svg[b-3tg2lae6vl] { width: 14px; height: 14px; }

.lst-feature-search-count[b-3tg2lae6vl] {
    flex-shrink: 0;
    padding: 0.3rem 0.6rem;
    background: var(--l-brand-soft);
    color: var(--l-brand);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.lst-feature-hit[b-3tg2lae6vl] {
    background: color-mix(in srgb, var(--l-brand-bright) 28%, transparent);
    color: inherit;
    border-radius: 4px;
    padding: 0 2px;
    font-weight: 700;
}
.lst-feature-chip.is-on .lst-feature-hit[b-3tg2lae6vl] {
    background: rgba(var(--glass-rgb),  0.30);
    color: inherit;
}

.lst-feature-selected-bar[b-3tg2lae6vl] {
    margin-bottom: 1.25rem;
    padding: 0.75rem 0.875rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--l-brand-bright) 8%, var(--l-surface)),
        var(--l-surface));
    border: 1px dashed color-mix(in srgb, var(--l-brand-bright) 40%, transparent);
    border-radius: 12px;
}

.lst-feature-selected-head[b-3tg2lae6vl] {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.lst-feature-selected-title[b-3tg2lae6vl] {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--l-text);
    letter-spacing: -0.005em;
}

.lst-feature-empty[b-3tg2lae6vl] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.875rem 1rem;
    padding: 1rem 1.125rem;
    margin-bottom: 1.5rem;
    background: var(--l-bg);
    border: 1.5px dashed var(--l-border-strong);
    border-radius: 14px;
}

.lst-feature-empty-icon[b-3tg2lae6vl] {
    width: 38px; height: 38px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--l-brand-soft);
    color: var(--l-brand);
    flex-shrink: 0;
}
.lst-feature-empty-icon svg[b-3tg2lae6vl] { width: 20px; height: 20px; }

.lst-feature-empty-text[b-3tg2lae6vl] {
    flex: 1; min-width: 220px;
    display: flex; flex-direction: column; gap: 2px;
    line-height: 1.4;
}
.lst-feature-empty-text strong[b-3tg2lae6vl] {
    color: var(--l-text);
    font-size: 13.5px;
    font-weight: 700;
}
.lst-feature-empty-text span[b-3tg2lae6vl] {
    color: var(--l-text-muted);
    font-size: 12.5px;
}

@media (max-width: 760px) {
    .lst-feature-search[b-3tg2lae6vl] { position: static; flex-wrap: wrap; }
    .lst-feature-search-count[b-3tg2lae6vl] { order: 4; flex-basis: 100%; text-align: center; }
}

/* ─── Feature chips ───────────────────────────────────── */

.lst-feature-section[b-3tg2lae6vl] { margin-bottom: 1.5rem; }
.lst-feature-section:last-child[b-3tg2lae6vl] { margin-bottom: 0; }

.lst-feature-section-head[b-3tg2lae6vl] {
    display: flex; align-items: center; gap: 0.625rem;
    margin-bottom: 0.75rem;
}

.lst-feature-section-title[b-3tg2lae6vl] {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--l-text);
}

.lst-feature-section-count[b-3tg2lae6vl] {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--l-brand-soft);
    color: var(--l-brand);
    font-size: 11px;
    font-weight: 700;
}

.lst-feature-chips[b-3tg2lae6vl] { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.lst-feature-chip[b-3tg2lae6vl] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    background: var(--l-bg);
    border: 1.5px solid var(--l-border);
    border-radius: 999px;
    color: var(--l-text);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.lst-feature-chip:hover[b-3tg2lae6vl] {
    border-color: var(--l-border-strong);
    background: var(--l-surface);
    transform: translateY(-1px);
}

.lst-feature-chip.is-on[b-3tg2lae6vl] {
    background: linear-gradient(135deg, var(--l-brand-bright), var(--l-brand));
    color: var(--white);
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.18);
}

.lst-feature-chip-tick[b-3tg2lae6vl] { width: 14px; height: 14px; }

/* ─── Custom features (per-listing) ──────────────────── */

.lst-custom-row[b-3tg2lae6vl] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.lst-custom-row .lst-input[b-3tg2lae6vl] { flex: 1; }
.lst-custom-row .lst-btn[b-3tg2lae6vl] { flex-shrink: 0; }

.lst-feature-chip-remove[b-3tg2lae6vl] {
    margin-left: 0.1rem;
    width: 18px; height: 18px;
    border-radius: 999px;
    border: none;
    background: rgba(var(--glass-rgb),  0.22);
    color: inherit;
    font: inherit;
    font-size: 13px;
    line-height: 1;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    transition: background 140ms ease;
}
.lst-feature-chip-remove:hover[b-3tg2lae6vl] { background: rgba(var(--glass-rgb),  0.36); }

.lst-feature-section-hint[b-3tg2lae6vl] {
    margin: 0.4rem 0 0;
    color: var(--l-text-soft);
    font-size: 11.5px;
}

/* ─── Flag toggle cards (mandate flags) ──────────────── */

.lst-flag-grid[b-3tg2lae6vl] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.625rem;
}

.lst-flag-card[b-3tg2lae6vl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    background: var(--l-bg);
    border: 1.5px solid var(--l-border);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--l-text);
    transition: border-color 140ms ease, background 140ms ease;
}

.lst-flag-card:hover[b-3tg2lae6vl] {
    border-color: var(--l-border-strong);
    background: var(--l-surface);
}

.lst-flag-card.is-on[b-3tg2lae6vl] {
    background: linear-gradient(135deg, var(--l-brand-soft), var(--l-surface) 70%);
    border-color: var(--l-brand-bright);
}

.lst-flag-toggle[b-3tg2lae6vl] {
    flex-shrink: 0;
    width: 38px; height: 22px;
    background: var(--l-surface-2);
    border: 1px solid var(--l-border-strong);
    border-radius: 999px;
    position: relative;
    transition: background 140ms ease;
}

.lst-flag-card.is-on .lst-flag-toggle[b-3tg2lae6vl] {
    background: linear-gradient(135deg, var(--l-brand-bright), var(--l-brand));
    border-color: transparent;
}

.lst-flag-toggle[b-3tg2lae6vl]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--white);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.2);
    transition: transform 140ms ease;
}

.lst-flag-card.is-on .lst-flag-toggle[b-3tg2lae6vl]::after {
    transform: translateX(16px);
}

/* Sale-only accent card ("No transfer duty") — tinted amber so the
   buyer-side signal stands out from the standard teal property flags.
   When toggled on, the toggle pill and border switch to a warm amber
   gradient that mirrors the badge on the marketplace card. */
.lst-flag-card-accent[b-3tg2lae6vl] {
    border-color: color-mix(in srgb, var(--gold) 35%, var(--l-border));
}

.lst-flag-card-accent.is-on[b-3tg2lae6vl] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--gold) 18%, var(--l-surface)),
        var(--l-surface) 75%);
    border-color: var(--gold);
    box-shadow: 0 1px 2px rgba(var(--gold-rgb),  0.10),
                0 8px 22px -10px rgba(var(--gold-rgb),  0.40);
}

.lst-flag-card-accent.is-on .lst-flag-toggle[b-3tg2lae6vl] {
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
}

.lst-flag-card-accent.is-on .lst-flag-name[b-3tg2lae6vl] { color: var(--warning-text); }
[data-theme="dark"] .lst-flag-card-accent.is-on .lst-flag-name[b-3tg2lae6vl] { color: var(--gold-bright); }

.lst-flag-text[b-3tg2lae6vl] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.lst-flag-name[b-3tg2lae6vl] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--l-text);
}

.lst-flag-desc[b-3tg2lae6vl] {
    font-size: 11.5px;
    color: var(--l-text-soft);
}

/* ─── Banners ────────────────────────────────────────── */

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

.lst-banner-error[b-3tg2lae6vl] {
    background: rgba(var(--danger-rgb),  0.06);
    border: 1px solid rgba(var(--danger-rgb),  0.18);
    color: var(--l-danger);
}

.lst-banner-ok[b-3tg2lae6vl] {
    background: var(--l-success-soft);
    border: 1px solid color-mix(in srgb, var(--l-success) 24%, transparent);
    color: var(--l-success);
}

.lst-banner-info[b-3tg2lae6vl] {
    background: rgba(var(--info-rgb),  0.06);
    border: 1px solid rgba(var(--info-rgb),  0.18);
    color: var(--info);
}

/* ─── Tenancy summary card (rental listings only) ─────── */

.lst-tenancy-card[b-3tg2lae6vl] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: var(--l-success-soft);
    border: 1px solid color-mix(in srgb, var(--l-success) 24%, transparent);
    color: inherit;
    text-decoration: none;
    transition: transform 0.06s ease, box-shadow 0.12s ease;
}

.lst-tenancy-card:hover[b-3tg2lae6vl] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -10px rgba(var(--shadow-rgb),  0.25);
}

.lst-tenancy-card[data-tone="danger"][b-3tg2lae6vl] {
    background: rgba(var(--danger-rgb),  0.06);
    border-color: rgba(var(--danger-rgb),  0.22);
}

.lst-tenancy-card[data-tone="warn"][b-3tg2lae6vl] {
    background: rgba(var(--gold-rgb),  0.06);
    border-color: rgba(var(--gold-rgb),  0.22);
}

.lst-tenancy-icon[b-3tg2lae6vl] {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(var(--accent-rgb),  0.10);
    color: var(--l-brand, var(--accent));
}

.lst-tenancy-card[data-tone="danger"] .lst-tenancy-icon[b-3tg2lae6vl] {
    background: rgba(var(--danger-rgb),  0.10);
    color: var(--l-danger, var(--danger));
}

.lst-tenancy-card[data-tone="warn"] .lst-tenancy-icon[b-3tg2lae6vl] {
    background: rgba(var(--gold-rgb),  0.10);
    color: var(--warning-text);
}

.lst-tenancy-icon svg[b-3tg2lae6vl] { width: 20px; height: 20px; }

.lst-tenancy-body[b-3tg2lae6vl] {
    flex: 1;
    min-width: 0;
}

.lst-tenancy-headline[b-3tg2lae6vl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.2rem;
    font-size: 14.5px;
}

.lst-tenancy-status[b-3tg2lae6vl] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(var(--shadow-rgb),  0.08);
    color: var(--l-text-soft);
    font-weight: 600;
}

.lst-tenancy-pill[b-3tg2lae6vl] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-weight: 700;
}

.lst-tenancy-pill[data-tone="danger"][b-3tg2lae6vl] {
    background: rgba(var(--danger-rgb),  0.15);
    color: var(--l-danger, var(--danger));
}

.lst-tenancy-meta[b-3tg2lae6vl] {
    font-size: 12.5px;
    color: var(--l-text-soft);
    line-height: 1.45;
}

.lst-tenancy-go[b-3tg2lae6vl] {
    flex: 0 0 22px;
    color: var(--l-text-soft);
}

.lst-tenancy-go svg[b-3tg2lae6vl] { width: 18px; height: 18px; }

/* ─── Quick-pivot connection chips (rental listings) ──── */

.lst-connections[b-3tg2lae6vl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    border: 1px dashed var(--l-border);
    background: color-mix(in srgb, var(--l-bg) 60%, transparent);
}

.lst-connection[b-3tg2lae6vl] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    color: var(--l-text);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.lst-connection:hover[b-3tg2lae6vl] {
    border-color: var(--l-brand-bright);
    color: var(--l-brand);
    background: color-mix(in srgb, var(--l-brand) 5%, var(--l-surface));
}
.lst-connection svg[b-3tg2lae6vl] { width: 14px; height: 14px; }

/* ─── Tenancy tab sections ──────────────────────────────── */

.lst-tenancy-section[b-3tg2lae6vl] {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--l-border);
}
.lst-tenancy-section:first-of-type[b-3tg2lae6vl] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.lst-tenancy-section-head[b-3tg2lae6vl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.45rem;
}

.lst-tenancy-section-title[b-3tg2lae6vl] {
    font-size: 14px;
    font-weight: 700;
    color: var(--l-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lst-tenancy-rows[b-3tg2lae6vl] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.lst-tenancy-row[b-3tg2lae6vl] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--l-border);
    border-radius: 10px;
    background: var(--l-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.lst-tenancy-row:hover[b-3tg2lae6vl] {
    border-color: var(--l-brand-bright);
    background: color-mix(in srgb, var(--l-brand) 4%, var(--l-surface));
}

.lst-tenancy-row-main[b-3tg2lae6vl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 13.5px;
}

.lst-tenancy-row-status[b-3tg2lae6vl] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-weight: 700;
    background: rgba(var(--shadow-rgb),  0.08);
    color: var(--l-text-soft);
}
.lst-tenancy-row-status[data-tone="ok"][b-3tg2lae6vl]     { background: rgba(var(--accent-rgb),  0.13);  color: var(--l-brand); }
.lst-tenancy-row-status[data-tone="warn"][b-3tg2lae6vl]   { background: rgba(var(--gold-rgb),  0.15); color: var(--warning-text); }
.lst-tenancy-row-status[data-tone="danger"][b-3tg2lae6vl] { background: rgba(var(--danger-rgb),  0.13); color: var(--l-danger); }
.lst-tenancy-row-status[data-tone="brand"][b-3tg2lae6vl]  { background: rgba(var(--accent-rgb),  0.10);  color: var(--l-brand); }

.lst-tenancy-row-sub[b-3tg2lae6vl] {
    font-size: 12px;
    color: var(--l-text-soft);
    line-height: 1.4;
}

/* ─── Footer (sticky) ────────────────────────────────── */

.lst-footer[b-3tg2lae6vl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: 14px;
    position: sticky;
    bottom: 0.75rem;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.06),
                0 -2px 12px -4px rgba(var(--shadow-rgb),  0.10);
}

.lst-footer-progress[b-3tg2lae6vl] {
    font-size: 12.5px;
    color: var(--l-text-soft);
    font-weight: 600;
}

.lst-footer-progress strong[b-3tg2lae6vl] { color: var(--l-text); }

.lst-footer-right[b-3tg2lae6vl] { display: flex; gap: 0.5rem; }

.lst-btn[b-3tg2lae6vl] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: calc(38px * var(--l-scale));
    padding: 0 1.1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: calc(13.5px * var(--l-scale));
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.lst-btn:disabled[b-3tg2lae6vl] { opacity: 0.55; cursor: not-allowed; }

.lst-btn svg[b-3tg2lae6vl] { width: 15px; height: 15px; }

.lst-btn-ghost[b-3tg2lae6vl] {
    color: var(--l-text-muted);
    border-color: var(--l-border);
    background: var(--l-bg);
}

.lst-btn-ghost:hover:not(:disabled)[b-3tg2lae6vl] {
    background: var(--l-surface);
    border-color: var(--l-border-strong);
    color: var(--l-text);
}

.lst-btn-primary[b-3tg2lae6vl] {
    background: linear-gradient(135deg, var(--l-brand-bright), var(--l-brand));
    color: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.18),
                inset 0 1px 0 rgba(var(--glass-rgb),  0.18);
}

.lst-btn-primary:hover:not(:disabled)[b-3tg2lae6vl] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px var(--l-brand-glow),
                inset 0 1px 0 rgba(var(--glass-rgb),  0.22);
}

.lst-btn-warn[b-3tg2lae6vl] {
    color: var(--l-warn);
    background: var(--l-warn-soft);
    border-color: color-mix(in srgb, var(--l-warn) 30%, transparent);
}

.lst-btn-warn:hover:not(:disabled)[b-3tg2lae6vl] {
    background: color-mix(in srgb, var(--l-warn-soft) 70%, var(--l-surface));
}

/* ─── Interactive map ──────────────────────────────────
   Same shape as the wizard — draggable pin, click to relocate. */

.lst-map[b-3tg2lae6vl] {
    width: 100%;
    height: 380px;
    border-radius: 12px;
    border: 1px solid var(--l-border);
    overflow: hidden;
    background: var(--l-surface-2);
}

@media (max-width: 760px) {
    .lst-map[b-3tg2lae6vl] { height: 300px; }
}

.lst-map-hintbar[b-3tg2lae6vl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.5rem;
    background: var(--l-brand-soft);
    border: 1px solid color-mix(in srgb, var(--l-brand-bright) 24%, transparent);
    border-radius: 10px;
    color: var(--l-text);
}

.lst-map-hintbar > div[b-3tg2lae6vl] {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 1px;
}

.lst-map-hintbar strong[b-3tg2lae6vl] { font-size: 13px; color: var(--l-text); font-weight: 700; }

.lst-map-hintbar span:not(.lst-map-hint-icon):not(.lst-map-coords)[b-3tg2lae6vl] {
    font-size: 12px; color: var(--l-text-muted); font-weight: 500; line-height: 1.4;
}

/* Map pin lock — locked by default (a quiet green CTA, "Adjust pin");
   unlocked flips to an amber active state ("Lock pin") so it's obvious
   the map can move the address. */
.lst-map-lock[b-3tg2lae6vl] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 34px;
    padding: 0 0.75rem;
    border: 1px solid var(--l-brand);
    border-radius: 8px;
    background: var(--l-surface);
    color: var(--l-brand);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.lst-map-lock svg[b-3tg2lae6vl] { width: 14px; height: 14px; flex-shrink: 0; }

.lst-map-lock:hover[b-3tg2lae6vl] { background: var(--l-brand-soft); }

.lst-map-lock.is-unlocked[b-3tg2lae6vl] {
    border-color: var(--l-warn);
    background: var(--l-warn);
    color: var(--white);
}

.lst-map-lock.is-unlocked:hover[b-3tg2lae6vl] { filter: brightness(1.08); }

.lst-map-hint-icon[b-3tg2lae6vl] {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 999px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--l-brand-bright), var(--l-brand));
    color: var(--white);
}

.lst-map-hint-icon svg[b-3tg2lae6vl] { width: 16px; height: 16px; }

.lst-map-coords[b-3tg2lae6vl] {
    flex-shrink: 0;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    color: var(--l-text-muted);
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    font-size: 11.5px; font-weight: 600;
    white-space: nowrap;
}

/* ─── Address search row + branded map shell ───────────
   Same UX as the wizard (NewListingPage.razor.css). Duplicated
   here because Blazor CSS isolation scopes per-component. */

.lst-addr-search[b-3tg2lae6vl] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}

.lst-addr-search-input[b-3tg2lae6vl] {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--l-bg);
    border: 1.5px solid var(--l-border);
    border-radius: 12px;
    padding: 0 0.9rem;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.lst-addr-search-input:focus-within[b-3tg2lae6vl] {
    border-color: var(--l-brand-bright);
    background: var(--l-surface);
    box-shadow: 0 0 0 3px var(--l-brand-glow);
}

.lst-addr-search-icon[b-3tg2lae6vl] {
    color: var(--l-brand);
    display: grid; place-items: center;
    width: 22px; height: 22px;
    flex-shrink: 0;
}
.lst-addr-search-icon svg[b-3tg2lae6vl] { width: 18px; height: 18px; }

.lst-addr-search-input input[b-3tg2lae6vl] {
    flex: 1; min-width: 0;
    height: calc(48px * var(--l-scale, 1));
    border: none; background: transparent; outline: none;
    color: var(--l-text);
    font: inherit;
    font-size: calc(15px * var(--l-scale, 1));
    font-weight: 500;
    padding: 0 0 0 0.5rem;
}
.lst-addr-search-input input[b-3tg2lae6vl]::placeholder { color: var(--l-text-soft); font-weight: 500; }

.lst-addr-locate[b-3tg2lae6vl] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: calc(48px * var(--l-scale, 1));
    padding: 0 1.1rem;
    border: 1.5px solid var(--l-border-strong);
    background: var(--l-surface);
    color: var(--l-text);
    border-radius: 12px;
    font: inherit;
    font-size: calc(13.5px * var(--l-scale, 1));
    font-weight: 700;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.lst-addr-locate:hover:not(:disabled)[b-3tg2lae6vl] {
    background: linear-gradient(135deg, var(--l-brand-bright), var(--l-brand));
    color: var(--white);
    border-color: transparent;
    transform: translateY(-1px);
}

.lst-addr-locate:disabled[b-3tg2lae6vl] { opacity: 0.7; cursor: progress; }
.lst-addr-locate svg[b-3tg2lae6vl] { width: 16px; height: 16px; }
.lst-addr-locate-spin[b-3tg2lae6vl] { animation: lst-spin-b-3tg2lae6vl 900ms linear infinite; }

@keyframes lst-spin-b-3tg2lae6vl { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.lst-map-shell[b-3tg2lae6vl] {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1.5px solid var(--l-border);
    background: var(--l-surface-2);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.06),
                0 14px 36px -18px rgba(var(--shadow-rgb),  0.28);
    margin-bottom: 0.75rem;
}

.lst-map-xl[b-3tg2lae6vl] { height: 560px; }
@media (max-width: 880px) { .lst-map-xl[b-3tg2lae6vl] { height: 460px; } }
@media (max-width: 760px) { .lst-map-xl[b-3tg2lae6vl] { height: 380px; } }

.lst-map-toolbar[b-3tg2lae6vl] {
    position: absolute;
    top: 0.75rem; left: 0.75rem; right: 0.75rem;
    z-index: 2;
    display: flex; align-items: center; gap: 0.5rem;
    pointer-events: none;
}
.lst-map-toolbar > *[b-3tg2lae6vl] { pointer-events: auto; }

.lst-map-type-group[b-3tg2lae6vl] {
    display: inline-flex;
    padding: 4px;
    background: rgba(var(--glass-rgb),  0.96);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.10), 0 6px 18px -8px rgba(var(--shadow-rgb),  0.22);
    backdrop-filter: blur(8px);
}
[data-theme="dark"] .lst-map-type-group[b-3tg2lae6vl] { background: rgba(var(--shadow-rgb),  0.92); }

.lst-map-type[b-3tg2lae6vl] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border: none; background: transparent;
    color: var(--l-text-muted);
    font: inherit; font-size: 12.5px; font-weight: 700;
    border-radius: 8px; cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.lst-map-type:hover[b-3tg2lae6vl] { background: var(--l-brand-soft); color: var(--l-brand); }
.lst-map-type.is-on[b-3tg2lae6vl] {
    background: linear-gradient(135deg, var(--l-brand-bright), var(--l-brand));
    color: var(--white); box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.18);
}
.lst-map-type svg[b-3tg2lae6vl] { width: 14px; height: 14px; }

.lst-map-tool[b-3tg2lae6vl] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.8rem;
    background: rgba(var(--glass-rgb),  0.96);
    border: none; border-radius: 10px;
    color: var(--l-text);
    font: inherit; font-size: 12.5px; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.10), 0 6px 18px -8px rgba(var(--shadow-rgb),  0.22);
    backdrop-filter: blur(8px);
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.lst-map-tool:hover[b-3tg2lae6vl] { transform: translateY(-1px); color: var(--l-brand); }
.lst-map-tool svg[b-3tg2lae6vl] { width: 14px; height: 14px; }
.lst-map-tool-ext[b-3tg2lae6vl] { opacity: 0.55; margin-left: 1px; }
[data-theme="dark"] .lst-map-tool[b-3tg2lae6vl] { background: rgba(var(--shadow-rgb),  0.92); color: var(--l-text); }

.lst-map-coords-pill[b-3tg2lae6vl] {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    background: rgba(var(--glass-rgb),  0.96);
    border-radius: 10px;
    color: var(--l-text);
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    font-size: 11px; font-weight: 700;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.10), 0 6px 18px -8px rgba(var(--shadow-rgb),  0.22);
    backdrop-filter: blur(8px);
    white-space: nowrap;
}
.lst-map-coords-pill svg[b-3tg2lae6vl] { width: 12px; height: 12px; color: var(--l-brand); }
[data-theme="dark"] .lst-map-coords-pill[b-3tg2lae6vl] { background: rgba(var(--shadow-rgb),  0.92); }

.lst-map-empty-hint[b-3tg2lae6vl],
.lst-map-footer-hint[b-3tg2lae6vl] {
    position: absolute;
    bottom: 0.75rem; left: 50%;
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    background: rgba(var(--glass-rgb),  0.96);
    color: var(--l-text);
    font-size: 12.5px; font-weight: 600;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.10), 0 8px 22px -10px rgba(var(--shadow-rgb),  0.28);
    backdrop-filter: blur(8px);
    z-index: 2; max-width: calc(100% - 1.5rem); text-align: center;
}
.lst-map-empty-hint svg[b-3tg2lae6vl] { width: 14px; height: 14px; color: var(--l-brand); }
.lst-map-footer-hint strong[b-3tg2lae6vl] { color: var(--l-brand); font-weight: 800; }
[data-theme="dark"] .lst-map-empty-hint[b-3tg2lae6vl],
[data-theme="dark"] .lst-map-footer-hint[b-3tg2lae6vl] { background: rgba(var(--shadow-rgb),  0.92); }

@media (max-width: 760px) {
    .lst-map-toolbar[b-3tg2lae6vl] { flex-wrap: wrap; gap: 0.4rem; }
    .lst-map-coords-pill[b-3tg2lae6vl] { margin-left: 0; }
    .lst-addr-search[b-3tg2lae6vl] { grid-template-columns: 1fr; }
    .lst-addr-locate[b-3tg2lae6vl] { width: 100%; justify-content: center; }
}

.lst-addr-pieces[b-3tg2lae6vl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.lst-addr-piece[b-3tg2lae6vl] {
    display: flex; flex-direction: column; gap: 2px;
    padding: 0.55rem 0.75rem;
    background: var(--l-bg);
    border: 1.5px solid var(--l-border);
    border-radius: 10px;
    min-width: 0;
}

.lst-addr-piece.is-filled[b-3tg2lae6vl] {
    border-color: color-mix(in srgb, var(--l-brand-bright) 40%, transparent);
    background: linear-gradient(135deg, var(--l-brand-soft), var(--l-surface));
}
.lst-addr-piece.is-empty[b-3tg2lae6vl] { opacity: 0.7; }

.lst-addr-piece-key[b-3tg2lae6vl] {
    font-size: 10.5px;
    text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 700; color: var(--l-text-soft);
}
.lst-addr-piece.is-filled .lst-addr-piece-key[b-3tg2lae6vl] { color: var(--l-brand); }

.lst-addr-piece-val[b-3tg2lae6vl] {
    font-size: 13px; font-weight: 700;
    color: var(--l-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lst-addr-piece.is-empty .lst-addr-piece-val[b-3tg2lae6vl] { color: var(--l-text-soft); font-weight: 600; }

/* Compact link that points to the Document Vault for non-photo
   files (mandates / FFC / inspections). Sits below the inline
   ListingPhotos component so the user knows where the other
   documents live. */
.lst-vault-link[b-3tg2lae6vl] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: var(--l-bg);
    border: 1px solid var(--l-border);
    color: var(--l-text-muted);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.lst-vault-link:hover[b-3tg2lae6vl] {
    background: var(--l-brand-soft);
    color: var(--l-brand);
    border-color: color-mix(in srgb, var(--l-brand-bright) 35%, var(--l-border));
}

.lst-vault-link svg[b-3tg2lae6vl] { width: 13px; height: 13px; }

/* ─── Photos card (entry point to the document vault) ──
   Surfaces the "where are my photos" answer right at the top
   of the Basics tab so it's never hidden. */

.lst-photos-cta[b-3tg2lae6vl] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--l-brand-bright) 10%, var(--l-surface)),
        var(--l-surface));
    border: 1.5px dashed color-mix(in srgb, var(--l-brand-bright) 40%, transparent);
    border-radius: 14px;
    color: var(--l-text);
    text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.lst-photos-cta:hover[b-3tg2lae6vl] {
    border-color: var(--l-brand-bright);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--l-brand-bright) 16%, var(--l-surface)),
        var(--l-surface));
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -10px var(--l-brand-glow);
}

.lst-photos-cta-icon[b-3tg2lae6vl] {
    flex-shrink: 0;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--l-brand-bright), var(--l-brand));
    color: var(--white);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.18);
}
.lst-photos-cta-icon svg[b-3tg2lae6vl] { width: 24px; height: 24px; }

.lst-photos-cta-text[b-3tg2lae6vl] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lst-photos-cta-title[b-3tg2lae6vl] {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 15px; font-weight: 800;
    color: var(--l-text);
    letter-spacing: -0.01em;
}
.lst-photos-cta-sub[b-3tg2lae6vl] {
    font-size: 12.5px; color: var(--l-text-muted); font-weight: 500;
    line-height: 1.4;
}

.lst-photos-cta-arrow[b-3tg2lae6vl] {
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: var(--l-bg);
    border-radius: 999px;
    color: var(--l-brand);
}
.lst-photos-cta-arrow svg[b-3tg2lae6vl] { width: 16px; height: 16px; }
.lst-photos-cta:hover .lst-photos-cta-arrow[b-3tg2lae6vl] { background: var(--l-brand-soft); }

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

.lst-empty[b-3tg2lae6vl] {
    padding: 4rem 1rem;
    text-align: center;
    color: var(--l-text-soft);
}

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

@media (max-width: 760px) {
    .lst-head[b-3tg2lae6vl] { flex-wrap: wrap; }
    .lst-field-grid[b-3tg2lae6vl] { grid-template-columns: 1fr; }
    .lst-field-grid-3[b-3tg2lae6vl] { grid-template-columns: 1fr; }
    .lst-footer[b-3tg2lae6vl] { flex-direction: column-reverse; align-items: stretch; gap: 0.5rem; }
    .lst-footer-right[b-3tg2lae6vl] { flex-direction: row-reverse; }
}
/* /Components/Pages/Listings/ListingVaultPage.razor.rz.scp.css */
/* Documents & Photos — a SharePoint-style document library for one
   listing: navigation rail, list/grid views, and a slide-in details
   panel. Shares the listings teal language (matches EditListingPage +
   ListingPhotos) and themes light/dark through a local --dv-* palette
   so it never depends on which custom properties a host has in scope.

   Width: the page sits inside .page-section (80rem) — no max-width is
   set here, so this tab matches the Details + Leads tabs exactly. */

.dv-shell[b-h9uivkzb2y] {
    --dv-brand:          var(--accent);
    --dv-brand-bright:   var(--accent-bright);
    --dv-brand-deep:     var(--accent);
    --dv-brand-soft:     rgba(var(--accent-bright-rgb),  0.08);
    --dv-brand-glow:     rgba(var(--accent-bright-rgb),  0.16);
    --dv-bg:             var(--surface-2);
    --dv-surface:        var(--white);
    --dv-surface-2:      var(--surface-2);
    --dv-border:         rgba(var(--accent-bright-rgb),  0.12);
    --dv-border-strong:  rgba(var(--accent-bright-rgb),  0.22);
    --dv-text:           var(--text);
    --dv-text-muted:     var(--text-secondary);
    --dv-text-soft:      var(--text-tertiary);
    --dv-danger:         var(--danger);
    --dv-danger-soft:    rgba(var(--danger-rgb),  0.10);

    /* File-type + collection tones — overridden brighter for dark. */
    --t-image:       var(--accent-bright);
    --t-pdf:         var(--danger-bright);
    --t-doc:         var(--info-bright);
    --t-sheet:       var(--accent-bright);
    --t-slides:      var(--warning);
    --t-video:       var(--tone-purple);
    --t-audio:       var(--tone-purple);
    --t-archive:     var(--gold-deep);
    --t-generic:     var(--text-secondary);
    --t-mandate:     var(--info-bright);
    --t-inspection:  var(--tone-purple);
    --t-fica:        var(--warning);
    --t-maintenance: var(--accent);
    --t-other:       var(--text-secondary);

    --dv-scale: var(--portal-content-scale, 1);

    display: block;
    padding-bottom: 4rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--dv-text);
}

[data-theme="dark"] .dv-shell[b-h9uivkzb2y] {
    --dv-brand:          var(--accent-bright);
    --dv-brand-bright:   var(--accent);
    --dv-brand-deep:     var(--accent);
    --dv-brand-soft:     rgba(var(--accent-rgb),  0.10);
    --dv-brand-glow:     rgba(var(--accent-rgb),  0.20);
    --dv-bg:             var(--bg);
    --dv-surface:        var(--surface);
    --dv-surface-2:      var(--surface-2);
    --dv-border:         rgba(var(--accent-rgb),  0.16);
    --dv-border-strong:  rgba(var(--accent-rgb),  0.28);
    --dv-text:           var(--text);
    --dv-text-muted:     var(--text-secondary);
    --dv-text-soft:      var(--text-tertiary);
    --dv-danger:         var(--danger);
    --dv-danger-soft:    rgba(var(--danger-rgb),  0.14);

    --t-image:       var(--accent);
    --t-pdf:         var(--danger);
    --t-doc:         var(--info);
    --t-sheet:       var(--accent);
    --t-slides:      var(--warning-bright);
    --t-video:       var(--tone-purple);
    --t-audio:       var(--tone-purple);
    --t-archive:     var(--warning-bright);
    --t-generic:     var(--text-tertiary);
    --t-mandate:     var(--info);
    --t-inspection:  var(--tone-purple);
    --t-fica:        var(--warning-bright);
    --t-maintenance: var(--accent);
    --t-other:       var(--text-tertiary);
}

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

.dv-head[b-h9uivkzb2y] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dv-head-icon[b-h9uivkzb2y] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--dv-brand-bright), var(--dv-brand));
    color: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.18),
                inset 0 1px 0 rgba(var(--glass-rgb),  0.20);
}

.dv-head-icon svg[b-h9uivkzb2y] { width: 26px; height: 26px; }

.dv-head-text[b-h9uivkzb2y] { min-width: 0; }

.dv-eyebrow[b-h9uivkzb2y] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--dv-brand);
}

.dv-title[b-h9uivkzb2y] {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: calc(24px * var(--dv-scale));
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0.2rem 0 0.35rem;
    color: var(--dv-text);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dv-title-sub[b-h9uivkzb2y] {
    font-family: 'Inter', sans-serif;
    font-size: calc(15px * var(--dv-scale));
    font-weight: 600;
    color: var(--dv-text-soft);
}

.dv-title-sub[b-h9uivkzb2y]::before {
    content: "·";
    margin-right: 0.5rem;
    color: var(--dv-border-strong);
}

.dv-subtitle[b-h9uivkzb2y] {
    margin: 0;
    font-size: calc(13px * var(--dv-scale));
    line-height: 1.55;
    color: var(--dv-text-muted);
    max-width: 70ch;
}

/* ─── Workspace shell ─────────────────────────────────────── */

.dv-workspace[b-h9uivkzb2y] {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

/* ─── Navigation rail ─────────────────────────────────────── */

.dv-rail[b-h9uivkzb2y] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 0.875rem;
    background: var(--dv-surface);
    border: 1px solid var(--dv-border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.04),
                0 10px 26px -20px rgba(var(--shadow-rgb),  0.30);
}

.dv-rail-group[b-h9uivkzb2y] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.dv-rail-label[b-h9uivkzb2y] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--dv-text-soft);
    padding: 0 0.5rem;
    margin-bottom: 0.35rem;
}

.dv-rail-item[b-h9uivkzb2y] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--dv-text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 130ms ease, color 130ms ease;
}

.dv-rail-item:hover[b-h9uivkzb2y] {
    background: var(--dv-brand-soft);
    color: var(--dv-text);
}

.dv-rail-item.is-active[b-h9uivkzb2y] {
    background: linear-gradient(135deg, var(--dv-brand-bright), var(--dv-brand));
    color: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.20);
}

.dv-rail-ico[b-h9uivkzb2y] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: var(--dv-brand);
}

.dv-rail-item.is-active .dv-rail-ico[b-h9uivkzb2y] { color: var(--white); }
.dv-rail-ico svg[b-h9uivkzb2y] { width: 17px; height: 17px; }

.dv-rail-dot[b-h9uivkzb2y] {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    margin: 0 6px;
    border-radius: 50%;
    background: var(--dv-text-soft);
}

.dv-rail-name[b-h9uivkzb2y] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dv-rail-count[b-h9uivkzb2y] {
    flex-shrink: 0;
    min-width: 1.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--dv-surface-2);
    color: var(--dv-text-soft);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.dv-rail-item:hover .dv-rail-count[b-h9uivkzb2y] { color: var(--dv-text-muted); }

.dv-rail-item.is-active .dv-rail-count[b-h9uivkzb2y] {
    background: rgba(var(--glass-rgb),  0.22);
    color: var(--white);
}

/* Per-collection tone dots. */
.dv-rail-item[data-tone="mandate"]     .dv-rail-dot[b-h9uivkzb2y] { background: var(--t-mandate); }
.dv-rail-item[data-tone="inspection"]  .dv-rail-dot[b-h9uivkzb2y] { background: var(--t-inspection); }
.dv-rail-item[data-tone="lease"]       .dv-rail-dot[b-h9uivkzb2y] { background: var(--dv-brand); }
.dv-rail-item[data-tone="fica"]        .dv-rail-dot[b-h9uivkzb2y] { background: var(--t-fica); }
.dv-rail-item[data-tone="maintenance"] .dv-rail-dot[b-h9uivkzb2y] { background: var(--t-maintenance); }
.dv-rail-item[data-tone="other"]       .dv-rail-dot[b-h9uivkzb2y] { background: var(--t-other); }
.dv-rail-item.is-active .dv-rail-dot[b-h9uivkzb2y] { background: var(--white); }

.dv-rail-meta[b-h9uivkzb2y] {
    margin-top: auto;
    padding: 0.7rem 0.6rem 0.3rem;
    border-top: 1px solid var(--dv-border);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 11.5px;
    color: var(--dv-text-soft);
}

.dv-rail-meta strong[b-h9uivkzb2y] { color: var(--dv-text); font-weight: 700; }

/* ─── Folder rail controls ────────────────────────────────── */

.dv-rail-grouphead[b-h9uivkzb2y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.dv-rail-grouphead .dv-rail-label[b-h9uivkzb2y] { margin-bottom: 0; }

.dv-rail-add[b-h9uivkzb2y] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 6px;
    background: var(--dv-brand-soft);
    color: var(--dv-brand);
    cursor: pointer;
    transition: background 120ms ease;
}

.dv-rail-add:hover[b-h9uivkzb2y] { background: color-mix(in srgb, var(--dv-brand) 22%, transparent); }
.dv-rail-add svg[b-h9uivkzb2y] { width: 13px; height: 13px; }

.dv-rail-newfolder[b-h9uivkzb2y] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.1rem 0.4rem;
}

.dv-rail-newfolder input[b-h9uivkzb2y] {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 0 0.5rem;
    border: 1px solid var(--dv-brand-bright);
    border-radius: 7px;
    background: var(--dv-surface);
    color: var(--dv-text);
    font: inherit;
    font-size: 12.5px;
    outline: none;
}

.dv-rail-newfolder input:focus[b-h9uivkzb2y] { box-shadow: 0 0 0 3px var(--dv-brand-glow); }

.dv-rail-nf-ok[b-h9uivkzb2y],
.dv-rail-nf-x[b-h9uivkzb2y] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 7px;
    cursor: pointer;
}

.dv-rail-nf-ok[b-h9uivkzb2y] { background: var(--dv-brand); color: var(--white); }
.dv-rail-nf-x[b-h9uivkzb2y] { background: var(--dv-surface-2); color: var(--dv-text-soft); }
.dv-rail-nf-ok svg[b-h9uivkzb2y],
.dv-rail-nf-x svg[b-h9uivkzb2y] { width: 13px; height: 13px; }

.dv-rail-empty[b-h9uivkzb2y] {
    margin: 0.15rem 0.5rem;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--dv-text-soft);
}

/* ─── Folder toolbar controls ─────────────────────────────── */

.dv-toolbar-left[b-h9uivkzb2y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: auto;
    min-width: 0;
}

.dv-folder-tools[b-h9uivkzb2y] {
    display: flex;
    gap: 0.15rem;
    flex-shrink: 0;
}

.dv-folder-rename[b-h9uivkzb2y] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dv-folder-rename input[b-h9uivkzb2y] {
    height: 34px;
    min-width: 11rem;
    padding: 0 0.65rem;
    border: 1px solid var(--dv-brand-bright);
    border-radius: 9px;
    background: var(--dv-surface);
    color: var(--dv-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    outline: none;
}

.dv-folder-rename input:focus[b-h9uivkzb2y] { box-shadow: 0 0 0 3px var(--dv-brand-glow); }

.dv-folder-select[b-h9uivkzb2y] {
    flex: 1;
    min-width: 11rem;
    height: 36px;
    padding: 0 2rem 0 0.7rem;
    border: 1px solid var(--dv-border-strong);
    border-radius: 9px;
    background-color: var(--dv-surface);
    color: var(--dv-text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--dv-text-muted) 50%),
        linear-gradient(135deg, var(--dv-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}

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

/* ─── Selection & bulk actions ────────────────────────────── */

.dv-check[b-h9uivkzb2y] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--dv-brand);
    cursor: pointer;
}

.dv-col-check[b-h9uivkzb2y],
.dv-row-check[b-h9uivkzb2y] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dv-row.is-checked[b-h9uivkzb2y] {
    background: var(--dv-brand-soft);
}

.dv-row.is-checked.is-selected[b-h9uivkzb2y] {
    box-shadow: inset 3px 0 0 var(--dv-brand-bright);
}

/* Grid-card checkbox — a corner overlay that fades in on hover and
   stays put once the card is selected. */
.dv-card-wrap[b-h9uivkzb2y] {
    position: relative;
}

.dv-card-check[b-h9uivkzb2y] {
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--dv-surface);
    box-shadow: 0 1px 3px rgba(var(--shadow-rgb),  0.22);
    opacity: 0;
    transition: opacity 120ms ease;
}

.dv-card-wrap:hover .dv-card-check[b-h9uivkzb2y],
.dv-card-wrap.is-checked .dv-card-check[b-h9uivkzb2y] {
    opacity: 1;
}

@media (hover: none) {
    .dv-card-check[b-h9uivkzb2y] { opacity: 1; }
}

.dv-card-wrap.is-checked .dv-card[b-h9uivkzb2y] {
    border-color: var(--dv-brand-bright);
    box-shadow: 0 0 0 3px var(--dv-brand-glow);
}

.dv-card-wrap.is-active .dv-card[b-h9uivkzb2y] {
    border-color: var(--dv-brand);
}

/* Bulk action bar — shown above the list while files are selected. */
.dv-bulkbar[b-h9uivkzb2y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--dv-brand-bright);
    border-radius: 12px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--dv-brand-bright) 9%, var(--dv-surface)),
        var(--dv-surface) 70%);
    box-shadow: 0 6px 18px -12px var(--dv-brand-glow);
    animation: dv-fade-b-h9uivkzb2y 140ms ease-out;
}

.dv-bulkbar-count[b-h9uivkzb2y] {
    font-size: 13px;
    font-weight: 700;
    color: var(--dv-brand);
    padding-right: 0.25rem;
}

.dv-bulkbar-select[b-h9uivkzb2y] {
    flex: 0 1 14rem;
    min-width: 9rem;
    height: 32px;
}

.dv-bulkbar-clear[b-h9uivkzb2y] {
    margin-left: auto;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--dv-text-soft);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.dv-bulkbar-clear:hover[b-h9uivkzb2y] {
    background: var(--dv-surface-2);
    color: var(--dv-text);
}

.dv-bulkbar-clear svg[b-h9uivkzb2y] { width: 15px; height: 15px; }

/* ─── Right-click context menu ────────────────────────────── */

.dv-ctx-backdrop[b-h9uivkzb2y] {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-popover, 300) - 1);
}

.dv-ctx[b-h9uivkzb2y] {
    position: fixed;
    z-index: var(--z-popover, 300);
    min-width: 196px;
    max-width: 264px;
    padding: 0.3rem;
    background: var(--dv-surface);
    border: 1px solid var(--dv-border-strong);
    border-radius: 11px;
    box-shadow: 0 14px 36px -12px rgba(var(--shadow-rgb),  0.42);
    animation: dv-ctx-in-b-h9uivkzb2y 120ms var(--ease-out, ease-out);
}

@keyframes dv-ctx-in-b-h9uivkzb2y {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

.dv-ctx-head[b-h9uivkzb2y] {
    padding: 0.4rem 0.6rem 0.5rem;
    font-size: 11px;
    font-weight: 700;
    color: var(--dv-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dv-ctx-item[b-h9uivkzb2y] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--dv-text);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 110ms ease, color 110ms ease;
}

.dv-ctx-item:hover[b-h9uivkzb2y] {
    background: var(--dv-brand-soft);
    color: var(--dv-brand);
}

.dv-ctx-item svg[b-h9uivkzb2y] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.dv-ctx-item.dv-ctx-danger:hover[b-h9uivkzb2y] {
    background: var(--dv-danger-soft);
    color: var(--dv-danger);
}

.dv-ctx-sep[b-h9uivkzb2y] {
    height: 1px;
    margin: 0.25rem 0.4rem;
    background: var(--dv-border);
}

/* ─── Drag & drop ─────────────────────────────────────────── */

.dv-row[draggable="true"][b-h9uivkzb2y],
.dv-card-wrap[draggable="true"][b-h9uivkzb2y] {
    -webkit-user-select: none;
    user-select: none;
}

.dv-row.is-dragging[b-h9uivkzb2y],
.dv-card-wrap.is-dragging[b-h9uivkzb2y] {
    opacity: 0.4;
}

.dv-rail-item.is-droptarget[b-h9uivkzb2y] {
    background: var(--dv-brand-soft);
    color: var(--dv-text);
    outline: 2px dashed var(--dv-brand-bright);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .dv-ctx[b-h9uivkzb2y] { animation: none; }
}

/* ─── Recycle bin ─────────────────────────────────────────── */

.dv-bin[b-h9uivkzb2y] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dv-bin-head[b-h9uivkzb2y] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.dv-bin-headtext[b-h9uivkzb2y] { min-width: 0; }

.dv-bin-hint[b-h9uivkzb2y] {
    margin: 0.25rem 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--dv-text-muted);
    max-width: 64ch;
}

.dv-binlist[b-h9uivkzb2y] {
    background: var(--dv-surface);
    border: 1px solid var(--dv-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.04),
                0 12px 30px -24px rgba(var(--shadow-rgb),  0.34);
}

.dv-binrow[b-h9uivkzb2y] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--dv-border);
}

.dv-binrow:last-child[b-h9uivkzb2y] { border-bottom: none; }

.dv-binrow-body[b-h9uivkzb2y] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dv-binrow-title[b-h9uivkzb2y] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dv-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dv-binrow-sub[b-h9uivkzb2y] {
    font-size: 11.5px;
    color: var(--dv-text-soft);
}

.dv-tl-item[data-kind="restored"] .dv-tl-dot[b-h9uivkzb2y] { background: var(--accent-bright); }

@media (max-width: 680px) {
    .dv-binrow[b-h9uivkzb2y] { flex-wrap: wrap; row-gap: 0.5rem; }
}

/* ─── Share links ─────────────────────────────────────────── */

.dv-share-create[b-h9uivkzb2y] {
    display: flex;
    gap: 0.4rem;
}

.dv-share-create .dv-folder-select[b-h9uivkzb2y] { flex: 1; }

.dv-sharelist[b-h9uivkzb2y] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dv-sharelink[b-h9uivkzb2y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--dv-border);
    border-radius: 9px;
    background: var(--dv-surface-2);
}

.dv-sharelink[data-active="False"][b-h9uivkzb2y] { opacity: 0.6; }

.dv-sharelink-body[b-h9uivkzb2y] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dv-sharelink-status[b-h9uivkzb2y] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dv-text);
}

.dv-sharelink[data-active="False"] .dv-sharelink-status[b-h9uivkzb2y] { color: var(--dv-text-soft); }

.dv-sharelink-meta[b-h9uivkzb2y] {
    font-size: 11px;
    color: var(--dv-text-soft);
}

/* ─── Main pane ───────────────────────────────────────────── */

.dv-main[b-h9uivkzb2y] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

/* ─── Upload bar ──────────────────────────────────────────── */

.dv-uploadbar[b-h9uivkzb2y] {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}

.dv-dropzone[b-h9uivkzb2y] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--dv-brand-bright) 7%, var(--dv-surface)),
        var(--dv-surface) 72%);
    border: 1.5px dashed color-mix(in srgb, var(--dv-brand-bright) 42%, transparent);
    border-radius: 13px;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.dv-dropzone:hover[b-h9uivkzb2y] {
    border-color: var(--dv-brand-bright);
    transform: translateY(-1px);
}

/* Active drag-over state — set by asetrixDocs.enableDropUpload while a
   file is being dragged over the zone. */
.dv-dropzone.is-dragover[b-h9uivkzb2y] {
    border-color: var(--dv-brand-bright);
    border-style: solid;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--dv-brand-bright) 16%, var(--dv-surface)),
        color-mix(in srgb, var(--dv-brand-bright) 7%, var(--dv-surface)) 72%);
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dv-brand-bright) 22%, transparent);
}

.dv-uploadbar.is-busy .dv-dropzone[b-h9uivkzb2y] { cursor: progress; }

.dv-dropzone input[type="file"][b-h9uivkzb2y] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: inherit;
}

.dv-dropzone-ico[b-h9uivkzb2y] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--dv-brand-bright), var(--dv-brand));
    color: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.18);
}

.dv-dropzone-ico svg[b-h9uivkzb2y] { width: 21px; height: 21px; }

.dv-uploadbar.is-busy .dv-dropzone-ico[b-h9uivkzb2y] {
    animation: dv-pulse-b-h9uivkzb2y 1.1s var(--ease-in-out, ease-in-out) infinite;
}

@keyframes dv-pulse-b-h9uivkzb2y {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

.dv-dropzone-text[b-h9uivkzb2y] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.dv-dropzone-text strong[b-h9uivkzb2y] { font-size: 13.5px; font-weight: 700; color: var(--dv-text); }
.dv-dropzone-text span[b-h9uivkzb2y] { font-size: 12px; color: var(--dv-text-muted); }

.dv-uploadkind[b-h9uivkzb2y] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    justify-content: center;
}

.dv-uploadkind span[b-h9uivkzb2y] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--dv-text-soft);
    padding-left: 0.15rem;
}

.dv-uploadkind select[b-h9uivkzb2y] {
    height: 38px;
    min-width: 9.5rem;
    padding: 0 2rem 0 0.75rem;
    border: 1px solid var(--dv-border-strong);
    border-radius: 10px;
    background-color: var(--dv-surface);
    color: var(--dv-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--dv-text-muted) 50%),
        linear-gradient(135deg, var(--dv-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}

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

/* ─── Upload tracker ──────────────────────────────────────── */

.dv-uploads[b-h9uivkzb2y] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--dv-border);
    border-radius: 12px;
    background: var(--dv-surface);
    overflow: hidden;
}

.dv-uploads-head[b-h9uivkzb2y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.85rem;
    background: var(--dv-surface-2);
    border-bottom: 1px solid var(--dv-border);
}

.dv-uploads-title[b-h9uivkzb2y] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--dv-text-soft);
}

.dv-uploads-num[b-h9uivkzb2y] {
    min-width: 1.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--dv-brand-soft);
    color: var(--dv-brand);
    font-size: 11px;
    text-align: center;
}

.dv-uploads-clear[b-h9uivkzb2y] {
    border: none;
    background: transparent;
    color: var(--dv-brand);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.dv-uploads-clear:hover[b-h9uivkzb2y] { text-decoration: underline; }

.dv-upload[b-h9uivkzb2y] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--dv-border);
}

.dv-upload:last-child[b-h9uivkzb2y] { border-bottom: none; }

.dv-upload-status[b-h9uivkzb2y] {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-sizing: border-box;
}

.dv-upload[data-state="queued"] .dv-upload-status[b-h9uivkzb2y] {
    border: 2px solid var(--dv-border-strong);
}

.dv-upload[data-state="uploading"] .dv-upload-status[b-h9uivkzb2y] {
    border: 2px solid var(--dv-border);
    border-top-color: var(--dv-brand);
    animation: dv-spin-b-h9uivkzb2y 0.7s linear infinite;
}

.dv-upload[data-state="done"] .dv-upload-status[b-h9uivkzb2y] { background: var(--accent-bright); }
.dv-upload[data-state="failed"] .dv-upload-status[b-h9uivkzb2y] { background: var(--dv-danger); }

.dv-upload[data-state="done"] .dv-upload-status[b-h9uivkzb2y]::after,
.dv-upload[data-state="failed"] .dv-upload-status[b-h9uivkzb2y]::after {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--white);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.dv-upload[data-state="done"] .dv-upload-status[b-h9uivkzb2y]::after { content: "✓"; }
.dv-upload[data-state="failed"] .dv-upload-status[b-h9uivkzb2y]::after { content: "!"; }

@keyframes dv-spin-b-h9uivkzb2y { to { transform: rotate(360deg); } }

.dv-upload-body[b-h9uivkzb2y] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dv-upload-name[b-h9uivkzb2y] {
    font-size: 13px;
    font-weight: 600;
    color: var(--dv-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dv-upload-stat[b-h9uivkzb2y] {
    font-size: 11.5px;
    color: var(--dv-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dv-upload[data-state="failed"] .dv-upload-stat[b-h9uivkzb2y] { color: var(--dv-danger); }

.dv-upload-size[b-h9uivkzb2y] {
    flex-shrink: 0;
    font-size: 11.5px;
    color: var(--dv-text-soft);
    font-variant-numeric: tabular-nums;
}

.dv-btn.dv-btn-xs[b-h9uivkzb2y] {
    height: 28px;
    padding: 0 0.65rem;
    font-size: 11.5px;
}

.dv-iconbtn.dv-iconbtn-sm[b-h9uivkzb2y] {
    width: 26px;
    height: 26px;
}

.dv-iconbtn.dv-iconbtn-sm svg[b-h9uivkzb2y] { width: 13px; height: 13px; }

/* ─── Toolbar ─────────────────────────────────────────────── */

.dv-toolbar[b-h9uivkzb2y] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.dv-crumb[b-h9uivkzb2y] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.dv-crumb-here[b-h9uivkzb2y] {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--dv-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dv-crumb-count[b-h9uivkzb2y] {
    font-size: 12px;
    font-weight: 600;
    color: var(--dv-text-soft);
    flex-shrink: 0;
}

.dv-search[b-h9uivkzb2y] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.7rem;
    height: 36px;
    width: 15rem;
    background: var(--dv-surface);
    border: 1px solid var(--dv-border-strong);
    border-radius: 10px;
    transition: border-color 130ms ease, box-shadow 130ms ease;
}

.dv-search:focus-within[b-h9uivkzb2y] {
    border-color: var(--dv-brand-bright);
    box-shadow: 0 0 0 3px var(--dv-brand-glow);
}

.dv-search svg[b-h9uivkzb2y] { width: 15px; height: 15px; color: var(--dv-text-soft); flex-shrink: 0; }

.dv-search input[b-h9uivkzb2y] {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: 13px;
    color: var(--dv-text);
}

.dv-search input[b-h9uivkzb2y]::placeholder { color: var(--dv-text-soft); }
.dv-search input[b-h9uivkzb2y]::-webkit-search-cancel-button { appearance: none; }

.dv-sort[b-h9uivkzb2y] {
    height: 36px;
    padding: 0 2rem 0 0.75rem;
    border: 1px solid var(--dv-border-strong);
    border-radius: 10px;
    background-color: var(--dv-surface);
    color: var(--dv-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--dv-text-muted) 50%),
        linear-gradient(135deg, var(--dv-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}

.dv-sort:focus-visible[b-h9uivkzb2y] {
    outline: none;
    border-color: var(--dv-brand-bright);
    box-shadow: 0 0 0 3px var(--dv-brand-glow);
}

.dv-viewtoggle[b-h9uivkzb2y] {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border);
    border-radius: 10px;
}

.dv-viewtoggle button[b-h9uivkzb2y] {
    width: 30px;
    height: 28px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--dv-text-soft);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.dv-viewtoggle button:hover[b-h9uivkzb2y] { color: var(--dv-text); }

.dv-viewtoggle button.is-active[b-h9uivkzb2y] {
    background: var(--dv-surface);
    color: var(--dv-brand);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.12);
}

.dv-viewtoggle svg[b-h9uivkzb2y] { width: 16px; height: 16px; }

/* ─── File-type icon tile (shared by list, grid, panel) ───── */

.dv-ficon[b-h9uivkzb2y] {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--dv-surface-2);
    color: var(--dv-text-soft);
}

.dv-ficon svg[b-h9uivkzb2y] { width: 20px; height: 20px; }

.dv-ficon-img[b-h9uivkzb2y] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9px;
    display: block;
}

.dv-ficon-lg[b-h9uivkzb2y] { width: 46px; height: 46px; border-radius: 11px; }
.dv-ficon-lg svg[b-h9uivkzb2y] { width: 24px; height: 24px; }

.dv-ficon-xl[b-h9uivkzb2y] { width: 84px; height: 84px; border-radius: 20px; }
.dv-ficon-xl svg[b-h9uivkzb2y] { width: 38px; height: 38px; }

.dv-ficon[data-fc="image"][b-h9uivkzb2y]   { background: color-mix(in srgb, var(--t-image) 15%, var(--dv-surface));   color: var(--t-image); }
.dv-ficon[data-fc="pdf"][b-h9uivkzb2y]     { background: color-mix(in srgb, var(--t-pdf) 15%, var(--dv-surface));     color: var(--t-pdf); }
.dv-ficon[data-fc="doc"][b-h9uivkzb2y]     { background: color-mix(in srgb, var(--t-doc) 15%, var(--dv-surface));     color: var(--t-doc); }
.dv-ficon[data-fc="sheet"][b-h9uivkzb2y]   { background: color-mix(in srgb, var(--t-sheet) 15%, var(--dv-surface));   color: var(--t-sheet); }
.dv-ficon[data-fc="slides"][b-h9uivkzb2y]  { background: color-mix(in srgb, var(--t-slides) 15%, var(--dv-surface));  color: var(--t-slides); }
.dv-ficon[data-fc="video"][b-h9uivkzb2y]   { background: color-mix(in srgb, var(--t-video) 15%, var(--dv-surface));   color: var(--t-video); }
.dv-ficon[data-fc="audio"][b-h9uivkzb2y]   { background: color-mix(in srgb, var(--t-audio) 15%, var(--dv-surface));   color: var(--t-audio); }
.dv-ficon[data-fc="archive"][b-h9uivkzb2y] { background: color-mix(in srgb, var(--t-archive) 15%, var(--dv-surface)); color: var(--t-archive); }
.dv-ficon[data-fc="generic"][b-h9uivkzb2y] { background: color-mix(in srgb, var(--t-generic) 15%, var(--dv-surface)); color: var(--t-generic); }

/* ─── Category tag (shared) ───────────────────────────────── */

.dv-kindtag[b-h9uivkzb2y] {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.dv-kindtag[data-tone="mandate"][b-h9uivkzb2y]     { background: color-mix(in srgb, var(--t-mandate) 14%, var(--dv-surface));     color: var(--t-mandate); }
.dv-kindtag[data-tone="inspection"][b-h9uivkzb2y]  { background: color-mix(in srgb, var(--t-inspection) 14%, var(--dv-surface));  color: var(--t-inspection); }
.dv-kindtag[data-tone="lease"][b-h9uivkzb2y]       { background: var(--dv-brand-soft); color: var(--dv-brand); }
.dv-kindtag[data-tone="fica"][b-h9uivkzb2y]        { background: color-mix(in srgb, var(--t-fica) 16%, var(--dv-surface));        color: var(--t-fica); }
.dv-kindtag[data-tone="maintenance"][b-h9uivkzb2y] { background: color-mix(in srgb, var(--t-maintenance) 14%, var(--dv-surface)); color: var(--t-maintenance); }
.dv-kindtag[data-tone="other"][b-h9uivkzb2y]       { background: color-mix(in srgb, var(--t-other) 14%, var(--dv-surface));       color: var(--t-other); }

/* Agency category chip — the colour is carried in via the --cat
   custom property so one rule serves every tenant-defined colour. */
.dv-cattag[b-h9uivkzb2y] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 11rem;
    padding: 0.12rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--cat, var(--dv-border)) 55%, var(--dv-border));
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--dv-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dv-catdot[b-h9uivkzb2y] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cat, var(--dv-text-soft));
    flex: none;
}

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

.dv-list[b-h9uivkzb2y] {
    background: var(--dv-surface);
    border: 1px solid var(--dv-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.04),
                0 12px 30px -24px rgba(var(--shadow-rgb),  0.34);
}

.dv-list-head[b-h9uivkzb2y],
.dv-row[b-h9uivkzb2y] {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 132px 152px 84px 96px;
    align-items: center;
    gap: 0.75rem;
}

.dv-list-head[b-h9uivkzb2y] {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--dv-border);
    background: var(--dv-surface-2);
}

.dv-list-head span[b-h9uivkzb2y] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--dv-text-soft);
}

.dv-row[b-h9uivkzb2y] {
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--dv-border);
    cursor: pointer;
    transition: background 110ms ease;
}

.dv-row:last-child[b-h9uivkzb2y] { border-bottom: none; }
.dv-row:hover[b-h9uivkzb2y] { background: var(--dv-brand-soft); }

.dv-row.is-selected[b-h9uivkzb2y] {
    background: var(--dv-brand-soft);
    box-shadow: inset 3px 0 0 var(--dv-brand-bright);
}

/* The active (keyboard-focused) row carries the inset bar. The
   list/grid take keyboard focus for arrow-key navigation — the
   active highlight is the focus cue, so the container's own focus
   outline is suppressed. */
.dv-row.is-active[b-h9uivkzb2y] {
    box-shadow: inset 3px 0 0 var(--dv-brand-bright);
}

.dv-list:focus-visible[b-h9uivkzb2y],
.dv-grid:focus-visible[b-h9uivkzb2y] { outline: none; }

.dv-row-name[b-h9uivkzb2y] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.dv-row-namecol[b-h9uivkzb2y] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.dv-row-title[b-h9uivkzb2y] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dv-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dv-row-sub[b-h9uivkzb2y] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 11px;
    color: var(--dv-text-soft);
}

.dv-ext[b-h9uivkzb2y] {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.dv-row-folder[b-h9uivkzb2y] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.dv-row-folder[b-h9uivkzb2y]::before {
    content: "";
    width: 11px;
    height: 9px;
    background: currentColor;
    -webkit-mask: var(--dv-folder-mask) center / contain no-repeat;
    mask: var(--dv-folder-mask) center / contain no-repeat;
    opacity: 0.8;
}

.dv-shell[b-h9uivkzb2y] {
    --dv-folder-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M2 4a2 2 0 0 1 2-2h4l2 3h8a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}

.dv-pending[b-h9uivkzb2y] {
    color: var(--warning);
    font-weight: 700;
}
[data-theme="dark"] .dv-pending[b-h9uivkzb2y] { color: var(--warning-bright); }

.dv-row-cat[b-h9uivkzb2y] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    min-width: 0;
}

.dv-row-mod[b-h9uivkzb2y] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 12px;
    color: var(--dv-text-muted);
    min-width: 0;
}

.dv-row-modby[b-h9uivkzb2y] {
    font-size: 11px;
    color: var(--dv-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dv-row-size[b-h9uivkzb2y] {
    font-size: 12px;
    color: var(--dv-text-muted);
    font-variant-numeric: tabular-nums;
}

.dv-row-actions[b-h9uivkzb2y] {
    display: flex;
    gap: 0.2rem;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 120ms ease;
}

.dv-row:hover .dv-row-actions[b-h9uivkzb2y],
.dv-row.is-selected .dv-row-actions[b-h9uivkzb2y] { opacity: 1; }

@media (hover: none) {
    .dv-row-actions[b-h9uivkzb2y] { opacity: 1; }
}

.dv-iconbtn[b-h9uivkzb2y] {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--dv-text-soft);
    cursor: pointer;
    transition: background 110ms ease, color 110ms ease;
}

.dv-iconbtn:hover[b-h9uivkzb2y] {
    background: var(--dv-surface-2);
    color: var(--dv-brand);
}

.dv-iconbtn svg[b-h9uivkzb2y] { width: 16px; height: 16px; }

/* ─── Grid view ───────────────────────────────────────────── */

.dv-grid[b-h9uivkzb2y] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
    gap: 0.85rem;
}

.dv-card[b-h9uivkzb2y] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.85rem;
    border: 1px solid var(--dv-border);
    border-radius: 13px;
    background: var(--dv-surface);
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: border-color 130ms ease, box-shadow 130ms ease, transform 130ms ease;
}

.dv-card:hover[b-h9uivkzb2y] {
    border-color: var(--dv-border-strong);
    box-shadow: 0 10px 26px -16px rgba(var(--shadow-rgb),  0.34);
    transform: translateY(-2px);
}

.dv-card.is-selected[b-h9uivkzb2y] {
    border-color: var(--dv-brand-bright);
    box-shadow: 0 0 0 3px var(--dv-brand-glow);
}

.dv-card-thumb[b-h9uivkzb2y] {
    position: relative;
    height: 132px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    overflow: hidden;
    background: var(--dv-surface-2);
    color: var(--dv-text-soft);
}

.dv-card-thumb svg[b-h9uivkzb2y] { width: 34px; height: 34px; }

.dv-card-thumb-img[b-h9uivkzb2y] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dv-card-thumb[data-fc="image"][b-h9uivkzb2y]   { background: color-mix(in srgb, var(--t-image) 14%, var(--dv-surface));   color: var(--t-image); }
.dv-card-thumb[data-fc="pdf"][b-h9uivkzb2y]     { background: color-mix(in srgb, var(--t-pdf) 14%, var(--dv-surface));     color: var(--t-pdf); }
.dv-card-thumb[data-fc="doc"][b-h9uivkzb2y]     { background: color-mix(in srgb, var(--t-doc) 14%, var(--dv-surface));     color: var(--t-doc); }
.dv-card-thumb[data-fc="sheet"][b-h9uivkzb2y]   { background: color-mix(in srgb, var(--t-sheet) 14%, var(--dv-surface));   color: var(--t-sheet); }
.dv-card-thumb[data-fc="slides"][b-h9uivkzb2y]  { background: color-mix(in srgb, var(--t-slides) 14%, var(--dv-surface));  color: var(--t-slides); }
.dv-card-thumb[data-fc="video"][b-h9uivkzb2y]   { background: color-mix(in srgb, var(--t-video) 14%, var(--dv-surface));   color: var(--t-video); }
.dv-card-thumb[data-fc="audio"][b-h9uivkzb2y]   { background: color-mix(in srgb, var(--t-audio) 14%, var(--dv-surface));   color: var(--t-audio); }
.dv-card-thumb[data-fc="archive"][b-h9uivkzb2y] { background: color-mix(in srgb, var(--t-archive) 14%, var(--dv-surface)); color: var(--t-archive); }
.dv-card-thumb[data-fc="generic"][b-h9uivkzb2y] { background: color-mix(in srgb, var(--t-generic) 14%, var(--dv-surface)); color: var(--t-generic); }

.dv-card-ext[b-h9uivkzb2y] {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    background: var(--dv-surface);
    color: currentColor;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.14);
}

.dv-card-badge[b-h9uivkzb2y] {
    position: absolute;
    right: 8px;
    top: 8px;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: var(--warning);
    color: var(--white);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dv-card-title[b-h9uivkzb2y] {
    font-size: 13px;
    font-weight: 600;
    color: var(--dv-text);
    line-height: 1.35;
    /* Always reserve two lines so a one-line name and a two-line name
       produce the same card height — the grid stays even, no card is
       taller or shorter than its neighbours. */
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Long unbroken filenames (no spaces) must wrap inside the card
       instead of overflowing it and colliding with the next card. */
    overflow-wrap: anywhere;
}

.dv-card-meta[b-h9uivkzb2y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

.dv-card-size[b-h9uivkzb2y] {
    font-size: 11px;
    color: var(--dv-text-soft);
    font-variant-numeric: tabular-nums;
}

.dv-card-foot[b-h9uivkzb2y] {
    font-size: 11px;
    color: var(--dv-text-soft);
}

/* ─── Details / history panel ─────────────────────────────── */

.dv-panel-backdrop[b-h9uivkzb2y] {
    position: fixed;
    inset: 0;
    background: rgba(var(--shadow-rgb),  0.36);
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
    z-index: calc(var(--z-dialog, 200) - 1);
    animation: dv-fade-b-h9uivkzb2y 160ms ease-out;
}

.dv-panel[b-h9uivkzb2y] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 392px;
    max-width: 92vw;
    z-index: var(--z-dialog, 200);
    display: flex;
    flex-direction: column;
    background: var(--dv-surface);
    border-left: 1px solid var(--dv-border);
    box-shadow: -24px 0 48px -24px rgba(var(--shadow-rgb),  0.45);
    overflow-y: auto;
    animation: dv-slide-in-b-h9uivkzb2y 220ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

@keyframes dv-fade-b-h9uivkzb2y {
    from { opacity: 0; }
    to   { opacity: 1; }
}

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

.dv-panel-head[b-h9uivkzb2y] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--dv-border);
    position: sticky;
    top: 0;
    background: var(--dv-surface);
    z-index: 1;
}

.dv-panel-headtext[b-h9uivkzb2y] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dv-panel-name[b-h9uivkzb2y] {
    font-size: 14px;
    font-weight: 700;
    color: var(--dv-text);
    line-height: 1.3;
    word-break: break-word;
}

.dv-panel-meta[b-h9uivkzb2y] {
    font-size: 11.5px;
    color: var(--dv-text-soft);
    font-weight: 600;
}

.dv-panel-actions[b-h9uivkzb2y] {
    display: flex;
    gap: 0.4rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--dv-border);
}

.dv-panel-pending[b-h9uivkzb2y] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.9rem 1.1rem;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    background: var(--dv-surface-2);
    color: var(--dv-text-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

.dv-panel-pending p[b-h9uivkzb2y] { margin: 0; }

.dv-panel-section[b-h9uivkzb2y] {
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid var(--dv-border);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.dv-panel-section:last-child[b-h9uivkzb2y] { border-bottom: none; }
.dv-panel-grow[b-h9uivkzb2y] { flex: 1; }

.dv-panel-label[b-h9uivkzb2y] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dv-text-soft);
}

.dv-panel-toolrow[b-h9uivkzb2y] { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ─── Buttons ─────────────────────────────────────────────── */

.dv-btn[b-h9uivkzb2y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 36px;
    padding: 0 0.85rem;
    border: 1px solid var(--dv-border-strong);
    border-radius: 9px;
    background: var(--dv-surface);
    color: var(--dv-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.dv-btn:hover[b-h9uivkzb2y] { border-color: var(--dv-brand-bright); transform: translateY(-1px); }
.dv-btn svg[b-h9uivkzb2y] { width: 15px; height: 15px; }

.dv-btn-primary[b-h9uivkzb2y] {
    flex: 1;
    border-color: transparent;
    background: linear-gradient(135deg, var(--dv-brand-bright), var(--dv-brand));
    color: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.20);
}

.dv-btn-primary:hover[b-h9uivkzb2y] {
    border-color: transparent;
    box-shadow: 0 6px 16px -6px var(--dv-brand-glow);
}

.dv-btn-soft[b-h9uivkzb2y] {
    background: var(--dv-surface-2);
    border-color: var(--dv-border);
    color: var(--dv-text-muted);
}

.dv-btn-soft:hover[b-h9uivkzb2y] { color: var(--dv-text); }

.dv-btn-danger[b-h9uivkzb2y] {
    background: var(--dv-danger-soft);
    border-color: color-mix(in srgb, var(--dv-danger) 30%, transparent);
    color: var(--dv-danger);
}

.dv-btn-danger:hover[b-h9uivkzb2y] { border-color: var(--dv-danger); }

.dv-inline[b-h9uivkzb2y] { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.dv-inline input[b-h9uivkzb2y] {
    flex: 1;
    min-width: 11rem;
    height: 36px;
    padding: 0 0.7rem;
    border: 1px solid var(--dv-border-strong);
    border-radius: 9px;
    background: var(--dv-surface);
    color: var(--dv-text);
    font: inherit;
    font-size: 13px;
}

.dv-inline input:focus-visible[b-h9uivkzb2y] {
    outline: none;
    border-color: var(--dv-brand-bright);
    box-shadow: 0 0 0 3px var(--dv-brand-glow);
}

.dv-inline-hint[b-h9uivkzb2y] {
    margin: 0;
    font-size: 11.5px;
    color: var(--dv-text-soft);
}

/* ─── Detail metadata ─────────────────────────────────────── */

.dv-meta[b-h9uivkzb2y] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dv-meta > div[b-h9uivkzb2y] {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 0.6rem;
}

.dv-meta dt[b-h9uivkzb2y] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dv-text-soft);
}

.dv-meta dd[b-h9uivkzb2y] {
    margin: 0;
    font-size: 12.5px;
    color: var(--dv-text);
    word-break: break-word;
}

.dv-counters[b-h9uivkzb2y] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.2rem;
}

.dv-counters span[b-h9uivkzb2y] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem;
    border-radius: 9px;
    background: var(--dv-surface-2);
    color: var(--dv-text-muted);
    font-size: 12.5px;
    font-weight: 700;
}

.dv-counters svg[b-h9uivkzb2y] { width: 15px; height: 15px; color: var(--dv-text-soft); }

.dv-muted[b-h9uivkzb2y] {
    margin: 0;
    font-size: 12.5px;
    color: var(--dv-text-soft);
}

/* ─── Activity timeline ───────────────────────────────────── */

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

.dv-tl-item[b-h9uivkzb2y] {
    position: relative;
    padding-left: 0.95rem;
}

.dv-tl-dot[b-h9uivkzb2y] {
    position: absolute;
    left: -7px;
    top: 4px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--dv-brand);
    border: 2px solid var(--dv-surface);
    box-shadow: 0 0 0 1px var(--dv-border);
}

.dv-tl-item[data-kind="madeavailable"] .dv-tl-dot[b-h9uivkzb2y] { background: var(--accent-bright); }
.dv-tl-item[data-kind="viewed"] .dv-tl-dot[b-h9uivkzb2y]        { background: var(--accent-bright); }
.dv-tl-item[data-kind="downloaded"] .dv-tl-dot[b-h9uivkzb2y]    { background: var(--info-bright); }
.dv-tl-item[data-kind="shared"] .dv-tl-dot[b-h9uivkzb2y]        { background: var(--warning); }
.dv-tl-item[data-kind="deleted"] .dv-tl-dot[b-h9uivkzb2y]       { background: var(--danger-bright); }
.dv-tl-item[data-kind="renamed"] .dv-tl-dot[b-h9uivkzb2y],
.dv-tl-item[data-kind="movedtofolder"] .dv-tl-dot[b-h9uivkzb2y],
.dv-tl-item[data-kind="descriptionupdated"] .dv-tl-dot[b-h9uivkzb2y] { background: var(--tone-purple); }

.dv-tl-body[b-h9uivkzb2y] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dv-tl-text[b-h9uivkzb2y] {
    font-size: 12.5px;
    color: var(--dv-text-muted);
    line-height: 1.4;
}

.dv-tl-text strong[b-h9uivkzb2y] { color: var(--dv-text); font-weight: 700; }

.dv-tl-time[b-h9uivkzb2y] {
    font-size: 11px;
    color: var(--dv-text-soft);
}

/* ─── Photos wrapper ──────────────────────────────────────── */

.dv-photos > :first-child[b-h9uivkzb2y] { margin-bottom: 0; }

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

@media (max-width: 960px) {
    .dv-workspace[b-h9uivkzb2y] {
        grid-template-columns: 1fr;
    }
    .dv-rail[b-h9uivkzb2y] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem 1.25rem;
    }
    .dv-rail-group[b-h9uivkzb2y] { flex: 1; min-width: 13rem; }
    .dv-rail-meta[b-h9uivkzb2y] { width: 100%; flex-direction: row; gap: 1.25rem; border-top: none; padding-top: 0; }
}

@media (max-width: 680px) {
    .dv-head-icon[b-h9uivkzb2y] { width: 44px; height: 44px; }
    .dv-uploadbar[b-h9uivkzb2y] { flex-direction: column; }
    .dv-uploadkind[b-h9uivkzb2y] { flex-direction: row; align-items: center; gap: 0.5rem; }
    .dv-search[b-h9uivkzb2y] { width: 100%; order: 3; }
    .dv-crumb[b-h9uivkzb2y] { width: 100%; }

    .dv-list-head[b-h9uivkzb2y] { display: none; }
    .dv-row[b-h9uivkzb2y] {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "check name actions" "check meta meta";
        gap: 0.3rem 0.6rem;
        padding: 0.7rem 0.85rem;
    }
    .dv-row-check[b-h9uivkzb2y] { grid-area: check; }
    .dv-row-name[b-h9uivkzb2y] { grid-area: name; }
    .dv-row-actions[b-h9uivkzb2y] { grid-area: actions; opacity: 1; }
    .dv-row-cat[b-h9uivkzb2y] { grid-area: meta; display: flex; align-items: center; gap: 0.5rem; }
    .dv-row-mod[b-h9uivkzb2y], .dv-row-size[b-h9uivkzb2y] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dv-panel[b-h9uivkzb2y],
    .dv-panel-backdrop[b-h9uivkzb2y],
    .dv-card[b-h9uivkzb2y],
    .dv-btn[b-h9uivkzb2y],
    .dv-dropzone[b-h9uivkzb2y] { animation: none; transition: none; }
}

/* ─── Document preview overlay ─────────────────────────────── */

.dv-preview-backdrop[b-h9uivkzb2y] {
    position: fixed;
    inset: 0;
    z-index: 320;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5vh 2.5vw;
    background: rgba(var(--shadow-rgb),  0.62);
    backdrop-filter: blur(2px);
}

.dv-preview[b-h9uivkzb2y] {
    display: flex;
    flex-direction: column;
    width: min(1100px, 95vw);
    height: 95vh;
    background: var(--dv-surface);
    border: 1px solid var(--dv-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 70px -20px rgba(var(--shadow-rgb),  0.55);
}

.dv-preview-bar[b-h9uivkzb2y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--dv-border);
    background: var(--dv-surface-2);
    flex: none;
}

.dv-preview-name[b-h9uivkzb2y] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--dv-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dv-preview-tools[b-h9uivkzb2y] {
    display: flex;
    gap: 0.4rem;
    flex: none;
}

.dv-preview-frame[b-h9uivkzb2y] {
    flex: 1;
    width: 100%;
    border: 0;
    background: var(--dv-surface-2);
}

.dv-preview-imgwrap[b-h9uivkzb2y] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 1rem;
    background: var(--dv-surface-2);
}

.dv-preview-img[b-h9uivkzb2y] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

.dv-preview-video[b-h9uivkzb2y] {
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
    background: var(--black);
}

.dv-preview-audiowrap[b-h9uivkzb2y] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--dv-surface-2);
}

.dv-preview-audiowrap audio[b-h9uivkzb2y] { width: min(440px, 100%); }

/* Card shown when a file can't render inline — Office documents
   before their viewer is loaded, archives, unknown types. */
.dv-preview-fallback[b-h9uivkzb2y] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem 2rem;
    text-align: center;
    background: var(--dv-surface-2);
}

.dv-preview-fbtitle[b-h9uivkzb2y] {
    margin-top: 0.4rem;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--dv-text);
}

.dv-preview-fbtext[b-h9uivkzb2y] {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--dv-text-muted);
    max-width: 44ch;
}

.dv-preview-fbactions[b-h9uivkzb2y] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.7rem;
}

/* Neutralise the flex:1 the primary button carries for the details
   panel — in the centred fallback card the buttons size to content. */
.dv-preview-fbactions .dv-btn[b-h9uivkzb2y] { flex: 0 0 auto; }

.dv-preview-fbnote[b-h9uivkzb2y] {
    margin: 0.15rem 0 0;
    font-size: 11px;
    color: var(--dv-text-soft);
}
/* /Components/Pages/Listings/NewListingPage.razor.rz.scp.css */
/* New listing wizard.
   Visual cousin of the team-member editor (TeamMemberEditorPage.razor.css)
   but tuned to property listings: brand uses the existing teal accent so it
   reads as a separate flow from team management. Light + dark via
   [data-theme="dark"] overrides on the .lst-wizard root.

   Layout:
     - sticky stepper (top)
     - step card (centre)
     - sticky footer with Back / Next / Save
     - optional preview tile on the review step

   Components used:
     - <PortalIcon> via ::deep selectors (because the wizard renders shared
       components and Blazor CSS isolation otherwise sandboxes their styles)
*/

.lst-wizard[b-1pk9dvyal9] {
    /* Brand: forest green — matches the Asetrix logo and the auth
       (login / sign-up) pages. Tokens are local to the component,
       mirroring the team-editor approach, so the visual language stays
       self-contained even if the design-system tokens drift. */
    --l-brand:          var(--accent);
    --l-brand-bright:   var(--accent-bright);
    --l-brand-deep:     var(--accent);
    --l-brand-soft:     rgba(var(--accent-bright-rgb),  0.08);
    --l-brand-glow:     rgba(var(--accent-bright-rgb),  0.14);

    --l-bg:             var(--surface-2);
    --l-surface:        var(--white);
    --l-surface-2:      var(--surface-2);
    --l-border:         rgba(var(--accent-bright-rgb),  0.10);
    --l-border-strong:  rgba(var(--accent-bright-rgb),  0.20);
    --l-text:           var(--text);
    --l-text-muted:     var(--text-secondary);
    --l-text-soft:      var(--text-tertiary);
    --l-danger:         var(--danger);
    --l-danger-soft:    rgba(var(--danger-rgb),  0.08);
    --l-warn:           var(--warning-text);
    --l-warn-soft:      rgba(var(--gold-rgb),  0.14);

    /* Local scale knob — multiplied by the layout-level
       --portal-content-scale (driven by the sidebar's Aa cycle).
       All major text below uses calc(...px * var(--l-scale)) so the
       wizard's headlines, body text and buttons grow/shrink with
       the user's preferred reading size. */
    --l-scale: var(--portal-content-scale, 1);

    /* Full-width — fills the portal content area exactly like the
       edit page (.lst-editor), instead of a centred 1100px column. */
    width: 100%;
    padding: 0 0.25rem 6rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--l-text);
    font-size: calc(15px * var(--l-scale));
}

[data-theme="dark"] .lst-wizard[b-1pk9dvyal9] {
    --l-bg:             var(--bg);
    --l-surface:        var(--surface);
    --l-surface-2:      var(--surface);
    --l-border:         rgba(var(--accent-rgb),  0.14);
    --l-border-strong:  rgba(var(--accent-rgb),  0.26);
    --l-text:           var(--text);
    --l-text-muted:     var(--text-secondary);
    --l-text-soft:      var(--text-tertiary);
    --l-brand:          var(--accent-bright);
    --l-brand-bright:   var(--accent);
    --l-brand-deep:     var(--accent);
    --l-brand-soft:     rgba(var(--accent-rgb),  0.08);
    --l-brand-glow:     rgba(var(--accent-rgb),  0.18);
}

/* ─── Flag toggle cards (mandate flags) ──────────────────────
   Mirrors EditListingPage so the wizard's mandate flags read as
   the same toggle switches, not bare chips. */

.lst-flag-grid[b-1pk9dvyal9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.625rem;
}

.lst-flag-card[b-1pk9dvyal9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    background: var(--l-bg);
    border: 1.5px solid var(--l-border);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--l-text);
    transition: border-color 140ms ease, background 140ms ease;
}

.lst-flag-card:hover[b-1pk9dvyal9] {
    border-color: var(--l-border-strong);
    background: var(--l-surface);
}

.lst-flag-card.is-on[b-1pk9dvyal9] {
    background: linear-gradient(135deg, var(--l-brand-soft), var(--l-surface) 70%);
    border-color: var(--l-brand-bright);
}

.lst-flag-toggle[b-1pk9dvyal9] {
    flex-shrink: 0;
    width: 38px; height: 22px;
    background: var(--l-surface-2);
    border: 1px solid var(--l-border-strong);
    border-radius: 999px;
    position: relative;
    transition: background 140ms ease;
}

.lst-flag-card.is-on .lst-flag-toggle[b-1pk9dvyal9] {
    background: linear-gradient(135deg, var(--l-brand-bright), var(--l-brand));
    border-color: transparent;
}

.lst-flag-toggle[b-1pk9dvyal9]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--white);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.2);
    transition: transform 140ms ease;
}

.lst-flag-card.is-on .lst-flag-toggle[b-1pk9dvyal9]::after {
    transform: translateX(16px);
}

/* Sale-only accent card ("No transfer duty") — tinted amber so the
   buyer-side signal stands out from the standard property flags. */
.lst-flag-card-accent[b-1pk9dvyal9] {
    border-color: color-mix(in srgb, var(--gold) 35%, var(--l-border));
}

.lst-flag-card-accent.is-on[b-1pk9dvyal9] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--gold) 18%, var(--l-surface)),
        var(--l-surface) 75%);
    border-color: var(--gold);
    box-shadow: 0 1px 2px rgba(var(--gold-rgb),  0.10),
                0 8px 22px -10px rgba(var(--gold-rgb),  0.40);
}

.lst-flag-card-accent.is-on .lst-flag-toggle[b-1pk9dvyal9] {
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
}

.lst-flag-card-accent.is-on .lst-flag-name[b-1pk9dvyal9] { color: var(--warning-text); }
[data-theme="dark"] .lst-flag-card-accent.is-on .lst-flag-name[b-1pk9dvyal9] { color: var(--gold-bright); }

.lst-flag-text[b-1pk9dvyal9] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.lst-flag-name[b-1pk9dvyal9] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--l-text);
}

.lst-flag-desc[b-1pk9dvyal9] {
    font-size: 11.5px;
    color: var(--l-text-soft);
}

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

.lst-page-head[b-1pk9dvyal9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--l-brand-bright) 5%, var(--l-surface)) 0%,
            var(--l-surface) 60%);
    border: 1px solid var(--l-border);
    border-radius: 16px;
    box-shadow:
        0 1px 2px rgba(var(--shadow-rgb),  0.04),
        0 8px 24px -12px rgba(var(--shadow-rgb),  0.12);
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.lst-page-head[b-1pk9dvyal9]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--l-brand), var(--l-brand-bright), var(--l-brand));
}

.lst-page-eyebrow[b-1pk9dvyal9] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    background: var(--l-brand-soft);
    color: var(--l-brand);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lst-page-title[b-1pk9dvyal9] {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: calc(28px * var(--l-scale));
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0.5rem 0 0.25rem;
    color: var(--l-text);
}

.lst-page-sub[b-1pk9dvyal9] {
    margin: 0;
    color: var(--l-text-muted);
    font-size: calc(14px * var(--l-scale));
    line-height: 1.5;
    max-width: 56ch;
}

/* ─── Stepper ─────────────────────────────────────────── */

.lst-stepper[b-1pk9dvyal9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: 12px;
    overflow-x: auto;
}

.lst-step[b-1pk9dvyal9] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    padding: 0.375rem 0.5rem;
    /* Upcoming steps were --l-text-soft (tertiary) — too dim to read as
       primary wizard nav in dark mode. Muted (secondary) is clearly legible
       while still ranking below the active/done steps. */
    color: var(--l-text-muted);
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: color 140ms ease, background 140ms ease;
}

.lst-step:hover:not(:disabled)[b-1pk9dvyal9] {
    color: var(--l-text);
    background: var(--l-brand-soft);
}

.lst-step:disabled[b-1pk9dvyal9] {
    cursor: not-allowed;
}

.lst-step-num[b-1pk9dvyal9] {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--l-surface-2);
    border: 1.5px solid var(--l-border);
    color: var(--l-text-soft);
    font-size: 12px;
    font-weight: 700;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.lst-step.is-active .lst-step-num[b-1pk9dvyal9] {
    background: linear-gradient(135deg, var(--l-brand-bright), var(--l-brand));
    color: var(--white);
    border-color: transparent;
    box-shadow: 0 0 0 3px var(--l-brand-glow);
}

.lst-step.is-done .lst-step-num[b-1pk9dvyal9] {
    background: var(--l-brand-soft);
    color: var(--l-brand);
    border-color: var(--l-brand);
}

.lst-step.is-active[b-1pk9dvyal9] {
    color: var(--l-text);
}

.lst-step-arrow[b-1pk9dvyal9] {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--l-text-soft);
    opacity: 0.5;
}

/* ─── Step panel ──────────────────────────────────────── */

.lst-panel[b-1pk9dvyal9] {
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: 16px;
    padding: 1.75rem;
    margin-bottom: 1rem;
}

.lst-panel-head[b-1pk9dvyal9] {
    margin-bottom: 1.25rem;
}

.lst-panel-eyebrow[b-1pk9dvyal9] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--l-brand);
}

.lst-panel-title[b-1pk9dvyal9] {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: calc(22px * var(--l-scale));
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0.25rem 0 0.3rem;
    color: var(--l-text);
}

.lst-panel-hint[b-1pk9dvyal9] {
    margin: 0;
    color: var(--l-text-muted);
    font-size: calc(13.5px * var(--l-scale));
    line-height: 1.5;
    max-width: 60ch;
}

/* ─── Listing-type toggle (Sale / Rent) ──────────────── */

.lst-type-toggle[b-1pk9dvyal9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.lst-type-btn[b-1pk9dvyal9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--l-surface);
    border: 2px solid var(--l-border);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--l-text);
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.lst-type-btn:hover[b-1pk9dvyal9] {
    border-color: var(--l-border-strong);
    transform: translateY(-1px);
}

.lst-type-btn.is-on[b-1pk9dvyal9] {
    background: linear-gradient(135deg, var(--l-brand-soft), var(--l-surface) 70%);
    border-color: var(--l-brand-bright);
    box-shadow: 0 4px 12px -4px var(--l-brand-glow);
}

.lst-type-icon[b-1pk9dvyal9] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--l-surface-2);
    color: var(--l-brand);
    flex-shrink: 0;
}

.lst-type-btn.is-on .lst-type-icon[b-1pk9dvyal9] {
    background: linear-gradient(135deg, var(--l-brand-bright), var(--l-brand));
    color: var(--white);
}

.lst-type-icon svg[b-1pk9dvyal9] {
    width: 22px;
    height: 22px;
}

.lst-type-text[b-1pk9dvyal9] {
    flex: 1;
    min-width: 0;
}

.lst-type-name[b-1pk9dvyal9] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    display: block;
}

.lst-type-desc[b-1pk9dvyal9] {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--l-text-soft);
    font-weight: 500;
}

/* ─── Property-type grid ─────────────────────────────── */

.lst-prop-grid[b-1pk9dvyal9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.625rem;
}

.lst-prop-card[b-1pk9dvyal9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    padding: 1.125rem 0.75rem;
    background: var(--l-surface);
    border: 1.5px solid var(--l-border);
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    color: var(--l-text);
    text-align: center;
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.lst-prop-card:hover[b-1pk9dvyal9] {
    border-color: var(--l-border-strong);
    transform: translateY(-1px);
}

.lst-prop-card.is-on[b-1pk9dvyal9] {
    background: linear-gradient(135deg, var(--l-brand-soft), var(--l-surface) 75%);
    border-color: var(--l-brand-bright);
    box-shadow: 0 4px 12px -4px var(--l-brand-glow);
}

.lst-prop-icon[b-1pk9dvyal9] {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--l-brand);
}

.lst-prop-card.is-on .lst-prop-icon[b-1pk9dvyal9] {
    color: var(--l-brand-bright);
}

.lst-prop-icon svg[b-1pk9dvyal9] {
    width: 28px;
    height: 28px;
}

.lst-prop-name[b-1pk9dvyal9] {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
}

/* ─── Helper callout ──────────────────────────────────
   Inline tip card — used on Step 1 to explain that the
   marketplace title is auto-built from the structured form
   choices so the agent doesn't have to invent a headline. */

.lst-helper-callout[b-1pk9dvyal9] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--l-brand-bright) 10%, var(--l-surface)),
        var(--l-surface));
    border: 1px solid color-mix(in srgb, var(--l-brand-bright) 28%, transparent);
    border-radius: 12px;
    color: var(--l-text);
}

.lst-helper-callout svg[b-1pk9dvyal9] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--l-brand);
    margin-top: 1px;
}

.lst-helper-callout > div[b-1pk9dvyal9] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lst-helper-callout strong[b-1pk9dvyal9] { font-size: calc(13.5px * var(--l-scale)); font-weight: 700; color: var(--l-text); }
.lst-helper-callout span[b-1pk9dvyal9] {
    font-size: calc(12.5px * var(--l-scale));
    color: var(--l-text-muted);
    line-height: 1.4;
}

/* ─── Form fields ─────────────────────────────────────── */

.lst-field-grid[b-1pk9dvyal9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
}

.lst-field[b-1pk9dvyal9] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.lst-field-wide[b-1pk9dvyal9] { grid-column: 1 / -1; }

.lst-label[b-1pk9dvyal9] {
    font-size: 12px;
    font-weight: 700;
    color: var(--l-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lst-label-row[b-1pk9dvyal9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.lst-help[b-1pk9dvyal9] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--l-text-soft);
    text-transform: none;
    letter-spacing: 0;
}

.lst-input[b-1pk9dvyal9],
.lst-select[b-1pk9dvyal9],
.lst-textarea[b-1pk9dvyal9] {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.875rem;
    background: var(--l-bg);
    border: 1px solid var(--l-border);
    border-radius: 10px;
    color: var(--l-text);
    font: inherit;
    font-size: 14px;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
    outline: none;
}

.lst-input[b-1pk9dvyal9] { height: calc(40px * var(--l-scale)); font-size: calc(14px * var(--l-scale)); }
.lst-select[b-1pk9dvyal9] { height: calc(40px * var(--l-scale)); font-size: calc(14px * var(--l-scale)); padding-right: 2rem; appearance: none;
              background-image: linear-gradient(45deg, transparent 50%, var(--l-text-muted) 50%),
                                linear-gradient(135deg, var(--l-text-muted) 50%, transparent 50%);
              background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
              background-size: 6px 6px;
              background-repeat: no-repeat; }
.lst-textarea[b-1pk9dvyal9] { padding: 0.625rem 0.875rem; min-height: 110px; resize: vertical; }

.lst-input:focus[b-1pk9dvyal9],
.lst-select:focus[b-1pk9dvyal9],
.lst-textarea:focus[b-1pk9dvyal9] {
    border-color: var(--l-brand-bright);
    box-shadow: 0 0 0 3px var(--l-brand-glow);
    background: var(--l-surface);
}

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

.lst-input-prefix:focus-within[b-1pk9dvyal9] {
    border-color: var(--l-brand-bright);
    box-shadow: 0 0 0 3px var(--l-brand-glow);
}

.lst-input-prefix .lst-input[b-1pk9dvyal9] {
    border: none;
    background: transparent;
    box-shadow: none;
    height: 38px;
    /* Keep symmetric padding by default — suffix layouts (m², / month)
       need the value to breathe away from the wrapper edge. The
       adjacent-sibling rule below only strips left padding when an
       actual prefix character precedes the input. */
}

/* Prefix-text + input: kill the input's left padding so the prefix
   character (R, @, etc.) sits flush against the value. */
.lst-input-prefix-text + .lst-input[b-1pk9dvyal9] {
    padding-left: 0;
}

/* Input followed by suffix-text: kill the right padding so the suffix
   character (m², / month) sits close to the value. */
.lst-input:has(+ .lst-input-suffix-text)[b-1pk9dvyal9] {
    padding-right: 0;
}

.lst-input-prefix-text[b-1pk9dvyal9] {
    padding-left: 0.875rem;
    padding-right: 0.25rem;
    color: var(--l-text-soft);
    font-weight: 700;
    font-size: 14px;
    user-select: none;
}

.lst-input-suffix-text[b-1pk9dvyal9] {
    padding-right: 0.875rem;
    padding-left: 0.25rem;
    color: var(--l-text-soft);
    font-weight: 600;
    font-size: 12.5px;
    user-select: none;
    /* "p/m", "m²" etc. must never wrap — the suffix is meaningless
       when the slash is on a different line from the unit. */
    white-space: nowrap;
}

.lst-error[b-1pk9dvyal9] {
    color: var(--l-danger);
    font-size: 12px;
    font-weight: 600;
}

/* ─── Steppers (bedrooms/bathrooms/parking) ──────────── */

.lst-stepper-grid[b-1pk9dvyal9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.625rem;
}

/* Stepper card — vertical layout (icon → name → optional hint →
   stepper buttons) so every card is the same shape regardless of
   how long the name is. This is the same shell used by the "Other
   rooms" section below, so the whole Specs step reads as one
   cohesive grid of identical tiles. */
.lst-stepper-card[b-1pk9dvyal9] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 0.6rem 0.7rem;
    background: var(--l-bg);
    border: 1px solid var(--l-border);
    border-radius: 12px;
    text-align: center;
    min-height: 140px;
    min-width: 0;
}

.lst-stepper-label[b-1pk9dvyal9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    min-width: 0;
}

.lst-stepper-name[b-1pk9dvyal9] {
    font-size: 13px;
    font-weight: 700;
    color: var(--l-text);
    text-transform: none;
    letter-spacing: -0.005em;
    line-height: 1.25;
    text-align: center;
    /* Wrap on word boundaries only — never mid-word. */
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    max-width: 100%;
}

.lst-stepper-hint[b-1pk9dvyal9] {
    font-size: 10.5px;
    color: var(--l-text-soft);
    line-height: 1.3;
    text-align: center;
    white-space: normal;
}

.lst-stepper-ctl[b-1pk9dvyal9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
}

.lst-stepper-btn[b-1pk9dvyal9] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    color: var(--l-text);
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 140ms ease, border-color 140ms ease;
}

.lst-stepper-btn:hover:not(:disabled)[b-1pk9dvyal9] {
    background: var(--l-brand-soft);
    border-color: var(--l-brand-bright);
    color: var(--l-brand);
}

.lst-stepper-btn:disabled[b-1pk9dvyal9] {
    opacity: 0.5;
    cursor: not-allowed;
}

.lst-stepper-val[b-1pk9dvyal9] {
    min-width: 36px;
    height: 32px;
    display: grid;
    place-items: center;
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--l-text);
    padding: 0 0.5rem;
}

/* ─── Step 3 "Other rooms" section ────────────────────
   Quick-pick chips for the common SA-listing room vocab. Named
   rooms that exist in the catalog (Study, Scullery, etc.) route
   straight to SelectedFeatures so they appear in the matching
   Step-4 category instead of as duplicates in Custom. Custom
   names (Pyjama lounge, Wine cellar, …) stay in CustomFeatures.

   Visually: branded gradient surface with a hairline accent strip
   along the top so the section reads as a coherent "extra capture"
   panel rather than another field grid. */

.lst-rooms-section[b-1pk9dvyal9] {
    position: relative;
    margin-top: 1.5rem;
    padding: 1rem 1.125rem 1.125rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--l-brand-bright) 5%, var(--l-surface)),
        var(--l-surface) 70%);
    border: 1px solid var(--l-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.04),
                0 8px 22px -14px rgba(var(--shadow-rgb),  0.18);
    overflow: hidden;
}

.lst-rooms-section[b-1pk9dvyal9]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--l-brand), var(--l-brand-bright), var(--l-brand));
}

.lst-rooms-head[b-1pk9dvyal9] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Fixed 4-up — the shared auto-fit grid packed too many cards across
   and clipped the longer room names. Four columns always leaves room. */
.lst-rooms-section .lst-stepper-grid[b-1pk9dvyal9] {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
    .lst-rooms-section .lst-stepper-grid[b-1pk9dvyal9] { grid-template-columns: repeat(2, 1fr); }
}

.lst-rooms-quickpicks[b-1pk9dvyal9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Icon chip shared by every stepper card — leading visual cue so the
   step reads as a friendly grid of room/feature tiles rather than a
   plain count list. Switches to the brand gradient when has-count is
   set so non-zero rooms visually pop. */
.lst-stepper-icon[b-1pk9dvyal9] {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: var(--l-brand-soft);
    border-radius: 10px;
    color: var(--l-brand);
    flex-shrink: 0;
    transition: background 140ms ease, color 140ms ease;
}

.lst-stepper-icon svg[b-1pk9dvyal9] { width: 16px; height: 16px; }

/* Highlighted state — count > 0 makes the card pop so the agent can
   scan the property's room mix at a glance. Driven from C# via the
   .has-count class added to non-zero cards. Applies to BOTH the four
   core counters at the top of the step and the "Other rooms" grid
   below so the visual language is consistent. */
.lst-stepper-card.has-count[b-1pk9dvyal9] {
    background: linear-gradient(135deg, var(--l-brand-soft), var(--l-surface) 70%);
    border-color: color-mix(in srgb, var(--l-brand-bright) 35%, var(--l-border));
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.06), 0 6px 18px -10px var(--l-brand-glow);
}

.lst-stepper-card.has-count .lst-stepper-icon[b-1pk9dvyal9] {
    background: linear-gradient(135deg, var(--l-brand-bright), var(--l-brand));
    color: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.15);
}

.lst-stepper-card.has-count .lst-stepper-name[b-1pk9dvyal9] { color: var(--l-text); font-weight: 800; }

/* Light hover affordance on all stepper cards. */
.lst-stepper-card[b-1pk9dvyal9] { transition: border-color 140ms ease, background 140ms ease, transform 140ms ease; }
.lst-stepper-card:hover[b-1pk9dvyal9] { border-color: var(--l-border-strong); }

@media (max-width: 760px) {
    .lst-rooms-head[b-1pk9dvyal9] { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
}

/* ─── Step 4 search bar ───────────────────────────────
   The "find pet friendly in five seconds" UX. Sticky-ish on
   scroll so it stays in reach when the agent is deep in a
   category. Magnifying glass icon on the left, clear (×) on
   the right when there's input, live "X of Y" counter at the
   far right.
*/

.lst-feature-search[b-1pk9dvyal9] {
    position: sticky;
    top: 0.5rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem 0.5rem 0.9rem;
    margin-bottom: 1rem;
    background: var(--l-surface);
    border: 1.5px solid var(--l-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.04),
                0 8px 20px -12px rgba(var(--shadow-rgb),  0.18);
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.lst-feature-search:focus-within[b-1pk9dvyal9] {
    border-color: var(--l-brand-bright);
    box-shadow: 0 0 0 3px var(--l-brand-glow),
                0 8px 20px -10px var(--l-brand-glow);
}

.lst-feature-search-icon[b-1pk9dvyal9] {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: var(--l-brand);
    flex-shrink: 0;
}

.lst-feature-search-icon svg[b-1pk9dvyal9] { width: 18px; height: 18px; }

.lst-feature-search-input[b-1pk9dvyal9] {
    flex: 1;
    min-width: 0;
    height: calc(40px * var(--l-scale));
    border: none;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: calc(15px * var(--l-scale));
    font-weight: 500;
    color: var(--l-text);
    padding: 0 0.25rem;
}

.lst-feature-search-input[b-1pk9dvyal9]::placeholder {
    color: var(--l-text-soft);
    font-weight: 500;
}

/* Hide the native ×/clear control on Safari/WebKit/IE — we render
   our own button so the styling matches the brand. */
.lst-feature-search-input[b-1pk9dvyal9]::-webkit-search-cancel-button,
.lst-feature-search-input[b-1pk9dvyal9]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.lst-feature-search-clear[b-1pk9dvyal9] {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: none;
    background: var(--l-brand-soft);
    color: var(--l-brand);
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    padding: 0;
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.lst-feature-search-clear:hover[b-1pk9dvyal9] {
    background: linear-gradient(135deg, var(--l-brand-bright), var(--l-brand));
    color: var(--white);
    transform: scale(1.05);
}

.lst-feature-search-clear svg[b-1pk9dvyal9] { width: 14px; height: 14px; }

.lst-feature-search-count[b-1pk9dvyal9] {
    flex-shrink: 0;
    padding: 0.3rem 0.6rem;
    background: var(--l-brand-soft);
    color: var(--l-brand);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Matched substring inside a feature chip — soft brand fill so
   the eye lands on the reason the chip is in the results. */
.lst-feature-hit[b-1pk9dvyal9] {
    background: color-mix(in srgb, var(--l-brand-bright) 28%, transparent);
    color: inherit;
    border-radius: 4px;
    padding: 0 2px;
    font-weight: 700;
}

.lst-feature-chip.is-on .lst-feature-hit[b-1pk9dvyal9] {
    background: rgba(var(--glass-rgb),  0.30);
    color: inherit;
}

/* "Your picks" — a single bar of every selected feature (catalog
   + custom) right under the search bar. Lets the agent see and
   undo their choices without scrolling back through every
   category. */
.lst-feature-selected-bar[b-1pk9dvyal9] {
    margin-bottom: 1.25rem;
    padding: 0.75rem 0.875rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--l-brand-bright) 8%, var(--l-surface)),
        var(--l-surface));
    border: 1px dashed color-mix(in srgb, var(--l-brand-bright) 40%, transparent);
    border-radius: 12px;
}

.lst-feature-selected-head[b-1pk9dvyal9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.lst-feature-selected-title[b-1pk9dvyal9] {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--l-text);
    letter-spacing: -0.005em;
}

/* Empty state — no catalog match for the search term. Big-ish
   icon, friendly hint, and a one-click "add as custom" CTA so
   the agent never hits a dead end. */
.lst-feature-empty[b-1pk9dvyal9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.875rem 1rem;
    padding: 1rem 1.125rem;
    margin-bottom: 1.5rem;
    background: var(--l-bg);
    border: 1.5px dashed var(--l-border-strong);
    border-radius: 14px;
}

.lst-feature-empty-icon[b-1pk9dvyal9] {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--l-brand-soft);
    color: var(--l-brand);
    flex-shrink: 0;
}

.lst-feature-empty-icon svg[b-1pk9dvyal9] { width: 20px; height: 20px; }

.lst-feature-empty-text[b-1pk9dvyal9] {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.4;
}

.lst-feature-empty-text strong[b-1pk9dvyal9] {
    color: var(--l-text);
    font-size: 13.5px;
    font-weight: 700;
}

.lst-feature-empty-text span[b-1pk9dvyal9] {
    color: var(--l-text-muted);
    font-size: 12.5px;
}

@media (max-width: 760px) {
    .lst-feature-search[b-1pk9dvyal9] { position: static; flex-wrap: wrap; }
    .lst-feature-search-count[b-1pk9dvyal9] { order: 4; flex-basis: 100%; text-align: center; }
}

/* ─── Feature chip groups ─────────────────────────────── */

.lst-feature-section[b-1pk9dvyal9] {
    margin-bottom: 1.5rem;
}

.lst-feature-section:last-child[b-1pk9dvyal9] { margin-bottom: 0; }

.lst-feature-section-head[b-1pk9dvyal9] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}

.lst-feature-section-title[b-1pk9dvyal9] {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--l-text);
}

.lst-feature-section-count[b-1pk9dvyal9] {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--l-brand-soft);
    color: var(--l-brand);
    font-size: 11px;
    font-weight: 700;
}

.lst-feature-chips[b-1pk9dvyal9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.lst-feature-chip[b-1pk9dvyal9] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    background: var(--l-bg);
    border: 1.5px solid var(--l-border);
    border-radius: 999px;
    color: var(--l-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.lst-feature-chip:hover[b-1pk9dvyal9] {
    border-color: var(--l-border-strong);
    background: var(--l-surface);
    transform: translateY(-1px);
}

.lst-feature-chip.is-on[b-1pk9dvyal9] {
    background: linear-gradient(135deg, var(--l-brand-bright), var(--l-brand));
    color: var(--white);
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.18);
}

.lst-feature-chip-tick[b-1pk9dvyal9] {
    width: 14px;
    height: 14px;
}

/* ─── Custom features (per-listing) ──────────────────── */

.lst-custom-row[b-1pk9dvyal9] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.lst-custom-row .lst-input[b-1pk9dvyal9] {
    flex: 1;
}

.lst-custom-row .lst-btn[b-1pk9dvyal9] {
    flex-shrink: 0;
}

.lst-feature-chip-remove[b-1pk9dvyal9] {
    margin-left: 0.1rem;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: none;
    background: rgba(var(--glass-rgb),  0.22);
    color: inherit;
    font: inherit;
    font-size: 13px;
    line-height: 1;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    transition: background 140ms ease;
}

.lst-feature-chip-remove:hover[b-1pk9dvyal9] {
    background: rgba(var(--glass-rgb),  0.36);
}

.lst-feature-section-hint[b-1pk9dvyal9] {
    margin: 0.4rem 0 0;
    color: var(--l-text-soft);
    font-size: 11.5px;
}

/* ─── Status / modifier flag chips (Step 5) ──────────── */

.lst-flag-row[b-1pk9dvyal9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.lst-flag-chip[b-1pk9dvyal9] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.95rem;
    background: var(--l-bg);
    border: 1.5px solid var(--l-border);
    border-radius: 999px;
    color: var(--l-text);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.lst-flag-chip:hover[b-1pk9dvyal9] {
    border-color: var(--l-border-strong);
    background: var(--l-surface);
    transform: translateY(-1px);
}

.lst-flag-chip.is-on[b-1pk9dvyal9] {
    background: linear-gradient(135deg, var(--l-brand-bright), var(--l-brand));
    color: var(--white);
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.18);
}

.lst-flag-chip.is-on span[b-1pk9dvyal9] {
    font-weight: 800;
}

/* Sale-only accent chip ("No transfer duty") — slightly amber-tinted
   so it visually pops out from the otherwise teal flag row, signalling
   that it's a buyer-side selling-point not a generic property flag. */
.lst-flag-chip-accent[b-1pk9dvyal9] {
    border-color: color-mix(in srgb, var(--gold) 40%, var(--l-border));
    color: var(--warning-text);
    background: color-mix(in srgb, var(--gold) 6%, var(--l-bg));
}

.lst-flag-chip-accent:hover:not(.is-on)[b-1pk9dvyal9] {
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 10%, var(--l-surface));
}

.lst-flag-chip-accent.is-on[b-1pk9dvyal9] {
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    color: var(--white);
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(var(--gold-rgb),  0.22),
                0 6px 14px -6px rgba(var(--gold-rgb),  0.35);
}

[data-theme="dark"] .lst-flag-chip-accent[b-1pk9dvyal9] {
    color: var(--gold-bright);
    border-color: color-mix(in srgb, var(--gold) 30%, var(--l-border));
}

/* Marketplace-preview badge — pinned next to the price on the live
   wizard preview tile. Mirrors the accent treatment of the toggle so
   the agent's mental model is "click chip → see badge appear". */
.lst-preview-badge[b-1pk9dvyal9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.6rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    color: var(--white);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgba(var(--gold-rgb),  0.22);
}

.lst-preview-badge svg[b-1pk9dvyal9] { width: 11px; height: 11px; }

/* ─── Review card (live preview) ──────────────────────── */

.lst-review[b-1pk9dvyal9] {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 880px) { .lst-review[b-1pk9dvyal9] { grid-template-columns: 1fr; } }

.lst-review-list[b-1pk9dvyal9] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-right: 0;
}

.lst-review-row[b-1pk9dvyal9] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--l-border);
    font-size: 13.5px;
}

.lst-review-row:last-child[b-1pk9dvyal9] { border-bottom: none; }

.lst-review-key[b-1pk9dvyal9] {
    color: var(--l-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
}

.lst-review-val[b-1pk9dvyal9] {
    color: var(--l-text);
    font-weight: 600;
    text-align: right;
}

.lst-review-val.is-empty[b-1pk9dvyal9] { color: var(--l-text-soft); font-weight: 500; font-style: italic; }

.lst-preview-tile[b-1pk9dvyal9] {
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.06), 0 6px 18px -8px rgba(var(--shadow-rgb),  0.16);
    align-self: start;
    display: flex;
    flex-direction: column;
}

.lst-preview-photo[b-1pk9dvyal9] {
    aspect-ratio: 16/10;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--l-brand-bright) 18%, var(--l-surface-2)),
            var(--l-surface-2));
    display: grid;
    place-items: center;
    color: var(--l-brand);
    position: relative;
}

.lst-preview-photo[b-1pk9dvyal9]::after {
    content: "Photos upload in the next step";
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    color: var(--l-text-muted);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.lst-preview-photo svg[b-1pk9dvyal9] {
    width: 56px;
    height: 56px;
    opacity: 0.45;
}

.lst-preview-body[b-1pk9dvyal9] {
    padding: 1rem 1.125rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lst-preview-eyebrow[b-1pk9dvyal9] {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--l-brand-soft);
    color: var(--l-brand);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.lst-preview-title[b-1pk9dvyal9] {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: var(--l-text);
    line-height: 1.3;
}

.lst-preview-where[b-1pk9dvyal9] {
    font-size: 12.5px;
    color: var(--l-text-muted);
}

.lst-preview-price[b-1pk9dvyal9] {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--l-brand-deep);
    letter-spacing: -0.01em;
    margin-top: 0.25rem;
}

[data-theme="dark"] .lst-preview-price[b-1pk9dvyal9] { color: var(--l-brand-bright); }

.lst-preview-stats[b-1pk9dvyal9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--l-border);
    margin-top: 0.25rem;
}

.lst-preview-stat[b-1pk9dvyal9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--l-text-muted);
    font-size: 12.5px;
    font-weight: 600;
}

.lst-preview-stat svg[b-1pk9dvyal9] {
    width: 14px;
    height: 14px;
    color: var(--l-brand);
}

/* ─── Banners ────────────────────────────────────────── */

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

.lst-banner-error[b-1pk9dvyal9] {
    background: rgba(var(--danger-rgb),  0.06);
    border: 1px solid rgba(var(--danger-rgb),  0.18);
    color: var(--l-danger);
}

.lst-banner-warn[b-1pk9dvyal9] {
    background: var(--l-warn-soft);
    border: 1px solid rgba(var(--gold-rgb),  0.32);
    color: var(--l-warn);
}

/* Draft-restored notice — forest-green info tone, with an inline
   "Start fresh" action on the right. */
.lst-banner-info[b-1pk9dvyal9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(var(--accent-bright-rgb),  0.06);
    border: 1px solid rgba(var(--accent-bright-rgb),  0.20);
    color: var(--accent);
}

[data-theme="dark"] .lst-banner-info[b-1pk9dvyal9] {
    background: rgba(var(--accent-rgb),  0.10);
    border-color: rgba(var(--accent-rgb),  0.28);
    /* --accent-border is a 0.30α border token; as text it rendered the
       "Draft restored" notice (and its inherit-coloured action button) as a
       faint ghost. Solid bright cyan reads clearly on the tinted banner. */
    color: var(--accent-hover);
}

.lst-banner-info strong[b-1pk9dvyal9] { font-weight: 800; }

.lst-banner-action[b-1pk9dvyal9] {
    flex-shrink: 0;
    padding: 0.4rem 0.85rem;
    border-radius: 9px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.lst-banner-action:hover[b-1pk9dvyal9] { background: rgba(var(--accent-bright-rgb),  0.10); }

/* ─── Sticky footer ──────────────────────────────────── */

.lst-footer[b-1pk9dvyal9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: 14px;
    position: sticky;
    bottom: 0.75rem;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.06),
                0 -2px 12px -4px rgba(var(--shadow-rgb),  0.10);
}

.lst-footer-progress[b-1pk9dvyal9] {
    font-size: 12.5px;
    color: var(--l-text-soft);
    font-weight: 600;
}

.lst-footer-progress strong[b-1pk9dvyal9] {
    color: var(--l-text);
}

.lst-footer-right[b-1pk9dvyal9] {
    display: flex;
    gap: 0.5rem;
}

.lst-btn[b-1pk9dvyal9] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: calc(38px * var(--l-scale));
    padding: 0 1.1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: calc(13.5px * var(--l-scale));
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.lst-btn:disabled[b-1pk9dvyal9] { opacity: 0.55; cursor: not-allowed; }

.lst-btn svg[b-1pk9dvyal9] { width: 15px; height: 15px; }

.lst-btn-ghost[b-1pk9dvyal9] {
    color: var(--l-text-muted);
    border-color: var(--l-border);
    background: var(--l-bg);
}

.lst-btn-ghost:hover:not(:disabled)[b-1pk9dvyal9] {
    background: var(--l-surface);
    border-color: var(--l-border-strong);
    color: var(--l-text);
}

.lst-btn-primary[b-1pk9dvyal9] {
    background: linear-gradient(135deg, var(--l-brand-bright), var(--l-brand));
    color: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.18),
                inset 0 1px 0 rgba(var(--glass-rgb),  0.18);
}

.lst-btn-primary:hover:not(:disabled)[b-1pk9dvyal9] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px var(--l-brand-glow),
                inset 0 1px 0 rgba(var(--glass-rgb),  0.22);
}

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

@media (max-width: 760px) {
    .lst-field-grid[b-1pk9dvyal9] { grid-template-columns: 1fr; }
    .lst-type-toggle[b-1pk9dvyal9] { grid-template-columns: 1fr; }
    .lst-footer[b-1pk9dvyal9] { flex-direction: column-reverse; align-items: stretch; gap: 0.5rem; }
    .lst-footer-right[b-1pk9dvyal9] { flex-direction: row-reverse; }
}

/* helper used by both wizard + edit page */
.lst-loading[b-1pk9dvyal9] {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--l-text-soft);
}

/* ─── Step 2 "Where" — address search + map ───────────
   The whole step gets a curated layout: search row → big map →
   live address chip strip → editable fields. The aim is for a
   non-technical agent (or seller filling in their own listing)
   to land an address correctly without typing anything more
   than the first few characters of the street name. */

/* ─── Address search row ─────────────────────────────── */
.lst-addr-search[b-1pk9dvyal9] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}

.lst-addr-search-input[b-1pk9dvyal9] {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--l-bg);
    border: 1.5px solid var(--l-border);
    border-radius: 12px;
    padding: 0 0.9rem;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.lst-addr-search-input:focus-within[b-1pk9dvyal9] {
    border-color: var(--l-brand-bright);
    background: var(--l-surface);
    box-shadow: 0 0 0 3px var(--l-brand-glow);
}

.lst-addr-search-icon[b-1pk9dvyal9] {
    color: var(--l-brand);
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.lst-addr-search-icon svg[b-1pk9dvyal9] { width: 18px; height: 18px; }

.lst-addr-search-input input[b-1pk9dvyal9] {
    flex: 1;
    min-width: 0;
    height: calc(48px * var(--l-scale));
    border: none;
    background: transparent;
    outline: none;
    color: var(--l-text);
    font: inherit;
    font-size: calc(15px * var(--l-scale));
    font-weight: 500;
    padding: 0 0 0 0.5rem;
}

.lst-addr-search-input input[b-1pk9dvyal9]::placeholder {
    color: var(--l-text-soft);
    font-weight: 500;
}

.lst-addr-locate[b-1pk9dvyal9] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: calc(48px * var(--l-scale));
    padding: 0 1.1rem;
    border: 1.5px solid var(--l-border-strong);
    background: var(--l-surface);
    color: var(--l-text);
    border-radius: 12px;
    font: inherit;
    font-size: calc(13.5px * var(--l-scale));
    font-weight: 700;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.lst-addr-locate:hover:not(:disabled)[b-1pk9dvyal9] {
    background: linear-gradient(135deg, var(--l-brand-bright), var(--l-brand));
    color: var(--white);
    border-color: transparent;
    transform: translateY(-1px);
}

.lst-addr-locate:disabled[b-1pk9dvyal9] { opacity: 0.7; cursor: progress; }
.lst-addr-locate svg[b-1pk9dvyal9] { width: 16px; height: 16px; }
.lst-addr-locate-spin[b-1pk9dvyal9] { animation: lst-spin-b-1pk9dvyal9 900ms linear infinite; }

@keyframes lst-spin-b-1pk9dvyal9 { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ─── Map shell + branded toolbar ─────────────────────
   The map div sits inside a "shell" so we can overlay a brand-
   styled toolbar without fighting Google's controls. The map
   itself has Map/Satellite/Street-View rendered by us (we hide
   Google's defaults in the JS layer). */

.lst-map-shell[b-1pk9dvyal9] {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1.5px solid var(--l-border);
    background: var(--l-surface-2);
    box-shadow:
        0 1px 2px rgba(var(--shadow-rgb),  0.06),
        0 14px 36px -18px rgba(var(--shadow-rgb),  0.28);
    margin-bottom: 0.75rem;
}

.lst-map[b-1pk9dvyal9] {
    width: 100%;
    height: 380px;
    background: var(--l-surface-2);
}

.lst-map-xl[b-1pk9dvyal9] { height: 560px; }

@media (max-width: 880px) { .lst-map-xl[b-1pk9dvyal9] { height: 460px; } }
@media (max-width: 760px) { .lst-map-xl[b-1pk9dvyal9] { height: 380px; } }

.lst-map-toolbar[b-1pk9dvyal9] {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}

.lst-map-toolbar > *[b-1pk9dvyal9] { pointer-events: auto; }

.lst-map-type-group[b-1pk9dvyal9] {
    display: inline-flex;
    padding: 4px;
    background: rgba(var(--glass-rgb),  0.96);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.10), 0 6px 18px -8px rgba(var(--shadow-rgb),  0.22);
    backdrop-filter: blur(8px);
}

[data-theme="dark"] .lst-map-type-group[b-1pk9dvyal9] {
    background: rgba(var(--shadow-rgb),  0.92);
}

.lst-map-type[b-1pk9dvyal9] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border: none;
    background: transparent;
    color: var(--l-text-muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.lst-map-type:hover[b-1pk9dvyal9] { background: var(--l-brand-soft); color: var(--l-brand); }

.lst-map-type.is-on[b-1pk9dvyal9] {
    background: linear-gradient(135deg, var(--l-brand-bright), var(--l-brand));
    color: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.18);
}

.lst-map-type svg[b-1pk9dvyal9] { width: 14px; height: 14px; }

.lst-map-tool[b-1pk9dvyal9] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.8rem;
    background: rgba(var(--glass-rgb),  0.96);
    border: none;
    border-radius: 10px;
    color: var(--l-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.10), 0 6px 18px -8px rgba(var(--shadow-rgb),  0.22);
    backdrop-filter: blur(8px);
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.lst-map-tool:hover[b-1pk9dvyal9] { transform: translateY(-1px); color: var(--l-brand); }
.lst-map-tool svg[b-1pk9dvyal9] { width: 14px; height: 14px; }
.lst-map-tool-ext[b-1pk9dvyal9] { opacity: 0.55; margin-left: 1px; }

[data-theme="dark"] .lst-map-tool[b-1pk9dvyal9] { background: rgba(var(--shadow-rgb),  0.92); color: var(--l-text); }

.lst-map-coords-pill[b-1pk9dvyal9] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    background: rgba(var(--glass-rgb),  0.96);
    border-radius: 10px;
    /* Crisp coordinates readout — --l-text (adapts: near-black on the white
       pill in light, white on the dark pill in dark) instead of muted grey. */
    color: var(--l-text);
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.10), 0 6px 18px -8px rgba(var(--shadow-rgb),  0.22);
    backdrop-filter: blur(8px);
    white-space: nowrap;
}

.lst-map-coords-pill svg[b-1pk9dvyal9] { width: 12px; height: 12px; color: var(--l-brand); }
[data-theme="dark"] .lst-map-coords-pill[b-1pk9dvyal9] { background: rgba(var(--shadow-rgb),  0.92); }

/* Map pin lock — a floating control on the map toolbar. Locked by
   default (a green "Adjust pin" CTA); unlocked turns amber so it's
   obvious a map click will move the pin. */
.lst-map-lock[b-1pk9dvyal9] {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 36px;
    padding: 0 0.8rem;
    border: 1px solid var(--l-brand);
    border-radius: 10px;
    background: rgba(var(--glass-rgb),  0.96);
    color: var(--l-brand);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.10), 0 6px 18px -8px rgba(var(--shadow-rgb),  0.22);
    backdrop-filter: blur(8px);
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.lst-map-lock svg[b-1pk9dvyal9] { width: 14px; height: 14px; flex-shrink: 0; }

.lst-map-lock:hover[b-1pk9dvyal9] { border-color: var(--l-brand-bright); }

.lst-map-lock.is-unlocked[b-1pk9dvyal9] {
    border-color: var(--l-warn);
    background: var(--l-warn);
    color: var(--white);
}

[data-theme="dark"] .lst-map-lock[b-1pk9dvyal9] { background: rgba(var(--shadow-rgb),  0.92); }
[data-theme="dark"] .lst-map-lock.is-unlocked[b-1pk9dvyal9] { background: var(--l-warn); }

/* Empty / footer hint at the bottom of the map shell. The empty
   variant nags the agent into starting; the footer-hint replaces
   it once the pin is dropped to teach the click/drag affordance. */
.lst-map-empty-hint[b-1pk9dvyal9],
.lst-map-footer-hint[b-1pk9dvyal9] {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    background: rgba(var(--glass-rgb),  0.96);
    color: var(--l-text);
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.10), 0 8px 22px -10px rgba(var(--shadow-rgb),  0.28);
    backdrop-filter: blur(8px);
    z-index: 2;
    max-width: calc(100% - 1.5rem);
    text-align: center;
}

.lst-map-empty-hint svg[b-1pk9dvyal9] { width: 14px; height: 14px; color: var(--l-brand); }
.lst-map-footer-hint strong[b-1pk9dvyal9] { color: var(--l-brand); font-weight: 800; }
[data-theme="dark"] .lst-map-empty-hint[b-1pk9dvyal9],
[data-theme="dark"] .lst-map-footer-hint[b-1pk9dvyal9] { background: rgba(var(--shadow-rgb),  0.92); }

@media (max-width: 760px) {
    .lst-map-toolbar[b-1pk9dvyal9] { flex-wrap: wrap; gap: 0.4rem; }
    .lst-map-coords-pill[b-1pk9dvyal9] { margin-left: 0; }
}

/* ─── Live address-parts chip strip ──────────────────
   Visual breadcrumb of what Google parsed. Filled chips wear the
   brand colour; missing pieces are dimmed with an em-dash so the
   agent can tell at a glance which fields didn't come back. */

.lst-addr-pieces[b-1pk9dvyal9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.lst-addr-piece[b-1pk9dvyal9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.55rem 0.75rem;
    background: var(--l-bg);
    border: 1.5px solid var(--l-border);
    border-radius: 10px;
    min-width: 0;
}

.lst-addr-piece.is-filled[b-1pk9dvyal9] {
    border-color: color-mix(in srgb, var(--l-brand-bright) 40%, transparent);
    background: linear-gradient(135deg, var(--l-brand-soft), var(--l-surface));
}

.lst-addr-piece.is-empty[b-1pk9dvyal9] { opacity: 0.7; }

.lst-addr-piece-key[b-1pk9dvyal9] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--l-text-soft);
}

.lst-addr-piece.is-filled .lst-addr-piece-key[b-1pk9dvyal9] { color: var(--l-brand); }

.lst-addr-piece-val[b-1pk9dvyal9] {
    font-size: 13px;
    font-weight: 700;
    color: var(--l-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lst-addr-piece.is-empty .lst-addr-piece-val[b-1pk9dvyal9] { color: var(--l-text-soft); font-weight: 600; }

.lst-addr-suburb-note[b-1pk9dvyal9] {
    margin: 0 0 1rem;
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    background: var(--l-brand-soft);
    color: var(--l-brand);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

@media (max-width: 760px) {
    .lst-addr-search[b-1pk9dvyal9] { grid-template-columns: 1fr; }
    .lst-addr-locate[b-1pk9dvyal9] { width: 100%; justify-content: center; }
}
/* /Components/Pages/Listings/PortalListingsPage.razor.rz.scp.css */
/* Portal listings overview — the agency portfolio (grid + list views).
   Self-contained palette (the listings forest green + a per-status
   accent set) so it never depends on the host page's custom
   properties. Light + dark via [data-theme="dark"]. Text scales with
   the sidebar's Aa control through --portal-content-scale. */

.pl-shell[b-coulzv0mgu] {
    --pl-s: var(--portal-content-scale, 1);

    --pl-brand:        var(--accent);
    --pl-brand-bright: var(--accent-bright);
    --pl-brand-soft:   rgba(var(--accent-bright-rgb),  0.08);
    --pl-surface:      var(--white);
    --pl-surface-2:    var(--surface-2);
    --pl-border:       rgba(var(--accent-bright-rgb),  0.14);
    --pl-border-2:     rgba(var(--accent-bright-rgb),  0.24);
    --pl-text:         var(--text);
    --pl-text-muted:   var(--text-secondary);
    --pl-text-soft:    var(--text-tertiary);

    --pl-st-draft:      var(--text-secondary);
    --pl-st-active:     var(--accent);
    --pl-st-underoffer: var(--warning);
    --pl-st-unlisted:   var(--warning-text);
    --pl-st-withdrawn:  var(--danger-bright);
    --pl-st-sold:       var(--info-bright);
    --pl-st-let:        var(--accent-bright);

    display: block;
    padding: 0 0.25rem 5rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--pl-text);
}

[data-theme="dark"] .pl-shell[b-coulzv0mgu] {
    --pl-brand:        var(--accent-bright);
    --pl-brand-bright: var(--accent);
    --pl-brand-soft:   rgba(var(--accent-rgb),  0.12);
    --pl-surface:      var(--surface);
    --pl-surface-2:    var(--surface-2);
    --pl-border:       rgba(var(--accent-rgb),  0.18);
    --pl-border-2:     rgba(var(--accent-rgb),  0.30);
    --pl-text:         var(--text);
    --pl-text-muted:   var(--text-secondary);
    --pl-text-soft:    var(--text-tertiary);

    --pl-st-draft:      var(--text-tertiary);
    --pl-st-active:     var(--accent);
    --pl-st-underoffer: var(--warning-bright);
    --pl-st-unlisted:   var(--gold);
    --pl-st-withdrawn:  var(--danger);
    --pl-st-sold:       var(--info);
    --pl-st-let:        var(--accent);
}

/* Per-status accent — one --st mapping shared by banners, thumbs,
   status chips and the filter pills. */
[data-status="draft"][b-coulzv0mgu]      { --st: var(--pl-st-draft); }
[data-status="active"][b-coulzv0mgu]     { --st: var(--pl-st-active); }
[data-status="underoffer"][b-coulzv0mgu] { --st: var(--pl-st-underoffer); }
[data-status="unlisted"][b-coulzv0mgu]   { --st: var(--pl-st-unlisted); }
[data-status="withdrawn"][b-coulzv0mgu]  { --st: var(--pl-st-withdrawn); }
[data-status="sold"][b-coulzv0mgu]       { --st: var(--pl-st-sold); }
[data-status="let"][b-coulzv0mgu]        { --st: var(--pl-st-let); }

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

.pl-head[b-coulzv0mgu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.pl-eyebrow[b-coulzv0mgu] {
    font-size: calc(11px * var(--pl-s));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--pl-brand);
}

.pl-title[b-coulzv0mgu] {
    margin: 0.15rem 0 0;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: calc(30px * var(--pl-s));
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--pl-text);
}

.pl-subtitle[b-coulzv0mgu] {
    margin: 0.3rem 0 0;
    font-size: calc(13px * var(--pl-s));
    color: var(--pl-text-soft);
}

.pl-subtitle strong[b-coulzv0mgu] { color: var(--pl-text-muted); font-weight: 700; }
.pl-dot[b-coulzv0mgu] { margin: 0 0.4rem; opacity: 0.6; }

.pl-new[b-coulzv0mgu] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 42px;
    padding: 0 1.1rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--pl-brand-bright), var(--pl-brand));
    color: var(--white);
    font-size: calc(13.5px * var(--pl-s));
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.12), 0 8px 20px -10px rgba(var(--accent-bright-rgb),  0.5);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.pl-new:hover[b-coulzv0mgu] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(var(--shadow-rgb),  0.14), 0 12px 26px -10px rgba(var(--accent-bright-rgb),  0.6);
}

.pl-new svg[b-coulzv0mgu] { width: 16px; height: 16px; }

/* Secondary variant of .pl-new — same shape and size, but ghost
   rather than filled. Used for the Export CSV + Bulk import siblings
   so the New listing button stays the visual primary action. */
.pl-new-secondary[b-coulzv0mgu] {
    background: transparent;
    color: var(--pl-brand);
    border: 1px solid var(--pl-border-2);
    box-shadow: none;
}

.pl-new-secondary:hover[b-coulzv0mgu] {
    background: var(--pl-brand-soft);
    border-color: var(--pl-brand);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.06);
}

/* ─── Toolbar — search + mine toggle + view switch ────────── */

.pl-toolbar[b-coulzv0mgu] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}

.pl-search[b-coulzv0mgu] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 0.85rem;
    border: 1px solid var(--pl-border);
    border-radius: 11px;
    background: var(--pl-surface);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.pl-search:focus-within[b-coulzv0mgu] {
    border-color: var(--pl-brand);
    box-shadow: 0 0 0 3px var(--pl-brand-soft);
}

.pl-search > svg[b-coulzv0mgu] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--pl-text-soft);
}

.pl-search input[b-coulzv0mgu] {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: calc(13.5px * var(--pl-s));
    color: var(--pl-text);
    outline: none;
}

.pl-search input[b-coulzv0mgu]::placeholder { color: var(--pl-text-soft); }
.pl-search input[b-coulzv0mgu]::-webkit-search-cancel-button { display: none; }

.pl-search-clear[b-coulzv0mgu] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 6px;
    background: var(--pl-surface-2);
    color: var(--pl-text-soft);
    cursor: pointer;
}

.pl-search-clear:hover[b-coulzv0mgu] { color: var(--pl-text); }
.pl-search-clear svg[b-coulzv0mgu] { width: 12px; height: 12px; }

.pl-mine[b-coulzv0mgu] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--pl-border);
    border-radius: 11px;
    background: var(--pl-surface);
    color: var(--pl-text-muted);
    font-size: calc(13px * var(--pl-s));
    font-weight: 700;
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease;
}

.pl-mine-box[b-coulzv0mgu] {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1.6px solid var(--pl-border-2);
    border-radius: 5px;
    transition: background 120ms ease, border-color 120ms ease;
}

.pl-mine-box svg[b-coulzv0mgu] { width: 12px; height: 12px; color: var(--white); opacity: 0; }

.pl-mine.is-on[b-coulzv0mgu] { border-color: var(--pl-brand); color: var(--pl-brand); }
.pl-mine.is-on .pl-mine-box[b-coulzv0mgu] { background: var(--pl-brand); border-color: var(--pl-brand); }
.pl-mine.is-on .pl-mine-box svg[b-coulzv0mgu] { opacity: 1; }

.pl-views[b-coulzv0mgu] {
    flex-shrink: 0;
    display: flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--pl-border);
    border-radius: 11px;
    background: var(--pl-surface);
}

.pl-view[b-coulzv0mgu] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pl-text-soft);
    cursor: pointer;
    transition: background 110ms ease, color 110ms ease;
}

.pl-view:hover[b-coulzv0mgu] { color: var(--pl-text); }
.pl-view svg[b-coulzv0mgu] { width: 17px; height: 17px; }

.pl-view.is-on[b-coulzv0mgu] {
    background: var(--pl-brand);
    color: var(--white);
}

/* ─── Sale / rent type filter ─────────────────────────────── */

.pl-segment[b-coulzv0mgu] {
    flex-shrink: 0;
    display: flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--pl-border);
    border-radius: 11px;
    background: var(--pl-surface);
}

.pl-seg[b-coulzv0mgu] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 0 0.8rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pl-text-muted);
    font: inherit;
    font-size: calc(13px * var(--pl-s));
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 110ms ease, color 110ms ease;
}

.pl-seg svg[b-coulzv0mgu] { width: 14px; height: 14px; }

.pl-seg:hover[b-coulzv0mgu] { color: var(--pl-text); }

.pl-seg.is-on[b-coulzv0mgu] {
    background: var(--pl-brand);
    color: var(--white);
}

.pl-seg-n[b-coulzv0mgu] {
    min-width: 1.05rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    background: var(--pl-surface-2);
    color: var(--pl-text-soft);
    font-size: calc(10.5px * var(--pl-s));
    font-weight: 700;
    text-align: center;
}

.pl-seg.is-on .pl-seg-n[b-coulzv0mgu] {
    background: rgba(var(--glass-rgb),  0.25);
    color: var(--white);
}

/* ─── Filter row — status segment + date-added select ─────── */

.pl-filters[b-coulzv0mgu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.3rem;
}

/* The status filter reuses the .pl-segment shell but is allowed to
   wrap (up to 8 statuses won't fit one line on a narrow content
   column) and tints its active button with that status's accent
   instead of the brand green. */
.pl-segment-status[b-coulzv0mgu] {
    flex: 0 1 auto;
    flex-wrap: wrap;
}

.pl-seg-status.is-on[b-coulzv0mgu] {
    background: var(--st);
    color: var(--white);
}

/* Date-added — a compact native select dressed to match the segments. */
.pl-date[b-coulzv0mgu] {
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}

.pl-date > svg:first-child[b-coulzv0mgu] {
    position: absolute;
    left: 0.7rem;
    width: 15px;
    height: 15px;
    color: var(--pl-text-soft);
    pointer-events: none;
}

.pl-date-caret[b-coulzv0mgu] {
    position: absolute;
    right: 0.62rem;
    width: 13px;
    height: 13px;
    color: var(--pl-text-soft);
    pointer-events: none;
}

.pl-date select[b-coulzv0mgu] {
    appearance: none;
    -webkit-appearance: none;
    min-height: 42px;
    padding: 0 1.95rem 0 2.1rem;
    border: 1px solid var(--pl-border);
    border-radius: 11px;
    background: var(--pl-surface);
    color: var(--pl-text);
    font: inherit;
    font-size: calc(13px * var(--pl-s));
    font-weight: 700;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.pl-date select:hover[b-coulzv0mgu] { border-color: var(--pl-border-2); }

.pl-date select:focus[b-coulzv0mgu] {
    outline: none;
    border-color: var(--pl-brand);
    box-shadow: 0 0 0 3px var(--pl-brand-soft);
}

/* ─── Count line ──────────────────────────────────────────── */

.pl-count[b-coulzv0mgu] {
    margin: 0 0 0.7rem;
    font-size: calc(11.5px * var(--pl-s));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pl-text-soft);
}

/* ─── Grid view ───────────────────────────────────────────── */

.pl-grid[b-coulzv0mgu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1rem;
}

.pl-card[b-coulzv0mgu] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--pl-border);
    border-radius: 14px;
    background: var(--pl-surface);
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.04);
    transition: transform 130ms ease, box-shadow 130ms ease, border-color 130ms ease;
}

.pl-card:hover[b-coulzv0mgu] {
    transform: translateY(-3px);
    border-color: var(--pl-border-2);
    box-shadow: 0 2px 6px rgba(var(--shadow-rgb),  0.08), 0 18px 32px -18px rgba(var(--shadow-rgb),  0.32);
}

/* Banner — the cover photo, or a status-tinted fallback band. */
.pl-card-banner[b-coulzv0mgu] {
    --st: var(--pl-st-draft);
    position: relative;
    height: 150px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.6rem 0.7rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--st) 22%, var(--pl-surface)),
        color-mix(in srgb, var(--st) 6%, var(--pl-surface)));
    overflow: hidden;
}

.pl-card-photo[b-coulzv0mgu] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pl-card-glyph[b-coulzv0mgu] {
    position: absolute;
    right: -14px;
    bottom: -22px;
    width: 110px;
    height: 110px;
    color: var(--st);
    opacity: 0.16;
}

.pl-card-status[b-coulzv0mgu],
.pl-card-type[b-coulzv0mgu] {
    position: relative;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--pl-surface);
    font-size: calc(10.5px * var(--pl-s));
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 1px 3px rgba(var(--shadow-rgb),  0.16);
}

.pl-card-status[b-coulzv0mgu] { color: var(--st); }
.pl-card-type[b-coulzv0mgu] { color: var(--pl-text-muted); }

.pl-card-body[b-coulzv0mgu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.8rem 0.85rem 0.5rem;
}

.pl-card-title[b-coulzv0mgu] {
    margin: 0;
    font-size: calc(14.5px * var(--pl-s));
    font-weight: 700;
    line-height: 1.32;
    color: var(--pl-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pl-card-where[b-coulzv0mgu] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: calc(12px * var(--pl-s));
    color: var(--pl-text-soft);
}

.pl-card-where > svg[b-coulzv0mgu] { width: 13px; height: 13px; flex-shrink: 0; }

.pl-card-suburb[b-coulzv0mgu] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-card-ref[b-coulzv0mgu] {
    flex-shrink: 0;
    margin-left: auto;
    padding: 0.05rem 0.4rem;
    border-radius: 5px;
    background: var(--pl-surface-2);
    color: var(--pl-text-muted);
    font-size: calc(10.5px * var(--pl-s));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pl-card-spec[b-coulzv0mgu] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 0.1rem;
}

.pl-card-spec-item[b-coulzv0mgu] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: calc(12.5px * var(--pl-s));
    font-weight: 700;
    color: var(--pl-text-muted);
}

.pl-card-spec-item svg[b-coulzv0mgu] { width: 14px; height: 14px; color: var(--pl-text-soft); }

.pl-card-branch[b-coulzv0mgu] {
    margin-left: auto;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    border: 1px solid var(--pl-border);
    font-size: calc(10.5px * var(--pl-s));
    font-weight: 700;
    color: var(--pl-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 9rem;
}

.pl-card-foot[b-coulzv0mgu] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem 0.8rem;
    border-top: 1px solid var(--pl-border);
    margin-top: 0.3rem;
}

.pl-card-price[b-coulzv0mgu] {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: calc(16px * var(--pl-s));
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--pl-brand);
    font-variant-numeric: tabular-nums;
}

.pl-card-meta[b-coulzv0mgu] {
    font-size: calc(11px * var(--pl-s));
    color: var(--pl-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

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

.pl-list[b-coulzv0mgu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pl-row[b-coulzv0mgu] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--pl-border);
    border-radius: 12px;
    background: var(--pl-surface);
    text-decoration: none;
    transition: transform 110ms ease, box-shadow 110ms ease, border-color 110ms ease;
}

.pl-row:hover[b-coulzv0mgu] {
    transform: translateX(2px);
    border-color: var(--pl-border-2);
    box-shadow: 0 10px 22px -16px rgba(var(--shadow-rgb),  0.4);
}

.pl-row-thumb[b-coulzv0mgu] {
    --st: var(--pl-st-draft);
    position: relative;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    overflow: hidden;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--st) 24%, var(--pl-surface)),
        color-mix(in srgb, var(--st) 8%, var(--pl-surface)));
    color: var(--st);
}

.pl-row-thumb > svg[b-coulzv0mgu] { width: 26px; height: 26px; opacity: 0.5; }

.pl-row-photo[b-coulzv0mgu] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pl-row-main[b-coulzv0mgu] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.pl-row-title[b-coulzv0mgu] {
    margin: 0;
    font-size: calc(13.5px * var(--pl-s));
    font-weight: 700;
    color: var(--pl-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-row-where[b-coulzv0mgu] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: calc(11.5px * var(--pl-s));
    color: var(--pl-text-soft);
    min-width: 0;
}

.pl-row-status[b-coulzv0mgu] {
    --st: var(--pl-st-draft);
    flex-shrink: 0;
    padding: 0.08rem 0.42rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--st) 14%, var(--pl-surface));
    color: var(--st);
    font-size: calc(10px * var(--pl-s));
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pl-row-sep[b-coulzv0mgu] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-row-sep[b-coulzv0mgu]::before {
    content: "·";
    margin-right: 0.45rem;
    opacity: 0.6;
}

.pl-row-ref[b-coulzv0mgu] {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--pl-text-muted);
    font-variant-numeric: tabular-nums;
}

.pl-row-spec[b-coulzv0mgu] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pl-row-spec-item[b-coulzv0mgu] {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: calc(12px * var(--pl-s));
    font-weight: 700;
    color: var(--pl-text-muted);
}

.pl-row-spec-item svg[b-coulzv0mgu] { width: 13px; height: 13px; color: var(--pl-text-soft); }

.pl-row-end[b-coulzv0mgu] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    min-width: 8.5rem;
}

.pl-row-price[b-coulzv0mgu] {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: calc(15px * var(--pl-s));
    font-weight: 800;
    color: var(--pl-brand);
    font-variant-numeric: tabular-nums;
}

.pl-row-meta[b-coulzv0mgu] {
    font-size: calc(10.5px * var(--pl-s));
    color: var(--pl-text-soft);
}

/* ─── States — loading / empty / error ───────────────────── */

.pl-state[b-coulzv0mgu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 3.5rem 1.5rem;
    text-align: center;
    color: var(--pl-text-soft);
    border: 1px dashed var(--pl-border-2);
    border-radius: 14px;
    background: var(--pl-surface);
}

.pl-state-sm[b-coulzv0mgu] { padding: 2.4rem 1.5rem; }
.pl-state svg[b-coulzv0mgu] { width: 34px; height: 34px; }

.pl-state p[b-coulzv0mgu] {
    margin: 0;
    font-size: calc(13px * var(--pl-s));
    line-height: 1.5;
    max-width: 46ch;
}

.pl-state-error[b-coulzv0mgu] {
    border-style: solid;
    border-color: color-mix(in srgb, var(--pl-st-withdrawn) 40%, var(--pl-border));
    color: var(--pl-st-withdrawn);
}

.pl-state-btn[b-coulzv0mgu] {
    margin-top: 0.3rem;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 1.1rem;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--pl-brand-bright), var(--pl-brand));
    color: var(--white);
    font: inherit;
    font-size: calc(13px * var(--pl-s));
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.pl-spin[b-coulzv0mgu] { animation: pl-spin-b-coulzv0mgu 0.7s linear infinite; }

@keyframes pl-spin-b-coulzv0mgu { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .pl-spin[b-coulzv0mgu] { animation: none; }
    .pl-card:hover[b-coulzv0mgu], .pl-new:hover[b-coulzv0mgu], .pl-row:hover[b-coulzv0mgu] { transform: none; }
}

@media (max-width: 640px) {
    .pl-head[b-coulzv0mgu] { flex-direction: column; }
    .pl-toolbar[b-coulzv0mgu] { flex-wrap: wrap; }
    .pl-grid[b-coulzv0mgu] { grid-template-columns: 1fr; }
    .pl-row[b-coulzv0mgu] { flex-wrap: wrap; }
    .pl-row-end[b-coulzv0mgu] { min-width: 0; margin-left: auto; }
}
/* /Components/Pages/Placeholders/ProfilePage.razor.rz.scp.css */
/* Your profile — mirrors the Company-details / listings editor
   self-contained forest-green design system (header card, panels,
   green form fields, sticky save footer). Kept in sync with
   CompanyDetailsPage.razor.css so the two account pages feel identical. */

.pf-shell[b-f46di47k4r] {
    --pf-brand:        var(--accent);
    --pf-brand-bright: var(--accent-bright);
    --pf-brand-deep:   var(--accent);
    --pf-surface:      var(--white);
    --pf-surface-2:    var(--surface-2);
    --pf-border:       rgba(var(--accent-bright-rgb),  0.12);
    --pf-border-strong:rgba(var(--accent-bright-rgb),  0.22);
    --pf-text:         var(--text);
    --pf-text-muted:   var(--text-secondary);
    --pf-text-soft:    var(--text-tertiary);
    --pf-danger:       var(--danger);
    --pf-warn:         var(--warning);
    --pf-ok:           var(--accent);

    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding-bottom: 1rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--pf-text);
}

[data-theme="dark"] .pf-shell[b-f46di47k4r] {
    --pf-brand:        var(--accent);
    --pf-brand-bright: var(--accent-bright);
    --pf-brand-deep:   var(--accent-border);
    --pf-surface:      var(--surface);
    --pf-surface-2:    var(--surface-2);
    --pf-border:       rgba(var(--accent-rgb),  0.18);
    --pf-border-strong:rgba(var(--accent-rgb),  0.30);
    --pf-text:         var(--text);
    --pf-text-muted:   var(--text-secondary);
    --pf-text-soft:    var(--text-tertiary);
    --pf-danger:       var(--danger-border);
    --pf-warn:         var(--warning-bright);
}

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

.pf-head[b-f46di47k4r] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--pf-border);
    border-radius: 16px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--pf-brand) 10%, var(--pf-surface)),
            var(--pf-surface) 60%);
}

.pf-head-icon[b-f46di47k4r] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: linear-gradient(150deg, var(--pf-brand), var(--pf-brand-deep));
    color: var(--white);
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--pf-brand) 60%, transparent);
}

.pf-head-icon svg[b-f46di47k4r] { width: 26px; height: 26px; }

.pf-head-text[b-f46di47k4r] { min-width: 0; }

.pf-eyebrow[b-f46di47k4r] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--pf-brand);
}

.pf-title[b-f46di47k4r] {
    margin: 0.1rem 0 0.2rem;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--pf-text);
}

.pf-head-meta[b-f46di47k4r] {
    margin: 0;
    font-size: 12.5px;
    color: var(--pf-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.pf-head-meta strong[b-f46di47k4r] { color: var(--pf-text); font-weight: 700; }
.pf-head-dot[b-f46di47k4r] { color: var(--pf-text-soft); }

/* ─── Panels ──────────────────────────────────────────────── */

.pf-form[b-f46di47k4r] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.pf-panel[b-f46di47k4r] {
    border: 1px solid var(--pf-border);
    border-radius: 14px;
    background: var(--pf-surface);
    padding: 1.25rem 1.3rem;
}

.pf-panel-head[b-f46di47k4r] { margin-bottom: 1rem; }

.pf-panel-eyebrow[b-f46di47k4r] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pf-brand);
}

.pf-panel-title[b-f46di47k4r] {
    margin: 0.15rem 0 0.3rem;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--pf-text);
}

.pf-panel-hint[b-f46di47k4r] {
    margin: 0;
    max-width: 68ch;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--pf-text-muted);
}

.pf-panel-hint strong[b-f46di47k4r] { color: var(--pf-text); font-weight: 600; }
.pf-panel-hint a[b-f46di47k4r] { color: var(--pf-brand); font-weight: 600; text-decoration: none; }
.pf-panel-hint a:hover[b-f46di47k4r] { text-decoration: underline; }

/* ─── Form grid + fields ──────────────────────────────────── */

.pf-grid[b-f46di47k4r] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem 1rem;
}

.pf-field[b-f46di47k4r] { display: flex; flex-direction: column; gap: 0.32rem; min-width: 0; }

.pf-label[b-f46di47k4r] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pf-brand);
}

.pf-help[b-f46di47k4r] {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--pf-text-soft);
}

.pf-input[b-f46di47k4r] {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--pf-border-strong);
    border-radius: 9px;
    background: var(--pf-surface);
    color: var(--pf-text);
    font-family: inherit;
    font-size: 13.5px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.pf-input:focus-visible[b-f46di47k4r] {
    outline: none;
    border-color: var(--pf-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-brand) 16%, transparent);
}

.pf-input[b-f46di47k4r]::placeholder { color: var(--pf-text-soft); }

.pf-readonly[b-f46di47k4r] {
    padding: 0.55rem 0.7rem;
    border: 1px dashed var(--pf-border-strong);
    border-radius: 9px;
    background: var(--pf-surface-2);
    color: var(--pf-text-muted);
    font-size: 13.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── FFC status pill ─────────────────────────────────────── */

.pf-ffc-status[b-f46di47k4r] {
    margin-top: 0.9rem;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid transparent;
}

.pf-ffc-status[data-tone="ok"][b-f46di47k4r] {
    background: color-mix(in srgb, var(--pf-ok) 12%, var(--pf-surface));
    border-color: color-mix(in srgb, var(--pf-ok) 30%, transparent);
    color: var(--pf-ok);
}

.pf-ffc-status[data-tone="warn"][b-f46di47k4r] {
    background: color-mix(in srgb, var(--pf-warn) 14%, var(--pf-surface));
    border-color: color-mix(in srgb, var(--pf-warn) 35%, transparent);
    color: var(--pf-warn);
}

.pf-ffc-status[data-tone="danger"][b-f46di47k4r] {
    background: color-mix(in srgb, var(--pf-danger) 12%, var(--pf-surface));
    border-color: color-mix(in srgb, var(--pf-danger) 35%, transparent);
    color: var(--pf-danger);
}

/* ─── Buttons ─────────────────────────────────────────────── */

.pf-btn[b-f46di47k4r] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.05rem;
    border-radius: 9px;
    border: 1px solid var(--pf-border-strong);
    background: var(--pf-surface);
    color: var(--pf-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 130ms ease, border-color 130ms ease, transform 80ms ease;
}

.pf-btn:active[b-f46di47k4r] { transform: translateY(1px); }
.pf-btn svg[b-f46di47k4r] { width: 15px; height: 15px; }

.pf-btn.is-primary[b-f46di47k4r] {
    background: linear-gradient(150deg, var(--pf-brand), var(--pf-brand-deep));
    border-color: transparent;
    color: var(--white);
}

.pf-btn.is-primary:hover[b-f46di47k4r] { filter: brightness(1.08); }

/* ─── Banners ─────────────────────────────────────────────── */

.pf-banner[b-f46di47k4r] {
    padding: 0.65rem 0.9rem;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid transparent;
}

.pf-banner.is-ok[b-f46di47k4r] {
    background: color-mix(in srgb, var(--pf-ok) 12%, var(--pf-surface));
    border-color: color-mix(in srgb, var(--pf-ok) 35%, transparent);
    color: var(--pf-ok);
}

.pf-banner.is-error[b-f46di47k4r] {
    background: color-mix(in srgb, var(--pf-danger) 12%, var(--pf-surface));
    border-color: color-mix(in srgb, var(--pf-danger) 35%, transparent);
    color: var(--pf-danger);
}

.pf-banner strong[b-f46di47k4r] { font-weight: 800; }

/* ─── Sticky footer ───────────────────────────────────────── */

.pf-footer[b-f46di47k4r] {
    position: sticky;
    bottom: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--pf-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--pf-surface) 92%, transparent);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px -18px rgba(var(--shadow-rgb),  0.5);
}

.pf-footer-note[b-f46di47k4r] { font-size: 11.5px; color: var(--pf-text-soft); }

/* ─── Loading state ───────────────────────────────────────── */

.pf-loading[b-f46di47k4r] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--pf-text-soft);
    font-size: 13px;
}

.pf-spin[b-f46di47k4r] { width: 18px; height: 18px; animation: pf-spin-b-f46di47k4r 0.7s linear infinite; }

@keyframes pf-spin-b-f46di47k4r { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .pf-spin[b-f46di47k4r] { animation: none; }
}

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

@media (max-width: 760px) {
    .pf-grid[b-f46di47k4r] { grid-template-columns: 1fr; }
    .pf-head[b-f46di47k4r] { flex-direction: column; align-items: flex-start; }
    .pf-footer[b-f46di47k4r] { flex-direction: column; align-items: stretch; }
    .pf-footer .pf-btn[b-f46di47k4r] { justify-content: center; }
}
/* /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, var(--border-subtle) 0%, var(--border) 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(var(--shadow-rgb),  0.94);
    color: var(--surface-2);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px -10px rgba(var(--shadow-rgb),  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: var(--border-strong);
    text-decoration: none;
}

.ra-toolbar a:hover[b-0f13pqqxd1] {
    color: var(--surface-2);
}

.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: var(--info-subtle);
    color: var(--info);
    border: 1px solid var(--info-subtle);
}

.ra-flash-error[b-0f13pqqxd1] {
    background: var(--danger-subtle);
    color: var(--danger-strong);
    border: 1px solid var(--danger-border);
}

/* The paper — A4-ish, max 920px, centered, deep shadow. */
.ra-paper[b-0f13pqqxd1] {
    background: var(--white);
    color: var(--text);
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    padding: 3rem 3.5rem;
    border-radius: 0.5rem;
    box-shadow:
        0 1px 2px rgba(var(--shadow-rgb),  0.06),
        0 4px 12px rgba(var(--shadow-rgb),  0.08),
        0 20px 40px -10px rgba(var(--shadow-rgb),  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 var(--border);
    margin-bottom: 1.5rem;
}

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

.ra-agency-slug[b-0f13pqqxd1] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.ra-doc-meta[b-0f13pqqxd1] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    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: var(--text);
    color: var(--surface-2);
    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: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
}

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

.ra-quote[b-0f13pqqxd1] {
    color: var(--text-secondary);
    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: var(--text);
    color: var(--surface-2);
    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] {
    /* --danger-border is light-red/faint (low contrast on white in light,
       near-invisible in dark). --danger is the semantic danger text colour,
       readable in both themes. */
    color: var(--danger) !important;
    font-size: 0.75rem;
}

.ra-subhead[b-0f13pqqxd1] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 1rem 0 0.6rem 0;
    border-bottom: 1px dashed var(--border-strong);
    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: var(--text-secondary);
    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 var(--text-tertiary);
    border-radius: 0;
    padding: 0.4rem 0.1rem;
    background: transparent;
    color: var(--text);
    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: var(--text);
    background: var(--surface-2);
}

.ra-field input:disabled[b-0f13pqqxd1],
.ra-field textarea:disabled[b-0f13pqqxd1],
.ra-field select:disabled[b-0f13pqqxd1] {
    color: var(--text-secondary);
    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 var(--border-strong);
    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: var(--surface-2);
    border-left: 3px solid var(--text);
    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: var(--text);
    color: var(--surface-2);
    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 var(--border);
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    background: var(--surface-2);
    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: var(--text);
}

.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: var(--warning-subtle);
    padding: 1rem 1.25rem;
    border-radius: 0.25rem;
    border-left: 4px solid var(--warning-bright);
}

.ra-decision .ra-section-header[b-0f13pqqxd1] {
    background: var(--warning-deep);
}

/* 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: var(--black);
        border-bottom-color: var(--black);
    }
}
/* /Components/Pages/Rentals/RentalApplicationFormPage.razor.rz.scp.css */
/* Agent-side rental application form — visually aligned with the
   renter fill page (forest-green brand, warm parchment, rounded
   fields). Same `.ra-*` class names as before so no markup changes;
   only the visuals refresh. The "paper" mimic is preserved so the
   PDF + print path keeps working, but the on-screen feel is a card-
   based product surface, not a scanned A4. */

.ra-page[b-c6qtbway0t] {
    /* Brand tokens scoped to this page so we don't have to touch
       the global admin theme. Forest-green primary matches the
       Asetrix logo (var(--accent)) and the renter portal. */
    --ra-brand:        var(--accent);
    --ra-brand-deep:   var(--accent-hover);
    --ra-brand-soft:   var(--accent-hover);
    --ra-brand-tint:   rgba(var(--accent-rgb),  0.08);
    --ra-brand-tint-2: rgba(var(--accent-rgb),  0.14);
    --ra-bg:           var(--surface-2);        /* warm parchment — matches afill-bg */
    --ra-surface:      var(--surface);
    --ra-surface-soft: var(--surface-2);
    --ra-border:       var(--border);
    --ra-border-2:     var(--border-strong);
    --ra-text:         var(--text);
    --ra-text-2:       var(--text-secondary);
    --ra-text-3:       var(--text-tertiary);
    --ra-danger:       var(--danger);
    --ra-danger-bg:    var(--danger-subtle);
    --ra-warn:         var(--gold-deep);
    --ra-warn-bg:      var(--warning-subtle);

    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--ra-bg);
    color: var(--ra-text);
    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(var(--glass-rgb),  0.92);
    color: var(--ra-text);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--ra-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.05),
                0 8px 24px -12px rgba(var(--shadow-rgb),  0.12);
    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.4rem;
    flex-wrap: wrap;
}

.ra-toolbar-right[b-c6qtbway0t] { justify-content: flex-end; }

/* ─── Toolbar buttons ────────────────────────────────────────
   Every clickable in the toolbar wears the same .ra-tool-btn
   pill so the strip reads as one connected control surface.
   Variants ride on top:
       .is-primary  → solid forest-green CTA (Send / Submit / Approve)
       .is-danger   → muted-red outlined (Withdraw / Cancel)
       .is-back     → ghost-link styled (back chevron)
   Without a variant the button is a neutral outlined chip — used
   for Download PDF / Print / secondary status transitions. */
.ra-tool-btn[b-c6qtbway0t] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.85rem;
    height: 36px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--ra-text);
    background: var(--white);
    border: 1px solid var(--ra-border-2);
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background 120ms ease,
                border-color 120ms ease,
                color 120ms ease,
                box-shadow 140ms ease,
                transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 1px rgba(var(--shadow-rgb),  0.04);
}

.ra-tool-btn svg[b-c6qtbway0t] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.ra-tool-btn:hover:not(:disabled)[b-c6qtbway0t] {
    background: var(--ra-brand-tint);
    border-color: var(--ra-brand-soft);
    color: var(--ra-brand);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.08);
    transform: translateY(-1px);
}

.ra-tool-btn:active:not(:disabled)[b-c6qtbway0t] {
    transform: translateY(0);
    box-shadow: 0 1px 1px rgba(var(--shadow-rgb),  0.06);
}

.ra-tool-btn:focus-visible[b-c6qtbway0t] {
    outline: 0;
    border-color: var(--ra-brand);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb),  0.18);
}

.ra-tool-btn:disabled[b-c6qtbway0t] {
    cursor: not-allowed;
    opacity: 0.55;
    background: var(--ra-surface-soft);
    color: var(--ra-text-3);
    transform: none;
    box-shadow: none;
}

/* Primary — used for the Big Action of the current state
   (Send to applicant / Submit / Approve / Resend). One per
   toolbar at most. */
.ra-tool-btn.is-primary[b-c6qtbway0t] {
    background: linear-gradient(135deg, var(--ra-brand) 0%, var(--ra-brand-deep) 100%);
    border-color: var(--ra-brand-deep);
    color: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.12),
                0 4px 14px -6px rgba(var(--shadow-rgb),  0.30);
}

.ra-tool-btn.is-primary:hover:not(:disabled)[b-c6qtbway0t] {
    background: linear-gradient(135deg, var(--ra-brand-deep) 0%, var(--ra-brand) 100%);
    border-color: var(--ra-brand-deep);
    color: var(--white);
    box-shadow: 0 2px 4px rgba(var(--shadow-rgb),  0.16),
                0 8px 22px -8px rgba(var(--shadow-rgb),  0.40);
}

.ra-tool-btn.is-primary:focus-visible[b-c6qtbway0t] {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb),  0.30),
                0 4px 14px -6px rgba(var(--shadow-rgb),  0.30);
}

/* Danger — withdraw / cancel-send. Muted by default, fills red
   on hover so the agent has a moment to think before committing. */
.ra-tool-btn.is-danger[b-c6qtbway0t] {
    color: var(--ra-danger);
    border-color: var(--danger-border);
    background: var(--white);
}

.ra-tool-btn.is-danger:hover:not(:disabled)[b-c6qtbway0t] {
    background: var(--ra-danger);
    border-color: var(--ra-danger);
    color: var(--white);
    box-shadow: 0 1px 2px rgba(var(--danger-rgb),  0.20),
                0 6px 18px -8px rgba(var(--danger-rgb),  0.35);
}

.ra-tool-btn.is-danger:focus-visible[b-c6qtbway0t] {
    border-color: var(--ra-danger);
    box-shadow: 0 0 0 3px rgba(var(--danger-rgb),  0.20);
}

/* Back chevron — ghost-link, no border, no background. Pulls
   left of the divider so it reads as a destination, not an
   action. */
.ra-tool-btn.is-back[b-c6qtbway0t] {
    background: transparent;
    border-color: transparent;
    color: var(--ra-text-2);
    padding-left: 0.35rem;
    box-shadow: none;
}

.ra-tool-btn.is-back:hover:not(:disabled)[b-c6qtbway0t] {
    background: var(--ra-brand-tint);
    border-color: transparent;
    color: var(--ra-brand);
    transform: translateY(0);
}

/* Vertical hair-line divider between groups. */
.ra-tool-divider[b-c6qtbway0t] {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: var(--ra-border);
    margin: 0 0.15rem;
}

/* Status chip — appears next to the back button. Low-saturation
   pill keyed off data-tone. Distinct from the loud Badge in the
   hero so the chrome doesn't shout the same word twice. */
.ra-tool-status[b-c6qtbway0t] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem 0.3rem 0.55rem;
    height: 28px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.ra-tool-status[b-c6qtbway0t]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(var(--glass-rgb),  0.6);
    flex-shrink: 0;
}

.ra-tool-status[data-tone="neutral"][b-c6qtbway0t] {
    color: var(--text-secondary);
    background: var(--border-subtle);
    border-color: var(--border);
}

.ra-tool-status[data-tone="muted"][b-c6qtbway0t] {
    color: var(--text-tertiary);
    background: var(--border-subtle);
    border-color: var(--border);
}

.ra-tool-status[data-tone="info"][b-c6qtbway0t] {
    color: var(--info);
    background: var(--info-subtle);
    border-color: var(--info-subtle);
}

.ra-tool-status[data-tone="warn"][b-c6qtbway0t] {
    color: var(--warning-deep);
    background: var(--warning-subtle);
    border-color: var(--warning-border);
}

.ra-tool-status[data-tone="ok"][b-c6qtbway0t] {
    color: var(--accent-hover);
    background: var(--accent-subtle);
    border-color: var(--accent-active);
}

.ra-tool-status[data-tone="danger"][b-c6qtbway0t] {
    color: var(--danger-strong);
    background: var(--danger-subtle);
    border-color: var(--danger-subtle);
}

.ra-tool-status[data-tone="brand"][b-c6qtbway0t] {
    color: var(--accent);
    background: rgba(var(--accent-rgb),  0.10);
    border-color: rgba(var(--accent-rgb),  0.22);
}

/* Phone — let the toolbar wrap nicely. Hide the labels on the
   tightest viewports so the strip stays at one row. The icons
   carry the meaning via their title attributes. */
@media (max-width: 720px) {
    .ra-toolbar[b-c6qtbway0t] { padding: 0.6rem 0.7rem; gap: 0.5rem; }
    .ra-tool-btn[b-c6qtbway0t] { padding: 0.45rem 0.6rem; }
}

@media (max-width: 520px) {
    .ra-tool-btn span[b-c6qtbway0t] { display: none; }
    .ra-tool-btn[b-c6qtbway0t] { padding: 0.45rem 0.55rem; }
    .ra-tool-btn.is-back span[b-c6qtbway0t] { display: inline; }
    .ra-tool-status[b-c6qtbway0t] { padding-left: 0.5rem; padding-right: 0.5rem; }
}

.ra-flash[b-c6qtbway0t] {
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    padding: 0.85rem 1.1rem;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.ra-flash-info[b-c6qtbway0t] {
    /* Forest-green tinted callout instead of the old slate-blue. */
    background: linear-gradient(180deg, rgba(var(--accent-rgb),  0.06) 0%, rgba(var(--accent-rgb),  0.02) 100%);
    color: var(--ra-text);
    border: 1px solid var(--ra-brand-tint-2);
    border-left: 3px solid var(--ra-brand);
}

.ra-flash-info strong[b-c6qtbway0t] { color: var(--ra-brand); }

.ra-flash-error[b-c6qtbway0t] {
    background: var(--ra-danger-bg);
    color: var(--danger-deep);
    border: 1px solid var(--danger-border);
    border-left: 3px solid var(--ra-danger);
}

/* Linked-lease ribbon — appears below the toolbar when this application
   has been converted to a lease. Mirrors the panel on inspection-detail. */
.ra-linked-lease[b-c6qtbway0t] {
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    background: linear-gradient(180deg, rgba(var(--accent-rgb),  0.06), rgba(var(--accent-rgb),  0.02));
    border: 1px solid rgba(var(--accent-rgb),  0.18);
    color: var(--ra-text);
}

.ra-linked-lease-icon[b-c6qtbway0t] {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb),  0.10);
    color: var(--accent);
    border-radius: 0.5rem;
}

.ra-linked-lease-icon svg[b-c6qtbway0t] {
    width: 20px;
    height: 20px;
}

.ra-linked-lease-body[b-c6qtbway0t] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.ra-linked-lease-eyebrow[b-c6qtbway0t] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
}

.ra-linked-lease-title[b-c6qtbway0t] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ra-text);
    line-height: 1.3;
}

.ra-linked-lease-sub[b-c6qtbway0t] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.ra-linked-lease-action[b-c6qtbway0t] {
    flex: 0 0 auto;
}

/* The paper — A4-ish, max 920px, centered. Now a soft warm card
   that blends with the parchment page bg instead of a stark white
   form. Print + PDF paths still get the crisp white from the
   @media print block at the bottom. */
.ra-paper[b-c6qtbway0t] {
    background: var(--ra-surface);
    color: var(--ra-text);
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    padding: 2.5rem 3rem;
    border-radius: 14px;
    border: 1px solid var(--ra-border);
    box-shadow:
        0 1px 2px rgba(var(--shadow-rgb),  0.04),
        0 8px 28px -12px rgba(var(--shadow-rgb),  0.10);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.55;
}

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

.ra-agency[b-c6qtbway0t] {
    font-size: 15px;
    font-weight: 700;
    color: var(--ra-brand);
}

.ra-agency-slug[b-c6qtbway0t] {
    font-size: 12px;
    color: var(--ra-text-3);
    margin-top: 0.15rem;
}

.ra-doc-meta[b-c6qtbway0t] {
    font-size: 12px;
    color: var(--ra-text-3);
    text-align: right;
}

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

/* Headline lease-application title — brand-green primary surface
   instead of the original dark navy "RESIDENTIAL LEASE APPLICATION"
   banner. Same prominence, on-brand. */
.ra-title[b-c6qtbway0t] {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: linear-gradient(135deg, var(--ra-brand) 0%, var(--ra-brand-deep) 100%);
    color: var(--white);
    padding: 0.9rem 1.2rem;
    margin: 0 0 1.5rem 0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.12),
                0 4px 14px -6px rgba(var(--shadow-rgb),  0.25);
}

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

.ra-label[b-c6qtbway0t] {
    font-size: 11px;
    color: var(--ra-text-3);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.ra-premises-value[b-c6qtbway0t] {
    font-size: 15px;
    border-bottom: 1px solid var(--ra-border);
    padding-bottom: 0.5rem;
    color: var(--ra-text);
}

.ra-quote[b-c6qtbway0t] {
    color: var(--ra-text-3);
    font-style: italic;
    margin-left: 0.25rem;
}

/* Section headers — the old dark-navy banners are gone. Each
   section reads as a card-internal divider with a forest-green
   accent line and a sentence-case h2, instead of an UPPERCASE
   banner. Much easier to scan. */
.ra-section[b-c6qtbway0t] {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ra-border);
}

.ra-section:first-of-type[b-c6qtbway0t] {
    margin-top: 0.5rem;
    padding-top: 0;
    border-top: 0;
}

.ra-section-header[b-c6qtbway0t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0 0.85rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--ra-brand-tint-2);
    position: relative;
}

/* Brand-green accent strip on the left of the header — nods to
   the renter app's eyebrow without taking the full banner width. */
.ra-section-header[b-c6qtbway0t]::before {
    content: "";
    position: absolute;
    left: -0.6rem;
    top: 0;
    bottom: 0.85rem;
    width: 3px;
    border-radius: 2px;
    background: var(--ra-brand);
}

.ra-section-header h2[b-c6qtbway0t] {
    font-size: 17px;
    font-weight: 700;
    color: var(--ra-brand);
    letter-spacing: -0.005em;
    margin: 0;
    text-transform: none;
}

.ra-remove-btn[b-c6qtbway0t] {
    color: var(--ra-danger) !important;
    font-size: 12px;
    font-weight: 600;
}

.ra-subhead[b-c6qtbway0t] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ra-text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 1.25rem 0 0.7rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px dashed var(--ra-border);
}

/* 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 — rounded card style matching the renter fill page.
   The old underline-only "document" look made every field hard to
   see; this version sits each input in a clear container with a
   visible border, brand-green focus ring, and proper sentence-case
   labels. */
.ra-field[b-c6qtbway0t] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.ra-field > span[b-c6qtbway0t] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ra-text);
    letter-spacing: 0.005em;
    text-transform: none;
}

.ra-field input[b-c6qtbway0t],
.ra-field textarea[b-c6qtbway0t],
.ra-field select[b-c6qtbway0t] {
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--ra-border-2);
    border-radius: 10px;
    background: var(--ra-surface);
    color: var(--ra-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    width: 100%;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 120ms ease;
}

.ra-field input:hover:not(:focus):not(:disabled)[b-c6qtbway0t],
.ra-field textarea:hover:not(:focus):not(:disabled)[b-c6qtbway0t],
.ra-field select:hover:not(:focus):not(:disabled)[b-c6qtbway0t] {
    border-color: var(--ra-brand-soft);
}

.ra-field input:focus[b-c6qtbway0t],
.ra-field textarea:focus[b-c6qtbway0t],
.ra-field select:focus[b-c6qtbway0t] {
    outline: 0;
    border-color: var(--ra-brand);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb),  0.10);
    background: var(--ra-surface);
}

.ra-field input[b-c6qtbway0t]::placeholder,
.ra-field textarea[b-c6qtbway0t]::placeholder {
    color: var(--ra-text-3);
}

.ra-field input:disabled[b-c6qtbway0t],
.ra-field textarea:disabled[b-c6qtbway0t],
.ra-field select:disabled[b-c6qtbway0t] {
    color: var(--ra-text-3);
    background: var(--ra-surface-soft);
    cursor: not-allowed;
    border-color: var(--ra-border);
}

.ra-field input[type="checkbox"][b-c6qtbway0t] {
    width: auto;
    padding: 0;
    border: 0;
    accent-color: var(--ra-brand);
}

.ra-field textarea[b-c6qtbway0t] {
    resize: vertical;
    min-height: 4rem;
}

/* Date inputs — paint a forest-green calendar icon so the picker
   is visible on the warm parchment surface. The native webkit icon
   nearly disappears against this background. */
.ra-field input[type="date"][b-c6qtbway0t] {
    position: relative;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314532D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 18px 18px;
    color-scheme: light;
}

.ra-field input[type="date"][b-c6qtbway0t]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    opacity: 0;
    cursor: pointer;
}

/* Document checklist */
.ra-checks[b-c6qtbway0t] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0.5rem 0 1rem 0;
    padding: 0.7rem 0.9rem;
    background: var(--ra-surface-soft);
    border: 1px solid var(--ra-border);
    border-left: 3px solid var(--ra-brand);
    border-radius: 10px;
}

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

/* Fees total bar — forest-green primary surface so the headline
   number reads as the most important figure on the page without
   the harsh navy contrast. */
.ra-fees-total[b-c6qtbway0t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.85rem 1.1rem;
    background: linear-gradient(135deg, var(--ra-brand) 0%, var(--ra-brand-deep) 100%);
    color: var(--white);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.15),
                0 8px 20px -10px rgba(var(--shadow-rgb),  0.4);
}

.ra-fees-total strong[b-c6qtbway0t] {
    font-size: 18px;
    font-weight: 700;
}

/* Consent rows — soft brand-tinted band so they stand apart from
   the rest of the form (this is a legal commitment, not just
   another field). */
.ra-consent[b-c6qtbway0t] {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ra-border);
    border-radius: 10px;
    margin-bottom: 0.5rem;
    background: var(--ra-surface-soft);
    font-size: 13.5px;
    line-height: 1.5;
}

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

.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;
}

/* Decision panel — soft warm tone so it stands out as the
   approve/reject moment, but no more harsh brown-on-amber. The
   header rides on top with the brand-green eyebrow style of every
   other section so it still feels part of the same form. */
.ra-decision[b-c6qtbway0t] {
    background: var(--ra-warn-bg);
    padding: 1.1rem 1.25rem 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--warning-bright);
    border-left: 4px solid var(--ra-warn);
    margin-top: 1.5rem;
}

.ra-decision .ra-section-header[b-c6qtbway0t] {
    background: transparent;
    border-bottom-color: rgba(var(--gold-rgb),  0.30);
    margin-bottom: 0.8rem;
}

.ra-decision .ra-section-header[b-c6qtbway0t]::before {
    background: var(--ra-warn);
}

.ra-decision .ra-section-header h2[b-c6qtbway0t] {
    color: var(--warning-deep);
}

/* Print — strip chrome, paper goes edge-to-edge. */
@media print {
    .ra-toolbar[b-c6qtbway0t],
    .ra-flash[b-c6qtbway0t],
    .ra-linked-lease[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;
        border: 0;
        max-width: none;
        margin: 0;
        padding: 1cm 1.5cm;
    }

    /* For print: collapse the rounded cards back to underline-only
       so the printed page looks like a legal form, not a UI dump. */
    .ra-field input[b-c6qtbway0t],
    .ra-field textarea[b-c6qtbway0t],
    .ra-field select[b-c6qtbway0t] {
        color: var(--black);
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--black);
        border-radius: 0;
        padding: 0.3rem 0;
        box-shadow: none;
    }

    .ra-title[b-c6qtbway0t] {
        background: var(--black);
        color: var(--white);
        box-shadow: none;
    }

    .ra-fees-total[b-c6qtbway0t] {
        background: var(--black);
        color: var(--white);
        box-shadow: none;
    }

    .ra-section-header[b-c6qtbway0t]::before { display: none; }

    /* Hide the supporting-docs card + fullscreen toggle when printing
       the paper form itself. The agent's "Download PDF" path is the
       canonical print artefact; the docs vault is tooling only. */
    .ra-tools-card[b-c6qtbway0t],
    .ra-paper-controls[b-c6qtbway0t] { display: none !important; }
}

/* ─── Supporting documents card (NOT on the paper) ────────────
   Brand-forest-green tool card that sits above the printed-form
   mimic. Distinct visual language so the agent doesn't conflate
   the docs vault with the form itself. */
.ra-tools-card[b-c6qtbway0t] {
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 1.5rem;
    border-radius: 12px;
    background: var(--white);
    border: 1px solid rgba(var(--accent-rgb),  0.14);
    box-shadow: 0 1px 2px rgba(var(--accent-rgb),  0.04),
                0 8px 24px -12px rgba(var(--accent-rgb),  0.10);
}

.ra-tools-card-head[b-c6qtbway0t] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(var(--accent-rgb),  0.10);
}

.ra-tools-eyebrow[b-c6qtbway0t] {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.4rem;
}

.ra-tools-sub[b-c6qtbway0t] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 64ch;
}

.ra-tools-sub strong[b-c6qtbway0t] { color: var(--accent); }

/* ─── Paper fullscreen mode ───────────────────────────────────
   The agent can toggle the paper into a viewport-filling overlay
   so they can read every field clearly without the portal chrome.
   Toggled by a small button in the controls bar via tiny inline JS
   (no Blazor circuit dependency). */
.ra-paper-wrap[b-c6qtbway0t] {
    width: 100%;
    transition: padding 200ms ease;
}

.ra-paper-controls[b-c6qtbway0t] {
    max-width: 920px;
    width: 100%;
    margin: 0 auto 0.5rem;
    display: flex;
    justify-content: flex-end;
}

.ra-paper-fullscreen-btn[b-c6qtbway0t] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    background: rgba(var(--glass-rgb),  0.85);
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb),  0.18);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease;
}

.ra-paper-fullscreen-btn:hover[b-c6qtbway0t] {
    background: var(--white);
    border-color: var(--accent);
}

.ra-paper-fullscreen-btn svg[b-c6qtbway0t] { width: 14px; height: 14px; }

/* Fullscreen — overlay the paper on top of everything. */
.ra-paper-wrap.is-fullscreen[b-c6qtbway0t] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: linear-gradient(180deg, var(--border-subtle) 0%, var(--border) 100%);
    overflow-y: auto;
    padding: 1.5rem 1rem 4rem;
}

.ra-paper-wrap.is-fullscreen .ra-paper[b-c6qtbway0t] {
    max-width: 1100px;
    margin: 0 auto;
}

.ra-paper-wrap.is-fullscreen .ra-paper-controls[b-c6qtbway0t] {
    max-width: 1100px;
    position: sticky;
    top: 0;
    background: rgba(var(--glass-rgb),  0.85);
    backdrop-filter: blur(6px);
    padding: 0.5rem 0.25rem;
    border-radius: 8px;
    z-index: 1;
}

/* Body lock-scroll when overlay is open so background doesn't
   double-scroll behind the paper. */
body:has(.ra-paper-wrap.is-fullscreen)[b-c6qtbway0t] {
    overflow: hidden;
}

/* ─── Send-channel picker in the Send-to-applicant dialog ─────────
   Three-way radio (Email / SMS / Both). Email is the default and
   stays visually neutral; SMS options highlight on hover so the
   agent thinks twice before opting in to the credit spend. The
   "is-active" state lifts the picked card with a brand-green ring. */

.ra-send-channels[b-c6qtbway0t] {
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}

.ra-send-channels legend[b-c6qtbway0t] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    padding: 0;
    margin: 0 0 0.5rem;
}

.ra-send-channel[b-c6qtbway0t] {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border, var(--border));
    border-radius: 10px;
    background: var(--white);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 140ms ease;
}

.ra-send-channel:hover[b-c6qtbway0t] {
    border-color: var(--brand, var(--accent));
    background: rgba(var(--accent-rgb),  0.03);
}

.ra-send-channel.is-active[b-c6qtbway0t] {
    border-color: var(--brand, var(--accent));
    background: rgba(var(--accent-rgb),  0.06);
    box-shadow:
        0 0 0 3px rgba(var(--accent-rgb),  0.12),
        0 1px 2px rgba(var(--shadow-rgb),  0.10);
}

.ra-send-channel input[type=radio][b-c6qtbway0t] {
    margin-top: 0.2rem;
    accent-color: var(--brand, var(--accent));
    flex-shrink: 0;
}

.ra-send-channel-body[b-c6qtbway0t] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.ra-send-channel-body strong[b-c6qtbway0t] {
    font-size: 13.5px;
    color: var(--text);
    font-weight: 600;
}

.ra-send-channel-body span[b-c6qtbway0t] {
    font-size: 12px;
    color: var(--text-3, var(--text-secondary));
    line-height: 1.4;
}

/* Disabled fields read as muted so the "(not used for SMS-only)"
   label doesn't look like a bug. Uses the warm tokens so it sits
   on the parchment surface naturally. */
.ra-field input:disabled[b-c6qtbway0t] {
    background: var(--ra-surface-soft, var(--surface-2));
    color: var(--ra-text-3, var(--text-tertiary));
    cursor: not-allowed;
    border-color: var(--ra-border, var(--border));
}

@media (max-width: 640px) {
    .ra-send-channels[b-c6qtbway0t] { grid-template-columns: 1fr; }
}

/* ─── Hero header ──────────────────────────────────────────
   Pulled-up summary that anchors every other section: who's
   applying, where, when, and what to do next. Matches the
   forest-green eyebrow + big title rhythm of the renter fill
   page so the agent + applicant surfaces feel like one system. */

.ra-hero[b-c6qtbway0t] {
    background: linear-gradient(180deg, rgba(var(--accent-rgb),  0.04) 0%, rgba(var(--accent-rgb),  0.01) 100%);
    border: 1px solid rgba(var(--accent-rgb),  0.18);
    border-radius: 14px;
    padding: 1.4rem 1.5rem 1.2rem;
    margin: 0.75rem 0 1rem;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.04);
}

.ra-hero-eyebrow[b-c6qtbway0t] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 12px;
    color: var(--text-3, var(--text-secondary));
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 0.45rem;
}

.ra-hero-eyebrow-sep[b-c6qtbway0t],
.ra-hero-meta-sep[b-c6qtbway0t] {
    color: var(--border, var(--border-strong));
}

.ra-hero-title[b-c6qtbway0t] {
    margin: 0 0 0.25rem;
    font-size: 26px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.ra-hero-sub[b-c6qtbway0t] {
    margin: 0 0 0.6rem;
    color: var(--text, var(--text));
    font-size: 14.5px;
    line-height: 1.45;
}

.ra-hero-sub strong[b-c6qtbway0t] { color: var(--accent); }

.ra-hero-meta[b-c6qtbway0t] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.55rem;
    font-size: 12.5px;
    color: var(--text-3, var(--text-secondary));
}

.ra-hero-next[b-c6qtbway0t] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    justify-content: space-between;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    background: rgba(var(--accent-rgb),  0.07);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
}

.ra-hero-next-text[b-c6qtbway0t] {
    flex: 1;
    min-width: 0;
}

.ra-hero-next-eyebrow[b-c6qtbway0t] {
    display: block;
    font-size: 10.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 0.2rem;
    opacity: 0.78;
}

.ra-hero-next-text strong[b-c6qtbway0t] {
    display: block;
    color: var(--accent);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.ra-hero-next-text p[b-c6qtbway0t] {
    margin: 0;
    color: var(--text-2, var(--text-secondary));
    font-size: 13px;
    line-height: 1.45;
}

.ra-hero-next .adm-btn[b-c6qtbway0t] {
    flex-shrink: 0;
    align-self: flex-start;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .ra-hero[b-c6qtbway0t] { padding: 1.1rem 1.2rem 1rem; }
    .ra-hero-title[b-c6qtbway0t] { font-size: 22px; }
    .ra-hero-next[b-c6qtbway0t] { flex-direction: column; gap: 0.6rem; }
    .ra-hero-next .adm-btn[b-c6qtbway0t] { width: 100%; text-align: center; }
}

/* ─── Floating "what's missing" badge + popover ────────────
   The old wide amber banner felt heavy and bloated the top of
   the page. This is a small fixed-position circular badge that
   sits on the right edge of the viewport with a count chip;
   click expands a popover anchored to the badge listing every
   gap. Hidden via :not(:has) — there's no badge when there's
   nothing to fix. */

.ra-missing-fab[b-c6qtbway0t] {
    position: fixed;
    /* Anchor under the topbar — adjust if your portal chrome
       is taller. Visible while the agent scrolls the form. */
    top: 84px;
    right: 24px;
    z-index: 80;
}

.ra-missing-fab-btn[b-c6qtbway0t] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--warning-bright) 0%, var(--gold-deep) 100%);
    color: var(--white);
    border: 0;
    cursor: pointer;
    box-shadow:
        0 1px 2px rgba(var(--warning-rgb),  0.15),
        0 8px 22px -6px rgba(var(--gold-rgb),  0.55);
    transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 140ms ease;
    animation: ra-missing-pulse-b-c6qtbway0t 2.4s ease-in-out infinite;
}

.ra-missing-fab-btn:hover[b-c6qtbway0t],
.ra-missing-fab.is-open .ra-missing-fab-btn[b-c6qtbway0t] {
    transform: scale(1.06);
    box-shadow:
        0 1px 2px rgba(var(--warning-rgb),  0.2),
        0 12px 28px -8px rgba(var(--gold-rgb),  0.65);
    animation-play-state: paused;
}

.ra-missing-fab-btn svg[b-c6qtbway0t] {
    width: 22px;
    height: 22px;
}

.ra-missing-fab-count[b-c6qtbway0t] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--danger-bright);
    color: var(--white);
    font-size: 11px;
    font-weight: 800;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--ra-bg, var(--surface-2));
}

@keyframes ra-missing-pulse-b-c6qtbway0t {
    0%, 100% { box-shadow: 0 1px 2px rgba(var(--warning-rgb),  0.15),
                            0 8px 22px -6px rgba(var(--gold-rgb),  0.55),
                            0 0 0 0 rgba(var(--gold-rgb),  0.45); }
    50%      { box-shadow: 0 1px 2px rgba(var(--warning-rgb),  0.15),
                            0 8px 22px -6px rgba(var(--gold-rgb),  0.55),
                            0 0 0 14px rgba(var(--gold-rgb),  0); }
}

@media (prefers-reduced-motion: reduce) {
    .ra-missing-fab-btn[b-c6qtbway0t] { animation: none; }
}

/* Transparent backdrop catches outside clicks. */
.ra-missing-backdrop[b-c6qtbway0t] {
    position: fixed;
    inset: 0;
    z-index: 78;
    background: transparent;
}

.ra-missing-pop[b-c6qtbway0t] {
    position: absolute;
    z-index: 81;
    top: calc(100% + 0.6rem);
    right: 0;
    width: 380px;
    max-width: calc(100vw - 2.5rem);
    max-height: calc(100vh - 160px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--warning-subtle) 0%, var(--warning-subtle) 100%);
    border: 1px solid var(--warning-bright);
    border-left: 3px solid var(--gold-deep);
    border-radius: 14px;
    box-shadow:
        0 1px 2px rgba(var(--warning-rgb),  0.15),
        0 24px 56px -16px rgba(var(--warning-rgb),  0.40);
    animation: ra-missing-pop-in-b-c6qtbway0t 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ra-missing-pop-in-b-c6qtbway0t {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ra-missing-pop-head[b-c6qtbway0t] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.1rem 0.85rem;
    border-bottom: 1px dashed rgba(var(--gold-rgb),  0.35);
}

.ra-missing-pop-icon[b-c6qtbway0t] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--gold-deep);
    color: var(--white);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 16px;
    line-height: 1;
}

.ra-missing-pop-titles[b-c6qtbway0t] {
    flex: 1;
    min-width: 0;
}

.ra-missing-pop-titles strong[b-c6qtbway0t] {
    display: block;
    color: var(--warning-deep);
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.ra-missing-pop-titles p[b-c6qtbway0t] {
    margin: 0;
    color: var(--warning-deep);
    font-size: 12.5px;
    line-height: 1.5;
}

.ra-missing-pop-titles a[b-c6qtbway0t] {
    color: var(--accent);
    font-weight: 700;
    text-decoration: underline;
}

.ra-missing-pop-titles a:hover[b-c6qtbway0t] { color: var(--accent-active); }

.ra-missing-pop-close[b-c6qtbway0t] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--warning-deep);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 120ms ease, color 120ms ease;
}

.ra-missing-pop-close:hover[b-c6qtbway0t] {
    background: rgba(var(--gold-rgb),  0.15);
    color: var(--warning-deep);
}

.ra-missing-pop-close svg[b-c6qtbway0t] {
    width: 16px;
    height: 16px;
}

.ra-missing-pop-list[b-c6qtbway0t] {
    list-style: none;
    margin: 0;
    padding: 0.4rem 1.1rem 1rem;
    overflow-y: auto;
    flex: 1 1 auto;
}

.ra-missing-pop-list li[b-c6qtbway0t] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.55rem 0;
    border-bottom: 1px dashed rgba(var(--gold-rgb),  0.20);
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
}

.ra-missing-pop-list li:last-child[b-c6qtbway0t] { border-bottom: 0; }

.ra-missing-pop-bullet[b-c6qtbway0t] {
    flex-shrink: 0;
    margin-top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--danger-bright);
    box-shadow: 0 0 0 3px rgba(var(--danger-rgb),  0.12);
}

.ra-missing-pop-list strong[b-c6qtbway0t] {
    color: var(--accent);
    font-weight: 700;
}

@media (max-width: 720px) {
    .ra-missing-fab[b-c6qtbway0t] {
        top: auto;
        bottom: 20px;
        right: 16px;
    }
    .ra-missing-pop[b-c6qtbway0t] {
        top: auto;
        bottom: calc(100% + 0.6rem);
        right: 0;
    }
}
/* /Components/Shared/AddressValidationCheck.razor.rz.scp.css */
/* Address check — Google Address Validation verdict for the listing
   editor's Section A. Self-contained brand-green palette so it
   doesn't depend on the host page tokens. */

.adv-shell[b-unvmi62ouf] {
    --adv-brand:      var(--accent);
    --adv-good:       var(--accent);
    --adv-warn:       var(--warning);
    --adv-error:      var(--danger);
    --adv-surface:    var(--white);
    --adv-surface-2:  var(--surface-2);
    --adv-border:     rgba(var(--accent-bright-rgb),  0.16);
    --adv-text:       var(--text);
    --adv-text-muted: var(--text-secondary);

    display: block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

[data-theme="dark"] .adv-shell[b-unvmi62ouf] {
    --adv-brand:      var(--accent);
    --adv-good:       var(--accent);
    --adv-warn:       var(--warning-bright);
    --adv-error:      var(--danger-border);
    --adv-surface:    var(--surface);
    --adv-surface-2:  var(--surface-2);
    --adv-border:     rgba(var(--accent-rgb),  0.2);
    --adv-text:       var(--text);
    --adv-text-muted: var(--text-secondary);
}

.adv-row[b-unvmi62ouf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--adv-border);
    border-radius: 11px;
    background: var(--adv-surface-2);
}

.adv-row-text[b-unvmi62ouf] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.adv-title[b-unvmi62ouf] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--adv-text);
}

.adv-sub[b-unvmi62ouf] {
    font-size: 11px;
    color: var(--adv-text-muted);
}

.adv-btn[b-unvmi62ouf] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.8rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--adv-brand) 45%, var(--adv-border));
    background: color-mix(in srgb, var(--adv-brand) 12%, var(--adv-surface));
    color: var(--adv-brand);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 130ms ease;
}

.adv-btn:hover:not(:disabled)[b-unvmi62ouf] {
    background: color-mix(in srgb, var(--adv-brand) 20%, var(--adv-surface));
}

.adv-btn:disabled[b-unvmi62ouf] { opacity: 0.6; cursor: default; }
.adv-btn svg[b-unvmi62ouf] { width: 14px; height: 14px; }

/* ─── Verdict card ────────────────────────────────────────── */

.adv-card[b-unvmi62ouf] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0.5rem;
    padding: 0.7rem 0.85rem;
    border-radius: 11px;
    border: 1px solid var(--adv-border);
    background: var(--adv-surface);
}

.adv-card[data-tone="good"][b-unvmi62ouf] {
    --adv-tone: var(--adv-good);
    border-color: color-mix(in srgb, var(--adv-good) 32%, var(--adv-border));
    background: color-mix(in srgb, var(--adv-good) 8%, var(--adv-surface));
}

.adv-card[data-tone="warn"][b-unvmi62ouf] {
    --adv-tone: var(--adv-warn);
    border-color: color-mix(in srgb, var(--adv-warn) 32%, var(--adv-border));
    background: color-mix(in srgb, var(--adv-warn) 9%, var(--adv-surface));
}

.adv-card[data-tone="error"][b-unvmi62ouf] {
    --adv-tone: var(--adv-error);
    border-color: color-mix(in srgb, var(--adv-error) 32%, var(--adv-border));
    background: color-mix(in srgb, var(--adv-error) 8%, var(--adv-surface));
}

.adv-card-icon[b-unvmi62ouf] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--adv-tone) 16%, var(--adv-surface));
    color: var(--adv-tone);
}

.adv-card-icon svg[b-unvmi62ouf] { width: 16px; height: 16px; }

.adv-card-body[b-unvmi62ouf] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}

.adv-card-body strong[b-unvmi62ouf] {
    font-size: 12.5px;
    color: var(--adv-text);
}

.adv-card-body p[b-unvmi62ouf] {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--adv-text-muted);
}

.adv-emph[b-unvmi62ouf] { font-weight: 600; color: var(--adv-text); }

.adv-note[b-unvmi62ouf] {
    font-size: 10.5px !important;
    color: var(--adv-text-muted);
}

.adv-formatted[b-unvmi62ouf] {
    padding: 0.3rem 0.5rem;
    border-radius: 7px;
    background: var(--adv-surface-2);
    border: 1px solid var(--adv-border);
    font-size: 11.5px !important;
    font-weight: 600;
    color: var(--adv-text) !important;
    overflow-wrap: anywhere;
}

.adv-spin[b-unvmi62ouf] { animation: adv-spin-b-unvmi62ouf 0.7s linear infinite; }

@keyframes adv-spin-b-unvmi62ouf { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .adv-spin[b-unvmi62ouf] { animation: none; }
}
/* /Components/Shared/AgentAssignmentPicker.razor.rz.scp.css */
/* Agent assignment picker — forest-green, matches the listings editor
   (cmp-/lst- design language). Lead-agent select + co-agent chips. */

.aap[b-8hxry3ibjz] {
    --aap-brand:        var(--accent);
    --aap-brand-deep:   var(--accent);
    --aap-surface:      var(--white);
    --aap-surface-2:    var(--surface-2);
    --aap-border:       rgba(var(--accent-bright-rgb),  0.14);
    --aap-border-strong:rgba(var(--accent-bright-rgb),  0.24);
    --aap-text:         var(--text);
    --aap-text-muted:   var(--text-secondary);
    --aap-text-soft:    var(--text-tertiary);

    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

[data-theme="dark"] .aap[b-8hxry3ibjz] {
    --aap-brand:        var(--accent);
    --aap-brand-deep:   var(--accent-border);
    --aap-surface:      var(--surface);
    --aap-surface-2:    var(--surface-2);
    --aap-border:       rgba(var(--accent-rgb),  0.20);
    --aap-border-strong:rgba(var(--accent-rgb),  0.32);
    --aap-text:         var(--text);
    --aap-text-muted:   var(--text-secondary);
    --aap-text-soft:    var(--text-tertiary);
}

.aap-block[b-8hxry3ibjz] { display: flex; flex-direction: column; gap: 0.35rem; }

.aap-head[b-8hxry3ibjz] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.aap-label[b-8hxry3ibjz] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--aap-brand);
}

.aap-req[b-8hxry3ibjz],
.aap-optional[b-8hxry3ibjz] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
}

.aap-req[b-8hxry3ibjz] {
    color: var(--danger);
    background: rgba(var(--danger-rgb),  0.08);
}

.aap-optional[b-8hxry3ibjz] {
    color: var(--aap-text-soft);
    background: var(--aap-surface-2);
}

.aap-count[b-8hxry3ibjz] {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--aap-brand);
}

.aap-hint[b-8hxry3ibjz] {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--aap-text-soft);
}

/* ─── Lead-agent select ───────────────────────────────────── */

.aap-select-wrap[b-8hxry3ibjz] {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 0.15rem;
}

.aap-select-avatar[b-8hxry3ibjz] {
    position: absolute;
    left: 8px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(150deg, var(--aap-brand), var(--aap-brand-deep));
    color: var(--white);
    font-size: 11px;
    font-weight: 800;
    pointer-events: none;
}

.aap-select[b-8hxry3ibjz] {
    width: 100%;
    padding: 0.6rem 2.2rem 0.6rem 3rem;
    border: 1px solid var(--aap-border-strong);
    border-radius: 10px;
    background: var(--aap-surface);
    color: var(--aap-text);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    appearance: none;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.aap-select:focus-visible[b-8hxry3ibjz] {
    outline: none;
    border-color: var(--aap-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--aap-brand) 16%, transparent);
}

.aap-select-caret[b-8hxry3ibjz] {
    position: absolute;
    right: 10px;
    width: 16px;
    height: 16px;
    color: var(--aap-text-soft);
    pointer-events: none;
}

/* ─── Co-agent chips ──────────────────────────────────────── */

.aap-chips[b-8hxry3ibjz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.25rem;
}

.aap-chip[b-8hxry3ibjz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem 0.35rem 0.4rem;
    border: 1px solid var(--aap-border-strong);
    border-radius: 999px;
    background: var(--aap-surface);
    color: var(--aap-text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, transform 80ms ease;
}

.aap-chip:hover[b-8hxry3ibjz] { border-color: var(--aap-brand); }
.aap-chip:active[b-8hxry3ibjz] { transform: translateY(1px); }

.aap-chip.is-on[b-8hxry3ibjz] {
    background: color-mix(in srgb, var(--aap-brand) 12%, var(--aap-surface));
    border-color: var(--aap-brand);
    color: var(--aap-brand-deep);
}

.aap-chip-avatar[b-8hxry3ibjz] {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--aap-surface-2);
    color: var(--aap-text-muted);
    font-size: 10px;
    font-weight: 800;
}

.aap-chip.is-on .aap-chip-avatar[b-8hxry3ibjz] {
    background: linear-gradient(150deg, var(--aap-brand), var(--aap-brand-deep));
    color: var(--white);
}

.aap-chip-name[b-8hxry3ibjz] { white-space: nowrap; }

.aap-chip-mark[b-8hxry3ibjz] {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    color: var(--aap-text-soft);
}

.aap-chip.is-on .aap-chip-mark[b-8hxry3ibjz] { color: var(--aap-brand); }
.aap-chip-mark svg[b-8hxry3ibjz] { width: 14px; height: 14px; }

.aap-solo-note[b-8hxry3ibjz] {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--aap-text-soft);
    padding: 0.6rem 0.7rem;
    border: 1px dashed var(--aap-border-strong);
    border-radius: 10px;
    background: var(--aap-surface-2);
}

[data-theme="dark"] .aap-req[b-8hxry3ibjz] {
    /* --danger-border is a faint 0.30α token; as text it was barely legible.
       --danger-bright (#FCA5A5 in dark) reads clearly on the 0.12 tint. */
    color: var(--danger-bright);
    background: rgba(var(--danger-rgb),  0.12);
}
/* /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, var(--accent));
    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: var(--text);
}

/* 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(var(--shadow-rgb),  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: var(--white);
    color: var(--text);
    border: 1px solid rgba(var(--accent-rgb),  0.10);
    border-radius: 14px;
    overflow: hidden;

    /* Layered shadows — soft inner highlight + deep drop. */
    box-shadow:
        inset 0 1px 0 rgba(var(--glass-rgb),  0.9),
        0 1px 2px rgba(var(--shadow-rgb),  0.04),
        0 24px 56px -12px rgba(var(--shadow-rgb),  0.30),
        0 8px 20px -8px rgba(var(--shadow-rgb),  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: var(--surface);
    color: var(--text);
    border-color: rgba(var(--accent-rgb),  0.12);
    box-shadow:
        inset 0 1px 0 rgba(var(--accent-rgb),  0.06),
        0 1px 2px rgba(var(--shadow-rgb),  0.30),
        0 24px 56px -12px rgba(var(--shadow-rgb),  0.65),
        0 8px 20px -8px rgba(var(--shadow-rgb),  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(var(--accent-rgb),  0.08);
    background: var(--surface-2);
}

[data-theme="dark"] .cmdk-input-row[b-6s45epg0q0] {
    background: var(--bg);
    border-bottom-color: rgba(var(--accent-rgb),  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: var(--text-tertiary);
    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: var(--text-tertiary);
}

.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: var(--text-tertiary);
    font-weight: 400;
}

[data-theme="dark"] .cmdk-input[b-6s45epg0q0]::placeholder {
    color: var(--text-tertiary);
}

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

.cmdk-kbd[b-6s45epg0q0] {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 0.375rem;
    background: var(--white);
    color: var(--text-secondary);
    border: 1px solid rgba(var(--accent-rgb),  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(var(--accent-rgb),  0.08);
}

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

.cmdk-kbd-esc[b-6s45epg0q0] {
    background: rgba(var(--accent-rgb),  0.04);
}

[data-theme="dark"] .cmdk-kbd[b-6s45epg0q0] {
    background: var(--surface);
    color: var(--text-secondary);
    border-color: rgba(var(--accent-rgb),  0.16);
    box-shadow: 0 1px 0 rgba(var(--shadow-rgb),  0.30);
}

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

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

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

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

.cmdk-list[b-6s45epg0q0]::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb),  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: var(--accent);
    margin: 0;
}

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

[data-theme="dark"] .cmdk-group[b-6s45epg0q0] {
    color: var(--accent);
}

/* 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: var(--text);
    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: var(--text);
}

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

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

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

[data-theme="dark"] .cmdk-item.is-selected[b-6s45epg0q0] {
    background: rgba(var(--accent-rgb),  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, var(--accent-bright), var(--accent));
}

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

[data-theme="dark"][b-6s45epg0q0]  .cmdk-icon {
    background: rgba(var(--accent-rgb),  0.08);
    color: var(--accent);
}

[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, var(--accent-bright), var(--accent));
    color: var(--white);
}

[data-theme="dark"] .cmdk-item.is-selected[b-6s45epg0q0]  .cmdk-icon {
    background: linear-gradient(135deg, var(--accent), var(--accent-bright));
    color: var(--bg);
}

.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: var(--white);
    background: var(--accent);
    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: var(--accent-bright);
    color: var(--bg);
}

/* ───── 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(var(--accent-bright-rgb),  0.10) 0%, transparent 70%);
    color: var(--accent-bright);
}

[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: var(--text);
    letter-spacing: -0.01em;
}

.cmdk-empty-hint[b-6s45epg0q0] {
    margin: 0;
    font-size: 13px;
    color: var(--text-tertiary);
    font-weight: 500;
}

[data-theme="dark"] .cmdk-empty-title[b-6s45epg0q0] {
    color: var(--text);
}

[data-theme="dark"] .cmdk-empty-hint[b-6s45epg0q0] {
    color: var(--text-tertiary);
}

/* ───── 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(var(--accent-rgb),  0.08);
    background: var(--surface-2);
    font-size: 12px;
}

[data-theme="dark"] .cmdk-foot[b-6s45epg0q0] {
    background: var(--bg);
    border-top-color: rgba(var(--accent-rgb),  0.10);
}

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

.cmdk-foot-label[b-6s45epg0q0] {
    color: var(--text-secondary);
    font-weight: 500;
}

[data-theme="dark"] .cmdk-foot-label[b-6s45epg0q0] {
    color: var(--text-secondary);
}

/* ───── 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(var(--shadow-rgb),  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%);
    /* --bg-2 is a phantom token (never defined) so this fell back to
       var(--white) in dark mode → white modal under near-white text. */
    background: var(--surface);
    color: var(--text);
    border-radius: 0.85rem;
    padding: 1.75rem 1.75rem 1.5rem;
    box-shadow:
        0 1px 2px rgba(var(--shadow-rgb),  0.10),
        0 24px 60px -16px rgba(var(--shadow-rgb),  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: var(--white);
    background: linear-gradient(135deg, var(--tone-indigo), var(--tone-indigo));
    margin-bottom: 0.5rem;
}

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

.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, var(--text-secondary));
}

.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/DocumentList.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────
   Document vault — branded file-server UI shared by lease,
   listing, renter, application, inspection and maintenance
   detail pages. Forest-green palette so it stitches into the
   rest of the portal; rich card-grid layout so files are
   scannable instead of buried in a flat list.

   Scoped to <DocumentList> via Blazor's CSS isolation —
   nothing here leaks out.
   ───────────────────────────────────────────────────────────── */

/* Brand tokens for everything this component renders — both the
   inline vault AND the lightbox preview overlay. We list every
   root the component can output so the preview (which is a
   SIBLING of .doc-vault, not a child) can resolve the variables
   too. Without this duplication the preview rendered with empty
   var() lookups → transparent header + black backdrop. */
.doc-vault[b-thv5hbfzm9],
.doc-preview-backdrop[b-thv5hbfzm9] {
    --dv-brand:        var(--accent);
    --dv-brand-deep:   var(--accent-hover);
    --dv-brand-soft:   var(--accent-hover);
    --dv-brand-tint:   rgba(var(--accent-rgb),  0.06);
    --dv-brand-tint-2: rgba(var(--accent-rgb),  0.14);
    /* var(--surface), not var(--white): this component has no dark-theme
       override, so a hard white made the whole vault a white card with
       invisible near-white text in dark mode. --surface adapts (white in
       light, dark surface in dark); the other tokens here already adapt. */
    --dv-bg:           var(--surface);
    --dv-bg-soft:      var(--surface-2);
    --dv-border:       var(--border);
    --dv-border-2:     var(--border-strong);
    --dv-text:         var(--text);
    --dv-text-2:       var(--text-secondary);
    --dv-text-3:       var(--text-tertiary);
    --dv-danger:       var(--danger);
    --dv-warn:         var(--gold-deep);
}

.doc-vault[b-thv5hbfzm9] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    background: var(--dv-bg);
    border: 1px solid var(--dv-border);
    border-radius: 14px;
    padding: 1.25rem 1.4rem 1.4rem;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.04);
}

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

.doc-vault-head[b-thv5hbfzm9] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px dashed var(--dv-border);
}

.doc-vault-head-icon[b-thv5hbfzm9] {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--dv-brand), var(--dv-brand-deep));
    color: var(--white);
    display: grid;
    place-items: center;
    box-shadow: 0 4px 10px -4px rgba(var(--shadow-rgb),  0.35);
}

.doc-vault-head-icon svg[b-thv5hbfzm9] {
    width: 18px;
    height: 18px;
}

.doc-vault-head-text[b-thv5hbfzm9] {
    flex: 1;
    min-width: 0;
}

.doc-vault-head-text h3[b-thv5hbfzm9] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--dv-brand);
    letter-spacing: -0.01em;
}

.doc-vault-head-text p[b-thv5hbfzm9] {
    margin: 0.15rem 0 0;
    color: var(--dv-text-3);
    font-size: 12.5px;
}

/* ─── Flash / error banners ───────────────────────────────── */

.doc-vault-flash[b-thv5hbfzm9] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
}

.doc-vault-flash.is-ok[b-thv5hbfzm9] {
    background: var(--dv-brand-tint);
    color: var(--dv-brand-deep);
    border: 1px solid var(--dv-brand-tint-2);
}

.doc-vault-flash.is-error[b-thv5hbfzm9] {
    background: var(--danger-subtle);
    color: var(--danger-deep);
    border: 1px solid var(--danger-border);
}

.doc-vault-flash svg[b-thv5hbfzm9] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* ─── Uploader ─────────────────────────────────────────────
   Two-column: kind picker on the left, drop-target on the
   right. Collapses to one column on narrow screens. */

.doc-vault-uploader[b-thv5hbfzm9] {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 1rem;
    align-items: stretch;
}

.doc-vault-uploader.is-uploading[b-thv5hbfzm9] {
    opacity: 0.65;
    pointer-events: none;
}

.doc-vault-kind[b-thv5hbfzm9] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.doc-vault-kind-label[b-thv5hbfzm9] {
    font-size: 12px;
    font-weight: 700;
    color: var(--dv-text);
    letter-spacing: 0.01em;
}

/* Custom kind picker — native <select> can't restyle its
   open menu, so we render our own button + popover list. */
.doc-vault-kind-picker[b-thv5hbfzm9] {
    position: relative;
    z-index: 10;
}

.doc-vault-kind-toggle[b-thv5hbfzm9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: var(--dv-bg-soft);
    border: 1px solid var(--dv-border-2);
    border-radius: 10px;
    padding: 0.55rem 0.7rem 0.55rem 0.7rem;
    color: var(--dv-text);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
    text-align: left;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 120ms ease;
}

.doc-vault-kind-toggle:hover:not(:disabled)[b-thv5hbfzm9] {
    border-color: var(--dv-brand);
    background: var(--dv-bg);
}

.doc-vault-kind-picker.is-open .doc-vault-kind-toggle[b-thv5hbfzm9],
.doc-vault-kind-toggle:focus-visible[b-thv5hbfzm9] {
    outline: 0;
    border-color: var(--dv-brand);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb),  0.12);
    background: var(--dv-bg);
}

.doc-vault-kind-toggle:disabled[b-thv5hbfzm9] {
    cursor: not-allowed;
    opacity: 0.6;
}

.doc-vault-kind-icon[b-thv5hbfzm9] {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.doc-vault-kind-text[b-thv5hbfzm9] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.doc-vault-kind-chevron[b-thv5hbfzm9] {
    width: 14px;
    height: 14px;
    color: var(--dv-brand);
    flex-shrink: 0;
    transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.doc-vault-kind-picker.is-open .doc-vault-kind-chevron[b-thv5hbfzm9] {
    transform: rotate(180deg);
}

/* Backdrop catches outside clicks to close the menu. Transparent
   but z-indexed below the menu, above the rest of the page. */
.doc-vault-kind-backdrop[b-thv5hbfzm9] {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: transparent;
}

.doc-vault-kind-menu[b-thv5hbfzm9] {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    z-index: 60;
    list-style: none;
    margin: 0;
    padding: 0.35rem;
    background: var(--dv-bg);
    border: 1px solid var(--dv-border);
    border-radius: 12px;
    box-shadow:
        0 1px 2px rgba(var(--shadow-rgb),  0.06),
        0 16px 32px -12px rgba(var(--shadow-rgb),  0.25);
    max-height: 280px;
    overflow-y: auto;
    animation: dv-menu-in-b-thv5hbfzm9 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dv-menu-in-b-thv5hbfzm9 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.doc-vault-kind-menu li[b-thv5hbfzm9] { margin: 0; padding: 0; }

.doc-vault-kind-option[b-thv5hbfzm9] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 8px;
    padding: 0.55rem 0.65rem;
    color: var(--dv-text);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
    text-align: left;
    transition: background 120ms ease, color 120ms ease;
}

.doc-vault-kind-option:hover[b-thv5hbfzm9],
.doc-vault-kind-option:focus-visible[b-thv5hbfzm9] {
    outline: 0;
    background: var(--dv-brand-tint);
    color: var(--dv-brand-deep);
}

.doc-vault-kind-option.is-picked[b-thv5hbfzm9] {
    background: var(--dv-brand-tint);
    color: var(--dv-brand-deep);
    font-weight: 600;
}

.doc-vault-kind-option-icon[b-thv5hbfzm9] {
    font-size: 17px;
    line-height: 1;
    flex-shrink: 0;
}

.doc-vault-kind-option-label[b-thv5hbfzm9] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-vault-kind-option-check[b-thv5hbfzm9] {
    width: 14px;
    height: 14px;
    color: var(--dv-brand);
    flex-shrink: 0;
}

/* The actual drop target — full clickable area with a soft
   dashed brand border. Native file input is positioned over
   the whole label so any click opens the picker. */
.doc-vault-dropzone[b-thv5hbfzm9] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 130px;
    padding: 1.25rem 1rem;
    text-align: center;
    background: linear-gradient(180deg, var(--dv-brand-tint) 0%, transparent 100%);
    border: 2px dashed var(--dv-brand-tint-2);
    border-radius: 12px;
    cursor: pointer;
    color: var(--dv-text-2);
    transition: border-color 160ms ease, background 160ms ease, transform 100ms ease;
}

.doc-vault-dropzone:hover[b-thv5hbfzm9],
.doc-vault-dropzone:focus-within[b-thv5hbfzm9] {
    border-color: var(--dv-brand);
    background: linear-gradient(180deg, rgba(var(--accent-rgb),  0.10) 0%, rgba(var(--accent-rgb),  0.03) 100%);
    transform: translateY(-1px);
}

.doc-vault-dropzone[data-busy="true"][b-thv5hbfzm9] {
    cursor: progress;
    opacity: 0.7;
}

.doc-vault-dropzone-icon[b-thv5hbfzm9] {
    width: 28px;
    height: 28px;
    color: var(--dv-brand);
    margin-bottom: 0.2rem;
}

.doc-vault-dropzone strong[b-thv5hbfzm9] {
    font-size: 14px;
    font-weight: 600;
    color: var(--dv-brand-deep);
}

.doc-vault-dropzone small[b-thv5hbfzm9] {
    font-size: 12px;
    color: var(--dv-text-3);
}

/* The native file input — invisible but clickable across the
   full label. Keyboard users still get focus-visible via the
   .doc-vault-dropzone:focus-within ring above.

   Blazor CSS isolation doesn't tag the markup that <InputFile>
   renders, so we use ::deep to break out of the scope. Without
   it, the native "Choose file / No file chosen" button leaks
   through the dropzone visually. */
.doc-vault-dropzone[b-thv5hbfzm9]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: inherit;
}

/* ─── Upload progress ─────────────────────────────────────── */

.doc-vault-progress[b-thv5hbfzm9] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.7rem 0.85rem;
    background: var(--dv-brand-tint);
    border: 1px solid var(--dv-brand-tint-2);
    border-radius: 10px;
}

.doc-vault-progress-row[b-thv5hbfzm9] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 13px;
    color: var(--dv-text);
}

.doc-vault-progress-spin svg[b-thv5hbfzm9] {
    width: 14px;
    height: 14px;
    color: var(--dv-brand);
    animation: dv-spin-b-thv5hbfzm9 0.9s linear infinite;
}

.doc-vault-progress-name[b-thv5hbfzm9] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.doc-vault-progress-pct[b-thv5hbfzm9] {
    font-feature-settings: "tnum" 1;
    color: var(--dv-brand-deep);
    font-weight: 700;
}

.doc-vault-progress-track[b-thv5hbfzm9] {
    height: 4px;
    background: rgba(var(--accent-rgb),  0.15);
    border-radius: 999px;
    overflow: hidden;
}

.doc-vault-progress-fill[b-thv5hbfzm9] {
    height: 100%;
    background: linear-gradient(90deg, var(--dv-brand-soft), var(--dv-brand));
    border-radius: 999px;
    transition: width 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dv-spin-b-thv5hbfzm9 { to { transform: rotate(360deg); } }

/* ─── Empty + loading states ──────────────────────────────── */

.doc-vault-empty[b-thv5hbfzm9],
.doc-vault-loading[b-thv5hbfzm9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--dv-text-2);
    background: var(--dv-bg-soft);
    border: 1px dashed var(--dv-border);
    border-radius: 12px;
}

.doc-vault-empty svg[b-thv5hbfzm9] {
    width: 38px;
    height: 38px;
    color: var(--dv-border-2);
}

.doc-vault-empty strong[b-thv5hbfzm9] {
    font-size: 14.5px;
    color: var(--dv-text);
    font-weight: 700;
}

.doc-vault-empty p[b-thv5hbfzm9] {
    margin: 0;
    max-width: 44ch;
    font-size: 13px;
    color: var(--dv-text-3);
    line-height: 1.5;
}

.doc-vault-loading[b-thv5hbfzm9] {
    flex-direction: row;
    padding: 1.25rem;
    font-size: 13px;
}

.doc-vault-loading svg[b-thv5hbfzm9] {
    width: 18px;
    height: 18px;
    color: var(--dv-brand);
    animation: dv-spin-b-thv5hbfzm9 0.9s linear infinite;
}

/* ─── Document groups + cards ─────────────────────────────── */

.doc-vault-group[b-thv5hbfzm9] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.doc-vault-group-head[b-thv5hbfzm9] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.15rem 0.1rem;
}

.doc-vault-group-icon[b-thv5hbfzm9] {
    font-size: 16px;
    line-height: 1;
}

.doc-vault-group-label[b-thv5hbfzm9] {
    flex: 1;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--dv-brand);
}

.doc-vault-group-count[b-thv5hbfzm9] {
    font-size: 11.5px;
    color: var(--dv-text-3);
    background: var(--dv-bg-soft);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--dv-border);
}

/* ─── File list — file-server / Finder-style rows ─────────
   Full-width clickable rows instead of narrow cards: filename
   never truncates to "MIS-Ins..." in normal viewports; type
   chip + size + date + uploader read in one horizontal line;
   click anywhere opens the inline preview. */

.doc-vault-list[b-thv5hbfzm9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.doc-vault-row[b-thv5hbfzm9] {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--dv-bg);
    border: 1px solid var(--dv-border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 140ms ease, transform 100ms ease, box-shadow 140ms ease;
}

.doc-vault-row:hover[b-thv5hbfzm9] {
    border-color: var(--dv-brand);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.04),
                0 6px 16px -10px rgba(var(--shadow-rgb),  0.18);
}

.doc-vault-row[data-available="false"][b-thv5hbfzm9] {
    background: var(--dv-bg-soft);
}

/* The clickable area takes the full row width minus the actions
   column on the right — click anywhere on filename / meta to
   open the preview. */
.doc-vault-row-open[b-thv5hbfzm9] {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.9rem;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
    transition: background 120ms ease;
}

.doc-vault-row-open:hover:not(:disabled)[b-thv5hbfzm9] {
    background: var(--dv-brand-tint);
}

.doc-vault-row-open:focus-visible[b-thv5hbfzm9] {
    outline: 2px solid var(--dv-brand);
    outline-offset: -2px;
}

.doc-vault-row-open:disabled[b-thv5hbfzm9] {
    cursor: not-allowed;
    opacity: 0.65;
}

/* File-type icon block — tinted square with the extension chip.
   data-tone on the parent row drives the colour accent so PDFs
   are red, images teal, sheets green-yellow, etc. Always sits
   on a soft warm bg so the chip pops. */
.doc-vault-row-icon[b-thv5hbfzm9] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb),  0.08), rgba(var(--accent-rgb),  0.16));
    border: 1px solid var(--dv-brand-tint-2);
    flex-shrink: 0;
}

.doc-vault-row-ext[b-thv5hbfzm9] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--dv-brand);
    letter-spacing: 0.06em;
}

/* Per-type tints so the file row reads at a glance. Forest-green
   stays the brand default; PDF/Doc/Sheet/Slides/Image/Video/Audio
   get their own classic colours — kept subtle so they don't fight
   the rest of the page. */
.doc-vault-row[data-tone="pdf"]     .doc-vault-row-icon[b-thv5hbfzm9] { background: linear-gradient(135deg, var(--danger-subtle), var(--danger-border)); border-color: var(--danger-border); }
.doc-vault-row[data-tone="pdf"]     .doc-vault-row-ext[b-thv5hbfzm9]  { color: var(--danger-strong); }
.doc-vault-row[data-tone="image"]   .doc-vault-row-icon[b-thv5hbfzm9] { background: linear-gradient(135deg, var(--accent-subtle), var(--accent-border)); border-color: var(--accent-border); }
.doc-vault-row[data-tone="image"]   .doc-vault-row-ext[b-thv5hbfzm9]  { color: var(--accent-hover); }
.doc-vault-row[data-tone="doc"]     .doc-vault-row-icon[b-thv5hbfzm9] { background: linear-gradient(135deg, var(--info-subtle), var(--info-bright)); border-color: var(--info-bright); }
.doc-vault-row[data-tone="doc"]     .doc-vault-row-ext[b-thv5hbfzm9]  { color: var(--info); }
.doc-vault-row[data-tone="sheet"]   .doc-vault-row-icon[b-thv5hbfzm9] { background: linear-gradient(135deg, var(--accent-subtle), var(--accent-border)); border-color: var(--accent-border); }
.doc-vault-row[data-tone="sheet"]   .doc-vault-row-ext[b-thv5hbfzm9]  { color: var(--accent); }
.doc-vault-row[data-tone="slides"]  .doc-vault-row-icon[b-thv5hbfzm9] { background: linear-gradient(135deg, var(--warning-border), var(--warning-bright)); border-color: var(--warning-bright); }
.doc-vault-row[data-tone="slides"]  .doc-vault-row-ext[b-thv5hbfzm9]  { color: var(--warning-deep); }
.doc-vault-row[data-tone="video"]   .doc-vault-row-icon[b-thv5hbfzm9] { background: linear-gradient(135deg, var(--accent-subtle), var(--tone-purple)); border-color: var(--tone-purple); }
.doc-vault-row[data-tone="video"]   .doc-vault-row-ext[b-thv5hbfzm9]  { color: var(--tone-purple); }
.doc-vault-row[data-tone="audio"]   .doc-vault-row-icon[b-thv5hbfzm9] { background: linear-gradient(135deg, var(--accent-subtle), var(--tone-purple)); border-color: var(--tone-purple); }
.doc-vault-row[data-tone="audio"]   .doc-vault-row-ext[b-thv5hbfzm9]  { color: var(--tone-purple); }
.doc-vault-row[data-tone="archive"] .doc-vault-row-icon[b-thv5hbfzm9] { background: linear-gradient(135deg, var(--warning-subtle), var(--warning-bright)); border-color: var(--warning-bright); }
.doc-vault-row[data-tone="archive"] .doc-vault-row-ext[b-thv5hbfzm9]  { color: var(--warning-deep); }

.doc-vault-row-body[b-thv5hbfzm9] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.doc-vault-row-name[b-thv5hbfzm9] {
    font-size: 14px;
    font-weight: 600;
    color: var(--dv-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-vault-row-meta[b-thv5hbfzm9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.4rem;
    font-size: 12px;
    color: var(--dv-text-3);
    line-height: 1.4;
}

.doc-vault-row-sep[b-thv5hbfzm9] { opacity: 0.55; }

.doc-vault-row-status[b-thv5hbfzm9] {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    align-self: center;
    white-space: nowrap;
}

.doc-vault-row-status[data-tone="warn"][b-thv5hbfzm9] {
    background: rgba(var(--gold-rgb),  0.12);
    color: var(--warning-deep);
}

.doc-vault-row-status[data-tone="neutral"][b-thv5hbfzm9] {
    background: var(--dv-bg-soft);
    color: var(--dv-text-3);
    border: 1px solid var(--dv-border);
}

/* Actions sit in their own column on the right — always visible
   so the agent never has to hunt for them. Soft brand-tinted on
   hover. */
.doc-vault-row-actions[b-thv5hbfzm9] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0 0.7rem;
    border-left: 1px solid var(--dv-border);
    background: var(--dv-bg-soft);
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .doc-vault-row[b-thv5hbfzm9] { flex-direction: column; }
    .doc-vault-row-actions[b-thv5hbfzm9] {
        border-left: 0;
        border-top: 1px solid var(--dv-border);
        padding: 0.5rem 0.7rem;
        justify-content: flex-end;
        background: transparent;
    }
    .doc-vault-row-open[b-thv5hbfzm9] { grid-template-columns: 48px 1fr; }
    .doc-vault-row-status[b-thv5hbfzm9] { margin-left: 0; }
    .doc-vault-uploader[b-thv5hbfzm9] { grid-template-columns: 1fr; }
}

/* ─── Inline preview overlay ──────────────────────────────
   Lightbox-style modal that fills most of the viewport. Header
   bar with file name + type + tools (Download / New tab / Close);
   body switches by file class. Mirrors the listing vault's
   preview pattern so the two surfaces feel like one product. */

.doc-preview-backdrop[b-thv5hbfzm9] {
    position: fixed;
    inset: 0;
    /* Heavier dim so the page behind doesn't read through the
       modal edges + corner radius. Was 0.62 → bumped to 0.82 +
       a stronger blur so the focus is entirely on the preview. */
    background: rgba(var(--shadow-rgb),  0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    padding: 1.5rem;
    /* Portal chrome (toasts, confirm modals, notice modals) lives
       at 9998–10001, so the preview overlay must sit above them
       to actually show on top of the page. */
    z-index: 10050;
    animation: dv-fade-in-b-thv5hbfzm9 160ms ease-out;
}

.doc-preview[b-thv5hbfzm9] {
    position: relative;
    z-index: 10051;
    background: var(--dv-bg);
    border: 1px solid var(--dv-border);
    border-radius: 14px;
    box-shadow:
        0 1px 2px rgba(var(--shadow-rgb),  0.20),
        0 32px 80px -20px rgba(var(--shadow-rgb),  0.65);
    width: 100%;
    max-width: min(1100px, calc(100vw - 3rem));
    height: min(900px, calc(100vh - 3rem));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: dv-pop-in-b-thv5hbfzm9 220ms cubic-bezier(0.18, 1.2, 0.4, 1);
}

@keyframes dv-fade-in-b-thv5hbfzm9 { from { opacity: 0; } to { opacity: 1; } }
@keyframes dv-pop-in-b-thv5hbfzm9  {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.doc-preview-bar[b-thv5hbfzm9] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    /* Solid surface — no transparent gradient. The original
       180deg linear-gradient(brand-tint → transparent) let the
       dark <body> background show through behind the toolbar
       buttons on the right edge, which made Download / New tab
       / X look like they had a "backdrop" over them. */
    background: var(--dv-bg);
    border-bottom: 1px solid var(--dv-border);
    box-shadow: 0 1px 0 rgba(var(--shadow-rgb),  0.04);
}

.doc-preview-name-wrap[b-thv5hbfzm9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

.doc-preview-ext[b-thv5hbfzm9] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    min-width: 44px;
    height: 36px;
    padding: 0 0.5rem;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb),  0.10), rgba(var(--accent-rgb),  0.18));
    border: 1px solid var(--dv-brand-tint-2);
    font-size: 11px;
    font-weight: 800;
    color: var(--dv-brand);
    letter-spacing: 0.06em;
}

.doc-preview-titles[b-thv5hbfzm9] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.doc-preview-name[b-thv5hbfzm9] {
    font-size: 15px;
    font-weight: 700;
    color: var(--dv-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-preview-sub[b-thv5hbfzm9] {
    font-size: 12px;
    color: var(--dv-text-3);
}

.doc-preview-tools[b-thv5hbfzm9] {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.doc-preview-tool[b-thv5hbfzm9] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.7rem;
    background: var(--dv-bg);
    color: var(--dv-text-2);
    border: 1px solid var(--dv-border);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.doc-preview-tool svg[b-thv5hbfzm9] { width: 14px; height: 14px; flex-shrink: 0; }

.doc-preview-tool:hover[b-thv5hbfzm9] {
    color: var(--dv-brand);
    border-color: var(--dv-brand);
    background: var(--dv-brand-tint);
}

.doc-preview-tool.is-primary[b-thv5hbfzm9] {
    background: var(--dv-brand);
    color: var(--white);
    border-color: var(--dv-brand);
}

.doc-preview-tool.is-primary:hover[b-thv5hbfzm9] {
    background: var(--dv-brand-deep);
    border-color: var(--dv-brand-deep);
}

.doc-preview-tool.is-close[b-thv5hbfzm9] {
    padding: 0.45rem 0.55rem;
}

.doc-preview-body[b-thv5hbfzm9] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    background: var(--text);
}

.doc-preview-frame[b-thv5hbfzm9] {
    flex: 1;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--white);
}

.doc-preview-imgwrap[b-thv5hbfzm9] {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    overflow: auto;
}

.doc-preview-img[b-thv5hbfzm9] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(var(--shadow-rgb),  0.4);
}

.doc-preview-mediawrap[b-thv5hbfzm9] {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.doc-preview-video[b-thv5hbfzm9] {
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(var(--shadow-rgb),  0.4);
}

.doc-preview-mediawrap-audio audio[b-thv5hbfzm9] { width: min(420px, 100%); }

.doc-preview-fallback[b-thv5hbfzm9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--white);
}

.doc-preview-fallback strong[b-thv5hbfzm9] {
    font-size: 16px;
    font-weight: 700;
    margin-top: 0.3rem;
}

.doc-preview-fallback p[b-thv5hbfzm9] {
    margin: 0;
    max-width: 48ch;
    font-size: 13.5px;
    color: rgba(var(--glass-rgb),  0.78);
    line-height: 1.5;
}

.doc-preview-fallback-icon[b-thv5hbfzm9] {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--glass-rgb),  0.10), rgba(var(--glass-rgb),  0.04));
    border: 1px solid rgba(var(--glass-rgb),  0.18);
    font-size: 14px;
    font-weight: 800;
    color: var(--white);
    letter-spacing: 0.06em;
}

.doc-preview-fallback-actions[b-thv5hbfzm9] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

@media (max-width: 720px) {
    .doc-preview[b-thv5hbfzm9] { height: 100vh; max-height: 100vh; border-radius: 0; }
    .doc-preview-backdrop[b-thv5hbfzm9] { padding: 0; }
    .doc-preview-tool span[b-thv5hbfzm9] { display: none; }
    .doc-preview-tool[b-thv5hbfzm9] { padding: 0.5rem 0.6rem; }
}

.doc-vault-action[b-thv5hbfzm9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.55rem;
    background: var(--dv-bg);
    color: var(--dv-text-2);
    border: 1px solid var(--dv-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.doc-vault-action svg[b-thv5hbfzm9] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.doc-vault-action:hover:not(:disabled)[b-thv5hbfzm9] {
    color: var(--dv-brand);
    border-color: var(--dv-brand);
    background: var(--dv-brand-tint);
}

.doc-vault-action.is-danger:hover:not(:disabled)[b-thv5hbfzm9] {
    color: var(--dv-danger);
    border-color: var(--dv-danger);
    background: rgba(var(--danger-rgb),  0.06);
}

.doc-vault-action.is-primary[b-thv5hbfzm9] {
    color: var(--white);
    background: linear-gradient(135deg, var(--dv-brand) 0%, var(--dv-brand-deep) 100%);
    border-color: var(--dv-brand-deep);
}

.doc-vault-action.is-primary:hover:not(:disabled)[b-thv5hbfzm9] {
    color: var(--white);
    background: linear-gradient(135deg, var(--dv-brand-deep) 0%, var(--dv-brand) 100%);
    border-color: var(--dv-brand-deep);
}

.doc-vault-action:disabled[b-thv5hbfzm9] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ─── Inline rename (pencil) ─────────────────────────────────
   Click the pencil icon and the filename swaps for a text input
   pre-filled with the current display name. Enter saves, Esc
   cancels. Save/Cancel buttons replace the View/Edit/Delete
   trio while the row is in rename mode. */

.doc-vault-row.is-renaming[b-thv5hbfzm9] {
    background: var(--dv-brand-tint);
    border-color: var(--dv-brand-soft);
}

.doc-vault-row.is-renaming .doc-vault-row-open[b-thv5hbfzm9] {
    cursor: default;
}

.doc-vault-row-rename[b-thv5hbfzm9] {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.doc-vault-row-rename-input[b-thv5hbfzm9] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--dv-brand-soft);
    border-radius: 8px;
    background: var(--dv-bg);
    color: var(--dv-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.3;
    transition: border-color 120ms ease, box-shadow 140ms ease;
}

.doc-vault-row-rename-input:focus[b-thv5hbfzm9] {
    outline: 0;
    border-color: var(--dv-brand);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb),  0.16);
}

/* Subdued "orig: scan_001.pdf" hint, shown only when the user
   has renamed away from the original filename. Keeps the audit
   trail visible without dominating the row meta. */
.doc-vault-row-orig[b-thv5hbfzm9] {
    color: var(--dv-text-3);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 24ch;
}
/* /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;
    /* Was var(--bg-2, var(--white)) — --bg-2 is a phantom token (never
       defined in _tokens.css), so it silently fell back to var(--white)
       in BOTH themes. In dark mode that painted a white card under the
       near-white title/desc → white-on-white, invisible. --surface is
       #fff in light (look preserved) and a dark card in dark. */
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 0.75rem;
    color: var(--text-secondary, var(--text-secondary));
}

.empty-state-icon[b-ysulrxrgz7] {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--info-rgb),  0.08), rgba(var(--accent-rgb),  0.08));
    color: var(--accent, var(--tone-indigo));
    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(var(--info-rgb),  0.18), rgba(var(--accent-rgb),  0.14));
}

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

.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/ListingActivityLog.razor.rz.scp.css */
/* Listing audit trail — a chronological timeline of document uploads
   and leads for one listing. Self-contained palette (the listings
   forest green) so it doesn't depend on the host page's properties. */

.act-shell[b-stt14urz7d] {
    --act-brand:      var(--accent);
    --act-surface:    var(--white);
    --act-surface-2:  var(--surface-2);
    --act-border:     rgba(var(--accent-bright-rgb),  0.14);
    --act-text:       var(--text);
    --act-text-muted: var(--text-secondary);
    --act-text-soft:  var(--text-tertiary);
    --act-upload:     var(--info-bright);
    --act-lead:       var(--accent);

    display: block;
    border: 1px solid var(--act-border);
    border-radius: 14px;
    background: var(--act-surface);
    padding: 1rem 1.1rem 1.2rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Flat mode — used when the component sits inside a card that already
   provides the chrome (the editor's Activity tab panel). */
.act-shell.is-flat[b-stt14urz7d] {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

[data-theme="dark"] .act-shell[b-stt14urz7d] {
    --act-surface:    var(--surface);
    --act-surface-2:  var(--surface-2);
    --act-border:     rgba(var(--accent-rgb),  0.18);
    --act-text:       var(--text);
    --act-text-muted: var(--text-secondary);
    --act-text-soft:  var(--text-tertiary);
    --act-upload:     var(--info);
    --act-lead:       var(--accent);
}

.act-head[b-stt14urz7d] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.act-eyebrow[b-stt14urz7d] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--act-brand);
}

.act-title[b-stt14urz7d] {
    margin: 0.12rem 0 0;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--act-text);
}

.act-status[b-stt14urz7d] {
    flex-shrink: 0;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--act-surface-2);
    border: 1px solid var(--act-border);
    font-size: 11px;
    font-weight: 700;
    color: var(--act-text-muted);
}

.act-status[data-status="active"][b-stt14urz7d],
.act-status[data-status="underoffer"][b-stt14urz7d] {
    background: color-mix(in srgb, var(--act-brand) 12%, var(--act-surface));
    color: var(--act-brand);
}

/* ─── Timeline ────────────────────────────────────────────── */

.act-timeline[b-stt14urz7d] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.act-item[b-stt14urz7d] {
    --act-kind: var(--act-text-soft);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding-bottom: 0.7rem;
}

.act-item:last-child[b-stt14urz7d] { padding-bottom: 0; }

.act-item[data-kind="upload"][b-stt14urz7d]  { --act-kind: var(--act-upload); }
.act-item[data-kind="lead"][b-stt14urz7d]    { --act-kind: var(--act-lead); }
.act-item[data-kind="listing"][b-stt14urz7d] { --act-kind: var(--act-brand); }

/* Connector — links the bottom of one icon badge to the next.
   Dropped on the final row so the line stops at the last event. */
.act-item:not(:last-child)[b-stt14urz7d]::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 38px;
    bottom: -1px;
    width: 2px;
    border-radius: 2px;
    background: var(--act-border);
}

.act-icon[b-stt14urz7d] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--act-kind) 14%, var(--act-surface));
    color: var(--act-kind);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--act-kind) 25%, transparent) inset;
}

.act-icon svg[b-stt14urz7d] { width: 17px; height: 17px; }

.act-body[b-stt14urz7d] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--act-border);
    border-radius: 11px;
    background: var(--act-surface);
    transition: border-color 130ms ease, box-shadow 130ms ease, transform 130ms ease;
}

.act-item:hover .act-body[b-stt14urz7d] {
    border-color: color-mix(in srgb, var(--act-kind) 38%, var(--act-border));
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.05), 0 12px 24px -18px rgba(var(--shadow-rgb),  0.45);
    transform: translateX(2px);
}

.act-item-title[b-stt14urz7d] {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--act-text);
}

.act-item-detail[b-stt14urz7d] {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--act-text-muted);
    overflow-wrap: anywhere;
    padding: 0.34rem 0.5rem;
    border-radius: 7px;
    background: var(--act-surface-2);
}

.act-item-meta[b-stt14urz7d] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--act-text-soft);
    font-variant-numeric: tabular-nums;
}

.act-item-meta svg[b-stt14urz7d] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.act-count[b-stt14urz7d] {
    margin: 0.9rem 0 0;
    padding-left: 0.1rem;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--act-text-soft);
}

/* ─── States ──────────────────────────────────────────────── */

.act-state[b-stt14urz7d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.7rem 1rem;
    text-align: center;
    color: var(--act-text-soft);
}

.act-state svg[b-stt14urz7d] { width: 28px; height: 28px; }
.act-state p[b-stt14urz7d] { margin: 0; font-size: 12.5px; }

.act-spin[b-stt14urz7d] { animation: act-spin-b-stt14urz7d 0.7s linear infinite; }

@keyframes act-spin-b-stt14urz7d { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .act-spin[b-stt14urz7d] { animation: none; }
}
/* /Components/Shared/ListingKeyDates.razor.rz.scp.css */
/* Listing key dates — renewals, compliance certificates, inspections.
   Self-contained palette (the listings forest green + a per-state
   accent set) so it never depends on the host page's custom
   properties. Light + dark via [data-theme="dark"]. */

.kd-shell[b-wkdo19maml] {
    --kd-brand:      var(--accent);
    --kd-surface:    var(--white);
    --kd-surface-2:  var(--surface-2);
    --kd-border:     rgba(var(--accent-bright-rgb),  0.14);
    --kd-border-2:   rgba(var(--accent-bright-rgb),  0.26);
    --kd-text:       var(--text);
    --kd-text-muted: var(--text-secondary);
    --kd-text-soft:  var(--text-tertiary);

    --kd-overdue: var(--danger-bright);
    --kd-soon:    var(--warning);
    --kd-ok:      var(--accent);
    --kd-done:    var(--text-tertiary);

    display: block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--kd-text);
}

[data-theme="dark"] .kd-shell[b-wkdo19maml] {
    --kd-brand:      var(--accent-bright);
    --kd-surface:    var(--surface);
    --kd-surface-2:  var(--surface-2);
    --kd-border:     rgba(var(--accent-rgb),  0.18);
    --kd-border-2:   rgba(var(--accent-rgb),  0.32);
    --kd-text:       var(--text);
    --kd-text-muted: var(--text-secondary);
    --kd-text-soft:  var(--text-tertiary);

    --kd-overdue: var(--danger);
    --kd-soon:    var(--warning-bright);
    --kd-ok:      var(--accent);
    --kd-done:    var(--text-tertiary);
}

/* ─── Add box ─────────────────────────────────────────────── */

.kd-add[b-wkdo19maml] {
    padding: 0.95rem 1rem 1.05rem;
    border: 1px solid var(--kd-border);
    border-radius: 13px;
    background: var(--kd-surface-2);
    margin-bottom: 1.1rem;
}

.kd-add-head[b-wkdo19maml] { display: flex; flex-direction: column; gap: 1px; margin-bottom: 0.65rem; }

.kd-add-label[b-wkdo19maml] {
    font-size: 13px;
    font-weight: 700;
    color: var(--kd-text);
}

.kd-add-hint[b-wkdo19maml] { font-size: 11.5px; color: var(--kd-text-soft); }

.kd-presets[b-wkdo19maml] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.7rem;
}

.kd-preset[b-wkdo19maml] {
    padding: 0.28rem 0.6rem;
    border: 1px solid var(--kd-border);
    border-radius: 999px;
    background: var(--kd-surface);
    color: var(--kd-text-muted);
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 110ms ease, color 110ms ease, background 110ms ease;
}

.kd-preset:hover[b-wkdo19maml] { border-color: var(--kd-brand); color: var(--kd-brand); }

.kd-preset.is-on[b-wkdo19maml] {
    background: var(--kd-brand);
    border-color: var(--kd-brand);
    color: var(--white);
}

.kd-add-row[b-wkdo19maml] { display: flex; gap: 0.5rem; }

.kd-input[b-wkdo19maml],
.kd-date[b-wkdo19maml] {
    height: 40px;
    border: 1px solid var(--kd-border);
    border-radius: 9px;
    background: var(--kd-surface);
    color: var(--kd-text);
    font: inherit;
    font-size: 13px;
    padding: 0 0.7rem;
}

.kd-input[b-wkdo19maml] { flex: 1; min-width: 0; }
.kd-date[b-wkdo19maml] { flex-shrink: 0; color: var(--kd-text-muted); }

.kd-input:focus[b-wkdo19maml],
.kd-date:focus[b-wkdo19maml] {
    outline: none;
    border-color: var(--kd-brand);
    box-shadow: 0 0 0 3px rgba(var(--accent-bright-rgb),  0.1);
}

.kd-input[b-wkdo19maml]::placeholder { color: var(--kd-text-soft); }

.kd-add-btn[b-wkdo19maml] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 40px;
    padding: 0 0.9rem;
    border: 0;
    border-radius: 9px;
    background: var(--kd-brand);
    color: var(--white);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 110ms ease;
}

.kd-add-btn:disabled[b-wkdo19maml] { opacity: 0.5; cursor: default; }
.kd-add-btn svg[b-wkdo19maml] { width: 14px; height: 14px; }

/* ─── Key-date list ───────────────────────────────────────── */

.kd-list[b-wkdo19maml] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.kd-item[b-wkdo19maml] {
    --st: var(--kd-ok);
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--kd-border);
    border-left: 3px solid var(--st);
    border-radius: 9px;
    background: var(--kd-surface);
}

.kd-item[data-state="overdue"][b-wkdo19maml] { --st: var(--kd-overdue); }
.kd-item[data-state="soon"][b-wkdo19maml]    { --st: var(--kd-soon); }
.kd-item[data-state="ok"][b-wkdo19maml]      { --st: var(--kd-ok); }
.kd-item[data-state="done"][b-wkdo19maml]    { --st: var(--kd-done); }

.kd-dot[b-wkdo19maml] {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--st);
}

.kd-body[b-wkdo19maml] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.kd-title[b-wkdo19maml] {
    font-size: 13px;
    font-weight: 700;
    color: var(--kd-text);
    overflow-wrap: anywhere;
}

.kd-item[data-state="done"] .kd-title[b-wkdo19maml] {
    color: var(--kd-text-soft);
    text-decoration: line-through;
}

.kd-when[b-wkdo19maml] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--st);
}

.kd-item[data-state="ok"] .kd-when[b-wkdo19maml] { color: var(--kd-text-soft); }
.kd-item[data-state="done"] .kd-when[b-wkdo19maml] { color: var(--kd-text-soft); }

.kd-actions[b-wkdo19maml] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.kd-done[b-wkdo19maml] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 28px;
    padding: 0 0.55rem;
    border: 1px solid var(--kd-border-2);
    border-radius: 7px;
    background: var(--kd-surface);
    color: var(--kd-brand);
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}

.kd-done:hover[b-wkdo19maml] { border-color: var(--kd-brand); }
.kd-done svg[b-wkdo19maml] { width: 12px; height: 12px; }

.kd-remove[b-wkdo19maml] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--kd-border);
    border-radius: 7px;
    background: var(--kd-surface);
    color: var(--kd-text-soft);
    cursor: pointer;
}

.kd-remove:hover[b-wkdo19maml] { color: var(--kd-overdue); border-color: var(--kd-overdue); }
.kd-remove svg[b-wkdo19maml] { width: 13px; height: 13px; }

/* ─── States ──────────────────────────────────────────────── */

.kd-state[b-wkdo19maml] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.8rem 1rem;
    text-align: center;
    color: var(--kd-text-soft);
}

.kd-state svg[b-wkdo19maml] { width: 30px; height: 30px; }

.kd-state p[b-wkdo19maml] {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    max-width: 44ch;
}

.kd-state-error[b-wkdo19maml] { color: var(--kd-overdue); }

.kd-spin[b-wkdo19maml] { animation: kd-spin-b-wkdo19maml 0.7s linear infinite; }

@keyframes kd-spin-b-wkdo19maml { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .kd-spin[b-wkdo19maml] { animation: none; }
}

@media (max-width: 620px) {
    .kd-add-row[b-wkdo19maml] { flex-wrap: wrap; }
    .kd-input[b-wkdo19maml] { flex-basis: 100%; }
}
/* /Components/Shared/ListingPhotos.razor.rz.scp.css */
/* ListingPhotos — photo grid + uploader. Matches the listings
   wizard/edit visual language (teal accent on a warm-white surface),
   light + dark via [data-theme="dark"] overrides. */

.lp-section[b-mcna4ir1dn] {
    --p-brand:          var(--accent);
    --p-brand-bright:   var(--accent-bright);
    --p-brand-soft:     rgba(var(--accent-bright-rgb),  0.08);
    --p-brand-glow:     rgba(var(--accent-bright-rgb),  0.14);
    --p-bg:             var(--surface-2);
    --p-surface:        var(--white);
    --p-surface-2:      var(--surface-2);
    --p-border:         rgba(var(--accent-bright-rgb),  0.10);
    --p-border-strong:  rgba(var(--accent-bright-rgb),  0.20);
    --p-text:           var(--text);
    --p-text-muted:     var(--text-secondary);
    --p-text-soft:      var(--text-tertiary);
    --p-danger:         var(--danger);
    --p-warn:           var(--warning-text);

    --p-scale: var(--portal-content-scale, 1);

    background: var(--p-surface);
    border: 1px solid var(--p-border);
    border-radius: 16px;
    padding: 1.25rem 1.5rem 1.5rem;
    margin-bottom: 1rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--p-text);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.04),
                0 8px 22px -16px rgba(var(--shadow-rgb),  0.18);
}

[data-theme="dark"] .lp-section[b-mcna4ir1dn] {
    --p-bg:             var(--bg);
    --p-surface:        var(--surface);
    --p-surface-2:      var(--surface);
    --p-border:         rgba(var(--accent-rgb),  0.14);
    --p-border-strong:  rgba(var(--accent-rgb),  0.26);
    --p-text:           var(--text);
    --p-text-muted:     var(--text-secondary);
    --p-text-soft:      var(--text-tertiary);
    --p-brand:          var(--accent-bright);
    --p-brand-bright:   var(--accent);
    --p-brand-soft:     rgba(var(--accent-rgb),  0.08);
    --p-brand-glow:     rgba(var(--accent-rgb),  0.18);
}

/* ─── Header ─────────────────────────────────────────── */
.lp-head[b-mcna4ir1dn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.lp-eyebrow[b-mcna4ir1dn] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--p-brand);
}

.lp-title[b-mcna4ir1dn] {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: calc(18px * var(--p-scale));
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0.2rem 0 0.2rem;
    color: var(--p-text);
}

.lp-hint[b-mcna4ir1dn] {
    margin: 0;
    color: var(--p-text-muted);
    font-size: calc(13px * var(--p-scale));
    line-height: 1.5;
    max-width: 56ch;
}

.lp-count[b-mcna4ir1dn] {
    flex-shrink: 0;
    padding: 0.3rem 0.7rem;
    background: var(--p-brand-soft);
    color: var(--p-brand);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ─── Flash + error ──────────────────────────────────── */
.lp-flash[b-mcna4ir1dn] {
    margin: 0 0 0.875rem;
    padding: 0.55rem 0.85rem;
    background: var(--p-brand-soft);
    color: var(--p-brand);
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
}

.lp-error[b-mcna4ir1dn] {
    margin: 0 0 0.875rem;
    padding: 0.55rem 0.85rem;
    background: rgba(var(--danger-rgb),  0.06);
    border: 1px solid rgba(var(--danger-rgb),  0.18);
    color: var(--p-danger);
    border-radius: 10px;
    font-size: 12.5px;
}

/* ─── Drop zone ──────────────────────────────────────── */
.lp-dropzone[b-mcna4ir1dn] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--p-brand-bright) 6%, var(--p-surface)),
        var(--p-surface) 70%);
    border: 2px dashed color-mix(in srgb, var(--p-brand-bright) 40%, transparent);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
    margin-bottom: 1rem;
}

.lp-dropzone:hover:not(.is-busy)[b-mcna4ir1dn] {
    border-color: var(--p-brand-bright);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--p-brand-bright) 12%, var(--p-surface)),
        var(--p-surface) 70%);
    transform: translateY(-1px);
}

.lp-dropzone.is-busy[b-mcna4ir1dn] {
    cursor: progress;
    opacity: 0.85;
}

.lp-dropzone input[type="file"][b-mcna4ir1dn] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: inherit;
}

.lp-dropzone-icon[b-mcna4ir1dn] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--p-brand-bright), var(--p-brand));
    color: var(--white);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.18);
}
.lp-dropzone-icon svg[b-mcna4ir1dn] { width: 22px; height: 22px; }

.lp-dropzone-text[b-mcna4ir1dn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--p-text);
}
.lp-dropzone-text strong[b-mcna4ir1dn] { font-size: 14px; font-weight: 700; }
.lp-dropzone-text span[b-mcna4ir1dn] { font-size: 12.5px; color: var(--p-text-muted); }

/* ─── Empty state ────────────────────────────────────── */
.lp-empty[b-mcna4ir1dn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem;
    background: var(--p-bg);
    border: 1px solid var(--p-border);
    border-radius: 12px;
    color: var(--p-text-muted);
    font-size: 13px;
}

.lp-empty-icon[b-mcna4ir1dn] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: var(--p-brand-soft);
    color: var(--p-brand);
    border-radius: 8px;
}
.lp-empty-icon svg[b-mcna4ir1dn] { width: 18px; height: 18px; }

/* ─── Photo grid ─────────────────────────────────────── */
.lp-grid[b-mcna4ir1dn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.625rem;
}

.lp-tile[b-mcna4ir1dn] {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--p-surface-2), var(--p-bg));
    border: 1px solid var(--p-border);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.06);
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.lp-tile:hover[b-mcna4ir1dn] {
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.06),
                0 8px 24px -10px rgba(var(--shadow-rgb),  0.20);
}

.lp-tile.is-pending[b-mcna4ir1dn] { border-color: color-mix(in srgb, var(--p-warn) 40%, var(--p-border)); }
.lp-tile.is-failed[b-mcna4ir1dn] { border-color: rgba(var(--danger-rgb),  0.5); }

/* Hidden-from-buyers: dimmed + desaturated + a dashed border so the
   photo reads as off-market at a glance, before any hover. */
.lp-tile.is-hidden[b-mcna4ir1dn] {
    border-style: dashed;
    border-color: var(--p-border-strong);
}

.lp-tile.is-hidden .lp-tile-img[b-mcna4ir1dn],
.lp-tile.is-hidden .lp-tile-placeholder[b-mcna4ir1dn] {
    opacity: 0.4;
    filter: grayscale(0.85);
}

.lp-tile-img[b-mcna4ir1dn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lp-tile-placeholder[b-mcna4ir1dn] {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--p-text-soft);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--p-brand-bright) 8%, var(--p-surface-2)),
        var(--p-surface-2));
}
.lp-tile-placeholder svg[b-mcna4ir1dn] { width: 36px; height: 36px; opacity: 0.55; }

.lp-tile-badge[b-mcna4ir1dn] {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.18);
    z-index: 1;
}

.lp-tile-cover[b-mcna4ir1dn] {
    background: linear-gradient(135deg, var(--p-brand-bright), var(--p-brand));
    color: var(--white);
}

.lp-tile-pending[b-mcna4ir1dn] {
    background: rgba(var(--gold-rgb),  0.95);
    color: var(--text);
}

.lp-tile-failed[b-mcna4ir1dn] {
    background: rgba(var(--danger-rgb),  0.92);
    color: var(--white);
}

.lp-tile-hidden[b-mcna4ir1dn] {
    background: rgba(var(--shadow-rgb),  0.85);
    color: var(--white);
}

/* Image-as-button — click anywhere on the photo body to open the
   lightbox. Reset the default button chrome so it looks like a
   plain image still. */
.lp-tile-imgbtn[b-mcna4ir1dn] {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: zoom-in;
}

/* Action bar — appears on hover. Stars / arrows / × stacked across
   the top-right of every tile. Hidden by default for a clean grid. */
.lp-tile-actions[b-mcna4ir1dn] {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.2rem;
    background: rgba(var(--shadow-rgb),  0.72);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 140ms ease, transform 140ms ease;
    z-index: 1;
}

.lp-tile:hover .lp-tile-actions[b-mcna4ir1dn],
.lp-tile:focus-within .lp-tile-actions[b-mcna4ir1dn] { opacity: 1; }

.lp-tile-action[b-mcna4ir1dn] {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--white);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, transform 120ms ease;
}

.lp-tile-action:hover:not(:disabled)[b-mcna4ir1dn] {
    background: rgba(var(--glass-rgb),  0.18);
    transform: scale(1.05);
}

.lp-tile-action:disabled[b-mcna4ir1dn] { opacity: 0.35; cursor: not-allowed; }
.lp-tile-action svg[b-mcna4ir1dn] { width: 13px; height: 13px; }

.lp-tile-action-danger:hover:not(:disabled)[b-mcna4ir1dn] {
    background: var(--p-danger);
    color: var(--white);
}

/* Cover photo gets a richer outline so the cover-card identity is
   obvious at any zoom level — even before the agent hovers. */
.lp-tile.is-cover[b-mcna4ir1dn] {
    border-color: color-mix(in srgb, var(--p-brand-bright) 60%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--p-brand-bright) 25%, transparent),
                0 1px 2px rgba(var(--shadow-rgb),  0.06),
                0 8px 22px -10px var(--p-brand-glow);
}

/* ─── Lightbox modal ──────────────────────────────────
   Full-screen photo viewer. Backdrop closes on click; the close
   button + arrows + img sit on top and use stopPropagation so
   clicking them doesn't trigger the backdrop close. */

.lp-lightbox[b-mcna4ir1dn] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(var(--shadow-rgb),  0.92);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    outline: none;
    animation: lp-fade-b-mcna4ir1dn 160ms ease;
}

@keyframes lp-fade-b-mcna4ir1dn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lp-lightbox-imgwrap[b-mcna4ir1dn] {
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.lp-lightbox-img[b-mcna4ir1dn] {
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
    box-shadow: 0 24px 60px -12px rgba(var(--shadow-rgb),  0.6);
    border-radius: 4px;
}

.lp-lightbox-close[b-mcna4ir1dn] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: none;
    background: rgba(var(--glass-rgb),  0.12);
    color: var(--white);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 140ms ease, transform 120ms ease;
}

.lp-lightbox-close:hover[b-mcna4ir1dn] { background: rgba(var(--glass-rgb),  0.22); transform: scale(1.05); }
.lp-lightbox-close svg[b-mcna4ir1dn] { width: 22px; height: 22px; }

.lp-lightbox-nav[b-mcna4ir1dn] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: none;
    background: rgba(var(--glass-rgb),  0.10);
    color: var(--white);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 140ms ease, transform 120ms ease;
}

.lp-lightbox-nav:hover[b-mcna4ir1dn] {
    background: rgba(var(--glass-rgb),  0.22);
    transform: translateY(-50%) scale(1.05);
}

.lp-lightbox-prev[b-mcna4ir1dn] { left: 1.5rem; }
.lp-lightbox-next[b-mcna4ir1dn] { right: 1.5rem; }
.lp-lightbox-nav svg[b-mcna4ir1dn] { width: 26px; height: 26px; }

.lp-lightbox-counter[b-mcna4ir1dn] {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.4rem 0.9rem;
    background: rgba(var(--glass-rgb),  0.10);
    color: var(--white);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    backdrop-filter: blur(6px);
}

@media (max-width: 760px) {
    .lp-lightbox-prev[b-mcna4ir1dn] { left: 0.5rem; width: 44px; height: 44px; }
    .lp-lightbox-next[b-mcna4ir1dn] { right: 0.5rem; width: 44px; height: 44px; }
    .lp-lightbox-nav svg[b-mcna4ir1dn] { width: 20px; height: 20px; }
}

.lp-tile-meta[b-mcna4ir1dn] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.4rem 0.6rem;
    background: linear-gradient(to top, rgba(var(--shadow-rgb),  0.78), transparent);
    color: var(--white);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity 140ms ease;
}
.lp-tile:hover .lp-tile-meta[b-mcna4ir1dn] { opacity: 1; }

@media (max-width: 760px) {
    .lp-head[b-mcna4ir1dn] { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
    .lp-dropzone[b-mcna4ir1dn] { padding: 1rem; }
}
/* /Components/Shared/ListingPointsOfInterest.razor.rz.scp.css */
/* Points of Interest panel — categorised nearby places for a listing.
   Self-contained palette (the listings forest green + a per-category
   accent set) so it never depends on the host page's custom
   properties. Light + dark via [data-theme="dark"]. */

.poi-shell[b-9p8rf998ev] {
    --poi-brand:        var(--accent);
    --poi-surface:      var(--white);
    --poi-surface-2:    var(--surface-2);
    --poi-border:       rgba(var(--accent-bright-rgb),  0.14);
    --poi-text:         var(--text);
    --poi-text-muted:   var(--text-secondary);
    --poi-text-soft:    var(--text-tertiary);

    --poi-education:    var(--info-bright);
    --poi-shopping:     var(--warning);
    --poi-malls:        var(--tone-purple);
    --poi-food:         var(--warning);
    --poi-health:       var(--accent-bright);
    --poi-hospitals:    var(--danger-bright);
    --poi-security:     var(--info-bright);
    --poi-recreation:   var(--accent-bright);
    --poi-other:        var(--text-secondary);

    display: block;
    border: 1px solid var(--poi-border);
    border-radius: 14px;
    background: var(--poi-surface);
    padding: 1rem 1.1rem 1.2rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

[data-theme="dark"] .poi-shell[b-9p8rf998ev] {
    --poi-surface:    var(--surface);
    --poi-surface-2:  var(--surface-2);
    --poi-border:     rgba(var(--accent-rgb),  0.18);
    --poi-text:       var(--text);
    --poi-text-muted: var(--text-secondary);
    --poi-text-soft:  var(--text-tertiary);

    --poi-education:  var(--info);
    --poi-shopping:   var(--warning-bright);
    --poi-malls:      var(--tone-purple);
    --poi-food:       var(--warning-bright);
    --poi-health:     var(--accent);
    --poi-hospitals:  var(--danger);
    --poi-security:   var(--info-bright);
    --poi-recreation: var(--accent-bright);
    --poi-other:      var(--text-tertiary);
}

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

.poi-head[b-9p8rf998ev] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.poi-eyebrow[b-9p8rf998ev] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--poi-brand);
}

.poi-title[b-9p8rf998ev] {
    margin: 0.12rem 0 0;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--poi-text);
}

.poi-refresh[b-9p8rf998ev] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--poi-border);
    border-radius: 8px;
    background: var(--poi-surface);
    color: var(--poi-text-soft);
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
}

.poi-refresh:hover:not(:disabled)[b-9p8rf998ev] {
    color: var(--poi-brand);
    border-color: var(--poi-brand);
}

.poi-refresh:disabled[b-9p8rf998ev] { opacity: 0.5; cursor: default; }
.poi-refresh svg[b-9p8rf998ev] { width: 15px; height: 15px; }

/* ─── Category grid ───────────────────────────────────────── */

.poi-grid[b-9p8rf998ev] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.7rem;
}

.poi-cat[b-9p8rf998ev] {
    border: 1px solid var(--poi-border);
    border-radius: 11px;
    background: var(--poi-surface-2);
    padding: 0.7rem 0.8rem 0.55rem;
}

.poi-cat-head[b-9p8rf998ev] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.poi-cat-icon[b-9p8rf998ev] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--poi-other);
    color: var(--white);
}

.poi-cat-icon svg[b-9p8rf998ev] { width: 16px; height: 16px; }

.poi-cat[data-cat="education"]  .poi-cat-icon[b-9p8rf998ev] { background: var(--poi-education); }
.poi-cat[data-cat="shopping"]   .poi-cat-icon[b-9p8rf998ev] { background: var(--poi-shopping); }
.poi-cat[data-cat="malls"]      .poi-cat-icon[b-9p8rf998ev] { background: var(--poi-malls); }
.poi-cat[data-cat="food"]       .poi-cat-icon[b-9p8rf998ev] { background: var(--poi-food); }
.poi-cat[data-cat="health"]     .poi-cat-icon[b-9p8rf998ev] { background: var(--poi-health); }
.poi-cat[data-cat="hospitals"]  .poi-cat-icon[b-9p8rf998ev] { background: var(--poi-hospitals); }
.poi-cat[data-cat="security"]   .poi-cat-icon[b-9p8rf998ev] { background: var(--poi-security); }
.poi-cat[data-cat="recreation"] .poi-cat-icon[b-9p8rf998ev] { background: var(--poi-recreation); }

.poi-cat-name[b-9p8rf998ev] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--poi-text);
}

.poi-cat-count[b-9p8rf998ev] {
    flex-shrink: 0;
    min-width: 1.3rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--poi-surface);
    color: var(--poi-text-soft);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.poi-list[b-9p8rf998ev] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.poi-place[b-9p8rf998ev] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0.35rem;
    margin: 0 -0.35rem;
    border-top: 1px solid var(--poi-border);
    border-radius: 7px;
    text-decoration: none;
    cursor: pointer;
    transition: background 110ms ease;
}

.poi-list li:first-child .poi-place[b-9p8rf998ev] { border-top: none; }

.poi-place:hover[b-9p8rf998ev] { background: var(--poi-surface); }

.poi-place-name[b-9p8rf998ev] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--poi-text);
    line-height: 1.35;
    /* Up to two lines — long SA place names stay readable instead of
       being clipped mid-word. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.poi-place:hover .poi-place-name[b-9p8rf998ev] { color: var(--poi-brand); }

.poi-place-meta[b-9p8rf998ev] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 11px;
    color: var(--poi-text-soft);
}

.poi-place-rating[b-9p8rf998ev] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-weight: 700;
    color: var(--poi-text-muted);
}

.poi-place-rating svg[b-9p8rf998ev] {
    width: 11px;
    height: 11px;
    color: var(--gold);
}

.poi-place-sep[b-9p8rf998ev] { color: var(--poi-text-soft); }

.poi-place-dist[b-9p8rf998ev] {
    font-weight: 700;
    color: var(--poi-text-muted);
    font-variant-numeric: tabular-nums;
}

.poi-place-vicinity[b-9p8rf998ev] {
    font-size: 11px;
    color: var(--poi-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.poi-place-reviews[b-9p8rf998ev] {
    font-weight: 600;
    color: var(--poi-text-soft);
}

.poi-place-tag[b-9p8rf998ev] {
    padding: 0.03rem 0.34rem;
    border-radius: 4px;
    background: var(--poi-surface);
    border: 1px solid var(--poi-border);
    font-weight: 700;
    color: var(--poi-text-muted);
    white-space: nowrap;
}

/* External-link cue — fades in on hover so the row clearly opens out. */
.poi-place-go[b-9p8rf998ev] {
    width: 11px;
    height: 11px;
    margin-left: auto;
    flex-shrink: 0;
    color: var(--poi-text-soft);
    opacity: 0;
    transition: opacity 110ms ease, color 110ms ease;
}

.poi-place:hover .poi-place-go[b-9p8rf998ev] {
    opacity: 1;
    color: var(--poi-brand);
}

/* ─── Per-category "show more" ────────────────────────────── */

.poi-more[b-9p8rf998ev] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0.1rem;
    border: none;
    background: transparent;
    color: var(--poi-brand);
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}

.poi-more:hover[b-9p8rf998ev] { text-decoration: underline; }

.poi-more-chev[b-9p8rf998ev] {
    width: 12px;
    height: 12px;
    transition: transform 140ms ease;
}

.poi-more-chev.is-up[b-9p8rf998ev] { transform: rotate(180deg); }

/* ─── States — empty / loading / error ───────────────────── */

.poi-state[b-9p8rf998ev] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.7rem 1rem;
    text-align: center;
    color: var(--poi-text-soft);
}

.poi-state svg[b-9p8rf998ev] { width: 30px; height: 30px; }

.poi-state p[b-9p8rf998ev] {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    max-width: 44ch;
}

.poi-spin[b-9p8rf998ev] { animation: poi-spin-b-9p8rf998ev 0.7s linear infinite; }

@keyframes poi-spin-b-9p8rf998ev { to { transform: rotate(360deg); } }

.poi-state-error svg[b-9p8rf998ev],
.poi-state-error p[b-9p8rf998ev] { color: var(--poi-food); }

.poi-retry[b-9p8rf998ev] {
    margin-top: 0.25rem;
    height: 30px;
    padding: 0 0.75rem;
    border: 1px solid var(--poi-border);
    border-radius: 7px;
    background: var(--poi-surface);
    color: var(--poi-brand);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.poi-retry:hover[b-9p8rf998ev] { border-color: var(--poi-brand); }

@media (prefers-reduced-motion: reduce) {
    .poi-spin[b-9p8rf998ev] { animation: none; }
}
/* /Components/Shared/ListingPreview.razor.rz.scp.css */
/* Listing preview overlay — a buyer's-eye quick view of a listing,
   rendered from the editor. Self-contained palette (the listings
   forest green) so it doesn't depend on the host page. */

.lpv-backdrop[b-6neva4v88c] {
    --lpv-brand:        var(--accent);
    --lpv-brand-deep:   var(--accent);
    --lpv-bg:           var(--surface-2);
    --lpv-surface:      var(--white);
    --lpv-surface-2:    var(--surface-2);
    --lpv-border:       rgba(var(--accent-bright-rgb),  0.14);
    --lpv-text:         var(--text);
    --lpv-text-muted:   var(--text-secondary);
    --lpv-text-soft:    var(--text-tertiary);
    --lpv-accent:       var(--warning);

    position: fixed;
    inset: 0;
    z-index: 340;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5vh 2.5vw;
    background: rgba(var(--shadow-rgb),  0.62);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: lpv-fade-b-6neva4v88c 150ms ease-out;
}

[data-theme="dark"] .lpv-backdrop[b-6neva4v88c] {
    --lpv-bg:         var(--bg);
    --lpv-surface:    var(--surface);
    --lpv-surface-2:  var(--surface-2);
    --lpv-border:     rgba(var(--accent-rgb),  0.18);
    --lpv-text:       var(--text);
    --lpv-text-muted: var(--text-secondary);
    --lpv-text-soft:  var(--text-tertiary);
    --lpv-brand:      var(--accent-bright);
    --lpv-accent:     var(--warning-bright);
}

.lpv-panel[b-6neva4v88c] {
    display: flex;
    flex-direction: column;
    width: min(880px, 96vw);
    max-height: 95vh;
    background: var(--lpv-surface);
    border: 1px solid var(--lpv-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 70px -20px rgba(var(--shadow-rgb),  0.55);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    animation: lpv-rise-b-6neva4v88c 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

.lpv-bar[b-6neva4v88c] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--lpv-border);
    background: var(--lpv-surface-2);
}

.lpv-bar-text[b-6neva4v88c] { display: flex; flex-direction: column; gap: 1px; }

.lpv-bar-eyebrow[b-6neva4v88c] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--lpv-brand);
}

.lpv-bar-title[b-6neva4v88c] {
    font-size: 14px;
    font-weight: 700;
    color: var(--lpv-text);
}

.lpv-close[b-6neva4v88c] {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--lpv-border);
    border-radius: 9px;
    background: var(--lpv-surface);
    color: var(--lpv-text-soft);
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
}

.lpv-close:hover[b-6neva4v88c] { color: var(--lpv-text); border-color: var(--lpv-text-soft); }
.lpv-close svg[b-6neva4v88c] { width: 17px; height: 17px; }

.lpv-scroll[b-6neva4v88c] {
    overflow-y: auto;
    background: var(--lpv-bg);
}

/* ─── Gallery ─────────────────────────────────────────────── */

.lpv-gallery[b-6neva4v88c] { background: var(--lpv-surface-2); }

.lpv-hero[b-6neva4v88c] {
    aspect-ratio: 16 / 10;
    background: var(--lpv-surface-2);
}

.lpv-hero img[b-6neva4v88c] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lpv-hero-empty[b-6neva4v88c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: var(--lpv-text-soft);
}

.lpv-hero-empty svg[b-6neva4v88c] { width: 44px; height: 44px; }
.lpv-hero-empty span[b-6neva4v88c] { font-size: 12.5px; }

.lpv-thumbs[b-6neva4v88c] {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    overflow-x: auto;
}

.lpv-thumb[b-6neva4v88c] {
    flex: none;
    width: 72px;
    height: 52px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 7px;
    overflow: hidden;
    background: var(--lpv-surface);
    cursor: pointer;
}

.lpv-thumb img[b-6neva4v88c] { width: 100%; height: 100%; object-fit: cover; display: block; }
.lpv-thumb.is-on[b-6neva4v88c] { border-color: var(--lpv-brand); }

/* ─── Content ─────────────────────────────────────────────── */

.lpv-content[b-6neva4v88c] {
    padding: 1.25rem 1.4rem 1.6rem;
    display: flex;
    flex-direction: column;
}

.lpv-price[b-6neva4v88c] {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lpv-brand-deep);
}

[data-theme="dark"] .lpv-price[b-6neva4v88c] { color: var(--lpv-brand); }

.lpv-title[b-6neva4v88c] {
    margin: 0.2rem 0 0.4rem;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--lpv-text);
}

.lpv-loc[b-6neva4v88c] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 13px;
    color: var(--lpv-text-muted);
}

.lpv-loc svg[b-6neva4v88c] { width: 15px; height: 15px; flex: none; color: var(--lpv-brand); }

.lpv-badges[b-6neva4v88c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.85rem;
}

.lpv-badge[b-6neva4v88c] {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--lpv-brand) 12%, var(--lpv-surface));
    color: var(--lpv-brand);
    font-size: 11.5px;
    font-weight: 700;
}

.lpv-badge.is-accent[b-6neva4v88c] {
    background: color-mix(in srgb, var(--lpv-accent) 16%, var(--lpv-surface));
    color: var(--lpv-accent);
}

/* ─── Spec strip ──────────────────────────────────────────── */

.lpv-specs[b-6neva4v88c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.lpv-spec[b-6neva4v88c] {
    flex: 1 1 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 0.6rem 0.4rem;
    border: 1px solid var(--lpv-border);
    border-radius: 11px;
    background: var(--lpv-surface);
}

.lpv-spec-n[b-6neva4v88c] {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--lpv-text);
}

.lpv-spec-l[b-6neva4v88c] {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lpv-text-soft);
}

/* ─── Sections ────────────────────────────────────────────── */

.lpv-section[b-6neva4v88c] {
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--lpv-border);
}

.lpv-section-title[b-6neva4v88c] {
    margin: 0 0 0.55rem;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--lpv-text);
}

.lpv-desc[b-6neva4v88c] {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--lpv-text-muted);
    /* The narrative is hook / layout / neighbourhood joined by blank
       lines — keep the paragraph breaks. */
    white-space: pre-line;
}

.lpv-features[b-6neva4v88c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.lpv-feature[b-6neva4v88c] {
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--lpv-border);
    border-radius: 999px;
    background: var(--lpv-surface);
    font-size: 12px;
    color: var(--lpv-text-muted);
}

.lpv-costs[b-6neva4v88c] { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.lpv-cost[b-6neva4v88c] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--lpv-border);
    border-radius: 9px;
    background: var(--lpv-surface);
    font-size: 12.5px;
    color: var(--lpv-text-soft);
}

.lpv-cost strong[b-6neva4v88c] { color: var(--lpv-text); font-weight: 700; }

.lpv-agent[b-6neva4v88c] {
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--lpv-border);
    font-size: 12.5px;
    color: var(--lpv-text-soft);
}

.lpv-agent strong[b-6neva4v88c] { color: var(--lpv-text); font-weight: 700; }

@keyframes lpv-fade-b-6neva4v88c {
    from { opacity: 0; }
    to   { opacity: 1; }
}

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

@media (prefers-reduced-motion: reduce) {
    .lpv-backdrop[b-6neva4v88c], .lpv-panel[b-6neva4v88c] { animation: none; }
}
/* /Components/Shared/ListingSolarPotential.razor.rz.scp.css */
/* Solar potential — rooftop solar estimate for one listing. Brand
   forest green chrome with a warm amber accent for the energy
   figures. Self-contained palette so it doesn't lean on the host
   page's tokens (mirrors ListingActivityLog). */

.sol-shell[b-q79n7uual4] {
    --sol-brand:      var(--accent);
    --sol-sun:        var(--warning);
    --sol-surface:    var(--white);
    --sol-surface-2:  var(--surface-2);
    --sol-border:     rgba(var(--accent-bright-rgb),  0.14);
    --sol-text:       var(--text);
    --sol-text-muted: var(--text-secondary);
    --sol-text-soft:  var(--text-tertiary);

    display: block;
    border: 1px solid var(--sol-border);
    border-radius: 14px;
    background: var(--sol-surface);
    padding: 1rem 1.1rem 1.1rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

[data-theme="dark"] .sol-shell[b-q79n7uual4] {
    --sol-brand:      var(--accent);
    --sol-sun:        var(--warning-bright);
    --sol-surface:    var(--surface);
    /* Was var(--text) — i.e. near-white in dark mode, which made the
       Panels/kWh/Sunshine stat cards white boxes with invisible
       white-on-white numbers. A dark elevated surface fixes it. */
    --sol-surface-2:  var(--surface-2);
    --sol-border:     rgba(var(--accent-rgb),  0.18);
    --sol-text:       var(--text);
    --sol-text-muted: var(--text-secondary);
    --sol-text-soft:  var(--text-tertiary);
}

.sol-head[b-q79n7uual4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.sol-eyebrow[b-q79n7uual4] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sol-sun);
}

.sol-title[b-q79n7uual4] {
    margin: 0.12rem 0 0;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sol-text);
}

.sol-refresh[b-q79n7uual4] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--sol-border);
    background: var(--sol-surface-2);
    color: var(--sol-text-muted);
    cursor: pointer;
    transition: color 130ms ease, border-color 130ms ease;
}

.sol-refresh:hover:not(:disabled)[b-q79n7uual4] {
    color: var(--sol-sun);
    border-color: color-mix(in srgb, var(--sol-sun) 40%, var(--sol-border));
}

.sol-refresh:disabled[b-q79n7uual4] { opacity: 0.5; cursor: default; }
.sol-refresh svg[b-q79n7uual4] { width: 14px; height: 14px; }

/* ─── Stat grid ───────────────────────────────────────────── */

.sol-grid[b-q79n7uual4] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}

.sol-stat[b-q79n7uual4] {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--sol-border);
    border-radius: 11px;
    background: var(--sol-surface-2);
}

.sol-stat-hero[b-q79n7uual4] {
    grid-column: 1 / -1;
    background: color-mix(in srgb, var(--sol-sun) 12%, var(--sol-surface));
    border-color: color-mix(in srgb, var(--sol-sun) 30%, var(--sol-border));
}

.sol-stat-value[b-q79n7uual4] {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sol-text);
    font-variant-numeric: tabular-nums;
}

.sol-stat-hero .sol-stat-value[b-q79n7uual4] {
    font-size: 28px;
    color: var(--sol-sun);
}

.sol-stat-unit[b-q79n7uual4] {
    margin-left: 0.22em;
    font-size: 0.55em;
    font-weight: 700;
    color: var(--sol-text-soft);
}

.sol-stat-hero .sol-stat-unit[b-q79n7uual4] { color: color-mix(in srgb, var(--sol-sun) 70%, var(--sol-text-soft)); }

.sol-stat-label[b-q79n7uual4] {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sol-text-soft);
}

/* ─── Saving highlight ────────────────────────────────────── */

.sol-highlight[b-q79n7uual4] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 11px;
    background: color-mix(in srgb, var(--sol-brand) 10%, var(--sol-surface));
    border: 1px solid color-mix(in srgb, var(--sol-brand) 24%, transparent);
}

.sol-highlight-icon[b-q79n7uual4] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--sol-sun) 16%, var(--sol-surface));
    color: var(--sol-sun);
}

.sol-highlight-icon svg[b-q79n7uual4] { width: 16px; height: 16px; }

.sol-highlight-text[b-q79n7uual4] {
    font-size: 12px;
    line-height: 1.45;
    color: var(--sol-text-muted);
}

.sol-highlight-text strong[b-q79n7uual4] { color: var(--sol-text); }

/* ─── Footer chips + disclaimer ───────────────────────────── */

.sol-foot[b-q79n7uual4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.7rem;
}

.sol-chip[b-q79n7uual4] {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--sol-surface-2);
    border: 1px solid var(--sol-border);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--sol-text-muted);
}

.sol-note[b-q79n7uual4] {
    flex-basis: 100%;
    margin-top: 0.15rem;
    font-size: 10px;
    line-height: 1.4;
    color: var(--sol-text-soft);
}

/* ─── States ──────────────────────────────────────────────── */

.sol-state[b-q79n7uual4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.6rem 1rem;
    text-align: center;
    color: var(--sol-text-soft);
}

.sol-state svg[b-q79n7uual4] { width: 28px; height: 28px; }
.sol-state p[b-q79n7uual4] { margin: 0; font-size: 12.5px; line-height: 1.5; max-width: 30ch; }
.sol-state-error[b-q79n7uual4] { color: var(--danger); }
[data-theme="dark"] .sol-state-error[b-q79n7uual4] { color: var(--danger-bright); }

.sol-retry[b-q79n7uual4] {
    margin-top: 0.2rem;
    padding: 0.32rem 0.85rem;
    border-radius: 8px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}

.sol-spin[b-q79n7uual4] { animation: sol-spin-b-q79n7uual4 0.7s linear infinite; }

@keyframes sol-spin-b-q79n7uual4 { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .sol-spin[b-q79n7uual4] { animation: none; }
}
/* /Components/Shared/ListingTabs.razor.rz.scp.css */
/* ListingTabs — underline-style top-level tab strip for the listing
   workspace. Uses the portal palette (the strip renders inside
   .portal-shell, so the --portal-* custom properties are in scope);
   literal fallbacks keep it sane if a host renders it out of scope. */

.lstab-bar[b-t5y8pkw1lu] {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--portal-border, rgba(var(--accent-rgb),  0.10));
    margin-bottom: 1.75rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.lstab-bar[b-t5y8pkw1lu]::-webkit-scrollbar {
    display: none;
}

.lstab[b-t5y8pkw1lu] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding: 0.7rem 1rem;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--portal-text-muted, var(--text-secondary));
    text-decoration: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: 8px 8px 0 0;
    transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.lstab svg[b-t5y8pkw1lu] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.lstab:hover[b-t5y8pkw1lu] {
    color: var(--portal-text, var(--text));
    background: var(--portal-hover, rgba(var(--accent-rgb),  0.04));
}

.lstab:focus-visible[b-t5y8pkw1lu] {
    outline: 2px solid var(--portal-brand-bright, var(--accent-bright));
    outline-offset: -2px;
}

.lstab.is-active[b-t5y8pkw1lu] {
    color: var(--portal-brand-bright, var(--accent-bright));
    border-bottom-color: var(--portal-brand-bright, var(--accent-bright));
}

/* Narrow screens — collapse to icon-only so all three tabs fit. */
@media (max-width: 640px) {
    .lstab span[b-t5y8pkw1lu] {
        display: none;
    }
}
/* /Components/Shared/NoticeModal.razor.rz.scp.css */
/* NoticeModal — centred, themed alert dialog. Mirrors ConfirmModal's
   proportions; tone drives the icon colour + top accent strip. */

.notice-backdrop[b-ik6pe3xsuj] {
    position: fixed;
    inset: 0;
    background: rgba(var(--shadow-rgb),  0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 10000;
    animation: notice-fade-b-ik6pe3xsuj 200ms ease-out;
}

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

.notice-card[b-ik6pe3xsuj] {
    width: min(460px, 100%);
    /* --bg-2 is a phantom token (never defined) so this fell back to
       var(--white) in dark mode → white card under near-white text. */
    background: var(--surface);
    color: var(--text);
    border-radius: 1rem;
    border-top: 3px solid var(--notice-accent, var(--tone-indigo));
    padding: 1.9rem 1.85rem 1.55rem;
    box-shadow:
        0 1px 2px rgba(var(--shadow-rgb),  0.10),
        0 28px 64px -18px rgba(var(--shadow-rgb),  0.45);
    animation: notice-rise-b-ik6pe3xsuj 240ms cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    align-items: flex-start;
}

@keyframes notice-fade-b-ik6pe3xsuj {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes notice-rise-b-ik6pe3xsuj {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.notice-icon[b-ik6pe3xsuj] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--white);
    margin-bottom: 0.35rem;
    background: linear-gradient(135deg, var(--notice-accent, var(--tone-indigo)), var(--notice-accent-deep, var(--tone-indigo)));
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--notice-accent, var(--tone-indigo)) 60%, transparent);
}

.notice-icon svg[b-ik6pe3xsuj] {
    width: 26px;
    height: 26px;
}

.notice-title[b-ik6pe3xsuj] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.notice-msg[b-ik6pe3xsuj] {
    margin: 0;
    line-height: 1.55;
    font-size: 0.95rem;
    color: var(--text-secondary, var(--text-secondary));
}

.notice-actions[b-ik6pe3xsuj] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    width: 100%;
    margin-top: 1.4rem;
}

/* ─── Tone palettes — set on the card so the icon + accent inherit ─── */
.notice-modal.is-info    .notice-card[b-ik6pe3xsuj] { --notice-accent: var(--tone-indigo); --notice-accent-deep: var(--tone-indigo); }
.notice-modal.is-success .notice-card[b-ik6pe3xsuj] { --notice-accent: var(--accent-bright); --notice-accent-deep: var(--accent); }
.notice-modal.is-warning .notice-card[b-ik6pe3xsuj] { --notice-accent: var(--warning); --notice-accent-deep: var(--warning); }
.notice-modal.is-error   .notice-card[b-ik6pe3xsuj] { --notice-accent: var(--danger-bright); --notice-accent-deep: var(--danger); }

@media (prefers-reduced-motion: reduce) {
    .notice-backdrop[b-ik6pe3xsuj], .notice-card[b-ik6pe3xsuj] { 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: var(--white);
    border: 1px solid rgba(var(--accent-rgb),  0.10);
    border-radius: 12px;
    box-shadow:
        0 1px 2px rgba(var(--shadow-rgb),  0.04),
        0 12px 32px -8px rgba(var(--shadow-rgb),  0.18),
        0 4px 12px -4px rgba(var(--shadow-rgb),  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(var(--accent-rgb),  0.08);
    background: var(--surface-2);
    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: var(--text-secondary);
    margin: 0;
}

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

.portal-bell-empty[b-i46r2u0vtl] {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 500;
    margin: 0;
    background: var(--white);
}

/* 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(var(--accent-bright-rgb),  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: var(--white);
    scrollbar-width: thin;
}

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

.portal-bell-list[b-i46r2u0vtl]::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb),  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(var(--accent-rgb),  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(var(--accent-bright-rgb),  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: var(--accent-bright);
    box-shadow: 0 0 0 2px rgba(var(--accent-bright-rgb),  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: var(--text);
    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: var(--text-tertiary);
}

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

[data-theme="dark"] .portal-bell-dropdown[b-i46r2u0vtl] {
    background: var(--surface);
    border-color: rgba(var(--accent-rgb),  0.12);
    box-shadow:
        0 1px 2px rgba(var(--shadow-rgb),  0.30),
        0 12px 32px -8px rgba(var(--shadow-rgb),  0.55),
        0 4px 12px -4px rgba(var(--shadow-rgb),  0.35);
}

[data-theme="dark"] .portal-bell-header[b-i46r2u0vtl] {
    border-bottom-color: rgba(var(--accent-rgb),  0.10);
    background: var(--bg);
}

[data-theme="dark"] .portal-bell-header .t-eyebrow[b-i46r2u0vtl] {
    color: var(--text-secondary);
}

[data-theme="dark"] .portal-bell-empty[b-i46r2u0vtl] {
    color: var(--text-secondary);
    background: var(--surface);
}

[data-theme="dark"] .portal-bell-list[b-i46r2u0vtl] {
    background: var(--surface);
}

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

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

[data-theme="dark"][b-i46r2u0vtl]  .portal-bell-item .t-body {
    color: var(--text);
}

[data-theme="dark"][b-i46r2u0vtl]  .portal-bell-item .t-tertiary {
    color: var(--text-tertiary);
}
/* /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, var(--border-subtle)) 0%,
        var(--surface-hover, rgba(var(--shadow-rgb),  0.05)) 50%,
        var(--surface-2, var(--border-subtle)) 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(var(--glass-rgb),  0.05) 0%,
        rgba(var(--glass-rgb),  0.10) 50%,
        rgba(var(--glass-rgb),  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;
    /* --bg-2 phantom token fell back to white → white skeleton cards
       in dark mode. --surface adapts (white light / dark in dark). */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
}

.skeleton-card[b-ip56p05lml] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.5rem;
    /* --bg-2 phantom token fell back to white → white skeleton cards
       in dark mode. --surface adapts (white light / dark in dark). */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    min-height: 140px;
}

.skeleton-stat[b-ip56p05lml] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 1.25rem;
    /* --bg-2 phantom token fell back to white → white skeleton cards
       in dark mode. --surface adapts (white light / dark in dark). */
    background: var(--surface);
    border: 1px solid var(--border);
    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, var(--white));
    color: var(--text, var(--text));
    border: 1px solid var(--border, var(--border));
    box-shadow:
        0 1px 2px rgba(var(--shadow-rgb),  0.08),
        0 10px 28px -8px rgba(var(--shadow-rgb),  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: var(--white);
    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, var(--text-secondary));
    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(var(--shadow-rgb),  0.06));
    color: var(--text, var(--text));
}

.toast.tone-success[b-4wvnt6byyc] { border-left: 3px solid var(--accent-bright); }
.toast.tone-success .toast-icon[b-4wvnt6byyc] { background: var(--accent-bright); }

.toast.tone-info[b-4wvnt6byyc] { border-left: 3px solid var(--info-bright); }
.toast.tone-info .toast-icon[b-4wvnt6byyc] { background: var(--info-bright); }

.toast.tone-warning[b-4wvnt6byyc] { border-left: 3px solid var(--warning-bright); }
.toast.tone-warning .toast-icon[b-4wvnt6byyc] { background: var(--warning-bright); }

.toast.tone-error[b-4wvnt6byyc] { border-left: 3px solid var(--danger-bright); }
.toast.tone-error .toast-icon[b-4wvnt6byyc] { background: var(--danger-bright); }

[data-theme="dark"] .toast[b-4wvnt6byyc] {
    background: var(--text);
    color: var(--surface-2);
    border-color: rgba(var(--glass-rgb),  0.12);
}

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

[data-theme="dark"] .toast-close:hover[b-4wvnt6byyc] {
    background: rgba(var(--glass-rgb),  0.06);
    color: var(--surface-2);
}

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