/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* "Slate" layout shell - fixed left sidebar + a scrollable main content column,
   replacing "Survey Line"'s sticky top bar (project-knowledge.md "Design system").
   A left sidebar is the single most recognizable "this looks like real SaaS"
   signal (Notion/Linear/Asana/Salesforce all use one) and is a genuine structural
   change, not just new colors on the same top-bar shape, after two top-bar-based
   themes were both rejected. The sidebar's own width/look live in
   NavMenu.razor.css (its own scoped root element) - this file only owns the
   two-column shell and the main content column. */
.app-shell[b-x7n8b8u8b7] {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
    background: var(--bg);
}

.app-main[b-x7n8b8u8b7] {
    flex: 1 1 auto;
    /* min-width:0 is required on a flex item that contains wide content (tables) -
       without it the item refuses to shrink below its content's intrinsic width
       and can overflow the viewport instead of scrolling internally. */
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 2rem 2.5rem 3rem;
    /* Content width cap (2026-07-28 UX polish pass): on ultra-wide monitors the
       pages previously stretched edge-to-edge, putting a row's label and its
       value thousands of pixels apart. Centered in the space remaining next to
       the sidebar (2026-07-31 follow-up: the original left-anchored version
       left the entire right half of an ultra-wide screen empty, which read as
       broken rather than intentional — auto margins on a flex item absorb the
       free space evenly on both sides). */
    max-width: 1360px;
    margin-inline: auto;
}

/* Sidebar stacks above the content on narrow viewports rather than a hamburger
   menu - this app's pages are static SSR with no client-side interactivity to
   drive a collapsible off-canvas panel, so a plain stack is the simplest
   correct behavior. */
@media (max-width: 900px) {
    .app-shell[b-x7n8b8u8b7] {
        flex-direction: column;
    }

    .app-main[b-x7n8b8u8b7] {
        padding: 1.5rem 1.25rem 2rem;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* "Slate" sidebar - fixed left column, replacing "Survey Line"'s sticky ink top
   bar (project-knowledge.md "Design system"). ~240px, sticky so it stays in view
   while the (possibly long) main content column scrolls. */
.sidebar[b-ltlgdgqwv0] {
    flex: none;
    width: 240px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1rem;
    /* Deep teal, not --bg-subtle gray - 2026-07-24 color pass. The colored
       sidebar block against the (now tinted) lighter content area is the
       single biggest lever against the "too much white" feeling; the strong
       color contrast against the main content also replaces the need for a
       separating border-right. */
    background: var(--sidebar-bg);
    position: sticky;
    top: 0;
    align-self: flex-start;
    min-height: 100vh;
}

@media (max-width: 900px) {
    .sidebar[b-ltlgdgqwv0] {
        width: 100%;
        min-height: auto;
        position: static;
        border-bottom: 1px solid var(--sidebar-border);
    }
}

.sidebar-brand[b-ltlgdgqwv0] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-bottom: .9rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-brand:hover[b-ltlgdgqwv0] {
    text-decoration: none;
}

/* Small colored rounded-square with initials - no crosshair glyph, no image.
   White chip + teal letters (was solid-accent + white) - 2026-07-24: two close
   teals stacked (this mark's old --accent fill on the new --sidebar-bg) read
   as low-contrast/muddy, so a solid white chip is used instead, guaranteed to
   read clearly regardless of the exact sidebar shade.
   Dark-mode round (2026-08), Lighthouse-caught: color was var(--accent), which is fine paired
   with this fixed white background in LIGHT mode (~5.2:1) but fails badly in DARK mode
   (~1.9:1) once --accent flips to the bright mint dark token - this chip's white background is
   deliberately theme-INVARIANT (the sidebar is always dark regardless of app theme, per the
   comment above), so its text needs to be theme-invariant too, not tied to a token that flips.
   var(--sidebar-bg) (#0d4941, itself already fixed regardless of app theme) gives ~5.5:1 on
   white and reads as the mark done in the sidebar's own brand teal either way. */
.sidebar-brand-mark[b-ltlgdgqwv0] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: #ffffff;
    color: var(--sidebar-bg);
    font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    font-weight: 700;
    font-size: .7rem;
}

.sidebar-brand-name[b-ltlgdgqwv0] {
    font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--sidebar-ink);
}

