@import '_content/DogTiredApp.UI/DogTiredApp.UI.xeatd5hqq7.bundle.scp.css';

/* /Components/Layout/AccountLayout.razor.rz.scp.css */
/* ── Standalone auth layout ─────────────────────────────────────────────── */

/* Fits one screen on short / low-resolution displays without scrolling.
   Every vertical rhythm value below is clamp()ed against dvh, so the card COMPRESSES as the viewport
   gets shorter instead of overflowing. Two deliberate choices:
     • min-height (not height) — genuinely tall content still scrolls rather than being clipped
       somewhere unreachable (a fixed height + centered flex hides the overflowing top).
     • dvh (not vh) — on mobile browsers the URL bar and on-screen keyboard change the usable
       height; dvh tracks that, vh does not. The plain vh line above it is the fallback. */
.account-bg[b-wi5bt1ldqd] {
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(1.5rem + env(safe-area-inset-top, 0px)) calc(1.5rem + env(safe-area-inset-right, 0px))
             calc(1.5rem + env(safe-area-inset-bottom, 0px)) calc(1.5rem + env(safe-area-inset-left, 0px));
    /* Brand radial: aqua glow center -> Tiffany blue edge (matches Gradient_Example.png / the mobile app). */
    background: radial-gradient(circle at 50% 45%, #9DFEFB 0%, #40D2CC 55%, #0ABAB5 100%);
}

.account-card[b-wi5bt1ldqd] {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: var(--dt-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    padding: clamp(1.25rem, 3.2dvh, 2.5rem) 2.25rem clamp(1rem, 2.6dvh, 2rem);
}

.account-brand[b-wi5bt1ldqd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(0.75rem, 2.2dvh, 1.5rem);
}

.account-logo[b-wi5bt1ldqd] {
    height: clamp(72px, 13dvh, 128px);
    width: auto;
    /* Soft teal glow under the mark, matching the mobile login hero. */
    filter: drop-shadow(0 10px 26px rgba(8, 80, 78, 0.28));
}

.account-brand-name[b-wi5bt1ldqd] {
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -0.01em;
    /* Dark teal — matches the mobile login title, and reads on the light aqua gradient. */
    color: #08514E;
    margin-top: 0.4rem;
}

.account-footnote[b-wi5bt1ldqd] {
    margin-top: clamp(0.6rem, 1.6dvh, 1.25rem);
    color: rgba(11, 92, 85, 0.75); /* dark teal — readable on the light aqua gradient */
    font-size: 0.8rem;
    letter-spacing: 0.03em;
}

/* ── Form styling for whatever page renders inside the card ──────────────── */

.account-body[b-wi5bt1ldqd]  h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1f2937;
    text-align: center;
    margin-bottom: 0.25rem;
}

.account-body[b-wi5bt1ldqd]  .account-subtitle {
    display: block;
    text-align: center;
    color: #6B7280;
    font-size: 0.95rem;
    margin-bottom: clamp(0.75rem, 2.2dvh, 1.5rem);
}

.account-body[b-wi5bt1ldqd]  .form-floating,
.account-body[b-wi5bt1ldqd]  .form-group {
    margin-bottom: clamp(0.6rem, 1.6dvh, 1rem);
}

.account-body[b-wi5bt1ldqd]  .form-control {
    border-radius: var(--dt-radius);
    padding: clamp(0.6rem, 1.5dvh, 0.85rem) 1rem;
    border: 1px solid #d1d5db;
    font-size: 1rem;
    /* This card is a FIXED light surface. Pin the input's fill + ink to light hex rather than trusting
       the Bootstrap tokens: data-bs-theme="light" on .account-bg keeps --bs-body-bg light for the
       NON-autofilled state, but the autofill rule below is what the OS dark theme actually breaks. */
    background-color: #fff;
    color: #111827;
}

.account-body[b-wi5bt1ldqd]  .form-control::placeholder {
    color: #9CA3AF;
    opacity: 1;
}

/* "Remember me" (and any other check/radio label on this card): pin to a readable dark ink. Under the
   OS dark scheme the label colour otherwise inherits near-white (#E6E8EC), leaving it all but invisible
   on the white card — this surface must not follow dark mode. */
.account-body[b-wi5bt1ldqd]  .form-check-label {
    color: #374151;
}

/* ── Autofilled fields (saved email + password) ──────────────────────────────
   Chromium paints its OWN background + text colour on an autofilled input, and that fill IGNORES the
   background-color/color above. Under the OS dark scheme that fill goes a washed grey-blue
   (rgba(70,90,126,.4)) with pale text — barely legible on this white card, and this card must NOT
   follow dark mode. background-color can't override the autofill fill; the inset box-shadow is the
   only thing that can, and -webkit-text-fill-color forces the ink back to dark. (Ported from the
   mobile app's Login.razor, which hit this first.) */
.account-body[b-wi5bt1ldqd]  .form-control:-webkit-autofill,
.account-body[b-wi5bt1ldqd]  .form-control:-webkit-autofill:hover,
.account-body[b-wi5bt1ldqd]  .form-control:-webkit-autofill:focus,
.account-body[b-wi5bt1ldqd]  .form-control:-webkit-autofill:active {
    -webkit-text-fill-color: #111827;
    -webkit-box-shadow: 0 0 0 100px #fff inset;
    box-shadow: 0 0 0 100px #fff inset;
    caret-color: #111827;
    border-color: #d1d5db;
}

/* Keep the teal focus ring on an autofilled field (the inset fill lives on box-shadow and would
   otherwise swallow the :focus ring below, which also lives on box-shadow). */
.account-body[b-wi5bt1ldqd]  .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px #fff inset, 0 0 0 0.2rem rgba(15, 118, 110, 0.15);
    box-shadow: 0 0 0 100px #fff inset, 0 0 0 0.2rem rgba(15, 118, 110, 0.15);
    border-color: #0F766E;
}

