/* /Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-page[b-4tntz1eapo] {
    width: 100%;
    min-height: var(--vh-full);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
}
/* /Components/Layout/SuperAdminLayout.razor.rz.scp.css */
/* ═══════════════════════════════════════
   SuperAdminLayout – Shell Styles
   ═══════════════════════════════════════ */

.sa-layout[b-lntknxrypj] {
    display: flex;
    height: var(--vh-full);
    overflow: hidden;
    background-color: var(--color-nav-bg) !important;
}

.sa-main[b-lntknxrypj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    margin-left: 220px;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    height: var(--vh-full);
}

.sa-layout.collapsed .sa-main[b-lntknxrypj] {
    margin-left: 80px;
}

.sa-content[b-lntknxrypj] {
     padding: 10px 16px 0px;
}

/* ── Common page card ── */
[b-lntknxrypj] .sa-page-card {
    background: var(--color-surface);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

/* ── SA shared button base ── */
[b-lntknxrypj] .sa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 34px;
    padding: 0 1.25rem;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    flex-shrink: 0;
}

[b-lntknxrypj] .sa-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(73, 163, 241, 0.4);
}

/* Primary – gradient blue (Save, Onboard, etc.) */
[b-lntknxrypj] .sa-btn-primary {
    background: var(--color-primary-gradient);
    color: #fff;
    box-shadow: 0 3px 5px -1px rgba(26, 115, 232, 0.2), 0 5px 12px -4px rgba(26, 115, 232, 0.3);
}

[b-lntknxrypj] .sa-btn-primary:hover:not(:disabled) {
    opacity: 0.92;
    color: #fff;
    box-shadow: 0 4px 8px -1px rgba(26, 115, 232, 0.25), 0 6px 16px -4px rgba(26, 115, 232, 0.35);
}

[b-lntknxrypj] .sa-btn-primary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Secondary – gray (Cancel, Back) */
[b-lntknxrypj] .sa-btn-secondary {
    background: #e5e7eb;
    color: var(--color-text);
    box-shadow: 0 3px 5px -1px rgb(60 60 60 / 20%), 0 5px 12px -4px rgb(219 219 219 / 30%);
}

[b-lntknxrypj] .sa-btn-secondary:hover {
    background: #d1d5db;
    color: var(--color-text-dark);
}

/* Danger – red (Suspend) */
[b-lntknxrypj] .sa-btn-danger {
    background: var(--color-danger);
    color: #fff;
}

[b-lntknxrypj] .sa-btn-danger:hover:not(:disabled) {
    background: #b91c1c;
    color: #fff;
}

/* Dark – charcoal (Edit Tenant, Manage Access) */
[b-lntknxrypj] .sa-btn-dark {
    background: #1f2937;
    color: #fff;
}

[b-lntknxrypj] .sa-btn-dark:hover {
    background: #111827;
    color: #fff;
}

/* ── Mobile overlay ── */
.sa-overlay[b-lntknxrypj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1035;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sa-overlay.active[b-lntknxrypj] {
    opacity: 1;
    pointer-events: auto;
}

/* ── Responsive ── */
@media (max-width: 800px) {
    .sa-main[b-lntknxrypj] {
        margin-left: 0 !important;
    }

    .sa-content[b-lntknxrypj] {
        padding: 10px 8px 0px;
    }

    /* All SA buttons take full width on mobile */
    [b-lntknxrypj] .sa-btn {
        width: 100%;
        flex: 1 1 0;
    }
}

@media (min-width: 801px) {
    .sa-overlay[b-lntknxrypj] {
        display: none;
    }
}
/* /Components/Layout/SuperAdminSidebar.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   SuperAdminSidebar – Scoped Styles
   Match reference image exactly
   ═══════════════════════════════════════════ */

.sa-sidebar[b-fm9yhmks5b] {
    width: 220px;
    min-height: var(--vh-full);
    background-color: var(--color-nav-bg) !important;
    display: flex;
    flex-direction: column;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sa-sidebar.collapsed[b-fm9yhmks5b] {
    width: 80px;
}

/* ── Brand ── */
.sa-sidebar-brand[b-fm9yhmks5b] {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 10px 16px;
    overflow: hidden;
}

.sa-brand-logo-wrap[b-fm9yhmks5b] {
    width: 100%;
    height: 30px;
    overflow: hidden;
    flex-shrink: 0;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sa-brand-img[b-fm9yhmks5b] {
    height: 32px;
    width: auto;
    display: block;
    object-fit: contain;
    object-position: left center;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sa-sidebar.collapsed .sa-brand-img[b-fm9yhmks5b] {
    height: 32px;
}

.sa-sidebar.collapsed .sa-brand-logo-wrap[b-fm9yhmks5b] {
    width: 36px;
}

.sa-sidebar.collapsed .sa-sidebar-brand[b-fm9yhmks5b] {
    justify-content: center;
    padding: 10px 22px;
}

/* ── Divider ── */
.sa-divider[b-fm9yhmks5b] {
    border: none;
    height: 1px;
    background: var(--color-nav-text);
    opacity: 0.25;
    margin: 0 var(--space-md) var(--space-md);
}

.sa-sidebar.collapsed .sa-divider[b-fm9yhmks5b] {
    margin: 0 12px 16px;
}

/* ── Navigation ── */
.sa-nav[b-fm9yhmks5b] {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 4px;
}

/* ── Nav Item ── */
.sa-nav-item[b-fm9yhmks5b] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    margin: 2px 10px;
    border-radius: var(--radius-md);
    color: var(--color-nav-text);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

.sa-nav-item:hover[b-fm9yhmks5b] {
    background: var(--color-surface);
    color: var(--color-nav-text-dark);
    text-decoration: none;
}

.sa-nav-item:focus-visible[b-fm9yhmks5b] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(73, 163, 241, 0.5);
}

/* Active: white card with shadow */
.sa-nav-item.active[b-fm9yhmks5b] {
    background: var(--color-surface);
    color: var(--color-nav-text-dark);
    font-weight: 600;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.06);
    letter-spacing: 0;
}

.sa-nav-item.active:hover[b-fm9yhmks5b] {
    background: var(--color-surface);
    color: var(--color-nav-text-dark);
    text-decoration: none;
}

/* ── Icon ── */
.sa-nav-icon[b-fm9yhmks5b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
    color: var(--color-nav-text-dark);
    background: var(--color-surface);
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.08);
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.sa-nav-icon svg[b-fm9yhmks5b] {
    width: 14px;
    height: 14px;
}

/* Active icon: blue-cyan gradient background with black icon */
.sa-nav-item.active .sa-nav-icon[b-fm9yhmks5b] {
    background-image: var(--color-primary-gradient);
    background-color: rgb(0, 171, 236) !important;
    color: var(--color-text-dark);
    box-shadow: 0 4px 8px -2px rgba(33, 82, 255, 0.4);
}

/* ── Label ── */
.sa-nav-label[b-fm9yhmks5b] {
    opacity: 1;
    transition: opacity 0.2s ease;
}

.sa-sidebar.collapsed .sa-nav-label[b-fm9yhmks5b] {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

/* Center icons when collapsed */
.sa-sidebar.collapsed .sa-nav-item[b-fm9yhmks5b] {
    justify-content: center;
    padding: 8px;
    gap: 0;
    margin: 0 10px;
}

/* ── Bottom Help Card ── */
.sa-sidebar-bottom[b-fm9yhmks5b] {
    padding: 12px;
}

.sa-help-card[b-fm9yhmks5b] {
    display: flex;
    flex-direction: column;
    align-items:flex-start;
    text-align: center;
    padding: 6px 10px 6px;
    border-radius: var(--radius-lg);
    background: linear-gradient(310deg, #627594, #a8b8d8);
    color: #fff;
    opacity: .65;
}

.sa-help-icon[b-fm9yhmks5b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 20%;
    background: var(--color-surface);
    color: var(--color-surface);
    margin-bottom: 10px;
    box-shadow: 0 2px 6px 0 rgba(34, 34, 34, 0.2);
}

.sa-help-icon svg[b-fm9yhmks5b] {
    width: 14px;
    height: 14px;
    color: #141727;
}

.sa-help-title[b-fm9yhmks5b] {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--color-surface);
    margin: 0 0 2px;
    line-height: 1.4;
}

.sa-help-text[b-fm9yhmks5b] {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 14px;
    line-height: 1.4;
}

.sa-help-btn[b-fm9yhmks5b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-sm) 12px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-nav-text-dark);
    font-size: var(--fs-sm);
    font-weight: 700;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    transition: opacity 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

.sa-help-btn:hover[b-fm9yhmks5b] {
    opacity: 0.9;
}

.sa-help-btn:focus-visible[b-fm9yhmks5b] {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

/* Hide help card content when sidebar collapsed */
.sa-sidebar.collapsed .sa-help-card[b-fm9yhmks5b] {
    padding: 10px;
}

.sa-sidebar.collapsed .sa-help-title[b-fm9yhmks5b],
.sa-sidebar.collapsed .sa-help-text[b-fm9yhmks5b],
.sa-sidebar.collapsed .sa-help-btn[b-fm9yhmks5b] {
    display: none;
}

.sa-sidebar.collapsed .sa-help-icon[b-fm9yhmks5b] {
    margin-bottom: 0;
}

/* ── Responsive ── */
@media (max-width: 800px) {
    .sa-sidebar[b-fm9yhmks5b] {
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .sa-sidebar.mobile-open[b-fm9yhmks5b] {
        transform: translateX(0);
        width: 208px;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.08);
    }

    /* Show full sidebar with labels on mobile even when collapsed */
    .sa-sidebar.mobile-open .sa-nav-label[b-fm9yhmks5b] {
        opacity: 1;
        width: auto;
        overflow: visible;
    }

    .sa-sidebar.mobile-open .sa-nav-item[b-fm9yhmks5b] {
        justify-content: flex-start;
        padding: 10px 14px;
        gap: 12px;
        margin: 0 8px;
    }

    .sa-sidebar.mobile-open .sa-brand-logo-wrap[b-fm9yhmks5b] {
        width: 100%;
    }

    .sa-sidebar.mobile-open .sa-sidebar-brand[b-fm9yhmks5b] {
        justify-content: flex-start;
        padding: 0 14px;
    }

    .sa-sidebar.mobile-open .sa-help-title[b-fm9yhmks5b],
    .sa-sidebar.mobile-open .sa-help-text[b-fm9yhmks5b],
    .sa-sidebar.mobile-open .sa-help-btn[b-fm9yhmks5b] {
        display: flex;
    }

    .sa-sidebar.mobile-open .sa-help-title[b-fm9yhmks5b] {
        display: block;
    }

    .sa-sidebar.mobile-open .sa-help-text[b-fm9yhmks5b] {
        display: block;
    }
}
/* /Components/Layout/SuperAdminTopBar.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   SuperAdminTopBar – Scoped Styles
   Pixel-match to reference breadcrumb image
   ═══════════════════════════════════════════ */

.sa-topbar[b-20po954l7i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 8px;
    background: transparent;
    position: sticky;
    top: 0;
    margin:0px 15px;
    z-index: 1030;
    gap: 16px;
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.sa-topbar.scrolled[b-20po954l7i] {
    background: var(--color-surface);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* ── Left side ── */
.sa-topbar-left[b-20po954l7i] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;

}

/* ── Hamburger ── */
.sa-hamburger[b-20po954l7i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-nav-text);
    cursor: pointer;
    transition: color 0.15s ease;
    line-height: 1;
    box-shadow: none;
    outline: none;
    flex-shrink: 0;
}

.sa-hamburger:hover[b-20po954l7i] {
    color: var(--color-nav-text-dark);
}

.sa-hamburger:focus-visible[b-20po954l7i] {
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}

/* ── Header block (breadcrumb + title stacked) ── */
.sa-header-block[b-20po954l7i] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ── Breadcrumb ── */
.sa-breadcrumb-nav[b-20po954l7i] {
    display: flex;
    align-items: center;
}

.sa-breadcrumb[b-20po954l7i] {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    font-size: var(--fs-sm);
}

.sa-crumb-item[b-20po954l7i] {
    display: flex;
    align-items: center;
    color: var(--color-nav-text);
    font-weight: 400;
}

.sa-crumb-item + .sa-crumb-item[b-20po954l7i]::before {
    content: '/';
    color: var(--color-text-faint);
    margin: 0 5px;
    font-weight: 400;
    font-size: var(--fs-xs);
}

.sa-crumb-item a[b-20po954l7i] {
    color: var(--color-text-faint);
    text-decoration: none;
    font-weight: 400;
    display: flex;
    align-items: center;
    transition: color 0.15s ease;
}

.sa-crumb-item a:hover[b-20po954l7i] {
    color: var(--color-nav-text);
    text-decoration: none;
}

.sa-crumb-item.current[b-20po954l7i] {
    color: var(--color-nav-text-dark);
    font-weight: 500;
}

/* ── Right side ── */
.sa-topbar-right[b-20po954l7i] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-right:20px;
}

/* ── Search ── */
.sa-search-wrap[b-20po954l7i] {
    position: relative;
    display: flex;
    align-items: center;
}

.sa-search-icon[b-20po954l7i] {
    position: absolute;
    left: 10px;
    color: var(--color-text-faint);
    pointer-events: none;
}

.sa-search-input[b-20po954l7i] {
    width: 150px;
    height: var(--btn-height-sm);
    padding: 0 10px 0 30px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: var(--fs-sm);
    font-family: inherit;
    color: var(--color-nav-text-dark);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sa-search-input[b-20po954l7i]::placeholder {
    color: var(--color-text-faint);
    font-weight: 400;
}

.sa-search-input:focus[b-20po954l7i] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* ── Icon buttons ── */
.sa-topbar-btn[b-20po954l7i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-nav-text);
    cursor: pointer;
    transition: color 0.15s ease;
    line-height: 1;
    box-shadow: none;
    outline: none;
}

.sa-topbar-btn:hover[b-20po954l7i] {
    color: var(--color-nav-text-dark);
}

.sa-topbar-btn:focus-visible[b-20po954l7i] {
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}

/* ── Avatar circle ── */
.sa-avatar-circle[b-20po954l7i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    border: 1.5px solid #d1d5db;
    border-radius: 50%;
    background: #fff;
    color: #67748e;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    line-height: 1;
    box-shadow: none;
    outline: none;
}

.sa-avatar-circle:hover[b-20po954l7i] {
    border-color: var(--color-primary);
    color: var(--color-nav-text-dark);
}

.sa-avatar-circle:focus-visible[b-20po954l7i] {
    box-shadow: 0 0 0 2px var(--color-focus-ring);
    border-color: var(--color-primary);
}

/* ── User dropdown ── */
.sa-user-dropdown-wrap[b-20po954l7i] {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}

.sa-user-toggle[b-20po954l7i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--color-nav-text-dark);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: 1;
    outline: none;
    transition: background 0.15s ease;
}

.sa-user-toggle:hover[b-20po954l7i] {
    background: rgba(0, 0, 0, 0.04);
}

.sa-user-toggle:focus-visible[b-20po954l7i] {
    box-shadow: 0 0 0 2px rgba(73, 163, 241, 0.4);
}

/* ── User Avatar Icon ── */
.sa-avatar-icon[b-20po954l7i] {
    color: var(--color-nav-text);
    flex-shrink: 0;
}

.sa-user-name[b-20po954l7i] {
    white-space: nowrap;
    color: var(--color-nav-text-dark);
    font-weight: 500;
}

.sa-dropdown-chevron[b-20po954l7i] {
    color: var(--color-nav-text);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.sa-dropdown-chevron.open[b-20po954l7i] {
    transform: rotate(180deg);
}

/* ── Dropdown menu ── */
.sa-user-dropdown[b-20po954l7i] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 123px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: var(--space-sm) 0;
    z-index: 1050;
    animation: sa-dropdown-fade-b-20po954l7i 0.15s ease;
}

@keyframes sa-dropdown-fade-b-20po954l7i {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sa-dropdown-item[b-20po954l7i] {
    display: block;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--color-nav-text-dark);
    font-size: var(--fs-xs);
    font-weight: 400;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease;
    line-height: 1.5;
}

.sa-dropdown-item:hover[b-20po954l7i] {
    background: var(--color-border-light);
    color: var(--color-nav-text-dark);
    text-decoration: none;
}

.sa-dropdown-logout-form[b-20po954l7i] {
    margin: 0;
    padding: 0;
    border: none;
}

.sa-dropdown-logout[b-20po954l7i] {
    border-top: none;
    margin-top: 2px;
    padding-top: 10px;
    color: var(--color-nav-text-dark);
}

.sa-avatar-icon:hover[b-20po954l7i] {
    color: var(--color-nav-text-dark);
}

/* ── Profile Toggle (avatar + name + chevron) ── */
.sa-profile-toggle[b-20po954l7i] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    outline: none;
    transition: background 0.15s ease;
}

