/* /Components/Layout/AdminLayout.razor.rz.scp.css */
.admin-shell[b-68nkk0vw8l] {
    display: grid;
    grid-template-columns: 232px 1fr;
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-ui);
}

/* --- sidebar --- */

.admin-sidebar[b-68nkk0vw8l] {
    display: flex;
    flex-direction: column;
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    padding: 0.9rem 0.75rem 0.9rem;
    position: sticky;
    top: 0;
    height: 100vh;
}

.admin-brand[b-68nkk0vw8l] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem 1.2rem;
}

.brand-mark[b-68nkk0vw8l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 7px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    flex-shrink: 0;
}

.brand-text[b-68nkk0vw8l] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-name[b-68nkk0vw8l] {
    font-weight: 600;
    font-size: 0.92rem;
    color: #fff;
}

.brand-tag[b-68nkk0vw8l] {
    font-size: 0.68rem;
    color: var(--sidebar-fg-soft);
}

.admin-nav[b-68nkk0vw8l] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
}

.nav-group-label[b-68nkk0vw8l] {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sidebar-fg-soft);
    margin: 0.9rem 0.6rem 0.3rem;
}

.admin-nav[b-68nkk0vw8l]  .admin-nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--sidebar-fg);
    text-decoration: none;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.admin-nav[b-68nkk0vw8l]  .admin-nav-link:hover {
    background: var(--sidebar-active-bg);
    color: #fff;
    text-decoration: none;
}

.admin-nav[b-68nkk0vw8l]  .admin-nav-link.active {
    background: var(--sidebar-active-bg);
    color: #fff;
}

.admin-nav[b-68nkk0vw8l]  .admin-nav-link.active .nav-icon {
    color: var(--accent);
}

.nav-icon[b-68nkk0vw8l] {
    display: inline-flex;
    align-items: center;
    color: var(--sidebar-fg-soft);
}

.admin-nav[b-68nkk0vw8l]  .admin-nav-link:hover .nav-icon {
    color: #fff;
}

/* --- footer: theme + user --- */

.admin-footer[b-68nkk0vw8l] {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.theme-toggle[b-68nkk0vw8l] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--sidebar-fg);
    background: none;
    border: none;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
}

.theme-toggle:hover[b-68nkk0vw8l] {
    background: var(--sidebar-active-bg);
    color: #fff;
}

.admin-user[b-68nkk0vw8l] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.5rem;
}

.user-avatar[b-68nkk0vw8l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    flex-shrink: 0;
}

.admin-user-name[b-68nkk0vw8l] {
    flex: 1;
    font-size: 0.78rem;
    color: var(--sidebar-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-logout[b-68nkk0vw8l] {
    display: inline-flex;
    align-items: center;
    color: var(--sidebar-fg-soft);
    background: none;
    border: none;
    padding: 0.3rem;
    border-radius: 5px;
    cursor: pointer;
}

.admin-logout:hover[b-68nkk0vw8l] {
    background: var(--sidebar-active-bg);
    color: #fff;
}

/* --- content --- */

.admin-main[b-68nkk0vw8l] {
    padding: 2rem 2.75rem 3rem;
    width: 100%;
}

#blazor-error-ui[b-68nkk0vw8l] {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--card);
    border-top: 2px solid var(--bad);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    padding: 0.8rem 2.5rem 0.8rem 1.25rem;
    box-shadow: var(--shadow-lg);
}

#blazor-error-ui .reload[b-68nkk0vw8l] {
    color: var(--accent);
}

#blazor-error-ui .dismiss[b-68nkk0vw8l] {
    position: absolute;
    right: 1rem;
    top: 0.8rem;
    cursor: pointer;
}

@media (max-width: 900px) {
    .admin-shell[b-68nkk0vw8l] {
        grid-template-columns: 1fr;
        /* Without this, the two implicit auto rows (sidebar, main) share
           the leftover min-height 50/50 under Grid's default stretch,
           ballooning the sidebar row and centering its content in it. */
        align-content: start;
    }

    .admin-sidebar[b-68nkk0vw8l] {
        position: static;
        height: auto;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        padding: 0.6rem 1rem;
    }

    .admin-brand[b-68nkk0vw8l] {
        padding: 0;
    }

    .nav-group-label[b-68nkk0vw8l] {
        display: none;
    }

    .admin-nav[b-68nkk0vw8l] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.2rem;
    }

    .admin-footer[b-68nkk0vw8l] {
        border-top: none;
        padding-top: 0;
        flex-direction: row;
        align-items: center;
        margin-left: auto;
    }

    .admin-user-name[b-68nkk0vw8l] {
        display: none;
    }

    .admin-main[b-68nkk0vw8l] {
        padding: 1.4rem 1rem 2rem;
    }
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* Login chrome — centred "vault" (design 5a).
   Colours come from the --lv-* tokens in app.css. */

.auth-shell[b-wjggac6l0o] {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background:
        radial-gradient(120% 80% at 50% 120%, var(--lv-vignette), transparent 55%),
        var(--lv-bg);
    color: var(--lv-fg);
    font-family: "Schibsted Grotesk", var(--font-ui);
}

/* layered glows */
.auth-shell[b-wjggac6l0o]::before,
.auth-shell[b-wjggac6l0o]::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.auth-shell[b-wjggac6l0o]::before {
    top: -200px;
    left: 50%;
    width: 820px;
    height: 520px;
    transform: translateX(-50%);
    background: radial-gradient(circle, var(--lv-glow-1), transparent 60%);
    animation: vault-drift-b-wjggac6l0o 16s ease-in-out infinite;
}

.auth-shell[b-wjggac6l0o]::after {
    top: 60px;
    left: 20%;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, var(--lv-glow-2), transparent 62%);
}

@keyframes vault-drift-b-wjggac6l0o {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50%      { transform: translate(calc(-50% + 30px), -24px) scale(1.08); }
}

.auth-topbar[b-wjggac6l0o] {
    position: relative;
    width: 100%;
    padding: 26px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.auth-wordmark[b-wjggac6l0o] {
    font: 800 17px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg);
    letter-spacing: -0.01em;
}

.auth-actions[b-wjggac6l0o] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.auth-note[b-wjggac6l0o] {
    font: 500 12.5px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg-50);
}

.theme-btn[b-wjggac6l0o] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--lv-line-12);
    background: transparent;
    color: var(--lv-fg-60);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.theme-btn:hover[b-wjggac6l0o] {
    color: var(--lv-fg);
    border-color: var(--lv-line-hover);
}

.theme-btn svg[b-wjggac6l0o] {
    width: 16px;
    height: 16px;
}

.auth-body[b-wjggac6l0o] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.auth-foot[b-wjggac6l0o] {
    position: relative;
    padding: 0 20px 28px;
    display: flex;
    align-items: center;
    gap: 8px;
    font: 400 11.5px "JetBrains Mono", monospace;
    color: var(--lv-fg-32);
    text-align: center;
}

.auth-foot-dot[b-wjggac6l0o] {
    color: var(--lv-teal);
}

@media (prefers-reduced-motion: reduce) {
    .auth-shell[b-wjggac6l0o]::before { animation: none; }
}

@media (max-width: 520px) {
    .auth-topbar[b-wjggac6l0o] {
        padding: 20px;
    }
}
/* /Components/Layout/LandingLayout.razor.rz.scp.css */
/* Landing chrome — "vault" shell (design 7a).
   Colours come from the --lv-* tokens in app.css, which resolve
   dark (the design) or light from the theme toggle. */

.landing-shell[b-ddiacmj9o7] {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--lv-bg);
    color: var(--lv-fg);
    font-family: "Schibsted Grotesk", var(--font-ui);
}

/* ambient glows */
.landing-shell[b-ddiacmj9o7]::before,
.landing-shell[b-ddiacmj9o7]::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.landing-shell[b-ddiacmj9o7]::before {
    top: -220px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 640px;
    background: radial-gradient(circle, var(--lv-glow-1), transparent 58%);
}

.landing-shell[b-ddiacmj9o7]::after {
    top: 520px;
    left: -140px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, var(--lv-glow-2), transparent 62%);
}

.landing-header[b-ddiacmj9o7],
.landing-main[b-ddiacmj9o7],
.landing-footer[b-ddiacmj9o7] {
    position: relative;
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding-left: 56px;
    padding-right: 56px;
}

.landing-header[b-ddiacmj9o7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 26px;
    padding-bottom: 26px;
}

.brand[b-ddiacmj9o7] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-mark[b-ddiacmj9o7] {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: block;
}

.brand-name[b-ddiacmj9o7] {
    font: 800 16px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg);
    letter-spacing: -0.01em;
}

.header-actions[b-ddiacmj9o7] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.theme-btn[b-ddiacmj9o7] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--lv-line-12);
    background: transparent;
    color: var(--lv-fg-60);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.theme-btn:hover[b-ddiacmj9o7] {
    color: var(--lv-fg);
    border-color: var(--lv-line-hover);
}

.theme-btn svg[b-ddiacmj9o7] {
    width: 16px;
    height: 16px;
}

.login-link[b-ddiacmj9o7] {
    height: 36px;
    padding: 0 18px;
    border-radius: 8px;
    border: 1px solid var(--lv-line-strong);
    display: inline-flex;
    align-items: center;
    font: 600 11px "JetBrains Mono", monospace;
    letter-spacing: 0.12em;
    color: var(--lv-fg);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.login-link:hover[b-ddiacmj9o7] {
    color: var(--lv-fg);
    border-color: var(--lv-line-hover);
    background: var(--lv-surface-3);
}

.profile-chip[b-ddiacmj9o7] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    height: 36px;
    padding: 0 14px 0 4px;
    border-radius: 999px;
    border: 1px solid var(--lv-line-strong);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.profile-chip:hover[b-ddiacmj9o7] {
    border-color: var(--lv-line-hover);
    background: var(--lv-surface-3);
}

.avatar[b-ddiacmj9o7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(150deg, #7b6bff, #4b3fc7);
    color: #fff;
    font: 600 11px "Schibsted Grotesk", var(--font-ui);
}

.profile-name[b-ddiacmj9o7] {
    font: 400 11px "JetBrains Mono", monospace;
    color: var(--lv-fg-60);
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-main[b-ddiacmj9o7] {
    flex: 1;
}

.landing-footer[b-ddiacmj9o7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 36px;
    padding-top: 34px;
    padding-bottom: 40px;
    border-top: 1px solid var(--lv-footline);
    font: 400 12px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg-40);
}

.landing-footer a[b-ddiacmj9o7] {
    font: 400 12px "JetBrains Mono", monospace;
    color: var(--lv-violet-eyebrow);
    text-decoration: none;
}

.landing-footer a:hover[b-ddiacmj9o7] {
    text-decoration: underline;
}

@media (max-width: 720px) {
    .landing-header[b-ddiacmj9o7],
    .landing-main[b-ddiacmj9o7],
    .landing-footer[b-ddiacmj9o7] {
        padding-left: 20px;
        padding-right: 20px;
    }

    .profile-name[b-ddiacmj9o7] {
        display: none;
    }

    .landing-footer[b-ddiacmj9o7] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-sbh0pvfxkl] {
    position: relative;
    display: flex;
    flex-direction: column;
}

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

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

.top-row[b-sbh0pvfxkl] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

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

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

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

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

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

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

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

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

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

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

#blazor-error-ui[b-sbh0pvfxkl] {
    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-sbh0pvfxkl] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-aoahhxt9ye] {
    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-aoahhxt9ye] {
    background-color: rgba(255, 255, 255, 0.5);
}

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

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

.bi[b-aoahhxt9ye] {
    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-aoahhxt9ye] {
    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-aoahhxt9ye] {
    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-aoahhxt9ye] {
    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");
}

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

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

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

    .nav-item[b-aoahhxt9ye]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 8px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

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

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

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

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

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

    .nav-scrollable[b-aoahhxt9ye] {
        /* 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/PortalLayout.razor.rz.scp.css */
.portal-shell[b-uep68zxsm0] {

    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        
        var(--paper);
    color: var(--ink);
    font-family: var(--font-ui);
}

.portal-header[b-uep68zxsm0] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    padding: 2.25rem 1.5rem 1.5rem;
}

.wordmark[b-uep68zxsm0] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    color: var(--ink);
}

.header-rule[b-uep68zxsm0] {
    flex: 1;
    height: 1px;
    background: var(--line);
}

.header-tag[b-uep68zxsm0] {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.portal-main[b-uep68zxsm0] {
    flex: 1;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
}

.portal-footer[b-uep68zxsm0] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 2rem;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
}

.portal-footer a[b-uep68zxsm0] {
    color: var(--copper);
    text-decoration: none;
}

.portal-footer a:hover[b-uep68zxsm0] {
    text-decoration: underline;
}

#blazor-error-ui[b-uep68zxsm0] {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fdf3d7;
    border-top: 1px solid var(--copper, #b5622e);
    color: var(--ink, #17302a);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    padding: 0.8rem 2.5rem 0.8rem 1.25rem;
}

#blazor-error-ui .reload[b-uep68zxsm0] {
    color: var(--copper, #b5622e);
}

#blazor-error-ui .dismiss[b-uep68zxsm0] {
    position: absolute;
    right: 1rem;
    top: 0.8rem;
    cursor: pointer;
}

@media (max-width: 768px) {
    .portal-header[b-uep68zxsm0] {
        padding: 1.5rem 1rem 1rem;
    }

    .portal-main[b-uep68zxsm0] {
        padding: 0 1rem 3rem;
    }

    .portal-footer[b-uep68zxsm0] {
        flex-direction: column;
        gap: 0.35rem;
        padding: 1rem;
    }
}

.theme-btn[b-uep68zxsm0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink-soft);
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.theme-btn:hover[b-uep68zxsm0] {
    color: var(--ink);
    border-color: var(--accent);
}

.theme-btn svg[b-uep68zxsm0] {
    width: 16px;
    height: 16px;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-kbm7j25jbd],
.components-reconnect-repeated-attempt-visible[b-kbm7j25jbd],
.components-reconnect-failed-visible[b-kbm7j25jbd],
.components-pause-visible[b-kbm7j25jbd],
.components-resume-failed-visible[b-kbm7j25jbd],
.components-rejoining-animation[b-kbm7j25jbd] {
    display: none;
}

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


#components-reconnect-modal[b-kbm7j25jbd] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    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-kbm7j25jbd 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-kbm7j25jbd] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 8px;
}

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

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

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

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

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

@keyframes components-rejoining-animation-b-kbm7j25jbd {
    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/Pages/Admin/Auth/AdminLogin.razor.rz.scp.css */
/* Login card — design 5a "vault, refined".
   Colours come from the --lv-* tokens in app.css. */

.login-card[b-grwlqo2gl5] {
    width: 420px;
    max-width: 100%;
    border-radius: 20px;
    padding: 38px 40px 30px;
    background: var(--lv-card-bg);
    border: 1px solid var(--lv-card-line);
    box-shadow: var(--lv-card-shadow), var(--lv-card-inset);
    animation: rise-in-b-grwlqo2gl5 0.5s ease-out;
}

.login-head[b-grwlqo2gl5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 22px;
}

.login-mark[b-grwlqo2gl5] {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: block;
    box-shadow: 0 12px 28px -6px rgba(109, 92, 245, 0.75);
}

.login-eyebrow[b-grwlqo2gl5] {
    margin-top: 16px;
    font: 600 10.5px "JetBrains Mono", monospace;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lv-violet-eyebrow);
}

.login-title[b-grwlqo2gl5] {
    font: 700 24px/1.15 "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg);
    margin: 8px 0 0;
    letter-spacing: -0.015em;
}

/* --- Microsoft SSO --- */

.ms-button[b-grwlqo2gl5] {
    width: 100%;
    height: 46px;
    border-radius: 9px;
    border: 1px solid var(--lv-line-strong);
    background: var(--lv-surface);
    color: var(--lv-fg);
    font: 500 13.5px "Schibsted Grotesk", var(--font-ui);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
    cursor: not-allowed;
}

.ms-logo[b-grwlqo2gl5] {
    display: grid;
    grid-template-columns: 8px 8px;
    grid-template-rows: 8px 8px;
    gap: 2px;
}

.ms-logo i:nth-child(1)[b-grwlqo2gl5] { background: #f25022; }
.ms-logo i:nth-child(2)[b-grwlqo2gl5] { background: #7fba00; }
.ms-logo i:nth-child(3)[b-grwlqo2gl5] { background: #00a4ef; }
.ms-logo i:nth-child(4)[b-grwlqo2gl5] { background: #ffb900; }

.login-or[b-grwlqo2gl5] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.login-or span[b-grwlqo2gl5] {
    flex: 1;
    height: 1px;
    background: var(--lv-line-09);
}

.login-or em[b-grwlqo2gl5] {
    font: 400 11px "JetBrains Mono", monospace;
    font-style: normal;
    color: var(--lv-fg-35);
}

/* --- fields --- */

.login-label[b-grwlqo2gl5] {
    display: block;
    font: 500 12px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg-60);
    margin: 0 0 8px;
}

.login-label-row[b-grwlqo2gl5] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.login-forgot[b-grwlqo2gl5] {
    font: 500 12px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-violet-eyebrow);
    text-decoration: none;
}

.login-forgot:hover[b-grwlqo2gl5] {
    text-decoration: underline;
}

.login-card[b-grwlqo2gl5]  input[type="email"],
.login-card[b-grwlqo2gl5]  input[type="password"],
.login-card[b-grwlqo2gl5]  input[type="text"] {
    width: 100%;
    height: 46px;
    border-radius: 9px;
    border: 1px solid var(--lv-line-10);
    background: var(--lv-field-bg);
    color: var(--lv-fg);
    font: 400 14px "Schibsted Grotesk", var(--font-ui);
    padding: 0 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-card[b-grwlqo2gl5]  input::placeholder {
    color: var(--lv-fg-35);
}

.login-card[b-grwlqo2gl5]  input:focus {
    outline: none;
    border-color: var(--lv-violet);
    box-shadow: 0 0 0 3px var(--lv-violet-soft);
}

/* email block spacing, then the password block */
.login-card[b-grwlqo2gl5]  input[type="email"] {
    margin-bottom: 13px;
}

.password-wrap[b-grwlqo2gl5] {
    position: relative;
    margin-bottom: 18px;
}

.password-wrap[b-grwlqo2gl5]  input {
    padding-right: 44px;
}

.password-toggle[b-grwlqo2gl5] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--lv-fg-40);
    cursor: pointer;
    padding: 0;
    line-height: 0;
}

.password-toggle:hover[b-grwlqo2gl5] {
    color: var(--lv-fg-60);
}

.password-toggle svg[b-grwlqo2gl5] {
    width: 17px;
    height: 17px;
}

.login-button[b-grwlqo2gl5] {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 9px;
    background: var(--lv-violet);
    color: #fff;
    font: 600 14px "Schibsted Grotesk", var(--font-ui);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.login-button:hover[b-grwlqo2gl5] {
    background: var(--lv-violet-2);
}

.login-error[b-grwlqo2gl5],
.login-card[b-grwlqo2gl5]  .login-error {
    display: block;
    color: var(--bad);
    font: 400 12px "Schibsted Grotesk", var(--font-ui);
    margin: 0 0 10px;
}

@keyframes rise-in-b-grwlqo2gl5 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-card[b-grwlqo2gl5] { animation: none; }
}
/* /Components/Pages/Admin/Clients/ClientContactsPanel.razor.rz.scp.css */
.panel-hint[b-7fmmk580d2] {
    margin: 0 0 0.6rem;
    font-size: 0.82rem;
    color: var(--ink-soft);
}

.contact-row[b-7fmmk580d2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
}

.contact-row:last-of-type[b-7fmmk580d2] {
    border-bottom: none;
}

.contact-info[b-7fmmk580d2] {
    min-width: 0;
}

.contact-name[b-7fmmk580d2] {
    margin: 0 0 0.15rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
}

.primary-badge[b-7fmmk580d2] {
    margin-left: 0.4rem;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    vertical-align: middle;
}

.contact-line[b-7fmmk580d2] {
    display: block;
    font-size: 0.8rem;
    color: var(--accent);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.contact-line:hover[b-7fmmk580d2] {
    text-decoration: underline;
}

.contact-actions[b-7fmmk580d2] {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}

.mini-action[b-7fmmk580d2] {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-soft);
    background: none;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.25rem 0.55rem;
    cursor: pointer;
}

.mini-action:hover[b-7fmmk580d2] {
    background: var(--surface-2);
}

.mini-action.danger[b-7fmmk580d2] {
    color: var(--bad);
}

.mini-action:disabled[b-7fmmk580d2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.contact-form[b-7fmmk580d2] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.6rem;
}

/* ::deep — InputText renders the <input>, so it carries no scope attribute. */
[b-7fmmk580d2] .mini-input {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-1, var(--card));
    color: var(--ink);
    width: 100%;
    box-sizing: border-box;
}

[b-7fmmk580d2] .validation-message {
    margin: -0.15rem 0 0;
    font-size: 0.78rem;
}

.mini-check[b-7fmmk580d2] {
    font-size: 0.8rem;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.mini-form-actions[b-7fmmk580d2] {
    display: flex;
    gap: 0.4rem;
}

.panel-add[b-7fmmk580d2] {
    margin-top: 0.5rem;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.panel-add:hover[b-7fmmk580d2] {
    text-decoration: underline;
}
/* /Components/Pages/Admin/Clients/ClientForm.razor.rz.scp.css */
.empty-note[b-yxn6zm4q4p] {
    color: var(--ink-soft);
    padding: 1.5rem 0;
}

/* --- two-column detail layout (edit mode): form left, Xero-style panel right --- */

.detail-layout[b-yxn6zm4q4p] {
    display: flex;
    gap: 1.4rem;
    align-items: flex-start;
}

.detail-main[b-yxn6zm4q4p] {
    flex: 1;
    min-width: 0;
}

    /* In the two-column edit layout the form sits flush left at a comfortable
   reading width instead of floating centred with lopsided whitespace. */
    .detail-main .detail-card[b-yxn6zm4q4p] {
        max-width: 42rem;
        margin: 0;
    }

    /* Smaller inline avatar in edit mode — the identity is already in the page
   header, no need for a centred hero circle. */
    .detail-main .detail-avatar[b-yxn6zm4q4p] {
        width: 3.2rem;
        height: 3.2rem;
        font-size: 1.05rem;
        margin: 0 0 1.4rem;
    }

.side-hint[b-yxn6zm4q4p] {
    margin: 0;
    font-size: 0.82rem;
    color: var(--ink-soft);
}

.detail-side[b-yxn6zm4q4p] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: auto;
}

@media (max-width: 1000px) {
    .detail-layout[b-yxn6zm4q4p] {
        flex-direction: column;
    }

    .detail-side[b-yxn6zm4q4p] {
        width: 100%;
    }
}

.side-card[b-yxn6zm4q4p] {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
}

.side-title[b-yxn6zm4q4p] {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.7rem;
    color: var(--ink);
}

.side-row[b-yxn6zm4q4p] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 0.45rem;
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

    .side-row a[b-yxn6zm4q4p] {
        color: var(--accent);
        text-decoration: none;
    }

        .side-row a:hover[b-yxn6zm4q4p] {
            text-decoration: underline;
        }

.side-row-label[b-yxn6zm4q4p] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    flex-shrink: 0;
    width: 4.2rem;
}