/* Command palette hint button (Ctrl+K, Wave 4) — quiet styling, sits above the tree
   switcher/nav list. Literal markup child of this component (not a child component's output),
   so it doesn't need ::deep. */
.sidebar-palette-hint[b-ltlgdgqwv0] {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    margin-bottom: .75rem;
    padding: .45rem .6rem;
    background: none;
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-sm);
    color: var(--sidebar-ink-soft);
    font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    font-size: .8rem;
    text-align: left;
    cursor: pointer;
}

.sidebar-palette-hint:hover[b-ltlgdgqwv0] {
    color: var(--sidebar-ink);
    background: var(--sidebar-hover-bg);
}

.sidebar-palette-hint-label[b-ltlgdgqwv0] {
    flex: 1 1 auto;
}

.sidebar-palette-kbd[b-ltlgdgqwv0] {
    flex: none;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .68rem;
    color: var(--sidebar-ink-faint);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--sidebar-border);
    border-radius: 4px;
    padding: .1rem .35rem;
}

[b-ltlgdgqwv0] .sidebar-tree {
    padding: .1rem .35rem 1rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--sidebar-border);
}

[b-ltlgdgqwv0] .sidebar-tree-switcher {
    margin-bottom: .35rem;
}

/* Tree-switcher dropdown (Phase 5) - single <select>, auto-submits on change, replacing
   the old always-visible link-per-other-membership list. Disabled (not hidden) when there's
   only one option, so the active tree name stays visible either way - this is also what
   keeps a platform admin's virtual/foreign entry visible (Phase 4 review finding: the old
   active-tree label went missing entirely for a membership with no real TreeUser row). */
[b-ltlgdgqwv0] .sidebar-tree-select {
    width: 100%;
    background: var(--sidebar-bg);
    color: var(--sidebar-ink);
    border: 1px solid var(--sidebar-border);
    border-radius: 5px;
    padding: .3rem .4rem;
    font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
}

[b-ltlgdgqwv0] .sidebar-tree-select:disabled {
    cursor: default;
    opacity: 1;
    -webkit-text-fill-color: var(--sidebar-ink);
    border-color: transparent;
    padding-left: 0;
}

/* The popup list needs BOTH a colour and a background. This rule set only `color: #000000`, and a
   native select popup takes its background from the select itself - which is the dark sidebar surface.
   Black on near-black: every option except the highlighted one was invisible. It was already marginal
   against the old teal sidebar and became unreadable when "Iron gall" made that surface darker, so
   this is half a pre-existing bug and half a regression I introduced.

   Tokens rather than fixed white/black, so the popup follows the app theme: a light panel with ink
   text in light mode, a dark panel with light text in dark mode. Both are legible; a hard-coded white
   popup would be legible too but would flash white in dark mode. */
[b-ltlgdgqwv0] .sidebar-tree-select option {
    background-color: var(--panel);
    color: var(--ink);
}

[b-ltlgdgqwv0] .sidebar-tree-new {
    display: block;
    margin-top: .3rem;
    font-size: .8rem;
    color: var(--sidebar-mint);
}

[b-ltlgdgqwv0] .sidebar-tree-new:hover {
    color: #ffffff;
    text-decoration: underline;
}

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

[b-ltlgdgqwv0] .sidebar-nav-group {
    font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sidebar-ink-soft);
    opacity: .65;
    padding: .85rem .65rem .3rem;
}

[b-ltlgdgqwv0] .sidebar-nav-group:first-child {
    padding-top: 0;
}

[b-ltlgdgqwv0] .nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    font-size: .875rem;
    font-weight: 500;
    color: var(--sidebar-ink-soft) !important;
    padding: .5rem .65rem;
    border-radius: var(--radius-sm);
    transition: background-color 120ms ease, color 120ms ease;
}