.sa-profile-toggle:hover[b-20po954l7i] {
    background: rgba(0, 0, 0, 0.04);
}

.sa-profile-toggle:focus-visible[b-20po954l7i] {
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.sa-avatar-circle-inner[b-20po954l7i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1.5px solid #d1d5db;
    border-radius: 50%;
    background: #fff;
    color: #67748e;
    flex-shrink: 0;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.sa-profile-toggle:hover .sa-avatar-circle-inner[b-20po954l7i] {
    border-color: var(--color-primary);
    color: var(--color-nav-text-dark);
}

.sa-avatar-img[b-20po954l7i] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.sa-profile-name[b-20po954l7i] {
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--color-nav-text-dark);
    white-space: nowrap;
}

.sa-profile-chevron[b-20po954l7i] {
    color: var(--color-nav-text);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.sa-profile-chevron.open[b-20po954l7i] {
    transform: rotate(180deg);
}

/* ── Profile Dropdown ── */
.sa-profile-dropdown[b-20po954l7i] {
    position: relative;
}

.sa-dropdown-menu[b-20po954l7i] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: var(--space-sm) 0;
    z-index: 1000;
    animation: sa-dropdown-fade-b-20po954l7i 0.12s ease-out;
}

@keyframes sa-dropdown-fade-b-20po954l7i {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sa-dropdown-item[b-20po954l7i] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 16px;
    margin: 0;
    border: none;
    background: none;
    color: var(--color-nav-text-dark);
    font-size: var(--fs-base);
    font-family: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.1s ease;
    white-space: nowrap;
}

.sa-dropdown-item:hover[b-20po954l7i] {
    background: var(--color-border-light);
}

.sa-dropdown-item.sa-dropdown-danger[b-20po954l7i] {
    color: var(--color-danger);
}

.sa-dropdown-item.sa-dropdown-danger:hover[b-20po954l7i] {
    background: var(--color-danger-light);
}

.sa-dropdown-divider[b-20po954l7i] {
    height: 1px;
    margin: var(--space-xs) 12px;
    background: var(--color-border);
}

/* ── Responsive ── */
@media (max-width: 800px) {
    .sa-topbar[b-20po954l7i] {
        padding: 12px 10px 8px;
    }

    .sa-topbar-left[b-20po954l7i] {
        gap: 16px;
    }

    .sa-search-wrap[b-20po954l7i] {
        display: none;
    }
}
/* /Components/Pages/Auth/ForgotPassword.razor.rz.scp.css */
/* ── Forgot Password – Page-specific styles ── */
/* Shared auth layout, form, right panel, and responsive
   styles are in site.css under "Shared Auth Layout" */

.text-center[b-sszmzhdgr5] {
    text-align: center;
}
/* /Components/Pages/Auth/Login.razor.rz.scp.css */
/* ── Login – Page-specific styles ── */
/* Shared auth layout, form, right panel, and responsive
   styles are in site.css under "Shared Auth Layout" */

/* ── Remember Me ── */
.remember-row[b-y3fccoje64] {
    margin-bottom: 24px;
}

.remember-label[b-y3fccoje64] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color-text);
    cursor: pointer;
}

.remember-checkbox[b-y3fccoje64] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-auth-accent);
    cursor: pointer;
}
/* /Components/Pages/Auth/ResetPassword.razor.rz.scp.css */
/* ── Reset Password – Page-specific styles ── */
/* Shared auth layout, form, right panel, and responsive
   styles are in site.css under "Shared Auth Layout" */

.text-center[b-c9o6xyws5x] {
    text-align: center;
}
/* /Components/Pages/Auth/SessionExpired.razor.rz.scp.css */
/* ── Session Expired Split Layout ── */
.session-expired-container[b-xkj7qjv5ud] {
    display: flex;
    width: 100%;
    height: var(--vh-full);
    min-height: var(--vh-full);
    background: var(--color-surface);
}

/* ── Left Panel ── */
.session-expired-left[b-xkj7qjv5ud] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    background: var(--color-surface);
}

.session-expired-content[b-xkj7qjv5ud] {
    text-align: center;
    max-width: 420px;
}

.icon-wrapper[b-xkj7qjv5ud] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin: 0 auto 28px;
    background: var(--color-warning-light);
    border-radius: 50%;
}

.expired-heading[b-xkj7qjv5ud] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: 12px;
}

.expired-message[b-xkj7qjv5ud] {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 32px;
}

.btn-login[b-xkj7qjv5ud] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-surface);
    background: linear-gradient(135deg, var(--color-auth-accent) 0%, var(--color-auth-accent-dark) 100%);
    border: none;
    border-radius: 10px;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.1s;
}

.btn-login:hover[b-xkj7qjv5ud] {
    opacity: 0.92;
    color: var(--color-surface);
    text-decoration: none;
}

.btn-login:active[b-xkj7qjv5ud] {
    transform: scale(0.98);
}

/* ── Right Panel: Branding ── */
.session-expired-right[b-xkj7qjv5ud] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-auth-accent-dark) 0%, var(--color-auth-accent) 50%, #fb923c 100%);
    border-radius: 24px 0 0 24px;
    padding: 48px 40px;
    position: relative;
    overflow: hidden;
}

.session-expired-right[b-xkj7qjv5ud]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.12) 0%, transparent 60%);
    pointer-events: none;
}

.brand-content[b-xkj7qjv5ud] {
    text-align: center;
    position: relative;
    z-index: 1;
    max-width: 420px;
}

.brand-logo[b-xkj7qjv5ud] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
}

.brand-logo-img[b-xkj7qjv5ud] {
    height: 44px;
    width: auto;
}

.brand-tagline[b-xkj7qjv5ud] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-surface);
    margin-bottom: 16px;
    font-style: italic;
}

.brand-description[b-xkj7qjv5ud] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .session-expired-container[b-xkj7qjv5ud] {
        flex-direction: column;
    }

    .session-expired-right[b-xkj7qjv5ud] {
        display: none;
    }

    .session-expired-left[b-xkj7qjv5ud] {
        padding: 32px 24px;
    }
}

@media (max-width: 480px) {
    .expired-heading[b-xkj7qjv5ud] {
        font-size: 1.4rem;
    }

    .expired-message[b-xkj7qjv5ud] {
        font-size: 0.875rem;
    }

    .btn-login[b-xkj7qjv5ud] {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
    }

    .icon-wrapper[b-xkj7qjv5ud] {
        width: 80px;
        height: 80px;
    }

    .icon-wrapper svg[b-xkj7qjv5ud] {
        width: 44px;
        height: 44px;
    }
}
/* /Components/Pages/Auth/VerifyOtp.razor.rz.scp.css */
/* ── Verify OTP – Page-specific styles ── */
/* Shared auth layout, form, right panel, and responsive
   styles are in site.css under "Shared Auth Layout" */