/* ── Password reveal ─────────────────────────────────────────────────────────
   The input and the button are one visual control: the input loses its right
   border/radius and the button picks them up. */
.account-body[b-wi5bt1ldqd]  .account-pw .form-control {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Edge (and Windows Chromium) injects its OWN reveal control inside a password input. Next to ours
   that rendered as TWO eye icons - desktop only, which is why it never showed on the phone. Hide the
   native one wherever we supply our own toggle; ours is the styled, labelled, aria-correct control.
   Left alone on password fields that have no toggle, so those keep the browser's affordance. */
.account-body[b-wi5bt1ldqd]  .account-pw .form-control::-ms-reveal,
.account-body[b-wi5bt1ldqd]  .account-pw .form-control::-ms-clear {
    display: none;
}

.account-body[b-wi5bt1ldqd]  .account-pw-toggle {
    background: #ffffff;
    color: #6B7280;
    border: 1px solid #d1d5db;
    border-left: 0;
    border-radius: 0 var(--dt-radius) var(--dt-radius) 0;
    padding: 0 0.9rem;
}

.account-body[b-wi5bt1ldqd]  .account-pw-toggle:hover {
    color: #0F766E;
}

.account-body[b-wi5bt1ldqd]  .account-pw-toggle:focus {
    box-shadow: none;
}

/* Focus the field and the whole group highlights, not just the left half. */
.account-body[b-wi5bt1ldqd]  .account-pw:focus-within .form-control,
.account-body[b-wi5bt1ldqd]  .account-pw:focus-within .account-pw-toggle {
    border-color: #0F766E;
}

.account-body[b-wi5bt1ldqd]  .form-control:focus {
    border-color: #0F766E;
    box-shadow: 0 0 0 0.2rem rgba(15, 118, 110, 0.15);
}

.account-body[b-wi5bt1ldqd]  .btn-primary {
    background: #0ABAB5;   /* Tiffany-Blue brand CTA; .btn-primary paints dark on-primary text on it */
    border-color: #0ABAB5;
    border-radius: var(--dt-radius);
    padding: clamp(0.6rem, 1.5dvh, 0.85rem) 1rem;
    font-weight: 600;
    font-size: 1.05rem;
}

.account-body[b-wi5bt1ldqd]  .btn-primary:hover,
.account-body[b-wi5bt1ldqd]  .btn-primary:focus {
    background: #2DC6C0;
    border-color: #2DC6C0;
}

.account-body[b-wi5bt1ldqd]  a {
    color: #0F766E;
    text-decoration: none;
    font-weight: 500;
}

.account-body[b-wi5bt1ldqd]  a:hover {
    text-decoration: underline;
}

.account-body[b-wi5bt1ldqd]  .account-links {
    margin-top: clamp(0.75rem, 2dvh, 1.25rem);
    display: flex;
    flex-direction: column;
    gap: clamp(0.35rem, 1dvh, 0.5rem);
    text-align: center;
    font-size: 0.9rem;
}

.account-body[b-wi5bt1ldqd]  .account-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #9ca3af;
    font-size: 0.85rem;
    margin: clamp(0.5rem, 1.6dvh, 1rem) 0;
}