[b-ltlgdgqwv0] .nav-link i {
    width: 16px;
    flex: none;
    text-align: center;
    font-size: .85em;
    color: var(--sidebar-ink-soft);
}

[b-ltlgdgqwv0] .nav-link:hover {
    color: var(--sidebar-ink) !important;
    background: var(--sidebar-hover-bg);
}

[b-ltlgdgqwv0] .nav-link:hover i {
    color: var(--sidebar-ink);
}

/* Active chip deliberately does NOT reuse --accent on this dark sidebar bg
   (two close teals stacked read as low-contrast) - a translucent white chip
   plus solid-white text/icon instead, so "active" stays unmistakable. */
[b-ltlgdgqwv0] .nav-link.active {
    color: #ffffff !important;
    background: var(--sidebar-active-bg);
    font-weight: 600;
}

[b-ltlgdgqwv0] .nav-link.active i {
    color: #ffffff;
}

.sidebar-footer[b-ltlgdgqwv0] {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--sidebar-border);
}

/* Wraps <ThemeToggle /> - literal markup child of THIS component (not projected content from
   ThemeToggle's own template), so it doesn't need ::deep. */
.sidebar-theme-row[b-ltlgdgqwv0] {
    margin-bottom: .6rem;
}

.sidebar-culture[b-ltlgdgqwv0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    padding: 0 .1rem;
    font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    font-size: .75rem;
    margin-bottom: .6rem;
}

.sidebar-culture-link[b-ltlgdgqwv0] {
    color: var(--sidebar-ink-soft);
}

.sidebar-culture-link:hover[b-ltlgdgqwv0] {
    color: var(--sidebar-mint);
    text-decoration: underline;
}

.sidebar-culture-current[b-ltlgdgqwv0] {
    color: var(--sidebar-ink);
    font-weight: 600;
}

.sidebar-culture-sep[b-ltlgdgqwv0] {
    color: var(--sidebar-ink-faint);
}

[b-ltlgdgqwv0] .sidebar-logout-btn {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: .45rem .5rem;
    font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    font-size: .85rem;
    font-weight: 500;
    color: var(--sidebar-ink-soft);
    border-radius: var(--radius-sm);
}

[b-ltlgdgqwv0] .sidebar-logout-btn:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-ink);
}

/* ==== Mobile collapsible nav (A1, 2026-08 mobile pass) ====
   Pure-CSS checkbox+label toggle - no JS, works with JS disabled (nav simply starts collapsed
   on mobile either way, same as it always renders regardless of script execution). Everything
   below is either hidden unconditionally (so desktop is unaffected without needing every rule
   inside the media query) or explicitly scoped to ≤900px. Desktop's .sidebar-brand and the
   AuthorizeView-driven nav/tree/footer keep their original DOM position and CSS untouched.
   NOTE: this block is placed LAST in the file deliberately - its .sidebar-brand / .sidebar-nav
   etc. overrides share equal specificity with the base rules earlier in this file, so source
   order is what makes them win; moving this block earlier would silently break the override. */
.sidebar-mobile-toggle[b-ltlgdgqwv0] {
    /* Hidden at all widths (no visible checkbox UI) - the associated <label for> still toggles
       it while display:none, standard cross-browser behavior for this pattern. */
    display: none;
}

.sidebar-topbar[b-ltlgdgqwv0] {
    /* Desktop: not shown - the real .sidebar-brand above is used instead. */
    display: none;
}

/* display:contents on desktop = zero layout effect: its children (palette hint, tree
   switcher, nav list, footer) remain direct flex items of .sidebar exactly as before this
   wrapper was introduced. Only becomes a real (hideable) flex container at ≤900px below. */
.sidebar-collapsible[b-ltlgdgqwv0] {
    display: contents;
}