/* ── Resend OTP ── */
.resend-wrapper[b-1vb6ptfr2e] {
    text-align: center;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.resend-text[b-1vb6ptfr2e] {
    font-size: 0.85rem;
    color: var(--color-text-faint);
}

.resend-link[b-1vb6ptfr2e] {
    font-size: 0.85rem;
    color: var(--color-auth-accent);
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.resend-link:hover[b-1vb6ptfr2e] {
    text-decoration: underline;
    color: #d97706;
}
 

/* ── Timer ── */
.timer-text[b-1vb6ptfr2e] {
    font-size: 0.85rem;
    color: #64748b;
}

.timer-text strong[b-1vb6ptfr2e] {
    color: #ea580c;
    font-variant-numeric: tabular-nums;
}

/* ── Back Link ── */
.forgot-link-wrapper[b-1vb6ptfr2e] {
    text-align: center;
    margin-top: 16px;
}

.forgot-link[b-1vb6ptfr2e] {
    font-size: 0.85rem;
    color: #f59e0b;
    text-decoration: none;
    font-weight: 500;
}

.forgot-link:hover[b-1vb6ptfr2e] {
    text-decoration: underline;
    color: #d97706;
}

/* ── Right Panel ── */
.login-right[b-1vb6ptfr2e] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ea580c 0%, #f59e0b 50%, #fb923c 100%);
    border-radius: 24px 0 0 24px;
    padding: 48px 40px;
    position: relative;
    overflow: hidden;
}

.login-right[b-1vb6ptfr2e]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.12) 0%, transparent 60%);
    pointer-events: none;
}

.brand-content[b-1vb6ptfr2e] {
    text-align: center;
    position: relative;
    z-index: 1;
    max-width: 420px;
}

.brand-logo[b-1vb6ptfr2e] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
}

.brand-logo-img[b-1vb6ptfr2e] {
    max-width: 260px;
    height: auto;
}

.brand-tagline[b-1vb6ptfr2e] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    line-height: 1.4;
}

.brand-description[b-1vb6ptfr2e] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.65;
    margin: 0;
}

/* ── Error Alert ── */
.alert-danger[b-1vb6ptfr2e] {
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 20px;
}

/* ── Responsive: Tablet ── */
@media (max-width: 1024px) {
    .login-left[b-1vb6ptfr2e] {
        padding: 40px 32px;
    }

    .login-right[b-1vb6ptfr2e] {
        padding: 40px 32px;
    }

    .brand-logo-img[b-1vb6ptfr2e] {
        max-width: 220px;
    }
}

/* ── Responsive: Mobile ── */
@media (max-width: 768px) {
    .login-container[b-1vb6ptfr2e] {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    .login-right[b-1vb6ptfr2e] {
        border-radius: 0;
        padding: 32px 24px;
        min-height: auto;
        order: -1;
        flex: none;
    }

    .login-left[b-1vb6ptfr2e] {
        flex: none;
        padding: 32px 24px;
    }

    .login-form-wrapper[b-1vb6ptfr2e] {
        max-width: 100%;
    }

    .brand-logo-img[b-1vb6ptfr2e] {
        max-width: 180px;
    }

    .brand-tagline[b-1vb6ptfr2e] {
        font-size: 1rem;
    }

    .brand-description[b-1vb6ptfr2e] {
        display: none;
    }

    .login-heading[b-1vb6ptfr2e] {
        font-size: 1.5rem;
    }
}

/* ── Responsive: Small Mobile ── */
@media (max-width: 480px) {
    .login-left[b-1vb6ptfr2e] {
        padding: 24px 20px;
    }

    .login-right[b-1vb6ptfr2e] {
        padding: 24px 20px;
    }

    .brand-logo-img[b-1vb6ptfr2e] {
        max-width: 150px;
    }

    .brand-tagline[b-1vb6ptfr2e] {
        font-size: 0.9rem;
    }

    .login-heading[b-1vb6ptfr2e] {
        font-size: 1.35rem;
    }

    .login-subtitle[b-1vb6ptfr2e] {
        font-size: 0.8rem;
        margin-bottom: 24px;
    }

    .btn-submit[b-1vb6ptfr2e] {
        padding: 12px;
        font-size: 0.875rem;
    }
}
 
/* /Components/Pages/Companies/Companies.razor.rz.scp.css */
/* ═══════════════════════════════════════
   Companies (Tenants) Page – Scoped Styles
   ═══════════════════════════════════════ */

.companies-page[b-0jezozhobc] {
    padding: 0 0 0px;
    color: var(--color-text);
}

/* ── Page Header ── */
.page-header[b-0jezozhobc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 20px;
    gap: 16px;
}

.page-header-left[b-0jezozhobc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.page-heading[b-0jezozhobc] {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0;
    padding: 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
    border: none;
}

.page-subtext[b-0jezozhobc] {
    font-size: 0.8125rem;
    font-weight: 400;
    color: #64748b;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

/* ── Card Wrapper ── */

/* ── Responsive ── */
@media (max-width: 640px) {
    .companies-page[b-0jezozhobc] {
        padding: 0 0 0px;
    }

    .page-header[b-0jezozhobc] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
}
/* /Components/Pages/Dashboard/Dashboard.razor.rz.scp.css */
/* ═══════════════════════════════════════
   Super Admin Dashboard – Scoped Styles
   ═══════════════════════════════════════ */

.dashboard[b-w211vm9xni] {
    padding: 0 0 0px;
    color: var(--color-text);
}

/* ── Single Dashboard Card ── */
.dashboard-card[b-w211vm9xni] {
    padding: 20px 24px 24px;
}

/* ── Overview Header ── */
.overview-header[b-w211vm9xni] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 20px;
    gap: 16px;
}

.overview-title[b-w211vm9xni] {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0;
    padding: 0;
    letter-spacing: -0.025em;
    line-height: 1.3;
    border: none;
}

/* ── Stats Grid ── */
.stats-grid[b-w211vm9xni] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 0;
}

.stat-card[b-w211vm9xni] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 20px;
    background: var(--color-bg-hover);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    transition: all 0.2s ease;
    gap: 12px;
}

.stat-card:hover[b-w211vm9xni] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

.stat-content[b-w211vm9xni] {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.stat-label[b-w211vm9xni] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: -0.006em;
    line-height: 1.4;
    margin: 0;
    padding: 0;
}

.stat-value[b-w211vm9xni] {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.25;
    letter-spacing: -0.03em;
    margin: 6px 0 4px;
    padding: 0;
}

.stat-growth[b-w211vm9xni] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #16a34a;
    line-height: 1.4;
    margin: 0;
    padding: 0;
}

.stat-disabled[b-w211vm9xni] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-faint);
    line-height: 1.4;
    font-style: italic;
    margin: 0;
    padding: 0;
}

/* ── Stat Icon Wrappers ── */
.stat-icon-wrap[b-w211vm9xni] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    flex-shrink: 0;
}

.icon-companies[b-w211vm9xni] {
    background: var(--color-icon-blue-bg);
    color: var(--color-icon-blue);
}

.icon-jobs[b-w211vm9xni] {
    background: var(--color-icon-green-bg);
    color: var(--color-icon-green);
}

.icon-candidates[b-w211vm9xni] {
    background: var(--color-icon-purple-bg);
    color: var(--color-icon-purple);
}

.icon-ai[b-w211vm9xni] {
    background: var(--color-icon-amber-bg);
    color: var(--color-icon-amber);
}

/* ── Disabled Card ── */
.stat-card-disabled[b-w211vm9xni] {
    opacity: 0.5;
    pointer-events: none;
}

.stat-card-disabled .stat-value[b-w211vm9xni] {
    color: var(--color-text-faint);
}

.stat-card-disabled .stat-icon-wrap[b-w211vm9xni] {
    background: var(--color-border-light);
    color: var(--color-text-faint);
}

/* ── Card Divider ── */
.card-divider[b-w211vm9xni] {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 24px 0;
}

/* ── Companies Section Header ── */
.companies-section-header[b-w211vm9xni] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.section-title[b-w211vm9xni] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0;
    padding: 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .stats-grid[b-w211vm9xni] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .dashboard[b-w211vm9xni] {
        padding: 0 0 32px;
    }

    .dashboard-card[b-w211vm9xni] {

        padding: 16px 8px 20px;
    }

    .stats-grid[b-w211vm9xni] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .overview-header[b-w211vm9xni] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .overview-title[b-w211vm9xni] {
        font-size: 1.25rem;
    }

    .stat-value[b-w211vm9xni] {
        font-size: 1.375rem;
    }
}

/* ── Table Loading Indicator ── */
.table-loading[b-w211vm9xni] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 16px;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 500;
}

.table-loading-spinner[b-w211vm9xni] {
    width: 28px;
    height: 28px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: tbl-spin-b-w211vm9xni 0.7s linear infinite;
}

@keyframes tbl-spin-b-w211vm9xni {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/Plans/EditPlan.razor.rz.scp.css */
/* ═══════════════════════════════════════
   Edit Plan Page – Scoped Styles
   ═══════════════════════════════════════ */

.edit-plan-page[b-19a07sobos] {
    padding: 24px;
    color: var(--color-text);
}

/* ── Header ── */
.edit-plan-header[b-19a07sobos] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 24px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 24px;
    gap: 16px;
}

.edit-plan-title[b-19a07sobos] {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.edit-plan-subtitle[b-19a07sobos] {
    font-size: 0.8125rem;
    font-weight: 400;
    color: #64748b;
    margin: 4px 0 0;
    line-height: 1.5;
}

.edit-plan-actions[b-19a07sobos] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* ── Form layout ── */
.edit-plan-form[b-19a07sobos] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.form-section[b-19a07sobos] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-section-title[b-19a07sobos] {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

.form-grid[b-19a07sobos] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.form-grid-single[b-19a07sobos] {
    grid-template-columns: 1fr;
}

.form-group[b-19a07sobos] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label[b-19a07sobos] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #344767;
}

.form-control[b-19a07sobos] {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: inherit;
    color: #344767;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus[b-19a07sobos] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.form-hint[b-19a07sobos] {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.4;
}

.form-check[b-19a07sobos] {
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
}

.form-check-input[b-19a07sobos] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.form-check-label[b-19a07sobos] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #344767;
    cursor: pointer;
}