.account-body[b-wi5bt1ldqd]  .account-divider::before,
.account-body[b-wi5bt1ldqd]  .account-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #e5e7eb;
}

.account-body[b-wi5bt1ldqd]  .account-divider:not(:empty)::before {
    margin-right: 0.75rem;
}

.account-body[b-wi5bt1ldqd]  .account-divider:not(:empty)::after {
    margin-left: 0.75rem;
}

/* ── Informational pages (confirmations, errors) ────────────────────────── */

.account-body[b-wi5bt1ldqd]  .account-message {
    text-align: center;
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.account-body[b-wi5bt1ldqd]  .account-message.text-danger {
    color: #b91c1c;
}

.account-body[b-wi5bt1ldqd]  .alert {
    border-radius: var(--dt-radius);
    font-size: 0.9rem;
}

/* ── Short viewports: fit one screen, no scrolling ───────────────────────────
   The dvh clamps above bottom out around 700px of viewport height, and this page carries more than
   the mobile app's login does — passkey button, remember-me, four account links — so it still
   overflowed on low-resolution displays. Tighten the CHROME (logo, brand name, footnote, link
   spacing) so the FORM itself stays fully visible. Measured against 1024x600. */
@media (max-height: 760px) {
    .account-bg[b-wi5bt1ldqd] {
        padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }

    .account-card[b-wi5bt1ldqd] {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .account-logo[b-wi5bt1ldqd] { height: 56px; }

    .account-brand-name[b-wi5bt1ldqd] { font-size: 1rem; margin-top: 0.25rem; }

    .account-brand[b-wi5bt1ldqd] { margin-bottom: 0.5rem; }

    .account-body[b-wi5bt1ldqd]  h1 { font-size: 1.35rem; }

    .account-body[b-wi5bt1ldqd]  .account-links {
        font-size: 0.85rem;
        gap: 0.25rem;
        margin-top: 0.75rem;
    }

    /* Purely decorative, and it just repeats the brand name already at the top of the card. */
    .account-footnote[b-wi5bt1ldqd] { display: none; }
}

/* ── Mobile: one unified surface ─────────────────────────────────────────────
   On phones the purple frame around a small card is distracting, so drop the
   gradient and let the white card blend into a single flush surface. (Once the
   Better Pet Manager brand is set, the brand color returns here as accents —
   the button + links — rather than a full background.) */
@media (max-width: 575.98px) {
    .account-bg[b-wi5bt1ldqd] {
        background: #ffffff;
        padding: 1.5rem 1.25rem;
    }
    .account-card[b-wi5bt1ldqd] {
        max-width: none;
        box-shadow: none;
        border-radius: 0;
        padding: 1rem 0.25rem 1.5rem;
    }
    /* On the (now white) mobile surface the footnote must not be white-on-white. */
    .account-footnote[b-wi5bt1ldqd] {
        color: #6B7280;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-j7rc7h6ikw] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-j7rc7h6ikw] {
    flex: 1;
}

.sidebar[b-j7rc7h6ikw] {
    background-image: linear-gradient(180deg, #0F766E 0%, #0C4A47 70%);
}

.top-row[b-j7rc7h6ikw] {
    background-color: var(--dt-surface-2);
    border-bottom: 1px solid var(--dt-border);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-j7rc7h6ikw]  a, .top-row[b-j7rc7h6ikw]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-j7rc7h6ikw]  a:hover, .top-row[b-j7rc7h6ikw]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-j7rc7h6ikw]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

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

    .top-row[b-j7rc7h6ikw]  a, .top-row[b-j7rc7h6ikw]  .btn-link {
        margin-left: 0;
    }
}

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

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

    .top-row[b-j7rc7h6ikw] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-j7rc7h6ikw]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-j7rc7h6ikw], article[b-j7rc7h6ikw] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-i5xlj3gqtf] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    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 rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-i5xlj3gqtf] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-i5xlj3gqtf] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

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

