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

main[b-ul91pznll6] {
    flex: 1;
    min-width: 0; /* lets the page reflow into the space freed when the sidebar collapses */
}

.sidebar[b-ul91pznll6] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-ul91pznll6] {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    height: 3.5rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* equal side columns keep the center truly centered */
    align-items: center;
    gap: .75rem;
}

.top-row-center[b-ul91pznll6] {
    display: flex;
    justify-content: center;
}

.top-row-actions[b-ul91pznll6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
}

/* API Docs icon: pages turn while hovered */
.docs-icon[b-ul91pznll6] {
    width: 18px;
    height: 18px;
    overflow: visible;
}

    .docs-icon *[b-ul91pznll6] {
        transform-box: view-box;
    }

.docs-flip[b-ul91pznll6] {
    transform-origin: 12px 12px;
    opacity: 0;
}

/* opaque so the page hides the lines beneath it while it turns */
.docs-flip-page[b-ul91pznll6] {
    fill: var(--card-bg);
}

.docs-link:hover .docs-flip[b-ul91pznll6],
.docs-link:focus-visible .docs-flip[b-ul91pznll6] {
    animation: docs-page-turn-b-ul91pznll6 1.1s cubic-bezier(.45,0,.35,1) infinite;
}

.docs-link:hover .docs-text-right[b-ul91pznll6],
.docs-link:focus-visible .docs-text-right[b-ul91pznll6] {
    animation: docs-new-page-b-ul91pznll6 1.1s ease-out infinite;
}

/* right page lifts, narrows over the spine (seen edge-on) and lands mirrored on the left page */
@keyframes docs-page-turn-b-ul91pznll6 {
    0% { scale: 1 1; translate: 0 0; opacity: 1; }
    50% { scale: .04 1; translate: 0 -1.2px; }
    92% { scale: -1 1; translate: 0 0; opacity: 1; }
    100% { scale: -1 1; translate: 0 0; opacity: 0; }
}

/* the newly revealed right page gets its text */
@keyframes docs-new-page-b-ul91pznll6 {
    0%, 25% { opacity: 0; }
    70%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .docs-link:hover .docs-flip[b-ul91pznll6],
    .docs-link:hover .docs-text-right[b-ul91pznll6],
    .docs-link:focus-visible .docs-flip[b-ul91pznll6],
    .docs-link:focus-visible .docs-text-right[b-ul91pznll6] {
        animation: none;
    }
}

@media (max-width: 640.98px) {
    .top-row[b-ul91pznll6] {
        grid-template-columns: auto 1fr auto;
        padding: 0 .75rem;
    }
}

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

    .sidebar[b-ul91pznll6] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    /* Floating rounded bar, aligned with the sidebar card. The first shadow paints the page
       color into the 12px gap above it so scrolled content doesn't show through there. */
    .top-row[b-ul91pznll6] {
        position: sticky;
        top: 12px;
        z-index: 1;
        margin: 12px 12px 0 0;
        border: 1px solid var(--border-color);
        border-radius: 16px;
        box-shadow: 0 -13px 0 var(--page-bg), var(--shadow-card);
    }

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

#blazor-error-ui[b-ul91pznll6] {
    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-ul91pznll6] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ============================
   Sticky, dark sidebar shell
   ============================ */
.sidebar-root[b-c10a8zk7i2] {
    position: sticky;
    top: 0;
    z-index: 20; /* keeps flyouts + collapse button above the page's sticky top-row */
    height: 100vh;
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border-right: 1px solid var(--border-color);
    color: var(--text-main);
}

/* ============================
   Header
   ============================ */
.sidebar-header[b-c10a8zk7i2] {
    padding: 14px 19px; /* 19 + 36px logo + 19 = the collapsed rail's inner width (76px - 2px border), centered like the nav icons */
    border-bottom: 1px solid var(--border-color);
    position: relative; /* so toggler can sit in header on mobile */
}

[b-c10a8zk7i2] .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-decoration: none !important;
    color: var(--text-main) !important;
}

.sidebar-logo[b-c10a8zk7i2] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 12px;
    object-fit: contain;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    padding: 6px;
}

.sidebar-brand-text[b-c10a8zk7i2] {
    transition: opacity .2s ease .1s, transform .25s ease .1s;
}

.sidebar-title[b-c10a8zk7i2] {
    font-weight: 800;
    line-height: 1.1;
}

/* ============================
   Collapse / expand button (desktop only)
   ============================ */
.sidebar-collapse-btn[b-c10a8zk7i2] {
    display: none;
    position: absolute;
    top: 50%;
    right: -14px;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-muted);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    z-index: 2;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

    .sidebar-collapse-btn:hover[b-c10a8zk7i2] {
        transform: scale(1.08);
        border-color: var(--primary);
        color: var(--primary);
        box-shadow: 0 4px 14px var(--primary-ring);
    }

    .sidebar-collapse-btn:active[b-c10a8zk7i2] {
        transform: scale(.92);
    }

    .sidebar-collapse-btn:focus-visible[b-c10a8zk7i2] {
        outline: 2px solid var(--primary-ring);
        outline-offset: 2px;
    }

