@import 'StashStock.Blazor.Client.w0jcdl6svo.bundle.scp.css';
@import '_content/LabelForge.Designer/LabelForge.Designer.qe7bkk9gzm.bundle.scp.css';

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

main[b-sx6ugmpnls] {
    flex: 1;
    /* Flex items default to min-width: auto (content-size), which
       lets <main> grow beyond the viewport when a child (a wide
       entity grid table, for example) is wider than the available
       cross-axis. min-width: 0 lets the in-card scroll container
       clip horizontally instead. */
    min-width: 0;
    /* Pin main to viewport height + clip overflow so only one
       scrollbar exists at a time: either .content scrolls (regular
       pages) OR a grid card's body scrolls (entity grids), never
       both plus the document body. */
    height: 100vh;
    overflow: hidden;
    background: var(--c-page-bg);
    display: flex;
    flex-direction: column;
}

.sidebar[b-sx6ugmpnls] {
    /* Brand HeroDark (Common tokens). Solid fill -- StashStock brand
       surfaces never use linear- or radial-gradient. */
    background: var(--c-sidebar-bg);
}

.top-row[b-sx6ugmpnls] {
    background: var(--c-topbar-bg);
    border-bottom: 1px solid var(--c-topbar-border);
    justify-content: flex-start;
    height: 3.75rem;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* .uid-menu-item is excluded: the account-menu links carry their own
   full-width padding/hover treatment, and the 1.5rem margin here would
   inset their hover highlight from the menu edge. */
.top-row[b-sx6ugmpnls]  a:not(.uid-menu-item), .top-row[b-sx6ugmpnls]  .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
}

.top-row[b-sx6ugmpnls]  a:not(.uid-menu-item):hover, .top-row[b-sx6ugmpnls]  .btn-link:hover {
    text-decoration: underline;
}

.portal-title[b-sx6ugmpnls] {
    font-family: inherit;
    font-weight: 700;
    color: var(--c-portal-title);
    font-size: 1rem;
}

.top-row-facility[b-sx6ugmpnls] {
    font-size: 0.85rem;
    color: var(--c-facility-text);
    padding: 0.35rem 0.85rem;
    background: var(--c-page-bg);
    border-radius: 8px;
    border: 1px solid var(--c-topbar-border);
    font-weight: 500;
}

.content[b-sx6ugmpnls] {
    padding-top: 1.25rem;
    flex: 1;
    min-height: 0;
    /* Regular pages get vertical scroll here (page-level scroll
       moves inside main now that main itself is overflow:hidden).
       Grid pages opt OUT of this via the `:has(.ss-grid-card)`
       override below -- their grid card claims the remaining height
       and scrolls internally instead. */
    overflow-y: auto;
}

/* When the page hosts an entity grid (`.ss-grid-card`), turn
   .content into a flex column with no scroll so the grid card can
   size up to the remaining article height. Single scrollbar then
   lives inside the grid card body. Top + bottom padding pinned to
   1rem so the spacing chain reads uniformly (1rem above the hero,
   1rem hero->card via DashboardHeader's `mb-3`, 1rem below the
   card). */
.content:has(.ss-grid-card)[b-sx6ugmpnls] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: 1rem;
    padding-bottom: 1rem !important;
}