/* ── Alerts ── */
.alert[b-19a07sobos] {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alert-success[b-19a07sobos] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.alert-danger[b-19a07sobos] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.btn-close[b-19a07sobos] {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 0;
}

.btn-close:hover[b-19a07sobos] {
    opacity: 1;
}

/* ── Success Modal ── */
.success-modal-overlay[b-19a07sobos] {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: successFadeIn-b-19a07sobos 0.2s ease;
}

.success-modal-backdrop[b-19a07sobos] {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.success-modal[b-19a07sobos] {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(59, 130, 246, 0.08);
    width: 100%;
    max-width: 380px;
    padding: 32px 28px;
    text-align: center;
    animation: successSlideUp-b-19a07sobos 0.25s ease;
}

.success-modal-icon[b-19a07sobos] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(310deg, #10b981, #34d399);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.success-modal-title[b-19a07sobos] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px;
}

.success-modal-message[b-19a07sobos] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0 0 24px;
    line-height: 1.5;
}

.success-modal-btn[b-19a07sobos] {
    min-width: 120px;
}

@keyframes successFadeIn-b-19a07sobos {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes successSlideUp-b-19a07sobos {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ── Loading / Empty ── */
.edit-plan-loading[b-19a07sobos],
.edit-plan-empty[b-19a07sobos] {
    text-align: center;
    padding: 48px;
    color: #64748b;
    font-size: 0.875rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .edit-plan-header[b-19a07sobos] {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-grid[b-19a07sobos] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Plans/PlansAndLimits.razor.rz.scp.css */
/* ═══════════════════════════════════════
   Plans & Limits Page – Scoped Styles
   ═══════════════════════════════════════ */

.plans-page[b-opxuma2jzh] {
    padding: 0 0 48px;
    color: var(--color-text);
}

/* ── Page Header ── */
.page-header[b-opxuma2jzh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 20px;
    gap: 16px;
}

.page-heading[b-opxuma2jzh] {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0;
    padding: 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
    border: none;
}

.page-header-left[b-opxuma2jzh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.page-subtext[b-opxuma2jzh] {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

/* ── Card Wrapper ── */

/* ── Primary Button (blue gradient) ── */
.btn-primary[b-opxuma2jzh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    margin: 0;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-primary-gradient);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: -0.006em;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 3px 5px -1px rgba(26, 115, 232, 0.2), 0 5px 12px -4px rgba(26, 115, 232, 0.3);
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    flex-shrink: 0;
}

.btn-primary:hover[b-opxuma2jzh] {
    opacity: 0.92;
    box-shadow: 0 4px 8px -1px rgba(26, 115, 232, 0.25), 0 6px 16px -4px rgba(26, 115, 232, 0.35);
}

.btn-primary:focus-visible[b-opxuma2jzh] {
    box-shadow: 0 0 0 3px rgba(73, 163, 241, 0.4);
}

/* ═══════════════════════════════════════
   Plan Cards Grid
   ═══════════════════════════════════════ */
.plans-grid[b-opxuma2jzh] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.plan-card[b-opxuma2jzh] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.plan-card:hover[b-opxuma2jzh] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
    border-color: #cbd5e1;
}

.plan-card-featured[b-opxuma2jzh] {
    position: relative;
    overflow: hidden;
    border-color: #93c5fd;
    box-shadow: 0 1px 3px rgba(26, 115, 232, 0.08);
}

.plan-card-featured:hover[b-opxuma2jzh] {
    border-color: #60a5fa;
    box-shadow: 0 4px 16px rgba(26, 115, 232, 0.12);
}

/* ── "Most Popular" flag ribbon ── */
.plan-flag[b-opxuma2jzh] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 16px;
    background: var(--color-primary-gradient);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 0 0 0 8px;
    box-shadow: 0 2px 6px rgba(26, 115, 232, 0.3);
    z-index: 1;
}

/* ── Card Header ── */
.plan-card-header[b-opxuma2jzh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 24px 24px 0;
}

.plan-header-top[b-opxuma2jzh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.plan-name[b-opxuma2jzh] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #344767;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.plan-price[b-opxuma2jzh] {
    font-size: 2rem;
    font-weight: 700;
    color: #344767;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.plan-period[b-opxuma2jzh] {
    font-size: 0.875rem;
    font-weight: 400;
    color: #7b809a;
    letter-spacing: 0;
}

.plan-desc[b-opxuma2jzh] {
    font-size: 0.8125rem;
    font-weight: 400;
    color: #7b809a;
    line-height: 1.5;
    margin-top: 2px;
}

/* ── Card Body ── */
.plan-card-body[b-opxuma2jzh] {
    flex: 1;
    padding: 20px 24px 0;
}

.plan-limits[b-opxuma2jzh] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 20px;
}

.limit-item[b-opxuma2jzh] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.limit-icon[b-opxuma2jzh] {
    display: flex;
    align-items: center;
    color: #1A73E8;
    flex-shrink: 0;
}

.limit-value[b-opxuma2jzh] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.limit-label[b-opxuma2jzh] {
    font-size: 0.8125rem;
    font-weight: 400;
    color: #7b809a;
    line-height: 1.4;
    white-space: nowrap;
}

/* ── Bottom Section: divider → stats → button ── */
.plan-card-bottom[b-opxuma2jzh] {
    padding: 0 24px 24px;
}

.plan-divider[b-opxuma2jzh] {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0 0 16px;
}

.plan-card-stats[b-opxuma2jzh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin-bottom: 16px;
}

.stats-label[b-opxuma2jzh] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #7b809a;
}

.stats-value[b-opxuma2jzh] {
    font-size: 1rem;
    font-weight: 700;
    color: #344767;
}

.btn-edit[b-opxuma2jzh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 16px;
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: #344767;
    font-size: 0.8125rem;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.4;
    letter-spacing: -0.006em;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

.btn-edit:hover[b-opxuma2jzh] {
    background: var(--color-bg-hover);
    border-color: #cbd5e1;
    color: #1A73E8;
}

.btn-edit:focus-visible[b-opxuma2jzh] {
    box-shadow: 0 0 0 3px rgba(73, 163, 241, 0.3);
}

/* ═══════════════════════════════════════
   Responsive
   ═══════════════════════════════════════ */
@media (max-width: 1024px) {
    .plans-grid[b-opxuma2jzh] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 640px) {
    .plans-page[b-opxuma2jzh] {
        padding: 0 0 32px;
    }

    .page-header[b-opxuma2jzh] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .btn-primary[b-opxuma2jzh] {
        width: 100%;
        justify-content: center;
    }

    .plan-card-header[b-opxuma2jzh] {
        padding: 20px 12px 0;
    }

    .plan-card-body[b-opxuma2jzh] {
        padding: 16px 12px 0;
    }

    .plan-card-bottom[b-opxuma2jzh] {
        padding: 0 12px 20px;
    }
}
/* /Components/Pages/SuperAdmin/ChangePassword.razor.rz.scp.css */
/* ── Change Password – Page-specific styles ── */
/* Shared auth layout, form, right panel, and responsive
   styles are in site.css under "Shared Auth Layout" */

.text-center[b-ymlxybr9s6] {
    text-align: center;
}

.field-hint[b-ymlxybr9s6] {
    font-size: 0.72rem;
    color: var(--color-text-faint);
    margin-top: 4px;
    display: block;
}
/* /Components/Pages/SuperAdmin/EditOnboardCompany.razor.rz.scp.css */
/* ============================
   ONBOARD PAGE CONTAINER
   ============================ */
.onboard-page[b-6qn1jxn1xs] {
    width: 100%;
    padding: 0 0 2rem;
    background: var(--color-surface);
}

/* ============================
   HEADER CARD
   ============================ */
.onboard-header[b-6qn1jxn1xs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-surface);
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 1.25rem 1.75rem;
    margin-bottom: 1.25rem;
    position: sticky;
    top: 58px;
    z-index: 100;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.onboard-header.scrolled[b-6qn1jxn1xs] {
    background: var(--color-surface);
    border-color: var(--color-border-card);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.onboard-title[b-6qn1jxn1xs] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0;
    line-height: 1.3;
}

.onboard-subtitle[b-6qn1jxn1xs] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0.2rem 0 0;
}

.onboard-header-actions[b-6qn1jxn1xs] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
}

/* ============================
   TENANT LIST CARD
   ============================ */
.tenant-list-card[b-6qn1jxn1xs] {
    background: var(--color-surface);
    border: 1px solid var(--color-border-card);
    border-radius: 0.75rem;
    overflow: hidden;
}

.tenant-list-toolbar[b-6qn1jxn1xs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border-card);
}

.tenant-search[b-6qn1jxn1xs] {
    position: relative;
    width: 280px;
}

.tenant-search i[b-6qn1jxn1xs] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-faint);
}

.tenant-search .form-control[b-6qn1jxn1xs] {
    padding-left: 2.25rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    height: 38px;
}

.tenant-search .form-control:focus[b-6qn1jxn1xs] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.tenant-count[b-6qn1jxn1xs] {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Table */
.tenant-table[b-6qn1jxn1xs] {
    margin: 0;
    font-size: 0.875rem;
}

.tenant-table thead th[b-6qn1jxn1xs] {
    background: var(--color-bg-hover);
    border-bottom: 1px solid var(--color-border-card);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.75rem 1rem;
    white-space: nowrap;
}

.tenant-table tbody td[b-6qn1jxn1xs] {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text);
}

.tenant-table tbody tr:hover[b-6qn1jxn1xs] {
    background: var(--color-bg-hover);
    border-bottom: none;
}

.badge-active[b-6qn1jxn1xs] {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--color-success);
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.3rem 0.65rem;
    border-radius: 2rem;
}

.badge-inactive[b-6qn1jxn1xs] {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.3rem 0.65rem;
    border-radius: 2rem;
}

/* ============================
   FORM LAYOUT
   ============================ */
.onboard-form-content[b-6qn1jxn1xs] {
    display: flex;
    gap: 0.75rem;
}

.onboard-sections[b-6qn1jxn1xs] {
    flex: 1;
    min-width: 0;
}

/* ============================
   SECTION CARDS (::deep to reach child components)
   ============================ */
[b-6qn1jxn1xs] .onboard-section-card {
    background: var(--color-surface);
    border: 2px solid var(--color-border-card);
    border-radius: 0.75rem;
    padding: 1.75rem 2rem;
    margin-bottom: 1.25rem;
}

[b-6qn1jxn1xs] .section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

[b-6qn1jxn1xs] .section-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-heading);
}

[b-6qn1jxn1xs] .section-icon {
    color: var(--color-primary);
    font-size: 1.1rem;
}

/* ============================
   FORM CONTROLS (::deep)
   ============================ */
[b-6qn1jxn1xs] .section-body .form-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-heading);
    margin-bottom: 0.35rem;
}

[b-6qn1jxn1xs] .section-body .form-control,
[b-6qn1jxn1xs] .section-body .form-select {
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    color: var(--color-heading);
    background-color: var(--color-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
}

[b-6qn1jxn1xs] .section-body .form-control::placeholder {
    color: var(--color-text-faint);
}

[b-6qn1jxn1xs] .section-body .form-control:focus,
[b-6qn1jxn1xs] .section-body .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

[b-6qn1jxn1xs] .section-body .form-control[readonly] {
    background-color: #f9fafb;
    color: var(--color-text-muted);
}

[b-6qn1jxn1xs] .section-body .form-check-label {
    font-size: 0.875rem;
    color: var(--color-text);
}

[b-6qn1jxn1xs] .section-body .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Toggle switch green */
[b-6qn1jxn1xs] .section-body .form-switch .form-check-input:checked {
    background-color: #10b981;
    border-color: #10b981;
}

[b-6qn1jxn1xs] .status-label {
    font-weight: 600;
    color: #10b981;
}

/* Input group (password + regen) */
[b-6qn1jxn1xs] .section-body .input-group .btn {
    border-color: var(--color-border);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
    background: #f9fafb;
}

[b-6qn1jxn1xs] .section-body .input-group .btn:hover {
    background: #f3f4f6;
    color: var(--color-heading);
}

/* Validation messages */
[b-6qn1jxn1xs] .validation-message {
    font-size: 0.8rem;
    color: #ef4444;
    margin-top: 0.2rem;
}

/* Invalid field borders */
[b-6qn1jxn1xs] .section-body .form-control.invalid,
[b-6qn1jxn1xs] .section-body .form-select.invalid,
[b-6qn1jxn1xs] .section-body .form-control.modified.invalid,
[b-6qn1jxn1xs] .section-body .form-select.modified.invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 0.15rem rgba(239, 68, 68, 0.15);
}

[b-6qn1jxn1xs] .section-body .form-control.invalid:focus,
[b-6qn1jxn1xs] .section-body .form-select.invalid:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.2);
}