.sidebar-collapse-icon[b-c10a8zk7i2] {
    display: inline-block;
    font-size: .8rem;
    line-height: 1;
    -webkit-text-stroke: .5px;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}

.sidebar-root.collapsed .sidebar-collapse-icon[b-c10a8zk7i2] {
    transform: rotate(180deg);
}

.sidebar-collapse-pulse[b-c10a8zk7i2] {
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    pointer-events: none;
    animation: sidebar-collapse-pulse-b-c10a8zk7i2 .55s ease-out forwards;
}

@keyframes sidebar-collapse-pulse-b-c10a8zk7i2 {
    from {
        transform: scale(1);
        opacity: .9;
    }

    to {
        transform: scale(1.9);
        opacity: 0;
    }
}

/* ============================
   Mobile toggler (checkbox)
   ============================ */
.navbar-toggler[b-c10a8zk7i2] {
    appearance: none;
    cursor: pointer;
    width: 3rem;
    height: 2.5rem;
    position: absolute;
    top: 10px;
    right: 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2851, 65, 85, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.3rem var(--bg-main);
}

    .navbar-toggler:checked[b-c10a8zk7i2] {
        background-color: var(--primary-tint);
    }

:root[data-theme='dark'] .navbar-toggler[b-c10a8zk7i2] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28230, 233, 239, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ============================
   Menu container
   ============================ */
.nav-scrollable[b-c10a8zk7i2] {
    display: none; /* mobile default */
    padding: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
}

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

/* ============================
   Sections
   ============================ */
.nav-section[b-c10a8zk7i2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

/* ============================
   Items + collapsible groups (e.g. Client Fees)
   ============================ */
[b-c10a8zk7i2] .nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nav-subsection[b-c10a8zk7i2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ============================
   Nav buttons (IMPORTANT: scoped => ::deep)
   ============================ */
[b-c10a8zk7i2] .sidebar-nav {
    gap: 6px;
    flex-wrap: nowrap; /* bootstrap's wrap sizes items to their full label width, which pushes flyouts away from the collapsed rail */
}

    /* Base "button" */
    [b-c10a8zk7i2] .sidebar-nav .nav-link {
        text-decoration: none !important; /* remove underline */
        color: var(--text-secondary) !important;
        background: transparent !important;
        display: flex !important;
        align-items: center;
        gap: 10px;
        height: 44px;
        padding: 0 16px; /* keeps the icon centered in the collapsed rail */
        border-radius: 12px;
        border: 1px solid transparent;
        white-space: nowrap;
        transition: background .15s ease, border-color .15s ease, transform .08s ease;
    }

        /* Icon */
        [b-c10a8zk7i2] .sidebar-nav .nav-link i.bi,
        [b-c10a8zk7i2] .sidebar-nav .nav-link .sb-icon {
            flex-shrink: 0;
            font-size: 1.05rem;
            color: var(--text-muted);
            transition: color .15s ease;
        }

        /* Group toggle (e.g. "Client Fees") — looks/behaves like a top-level nav-link */
        [b-c10a8zk7i2] .sidebar-nav .nav-link.nav-link-toggle {
            width: 100%;
            font: inherit;
            text-align: left;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
        }

        /* Expand/collapse chevron */
        [b-c10a8zk7i2] .sidebar-nav .nav-link-chevron {
            margin-left: auto;
            font-size: .85rem !important;
            transition: transform .15s ease, opacity .2s ease .1s;
        }

            [b-c10a8zk7i2] .sidebar-nav .nav-link-chevron.expanded {
                transform: rotate(180deg);
            }

        /* Indented sub-items (e.g. under "Client Fees") */
        [b-c10a8zk7i2] .sidebar-nav .nav-link.nav-link-sub {
            height: 38px;
            padding-left: 38px;
            font-size: .92rem;
        }

            [b-c10a8zk7i2] .sidebar-nav .nav-link.nav-link-sub .sb-icon {
                width: 16px;
                height: 16px;
            }

        /* Hover */
        [b-c10a8zk7i2] .sidebar-nav .nav-link:hover {
            background: var(--surface-hover) !important;
            color: var(--text-main) !important;
        }

            [b-c10a8zk7i2] .sidebar-nav .nav-link:hover i.bi,
            [b-c10a8zk7i2] .sidebar-nav .nav-link:hover .sb-icon {
                color: var(--text-main);
            }

        /* Active (selected/pressed) */
        [b-c10a8zk7i2] .sidebar-nav .nav-link.active {
            background: var(--primary-tint) !important;
            color: var(--primary) !important;
            font-weight: 600;
            position: relative;
        }

            /* Active left indicator */
            [b-c10a8zk7i2] .sidebar-nav .nav-link.active::before {
                content: "";
                position: absolute;
                left: -6px;
                top: 10px;
                bottom: 10px;
                width: 4px;
                border-radius: 999px;
                background: var(--primary);
            }

            [b-c10a8zk7i2] .sidebar-nav .nav-link.active .sb-icon {
                color: var(--primary);
            }

        /* Group icon (e.g. Client Fees) turns brand-blue while one of its pages is open */
        [b-c10a8zk7i2] .sidebar-nav .nav-item:has(.nav-flyout .active) > .nav-link-toggle .sb-icon {
            color: var(--primary);
        }

        /* Remove bootstrap focus ring if it appears */
        [b-c10a8zk7i2] .sidebar-nav .nav-link:focus,
        [b-c10a8zk7i2] .sidebar-nav .nav-link:focus-visible {
            outline: none;
            box-shadow: none;
        }

/* Text labels: clip as the bar slides, fade in once the bar has started opening */
[b-c10a8zk7i2] .nav-label {
    min-width: 0;
    overflow: hidden;
    transition: opacity .2s ease .1s, transform .25s ease .1s;
}

/* ============================
   Flyouts (collapsed mode only)
   ============================ */
[b-c10a8zk7i2] .nav-flyout {
    display: none;
    position: absolute;
    top: 0;
    left: calc(100% + 22px);
    min-width: 210px;
    padding: 6px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-popover);
    color: var(--text-main);
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-6px) scale(.98);
    transform-origin: left top;
    /* small hide delay so moving the cursor from the icon to the flyout doesn't flicker */
    transition: opacity .16s ease .08s, transform .16s ease .08s, visibility 0s linear .24s;
}

    /* Invisible bridge covering the gap between the icon and the flyout */
    [b-c10a8zk7i2] .nav-flyout::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -24px;
        width: 24px;
    }