.side-assign[b-yxn6zm4q4p] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

    .side-assign:last-child[b-yxn6zm4q4p] {
        margin-bottom: 0;
    }

    .side-assign[b-yxn6zm4q4p]  .dd-wrap {
        flex: 1;
    }

.detail-head[b-yxn6zm4q4p] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.6rem;
}

.detail-back[b-yxn6zm4q4p] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 2.2rem;
    padding: 0 0.9rem 0 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--card);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

    .detail-back:hover[b-yxn6zm4q4p] {
        background: var(--surface-2);
    }

.detail-titles[b-yxn6zm4q4p] {
    min-width: 0;
}

.detail-title-row[b-yxn6zm4q4p] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.detail-name[b-yxn6zm4q4p] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    margin: 0;
    color: var(--ink);
}

.detail-email[b-yxn6zm4q4p] {
    font-size: 0.85rem;
    color: var(--copper, var(--accent));
    margin: 0.1rem 0 0;
}

.detail-tabs[b-yxn6zm4q4p] {
    display: flex;
    gap: 1.4rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1.6rem;
}

.detail-tab[b-yxn6zm4q4p] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.4rem 0.2rem 0.7rem;
    margin-bottom: -1px;
    cursor: pointer;
}

    .detail-tab.active[b-yxn6zm4q4p] {
        color: var(--accent);
        border-bottom-color: var(--accent);
    }

.flash[b-yxn6zm4q4p] {
    font-size: 0.88rem;
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    margin: 0 auto 1rem;
    max-width: 32rem;
}

.flash-error[b-yxn6zm4q4p] {
    color: var(--bad);
    background: color-mix(in srgb, var(--bad) 12%, transparent);
}

.detail-card[b-yxn6zm4q4p] {
    margin: 0 auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    padding: 2rem 2rem 2.2rem;
}

.detail-empty[b-yxn6zm4q4p] {
    text-align: center;
    color: var(--ink-soft);
}

.detail-avatar[b-yxn6zm4q4p] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 auto 1.6rem;
}

.field-label[b-yxn6zm4q4p] {
    display: block;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--ink);
    margin: 1rem 0 0.4rem;
}

    .field-label:first-of-type[b-yxn6zm4q4p] {
        margin-top: 0;
    }

/* ::deep — InputText renders the <input>, so it carries no scope attribute. */
[b-yxn6zm4q4p] .field-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.92rem;
    padding: 0.7rem 0.8rem;
}

[b-yxn6zm4q4p] .field-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--card);
}

[b-yxn6zm4q4p] .validation-message {
    margin: 0.3rem 0 0;
    font-size: 0.82rem;
}

.field-row[b-yxn6zm4q4p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-top: 1rem;
}

    /* Labels inside the two-column row are each :first-of-type in their own cell,
   so the shared row margin above replaces their individual top margins. */
    .field-row .field-label[b-yxn6zm4q4p] {
        margin-top: 0;
    }

.field-toggle[b-yxn6zm4q4p] {
    display: inline-block;
    margin-top: 0.4rem;
    background: none;
    border: none;
    padding: 0;
    color: var(--copper, var(--accent));
    font-size: 0.82rem;
    text-decoration: underline;
    cursor: pointer;
}

.detail-note[b-yxn6zm4q4p] {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    margin-top: 1.4rem;
    padding: 0.9rem 1rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.detail-note-icon[b-yxn6zm4q4p] {
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.detail-note p[b-yxn6zm4q4p] {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.form-actions[b-yxn6zm4q4p] {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    margin-top: 1.6rem;
}

.primary-button[b-yxn6zm4q4p] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.92rem;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.4rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .primary-button:hover:not(:disabled)[b-yxn6zm4q4p] {
        background: var(--accent-hover);
    }

    .primary-button:disabled[b-yxn6zm4q4p] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.secondary-button[b-yxn6zm4q4p] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ink);
    background: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

    .secondary-button:hover[b-yxn6zm4q4p] {
        background: var(--surface-2);
    }

/* requests tab */
.client-requests[b-yxn6zm4q4p] {
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    border-collapse: collapse;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

    .client-requests th[b-yxn6zm4q4p] {
        font-size: 0.72rem;
        font-weight: 600;
        text-align: left;
        color: var(--ink-soft);
        padding: 0.75rem 1rem;
        background: color-mix(in srgb, var(--ink) 3%, var(--card));
        border-bottom: 1px solid var(--line);
    }

    .client-requests td[b-yxn6zm4q4p] {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--line);
        font-size: 0.9rem;
        color: var(--ink);
    }

    .client-requests tbody tr:last-child td[b-yxn6zm4q4p] {
        border-bottom: none;
    }

    .client-requests tbody tr.row-clickable[b-yxn6zm4q4p] {
        cursor: pointer;
    }

    .client-requests tbody tr:hover[b-yxn6zm4q4p] {
        background: var(--surface-2);
    }

    .client-requests .cell-title[b-yxn6zm4q4p] {
        font-weight: 600;
    }

    .client-requests .cell-due[b-yxn6zm4q4p] {
        color: var(--ink-soft);
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

.req-status[b-yxn6zm4q4p] {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
}
/* /Components/Pages/Admin/Clients/ClientRelationshipsPanel.razor.rz.scp.css */
.panel-hint[b-3k336g6qqf] {
    margin: 0 0 0.6rem;
    font-size: 0.82rem;
    color: var(--ink-soft);
}

.rel-row[b-3k336g6qqf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
}

.rel-row:last-of-type[b-3k336g6qqf] {
    border-bottom: none;
}

.rel-info[b-3k336g6qqf] {
    min-width: 0;
}

.rel-label[b-3k336g6qqf] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ink);
}

.rel-label strong[b-3k336g6qqf] {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0.1rem;
}

.rel-client[b-3k336g6qqf] {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.rel-client:hover[b-3k336g6qqf] {
    text-decoration: underline;
}

.rel-detail[b-3k336g6qqf] {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    color: var(--ink-soft);
}

.rel-actions[b-3k336g6qqf] {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}

.mini-action[b-3k336g6qqf] {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-soft);
    background: none;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.25rem 0.55rem;
    cursor: pointer;
}

.mini-action:hover[b-3k336g6qqf] {
    background: var(--surface-2);
}

.mini-action.danger[b-3k336g6qqf] {
    color: var(--bad);
}

.mini-action:disabled[b-3k336g6qqf] {
    opacity: 0.5;
    cursor: not-allowed;
}

.rel-form[b-3k336g6qqf] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.6rem;
}

.mini-input[b-3k336g6qqf] {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-1, var(--card));
    color: var(--ink);
    width: 100%;
    box-sizing: border-box;
}

.mini-label[b-3k336g6qqf] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.rel-selected[b-3k336g6qqf] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rel-candidates[b-3k336g6qqf] {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}

.rel-candidates li + li[b-3k336g6qqf] {
    border-top: 1px solid var(--line);
}

.rel-candidate[b-3k336g6qqf] {
    display: block;
    width: 100%;
    text-align: left;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--ink);
    background: none;
    border: none;
    padding: 0.45rem 0.6rem;
    cursor: pointer;
}

.rel-candidate:hover[b-3k336g6qqf] {
    background: var(--surface-2);
}

.rel-dates[b-3k336g6qqf] {
    display: flex;
    gap: 0.5rem;
}

.rel-dates .mini-label[b-3k336g6qqf] {
    flex: 1;
}

.mini-form-actions[b-3k336g6qqf] {
    display: flex;
    gap: 0.4rem;
}

.panel-add[b-3k336g6qqf] {
    margin-top: 0.5rem;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.panel-add:hover[b-3k336g6qqf] {
    text-decoration: underline;
}
/* /Components/Pages/Admin/Clients/ClientsImportModal.razor.rz.scp.css */
.import-backdrop[b-g52e6tu8w8] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15, 26, 22, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.import-box[b-g52e6tu8w8] {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-lg, 0 24px 60px rgba(0, 0, 0, 0.3));
    width: min(640px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    transition: width 0.18s ease;
}

/* The design's box is a fixed 640px, but the preview table needs more room
   once a file's been picked — widen only then. */
.import-box.import-box-wide[b-g52e6tu8w8] {
    width: min(900px, 100%);
}

/* --- upload steps --- */

.import-steps[b-g52e6tu8w8] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0.4rem 0 1.2rem;
}

.import-step[b-g52e6tu8w8] {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
}

.step-num[b-g52e6tu8w8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-dark);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.import-step:not(:first-child) .step-num[b-g52e6tu8w8] {
    background: var(--surface-2);
    color: var(--ink-soft);
}

.step-title[b-g52e6tu8w8] {
    margin: 0 0 0.15rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
}

.step-text[b-g52e6tu8w8] {
    margin: 0;
    font-size: 0.83rem;
    color: var(--ink-soft);
}

.step-text code[b-g52e6tu8w8] {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--ink);
}

.sample-link[b-g52e6tu8w8] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

.sample-link:hover[b-g52e6tu8w8] {
    text-decoration: underline;
}

.sample-link :global(svg)[b-g52e6tu8w8] {
    width: 1rem;
    height: 1rem;
}

/* --- dropzone (drag & drop or click; the invisible input covers the zone,
       so native file drops land on it — no JS needed) --- */

.dropzone[b-g52e6tu8w8] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 2px dashed color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 14px;
    background: var(--accent-soft);
    padding: 2.1rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.dropzone:hover[b-g52e6tu8w8],
.dropzone:focus-within[b-g52e6tu8w8] {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
}

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

.dz-icon[b-g52e6tu8w8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: var(--card);
    color: var(--accent);
    box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 40%, transparent);
    margin-bottom: 0.25rem;
}

.dz-title[b-g52e6tu8w8] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--accent-hover);
}

.dz-hint[b-g52e6tu8w8] {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
}

.import-head[b-g52e6tu8w8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.4rem;
}

.import-head-title[b-g52e6tu8w8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.import-icon[b-g52e6tu8w8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 11px;
    background: var(--accent-soft);
    color: var(--accent);
}

.import-title[b-g52e6tu8w8] {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
}

.import-close[b-g52e6tu8w8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 9px;
    border: none;
    background: var(--surface-2);
    color: var(--ink-soft);
    cursor: pointer;
}

.import-close:hover[b-g52e6tu8w8] {
    color: var(--ink);
}

.import-help[b-g52e6tu8w8] {
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin: 0 0 1rem;
}

.import-help code[b-g52e6tu8w8] {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink);
}

.parse-error[b-g52e6tu8w8] {
    color: var(--bad);
    margin-top: 0.8rem;
}

.preview-head[b-g52e6tu8w8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 1.1rem 0 0.6rem;
}

.preview-summary[b-g52e6tu8w8] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
}

.import-button[b-g52e6tu8w8] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--on-dark);
    background: var(--accent);
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1.1rem;
    cursor: pointer;
}

.import-button:hover[b-g52e6tu8w8] {
    background: var(--accent-hover);
}

.import-button:disabled[b-g52e6tu8w8] {
    opacity: 0.5;
    cursor: not-allowed;
}