@media (max-width: 900px) {
    .sidebar-topbar[b-ltlgdgqwv0] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        padding-bottom: .75rem;
        margin-bottom: .75rem;
        border-bottom: 1px solid var(--sidebar-border);
    }

    /* Replaced by the compact brand inside .sidebar-topbar above. */
    .sidebar-brand[b-ltlgdgqwv0] {
        display: none;
    }

    .sidebar-topbar-brand[b-ltlgdgqwv0] {
        display: flex;
        align-items: center;
        gap: .6rem;
        min-width: 0;
    }

    .sidebar-topbar-actions[b-ltlgdgqwv0] {
        display: flex;
        align-items: center;
        flex: none;
    }

    .sidebar-topbar-btn[b-ltlgdgqwv0] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex: none;
        background: none;
        border: 0;
        border-radius: var(--radius-sm);
        color: var(--sidebar-ink);
        font-size: 1.05rem;
        cursor: pointer;
    }

    .sidebar-topbar-btn:hover[b-ltlgdgqwv0] {
        background: var(--sidebar-hover-bg);
    }

    /* Hamburger <-> close icon swap, driven by the checkbox's :checked state (no JS). */
    .sidebar-toggle-icon-open[b-ltlgdgqwv0] {
        display: none;
    }

    .sidebar-mobile-toggle:checked ~ .sidebar-topbar .sidebar-toggle-icon-closed[b-ltlgdgqwv0] {
        display: none;
    }

    .sidebar-mobile-toggle:checked ~ .sidebar-topbar .sidebar-toggle-icon-open[b-ltlgdgqwv0] {
        display: inline;
    }

    /* Collapsed by default; expands when the checkbox (toggled by the hamburger label) is
       checked. Tree switcher, full nav list, and culture/logout footer all live in here,
       so they stay reachable once expanded. */
    .sidebar-collapsible[b-ltlgdgqwv0] {
        display: none;
    }

    .sidebar-mobile-toggle:checked ~ .sidebar-collapsible[b-ltlgdgqwv0] {
        display: flex;
        flex-direction: column;
    }

    /* ---- Touch targets (A3): larger padding on mobile only, desktop untouched ---- */
    .sidebar-palette-hint[b-ltlgdgqwv0] {
        padding: .7rem .6rem;
    }

    [b-ltlgdgqwv0] .nav-link {
        padding: .75rem .65rem;
    }

    [b-ltlgdgqwv0] .sidebar-logout-btn {
        padding: .7rem .5rem;
    }

    [b-ltlgdgqwv0] .sidebar-tree-select {
        padding: .55rem .4rem;
    }
}
/* /Components/Layout/PrintLayout.razor.rz.scp.css */
/* Bare shell for printable documents — no sidebar, no app-shell padding, plain white
   background regardless of the light/dark app chrome elsewhere (project-knowledge.md "Design
   system" tokens aren't reused here on purpose: a printed document reads as paper, not as the
   app UI). */
.print-page[b-n68mx68673] {
    background: #ffffff;
    min-height: 100vh;
    padding: 2rem;
}

@media print {
    .print-page[b-n68mx68673] {
        padding: 0;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-l8ir67yqg4],
.components-reconnect-repeated-attempt-visible[b-l8ir67yqg4],
.components-reconnect-failed-visible[b-l8ir67yqg4],
.components-pause-visible[b-l8ir67yqg4],
.components-resume-failed-visible[b-l8ir67yqg4],
.components-rejoining-animation[b-l8ir67yqg4] {
    display: none;
}

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

#components-reconnect-modal[b-l8ir67yqg4] {
    background-color: var(--panel, #ffffff);
    color: var(--ink, #1a1f27);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--border, #e3e6ea);
    border-radius: var(--radius, 8px);
    box-shadow: var(--shadow-md, 0 4px 10px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08));
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-l8ir67yqg4 0.5s both;
}

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

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-l8ir67yqg4] {
    border: 0;
    background-color: var(--accent, #0f7a6f);
    color: #ffffff;
    font-weight: 600;
    padding: 6px 24px;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
}

#components-reconnect-modal button:hover[b-l8ir67yqg4] {
    background-color: var(--accent-hover, #0b5f56);
}

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

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

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

@media (max-width: 575.98px) {
    #components-reconnect-modal[b-l8ir67yqg4] {
        width: calc(100vw - 32px);
        margin: 12vh auto;
        padding: 1.5rem;
    }

    .components-rejoining-animation[b-l8ir67yqg4] {
        width: 64px;
        height: 64px;
    }
}

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/ThemeToggle.razor.rz.scp.css */
/* Dark-mode toggle (2026-08 round) - circular icon button living on the dark --sidebar-* surface
   in BOTH its mounting locations (desktop sidebar footer AND the mobile top bar - .sidebar-topbar
   is a child of the same .sidebar panel, so it shares the same dark background), matching the
   existing .sidebar-palette-hint/.sidebar-logout-btn hover treatment in NavMenu.razor.css. The
   mobile top bar additionally merges in that file's own .sidebar-topbar-btn class (44px touch
   target) via the ButtonClass parameter - the sizing below is this component's own default,
   used as-is by the desktop footer mount. */