/* Valid field borders */
[b-6qn1jxn1xs] .section-body .form-control.modified.valid,
[b-6qn1jxn1xs] .section-body .form-select.modified.valid {
    border-color: #10b981;
}

/* Upload zones */
[b-6qn1jxn1xs] .upload-zone-wrapper .upload-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-heading);
    margin-bottom: 0.35rem;
}

[b-6qn1jxn1xs] .upload-zone {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 0.75rem;
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-6qn1jxn1xs] .upload-zone:hover,
[b-6qn1jxn1xs] .upload-zone:focus-within {
    border-color: var(--color-primary);
    background-color: #f0f7ff;
}

[b-6qn1jxn1xs] .upload-zone.has-preview {
    border-style: solid;
    border-color: var(--color-border);
}

[b-6qn1jxn1xs] .upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

[b-6qn1jxn1xs] .upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    pointer-events: none;
}

[b-6qn1jxn1xs] .upload-icon {
    font-size: 1.75rem;
    color: var(--color-text-faint);
}

[b-6qn1jxn1xs] .upload-link {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

[b-6qn1jxn1xs] .upload-hint {
    color: var(--color-text-faint);
    font-size: 0.78rem;
}

[b-6qn1jxn1xs] .preview-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    pointer-events: auto;
    z-index: 1;
}

[b-6qn1jxn1xs] .preview-image {
    max-height: 64px;
    max-width: 160px;
    object-fit: contain;
    border-radius: 0.375rem;
}

[b-6qn1jxn1xs] .preview-filename {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    word-break: break-all;
    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* ============================
   RESPONSIVE
   ============================ */

/* Tablets */
@media (max-width: 768px) {
    .onboard-header[b-6qn1jxn1xs] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .onboard-header-actions[b-6qn1jxn1xs] {
        width: 100%;
        display: flex;
    }

    .onboard-form-content[b-6qn1jxn1xs] {
        flex-direction: column;
    }

    [b-6qn1jxn1xs] .onboard-section-card {
        padding: 1.25rem 1rem;
    }

    .tenant-list-toolbar[b-6qn1jxn1xs] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .tenant-search[b-6qn1jxn1xs] {
        width: 100%;
    }
}

/* Small tablets / large phones */
@media (max-width: 576px) {
    .onboard-page[b-6qn1jxn1xs] {
        padding: 0 0 1.5rem;
    }

    .onboard-header[b-6qn1jxn1xs] {
        padding: 1rem;
        border-radius: 0.5rem;
    }

    .onboard-title[b-6qn1jxn1xs] {
        font-size: 1.05rem;
    }

    .onboard-subtitle[b-6qn1jxn1xs] {
        font-size: 0.78rem;
    }

    .onboard-header-actions[b-6qn1jxn1xs] {
        gap: 0.5rem;
    }

    [b-6qn1jxn1xs] .onboard-section-card {
        padding: 1rem 0.85rem;
        border-radius: 0.5rem;
        margin-bottom: 0.85rem;
    }

    [b-6qn1jxn1xs] .section-header {
        margin-bottom: 1rem;
    }

    [b-6qn1jxn1xs] .section-header h3 {
        font-size: 0.95rem;
    }

    [b-6qn1jxn1xs] .section-body .form-label {
        font-size: 0.8rem;
    }

    [b-6qn1jxn1xs] .section-body .form-control,
    [b-6qn1jxn1xs] .section-body .form-select {
        font-size: 0.85rem;
        padding: 0.5rem 0.65rem;
    }

    [b-6qn1jxn1xs] .upload-zone {
        min-height: 110px;
        padding: 1.25rem 1rem;
    }

    [b-6qn1jxn1xs] .upload-icon {
        font-size: 1.5rem;
    }

    [b-6qn1jxn1xs] .upload-link {
        font-size: 0.82rem;
    }

    [b-6qn1jxn1xs] .upload-hint {
        font-size: 0.72rem;
    }
}
/* /Components/Pages/SuperAdmin/OnboardCompany.razor.rz.scp.css */
/* ============================
   ONBOARD PAGE CONTAINER
   ============================ */
.onboard-page[b-v1w5jz9p72] {
    width: 100%;
    padding: 0 0 2rem;
}

/* ============================
   HEADER CARD
   ============================ */
.onboard-header[b-v1w5jz9p72] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-surface);
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 1.25rem 1.75rem;
    margin-bottom: 1.25rem;
    position: sticky;
    top: 58px;
    z-index: 100;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.onboard-header.scrolled[b-v1w5jz9p72] {
    background: var(--color-surface);
    border-color: var(--color-border-card);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.onboard-title[b-v1w5jz9p72] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0;
    line-height: 1.3;
}

.onboard-subtitle[b-v1w5jz9p72] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0.2rem 0 0;
}

.onboard-header-actions[b-v1w5jz9p72] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
}

/* ============================
   FORM LAYOUT
   ============================ */
.onboard-form-content[b-v1w5jz9p72] {
    display: flex;
    gap: 0.75rem;
}

.onboard-sections[b-v1w5jz9p72] {
    flex: 1;
    min-width: 0;
}

/* ============================
   STEP INDICATOR (left dots)
   ============================ */
.step-indicator[b-v1w5jz9p72] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-top: 2rem;
    flex-shrink: 0;
    width: 18px;
}

.step-dot[b-v1w5jz9p72] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    cursor: pointer;
    padding: 0;
    transition: all 0.2s;
    position: relative;
}

.step-dot[b-v1w5jz9p72]::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 12px;
    background: var(--color-border);
}

.step-dot:last-child[b-v1w5jz9p72]::after {
    display: none;
}

.step-dot.active[b-v1w5jz9p72] {
    border-color: #6366f1;
    background: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.step-dot.completed[b-v1w5jz9p72] {
    border-color: #6366f1;
    background: #6366f1;
}

.step-dot:hover[b-v1w5jz9p72] {
    border-color: #6366f1;
}

/* ============================
   SECTION CARDS (::deep to reach child components)
   ============================ */
[b-v1w5jz9p72] .onboard-section-card {
    background: var(--color-surface);
    border: 2px solid var(--color-border-card);
    border-radius: 0.75rem;
    padding: 1.75rem 2rem;
    margin-bottom: 1.25rem;
}

[b-v1w5jz9p72] .section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

[b-v1w5jz9p72] .section-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-heading);
}

[b-v1w5jz9p72] .section-icon {
    color: var(--color-primary);
    font-size: 1.1rem;
}

/* ============================
   FORM CONTROLS (::deep)
   ============================ */
[b-v1w5jz9p72] .section-body .form-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-heading);
    margin-bottom: 0.35rem;
}

[b-v1w5jz9p72] .section-body .form-control,
[b-v1w5jz9p72] .section-body .form-select {
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    color: var(--color-heading);
    background-color: var(--color-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
}

[b-v1w5jz9p72] .section-body .form-control::placeholder {
    color: var(--color-text-faint);
}

[b-v1w5jz9p72] .section-body .form-control:focus,
[b-v1w5jz9p72] .section-body .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

[b-v1w5jz9p72] .section-body .form-control[readonly] {
    background-color: #f9fafb;
    color: #6b7280;
}

[b-v1w5jz9p72] .section-body .form-check-label {
    font-size: 0.875rem;
    color: var(--color-text);
}

[b-v1w5jz9p72] .section-body .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Toggle switch green */
[b-v1w5jz9p72] .section-body .form-switch .form-check-input:checked {
    background-color: #10b981;
    border-color: #10b981;
}

[b-v1w5jz9p72] .status-label {
    font-weight: 600;
    color: #10b981;
}

/* Input group (password + regen) */
[b-v1w5jz9p72] .section-body .input-group .btn {
    border-color: var(--color-border);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
    background: #f9fafb;
}

[b-v1w5jz9p72] .section-body .input-group .btn:hover {
    background: #f3f4f6;
    color: var(--color-heading);
}
[b-v1w5jz9p72] .validation-message {
    font-size: 0.8rem;
    color: #ef4444;
    margin-top: 0.2rem;
}

/* Invalid field borders */
[b-v1w5jz9p72] .section-body .form-control.invalid,
[b-v1w5jz9p72] .section-body .form-select.invalid,
[b-v1w5jz9p72] .section-body .form-control.modified.invalid,
[b-v1w5jz9p72] .section-body .form-select.modified.invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 0.15rem rgba(239, 68, 68, 0.15);
}

[b-v1w5jz9p72] .section-body .form-control.invalid:focus,
[b-v1w5jz9p72] .section-body .form-select.invalid:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.2);
}

/* Valid field borders */
[b-v1w5jz9p72] .section-body .form-control.modified.valid,
[b-v1w5jz9p72] .section-body .form-select.modified.valid {
    border-color: #10b981;
}

/* Upload zones */
[b-v1w5jz9p72] .upload-zone-wrapper .upload-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-heading);
    margin-bottom: 0.35rem;
}

[b-v1w5jz9p72] .upload-zone {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 0.75rem;
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-v1w5jz9p72] .upload-zone:hover,
[b-v1w5jz9p72] .upload-zone:focus-within {
    border-color: var(--color-primary);
    background-color: #f0f7ff;
}

[b-v1w5jz9p72] .upload-zone.has-preview {
    border-style: solid;
    border-color: #e2e5ea;
}

[b-v1w5jz9p72] .upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

[b-v1w5jz9p72] .upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    pointer-events: none;
}

[b-v1w5jz9p72] .upload-icon {
    font-size: 1.75rem;
    color: var(--color-text-faint);
}

[b-v1w5jz9p72] .upload-link {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

[b-v1w5jz9p72] .upload-hint {
    color: #9ca3af;
    font-size: 0.78rem;
}

[b-v1w5jz9p72] .preview-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    pointer-events: auto;
    z-index: 1;
}

[b-v1w5jz9p72] .preview-image {
    max-height: 64px;
    max-width: 160px;
    object-fit: contain;
    border-radius: 0.375rem;
}

[b-v1w5jz9p72] .preview-filename {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    word-break: break-all;
    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* ============================
   RESPONSIVE
   ============================ */

/* Tablets */
@media (max-width: 768px) {
    .onboard-header[b-v1w5jz9p72] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .onboard-header-actions[b-v1w5jz9p72] {
        width: 100%;
        display: flex;
    }

    .step-indicator[b-v1w5jz9p72] {
        display: none;
    }

    .onboard-form-content[b-v1w5jz9p72] {
        flex-direction: column;
    }

    [b-v1w5jz9p72] .onboard-section-card {
        padding: 1.25rem 1rem;
    }
}

/* Small tablets / large phones */
@media (max-width: 576px) {
    .onboard-page[b-v1w5jz9p72] {
        padding: 0 0 1.5rem;
    }

    .onboard-header[b-v1w5jz9p72] {
        padding: 1rem;
        border-radius: 0.5rem;
    }

    .onboard-title[b-v1w5jz9p72] {
        font-size: 1.05rem;
    }

    .onboard-subtitle[b-v1w5jz9p72] {
        font-size: 0.78rem;
    }

    .onboard-header-actions[b-v1w5jz9p72] {
        gap: 0.5rem;
    }

    [b-v1w5jz9p72] .onboard-section-card {
        padding: 1rem 0.85rem;
        border-radius: 0.5rem;
        margin-bottom: 0.85rem;
    }

    [b-v1w5jz9p72] .section-header {
        margin-bottom: 1rem;
    }

    [b-v1w5jz9p72] .section-header h3 {
        font-size: 0.95rem;
    }

    [b-v1w5jz9p72] .section-body .form-label {
        font-size: 0.8rem;
    }

    [b-v1w5jz9p72] .section-body .form-control,
    [b-v1w5jz9p72] .section-body .form-select {
        font-size: 0.85rem;
        padding: 0.5rem 0.65rem;
    }

    [b-v1w5jz9p72] .upload-zone {
        min-height: 110px;
        padding: 1.25rem 1rem;
    }

    [b-v1w5jz9p72] .upload-icon {
        font-size: 1.5rem;
    }

    [b-v1w5jz9p72] .upload-link {
        font-size: 0.82rem;
    }

    [b-v1w5jz9p72] .upload-hint {
        font-size: 0.72rem;
    }
}
/* /Components/Pages/SuperAdmin/ViewCompany.razor.rz.scp.css */
/* ============================
   VIEW PAGE
   ============================ */
.view-page[b-y71cqz3kc6] {
    width: 100%;
    padding: 1.25rem;
    min-height: calc(var(--vh-full) - 50px);
}

/* ============================
   COMPANY HEADER CARD
   ============================ */
.company-header-card[b-y71cqz3kc6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-surface);
    border: 2px solid var(--color-border-card);
    border-radius: 0.75rem;
    padding: 1.5rem 2rem;
    margin-bottom: 1.25rem;
}