.preview-scroll[b-g52e6tu8w8] {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.preview-table[b-g52e6tu8w8] {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
}

.preview-table th[b-g52e6tu8w8] {
    font-size: 0.72rem;
    font-weight: 600;
    text-align: left;
    color: var(--ink-soft);
    padding: 0.6rem 0.8rem;
    background: color-mix(in srgb, var(--ink) 3%, var(--card));
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.preview-table td[b-g52e6tu8w8] {
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.84rem;
    color: var(--ink);
}

.preview-table tbody tr:last-child td[b-g52e6tu8w8] {
    border-bottom: none;
}

.row-invalid[b-g52e6tu8w8] {
    background: color-mix(in srgb, var(--bad) 6%, transparent);
}
.row-warning[b-g52e6tu8w8] {
    background: color-mix(in srgb, var(--warn, #b8860b) 6%, transparent);
}
.row-success[b-g52e6tu8w8] {
    background: color-mix(in srgb, var(--good, #1d7a4f) 6%, transparent);
}
.cell-mono[b-g52e6tu8w8] {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--ink-soft, #51665f);
}

.badge-warn[b-g52e6tu8w8],
.badge-ok[b-g52e6tu8w8],
.badge-bad[b-g52e6tu8w8] {
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}
.badge-warn[b-g52e6tu8w8] {
    color: var(--warn, #b8860b);
    background: color-mix(in srgb, var(--warn, #b8860b) 12%, transparent);
}
.badge-ok[b-g52e6tu8w8] {
    color: var(--good, #1d7a4f);
    background: color-mix(in srgb, var(--good, #1d7a4f) 12%, transparent);
}

.badge-bad[b-g52e6tu8w8] {
    color: var(--bad);
    background: color-mix(in srgb, var(--bad) 12%, transparent);
}

.import-result[b-g52e6tu8w8] {
    margin-top: 1.1rem;
}

.result-line[b-g52e6tu8w8] {
    margin: 0 0 0.5rem;
    font-size: 0.92rem;
    color: var(--ink);
}

.error-list[b-g52e6tu8w8] {
    margin: 0 0 0.9rem;
    padding-left: 1.2rem;
    font-size: 0.85rem;
    color: var(--bad);
}
/* /Components/Pages/Admin/Clients/ClientsList.razor.rz.scp.css */
.menu-backdrop[b-9c5zz9o9l3] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.mono-note[b-9c5zz9o9l3] {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--copper, #b5622e);
    margin: 0;
}

.page-head[b-9c5zz9o9l3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.page-title[b-9c5zz9o9l3] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    margin: 0.2rem 0 0;
    color: var(--ink, #17302a);
}

/* --- groups filter dropdown --- */

.groups-filter[b-9c5zz9o9l3] {
    position: relative;
}

.groups-button[b-9c5zz9o9l3] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
}

.groups-button:hover[b-9c5zz9o9l3] {
    background: var(--surface-2);
}

.groups-button.active[b-9c5zz9o9l3] {
    border-color: var(--accent);
    color: var(--accent);
}

.groups-button :global(svg)[b-9c5zz9o9l3] {
    width: 1rem;
    height: 1rem;
}

.groups-clear[b-9c5zz9o9l3] {
    margin-left: 0.3rem;
    font-size: 0.8rem;
    opacity: 0.7;
}

.groups-clear:hover[b-9c5zz9o9l3] {
    opacity: 1;
}

.groups-menu[b-9c5zz9o9l3] {
    position: absolute;
    left: 0;
    top: calc(100% + 0.4rem);
    z-index: 50;
    width: 320px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
    padding: 0.6rem;
}

.groups-menu-list[b-9c5zz9o9l3] {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 0.5rem;
}

.groups-menu-row[b-9c5zz9o9l3] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.groups-menu-name[b-9c5zz9o9l3] {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
    border: none;
    background: none;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    color: var(--ink);
    padding: 0.45rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    min-width: 0;
}

.groups-menu-name > span:first-child[b-9c5zz9o9l3] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.groups-menu-name:hover[b-9c5zz9o9l3] {
    background: var(--surface-2);
}

.groups-menu-meta[b-9c5zz9o9l3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.groups-menu-owner[b-9c5zz9o9l3] {
    font-size: 0.72rem;
    color: var(--ink-soft);
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.groups-menu-count[b-9c5zz9o9l3] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-soft);
}

.groups-menu-empty[b-9c5zz9o9l3] {
    color: var(--ink-soft);
    font-size: 0.85rem;
    padding: 0.6rem 0.5rem;
    margin: 0;
}

.groups-menu-foot[b-9c5zz9o9l3] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--line);
}

.group-row-menu[b-9c5zz9o9l3] {
    top: 2rem;
    right: 0;
}

.groups-menu-foot[b-9c5zz9o9l3]  .create-group-button {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--on-dark);
    background: var(--accent);
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.groups-menu-foot[b-9c5zz9o9l3]  .create-group-button:hover {
    background: var(--accent-hover);
}

.rename-input[b-9c5zz9o9l3] {
    flex: 1;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-1, var(--card));
    color: var(--ink);
    min-width: 0;
}

.block[b-9c5zz9o9l3] {
    width: 100%;
    box-sizing: border-box;
}

.head-actions[b-9c5zz9o9l3] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.import-link[b-9c5zz9o9l3] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.55rem 1.1rem;
    text-decoration: none;
    cursor: pointer;
}

.import-link:hover[b-9c5zz9o9l3] {
    background: var(--surface-2);
}

.group-chip[b-9c5zz9o9l3] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    font-size: 0.72rem;
    font-weight: 600;
    color: color-mix(in oklch, oklch(0.5 0.16 var(--h, 245)) 68%, var(--ink));
    background: color-mix(in oklch, oklch(0.7 0.13 var(--h, 245)) 18%, var(--card));
    border: none;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    text-decoration: none;
    white-space: nowrap;
    font-family: var(--font-ui);
    cursor: pointer;
}

button.group-chip:hover[b-9c5zz9o9l3] {
    background: color-mix(in oklch, oklch(0.7 0.13 var(--h, 245)) 30%, var(--card));
}

.new-client[b-9c5zz9o9l3] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--on-dark);
    background: var(--accent);
    border-radius: 8px;
    padding: 0.6rem 1.4rem;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.new-client:hover[b-9c5zz9o9l3] {
    background: var(--accent-hover);
    transform: translateY(-1px);
    color: var(--on-dark);
}

.client-table[b-9c5zz9o9l3] {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.client-table th[b-9c5zz9o9l3] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: left;
    color: var(--ink-soft);
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--ink) 3%, var(--card));
    border-bottom: 1px solid var(--line);
}

.client-table td[b-9c5zz9o9l3] {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.9rem;
    color: var(--ink);
    vertical-align: middle;
}

.client-table tbody tr:last-child td[b-9c5zz9o9l3] {
    border-bottom: none;
}

.client-table tbody tr.row-clickable[b-9c5zz9o9l3] {
    cursor: pointer;
}

.client-table tbody tr:hover[b-9c5zz9o9l3] {
    background: var(--surface-2);
}

.cell-name[b-9c5zz9o9l3] {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.cell-name-text[b-9c5zz9o9l3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cell-name-primary[b-9c5zz9o9l3] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell-name-sub[b-9c5zz9o9l3] {
    font-weight: 500;
    font-size: 0.74rem;
    color: var(--ink-soft);
}

.avatar[b-9c5zz9o9l3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.72rem;
    flex-shrink: 0;
}

.avatar-sm[b-9c5zz9o9l3] {
    width: 1.4rem;
    height: 1.4rem;
    font-size: 0.62rem;
}

.cell-mono[b-9c5zz9o9l3] {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink-soft, #51665f);
}

.cell-muted[b-9c5zz9o9l3] {
    color: var(--ink-soft);
    font-size: 0.85rem;
}

.cell-contact[b-9c5zz9o9l3] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cell-contact-email[b-9c5zz9o9l3] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell-partner[b-9c5zz9o9l3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

    .cell-partner > span:last-child[b-9c5zz9o9l3] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.col-requests[b-9c5zz9o9l3] {
    text-align: center;
}

.req-pill[b-9c5zz9o9l3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.4rem;
    padding: 0 0.5rem;
    border-radius: 7px;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 600;
    background: var(--surface-2);
    color: var(--ink-soft);
}

.req-pill.req-active[b-9c5zz9o9l3] {
    background: var(--accent-soft);
    color: var(--accent);
}

.count-caption[b-9c5zz9o9l3] {
    font-size: 0.82rem;
    color: var(--ink-soft);
    margin: 0.8rem 0 0.6rem;
}

.count-caption .mono[b-9c5zz9o9l3] {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--ink);
}

/* .cell-actions, .row-link, .row-delete are global in app.css (shared across list pages) */

.empty-note[b-9c5zz9o9l3] {
    color: var(--ink-soft, #51665f);
    padding: 1.5rem 0;
}

/* --- card view --- */

.client-grid[b-9c5zz9o9l3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.client-card[b-9c5zz9o9l3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 0.7rem 1.1rem 1.2rem;
}

.client-card:not(.client-card-add)[b-9c5zz9o9l3] {
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.client-card:not(.client-card-add):hover[b-9c5zz9o9l3] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

.client-card-head[b-9c5zz9o9l3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 1.6rem;
    margin-bottom: 0.5rem;
}

.client-avatar[b-9c5zz9o9l3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
}

.client-name[b-9c5zz9o9l3] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
    margin: 0.7rem 0 0.4rem;
}

.client-email[b-9c5zz9o9l3] {
    font-size: 0.82rem;
    color: var(--ink-soft);
    margin: 0 0 0.3rem;
    word-break: break-word;
}

.client-phone[b-9c5zz9o9l3] {
    font-size: 0.82rem;
    color: var(--ink-soft);
    margin: 0 0 0.3rem;
}

.client-foot[b-9c5zz9o9l3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--line);
    font-size: 0.76rem;
    color: var(--ink-soft);
}

.client-requests[b-9c5zz9o9l3] {
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
}

/* dashed add-client card */
.client-card-add[b-9c5zz9o9l3] {
    justify-content: center;
    gap: 0.8rem;
    min-height: 150px;
    border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
    box-shadow: none;
    color: var(--accent);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.client-card-add:hover[b-9c5zz9o9l3] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.client-add-icon[b-9c5zz9o9l3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: var(--accent-soft);
}

.client-add-icon svg[b-9c5zz9o9l3] {
    width: 22px;
    height: 22px;
}

/* card "..." action menu */
.client-menu[b-9c5zz9o9l3] {
    position: relative;
    display: inline-flex;
}

.menu-button[b-9c5zz9o9l3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--ink-soft);
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 6px;
}

.menu-button svg[b-9c5zz9o9l3] {
    width: 16px;
    height: 16px;
}

.menu-button:hover[b-9c5zz9o9l3] {
    background: var(--surface-2);
    color: var(--ink);
}

.row-menu[b-9c5zz9o9l3] {
    position: absolute;
    right: 0;
    top: 2rem;
    z-index: 50;
    min-width: 9rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.row-menu > a[b-9c5zz9o9l3],
.row-menu > button[b-9c5zz9o9l3] {
    text-align: left;
    border: none;
    background: none;
    font-family: var(--font-ui);
    font-size: 0.86rem;
    color: var(--ink);
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
}

.row-menu > a:hover[b-9c5zz9o9l3],
.row-menu > button:hover[b-9c5zz9o9l3] {
    background: var(--surface-2);
}

.row-menu .menu-danger[b-9c5zz9o9l3] {
    color: var(--bad);
}

.row-menu .menu-danger:hover[b-9c5zz9o9l3] {
    background: color-mix(in srgb, var(--bad) 10%, transparent);
}

@media (max-width: 900px) {
    .client-table th:nth-child(3)[b-9c5zz9o9l3],
    .client-table td:nth-child(3)[b-9c5zz9o9l3],
    .client-table th:nth-child(4)[b-9c5zz9o9l3],
    .client-table td:nth-child(4)[b-9c5zz9o9l3] {
        display: none;
    }
}
/* /Components/Pages/Admin/Dashboard/Dashboard.razor.rz.scp.css */
/* ---- base ---- */
.mono-note[b-14rxcrz8ze] {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--copper);
    margin: 0;
}
.page-title[b-14rxcrz8ze] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.9rem;
    margin: 0.2rem 0 0;
    color: var(--ink-deep);
}
.empty-note[b-14rxcrz8ze] { color: var(--ink-soft); padding: 1.2rem 0; }

.dash-head[b-14rxcrz8ze] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}
.dash-sub[b-14rxcrz8ze] { margin: 0.3rem 0 0; font-size: 0.88rem; color: var(--ink-soft); }
.dash-head-actions[b-14rxcrz8ze] { display: flex; align-items: center; gap: 0.75rem; }

/* ---- period switch ---- */
.seg[b-14rxcrz8ze] {
    display: inline-flex;
    gap: 0.15rem;
    padding: 0.2rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.seg-btn[b-14rxcrz8ze] {
    border: none;
    background: transparent;
    color: var(--ink-soft);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.42rem 1rem;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.seg-btn:hover[b-14rxcrz8ze] { color: var(--ink); }
.seg-btn.on[b-14rxcrz8ze] { background: var(--accent); color: var(--on-dark); box-shadow: var(--shadow-sm); }

.dash-cta[b-14rxcrz8ze] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--accent);
    color: var(--on-dark);
    border-radius: 10px;
    padding: 0.6rem 1.1rem;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}
.dash-cta:hover[b-14rxcrz8ze] { background: var(--accent-hover); text-decoration: none; color: var(--on-dark); }
.dash-cta svg[b-14rxcrz8ze] { width: 16px; height: 16px; }

.panel[b-14rxcrz8ze] {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    padding: 0.9rem 1rem;
}
.panel-head[b-14rxcrz8ze] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.4rem;
}
.panel-title[b-14rxcrz8ze] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.94rem;
    margin: 0 0 0.6rem;
    color: var(--ink-deep);
}
.panel-head .panel-title[b-14rxcrz8ze] { margin: 0; }

/* ---- tone chips (shared by kpi + tiles) ---- */
.tone-indigo[b-14rxcrz8ze] { background: var(--accent-soft); color: var(--accent); }
.tone-blue[b-14rxcrz8ze] { background: color-mix(in srgb, #4a83d4 16%, transparent); color: #4a83d4; }
.tone-amber[b-14rxcrz8ze] { background: color-mix(in srgb, #e0a13a 20%, transparent); color: #c9822e; }
.tone-red[b-14rxcrz8ze] { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }
.tone-green[b-14rxcrz8ze] { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }

/* ---- KPI cards ---- */
.kpi-row[b-14rxcrz8ze] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.kpi-card[b-14rxcrz8ze] {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    padding: 0.85rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.kpi-card:hover[b-14rxcrz8ze] { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kpi-l-indigo[b-14rxcrz8ze] { border-left: 3px solid var(--accent); }
.kpi-l-blue[b-14rxcrz8ze] { border-left: 3px solid #4a83d4; }
.kpi-l-green[b-14rxcrz8ze] { border-left: 3px solid var(--good); }
.kpi-l-red[b-14rxcrz8ze] { border-left: 3px solid var(--bad); }
.kpi-top[b-14rxcrz8ze] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.3rem;
}
.kpi-chip[b-14rxcrz8ze] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 10px;
    flex: none;
}
.kpi-chip svg[b-14rxcrz8ze] { width: 16px; height: 16px; }
.kpi-value[b-14rxcrz8ze] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--ink-deep);
}
.kpi-label[b-14rxcrz8ze] { font-size: 0.82rem; color: var(--ink-soft); }
.kpi-foot[b-14rxcrz8ze] { font-size: 0.75rem; color: var(--ink-soft); margin-top: 0.1rem; }

.trend[b-14rxcrz8ze] { font-size: 0.8rem; font-weight: 600; display: inline-flex; gap: 0.3rem; align-items: center; margin-top: 0.15rem; }
.trend-arrow[b-14rxcrz8ze] { font-size: 0.7rem; }
.trend.up[b-14rxcrz8ze] { color: var(--good); }
.trend.down[b-14rxcrz8ze] { color: var(--bad); }
.trend.flat[b-14rxcrz8ze] { color: var(--ink-soft); }

/* ---- draggable widget grid (4-col) ---- */
.widget-grid[b-14rxcrz8ze] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    grid-auto-flow: row dense;
}
.widget[b-14rxcrz8ze] { display: flex; min-width: 0; }
.widget > .panel[b-14rxcrz8ze] { flex: 1; min-width: 0; }
.widget.span-1[b-14rxcrz8ze] { grid-column: span 1; }
.widget.span-2[b-14rxcrz8ze] { grid-column: span 2; }
.widget.span-4[b-14rxcrz8ze] { grid-column: span 4; }
.widget[draggable="true"][b-14rxcrz8ze] { cursor: grab; }
.widget[draggable="true"]:active[b-14rxcrz8ze] { cursor: grabbing; }
.widget.dragging[b-14rxcrz8ze] { opacity: 0.45; }
.widget .panel[b-14rxcrz8ze] { transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.widget:hover > .panel[b-14rxcrz8ze] { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
@media (max-width: 1200px) {
    .widget-grid[b-14rxcrz8ze] { grid-template-columns: repeat(2, 1fr); }
    .widget.span-2[b-14rxcrz8ze], .widget.span-4[b-14rxcrz8ze] { grid-column: span 2; }
    .widget.span-1[b-14rxcrz8ze] { grid-column: span 1; }
}
@media (max-width: 768px) {
    .widget-grid[b-14rxcrz8ze] { grid-template-columns: 1fr; }
    .widget.span-1[b-14rxcrz8ze], .widget.span-2[b-14rxcrz8ze], .widget.span-4[b-14rxcrz8ze] { grid-column: span 1; }
}

/* ---- chart chrome ---- */
.chart-legend[b-14rxcrz8ze] { display: flex; gap: 0.9rem; font-size: 0.72rem; color: var(--ink-soft); }
.chart-legend span[b-14rxcrz8ze] { display: inline-flex; align-items: center; gap: 0.3rem; }
.legend-dot[b-14rxcrz8ze] { width: 0.55rem; height: 0.55rem; border-radius: 3px; flex: none; display: inline-block; }
.chart-hint[b-14rxcrz8ze] { font-size: 0.72rem; color: var(--ink-soft); margin: 0.1rem 0 0; text-align: center; }
.drill-sep[b-14rxcrz8ze] { color: var(--ink-soft); font-weight: 400; margin: 0 0.15rem; }
.drill-label[b-14rxcrz8ze] { color: var(--accent); }
.back-chip[b-14rxcrz8ze] {
    display: inline-flex; align-items: center; gap: 0.2rem;
    background: var(--accent-soft); color: var(--accent);
    border: none; border-radius: 999px; padding: 0.2rem 0.6rem 0.2rem 0.4rem;
    font-size: 0.75rem; font-weight: 600; cursor: pointer; font-family: inherit;
    transition: background 0.12s ease;
}
.back-chip:hover[b-14rxcrz8ze] { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.back-chip svg[b-14rxcrz8ze] { width: 14px; height: 14px; }


/* ---- recent activity ---- */
.activity-list[b-14rxcrz8ze] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.activity-item[b-14rxcrz8ze] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.5rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.activity-item:hover[b-14rxcrz8ze] { background: var(--surface-2); }
.act-icon[b-14rxcrz8ze] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 10px;
    flex: none;
}
.act-icon svg[b-14rxcrz8ze] { width: 16px; height: 16px; }
.act-body[b-14rxcrz8ze] { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.act-title[b-14rxcrz8ze] { font-weight: 600; font-size: 0.86rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-meta[b-14rxcrz8ze] { font-size: 0.76rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* status-tinted icon backgrounds (reuse status colours) */
.act-icon.status-draft[b-14rxcrz8ze] { background: var(--surface-2); color: var(--ink-soft); }
.act-icon.status-sent[b-14rxcrz8ze] { background: var(--accent-soft); color: var(--accent); }
.act-icon.status-inprogress[b-14rxcrz8ze] { background: color-mix(in srgb, #e0a13a 18%, transparent); color: #c9822e; }
.act-icon.status-submitted[b-14rxcrz8ze] { background: color-mix(in srgb, #4a83d4 18%, transparent); color: #4a83d4; }
.act-icon.status-approved[b-14rxcrz8ze] { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }

/* ---- record tiles ---- */
.tile-row[b-14rxcrz8ze] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
@media (max-width: 768px) { .tile-row[b-14rxcrz8ze] { grid-template-columns: repeat(2, 1fr); } }
.tile[b-14rxcrz8ze] {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.6rem;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    text-decoration: none;
    background: var(--paper);
    transition: border-color 0.12s ease, transform 0.12s ease;
}
.tile:hover[b-14rxcrz8ze] { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.tile-chip[b-14rxcrz8ze] {
    grid-row: 1 / span 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 9px;
}
.tile-chip svg[b-14rxcrz8ze] { width: 15px; height: 15px; }
.tile-value[b-14rxcrz8ze] { grid-column: 2; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--ink-deep); line-height: 1.1; }
.tile-label[b-14rxcrz8ze] { grid-column: 2; font-size: 0.78rem; color: var(--ink-soft); }

/* ---- status chips ---- */
.status-chip[b-14rxcrz8ze] { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.status-draft[b-14rxcrz8ze] { background: var(--surface-2); color: var(--ink-soft); }
.status-sent[b-14rxcrz8ze] { background: var(--accent-soft); color: var(--accent); }
.status-inprogress[b-14rxcrz8ze] { background: color-mix(in srgb, #e0a13a 18%, transparent); color: #b9791f; }
.status-submitted[b-14rxcrz8ze] { background: color-mix(in srgb, #4a83d4 18%, transparent); color: #3a6fbf; }
.status-approved[b-14rxcrz8ze] { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
/* /Components/Pages/Admin/Requests/Calendar.razor.rz.scp.css */
/* --- local design tokens (mirrors Calendar.dc.html) — light default, dark override --- */

.cal-shell[b-30pgzetu2h] {
    --surface: #ffffff;
    --surface2: #f3f3f6;
    --head: #fafafb;
    --border: rgba(20, 20, 30, .09);
    --text: #181820;
    --dim: rgba(24, 24, 32, .58);
    --faint: rgba(24, 24, 32, .34);
    --accent: #6d5cf5;

    --k-doc-fill: #fdf2d0; --k-doc-border: #c98a08; --k-doc-text: #7a5300;
    --k-sent-fill: #d9f7e3; --k-sent-border: #15a34a; --k-sent-text: #116237;
    --k-email-fill: #dbeafe; --k-email-border: #2563eb; --k-email-text: #1c3ba0;
    --k-sms-fill: #cdf5ee; --k-sms-border: #0d9488; --k-sms-text: #0a6156;
}

:root[data-theme="dark"] .cal-shell[b-30pgzetu2h] {
    --surface: #111117;
    --surface2: #191921;
    --head: #0f0f15;
    --border: rgba(255, 255, 255, .075);
    --text: #e8e8ec;
    --dim: rgba(232, 232, 236, .6);
    --faint: rgba(232, 232, 236, .32);

    --k-doc-fill: rgba(234, 179, 8, .15); --k-doc-border: #eab308; --k-doc-text: #f2d888;
    --k-sent-fill: rgba(34, 197, 94, .15); --k-sent-border: #22c55e; --k-sent-text: #a6e7bd;
    --k-email-fill: rgba(59, 130, 246, .16); --k-email-border: #4b8bf4; --k-email-text: #a9c8f7;
    --k-sms-fill: rgba(45, 212, 191, .15); --k-sms-border: #2dd4bf; --k-sms-text: #9beadd;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .cal-shell[b-30pgzetu2h] {
        --surface: #111117;
        --surface2: #191921;
        --head: #0f0f15;
        --border: rgba(255, 255, 255, .075);
        --text: #e8e8ec;
        --dim: rgba(232, 232, 236, .6);
        --faint: rgba(232, 232, 236, .32);

        --k-doc-fill: rgba(234, 179, 8, .15); --k-doc-border: #eab308; --k-doc-text: #f2d888;
        --k-sent-fill: rgba(34, 197, 94, .15); --k-sent-border: #22c55e; --k-sent-text: #a6e7bd;
        --k-email-fill: rgba(59, 130, 246, .16); --k-email-border: #4b8bf4; --k-email-text: #a9c8f7;
        --k-sms-fill: rgba(45, 212, 191, .15); --k-sms-border: #2dd4bf; --k-sms-text: #9beadd;
    }
}

/* --- page head --- */

.eyebrow[b-30pgzetu2h] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 5px;
}

.page-head[b-30pgzetu2h] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 22px;
}

.page-title[b-30pgzetu2h] {
    font-family: var(--font-display);
    font-weight: 750;
    font-size: 30px;
    letter-spacing: -.02em;
    margin: 0;
    color: var(--text);
}

/* --- toolbar --- */

.toolbar[b-30pgzetu2h] { margin-bottom: 16px; }

.cal-nav[b-30pgzetu2h] { display: inline-flex; align-items: center; gap: 8px; }

.cal-nav-btn[b-30pgzetu2h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 9px;
    cursor: pointer;
}

.cal-nav-btn:hover[b-30pgzetu2h] { background: var(--surface2); }
.cal-nav-btn svg[b-30pgzetu2h] { width: 15px; height: 15px; }

.cal-today[b-30pgzetu2h] {
    height: 34px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 550;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    cursor: pointer;
}

.cal-today:hover[b-30pgzetu2h] { background: var(--surface2); }

.cal-period[b-30pgzetu2h] {
    font-family: var(--font-display);
    font-weight: 650;
    font-size: 19px;
    color: var(--text);
    min-width: 150px;
}

.pill-select[b-30pgzetu2h]::after { content: none; }

.pill-trigger[b-30pgzetu2h] {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 15px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 550;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    cursor: pointer;
}

.pill-trigger:hover[b-30pgzetu2h] { background: var(--surface2); }
.pill-chev[b-30pgzetu2h] { flex: 0 0 auto; }

.pill-select.active .pill-trigger[b-30pgzetu2h] {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.clear-filters[b-30pgzetu2h] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--dim);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.3rem 0.4rem;
}

.clear-filters:hover[b-30pgzetu2h] { color: var(--accent); text-decoration: underline; }

.menu-backdrop[b-30pgzetu2h] { position: fixed; inset: 0; z-index: 40; }

.filter-menu[b-30pgzetu2h] {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 50;
    min-width: 11rem;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
}

.filter-option[b-30pgzetu2h] {
    text-align: left;
    border: none;
    background: none;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--text);
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.filter-option:hover[b-30pgzetu2h] { background: var(--surface2); }

.filter-option.selected[b-30pgzetu2h] {
    color: var(--accent);
    font-weight: 600;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* --- view tabs --- */

.view-switch[b-30pgzetu2h] {
    display: inline-flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 3px;
    gap: 0;
}

.view-txt-btn[b-30pgzetu2h] {
    border: none;
    background: transparent;
    color: var(--dim);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 550;
    height: 28px;
    padding: 0 15px;
    border-radius: 7px;
    cursor: pointer;
}

.view-txt-btn.active[b-30pgzetu2h] {
    background: var(--accent);
    color: #fff;
    font-weight: 650;
}

/* --- legend --- */

.legend[b-30pgzetu2h] { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 0 0 14px; }
.legend-item[b-30pgzetu2h] { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--dim); }
.legend-icon[b-30pgzetu2h] { display: inline-flex; }
.legend-icon svg[b-30pgzetu2h] { width: 14px; height: 14px; }
.legend-icon.k-doc[b-30pgzetu2h] { color: var(--k-doc-border); }
.legend-icon.k-sent[b-30pgzetu2h] { color: var(--k-sent-border); }
.legend-icon.k-email[b-30pgzetu2h] { color: var(--k-email-border); }
.legend-icon.k-sms[b-30pgzetu2h] { color: var(--k-sms-border); }

/* --- card shell wrapping every view --- */

.cal-card[b-30pgzetu2h] {
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

/* --- month: weekday header --- */

.cal-weekdays[b-30pgzetu2h] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background: var(--head);
}

.cal-weekday[b-30pgzetu2h] {
    padding: 11px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--dim);
    border-left: 1px solid var(--border);
}

/* --- month: week rows --- */

.cal-week-wrap[b-30pgzetu2h] { position: relative; border-top: 1px solid var(--border); }

.cal-week-grid[b-30pgzetu2h] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-daycell[b-30pgzetu2h] {
    min-height: 152px;
    border-left: 1px solid var(--border);
    padding: 8px 10px;
    cursor: pointer;
}

.cal-daycell:hover[b-30pgzetu2h] { background: var(--surface2); }
.cal-daycell.muted .daynum[b-30pgzetu2h] { color: var(--faint); }

.daynum[b-30pgzetu2h] {
    display: block;
    width: fit-content;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.daynum.today[b-30pgzetu2h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
}

/* --- month: spanning bars overlay --- */

.cal-bars-layer[b-30pgzetu2h] { position: absolute; inset: 0; pointer-events: none; }

.cal-bar[b-30pgzetu2h] {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 9px;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
    border-left: 3px solid transparent;
    border-radius: 6px;
}

.cal-bar.lane-0[b-30pgzetu2h] { top: 36px; }
.cal-bar.lane-1[b-30pgzetu2h] { top: 65px; }
.cal-bar.lane-2[b-30pgzetu2h] { top: 94px; }

.cal-bar.cl[b-30pgzetu2h] { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-bar.cr[b-30pgzetu2h] { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.cal-bar.k-doc[b-30pgzetu2h] { background: var(--k-doc-fill); color: var(--k-doc-text); border-left-color: var(--k-doc-border); }
.cal-bar.k-sent[b-30pgzetu2h] { background: var(--k-sent-fill); color: var(--k-sent-text); border-left-color: var(--k-sent-border); }
.cal-bar.k-email[b-30pgzetu2h] { background: var(--k-email-fill); color: var(--k-email-text); border-left-color: var(--k-email-border); }
.cal-bar.k-sms[b-30pgzetu2h] { background: var(--k-sms-fill); color: var(--k-sms-text); border-left-color: var(--k-sms-border); }

.bar-icon[b-30pgzetu2h] { flex: 0 0 auto; display: inline-flex; }
.bar-icon svg[b-30pgzetu2h] { width: 13px; height: 13px; }

.bar-title[b-30pgzetu2h] { font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bar-client[b-30pgzetu2h] { opacity: .72; font-weight: 450; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.cal-more[b-30pgzetu2h] {
    position: absolute;
    top: 123px;
    width: calc(14.2857% - 12px);
    height: 18px;
    font-size: 11px;
    font-weight: 600;
    color: var(--dim);
    cursor: pointer;
    pointer-events: auto;
    white-space: nowrap;
}

.cal-more:hover[b-30pgzetu2h] { color: var(--accent); }

/* --- month: empty state --- */

.cal-empty[b-30pgzetu2h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 90px 20px;
    gap: 14px;
    text-align: center;
}

.cal-empty-icon[b-30pgzetu2h] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    border: 2px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--faint);
}

.cal-empty-icon svg[b-30pgzetu2h] { width: 26px; height: 26px; }

.empty-title[b-30pgzetu2h] { font-size: 15px; font-weight: 600; color: var(--text); margin: 0; }
.empty-sub[b-30pgzetu2h] { font-size: 13px; color: var(--dim); max-width: 340px; margin: 0; }

.empty-cta[b-30pgzetu2h] {
    margin-top: 4px;
    height: 36px;
    padding: 0 18px;
    border-radius: 9px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.empty-cta:hover[b-30pgzetu2h] { opacity: 0.9; }

/* --- shared item chip icon (week / day / agenda rows) --- */

.chip-icon[b-30pgzetu2h] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chip-icon svg[b-30pgzetu2h] { width: 15px; height: 15px; }
.chip-icon.k-doc[b-30pgzetu2h] { background: var(--k-doc-fill); color: var(--k-doc-border); }
.chip-icon.k-sent[b-30pgzetu2h] { background: var(--k-sent-fill); color: var(--k-sent-border); }
.chip-icon.k-email[b-30pgzetu2h] { background: var(--k-email-fill); color: var(--k-email-border); }
.chip-icon.k-sms[b-30pgzetu2h] { background: var(--k-sms-fill); color: var(--k-sms-border); }

/* --- week view (per-day columns) --- */

.cal-week-cols[b-30pgzetu2h] { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }

.cal-wcol[b-30pgzetu2h] {
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
    min-height: 480px;
    display: flex;
    flex-direction: column;
}

.wcol-head[b-30pgzetu2h] {
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.wcol-dow[b-30pgzetu2h] { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--dim); }
.wcol-dow.today[b-30pgzetu2h] { color: var(--accent); }

.wcol-date[b-30pgzetu2h] { font-size: 14px; font-weight: 650; color: var(--text); }

.wcol-date.today[b-30pgzetu2h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.wcol-body[b-30pgzetu2h] { padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }

.wcol-item[b-30pgzetu2h] { display: flex; align-items: flex-start; gap: 7px; padding: 7px 8px; border-radius: 7px; background: var(--surface2); cursor: pointer; }

.wcol-text[b-30pgzetu2h] { min-width: 0; display: flex; flex-direction: column; }
.wcol-title[b-30pgzetu2h] { display: block; font-size: 12px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcol-client[b-30pgzetu2h] { display: block; font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcol-empty[b-30pgzetu2h] { font-size: 12px; color: var(--faint); padding: 6px 8px; }

/* --- day view --- */

.cal-day-view[b-30pgzetu2h] { padding: 24px 26px 30px; }

.day-header[b-30pgzetu2h] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
}

.day-num[b-30pgzetu2h] { font-size: 40px; font-weight: 750; color: var(--text); line-height: 1; }
.day-dow[b-30pgzetu2h] { display: block; font-size: 16px; font-weight: 650; color: var(--text); }
.day-mon[b-30pgzetu2h] { display: block; font-size: 13px; color: var(--dim); }

.day-items[b-30pgzetu2h] { display: flex; flex-direction: column; gap: 9px; max-width: 640px; }

.day-item[b-30pgzetu2h] { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 10px; background: var(--surface2); cursor: pointer; }

.day-item-text[b-30pgzetu2h] { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.day-item-title[b-30pgzetu2h] { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.day-item-client[b-30pgzetu2h] { display: block; font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-item-range[b-30pgzetu2h] { font-size: 11.5px; color: var(--faint); white-space: nowrap; }

.day-empty[b-30pgzetu2h] { font-size: 13px; color: var(--dim); padding: 20px 0; }

/* --- agenda view --- */

.cal-agenda-list[b-30pgzetu2h] { padding: 6px 0; }

.agenda-row[b-30pgzetu2h] { display: flex; gap: 20px; padding: 16px 22px; border-top: 1px solid var(--border); }

.agenda-left[b-30pgzetu2h] { flex: none; width: 118px; text-align: right; }
.agenda-dow[b-30pgzetu2h] { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--dim); }
.agenda-dow.today[b-30pgzetu2h] { color: var(--accent); }
.agenda-daynum[b-30pgzetu2h] { font-size: 26px; font-weight: 750; color: var(--text); line-height: 1.1; }
.agenda-mon[b-30pgzetu2h] { font-size: 12px; color: var(--dim); }

.agenda-items[b-30pgzetu2h] { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.agenda-item[b-30pgzetu2h] { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 9px; background: var(--surface2); cursor: pointer; }

.agenda-item-title[b-30pgzetu2h] { font-size: 13.5px; font-weight: 600; color: var(--text); }
.agenda-item-client[b-30pgzetu2h] { font-size: 13px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-spacer[b-30pgzetu2h] { flex: 1; }
.agenda-range[b-30pgzetu2h] { font-size: 11px; color: var(--faint); white-space: nowrap; }

/* --- badges (popover only) --- */

.badge[b-30pgzetu2h] {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
    line-height: 1.3;
}

.badge-draft[b-30pgzetu2h] { color: var(--ink-soft); background: var(--surface-2); }
.badge-sent[b-30pgzetu2h] { color: #1d6fd6; background: color-mix(in srgb, #1d6fd6 14%, transparent); }
.badge-inprogress[b-30pgzetu2h] { color: #b8860b; background: color-mix(in srgb, #d9a406 16%, transparent); }
.badge-submitted[b-30pgzetu2h] { color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); }
.badge-approved[b-30pgzetu2h] { color: var(--accent); background: var(--accent-soft); }

/* --- hover popover (anchored at cursor, non-interactive) --- */

.cal-popover[b-30pgzetu2h] {
    position: fixed;
    z-index: 80;
    width: 20rem;
    max-width: calc(100vw - 2rem);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 1rem 1.1rem;
    pointer-events: none;
}

.pop-head[b-30pgzetu2h] { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.8rem; }

.pop-avatar[b-30pgzetu2h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 700;
    font-size: 0.85rem;
}

.pop-client[b-30pgzetu2h] { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.pop-kind[b-30pgzetu2h] { font-size: 0.78rem; color: var(--ink-soft); }
.pop-title[b-30pgzetu2h] { font-weight: 600; font-size: 1rem; color: var(--ink); margin-bottom: 0.6rem; line-height: 1.35; }
.pop-meta[b-30pgzetu2h] { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.pop-due[b-30pgzetu2h] { font-size: 0.82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pop-progress[b-30pgzetu2h] { display: flex; align-items: center; margin-bottom: 0.6rem; }

.progress-track[b-30pgzetu2h] {
    display: inline-block;
    flex: 1;
    height: 5px;
    background: var(--surface-2);
    border-radius: 999px;
    overflow: hidden;
    margin-right: 0.6rem;
}

.progress-fill[b-30pgzetu2h] { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.progress-num[b-30pgzetu2h] { font-size: 0.76rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.pop-counts[b-30pgzetu2h] { font-size: 0.8rem; color: var(--ink-soft); }
.pop-counts .c-appr[b-30pgzetu2h] { color: var(--accent); font-weight: 600; }
.pop-counts .c-done[b-30pgzetu2h] { color: var(--good); font-weight: 600; }
.pop-counts .c-todo[b-30pgzetu2h] { color: var(--ink); font-weight: 600; }
/* /Components/Pages/Admin/Requests/PageSummary.razor.rz.scp.css */
.sum[b-8wiptoqgtw] {
    margin-top: 2rem;
}

.sum-title[b-8wiptoqgtw] {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 0.7rem;
}

.sum-tiles[b-8wiptoqgtw] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}

.sum-tile[b-8wiptoqgtw] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 0.9rem 1rem;
}

.sum-figure[b-8wiptoqgtw] {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink);
}

.sum-label[b-8wiptoqgtw] {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.sum-card[b-8wiptoqgtw] {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.2rem;
}

.sum-head[b-8wiptoqgtw] {
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--ink);
    margin: 0 0 0.2rem;
}

.sum-note[b-8wiptoqgtw] {
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin: 0;
}

.sum-list[b-8wiptoqgtw] {
    list-style: none;
    margin: 0.8rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.sum-list li + li[b-8wiptoqgtw] {
    border-top: 1px solid var(--line);
}

.sum-link[b-8wiptoqgtw] {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 0.55rem 0;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    color: var(--accent);
    cursor: pointer;
}

.sum-link:hover[b-8wiptoqgtw] {
    text-decoration: underline;
}

.sum-done[b-8wiptoqgtw] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.sum-check[b-8wiptoqgtw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent-soft, #e8f5ef);
    color: var(--accent);
}

@media (max-width: 620px) {
    .sum-tiles[b-8wiptoqgtw] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Admin/Requests/RequestBuilder.razor.rz.scp.css */
/* Request builder — mirrors the BUILDER step of Requests.dc.html. */

.builder[b-xf4kkxdgp2] {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 22px;
    align-items: start;
    width: auto;
    padding: 0% 2%
}

/* --- left page tree --- */

.builder-tree[b-xf4kkxdgp2] {
    position: sticky;
    top: 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    padding: 14px;
    box-shadow: none;
}

.tree-heading[b-xf4kkxdgp2] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
    padding: 2px 6px 10px;
    margin: 0;
}

.tree-list[b-xf4kkxdgp2] { list-style: none; margin: 0; padding: 0; }

.tree-page[b-xf4kkxdgp2],
.tree-section[b-xf4kkxdgp2] {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-ui);
}

.tree-page[b-xf4kkxdgp2] {
    font-size: 13px;
    font-weight: 650;
    color: var(--text);
    padding: 8px;
}

.tree-section[b-xf4kkxdgp2] {
    font-size: 12.5px;
    font-weight: 450;
    color: var(--dim);
    padding: 6px 8px 6px 18px;
}

.tree-page:hover[b-xf4kkxdgp2],
.tree-section:hover[b-xf4kkxdgp2] { background: var(--surface2); }

.tree-sub[b-xf4kkxdgp2] { list-style: none; margin: 0; padding: 0; border-left: none; }

.tree-add[b-xf4kkxdgp2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    border: none;
    border-top: 1px solid var(--border);
    background: none;
    color: var(--accent);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.tree-add svg[b-xf4kkxdgp2] { width: 15px; height: 15px; }

/* --- canvas --- */

.builder-canvas[b-xf4kkxdgp2] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.builder-error[b-xf4kkxdgp2] {
    padding: 12px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    color: var(--danger);
    font-size: 13px;
    margin: 0;
}

.canvas-empty[b-xf4kkxdgp2] {
    border: 1.5px dashed var(--border);
    border-radius: 16px;
    padding: 28px;
    text-align: center;
    color: var(--dim);
    font-size: 13.5px;
    background: transparent;
}

.canvas-empty p[b-xf4kkxdgp2] { margin: 0; }

/* --- page (section) card --- */

/* No overflow:hidden — the inline editors open a dropdown inside the card. */
.page-card[b-xf4kkxdgp2] {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    padding: 0;
    box-shadow: none;
}

.page-head[b-xf4kkxdgp2] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 15px 18px;
    border-bottom: 1px solid var(--border);
    margin: 0;
}

.page-title[b-xf4kkxdgp2] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.page-no[b-xf4kkxdgp2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    flex: none;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 13px;
    font-weight: 750;
}

.page-actions[b-xf4kkxdgp2] {
    display: inline-flex;
    gap: 8px;
    flex: none;
}

.mini[b-xf4kkxdgp2] {
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--dim);
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 550;
    cursor: pointer;
}

.mini:hover[b-xf4kkxdgp2] { background: var(--surface2); color: var(--text); }
.mini.danger[b-xf4kkxdgp2] { color: var(--danger); }
.mini.danger:hover[b-xf4kkxdgp2] { background: var(--danger-soft); color: var(--danger); }

.mini.primary[b-xf4kkxdgp2] {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.mini.primary:hover[b-xf4kkxdgp2] { background: var(--accent-hover); color: #fff; }

/* --- section block inside a page --- */

.section-block[b-xf4kkxdgp2] {
    padding: 16px 18px;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.section-head[b-xf4kkxdgp2] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.section-title[b-xf4kkxdgp2] {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.section-blurb[b-xf4kkxdgp2] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--dim);
    margin: 0 0 10px;
}

.section-blurb > :first-child[b-xf4kkxdgp2] { margin-top: 0; }
.section-blurb > :last-child[b-xf4kkxdgp2] { margin-bottom: 0; }
.section-blurb p[b-xf4kkxdgp2] { margin: 0 0 .45rem; }
.section-blurb a[b-xf4kkxdgp2] { color: var(--accent); }

/* --- question rows --- */

.field-list[b-xf4kkxdgp2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.field-row[b-xf4kkxdgp2] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface2);
}

.field-row.internal[b-xf4kkxdgp2] { border-style: dashed; }
.field-row.content[b-xf4kkxdgp2] { border-style: dashed; }

.field-glyph[b-xf4kkxdgp2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    flex: none;
    margin-top: 2px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
}

.field-main[b-xf4kkxdgp2] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.field-label[b-xf4kkxdgp2] {
    font-size: 15px;
    font-weight: 650;
    color: var(--text);
}

.field-desc[b-xf4kkxdgp2],
.field-content-preview[b-xf4kkxdgp2] {
    font-size: 13px;
    line-height: 1.45;
    color: var(--dim);
    margin-top: 3px;
}

.field-content-preview > :first-child[b-xf4kkxdgp2] { margin-top: 0; }
.field-content-preview > :last-child[b-xf4kkxdgp2] { margin-bottom: 0; }
.field-content-preview p[b-xf4kkxdgp2] { margin: 0 0 .4rem; }

.field-tags[b-xf4kkxdgp2] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.tag[b-xf4kkxdgp2] {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--faint);
    border: 1px solid var(--border);
    padding: 3px 9px;
    border-radius: 6px;
    background: none;
}

.tag.internal-tag[b-xf4kkxdgp2] { color: var(--accent); border-color: var(--accent); }

.field-tools[b-xf4kkxdgp2] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: none;
    color: var(--faint);
}

.field-tools button[b-xf4kkxdgp2] {
    display: flex;
    align-items: center;
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 550;
}

.field-tools button:hover[b-xf4kkxdgp2] { color: var(--text); }
.field-tools button.danger[b-xf4kkxdgp2] { color: var(--danger); }

/* the design paints Edit as the one accented tool */
.field-tools button[title="Edit"][b-xf4kkxdgp2] { color: var(--accent); }

/* --- add buttons --- */

.add-field-row[b-xf4kkxdgp2] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.add-field-btn[b-xf4kkxdgp2],
.canvas-add[b-xf4kkxdgp2] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px;
    border: 1px dashed var(--border);
    border-radius: 9px;
    background: transparent;
    color: var(--accent);
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0;
}

.add-field-btn:hover[b-xf4kkxdgp2],
.canvas-add:hover[b-xf4kkxdgp2] { background: var(--accent-soft); }

.add-field-btn svg[b-xf4kkxdgp2],
.canvas-add svg[b-xf4kkxdgp2] { width: 14px; height: 14px; }

.canvas-add[b-xf4kkxdgp2] {
    align-self: flex-start;
    height: 40px;
    padding: 0 18px;
    border-radius: 11px;
    font-size: 13px;
}

/* --- inline editors --- */

.inline-edit[b-xf4kkxdgp2] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.section-add[b-xf4kkxdgp2],
.page-add[b-xf4kkxdgp2] { margin: 0 18px 16px; }

.inline-edit input[type=text][b-xf4kkxdgp2] {
    flex: 1;
    min-width: 12rem;
    height: 38px;
    padding: 0 13px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 13.5px;
}

.inline-edit input:focus[b-xf4kkxdgp2] { outline: none; border-color: var(--accent); }

.section-editor[b-xf4kkxdgp2] {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.field-editor[b-xf4kkxdgp2] {
    flex: 1;
    border: 1px solid var(--accent);
    border-radius: 12px;
    background: var(--surface);
    padding: 14px;
}

.fe-grid[b-xf4kkxdgp2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.fe-grid label[b-xf4kkxdgp2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dim);
}

.fe-full[b-xf4kkxdgp2] { grid-column: 1 / -1; }
.fe-hint[b-xf4kkxdgp2] { font-weight: 400; color: var(--faint); }

.fe-rte[b-xf4kkxdgp2] { display: flex; flex-direction: column; gap: 6px; }

.fe-rte-label[b-xf4kkxdgp2] {
    font-size: 12px;
    font-weight: 600;
    color: var(--dim);
}

/* ::deep — InputText renders the <input>, so it carries no scope attribute. */
[b-xf4kkxdgp2] .fe-grid input[type=text],
[b-xf4kkxdgp2] .fe-grid textarea {
    padding: 10px 13px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 13.5px;
}

[b-xf4kkxdgp2] .fe-grid input:focus,
[b-xf4kkxdgp2] .fe-grid textarea:focus { outline: none; border-color: var(--accent); }

[b-xf4kkxdgp2] .fe-grid .validation-message { font-weight: 400; font-size: 12px; }

.fe-checks[b-xf4kkxdgp2] {
    flex-direction: row !important;
    gap: 16px !important;
    align-items: center;
    font-weight: 500 !important;
    color: var(--text) !important;
}

.fe-checks span[b-xf4kkxdgp2] { display: inline-flex; align-items: center; gap: 7px; }

.fe-actions[b-xf4kkxdgp2] { display: flex; gap: 8px; margin-top: 12px; }

@media (max-width: 900px) {
    .builder[b-xf4kkxdgp2] { grid-template-columns: 1fr; }
    .builder-tree[b-xf4kkxdgp2] { position: static; }
    .fe-grid[b-xf4kkxdgp2] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Admin/Requests/RequestDetailPage.razor.rz.scp.css */
/* Request detail / review — mirrors the DETAIL screen of Requests.dc.html.
   The question column itself is RequestPreview, restyled under .req-shell
   in app.css; everything here is the chrome around it. */

.rq-back[b-dqn56qyl42] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 550;
    color: var(--accent);
    margin-bottom: 14px;
    text-decoration: none;
}

.rq-back:hover[b-dqn56qyl42] {
    opacity: .82;
    color: var(--accent);
    text-decoration: none;
}

/* --- header card --- */

.rq-dhead[b-dqn56qyl42] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    padding: 24px 26px 24px 30px;
    margin-bottom: 20px;
}

/* the design clips the rail with overflow:hidden; that would clip the
   save-as-template dropdown, so the rail rounds itself instead */
.rq-dhead .st-rail[b-dqn56qyl42] {
    width: 5px;
    border-radius: 18px 0 0 18px;
}

.rq-dhead-main[b-dqn56qyl42] {
    flex: 1;
    min-width: 240px;
}

.rq-dhead-client[b-dqn56qyl42] {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--accent);
    margin-bottom: 8px;
}

.rq-dhead-title[b-dqn56qyl42] {
    font-family: var(--font-display);
    margin: 0 0 12px;
    font-size: 26px;
    font-weight: 750;
    letter-spacing: -.02em;
    color: var(--text);
}

.rq-dhead-meta[b-dqn56qyl42] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--dim);
}

.rq-dhead-due[b-dqn56qyl42] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.rq-dhead-side[b-dqn56qyl42] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.rq-dhead-actions[b-dqn56qyl42] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- buttons --- */

.rq-btn[b-dqn56qyl42],
.rq-btn-ghost[b-dqn56qyl42] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 18px;
    border-radius: 10px;
    font-family: var(--font-ui);
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.rq-btn[b-dqn56qyl42] {
    border: none;
    background: var(--accent);
    color: #fff;
    font-weight: 650;
}

.rq-btn:hover[b-dqn56qyl42] {
    background: var(--accent-hover);
    color: #fff;
    text-decoration: none;
}

.rq-btn:disabled[b-dqn56qyl42] {
    opacity: .5;
    cursor: not-allowed;
}

.rq-btn-ghost[b-dqn56qyl42] {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-weight: 550;
}

.rq-btn-ghost:hover[b-dqn56qyl42] {
    background: var(--surface2);
}

.rq-btn.lg[b-dqn56qyl42],
.rq-btn-ghost.lg[b-dqn56qyl42] {
    height: 40px;
    font-size: 13.5px;
}

.rq-btn.lg[b-dqn56qyl42] { padding: 0 22px; }
.rq-btn-ghost.lg[b-dqn56qyl42] { padding: 0 20px; }

.rq-btn.sm[b-dqn56qyl42],
.rq-btn-ghost.sm[b-dqn56qyl42] {
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 12.5px;
}

/* --- save as template --- */

.rq-template-save[b-dqn56qyl42] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* ::deep — InputText renders the <input>, so it carries no scope attribute. */
[b-dqn56qyl42] .rq-template-save input {
    height: 38px;
    min-width: 18rem;
    padding: 0 13px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 13px;
}

[b-dqn56qyl42] .rq-template-save input:focus {
    outline: none;
    border-color: var(--accent);
}

[b-dqn56qyl42] .rq-template-save .validation-message {
    flex-basis: 100%;
    margin: 0;
    font-size: 12.5px;
}

/* --- footer panels --- */

.rq-panel[b-dqn56qyl42] {
    margin-top: 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    padding: 20px;
}

.rq-panel-row[b-dqn56qyl42] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 20px;
}

.rq-panel-title[b-dqn56qyl42] {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 5px;
}

.rq-panel-text[b-dqn56qyl42] {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--dim);
    margin: 0 0 16px;
}

.rq-panel-text strong[b-dqn56qyl42] {
    color: var(--text);
    font-weight: 600;
}

.rq-panel-hint[b-dqn56qyl42] {
    font-size: 12px;
    color: var(--faint);
    margin: 10px 0 0;
}

.rq-issued[b-dqn56qyl42] {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.rq-issued input[b-dqn56qyl42] {
    flex: 1;
    height: 38px;
    padding: 0 13px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
}

.rq-issued button[b-dqn56qyl42] {
    height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--accent);
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
}

.rq-issued button:hover[b-dqn56qyl42] {
    background: var(--accent-soft);
}

/* --- approved --- */

.rq-approved[b-dqn56qyl42] {
    margin-top: 24px;
    border: 1px solid var(--ok-border);
    border-radius: 16px;
    background: var(--ok-soft);
    padding: 28px;
    text-align: center;
}

.rq-approved-check[b-dqn56qyl42] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ok);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.rq-approved-title[b-dqn56qyl42] {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 750;
    color: var(--text);
    margin-bottom: 6px;
}

.rq-approved-text[b-dqn56qyl42] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--dim);
    max-width: 440px;
    margin: 0 auto;
}

.empty-note[b-dqn56qyl42] {
    font-size: 13.5px;
    color: var(--dim);
    padding: 0.4rem 0;
}
/* /Components/Pages/Admin/Requests/RequestPreview.razor.rz.scp.css */
.prev-empty[b-60mr6rmcp4], .prev-none[b-60mr6rmcp4] { color: var(--ink-soft); padding: 1.5rem; }

.prev-lockbar[b-60mr6rmcp4] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--accent-soft);
    color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: var(--radius);
    padding: 0.7rem 1rem;
    font-size: 0.88rem;
    margin-bottom: 1rem;
}
.prev-lockbar svg[b-60mr6rmcp4] { width: 18px; height: 18px; color: var(--accent); flex: none; }

.prev-shell[b-60mr6rmcp4] {
    display: grid;
    grid-template-columns: 16rem 1fr;
    gap: 1.25rem;
    align-items: start;
}

.prev-nav[b-60mr6rmcp4] {
    position: sticky;
    top: 1rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}
.prev-title[b-60mr6rmcp4] { font-weight: 700; color: var(--ink-deep); margin: 0 0 0.15rem; font-size: 1rem; }
.prev-due[b-60mr6rmcp4] { font-size: 0.8rem; color: var(--ink-soft); margin: 0 0 0.75rem; }

.prev-nav-list[b-60mr6rmcp4] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }

.prev-nav-item[b-60mr6rmcp4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font-ui);
    color: var(--ink);
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    font-size: 0.86rem;
}
.prev-nav-item:hover[b-60mr6rmcp4] { background: var(--surface-2); }
.prev-nav-item.active[b-60mr6rmcp4] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.prev-nav-count[b-60mr6rmcp4] {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--surface-2);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    flex: none;
}
.prev-nav-count.done[b-60mr6rmcp4] { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }

.prev-body[b-60mr6rmcp4] { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.prev-card[b-60mr6rmcp4] {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.3rem 1.4rem;
}

/* A page is a transparent group: the heading sits on the page background and
   each question below it brings its own card. */
.prev-page[b-60mr6rmcp4] { display: block; scroll-margin-top: 1rem; }

.prev-section-head[b-60mr6rmcp4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.4rem 0 0.7rem;
}

.prev-section-head.sub[b-60mr6rmcp4] {
    margin-top: 1.4rem;
    scroll-margin-top: 1rem;
}

.prev-section-count[b-60mr6rmcp4] {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--surface-2);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    flex: none;
}

.prev-heading[b-60mr6rmcp4] { font-size: 1.1rem; font-weight: 600; color: var(--ink-deep); margin: 0; }
.prev-subheading[b-60mr6rmcp4] { font-size: 0.95rem; font-weight: 600; color: var(--ink); margin: 0; }

.prev-instructions[b-60mr6rmcp4] { font-size: 0.94rem; line-height: 1.65; color: var(--ink); }
.prev-instructions :is(h1,h2,h3)[b-60mr6rmcp4] { font-weight: 600; margin: 0.8rem 0 0.4rem; }
.prev-instructions p[b-60mr6rmcp4] { margin: 0 0 0.7rem; }
.prev-instructions ul[b-60mr6rmcp4], .prev-instructions ol[b-60mr6rmcp4] { margin: 0 0 0.7rem 1.4rem; }
.prev-instructions a[b-60mr6rmcp4] { color: var(--accent); }

/* sanitised blurb under a page/section heading */
.prev-section-blurb[b-60mr6rmcp4] { font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 1rem; }
.prev-section-blurb :is(h1,h2,h3)[b-60mr6rmcp4] { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 0.8rem 0 0.4rem; }
.prev-section-blurb > :first-child[b-60mr6rmcp4] { margin-top: 0; }
.prev-section-blurb > :last-child[b-60mr6rmcp4] { margin-bottom: 0; }
.prev-section-blurb p[b-60mr6rmcp4] { margin: 0 0 0.55rem; }
.prev-section-blurb ul[b-60mr6rmcp4], .prev-section-blurb ol[b-60mr6rmcp4] { margin: 0 0 0.55rem 1.4rem; }
.prev-section-blurb a[b-60mr6rmcp4] { color: var(--accent); }

@media (max-width: 860px) {
    .prev-shell[b-60mr6rmcp4] { grid-template-columns: 1fr; }
    .prev-nav[b-60mr6rmcp4] { position: static; }
}

/* client header in nav */
.prev-client[b-60mr6rmcp4] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.85rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid var(--line);
}
.prev-avatar[b-60mr6rmcp4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 700;
    font-size: 0.82rem;
    flex: none;
}
.prev-client-info[b-60mr6rmcp4] { display: flex; flex-direction: column; min-width: 0; }
.prev-client-name[b-60mr6rmcp4] { font-weight: 600; color: var(--ink-deep); font-size: 0.9rem; }
.prev-client-email[b-60mr6rmcp4] { font-size: 0.78rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* subsection nav */
.prev-nav-sub[b-60mr6rmcp4] {
    list-style: none;
    margin: 0.1rem 0 0.2rem 0.75rem;
    padding-left: 0.5rem;
    border-left: 1.5px solid var(--line);
}
.prev-nav-subitem[b-60mr6rmcp4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font-ui);
    color: var(--ink-soft);
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    font-size: 0.82rem;
}
.prev-nav-subitem:hover[b-60mr6rmcp4] { background: var(--surface-2); color: var(--ink); }

/* completion tick */
.prev-nav-tick[b-60mr6rmcp4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-dark);
    flex: none;
}
.prev-nav-tick svg[b-60mr6rmcp4] { width: 12px; height: 12px; }
/* /Components/Pages/Admin/Requests/RequestsDashboard.razor.rz.scp.css */
/* Requests list — mirrors the LIST screen of Requests.dc.html. Palette
   tokens come from .req-shell in app.css; every number here is the
   design's own px value. */

/* --- page head --- */

.req-head[b-l8ua1dv8jt] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.req-eyebrow[b-l8ua1dv8jt] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 5px;
}

.req-title[b-l8ua1dv8jt] {
    font-family: var(--font-display);
    margin: 0;
    font-size: 30px;
    font-weight: 750;
    letter-spacing: -.02em;
    color: var(--text);
}

.req-new[b-l8ua1dv8jt] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 20px;
    border-radius: 12px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 650;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(109, 92, 245, .4);
}

.req-new:hover[b-l8ua1dv8jt] {
    background: var(--accent-hover);
    color: #fff;
    text-decoration: none;
}

/* --- stat strip --- */

.req-stats[b-l8ua1dv8jt] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.req-stat[b-l8ua1dv8jt] {
    flex: 1;
    min-width: 130px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    padding: 14px 16px;
}

.req-stat-top[b-l8ua1dv8jt] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
}

.req-stat-dot[b-l8ua1dv8jt] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--st);
    flex: none;
}

.req-stat-label[b-l8ua1dv8jt] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dim);
}

.req-stat-count[b-l8ua1dv8jt] {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 750;
    line-height: 1;
    color: var(--text);
}

/* --- toolbar --- */

.req-toolbar[b-l8ua1dv8jt] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.req-toolbar-gap[b-l8ua1dv8jt] {
    flex: 1;
}

.req-search[b-l8ua1dv8jt] {
    position: relative;
}

.req-search-icon[b-l8ua1dv8jt] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--faint);
    pointer-events: none;
}

.req-search-input[b-l8ua1dv8jt] {
    width: 240px;
    height: 38px;
    padding: 0 14px 0 34px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 13px;
}

.req-search-input:focus[b-l8ua1dv8jt] {
    outline: none;
    border-color: var(--accent);
}

.req-search-input[b-l8ua1dv8jt]::placeholder {
    color: var(--faint);
}

.req-search-input[b-l8ua1dv8jt]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* the shared ViewSwitch, wearing the design's segmented control */
[b-l8ua1dv8jt] .view-switch {
    display: flex;
    gap: 0;
    padding: 3px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

[b-l8ua1dv8jt] .view-switch .view-btn {
    width: 32px;
    height: 30px;
    border-radius: 8px;
    background: transparent;
    color: var(--dim);
    box-shadow: none;
}

[b-l8ua1dv8jt] .view-switch .view-btn.active {
    background: var(--accent);
    color: #fff;
    box-shadow: none;
}

/* --- grid view --- */

.rq-grid[b-l8ua1dv8jt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.rq-card[b-l8ua1dv8jt] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 170px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    padding: 22px 20px 18px 24px;
    cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

.rq-card:hover[b-l8ua1dv8jt] {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}

/* the design clips the rail with overflow:hidden on the card, which would
   also clip the row menu — round the rail itself instead */
.rq-card .st-rail[b-l8ua1dv8jt] {
    width: 4px;
    border-radius: 16px 0 0 16px;
}

.rq-card-top[b-l8ua1dv8jt] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.rq-card-titles[b-l8ua1dv8jt] {
    flex: 1;
    min-width: 0;
}

.rq-card-name[b-l8ua1dv8jt] {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.28;
    color: var(--text);
    margin-bottom: 3px;
}

.rq-card-client[b-l8ua1dv8jt] {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rq-card-spacer[b-l8ua1dv8jt] {
    flex: 1;
}

.rq-card-foot[b-l8ua1dv8jt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--border);
    padding-top: 13px;
}

.rq-card-meta[b-l8ua1dv8jt] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--faint);
    /* keeps the meta and the row menu together on the right, rather than
       letting space-between strand the meta in the middle */
    margin-left: auto;
}

.rq-due[b-l8ua1dv8jt] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.rq-done[b-l8ua1dv8jt] {
    color: var(--ok);
    font-weight: 600;
}

/* --- table view --- */

/* No overflow:hidden — it would clip the row menu. The corners are rounded
   on the head and last row instead, which reads identically. */
.rq-table[b-l8ua1dv8jt] {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.rq-thead[b-l8ua1dv8jt],
.rq-trow[b-l8ua1dv8jt] {
    display: grid;
    grid-template-columns: 2.4fr 2fr 1.1fr 1.1fr .8fr 1.4fr;
    gap: 12px;
}

.rq-thead[b-l8ua1dv8jt] {
    padding: 13px 22px;
    background: var(--head);
    border-bottom: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
}

.rq-thead > div[b-l8ua1dv8jt] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--dim);
}