.theme-toggle-form[b-o4vunop58b] {
    display: inline-flex;
    margin: 0;
}

.theme-toggle-btn[b-o4vunop58b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* WCAG 2.2 SC 2.5.8 minimum target size even on the desktop-default (smaller) sizing. */
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: none;
    border: 1px solid var(--sidebar-border);
    border-radius: 999px;
    color: var(--sidebar-ink-soft);
    font-size: .85rem;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.theme-toggle-btn:hover[b-o4vunop58b] {
    color: var(--sidebar-ink);
    background: var(--sidebar-hover-bg);
    border-color: var(--sidebar-mint);
}

/* Icon shows the theme CURRENTLY in effect (moon = dark active, sun = light active), not the
   theme a click would switch to - CSS alone tracks it via [data-bs-theme] on <html>, so it stays
   correct even after theme-toggle.js flips that attribute client-side with no component re-render. */
.theme-toggle-icon-moon[b-o4vunop58b] {
    display: none;
}

[data-bs-theme="dark"] .theme-toggle-icon-sun[b-o4vunop58b] {
    display: none;
}

[data-bs-theme="dark"] .theme-toggle-icon-moon[b-o4vunop58b] {
    display: inline;
}
/* /Components/Pages/Account/Register.razor.rz.scp.css */
/* Honeypot field for HandleRegisterAsync's anti-spam check (see RegistrationGate.cs).
   Off-screen via absolute positioning rather than display:none/visibility:hidden —
   those are the first two properties naive bot scrapers check for and skip, which
   would defeat the honeypot; moving it off-screen still hides it from sighted users
   without tripping that check. Combined with tabindex="-1"/aria-hidden on the input
   itself, it's also invisible to keyboard and screen-reader users. Ported verbatim
   from G:\Solar's sibling pattern (Register.razor.css). */
.hp-field[b-2vmp470o8c] {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* "Slate" stat-tile grid (Home dashboard) - plain elevated cards, replacing
   "Survey Line"'s hairline corner-tick tiles + once-only scan-line sweep. 7 tiles
   (M7a added "Leases expiring soon") don't divide evenly into a fixed 3-column
   grid without an orphan last row, so this stays flex-wrap (unchanged reasoning
   from both prior themes), just re-skinned card-by-card with real elevation
   instead of one hairline-joined block. */
.stat-tile-grid[b-1n7wb8mlfd] {
    /* auto-fill grid (2026-07-28 UX pass, was flex-wrap): keeps every tile the
       same width even on a partially-filled last row - flex-grow used to
       stretch the 2 tiles of a 5+2 wrap into visually unrelated sizes. */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0 1.5rem;
}

.stat-tile[b-1n7wb8mlfd] {
    background: var(--panel);
    border: 1px solid var(--border);
    /* Single consistent accent-colored top rule (2026-07-24 color pass) - a
       small, deliberately uniform touch of color presence on every tile
       rather than a per-tile multi-color scheme. */
    border-top: 3px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    flex: 1 1 220px;
    padding: 1.1rem 1.25rem 1.25rem;
}

.stat-tile-row[b-1n7wb8mlfd] {
    margin: 0;
    font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    font-size: .85rem;
    font-weight: 500;
    color: var(--ink-soft);
}

.stat-tile-number[b-1n7wb8mlfd] {
    /* IBM Plex Mono, not the body/heading face - known gotcha, do not
       rediscover it: a bold display font's bare "0" can render as a solid
       blob indistinguishable from a dot at large sizes, which is
       launch-blocking on a brand-new tenant's all-zero Home dashboard. Plex
       Mono's zero carries a dot/slash that disambiguates 0/O. */
    display: block;
    margin-top: .35rem;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    font-size: 2rem;
    color: var(--accent);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.stat-tile-number:hover[b-1n7wb8mlfd] {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Currency unit on money tiles - quiet, small, never competing with the number. */
.stat-tile-unit[b-1n7wb8mlfd] {
    font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-faint);
    margin-left: .4rem;
    letter-spacing: .04em;
}

/* Alert-state tiles - the ONLY per-tile color deviation from the uniform accent
   top rule: a tile whose count demands action shifts its rule + number to the
   status color, so "Overdue invoices 2" no longer reads identically to a
   harmless zero. Zero-count tiles keep the calm uniform accent. */
.stat-tile-warn[b-1n7wb8mlfd] {
    border-top-color: var(--warn);
}

.stat-tile-warn .stat-tile-number[b-1n7wb8mlfd] {
    color: var(--warn);
}

.stat-tile-danger[b-1n7wb8mlfd] {
    border-top-color: var(--danger);
}

.stat-tile-danger .stat-tile-number[b-1n7wb8mlfd] {
    color: var(--danger);
}

/* ==== Page head (tree name + app kicker) ==== */

.home-head[b-1n7wb8mlfd] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.home-kicker[b-1n7wb8mlfd] {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 .2rem;
}

.home-title[b-1n7wb8mlfd] {
    margin-bottom: 0;
}

.home-head-action[b-1n7wb8mlfd] {
    flex: none;
    margin-top: .35rem;
}

/* ==== "Needs attention" panel ==== */

.attn-panel[b-1n7wb8mlfd] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.attn-live[b-1n7wb8mlfd] {
    border-left: 3px solid var(--warn);
}

.attn-quiet[b-1n7wb8mlfd] {
    border-left: 3px solid var(--ok);
}

.attn-heading[b-1n7wb8mlfd] {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 .6rem;
}

.attn-list[b-1n7wb8mlfd] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.attn-item[b-1n7wb8mlfd] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .35rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--ink);
}

.attn-item:hover[b-1n7wb8mlfd] {
    background: var(--bg-subtle);
}

.attn-list li + li .attn-item[b-1n7wb8mlfd] {
    border-top: 1px solid var(--border);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.attn-dot[b-1n7wb8mlfd] {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.attn-dot-danger[b-1n7wb8mlfd] { background: var(--danger); }
.attn-dot-warn[b-1n7wb8mlfd] { background: var(--warn); }

.attn-label[b-1n7wb8mlfd] {
    font-weight: 500;
}

.attn-value[b-1n7wb8mlfd] {
    margin-left: auto;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.attn-chevron[b-1n7wb8mlfd] {
    color: var(--ink-faint);
    font-size: 1.1rem;
    line-height: 1;
}

.attn-allclear[b-1n7wb8mlfd] {
    margin: 0;
    color: var(--ink-soft);
    font-size: .92rem;
}

.attn-check[b-1n7wb8mlfd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ok-soft);
    color: var(--ok);
    font-size: .75rem;
    font-weight: 700;
    margin-right: .35rem;
}

/* ==== Lower band: recent activity + quick actions ==== */

.home-lower[b-1n7wb8mlfd] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 900px) {
    .home-lower[b-1n7wb8mlfd] {
        grid-template-columns: 1fr;
    }
}

.home-section-heading[b-1n7wb8mlfd] {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 .6rem;
}

.home-activity[b-1n7wb8mlfd],
.home-quick[b-1n7wb8mlfd] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.25rem 1.25rem;
}

.home-activity-empty[b-1n7wb8mlfd] {
    margin: 0;
    color: var(--ink-faint);
    font-size: .92rem;
}

.activity-list[b-1n7wb8mlfd] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.activity-row[b-1n7wb8mlfd] {
    display: flex;
    align-items: baseline;
    gap: .85rem;
    padding: .45rem 0;
}

.activity-row + .activity-row[b-1n7wb8mlfd] {
    border-top: 1px solid var(--border);
}

.activity-when[b-1n7wb8mlfd] {
    flex: none;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-faint);
}