@media (max-width: 640.98px) {
    .top-row[b-sx6ugmpnls] {
        justify-content: space-between;
    }

    .top-row[b-sx6ugmpnls]  a:not(.uid-menu-item), .top-row[b-sx6ugmpnls]  .btn-link {
        margin-left: 0;
    }
}

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

    .sidebar[b-sx6ugmpnls] {
        width: 248px;
        height: 100vh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
    }

    .top-row[b-sx6ugmpnls] {
        position: sticky;
        top: 0;
        /* Must exceed the entity-grid sticky stack (filter row z:4,
           action header z:3, thead z:2) so the topbar -- and any of
           its descendants like the FacilityStatusIndicator dropdown
           popout -- always renders above the data card chrome. */
        z-index: 50;
    }

    .top-row[b-sx6ugmpnls], article[b-sx6ugmpnls] {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

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

#blazor-error-ui .dismiss[b-sx6ugmpnls] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/NavGroup.razor.rz.scp.css */
/* --- Accordion group header ---
   Full-bleed tinted "band": a section header is a different SHAPE from a
   navigable link pill (which is inset + rounded), so the two never read as
   the same thing. The resting band uses --c-nav-band; hover deepens it to
   the standard --c-nav-hover-bg. */
.nav-group-header[b-ydfo5mw5c2] {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
    height: 2.4rem;
    margin: 0.6rem 0 0.15rem;
    padding: 0 1.25rem;
    background: var(--c-nav-band);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-nav-fg-strong);
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.nav-group-header:hover[b-ydfo5mw5c2] {
    background: var(--c-nav-hover-bg);
    color: var(--c-nav-fg-strong);
}

/* Active section: 3px Primary inset accent on the band. The band already
   carries a Primary-tinted icon on every header, so the active signal is the
   accent bar rather than an icon recolor. */
.nav-group-header.nav-group-active[b-ydfo5mw5c2] {
    box-shadow: inset 3px 0 0 var(--c-nav-active-accent);
}

.nav-group-header:focus-visible[b-ydfo5mw5c2] {
    outline: 2px solid var(--c-nav-active-accent);
    outline-offset: 2px;
}

.nav-group-header .nav-icon[b-ydfo5mw5c2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;
    flex-shrink: 0;
    /* Primary-tinted on every header — the leading accent of the band. */
    color: var(--c-nav-active-accent);
    opacity: 1;
}

.nav-group-title[b-ydfo5mw5c2] {
    flex: 1;
    text-align: left;
}

.nav-chevron[b-ydfo5mw5c2] {
    margin-left: auto;
    color: var(--c-nav-chevron);
    font-size: 0.7rem;
    transition: transform 0.15s;
}

.nav-chevron-open[b-ydfo5mw5c2] {
    transform: rotate(180deg);
}

/* --- Group panel (projected NavMenu children) ---
   Items are indented so they read as nested under the band above them. */
.nav-group-panel[b-ydfo5mw5c2] {
    padding-left: 0.75rem;
}

.nav-group-panel[b-ydfo5mw5c2]  .nav-item .nav-link {
    height: 2.35rem;
    line-height: 2.35rem;
    font-size: 0.85rem;
}

/* --- Admin chip --- */
.nav-chip-admin[b-ydfo5mw5c2] {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
    /* The flex-1 title absorbs all free space, so the chevron's auto
       margin resolves to 0 -- the right margin here is the only gap
       between chip and chevron. */
    margin: 0 0.6rem 0 0.5rem;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: var(--c-nav-soon-bg);
    color: var(--c-nav-soon-fg);
}

/* --- Collapsed rail --- */
.nav-rail-item[b-ydfo5mw5c2] {
    position: relative;
    margin: 0.15rem 0.75rem;
}

.nav-rail-btn[b-ydfo5mw5c2] {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    color: var(--c-nav-fg);
    font-size: 1.05rem;
    transition: background 0.15s, color 0.15s;
}

.nav-rail-btn:hover[b-ydfo5mw5c2] {
    background: var(--c-nav-hover-bg);
    color: var(--c-nav-fg-strong);
}

.nav-rail-btn:focus-visible[b-ydfo5mw5c2] {
    outline: 2px solid var(--c-nav-active-accent);
    outline-offset: 2px;
}

.nav-rail-item.nav-group-active > .nav-rail-btn[b-ydfo5mw5c2] {
    background: var(--c-nav-active-bg);
    color: var(--c-nav-active-accent);
    /* Inset shadow instead of border-left: the accent must not change
       the box's layout or the icon drifts off the rail column. */
    box-shadow: inset 3px 0 0 var(--c-nav-active-accent);
}

.nav-rail-flyout[b-ydfo5mw5c2] {
    position: absolute;
    left: 56px;
    top: -6px;
    min-width: 224px;
    background: var(--c-nav-flyout-bg);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    padding: 0.5rem 0;
    z-index: 60;
    display: none;
}

/* Invisible bridge over the 12px gap between rail button and flyout
   so the hover doesn't drop while the pointer crosses. */
.nav-rail-flyout[b-ydfo5mw5c2]::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 0;
    width: 12px;
    height: 100%;
}

.nav-rail-item:hover .nav-rail-flyout[b-ydfo5mw5c2],
.nav-rail-pinned .nav-rail-flyout[b-ydfo5mw5c2] {
    display: block;
}

.nav-fly-title[b-ydfo5mw5c2] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-nav-section);
    padding: 0.45rem 1rem 0.35rem;
}

.nav-rail-flyout[b-ydfo5mw5c2]  .nav-item .nav-link {
    height: 2.3rem;
    line-height: 2.3rem;
    font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
    .nav-chevron[b-ydfo5mw5c2],
    .nav-group-header[b-ydfo5mw5c2],
    .nav-rail-btn[b-ydfo5mw5c2] {
        transition: none;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-uj0nai7gqj] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid var(--c-nav-toggler-border);
    /* SVG `stroke=` is URL-encoded inside the data: URL and can't reference
       a CSS var; the stroke color tracked separately as --c-nav-toggler-stroke
       for Phase 2 token reconciliation. */
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem var(--c-nav-toggler-bg);
}