.rq-trow[b-l8ua1dv8jt] {
    position: relative;
    align-items: center;
    padding: 14px 22px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.rq-trow:hover[b-l8ua1dv8jt] {
    background: var(--surface2);
}

.rq-trow:last-child[b-l8ua1dv8jt] {
    border-bottom: none;
    border-radius: 0 0 16px 16px;
}

.rq-trow .st-rail[b-l8ua1dv8jt] {
    width: 3px;
}

.rq-trow:last-child .st-rail[b-l8ua1dv8jt] {
    border-radius: 0 0 0 16px;
}

.rq-tname[b-l8ua1dv8jt] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.rq-tname span[b-l8ua1dv8jt] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rq-tdim[b-l8ua1dv8jt] {
    font-size: 12.5px;
    color: var(--dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rq-tprogress[b-l8ua1dv8jt] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.rq-tpct[b-l8ua1dv8jt] {
    font-size: 11.5px;
    color: var(--faint);
    width: 30px;
    text-align: right;
}

/* --- board view --- */

.rq-board[b-l8ua1dv8jt] {
    display: grid;
    grid-template-columns: repeat(5, minmax(232px, 1fr));
    gap: 14px;
}

.rq-col[b-l8ua1dv8jt] {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface2);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 220px;
    /* Cap to the viewport (the board starts ~15rem down) so a full column
       scrolls its own cards instead of scrolling the whole page. */
    max-height: calc(100vh - 17rem);
}

.rq-col-body[b-l8ua1dv8jt] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* room for the card's hover lift and focus ring */
    padding: 2px;
    margin: -2px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--dim) 28%, transparent) transparent;
}