[b-c10a8zk7i2] .nav-flyout-label {
    top: 50%;
    translate: 0 -50%;
    min-width: 0;
    padding: 8px 12px;
    white-space: nowrap;
    font-size: .88rem;
    font-weight: 600;
}

[b-c10a8zk7i2] .nav-flyout-title {
    padding: 6px 10px 6px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-faint);
}

[b-c10a8zk7i2] .nav-flyout-link {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: .9rem;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}

    [b-c10a8zk7i2] .nav-flyout-link .sb-icon {
        width: 16px;
        height: 16px;
        color: var(--text-muted);
    }

    [b-c10a8zk7i2] .nav-flyout-link:hover {
        background: var(--surface-hover);
        color: var(--text-main) !important;
    }

    [b-c10a8zk7i2] .nav-flyout-link.active {
        background: var(--primary-tint);
        color: var(--primary) !important;
        font-weight: 600;
    }

        [b-c10a8zk7i2] .nav-flyout-link.active .sb-icon {
            color: var(--primary);
        }

/* ============================
   Desktop behavior
   ============================ */
@media (min-width: 641px) {
    .navbar-toggler[b-c10a8zk7i2] {
        display: none;
    }

    .nav-scrollable[b-c10a8zk7i2] {
        display: block; /* always show sidebar */
    }

    .sidebar-collapse-btn[b-c10a8zk7i2] {
        display: flex;
    }

    /* Sliding window, floating as one rounded card (header + menu + footer) */
    .sidebar-root[b-c10a8zk7i2] {
        top: 12px;
        height: calc(100vh - 24px);
        margin: 12px;
        border: 1px solid var(--border-color);
        border-radius: 18px;
        box-shadow: var(--shadow-card);
        transition: width .32s cubic-bezier(.4,0,.2,1);
    }

    /* the footer paints its own background, so it follows the card's bottom corners
       (the card itself can't clip: flyouts and the collapse button overflow it) */
    .sidebar-footer[b-c10a8zk7i2] {
        border-radius: 0 0 17px 17px;
    }

        .sidebar-root.collapsed[b-c10a8zk7i2] {
            width: 76px;
        }

            .sidebar-root.collapsed .nav-scrollable[b-c10a8zk7i2] {
                overflow: visible; /* let flyouts escape the rail */
            }

            /* Fade text out immediately on collapse */
            .sidebar-root.collapsed .sidebar-brand-text[b-c10a8zk7i2],
            .sidebar-root.collapsed[b-c10a8zk7i2]  .nav-label {
                opacity: 0;
                transform: translateX(-8px);
                pointer-events: none;
                transition-delay: 0s;
            }

            .sidebar-root.collapsed[b-c10a8zk7i2]  .nav-link-chevron {
                opacity: 0;
                pointer-events: none;
                transition-delay: 0s;
            }

            .sidebar-root.collapsed .nav-subsection[b-c10a8zk7i2] {
                display: none;
            }

            .sidebar-root.collapsed .sidebar-user[b-c10a8zk7i2] {
                opacity: 0;
                max-height: 0;
                padding-top: 0;
                padding-bottom: 0;
                margin-bottom: 0;
                pointer-events: none;
                transition-delay: 0s;
            }

            .sidebar-root.collapsed[b-c10a8zk7i2]  .nav-flyout {
                display: block;
            }

            /* Reveal flyout on hover / keyboard focus */
            .sidebar-root.collapsed[b-c10a8zk7i2]  .nav-item:hover > .nav-flyout,
            .sidebar-root.collapsed[b-c10a8zk7i2]  .nav-item:has(:focus-visible) > .nav-flyout {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                transform: none;
                transition: opacity .16s ease, transform .16s ease, visibility 0s;
            }

            /* Highlight the group icon when one of its pages is the current page */
            .sidebar-root.collapsed[b-c10a8zk7i2]  .nav-item:has(.nav-flyout .active) > .nav-link-toggle {
                background: var(--primary-tint) !important;
                position: relative;
            }

                .sidebar-root.collapsed[b-c10a8zk7i2]  .nav-item:has(.nav-flyout .active) > .nav-link-toggle::before {
                    content: "";
                    position: absolute;
                    left: -6px;
                    top: 10px;
                    bottom: 10px;
                    width: 4px;
                    border-radius: 999px;
                    background: var(--primary);
                }

    /* Restored state is applied without animating */
    .sidebar-root.no-anim[b-c10a8zk7i2],
    .sidebar-root.no-anim[b-c10a8zk7i2]  * {
        transition: none !important;
    }
}