.activity-text[b-1n7wb8mlfd] {
    font-size: .92rem;
    color: var(--ink);
    min-width: 0;
}

.activity-sep[b-1n7wb8mlfd] {
    color: var(--ink-faint);
    margin: 0 .15rem;
}

.activity-action[b-1n7wb8mlfd] {
    color: var(--ink-soft);
    margin-left: .35rem;
}

.quick-actions[b-1n7wb8mlfd] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.quick-actions .btn[b-1n7wb8mlfd] {
    text-align: left;
}

/* One restrained fade+rise on load, gated by prefers-reduced-motion - the single
   deliberate moment of motion this theme allows itself. No scan-line, no sweep,
   nothing else animates. */
@media (prefers-reduced-motion: no-preference) {
    .stat-tile[b-1n7wb8mlfd] {
        opacity: 0;
        animation: slateRise-b-1n7wb8mlfd 150ms ease-out forwards;
    }

    .stat-tile-grid .stat-tile:nth-child(1)[b-1n7wb8mlfd] { animation-delay: 0ms; }
    .stat-tile-grid .stat-tile:nth-child(2)[b-1n7wb8mlfd] { animation-delay: 40ms; }
    .stat-tile-grid .stat-tile:nth-child(3)[b-1n7wb8mlfd] { animation-delay: 80ms; }
    .stat-tile-grid .stat-tile:nth-child(4)[b-1n7wb8mlfd] { animation-delay: 120ms; }
    .stat-tile-grid .stat-tile:nth-child(5)[b-1n7wb8mlfd] { animation-delay: 160ms; }
    .stat-tile-grid .stat-tile:nth-child(6)[b-1n7wb8mlfd] { animation-delay: 200ms; }
    .stat-tile-grid .stat-tile:nth-child(7)[b-1n7wb8mlfd] { animation-delay: 240ms; }
}