.bi[b-i5xlj3gqtf] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-i5xlj3gqtf] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-i5xlj3gqtf] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-i5xlj3gqtf] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-i5xlj3gqtf] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-i5xlj3gqtf] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-i5xlj3gqtf] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-i5xlj3gqtf] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-i5xlj3gqtf] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-i5xlj3gqtf] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

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

    .nav-item:last-of-type[b-i5xlj3gqtf] {
        padding-bottom: 1rem;
    }

    .nav-item[b-i5xlj3gqtf]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: var(--dt-radius);
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-i5xlj3gqtf]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-i5xlj3gqtf]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-i5xlj3gqtf] {
    display: none;
}

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

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

    .nav-scrollable[b-i5xlj3gqtf] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-7qnwcioa7y],
.components-reconnect-repeated-attempt-visible[b-7qnwcioa7y],
.components-reconnect-failed-visible[b-7qnwcioa7y],
.components-pause-visible[b-7qnwcioa7y],
.components-resume-failed-visible[b-7qnwcioa7y],
.components-rejoining-animation[b-7qnwcioa7y] {
    display: none;
}

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


#components-reconnect-modal[b-7qnwcioa7y] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: var(--dt-radius);
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-7qnwcioa7y 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-7qnwcioa7y] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: var(--dt-radius);
}

    #components-reconnect-modal button:hover[b-7qnwcioa7y] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-7qnwcioa7y] {
        background-color: #6b9ed2;
    }

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

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

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

@keyframes components-rejoining-animation-b-7qnwcioa7y {
    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/SetupLayout.razor.rz.scp.css */
/* Full-viewport takeover for the first-run wizard (S156 minimalist redesign).
   flex column + min-height:100vh so the wizard body can center itself with margin:auto when it fits,
   and the page scrolls naturally when a step is taller than the viewport. */
.setup-fullscreen[b-5bemno7cp5] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 0;
    /* Fixed LIGHT surface (like the login card) — the wizard is the screen right after login and must
       look right regardless of the user's dark/light theme. Pinning the scheme + colors here keeps
       dark-mode tokens from turning the inputs black / the text washed-out. */
    background: #f5f6f8;
    color: #1f2937;
    color-scheme: light;
}
/* /Components/Pages/SetupWizard.razor.rz.scp.css */
/* First-run setup wizard — minimalist, boxless, premium first impression (S156).
   No card/boundary boxes: content sits directly on the page, centered both axes; the "box" feel
   comes from large inputs with a soft drop shadow, not bordered containers. */

/* Let .setup-center be the direct flex child of the layout so margin:auto centers it vertically. */
.setup-wizard[b-wur0tef971] {
    display: contents;
}

/* Full-width top bar: step + exit on the left, Back/Continue on the right. */
.setup-topbar[b-wur0tef971] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    width: 100%;
    padding: 0.7rem clamp(1rem, 3vw, 2rem);
    background: #e9ecef;
    border-bottom: 1px solid #dbe0e5;
    font-size: 0.9rem;
}
.setup-topbar-left[b-wur0tef971] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
    flex-wrap: wrap;
}
.setup-topbar-right[b-wur0tef971] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
}
.setup-navbtn[b-wur0tef971] {
    border-radius: 10px;
    font-weight: 600;
    padding: 0.4rem 1.15rem;
    white-space: nowrap;
}

.setup-step[b-wur0tef971] {
    color: #6b7280;
    font-weight: 600;
}