.sidebar-footer[b-c10a8zk7i2] {
    flex-shrink: 0;
    padding: 12px;
    border-top: 1px solid var(--border-color);
    background: var(--card-bg);
}

    .sidebar-user[b-c10a8zk7i2] {
        display: flex;
        flex-direction: column;
        max-height: 60px;
        margin-bottom: 6px;
        padding: 4px 17px;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        transition: opacity .2s ease .1s, max-height .32s cubic-bezier(.4,0,.2,1), padding .32s cubic-bezier(.4,0,.2,1), margin .32s cubic-bezier(.4,0,.2,1);
    }

    .sidebar-user-caption[b-c10a8zk7i2] {
        font-size: .72rem;
        color: var(--text-muted);
    }

    .sidebar-user-email[b-c10a8zk7i2] {
        font-size: .85rem;
        font-weight: 600;
        color: var(--text-main);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sidebar-footer .nav-link[b-c10a8zk7i2] {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 44px;
        padding: 0 17px;
        border-radius: 8px;
        font-weight: 500;
        font-size: 0.9rem;
        white-space: nowrap;
        text-decoration: none;
        transition: background-color 0.15s ease;
    }

        .sidebar-footer .nav-link:hover[b-c10a8zk7i2] {
            background-color: var(--danger-tint);
        }

        .sidebar-footer[b-c10a8zk7i2]  .sb-icon {
            flex-shrink: 0;
        }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-g3zox7yztj],
.components-reconnect-repeated-attempt-visible[b-g3zox7yztj],
.components-reconnect-failed-visible[b-g3zox7yztj],
.components-pause-visible[b-g3zox7yztj],
.components-resume-failed-visible[b-g3zox7yztj],
.components-rejoining-animation[b-g3zox7yztj] {
    display: none;
}

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


#components-reconnect-modal[b-g3zox7yztj] {
    background-color: var(--card-bg);
    color: var(--text-main);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-modal);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-g3zox7yztj 0.5s both;
    &[open]

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

}

#components-reconnect-modal[b-g3zox7yztj]::backdrop {
    background-color: var(--overlay-bg);
    animation: components-reconnect-modal-fadeInOpacity-b-g3zox7yztj 0.5s ease-in-out;
    opacity: 1;
}

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-g3zox7yztj] {
    border: 0;
    background-color: var(--primary-solid);
    color: var(--text-on-primary);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-g3zox7yztj] {
        background-color: var(--primary-solid-hover);
    }

    #components-reconnect-modal button:active[b-g3zox7yztj] {
        background-color: var(--primary-solid);
    }

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

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

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

@keyframes components-rejoining-animation-b-g3zox7yztj {
    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/SidebarIcon.razor.rz.scp.css */
/* All part transforms use viewBox user units (0-24) for origins and offsets. */
.sb-icon[b-45bl2yjkst] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    overflow: visible;
}

    .sb-icon *[b-45bl2yjkst] {
        transform-box: view-box;
    }

/* ==========================================================
   Home: houses (selected) <-> house
   ========================================================== */
.h-back[b-45bl2yjkst] {
    transform-origin: 20px 17px;
    opacity: 0;
    translate: 5px -3px;
    rotate: 45deg;
    transition: opacity .3s ease, translate .45s cubic-bezier(.4,0,.2,1), rotate .45s cubic-bezier(.4,0,.2,1);
}