@keyframes slateRise-b-1n7wb8mlfd {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.home-hero[b-1n7wb8mlfd] {
    text-align: center;
    padding: 4rem 1rem;
}

.home-hero h1[b-1n7wb8mlfd] {
    font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    overflow-wrap: break-word;
}

/* Carried forward from both prior themes: the brand headline never had a
   narrow-viewport check before M7's landing-page build - keep the fix. */
@media (max-width: 560px) {
    .home-hero h1[b-1n7wb8mlfd] {
        font-size: 1.8rem;
    }
}

.home-hero-eyebrow[b-1n7wb8mlfd] {
    font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    font-weight: 600;
    font-size: .85rem;
    color: var(--accent);
    margin: 0 0 .85rem;
}

.home-hero-tagline[b-1n7wb8mlfd] {
    max-width: 640px;
    margin: 1.25rem auto 0;
    color: var(--ink-soft);
    font-size: 1.05rem;
    line-height: 1.6;
}

.home-hero-actions[b-1n7wb8mlfd] {
    margin-top: 1.5rem;
    display: flex;
    gap: .75rem;
    justify-content: center;
}

/* ==== Landing sections (anonymous visitors only) ==== */

.landing-section[b-1n7wb8mlfd] {
    margin: 5rem 0;
}

.landing-eyebrow[b-1n7wb8mlfd] {
    font-size: 1.4rem;
    text-align: center;
    margin: 0 0 2rem;
}

/* Feature grid - 2x2 desktop / 1 col mobile. */
.feature-grid[b-1n7wb8mlfd] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 700px) {
    .feature-grid[b-1n7wb8mlfd] {
        grid-template-columns: 1fr;
    }
}