.navbar-toggler:checked[b-uj0nai7gqj] {
    background-color: var(--c-nav-toggler-checked-bg);
}

/* --- Sidebar scrollbar ---
   Blend the sidebar scrollbar into the HeroDark surface. Default UA
   scrollbar reads as a bright grey strip against the dark sidebar bg
   which looks like a UI glitch. Transparent track + low-opacity white
   thumb keeps the affordance discoverable on hover without competing
   with the nav links. */
.nav-scrollable[b-uj0nai7gqj] {
    scrollbar-width: thin;
    scrollbar-color: var(--c-nav-scrollbar-thumb) transparent;
}
.nav-scrollable[b-uj0nai7gqj]::-webkit-scrollbar {
    width: 8px;
}
.nav-scrollable[b-uj0nai7gqj]::-webkit-scrollbar-track {
    background: transparent;
}
.nav-scrollable[b-uj0nai7gqj]::-webkit-scrollbar-thumb {
    background-color: var(--c-nav-scrollbar-thumb);
    border-radius: 4px;
}
.nav-scrollable[b-uj0nai7gqj]::-webkit-scrollbar-thumb:hover {
    background-color: var(--c-nav-scrollbar-thumb-hover);
}

.top-row[b-uj0nai7gqj] {
    min-height: 3.75rem;
    background: transparent;
    border-bottom: 1px solid var(--c-nav-rule);
}

.navbar-brand[b-uj0nai7gqj] {
    font-size: 1.1rem;
}

/* --- Nav icons --- */
.nav-icon[b-uj0nai7gqj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;
    flex-shrink: 0;
    opacity: 0.7;
}

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

/* --- Section labels --- */
.nav-section-label[b-uj0nai7gqj] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-nav-section);
    margin-top: 1.5rem;
    margin-bottom: 0.35rem;
    padding-left: 1.25rem !important;
}

/* --- Coming soon ---
   Was `opacity: 0.4` on the parent which compounded with rgba text colors
   and dropped contrast to ~1:1 (axe-fail). Use explicit rgba values that
   already read as de-emphasized but still meet WCAG AA against the dark
   sidebar bg. `pointer-events: none` keeps the items non-interactive. */
.nav-coming-soon[b-uj0nai7gqj] {
    pointer-events: none;
}
.nav-coming-soon .nav-link[b-uj0nai7gqj] {
    color: var(--c-nav-fg-muted); /* ~6:1 on sidebar bg */
}
.nav-coming-soon .nav-link[b-uj0nai7gqj] {
    flex-wrap: nowrap;
}
.nav-coming-soon .nav-link[b-uj0nai7gqj]::after {
    content: "soon";
    font-size: 0.65rem;
    font-weight: 600;
    /* Without this the badge inherits the nav-link's 2.65rem
       line-height and balloons to full row height. */
    line-height: 1.2;
    margin-left: auto;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    background: var(--c-nav-soon-bg);
    color: var(--c-nav-soon-fg);
    letter-spacing: 0.04em;
    flex-shrink: 0;
    align-self: center;
}

/* --- Nav items --- */
.nav-item[b-uj0nai7gqj] {
    font-size: 0.9rem;
    padding-bottom: 0.1rem;
}

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