.h-small[b-45bl2yjkst] {
    transform-origin: 2.91px 21px;
    opacity: 0;
    scale: 1.375;
    transition: opacity .3s ease .05s, scale .45s cubic-bezier(.34,1.3,.64,1);
}

.h-big[b-45bl2yjkst] {
    transform-origin: 3px 21px;
    opacity: 1;
    scale: 1;
    transition: opacity .3s ease .05s, scale .45s cubic-bezier(.34,1.3,.64,1);
}

.is-active .h-back[b-45bl2yjkst] {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
}

.is-active .h-small[b-45bl2yjkst] {
    opacity: 1;
    scale: 1;
}

.is-active .h-big[b-45bl2yjkst] {
    opacity: 0;
    scale: .727;
}

/* ==========================================================
   API Keys: two key-round keys on one ring.
   k-chain places the ring; each key hangs from the ring (origin 0,0) and
   rotate = the direction its blade points (0deg right, 90deg down).
   Not selected: both hang straight down, stacked so they read as one key (centered).
   Selected: ring moves to the top-left, one key points right (turned over so its
   teeth face down), the other points down.
   ========================================================== */
.k-chain[b-45bl2yjkst] {
    translate: 12px 3.4px;
    transition: translate .5s cubic-bezier(.4,0,.2,1);
}

.is-active .k-chain[b-45bl2yjkst] {
    translate: 5.2px 5.2px;
}

.k-key[b-45bl2yjkst],
.k-flip[b-45bl2yjkst] {
    transform-origin: 0 0;
}

.k-key[b-45bl2yjkst] {
    rotate: 90deg;
}

.is-active .k-1[b-45bl2yjkst] {
    rotate: 0deg;
}

.k-1 .k-flip[b-45bl2yjkst] {
    transition: scale .35s ease-in-out .1s;
}

.is-active .k-1 .k-flip[b-45bl2yjkst] {
    scale: 1 -1;
    transition-delay: .25s;
}

.anim-enter .k-1[b-45bl2yjkst] {
    animation: k1-enter-b-45bl2yjkst .85s cubic-bezier(.3,.7,.3,1) both;
}

.anim-enter .k-2[b-45bl2yjkst] {
    animation: k2-enter-b-45bl2yjkst 1s ease-in-out .1s both;
}

.anim-leave .k-1[b-45bl2yjkst] {
    animation: k1-leave-b-45bl2yjkst 1.1s both;
}

.anim-leave .k-2[b-45bl2yjkst] {
    animation: k2-leave-b-45bl2yjkst 1.1s both;
}

/* spins (turning over on the way) until it points right */
@keyframes k1-enter-b-45bl2yjkst {
    from { rotate: 90deg; }
    to { rotate: -360deg; }
}

/* stays down, swinging a bit from the ring's movement */
@keyframes k2-enter-b-45bl2yjkst {
    0% { rotate: 90deg; }
    30% { rotate: 62deg; }
    52% { rotate: 104deg; }
    70% { rotate: 83deg; }
    86% { rotate: 94deg; }
    100% { rotate: 90deg; }
}

/* falls (accelerating), knocks into the other key, wiggles and settles on top of it */
@keyframes k1-leave-b-45bl2yjkst {
    0% { rotate: 0deg; animation-timing-function: cubic-bezier(.55,0,1,.45); }
    40% { rotate: 108deg; animation-timing-function: ease-out; }
    56% { rotate: 76deg; animation-timing-function: ease-in-out; }
    72% { rotate: 97deg; }
    86% { rotate: 87deg; }
    100% { rotate: 90deg; }
}

/* gets pushed by the falling key, swings back and settles */
@keyframes k2-leave-b-45bl2yjkst {
    0%, 36% { rotate: 90deg; }
    50% { rotate: 116deg; animation-timing-function: ease-in-out; }
    66% { rotate: 80deg; }
    82% { rotate: 95deg; }
    100% { rotate: 90deg; }
}

/* ==========================================================
   Connected Accounts: one group <-> a "crown" of three groups
   ========================================================== */
.ug-main[b-45bl2yjkst] {
    transform-origin: 12px 22px;
    transition: scale .5s cubic-bezier(.34,1.4,.64,1) .05s;
}

.is-active .ug-main[b-45bl2yjkst] {
    scale: .74;
    transition-delay: 0s;
}

.ug-side[b-45bl2yjkst] {
    transform-origin: 12px 11.5px;
    opacity: 0;
    scale: .15;
    transition: opacity .3s ease, translate .55s cubic-bezier(.34,1.35,.64,1), scale .55s cubic-bezier(.34,1.35,.64,1), rotate .55s cubic-bezier(.34,1.35,.64,1);
}

.ug-left[b-45bl2yjkst] {
    translate: -12px -14px;
    rotate: -40deg;
}

.ug-right[b-45bl2yjkst] {
    translate: 12px -14px;
    rotate: 40deg;
}