.rq-col-body[b-l8ua1dv8jt]::-webkit-scrollbar { width: 8px; }
.rq-col-body[b-l8ua1dv8jt]::-webkit-scrollbar-track { background: transparent; }

.rq-col-body[b-l8ua1dv8jt]::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--dim) 28%, transparent);
    border-radius: 8px;
}

.rq-col-head[b-l8ua1dv8jt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 8px;
    border-bottom: 1px solid var(--border);
}

.rq-col-dot[b-l8ua1dv8jt] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--st);
    flex: none;
}

.rq-col-name[b-l8ua1dv8jt] {
    flex: 1;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
}

.rq-col-count[b-l8ua1dv8jt] {
    font-size: 11px;
    font-weight: 700;
    color: var(--faint);
    background: var(--surface);
    padding: 2px 8px;
    border-radius: 20px;
}

.rq-mini[b-l8ua1dv8jt] {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    padding: 14px 14px 13px 16px;
    cursor: pointer;
}

.rq-mini:hover[b-l8ua1dv8jt] {
    border-color: var(--accent);
}

.rq-mini[draggable="true"][b-l8ua1dv8jt] {
    cursor: grab;
}

.rq-mini[draggable="true"]:active[b-l8ua1dv8jt] {
    cursor: grabbing;
}

.rq-mini .st-rail[b-l8ua1dv8jt] {
    width: 3px;
    border-radius: 12px 0 0 12px;
}

.rq-mini-top[b-l8ua1dv8jt] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 12px;
}

.rq-mini-titles[b-l8ua1dv8jt] {
    flex: 1;
    min-width: 0;
}

.rq-mini-name[b-l8ua1dv8jt] {
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.3;
    color: var(--text);
    margin-bottom: 2px;
}

.rq-mini-client[b-l8ua1dv8jt] {
    font-size: 11px;
    font-weight: 600;
    color: var(--dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rq-mini-progress[b-l8ua1dv8jt] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.rq-mini-progress .req-bar[b-l8ua1dv8jt] {
    height: 5px;
    border-radius: 3px;
}

.rq-mini-pct[b-l8ua1dv8jt] {
    font-size: 11px;
    color: var(--faint);
}

.rq-mini-foot[b-l8ua1dv8jt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.rq-mini-due[b-l8ua1dv8jt] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--faint);
}

/* --- row actions (not in the design) ---
   Same slot in all three views: the trailing end of the card's foot row,
   or the end of the table row. In the flow rather than pinned to a
   corner, so it never lands on the ring or the progress figure. */

.rq-menu[b-l8ua1dv8jt] {
    position: relative;
    flex: none;
    align-self: center;
    margin-left: 2px;
}

.rq-dots[b-l8ua1dv8jt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 7px;
    background: none;
    color: var(--faint);
    cursor: pointer;
    transition: color .12s, background-color .12s;
}

.rq-dots svg[b-l8ua1dv8jt] { width: 16px; height: 16px; }

.rq-dots:hover[b-l8ua1dv8jt] {
    color: var(--text);
    background: var(--surface2);
}

/* Card menus open upward — the trigger sits at the bottom of the card. */
.rq-menu-list[b-l8ua1dv8jt] {
    position: absolute;
    right: 0;
    bottom: 30px;
    z-index: 21;
    min-width: 9rem;
    padding: 6px;
    display: flex;
    flex-direction: column;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}

.rq-trow .rq-menu-list[b-l8ua1dv8jt] {
    top: 30px;
    bottom: auto;
}

.rq-menu-list button[b-l8ua1dv8jt] {
    text-align: left;
    border: none;
    background: none;
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 550;
    color: var(--text);
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.rq-menu-list button:hover[b-l8ua1dv8jt] {
    background: var(--surface2);
}

.rq-menu-list .menu-danger[b-l8ua1dv8jt] {
    color: var(--danger);
}

.menu-backdrop[b-l8ua1dv8jt] {
    position: fixed;
    inset: 0;
    z-index: 20;
}

/* --- empty state --- */

.req-empty[b-l8ua1dv8jt] {
    text-align: center;
    padding: 70px 20px;
    color: var(--dim);
}

.req-empty-title[b-l8ua1dv8jt] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.req-empty-sub[b-l8ua1dv8jt] {
    font-size: 13px;
}

/* the design scrolls the board sideways below 900px */
@media (max-width: 900px) {
    .rq-board[b-l8ua1dv8jt] {
        overflow-x: auto;
    }
}
/* /Components/Pages/Admin/Requests/RequestWizard.razor.rz.scp.css */
/* Request wizard — mirrors the WIZARD screens of Requests.dc.html. The
   stepper, builder and preview are their own components; this is the
   top bar plus the four narrow steps around them. */

.wiz-topbar[b-44jdupqqhe] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 34px;
}

.wiz-back[b-44jdupqqhe] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid var(--border);
    color: var(--dim);
    flex: none;
    text-decoration: none;
}

.wiz-back:hover[b-44jdupqqhe] {
    background: var(--surface2);
    color: var(--text);
    text-decoration: none;
}

.wiz-next[b-44jdupqqhe] {
    height: 40px;
    padding: 0 20px;
    border-radius: 11px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    flex: none;
    white-space: nowrap;
    box-shadow: 0 3px 12px rgba(109, 92, 245, .35);
}

.wiz-next:hover[b-44jdupqqhe] { background: var(--accent-hover); }
.wiz-next:disabled[b-44jdupqqhe] { opacity: .5; cursor: not-allowed; }

.wiz-error[b-44jdupqqhe] {
    max-width: 720px;
    margin: 0 auto 20px;
    padding: 12px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    color: var(--danger);
    font-size: 13px;
}

/* --- step widths --- */

.wiz-wide[b-44jdupqqhe] { max-width: 950px; margin: 0 auto; }
.wiz-narrow[b-44jdupqqhe] { max-width:900px; margin: 0 auto; }
.wiz-slim[b-44jdupqqhe] { max-width: 640px; margin: 0 auto; }

.wiz-h1[b-44jdupqqhe] {
    font-family: var(--font-display);
    text-align: center;
    margin: 8px 0 6px;
    font-size: 27px;
    font-weight: 750;
    color: var(--text);
}

.wiz-h1.tight[b-44jdupqqhe] { margin: 8px 0 28px; }

.wiz-sub[b-44jdupqqhe] {
    text-align: center;
    font-size: 14px;
    color: var(--dim);
    margin: 0 0 28px;
}

.wiz-sub strong[b-44jdupqqhe] { color: var(--text); font-weight: 650; }

.wiz-h2[b-44jdupqqhe] {
    font-family: var(--font-display);
    margin: 0;
    font-size: 23px;
    font-weight: 750;
    color: var(--text);
}

.wiz-sub2[b-44jdupqqhe] {
    font-size: 13px;
    color: var(--dim);
    margin: 3px 0 0;
}

.wiz-builder-head[b-44jdupqqhe] { margin-bottom: 18px; }

/* --- step 1: templates --- */

.wiz-blank[b-44jdupqqhe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 1.5px dashed var(--border);
    border-radius: 16px;
    background: transparent;
    padding: 28px;
    margin-bottom: 30px;
    text-align: center;
    cursor: pointer;
    font-family: var(--font-ui);
}

.wiz-blank:hover[b-44jdupqqhe] { border-color: var(--accent); }
.wiz-blank:disabled[b-44jdupqqhe] { opacity: .6; cursor: not-allowed; }

.wiz-blank-icon[b-44jdupqqhe] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
}

.wiz-blank-title[b-44jdupqqhe] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.wiz-blank-note[b-44jdupqqhe] {
    font-size: 13px;
    color: var(--dim);
}

.wiz-divider[b-44jdupqqhe] {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 16px;
}

.wiz-tpl-grid[b-44jdupqqhe] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}

.wiz-tpl[b-44jdupqqhe] {
    display: block;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    padding: 18px;
    cursor: pointer;
    font-family: var(--font-ui);
    transition: border-color .15s, transform .15s;
}

.wiz-tpl:hover[b-44jdupqqhe] {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.wiz-tpl:disabled[b-44jdupqqhe] { opacity: .6; cursor: not-allowed; }

.wiz-tpl-name[b-44jdupqqhe] {
    display: block;
    min-height: 38px;
    font-size: 14.5px;
    font-weight: 650;
    line-height: 1.35;
    color: var(--text);
    margin-bottom: 10px;
}

.wiz-tpl-meta[b-44jdupqqhe] {
    font-size: 12.5px;
    color: var(--dim);
}

.wiz-tpl-count[b-44jdupqqhe] { font-weight: 600; }
.wiz-tpl-cat[b-44jdupqqhe] { color: var(--accent); }

/* --- fields (steps 2 and 5) --- */

.wiz-label[b-44jdupqqhe] {
    display: block;
    font-size: 13px;
    font-weight: 650;
    color: var(--text);
    margin-bottom: 8px;
}

.wiz-label.spaced[b-44jdupqqhe] { margin-top: 22px; }

.wiz-optional[b-44jdupqqhe] {
    color: var(--faint);
    font-weight: 400;
}

.wiz-input[b-44jdupqqhe] {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 14px;
    margin-bottom: 20px;
}

.wiz-input:focus[b-44jdupqqhe] {
    outline: none;
    border-color: var(--accent);
}

.wiz-input[b-44jdupqqhe]::placeholder { color: var(--faint); }

/* step 2 stacks with its own label margins, so no trailing gap there */
.wiz-narrow .wiz-input[b-44jdupqqhe] { margin-bottom: 0; }

.req-select[b-44jdupqqhe] { margin-bottom: 20px; }
.wiz-narrow .req-select[b-44jdupqqhe] { margin-bottom: 0; }

/* Quill, wearing the design's instructions box */
.wiz-rte[b-44jdupqqhe] {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

[b-44jdupqqhe] .wiz-rte .rte { border: none; border-radius: 0; }

[b-44jdupqqhe] .wiz-rte .ql-toolbar.ql-snow {
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: var(--head);
    padding: 7px 10px;
}

[b-44jdupqqhe] .wiz-rte .ql-container.ql-snow {
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
}

[b-44jdupqqhe] .wiz-rte .ql-editor {
    min-height: 150px;
    max-height: none;
    padding: 16px 18px;
    line-height: 1.7;
    color: var(--text);
}

/* --- checkbox --- */

.wiz-check[b-44jdupqqhe] {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 13.5px;
    color: var(--text);
    cursor: pointer;
    margin-bottom: 20px;
}

.wiz-check input[b-44jdupqqhe] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.wiz-check-box[b-44jdupqqhe] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid var(--faint);
    color: transparent;
    flex: none;
}

.wiz-check input:checked + .wiz-check-box[b-44jdupqqhe] {
    border: none;
    background: var(--accent);
    color: #fff;
}

/* --- publish --- */

.wiz-publish-row[b-44jdupqqhe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
}

.wiz-publish[b-44jdupqqhe] {
    height: 44px;
    padding: 0 28px;
    border-radius: 12px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 4px 16px rgba(109, 92, 245, .4);
}

.wiz-publish:hover[b-44jdupqqhe] {
    background: var(--accent-hover);
    color: #fff;
    text-decoration: none;
}

.wiz-publish:disabled[b-44jdupqqhe] { opacity: .5; cursor: not-allowed; }

.wiz-draft-link[b-44jdupqqhe] {
    border: none;
    background: none;
    color: var(--accent);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 550;
    text-decoration: underline;
    cursor: pointer;
}

.wiz-draft-link:hover[b-44jdupqqhe] { opacity: .82; }

.wiz-hint[b-44jdupqqhe] {
    font-size: 12px;
    color: var(--faint);
    text-align: center;
}

/* --- publish success --- */

.wiz-success[b-44jdupqqhe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 0;
}

.wiz-success-check[b-44jdupqqhe] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ok);
    color: #fff;
    margin-bottom: 14px;
}
/* /Components/Pages/Admin/Requests/WizardStepper.razor.rz.scp.css */
/* Wizard stepper — mirrors the step rail of Requests.dc.html. */

.stepper[b-k0vi3s5h7l] {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}

.step[b-k0vi3s5h7l] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-ui);
}

.step:disabled[b-k0vi3s5h7l] { cursor: default; }

.step-dot[b-k0vi3s5h7l] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: none;
    border: 1.5px solid var(--border);
    background: var(--surface2);
    color: var(--dim);
    font-size: 12.5px;
    font-weight: 700;
}

.step-label[b-k0vi3s5h7l] {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--dim);
    white-space: nowrap;
}

.step.active .step-dot[b-k0vi3s5h7l],
.step.done .step-dot[b-k0vi3s5h7l] {
    border: none;
    background: var(--accent);
    color: #fff;
}

.step.active .step-dot[b-k0vi3s5h7l] {
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.step.active .step-label[b-k0vi3s5h7l] {
    font-weight: 700;
    color: var(--text);
}

.step.done .step-label[b-k0vi3s5h7l] { color: var(--text); }

.step-track[b-k0vi3s5h7l] {
    position: relative;
    flex: 1;
    min-width: 20px;
    height: 2px;
    margin: 0 12px;
    border-radius: 2px;
    background: var(--border);
    overflow: hidden;
}

.step-fill[b-k0vi3s5h7l] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--accent);
}

.step-fill.on[b-k0vi3s5h7l] { width: 100%; }

@media (max-width: 860px) {
    .step-label[b-k0vi3s5h7l] { display: none; }
    .step-track[b-k0vi3s5h7l] { margin: 0 8px; }
}
/* /Components/Pages/Admin/Team/AddTeamMember.razor.rz.scp.css */
.detail-head[b-vjkueejmcf] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.8rem;
}

.detail-back[b-vjkueejmcf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--card);
    text-decoration: none;
    flex-shrink: 0;
}

.detail-back:hover[b-vjkueejmcf] {
    background: var(--surface-2);
}

.detail-name[b-vjkueejmcf] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    margin: 0;
    color: var(--ink);
}

.invite-card[b-vjkueejmcf] {
    max-width: 30rem;
    margin: 0 auto;
}

.field-label[b-vjkueejmcf] {
    display: block;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--ink);
    margin: 1.1rem 0 0.4rem;
}

.field-label:first-of-type[b-vjkueejmcf] {
    margin-top: 0;
}

/* ::deep — InputText renders the <input>, so it carries no scope attribute.
   Still matches the plain <textarea class="field-input"> below it. */
[b-vjkueejmcf] .field-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.92rem;
    padding: 0.7rem 0.8rem;
}

[b-vjkueejmcf] .field-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--card);
}

[b-vjkueejmcf] .validation-message {
    margin: 0.3rem 0 0;
    font-size: 0.82rem;
}

.field-textarea[b-vjkueejmcf] {
    min-height: 5rem;
    resize: vertical;
}

.field-foot[b-vjkueejmcf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;
    font-size: 0.76rem;
    color: var(--ink-soft);
}

.field-hint[b-vjkueejmcf] {
    color: var(--copper, var(--accent));
}