.nav-item[b-uj0nai7gqj]  .nav-link {
    color: var(--c-nav-fg);
    background: none;
    border: none;
    border-radius: 8px;
    height: 2.65rem;
    display: flex;
    align-items: center;
    line-height: 2.65rem;
    width: 100%;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.nav-item[b-uj0nai7gqj]  a.active {
    /* Brand Primary tint over HeroDark sidebar. Solid fill (no gradient)
       and a 3px Primary border accent that aligns with tokens.md. */
    background: var(--c-nav-active-bg);
    color: var(--c-nav-active-fg);
    border-left: 3px solid var(--c-nav-active-accent);
    margin-left: -3px;
    font-weight: 600;
}

.nav-item[b-uj0nai7gqj]  a.active .nav-icon {
    color: var(--c-nav-active-accent);
}

.nav-item[b-uj0nai7gqj]  .nav-link:hover {
    background: var(--c-nav-hover-bg);
    color: var(--c-nav-fg-strong);
}

/* --- Spacer / Logout --- */
.nav-spacer[b-uj0nai7gqj] {
    flex: 1;
    min-height: 2rem;
}

.nav-logout[b-uj0nai7gqj] {
    border-top: 1px solid var(--c-nav-rule);
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    margin-top: auto;
}

.nav-logout-btn[b-uj0nai7gqj] {
    color: var(--c-nav-fg-dim) !important;
    background: none;
    border: none;
    border-radius: 8px;
    height: 2.65rem;
    display: flex;
    align-items: center;
    line-height: 2.65rem;
    width: 100%;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    /* 1rem to match Bootstrap's .nav-link side padding -- keeps the
       Sign Out icon in the same column as Settings/Collapse. */
    padding: 0 1rem;
    transition: background 0.15s, color 0.15s;
}

.nav-logout-btn:hover[b-uj0nai7gqj] {
    background: var(--c-nav-logout-hover-bg);
    color: var(--c-nav-logout-hover-fg) !important;
}

/* --- Responsive --- */
.nav-scrollable[b-uj0nai7gqj] {
    display: none;
}

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

@media (min-width: 641px) {
    .navbar-toggler[b-uj0nai7gqj] {
        display: none;
    }

    .nav-scrollable[b-uj0nai7gqj] {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 3.75rem);
        overflow-y: auto;
    }

    .nav-scrollable > nav[b-uj0nai7gqj] {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* Rail flyouts hang outside the 68px sidebar -- the collapsed
       scroll container must not clip them. */
    .nav-scrollable.nav-collapsed[b-uj0nai7gqj] {
        overflow-y: visible;
        overflow: visible;
    }
}

/* --- Collapsed rail (sidebar-level pieces) --- */
.nav-rail-mark[b-uj0nai7gqj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--c-nav-active-accent);
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
}

/* Pinned flat links (Dashboard / Labels / AI / Settings / Sign Out)
   and the collapse toggle render icon-only on the rail, pinned to the
   same 44px column as the group rail buttons (NavGroup: 0.75rem item
   margin + 44px button). !important beats Bootstrap's px-3. */