.is-active .ug-side[b-45bl2yjkst] {
    opacity: 1;
    scale: .42;
}

.is-active .ug-left[b-45bl2yjkst] {
    translate: -7.5px -8px;
    rotate: -16deg;
    transition-delay: .08s;
}

.is-active .ug-right[b-45bl2yjkst] {
    translate: 7.5px -8px;
    rotate: 16deg;
    transition-delay: .16s;
}

/* three tiny people pop in (one by one) once the crown has formed */
.ug-tiny[b-45bl2yjkst] {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    scale: .2;
    transition: opacity .15s ease, scale .2s ease-in;
}

.is-active .ug-tiny[b-45bl2yjkst] {
    opacity: 1;
    scale: 1;
    transition: opacity .2s ease .35s, scale .35s cubic-bezier(.34,1.6,.64,1) .35s;
}

.is-active .ug-tiny-2[b-45bl2yjkst] {
    transition-delay: .45s;
}

.is-active .ug-tiny-3[b-45bl2yjkst] {
    transition-delay: .53s;
}

/* ==========================================================
   Webhooks: spin and morph between the regular and split webhook
   ========================================================== */
.wh-spin[b-45bl2yjkst] {
    transform-origin: 12px 12px;
    transition: rotate .8s cubic-bezier(.45,0,.2,1);
}

.is-active .wh-spin[b-45bl2yjkst] {
    rotate: 360deg;
}

.wh-regular[b-45bl2yjkst],
.wh-alt[b-45bl2yjkst] {
    transition: opacity .2s ease .3s;
}

.wh-alt[b-45bl2yjkst] {
    opacity: 0;
}

.is-active .wh-regular[b-45bl2yjkst] {
    opacity: 0;
}

.is-active .wh-alt[b-45bl2yjkst] {
    opacity: 1;
}

/* ==========================================================
   Client Fees: hand-coins (+2 coins when selected)
   ========================================================== */
.hc-hand[b-45bl2yjkst] {
    transform-origin: 4px 18px;
}

.hc-coin[b-45bl2yjkst] {
    opacity: 0;
}

.is-active .hc-coin[b-45bl2yjkst] {
    opacity: 1;
}

.anim-enter .hc-coin[b-45bl2yjkst] {
    animation: hc-coin-fall-b-45bl2yjkst .7s both;
}

.anim-enter .hc-coin-2[b-45bl2yjkst] {
    animation-delay: .09s;
}

.anim-enter .hc-hand[b-45bl2yjkst] {
    animation: hc-hand-bounce-b-45bl2yjkst .45s ease-out .4s both;
}

.anim-leave .hc-hand[b-45bl2yjkst] {
    animation: hc-hand-tip-b-45bl2yjkst .9s ease-in-out both;
}

.anim-leave .hc-coin-1[b-45bl2yjkst] {
    animation: hc-coin-1-drop-b-45bl2yjkst .75s cubic-bezier(.55,0,1,.45) both;
}

.anim-leave .hc-coin-2[b-45bl2yjkst] {
    animation: hc-coin-2-drop-b-45bl2yjkst .75s cubic-bezier(.55,0,1,.45) .06s both;
}

@keyframes hc-coin-fall-b-45bl2yjkst {
    0% { translate: 0 -12px; opacity: 0; animation-timing-function: cubic-bezier(.55,0,1,.45); }
    15% { opacity: 1; }
    60% { translate: 0 0; animation-timing-function: ease-out; }
    75% { translate: 0 -1.6px; animation-timing-function: ease-in; }
    88%, 100% { translate: 0 0; opacity: 1; }
}

@keyframes hc-hand-bounce-b-45bl2yjkst {
    0% { translate: 0 0; }
    30% { translate: 0 1.8px; }
    65% { translate: 0 -.5px; }
    100% { translate: 0 0; }
}

/* fingers tip down, then the hand returns */
@keyframes hc-hand-tip-b-45bl2yjkst {
    0% { rotate: 0deg; }
    30%, 60% { rotate: 9deg; }
    100% { rotate: 0deg; }
}

/* coins roll to the fingertips and fall off */
@keyframes hc-coin-1-drop-b-45bl2yjkst {
    0% { translate: 0 0; opacity: 1; }
    35% { translate: 6px 8px; opacity: 1; }
    100% { translate: 8px 20px; opacity: 0; }
}

@keyframes hc-coin-2-drop-b-45bl2yjkst {
    0% { translate: 0 0; opacity: 1; }
    35% { translate: .5px 7.5px; opacity: 1; }
    100% { translate: 2px 20px; opacity: 0; }
}

/* ==========================================================
   Configuration: sliders swap sides
   ========================================================== */
.fs-knob[b-45bl2yjkst] {
    transition: translate .45s cubic-bezier(.34,1.45,.64,1);
}

.is-active .fs-knob-1[b-45bl2yjkst] {
    translate: 4px 0;
}