.detail-note[b-vjkueejmcf] {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    margin-top: 1.4rem;
    padding: 0.9rem 1rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.detail-note-icon[b-vjkueejmcf] {
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.detail-note p[b-vjkueejmcf] {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.invite-actions[b-vjkueejmcf] {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    margin-top: 1.6rem;
}

.primary-button[b-vjkueejmcf] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.92rem;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.4rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.primary-button:hover:not(:disabled)[b-vjkueejmcf] {
    background: var(--accent-hover);
}

.primary-button:disabled[b-vjkueejmcf] {
    opacity: 0.5;
    cursor: not-allowed;
}

.secondary-button[b-vjkueejmcf] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ink);
    background: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.secondary-button:hover[b-vjkueejmcf] {
    background: var(--surface-2);
}
/* /Components/Pages/Admin/Team/AdminUsers.razor.rz.scp.css */
.mono-note[b-79muhpm8gx] {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--copper, #b5622e);
    margin: 0;
}

.page-head[b-79muhpm8gx] {
    margin-bottom: 1.6rem;
}

.page-title[b-79muhpm8gx] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    margin: 0.2rem 0 0;
    color: var(--ink, #17302a);
}

.empty-note[b-79muhpm8gx] {
    color: var(--ink-soft, #51665f);
    padding: 1.5rem 0;
}

/* --- toolbar: tabs + search --- */

.team-toolbar[b-79muhpm8gx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
    border-bottom: 1px solid var(--line);
}

.team-tabs[b-79muhpm8gx] {
    display: flex;
    gap: 0.4rem;
}

.team-tab[b-79muhpm8gx] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.6rem 0.7rem;
    cursor: pointer;
    margin-bottom: -1px;
}

.team-tab.active[b-79muhpm8gx] {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.toolbar-right[b-79muhpm8gx] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 0.5rem;
}

/* --- shared bits: avatar, YOU badge, role label --- */

.member-avatar[b-79muhpm8gx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}
html[data-theme="light"] .member-avatar[b-79muhpm8gx] {
    background: var(--accent-soft);
}
.member-avatar-lg[b-79muhpm8gx] {
    width: 3.4rem;
    height: 3.4rem;
    font-size: 1.1rem;
}

.you-badge[b-79muhpm8gx] {
    display: inline-flex;
    align-items: center;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
    border-radius: 4px;
    padding: 0.12rem 0.4rem;
    line-height: 1.3;
}

.member-role[b-79muhpm8gx] {
    font-size: 0.78rem;
    font-weight: 600;
}

.role-administrator[b-79muhpm8gx] { color: var(--accent); }
.role-editor[b-79muhpm8gx]        { color: #2f9e7a; }
.role-reviewer[b-79muhpm8gx]      { color: #c9822e; }
.role-viewer[b-79muhpm8gx]        { color: var(--ink-soft); }

/* --- grid view --- */

.team-grid[b-79muhpm8gx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.member-card[b-79muhpm8gx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 0.7rem 1.1rem 1.4rem;
}

.member-card:not(.member-card-add)[b-79muhpm8gx] {
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.member-card:not(.member-card-add):hover[b-79muhpm8gx] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

.member-card-inactive[b-79muhpm8gx] {
    opacity: 0.6;
}

.member-card-head[b-79muhpm8gx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 1.6rem;
    margin-bottom: 0.5rem;
    
}

.member-name[b-79muhpm8gx] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
    margin: 0.6rem 0 0.4rem;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

.member-org[b-79muhpm8gx] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-soft);
    margin: 0 0 0.5rem;

}

.member-email[b-79muhpm8gx] {
    font-size: 0.8rem;
    color: var(--ink-soft);
    margin: 0 0 0.35rem;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-card .member-role[b-79muhpm8gx] {
    margin: 0;
}

.member-card .reset-form[b-79muhpm8gx] {
    margin-top: 0.9rem;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}

.member-card .reset-form input[b-79muhpm8gx] {
    max-width: none;
}

/* dashed add-member card */
.member-card-add[b-79muhpm8gx] {
    justify-content: center;
    gap: 0.8rem;
    min-height: 200px;
    border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
    box-shadow: none;
    color: var(--accent);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.member-card-add:hover[b-79muhpm8gx] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.member-add-icon[b-79muhpm8gx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: var(--accent-soft);
}

.member-add-icon svg[b-79muhpm8gx] {
    width: 22px;
    height: 22px;
}

/* --- list view --- */

.team-table[b-79muhpm8gx] {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    /* No overflow:hidden — it would clip the role dropdown's open menu. */
}

.team-table th[b-79muhpm8gx] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: left;
    color: var(--ink-soft);
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--ink) 3%, var(--card));
    border-bottom: 1px solid var(--line);
}

.team-table td[b-79muhpm8gx] {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.9rem;
    vertical-align: middle;
    color: var(--ink);
}

.team-table tbody tr.row-clickable[b-79muhpm8gx] {
    cursor: pointer;
}

.team-table tbody tr:hover[b-79muhpm8gx] {
    background: var(--surface-2);
}

.cell-member[b-79muhpm8gx] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.member-name-inline[b-79muhpm8gx] {
    font-weight: 600;
}

.cell-email[b-79muhpm8gx],
.cell-phone[b-79muhpm8gx] {
    color: var(--ink-soft);
}

.team-add-row[b-79muhpm8gx] {
    display: inline-block;
    margin-top: 0.9rem;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
}

.team-add-row:hover[b-79muhpm8gx] {
    text-decoration: underline;
}

/* --- "..." action menu --- */

.member-menu[b-79muhpm8gx] {
    position: relative;
    display: inline-flex;
}

.menu-backdrop[b-79muhpm8gx] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.menu-button[b-79muhpm8gx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--ink-soft);
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 6px;
}

.menu-button svg[b-79muhpm8gx] {
    width: 16px;
    height: 16px;
}

.menu-button:hover[b-79muhpm8gx] {
    background: var(--surface-2);
    color: var(--ink);
}

.row-menu[b-79muhpm8gx] {
    position: absolute;
    right: 0;
    top: 2rem;
    z-index: 50;
    min-width: 11rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.row-menu > a[b-79muhpm8gx],
.row-menu > button[b-79muhpm8gx] {
    text-align: left;
    border: none;
    background: none;
    font-family: var(--font-ui);
    font-size: 0.86rem;
    color: var(--ink);
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
}

.row-menu > a:hover[b-79muhpm8gx],
.row-menu > button:hover[b-79muhpm8gx] {
    background: var(--surface-2);
}

.row-menu .menu-danger[b-79muhpm8gx] {
    color: var(--bad);
}

.row-menu .menu-danger:hover[b-79muhpm8gx] {
    background: color-mix(in srgb, var(--bad) 10%, transparent);
}

.row-menu-role[b-79muhpm8gx] {
    padding: 0.4rem 0.6rem 0.5rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin: 0.2rem 0;
}

.row-menu-label[b-79muhpm8gx] {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0.35rem;
}

/* --- reset password inline form --- */

.reset-row td[b-79muhpm8gx] {
    background: var(--surface-2);
}

.reset-form[b-79muhpm8gx] {
    display: flex;
    gap: 0.8rem;
    align-items: center;
}

.reset-form input[b-79muhpm8gx] {
    flex: 1;
    max-width: 22rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--card);
    color: var(--ink);
    font-size: 0.88rem;
    padding: 0.4rem 0.6rem;
}

@media (max-width: 900px) {
    .team-table th:nth-child(3)[b-79muhpm8gx],
    .team-table td:nth-child(3)[b-79muhpm8gx] {
        display: none;
    }
}
/* /Components/Pages/Admin/Team/PermissionsPanel.razor.rz.scp.css */
/* Role permissions panel — ported from the approved design mockup.
   Design tokens (--paper, --ink, --accent, --role-*, --shadow-*) live in app.css. */

.perm-root[b-do5vxws8sx]  svg { display: block; }

/* ---- panel head ---- */
.panel-head[b-do5vxws8sx] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.eyebrow[b-do5vxws8sx] {
    font: 600 11px/1 var(--font-mono);
    letter-spacing: .16em;
    color: var(--ink-soft);
    text-transform: uppercase;
}

.panel-title[b-do5vxws8sx] {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--ink-deep);
    margin-top: 7px;
}

.panel-sub[b-do5vxws8sx] {
    color: var(--ink-soft);
    font-size: 13.5px;
    margin-top: 6px;
    max-width: 52ch;
    text-wrap: pretty;
}

.head-tools[b-do5vxws8sx] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* segmented view switch */
.seg[b-do5vxws8sx] {
    display: flex;
    background: var(--surface-2);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.seg button[b-do5vxws8sx] {
    padding: 7px 13px;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: .15s;
}

.seg button[b-do5vxws8sx]  svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
}

.seg button.active[b-do5vxws8sx] {
    background: var(--card);
    color: var(--ink-deep);
    box-shadow: var(--shadow-sm);
}

.btn-save[b-do5vxws8sx] {
    height: 38px;
    padding: 0 18px;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 9px;
    box-shadow: var(--shadow-sm);
    transition: background .15s, transform .1s;
}

.btn-save:hover[b-do5vxws8sx] {
    background: var(--accent-hover);
}

.btn-save:active[b-do5vxws8sx] {
    transform: translateY(1px);
}

.btn-save[disabled][b-do5vxws8sx] {
    opacity: .65;
    cursor: default;
}

.spinner[b-do5vxws8sx] {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: perm-spin-b-do5vxws8sx .6s linear infinite;
}

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

/* ---- layout: role rail + detail ---- */
.perm-layout[b-do5vxws8sx] {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 22px;
    margin-top: 24px;
    align-items: start;
}

.role-rail[b-do5vxws8sx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rail-label[b-do5vxws8sx] {
    font: 600 10.5px/1 var(--font-mono);
    letter-spacing: .13em;
    color: var(--ink-soft);
    text-transform: uppercase;
    padding: 2px 4px 4px;
}

.role-card[b-do5vxws8sx] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: .15s;
    position: relative;
}

.role-card:hover[b-do5vxws8sx] {
    border-color: color-mix(in srgb, var(--role) 55%, var(--line));
}

.role-card.active[b-do5vxws8sx] {
    border-color: var(--role);
    box-shadow: 0 0 0 1px var(--role), var(--shadow-sm);
}

.role-dot[b-do5vxws8sx] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--role);
    flex: 0 0 9px;
}

.role-meta[b-do5vxws8sx] {
    flex: 1;
    min-width: 0;
}

.role-name[b-do5vxws8sx] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-deep);
    display: flex;
    align-items: center;
    gap: 7px;
}

.role-count[b-do5vxws8sx] {
    display: block;
    font-size: 11.5px;
    color: var(--ink-soft);
    margin-top: 2px;
}

.lock-chip[b-do5vxws8sx] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: 600 9.5px/1 var(--font-mono);
    letter-spacing: .06em;
    color: var(--role-admin);
    background: var(--accent-soft);
    padding: 3px 6px;
    border-radius: 5px;
}

.lock-chip[b-do5vxws8sx]  svg {
    width: 10px;
    height: 10px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* ---- detail card ---- */
.detail[b-do5vxws8sx] {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.detail-head[b-do5vxws8sx] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}

.role-badge[b-do5vxws8sx] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--role) 14%, transparent);
    color: var(--role);
    flex: 0 0 40px;
}

.role-badge[b-do5vxws8sx]  svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
}

.detail-head h3[b-do5vxws8sx] {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink-deep);
    display: flex;
    align-items: center;
    gap: 9px;
}

.detail-head p[b-do5vxws8sx] {
    font-size: 12.5px;
    color: var(--ink-soft);
    margin-top: 2px;
}

.detail-head .grow[b-do5vxws8sx] {
    flex: 1;
}

.bulk[b-do5vxws8sx] {
    display: flex;
    gap: 6px;
}

.bulk button[b-do5vxws8sx] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-soft);
    background: none;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--line);
    cursor: pointer;
    transition: .15s;
}

.bulk button:hover[b-do5vxws8sx] {
    color: var(--ink-deep);
    border-color: var(--ink-soft);
}

/* locked (Administrator) banner */
.locked-note[b-do5vxws8sx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    background: var(--accent-soft);
    color: var(--role-admin);
    font-size: 13px;
    font-weight: 500;
}

.locked-note[b-do5vxws8sx]  svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    flex: 0 0 16px;
}

/* column legend */
.legend[b-do5vxws8sx] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    padding: 11px 22px;
    border-bottom: 1px solid var(--line);
}

.legend .cols[b-do5vxws8sx] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.legend span[b-do5vxws8sx] {
    font: 600 10px/1 var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.legend .cols span[b-do5vxws8sx] {
    width: 64px;
    text-align: center;
}

/* permission rows */
.rows[b-do5vxws8sx] {
    padding: 8px;
}

.prow[b-do5vxws8sx] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 14px;
    border-radius: 10px;
    transition: background .15s, opacity .2s;
}

.prow:hover[b-do5vxws8sx] {
    background: var(--surface-2);
}

.prow.off .pills[b-do5vxws8sx] {
    opacity: .45;
}

.prow .lead[b-do5vxws8sx] {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    overflow: hidden;
}

.prow-ico[b-do5vxws8sx] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--ink-soft);
    display: grid;
    place-items: center;
    flex: 0 0 34px;
}

.prow-ico[b-do5vxws8sx]  svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
}

.prow-name[b-do5vxws8sx] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-deep);
}

.prow-desc[b-do5vxws8sx] {
    display: block;
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 1px;
}

.controls[b-do5vxws8sx] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* access switch (master = View) */
.access[b-do5vxws8sx] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 88px;
    justify-content: center;
}

.switch[b-do5vxws8sx] {
    --w: 42px;
    width: var(--w);
    height: 24px;
    border: none;
    padding: 0;
    border-radius: 999px;
    background: var(--line);
    position: relative;
    cursor: pointer;
    transition: background .2s;
    flex: 0 0 var(--w);
}

.switch[b-do5vxws8sx]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .2s cubic-bezier(.4, .9, .4, 1.1);
}

.switch[aria-checked="true"][b-do5vxws8sx] {
    background: var(--accent);
}

.switch[aria-checked="true"][b-do5vxws8sx]::after {
    transform: translateX(18px);
}

.access-cap[b-do5vxws8sx] {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-soft);
}

/* action pills */
.pills[b-do5vxws8sx] {
    display: flex;
    gap: 8px;
    transition: opacity .2s;
}

.pill[b-do5vxws8sx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 64px;
    height: 32px;
    border-radius: 7px;
    border: 1px solid var(--line);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--card);
    cursor: pointer;
    transition: .15s;
}

.pill[b-do5vxws8sx]  .chk {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 0;
    opacity: 0;
    transition: .15s;
}

.pill[aria-pressed="true"][b-do5vxws8sx] {
    background: var(--accent-soft);
    border-color: transparent;
    color: var(--accent);
}

.pill[aria-pressed="true"][b-do5vxws8sx]  .chk {
    opacity: 1;
    stroke-width: 2.4;
}

.pill:not([disabled]):hover[b-do5vxws8sx] {
    border-color: var(--ink-soft);
}

.pill[aria-pressed="true"]:not([disabled]):hover[b-do5vxws8sx] {
    border-color: var(--accent);
}

.pill[disabled][b-do5vxws8sx] {
    opacity: .4;
    cursor: not-allowed;
}

.locked-rows .prow[b-do5vxws8sx] {
    opacity: .9;
}

.locked-rows .switch[b-do5vxws8sx],
.locked-rows .pill[b-do5vxws8sx] {
    pointer-events: none;
}

/* ---- compact matrix view ---- */
.matrix[b-do5vxws8sx] {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    box-shadow: var(--shadow-md);
    margin-top: 24px;
    overflow: hidden;
}

.mx-scroll[b-do5vxws8sx] {
    overflow-x: auto;
}

.mx[b-do5vxws8sx] {
    border-collapse: collapse;
    width: 100%;
    min-width: 640px;
}

.mx th[b-do5vxws8sx],
.mx td[b-do5vxws8sx] {
    padding: 0;
    text-align: center;
}

.mx thead th[b-do5vxws8sx] {
    padding: 14px 8px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: bottom;
}

.mx thead th.rolecol[b-do5vxws8sx] {
    border-left: 1px solid var(--line);
}

.mx .role-h[b-do5vxws8sx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.mx .role-h .dot[b-do5vxws8sx] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--role);
}

.mx .role-h b[b-do5vxws8sx] {
    font-size: 12.5px;
    color: var(--ink-deep);
    font-weight: 600;
}

.mx .role-h small[b-do5vxws8sx] {
    font: 600 9px/1 var(--font-mono);
    letter-spacing: .08em;
    color: var(--ink-soft);
    text-transform: uppercase;
}

.mx .pagecol[b-do5vxws8sx] {
    text-align: left;
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-deep);
    white-space: nowrap;
    position: sticky;
    left: 0;
    background: var(--card);
}

.mx tbody tr[b-do5vxws8sx] {
    border-top: 1px solid var(--line);
}

.mx tbody tr:hover td[b-do5vxws8sx] {
    background: var(--surface-2);
}

.mx tbody tr:hover .pagecol[b-do5vxws8sx] {
    background: var(--surface-2);
}

.mx td.cell[b-do5vxws8sx] {
    border-left: 1px solid var(--line);
    padding: 10px 8px;
}

.mx-acts[b-do5vxws8sx] {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.mx-b[b-do5vxws8sx] {
    width: 30px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--card);
    font: 700 10px/1 var(--font-mono);
    color: var(--ink-soft);
    cursor: pointer;
    transition: .13s;
}

.mx-b[aria-pressed="true"][b-do5vxws8sx] {
    background: var(--accent-soft);
    border-color: transparent;
    color: var(--accent);
}

.mx-b[data-locked="true"][b-do5vxws8sx] {
    background: color-mix(in srgb, var(--role-admin) 12%, transparent);
    border-color: transparent;
    color: var(--role-admin);
    pointer-events: none;
}

.mx-b:not([disabled]):hover[b-do5vxws8sx] {
    border-color: var(--ink-soft);
}

.mx-b[disabled][b-do5vxws8sx] {
    opacity: .35;
    cursor: not-allowed;
}

.mx-legend[b-do5vxws8sx] {
    padding: 11px 16px;
    border-top: 1px solid var(--line);
    font-size: 11.5px;
    color: var(--ink-soft);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.mx-legend b[b-do5vxws8sx] {
    color: var(--ink-deep);
    font-weight: 600;
}

/* ---- responsive ---- */
@media (max-width: 1080px) {
    .perm-layout[b-do5vxws8sx] {
        grid-template-columns: 1fr;
    }

    .role-rail[b-do5vxws8sx] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .role-rail .rail-label[b-do5vxws8sx] {
        width: 100%;
    }

    .role-card[b-do5vxws8sx] {
        flex: 1 1 44%;
        min-width: 180px;
    }
}

@media (max-width: 680px) {
    .head-tools[b-do5vxws8sx] {
        width: 100%;
        justify-content: space-between;
    }

    .legend[b-do5vxws8sx] {
        display: none;
    }

    .prow[b-do5vxws8sx] {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .controls[b-do5vxws8sx] {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 14px;
    }

    .access[b-do5vxws8sx] {
        width: auto;
        justify-content: flex-start;
    }

    .pill[b-do5vxws8sx] {
        flex: 1;
        min-width: 0;
    }

    .pills[b-do5vxws8sx] {
        flex: 1;
    }
}

@media (min-width: 681px) {
    .access-cap[b-do5vxws8sx] {
        display: none;
    }
}
/* /Components/Pages/Admin/Team/TeamMemberDetail.razor.rz.scp.css */
.empty-note[b-uaftf36kyn] {
    color: var(--ink-soft);
    padding: 1.5rem 0;
}

/* --- client groups management tab --- */

.groups-card[b-uaftf36kyn] {
    max-width: 52rem;
}

.groups-intro[b-uaftf36kyn] {
    margin: 0 0 1rem;
    font-size: 0.88rem;
    color: var(--ink-soft);
}

.group-create[b-uaftf36kyn] {
    display: flex;
    gap: 0.6rem;
}

/* ::deep — InputText renders the <input>, so it carries no scope attribute. */
.group-create[b-uaftf36kyn]  .field-input {
    flex: 1;
    margin: 0;
}

[b-uaftf36kyn] .group-form {
    margin-bottom: 1.2rem;
}

[b-uaftf36kyn] .group-form .validation-message {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
}

[b-uaftf36kyn] .group-create-button {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--on-dark);
    background: var(--accent);
    border: none;
    border-radius: 8px;
    padding: 0.55rem 1.1rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

[b-uaftf36kyn] .group-create-button:hover {
    background: var(--accent-hover);
}

.groups-table[b-uaftf36kyn] {
    width: 100%;
    border-collapse: collapse;
}

.groups-table th[b-uaftf36kyn] {
    font-size: 0.72rem;
    font-weight: 600;
    text-align: left;
    color: var(--ink-soft);
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid var(--line);
}

.groups-table td[b-uaftf36kyn] {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.88rem;
    color: var(--ink);
    vertical-align: middle;
}

.groups-table tbody tr:last-child td[b-uaftf36kyn] {
    border-bottom: none;
}

.owned-row .cell-group-name[b-uaftf36kyn] {
    font-weight: 600;
}

.cell-group-name[b-uaftf36kyn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* The rename form is the flex row itself, so it lays out like the read-only cell. */
[b-uaftf36kyn] .rename-form {
    display: flex;
    flex: 1;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

[b-uaftf36kyn] .rename-form .rename-input {
    flex: 1;
    margin: 0;
    padding: 0.35rem 0.5rem;
}

/* Full-width basis drops the message onto its own line under the row. */
[b-uaftf36kyn] .rename-form .validation-message {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.8rem;
}

.cell-owner[b-uaftf36kyn] {
    width: 220px;
}

.cell-count[b-uaftf36kyn] {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink-soft);
    text-align: center;
}

.detail-head[b-uaftf36kyn] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.4rem;
}

.detail-back[b-uaftf36kyn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--card);
    text-decoration: none;
    flex-shrink: 0;
}

.detail-back:hover[b-uaftf36kyn] {
    background: var(--surface-2);
}

.detail-titles[b-uaftf36kyn] {
    min-width: 0;
}

.detail-name[b-uaftf36kyn] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0;
    color: var(--ink);
}

.detail-email[b-uaftf36kyn] {
    font-size: 0.85rem;
    color: var(--copper, var(--accent));
    margin: 0.1rem 0 0;
}

.detail-tabs[b-uaftf36kyn] {
    display: flex;
    gap: 1.4rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1.6rem;
}

.detail-tab[b-uaftf36kyn] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.4rem 0.2rem 0.7rem;
    margin-bottom: -1px;
    cursor: pointer;
}

.detail-tab.active[b-uaftf36kyn] {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
/* TeamMemberDetail.razor.css */
.group-name-input[b-uaftf36kyn] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.92rem;
    padding: 0.7rem 0.8rem;
}
.detail-card[b-uaftf36kyn] {
    max-width: 32rem;
    margin: 0 auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    padding: 2rem 2rem 2.2rem;
}

.detail-empty[b-uaftf36kyn] {
    text-align: center;
    color: var(--ink-soft);
}

/* --- requests tab --- */

.member-requests[b-uaftf36kyn] {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.member-requests th[b-uaftf36kyn] {
    font-size: 0.72rem;
    font-weight: 600;
    text-align: left;
    color: var(--ink-soft);
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--ink) 3%, var(--card));
    border-bottom: 1px solid var(--line);
}