.company-header-left[b-y71cqz3kc6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.back-btn[b-y71cqz3kc6] {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    padding: 0.25rem;
    text-decoration: none;
}

.back-btn:hover[b-y71cqz3kc6] {
    color: var(--color-text-dark);
}

.company-avatar[b-y71cqz3kc6] {
    width: 52px;
    height: 52px;
    border-radius: 0.75rem;
    background: var(--color-primary);
    color: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 700;
    flex-shrink: 0;
}

.company-name-row[b-y71cqz3kc6] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.company-name[b-y71cqz3kc6] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0;
}

/* Status badges — base styles from global site.css */
/* Only override font-size for the header context */
.status-badge[b-y71cqz3kc6] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.status-badge i[b-y71cqz3kc6] {
    font-size: 0.4rem;
}

/* Plan badges — uses global .plan-badge classes from site.css */

.company-header-info[b-y71cqz3kc6] {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.company-meta[b-y71cqz3kc6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    flex-wrap: wrap;
}

.company-meta > span[b-y71cqz3kc6] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.company-meta i[b-y71cqz3kc6] {
    margin-right: 0.25rem;
    color: var(--color-text-faint);
}

.meta-link[b-y71cqz3kc6] {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.meta-link:hover[b-y71cqz3kc6] {
    color: #1d4ed8;
    text-decoration: underline;
}

.company-header-actions[b-y71cqz3kc6] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
}

/* ============================
   INFO CARDS ROW (3 columns)
   ============================ */
.info-cards-row[b-y71cqz3kc6] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.info-card[b-y71cqz3kc6] {
    background: var(--color-surface);
    border: 2px solid var(--color-border-card);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.info-card-title[b-y71cqz3kc6] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-faint);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 1.25rem;
}

.info-item[b-y71cqz3kc6] {
    margin-bottom: 0;
}

.info-label[b-y71cqz3kc6] {
    font-size: 0.78rem;
    color: var(--color-text-faint);
    font-weight: 500;
    display: block;
    margin-bottom: 0.2rem;
}

.info-value[b-y71cqz3kc6] {
    font-size: 0.9rem;
    color: var(--color-heading);
    font-weight: 500;
}

.info-value i[b-y71cqz3kc6] {
    color: var(--color-text-faint);
    margin-right: 0.35rem;
    font-size: 0.85rem;
}

.plan-value[b-y71cqz3kc6] {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1rem;
}

.info-divider[b-y71cqz3kc6] {
    border-color: var(--color-border-light);
    margin: 0.85rem 0;
}

.info-row-pair[b-y71cqz3kc6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Manager section */
.manager-profile[b-y71cqz3kc6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0;
}

.manager-avatar[b-y71cqz3kc6] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-border-card);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

.manager-name[b-y71cqz3kc6] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-heading);
}

.manager-title[b-y71cqz3kc6] {
    font-size: 0.82rem;
    color: var(--color-primary);
    font-weight: 500;
}

.manager-detail-row[b-y71cqz3kc6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0;
}

.info-value-right[b-y71cqz3kc6] {
    font-size: 0.85rem;
    color: var(--color-heading);
    font-weight: 500;
    text-align: right;
}

/* ============================
   METRIC CARDS ROW
   ============================ */
.metric-cards-row[b-y71cqz3kc6] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

/* ============================
   ACTIVITY LOGS CARD
   ============================ */
.activity-card[b-y71cqz3kc6] {
    background: var(--color-surface);
    border: 1px solid var(--color-border-card);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

.activity-header[b-y71cqz3kc6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.activity-title[b-y71cqz3kc6] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0;
}

.activity-title i[b-y71cqz3kc6] {
    color: var(--color-primary);
}

.activity-subtitle[b-y71cqz3kc6] {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin: 0.2rem 0 0;
}

.activity-table[b-y71cqz3kc6] {
    margin: 0;
    font-size: 0.875rem;
}

.activity-table thead th[b-y71cqz3kc6] {
    background: transparent;
    border-bottom: 1px solid var(--color-border-card);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--color-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.65rem 1rem;
}

.activity-table tbody td[b-y71cqz3kc6] {
    padding: 0.85rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text);
}

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

.log-user[b-y71cqz3kc6] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.log-avatar[b-y71cqz3kc6] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-border-card);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.log-name[b-y71cqz3kc6] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-heading);
}

.log-email[b-y71cqz3kc6] {
    font-size: 0.78rem;
    color: var(--color-text-faint);
}

.action-badge[b-y71cqz3kc6] {
    display: inline-block;
    background: var(--color-border-light);
    color: var(--color-text);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.3rem 0.65rem;
    border-radius: 0.375rem;
    border: 1px solid var(--color-border-card);
}

.log-details[b-y71cqz3kc6] {
    font-weight: 500;
    color: var(--color-heading);
}

.log-time[b-y71cqz3kc6] {
    font-size: 0.82rem;
    color: var(--color-text-faint);
    white-space: nowrap;
}

.log-status-badge[b-y71cqz3kc6] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.log-status-badge[b-y71cqz3kc6]::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.log-status-active[b-y71cqz3kc6] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.log-status-active[b-y71cqz3kc6]::before {
    background: var(--color-success-dot);
}

.log-status-inactive[b-y71cqz3kc6] {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.log-status-inactive[b-y71cqz3kc6]::before {
    background: var(--color-danger-dot);
}

.designation-badge[b-y71cqz3kc6] {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-primary);
    background: rgba(59, 130, 246, 0.08);
    padding: 0.25rem 0.6rem;
    border-radius: 0.375rem;
    white-space: nowrap;
}

/* ============================
   ACTIVITY LOG PAGINATION
   ============================ */
.log-table-footer[b-y71cqz3kc6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid var(--color-border-light);
    gap: 16px;
}

.log-showing-info[b-y71cqz3kc6] {
    font-size: 0.8125rem;
    color: #7b809a;
    font-weight: 400;
    line-height: 1.5;
}

.log-pagination[b-y71cqz3kc6] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.log-page-arrow[b-y71cqz3kc6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: #7b809a;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.log-page-arrow:hover[b-y71cqz3kc6] {
    background: #e2e5e9;
    color: #344767;
}

.log-page-arrow:focus-visible[b-y71cqz3kc6] {
    box-shadow: 0 0 0 2px rgba(73, 163, 241, 0.3);
}

.log-page-num[b-y71cqz3kc6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #7b809a;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.log-page-num:hover:not(.log-page-active)[b-y71cqz3kc6] {
    background: #f0f2f5;
    color: #344767;
}

.log-page-num:focus-visible[b-y71cqz3kc6] {
    box-shadow: 0 0 0 2px rgba(73, 163, 241, 0.3);
}

.log-page-active[b-y71cqz3kc6] {
    background: var(--color-primary-gradient);
    color: var(--color-surface);
    font-weight: 700;
    box-shadow: 0 3px 5px -1px rgba(26, 115, 232, 0.2), 0 5px 12px -4px rgba(26, 115, 232, 0.3);
}

.log-page-active:hover[b-y71cqz3kc6] {
    background: var(--color-primary-gradient);
    color: #fff;
}

/* ============================
   ACTIVITY TABLE DESKTOP/MOBILE TOGGLE
   ============================ */
.log-table-desktop[b-y71cqz3kc6] {
    display: block;
}

.log-cards-mobile[b-y71cqz3kc6] {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .log-table-desktop[b-y71cqz3kc6] {
        display: none !important;
    }

    .log-cards-mobile[b-y71cqz3kc6] {
        display: flex !important;
    }
}

/* ============================
   MOBILE ACTIVITY LOG CARDS
   ============================ */

.log-card-mobile[b-y71cqz3kc6] {
    border: 1px solid var(--color-border-card);
    border-radius: 0.625rem;
    padding: 1rem;
    background: var(--color-bg-hover);
}

.log-card-header[b-y71cqz3kc6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border-light);
}

.log-card-body[b-y71cqz3kc6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.log-card-row[b-y71cqz3kc6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.log-card-label[b-y71cqz3kc6] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.log-card-value[b-y71cqz3kc6] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-heading);
    text-align: right;
}

/* ============================
   AI INSIGHT BANNER
   ============================ */
.ai-banner[b-y71cqz3kc6] {
    background: var(--color-text-dark);
    border-radius: 0.75rem;
    padding: 1.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.ai-banner-title[b-y71cqz3kc6] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ai-banner-title i[b-y71cqz3kc6] {
    color: #fbbf24;
}

.ai-disabled-badge[b-y71cqz3kc6] {
    font-size: 0.65rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    letter-spacing: 0.5px;
}

.ai-banner-desc[b-y71cqz3kc6] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0.35rem 0 0;
    max-width: 700px;
}

.btn-generate[b-y71cqz3kc6] {
    border-radius: 5px;
    padding: 0.55rem 1.5rem;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.7);
}

.btn-generate:hover[b-y71cqz3kc6] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

/* ============================
   RESPONSIVE
   ============================ */

/* Laptops / small desktops */
@media (max-width: 1280px) {
    .company-meta > span[b-y71cqz3kc6] {
        max-width: 220px;
    }
}