.feature-card[b-1n7wb8mlfd] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem 1.5rem 1.75rem;
}

.feature-card h3[b-1n7wb8mlfd] {
    font-size: 1.05rem;
    margin: 0 0 .5rem;
}

.feature-card p[b-1n7wb8mlfd] {
    margin: 0;
    color: var(--ink-soft);
    font-size: .92rem;
    line-height: 1.55;
}

/* Plain Font Awesome glyph on an accent-tinted rounded square - ordinary SaaS
   feature-icon treatment, replacing the retired themes' bespoke CSS-drawn marks
   (a crosshair/survey-benchmark glyph among them - deliberately not reused here). */
.feature-icon[b-1n7wb8mlfd] {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

@media (prefers-reduced-motion: no-preference) {
    .feature-card[b-1n7wb8mlfd] {
        opacity: 0;
        animation: slateRise-b-1n7wb8mlfd 150ms ease-out forwards;
    }

    .feature-grid .feature-card:nth-child(1)[b-1n7wb8mlfd] { animation-delay: 0ms; }
    .feature-grid .feature-card:nth-child(2)[b-1n7wb8mlfd] { animation-delay: 40ms; }
    .feature-grid .feature-card:nth-child(3)[b-1n7wb8mlfd] { animation-delay: 80ms; }
    .feature-grid .feature-card:nth-child(4)[b-1n7wb8mlfd] { animation-delay: 120ms; }
}

/* How it works - 3 steps, horizontal desktop / stacked mobile. */
.steps-row[b-1n7wb8mlfd] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 700px) {
    .steps-row[b-1n7wb8mlfd] {
        grid-template-columns: 1fr;
    }
}

.step[b-1n7wb8mlfd] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem 1.5rem 1.75rem;
}

.step-number[b-1n7wb8mlfd] {
    display: block;
    font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--accent);
    margin-bottom: .5rem;
}

.step h3[b-1n7wb8mlfd] {
    font-size: 1.02rem;
    margin: 0 0 .5rem;
}

.step p[b-1n7wb8mlfd] {
    margin: 0;
    color: var(--ink-soft);
    font-size: .92rem;
    line-height: 1.55;
}

/* Closing CTA band - subtle panel background, centered. Accent-soft (was
   --bg-subtle gray) - 2026-07-24: ties this section into the same
   accent-tinted color story as the sidebar/table chrome instead of a flat
   gray, and reinforces the sign-up CTA with the brand color. */
.landing-cta[b-1n7wb8mlfd] {
    background: var(--accent-soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 3.5rem 1.5rem;
    text-align: center;
}

.landing-cta-heading[b-1n7wb8mlfd] {
    font-size: 1.7rem;
    margin: 0 0 1.5rem;
}
/* /Components/Pages/People/PersonChart.razor.rz.scp.css */
/* PersonChart-only styles.

   The node-label rules that used to live here (.chart-node and friends) moved to app.less on
   2026-08-22. They were written for this component and then reused by /tree/chart, which reused the
   class NAMES and got none of the styles - Blazor scoped CSS rewrites its selectors with a
   per-component attribute, so it silently does not apply anywhere else. The visible result was the
   thing the clipping rule existed to prevent: long Croatian surnames overflowing their boxes and
   colliding with the next generation. One definition, in app.less, for both charts.

   What stays here is what only this component has: the pan/zoom affordances driven by
   PersonChart.razor.js. */

/* Pan/zoom affordances. Applied only once PersonChart.razor.js has initialised (.is-interactive), so
   without JS the chart shows no gesture cues it cannot honour -- it just scrolls in its box. */
svg.is-interactive[b-5n1ghuj9n7] { cursor: grab; touch-action: none; }
svg.is-interactive.is-panning[b-5n1ghuj9n7] { cursor: grabbing; }