.nav-collapsed .nav-item[b-uj0nai7gqj] {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* NavLink renders the <a> itself, so it never gets this file's scope
   attribute -- bare .nav-rail-link compiles to .nav-rail-link[b-...]
   and matches nothing. Route through a scoped ancestor + ::deep. */
.nav-collapsed .nav-item[b-uj0nai7gqj]  .nav-rail-link {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
}

/* Active accent as inset shadow (not border-left + negative margin,
   which the expanded a.active rule uses) so the icon stays on the
   rail column. */
.nav-collapsed .nav-item[b-uj0nai7gqj]  .nav-rail-link.active {
    border-left: 0;
    margin-left: 0;
    box-shadow: inset 3px 0 0 var(--c-nav-active-accent);
}

.nav-rail-link .nav-rail-hide[b-uj0nai7gqj] {
    display: none;
}

.nav-rail-link .nav-icon[b-uj0nai7gqj] {
    margin-right: 0;
}

/* Match the group rail buttons, which render at full opacity: without
   this the pinned links keep the expanded-mode 0.7 icon multiplier and
   read darker than the group icons on the rail. */
.nav-collapsed .nav-item[b-uj0nai7gqj]  .nav-rail-link .nav-icon {
    opacity: 1;
}

/* Brand mark: top-row ps-3 (1rem) + container-fluid (0.75rem) put the
   32px mark's center at ~44px; pull it back onto the 34px rail icon
   column. */
.nav-rail-mark[b-uj0nai7gqj] {
    margin-left: -9px;
}

.nav-collapse-toggle[b-uj0nai7gqj] {
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    /* Match Bootstrap's .nav-link 1rem side padding so the chevron
       lines up with the Settings / Sign Out icons above and below. */
    padding: 0 1rem;
    color: var(--c-nav-fg-dim);
}

.nav-collapse-toggle:focus-visible[b-uj0nai7gqj] {
    outline: 2px solid var(--c-nav-active-accent);
    outline-offset: 2px;
}

/* Click-away target while a rail flyout is pinned. Sits under the
   flyout (z 60, in NavGroup.razor.css) but over page content. */
.nav-flyout-backdrop[b-uj0nai7gqj] {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: transparent;
}

/* Rail is desktop/tablet only -- mobile keeps the hamburger. */
@media (max-width: 640.98px) {
    .nav-collapse-toggle[b-uj0nai7gqj] {
        display: none;
    }
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
.public-page[b-y5t3dhom9g] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #141e2b 0%, #1a3040 40%, #1a3a30 70%, #162028 100%);
    background-attachment: fixed;
}

.public-header[b-y5t3dhom9g] {
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0 2rem;
    height: 56px;
    display: flex;
    align-items: center;
}

.public-header-inner[b-y5t3dhom9g] {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.public-logo[b-y5t3dhom9g] {
    text-decoration: none;
}

.public-nav[b-y5t3dhom9g] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.public-nav-link[b-y5t3dhom9g] {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.15s;
}

.public-nav-link:hover[b-y5t3dhom9g] {
    color: #fff;
}

.public-nav-login[b-y5t3dhom9g] {
    background: rgba(40, 174, 96, 0.9);
    color: #fff !important;
    padding: 0.4rem 1.1rem;
    border-radius: 6px;
}

.public-nav-login:hover[b-y5t3dhom9g] {
    background: rgba(40, 174, 96, 1);
}

.public-main[b-y5t3dhom9g] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 2rem;
}

.public-footer[b-y5t3dhom9g] {
    padding: 1.25rem 2rem;
    text-align: center;
    color: rgba(255,255,255,0.3);
    font-size: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Connection dialog -- portal design system.
   Replaces the .NET template styling, which shipped Bootstrap-blue buttons
   (#6b9ed2) and a blue spinner (#0087ff), neither of which exists in the
   StashStock palette.

   The visibility contract below is owned by the Blazor runtime, not by this
   file: it toggles components-reconnect-show / -retrying / -failed /
   -paused / -resume-failed on the <dialog>. Keep the selector set intact --
   note that -retrying and -failed also set display on the dialog ITSELF,
   which is what makes it visible in those two states. */

.components-reconnect-first-attempt-visible[b-16lyln36ea],
.components-reconnect-repeated-attempt-visible[b-16lyln36ea],
.components-reconnect-failed-visible[b-16lyln36ea],
.components-pause-visible[b-16lyln36ea],
.components-resume-failed-visible[b-16lyln36ea],
.components-rejoining-animation[b-16lyln36ea] {
    display: none;
}

/* Exactly one state's copy may be visible at a time. The runtime ADDS
   state classes rather than swapping them -- a dialog deep into an
   outage can carry -show, -retrying and -paused simultaneously -- so
   every state's copy is suppressed once any LATER state's class is
   present. Precedence, earliest to latest:
   show < retrying < failed < paused < resume-failed. */
#components-reconnect-modal.components-reconnect-show:not(.components-reconnect-retrying):not(.components-reconnect-failed):not(.components-reconnect-paused):not(.components-reconnect-resume-failed) .components-reconnect-first-attempt-visible[b-16lyln36ea],
#components-reconnect-modal.components-reconnect-show:not(.components-reconnect-failed):not(.components-reconnect-paused):not(.components-reconnect-resume-failed) .components-rejoining-animation[b-16lyln36ea],
#components-reconnect-modal.components-reconnect-retrying[b-16lyln36ea],
#components-reconnect-modal.components-reconnect-retrying:not(.components-reconnect-failed):not(.components-reconnect-paused):not(.components-reconnect-resume-failed) .components-reconnect-repeated-attempt-visible[b-16lyln36ea],
#components-reconnect-modal.components-reconnect-retrying:not(.components-reconnect-failed):not(.components-reconnect-paused):not(.components-reconnect-resume-failed) .components-rejoining-animation[b-16lyln36ea],
#components-reconnect-modal.components-reconnect-failed[b-16lyln36ea],
#components-reconnect-modal.components-reconnect-failed:not(.components-reconnect-paused):not(.components-reconnect-resume-failed) .components-reconnect-failed-visible[b-16lyln36ea],
#components-reconnect-modal.components-reconnect-paused:not(.components-reconnect-resume-failed) .components-pause-visible[b-16lyln36ea],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-16lyln36ea] {
    display: block;
}

/* ── Surface ───────────────────────────────────────────────────────────── */

#components-reconnect-modal[b-16lyln36ea] {
    width: min(360px, calc(100vw - 2rem));
    margin: 18vh auto;
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--ss-surface, #fff);
    color: var(--ss-text, #374151);
    /* Floating step of the shadow scale -- symmetric, because this is a
       centred dialog and not the right-hand drawer .ss-action-modal is. */
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
    opacity: 0;
    animation: components-reconnect-modal-fadeOutOpacity-b-16lyln36ea 0.5s both;
}

#components-reconnect-modal[open][b-16lyln36ea] {
    animation:
        components-reconnect-modal-slideUp-b-16lyln36ea 1.5s cubic-bezier(0.05, 0.89, 0.25, 1.02) 0.3s,
        components-reconnect-modal-fadeInOpacity-b-16lyln36ea 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

/* Hardcoded, NOT var(--ss-*): ::backdrop does not reliably inherit custom
   properties from its originating element across browsers. Value matches
   .ss-action-modal-backdrop in app.css -- keep the two in step. */
#components-reconnect-modal[b-16lyln36ea]::backdrop {
    background-color: rgba(15, 23, 42, 0.45);
    animation: components-reconnect-modal-fadeInOpacity-b-16lyln36ea 0.5s ease-in-out;
    opacity: 1;
}

/* ── Status accent ─────────────────────────────────────────────────────────
   3px strip recolours per state so "still trying" and "gave up" are not the
   same shape. Colour is never the only signal -- the heading changes too
   (tokens.md: status meaning is always conveyed by text as well). */

.rc-accent[b-16lyln36ea] {
    height: 3px;
    /* Literals, not var(): app.css defines no semantic info/warning/error
       token at :root -- only the --c-badge-* pairs, which are badge fills.
       Values are SyncingBlue / Warning / BadgeRed from tokens.md. */
    background: #1565c0;
}

#components-reconnect-modal.components-reconnect-retrying .rc-accent[b-16lyln36ea] {
    background: #bf360c;                       /* Warning */
}