.member-requests td[b-uaftf36kyn] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.9rem;
    color: var(--ink);
    vertical-align: middle;
}

.member-requests tbody tr:last-child td[b-uaftf36kyn] {
    border-bottom: none;
}

.member-requests tbody tr.row-clickable[b-uaftf36kyn] {
    cursor: pointer;
}

.member-requests tbody tr:hover[b-uaftf36kyn] {
    background: var(--surface-2);
}

.member-requests .cell-title[b-uaftf36kyn] {
    font-weight: 600;
}

.member-requests .cell-due[b-uaftf36kyn] {
    color: var(--ink-soft);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.req-status[b-uaftf36kyn] {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
}

.detail-avatar[b-uaftf36kyn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 auto 1.6rem;
}

.field-label[b-uaftf36kyn] {
    display: block;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--ink);
    margin: 1rem 0 0.4rem;
}

.field-label:first-of-type[b-uaftf36kyn] {
    margin-top: 0;
}

.field-input[b-uaftf36kyn] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.92rem;
    padding: 0.7rem 0.8rem;
}

.field-input[readonly][b-uaftf36kyn] {
    color: var(--ink-soft);
    cursor: default;
}

.detail-note[b-uaftf36kyn] {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    margin-top: 1.4rem;
    padding: 0.9rem 1rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--ink);
}

.detail-note-icon[b-uaftf36kyn] {
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.detail-note p[b-uaftf36kyn] {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Landing page — "vault" composition (design 7a).
   Colours come from the --lv-* tokens in app.css: dark resolves to the
   design's literal values, light to the paper equivalent. */

/* ---------- hero ---------- */

.hero[b-99uheb9vne] {
    position: relative;
    text-align: center;
    padding: 56px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-badge[b-99uheb9vne] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--lv-violet-line);
    background: var(--lv-violet-soft);
    font: 600 10.5px "JetBrains Mono", monospace;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lv-violet-text);
    margin-bottom: 26px;
}

.badge-dot[b-99uheb9vne] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lv-teal);
}

.hero-title[b-99uheb9vne] {
    font: 700 62px/1.0 "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg);
    margin: 0 0 22px;
    letter-spacing: -0.035em;
    max-width: 820px;
}

.hero-grad[b-99uheb9vne] {
    background: linear-gradient(110deg, var(--lv-grad-a), var(--lv-grad-b));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-text[b-99uheb9vne] {
    font: 400 17px/1.6 "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg-55);
    margin: 0 0 30px;
    max-width: 560px;
}

.hero-cta[b-99uheb9vne] {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}

.btn-primary[b-99uheb9vne],
.btn-ghost[b-99uheb9vne] {
    height: 50px;
    padding: 0 24px;
    border-radius: 10px;
    font: 600 14.5px "Schibsted Grotesk", var(--font-ui);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.btn-primary[b-99uheb9vne] {
    gap: 9px;
    background: linear-gradient(180deg, var(--lv-violet-2), var(--lv-violet));
    color: #fff;
    box-shadow: 0 14px 34px -8px rgba(109, 92, 245, 0.75);
}

.btn-primary:hover[b-99uheb9vne] {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -8px rgba(109, 92, 245, 0.85);
}

.btn-ghost[b-99uheb9vne] {
    border: 1px solid var(--lv-line-strong);
    background: var(--lv-surface);
    color: var(--lv-fg);
}

.btn-ghost:hover[b-99uheb9vne] {
    color: var(--lv-fg);
    border-color: var(--lv-line-hover);
    transform: translateY(-2px);
}

.hero-proof[b-99uheb9vne] {
    font: 400 12.5px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg-40);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.proof-dot[b-99uheb9vne] {
    color: var(--lv-teal);
}

/* ---------- product preview ---------- */

.preview[b-99uheb9vne] {
    position: relative;
    margin: 44px 0 0;
}

.preview-frame[b-99uheb9vne] {
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    background: var(--lv-chrome-fill);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--lv-hairline);
    border-bottom: none;
}

.preview-fade[b-99uheb9vne] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 130px;
    background: linear-gradient(180deg, transparent 0%, var(--lv-bg) 90%);
    pointer-events: none;
}

.preview-chrome[b-99uheb9vne] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--lv-surface);
    border-bottom: 1px solid var(--lv-line-mid);
}

.chrome-dot[b-99uheb9vne] {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.chrome-dot--r[b-99uheb9vne] { background: #ff5f57; }
.chrome-dot--y[b-99uheb9vne] { background: #febc2e; }
.chrome-dot--g[b-99uheb9vne] { background: #28c840; }

.chrome-url[b-99uheb9vne] {
    margin: 0 auto;
    width: 320px;
    height: 24px;
    border-radius: 7px;
    background: var(--lv-surface-3);
    border: 1px solid var(--lv-line);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: 400 10px "JetBrains Mono", monospace;
    color: var(--lv-fg-40);
}

.preview-body[b-99uheb9vne] {
    padding: 22px 24px;
}

.pv-top[b-99uheb9vne] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.pv-logo[b-99uheb9vne] {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: linear-gradient(135deg, #5eead4, #6d5cf5);
}

.pv-brand[b-99uheb9vne] {
    font: 700 13px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg);
}

.pv-nav[b-99uheb9vne] {
    margin-left: 6px;
    font: 500 11px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-teal);
}

.pv-top-right[b-99uheb9vne] {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.pv-search[b-99uheb9vne] {
    width: 220px;
    height: 30px;
    border-radius: 8px;
    background: var(--lv-surface-3);
    border: 1px solid var(--lv-line);
    display: flex;
    align-items: center;
    padding: 0 10px;
    font: 400 10.5px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg-35);
}

.pv-add[b-99uheb9vne] {
    height: 30px;
    padding: 0 13px;
    border-radius: 8px;
    background: var(--lv-violet);
    color: #fff;
    font: 600 11px "Schibsted Grotesk", var(--font-ui);
    display: flex;
    align-items: center;
}

.pv-tiles[b-99uheb9vne] {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.4fr;
    gap: 12px;
}

.pv-tile[b-99uheb9vne] {
    background: var(--lv-surface-2);
    border: 1px solid var(--lv-line);
    border-radius: 11px;
    padding: 14px;
}

.pv-tile--chart[b-99uheb9vne] {
    display: flex;
    flex-direction: column;
}

.pv-tile-l[b-99uheb9vne] {
    font: 400 10px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg-40);
}

.pv-tile--chart .pv-tile-l[b-99uheb9vne] {
    margin-bottom: 10px;
}

.pv-tile-n[b-99uheb9vne] {
    font: 700 26px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg);
    margin-top: 5px;
}

.pv-tile-t[b-99uheb9vne] {
    font: 500 10px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg-35);
}

.pv-tile-t--up[b-99uheb9vne] {
    color: var(--lv-teal);
}

.pv-bars[b-99uheb9vne] {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    min-height: 44px;
}

.pv-bars > div[b-99uheb9vne] {
    flex: 1;
    background: var(--lv-bar);
    border-radius: 4px;
}

.pv-bar--on[b-99uheb9vne] {
    background: linear-gradient(var(--lv-violet-strong), var(--lv-violet)) !important;
}

.pv-list[b-99uheb9vne] {
    margin-top: 14px;
    background: var(--lv-surface);
    border: 1px solid var(--lv-line-mid);
    border-radius: 11px;
    overflow: hidden;
}

.pv-row[b-99uheb9vne] {
    display: grid;
    grid-template-columns: 170px 1fr 128px 62px 54px;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--lv-line-soft);
}

.pv-row--head[b-99uheb9vne] {
    padding: 11px 18px;
    border-bottom: 1px solid var(--lv-line-mid);
    font: 600 9.5px "JetBrains Mono", monospace;
    letter-spacing: 0.1em;
    color: var(--lv-fg-40);
}

.pv-row--last[b-99uheb9vne] {
    border-bottom: none;
}

.pv-row .c[b-99uheb9vne] { display: flex; justify-content: center; }
.pv-row--head .c[b-99uheb9vne] { display: block; text-align: center; }
.pv-row .r[b-99uheb9vne] { text-align: right; }

.pv-client[b-99uheb9vne] {
    font: 700 12px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg);
}

.pv-req[b-99uheb9vne] {
    font: 500 12px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg-60);
}

.pv-pill[b-99uheb9vne] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font: 600 10.5px "Schibsted Grotesk", var(--font-ui);
}

.pv-pill-dot[b-99uheb9vne] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.pv-pill--review[b-99uheb9vne] { color: var(--lv-violet-text); background: var(--lv-violet-soft); }
.pv-pill--wait[b-99uheb9vne]   { color: var(--lv-amber); background: var(--lv-amber-soft); }
.pv-pill--done[b-99uheb9vne]   { color: var(--lv-teal); background: var(--lv-teal-soft); }

.pv-ring[b-99uheb9vne] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: conic-gradient(var(--lv-violet-strong) var(--p), var(--lv-line-strong) 0);
    -webkit-mask: radial-gradient(circle, transparent 7px, #000 7.5px);
    mask: radial-gradient(circle, transparent 7px, #000 7.5px);
}

.pv-ring--done[b-99uheb9vne] {
    background: conic-gradient(var(--lv-teal) var(--p), var(--lv-line-strong) 0);
}

.pv-due[b-99uheb9vne] {
    font: 500 11px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg-50);
}

.pv-due--done[b-99uheb9vne] {
    color: var(--lv-fg-40);
}

/* ---------- proof pills ---------- */

.proof-pills[b-99uheb9vne] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 8px 0;
}

.proof-pill[b-99uheb9vne] {
    font: 500 12px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg-55);
    border: 1px solid var(--lv-line-10);
    border-radius: 999px;
    padding: 8px 16px;
}

.proof-pill b[b-99uheb9vne] {
    color: var(--lv-violet-strong);
    font-weight: 700;
}

/* ---------- shared eyebrow ---------- */

.eyebrow[b-99uheb9vne] {
    font: 600 10.5px "JetBrains Mono", monospace;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lv-violet-eyebrow);
}

.eyebrow--center[b-99uheb9vne] {
    display: block;
    text-align: center;
}

/* ---------- step timeline ---------- */

.steps[b-99uheb9vne] {
    position: relative;
    padding: 56px 0 20px;
}

.steps-grid[b-99uheb9vne] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 34px;
}

.steps-line[b-99uheb9vne] {
    position: absolute;
    top: 19px;
    left: 16%;
    right: 16%;
    height: 1px;
    background: linear-gradient(90deg, var(--lv-violet-line-2), var(--lv-violet-line));
}

.step[b-99uheb9vne] {
    position: relative;
    text-align: center;
    padding: 0 24px;
}

.step-no[b-99uheb9vne] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--lv-bg);
    border: 1px solid var(--lv-violet-line-2);
    color: var(--lv-violet-text);
    font: 600 13px "JetBrains Mono", monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.step-h[b-99uheb9vne] {
    font: 700 19px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg);
    margin-bottom: 8px;
}

.step-p[b-99uheb9vne] {
    font: 400 13px/1.55 "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg-50);
}

/* ---------- bento features ---------- */

.bento[b-99uheb9vne] {
    position: relative;
    padding: 52px 0 20px;
}

.bento-title[b-99uheb9vne] {
    font: 700 34px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg);
    margin: 14px 0 28px;
    letter-spacing: -0.02em;
}

.bento-grid[b-99uheb9vne] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(150px, auto);
    gap: 16px;
}

.bento-card[b-99uheb9vne] {
    background: var(--lv-surface);
    border: 1px solid var(--lv-line);
    border-radius: 16px;
    padding: 24px;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.bento-card:hover[b-99uheb9vne] {
    border-color: var(--lv-violet-line);
    transform: translateY(-2px);
}

.bento-card--big[b-99uheb9vne] {
    grid-column: span 2;
    grid-row: span 2;
    background: linear-gradient(160deg, var(--lv-tint), var(--lv-surface));
    border: 1px solid var(--lv-violet-line);
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bento-icon[b-99uheb9vne] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--lv-violet-icon-bg);
    border: 1px solid var(--lv-violet-icon-line);
    color: var(--lv-violet-icon-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.bento-icon--big[b-99uheb9vne] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    margin-bottom: 18px;
}

.bento-h[b-99uheb9vne] {
    font: 700 15px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg);
    margin-bottom: 6px;
}

.bento-h--big[b-99uheb9vne] {
    font-size: 20px;
    margin-bottom: 9px;
}

.bento-p[b-99uheb9vne] {
    font: 400 12.5px/1.5 "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg-50);
}

.bento-p--big[b-99uheb9vne] {
    font: 400 14px/1.6 "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg-55);
    max-width: 360px;
}

.bento-meter[b-99uheb9vne] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
}

.bento-meter span[b-99uheb9vne] {
    flex: 1;
    height: 8px;
    border-radius: 5px;
    background: var(--lv-bar);
}

.bento-meter-on[b-99uheb9vne] {
    background: linear-gradient(90deg, var(--lv-violet-strong), var(--lv-violet)) !important;
}

.bento-meter em[b-99uheb9vne] {
    font: 500 10px "JetBrains Mono", monospace;
    font-style: normal;
    color: var(--lv-fg-40);
    white-space: nowrap;
}

/* ---------- CTA ---------- */