.is-active .fs-knob-2[b-45bl2yjkst] {
    translate: -4px 0;
    transition-delay: .06s;
}

/* ==========================================================
   Reward: gift lid tossed open / pushed closed.
   Lid hinges on the box's top-right corner (21,11); positive rotate lifts its left side.
   ========================================================== */
.gf-lid[b-45bl2yjkst] {
    transform-origin: 21px 11px;
}

.is-active .gf-lid[b-45bl2yjkst] {
    translate: 0 -.5px;
    rotate: 18deg;
}

/* bow is untied: loops shrink away and two loose ribbon ends are drawn in */
.gf-bow[b-45bl2yjkst] {
    transform-origin: 12px 7px;
    transition: opacity .25s ease .5s, scale .3s cubic-bezier(.34,1.4,.64,1) .5s;
}

.is-active .gf-bow[b-45bl2yjkst] {
    opacity: 0;
    scale: .4;
    transition: opacity .15s ease, scale .2s ease-in;
}

.gf-loose[b-45bl2yjkst] {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    opacity: 0;
    transition: stroke-dashoffset .2s ease-in, opacity .1s linear .15s;
}

.is-active .gf-loose[b-45bl2yjkst] {
    stroke-dashoffset: 0;
    opacity: 1;
    transition: stroke-dashoffset .35s ease-out .15s, opacity .05s linear .15s;
}

.is-active .gf-loose-r[b-45bl2yjkst] {
    transition-delay: .25s;
}

/* box's top edge shows once the lid is off it */
.gf-rim[b-45bl2yjkst] {
    opacity: 0;
    transition: opacity .15s ease .4s;
}

.is-active .gf-rim[b-45bl2yjkst] {
    opacity: 1;
    transition: opacity .2s ease .2s;
}

.anim-enter .gf-lid[b-45bl2yjkst] {
    animation: gf-lid-open-b-45bl2yjkst .9s both;
}

.anim-leave .gf-lid[b-45bl2yjkst] {
    animation: gf-lid-close-b-45bl2yjkst .7s both;
}

/* ropes open, lid pops up high and lands propped open on the box's right corner */
@keyframes gf-lid-open-b-45bl2yjkst {
    0% { translate: 0 0; rotate: 0deg; animation-timing-function: ease-out; }
    35% { translate: -.5px -6px; rotate: 8deg; animation-timing-function: cubic-bezier(.55,0,1,.45); }
    65% { translate: 0 -.5px; rotate: 24deg; animation-timing-function: ease-out; }
    82% { translate: 0 -.5px; rotate: 15deg; }
    100% { translate: 0 -.5px; rotate: 18deg; }
}

/* lid is pushed from the left back over the box */
@keyframes gf-lid-close-b-45bl2yjkst {
    0% { translate: 0 -.5px; rotate: 18deg; }
    55% { translate: .6px 0; rotate: -1deg; animation-timing-function: ease-out; }
    75% { translate: -.2px 0; rotate: .5deg; }
    100% { translate: 0 0; rotate: 0deg; }
}

/* ==========================================================
   Billing: $ (receipt) <-> text lines written one by one (receipt-text)
   ========================================================== */
.rc-dollar[b-45bl2yjkst] {
    transform-origin: 12px 12px;
    transition: opacity .2s ease .25s, scale .3s cubic-bezier(.34,1.5,.64,1) .25s;
}

.is-active .rc-dollar[b-45bl2yjkst] {
    opacity: 0;
    scale: .5;
    transition-delay: 0s;
}

.rc-line[b-45bl2yjkst] {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    opacity: 0;
    transition: stroke-dashoffset .2s ease, opacity .15s ease .05s;
}

.is-active .rc-line[b-45bl2yjkst] {
    stroke-dashoffset: 0;
    opacity: 1;
    transition: stroke-dashoffset .25s ease-out, opacity .05s linear;
}

.is-active .rc-line-1[b-45bl2yjkst] {
    transition-delay: .15s;
}

.is-active .rc-line-2[b-45bl2yjkst] {
    transition-delay: .3s;
}

.is-active .rc-line-3[b-45bl2yjkst] {
    transition-delay: .45s;
}

/* ==========================================================
   Administration: keyhole key turns right / drops back
   ========================================================== */
.sk-key[b-45bl2yjkst] {
    transform-origin: 12px 11px;
}

.is-active .sk-key[b-45bl2yjkst] {
    rotate: -90deg;
}

.anim-enter .sk-key[b-45bl2yjkst] {
    animation: sk-turn-b-45bl2yjkst .55s both;
}

.anim-leave .sk-key[b-45bl2yjkst] {
    animation: sk-drop-b-45bl2yjkst .75s both;
}

@keyframes sk-turn-b-45bl2yjkst {
    0% { rotate: 0deg; animation-timing-function: cubic-bezier(.4,0,.2,1); }
    65% { rotate: -105deg; }
    85% { rotate: -86deg; }
    100% { rotate: -90deg; }
}