#components-reconnect-modal.components-reconnect-failed .rc-accent[b-16lyln36ea],
#components-reconnect-modal.components-reconnect-resume-failed .rc-accent[b-16lyln36ea] {
    background: #c62828;                       /* BadgeRed */
}

/* ── Layout ───────────────────────────────────────────────────────────── */

.components-reconnect-container[b-16lyln36ea] {
    display: flex;
    flex-direction: column;
}

.rc-head[b-16lyln36ea] {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--ss-border, #e5e7eb);
}

.rc-title[b-16lyln36ea] {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    color: var(--ss-text, #374151);
}

.rc-body[b-16lyln36ea] {
    padding: 1.1rem 1.25rem;
    text-align: center;
}

.rc-lead[b-16lyln36ea] {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    color: var(--ss-text, #374151);
}

.rc-note[b-16lyln36ea] {
    font-size: 0.82rem;
    margin: 0.15rem 0 0;
    color: var(--ss-text-muted, #535964);
}

#components-seconds-to-next-attempt[b-16lyln36ea] {
    font-weight: 700;
}

/* Footer collapses to nothing in the two states with no button, because
   every child is display:none and there is no gap to leave behind. */
.rc-foot[b-16lyln36ea] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 0 1.25rem;
}

#components-reconnect-modal.components-reconnect-failed .rc-foot[b-16lyln36ea],
#components-reconnect-modal.components-reconnect-paused .rc-foot[b-16lyln36ea],
#components-reconnect-modal.components-reconnect-resume-failed .rc-foot[b-16lyln36ea] {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--ss-border, #e5e7eb);
    background: var(--ss-surface-subtle, #f8fafc);
}

/* ── Buttons -- Button State Matrix, tokens.md Web Foundations ─────────── */

.rc-btn[b-16lyln36ea] {
    border-radius: 8px;
    padding: 0.5rem 1.1rem;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.rc-btn-primary[b-16lyln36ea] {
    background: var(--ss-light-green, #0DB14B);
    border: 1px solid var(--ss-light-green, #0DB14B);
    color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.rc-btn-primary:hover[b-16lyln36ea],
.rc-btn-primary:active[b-16lyln36ea] {
    background: var(--ss-light-green-hover, #0a9842);
    border-color: var(--ss-light-green-hover, #0a9842);
}

.rc-btn-secondary[b-16lyln36ea] {
    background: #fff;
    border: 1.5px solid #adb5bd;               /* SecondaryBorder */
    color: #495057;                            /* SecondaryText */
}

.rc-btn-secondary:hover[b-16lyln36ea],
.rc-btn-secondary:active[b-16lyln36ea] {
    background: #495057;
    border-color: #495057;
    color: #fff;
}

.rc-btn:focus-visible[b-16lyln36ea] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);   /* FocusRing */
}

/* ── Spinner ──────────────────────────────────────────────────────────────
   Single Primary-tinted ring on a Separator track, replacing the template's
   two expanding #0087ff circles. Kept at the class name the runtime toggles. */

.components-rejoining-animation[b-16lyln36ea] {
    width: 44px;
    height: 44px;
    margin: 0 auto 0.75rem;
    position: relative;
}

.components-rejoining-animation div[b-16lyln36ea] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid var(--ss-border, #e5e7eb);
    border-top-color: var(--ss-light-green, #0DB14B);
    animation: components-rejoining-spin-b-16lyln36ea 0.9s linear infinite;
}

/* Second ring is decorative depth only -- offset and slower. */
.components-rejoining-animation div:nth-child(2)[b-16lyln36ea] {
    inset: 7px;
    border-width: 2px;
    border-top-color: var(--ss-limeade, #8CC540);
    animation-duration: 1.4s;
    animation-direction: reverse;
}

@keyframes components-rejoining-spin-b-16lyln36ea {
    to { transform: rotate(360deg); }
}

/* Slow rather than stop: a frozen spinner reads as "hung", which would be
   dishonest while the runtime is still retrying. The template ignored this. */
@media (prefers-reduced-motion: reduce) {
    .components-rejoining-animation div[b-16lyln36ea] {
        animation-duration: 2.6s;
    }

    .components-rejoining-animation div:nth-child(2)[b-16lyln36ea] {
        animation-duration: 3.4s;
    }

    #components-reconnect-modal[b-16lyln36ea],
    #components-reconnect-modal[open][b-16lyln36ea],
    #components-reconnect-modal[b-16lyln36ea]::backdrop {
        animation: none;
        opacity: 1;
    }
}

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

@keyframes components-reconnect-modal-fadeInOpacity-b-16lyln36ea {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-16lyln36ea {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
/* /Components/Pages/Login.razor.rz.scp.css */
.login-container[b-v0nwsdrxqt] {
    display: flex;
    gap: 4rem;
    align-items: center;
    max-width: 1080px;
    width: 100%;
}

.login-card[b-v0nwsdrxqt] {
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.12);
    border-top: 2px solid rgba(40, 200, 100, 0.5);
    border-radius: 20px;
    padding: 2.25rem 2.5rem;
    width: 420px;
    flex-shrink: 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 60px rgba(40, 174, 96, 0.06);
}

.login-header[b-v0nwsdrxqt] {
    text-align: center;
    margin-bottom: 1.75rem;
}

.login-header img[b-v0nwsdrxqt] {
    height: 38px !important;
}

.login-subtitle[b-v0nwsdrxqt] {
    color: rgba(255,255,255,0.6);
    font-size: 0.95rem;
    margin-top: 0.85rem;
    margin-bottom: 0;
}

.login-form[b-v0nwsdrxqt] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-group[b-v0nwsdrxqt] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-label-sm[b-v0nwsdrxqt] {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[b-v0nwsdrxqt] .form-control {
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

[b-v0nwsdrxqt] .form-control::placeholder {
    color: rgba(255,255,255,0.38);
}

[b-v0nwsdrxqt] .form-control:focus {
    background: rgba(255,255,255,0.11);
    border-color: rgba(52, 211, 102, 0.7);
    box-shadow: 0 0 0 3px rgba(52, 211, 102, 0.18);
    color: #fff;
    outline: none;
}

.btn-login[b-v0nwsdrxqt] {
    background: linear-gradient(135deg, #28ae60 0%, #34d068 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.85rem;
    font-weight: 700;
    font-size: 1rem;
    margin-top: 0.5rem;
    transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
    box-shadow: 0 2px 12px rgba(40, 174, 96, 0.3);
    cursor: pointer;
}

.btn-login:hover[b-v0nwsdrxqt] {
    filter: brightness(1.1);
    box-shadow: 0 4px 20px rgba(40, 174, 96, 0.45);
    color: #fff;
    transform: translateY(-1px);
}

.btn-login:active[b-v0nwsdrxqt] {
    transform: translateY(0);
    filter: brightness(0.95);
}

.btn-login:disabled[b-v0nwsdrxqt] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

.login-error[b-v0nwsdrxqt] {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
}

.login-success[b-v0nwsdrxqt] {
    background: rgba(52, 211, 102, 0.14);
    border: 1px solid rgba(52, 211, 102, 0.35);
    color: #86efac;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
}

.login-help-text[b-v0nwsdrxqt] {
    color: rgba(255,255,255,0.65);
    font-size: 0.92rem;
    margin: 0;
}

.login-links[b-v0nwsdrxqt] {
    text-align: center;
    margin-top: 0.5rem;
}

.login-links a[b-v0nwsdrxqt] {
    color: #5ce89a;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.15s;
}

.login-links a:hover[b-v0nwsdrxqt] {
    color: #86efac;
    text-decoration: underline;
}

/* Marketing side */
.login-marketing[b-v0nwsdrxqt] {
    color: #fff;
    flex: 1;
}

.login-marketing-title[b-v0nwsdrxqt] {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #ffffff 0%, #5ce89a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-features[b-v0nwsdrxqt] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.login-feature[b-v0nwsdrxqt] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.login-feature-icon[b-v0nwsdrxqt] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(40, 174, 96, 0.3), rgba(52, 211, 102, 0.2));
    color: #5ce89a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    border: 1px solid rgba(52, 211, 102, 0.15);
}

.login-feature strong[b-v0nwsdrxqt] {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.2rem;
    color: #f0f4f8;
}

.login-feature span[b-v0nwsdrxqt] {
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    line-height: 1.45;
}

.login-learn-more[b-v0nwsdrxqt] {
    color: #5ce89a;
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(92, 232, 154, 0.3);
    padding-bottom: 2px;
    transition: color 0.15s, border-color 0.15s;
}

.login-learn-more:hover[b-v0nwsdrxqt] {
    color: #86efac;
    border-bottom-color: rgba(134, 239, 172, 0.5);
}

@media (max-width: 768px) {
    .login-container[b-v0nwsdrxqt] {
        flex-direction: column-reverse;
        gap: 2.5rem;
    }

    .login-card[b-v0nwsdrxqt] {
        width: 100%;
        max-width: 440px;
    }

    .login-marketing[b-v0nwsdrxqt] {
        text-align: center;
    }

    .login-marketing-title[b-v0nwsdrxqt] {
        font-size: 1.75rem;
    }
}
/* /Components/Pages/ProductsPage.razor.rz.scp.css */
.products-page[b-37cg99trcu] {
    max-width: 1100px;
    width: 100%;
    padding: 0 1rem;
}

.products-hero[b-37cg99trcu] {
    text-align: center;
    margin-bottom: 3rem;
}

.products-hero h1[b-37cg99trcu] {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.products-hero p[b-37cg99trcu] {
    color: rgba(255,255,255,0.55);
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.products-grid[b-37cg99trcu] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.product-card[b-37cg99trcu] {
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 2rem 1.75rem;
    transition: border-color 0.2s, transform 0.2s;
}

.product-card:hover[b-37cg99trcu] {
    border-color: rgba(40, 174, 96, 0.3);
    transform: translateY(-2px);
}

.product-icon[b-37cg99trcu] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.product-card h3[b-37cg99trcu] {
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.product-tagline[b-37cg99trcu] {
    color: rgba(255,255,255,0.4);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
    margin-bottom: 1.25rem;
}

.product-features[b-37cg99trcu] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.product-features li[b-37cg99trcu] {
    color: rgba(255,255,255,0.6);
    font-size: 0.82rem;
    padding: 0.35rem 0;
    padding-left: 1.25rem;
    position: relative;
    line-height: 1.4;
}

.product-features li[b-37cg99trcu]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(40, 174, 96, 0.5);
}

.product-pricing[b-37cg99trcu] {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 1rem;
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.product-price[b-37cg99trcu] {
    color: #fff;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
}

.product-period[b-37cg99trcu] {
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
}

.product-tier-label[b-37cg99trcu] {
    color: rgba(255,255,255,0.35);
    font-size: 0.72rem;
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.products-cta[b-37cg99trcu] {
    text-align: center;
    margin-bottom: 3rem;
}

.products-cta p[b-37cg99trcu] {
    color: rgba(255,255,255,0.5);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.btn-cta[b-37cg99trcu] {
    display: inline-block;
    background: #28ae60;
    color: #fff;
    padding: 0.7rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.15s;
}

.btn-cta:hover[b-37cg99trcu] {
    background: #388358;
    color: #fff;
}

.products-trust[b-37cg99trcu] {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.trust-item[b-37cg99trcu] {
    text-align: center;
}

.trust-item strong[b-37cg99trcu] {
    display: block;
    color: #28ae60;
    font-size: 1rem;
    font-weight: 600;
}

.trust-item span[b-37cg99trcu] {
    color: rgba(255,255,255,0.35);
    font-size: 0.72rem;
}

@media (max-width: 768px) {
    .products-grid[b-37cg99trcu] {
        grid-template-columns: 1fr;
    }

    .products-hero h1[b-37cg99trcu] {
        font-size: 1.6rem;
    }

    .products-trust[b-37cg99trcu] {
        flex-direction: column;
        gap: 1rem;
    }
}