.cta-strip[b-99uheb9vne] {
    position: relative;
    margin: 60px 0 8px;
    border-radius: 14px;
    border: 1px solid var(--lv-line-mid);
    background: linear-gradient(120deg, var(--lv-surface), var(--lv-tint-2));
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.cta-h[b-99uheb9vne] {
    font: 700 19px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.cta-p[b-99uheb9vne] {
    font: 400 13.5px "Schibsted Grotesk", var(--font-ui);
    color: var(--lv-fg-50);
}

.cta-button[b-99uheb9vne] {
    display: inline-flex;
    height: 46px;
    padding: 0 22px;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--lv-violet-2), var(--lv-violet));
    color: #fff;
    font: 600 13.5px "Schibsted Grotesk", var(--font-ui);
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    box-shadow: 0 10px 26px -8px rgba(109, 92, 245, 0.55);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cta-button:hover[b-99uheb9vne] {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -8px rgba(109, 92, 245, 0.7);
}

/* ---------- responsive ----------
   The design is a fixed-width canvas; below that the same blocks
   reflow rather than scale. */

@media (max-width: 1000px) {
    .hero-title[b-99uheb9vne] { font-size: 48px; }
    .bento-grid[b-99uheb9vne] { grid-template-columns: repeat(2, 1fr); }
    .bento-card--big[b-99uheb9vne] { grid-column: span 2; grid-row: span 1; }
    .pv-row[b-99uheb9vne] { grid-template-columns: 130px 1fr 120px 50px 44px; }
}

@media (max-width: 720px) {
    .hero[b-99uheb9vne] { padding-top: 36px; }
    .hero-title[b-99uheb9vne] { font-size: 36px; }
    .hero-text[b-99uheb9vne] { font-size: 15px; }
    .hero-cta[b-99uheb9vne] { flex-direction: column; align-self: stretch; }
    .btn-primary[b-99uheb9vne], .btn-ghost[b-99uheb9vne] { justify-content: center; }
    .preview[b-99uheb9vne] { display: none; }
    .steps-grid[b-99uheb9vne] { grid-template-columns: 1fr; gap: 32px; }
    .steps-line[b-99uheb9vne] { display: none; }
    .bento-grid[b-99uheb9vne] { grid-template-columns: 1fr; }
    .bento-card--big[b-99uheb9vne] { grid-column: span 1; }
    .bento-title[b-99uheb9vne] { font-size: 26px; }
    .cta-strip[b-99uheb9vne] { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary:hover[b-99uheb9vne],
    .btn-ghost:hover[b-99uheb9vne],
    .bento-card:hover[b-99uheb9vne],
    .cta-button:hover[b-99uheb9vne] { transform: none; }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.notfound-state[b-iyab3ui3do] {
    margin: 14vh auto 0;
    max-width: 30rem;
    text-align: center;
    animation: rise-in-b-iyab3ui3do 0.5s ease-out;
}

.mono-note[b-iyab3ui3do] {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--copper, #b5622e);
}

.notfound-title[b-iyab3ui3do] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.8rem;
    margin: 0.6rem 0 0.75rem;
    color: var(--ink, #17302a);
}

.notfound-text[b-iyab3ui3do] {
    color: var(--ink-soft, #51665f);
    line-height: 1.6;
}

.notfound-home[b-iyab3ui3do] {
    display: inline-block;
    margin-top: 1.2rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--copper, #b5622e);
    border: 1px solid currentColor;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.notfound-home:hover[b-iyab3ui3do] {
    background: var(--copper, #b5622e);
    color: var(--on-dark);
}

@keyframes rise-in-b-iyab3ui3do {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}
/* /Components/Pages/Portal/IntakePortal.razor.rz.scp.css */
.mono-note[b-j36u8uqlak] {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--copper, #b5622e);
}

/* --- sectioned body with sidebar nav --- */

.portal-body[b-j36u8uqlak] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 3rem;
    align-items: start;
}

/* No sections on this request: the nav <aside> isn't rendered, so without
   this the lone .portal-fields child would sit in the narrow first grid
   track (260px) and leave the whole second column empty. */
.portal-body.single-col[b-j36u8uqlak] {
    grid-template-columns: 1fr;
}

.section-nav[b-j36u8uqlak] {
    position: sticky;
    top: 5.5rem;
}

.nav-heading[b-j36u8uqlak] {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft, #51665f);
    margin: 0 0 0.6rem;
}

.nav-list[b-j36u8uqlak] {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: nav;
}

.nav-item[b-j36u8uqlak] {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    text-decoration: none;
    padding: 0.4rem 0.5rem;
    border: none;
    border-left: 2px solid var(--line, #d9cfba);
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--ink, #17302a);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.nav-item:hover[b-j36u8uqlak] {
    background: rgba(23, 48, 42, 0.04);
    border-left-color: var(--ink, #17302a);
}

.nav-title[b-j36u8uqlak] {
    font-size: 0.85rem;
    line-height: 1.3;
}

.nav-count[b-j36u8uqlak] {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-soft, #51665f);
    white-space: nowrap;
}

.nav-count.done[b-j36u8uqlak] {
    color: var(--good, #2e6e4e);
}

.portal-fields[b-j36u8uqlak] {
    min-width: 0;
}

.portal-section[b-j36u8uqlak] {
    margin-bottom: 2rem;
    scroll-margin-top: 5.5rem;
}

/* Sanitised HTML blurb under a section/subsection heading. */
.portal-section-blurb[b-j36u8uqlak] {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ink-soft, #51665f);
    margin: 0 0 1.1rem;
}

.portal-section-blurb > :first-child[b-j36u8uqlak] {
    margin-top: 0;
}

.portal-section-blurb > :last-child[b-j36u8uqlak] {
    margin-bottom: 0;
}

.portal-section-blurb p[b-j36u8uqlak] {
    margin: 0 0 0.55rem;
}

.portal-section-blurb h3[b-j36u8uqlak] {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ink, #17302a);
    margin: 0.9rem 0 0.4rem;
}

.portal-section-blurb ul[b-j36u8uqlak],
.portal-section-blurb ol[b-j36u8uqlak] {
    margin: 0 0 0.55rem;
    padding-left: 1.25rem;
}

.portal-section-blurb li[b-j36u8uqlak] {
    margin-bottom: 0.25rem;
}

.portal-section-title[b-j36u8uqlak] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--ink, #17302a);
    margin: 0 0 0.3rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--ink, #17302a);
}

.portal-subsection-title[b-j36u8uqlak] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--copper, #b5622e);
    margin: 1.4rem 0 0.2rem;
}

@media (max-width: 768px) {
    .portal-body[b-j36u8uqlak] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .section-nav[b-j36u8uqlak] {
        position: static;
        margin-bottom: 1rem;
    }
}

/* --- invalid / loading states --- */

.portal-state[b-j36u8uqlak] {
    margin: 14vh auto 0;
    max-width: 30rem;
    text-align: center;
    animation: rise-in-b-j36u8uqlak 0.5s ease-out;
}

.state-title[b-j36u8uqlak] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.8rem;
    margin-bottom: 0.75rem;
    color: var(--ink, #17302a);
}

.state-text[b-j36u8uqlak] {
    color: var(--ink-soft, #51665f);
    line-height: 1.6;
}

/* --- request header --- */

.request-head[b-j36u8uqlak] {
    padding: 2.2rem 0 1rem;
    animation: rise-in-b-j36u8uqlak 0.5s ease-out;
}

.request-title[b-j36u8uqlak] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.15;
    margin: 0.4rem 0 0.5rem;
    color: var(--ink, #17302a);
}

.request-due[b-j36u8uqlak] {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--ink-soft, #51665f);
}

/* --- progress --- */

.progress-block[b-j36u8uqlak] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: linear-gradient(var(--paper, #f6f1e7) 82%, transparent);
    padding: 0.9rem 0 1rem;
    animation: rise-in-b-j36u8uqlak 0.5s ease-out 0.08s backwards;
}

.progress-labels[b-j36u8uqlak] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.4rem;
}

.progress-pct[b-j36u8uqlak] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink, #17302a);
}

.progress-track[b-j36u8uqlak] {
    height: 4px;
    background: var(--line, #d9cfba);
    border-radius: 6px;
    overflow: hidden;
}

.progress-fill[b-j36u8uqlak] {
    height: 100%;
    background: linear-gradient(90deg, var(--good, #2e6e4e), var(--copper, #b5622e));
    border-radius: 6px;
    transition: width 0.45s cubic-bezier(0.3, 0.9, 0.3, 1);
}

.progress-hint[b-j36u8uqlak] {
    margin: 0.45rem 0 0;
    font-size: 0.8rem;
    color: var(--ink-soft, #51665f);
}

/* --- submitted banner --- */

.submitted-banner[b-j36u8uqlak] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border: 1px solid var(--good, #2e6e4e);
    border-radius: 8px;
    background: rgba(46, 110, 78, 0.06);
    padding: 1rem 1.2rem;
    margin: 1rem 0 0.5rem;
    animation: rise-in-b-j36u8uqlak 0.5s ease-out;
}

.banner-stamp[b-j36u8uqlak] {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--good, #2e6e4e);
    border: 1.5px solid currentColor;
    border-radius: 6px;
    padding: 0.25rem 0.55rem;
    transform: rotate(-3deg);
    white-space: nowrap;
    margin-top: 0.1rem;
}

.submitted-banner p[b-j36u8uqlak] {
    margin: 0;
    color: var(--ink, #17302a);
    line-height: 1.55;
}

/* --- fields + submit --- */

.field-list[b-j36u8uqlak] {
    border-top: 1px solid var(--line, #d9cfba);
    margin-top: 0.5rem;
}

.submit-block[b-j36u8uqlak] {
    padding: 2rem 0 1rem;
    text-align: center;
}

.submit-button[b-j36u8uqlak] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--on-dark);
    background: var(--accent);
    border: none;
    border-radius: 8px;
    padding: 0.85rem 2.6rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.submit-button:hover:not(:disabled)[b-j36u8uqlak] {
    background: #0f231f;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(23, 48, 42, 0.25);
}

.submit-button:disabled[b-j36u8uqlak] {
    opacity: 0.4;
    cursor: not-allowed;
}

.submit-hint[b-j36u8uqlak] {
    margin-top: 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--ink-soft, #51665f);
}

.submit-error[b-j36u8uqlak] {
    color: var(--bad, #a23b2e);
    font-size: 0.88rem;
    margin-bottom: 0.8rem;
}

@keyframes rise-in-b-j36u8uqlak {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 768px) {
    .request-head[b-j36u8uqlak] {
        padding-top: 1.2rem;
    }

    .submit-button[b-j36u8uqlak] {
        width: 100%;
    }
}

/* subsection nav + completion ticks */
.nav-sublist[b-j36u8uqlak] {
    list-style: none;
    margin: 0.1rem 0 0.3rem 0.6rem;
    padding-left: 0.4rem;
}
.nav-subitem[b-j36u8uqlak] {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    text-decoration: none;
    padding: 0.35rem 0.5rem;
    border: none;
    border-left: 2px solid var(--line, #d9cfba);
    background: none;
    cursor: pointer;
    color: var(--ink-soft, #51665f);
}
.nav-subitem:hover[b-j36u8uqlak] {
    background: rgba(23, 48, 42, 0.04);
    border-left-color: var(--ink, #17302a);
}
.nav-subitem .nav-title[b-j36u8uqlak] { font-size: 0.8rem; }

.nav-tick[b-j36u8uqlak] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: var(--good, #2e6e4e);
    color: #fff;
    flex: none;
}
.nav-tick svg[b-j36u8uqlak] { width: 11px; height: 11px; }

.portal-subsection-title[b-j36u8uqlak] { scroll-margin-top: 5.5rem; }

/* post-submit confirmation (replaces the old RECEIVED pill banner) */
.confirm-card[b-j36u8uqlak] {
    text-align: center;
    background: var(--card, #fff);
    border: 1px solid var(--line, #e4e7eb);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    padding: 2.5rem 1.75rem;
    margin-bottom: 2rem;
}
.confirm-check[b-j36u8uqlak] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--good, #2e6e4e) 15%, transparent);
    color: var(--good, #2e6e4e);
    margin-bottom: 1rem;
}
.confirm-check svg[b-j36u8uqlak] { width: 26px; height: 26px; }
.confirm-title[b-j36u8uqlak] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink-deep, #16181d);
    margin: 0 0 0.5rem;
}
.confirm-text[b-j36u8uqlak] {
    color: var(--ink, #16181d);
    line-height: 1.65;
    max-width: 34rem;
    margin: 0 auto 0.6rem;
}
.confirm-sub[b-j36u8uqlak] {
    font-size: 0.85rem;
    color: var(--ink-soft, #626b76);
    margin: 0;
}

/* Submitted, but staff sent items back — this is a to-do, not a receipt. */
.confirm-card.needs-work[b-j36u8uqlak] {
    border-left: 3px solid var(--copper, #b5622e);
    text-align: left;
    padding: 1.75rem;
}
.confirm-card.needs-work .confirm-text[b-j36u8uqlak] { margin-left: 0; }
.needs-work-list[b-j36u8uqlak] {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.needs-work-list li + li[b-j36u8uqlak] { border-top: 1px solid var(--line, #e4e7eb); }
.needs-work-link[b-j36u8uqlak] {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 0.5rem 0;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--copper, #b5622e);
    cursor: pointer;
}
.needs-work-link:hover[b-j36u8uqlak] { text-decoration: underline; }
/* /Components/Pages/Portal/PortalField.razor.rz.scp.css */
/* One question = one card. The section heading above a run of these is what
   groups them, so the card carries its own surface rather than sitting on a
   shared panel with divider rules. */
.field-row[b-ztj4lirv9s] {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    gap: 0 0.9rem;
    padding: 1.15rem 1.2rem;
    margin-bottom: 0.7rem;
    background: var(--card, #fff);
    border: 1px solid var(--line, #d9cfba);
    border-radius: var(--radius, 10px);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    animation: rise-in-b-ztj4lirv9s 0.5s ease-out forwards;
}

/* Staff-only question: flagged so it's obvious the client never sees it. */
.field-row.internal[b-ztj4lirv9s] {
    border-left: 3px solid var(--copper, #b5622e);
}

@keyframes rise-in-b-ztj4lirv9s {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.field-no[b-ztj4lirv9s] {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--copper, #b5622e);
    padding-top: 0.2rem;
}

.field-label[b-ztj4lirv9s] {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.35rem;
    color: var(--ink, #17302a);
}

/* Rich text: the blurb is sanitised HTML, so its own <p>/<ul>/<h3> carry the
   spacing. No white-space: pre-line here — it would turn the markup's source
   newlines into blank gaps. */
.field-description[b-ztj4lirv9s] {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink-soft, #51665f);
    margin: 0 0 0.6rem;
}

.field-description > :first-child[b-ztj4lirv9s] {
    margin-top: 0;
}

.field-description > :last-child[b-ztj4lirv9s] {
    margin-bottom: 0;
}

.field-description p[b-ztj4lirv9s] {
    margin: 0 0 0.5rem;
}

.field-description h3[b-ztj4lirv9s] {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--ink, #17302a);
    margin: 0.8rem 0 0.4rem;
}

.field-description ul[b-ztj4lirv9s],
.field-description ol[b-ztj4lirv9s] {
    margin: 0 0 0.5rem;
    padding-left: 1.25rem;
}

.field-description li[b-ztj4lirv9s] {
    margin-bottom: 0.2rem;
}

/* Content block (FieldType.Content): free-form instructions between questions.
   Not a question card — reads as prose, no number column or border. */
.portal-content[b-ztj4lirv9s] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink, #17302a);
    margin: 0 0 0.9rem;
    padding: 0 0.2rem;
}

.portal-content > :first-child[b-ztj4lirv9s] { margin-top: 0; }
.portal-content > :last-child[b-ztj4lirv9s] { margin-bottom: 0; }
.portal-content p[b-ztj4lirv9s] { margin: 0 0 0.6rem; }
.portal-content :is(h1, h2, h3)[b-ztj4lirv9s] {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink, #17302a);
    margin: 1rem 0 0.5rem;
}
.portal-content ul[b-ztj4lirv9s], .portal-content ol[b-ztj4lirv9s] { margin: 0 0 0.6rem; padding-left: 1.25rem; }
.portal-content li[b-ztj4lirv9s] { margin-bottom: 0.2rem; }
.portal-content a[b-ztj4lirv9s] { color: var(--accent); }
.portal-content img[b-ztj4lirv9s] { max-width: 100%; height: auto; border-radius: var(--radius); }

.yesno-group[b-ztj4lirv9s] {
    display: flex;
    gap: 1.5rem;
}

.checkbox-group[b-ztj4lirv9s] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.checkbox-option[b-ztj4lirv9s] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.98rem;
    line-height: 1.4;
    color: var(--ink, #17302a);
    cursor: pointer;
}

.checkbox-option input[b-ztj4lirv9s] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.field-row.locked .checkbox-option[b-ztj4lirv9s] {
    cursor: default;
}

.yesno-option[b-ztj4lirv9s] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.98rem;
    color: var(--ink, #17302a);
    cursor: pointer;
}

.optional[b-ztj4lirv9s] {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft, #51665f);
    margin-left: 0.5rem;
}

/* Review verdict. Shown to both sides — the client sees where their answer
   stands, staff see what they've already cleared. */
.review-tag[b-ztj4lirv9s] {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
    margin-left: 0.5rem;
    vertical-align: 0.1em;
    border: 1px solid currentColor;
}

.review-tag.approved[b-ztj4lirv9s] {
    color: var(--good, #2e7d5b);
}

.review-tag.changes[b-ztj4lirv9s] {
    color: var(--copper, #b5622e);
}

/* Footer row: review verdict on the left, thread toggle pushed to the right. */
.field-actions[b-ztj4lirv9s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--line, #d9cfba);
}

.review[b-ztj4lirv9s] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.review-hint[b-ztj4lirv9s] {
    font-size: 0.78rem;
    color: var(--ink-soft, #51665f);
}

/* One pill for every action on the row, so approve / request changes / comment
   read as the same class of control. */
.pill[b-ztj4lirv9s] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--line, #d9cfba);
    border-radius: 999px;
    background: var(--card, #fff);
    color: var(--ink, #17302a);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    flex: none;
}

.pill:hover:not(:disabled)[b-ztj4lirv9s] {
    border-color: currentColor;
}

.pill:disabled[b-ztj4lirv9s] {
    opacity: 0.5;
    cursor: default;
}

.pill.approve[b-ztj4lirv9s] {
    color: var(--good, #2e7d5b);
}

.pill.changes[b-ztj4lirv9s] {
    color: var(--copper, #b5622e);
}

.pill.comment[b-ztj4lirv9s] {
    color: var(--accent);
}

.pill.comment.has-comments[b-ztj4lirv9s] {
    border-color: currentColor;
}

.pill-count[b-ztj4lirv9s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    line-height: 1;
}

/* Comment thread: sits under the footer row, inside the question's card. */
.thread[b-ztj4lirv9s] {
    margin-top: 0.7rem;
}

.thread-list[b-ztj4lirv9s] {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.thread-item[b-ztj4lirv9s] {
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    background: var(--surface-2);
}

/* Staff replies get the accent edge so the two voices are tellable apart. */
.thread-item.staff[b-ztj4lirv9s] {
    background: var(--accent-soft, #e8f5ef);
    border-left: 2px solid var(--accent);
}

.thread-head[b-ztj4lirv9s] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}

.thread-author[b-ztj4lirv9s] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink, #17302a);
}

.thread-when[b-ztj4lirv9s] {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--ink-soft, #51665f);
}

.thread-body[b-ztj4lirv9s] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--ink, #17302a);
    /* Author's newlines survive; the value itself is escaped by Razor. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.thread-compose[b-ztj4lirv9s] {
    margin-top: 0.6rem;
}

.thread-compose textarea[b-ztj4lirv9s] {
    width: 100%;
    border: 1px solid var(--line, #d9cfba);
    border-radius: 8px;
    background: var(--card, #fff);
    padding: 0.45rem 0.55rem;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    resize: vertical;
}

.thread-actions[b-ztj4lirv9s] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.thread-send[b-ztj4lirv9s] {
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.35rem 0.9rem;
    cursor: pointer;
}

.thread-send:disabled[b-ztj4lirv9s] {
    opacity: 0.5;
    cursor: default;
}

.internal-tag[b-ztj4lirv9s] {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--copper, #b5622e);
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
    margin-left: 0.5rem;
    vertical-align: 0.1em;
}

input[type="text"][b-ztj4lirv9s],
input[type="number"][b-ztj4lirv9s],
input[type="date"][b-ztj4lirv9s],
textarea[b-ztj4lirv9s] {
    width: 100%;
    border: none;
    border-bottom: 1.5px solid var(--line, #d9cfba);
    border-radius: 0;
    background: transparent;
    font-family: var(--font-ui);
    font-size: 0.98rem;
    color: var(--ink, #17302a);
    padding: 0.4rem 0.1rem;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

input:focus[b-ztj4lirv9s],
textarea:focus[b-ztj4lirv9s] {
    outline: none;
    border-bottom-color: var(--ink, #17302a);
    background: var(--surface-2);
}

input:disabled[b-ztj4lirv9s],
textarea:disabled[b-ztj4lirv9s] {
    color: var(--ink-soft, #51665f);
    border-bottom-style: dashed;
}

textarea[b-ztj4lirv9s] {
    resize: vertical;
    border: 1.5px solid var(--line, #d9cfba);
    padding: 0.6rem 0.7rem;
}

textarea:focus[b-ztj4lirv9s] {
    border-color: var(--accent);
}

.field-meta[b-ztj4lirv9s] {
    min-height: 1.4rem;
    padding-top: 0.35rem;
}

.stamp[b-ztj4lirv9s] {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border: 1px solid currentColor;
    border-radius: 6px;
    transform: rotate(-1.5deg);
}

.stamp-saving[b-ztj4lirv9s] {
    color: var(--ink-soft, #51665f);
    animation: pulse-b-ztj4lirv9s 1.1s ease-in-out infinite;
}

.stamp-saved[b-ztj4lirv9s] {
    color: var(--good, #2e6e4e);
    animation: stamp-in-b-ztj4lirv9s 0.25s cubic-bezier(0.2, 1.6, 0.4, 1), fade-away-b-ztj4lirv9s 0.6s ease-in 2.4s forwards;
}

.stamp-error[b-ztj4lirv9s] {
    color: var(--bad, #a23b2e);
    text-transform: none;
    letter-spacing: 0.02em;
}

@keyframes stamp-in-b-ztj4lirv9s {
    from {
        opacity: 0;
        transform: rotate(-1.5deg) scale(1.35);
    }

    to {
        opacity: 1;
        transform: rotate(-1.5deg) scale(1);
    }
}

@keyframes fade-away-b-ztj4lirv9s {
    to {
        opacity: 0;
    }
}

@keyframes pulse-b-ztj4lirv9s {
    50% {
        opacity: 0.45;
    }
}

/* --- documents --- */

.doc-list[b-ztj4lirv9s] {
    list-style: none;
    margin: 0 0 0.7rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.doc-chip[b-ztj4lirv9s] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: rgba(23, 48, 42, 0.05);
    border: 1px solid var(--line, #d9cfba);
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
}

.doc-name[b-ztj4lirv9s] {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-size[b-ztj4lirv9s] {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--ink-soft, #51665f);
}

.doc-remove[b-ztj4lirv9s] {
    border: none;
    background: none;
    color: var(--bad, #a23b2e);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.1rem;
}

.doc-remove:hover[b-ztj4lirv9s] {
    transform: scale(1.2);
}

.dropzone[b-ztj4lirv9s] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    border: 1.5px dashed var(--copper, #b5622e);
    border-radius: 8px;
    background: rgba(181, 98, 46, 0.04);
    padding: 1.4rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.dropzone:hover[b-ztj4lirv9s],
.dropzone:focus-within[b-ztj4lirv9s] {
    background: rgba(181, 98, 46, 0.09);
}

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

.dz-title[b-ztj4lirv9s] {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ink, #17302a);
}

.dz-hint[b-ztj4lirv9s] {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    color: var(--ink-soft, #51665f);
}

.field-row.locked .dropzone[b-ztj4lirv9s] {
    display: none;
}

@media (max-width: 768px) {
    .field-row[b-ztj4lirv9s] {
        grid-template-columns: 2rem 1fr;
        gap: 0 0.6rem;
    }

    .doc-name[b-ztj4lirv9s] {
        max-width: 9rem;
    }
}
/* /Components/Shared/ConfirmDialog.razor.rz.scp.css */
.confirm-backdrop[b-8va0wlzzsa] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(23, 48, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: backdrop-in-b-8va0wlzzsa 0.15s ease-out;
}

.confirm-box[b-8va0wlzzsa] {
    background: var(--card, #fffdf7);
    border: 1px solid var(--line, #d9cfba);
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(23, 48, 42, 0.35);
    max-width: 26rem;
    width: calc(100% - 2rem);
    padding: 1.6rem 1.8rem 1.5rem;
    animation: box-in-b-8va0wlzzsa 0.18s cubic-bezier(0.2, 1.2, 0.4, 1);
}

.confirm-title[b-8va0wlzzsa] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--ink, #17302a);
    margin: 0 0 0.5rem;
}

.confirm-text[b-8va0wlzzsa] {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink-soft, #51665f);
    margin: 0 0 1.4rem;
}

.confirm-actions[b-8va0wlzzsa] {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
}

.confirm-cancel[b-8va0wlzzsa] {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft, #51665f);
    background: none;
    border: 1px solid var(--line, #d9cfba);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.confirm-cancel:hover[b-8va0wlzzsa] {
    border-color: var(--accent);
    color: var(--ink, #17302a);
}

.confirm-danger[b-8va0wlzzsa] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.92rem;
    color: #fffdf7;
    background: var(--bad, #a23b2e);
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1.2rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.confirm-danger:hover[b-8va0wlzzsa] {
    background: #86301f;
}

@keyframes backdrop-in-b-8va0wlzzsa {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes box-in-b-8va0wlzzsa {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}
.confirm-danger[b-8va0wlzzsa] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.92rem;
    color: #fffdf7;
    background: var(--bad, #a23b2e);
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1.2rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
/* /Components/Shared/Dropdown.razor.rz.scp.css */
.dd-wrap[b-8q5sd4bcgc] {
    position: relative;
    display: inline-block;
}

.dd-wrap.block[b-8q5sd4bcgc] {
    display: block;
    width: 100%;
}

.dd-trigger[b-8q5sd4bcgc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.55rem 0.8rem;
    cursor: pointer;
    text-align: left;
}

.dd-trigger[b-8q5sd4bcgc]::after {
    content: "";
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--ink-soft);
    border-bottom: 1.5px solid var(--ink-soft);
    transform: translateY(-2px) rotate(45deg);
}

.dd-trigger:hover[b-8q5sd4bcgc] {
    border-color: var(--ink-soft);
}

.dd-trigger:focus-visible[b-8q5sd4bcgc] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.dd-trigger:disabled[b-8q5sd4bcgc] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dd-trigger-text[b-8q5sd4bcgc] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dd-backdrop[b-8q5sd4bcgc] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.dd-menu[b-8q5sd4bcgc] {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 50;
    min-width: 100%;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius, 8px);
    box-shadow: var(--shadow-lg);
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
}

.dd-search[b-8q5sd4bcgc] {
    position: sticky;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    margin-bottom: 0.3rem;
}

.dd-search:focus-visible[b-8q5sd4bcgc] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.dd-empty[b-8q5sd4bcgc] {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--ink-soft);
    padding: 0.5rem 0.7rem;
}

.dd-option[b-8q5sd4bcgc] {
    text-align: left;
    border: none;
    background: none;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    color: var(--ink);
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.dd-option:hover[b-8q5sd4bcgc] {
    background: var(--surface-2);
}

.dd-option.selected[b-8q5sd4bcgc] {
    color: var(--accent);
    font-weight: 600;
    background: var(--accent-soft);
}
/* /Components/Shared/LoadingOverlay.razor.rz.scp.css */
.app-loader[b-02brgmwe6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
}

.app-loader--full[b-02brgmwe6q] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    padding: 0;
    background: color-mix(in srgb, var(--paper) 70%, transparent);
    backdrop-filter: blur(2px);
}

.app-loader-rings[b-02brgmwe6q] {
    position: relative;
    width: 56px;
    height: 56px;
}

    .app-loader-rings div[b-02brgmwe6q] {
        position: absolute;
        border: 3px solid var(--accent);
        opacity: 1;
        border-radius: 50%;
        animation: app-loader-ring-b-02brgmwe6q 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .app-loader-rings div:nth-child(2)[b-02brgmwe6q] {
            animation-delay: -0.5s;
        }

.app-loader-text[b-02brgmwe6q] {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

@keyframes app-loader-ring-b-02brgmwe6q {
    0% {
        top: 28px;
        left: 28px;
        width: 0;
        height: 0;
        opacity: 0;
    }

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

    100% {
        top: 0;
        left: 0;
        width: 56px;
        height: 56px;
        opacity: 0;
    }
}
/* /Components/Shared/RichTextEditor.razor.rz.scp.css */
/* Retheme Quill (Snow) onto the app's design tokens so it matches every other
   input and follows the light/dark theme. Quill injects its toolbar and editor at
   runtime, outside Blazor's CSS-isolation scope, so these reach in with ::deep. */
.rte[b-3z5upmrbag] {
    border-radius: var(--radius);
}

/* Toolbar */
.rte[b-3z5upmrbag]  .ql-toolbar.ql-snow {
    border: 1px solid var(--line);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    background: var(--surface-2);
    font-family: var(--font-ui);
}

/* Editor container. Quill's base CSS sets height:100%; against the flex/grid
   wrapper that resolves to a fixed height, so the editor overflows and paints over
   the Save/Cancel buttons below it. Let it size to content instead. */
.rte[b-3z5upmrbag]  .ql-container.ql-snow {
    height: auto;
    border: 1px solid var(--line);
    border-top: none;
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    background: var(--card);
    font-family: var(--font-ui);
    font-size: 0.92rem;
}

.rte[b-3z5upmrbag]  .ql-editor {
    min-height: 6rem;
    max-height: 22rem;
    color: var(--ink);
    line-height: 1.6;
}

.rte[b-3z5upmrbag]  .ql-editor.ql-blank::before {
    color: var(--ink-soft);
    font-style: normal;
}

.rte[b-3z5upmrbag]  .ql-editor a { color: var(--accent); }

/* Icons + pickers: stroke/fill/text map onto the theme, active state on accent */
.rte[b-3z5upmrbag]  .ql-snow .ql-stroke { stroke: var(--ink-soft); }
.rte[b-3z5upmrbag]  .ql-snow .ql-fill { fill: var(--ink-soft); }
.rte[b-3z5upmrbag]  .ql-snow .ql-picker { color: var(--ink-soft); }

.rte[b-3z5upmrbag]  .ql-snow.ql-toolbar button:hover .ql-stroke,
.rte[b-3z5upmrbag]  .ql-snow .ql-toolbar button:hover .ql-stroke,
.rte[b-3z5upmrbag]  .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.rte[b-3z5upmrbag]  .ql-snow .ql-picker-label:hover,
.rte[b-3z5upmrbag]  .ql-snow .ql-picker-item:hover { stroke: var(--accent); color: var(--accent); }

.rte[b-3z5upmrbag]  .ql-snow.ql-toolbar button:hover .ql-fill,
.rte[b-3z5upmrbag]  .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--accent); }

/* Dropdown menus (heading/colour) inherit the card surface */
.rte[b-3z5upmrbag]  .ql-snow .ql-picker-options {
    background: var(--card);
    border-color: var(--line);
    color: var(--ink);
}
/* /Components/Shared/Toasts.razor.rz.scp.css */
.toast-stack[b-rl0e8quk8a] {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 26rem;
}

.toast[b-rl0e8quk8a] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: 9px;
    padding: 0.9rem 1.15rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    font-size: 0.98rem;
    color: var(--ink);
    animation: toast-in-b-rl0e8quk8a 160ms ease-out;
}

.toast-success[b-rl0e8quk8a] { border-left-color: var(--good); }
.toast-error[b-rl0e8quk8a]   { border-left-color: var(--bad); }
.toast-warning[b-rl0e8quk8a] { border-left-color: #e8930c; }

.toast-text[b-rl0e8quk8a] {
    flex: 1;
    line-height: 1.4;
}

.toast-close[b-rl0e8quk8a] {
    background: none;
    border: none;
    color: var(--ink-soft);
    font-size: 1.05rem;
    line-height: 1.2;
    cursor: pointer;
    padding: 0;
}

.toast-close:hover[b-rl0e8quk8a] {
    color: var(--ink);
}

@keyframes toast-in-b-rl0e8quk8a {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}