@media (max-width: 1024px) {
    .info-cards-row[b-y71cqz3kc6] {
        grid-template-columns: 1fr 1fr;
    }

    .metric-cards-row[b-y71cqz3kc6] {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .company-header-card[b-y71cqz3kc6] {
        padding: 1.25rem 1.5rem;
    }

    .company-meta > span[b-y71cqz3kc6] {
        max-width: 180px;
    }
}

/* Tablets */
@media (max-width: 992px) {
    .info-cards-row[b-y71cqz3kc6],
    .metric-cards-row[b-y71cqz3kc6] {
        grid-template-columns: 1fr;
    }

    .company-header-card[b-y71cqz3kc6] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .company-meta[b-y71cqz3kc6] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .company-meta > span[b-y71cqz3kc6] {
        max-width: 100%;
    }

    .ai-banner[b-y71cqz3kc6] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .log-table-footer[b-y71cqz3kc6] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .log-pagination[b-y71cqz3kc6] {
        flex-wrap: wrap;
    }
}

/* Small tablets / large phones */
@media (max-width: 768px) {
    .view-page[b-y71cqz3kc6] {
        padding: 0.75rem;
    }

    .company-header-card[b-y71cqz3kc6] {
        padding: 1rem;
    }

    .company-name[b-y71cqz3kc6] {
        font-size: 1.1rem;
    }

    .company-avatar[b-y71cqz3kc6] {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }

    .company-header-actions[b-y71cqz3kc6] {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .info-card[b-y71cqz3kc6] {
        padding: 1.15rem;
    }

    .metric-cards-row[b-y71cqz3kc6] {
        grid-template-columns: 1fr 1fr;
    }

    .activity-card[b-y71cqz3kc6] {
        padding: 1rem;
    }

    .log-table-footer[b-y71cqz3kc6] {
        padding: 12px 16px;
    }

    .ai-banner[b-y71cqz3kc6] {
        padding: 1.25rem 1rem;
    }

    .ai-banner-title[b-y71cqz3kc6] {
        font-size: 0.95rem;
    }

    .ai-banner-desc[b-y71cqz3kc6] {
        font-size: 0.8rem;
    }
}

/* Mobile phones */
@media (max-width: 576px) {
    .view-page[b-y71cqz3kc6] {
        padding: 0.5rem;
    }

    .company-header-card[b-y71cqz3kc6] {
        padding: 0.85rem;
        border-radius: 0.5rem;
    }

    .company-header-left[b-y71cqz3kc6] {
        gap: 0.65rem;
    }

    .company-avatar[b-y71cqz3kc6] {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
        border-radius: 0.5rem;
    }

    .company-name[b-y71cqz3kc6] {
        font-size: 1rem;
    }

    .company-name-row[b-y71cqz3kc6] {
        gap: 0.4rem;
    }

    .status-badge[b-y71cqz3kc6] {
        font-size: 0.6rem;
        padding: 0.15rem 0.45rem;
    }

    .plan-badge[b-y71cqz3kc6] {
        font-size: 0.6rem;
        padding: 0.15rem 0.45rem;
    }

    .company-meta[b-y71cqz3kc6] {
        font-size: 0.75rem;
        gap: 0.25rem;
    }

    .info-cards-row[b-y71cqz3kc6],
    .metric-cards-row[b-y71cqz3kc6] {
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .info-card[b-y71cqz3kc6] {
        padding: 1rem;
        border-radius: 0.5rem;
    }

    .info-card-title[b-y71cqz3kc6] {
        font-size: 0.7rem;
        margin-bottom: 1rem;
    }

    .metric-cards-row[b-y71cqz3kc6] {
        grid-template-columns: 1fr;
    }

    .activity-card[b-y71cqz3kc6] {
        padding: 0.75rem;
        border-radius: 0.5rem;
    }

    .activity-title[b-y71cqz3kc6] {
        font-size: 0.95rem;
    }

    .activity-subtitle[b-y71cqz3kc6] {
        font-size: 0.75rem;
    }

    .log-card-mobile[b-y71cqz3kc6] {
        padding: 0.85rem;
    }

    .log-avatar[b-y71cqz3kc6] {
        width: 32px;
        height: 32px;
        font-size: 0.65rem;
    }

    .log-name[b-y71cqz3kc6] {
        font-size: 0.82rem;
    }

    .log-email[b-y71cqz3kc6] {
        font-size: 0.72rem;
    }

    .log-table-footer[b-y71cqz3kc6] {
        padding: 10px 12px;
    }

    .log-showing-info[b-y71cqz3kc6] {
        font-size: 0.75rem;
    }

    .log-page-arrow[b-y71cqz3kc6],
    .log-page-num[b-y71cqz3kc6] {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .ai-banner[b-y71cqz3kc6] {
        padding: 1rem;
        border-radius: 0.5rem;
    }

    .ai-banner-title[b-y71cqz3kc6] {
        font-size: 0.9rem;
        flex-wrap: wrap;
    }

    .btn-generate[b-y71cqz3kc6] {
        width: 100%;
        text-align: center;
    }

    .manager-detail-row[b-y71cqz3kc6] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }

    .info-value-right[b-y71cqz3kc6] {
        text-align: left;
    }

    .info-row-pair[b-y71cqz3kc6] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}


/* /Components/Shared/ConfirmationModal.razor.rz.scp.css */
.confirm-modal-overlay[b-l1alwi7cpx] {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: confirmFadeIn-b-l1alwi7cpx 0.2s ease;
}

.confirm-modal-backdrop[b-l1alwi7cpx] {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.confirm-modal[b-l1alwi7cpx] {
    position: relative;
    z-index: 1;
    background: var(--color-surface);
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    animation: confirmSlideUp-b-l1alwi7cpx 0.25s ease;
}

.confirm-modal-header[b-l1alwi7cpx] {
    text-align: center;
    padding: 28px 28px 16px;
}

.confirm-modal-icon[b-l1alwi7cpx] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.confirm-icon-danger[b-l1alwi7cpx] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2);
}

.confirm-icon-success[b-l1alwi7cpx] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-success);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.2);
}

.confirm-modal-title[b-l1alwi7cpx] {
    margin: 0 0 6px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text-dark);
}

.confirm-modal-subtitle[b-l1alwi7cpx] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.confirm-modal-footer[b-l1alwi7cpx] {
    display: flex;
    gap: 12px;
    padding: 16px 28px 24px;
    flex-wrap: nowrap;
}

.confirm-btn[b-l1alwi7cpx] {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: all 0.2s;
    border: none;
}