.setup-exit[b-wur0tef971] {
    color: var(--dt-primary);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.setup-exit:hover[b-wur0tef971] {
    text-decoration: underline;
}

/* Centered content column — centers when it fits, page scrolls when a step is taller. */
.setup-center[b-wur0tef971] {
    margin: auto;
    width: 100%;
    max-width: 820px;
    padding: 1.75rem clamp(1rem, 4vw, 2.5rem) 2rem;
    text-align: center;
}

/* Large platform pitty on every step. */
.setup-pitty[b-wur0tef971] {
    width: clamp(72px, 10vw, 96px);
    height: auto;
    display: block;
    margin: 0 auto 0.85rem;
}

/* Their uploaded logo, shown in the pitty's place once set (wider aspect than the square pitty). */
.setup-brandmark[b-wur0tef971] {
    max-width: 260px;
    max-height: 84px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto 0.85rem;
    object-fit: contain;
}

/* Logo / app-icon preview box: neutral card in the wizard, not the sidebar-teal with a dark border. */
.setup-center[b-wur0tef971]  .dt-logo-preview {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}
.setup-center[b-wur0tef971]  .dt-logo-placeholder {
    color: #94a3b8 !important;
}

/* Headings + lead copy. */
/* Deep brand teal — readable on white (pure #0ABAB5 fails contrast), on-brand, not washed-out grey. */
.setup-h1[b-wur0tef971] {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.6rem;
    color: var(--dt-primary);
}

.setup-h2[b-wur0tef971],
.setup-center > h3[b-wur0tef971] {
    font-size: clamp(1.5rem, 3vw, 1.95rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.4rem;
    color: var(--dt-primary);
}

.setup-optional[b-wur0tef971] {
    font-size: 0.55em;
    font-weight: 600;
    color: var(--dt-text-muted, #6b7280);
    vertical-align: middle;
}

.setup-lead[b-wur0tef971],
.setup-center > p.text-muted[b-wur0tef971] {
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.55;
    max-width: 40rem;
    margin: 0 auto 1.25rem;
}

/* Bootstrap's .text-muted sets its color with !important and flips light in dark mode, so it beat our
   slate on steps 5–7. Force the same readable slate for every muted line inside the wizard (step 5–7
   leads + step 7's card descriptions) to match steps 1–4. */
.setup-center .text-muted[b-wur0tef971] {
    color: #475569 !important;
}

/* "What's already good to go" facts on the intro step — icons match the app's own. */
.setup-facts[b-wur0tef971] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 34rem;
    margin: 0.5rem auto 0;
    text-align: left;
}
.setup-fact[b-wur0tef971] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}
.setup-fact > i[b-wur0tef971] {
    color: var(--dt-primary);
    font-size: 1.35rem;
    line-height: 1.4;
    flex-shrink: 0;
}
.setup-fact-title[b-wur0tef971] {
    font-weight: 700;
    color: #1f2937;
}
.setup-fact-text[b-wur0tef971] {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
}

.setup-cta[b-wur0tef971] {
    margin-top: 0.5rem;
}

/* One-line contextual note (e.g. the Pack Walk heads-up) — no box, just a centered tinted line. */
.setup-note[b-wur0tef971] {
    display: block;
    text-align: center;
    color: #334155;
    background: transparent;
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.5;
    margin: -0.5rem auto 1.25rem;
    max-width: 34rem;
}
.setup-note i[b-wur0tef971] {
    color: var(--dt-primary);
}
.setup-note strong[b-wur0tef971] {
    font-weight: 700;
    white-space: nowrap;
}

/* KILL every boundary box — cards, list-groups — leave only the content. */
.setup-center .card[b-wur0tef971],
.setup-center .card-body[b-wur0tef971],
.setup-card[b-wur0tef971],
.setup-list-card[b-wur0tef971],
.setup-center .list-group[b-wur0tef971],
.setup-center .list-group-item[b-wur0tef971] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Two-column steps: form on the left, live running list on the right. */
.setup-split[b-wur0tef971] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    text-align: left;
    align-items: stretch;
    margin-bottom: 1.5rem;
}