@keyframes sk-drop-b-45bl2yjkst {
    0% { rotate: -90deg; animation-timing-function: cubic-bezier(.55,0,1,.45); }
    45% { rotate: 12deg; animation-timing-function: ease-out; }
    65% { rotate: -6deg; }
    82% { rotate: 3deg; }
    100% { rotate: 0deg; }
}

/* ==========================================================
   User Management: a third user joins from the top-right as another
   "shadow" outline behind the existing one (same path, shifted right).
   ========================================================== */
.ur-base[b-45bl2yjkst],
.ur-new[b-45bl2yjkst] {
    transform-origin: 0px 22px;
}

.ur-base[b-45bl2yjkst] {
    transition: scale .45s cubic-bezier(.34,1.3,.64,1) .05s;
}

.is-active .ur-base[b-45bl2yjkst] {
    scale: .8;
    transition-delay: 0s;
}

.ur-new[b-45bl2yjkst] {
    opacity: 0;
    scale: .8;
    translate: 10px -6px;
    transition: opacity .25s ease, translate .5s cubic-bezier(.34,1.4,.64,1);
}

.is-active .ur-new[b-45bl2yjkst] {
    opacity: 1;
    translate: 4.4px 0;
    transition-delay: .1s;
}

/* ==========================================================
   Settings: a little spin (60deg = one tooth, so the rest pose looks identical)
   ========================================================== */
.st-gear[b-45bl2yjkst] {
    transform-origin: 12px 12px;
    transition: rotate .6s cubic-bezier(.34,1.4,.64,1);
}

.is-active .st-gear[b-45bl2yjkst] {
    rotate: 60deg;
}

@media (prefers-reduced-motion: reduce) {
    .sb-icon *[b-45bl2yjkst] {
        animation: none !important;
        transition: none !important;
    }
}
/* /Components/Shared/EnvironmentSwitch.razor.rz.scp.css */
.env-switch[b-yrkk0zu035] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .4rem .3rem .75rem;
    border: 1px solid var(--env-border);
    border-radius: 999px;
    background: var(--env-bg);
    color: var(--env-text);
    font-size: .8125rem;
    line-height: 1.2;
    white-space: nowrap;
}

.env-sandbox[b-yrkk0zu035] {
    --env-bg: var(--warning-soft);
    --env-border: var(--warning-border);
    --env-text: var(--warning-text);
    --env-dot: var(--warning);
}

.env-prod[b-yrkk0zu035] {
    --env-bg: var(--success-soft);
    --env-border: var(--success-border);
    --env-text: var(--success-text);
    --env-dot: var(--success);
}

.env-dot[b-yrkk0zu035] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--env-dot);
    box-shadow: 0 0 0 0 var(--env-dot);
    animation: env-pulse-b-yrkk0zu035 2s ease-out infinite;
}

.env-label strong[b-yrkk0zu035] {
    font-weight: 600;
}

.env-sep[b-yrkk0zu035] {
    width: 1px;
    height: 14px;
    background: var(--env-border);
}

.env-link[b-yrkk0zu035] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    color: var(--env-text);
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease;
}

    .env-link:hover[b-yrkk0zu035],
    .env-link:focus-visible[b-yrkk0zu035] {
        background: var(--env-border);
        color: var(--env-text);
    }

@keyframes env-pulse-b-yrkk0zu035 {
    0% { box-shadow: 0 0 0 0 var(--env-dot); }
    70%, 100% { box-shadow: 0 0 0 5px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .env-dot[b-yrkk0zu035] {
        animation: none;
    }
}

@media (max-width: 640.98px) {
    .env-label-extra[b-yrkk0zu035] {
        display: none;
    }
}
/* /Components/Shared/ThemeToggle.razor.rz.scp.css */
/* Round shape, hover and tooltip come from .round-btn / .top-tip in app.css */
.theme-toggle-icon[b-tokn6rjchz] {
    position: absolute;
    font-size: 1rem;
    line-height: 1;
    transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
}

/* The global theme cross-fade overrides transitions, so the icon swap keeps its own */
:root.theme-transition .theme-toggle-icon[b-tokn6rjchz] {
    transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .25s ease !important;
}

/* Light: moon visible (click for dark). Dark: sun visible (click for light). */
.theme-toggle-moon[b-tokn6rjchz] {
    opacity: 1;
    transform: rotate(0) scale(1);
}

.theme-toggle-sun[b-tokn6rjchz] {
    opacity: 0;
    transform: rotate(-90deg) scale(.4);
    color: #fbbf24;
}

:root[data-theme='dark'] .theme-toggle-moon[b-tokn6rjchz] {
    opacity: 0;
    transform: rotate(90deg) scale(.4);
}

:root[data-theme='dark'] .theme-toggle-sun[b-tokn6rjchz] {
    opacity: 1;
    transform: rotate(0) scale(1);
}