.confirm-btn-cancel[b-l1alwi7cpx] {
    background: var(--color-border-light);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.confirm-btn-cancel:hover:not(:disabled)[b-l1alwi7cpx] {
    background: #e2e8f0;
    color: #334155;
}

.confirm-btn-danger[b-l1alwi7cpx] {
    background: var(--color-danger);
    color: var(--color-surface);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

.confirm-btn-danger:hover:not(:disabled)[b-l1alwi7cpx] {
    background: #b91c1c;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35);
    transform: translateY(-1px);
}

.confirm-btn-success[b-l1alwi7cpx] {
    background: #10b981;
    color: var(--color-surface);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.confirm-btn-success:hover:not(:disabled)[b-l1alwi7cpx] {
    background: #059669;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
    transform: translateY(-1px);
}

.confirm-btn-danger:disabled[b-l1alwi7cpx],
.confirm-btn-success:disabled[b-l1alwi7cpx] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.confirm-btn-cancel:disabled[b-l1alwi7cpx] {
    opacity: 0.6;
    cursor: not-allowed;
}

@keyframes confirmFadeIn-b-l1alwi7cpx {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes confirmSlideUp-b-l1alwi7cpx {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 480px) {
    .confirm-modal[b-l1alwi7cpx] {
        max-width: calc(100% - 32px);
        margin: 0 16px;
    }

    .confirm-modal-header[b-l1alwi7cpx] {
        padding: 20px 20px 12px;
    }

    .confirm-modal-footer[b-l1alwi7cpx] {
        padding: 12px 20px 20px;
        gap: 8px;
    }

    .confirm-btn[b-l1alwi7cpx] {
        padding: 10px 10px;
        font-size: 0.8rem;
    }
}
/* /Components/Shared/Footer.razor.rz.scp.css */
.app-footer[b-5o9ijec4tc] {
    padding: 20px 24px;
     color: var(--color-text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.01em;
}

.app-footer p[b-5o9ijec4tc] {
    margin: 0;
}

.app-footer strong[b-5o9ijec4tc] {
    color: #1e293b;
    font-weight: 600;
}
/* /Components/Shared/FullPageLoader.razor.rz.scp.css */
/* ═══════════════════════════════════════
   FullPageLoader – Overlay Spinner
   ═══════════════════════════════════════ */

.fpl-overlay[b-6mfeb6ay9u] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.fpl-center[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.fpl-gif[b-6mfeb6ay9u] {
    width: 100vw;
    max-height: 80vh;
    height: auto;
    object-fit: contain;
}

.fpl-message[b-6mfeb6ay9u] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: #64748b;
    letter-spacing: 0.01em;
    text-align: center;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .fpl-gif[b-6mfeb6ay9u] {
        width: 95vw;
    }

    .fpl-message[b-6mfeb6ay9u] {
        font-size: 0.85rem;
        padding: 0 16px;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .fpl-gif[b-6mfeb6ay9u] {
        width: 100vw;
    }
}
/* /Components/Shared/MetricCard.razor.rz.scp.css */
.metric-card[b-rs9rjaz3wu] {
    background: var(--color-surface);
    border: 1px solid var(--color-border-card);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.metric-header[b-rs9rjaz3wu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.metric-icon[b-rs9rjaz3wu] {
    font-size: 1rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}

.metric-icon-blue[b-rs9rjaz3wu] {
    background: var(--color-icon-blue-bg);
    color: var(--color-primary);
}

.metric-icon-indigo[b-rs9rjaz3wu] {
    background: var(--color-icon-indigo-bg);
    color: var(--color-icon-indigo);
}

.metric-icon-teal[b-rs9rjaz3wu] {
    background: var(--color-icon-teal-bg);
    color: var(--color-icon-teal);
}

.metric-label[b-rs9rjaz3wu] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.metric-body[b-rs9rjaz3wu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.metric-number[b-rs9rjaz3wu] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-heading);
    line-height: 1;
}

.metric-limit[b-rs9rjaz3wu] {
    font-size: 0.9rem;
    color: var(--color-text-faint);
    font-weight: 400;
    margin-left: 0.25rem;
}

/* Circular progress ring */
.progress-ring[b-rs9rjaz3wu] {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.progress-ring svg[b-rs9rjaz3wu] {
    width: 56px;
    height: 56px;
    transform: rotate(-90deg);
}

.ring-bg[b-rs9rjaz3wu] {
    fill: none;
    stroke: var(--color-border-card);
    stroke-width: 3;
}

.ring-fill[b-rs9rjaz3wu] {
    fill: none;
    stroke: var(--ring-color, var(--color-primary));
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.6s ease;
}

.ring-text[b-rs9rjaz3wu] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text);
}

.metric-change[b-rs9rjaz3wu] {
    font-size: 0.78rem;
    font-weight: 500;
}

.metric-change.positive[b-rs9rjaz3wu] {
    color: #10b981;
}

.metric-change svg[b-rs9rjaz3wu] {
    margin-right: 0.2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .metric-card[b-rs9rjaz3wu] {
        padding: 1.15rem;
    }

    .metric-number[b-rs9rjaz3wu] {
        font-size: 1.6rem;
    }
}

@media (max-width: 576px) {
    .metric-card[b-rs9rjaz3wu] {
        padding: 1rem;
        border-radius: 0.5rem;
    }

    .metric-number[b-rs9rjaz3wu] {
        font-size: 1.5rem;
    }

    .progress-ring[b-rs9rjaz3wu] {
        width: 48px;
        height: 48px;
    }

    .progress-ring svg[b-rs9rjaz3wu] {
        width: 48px;
        height: 48px;
    }
}
/* /Components/Shared/OnboardedCompaniesTable.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   OnboardedCompaniesTable – Scoped Styles
   ═══════════════════════════════════════════ */

/* Section container — override Bootstrap card/table defaults */
.companies-section[b-iq4gafpddb] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    color: var(--color-text);
}

 

.companies-table[b-iq4gafpddb] {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    padding: 0;
    border: none;
    table-layout: auto;
}

.companies-table thead[b-iq4gafpddb] {
    background: var(--color-bg-hover);
}

.companies-table thead tr[b-iq4gafpddb] {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.companies-table th[b-iq4gafpddb] {
    padding: 10px 24px;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    text-align: left;
    white-space: nowrap;
    line-height: 1.5;
    background: transparent;
    border: none;
    border-bottom: none;
    border-top: none;
    vertical-align: middle;
    box-shadow: none;
}

.companies-table td[b-iq4gafpddb] {
    padding: 13px 24px;
    font-size: var(--fs-base);
    color: var(--color-text);
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1.5;
    background: transparent;
    font-weight: 400;
    box-shadow: none;
}

.companies-table tbody tr[b-iq4gafpddb] {
    transition: background-color 0.1s ease;
    background: transparent;
}

.companies-table tbody tr:hover[b-iq4gafpddb] {
    background: var(--color-bg-hover);
}

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

/* ── Cell: Company Name ── */
.company-name[b-iq4gafpddb] {
    font-weight: 600;
    color: var(--color-text-dark);
    letter-spacing: -0.01em;
    font-size: 0.8125rem;
}

.company-link[b-iq4gafpddb] {
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease;
}

.company-link:hover[b-iq4gafpddb] {
    color: #4f46e5;
    text-decoration: underline;
}

/* ── Cell: Plan Badge — uses global .plan-badge classes from site.css ── */

/* ── Cell: Job Limits ── */
.job-limit[b-iq4gafpddb] {
    display: block;
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.8125rem;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

.monthly-views[b-iq4gafpddb] {
    display: block;
    font-size: 0.6875rem;
    color: var(--color-text-faint);
    margin-top: 1px;
    font-weight: 400;
    line-height: 1.4;
}

/* ── Cell: Status Badge — uses global .status-badge classes from site.css ── */

/* ── Cell: Actions ── */
.actions-group[b-iq4gafpddb] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.action-link[b-iq4gafpddb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    margin: 0;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--color-primary);
    text-decoration: none;
    background: var(--color-info-light);
    transition: all 0.15s ease;
    letter-spacing: -0.006em;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
}

.action-link:hover[b-iq4gafpddb] {
    background: #dbeafe;
    color: #1d4ed8;
    text-decoration: none;
}

.action-link:focus-visible[b-iq4gafpddb] {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.action-menu-btn[b-iq4gafpddb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-faint);
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
    box-shadow: none;
    outline: none;
}

.action-menu-btn:hover[b-iq4gafpddb] {
    background: #f1f5f9;
    color: #475569;
}

/* ── Dropdown Menu ── */
.action-menu-wrapper[b-iq4gafpddb] {
    position: relative;
    display: inline-block;
}

.menu-backdrop[b-iq4gafpddb] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
    cursor: default;
}

[b-iq4gafpddb] .dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 50;
    min-width: 160px;
    padding: 0.35rem 0;
    border: 1px solid #e8ecf1;
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    font-size: 0.82rem;
    background: #fff;
}

[b-iq4gafpddb] .dropdown-menu.show {
    display: block;
}

[b-iq4gafpddb] .dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.45rem 1rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: #374151;
}

[b-iq4gafpddb] .dropdown-item:hover {
    background: #f1f5f9;
    color: #1f2937;
}

[b-iq4gafpddb] .dropdown-item i {
    font-size: 0.85rem;
    color: #64748b;
}

/* ── Footer / Pagination ── */
.table-footer[b-iq4gafpddb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid #f1f5f9;
    gap: 16px;
    background: #fff;
}

.showing-info[b-iq4gafpddb] {
    font-size: 0.8125rem;
    color: #7b809a;
    margin: 0;
    padding: 0;
    font-weight: 400;
    line-height: 1.5;
}

.table-pagination[b-iq4gafpddb] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Arrow buttons (prev / next) — circular */
.page-arrow[b-iq4gafpddb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: #f0f2f5;
    color: #7b809a;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.page-arrow:hover[b-iq4gafpddb] {
    background: #e2e5e9;
    color: #344767;
}

.page-arrow:focus-visible[b-iq4gafpddb] {
    box-shadow: 0 0 0 2px rgba(73, 163, 241, 0.3);
}

/* Number buttons — circular */
.page-num[b-iq4gafpddb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    color: #7b809a;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.page-num:hover:not(.page-active)[b-iq4gafpddb] {
    background: #f0f2f5;
    color: #344767;
}

.page-num:focus-visible[b-iq4gafpddb] {
    box-shadow: 0 0 0 2px rgba(73, 163, 241, 0.3);
}

/* Active page — gradient info circle */
.page-active[b-iq4gafpddb] {
    background: var(--color-primary-gradient);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 3px 5px -1px rgba(26, 115, 232, 0.2), 0 5px 12px -4px rgba(26, 115, 232, 0.3);
}

.page-active:hover[b-iq4gafpddb] {
    background: var(--color-primary-gradient);
    color: #fff;
}

/* ── Mobile Card View (hidden on desktop) ── */
.mobile-card-list[b-iq4gafpddb] {
    display: none;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    /* Hide table, show cards */
    .desktop-view[b-iq4gafpddb] {
        display: none;
    }

    .mobile-card-list[b-iq4gafpddb] {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* Card */
    .mobile-card[b-iq4gafpddb] {
        padding: 16px 12px;
        border-bottom: 1px solid #f1f5f9;
    }

    .mobile-card:last-child[b-iq4gafpddb] {
        border-bottom: none;
    }

    .mobile-card-header[b-iq4gafpddb] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 12px;
    }

    .mobile-card-body[b-iq4gafpddb] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 14px;
    }

    .mobile-card-row[b-iq4gafpddb] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .mobile-card-label[b-iq4gafpddb] {
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #64748b;
    }

    .mobile-card-value[b-iq4gafpddb] {
        font-size: 0.8125rem;
        font-weight: 500;
        color: #334155;
    }

    .mobile-card-footer[b-iq4gafpddb] {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Footer / Pagination — keep on same row */
    .table-footer[b-iq4gafpddb] {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        gap: 6px;
    }

    .showing-info[b-iq4gafpddb] {
        font-size: 0.6875rem;
        white-space: nowrap;
        flex-shrink: 1;
        min-width: 0;
    }

    .table-pagination[b-iq4gafpddb] {
        flex-wrap: nowrap;
        flex-shrink: 0;
        gap: 2px;
    }

    .page-arrow[b-iq4gafpddb],
    .page-num[b-iq4gafpddb] {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .table-header[b-iq4gafpddb] {
        padding: 16px 12px;
    }
}

/* ── Table Header (Title + Search) ── */
.table-header[b-iq4gafpddb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #f1f5f9;
    gap: 16px;
}

.table-title[b-iq4gafpddb] {
    margin: 0;
    padding: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.01em;
    line-height: 1.4;
    white-space: nowrap;
}

.search-wrap[b-iq4gafpddb] {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 280px;
    margin-left: auto;
}

.search-icon[b-iq4gafpddb] {
    position: absolute;
    left: 10px;
    color: #94a3b8;
    pointer-events: none;
}

.search-input[b-iq4gafpddb] {
    width: 100%;
    height: 34px;
    padding: 0 12px 0 32px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 0.8125rem;
    font-family: inherit;
    color: #334155;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input[b-iq4gafpddb]::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.search-input:focus[b-iq4gafpddb] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    background: #fff;
}

/* ── Empty State ── */
.empty-state[b-iq4gafpddb] {
    text-align: center;
    padding: 40px 24px;
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 500;
}
/* /Components/Shared/OtpVerificationModal.razor.rz.scp.css */
/* ═══════════════════════════════════════
   OTP Verification Modal
   ═══════════════════════════════════════ */

.otp-modal-overlay[b-s0s0ldatci] {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: otpFadeIn-b-s0s0ldatci 0.2s ease;
}

.otp-modal-backdrop[b-s0s0ldatci] {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.otp-modal[b-s0s0ldatci] {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 40%, #ffffff 100%);
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(59, 130, 246, 0.08);
    width: 100%;
    max-width: 420px;
    padding: 0;
    overflow: hidden;
    animation: otpSlideUp-b-s0s0ldatci 0.25s ease;
}

/* ── Header ── */
.otp-modal-header[b-s0s0ldatci] {
    text-align: center;
    padding: 28px 28px 16px;
}

.otp-modal-icon[b-s0s0ldatci] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background:linear-gradient(310deg, rgb(33, 82, 255), rgb(33, 212, 253));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.otp-modal-title[b-s0s0ldatci] {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-dark);
}

.otp-modal-subtitle[b-s0s0ldatci] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

/* ── Body ── */
.otp-modal-body[b-s0s0ldatci] {
    padding: 0 28px 16px;
}

.otp-label[b-s0s0ldatci] {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.otp-input[b-s0s0ldatci] {
    width: 100%;
    padding: 12px 16px;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-align: center;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-input);
    color: var(--color-text-dark);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.otp-input:focus[b-s0s0ldatci] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    background: #fff;
}

.otp-input[b-s0s0ldatci]::placeholder {
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    font-weight: 400;
    color: var(--color-text-faint);
    text-align: center;
    margin-top: 12px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.otp-resend-btn[b-s0s0ldatci] {
    background: none;
    border: none;
    color: var(--color-primary);
    font-weight: 600;
    cursor: pointer;
    font-size: 0.82rem;
    padding: 0;
    margin-left: 4px;
    transition: color 0.15s;
}

.otp-resend-btn:hover:not(:disabled)[b-s0s0ldatci] {
    color: #2563eb;
    text-decoration: underline;
}

.otp-resend-btn:disabled[b-s0s0ldatci] {
    color: #94a3b8;
    cursor: not-allowed;
}

.otp-timer-text[b-s0s0ldatci] {
    font-size: 0.82rem;
    color: #64748b;
}

.otp-timer-text strong[b-s0s0ldatci] {
    color: #ea580c;
    font-variant-numeric: tabular-nums;
}

.otp-alert-warning[b-s0s0ldatci] {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

/* ── Alerts ── */
.otp-alert[b-s0s0ldatci] {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    margin-bottom: 12px;
    text-align: center;
}

.otp-alert-danger[b-s0s0ldatci] {
    background: #fef2f2;
    color: var(--color-danger);
    border: 1px solid #fecaca;
}

.otp-alert-success[b-s0s0ldatci] {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.otp-alert-info[b-s0s0ldatci] {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

/* ── Footer ── */
.otp-modal-footer[b-s0s0ldatci] {
    display: flex;
    gap: 12px;
    padding: 16px 28px 24px;
    flex-wrap: nowrap;
}

.otp-btn[b-s0s0ldatci] {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: all 0.2s;
    border: none;
}

.otp-btn-cancel[b-s0s0ldatci] {
    background: #f1f5f9;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.otp-btn-cancel:hover:not(:disabled)[b-s0s0ldatci] {
    background: #e2e8f0;
    color: #334155;
}

.otp-btn-confirm[b-s0s0ldatci] {
    background: var(--color-primary-gradient);
    color: #fff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

.otp-btn-confirm:hover:not(:disabled)[b-s0s0ldatci] {
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
}

.otp-btn-confirm:disabled[b-s0s0ldatci] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.otp-btn-cancel:disabled[b-s0s0ldatci] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Animations ── */
@keyframes otpFadeIn-b-s0s0ldatci {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes otpSlideUp-b-s0s0ldatci {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .otp-modal[b-s0s0ldatci] {
        max-width: calc(100% - 32px);
        margin: 0 16px;
    }

    .otp-modal-header[b-s0s0ldatci] {
        padding: 20px 20px 12px;
    }

    .otp-modal-body[b-s0s0ldatci] {
        padding: 0 20px 12px;
    }

    .otp-modal-footer[b-s0s0ldatci] {
        padding: 12px 20px 20px;
        gap: 8px;
    }

    .otp-btn[b-s0s0ldatci] {
        padding: 10px 10px;
        font-size: 0.8rem;
    }
}
/* /Components/Shared/PasswordInput.razor.rz.scp.css */
[b-g53pborxux] .password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

[b-g53pborxux] .password-wrapper .field-input {
    flex: 1;
    padding-right: 2.5rem;
}

[b-g53pborxux] .password-toggle {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

[b-g53pborxux] .password-toggle:hover {
    color: #e2e8f0;
}

[b-g53pborxux] .password-toggle:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
    border-radius: 4px;
}