/* Hairline divider so the running-list column reads as an intentional area, not empty space. */
@media (min-width: 721px) {
    .setup-list-card[b-wur0tef971] {
        border-left: 1px solid #eaecef !important;
        padding-left: clamp(1.5rem, 4vw, 3rem) !important;
        min-height: 220px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.setup-card[b-wur0tef971],
.setup-center .card[b-wur0tef971] {
    text-align: left;
}

.setup-field[b-wur0tef971] {
    margin-bottom: 0.8rem;
}

/* LARGE text boxes with a soft drop shadow (the premium "float", no container box). */
.setup-center .form-control[b-wur0tef971],
.setup-center .form-select[b-wur0tef971],
.setup-center .input-group-text[b-wur0tef971] {
    font-size: 1.05rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background-color: #ffffff;
    color: #1f2937;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.setup-center .form-control[b-wur0tef971]::placeholder {
    color: #9ca3af;
}

/* Color pickers: the swatch has a fixed Bootstrap height — stretch it to match the enlarged text
   field so the Primary/Secondary pairs are one clean, equal-height control. */
.setup-center .form-control-color[b-wur0tef971] {
    height: auto;
    align-self: stretch;
    min-height: 0;
    width: 3.25rem;
    padding: 0.35rem 0.45rem;
    flex: 0 0 auto;
}
.setup-center .form-check-input[b-wur0tef971] {
    background-color: #ffffff;
    border-color: #94a3b8;
}
.setup-center .form-check-input:checked[b-wur0tef971] {
    background-color: var(--dt-primary);
    border-color: var(--dt-primary);
}

.setup-center .form-control:focus[b-wur0tef971],
.setup-center .form-select:focus[b-wur0tef971] {
    border-color: var(--dt-primary);
    box-shadow: 0 8px 26px rgba(10, 186, 181, 0.18);
}

/* Keep the $ / % adornments visually joined to their input. */
.setup-center .input-group > .form-control:not(:first-child)[b-wur0tef971],
.setup-center .input-group > .input-group-text:not(:first-child)[b-wur0tef971] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.setup-center .input-group > .form-control:not(:last-child)[b-wur0tef971],
.setup-center .input-group > .input-group-text:not(:last-child)[b-wur0tef971] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.setup-center .input-group-text[b-wur0tef971] {
    box-shadow: none;
    background: #f1f5f9;
    color: #475569;
    font-weight: 600;
}

.setup-center .form-label[b-wur0tef971] {
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: #374151;
}

.setup-center .form-check-label[b-wur0tef971] {
    color: #374151;
}

.setup-center .form-text[b-wur0tef971] {
    color: #6b7280;
}

.setup-add[b-wur0tef971] {
    margin-top: 0.5rem;
    border-radius: 14px;
    padding-block: 0.8rem;
}

/* Radio choices (tax / pay) — airy, tappable rows. */
.setup-radio[b-wur0tef971] {
    padding: 0.5rem 0;
    font-size: 1.05rem;
}
.setup-radio .form-check-input[b-wur0tef971] {
    transform: scale(1.2);
    margin-top: 0.35rem;
}

/* Running list (right column). */
.setup-list-title[b-wur0tef971] {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
}

.setup-list[b-wur0tef971] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.setup-list-item[b-wur0tef971] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0;
    color: #1f2937;
    border-bottom: 1px solid #eef0f3;
    animation: setup-list-in-b-wur0tef971 0.18s ease;
}
.setup-list-item:last-child[b-wur0tef971] {
    border-bottom: 0;
}

@keyframes setup-list-in-b-wur0tef971 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.setup-list-end[b-wur0tef971] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.setup-remove[b-wur0tef971] {
    border: 0;
    background: transparent;
    color: #9ca3af;
    padding: 0.25rem 0.4rem;
    border-radius: 8px;
    line-height: 1;
}
.setup-remove:hover:not(:disabled)[b-wur0tef971] {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
}

/* Empty state for the running list. */
.setup-empty[b-wur0tef971] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    color: #94a3b8;
    padding: 1.5rem 0.5rem;
}
.setup-empty i[b-wur0tef971] {
    font-size: 1.75rem;
    opacity: 0.7;
}

/* Nav row (Back / Continue) — used on every step. */
.setup-nav[b-wur0tef971],
.setup-center .d-flex.justify-content-between[b-wur0tef971] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem auto 0;
    text-align: left;
}
.setup-nav .btn[b-wur0tef971],
.setup-center .d-flex.justify-content-between .btn[b-wur0tef971] {
    min-width: 9rem;
}

.setup-center .btn-lg[b-wur0tef971],
.setup-nav .btn[b-wur0tef971],
.setup-center .d-flex.justify-content-between .btn[b-wur0tef971] {
    border-radius: 14px;
    padding: 0.7rem 1.6rem;
    font-weight: 600;
}

/* Teal (primary) buttons: white label — the default dark-on-teal reads harsh. */
.setup-center .btn-primary[b-wur0tef971],
.setup-topbar .btn-primary[b-wur0tef971] {
    color: #ffffff !important;
    border-color: transparent !important;
}

/* Kill the dark hover/focus border + focus ring on the wizard buttons (keep the bg hover feedback). */
.setup-center .btn:hover[b-wur0tef971],
.setup-center .btn:focus[b-wur0tef971],
.setup-center .btn:active[b-wur0tef971],
.setup-center .btn:focus-visible[b-wur0tef971],
.setup-topbar .btn:hover[b-wur0tef971],
.setup-topbar .btn:focus[b-wur0tef971],
.setup-topbar .btn:active[b-wur0tef971],
.setup-topbar .btn:focus-visible[b-wur0tef971] {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Stack the two columns on narrow screens. */
@media (max-width: 720px) {
    .setup-split[b-wur0tef971] {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
    .setup-topright[b-wur0tef971] {
        gap: 0.75rem;
        font-size: 0.8rem;
    }
}